@graphcommerce/next-ui 4.13.0 → 4.13.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 4.13.1
+
+### Patch Changes
+
+- [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce) Thanks [@paales](https://github.com/paales)! - Updated to Next.js v12.2.2 and other packages and made compatible
+
+* [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`c5c539c44`](https://github.com/graphcommerce-org/graphcommerce/commit/c5c539c44eeac524cd62ce649e132d2e00333794) Thanks [@paales](https://github.com/paales)! - Make sure the gallery doesn't scroll when overlays are opened
+
+- [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`6f69bc54c`](https://github.com/graphcommerce-org/graphcommerce/commit/6f69bc54c6e0224452817c532ae58d9c332b61ea) Thanks [@paales](https://github.com/paales)! - Prevent back button scrolling when navigating between overlays
+
+* [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43) Thanks [@paales](https://github.com/paales)! - Fix page stacking and scroll restoration when navigating
+
+* Updated dependencies [[`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce), [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43), [`b4936e961`](https://github.com/graphcommerce-org/graphcommerce/commit/b4936e96175fe80717895822e245274db05638bd)]:
+  - @graphcommerce/framer-next-pages@3.2.4
+  - @graphcommerce/framer-scroller@2.1.23
+
 ## 4.13.0
 
 ### Minor Changes

package/FramerScroller/SidebarGallery.tsx

@@ -119,6 +119,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
       <Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
         <MotionBox
           layout
+          layoutDependency={zoomed}
           className={classes.root}
           sx={[
             {
@@ -146,6 +147,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
         >
           <MotionBox
             layout
+            layoutDependency={zoomed}
             className={classes.scrollerContainer}
             sx={[
               {
@@ -193,6 +195,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 <MotionImageAspect
                   key={typeof image.src === 'string' ? image.src : idx}
                   layout
+                  layoutDependency={zoomed}
                   src={image.src}
                   width={image.width}
                   height={image.height}
@@ -209,6 +212,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             </Scroller>
             <MotionBox
               layout
+              layoutDependency={zoomed}
               className={classes.topRight}
               sx={{
                 display: 'grid',
@@ -243,6 +247,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             >
               <ScrollerButton
                 layout
+                layoutDependency={zoomed}
                 direction='left'
                 size='small'
                 className={classes.sliderButtons}
@@ -262,6 +267,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             >
               <ScrollerButton
                 layout
+                layoutDependency={zoomed}
                 direction='right'
                 size='small'
                 className={classes.sliderButtons}
@@ -286,7 +292,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 },
               }}
             >
-              <ScrollerDots layout sx={{ backgroundColor: 'background.paper', boxShadow: 6 }} />
+              <ScrollerDots
+                layout
+                layoutDependency={zoomed}
+                sx={{ backgroundColor: 'background.paper', boxShadow: 6 }}
+              />
             </Box>
           </MotionBox>
 
@@ -319,6 +329,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
           >
             <MotionBox
               layout
+              layoutDependency={zoomed}
               className={classes.sidebar}
               sx={{
                 boxSizing: 'border-box',

package/Layout/components/LayoutHeaderContent.tsx

@@ -1,6 +1,6 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Box, styled, SxProps, Theme } from '@mui/material'
-import { m } from 'framer-motion'
+import { LayoutProps, m } from 'framer-motion'
 import React, { useRef } from 'react'
 import { extendableComponent } from '../../Styles'
 import { useScrollY } from '../hooks/useScrollY'
@@ -16,6 +16,7 @@ export type LayoutHeaderContentProps = FloatingProps & {
   switchPoint?: number
   sx?: SxProps<Theme>
   sxBg?: SxProps<Theme>
+  layout?: LayoutProps['layout']
 }
 
 type OwnerState = { floatingSm: boolean; floatingMd: boolean; scrolled: boolean; divider: boolean }
@@ -36,6 +37,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
     switchPoint = 50,
     sx = [],
     sxBg = [],
+    layout,
   } = props
 
   const scroll = useScrollY()
@@ -142,7 +144,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
               justifyContent: 'start',
             })}
           >
-            <MotionDiv layout='position'>{left}</MotionDiv>
+            <MotionDiv layout={layout}>{left}</MotionDiv>
           </Box>
         )}
         <Box
@@ -175,7 +177,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             },
           })}
         >
-          <MotionDiv layout='position'>{children}</MotionDiv>
+          <MotionDiv layout={layout}>{children}</MotionDiv>
         </Box>
         <Box
           className={classes.right}
@@ -191,7 +193,7 @@ export function LayoutHeaderContent(props: LayoutHeaderContentProps) {
             justifyContent: 'end',
           })}
         >
-          <MotionDiv layout='position'>{right}</MotionDiv>
+          <MotionDiv layout={layout}>{right}</MotionDiv>
         </Box>
         {divider && (
           <Box

package/LayoutDefault/components/LayoutDefault.tsx

@@ -39,8 +39,10 @@ export function LayoutDefault(props: LayoutDefaultProps) {
     sx = [],
   } = props
 
-  const offset = useScrollOffset().y
-  const scrollWithOffset = useTransform(useViewportScroll().scrollY, (y) => y + offset)
+  const scrollWithOffset = useTransform(
+    [useViewportScroll().scrollY, useScrollOffset()],
+    ([y, offset]: number[]) => y + offset,
+  )
 
   const classes = withState({ noSticky })
 

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -1,5 +1,6 @@
 import { usePageContext, useGo, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { usePresence } from 'framer-motion'
 import type { SetOptional } from 'type-fest'
 import { OverlayBase, LayoutOverlayBaseProps } from '../../Overlay/components/OverlayBase'
@@ -19,7 +20,7 @@ export function LayoutOverlay(props: LayoutOverlayProps) {
 
   const { closeSteps, active, direction } = usePageContext()
   const onCloseHandler = useGo(closeSteps * -1)
-  const offsetPageY = useScrollOffset().y
+  const offsetPageY = useMotionValueValue(useScrollOffset(), (v) => v)
   const [isPresent, safeToRemove] = usePresence()
 
   return (

package/Navigation/components/NavigationOverlay.tsx

@@ -105,6 +105,7 @@ export function NavigationOverlay(props: NavigationOverlayProps) {
             floatingMd={false}
             floatingSm={false}
             switchPoint={0}
+            layout='position'
             left={
               showBack && (
                 <Fab

package/PageMeta/PageMeta.tsx

@@ -1,10 +1,8 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
-import {
-  resolveHref,
-  addBasePath,
-  addLocale,
-  getDomainLocale,
-} from 'next/dist/shared/lib/router/router'
+import { addBasePath } from 'next/dist/client/add-base-path'
+import { addLocale } from 'next/dist/client/add-locale'
+import { getDomainLocale } from 'next/dist/client/get-domain-locale'
+import { resolveHref } from 'next/dist/shared/lib/router/router'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.13.0",
+  "version": "4.13.1",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -15,15 +15,15 @@
   },
   "dependencies": {
     "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/cache": "^11.7.1",
-    "@emotion/react": "^11.9.0",
+    "@emotion/cache": "^11.9.3",
+    "@emotion/react": "^11.9.3",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "3.2.3",
-    "@graphcommerce/framer-scroller": "2.1.22",
+    "@emotion/styled": "^11.9.3",
+    "@graphcommerce/framer-next-pages": "3.2.4",
+    "@graphcommerce/framer-scroller": "2.1.23",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/image": "3.1.7",
-    "react-is": "^18.1.0",
+    "react-is": "^18.2.0",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.1.0"
   },
@@ -38,12 +38,12 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.8",
+    "@graphcommerce/eslint-config-pwa": "^4.1.9",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.3",
+    "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1",
     "@types/react-is": "^17.0.3",
     "type-fest": "^2.12.2",
-    "typescript": "4.7.3"
+    "typescript": "4.7.4"
   }
 }