@sberbusiness/triplex-next 1.37.0 → 1.39.0

package/components/LightBox/LightBox.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
-import { c as clsx } from "../../chunks/vendor-Bco_z_Yi.js";
+import { useRef, useState, useEffect } from "react";
+import { c as clsx } from "../../chunks/vendor-1HxVLgKa.js";
 import { Portal } from "../Portal/Portal.js";
 import { FocusTrapExtended } from "../FocusTrapExtended/FocusTrapExtended.js";
-import { L as LightBoxContent, s as styles } from "../../chunks/LightBoxContent-W4QNMAOs.js";
+import { L as LightBoxContent, s as styles } from "../../chunks/LightBoxContent-DegsWbol.js";
 import { LightBoxControls } from "./LightBoxControls/LightBoxControls.js";
 import { LightBoxSideOverlay } from "./LightBoxSideOverlay/LightBoxSideOverlay.js";
 import { addClassNameWithScrollbarWidth } from "../../utils/scroll/scrollbar.js";
@@ -15,14 +15,21 @@ import { LightBoxLeftSidebar } from "./LightBoxSidebars/LightBoxLeftSidebar.js";
 import { LightBoxRightSidebar } from "./LightBoxSidebars/LightBoxRightSidebar.js";
 import { ELightBoxSize } from "./enums.js";
 const scrollStyles = {
-  "scroll-0": "scroll-0__edafcb57",
-  "scroll-15": "scroll-15__ee8f49f6",
-  "scroll-16": "scroll-16__a002320b",
-  "scroll-17": "scroll-17__61dcecf3"
+  "scroll-0": "scroll-0__78aa424a",
+  "scroll-15": "scroll-15__a5c31e2c",
+  "scroll-16": "scroll-16__ffb584e6",
+  "scroll-17": "scroll-17__44377de7"
 };
 const lightBoxMountNodeIdDefault = "LightBox-next-mount-node";
 const lightBoxViewManagerNodeIdDefault = "LightBox-next-view-manager-node";
 const bodyClassNamesIsLightBoxOpen = [styles.bodyOverflowHidden];
+const addClassNamesToDocumentElement = () => {
+  bodyClassNamesIsLightBoxOpen.forEach((className) => document.documentElement.classList.add(className));
+};
+const removeClassNamesFromDocumentElement = () => {
+  bodyClassNamesIsLightBoxOpen.forEach((className) => document.documentElement.classList.remove(className));
+};
+let mountedLightBoxCount = 0;
 const LightBoxBase = ({
   children,
   className,
@@ -40,16 +47,14 @@ const LightBoxBase = ({
   const containerRef = useRef(null);
   const { scopeClassName } = useToken();
   const getLightBoxMountNode = () => {
-    let lightBoxMountNode2 = null;
     if (mountNode) {
-      lightBoxMountNode2 = mountNode;
-    } else {
-      lightBoxMountNode2 = document.querySelector(`#${lightBoxMountNodeIdDefault}`);
-      if (!lightBoxMountNode2) {
-        lightBoxMountNode2 = document.createElement("div");
-        lightBoxMountNode2.setAttribute("id", lightBoxMountNodeIdDefault);
-        document.body.appendChild(lightBoxMountNode2);
-      }
+      return mountNode;
+    }
+    let lightBoxMountNode2 = document.querySelector(`#${lightBoxMountNodeIdDefault}`);
+    if (!lightBoxMountNode2) {
+      lightBoxMountNode2 = document.createElement("div");
+      lightBoxMountNode2.setAttribute("id", lightBoxMountNodeIdDefault);
+      document.body.appendChild(lightBoxMountNode2);
     }
     return lightBoxMountNode2;
   };
@@ -65,16 +70,18 @@ const LightBoxBase = ({
     }
     return lightBoxViewManagerMountNode;
   };
-  const lightBoxMountNode = useRef(getLightBoxMountNode());
-  const lightBoxViewManagerNode = useRef(getLightBoxViewManagerMountNode());
-  const addClassNamesToDocumentElement = () => {
-    bodyClassNamesIsLightBoxOpen.forEach((className2) => document.documentElement.classList.add(className2));
-  };
+  const [lightBoxMountNode] = useState(getLightBoxMountNode);
+  const [lightBoxViewManagerNode] = useState(getLightBoxViewManagerMountNode);
   useEffect(() => {
     addClassNameWithScrollbarWidth(scrollStyles);
+    mountedLightBoxCount += 1;
     addClassNamesToDocumentElement();
-    setTimeout(addClassNamesToDocumentElement, 100);
-    return () => bodyClassNamesIsLightBoxOpen.forEach((className2) => document.documentElement.classList.remove(className2));
+    return () => {
+      mountedLightBoxCount -= 1;
+      if (mountedLightBoxCount === 0) {
+        removeClassNamesFromDocumentElement();
+      }
+    };
   }, []);
   useEffect(() => {
     if (!isSideOverlayOpened && tempButtonRef.current) {
@@ -82,9 +89,6 @@ const LightBoxBase = ({
       tempButtonRef.current.style.zIndex = nextZIndex.toString();
     }
   }, [isSideOverlayOpened]);
-  if (!lightBoxMountNode.current) {
-    return null;
-  }
   const setRef = (instance) => {
     containerRef.current = instance;
     if (forwardRef) {
@@ -96,14 +100,13 @@ const LightBoxBase = ({
     styles.lightBox,
     styles[size],
     {
-      [styles.isLoading]: Boolean(isLoading),
       [styles.lightBoxSideOverlayActive]: Boolean(isSideOverlayOpened),
       [styles.lightBoxTopOverlayActive]: Boolean(isTopOverlayOpened)
     },
     className
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Portal, { container: lightBoxMountNode.current, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Portal, { container: lightBoxMountNode, children: /* @__PURE__ */ jsx(
       FocusTrapExtended,
       {
         active: !isLoading,
@@ -120,11 +123,11 @@ const LightBoxBase = ({
         ] })
       }
     ) }),
-    lightBoxViewManagerNode.current && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       LightBoxViewManager,
       {
-        lightBoxViewManagerNode: lightBoxViewManagerNode.current,
-        lightBoxMountNode: lightBoxMountNode.current
+        lightBoxViewManagerNode,
+        lightBoxMountNode
       }
     )
   ] });

package/components/LightBox/LightBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBox.js","sources":["../../../src/components/LightBox/LightBox.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Portal } from \"../Portal\";\nimport { FocusTrapExtended, IFocusTrapExtendedProps } from \"../FocusTrapExtended\";\nimport { LightBoxContent } from \"./LightBoxContent\";\nimport { LightBoxControls } from \"./LightBoxControls/LightBoxControls\";\nimport { LightBoxSideOverlay } from \"./LightBoxSideOverlay/LightBoxSideOverlay\";\nimport { addClassNameWithScrollbarWidth } from \"../../utils/scroll/scrollbar\";\nimport { TopOverlay } from \"../TopOverlay/TopOverlay\";\nimport { LightBoxViewManager } from \"./LightBoxViewManager/LightBoxViewManager\";\nimport { FocusTrapUtils } from \"../../utils/focus/FocusTrapUtils\";\nimport { useToken } from \"../ThemeProvider/useToken\";\nimport { LightBoxLeftSidebar } from \"./LightBoxSidebars/LightBoxLeftSidebar\";\nimport { LightBoxRightSidebar } from \"./LightBoxSidebars/LightBoxRightSidebar\";\nimport { ELightBoxSize } from \"./enums\";\nimport styles from \"./styles/LightBox.module.less\";\nimport scrollStyles from \"./styles/LightBoxScroll.module.less\";\n\n// Идентификатор DOM-элемента, в который рендерится лайтбокс. При отсутствии элемента в DOM – создается в body.\nexport const lightBoxMountNodeIdDefault = \"LightBox-next-mount-node\";\n\n// Идентификатор DOM-элемента, в визуальных границах (левая и правая координата) которого рендерится лайтбокс.\nexport const lightBoxViewManagerNodeIdDefault = \"LightBox-next-view-manager-node\";\n\n/** Свойства компонента LightBox. */\nexport interface ILightBoxProps extends React.HTMLAttributes<HTMLDivElement> {\n    children: React.ReactElement[];\n    /** Свойства компонента FocusTrapExtended. */\n    focusTrapProps?: IFocusTrapExtendedProps;\n    /** Ref на контейнер LightBox. */\n    forwardRef?: React.MutableRefObject<HTMLElement | null>;\n    /** DOM-нода в которую будет рендерится лайтбокс. */\n    mountNode?: HTMLDivElement;\n    /** Идентификатор DOM-элемента, в визуальных границах (левая и правая координата) которого рендерится лайтбокс. */\n    lightBoxViewManagerNodeId?: string;\n    /** Флаг состояния загрузки. */\n    isLoading?: boolean;\n    /** Флаг открытия боковой панели. */\n    isSideOverlayOpened?: boolean;\n    /** Флаг открытия верхней панели. */\n    isTopOverlayOpened?: boolean;\n    /** Размер контента LightBox. */\n    size?: ELightBoxSize;\n}\n\nconst bodyClassNamesIsLightBoxOpen = [styles.bodyOverflowHidden];\n\nconst LightBoxBase: React.FC<ILightBoxProps> = ({\n    children,\n    className,\n    focusTrapProps,\n    forwardRef,\n    mountNode,\n    lightBoxViewManagerNodeId = lightBoxViewManagerNodeIdDefault,\n    isLoading,\n    isSideOverlayOpened,\n    isTopOverlayOpened,\n    size = ELightBoxSize.MD,\n    ...htmlDivAttributes\n}) => {\n    // Скрытый элемент для вызова ререндера при закрытии оверлея, фикс бага в Safari - DCBSWT-2866.\n    const tempButtonRef = useRef<HTMLSpanElement>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    const { scopeClassName } = useToken();\n\n    const getLightBoxMountNode = () => {\n        let lightBoxMountNode: HTMLDivElement | null = null;\n        if (mountNode) {\n            lightBoxMountNode = mountNode;\n        } else {\n            lightBoxMountNode = document.querySelector(`#${lightBoxMountNodeIdDefault}`);\n\n            if (!lightBoxMountNode) {\n                lightBoxMountNode = document.createElement(\"div\");\n                lightBoxMountNode.setAttribute(\"id\", lightBoxMountNodeIdDefault);\n                document.body.appendChild(lightBoxMountNode);\n            }\n        }\n\n        return lightBoxMountNode;\n    };\n\n    const getLightBoxViewManagerMountNode = () => {\n        let lightBoxViewManagerMountNode: HTMLDivElement | null = null;\n        if (lightBoxViewManagerNodeId) {\n            lightBoxViewManagerMountNode = document.querySelector(`#${lightBoxViewManagerNodeId}`);\n        }\n\n        if (!lightBoxViewManagerMountNode) {\n            lightBoxViewManagerMountNode = document.createElement(\"div\");\n            lightBoxViewManagerMountNode.setAttribute(\"id\", lightBoxViewManagerNodeIdDefault);\n            document.body.appendChild(lightBoxViewManagerMountNode);\n        }\n\n        return lightBoxViewManagerMountNode;\n    };\n\n    /** DOM node, в которую рендерится лайтбокс. */\n    const lightBoxMountNode = useRef<HTMLDivElement | null>(getLightBoxMountNode());\n    /**\n     * DOM node, в визуальных границах которой рендерится лайтбокс.\n     * Левая и правая граница LightBox будут соответствовать левой и правой границе lightBoxViewManagerNode.\n     */\n    const lightBoxViewManagerNode = useRef<HTMLDivElement | null>(getLightBoxViewManagerMountNode());\n\n    const addClassNamesToDocumentElement = () => {\n        bodyClassNamesIsLightBoxOpen.forEach((className) => document.documentElement.classList.add(className));\n    };\n\n    useEffect(() => {\n        addClassNameWithScrollbarWidth(scrollStyles);\n        addClassNamesToDocumentElement();\n        // Фикс бага в роутере - при переключении между лайтбоксами иногда сначала происходит componentDidMount 2го и затем componentWillUnmount первого, css классы удаляются.\n        setTimeout(addClassNamesToDocumentElement, 100);\n\n        return () =>\n            bodyClassNamesIsLightBoxOpen.forEach((className) => document.documentElement.classList.remove(className));\n    }, []);\n\n    useEffect(() => {\n        if (!isSideOverlayOpened && tempButtonRef.current) {\n            // Изменение z-index у скрытого элемента вызывает repaint. Фикс бага в Safari - DCBSWT-2866.\n            const nextZIndex = Math.round(Math.random() * 100);\n            tempButtonRef.current.style.zIndex = nextZIndex.toString();\n        }\n    }, [isSideOverlayOpened]);\n\n    if (!lightBoxMountNode.current) {\n        return null;\n    }\n\n    /** Функция для хранения ссылки. */\n    const setRef = (instance: HTMLDivElement | null) => {\n        containerRef.current = instance;\n\n        if (forwardRef) {\n            forwardRef.current = instance;\n        }\n    };\n\n    const classNames = clsx(\n        scopeClassName,\n        styles.lightBox,\n        styles[size],\n        {\n            [styles.isLoading]: Boolean(isLoading),\n            [styles.lightBoxSideOverlayActive]: Boolean(isSideOverlayOpened),\n            [styles.lightBoxTopOverlayActive]: Boolean(isTopOverlayOpened),\n        },\n        className,\n    );\n\n    return (\n        <>\n            <Portal container={lightBoxMountNode.current}>\n                <FocusTrapExtended\n                    active={!isLoading}\n                    {...focusTrapProps}\n                    focusTrapOptions={{\n                        initialFocus: () => FocusTrapUtils.getFirstInteractionElementByDataAttr(containerRef.current),\n                        preventScroll: true,\n                        ...focusTrapProps?.focusTrapOptions,\n                    }}\n                >\n                    <div className={classNames} role=\"dialog\" aria-modal=\"true\" {...htmlDivAttributes} ref={setRef}>\n                        <div className={styles.lightBoxBackdrop} />\n                        {children}\n                        <span ref={tempButtonRef} className={styles.tempElSafariBug} />\n                    </div>\n                </FocusTrapExtended>\n            </Portal>\n\n            {lightBoxViewManagerNode.current && (\n                <LightBoxViewManager\n                    lightBoxViewManagerNode={lightBoxViewManagerNode.current}\n                    lightBoxMountNode={lightBoxMountNode.current}\n                />\n            )}\n        </>\n    );\n};\n\nLightBoxBase.displayName = \"LightBoxBase\";\n\nexport const LightBox = Object.assign(LightBoxBase, {\n    Content: LightBoxContent,\n    SideOverlay: LightBoxSideOverlay,\n    TopOverlay,\n    Controls: LightBoxControls,\n    LeftSidebar: LightBoxLeftSidebar,\n    RightSidebar: LightBoxRightSidebar,\n});\n"],"names":["lightBoxMountNode","className"],"mappings":"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"}
+{"version":3,"file":"LightBox.js","sources":["../../../src/components/LightBox/LightBox.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { Portal } from \"../Portal\";\nimport { FocusTrapExtended, IFocusTrapExtendedProps } from \"../FocusTrapExtended\";\nimport { LightBoxContent } from \"./LightBoxContent\";\nimport { LightBoxControls } from \"./LightBoxControls/LightBoxControls\";\nimport { LightBoxSideOverlay } from \"./LightBoxSideOverlay/LightBoxSideOverlay\";\nimport { addClassNameWithScrollbarWidth } from \"../../utils/scroll/scrollbar\";\nimport { TopOverlay } from \"../TopOverlay/TopOverlay\";\nimport { LightBoxViewManager } from \"./LightBoxViewManager/LightBoxViewManager\";\nimport { FocusTrapUtils } from \"../../utils/focus/FocusTrapUtils\";\nimport { useToken } from \"../ThemeProvider/useToken\";\nimport { LightBoxLeftSidebar } from \"./LightBoxSidebars/LightBoxLeftSidebar\";\nimport { LightBoxRightSidebar } from \"./LightBoxSidebars/LightBoxRightSidebar\";\nimport { ELightBoxSize } from \"./enums\";\nimport styles from \"./styles/LightBox.module.less\";\nimport scrollStyles from \"./styles/LightBoxScroll.module.less\";\n\n/** Идентификатор DOM-элемента, в который рендерится лайтбокс. При отсутствии элемента в DOM – создается в body. */\nexport const lightBoxMountNodeIdDefault = \"LightBox-next-mount-node\";\n\n/** Идентификатор DOM-элемента, в визуальных границах (левая и правая координата) которого рендерится лайтбокс. */\nexport const lightBoxViewManagerNodeIdDefault = \"LightBox-next-view-manager-node\";\n\n/** Свойства компонента LightBox. */\nexport interface ILightBoxProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Содержимое лайтбокса. */\n    children: React.ReactElement[];\n    /** Свойства компонента FocusTrapExtended. */\n    focusTrapProps?: IFocusTrapExtendedProps;\n    /** Ref на контейнер LightBox. */\n    forwardRef?: React.MutableRefObject<HTMLElement | null>;\n    /** DOM-нода в которую будет рендерится лайтбокс. */\n    mountNode?: HTMLDivElement;\n    /** Идентификатор DOM-элемента, в визуальных границах (левая и правая координата) которого рендерится лайтбокс. */\n    lightBoxViewManagerNodeId?: string;\n    /** Флаг состояния загрузки. */\n    isLoading?: boolean;\n    /** Флаг открытия боковой панели. */\n    isSideOverlayOpened?: boolean;\n    /** Флаг открытия верхней панели. */\n    isTopOverlayOpened?: boolean;\n    /** Размер контента LightBox. */\n    size?: ELightBoxSize;\n}\n\n/** CSS-классы, добавляемые на корневой элемент документа, пока лайтбокс открыт. */\nconst bodyClassNamesIsLightBoxOpen = [styles.bodyOverflowHidden];\n\n/** Добавляет CSS-классы открытого лайтбокса на корневой элемент документа. */\nconst addClassNamesToDocumentElement = () => {\n    bodyClassNamesIsLightBoxOpen.forEach((className) => document.documentElement.classList.add(className));\n};\n\n/** Удаляет CSS-классы открытого лайтбокса с корневого элемента документа. */\nconst removeClassNamesFromDocumentElement = () => {\n    bodyClassNamesIsLightBoxOpen.forEach((className) => document.documentElement.classList.remove(className));\n};\n\n/**\n * Количество смонтированных лайтбоксов. При переключении между лайтбоксами через роутер второй может\n * смонтироваться раньше, чем размонтируется первый, поэтому классы с documentElement снимаются только\n * при размонтировании последнего лайтбокса.\n */\nlet mountedLightBoxCount = 0;\n\nconst LightBoxBase: React.FC<ILightBoxProps> = ({\n    children,\n    className,\n    focusTrapProps,\n    forwardRef,\n    mountNode,\n    lightBoxViewManagerNodeId = lightBoxViewManagerNodeIdDefault,\n    isLoading,\n    isSideOverlayOpened,\n    isTopOverlayOpened,\n    size = ELightBoxSize.MD,\n    ...htmlDivAttributes\n}) => {\n    // Скрытый элемент для вызова ререндера при закрытии оверлея, фикс бага в Safari - DCBSWT-2866.\n    const tempButtonRef = useRef<HTMLSpanElement>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    const { scopeClassName } = useToken();\n\n    const getLightBoxMountNode = (): HTMLDivElement => {\n        if (mountNode) {\n            return mountNode;\n        }\n\n        let lightBoxMountNode = document.querySelector<HTMLDivElement>(`#${lightBoxMountNodeIdDefault}`);\n\n        if (!lightBoxMountNode) {\n            lightBoxMountNode = document.createElement(\"div\");\n            lightBoxMountNode.setAttribute(\"id\", lightBoxMountNodeIdDefault);\n            document.body.appendChild(lightBoxMountNode);\n        }\n\n        return lightBoxMountNode;\n    };\n\n    const getLightBoxViewManagerMountNode = (): HTMLDivElement => {\n        let lightBoxViewManagerMountNode: HTMLDivElement | null = null;\n\n        if (lightBoxViewManagerNodeId) {\n            lightBoxViewManagerMountNode = document.querySelector<HTMLDivElement>(`#${lightBoxViewManagerNodeId}`);\n        }\n\n        if (!lightBoxViewManagerMountNode) {\n            lightBoxViewManagerMountNode = document.createElement(\"div\");\n            lightBoxViewManagerMountNode.setAttribute(\"id\", lightBoxViewManagerNodeIdDefault);\n            document.body.appendChild(lightBoxViewManagerMountNode);\n        }\n\n        return lightBoxViewManagerMountNode;\n    };\n\n    /** DOM node, в которую рендерится лайтбокс. */\n    const [lightBoxMountNode] = useState<HTMLDivElement>(getLightBoxMountNode);\n    /**\n     * DOM node, в визуальных границах которой рендерится лайтбокс.\n     * Левая и правая граница LightBox будут соответствовать левой и правой границе lightBoxViewManagerNode.\n     */\n    const [lightBoxViewManagerNode] = useState<HTMLDivElement>(getLightBoxViewManagerMountNode);\n\n    useEffect(() => {\n        addClassNameWithScrollbarWidth(scrollStyles);\n        mountedLightBoxCount += 1;\n        addClassNamesToDocumentElement();\n\n        return () => {\n            mountedLightBoxCount -= 1;\n\n            if (mountedLightBoxCount === 0) {\n                removeClassNamesFromDocumentElement();\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (!isSideOverlayOpened && tempButtonRef.current) {\n            // Изменение z-index у скрытого элемента вызывает repaint. Фикс бага в Safari - DCBSWT-2866.\n            const nextZIndex = Math.round(Math.random() * 100);\n            tempButtonRef.current.style.zIndex = nextZIndex.toString();\n        }\n    }, [isSideOverlayOpened]);\n\n    const setRef = (instance: HTMLDivElement | null) => {\n        containerRef.current = instance;\n\n        if (forwardRef) {\n            forwardRef.current = instance;\n        }\n    };\n\n    const classNames = clsx(\n        scopeClassName,\n        styles.lightBox,\n        styles[size],\n        {\n            [styles.lightBoxSideOverlayActive]: Boolean(isSideOverlayOpened),\n            [styles.lightBoxTopOverlayActive]: Boolean(isTopOverlayOpened),\n        },\n        className,\n    );\n\n    return (\n        <>\n            <Portal container={lightBoxMountNode}>\n                <FocusTrapExtended\n                    active={!isLoading}\n                    {...focusTrapProps}\n                    focusTrapOptions={{\n                        initialFocus: () => FocusTrapUtils.getFirstInteractionElementByDataAttr(containerRef.current),\n                        preventScroll: true,\n                        ...focusTrapProps?.focusTrapOptions,\n                    }}\n                >\n                    <div className={classNames} role=\"dialog\" aria-modal=\"true\" {...htmlDivAttributes} ref={setRef}>\n                        <div className={styles.lightBoxBackdrop} />\n                        {children}\n                        <span ref={tempButtonRef} className={styles.tempElSafariBug} />\n                    </div>\n                </FocusTrapExtended>\n            </Portal>\n\n            <LightBoxViewManager\n                lightBoxViewManagerNode={lightBoxViewManagerNode}\n                lightBoxMountNode={lightBoxMountNode}\n            />\n        </>\n    );\n};\n\nLightBoxBase.displayName = \"LightBoxBase\";\n\n/** Лайтбокс — полноэкранный диалог поверх страницы с контентом, кнопками управления и боковыми панелями. */\nexport const LightBox = Object.assign(LightBoxBase, {\n    Content: LightBoxContent,\n    SideOverlay: LightBoxSideOverlay,\n    TopOverlay,\n    Controls: LightBoxControls,\n    LeftSidebar: LightBoxLeftSidebar,\n    RightSidebar: LightBoxRightSidebar,\n});\n"],"names":["lightBoxMountNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,6BAA6B;AAGnC,MAAM,mCAAmC;AAyBhD,MAAM,+BAA+B,CAAC,OAAO,kBAAkB;AAG/D,MAAM,iCAAiC,MAAM;AACzC,+BAA6B,QAAQ,CAAC,cAAc,SAAS,gBAAgB,UAAU,IAAI,SAAS,CAAC;AACzG;AAGA,MAAM,sCAAsC,MAAM;AAC9C,+BAA6B,QAAQ,CAAC,cAAc,SAAS,gBAAgB,UAAU,OAAO,SAAS,CAAC;AAC5G;AAOA,IAAI,uBAAuB;AAE3B,MAAM,eAAyC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,4BAA4B;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,cAAc;AAAA,EACrB,GAAG;AACP,MAAM;AAEF,QAAM,gBAAgB,OAAwB,IAAI;AAClD,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,EAAE,eAAA,IAAmB,SAAA;AAE3B,QAAM,uBAAuB,MAAsB;AAC/C,QAAI,WAAW;AACX,aAAO;AAAA,IACX;AAEA,QAAIA,qBAAoB,SAAS,cAA8B,IAAI,0BAA0B,EAAE;AAE/F,QAAI,CAACA,oBAAmB;AACpBA,2BAAoB,SAAS,cAAc,KAAK;AAChDA,yBAAkB,aAAa,MAAM,0BAA0B;AAC/D,eAAS,KAAK,YAAYA,kBAAiB;AAAA,IAC/C;AAEA,WAAOA;AAAAA,EACX;AAEA,QAAM,kCAAkC,MAAsB;AAC1D,QAAI,+BAAsD;AAE1D,QAAI,2BAA2B;AAC3B,qCAA+B,SAAS,cAA8B,IAAI,yBAAyB,EAAE;AAAA,IACzG;AAEA,QAAI,CAAC,8BAA8B;AAC/B,qCAA+B,SAAS,cAAc,KAAK;AAC3D,mCAA6B,aAAa,MAAM,gCAAgC;AAChF,eAAS,KAAK,YAAY,4BAA4B;AAAA,IAC1D;AAEA,WAAO;AAAA,EACX;AAGA,QAAM,CAAC,iBAAiB,IAAI,SAAyB,oBAAoB;AAKzE,QAAM,CAAC,uBAAuB,IAAI,SAAyB,+BAA+B;AAE1F,YAAU,MAAM;AACZ,mCAA+B,YAAY;AAC3C,4BAAwB;AACxB,mCAAA;AAEA,WAAO,MAAM;AACT,8BAAwB;AAExB,UAAI,yBAAyB,GAAG;AAC5B,4CAAA;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACZ,QAAI,CAAC,uBAAuB,cAAc,SAAS;AAE/C,YAAM,aAAa,KAAK,MAAM,KAAK,OAAA,IAAW,GAAG;AACjD,oBAAc,QAAQ,MAAM,SAAS,WAAW,SAAA;AAAA,IACpD;AAAA,EACJ,GAAG,CAAC,mBAAmB,CAAC;AAExB,QAAM,SAAS,CAAC,aAAoC;AAChD,iBAAa,UAAU;AAEvB,QAAI,YAAY;AACZ,iBAAW,UAAU;AAAA,IACzB;AAAA,EACJ;AAEA,QAAM,aAAa;AAAA,IACf;AAAA,IACA,OAAO;AAAA,IACP,OAAO,IAAI;AAAA,IACX;AAAA,MACI,CAAC,OAAO,yBAAyB,GAAG,QAAQ,mBAAmB;AAAA,MAC/D,CAAC,OAAO,wBAAwB,GAAG,QAAQ,kBAAkB;AAAA,IAAA;AAAA,IAEjE;AAAA,EAAA;AAGJ,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,WAAW,mBACf,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QACJ,kBAAkB;AAAA,UACd,cAAc,MAAM,eAAe,qCAAqC,aAAa,OAAO;AAAA,UAC5F,eAAe;AAAA,UACf,GAAG,iDAAgB;AAAA,QAAA;AAAA,QAGvB,UAAA,qBAAC,OAAA,EAAI,WAAW,YAAY,MAAK,UAAS,cAAW,QAAQ,GAAG,mBAAmB,KAAK,QACpF,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAA,CAAkB;AAAA,UACxC;AAAA,8BACA,QAAA,EAAK,KAAK,eAAe,WAAW,OAAO,gBAAA,CAAiB;AAAA,QAAA,EAAA,CACjE;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AAEA,aAAa,cAAc;AAGpB,MAAM,WAAW,OAAO,OAAO,cAAc;AAAA,EAChD,SAAS;AAAA,EACT,aAAa;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV,aAAa;AAAA,EACb,cAAc;AAClB,CAAC;"}

package/components/LightBox/LightBoxContent.js

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
 import "react";
 import "../WindowResizeListener/WindowResizeListener.js";
-import "../../chunks/vendor-Bco_z_Yi.js";
+import "../../chunks/vendor-1HxVLgKa.js";
 import "../LoaderScreen/LoaderScreen.js";
-import { L } from "../../chunks/LightBoxContent-W4QNMAOs.js";
+import { L } from "../../chunks/LightBoxContent-DegsWbol.js";
 export {
   L as LightBoxContent
 };

package/components/LightBox/LightBoxControls/LightBoxArrow.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import { c as clsx } from "../../../chunks/vendor-1HxVLgKa.js";
+import { TriggerClickOnKeyDownEvent } from "../../Triggers/TriggerClickOnKeyDownEvent.js";
+import { EButtonTheme } from "../../Button/enums.js";
+import { Button } from "../../Button/Button.js";
+import { EComponentSize } from "../../../enums/EComponentSize.js";
+import { s as styles } from "../../../chunks/LightBoxControls.module-DNhvkSnJ.js";
+const LightBoxArrow = ({
+  buttonClassName,
+  className,
+  clickByArrowKey,
+  dataTestId,
+  dataTutorialId,
+  eventKeyCode,
+  iconDesktop,
+  iconMobile,
+  onClick,
+  title,
+  ...htmlDivAttributes
+}) => {
+  const desktopButtonRef = useRef(null);
+  const mobileButtonRef = useRef(null);
+  const renderButton = (params) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: clsx(styles.lightBoxControlsDesktop, buttonClassName),
+        "data-test-id": (params == null ? void 0 : params.addDataTestId) ? dataTestId : void 0,
+        "data-tutorial-id": dataTutorialId,
+        onClick,
+        title,
+        ref: params == null ? void 0 : params.desktopButtonRef,
+        icon: iconDesktop,
+        size: EComponentSize.LG,
+        theme: EButtonTheme.SECONDARY_LIGHT
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: clsx(styles.lightBoxControlsMobile, buttonClassName),
+        "data-test-id": (params == null ? void 0 : params.addDataTestId) ? dataTestId : void 0,
+        "data-tutorial-id": dataTutorialId,
+        onClick,
+        title,
+        ref: params == null ? void 0 : params.mobileButtonRef,
+        icon: iconMobile,
+        size: EComponentSize.MD,
+        theme: EButtonTheme.SECONDARY_LIGHT
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx("div", { className, ...htmlDivAttributes, children: clickByArrowKey ? /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ jsx("span", { className: styles.withKeyboardEvent, children: /* @__PURE__ */ jsx(TriggerClickOnKeyDownEvent, { targetRef: desktopButtonRef, eventKeyCode, children: /* @__PURE__ */ jsx(TriggerClickOnKeyDownEvent, { targetRef: mobileButtonRef, eventKeyCode, children: renderButton({ addDataTestId: true, desktopButtonRef, mobileButtonRef }) }) }) }),
+    /* @__PURE__ */ jsx("span", { className: styles.withoutKeyboardEvent, children: renderButton() })
+  ] }) : renderButton({ addDataTestId: true }) });
+};
+LightBoxArrow.displayName = "LightBoxArrow";
+export {
+  LightBoxArrow
+};
+//# sourceMappingURL=LightBoxArrow.js.map

package/components/LightBox/LightBoxControls/LightBoxArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LightBoxArrow.js","sources":["../../../../src/components/LightBox/LightBoxControls/LightBoxArrow.tsx"],"sourcesContent":["import React, { Ref, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { TriggerClickOnKeyDownEvent } from \"../../Triggers/TriggerClickOnKeyDownEvent\";\nimport { EButtonTheme } from \"../../Button/enums\";\nimport { Button } from \"../../Button/Button\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport styles from \"../styles/LightBoxControls.module.less\";\n\n/** Свойства LightBoxArrow. */\ninterface ILightBoxArrowProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** CSS-класс кнопки (десктопной и мобильной). */\n    buttonClassName: string;\n    /** Кликнуть по кнопке при нажатии соответствующей стрелки на клавиатуре. */\n    clickByArrowKey?: boolean;\n    /** Значение data-test-id кнопки. */\n    dataTestId: string;\n    /** Идентификатор для обучающего тура. */\n    dataTutorialId?: string;\n    /** Код клавиши, при нажатии которой происходит клик по кнопке. */\n    eventKeyCode: number;\n    /** Иконка кнопки для экранов шире 1024px. */\n    iconDesktop: React.ReactElement;\n    /** Иконка кнопки для экранов менее 1024px. */\n    iconMobile: React.ReactElement;\n    /** Обработчик клика по кнопке. */\n    onClick: () => void;\n}\n\ninterface IRenderButtonParams {\n    /** Флаг, добавляющий data-test-id. Нужен, чтобы data-test-id не дублировался несколько раз на странице. */\n    addDataTestId: boolean;\n    /** Установка ссылки на десктопную кнопку. */\n    desktopButtonRef?: Ref<HTMLButtonElement>;\n    /** Установка ссылки на мобильную кнопку. */\n    mobileButtonRef?: Ref<HTMLButtonElement>;\n}\n\n/** Внутренний компонент стрелки лайтбокса (общая реализация для LightBoxPrev и LightBoxNext). */\nexport const LightBoxArrow: React.FC<ILightBoxArrowProps> = ({\n    buttonClassName,\n    className,\n    clickByArrowKey,\n    dataTestId,\n    dataTutorialId,\n    eventKeyCode,\n    iconDesktop,\n    iconMobile,\n    onClick,\n    title,\n    ...htmlDivAttributes\n}) => {\n    // Отдельные ссылки на десктопную и мобильную кнопки: видимой в каждый момент является только одна,\n    // а TriggerClickOnKeyDownEvent кликает только по видимой (offsetParent !== null).\n    const desktopButtonRef = useRef<HTMLButtonElement>(null);\n    const mobileButtonRef = useRef<HTMLButtonElement>(null);\n\n    /**\n     * Отображение кнопки.\n     */\n    const renderButton = (params?: IRenderButtonParams) => (\n        <>\n            {/* Кнопка для экранов шире 1024px */}\n            <Button\n                className={clsx(styles.lightBoxControlsDesktop, buttonClassName)}\n                data-test-id={params?.addDataTestId ? dataTestId : undefined}\n                data-tutorial-id={dataTutorialId}\n                onClick={onClick}\n                title={title}\n                ref={params?.desktopButtonRef}\n                icon={iconDesktop}\n                size={EComponentSize.LG}\n                theme={EButtonTheme.SECONDARY_LIGHT}\n            />\n            {/* Кнопка для экранов менее 1024px */}\n            <Button\n                className={clsx(styles.lightBoxControlsMobile, buttonClassName)}\n                data-test-id={params?.addDataTestId ? dataTestId : undefined}\n                data-tutorial-id={dataTutorialId}\n                onClick={onClick}\n                title={title}\n                ref={params?.mobileButtonRef}\n                icon={iconMobile}\n                size={EComponentSize.MD}\n                theme={EButtonTheme.SECONDARY_LIGHT}\n            />\n        </>\n    );\n\n    return (\n        <div className={className} {...htmlDivAttributes}>\n            {clickByArrowKey ? (\n                <span>\n                    {/* Кнопка с триггером при нажатии стрелки на клавиатуре. */}\n                    <span className={styles.withKeyboardEvent}>\n                        <TriggerClickOnKeyDownEvent targetRef={desktopButtonRef} eventKeyCode={eventKeyCode}>\n                            <TriggerClickOnKeyDownEvent targetRef={mobileButtonRef} eventKeyCode={eventKeyCode}>\n                                {renderButton({ addDataTestId: true, desktopButtonRef, mobileButtonRef })}\n                            </TriggerClickOnKeyDownEvent>\n                        </TriggerClickOnKeyDownEvent>\n                    </span>\n                    {/* Кнопка без триггера при нажатии стрелки на клавиатуре. Нельзя нажать, когда открыт SideOverlay. */}\n                    <span className={styles.withoutKeyboardEvent}>{renderButton()}</span>\n                </span>\n            ) : (\n                renderButton({ addDataTestId: true })\n            )}\n        </div>\n    );\n};\n\nLightBoxArrow.displayName = \"LightBoxArrow\";\n"],"names":[],"mappings":";;;;;;;;AAsCO,MAAM,gBAA+C,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AAGF,QAAM,mBAAmB,OAA0B,IAAI;AACvD,QAAM,kBAAkB,OAA0B,IAAI;AAKtD,QAAM,eAAe,CAAC,WAClB,qBAAA,UAAA,EAEI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,yBAAyB,eAAe;AAAA,QAC/D,iBAAc,iCAAQ,iBAAgB,aAAa;AAAA,QACnD,oBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA,KAAK,iCAAQ;AAAA,QACb,MAAM;AAAA,QACN,MAAM,eAAe;AAAA,QACrB,OAAO,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAGxB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,wBAAwB,eAAe;AAAA,QAC9D,iBAAc,iCAAQ,iBAAgB,aAAa;AAAA,QACnD,oBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA,KAAK,iCAAQ;AAAA,QACb,MAAM;AAAA,QACN,MAAM,eAAe;AAAA,QACrB,OAAO,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EACxB,GACJ;AAGJ,6BACK,OAAA,EAAI,WAAuB,GAAG,mBAC1B,UAAA,uCACI,QAAA,EAEG,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,mBACpB,8BAAC,4BAAA,EAA2B,WAAW,kBAAkB,cACrD,UAAA,oBAAC,4BAAA,EAA2B,WAAW,iBAAiB,cACnD,UAAA,aAAa,EAAE,eAAe,MAAM,kBAAkB,gBAAA,CAAiB,EAAA,CAC5E,EAAA,CACJ,EAAA,CACJ;AAAA,wBAEC,QAAA,EAAK,WAAW,OAAO,sBAAuB,yBAAa,CAAE;AAAA,EAAA,EAAA,CAClE,IAEA,aAAa,EAAE,eAAe,KAAA,CAAM,EAAA,CAE5C;AAER;AAEA,cAAc,cAAc;"}

package/components/LightBox/LightBoxControls/LightBoxClose.js

@@ -1,21 +1,22 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useRef } from "react";
-import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { c as clsx } from "../../../chunks/vendor-1HxVLgKa.js";
 import { CrossStrokeSrvIcon32, CrossStrokeSrvIcon20 } from "@sberbusiness/icons-next";
 import { TriggerClickOnKeyDownEvent } from "../../Triggers/TriggerClickOnKeyDownEvent.js";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
 import { EButtonTheme } from "../../Button/enums.js";
 import { Button } from "../../Button/Button.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
-import { s as styles } from "../../../chunks/LightBoxControls.module-oPcN4Gxu.js";
+import { s as styles } from "../../../chunks/LightBoxControls.module-DNhvkSnJ.js";
 const LightBoxClose = ({
   className,
   onClick,
   title = "Закрыть",
   ...htmlDivAttributes
 }) => {
-  const ref = useRef(null);
-  const renderButton = (buttonRef) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  const desktopButtonRef = useRef(null);
+  const mobileButtonRef = useRef(null);
+  const renderButton = (desktopRef, mobileRef) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -23,7 +24,7 @@ const LightBoxClose = ({
         onClick,
         title,
         "data-exclude-modal-focus": true,
-        ref: buttonRef,
+        ref: desktopRef,
         icon: /* @__PURE__ */ jsx(CrossStrokeSrvIcon32, { paletteIndex: 0 }),
         size: EComponentSize.LG,
         theme: EButtonTheme.SECONDARY_LIGHT
@@ -36,6 +37,7 @@ const LightBoxClose = ({
         onClick,
         title,
         "data-exclude-modal-focus": true,
+        ref: mobileRef,
         icon: /* @__PURE__ */ jsx(CrossStrokeSrvIcon20, { paletteIndex: 0 }),
         size: EComponentSize.MD,
         theme: EButtonTheme.SECONDARY_LIGHT
@@ -43,7 +45,7 @@ const LightBoxClose = ({
     )
   ] });
   return /* @__PURE__ */ jsxs("div", { className: clsx(className, styles.lightBoxClose), ...htmlDivAttributes, children: [
-    /* @__PURE__ */ jsx("span", { className: styles.withKeyboardEvent, children: /* @__PURE__ */ jsx(TriggerClickOnKeyDownEvent, { eventKeyCode: EVENT_KEY_CODES.ESCAPE, targetRef: ref, children: renderButton(ref) }) }),
+    /* @__PURE__ */ jsx("span", { className: styles.withKeyboardEvent, children: /* @__PURE__ */ jsx(TriggerClickOnKeyDownEvent, { eventKeyCode: EVENT_KEY_CODES.ESCAPE, targetRef: desktopButtonRef, children: /* @__PURE__ */ jsx(TriggerClickOnKeyDownEvent, { eventKeyCode: EVENT_KEY_CODES.ESCAPE, targetRef: mobileButtonRef, children: renderButton(desktopButtonRef, mobileButtonRef) }) }) }),
     /* @__PURE__ */ jsx("span", { className: styles.withoutKeyboardEvent, children: renderButton() })
   ] });
 };

package/components/LightBox/LightBoxControls/LightBoxClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxClose.js","sources":["../../../../src/components/LightBox/LightBoxControls/LightBoxClose.tsx"],"sourcesContent":["import React, { Ref, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { CrossStrokeSrvIcon32, CrossStrokeSrvIcon20 } from \"@sberbusiness/icons-next\";\nimport { TriggerClickOnKeyDownEvent } from \"../../Triggers/TriggerClickOnKeyDownEvent\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport { EButtonTheme } from \"../../Button/enums\";\nimport { Button } from \"../../Button/Button\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport styles from \"../styles/LightBoxControls.module.less\";\n\n/** Свойства LightBoxClose. */\ninterface ILightBoxCloseProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Обработчик закрытия лайтбокса. */\n    onClick: () => void;\n}\n\n/** Кнопка закрытия лайтбокса. */\nexport const LightBoxClose: React.FC<ILightBoxCloseProps> = ({\n    className,\n    onClick,\n    title = \"Закрыть\",\n    ...htmlDivAttributes\n}) => {\n    const ref = useRef<HTMLButtonElement>(null);\n\n    const renderButton = (buttonRef?: Ref<HTMLButtonElement>) => (\n        <>\n            {/* Кнопка для экранов шире 1024px */}\n            <Button\n                className={styles.lightBoxControlsDesktop}\n                onClick={onClick}\n                title={title}\n                data-exclude-modal-focus\n                ref={buttonRef}\n                icon={<CrossStrokeSrvIcon32 paletteIndex={0} />}\n                size={EComponentSize.LG}\n                theme={EButtonTheme.SECONDARY_LIGHT}\n            />\n            {/* Кнопка для экранов менее 1024px */}\n            <Button\n                className={styles.lightBoxControlsMobile}\n                onClick={onClick}\n                title={title}\n                data-exclude-modal-focus\n                icon={<CrossStrokeSrvIcon20 paletteIndex={0} />}\n                size={EComponentSize.MD}\n                theme={EButtonTheme.SECONDARY_LIGHT}\n            />\n        </>\n    );\n\n    return (\n        <div className={clsx(className, styles.lightBoxClose)} {...htmlDivAttributes}>\n            {/* Кнопка с триггером по Esc. */}\n            <span className={styles.withKeyboardEvent}>\n                <TriggerClickOnKeyDownEvent eventKeyCode={EVENT_KEY_CODES.ESCAPE} targetRef={ref}>\n                    {renderButton(ref)}\n                </TriggerClickOnKeyDownEvent>\n            </span>\n\n            {/* Кнопка без триггера по Esc. Отображается, когда открыт SideOverlay. */}\n            <span className={styles.withoutKeyboardEvent}>{renderButton()}</span>\n        </div>\n    );\n};\n\nLightBoxClose.displayName = \"LightBoxClose\";\n"],"names":[],"mappings":";;;;;;;;;;AAiBO,MAAM,gBAA+C,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACP,MAAM;AACF,QAAM,MAAM,OAA0B,IAAI;AAE1C,QAAM,eAAe,CAAC,cAClB,qBAAA,UAAA,EAEI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,OAAO;AAAA,QAClB;AAAA,QACA;AAAA,QACA,4BAAwB;AAAA,QACxB,KAAK;AAAA,QACL,MAAM,oBAAC,sBAAA,EAAqB,cAAc,EAAA,CAAG;AAAA,QAC7C,MAAM,eAAe;AAAA,QACrB,OAAO,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAGxB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,OAAO;AAAA,QAClB;AAAA,QACA;AAAA,QACA,4BAAwB;AAAA,QACxB,MAAM,oBAAC,sBAAA,EAAqB,cAAc,EAAA,CAAG;AAAA,QAC7C,MAAM,eAAe;AAAA,QACrB,OAAO,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EACxB,GACJ;AAGJ,SACI,qBAAC,SAAI,WAAW,KAAK,WAAW,OAAO,aAAa,GAAI,GAAG,mBAEvD,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,mBACpB,8BAAC,4BAAA,EAA2B,cAAc,gBAAgB,QAAQ,WAAW,KACxE,UAAA,aAAa,GAAG,GACrB,GACJ;AAAA,wBAGC,QAAA,EAAK,WAAW,OAAO,sBAAuB,yBAAa,CAAE;AAAA,EAAA,GAClE;AAER;AAEA,cAAc,cAAc;"}
+{"version":3,"file":"LightBoxClose.js","sources":["../../../../src/components/LightBox/LightBoxControls/LightBoxClose.tsx"],"sourcesContent":["import React, { Ref, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { CrossStrokeSrvIcon32, CrossStrokeSrvIcon20 } from \"@sberbusiness/icons-next\";\nimport { TriggerClickOnKeyDownEvent } from \"../../Triggers/TriggerClickOnKeyDownEvent\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport { EButtonTheme } from \"../../Button/enums\";\nimport { Button } from \"../../Button/Button\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport styles from \"../styles/LightBoxControls.module.less\";\n\n/** Свойства LightBoxClose. */\nexport interface ILightBoxCloseProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Обработчик закрытия лайтбокса. */\n    onClick: () => void;\n}\n\n/** Кнопка закрытия лайтбокса. */\nexport const LightBoxClose: React.FC<ILightBoxCloseProps> = ({\n    className,\n    onClick,\n    title = \"Закрыть\",\n    ...htmlDivAttributes\n}) => {\n    // Отдельные ссылки на десктопную и мобильную кнопки: видимой в каждый момент является только одна,\n    // а TriggerClickOnKeyDownEvent кликает только по видимой (offsetParent !== null).\n    const desktopButtonRef = useRef<HTMLButtonElement>(null);\n    const mobileButtonRef = useRef<HTMLButtonElement>(null);\n\n    const renderButton = (desktopRef?: Ref<HTMLButtonElement>, mobileRef?: Ref<HTMLButtonElement>) => (\n        <>\n            {/* Кнопка для экранов шире 1024px */}\n            <Button\n                className={styles.lightBoxControlsDesktop}\n                onClick={onClick}\n                title={title}\n                data-exclude-modal-focus\n                ref={desktopRef}\n                icon={<CrossStrokeSrvIcon32 paletteIndex={0} />}\n                size={EComponentSize.LG}\n                theme={EButtonTheme.SECONDARY_LIGHT}\n            />\n            {/* Кнопка для экранов менее 1024px */}\n            <Button\n                className={styles.lightBoxControlsMobile}\n                onClick={onClick}\n                title={title}\n                data-exclude-modal-focus\n                ref={mobileRef}\n                icon={<CrossStrokeSrvIcon20 paletteIndex={0} />}\n                size={EComponentSize.MD}\n                theme={EButtonTheme.SECONDARY_LIGHT}\n            />\n        </>\n    );\n\n    return (\n        <div className={clsx(className, styles.lightBoxClose)} {...htmlDivAttributes}>\n            {/* Кнопка с триггером по Esc. */}\n            <span className={styles.withKeyboardEvent}>\n                <TriggerClickOnKeyDownEvent eventKeyCode={EVENT_KEY_CODES.ESCAPE} targetRef={desktopButtonRef}>\n                    <TriggerClickOnKeyDownEvent eventKeyCode={EVENT_KEY_CODES.ESCAPE} targetRef={mobileButtonRef}>\n                        {renderButton(desktopButtonRef, mobileButtonRef)}\n                    </TriggerClickOnKeyDownEvent>\n                </TriggerClickOnKeyDownEvent>\n            </span>\n\n            {/* Кнопка без триггера по Esc. Отображается, когда открыт SideOverlay. */}\n            <span className={styles.withoutKeyboardEvent}>{renderButton()}</span>\n        </div>\n    );\n};\n\nLightBoxClose.displayName = \"LightBoxClose\";\n"],"names":[],"mappings":";;;;;;;;;;AAiBO,MAAM,gBAA+C,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACP,MAAM;AAGF,QAAM,mBAAmB,OAA0B,IAAI;AACvD,QAAM,kBAAkB,OAA0B,IAAI;AAEtD,QAAM,eAAe,CAAC,YAAqC,cACvD,qBAAA,UAAA,EAEI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,OAAO;AAAA,QAClB;AAAA,QACA;AAAA,QACA,4BAAwB;AAAA,QACxB,KAAK;AAAA,QACL,MAAM,oBAAC,sBAAA,EAAqB,cAAc,EAAA,CAAG;AAAA,QAC7C,MAAM,eAAe;AAAA,QACrB,OAAO,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAGxB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,OAAO;AAAA,QAClB;AAAA,QACA;AAAA,QACA,4BAAwB;AAAA,QACxB,KAAK;AAAA,QACL,MAAM,oBAAC,sBAAA,EAAqB,cAAc,EAAA,CAAG;AAAA,QAC7C,MAAM,eAAe;AAAA,QACrB,OAAO,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EACxB,GACJ;AAGJ,SACI,qBAAC,SAAI,WAAW,KAAK,WAAW,OAAO,aAAa,GAAI,GAAG,mBAEvD,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,mBACpB,8BAAC,4BAAA,EAA2B,cAAc,gBAAgB,QAAQ,WAAW,kBACzE,8BAAC,4BAAA,EAA2B,cAAc,gBAAgB,QAAQ,WAAW,iBACxE,uBAAa,kBAAkB,eAAe,EAAA,CACnD,EAAA,CACJ,EAAA,CACJ;AAAA,wBAGC,QAAA,EAAK,WAAW,OAAO,sBAAuB,yBAAa,CAAE;AAAA,EAAA,GAClE;AAER;AAEA,cAAc,cAAc;"}

package/components/LightBox/LightBoxControls/LightBoxControls.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { LightBoxClose } from "./LightBoxClose.js";
 import { LightBoxNext } from "./LightBoxNext.js";
 import { LightBoxPrev } from "./LightBoxPrev.js";
-import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
-import { s as styles } from "../../../chunks/LightBoxControls.module-oPcN4Gxu.js";
+import { c as clsx } from "../../../chunks/vendor-1HxVLgKa.js";
+import { s as styles } from "../../../chunks/LightBoxControls.module-DNhvkSnJ.js";
 const LightBoxControls = ({ children, className, ...htmlDivAttributes }) => /* @__PURE__ */ jsx("div", { className: clsx(className, styles.lightBoxControls), ...htmlDivAttributes, "data-lightbox-component": "controls", children });
 LightBoxControls.displayName = "LightBoxControls";
 LightBoxControls.Close = LightBoxClose;

package/components/LightBox/LightBoxControls/LightBoxControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxControls.js","sources":["../../../../src/components/LightBox/LightBoxControls/LightBoxControls.tsx"],"sourcesContent":["import React from \"react\";\nimport { LightBoxClose } from \"./LightBoxClose\";\nimport { LightBoxNext } from \"./LightBoxNext\";\nimport { LightBoxPrev } from \"./LightBoxPrev\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/LightBoxControls.module.less\";\n\n/** Свойства компонента LightBoxControls. */\ninterface ILightBoxControlsProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ILightBoxControlsFC extends React.FC<ILightBoxControlsProps> {\n    Close: typeof LightBoxClose;\n    Next: typeof LightBoxNext;\n    Prev: typeof LightBoxPrev;\n}\n\n/** Контейнер кнопок-действий (закрыть/вперед/назад). */\nexport const LightBoxControls: ILightBoxControlsFC = ({ children, className, ...htmlDivAttributes }) => (\n    <div className={clsx(className, styles.lightBoxControls)} {...htmlDivAttributes} data-lightbox-component=\"controls\">\n        {children}\n    </div>\n);\n\nLightBoxControls.displayName = \"LightBoxControls\";\nLightBoxControls.Close = LightBoxClose;\nLightBoxControls.Next = LightBoxNext;\nLightBoxControls.Prev = LightBoxPrev;\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,mBAAwC,CAAC,EAAE,UAAU,WAAW,GAAG,wBAC5E,oBAAC,OAAA,EAAI,WAAW,KAAK,WAAW,OAAO,gBAAgB,GAAI,GAAG,mBAAmB,2BAAwB,YACpG,SAAA,CACL;AAGJ,iBAAiB,cAAc;AAC/B,iBAAiB,QAAQ;AACzB,iBAAiB,OAAO;AACxB,iBAAiB,OAAO;"}
+{"version":3,"file":"LightBoxControls.js","sources":["../../../../src/components/LightBox/LightBoxControls/LightBoxControls.tsx"],"sourcesContent":["import React from \"react\";\nimport { LightBoxClose } from \"./LightBoxClose\";\nimport { LightBoxNext } from \"./LightBoxNext\";\nimport { LightBoxPrev } from \"./LightBoxPrev\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/LightBoxControls.module.less\";\n\n/** Свойства компонента LightBoxControls. */\nexport interface ILightBoxControlsProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ILightBoxControlsFC extends React.FC<ILightBoxControlsProps> {\n    Close: typeof LightBoxClose;\n    Next: typeof LightBoxNext;\n    Prev: typeof LightBoxPrev;\n}\n\n/** Контейнер кнопок-действий (закрыть/вперед/назад). */\nexport const LightBoxControls: ILightBoxControlsFC = ({ children, className, ...htmlDivAttributes }) => (\n    <div className={clsx(className, styles.lightBoxControls)} {...htmlDivAttributes} data-lightbox-component=\"controls\">\n        {children}\n    </div>\n);\n\nLightBoxControls.displayName = \"LightBoxControls\";\nLightBoxControls.Close = LightBoxClose;\nLightBoxControls.Next = LightBoxNext;\nLightBoxControls.Prev = LightBoxPrev;\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,mBAAwC,CAAC,EAAE,UAAU,WAAW,GAAG,wBAC5E,oBAAC,OAAA,EAAI,WAAW,KAAK,WAAW,OAAO,gBAAgB,GAAI,GAAG,mBAAmB,2BAAwB,YACpG,SAAA,CACL;AAGJ,iBAAiB,cAAc;AAC/B,iBAAiB,QAAQ;AACzB,iBAAiB,OAAO;AACxB,iBAAiB,OAAO;"}

package/components/LightBox/LightBoxControls/LightBoxNext.js

@@ -1,57 +1,22 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef } from "react";
-import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
-import { CaretrightStrokeSrvIcon32, CaretrightStrokeSrvIcon20 } from "@sberbusiness/icons-next";
-import { TriggerClickOnKeyDownEvent } from "../../Triggers/TriggerClickOnKeyDownEvent.js";
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../../chunks/vendor-1HxVLgKa.js";
+import { CaretrightStrokeSrvIcon20, CaretrightStrokeSrvIcon32 } from "@sberbusiness/icons-next";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
-import { Button } from "../../Button/Button.js";
-import { EButtonTheme } from "../../Button/enums.js";
-import { EComponentSize } from "../../../enums/EComponentSize.js";
-import { s as styles } from "../../../chunks/LightBoxControls.module-oPcN4Gxu.js";
-const LightBoxNext = ({
-  className,
-  clickByArrowRight,
-  dataTutorialId,
-  onClick,
-  title,
-  ...htmlDivAttributes
-}) => {
-  const ref = useRef(null);
-  const renderButton = (params) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        className: clsx(styles.lightBoxControlsDesktop, styles.lightBoxNextButton),
-        "data-test-id": (params == null ? void 0 : params.addDataTestId) ? "lightBox-next" : void 0,
-        "data-tutorial-id": dataTutorialId,
-        onClick,
-        title,
-        ref: params == null ? void 0 : params.buttonRef,
-        icon: /* @__PURE__ */ jsx(CaretrightStrokeSrvIcon32, { paletteIndex: 0 }),
-        size: EComponentSize.LG,
-        theme: EButtonTheme.SECONDARY_LIGHT
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        className: clsx(styles.lightBoxControlsMobile, styles.lightBoxNextButton),
-        "data-test-id": (params == null ? void 0 : params.addDataTestId) ? "lightBox-next" : void 0,
-        "data-tutorial-id": dataTutorialId,
-        onClick,
-        title,
-        ref: params == null ? void 0 : params.buttonRef,
-        icon: /* @__PURE__ */ jsx(CaretrightStrokeSrvIcon20, { paletteIndex: 0 }),
-        size: EComponentSize.MD,
-        theme: EButtonTheme.SECONDARY_LIGHT
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsx("div", { className: clsx(className, styles.lightBoxNext), ...htmlDivAttributes, children: clickByArrowRight ? /* @__PURE__ */ jsxs("span", { children: [
-    /* @__PURE__ */ jsx("span", { className: styles.withKeyboardEvent, children: /* @__PURE__ */ jsx(TriggerClickOnKeyDownEvent, { targetRef: ref, eventKeyCode: EVENT_KEY_CODES.ARROW_RIGHT, children: renderButton({ addDataTestId: true, buttonRef: ref }) }) }),
-    /* @__PURE__ */ jsx("span", { className: styles.withoutKeyboardEvent, children: renderButton() })
-  ] }) : renderButton({ addDataTestId: true }) });
-};
+import { LightBoxArrow } from "./LightBoxArrow.js";
+import { s as styles } from "../../../chunks/LightBoxControls.module-DNhvkSnJ.js";
+const LightBoxNext = ({ className, clickByArrowRight, ...rest }) => /* @__PURE__ */ jsx(
+  LightBoxArrow,
+  {
+    ...rest,
+    buttonClassName: styles.lightBoxNextButton,
+    className: clsx(className, styles.lightBoxNext),
+    clickByArrowKey: clickByArrowRight,
+    dataTestId: "lightBox-next",
+    eventKeyCode: EVENT_KEY_CODES.ARROW_RIGHT,
+    iconDesktop: /* @__PURE__ */ jsx(CaretrightStrokeSrvIcon32, { paletteIndex: 0 }),
+    iconMobile: /* @__PURE__ */ jsx(CaretrightStrokeSrvIcon20, { paletteIndex: 0 })
+  }
+);
 LightBoxNext.displayName = "LightBoxNext";
 export {
   LightBoxNext

package/components/LightBox/LightBoxControls/LightBoxNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxNext.js","sources":["../../../../src/components/LightBox/LightBoxControls/LightBoxNext.tsx"],"sourcesContent":["import React, { Ref, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { CaretrightStrokeSrvIcon20, CaretrightStrokeSrvIcon32 } from \"@sberbusiness/icons-next\";\nimport { TriggerClickOnKeyDownEvent } from \"../../Triggers/TriggerClickOnKeyDownEvent\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport { Button } from \"../../Button/Button\";\nimport { EButtonTheme } from \"../../Button/enums\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport styles from \"../styles/LightBoxControls.module.less\";\n\n/** Свойства LightBoxNext. */\ninterface ILightBoxNextProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Кликнуть по кнопке при нажатии стрелки вправо на клавиатуре. */\n    clickByArrowRight?: boolean;\n    /** Обработчик клика по кнопке. */\n    onClick: () => void;\n    /** Идентификатор для обучающего тура. */\n    dataTutorialId?: string;\n}\n\ninterface IRenderButtonParams {\n    /** Флаг, добавляющий data-test-id. Нужен, чтобы data-test-id не дублировался несколько раз на странице. */\n    addDataTestId: boolean;\n    /** Установка ссылки на кнопку. */\n    buttonRef?: Ref<HTMLButtonElement>;\n}\n\n/** Стрелка лайтбокса \"Вперёд\". */\nexport const LightBoxNext: React.FC<ILightBoxNextProps> = ({\n    className,\n    clickByArrowRight,\n    dataTutorialId,\n    onClick,\n    title,\n    ...htmlDivAttributes\n}) => {\n    const ref = useRef<HTMLButtonElement>(null);\n\n    /**\n     * Отображение кнопки.\n     */\n    const renderButton = (params?: IRenderButtonParams) => (\n        <>\n            {/* Кнопка для экранов шире 1024px */}\n            <Button\n                className={clsx(styles.lightBoxControlsDesktop, styles.lightBoxNextButton)}\n                data-test-id={params?.addDataTestId ? \"lightBox-next\" : undefined}\n                data-tutorial-id={dataTutorialId}\n                onClick={onClick}\n                title={title}\n                ref={params?.buttonRef}\n                icon={<CaretrightStrokeSrvIcon32 paletteIndex={0} />}\n                size={EComponentSize.LG}\n                theme={EButtonTheme.SECONDARY_LIGHT}\n            />\n            {/* Кнопка для экранов менее 1024px */}\n            <Button\n                className={clsx(styles.lightBoxControlsMobile, styles.lightBoxNextButton)}\n                data-test-id={params?.addDataTestId ? \"lightBox-next\" : undefined}\n                data-tutorial-id={dataTutorialId}\n                onClick={onClick}\n                title={title}\n                ref={params?.buttonRef}\n                icon={<CaretrightStrokeSrvIcon20 paletteIndex={0} />}\n                size={EComponentSize.MD}\n                theme={EButtonTheme.SECONDARY_LIGHT}\n            />\n        </>\n    );\n\n    return (\n        <div className={clsx(className, styles.lightBoxNext)} {...htmlDivAttributes}>\n            {clickByArrowRight ? (\n                <span>\n                    {/* Кнопка с триггером при нажатии стрелки на клавиатуре. */}\n                    <span className={styles.withKeyboardEvent}>\n                        <TriggerClickOnKeyDownEvent targetRef={ref} eventKeyCode={EVENT_KEY_CODES.ARROW_RIGHT}>\n                            {renderButton({ addDataTestId: true, buttonRef: ref })}\n                        </TriggerClickOnKeyDownEvent>\n                    </span>\n                    {/* Кнопка без триггера при нажатии стрелки на клавиатуре. Нельзя нажать, когда открыт SideOverlay. */}\n                    <span className={styles.withoutKeyboardEvent}>{renderButton()}</span>\n                </span>\n            ) : (\n                renderButton({ addDataTestId: true })\n            )}\n        </div>\n    );\n};\n\nLightBoxNext.displayName = \"LightBoxNext\";\n"],"names":[],"mappings":";;;;;;;;;;AA4BO,MAAM,eAA6C,CAAC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,MAAM,OAA0B,IAAI;AAK1C,QAAM,eAAe,CAAC,WAClB,qBAAA,UAAA,EAEI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,yBAAyB,OAAO,kBAAkB;AAAA,QACzE,iBAAc,iCAAQ,iBAAgB,kBAAkB;AAAA,QACxD,oBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA,KAAK,iCAAQ;AAAA,QACb,MAAM,oBAAC,2BAAA,EAA0B,cAAc,EAAA,CAAG;AAAA,QAClD,MAAM,eAAe;AAAA,QACrB,OAAO,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAGxB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,wBAAwB,OAAO,kBAAkB;AAAA,QACxE,iBAAc,iCAAQ,iBAAgB,kBAAkB;AAAA,QACxD,oBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA,KAAK,iCAAQ;AAAA,QACb,MAAM,oBAAC,2BAAA,EAA0B,cAAc,EAAA,CAAG;AAAA,QAClD,MAAM,eAAe;AAAA,QACrB,OAAO,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EACxB,GACJ;AAGJ,SACI,oBAAC,OAAA,EAAI,WAAW,KAAK,WAAW,OAAO,YAAY,GAAI,GAAG,mBACrD,UAAA,oBACG,qBAAC,QAAA,EAEG,UAAA;AAAA,IAAA,oBAAC,UAAK,WAAW,OAAO,mBACpB,UAAA,oBAAC,4BAAA,EAA2B,WAAW,KAAK,cAAc,gBAAgB,aACrE,UAAA,aAAa,EAAE,eAAe,MAAM,WAAW,KAAK,GACzD,EAAA,CACJ;AAAA,wBAEC,QAAA,EAAK,WAAW,OAAO,sBAAuB,yBAAa,CAAE;AAAA,EAAA,EAAA,CAClE,IAEA,aAAa,EAAE,eAAe,KAAA,CAAM,EAAA,CAE5C;AAER;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"LightBoxNext.js","sources":["../../../../src/components/LightBox/LightBoxControls/LightBoxNext.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { CaretrightStrokeSrvIcon20, CaretrightStrokeSrvIcon32 } from \"@sberbusiness/icons-next\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport { LightBoxArrow } from \"./LightBoxArrow\";\nimport styles from \"../styles/LightBoxControls.module.less\";\n\n/** Свойства LightBoxNext. */\nexport interface ILightBoxNextProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Кликнуть по кнопке при нажатии стрелки вправо на клавиатуре. */\n    clickByArrowRight?: boolean;\n    /** Обработчик клика по кнопке. */\n    onClick: () => void;\n    /** Идентификатор для обучающего тура. */\n    dataTutorialId?: string;\n}\n\n/** Стрелка лайтбокса \"Вперёд\". */\nexport const LightBoxNext: React.FC<ILightBoxNextProps> = ({ className, clickByArrowRight, ...rest }) => (\n    <LightBoxArrow\n        {...rest}\n        buttonClassName={styles.lightBoxNextButton}\n        className={clsx(className, styles.lightBoxNext)}\n        clickByArrowKey={clickByArrowRight}\n        dataTestId=\"lightBox-next\"\n        eventKeyCode={EVENT_KEY_CODES.ARROW_RIGHT}\n        iconDesktop={<CaretrightStrokeSrvIcon32 paletteIndex={0} />}\n        iconMobile={<CaretrightStrokeSrvIcon20 paletteIndex={0} />}\n    />\n);\n\nLightBoxNext.displayName = \"LightBoxNext\";\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,eAA6C,CAAC,EAAE,WAAW,mBAAmB,GAAG,WAC1F;AAAA,EAAC;AAAA,EAAA;AAAA,IACI,GAAG;AAAA,IACJ,iBAAiB,OAAO;AAAA,IACxB,WAAW,KAAK,WAAW,OAAO,YAAY;AAAA,IAC9C,iBAAiB;AAAA,IACjB,YAAW;AAAA,IACX,cAAc,gBAAgB;AAAA,IAC9B,aAAa,oBAAC,2BAAA,EAA0B,cAAc,EAAA,CAAG;AAAA,IACzD,YAAY,oBAAC,2BAAA,EAA0B,cAAc,EAAA,CAAG;AAAA,EAAA;AAC5D;AAGJ,aAAa,cAAc;"}

package/components/LightBox/LightBoxControls/LightBoxPrev.js

@@ -1,57 +1,22 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef } from "react";
-import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
-import { CaretleftStrokeSrvIcon32, CaretleftStrokeSrvIcon20 } from "@sberbusiness/icons-next";
-import { EButtonTheme } from "../../Button/enums.js";
-import { TriggerClickOnKeyDownEvent } from "../../Triggers/TriggerClickOnKeyDownEvent.js";
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../../chunks/vendor-1HxVLgKa.js";
+import { CaretleftStrokeSrvIcon20, CaretleftStrokeSrvIcon32 } from "@sberbusiness/icons-next";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
-import { Button } from "../../Button/Button.js";
-import { EComponentSize } from "../../../enums/EComponentSize.js";
-import { s as styles } from "../../../chunks/LightBoxControls.module-oPcN4Gxu.js";
-const LightBoxPrev = ({
-  className,
-  clickByArrowLeft,
-  dataTutorialId,
-  onClick,
-  title,
-  ...htmlDivAttributes
-}) => {
-  const ref = useRef(null);
-  const renderButton = (params) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        className: clsx(styles.lightBoxControlsDesktop, styles.lightBoxPrevButton),
-        "data-test-id": (params == null ? void 0 : params.addDataTestId) ? "lightBox-prev" : void 0,
-        "data-tutorial-id": dataTutorialId,
-        onClick,
-        title,
-        ref: params == null ? void 0 : params.buttonRef,
-        icon: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon32, { paletteIndex: 0 }),
-        size: EComponentSize.LG,
-        theme: EButtonTheme.SECONDARY_LIGHT
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        className: clsx(styles.lightBoxControlsMobile, styles.lightBoxPrevButton),
-        "data-test-id": (params == null ? void 0 : params.addDataTestId) ? "lightBox-prev" : void 0,
-        "data-tutorial-id": dataTutorialId,
-        onClick,
-        title,
-        ref: params == null ? void 0 : params.buttonRef,
-        icon: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon20, { paletteIndex: 0 }),
-        size: EComponentSize.MD,
-        theme: EButtonTheme.SECONDARY_LIGHT
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsx("div", { className: clsx(className, styles.lightBoxPrev), ...htmlDivAttributes, children: clickByArrowLeft ? /* @__PURE__ */ jsxs("span", { children: [
-    /* @__PURE__ */ jsx("span", { className: styles.withKeyboardEvent, children: /* @__PURE__ */ jsx(TriggerClickOnKeyDownEvent, { targetRef: ref, eventKeyCode: EVENT_KEY_CODES.ARROW_LEFT, children: renderButton({ addDataTestId: true, buttonRef: ref }) }) }),
-    /* @__PURE__ */ jsx("span", { className: styles.withoutKeyboardEvent, children: renderButton() })
-  ] }) : renderButton({ addDataTestId: true }) });
-};
+import { LightBoxArrow } from "./LightBoxArrow.js";
+import { s as styles } from "../../../chunks/LightBoxControls.module-DNhvkSnJ.js";
+const LightBoxPrev = ({ className, clickByArrowLeft, ...rest }) => /* @__PURE__ */ jsx(
+  LightBoxArrow,
+  {
+    ...rest,
+    buttonClassName: styles.lightBoxPrevButton,
+    className: clsx(className, styles.lightBoxPrev),
+    clickByArrowKey: clickByArrowLeft,
+    dataTestId: "lightBox-prev",
+    eventKeyCode: EVENT_KEY_CODES.ARROW_LEFT,
+    iconDesktop: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon32, { paletteIndex: 0 }),
+    iconMobile: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon20, { paletteIndex: 0 })
+  }
+);
 LightBoxPrev.displayName = "LightBoxPrev";
 export {
   LightBoxPrev

package/components/LightBox/LightBoxControls/LightBoxPrev.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxPrev.js","sources":["../../../../src/components/LightBox/LightBoxControls/LightBoxPrev.tsx"],"sourcesContent":["import React, { Ref, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { CaretleftStrokeSrvIcon32, CaretleftStrokeSrvIcon20 } from \"@sberbusiness/icons-next\";\nimport { EButtonTheme } from \"../../Button/enums\";\nimport { TriggerClickOnKeyDownEvent } from \"../../Triggers/TriggerClickOnKeyDownEvent\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport { Button } from \"../../Button/Button\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport styles from \"../styles/LightBoxControls.module.less\";\n\n/** Свойства LightBoxPrev. */\ninterface ILightBoxPrevProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Кликнуть по кнопке при нажатии стрелки влево на клавиатуре. */\n    clickByArrowLeft?: boolean;\n    /** Обработчик клика по кнопке. */\n    onClick: () => void;\n    /** Идентификатор для обучающего тура. */\n    dataTutorialId?: string;\n}\n\ninterface IRenderButtonParams {\n    /** Флаг, добавляющий data-test-id. Нужен, чтобы data-test-id не дублировался несколько раз на странице. */\n    addDataTestId: boolean;\n    /** Установка ссылки на кнопку. */\n    buttonRef?: Ref<HTMLButtonElement>;\n}\n\n/** Стрелка лайтбокса \"Назад\". */\nexport const LightBoxPrev: React.FC<ILightBoxPrevProps> = ({\n    className,\n    clickByArrowLeft,\n    dataTutorialId,\n    onClick,\n    title,\n    ...htmlDivAttributes\n}) => {\n    const ref = useRef<HTMLButtonElement>(null);\n\n    /**\n     * Отображение кнопки.\n     */\n    const renderButton = (params?: IRenderButtonParams) => (\n        <>\n            {/* Кнопка для экранов шире 1024px */}\n            <Button\n                className={clsx(styles.lightBoxControlsDesktop, styles.lightBoxPrevButton)}\n                data-test-id={params?.addDataTestId ? \"lightBox-prev\" : undefined}\n                data-tutorial-id={dataTutorialId}\n                onClick={onClick}\n                title={title}\n                ref={params?.buttonRef}\n                icon={<CaretleftStrokeSrvIcon32 paletteIndex={0} />}\n                size={EComponentSize.LG}\n                theme={EButtonTheme.SECONDARY_LIGHT}\n            />\n            {/* Кнопка для экранов менее 1024px */}\n            <Button\n                className={clsx(styles.lightBoxControlsMobile, styles.lightBoxPrevButton)}\n                data-test-id={params?.addDataTestId ? \"lightBox-prev\" : undefined}\n                data-tutorial-id={dataTutorialId}\n                onClick={onClick}\n                title={title}\n                ref={params?.buttonRef}\n                icon={<CaretleftStrokeSrvIcon20 paletteIndex={0} />}\n                size={EComponentSize.MD}\n                theme={EButtonTheme.SECONDARY_LIGHT}\n            />\n        </>\n    );\n\n    return (\n        <div className={clsx(className, styles.lightBoxPrev)} {...htmlDivAttributes}>\n            {clickByArrowLeft ? (\n                <span>\n                    {/* Кнопка с триггером при нажатии стрелки на клавиатуре. */}\n                    <span className={styles.withKeyboardEvent}>\n                        <TriggerClickOnKeyDownEvent targetRef={ref} eventKeyCode={EVENT_KEY_CODES.ARROW_LEFT}>\n                            {renderButton({ addDataTestId: true, buttonRef: ref })}\n                        </TriggerClickOnKeyDownEvent>\n                    </span>\n                    {/* Кнопка без триггера при нажатии стрелки на клавиатуре. Нельзя нажать, когда открыт\n                         SideOverlay. */}\n                    <span className={styles.withoutKeyboardEvent}>{renderButton()}</span>\n                </span>\n            ) : (\n                renderButton({ addDataTestId: true })\n            )}\n        </div>\n    );\n};\n\nLightBoxPrev.displayName = \"LightBoxPrev\";\n"],"names":[],"mappings":";;;;;;;;;;AA4BO,MAAM,eAA6C,CAAC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,MAAM,OAA0B,IAAI;AAK1C,QAAM,eAAe,CAAC,WAClB,qBAAA,UAAA,EAEI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,yBAAyB,OAAO,kBAAkB;AAAA,QACzE,iBAAc,iCAAQ,iBAAgB,kBAAkB;AAAA,QACxD,oBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA,KAAK,iCAAQ;AAAA,QACb,MAAM,oBAAC,0BAAA,EAAyB,cAAc,EAAA,CAAG;AAAA,QACjD,MAAM,eAAe;AAAA,QACrB,OAAO,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,IAGxB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,wBAAwB,OAAO,kBAAkB;AAAA,QACxE,iBAAc,iCAAQ,iBAAgB,kBAAkB;AAAA,QACxD,oBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA,KAAK,iCAAQ;AAAA,QACb,MAAM,oBAAC,0BAAA,EAAyB,cAAc,EAAA,CAAG;AAAA,QACjD,MAAM,eAAe;AAAA,QACrB,OAAO,aAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EACxB,GACJ;AAGJ,SACI,oBAAC,OAAA,EAAI,WAAW,KAAK,WAAW,OAAO,YAAY,GAAI,GAAG,mBACrD,UAAA,mBACG,qBAAC,QAAA,EAEG,UAAA;AAAA,IAAA,oBAAC,UAAK,WAAW,OAAO,mBACpB,UAAA,oBAAC,4BAAA,EAA2B,WAAW,KAAK,cAAc,gBAAgB,YACrE,UAAA,aAAa,EAAE,eAAe,MAAM,WAAW,KAAK,GACzD,EAAA,CACJ;AAAA,wBAGC,QAAA,EAAK,WAAW,OAAO,sBAAuB,yBAAa,CAAE;AAAA,EAAA,EAAA,CAClE,IAEA,aAAa,EAAE,eAAe,KAAA,CAAM,EAAA,CAE5C;AAER;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"LightBoxPrev.js","sources":["../../../../src/components/LightBox/LightBoxControls/LightBoxPrev.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { CaretleftStrokeSrvIcon32, CaretleftStrokeSrvIcon20 } from \"@sberbusiness/icons-next\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport { LightBoxArrow } from \"./LightBoxArrow\";\nimport styles from \"../styles/LightBoxControls.module.less\";\n\n/** Свойства LightBoxPrev. */\nexport interface ILightBoxPrevProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Кликнуть по кнопке при нажатии стрелки влево на клавиатуре. */\n    clickByArrowLeft?: boolean;\n    /** Обработчик клика по кнопке. */\n    onClick: () => void;\n    /** Идентификатор для обучающего тура. */\n    dataTutorialId?: string;\n}\n\n/** Стрелка лайтбокса \"Назад\". */\nexport const LightBoxPrev: React.FC<ILightBoxPrevProps> = ({ className, clickByArrowLeft, ...rest }) => (\n    <LightBoxArrow\n        {...rest}\n        buttonClassName={styles.lightBoxPrevButton}\n        className={clsx(className, styles.lightBoxPrev)}\n        clickByArrowKey={clickByArrowLeft}\n        dataTestId=\"lightBox-prev\"\n        eventKeyCode={EVENT_KEY_CODES.ARROW_LEFT}\n        iconDesktop={<CaretleftStrokeSrvIcon32 paletteIndex={0} />}\n        iconMobile={<CaretleftStrokeSrvIcon20 paletteIndex={0} />}\n    />\n);\n\nLightBoxPrev.displayName = \"LightBoxPrev\";\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,eAA6C,CAAC,EAAE,WAAW,kBAAkB,GAAG,WACzF;AAAA,EAAC;AAAA,EAAA;AAAA,IACI,GAAG;AAAA,IACJ,iBAAiB,OAAO;AAAA,IACxB,WAAW,KAAK,WAAW,OAAO,YAAY;AAAA,IAC9C,iBAAiB;AAAA,IACjB,YAAW;AAAA,IACX,cAAc,gBAAgB;AAAA,IAC9B,aAAa,oBAAC,0BAAA,EAAyB,cAAc,EAAA,CAAG;AAAA,IACxD,YAAY,oBAAC,0BAAA,EAAyB,cAAc,EAAA,CAAG;AAAA,EAAA;AAC3D;AAGJ,aAAa,cAAc;"}