@graphcommerce/framer-utils 2.103.20 → 3.0.1

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 +40 -28
  2. package/hooks/useElementScroll.ts +18 -18
  3. package/package.json +9 -12
package/CHANGELOG.md CHANGED
@@ -1,49 +1,62 @@
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.1
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)
5
+ ### Patch Changes
7
6
 
7
+ - [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
8
+ Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
9
+ so that the packages link to back to the website and repository
8
10
 
9
- ### Bug Fixes
11
+ ## 3.0.0
10
12
 
11
- * clientSize.x was incorrect ([39d12c4](https://github.com/ho-nl/m2-pwa/commit/39d12c4b583b7806f943dbd08c31b2dd940cc74b))
13
+ ### Major Changes
12
14
 
15
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
16
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
17
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
13
18
 
19
+ All notable changes to this project will be documented in this file. See
20
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
14
21
 
22
+ ## [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)
23
+
24
+ ### Bug Fixes
15
25
 
26
+ - clientSize.x was incorrect
27
+ ([39d12c4](https://github.com/ho-nl/m2-pwa/commit/39d12c4b583b7806f943dbd08c31b2dd940cc74b))
16
28
 
17
29
  ## [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
30
 
19
31
  **Note:** Version bump only for package @graphcommerce/framer-utils
20
32
 
21
-
22
-
23
-
24
-
25
33
  # 2.103.0 (2021-09-27)
26
34
 
27
-
28
35
  ### Bug Fixes
29
36
 
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
-
37
+ - bottom sheet is not properly sized when scrolled
38
+ ([93a1dc4](https://github.com/ho-nl/m2-pwa/commit/93a1dc40c37de74a8223657add77c51d51a24d92))
39
+ - **framer-sheet:** bottom sheet does not resize properly
40
+ ([2ae89db](https://github.com/ho-nl/m2-pwa/commit/2ae89dbd651acba10f40ac68956213dd744e2247))
41
+ - **framer-utils:** reading of values didn't happen at the right moment, causing unnessary layout
42
+ reflows
43
+ ([b119262](https://github.com/ho-nl/m2-pwa/commit/b119262ffb2907a215f9f37f12ef6cf6f62fadcd))
44
+ - **framer-utils:** state wasn't directly set when initializing useMotionValueValue
45
+ ([3560456](https://github.com/ho-nl/m2-pwa/commit/35604562a4a39fef3b5dc4c0305ce0753608d9e8))
46
+ - ignore md files from triggering version updates
47
+ ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
36
48
 
37
49
  ### Features
38
50
 
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
-
51
+ - **content-header:** text buttons on mobile - pill buttons on desktop
52
+ ([1438838](https://github.com/ho-nl/m2-pwa/commit/1438838fbd2aac1e3510368f2a657314ebd05d2d))
53
+ - **framer-utils:** created framer-utils and implemented for framer-sheet and framer-next-pages
54
+ ([788bf28](https://github.com/ho-nl/m2-pwa/commit/788bf282d4a38ec5e78ab7244065c540dfc132a1))
55
+ - **playwright:** added new playwright package to enable browser testing
56
+ ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
57
+ - renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
58
+ [@reachdigital](https://github.com/reachdigital)
59
+ ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
47
60
 
48
61
  # Change Log
49
62
 
@@ -54,11 +67,10 @@ All notable changes to this project will be documented in this file. See
54
67
 
55
68
  ### Bug Fixes
56
69
 
57
- - **framer-utils:** reading of values didn't happen at the right moment, causing
58
- unnessary layout reflows
70
+ - **framer-utils:** reading of values didn't happen at the right moment, causing unnessary layout
71
+ reflows
59
72
  ([b119262](https://github.com/ho-nl/m2-pwa/commit/b119262ffb2907a215f9f37f12ef6cf6f62fadcd))
60
- - **framer-utils:** state wasn't directly set when initializing
61
- useMotionValueValue
73
+ - **framer-utils:** state wasn't directly set when initializing useMotionValueValue
62
74
  ([3560456](https://github.com/ho-nl/m2-pwa/commit/35604562a4a39fef3b5dc4c0305ce0753608d9e8))
63
75
 
64
76
  ## [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,13 @@
1
1
  {
2
2
  "name": "@graphcommerce/framer-utils",
3
- "version": "2.103.20",
3
+ "homepage": "https://www.graphcommerce.org/",
4
+ "repository": "github:graphcommerce-org/graphcommerce",
5
+ "version": "3.0.1",
4
6
  "sideEffects": false,
5
7
  "scripts": {
6
8
  "dev": "tsc -W"
7
9
  },
8
10
  "prettier": "@graphcommerce/prettier-config-pwa",
9
- "browserslist": [
10
- "extends @graphcommerce/browserslist-config-pwa"
11
- ],
12
11
  "eslintConfig": {
13
12
  "extends": "@graphcommerce/eslint-config-pwa",
14
13
  "parserOptions": {
@@ -16,19 +15,17 @@
16
15
  }
17
16
  },
18
17
  "devDependencies": {
19
- "@graphcommerce/browserslist-config-pwa": "^3.0.3",
20
- "@graphcommerce/eslint-config-pwa": "^3.1.9",
21
- "@graphcommerce/prettier-config-pwa": "^3.0.5",
22
- "@graphcommerce/typescript-config-pwa": "^3.1.2",
23
- "@playwright/test": "^1.17.1"
18
+ "@graphcommerce/eslint-config-pwa": "^4.0.1",
19
+ "@graphcommerce/prettier-config-pwa": "^4.0.1",
20
+ "@graphcommerce/typescript-config-pwa": "^4.0.1",
21
+ "@playwright/test": "^1.18.1"
24
22
  },
25
23
  "peerDependencies": {
26
- "framer-motion": "^5.4.5",
24
+ "framer-motion": "^6.2.4",
27
25
  "react": "^17.0.2",
28
26
  "react-dom": "^17.0.2"
29
27
  },
30
28
  "dependencies": {
31
29
  "framesync": "^6.1.0"
32
- },
33
- "gitHead": "06b4426d199de9ec2a9d2ac86d42ab047e59e7e7"
30
+ }
34
31
  }