@graphcommerce/next-ui 4.11.2 → 4.13.1

package/ActionCard/ActionCard.tsx

@@ -82,7 +82,7 @@ export function ActionCard(props: ActionCardProps) {
           gridTemplateAreas: `
             "image title action"
             "image details ${price ? 'price' : 'details'}"
-            "image secondaryActio additionalDetails"
+            "image secondaryAction additionalDetails"
             "after after after"
           `,
           justifyContent: 'unset',

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Change Log
 
+## 4.13.1
+
+### Patch Changes
+
+- [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce) Thanks [@paales](https://github.com/paales)! - Updated to Next.js v12.2.2 and other packages and made compatible
+
+* [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`c5c539c44`](https://github.com/graphcommerce-org/graphcommerce/commit/c5c539c44eeac524cd62ce649e132d2e00333794) Thanks [@paales](https://github.com/paales)! - Make sure the gallery doesn't scroll when overlays are opened
+
+- [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`6f69bc54c`](https://github.com/graphcommerce-org/graphcommerce/commit/6f69bc54c6e0224452817c532ae58d9c332b61ea) Thanks [@paales](https://github.com/paales)! - Prevent back button scrolling when navigating between overlays
+
+* [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43) Thanks [@paales](https://github.com/paales)! - Fix page stacking and scroll restoration when navigating
+
+* Updated dependencies [[`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce), [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43), [`b4936e961`](https://github.com/graphcommerce-org/graphcommerce/commit/b4936e96175fe80717895822e245274db05638bd)]:
+  - @graphcommerce/framer-next-pages@3.2.4
+  - @graphcommerce/framer-scroller@2.1.23
+
+## 4.13.0
+
+### Minor Changes
+
+- [#1522](https://github.com/graphcommerce-org/graphcommerce/pull/1522) [`8d8fda262`](https://github.com/graphcommerce-org/graphcommerce/commit/8d8fda2623e561cb43441110c67ffa34b692668a) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Introducing a new Navigation component that builds on the existing navigation component and tries to address the 'mega menu' question where there are tons of categories that need to be navigated quickly.
+
+* [#1522](https://github.com/graphcommerce-org/graphcommerce/pull/1522) [`cefa7b365`](https://github.com/graphcommerce-org/graphcommerce/commit/cefa7b3652b55108d2178927e3c5d98a111cf373) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Introducting a new Overlay component with is the generic part of LayoutOverlay into OverlayBase. The new Overlay is used to render the new Navigation component.
+
+### Patch Changes
+
+- Updated dependencies [[`584b683a2`](https://github.com/graphcommerce-org/graphcommerce/commit/584b683a2aedcdf5067644c8dcc0e63a5b9e894c)]:
+  - @graphcommerce/framer-scroller@2.1.22
+
+## 4.12.0
+
+### Minor Changes
+
+- [#1534](https://github.com/graphcommerce-org/graphcommerce/pull/1534) [`c756f42e5`](https://github.com/graphcommerce-org/graphcommerce/commit/c756f42e503761a497e4a5a7a02d02141df231c3) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Added the method title to the action card title for shipping methods.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.21
+
 ## 4.11.2
 
 ### Patch Changes

package/FramerScroller/SidebarGallery.tsx

@@ -119,6 +119,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
       <Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
         <MotionBox
           layout
+          layoutDependency={zoomed}
           className={classes.root}
           sx={[
             {
@@ -146,6 +147,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
         >
           <MotionBox
             layout
+            layoutDependency={zoomed}
             className={classes.scrollerContainer}
             sx={[
               {
@@ -193,6 +195,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 <MotionImageAspect
                   key={typeof image.src === 'string' ? image.src : idx}
                   layout
+                  layoutDependency={zoomed}
                   src={image.src}
                   width={image.width}
                   height={image.height}
@@ -209,6 +212,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             </Scroller>
             <MotionBox
               layout
+              layoutDependency={zoomed}
               className={classes.topRight}
               sx={{
                 display: 'grid',
@@ -243,6 +247,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             >
               <ScrollerButton
                 layout
+                layoutDependency={zoomed}
                 direction='left'
                 size='small'
                 className={classes.sliderButtons}
@@ -262,6 +267,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             >
               <ScrollerButton
                 layout
+                layoutDependency={zoomed}
                 direction='right'
                 size='small'
                 className={classes.sliderButtons}
@@ -286,7 +292,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 },
               }}
             >
-              <ScrollerDots layout sx={{ backgroundColor: 'background.paper', boxShadow: 6 }} />
+              <ScrollerDots
+                layout
+                layoutDependency={zoomed}
+                sx={{ backgroundColor: 'background.paper', boxShadow: 6 }}
+              />
             </Box>
           </MotionBox>
 
@@ -319,6 +329,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
           >
             <MotionBox
               layout
+              layoutDependency={zoomed}
               className={classes.sidebar}
               sx={{
                 boxSizing: 'border-box',

package/Layout/components/LayoutHeader.tsx

@@ -60,7 +60,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
   let left = secondary
   let right = primary
 
-  if (back) left = back
+  if (back && !secondary) left = back
 
   if (!right) right = close
   else if (!left) left = close

package/Layout/components/LayoutHeaderContent.tsx

@@ -1,10 +1,13 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Box, SxProps, Theme } from '@mui/material'
+import { Box, styled, SxProps, Theme } from '@mui/material'
+import { LayoutProps, m } from 'framer-motion'
 import React, { useRef } from 'react'
 import { extendableComponent } from '../../Styles'
 import { useScrollY } from '../hooks/useScrollY'
 import { FloatingProps } from './LayoutHeadertypes'
 
+const MotionDiv = styled(m.div)({})
+
 export type LayoutHeaderContentProps = FloatingProps & {
   children?: React.ReactNode
   left?: React.ReactNode
@@ -13,6 +16,7 @@ export type LayoutHeaderContentProps = FloatingProps & {
   switchPoint?: number
   sx?: SxProps<Theme>
   sxBg?: SxProps<Theme>
+  layout?: LayoutProps['layout']
 }
 
 type OwnerState = { floatingSm: boolean; floatingMd: boolean; scrolled: boolean; divider: boolean }
@@ -33,6 +37,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
     switchPoint = 50,
     sx = [],
     sxBg = [],
+    layout,
   } = props
 
   const scroll = useScrollY()
@@ -139,7 +144,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
               justifyContent: 'start',
             })}
           >
-            {left}
+            <MotionDiv layout={layout}>{left}</MotionDiv>
           </Box>
         )}
         <Box
@@ -172,7 +177,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             },
           })}
         >
-          {children}
+          <MotionDiv layout={layout}>{children}</MotionDiv>
         </Box>
         <Box
           className={classes.right}
@@ -188,7 +193,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             justifyContent: 'end',
           })}
         >
-          {right}
+          <MotionDiv layout={layout}>{right}</MotionDiv>
         </Box>
         {divider && (
           <Box

package/LayoutDefault/components/LayoutDefault.tsx

@@ -39,8 +39,10 @@ export function LayoutDefault(props: LayoutDefaultProps) {
     sx = [],
   } = props
 
-  const offset = useScrollOffset().y
-  const scrollWithOffset = useTransform(useViewportScroll().scrollY, (y) => y + offset)
+  const scrollWithOffset = useTransform(
+    [useViewportScroll().scrollY, useScrollOffset()],
+    ([y, offset]: number[]) => y + offset,
+  )
 
   const classes = withState({ noSticky })
 
@@ -104,7 +106,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
               justifyContent: 'space-between',
               width: '100%',
               height: 0,
-              zIndex: 'drawer',
+              zIndex: 'speedDial',
               [theme.breakpoints.up('sm')]: {
                 padding: `0 ${theme.page.horizontal}`,
                 position: 'sticky',

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -1,10 +1,14 @@
+import { usePageContext, useGo, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { usePresence } from 'framer-motion'
 import type { SetOptional } from 'type-fest'
-import { LayoutOverlayBase, LayoutOverlayBaseProps } from './LayoutOverlayBase'
+import { OverlayBase, LayoutOverlayBaseProps } from '../../Overlay/components/OverlayBase'
 
-export type { LayoutOverlayVariant } from './LayoutOverlayBase'
-
-export type LayoutOverlayProps = SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>
+export type LayoutOverlayProps = Omit<
+  SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
+  'active' | 'direction' | 'onClosed' | 'offsetPageY' | 'isPresent' | 'safeToRemove'
+>
 
 export function LayoutOverlay(props: LayoutOverlayProps) {
   const { children, variantSm = 'bottom', variantMd = 'right', ...otherProps } = props
@@ -14,11 +18,26 @@ export function LayoutOverlay(props: LayoutOverlayProps) {
   const scrollSnapTypeMd: ScrollSnapType =
     variantMd === 'left' || variantMd === 'right' ? 'inline mandatory' : 'block proximity'
 
+  const { closeSteps, active, direction } = usePageContext()
+  const onCloseHandler = useGo(closeSteps * -1)
+  const offsetPageY = useMotionValueValue(useScrollOffset(), (v) => v)
+  const [isPresent, safeToRemove] = usePresence()
+
   return (
     <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
-      <LayoutOverlayBase variantMd={variantMd} variantSm={variantSm} {...otherProps}>
+      <OverlayBase
+        active={active}
+        direction={direction}
+        onClosed={onCloseHandler}
+        offsetPageY={offsetPageY}
+        variantMd={variantMd}
+        variantSm={variantSm}
+        isPresent={isPresent}
+        safeToRemove={safeToRemove}
+        {...otherProps}
+      >
         {children}
-      </LayoutOverlayBase>
+      </OverlayBase>
     </ScrollerProvider>
   )
 }

package/LayoutParts/DesktopNavBar.tsx

@@ -43,7 +43,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
           sx={(theme) => ({
             gridArea: `1 / 1 / 1 / 4`,
             columnGap: theme.spacings.md,
-            padding: `0 ${theme.spacings.sm}`,
+            padding: `0 ${theme.spacings.md}`,
             gridAutoColumns: 'min-content',
           })}
           className={classes.scroller}

package/LayoutParts/DesktopNavBarItem.tsx

@@ -5,11 +5,45 @@ import { extendableComponent } from '../Styles/extendableComponent'
 
 const { classes, selectors } = extendableComponent('DesktopNavItem', ['root', 'line'] as const)
 
-export type DesktopNavItemProps = LinkProps & Pick<PageLinkProps, 'href'>
+export type DesktopNavItemLinkProps = LinkProps<'a'> & Pick<PageLinkProps, 'href'>
+export type DesktopNavItemButtonProps = LinkProps<'div'> & {
+  onClick: LinkProps<'button'>['onClick']
+}
+
+function isLinkProps(
+  props: DesktopNavItemLinkProps | DesktopNavItemButtonProps,
+): props is DesktopNavItemLinkProps {
+  return 'href' in props
+}
+
+export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemButtonProps) {
+  const router = useRouter()
+
+  if (!isLinkProps(props)) {
+    const { onClick, children, sx = [], ...linkProps } = props
+
+    return (
+      <Link
+        className={classes.root}
+        component='div'
+        variant='h6'
+        color='text.primary'
+        underline='none'
+        {...linkProps}
+        onClick={onClick}
+        sx={[
+          { whiteSpace: 'nowrap', paddingTop: '6px', cursor: 'pointer' },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>{children}</Box>
+      </Link>
+    )
+  }
 
-export function DesktopNavItem(props: DesktopNavItemProps) {
   const { href, children, sx = [], ...linkProps } = props
-  const active = useRouter().asPath.startsWith(href.toString())
+
+  const active = router.asPath.startsWith(href.toString())
 
   return (
     <PageLink href={href} passHref>
@@ -21,7 +55,7 @@ export function DesktopNavItem(props: DesktopNavItemProps) {
         {...linkProps}
         sx={[{ whiteSpace: 'nowrap', paddingTop: '6px' }, ...(Array.isArray(sx) ? sx : [sx])]}
       >
-        {children}
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>{children}</Box>
         <Box
           component='span'
           className={classes.line}

package/LayoutParts/MenuFabSecondaryItem.tsx

@@ -1,6 +1,6 @@
 import { ListItemButton, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
-import router from 'next/router'
+import { useRouter } from 'next/router'
 import React from 'react'
 import { extendableComponent } from '../Styles'
 
@@ -17,6 +17,7 @@ const { classes } = extendableComponent(compName, parts)
 
 export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
   const { href, children, icon, sx = [] } = props
+  const router = useRouter()
 
   return (
     <PageLink href={href} passHref>

package/Navigation/components/NavigationFab.tsx

@@ -0,0 +1,106 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { Fab, styled, Box, SxProps, Theme, FabProps } from '@mui/material'
+import { m } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+import { IconSvg } from '../../IconSvg'
+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'
+
+const MotionDiv = styled(m.div)({})
+
+export type NavigationFabProps = {
+  menuIcon?: React.ReactNode
+  closeIcon?: React.ReactNode
+  sx?: SxProps<Theme>
+} & Pick<FabProps, 'color' | 'size' | 'variant' | 'onClick'>
+
+const name = 'MenuFab'
+const parts = ['wrapper', 'fab', 'shadow', 'menu'] as const
+type OwnerState = {
+  scrolled: boolean
+}
+
+const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
+
+export function NavigationFab(props: NavigationFabProps) {
+  const { menuIcon, closeIcon, sx = [], ...fabProps } = props
+  const router = useRouter()
+  const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
+
+  const { opacity, shadowOpacity } = useFabAnimation()
+  const scrollY = useScrollY()
+  const scrolled = useMotionValueValue(scrollY, (y) => y > 10)
+
+  useEffect(() => {
+    const clear = () => setOpenEl(null)
+    router.events.on('routeChangeStart', clear)
+    return () => router.events.off('routeChangeStart', clear)
+  }, [router.events])
+
+  const fabIconSize = useFabSize('responsive')
+
+  const classes = withState({ scrolled })
+
+  return (
+    <Box
+      sx={[
+        { position: 'relative', width: fabIconSize, height: fabIconSize },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <MotionDiv
+        className={classes.wrapper}
+        sx={(theme) => ({
+          [theme.breakpoints.down('md')]: {
+            opacity: '1 !important',
+            transform: 'none !important',
+          },
+        })}
+        style={{ opacity }}
+      >
+        <Fab
+          color='inherit'
+          aria-label='Open Menu'
+          size='responsive'
+          sx={(theme) => ({
+            boxShadow: 'none',
+            '&:hover, &:focus': {
+              boxShadow: 'none',
+              background: theme.palette.text.primary,
+            },
+            background: theme.palette.text.primary,
+            pointerEvents: 'all',
+            color: theme.palette.background.paper,
+          })}
+          className={classes.fab}
+          {...fabProps}
+        >
+          {closeIcon ?? (
+            <IconSvg src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
+          )}
+          {menuIcon ?? (
+            <IconSvg src={iconMenu} size='large' sx={{ display: openEl ? 'none' : 'block' }} />
+          )}
+        </Fab>
+        <MotionDiv
+          sx={(theme) => ({
+            pointerEvents: 'none',
+            borderRadius: '99em',
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            boxShadow: theme.shadows[6],
+            top: 0,
+            [theme.breakpoints.down('md')]: { opacity: '1 !important' },
+          })}
+          className={classes.shadow}
+          style={{ opacity: shadowOpacity }}
+        />
+      </MotionDiv>
+    </Box>
+  )
+}

package/Navigation/components/NavigationItem.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { Box, ListItemButton, styled, useEventCallback } from '@mui/material'
+import PageLink from 'next/link'
+import { IconSvg } from '../../IconSvg'
+import { extendableComponent } from '../../Styles/extendableComponent'
+import { iconChevronRight } from '../../icons'
+import {
+  isNavigationButton,
+  isNavigationComponent,
+  isNavigationHref,
+  NavigationNode,
+  NavigationPath,
+  useNavigation,
+} from '../hooks/useNavigation'
+import type { NavigationList } from './NavigationList'
+
+type OwnerState = {
+  first?: boolean
+  last?: boolean
+  // It is actually used.
+  // eslint-disable-next-line react/no-unused-prop-types
+  column: number
+}
+
+type NavigationItemProps = NavigationNode & {
+  parentPath: NavigationPath
+  idx: number
+  NavigationList: typeof NavigationList
+} & OwnerState
+
+const componentName = 'NavigationItem'
+const parts = ['li', 'ul', 'item'] as const
+
+const { withState } = extendableComponent<OwnerState, typeof componentName, typeof parts>(
+  componentName,
+  parts,
+)
+
+const NavigationLI = styled('li')({ display: 'contents' })
+
+export function NavigationItem(props: NavigationItemProps) {
+  const { id, parentPath, idx, first, last, NavigationList } = props
+
+  const row = idx + 1
+  const { selected, select, hideRootOnNavigate, onClose } = useNavigation()
+
+  const itemPath = [...parentPath, id]
+  const isSelected = selected.slice(0, itemPath.length).join('/') === itemPath.join('/')
+
+  const hidingRoot = hideRootOnNavigate && selected.length > 0
+  const hideItem = hidingRoot && itemPath.length === 1
+
+  const column = hidingRoot ? itemPath.length - 1 : itemPath.length
+  const classes = withState({ first, last, column: itemPath.length })
+
+  const onCloseHandler: React.MouseEventHandler<HTMLAnchorElement> = useEventCallback((e) => {
+    if (!isNavigationHref(props)) return
+    const { href } = props
+    onClose?.(e, href)
+  })
+
+  if (isNavigationButton(props)) {
+    const { childItems, name } = props
+    return (
+      <NavigationLI className={classes.li}>
+        <ListItemButton
+          className={classes.item}
+          role='button'
+          sx={{
+            gridRowStart: row,
+            gridColumnStart: column,
+            gap: (theme) => theme.spacings.xxs,
+            display: hideItem ? 'none' : 'flex',
+          }}
+          disabled={isSelected}
+          tabIndex={selected.join(',').includes(parentPath.join(',')) ? undefined : -1}
+          onClick={(e) => {
+            e.preventDefault()
+            if (!isSelected) select(itemPath)
+          }}
+        >
+          <Box
+            component='span'
+            sx={{
+              whiteSpace: 'nowrap',
+              overflowX: 'hidden',
+              textOverflow: 'ellipsis',
+              flexGrow: 1,
+            }}
+          >
+            {name}
+          </Box>
+          <IconSvg src={iconChevronRight} sx={{ flexShrink: 0 }} />
+        </ListItemButton>
+
+        <NavigationList items={childItems} selected={isSelected} parentPath={itemPath} />
+      </NavigationLI>
+    )
+  }
+
+  if (isNavigationHref(props)) {
+    const { name, href } = props
+    return (
+      <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
+        <PageLink href={href} passHref>
+          <ListItemButton
+            className={classes.item}
+            component='a'
+            sx={(theme) => ({
+              gridRowStart: row,
+              gridColumnStart: column,
+              gap: theme.spacings.xxs,
+            })}
+            tabIndex={selected.join(',').includes(parentPath.join(',')) ? undefined : -1}
+            onClick={onCloseHandler}
+          >
+            <Box
+              component='span'
+              sx={{
+                whiteSpace: 'nowrap',
+                overflowX: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {name}
+            </Box>
+          </ListItemButton>
+        </PageLink>
+      </NavigationLI>
+    )
+  }
+
+  if (isNavigationComponent(props)) {
+    const { component } = props
+    return (
+      <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
+        <Box sx={{ gridRowStart: row, gridColumnStart: column }} className={classes.item}>
+          {component}
+        </Box>
+      </NavigationLI>
+    )
+  }
+
+  if (process.env.NODE_ENV !== 'production') throw Error('NavigationItem: unknown type')
+
+  return null
+}

package/Navigation/components/NavigationList.tsx

@@ -0,0 +1,50 @@
+import { styled } from '@mui/material'
+import { extendableComponent } from '../../Styles/extendableComponent'
+import { NavigationNode, NavigationPath } from '../hooks/useNavigation'
+import { NavigationItem } from './NavigationItem'
+
+const NavigationUList = styled('ul')({})
+
+type NavigationItemsProps = {
+  parentPath?: NavigationPath
+  items: NavigationNode[]
+  selected?: boolean
+}
+
+type OwnerState = {
+  column: number
+}
+
+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 } = props
+
+  return (
+    <NavigationUList
+      sx={[
+        { display: 'block', position: 'absolute', left: '-10000px', top: '-10000px' },
+        selected && { display: 'contents' },
+      ]}
+      className={withState({ column: 0 }).root}
+    >
+      {items.map((item, idx) => (
+        <NavigationItem
+          NavigationList={NavigationList}
+          key={item.id}
+          {...item}
+          parentPath={parentPath}
+          idx={idx}
+          first={idx === 0}
+          last={idx === items.length - 1}
+          column={0}
+        />
+      ))}
+    </NavigationUList>
+  )
+}