@sberbusiness/triplex-next 1.43.0 → 1.44.0

package/components/TopOverlay/TopOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopOverlay.js","sources":["../../../src/components/TopOverlay/TopOverlay.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { FocusTrapExtended, IFocusTrapExtendedProps } from \"../FocusTrapExtended\";\nimport { Overlay, IOverlayProps } from \"../Overlay/Overlay\";\nimport { EOverlayDirection, IOverlayChildrenProvideProps } from \"../Overlay/OverlayBase\";\nimport styles from \"./styles/TopOverlay.module.less\";\n\n/** Свойства компонента TopOverlay. */\nexport interface ITopOverlayProps extends Pick<IOverlayProps, \"opened\" | \"onOpen\" | \"onClose\"> {\n    children?: React.ReactNode;\n    /** Свойства компонента FocusTrapExtended. */\n    focusTrapProps?: IFocusTrapExtendedProps;\n}\n\nexport const TopOverlay: React.FC<ITopOverlayProps> = ({\n    children,\n    focusTrapProps,\n    opened,\n    onClose,\n    onOpen,\n    ...OverlayBaseProps\n}) => {\n    // Флаг, в текущий момент оверлей закрывается.\n    const [closing, setClosing] = useState(false);\n    // FocusTrap активен.\n    const [activeFocusTrap, setActiveFocusTrap] = useState(false);\n    // Позиция top для lightBoxTopOverlayWrapper, высчитывается исходя из scrollTop родителя.\n    const [overlayWrapperTopPosition, setOverlayWrapperTopPosition] = useState<number | string>(0);\n    // Предыдущее состояние открыт/закрыт.\n    const prevOpened = useRef(opened);\n    // Ref контейнера.\n    const overlayWrapperRef = useRef<HTMLDivElement | null>(null);\n\n    // Пересчет позиционирования оверлея. Бывает неверная позиция, например, при открытии во время скролла.\n    const updateTopPosition = () => {\n        // Перерасчет позиционирования оверлея, если он был открыт во время скролла родителя.\n        if (overlayWrapperRef.current) {\n            // Верхняя позиция LightBox.\n            const lightBoxTopPosition =\n                getComputedStyle(overlayWrapperRef.current).getPropertyValue(\"--lightBox-screen-top\") || \"0\";\n            // Текущее положение оверлея.\n            const position = overlayWrapperRef.current.getBoundingClientRect();\n            // Оверлей расположен выше, чем нужно.\n            if (position.top < 0) {\n                setOverlayWrapperTopPosition(\n                    (overlayWrapperTopPositionPrev) =>\n                        parseInt(overlayWrapperTopPositionPrev as string, 10) +\n                        Math.abs(position.top) +\n                        parseInt(lightBoxTopPosition, 10),\n                );\n            } else {\n                setOverlayWrapperTopPosition(\n                    // Оверлей расположен ниже, чем нужно.\n                    (overlayWrapperTopPositionPrev) =>\n                        parseInt(overlayWrapperTopPositionPrev as string, 10) -\n                        position.top +\n                        parseInt(lightBoxTopPosition, 10),\n                );\n            }\n        }\n    };\n\n    const handleOpen = () => {\n        updateTopPosition();\n        setActiveFocusTrap(true);\n        onOpen?.();\n    };\n\n    useEffect(() => {\n        // Флаг opened поменялся на false.\n        if (prevOpened.current && !opened) {\n            setClosing(true);\n\n            // Флаг opened поменялся на true.\n        } else if (!prevOpened.current && opened) {\n            updateTopPosition();\n        }\n\n        prevOpened.current = opened;\n    }, [opened]);\n\n    const handleClose = () => {\n        setClosing(false);\n        setOverlayWrapperTopPosition(0);\n        onClose?.();\n    };\n\n    const handleClosing = () => setActiveFocusTrap(false);\n\n    const renderOverlay = (overlayProps: IOverlayChildrenProvideProps) => (\n        <>\n            <Overlay.Mask opened={overlayProps.opened} className={styles.topOverlayMask} />\n            <Overlay.Panel className={styles.topOverlayPanel} {...overlayProps}>\n                {children}\n            </Overlay.Panel>\n        </>\n    );\n\n    const setOpened = () => {};\n\n    const classNameOverlayWrapper = clsx(styles.topOverlayWrapper, {\n        [styles.closing]: closing,\n        [styles.opened]: opened,\n    });\n\n    return (\n        <FocusTrapExtended\n            active={activeFocusTrap}\n            {...focusTrapProps}\n            focusTrapOptions={{\n                preventScroll: true,\n                ...focusTrapProps?.focusTrapOptions,\n            }}\n        >\n            <div\n                className={classNameOverlayWrapper}\n                ref={overlayWrapperRef}\n                style={overlayWrapperTopPosition ? { top: `${overlayWrapperTopPosition}px` } : undefined}\n            >\n                <Overlay\n                    onClose={handleClose}\n                    onClosing={handleClosing}\n                    onOpen={handleOpen}\n                    opened={opened}\n                    setOpened={setOpened}\n                    {...OverlayBaseProps}\n                    className={styles.topOverlay}\n                    direction={EOverlayDirection.TOP}\n                >\n                    {renderOverlay}\n                </Overlay>\n            </div>\n        </FocusTrapExtended>\n    );\n};\n"],"names":["opened","closing"],"mappings":";;;;;;;;;;;;;;;;;;;;AAcO,MAAM,aAAyC,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA,QAAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AAEF,QAAM,CAACC,UAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,CAAC,2BAA2B,4BAA4B,IAAI,SAA0B,CAAC;AAE7F,QAAM,aAAa,OAAOD,OAAM;AAEhC,QAAM,oBAAoB,OAA8B,IAAI;AAG5D,QAAM,oBAAoB,MAAM;AAE5B,QAAI,kBAAkB,SAAS;AAE3B,YAAM,sBACF,iBAAiB,kBAAkB,OAAO,EAAE,iBAAiB,uBAAuB,KAAK;AAE7F,YAAM,WAAW,kBAAkB,QAAQ,sBAAA;AAE3C,UAAI,SAAS,MAAM,GAAG;AAClB;AAAA,UACI,CAAC,kCACG,SAAS,+BAAyC,EAAE,IACpD,KAAK,IAAI,SAAS,GAAG,IACrB,SAAS,qBAAqB,EAAE;AAAA,QAAA;AAAA,MAE5C,OAAO;AACH;AAAA;AAAA,UAEI,CAAC,kCACG,SAAS,+BAAyC,EAAE,IACpD,SAAS,MACT,SAAS,qBAAqB,EAAE;AAAA,QAAA;AAAA,MAE5C;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,aAAa,MAAM;AACrB,sBAAA;AACA,uBAAmB,IAAI;AACvB;AAAA,EACJ;AAEA,YAAU,MAAM;AAEZ,QAAI,WAAW,WAAW,CAACA,SAAQ;AAC/B,iBAAW,IAAI;AAAA,IAGnB,WAAW,CAAC,WAAW,WAAWA,SAAQ;AACtC,wBAAA;AAAA,IACJ;AAEA,eAAW,UAAUA;AAAA,EACzB,GAAG,CAACA,OAAM,CAAC;AAEX,QAAM,cAAc,MAAM;AACtB,eAAW,KAAK;AAChB,iCAA6B,CAAC;AAC9B;AAAA,EACJ;AAEA,QAAM,gBAAgB,MAAM,mBAAmB,KAAK;AAEpD,QAAM,gBAAgB,CAAC,iBACnB,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,QAAQ,MAAR,EAAa,QAAQ,aAAa,QAAQ,WAAW,OAAO,gBAAgB;AAAA,IAC7E,oBAAC,QAAQ,OAAR,EAAc,WAAW,OAAO,iBAAkB,GAAG,cACjD,SAAA,CACL;AAAA,EAAA,GACJ;AAGJ,QAAM,YAAY,MAAM;AAAA,EAAC;AAEzB,QAAM,0BAA0B,KAAK,OAAO,mBAAmB;AAAA,IAC3D,CAAC,OAAO,OAAO,GAAGC;AAAA,IAClB,CAAC,OAAO,MAAM,GAAGD;AAAA,EAAA,CACpB;AAED,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,QAAQ;AAAA,MACP,GAAG;AAAA,MACJ,kBAAkB;AAAA,QACd,eAAe;AAAA,QACf,GAAG,iDAAgB;AAAA,MAAA;AAAA,MAGvB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW;AAAA,UACX,KAAK;AAAA,UACL,OAAO,4BAA4B,EAAE,KAAK,GAAG,yBAAyB,SAAS;AAAA,UAE/E,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,SAAS;AAAA,cACT,WAAW;AAAA,cACX,QAAQ;AAAA,cACR,QAAAA;AAAA,cACA;AAAA,cACC,GAAG;AAAA,cACJ,WAAW,OAAO;AAAA,cAClB,WAAW,kBAAkB;AAAA,cAE5B,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"TopOverlay.js","sources":["../../../src/components/TopOverlay/TopOverlay.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { FocusTrapExtended, IFocusTrapExtendedProps } from \"../FocusTrapExtended\";\nimport { Overlay, IOverlayProps } from \"../Overlay/Overlay\";\nimport { EOverlayDirection, IOverlayChildrenProvideProps } from \"../Overlay/OverlayBase\";\nimport { getLightBoxScreenTop, getNextTopPosition } from \"./utils\";\nimport styles from \"./styles/TopOverlay.module.less\";\n\n/** Свойства компонента TopOverlay. */\nexport interface ITopOverlayProps\n    extends\n        Pick<IOverlayProps, \"opened\" | \"onOpen\" | \"onClose\">,\n        Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"onClose\"> {\n    /** Содержимое верхней панели. */\n    children?: React.ReactNode;\n    /** Свойства компонента FocusTrapExtended. */\n    focusTrapProps?: IFocusTrapExtendedProps;\n}\n\n/** Inline-стиль обёртки: рассчитанная позиция уходит в runtime-переменную, а не в свойство top. */\ninterface ITopOverlayWrapperStyle extends React.CSSProperties {\n    \"--triplex-next-runtime-TopOverlay-Top\"?: string;\n}\n\n// Overlay требует setOpened, но TopOverlay полностью управляется свойством opened и наружу состояние не поднимает.\nconst noopSetOpened = () => {};\n\n/**\n * Верхняя панель поверх контента LightBox: затемняющая маска на всю ширину экрана и выезжающая сверху панель.\n * Открытием управляет свойство `opened`, на время открытия фокус удерживается внутри панели.\n */\nexport const TopOverlay = React.forwardRef<HTMLDivElement, ITopOverlayProps>(\n    ({ children, className, focusTrapProps, opened, onClose, onOpen, style, ...htmlDivAttributes }, ref) => {\n        // Флаг, в текущий момент оверлей закрывается.\n        const [closing, setClosing] = useState(false);\n        // FocusTrap активен.\n        const [activeFocusTrap, setActiveFocusTrap] = useState(false);\n        // Позиция top обёртки оверлея, высчитывается исходя из scrollTop родителя. undefined — ещё не рассчитана.\n        const [overlayWrapperTopPosition, setOverlayWrapperTopPosition] = useState<number | undefined>(undefined);\n        // Предыдущее состояние открыт/закрыт.\n        const prevOpened = useRef(opened);\n        // Флаг первого рендера. Отличает открытие на маунте от открытия переходом.\n        const isFirstRender = useRef(true);\n        // Ref контейнера.\n        const overlayWrapperRef = useRef<HTMLDivElement | null>(null);\n\n        // Пересчет позиционирования оверлея. Бывает неверная позиция, например, при открытии во время скролла родителя.\n        const updateTopPosition = () => {\n            const overlayWrapper = overlayWrapperRef.current;\n\n            if (!overlayWrapper) {\n                return;\n            }\n\n            // Верхняя граница экрана LightBox.\n            const lightBoxScreenTop = getLightBoxScreenTop(overlayWrapper);\n            // Текущее положение оверлея во вьюпорте.\n            const { top } = overlayWrapper.getBoundingClientRect();\n\n            setOverlayWrapperTopPosition((topPosition) => getNextTopPosition(topPosition ?? 0, top, lightBoxScreenTop));\n        };\n\n        const handleOpen = () => {\n            // При открытии на маунте позиция не пересчитывается: лайтбокс в этот момент ещё не на своём месте\n            // (у него собственная анимация появления), а getBoundingClientRect учитывает transform родителей —\n            // измерение дало бы смещение в никуда. Позиция остаётся заданной стилями, коррекция применяется\n            // при следующем открытии переходом false → true.\n            if (!isFirstRender.current) {\n                updateTopPosition();\n            }\n\n            setActiveFocusTrap(true);\n            onOpen?.();\n        };\n\n        useEffect(() => {\n            isFirstRender.current = false;\n        }, []);\n\n        useEffect(() => {\n            // Флаг opened поменялся на false.\n            if (prevOpened.current && !opened) {\n                setClosing(true);\n\n                // Флаг opened поменялся на true.\n            } else if (!prevOpened.current && opened) {\n                updateTopPosition();\n            }\n\n            prevOpened.current = opened;\n        }, [opened]);\n\n        const handleClose = () => {\n            setClosing(false);\n            setOverlayWrapperTopPosition(undefined);\n            onClose?.();\n        };\n\n        const handleClosing = () => setActiveFocusTrap(false);\n\n        const setOverlayWrapperRef = (instance: HTMLDivElement | null) => {\n            overlayWrapperRef.current = instance;\n\n            if (typeof ref === \"function\") {\n                ref(instance);\n            } else if (ref) {\n                ref.current = instance;\n            }\n        };\n\n        const renderOverlay = (overlayProps: IOverlayChildrenProvideProps) => (\n            <>\n                <Overlay.Mask opened={overlayProps.opened} className={styles.topOverlayMask} />\n                <Overlay.Panel className={styles.topOverlayPanel} {...overlayProps}>\n                    {children}\n                </Overlay.Panel>\n            </>\n        );\n\n        // Рассчитанная позиция публикуется runtime-переменной, которую читает .topOverlayWrapper в LESS: inline\n        // styles в компонентах запрещены (docs/ai/codestyle.md). Ноль здесь такой же результат расчёта, как любой\n        // другой, поэтому признак «не рассчитано» — undefined, а не 0.\n        const wrapperStyle: ITopOverlayWrapperStyle | undefined =\n            overlayWrapperTopPosition === undefined\n                ? style\n                : { ...style, \"--triplex-next-runtime-TopOverlay-Top\": `${overlayWrapperTopPosition}px` };\n\n        const classNameOverlayWrapper = clsx(\n            styles.topOverlayWrapper,\n            {\n                [styles.closing]: closing,\n                [styles.opened]: opened,\n            },\n            className,\n        );\n\n        return (\n            <FocusTrapExtended\n                active={activeFocusTrap}\n                {...focusTrapProps}\n                focusTrapOptions={{\n                    preventScroll: true,\n                    ...focusTrapProps?.focusTrapOptions,\n                }}\n            >\n                <div\n                    className={classNameOverlayWrapper}\n                    {...htmlDivAttributes}\n                    style={wrapperStyle}\n                    ref={setOverlayWrapperRef}\n                >\n                    <Overlay\n                        onClose={handleClose}\n                        onClosing={handleClosing}\n                        onOpen={handleOpen}\n                        opened={opened}\n                        setOpened={noopSetOpened}\n                        className={styles.topOverlay}\n                        direction={EOverlayDirection.TOP}\n                    >\n                        {renderOverlay}\n                    </Overlay>\n                </div>\n            </FocusTrapExtended>\n        );\n    },\n);\n\nTopOverlay.displayName = \"TopOverlay\";\n"],"names":["React","opened","closing"],"mappings":"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"}

package/components/TopOverlay/utils.js

@@ -0,0 +1,8 @@
+const LIGHT_BOX_SCREEN_TOP_CSS_VAR = "--lightBox-screen-top";
+const getLightBoxScreenTop = (element) => parseInt(getComputedStyle(element).getPropertyValue(LIGHT_BOX_SCREEN_TOP_CSS_VAR) || "0", 10);
+const getNextTopPosition = (topPosition, elementTopPosition, lightBoxScreenTop) => Math.trunc(topPosition) - elementTopPosition + lightBoxScreenTop;
+export {
+  getLightBoxScreenTop,
+  getNextTopPosition
+};
+//# sourceMappingURL=utils.js.map

package/components/TopOverlay/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/TopOverlay/utils.ts"],"sourcesContent":["/** CSS-переменная LightBox с верхней границей его экрана. */\nconst LIGHT_BOX_SCREEN_TOP_CSS_VAR = \"--lightBox-screen-top\";\n\n/**\n * Читает верхнюю границу экрана LightBox из CSS-переменной элемента.\n * Возвращает 0, если переменная не задана (оверлей отрисован вне LightBox).\n */\nexport const getLightBoxScreenTop = (element: HTMLElement): number =>\n    parseInt(getComputedStyle(element).getPropertyValue(LIGHT_BOX_SCREEN_TOP_CSS_VAR) || \"0\", 10);\n\n/**\n * Вычисляет новую позицию top обёртки оверлея.\n *\n * Обёртка позиционируется относительно родителя, поэтому её реальное положение во вьюпорте (`elementTopPosition`)\n * зависит от прокрутки родителя. Смещение считается инкрементально: к текущему `topPosition` добавляется разница\n * между желаемой верхней границей экрана LightBox и фактическим положением обёртки.\n *\n * Накопленное смещение усекается до целого перед каждым пересчётом — так же, как это делал `parseInt` до вынесения\n * формулы в отдельную функцию. Пересчёт при открытии происходит дважды, и без усечения второй проход дал бы\n * субпиксельный `top`, то есть сдвиг панели относительно прежнего поведения.\n *\n * @param topPosition Текущее смещение обёртки, px.\n * @param elementTopPosition Фактическая верхняя граница обёртки во вьюпорте (`getBoundingClientRect().top`), px.\n * @param lightBoxScreenTop Верхняя граница экрана LightBox, px.\n */\nexport const getNextTopPosition = (\n    topPosition: number,\n    elementTopPosition: number,\n    lightBoxScreenTop: number,\n): number => Math.trunc(topPosition) - elementTopPosition + lightBoxScreenTop;\n"],"names":[],"mappings":"AACA,MAAM,+BAA+B;AAM9B,MAAM,uBAAuB,CAAC,YACjC,SAAS,iBAAiB,OAAO,EAAE,iBAAiB,4BAA4B,KAAK,KAAK,EAAE;AAiBzF,MAAM,qBAAqB,CAC9B,aACA,oBACA,sBACS,KAAK,MAAM,WAAW,IAAI,qBAAqB;"}

package/components/TreeView/TreeView.js

@@ -10,13 +10,21 @@ import { TreeViewAbstractNode } from "./TreeViewAbstractNode.js";
 import { TreeViewNode } from "./components/TreeViewNode.js";
 import { TreeViewGroup } from "./components/TreeViewGroup.js";
 import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
-import { s as styles } from "../../chunks/TreeView.module-C5KrbQR8.js";
+import { s as styles } from "../../chunks/TreeView.module-CmItPF1_.js";
 const rootNodeId = "rootNode";
 class TreeView extends React__default.Component {
   constructor(props) {
     super(props);
     __publicField(this, "abstractRootNode");
-    __publicField(this, "treeNode", null);
+    /** Глобальный слушатель keydown подписан. Он нужен только пока в дереве есть активная нода. */
+    __publicField(this, "keyDownListenerAttached", false);
+    /**
+     * Увеличивает счетчик обновлений абстрактного дерева.
+     * Значение попадает в контекст и сигнализирует дочерним нодам, что мутируемое дерево изменилось.
+     */
+    __publicField(this, "incrementUpdateCount", () => {
+      this.setState(({ updateCount }) => ({ updateCount: updateCount + 1 }));
+    });
     /**
      * Обработка изменения контекста.
      * Установка tabIndex={0} для первой ноды, и tabIndex={-1} для остальных.
@@ -34,34 +42,54 @@ class TreeView extends React__default.Component {
         }
       });
       if (isContextChanged) {
-        this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));
+        this.incrementUpdateCount();
       }
     });
     /** Добавляет ноду в родительскую ноду. */
     __publicField(this, "registerNode", (node, parentNode, prevNode, nextNode) => {
       parentNode.addChild(node, prevNode, nextNode);
       this.updateTabIndexNodes();
-      this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));
+      this.incrementUpdateCount();
     });
     /** Удаляет ноду из родительской ноды. */
     __publicField(this, "removeNode", (node) => {
       var _a;
       (_a = node.getParent()) == null ? void 0 : _a.removeChild(node);
       this.updateTabIndexNodes();
+      this.syncKeyDownListener();
+      this.incrementUpdateCount();
     });
     /** Установка флага активности ноды. */
     __publicField(this, "setActiveNode", (node, active) => {
       TreeViewAbstractNodeUtils.setActiveNode(node, this.abstractRootNode, active);
-      this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));
+      this.syncKeyDownListener();
+      this.incrementUpdateCount();
+    });
+    /**
+     * Подписывает и отписывает глобальный слушатель keydown по наличию активной ноды.
+     * Пока активной ноды нет, дерево не обрабатывает стрелки и не отменяет скролл страницы.
+     */
+    __publicField(this, "syncKeyDownListener", () => {
+      const hasActiveNode = Boolean(TreeViewAbstractNodeUtils.getActiveNode(this.abstractRootNode));
+      if (hasActiveNode && !this.keyDownListenerAttached) {
+        window.addEventListener("keydown", this.handleKeyDown);
+        this.keyDownListenerAttached = true;
+      } else if (!hasActiveNode && this.keyDownListenerAttached) {
+        this.detachKeyDownListener();
+      }
+    });
+    /** Отписывает глобальный слушатель keydown. */
+    __publicField(this, "detachKeyDownListener", () => {
+      window.removeEventListener("keydown", this.handleKeyDown);
+      this.keyDownListenerAttached = false;
     });
     /** Установка флага opened ноды. */
     __publicField(this, "setOpenedNode", (node, opened) => {
       node.setOpened(opened);
-      this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));
+      this.incrementUpdateCount();
     });
     /** Возвращает AbstractNode по id. */
     __publicField(this, "getNode", (nodeId) => TreeViewAbstractNodeUtils.getNode(nodeId, this.abstractRootNode));
-    __publicField(this, "setTreeDOMNode", (DOMNode) => this.treeNode = DOMNode);
     /** Обработка нажатия на клавиш для навигации с клавиатуры. */
     __publicField(this, "handleKeyDown", (event) => {
       if (!TreeViewAbstractNodeUtils.getActiveNode(this.abstractRootNode)) {
@@ -69,24 +97,21 @@ class TreeView extends React__default.Component {
       }
       if (EVENT_KEY_CODES.ARROW_DOWN === event.keyCode) {
         TreeViewAbstractNodeUtils.setActiveNextNode(this.abstractRootNode);
-        event.preventDefault();
-        this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));
       } else if (EVENT_KEY_CODES.ARROW_UP === event.keyCode) {
         TreeViewAbstractNodeUtils.setActivePrevNode(this.abstractRootNode);
-        event.preventDefault();
-        this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));
+      } else {
+        return;
       }
+      event.preventDefault();
+      this.incrementUpdateCount();
     });
     this.abstractRootNode = new TreeViewAbstractNode({ id: rootNodeId });
     this.state = {
       updateCount: 0
     };
   }
-  componentDidMount() {
-    window.addEventListener("keydown", this.handleKeyDown);
-  }
   componentWillUnmount() {
-    window.removeEventListener("keydown", this.handleKeyDown);
+    this.detachKeyDownListener();
   }
   render() {
     const { children, className, ...props } = this.props;
@@ -104,7 +129,7 @@ class TreeView extends React__default.Component {
           setOpenedNode: this.setOpenedNode,
           updateCount
         },
-        children: /* @__PURE__ */ jsx("ul", { className: clsx(styles.treeView, className), role: "tree", ...props, ref: this.setTreeDOMNode, children })
+        children: /* @__PURE__ */ jsx("ul", { className: clsx(styles.treeView, className), ...props, role: "tree", children })
       }
     );
   }

package/components/TreeView/TreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.js","sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["import { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport React from \"react\";\nimport { TreeViewAbstractNodeUtils } from \"./TreeViewAbstractNodeUtils\";\nimport {\n    TreeViewContext,\n    TTreeViewContextGetNode,\n    TTreeViewContextRegisterNode,\n    TTreeViewContextRemoveNode,\n    TTreeViewContextSetActiveNode,\n    TTreeViewContextSetOpenedNode,\n} from \"./TreeViewContext\";\nimport { TreeViewAbstractNode } from \"./TreeViewAbstractNode\";\nimport { TreeViewNode } from \"./components/TreeViewNode\";\nimport { TreeViewGroup } from \"./components/TreeViewGroup\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/TreeView.module.less\";\n\n/** Свойства TreeView. */\nexport interface ITreeViewProps extends React.HTMLAttributes<HTMLUListElement> {\n    children: React.ReactNode;\n}\n\n/** Состояние TreeView. */\ninterface ITreeViewState {\n    /**\n     * Число обновлений абстрактного дерева.\n     * Используется для индикации изменения дереве т.к. изменение мутируемого объекта rootNode не вызывает триггер изменения контекста.\n     */\n    updateCount: number;\n}\n\n/** Идентификатор первой ноды дерева. */\nconst rootNodeId = \"rootNode\";\n\n/**\n * Базовый компонент визуального дерева.\n * Добавляет нужную семантическую разметку.\n * Создает абстрактное дерево на основе текущего.\n * Устанавливает контекст для дочерних нод.\n * Реализует навигацию по дереву.\n *\n * Accessibility требования:\n * https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html\n */\nexport class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {\n    public static displayName = \"TreeView\";\n    public static Node = TreeViewNode;\n    public static Group = TreeViewGroup;\n\n    private readonly abstractRootNode: TreeViewAbstractNode;\n    private treeNode: HTMLUListElement | null = null;\n\n    constructor(props: ITreeViewProps) {\n        super(props);\n\n        this.abstractRootNode = new TreeViewAbstractNode({ id: rootNodeId });\n\n        this.state = {\n            updateCount: 0,\n        };\n    }\n\n    public componentDidMount(): void {\n        window.addEventListener(\"keydown\", this.handleKeyDown);\n    }\n\n    public componentWillUnmount(): void {\n        window.removeEventListener(\"keydown\", this.handleKeyDown);\n    }\n\n    public render(): JSX.Element {\n        const { children, className, ...props } = this.props;\n        const { updateCount } = this.state;\n\n        return (\n            <TreeViewContext.Provider\n                value={{\n                    getNode: this.getNode,\n                    parentNode: this.abstractRootNode,\n                    registerNode: this.registerNode,\n                    removeNode: this.removeNode,\n                    rootNode: this.abstractRootNode,\n                    setActiveNode: this.setActiveNode,\n                    setOpenedNode: this.setOpenedNode,\n                    updateCount,\n                }}\n            >\n                <ul className={clsx(styles.treeView, className)} role=\"tree\" {...props} ref={this.setTreeDOMNode}>\n                    {children}\n                </ul>\n            </TreeViewContext.Provider>\n        );\n    }\n\n    /**\n     * Обработка изменения контекста.\n     * Установка tabIndex={0} для первой ноды, и tabIndex={-1} для остальных.\n     */\n    private updateTabIndexNodes = () => {\n        // Ноды первого уровня вложенности.\n        const firstLevelNodes = this.abstractRootNode.getChildren();\n        let isContextChanged = false;\n\n        firstLevelNodes.forEach((node, index) => {\n            if (index === 0 && node.getTabIndex() !== 0) {\n                node.setTabIndex(0);\n                isContextChanged = true;\n            } else if (index !== 0 && node.getTabIndex() === 0) {\n                node.setTabIndex(-1);\n                isContextChanged = true;\n            }\n        });\n\n        if (isContextChanged) {\n            this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));\n        }\n    };\n\n    /** Добавляет ноду в родительскую ноду. */\n    private registerNode: TTreeViewContextRegisterNode = (node, parentNode, prevNode, nextNode) => {\n        parentNode.addChild(node, prevNode, nextNode);\n        this.updateTabIndexNodes();\n        this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));\n    };\n\n    /** Удаляет ноду из родительской ноды. */\n    private removeNode: TTreeViewContextRemoveNode = (node) => {\n        node.getParent()?.removeChild(node);\n        this.updateTabIndexNodes();\n    };\n\n    /** Установка флага активности ноды. */\n    private setActiveNode: TTreeViewContextSetActiveNode = (node, active) => {\n        TreeViewAbstractNodeUtils.setActiveNode(node, this.abstractRootNode, active);\n        this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));\n    };\n\n    /** Установка флага opened ноды. */\n    private setOpenedNode: TTreeViewContextSetOpenedNode = (node, opened) => {\n        node.setOpened(opened);\n        this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));\n    };\n\n    /** Возвращает AbstractNode по id. */\n    private getNode: TTreeViewContextGetNode = (nodeId) =>\n        TreeViewAbstractNodeUtils.getNode(nodeId, this.abstractRootNode);\n\n    private setTreeDOMNode = (DOMNode: HTMLUListElement) => (this.treeNode = DOMNode);\n\n    /** Обработка нажатия на клавиш для навигации с клавиатуры. */\n    private handleKeyDown = (event: KeyboardEvent) => {\n        // Перемещение с клавиатуры активно, когда есть активная нода.\n        if (!TreeViewAbstractNodeUtils.getActiveNode(this.abstractRootNode)) {\n            return;\n        }\n\n        if (EVENT_KEY_CODES.ARROW_DOWN === event.keyCode) {\n            // Устанавливает активность следующей ноды.\n            TreeViewAbstractNodeUtils.setActiveNextNode(this.abstractRootNode);\n            // Предотвращает скролл страницы.\n            event.preventDefault();\n            this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));\n        } else if (EVENT_KEY_CODES.ARROW_UP === event.keyCode) {\n            // Устанавливает активность предыдущей ноды.\n            TreeViewAbstractNodeUtils.setActivePrevNode(this.abstractRootNode);\n            // Предотвращает скролл страницы.\n            event.preventDefault();\n            this.setState(({ updateCount: prevCount }) => ({ updateCount: prevCount++ }));\n        }\n    };\n}\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"TreeView.js","sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["import { EVENT_KEY_CODES } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport React from \"react\";\nimport { TreeViewAbstractNodeUtils } from \"./TreeViewAbstractNodeUtils\";\nimport {\n    TreeViewContext,\n    TTreeViewContextGetNode,\n    TTreeViewContextRegisterNode,\n    TTreeViewContextRemoveNode,\n    TTreeViewContextSetActiveNode,\n    TTreeViewContextSetOpenedNode,\n} from \"./TreeViewContext\";\nimport { TreeViewAbstractNode } from \"./TreeViewAbstractNode\";\nimport { TreeViewNode } from \"./components/TreeViewNode\";\nimport { TreeViewGroup } from \"./components/TreeViewGroup\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/TreeView.module.less\";\n\n/** Свойства TreeView. */\nexport interface ITreeViewProps extends React.HTMLAttributes<HTMLUListElement> {\n    /** Ноды дерева — TreeView.Node (напрямую или через компоненты-обёртки над ним). */\n    children: React.ReactNode;\n}\n\n/** Состояние TreeView. */\ninterface ITreeViewState {\n    /**\n     * Число обновлений абстрактного дерева.\n     * Используется для индикации изменения дерева т.к. изменение мутируемого объекта rootNode не вызывает триггер изменения контекста.\n     */\n    updateCount: number;\n}\n\n/** Идентификатор первой ноды дерева. */\nconst rootNodeId = \"rootNode\";\n\n/**\n * Базовый компонент визуального дерева.\n * Добавляет нужную семантическую разметку.\n * Создает абстрактное дерево на основе текущего.\n * Устанавливает контекст для дочерних нод.\n * Реализует навигацию по дереву.\n *\n * Accessibility требования:\n * https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html\n */\nexport class TreeView extends React.Component<ITreeViewProps, ITreeViewState> {\n    public static displayName = \"TreeView\";\n    public static Node = TreeViewNode;\n    public static Group = TreeViewGroup;\n\n    private readonly abstractRootNode: TreeViewAbstractNode;\n    /** Глобальный слушатель keydown подписан. Он нужен только пока в дереве есть активная нода. */\n    private keyDownListenerAttached = false;\n\n    constructor(props: ITreeViewProps) {\n        super(props);\n\n        this.abstractRootNode = new TreeViewAbstractNode({ id: rootNodeId });\n\n        this.state = {\n            updateCount: 0,\n        };\n    }\n\n    public componentWillUnmount(): void {\n        this.detachKeyDownListener();\n    }\n\n    public render(): JSX.Element {\n        const { children, className, ...props } = this.props;\n        const { updateCount } = this.state;\n\n        return (\n            <TreeViewContext.Provider\n                value={{\n                    getNode: this.getNode,\n                    parentNode: this.abstractRootNode,\n                    registerNode: this.registerNode,\n                    removeNode: this.removeNode,\n                    rootNode: this.abstractRootNode,\n                    setActiveNode: this.setActiveNode,\n                    setOpenedNode: this.setOpenedNode,\n                    updateCount,\n                }}\n            >\n                {/* role после {...props}: семантика дерева - контракт компонента, потребитель ее не переопределяет. */}\n                <ul className={clsx(styles.treeView, className)} {...props} role=\"tree\">\n                    {children}\n                </ul>\n            </TreeViewContext.Provider>\n        );\n    }\n\n    /**\n     * Увеличивает счетчик обновлений абстрактного дерева.\n     * Значение попадает в контекст и сигнализирует дочерним нодам, что мутируемое дерево изменилось.\n     */\n    private incrementUpdateCount = () => {\n        this.setState(({ updateCount }) => ({ updateCount: updateCount + 1 }));\n    };\n\n    /**\n     * Обработка изменения контекста.\n     * Установка tabIndex={0} для первой ноды, и tabIndex={-1} для остальных.\n     */\n    private updateTabIndexNodes = () => {\n        // Ноды первого уровня вложенности.\n        const firstLevelNodes = this.abstractRootNode.getChildren();\n        let isContextChanged = false;\n\n        firstLevelNodes.forEach((node, index) => {\n            if (index === 0 && node.getTabIndex() !== 0) {\n                node.setTabIndex(0);\n                isContextChanged = true;\n            } else if (index !== 0 && node.getTabIndex() === 0) {\n                node.setTabIndex(-1);\n                isContextChanged = true;\n            }\n        });\n\n        if (isContextChanged) {\n            this.incrementUpdateCount();\n        }\n    };\n\n    /** Добавляет ноду в родительскую ноду. */\n    private registerNode: TTreeViewContextRegisterNode = (node, parentNode, prevNode, nextNode) => {\n        parentNode.addChild(node, prevNode, nextNode);\n        this.updateTabIndexNodes();\n        this.incrementUpdateCount();\n    };\n\n    /** Удаляет ноду из родительской ноды. */\n    private removeNode: TTreeViewContextRemoveNode = (node) => {\n        node.getParent()?.removeChild(node);\n        this.updateTabIndexNodes();\n        // Удалена могла быть активная нода - тогда слушатель стрелок больше не нужен.\n        this.syncKeyDownListener();\n        // Соседние ноды должны перерисоваться: после удаления у них могли измениться hasChildNodes и isLastNode.\n        this.incrementUpdateCount();\n    };\n\n    /** Установка флага активности ноды. */\n    private setActiveNode: TTreeViewContextSetActiveNode = (node, active) => {\n        TreeViewAbstractNodeUtils.setActiveNode(node, this.abstractRootNode, active);\n        this.syncKeyDownListener();\n        this.incrementUpdateCount();\n    };\n\n    /**\n     * Подписывает и отписывает глобальный слушатель keydown по наличию активной ноды.\n     * Пока активной ноды нет, дерево не обрабатывает стрелки и не отменяет скролл страницы.\n     */\n    private syncKeyDownListener = () => {\n        const hasActiveNode = Boolean(TreeViewAbstractNodeUtils.getActiveNode(this.abstractRootNode));\n\n        if (hasActiveNode && !this.keyDownListenerAttached) {\n            window.addEventListener(\"keydown\", this.handleKeyDown);\n            this.keyDownListenerAttached = true;\n        } else if (!hasActiveNode && this.keyDownListenerAttached) {\n            this.detachKeyDownListener();\n        }\n    };\n\n    /** Отписывает глобальный слушатель keydown. */\n    private detachKeyDownListener = () => {\n        window.removeEventListener(\"keydown\", this.handleKeyDown);\n        this.keyDownListenerAttached = false;\n    };\n\n    /** Установка флага opened ноды. */\n    private setOpenedNode: TTreeViewContextSetOpenedNode = (node, opened) => {\n        node.setOpened(opened);\n        this.incrementUpdateCount();\n    };\n\n    /** Возвращает AbstractNode по id. */\n    private getNode: TTreeViewContextGetNode = (nodeId) =>\n        TreeViewAbstractNodeUtils.getNode(nodeId, this.abstractRootNode);\n\n    /** Обработка нажатия на клавиш для навигации с клавиатуры. */\n    private handleKeyDown = (event: KeyboardEvent) => {\n        // Перемещение с клавиатуры активно, когда есть активная нода.\n        if (!TreeViewAbstractNodeUtils.getActiveNode(this.abstractRootNode)) {\n            return;\n        }\n\n        if (EVENT_KEY_CODES.ARROW_DOWN === event.keyCode) {\n            // Устанавливает активность следующей ноды.\n            TreeViewAbstractNodeUtils.setActiveNextNode(this.abstractRootNode);\n        } else if (EVENT_KEY_CODES.ARROW_UP === event.keyCode) {\n            // Устанавливает активность предыдущей ноды.\n            TreeViewAbstractNodeUtils.setActivePrevNode(this.abstractRootNode);\n        } else {\n            return;\n        }\n\n        // Предотвращает скролл страницы.\n        event.preventDefault();\n        this.incrementUpdateCount();\n    };\n}\n"],"names":["React"],"mappings":"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"}

package/components/TreeView/TreeViewAbstractNodeUtils.js

@@ -1,4 +1,19 @@
 import { traverseAbstractTree } from "../AbstractTree/AbstractTreeNode.js";
+const getLastChildNode = (node) => {
+  const children = node.getChildren();
+  return children[children.length - 1];
+};
+const getDeepestVisibleLastChildNode = (node) => {
+  let lastNode = node;
+  while (lastNode.getOpened() && lastNode.getChildren().length) {
+    lastNode = getLastChildNode(lastNode);
+  }
+  return lastNode;
+};
+const getNodeIndexInParent = (node, parentNodeChildren) => {
+  const index = parentNodeChildren.findIndex((n) => n.getId() === node.getId());
+  return index === -1 ? 0 : index;
+};
 const TreeViewAbstractNodeUtils = {
   getActiveNode: (node) => {
     let activeNode;
@@ -43,17 +58,11 @@ const TreeViewAbstractNodeUtils = {
       return void 0;
     }
     const parentNodeChildren = parentNode.getChildren();
-    let currentActiveNodeIndex = 0;
-    parentNodeChildren.some((n, index) => {
-      if (n.getId() === node.getId()) {
-        currentActiveNodeIndex = index;
-        return true;
-      }
-    });
-    if (currentActiveNodeIndex === parentNodeChildren.length - 1) {
+    const currentNodeIndex = getNodeIndexInParent(node, parentNodeChildren);
+    if (currentNodeIndex === parentNodeChildren.length - 1) {
       return void 0;
     }
-    return parentNodeChildren[currentActiveNodeIndex + 1];
+    return parentNodeChildren[currentNodeIndex + 1];
   },
   getNode: (nodeId, rootNode) => {
     let result;
@@ -73,23 +82,10 @@ const TreeViewAbstractNodeUtils = {
       if (parentNode.getParent()) {
         return parentNode;
       } else {
-        let lastChild = parentNode.getChildren()[parentNode.getChildren().length - 1];
-        while (lastChild.getChildren().length > 0) {
-          lastChild = lastChild.getChildren()[lastChild.getChildren().length - 1];
-        }
-        return lastChild;
+        return getDeepestVisibleLastChildNode(getLastChildNode(parentNode));
       }
     }
-    let prevNode = prevSiblingNode;
-    while (true) {
-      const prevNodeChildren = prevNode.getChildren();
-      if (prevNode.getOpened() && prevNodeChildren.length) {
-        prevNode = prevNode.getChildren()[prevNode.getChildren().length - 1];
-      } else {
-        break;
-      }
-    }
-    return prevNode;
+    return getDeepestVisibleLastChildNode(prevSiblingNode);
   },
   getPrevSiblingNode: (node) => {
     const parentNode = node.getParent();
@@ -97,22 +93,16 @@ const TreeViewAbstractNodeUtils = {
       return void 0;
     }
     const parentNodeChildren = parentNode.getChildren();
-    let currentActiveNodeIndex = 0;
-    parentNodeChildren.some((n, index) => {
-      if (n.getId() === node.getId()) {
-        currentActiveNodeIndex = index;
-        return true;
-      }
-    });
-    if (currentActiveNodeIndex === 0) {
+    const currentNodeIndex = getNodeIndexInParent(node, parentNodeChildren);
+    if (currentNodeIndex === 0) {
       return void 0;
     }
-    return parentNodeChildren[currentActiveNodeIndex - 1];
+    return parentNodeChildren[currentNodeIndex - 1];
   },
   isLastNode: (node) => {
     const parentNode = node.getParent();
     if (parentNode) {
-      if (parentNode.getChildren()[parentNode.getChildren().length - 1] == node) {
+      if (getLastChildNode(parentNode) === node) {
         return TreeViewAbstractNodeUtils.isLastNode(parentNode);
       }
     } else {
@@ -138,6 +128,12 @@ const TreeViewAbstractNodeUtils = {
       });
     } else {
       node.setActive(false);
+      traverseAbstractTree(rootNode, (n) => {
+        if (n.getActive()) {
+          n.setActive(false);
+        }
+        return true;
+      });
     }
   },
   setActivePrevNode: (rootNode) => {

package/components/TreeView/TreeViewAbstractNodeUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewAbstractNodeUtils.js","sources":["../../../src/components/TreeView/TreeViewAbstractNodeUtils.ts"],"sourcesContent":["import { traverseAbstractTree } from \"../AbstractTree/AbstractTreeNode\";\nimport { TreeViewAbstractNode } from \"./TreeViewAbstractNode\";\n\n/** Утилиты для работы с AbstractNode. */\ninterface ITreeViewAbstractNodeUtils {\n    // Возвращает активную ноду в случае ее наличия.\n    getActiveNode: (node: TreeViewAbstractNode) => TreeViewAbstractNode | undefined;\n    // Возвращает следующую ноду текущего уровня. Если prevNode имеет дочерние ноды, и prevNode.getOpened() === true будет возвращена первая дочерняя нода. Если prevNode - последняя нода текущего уровня, будет возвращена следующая нода\n    // верхнего уровня. Если верхний уровень - rootNode, будет возвращена первая дочерняя нода rootNode.\n    getNextNode: (prevNode: TreeViewAbstractNode) => TreeViewAbstractNode;\n    // Возвращает следующую ноду ткущего уровня. Если prevNode - последняя нода, будет возвращено undefined.\n    getNextSiblingNode: (prevNode: TreeViewAbstractNode) => TreeViewAbstractNode | undefined;\n    // Возвращает AbstractNode по id.\n    getNode: (nodeId: string, rootNode: TreeViewAbstractNode) => TreeViewAbstractNode | undefined;\n    // Возвращает предыдущую ноду текущего уровня дерева. Если предыдущая нода имеет детей и она раскрыта, будет возвращена последняя ее дочерняя нода. Если nextNode - первая нода, будет возвращена родительская нода. Если верхний\n    // уровень - rootNode, будет возвращена последняя дочерняя нода rootNode.\n    getPrevNode: (nextNode: TreeViewAbstractNode) => TreeViewAbstractNode;\n    // Возвращает предыдущую ноду текущего уровня дерева. В случае если nextNode - первая нода, будет возвращено undefined.\n    getPrevSiblingNode: (nextNode: TreeViewAbstractNode) => TreeViewAbstractNode | undefined;\n    // Возвращает true если нода - последняя в дереве.\n    isLastNode: (node: TreeViewAbstractNode) => boolean;\n    // Устанавливает флаг активности AbstractNode для следующей ноды дерева. Если нода раскрыта, будет активна первая дочерняя нода, если нода закрыта - будет активирована следующая нода этого же уровня.\n    setActiveNextNode: (rootNode: TreeViewAbstractNode) => void;\n    // Устанавливает флаг активности AbstractNode.\n    setActiveNode: (node: TreeViewAbstractNode, rootNode: TreeViewAbstractNode, isActive: boolean) => void;\n    // Устанавливает флаг активности AbstractNode для предыдущей ноды дерева.\n    setActivePrevNode: (rootNode: TreeViewAbstractNode) => void;\n}\n\n/** Утилиты для работы с AbstractNode. */\nexport const TreeViewAbstractNodeUtils: ITreeViewAbstractNodeUtils = {\n    getActiveNode: (node) => {\n        let activeNode: TreeViewAbstractNode | undefined;\n\n        traverseAbstractTree(node, (n) => {\n            if (n.getActive()) {\n                activeNode = n;\n                // Прервать обход дерева.\n                return false;\n            }\n\n            // Продолжить обход дерева.\n            return true;\n        });\n\n        return activeNode;\n    },\n    getNextNode: (node) => {\n        const childrenNodes = node.getChildren();\n        // Нода раскрыта и имеются дочерние ноды: следующей нодой будет первая дочерняя нода.\n        if (node.getOpened() && childrenNodes.length) {\n            return childrenNodes[0];\n        }\n\n        const nextSiblingNode = TreeViewAbstractNodeUtils.getNextSiblingNode(node);\n        // Найдена следующая нода текущего уровня вложенности.\n        if (nextSiblingNode) {\n            return nextSiblingNode;\n        }\n\n        let nextNode = node;\n\n        while (true) {\n            // as TreeViewAbstractNode потому что .getParent() может вернуть null только для rootNode, prevNode не может быть rootNode.\n            const parentNode = nextNode.getParent() as TreeViewAbstractNode;\n\n            if (parentNode.getParent()) {\n                const nextSiblingParenNode = TreeViewAbstractNodeUtils.getNextSiblingNode(parentNode);\n                // Найдена следующая нода верхнего уровня вложенности.\n                if (nextSiblingParenNode) {\n                    nextNode = nextSiblingParenNode;\n                    break;\n                }\n            }\n            // Если parentNode является rootNode.\n            else {\n                // Следующая нода - первая нода дерева.\n                nextNode = parentNode.getChildren()[0];\n                break;\n            }\n\n            nextNode = parentNode;\n        }\n\n        return nextNode;\n    },\n    getNextSiblingNode: (node) => {\n        const parentNode = node.getParent();\n        // node является rootNode.\n        if (!parentNode) {\n            return undefined;\n        }\n\n        const parentNodeChildren = parentNode.getChildren();\n        // Индекс текущей активной ноды в parentNodeChildren.\n        let currentActiveNodeIndex = 0;\n        // Поиск индекса текущей активной ноды в parentNodeChildren.\n        parentNodeChildren.some((n, index) => {\n            if (n.getId() === node.getId()) {\n                currentActiveNodeIndex = index;\n                return true;\n            }\n        });\n\n        // Текущая активная нода - последняя.\n        if (currentActiveNodeIndex === parentNodeChildren.length - 1) {\n            return undefined;\n        }\n\n        // Возвращается следующая нода.\n        return parentNodeChildren[currentActiveNodeIndex + 1];\n    },\n    getNode: (nodeId, rootNode) => {\n        let result;\n        traverseAbstractTree(rootNode, (node) => {\n            if (node.getId() === nodeId) {\n                result = node;\n                // Прервать обход дерева.\n                return false;\n            }\n            // Продолжить обход дерева.\n            return true;\n        });\n\n        return result;\n    },\n    getPrevNode: (node) => {\n        const prevSiblingNode = TreeViewAbstractNodeUtils.getPrevSiblingNode(node);\n\n        // Предыдущая нода текущего уровня вложенности не найдена.\n        if (!prevSiblingNode) {\n            // as TreeViewAbstractNode потому что .getParent() может вернуть null только для rootNode, nextNode не может быть rootNode.\n            const parentNode = node.getParent() as TreeViewAbstractNode;\n\n            if (parentNode.getParent()) {\n                return parentNode;\n            }\n            // Если patentNode является rootNode.\n            else {\n                let lastChild = parentNode.getChildren()[parentNode.getChildren().length - 1];\n\n                while (lastChild.getChildren().length > 0) {\n                    lastChild = lastChild.getChildren()[lastChild.getChildren().length - 1];\n                }\n                // Предыдущая нода - последняя нода дерева.\n                return lastChild;\n            }\n        }\n\n        let prevNode = prevSiblingNode;\n\n        while (true) {\n            const prevNodeChildren = prevNode.getChildren();\n            // Предыдущая нода раскрыта и имеет дочерние ноды. Предыдущей станет последняя ее дочерняя нода.\n            if (prevNode.getOpened() && prevNodeChildren.length) {\n                prevNode = prevNode.getChildren()[prevNode.getChildren().length - 1];\n            } else {\n                break;\n            }\n        }\n\n        return prevNode;\n    },\n    getPrevSiblingNode: (node) => {\n        const parentNode = node.getParent();\n        // node является rootNode.\n        if (!parentNode) {\n            return undefined;\n        }\n\n        const parentNodeChildren = parentNode.getChildren();\n        // Индекс текущей активной ноды в массиве parentNode.getChildren().\n        let currentActiveNodeIndex = 0;\n        // Поиск индекса текущей активной ноды в массиве parentNode.getChildren().\n        parentNodeChildren.some((n, index) => {\n            if (n.getId() === node.getId()) {\n                currentActiveNodeIndex = index;\n                return true;\n            }\n        });\n\n        // Текущая активная нода - первая.\n        if (currentActiveNodeIndex === 0) {\n            return undefined;\n        }\n\n        // Возвращается предыдущая нода.\n        return parentNodeChildren[currentActiveNodeIndex - 1];\n    },\n    isLastNode: (node) => {\n        const parentNode = node.getParent();\n\n        if (parentNode) {\n            // Если нода является последней на текущем уровне.\n            if (parentNode.getChildren()[parentNode.getChildren().length - 1] == node) {\n                return TreeViewAbstractNodeUtils.isLastNode(parentNode);\n            }\n        }\n        // node является rootNode.\n        else {\n            return true;\n        }\n\n        return false;\n    },\n    setActiveNextNode: (rootNode) => {\n        const activeNode = TreeViewAbstractNodeUtils.getActiveNode(rootNode);\n\n        if (activeNode) {\n            const nextNode = TreeViewAbstractNodeUtils.getNextNode(activeNode);\n\n            TreeViewAbstractNodeUtils.setActiveNode(nextNode, rootNode, true);\n        }\n    },\n    setActiveNode: (node, rootNode, isActive) => {\n        if (isActive) {\n            node.setActive(true);\n\n            traverseAbstractTree(rootNode, (n) => {\n                if (n.getActive() && n.getId() !== node.getId()) {\n                    // Сброс флага активности всех других нод, активная может быть только одна нода.\n                    n.setActive(false);\n                }\n\n                // Продолжить обход дерева.\n                return true;\n            });\n        } else {\n            node.setActive(false);\n        }\n    },\n    setActivePrevNode: (rootNode) => {\n        const activeNode = TreeViewAbstractNodeUtils.getActiveNode(rootNode);\n\n        if (activeNode) {\n            const prevNode = TreeViewAbstractNodeUtils.getPrevNode(activeNode);\n\n            TreeViewAbstractNodeUtils.setActiveNode(prevNode, rootNode, true);\n        }\n    },\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TreeViewAbstractNodeUtils.js","sources":["../../../src/components/TreeView/TreeViewAbstractNodeUtils.ts"],"sourcesContent":["import { traverseAbstractTree } from \"../AbstractTree/AbstractTreeNode\";\nimport { TreeViewAbstractNode } from \"./TreeViewAbstractNode\";\n\n/** Утилиты для работы с AbstractNode. */\ninterface ITreeViewAbstractNodeUtils {\n    /** Возвращает активную ноду в случае ее наличия. */\n    getActiveNode: (node: TreeViewAbstractNode) => TreeViewAbstractNode | undefined;\n    /**\n     * Возвращает следующую ноду текущего уровня. Если prevNode имеет дочерние ноды, и prevNode.getOpened() === true будет\n     * возвращена первая дочерняя нода. Если prevNode - последняя нода текущего уровня, будет возвращена следующая нода\n     * верхнего уровня. Если верхний уровень - rootNode, будет возвращена первая дочерняя нода rootNode.\n     */\n    getNextNode: (prevNode: TreeViewAbstractNode) => TreeViewAbstractNode;\n    /** Возвращает следующую ноду текущего уровня. Если prevNode - последняя нода, будет возвращено undefined. */\n    getNextSiblingNode: (prevNode: TreeViewAbstractNode) => TreeViewAbstractNode | undefined;\n    /** Возвращает AbstractNode по id. */\n    getNode: (nodeId: string, rootNode: TreeViewAbstractNode) => TreeViewAbstractNode | undefined;\n    /**\n     * Возвращает предыдущую ноду текущего уровня дерева. Если предыдущая нода имеет детей и она раскрыта, будет возвращена\n     * последняя ее дочерняя нода. Если nextNode - первая нода, будет возвращена родительская нода. Если верхний\n     * уровень - rootNode, будет возвращена последняя видимая нода дерева - ноды внутри свернутых веток пропускаются.\n     */\n    getPrevNode: (nextNode: TreeViewAbstractNode) => TreeViewAbstractNode;\n    /** Возвращает предыдущую ноду текущего уровня дерева. В случае если nextNode - первая нода, будет возвращено undefined. */\n    getPrevSiblingNode: (nextNode: TreeViewAbstractNode) => TreeViewAbstractNode | undefined;\n    /** Возвращает true если нода - последняя в дереве. */\n    isLastNode: (node: TreeViewAbstractNode) => boolean;\n    /**\n     * Устанавливает флаг активности AbstractNode для следующей ноды дерева. Если нода раскрыта, будет активна первая\n     * дочерняя нода, если нода закрыта - будет активирована следующая нода этого же уровня.\n     */\n    setActiveNextNode: (rootNode: TreeViewAbstractNode) => void;\n    /** Устанавливает флаг активности AbstractNode. */\n    setActiveNode: (node: TreeViewAbstractNode, rootNode: TreeViewAbstractNode, isActive: boolean) => void;\n    /** Устанавливает флаг активности AbstractNode для предыдущей ноды дерева. */\n    setActivePrevNode: (rootNode: TreeViewAbstractNode) => void;\n}\n\n/** Возвращает последнюю дочернюю ноду. Вызывается только для нод, у которых есть дочерние ноды. */\nconst getLastChildNode = (node: TreeViewAbstractNode): TreeViewAbstractNode => {\n    const children = node.getChildren();\n\n    return children[children.length - 1];\n};\n\n/**\n * Спускается от ноды к последней видимой дочерней ноде: пока нода раскрыта и имеет детей,\n * переходит к последнему ребенку. Ноды внутри свернутых веток пропускаются.\n */\nconst getDeepestVisibleLastChildNode = (node: TreeViewAbstractNode): TreeViewAbstractNode => {\n    let lastNode = node;\n\n    while (lastNode.getOpened() && lastNode.getChildren().length) {\n        lastNode = getLastChildNode(lastNode);\n    }\n\n    return lastNode;\n};\n\n/**\n * Возвращает индекс ноды среди дочерних нод родителя.\n * Если нода среди них не найдена, возвращает 0 - нода трактуется как первая.\n */\nconst getNodeIndexInParent = (node: TreeViewAbstractNode, parentNodeChildren: TreeViewAbstractNode[]): number => {\n    const index = parentNodeChildren.findIndex((n) => n.getId() === node.getId());\n\n    return index === -1 ? 0 : index;\n};\n\n/** Утилиты для работы с AbstractNode. */\nexport const TreeViewAbstractNodeUtils: ITreeViewAbstractNodeUtils = {\n    getActiveNode: (node) => {\n        let activeNode: TreeViewAbstractNode | undefined;\n\n        traverseAbstractTree(node, (n) => {\n            if (n.getActive()) {\n                activeNode = n;\n                // Не углубляться в дочерние ноды.\n                return false;\n            }\n\n            // Продолжить обход дерева.\n            return true;\n        });\n\n        return activeNode;\n    },\n    getNextNode: (node) => {\n        const childrenNodes = node.getChildren();\n        // Нода раскрыта и имеются дочерние ноды: следующей нодой будет первая дочерняя нода.\n        if (node.getOpened() && childrenNodes.length) {\n            return childrenNodes[0];\n        }\n\n        const nextSiblingNode = TreeViewAbstractNodeUtils.getNextSiblingNode(node);\n        // Найдена следующая нода текущего уровня вложенности.\n        if (nextSiblingNode) {\n            return nextSiblingNode;\n        }\n\n        let nextNode = node;\n\n        while (true) {\n            // as TreeViewAbstractNode потому что .getParent() может вернуть null только для rootNode, prevNode не может быть rootNode.\n            const parentNode = nextNode.getParent() as TreeViewAbstractNode;\n\n            if (parentNode.getParent()) {\n                const nextSiblingParenNode = TreeViewAbstractNodeUtils.getNextSiblingNode(parentNode);\n                // Найдена следующая нода верхнего уровня вложенности.\n                if (nextSiblingParenNode) {\n                    nextNode = nextSiblingParenNode;\n                    break;\n                }\n            }\n            // Если parentNode является rootNode.\n            else {\n                // Следующая нода - первая нода дерева.\n                nextNode = parentNode.getChildren()[0];\n                break;\n            }\n\n            nextNode = parentNode;\n        }\n\n        return nextNode;\n    },\n    getNextSiblingNode: (node) => {\n        const parentNode = node.getParent();\n        // node является rootNode.\n        if (!parentNode) {\n            return undefined;\n        }\n\n        const parentNodeChildren = parentNode.getChildren();\n        // Индекс текущей ноды среди дочерних нод родителя.\n        const currentNodeIndex = getNodeIndexInParent(node, parentNodeChildren);\n\n        // Текущая нода - последняя.\n        if (currentNodeIndex === parentNodeChildren.length - 1) {\n            return undefined;\n        }\n\n        // Возвращается следующая нода.\n        return parentNodeChildren[currentNodeIndex + 1];\n    },\n    getNode: (nodeId, rootNode) => {\n        let result: TreeViewAbstractNode | undefined;\n\n        traverseAbstractTree(rootNode, (node) => {\n            if (node.getId() === nodeId) {\n                result = node;\n                // Не углубляться в дочерние ноды.\n                return false;\n            }\n\n            // Продолжить обход дерева.\n            return true;\n        });\n\n        return result;\n    },\n    getPrevNode: (node) => {\n        const prevSiblingNode = TreeViewAbstractNodeUtils.getPrevSiblingNode(node);\n\n        // Предыдущая нода текущего уровня вложенности не найдена.\n        if (!prevSiblingNode) {\n            // as TreeViewAbstractNode потому что .getParent() может вернуть null только для rootNode, nextNode не может быть rootNode.\n            const parentNode = node.getParent() as TreeViewAbstractNode;\n\n            if (parentNode.getParent()) {\n                return parentNode;\n            }\n            // Если parentNode является rootNode.\n            else {\n                // Предыдущая нода - последняя видимая нода дерева.\n                return getDeepestVisibleLastChildNode(getLastChildNode(parentNode));\n            }\n        }\n\n        // Предыдущая нода раскрыта и имеет дочерние ноды. Предыдущей станет последняя ее видимая дочерняя нода.\n        return getDeepestVisibleLastChildNode(prevSiblingNode);\n    },\n    getPrevSiblingNode: (node) => {\n        const parentNode = node.getParent();\n        // node является rootNode.\n        if (!parentNode) {\n            return undefined;\n        }\n\n        const parentNodeChildren = parentNode.getChildren();\n        // Индекс текущей ноды среди дочерних нод родителя.\n        const currentNodeIndex = getNodeIndexInParent(node, parentNodeChildren);\n\n        // Текущая нода - первая.\n        if (currentNodeIndex === 0) {\n            return undefined;\n        }\n\n        // Возвращается предыдущая нода.\n        return parentNodeChildren[currentNodeIndex - 1];\n    },\n    isLastNode: (node) => {\n        const parentNode = node.getParent();\n\n        if (parentNode) {\n            // Если нода является последней на текущем уровне.\n            if (getLastChildNode(parentNode) === node) {\n                return TreeViewAbstractNodeUtils.isLastNode(parentNode);\n            }\n        }\n        // node является rootNode.\n        else {\n            return true;\n        }\n\n        return false;\n    },\n    setActiveNextNode: (rootNode) => {\n        const activeNode = TreeViewAbstractNodeUtils.getActiveNode(rootNode);\n\n        if (activeNode) {\n            const nextNode = TreeViewAbstractNodeUtils.getNextNode(activeNode);\n\n            TreeViewAbstractNodeUtils.setActiveNode(nextNode, rootNode, true);\n        }\n    },\n    setActiveNode: (node, rootNode, isActive) => {\n        if (isActive) {\n            node.setActive(true);\n\n            traverseAbstractTree(rootNode, (n) => {\n                if (n.getActive() && n.getId() !== node.getId()) {\n                    // Сброс флага активности всех других нод, активная может быть только одна нода.\n                    n.setActive(false);\n                }\n\n                // Продолжить обход дерева.\n                return true;\n            });\n        } else {\n            node.setActive(false);\n\n            // Активность снимается со всего дерева: стрелки могли увести ее на другую ноду, пока DOM-фокус\n            // оставался на этой. Иначе после ухода фокуса дерево продолжало бы забирать стрелки у страницы.\n            traverseAbstractTree(rootNode, (n) => {\n                if (n.getActive()) {\n                    n.setActive(false);\n                }\n\n                // Продолжить обход дерева.\n                return true;\n            });\n        }\n    },\n    setActivePrevNode: (rootNode) => {\n        const activeNode = TreeViewAbstractNodeUtils.getActiveNode(rootNode);\n\n        if (activeNode) {\n            const prevNode = TreeViewAbstractNodeUtils.getPrevNode(activeNode);\n\n            TreeViewAbstractNodeUtils.setActiveNode(prevNode, rootNode, true);\n        }\n    },\n};\n"],"names":[],"mappings":"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"}

package/components/TreeView/TreeViewContext.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { TreeViewAbstractNode } from "./TreeViewAbstractNode.js";
 const initialTreeContext = {
-  /** eslint-disable @typescript-eslint/no-empty-function */
   getNode: () => void 0,
   parentNode: new TreeViewAbstractNode({ id: "contextNode" }),
   registerNode: () => {
@@ -15,7 +14,6 @@ const initialTreeContext = {
   setOpenedNode: () => {
   },
   updateCount: 0
-  /** eslint-enable @typescript-eslint/no-empty-function */
 };
 const TreeViewContext = React__default.createContext(initialTreeContext);
 function withTreeViewContext(WrapperComponent) {

package/components/TreeView/TreeViewContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewContext.js","sources":["../../../src/components/TreeView/TreeViewContext.tsx"],"sourcesContent":["import React from \"react\";\nimport { TreeViewAbstractNode } from \"./TreeViewAbstractNode\";\n\n/**\n * Возвращаем AbstractNode по id.\n */\nexport type TTreeViewContextGetNode = (nodeId: string) => TreeViewAbstractNode | undefined;\n\n/**\n * Добавляем AbstractNode в AbstractTree. AbstractTree является AbstractNode.\n */\nexport type TTreeViewContextRegisterNode = (\n    node: TreeViewAbstractNode,\n    parentNode: TreeViewAbstractNode,\n    prevNode?: TreeViewAbstractNode,\n    nextNode?: TreeViewAbstractNode,\n) => void;\n\n/**\n * Удаляет AbstractNode из AbstractTree.\n */\nexport type TTreeViewContextRemoveNode = (node: TreeViewAbstractNode) => void;\n\n/**\n * Устанавливает флаг активности AbstractNode.\n */\nexport type TTreeViewContextSetActiveNode = (node: TreeViewAbstractNode, active: boolean) => void;\n\n/**\n * Устанавливает флаг opened AbstractNode.\n */\nexport type TTreeViewContextSetOpenedNode = (node: TreeViewAbstractNode, opened: boolean) => void;\n\n/**\n * Контекст TreeView.\n *\n * @param {number} updateCount - Число обновлений абстрактного дерева. Используется для индикации изменения дерева т.к. изменение мутируемого объекта rootNode не вызывает триггер изменения контекста.\n * @param {TTreeViewContextGetNode} getNode - Возвращает TreeViewAbstractNode по id.\n * @param {TreeViewAbstractNode} parentNode - Родительская TreeViewAbstractNode.\n * @param {TreeViewAbstractNode | null} rootNode - Рутовая нода абстрактного дерева.\n * @param {TTreeViewContextRegisterNode} registerNode - Добавляет TreeViewAbstractNode в AbstractTree. AbstractTree также является AbstractNode.\n * @param {TTreeViewContextSetActiveNode} setActiveNode - Устанавливает флаг активности AbstractNode.\n * @param {TTreeViewContextSetOpenedNode} setOpenedNode - Устанавливает флаг раскрытости AbstractNode.\n */\nexport interface ITreeViewContext {\n    updateCount: number;\n    getNode: TTreeViewContextGetNode;\n    parentNode: TreeViewAbstractNode;\n    rootNode: TreeViewAbstractNode | null;\n    registerNode: TTreeViewContextRegisterNode;\n    removeNode: TTreeViewContextRemoveNode;\n    setActiveNode: TTreeViewContextSetActiveNode;\n    setOpenedNode: TTreeViewContextSetOpenedNode;\n}\n\n// Начальное значение контекста. Здесь нужно только для типизации и будет заполнено в @sber-business/triplex/components/TreeView/TreeView.tsx\nexport const initialTreeContext = {\n    /** eslint-disable @typescript-eslint/no-empty-function */\n    getNode: (): TreeViewAbstractNode | undefined => undefined,\n    parentNode: new TreeViewAbstractNode({ id: \"contextNode\" }),\n    registerNode: (): void => {},\n    removeNode: (): void => {},\n    rootNode: null,\n    setActiveNode: (): void => {},\n    setOpenedNode: (): void => {},\n    updateCount: 0,\n    /** eslint-enable @typescript-eslint/no-empty-function */\n};\n\nexport const TreeViewContext = React.createContext<ITreeViewContext>(initialTreeContext);\n\n/**\n * Свойства контекста, добавляемые WithTreeViewContext.\n */\nexport interface IWithTreeViewContextProps {\n    treeViewContext: ITreeViewContext;\n}\n\n/**\n * HOC, предоставляющий TreeViewContext.\n */\nexport function withTreeViewContext<T extends IWithTreeViewContextProps>(\n    WrapperComponent: React.ComponentType<T>,\n): React.ComponentType<Omit<T, keyof IWithTreeViewContextProps>> {\n    const displayName = WrapperComponent.displayName || WrapperComponent.name || \"Component\";\n\n    const ComponentWithTreeViewContext = (props: Omit<T, keyof IWithTreeViewContextProps>) => (\n        <TreeViewContext.Consumer>\n            {(context) => <WrapperComponent {...(props as T)} treeViewContext={context} />}\n        </TreeViewContext.Consumer>\n    );\n\n    ComponentWithTreeViewContext.displayName = `WithTreeViewContext(${displayName})`;\n\n    return ComponentWithTreeViewContext;\n}\n"],"names":["React"],"mappings":";;;AAwDO,MAAM,qBAAqB;AAAA;AAAA,EAE9B,SAAS,MAAwC;AAAA,EACjD,YAAY,IAAI,qBAAqB,EAAE,IAAI,eAAe;AAAA,EAC1D,cAAc,MAAY;AAAA,EAAC;AAAA,EAC3B,YAAY,MAAY;AAAA,EAAC;AAAA,EACzB,UAAU;AAAA,EACV,eAAe,MAAY;AAAA,EAAC;AAAA,EAC5B,eAAe,MAAY;AAAA,EAAC;AAAA,EAC5B,aAAa;AAAA;AAEjB;AAEO,MAAM,kBAAkBA,eAAM,cAAgC,kBAAkB;AAYhF,SAAS,oBACZ,kBAC6D;AAC7D,QAAM,cAAc,iBAAiB,eAAe,iBAAiB,QAAQ;AAE7E,QAAM,+BAA+B,CAAC,UAClC,oBAAC,gBAAgB,UAAhB,EACI,UAAA,CAAC,gCAAa,kBAAA,EAAkB,GAAI,OAAa,iBAAiB,SAAS,GAChF;AAGJ,+BAA6B,cAAc,uBAAuB,WAAW;AAE7E,SAAO;AACX;"}
+{"version":3,"file":"TreeViewContext.js","sources":["../../../src/components/TreeView/TreeViewContext.tsx"],"sourcesContent":["import React from \"react\";\nimport { TreeViewAbstractNode } from \"./TreeViewAbstractNode\";\n\n/** Возвращает AbstractNode по id. */\nexport type TTreeViewContextGetNode = (nodeId: string) => TreeViewAbstractNode | undefined;\n\n/** Добавляет AbstractNode в AbstractTree. AbstractTree является AbstractNode. */\nexport type TTreeViewContextRegisterNode = (\n    node: TreeViewAbstractNode,\n    parentNode: TreeViewAbstractNode,\n    prevNode?: TreeViewAbstractNode,\n    nextNode?: TreeViewAbstractNode,\n) => void;\n\n/** Удаляет AbstractNode из AbstractTree. */\nexport type TTreeViewContextRemoveNode = (node: TreeViewAbstractNode) => void;\n\n/** Устанавливает флаг активности AbstractNode. */\nexport type TTreeViewContextSetActiveNode = (node: TreeViewAbstractNode, active: boolean) => void;\n\n/** Устанавливает флаг opened AbstractNode. */\nexport type TTreeViewContextSetOpenedNode = (node: TreeViewAbstractNode, opened: boolean) => void;\n\n/** Контекст TreeView. */\nexport interface ITreeViewContext {\n    /**\n     * Число обновлений абстрактного дерева.\n     * Используется для индикации изменения дерева т.к. изменение мутируемого объекта rootNode не вызывает триггер изменения контекста.\n     */\n    updateCount: number;\n    /** Возвращает TreeViewAbstractNode по id. */\n    getNode: TTreeViewContextGetNode;\n    /** Родительская TreeViewAbstractNode. Каждая нода переопределяет ее для своих детей. */\n    parentNode: TreeViewAbstractNode;\n    /** Рутовая нода абстрактного дерева. */\n    rootNode: TreeViewAbstractNode | null;\n    /** Добавляет TreeViewAbstractNode в AbstractTree. AbstractTree также является AbstractNode. */\n    registerNode: TTreeViewContextRegisterNode;\n    /** Удаляет TreeViewAbstractNode из AbstractTree. */\n    removeNode: TTreeViewContextRemoveNode;\n    /** Устанавливает флаг активности AbstractNode. */\n    setActiveNode: TTreeViewContextSetActiveNode;\n    /** Устанавливает флаг раскрытости AbstractNode. */\n    setOpenedNode: TTreeViewContextSetOpenedNode;\n}\n\n/**\n * Начальное значение контекста.\n * Используется только для типизации createContext, реальные значения устанавливает TreeView.\n */\nexport const initialTreeContext: ITreeViewContext = {\n    getNode: () => undefined,\n    parentNode: new TreeViewAbstractNode({ id: \"contextNode\" }),\n    registerNode: () => {},\n    removeNode: () => {},\n    rootNode: null,\n    setActiveNode: () => {},\n    setOpenedNode: () => {},\n    updateCount: 0,\n};\n\nexport const TreeViewContext = React.createContext<ITreeViewContext>(initialTreeContext);\n\n/** Свойства контекста, добавляемые withTreeViewContext. */\nexport interface IWithTreeViewContextProps {\n    /** Контекст TreeView. Подставляется HOC-ом withTreeViewContext, снаружи передавать не нужно. */\n    treeViewContext: ITreeViewContext;\n}\n\n/** HOC, предоставляющий TreeViewContext через prop treeViewContext. */\nexport function withTreeViewContext<T extends IWithTreeViewContextProps>(\n    WrapperComponent: React.ComponentType<T>,\n): React.ComponentType<Omit<T, keyof IWithTreeViewContextProps>> {\n    const displayName = WrapperComponent.displayName || WrapperComponent.name || \"Component\";\n\n    const ComponentWithTreeViewContext = (props: Omit<T, keyof IWithTreeViewContextProps>) => (\n        <TreeViewContext.Consumer>\n            {(context) => <WrapperComponent {...(props as T)} treeViewContext={context} />}\n        </TreeViewContext.Consumer>\n    );\n\n    ComponentWithTreeViewContext.displayName = `WithTreeViewContext(${displayName})`;\n\n    return ComponentWithTreeViewContext;\n}\n"],"names":["React"],"mappings":";;;AAkDO,MAAM,qBAAuC;AAAA,EAChD,SAAS,MAAM;AAAA,EACf,YAAY,IAAI,qBAAqB,EAAE,IAAI,eAAe;AAAA,EAC1D,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,UAAU;AAAA,EACV,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,aAAa;AACjB;AAEO,MAAM,kBAAkBA,eAAM,cAAgC,kBAAkB;AAShF,SAAS,oBACZ,kBAC6D;AAC7D,QAAM,cAAc,iBAAiB,eAAe,iBAAiB,QAAQ;AAE7E,QAAM,+BAA+B,CAAC,UAClC,oBAAC,gBAAgB,UAAhB,EACI,UAAA,CAAC,gCAAa,kBAAA,EAAkB,GAAI,OAAa,iBAAiB,SAAS,GAChF;AAGJ,+BAA6B,cAAc,uBAAuB,WAAW;AAE7E,SAAO;AACX;"}

package/components/TreeView/components/TreeViewGroup.js

@@ -1,6 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../chunks/TreeView.module-C5KrbQR8.js";
-const TreeViewGroup = ({ children, ...props }) => /* @__PURE__ */ jsx("ul", { role: "group", className: styles.treeViewGroup, ...props, children });
+import React__default from "react";
+import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
+import { s as styles } from "../../../chunks/TreeView.module-CmItPF1_.js";
+const TreeViewGroup = React__default.forwardRef(
+  ({ children, className, ...props }, ref) => (
+    // role после {...props}: семантика группы - контракт компонента, потребитель ее не переопределяет.
+    /* @__PURE__ */ jsx("ul", { className: clsx(styles.treeViewGroup, className), ...props, role: "group", ref, children })
+  )
+);
+TreeViewGroup.displayName = "TreeViewGroup";
 export {
   TreeViewGroup
 };

package/components/TreeView/components/TreeViewGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewGroup.js","sources":["../../../../src/components/TreeView/components/TreeViewGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport styles from \"../styles/TreeView.module.less\";\n\n/** Свойства компонента TreeViewGroup. */\nexport interface ITreeViewGroupProps extends React.HTMLAttributes<HTMLUListElement> {}\n\n/** Обертка для вложенных TreeNode. */\nexport const TreeViewGroup: React.FC<ITreeViewGroupProps> = ({ children, ...props }) => (\n    <ul role=\"group\" className={styles.treeViewGroup} {...props}>\n        {children}\n    </ul>\n);\n"],"names":[],"mappings":";;AAOO,MAAM,gBAA+C,CAAC,EAAE,UAAU,GAAG,YACxE,oBAAC,MAAA,EAAG,MAAK,SAAQ,WAAW,OAAO,eAAgB,GAAG,OACjD,SAAA,CACL;"}
+{"version":3,"file":"TreeViewGroup.js","sources":["../../../../src/components/TreeView/components/TreeViewGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/TreeView.module.less\";\n\n/** Свойства компонента TreeViewGroup. */\nexport interface ITreeViewGroupProps extends React.HTMLAttributes<HTMLUListElement> {}\n\n/** Обертка для вложенных TreeViewNode. Задает семантику группы дочерних нод (role=\"group\"). */\nexport const TreeViewGroup = React.forwardRef<HTMLUListElement, ITreeViewGroupProps>(\n    ({ children, className, ...props }, ref) => (\n        // role после {...props}: семантика группы - контракт компонента, потребитель ее не переопределяет.\n        <ul className={clsx(styles.treeViewGroup, className)} {...props} role=\"group\" ref={ref}>\n            {children}\n        </ul>\n    ),\n);\n\nTreeViewGroup.displayName = \"TreeViewGroup\";\n"],"names":["React"],"mappings":";;;;AAQO,MAAM,gBAAgBA,eAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,WAAW,GAAG,SAAS;AAAA;AAAA,IAEhC,oBAAC,MAAA,EAAG,WAAW,KAAK,OAAO,eAAe,SAAS,GAAI,GAAG,OAAO,MAAK,SAAQ,KACzE,SAAA,CACL;AAAA;AAER;AAEA,cAAc,cAAc;"}

package/components/TreeView/components/TreeViewNode.js

@@ -7,12 +7,11 @@ import { TreeViewContext, withTreeViewContext } from "../TreeViewContext.js";
 import { TreeViewAbstractNode } from "../TreeViewAbstractNode.js";
 import { TreeViewAbstractNodeUtils } from "../TreeViewAbstractNodeUtils.js";
 import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
-import { s as styles } from "../../../chunks/TreeView.module-C5KrbQR8.js";
+import { s as styles } from "../../../chunks/TreeView.module-CmItPF1_.js";
 class TreeViewNodeWithContext extends React__default.Component {
   constructor(props) {
     super(props);
-    __publicField(this, "containerDOMNode");
-    // Абстрактная нода текущей ViewNode.
+    /** Абстрактная нода текущей ViewNode. */
     __publicField(this, "abstractNode");
     /**
      * Обработчик события blur.
@@ -34,9 +33,8 @@ class TreeViewNodeWithContext extends React__default.Component {
       treeViewContext.setActiveNode(this.abstractNode, true);
       onFocus == null ? void 0 : onFocus(event);
     });
-    __publicField(this, "setContainerDOMNode", (DOMNode) => this.containerDOMNode = DOMNode);
-    /** Устанавливает флаг opened ноды. */
-    __publicField(this, "setOpenedNode", () => (opened) => {
+    /** Устанавливает флаг opened ноды. Передается в render-функцию children. */
+    __publicField(this, "setOpenedNode", (opened) => {
       this.props.treeViewContext.setOpenedNode(this.abstractNode, opened);
     });
     const { treeViewContext } = props;
@@ -68,25 +66,25 @@ class TreeViewNodeWithContext extends React__default.Component {
     return /* @__PURE__ */ jsx(TreeViewContext.Provider, { value: { ...treeViewContext, parentNode: this.abstractNode }, children: /* @__PURE__ */ jsx(
       "li",
       {
-        role: "treeitem",
         tabIndex: this.abstractNode.getTabIndex(),
-        "aria-expanded": this.abstractNode.getOpened(),
         className: clsx(styles.treeViewNode, className),
         ...props,
+        role: "treeitem",
+        "aria-expanded": this.abstractNode.getOpened(),
         onBlur: this.handleBlur,
         onFocus: this.handleFocus,
-        ref: this.setContainerDOMNode,
         children: children({
           activeNode: this.abstractNode.getActive(),
           hasChildNodes: Boolean(this.abstractNode.getChildren().length),
           isLastNode: TreeViewAbstractNodeUtils.isLastNode(this.abstractNode),
           openedNode: this.abstractNode.getOpened(),
-          setOpenedNode: this.setOpenedNode()
+          setOpenedNode: this.setOpenedNode
         })
       }
     ) });
   }
 }
+__publicField(TreeViewNodeWithContext, "displayName", "TreeViewNodeWithContext");
 const TreeViewNode = withTreeViewContext(TreeViewNodeWithContext);
 export {
   TreeViewNode,