Rename menu components

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 { MainNavigationContext } from "../../mui/mainNavigation/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(MainNavigationContext);
+    const { toggleOpen, open, drawerVariant } = useMainNavigation();
 
     const closeIcons: Record<typeof drawerVariant, ReactNode> = {
         temporary: <Close />,

packages/admin/admin/src/index.ts

@@ -204,7 +204,7 @@ 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 { MainNavigationContext, MainNavigationContextValue, WithMainNavigation, withMainNavigation } from "./mui/mainNavigation/Context";
+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";

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

@@ -2,8 +2,8 @@ import { Typography } from "@mui/material";
 import { css } from "@mui/material/styles";
 
 import { createComponentSlot } from "../../helpers/createComponentSlot";
-import { MainNavigationContextValue } from "./Context";
-import { MainNavigationItem as CometMainNavigationItem, MainNavigationItemLevel } from "./Item";
+import { MainNavigationContext } from "./Context";
+import { MainNavigationItem, MainNavigationItemLevel } from "./Item";
 
 export type MainNavigationCollapsibleItemClassKey = "root" | "open" | "childSelected" | "mainNavigationItem" | "itemTitle" | "collapsibleIndicator";
 
@@ -13,7 +13,7 @@ export type OwnerState = {
     menuOpen: boolean;
     subMenuOpen: boolean;
     level: MainNavigationItemLevel;
-    variant: MainNavigationContextValue["drawerVariant"];
+    variant: MainNavigationContext["drawerVariant"];
 };
 
 export const Root = createComponentSlot("div")<MainNavigationCollapsibleItemClassKey, OwnerState>({
@@ -32,7 +32,7 @@ export const Root = createComponentSlot("div")<MainNavigationCollapsibleItemClas
     `,
 );
 
-export const MainNavigationItem = createComponentSlot(CometMainNavigationItem)<MainNavigationCollapsibleItemClassKey, OwnerState>({
+export const CollapsibleItemMainNavigationItem = createComponentSlot(MainNavigationItem)<MainNavigationCollapsibleItemClassKey, OwnerState>({
     componentName: "MainNavigationCollapsibleItem",
     slotName: "mainNavigationItem",
 })(

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

@@ -1,18 +1,18 @@
 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,
+    CollapsibleItemMainNavigationItem,
     ItemTitle,
     MainNavigationCollapsibleItemClassKey,
-    MainNavigationItem,
     OwnerState,
     Root,
 } from "./CollapsibleItem.styles";
-import { MainNavigationContext } from "./Context";
+import { useMainNavigation } from "./Context";
 import { MainNavigationItem as CometMainNavigationItem, MainNavigationItemLevel, MainNavigationItemProps } from "./Item";
 import { MainNavigationItemRouterLinkProps } from "./ItemRouterLink";
 
@@ -62,7 +62,7 @@ export const MainNavigationCollapsibleItem = (inProps: MainNavigationCollapsible
         secondLevelHoverIndicator: secondLevelHoverIndicatorIcon = <ChevronRight color="inherit" fontSize="inherit" />,
     } = iconMapping ?? {};
 
-    const { drawerVariant } = useContext(MainNavigationContext);
+    const { drawerVariant } = useMainNavigation();
     const itemLevel: MainNavigationItemLevel = level ?? 1;
     const hasSelectedChild = useRef(false);
     const location = useLocation();
@@ -168,7 +168,7 @@ export const MainNavigationCollapsibleItem = (inProps: MainNavigationCollapsible
 
     return (
         <Root {...slotProps?.root} {...restProps} ownerState={ownerState}>
-            <MainNavigationItem
+            <CollapsibleItemMainNavigationItem
                 id={itemId}
                 aria-haspopup="true"
                 aria-controls={isSubmenuOpen ? mouseOverMenuId : undefined}

packages/admin/admin/src/mui/mainNavigation/Context.tsx

@@ -1,16 +1,16 @@
-import { ComponentType, createContext, Dispatch, FunctionComponent, SetStateAction } from "react";
+import { ComponentType, createContext, Dispatch, FunctionComponent, SetStateAction, useContext } from "react";
 
-export interface MainNavigationContextValue {
+export interface MainNavigationContext {
     open: boolean;
     toggleOpen: () => void;
     drawerVariant: "temporary" | "permanent";
     setDrawerVariant: Dispatch<SetStateAction<"temporary" | "permanent">>;
 }
 
 export interface WithMainNavigation {
-    mainNavigation: MainNavigationContextValue;
+    mainNavigation: MainNavigationContext;
 }
-export const MainNavigationContext = createContext<MainNavigationContextValue>({
+export const MainNavigationContext = createContext<MainNavigationContext>({
     open: false,
     toggleOpen: () => {
         // nothing
@@ -26,3 +26,11 @@ export const withMainNavigation = <P extends object>(WrappedComponent: Component
         return <MainNavigationContext.Consumer>{(value) => <WrappedComponent {...props} mainNavigation={value!} />}</MainNavigationContext.Consumer>;
     };
 };
+
+export const useMainNavigation = (): MainNavigationContext => {
+    const context = useContext(MainNavigationContext);
+    if (!context) {
+        throw new Error("useMainNavigation must be used within a MainNavigationProvider");
+    }
+    return context;
+};

packages/admin/admin/src/mui/mainNavigation/Item.styles.ts

@@ -1,7 +1,7 @@
 import { css, ListItemButton, ListItemIcon, listItemIconClasses, ListItemText, listItemTextClasses } from "@mui/material";
 
 import { createComponentSlot } from "../../helpers/createComponentSlot";
-import { MainNavigationContextValue } from "./Context";
+import { MainNavigationContext } from "./Context";
 import { MainNavigationItemLevel } from "./Item";
 
 export type MainNavigationItemClassKey =
@@ -24,7 +24,7 @@ export type OwnerState = {
     hasIcon: boolean;
     hasSecondaryText: boolean;
     hasSecondaryAction: boolean;
-    variant: MainNavigationContextValue["drawerVariant"];
+    variant: MainNavigationContext["drawerVariant"];
 };
 
 export const Root = createComponentSlot(ListItemButton)<MainNavigationItemClassKey, OwnerState>({

packages/admin/admin/src/mui/mainNavigation/Item.tsx

@@ -1,8 +1,8 @@
 import { ComponentsOverrides, ListItemButton, ListItemButtonProps, ListItemIcon, ListItemText, Theme, useThemeProps } from "@mui/material";
-import { ReactElement, ReactNode, useContext } from "react";
+import { ReactElement, ReactNode } from "react";
 
 import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps";
-import { MainNavigationContext } from "./Context";
+import { useMainNavigation } from "./Context";
 import { Icon, MainNavigationItemClassKey, OwnerState, Root, Text } from "./Item.styles";
 
 export type MainNavigationItemLevel = 1 | 2 | 3;
@@ -38,7 +38,7 @@ export const MainNavigationItem = (inProps: MainNavigationItemProps) => {
         ...restProps
     } = useThemeProps({ props: inProps, name: "CometAdminMainNavigationItem" });
 
-    const { drawerVariant } = useContext(MainNavigationContext);
+    const { drawerVariant } = useMainNavigation();
 
     if (level > 3) throw new Error("Maximum nesting level of 2 exceeded.");
 

packages/admin/admin/src/mui/mainNavigation/MainNavigation.tsx

@@ -5,7 +5,7 @@ import { useHistory } from "react-router";
 import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps";
 import { MasterLayoutContext } from "../MasterLayoutContext";
 import { MainNavigationChild, MainNavigationCollapsibleItemProps } from "./CollapsibleItem";
-import { MainNavigationContext } from "./Context";
+import { useMainNavigation } from "./Context";
 import { MainNavigationItemProps } from "./Item";
 import { MainNavigationItemRouterLinkProps } from "./ItemRouterLink";
 import { MainNavigationClassKey, OwnerState, PermanentDrawer, TemporaryDrawer } from "./MainNavigation.styles";
@@ -34,7 +34,7 @@ export const MainNavigation = (inProps: MainNavigationProps) => {
         ...restProps
     } = useThemeProps({ props: inProps, name: "CometAdminMainNavigation" });
     const history = useHistory();
-    const { open, toggleOpen, setDrawerVariant, drawerVariant } = useContext(MainNavigationContext);
+    const { open, toggleOpen, setDrawerVariant, drawerVariant } = useMainNavigation();
     const initialRender = useRef(true);
     const { headerHeight } = useContext(MasterLayoutContext);
 

packages/admin/cms-admin/src/common/MasterMenu.tsx

@@ -2,16 +2,16 @@ import {
     MainNavigation,
     MainNavigationCollapsibleItem,
     MainNavigationCollapsibleItemProps,
-    MainNavigationContext,
     MainNavigationItemAnchorLink,
     MainNavigationItemAnchorLinkProps,
     MainNavigationItemGroup,
     MainNavigationItemGroupProps,
     MainNavigationItemRouterLink,
     MainNavigationItemRouterLinkProps,
+    useMainNavigation,
     useWindowSize,
 } from "@comet/admin";
-import { ReactNode, useContext, useEffect } from "react";
+import { ReactNode, useEffect } from "react";
 import { RouteProps, useRouteMatch } from "react-router-dom";
 
 import { useUserPermissionCheck } from "../userPermissions/hooks/currentUser";
@@ -137,7 +137,7 @@ export function useMenuFromMasterMenuData(items: MasterMenuData): MenuItem[] {
 
 export const MasterMenu = ({ menu, permanentMenuMinWidth = 1024 }: MasterMenuProps) => {
     const menuItems = useMenuFromMasterMenuData(menu);
-    const { open, toggleOpen } = useContext(MainNavigationContext);
+    const { open, toggleOpen } = useMainNavigation();
     const windowSize = useWindowSize();
     const match = useRouteMatch();
     const useTemporaryMenu: boolean = windowSize.width < permanentMenuMinWidth;

storybook/src/admin/mui/MenuDynamicVariants.stories.tsx

@@ -6,15 +6,15 @@ import {
     MainContent,
     MainNavigation,
     MainNavigationCollapsibleItem,
-    MainNavigationContext,
     MainNavigationItemAnchorLink,
     MainNavigationItemRouterLink,
     MasterLayout,
+    useMainNavigation,
     useWindowSize,
 } from "@comet/admin";
 import { CometColor, Dashboard, LinkExternal, Settings, Sort } from "@comet/admin-icons";
 import { Card, CardContent, Divider, Typography } from "@mui/material";
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
 import { matchPath, Route, Switch, useLocation } from "react-router";
 import { Link } from "react-router-dom";
 
@@ -24,7 +24,7 @@ const permanentMenuMinWidth = 1024;
 const pathsToAlwaysUseTemporaryMenu = ["/foo3", "/foo4"];
 
 const AppMenu = () => {
-    const { open, toggleOpen } = useContext(MainNavigationContext);
+    const { open, toggleOpen } = useMainNavigation();
     const windowSize = useWindowSize();
     const location = useLocation();
 

storybook/src/helpers/storyDecorators.tsx

@@ -1,4 +1,4 @@
-import { AppHeader, AppHeaderMenuButton, MainNavigation, MainNavigationItemRouterLink, MasterLayout, Stack } from "@comet/admin";
+import { AppHeader, AppHeaderMenuButton, MasterLayout, Menu, MenuItemRouterLink, Stack, useWindowSize } from "@comet/admin";
 import { Dashboard } from "@comet/admin-icons";
 import { useTheme } from "@mui/material";
 import { ComponentType } from "react";
@@ -11,11 +11,17 @@ export function masterLayoutDecorator() {
         </AppHeader>
     );
 
-    const MasterMenu = () => (
-        <MainNavigation>
-            <MainNavigationItemRouterLink primary="Example Page" to="/" icon={<Dashboard />} />
-        </MainNavigation>
-    );
+    const MasterMenu = () => {
+        const windowSize = useWindowSize();
+        const { breakpoints } = useTheme();
+        const useTemporaryMenu: boolean = windowSize.width < breakpoints.values.md;
+
+        return (
+            <Menu variant={useTemporaryMenu ? "temporary" : "permanent"}>
+                <MenuItemRouterLink primary="Example Page" to="/" icon={<Dashboard />} />
+            </Menu>
+        );
+    };
 
     return (Story: ComponentType) => {
         return (