@graphcommerce/next-ui 6.0.0-canary.32 → 6.0.0-canary.34

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Change Log
 
+## 6.0.0-canary.34
+
+### Patch Changes
+
+- [#1830](https://github.com/graphcommerce-org/graphcommerce/pull/1830) [`dbc2ae0d3`](https://github.com/graphcommerce-org/graphcommerce/commit/dbc2ae0d360f645c3eab2a8f38b3d1431eab7d80) - Hide body scrollbar only for right overlays ([@paales](https://github.com/paales))
+
+- [#1830](https://github.com/graphcommerce-org/graphcommerce/pull/1830) [`fafa76ba9`](https://github.com/graphcommerce-org/graphcommerce/commit/fafa76ba9e655739171abc553d309795c9d8e5c2) - Overlays now use an additional scroll container to handle vertical scroll, fixing:
+
+  - Scrolling on desktop will not close the overlay when there is content to be scrolled
+  - Scrolling will not snap to bottom / top when the content is barely scrollable
+  - Dragging will only open or close the drawer, not something inbetween
+  - Swiping up on mobile will not close the overlay, first you need to scroll to the top of the overlay.
+  - Floating overlays will now scroll inside the floating overlay. ([@paales](https://github.com/paales))
+
+- [#1830](https://github.com/graphcommerce-org/graphcommerce/pull/1830) [`0bac3bdd8`](https://github.com/graphcommerce-org/graphcommerce/commit/0bac3bdd8505ccad8036d13e19559f2b3523fd92) - Navigation layout animation should only trigger when the active menu item changes ([@paales](https://github.com/paales))
+
+- [#1830](https://github.com/graphcommerce-org/graphcommerce/pull/1830) [`6bffd680b`](https://github.com/graphcommerce-org/graphcommerce/commit/6bffd680b9d6a370048d06842cd3ce73130471dd) - Overlay shouldn't be closed when dragging beyond the pane ([@paales](https://github.com/paales))
+
+- [#1830](https://github.com/graphcommerce-org/graphcommerce/pull/1830) [`ff0c70e31`](https://github.com/graphcommerce-org/graphcommerce/commit/ff0c70e3165c64ea4f236a15a5820428dbf36e6a) - Allow scrollbar to left and right full overlay variants. ([@paales](https://github.com/paales))
+
+## 6.0.0-canary.33
+
+### Patch Changes
+
+- [#1831](https://github.com/graphcommerce-org/graphcommerce/pull/1831) [`f4008bae3`](https://github.com/graphcommerce-org/graphcommerce/commit/f4008bae3e3ac8288c731b1dd87e6c6aef8e81fc) - Added a linting rule that disallows `import { Theme } from '@emotion/react'` because that causes huge performance issues. Added tsc:trace to the root project to debug typescript performance issues. ([@paales](https://github.com/paales))
+
 ## 6.0.0-canary.32
 
 ### Minor Changes

package/Layout/components/LayoutHeaderContent.tsx

@@ -18,7 +18,7 @@ export type LayoutHeaderContentProps = FloatingProps & {
   sxBg?: SxProps<Theme>
   layout?: LayoutProps['layout']
   size?: 'small' | 'responsive'
-}
+} & Pick<LayoutProps, 'layout' | 'layoutDependency'>
 
 type OwnerState = {
   floatingSm: boolean
@@ -45,6 +45,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
     sx = [],
     sxBg = [],
     layout,
+    layoutDependency,
     size = 'responsive',
   } = props
 
@@ -156,7 +157,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
               justifyContent: 'start',
             })}
           >
-            <MotionDiv layout={layout} sx={{ display: 'grid' }}>
+            <MotionDiv layout={layout} layoutDependency={layoutDependency} sx={{ display: 'grid' }}>
               {left}
             </MotionDiv>
           </Box>
@@ -192,10 +193,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             },
           })}
         >
-          <MotionDiv
-            sx={{ minWidth: 0 }}
-            layout={layout}
-          >
+          <MotionDiv sx={{ minWidth: 0 }} layout={layout} layoutDependency={layoutDependency}>
             {children}
           </MotionDiv>
         </Box>
@@ -213,7 +211,9 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             justifyContent: 'end',
           })}
         >
-          <MotionDiv layout={layout}>{right}</MotionDiv>
+          <MotionDiv layout={layout} layoutDependency={layoutDependency}>
+            {right}
+          </MotionDiv>
         </Box>
         {divider && (
           <Box

package/LayoutParts/MenuFabSecondaryItem.tsx

@@ -2,6 +2,7 @@ import { ListItemButton, ListItemIcon, ListItemText, SxProps, Theme } from '@mui
 import { useRouter } from 'next/router'
 import React from 'react'
 import { extendableComponent } from '../Styles'
+import { NextLink } from '../Theme'
 
 export type FabMenuSecondaryItemProps = {
   href: string
@@ -21,6 +22,7 @@ export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
   return (
     <ListItemButton
       href={href}
+      component={NextLink}
       className={classes.root}
       sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
       dense

package/Navigation/components/NavigationOverlay.tsx

@@ -72,6 +72,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
   })
 
   const selectedLevel = useMotionValueValue(selection, (s) => (s === false ? -1 : s.length))
+  const selectionValue = useMotionValueValue(selection, (s) => (s ? s.join('') : s))
   const activeAndNotClosing = useMotionSelector([selection, closing], ([s, c]) =>
     c ? false : s !== false,
   )
@@ -108,6 +109,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
       widthSm={false}
       overlayPaneProps={{
         layout: true,
+        layoutDependency: selectionValue,
         initial: false,
         onLayoutAnimationStart: () => {
           animating.set(true)
@@ -127,7 +129,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
         },
       }}
     >
-      <MotionDiv layout sx={{ display: 'grid' }}>
+      <MotionDiv layout layoutDependency={selectionValue} sx={{ display: 'grid' }}>
         <Box
           className={classes.header}
           sx={(theme) => ({
@@ -142,6 +144,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
             floatingSm={false}
             switchPoint={0}
             layout='position'
+            layoutDependency={selectionValue}
             left={
               selectedLevel > 0 && (
                 <Fab
@@ -173,7 +176,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
           </LayoutHeaderContent>
         </Box>
       </MotionDiv>
-      <MotionDiv layout='position' sx={{ display: 'grid' }}>
+      <MotionDiv layout='position' layoutDependency={selectionValue} sx={{ display: 'grid' }}>
         <Box
           sx={[
             (theme) => ({

package/Overlay/components/OverlayBase.tsx

@@ -1,12 +1,25 @@
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
-import { dvh, dvw, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
+import {
+  dvh,
+  dvw,
+  useConstant,
+  useElementScroll,
+  useIsomorphicLayoutEffect,
+} from '@graphcommerce/framer-utils'
 import { Box, styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
-import { m, MotionProps, useDomEvent, useMotionValue, useTransform } from 'framer-motion'
+import {
+  m,
+  MotionProps,
+  motionValue,
+  useDomEvent,
+  useMotionValue,
+  useTransform,
+} from 'framer-motion'
+import framesync from 'framesync'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { ExtendableComponent, extendableComponent } from '../../Styles'
-import { useOverlayPosition } from '../hooks/useOverlayPosition'
-import framesync from 'framesync'
+import { useMatchMedia } from '../../hooks/useMatchMedia'
 
 export type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
 export type LayoutOverlaySize = 'floating' | 'minimal' | 'full'
@@ -66,10 +79,6 @@ declare module '@mui/material/styles/components' {
 
 const MotionDiv = styled(m.div)({})
 
-const clearScrollLock = () => {
-  document.body.style.overflow = ''
-}
-
 export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   const props = useThemeProps({ name, props: incomingProps })
 
@@ -103,26 +112,132 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     props.smSpacingTop ?? ((theme) => `calc(${theme.appShell.headerHeightSm} * 0.5)`)
   )(th)
 
-  const { scrollerRef, snap, scroll } = useScrollerContext()
-  const positions = useOverlayPosition(variantSm, variantMd)
+  const { scrollerRef, snap, scroll, getScrollSnapPositions } = useScrollerContext()
   const scrollTo = useScrollTo()
   const beforeRef = useRef<HTMLDivElement>(null)
+  const overlayRef = useRef<HTMLDivElement>(null)
+  const overlayPaneRef = useRef<HTMLDivElement>(null)
 
   const position = useMotionValue<OverlayPosition>(OverlayPosition.UNOPENED)
+  const overlayPaneScroll = useElementScroll(overlayPaneRef)
 
   const classes = withState({ variantSm, variantMd, sizeSm, sizeMd, justifySm, justifyMd })
 
-  const overlayRef = useRef<HTMLDivElement>(null)
+  const match = useMatchMedia()
+  const positions = useConstant(() => ({
+    open: { x: motionValue(0), y: motionValue(0), visible: motionValue(0) },
+    closed: { x: motionValue(0), y: motionValue(0) },
+  }))
+
+  const variant = useCallback(
+    () => (match.up('md') ? variantMd : variantSm),
+    [match, variantMd, variantSm],
+  )
+  const prevVariant = useRef<LayoutOverlayVariant>()
+
+  useIsomorphicLayoutEffect(() => {
+    const scroller = scrollerRef.current
+    if (!scroller) return () => {}
+
+    const calcPositions = () => {
+      const snapPositions = getScrollSnapPositions()
+      const x = snapPositions.x[snapPositions.x.length - 1]
+      const y = snapPositions.y[snapPositions.y.length - 1]
+
+      if (variant() === 'left') {
+        positions.closed.x.set(x)
+        positions.open.x.set(0)
+      }
+      if (variant() === 'right') {
+        positions.open.x.set(x)
+        positions.closed.x.set(0)
+      }
+      if (variant() === 'bottom') {
+        positions.open.y.set(y)
+        positions.closed.y.set(0)
+      }
+    }
+
+    const forceScrollPosition = () => {
+      // Set the initial position of the overlay.
+      // Make sure the overlay stays open when the variant changes.
+      if (position.get() !== OverlayPosition.OPENED) {
+        scroller.scrollLeft = positions.closed.x.get()
+        scroller.scrollTop = positions.closed.y.get()
+      } else {
+        scroller.scrollLeft = positions.open.x.get()
+        scroller.scrollTop = positions.open.y.get()
+      }
+    }
+
+    const calcVisible = () => {
+      const snapPositions = getScrollSnapPositions()
+      const clampRound = (value: number) => Math.round(Math.max(0, Math.min(1, value)) * 100) / 100
+
+      const scrollX = scroller.scrollLeft || scroll.x.get()
+      const scrolly = scroller.scrollTop || scroll.y.get()
+
+      if (variant() === 'left') {
+        const closedX = snapPositions.x[1] ?? 0
+        positions.open.visible.set(closedX === 0 ? 0 : clampRound((scrollX - closedX) / -closedX))
+      }
+      if (variant() === 'right') {
+        const openedX = snapPositions.x[1] ?? 0
+        positions.open.visible.set(openedX === 0 ? 0 : clampRound(scrollX / openedX))
+      }
+      if (variant() === 'bottom') {
+        const openedY = snapPositions.y[1] ?? 0
+        positions.open.visible.set(openedY === 0 ? 0 : clampRound(scrolly / openedY))
+      }
+    }
+
+    const handleScroll = () => {
+      calcPositions()
+
+      // if (!prevVariant.current) prevVariant.current = variant()
+      if (prevVariant.current !== variant()) {
+        forceScrollPosition()
+        prevVariant.current = variant()
+      } else {
+        // When we're not switching variants, we update the vibility of the overlay.
+        calcVisible()
+      }
+    }
+
+    const handleResize = () => {
+      calcPositions()
+      forceScrollPosition()
+    }
+
+    const measureScroll = () => framesync.read(handleScroll)
+    const measureResize = () => framesync.read(handleResize)
+    handleScroll()
+
+    const cancelX = scroll.x.on('change', measureScroll)
+    const cancelY = scroll.y.on('change', measureScroll)
+
+    const ro = new ResizeObserver(measureResize)
+    ro.observe(scrollerRef.current)
+    ;[...scrollerRef.current.children].forEach((child) => ro.observe(child))
+
+    window.addEventListener('resize', measureResize)
+    return () => {
+      window.removeEventListener('resize', measureResize)
+      ro.disconnect()
+      cancelX()
+      cancelY()
+    }
+  }, [getScrollSnapPositions, position, positions, scroll, scrollerRef, variant])
 
   // When the component is mounted, we need to set the initial position of the overlay.
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
 
-    if (!scroller || !isPresent) return undefined
+    if (!scroller || !isPresent) return
 
     const open = { x: positions.open.x.get(), y: positions.open.y.get() }
 
-    document.body.style.overflow = 'hidden'
+    if (variant() === 'right') document.body.style.overflow = 'hidden'
 
     if (position.get() !== OverlayPosition.OPENED) {
       if (direction === 1) {
@@ -141,29 +256,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         snap.set(true)
       }
     }
-
-    return clearScrollLock
-  }, [direction, isPresent, position, positions, scrollTo, scrollerRef, snap])
-
-  // Make sure the overlay stays open when resizing the window.
-  useEffect(() => {
-    const scroller = scrollerRef.current
-    if (!scroller) return () => {}
-
-    const resize = () => {
-      if (position.get() !== OverlayPosition.OPENED) {
-        scroller.scrollLeft = positions.closed.x.get()
-        scroller.scrollTop = positions.closed.y.get()
-      } else {
-        scroller.scrollLeft = positions.open.x.get()
-        scroller.scrollTop = positions.open.y.get()
-      }
-    }
-    const resizeTimed = () => framesync.read(resize)
-
-    window.addEventListener('resize', resizeTimed)
-    return () => window.removeEventListener('resize', resizeTimed)
-  }, [position, positions, scrollerRef])
+  }, [direction, isPresent, position, positions, scrollTo, scrollerRef, snap, variant])
 
   // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {
@@ -172,16 +265,19 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
     if (position.get() === OverlayPosition.UNOPENED) {
       position.set(OverlayPosition.CLOSED)
-      clearScrollLock()
       scroller.scrollLeft = positions.closed.x.get()
       scroller.scrollTop = positions.closed.y.get()
       safeToRemove?.()
+      document.body.style.overflow = ''
     } else {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       scrollTo({
         x: positions.closed.x.get(),
         y: positions.closed.y.get(),
-      }).then(() => safeToRemove?.())
+      }).then(() => {
+        safeToRemove?.()
+        document.body.style.overflow = ''
+      })
     }
   }, [isPresent, position, positions, safeToRemove, scrollTo, scrollerRef])
 
@@ -189,7 +285,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   const closeOverlay = useCallback(() => {
     if (position.get() !== OverlayPosition.OPENED) return
     position.set(OverlayPosition.CLOSED)
-    clearScrollLock()
+    // document.body.style.overflow = ''
     onClosed()
   }, [onClosed, position])
 
@@ -216,20 +312,14 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   }, [offsetY])
 
   // Create the exact position for the LayoutProvider which offsets the top of the overlay
-  const scrollYOffset = useTransform(
-    [scroll.y, positions.open.y],
-    ([y, openY]: number[]) => y - openY + offsetPageY,
-  )
+  const scrollYOffset = useTransform(overlayPaneScroll.y, (paneY) => paneY + offsetPageY)
 
   const onClickAway = useCallback(
     (event: React.MouseEvent<HTMLDivElement>) => {
-      const isTarget =
-        event.target === scrollerRef.current ||
-        event.target === beforeRef.current ||
-        event.target === overlayRef.current
+      const isTarget = event.target === beforeRef.current
       if (isTarget && snap.get()) closeOverlay()
     },
-    [closeOverlay, scrollerRef, snap],
+    [closeOverlay, snap],
   )
 
   return (
@@ -261,6 +351,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
         onClick={onClickAway}
+        hideScrollbar
         sx={[
           (theme) => ({
             overscrollBehavior: 'contain',
@@ -269,7 +360,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
               cursor: 'default',
             },
             '&.mdSnapDirInline': {
-              overflow: 'auto',
+              overflow: active ? 'auto' : 'hidden',
             },
 
             height: dvh(100),
@@ -308,15 +399,11 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                 gridTemplate: `"overlay beforeOverlay"`,
                 borderTopRightRadius: theme.shape.borderRadius * 4,
                 borderBottomRightRadius: theme.shape.borderRadius * 4,
-
-                '&::-webkit-scrollbar': { display: 'none' },
               },
               '&.variantMdRight': {
                 gridTemplate: `"beforeOverlay overlay"`,
                 borderTopLeftRadius: theme.shape.borderRadius * 4,
                 borderBottomLeftRadius: theme.shape.borderRadius * 4,
-
-                '&::-webkit-scrollbar': { display: 'none' },
               },
               '&.variantMdBottom': {
                 borderTopLeftRadius: theme.shape.borderRadius * 4,
@@ -332,7 +419,6 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         ]}
       >
         <Box
-          onClick={onClickAway}
           className={classes.beforeOverlay}
           ref={beforeRef}
           sx={(theme) => ({
@@ -362,12 +448,12 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         <Box
           className={classes.overlay}
           ref={overlayRef}
-          onClick={onClickAway}
           sx={(theme) => ({
             display: 'grid',
             gridArea: 'overlay',
             scrollSnapAlign: 'start',
             scrollSnapStop: 'always',
+            pointerEvents: 'none',
             [theme.breakpoints.down('md')]: {
               justifyContent: justifySm,
               alignItems: justifySm,
@@ -401,67 +487,85 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
           <MotionDiv
             {...overlayPaneProps}
             className={classes.overlayPane}
+            ref={overlayPaneRef}
             sx={(theme) => ({
-              pointerEvents: 'all',
+              pointerEvents: 'auto',
               backgroundColor: theme.palette.background.paper,
               boxShadow: theme.shadows[24],
 
               [theme.breakpoints.down('md')]: {
                 minWidth: '80vw',
+                overflowY: 'auto',
                 '&:not(.sizeSmFull)': {
                   width: 'auto',
                 },
 
-                '&.variantSmBottom.sizeSmFull': {
-                  minHeight: `calc(${dvh(100)} - ${smSpacingTop})`,
-                },
-
                 '&.variantSmBottom': {
+                  maxHeight: `calc(${dvh(100)} - ${smSpacingTop})`,
+                  '&.sizeSmFloating': {
+                    maxHeight: `calc(${dvh(100)} - (${theme.page.vertical} * 2))`,
+                  },
+                  '&.sizeSmFull': {
+                    height: `calc(${dvh(100)} - ${smSpacingTop})`,
+                  },
+
                   borderTopLeftRadius: `${theme.shape.borderRadius * 3}px`,
                   borderTopRightRadius: `${theme.shape.borderRadius * 3}px`,
                 },
-                '&.sizeSmFloating': {
-                  borderRadius: `${theme.shape.borderRadius * 3}px`,
-                },
-                '&.variantSmLeft.sizeSmFull': {
-                  paddingBottom: '1px',
-                  minHeight: dvh(100),
+                '&.variantSmLeft, &.variantSmRight': {
+                  width: widthSm || 'max-content',
+                  maxWidth: dvw(100),
+                  maxHeight: dvh(100),
+                  '&.sizeSmFull': {
+                    height: dvh(100),
+                  },
+                  '&.sizeSmFloating': {
+                    maxHeight: `calc(${dvh(100)} - (${theme.page.vertical} * 2))`,
+                  },
                 },
-                '&.variantSmRight.sizeSmFull': {
+
+                '&.variantSmLeft.sizeSmFull, &.variantSmRight.sizeSmFull': {
                   paddingBottom: '1px',
-                  minHeight: dvh(100),
                 },
-                '&.variantSmLeft, &.variantSmRight': {
-                  width: widthSm || undefined,
-                  maxWidth: dvw(100),
+
+                '&.sizeSmFloating': {
+                  borderRadius: `${theme.shape.borderRadius * 3}px`,
                 },
               },
               [theme.breakpoints.up('md')]: {
                 minWidth: '1px',
-
-                '&.sizeMdFull.variantMdBottom': {
-                  minHeight: `calc(${dvh(100)} - ${mdSpacingTop})`,
-                },
-                '&.sizeMdFull.variantMdLeft': {
-                  paddingBottom: '1px',
-                  minHeight: dvh(100),
-                },
-                '&.sizeMdFull.variantMdRight': {
-                  paddingBottom: '1px',
-                  minHeight: dvh(100),
+                overflowY: 'auto',
+                overscrollBehavior: 'contain',
+                '&.variantMdBottom.sizeMdFloating:not(.justifyMdStretch)': {
+                  width: widthMd,
                 },
 
                 '&.variantMdBottom': {
+                  maxHeight: `calc(${dvh(100)} - ${mdSpacingTop})`,
+                  '&.sizeMdFloating': {
+                    maxHeight: `calc(${dvh(100)} - (${theme.page.vertical} * 2))`,
+                  },
+                  '&.sizeMdFull': {
+                    height: `calc(${dvh(100)} - ${mdSpacingTop})`,
+                  },
+
                   borderTopLeftRadius: `${theme.shape.borderRadius * 4}px`,
                   borderTopRightRadius: `${theme.shape.borderRadius * 4}px`,
                 },
                 '&.variantMdLeft, &.variantMdRight': {
                   width: widthMd || 'max-content',
                   maxWidth: dvw(100),
+                  maxHeight: dvh(100),
+                  '&.sizeMdFull': {
+                    height: dvh(100),
+                  },
+                  '&.sizeMdFloating': {
+                    maxHeight: `calc(${dvh(100)} - (${theme.page.vertical} * 2))`,
+                  },
                 },
 
-                '&.variantMdBottom.sizeMdFloating': {
-                  width: widthMd,
+                '&.variantMdLeft.sizeMdFull, &.variantMdRight.sizeMdFull': {
+                  paddingBottom: '1px',
                 },
 
                 '&.sizeMdFloating': {

package/Overlay/utils/variantsToScrollSnapType.ts

@@ -10,7 +10,7 @@ export function variantsToScrollSnapType(variants: Variants): Return {
   const inlineMd = variants.variantMd === 'left' || variants.variantMd === 'right'
 
   return {
-    scrollSnapTypeSm: inlineSm ? 'inline mandatory' : 'block proximity',
-    scrollSnapTypeMd: inlineMd ? 'inline mandatory' : 'block proximity',
+    scrollSnapTypeSm: inlineSm ? 'inline mandatory' : 'block mandatory',
+    scrollSnapTypeMd: inlineMd ? 'inline mandatory' : 'block mandatory',
   }
 }

package/OverlayOrPopperChip/types.ts

@@ -1,5 +1,4 @@
-import { Theme } from '@emotion/react'
-import { SxProps } from '@mui/material'
+import { Theme, SxProps } from '@mui/material'
 import React from 'react'
 
 export type PanelActionsProps = {

package/Styles/withEmotionCache.tsx

@@ -1,4 +1,4 @@
-import { EmotionJSX } from '@emotion/react/types/jsx-namespace'
+import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
 // eslint-disable-next-line @next/next/no-document-import-in-page
 import type NextDocument from 'next/document'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.0-canary.32",
+  "version": "6.0.0-canary.34",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "@emotion/react": "^11.10.6",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.10.6",
-    "@graphcommerce/framer-next-pages": "6.0.0-canary.32",
-    "@graphcommerce/framer-scroller": "6.0.0-canary.32",
-    "@graphcommerce/framer-utils": "6.0.0-canary.32",
-    "@graphcommerce/image": "6.0.0-canary.32",
+    "@graphcommerce/framer-next-pages": "6.0.0-canary.34",
+    "@graphcommerce/framer-scroller": "6.0.0-canary.34",
+    "@graphcommerce/framer-utils": "6.0.0-canary.34",
+    "@graphcommerce/image": "6.0.0-canary.34",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.32",
-    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.32",
-    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.32",
+    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.34",
+    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.34",
+    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.34",
     "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "typescript": "4.9.5"

package/Overlay/hooks/useOverlayPosition.ts

@@ -1,87 +0,0 @@
-import { useScrollerContext } from '@graphcommerce/framer-scroller'
-import { useConstant, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
-import { motionValue } from 'framer-motion'
-import framesync from 'framesync'
-import { useCallback, useEffect } from 'react'
-import { useMatchMedia } from '../../hooks'
-
-const clampRound = (value: number) => Math.round(Math.max(0, Math.min(1, value)) * 100) / 100
-
-export function useOverlayPosition(
-  variantSm: 'left' | 'bottom' | 'right',
-  variantMd: 'left' | 'bottom' | 'right',
-) {
-  const match = useMatchMedia()
-  const { getScrollSnapPositions, scrollerRef, scroll } = useScrollerContext()
-  const state = useConstant(() => ({
-    open: {
-      x: motionValue(0),
-      y: motionValue(0),
-      visible: motionValue(0),
-    },
-    closed: {
-      x: motionValue(0),
-      y: motionValue(0),
-    },
-  }))
-
-  const variant = useCallback(
-    () => (match.up('md') ? variantMd : variantSm),
-    [match, variantMd, variantSm],
-  )
-
-  useIsomorphicLayoutEffect(() => {
-    if (!scrollerRef.current) return () => {}
-
-    const measure = () => {
-      const positions = getScrollSnapPositions()
-      const x = positions.x[positions.x.length - 1]
-      const y = positions.y[positions.y.length - 1]
-
-      const scrollX = scrollerRef.current?.scrollLeft ?? scroll.x.get()
-      const scrolly = scrollerRef.current?.scrollTop ?? scroll.y.get()
-
-      if (variant() === 'left') {
-        state.closed.x.set(x)
-        state.open.x.set(0)
-
-        const closedX = positions.x[1] ?? 0
-        state.open.visible.set(closedX === 0 ? 0 : clampRound((scrollX - closedX) / -closedX))
-      }
-      if (variant() === 'right') {
-        state.open.x.set(x)
-        state.closed.x.set(0)
-
-        const openedX = positions.x[1] ?? 0
-        state.open.visible.set(openedX === 0 ? 0 : clampRound(scrollX / openedX))
-      }
-      if (variant() === 'bottom') {
-        state.open.y.set(y)
-        state.closed.y.set(0)
-
-        const openedY = positions.y[1] ?? 0
-        state.open.visible.set(openedY === 0 ? 0 : clampRound(scrolly / openedY))
-      }
-    }
-
-    const measureTimed = () => framesync.read(measure)
-    measure()
-
-    const cancelX = scroll.x.onChange(measure)
-    const cancelY = scroll.y.onChange(measure)
-
-    const ro = new ResizeObserver(measureTimed)
-    ro.observe(scrollerRef.current)
-    ;[...scrollerRef.current.children].forEach((child) => ro.observe(child))
-
-    window.addEventListener('resize', measureTimed)
-    return () => {
-      window.removeEventListener('resize', measureTimed)
-      ro.disconnect()
-      cancelX()
-      cancelY()
-    }
-  }, [getScrollSnapPositions, scroll.x, scroll.y, scrollerRef, state, variant])
-
-  return state
-}