@graphcommerce/framer-utils 3.0.4 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 3.1.1
+
+### Patch Changes
+
+- [#1369](https://github.com/graphcommerce-org/graphcommerce/pull/1369) [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
+
+## 3.1.0
+
+### Minor Changes
+
+- [#1360](https://github.com/graphcommerce-org/graphcommerce/pull/1360) [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c) Thanks [@paales](https://github.com/paales)! - Add a clientSizeCssVar that will change when the viewport changes size, as a better alternative for 100vh and in preparation for 100dvh
+
+## 3.0.5
+
+### Patch Changes
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`bec88d0d7`](https://github.com/graphcommerce-org/graphcommerce/commit/bec88d0d70b679e15150917df89986ecee5b39a6) Thanks [@paales](https://github.com/paales)! - ScrollerButton is rendered while it shouldn’t because there is a rounding error in scroll and offset values
+
 ## 3.0.4
 
 ### Patch Changes

package/hooks/useClientSize.ts

@@ -2,10 +2,40 @@ import { motionValue, MotionValue } from 'framer-motion'
 import { useEffect } from 'react'
 import { clientSize } from '../utils/clientSize'
 import { useConstant } from './useConstant'
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
 export type UseClientSizeReturn = { x: MotionValue<string>; y: MotionValue<string> }
 export type UseClientSizeOptions = { x?: string; y?: string }
 
+export const clientSizeCssVar = {
+  y: `var(--client-size-y, 100vh)`,
+  x: `var(--client-size-x, 100vh)`,
+}
+
+let watching = false
+
+export function useClientSizeCssVar() {
+  useIsomorphicLayoutEffect(() => {
+    if (watching === true) return () => {}
+
+    const recalc = () => {
+      if (typeof window !== 'undefined') {
+        const { x, y } = clientSize
+        document.body.style.setProperty('--client-size-x', `${x.get()}px`)
+        document.body.style.setProperty('--client-size-y', `${y.get()}px`)
+      }
+    }
+    recalc()
+    watching = true
+    const reset = clientSize.y.onChange(recalc)
+
+    return () => {
+      watching = false
+      reset()
+    }
+  }, [])
+}
+
 /**
  * Get the clientSize x|y as a motionValue
  *

package/hooks/useElementScroll.ts

@@ -30,23 +30,22 @@ export function useElementScroll(
     const element = ref?.current
     if (!element) return () => {}
 
-    const setProgress = (offset: number, maxOffset: number, value: MotionValue) => {
-      value.set(!offset && !maxOffset ? noScroll : offset / maxOffset)
-    }
-
     const updater = () => {
       sync.read(() => {
         const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } =
           element
 
+        const xMax = Math.max(0, scrollWidth - offsetWidth)
+        const yMax = Math.max(0, scrollHeight - offsetHeight)
+
         values.x.set(scrollLeft)
         values.y.set(scrollTop)
-        values.xMax.set(scrollWidth - offsetWidth)
-        values.yMax.set(scrollHeight - offsetHeight)
+        values.xMax.set(xMax)
+        values.yMax.set(yMax)
 
         // Set 0-1 progress
-        setProgress(scrollLeft, scrollWidth - offsetWidth, values.xProgress)
-        setProgress(scrollTop, scrollHeight - offsetHeight, values.yProgress)
+        values.xProgress.set(!scrollLeft && !xMax ? noScroll : scrollLeft / xMax)
+        values.yProgress.set(!scrollTop && !yMax ? noScroll : scrollTop / yMax)
       })
     }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-utils",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.4",
+  "version": "3.1.1",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,10 +15,10 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.5",
-    "@graphcommerce/prettier-config-pwa": "^4.0.3",
+    "@graphcommerce/eslint-config-pwa": "^4.1.3",
+    "@graphcommerce/prettier-config-pwa": "^4.0.5",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.19.2"
+    "@playwright/test": "^1.20.1"
   },
   "peerDependencies": {
     "framer-motion": "^6.2.4",