@graphcommerce/next-ui 3.21.15 → 3.23.0

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,65 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.23.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.22.2...@graphcommerce/next-ui@3.23.0) (2022-01-04)
+
+
+### Bug Fixes
+
+* backbutton wasn't translated ([5f841c0](https://github.com/ho-nl/m2-pwa/commit/5f841c052b454c0d565a68829f78492c5a3b6dab))
+
+
+### Features
+
+* introduced a withTheme hoc to allow theming per route ([55e3fc1](https://github.com/ho-nl/m2-pwa/commit/55e3fc178b385d0ccdc19a5c09a7887be5db14dc))
+
+
+
+
+
+## [3.22.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.22.1...@graphcommerce/next-ui@3.22.2) (2022-01-04)
+
+
+### Bug Fixes
+
+* broder radius of drawer was too small on desktop ([f8b3962](https://github.com/ho-nl/m2-pwa/commit/f8b3962825972e6bc232387e0a2e801289fcc492))
+* close button of bottom sheet spacing ([be33c20](https://github.com/ho-nl/m2-pwa/commit/be33c20fc8f41ad85d90bff15842738bc370b81e))
+* regression where primary action wasn't visible ([66f8ed2](https://github.com/ho-nl/m2-pwa/commit/66f8ed20ea0728881be81994d49bd6c399f2e914))
+
+
+
+
+
+## [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)
 
 

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) left = 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,27 +1,39 @@
-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'
 import { iconClose } from '../../icons'
+import { makeStyles, Theme } from '@material-ui/core'
+import { responsiveVal } from '../../Styles/responsiveVal'
+import { Trans } from '@lingui/macro'
 
 export function useShowClose() {
   const { overlayGroup } = usePageContext()
   return !!overlayGroup
 }
 
+const useStyles = makeStyles((theme: Theme) => ({
+  close: {
+    marginLeft: `calc(${responsiveVal(12, 22)} * -1)`,
+    marginRight: `calc(${responsiveVal(12, 22)} * -1)`,
+  },
+}))
+
 export default function LayoutHeaderClose() {
-  const router = usePageRouter()
   const { closeSteps } = usePageContext()
+  const onClick = useGo(closeSteps * -1)
+  const classes = useStyles()
 
   return (
     <Button
       type='button'
-      onClick={() => router.go(closeSteps * -1)}
+      onClick={onClick}
       aria-label='Close'
-      variant='pill-link'
+      variant='text'
       startIcon={<SvgImageSimple src={iconClose} />}
+      className={classes.close}
     >
-      Close
+      <Trans>Close</Trans>
     </Button>
   )
 }

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/LayoutDefault/components/LayoutDefault.tsx

@@ -55,6 +55,7 @@ const useStyles = makeStyles(
 )
 
 export type LayoutDefaultProps = {
+  className?: string
   header: React.ReactNode
   footer: React.ReactNode
   menuFab?: React.ReactNode
@@ -64,14 +65,14 @@ export type LayoutDefaultProps = {
 } & UseStyles<typeof useStyles>
 
 export function LayoutDefault(props: LayoutDefaultProps) {
-  const { children, header, footer, menuFab, cartFab, noSticky } = props
+  const { children, header, footer, menuFab, cartFab, noSticky, className } = props
   const classes = useStyles(props)
 
   const offset = useScrollOffset().y
   const scrollWithOffset = useTransform(useViewportScroll().scrollY, (y) => y + offset)
 
   return (
-    <div className={classes.root}>
+    <div className={clsx(classes.root, className)}>
       <LayoutProvider scroll={scrollWithOffset}>
         <header className={clsx(classes.header, !noSticky && classes.headerSticky)}>
           {header}

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,92 +72,43 @@ 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: {
+    overlaySizeSmFloating: {
       [theme.breakpoints.down('sm')]: {
-        height: '100vh',
-        '@supports (-webkit-touch-callout: none)': {
-          height: '-webkit-fill-available',
-        },
+        padding: `${theme.page.vertical} ${theme.page.horizontal}`,
       },
     },
-    overlay: {
-      pointerEvents: 'none',
-      gridArea: 'overlay',
-      scrollSnapAlign: 'start',
-      minHeight: '100vh',
-      '@supports (-webkit-touch-callout: none)': {
-        minHeight: '-webkit-fill-available',
+    overlaySizeMdFloating: {
+      [theme.breakpoints.up('md')]: {
+        padding: `${theme.page.vertical} ${theme.page.horizontal}`,
       },
     },
-    overlayVariantSmBottom: {
+    overlayPaneVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
-        marginTop: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
-        paddingTop: `calc(${theme.appShell.headerHeightSm} * 0.5)`,
-        display: 'grid',
+        borderTopLeftRadius: theme.shape.borderRadius * 3,
+        borderTopRightRadius: theme.shape.borderRadius * 3,
       },
     },
-    overlayVariantMdBottom: {
+    overlayPaneVariantMdBottom: {
       [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',
+        borderTopLeftRadius: theme.shape.borderRadius * 4,
+        borderTopRightRadius: theme.shape.borderRadius * 4,
       },
     },
-    overlayPane: {
-      pointerEvents: 'all',
-      backgroundColor: theme.palette.background.paper,
-      boxShadow: theme.shadows[24],
-      minWidth: 'min(800px, 90vw)',
-      scrollSnapAlign: 'end',
-
-      paddingBottom: 56,
-    },
-    overlayPaneVariantSmBottom: {
+    overlayPaneSizeSmFloating: {
       [theme.breakpoints.down('sm')]: {
-        borderTopLeftRadius: theme.shape.borderRadius * 3,
-        borderTopRightRadius: theme.shape.borderRadius * 3,
+        borderRadius: theme.shape.borderRadius * 3,
       },
     },
-    overlayPaneVariantMdBottom: {
+    overlayPaneSizeMdFloating: {
       [theme.breakpoints.up('md')]: {
-        borderTopLeftRadius: theme.shape.borderRadius * 3,
-        borderTopRightRadius: theme.shape.borderRadius * 3,
+        borderRadius: theme.shape.borderRadius * 4,
       },
     },
-    overlayPaneVariantSmLeft: {
+    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,63 @@ 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
+  className?: string
+} & 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,
+    className,
+    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 clsName = classesPicker(classes, {
+    variantSm,
+    variantMd,
+    sizeSm,
+    sizeMd,
+    smVariantSize: `${variantSm}${capitalize(sizeSm)}`,
+    mdVariantSize: `${variantMd}${capitalize(sizeMd)}`,
+  })
 
   const overlayRef = useRef<HTMLDivElement>(null)
 
@@ -286,7 +267,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 +279,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 +310,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>
+      <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)}>
+            <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/Styles/index.tsx

@@ -1,3 +1,8 @@
 export type UseStyles<T extends (...args: never[]) => unknown> = {
   classes?: Partial<ReturnType<T>>
 }
+
+export * from './breakpointVal'
+export * from './responsiveVal'
+export * from './classesPicker'
+export * from './withTheme'

package/Styles/withTheme.tsx

@@ -0,0 +1,51 @@
+import { makeStyles, Theme, ThemeProvider } from '@material-ui/core'
+
+const useStyles = makeStyles(
+  {
+    // These theme specific styles are copied from
+    // https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/CssBaseline/CssBaseline.js#L18-L24
+    root: (theme: Theme) => ({
+      color: theme.palette.text.primary,
+      ...theme.typography.body1,
+      backgroundColor: theme.palette.background.default,
+    }),
+  },
+  { name: 'Theme' },
+)
+
+/**
+ * It will provide a theme for the underlying tree and will set the color/font and backgroundColor
+ * for the child.
+ *
+ * To use it, wrap your component with it.
+ *
+ * Example:
+ *
+ * ```tsx
+ * const MyPage = () => {
+ *   return <div>Your regular page content</div>
+ * }
+ * export default MyPage
+ * ```
+ *
+ * Becomes:
+ *
+ * ```tsx
+ * const MyPage = () => {
+ *   return <div>Your regular page content, but now in darkMode</div>
+ * }
+ *
+ * export default withTheme(MyPage, darkTheme)
+ * ```
+ */
+export function withTheme<P extends { className?: string }>(Component: React.FC<P>, theme: Theme) {
+  return (props: P) => {
+    const classes = useStyles(theme)
+
+    return (
+      <ThemeProvider theme={theme}>
+        <Component {...props} className={classes.root} />
+      </ThemeProvider>
+    )
+  }
+}

package/index.ts

@@ -106,9 +106,6 @@ export * from './Stepper/Stepper'
 export { default as Stepper } from './Stepper/Stepper'
 export { default as StyledBadge } from './StyledBadge'
 export * from './Styles'
-export * from './Styles/breakpointVal'
-export * from './Styles/responsiveVal'
-export * from './Styles/classesPicker'
 export * from './SvgImage'
 export { default as SvgImage } from './SvgImage'
 export { default as SvgImageSimple } from './SvgImage/SvgImageSimple'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.21.15",
+  "version": "3.23.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.11",
-    "@graphcommerce/framer-scroller": "^1.1.25",
-    "@graphcommerce/framer-utils": "^2.103.20",
-    "@graphcommerce/graphql": "^2.105.12",
-    "@graphcommerce/image": "^2.105.11",
+    "@graphcommerce/framer-next-pages": "^2.109.2",
+    "@graphcommerce/framer-scroller": "^1.2.3",
+    "@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": "a9174584cfeb04807a72b6c609175c24e24ac818"
+  "gitHead": "dce525a80fd42cebe9af0b207c3bd27f89be9543"
 }