@graphcommerce/next-ui 10.0.0-canary.67 → 10.0.0-canary.72

package/Navigation/components/NavigationOverlay.tsx

@@ -1,4 +1,5 @@
 import { dvw, useMotionSelector, useMotionValueValue } from '@graphcommerce/framer-utils'
+import { sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Fab, styled, useEventCallback, useTheme } from '@mui/material'
@@ -127,15 +128,15 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
           animating.set(false)
         },
       }}
-      sx={[
+      sx={sxx(
         {
           zIndex: 'drawer',
           '& .LayoutOverlayBase-overlayPane': {
             minWidth: itemWidthMd,
           },
         },
-        ...(Array.isArray(overlaySx) ? overlaySx : [overlaySx]),
-      ]}
+        overlaySx,
+      )}
     >
       <MotionDiv layout layoutDependency={selectionValue} sx={{ display: 'grid' }}>
         <Box
@@ -189,24 +190,16 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
       <MotionDiv layout='position' layoutDependency={selectionValue} sx={{ display: 'grid' }}>
         <Box
           className={classes.wrapper}
-          sx={[
+          sx={sxx(
             (theme) => ({
               display: 'grid',
               alignItems: !stretchColumns ? 'start' : undefined,
               justifyContent: 'end',
               [theme.breakpoints.down('md')]: {
-                width:
-                  sizeSm !== 'floating'
-                    ? itemWidthSm
-                    : `calc(${itemWidthSm} - (${theme.page.horizontal} * 2))`,
                 minWidth: 200,
                 overflow: 'hidden',
                 scrollSnapType: 'x mandatory',
                 '& .NavigationItem-item': {
-                  width:
-                    sizeSm !== 'floating'
-                      ? `calc(${itemWidthSm} - (${itemPad} * 2))`
-                      : `calc(${itemWidthSm} - (${itemPad} * 2) - (${theme.page.horizontal} * 2))`,
                   minWidth: `calc(200px - (${itemPad} * 2))`,
                 },
               },
@@ -216,11 +209,37 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
                 },
               },
             }),
-          ]}
+            sizeSm !== 'floating'
+              ? (theme) => ({
+                  [theme.breakpoints.down('md')]: {
+                    width: itemWidthSm,
+                  },
+                })
+              : (theme) => ({
+                  [theme.breakpoints.down('md')]: {
+                    width: `calc(${itemWidthSm} - (${theme.page.horizontal} * 2))`,
+                  },
+                }),
+            sizeSm !== 'floating'
+              ? (theme) => ({
+                  [theme.breakpoints.down('md')]: {
+                    '& .NavigationItem-item': {
+                      width: `calc(${itemWidthSm} - (${itemPad} * 2))`,
+                    },
+                  },
+                })
+              : (theme) => ({
+                  [theme.breakpoints.down('md')]: {
+                    '& .NavigationItem-item': {
+                      width: `calc(${itemWidthSm} - (${itemPad} * 2) - (${theme.page.horizontal} * 2))`,
+                    },
+                  },
+                }),
+          )}
         >
           <Box
             className={classes.navigation}
-            sx={[
+            sx={sxx(
               {
                 py: itemPad,
                 display: 'grid',
@@ -244,14 +263,14 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
                   boxShadow: 'none',
                 },
               },
-              ...(Array.isArray(sx) ? sx : [sx]),
-            ]}
+              sx,
+            )}
           >
             {selectedLevel >= 0 && (
               <Box
                 sx={(theme) => ({
                   gridArea: '1 / 1 / 999 / 2',
-                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                  boxShadow: `inset 1px 0 ${theme.vars.palette.divider}`,
                 })}
                 className={classes.column}
               />
@@ -260,7 +279,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
               <Box
                 sx={(theme) => ({
                   gridArea: '1 / 2 / 999 / 3',
-                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                  boxShadow: `inset 1px 0 ${theme.vars.palette.divider}`,
                 })}
                 className={classes.column}
               />
@@ -269,7 +288,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
               <Box
                 sx={(theme) => ({
                   gridArea: '1 / 3 / 999 / 4',
-                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                  boxShadow: `inset 1px 0 ${theme.vars.palette.divider}`,
                 })}
                 className={classes.column}
               />
@@ -278,7 +297,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
               <Box
                 sx={(theme) => ({
                   gridArea: '1 / 4 / 999 / 5',
-                  boxShadow: `inset 1px 0 ${theme.palette.divider}`,
+                  boxShadow: `inset 1px 0 ${theme.vars.palette.divider}`,
                 })}
                 className={classes.column}
               />

package/Overlay/components/Overlay.tsx

@@ -5,20 +5,27 @@ import type { SetOptional } from 'type-fest'
 import { variantsToScrollSnapType } from '../utils/variantsToScrollSnapType'
 import type { LayoutOverlayBaseProps } from './OverlayBase'
 import { OverlayBase } from './OverlayBase'
+import type { OverlayContainerProps } from './OverlayContainer'
 import { OverlayContainer } from './OverlayContainer'
 
 export type OverlayTmpProps = Omit<
   SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>,
   'offsetPageY' | 'isPresent' | 'safeToRemove'
->
+> & { overlayContainerProps?: Partial<OverlayContainerProps> }
 
 function OverlayUsePresence(props: OverlayTmpProps) {
-  const { variantSm = 'bottom', variantMd = 'right', active, ...otherProps } = props
+  const {
+    variantSm = 'bottom',
+    variantMd = 'right',
+    active,
+    overlayContainerProps,
+    ...otherProps
+  } = props
   const [isPresent, safeToRemove] = usePresence()
 
   return (
     <Portal>
-      <OverlayContainer active={active}>
+      <OverlayContainer active={active} {...overlayContainerProps}>
         <ScrollerProvider {...variantsToScrollSnapType(props)}>
           <OverlayBase
             active={active}

package/Overlay/components/OverlayBase.tsx

@@ -7,6 +7,7 @@ import {
   useElementScroll,
   useIsomorphicLayoutEffect,
 } from '@graphcommerce/framer-utils'
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, styled, useTheme, useThemeProps } from '@mui/material'
 import type { MotionProps } from 'framer-motion'
@@ -87,7 +88,7 @@ const parts = [
 const { withState } = extendableComponent<StyleProps, typeof name, typeof parts>(name, parts)
 
 /** Expose the component to be exendable in your theme.components */
-declare module '@mui/material/styles/components' {
+declare module '@mui/material/styles' {
   interface Components {
     LayoutOverlayBase?: Pick<ExtendableComponent<OverridableProps & StyleProps>, 'defaultProps'>
   }
@@ -421,7 +422,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         inert={active}
         className={classes.backdrop}
         style={{ opacity: positions.open.visible }}
-        sx={[
+        sx={sxx(
           {
             zIndex: -1,
             position: 'fixed',
@@ -436,8 +437,8 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             WebkitTapHighlightColor: 'transparent',
             willChange: 'opacity',
           },
-          ...(Array.isArray(sxBackdrop) ? sxBackdrop : [sxBackdrop]),
-        ]}
+          sxBackdrop,
+        )}
       />
       <Scroller
         inert={disableInert || active ? false : true}
@@ -446,19 +447,14 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         onClick={onClickAway}
         disableDrag={disableDrag}
         hideScrollbar
-        sx={[
+        sx={sxx(
           (theme) => ({
             overscrollBehavior: 'contain',
             display: 'grid',
             '&.canGrab': {
               cursor: 'default',
             },
-            '&.mdSnapDirInline': {
-              overflow: active ? 'auto' : 'hidden',
-            },
-
             height: dvh(100),
-
             [theme.breakpoints.down('md')]: {
               '&.variantSmLeft, &.variantSmRight': {
                 overscrollBehaviorX: 'none',
@@ -477,7 +473,6 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                 overscrollBehaviorY: 'none',
                 gridTemplate: '"beforeOverlay" "overlay"',
                 height: `calc(${dvh(100)} - 1px)`,
-
                 '&::after': {
                   content: '""',
                   display: 'block',
@@ -486,7 +481,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                   height: '1px',
                   top: 'calc(100% - 1px)',
                   left: '0',
-                  background: theme.palette.background[bgColor],
+                  background: theme.vars.palette.background[bgColor],
                 },
               },
             },
@@ -511,8 +506,19 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
               },
             },
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          active
+            ? {
+                '&.mdSnapDirInline': {
+                  overflow: 'auto',
+                },
+              }
+            : {
+                '&.mdSnapDirInline': {
+                  overflow: 'hidden',
+                },
+              },
+          sx,
+        )}
       >
         <Box
           className={classes.beforeOverlay}
@@ -522,7 +528,6 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             scrollSnapAlign: 'start',
             display: 'grid',
             alignContent: 'end',
-
             [theme.breakpoints.down('md')]: {
               '&.variantSmLeft, &.variantSmRight': {
                 width: dvw(100),
@@ -565,7 +570,6 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             [theme.breakpoints.up('md')]: {
               justifyContent: justifyMd,
               alignItems: justifyMd,
-
               '&.variantMdBottom, &.variantMdTop': {
                 display: 'grid',
               },
@@ -586,14 +590,12 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             ref={overlayPaneRef}
             sx={(theme) => ({
               pointerEvents: 'auto',
-
               [theme.breakpoints.down('md')]: {
                 minWidth: '80vw',
                 overflowY: 'auto',
                 '&:not(.sizeSmFull)': {
                   width: 'auto',
                 },
-
                 '&.variantSmBottom': {
                   maxHeight: `calc(${dvh(100)} - ${smSpacingTop})`,
                   paddingTop: smSpacingTop,
@@ -611,11 +613,9 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                     maxHeight: 'none',
                     borderRadius: 0,
                   },
-
                   borderTopLeftRadius: `${theme.shape.borderRadius * 3}px`,
                   borderTopRightRadius: `${theme.shape.borderRadius * 3}px`,
                 },
-
                 '&.variantSmLeft, &.variantSmRight': {
                   overscrollBehaviorY: 'none',
                   width: widthSm || 'max-content',
@@ -643,7 +643,6 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                 '&.variantMdBottom.sizeMdFloating:not(.justifyMdStretch)': {
                   width: widthMd,
                 },
-
                 '&.variantMdBottom, &.variantMdTop': {
                   maxHeight: `calc(${dvh(100)} - ${mdSpacingTop})`,
                   paddingTop: mdSpacingTop,
@@ -662,7 +661,6 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                     maxHeight: 'none',
                     borderRadius: 0,
                   },
-
                   borderTopLeftRadius: `${theme.shape.borderRadius * 4}px`,
                   borderTopRightRadius: `${theme.shape.borderRadius * 4}px`,
                 },
@@ -686,7 +684,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
             <Box
               className={classes.background}
               sx={(theme) => ({
-                backgroundColor: theme.palette.background[bgColor],
+                backgroundColor: theme.vars.palette.background[bgColor],
                 paddingBottom: '0.1px',
                 [theme.breakpoints.down('md')]: {
                   minHeight: '100%',

package/Overlay/components/OverlayContainer.tsx

@@ -1,30 +1,56 @@
+import { sxx } from '@graphcommerce/next-ui'
+import type { BoxProps } from '@mui/material'
 import { Box } from '@mui/material'
 import type { LayoutOverlayBaseProps } from './OverlayBase'
 
 export type OverlayContainerProps = Pick<LayoutOverlayBaseProps, 'active'> & {
   hidden?: boolean
   children: React.ReactNode
-}
+} & BoxProps
 
 export function OverlayContainer(props: OverlayContainerProps) {
-  const { children, active, hidden } = props
+  const { children, active, hidden, sx, ...rest } = props
 
   return (
     <Box
       className='Overlay'
-      sx={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        transform: hidden ? 'translateX(-200vw)' : undefined,
-        pointerEvents: active ? undefined : 'none',
-        right: 0,
-        bottom: 0,
-        zIndex: 'drawer',
-        '& .LayoutOverlayBase-overlayPane': {
-          boxShadow: active ? undefined : 0,
+      sx={sxx(
+        {
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 'drawer',
         },
-      }}
+        hidden
+          ? {
+              transform: 'translateX(-200vw)',
+            }
+          : {
+              transform: null,
+            },
+        active
+          ? {
+              pointerEvents: null,
+            }
+          : {
+              pointerEvents: 'none',
+            },
+        active
+          ? {
+              '& .LayoutOverlayBase-overlayPane': {
+                boxShadow: null,
+              },
+            }
+          : {
+              '& .LayoutOverlayBase-overlayPane': {
+                boxShadow: 0,
+              },
+            },
+        sx,
+      )}
+      {...rest}
     >
       {children}
     </Box>

package/Overlay/components/OverlayHeader.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import React from 'react'
 import type { LayoutHeaderProps, TitleProps } from '../../Layout'
 import { LayoutTitle } from '../../Layout'
@@ -14,7 +15,7 @@ export function OverlayHeader(props: OverlayHeaderProps) {
   return (
     <LayoutOverlayHeader
       noAlign
-      sx={[{ '&.noAlign': { mb: 0 } }, ...(Array.isArray(sx) ? sx : [sx])]}
+      sx={sxx({ '&.noAlign': { mb: 0 } }, sx)}
       switchPoint={-10000}
       size='responsive'
       hideBackButton

package/Overlay/components/OverlayStickyBottom.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
@@ -15,10 +16,6 @@ export function OverlayStickyBottom(props: {
   const bottom = useTransform(scrollY, (offset) => Math.max(-200, offset > 0 ? 0 : offset))
 
   return (
-    <MotionDiv
-      sx={[{ position: 'sticky', zIndex: 1 }, ...(Array.isArray(sx) ? sx : [sx])]}
-      style={{ bottom }}
-      {...divProps}
-    />
+    <MotionDiv sx={sxx({ position: 'sticky', zIndex: 1 }, sx)} style={{ bottom }} {...divProps} />
   )
 }

package/OverlayOrPopperChip/OverlayOrPopperChip.tsx

@@ -1,5 +1,6 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { ChipProps, SxProps, Theme } from '@mui/material'
-import { Badge, Chip, lighten, Typography, useEventCallback } from '@mui/material'
+import { Badge, Chip, Typography, useEventCallback } from '@mui/material'
 import React, { useState } from 'react'
 import { iconChevronDown, iconChevronUp } from '../icons'
 import { IconSvg } from '../IconSvg'
@@ -75,40 +76,43 @@ export function ChipOverlayOrPopper(props: ChipOverlayOrPopperProps) {
         onClick={useEventCallback((e: React.MouseEvent<HTMLElement>) =>
           setActiveEl((el) => (el !== e.currentTarget ? e.currentTarget : null)),
         )}
-        sx={[
-          (theme) => ({
+        sx={sxx(
+          {
             '& .MuiChip-deleteIcon': {
               ml: '0px',
             },
-            ...(selected
-              ? {
-                  background:
-                    theme.palette.mode === 'light'
-                      ? lighten(theme.palette.primary.main, 1 - theme.palette.action.hoverOpacity)
-                      : lighten(
-                          theme.palette.background.default,
-                          theme.palette.action.hoverOpacity,
-                        ),
+          },
+          selected
+            ? (theme) => ({
+                background: theme.lighten(
+                  theme.vars.palette.primary.main,
+                  1 - theme.vars.palette.action.hoverOpacity,
+                ),
+                border: '1px solid transparent',
+                ...theme.applyStyles('dark', {
+                  background: theme.lighten(
+                    theme.vars.palette.background.default,
+                    theme.vars.palette.action.hoverOpacity,
+                  ),
+                }),
+                '&.MuiChip-clickable:hover': {
+                  background: theme.lighten(
+                    theme.vars.palette.primary.main,
+                    1 - theme.vars.palette.action.hoverOpacity * 2,
+                  ),
                   border: '1px solid transparent',
-                  '&.MuiChip-clickable:hover': {
-                    background:
-                      theme.palette.mode === 'light'
-                        ? lighten(
-                            theme.palette.primary.main,
-                            1 - theme.palette.action.hoverOpacity * 2,
-                          )
-                        : lighten(
-                            theme.palette.background.default,
-                            theme.palette.action.hoverOpacity * 2,
-                          ),
-                    border: '1px solid transparent',
-                  },
-                }
-              : {}),
-          }),
-          ...(Array.isArray(chipSx) ? chipSx : [chipSx]),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+                  ...theme.applyStyles('dark', {
+                    background: theme.lighten(
+                      theme.vars.palette.background.default,
+                      theme.vars.palette.action.hoverOpacity * 2,
+                    ),
+                  }),
+                },
+              })
+            : {},
+          chipSx,
+          sx,
+        )}
       />
       <OverlayOrPopperPanel
         {...panelProps}

package/OverlayOrPopperChip/OverlayPanel.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { Overlay } from '../Overlay/components/Overlay'
 import type { OverlayProps } from '../Overlay/components/OverlaySsr'
 import { nonNullable } from '../RenderType/nonNullable'
@@ -16,17 +17,15 @@ export function OverlayPanel(props: OverlayPanelProps) {
       {...overlayProps}
       onClosed={onClose}
       active={Boolean(activeEl)}
-      sx={[
+      sx={sxx(
         {
           '& .LayoutOverlayBase-overlayPane': {
             display: 'grid',
             gridTemplateRows: 'min-content auto min-content',
           },
         },
-        ...(Array.isArray(overlayProps?.sx) ? overlayProps.sx : [overlayProps?.sx]).filter(
-          nonNullable,
-        ),
-      ]}
+        overlayProps?.sx,
+      )}
     >
       {() => (
         <OverlayPanelActions onClose={onClose} {...rest}>

package/OverlayOrPopperChip/OverlayPanelActions.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import { Box, Button, Fab, Typography } from '@mui/material'
@@ -24,7 +25,7 @@ export function OverlayPanelActions(props: PanelActionsProps) {
     <>
       <LayoutOverlayHeader
         noAlign
-        sx={[{ '&.noAlign': { mb: 0 } }, ...(Array.isArray(sx) ? sx : [sx])]}
+        sx={sxx({ '&.noAlign': { mb: 0 } }, sx)}
         switchPoint={-10000}
         size='small'
         primary={

package/OverlayOrPopperChip/PopperPanelActions.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import { Box, Button, Fab, Typography } from '@mui/material'
@@ -18,7 +19,7 @@ export function PopperPanelActions(props: PanelActionsProps) {
     <>
       <LayoutHeader
         noAlign
-        sx={[{ '&.noAlign': { mb: 0 } }, ...(Array.isArray(sx) ? sx : [sx])]}
+        sx={sxx({ '&.noAlign': { mb: 0 } }, sx)}
         switchPoint={-10000}
         size='small'
         primary={

package/Page/types.ts

@@ -1,8 +1,5 @@
 import type { ParsedUrlQuery } from 'querystring'
 import type { UpPage } from '@graphcommerce/framer-next-pages'
-// todo: remove references to GraphQL
-// eslint-disable-next-line import/no-extraneous-dependencies
-import type { NormalizedCacheObject } from '@graphcommerce/graphql'
 import type {
   GetServerSideProps as GetServerSidePropsNext,
   GetStaticProps as GetStaticPropsNext,
@@ -10,7 +7,7 @@ import type {
 
 type AnyObj = Record<string, unknown>
 
-export type ApolloStateProps = { apolloState: NormalizedCacheObject; up?: UpPage | null }
+export type ApolloStateProps = { apolloState: unknown; up?: UpPage | null }
 
 export type GetStaticProps<
   PL extends AnyObj,

package/Pagination/Pagination.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { PaginationProps, SxProps, Theme } from '@mui/material'
 import { Box, IconButton } from '@mui/material'
@@ -64,7 +65,7 @@ export function Pagination(props: PagePaginationProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           margin: '0 auto',
           marginTop: theme.spacings.lg,
@@ -77,17 +78,19 @@ export function Pagination(props: PagePaginationProps) {
             background: 'none',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {page === 1 ? chevronLeft : renderLink(page - 1, chevronLeft, prevBtnProps)}
-
-      <Box typography='body1'>
+      <Box
+        sx={{
+          typography: 'body1',
+        }}
+      >
         <Trans>
           Page {page} of {max}
         </Trans>
       </Box>
-
       {page === count ? chevronRight : renderLink(page + 1, chevronRight, nextBtnProps)}
     </Box>
   )

package/Pagination/PaginationExtended.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { PaginationProps, PaginationRenderItemParams, SxProps, Theme } from '@mui/material'
 import { Box, Pagination, PaginationItem } from '@mui/material'
 import { iconChevronLeft, iconChevronRight } from '../icons'
@@ -45,7 +46,7 @@ export function PaginationExtended(props: PaginationExtendedProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           margin: '0 auto',
           marginTop: theme.spacings.lg,
@@ -69,8 +70,8 @@ export function PaginationExtended(props: PaginationExtendedProps) {
             },
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Pagination
         count={count}