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

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: { xs: 0, md: 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/LayoutDefault/components/LayoutDefault.tsx

@@ -3,6 +3,7 @@ import { dvh } from '@graphcommerce/framer-utils'
 import { Box, SxProps, Theme } from '@mui/material'
 import { useTransform, useScroll } from 'framer-motion'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
+import { SkipLink } from '../../SkipLink/SkipLink'
 import { extendableComponent } from '../../Styles'
 import { useFabSize } from '../../Theme'
 
@@ -67,6 +68,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
+      <SkipLink />
       <LayoutProvider scroll={scrollYOffset}>
         {beforeHeader}
         <Box
@@ -144,7 +146,10 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         ) : (
           <div />
         )}
-        <div className={classes.children}>{children}</div>
+        <div className={classes.children}>
+          <div id='skip-nav' tabIndex={-1} />
+          {children}
+        </div>
         <div className={classes.footer}>{footer}</div>
       </LayoutProvider>
     </Box>

package/LayoutParts/DesktopNavBar.tsx

@@ -69,6 +69,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
           }}
           direction='left'
           size='small'
+          tabIndex={-1}
           className={`${classes.left} ${classes.button}`}
         >
           <IconSvg src={iconLeft ?? iconChevronLeft} />
@@ -94,6 +95,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
           }}
           direction='right'
           size='small'
+          tabIndex={-1}
           className={`${classes.right} ${classes.button}`}
         >
           <IconSvg src={iconRight ?? iconChevronRight} />

package/LayoutParts/Logo.tsx

@@ -5,6 +5,7 @@ import {
   SxProps,
   Theme,
   unstable_composeClasses as composeClasses,
+  Box,
 } from '@mui/material'
 import { useRouter } from 'next/router'
 import { forwardRef } from 'react'
@@ -22,12 +23,7 @@ const getLogoUtilityClass = (slot: string) => generateUtilityClass(name, slot)
 const useUtilityClasses = ({ classes }: LogoClassProps) =>
   composeClasses({ logo: ['logo'], parent: ['parent'] }, getLogoUtilityClass, classes)
 
-/** Creating styled components */
-const LogoContainer = styled(NextLink, {
-  name,
-  slot: 'parent',
-  overridesResolver: (_props, styles) => styles.parent,
-})(({ theme }) => ({
+const commonLogoStyles: SxProps<Theme> = {
   height: '100%',
   width: 'max-content',
   display: 'flex',
@@ -35,12 +31,13 @@ const LogoContainer = styled(NextLink, {
   margin: '0 auto',
   justifyContent: 'center',
   pointerEvents: 'all',
-  [theme.breakpoints.up('md')]: {
-    display: 'flex',
-    margin: 'unset',
-    justifyContent: 'left',
-  },
-}))
+}
+
+const LogoContainer = styled(NextLink, {
+  name,
+  slot: 'parent',
+  overridesResolver: (_props, styles) => styles.parent,
+})({})
 
 export type LogoProps = {
   href?: `/${string}`
@@ -51,7 +48,6 @@ export type LogoProps = {
 export const Logo = forwardRef<HTMLAnchorElement, LogoProps>((props, ref) => {
   const { href = '/', image, sx } = props
   const router = useRouter()
-
   const classes = useUtilityClasses(props)
 
   const img = (
@@ -63,13 +59,17 @@ export const Logo = forwardRef<HTMLAnchorElement, LogoProps>((props, ref) => {
     />
   )
 
-  return router.asPath.split('?')[0] === '/' ? (
-    <LogoContainer ref={ref} sx={sx} className={classes.parent}>
-      {img}
-    </LogoContainer>
-  ) : (
-    <LogoContainer href={href} ref={ref} sx={sx} className={classes.parent}>
+  const shouldRedirect = router.asPath.split('?')[0] !== href
+
+  return (
+    <Box
+      component={shouldRedirect ? LogoContainer : 'div'}
+      href={shouldRedirect ? href : undefined}
+      ref={ref}
+      sx={[...(Array.isArray(sx) ? sx : [sx]), commonLogoStyles]}
+      className={classes.parent}
+    >
       {img}
-    </LogoContainer>
+    </Box>
   )
 })

package/LazyHydrate/LazyHydrate.tsx

@@ -0,0 +1,72 @@
+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 = {
+  /**
+   * The content is always rendered on the server and on the client it uses the server rendered HTML until it is hydrated.
+   */
+  children: React.ReactNode
+
+  /**
+   * When a boolean is provided, the IntersectionObserver is disabled and hydrates the component when the value becomes true.
+   *
+   * For example:
+   * - Disable the hydration functionality completely: `<LazyHydrate hydrated={true}>`
+   * - Hydrate the component on some state `<LazyHydrate hydrated={someState}>` where someState initially is false and later becomes true.
+   */
+  hydrated?: boolean
+}
+
+/**
+ * LazyHydrate can defer the hydration of a component until it becomes visible.
+ * OR manually by using the hydrated prop.
+ * 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 [isHydrated, setIsHydrated] = useState(hydrated || false)
+  if (!isHydrated && hydrated) setIsHydrated(true)
+
+  useLayoutEffect2(() => {
+    // If we are manually hydrating, we watch that value and do not use the IntersectionObserver
+    if (isHydrated || !rootRef.current) return undefined
+
+    // If the element wasn't rendered on the server, we hydrate it immediately
+    if (!rootRef.current?.hasAttribute('data-lazy-hydrate')) {
+      setIsHydrated(true)
+      return undefined
+    }
+
+    // The user has opted to manually hydrate the component
+    if (hydrated !== undefined) return undefined
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && entry.intersectionRatio > 0) {
+          startTransition(() => setIsHydrated(true))
+        }
+      },
+      { rootMargin: '200px' },
+    )
+    observer.observe(rootRef.current)
+
+    return () => observer.disconnect()
+  }, [hydrated, isHydrated])
+
+  if (isHydrated) {
+    return <section>{children}</section>
+  }
+
+  if (typeof window === 'undefined') {
+    return <section data-lazy-hydrate>{children}</section>
+  }
+
+  return (
+    // eslint-disable-next-line react/no-danger
+    <section ref={rootRef} dangerouslySetInnerHTML={{ __html: '' }} suppressHydrationWarning />
+  )
+}

package/LazyHydrate/index.ts

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