@graphcommerce/next-ui 4.28.0 → 4.29.0

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,36 @@
 # Change Log
 
+## 4.29.0
+
+### Minor Changes
+
+- [#1679](https://github.com/graphcommerce-org/graphcommerce/pull/1679) [`0bd9ea582`](https://github.com/graphcommerce-org/graphcommerce/commit/0bd9ea58230dde79c5fe2cdb07e9860151460270) Thanks [@paales](https://github.com/paales)! - Added a new Fab component which adds a loading state
+
+### Patch Changes
+
+- [#1679](https://github.com/graphcommerce-org/graphcommerce/pull/1679) [`e76df6dc3`](https://github.com/graphcommerce-org/graphcommerce/commit/e76df6dc37c11c793a5d008ba36932d17dc23855) Thanks [@paales](https://github.com/paales)! - Added AddProductsToCartFab for a smaller add to cart button
+
+- Updated dependencies []:
+  - @graphcommerce/framer-scroller@2.1.42
+
+## 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

package/Fab/Fab.tsx

@@ -0,0 +1,57 @@
+import {
+  Box,
+  CircularProgress,
+  CircularProgressProps,
+  Fab as FabBase,
+  FabProps as FabPropsBase,
+} from '@mui/material'
+import { IconSvg, IconSvgProps } from '../IconSvg'
+import { useFabSize } from '../Theme/MuiFab'
+
+export type FabProps = Omit<FabPropsBase<'button'>, 'variant' | 'children'> & {
+  loading?: boolean
+  icon: IconSvgProps['src']
+  circularProgress?: Omit<CircularProgressProps, 'size'>
+}
+
+/** Adds loading functionality to the Fab component. */
+export function Fab(props: FabProps) {
+  const {
+    size = 'responsive',
+    disabled,
+    loading,
+    sx = [],
+    icon,
+    circularProgress,
+    ...fabProps
+  } = props
+
+  const fabSize = useFabSize(size)
+
+  const circSx = circularProgress?.sx ?? []
+
+  return (
+    <FabBase
+      type='submit'
+      color='primary'
+      size={size}
+      {...fabProps}
+      disabled={disabled}
+      sx={[{ display: 'grid' }, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      <Box sx={{ display: 'flex', placeContent: 'center', gridArea: '1/1' }}>
+        <IconSvg src={icon} size='medium' />
+      </Box>
+      {loading && (
+        <CircularProgress
+          size={fabSize}
+          {...circularProgress}
+          sx={[
+            { display: 'flex', placeContent: 'center', gridArea: '1/1' },
+            ...(Array.isArray(circSx) ? circSx : [circSx]),
+          ]}
+        />
+      )}
+    </FabBase>
+  )
+}

package/Fab/index.ts

@@ -0,0 +1 @@
+export * from './Fab'

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

@@ -116,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/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/ErrorSnackbar.tsx

@@ -1,9 +1,9 @@
 import { Trans } from '@lingui/react'
 import { Button } from '@mui/material'
 import { MessageSnackbar } from './MessageSnackbar'
-import { MessageSnackbarImplProps } from './MessageSnackbarImpl'
+import { MessageSnackbarProps } from './MessageSnackbarImpl'
 
-export type ErrorSnackbarProps = MessageSnackbarImplProps
+export type ErrorSnackbarProps = MessageSnackbarProps
 
 export function ErrorSnackbar(props: ErrorSnackbarProps) {
   const { action, ...passedProps } = props

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,4 +1,4 @@
-import { breakpointVal } from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
 import {
   Fab,
   Snackbar,
@@ -12,13 +12,13 @@ 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'
 type Variant = 'contained' | 'pill'
 
-export type MessageSnackbarImplProps = Omit<
+export type MessageSnackbarProps = Omit<
   SnackbarProps,
   'autoHideDuration' | 'anchorOrigin' | 'color'
 > & {
@@ -41,7 +41,7 @@ const parts = ['root', 'content', 'children', 'actionButton', 'close'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 // eslint-disable-next-line import/no-default-export
-export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
+export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
   const [showSnackbar, setShowSnackbar] = useState<boolean>(false)
 
   const {
@@ -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/icons/index.ts

@@ -1,42 +1,41 @@
-export { default as iconSearch } from './search.svg'
-export { default as iconPerson } from './person-alt.svg'
+export { default as iconArrowBack } from './arrow-left.svg'
+export { default as iconArrowForward } from './arrow-right.svg'
+export { default as iconShoppingBag } from './bag.svg'
+export { default as iconInvoice } from './box-alt.svg'
+export { default as iconBox } from './box.svg'
+export { default as iconOrderBefore } from './calendar.svg'
+export { default as iconCancelAlt } from './cancel-alt.svg'
+export { default as iconCartAdd } from './cart-add.svg'
+export { default as iconCart } from './cart.svg'
+export { default as iconChat } from './chat-alt.svg'
+export { default as iconCustomerService } from './chat.svg'
 export { default as iconChevronDown } from './chevron-down.svg'
-export { default as iconChevronLeft } from './chevron-left.svg'
+export { default as iconChevronBack, default as iconChevronLeft } from './chevron-left.svg'
 export { default as iconChevronRight } from './chevron-right.svg'
 export { default as iconChevronUp } from './chevron-up.svg'
-export { default as iconAddresses } from './home-alt.svg'
+export { default as iconClose } from './close.svg'
+export { default as iconId } from './credit-card.svg'
+export { default as iconEllypsis } from './ellypsis.svg'
+export { default as iconEmail, default as iconEmailOutline } from './envelope-alt.svg'
+export { default as icon404 } from './explore.svg'
 export { default as iconHeart } from './favourite.svg'
+export { default as iconMenu } from './hamburger.svg'
+export { default as iconParty } from './happy-face.svg'
+export { default as iconAddresses, default as iconHome } from './home-alt.svg'
 export { default as iconLocation } from './location.svg'
-export { default as iconInvoice } from './box-alt.svg'
-export { default as iconCustomerService } from './chat.svg'
-export { default as iconShoppingBag } from './bag.svg'
+export { default as iconLock } from './lock.svg'
+export { default as iconFullscreen } from './maximise.svg'
 export { default as iconFullscreenExit } from './minimise.svg'
-export { default as iconChat } from './chat-alt.svg'
-export { default as iconChevronBack } from './chevron-left.svg'
-export { default as iconCancelAlt } from './cancel-alt.svg'
-export { default as iconEmail } from './envelope-alt.svg'
-export { default as iconCheckmark } from './ok.svg'
-export { default as iconArrowBack } from './arrow-left.svg'
-export { default as iconArrowForward } from './arrow-right.svg'
-export { default as iconMenu } from './hamburger.svg'
 export { default as iconMin } from './minus.svg'
-export { default as iconPhone } from './smartphone.svg'
-export { default as iconPlus } from './plus.svg'
-export { default as iconClose } from './close.svg'
-export { default as iconFullscreen } from './maximise.svg'
-export { default as iconOrderBefore } from './calendar.svg'
-export { default as iconBox } from './box.svg'
-export { default as iconHome } from './home-alt.svg'
-export { default as iconId } from './credit-card.svg'
-export { default as iconLock } from './lock.svg'
+export { default as iconMoon } from './moon.svg'
 export { default as iconNewspaper } from './news.svg'
-export { default as iconSadFace } from './sad-face.svg'
+export { default as iconCheckmark } from './ok.svg'
+export { default as iconPerson } from './person-alt.svg'
+export { default as iconPlay } from './play.svg'
+export { default as iconPlus } from './plus.svg'
 export { default as iconShutdown } from './power.svg'
-export { default as iconParty } from './happy-face.svg'
+export { default as iconSadFace } from './sad-face.svg'
+export { default as iconSearch } from './search.svg'
+export { default as iconPhone } from './smartphone.svg'
 export { default as iconStar } from './star.svg'
-export { default as iconEmailOutline } from './envelope-alt.svg'
-export { default as icon404 } from './explore.svg'
 export { default as iconSun } from './sun.svg'
-export { default as iconMoon } from './moon.svg'
-export { default as iconPlay } from './play.svg'
-export { default as iconEllypsis } from './ellypsis.svg'

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'
@@ -12,6 +10,7 @@ export * from './Blog/BlogTitle/BlogTitle'
 export * from './Button'
 export * from './ChipMenu/ChipMenu'
 export * from './ContainerWithHeader/ContainerWithHeader'
+export * from './Fab'
 export * from './FlagAvatar/FlagAvatar'
 export * from './Footer'
 export * from './Form/Form'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.28.0",
+  "version": "4.29.0",
   "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.1",
-    "@graphcommerce/framer-scroller": "2.1.40",
-    "@graphcommerce/framer-utils": "3.2.0",
-    "@graphcommerce/image": "3.1.9",
+    "@graphcommerce/framer-next-pages": "3.3.2",
+    "@graphcommerce/framer-scroller": "2.1.42",
+    "@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"