@seed-design/stackflow 1.1.20 → 1.1.21

package/lib/primitive/GlobalInteraction/useSwipeBack.js

@@ -1,54 +1,73 @@
-'use client';
-import { useEffect, useMemo } from 'react';
-import { useGlobalInteractionContext } from './useGlobalInteractionContext.js';
-
+"use client";
+import { useGlobalInteractionContext } from "./useGlobalInteractionContext.js";
+import { useEffect, useMemo, useRef } from "react";
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+//#region src/primitive/GlobalInteraction/useSwipeBack.ts
 function useSwipeBack(props) {
-  const globalInteraction = useGlobalInteractionContext();
-  const events = globalInteraction.getSwipeBackEvents(props);
-  useEffect(() => {
-    return () => {
-      events.reset();
-    };
-  }, [events]);
-  return useMemo(
-    () => ({
-      activityProps: {
-        "data-swipe-back": ""
-      },
-      layerProps: {
-        onAnimationEnd: (e) => {
-          if (e.target === e.currentTarget) {
-            events.reset();
-          }
-        },
-        onTransitionEnd: (e) => {
-          if (e.target === e.currentTarget) {
-            events.reset();
-          }
-        }
-      },
-      edgeProps: {
-        tabIndex: -1,
-        onTouchStart: (e) => {
-          const x0 = e.touches[0].clientX;
-          const t0 = Date.now();
-          events.startSwipeBack({ x0, t0 });
-        },
-        onTouchMove: (e) => {
-          const x = e.touches[0].clientX;
-          const t = Date.now();
-          events.moveSwipeBack({ x, t });
-        },
-        onTouchEnd: () => {
-          events.endSwipeBack({});
-        },
-        onTouchCancel: () => {
-          events.endSwipeBack({});
-        }
-      }
-    }),
-    [events]
-  );
+	const { swipeBackDisplacementRatioThreshold: displacementRatioThreshold, swipeBackVelocityThreshold: velocityThreshold } = props;
+	const onSwipeStart = useCallbackRef(props.onSwipeBackStart);
+	const onSwipeMove = useCallbackRef(props.onSwipeBackMove);
+	const onSwipeEnd = useCallbackRef(props.onSwipeBackEnd);
+	const { startSwipeBack, moveSwipeBack, endSwipeBack, resetSwipeBack } = useGlobalInteractionContext();
+	const rAFLockRef = useRef(false);
+	useEffect(() => {
+		return () => {
+			resetSwipeBack();
+		};
+	}, [resetSwipeBack]);
+	return useMemo(() => ({
+		activityProps: { "data-swipe-back": "" },
+		layerProps: {},
+		edgeProps: {
+			tabIndex: -1,
+			onTouchStart: (e) => {
+				const x0 = e.touches[0].clientX;
+				startSwipeBack({
+					x0,
+					t0: Date.now()
+				});
+				onSwipeStart();
+			},
+			onTouchMove: (e) => {
+				if (rAFLockRef.current) return;
+				rAFLockRef.current = true;
+				const x = e.touches[0].clientX;
+				const t = Date.now();
+				requestAnimationFrame(() => {
+					const ctx = moveSwipeBack({
+						x,
+						t
+					});
+					rAFLockRef.current = false;
+					onSwipeMove({
+						displacement: ctx.displacement,
+						displacementRatio: ctx.displacementRatio
+					});
+				});
+			},
+			onTouchEnd: () => {
+				onSwipeEnd({ swiped: endSwipeBack({
+					displacementRatioThreshold,
+					velocityThreshold
+				}) });
+			},
+			onTouchCancel: () => {
+				onSwipeEnd({ swiped: endSwipeBack({
+					displacementRatioThreshold,
+					velocityThreshold
+				}) });
+			}
+		}
+	}), [
+		startSwipeBack,
+		moveSwipeBack,
+		endSwipeBack,
+		onSwipeStart,
+		onSwipeMove,
+		onSwipeEnd,
+		displacementRatioThreshold,
+		velocityThreshold
+	]);
 }
-
+//#endregion
 export { useSwipeBack };

package/lib/primitive/index.cjs

@@ -1,27 +1,55 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const AppScreen = require('./AppScreen/AppScreen.cjs');
-const AppScreen_namespace = require('./AppScreen/AppScreen.namespace.cjs');
-const useAppScreenContext = require('./AppScreen/useAppScreenContext.cjs');
-const AppBar = require('./AppBar/AppBar.cjs');
-const AppBar_namespace = require('./AppBar/AppBar.namespace.cjs');
-const GlobalInteraction = require('./GlobalInteraction/GlobalInteraction.cjs');
-const useGlobalInteractionContext = require('./GlobalInteraction/useGlobalInteractionContext.cjs');
-
-
-
-exports.AppScreenDim = AppScreen.AppScreenDim;
-exports.AppScreenEdge = AppScreen.AppScreenEdge;
-exports.AppScreenLayer = AppScreen.AppScreenLayer;
-exports.AppScreenRoot = AppScreen.AppScreenRoot;
-exports.AppScreen = AppScreen_namespace;
-exports.useAppScreenContext = useAppScreenContext.useAppScreenContext;
-exports.AppBarLeft = AppBar.AppBarLeft;
-exports.AppBarMain = AppBar.AppBarMain;
-exports.AppBarRight = AppBar.AppBarRight;
-exports.AppBarRoot = AppBar.AppBarRoot;
-exports.AppBar = AppBar_namespace;
-exports.GlobalInteraction = GlobalInteraction.GlobalInteraction;
-exports.useGlobalInteractionContext = useGlobalInteractionContext.useGlobalInteractionContext;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_useGlobalInteractionContext = require("./GlobalInteraction/useGlobalInteractionContext.cjs");
+const require_useAppScreenContext = require("./AppScreen/useAppScreenContext.cjs");
+const require_AppScreen = require("./AppScreen/AppScreen.cjs");
+const require_AppScreen_namespace = require("./AppScreen/AppScreen.namespace.cjs");
+const require_AppBar = require("./AppBar/AppBar.cjs");
+const require_AppBar_namespace = require("./AppBar/AppBar.namespace.cjs");
+const require_GlobalInteraction = require("./GlobalInteraction/GlobalInteraction.cjs");
+//#region src/primitive/index.ts
+var primitive_exports = /* @__PURE__ */ require_runtime.__exportAll({
+	AppBar: () => require_AppBar_namespace.AppBar_namespace_exports,
+	AppBarLeft: () => require_AppBar.AppBarLeft,
+	AppBarMain: () => require_AppBar.AppBarMain,
+	AppBarRight: () => require_AppBar.AppBarRight,
+	AppBarRoot: () => require_AppBar.AppBarRoot,
+	AppScreen: () => require_AppScreen_namespace.AppScreen_namespace_exports,
+	AppScreenDim: () => require_AppScreen.AppScreenDim,
+	AppScreenEdge: () => require_AppScreen.AppScreenEdge,
+	AppScreenLayer: () => require_AppScreen.AppScreenLayer,
+	AppScreenRoot: () => require_AppScreen.AppScreenRoot,
+	GlobalInteraction: () => require_GlobalInteraction.GlobalInteraction,
+	useAppScreenContext: () => require_useAppScreenContext.useAppScreenContext,
+	useGlobalInteractionContext: () => require_useGlobalInteractionContext.useGlobalInteractionContext
+});
+//#endregion
+Object.defineProperty(exports, "AppBar", {
+	enumerable: true,
+	get: function() {
+		return require_AppBar_namespace.AppBar_namespace_exports;
+	}
+});
+exports.AppBarLeft = require_AppBar.AppBarLeft;
+exports.AppBarMain = require_AppBar.AppBarMain;
+exports.AppBarRight = require_AppBar.AppBarRight;
+exports.AppBarRoot = require_AppBar.AppBarRoot;
+Object.defineProperty(exports, "AppScreen", {
+	enumerable: true,
+	get: function() {
+		return require_AppScreen_namespace.AppScreen_namespace_exports;
+	}
+});
+exports.AppScreenDim = require_AppScreen.AppScreenDim;
+exports.AppScreenEdge = require_AppScreen.AppScreenEdge;
+exports.AppScreenLayer = require_AppScreen.AppScreenLayer;
+exports.AppScreenRoot = require_AppScreen.AppScreenRoot;
+exports.GlobalInteraction = require_GlobalInteraction.GlobalInteraction;
+Object.defineProperty(exports, "primitive_exports", {
+	enumerable: true,
+	get: function() {
+		return primitive_exports;
+	}
+});
+exports.useAppScreenContext = require_useAppScreenContext.useAppScreenContext;
+exports.useGlobalInteractionContext = require_useGlobalInteractionContext.useGlobalInteractionContext;

package/lib/primitive/index.js

@@ -1,9 +1,26 @@
-export { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot } from './AppScreen/AppScreen.js';
-import * as AppScreen_namespace from './AppScreen/AppScreen.namespace.js';
-export { AppScreen_namespace as AppScreen };
-export { useAppScreenContext } from './AppScreen/useAppScreenContext.js';
-export { AppBarLeft, AppBarMain, AppBarRight, AppBarRoot } from './AppBar/AppBar.js';
-import * as AppBar_namespace from './AppBar/AppBar.namespace.js';
-export { AppBar_namespace as AppBar };
-export { GlobalInteraction } from './GlobalInteraction/GlobalInteraction.js';
-export { useGlobalInteractionContext } from './GlobalInteraction/useGlobalInteractionContext.js';
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { useGlobalInteractionContext } from "./GlobalInteraction/useGlobalInteractionContext.js";
+import { useAppScreenContext } from "./AppScreen/useAppScreenContext.js";
+import { AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot } from "./AppScreen/AppScreen.js";
+import { AppScreen_namespace_exports } from "./AppScreen/AppScreen.namespace.js";
+import { AppBarLeft, AppBarMain, AppBarRight, AppBarRoot } from "./AppBar/AppBar.js";
+import { AppBar_namespace_exports } from "./AppBar/AppBar.namespace.js";
+import { GlobalInteraction } from "./GlobalInteraction/GlobalInteraction.js";
+//#region src/primitive/index.ts
+var primitive_exports = /* @__PURE__ */ __exportAll({
+	AppBar: () => AppBar_namespace_exports,
+	AppBarLeft: () => AppBarLeft,
+	AppBarMain: () => AppBarMain,
+	AppBarRight: () => AppBarRight,
+	AppBarRoot: () => AppBarRoot,
+	AppScreen: () => AppScreen_namespace_exports,
+	AppScreenDim: () => AppScreenDim,
+	AppScreenEdge: () => AppScreenEdge,
+	AppScreenLayer: () => AppScreenLayer,
+	AppScreenRoot: () => AppScreenRoot,
+	GlobalInteraction: () => GlobalInteraction,
+	useAppScreenContext: () => useAppScreenContext,
+	useGlobalInteractionContext: () => useGlobalInteractionContext
+});
+//#endregion
+export { AppBar_namespace_exports as AppBar, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppScreen_namespace_exports as AppScreen, AppScreenDim, AppScreenEdge, AppScreenLayer, AppScreenRoot, GlobalInteraction, primitive_exports, useAppScreenContext, useGlobalInteractionContext };

package/lib/primitive/private/useElementOffset.cjs

@@ -1,54 +1,32 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const useLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+"use client";
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+//#region src/primitive/private/useElementOffset.ts
+var useLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 function useElementOffset(element) {
-  const [offset, setOffset] = React__namespace.useState(
-    void 0
-  );
-  useLayoutEffect(() => {
-    if (!element) {
-      setOffset(void 0);
-      return;
-    }
-    if (element) {
-      setOffset({
-        fromLeft: element.offsetLeft + element.offsetWidth,
-        fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
-      });
-      const resizeObserver = new ResizeObserver(() => {
-        const fromLeft = element.offsetLeft + element.offsetWidth;
-        const fromRight = (element.offsetParent ?? document.body).clientWidth - element.offsetLeft;
-        setOffset({ fromLeft, fromRight });
-      });
-      resizeObserver.observe(element);
-      return () => resizeObserver.unobserve(element);
-    }
-  }, [element]);
-  return offset;
+	const [offset, setOffset] = react.useState(void 0);
+	useLayoutEffect(() => {
+		if (!element) {
+			setOffset(void 0);
+			return;
+		}
+		if (element) {
+			setOffset({
+				fromLeft: element.offsetLeft + element.offsetWidth,
+				fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
+			});
+			const resizeObserver = new ResizeObserver(() => {
+				setOffset({
+					fromLeft: element.offsetLeft + element.offsetWidth,
+					fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
+				});
+			});
+			resizeObserver.observe(element);
+			return () => resizeObserver.unobserve(element);
+		}
+	}, [element]);
+	return offset;
 }
-
+//#endregion
 exports.useElementOffset = useElementOffset;

package/lib/primitive/private/useElementOffset.js

@@ -1,31 +1,30 @@
-'use client';
-import * as React from 'react';
-
-const useLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+"use client";
+import * as React from "react";
+//#region src/primitive/private/useElementOffset.ts
+var useLayoutEffect$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function useElementOffset(element) {
-  const [offset, setOffset] = React.useState(
-    void 0
-  );
-  useLayoutEffect(() => {
-    if (!element) {
-      setOffset(void 0);
-      return;
-    }
-    if (element) {
-      setOffset({
-        fromLeft: element.offsetLeft + element.offsetWidth,
-        fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
-      });
-      const resizeObserver = new ResizeObserver(() => {
-        const fromLeft = element.offsetLeft + element.offsetWidth;
-        const fromRight = (element.offsetParent ?? document.body).clientWidth - element.offsetLeft;
-        setOffset({ fromLeft, fromRight });
-      });
-      resizeObserver.observe(element);
-      return () => resizeObserver.unobserve(element);
-    }
-  }, [element]);
-  return offset;
+	const [offset, setOffset] = React.useState(void 0);
+	useLayoutEffect$1(() => {
+		if (!element) {
+			setOffset(void 0);
+			return;
+		}
+		if (element) {
+			setOffset({
+				fromLeft: element.offsetLeft + element.offsetWidth,
+				fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
+			});
+			const resizeObserver = new ResizeObserver(() => {
+				setOffset({
+					fromLeft: element.offsetLeft + element.offsetWidth,
+					fromRight: (element.offsetParent ?? document.body).clientWidth - element.offsetLeft
+				});
+			});
+			resizeObserver.observe(element);
+			return () => resizeObserver.unobserve(element);
+		}
+	}, [element]);
+	return offset;
 }
-
+//#endregion
 export { useElementOffset };

package/lib/primitive/private/useTopActivity.cjs

@@ -1,34 +1,25 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const react = require('@stackflow/react');
-const React = require('react');
-
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+let _stackflow_react = require("@stackflow/react");
+//#region src/primitive/private/useTopActivity.ts
 function useTopActivity() {
-  const stack = react.useStack();
-  if (!stack) {
-    throw new Error(
-      "useStack is not available in the context. Make sure you are using @stackflow/react >= 1.4.1. (https://github.com/daangn/stackflow/blob/main/integrations/react/CHANGELOG.md#141)"
-    );
-  }
-  const topId = stack.activities.find((activity) => activity.isTop)?.id;
-  const topActivity = stack.activities.find((activity) => activity.isTop);
-  const transitionState = topActivity?.transitionState ?? "enter-done";
-  const [topEl, setTopEl] = React.useState(null);
-  const activityType = topEl?.dataset["activityType"];
-  const transitionStyle = topEl?.dataset["transitionStyle"];
-  React.useLayoutEffect(() => {
-    if (!topId) return;
-    const el = document.querySelector(`[data-activity-id="${topId}"]`);
-    setTopEl(el);
-  }, [topId]);
-  return {
-    transitionState,
-    activityType,
-    transitionStyle
-  };
+	const stack = (0, _stackflow_react.useStack)();
+	if (!stack) throw new Error("useStack is not available in the context. Make sure you are using @stackflow/react >= 1.4.1. (https://github.com/daangn/stackflow/blob/main/integrations/react/CHANGELOG.md#141)");
+	const topId = stack.activities.find((activity) => activity.isTop)?.id;
+	const transitionState = stack.activities.find((activity) => activity.isTop)?.transitionState ?? "enter-done";
+	const [topEl, setTopEl] = (0, react.useState)(null);
+	const activityType = topEl?.dataset["activityType"];
+	const transitionStyle = topEl?.dataset["transitionStyle"];
+	(0, react.useLayoutEffect)(() => {
+		if (!topId) return;
+		setTopEl(document.querySelector(`[data-activity-id="${topId}"]`));
+	}, [topId]);
+	return {
+		transitionState,
+		activityType,
+		transitionStyle
+	};
 }
-
+//#endregion
 exports.useTopActivity = useTopActivity;

package/lib/primitive/private/useTopActivity.js

@@ -1,30 +1,24 @@
-'use client';
-import { useStack } from '@stackflow/react';
-import { useState, useLayoutEffect } from 'react';
-
+"use client";
+import { useLayoutEffect, useState } from "react";
+import { useStack } from "@stackflow/react";
+//#region src/primitive/private/useTopActivity.ts
 function useTopActivity() {
-  const stack = useStack();
-  if (!stack) {
-    throw new Error(
-      "useStack is not available in the context. Make sure you are using @stackflow/react >= 1.4.1. (https://github.com/daangn/stackflow/blob/main/integrations/react/CHANGELOG.md#141)"
-    );
-  }
-  const topId = stack.activities.find((activity) => activity.isTop)?.id;
-  const topActivity = stack.activities.find((activity) => activity.isTop);
-  const transitionState = topActivity?.transitionState ?? "enter-done";
-  const [topEl, setTopEl] = useState(null);
-  const activityType = topEl?.dataset["activityType"];
-  const transitionStyle = topEl?.dataset["transitionStyle"];
-  useLayoutEffect(() => {
-    if (!topId) return;
-    const el = document.querySelector(`[data-activity-id="${topId}"]`);
-    setTopEl(el);
-  }, [topId]);
-  return {
-    transitionState,
-    activityType,
-    transitionStyle
-  };
+	const stack = useStack();
+	if (!stack) throw new Error("useStack is not available in the context. Make sure you are using @stackflow/react >= 1.4.1. (https://github.com/daangn/stackflow/blob/main/integrations/react/CHANGELOG.md#141)");
+	const topId = stack.activities.find((activity) => activity.isTop)?.id;
+	const transitionState = stack.activities.find((activity) => activity.isTop)?.transitionState ?? "enter-done";
+	const [topEl, setTopEl] = useState(null);
+	const activityType = topEl?.dataset["activityType"];
+	const transitionStyle = topEl?.dataset["transitionStyle"];
+	useLayoutEffect(() => {
+		if (!topId) return;
+		setTopEl(document.querySelector(`[data-activity-id="${topId}"]`));
+	}, [topId]);
+	return {
+		transitionState,
+		activityType,
+		transitionStyle
+	};
 }
-
+//#endregion
 export { useTopActivity };