@graphcommerce/next-ui 4.13.0 → 4.15.0

package/ActionCard/ActionCard.tsx

@@ -11,7 +11,7 @@ export type ActionCardProps = {
   price?: React.ReactNode
   after?: React.ReactNode
   secondaryAction?: React.ReactNode
-  onClick?: (e: FormEvent<HTMLElement>, v: string | number) => void
+  onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number) => void
   selected?: boolean
   hidden?: boolean
   value: string | number
@@ -66,7 +66,7 @@ export function ActionCard(props: ActionCardProps) {
 
   const classes = withState({ hidden, disabled, selected, image: Boolean(image) })
 
-  const handleClick = (event: FormEvent<HTMLElement>) => onClick?.(event, value)
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => onClick?.(event, value)
 
   return (
     <ButtonBase

package/ActionCard/ActionCardList.tsx

@@ -3,19 +3,20 @@ import { AnimatePresence } from 'framer-motion'
 import React from 'react'
 import { isFragment } from 'react-is'
 import { AnimatedRow } from '../AnimatedRow/AnimatedRow'
+import { ActionCardProps } from './ActionCard'
 
 type MultiSelect = {
   multiple: true
-  value: string[]
+  value: (string | number)[]
 
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: string[]) => void
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: MultiSelect['value']) => void
 }
 type Select = {
   multiple?: false
-  value: string
+  value: string | number
 
   /** Value is null when deselected when not required */
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: string | null) => void
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: Select['value'] | null) => void
 }
 
 export type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
@@ -29,94 +30,124 @@ function isMulti(props: ActionCardListProps): props is ActionCardListProps<Multi
   return props.multiple === true
 }
 
-function isValueSelected(value: string, candidate: string | string[]) {
-  if (candidate === undefined || value === undefined) return false
+function isValueSelected(
+  value: ActionCardProps['value'],
+  candidate?: Select['value'] | MultiSelect['value'],
+) {
+  if (candidate === undefined) return false
   if (Array.isArray(candidate)) return candidate.indexOf(value) >= 0
   return value === candidate
 }
 
-export function ActionCardList(props: ActionCardListProps) {
-  const { children, required, value, error = false, errorMessage } = props
+export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListProps>(
+  (props, ref) => {
+    const { children, required, error = false, errorMessage } = props
 
-  const handleChange = isMulti(props)
-    ? (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
-        const { onChange } = props
-        const index = Boolean(value) && value?.indexOf(buttonValue)
-        let newValue: string[]
+    const handleChange: ActionCardProps['onClick'] = isMulti(props)
+      ? (event, v) => {
+          const { onChange, value } = props
+          const index = Boolean(value) && value?.indexOf(v)
+          let newValue: typeof value
 
-        if (Array.isArray(value) && value.length && index && index >= 0) {
-          newValue = value.slice()
-          newValue.splice(index, 1)
-        } else {
-          newValue = value ? [...value, buttonValue] : [buttonValue]
+          if (value.length && index && index >= 0) {
+            newValue = value.slice()
+            newValue.splice(index, 1)
+          } else {
+            newValue = value ? [...value, v] : [v]
+          }
+          onChange?.(event, newValue)
         }
-        onChange?.(event, newValue)
-      }
-    : (event: React.MouseEvent<HTMLElement, MouseEvent>, buttonValue: string) => {
-        const { onChange } = props
+      : (event, v) => {
+          const { onChange, value } = props
 
-        if (value === buttonValue) return
-        if (required) onChange?.(event, buttonValue)
-        else onChange?.(event, value === buttonValue ? null : buttonValue)
-      }
+          if (value !== v) {
+            if (required) onChange?.(event, v)
+            else onChange?.(event, value === v ? null : v)
+          }
+        }
 
-  return (
-    <Box
-      sx={[
-        error &&
-          ((theme) => ({
-            '& .ActionCard-root': {
-              borderLeft: 2,
-              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,
-            },
-          })),
-      ]}
+    type ActionCardLike = React.ReactElement<
+      Pick<ActionCardProps, 'value' | 'selected' | 'disabled' | 'onClick'>
     >
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) return null
+    function isActionCardLike(el: React.ReactElement): el is ActionCardLike {
+      const hasValue = (el as ActionCardLike).props.value
 
+      if (process.env.NODE_ENV !== 'production') {
+        if (!hasValue) console.error(el, `must be an instance of ActionCard`)
+      }
+      return (el as ActionCardLike).props.value !== undefined
+    }
+
+    // Make sure the children are cardlike
+    const childReactNodes = React.Children.toArray(children)
+      .filter(React.isValidElement)
+      .filter(isActionCardLike)
+      .filter((child) => {
         if (process.env.NODE_ENV !== 'production') {
-          if (isFragment(child)) {
+          if (isFragment(child))
             console.error(
               [
                 "@graphcommerce/next-ui: The ActionCardList component doesn't accept a Fragment as a child.",
-                'Consider providing an array instead.',
+                'Consider providing an array instead',
               ].join('\n'),
             )
-          }
         }
 
-        return React.cloneElement(child, {
-          onClick: handleChange,
-          selected:
-            child.props.selected === undefined
-              ? isValueSelected(child.props.value as string, value)
-              : child.props.selected,
-        })
-      })}
-      {error && (
-        <Alert
-          severity='error'
-          variant='filled'
-          sx={{ borderStartStartRadius: 0, borderStartEndRadius: 0 }}
-        >
-          {errorMessage}
-        </Alert>
-      )}
-    </Box>
-  )
-}
+        return !isFragment(child)
+      })
+
+    // Make sure the selected values is in the list of all possible values
+    const value = childReactNodes.find(
+      // eslint-disable-next-line react/destructuring-assignment
+      (child) => child.props.value === props.value && child.props.disabled !== true,
+    )?.props.value
+
+    return (
+      <Box
+        ref={ref}
+        sx={[
+          error &&
+            ((theme) => ({
+              '& .ActionCard-root': {
+                borderLeft: 2,
+                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,
+              },
+            })),
+        ]}
+      >
+        {childReactNodes.map((child) =>
+          React.cloneElement(child, {
+            onClick: handleChange,
+            selected:
+              child.props.selected === undefined
+                ? isValueSelected(child.props.value, value)
+                : child.props.selected,
+          }),
+        )}
+        {error && (
+          <Alert
+            severity='error'
+            variant='filled'
+            sx={{ borderStartStartRadius: 0, borderStartEndRadius: 0 }}
+          >
+            {errorMessage}
+          </Alert>
+        )}
+      </Box>
+    )
+  },
+)

package/ActionCard/ActionCardListForm.tsx

@@ -34,10 +34,11 @@ export function ActionCardListForm<T extends ActionCardItemBase>(
       control={control}
       name={name}
       rules={{ required, ...rules, validate: (v) => (v ? true : errorMessage) }}
-      render={({ field: { onChange, value }, fieldState, formState }) => (
+      render={({ field: { onChange, value, onBlur, ref }, fieldState, formState }) => (
         <ActionCardList
           required
           value={value}
+          ref={ref}
           onChange={(_, incomming) => onChange(incomming)}
           error={formState.isSubmitted && !!fieldState.error}
           errorMessage={fieldState.error?.message}

package/Blog/BlogListItem/BlogListItem.tsx

@@ -20,7 +20,7 @@ const { classes } = extendableComponent(name, parts)
 export function BlogListItem(props: BlogListItemProps) {
   const { asset, url, date, title, sx = [] } = props
 
-  const formatter = useDateTimeFormat({ year: 'numeric', month: 'long', day: 'numeric' })
+  const formatter = useDateTimeFormat({ dateStyle: 'long' })
 
   return (
     <Box

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # 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
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`323fdee4b`](https://github.com/graphcommerce-org/graphcommerce/commit/323fdee4b15ae23e0e84dd0588cb2c6446dcfd50) Thanks [@NickdeK](https://github.com/NickdeK)! - Added a new cookies utility to load cookies on the frontend
+
+### Patch Changes
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`afcd8e4bf`](https://github.com/graphcommerce-org/graphcommerce/commit/afcd8e4bfb7010da4d5faeed85b61991ed7975f4) Thanks [@NickdeK](https://github.com/NickdeK)! - ActionCardList will now show all options when the selected value isn't in any of the options
+
+* [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`02e1988e5`](https://github.com/graphcommerce-org/graphcommerce/commit/02e1988e5f361c6f66ae30d3bbee38ef2ac062df) Thanks [@NickdeK](https://github.com/NickdeK)! - Make sure the useDateTimeFormat isn't giving hydration warnings
+
+* Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.24
+
+## 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

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/LayoutHeaderContent.tsx

@@ -1,6 +1,6 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Box, styled, SxProps, Theme } from '@mui/material'
-import { m } from 'framer-motion'
+import { LayoutProps, m } from 'framer-motion'
 import React, { useRef } from 'react'
 import { extendableComponent } from '../../Styles'
 import { useScrollY } from '../hooks/useScrollY'
@@ -16,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 }
@@ -36,6 +37,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
     switchPoint = 50,
     sx = [],
     sxBg = [],
+    layout,
   } = props
 
   const scroll = useScrollY()
@@ -142,7 +144,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
               justifyContent: 'start',
             })}
           >
-            <MotionDiv layout='position'>{left}</MotionDiv>
+            <MotionDiv layout={layout}>{left}</MotionDiv>
           </Box>
         )}
         <Box
@@ -175,7 +177,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             },
           })}
         >
-          <MotionDiv layout='position'>{children}</MotionDiv>
+          <MotionDiv layout={layout}>{children}</MotionDiv>
         </Box>
         <Box
           className={classes.right}
@@ -191,7 +193,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             justifyContent: 'end',
           })}
         >
-          <MotionDiv layout='position'>{right}</MotionDiv>
+          <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 })
 

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -1,5 +1,6 @@
 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 { OverlayBase, LayoutOverlayBaseProps } from '../../Overlay/components/OverlayBase'
@@ -19,7 +20,7 @@ export function LayoutOverlay(props: LayoutOverlayProps) {
 
   const { closeSteps, active, direction } = usePageContext()
   const onCloseHandler = useGo(closeSteps * -1)
-  const offsetPageY = useScrollOffset().y
+  const offsetPageY = useMotionValueValue(useScrollOffset(), (v) => v)
   const [isPresent, safeToRemove] = usePresence()
 
   return (

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': {
@@ -105,6 +139,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
             floatingMd={false}
             floatingSm={false}
             switchPoint={0}
+            layout='position'
             left={
               showBack && (
                 <Fab
@@ -150,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})`,
+              },
             },
           })}
         >
@@ -227,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/PageMeta/PageMeta.tsx

@@ -1,10 +1,8 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
-import {
-  resolveHref,
-  addBasePath,
-  addLocale,
-  getDomainLocale,
-} from 'next/dist/shared/lib/router/router'
+import { addBasePath } from 'next/dist/client/add-base-path'
+import { addLocale } from 'next/dist/client/add-locale'
+import { getDomainLocale } from 'next/dist/client/get-domain-locale'
+import { resolveHref } from 'next/dist/shared/lib/router/router'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 

package/index.ts

@@ -1,5 +1,6 @@
 export * from './ActionCard/ActionCard'
 export * from './ActionCard/ActionCardList'
+export * from './ActionCard/ActionCardListForm'
 export * from './AnimatedRow/AnimatedRow'
 export * from './Blog/BlogAuthor/BlogAuthor'
 export * from './Blog/BlogContent/BlogContent'
@@ -55,3 +56,4 @@ export * from './ToggleButton/ToggleButton'
 export * from './ToggleButtonGroup/ToggleButtonGroup'
 export * from './UspList/UspList'
 export * from './UspList/UspListItem'
+export * from './utils/cookie'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.13.0",
+  "version": "4.15.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -15,15 +15,16 @@
   },
   "dependencies": {
     "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/cache": "^11.7.1",
-    "@emotion/react": "^11.9.0",
+    "@emotion/cache": "^11.9.3",
+    "@emotion/react": "^11.9.3",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "3.2.3",
-    "@graphcommerce/framer-scroller": "2.1.22",
+    "@emotion/styled": "^11.9.3",
+    "@graphcommerce/framer-next-pages": "3.2.4",
+    "@graphcommerce/framer-scroller": "2.1.25",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/image": "3.1.7",
-    "react-is": "^18.1.0",
+    "cookie": "^0.5.0",
+    "react-is": "^18.2.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"
   },
@@ -38,12 +39,13 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.8",
+    "@graphcommerce/eslint-config-pwa": "^4.1.9",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.3",
+    "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1",
+    "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "type-fest": "^2.12.2",
-    "typescript": "4.7.3"
+    "typescript": "4.7.4"
   }
 }

package/utils/cookie.ts

@@ -0,0 +1,33 @@
+import { serialize, parse, CookieSerializeOptions } from 'cookie'
+
+/** Read a cookie */
+export function cookie(name: string): string | undefined
+/** Set a cookie */
+export function cookie(name: string, value: string, options?: CookieSerializeOptions): void
+/** Delete a cookie */
+export function cookie(name: string, value: null): void
+/** Function to handle the three different cases */
+export function cookie(name: string, value?: string | null, options?: CookieSerializeOptions) {
+  if (typeof window === 'undefined') {
+    return undefined
+  }
+
+  // Read a cookie
+  if (typeof value === 'undefined') return parse(document.cookie)[name]
+
+  // Set a cookie
+  if (typeof value === 'string') {
+    const serialized = serialize(name, value, { path: '/', maxAge: 31536000, ...options })
+    document.cookie = serialized
+    return undefined
+  }
+
+  // Delete a cookie
+  if (value === null) {
+    const serialized = serialize(name, '', { path: '/', maxAge: 0 })
+    document.cookie = serialized
+    return undefined
+  }
+
+  return undefined
+}