@seed-design/stackflow 0.2.0 → 1.0.5
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/lib/primitive/AppBar/useAppBar.d.ts +1 -1
- package/lib/primitive/AppScreen/useAppScreen.d.ts +4 -4
- package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs +4 -3
- package/lib/primitive/GlobalInteraction/useGlobalInteraction.d.ts +1 -1
- package/lib/primitive/GlobalInteraction/useGlobalInteraction.js +4 -3
- package/lib/primitive/GlobalInteraction/useSwipeBack.cjs +0 -5
- package/lib/primitive/GlobalInteraction/useSwipeBack.js +0 -5
- package/package.json +8 -6
- package/src/primitive/GlobalInteraction/useGlobalInteraction.ts +5 -6
- package/src/primitive/GlobalInteraction/useSwipeBack.ts +0 -5
|
@@ -58,7 +58,7 @@ export declare function useAppBar(_props: UseAppBarProps): {
|
|
|
58
58
|
results?: number | undefined | undefined;
|
|
59
59
|
security?: string | undefined | undefined;
|
|
60
60
|
unselectable?: "on" | "off" | undefined | undefined;
|
|
61
|
-
popover?: "" | "auto" | "manual" | undefined | undefined;
|
|
61
|
+
popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
|
|
62
62
|
popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
|
|
63
63
|
popoverTarget?: string | undefined | undefined;
|
|
64
64
|
inert?: boolean | undefined | undefined;
|
|
@@ -56,7 +56,7 @@ export declare function useAppScreen(props: UseAppScreenProps): {
|
|
|
56
56
|
results?: number | undefined | undefined;
|
|
57
57
|
security?: string | undefined | undefined;
|
|
58
58
|
unselectable?: "on" | "off" | undefined | undefined;
|
|
59
|
-
popover?: "" | "auto" | "manual" | undefined | undefined;
|
|
59
|
+
popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
|
|
60
60
|
popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
|
|
61
61
|
popoverTarget?: string | undefined | undefined;
|
|
62
62
|
inert?: boolean | undefined | undefined;
|
|
@@ -338,7 +338,7 @@ export declare function useAppScreen(props: UseAppScreenProps): {
|
|
|
338
338
|
results?: number | undefined | undefined;
|
|
339
339
|
security?: string | undefined | undefined;
|
|
340
340
|
unselectable?: "on" | "off" | undefined | undefined;
|
|
341
|
-
popover?: "" | "auto" | "manual" | undefined | undefined;
|
|
341
|
+
popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
|
|
342
342
|
popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
|
|
343
343
|
popoverTarget?: string | undefined | undefined;
|
|
344
344
|
inert?: boolean | undefined | undefined;
|
|
@@ -620,7 +620,7 @@ export declare function useAppScreen(props: UseAppScreenProps): {
|
|
|
620
620
|
results?: number | undefined | undefined;
|
|
621
621
|
security?: string | undefined | undefined;
|
|
622
622
|
unselectable?: "on" | "off" | undefined | undefined;
|
|
623
|
-
popover?: "" | "auto" | "manual" | undefined | undefined;
|
|
623
|
+
popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
|
|
624
624
|
popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
|
|
625
625
|
popoverTarget?: string | undefined | undefined;
|
|
626
626
|
inert?: boolean | undefined | undefined;
|
|
@@ -902,7 +902,7 @@ export declare function useAppScreen(props: UseAppScreenProps): {
|
|
|
902
902
|
results?: number | undefined | undefined;
|
|
903
903
|
security?: string | undefined | undefined;
|
|
904
904
|
unselectable?: "on" | "off" | undefined | undefined;
|
|
905
|
-
popover?: "" | "auto" | "manual" | undefined | undefined;
|
|
905
|
+
popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
|
|
906
906
|
popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
|
|
907
907
|
popoverTarget?: string | undefined | undefined;
|
|
908
908
|
inert?: boolean | undefined | undefined;
|
|
@@ -46,7 +46,7 @@ function useGlobalInteraction() {
|
|
|
46
46
|
displacementRatio: 0,
|
|
47
47
|
velocity: 0
|
|
48
48
|
});
|
|
49
|
-
setSwipeBackState("swiping");
|
|
49
|
+
setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
|
|
50
50
|
onSwipeStart?.();
|
|
51
51
|
},
|
|
52
52
|
[onSwipeStart]
|
|
@@ -62,7 +62,7 @@ function useGlobalInteraction() {
|
|
|
62
62
|
displacementRatio,
|
|
63
63
|
velocity
|
|
64
64
|
});
|
|
65
|
-
setSwipeBackState("swiping");
|
|
65
|
+
setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
|
|
66
66
|
onSwipeMove?.({ displacement, displacementRatio });
|
|
67
67
|
},
|
|
68
68
|
[onSwipeMove]
|
|
@@ -72,10 +72,11 @@ function useGlobalInteraction() {
|
|
|
72
72
|
const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
|
|
73
73
|
if (swiped) {
|
|
74
74
|
stackRef.current?.style.setProperty("--swipe-back-target", "100%");
|
|
75
|
+
setSwipeBackState("completing");
|
|
75
76
|
} else {
|
|
76
77
|
stackRef.current?.style.setProperty("--swipe-back-target", "0");
|
|
78
|
+
setSwipeBackState("canceling");
|
|
77
79
|
}
|
|
78
|
-
setSwipeBackState("transitioning");
|
|
79
80
|
onSwipeEnd?.({ swiped });
|
|
80
81
|
},
|
|
81
82
|
[onSwipeEnd, displacementRatioThreshold, velocityThreshold]
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { RefObject, Dispatch, SetStateAction, HTMLAttributes } from 'react';
|
|
2
|
-
export type SwipeBackState = "idle" | "swiping" | "
|
|
2
|
+
export type SwipeBackState = "idle" | "swiping" | "canceling" | "completing";
|
|
3
3
|
export type UseGlobalInteractionReturn = ReturnType<typeof useGlobalInteraction>;
|
|
4
4
|
export interface SwipeBackContext {
|
|
5
5
|
x0: number;
|
|
@@ -42,7 +42,7 @@ function useGlobalInteraction() {
|
|
|
42
42
|
displacementRatio: 0,
|
|
43
43
|
velocity: 0
|
|
44
44
|
});
|
|
45
|
-
setSwipeBackState("swiping");
|
|
45
|
+
setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
|
|
46
46
|
onSwipeStart?.();
|
|
47
47
|
},
|
|
48
48
|
[onSwipeStart]
|
|
@@ -58,7 +58,7 @@ function useGlobalInteraction() {
|
|
|
58
58
|
displacementRatio,
|
|
59
59
|
velocity
|
|
60
60
|
});
|
|
61
|
-
setSwipeBackState("swiping");
|
|
61
|
+
setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
|
|
62
62
|
onSwipeMove?.({ displacement, displacementRatio });
|
|
63
63
|
},
|
|
64
64
|
[onSwipeMove]
|
|
@@ -68,10 +68,11 @@ function useGlobalInteraction() {
|
|
|
68
68
|
const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
|
|
69
69
|
if (swiped) {
|
|
70
70
|
stackRef.current?.style.setProperty("--swipe-back-target", "100%");
|
|
71
|
+
setSwipeBackState("completing");
|
|
71
72
|
} else {
|
|
72
73
|
stackRef.current?.style.setProperty("--swipe-back-target", "0");
|
|
74
|
+
setSwipeBackState("canceling");
|
|
73
75
|
}
|
|
74
|
-
setSwipeBackState("transitioning");
|
|
75
76
|
onSwipeEnd?.({ swiped });
|
|
76
77
|
},
|
|
77
78
|
[onSwipeEnd, displacementRatioThreshold, velocityThreshold]
|
|
@@ -20,11 +20,6 @@ function useSwipeBack(props) {
|
|
|
20
20
|
"data-swipe-back": ""
|
|
21
21
|
},
|
|
22
22
|
layerProps: {
|
|
23
|
-
onTransitionEnd: (e) => {
|
|
24
|
-
if (e.target === e.currentTarget) {
|
|
25
|
-
events.reset();
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
23
|
onAnimationEnd: (e) => {
|
|
29
24
|
if (e.target === e.currentTarget) {
|
|
30
25
|
events.reset();
|
|
@@ -16,11 +16,6 @@ function useSwipeBack(props) {
|
|
|
16
16
|
"data-swipe-back": ""
|
|
17
17
|
},
|
|
18
18
|
layerProps: {
|
|
19
|
-
onTransitionEnd: (e) => {
|
|
20
|
-
if (e.target === e.currentTarget) {
|
|
21
|
-
events.reset();
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
19
|
onAnimationEnd: (e) => {
|
|
25
20
|
if (e.target === e.currentTarget) {
|
|
26
21
|
events.reset();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seed-design/stackflow",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/daangn/seed-design.git",
|
|
@@ -30,24 +30,26 @@
|
|
|
30
30
|
"@radix-ui/react-compose-refs": "^1.1.2",
|
|
31
31
|
"@radix-ui/react-slot": "^1.2.3",
|
|
32
32
|
"@radix-ui/react-use-callback-ref": "^1.1.1",
|
|
33
|
-
"@seed-design/dom-utils": "0.0
|
|
34
|
-
"@seed-design/react-primitive": "0.0
|
|
33
|
+
"@seed-design/dom-utils": "1.0.0",
|
|
34
|
+
"@seed-design/react-primitive": "1.0.0",
|
|
35
35
|
"clsx": "^2.1.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@seed-design/css": "0.
|
|
38
|
+
"@seed-design/css": "1.0.5",
|
|
39
39
|
"@stackflow/core": "^1.2.0",
|
|
40
40
|
"@stackflow/react": "^1.5.1",
|
|
41
41
|
"@stackflow/react-ui-core": "^1.3.2",
|
|
42
|
+
"@types/react": "^19.2.2",
|
|
43
|
+
"@types/react-dom": "^19.2.1",
|
|
42
44
|
"@vitejs/plugin-react": "^5.0.0",
|
|
43
|
-
"globby": "^
|
|
45
|
+
"globby": "^15.0.0",
|
|
44
46
|
"react": "^19.1.0",
|
|
45
47
|
"react-dom": "^19.1.0",
|
|
46
48
|
"vite": "^7.0.0",
|
|
47
49
|
"vite-plugin-dts": "^4.5.3"
|
|
48
50
|
},
|
|
49
51
|
"peerDependencies": {
|
|
50
|
-
"@seed-design/css": ">=0.
|
|
52
|
+
"@seed-design/css": ">=1.0.5",
|
|
51
53
|
"@stackflow/core": ">=1.1.0",
|
|
52
54
|
"@stackflow/react": ">=1.4.1",
|
|
53
55
|
"@stackflow/react-ui-core": ">=1.3.2",
|
|
@@ -2,7 +2,7 @@ import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
|
|
|
2
2
|
import { useCallback, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { useTopActivity } from "../private/useTopActivity";
|
|
4
4
|
|
|
5
|
-
export type SwipeBackState = "idle" | "swiping" | "
|
|
5
|
+
export type SwipeBackState = "idle" | "swiping" | "canceling" | "completing";
|
|
6
6
|
|
|
7
7
|
export type UseGlobalInteractionReturn = ReturnType<typeof useGlobalInteraction>;
|
|
8
8
|
|
|
@@ -88,8 +88,7 @@ export function useGlobalInteraction() {
|
|
|
88
88
|
displacementRatio: 0,
|
|
89
89
|
velocity: 0,
|
|
90
90
|
});
|
|
91
|
-
setSwipeBackState("swiping");
|
|
92
|
-
|
|
91
|
+
setSwipeBackState((prev) => (prev === "swiping" ? prev : "swiping"));
|
|
93
92
|
onSwipeStart?.();
|
|
94
93
|
},
|
|
95
94
|
[onSwipeStart],
|
|
@@ -106,8 +105,7 @@ export function useGlobalInteraction() {
|
|
|
106
105
|
displacementRatio,
|
|
107
106
|
velocity,
|
|
108
107
|
});
|
|
109
|
-
setSwipeBackState("swiping");
|
|
110
|
-
|
|
108
|
+
setSwipeBackState((prev) => (prev === "swiping" ? prev : "swiping"));
|
|
111
109
|
onSwipeMove?.({ displacement, displacementRatio });
|
|
112
110
|
},
|
|
113
111
|
[onSwipeMove],
|
|
@@ -121,11 +119,12 @@ export function useGlobalInteraction() {
|
|
|
121
119
|
|
|
122
120
|
if (swiped) {
|
|
123
121
|
stackRef.current?.style.setProperty("--swipe-back-target", "100%");
|
|
122
|
+
setSwipeBackState("completing");
|
|
124
123
|
} else {
|
|
125
124
|
stackRef.current?.style.setProperty("--swipe-back-target", "0");
|
|
125
|
+
setSwipeBackState("canceling");
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
setSwipeBackState("transitioning");
|
|
129
128
|
onSwipeEnd?.({ swiped });
|
|
130
129
|
},
|
|
131
130
|
[onSwipeEnd, displacementRatioThreshold, velocityThreshold],
|
|
@@ -20,11 +20,6 @@ export function useSwipeBack(props: UseSwipeBackProps) {
|
|
|
20
20
|
"data-swipe-back": "",
|
|
21
21
|
} as React.HTMLAttributes<HTMLDivElement>,
|
|
22
22
|
layerProps: {
|
|
23
|
-
onTransitionEnd: (e) => {
|
|
24
|
-
if (e.target === e.currentTarget) {
|
|
25
|
-
events.reset();
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
23
|
onAnimationEnd: (e) => {
|
|
29
24
|
if (e.target === e.currentTarget) {
|
|
30
25
|
events.reset();
|