@graphcommerce/next-ui 6.2.0-canary.7 → 6.2.0-canary.70

package/ActionCard/ActionCard.tsx

@@ -122,7 +122,6 @@ export function ActionCard(props: ActionCardProps) {
             theme.shape.borderRadius * 3,
             theme.breakpoints.values,
           ),
-
           '&.sizeSmall': {
             px: responsiveVal(8, 12),
             py: responsiveVal(4, 6),
@@ -144,12 +143,12 @@ export function ActionCard(props: ActionCardProps) {
           '&.variantDefault': {
             '&::after': {
               content: '""',
-              display: 'block',
               position: 'absolute',
               width: '100%',
               left: 0,
               bottom: '-1px',
               borderBottom: `1px solid ${theme.palette.divider}`,
+              display: 'block',
             },
             '&.selected': {
               backgroundColor:
@@ -193,7 +192,6 @@ export function ActionCard(props: ActionCardProps) {
             '&:not(:last-of-type)': {
               marginBottom: '-1px',
             },
-
             '&.layoutList': {
               borderRadius: 0,
               '&:first-of-type': {
@@ -299,7 +297,8 @@ export function ActionCard(props: ActionCardProps) {
               <Box
                 className={classes.title}
                 sx={{
-                  typography: 'subtitle2',
+                  '&.sizeSmall': { typography: 'body2' },
+                  '&.sizeMedium': { typography: 'body1' },
                   '&.sizeLarge': { typography: 'h6' },
                 }}
               >

package/ActionCard/ActionCardAccordion.tsx

@@ -0,0 +1,58 @@
+import { Accordion, AccordionSummary, AccordionDetails, SxProps, Theme } from '@mui/material'
+import { useState, ReactNode } from 'react'
+import { IconSvg } from '../IconSvg'
+import { iconChevronDown } from '../icons'
+
+export type ActionCardAccordionProps = {
+  summary: ReactNode
+  details: ReactNode
+  right: ReactNode
+  sx?: SxProps<Theme>
+  defaultExpanded?: boolean
+}
+
+export function ActionCardAccordion(props: ActionCardAccordionProps) {
+  const { summary, details, right, defaultExpanded = true, sx } = props
+  const [expanded, setExpanded] = useState(defaultExpanded)
+  const handleChange = () => setExpanded(!expanded)
+
+  return (
+    <Accordion
+      square
+      onChange={handleChange}
+      expanded={expanded}
+      variant='outlined'
+      disableGutters
+      sx={[
+        (theme) => ({
+          backgroundColor: 'transparent ',
+          '&.Mui-expanded': { my: 0 },
+          '::before': { display: 'none' },
+          border: 'none',
+          '&:not(.Mui-expanded)': { borderBottom: `1px solid ${theme.palette.divider}` },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <AccordionSummary
+        onClick={(e) => e.preventDefault()}
+        expandIcon={<IconSvg src={iconChevronDown} />}
+        sx={{
+          px: 0,
+          typography: 'h6',
+          minHeight: 54,
+          '& .MuiAccordionSummary-content': {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            my: 0,
+          },
+        }}
+      >
+        <div>{summary}</div>
+        {right}
+      </AccordionSummary>
+      <AccordionDetails sx={{ p: 0 }}>{details}</AccordionDetails>
+    </Accordion>
+  )
+}

package/ActionCard/ActionCardList.tsx

@@ -1,7 +1,11 @@
-import { Alert, Box, SxProps, Theme } from '@mui/material'
+import { Trans } from '@lingui/react'
+import { Alert, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { isFragment } from 'react-is'
+import { Button } from '../Button'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
+import { iconChevronDown } from '../icons'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardLayout } from './ActionCardLayout'
 
@@ -22,6 +26,7 @@ type Select = {
 }
 
 export type ActionCardListProps<SelectOrMulti = MultiSelect | Select> = {
+  showMoreAfter?: number
   children?: React.ReactNode
   required?: boolean
   error?: boolean
@@ -57,6 +62,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
     const {
       children,
       required,
+      showMoreAfter = 1000000,
       error = false,
       errorMessage,
       size = 'medium',
@@ -67,6 +73,8 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
       sx = [],
     } = props
 
+    const [show, setShow] = React.useState(false)
+
     const handleChange: ActionCardProps['onClick'] = isMulti(props)
       ? (event, v) => {
           const { onChange, value } = props
@@ -103,7 +111,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
     }
 
     // Make sure the children are cardlike
-    const childReactNodes = React.Children.toArray(children)
+    const childActionCards = React.Children.toArray(children)
       .filter(React.isValidElement)
       .filter(isActionCardLike)
       .filter((child) => {
@@ -121,7 +129,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
       })
 
     // Make sure the selected values is in the list of all possible values
-    const value = childReactNodes.find(
+    const value = childActionCards.find(
       // eslint-disable-next-line react/destructuring-assignment
       (child) => child.props.value === props.value && child.props.disabled !== true,
     )?.props.value
@@ -131,9 +139,10 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
     return (
       <div ref={ref}>
         <ActionCardLayout sx={sx} className={classes.root} layout={layout}>
-          {childReactNodes.map((child) => {
+          {childActionCards.map((child, index) => {
             if (collapse && Boolean(value) && !isValueSelected(child.props.value, value))
               return null
+            if (index && showMoreAfter && index + 1 > showMoreAfter && !show) return null
             return React.cloneElement(child, {
               onClick: handleChange,
               error,
@@ -149,6 +158,25 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
             })
           })}
         </ActionCardLayout>
+
+        {childActionCards.length > showMoreAfter && (
+          <Button
+            sx={{ width: 'fit-content' }}
+            color='primary'
+            variant='text'
+            onClick={() => setShow(!show)}
+          >
+            {!show ? <Trans id='More options' /> : <Trans id='Less options' />}{' '}
+            <IconSvg
+              sx={{
+                transform: show ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.3s ease-in-out',
+              }}
+              src={iconChevronDown}
+            />
+          </Button>
+        )}
+
         {error && errorMessage && (
           <Alert
             severity='error'

package/ActionCard/ActionCardListForm.tsx

@@ -64,7 +64,7 @@ export function ActionCardListForm<
           {items.map((item) => (
             <RenderItem
               {...item}
-              key={item.value ?? 'tralala'}
+              key={item.value ?? ''}
               value={item.value}
               selected={onSelect(item.value, value)}
               onReset={(e) => {

package/ActionCard/index.ts

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

package/Blog/BlogListItem/BlogListItem.tsx

@@ -8,7 +8,7 @@ import { useDateTimeFormat } from '../../hooks'
 export type BlogListItemProps = {
   asset: React.ReactNode
   url: string
-  date: string
+  date: string | undefined
   title: string
   sx?: SxProps<Theme>
 }
@@ -57,18 +57,20 @@ export function BlogListItem(props: BlogListItemProps) {
         </Box>
       </Link>
 
-      <Box
-        component='time'
-        className={classes.date}
-        dateTime={date}
-        sx={(theme) => ({
-          display: 'inline-block',
-          textDecoration: 'none',
-          color: theme.palette.text.secondary,
-        })}
-      >
-        {formatter.format(new Date(date))}
-      </Box>
+      {date && (
+        <Box
+          component='time'
+          className={classes.date}
+          dateTime={date}
+          sx={(theme) => ({
+            display: 'inline-block',
+            textDecoration: 'none',
+            color: theme.palette.text.secondary,
+          })}
+        >
+          {formatter.format(new Date(date))}
+        </Box>
+      )}
 
       <Link href={`/${url}`} className={classes.title} color='inherit' underline='hover'>
         <Typography component='h2' variant='h4'>

package/CHANGELOG.md

@@ -1,5 +1,175 @@
 # Change Log
 
+## 6.2.0-canary.70
+
+## 6.2.0-canary.69
+
+## 6.2.0-canary.68
+
+## 6.2.0-canary.67
+
+## 6.2.0-canary.66
+
+## 6.2.0-canary.65
+
+## 6.2.0-canary.64
+
+### Patch Changes
+
+- [#1998](https://github.com/graphcommerce-org/graphcommerce/pull/1998) [`fdbdcb76f`](https://github.com/graphcommerce-org/graphcommerce/commit/fdbdcb76f918cf74b22253bd641a04c490ceb140) - Fixed users accidentally being able to scroll overlays out of view during open animation ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 6.2.0-canary.63
+
+## 6.2.0-canary.62
+
+## 6.2.0-canary.61
+
+## 6.2.0-canary.60
+
+## 6.2.0-canary.59
+
+## 6.2.0-canary.58
+
+## 6.2.0-canary.57
+
+## 6.2.0-canary.56
+
+## 6.2.0-canary.55
+
+## 6.2.0-canary.54
+
+## 6.2.0-canary.53
+
+## 6.2.0-canary.52
+
+## 6.2.0-canary.51
+
+## 6.2.0-canary.50
+
+### Minor Changes
+
+- [`e55d8c390`](https://github.com/graphcommerce-org/graphcommerce/commit/e55d8c390d90b4bb7bab11c6a99027ac72bd7e3e) - Created a new sidebar layout system, can be configured with productFiltersLayout in the graphcommerce.config.js ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.49
+
+## 6.2.0-canary.48
+
+### Minor Changes
+
+- [#1961](https://github.com/graphcommerce-org/graphcommerce/pull/1961) [`4a759c662`](https://github.com/graphcommerce-org/graphcommerce/commit/4a759c66215eaa69edc342b898e05e8f92c3ba9a) - Add Open Graph meta tags to all pages ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 6.2.0-canary.47
+
+## 6.2.0-canary.46
+
+## 6.2.0-canary.45
+
+## 6.2.0-canary.44
+
+## 6.2.0-canary.43
+
+### Patch Changes
+
+- [#1965](https://github.com/graphcommerce-org/graphcommerce/pull/1965) [`44b2911d7`](https://github.com/graphcommerce-org/graphcommerce/commit/44b2911d73fb6c6c7188f16d5890ca93877e9aa7) - Added prop to LayoutHeader to be able to hide the back button ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+### Patch Changes
+
+- [#1960](https://github.com/graphcommerce-org/graphcommerce/pull/1960) [`f78caf5a8`](https://github.com/graphcommerce-org/graphcommerce/commit/f78caf5a83683f1ae4b901fb94bd22d50943fa2f) - Updated packages @apollo/client, react-hook-form, @emotion/\*, @lingui/\*, @mui/\* and various others. ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.40
+
+## 6.2.0-canary.39
+
+## 6.2.0-canary.38
+
+### Patch Changes
+
+- [#1958](https://github.com/graphcommerce-org/graphcommerce/pull/1958) [`0a311b6eb`](https://github.com/graphcommerce-org/graphcommerce/commit/0a311b6ebb5a52e2a7f1d2e6a0fe113904fa2d34) - Left overlays wouldn't properly snap when the overlay gets wider than the viewport ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.37
+
+## 6.2.0-canary.36
+
+## 6.2.0-canary.35
+
+## 6.2.0-canary.34
+
+## 6.2.0-canary.33
+
+## 6.2.0-canary.32
+
+## 6.2.0-canary.31
+
+## 6.2.0-canary.30
+
+## 6.2.0-canary.29
+
+### Patch Changes
+
+- [#1946](https://github.com/graphcommerce-org/graphcommerce/pull/1946) [`87260618b`](https://github.com/graphcommerce-org/graphcommerce/commit/87260618b8abaebd727ff4435abb1aea6ed33730) - Firefox: scroll snap overlays would snap to 0 when the scroll snap targets wouldn’t exactly match the possible targets. ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.28
+
+## 6.2.0-canary.27
+
+## 6.2.0-canary.26
+
+## 6.2.0-canary.25
+
+## 6.2.0-canary.24
+
+## 6.2.0-canary.23
+
+## 6.2.0-canary.22
+
+### Patch Changes
+
+- [#1939](https://github.com/graphcommerce-org/graphcommerce/pull/1939) [`0cdccf681`](https://github.com/graphcommerce-org/graphcommerce/commit/0cdccf6817d6a769f59cccb68b1b1b8b4405cbd0) - Make blogListItem date prop optional ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 6.2.0-canary.21
+
+## 6.2.0-canary.20
+
+## 6.2.0-canary.19
+
+## 6.2.0-canary.18
+
+## 6.2.0-canary.17
+
+### Patch Changes
+
+- [#1934](https://github.com/graphcommerce-org/graphcommerce/pull/1934) [`96ac0320a`](https://github.com/graphcommerce-org/graphcommerce/commit/96ac0320a30bc55a6db5d46663d28b552fda4db6) - Fixed floating overlays not closing when clicking beside the overlay ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 6.2.0-canary.16
+
+### Patch Changes
+
+- [#1930](https://github.com/graphcommerce-org/graphcommerce/pull/1930) [`c8d023e9e`](https://github.com/graphcommerce-org/graphcommerce/commit/c8d023e9e874131cd9f8fe192b1fca5fe1a26ee3) - Fix the close menu on search and add the option to secondary menu items ([@StefanAngenent](https://github.com/StefanAngenent))
+
+## 6.2.0-canary.15
+
+## 6.2.0-canary.14
+
+## 6.2.0-canary.13
+
+## 6.2.0-canary.12
+
+## 6.2.0-canary.11
+
+## 6.2.0-canary.10
+
+## 6.2.0-canary.9
+
+### Patch Changes
+
+- [#1897](https://github.com/graphcommerce-org/graphcommerce/pull/1897) [`f44d7cec6`](https://github.com/graphcommerce-org/graphcommerce/commit/f44d7cec61766f4768c30d29b211a12f2846e9f6) - Overlays can now be configured to get a bgColor ([@FrankHarland](https://github.com/FrankHarland))
+
+## 6.2.0-canary.8
+
 ## 6.2.0-canary.7
 
 ## 6.2.0-canary.6

package/Fab/Fab.tsx

@@ -23,6 +23,7 @@ export function Fab(props: FabProps) {
     sx = [],
     icon,
     circularProgress,
+    color = 'default',
     ...fabProps
   } = props
 
@@ -33,7 +34,7 @@ export function Fab(props: FabProps) {
   return (
     <FabBase
       type='submit'
-      color='primary'
+      color={color}
       size={size}
       {...fabProps}
       disabled={disabled}
@@ -45,6 +46,7 @@ export function Fab(props: FabProps) {
       {loading && (
         <CircularProgress
           size={fabSize}
+          color={color !== 'primary' ? 'primary' : 'inherit'}
           {...circularProgress}
           sx={[
             { display: 'flex', placeContent: 'center', gridArea: '1/1' },

package/FramerScroller/SidebarGallery.tsx

@@ -48,6 +48,7 @@ export type SidebarGalleryProps = {
   aspectRatio?: [number, number]
   routeHash?: string
   sx?: SxProps<Theme>
+  disableZoom?: boolean
 }
 
 export function SidebarGallery(props: SidebarGalleryProps) {
@@ -57,6 +58,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     aspectRatio: [width, height] = [1, 1],
     sx,
     routeHash = 'gallery',
+    disableZoom,
   } = props
 
   const router = useRouter()
@@ -76,6 +78,9 @@ export function SidebarGallery(props: SidebarGalleryProps) {
   }, [prevRoute?.pathname, route, router, zoomed])
 
   const toggle = () => {
+    if (disableZoom) {
+      return
+    }
     if (!zoomed) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       router.push(route, undefined, { shallow: true })
@@ -192,7 +197,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   height: '100%',
                   gridAutoColumns: `100%`,
                   gridTemplateRows: `100%`,
-                  cursor: 'zoom-in',
+                  cursor: disableZoom ? 'auto' : 'zoom-in',
                 },
                 zoomed && {
                   height: `var(--client-size-y)`,
@@ -232,16 +237,22 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 right: theme.spacings.sm,
               }}
             >
-              <Fab
-                size='small'
-                className={classes.toggleIcon}
-                disabled={!hasImages}
-                onMouseUp={toggle}
-                aria-label='Toggle Fullscreen'
-                sx={{ boxShadow: 6 }}
-              >
-                {!zoomed ? <IconSvg src={iconFullscreen} /> : <IconSvg src={iconFullscreenExit} />}
-              </Fab>
+              {!disableZoom && (
+                <Fab
+                  size='small'
+                  className={classes.toggleIcon}
+                  disabled={!hasImages}
+                  onMouseUp={toggle}
+                  aria-label='Toggle Fullscreen'
+                  sx={{ boxShadow: 6 }}
+                >
+                  {!zoomed ? (
+                    <IconSvg src={iconFullscreen} />
+                  ) : (
+                    <IconSvg src={iconFullscreenExit} />
+                  )}
+                </Fab>
+              )}
             </MotionBox>
             <Box
               className={classes.centerLeft}

package/IconSvg/IconSvg.tsx

@@ -53,42 +53,40 @@ export function useIconSvgSize(size: keyof typeof sizes) {
   return sizes[size]
 }
 
-const Svg = styled('svg', { name, target: name })(() => [
-  {
-    userSelect: 'none',
-    width: '1em',
-    height: '1em',
-    display: 'inline-block',
-
-    strokeLinecap: 'square',
-    strokeLinejoin: 'miter',
-    strokeMiterlimit: 4,
-
-    fill: 'none',
-    stroke: 'currentColor',
-
-    fontSize: '1.3em',
-
-    strokeWidth: svgIconStrokeWidth(28, 148, 1.4, 0.8),
-
-    '&.sizeXs': { fontSize: sizes.xs },
-    '&.sizeSmall': { fontSize: sizes.small },
-    '&.sizeMedium': { fontSize: sizes.medium },
-    '&.sizeLarge': { fontSize: sizes.large },
-    '&.sizeXl': { fontSize: sizes.xl },
-    '&.sizeXxl': { fontSize: sizes.xxl },
-
-    '&.fillIcon': {
-      fill: 'currentColor',
-      stroke: 'none',
-    },
+const Svg = styled('svg', { name, target: name })(() => ({
+  userSelect: 'none',
+  width: '1em',
+  height: '1em',
+  display: 'inline-block',
+
+  strokeLinecap: 'square',
+  strokeLinejoin: 'miter',
+  strokeMiterlimit: 4,
+
+  fill: 'none',
+  stroke: 'currentColor',
+
+  fontSize: '1.3em',
+
+  strokeWidth: svgIconStrokeWidth(28, 148, 1.4, 0.8),
+
+  '&.sizeXs': { fontSize: sizes.xs },
+  '&.sizeSmall': { fontSize: sizes.small },
+  '&.sizeMedium': { fontSize: sizes.medium },
+  '&.sizeLarge': { fontSize: sizes.large },
+  '&.sizeXl': { fontSize: sizes.xl },
+  '&.sizeXxl': { fontSize: sizes.xxl },
+
+  '&.fillIcon': {
+    fill: 'currentColor',
+    stroke: 'none',
   },
-])
+}))
 
 /**
  * IconSvg component is supposed to be used in combination with `icons`
  *
- * @see https://graphcommerce-docs.vercel.app/framework/icons
+ * @see https://www.graphcommerce.org/docs/framework/icons
  */
 export const IconSvg = forwardRef<SVGSVGElement, IconSvgProps>((props, ref) => {
   const { src, size, fillIcon, className, ...svgProps } = useThemeProps({ props, name })

package/Layout/components/LayoutHeader.tsx

@@ -26,6 +26,8 @@ export type LayoutHeaderProps = FloatingProps &
     noAlign?: boolean
 
     sx?: SxProps<Theme>
+
+    hideBackButton?: boolean
   }
 
 type ComponentStyleProps = {
@@ -46,14 +48,16 @@ export function LayoutHeader(props: LayoutHeaderProps) {
   const {
     children,
     divider,
+    hideBackButton = false,
     primary,
     secondary,
     noAlign = false,
     switchPoint,
     size = 'responsive',
     sx = [],
+    bgColor,
   } = props
-  const showBack = useShowBack()
+  const showBack = useShowBack() && !hideBackButton
   const showClose = useShowClose()
 
   const floatFallback = !children
@@ -149,6 +153,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
         floatingMd={floatingMd}
         floatingSm={floatingSm}
         switchPoint={switchPoint}
+        bgColor={bgColor}
       >
         {children}
       </LayoutHeaderContent>

package/Layout/components/LayoutHeaderContent.tsx

@@ -18,6 +18,7 @@ export type LayoutHeaderContentProps = FloatingProps & {
   sxBg?: SxProps<Theme>
   layout?: LayoutProps['layout']
   size?: 'small' | 'responsive'
+  bgColor?: 'paper' | 'default'
 } & Pick<LayoutProps, 'layout' | 'layoutDependency'>
 
 type OwnerState = {
@@ -26,7 +27,9 @@ type OwnerState = {
   scrolled: boolean
   divider: boolean
   size: 'small' | 'responsive'
+  bgColor?: 'paper' | 'default'
 }
+
 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)
@@ -47,12 +50,13 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
     layout,
     layoutDependency,
     size = 'responsive',
+    bgColor = 'paper',
   } = props
 
   const scroll = useScrollY()
   const scrolled = useMotionValueValue(scroll, (y) => y >= switchPoint)
 
-  const classes = withState({ floatingSm, floatingMd, scrolled, divider: !!divider, size })
+  const classes = withState({ floatingSm, floatingMd, scrolled, divider: !!divider, size, bgColor })
 
   return (
     <>
@@ -63,7 +67,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             position: 'absolute',
             left: 0,
             width: '100%',
-            backgroundColor: theme.palette.background.paper,
+            backgroundColor: theme.palette.background[bgColor],
             boxShadow: theme.shadows[1],
 
             height: theme.appShell.headerHeightSm,

package/LayoutDefault/components/LayoutDefault.tsx

@@ -127,7 +127,19 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             })}
           >
             {menuFab}
-            {cartFab}
+            <Box
+              sx={(theme) => ({
+                display: 'flex',
+                flexDirection: 'row-reverse',
+                gap: theme.spacings.sm,
+                [theme.breakpoints.up('md')]: {
+                  flexDirection: 'column',
+                  alignItems: 'flex-end',
+                },
+              })}
+            >
+              {cartFab}
+            </Box>
           </Box>
         ) : (
           <div />

package/LayoutParts/MenuFabSecondaryItem.tsx

@@ -1,6 +1,6 @@
 import { ListItemButton, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { extendableComponent } from '../Styles'
 import { NextLink } from '../Theme'
 
@@ -9,6 +9,7 @@ export type FabMenuSecondaryItemProps = {
   children: React.ReactNode
   icon: React.ReactNode
   sx?: SxProps<Theme>
+  onClick?: MouseEventHandler<HTMLElement>
 }
 
 const compName = 'MenuFabSecondaryItem' as const
@@ -16,12 +17,18 @@ const parts = ['root', 'icon', 'text'] as const
 const { classes } = extendableComponent(compName, parts)
 
 export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
-  const { href, children, icon, sx = [] } = props
+  const { href, children, onClick, icon, sx = [] } = props
   const router = useRouter()
 
+  const handleClick: MouseEventHandler<HTMLElement> = (e) => {
+    e.preventDefault()
+    onClick?.(e)
+    return router.push(href)
+  }
+
   return (
     <ListItemButton
-      href={href}
+      onClick={handleClick}
       component={NextLink}
       className={classes.root}
       sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}

package/LayoutParts/StickyBelowHeader.tsx

@@ -1,25 +1,34 @@
-import { Container } from '@mui/material'
+import { Container, SxProps, Theme } from '@mui/material'
 import React from 'react'
+import { extendableComponent } from '../Styles'
 
 export type StickyBelowHeaderProps = {
   children: React.ReactNode
+  sx?: SxProps<Theme>
 }
 
+const { classes } = extendableComponent('StickyBelowHeader', ['root'])
+
 /** - Makes the children sticky to the parent container */
 export function StickyBelowHeader(props: StickyBelowHeaderProps) {
+  const { sx = [] } = props
   return (
     <Container
-      sx={(theme) => ({
-        position: 'sticky',
-        top: { xs: theme.appShell.headerHeightSm, md: `${theme.page.vertical} !important` },
-        zIndex: 96,
-        pointerEvents: 'none',
-        '& > *': {
-          pointerEvents: 'auto',
-        },
-      })}
+      className={classes.root}
       maxWidth={false}
       {...props}
+      sx={[
+        (theme) => ({
+          position: 'sticky',
+          top: { xs: theme.appShell.headerHeightSm, md: `${theme.page.vertical} !important` },
+          zIndex: 96,
+          pointerEvents: 'none',
+          '& > *': {
+            pointerEvents: 'auto',
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     />
   )
 }

package/Overlay/components/OverlayBase.tsx

@@ -15,7 +15,6 @@ import {
   useMotionValue,
   useTransform,
 } from 'framer-motion'
-import framesync from 'framesync'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { ExtendableComponent, extendableComponent } from '../../Styles'
@@ -32,6 +31,7 @@ type StyleProps = {
   sizeMd?: LayoutOverlaySize
   justifySm?: LayoutOverlayAlign
   justifyMd?: LayoutOverlayAlign
+  bgColor?: 'paper' | 'default'
 }
 
 type OverridableProps = {
@@ -102,6 +102,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     sxBackdrop = [],
     active,
     onClosed,
+    bgColor = 'paper',
     direction = 1,
     offsetPageY = 0,
     isPresent,
@@ -194,7 +195,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         scroller.scrollLeft = scroll.x.getPrevious()
         scroller.scrollTop = scroll.y.getPrevious()
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        scrollTo(openClosePositions().open)
+        scrollTo(openClosePositions().open, { stopAnimationOnScroll: false })
       }
     }
 
@@ -279,7 +280,9 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
     if (position.get() !== OverlayPosition.OPENED && !scroll.animating.get()) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      scrollTo(openClosePositions().open).then(() => position.set(OverlayPosition.OPENED))
+      scrollTo(openClosePositions().open, { stopAnimationOnScroll: false }).then(() =>
+        position.set(OverlayPosition.OPENED),
+      )
     }
   }, [isPresent, openClosePositions, position, scroll.animating, scrollTo, scrollerRef, variant])
 
@@ -289,7 +292,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     if (isPresent || !scroller) return
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    scrollTo(openClosePositions().closed).then(() => {
+    scrollTo(openClosePositions().closed, { stopAnimationOnScroll: false }).then(() => {
       safeToRemove?.()
       document.body.style.overflow = ''
     })
@@ -329,10 +332,13 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
   const onClickAway = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      const isTarget = event.target === beforeRef.current || event.target === overlayPaneRef.current
+      const isTarget =
+        event.target === beforeRef.current ||
+        event.target === overlayPaneRef.current ||
+        event.target === scrollerRef.current
       if (isTarget && snap.get()) closeOverlay()
     },
-    [closeOverlay, snap],
+    [closeOverlay, snap, scrollerRef],
   )
 
   return (
@@ -405,7 +411,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                   height: '1px',
                   top: 'calc(100% - 1px)',
                   left: '0',
-                  background: theme.palette.background.paper,
+                  background: theme.palette.background[bgColor],
                 },
               },
             },
@@ -464,9 +470,14 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
           sx={(theme) => ({
             display: 'grid',
             gridArea: 'overlay',
-            scrollSnapAlign: 'start',
             scrollSnapStop: 'always',
             pointerEvents: 'none',
+            '&.variantMdBottom, &.variantMdRight': {
+              scrollSnapAlign: 'end',
+            },
+            '&.variantMdLeft': {
+              scrollSnapAlign: 'start',
+            },
             [theme.breakpoints.down('md')]: {
               justifyContent: justifySm,
               alignItems: justifySm,
@@ -592,7 +603,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             <Box
               className={classes.background}
               sx={(theme) => ({
-                backgroundColor: theme.palette.background.paper,
+                backgroundColor: theme.palette.background[bgColor],
                 paddingBottom: '0.1px',
                 [theme.breakpoints.down('md')]: {
                   minHeight: '100%',

package/PageMeta/PageMeta.tsx

@@ -31,6 +31,9 @@ export type PageMetaProps = {
   metaDescription?: string
   metaRobots?: MetaRobotsAll | MetaRobots[]
   children?: React.ReactNode
+  ogImage?: string | null
+  ogImageUseFallback?: boolean
+  ogType?: string | null
 }
 
 type PartialNextRouter = Pick<
@@ -90,7 +93,16 @@ export function useCanonical(incoming?: Canonical) {
 
 export function PageMeta(props: PageMetaProps) {
   const { active } = usePageContext()
-  const { children, title, canonical: canonicalBare, metaDescription, metaRobots = ['all'] } = props
+  const {
+    children,
+    title,
+    canonical: canonicalBare,
+    metaDescription,
+    ogImage,
+    ogType,
+    ogImageUseFallback = false,
+    metaRobots = ['all'],
+  } = props
 
   const canonical = useCanonical(canonicalBare)
 
@@ -99,10 +111,20 @@ export function PageMeta(props: PageMetaProps) {
     <Head>
       <title>{title.trim()}</title>
       {metaDescription && (
-        <meta name='description' content={metaDescription.trim()} key='meta-description' />
+        <>
+          <meta name='description' content={metaDescription.trim()} key='meta-description' />
+          <meta property='og:description' content={metaDescription.trim()} key='og-description' />
+        </>
       )}
       <meta name='robots' content={metaRobots.join(',')} key='meta-robots' />
       {canonical && <link rel='canonical' href={canonical} key='canonical' />}
+      <meta property='og:title' content={title.trim()} key='og-title' />
+      <meta property='og:type' content={ogType ?? 'website'} key='og-type' />
+      <meta property='og:url' content={canonical} key='og-url' />
+      {(ogImage || ogImageUseFallback) && (
+        <meta property='og:image' content={ogImage ?? '/open-graph-image.jpg'} key='og-image' />
+      )}
+
       {children}
     </Head>
   )

package/Pagination/Pagination.tsx

@@ -22,7 +22,7 @@ const { classes } = extendableComponent('Pagination', parts)
  * Read more: https://ahrefs.com/blog/rel-prev-next-pagination/
  */
 export function Pagination(props: PagePaginationProps) {
-  const { count, page, renderLink, classes: styles, ...paginationProps } = props
+  const { count, page, renderLink, classes: styles, sx = [], ...paginationProps } = props
 
   const { items } = usePagination({
     count,
@@ -61,18 +61,21 @@ export function Pagination(props: PagePaginationProps) {
   return (
     <Box
       className={classes.root}
-      sx={(theme) => ({
-        margin: '0 auto',
-        marginTop: theme.spacings.lg,
-        marginBottom: theme.spacings.lg,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: '6px',
-        '& .Mui-disabled': {
-          background: 'none',
-        },
-      })}
+      sx={[
+        (theme) => ({
+          margin: '0 auto',
+          marginTop: theme.spacings.lg,
+          marginBottom: theme.spacings.lg,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '6px',
+          '& .Mui-disabled': {
+            background: 'none',
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       {page === 1 ? chevronLeft : renderLink(page - 1, chevronLeft, prevBtnProps)}
 

package/RenderType/RenderType.tsx

@@ -8,7 +8,7 @@ type FilterTypeByTypename<A extends TypeObject, Typename extends string> = A ext
     : never
   : never
 
-type TypeRenderMethod<P> = (props: P) => React.ReactElement | null
+type TypeRenderMethod<P> = (props: P) => React.ReactNode
 
 type TypeRenderMap<
   T extends TypeObject,

package/Snackbar/MessageSnackbarImpl.tsx

@@ -70,9 +70,13 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     onClose?.()
   }
 
-  const preventAnimationBubble: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.preventDefault()
+  const preventAnimationBubble = (
+    e: React.TouchEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>,
+  ) => {
     e.stopPropagation()
+    if (e.type === 'mousedown') {
+      e.preventDefault()
+    }
   }
 
   let icon = iconCheckmark
@@ -144,6 +148,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
                 size='small'
                 onClick={hideSnackbar}
                 onMouseDown={preventAnimationBubble}
+                onTouchStart={preventAnimationBubble}
                 sx={(theme) => ({
                   backgroundColor: lighten(theme.palette.background.paper, 0.1),
                 })}

package/Theme/MuiButton.ts

@@ -89,19 +89,19 @@ export const MuiButtonPill: ButtonVariants = [
   {
     props: { variant: 'pill', size: 'small' },
     style: ({ theme }) => ({
-      '&:not(.Mui-disabled)': { boxShadow: theme.shadows[2] },
+      '&:not(.Mui-disabled):not(.MuiButton-disableElevation)': { boxShadow: theme.shadows[2] },
     }),
   },
   {
     props: { variant: 'pill', size: 'medium' },
     style: ({ theme }) => ({
-      '&:not(.Mui-disabled)': { boxShadow: theme.shadows[4] },
+      '&:not(.Mui-disabled):not(.MuiButton-disableElevation)': { boxShadow: theme.shadows[4] },
     }),
   },
   {
     props: { variant: 'pill', size: 'large' },
     style: ({ theme }) => ({
-      '&:not(.Mui-disabled)': { boxShadow: theme.shadows[6] },
+      '&:not(.Mui-disabled):not(.MuiButton-disableElevation)': { boxShadow: theme.shadows[6] },
     }),
   },
   {

package/icons/compare-arrows.svg

@@ -0,0 +1,9 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" aria-labelledby="compareIconTitle" stroke="#2329D6" stroke-width="1" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#2329D6"> 
+<title id="compareIconTitle">Compare</title> 
+<symbol id="icon" viewBox="0 0 24 24">
+<path d="M12 9L22 9" />
+<path d="M16.5 4.5L12 9L16.5 13.5"/>
+<path d="M12 15L2 15"  />
+<path d="M7.5 19.5L12 15L7.5 10.5" />
+</symbol>
+</svg>

package/icons/index.ts

@@ -45,3 +45,4 @@ export { default as iconSearch } from './search.svg'
 export { default as iconPhone } from './smartphone.svg'
 export { default as iconStar } from './star.svg'
 export { default as iconSun } from './sun.svg'
+export { default as iconCompare } from './compare-arrows.svg'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.7",
+  "version": "6.2.0-canary.70",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -14,29 +14,30 @@
     }
   },
   "dependencies": {
-    "@emotion/cache": "^11.10.5",
-    "@emotion/react": "^11.10.6",
-    "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.10.6",
-    "@graphcommerce/framer-next-pages": "6.2.0-canary.7",
-    "@graphcommerce/framer-scroller": "6.2.0-canary.7",
-    "@graphcommerce/framer-utils": "6.2.0-canary.7",
-    "@graphcommerce/image": "6.2.0-canary.7",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@graphcommerce/framer-next-pages": "6.2.0-canary.70",
+    "@graphcommerce/framer-scroller": "6.2.0-canary.70",
+    "@graphcommerce/framer-utils": "6.2.0-canary.70",
+    "@graphcommerce/image": "6.2.0-canary.70",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.7",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.7",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.7",
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.70",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.70",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.70",
     "@types/cookie": "^0.5.1",
-    "@types/react-is": "^17.0.3",
-    "typescript": "4.9.5"
+    "@types/react-is": "^18.2.0",
+    "typescript": "5.1.3"
   },
   "peerDependencies": {
-    "@lingui/core": "^3.13.2",
-    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^4.2.1",
+    "@lingui/react": "^4.2.1",
+    "@lingui/macro": "^4.2.1",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.10.16",
     "framer-motion": "^10.0.0",