@sigmela/router 0.2.5 → 0.2.6

package/lib/module/Router.js

@@ -20,6 +20,7 @@ export class Router {
   };
   debugEnabled = false;
   sheetDismissers = new Map();
+  dismissedStackIds = new Set();
   stackListeners = new Map();
   stackById = new Map();
   routeById = new Map();
@@ -60,6 +61,17 @@ export class Router {
   isDebugEnabled() {
     return this.debugEnabled;
   }
+  isStackBeingDismissed(stackId) {
+    if (!stackId) return false;
+    return this.dismissedStackIds.has(stackId);
+  }
+  clearStackDismissed(stackId) {
+    if (!stackId) return;
+    this.dismissedStackIds.delete(stackId);
+  }
+  markStackDismissed(stackId) {
+    this.dismissedStackIds.add(stackId);
+  }
   log(message, data) {
     if (this.debugEnabled) {
       if (data !== undefined) {
@@ -187,6 +199,7 @@ export class Router {
         childStackId,
         modalKey: modalItem.key
       });
+      this.markStackDismissed(childStackId);
       const newHistory = this.state.history.filter(item => item.stackId !== childStackId && item.key !== modalItem.key);
       this.setState({
         history: newHistory

package/lib/module/ScreenStack/ScreenStack.web.js

@@ -5,6 +5,7 @@ import { useTransitionMap } from 'react-transition-state';
 import { ScreenStackItemsContext, ScreenStackAnimatingContext, useScreenStackConfig } from "./ScreenStackContext.js";
 import { getPresentationTypeClass, computeAnimationType } from "./animationHelpers.js";
 import { RouterContext } from "../RouterContext.js";
+import { isModalLikePresentation } from "../types.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const isScreenStackItemElement = child => {
   if (! /*#__PURE__*/isValidElement(child)) return false;
@@ -71,6 +72,8 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
   const suppressedEnterKeyRef = useRef(null);
   const isBulkRemovalRef = useRef(false);
   const prevKeysRef = useRef([]);
+  const lastStackIdRef = useRef(null);
+  const dismissInProgressRef = useRef(false);
   const lastDirectionRef = useRef('forward');
   const childMapRef = useRef(new Map());
   const stackChildren = useMemo(() => {
@@ -89,6 +92,20 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     });
     return stackItems;
   }, [children, devLog]);
+  const currentStackId = useMemo(() => {
+    let found;
+    for (const child of stackChildren) {
+      const childStackId = child.props.stackId ?? child.props.item?.stackId ?? undefined;
+      if (childStackId) {
+        found = childStackId;
+        break;
+      }
+    }
+    if (found) {
+      lastStackIdRef.current = found;
+    }
+    return found ?? lastStackIdRef.current;
+  }, [stackChildren]);
   const routeKeys = useMemo(() => {
     const keys = stackChildren.map(child => {
       const item = child.props.item;
@@ -147,7 +164,6 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
   const prevKeysForDirection = prevKeysRef.current;
   const direction = useMemo(() => {
     const computed = computeDirection(prevKeysForDirection, routeKeys);
-    prevKeysRef.current = routeKeys;
     return computed;
   }, [routeKeys, prevKeysForDirection]);
   devLog('[ScreenStack] Computed direction', {
@@ -180,15 +196,9 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
 
   // CRITICAL: Calculate bulk removal BEFORE useMemo for itemsContextValue
   // so the flag is available when computing animation types
-  const removedKeysForBulkDetection = useMemo(() => {
-    const routeKeySet = new Set(routeKeys);
-    const existingKeySet = new Set();
-    for (const [key] of stateMapEntries) {
-      existingKeySet.add(key);
-    }
-    return [...existingKeySet].filter(key => !routeKeySet.has(key));
-  }, [routeKeys, stateMapEntries]);
-  const isBulkRemoval = removedKeysForBulkDetection.length > 1 || routeKeys.length === 0 && prevKeysForDirection.length > 1;
+  // Use prevKeysForDirection (captured before direction useMemo) to detect removals
+  const removedCount = prevKeysForDirection.filter(key => !routeKeys.includes(key)).length;
+  const isBulkRemoval = removedCount > 1 || routeKeys.length === 0 && prevKeysForDirection.length > 1;
   isBulkRemovalRef.current = isBulkRemoval;
   useLayoutEffect(() => {
     devLog('[ScreenStack] === LIFECYCLE EFFECT START ===', {
@@ -255,7 +265,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     }
     lastDirectionRef.current = direction;
     devLog('[ScreenStack] === LIFECYCLE EFFECT END ===');
-  }, [routeKeys, direction, setItem, toggle, stateMapEntries, stateMap, animateFirstScreenAfterEmpty, devLog]);
+  }, [routeKeys, direction, prevKeysForDirection.length, setItem, toggle, stateMapEntries, stateMap, animateFirstScreenAfterEmpty, devLog]);
   useLayoutEffect(() => {
     devLog('[ScreenStack] === CLEANUP EFFECT START ===');
     const routeKeySet = new Set(routeKeys);
@@ -282,6 +292,12 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     }
     devLog('[ScreenStack] === CLEANUP EFFECT END ===');
   }, [routeKeys, stateMapEntries, deleteItem, devLog]);
+
+  // Update the previous keys after all layout effects so direction calculations
+  // always compare against the last committed stack.
+  useLayoutEffect(() => {
+    prevKeysRef.current = routeKeys;
+  }, [routeKeys]);
   useEffect(() => {
     if (!isInitialMountRef.current) return;
     const hasMountedItem = stateMapEntries.some(([, st]) => st.isMounted);
@@ -327,6 +343,32 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
   });
   const topKey = routeKeys[routeKeys.length - 1] ?? null;
   const routeKeySet = useMemo(() => new Set(routeKeys), [routeKeys]);
+  const hasExitingItems = useMemo(() => {
+    return stateMapEntries.some(([key, state]) => state.isMounted && !routeKeySet.has(key));
+  }, [stateMapEntries, routeKeySet]);
+  const hasExitingModalLike = useMemo(() => {
+    return stateMapEntries.some(([key, state]) => {
+      if (!state.isMounted || routeKeySet.has(key)) return false;
+      const item = childMap.get(key)?.props.item;
+      return isModalLikePresentation(item?.options?.stackPresentation);
+    });
+  }, [childMap, routeKeySet, stateMapEntries]);
+  const animationDirection = hasExitingItems ? lastDirectionRef.current : direction;
+  const stackDismissedByRouter = router?.isStackBeingDismissed?.(currentStackId ?? undefined) ?? false;
+  if (stackDismissedByRouter) {
+    dismissInProgressRef.current = true;
+  }
+  const isStackBeingDismissed = dismissInProgressRef.current;
+  devLog('[ScreenStack] Dismiss state', {
+    stackId: currentStackId,
+    isStackBeingDismissed
+  });
+  useLayoutEffect(() => {
+    if (!isStackBeingDismissed) return;
+    if (hasExitingItems) return;
+    dismissInProgressRef.current = false;
+    router?.clearStackDismissed?.(currentStackId ?? undefined);
+  }, [hasExitingItems, isStackBeingDismissed, currentStackId, router]);
   const itemsContextValue = useMemo(() => {
     const items = {};
     for (let index = 0; index < keysToRender.length; index++) {
@@ -354,7 +396,13 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       const routeIndex = routeKeys.indexOf(key);
       const zIndex = routeIndex >= 0 ? routeIndex + 1 : keysToRender.length + index + 1;
       const presentationType = getPresentationTypeClass(presentation);
-      let animationType = computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated, isBulkRemovalRef.current);
+      let animationType = computeAnimationType(key, isInStack, isTop, animationDirection, presentation, isInitialPhase, animated, isBulkRemovalRef.current);
+      if (hasExitingModalLike && isTop && isInStack) {
+        animationType = 'none';
+      }
+      if (isStackBeingDismissed && !isInStack) {
+        animationType = 'no-animate';
+      }
 
       // SplitView-secondary-only: suppress enter animation for the first screen after empty.
       if (!animateFirstScreenAfterEmpty && isTop && direction === 'forward' && suppressedEnterKeyRef.current === key) {
@@ -386,7 +434,13 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
         phase = 'inactive';
       }
       const presentationType = getPresentationTypeClass(presentation);
-      let animationType = isInitialPhase ? 'none' : computeAnimationType(key, isInStack, isTop, direction, presentation, isInitialPhase, animated, isBulkRemovalRef.current);
+      let animationType = isInitialPhase ? 'none' : computeAnimationType(key, isInStack, isTop, animationDirection, presentation, isInitialPhase, animated, isBulkRemovalRef.current);
+      if (hasExitingModalLike && isTop && isInStack) {
+        animationType = 'none';
+      }
+      if (isStackBeingDismissed && !isInStack) {
+        animationType = 'no-animate';
+      }
       if (!animateFirstScreenAfterEmpty && isTop && direction === 'forward' && suppressedEnterKeyRef.current === key) {
         animationType = 'none';
       }
@@ -401,7 +455,7 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     return {
       items
     };
-  }, [keysToRender, stateMap, childMap, routeKeySet, topKey, isInitialPhase, routeKeys, direction, animateFirstScreenAfterEmpty]);
+  }, [keysToRender, stateMap, childMap, routeKeySet, topKey, isInitialPhase, routeKeys, animationDirection, direction, animateFirstScreenAfterEmpty, isStackBeingDismissed, hasExitingModalLike]);
   const animating = useMemo(() => {
     return stateMapEntries.some(([, state]) => state.isMounted && (state.status === 'entering' || state.status === 'exiting' || state.status === 'preEnter' || state.status === 'preExit'));
   }, [stateMapEntries]);

package/lib/typescript/src/Router.d.ts

@@ -21,6 +21,7 @@ export declare class Router {
     private readonly routerScreenOptions;
     private readonly debugEnabled;
     private sheetDismissers;
+    private dismissedStackIds;
     private stackListeners;
     private stackById;
     private routeById;
@@ -35,6 +36,9 @@ export declare class Router {
     private navigationToken;
     constructor(config: RouterConfig);
     isDebugEnabled(): boolean;
+    isStackBeingDismissed(stackId?: string): boolean;
+    clearStackDismissed(stackId?: string): void;
+    private markStackDismissed;
     private log;
     navigate: (path: string) => void;
     replace: (path: string, dedupe?: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",