@graphcommerce/next-ui 4.27.0 → 4.28.1

package/ActionCard/ActionCard.tsx

@@ -12,7 +12,7 @@ function isButtonProps(props: ButtonProps<'div'> | BoxProps<'div'>): props is Bu
   return props.onClick !== undefined
 }
 
-const RenderComponent = (props: ButtonProps<'div'> | BoxProps<'div'>) =>
+const ButtonOrBox = (props: ButtonProps<'div'> | BoxProps<'div'>) =>
   isButtonProps(props) ? <ButtonBase component='div' {...props} /> : <Box {...props} />
 
 export type ActionCardProps = {
@@ -101,26 +101,26 @@ export function ActionCard(props: ActionCardProps) {
   })
 
   return (
-    <RenderComponent
+    <ButtonOrBox
       className={classes.root}
       onClick={onClick && ((event) => onClick?.(event, value))}
       disabled={disabled}
       sx={[
         (theme) => ({
           '&.sizeSmall': {
-            padding: `5px 10px`,
+            py: `5px`,
             display: 'flex',
             typography: 'body2',
           },
 
           '&.sizeMedium': {
-            padding: `10px 12px`,
+            py: `10px`,
             typography: 'body2',
             display: 'block',
           },
 
           '&.sizeLarge': {
-            padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
+            py: theme.spacings.xxs,
             display: 'block',
           },
 
@@ -184,6 +184,10 @@ export function ActionCard(props: ActionCardProps) {
               ),
             },
 
+            '&.sizeSmall': { px: `10px` },
+            '&.sizeMedium': { px: `12px` },
+            '&.sizeLarge': { px: theme.spacings.xs },
+
             '&.selected': {
               border: `2px solid ${theme.palette[color].main}`,
               boxShadow: `0 0 0 4px ${alpha(
@@ -223,6 +227,7 @@ export function ActionCard(props: ActionCardProps) {
           flexDirection: 'row',
           width: '100%',
           justifyContent: 'space-between',
+          alignContent: 'stretch',
         }}
       >
         <Box
@@ -230,6 +235,7 @@ export function ActionCard(props: ActionCardProps) {
             display: 'flex',
             flexDirection: 'row',
             justifyContent: 'space-between',
+            alignContent: 'stretch',
           }}
         >
           {image && (
@@ -302,6 +308,6 @@ export function ActionCard(props: ActionCardProps) {
         </Box>
       </Box>
       {after && <Box className={classes.after}>{after}</Box>}
-    </RenderComponent>
+    </ButtonOrBox>
   )
 }

package/ActionCard/ActionCardLayout.tsx

@@ -0,0 +1,57 @@
+import { Box, BoxProps } from '@mui/material'
+import React from 'react'
+import { extendableComponent } from '../Styles'
+import { ActionCardProps } from './ActionCard'
+
+type ActionCardLayoutProps = {
+  children?: React.ReactNode
+} & Pick<ActionCardProps, 'layout'> &
+  BoxProps
+
+const parts = ['root'] as const
+const name = 'ActionCardLayout'
+const { withState } = extendableComponent<
+  Pick<ActionCardProps, 'layout'>,
+  typeof name,
+  typeof parts
+>(name, parts)
+
+export const ActionCardLayout = React.forwardRef<HTMLDivElement, ActionCardLayoutProps>(
+  (props, ref) => {
+    const { layout = 'list' } = props
+
+    const classes = withState({ layout })
+
+    return (
+      <Box
+        ref={ref}
+        {...props}
+        className={classes.root}
+        sx={[
+          (theme) => ({
+            '&.layoutStack': {
+              display: 'grid',
+              height: 'min-content',
+              gap: theme.spacings.xxs,
+            },
+            '&.layoutList': {
+              display: 'grid',
+              height: 'min-content',
+            },
+            '&.layoutGrid': {
+              display: 'grid',
+              gridTemplateColumns: 'repeat(2, 1fr)',
+              gap: theme.spacings.xxs,
+            },
+            '&.layoutInline': {
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: theme.spacings.xxs,
+            },
+          }),
+          ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+        ]}
+      />
+    )
+  },
+)

package/ActionCard/ActionCardList.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { isFragment } from 'react-is'
 import { extendableComponent } from '../Styles'
 import { ActionCardProps } from './ActionCard'
+import { ActionCardLayout } from './ActionCardLayout'
 
 type MultiSelect = {
   multiple: true
@@ -132,52 +133,25 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
 
     return (
       <div>
-        <Box
-          className={classes.root}
-          ref={ref}
-          sx={[
-            (theme) => ({
-              '&.layoutStack': {
-                display: 'grid',
-                height: 'min-content',
-                gap: theme.spacings.xxs,
-              },
-              '&.layoutList': {
-                display: 'grid',
-                height: 'min-content',
-              },
-              '&.layoutGrid': {
-                display: 'grid',
-                gridTemplateColumns: 'repeat(2, 1fr)',
-                gap: theme.spacings.xxs,
-              },
-              '&.layoutInline': {
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: theme.spacings.xxs,
-              },
-            }),
-
-            ...(Array.isArray(sx) ? sx : [sx]),
-          ]}
-        >
+        <ActionCardLayout sx={sx} className={classes.root} layout={layout}>
           {childReactNodes.map((child) => {
             if (collapse && Boolean(value) && !isValueSelected(child.props.value, value))
               return null
             return React.cloneElement(child, {
               onClick: handleChange,
-              error: child.props.error ?? error,
-              color: child.props.color ?? color,
-              variant: child.props.variant ?? variant,
-              size: child.props.size ?? size,
-              layout: child.props.layout ?? layout,
+              error,
+              color,
+              variant,
+              size,
+              layout,
+              ...child.props,
               selected:
                 child.props.selected === undefined
                   ? isValueSelected(child.props.value, value)
                   : child.props.selected,
             })
           })}
-        </Box>
+        </ActionCardLayout>
         {error && errorMessage && (
           <Alert
             severity='error'

package/ActionCard/index.ts

@@ -0,0 +1,4 @@
+export * from './ActionCard'
+export * from './ActionCardLayout'
+export * from './ActionCardList'
+export * from './ActionCardListForm'

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Change Log
 
+## 4.28.1
+
+### Patch Changes
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`9e630670f`](https://github.com/graphcommerce-org/graphcommerce/commit/9e630670ff6c952ab7b938d890b5509804985cf3) Thanks [@paales](https://github.com/paales)! - Added a new ItemScroller component to be able to make horizontal product scrollers
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`2e9fa5984`](https://github.com/graphcommerce-org/graphcommerce/commit/2e9fa5984a07ff14fc1b3a4f62189a26e8e3ecdd) Thanks [@paales](https://github.com/paales)! - Measure the size of children of the overlay to determine the size of children
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`adf13069a`](https://github.com/graphcommerce-org/graphcommerce/commit/adf13069af6460c960276b402237371c12fc6dec) Thanks [@paales](https://github.com/paales)! - Use realtime measurements for useOverlayPosition instead of computed values, to improve flickering issues
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6) Thanks [@paales](https://github.com/paales)! - Added crosssel functionality
+
+- Updated dependencies [[`81f31d1e5`](https://github.com/graphcommerce-org/graphcommerce/commit/81f31d1e54397368088a4289aaddd29facfceeef), [`a8905d263`](https://github.com/graphcommerce-org/graphcommerce/commit/a8905d263273cb9322583d5759a5fdc66eceb8e4), [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6), [`6c2e27b1b`](https://github.com/graphcommerce-org/graphcommerce/commit/6c2e27b1be4aaa888e65a2bd69eaeb467a54a023)]:
+  - @graphcommerce/framer-scroller@2.1.41
+  - @graphcommerce/framer-utils@3.2.1
+  - @graphcommerce/framer-next-pages@3.3.2
+  - @graphcommerce/image@3.1.10
+
+## 4.28.0
+
+### Minor Changes
+
+- [#1662](https://github.com/graphcommerce-org/graphcommerce/pull/1662) [`0c21c5c23`](https://github.com/graphcommerce-org/graphcommerce/commit/0c21c5c233ebab15f6629c234e3de1cc8c0452e1) Thanks [@paales](https://github.com/paales)! - Implement serverRenderDepth prop to the Navigation to limit initial render time and TBT
+
+* [#1662](https://github.com/graphcommerce-org/graphcommerce/pull/1662) [`f5eae0afd`](https://github.com/graphcommerce-org/graphcommerce/commit/f5eae0afdbd474b1f81c450425ffadf2d025187a) Thanks [@paales](https://github.com/paales)! - Move to useMatchMedia to have a simple boolean utility that allows to match to a certain breakpoint
+
+### Patch Changes
+
+- [#1662](https://github.com/graphcommerce-org/graphcommerce/pull/1662) [`de8925aa9`](https://github.com/graphcommerce-org/graphcommerce/commit/de8925aa910b191c62041530c68c697a58a1e52d) Thanks [@paales](https://github.com/paales)! - Allow for a custom Component for magentoMenuToNavigation and allow React.ReactNode for items
+
+- Updated dependencies [[`f5eae0afd`](https://github.com/graphcommerce-org/graphcommerce/commit/f5eae0afdbd474b1f81c450425ffadf2d025187a), [`9e0ca73eb`](https://github.com/graphcommerce-org/graphcommerce/commit/9e0ca73eb50ded578f4a98e40a7eb920bf8ab421)]:
+  - @graphcommerce/framer-scroller@2.1.40
+  - @graphcommerce/framer-next-pages@3.3.1
+
 ## 4.27.0
 
 ### Minor Changes

package/FramerScroller/ItemScroller.tsx

@@ -0,0 +1,95 @@
+import {
+  ScrollerProvider,
+  Scroller,
+  ScrollerButton,
+  ScrollerButtonProps,
+} from '@graphcommerce/framer-scroller'
+import { Box, SxProps, Theme } from '@mui/material'
+import { IconSvg } from '../IconSvg'
+import { extendableComponent, responsiveVal } from '../Styles'
+import { useFabSize } from '../Theme'
+import { iconChevronLeft, iconChevronRight } from '../icons'
+
+const { classes } = extendableComponent('SidebarSlider', [
+  'root',
+  'grid',
+  'sidebar',
+  'scrollerContainer',
+  'scroller',
+  'sliderButtons',
+  'centerLeft',
+  'centerRight',
+] as const)
+
+type SliderProps = {
+  children: React.ReactNode
+  sx?: SxProps<Theme>
+  buttonSize?: ScrollerButtonProps['size']
+}
+
+export function ItemScroller(props: SliderProps) {
+  const { children, sx, buttonSize = 'responsive' } = props
+
+  const size = useFabSize(buttonSize)
+
+  return (
+    <Box sx={sx} className={classes.root}>
+      <Box sx={{ position: 'relative', minWidth: 1 }} className={classes.scrollerContainer}>
+        <ScrollerProvider scrollSnapAlign='start'>
+          <Scroller
+            className={classes.scroller}
+            hideScrollbar
+            sx={(theme) => ({
+              gridColumnGap: theme.spacings.md,
+              gridRowGap: theme.spacings.lg,
+              // paddingRight: theme.page.horizontal,
+              px: theme.page.horizontal,
+              scrollPaddingLeft: theme.page.horizontal,
+              scrollPaddingRight: theme.page.horizontal,
+              gridAutoColumns: responsiveVal(200, 300),
+            })}
+          >
+            {children}
+          </Scroller>
+          <Box
+            className={classes.centerLeft}
+            sx={(theme) => ({
+              display: 'grid',
+              gridAutoFlow: 'row',
+              gap: theme.spacings.xxs,
+              position: 'absolute',
+              left: theme.spacings.sm,
+              top: `calc(50% - 28px)`,
+            })}
+          >
+            <ScrollerButton
+              direction='left'
+              sx={{ display: { xs: 'none', md: 'flex' } }}
+              size='responsive'
+            >
+              <IconSvg src={iconChevronLeft} />
+            </ScrollerButton>
+          </Box>
+          <Box
+            className={classes.centerRight}
+            sx={(theme) => ({
+              display: 'grid',
+              gap: theme.spacings.xxs,
+              position: 'absolute',
+              right: theme.spacings.sm,
+              top: `calc(50% - (${size}/2))`,
+            })}
+          >
+            <ScrollerButton
+              direction='right'
+              sx={{ display: { xs: 'none', md: 'flex' } }}
+              size='responsive'
+            >
+              <IconSvg src={iconChevronRight} />
+            </ScrollerButton>
+          </Box>
+        </ScrollerProvider>
+      </Box>
+    </Box>
+  )
+}

package/FramerScroller/SidebarGallery.tsx

@@ -10,7 +10,7 @@ import {
 import { Fab, useTheme, Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { IconSvg } from '../IconSvg'
 import { Row } from '../Row/Row'
 import { extendableComponent } from '../Styles'
@@ -107,9 +107,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
 
   const headerHeight = `${theme.appShell.headerHeightSm} - ${theme.spacings.sm} * 2`
   const galleryMargin = theme.spacings.lg
-  const extraSpacing = theme.spacings.md
 
-  const maxHeight = `calc(100vh - ${headerHeight} - ${galleryMargin} - ${extraSpacing})`
+  const maxHeight = `calc(100vh - ${headerHeight} - ${galleryMargin})`
   const ratio = `calc(${height} / ${width} * 100%)`
 
   const hasImages = images.length > 0
@@ -200,7 +199,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   width={image.width}
                   height={image.height}
                   loading={idx === 0 ? 'eager' : 'lazy'}
-                  sx={{ display: 'block' }}
+                  sx={{ display: 'block', objectFit: 'contain' }}
                   sizes={{
                     0: '100vw',
                     [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',

package/FramerScroller/SidebarSlider.tsx

@@ -1,7 +1,7 @@
 import {
   Scroller,
   ScrollerButton,
-  ScrollerButtonProps as ScrollerButtonPropsType,
+  ScrollerButtonProps,
   ScrollerPageCounter,
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
@@ -28,7 +28,7 @@ export type SidebarSliderProps = {
   children: ReactNode
   sidebar: ReactNode
   sx?: SxProps<Theme>
-  buttonSize?: ScrollerButtonPropsType['size']
+  buttonSize?: ScrollerButtonProps['size']
 }
 
 export function SidebarSlider(props: SidebarSliderProps) {

package/FramerScroller/index.ts

@@ -1,2 +1,3 @@
 export * from './SidebarGallery'
 export * from './SidebarSlider'
+export * from './ItemScroller'

package/Layout/components/LayoutHeaderContent.tsx

@@ -158,6 +158,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             gridArea: 'center',
             justifyContent: 'start',
             overflow: 'hidden',
+            justifySelf: 'center',
 
             transition: `opacity 150ms`,
             opacity: 0,

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -25,7 +25,11 @@ export function LayoutOverlay(props: LayoutOverlayProps) {
   const [isPresent, safeToRemove] = usePresence()
 
   return (
-    <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
+    <ScrollerProvider
+      scrollSnapTypeSm={scrollSnapTypeSm}
+      scrollSnapTypeMd={scrollSnapTypeMd}
+      _inititalSnap={false}
+    >
       <OverlayBase
         active={active}
         direction={direction}

package/Navigation/components/NavigationItem.tsx

@@ -1,18 +1,11 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import {
-  Box,
-  ListItemButton,
-  styled,
-  Theme,
-  useEventCallback,
-  useMediaQuery,
-  alpha,
-} from '@mui/material'
+import { alpha, Box, ListItemButton, styled, useEventCallback, useTheme } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
 import { IconSvg } from '../../IconSvg'
 import { extendableComponent } from '../../Styles/extendableComponent'
+import { useMatchMedia } from '../../hooks'
 import { iconChevronRight } from '../../icons'
 import {
   isNavigationButton,
@@ -54,9 +47,9 @@ const NavigationLI = styled('li')({ display: 'contents' })
 
 export const NavigationItem = React.memo<NavigationItemProps>((props) => {
   const { id, parentPath, idx, first, last, NavigationList, mouseEvent } = props
+  const { selection, hideRootOnNavigate, closing, animating, serverRenderDepth } = useNavigation()
 
   const row = idx + 1
-  const { selection, hideRootOnNavigate, closing, animating } = useNavigation()
 
   const itemPath = [...(parentPath ? parentPath.split(',') : []), id]
 
@@ -83,13 +76,18 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
     closing.set(true)
   })
 
-  const isDesktop = useMediaQuery<Theme>((theme) => theme.breakpoints.up('md'))
+  const matchMedia = useMatchMedia()
 
   if (isNavigationButton(props)) {
-    const { childItems, name } = props
+    const { childItems, name, href } = props
+
+    const skipChildren = itemPath.length + 1 > serverRenderDepth && !isSelected && !!href
+
     return (
       <NavigationLI className={classes.li}>
         <ListItemButton
+          component={href ? 'a' : 'div'}
+          href={href || undefined}
           className={classes.item}
           role='button'
           sx={[
@@ -116,14 +114,14 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
           tabIndex={tabIndex}
           onClick={(e) => {
             e.preventDefault()
-            if (!isSelected && animating.get() === false) {
+            if (!isSelected && !animating.get()) {
               selection.set(itemPath)
             }
           }}
           onMouseMove={
-            itemPath.length > 1 && mouseEvent === 'hover'
+            (itemPath.length > 1 || !hideRootOnNavigate) && mouseEvent === 'hover'
               ? (e) => {
-                  if (isDesktop && animating.get() === false && !isSelected) {
+                  if (!isSelected && !animating.get() && matchMedia.up('md')) {
                     e.preventDefault()
                     setTimeout(() => selection.set(itemPath), 0)
                   }
@@ -145,18 +143,21 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
           <IconSvg src={iconChevronRight} sx={{ flexShrink: 0 }} />
         </ListItemButton>
 
-        <NavigationList
-          items={childItems}
-          selected={isSelected}
-          parentPath={itemPath.join(',')}
-          mouseEvent={mouseEvent}
-        />
+        {!skipChildren && (
+          <NavigationList
+            items={childItems}
+            selected={isSelected}
+            parentPath={itemPath.join(',')}
+            mouseEvent={mouseEvent}
+          />
+        )}
       </NavigationLI>
     )
   }
 
   if (isNavigationHref(props)) {
     const { name, href } = props
+
     return (
       <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
         <PageLink href={href} passHref prefetch={false}>
@@ -198,8 +199,6 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
     )
   }
 
-  if (process.env.NODE_ENV !== 'production') throw Error('NavigationItem: unknown type')
-
   return null
 })
 

package/Navigation/components/NavigationOverlay.tsx

@@ -11,6 +11,7 @@ import { LayoutTitle } from '../../Layout/components/LayoutTitle'
 import { Overlay } from '../../Overlay/components/Overlay'
 import { extendableComponent } from '../../Styles/extendableComponent'
 import { useFabSize } from '../../Theme'
+import { useMatchMedia } from '../../hooks'
 import { iconClose, iconChevronLeft } from '../../icons'
 import { useNavigation } from '../hooks/useNavigation'
 import { mouseEventPref } from './NavigationItem'
@@ -57,14 +58,15 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
     mouseEvent,
     itemPadding = 'md',
   } = props
-  const { selection, items, animating, closing } = useNavigation()
+  const { selection, items, animating, closing, serverRenderDepth } = useNavigation()
 
   const fabSize = useFabSize('responsive')
   const svgSize = useIconSvgSize('large')
 
-  const theme2 = useTheme()
+  const matchMedia = useMatchMedia()
+
   const handleOnBack = useEventCallback(() => {
-    if (window.matchMedia(`(max-width: ${theme2.breakpoints.values.md}px)`).matches) {
+    if (matchMedia.down('md')) {
       const current = selection.get()
       selection.set(current !== false ? current.slice(0, -1) : false)
     } else selection.set([])
@@ -87,6 +89,8 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
 
   const handleClose = useEventCallback(() => closing.set(true))
 
+  if (selectedLevel === -1 && serverRenderDepth <= 0) return null
+
   return (
     <Overlay
       className={classes.root}
@@ -112,7 +116,7 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
       sx={{
         zIndex: 'drawer',
         '& .LayoutOverlayBase-overlayPane': {
-          minWidth: 'auto !important',
+          minWidth: itemWidthMd,
           width: 'max-content',
           overflow: 'hidden',
           display: 'grid',

package/Navigation/components/NavigationProvider.tsx

@@ -6,6 +6,8 @@ import {
   NavigationContextType,
   NavigationContext,
   UseNavigationSelection,
+  NavigationNodeType,
+  NavigationNodeComponent,
 } from '../hooks/useNavigation'
 
 export type NavigationProviderProps = {
@@ -15,6 +17,7 @@ export type NavigationProviderProps = {
   children?: React.ReactNode
   animationDuration?: number
   selection: UseNavigationSelection
+  serverRenderDepth?: number
 }
 
 const nonNullable = <T,>(value: T): value is NonNullable<T> => value !== null && value !== undefined
@@ -27,6 +30,7 @@ export const NavigationProvider = React.memo<NavigationProviderProps>((props) =>
     animationDuration = 0.225,
     children,
     selection,
+    serverRenderDepth = 2,
   } = props
 
   const animating = useMotionValue(false)
@@ -39,10 +43,19 @@ export const NavigationProvider = React.memo<NavigationProviderProps>((props) =>
       animating,
       closing,
       items: items
-        .map((item, index) => (isElement(item) ? { id: item.key ?? index, component: item } : item))
+        .map((item, index) =>
+          isElement(item)
+            ? ({
+                type: NavigationNodeType.COMPONENT,
+                id: item.key ?? index,
+                component: item,
+              } as NavigationNodeComponent)
+            : item,
+        )
         .filter(nonNullable),
+      serverRenderDepth,
     }),
-    [hideRootOnNavigate, selection, animating, closing, items],
+    [hideRootOnNavigate, selection, animating, closing, items, serverRenderDepth],
   )
 
   return (

package/Navigation/hooks/useNavigation.ts

@@ -1,5 +1,5 @@
 import { MotionValue, useMotionValue } from 'framer-motion'
-import { createContext, MutableRefObject, useContext } from 'react'
+import React, { createContext, MutableRefObject, useContext } from 'react'
 
 export type NavigationId = string | number
 export type NavigationPath = NavigationId[]
@@ -19,38 +19,51 @@ export type NavigationContextType = {
   hideRootOnNavigate: boolean
   animating: MotionValue<boolean>
   closing: MotionValue<boolean>
+  serverRenderDepth: number
 }
 
 type NavigationNodeBase = {
+  type?: NavigationNodeType
   id: NavigationId
 }
 
+export enum NavigationNodeType {
+  LINK,
+  BUTTON,
+  COMPONENT,
+}
+
 export type NavigationNodeHref = NavigationNodeBase & {
-  name: string
+  name: React.ReactNode
   href: string
 }
 
 export type NavigationNodeButton = NavigationNodeBase & {
-  name: string
+  name: React.ReactNode
+  type: NavigationNodeType.BUTTON
+  href?: string
   childItems: NavigationNode[]
 }
 
 export type NavigationNodeComponent = NavigationNodeBase & {
+  type: NavigationNodeType.COMPONENT
   component: React.ReactNode
 }
 
 export type NavigationNode = NavigationNodeHref | NavigationNodeButton | NavigationNodeComponent
 
 export function isNavigationHref(node: NavigationNodeBase): node is NavigationNodeHref {
-  return 'href' in node
+  return 'href' in node && node.type !== NavigationNodeType.BUTTON
 }
 
 export function isNavigationButton(node: NavigationNodeBase): node is NavigationNodeButton {
-  return (node as NavigationNodeButton).childItems?.length > 0
+  return (
+    node.type === NavigationNodeType.BUTTON && (node as NavigationNodeButton).childItems?.length > 0
+  )
 }
 
 export function isNavigationComponent(node: NavigationNodeBase): node is NavigationNodeComponent {
-  return 'component' in node
+  return node.type === NavigationNodeType.COMPONENT && 'component' in node
 }
 
 export const NavigationContext = createContext(undefined as unknown as NavigationContextType)

package/Overlay/components/OverlayBase.tsx

@@ -99,7 +99,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
   )(th)
 
   const { scrollerRef, snap } = useScrollerContext()
-  const positions = useOverlayPosition()
+  const positions = useOverlayPosition(variantSm, variantMd)
   const scrollTo = useScrollTo()
   const beforeRef = useRef<HTMLDivElement>(null)
 
@@ -148,7 +148,6 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
         scroller.scrollLeft = positions.open.x.get()
         scroller.scrollTop = positions.open.y.get()
       }
-
       if (positions.open.visible.get() === 0) {
         scroller.scrollLeft = positions.closed.x.get()
         scroller.scrollTop = positions.closed.y.get()
@@ -157,8 +156,6 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
 
     window.addEventListener('resize', resize)
     return () => window.removeEventListener('resize', resize)
-    // We're not checking for all deps, because that will cause rerenders.
-    // The scroller context shouldn't be changing, but at the moment it is.
   }, [positions, scrollerRef])
 
   // When the overlay is closed by navigating away, we're closing the overlay.
@@ -197,7 +194,13 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
   useDomEvent(windowRef, 'keyup', handleEscape, { passive: true })
 
   // When the overlay isn't visible anymore, we navigate back.
-  useEffect(() => positions.open.visible.onChange((o) => o === 0 && closeOverlay()))
+  useEffect(
+    () =>
+      positions.open.visible.onChange(
+        (o) => position.get() !== OverlayPosition.OPENED && o === 0 && closeOverlay(),
+      ),
+    [closeOverlay, position, positions.open.visible],
+  )
 
   // Measure the offset of the overlay in the scroller.
   const offsetY = useMotionValue(0)
@@ -345,7 +348,6 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
             gridArea: 'overlay',
             scrollSnapAlign: 'start',
             scrollSnapStop: 'always',
-
             [theme.breakpoints.down('md')]: {
               justifyContent: justifySm,
               alignItems: justifySm,
@@ -370,6 +372,9 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
               '&.sizeMdFloating': {
                 padding: `${theme.page.vertical} ${theme.page.horizontal}`,
               },
+              '&.sizeMdFloating.variantMdBottom': {
+                marginTop: `calc(${theme.page.vertical} * -1)`,
+              },
             },
           })}
         >
@@ -380,7 +385,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
               pointerEvents: 'all',
               backgroundColor: theme.palette.background.paper,
               boxShadow: theme.shadows[24],
-              scrollSnapAlign: 'end',
+
               [theme.breakpoints.down('md')]: {
                 minWidth: '80vw',
                 '&:not(.sizeMdFull)': {
@@ -394,6 +399,7 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
                 '&.variantSmBottom': {
                   borderTopLeftRadius: `${theme.shape.borderRadius * 3}px`,
                   borderTopRightRadius: `${theme.shape.borderRadius * 3}px`,
+                  scrollSnapAlign: 'end',
                 },
                 '&.sizeSmFloating': {
                   borderRadius: `${theme.shape.borderRadius * 3}px`,
@@ -409,15 +415,11 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
                 },
               },
               [theme.breakpoints.up('md')]: {
-                '&.sizeMdFull': {
-                  minWidth: 'max(600px, 50vw)',
-                },
-                '&:not(.sizeMdFull)': {
-                  width: 'max-content',
-                },
+                minWidth: '1px',
 
                 '&.sizeMdFull.variantMdBottom': {
                   minHeight: `calc(${clientSizeCssVar.y} - ${mdSpacingTop})`,
+                  scrollSnapAlign: 'end',
                 },
                 '&.sizeMdFull.variantMdLeft': {
                   paddingBottom: '1px',
@@ -433,6 +435,10 @@ export function OverlayBase(incommingProps: LayoutOverlayBaseProps) {
                   borderTopLeftRadius: `${theme.shape.borderRadius * 4}px`,
                   borderTopRightRadius: `${theme.shape.borderRadius * 4}px`,
                 },
+                '&.variantMdLeft, &.variantMdRight': {
+                  width: 'max-content',
+                },
+
                 '&.sizeMdFloating': {
                   borderRadius: `${theme.shape.borderRadius * 4}px`,
                 },

package/Overlay/hooks/useOverlayPosition.ts

@@ -5,71 +5,101 @@ import {
   useIsomorphicLayoutEffect,
 } from '@graphcommerce/framer-utils'
 import { motionValue } from 'framer-motion'
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
+import { useMatchMedia } from '../../hooks'
 
-export function useOverlayPosition() {
-  const { getScrollSnapPositions, scrollerRef } = useScrollerContext()
+const clampRound = (value: number) => Math.round(Math.max(0, Math.min(1, value)) * 100) / 100
 
+export function useOverlayPosition(
+  variantSm: 'left' | 'bottom' | 'right',
+  variantMd: 'left' | 'bottom' | 'right',
+) {
+  const match = useMatchMedia()
+  const { getScrollSnapPositions, scrollerRef } = useScrollerContext()
   const state = useConstant(() => ({
     open: {
       x: motionValue(0),
       y: motionValue(0),
       visible: motionValue(0),
     },
-    closed: { x: motionValue(0), y: motionValue(0) },
+    closed: {
+      x: motionValue(0),
+      y: motionValue(0),
+    },
   }))
 
   const scroll = useElementScroll(scrollerRef)
 
+  const variant = useCallback(
+    () => (match.up('md') ? variantMd : variantSm),
+    [match, variantMd, variantSm],
+  )
+
   useIsomorphicLayoutEffect(() => {
     if (!scrollerRef.current) return () => {}
 
     const measure = () => {
       const positions = getScrollSnapPositions()
 
-      state.open.x.set(positions.x[1] ?? 0)
-      state.closed.x.set(positions.x[0])
-      state.open.y.set(positions.y[1] ?? 0)
-      state.closed.y.set(positions.y[0])
+      if (variant() === 'left') {
+        state.open.x.set(0)
+        state.closed.x.set(positions.x[positions.x.length - 1] ?? 0)
+      }
+      if (variant() === 'right') {
+        state.open.x.set(positions.x[positions.x.length - 1] ?? 0)
+        state.closed.x.set(0)
+      }
+      if (variant() === 'bottom') {
+        state.open.y.set(positions.y[positions.y.length - 1] ?? 0)
+        state.closed.y.set(0)
+      }
     }
-    const ro = new ResizeObserver(measure)
     measure()
 
+    const ro = new ResizeObserver(measure)
     ro.observe(scrollerRef.current)
+    ;[...scrollerRef.current.children].forEach((child) => ro.observe(child))
+
     return () => ro.disconnect()
-  })
+  }, [getScrollSnapPositions, scrollerRef, state, variant])
 
   // sets a float between 0 and 1 for the visibility of the overlay
   useEffect(() => {
+    if (!scrollerRef.current) return () => {}
     const calc = () => {
-      const x = scroll.x.get()
-      const y = scroll.y.get()
-
-      const yC = state.closed.y.get()
-      const yO = state.open.y.get()
-      const visY = yC === yO ? 1 : Math.max(0, Math.min(1, (y - yC) / (yO - yC)))
-
-      const xC = state.closed.x.get()
-      const xO = state.open.x.get()
+      const x = scrollerRef.current?.scrollLeft ?? scroll.x.get()
+      const y = scrollerRef.current?.scrollTop ?? scroll.y.get()
 
-      const visX = xO === xC ? 1 : Math.max(0, Math.min(1, (x - xC) / (xO - xC)))
-
-      let vis = visY * visX
-      if (xC === 0 && xO === 0 && yC === 0 && yO === 0) vis = 0
+      const positions = getScrollSnapPositions()
 
-      // todo: visibility sometimes flickers
-      state.open.visible.set(vis)
+      if (variant() === 'left') {
+        const closedX = positions.x[1] ?? 0
+        state.open.visible.set(closedX === 0 ? 0 : clampRound((x - closedX) / -closedX))
+      }
+      if (variant() === 'right') {
+        const openedX = positions.x[1] ?? 0
+        state.open.visible.set(openedX === 0 ? 0 : clampRound(x / openedX))
+      }
+      if (variant() === 'bottom') {
+        const openedY = positions.y[1] ?? 0
+        state.open.visible.set(openedY === 0 ? 0 : clampRound(y / openedY))
+      }
     }
 
     const cancelY = scroll.y.onChange(calc)
     const cancelX = scroll.x.onChange(calc)
     calc()
 
+    const ro = new ResizeObserver(calc)
+    ro.observe(scrollerRef.current)
+    ;[...scrollerRef.current.children].forEach((child) => ro.observe(child))
+
     return () => {
       cancelY()
       cancelX()
+      ro.disconnect()
     }
-  }, [state, scroll])
+  }, [getScrollSnapPositions, scroll, scrollerRef, state, variant])
 
   return state
 }

package/RenderType/filterNonNullableKeys.ts

@@ -1,20 +1,23 @@
 import type { OptionalKeysOf, Simplify } from 'type-fest'
 
+export type RequiredKeys<
+  T extends Record<string, unknown>,
+  Keys extends OptionalKeysOf<T>,
+> = Simplify<
+  Omit<T, Keys> & {
+    [K in Keys]: NonNullable<T[K]>
+  }
+>
+
 export function filterNonNullableKeys<
   T extends Record<string, unknown>,
   Keys extends OptionalKeysOf<T>,
 >(items: (T | null | undefined)[] | null | undefined, values: Keys[] = []) {
   if (!items) return []
 
-  type ResultWithRequired = Simplify<
-    Omit<T, Keys> & {
-      [K in Keys]: NonNullable<T[K]>
-    }
-  >
-
   const result = items.filter(
     (item) => item !== null && typeof item !== 'undefined' && values.every((v) => item?.[v]),
   )
 
-  return result as ResultWithRequired[]
+  return result as RequiredKeys<T, Keys>[]
 }

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,4 +1,4 @@
-import { breakpointVal } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
 import {
   Fab,
   Snackbar,
@@ -12,7 +12,7 @@ import {
 } from '@mui/material'
 import React, { useEffect, useState } from 'react'
 import { IconSvg } from '../IconSvg'
-import { extendableComponent } from '../Styles'
+import { extendableComponent, breakpointVal } from '../Styles'
 import { iconClose, iconCheckmark, iconSadFace } from '../icons'
 
 type Size = 'normal' | 'wide'
@@ -114,7 +114,8 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
               alignItems: 'center',
               gap: theme.spacings.xxs,
               gridTemplate: {
-                xs: `"icon children close" "action action action"`,
+                xs: `"icon children close"
+                     "action action action"`,
                 md: '"icon children action close"',
               },
               gridTemplateColumns: {
@@ -139,7 +140,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
               )}
               <Fab
                 className={classes.close}
-                aria-label='Close'
+                aria-label={i18n._(/* i18n */ 'Close')}
                 size='small'
                 onClick={hideSnackbar}
                 onMouseDown={preventAnimationBubble}

package/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useDateTimeFormat'
 export * from './useNumberFormat'
 export * from './useUrlQuery'
 export * from './useMemoDeep'
+export * from './useMatchMedia'

package/hooks/useMatchMedia.ts

@@ -0,0 +1,17 @@
+import { Breakpoint, useTheme } from '@mui/material'
+import { useMemo } from 'react'
+
+export function useMatchMedia() {
+  const theme = useTheme()
+
+  return useMemo(() => {
+    const callback = (direction: 'up' | 'down', breakpointKey: number | Breakpoint) =>
+      window.matchMedia(theme.breakpoints[direction](breakpointKey).replace(/^@media( ?)/m, ''))
+        .matches
+
+    return {
+      down: (key: number | Breakpoint) => callback('down', key),
+      up: (key: number | Breakpoint) => callback('up', key),
+    }
+  }, [theme.breakpoints])
+}

package/index.ts

@@ -1,6 +1,4 @@
-export * from './ActionCard/ActionCard'
-export * from './ActionCard/ActionCardList'
-export * from './ActionCard/ActionCardListForm'
+export * from './ActionCard'
 export * from './AnimatedRow/AnimatedRow'
 export * from './Blog/BlogAuthor/BlogAuthor'
 export * from './Blog/BlogContent/BlogContent'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.27.0",
+  "version": "4.28.1",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,10 +19,10 @@
     "@emotion/react": "^11.9.3",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
-    "@graphcommerce/framer-next-pages": "3.3.0",
-    "@graphcommerce/framer-scroller": "2.1.39",
-    "@graphcommerce/framer-utils": "3.2.0",
-    "@graphcommerce/image": "3.1.9",
+    "@graphcommerce/framer-next-pages": "3.3.2",
+    "@graphcommerce/framer-scroller": "2.1.41",
+    "@graphcommerce/framer-utils": "3.2.1",
+    "@graphcommerce/image": "3.1.10",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"