@graphcommerce/next-ui 3.21.1 → 3.21.5

package/AnimatedRow/index.tsx

@@ -10,7 +10,7 @@ export default function AnimatedRow(props: AnimatedRowProps) {
   return (
     <m.div
       {...props}
-      layout
+      layout='size'
       initial={{ opacity: 0, height: 0 }}
       animate={{ opacity: 1, height: 'auto' }}
       exit={{ opacity: 0, height: 0 }}

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.21.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.4...@graphcommerce/next-ui@3.21.5) (2021-12-20)
+
+
+### Bug Fixes
+
+* animations would run on background page, make sure animations are not running when page is not active ([2fcf4b8](https://github.com/ho-nl/m2-pwa/commit/2fcf4b8a853108147477e3a67c7ea202abb2842f))
+
+
+
+
+
+## [3.21.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.3...@graphcommerce/next-ui@3.21.4) (2021-12-20)
+
+
+### Bug Fixes
+
+* **framer-scroller:** remove jank from scroller when opening ([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
+
+
+
+
+
 ## [3.21.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.0...@graphcommerce/next-ui@3.21.1) (2021-12-17)
 
 

package/FramerScroller/components/SidebarSlider.tsx

@@ -80,12 +80,12 @@ export default function SidebarSlider(props: SidebarSliderProps) {
               {children}
             </Scroller>
             <div className={classes.centerLeft}>
-              <ScrollerButton layout direction='left' className={classes.sliderButtons}>
+              <ScrollerButton direction='left' className={classes.sliderButtons}>
                 <SvgImageSimple src={iconChevronLeft} />
               </ScrollerButton>
             </div>
             <div className={classes.centerRight}>
-              <ScrollerButton layout direction='right' className={classes.sliderButtons}>
+              <ScrollerButton direction='right' className={classes.sliderButtons}>
                 <SvgImageSimple src={iconChevronRight} />
               </ScrollerButton>
             </div>

package/LayoutDefault/components/LayoutDefault.tsx

@@ -1,4 +1,4 @@
-import { usePageRouter, useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { useTransform, useViewportScroll } from 'framer-motion'

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -2,14 +2,7 @@ import { usePageContext, usePageRouter, useScrollOffset } from '@graphcommerce/f
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import { useElementScroll, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { makeStyles, Theme, ClickAwayListener } from '@material-ui/core'
-import {
-  m,
-  MotionValue,
-  useDomEvent,
-  useMotionValue,
-  usePresence,
-  useTransform,
-} from 'framer-motion'
+import { m, useDomEvent, useMotionValue, usePresence, useTransform } from 'framer-motion'
 import React, { useCallback, useEffect, useRef } from 'react'
 import LayoutProvider from '../../Layout/components/LayoutProvider'
 import { UseStyles } from '../../Styles'
@@ -215,6 +208,7 @@ const useStyles = makeStyles(
       left: 0,
       backgroundColor: 'rgba(0, 0, 0, 0.5)',
       WebkitTapHighlightColor: 'transparent',
+      willChange: 'opacity',
     },
   }),
   { name: 'Overlay' },
@@ -334,7 +328,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
   // Create the exact position for the LayoutProvider which offsets the top of the overlay
   const offsetPageY = useScrollOffset().y
   const scrollWithoffset = useTransform(
-    [scroll.y, positions.open.y, offsetY] as MotionValue<number | string>[],
+    [scroll.y, positions.open.y, offsetY],
     ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
   )
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.21.1",
+  "version": "3.21.5",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,18 +10,18 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.4",
-    "@graphcommerce/framer-scroller": "^1.1.11",
-    "@graphcommerce/framer-utils": "^2.103.19",
-    "@graphcommerce/graphql": "^2.105.9",
-    "@graphcommerce/image": "^2.105.8",
+    "@graphcommerce/framer-next-pages": "^2.108.7",
+    "@graphcommerce/framer-scroller": "^1.1.15",
+    "@graphcommerce/framer-utils": "^2.103.20",
+    "@graphcommerce/graphql": "^2.105.11",
+    "@graphcommerce/image": "^2.105.10",
     "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
     "clsx": "^1.1.1",
-    "framer-motion": "^5.5.1",
-    "graphql": "^16.1.0",
+    "framer-motion": "^5.5.5",
+    "graphql": "^16.2.0",
     "next": "^12.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -32,10 +32,10 @@
     "type-fest": "^2.8.0"
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.8",
-    "@graphcommerce/prettier-config-pwa": "^3.0.4",
-    "@graphcommerce/typescript-config-pwa": "^3.1.1",
+    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
+    "@graphcommerce/eslint-config-pwa": "^3.1.9",
+    "@graphcommerce/prettier-config-pwa": "^3.0.5",
+    "@graphcommerce/typescript-config-pwa": "^3.1.2",
     "@playwright/test": "^1.17.1",
     "@types/react-is": "^17.0.3",
     "graphql-tag": "2.12.6",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "6cab980582a62a8eee8d5f9bd77583cabc32c6f8"
+  "gitHead": "ecbde6cbcb36e0e2429b6d777972c12c47822385"
 }