@sigmela/router 0.2.4 → 0.2.5

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/ScreenStack/ScreenStack.web.js

@@ -69,6 +69,7 @@ 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 lastDirectionRef = useRef('forward');
   const childMapRef = useRef(new Map());
@@ -143,12 +144,12 @@ 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);
+    const computed = computeDirection(prevKeysForDirection, routeKeys);
     prevKeysRef.current = routeKeys;
     return computed;
-  }, [routeKeys]);
+  }, [routeKeys, prevKeysForDirection]);
   devLog('[ScreenStack] Computed direction', {
     prevKeys: prevKeysRef.current,
     routeKeys,
@@ -176,6 +177,19 @@ 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
+  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;
+  isBulkRemovalRef.current = isBulkRemoval;
   useLayoutEffect(() => {
     devLog('[ScreenStack] === LIFECYCLE EFFECT START ===', {
       prevKeys: prevKeysRef.current,
@@ -203,6 +217,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) {
@@ -332,7 +354,7 @@ 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, direction, presentation, isInitialPhase, animated, isBulkRemovalRef.current);
 
       // SplitView-secondary-only: suppress enter animation for the first screen after empty.
       if (!animateFirstScreenAfterEmpty && isTop && direction === 'forward' && suppressedEnterKeyRef.current === key) {
@@ -364,7 +386,7 @@ 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, direction, presentation, isInitialPhase, animated, isBulkRemovalRef.current);
       if (!animateFirstScreenAfterEmpty && isTop && direction === 'forward' && suppressedEnterKeyRef.current === key) {
         animationType = 'none';
       }

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/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.5",
   "description": "React Native Router",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",