@graphcommerce/next-ui 3.21.13 → 3.22.1

package/AppShell/AppShellSticky/index.tsx

@@ -1,5 +1,4 @@
 import { Container, makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
 import React from 'react'
 import { UseStyles } from '../../Styles'
 
@@ -7,22 +6,18 @@ const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
       position: 'sticky',
+      top: theme.appShell.headerHeightSm,
       zIndex: 96,
-    },
-    fillMobileOnly: {
       [theme.breakpoints.up('md')]: {
         top: `${theme.page.vertical} !important`,
       },
     },
   }),
-  {
-    name: 'AppShellSticky',
-  },
+  { name: 'AppShellSticky' },
 )
 
 type AppShellStickyBaseProps = {
   children: React.ReactNode
-  headerFill?: 'mobile-only' | 'both'
 }
 
 type AppShellStickyProps = AppShellStickyBaseProps & UseStyles<typeof useStyles>
@@ -32,18 +27,11 @@ type AppShellStickyProps = AppShellStickyBaseProps & UseStyles<typeof useStyles>
  - determines top offset based on header height dynamically
 */
 export default function AppShellSticky(props: AppShellStickyProps) {
-  const { children, headerFill = 'both' } = props
+  const { children } = props
   const classes = useStyles(props)
 
-  // todo
-  const top = 0
-
   return (
-    <Container
-      maxWidth={false}
-      className={clsx(classes.root, headerFill === 'mobile-only' && classes.fillMobileOnly)}
-      style={{ top }}
-    >
+    <Container maxWidth={false} className={classes.root}>
       <>{children}</>
     </Container>
   )

package/AppShell/DesktopNavBar.tsx

@@ -1,9 +1,9 @@
-import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import { Link, LinkProps as MuiLinkProps, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import PageLink from 'next/link'
+import { useRouter } from 'next/router'
 import React from 'react'
 import { UseStyles } from '../Styles'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
@@ -92,7 +92,7 @@ export type MenuTabsProps = MenuProps &
 export default function DesktopNavBar(props: MenuTabsProps) {
   const { menu, LinkProps, iconScrollerBtnLeft, iconScrollerBtnRight } = props
   const classes = useStyles(props)
-  const router = usePageRouter()
+  const router = useRouter()
 
   return (
     <ScrollerProvider scrollSnapAlign='none'>

package/AppShell/Logo.tsx

@@ -1,7 +1,7 @@
-import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { Image, ImageProps } from '@graphcommerce/image'
 import { makeStyles, Theme } from '@material-ui/core'
 import PageLink from 'next/link'
+import { useRouter } from 'next/router'
 import React from 'react'
 import { UseStyles } from '../Styles'
 
@@ -29,7 +29,7 @@ export type LogoProps = { href?: `/${string}`; image: ImageProps } & UseStyles<t
 
 export default function Logo(props: LogoProps) {
   const { href, image } = props
-  const router = usePageRouter()
+  const router = useRouter()
   const classes = useStyles(props)
 
   return router.asPath === '/' ? (

package/CHANGELOG.md

@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.22.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.22.0...@graphcommerce/next-ui@3.22.1) (2022-01-04)
+
+
+### Bug Fixes
+
+* overlay would have a height instead of minHeight ([07dba4b](https://github.com/ho-nl/m2-pwa/commit/07dba4b875a37beac2ab6a8afe50e6b7a7ba1bf9))
+
+
+
+
+
+# [3.22.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.15...@graphcommerce/next-ui@3.22.0) (2022-01-03)
+
+
+### Bug Fixes
+
+* backbutton had wrong label ([c6d0b27](https://github.com/ho-nl/m2-pwa/commit/c6d0b2738e5de734af40bc632177dcc867e8e556))
+* make sure we're able to close the overlay ([8d19fde](https://github.com/ho-nl/m2-pwa/commit/8d19fde07d51493acfdfaa97a19f61246d04d42a))
+
+
+### Features
+
+* add support for minimal overlay size ([96e508a](https://github.com/ho-nl/m2-pwa/commit/96e508a94e23fe5b3ec523cddeb19b7b70f50034))
+* added support for more positioning options for the overlay ([79eae9e](https://github.com/ho-nl/m2-pwa/commit/79eae9eb39513f5611103c4c745c3db99b11f15a))
+* **framer-next-pages:** reduce rerenders when navigating to a new page ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
+
+
+
+
+
+## [3.21.15](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.14...@graphcommerce/next-ui@3.21.15) (2021-12-24)
+
+
+### Bug Fixes
+
+* make sure the filters are aligned properly on mobile ([4bfe978](https://github.com/ho-nl/m2-pwa/commit/4bfe978f095c1b9867608c138eccf3227b18d4e9))
+
+
+
+
+
 ## [3.21.13](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.12...@graphcommerce/next-ui@3.21.13) (2021-12-23)
 
 

package/FramerScroller/components/SidebarGallery.tsx

@@ -1,4 +1,3 @@
-import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
 import {
   MotionImageAspect,
@@ -11,6 +10,7 @@ import {
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Fab, makeStyles, Theme, useTheme, alpha } from '@material-ui/core'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
+import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
 import Row from '../../Row'
 import { UseStyles } from '../../Styles'
@@ -183,7 +183,7 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
     classes: classesBase,
   } = props
 
-  const router = usePageRouter()
+  const router = useRouter()
   const prevRoute = usePrevPageRouter()
   const clientHeight = useMotionValueValue(clientSize.y, (y) => y)
   const classes = useStyles({ clientHeight, aspectRatio, classes: classesBase })

package/Layout/components/LayoutHeader.tsx

@@ -23,8 +23,6 @@ export type LayoutHeaderProps = FloatingProps &
      */
     secondary?: React.ReactNode
 
-    additional?: React.ReactNode
-
     noAlign?: boolean
   }
 
@@ -97,7 +95,7 @@ const useStyles = makeStyles(
 )
 
 export function LayoutHeader(props: LayoutHeaderProps) {
-  const { children, additional, divider, primary, secondary, noAlign, switchPoint } = props
+  const { children, divider, primary, secondary, noAlign, switchPoint } = props
   const classes = useStyles(props)
   const showBack = useShowBack()
   const showClose = useShowClose()
@@ -118,8 +116,8 @@ export function LayoutHeader(props: LayoutHeaderProps) {
 
   if (back) left = back
 
-  if (!left) left = close
-  else if (!right) right = close
+  if (!right) right = close
+  else if (!left) right = close
 
   if (!left && !right && !children) return null
 
@@ -144,7 +142,6 @@ export function LayoutHeader(props: LayoutHeaderProps) {
         switchPoint={switchPoint}
       >
         {children}
-        {additional}
       </LayoutHeaderContent>
     </div>
   )

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,15 +1,17 @@
-import { usePageRouter, useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
+import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
 import { t } from '@lingui/macro'
 import PageLink from 'next/link'
+import { useRouter } from 'next/router'
 import React from 'react'
 import Button, { ButtonProps } from '../../Button'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 import { iconChevronLeft } from '../../icons'
+import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
 
 export type BackProps = Omit<ButtonProps, 'onClick' | 'children'>
 
 export function useShowBack() {
-  const router = usePageRouter()
+  const router = useRouter()
   const up = useUp()
   const prevUp = usePrevUp()
   const { backSteps } = usePageContext()
@@ -22,8 +24,9 @@ export function useShowBack() {
 }
 
 export default function LayoutHeaderBack(props: BackProps) {
-  const router = usePageRouter()
+  const router = useRouter()
   const up = useUp()
+  const prevRouter = usePrevPageRouter()
   const prevUp = usePrevUp()
   const { backSteps } = usePageContext()
 
@@ -31,7 +34,7 @@ export default function LayoutHeaderBack(props: BackProps) {
   const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
 
   if (canClickBack) {
-    const label = up?.href === router.asPath ? up.title : t`Back`
+    const label = up?.href === prevRouter?.asPath ? up?.title : t`Back`
     return (
       <Button
         onClick={() => router.back()}

package/Layout/components/LayoutHeaderClose.tsx

@@ -1,4 +1,4 @@
-import { usePageRouter, usePageContext } from '@graphcommerce/framer-next-pages'
+import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import React from 'react'
 import Button from '../../Button'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
@@ -10,15 +10,15 @@ export function useShowClose() {
 }
 
 export default function LayoutHeaderClose() {
-  const router = usePageRouter()
   const { closeSteps } = usePageContext()
+  const onClick = useGo(closeSteps * -1)
 
   return (
     <Button
       type='button'
-      onClick={() => router.go(closeSteps * -1)}
+      onClick={onClick}
       aria-label='Close'
-      variant='pill-link'
+      variant='text'
       startIcon={<SvgImageSimple src={iconClose} />}
     >
       Close

package/Layout/components/LayoutHeaderContent.tsx

@@ -25,6 +25,8 @@ const useStyles = makeStyles(
       [theme.breakpoints.up('md')]: {
         height: theme.appShell.appBarHeightMd,
       },
+      borderTopLeftRadius: theme.shape.borderRadius * 3,
+      borderTopRightRadius: theme.shape.borderRadius * 3,
     },
     bgDivider: {
       boxShadow: 'unset',
@@ -50,6 +52,7 @@ const useStyles = makeStyles(
       gridTemplateAreas: `"left center right"`,
       gridTemplateColumns: '1fr auto 1fr',
       alignItems: 'center',
+      // columnGap: theme.spacings.xs,
 
       height: theme.appShell.headerHeightSm,
       [theme.breakpoints.up('md')]: {
@@ -104,7 +107,10 @@ const useStyles = makeStyles(
       },
     },
     right: {
-      '& > *': { pointerEvents: 'all' },
+      '& > *': {
+        pointerEvents: 'all',
+        width: 'min-content',
+      },
       display: 'grid',
       gridAutoFlow: 'column',
       gap: theme.spacings.sm,
@@ -168,7 +174,7 @@ export default function LayoutHeaderContent(props: ContentProps) {
     <>
       <div {...className('bg')} />
       <div {...className('content')} ref={ref}>
-        <div {...className('left')}>{left}</div>
+        {left && <div {...className('left')}>{left}</div>}
         <div {...className('center')}>{children}</div>
         <div {...className('right')}>{right}</div>
         {divider && <div {...className('divider')}>{divider}</div>}

package/Layout/components/LayoutTitle.tsx

@@ -20,11 +20,17 @@ const useStyles = makeStyles(
     },
     containerSizeSmall: {
       flexFlow: 'unset',
+      overflow: 'hidden',
       '& svg': {
         width: responsiveVal(24, 28),
         height: responsiveVal(24, 28),
         strokeWidth: 1.4,
       },
+      '& > *': {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+      },
     },
     containerGutterTop: {
       marginTop: theme.spacings.xl,

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -8,7 +8,7 @@ export type { LayoutOverlayVariant } from './LayoutOverlayBase'
 export type LayoutOverlayProps = SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>
 
 export function LayoutOverlay(props: LayoutOverlayProps) {
-  const { children, variantSm = 'bottom', variantMd = 'right', classes } = props
+  const { children, variantSm = 'bottom', variantMd = 'right', classes, ...otherProps } = props
 
   const scrollSnapTypeSm: ScrollSnapType =
     variantSm === 'left' || variantSm === 'right' ? 'inline mandatory' : 'block proximity'
@@ -17,7 +17,12 @@ export function LayoutOverlay(props: LayoutOverlayProps) {
 
   return (
     <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
-      <LayoutOverlayBase variantMd={variantMd} variantSm={variantSm} classes={classes}>
+      <LayoutOverlayBase
+        variantMd={variantMd}
+        variantSm={variantSm}
+        classes={classes}
+        {...otherProps}
+      >
         {children}
       </LayoutOverlayBase>
     </ScrollerProvider>

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -1,7 +1,7 @@
-import { usePageContext, usePageRouter, useScrollOffset } from '@graphcommerce/framer-next-pages'
+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, ClickAwayListener } from '@material-ui/core'
+import { makeStyles, Theme, capitalize, styled } from '@material-ui/core'
 import { m, useDomEvent, useMotionValue, usePresence, useTransform } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
 import LayoutProvider from '../../Layout/components/LayoutProvider'
@@ -72,79 +72,20 @@ const useStyles = makeStyles(
         height: '100vh',
       },
     },
-    beforeOverlay: {
-      gridArea: 'beforeOverlay',
-      scrollSnapAlign: 'start',
-      display: 'grid',
-      alignContent: 'end',
-    },
-    beforeOverlayVariantSmRight: {
-      [theme.breakpoints.down('sm')]: {
-        width: '100vw',
-      },
-    },
-    beforeOverlayVariantMdRight: {
-      [theme.breakpoints.up('md')]: {
-        width: '100vw',
-      },
-    },
 
-    beforeOverlayVariantSmLeft: {
-      [theme.breakpoints.down('sm')]: {
-        width: '100vw',
-      },
-    },
-    beforeOverlayVariantMdLeft: {
-      [theme.breakpoints.up('md')]: {
-        width: '100vw',
-      },
-    },
+    // Overlay pane styles
+    overlayPane: {},
 
-    beforeOverlayVariantMdBottom: {
-      [theme.breakpoints.up('md')]: {
-        height: '100vh',
-      },
-    },
-    beforeOverlayVariantSmBottom: {
-      [theme.breakpoints.down('sm')]: {
-        height: '100vh',
-        '@supports (-webkit-touch-callout: none)': {
-          height: '-webkit-fill-available',
-        },
-      },
-    },
-    overlay: {
-      pointerEvents: 'none',
-      gridArea: 'overlay',
-      scrollSnapAlign: 'start',
-      minHeight: '100vh',
-      '@supports (-webkit-touch-callout: none)': {
-        minHeight: '-webkit-fill-available',
-      },
-    },
-    overlayVariantSmBottom: {
+    overlaySizeSmFloating: {
       [theme.breakpoints.down('sm')]: {
-        marginTop: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
-        paddingTop: `calc(${theme.appShell.headerHeightSm} * 0.5)`,
-        display: 'grid',
+        padding: `${theme.page.vertical} ${theme.page.horizontal}`,
       },
     },
-    overlayVariantMdBottom: {
+    overlaySizeMdFloating: {
       [theme.breakpoints.up('md')]: {
-        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',
+        padding: `${theme.page.vertical} ${theme.page.horizontal}`,
       },
     },
-    overlayPane: {
-      pointerEvents: 'all',
-      backgroundColor: theme.palette.background.paper,
-      boxShadow: theme.shadows[24],
-      minWidth: 'min(800px, 90vw)',
-      scrollSnapAlign: 'end',
-
-      paddingBottom: 56,
-    },
     overlayPaneVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
         borderTopLeftRadius: theme.shape.borderRadius * 3,
@@ -157,7 +98,17 @@ const useStyles = makeStyles(
         borderTopRightRadius: theme.shape.borderRadius * 3,
       },
     },
-    overlayPaneVariantSmLeft: {
+    overlayPaneSizeSmFloating: {
+      [theme.breakpoints.down('sm')]: {
+        borderRadius: theme.shape.borderRadius * 3,
+      },
+    },
+    overlayPaneSizeMdFloating: {
+      [theme.breakpoints.up('md')]: {
+        borderRadius: theme.shape.borderRadius * 3,
+      },
+    },
+    overlayPaneSmVariantSizeLeftFull: {
       [theme.breakpoints.down('sm')]: {
         paddingBottom: 1,
         minHeight: '100vh',
@@ -166,7 +117,7 @@ const useStyles = makeStyles(
         },
       },
     },
-    overlayPaneVariantMdLeft: {
+    overlayPaneMdVariantSizeLeftFull: {
       [theme.breakpoints.up('md')]: {
         paddingBottom: 1,
         minHeight: '100vh',
@@ -175,7 +126,7 @@ const useStyles = makeStyles(
         },
       },
     },
-    overlayPaneVariantSmRight: {
+    overlayPaneSmVariantSizeRightFull: {
       [theme.breakpoints.down('sm')]: {
         paddingBottom: 1,
         minHeight: '100vh',
@@ -184,7 +135,7 @@ const useStyles = makeStyles(
         },
       },
     },
-    overlayPaneVariantMdRight: {
+    overlayPaneMdVariantSizeRightFull: {
       [theme.breakpoints.up('md')]: {
         paddingBottom: 1,
         minHeight: '100vh',
@@ -213,33 +164,61 @@ const useStyles = makeStyles(
 )
 
 export type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
+export type LayoutOverlaySize = 'floating' | 'minimal' | 'full'
+export type LayoutOverlayAlign = 'start' | 'end' | 'center' | 'stretch'
 
-export type LayoutOverlayBaseProps = {
-  children?: React.ReactNode
+type StyleProps = {
   variantSm: LayoutOverlayVariant
   variantMd: LayoutOverlayVariant
-} & UseStyles<typeof useStyles>
+  sizeSm?: LayoutOverlaySize
+  sizeMd?: LayoutOverlaySize
+  justifySm?: LayoutOverlayAlign
+  justifyMd?: LayoutOverlayAlign
+}
 
-export enum OverlayPosition {
+export type LayoutOverlayBaseProps = {
+  children?: React.ReactNode
+} & StyleProps &
+  UseStyles<typeof useStyles>
+
+enum OverlayPosition {
   UNOPENED = -1,
   OPENED = 1,
   CLOSED = 0,
 }
 
 export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
-  const { children, variantSm, variantMd } = props
-  const { scrollerRef } = useScrollerContext()
+  const {
+    children,
+    variantSm,
+    variantMd,
+    classes: _classes,
+    sizeSm = 'full',
+    sizeMd = 'full',
+    justifySm = 'stretch',
+    justifyMd = 'stretch',
+  } = props
+
+  const { scrollerRef, snap } = useScrollerContext()
   const positions = useOverlayPosition()
   const scrollTo = useScrollTo()
   const [isPresent, safeToRemove] = usePresence()
+  const beforeRef = useRef<HTMLDivElement>(null)
 
   const { closeSteps, active, direction } = usePageContext()
-  const pageRouter = usePageRouter()
+  const close = useGo(closeSteps * -1)
 
   const position = useMotionValue<OverlayPosition>(OverlayPosition.UNOPENED)
 
-  const classes = useStyles(props)
-  const className = classesPicker(classes, { variantSm, variantMd })
+  const classes = useStyles({ classes: _classes, sizeSm, sizeMd, justifySm, justifyMd })
+  const className = classesPicker(classes, {
+    variantSm,
+    variantMd,
+    sizeSm,
+    sizeMd,
+    smVariantSize: `${variantSm}${capitalize(sizeSm)}`,
+    mdVariantSize: `${variantMd}${capitalize(sizeMd)}`,
+  })
 
   const overlayRef = useRef<HTMLDivElement>(null)
 
@@ -286,7 +265,6 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
   // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {
     if (isPresent) return
-
     position.set(OverlayPosition.CLOSED)
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     scrollTo({
@@ -299,9 +277,8 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
   const closeOverlay = useCallback(() => {
     if (position.get() !== OverlayPosition.OPENED) return
     position.set(OverlayPosition.CLOSED)
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    pageRouter.go(closeSteps * -1)
-  }, [closeSteps, pageRouter, position])
+    close()
+  }, [close, position])
 
   // Handle escape key
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
@@ -331,25 +308,96 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
   )
 
   const onClickAway = useCallback(
-    (event: React.MouseEvent<Document>) => {
-      if (event.target === document.body && event.type === 'click') return
-      closeOverlay()
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      const isTarget = event.target === scrollerRef.current || event.target === beforeRef.current
+      if (isTarget && snap.get()) closeOverlay()
     },
-    [closeOverlay],
+    [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)`,
+          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',
+
+      [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 {...className('backdrop')} style={{ opacity: positions.open.visible }} />
-      <Scroller {...className('root')} grid={false} hideScrollbar>
-        <div {...className('beforeOverlay')} />
-        <div {...className('overlay')} ref={overlayRef}>
-          <ClickAwayListener onClickAway={onClickAway}>
-            <div {...className('overlayPane')}>
-              <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
-            </div>
-          </ClickAwayListener>
-        </div>
+      <Scroller {...className('root')} grid={false} hideScrollbar onClick={onClickAway}>
+        <BeforeOverlay onClick={onClickAway} ref={beforeRef} />
+        <Overlay {...className('overlay')} ref={overlayRef}>
+          <OverlayPane {...className('overlayPane')}>
+            <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
+          </OverlayPane>
+        </Overlay>
       </Scroller>
     </>
   )

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

@@ -0,0 +1,41 @@
+import { ParsedUrlQuery } from 'querystring'
+import { useRouter } from 'next/router'
+import { useCallback } from 'react'
+import { LayoutOverlay, LayoutOverlayProps } from '../components/LayoutOverlay'
+
+export type LayoutOverlayState = Omit<LayoutOverlayProps, 'children' | 'classes'>
+
+function useQueryState<T extends ParsedUrlQuery>(builder: (query: T) => T) {
+  const { query, replace } = useRouter()
+  const queryState = builder(query as T)
+
+  const setRouterQuery = (partialQuery: T) => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    replace({ query: { ...queryState, ...partialQuery } }, undefined, { shallow: true })
+  }
+  return [queryState, setRouterQuery] as const
+}
+
+export function useLayoutState() {
+  const [routerQuery, setRouterQuery] = useQueryState<LayoutOverlayState>(
+    useCallback(
+      ({ sizeMd, sizeSm, justifyMd, justifySm, variantMd, variantSm }) => ({
+        sizeMd,
+        sizeSm,
+        justifyMd,
+        justifySm,
+        variantMd,
+        variantSm,
+      }),
+      [],
+    ),
+  )
+
+  return [routerQuery, setRouterQuery] as const
+}
+
+export function LayoutOverlayDemo({ children }: { children?: React.ReactNode }) {
+  const [layout] = useLayoutState()
+
+  return <LayoutOverlay {...layout}>{children}</LayoutOverlay>
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.21.13",
+  "version": "3.22.1",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.9",
-    "@graphcommerce/framer-scroller": "^1.1.23",
-    "@graphcommerce/framer-utils": "^2.103.20",
-    "@graphcommerce/graphql": "^2.105.12",
-    "@graphcommerce/image": "^2.105.11",
+    "@graphcommerce/framer-next-pages": "^2.109.1",
+    "@graphcommerce/framer-scroller": "^1.2.1",
+    "@graphcommerce/framer-utils": "^2.103.21",
+    "@graphcommerce/graphql": "^2.105.13",
+    "@graphcommerce/image": "^2.105.13",
     "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -25,7 +25,6 @@
     "next": "^12.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-focus-lock": "^2.7.1",
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.0.0",
@@ -33,7 +32,7 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.3",
-    "@graphcommerce/eslint-config-pwa": "^3.1.9",
+    "@graphcommerce/eslint-config-pwa": "^3.1.10",
     "@graphcommerce/prettier-config-pwa": "^3.0.5",
     "@graphcommerce/typescript-config-pwa": "^3.1.2",
     "@playwright/test": "^1.17.1",
@@ -52,5 +51,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "2c255f0b276983c31b7c727743f93c1ae558b4c5"
+  "gitHead": "ddea6bd034cb06864b33fc4d8af9a3b5dad1c914"
 }