Rename menu components

.changeset/eighty-rockets-yell.md

@@ -0,0 +1,28 @@
+---
+"@comet/admin": major
+---
+
+Rename menu components
+
+To better differentiate between imports from `@comet/admin` and `@mui/material`, the following components and related types have been renamed:
+
+-   `Menu` → `MainNavigation`
+-   `MenuProps` → `MainNavigationProps`
+-   `MenuClassKey` → `MainNavigationClassKey`
+-   `MenuItem` → `MainNavigationItem`
+-   `MenuItemProps` → `MainNavigationItemProps`
+-   `MenuItemClassKey` → `MainNavigationItemClassKey`
+-   `MenuCollapsibleItem` → `MainNavigationCollapsibleItem`
+-   `MenuCollapsibleItemProps` → `MainNavigationCollapsibleItemProps`
+-   `MenuCollapsibleItemClassKey` → `MainNavigationCollapsibleItemClassKey`
+-   `IMenuContext` → `MainNavigationContextValue`
+-   `IWithMenu` → `WithMainNavigation`
+-   `withMenu` → `withMainNavigation`
+-   `MenuContext` → `MainNavigationContext`
+-   `MenuItemAnchorLink` → `MainNavigationItemAnchorLink`
+-   `MenuItemAnchorLinkProps` → `MainNavigationItemAnchorLinkProps`
+-   `MenuItemGroup` → `MainNavigationItemGroup`
+-   `MenuItemGroupClassKey` → `MainNavigationItemGroupClassKey`
+-   `MenuItemGroupProps` → `MainNavigationItemGroupProps`
+-   `MenuItemRouterLink` → `MainNavigationItemRouterLink`
+-   `MenuItemRouterLinkProps` → `MainNavigationItemRouterLinkProps`

docs/docs/7-migration-guide/migration-from-v7-to-v8.md

@@ -274,6 +274,31 @@ Perform the following changes:
     }
     ```
 
+### Rename `Menu` and related components to `MainNavigation` in `@comet/admin`
+
+To better differentiate between imports from `@comet/admin` and `@mui/material`, the following components and related types have been renamed:
+
+-   `Menu` → `MainNavigation`
+-   `MenuProps` → `MainNavigationProps`
+-   `MenuClassKey` → `MainNavigationClassKey`
+-   `MenuItem` → `MainNavigationItem`
+-   `MenuItemProps` → `MainNavigationItemProps`
+-   `MenuItemClassKey` → `MainNavigationItemClassKey`
+-   `MenuCollapsibleItem` → `MainNavigationCollapsibleItem`
+-   `MenuCollapsibleItemProps` → `MainNavigationCollapsibleItemProps`
+-   `MenuCollapsibleItemClassKey` → `MainNavigationCollapsibleItemClassKey`
+-   `IMenuContent` → `MainNavigationContextValue`
+-   `IWithMenu` → `WithMainNavigation`
+-   `withMenu` → `withMainNavigation`
+-   `MenuContext` → `MainNavigationContext`
+-   `MenuItemAnchorLink` → `MainNavigationItemAnchorLink`
+-   `MenuItemAnchorLinkProps` → `MainNavigationItemAnchorLinkProps`
+-   `MenuItemGroup` → `MainNavigationItemGroup`
+-   `MenuItemGroupClassKey` → `MainNavigationItemGroupClassKey`
+-   `MenuItemGroupProps` → `MainNavigationItemGroupProps`
+-   `MenuItemRouterLink` → `MainNavigationItemRouterLink`
+-   `MenuItemRouterLinkProps` → `MainNavigationItemRouterLinkProps`
+
 ### Import `Tooltip` from `@comet/admin` package
 
 ```diff

packages/admin/admin/src/appHeader/menuButton/AppHeaderMenuButton.tsx

@@ -1,17 +1,17 @@
 import { Close, Hamburger, HamburgerClose, HamburgerOpen } from "@comet/admin-icons";
 import { ComponentsOverrides, css, IconButton, IconButtonClassKey, IconButtonProps, Theme, useThemeProps } from "@mui/material";
-import { ReactNode, useContext } from "react";
+import { ReactNode } from "react";
 
 import { createComponentSlot } from "../../helpers/createComponentSlot";
-import { MenuContext } from "../../mui/menu/Context";
+import { useMainNavigation } from "../../mui/mainNavigation/Context";
 
 export type AppHeaderMenuButtonProps = IconButtonProps;
 
 export type AppHeaderMenuButtonClassKey = IconButtonClassKey;
 
 export const AppHeaderMenuButton = (inProps: AppHeaderMenuButtonProps) => {
     const { children: propChildren, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminAppHeaderMenuButton" });
-    const { toggleOpen, open, drawerVariant } = useContext(MenuContext);
+    const { toggleOpen, open, drawerVariant } = useMainNavigation();
 
     const closeIcons: Record<typeof drawerVariant, ReactNode> = {
         temporary: <Close />,

packages/admin/admin/src/index.ts

@@ -202,18 +202,18 @@ export { useStoredState } from "./hooks/useStoredState";
 export { InputWithPopper, InputWithPopperComponents, InputWithPopperProps } from "./inputWithPopper/InputWithPopper";
 export { InputWithPopperClassKey } from "./inputWithPopper/InputWithPopper.slots";
 export { messages } from "./messages";
+export { MainNavigationCollapsibleItem, MainNavigationCollapsibleItemProps } from "./mui/mainNavigation/CollapsibleItem";
+export { MainNavigationCollapsibleItemClassKey } from "./mui/mainNavigation/CollapsibleItem.styles";
+export { useMainNavigation, WithMainNavigation, withMainNavigation } from "./mui/mainNavigation/Context";
+export { MainNavigationItem, MainNavigationItemProps } from "./mui/mainNavigation/Item";
+export { MainNavigationItemClassKey } from "./mui/mainNavigation/Item.styles";
+export { MainNavigationItemAnchorLink, MainNavigationItemAnchorLinkProps } from "./mui/mainNavigation/ItemAnchorLink";
+export { MainNavigationItemGroup, MainNavigationItemGroupClassKey, MainNavigationItemGroupProps } from "./mui/mainNavigation/ItemGroup";
+export { MainNavigationItemRouterLink, MainNavigationItemRouterLinkProps } from "./mui/mainNavigation/ItemRouterLink";
+export { MainNavigation, MainNavigationProps } from "./mui/mainNavigation/MainNavigation";
+export { MainNavigationClassKey } from "./mui/mainNavigation/MainNavigation.styles";
 export { MasterLayout, MasterLayoutClassKey, MasterLayoutProps } from "./mui/MasterLayout";
 export { MasterLayoutContext } from "./mui/MasterLayoutContext";
-export { MenuCollapsibleItem, MenuCollapsibleItemProps } from "./mui/menu/CollapsibleItem";
-export { MenuCollapsibleItemClassKey } from "./mui/menu/CollapsibleItem.styles";
-export { IMenuContext, IWithMenu, MenuContext, withMenu } from "./mui/menu/Context";
-export { MenuItem, MenuItemProps } from "./mui/menu/Item";
-export { MenuItemClassKey } from "./mui/menu/Item.styles";
-export { MenuItemAnchorLink, MenuItemAnchorLinkProps } from "./mui/menu/ItemAnchorLink";
-export { MenuItemGroup, MenuItemGroupClassKey, MenuItemGroupProps } from "./mui/menu/ItemGroup";
-export { MenuItemRouterLink, MenuItemRouterLinkProps } from "./mui/menu/ItemRouterLink";
-export { Menu, MenuProps } from "./mui/menu/Menu";
-export { MenuClassKey } from "./mui/menu/Menu.styles";
 export { MuiThemeProvider } from "./mui/ThemeProvider";
 export { renderFinalFormChildren } from "./renderFinalFormChildren";
 export { RouterBrowserRouter } from "./router/BrowserRouter";

packages/admin/admin/src/mui/MasterLayout.tsx

@@ -6,8 +6,8 @@ import { AppHeader } from "../appHeader/AppHeader";
 import { AppHeaderMenuButton } from "../appHeader/menuButton/AppHeaderMenuButton";
 import { createComponentSlot } from "../helpers/createComponentSlot";
 import { ThemedComponentBaseProps } from "../helpers/ThemedComponentBaseProps";
+import { MainNavigationContext } from "./mainNavigation/Context";
 import { MasterLayoutContext } from "./MasterLayoutContext";
-import { MenuContext } from "./menu/Context";
 
 export type MasterLayoutClassKey = "root" | "header" | "menuWrapper" | "contentWrapper";
 
@@ -96,7 +96,7 @@ export function MasterLayout(inProps: MasterLayoutProps) {
     };
 
     return (
-        <MenuContext.Provider value={{ open, toggleOpen, drawerVariant, setDrawerVariant }}>
+        <MainNavigationContext.Provider value={{ open, toggleOpen, drawerVariant, setDrawerVariant }}>
             <MasterLayoutContext.Provider value={{ headerHeight }}>
                 <CssBaseline />
                 <Root {...slotProps?.root} {...restProps}>
@@ -125,7 +125,7 @@ export function MasterLayout(inProps: MasterLayoutProps) {
                     </ContentWrapper>
                 </Root>
             </MasterLayoutContext.Provider>
-        </MenuContext.Provider>
+        </MainNavigationContext.Provider>
     );
 }
 

packages/admin/admin/src/mui/menu/CollapsibleItem.styles.ts → packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.styles.ts

@@ -2,22 +2,22 @@ import { Typography } from "@mui/material";
 import { css } from "@mui/material/styles";
 
 import { createComponentSlot } from "../../helpers/createComponentSlot";
-import { IMenuContext } from "./Context";
-import { MenuItem as CometMenuItem, MenuItemLevel } from "./Item";
+import { MainNavigationContext } from "./Context";
+import { MainNavigationItem, MainNavigationItemLevel } from "./Item";
 
-export type MenuCollapsibleItemClassKey = "root" | "open" | "childSelected" | "menuItem" | "itemTitle" | "collapsibleIndicator";
+export type MainNavigationCollapsibleItemClassKey = "root" | "open" | "childSelected" | "mainNavigationItem" | "itemTitle" | "collapsibleIndicator";
 
 export type OwnerState = {
     childSelected: boolean;
     open: boolean;
     menuOpen: boolean;
     subMenuOpen: boolean;
-    level: MenuItemLevel;
-    variant: IMenuContext["drawerVariant"];
+    level: MainNavigationItemLevel;
+    variant: MainNavigationContext["drawerVariant"];
 };
 
-export const Root = createComponentSlot("div")<MenuCollapsibleItemClassKey, OwnerState>({
-    componentName: "MenuCollapsibleItem",
+export const Root = createComponentSlot("div")<MainNavigationCollapsibleItemClassKey, OwnerState>({
+    componentName: "MainNavigationCollapsibleItem",
     slotName: "root",
     classesResolver: (ownerState) => {
         return [ownerState.open && "open", ownerState.childSelected && "childSelected"];
@@ -32,9 +32,9 @@ export const Root = createComponentSlot("div")<MenuCollapsibleItemClassKey, Owne
     `,
 );
 
-export const MenuItem = createComponentSlot(CometMenuItem)<MenuCollapsibleItemClassKey, OwnerState>({
-    componentName: "MenuCollapsibleItem",
-    slotName: "menuItem",
+export const CollapsibleItemMainNavigationItem = createComponentSlot(MainNavigationItem)<MainNavigationCollapsibleItemClassKey, OwnerState>({
+    componentName: "MainNavigationCollapsibleItem",
+    slotName: "mainNavigationItem",
 })(
     ({ theme, ownerState }) => css`
         background-color: ${theme.palette.common.white};
@@ -59,12 +59,12 @@ export const MenuItem = createComponentSlot(CometMenuItem)<MenuCollapsibleItemCl
 
         ${ownerState.childSelected &&
         css`
-            .CometAdminMenuItem-text,
-            .CometAdminMenuItem-icon {
+            .CometAdminMainNavigationItem-text,
+            .CometAdminMainNavigationItem-icon {
                 color: ${theme.palette.primary.main};
             }
 
-            .CometAdminMenuItem-primary {
+            .CometAdminMainNavigationItem-primary {
                 ${(ownerState.level === 2 || ownerState.level === 3) &&
                 css`
                     font-weight: 600;
@@ -74,8 +74,8 @@ export const MenuItem = createComponentSlot(CometMenuItem)<MenuCollapsibleItemCl
     `,
 );
 
-export const ItemTitle = createComponentSlot(Typography)<MenuCollapsibleItemClassKey>({
-    componentName: "MenuCollapsibleItem",
+export const ItemTitle = createComponentSlot(Typography)<MainNavigationCollapsibleItemClassKey>({
+    componentName: "MainNavigationCollapsibleItem",
     slotName: "itemTitle",
 })(
     ({ theme }) => css`
@@ -87,8 +87,8 @@ export const ItemTitle = createComponentSlot(Typography)<MenuCollapsibleItemClas
     `,
 );
 
-export const CollapsibleIndicator = createComponentSlot("div")<MenuCollapsibleItemClassKey, OwnerState>({
-    componentName: "MenuCollapsibleItem",
+export const CollapsibleIndicator = createComponentSlot("div")<MainNavigationCollapsibleItemClassKey, OwnerState>({
+    componentName: "MainNavigationCollapsibleItem",
     slotName: "collapsibleIndicator",
 })(
     ({ theme, ownerState }) => css`

packages/admin/admin/src/mui/menu/CollapsibleItem.tsx → packages/admin/admin/src/mui/mainNavigation/CollapsibleItem.tsx

@@ -1,25 +1,32 @@
 import { ChevronDown, ChevronRight, ChevronUp } from "@comet/admin-icons";
 import { Collapse, ComponentsOverrides, Fade, List, Menu, Theme, Typography, useThemeProps } from "@mui/material";
-import { Children, cloneElement, MouseEvent, ReactElement, ReactNode, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Children, cloneElement, MouseEvent, ReactElement, ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { matchPath, useLocation } from "react-router";
 
 import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps";
-import { CollapsibleIndicator, ItemTitle, MenuCollapsibleItemClassKey, MenuItem, OwnerState, Root } from "./CollapsibleItem.styles";
-import { MenuContext } from "./Context";
-import { MenuItem as CometMenuItem, MenuItemLevel, MenuItemProps } from "./Item";
-import { MenuItemRouterLinkProps } from "./ItemRouterLink";
-
-export type MenuChild = ReactElement<MenuCollapsibleItemProps | MenuItemRouterLinkProps | MenuItemProps>;
-
-export interface MenuCollapsibleItemProps
-    extends Omit<MenuItemProps, "slotProps">,
+import {
+    CollapsibleIndicator,
+    CollapsibleItemMainNavigationItem,
+    ItemTitle,
+    MainNavigationCollapsibleItemClassKey,
+    OwnerState,
+    Root,
+} from "./CollapsibleItem.styles";
+import { useMainNavigation } from "./Context";
+import { MainNavigationItem as CometMainNavigationItem, MainNavigationItemLevel, MainNavigationItemProps } from "./Item";
+import { MainNavigationItemRouterLinkProps } from "./ItemRouterLink";
+
+export type MainNavigationChild = ReactElement<MainNavigationCollapsibleItemProps | MainNavigationItemRouterLinkProps | MainNavigationItemProps>;
+
+export interface MainNavigationCollapsibleItemProps
+    extends Omit<MainNavigationItemProps, "slotProps">,
         ThemedComponentBaseProps<{
             root: "div";
-            menuItem: typeof CometMenuItem;
+            mainNavigationItem: typeof CometMainNavigationItem;
             itemTitle: typeof Typography;
             collapsibleIndicator: "div";
         }> {
-    children: MenuChild | MenuChild[];
+    children: MainNavigationChild | MainNavigationChild[];
     openByDefault?: boolean;
     isMenuOpen?: boolean;
     iconMapping?: {
@@ -30,7 +37,7 @@ export interface MenuCollapsibleItemProps
     };
 }
 
-export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
+export const MainNavigationCollapsibleItem = (inProps: MainNavigationCollapsibleItemProps) => {
     const {
         classes,
         level = 1,
@@ -45,7 +52,7 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
         ...restProps
     } = useThemeProps({
         props: inProps,
-        name: "CometAdminMenuCollapsibleItem",
+        name: "CometAdminMainNavigationCollapsibleItem",
     });
 
     const {
@@ -55,8 +62,8 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
         secondLevelHoverIndicator: secondLevelHoverIndicatorIcon = <ChevronRight color="inherit" fontSize="inherit" />,
     } = iconMapping ?? {};
 
-    const { drawerVariant } = useContext(MenuContext);
-    const itemLevel: MenuItemLevel = level ?? 1;
+    const { drawerVariant } = useMainNavigation();
+    const itemLevel: MainNavigationItemLevel = level ?? 1;
     const hasSelectedChild = useRef(false);
     const location = useLocation();
 
@@ -69,12 +76,14 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
     }, [isMenuOpen]);
 
     const childElements = useMemo(() => {
-        function checkIfPathInLocation(child: ReactElement<MenuCollapsibleItemProps | MenuItemRouterLinkProps | MenuItemProps>) {
+        function checkIfPathInLocation(
+            child: ReactElement<MainNavigationCollapsibleItemProps | MainNavigationItemRouterLinkProps | MainNavigationItemProps>,
+        ) {
             return "to" in child.props && matchPath(location.pathname, { path: child.props.to, strict: true });
         }
         hasSelectedChild.current = false;
 
-        return Children.map(children, (child: MenuChild) => {
+        return Children.map(children, (child: MainNavigationChild) => {
             // child is selected
             if (checkIfPathInLocation(child)) {
                 hasSelectedChild.current = true;
@@ -83,15 +92,17 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
 
             // sub child is selected
             const subChildElements =
-                "children" in child.props ? Children.map(child?.props?.children, (child: MenuChild) => child) : ([] as MenuChild[]);
-            if (subChildElements?.some((child: MenuChild) => child.props && checkIfPathInLocation(child))) {
+                "children" in child.props
+                    ? Children.map(child?.props?.children, (child: MainNavigationChild) => child)
+                    : ([] as MainNavigationChild[]);
+            if (subChildElements?.some((child: MainNavigationChild) => child.props && checkIfPathInLocation(child))) {
                 hasSelectedChild.current = true;
                 setIsSubmenuOpen(true);
             }
 
             const newItemLevel = itemLevel + 1;
 
-            return cloneElement<MenuCollapsibleItemProps | MenuItemRouterLinkProps | MenuItemProps>(child, {
+            return cloneElement<MainNavigationCollapsibleItemProps | MainNavigationItemRouterLinkProps | MainNavigationItemProps>(child, {
                 level: newItemLevel === 1 || newItemLevel === 2 || newItemLevel === 3 ? newItemLevel : undefined,
                 isMenuOpen,
                 isCollapsibleOpen: isSubmenuOpen,
@@ -157,7 +168,7 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
 
     return (
         <Root {...slotProps?.root} {...restProps} ownerState={ownerState}>
-            <MenuItem
+            <CollapsibleItemMainNavigationItem
                 id={itemId}
                 aria-haspopup="true"
                 aria-controls={isSubmenuOpen ? mouseOverMenuId : undefined}
@@ -174,7 +185,7 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
                 onClick={() => setIsSubmenuOpen(!isSubmenuOpen)}
                 secondaryAction={<CollapsibleIndicator ownerState={ownerState}>{collapsibleIndicatorIcon}</CollapsibleIndicator>}
                 ownerState={ownerState}
-                {...slotProps?.menuItem}
+                {...slotProps?.mainNavigationItem}
             />
             {!isMenuOpen && drawerVariant === "permanent" ? (
                 <Menu
@@ -215,17 +226,17 @@ export const MenuCollapsibleItem = (inProps: MenuCollapsibleItemProps) => {
 
 declare module "@mui/material/styles" {
     interface ComponentNameToClassKey {
-        CometAdminMenuCollapsibleItem: MenuCollapsibleItemClassKey;
+        CometAdminMainNavigationCollapsibleItem: MainNavigationCollapsibleItemClassKey;
     }
 
     interface ComponentsPropsList {
-        CometAdminMenuCollapsibleItem: MenuCollapsibleItemProps;
+        CometAdminMainNavigationCollapsibleItem: MainNavigationCollapsibleItemProps;
     }
 
     interface Components {
-        CometAdminMenuCollapsibleItem?: {
-            defaultProps?: Partial<ComponentsPropsList["CometAdminMenuCollapsibleItem"]>;
-            styleOverrides?: ComponentsOverrides<Theme>["CometAdminMenuCollapsibleItem"];
+        CometAdminMainNavigationCollapsibleItem?: {
+            defaultProps?: Partial<ComponentsPropsList["CometAdminMainNavigationCollapsibleItem"]>;
+            styleOverrides?: ComponentsOverrides<Theme>["CometAdminMainNavigationCollapsibleItem"];
         };
     }
 }