@graphcommerce/next-ui 7.0.0-canary.21 → 7.0.0

package/Footer/Footer.tsx

@@ -65,63 +65,71 @@ export function Footer(props: FooterProps) {
       className={classes.root}
       {...containerProps}
     >
-      <Box
-        sx={(theme) => ({
-          display: 'grid',
-          justifyContent: 'start',
-          gridAutoFlow: 'column',
-          gridArea: 'social',
-          gap: { xs: `0 ${theme.spacings.xs}`, md: `0 ${theme.spacings.xs}` },
-          '& > *': {
-            minWidth: 'min-content',
-          },
-        })}
-        className={classes.social}
-      >
-        {socialLinks}
-      </Box>
-      <Box
-        sx={(theme) => ({
-          gridArea: 'switcher',
-          justifySelf: 'end',
-          [theme.breakpoints.down('md')]: {
-            justifySelf: 'center',
-          },
-        })}
-        className={classes.storeSwitcher}
-      >
-        {storeSwitcher}
-      </Box>
-      <Box
-        sx={(theme) => ({
-          gridArea: 'support',
-          justifySelf: 'flex-end',
-          [theme.breakpoints.down('md')]: {
-            justifySelf: 'center',
-          },
-        })}
-        className={classes.support}
-      >
-        {customerService}
-      </Box>
-      <Box
-        sx={(theme) => ({
-          typography: 'body2',
-          display: 'grid',
-          gridAutoFlow: 'column',
-          alignContent: 'center',
-          gridArea: 'links',
-          gap: theme.spacings.sm,
-          [theme.breakpoints.down('md')]: {
-            gridAutoFlow: 'row',
-            textAlign: 'center',
-            gap: `8px`,
-          },
-        })}
-        className={classes.copyright}
-      >
-        {copyright}
-      </Box>
+      {socialLinks && (
+        <Box
+          sx={(theme) => ({
+            display: 'grid',
+            justifyContent: 'start',
+            gridAutoFlow: 'column',
+            gridArea: 'social',
+            gap: { xs: `0 ${theme.spacings.xs}`, md: `0 ${theme.spacings.xs}` },
+            '& > *': {
+              minWidth: 'min-content',
+            },
+          })}
+          className={classes.social}
+        >
+          {socialLinks}
+        </Box>
+      )}
+      {storeSwitcher && (
+        <Box
+          sx={(theme) => ({
+            gridArea: 'switcher',
+            justifySelf: 'end',
+            [theme.breakpoints.down('md')]: {
+              justifySelf: 'center',
+            },
+          })}
+          className={classes.storeSwitcher}
+        >
+          {storeSwitcher}
+        </Box>
+      )}
+      {customerService && (
+        <Box
+          sx={(theme) => ({
+            gridArea: 'support',
+            justifySelf: 'flex-end',
+            [theme.breakpoints.down('md')]: {
+              justifySelf: 'center',
+            },
+          })}
+          className={classes.support}
+        >
+          {customerService}
+        </Box>
+      )}
+      {copyright && (
+        <Box
+          sx={(theme) => ({
+            typography: 'body2',
+            display: 'grid',
+            gridAutoFlow: 'column',
+            alignContent: 'center',
+            gridArea: 'links',
+            gap: theme.spacings.sm,
+            [theme.breakpoints.down('md')]: {
+              gridAutoFlow: 'row',
+              textAlign: 'center',
+              gap: `8px`,
+            },
+          })}
+          className={classes.copyright}
+        >
+          {copyright}
+        </Box>
+      )}
     </Container>
   )
 }

package/FramerScroller/SidebarGallery.tsx

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

package/IconSvg/IconSvg.tsx

@@ -53,37 +53,35 @@ export function useIconSvgSize(size: keyof typeof sizes) {
   return sizes[size]
 }
 
-const Svg = styled('svg', { name, target: name })(() => [
-  {
-    userSelect: 'none',
-    width: '1em',
-    height: '1em',
-    display: 'inline-block',
-
-    strokeLinecap: 'square',
-    strokeLinejoin: 'miter',
-    strokeMiterlimit: 4,
-
-    fill: 'none',
-    stroke: 'currentColor',
-
-    fontSize: '1.3em',
-
-    strokeWidth: svgIconStrokeWidth(28, 148, 1.4, 0.8),
-
-    '&.sizeXs': { fontSize: sizes.xs },
-    '&.sizeSmall': { fontSize: sizes.small },
-    '&.sizeMedium': { fontSize: sizes.medium },
-    '&.sizeLarge': { fontSize: sizes.large },
-    '&.sizeXl': { fontSize: sizes.xl },
-    '&.sizeXxl': { fontSize: sizes.xxl },
-
-    '&.fillIcon': {
-      fill: 'currentColor',
-      stroke: 'none',
-    },
+const Svg = styled('svg', { name, target: name })(() => ({
+  userSelect: 'none',
+  width: '1em',
+  height: '1em',
+  display: 'inline-block',
+
+  strokeLinecap: 'square',
+  strokeLinejoin: 'miter',
+  strokeMiterlimit: 4,
+
+  fill: 'none',
+  stroke: 'currentColor',
+
+  fontSize: '1.3em',
+
+  strokeWidth: svgIconStrokeWidth(28, 148, 1.4, 0.8),
+
+  '&.sizeXs': { fontSize: sizes.xs },
+  '&.sizeSmall': { fontSize: sizes.small },
+  '&.sizeMedium': { fontSize: sizes.medium },
+  '&.sizeLarge': { fontSize: sizes.large },
+  '&.sizeXl': { fontSize: sizes.xl },
+  '&.sizeXxl': { fontSize: sizes.xxl },
+
+  '&.fillIcon': {
+    fill: 'currentColor',
+    stroke: 'none',
   },
-])
+}))
 
 /**
  * IconSvg component is supposed to be used in combination with `icons`

package/Layout/components/LayoutHeader.tsx

@@ -26,6 +26,8 @@ export type LayoutHeaderProps = FloatingProps &
     noAlign?: boolean
 
     sx?: SxProps<Theme>
+
+    hideBackButton?: boolean
   }
 
 type ComponentStyleProps = {
@@ -46,6 +48,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
   const {
     children,
     divider,
+    hideBackButton = false,
     primary,
     secondary,
     noAlign = false,
@@ -54,7 +57,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
     sx = [],
     bgColor,
   } = props
-  const showBack = useShowBack()
+  const showBack = useShowBack() && !hideBackButton
   const showClose = useShowClose()
 
   const floatFallback = !children

package/LayoutOverlay/components/LayoutOverlayHeader.tsx

@@ -1,11 +1,12 @@
 import { LayoutHeaderProps, LayoutHeader } from '../../Layout'
 
 export function LayoutOverlayHeader(props: LayoutHeaderProps) {
-  const { sx } = props
+  const { sx, switchPoint } = props
   return (
     <LayoutHeader
       {...props}
       noAlign
+      switchPoint={switchPoint !== 0 ? switchPoint : -1000}
       sx={[
         (theme) => ({
           [theme.breakpoints.down('md')]: {

package/LayoutParts/StickyBelowHeader.tsx

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

package/Navigation/hooks/useNavigation.ts

@@ -95,6 +95,7 @@ export function useNavigation() {
  * }
  * ```
  */
+
 export function useNavigationSelection(): UseNavigationSelection {
   return useMotionValue<NavigationPath | false>(false)
 }

package/Overlay/components/OverlayBase.tsx

@@ -13,9 +13,9 @@ import {
   motionValue,
   useDomEvent,
   useMotionValue,
+  useMotionValueEvent,
   useTransform,
 } from 'framer-motion'
-import framesync from 'framesync'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { ExtendableComponent, extendableComponent } from '../../Styles'
@@ -196,7 +196,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         scroller.scrollLeft = scroll.x.getPrevious()
         scroller.scrollTop = scroll.y.getPrevious()
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        scrollTo(openClosePositions().open)
+        scrollTo(openClosePositions().open, { stopAnimationOnScroll: false })
       }
     }
 
@@ -281,7 +281,9 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
     if (position.get() !== OverlayPosition.OPENED && !scroll.animating.get()) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      scrollTo(openClosePositions().open).then(() => position.set(OverlayPosition.OPENED))
+      scrollTo(openClosePositions().open, { stopAnimationOnScroll: false }).then(() =>
+        position.set(OverlayPosition.OPENED),
+      )
     }
   }, [isPresent, openClosePositions, position, scroll.animating, scrollTo, scrollerRef, variant])
 
@@ -291,7 +293,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     if (isPresent || !scroller) return
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    scrollTo(openClosePositions().closed).then(() => {
+    scrollTo(openClosePositions().closed, { stopAnimationOnScroll: false }).then(() => {
       safeToRemove?.()
       document.body.style.overflow = ''
     })
@@ -311,10 +313,28 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   }
   useDomEvent(windowRef, 'keyup', handleEscape, { passive: true })
 
+  const dragging = useMotionValue(false)
+  const scrollerElementRef = scrollerRef as React.RefObject<HTMLElement>
+
+  const handleDragStart = () => {
+    dragging.set(true)
+  }
+  const handleDragEnd = () => {
+    dragging.set(false)
+    // When releasing pointer and visibility 0 (overlay is dragged offscreen), close the overlay
+    if (positions.open.visible.get() === 0) closeOverlay()
+  }
+
+  useDomEvent(scrollerElementRef, 'pointerdown', handleDragStart, { passive: true })
+  useDomEvent(scrollerElementRef, 'pointerup', handleDragEnd, { passive: true })
+  // We use touchend as well as pointerup, because scrolling (dragging the overlay) on mobile causes pointercancel to fire, preventing pointerup from ever firing
+  useDomEvent(scrollerElementRef, 'touchend', handleDragEnd, { passive: true })
+
   // When the overlay isn't visible anymore, we navigate back.
-  useEffect(
-    () => positions.open.visible.on('change', (o) => o === 0 && closeOverlay()),
-    [closeOverlay, position, positions.open.visible],
+  useMotionValueEvent(
+    positions.open.visible,
+    'change',
+    (o) => o === 0 && !dragging.get() && closeOverlay(),
   )
 
   // Measure the offset of the overlay in the scroller.
@@ -469,9 +489,14 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
           sx={(theme) => ({
             display: 'grid',
             gridArea: 'overlay',
-            scrollSnapAlign: 'start',
             scrollSnapStop: 'always',
             pointerEvents: 'none',
+            '&.variantMdBottom, &.variantMdRight': {
+              scrollSnapAlign: 'end',
+            },
+            '&.variantMdLeft': {
+              scrollSnapAlign: 'start',
+            },
             [theme.breakpoints.down('md')]: {
               justifyContent: justifySm,
               alignItems: justifySm,

package/OverlayOrPopperChip/OverlayPanelActions.tsx

@@ -24,7 +24,7 @@ export const OverlayPanelActions = (props: PanelActionsProps) => {
     <>
       <LayoutOverlayHeader
         noAlign
-        sx={{ '&.noAlign': { mb: 0 } }}
+        sx={[{ '&.noAlign': { mb: 0 } }, ...(Array.isArray(sx) ? sx : [sx])]}
         switchPoint={-10000}
         size='small'
         primary={

package/OverlayOrPopperChip/PopperPanel.tsx

@@ -10,7 +10,7 @@ export type PopperPanelProps = PanelProps & {
 
 export function PopperPanel(props: PopperPanelProps) {
   const { activeEl, children, ...actionsProps } = props
-  const ref = useRef(null)
+  const ref = useRef<HTMLDivElement>(null)
   const movement = useHandleClickNotDrag(ref)
   const handleClickAway = () => {
     if (movement.get() === 'drag') return

package/OverlayOrPopperChip/PopperPanelActions.tsx

@@ -9,7 +9,7 @@ import { iconClose } from '../icons'
 import { PanelActionsProps } from './types'
 
 export function PopperPanelActions(props: PanelActionsProps) {
-  const { title, children, onReset, onClose, onApply, sx } = props
+  const { title, children, onReset, onClose, onApply, sx = [] } = props
 
   const fabSize = useFabSize('small')
   const svgSize = useIconSvgSize('large')
@@ -18,7 +18,7 @@ export function PopperPanelActions(props: PanelActionsProps) {
     <>
       <LayoutHeader
         noAlign
-        sx={{ '&.noAlign': { mb: 0 } }}
+        sx={[{ '&.noAlign': { mb: 0 } }, ...(Array.isArray(sx) ? sx : [sx])]}
         switchPoint={-10000}
         size='small'
         primary={

package/PageMeta/PageMeta.tsx

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

package/Pagination/Pagination.tsx

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

package/RenderType/RenderType.tsx

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

package/Row/IconBlocks/IconBlock.tsx

@@ -14,37 +14,40 @@ const name = 'IconBlock' as const
 const parts = ['block', 'link', 'title'] as const
 const { classes } = extendableComponent(name, parts)
 
-export const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((props, ref) => {
-  const { title, children, icon, href = '#', sx = [], ...buttonProps } = props
+export const IconBlock = React.forwardRef<HTMLAnchorElement & HTMLButtonElement, IconBlockProps>(
+  (props, ref) => {
+    const { title, children, icon, href = '#', sx = [], ...buttonProps } = props
 
-  return (
-    <Button
-      href={href}
-      variant='outlined'
-      color='primary'
-      className={classes.block}
-      {...buttonProps}
-      sx={[
-        (theme) => ({
-          padding: `${theme.spacings.sm}`,
-          textAlign: 'center',
-          '& > *': {
-            display: 'grid',
-            gridAutoFlow: 'row',
-            justifyItems: 'center',
-            gap: `${theme.spacings.xxs}`,
-          },
-        }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
-      <Box>
-        {icon}
-        <Typography variant='subtitle1' className={classes.title} component='span'>
-          {title}
-        </Typography>
-        {children}
-      </Box>
-    </Button>
-  )
-})
+    return (
+      <Button
+        ref={ref}
+        href={href}
+        variant='outlined'
+        color='primary'
+        className={classes.block}
+        {...buttonProps}
+        sx={[
+          (theme) => ({
+            padding: `${theme.spacings.sm}`,
+            textAlign: 'center',
+            '& > *': {
+              display: 'grid',
+              gridAutoFlow: 'row',
+              justifyItems: 'center',
+              gap: `${theme.spacings.xxs}`,
+            },
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        <Box>
+          {icon}
+          <Typography variant='subtitle1' className={classes.title} component='span'>
+            {title}
+          </Typography>
+          {children}
+        </Box>
+      </Button>
+    )
+  },
+)