@sigmela/router 0.2.4 → 0.2.6

package/lib/module/NavigationStack.js

@@ -4,6 +4,7 @@ import { nanoid } from 'nanoid/non-secure';
 import { match as pathMatchFactory } from 'path-to-regexp';
 import qs from 'query-string';
 import React from 'react';
+import { StackRenderer } from "./StackRenderer.js";
 export class NavigationStack {
   routes = [];
   children = [];
@@ -133,13 +134,10 @@ export class NavigationStack {
   getRenderer() {
     // eslint-disable-next-line consistent-this
     const stackInstance = this;
+    const stackId = stackInstance.getId();
     return function NavigationStackRenderer(props) {
-      // Lazy require to avoid circular dependency (StackRenderer imports NavigationStack)
-      const {
-        StackRenderer
-      } = require('./StackRenderer');
       return /*#__PURE__*/React.createElement(StackRenderer, {
-        stack: stackInstance,
+        stackId: stackId,
         appearance: props.appearance
       });
     };

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;
@@ -69,7 +70,10 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
   const isInitialMountRef = useRef(true);
   const suppressEnterAfterEmptyRef = useRef(false);
   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(() => {
@@ -88,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;
@@ -143,12 +161,11 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
     isResolved: state.isResolved
   })));
   const stateMapEntries = Array.from(stateMap.entries());
+  const prevKeysForDirection = prevKeysRef.current;
   const direction = useMemo(() => {
-    const prevKeys = prevKeysRef.current;
-    const computed = computeDirection(prevKeys, routeKeys);
-    prevKeysRef.current = routeKeys;
+    const computed = computeDirection(prevKeysForDirection, routeKeys);
     return computed;
-  }, [routeKeys]);
+  }, [routeKeys, prevKeysForDirection]);
   devLog('[ScreenStack] Computed direction', {
     prevKeys: prevKeysRef.current,
     routeKeys,
@@ -176,6 +193,13 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
   const containerClassName = useMemo(() => {
     return 'screen-stack';
   }, []);
+
+  // CRITICAL: Calculate bulk removal BEFORE useMemo for itemsContextValue
+  // so the flag is available when computing animation types
+  // 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 ===', {
       prevKeys: prevKeysRef.current,
@@ -203,6 +227,14 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       removedKeys
     });
 
+    // Bulk removal was already computed before useMemo (see above)
+    devLog('[ScreenStack] Bulk removal detected', {
+      isBulkRemoval: isBulkRemovalRef.current,
+      removedCount: removedKeys.length,
+      prevLength: prevKeysForDirection.length,
+      currentLength: routeKeys.length
+    });
+
     // If this is the first pushed key after the stack was empty, remember its key so we can
     // suppress only its enter animation (without affecting exit animations).
     if (!animateFirstScreenAfterEmpty && suppressEnterAfterEmptyRef.current && routeKeys.length > 0 && newKeys.length > 0) {
@@ -233,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);
@@ -260,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);
@@ -305,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++) {
@@ -332,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);
+      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) {
@@ -364,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);
+      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';
       }
@@ -379,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/module/ScreenStack/animationHelpers.js

@@ -35,13 +35,18 @@ export function getAnimationTypeForPresentation(presentation, isEntering, direct
   }
   return `${presentationClass}-${suffix}`;
 }
-export function computeAnimationType(_key, isInStack, isTop, direction, presentation, isInitialPhase, animated = true) {
+export function computeAnimationType(_key, isInStack, isTop, direction, presentation, isInitialPhase, animated = true, isBulkRemoval = false) {
   if (!animated) {
     return 'no-animate';
   }
   if (isInitialPhase) {
     return 'none';
   }
+
+  // When multiple screens are removed at once (bulk removal), don't animate them
+  if (isBulkRemoval && !isInStack) {
+    return 'no-animate';
+  }
   const isEntering = isInStack && isTop;
   const isModalLike = isModalLikePresentation(presentation);
   if (isModalLike) {

package/lib/module/SplitView/RenderSplitView.web.js

@@ -38,7 +38,7 @@ const StackSliceRenderer = /*#__PURE__*/memo(({
   }
   return /*#__PURE__*/_jsx(StackRenderer, {
     appearance: appearance,
-    stack: stack,
+    stackId: stackId,
     history: historyToRender
   });
 });

package/lib/module/StackRenderer.js

@@ -7,12 +7,11 @@ import { useRouter } from "./RouterContext.js";
 import { StyleSheet } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const StackRenderer = /*#__PURE__*/memo(({
-  stack,
+  stackId,
   appearance,
   history
 }) => {
   const router = useRouter();
-  const stackId = stack.getId();
   const subscribe = useCallback(cb => router.subscribeStack(stackId, cb), [router, stackId]);
   const get = useCallback(() => router.getStackHistory(stackId), [router, stackId]);
   const historyFromStore = useSyncExternalStore(subscribe, get, get);

package/lib/module/TabBar/RenderTabBar.native.js

@@ -141,7 +141,7 @@ const TabStackRenderer = /*#__PURE__*/memo(({
   const history = useSyncExternalStore(subscribe, get, get);
   return /*#__PURE__*/_jsx(StackRenderer, {
     appearance: appearance,
-    stack: stack,
+    stackId: stackId,
     history: history
   });
 });

package/lib/module/TabBar/RenderTabBar.web.js

@@ -29,7 +29,7 @@ const TabStackRenderer = /*#__PURE__*/memo(({
   const history = useSyncExternalStore(subscribe, get, get);
   return /*#__PURE__*/_jsx(StackRenderer, {
     appearance: appearance,
-    stack: stack,
+    stackId: stackId,
     history: history
   });
 });

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/lib/typescript/src/ScreenStack/animationHelpers.d.ts

@@ -2,5 +2,5 @@ import type { StackPresentationTypes } from '../types';
 import type { PresentationTypeClass, AnimationType } from './ScreenStackContext';
 export declare function getPresentationTypeClass(presentation: StackPresentationTypes): PresentationTypeClass;
 export declare function getAnimationTypeForPresentation(presentation: StackPresentationTypes, isEntering: boolean, direction: 'forward' | 'back'): string;
-export declare function computeAnimationType(_key: string, isInStack: boolean, isTop: boolean, direction: 'forward' | 'back', presentation: StackPresentationTypes, isInitialPhase: boolean, animated?: boolean): AnimationType;
+export declare function computeAnimationType(_key: string, isInStack: boolean, isTop: boolean, direction: 'forward' | 'back', presentation: StackPresentationTypes, isInitialPhase: boolean, animated?: boolean, isBulkRemoval?: boolean): AnimationType;
 //# sourceMappingURL=animationHelpers.d.ts.map

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

@@ -1,7 +1,6 @@
 import type { HistoryItem, NavigationAppearance } from './types';
-import { NavigationStack } from './NavigationStack';
 export interface StackRendererProps {
-    stack: NavigationStack;
+    stackId: string;
     appearance?: NavigationAppearance;
     history?: HistoryItem[];
 }

package/package.json

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