@wallarm-org/design-system 1.23.2 → 1.23.3-rc-fix-remote-shell-breadcrumb-transition.1

package/dist/components/RemoteShell/NavPanelContent.d.ts

@@ -1,6 +1,12 @@
 import type { FC } from 'react';
+import type { NavStackEntry } from './model';
+interface NavigationSnapshot {
+    navStack: NavStackEntry[];
+    activeItemId: string | null;
+}
 interface NavPanelContentProps {
     level: number;
+    navigationSnapshot?: NavigationSnapshot;
 }
 export declare const NavPanelContent: FC<NavPanelContentProps>;
 export {};

package/dist/components/RemoteShell/NavPanelContent.js

@@ -4,8 +4,10 @@ import { Text } from "../Text/index.js";
 import { HeaderActions } from "./HeaderActions.js";
 import { findDrillNode, useRemoteShellContext } from "./model/index.js";
 import { NavItemsList } from "./NavItemsList.js";
-const NavPanelContent = ({ level: rawLevel })=>{
-    const { config, navStack, effectiveActiveItemId, navigate, drillInto, goBack } = useRemoteShellContext();
+const NavPanelContent = ({ level: rawLevel, navigationSnapshot })=>{
+    const { config, navStack: currentNavStack, effectiveActiveItemId: currentActiveItemId, navigate, drillInto, goBack } = useRemoteShellContext();
+    const navStack = navigationSnapshot?.navStack ?? currentNavStack;
+    const effectiveActiveItemId = navigationSnapshot ? navigationSnapshot.activeItemId : currentActiveItemId;
     const level = Math.min(rawLevel, navStack.length - 1);
     const entry = navStack[level];
     const hasHeaderActions = !!config.headerActions?.length;

package/dist/components/RemoteShell/RemoteShellPanel.js

@@ -7,8 +7,8 @@ import { DRILL_ANIMATION_DURATION, DRILL_ANIMATION_EASING, useDrillTransition }
 import { NavPanelContent } from "./NavPanelContent.js";
 const RemoteShellPanel = ({ ref, className, resizable, isLoading, loaderCount = 6, ...props })=>{
     const testId = useTestId('panel');
-    const { config, drillLevel } = useRemoteShellContext();
-    const { transition, clearTransition } = useDrillTransition(drillLevel);
+    const { config, drillLevel, navStack, effectiveActiveItemId } = useRemoteShellContext();
+    const { transition, clearTransition } = useDrillTransition(drillLevel, navStack, effectiveActiveItemId);
     if (isLoading) return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
@@ -53,7 +53,11 @@ const RemoteShellPanel = ({ ref, className, resizable, isLoading, loaderCount =
                                     animation: `${isForward ? 'ds-nav-blur-out' : 'ds-nav-blur-in'} ${timing}`
                                 },
                                 children: /*#__PURE__*/ jsx(NavPanelContent, {
-                                    level: isForward ? transition.fromLevel : drillLevel
+                                    level: isForward ? transition.fromLevel : drillLevel,
+                                    navigationSnapshot: isForward ? {
+                                        navStack: transition.fromNavStack,
+                                        activeItemId: transition.fromActiveItemId
+                                    } : void 0
                                 })
                             }),
                             /*#__PURE__*/ jsx("div", {
@@ -62,7 +66,11 @@ const RemoteShellPanel = ({ ref, className, resizable, isLoading, loaderCount =
                                     animation: `${isForward ? 'ds-nav-blur-in' : 'ds-nav-blur-out'} ${timing}`
                                 },
                                 children: /*#__PURE__*/ jsx(NavPanelContent, {
-                                    level: isForward ? drillLevel : transition.fromLevel
+                                    level: isForward ? drillLevel : transition.fromLevel,
+                                    navigationSnapshot: isForward ? void 0 : {
+                                        navStack: transition.fromNavStack,
+                                        activeItemId: transition.fromActiveItemId
+                                    }
                                 })
                             })
                         ]

package/dist/components/RemoteShell/model/useDrillTransition.d.ts

@@ -1,10 +1,13 @@
+import type { NavStackEntry } from './types';
 export declare const DRILL_ANIMATION_DURATION = "220ms";
 export declare const DRILL_ANIMATION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
 export interface DrillTransition {
     fromLevel: number;
     direction: 'forward' | 'backward';
+    fromNavStack: NavStackEntry[];
+    fromActiveItemId: string | null;
 }
-export declare const useDrillTransition: (drillLevel: number) => {
+export declare const useDrillTransition: (drillLevel: number, navStack: NavStackEntry[], activeItemId: string | null) => {
     transition: DrillTransition | null;
     clearTransition: () => void;
 };

package/dist/components/RemoteShell/model/useDrillTransition.js

@@ -1,20 +1,30 @@
 import { useLayoutEffect, useRef, useState } from "react";
 const DRILL_ANIMATION_DURATION = '220ms';
 const DRILL_ANIMATION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
-const useDrillTransition = (drillLevel)=>{
-    const prevLevelRef = useRef(drillLevel);
+const useDrillTransition = (drillLevel, navStack, activeItemId)=>{
+    const previousRef = useRef({
+        drillLevel,
+        navStack,
+        activeItemId
+    });
     const [transition, setTransition] = useState(null);
     useLayoutEffect(()=>{
-        const prev = prevLevelRef.current;
-        if (prev !== drillLevel) {
-            setTransition({
-                fromLevel: prev,
-                direction: drillLevel > prev ? 'forward' : 'backward'
-            });
-            prevLevelRef.current = drillLevel;
-        }
+        const previous = previousRef.current;
+        if (previous.drillLevel !== drillLevel) setTransition({
+            fromLevel: previous.drillLevel,
+            direction: drillLevel > previous.drillLevel ? 'forward' : 'backward',
+            fromNavStack: previous.navStack,
+            fromActiveItemId: previous.activeItemId
+        });
+        previousRef.current = {
+            drillLevel,
+            navStack,
+            activeItemId
+        };
     }, [
-        drillLevel
+        activeItemId,
+        drillLevel,
+        navStack
     ]);
     const clearTransition = ()=>setTransition(null);
     return {

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.23.1",
-  "generatedAt": "2026-09-25T10:54:52.276Z",
+  "version": "1.23.2",
+  "generatedAt": "2026-09-25T13:45:00.624Z",
   "components": [
     {
       "name": "Accordion",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.23.2",
+  "version": "1.23.3-rc-fix-remote-shell-breadcrumb-transition.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",