@sberbusiness/triplex-next 1.42.0 → 1.44.0

package/components/Tooltip/components/common/TooltipLink.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { c as clsx } from "../../../../chunks/vendor-DfvHt3TJ.js";
+import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
 import { MobileView } from "../../../MobileView/MobileView.js";
 import { getSafeRel } from "../../../../utils/html/anchorSecurity.js";
-const tooltipLink = "tooltipLink__d8fcaf95";
-const desktop = "desktop__d9788b8a";
-const mobile = "mobile__de0faf33";
+const tooltipLink = "tooltipLink__2cf94f2b";
+const desktop = "desktop__5278313b";
+const mobile = "mobile__68f8ba32";
 const styles = {
   tooltipLink,
   desktop,
@@ -21,7 +21,7 @@ const TooltipLink = React__default.forwardRef(
         ...rest,
         target,
         rel: safeRel,
-        "data-tx": "1.42.0",
+        "data-tx": "1.44.0",
         ref,
         children
       }

package/components/Tooltip/components/common/TooltipXButton.js

@@ -3,7 +3,7 @@ import { useContext } from "react";
 import { CrossStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { TooltipContext } from "../../TootlipContext.js";
 import { ButtonIcon } from "../../../Button/ButtonIcon.js";
-import { s as styles } from "../../../../chunks/TooltipDesktop.module-CaPU2whC.js";
+import { s as styles } from "../../../../chunks/TooltipDesktop.module-B54hNcxs.js";
 const TooltipXButton = ({ onClick, ...rest }) => {
   const { setTooltipOpen } = useContext(TooltipContext);
   const handleClick = (event) => {

package/components/Tooltip/components/desktop/components/TooltipDesktopBase.js

@@ -3,13 +3,13 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { i as isEqual, c as clsx } from "../../../../../chunks/vendor-DfvHt3TJ.js";
+import { i as isEqual, c as clsx } from "../../../../../chunks/vendor-D4wvHis9.js";
 import { TooltipContext } from "../../../TootlipContext.js";
 import { Portal } from "../../../../Portal/Portal.js";
 import { ETooltipFlowTypes, ETooltipPreferPlace, ETooltipDirection, ETooltipAlign, ETooltipSizeParameter, ETooltipTypeName, ETooltipEndCoordinates, ETooltipStartCoordinates, ETooltipAxesType, ETooltipSize } from "../../../enums.js";
 import { TooltipDesktopTip } from "./TooltipDesktopTip.js";
 import { pickZone, axes, calcRelPos, centerOfBoundsFromBounds, calcBounds, equalCoords } from "../../../utils/Positioning.js";
-import { s as styles } from "../../../../../chunks/TooltipDesktop.module-CaPU2whC.js";
+import { s as styles } from "../../../../../chunks/TooltipDesktop.module-B54hNcxs.js";
 const flowToTipTranslations = {
   [ETooltipFlowTypes.COLUMN]: "translateX",
   [ETooltipFlowTypes.ROW]: "translateY"

package/components/Tooltip/components/desktop/components/TooltipDesktopTip.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { ETooltipDirection } from "../../../enums.js";
-import { c as clsx } from "../../../../../chunks/vendor-DfvHt3TJ.js";
-import { s as styles } from "../../../../../chunks/TooltipDesktop.module-CaPU2whC.js";
+import { c as clsx } from "../../../../../chunks/vendor-D4wvHis9.js";
+import { s as styles } from "../../../../../chunks/TooltipDesktop.module-B54hNcxs.js";
 const DIRECTION_CLASS_NAMES = {
   [ETooltipDirection.UP]: styles.up,
   [ETooltipDirection.DOWN]: styles.down,

package/components/Tooltip/components/mobile/TooltipMobile.js

@@ -5,11 +5,11 @@ import { Portal } from "../../../Portal/Portal.js";
 import { DropdownMobile } from "../../../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "../../../Dropdown/mobile/DropdownMobileBody.js";
 import { TooltipMobileCloseButton } from "./components/TooltipMobileCloseButton.js";
-import { c as clsx } from "../../../../chunks/vendor-DfvHt3TJ.js";
-const tooltipMobile = "tooltipMobile__3c901978";
-const tooltipMobileContent = "tooltipMobileContent__b0332cea";
-const headerless = "headerless__47294132";
-const closeButton = "closeButton__43cae28e";
+import { c as clsx } from "../../../../chunks/vendor-D4wvHis9.js";
+const tooltipMobile = "tooltipMobile__bcb2869d";
+const tooltipMobileContent = "tooltipMobileContent__5a2e5962";
+const headerless = "headerless__76875cd3";
+const closeButton = "closeButton__5c95f441";
 const styles = {
   tooltipMobile,
   tooltipMobileContent,

package/components/TopOverlay/TopOverlay.js

@@ -1,15 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import { c as clsx } from "../../chunks/vendor-DfvHt3TJ.js";
+import React__default, { useState, useRef, useEffect } from "react";
+import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { FocusTrapExtended } from "../FocusTrapExtended/FocusTrapExtended.js";
 import { Overlay } from "../Overlay/Overlay.js";
 import { EOverlayDirection } from "../Overlay/OverlayBase.js";
-const topOverlayMask = "topOverlayMask__24c691dc";
-const topOverlayWrapper = "topOverlayWrapper__6ff9ba8b";
-const closing = "closing__0b232f2e";
-const opened = "opened__4e79fb61";
-const topOverlayPanel = "topOverlayPanel__2f1c6343";
-const topOverlay = "topOverlay__a57307ad";
+import { getLightBoxScreenTop, getNextTopPosition } from "./utils.js";
+const topOverlayMask = "topOverlayMask__9abf9d11";
+const topOverlayWrapper = "topOverlayWrapper__57eb6933";
+const closing = "closing__38513e6e";
+const opened = "opened__33b1df88";
+const topOverlayPanel = "topOverlayPanel__2353a9b0";
+const topOverlay = "topOverlay__1f38d9a1";
 const styles = {
   topOverlayMask,
   topOverlayWrapper,
@@ -18,98 +19,106 @@ const styles = {
   topOverlayPanel,
   topOverlay
 };
-const TopOverlay = ({
-  children,
-  focusTrapProps,
-  opened: opened2,
-  onClose,
-  onOpen,
-  ...OverlayBaseProps
-}) => {
-  const [closing2, setClosing] = useState(false);
-  const [activeFocusTrap, setActiveFocusTrap] = useState(false);
-  const [overlayWrapperTopPosition, setOverlayWrapperTopPosition] = useState(0);
-  const prevOpened = useRef(opened2);
-  const overlayWrapperRef = useRef(null);
-  const updateTopPosition = () => {
-    if (overlayWrapperRef.current) {
-      const lightBoxTopPosition = getComputedStyle(overlayWrapperRef.current).getPropertyValue("--lightBox-screen-top") || "0";
-      const position = overlayWrapperRef.current.getBoundingClientRect();
-      if (position.top < 0) {
-        setOverlayWrapperTopPosition(
-          (overlayWrapperTopPositionPrev) => parseInt(overlayWrapperTopPositionPrev, 10) + Math.abs(position.top) + parseInt(lightBoxTopPosition, 10)
-        );
-      } else {
-        setOverlayWrapperTopPosition(
-          // Оверлей расположен ниже, чем нужно.
-          (overlayWrapperTopPositionPrev) => parseInt(overlayWrapperTopPositionPrev, 10) - position.top + parseInt(lightBoxTopPosition, 10)
-        );
+const noopSetOpened = () => {
+};
+const TopOverlay = React__default.forwardRef(
+  ({ children, className, focusTrapProps, opened: opened2, onClose, onOpen, style, ...htmlDivAttributes }, ref) => {
+    const [closing2, setClosing] = useState(false);
+    const [activeFocusTrap, setActiveFocusTrap] = useState(false);
+    const [overlayWrapperTopPosition, setOverlayWrapperTopPosition] = useState(void 0);
+    const prevOpened = useRef(opened2);
+    const isFirstRender = useRef(true);
+    const overlayWrapperRef = useRef(null);
+    const updateTopPosition = () => {
+      const overlayWrapper = overlayWrapperRef.current;
+      if (!overlayWrapper) {
+        return;
+      }
+      const lightBoxScreenTop = getLightBoxScreenTop(overlayWrapper);
+      const { top } = overlayWrapper.getBoundingClientRect();
+      setOverlayWrapperTopPosition((topPosition) => getNextTopPosition(topPosition ?? 0, top, lightBoxScreenTop));
+    };
+    const handleOpen = () => {
+      if (!isFirstRender.current) {
+        updateTopPosition();
+      }
+      setActiveFocusTrap(true);
+      onOpen == null ? void 0 : onOpen();
+    };
+    useEffect(() => {
+      isFirstRender.current = false;
+    }, []);
+    useEffect(() => {
+      if (prevOpened.current && !opened2) {
+        setClosing(true);
+      } else if (!prevOpened.current && opened2) {
+        updateTopPosition();
       }
-    }
-  };
-  const handleOpen = () => {
-    updateTopPosition();
-    setActiveFocusTrap(true);
-    onOpen == null ? void 0 : onOpen();
-  };
-  useEffect(() => {
-    if (prevOpened.current && !opened2) {
-      setClosing(true);
-    } else if (!prevOpened.current && opened2) {
-      updateTopPosition();
-    }
-    prevOpened.current = opened2;
-  }, [opened2]);
-  const handleClose = () => {
-    setClosing(false);
-    setOverlayWrapperTopPosition(0);
-    onClose == null ? void 0 : onClose();
-  };
-  const handleClosing = () => setActiveFocusTrap(false);
-  const renderOverlay = (overlayProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Overlay.Mask, { opened: overlayProps.opened, className: styles.topOverlayMask }),
-    /* @__PURE__ */ jsx(Overlay.Panel, { className: styles.topOverlayPanel, ...overlayProps, children })
-  ] });
-  const setOpened = () => {
-  };
-  const classNameOverlayWrapper = clsx(styles.topOverlayWrapper, {
-    [styles.closing]: closing2,
-    [styles.opened]: opened2
-  });
-  return /* @__PURE__ */ jsx(
-    FocusTrapExtended,
-    {
-      active: activeFocusTrap,
-      ...focusTrapProps,
-      focusTrapOptions: {
-        preventScroll: true,
-        ...focusTrapProps == null ? void 0 : focusTrapProps.focusTrapOptions
+      prevOpened.current = opened2;
+    }, [opened2]);
+    const handleClose = () => {
+      setClosing(false);
+      setOverlayWrapperTopPosition(void 0);
+      onClose == null ? void 0 : onClose();
+    };
+    const handleClosing = () => setActiveFocusTrap(false);
+    const setOverlayWrapperRef = (instance) => {
+      overlayWrapperRef.current = instance;
+      if (typeof ref === "function") {
+        ref(instance);
+      } else if (ref) {
+        ref.current = instance;
+      }
+    };
+    const renderOverlay = (overlayProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Overlay.Mask, { opened: overlayProps.opened, className: styles.topOverlayMask }),
+      /* @__PURE__ */ jsx(Overlay.Panel, { className: styles.topOverlayPanel, ...overlayProps, children })
+    ] });
+    const wrapperStyle = overlayWrapperTopPosition === void 0 ? style : { ...style, "--triplex-next-runtime-TopOverlay-Top": `${overlayWrapperTopPosition}px` };
+    const classNameOverlayWrapper = clsx(
+      styles.topOverlayWrapper,
+      {
+        [styles.closing]: closing2,
+        [styles.opened]: opened2
       },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: classNameOverlayWrapper,
-          ref: overlayWrapperRef,
-          style: overlayWrapperTopPosition ? { top: `${overlayWrapperTopPosition}px` } : void 0,
-          children: /* @__PURE__ */ jsx(
-            Overlay,
-            {
-              onClose: handleClose,
-              onClosing: handleClosing,
-              onOpen: handleOpen,
-              opened: opened2,
-              setOpened,
-              ...OverlayBaseProps,
-              className: styles.topOverlay,
-              direction: EOverlayDirection.TOP,
-              children: renderOverlay
-            }
-          )
-        }
-      )
-    }
-  );
-};
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      FocusTrapExtended,
+      {
+        active: activeFocusTrap,
+        ...focusTrapProps,
+        focusTrapOptions: {
+          preventScroll: true,
+          ...focusTrapProps == null ? void 0 : focusTrapProps.focusTrapOptions
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNameOverlayWrapper,
+            ...htmlDivAttributes,
+            style: wrapperStyle,
+            ref: setOverlayWrapperRef,
+            children: /* @__PURE__ */ jsx(
+              Overlay,
+              {
+                onClose: handleClose,
+                onClosing: handleClosing,
+                onOpen: handleOpen,
+                opened: opened2,
+                setOpened: noopSetOpened,
+                className: styles.topOverlay,
+                direction: EOverlayDirection.TOP,
+                children: renderOverlay
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+TopOverlay.displayName = "TopOverlay";
 export {
   TopOverlay
 };

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

@@ -9,14 +9,22 @@ import { TreeViewContext } from "./TreeViewContext.js";
 import { TreeViewAbstractNode } from "./TreeViewAbstractNode.js";
 import { TreeViewNode } from "./components/TreeViewNode.js";
 import { TreeViewGroup } from "./components/TreeViewGroup.js";
-import { c as clsx } from "../../chunks/vendor-DfvHt3TJ.js";
-import { s as styles } from "../../chunks/TreeView.module-DFoYkkgl.js";
+import { c as clsx } from "../../chunks/vendor-D4wvHis9.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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"}