ydb-ui-components 5.4.1 → 6.0.0

package/build/cjs/components/NavigationTree/NavigationTree.d.ts

@@ -1,4 +1,17 @@
-/// <reference types="react" />
+import React from 'react';
 import type { NavigationTreeProps } from './types';
 export type { NavigationTreeProps };
-export declare function NavigationTree<D = any, M = any>({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache, virtualize, }: NavigationTreeProps<D, M>): JSX.Element;
+export interface NavigationTreeHandle {
+    /**
+     * Scrolls the currently active node into view (if any).
+     * Has no effect if there is no active node or it is not present in the tree.
+     */
+    scrollToActive: () => void;
+}
+declare function NavigationTreeInner<D = any, M = any>({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache, virtualize, }: NavigationTreeProps<D, M>, ref: React.ForwardedRef<NavigationTreeHandle>): JSX.Element;
+/**
+ * `React.forwardRef` loses generics, so we cast to preserve the `<D, M>` API.
+ */
+export declare const NavigationTree: <D = any, M = any>(props: NavigationTreeProps<D, M> & {
+    ref?: React.ForwardedRef<NavigationTreeHandle> | undefined;
+}) => ReturnType<typeof NavigationTreeInner>;

package/build/cjs/components/NavigationTree/NavigationTree.js

@@ -23,19 +23,81 @@ const renderServiceNode = (node) => {
     }
     return (0, jsx_runtime_1.jsx)(EmptyView_1.EmptyView, { level: node.level }, key);
 };
-function NavigationTree({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache = true, virtualize = false, }) {
+function NavigationTreeInner({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache = true, virtualize = false, }, ref) {
     const [state, dispatch] = react_1.default.useReducer(state_1.reducer, {
         [partialRootState.path]: (0, state_1.getNodeState)(partialRootState),
     });
     const nodesList = react_1.default.useMemo(() => (0, state_1.selectTreeAsList)(state, partialRootState.path), [partialRootState.path, state]);
+    const nodesToLoad = react_1.default.useMemo(() => nodesList.filter((node) => !(0, utils_1.isServiceNode)(node) &&
+        !node.collapsed &&
+        !node.loaded &&
+        !node.loading &&
+        !node.error), [nodesList]);
+    const reactListRef = react_1.default.useRef(null);
+    /**
+     * Monotonic counter of in-flight load requests. The current value is captured per
+     * dispatched `StartLoading` and forwarded to the resolving `FinishLoading` /
+     * `ErrorLoading`, so the reducer can drop responses that no longer match the latest
+     * request for a given path (see the stale-result guard in `reducer`).
+     */
+    const requestIdRef = react_1.default.useRef(0);
+    const activeItemRef = react_1.default.useRef(null);
+    const activeNodeIndex = react_1.default.useMemo(() => nodesList.findIndex((node) => !(0, utils_1.isServiceNode)(node) && node.path === activePath), [activePath, nodesList]);
+    const scrolledActivePathRef = react_1.default.useRef(undefined);
+    const scrollToActive = react_1.default.useCallback(() => {
+        var _a, _b;
+        if (activeNodeIndex < 0)
+            return;
+        if (virtualize) {
+            (_a = reactListRef.current) === null || _a === void 0 ? void 0 : _a.scrollAround(activeNodeIndex);
+        }
+        else {
+            (_b = activeItemRef.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'nearest' });
+        }
+    }, [activeNodeIndex, virtualize]);
+    react_1.default.useImperativeHandle(ref, () => ({ scrollToActive }), [scrollToActive]);
+    react_1.default.useEffect(() => {
+        nodesToLoad.forEach((node) => {
+            const requestId = ++requestIdRef.current;
+            dispatch({
+                type: state_1.NavigationTreeActionType.StartLoading,
+                payload: { path: node.path, requestId },
+            });
+            fetchPath(node.path)
+                .then((data) => {
+                dispatch({
+                    type: state_1.NavigationTreeActionType.FinishLoading,
+                    payload: { path: node.path, activePath, data, requestId },
+                });
+            })
+                .catch((error) => {
+                dispatch({
+                    type: state_1.NavigationTreeActionType.ErrorLoading,
+                    payload: { path: node.path, error, requestId },
+                });
+            });
+        });
+    }, [activePath, dispatch, fetchPath, nodesToLoad]);
+    react_1.default.useEffect(() => {
+        if (scrolledActivePathRef.current === activePath)
+            return;
+        if (activeNodeIndex < 0)
+            return;
+        scrollToActive();
+        scrolledActivePathRef.current = activePath;
+    }, [activeNodeIndex, activePath, scrollToActive]);
     const renderNode = (node) => {
-        return ((0, jsx_runtime_1.jsx)(NavigationTreeNode_1.NavigationTreeNode, { state: state, path: node.path, activePath: activePath, fetchPath: fetchPath, dispatch: dispatch, onActivate: onActivePathUpdate, getActions: getActions, onActionsOpenToggle: onActionsOpenToggle, renderAdditionalNodeElements: renderAdditionalNodeElements, cache: cache, level: node.level }, node.path));
+        const isActive = node.path === activePath;
+        return ((0, jsx_runtime_1.jsx)(NavigationTreeNode_1.NavigationTreeNode, { state: state, path: node.path, activePath: activePath, dispatch: dispatch, onActivate: onActivePathUpdate, getActions: getActions, onActionsOpenToggle: onActionsOpenToggle, renderAdditionalNodeElements: renderAdditionalNodeElements, cache: cache, level: node.level, activeItemRef: isActive ? activeItemRef : undefined }, node.path));
     };
-    const renderVirtualizedTree = () => ((0, jsx_runtime_1.jsx)(react_list_1.default, { type: "uniform", length: nodesList.length, useStaticSize: true, itemRenderer: (index) => {
+    const renderVirtualizedTree = () => ((0, jsx_runtime_1.jsx)(react_list_1.default, { ref: reactListRef, type: "uniform", length: nodesList.length, useStaticSize: true, itemRenderer: (index) => {
             const node = nodesList[index];
             return (0, utils_1.isServiceNode)(node) ? renderServiceNode(node) : renderNode(node);
         } }));
     const renderSimpleTree = () => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: nodesList.map((node) => (0, utils_1.isServiceNode)(node) ? renderServiceNode(node) : renderNode(node)) }));
     return virtualize ? renderVirtualizedTree() : renderSimpleTree();
 }
-exports.NavigationTree = NavigationTree;
+/**
+ * `React.forwardRef` loses generics, so we cast to preserve the `<D, M>` API.
+ */
+exports.NavigationTree = react_1.default.forwardRef(NavigationTreeInner);

package/build/cjs/components/NavigationTree/NavigationTreeNode.d.ts

@@ -3,7 +3,6 @@ import type { NavigationTreeAction } from './state';
 import type { NavigationTreeProps, NavigationTreeState } from './types';
 export interface NavigationTreeNodeProps {
     path: string;
-    fetchPath: NavigationTreeProps['fetchPath'];
     activePath?: string;
     state: NavigationTreeState;
     level?: number;
@@ -14,5 +13,10 @@ export interface NavigationTreeNodeProps {
     onActionsOpenToggle?: NavigationTreeProps['onActionsOpenToggle'];
     renderAdditionalNodeElements?: NavigationTreeProps['renderAdditionalNodeElements'];
     cache?: boolean;
+    /**
+     * Ref object attached to the item element when this node is the active one.
+     * Set only for the active node so the parent can scroll it into view.
+     */
+    activeItemRef?: React.RefObject<HTMLDivElement>;
 }
-export declare function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatch, children, onActivate, getActions, onActionsOpenToggle, renderAdditionalNodeElements, cache, }: NavigationTreeNodeProps): JSX.Element;
+export declare function NavigationTreeNode({ path, activePath, state, level, dispatch, children, onActivate, getActions, onActionsOpenToggle, renderAdditionalNodeElements, cache, activeItemRef, }: NavigationTreeNodeProps): JSX.Element;

package/build/cjs/components/NavigationTree/NavigationTreeNode.js

@@ -44,49 +44,16 @@ function renderIcon(type, collapsed) {
             return null;
     }
 }
-function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatch, children, onActivate, getActions, onActionsOpenToggle, renderAdditionalNodeElements, cache, }) {
+function NavigationTreeNode({ path, activePath, state, level, dispatch, children, onActivate, getActions, onActionsOpenToggle, renderAdditionalNodeElements, cache, activeItemRef, }) {
     const nodeState = state[path];
     react_1.default.useEffect(() => {
-        if (nodeState.collapsed) {
-            if (!cache) {
-                dispatch({
-                    type: state_1.NavigationTreeActionType.ResetNode,
-                    payload: { path },
-                });
-            }
-            return;
-        }
-        if (nodeState.loaded || nodeState.loading || nodeState.error) {
-            return;
-        }
-        dispatch({
-            type: state_1.NavigationTreeActionType.StartLoading,
-            payload: { path },
-        });
-        fetchPath(path)
-            .then((data) => {
+        if (nodeState.collapsed && !cache) {
             dispatch({
-                type: state_1.NavigationTreeActionType.FinishLoading,
-                payload: { path, activePath, data },
+                type: state_1.NavigationTreeActionType.ResetNode,
+                payload: { path },
             });
-        })
-            .catch((error) => {
-            dispatch({
-                type: state_1.NavigationTreeActionType.ErrorLoading,
-                payload: { path, error },
-            });
-        });
-    }, [
-        activePath,
-        cache,
-        dispatch,
-        fetchPath,
-        nodeState.collapsed,
-        nodeState.loaded,
-        nodeState.loading,
-        nodeState.error,
-        path,
-    ]);
+        }
+    }, [cache, dispatch, nodeState.collapsed, path]);
     const handleClick = react_1.default.useCallback(() => {
         if (onActivate) {
             onActivate(path);
@@ -108,6 +75,6 @@ function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatc
             isOpen,
         });
     }, [nodeState.path, nodeState.type, onActionsOpenToggle]);
-    return ((0, jsx_runtime_1.jsx)(TreeView_1.TreeView, { name: nodeState.name, icon: renderIcon(nodeState.type, nodeState.collapsed), collapsed: nodeState.collapsed, active: nodeState.path === activePath, actions: actions, additionalNodeElements: additionalNodeElements, hasArrow: nodeState.expandable, onClick: handleClick, onArrowClick: handleArrowClick, onActionsOpenToggle: handleActionsOpenToggle, level: level, children: children }));
+    return ((0, jsx_runtime_1.jsx)(TreeView_1.TreeView, { name: nodeState.name, icon: renderIcon(nodeState.type, nodeState.collapsed), collapsed: nodeState.collapsed, active: nodeState.path === activePath, actions: actions, additionalNodeElements: additionalNodeElements, hasArrow: nodeState.expandable, onClick: handleClick, onArrowClick: handleArrowClick, onActionsOpenToggle: handleActionsOpenToggle, level: level, itemRef: activeItemRef, children: children }));
 }
 exports.NavigationTreeNode = NavigationTreeNode;

package/build/cjs/components/NavigationTree/state.d.ts

@@ -15,6 +15,8 @@ export type NavigationTreeAction = {
     type: NavigationTreeActionType.StartLoading;
     payload: {
         path: string;
+        /** Monotonic id captured at dispatch time; written into node state. */
+        requestId: number;
     };
 } | {
     type: NavigationTreeActionType.FinishLoading;
@@ -22,12 +24,16 @@ export type NavigationTreeAction = {
         path: string;
         activePath?: string;
         data: NavigationTreeDataItem[];
+        /** Id of the `StartLoading` this result belongs to; stale ones are dropped. */
+        requestId: number;
     };
 } | {
     type: NavigationTreeActionType.ErrorLoading;
     payload: {
         path: string;
         error: unknown;
+        /** Id of the `StartLoading` this error belongs to; stale ones are dropped. */
+        requestId: number;
     };
 } | {
     type: NavigationTreeActionType.ResetNode;
@@ -41,6 +47,7 @@ export declare function getDefaultNodeState(): {
     loaded: boolean;
     error: boolean;
     children: never[];
+    requestId: number;
 };
 export declare function getNodeState(partialState: NavigationTreeNodePartialState): NavigationTreeNodeState;
 export declare function reducer(state: NavigationTreeState | undefined, action: NavigationTreeAction): NavigationTreeState;

package/build/cjs/components/NavigationTree/state.js

@@ -17,6 +17,7 @@ function getDefaultNodeState() {
         loaded: false,
         error: false,
         children: [],
+        requestId: 0,
     };
 }
 exports.getDefaultNodeState = getDefaultNodeState;
@@ -30,9 +31,27 @@ function reducer(state = {}, action) {
         case NavigationTreeActionType.ToggleCollapsed:
             return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { collapsed: !state[action.payload.path].collapsed }) });
         case NavigationTreeActionType.StartLoading:
-            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: true, loaded: false, error: false, children: [] }) });
+            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: true, loaded: false, error: false, children: [], requestId: action.payload.requestId }) });
         case NavigationTreeActionType.FinishLoading: {
-            const newState = Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: false, loaded: Boolean(action.payload.data), error: false }) });
+            const currentNode = state[action.payload.path];
+            // Ignore stale results. A result is stale when:
+            //   * the node was removed entirely, OR
+            //   * the node's `requestId` no longer matches the one captured at dispatch time
+            //     (i.e. `ResetNode` cleared it, or a newer `StartLoading` superseded it).
+            // The previous `loading`-only guard couldn't distinguish "still loading the original
+            // request" from "loading a second, newer request", which allowed an older response
+            // to overwrite a newer one after a collapse-expand cycle with `cache: false`.
+            // Note: a plain collapse with `cache: true` keeps `requestId` intact, so the fetch
+            // is still allowed to complete and populate the cache — that's intentional.
+            if (!currentNode || currentNode.requestId !== action.payload.requestId) {
+                return state;
+            }
+            const newState = Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, currentNode), { loading: false, loaded: Boolean(action.payload.data), error: false, 
+                    // Clear the in-flight marker now that this request has completed.
+                    // The counter in `NavigationTree` only allocates ids >= 1, so any
+                    // late stale `FinishLoading` / `ErrorLoading` for this path will
+                    // still fail the guard above (its id > 0 won't match this 0).
+                    requestId: 0 }) });
             if (action.payload.data) {
                 newState[action.payload.path].children = action.payload.data.map(({ name }) => name);
                 for (const item of action.payload.data) {
@@ -50,8 +69,17 @@ function reducer(state = {}, action) {
             }
             return newState;
         }
-        case NavigationTreeActionType.ErrorLoading:
-            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: false, loaded: false, error: true }) });
+        case NavigationTreeActionType.ErrorLoading: {
+            const currentNode = state[action.payload.path];
+            // Ignore stale errors — see the matching note on `FinishLoading` above.
+            if (!currentNode || currentNode.requestId !== action.payload.requestId) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, currentNode), { loading: false, loaded: false, error: true, 
+                    // See note in `FinishLoading`: clear the in-flight id on completion
+                    // to keep `requestId === 0` ⇔ "no active request".
+                    requestId: 0 }) });
+        }
         case NavigationTreeActionType.ResetNode:
             return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), getDefaultNodeState()) });
         default:

package/build/cjs/components/NavigationTree/types.d.ts

@@ -24,13 +24,22 @@ export interface NavigationTreeNodeState {
     children: string[];
     level?: number;
     meta?: unknown;
+    /**
+     * Id of the in-flight load request for this node. Assigned by `StartLoading`,
+     * cleared back to `0` on `FinishLoading` / `ErrorLoading` / `ResetNode`, so
+     * `requestId === 0` always means "no active request". Used to discard stale
+     * results: a `FinishLoading` / `ErrorLoading` whose payload id does not match
+     * the current value is dropped (so a late response from a request superseded
+     * by `ResetNode` + a new `StartLoading` cannot overwrite the newer one).
+     */
+    requestId: number;
 }
 export interface NavigationTreeServiceNode {
     path: string;
     status: 'loading' | 'error' | 'empty';
     level?: number;
 }
-export type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
+export type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children' | 'requestId'>;
 export interface NavigationTreeProps<D = any, M = any> {
     rootState: NavigationTreeNodePartialState;
     fetchPath: (path: string) => Promise<NavigationTreeDataItem<M>[]>;

package/build/cjs/components/TreeView/TreeView.d.ts

@@ -15,5 +15,11 @@ export interface TreeViewProps {
     actions?: DropdownMenuItemMixed<any>[];
     additionalNodeElements?: JSX.Element;
     level?: number;
+    /**
+     * Ref object passed to the inner item element.
+     * Use this if you need to control scroll-into-view from a parent component
+     * (e.g. `itemRef.current?.scrollIntoView({block: 'nearest'})`).
+     */
+    itemRef?: React.Ref<HTMLDivElement>;
 }
-export declare function TreeView({ children, name, title, icon, collapsed, active, onClick, onArrowClick, onActionsOpenToggle, hasArrow, actions, additionalNodeElements, level, }: TreeViewProps): JSX.Element;
+export declare function TreeView({ children, name, title, icon, collapsed, active, onClick, onArrowClick, onActionsOpenToggle, hasArrow, actions, additionalNodeElements, level, itemRef, }: TreeViewProps): JSX.Element;

package/build/cjs/components/TreeView/TreeView.js

@@ -11,7 +11,7 @@ const cn_1 = require("../../utils/cn");
 require("./TreeView.css");
 const TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
 const b = (0, cn_1.block)('ydb-tree-view');
-function TreeView({ children, name, title, icon, collapsed = true, active = false, onClick, onArrowClick, onActionsOpenToggle, hasArrow = false, actions, additionalNodeElements, level, }) {
+function TreeView({ children, name, title, icon, collapsed = true, active = false, onClick, onArrowClick, onActionsOpenToggle, hasArrow = false, actions, additionalNodeElements, level, itemRef, }) {
     const handleClick = react_1.default.useCallback((event) => {
         if (!onClick)
             return;
@@ -37,7 +37,7 @@ function TreeView({ children, name, title, icon, collapsed = true, active = fals
     }
     const tooltipContent = title !== null && title !== void 0 ? title : (typeof name === 'string' ? name : '');
     const isTooltipDisabled = tooltipContent.trim().length === 0;
-    return ((0, jsx_runtime_1.jsx)("div", { className: b(), style: { [TREE_LEVEL_CSS_VAR]: level }, children: (0, jsx_runtime_1.jsxs)("div", { className: "tree-view", children: [(0, jsx_runtime_1.jsxs)("div", { className: `${itemClassName} ${b('item', { active })}`, onClick: handleClick, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: `${arrowClassName} ${b('arrow', {
+    return ((0, jsx_runtime_1.jsx)("div", { className: b(), style: { [TREE_LEVEL_CSS_VAR]: level }, children: (0, jsx_runtime_1.jsxs)("div", { className: "tree-view", children: [(0, jsx_runtime_1.jsxs)("div", { ref: itemRef, className: `${itemClassName} ${b('item', { active })}`, onClick: handleClick, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: `${arrowClassName} ${b('arrow', {
                                 collapsed,
                                 hidden: !hasArrow,
                             })}`, disabled: !handleArrowClick, onClick: handleArrowClick }), (0, jsx_runtime_1.jsxs)("div", { className: b('content'), children: [(0, jsx_runtime_1.jsx)(uikit_1.ActionTooltip, { title: tooltipContent, disabled: isTooltipDisabled, children: (0, jsx_runtime_1.jsxs)("div", { className: b('label'), children: [icon && (0, jsx_runtime_1.jsx)("div", { className: b('icon'), children: icon }), (0, jsx_runtime_1.jsx)("div", { className: b('text'), children: name })] }) }), actions && actions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: b('actions'), children: [additionalNodeElements, (0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { onOpenToggle: onActionsOpenToggle, defaultSwitcherProps: {

package/build/esm/components/NavigationTree/NavigationTree.d.ts

@@ -1,4 +1,17 @@
-/// <reference types="react" />
+import React from 'react';
 import type { NavigationTreeProps } from './types';
 export type { NavigationTreeProps };
-export declare function NavigationTree<D = any, M = any>({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache, virtualize, }: NavigationTreeProps<D, M>): JSX.Element;
+export interface NavigationTreeHandle {
+    /**
+     * Scrolls the currently active node into view (if any).
+     * Has no effect if there is no active node or it is not present in the tree.
+     */
+    scrollToActive: () => void;
+}
+declare function NavigationTreeInner<D = any, M = any>({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache, virtualize, }: NavigationTreeProps<D, M>, ref: React.ForwardedRef<NavigationTreeHandle>): JSX.Element;
+/**
+ * `React.forwardRef` loses generics, so we cast to preserve the `<D, M>` API.
+ */
+export declare const NavigationTree: <D = any, M = any>(props: NavigationTreeProps<D, M> & {
+    ref?: React.ForwardedRef<NavigationTreeHandle> | undefined;
+}) => ReturnType<typeof NavigationTreeInner>;

package/build/esm/components/NavigationTree/NavigationTree.js

@@ -5,7 +5,7 @@ import { EmptyView } from './EmptyView/EmptyView';
 import { ErrorView } from './ErrorView/ErrorView';
 import { LoaderView } from './LoaderView/LoaderView';
 import { NavigationTreeNode } from './NavigationTreeNode';
-import { getNodeState, reducer, selectTreeAsList } from './state';
+import { NavigationTreeActionType, getNodeState, reducer, selectTreeAsList } from './state';
 import { isServiceNode } from './utils';
 const renderServiceNode = (node) => {
     const key = `${node.path}|${node.status}`;
@@ -17,18 +17,81 @@ const renderServiceNode = (node) => {
     }
     return _jsx(EmptyView, { level: node.level }, key);
 };
-export function NavigationTree({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache = true, virtualize = false, }) {
+function NavigationTreeInner({ rootState: partialRootState, fetchPath, getActions, renderAdditionalNodeElements, activePath, onActionsOpenToggle, onActivePathUpdate, cache = true, virtualize = false, }, ref) {
     const [state, dispatch] = React.useReducer(reducer, {
         [partialRootState.path]: getNodeState(partialRootState),
     });
     const nodesList = React.useMemo(() => selectTreeAsList(state, partialRootState.path), [partialRootState.path, state]);
+    const nodesToLoad = React.useMemo(() => nodesList.filter((node) => !isServiceNode(node) &&
+        !node.collapsed &&
+        !node.loaded &&
+        !node.loading &&
+        !node.error), [nodesList]);
+    const reactListRef = React.useRef(null);
+    /**
+     * Monotonic counter of in-flight load requests. The current value is captured per
+     * dispatched `StartLoading` and forwarded to the resolving `FinishLoading` /
+     * `ErrorLoading`, so the reducer can drop responses that no longer match the latest
+     * request for a given path (see the stale-result guard in `reducer`).
+     */
+    const requestIdRef = React.useRef(0);
+    const activeItemRef = React.useRef(null);
+    const activeNodeIndex = React.useMemo(() => nodesList.findIndex((node) => !isServiceNode(node) && node.path === activePath), [activePath, nodesList]);
+    const scrolledActivePathRef = React.useRef(undefined);
+    const scrollToActive = React.useCallback(() => {
+        var _a, _b;
+        if (activeNodeIndex < 0)
+            return;
+        if (virtualize) {
+            (_a = reactListRef.current) === null || _a === void 0 ? void 0 : _a.scrollAround(activeNodeIndex);
+        }
+        else {
+            (_b = activeItemRef.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'nearest' });
+        }
+    }, [activeNodeIndex, virtualize]);
+    React.useImperativeHandle(ref, () => ({ scrollToActive }), [scrollToActive]);
+    React.useEffect(() => {
+        nodesToLoad.forEach((node) => {
+            const requestId = ++requestIdRef.current;
+            dispatch({
+                type: NavigationTreeActionType.StartLoading,
+                payload: { path: node.path, requestId },
+            });
+            fetchPath(node.path)
+                .then((data) => {
+                dispatch({
+                    type: NavigationTreeActionType.FinishLoading,
+                    payload: { path: node.path, activePath, data, requestId },
+                });
+            })
+                .catch((error) => {
+                dispatch({
+                    type: NavigationTreeActionType.ErrorLoading,
+                    payload: { path: node.path, error, requestId },
+                });
+            });
+        });
+    }, [activePath, dispatch, fetchPath, nodesToLoad]);
+    React.useEffect(() => {
+        if (scrolledActivePathRef.current === activePath)
+            return;
+        if (activeNodeIndex < 0)
+            return;
+        scrollToActive();
+        scrolledActivePathRef.current = activePath;
+    }, [activeNodeIndex, activePath, scrollToActive]);
     const renderNode = (node) => {
-        return (_jsx(NavigationTreeNode, { state: state, path: node.path, activePath: activePath, fetchPath: fetchPath, dispatch: dispatch, onActivate: onActivePathUpdate, getActions: getActions, onActionsOpenToggle: onActionsOpenToggle, renderAdditionalNodeElements: renderAdditionalNodeElements, cache: cache, level: node.level }, node.path));
+        const isActive = node.path === activePath;
+        return (_jsx(NavigationTreeNode, { state: state, path: node.path, activePath: activePath, dispatch: dispatch, onActivate: onActivePathUpdate, getActions: getActions, onActionsOpenToggle: onActionsOpenToggle, renderAdditionalNodeElements: renderAdditionalNodeElements, cache: cache, level: node.level, activeItemRef: isActive ? activeItemRef : undefined }, node.path));
     };
-    const renderVirtualizedTree = () => (_jsx(ReactList, { type: "uniform", length: nodesList.length, useStaticSize: true, itemRenderer: (index) => {
+    const renderVirtualizedTree = () => (_jsx(ReactList, { ref: reactListRef, type: "uniform", length: nodesList.length, useStaticSize: true, itemRenderer: (index) => {
             const node = nodesList[index];
             return isServiceNode(node) ? renderServiceNode(node) : renderNode(node);
         } }));
     const renderSimpleTree = () => (_jsx(React.Fragment, { children: nodesList.map((node) => isServiceNode(node) ? renderServiceNode(node) : renderNode(node)) }));
     return virtualize ? renderVirtualizedTree() : renderSimpleTree();
 }
+/**
+ * `React.forwardRef` loses generics, so we cast to preserve the `<D, M>` API.
+ */
+export const NavigationTree = React.forwardRef(NavigationTreeInner);

package/build/esm/components/NavigationTree/NavigationTreeNode.d.ts

@@ -3,7 +3,6 @@ import type { NavigationTreeAction } from './state';
 import type { NavigationTreeProps, NavigationTreeState } from './types';
 export interface NavigationTreeNodeProps {
     path: string;
-    fetchPath: NavigationTreeProps['fetchPath'];
     activePath?: string;
     state: NavigationTreeState;
     level?: number;
@@ -14,5 +13,10 @@ export interface NavigationTreeNodeProps {
     onActionsOpenToggle?: NavigationTreeProps['onActionsOpenToggle'];
     renderAdditionalNodeElements?: NavigationTreeProps['renderAdditionalNodeElements'];
     cache?: boolean;
+    /**
+     * Ref object attached to the item element when this node is the active one.
+     * Set only for the active node so the parent can scroll it into view.
+     */
+    activeItemRef?: React.RefObject<HTMLDivElement>;
 }
-export declare function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatch, children, onActivate, getActions, onActionsOpenToggle, renderAdditionalNodeElements, cache, }: NavigationTreeNodeProps): JSX.Element;
+export declare function NavigationTreeNode({ path, activePath, state, level, dispatch, children, onActivate, getActions, onActionsOpenToggle, renderAdditionalNodeElements, cache, activeItemRef, }: NavigationTreeNodeProps): JSX.Element;

package/build/esm/components/NavigationTree/NavigationTreeNode.js

@@ -38,49 +38,16 @@ function renderIcon(type, collapsed) {
             return null;
     }
 }
-export function NavigationTreeNode({ path, fetchPath, activePath, state, level, dispatch, children, onActivate, getActions, onActionsOpenToggle, renderAdditionalNodeElements, cache, }) {
+export function NavigationTreeNode({ path, activePath, state, level, dispatch, children, onActivate, getActions, onActionsOpenToggle, renderAdditionalNodeElements, cache, activeItemRef, }) {
     const nodeState = state[path];
     React.useEffect(() => {
-        if (nodeState.collapsed) {
-            if (!cache) {
-                dispatch({
-                    type: NavigationTreeActionType.ResetNode,
-                    payload: { path },
-                });
-            }
-            return;
-        }
-        if (nodeState.loaded || nodeState.loading || nodeState.error) {
-            return;
-        }
-        dispatch({
-            type: NavigationTreeActionType.StartLoading,
-            payload: { path },
-        });
-        fetchPath(path)
-            .then((data) => {
+        if (nodeState.collapsed && !cache) {
             dispatch({
-                type: NavigationTreeActionType.FinishLoading,
-                payload: { path, activePath, data },
+                type: NavigationTreeActionType.ResetNode,
+                payload: { path },
             });
-        })
-            .catch((error) => {
-            dispatch({
-                type: NavigationTreeActionType.ErrorLoading,
-                payload: { path, error },
-            });
-        });
-    }, [
-        activePath,
-        cache,
-        dispatch,
-        fetchPath,
-        nodeState.collapsed,
-        nodeState.loaded,
-        nodeState.loading,
-        nodeState.error,
-        path,
-    ]);
+        }
+    }, [cache, dispatch, nodeState.collapsed, path]);
     const handleClick = React.useCallback(() => {
         if (onActivate) {
             onActivate(path);
@@ -102,5 +69,5 @@ export function NavigationTreeNode({ path, fetchPath, activePath, state, level,
             isOpen,
         });
     }, [nodeState.path, nodeState.type, onActionsOpenToggle]);
-    return (_jsx(TreeView, { name: nodeState.name, icon: renderIcon(nodeState.type, nodeState.collapsed), collapsed: nodeState.collapsed, active: nodeState.path === activePath, actions: actions, additionalNodeElements: additionalNodeElements, hasArrow: nodeState.expandable, onClick: handleClick, onArrowClick: handleArrowClick, onActionsOpenToggle: handleActionsOpenToggle, level: level, children: children }));
+    return (_jsx(TreeView, { name: nodeState.name, icon: renderIcon(nodeState.type, nodeState.collapsed), collapsed: nodeState.collapsed, active: nodeState.path === activePath, actions: actions, additionalNodeElements: additionalNodeElements, hasArrow: nodeState.expandable, onClick: handleClick, onArrowClick: handleArrowClick, onActionsOpenToggle: handleActionsOpenToggle, level: level, itemRef: activeItemRef, children: children }));
 }

package/build/esm/components/NavigationTree/state.d.ts

@@ -15,6 +15,8 @@ export type NavigationTreeAction = {
     type: NavigationTreeActionType.StartLoading;
     payload: {
         path: string;
+        /** Monotonic id captured at dispatch time; written into node state. */
+        requestId: number;
     };
 } | {
     type: NavigationTreeActionType.FinishLoading;
@@ -22,12 +24,16 @@ export type NavigationTreeAction = {
         path: string;
         activePath?: string;
         data: NavigationTreeDataItem[];
+        /** Id of the `StartLoading` this result belongs to; stale ones are dropped. */
+        requestId: number;
     };
 } | {
     type: NavigationTreeActionType.ErrorLoading;
     payload: {
         path: string;
         error: unknown;
+        /** Id of the `StartLoading` this error belongs to; stale ones are dropped. */
+        requestId: number;
     };
 } | {
     type: NavigationTreeActionType.ResetNode;
@@ -41,6 +47,7 @@ export declare function getDefaultNodeState(): {
     loaded: boolean;
     error: boolean;
     children: never[];
+    requestId: number;
 };
 export declare function getNodeState(partialState: NavigationTreeNodePartialState): NavigationTreeNodeState;
 export declare function reducer(state: NavigationTreeState | undefined, action: NavigationTreeAction): NavigationTreeState;

package/build/esm/components/NavigationTree/state.js

@@ -14,6 +14,7 @@ export function getDefaultNodeState() {
         loaded: false,
         error: false,
         children: [],
+        requestId: 0,
     };
 }
 export function getNodeState(partialState) {
@@ -25,9 +26,27 @@ export function reducer(state = {}, action) {
         case NavigationTreeActionType.ToggleCollapsed:
             return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { collapsed: !state[action.payload.path].collapsed }) });
         case NavigationTreeActionType.StartLoading:
-            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: true, loaded: false, error: false, children: [] }) });
+            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: true, loaded: false, error: false, children: [], requestId: action.payload.requestId }) });
         case NavigationTreeActionType.FinishLoading: {
-            const newState = Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: false, loaded: Boolean(action.payload.data), error: false }) });
+            const currentNode = state[action.payload.path];
+            // Ignore stale results. A result is stale when:
+            //   * the node was removed entirely, OR
+            //   * the node's `requestId` no longer matches the one captured at dispatch time
+            //     (i.e. `ResetNode` cleared it, or a newer `StartLoading` superseded it).
+            // The previous `loading`-only guard couldn't distinguish "still loading the original
+            // request" from "loading a second, newer request", which allowed an older response
+            // to overwrite a newer one after a collapse-expand cycle with `cache: false`.
+            // Note: a plain collapse with `cache: true` keeps `requestId` intact, so the fetch
+            // is still allowed to complete and populate the cache — that's intentional.
+            if (!currentNode || currentNode.requestId !== action.payload.requestId) {
+                return state;
+            }
+            const newState = Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, currentNode), { loading: false, loaded: Boolean(action.payload.data), error: false, 
+                    // Clear the in-flight marker now that this request has completed.
+                    // The counter in `NavigationTree` only allocates ids >= 1, so any
+                    // late stale `FinishLoading` / `ErrorLoading` for this path will
+                    // still fail the guard above (its id > 0 won't match this 0).
+                    requestId: 0 }) });
             if (action.payload.data) {
                 newState[action.payload.path].children = action.payload.data.map(({ name }) => name);
                 for (const item of action.payload.data) {
@@ -45,8 +64,17 @@ export function reducer(state = {}, action) {
             }
             return newState;
         }
-        case NavigationTreeActionType.ErrorLoading:
-            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), { loading: false, loaded: false, error: true }) });
+        case NavigationTreeActionType.ErrorLoading: {
+            const currentNode = state[action.payload.path];
+            // Ignore stale errors — see the matching note on `FinishLoading` above.
+            if (!currentNode || currentNode.requestId !== action.payload.requestId) {
+                return state;
+            }
+            return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, currentNode), { loading: false, loaded: false, error: true, 
+                    // See note in `FinishLoading`: clear the in-flight id on completion
+                    // to keep `requestId === 0` ⇔ "no active request".
+                    requestId: 0 }) });
+        }
         case NavigationTreeActionType.ResetNode:
             return Object.assign(Object.assign({}, state), { [action.payload.path]: Object.assign(Object.assign({}, state[action.payload.path]), getDefaultNodeState()) });
         default:

package/build/esm/components/NavigationTree/types.d.ts

@@ -24,13 +24,22 @@ export interface NavigationTreeNodeState {
     children: string[];
     level?: number;
     meta?: unknown;
+    /**
+     * Id of the in-flight load request for this node. Assigned by `StartLoading`,
+     * cleared back to `0` on `FinishLoading` / `ErrorLoading` / `ResetNode`, so
+     * `requestId === 0` always means "no active request". Used to discard stale
+     * results: a `FinishLoading` / `ErrorLoading` whose payload id does not match
+     * the current value is dropped (so a late response from a request superseded
+     * by `ResetNode` + a new `StartLoading` cannot overwrite the newer one).
+     */
+    requestId: number;
 }
 export interface NavigationTreeServiceNode {
     path: string;
     status: 'loading' | 'error' | 'empty';
     level?: number;
 }
-export type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
+export type NavigationTreeNodePartialState = Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children' | 'requestId'>;
 export interface NavigationTreeProps<D = any, M = any> {
     rootState: NavigationTreeNodePartialState;
     fetchPath: (path: string) => Promise<NavigationTreeDataItem<M>[]>;

package/build/esm/components/TreeView/TreeView.d.ts

@@ -15,5 +15,11 @@ export interface TreeViewProps {
     actions?: DropdownMenuItemMixed<any>[];
     additionalNodeElements?: JSX.Element;
     level?: number;
+    /**
+     * Ref object passed to the inner item element.
+     * Use this if you need to control scroll-into-view from a parent component
+     * (e.g. `itemRef.current?.scrollIntoView({block: 'nearest'})`).
+     */
+    itemRef?: React.Ref<HTMLDivElement>;
 }
-export declare function TreeView({ children, name, title, icon, collapsed, active, onClick, onArrowClick, onActionsOpenToggle, hasArrow, actions, additionalNodeElements, level, }: TreeViewProps): JSX.Element;
+export declare function TreeView({ children, name, title, icon, collapsed, active, onClick, onArrowClick, onActionsOpenToggle, hasArrow, actions, additionalNodeElements, level, itemRef, }: TreeViewProps): JSX.Element;

package/build/esm/components/TreeView/TreeView.js

@@ -5,7 +5,7 @@ import { block } from '../../utils/cn';
 import './TreeView.css';
 const TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
 const b = block('ydb-tree-view');
-export function TreeView({ children, name, title, icon, collapsed = true, active = false, onClick, onArrowClick, onActionsOpenToggle, hasArrow = false, actions, additionalNodeElements, level, }) {
+export function TreeView({ children, name, title, icon, collapsed = true, active = false, onClick, onArrowClick, onActionsOpenToggle, hasArrow = false, actions, additionalNodeElements, level, itemRef, }) {
     const handleClick = React.useCallback((event) => {
         if (!onClick)
             return;
@@ -31,7 +31,7 @@ export function TreeView({ children, name, title, icon, collapsed = true, active
     }
     const tooltipContent = title !== null && title !== void 0 ? title : (typeof name === 'string' ? name : '');
     const isTooltipDisabled = tooltipContent.trim().length === 0;
-    return (_jsx("div", { className: b(), style: { [TREE_LEVEL_CSS_VAR]: level }, children: _jsxs("div", { className: "tree-view", children: [_jsxs("div", { className: `${itemClassName} ${b('item', { active })}`, onClick: handleClick, children: [_jsx("button", { type: "button", className: `${arrowClassName} ${b('arrow', {
+    return (_jsx("div", { className: b(), style: { [TREE_LEVEL_CSS_VAR]: level }, children: _jsxs("div", { className: "tree-view", children: [_jsxs("div", { ref: itemRef, className: `${itemClassName} ${b('item', { active })}`, onClick: handleClick, children: [_jsx("button", { type: "button", className: `${arrowClassName} ${b('arrow', {
                                 collapsed,
                                 hidden: !hasArrow,
                             })}`, disabled: !handleArrowClick, onClick: handleArrowClick }), _jsxs("div", { className: b('content'), children: [_jsx(ActionTooltip, { title: tooltipContent, disabled: isTooltipDisabled, children: _jsxs("div", { className: b('label'), children: [icon && _jsx("div", { className: b('icon'), children: icon }), _jsx("div", { className: b('text'), children: name })] }) }), actions && actions.length > 0 && (_jsxs("div", { className: b('actions'), children: [additionalNodeElements, _jsx(DropdownMenu, { onOpenToggle: onActionsOpenToggle, defaultSwitcherProps: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-ui-components",
-  "version": "5.4.1",
+  "version": "6.0.0",
   "description": "",
   "license": "MIT",
   "exports": {