@graphcommerce/next-ui 6.0.0-canary.29 → 6.0.0-canary.30
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 6.0.0-canary.30
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1829](https://github.com/graphcommerce-org/graphcommerce/pull/1829) [`5f5f0dd1e`](https://github.com/graphcommerce-org/graphcommerce/commit/5f5f0dd1e0960b4cad694c5aaddffc7ccfc2bb1a) - Fix overlay right variant closing automatically in Firefox ([@bramvanderholst](https://github.com/bramvanderholst))
|
|
8
|
+
|
|
9
|
+
- [#1829](https://github.com/graphcommerce-org/graphcommerce/pull/1829) [`52ecfc2ad`](https://github.com/graphcommerce-org/graphcommerce/commit/52ecfc2ad25fc6ef92465862fb94c1829bdd7c52) - Dynamic viewport height when supported ([@bramvanderholst](https://github.com/bramvanderholst))
|
|
10
|
+
|
|
3
11
|
## 6.0.0-canary.29
|
|
4
12
|
|
|
5
13
|
## 6.0.0-canary.28
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { useScrollerContext } from '@graphcommerce/framer-scroller'
|
|
2
2
|
import { useConstant, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
|
|
3
3
|
import { motionValue } from 'framer-motion'
|
|
4
|
+
import framesync from 'framesync'
|
|
4
5
|
import { useCallback, useEffect } from 'react'
|
|
5
6
|
import { useMatchMedia } from '../../hooks'
|
|
6
|
-
import framesync from 'framesync'
|
|
7
7
|
|
|
8
8
|
const clampRound = (value: number) => Math.round(Math.max(0, Math.min(1, value)) * 100) / 100
|
|
9
9
|
|
|
@@ -38,22 +38,38 @@ export function useOverlayPosition(
|
|
|
38
38
|
const x = positions.x[positions.x.length - 1]
|
|
39
39
|
const y = positions.y[positions.y.length - 1]
|
|
40
40
|
|
|
41
|
+
const scrollX = scrollerRef.current?.scrollLeft ?? scroll.x.get()
|
|
42
|
+
const scrolly = scrollerRef.current?.scrollTop ?? scroll.y.get()
|
|
43
|
+
|
|
41
44
|
if (variant() === 'left') {
|
|
42
45
|
state.closed.x.set(x)
|
|
43
46
|
state.open.x.set(0)
|
|
47
|
+
|
|
48
|
+
const closedX = positions.x[1] ?? 0
|
|
49
|
+
state.open.visible.set(closedX === 0 ? 0 : clampRound((scrollX - closedX) / -closedX))
|
|
44
50
|
}
|
|
45
51
|
if (variant() === 'right') {
|
|
46
52
|
state.open.x.set(x)
|
|
47
53
|
state.closed.x.set(0)
|
|
54
|
+
|
|
55
|
+
const openedX = positions.x[1] ?? 0
|
|
56
|
+
state.open.visible.set(openedX === 0 ? 0 : clampRound(scrollX / openedX))
|
|
48
57
|
}
|
|
49
58
|
if (variant() === 'bottom') {
|
|
50
59
|
state.open.y.set(y)
|
|
51
60
|
state.closed.y.set(0)
|
|
61
|
+
|
|
62
|
+
const openedY = positions.y[1] ?? 0
|
|
63
|
+
state.open.visible.set(openedY === 0 ? 0 : clampRound(scrolly / openedY))
|
|
52
64
|
}
|
|
53
65
|
}
|
|
66
|
+
|
|
54
67
|
const measureTimed = () => framesync.read(measure)
|
|
55
68
|
measure()
|
|
56
69
|
|
|
70
|
+
const cancelX = scroll.x.onChange(measure)
|
|
71
|
+
const cancelY = scroll.y.onChange(measure)
|
|
72
|
+
|
|
57
73
|
const ro = new ResizeObserver(measureTimed)
|
|
58
74
|
ro.observe(scrollerRef.current)
|
|
59
75
|
;[...scrollerRef.current.children].forEach((child) => ro.observe(child))
|
|
@@ -62,48 +78,10 @@ export function useOverlayPosition(
|
|
|
62
78
|
return () => {
|
|
63
79
|
window.removeEventListener('resize', measureTimed)
|
|
64
80
|
ro.disconnect()
|
|
65
|
-
}
|
|
66
|
-
}, [getScrollSnapPositions, scrollerRef, state, variant])
|
|
67
|
-
|
|
68
|
-
// sets a float between 0 and 1 for the visibility of the overlay
|
|
69
|
-
useEffect(() => {
|
|
70
|
-
if (!scrollerRef.current) return () => {}
|
|
71
|
-
const calc = () => {
|
|
72
|
-
const x = scrollerRef.current?.scrollLeft ?? scroll.x.get()
|
|
73
|
-
const y = scrollerRef.current?.scrollTop ?? scroll.y.get()
|
|
74
|
-
|
|
75
|
-
const positions = getScrollSnapPositions()
|
|
76
|
-
|
|
77
|
-
if (variant() === 'left') {
|
|
78
|
-
const closedX = positions.x[1] ?? 0
|
|
79
|
-
state.open.visible.set(closedX === 0 ? 0 : clampRound((x - closedX) / -closedX))
|
|
80
|
-
}
|
|
81
|
-
if (variant() === 'right') {
|
|
82
|
-
const openedX = positions.x[1] ?? 0
|
|
83
|
-
state.open.visible.set(openedX === 0 ? 0 : clampRound(x / openedX))
|
|
84
|
-
}
|
|
85
|
-
if (variant() === 'bottom') {
|
|
86
|
-
const openedY = positions.y[1] ?? 0
|
|
87
|
-
state.open.visible.set(openedY === 0 ? 0 : clampRound(y / openedY))
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
const cancelY = scroll.y.onChange(calc)
|
|
92
|
-
const cancelX = scroll.x.onChange(calc)
|
|
93
|
-
|
|
94
|
-
const calcTimed = () => framesync.read(calc)
|
|
95
|
-
calc()
|
|
96
|
-
|
|
97
|
-
const ro = new ResizeObserver(calcTimed)
|
|
98
|
-
ro.observe(scrollerRef.current)
|
|
99
|
-
;[...scrollerRef.current.children].forEach((child) => ro.observe(child))
|
|
100
|
-
|
|
101
|
-
return () => {
|
|
102
|
-
cancelY()
|
|
103
81
|
cancelX()
|
|
104
|
-
|
|
82
|
+
cancelY()
|
|
105
83
|
}
|
|
106
|
-
}, [getScrollSnapPositions, scroll, scrollerRef, state, variant])
|
|
84
|
+
}, [getScrollSnapPositions, scroll.x, scroll.y, scrollerRef, state, variant])
|
|
107
85
|
|
|
108
86
|
return state
|
|
109
87
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { GlobalStyles } from '@mui/material'
|
|
1
2
|
import { LazyMotion } from 'framer-motion'
|
|
2
3
|
|
|
3
4
|
export type GraphCommerceProviderProps = {
|
|
@@ -15,6 +16,18 @@ export function CssAndFramerMotionProvider({ children }: GraphCommerceProviderPr
|
|
|
15
16
|
return (
|
|
16
17
|
<LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
|
|
17
18
|
{children}
|
|
19
|
+
<GlobalStyles
|
|
20
|
+
styles={{
|
|
21
|
+
':root': {
|
|
22
|
+
'--client-size-y': '100vh',
|
|
23
|
+
'--client-size-x': '100vw',
|
|
24
|
+
'@supports(height: 100dvh)': {
|
|
25
|
+
'--client-size-y': '100dvh',
|
|
26
|
+
'--client-size-x': '100dvw',
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
}}
|
|
30
|
+
/>
|
|
18
31
|
</LazyMotion>
|
|
19
32
|
)
|
|
20
33
|
}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/next-ui",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "6.0.0-canary.
|
|
5
|
+
"version": "6.0.0-canary.30",
|
|
6
6
|
"author": "",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"sideEffects": false,
|
|
@@ -18,18 +18,18 @@
|
|
|
18
18
|
"@emotion/react": "^11.10.6",
|
|
19
19
|
"@emotion/server": "^11.4.0",
|
|
20
20
|
"@emotion/styled": "^11.10.6",
|
|
21
|
-
"@graphcommerce/framer-next-pages": "6.0.0-canary.
|
|
22
|
-
"@graphcommerce/framer-scroller": "6.0.0-canary.
|
|
23
|
-
"@graphcommerce/framer-utils": "6.0.0-canary.
|
|
24
|
-
"@graphcommerce/image": "6.0.0-canary.
|
|
21
|
+
"@graphcommerce/framer-next-pages": "6.0.0-canary.30",
|
|
22
|
+
"@graphcommerce/framer-scroller": "6.0.0-canary.30",
|
|
23
|
+
"@graphcommerce/framer-utils": "6.0.0-canary.30",
|
|
24
|
+
"@graphcommerce/image": "6.0.0-canary.30",
|
|
25
25
|
"cookie": "^0.5.0",
|
|
26
26
|
"react-is": "^18.2.0",
|
|
27
27
|
"schema-dts": "^1.1.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@graphcommerce/eslint-config-pwa": "6.0.0-canary.
|
|
31
|
-
"@graphcommerce/prettier-config-pwa": "6.0.0-canary.
|
|
32
|
-
"@graphcommerce/typescript-config-pwa": "6.0.0-canary.
|
|
30
|
+
"@graphcommerce/eslint-config-pwa": "6.0.0-canary.30",
|
|
31
|
+
"@graphcommerce/prettier-config-pwa": "6.0.0-canary.30",
|
|
32
|
+
"@graphcommerce/typescript-config-pwa": "6.0.0-canary.30",
|
|
33
33
|
"@types/cookie": "^0.5.1",
|
|
34
34
|
"@types/react-is": "^17.0.3",
|
|
35
35
|
"typescript": "4.9.5"
|