@graphcommerce/next-ui 7.1.0-canary.8 → 8.0.0-canary.40

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,89 @@
 # Change Log
 
+## 8.0.0-canary.40
+
+### 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.39
+
+## 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
 
 ### Minor Changes

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/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/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/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/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.8",
-  "author": "",
-  "license": "MIT",
+  "version": "8.0.0-canary.40",
   "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.8",
-    "@graphcommerce/framer-scroller": "7.1.0-canary.8",
-    "@graphcommerce/framer-utils": "7.1.0-canary.8",
-    "@graphcommerce/image": "7.1.0-canary.8",
-    "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.8",
-    "@graphcommerce/prettier-config-pwa": "7.1.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "7.1.0-canary.8",
-    "@types/cookie": "^0.5.2",
-    "@types/react-is": "^18.2.1",
+    "@types/cookie": "^0.5.4",
+    "@types/react-is": "^18.2.4",
+    "schema-dts": "^1.1.2",
     "typescript": "5.2.2"
   },
   "peerDependencies": {
+    "@graphcommerce/eslint-config-pwa": "8.0.0-canary.40",
+    "@graphcommerce/framer-next-pages": "8.0.0-canary.40",
+    "@graphcommerce/framer-scroller": "8.0.0-canary.40",
+    "@graphcommerce/framer-utils": "8.0.0-canary.40",
+    "@graphcommerce/image": "8.0.0-canary.40",
+    "@graphcommerce/prettier-config-pwa": "8.0.0-canary.40",
+    "@graphcommerce/typescript-config-pwa": "8.0.0-canary.40",
     "@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"
   }