@graphcommerce/framer-utils 5.1.0-canary.2 → 5.1.0-canary.4

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 5.1.0-canary.4
+
+### Patch Changes
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`0025ad80f`](https://github.com/graphcommerce-org/graphcommerce/commit/0025ad80fb82d5d1e6c786bb8b5f39b2456c0932) - Renamed clientSizeCssVar.y/x to dvh(100) and dvw(100) ([@paales](https://github.com/paales))
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`f44a05a6c`](https://github.com/graphcommerce-org/graphcommerce/commit/f44a05a6cedadc17e44c87f53cad5f462bc52aba) - Use a singlular useElementScroll and provide ther scroll from the useScrollerContext ([@paales](https://github.com/paales))
+
+- [#1755](https://github.com/graphcommerce-org/graphcommerce/pull/1755) [`c77f49e6e`](https://github.com/graphcommerce-org/graphcommerce/commit/c77f49e6ed6af0bf2890d51da4eaa4ac70ee2cc9) - clientSizeCssVar.x had a fallback to 100vw instead of 100vh ([@paales](https://github.com/paales))
+
+## 5.1.0-canary.3
+
+### Patch Changes
+
+- [#1752](https://github.com/graphcommerce-org/graphcommerce/pull/1752) [`2a6a4d9ec`](https://github.com/graphcommerce-org/graphcommerce/commit/2a6a4d9ecfa1b58a66ba9b9d00016d6feda9aa95) - Updated dependencies to latest versions, except for nextjs; Solve tons of peer dependency issues.
+
+  - Updated the @mui/material package
+  - Removed dependencies on react-hook-form-mui and @playwright/test
+  - Upgraded dependencies including type-fest and graphql-mesh
+  - Solved peer dependency issues ([@paales](https://github.com/paales))
+
 ## 5.1.0-canary.2
 
 ## 5.1.0-canary.1

package/hooks/useElementScroll.ts

@@ -5,7 +5,7 @@ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
 type ScrollMotionValue = { x: number; y: number; xMax: number; yMax: number }
 
-interface ScrollMotionValues {
+export interface ScrollMotionValues {
   x: MotionValue<number>
   y: MotionValue<number>
   xProgress: MotionValue<number>

package/hooks/{useClientSize.ts → useMeasureDynamicViewportSize.ts}

@@ -7,14 +7,28 @@ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 export type UseClientSizeReturn = { x: MotionValue<string>; y: MotionValue<string> }
 export type UseClientSizeOptions = { x?: string; y?: string }
 
+/** @deprecated Please use dvh() or dvw() instead */
 export const clientSizeCssVar = {
   y: `var(--client-size-y, 100vh)`,
-  x: `var(--client-size-x, 100vh)`,
+  x: `var(--client-size-x, 100vw)`,
+}
+
+export const dvh = (p = 100) => {
+  if (p === 100) return 'var(--client-size-y, 100vh)'
+  return `calc(var(--client-size-y, 100vh) * ${p / 100})`
+}
+export const dvw = (p = 100) => {
+  if (p === 100) return 'var(--client-size-x, 100vw)'
+  return `calc(var(--client-size-x, 100vw) * ${p / 100})`
 }
 
 let watching = false
 
-export function useClientSizeCssVar() {
+/**
+ * Calculates the dvh and dvw css variables. Method should be deprecated when the real dvh/dvw are
+ * widelt available.
+ */
+export function useMeasureDynamicViewportSize() {
   useIsomorphicLayoutEffect(() => {
     if (watching === true) return () => {}
 

package/index.ts

@@ -2,7 +2,7 @@ export * from './utils/clientSize'
 
 export * from './utils/styled'
 
-export * from './hooks/useClientSize'
+export * from './hooks/useMeasureDynamicViewportSize'
 export * from './hooks/useConstant'
 export * from './hooks/useElementScroll'
 export * from './hooks/useIsomorphicLayoutEffect'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-utils",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.1.0-canary.2",
+  "version": "5.1.0-canary.4",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,15 +15,14 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^5.1.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "^5.1.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "^5.1.0-canary.2",
-    "@playwright/test": "^1.21.1"
+    "@graphcommerce/eslint-config-pwa": "5.1.0-canary.4",
+    "@graphcommerce/prettier-config-pwa": "5.1.0-canary.4",
+    "@graphcommerce/typescript-config-pwa": "5.1.0-canary.4"
   },
   "peerDependencies": {
-    "framer-motion": "^6.2.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "framer-motion": "^7.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "framesync": "^6.1.1"