@graphcommerce/next-ui 4.26.0 → 4.28.0

package/ActionCard/ActionCard.tsx

@@ -1,9 +1,25 @@
-import { SxProps, ButtonBase, Box, Theme, alpha } from '@mui/material'
+import { alpha, Box, BoxProps, ButtonBase, ButtonProps, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
 
+type Variants = 'outlined' | 'default'
+type Size = 'large' | 'medium' | 'small'
+type Color = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
+type Layout = 'inline' | 'grid' | 'list' | 'stack'
+
+function isButtonProps(props: ButtonProps<'div'> | BoxProps<'div'>): props is ButtonProps<'div'> {
+  return props.onClick !== undefined
+}
+
+const RenderComponent = (props: ButtonProps<'div'> | BoxProps<'div'>) =>
+  isButtonProps(props) ? <ButtonBase component='div' {...props} /> : <Box {...props} />
+
 export type ActionCardProps = {
+  variant?: Variants
+  size?: Size
+  color?: Color
+  layout?: Layout
   sx?: SxProps<Theme>
   title?: string | React.ReactNode
   image?: React.ReactNode
@@ -14,10 +30,10 @@ export type ActionCardProps = {
   secondaryAction?: React.ReactNode
   onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number) => void
   selected?: boolean
-  hidden?: boolean
   value: string | number
   reset?: React.ReactNode
   disabled?: boolean
+  error?: boolean
 }
 
 const parts = [
@@ -34,10 +50,14 @@ const parts = [
 const name = 'ActionCard'
 
 type StateProps = {
-  selected?: boolean
-  hidden?: boolean
-  disabled?: boolean
-  image?: boolean
+  variant: Variants
+  size: Size
+  color: Color
+  layout: Layout
+  selected: boolean
+  disabled: boolean
+  image: boolean
+  error: boolean
 }
 
 const { withState, selectors } = extendableComponent<StateProps, typeof name, typeof parts>(
@@ -60,99 +80,131 @@ export function ActionCard(props: ActionCardProps) {
     onClick,
     value,
     selected = false,
-    hidden = false,
     reset,
     disabled = false,
+    size = 'medium',
+    color = 'primary',
+    variant = 'outlined',
+    layout = 'list',
+    error = false,
   } = props
 
-  const classes = withState({ hidden, disabled, selected, image: Boolean(image) })
-
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => onClick?.(event, value)
+  const classes = withState({
+    disabled,
+    selected,
+    image: Boolean(image),
+    variant,
+    size,
+    color,
+    layout,
+    error,
+  })
 
   return (
-    <ButtonBase
-      component='div'
+    <RenderComponent
       className={classes.root}
-      onClick={handleClick}
+      onClick={onClick && ((event) => onClick?.(event, value))}
       disabled={disabled}
       sx={[
         (theme) => ({
-          display: 'grid',
-          width: '100%',
-          gridTemplateColumns: 'min-content auto auto',
-          gridTemplateAreas: `
-            "image title action"
-            "image details ${price ? 'price' : 'details'}"
-            "image secondaryAction additionalDetails"
-            "after after after"
-          `,
-          justifyContent: 'unset',
-          typography: 'body1',
-          // textAlign: 'left',
-          background: theme.palette.background.paper,
-          padding: `calc(${theme.spacings.xxs} + 1px) calc(${theme.spacings.xs} + 1px)`,
-          columnGap: theme.spacings.xxs,
-          border: `1px solid ${theme.palette.divider}`,
-          borderBottomColor: `transparent`,
-          '&:first-of-type': {
-            ...breakpointVal(
-              'borderTopLeftRadius',
-              theme.shape.borderRadius * 3,
-              theme.shape.borderRadius * 4,
-              theme.breakpoints.values,
-            ),
-            ...breakpointVal(
-              'borderTopRightRadius',
-              theme.shape.borderRadius * 3,
-              theme.shape.borderRadius * 4,
-              theme.breakpoints.values,
-            ),
+          '&.sizeSmall': {
+            padding: `5px 10px`,
+            display: 'flex',
+            typography: 'body2',
           },
-          '&:last-of-type': {
-            ...breakpointVal(
-              'borderBottomLeftRadius',
-              theme.shape.borderRadius * 3,
-              theme.shape.borderRadius * 4,
-              theme.breakpoints.values,
-            ),
-            ...breakpointVal(
-              'borderBottomRightRadius',
-              theme.shape.borderRadius * 3,
-              theme.shape.borderRadius * 4,
-              theme.breakpoints.values,
-            ),
-            borderBottom: `1px solid ${theme.palette.divider}`,
+
+          '&.sizeMedium': {
+            padding: `10px 12px`,
+            typography: 'body2',
+            display: 'block',
           },
-        }),
-        !image && {
-          gridTemplateColumns: 'auto auto',
-          gridTemplateAreas: `
-            "title action"
-            "details ${price ? 'price' : 'details'}"
-            "secondaryAction additionalDetails"
-            "after after"
-          `,
-        },
-        hidden && {
-          display: 'none',
-        },
-        selected &&
-          ((theme) => ({
-            border: `2px solid ${theme.palette.secondary.main} !important`,
-            boxShadow: `0 0 0 4px ${alpha(
-              theme.palette.secondary.main,
-              theme.palette.action.hoverOpacity,
-            )} !important`,
-            ...breakpointVal(
-              'borderRadius',
-              theme.shape.borderRadius * 3,
-              theme.shape.borderRadius * 4,
-              theme.breakpoints.values,
-            ),
+
+          '&.sizeLarge': {
             padding: `${theme.spacings.xxs} ${theme.spacings.xs}`,
-          })),
-        disabled &&
-          ((theme) => ({
+            display: 'block',
+          },
+
+          '&.variantDefault': {
+            borderBottom: `1px solid ${theme.palette.divider}`,
+            '&.selected': {
+              borderBottom: `2px solid ${theme.palette[color].main}`,
+              marginBottom: '-1px',
+              backgroundColor: `${theme.palette[color].main}10`,
+            },
+            '&.error': {
+              borderBottom: `2px solid ${theme.palette.error.main}`,
+              marginBottom: '-1px',
+              backgroundColor: `${theme.palette.error.main}10`,
+            },
+          },
+
+          '&.variantOutlined': {
+            backgroundColor: theme.palette.background.paper,
+            border: `1px solid ${theme.palette.divider}`,
+            '&:not(:last-of-type)': {
+              marginBottom: '-1px',
+            },
+
+            '&.layoutList': {
+              '&:first-of-type, &.selected': {
+                ...breakpointVal(
+                  'borderTopLeftRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
+                ...breakpointVal(
+                  'borderTopRightRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
+              },
+              '&:last-of-type, &.selected': {
+                ...breakpointVal(
+                  'borderBottomLeftRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
+                ...breakpointVal(
+                  'borderBottomRightRadius',
+                  theme.shape.borderRadius * 3,
+                  theme.shape.borderRadius * 4,
+                  theme.breakpoints.values,
+                ),
+              },
+            },
+            '&:not(.layoutList)': {
+              ...breakpointVal(
+                'borderRadius',
+                theme.shape.borderRadius * 3,
+                theme.shape.borderRadius * 4,
+                theme.breakpoints.values,
+              ),
+            },
+
+            '&.selected': {
+              border: `2px solid ${theme.palette[color].main}`,
+              boxShadow: `0 0 0 4px ${alpha(
+                theme.palette[color].main,
+                theme.palette.action.hoverOpacity,
+              )}`,
+
+              '&.sizeSmall': { padding: `4px 9px` },
+              '&.sizeMedium': { padding: `9px 11px` },
+              '&.sizeLarge': {
+                padding: `calc(${theme.spacings.xxs} - 1px) calc(${theme.spacings.xs} - 1px)`,
+              },
+            },
+            '&.error': {
+              border: `2px solid ${theme.palette.error.main}`,
+            },
+          },
+          '&.selected': {
+            zIndex: 1,
+          },
+          '&.disabled': {
             '& *': {
               opacity: theme.palette.action.disabledOpacity,
             },
@@ -160,64 +212,96 @@ export function ActionCard(props: ActionCardProps) {
               theme.palette.action.disabledBackground,
               theme.palette.action.disabledOpacity / 10,
             ),
-          })),
-
+          },
+        }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      {image && (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          width: '100%',
+          justifyContent: 'space-between',
+        }}
+      >
         <Box
-          className={classes.image}
           sx={{
-            gridArea: 'image',
             display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
           }}
         >
-          {image}
-        </Box>
-      )}
-      {title && (
-        <Box className={classes.title} sx={{ gridArea: 'title', display: 'flex' }}>
-          {title}
-        </Box>
-      )}
-      {action && (
-        <Box className={classes.action} sx={{ gridArea: 'action', textAlign: 'right' }}>
-          {!selected ? action : reset}
-        </Box>
-      )}
-      {details && (
-        <Box
-          className={classes.details}
-          sx={(theme) => ({
-            typography: 'body2',
-            gridArea: 'details',
-            color: 'text.secondary',
-          })}
-        >
-          {details}
+          {image && (
+            <Box
+              className={classes.image}
+              sx={{ display: 'flex', paddingRight: '15px', alignSelf: 'center' }}
+            >
+              {image}
+            </Box>
+          )}
+
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+            }}
+          >
+            {title && (
+              <Box
+                className={classes.title}
+                sx={{
+                  typography: 'subtitle2',
+                  '&.sizeMedium': { typographty: 'subtitle1' },
+                  '&.sizeLarge': { typography: 'h6' },
+                }}
+              >
+                {title}
+              </Box>
+            )}
+
+            {details && (
+              <Box className={classes.details} sx={{ color: 'text.secondary' }}>
+                {details}
+              </Box>
+            )}
+
+            {secondaryAction && <Box className={classes.secondaryAction}>{secondaryAction}</Box>}
+          </Box>
         </Box>
-      )}
 
-      {price && !disabled && (
         <Box
-          className={classes.price}
-          sx={{ gridArea: 'price', textAlign: 'right', typography: 'h5' }}
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            alignItems: 'flex-end',
+          }}
         >
-          {price}
-        </Box>
-      )}
+          {action && (
+            <Box className={classes.action} sx={{ marginBottom: '5px' }}>
+              {!selected ? action : reset}
+            </Box>
+          )}
 
-      {secondaryAction && (
-        <Box className={classes.secondaryAction} sx={{ gridArea: 'secondaryAction' }}>
-          {secondaryAction}
-        </Box>
-      )}
-      {after && (
-        <Box className={classes.after} sx={{ gridArea: 'after' }}>
-          {after}
+          {price && !disabled && (
+            <Box
+              className={classes.price}
+              sx={{
+                textAlign: 'right',
+                typography: 'body1',
+                '&.sizeMedium': { typographty: 'subtitle1' },
+                '&.sizeLarge': { typography: 'h6' },
+              }}
+            >
+              {price}
+            </Box>
+          )}
         </Box>
-      )}
-    </ButtonBase>
+      </Box>
+      {after && <Box className={classes.after}>{after}</Box>}
+    </RenderComponent>
   )
 }

package/ActionCard/ActionCardList.tsx

@@ -1,10 +1,12 @@
-import { Alert, Box } from '@mui/material'
+import { Alert, Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { isFragment } from 'react-is'
+import { extendableComponent } from '../Styles'
 import { ActionCardProps } from './ActionCard'
 
 type MultiSelect = {
   multiple: true
+  collapse?: false
   value: (string | number)[]
 
   onChange?: (event: React.MouseEvent<HTMLElement>, value: MultiSelect['value']) => void
@@ -12,6 +14,7 @@ type MultiSelect = {
 type Select = {
   multiple?: false
   value: string | number
+  collapse?: boolean
 
   /** Value is null when deselected when not required */
   onChange?: (event: React.MouseEvent<HTMLElement>, value: Select['value'] | null) => void
@@ -22,7 +25,9 @@ export type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
   required?: boolean
   error?: boolean
   errorMessage?: string
-} & SelectOrMulti
+  sx?: SxProps<Theme>
+} & SelectOrMulti &
+  HoistedActionCardProps
 
 function isMulti(props: ActionCardListProps): props is ActionCardListProps<MultiSelect> {
   return props.multiple === true
@@ -37,9 +42,30 @@ function isValueSelected(
   return value === candidate
 }
 
+type HoistedActionCardProps = Pick<ActionCardProps, 'color' | 'variant' | 'size' | 'layout'>
+
+const parts = ['root'] as const
+const name = 'ActionCardList'
+const { withState, selectors } = extendableComponent<
+  HoistedActionCardProps,
+  typeof name,
+  typeof parts
+>(name, parts)
+
 export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListProps>(
   (props, ref) => {
-    const { children, required, error = false, errorMessage } = props
+    const {
+      children,
+      required,
+      error = false,
+      errorMessage,
+      size = 'medium',
+      color = 'primary',
+      variant = 'outlined',
+      layout = 'list',
+      collapse = false,
+      sx = [],
+    } = props
 
     const handleChange: ActionCardProps['onClick'] = isMulti(props)
       ? (event, v) => {
@@ -65,8 +91,10 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
         }
 
     type ActionCardLike = React.ReactElement<
-      Pick<ActionCardProps, 'value' | 'selected' | 'disabled' | 'onClick' | 'hidden'>
+      Pick<ActionCardProps, 'value' | 'selected' | 'disabled' | 'onClick' | 'error' | 'onClick'> &
+        HoistedActionCardProps
     >
+
     function isActionCardLike(el: React.ReactElement): el is ActionCardLike {
       const hasValue = (el as ActionCardLike).props.value
 
@@ -100,55 +128,68 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
       (child) => child.props.value === props.value && child.props.disabled !== true,
     )?.props.value
 
+    const classes = withState({ size, color, variant, layout })
+
     return (
-      <Box
-        ref={ref}
-        sx={[
-          error && {
-            '& .ActionCard-root': {
-              borderLeft: 2,
-              borderRight: 2,
-              borderLeftColor: 'error.main',
-              borderRightColor: 'error.main',
-            },
-            '& > div:first-of-type.ActionCard-root': {
-              borderTop: 2,
-              borderTopColor: 'error.main',
-            },
-            '& > div:last-of-type.ActionCard-root': {
-              borderBottom: 2,
-              borderBottomColor: 'error.main',
-            },
-          },
-        ]}
-      >
-        {childReactNodes.map((child) =>
-          React.cloneElement(child, {
-            onClick: handleChange,
-            hidden: !!value && value !== child.props.value,
-            selected:
-              child.props.selected === undefined
-                ? isValueSelected(child.props.value, value)
-                : child.props.selected,
-          }),
-        )}
-        {error && (
-          <Box component='span'>
-            <Alert
-              severity='error'
-              variant='standard'
-              sx={(theme) => ({
-                marginTop: 0.5,
-                borderStartStartRadius: 0,
-                borderStartEndRadius: 0,
-                borderRadius: theme.shape.borderRadius * 1,
-              })}
-            >
-              {errorMessage}
-            </Alert>
-          </Box>
+      <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]),
+          ]}
+        >
+          {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,
+              selected:
+                child.props.selected === undefined
+                  ? isValueSelected(child.props.value, value)
+                  : child.props.selected,
+            })
+          })}
+        </Box>
+        {error && errorMessage && (
+          <Alert
+            severity='error'
+            variant='standard'
+            sx={(theme) => ({
+              marginTop: theme.spacings.xxs,
+            })}
+          >
+            {errorMessage}
+          </Alert>
         )}
-      </Box>
+      </div>
     )
   },
 )

package/ActionCard/ActionCardListForm.tsx

@@ -6,37 +6,37 @@ import { ActionCardList, ActionCardListProps } from './ActionCardList'
 
 export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
 
-export type ActionCardItemRenderProps<T> = Pick<
-  ActionCardProps,
-  'selected' | 'hidden' | 'value'
-> & {
+export type ActionCardItemRenderProps<T> = ActionCardProps & {
   onReset: MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLSpanElement>
 } & T
 
 export type ActionCardListFormProps<T extends ActionCardItemBase> = Omit<
   ActionCardListProps,
-  'value'
+  'value' | 'error' | 'onChange' | 'children' | 'multiple'
 > &
-  Omit<ControllerProps<any>, 'render'> & {
+  Omit<ControllerProps<any>, 'render' | 'shouldUnregister'> & {
     items: T[]
-    render: React.VFC<ActionCardItemRenderProps<T>>
+    render: React.FC<ActionCardItemRenderProps<T>>
   }
 
 export function ActionCardListForm<T extends ActionCardItemBase>(
   props: ActionCardListFormProps<T>,
 ) {
-  const { required, rules, items, render, control, name, errorMessage } = props
-  const RenderItem = render as React.VFC<ActionCardItemRenderProps<ActionCardItemBase>>
+  const { required, rules, items, render, control, name, errorMessage, defaultValue, ...other } =
+    props
+  const RenderItem = render as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
 
   return (
     <Controller
       {...props}
       control={control}
       name={name}
-      rules={{ required, ...rules, validate: (v) => (v ? true : errorMessage) }}
+      defaultValue={defaultValue}
+      rules={{ required: errorMessage || required, ...rules }}
       render={({ field: { onChange, value, ref }, fieldState, formState }) => (
         <ActionCardList
-          required
+          {...other}
+          required={required}
           value={value}
           ref={ref}
           onChange={(_, incomming) => onChange(incomming)}

package/Button/Button.tsx

@@ -1,5 +1,9 @@
 /* eslint-disable react/forbid-foreign-prop-types */
-import { LoadingButton as Button, LoadingButtonProps } from '@mui/lab'
+import { LoadingButton as Button, LoadingButtonProps, LoadingButtonTypeMap } from '@mui/lab'
+
+export type ButtonProps<
+  D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],
+  P = {},
+> = LoadingButtonProps<D, P>
 
-export type ButtonProps = LoadingButtonProps
 export { Button }

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 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
+
+- [#1642](https://github.com/graphcommerce-org/graphcommerce/pull/1642) [`ad63ebf4e`](https://github.com/graphcommerce-org/graphcommerce/commit/ad63ebf4e33bfb0e5c9e5e68ab69b14775f3f8a8) Thanks [@paales](https://github.com/paales)! - Introduced `<AddProductsToCartForm/>`, which is allows for adding all product types to the cart with a single react-hook-form form.
+
+  Which allows you to fully compose the form on the product page without having to modify the page.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.39
+
 ## 4.26.0
 
 ### Minor Changes

package/FramerScroller/SidebarGallery.tsx

@@ -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/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}

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

@@ -42,6 +42,13 @@ export function RenderType<
 export function findByTypename<T extends TypeObject, Typename extends T['__typename']>(
   type: (T | undefined | null)[] | undefined | null,
   typename: Typename,
-): FilterTypeByTypename<T, Typename> {
+): FilterTypeByTypename<T, Typename> | undefined {
   return type?.find((item) => item?.__typename === typename) as FilterTypeByTypename<T, Typename>
 }
+
+export function isTypename<T extends TypeObject, Typenames extends T['__typename'][]>(
+  type: FilterTypeByTypename<T, T['__typename']>,
+  typename: Typenames,
+): type is FilterTypeByTypename<T, Typenames[number]> {
+  return typename.includes(type.__typename)
+}

package/RenderType/filterNonNullableKeys.ts

@@ -3,7 +3,7 @@ import type { OptionalKeysOf, Simplify } from 'type-fest'
 export function filterNonNullableKeys<
   T extends Record<string, unknown>,
   Keys extends OptionalKeysOf<T>,
->(items: (T | null | undefined)[] | null | undefined, values: Keys[]) {
+>(items: (T | null | undefined)[] | null | undefined, values: Keys[] = []) {
   if (!items) return []
 
   type ResultWithRequired = Simplify<

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/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.26.0",
+  "version": "4.28.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,8 +19,8 @@
     "@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.38",
+    "@graphcommerce/framer-next-pages": "3.3.1",
+    "@graphcommerce/framer-scroller": "2.1.40",
     "@graphcommerce/framer-utils": "3.2.0",
     "@graphcommerce/image": "3.1.9",
     "cookie": "^0.5.0",