@sigmela/router 0.2.5 → 0.2.7

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]);
@@ -412,6 +466,9 @@ export const ScreenStack = /*#__PURE__*/memo(props => {
       children: /*#__PURE__*/_jsx("div", {
         ref: containerRef,
         className: containerClassName + (animating ? ' animating' : ''),
+        style: {
+          '--stack-transition-time': `${transitionTime}ms`
+        },
         children: keysToRender.map(key => {
           const transitionState = stateMap.get(key);
           if (!transitionState || !transitionState.isMounted) {

package/lib/module/styles.css

@@ -17,8 +17,10 @@
 
   /* Base transition for opening screen */
   transition:
-    transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
-    filter 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
+    transform var(--stack-transition-time, 300ms)
+      cubic-bezier(0.22, 0.61, 0.36, 1),
+    filter var(--stack-transition-time, 300ms)
+      cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 /* Inner container for regular screen */
@@ -43,6 +45,8 @@
   pointer-events: none;
   z-index: 1;
   will-change: opacity;
+  transition: opacity var(--stack-transition-time, 300ms)
+    cubic-bezier(0.22, 0.61, 0.36, 1);
 }
 
 /* Show overlay only for modal-like presentations.
@@ -53,26 +57,6 @@
   display: none;
 }
 
-/* Keyframes for overlay appearance */
-@keyframes modal-overlay-enter {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 0.5;
-  }
-}
-
-/* Keyframes for overlay disappearance */
-@keyframes modal-overlay-exit {
-  from {
-    opacity: 0.5;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
 /* Overlay in initial state — transparent */
 .screen-stack-item.modal.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.modal-right.transition-preEnter > .stack-modal-overlay,
@@ -86,7 +70,7 @@
   pointer-events: none;
 }
 
-/* Overlay on enter — start animation */
+/* Overlay on enter — fade in via transition */
 .screen-stack-item.modal.transition-entering > .stack-modal-overlay,
 .screen-stack-item.modal.phase-active.transition-preEnter > .stack-modal-overlay,
 .screen-stack-item.modal-right.transition-entering > .stack-modal-overlay,
@@ -103,7 +87,7 @@
 .screen-stack-item.sheet.phase-active.transition-preEnter > .stack-modal-overlay {
   background: rgba(0, 0, 0, 0.5);
   pointer-events: none;
-  animation: modal-overlay-enter 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+  opacity: 0.5;
 }
 
 /* For modal-like in active / entered states — fully visible */
@@ -126,7 +110,7 @@
   pointer-events: auto;
 }
 
-/* Overlay on modal-like close — disappearance animation */
+/* Overlay on modal-like close — fade out via transition */
 .screen-stack-item.modal.phase-exiting > .stack-modal-overlay,
 .screen-stack-item.modal.transition-exiting > .stack-modal-overlay,
 .screen-stack-item.modal-right.phase-exiting > .stack-modal-overlay,
@@ -143,7 +127,7 @@
 .screen-stack-item.sheet.transition-exiting > .stack-modal-overlay {
   background: rgba(0, 0, 0, 0.5);
   pointer-events: none;
-  animation: modal-overlay-exit 300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+  opacity: 0;
 }
 
 /* Overlay for transparent-modal — transparent */

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