@graphcommerce/next-ui 4.3.2 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Change Log
 
+## 4.4.0
+
+### Minor Changes
+
+- [#1363](https://github.com/graphcommerce-org/graphcommerce/pull/1363) [`f67da3cfb`](https://github.com/graphcommerce-org/graphcommerce/commit/f67da3cfbe2dcf5ea23519d088c5aa0074029182) Thanks [@paales](https://github.com/paales)! - Export useIconSvgSize from IconSvg so that other components can use it's size
+
+### Patch Changes
+
+- [#1360](https://github.com/graphcommerce-org/graphcommerce/pull/1360) [`49a2d6617`](https://github.com/graphcommerce-org/graphcommerce/commit/49a2d661712e1787fba46c6195f7b559189e23d9) Thanks [@paales](https://github.com/paales)! - Make sure Cart and menu isn’t hidden on landscape
+
+* [#1363](https://github.com/graphcommerce-org/graphcommerce/pull/1363) [`218766869`](https://github.com/graphcommerce-org/graphcommerce/commit/218766869f7468c067a590857c942f3819f8add4) Thanks [@paales](https://github.com/paales)! - Use a Fab for the LayoutHeaderClose so it isn't as obtrusive on desktop
+
+- [#1353](https://github.com/graphcommerce-org/graphcommerce/pull/1353) [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba) Thanks [@paales](https://github.com/paales)! - Eslint: enable rules that were previously disabled and make fixes
+
+* [#1360](https://github.com/graphcommerce-org/graphcommerce/pull/1360) [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c) Thanks [@paales](https://github.com/paales)! - Lots of fixes for LayoutOverlay:
+
+  - When interacting with an overlay it causes browser resizes on mobile and causing a janky experience.
+  - Allow interaction with the previous layer after it has been closed, instead of waiting for the actual route to complete.
+  - Allow scrolling to the the bottom in the overlay when the height is just a bit higher than the window.
+  - Allow sheet positioning for bottom for the overlay: mdSpacingTop, smSpacingTop.
+  - Add scrollSnapStop:always to the actual overlay pane, so that when scrolling up it will not just close the overlay. Requiring a second swipe to close the overlay.
+  - Remove spacing on the bottom of the overlay that was introduced for Android, not nessesary anymore because of the clientSizeCssVar.y
+
+* Updated dependencies [[`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c), [`c9f7ac026`](https://github.com/graphcommerce-org/graphcommerce/commit/c9f7ac026b49047eca05be208b515f364e21571c), [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c), [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba), [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c)]:
+  - @graphcommerce/framer-scroller@2.1.2
+  - @graphcommerce/framer-next-pages@3.1.3
+  - @graphcommerce/framer-utils@3.1.0
+
 ## 4.3.2
 
 ### Patch Changes

package/Form/InputCheckmark.tsx

@@ -17,6 +17,7 @@ export type InputCheckmarkProps = {
 export function InputCheckmark(props: InputCheckmarkProps) {
   const { show, children, select = false } = props
 
+  // eslint-disable-next-line react/jsx-no-useless-fragment
   if (!show) return <>{children}</>
   return (
     <IconSvg

package/IconSvg/IconSvg.tsx

@@ -40,6 +40,19 @@ export type IconSvgProps = StyleProps &
   Pick<ImageProps, 'src'> &
   Pick<ComponentProps<'svg'>, 'className' | 'style'> & { sx?: SxProps<Theme> }
 
+export const sizes = {
+  xs: rv(11, 13),
+  small: rv(12, 16),
+  medium: rv(22, 24),
+  large: rv(24, 28),
+  xl: rv(38, 62),
+  xxl: rv(96, 148),
+} as const
+
+export function useIconSvgSize(size: keyof typeof sizes) {
+  return sizes[size]
+}
+
 const Svg = styled('svg', { name, target: name })(() => [
   {
     userSelect: 'none',
@@ -58,12 +71,12 @@ const Svg = styled('svg', { name, target: name })(() => [
 
     strokeWidth: svgIconStrokeWidth(28, 148, 1.4, 0.8),
 
-    '&.sizeXs': { fontSize: rv(11, 13) },
-    '&.sizeSmall': { fontSize: rv(12, 16) },
-    '&.sizeMedium': { fontSize: rv(22, 24) },
-    '&.sizeLarge': { fontSize: rv(24, 28) },
-    '&.sizeXl': { fontSize: rv(38, 62) },
-    '&.sizeXxl': { fontSize: rv(96, 148) },
+    '&.sizeXs': { fontSize: sizes.xs },
+    '&.sizeSmall': { fontSize: sizes.small },
+    '&.sizeMedium': { fontSize: sizes.medium },
+    '&.sizeLarge': { fontSize: sizes.large },
+    '&.sizeXl': { fontSize: sizes.xl },
+    '&.sizeXxl': { fontSize: sizes.xxl },
 
     '&.fillIcon': {
       fill: 'currentColor',

package/Layout/components/LayoutHeaderClose.tsx

@@ -1,8 +1,8 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
-import { Trans } from '@lingui/macro'
-import { Box } from '@mui/material'
-import { LinkOrButton } from '../../Button/LinkOrButton'
-import { IconSvg } from '../../IconSvg'
+import { Fab } from '@mui/material'
+import { useState } from 'react'
+import { IconSvg, useIconSvgSize } from '../../IconSvg'
+import { useFabSize } from '../../Theme'
 import { iconClose } from '../../icons'
 
 export function useShowClose() {
@@ -12,20 +12,28 @@ export function useShowClose() {
 
 export function LayoutHeaderClose() {
   const { closeSteps } = usePageContext()
-  const onClick = useGo(closeSteps * -1)
+  const [disabled, setDisabled] = useState(false)
+  const go = useGo(closeSteps * -1)
+  const onClick = () => {
+    setDisabled(true)
+    go()
+  }
+
+  const fabSize = useFabSize('responsive')
+  const svgSize = useIconSvgSize('large')
 
   return (
-    <LinkOrButton
-      button={{ type: 'button', variant: 'pill' }}
-      color='inherit'
+    <Fab
       onClick={onClick}
-      aria-label='Close'
-      startIcon={<IconSvg src={iconClose} size='medium' />}
-      // className={classes.close}
+      sx={{
+        boxShadow: 'none',
+        marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
+        marginRight: `calc((${fabSize} - ${svgSize}) * -0.5)`,
+      }}
+      size='responsive'
+      disabled={disabled}
     >
-      <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
-        <Trans>Close</Trans>
-      </Box>
-    </LinkOrButton>
+      <IconSvg src={iconClose} size='large' />
+    </Fab>
   )
 }

package/LayoutDefault/components/LayoutDefault.tsx

@@ -116,7 +116,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
                 top: 'unset',
                 bottom: `calc(20px + ${fabIconSize})`,
                 padding: `0 20px`,
-                '@media (max-height: 530px)': {
+                '@media (max-height: 530px) and (orientation: portrait)': {
                   display: 'none',
                 },
               },

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -1,11 +1,15 @@
 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 { Box, styled, SxProps, Theme } from '@mui/material'
+import {
+  clientSizeCssVar,
+  useElementScroll,
+  useIsomorphicLayoutEffect,
+} from '@graphcommerce/framer-utils'
+import { Box, styled, SxProps, Theme, useTheme, useThemeProps } 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 { extendableComponent } from '../../Styles'
+import { ExtendableComponent, extendableComponent } from '../../Styles'
 import { useOverlayPosition } from '../hooks/useOverlayPosition'
 
 export type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
@@ -21,12 +25,18 @@ type StyleProps = {
   justifyMd?: LayoutOverlayAlign
 }
 
+type OverridableProps = {
+  mdSpacingTop?: (theme: Theme) => string
+  smSpacingTop?: (theme: Theme) => string
+}
+
 export type LayoutOverlayBaseProps = {
   children?: React.ReactNode
   className?: string
   sx?: SxProps<Theme>
   sxBackdrop?: SxProps<Theme>
-} & StyleProps
+} & StyleProps &
+  OverridableProps
 
 enum OverlayPosition {
   UNOPENED = -1,
@@ -38,9 +48,22 @@ const name = 'LayoutOverlayBase' as const
 const parts = ['scroller', 'backdrop', 'overlay', 'overlayPane', 'beforeOverlay'] as const
 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' {
+  interface Components {
+    LayoutOverlayBase?: Pick<ExtendableComponent<OverridableProps & StyleProps>, 'defaultProps'>
+  }
+}
+
 const MotionDiv = styled(m.div)({})
 
-export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
+const clearScrollLock = () => {
+  document.body.style.overflow = ''
+}
+
+export function LayoutOverlayBase(incommingProps: LayoutOverlayBaseProps) {
+  const props = useThemeProps({ name, props: incommingProps })
+
   const {
     children,
     variantSm,
@@ -54,6 +77,14 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
     sxBackdrop = [],
   } = props
 
+  const th = useTheme()
+  const mdSpacingTop = (
+    props.mdSpacingTop ?? ((theme) => `calc(${theme.appShell.headerHeightMd} * 0.5)`)
+  )(th)
+  const smSpacingTop = (
+    props.smSpacingTop ?? ((theme) => `calc(${theme.appShell.headerHeightSm} * 0.5)`)
+  )(th)
+
   const { scrollerRef, snap } = useScrollerContext()
   const positions = useOverlayPosition()
   const scrollTo = useScrollTo()
@@ -65,25 +96,21 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
 
   const position = useMotionValue<OverlayPosition>(OverlayPosition.UNOPENED)
 
-  const classes = withState({
-    variantSm,
-    variantMd,
-    sizeSm,
-    sizeMd,
-    justifySm,
-    justifyMd,
-  })
+  const classes = withState({ variantSm, variantMd, sizeSm, sizeMd, justifySm, justifyMd })
 
   const overlayRef = useRef<HTMLDivElement>(null)
 
   const scroll = useElementScroll(scrollerRef)
 
+  // When the component is mounted, we need to set the initial position of the overlay.
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
-    if (!scroller || !isPresent) return
+    if (!scroller || !isPresent) return undefined
 
     const open = { x: positions.open.x.get(), y: positions.open.y.get() }
 
+    document.body.style.overflow = 'hidden'
+
     if (direction === 1 && position.get() !== OverlayPosition.OPENED) {
       scroller.scrollLeft = positions.closed.x.get()
       scroller.scrollTop = positions.closed.y.get()
@@ -97,6 +124,8 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
       scroller.scrollLeft = open.x
       scroller.scrollTop = open.y
     }
+
+    return clearScrollLock
   }, [direction, isPresent, position, positions, scrollTo, scrollerRef])
 
   // Make sure the overlay stays open when resizing the window.
@@ -121,6 +150,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
   useEffect(() => {
     if (isPresent) return
     position.set(OverlayPosition.CLOSED)
+    clearScrollLock()
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     scrollTo({
       x: positions.closed.x.get(),
@@ -132,6 +162,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
   const closeOverlay = useCallback(() => {
     if (position.get() !== OverlayPosition.OPENED) return
     position.set(OverlayPosition.CLOSED)
+    clearScrollLock()
     close()
   }, [close, position])
 
@@ -170,11 +201,15 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
     [closeOverlay, scrollerRef, snap],
   )
 
+  const pointerEvents = useTransform(position, (p) =>
+    p === OverlayPosition.CLOSED ? 'none' : 'auto',
+  )
+
   return (
     <>
       <MotionDiv
         className={classes.backdrop}
-        style={{ opacity: positions.open.visible }}
+        style={{ opacity: positions.open.visible, pointerEvents }}
         sx={[
           {
             zIndex: -1,
@@ -198,8 +233,10 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
         grid={false}
         hideScrollbar
         onClick={onClickAway}
+        style={{ pointerEvents }}
         sx={[
           (theme) => ({
+            overscrollBehavior: 'contain',
             display: 'grid',
             '&.canGrab': {
               cursor: 'default',
@@ -208,10 +245,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
               overflow: 'auto',
             },
 
-            height: '100vh',
-            '@supports (-webkit-touch-callout: none)': {
-              height: '-webkit-fill-available',
-            },
+            height: clientSizeCssVar.y,
 
             [theme.breakpoints.down('md')]: {
               '&.variantSmLeft': {
@@ -228,10 +262,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                 borderTopLeftRadius: theme.shape.borderRadius * 3,
                 borderTopRightRadius: theme.shape.borderRadius * 3,
                 gridTemplate: `"beforeOverlay" "overlay"`,
-                height: '100vh',
-                '@supports (-webkit-touch-callout: none)': {
-                  height: '-webkit-fill-available',
-                },
+                height: clientSizeCssVar.y,
               },
             },
             [theme.breakpoints.up('md')]: {
@@ -250,7 +281,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                 borderTopRightRadius: theme.shape.borderRadius * 4,
                 [theme.breakpoints.up('md')]: {
                   gridTemplate: `"beforeOverlay" "overlay"`,
-                  height: '100vh',
+                  height: clientSizeCssVar.y,
                 },
               },
             },
@@ -273,10 +304,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                 width: '100vw',
               },
               '&.variantSmBottom': {
-                height: '100vh',
-                '@supports (-webkit-touch-callout: none)': {
-                  height: '-webkit-fill-available',
-                },
+                height: clientSizeCssVar.y,
               },
             },
             [theme.breakpoints.up('md')]: {
@@ -284,7 +312,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                 width: '100vw',
               },
               '&.variantMdBottom': {
-                height: '100vh',
+                height: clientSizeCssVar.y,
               },
             },
           })}
@@ -297,14 +325,15 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
             pointerEvents: 'none',
             gridArea: 'overlay',
             scrollSnapAlign: 'start',
+            scrollSnapStop: 'always',
 
             [theme.breakpoints.down('md')]: {
               justifyContent: justifySm,
               alignItems: justifySm,
 
               '&.variantSmBottom': {
-                marginTop: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
-                paddingTop: `calc(${theme.appShell.headerHeightSm} * 0.5)`,
+                marginTop: `calc(${smSpacingTop} * -1)`,
+                paddingTop: smSpacingTop,
               },
 
               '&.sizeSmFloating': {
@@ -316,8 +345,8 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
               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)`,
+                paddingTop: mdSpacingTop,
+                marginTop: `calc(${mdSpacingTop} * -1)`,
                 display: 'grid',
               },
               '&.sizeMdFloating': {
@@ -332,22 +361,19 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
               pointerEvents: 'all',
               backgroundColor: theme.palette.background.paper,
               boxShadow: theme.shadows[24],
-              // scrollSnapAlign: 'end',
+              scrollSnapAlign: 'end',
               [theme.breakpoints.down('md')]: {
                 minWidth: '80vw',
+                '&:not(.sizeMdFull)': {
+                  width: 'max-content',
+                },
 
-                /**
-                 * The top bar on Google Chrome is about 56 pixels high. If we do not provide this
-                 * padding we'll run into the issue that the user can't scroll to the bottom. We
-                 * can't change this value with JS as that causes much jank
-                 */
-                '&.sizeSmFull, &.sizeSmMinimal': { paddingBottom: '56px' },
                 '&.variantSmBottom.sizeSmFull': {
-                  minHeight: `calc(100vh - ${theme.appShell.headerHeightSm} * 0.5)`,
+                  minHeight: `calc(${clientSizeCssVar.y} - ${smSpacingTop})`,
                 },
 
                 '&.variantSmBottom': {
-                  borderTopLeftRadius: `${theme.shape.borderRadius * 4}px`,
+                  borderTopLeftRadius: `${theme.shape.borderRadius * 3}px`,
                   borderTopRightRadius: `${theme.shape.borderRadius * 3}px`,
                 },
                 '&.sizeSmFloating': {
@@ -355,42 +381,33 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                 },
                 '&.variantSmLeft.sizeSmFull': {
                   paddingBottom: '1px',
-                  minHeight: '100vh',
-                  '@supports (-webkit-touch-callout: none)': {
-                    minHeight: '-webkit-fill-available',
-                  },
+                  minHeight: clientSizeCssVar.y,
                 },
                 '&.variantSmRight.sizeSmFull': {
                   paddingBottom: '1px',
-                  minHeight: '100vh',
+                  minHeight: clientSizeCssVar.y,
                   scrollSnapAlign: 'end',
-                  '@supports (-webkit-touch-callout: none)': {
-                    minHeight: '-webkit-fill-available',
-                  },
                 },
               },
               [theme.breakpoints.up('md')]: {
                 '&.sizeMdFull': {
                   minWidth: 'max(600px, 50vw)',
                 },
+                '&:not(.sizeMdFull)': {
+                  width: 'max-content',
+                },
 
                 '&.sizeMdFull.variantMdBottom': {
-                  minHeight: `calc(100vh + ${theme.appShell.headerHeightMd} - (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * 0.5)`,
+                  minHeight: `calc(${clientSizeCssVar.y} - ${mdSpacingTop})`,
                 },
                 '&.sizeMdFull.variantMdLeft': {
                   paddingBottom: '1px',
-                  minHeight: '100vh',
-                  '@supports (-webkit-touch-callout: none)': {
-                    minHeight: '-webkit-fill-available',
-                  },
+                  minHeight: clientSizeCssVar.y,
                 },
                 '&.sizeMdFull.variantMdRight': {
                   paddingBottom: '1px',
-                  minHeight: '100vh',
+                  minHeight: clientSizeCssVar.y,
                   scrollSnapAlign: 'end',
-                  '@supports (-webkit-touch-callout: none)': {
-                    minHeight: '-webkit-fill-available',
-                  },
                 },
 
                 '&.variantMdBottom': {

package/LayoutOverlay/test/LayoutOverlayDemo.tsx

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

package/Styles/withTheme.tsx

@@ -41,7 +41,7 @@ export function withTheme<T>(
   theme: Theme,
 ): React.FC<T & WithSx> {
   return (data: T & WithSx) => {
-    const sx = data.sx ?? []
+    const { sx = [] } = data
     return (
       <ThemeProvider theme={theme}>
         <Component

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,9 +19,9 @@
     "@emotion/react": "^11.8.2",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "^3.1.2",
-    "@graphcommerce/framer-scroller": "^2.1.0",
-    "@graphcommerce/framer-utils": "^3.0.5",
+    "@graphcommerce/framer-next-pages": "^3.1.3",
+    "@graphcommerce/framer-scroller": "^2.1.2",
+    "@graphcommerce/framer-utils": "^3.1.0",
     "@graphcommerce/image": "^3.1.1",
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
@@ -38,7 +38,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.6",
+    "@graphcommerce/eslint-config-pwa": "^4.1.2",
     "@graphcommerce/prettier-config-pwa": "^4.0.4",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.19.2",