@graphcommerce/next-ui 6.2.0-canary.63 → 6.2.0-canary.65

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.2.0-canary.65
+
+## 6.2.0-canary.64
+
+### Patch Changes
+
+- [#1998](https://github.com/graphcommerce-org/graphcommerce/pull/1998) [`fdbdcb76f`](https://github.com/graphcommerce-org/graphcommerce/commit/fdbdcb76f918cf74b22253bd641a04c490ceb140) - Fixed users accidentally being able to scroll overlays out of view during open animation ([@bramvanderholst](https://github.com/bramvanderholst))
+
 ## 6.2.0-canary.63
 
 ## 6.2.0-canary.62

package/FramerScroller/SidebarGallery.tsx

@@ -48,6 +48,7 @@ export type SidebarGalleryProps = {
   aspectRatio?: [number, number]
   routeHash?: string
   sx?: SxProps<Theme>
+  disableZoom?: boolean
 }
 
 export function SidebarGallery(props: SidebarGalleryProps) {
@@ -57,6 +58,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     aspectRatio: [width, height] = [1, 1],
     sx,
     routeHash = 'gallery',
+    disableZoom,
   } = props
 
   const router = useRouter()
@@ -76,6 +78,9 @@ export function SidebarGallery(props: SidebarGalleryProps) {
   }, [prevRoute?.pathname, route, router, zoomed])
 
   const toggle = () => {
+    if (disableZoom) {
+      return
+    }
     if (!zoomed) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       router.push(route, undefined, { shallow: true })
@@ -192,7 +197,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   height: '100%',
                   gridAutoColumns: `100%`,
                   gridTemplateRows: `100%`,
-                  cursor: 'zoom-in',
+                  cursor: disableZoom ? 'auto' : 'zoom-in',
                 },
                 zoomed && {
                   height: `var(--client-size-y)`,
@@ -232,16 +237,22 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 right: theme.spacings.sm,
               }}
             >
-              <Fab
-                size='small'
-                className={classes.toggleIcon}
-                disabled={!hasImages}
-                onMouseUp={toggle}
-                aria-label='Toggle Fullscreen'
-                sx={{ boxShadow: 6 }}
-              >
-                {!zoomed ? <IconSvg src={iconFullscreen} /> : <IconSvg src={iconFullscreenExit} />}
-              </Fab>
+              {!disableZoom && (
+                <Fab
+                  size='small'
+                  className={classes.toggleIcon}
+                  disabled={!hasImages}
+                  onMouseUp={toggle}
+                  aria-label='Toggle Fullscreen'
+                  sx={{ boxShadow: 6 }}
+                >
+                  {!zoomed ? (
+                    <IconSvg src={iconFullscreen} />
+                  ) : (
+                    <IconSvg src={iconFullscreenExit} />
+                  )}
+                </Fab>
+              )}
             </MotionBox>
             <Box
               className={classes.centerLeft}

package/Overlay/components/OverlayBase.tsx

@@ -15,7 +15,6 @@ import {
   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'
@@ -196,7 +195,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         scroller.scrollLeft = scroll.x.getPrevious()
         scroller.scrollTop = scroll.y.getPrevious()
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        scrollTo(openClosePositions().open)
+        scrollTo(openClosePositions().open, { stopAnimationOnScroll: false })
       }
     }
 
@@ -281,7 +280,9 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
 
     if (position.get() !== OverlayPosition.OPENED && !scroll.animating.get()) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      scrollTo(openClosePositions().open).then(() => position.set(OverlayPosition.OPENED))
+      scrollTo(openClosePositions().open, { stopAnimationOnScroll: false }).then(() =>
+        position.set(OverlayPosition.OPENED),
+      )
     }
   }, [isPresent, openClosePositions, position, scroll.animating, scrollTo, scrollerRef, variant])
 
@@ -291,7 +292,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     if (isPresent || !scroller) return
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    scrollTo(openClosePositions().closed).then(() => {
+    scrollTo(openClosePositions().closed, { stopAnimationOnScroll: false }).then(() => {
       safeToRemove?.()
       document.body.style.overflow = ''
     })

package/package.json

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