@seed-design/stackflow 1.1.20 → 1.1.21

package/lib/primitive/GlobalInteraction/useGlobalInteraction.js

@@ -1,132 +1,222 @@
-'use client';
-import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
-import { useState, useRef, useCallback, useMemo } from 'react';
-import { useTopActivity } from '../private/useTopActivity.js';
-
+"use client";
+import { useTopActivity } from "../private/useTopActivity.js";
+import { applySwipeStyles, clearAllStyles, findTransitionTargets, readTransitionStyle, setIdlePositions, setPostExitPositions } from "./dom.js";
+import { animateSwipeCancel, animateSwipeComplete, animateTransition, cancelAll, scrubAppBarBackground } from "./animation.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+//#region src/primitive/GlobalInteraction/useGlobalInteraction.ts
+var IDLE_CONTEXT = Object.freeze({
+	x0: 0,
+	t0: 0,
+	displacement: 0,
+	displacementRatio: 0,
+	velocity: 0
+});
+var DEFAULT_DISPLACEMENT_RATIO_THRESHOLD = .4;
+var DEFAULT_VELOCITY_THRESHOLD = 1;
 function useGlobalInteraction() {
-  const [swipeBackState, setSwipeBackState] = useState("idle");
-  const swipeBackContextRef = useRef({
-    x0: 0,
-    t0: 0,
-    displacement: 0,
-    displacementRatio: 0,
-    velocity: 0
-  });
-  const stackRef = useRef(null);
-  const setSwipeBackContext = useCallback((ctx) => {
-    swipeBackContextRef.current = ctx;
-    stackRef.current?.style.setProperty(
-      "--swipe-back-displacement",
-      `${ctx.displacement.toString()}px`
-    );
-    stackRef.current?.style.setProperty(
-      "--swipe-back-displacement-ratio",
-      ctx.displacementRatio.toString()
-    );
-  }, []);
-  const getSwipeBackEvents = useCallback(
-    (props) => {
-      const {
-        swipeBackDisplacementRatioThreshold: displacementRatioThreshold = 0.4,
-        swipeBackVelocityThreshold: velocityThreshold = 1
-      } = props;
-      const onSwipeStart = useCallbackRef(props.onSwipeBackStart);
-      const onSwipeMove = useCallbackRef(props.onSwipeBackMove);
-      const onSwipeEnd = useCallbackRef(props.onSwipeBackEnd);
-      const startSwipeBack = useCallback(
-        ({ x0, t0 }) => {
-          setSwipeBackContext({
-            x0,
-            t0,
-            displacement: 0,
-            displacementRatio: 0,
-            velocity: 0
-          });
-          setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
-          onSwipeStart?.();
-        },
-        [onSwipeStart]
-      );
-      const moveSwipeBack = useCallback(
-        ({ x, t }) => {
-          const displacement = Math.max(0, x - swipeBackContextRef.current.x0);
-          const displacementRatio = displacement / window.innerWidth;
-          const velocity = displacement / (t - swipeBackContextRef.current.t0);
-          setSwipeBackContext({
-            ...swipeBackContextRef.current,
-            displacement,
-            displacementRatio,
-            velocity
-          });
-          setSwipeBackState((prev) => prev === "swiping" ? prev : "swiping");
-          onSwipeMove?.({ displacement, displacementRatio });
-        },
-        [onSwipeMove]
-      );
-      const endSwipeBack = useCallback(
-        (_) => {
-          const swiped = swipeBackContextRef.current.displacementRatio > displacementRatioThreshold || swipeBackContextRef.current.velocity > velocityThreshold;
-          if (swiped) {
-            stackRef.current?.style.setProperty("--swipe-back-target", "100%");
-            setSwipeBackState("completing");
-          } else {
-            stackRef.current?.style.setProperty("--swipe-back-target", "0");
-            setSwipeBackState("canceling");
-          }
-          onSwipeEnd?.({ swiped });
-        },
-        [onSwipeEnd, displacementRatioThreshold, velocityThreshold]
-      );
-      const reset = useCallback(() => {
-        setSwipeBackContext({
-          x0: 0,
-          t0: 0,
-          displacement: 0,
-          displacementRatio: 0,
-          velocity: 0
-        });
-        stackRef.current?.style.setProperty("--swipe-back-target", "0");
-        setSwipeBackState("idle");
-      }, []);
-      return useMemo(
-        () => ({
-          startSwipeBack,
-          moveSwipeBack,
-          endSwipeBack,
-          reset
-        }),
-        [startSwipeBack, moveSwipeBack, endSwipeBack, reset]
-      );
-    },
-    [setSwipeBackContext]
-  );
-  const topActivity = useTopActivity();
-  const stackProps = useMemo(
-    () => ({
-      "data-swipe-back-state": swipeBackState,
-      "data-global-transition-state": topActivity.transitionState,
-      "data-top-activity-type": topActivity.activityType,
-      "data-top-transition-style": topActivity.transitionStyle
-    }),
-    [
-      swipeBackState,
-      topActivity.transitionState,
-      topActivity.activityType,
-      topActivity.transitionStyle
-    ]
-  );
-  return useMemo(
-    () => ({
-      stackRef,
-      swipeBackContextRef,
-      swipeBackState,
-      setSwipeBackState,
-      setSwipeBackContext,
-      getSwipeBackEvents,
-      stackProps
-    }),
-    [swipeBackState, setSwipeBackContext, getSwipeBackEvents, stackProps]
-  );
+	const swipeBackStateRef = useRef("idle");
+	const swipeBackContextRef = useRef({ ...IDLE_CONTEXT });
+	const stackRef = useRef(null);
+	const cachedTargetsRef = useRef(null);
+	const runningAnimsRef = useRef([]);
+	const appBarBgScrubAnimRef = useRef(null);
+	const swipeStyleRef = useRef(null);
+	const pendingPushRAFRef = useRef(null);
+	const skipNextExitRef = useRef(false);
+	/** Cancel any running WAAPI animations and clear the ref. */
+	const stopRunningAnims = useCallback(() => {
+		cancelAll(runningAnimsRef.current);
+		runningAnimsRef.current = [];
+	}, []);
+	/** Cancel the in-place scrub animation on the AppBar background. */
+	const stopAppBarBgScrub = useCallback(() => {
+		appBarBgScrubAnimRef.current?.cancel();
+		appBarBgScrubAnimRef.current = null;
+	}, []);
+	/** Cancel a pending deferred push animation, if any. */
+	const cancelPendingPushRAF = useCallback(() => {
+		if (pendingPushRAFRef.current !== null) {
+			cancelAnimationFrame(pendingPushRAFRef.current);
+			pendingPushRAFRef.current = null;
+		}
+	}, []);
+	/** Update swipe-back-state attribute on the stack DOM element. */
+	const setSwipeBackState = useCallback((state) => {
+		swipeBackStateRef.current = state;
+		if (stackRef.current) stackRef.current.dataset["swipeBackState"] = state;
+	}, []);
+	const startSwipeBack = useCallback(({ x0, t0 }) => {
+		cancelPendingPushRAF();
+		stopRunningAnims();
+		stopAppBarBgScrub();
+		swipeBackContextRef.current = {
+			...IDLE_CONTEXT,
+			x0,
+			t0
+		};
+		if (stackRef.current) {
+			cachedTargetsRef.current = findTransitionTargets(stackRef.current);
+			swipeStyleRef.current = readTransitionStyle(stackRef.current);
+		}
+		setSwipeBackState("swiping");
+	}, [
+		cancelPendingPushRAF,
+		stopRunningAnims,
+		stopAppBarBgScrub,
+		setSwipeBackState
+	]);
+	const moveSwipeBack = useCallback(({ x, t }) => {
+		const ctx = swipeBackContextRef.current;
+		const displacement = Math.max(0, x - ctx.x0);
+		const displacementRatio = displacement / window.innerWidth;
+		const velocity = displacement / (t - ctx.t0);
+		ctx.displacement = displacement;
+		ctx.displacementRatio = displacementRatio;
+		ctx.velocity = velocity;
+		const targets = cachedTargetsRef.current;
+		if (targets && swipeStyleRef.current === "slideFromRightIOS") {
+			applySwipeStyles(targets, displacement, displacementRatio);
+			appBarBgScrubAnimRef.current = scrubAppBarBackground(targets.topAppBarBackground, `translate3d(${displacement}px, 0, 0)`, appBarBgScrubAnimRef.current);
+		}
+		return ctx;
+	}, []);
+	const endSwipeBack = useCallback((thresholds = {}) => {
+		const { displacementRatioThreshold = DEFAULT_DISPLACEMENT_RATIO_THRESHOLD, velocityThreshold = DEFAULT_VELOCITY_THRESHOLD } = thresholds;
+		const ctx = swipeBackContextRef.current;
+		const swiped = ctx.displacementRatio > displacementRatioThreshold || ctx.velocity > velocityThreshold;
+		const targets = cachedTargetsRef.current;
+		if (!targets) {
+			setSwipeBackState("idle");
+			return swiped;
+		}
+		if (swipeStyleRef.current !== "slideFromRightIOS") {
+			cachedTargetsRef.current = null;
+			swipeStyleRef.current = null;
+			setSwipeBackState("idle");
+			return swiped;
+		}
+		stopAppBarBgScrub();
+		const onFinish = (animations, pin) => {
+			pin();
+			cancelAll(animations);
+			if (runningAnimsRef.current === animations) {
+				runningAnimsRef.current = [];
+				cachedTargetsRef.current = null;
+				swipeStyleRef.current = null;
+				setSwipeBackState("idle");
+			}
+		};
+		if (swiped) {
+			setSwipeBackState("completing");
+			skipNextExitRef.current = true;
+			const { animations, finished } = animateSwipeComplete(targets, ctx.displacement);
+			runningAnimsRef.current = animations;
+			finished.then(() => onFinish(animations, () => setPostExitPositions(targets)));
+		} else {
+			setSwipeBackState("canceling");
+			const { animations, finished } = animateSwipeCancel(targets, ctx.displacement);
+			runningAnimsRef.current = animations;
+			finished.then(() => onFinish(animations, () => setIdlePositions(targets)));
+		}
+		return swiped;
+	}, [setSwipeBackState, stopAppBarBgScrub]);
+	const resetSwipeBack = useCallback(() => {
+		stopRunningAnims();
+		stopAppBarBgScrub();
+		if (cachedTargetsRef.current) clearAllStyles(cachedTargetsRef.current);
+		cachedTargetsRef.current = null;
+		swipeStyleRef.current = null;
+		swipeBackContextRef.current = { ...IDLE_CONTEXT };
+		setSwipeBackState("idle");
+	}, [
+		stopRunningAnims,
+		stopAppBarBgScrub,
+		setSwipeBackState
+	]);
+	const topActivity = useTopActivity();
+	const prevTransitionStateRef = useRef(topActivity.transitionState);
+	useLayoutEffect(() => {
+		const prev = prevTransitionStateRef.current;
+		const next = topActivity.transitionState;
+		prevTransitionStateRef.current = next;
+		const stackEl = stackRef.current;
+		if (!stackEl) return;
+		const swipeState = swipeBackStateRef.current;
+		if (next === "enter-active" && prev !== "enter-active") {
+			if (swipeState !== "idle") return;
+			stopRunningAnims();
+			cancelPendingPushRAF();
+			pendingPushRAFRef.current = requestAnimationFrame(() => {
+				pendingPushRAFRef.current = null;
+				const style = readTransitionStyle(stackEl);
+				const targets = findTransitionTargets(stackEl);
+				const { animations, finished } = animateTransition(targets, "push", style);
+				runningAnimsRef.current = animations;
+				finished.then(() => {
+					setIdlePositions(targets, style);
+					cancelAll(animations);
+					if (runningAnimsRef.current === animations) runningAnimsRef.current = [];
+				});
+			});
+		}
+		if (next === "exit-active" && prev !== "exit-active") {
+			if (skipNextExitRef.current) {
+				skipNextExitRef.current = false;
+				return;
+			}
+			if (swipeState !== "idle") return;
+			cancelPendingPushRAF();
+			stopRunningAnims();
+			const style = readTransitionStyle(stackEl);
+			const targets = findTransitionTargets(stackEl);
+			const { animations, finished } = animateTransition(targets, "pop", style);
+			runningAnimsRef.current = animations;
+			finished.then(() => {
+				setPostExitPositions(targets, style);
+				cancelAll(animations);
+				if (runningAnimsRef.current === animations) runningAnimsRef.current = [];
+			});
+		}
+	}, [
+		topActivity.transitionState,
+		stopRunningAnims,
+		cancelPendingPushRAF
+	]);
+	useEffect(() => {
+		return () => {
+			cancelPendingPushRAF();
+			stopRunningAnims();
+			stopAppBarBgScrub();
+		};
+	}, [
+		cancelPendingPushRAF,
+		stopRunningAnims,
+		stopAppBarBgScrub
+	]);
+	const stackProps = useMemo(() => ({
+		"data-swipe-back-state": swipeBackStateRef.current,
+		"data-global-transition-state": topActivity.transitionState,
+		"data-top-activity-type": topActivity.activityType,
+		"data-top-transition-style": topActivity.transitionStyle
+	}), [
+		topActivity.transitionState,
+		topActivity.activityType,
+		topActivity.transitionStyle
+	]);
+	return useMemo(() => ({
+		stackRef,
+		startSwipeBack,
+		moveSwipeBack,
+		endSwipeBack,
+		resetSwipeBack,
+		stackProps
+	}), [
+		startSwipeBack,
+		moveSwipeBack,
+		endSwipeBack,
+		resetSwipeBack,
+		stackProps
+	]);
 }
-
+//#endregion
 export { useGlobalInteraction };

package/lib/primitive/GlobalInteraction/useGlobalInteractionContext.cjs

@@ -1,21 +1,14 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-const GlobalInteractionContext = React.createContext(null);
-const GlobalInteractionProvider = GlobalInteractionContext.Provider;
-function useGlobalInteractionContext({
-  strict = true
-} = {}) {
-  const context = React.useContext(GlobalInteractionContext);
-  if (!context && strict) {
-    throw new Error("useGlobalInteractionContext must be used within a GlobalInteractionProvider");
-  }
-  return context;
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+//#region src/primitive/GlobalInteraction/useGlobalInteractionContext.tsx
+var GlobalInteractionContext = (0, react.createContext)(null);
+var GlobalInteractionProvider = GlobalInteractionContext.Provider;
+function useGlobalInteractionContext({ strict = true } = {}) {
+	const context = (0, react.useContext)(GlobalInteractionContext);
+	if (!context && strict) throw new Error("useGlobalInteractionContext must be used within a GlobalInteractionProvider");
+	return context;
 }
-
+//#endregion
 exports.GlobalInteractionProvider = GlobalInteractionProvider;
 exports.useGlobalInteractionContext = useGlobalInteractionContext;

package/lib/primitive/GlobalInteraction/useGlobalInteractionContext.js

@@ -1,16 +1,12 @@
-'use client';
-import { createContext, useContext } from 'react';
-
-const GlobalInteractionContext = createContext(null);
-const GlobalInteractionProvider = GlobalInteractionContext.Provider;
-function useGlobalInteractionContext({
-  strict = true
-} = {}) {
-  const context = useContext(GlobalInteractionContext);
-  if (!context && strict) {
-    throw new Error("useGlobalInteractionContext must be used within a GlobalInteractionProvider");
-  }
-  return context;
+"use client";
+import { createContext, useContext } from "react";
+//#region src/primitive/GlobalInteraction/useGlobalInteractionContext.tsx
+var GlobalInteractionContext = createContext(null);
+var GlobalInteractionProvider = GlobalInteractionContext.Provider;
+function useGlobalInteractionContext({ strict = true } = {}) {
+	const context = useContext(GlobalInteractionContext);
+	if (!context && strict) throw new Error("useGlobalInteractionContext must be used within a GlobalInteractionProvider");
+	return context;
 }
-
+//#endregion
 export { GlobalInteractionProvider, useGlobalInteractionContext };

package/lib/primitive/GlobalInteraction/useSwipeBack.cjs

@@ -1,58 +1,74 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-const useGlobalInteractionContext = require('./useGlobalInteractionContext.cjs');
-
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_useGlobalInteractionContext = require("./useGlobalInteractionContext.cjs");
+let react = require("react");
+let _radix_ui_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
+//#region src/primitive/GlobalInteraction/useSwipeBack.ts
 function useSwipeBack(props) {
-  const globalInteraction = useGlobalInteractionContext.useGlobalInteractionContext();
-  const events = globalInteraction.getSwipeBackEvents(props);
-  React.useEffect(() => {
-    return () => {
-      events.reset();
-    };
-  }, [events]);
-  return React.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 = (0, _radix_ui_react_use_callback_ref.useCallbackRef)(props.onSwipeBackStart);
+	const onSwipeMove = (0, _radix_ui_react_use_callback_ref.useCallbackRef)(props.onSwipeBackMove);
+	const onSwipeEnd = (0, _radix_ui_react_use_callback_ref.useCallbackRef)(props.onSwipeBackEnd);
+	const { startSwipeBack, moveSwipeBack, endSwipeBack, resetSwipeBack } = require_useGlobalInteractionContext.useGlobalInteractionContext();
+	const rAFLockRef = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		return () => {
+			resetSwipeBack();
+		};
+	}, [resetSwipeBack]);
+	return (0, react.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
 exports.useSwipeBack = useSwipeBack;

package/lib/primitive/GlobalInteraction/useSwipeBack.d.ts

@@ -1,5 +1,22 @@
-import { SwipeBackProps } from './useGlobalInteraction';
-export interface UseSwipeBackProps extends SwipeBackProps {
+export interface UseSwipeBackProps {
+    /**
+     * The threshold to determine whether the swipe back is intentional, by displacement ratio.
+     * @default 0.4
+     */
+    swipeBackDisplacementRatioThreshold?: number;
+    /**
+     * The threshold to determine whether the swipe back is intentional, by velocity.
+     * @default 1
+     */
+    swipeBackVelocityThreshold?: number;
+    onSwipeBackStart?: () => void;
+    onSwipeBackMove?: (props: {
+        displacement: number;
+        displacementRatio: number;
+    }) => void;
+    onSwipeBackEnd?: (props: {
+        swiped: boolean;
+    }) => void;
 }
 export declare function useSwipeBack(props: UseSwipeBackProps): {
     activityProps: React.HTMLAttributes<HTMLDivElement>;