@graphcommerce/next-ui 3.25.1 → 4.0.0

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -1,168 +1,13 @@
 import { useGo, usePageContext, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import { useElementScroll, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
-import { makeStyles, Theme, capitalize, styled } from '@material-ui/core'
+import { Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue, usePresence, useTransform } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
 import LayoutProvider from '../../Layout/components/LayoutProvider'
-import { UseStyles } from '../../Styles'
-import { classesPicker } from '../../Styles/classesPicker'
+import { extendableComponent } from '../../Styles'
 import { useOverlayPosition } from '../hooks/useOverlayPosition'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    '@global': {
-      body: {
-        overflow: 'hidden',
-      },
-    },
-    root: {
-      display: 'grid',
-      cursor: 'default',
-      overflow: 'auto',
-      height: '100vh',
-      '@supports (-webkit-touch-callout: none)': {
-        height: '-webkit-fill-available',
-      },
-    },
-    rootVariantSmLeft: {
-      [theme.breakpoints.down('sm')]: {
-        gridTemplate: `"overlay beforeOverlay"`,
-        borderTopRightRadius: theme.shape.borderRadius * 3,
-        borderBottomRightRadius: theme.shape.borderRadius * 3,
-      },
-    },
-    rootVariantMdLeft: {
-      [theme.breakpoints.up('md')]: {
-        gridTemplate: `"overlay beforeOverlay"`,
-        borderTopRightRadius: theme.shape.borderRadius * 4,
-        borderBottomRightRadius: theme.shape.borderRadius * 4,
-      },
-    },
-    rootVariantSmRight: {
-      [theme.breakpoints.down('sm')]: {
-        gridTemplate: `"beforeOverlay overlay"`,
-        borderTopLeftRadius: theme.shape.borderRadius * 3,
-        borderBottomLeftRadius: theme.shape.borderRadius * 3,
-      },
-    },
-    rootVariantMdRight: {
-      [theme.breakpoints.up('md')]: {
-        gridTemplate: `"beforeOverlay overlay"`,
-        borderTopLeftRadius: theme.shape.borderRadius * 4,
-        borderBottomLeftRadius: theme.shape.borderRadius * 4,
-      },
-    },
-    rootVariantSmBottom: {
-      [theme.breakpoints.down('sm')]: {
-        borderTopLeftRadius: theme.shape.borderRadius * 3,
-        borderTopRightRadius: theme.shape.borderRadius * 3,
-        gridTemplate: `"beforeOverlay" "overlay"`,
-        height: '100vh',
-        '@supports (-webkit-touch-callout: none)': {
-          height: '-webkit-fill-available',
-        },
-      },
-    },
-    rootVariantMdBottom: {
-      borderTopLeftRadius: theme.shape.borderRadius * 4,
-      borderTopRightRadius: theme.shape.borderRadius * 4,
-      [theme.breakpoints.up('md')]: {
-        gridTemplate: `"beforeOverlay" "overlay"`,
-        height: '100vh',
-      },
-    },
-
-    // Overlay pane styles
-    overlayPane: {},
-
-    overlaySizeSmFloating: {
-      [theme.breakpoints.down('sm')]: {
-        padding: `${theme.page.vertical} ${theme.page.horizontal}`,
-      },
-    },
-    overlaySizeMdFloating: {
-      [theme.breakpoints.up('md')]: {
-        padding: `${theme.page.vertical} ${theme.page.horizontal}`,
-      },
-    },
-    overlayPaneVariantSmBottom: {
-      [theme.breakpoints.down('sm')]: {
-        borderTopLeftRadius: theme.shape.borderRadius * 3,
-        borderTopRightRadius: theme.shape.borderRadius * 3,
-      },
-    },
-    overlayPaneVariantMdBottom: {
-      [theme.breakpoints.up('md')]: {
-        borderTopLeftRadius: theme.shape.borderRadius * 4,
-        borderTopRightRadius: theme.shape.borderRadius * 4,
-      },
-    },
-    overlayPaneSizeSmFloating: {
-      [theme.breakpoints.down('sm')]: {
-        borderRadius: theme.shape.borderRadius * 3,
-      },
-    },
-    overlayPaneSizeMdFloating: {
-      [theme.breakpoints.up('md')]: {
-        borderRadius: theme.shape.borderRadius * 4,
-      },
-    },
-    overlayPaneSmVariantSizeLeftFull: {
-      [theme.breakpoints.down('sm')]: {
-        paddingBottom: 1,
-        minHeight: '100vh',
-        '@supports (-webkit-touch-callout: none)': {
-          minHeight: '-webkit-fill-available',
-        },
-      },
-    },
-    overlayPaneMdVariantSizeLeftFull: {
-      [theme.breakpoints.up('md')]: {
-        paddingBottom: 1,
-        minHeight: '100vh',
-        '@supports (-webkit-touch-callout: none)': {
-          minHeight: '-webkit-fill-available',
-        },
-      },
-    },
-    overlayPaneSmVariantSizeRightFull: {
-      [theme.breakpoints.down('sm')]: {
-        paddingBottom: 1,
-        minHeight: '100vh',
-        '@supports (-webkit-touch-callout: none)': {
-          minHeight: '-webkit-fill-available',
-        },
-      },
-    },
-    overlayPaneMdVariantSizeRightFull: {
-      [theme.breakpoints.up('md')]: {
-        paddingBottom: 1,
-        minHeight: '100vh',
-        scrollSnapAlign: 'end',
-        '@supports (-webkit-touch-callout: none)': {
-          minHeight: '-webkit-fill-available',
-        },
-      },
-    },
-    backdrop: {
-      zIndex: -1,
-      position: 'fixed',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      right: 0,
-      bottom: 0,
-      top: 0,
-      left: 0,
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      WebkitTapHighlightColor: 'transparent',
-      willChange: 'opacity',
-    },
-  }),
-  { name: 'Overlay' },
-)
-
 export type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
 export type LayoutOverlaySize = 'floating' | 'minimal' | 'full'
 export type LayoutOverlayAlign = 'start' | 'end' | 'center' | 'stretch'
@@ -179,8 +24,8 @@ type StyleProps = {
 export type LayoutOverlayBaseProps = {
   children?: React.ReactNode
   className?: string
-} & StyleProps &
-  UseStyles<typeof useStyles>
+  sx?: SxProps<Theme>
+} & StyleProps
 
 enum OverlayPosition {
   UNOPENED = -1,
@@ -188,17 +33,23 @@ enum OverlayPosition {
   CLOSED = 0,
 }
 
+const name = 'LayoutOverlayBase' as const
+const parts = ['scroller', 'backdrop', 'overlay', 'overlayPane', 'beforeOverlay'] as const
+const { withState } = extendableComponent<StyleProps, typeof name, typeof parts>(name, parts)
+
+const MotionDiv = styled(m.div)({})
+
 export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
   const {
     children,
     variantSm,
     variantMd,
-    classes: _classes,
     className,
     sizeSm = 'full',
     sizeMd = 'full',
     justifySm = 'stretch',
     justifyMd = 'stretch',
+    sx = [],
   } = props
 
   const { scrollerRef, snap } = useScrollerContext()
@@ -212,14 +63,13 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
 
   const position = useMotionValue<OverlayPosition>(OverlayPosition.UNOPENED)
 
-  const classes = useStyles({ classes: _classes, sizeSm, sizeMd, justifySm, justifyMd })
-  const clsName = classesPicker(classes, {
+  const classes = withState({
     variantSm,
     variantMd,
     sizeSm,
     sizeMd,
-    smVariantSize: `${variantSm}${capitalize(sizeSm)}`,
-    mdVariantSize: `${variantMd}${capitalize(sizeMd)}`,
+    justifySm,
+    justifyMd,
   })
 
   const overlayRef = useRef<HTMLDivElement>(null)
@@ -317,89 +167,233 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
     [closeOverlay, scrollerRef, snap],
   )
 
-  const Overlay = styled('div')(
-    ({ theme }) => ({
-      display: 'grid',
-      pointerEvents: 'none',
-      gridArea: 'overlay',
-      scrollSnapAlign: 'start',
-
-      [theme.breakpoints.down('sm')]: {
-        justifyContent: justifySm,
-        alignItems: justifySm,
-
-        ...(variantSm === 'bottom' && {
-          marginTop: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
-          paddingTop: `calc(${theme.appShell.headerHeightSm} * 0.5)`,
-        }),
-      },
-      [theme.breakpoints.up('md')]: {
-        justifyContent: justifyMd,
-        alignItems: justifyMd,
-
-        ...(variantMd === 'bottom' && {
-          marginTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * 0.5)`,
-          paddingTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5)`,
+  return (
+    <>
+      <MotionDiv
+        className={classes.backdrop}
+        style={{ opacity: positions.open.visible }}
+        sx={[
+          {
+            zIndex: -1,
+            position: 'fixed',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            right: 0,
+            bottom: 0,
+            top: 0,
+            left: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            WebkitTapHighlightColor: 'transparent',
+            willChange: 'opacity',
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      />
+      <Scroller
+        className={`${classes.scroller} ${className ?? ''}`}
+        grid={false}
+        hideScrollbar
+        onClick={onClickAway}
+        sx={(theme) => ({
           display: 'grid',
-        }),
-      },
-    }),
-    { name: 'Overlay' },
-  )
-
-  const OverlayPane = styled('div')(
-    ({ theme }) => ({
-      pointerEvents: 'all',
-      backgroundColor: theme.palette.background.paper,
-      boxShadow: theme.shadows[24],
-      // scrollSnapAlign: 'end',
-      [theme.breakpoints.down('sm')]: {
-        minWidth: '80vw',
-        ...((sizeSm === 'full' || sizeSm === 'minimal') && { paddingBottom: 56 }),
-        ...(variantSm === 'bottom' && sizeSm === 'full' && { minHeight: 'calc(100vh - 56px)' }),
-      },
-      [theme.breakpoints.up('md')]: {
-        ...(variantMd === 'bottom' && sizeMd === 'full' && { minHeight: '100vh' }),
-        ...(sizeMd === 'full' && { minWidth: 'max(600px, 50vw)' }),
-      },
-    }),
-    { name: 'OverlayPane' },
-  )
-
-  const BeforeOverlay = styled('div')(
-    ({ theme }) => ({
-      gridArea: 'beforeOverlay',
-      scrollSnapAlign: 'start',
-      display: 'grid',
-      alignContent: 'end',
+          '&.canGrab': {
+            cursor: 'default',
+          },
+          '&.mdSnapDirInline': {
+            overflow: 'auto',
+          },
 
-      [theme.breakpoints.down('sm')]: {
-        ...((variantSm === 'left' || variantSm === 'right') && { width: '100vw' }),
-        ...(variantSm === 'bottom' && {
           height: '100vh',
           '@supports (-webkit-touch-callout: none)': {
             height: '-webkit-fill-available',
           },
-        }),
-      },
-      [theme.breakpoints.up('md')]: {
-        ...((variantMd === 'left' || variantMd === 'right') && { width: '100vw' }),
-        ...(variantSm === 'bottom' && { height: '100vh' }),
-      },
-    }),
-    { name: 'BeforeOverlay' },
-  )
 
-  return (
-    <>
-      <m.div {...clsName('backdrop')} style={{ opacity: positions.open.visible }} />
-      <Scroller {...clsName('root')} grid={false} hideScrollbar onClick={onClickAway}>
-        <BeforeOverlay onClick={onClickAway} ref={beforeRef} />
-        <Overlay {...clsName('overlay')} ref={overlayRef}>
-          <OverlayPane {...clsName('overlayPane', className)}>
+          [theme.breakpoints.down('md')]: {
+            '&.variantSmLeft': {
+              gridTemplate: `"overlay beforeOverlay"`,
+              borderTopRightRadius: theme.shape.borderRadius * 3,
+              borderBottomRightRadius: theme.shape.borderRadius * 3,
+            },
+            '&.variantSmRight': {
+              gridTemplate: `"beforeOverlay overlay"`,
+              borderTopLeftRadius: theme.shape.borderRadius * 3,
+              borderBottomLeftRadius: theme.shape.borderRadius * 3,
+            },
+            '&.variantSmBottom': {
+              borderTopLeftRadius: theme.shape.borderRadius * 3,
+              borderTopRightRadius: theme.shape.borderRadius * 3,
+              gridTemplate: `"beforeOverlay" "overlay"`,
+              height: '100vh',
+              '@supports (-webkit-touch-callout: none)': {
+                height: '-webkit-fill-available',
+              },
+            },
+          },
+          [theme.breakpoints.up('md')]: {
+            '&.variantMdLeft': {
+              gridTemplate: `"overlay beforeOverlay"`,
+              borderTopRightRadius: theme.shape.borderRadius * 4,
+              borderBottomRightRadius: theme.shape.borderRadius * 4,
+            },
+            '&.variantMdRight': {
+              gridTemplate: `"beforeOverlay overlay"`,
+              borderTopLeftRadius: theme.shape.borderRadius * 4,
+              borderBottomLeftRadius: theme.shape.borderRadius * 4,
+            },
+            '&.variantMdBottom': {
+              borderTopLeftRadius: theme.shape.borderRadius * 4,
+              borderTopRightRadius: theme.shape.borderRadius * 4,
+              [theme.breakpoints.up('md')]: {
+                gridTemplate: `"beforeOverlay" "overlay"`,
+                height: '100vh',
+              },
+            },
+          },
+        })}
+      >
+        <Box
+          onClick={onClickAway}
+          className={classes.beforeOverlay}
+          ref={beforeRef}
+          sx={(theme) => ({
+            gridArea: 'beforeOverlay',
+            scrollSnapAlign: 'start',
+            display: 'grid',
+            alignContent: 'end',
+
+            [theme.breakpoints.down('md')]: {
+              '&.variantSmLeft, &.variantSmRight': {
+                width: '100vw',
+              },
+              '&.variantSmBottom': {
+                height: '100vh',
+                '@supports (-webkit-touch-callout: none)': {
+                  height: '-webkit-fill-available',
+                },
+              },
+            },
+            [theme.breakpoints.up('md')]: {
+              '&.variantMdLeft, &.variantMdRight': {
+                width: '100vw',
+              },
+              '&.variantMdBottom': {
+                height: '100vh',
+              },
+            },
+          })}
+        />
+        <Box
+          className={classes.overlay}
+          ref={overlayRef}
+          sx={(theme) => ({
+            display: 'grid',
+            pointerEvents: 'none',
+            gridArea: 'overlay',
+            scrollSnapAlign: 'start',
+
+            [theme.breakpoints.down('md')]: {
+              justifyContent: justifySm,
+              alignItems: justifySm,
+
+              '&.variantSmBottom': {
+                marginTop: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
+                paddingTop: `calc(${theme.appShell.headerHeightSm} * 0.5)`,
+              },
+
+              '&.sizeSmFloating': {
+                padding: `${theme.page.vertical} ${theme.page.horizontal}`,
+              },
+            },
+            [theme.breakpoints.up('md')]: {
+              justifyContent: justifyMd,
+              alignItems: justifyMd,
+
+              '&.variantMdBottom': {
+                marginTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * 0.5)`,
+                paddingTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5)`,
+                display: 'grid',
+              },
+              '&.sizeMdFloating': {
+                padding: `${theme.page.vertical} ${theme.page.horizontal}`,
+              },
+            },
+          })}
+        >
+          <Box
+            className={classes.overlayPane}
+            sx={(theme) => ({
+              pointerEvents: 'all',
+              backgroundColor: theme.palette.background.paper,
+              boxShadow: theme.shadows[24],
+              // scrollSnapAlign: 'end',
+              [theme.breakpoints.down('md')]: {
+                minWidth: '80vw',
+
+                '&.sizeSmFull, &.sizeSmMinimal': { paddingBottom: 56 },
+
+                '&.variantSmBottom.sizeSmFull': { minHeight: 'calc(100vh - 56px)' },
+
+                '&.variantSmBottom': {
+                  borderTopLeftRadius: `${theme.shape.borderRadius * 4}px`,
+                  borderTopRightRadius: `${theme.shape.borderRadius * 3}px`,
+                },
+                '&.sizeSmFloating': {
+                  borderRadius: `${theme.shape.borderRadius * 3}px`,
+                },
+                '&.variantSmLeft.sizeSmFull': {
+                  paddingBottom: '1px',
+                  minHeight: '100vh',
+                  '@supports (-webkit-touch-callout: none)': {
+                    minHeight: '-webkit-fill-available',
+                  },
+                },
+                '&.variantSmRight.sizeSmFull': {
+                  paddingBottom: '1px',
+                  minHeight: '100vh',
+                  scrollSnapAlign: 'end',
+                  '@supports (-webkit-touch-callout: none)': {
+                    minHeight: '-webkit-fill-available',
+                  },
+                },
+              },
+              [theme.breakpoints.up('md')]: {
+                '&.sizeMdFull': {
+                  minWidth: 'max(600px, 50vw)',
+                },
+
+                '&.sizeMdFull.variantMdBottom': {
+                  minHeight: `calc(100vh - ${theme.appShell.headerHeightMd})`,
+                },
+                '&.sizeMdFull.variantMdLeft': {
+                  paddingBottom: '1px',
+                  minHeight: '100vh',
+                  '@supports (-webkit-touch-callout: none)': {
+                    minHeight: '-webkit-fill-available',
+                  },
+                },
+                '&.sizeMdFull.variantMdRight': {
+                  paddingBottom: '1px',
+                  minHeight: '100vh',
+                  scrollSnapAlign: 'end',
+                  '@supports (-webkit-touch-callout: none)': {
+                    minHeight: '-webkit-fill-available',
+                  },
+                },
+
+                '&.variantMdBottom': {
+                  borderTopLeftRadius: `${theme.shape.borderRadius * 4}px`,
+                  borderTopRightRadius: `${theme.shape.borderRadius * 4}px`,
+                },
+                '&.sizeMdFloating': {
+                  borderRadius: `${theme.shape.borderRadius * 4}px`,
+                },
+              },
+            })}
+          >
             <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
-          </OverlayPane>
-        </Overlay>
+          </Box>
+        </Box>
       </Scroller>
     </>
   )

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { useCallback } from 'react'
 import { LayoutOverlay, LayoutOverlayProps } from '../components/LayoutOverlay'
 
-export type LayoutOverlayState = Omit<LayoutOverlayProps, 'children' | 'classes'>
+export type LayoutOverlayState = Omit<LayoutOverlayProps, 'children' | 'sx'>
 
 function useQueryState<T extends ParsedUrlQuery>(builder: (query: T) => T) {
   const { query, replace } = useRouter()

package/LayoutParts/DesktopHeaderBadge.tsx

@@ -0,0 +1,28 @@
+import { Badge, BadgeProps } from '@mui/material'
+
+// todo: replace with theming
+export function DesktopHeaderBadge(props: BadgeProps) {
+  const { sx = false } = props
+  return (
+    <Badge
+      {...props}
+      sx={[
+        {
+          '& .MuiBadge-colorError': {
+            bgcolor: 'text.disabled',
+          },
+          '& .MuiBadge-anchorOriginTopRightCircular': {
+            right: { xs: '3px', md: '8px' },
+            top: { xs: '3px', md: '8px' },
+          },
+          '& .MuiBadge-badge': {
+            typography: 'caption',
+            borderRadius: '100%',
+            padding: { xs: '3px', md: '6px' },
+          },
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    />
+  )
+}

package/LayoutParts/DesktopNavActions.tsx

@@ -0,0 +1,15 @@
+import { Box, styled } from '@mui/material'
+
+export const DesktopNavActions = styled(Box, { name: 'DesktopNavActions' })(({ theme }) => ({
+  display: 'none',
+  [theme.breakpoints.up('md')]: {
+    display: 'grid',
+    pointerEvents: 'none !important' as 'none',
+    '& > *': {
+      pointerEvents: 'all',
+    },
+    alignItems: 'center',
+    gridAutoFlow: 'column',
+    columnGap: 6,
+  },
+}))