@graphcommerce/next-ui 9.0.0-canary.99 → 9.0.0

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -1,5 +1,6 @@
 import { useUrlQuery } from '../../hooks/useUrlQuery'
-import { LayoutOverlay, LayoutOverlayProps } from '../components/LayoutOverlay'
+import type { LayoutOverlayProps } from '../components/LayoutOverlay'
+import { LayoutOverlay } from '../components/LayoutOverlay'
 
 export type LayoutOverlayState = Omit<
   LayoutOverlayProps,
@@ -12,6 +13,8 @@ export type LayoutOverlayState = Omit<
   | 'disableInert'
   | 'widthMd'
   | 'widthSm'
+  | 'disableAnimation'
+  | 'disableDrag'
 >
 
 export function useLayoutState() {

package/LayoutParts/DesktopHeaderBadge.tsx

@@ -1,4 +1,5 @@
-import { Badge, BadgeProps } from '@mui/material'
+import type { BadgeProps } from '@mui/material'
+import { Badge } from '@mui/material'
 
 /** Note: This should _only_ be used on the Desktop, use a standard Badge for other usecases. */
 export function DesktopHeaderBadge(props: BadgeProps) {

package/LayoutParts/DesktopNavBar.tsx

@@ -1,7 +1,9 @@
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
-import { Box, BoxProps } from '@mui/material'
+import type { BoxProps } from '@mui/material'
 import React from 'react'
-import { IconSvg, IconSvgProps } from '../IconSvg'
+import type { IconSvgProps } from '../IconSvg'
+import { IconSvg } from '../IconSvg'
+import { MediaQuery } from '../MediaQuery'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
@@ -23,25 +25,27 @@ export function DesktopNavBar(props: MenuTabsProps) {
   const { children, iconLeft, iconRight, sx = [] } = props
 
   return (
-    <ScrollerProvider scrollSnapAlign='none'>
-      <Box
-        className={classes.root}
-        sx={[
-          {
-            width: '100%',
-            display: { xs: 'none', md: 'grid' },
-            alignItems: 'center',
-            position: 'relative',
-            pointerEvents: 'all',
-            gridTemplateColumns: `auto 1fr auto`,
-          },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
-      >
+    <MediaQuery
+      component='span'
+      query={(theme) => theme.breakpoints.up('md')}
+      display='grid'
+      className={classes.root}
+      sx={[
+        {
+          width: '100%',
+          alignItems: 'center',
+          position: 'relative',
+          pointerEvents: 'all',
+          gridTemplateColumns: 'auto 1fr auto',
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <ScrollerProvider scrollSnapAlign='none'>
         <Scroller
           hideScrollbar
           sx={(theme) => ({
-            gridArea: `1 / 1 / 1 / 4`,
+            gridArea: '1 / 1 / 1 / 4',
             columnGap: theme.spacings.md,
             padding: `0 ${theme.spacings.md}`,
             gridAutoColumns: 'min-content',
@@ -53,7 +57,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
 
         <ScrollerButton
           sxContainer={{
-            gridArea: `1 / 1 / 1 / 2`,
+            gridArea: '1 / 1 / 1 / 2',
             pointerEvents: 'none',
             '& > *': { pointerEvents: 'all' },
           }}
@@ -77,7 +81,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
 
         <ScrollerButton
           sxContainer={{
-            gridArea: `1 / 3 / 1 / 4`,
+            gridArea: '1 / 3 / 1 / 4',
             pointerEvents: 'none',
             '& > *': {
               pointerEvents: 'all',
@@ -100,8 +104,8 @@ export function DesktopNavBar(props: MenuTabsProps) {
         >
           <IconSvg src={iconRight ?? iconChevronRight} />
         </ScrollerButton>
-      </Box>
-    </ScrollerProvider>
+      </ScrollerProvider>
+    </MediaQuery>
   )
 }
 DesktopNavBar.selectors = selectors

package/LayoutParts/DesktopNavBarItem.tsx

@@ -1,12 +1,16 @@
-import { Box, Link, LinkProps } from '@mui/material'
+import type { LinkProps } from '@mui/material'
+import { Box, Link } from '@mui/material'
 import { useRouter } from 'next/router'
 import { extendableComponent } from '../Styles/extendableComponent'
 
 const { classes, selectors } = extendableComponent('DesktopNavItem', ['root', 'line'] as const)
 
-export type DesktopNavItemLinkProps = LinkProps<'a'>
+export type DesktopNavItemLinkProps = LinkProps<'a'> & {
+  active?: boolean
+}
 export type DesktopNavItemButtonProps = LinkProps<'div'> & {
   onClick: LinkProps<'button'>['onClick']
+  active?: boolean
 }
 
 function isLinkProps(
@@ -19,7 +23,7 @@ export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemBu
   const router = useRouter()
 
   if (!isLinkProps(props)) {
-    const { onClick, children, sx = [], ...linkProps } = props
+    const { onClick, children, sx = [], active, ...linkProps } = props
 
     return (
       <Link
@@ -40,9 +44,9 @@ export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemBu
     )
   }
 
-  const { href, children, sx = [], ...linkProps } = props
-
-  const active = router.asPath.startsWith((href ?? '').toString())
+  const { href, children, sx = [], active, ...linkProps } = props
+  const activeValue =
+    typeof active === 'undefined' ? router.asPath.startsWith((href ?? '').toString()) : active
 
   return (
     <Link
@@ -67,7 +71,7 @@ export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemBu
           background: (theme) => theme.palette.primary.main,
           margin: '0 auto',
           marginTop: '6px',
-          opacity: active ? 1 : 0,
+          opacity: activeValue ? 1 : 0,
         }}
       />
     </Link>

package/LayoutParts/Logo.tsx

@@ -1,11 +1,11 @@
-import { Image, ImageProps } from '@graphcommerce/image'
+import type { ImageProps } from '@graphcommerce/image'
+import { Image } from '@graphcommerce/image'
+import type { SxProps, Theme } from '@mui/material'
 import {
+  Box,
+  unstable_composeClasses as composeClasses,
   generateUtilityClass,
   styled,
-  SxProps,
-  Theme,
-  unstable_composeClasses as composeClasses,
-  Box,
 } from '@mui/material'
 import { useRouter } from 'next/router'
 import { forwardRef } from 'react'

package/LayoutParts/MenuFab.tsx

@@ -1,25 +1,15 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import {
-  Divider,
-  Fab,
-  ListItem,
-  Menu,
-  styled,
-  Box,
-  SxProps,
-  Theme,
-  FabProps,
-  MenuProps as MenuPropsType,
-} from '@mui/material'
+import type { FabProps, MenuProps as MenuPropsType, SxProps, Theme } from '@mui/material'
+import { Box, Divider, Fab, ListItem, Menu, styled } from '@mui/material'
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
+import { iconClose, iconMenu } from '../icons'
 import { IconSvg } from '../IconSvg'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
 import { useFabSize } from '../Theme'
-import { iconMenu, iconClose } from '../icons'
 import { useFabAnimation } from './useFabAnimation'
 
 const MotionDiv = styled(m.div)({})
@@ -42,6 +32,10 @@ type OwnerState = {
 
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
+/**
+ * @deprecated Will be removed
+ * @public
+ */
 export function MenuFab(props: MenuFabProps) {
   const {
     children,

package/LayoutParts/MenuFabItem.tsx

@@ -1,4 +1,5 @@
-import { ListItemButton, ListItemButtonProps, ListItemText } from '@mui/material'
+import type { ListItemButtonProps } from '@mui/material'
+import { ListItemButton, ListItemText } from '@mui/material'
 import { useRouter } from 'next/router'
 import { NextLink } from '../Theme'
 
@@ -6,6 +7,10 @@ export type MenuFabItemProps = Omit<ListItemButtonProps<'a'>, 'href' | 'button'>
   href: NonNullable<ListItemButtonProps<'a'>['href']>
 }
 
+/**
+ * @deprecated Will be removed
+ * @public
+ */
 export function MenuFabItem(props: MenuFabItemProps) {
   const { href, children, sx = [], ...listItemProps } = props
   const hrefString = href.toString()

package/LayoutParts/MenuFabSecondaryItem.tsx

@@ -1,18 +1,20 @@
-import { ListItemButton, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import { useRouter } from 'next/router'
-import React, { MouseEventHandler } from 'react'
+import type { MouseEventHandler } from 'react'
+import React from 'react'
 import { extendableComponent } from '../Styles'
 import { NextLink } from '../Theme'
 
 export type FabMenuSecondaryItemProps = {
   href: string
   children: React.ReactNode
-  icon: React.ReactNode
+  icon?: React.ReactNode
   sx?: SxProps<Theme>
   onClick?: MouseEventHandler<HTMLElement>
 }
 
-const compName = 'MenuFabSecondaryItem' as const
+const compName = 'MenuFabSecondaryItem'
 const parts = ['root', 'icon', 'text'] as const
 const { classes } = extendableComponent(compName, parts)
 
@@ -35,9 +37,11 @@ export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
       dense
       selected={router.asPath.startsWith(href)}
     >
-      <ListItemIcon className={classes.text} sx={{ paddingRight: '8px', minWidth: 'unset' }}>
-        {icon}
-      </ListItemIcon>
+      {icon && (
+        <ListItemIcon className={classes.text} sx={{ paddingRight: '8px', minWidth: 'unset' }}>
+          {icon}
+        </ListItemIcon>
+      )}
       <ListItemText className={classes.icon}>{children}</ListItemText>
     </ListItemButton>
   )

package/LayoutParts/MobileTopRight.tsx

@@ -0,0 +1,24 @@
+import type { MediaQueryProps } from '../MediaQuery'
+import { MediaQuery } from '../MediaQuery'
+import { sxx } from '../utils/sxx'
+
+export function MobileTopRight(props: Omit<MediaQueryProps, 'query'>) {
+  const { sx, ...rest } = props
+  return (
+    <MediaQuery
+      query={(theme) => theme.breakpoints.down('md')}
+      display='flex'
+      {...rest}
+      sx={sxx(
+        (theme) => ({
+          position: 'absolute',
+          right: theme.page.horizontal,
+          top: 0,
+          height: theme.appShell.headerHeightSm,
+          alignItems: 'center',
+        }),
+        sx,
+      )}
+    />
+  )
+}

package/LayoutParts/PlaceholderFab.tsx

@@ -1,4 +1,5 @@
-import { Fab, FabProps } from '@mui/material'
+import type { FabProps } from '@mui/material'
+import { Fab } from '@mui/material'
 
 export function PlaceholderFab(props: Omit<FabProps, 'children'>) {
   const { sx = [] } = props

package/LayoutParts/StickyBelowHeader.tsx

@@ -1,4 +1,5 @@
-import { Container, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Container } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../Styles'
 

package/LayoutParts/index.ts

@@ -10,3 +10,4 @@ export * from './MenuFabSecondaryItem'
 export * from './PlaceholderFab'
 export * from './StickyBelowHeader'
 export * from './useFabAnimation'
+export * from './MobileTopRight'

package/LazyHydrate/LazyHydrate.tsx

@@ -1,34 +1,32 @@
-import { Box, BoxProps } from '@mui/material'
-import React, {
-  useState,
-  useRef,
-  startTransition,
-  useLayoutEffect,
-  useEffect,
-  CSSProperties,
-} from 'react'
-
-// Make sure the server doesn't choke on the useLayoutEffect
-export const useLayoutEffect2 = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
+import type { BoxProps } from '@mui/material'
+import { Box } from '@mui/material'
+import type { CSSProperties } from 'react'
+import React, { startTransition, useRef, useState } from 'react'
 
 export type LazyHydrateProps = BoxProps<'div'> & {
   /**
-   * The content is always rendered on the server and on the client it uses the server rendered HTML until it is hydrated.
+   * The content is always rendered on the server and on the client it uses the server rendered HTML
+   * until it is hydrated.
    */
   children: React.ReactNode
 
   /**
-   * When a boolean is provided, the IntersectionObserver is disabled and hydrates the component when the value becomes true.
+   * When a boolean is provided, the IntersectionObserver is disabled and hydrates the component
+   * when the value becomes true.
    *
    * For example:
+   *
    * - Disable the hydration functionality completely: `<LazyHydrate hydrated={true}>`
-   * - Hydrate the component on some state `<LazyHydrate hydrated={someState}>` where someState initially is false and later becomes true.
+   * - Hydrate the component on some state `<LazyHydrate hydrated={someState}>` where someState
+   *   initially is false and later becomes true.
    */
   hydrated?: boolean
 
   /**
    * By default LazyHydrate does not defer the rendering of components when they are rendered client
-   * side, because using an IntersectionObserver on an element with no height, will cause all siblings to render at once.
+   * side, because using an IntersectionObserver on an element with no height, will cause all
+   * siblings to render at once.
    *
    * By proving a height, we can use the IntersectionObserver on the client as well.
    */
@@ -36,9 +34,8 @@ export type LazyHydrateProps = BoxProps<'div'> & {
 }
 
 /**
- * LazyHydrate can defer the hydration of a component until it becomes visible.
- * OR manually by using the hydrated prop.
- * This can be a way to improve the TBT of a page.
+ * LazyHydrate can defer the hydration of a component until it becomes visible. OR manually by using
+ * the hydrated prop. This can be a way to improve the TBT of a page.
  */
 export function LazyHydrate(props: LazyHydrateProps) {
   const { hydrated, children, height, ...elementProps } = props
@@ -47,7 +44,7 @@ export function LazyHydrate(props: LazyHydrateProps) {
   const [isHydrated, setIsHydrated] = useState(hydrated || false)
   if (!isHydrated && hydrated) setIsHydrated(true)
 
-  useLayoutEffect2(() => {
+  useIsomorphicLayoutEffect(() => {
     // If we are manually hydrating, we watch that value and do not use the IntersectionObserver
     if (isHydrated || !rootRef.current) return undefined
 
@@ -71,7 +68,7 @@ export function LazyHydrate(props: LazyHydrateProps) {
     observer.observe(rootRef.current)
 
     return () => observer.disconnect()
-  }, [hydrated, isHydrated])
+  }, [height, hydrated, isHydrated])
 
   if (isHydrated) {
     return <Box {...elementProps}>{children}</Box>

package/MediaQuery/MediaQuery.tsx

@@ -0,0 +1,111 @@
+import type { BoxProps, Theme } from '@mui/material'
+import { Box, useTheme } from '@mui/material'
+import type { CSSProperties } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+
+export type MediaQueryProps<C extends React.ElementType = 'div'> = BoxProps<C> & {
+  /** The media query to match. */
+  query: string | ((theme: Theme) => string)
+  /**
+   * The display style to apply when the media query matches.
+   *
+   * @default 'contents'
+   */
+  display?: CSSProperties['display']
+  /**
+   * The content to render when the media query matches.
+   *
+   * It doesn't matter if the children are actual compontents or if they are forwarded from some
+   * other location.
+   */
+  children: React.ReactNode
+}
+
+/**
+ * MediaQuery: Render (and hydrate) a Component based on a media query given.
+ *
+ * Example:
+ *
+ * ```tsx
+ * ;<MediaQuery query={(theme) => theme.breakpoints.up('md')}>
+ *   <MyExpensiveDesktopComponent>Only visisble on desktop</MyExpensiveDesktopComponent>
+ * </MediaQuery>
+ * ```
+ *
+ * Forwarded props also work:
+ *
+ * ```tsx
+ * function MyComponent(props: { children: React.ReactNode }) {
+ *   const { children } = props
+ *   return <MediaQuery query={(theme) => theme.breakpoints.up('md')}>{children}</MediaQuery>
+ * }
+ * ```
+ *
+ * When to use:
+ *
+ * 1. UseMediaQuery: When you are now using useMediaQuery to conditionally render content for mobile or
+ *    desktop. a. Is very slow as it has to wait for the JS to initialize on pageload. b. Can cause
+ *    CLS problems if the useMediaQuery is used to render elements in the viewport. c. Can cause LCP
+ *    issues if useMediaQuery is used to render the LCP element. d. Causes TBT problems as a
+ *    component always needs to be rerendered. (And bad TBT can cause INP problems) e. HTML isn't
+ *    present in the DOM, which can cause SEO issues.
+ * 2. CSS Media query: When you are using CSS to show or hide content based on media queries. a. Causes
+ *    TBT problems as both code paths need to be rendered. (And bad TBT can cause INP problems)
+ *
+ * How does it work? It wraps the component in a div that has 'display: contents;' when shown and
+ * 'display: none;' when hidden so it should not interfere with other styling. It conditionally
+ * hydrates the component if the query matches. If it doesn't match, it will NOT render the
+ * component (and thus not execute the JS).
+ */
+export function MediaQuery<Component extends React.ElementType = 'div'>(
+  props: MediaQueryProps<Component>,
+) {
+  const { query, sx, children, display = 'contents', ...elementProps } = props
+
+  const theme = useTheme()
+  const queryString = typeof query === 'function' ? query(theme) : query
+
+  const matchMedia = useMemo(
+    () => globalThis.matchMedia?.(queryString.replace(/^@media( ?)/m, '')),
+    [queryString],
+  )
+
+  const [matches, setMatches] = useState(matchMedia?.matches || false)
+
+  useEffect(() => {
+    if (matchMedia.matches) setMatches(true)
+
+    const controller = new AbortController()
+    matchMedia.addEventListener(
+      'change',
+      (e) => {
+        if (e.matches) setMatches(true)
+      },
+      { signal: controller.signal, once: true },
+    )
+    return () => controller.abort()
+  }, [matchMedia])
+
+  const sxVal = [
+    { display: 'none', [queryString]: { display } },
+    ...(Array.isArray(sx) ? sx : [sx]),
+  ]
+
+  if (typeof window === 'undefined' || matches) {
+    return (
+      <Box {...elementProps} sx={sxVal}>
+        {children}
+      </Box>
+    )
+  }
+
+  return (
+    <Box
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: '' }}
+      suppressHydrationWarning
+      {...elementProps}
+      sx={sxVal}
+    />
+  )
+}

package/MediaQuery/index.ts

@@ -0,0 +1 @@
+export * from './MediaQuery'

package/Navigation/components/NavigationFab.tsx

@@ -1,5 +1,6 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, styled, Box, SxProps, Theme, FabProps, useTheme } from '@mui/material'
+import type { FabProps, SxProps, Theme } from '@mui/material'
+import { Box, Fab, styled, useTheme } from '@mui/material'
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
@@ -8,7 +9,7 @@ import { useScrollY } from '../../Layout/hooks/useScrollY'
 import { useFabAnimation } from '../../LayoutParts/useFabAnimation'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { useFabSize } from '../../Theme'
-import { iconMenu, iconClose } from '../../icons'
+import { iconClose, iconMenu } from '../../icons'
 
 const MotionDiv = styled(m.div)({})
 

package/Navigation/components/NavigationItem.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { alpha, Box, ListItemButton, styled, useEventCallback } from '@mui/material'
+import { Box, ListItemButton, alpha, styled, useEventCallback } from '@mui/material'
 import React from 'react'
 import { IconSvg } from '../../IconSvg'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { NextLink } from '../../Theme'
 import { useMatchMedia } from '../../hooks'
 import { iconChevronRight } from '../../icons'
+import type { NavigationNode } from '../hooks/useNavigation'
 import {
   isNavigationButton,
   isNavigationComponent,
   isNavigationHref,
-  NavigationNode,
   useNavigation,
 } from '../hooks/useNavigation'
 import type { NavigationList } from './NavigationList'
@@ -24,7 +24,7 @@ type OwnerState = {
   column: number
 }
 
-type NavigationItemProps = NavigationNode & {
+export type NavigationItemProps = NavigationNode & {
   parentPath: string
   idx: number
   NavigationList: typeof NavigationList

package/Navigation/components/NavigationList.tsx

@@ -1,8 +1,9 @@
 import { styled } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles/extendableComponent'
-import { NavigationNode } from '../hooks/useNavigation'
-import { NavigationItem, mouseEventPref } from './NavigationItem'
+import type { NavigationNode } from '../hooks/useNavigation'
+import type { mouseEventPref } from './NavigationItem'
+import { NavigationItem } from './NavigationItem'
 
 const NavigationUList = styled('ul')({
   display: 'block',
@@ -14,7 +15,7 @@ const NavigationUList = styled('ul')({
   },
 })
 
-type NavigationItemsProps = {
+export type NavigationItemsProps = {
   parentPath?: string
   items: NavigationNode[]
   selected?: boolean

package/Navigation/components/NavigationOverlay.tsx

@@ -1,6 +1,7 @@
-import { useMotionValueValue, useMotionSelector, dvw } from '@graphcommerce/framer-utils'
+import { dvw, useMotionSelector, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { i18n } from '@lingui/core'
-import { useTheme, Box, Fab, SxProps, Theme, useEventCallback, styled } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Fab, styled, useEventCallback, useTheme } from '@mui/material'
 import { m } from 'framer-motion'
 import React, { useEffect, useRef } from 'react'
 import type { LiteralUnion } from 'type-fest'
@@ -11,9 +12,9 @@ import { OverlaySsr } from '../../Overlay/components/OverlaySsr'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { useFabSize } from '../../Theme'
 import { useMatchMedia } from '../../hooks'
-import { iconClose, iconChevronLeft } from '../../icons'
+import { iconChevronLeft, iconClose } from '../../icons'
 import { useNavigation } from '../hooks/useNavigation'
-import { mouseEventPref } from './NavigationItem'
+import type { mouseEventPref } from './NavigationItem'
 import { NavigationList } from './NavigationList'
 import { NavigationTitle } from './NavigationTitle'
 
@@ -22,8 +23,9 @@ type LayoutOverlaySize = 'floating' | 'minimal' | 'full'
 type LayoutOverlayAlign = 'start' | 'end' | 'center' | 'stretch'
 type ItemPadding = LiteralUnion<keyof Theme['spacings'], string | number>
 
-type NavigationOverlayProps = {
+export type NavigationOverlayProps = {
   sx?: SxProps<Theme>
+  overlaySx?: SxProps<Theme>
   stretchColumns?: boolean
   variantSm: LayoutOverlayVariant
   variantMd: LayoutOverlayVariant
@@ -39,12 +41,13 @@ type NavigationOverlayProps = {
 const MotionDiv = styled(m.div)({})
 
 const componentName = 'Navigation'
-const parts = ['root', 'navigation', 'header', 'column'] as const
+const parts = ['root', 'navigation', 'header', 'column', 'wrapper'] as const
 const { classes } = extendableComponent(componentName, parts)
 
 export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
   const {
     sx,
+    overlaySx,
     stretchColumns,
     variantMd,
     variantSm,
@@ -124,12 +127,15 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
           animating.set(false)
         },
       }}
-      sx={{
-        zIndex: 'drawer',
-        '& .LayoutOverlayBase-overlayPane': {
-          minWidth: itemWidthMd,
+      sx={[
+        {
+          zIndex: 'drawer',
+          '& .LayoutOverlayBase-overlayPane': {
+            minWidth: itemWidthMd,
+          },
         },
-      }}
+        ...(Array.isArray(overlaySx) ? overlaySx : [overlaySx]),
+      ]}
     >
       <MotionDiv layout layoutDependency={selectionValue} sx={{ display: 'grid' }}>
         <Box
@@ -182,6 +188,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
       </MotionDiv>
       <MotionDiv layout='position' layoutDependency={selectionValue} sx={{ display: 'grid' }}>
         <Box
+          className={classes.wrapper}
           sx={[
             (theme) => ({
               display: 'grid',