@seed-design/stackflow 0.0.1-rc.0 → 0.0.1-rc.3

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 (92) hide show
  1. package/lib/components/AppBar/AppBar.cjs +92 -0
  2. package/lib/components/AppBar/AppBar.d.ts +13 -12
  3. package/lib/components/AppBar/AppBar.js +81 -0
  4. package/lib/components/AppBar/AppBar.namespace.cjs +15 -0
  5. package/lib/components/AppBar/AppBar.namespace.d.ts +2 -2
  6. package/lib/components/AppBar/AppBar.namespace.js +1 -0
  7. package/lib/components/AppBar/index.cjs +17 -0
  8. package/lib/components/AppBar/index.d.ts +3 -3
  9. package/lib/components/AppBar/index.js +3 -0
  10. package/lib/components/AppScreen/AppScreen.cjs +58 -0
  11. package/lib/components/AppScreen/AppScreen.d.ts +8 -7
  12. package/lib/components/AppScreen/AppScreen.js +50 -0
  13. package/lib/components/AppScreen/AppScreen.namespace.cjs +13 -0
  14. package/lib/components/AppScreen/AppScreen.namespace.d.ts +2 -2
  15. package/lib/components/AppScreen/AppScreen.namespace.js +1 -0
  16. package/lib/components/AppScreen/index.cjs +15 -0
  17. package/lib/components/AppScreen/index.d.ts +3 -3
  18. package/lib/components/AppScreen/index.js +3 -0
  19. package/lib/components/index.cjs +25 -0
  20. package/lib/components/index.d.ts +2 -2
  21. package/lib/components/index.js +6 -0
  22. package/lib/index.cjs +29 -0
  23. package/lib/index.d.ts +3 -3
  24. package/lib/index.js +9 -786
  25. package/lib/plugin.cjs +16 -0
  26. package/lib/plugin.d.ts +1 -1
  27. package/lib/plugin.js +12 -0
  28. package/lib/primitive/AppBar/AppBar.cjs +43 -0
  29. package/lib/primitive/AppBar/AppBar.d.ts +7 -6
  30. package/lib/primitive/AppBar/AppBar.js +36 -0
  31. package/lib/primitive/AppBar/AppBar.namespace.cjs +12 -0
  32. package/lib/primitive/AppBar/AppBar.namespace.d.ts +1 -1
  33. package/lib/primitive/AppBar/AppBar.namespace.js +1 -0
  34. package/lib/primitive/AppBar/index.cjs +14 -0
  35. package/lib/primitive/AppBar/index.d.ts +2 -2
  36. package/lib/primitive/AppBar/index.js +3 -0
  37. package/lib/primitive/AppBar/useAppBar.cjs +38 -0
  38. package/lib/primitive/AppBar/useAppBar.d.ts +168 -167
  39. package/lib/primitive/AppBar/useAppBar.js +34 -0
  40. package/lib/primitive/AppBar/useAppBarContext.cjs +20 -0
  41. package/lib/primitive/AppBar/useAppBarContext.d.ts +3 -2
  42. package/lib/primitive/AppBar/useAppBarContext.js +15 -0
  43. package/lib/primitive/AppScreen/AppScreen.cjs +57 -0
  44. package/lib/primitive/AppScreen/AppScreen.d.ts +7 -6
  45. package/lib/primitive/AppScreen/AppScreen.js +50 -0
  46. package/lib/primitive/AppScreen/AppScreen.namespace.cjs +12 -0
  47. package/lib/primitive/AppScreen/AppScreen.namespace.d.ts +1 -1
  48. package/lib/primitive/AppScreen/AppScreen.namespace.js +1 -0
  49. package/lib/primitive/AppScreen/index.cjs +16 -0
  50. package/lib/primitive/AppScreen/index.d.ts +3 -3
  51. package/lib/primitive/AppScreen/index.js +4 -0
  52. package/lib/primitive/AppScreen/useAppScreen.cjs +64 -0
  53. package/lib/primitive/AppScreen/useAppScreen.d.ts +657 -655
  54. package/lib/primitive/AppScreen/useAppScreen.js +60 -0
  55. package/lib/primitive/AppScreen/useAppScreenContext.cjs +20 -0
  56. package/lib/primitive/AppScreen/useAppScreenContext.d.ts +3 -2
  57. package/lib/primitive/AppScreen/useAppScreenContext.js +15 -0
  58. package/lib/primitive/GlobalInteraction/GlobalInteraction.cjs +27 -0
  59. package/lib/primitive/GlobalInteraction/GlobalInteraction.d.ts +3 -2
  60. package/lib/primitive/GlobalInteraction/GlobalInteraction.js +23 -0
  61. package/lib/primitive/GlobalInteraction/index.cjs +11 -0
  62. package/lib/primitive/GlobalInteraction/index.d.ts +2 -2
  63. package/lib/primitive/GlobalInteraction/index.js +2 -0
  64. package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs +122 -0
  65. package/lib/primitive/GlobalInteraction/useGlobalInteraction.d.ts +5 -4
  66. package/lib/primitive/GlobalInteraction/useGlobalInteraction.js +118 -0
  67. package/lib/primitive/GlobalInteraction/useGlobalInteractionContext.cjs +20 -0
  68. package/lib/primitive/GlobalInteraction/useGlobalInteractionContext.d.ts +3 -2
  69. package/lib/primitive/GlobalInteraction/useGlobalInteractionContext.js +15 -0
  70. package/lib/primitive/GlobalInteraction/useSwipeBack.cjs +57 -0
  71. package/lib/primitive/GlobalInteraction/useSwipeBack.d.ts +1 -1
  72. package/lib/primitive/GlobalInteraction/useSwipeBack.js +53 -0
  73. package/lib/primitive/index.cjs +27 -0
  74. package/lib/primitive/index.d.ts +3 -3
  75. package/lib/primitive/index.js +9 -0
  76. package/lib/primitive/private/useElementOffset.cjs +53 -0
  77. package/lib/primitive/private/useElementOffset.js +30 -0
  78. package/lib/primitive/private/useTopActivity.cjs +31 -0
  79. package/lib/primitive/private/useTopActivity.js +27 -0
  80. package/lib/utils/createStyleContext.cjs +76 -0
  81. package/lib/utils/createStyleContext.js +72 -0
  82. package/lib/utils/createWithStateProps.d.ts +2 -1
  83. package/package.json +13 -14
  84. package/src/components/AppScreen/AppScreen.namespace.ts +1 -0
  85. package/src/components/AppScreen/{index.tsx → index.ts} +1 -0
  86. package/src/plugin.tsx +1 -1
  87. package/lib/index.js.map +0 -7
  88. package/lib/index.mjs +0 -759
  89. package/lib/index.mjs.map +0 -7
  90. /package/src/components/AppBar/{index.tsx → index.ts} +0 -0
  91. /package/src/components/{index.tsx → index.ts} +0 -0
  92. /package/src/primitive/{index.tsx → index.ts} +0 -0
@@ -0,0 +1,60 @@
1
+ import { dataAttr, elementProps } from '@seed-design/dom-utils';
2
+ import { useNullableActivity, useZIndexBase } from '@stackflow/react-ui-core';
3
+ import { useMemo } from 'react';
4
+ import { useSwipeBack } from '../GlobalInteraction/useSwipeBack.js';
5
+
6
+ function useAppScreen(props) {
7
+ const activity = useNullableActivity();
8
+ const transitionState = activity?.transitionState ?? "enter-done";
9
+ const { activityProps, layerProps, edgeProps } = useSwipeBack(props);
10
+ const zIndexBase = useZIndexBase();
11
+ const zIndexStyle = useMemo(
12
+ () => ({
13
+ "--z-index-base": zIndexBase.toString()
14
+ }),
15
+ [zIndexBase]
16
+ );
17
+ const stateProps = useMemo(
18
+ () => ({
19
+ "data-activity-is-top": dataAttr(activity?.isTop),
20
+ "data-activity-is-active": dataAttr(activity?.isActive),
21
+ "data-transition-state": transitionState
22
+ }),
23
+ [transitionState, activity?.isActive, activity?.isTop]
24
+ );
25
+ return useMemo(
26
+ () => ({
27
+ activity,
28
+ stateProps,
29
+ activityProps: elementProps({
30
+ "data-part": "activity",
31
+ "data-activity-type": "full-screen",
32
+ ...activityProps,
33
+ ...stateProps,
34
+ "data-activity-id": activity?.id,
35
+ style: zIndexStyle,
36
+ // FIXME: @stackflow/react should prevent activity.id hydration mismatch; this is temporal fix.
37
+ suppressHydrationWarning: true
38
+ }),
39
+ dimProps: elementProps({
40
+ "data-part": "dim",
41
+ ...stateProps
42
+ }),
43
+ layerProps: elementProps({
44
+ "data-part": "layer",
45
+ ...stateProps,
46
+ ...layerProps
47
+ }),
48
+ edgeProps: elementProps({
49
+ "data-part": "edge",
50
+ "aria-hidden": true,
51
+ tabIndex: -1,
52
+ ...edgeProps,
53
+ ...stateProps
54
+ })
55
+ }),
56
+ [activity, zIndexStyle, stateProps, activityProps, edgeProps, layerProps]
57
+ );
58
+ }
59
+
60
+ export { useAppScreen };
@@ -0,0 +1,20 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const React = require('react');
6
+
7
+ const AppScreenContext = React.createContext(null);
8
+ const AppScreenProvider = AppScreenContext.Provider;
9
+ function useAppScreenContext({
10
+ strict = true
11
+ } = {}) {
12
+ const context = React.useContext(AppScreenContext);
13
+ if (!context && strict) {
14
+ throw new Error("useAppScreenContext must be used within a AppScreen");
15
+ }
16
+ return context;
17
+ }
18
+
19
+ exports.AppScreenProvider = AppScreenProvider;
20
+ exports.useAppScreenContext = useAppScreenContext;
@@ -1,7 +1,8 @@
1
- import type { UseAppScreenReturn } from "./useAppScreen";
1
+ import { UseAppScreenReturn } from './useAppScreen';
2
+ import { Provider } from 'react';
2
3
  export interface UseAppScreenContext extends UseAppScreenReturn {
3
4
  }
4
- export declare const AppScreenProvider: import("react").Provider<UseAppScreenContext | null>;
5
+ export declare const AppScreenProvider: Provider<UseAppScreenContext | null>;
5
6
  export declare function useAppScreenContext<T extends boolean | undefined = true>({ strict, }?: {
6
7
  strict?: T;
7
8
  }): T extends false ? UseAppScreenContext | null : UseAppScreenContext;
@@ -0,0 +1,15 @@
1
+ import { createContext, useContext } from 'react';
2
+
3
+ const AppScreenContext = createContext(null);
4
+ const AppScreenProvider = AppScreenContext.Provider;
5
+ function useAppScreenContext({
6
+ strict = true
7
+ } = {}) {
8
+ const context = useContext(AppScreenContext);
9
+ if (!context && strict) {
10
+ throw new Error("useAppScreenContext must be used within a AppScreen");
11
+ }
12
+ return context;
13
+ }
14
+
15
+ export { AppScreenProvider, useAppScreenContext };
@@ -0,0 +1,27 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const jsxRuntime = require('react/jsx-runtime');
6
+ const reactComposeRefs = require('@radix-ui/react-compose-refs');
7
+ const domUtils = require('@seed-design/dom-utils');
8
+ const reactPrimitive = require('@seed-design/react-primitive');
9
+ const React = require('react');
10
+ const useGlobalInteraction = require('./useGlobalInteraction.cjs');
11
+ const useGlobalInteractionContext = require('./useGlobalInteractionContext.cjs');
12
+
13
+ const GlobalInteraction = React.forwardRef(
14
+ (props, ref) => {
15
+ const api = useGlobalInteraction.useGlobalInteraction();
16
+ return /* @__PURE__ */ jsxRuntime.jsx(useGlobalInteractionContext.GlobalInteractionProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
17
+ reactPrimitive.Primitive.div,
18
+ {
19
+ ref: reactComposeRefs.composeRefs(api.stackRef, ref),
20
+ ...domUtils.mergeProps(api.stackProps, props)
21
+ }
22
+ ) });
23
+ }
24
+ );
25
+ GlobalInteraction.displayName = "GlobalInteraction";
26
+
27
+ exports.GlobalInteraction = GlobalInteraction;
@@ -1,4 +1,5 @@
1
- import { type PrimitiveProps } from "@seed-design/react-primitive";
1
+ import { PrimitiveProps } from '@seed-design/react-primitive';
2
+ import { ForwardRefExoticComponent, RefAttributes } from 'react';
2
3
  export interface GlobalInteractionProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
3
4
  }
4
- export declare const GlobalInteraction: import("react").ForwardRefExoticComponent<GlobalInteractionProps & import("react").RefAttributes<HTMLDivElement>>;
5
+ export declare const GlobalInteraction: ForwardRefExoticComponent<GlobalInteractionProps & RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,23 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { composeRefs } from '@radix-ui/react-compose-refs';
3
+ import { mergeProps } from '@seed-design/dom-utils';
4
+ import { Primitive } from '@seed-design/react-primitive';
5
+ import { forwardRef } from 'react';
6
+ import { useGlobalInteraction } from './useGlobalInteraction.js';
7
+ import { GlobalInteractionProvider } from './useGlobalInteractionContext.js';
8
+
9
+ const GlobalInteraction = forwardRef(
10
+ (props, ref) => {
11
+ const api = useGlobalInteraction();
12
+ return /* @__PURE__ */ jsx(GlobalInteractionProvider, { value: api, children: /* @__PURE__ */ jsx(
13
+ Primitive.div,
14
+ {
15
+ ref: composeRefs(api.stackRef, ref),
16
+ ...mergeProps(api.stackProps, props)
17
+ }
18
+ ) });
19
+ }
20
+ );
21
+ GlobalInteraction.displayName = "GlobalInteraction";
22
+
23
+ export { GlobalInteraction };
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const GlobalInteraction = require('./GlobalInteraction.cjs');
6
+ const useGlobalInteractionContext = require('./useGlobalInteractionContext.cjs');
7
+
8
+
9
+
10
+ exports.GlobalInteraction = GlobalInteraction.GlobalInteraction;
11
+ exports.useGlobalInteractionContext = useGlobalInteractionContext.useGlobalInteractionContext;
@@ -1,2 +1,2 @@
1
- export { GlobalInteraction, type GlobalInteractionProps } from "./GlobalInteraction";
2
- export { useGlobalInteractionContext, type UseGlobalInteractionContext, } from "./useGlobalInteractionContext";
1
+ export { GlobalInteraction, type GlobalInteractionProps } from './GlobalInteraction';
2
+ export { useGlobalInteractionContext, type UseGlobalInteractionContext, } from './useGlobalInteractionContext';
@@ -0,0 +1,2 @@
1
+ export { GlobalInteraction } from './GlobalInteraction.js';
2
+ export { useGlobalInteractionContext } from './useGlobalInteractionContext.js';
@@ -0,0 +1,122 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const reactUseCallbackRef = require('@radix-ui/react-use-callback-ref');
6
+ const React = require('react');
7
+ const useTopActivity = require('../private/useTopActivity.cjs');
8
+
9
+ function useGlobalInteraction() {
10
+ const [swipeBackState, setSwipeBackState] = React.useState("idle");
11
+ const swipeBackContextRef = React.useRef({
12
+ x0: 0,
13
+ t0: 0,
14
+ displacement: 0,
15
+ displacementRatio: 0,
16
+ velocity: 0
17
+ });
18
+ const stackRef = React.useRef(null);
19
+ const setSwipeBackContext = React.useCallback((ctx) => {
20
+ swipeBackContextRef.current = ctx;
21
+ stackRef.current?.style.setProperty(
22
+ "--swipe-back-displacement",
23
+ `${ctx.displacement.toString()}px`
24
+ );
25
+ stackRef.current?.style.setProperty(
26
+ "--swipe-back-displacement-ratio",
27
+ ctx.displacementRatio.toString()
28
+ );
29
+ }, []);
30
+ const getSwipeBackEvents = React.useCallback(
31
+ (props) => {
32
+ const {
33
+ swipeBackDisplacementRatioThreshold: displacementRatioThreshold = 0.4,
34
+ swipeBackVelocityThreshold: velocityThreshold = 1
35
+ } = props;
36
+ const onSwipeStart = reactUseCallbackRef.useCallbackRef(props.onSwipeBackStart);
37
+ const onSwipeMove = reactUseCallbackRef.useCallbackRef(props.onSwipeBackMove);
38
+ const onSwipeEnd = reactUseCallbackRef.useCallbackRef(props.onSwipeBackEnd);
39
+ const startSwipeBack = React.useCallback(
40
+ ({ x0, t0 }) => {
41
+ setSwipeBackContext({
42
+ x0,
43
+ t0,
44
+ displacement: 0,
45
+ displacementRatio: 0,
46
+ velocity: 0
47
+ });
48
+ setSwipeBackState("swiping");
49
+ onSwipeStart?.();
50
+ },
51
+ [onSwipeStart]
52
+ );
53
+ const moveSwipeBack = React.useCallback(
54
+ ({ x, t }) => {
55
+ const displacement = x - swipeBackContextRef.current.x0;
56
+ const displacementRatio = displacement / window.innerWidth;
57
+ const velocity = displacement / (t - swipeBackContextRef.current.t0);
58
+ setSwipeBackContext({
59
+ ...swipeBackContextRef.current,
60
+ displacement,
61
+ displacementRatio,
62
+ velocity
63
+ });
64
+ setSwipeBackState("swiping");
65
+ onSwipeMove?.({ displacement, displacementRatio });
66
+ },
67
+ [onSwipeMove]
68
+ );
69
+ const endSwipeBack = React.useCallback(
70
+ (_) => {
71
+ const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
72
+ setSwipeBackState("transitioning");
73
+ onSwipeEnd?.({ swiped });
74
+ },
75
+ [onSwipeEnd, displacementRatioThreshold, velocityThreshold]
76
+ );
77
+ const reset = React.useCallback(() => {
78
+ setSwipeBackContext({
79
+ x0: 0,
80
+ t0: 0,
81
+ displacement: 0,
82
+ displacementRatio: 0,
83
+ velocity: 0
84
+ });
85
+ setSwipeBackState("idle");
86
+ }, []);
87
+ return React.useMemo(
88
+ () => ({
89
+ startSwipeBack,
90
+ moveSwipeBack,
91
+ endSwipeBack,
92
+ reset
93
+ }),
94
+ [startSwipeBack, moveSwipeBack, endSwipeBack, reset]
95
+ );
96
+ },
97
+ [setSwipeBackContext]
98
+ );
99
+ const topActivity = useTopActivity.useTopActivity();
100
+ const stackProps = React.useMemo(
101
+ () => ({
102
+ "data-swipe-back-state": swipeBackState,
103
+ "data-global-transition-state": topActivity.transitionState,
104
+ "data-top-activity-type": topActivity.activityType
105
+ }),
106
+ [swipeBackState, topActivity.transitionState, topActivity.activityType]
107
+ );
108
+ return React.useMemo(
109
+ () => ({
110
+ stackRef,
111
+ swipeBackContextRef,
112
+ swipeBackState,
113
+ setSwipeBackState,
114
+ setSwipeBackContext,
115
+ getSwipeBackEvents,
116
+ stackProps
117
+ }),
118
+ [swipeBackState, setSwipeBackContext, getSwipeBackEvents, stackProps]
119
+ );
120
+ }
121
+
122
+ exports.useGlobalInteraction = useGlobalInteraction;
@@ -1,3 +1,4 @@
1
+ import { RefObject, MutableRefObject, Dispatch, SetStateAction, HTMLAttributes } from 'react';
1
2
  export type SwipeBackState = "idle" | "swiping" | "transitioning";
2
3
  export type UseGlobalInteractionReturn = ReturnType<typeof useGlobalInteraction>;
3
4
  export interface SwipeBackContext {
@@ -38,10 +39,10 @@ export interface MoveSwipeBackProps {
38
39
  export interface EndSwipeBackProps {
39
40
  }
40
41
  export declare function useGlobalInteraction(): {
41
- stackRef: import("react").RefObject<HTMLDivElement>;
42
- swipeBackContextRef: import("react").MutableRefObject<SwipeBackContext>;
42
+ stackRef: RefObject<HTMLDivElement>;
43
+ swipeBackContextRef: MutableRefObject<SwipeBackContext>;
43
44
  swipeBackState: SwipeBackState;
44
- setSwipeBackState: import("react").Dispatch<import("react").SetStateAction<SwipeBackState>>;
45
+ setSwipeBackState: Dispatch<SetStateAction<SwipeBackState>>;
45
46
  setSwipeBackContext: (ctx: SwipeBackContext) => void;
46
47
  getSwipeBackEvents: (props: SwipeBackProps) => {
47
48
  startSwipeBack: ({ x0, t0 }: StartSwipeBackProps) => void;
@@ -49,5 +50,5 @@ export declare function useGlobalInteraction(): {
49
50
  endSwipeBack: (_: EndSwipeBackProps) => void;
50
51
  reset: () => void;
51
52
  };
52
- stackProps: import("react").HTMLAttributes<HTMLElement>;
53
+ stackProps: HTMLAttributes<HTMLElement>;
53
54
  };
@@ -0,0 +1,118 @@
1
+ import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
2
+ import { useState, useRef, useCallback, useMemo } from 'react';
3
+ import { useTopActivity } from '../private/useTopActivity.js';
4
+
5
+ function useGlobalInteraction() {
6
+ const [swipeBackState, setSwipeBackState] = useState("idle");
7
+ const swipeBackContextRef = useRef({
8
+ x0: 0,
9
+ t0: 0,
10
+ displacement: 0,
11
+ displacementRatio: 0,
12
+ velocity: 0
13
+ });
14
+ const stackRef = useRef(null);
15
+ const setSwipeBackContext = useCallback((ctx) => {
16
+ swipeBackContextRef.current = ctx;
17
+ stackRef.current?.style.setProperty(
18
+ "--swipe-back-displacement",
19
+ `${ctx.displacement.toString()}px`
20
+ );
21
+ stackRef.current?.style.setProperty(
22
+ "--swipe-back-displacement-ratio",
23
+ ctx.displacementRatio.toString()
24
+ );
25
+ }, []);
26
+ const getSwipeBackEvents = useCallback(
27
+ (props) => {
28
+ const {
29
+ swipeBackDisplacementRatioThreshold: displacementRatioThreshold = 0.4,
30
+ swipeBackVelocityThreshold: velocityThreshold = 1
31
+ } = props;
32
+ const onSwipeStart = useCallbackRef(props.onSwipeBackStart);
33
+ const onSwipeMove = useCallbackRef(props.onSwipeBackMove);
34
+ const onSwipeEnd = useCallbackRef(props.onSwipeBackEnd);
35
+ const startSwipeBack = useCallback(
36
+ ({ x0, t0 }) => {
37
+ setSwipeBackContext({
38
+ x0,
39
+ t0,
40
+ displacement: 0,
41
+ displacementRatio: 0,
42
+ velocity: 0
43
+ });
44
+ setSwipeBackState("swiping");
45
+ onSwipeStart?.();
46
+ },
47
+ [onSwipeStart]
48
+ );
49
+ const moveSwipeBack = useCallback(
50
+ ({ x, t }) => {
51
+ const displacement = x - swipeBackContextRef.current.x0;
52
+ const displacementRatio = displacement / window.innerWidth;
53
+ const velocity = displacement / (t - swipeBackContextRef.current.t0);
54
+ setSwipeBackContext({
55
+ ...swipeBackContextRef.current,
56
+ displacement,
57
+ displacementRatio,
58
+ velocity
59
+ });
60
+ setSwipeBackState("swiping");
61
+ onSwipeMove?.({ displacement, displacementRatio });
62
+ },
63
+ [onSwipeMove]
64
+ );
65
+ const endSwipeBack = useCallback(
66
+ (_) => {
67
+ const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
68
+ setSwipeBackState("transitioning");
69
+ onSwipeEnd?.({ swiped });
70
+ },
71
+ [onSwipeEnd, displacementRatioThreshold, velocityThreshold]
72
+ );
73
+ const reset = useCallback(() => {
74
+ setSwipeBackContext({
75
+ x0: 0,
76
+ t0: 0,
77
+ displacement: 0,
78
+ displacementRatio: 0,
79
+ velocity: 0
80
+ });
81
+ setSwipeBackState("idle");
82
+ }, []);
83
+ return useMemo(
84
+ () => ({
85
+ startSwipeBack,
86
+ moveSwipeBack,
87
+ endSwipeBack,
88
+ reset
89
+ }),
90
+ [startSwipeBack, moveSwipeBack, endSwipeBack, reset]
91
+ );
92
+ },
93
+ [setSwipeBackContext]
94
+ );
95
+ const topActivity = useTopActivity();
96
+ const stackProps = useMemo(
97
+ () => ({
98
+ "data-swipe-back-state": swipeBackState,
99
+ "data-global-transition-state": topActivity.transitionState,
100
+ "data-top-activity-type": topActivity.activityType
101
+ }),
102
+ [swipeBackState, topActivity.transitionState, topActivity.activityType]
103
+ );
104
+ return useMemo(
105
+ () => ({
106
+ stackRef,
107
+ swipeBackContextRef,
108
+ swipeBackState,
109
+ setSwipeBackState,
110
+ setSwipeBackContext,
111
+ getSwipeBackEvents,
112
+ stackProps
113
+ }),
114
+ [swipeBackState, setSwipeBackContext, getSwipeBackEvents, stackProps]
115
+ );
116
+ }
117
+
118
+ export { useGlobalInteraction };
@@ -0,0 +1,20 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const React = require('react');
6
+
7
+ const GlobalInteractionContext = React.createContext(null);
8
+ const GlobalInteractionProvider = GlobalInteractionContext.Provider;
9
+ function useGlobalInteractionContext({
10
+ strict = true
11
+ } = {}) {
12
+ const context = React.useContext(GlobalInteractionContext);
13
+ if (!context && strict) {
14
+ throw new Error("useGlobalInteractionContext must be used within a GlobalInteractionProvider");
15
+ }
16
+ return context;
17
+ }
18
+
19
+ exports.GlobalInteractionProvider = GlobalInteractionProvider;
20
+ exports.useGlobalInteractionContext = useGlobalInteractionContext;
@@ -1,7 +1,8 @@
1
- import type { UseGlobalInteractionReturn } from "./useGlobalInteraction";
1
+ import { UseGlobalInteractionReturn } from './useGlobalInteraction';
2
+ import { Provider } from 'react';
2
3
  export interface UseGlobalInteractionContext extends UseGlobalInteractionReturn {
3
4
  }
4
- export declare const GlobalInteractionProvider: import("react").Provider<UseGlobalInteractionContext | null>;
5
+ export declare const GlobalInteractionProvider: Provider<UseGlobalInteractionContext | null>;
5
6
  export declare function useGlobalInteractionContext<T extends boolean | undefined = true>({ strict, }?: {
6
7
  strict?: T;
7
8
  }): T extends false ? UseGlobalInteractionContext | null : UseGlobalInteractionContext;
@@ -0,0 +1,15 @@
1
+ import { createContext, useContext } from 'react';
2
+
3
+ const GlobalInteractionContext = createContext(null);
4
+ const GlobalInteractionProvider = GlobalInteractionContext.Provider;
5
+ function useGlobalInteractionContext({
6
+ strict = true
7
+ } = {}) {
8
+ const context = useContext(GlobalInteractionContext);
9
+ if (!context && strict) {
10
+ throw new Error("useGlobalInteractionContext must be used within a GlobalInteractionProvider");
11
+ }
12
+ return context;
13
+ }
14
+
15
+ export { GlobalInteractionProvider, useGlobalInteractionContext };
@@ -0,0 +1,57 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const React = require('react');
6
+ const useGlobalInteractionContext = require('./useGlobalInteractionContext.cjs');
7
+
8
+ function useSwipeBack(props) {
9
+ const globalInteraction = useGlobalInteractionContext.useGlobalInteractionContext();
10
+ const events = globalInteraction.getSwipeBackEvents(props);
11
+ React.useEffect(() => {
12
+ return () => {
13
+ events.reset();
14
+ };
15
+ }, [events]);
16
+ return React.useMemo(
17
+ () => ({
18
+ activityProps: {
19
+ "data-swipe-back": ""
20
+ },
21
+ layerProps: {
22
+ onTransitionEnd: (e) => {
23
+ if (e.target === e.currentTarget) {
24
+ events.reset();
25
+ }
26
+ },
27
+ onAnimationEnd: (e) => {
28
+ if (e.target === e.currentTarget) {
29
+ events.reset();
30
+ }
31
+ }
32
+ },
33
+ edgeProps: {
34
+ tabIndex: -1,
35
+ onTouchStart: (e) => {
36
+ const x0 = e.touches[0].clientX;
37
+ const t0 = Date.now();
38
+ events.startSwipeBack({ x0, t0 });
39
+ },
40
+ onTouchMove: (e) => {
41
+ const x = e.touches[0].clientX;
42
+ const t = Date.now();
43
+ events.moveSwipeBack({ x, t });
44
+ },
45
+ onTouchEnd: () => {
46
+ events.endSwipeBack({});
47
+ },
48
+ onTouchCancel: () => {
49
+ events.endSwipeBack({});
50
+ }
51
+ }
52
+ }),
53
+ [events]
54
+ );
55
+ }
56
+
57
+ exports.useSwipeBack = useSwipeBack;
@@ -1,4 +1,4 @@
1
- import type { SwipeBackProps } from "./useGlobalInteraction";
1
+ import { SwipeBackProps } from './useGlobalInteraction';
2
2
  export interface UseSwipeBackProps extends SwipeBackProps {
3
3
  }
4
4
  export declare function useSwipeBack(props: UseSwipeBackProps): {
@@ -0,0 +1,53 @@
1
+ import { useEffect, useMemo } from 'react';
2
+ import { useGlobalInteractionContext } from './useGlobalInteractionContext.js';
3
+
4
+ function useSwipeBack(props) {
5
+ const globalInteraction = useGlobalInteractionContext();
6
+ const events = globalInteraction.getSwipeBackEvents(props);
7
+ useEffect(() => {
8
+ return () => {
9
+ events.reset();
10
+ };
11
+ }, [events]);
12
+ return useMemo(
13
+ () => ({
14
+ activityProps: {
15
+ "data-swipe-back": ""
16
+ },
17
+ layerProps: {
18
+ onTransitionEnd: (e) => {
19
+ if (e.target === e.currentTarget) {
20
+ events.reset();
21
+ }
22
+ },
23
+ onAnimationEnd: (e) => {
24
+ if (e.target === e.currentTarget) {
25
+ events.reset();
26
+ }
27
+ }
28
+ },
29
+ edgeProps: {
30
+ tabIndex: -1,
31
+ onTouchStart: (e) => {
32
+ const x0 = e.touches[0].clientX;
33
+ const t0 = Date.now();
34
+ events.startSwipeBack({ x0, t0 });
35
+ },
36
+ onTouchMove: (e) => {
37
+ const x = e.touches[0].clientX;
38
+ const t = Date.now();
39
+ events.moveSwipeBack({ x, t });
40
+ },
41
+ onTouchEnd: () => {
42
+ events.endSwipeBack({});
43
+ },
44
+ onTouchCancel: () => {
45
+ events.endSwipeBack({});
46
+ }
47
+ }
48
+ }),
49
+ [events]
50
+ );
51
+ }
52
+
53
+ export { useSwipeBack };
@@ -0,0 +1,27 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const AppScreen = require('./AppScreen/AppScreen.cjs');
6
+ const AppScreen_namespace = require('./AppScreen/AppScreen.namespace.cjs');
7
+ const useAppScreenContext = require('./AppScreen/useAppScreenContext.cjs');
8
+ const AppBar = require('./AppBar/AppBar.cjs');
9
+ const AppBar_namespace = require('./AppBar/AppBar.namespace.cjs');
10
+ const GlobalInteraction = require('./GlobalInteraction/GlobalInteraction.cjs');
11
+ const useGlobalInteractionContext = require('./GlobalInteraction/useGlobalInteractionContext.cjs');
12
+
13
+
14
+
15
+ exports.AppScreenDim = AppScreen.AppScreenDim;
16
+ exports.AppScreenEdge = AppScreen.AppScreenEdge;
17
+ exports.AppScreenLayer = AppScreen.AppScreenLayer;
18
+ exports.AppScreenRoot = AppScreen.AppScreenRoot;
19
+ exports.AppScreen = AppScreen_namespace;
20
+ exports.useAppScreenContext = useAppScreenContext.useAppScreenContext;
21
+ exports.AppBarLeft = AppBar.AppBarLeft;
22
+ exports.AppBarMain = AppBar.AppBarMain;
23
+ exports.AppBarRight = AppBar.AppBarRight;
24
+ exports.AppBarRoot = AppBar.AppBarRoot;
25
+ exports.AppBar = AppBar_namespace;
26
+ exports.GlobalInteraction = GlobalInteraction.GlobalInteraction;
27
+ exports.useGlobalInteractionContext = useGlobalInteractionContext.useGlobalInteractionContext;
@@ -1,3 +1,3 @@
1
- export * from "./AppScreen";
2
- export * from "./AppBar";
3
- export * from "./GlobalInteraction";
1
+ export * from './AppScreen';
2
+ export * from './AppBar';
3
+ export * from './GlobalInteraction';