@seed-design/stackflow 1.1.20 → 1.1.22

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 (93) hide show
  1. package/lib/_virtual/_rolldown/runtime.cjs +34 -0
  2. package/lib/_virtual/_rolldown/runtime.js +14 -0
  3. package/lib/components/AppBar/AppBar.cjs +86 -102
  4. package/lib/components/AppBar/AppBar.js +84 -98
  5. package/lib/components/AppBar/AppBar.namespace.cjs +20 -16
  6. package/lib/components/AppBar/AppBar.namespace.js +15 -1
  7. package/lib/components/AppBar/index.cjs +17 -18
  8. package/lib/components/AppBar/index.js +3 -3
  9. package/lib/components/AppScreen/AppScreen.cjs +46 -61
  10. package/lib/components/AppScreen/AppScreen.js +45 -57
  11. package/lib/components/AppScreen/AppScreen.namespace.cjs +17 -13
  12. package/lib/components/AppScreen/AppScreen.namespace.js +12 -1
  13. package/lib/components/AppScreen/index.cjs +14 -15
  14. package/lib/components/AppScreen/index.js +3 -3
  15. package/lib/components/index.cjs +30 -26
  16. package/lib/components/index.js +5 -6
  17. package/lib/hooks/index.cjs +3 -9
  18. package/lib/hooks/index.js +2 -1
  19. package/lib/hooks/useActivityZIndexBase.cjs +12 -11
  20. package/lib/hooks/useActivityZIndexBase.js +11 -7
  21. package/lib/index.cjs +41 -32
  22. package/lib/index.js +8 -10
  23. package/lib/plugin.cjs +16 -16
  24. package/lib/plugin.js +14 -12
  25. package/lib/primitive/AppBar/AppBar.cjs +41 -33
  26. package/lib/primitive/AppBar/AppBar.js +40 -29
  27. package/lib/primitive/AppBar/AppBar.namespace.cjs +16 -12
  28. package/lib/primitive/AppBar/AppBar.namespace.js +11 -1
  29. package/lib/primitive/AppBar/anatomy.cjs +18 -0
  30. package/lib/primitive/AppBar/anatomy.d.ts +15 -0
  31. package/lib/primitive/AppBar/anatomy.js +18 -0
  32. package/lib/primitive/AppBar/index.cjs +13 -14
  33. package/lib/primitive/AppBar/index.js +3 -3
  34. package/lib/primitive/AppBar/useAppBar.cjs +29 -36
  35. package/lib/primitive/AppBar/useAppBar.js +28 -32
  36. package/lib/primitive/AppBar/useAppBarContext.cjs +11 -18
  37. package/lib/primitive/AppBar/useAppBarContext.js +10 -14
  38. package/lib/primitive/AppScreen/AppScreen.cjs +49 -52
  39. package/lib/primitive/AppScreen/AppScreen.js +48 -48
  40. package/lib/primitive/AppScreen/AppScreen.namespace.cjs +16 -12
  41. package/lib/primitive/AppScreen/AppScreen.namespace.js +11 -1
  42. package/lib/primitive/AppScreen/anatomy.cjs +17 -0
  43. package/lib/primitive/AppScreen/anatomy.d.ts +14 -0
  44. package/lib/primitive/AppScreen/anatomy.js +17 -0
  45. package/lib/primitive/AppScreen/index.cjs +15 -16
  46. package/lib/primitive/AppScreen/index.js +4 -4
  47. package/lib/primitive/AppScreen/useAppScreen.cjs +60 -63
  48. package/lib/primitive/AppScreen/useAppScreen.js +59 -59
  49. package/lib/primitive/AppScreen/useAppScreenContext.cjs +11 -18
  50. package/lib/primitive/AppScreen/useAppScreenContext.js +10 -14
  51. package/lib/primitive/GlobalInteraction/GlobalInteraction.cjs +21 -26
  52. package/lib/primitive/GlobalInteraction/GlobalInteraction.js +20 -22
  53. package/lib/primitive/GlobalInteraction/animation.cjs +303 -0
  54. package/lib/primitive/GlobalInteraction/animation.d.ts +16 -0
  55. package/lib/primitive/GlobalInteraction/animation.js +299 -0
  56. package/lib/primitive/GlobalInteraction/constants.cjs +9 -0
  57. package/lib/primitive/GlobalInteraction/constants.d.ts +19 -0
  58. package/lib/primitive/GlobalInteraction/constants.js +8 -0
  59. package/lib/primitive/GlobalInteraction/dom.cjs +147 -0
  60. package/lib/primitive/GlobalInteraction/dom.d.ts +44 -0
  61. package/lib/primitive/GlobalInteraction/dom.js +140 -0
  62. package/lib/primitive/GlobalInteraction/index.cjs +5 -11
  63. package/lib/primitive/GlobalInteraction/index.js +3 -2
  64. package/lib/primitive/GlobalInteraction/useGlobalInteraction.cjs +220 -133
  65. package/lib/primitive/GlobalInteraction/useGlobalInteraction.d.ts +10 -26
  66. package/lib/primitive/GlobalInteraction/useGlobalInteraction.js +219 -129
  67. package/lib/primitive/GlobalInteraction/useGlobalInteractionContext.cjs +11 -18
  68. package/lib/primitive/GlobalInteraction/useGlobalInteractionContext.js +10 -14
  69. package/lib/primitive/GlobalInteraction/useSwipeBack.cjs +71 -55
  70. package/lib/primitive/GlobalInteraction/useSwipeBack.d.ts +19 -2
  71. package/lib/primitive/GlobalInteraction/useSwipeBack.js +70 -51
  72. package/lib/primitive/index.cjs +55 -27
  73. package/lib/primitive/index.js +26 -9
  74. package/lib/primitive/private/useElementOffset.cjs +29 -51
  75. package/lib/primitive/private/useElementOffset.js +27 -28
  76. package/lib/primitive/private/useTopActivity.cjs +22 -31
  77. package/lib/primitive/private/useTopActivity.js +21 -27
  78. package/lib/utils/createStyleContext.cjs +91 -74
  79. package/lib/utils/createStyleContext.js +89 -70
  80. package/lib/utils/styled.cjs +13 -20
  81. package/lib/utils/styled.js +12 -16
  82. package/package.json +5 -5
  83. package/src/components/AppBar/AppBar.tsx +9 -3
  84. package/src/primitive/AppBar/AppBar.tsx +4 -1
  85. package/src/primitive/AppBar/anatomy.ts +16 -0
  86. package/src/primitive/AppBar/useAppBar.tsx +2 -1
  87. package/src/primitive/AppScreen/anatomy.ts +15 -0
  88. package/src/primitive/AppScreen/useAppScreen.tsx +5 -4
  89. package/src/primitive/GlobalInteraction/animation.ts +447 -0
  90. package/src/primitive/GlobalInteraction/constants.ts +24 -0
  91. package/src/primitive/GlobalInteraction/dom.ts +211 -0
  92. package/src/primitive/GlobalInteraction/useGlobalInteraction.ts +302 -129
  93. package/src/primitive/GlobalInteraction/useSwipeBack.ts +64 -26
@@ -1,57 +1,57 @@
1
- 'use client';
2
- import { jsx } from 'react/jsx-runtime';
3
- import { composeRefs } from '@radix-ui/react-compose-refs';
4
- import { mergeProps } from '@seed-design/dom-utils';
5
- import { Primitive } from '@seed-design/react-primitive';
6
- import { usePreventTouchDuringTransition } from '@stackflow/react-ui-core';
7
- import { forwardRef, useRef } from 'react';
8
- import { useAppScreen } from './useAppScreen.js';
9
- import { useAppScreenContext, AppScreenProvider } from './useAppScreenContext.js';
10
-
11
- const AppScreenRoot = forwardRef((props, ref) => {
12
- const {
13
- swipeBackDisplacementRatioThreshold,
14
- swipeBackVelocityThreshold,
15
- onSwipeBackEnd,
16
- onSwipeBackMove,
17
- onSwipeBackStart,
18
- ...otherProps
19
- } = props;
20
- const innerRef = useRef(null);
21
- const api = useAppScreen({
22
- swipeBackDisplacementRatioThreshold,
23
- swipeBackVelocityThreshold,
24
- onSwipeBackEnd,
25
- onSwipeBackMove,
26
- onSwipeBackStart
27
- });
28
- usePreventTouchDuringTransition({
29
- ref: innerRef
30
- });
31
- return /* @__PURE__ */ jsx(AppScreenProvider, { value: api, children: /* @__PURE__ */ jsx(
32
- Primitive.div,
33
- {
34
- ref: composeRefs(innerRef, ref),
35
- "data-stackflow-component-name": "AppScreen",
36
- ...mergeProps(api.activityProps, otherProps)
37
- }
38
- ) });
1
+ "use client";
2
+ import { useAppScreen } from "./useAppScreen.js";
3
+ import { AppScreenProvider, useAppScreenContext } from "./useAppScreenContext.js";
4
+ import { mergeProps } from "@seed-design/dom-utils";
5
+ import { Primitive } from "@seed-design/react-primitive";
6
+ import { forwardRef, useRef } from "react";
7
+ import { composeRefs } from "@radix-ui/react-compose-refs";
8
+ import { usePreventTouchDuringTransition } from "@stackflow/react-ui-core";
9
+ import { jsx } from "react/jsx-runtime";
10
+ //#region src/primitive/AppScreen/AppScreen.tsx
11
+ var AppScreenRoot = forwardRef((props, ref) => {
12
+ const { swipeBackDisplacementRatioThreshold, swipeBackVelocityThreshold, onSwipeBackEnd, onSwipeBackMove, onSwipeBackStart, ...otherProps } = props;
13
+ const innerRef = useRef(null);
14
+ const api = useAppScreen({
15
+ swipeBackDisplacementRatioThreshold,
16
+ swipeBackVelocityThreshold,
17
+ onSwipeBackEnd,
18
+ onSwipeBackMove,
19
+ onSwipeBackStart
20
+ });
21
+ usePreventTouchDuringTransition({ ref: innerRef });
22
+ return /* @__PURE__ */ jsx(AppScreenProvider, {
23
+ value: api,
24
+ children: /* @__PURE__ */ jsx(Primitive.div, {
25
+ ref: composeRefs(innerRef, ref),
26
+ "data-stackflow-component-name": "AppScreen",
27
+ ...mergeProps(api.activityProps, otherProps)
28
+ })
29
+ });
39
30
  });
40
31
  AppScreenRoot.displayName = "AppScreenRoot";
41
- const AppScreenDim = forwardRef((props, ref) => {
42
- const { dimProps } = useAppScreenContext();
43
- return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(dimProps, props) });
32
+ var AppScreenDim = forwardRef((props, ref) => {
33
+ const { dimProps } = useAppScreenContext();
34
+ return /* @__PURE__ */ jsx(Primitive.div, {
35
+ ref,
36
+ ...mergeProps(dimProps, props)
37
+ });
44
38
  });
45
39
  AppScreenDim.displayName = "AppScreenDim";
46
- const AppScreenEdge = forwardRef((props, ref) => {
47
- const { edgeProps } = useAppScreenContext();
48
- return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(edgeProps, props) });
40
+ var AppScreenEdge = forwardRef((props, ref) => {
41
+ const { edgeProps } = useAppScreenContext();
42
+ return /* @__PURE__ */ jsx(Primitive.div, {
43
+ ref,
44
+ ...mergeProps(edgeProps, props)
45
+ });
49
46
  });
50
47
  AppScreenEdge.displayName = "AppScreenEdge";
51
- const AppScreenLayer = forwardRef((props, ref) => {
52
- const { layerProps } = useAppScreenContext();
53
- return /* @__PURE__ */ jsx(Primitive.div, { ref, ...mergeProps(layerProps, props) });
48
+ var AppScreenLayer = forwardRef((props, ref) => {
49
+ const { layerProps } = useAppScreenContext();
50
+ return /* @__PURE__ */ jsx(Primitive.div, {
51
+ ref,
52
+ ...mergeProps(layerProps, props)
53
+ });
54
54
  });
55
55
  AppScreenLayer.displayName = "AppScreenLayer";
56
-
56
+ //#endregion
57
57
  export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot };
@@ -1,12 +1,16 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const AppScreen = require('./AppScreen.cjs');
6
-
7
-
8
-
9
- exports.Dim = AppScreen.AppScreenDim;
10
- exports.Edge = AppScreen.AppScreenEdge;
11
- exports.Layer = AppScreen.AppScreenLayer;
12
- exports.Root = AppScreen.AppScreenRoot;
1
+ const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
2
+ const require_AppScreen = require("./AppScreen.cjs");
3
+ //#region src/primitive/AppScreen/AppScreen.namespace.ts
4
+ var AppScreen_namespace_exports = /* @__PURE__ */ require_runtime.__exportAll({
5
+ Dim: () => require_AppScreen.AppScreenDim,
6
+ Edge: () => require_AppScreen.AppScreenEdge,
7
+ Layer: () => require_AppScreen.AppScreenLayer,
8
+ Root: () => require_AppScreen.AppScreenRoot
9
+ });
10
+ //#endregion
11
+ Object.defineProperty(exports, "AppScreen_namespace_exports", {
12
+ enumerable: true,
13
+ get: function() {
14
+ return AppScreen_namespace_exports;
15
+ }
16
+ });
@@ -1 +1,11 @@
1
- export { AppScreenDim as Dim, AppScreenEdge as Edge, AppScreenLayer as Layer, AppScreenRoot as Root } from './AppScreen.js';
1
+ import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
2
+ import { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot } from "./AppScreen.js";
3
+ //#region src/primitive/AppScreen/AppScreen.namespace.ts
4
+ var AppScreen_namespace_exports = /* @__PURE__ */ __exportAll({
5
+ Dim: () => AppScreenDim,
6
+ Edge: () => AppScreenEdge,
7
+ Layer: () => AppScreenLayer,
8
+ Root: () => AppScreenRoot
9
+ });
10
+ //#endregion
11
+ export { AppScreen_namespace_exports };
@@ -0,0 +1,17 @@
1
+ "use client";
2
+ //#region src/primitive/AppScreen/anatomy.ts
3
+ /**
4
+ * Parts of the AppScreen anatomy.
5
+ *
6
+ * Each value is the literal `data-part` attribute placed on the rendered DOM.
7
+ * Consumers in GlobalInteraction/dom.ts import from here to keep markup and
8
+ * DOM queries in sync.
9
+ */
10
+ var appScreenAnatomy = {
11
+ activity: "activity",
12
+ dim: "dim",
13
+ layer: "layer",
14
+ edge: "edge"
15
+ };
16
+ //#endregion
17
+ exports.appScreenAnatomy = appScreenAnatomy;
@@ -0,0 +1,14 @@
1
+ /**
2
+ * Parts of the AppScreen anatomy.
3
+ *
4
+ * Each value is the literal `data-part` attribute placed on the rendered DOM.
5
+ * Consumers in GlobalInteraction/dom.ts import from here to keep markup and
6
+ * DOM queries in sync.
7
+ */
8
+ export declare const appScreenAnatomy: {
9
+ readonly activity: "activity";
10
+ readonly dim: "dim";
11
+ readonly layer: "layer";
12
+ readonly edge: "edge";
13
+ };
14
+ export type AppScreenPart = (typeof appScreenAnatomy)[keyof typeof appScreenAnatomy];
@@ -0,0 +1,17 @@
1
+ "use client";
2
+ //#region src/primitive/AppScreen/anatomy.ts
3
+ /**
4
+ * Parts of the AppScreen anatomy.
5
+ *
6
+ * Each value is the literal `data-part` attribute placed on the rendered DOM.
7
+ * Consumers in GlobalInteraction/dom.ts import from here to keep markup and
8
+ * DOM queries in sync.
9
+ */
10
+ var appScreenAnatomy = {
11
+ activity: "activity",
12
+ dim: "dim",
13
+ layer: "layer",
14
+ edge: "edge"
15
+ };
16
+ //#endregion
17
+ export { appScreenAnatomy };
@@ -1,16 +1,15 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const AppScreen = require('./AppScreen.cjs');
6
- const AppScreen_namespace = require('./AppScreen.namespace.cjs');
7
- const useAppScreenContext = require('./useAppScreenContext.cjs');
8
-
9
-
10
-
11
- exports.AppScreenDim = AppScreen.AppScreenDim;
12
- exports.AppScreenEdge = AppScreen.AppScreenEdge;
13
- exports.AppScreenLayer = AppScreen.AppScreenLayer;
14
- exports.AppScreenRoot = AppScreen.AppScreenRoot;
15
- exports.AppScreen = AppScreen_namespace;
16
- exports.useAppScreenContext = useAppScreenContext.useAppScreenContext;
1
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
2
+ const require_useAppScreenContext = require("./useAppScreenContext.cjs");
3
+ const require_AppScreen = require("./AppScreen.cjs");
4
+ const require_AppScreen_namespace = require("./AppScreen.namespace.cjs");
5
+ Object.defineProperty(exports, "AppScreen", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return require_AppScreen_namespace.AppScreen_namespace_exports;
9
+ }
10
+ });
11
+ exports.AppScreenDim = require_AppScreen.AppScreenDim;
12
+ exports.AppScreenEdge = require_AppScreen.AppScreenEdge;
13
+ exports.AppScreenLayer = require_AppScreen.AppScreenLayer;
14
+ exports.AppScreenRoot = require_AppScreen.AppScreenRoot;
15
+ exports.useAppScreenContext = require_useAppScreenContext.useAppScreenContext;
@@ -1,4 +1,4 @@
1
- export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot } from './AppScreen.js';
2
- import * as AppScreen_namespace from './AppScreen.namespace.js';
3
- export { AppScreen_namespace as AppScreen };
4
- export { useAppScreenContext } from './useAppScreenContext.js';
1
+ import { useAppScreenContext } from "./useAppScreenContext.js";
2
+ import { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot } from "./AppScreen.js";
3
+ import { AppScreen_namespace_exports } from "./AppScreen.namespace.js";
4
+ export { AppScreen_namespace_exports as AppScreen, AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot, useAppScreenContext };
@@ -1,66 +1,63 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
-
6
- const domUtils = require('@seed-design/dom-utils');
7
- const reactUiCore = require('@stackflow/react-ui-core');
8
- const React = require('react');
9
- const useSwipeBack = require('../GlobalInteraction/useSwipeBack.cjs');
10
- const useActivityZIndexBase = require('../../hooks/useActivityZIndexBase.cjs');
11
-
1
+ "use client";
2
+ require("../../_virtual/_rolldown/runtime.cjs");
3
+ const require_useSwipeBack = require("../GlobalInteraction/useSwipeBack.cjs");
4
+ const require_useActivityZIndexBase = require("../../hooks/useActivityZIndexBase.cjs");
5
+ const require_anatomy = require("./anatomy.cjs");
6
+ let _seed_design_dom_utils = require("@seed-design/dom-utils");
7
+ let react = require("react");
8
+ let _stackflow_react_ui_core = require("@stackflow/react-ui-core");
9
+ //#region src/primitive/AppScreen/useAppScreen.tsx
12
10
  function useAppScreen(props) {
13
- const activity = reactUiCore.useNullableActivity();
14
- const transitionState = activity?.transitionState ?? "enter-done";
15
- const { activityProps, layerProps, edgeProps } = useSwipeBack.useSwipeBack(props);
16
- const zIndexBase = useActivityZIndexBase.useActivityZIndexBase();
17
- const zIndexStyle = React.useMemo(
18
- () => ({
19
- "--z-index-base": zIndexBase.toString()
20
- }),
21
- [zIndexBase]
22
- );
23
- const stateProps = React.useMemo(
24
- () => ({
25
- "data-activity-is-top": domUtils.dataAttr(activity?.isTop),
26
- "data-activity-is-active": domUtils.dataAttr(activity?.isActive),
27
- "data-transition-state": transitionState
28
- }),
29
- [transitionState, activity?.isActive, activity?.isTop]
30
- );
31
- return React.useMemo(
32
- () => ({
33
- activity,
34
- stateProps,
35
- activityProps: domUtils.elementProps({
36
- "data-part": "activity",
37
- "data-activity-type": "full-screen",
38
- ...activityProps,
39
- ...stateProps,
40
- "data-activity-id": activity?.id,
41
- style: zIndexStyle,
42
- // FIXME: @stackflow/react should prevent activity.id hydration mismatch; this is temporal fix.
43
- suppressHydrationWarning: true
44
- }),
45
- dimProps: domUtils.elementProps({
46
- "data-part": "dim",
47
- ...stateProps
48
- }),
49
- layerProps: domUtils.elementProps({
50
- "data-part": "layer",
51
- ...stateProps,
52
- ...layerProps
53
- }),
54
- edgeProps: domUtils.elementProps({
55
- "data-part": "edge",
56
- "aria-hidden": true,
57
- tabIndex: -1,
58
- ...edgeProps,
59
- ...stateProps
60
- })
61
- }),
62
- [activity, zIndexStyle, stateProps, activityProps, edgeProps, layerProps]
63
- );
11
+ const activity = (0, _stackflow_react_ui_core.useNullableActivity)();
12
+ const transitionState = activity?.transitionState ?? "enter-done";
13
+ const { activityProps, layerProps, edgeProps } = require_useSwipeBack.useSwipeBack(props);
14
+ const zIndexBase = require_useActivityZIndexBase.useActivityZIndexBase();
15
+ const zIndexStyle = (0, react.useMemo)(() => ({ "--z-index-base": zIndexBase.toString() }), [zIndexBase]);
16
+ const stateProps = (0, react.useMemo)(() => ({
17
+ "data-activity-is-top": (0, _seed_design_dom_utils.dataAttr)(activity?.isTop),
18
+ "data-activity-is-active": (0, _seed_design_dom_utils.dataAttr)(activity?.isActive),
19
+ "data-transition-state": transitionState
20
+ }), [
21
+ transitionState,
22
+ activity?.isActive,
23
+ activity?.isTop
24
+ ]);
25
+ return (0, react.useMemo)(() => ({
26
+ activity,
27
+ stateProps,
28
+ activityProps: (0, _seed_design_dom_utils.elementProps)({
29
+ "data-part": require_anatomy.appScreenAnatomy.activity,
30
+ "data-activity-type": "full-screen",
31
+ ...activityProps,
32
+ ...stateProps,
33
+ "data-activity-id": activity?.id,
34
+ style: zIndexStyle,
35
+ suppressHydrationWarning: true
36
+ }),
37
+ dimProps: (0, _seed_design_dom_utils.elementProps)({
38
+ "data-part": require_anatomy.appScreenAnatomy.dim,
39
+ ...stateProps
40
+ }),
41
+ layerProps: (0, _seed_design_dom_utils.elementProps)({
42
+ "data-part": require_anatomy.appScreenAnatomy.layer,
43
+ ...stateProps,
44
+ ...layerProps
45
+ }),
46
+ edgeProps: (0, _seed_design_dom_utils.elementProps)({
47
+ "data-part": require_anatomy.appScreenAnatomy.edge,
48
+ "aria-hidden": true,
49
+ tabIndex: -1,
50
+ ...edgeProps,
51
+ ...stateProps
52
+ })
53
+ }), [
54
+ activity,
55
+ zIndexStyle,
56
+ stateProps,
57
+ activityProps,
58
+ edgeProps,
59
+ layerProps
60
+ ]);
64
61
  }
65
-
62
+ //#endregion
66
63
  exports.useAppScreen = useAppScreen;
@@ -1,62 +1,62 @@
1
- 'use client';
2
- import { dataAttr, elementProps } from '@seed-design/dom-utils';
3
- import { useNullableActivity } from '@stackflow/react-ui-core';
4
- import { useMemo } from 'react';
5
- import { useSwipeBack } from '../GlobalInteraction/useSwipeBack.js';
6
- import { useActivityZIndexBase } from '../../hooks/useActivityZIndexBase.js';
7
-
1
+ "use client";
2
+ import { useSwipeBack } from "../GlobalInteraction/useSwipeBack.js";
3
+ import { useActivityZIndexBase } from "../../hooks/useActivityZIndexBase.js";
4
+ import { appScreenAnatomy } from "./anatomy.js";
5
+ import { dataAttr, elementProps } from "@seed-design/dom-utils";
6
+ import { useMemo } from "react";
7
+ import { useNullableActivity } from "@stackflow/react-ui-core";
8
+ //#region src/primitive/AppScreen/useAppScreen.tsx
8
9
  function useAppScreen(props) {
9
- const activity = useNullableActivity();
10
- const transitionState = activity?.transitionState ?? "enter-done";
11
- const { activityProps, layerProps, edgeProps } = useSwipeBack(props);
12
- const zIndexBase = useActivityZIndexBase();
13
- const zIndexStyle = useMemo(
14
- () => ({
15
- "--z-index-base": zIndexBase.toString()
16
- }),
17
- [zIndexBase]
18
- );
19
- const stateProps = useMemo(
20
- () => ({
21
- "data-activity-is-top": dataAttr(activity?.isTop),
22
- "data-activity-is-active": dataAttr(activity?.isActive),
23
- "data-transition-state": transitionState
24
- }),
25
- [transitionState, activity?.isActive, activity?.isTop]
26
- );
27
- return useMemo(
28
- () => ({
29
- activity,
30
- stateProps,
31
- activityProps: elementProps({
32
- "data-part": "activity",
33
- "data-activity-type": "full-screen",
34
- ...activityProps,
35
- ...stateProps,
36
- "data-activity-id": activity?.id,
37
- style: zIndexStyle,
38
- // FIXME: @stackflow/react should prevent activity.id hydration mismatch; this is temporal fix.
39
- suppressHydrationWarning: true
40
- }),
41
- dimProps: elementProps({
42
- "data-part": "dim",
43
- ...stateProps
44
- }),
45
- layerProps: elementProps({
46
- "data-part": "layer",
47
- ...stateProps,
48
- ...layerProps
49
- }),
50
- edgeProps: elementProps({
51
- "data-part": "edge",
52
- "aria-hidden": true,
53
- tabIndex: -1,
54
- ...edgeProps,
55
- ...stateProps
56
- })
57
- }),
58
- [activity, zIndexStyle, stateProps, activityProps, edgeProps, layerProps]
59
- );
10
+ const activity = useNullableActivity();
11
+ const transitionState = activity?.transitionState ?? "enter-done";
12
+ const { activityProps, layerProps, edgeProps } = useSwipeBack(props);
13
+ const zIndexBase = useActivityZIndexBase();
14
+ const zIndexStyle = useMemo(() => ({ "--z-index-base": zIndexBase.toString() }), [zIndexBase]);
15
+ const stateProps = useMemo(() => ({
16
+ "data-activity-is-top": dataAttr(activity?.isTop),
17
+ "data-activity-is-active": dataAttr(activity?.isActive),
18
+ "data-transition-state": transitionState
19
+ }), [
20
+ transitionState,
21
+ activity?.isActive,
22
+ activity?.isTop
23
+ ]);
24
+ return useMemo(() => ({
25
+ activity,
26
+ stateProps,
27
+ activityProps: elementProps({
28
+ "data-part": appScreenAnatomy.activity,
29
+ "data-activity-type": "full-screen",
30
+ ...activityProps,
31
+ ...stateProps,
32
+ "data-activity-id": activity?.id,
33
+ style: zIndexStyle,
34
+ suppressHydrationWarning: true
35
+ }),
36
+ dimProps: elementProps({
37
+ "data-part": appScreenAnatomy.dim,
38
+ ...stateProps
39
+ }),
40
+ layerProps: elementProps({
41
+ "data-part": appScreenAnatomy.layer,
42
+ ...stateProps,
43
+ ...layerProps
44
+ }),
45
+ edgeProps: elementProps({
46
+ "data-part": appScreenAnatomy.edge,
47
+ "aria-hidden": true,
48
+ tabIndex: -1,
49
+ ...edgeProps,
50
+ ...stateProps
51
+ })
52
+ }), [
53
+ activity,
54
+ zIndexStyle,
55
+ stateProps,
56
+ activityProps,
57
+ edgeProps,
58
+ layerProps
59
+ ]);
60
60
  }
61
-
61
+ //#endregion
62
62
  export { useAppScreen };
@@ -1,21 +1,14 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
-
6
- const React = require('react');
7
-
8
- const AppScreenContext = React.createContext(null);
9
- const AppScreenProvider = AppScreenContext.Provider;
10
- function useAppScreenContext({
11
- strict = true
12
- } = {}) {
13
- const context = React.useContext(AppScreenContext);
14
- if (!context && strict) {
15
- throw new Error("useAppScreenContext must be used within a AppScreen");
16
- }
17
- return context;
1
+ "use client";
2
+ require("../../_virtual/_rolldown/runtime.cjs");
3
+ let react = require("react");
4
+ //#region src/primitive/AppScreen/useAppScreenContext.ts
5
+ var AppScreenContext = (0, react.createContext)(null);
6
+ var AppScreenProvider = AppScreenContext.Provider;
7
+ function useAppScreenContext({ strict = true } = {}) {
8
+ const context = (0, react.useContext)(AppScreenContext);
9
+ if (!context && strict) throw new Error("useAppScreenContext must be used within a AppScreen");
10
+ return context;
18
11
  }
19
-
12
+ //#endregion
20
13
  exports.AppScreenProvider = AppScreenProvider;
21
14
  exports.useAppScreenContext = useAppScreenContext;
@@ -1,16 +1,12 @@
1
- 'use client';
2
- import { createContext, useContext } from 'react';
3
-
4
- const AppScreenContext = createContext(null);
5
- const AppScreenProvider = AppScreenContext.Provider;
6
- function useAppScreenContext({
7
- strict = true
8
- } = {}) {
9
- const context = useContext(AppScreenContext);
10
- if (!context && strict) {
11
- throw new Error("useAppScreenContext must be used within a AppScreen");
12
- }
13
- return context;
1
+ "use client";
2
+ import { createContext, useContext } from "react";
3
+ //#region src/primitive/AppScreen/useAppScreenContext.ts
4
+ var AppScreenContext = createContext(null);
5
+ var AppScreenProvider = AppScreenContext.Provider;
6
+ function useAppScreenContext({ strict = true } = {}) {
7
+ const context = useContext(AppScreenContext);
8
+ if (!context && strict) throw new Error("useAppScreenContext must be used within a AppScreen");
9
+ return context;
14
10
  }
15
-
11
+ //#endregion
16
12
  export { AppScreenProvider, useAppScreenContext };
@@ -1,28 +1,23 @@
1
- 'use client';
2
- 'use strict';
3
-
4
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
-
6
- const jsxRuntime = require('react/jsx-runtime');
7
- const reactComposeRefs = require('@radix-ui/react-compose-refs');
8
- const domUtils = require('@seed-design/dom-utils');
9
- const reactPrimitive = require('@seed-design/react-primitive');
10
- const React = require('react');
11
- const useGlobalInteraction = require('./useGlobalInteraction.cjs');
12
- const useGlobalInteractionContext = require('./useGlobalInteractionContext.cjs');
13
-
14
- const GlobalInteraction = React.forwardRef(
15
- (props, ref) => {
16
- const api = useGlobalInteraction.useGlobalInteraction();
17
- return /* @__PURE__ */ jsxRuntime.jsx(useGlobalInteractionContext.GlobalInteractionProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
18
- reactPrimitive.Primitive.div,
19
- {
20
- ref: reactComposeRefs.composeRefs(api.stackRef, ref),
21
- ...domUtils.mergeProps(api.stackProps, props)
22
- }
23
- ) });
24
- }
25
- );
1
+ "use client";
2
+ require("../../_virtual/_rolldown/runtime.cjs");
3
+ const require_useGlobalInteractionContext = require("./useGlobalInteractionContext.cjs");
4
+ const require_useGlobalInteraction = require("./useGlobalInteraction.cjs");
5
+ let _seed_design_dom_utils = require("@seed-design/dom-utils");
6
+ let _seed_design_react_primitive = require("@seed-design/react-primitive");
7
+ let react = require("react");
8
+ let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
9
+ let react_jsx_runtime = require("react/jsx-runtime");
10
+ //#region src/primitive/GlobalInteraction/GlobalInteraction.tsx
11
+ var GlobalInteraction = (0, react.forwardRef)((props, ref) => {
12
+ const api = require_useGlobalInteraction.useGlobalInteraction();
13
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useGlobalInteractionContext.GlobalInteractionProvider, {
14
+ value: api,
15
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
16
+ ref: (0, _radix_ui_react_compose_refs.composeRefs)(api.stackRef, ref),
17
+ ...(0, _seed_design_dom_utils.mergeProps)(api.stackProps, props)
18
+ })
19
+ });
20
+ });
26
21
  GlobalInteraction.displayName = "GlobalInteraction";
27
-
22
+ //#endregion
28
23
  exports.GlobalInteraction = GlobalInteraction;