@graphcommerce/next-ui 8.1.0-canary.2 → 8.1.0-canary.22

package/ActionCard/ActionCard.tsx

@@ -13,7 +13,7 @@ import { extendableComponent, responsiveVal } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
 
 type Variants = 'outlined' | 'default'
-type Size = 'large' | 'medium' | 'small'
+type Size = 'large' | 'medium' | 'small' | 'responsive'
 type Color = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
 type Layout = 'inline' | 'grid' | 'list' | 'stack'
 
@@ -47,6 +47,7 @@ export type ActionCardProps = {
 
 const parts = [
   'root',
+  'rootInner',
   'image',
   'title',
   'action',
@@ -77,6 +78,13 @@ const { withState, selectors } = extendableComponent<StateProps, typeof name, ty
 
 export const actionCardSelectors = selectors
 
+export const actionCardImageSizes = {
+  small: responsiveVal(60, 80),
+  medium: responsiveVal(60, 80),
+  large: responsiveVal(100, 120),
+  responsive: responsiveVal(60, 120),
+}
+
 export function ActionCard(props: ActionCardProps) {
   const {
     title,
@@ -92,7 +100,7 @@ export function ActionCard(props: ActionCardProps) {
     selected = false,
     reset,
     disabled = false,
-    size = 'medium',
+    size = 'responsive',
     color = 'primary',
     variant = 'outlined',
     layout = 'list',
@@ -140,6 +148,12 @@ export function ActionCard(props: ActionCardProps) {
             py: responsiveVal(12, 14),
             display: 'block',
           },
+          '&.sizeResponsive': {
+            px: responsiveVal(8, 16),
+            py: responsiveVal(4, 14),
+            display: { xs: 'flex', md: 'block', lg: 'block' },
+            [theme.breakpoints.down('md')]: { typography: 'body2' },
+          },
 
           '&.variantDefault': {
             position: 'relative',
@@ -186,6 +200,13 @@ export function ActionCard(props: ActionCardProps) {
                 mb: { xs: '-5px', sm: '-7px', md: '-8px' },
               },
             },
+            '&.sizeResponsive': {
+              mt: responsiveVal(2, 8),
+              mb: responsiveVal(3, 9),
+              '&::after': {
+                mb: responsiveVal(-2, -8),
+              },
+            },
           },
 
           '&.variantOutlined': {
@@ -261,6 +282,7 @@ export function ActionCard(props: ActionCardProps) {
       ]}
     >
       <Box
+        className={classes.rootInner}
         sx={{
           display: 'flex',
           flexDirection: 'row',
@@ -301,6 +323,7 @@ export function ActionCard(props: ActionCardProps) {
                   '&.sizeSmall': { typography: 'body2' },
                   '&.sizeMedium': { typography: 'body1' },
                   '&.sizeLarge': { typography: 'h6' },
+                  '&.sizeResponsive': { typography: { xs: 'body2', md: 'body1', lg: 'h6' } },
                 }}
               >
                 {title}
@@ -341,8 +364,9 @@ export function ActionCard(props: ActionCardProps) {
               sx={{
                 textAlign: 'right',
                 typography: 'body1',
-                '&.sizeMedium': { typographty: 'subtitle1' },
+                '&.sizeMedium': { typography: 'subtitle1' },
                 '&.sizeLarge': { typography: 'h6' },
+                '&.sizeResponsive': { typography: { xs: 'body1', md: 'subtitle1', lg: 'h6' } },
               }}
             >
               {price}

package/ActionCard/ActionCardListForm.tsx

@@ -1,5 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import {
+  Controller,
+  ControllerProps,
+  FieldValues,
+  useController,
+} from '@graphcommerce/react-hook-form'
 import React, { MouseEventHandler } from 'react'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardList, ActionCardListProps } from './ActionCardList'
@@ -43,38 +48,41 @@ export function ActionCardListForm<
       : selectValues === itemValue
   }
 
+  const {
+    field: { onChange, value, ref },
+    fieldState,
+    formState,
+  } = useController({
+    ...props,
+    control,
+    name,
+    defaultValue,
+    rules: { required: errorMessage || required, ...rules },
+  })
+
   return (
-    <Controller
-      {...props}
-      control={control}
-      name={name}
-      defaultValue={defaultValue}
-      rules={{ required: errorMessage || required, ...rules }}
-      render={({ field: { onChange, value, ref }, fieldState, formState }) => (
-        <ActionCardList
-          {...other}
-          multiple={multiple}
-          required={required}
-          value={value}
-          ref={ref}
-          onChange={(_, incomming) => onChange(incomming)}
-          error={formState.isSubmitted && !!fieldState.error}
-          errorMessage={fieldState.error?.message}
-        >
-          {items.map((item) => (
-            <RenderItem
-              {...item}
-              key={item.value ?? ''}
-              value={item.value}
-              selected={onSelect(item.value, value)}
-              onReset={(e) => {
-                e.preventDefault()
-                onChange(null)
-              }}
-            />
-          ))}
-        </ActionCardList>
-      )}
-    />
+    <ActionCardList
+      {...other}
+      multiple={multiple}
+      required={required}
+      value={value}
+      ref={ref}
+      onChange={(_, incomming) => onChange(incomming)}
+      error={formState.isSubmitted && !!fieldState.error}
+      errorMessage={fieldState.error?.message}
+    >
+      {items.map((item) => (
+        <RenderItem
+          {...item}
+          key={item.value ?? ''}
+          value={item.value}
+          selected={onSelect(item.value, value)}
+          onReset={(e) => {
+            e.preventDefault()
+            onChange(null)
+          }}
+        />
+      ))}
+    </ActionCardList>
   )
 }

package/CHANGELOG.md

@@ -1,6 +1,178 @@
 # Change Log
 
-## 8.1.0-canary.2
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+### Minor Changes
+
+- [#2209](https://github.com/graphcommerce-org/graphcommerce/pull/2209) [`2872cab`](https://github.com/graphcommerce-org/graphcommerce/commit/2872cabdca9ee4f0378fd411c6a633f71bb92f1f) - Removed useMediaQuery from the wishlist and cart ItemActionCard and replaced it with a new responsive size prop.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
+## 8.1.0-canary.9
+
+### Patch Changes
+
+- [#2223](https://github.com/graphcommerce-org/graphcommerce/pull/2223) [`d7459fe`](https://github.com/graphcommerce-org/graphcommerce/commit/d7459feb6e6902af09ab9ff766c0b3b1a74fb723) - Updated canonicalize helper for better multi domain support
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 8.1.0-canary.8
+
+### Patch Changes
+
+- [#2247](https://github.com/graphcommerce-org/graphcommerce/pull/2247) [`444e446`](https://github.com/graphcommerce-org/graphcommerce/commit/444e446a218cc9da3defb940a6d5cce0229ff845) - Added clear upgrade instructions for linguiLocale
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
+## 8.1.0-canary.5
+
+## 8.0.6-canary.4
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Added useIsSSR hook that will properly resolve when the page is rendered on the server and on first render, but will return false when a component is rendered on the client directly.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+### Patch Changes
+
+- [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
+  ([@paales](https://github.com/paales))
+
+## 8.0.5
+
+### Patch Changes
+
+- [#2236](https://github.com/graphcommerce-org/graphcommerce/pull/2236) [`85fb916`](https://github.com/graphcommerce-org/graphcommerce/commit/85fb916e5ec2a1456a93a59bf92a5f414fee8595) - Solve issue where the inert prop wouldnt be properly forwarded
+  ([@paales](https://github.com/paales))
+
+- [#2235](https://github.com/graphcommerce-org/graphcommerce/pull/2235) [`de99691`](https://github.com/graphcommerce-org/graphcommerce/commit/de9969155e271cc2535147479b80b602a1b9c335) - The Lazyhydrate component to accepts any BoxProps. Replaced `<section>` with a `<Box>` so it doesn't hold symantic meaning.
+
+  Please note: If you've used child selectors to style the section, please make sure you update your styles. ([@carlocarels90](https://github.com/carlocarels90))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`6f3fe60`](https://github.com/graphcommerce-org/graphcommerce/commit/6f3fe60441762d55cb46d587279121e8fe469cdd) - Decreased layout shift on product pages by reserving space for sidebar
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`cde3c31`](https://github.com/graphcommerce-org/graphcommerce/commit/cde3c310abf2ac3c82d1062d5fb0a4c00ba50cff) - Removed unnecessary vendor prefixes
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`4c83636`](https://github.com/graphcommerce-org/graphcommerce/commit/4c836366c324881ee5121c645c5f94fc60e3ebb3) - Prevent horizontal scrollbar on small screens when using SidebarGallery
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2230](https://github.com/graphcommerce-org/graphcommerce/pull/2230) [`1da6b82`](https://github.com/graphcommerce-org/graphcommerce/commit/1da6b82dbb7e1543542d809ea625a8867643ea68) - Fix menu item visibility in accessability tree
+  ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+## 8.0.5-canary.7
+
+### Patch Changes
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`6f3fe60`](https://github.com/graphcommerce-org/graphcommerce/commit/6f3fe60441762d55cb46d587279121e8fe469cdd) - Decreased layout shift on product pages by reserving space for sidebar
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`cde3c31`](https://github.com/graphcommerce-org/graphcommerce/commit/cde3c310abf2ac3c82d1062d5fb0a4c00ba50cff) - Removed unnecessary vendor prefixes
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2241](https://github.com/graphcommerce-org/graphcommerce/pull/2241) [`4c83636`](https://github.com/graphcommerce-org/graphcommerce/commit/4c836366c324881ee5121c645c5f94fc60e3ebb3) - Prevent horizontal scrollbar on small screens when using SidebarGallery
+  ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+## 8.0.5-canary.4
+
+## 8.0.5-canary.3
+
+### Patch Changes
+
+- [#2236](https://github.com/graphcommerce-org/graphcommerce/pull/2236) [`85fb916`](https://github.com/graphcommerce-org/graphcommerce/commit/85fb916e5ec2a1456a93a59bf92a5f414fee8595) - Solve issue where the inert prop wouldnt be properly forwarded
+  ([@paales](https://github.com/paales))
+
+## 8.0.5-canary.2
+
+### Patch Changes
+
+- [#2235](https://github.com/graphcommerce-org/graphcommerce/pull/2235) [`de99691`](https://github.com/graphcommerce-org/graphcommerce/commit/de9969155e271cc2535147479b80b602a1b9c335) - The Lazyhydrate component to accepts any BoxProps. Replaced `<section>` with a `<Box>` so it doesn't hold symantic meaning.
+
+  Please note: If you've used child selectors to style the section, please make sure you update your styles. ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+### Patch Changes
+
+- [#2230](https://github.com/graphcommerce-org/graphcommerce/pull/2230) [`1da6b82`](https://github.com/graphcommerce-org/graphcommerce/commit/1da6b82dbb7e1543542d809ea625a8867643ea68) - Fix menu item visibility in accessability tree
+  ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 8.0.4
+
+### Patch Changes
+
+- [#2228](https://github.com/graphcommerce-org/graphcommerce/pull/2228) [`0c0cacb`](https://github.com/graphcommerce-org/graphcommerce/commit/0c0cacb8725f0a626ea5d3acf154d83c433c3eb7) - apply correct type for the inert property
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+### Patch Changes
+
+- [#2228](https://github.com/graphcommerce-org/graphcommerce/pull/2228) [`0c0cacb`](https://github.com/graphcommerce-org/graphcommerce/commit/0c0cacb8725f0a626ea5d3acf154d83c433c3eb7) - apply correct type for the inert property
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.0.3
+
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+## 8.0.3-canary.4
+
+## 8.0.3-canary.3
+
+## 8.0.3-canary.2
 
 ## 8.0.3-canary.1
 

package/FramerScroller/SidebarGallery.tsx

@@ -31,7 +31,14 @@ import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit }
 
 const MotionBox = styled(m.div)({})
 
-type OwnerState = { zoomed: boolean; disableZoom: boolean }
+type SidebarGalleryVariant = 'default' | 'oneColumn'
+
+type OwnerState = {
+  zoomed: boolean
+  disableZoom: boolean
+  sticky: boolean
+  variantMd: SidebarGalleryVariant
+}
 const name = 'SidebarGallery' as const
 const parts = [
   'row',
@@ -60,6 +67,8 @@ export type SidebarGalleryProps = {
   routeHash?: string
   sx?: SxProps<Theme>
   disableZoom?: boolean
+  disableSticky?: boolean
+  variantMd?: SidebarGalleryVariant
 } & Pick<ScrollerButtonProps, 'showButtons'>
 
 export function SidebarGallery(props: SidebarGalleryProps) {
@@ -71,6 +80,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     routeHash = 'gallery',
     showButtons,
     disableZoom = false,
+    disableSticky = false,
+    variantMd = 'default',
   } = props
 
   const router = useRouter()
@@ -103,7 +114,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     }
   }
 
-  const classes = withState({ zoomed, disableZoom })
+  const classes = withState({ zoomed, disableZoom, sticky: !disableSticky, variantMd })
   const theme = useTheme()
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
 
@@ -144,23 +155,31 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               display: 'grid',
               gridTemplate: '"left" "right"',
               [theme.breakpoints.up('md')]: {
-                // gridTemplateColumns: '1fr auto',
-                gridTemplate: '"left right" / 1fr auto',
+                '&:not(.variantMdOneColumn)': {
+                  gridTemplate: `"left right" / 1fr calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
+                    theme.page.horizontal
+                  } * 2)`,
+                },
               },
               background:
                 theme.palette.mode === 'light'
                   ? theme.palette.background.image
                   : theme.palette.background.paper,
-              paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
-            },
-            zoomed && {
-              position: 'relative',
-              zIndex: theme.zIndex.modal,
-              marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
-              [theme.breakpoints.up('md')]: {
-                marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
+
+              '&:not(.variantMdOneColumn)': {
+                paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
+              },
+
+              '&.zoomed': {
+                position: 'relative',
+                zIndex: theme.zIndex.modal,
+                marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
+                [theme.breakpoints.up('md')]: {
+                  marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
+                  gridTemplateColumns: '1fr auto',
+                },
+                paddingRight: 0,
               },
-              paddingRight: 0,
             },
           ]}
         >
@@ -178,14 +197,18 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   position: 'relative',
                   paddingTop: `min(${ratio}, ${maxHeight})`,
                   [theme.breakpoints.down('md')]: {
-                    width: '100vw',
+                    width: '100%',
                   },
                   [theme.breakpoints.up('md')]: {
-                    height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
-                      theme.spacings.lg
-                    })`,
-                    position: 'sticky',
-                    top: theme.appShell.headerHeightMd,
+                    '&:not(.variantMdOneColumn)': {
+                      height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
+                        theme.spacings.lg
+                      })`,
+                      '&.sticky': {
+                        position: 'sticky',
+                      },
+                      top: theme.appShell.headerHeightMd,
+                    },
                   },
                 },
                 zoomed && {
@@ -348,11 +371,6 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 justifyItems: 'start',
                 alignContent: 'center',
                 position: 'relative',
-                [theme.breakpoints.up('md')]: {
-                  width: `calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
-                    theme.page.horizontal
-                  } * 2)`,
-                },
               },
               zoomed && {
                 [theme.breakpoints.up('md')]: {
@@ -373,9 +391,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               sx={{
                 boxSizing: 'border-box',
                 width: '100%',
-                padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
-                [theme.breakpoints.up('md')]: {
-                  paddingLeft: theme.spacings.lg,
+                '&:not(.variantMdOneColumn)': {
+                  padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
+                  [theme.breakpoints.up('md')]: {
+                    paddingLeft: theme.spacings.lg,
+                  },
                 },
               }}
             >

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -9,6 +9,7 @@ export type LayoutOverlayState = Omit<
   | 'mdSpacingTop'
   | 'smSpacingTop'
   | 'overlayPaneProps'
+  | 'disableInert'
   | 'widthMd'
   | 'widthSm'
 >

package/LazyHydrate/LazyHydrate.tsx

@@ -1,9 +1,10 @@
+import { Box, BoxProps } from '@mui/material'
 import React, { useState, useRef, startTransition, useLayoutEffect, useEffect } from 'react'
 
 // Make sure the server doesn't choke on the useLayoutEffect
 export const useLayoutEffect2 = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
-export type LazyHydrateProps = {
+export type LazyHydrateProps = BoxProps<'div'> & {
   /**
    * The content is always rendered on the server and on the client it uses the server rendered HTML until it is hydrated.
    */
@@ -25,8 +26,8 @@ export type LazyHydrateProps = {
  * This can be a way to improve the TBT of a page.
  */
 export function LazyHydrate(props: LazyHydrateProps) {
-  const { hydrated, children } = props
-  const rootRef = useRef<HTMLElement>(null)
+  const { hydrated, children, ...elementProps } = props
+  const rootRef = useRef<HTMLDivElement>(null)
 
   const [isHydrated, setIsHydrated] = useState(hydrated || false)
   if (!isHydrated && hydrated) setIsHydrated(true)
@@ -58,15 +59,24 @@ export function LazyHydrate(props: LazyHydrateProps) {
   }, [hydrated, isHydrated])
 
   if (isHydrated) {
-    return <section>{children}</section>
+    return <Box {...elementProps}>{children}</Box>
   }
 
   if (typeof window === 'undefined') {
-    return <section data-lazy-hydrate>{children}</section>
+    return (
+      <Box data-lazy-hydrate {...elementProps}>
+        {children}
+      </Box>
+    )
   }
 
   return (
-    // eslint-disable-next-line react/no-danger
-    <section ref={rootRef} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning />
+    <Box
+      ref={rootRef}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: '' }}
+      suppressHydrationWarning
+      {...elementProps}
+    />
   )
 }

package/Navigation/components/NavigationOverlay.tsx

@@ -162,6 +162,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
             }
             right={
               <Fab
+                disabled={!activeAndNotClosing}
                 color='inherit'
                 onClick={handleClose}
                 sx={{ boxShadow: 'none', my: fabMarginY }}

package/Overlay/components/OverlayBase.tsx

@@ -52,6 +52,7 @@ export type LayoutOverlayBaseProps = {
   isPresent: boolean
   safeToRemove?: (() => void) | null | undefined
   overlayPaneProps?: MotionProps
+  disableInert?: boolean
 
   /* For `variantSm='left|right' */
   widthSm?: string | false
@@ -109,6 +110,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     isPresent,
     safeToRemove,
     overlayPaneProps,
+    disableInert,
     widthMd = 'max(800px, 50vw)',
     widthSm = 'max(300px, 80vw)',
   } = props
@@ -247,7 +249,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     const cancelY = scroll.y.on('change', handleScroll)
 
     const ro = new ResizeObserver(handleResize)
-    ro.observe(scrollerRef.current)
+    if (scrollerRef.current) ro.observe(scrollerRef.current)
     ro.observe(beforeRef.current)
     ro.observe(overlayPaneRef.current)
     ro.observe(overlayRef.current)
@@ -363,7 +365,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   return (
     <>
       <MotionDiv
-        inert={active ? undefined : 'true'}
+        inert={active ? undefined : ('true' as unknown as boolean)}
         className={classes.backdrop}
         style={{ opacity: positions.open.visible }}
         sx={[
@@ -385,7 +387,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         ]}
       />
       <Scroller
-        inert={active ? undefined : 'true'}
+        inert={disableInert || active ? undefined : ('true' as unknown as boolean)}
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
         onClick={onClickAway}

package/Overlay/components/OverlaySsr.tsx

@@ -31,6 +31,7 @@ export function OverlaySsr(props: OverlayProps) {
     <OverlayContainer active={active} hidden={hidden}>
       <ScrollerProvider {...variantsToScrollSnapType(props)}>
         <OverlayBase
+          disableInert
           variantMd={variantMd}
           variantSm={variantSm}
           active={active}

package/PageMeta/PageMeta.tsx

@@ -70,11 +70,16 @@ export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
     if (localeDomain) {
       canonical = localeDomain
     } else {
-      href = addBasePath(addLocale(as, curLocale, router.defaultLocale))
+      const conf = storefrontConfig(router.locale)
+
+      href = addBasePath(
+        addLocale(as, curLocale, conf?.domain ? conf.locale : router.defaultLocale),
+      )
+
+      let siteUrl = conf?.canonicalBaseUrl || import.meta.graphCommerce.canonicalBaseUrl
+
+      if (conf?.domain && !conf?.canonicalBaseUrl) siteUrl = `https://${conf.domain}`
 
-      let siteUrl =
-        storefrontConfig(router.locale)?.canonicalBaseUrl ||
-        import.meta.graphCommerce.canonicalBaseUrl
       if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
 
       canonical = `${siteUrl}${href}`

package/Styles/createEmotionCache.ts

@@ -10,5 +10,5 @@ export const createEmotionCache = () => {
     insertionPoint = emotionInsertionPoint ?? undefined
   }
 
-  return createCache({ key: 'mui-style', insertionPoint })
+  return createCache({ key: 'mui-style', insertionPoint, stylisPlugins: [] })
 }

package/TimeAgo/TimeAgo.tsx

@@ -1,17 +1,23 @@
+import { useLocale } from '../hooks/useLocale'
+
 export type TimeAgoProps = {
   date: Date
+  /**
+   * @deprecated No longer used
+   */
   locale?: string
 }
 
 export function TimeAgo(props: TimeAgoProps) {
-  const { date, locale = 'en' } = props
+  const { date } = props
   const msPerMinute = 60 * 1000
   const msPerHour = msPerMinute * 60
   const msPerDay = msPerHour * 24
 
   const timestamp = date.getTime()
   const elapsed = Date.now() - timestamp
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+
+  const rtf = new Intl.RelativeTimeFormat(useLocale(), { numeric: 'auto' })
 
   if (elapsed < msPerMinute) {
     return <span>{rtf.format(-Math.floor(elapsed / 1000), 'seconds')}</span>

package/hooks/index.ts

@@ -5,3 +5,5 @@ export * from './useNumberFormat'
 export * from './useMemoObject'
 export * from './useStorefrontConfig'
 export * from './useUrlQuery'
+export * from './useSsr'
+export * from './useLocale'

package/hooks/useDateTimeFormat.ts

@@ -1,15 +1,11 @@
-import { normalizeLocale } from '@graphcommerce/lingui-next'
-import { useRouter } from 'next/router'
 import { useMemo } from 'react'
+import { useLocale } from './useLocale'
 
 export type DateTimeFormatProps = Intl.DateTimeFormatOptions
 
 export function useDateTimeFormat(props?: DateTimeFormatProps) {
-  const { locale } = useRouter()
+  const locale = useLocale()
 
-  const formatter = useMemo(
-    () => new Intl.DateTimeFormat(normalizeLocale(locale), props),
-    [locale, props],
-  )
+  const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
   return formatter
 }

package/hooks/useLocale.ts

@@ -0,0 +1,7 @@
+import { normalizeLocale } from '@graphcommerce/lingui-next'
+import { useStorefrontConfig } from './useStorefrontConfig'
+
+export function useLocale() {
+  const { locale } = useStorefrontConfig()
+  return normalizeLocale(locale)
+}

package/hooks/useMatchMedia.ts

@@ -1,5 +1,24 @@
 import { Breakpoint, useTheme } from '@mui/material'
-import { useMemo } from 'react'
+import { useMotionValue } from 'framer-motion'
+import { useEffect, useMemo } from 'react'
+
+export function useMatchMediaMotionValue(
+  direction: 'up' | 'down',
+  breakpointKey: number | Breakpoint,
+) {
+  const matchValue = useMotionValue(false)
+  const theme = useTheme()
+  const query = theme.breakpoints[direction](breakpointKey).replace(/^@media( ?)/m, '')
+
+  useEffect(() => {
+    const mql = globalThis?.matchMedia(query)
+    const matcher = (e: MediaQueryListEvent) => matchValue.set(e.matches)
+    mql.addEventListener('change', matcher)
+    return () => mql.removeEventListener('change', matcher)
+  }, [matchValue, query])
+
+  return matchValue
+}
 
 export function useMatchMedia() {
   const theme = useTheme()

package/hooks/useNumberFormat.ts

@@ -1,15 +1,10 @@
-import { normalizeLocale } from '@graphcommerce/lingui-next'
-import { useRouter } from 'next/router'
 import { useMemo } from 'react'
+import { useLocale } from './useLocale'
 
 export type NumberFormatProps = Intl.NumberFormatOptions
 
 export function useNumberFormat(props?: NumberFormatProps) {
-  const { locale } = useRouter()
-
-  const formatter = useMemo(
-    () => new Intl.NumberFormat(normalizeLocale(locale), props),
-    [locale, props],
-  )
+  const locale = useLocale()
+  const formatter = useMemo(() => new Intl.NumberFormat(locale, props), [locale, props])
   return formatter
 }

package/hooks/useSsr.ts

@@ -0,0 +1,11 @@
+import { useSyncExternalStore } from 'react'
+
+const emptySubscribe = () => () => {}
+
+export function useIsSSR() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => false,
+    () => true,
+  )
+}

package/icons.ts

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

package/index.ts

@@ -59,3 +59,5 @@ export * from './UspList/UspListItem'
 export * from './hooks'
 export * from './icons'
 export * from './utils/cookie'
+export * from './utils/sitemap'
+export * from './utils/robots'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.2",
+  "version": "8.1.0-canary.22",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -17,6 +17,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "cookie": "^0.6.0",
+    "next-sitemap": "4.2.3",
     "react-is": "^18.2.0"
   },
   "devDependencies": {
@@ -25,14 +26,14 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.2",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.2",
-    "@graphcommerce/framer-utils": "^8.1.0-canary.2",
-    "@graphcommerce/image": "^8.1.0-canary.2",
-    "@graphcommerce/lingui-next": "^8.1.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.2",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.22",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.22",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.22",
+    "@graphcommerce/framer-utils": "^8.1.0-canary.22",
+    "@graphcommerce/image": "^8.1.0-canary.22",
+    "@graphcommerce/lingui-next": "^8.1.0-canary.22",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.22",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.22",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/types.d.ts

@@ -6,12 +6,6 @@ import './Theme/createTheme'
 // eslint-disable-next-line react/no-typos
 import 'react'
 
-declare module 'react' {
-  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
-    inert?: 'true'
-  }
-}
-
 declare module '*.po' {
   const messages: Record<
     string,

package/utils/robots.ts

@@ -0,0 +1,41 @@
+import { GetServerSidePropsContext } from 'next'
+
+type Stringifyable = boolean | string | number | null | undefined
+
+/**
+ * Tagged template literal for robots.txt that will automatically stringify values and indent them correctly.
+ * https://developers.google.com/search/docs/crawling-indexing/robots/robots_txt#syntax
+ */
+export function robotsTxt(strings: TemplateStringsArray, ...values: Stringifyable[]) {
+  return strings
+    .reduce((acc, str, i) => {
+      let value = values[i]
+
+      if (Array.isArray(value)) {
+        const [conditional, val] = value
+        value = conditional ? val : null
+      }
+      if (!value) value = ''
+      if (typeof value === 'boolean') value = value ? 'true' : 'false'
+      if (typeof value === 'number') value = String(value)
+
+      return acc + str + value
+    }, '')
+    .split('\n')
+    .map((v) => v.trim())
+    .join('\n')
+    .trim()
+}
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export async function getServerSidePropsRobotsTxt(
+  context: GetServerSidePropsContext,
+  robots: string,
+) {
+  context.res.setHeader('Content-Type', 'text/plain')
+  context.res.write(robots)
+  context.res.end()
+  context.res.setHeader('Cache-Control', `public, s-maxage=${60 * 60 * 2}`)
+
+  return { props: {} }
+}

package/utils/sitemap.ts

@@ -0,0 +1,47 @@
+import { GetServerSidePropsContext, GetStaticPathsResult } from 'next'
+import { getServerSideSitemapLegacy, ISitemapField } from 'next-sitemap'
+import { canonicalize } from '../PageMeta/PageMeta'
+
+export function excludeSitemap(excludes: string[]) {
+  const regexp = excludes.map((exclude) => new RegExp(exclude.replace(/\*/g, '.*?')))
+
+  return (path: string) => !regexp.some((pattern) => pattern.test(`/${path}`))
+}
+
+export function staticPathsToString(
+  path: GetStaticPathsResult<{ url: string[] | string }>['paths'][0],
+) {
+  if (typeof path === 'string') return path
+  if (typeof path.params.url === 'string') return path.params.url
+  return path.params.url.join('/')
+}
+
+export function toSitemapFields(
+  context: GetServerSidePropsContext,
+  paths: string[],
+): ISitemapField[] {
+  const lastmod = new Date().toISOString()
+  const options = {
+    locale: context.locale,
+    defaultLocale: context.defaultLocale,
+    pathname: '/',
+    isLocaleDomain: false,
+  }
+
+  const sitemapPaths = paths.map<ISitemapField>((path) => ({
+    loc: canonicalize(options, `/${path}`) ?? '',
+    lastmod,
+    changefreq: 'daily',
+    priority: 0.7,
+  }))
+
+  return sitemapPaths
+}
+
+export function getServerSidePropsSitemap(
+  context: GetServerSidePropsContext,
+  paths: ISitemapField[],
+) {
+  context.res.setHeader('Cache-Control', `public, s-maxage=${60 * 60 * 2}`)
+  return getServerSideSitemapLegacy(context, paths)
+}

package/icons/index.ts

@@ -1,48 +0,0 @@
-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 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 iconCirle } from './circle.svg'
-export { default as iconClose } from './close.svg'
-export { default as iconCreditCard, 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 iconEyeClosed } from './eye-closed.svg'
-export { default as iconEyeCrossed } from './eye-crossed.svg'
-export { default as iconEye } from './eye.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 iconLanguage } from './language.svg'
-export { default as iconLocation } from './location.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 iconMin } from './minus.svg'
-export { default as iconMoon } from './moon.svg'
-export { default as iconNewspaper } from './news.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 iconRefresh } from './refresh.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 iconSun } from './sun.svg'
-export { default as iconCompare } from './compare-arrows.svg'