@graphcommerce/next-ui 4.14.0 → 4.15.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 4.15.0
+
+### Minor Changes
+
+- [#1566](https://github.com/graphcommerce-org/graphcommerce/pull/1566) [`e167992df`](https://github.com/graphcommerce-org/graphcommerce/commit/e167992dfdc6964a392af719667f8a188626ab1b) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Introduced `@graphcommerce/next-ui/navigation` component.
+
+  - Navigation is always present in the DOM
+  - Configurable in LayoutNavigation.tsx
+  - Show categories directly, or nest them in a 'products' button
+  - Choose prefered mouseEvent: click or hover
+
+* [#1566](https://github.com/graphcommerce-org/graphcommerce/pull/1566) [`9c2504b4e`](https://github.com/graphcommerce-org/graphcommerce/commit/9c2504b4ed75f41d3003c4d3339814010e85e37e) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - publish navigation
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.25
+
 ## 4.14.0
 
 ### Minor Changes

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -3,7 +3,7 @@ import { LayoutOverlay, LayoutOverlayProps } from '../components/LayoutOverlay'
 
 export type LayoutOverlayState = Omit<
   LayoutOverlayProps,
-  'children' | 'sx' | 'sxBackdrop' | 'mdSpacingTop' | 'smSpacingTop'
+  'children' | 'sx' | 'sxBackdrop' | 'mdSpacingTop' | 'smSpacingTop' | 'overlayPaneProps'
 >
 
 export function useLayoutState() {

package/Navigation/components/NavigationItem.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import { Box, ListItemButton, styled, useEventCallback } from '@mui/material'
+import { Box, ListItemButton, styled, Theme, useEventCallback, useMediaQuery } from '@mui/material'
 import PageLink from 'next/link'
+import { useEffect } from 'react'
 import { IconSvg } from '../../IconSvg'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { iconChevronRight } from '../../icons'
@@ -26,7 +27,12 @@ type NavigationItemProps = NavigationNode & {
   parentPath: NavigationPath
   idx: number
   NavigationList: typeof NavigationList
-} & OwnerState
+} & OwnerState &
+  mouseEventPref
+
+export type mouseEventPref = {
+  mouseEvent: 'click' | 'hover'
+}
 
 const componentName = 'NavigationItem'
 const parts = ['li', 'ul', 'item'] as const
@@ -39,10 +45,10 @@ const { withState } = extendableComponent<OwnerState, typeof componentName, type
 const NavigationLI = styled('li')({ display: 'contents' })
 
 export function NavigationItem(props: NavigationItemProps) {
-  const { id, parentPath, idx, first, last, NavigationList } = props
+  const { id, parentPath, idx, first, last, NavigationList, mouseEvent } = props
 
   const row = idx + 1
-  const { selected, select, hideRootOnNavigate, onClose } = useNavigation()
+  const { selected, select, hideRootOnNavigate, onClose, animating } = useNavigation()
 
   const itemPath = [...parentPath, id]
   const isSelected = selected.slice(0, itemPath.length).join('/') === itemPath.join('/')
@@ -59,6 +65,8 @@ export function NavigationItem(props: NavigationItemProps) {
     onClose?.(e, href)
   })
 
+  const isDesktop = useMediaQuery<Theme>((theme) => theme.breakpoints.up('md'))
+
   if (isNavigationButton(props)) {
     const { childItems, name } = props
     return (
@@ -66,18 +74,44 @@ export function NavigationItem(props: NavigationItemProps) {
         <ListItemButton
           className={classes.item}
           role='button'
-          sx={{
-            gridRowStart: row,
-            gridColumnStart: column,
-            gap: (theme) => theme.spacings.xxs,
-            display: hideItem ? 'none' : 'flex',
-          }}
+          sx={[
+            (theme) => ({
+              gridRowStart: row,
+              gridColumnStart: column,
+              gap: theme.spacings.xxs,
+              display: hideItem ? 'none' : 'flex',
+              '&.Mui-disabled': {
+                opacity: 1,
+                background: theme.palette.action.hover,
+              },
+            }),
+            mouseEvent === 'hover'
+              ? {
+                  '&.Mui-disabled': {
+                    cursor: 'pointer',
+                    pointerEvents: 'auto',
+                  },
+                }
+              : {},
+          ]}
           disabled={isSelected}
           tabIndex={selected.join(',').includes(parentPath.join(',')) ? undefined : -1}
           onClick={(e) => {
             e.preventDefault()
-            if (!isSelected) select(itemPath)
+            if (!isSelected && animating.current === false) {
+              select(itemPath)
+            }
           }}
+          onMouseEnter={
+            itemPath.length > 1 && mouseEvent === 'hover'
+              ? (e) => {
+                  if (isDesktop && animating.current === false && !isSelected) {
+                    e.preventDefault()
+                    setTimeout(() => select(itemPath), 0)
+                  }
+                }
+              : undefined
+          }
         >
           <Box
             component='span'
@@ -93,7 +127,12 @@ export function NavigationItem(props: NavigationItemProps) {
           <IconSvg src={iconChevronRight} sx={{ flexShrink: 0 }} />
         </ListItemButton>
 
-        <NavigationList items={childItems} selected={isSelected} parentPath={itemPath} />
+        <NavigationList
+          items={childItems}
+          selected={isSelected}
+          parentPath={itemPath}
+          mouseEvent={mouseEvent}
+        />
       </NavigationLI>
     )
   }

package/Navigation/components/NavigationList.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { NavigationNode, NavigationPath } from '../hooks/useNavigation'
-import { NavigationItem } from './NavigationItem'
+import { NavigationItem, mouseEventPref } from './NavigationItem'
 
 const NavigationUList = styled('ul')({})
 
@@ -9,7 +9,7 @@ type NavigationItemsProps = {
   parentPath?: NavigationPath
   items: NavigationNode[]
   selected?: boolean
-}
+} & mouseEventPref
 
 type OwnerState = {
   column: number
@@ -23,7 +23,7 @@ const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>
 // const parts = ['li', 'ul', 'item'] as const
 
 export function NavigationList(props: NavigationItemsProps) {
-  const { items, parentPath = [], selected = false } = props
+  const { items, parentPath = [], selected = false, mouseEvent } = props
 
   return (
     <NavigationUList
@@ -43,6 +43,7 @@ export function NavigationList(props: NavigationItemsProps) {
           first={idx === 0}
           last={idx === items.length - 1}
           column={0}
+          mouseEvent={mouseEvent}
         />
       ))}
     </NavigationUList>

package/Navigation/components/NavigationOverlay.tsx

@@ -3,6 +3,7 @@ import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import { Box, Fab, SxProps, Theme, useEventCallback, useMediaQuery } from '@mui/material'
 import { m } from 'framer-motion'
+import { useState } from 'react'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { LayoutHeaderContent } from '../../Layout/components/LayoutHeaderContent'
 import { LayoutTitle } from '../../Layout/components/LayoutTitle'
@@ -18,14 +19,26 @@ import {
   NavigationNodeHref,
   useNavigation,
 } from '../hooks/useNavigation'
+import { mouseEventPref } from './NavigationItem'
 import { NavigationList } from './NavigationList'
 
+type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
+type LayoutOverlaySize = 'floating' | 'minimal' | 'full'
+type LayoutOverlayAlign = 'start' | 'end' | 'center' | 'stretch'
+
 type NavigationOverlayProps = {
   active: boolean
   sx?: SxProps<Theme>
   stretchColumns?: boolean
-  itemWidth: string
-}
+  variantSm: LayoutOverlayVariant
+  variantMd: LayoutOverlayVariant
+  sizeSm?: LayoutOverlaySize
+  sizeMd?: LayoutOverlaySize
+  justifySm?: LayoutOverlayAlign
+  justifyMd?: LayoutOverlayAlign
+  itemWidthSm?: string
+  itemWidthMd?: string
+} & mouseEventPref
 
 function findCurrent(
   items: NavigationContextType['items'],
@@ -55,8 +68,21 @@ const parts = ['root', 'navigation', 'header', 'column'] as const
 const { classes } = extendableComponent(componentName, parts)
 
 export function NavigationOverlay(props: NavigationOverlayProps) {
-  const { active, sx, stretchColumns, itemWidth } = props
-  const { selected, select, items, onClose } = useNavigation()
+  const {
+    active,
+    sx,
+    stretchColumns,
+    variantMd,
+    variantSm,
+    justifyMd,
+    justifySm,
+    sizeMd,
+    sizeSm,
+    itemWidthSm,
+    itemWidthMd,
+    mouseEvent,
+  } = props
+  const { selected, select, items, onClose, animating } = useNavigation()
 
   const fabSize = useFabSize('responsive')
   const svgSize = useIconSvgSize('large')
@@ -74,12 +100,20 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
       className={classes.root}
       active={active}
       onClosed={onClose}
-      variantSm='left'
-      sizeSm='floating'
-      justifySm='start'
-      variantMd='left'
-      sizeMd='floating'
-      justifyMd='start'
+      variantSm={variantSm}
+      sizeSm={sizeSm}
+      justifySm={justifySm}
+      variantMd={variantMd}
+      sizeMd={sizeMd}
+      justifyMd={justifyMd}
+      overlayPaneProps={{
+        onLayoutAnimationStart: () => {
+          animating.current = true
+        },
+        onLayoutAnimationComplete: () => {
+          animating.current = false
+        },
+      }}
       sx={{
         zIndex: 'drawer',
         '& .LayoutOverlayBase-overlayPane': {
@@ -151,14 +185,35 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
           sx={(theme) => ({
             display: 'grid',
             alignItems: !stretchColumns ? 'start' : undefined,
-
+            '& .NavigationItem-item': {
+              // eslint-disable-next-line no-nested-ternary
+              width: itemWidthMd
+                ? selected.length >= 1
+                  ? `calc(${itemWidthMd} + 1px)`
+                  : itemWidthMd
+                : 'auto',
+            },
             [theme.breakpoints.down('md')]: {
+              width:
+                sizeSm !== 'floating'
+                  ? `calc(${itemWidthSm || '100vw'} + ${selected.length}px)`
+                  : `calc(${itemWidthSm || '100vw'} - ${theme.page.horizontal} - ${
+                      theme.page.horizontal
+                    })`,
+              minWidth: 200,
               overflow: 'hidden',
               scrollSnapType: 'x mandatory',
-              width: `calc(${theme.spacings.md} + ${theme.spacings.md} + ${itemWidth})`,
-            },
-            '& .NavigationItem-item': {
-              width: itemWidth,
+              '& .NavigationItem-item': {
+                width:
+                  sizeSm !== 'floating'
+                    ? `calc(${itemWidthSm || '100vw'} - ${theme.spacings.md} - ${
+                        theme.spacings.md
+                      } + ${selected.length}px)`
+                    : `calc(${itemWidthSm || '100vw'} - ${theme.spacings.md} - ${
+                        theme.spacings.md
+                      } - ${theme.page.horizontal} - ${theme.page.horizontal})`,
+                minWidth: `calc(${200}px - ${theme.spacings.md} - ${theme.spacings.md})`,
+              },
             },
           })}
         >
@@ -228,7 +283,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
               />
             )}
 
-            <NavigationList items={items} selected />
+            <NavigationList items={items} selected mouseEvent={mouseEvent} />
           </Box>
         </Box>
       </MotionDiv>

package/Navigation/components/NavigationProvider.tsx

@@ -1,6 +1,6 @@
 import { useEventCallback } from '@mui/material'
 import { MotionConfig } from 'framer-motion'
-import { useState, useMemo } from 'react'
+import { useState, useMemo, SetStateAction, useRef } from 'react'
 import { isElement } from 'react-is'
 import {
   NavigationNode,
@@ -16,6 +16,8 @@ export type NavigationProviderProps = {
   closeAfterNavigate?: boolean
   children?: React.ReactNode
   animationDuration?: number
+  selected: NavigationPath
+  setSelected: (value: SetStateAction<NavigationPath>) => void
   onChange?: NavigationSelect
   onClose?: NavigationContextType['onClose']
 }
@@ -31,9 +33,11 @@ export function NavigationProvider(props: NavigationProviderProps) {
     animationDuration = 0.275,
     children,
     onClose: onCloseUnstable,
+    selected,
+    setSelected,
   } = props
 
-  const [selected, setSelected] = useState<NavigationPath>([])
+  const animating = useRef(false)
 
   const select = useEventCallback((incomming: NavigationPath) => {
     setSelected(incomming)
@@ -50,6 +54,7 @@ export function NavigationProvider(props: NavigationProviderProps) {
       hideRootOnNavigate,
       selected,
       select,
+      animating,
       items: items
         .map((item, index) => (isElement(item) ? { id: item.key ?? index, component: item } : item))
         .filter(nonNullable),

package/Navigation/hooks/useNavigation.ts

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react'
+import { createContext, MutableRefObject, SetStateAction, useContext } from 'react'
 
 export type NavigationId = string | number
 export type NavigationPath = NavigationId[]
@@ -17,6 +17,7 @@ export type NavigationContextType = {
   items: NavigationNode[]
   hideRootOnNavigate: boolean
   onClose: NavigationOnClose
+  animating: MutableRefObject<boolean>
 }
 
 type NavigationNodeBase = {

package/Overlay/components/OverlayBase.tsx

@@ -5,7 +5,7 @@ import {
   useIsomorphicLayoutEffect,
 } from '@graphcommerce/framer-utils'
 import { Box, styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
-import { m, useDomEvent, useMotionValue, useTransform } from 'framer-motion'
+import { m, MotionProps, useDomEvent, useMotionValue, useTransform } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { ExtendableComponent, extendableComponent } from '../../Styles'
@@ -40,6 +40,7 @@ export type LayoutOverlayBaseProps = {
   offsetPageY: number
   isPresent: boolean
   safeToRemove: (() => void) | null | undefined
+  overlayPaneProps?: MotionProps
 } & StyleProps &
   OverridableProps
 
@@ -86,6 +87,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
     offsetPageY,
     isPresent,
     safeToRemove,
+    overlayPaneProps,
   } = props
 
   const th = useTheme()
@@ -367,6 +369,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
           })}
         >
           <MotionDiv
+            {...overlayPaneProps}
             layout
             className={classes.overlayPane}
             sx={(theme) => ({

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.14.0",
+  "version": "4.15.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,7 +20,7 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
     "@graphcommerce/framer-next-pages": "3.2.4",
-    "@graphcommerce/framer-scroller": "2.1.24",
+    "@graphcommerce/framer-scroller": "2.1.25",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/image": "3.1.7",
     "cookie": "^0.5.0",