@graphcommerce/next-ui 6.0.0 → 6.0.1-canary.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.0.1-canary.0
+
+### Patch Changes
+
+- [#1854](https://github.com/graphcommerce-org/graphcommerce/pull/1854) [`f4df162c5`](https://github.com/graphcommerce-org/graphcommerce/commit/f4df162c59d90298f305f51d409974592ab8e680) - Overlay desktop bottom didn't have a box-shadow ([@paales](https://github.com/paales))
+
+- [#1854](https://github.com/graphcommerce-org/graphcommerce/pull/1854) [`ba92b3ebe`](https://github.com/graphcommerce-org/graphcommerce/commit/ba92b3ebe9dae16f156f6c0d62bdf25a7df1a2a7) - Allow bottom overlays to resize and animate in position ([@paales](https://github.com/paales))
+
 ## 6.0.0
 
 ### Major Changes

package/Overlay/components/OverlayBase.tsx

@@ -119,8 +119,9 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     props.smSpacingTop ?? ((theme) => `calc(${theme.appShell.headerHeightSm} * 0.5)`)
   )(th)
 
-  const { scrollerRef, snap, scroll, getScrollSnapPositions } = useScrollerContext()
+  const { scrollerRef, snap, scroll, getScrollSnapPositions, disableSnap } = useScrollerContext()
   const scrollTo = useScrollTo()
+
   const beforeRef = useRef<HTMLDivElement>(null)
   const overlayRef = useRef<HTMLDivElement>(null)
   const overlayPaneRef = useRef<HTMLDivElement>(null)
@@ -142,6 +143,21 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   )
   const prevVariant = useRef<LayoutOverlayVariant>()
 
+  const openClosePositions = useCallback((): {
+    open: [number, number]
+    closed: [number, number]
+  } => {
+    const { x, y } = getScrollSnapPositions()
+
+    if (variant() === 'left') {
+      return { open: [x.length - 2, 0], closed: [x.length - 1, 0] }
+    }
+    if (variant() === 'right') {
+      return { open: [x.length - 1, 0], closed: [0, 0] }
+    }
+    return { open: [0, y.length - 1], closed: [0, 0] }
+  }, [getScrollSnapPositions, variant])
+
   useIsomorphicLayoutEffect(() => {
     const scroller = scrollerRef.current
     if (!scroller || !beforeRef.current || !overlayRef.current || !overlayPaneRef.current)
@@ -165,35 +181,44 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     }
 
     const forceScrollPosition = () => {
+      if (scroll.animating.get()) return
       // 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()
+        scroll.x.set(positions.closed.x.get())
+        scroll.y.set(positions.closed.y.get())
       } else {
-        scroller.scrollLeft = positions.open.x.get()
-        scroller.scrollTop = positions.open.y.get()
+        disableSnap()
+        scroller.scrollLeft = scroll.x.getPrevious()
+        scroller.scrollTop = scroll.y.getPrevious()
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        scrollTo(openClosePositions().open)
       }
     }
 
     const calcVisible = () => {
       const clampRound = (value: number) => Math.round(Math.max(0, Math.min(1, value)) * 100) / 100
 
-      const scrollX = scroll.x.get()
-      const scrollY = scroll.y.get()
-
+      let vis = 0
       if (variant() === 'left') {
         const closedX = positions.closed.x.get()
-        positions.open.visible.set(closedX === 0 ? 0 : clampRound((scrollX - closedX) / -closedX))
+        vis = closedX === 0 ? 0 : clampRound((scroll.x.get() - closedX) / -closedX)
       }
       if (variant() === 'right') {
         const openedX = positions.open.x.get()
-        positions.open.visible.set(openedX === 0 ? 0 : clampRound(scrollX / openedX))
+        vis = openedX === 0 ? 0 : clampRound(scroll.x.get() / openedX)
       }
       if (variant() === 'bottom') {
         const openedY = positions.open.y.get()
-        positions.open.visible.set(openedY === 0 ? 0 : clampRound(scrollY / openedY))
+        vis = openedY === 0 ? 0 : clampRound(scroll.y.get() / openedY)
       }
+
+      // If we're opening, make sure the visbility doesn't got below the current visibility
+      if (position.get() === OverlayPosition.UNOPENED && positions.open.visible.get() >= vis) return
+
+      positions.open.visible.set(vis)
     }
 
     const handleScroll = () => {
@@ -214,27 +239,35 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
       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 cancelX = scroll.x.on('change', handleScroll)
+    const cancelY = scroll.y.on('change', handleScroll)
 
-    const ro = new ResizeObserver(measureResize)
+    const ro = new ResizeObserver(handleResize)
     ro.observe(scrollerRef.current)
     ro.observe(beforeRef.current)
     ro.observe(overlayPaneRef.current)
     ro.observe(overlayRef.current)
 
-    window.addEventListener('resize', measureResize)
+    window.addEventListener('resize', handleResize)
     return () => {
-      window.removeEventListener('resize', measureResize)
+      window.removeEventListener('resize', handleResize)
       ro.disconnect()
       cancelX()
       cancelY()
     }
-  }, [getScrollSnapPositions, position, positions, scroll, scrollerRef, variant])
+  }, [
+    disableSnap,
+    getScrollSnapPositions,
+    openClosePositions,
+    position,
+    positions,
+    scroll,
+    scrollTo,
+    scrollerRef,
+    variant,
+  ])
 
   // When the component is mounted, we need to set the initial position of the overlay.
   useIsomorphicLayoutEffect(() => {
@@ -242,57 +275,30 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
     if (!scroller || !isPresent) return
 
-    const open = { x: positions.open.x.get(), y: positions.open.y.get() }
-
     if (variant() === 'right') document.body.style.overflow = 'hidden'
 
     if (position.get() !== OverlayPosition.OPENED) {
-      if (direction === 1) {
-        scroller.scrollLeft = positions.closed.x.get()
-        scroller.scrollTop = positions.closed.y.get()
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        scrollTo(open).then(() => {
-          scroller.scrollLeft = positions.open.x.get()
-          scroller.scrollTop = positions.open.y.get()
-          position.set(OverlayPosition.OPENED)
-        })
-      } else {
-        scroller.scrollLeft = open.x
-        scroller.scrollTop = open.y
-        position.set(OverlayPosition.OPENED)
-        snap.set(true)
-      }
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      scrollTo(openClosePositions().open).then(() => position.set(OverlayPosition.OPENED))
     }
-  }, [direction, isPresent, position, positions, scrollTo, scrollerRef, snap, variant])
+  }, [isPresent, openClosePositions, position, scrollTo, scrollerRef, variant])
 
   // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {
     const scroller = scrollerRef.current
     if (isPresent || !scroller) return
 
-    if (position.get() === OverlayPosition.UNOPENED) {
-      position.set(OverlayPosition.CLOSED)
-      scroller.scrollLeft = positions.closed.x.get()
-      scroller.scrollTop = positions.closed.y.get()
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    scrollTo(openClosePositions().closed).then(() => {
       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?.()
-        document.body.style.overflow = ''
-      })
-    }
-  }, [isPresent, position, positions, safeToRemove, scrollTo, scrollerRef])
+    })
+  }, [isPresent, openClosePositions, position, positions, safeToRemove, scrollTo, scrollerRef])
 
   // Only go back to a previous page if the overlay isn't closed.
   const closeOverlay = useCallback(() => {
     if (position.get() !== OverlayPosition.OPENED) return
     position.set(OverlayPosition.CLOSED)
-    // document.body.style.overflow = ''
     onClosed()
   }, [onClosed, position])
 
@@ -547,6 +553,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                   maxHeight: `calc(${dvh(100)} - ${mdSpacingTop})`,
                   paddingTop: mdSpacingTop,
                   boxSizing: 'border-box',
+                  boxShadow: theme.shadows[24],
 
                   scrollbarWidth: 'none',
                   '&::-webkit-scrollbar': {

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",
+  "version": "6.0.1-canary.0",
   "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",
-    "@graphcommerce/framer-scroller": "6.0.0",
-    "@graphcommerce/framer-utils": "6.0.0",
-    "@graphcommerce/image": "6.0.0",
+    "@graphcommerce/framer-next-pages": "6.0.1-canary.0",
+    "@graphcommerce/framer-scroller": "6.0.1-canary.0",
+    "@graphcommerce/framer-utils": "6.0.1-canary.0",
+    "@graphcommerce/image": "6.0.1-canary.0",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.0",
-    "@graphcommerce/prettier-config-pwa": "6.0.0",
-    "@graphcommerce/typescript-config-pwa": "6.0.0",
+    "@graphcommerce/eslint-config-pwa": "6.0.1-canary.0",
+    "@graphcommerce/prettier-config-pwa": "6.0.1-canary.0",
+    "@graphcommerce/typescript-config-pwa": "6.0.1-canary.0",
     "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "typescript": "4.9.5"