@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.
@@ -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" | "transitioning";
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.2.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.2",
34
- "@seed-design/react-primitive": "0.0.3",
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.2.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": "^14.1.0",
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.2.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" | "transitioning";
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();