@graphcommerce/next-ui 7.1.0-canary.9 → 8.0.0-canary.69

package/ActionCard/ActionCard.tsx

@@ -55,6 +55,7 @@ const parts = [
   'after',
   'secondaryAction',
   'reset',
+  'end',
 ] as const
 const name = 'ActionCard'
 
@@ -317,6 +318,7 @@ export function ActionCard(props: ActionCardProps) {
         </Box>
 
         <Box
+          className={classes.end}
           sx={{
             display: 'flex',
             flexDirection: 'column',

package/CHANGELOG.md

@@ -1,5 +1,160 @@
 # Change Log
 
+## 8.0.0-canary.69
+
+## 7.1.0-canary.68
+
+## 7.1.0-canary.67
+
+### Patch Changes
+
+- [#2108](https://github.com/graphcommerce-org/graphcommerce/pull/2108) [`7fc4bb9`](https://github.com/graphcommerce-org/graphcommerce/commit/7fc4bb925c59da46961c9656a2a67b37a9c2d652) - Removed the 'NoSSR' functionality from `<WaitForQueries/>` component as it slows down rendering. The 'feature' was necessary for the following use case: When hydrating a component that was server rendered and was living inside a `<Suspense />` component. It would cause an hydration error and this was the workaround. With useSuspenseQuery and React 18, this problem will not occur.
+  ([@StefanAngenent](https://github.com/StefanAngenent))
+
+## 7.1.0-canary.66
+
+## 7.1.0-canary.65
+
+## 7.1.0-canary.64
+
+## 7.1.0-canary.63
+
+## 7.1.0-canary.62
+
+## 7.1.0-canary.61
+
+### Patch Changes
+
+- [#2125](https://github.com/graphcommerce-org/graphcommerce/pull/2125) [`5224ee500`](https://github.com/graphcommerce-org/graphcommerce/commit/5224ee5001c94a19f226fa36106e76739319297c) - If there is an open menu in an overlay, pressing the escape button now closes the menu instead of the overlay. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.60
+
+## 7.1.0-canary.59
+
+## 7.1.0-canary.58
+
+### Patch Changes
+
+- [#2121](https://github.com/graphcommerce-org/graphcommerce/pull/2121) [`a5da6ffc8`](https://github.com/graphcommerce-org/graphcommerce/commit/a5da6ffc8be359e93c7bde986134f7162aae13b9) - Change the critical css injection location to be in the head instead of `<style>` tags in the body. It has a number of negative consequences, such as the famous "flash of unstyled content" (FOUC) and the re-paint and re-layout required. ([@paales](https://github.com/paales))
+
+## 7.1.0-canary.57
+
+## 7.1.0-canary.56
+
+### Patch Changes
+
+- [#2123](https://github.com/graphcommerce-org/graphcommerce/pull/2123) [`8ad60f255`](https://github.com/graphcommerce-org/graphcommerce/commit/8ad60f255b747858c35dd6b6cf5c90147d960082) - Fixed schema-dts dependency issue ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 7.1.0-canary.55
+
+### Patch Changes
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`da2135744`](https://github.com/graphcommerce-org/graphcommerce/commit/da2135744dddfa0d211c59589090ebb1977c38c9) - Added info icon for Snackbar when severity is set to info ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`d608830ce`](https://github.com/graphcommerce-org/graphcommerce/commit/d608830ce77f85ff725cc106b9fc55a22012c74c) - Added ‘disableBackdropClick’ prop to MessageSnackbar to allow page interaction without closing the snackbar ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`94e1ae811`](https://github.com/graphcommerce-org/graphcommerce/commit/94e1ae811fe9eb0051863e8be91c6399ddcdf22f) - Added DismissibleSnackbar component to allow messages to be shown only once ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`53947d39f`](https://github.com/graphcommerce-org/graphcommerce/commit/53947d39f2f3ee578c14903c96a2b356d99d9475) - Implemented Message variant for RowColumnOne to show an important message which, after dismissing, will not show again ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 7.1.0-canary.54
+
+## 7.1.0-canary.53
+
+## 7.1.0-canary.52
+
+## 7.1.0-canary.51
+
+## 7.1.0-canary.50
+
+## 7.1.0-canary.49
+
+## 7.1.0-canary.48
+
+## 7.1.0-canary.47
+
+## 7.1.0-canary.46
+
+## 7.1.0-canary.45
+
+### Patch Changes
+
+- [#2077](https://github.com/graphcommerce-org/graphcommerce/pull/2077) [`727d1004d`](https://github.com/graphcommerce-org/graphcommerce/commit/727d1004dfcb7dddf6e35b6b157a34491bb05cc6) - Fixed ItemScroller component className. Changed from SidebarSlider to ItemScroller ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 7.1.0-canary.38
+
+### Patch Changes
+
+- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`695f40cf2`](https://github.com/graphcommerce-org/graphcommerce/commit/695f40cf220636d17f04bc9b0ce86c549c740386) - filterNonNullable keys simplified the types which caused unions to be collapsed ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.37
+
+## 7.1.0-canary.36
+
+## 7.1.0-canary.35
+
+## 7.1.0-canary.34
+
+## 7.1.0-canary.33
+
+## 7.1.0-canary.32
+
+## 7.1.0-canary.31
+
+## 7.1.0-canary.30
+
+### Patch Changes
+
+- [#2105](https://github.com/graphcommerce-org/graphcommerce/pull/2105) [`185f9ddeb`](https://github.com/graphcommerce-org/graphcommerce/commit/185f9ddebff0eaf1f388faebe88a5d400294512a) - Fixed bug where the mobile menu wouldn't open after the first selected level ([@mikekeehnen](https://github.com/mikekeehnen))
+
+## 7.1.0-canary.29
+
+## 7.1.0-canary.28
+
+### Minor Changes
+
+- [#2018](https://github.com/graphcommerce-org/graphcommerce/pull/2018) [`750aa6a72`](https://github.com/graphcommerce-org/graphcommerce/commit/750aa6a72710869d54244467253212e551d335e0) - Changed the layout of the succes page. We are using ActionCards right now to match the design of the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.27
+
+## 7.1.0-canary.26
+
+## 7.1.0-canary.25
+
+## 7.1.0-canary.24
+
+## 7.1.0-canary.23
+
+## 7.1.0-canary.22
+
+## 7.1.0-canary.21
+
+## 7.1.0-canary.20
+
+## 7.1.0-canary.19
+
+## 7.1.0-canary.18
+
+## 7.1.0-canary.17
+
+## 7.1.0-canary.16
+
+## 7.1.0-canary.15
+
+## 7.1.0-canary.14
+
+### Patch Changes
+
+- [#2045](https://github.com/graphcommerce-org/graphcommerce/pull/2045) [`1ac1e0989`](https://github.com/graphcommerce-org/graphcommerce/commit/1ac1e09897daadd646200cb3ddc2aa75a51e182e) - Make sure the product image gallery traps focus and scrollbar doesn't disappear suddenly ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 7.1.0-canary.13
+
+## 7.1.0-canary.12
+
+## 7.1.0-canary.11
+
+## 7.1.0-canary.10
+
 ## 7.1.0-canary.9
 
 ## 7.1.0-canary.8
@@ -1434,31 +1589,31 @@
   All occurences of `<Trans>` and `t` need to be replaced:
 
   ```tsx
-  import { Trans, t } from '@lingui/macro'
+  import { Trans, t } from "@lingui/macro";
 
   function MyComponent() {
-    const foo = 'bar'
+    const foo = "bar";
     return (
       <div aria-label={t`Account ${foo}`}>
         <Trans>My Translation {foo}</Trans>
       </div>
-    )
+    );
   }
   ```
 
   Needs to be replaced with:
 
   ```tsx
-  import { Trans } from '@lingui/react'
-  import { i18n } from '@lingui/core'
+  import { Trans } from "@lingui/react";
+  import { i18n } from "@lingui/core";
 
   function MyComponent() {
-    const foo = 'bar'
+    const foo = "bar";
     return (
       <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
-        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+        <Trans key="My Translation {foo}" values={{ foo }}></Trans>
       </div>
-    )
+    );
   }
   ```
 

package/Config.graphqls

@@ -0,0 +1,24 @@
+extend input GraphCommerceConfig {
+  """
+  Configuration for the SidebarGallery component
+  """
+  sidebarGallery: SidebarGalleryConfig
+}
+
+"""
+Enumeration of all possible positions for the sidebar gallery thumbnails.
+"""
+enum SidebarGalleryPaginationVariant {
+  DOTS
+  THUMBNAILS_BOTTOM
+}
+
+"""
+SidebarGalleryConfig will contain all configuration values for the Sidebar Gallery component.
+"""
+input SidebarGalleryConfig {
+  """
+  Variant used for the pagination
+  """
+  paginationVariant: SidebarGalleryPaginationVariant
+}

package/FramerScroller/ItemScroller.tsx

@@ -10,7 +10,7 @@ import { extendableComponent, responsiveVal } from '../Styles'
 import { useFabSize } from '../Theme'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
-const { classes } = extendableComponent('SidebarSlider', [
+const { classes } = extendableComponent('ItemScroller', [
   'root',
   'grid',
   'sidebar',
@@ -21,13 +21,13 @@ const { classes } = extendableComponent('SidebarSlider', [
   'centerRight',
 ] as const)
 
-type SliderProps = {
+export type ItemScrollerProps = {
   children: React.ReactNode
   sx?: SxProps<Theme>
   buttonSize?: ScrollerButtonProps['size']
 } & Pick<ScrollerButtonProps, 'showButtons'>
 
-export function ItemScroller(props: SliderProps) {
+export function ItemScroller(props: ItemScrollerProps) {
   const { children, sx, buttonSize = 'responsive', showButtons } = props
 
   const size = useFabSize(buttonSize)

package/FramerScroller/SidebarGallery.tsx

@@ -3,13 +3,23 @@ import {
   MotionImageAspect,
   MotionImageAspectProps,
   Scroller,
-  ScrollerButton,
-  ScrollerButtonProps,
   ScrollerDots,
+  ScrollerButton,
   ScrollerProvider,
+  unstable_usePreventScroll as usePreventScroll,
+  ScrollerButtonProps,
+  ScrollerThumbnails,
 } from '@graphcommerce/framer-scroller'
 import { dvh } from '@graphcommerce/framer-utils'
-import { Fab, useTheme, Box, styled, SxProps, Theme } from '@mui/material'
+import {
+  Fab,
+  useTheme,
+  Box,
+  styled,
+  SxProps,
+  Theme,
+  Unstable_TrapFocus as TrapFocus,
+} from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
@@ -21,7 +31,7 @@ import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit }
 
 const MotionBox = styled(m.div)({})
 
-type OwnerState = { zoomed: boolean }
+type OwnerState = { zoomed: boolean; disableZoom: boolean }
 const name = 'SidebarGallery' as const
 const parts = [
   'row',
@@ -59,8 +69,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     aspectRatio: [width, height] = [1, 1],
     sx,
     routeHash = 'gallery',
-    disableZoom,
     showButtons,
+    disableZoom = false,
   } = props
 
   const router = useRouter()
@@ -70,6 +80,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
   const route = `#${routeHash}`
   // We're using the URL to manage the state of the gallery.
   const zoomed = router.asPath.endsWith(route)
+  usePreventScroll(zoomed)
 
   // cleanup if someone enters the page with #gallery
   useEffect(() => {
@@ -86,14 +97,13 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     if (!zoomed) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       router.push(route, undefined, { shallow: true })
-      document.body.style.overflow = 'hidden'
       window.scrollTo({ top: 0, behavior: 'smooth' })
     } else {
       router.back()
     }
   }
 
-  const classes = withState({ zoomed })
+  const classes = withState({ zoomed, disableZoom })
   const theme = useTheme()
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
 
@@ -132,8 +142,10 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             {
               willChange: 'transform',
               display: 'grid',
+              gridTemplate: '"left" "right"',
               [theme.breakpoints.up('md')]: {
-                gridTemplateColumns: '1fr auto',
+                // gridTemplateColumns: '1fr auto',
+                gridTemplate: '"left right" / 1fr auto',
               },
               background:
                 theme.palette.mode === 'light'
@@ -152,178 +164,185 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             },
           ]}
         >
-          <MotionBox
-            layout
-            layoutDependency={zoomed}
-            className={classes.scrollerContainer}
-            sx={[
-              {
-                willChange: 'transform',
-                height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
-                backgroundColor: theme.palette.background.image,
-                position: 'relative',
-                paddingTop: `min(${ratio}, ${maxHeight})`,
-                [theme.breakpoints.down('md')]: {
-                  width: '100vw',
-                },
-                [theme.breakpoints.up('md')]: {
-                  height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
-                    theme.spacings.lg
-                  })`,
-                  position: 'sticky',
-                  top: theme.appShell.headerHeightMd,
-                },
-              },
-              zoomed && {
-                position: 'relative',
-                top: 0,
-                marginTop: 0,
-                paddingTop: dvh(100),
-              },
-            ]}
-            onLayoutAnimationComplete={() => {
-              if (!zoomed) document.body.style.overflow = ''
-            }}
-          >
-            <Scroller
-              className={classes.scroller}
-              hideScrollbar
-              onMouseDown={onMouseDownScroller}
-              onMouseUp={onMouseUpScroller}
+          <TrapFocus open={zoomed}>
+            <MotionBox
+              layout
+              layoutDependency={zoomed}
+              className={classes.scrollerContainer}
               sx={[
                 {
+                  gridArea: 'left',
                   willChange: 'transform',
-                  position: 'absolute',
-                  top: 0,
-                  width: '100%',
-                  height: '100%',
-                  gridAutoColumns: `100%`,
-                  gridTemplateRows: `100%`,
-                  cursor: disableZoom ? 'auto' : 'zoom-in',
+                  height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
+                  backgroundColor: theme.palette.background.image,
+                  position: 'relative',
+                  paddingTop: `min(${ratio}, ${maxHeight})`,
+                  [theme.breakpoints.down('md')]: {
+                    width: '100vw',
+                  },
+                  [theme.breakpoints.up('md')]: {
+                    height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
+                      theme.spacings.lg
+                    })`,
+                    position: 'sticky',
+                    top: theme.appShell.headerHeightMd,
+                  },
                 },
                 zoomed && {
-                  height: `var(--client-size-y)`,
-                  cursor: 'inherit',
+                  position: 'relative',
+                  top: 0,
+                  marginTop: 0,
+                  paddingTop: dvh(100),
                 },
               ]}
+              onLayoutAnimationComplete={() => {
+                if (!zoomed) document.body.style.overflow = ''
+              }}
             >
-              {images.map((image, idx) => (
-                <MotionImageAspect
-                  key={typeof image.src === 'string' ? image.src : idx}
+              <Scroller
+                className={classes.scroller}
+                hideScrollbar
+                onMouseDown={onMouseDownScroller}
+                onMouseUp={onMouseUpScroller}
+                sx={[
+                  {
+                    willChange: 'transform',
+                    position: 'absolute',
+                    top: 0,
+                    width: '100%',
+                    height: '100%',
+                    gridAutoColumns: `100%`,
+                    gridTemplateRows: `100%`,
+                    cursor: disableZoom ? 'auto' : 'zoom-in',
+                  },
+                  zoomed && {
+                    height: `var(--client-size-y)`,
+                    cursor: 'inherit',
+                  },
+                ]}
+              >
+                {images.map((image, idx) => (
+                  <MotionImageAspect
+                    key={typeof image.src === 'string' ? image.src : idx}
+                    layout
+                    layoutDependency={zoomed}
+                    src={image.src}
+                    width={image.width}
+                    height={image.height}
+                    loading={idx === 0 ? 'eager' : 'lazy'}
+                    sx={{ display: 'block', objectFit: 'contain' }}
+                    sizes={{
+                      0: '100vw',
+                      [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
+                    }}
+                    alt={image.alt || `Product Image ${idx}` || undefined}
+                    dontReportWronglySizedImages
+                  />
+                ))}
+              </Scroller>
+              <MotionBox
+                layout='position'
+                layoutDependency={zoomed}
+                className={classes.topRight}
+                sx={{
+                  display: 'grid',
+                  gridAutoFlow: 'column',
+                  top: theme.spacings.sm,
+                  gap: theme.spacings.xxs,
+                  position: 'absolute',
+                  right: theme.spacings.sm,
+                }}
+              >
+                {!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}
+                sx={{
+                  display: 'grid',
+                  gridAutoFlow: 'row',
+                  gap: theme.spacings.xxs,
+                  position: 'absolute',
+                  left: theme.spacings.sm,
+                  top: `calc(50% - 28px)`,
+                }}
+              >
+                <ScrollerButton
                   layout
                   layoutDependency={zoomed}
-                  src={image.src}
-                  width={image.width}
-                  height={image.height}
-                  loading={idx === 0 ? 'eager' : 'lazy'}
-                  sx={{ display: 'block', objectFit: 'contain' }}
-                  sizes={{
-                    0: '100vw',
-                    [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
-                  }}
-                  alt={image.alt || `Product Image ${idx}` || undefined}
-                  dontReportWronglySizedImages
-                />
-              ))}
-            </Scroller>
-            <MotionBox
-              layout='position'
-              layoutDependency={zoomed}
-              className={classes.topRight}
-              sx={{
-                display: 'grid',
-                gridAutoFlow: 'column',
-                top: theme.spacings.sm,
-                gap: theme.spacings.xxs,
-                position: 'absolute',
-                right: theme.spacings.sm,
-              }}
-            >
-              {!disableZoom && (
-                <Fab
+                  direction='left'
+                  showButtons={showButtons}
                   size='small'
-                  className={classes.toggleIcon}
-                  disabled={!hasImages}
-                  onMouseUp={toggle}
-                  aria-label='Toggle Fullscreen'
-                  sx={{ boxShadow: 6 }}
+                  className={classes.sliderButtons}
                 >
-                  {!zoomed ? (
-                    <IconSvg src={iconFullscreen} />
-                  ) : (
-                    <IconSvg src={iconFullscreenExit} />
-                  )}
-                </Fab>
-              )}
-            </MotionBox>
-            <Box
-              className={classes.centerLeft}
-              sx={{
-                display: 'grid',
-                gridAutoFlow: 'row',
-                gap: theme.spacings.xxs,
-                position: 'absolute',
-                left: theme.spacings.sm,
-                top: `calc(50% - 28px)`,
-              }}
-            >
-              <ScrollerButton
-                layout
-                layoutDependency={zoomed}
-                direction='left'
-                showButtons={showButtons}
-                size='small'
-                className={classes.sliderButtons}
-              >
-                <IconSvg src={iconChevronLeft} />
-              </ScrollerButton>
-            </Box>
-            <Box
-              className={classes.centerRight}
-              sx={{
-                display: 'grid',
-                gap: theme.spacings.xxs,
-                position: 'absolute',
-                right: theme.spacings.sm,
-                top: `calc(50% - 28px)`,
-              }}
-            >
-              <ScrollerButton
-                layout
-                layoutDependency={zoomed}
-                direction='right'
-                showButtons={showButtons}
-                size='small'
-                className={classes.sliderButtons}
+                  <IconSvg src={iconChevronLeft} />
+                </ScrollerButton>
+              </Box>
+              <Box
+                className={classes.centerRight}
+                sx={{
+                  display: 'grid',
+                  gap: theme.spacings.xxs,
+                  position: 'absolute',
+                  right: theme.spacings.sm,
+                  top: `calc(50% - 28px)`,
+                }}
               >
-                <IconSvg src={iconChevronRight} />
-              </ScrollerButton>
-            </Box>
-
-            <Box
-              className={classes.bottomCenter}
-              sx={{
-                display: 'flex',
-                px: theme.page.horizontal,
-                gap: theme.spacings.xxs,
-                position: 'absolute',
-                bottom: theme.spacings.xxs,
-                justifyContent: 'center',
-                width: '100%',
-                pointerEvents: 'none',
-                '& > *': {
-                  pointerEvents: 'all',
-                },
-              }}
-            >
-              <ScrollerDots layout='position' layoutDependency={zoomed} />
-            </Box>
-          </MotionBox>
+                <ScrollerButton
+                  layout
+                  layoutDependency={zoomed}
+                  direction='right'
+                  showButtons={showButtons}
+                  size='small'
+                  className={classes.sliderButtons}
+                >
+                  <IconSvg src={iconChevronRight} />
+                </ScrollerButton>
+              </Box>
 
+              <Box
+                className={classes.bottomCenter}
+                sx={{
+                  display: 'flex',
+                  gap: theme.spacings.xxs,
+                  position: 'absolute',
+                  bottom: theme.spacings.xxs,
+                  justifyContent: 'center',
+                  width: '100%',
+                  pointerEvents: 'none',
+                  '& > *': {
+                    pointerEvents: 'all',
+                  },
+                }}
+              >
+                {import.meta.graphCommerce.sidebarGallery?.paginationVariant ===
+                'THUMBNAILS_BOTTOM' ? (
+                  <ScrollerThumbnails images={images} />
+                ) : (
+                  <ScrollerDots />
+                )}
+              </Box>
+            </MotionBox>
+          </TrapFocus>
           <Box
             className={classes.sidebarWrapper}
             sx={[
               {
+                gridArea: 'right',
                 boxSizing: 'content-box',
                 display: 'grid',
                 justifyItems: 'start',

package/JsonLd/JsonLd.tsx

@@ -1,8 +1,6 @@
 import Head from 'next/head'
 import { safeJsonLdReplacer } from './safeJsonLdReplacer'
 
-export * as SchemaDts from 'schema-dts'
-
 export function JsonLd<T extends { '@type': string }>(props: {
   item: T & { '@context': 'https://schema.org' }
 }) {

package/Navigation/components/NavigationOverlay.tsx

@@ -178,6 +178,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
             (theme) => ({
               display: 'grid',
               alignItems: !stretchColumns ? 'start' : undefined,
+              justifyContent: 'end',
               [theme.breakpoints.down('md')]: {
                 width:
                   sizeSm !== 'floating'

package/Overlay/components/OverlayBase.tsx

@@ -311,7 +311,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   const handleEscape = (e: KeyboardEvent | Event) => {
     if (active && (e as KeyboardEvent)?.key === 'Escape') closeOverlay()
   }
-  useDomEvent(windowRef, 'keyup', handleEscape, { passive: true })
+  useDomEvent(windowRef, 'keydown', handleEscape, { passive: true })
 
   const dragging = useMotionValue(false)
   const scrollerElementRef = scrollerRef as React.RefObject<HTMLElement>

package/Overlay/components/index.ts

@@ -1,2 +1,3 @@
 export * from './OverlayBase'
 export * from './Overlay'
+export * from './OverlayStickyBottom'

package/Page/CssAndFramerMotionProvider.tsx

@@ -1,9 +1,8 @@
 import { GlobalStyles } from '@mui/material'
 import { LazyMotion } from 'framer-motion'
+import { EmotionProvider, EmotionProviderProps } from '../Styles/EmotionProvider'
 
-export type GraphCommerceProviderProps = {
-  children: React.ReactNode
-}
+export type CssAndFramerMotionProviderProps = EmotionProviderProps
 
 /**
  * For [@emotion/core](https://emotion.sh/docs/introduction) and
@@ -12,22 +11,25 @@ export type GraphCommerceProviderProps = {
  * - Wrapps the app to lazily load framer-motion.
  * - Wrapps the app to have Emotion CSS styles
  */
-export function CssAndFramerMotionProvider({ children }: GraphCommerceProviderProps) {
+export function CssAndFramerMotionProvider(props: CssAndFramerMotionProviderProps) {
+  const { children, emotionCache } = props
   return (
-    <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
-      {children}
-      <GlobalStyles
-        styles={{
-          ':root': {
-            '--client-size-y': '100vh',
-            '--client-size-x': '100vw',
-            '@supports(height: 100dvh)': {
-              '--client-size-y': '100dvh',
-              '--client-size-x': '100dvw',
+    <EmotionProvider emotionCache={emotionCache}>
+      <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
+        {children}
+        <GlobalStyles
+          styles={{
+            ':root': {
+              '--client-size-y': '100vh',
+              '--client-size-x': '100vw',
+              '@supports(height: 100dvh)': {
+                '--client-size-y': '100dvh',
+                '--client-size-x': '100dvw',
+              },
             },
-          },
-        }}
-      />
-    </LazyMotion>
+          }}
+        />
+      </LazyMotion>
+    </EmotionProvider>
   )
 }

package/PageMeta/PageMeta.tsx

@@ -2,8 +2,8 @@ import { usePageContext } from '@graphcommerce/framer-next-pages'
 import { addBasePath } from 'next/dist/client/add-base-path'
 import { addLocale } from 'next/dist/client/add-locale'
 import { getDomainLocale } from 'next/dist/client/get-domain-locale'
+import { resolveHref } from 'next/dist/client/resolve-href'
 import { NextRouter } from 'next/dist/shared/lib/router/router'
-import { resolveHref } from 'next/dist/shared/lib/router/utils/resolve-href'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import type {} from '@graphcommerce/next-config'

package/RenderType/filterNonNullableKeys.ts

@@ -1,26 +1,23 @@
-import type { OptionalKeysOf, Simplify } from 'type-fest'
+import type { OptionalKeysOf } 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 type RequiredKeys<T extends Record<string, unknown>, Keys extends OptionalKeysOf<T>> = 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[] = []) {
+>(
+  items: (T | null | undefined)[] | null | undefined,
+  values: Keys[] = [],
+): RequiredKeys<T, Keys>[] {
   if (!items) return []
 
-  const result = items.filter(
+  return items.filter(
     (item) =>
       item !== null &&
       typeof item !== 'undefined' &&
       values.every((v) => item?.[v] !== null && typeof item?.[v] !== 'undefined'),
-  )
-
-  return result as RequiredKeys<T, Keys>[]
+  ) as RequiredKeys<T, Keys>[]
 }

package/Row/ColumnOne/variant/VariantMessage.tsx

@@ -0,0 +1,12 @@
+import {
+  DismissibleSnackbar,
+  DismissibleSnackbarProps,
+} from '../../../Snackbar/DismissibleSnackbar'
+
+export type VariantMessageProps = DismissibleSnackbarProps
+
+export function VariantMessage(props: VariantMessageProps) {
+  const { ...rest } = props
+
+  return <DismissibleSnackbar variant='pill' severity='info' disableBackdropClick {...rest} />
+}

package/Row/ColumnOne/variant/index.ts

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

package/Row/index.ts

@@ -1,6 +1,7 @@
 export * from './Row'
 export * from './ButtonLinkList'
 export * from './ColumnOne/ColumnOne'
+export * from './ColumnOne/variant'
 export * from './ColumnOneBoxed/ColumnOneBoxed'
 export * from './ColumnOneCentered/ColumnOneCentered'
 export * from './ColumnThree/ColumnThree'

package/Snackbar/DismissibleSnackbar.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { MessageSnackbar } from './MessageSnackbar'
+import { MessageSnackbarProps } from './MessageSnackbarImpl'
+
+export type DismissibleSnackbarProps = MessageSnackbarProps & {
+  id: string
+  storageType?: 'localStorage' | 'sessionStorage'
+}
+export function DismissibleSnackbar(props: DismissibleSnackbarProps) {
+  const { storageType = 'localStorage', id, onClose, ...rest } = props
+  const messageId = `DismissibleSnackbar_${id}`
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    setOpen(!globalThis[storageType]?.getItem(messageId))
+  }, [messageId, storageType])
+
+  return (
+    <MessageSnackbar
+      {...rest}
+      open={open}
+      onClose={() => {
+        globalThis[storageType]?.setItem(messageId, `${Date.now()}`)
+        onClose?.()
+      }}
+    />
+  )
+}

package/Snackbar/MessageSnackbarImpl.tsx

@@ -14,6 +14,7 @@ import React, { useEffect, useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent, breakpointVal } from '../Styles'
 import { iconClose, iconCheckmark, iconSadFace } from '../icons'
+import iconInfo from '../icons/info.svg'
 
 type Size = 'normal' | 'wide'
 type Variant = 'contained' | 'pill'
@@ -34,6 +35,10 @@ type OwnerState = {
   size?: Size
   severity?: 'success' | 'info' | 'warning' | 'error'
   variant?: Variant
+  /**
+   * Setting this to true allows interaction with the rest of the page without closing the Snackbar
+   */
+  disableBackdropClick?: boolean
 }
 
 const name = 'MessageSnackbarImpl' as const
@@ -56,6 +61,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     onClose,
     severity = 'info',
     sx,
+    disableBackdropClick,
     ...snackbarProps
   } = props
 
@@ -65,7 +71,11 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     setShowSnackbar(!!open)
   }, [open])
 
-  const hideSnackbar = () => {
+  const hideSnackbar = (event: React.SyntheticEvent | Event, reason?: string) => {
+    if (disableBackdropClick && reason === 'clickaway') {
+      return
+    }
+
     setShowSnackbar(false)
     onClose?.()
   }
@@ -80,6 +90,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
   }
 
   let icon = iconCheckmark
+  if (severity === 'info') icon = iconInfo
   if (severity === 'error') icon = iconSadFace
 
   return (
@@ -91,7 +102,13 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
         open={showSnackbar}
         autoHideDuration={autoHide ? 5000 : null}
         className={classes.root}
-        sx={sx}
+        sx={[
+          {
+            pointerEvents: 'none',
+            '& > *': { pointerEvents: 'auto' },
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
         onClose={hideSnackbar}
       >
         <SnackbarContent

package/Styles/EmotionProvider.tsx

@@ -1,14 +1,14 @@
-import createCache from '@emotion/cache'
 import type { EmotionCache } from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
+import { createEmotionCache } from './createEmotionCache'
 
-let muiCache: EmotionCache | undefined
-export const createMuiCache = () => {
-  muiCache = createCache({ key: 'mui' })
-  return muiCache
-}
+export type EmotionProviderProps = { children?: React.ReactNode; emotionCache?: EmotionCache }
+
+const clientSideEmotionCache = createEmotionCache()
 
 /** Provider that is supposed to be used in your `pages/_app.tsx` */
-export function EmotionProvider({ children }: { children: React.ReactNode }) {
-  return <CacheProvider value={muiCache ?? createMuiCache()}>{children}</CacheProvider>
+export function EmotionProvider(props: EmotionProviderProps) {
+  const { children, emotionCache = clientSideEmotionCache } = props
+
+  return <CacheProvider value={emotionCache}>{children}</CacheProvider>
 }

package/Styles/createEmotionCache.ts

@@ -0,0 +1,14 @@
+import createCache from '@emotion/cache'
+
+export const createEmotionCache = () => {
+  let insertionPoint: HTMLElement | undefined
+
+  if (typeof window !== 'undefined') {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]',
+    )
+    insertionPoint = emotionInsertionPoint ?? undefined
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint })
+}

package/Styles/withEmotionCache.tsx

@@ -1,36 +1,46 @@
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
 // eslint-disable-next-line @next/next/no-document-import-in-page
+import { AppType } from 'next/app'
 import type NextDocument from 'next/document'
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import type { DocumentContext, DocumentInitialProps } from 'next/document'
-import { createMuiCache } from './EmotionProvider'
+import { EmotionProviderProps } from './EmotionProvider'
+import { createEmotionCache } from './createEmotionCache'
 
 export type EmotionCacheProps = { emotionStyleTags: EmotionJSX.Element[] }
 
 export function withEmotionCache(Document: typeof NextDocument): typeof NextDocument {
   return class DocumentWithEmotionCache extends Document {
     static async getInitialProps(ctx: DocumentContext) {
-      const emotionServer = createEmotionServer(createMuiCache())
-      const initialProps = await Document.getInitialProps(ctx)
+      const cache = createEmotionCache()
+      const emotionServer = createEmotionServer(cache)
+
+      const originalRenderPage = ctx.renderPage
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp:
+            (App: React.ComponentType<React.ComponentProps<AppType> & EmotionProviderProps>) =>
+            (props) => <App emotionCache={cache} {...props} />,
+        })
 
-      const emotionStyleTags = emotionServer
-        .extractCriticalToChunks(initialProps.html)
-        .styles.filter(({ css }) => css !== '')
-        .map((style) => (
-          <style
-            data-emotion={`${style.key} ${style.ids.join(' ')}`}
-            key={style.key}
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: style.css }}
-          />
-        ))
+      const initialProps = await Document.getInitialProps(ctx)
+      // This is important. It prevents Emotion to render invalid HTML.
+      // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
+      const emotionStyles = emotionServer.extractCriticalToChunks(initialProps.html)
+      const emotionStyleTags = emotionStyles.styles.map((style) => (
+        <style
+          data-emotion={`${style.key} ${style.ids.join(' ')}`}
+          key={style.key}
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: style.css }}
+        />
+      ))
 
-      const props: DocumentInitialProps & EmotionCacheProps = {
+      return {
         ...initialProps,
         emotionStyleTags,
       }
-      return props
     }
   }
 }

package/TextInputNumber/TextInputNumber.tsx

@@ -102,6 +102,9 @@ export function TextInputNumber(props: TextInputNumberProps) {
           width: responsiveVal(90, 120),
         },
         {
+          '& input[type=number]': {
+            MozAppearance: 'textfield',
+          },
           '& .MuiOutlinedInput-root': {
             px: '3px',
             display: 'grid',

package/Theme/MuiSnackbar.ts

@@ -22,8 +22,10 @@ export const MuiSnackbar: SnackbarVariants = [
           },
         },
       '&.MuiSnackbar-anchorOriginBottomCenter': {
-        left: 0,
-        right: 0,
+        [theme.breakpoints.up('md')]: {
+          left: theme.page.horizontal,
+          right: theme.page.horizontal,
+        },
         transform: 'unset',
       },
     }),

package/package.json

@@ -2,9 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.1.0-canary.9",
-  "author": "",
-  "license": "MIT",
+  "version": "8.0.0-canary.69",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,30 +16,30 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@graphcommerce/framer-next-pages": "7.1.0-canary.9",
-    "@graphcommerce/framer-scroller": "7.1.0-canary.9",
-    "@graphcommerce/framer-utils": "7.1.0-canary.9",
-    "@graphcommerce/image": "7.1.0-canary.9",
-    "cookie": "^0.5.0",
-    "react-is": "^18.2.0",
-    "schema-dts": "^1.1.0"
+    "cookie": "^0.6.0",
+    "react-is": "^18.2.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "7.1.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "7.1.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "7.1.0-canary.9",
-    "@types/cookie": "^0.5.2",
-    "@types/react-is": "^18.2.1",
-    "typescript": "5.2.2"
+    "@types/cookie": "^0.6.0",
+    "@types/react-is": "^18.2.4",
+    "schema-dts": "^1.1.2",
+    "typescript": "5.3.3"
   },
   "peerDependencies": {
+    "@graphcommerce/eslint-config-pwa": "^8.0.0-canary.69",
+    "@graphcommerce/framer-next-pages": "^8.0.0-canary.69",
+    "@graphcommerce/framer-scroller": "^8.0.0-canary.69",
+    "@graphcommerce/framer-utils": "^8.0.0-canary.69",
+    "@graphcommerce/image": "^8.0.0-canary.69",
+    "@graphcommerce/prettier-config-pwa": "^8.0.0-canary.69",
+    "@graphcommerce/typescript-config-pwa": "^8.0.0-canary.69",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.10.16",
     "framer-motion": "^10.0.0",
-    "next": "^13.2.0",
+    "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }