@graphcommerce/framer-utils 2.103.21 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +34 -30
  2. package/hooks/useElementScroll.ts +18 -18
  3. package/package.json +7 -12
package/CHANGELOG.md CHANGED
@@ -1,49 +1,54 @@
1
1
  # Change Log
2
2
 
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
3
+ ## 3.0.0
5
4
 
6
- ## [2.103.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-utils@2.103.5...@graphcommerce/framer-utils@2.103.6) (2021-10-09)
7
-
8
-
9
- ### Bug Fixes
5
+ ### Major Changes
10
6
 
11
- * clientSize.x was incorrect ([39d12c4](https://github.com/ho-nl/m2-pwa/commit/39d12c4b583b7806f943dbd08c31b2dd940cc74b))
7
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
8
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
9
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
12
10
 
11
+ All notable changes to this project will be documented in this file. See
12
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
13
13
 
14
+ ## [2.103.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-utils@2.103.5...@graphcommerce/framer-utils@2.103.6) (2021-10-09)
14
15
 
16
+ ### Bug Fixes
15
17
 
18
+ - clientSize.x was incorrect
19
+ ([39d12c4](https://github.com/ho-nl/m2-pwa/commit/39d12c4b583b7806f943dbd08c31b2dd940cc74b))
16
20
 
17
21
  ## [2.103.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-utils@2.103.0...@graphcommerce/framer-utils@2.103.1) (2021-09-27)
18
22
 
19
23
  **Note:** Version bump only for package @graphcommerce/framer-utils
20
24
 
21
-
22
-
23
-
24
-
25
25
  # 2.103.0 (2021-09-27)
26
26
 
27
-
28
27
  ### Bug Fixes
29
28
 
30
- * bottom sheet is not properly sized when scrolled ([93a1dc4](https://github.com/ho-nl/m2-pwa/commit/93a1dc40c37de74a8223657add77c51d51a24d92))
31
- * **framer-sheet:** bottom sheet does not resize properly ([2ae89db](https://github.com/ho-nl/m2-pwa/commit/2ae89dbd651acba10f40ac68956213dd744e2247))
32
- * **framer-utils:** reading of values didn't happen at the right moment, causing unnessary layout reflows ([b119262](https://github.com/ho-nl/m2-pwa/commit/b119262ffb2907a215f9f37f12ef6cf6f62fadcd))
33
- * **framer-utils:** state wasn't directly set when initializing useMotionValueValue ([3560456](https://github.com/ho-nl/m2-pwa/commit/35604562a4a39fef3b5dc4c0305ce0753608d9e8))
34
- * ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
35
-
29
+ - bottom sheet is not properly sized when scrolled
30
+ ([93a1dc4](https://github.com/ho-nl/m2-pwa/commit/93a1dc40c37de74a8223657add77c51d51a24d92))
31
+ - **framer-sheet:** bottom sheet does not resize properly
32
+ ([2ae89db](https://github.com/ho-nl/m2-pwa/commit/2ae89dbd651acba10f40ac68956213dd744e2247))
33
+ - **framer-utils:** reading of values didn't happen at the right moment, causing unnessary layout
34
+ reflows
35
+ ([b119262](https://github.com/ho-nl/m2-pwa/commit/b119262ffb2907a215f9f37f12ef6cf6f62fadcd))
36
+ - **framer-utils:** state wasn't directly set when initializing useMotionValueValue
37
+ ([3560456](https://github.com/ho-nl/m2-pwa/commit/35604562a4a39fef3b5dc4c0305ce0753608d9e8))
38
+ - ignore md files from triggering version updates
39
+ ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
36
40
 
37
41
  ### Features
38
42
 
39
- * **content-header:** text buttons on mobile - pill buttons on desktop ([1438838](https://github.com/ho-nl/m2-pwa/commit/1438838fbd2aac1e3510368f2a657314ebd05d2d))
40
- * **framer-utils:** created framer-utils and implemented for framer-sheet and framer-next-pages ([788bf28](https://github.com/ho-nl/m2-pwa/commit/788bf282d4a38ec5e78ab7244065c540dfc132a1))
41
- * **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
42
- * renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
43
-
44
-
45
-
46
-
43
+ - **content-header:** text buttons on mobile - pill buttons on desktop
44
+ ([1438838](https://github.com/ho-nl/m2-pwa/commit/1438838fbd2aac1e3510368f2a657314ebd05d2d))
45
+ - **framer-utils:** created framer-utils and implemented for framer-sheet and framer-next-pages
46
+ ([788bf28](https://github.com/ho-nl/m2-pwa/commit/788bf282d4a38ec5e78ab7244065c540dfc132a1))
47
+ - **playwright:** added new playwright package to enable browser testing
48
+ ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
49
+ - renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
50
+ [@reachdigital](https://github.com/reachdigital)
51
+ ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
47
52
 
48
53
  # Change Log
49
54
 
@@ -54,11 +59,10 @@ All notable changes to this project will be documented in this file. See
54
59
 
55
60
  ### Bug Fixes
56
61
 
57
- - **framer-utils:** reading of values didn't happen at the right moment, causing
58
- unnessary layout reflows
62
+ - **framer-utils:** reading of values didn't happen at the right moment, causing unnessary layout
63
+ reflows
59
64
  ([b119262](https://github.com/ho-nl/m2-pwa/commit/b119262ffb2907a215f9f37f12ef6cf6f62fadcd))
60
- - **framer-utils:** state wasn't directly set when initializing
61
- useMotionValueValue
65
+ - **framer-utils:** state wasn't directly set when initializing useMotionValueValue
62
66
  ([3560456](https://github.com/ho-nl/m2-pwa/commit/35604562a4a39fef3b5dc4c0305ce0753608d9e8))
63
67
 
64
68
  ## [2.102.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-utils@2.102.1...@graphcommerce/framer-utils@2.102.2) (2021-08-04)
package/hooks/useElementScroll.ts CHANGED
@@ -13,11 +13,10 @@ interface ScrollMotionValues {
13
13
  yMax: MotionValue<number>
14
14
  }
15
15
 
16
- const setProgress = (offset: number, maxOffset: number, value: MotionValue) => {
17
- value.set(!offset || !maxOffset ? 0 : offset / maxOffset)
18
- }
19
-
20
- export function useElementScroll(ref?: RefObject<HTMLElement | undefined>): ScrollMotionValues {
16
+ export function useElementScroll(
17
+ ref?: RefObject<HTMLElement | undefined>,
18
+ noScroll = 0,
19
+ ): ScrollMotionValues {
21
20
  const values = useConstant<ScrollMotionValues>(() => ({
22
21
  x: motionValue(0),
23
22
  y: motionValue(0),
@@ -31,22 +30,23 @@ export function useElementScroll(ref?: RefObject<HTMLElement | undefined>): Scro
31
30
  const element = ref?.current
32
31
  if (!element) return () => {}
33
32
 
34
- const updater = () => {
35
- if (!element) return
33
+ const setProgress = (offset: number, maxOffset: number, value: MotionValue) => {
34
+ value.set(!offset && !maxOffset ? noScroll : offset / maxOffset)
35
+ }
36
36
 
37
+ const updater = () => {
37
38
  sync.read(() => {
38
- values.x.set(element.scrollLeft)
39
- values.y.set(element.scrollTop)
40
- values.xMax.set(element.scrollWidth - element.offsetWidth)
41
- values.yMax.set(element.scrollHeight - element.offsetHeight)
39
+ const { scrollLeft, scrollTop, scrollWidth, scrollHeight, offsetWidth, offsetHeight } =
40
+ element
41
+
42
+ values.x.set(scrollLeft)
43
+ values.y.set(scrollTop)
44
+ values.xMax.set(scrollWidth - offsetWidth)
45
+ values.yMax.set(scrollHeight - offsetHeight)
42
46
 
43
47
  // Set 0-1 progress
44
- setProgress(element.scrollLeft, element.scrollWidth - element.offsetWidth, values.xProgress)
45
- setProgress(
46
- element.scrollTop,
47
- element.scrollHeight - element.offsetHeight,
48
- values.yProgress,
49
- )
48
+ setProgress(scrollLeft, scrollWidth - offsetWidth, values.xProgress)
49
+ setProgress(scrollTop, scrollHeight - offsetHeight, values.yProgress)
50
50
  })
51
51
  }
52
52
 
@@ -59,7 +59,7 @@ export function useElementScroll(ref?: RefObject<HTMLElement | undefined>): Scro
59
59
  element.removeEventListener('scroll', updater)
60
60
  ro.disconnect()
61
61
  }
62
- }, [ref, values.x, values.xMax, values.xProgress, values.y, values.yMax, values.yProgress])
62
+ }, [noScroll, ref, values])
63
63
 
64
64
  return values
65
65
  }
package/package.json CHANGED
@@ -1,14 +1,11 @@
1
1
  {
2
2
  "name": "@graphcommerce/framer-utils",
3
- "version": "2.103.21",
3
+ "version": "3.0.0",
4
4
  "sideEffects": false,
5
5
  "scripts": {
6
6
  "dev": "tsc -W"
7
7
  },
8
8
  "prettier": "@graphcommerce/prettier-config-pwa",
9
- "browserslist": [
10
- "extends @graphcommerce/browserslist-config-pwa"
11
- ],
12
9
  "eslintConfig": {
13
10
  "extends": "@graphcommerce/eslint-config-pwa",
14
11
  "parserOptions": {
@@ -16,19 +13,17 @@
16
13
  }
17
14
  },
18
15
  "devDependencies": {
19
- "@graphcommerce/browserslist-config-pwa": "^3.0.3",
20
- "@graphcommerce/eslint-config-pwa": "^3.1.10",
21
- "@graphcommerce/prettier-config-pwa": "^3.0.5",
22
- "@graphcommerce/typescript-config-pwa": "^3.1.2",
23
- "@playwright/test": "^1.17.1"
16
+ "@graphcommerce/eslint-config-pwa": "^4.0.0",
17
+ "@graphcommerce/prettier-config-pwa": "^4.0.0",
18
+ "@graphcommerce/typescript-config-pwa": "^4.0.0",
19
+ "@playwright/test": "^1.18.1"
24
20
  },
25
21
  "peerDependencies": {
26
- "framer-motion": "^5.4.5",
22
+ "framer-motion": "^6.2.4",
27
23
  "react": "^17.0.2",
28
24
  "react-dom": "^17.0.2"
29
25
  },
30
26
  "dependencies": {
31
27
  "framesync": "^6.1.0"
32
- },
33
- "gitHead": "bc5423d7547f8685db4cd8fc6d8f7a2a51ebed05"
28
+ }
34
29
  }