@graphcommerce/next-ui 4.21.0 → 4.22.0

package/ActionCard/ActionCard.tsx

@@ -1,6 +1,7 @@
-import { SxProps, ButtonBase, Box, Theme } from '@mui/material'
+import { SxProps, ButtonBase, Box, Theme, alpha } from '@mui/material'
 import React, { FormEvent } from 'react'
 import { extendableComponent } from '../Styles'
+import { breakpointVal } from '../Styles/breakpointVal'
 
 export type ActionCardProps = {
   sx?: SxProps<Theme>
@@ -94,12 +95,32 @@ export function ActionCard(props: ActionCardProps) {
           border: `1px solid ${theme.palette.divider}`,
           borderBottomColor: `transparent`,
           '&:first-of-type': {
-            borderTopLeftRadius: theme.shape.borderRadius,
-            borderTopRightRadius: theme.shape.borderRadius,
+            ...breakpointVal(
+              'borderTopLeftRadius',
+              theme.shape.borderRadius * 3,
+              theme.shape.borderRadius * 4,
+              theme.breakpoints.values,
+            ),
+            ...breakpointVal(
+              'borderTopRightRadius',
+              theme.shape.borderRadius * 3,
+              theme.shape.borderRadius * 4,
+              theme.breakpoints.values,
+            ),
           },
           '&:last-of-type': {
-            borderBottomLeftRadius: theme.shape.borderRadius,
-            borderBottomRightRadius: theme.shape.borderRadius,
+            ...breakpointVal(
+              'borderBottomLeftRadius',
+              theme.shape.borderRadius * 3,
+              theme.shape.borderRadius * 4,
+              theme.breakpoints.values,
+            ),
+            ...breakpointVal(
+              'borderBottomRightRadius',
+              theme.shape.borderRadius * 3,
+              theme.shape.borderRadius * 4,
+              theme.breakpoints.values,
+            ),
             borderBottom: `1px solid ${theme.palette.divider}`,
           },
         }),
@@ -118,15 +139,27 @@ export function ActionCard(props: ActionCardProps) {
         selected &&
           ((theme) => ({
             border: `2px solid ${theme.palette.secondary.main} !important`,
-            borderTopLeftRadius: theme.shape.borderRadius,
-            borderTopRightRadius: theme.shape.borderRadius,
-            borderBottomLeftRadius: theme.shape.borderRadius,
-            borderBottomRightRadius: theme.shape.borderRadius,
+            boxShadow: `0 0 0 4px ${alpha(
+              theme.palette.secondary.main,
+              theme.palette.action.hoverOpacity,
+            )} !important`,
+            ...breakpointVal(
+              'borderRadius',
+              theme.shape.borderRadius * 3,
+              theme.shape.borderRadius * 4,
+              theme.breakpoints.values,
+            ),
             padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
           })),
         disabled &&
           ((theme) => ({
-            background: theme.palette.background.default,
+            '& *': {
+              opacity: theme.palette.action.disabledOpacity,
+            },
+            background: alpha(
+              theme.palette.action.disabledBackground,
+              theme.palette.action.disabledOpacity / 10,
+            ),
           })),
 
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -156,10 +189,11 @@ export function ActionCard(props: ActionCardProps) {
       {details && (
         <Box
           className={classes.details}
-          sx={{
+          sx={(theme) => ({
+            typography: 'body2',
             gridArea: 'details',
             color: 'text.secondary',
-          }}
+          })}
         >
           {details}
         </Box>

package/ActionCard/ActionCardList.tsx

@@ -1,8 +1,6 @@
-import { Alert, Box, FormHelperText } from '@mui/material'
-import { AnimatePresence } from 'framer-motion'
+import { Alert, Box } from '@mui/material'
 import React from 'react'
 import { isFragment } from 'react-is'
-import { AnimatedRow } from '../AnimatedRow/AnimatedRow'
 import { ActionCardProps } from './ActionCard'
 
 type MultiSelect = {
@@ -67,7 +65,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
         }
 
     type ActionCardLike = React.ReactElement<
-      Pick<ActionCardProps, 'value' | 'selected' | 'disabled' | 'onClick'>
+      Pick<ActionCardProps, 'value' | 'selected' | 'disabled' | 'onClick' | 'hidden'>
     >
     function isActionCardLike(el: React.ReactElement): el is ActionCardLike {
       const hasValue = (el as ActionCardLike).props.value
@@ -113,18 +111,14 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
                 borderRight: 2,
                 borderLeftColor: 'error.main',
                 borderRightColor: 'error.main',
-                paddingLeft: theme.spacings.xs,
-                paddingRight: theme.spacings.xs,
               },
               '& > div:first-of-type.ActionCard-root': {
                 borderTop: 2,
                 borderTopColor: 'error.main',
-                paddingTop: theme.spacings.xxs,
               },
               '& > div:last-of-type.ActionCard-root': {
                 borderBottom: 2,
                 borderBottomColor: 'error.main',
-                paddingBottom: theme.spacings.xxs,
               },
             })),
         ]}
@@ -132,6 +126,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
         {childReactNodes.map((child) =>
           React.cloneElement(child, {
             onClick: handleChange,
+            hidden: !!value && value !== child.props.value,
             selected:
               child.props.selected === undefined
                 ? isValueSelected(child.props.value, value)
@@ -139,13 +134,20 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
           }),
         )}
         {error && (
-          <Alert
-            severity='error'
-            variant='filled'
-            sx={{ borderStartStartRadius: 0, borderStartEndRadius: 0 }}
-          >
-            {errorMessage}
-          </Alert>
+          <Box component='span'>
+            <Alert
+              severity='error'
+              variant='standard'
+              sx={(theme) => ({
+                marginTop: 0.5,
+                borderStartStartRadius: 0,
+                borderStartEndRadius: 0,
+                borderRadius: theme.shape.borderRadius * 1,
+              })}
+            >
+              {errorMessage}
+            </Alert>
+          </Box>
         )}
       </Box>
     )

package/ActionCard/ActionCardListForm.tsx

@@ -34,7 +34,7 @@ export function ActionCardListForm<T extends ActionCardItemBase>(
       control={control}
       name={name}
       rules={{ required, ...rules, validate: (v) => (v ? true : errorMessage) }}
-      render={({ field: { onChange, value, onBlur, ref }, fieldState, formState }) => (
+      render={({ field: { onChange, value, ref }, fieldState, formState }) => (
         <ActionCardList
           required
           value={value}
@@ -49,7 +49,6 @@ export function ActionCardListForm<T extends ActionCardItemBase>(
               key={item.value}
               value={item.value}
               selected={value === item.value}
-              hidden={!!value && value !== item.value}
               onReset={(e) => {
                 e.preventDefault()
                 onChange(null)

package/AnimatedRow/AnimatedRow.tsx

@@ -9,6 +9,7 @@ export type AnimatedRowProps = Omit<
 
 const StyledDiv = styled(m.div)({})
 
+/** @deprecated Should be replaced with Box component */
 export function AnimatedRow(props: AnimatedRowProps) {
   return (
     <StyledDiv

package/Blog/BlogHeader/BlogHeader.tsx

@@ -1,6 +1,7 @@
 import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
+import { breakpointVal } from '../../Styles/breakpointVal'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
 export type BlogHeaderProps = {
@@ -24,7 +25,12 @@ export function BlogHeader(props: BlogHeaderProps) {
           margin: `0 auto`,
           marginBottom: theme.spacings.md,
           '& img': {
-            borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+            ...breakpointVal(
+              'borderRadius',
+              theme.shape.borderRadius * 2,
+              theme.shape.borderRadius * 3,
+              theme.breakpoints.values,
+            ),
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),

package/Blog/BlogListItem/BlogListItem.tsx

@@ -2,6 +2,7 @@ import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
+import { breakpointVal } from '../../Styles/breakpointVal'
 import { responsiveVal } from '../../Styles/responsiveVal'
 import { useDateTimeFormat } from '../../hooks'
 
@@ -43,12 +44,15 @@ export function BlogListItem(props: BlogListItemProps) {
             className={classes.asset}
             sx={(theme) => ({
               display: 'grid',
+              alignContent: 'center',
               overflow: 'hidden',
               height: '100%',
               width: '100%',
-              borderRadius: responsiveVal(
+              ...breakpointVal(
+                'borderRadius',
                 theme.shape.borderRadius * 2,
                 theme.shape.borderRadius * 3,
+                theme.breakpoints.values,
               ),
               '& img': {
                 height: '100% !important',

package/Blog/BlogTags/BlogTag.tsx

@@ -15,9 +15,8 @@ export function BlogTag(props: BlogTagsProps) {
         label={title}
         sx={[
           {
-            marginRight: '8px',
-            borderRadius: '4px',
-            fontSize: '14px',
+            marginRight: 3,
+            borderRadius: 2,
           },
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Change Log
 
+## 4.22.0
+
+### Minor Changes
+
+- [#1610](https://github.com/graphcommerce-org/graphcommerce/pull/1610) [`bb94e7045`](https://github.com/graphcommerce-org/graphcommerce/commit/bb94e7045460cb671c45d612a0833731d7c20c30) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Previously when the persisted selected value didn't exist in the list of ActionCard items, all items would be hidden. In this fix we set the hidden prop in the ActionCardList component, where we check if the value exists, if not, we display all items
+
+* [#1602](https://github.com/graphcommerce-org/graphcommerce/pull/1602) [`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Default styles and layout fixes
+
+  - Scaled icons and fonts down. Size in typography is now more gradual: https://graphcommerce.vercel.app/test/typography
+  - Multiple accessibility fixes. Missing button/input labels, and fixed spacing issues resulting in high % appropriately sized tap targets
+  - Replaced responsiveVal usage with better performaning breakpointVal where possible
+  - All buttons are now Pill by default.
+  - Cleaned up checkout styles
+
+### Patch Changes
+
+- [#1601](https://github.com/graphcommerce-org/graphcommerce/pull/1601) [`04708dacc`](https://github.com/graphcommerce-org/graphcommerce/commit/04708daccc213c6ea927bc67fa3bd0d5b1fad619) Thanks [@paales](https://github.com/paales)! - Navigation now uses a single `const selection = useNavigationSelection()` motionValue to control the state of the menu, to prevent excessive rerenders.
+
+* [#1611](https://github.com/graphcommerce-org/graphcommerce/pull/1611) [`b0dc4e2e1`](https://github.com/graphcommerce-org/graphcommerce/commit/b0dc4e2e1982d502d38dd50a0f493396360a7a15) Thanks [@FrankHarland](https://github.com/FrankHarland)! - Fix overlay doule click
+
+- [#1609](https://github.com/graphcommerce-org/graphcommerce/pull/1609) [`4a5286dfe`](https://github.com/graphcommerce-org/graphcommerce/commit/4a5286dfeaa1719e594a0078f274fbab53969c4e) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Solve issue where navigation back would happen twice when closing an overlay
+
+* [#1601](https://github.com/graphcommerce-org/graphcommerce/pull/1601) [`d46d5ed0c`](https://github.com/graphcommerce-org/graphcommerce/commit/d46d5ed0cc5794391b7527fc17bbb68ec2212e33) Thanks [@paales](https://github.com/paales)! - Move to newer useScroll hook to watch body scroll, prevents deprecation warnings.
+
+* Updated dependencies [[`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315), [`01372b918`](https://github.com/graphcommerce-org/graphcommerce/commit/01372b918a291e01cbf5db40edcb40fb1c2af313)]:
+  - @graphcommerce/framer-next-pages@3.3.0
+  - @graphcommerce/framer-utils@3.2.0
+  - @graphcommerce/framer-scroller@2.1.33
+  - @graphcommerce/image@3.1.9
+
 ## 4.21.0
 
 ### Minor Changes

package/Footer/Footer.tsx

@@ -43,10 +43,11 @@ export function Footer(props: FooterProps) {
             'social social'
             'links links'
           `,
-          gap: theme.spacings.sm,
+          gap: theme.spacings.md,
           '& > *': { maxWidth: 'max-content' },
 
           [theme.breakpoints.up('sm')]: {
+            gap: theme.spacings.sm,
             gridTemplateAreas: `
               'social switcher'
               'links support'
@@ -70,7 +71,7 @@ export function Footer(props: FooterProps) {
           justifyContent: 'start',
           gridAutoFlow: 'column',
           gridArea: 'social',
-          gap: { xs: `0 ${theme.spacings.xs}`, md: `0 ${theme.spacings.sm}` },
+          gap: { xs: `0 ${theme.spacings.xs}`, md: `0 ${theme.spacings.xs}` },
           '& > *': {
             minWidth: 'min-content',
           },

package/Form/Form.tsx

@@ -1,4 +1,5 @@
 import { darken, lighten, styled, Theme } from '@mui/material'
+import { breakpointVal } from '../Styles/breakpointVal'
 import { responsiveVal } from '../Styles/responsiveVal'
 import { sx } from '../Theme/themeDefaults'
 
@@ -27,7 +28,12 @@ const styles = ({ theme, contained = false, background }: { theme: Theme } & For
       padding: `${theme.spacings.xxs} ${theme.spacings.sm}`,
       // paddingTop: theme.spacings.md,
       overflow: 'hidden',
-      borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
+      ...breakpointVal(
+        'borderRadius',
+        theme.shape.borderRadius * 3,
+        theme.shape.borderRadius * 4,
+        theme.breakpoints.values,
+      ),
     },
   ])
 

package/Form/FormActions.tsx

@@ -6,5 +6,5 @@ export const FormActions = styled('div', { name: 'FormActions' })(({ theme }) =>
   justifyContent: 'center',
   display: 'grid',
   gridAutoFlow: 'column',
-  gap: `calc(${theme.spacings.xxs} * 2)`,
+  gap: theme.spacings.sm,
 }))

package/FramerScroller/SidebarGallery.tsx

@@ -292,11 +292,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 },
               }}
             >
-              <ScrollerDots
-                layout='position'
-                layoutDependency={zoomed}
-                sx={{ backgroundColor: 'background.paper', boxShadow: 6 }}
-              />
+              <ScrollerDots layout='position' layoutDependency={zoomed} />
             </Box>
           </MotionBox>
 

package/IconSvg/IconSvg.tsx

@@ -41,10 +41,10 @@ export type IconSvgProps = StyleProps &
   Pick<ComponentProps<'svg'>, 'className' | 'style'> & { sx?: SxProps<Theme> }
 
 export const sizes = {
-  xs: rv(11, 13),
-  small: rv(12, 16),
-  medium: rv(22, 24),
-  large: rv(24, 28),
+  xs: rv(11, 12),
+  small: rv(12, 15),
+  medium: rv(22, 23),
+  large: rv(24, 26),
   xl: rv(38, 62),
   xxl: rv(96, 148),
 } as const

package/Layout/components/LayoutHeaderClose.tsx

@@ -1,4 +1,5 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
+import { i18n } from '@lingui/core'
 import { Fab } from '@mui/material'
 import { useState } from 'react'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
@@ -32,6 +33,7 @@ export function LayoutHeaderClose() {
       }}
       size='responsive'
       disabled={disabled}
+      aria-label={i18n._(/* i18n */ 'Close')}
     >
       <IconSvg src={iconClose} size='large' />
     </Fab>

package/Layout/components/LayoutHeaderContent.tsx

@@ -144,7 +144,9 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
               justifyContent: 'start',
             })}
           >
-            <MotionDiv layout={layout}>{left}</MotionDiv>
+            <MotionDiv layout={layout} sx={{ display: 'grid' }}>
+              {left}
+            </MotionDiv>
           </Box>
         )}
         <Box

package/LayoutDefault/components/LayoutDefault.tsx

@@ -1,6 +1,6 @@
 import { useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { Box, SxProps, Theme } from '@mui/material'
-import { useTransform, useViewportScroll } from 'framer-motion'
+import { useTransform, useScroll } from 'framer-motion'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { extendableComponent } from '../../Styles'
 import { useFabSize } from '../../Theme'
@@ -40,7 +40,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
   } = props
 
   const scrollWithOffset = useTransform(
-    [useViewportScroll().scrollY, useScrollOffset()],
+    [useScroll().scrollY, useScrollOffset()],
     ([y, offset]: number[]) => y + offset,
   )
 
@@ -110,7 +110,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
               [theme.breakpoints.up('sm')]: {
                 padding: `0 ${theme.page.horizontal}`,
                 position: 'sticky',
-                marginTop: `calc(${theme.appShell.headerHeightMd} * -1 + calc(${fabIconSize} / 2))`,
+                marginTop: `calc(${theme.appShell.headerHeightMd} * -1 - calc(${fabIconSize} / 2))`,
                 top: `calc(${theme.appShell.headerHeightMd} / 2 - (${fabIconSize} / 2))`,
               },
               [theme.breakpoints.down('md')]: {

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -1,6 +1,7 @@
 import { usePageContext, useGo, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { useEventCallback } from '@mui/material'
 import { usePresence } from 'framer-motion'
 import type { SetOptional } from 'type-fest'
 import { OverlayBase, LayoutOverlayBaseProps } from '../../Overlay/components/OverlayBase'
@@ -28,7 +29,7 @@ export function LayoutOverlay(props: LayoutOverlayProps) {
       <OverlayBase
         active={active}
         direction={direction}
-        onClosed={onCloseHandler}
+        onClosed={useEventCallback(() => isPresent && onCloseHandler())}
         offsetPageY={offsetPageY}
         variantMd={variantMd}
         variantSm={variantSm}

package/LayoutParts/DesktopHeaderBadge.tsx

@@ -13,13 +13,13 @@ export function DesktopHeaderBadge(props: BadgeProps) {
             bgcolor: 'text.disabled',
           },
           '& .MuiBadge-anchorOriginTopRightCircular': {
-            right: { xs: '3px', md: '8px' },
-            top: { xs: '3px', md: '8px' },
+            right: { xs: '3px', md: '5px' },
+            top: { xs: '3px', md: '5px' },
           },
           '& .MuiBadge-badge': {
             typography: 'caption',
             borderRadius: '100%',
-            padding: { xs: '3px', md: '6px' },
+            padding: { xs: '3px', md: '5px' },
           },
         },
         ...(Array.isArray(sx) ? sx : [sx]),

package/Navigation/components/NavigationItem.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Box, ListItemButton, styled, Theme, useEventCallback, useMediaQuery } from '@mui/material'
 import PageLink from 'next/link'
-import { useEffect } from 'react'
+import React from 'react'
 import { IconSvg } from '../../IconSvg'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { iconChevronRight } from '../../icons'
@@ -10,7 +11,6 @@ import {
   isNavigationComponent,
   isNavigationHref,
   NavigationNode,
-  NavigationPath,
   useNavigation,
 } from '../hooks/useNavigation'
 import type { NavigationList } from './NavigationList'
@@ -24,7 +24,7 @@ type OwnerState = {
 }
 
 type NavigationItemProps = NavigationNode & {
-  parentPath: NavigationPath
+  parentPath: string
   idx: number
   NavigationList: typeof NavigationList
 } & OwnerState &
@@ -44,16 +44,27 @@ const { withState } = extendableComponent<OwnerState, typeof componentName, type
 
 const NavigationLI = styled('li')({ display: 'contents' })
 
-export function NavigationItem(props: NavigationItemProps) {
+export const NavigationItem = React.memo<NavigationItemProps>((props) => {
   const { id, parentPath, idx, first, last, NavigationList, mouseEvent } = props
 
   const row = idx + 1
-  const { selected, select, hideRootOnNavigate, onClose, animating } = useNavigation()
+  const { selection, hideRootOnNavigate, closing, animating } = useNavigation()
 
-  const itemPath = [...parentPath, id]
-  const isSelected = selected.slice(0, itemPath.length).join('/') === itemPath.join('/')
+  const itemPath = [...(parentPath ? parentPath.split(',') : []), id]
+
+  const isSelected = useMotionValueValue(
+    selection,
+    (s) => s !== false && s.slice(0, itemPath.length).join('/') === itemPath.join('/'),
+  )
+  const hidingRoot = useMotionValueValue(
+    selection,
+    (s) => s === false || (hideRootOnNavigate && s.length > 0),
+  )
+
+  const tabIndex = useMotionValueValue(selection, (s) =>
+    s !== false && s.join(',').includes(parentPath) ? undefined : -1,
+  )
 
-  const hidingRoot = hideRootOnNavigate && selected.length > 0
   const hideItem = hidingRoot && itemPath.length === 1
 
   const column = hidingRoot ? itemPath.length - 1 : itemPath.length
@@ -61,8 +72,7 @@ export function NavigationItem(props: NavigationItemProps) {
 
   const onCloseHandler: React.MouseEventHandler<HTMLAnchorElement> = useEventCallback((e) => {
     if (!isNavigationHref(props)) return
-    const { href } = props
-    onClose?.(e, href)
+    closing.set(true)
   })
 
   const isDesktop = useMediaQuery<Theme>((theme) => theme.breakpoints.up('md'))
@@ -95,19 +105,19 @@ export function NavigationItem(props: NavigationItemProps) {
               : {},
           ]}
           disabled={isSelected}
-          tabIndex={selected.join(',').includes(parentPath.join(',')) ? undefined : -1}
+          tabIndex={tabIndex}
           onClick={(e) => {
             e.preventDefault()
-            if (!isSelected && animating.current === false) {
-              select(itemPath)
+            if (!isSelected && animating.get() === false) {
+              selection.set(itemPath)
             }
           }}
           onMouseMove={
             itemPath.length > 1 && mouseEvent === 'hover'
               ? (e) => {
-                  if (isDesktop && animating.current === false && !isSelected) {
+                  if (isDesktop && animating.get() === false && !isSelected) {
                     e.preventDefault()
-                    setTimeout(() => select(itemPath), 0)
+                    setTimeout(() => selection.set(itemPath), 0)
                   }
                 }
               : undefined
@@ -130,7 +140,7 @@ export function NavigationItem(props: NavigationItemProps) {
         <NavigationList
           items={childItems}
           selected={isSelected}
-          parentPath={itemPath}
+          parentPath={itemPath.join(',')}
           mouseEvent={mouseEvent}
         />
       </NavigationLI>
@@ -150,7 +160,7 @@ export function NavigationItem(props: NavigationItemProps) {
               gridColumnStart: column,
               gap: theme.spacings.xxs,
             })}
-            tabIndex={selected.join(',').includes(parentPath.join(',')) ? undefined : -1}
+            tabIndex={tabIndex}
             onClick={onCloseHandler}
           >
             <Box
@@ -183,4 +193,8 @@ export function NavigationItem(props: NavigationItemProps) {
   if (process.env.NODE_ENV !== 'production') throw Error('NavigationItem: unknown type')
 
   return null
+})
+
+if (process.env.NODE_ENV !== 'production') {
+  NavigationItem.displayName = 'NavigationItem'
 }

package/Navigation/components/NavigationList.tsx

@@ -1,38 +1,40 @@
 import { styled } from '@mui/material'
+import React from 'react'
 import { extendableComponent } from '../../Styles/extendableComponent'
-import { NavigationNode, NavigationPath } from '../hooks/useNavigation'
+import { NavigationNode } from '../hooks/useNavigation'
 import { NavigationItem, mouseEventPref } from './NavigationItem'
 
-const NavigationUList = styled('ul')({})
+const NavigationUList = styled('ul')({
+  display: 'block',
+  position: 'absolute',
+  left: '-10000px',
+  top: '-10000px',
+  '&.selected': {
+    display: 'contents',
+  },
+})
 
 type NavigationItemsProps = {
-  parentPath?: NavigationPath
+  parentPath?: string
   items: NavigationNode[]
   selected?: boolean
 } & mouseEventPref
 
 type OwnerState = {
   column: number
+  selected: boolean
 }
 
 const name = 'NavigationList'
 const parts = ['root'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
-// const componentName = 'NavigationItem'
-// const parts = ['li', 'ul', 'item'] as const
-
-export function NavigationList(props: NavigationItemsProps) {
-  const { items, parentPath = [], selected = false, mouseEvent } = props
+export const NavigationList = React.memo<NavigationItemsProps>((props) => {
+  const { items, parentPath = '', selected = false, mouseEvent } = props
 
+  const classes = withState({ column: 0, selected })
   return (
-    <NavigationUList
-      sx={[
-        { display: 'block', position: 'absolute', left: '-10000px', top: '-10000px' },
-        selected && { display: 'contents' },
-      ]}
-      className={withState({ column: 0 }).root}
-    >
+    <NavigationUList className={classes.root}>
       {items.map((item, idx) => (
         <NavigationItem
           NavigationList={NavigationList}
@@ -48,4 +50,8 @@ export function NavigationList(props: NavigationItemsProps) {
       ))}
     </NavigationUList>
   )
+})
+
+if (process.env.NODE_ENV !== 'production') {
+  NavigationList.displayName = 'NavigationList'
 }