@graphcommerce/next-ui 5.2.0-canary.0 → 5.2.0-canary.10

package/ActionCard/ActionCard.tsx

@@ -29,9 +29,9 @@ export type ActionCardProps = {
   price?: React.ReactNode
   after?: React.ReactNode
   secondaryAction?: React.ReactNode
-  onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number) => void
+  onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number | null) => void
   selected?: boolean
-  value: string | number
+  value: string | number | null
   reset?: React.ReactNode
   disabled?: boolean
   error?: boolean

package/ActionCard/ActionCardList.tsx

@@ -8,13 +8,13 @@ import { ActionCardLayout } from './ActionCardLayout'
 type MultiSelect = {
   multiple: true
   collapse?: false
-  value: (string | number)[]
+  value: (string | number | null)[]
 
   onChange?: (event: React.MouseEvent<HTMLElement>, value: MultiSelect['value']) => void
 }
 type Select = {
-  multiple?: false
-  value: string | number
+  multiple?: boolean
+  value: string | number | null
   collapse?: boolean
 
   /** Value is null when deselected when not required */
@@ -47,11 +47,10 @@ type HoistedActionCardProps = Pick<ActionCardProps, 'color' | 'variant' | 'size'
 
 const parts = ['root'] as const
 const name = 'ActionCardList'
-const { withState, selectors } = extendableComponent<
-  HoistedActionCardProps,
-  typeof name,
-  typeof parts
->(name, parts)
+const { withState } = extendableComponent<HoistedActionCardProps, typeof name, typeof parts>(
+  name,
+  parts,
+)
 
 export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListProps>(
   (props, ref) => {
@@ -73,8 +72,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
           const { onChange, value } = props
           const index = Boolean(value) && value?.indexOf(v)
           let newValue: typeof value
-
-          if (value.length && index && index >= 0) {
+          if (value?.length && index !== false && index >= 0) {
             newValue = value.slice()
             newValue.splice(index, 1)
           } else {
@@ -84,7 +82,6 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
         }
       : (event, v) => {
           const { onChange, value } = props
-
           if (value !== v) {
             if (required) onChange?.(event, v)
             else onChange?.(event, value === v ? null : v)
@@ -100,7 +97,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
       const hasValue = (el as ActionCardLike).props.value
 
       if (process.env.NODE_ENV !== 'production') {
-        if (!hasValue) console.error(el, `must be an instance of ActionCard`)
+        if (hasValue === undefined) console.error(el, `must be an instance of ActionCard`)
       }
       return (el as ActionCardLike).props.value !== undefined
     }
@@ -132,7 +129,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
     const classes = withState({ size, color, variant, layout })
 
     return (
-      <div>
+      <div ref={ref}>
         <ActionCardLayout sx={sx} className={classes.root} layout={layout}>
           {childReactNodes.map((child) => {
             if (collapse && Boolean(value) && !isValueSelected(child.props.value, value))

package/ActionCard/ActionCardListForm.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { Controller, ControllerProps } from '@graphcommerce/react-hook-form'
+import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import React, { MouseEventHandler } from 'react'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardList, ActionCardListProps } from './ActionCardList'
@@ -10,22 +10,39 @@ export type ActionCardItemRenderProps<T> = ActionCardProps & {
   onReset: MouseEventHandler<HTMLAnchorElement> & MouseEventHandler<HTMLSpanElement>
 } & T
 
-export type ActionCardListFormProps<T extends ActionCardItemBase> = Omit<
+export type ActionCardListFormProps<A, F extends FieldValues = FieldValues> = Omit<
   ActionCardListProps,
-  'value' | 'error' | 'onChange' | 'children' | 'multiple'
+  'value' | 'error' | 'onChange' | 'children'
 > &
-  Omit<ControllerProps<any>, 'render' | 'shouldUnregister'> & {
-    items: T[]
-    render: React.FC<ActionCardItemRenderProps<T>>
+  Omit<ControllerProps<F>, 'render'> & {
+    items: A[]
+    render: React.FC<ActionCardItemRenderProps<A>>
   }
 
-export function ActionCardListForm<T extends ActionCardItemBase>(
-  props: ActionCardListFormProps<T>,
-) {
-  const { required, rules, items, render, control, name, errorMessage, defaultValue, ...other } =
-    props
+export function ActionCardListForm<
+  T extends ActionCardItemBase,
+  F extends FieldValues = FieldValues,
+>(props: ActionCardListFormProps<T, F>) {
+  const {
+    required,
+    rules,
+    items,
+    render,
+    control,
+    name,
+    errorMessage,
+    defaultValue,
+    multiple,
+    ...other
+  } = props
   const RenderItem = render as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
 
+  function onSelect(itemValue: unknown, selectValues: unknown) {
+    return multiple
+      ? Array.isArray(selectValues) && selectValues.some((selectValue) => selectValue === itemValue)
+      : selectValues === itemValue
+  }
+
   return (
     <Controller
       {...props}
@@ -36,6 +53,7 @@ export function ActionCardListForm<T extends ActionCardItemBase>(
       render={({ field: { onChange, value, ref }, fieldState, formState }) => (
         <ActionCardList
           {...other}
+          multiple={multiple}
           required={required}
           value={value}
           ref={ref}
@@ -46,9 +64,9 @@ export function ActionCardListForm<T extends ActionCardItemBase>(
           {items.map((item) => (
             <RenderItem
               {...item}
-              key={item.value}
+              key={item.value ?? 'tralala'}
               value={item.value}
-              selected={value === item.value}
+              selected={onSelect(item.value, value)}
               onReset={(e) => {
                 e.preventDefault()
                 onChange(null)

package/Blog/BlogListItem/BlogListItem.tsx

@@ -1,5 +1,4 @@
 import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
-import PageLink from 'next/link'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
@@ -38,37 +37,35 @@ export function BlogListItem(props: BlogListItemProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <PageLink href={`/${url}`} passHref>
-        <Link color='inherit' underline='hover'>
-          <Box
-            className={classes.asset}
-            sx={(theme) => ({
-              display: 'grid',
-              alignContent: 'center',
-              overflow: 'hidden',
-              height: '100%',
-              width: '100%',
-              ...breakpointVal(
-                'borderRadius',
-                theme.shape.borderRadius * 2,
-                theme.shape.borderRadius * 3,
-                theme.breakpoints.values,
-              ),
-              '& img': {
-                height: '100% !important',
-                objectFit: 'cover',
-              },
-              '& p': {
-                alignSelf: 'center',
-                justifySelf: 'center',
-              },
-              background: theme.palette.background.paper,
-            })}
-          >
-            {asset}
-          </Box>
-        </Link>
-      </PageLink>
+      <Link href={`/${url}`} color='inherit' underline='hover'>
+        <Box
+          className={classes.asset}
+          sx={(theme) => ({
+            display: 'grid',
+            alignContent: 'center',
+            overflow: 'hidden',
+            height: '100%',
+            width: '100%',
+            ...breakpointVal(
+              'borderRadius',
+              theme.shape.borderRadius * 2,
+              theme.shape.borderRadius * 3,
+              theme.breakpoints.values,
+            ),
+            '& img': {
+              height: '100% !important',
+              objectFit: 'cover',
+            },
+            '& p': {
+              alignSelf: 'center',
+              justifySelf: 'center',
+            },
+            background: theme.palette.background.paper,
+          })}
+        >
+          {asset}
+        </Box>
+      </Link>
 
       <Box
         component='time'
@@ -83,13 +80,11 @@ export function BlogListItem(props: BlogListItemProps) {
         {formatter.format(new Date(date))}
       </Box>
 
-      <PageLink href={`/${url}`} passHref>
-        <Link href={`/${url}`} className={classes.title} color='inherit' underline='hover'>
-          <Typography component='h2' variant='h4'>
-            {title}
-          </Typography>
-        </Link>
-      </PageLink>
+      <Link href={`/${url}`} className={classes.title} color='inherit' underline='hover'>
+        <Typography component='h2' variant='h4'>
+          {title}
+        </Typography>
+      </Link>
     </Box>
   )
 }

package/Blog/BlogTags/BlogTag.tsx

@@ -1,5 +1,5 @@
 import { Chip, SxProps, Theme } from '@mui/material'
-import PageLink from 'next/link'
+import { NextLink } from '../../Theme'
 
 type BlogTagsProps = {
   url: string
@@ -10,17 +10,11 @@ type BlogTagsProps = {
 export function BlogTag(props: BlogTagsProps) {
   const { url, title, sx = [] } = props
   return (
-    <PageLink href={`/${url}`} passHref>
-      <Chip
-        label={title}
-        sx={[
-          {
-            marginRight: 3,
-            borderRadius: 2,
-          },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
-      />
-    </PageLink>
+    <Chip
+      href={`/${url}`}
+      component={NextLink}
+      label={title}
+      sx={[{ marginRight: 3, borderRadius: 2 }, ...(Array.isArray(sx) ? sx : [sx])]}
+    />
   )
 }

package/Button/LinkOrButton.tsx

@@ -1,4 +1,4 @@
-import { Link, LinkProps, useForkRef } from '@mui/material'
+import { Breakpoint, Link, LinkProps, useForkRef } from '@mui/material'
 import React, { useRef } from 'react'
 import type { ConditionalExcept } from 'type-fest'
 import { Button, ButtonProps } from './Button'
@@ -13,7 +13,7 @@ type SharedProperties<A, B> = OmitNever<
 export type LinkOrButtonProps = {
   button?: ButtonProps
   link?: LinkProps
-  breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  breakpoint?: Breakpoint
   disabled?: boolean
 } & SharedProperties<
   Omit<ButtonProps, 'sx'>,

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # Change Log
 
+## 5.2.0-canary.10
+
+### Minor Changes
+
+- [#1793](https://github.com/graphcommerce-org/graphcommerce/pull/1793) [`5562fa69b`](https://github.com/graphcommerce-org/graphcommerce/commit/5562fa69b1bc260f68555dcfaf30153eda489bed) - Add newsletter subscribe form ([@ErwinOtten](https://github.com/ErwinOtten))
+
+## 5.2.0-canary.9
+
+### Patch Changes
+
+- [`b0b8348b0`](https://github.com/graphcommerce-org/graphcommerce/commit/b0b8348b0d294f98140c2605691d47011add5b01) - Fix ellipsis for long titles on mobile ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 5.2.0-canary.8
+
+## 5.2.0-canary.7
+
+### Minor Changes
+
+- [#1749](https://github.com/graphcommerce-org/graphcommerce/pull/1749) [`0cc472915`](https://github.com/graphcommerce-org/graphcommerce/commit/0cc4729154d316227a41712b5f0adf514768e91f) - Added new filter UI and behaviour. Filters will appear as a popper on the md and up breakpoints and as an overlay on sm and below breakpoints. Filters now have an Apply button instead of applying directly. ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#1749](https://github.com/graphcommerce-org/graphcommerce/pull/1749) [`16e91da42`](https://github.com/graphcommerce-org/graphcommerce/commit/16e91da42dcb454ea4761d1780b9338c88ef1463) - Fix spelling error incomming to incoming ([@paales](https://github.com/paales))
+
+## 5.2.0-canary.6
+
+## 5.2.0-canary.5
+
+### Patch Changes
+
+- [#1776](https://github.com/graphcommerce-org/graphcommerce/pull/1776) [`09f7312ae`](https://github.com/graphcommerce-org/graphcommerce/commit/09f7312ae44fae531947f9ce64711b7ac5983fc1) - add media query guard to category menu behaviour. ([@FrankHarland](https://github.com/FrankHarland))
+
+## 5.2.0-canary.4
+
+## 5.2.0-canary.3
+
+## 5.2.0-canary.2
+
+### Patch Changes
+
+- [#1771](https://github.com/graphcommerce-org/graphcommerce/pull/1771) [`aec07f567`](https://github.com/graphcommerce-org/graphcommerce/commit/aec07f5679472281b8eb71cf6967a1ff775d2a7f) - Navigation shouldn't become visible when resizing the viewport ([@paales](https://github.com/paales))
+
+- [#1771](https://github.com/graphcommerce-org/graphcommerce/pull/1771) [`55d267ba0`](https://github.com/graphcommerce-org/graphcommerce/commit/55d267ba039f64af2b0248c68a1e1478970c9b31) - Solve issue where overlays would close durting opening when they got rerendered. ([@paales](https://github.com/paales))
+
+## 5.2.0-canary.1
+
 ## 5.2.0-canary.0
 
 ## 5.1.1

package/Layout/components/LayoutHeader.tsx

@@ -34,6 +34,7 @@ type ComponentStyleProps = {
   children: boolean
   floatingSm: boolean
   floatingMd: boolean
+  size: 'small' | 'responsive'
 }
 
 const { selectors, withState } = extendableComponent<ComponentStyleProps, 'LayoutHeader'>(
@@ -42,7 +43,16 @@ const { selectors, withState } = extendableComponent<ComponentStyleProps, 'Layou
 )
 
 export function LayoutHeader(props: LayoutHeaderProps) {
-  const { children, divider, primary, secondary, noAlign = false, switchPoint, sx = [] } = props
+  const {
+    children,
+    divider,
+    primary,
+    secondary,
+    noAlign = false,
+    switchPoint,
+    size = 'responsive',
+    sx = [],
+  } = props
   const showBack = useShowBack()
   const showClose = useShowClose()
 
@@ -73,6 +83,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
     noAlign,
     children: !!children,
     divider: !!divider,
+    size,
   })
 
   return (
@@ -118,6 +129,9 @@ export function LayoutHeader(props: LayoutHeaderProps) {
               marginTop: 0,
               height: theme.appShell.appBarHeightMd,
               marginBottom: `calc(${theme.appShell.appBarHeightMd} * -1)`,
+              '&.sizeSmall': {
+                height: theme.appShell.headerHeightSm,
+              },
             },
             '&.divider': {
               marginBottom: 0,
@@ -128,6 +142,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
       ]}
     >
       <LayoutHeaderContent
+        size={size}
         left={left}
         right={right}
         divider={divider}

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,7 +1,6 @@
 import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
 import { i18n } from '@lingui/core'
 import { Box, SxProps, Theme } from '@mui/material'
-import PageLink from 'next/link'
 import { useRouter } from 'next/router'
 import { LinkOrButton, LinkOrButtonProps } from '../../Button/LinkOrButton'
 import { IconSvg } from '../../IconSvg'
@@ -69,19 +68,18 @@ export function LayoutHeaderBack(props: BackProps) {
 
   if (up?.href && up.href !== path)
     return (
-      <PageLink href={up.href} passHref>
-        <LinkOrButton
-          button={{ variant: 'pill', sx: buttonSx }}
-          startIcon={backIcon}
-          aria-label={up.title}
-          color='inherit'
-          {...props}
-        >
-          <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
-            {up.title}
-          </Box>
-        </LinkOrButton>
-      </PageLink>
+      <LinkOrButton
+        href={up.href}
+        button={{ variant: 'pill', sx: buttonSx }}
+        startIcon={backIcon}
+        aria-label={up.title}
+        color='inherit'
+        {...props}
+      >
+        <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
+          {up.title}
+        </Box>
+      </LinkOrButton>
     )
 
   return null

package/Layout/components/LayoutHeaderContent.tsx

@@ -17,9 +17,16 @@ export type LayoutHeaderContentProps = FloatingProps & {
   sx?: SxProps<Theme>
   sxBg?: SxProps<Theme>
   layout?: LayoutProps['layout']
+  size?: 'small' | 'responsive'
 }
 
-type OwnerState = { floatingSm: boolean; floatingMd: boolean; scrolled: boolean; divider: boolean }
+type OwnerState = {
+  floatingSm: boolean
+  floatingMd: boolean
+  scrolled: boolean
+  divider: boolean
+  size: 'small' | 'responsive'
+}
 const name = 'LayoutHeaderContent' as const
 const parts = ['bg', 'content', 'left', 'center', 'right', 'divider'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
@@ -38,17 +45,13 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
     sx = [],
     sxBg = [],
     layout,
+    size = 'responsive',
   } = props
 
   const scroll = useScrollY()
   const scrolled = useMotionValueValue(scroll, (y) => y >= switchPoint)
 
-  const classes = withState({
-    floatingSm,
-    floatingMd,
-    scrolled,
-    divider: !!divider,
-  })
+  const classes = withState({ floatingSm, floatingMd, scrolled, divider: !!divider, size })
 
   return (
     <>
@@ -66,6 +69,9 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             [theme.breakpoints.up('md')]: {
               height: theme.appShell.appBarHeightMd,
             },
+            '&.sizeSmall': {
+              height: theme.appShell.headerHeightSm,
+            },
             borderTopLeftRadius: theme.shape.borderRadius * 3,
             borderTopRightRadius: theme.shape.borderRadius * 3,
 
@@ -105,25 +111,31 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             gridTemplateAreas: `"left center right"`,
             gridTemplateColumns: '1fr auto 1fr',
             alignItems: 'center',
-            // columnGap: theme.spacings.xs,
+            gap: theme.page.horizontal,
 
             height: theme.appShell.headerHeightSm,
-            padding: `0 ${theme.page.horizontal}`,
-
+            px: theme.page.horizontal,
             [theme.breakpoints.up('md')]: {
               height: theme.appShell.appBarHeightMd,
             },
+            '&.sizeSmall': {
+              height: theme.appShell.headerHeightSm,
+              px: 2,
+              [theme.breakpoints.up('md')]: {
+                px: 2,
+              },
+            },
 
             '&.floatingSm': {
               [theme.breakpoints.down('md')]: {
-                padding: `0 ${theme.page.horizontal}`,
+                px: theme.page.horizontal,
                 background: 'none',
                 pointerEvents: 'none',
               },
             },
             '&.floatingMd': {
               [theme.breakpoints.up('md')]: {
-                padding: `0 ${theme.page.horizontal}`,
+                px: theme.page.horizontal,
                 background: 'none',
                 pointerEvents: 'none',
               },
@@ -180,7 +192,12 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             },
           })}
         >
-          <MotionDiv layout={layout}>{children}</MotionDiv>
+          <MotionDiv
+            sx={{ minWidth: 0 }}
+            layout={layout}
+          >
+            {children}
+          </MotionDiv>
         </Box>
         <Box
           className={classes.right}

package/Layout/components/LayoutProvider.tsx

@@ -1,14 +1,13 @@
-import { MotionValue } from 'framer-motion'
 import { useMemo } from 'react'
 import { layoutContext } from '../context/layoutContext'
+import { LayoutContext } from '../types'
 
 export type LayoutProviderProps = {
   children: React.ReactNode
-  scroll: MotionValue<number>
-}
+} & LayoutContext
 
 export function LayoutProvider(props: LayoutProviderProps) {
-  const { children, scroll } = props
+  const { children, scroll: scroll } = props
 
   return (
     <layoutContext.Provider value={useMemo(() => ({ scroll }), [scroll])}>

package/Layout/context/layoutContext.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
 import { LayoutContext } from '../types'
 
-export const layoutContext = React.createContext(undefined as unknown as LayoutContext)
+export const layoutContext = React.createContext<null | LayoutContext>(null)
 layoutContext.displayName = 'layoutContext'

package/Layout/hooks/useScrollY.tsx

@@ -2,5 +2,10 @@ import { useContext } from 'react'
 import { layoutContext } from '../context/layoutContext'
 
 export function useScrollY() {
-  return useContext(layoutContext).scroll
+  const context = useContext(layoutContext)
+
+  if (!context) {
+    throw new Error('useScrollY must be used within a LayoutProvider')
+  }
+  return context.scroll
 }

package/LayoutDefault/components/LayoutDefault.tsx

@@ -40,8 +40,9 @@ export function LayoutDefault(props: LayoutDefaultProps) {
     sx = [],
   } = props
 
-  const scrollWithOffset = useTransform(
-    [useScroll().scrollY, useScrollOffset()],
+  const { scrollY } = useScroll()
+  const scrollYOffset = useTransform(
+    [scrollY, useScrollOffset()],
     ([y, offset]: number[]) => y + offset,
   )
 
@@ -66,7 +67,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <LayoutProvider scroll={scrollWithOffset}>
+      <LayoutProvider scroll={scrollYOffset}>
         {beforeHeader}
         <Box
           component='header'

package/LayoutOverlay/components/LayoutOverlay.tsx

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