@sberbusiness/triplex-next 1.38.0 → 1.40.0

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-CtuAQuEN.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-Buvm7RbG.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-CtuAQuEN.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-NJhXErnc.js";
+import { s as styles } from "../../../chunks/LightBoxControls.module-Buvm7RbG.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-NJhXErnc.js";
+import { c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
+import { s as styles } from "../../../chunks/LightBoxControls.module-Buvm7RbG.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-CtuAQuEN.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-NJhXErnc.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-Buvm7RbG.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-CtuAQuEN.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-NJhXErnc.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-Buvm7RbG.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;"}

package/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlay.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { useState, useRef, useEffect } from "react";
-import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
 import { FocusTrapExtended } from "../../FocusTrapExtended/FocusTrapExtended.js";
 import { OverlayBase, EOverlayDirection } from "../../Overlay/OverlayBase.js";
 import { OverlayMask } from "../../Overlay/OverlayMask.js";
@@ -10,18 +10,18 @@ import { LightBoxSideOverlayCloseMobile } from "./LightBoxSideOverlayCloseMobile
 import { LightBoxSideOverlayCloseDesktop } from "./LightBoxSideOverlayCloseDesktop.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
-const lightBoxSideOverlayMask = "lightBoxSideOverlayMask__5eeea1c1";
-const lightBoxSideOverlayWrapper = "lightBoxSideOverlayWrapper__cbb8edf4";
-const overflowXHidden = "overflowXHidden__71cd45a1";
-const overflowYHidden = "overflowYHidden__dd762d00";
-const closing = "closing__c13642ba";
-const opened = "opened__78fca4a0";
-const lightBoxSideOverlayContent = "lightBoxSideOverlayContent__9808f5f8";
-const opening = "opening__b5dfd63c";
-const sm = "sm__7582d3d9";
-const md = "md__5e8ebd65";
-const lg = "lg__d9ada402";
-const lightBoxSideOverlay = "lightBoxSideOverlay__b47b7263";
+const lightBoxSideOverlayMask = "lightBoxSideOverlayMask__40743179";
+const lightBoxSideOverlayWrapper = "lightBoxSideOverlayWrapper__9209726d";
+const overflowXHidden = "overflowXHidden__791e4ab3";
+const overflowYHidden = "overflowYHidden__cfc9467a";
+const closing = "closing__be0ff59f";
+const opened = "opened__5908c053";
+const lightBoxSideOverlayContent = "lightBoxSideOverlayContent__64b3f53b";
+const opening = "opening__03a230ea";
+const sm = "sm__5ebd330a";
+const md = "md__3911352d";
+const lg = "lg__c0f76f3e";
+const lightBoxSideOverlay = "lightBoxSideOverlay__0848a486";
 const styles = {
   lightBoxSideOverlayMask,
   lightBoxSideOverlayWrapper,
@@ -37,6 +37,8 @@ const styles = {
   lightBoxSideOverlay
 };
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const setOpened = () => {
+};
 const LightBoxSideOverlayBase = React__default.forwardRef(
   ({
     children,
@@ -95,8 +97,6 @@ const LightBoxSideOverlayBase = React__default.forwardRef(
         ]
       }
     );
-    const setOpened = () => {
-    };
     const classNameOverlayWrapper = clsx(className, styles.lightBoxSideOverlayWrapper, sizeToClassNameMap[size], {
       [styles.closing]: closing2,
       [styles.opened]: opened2,

package/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxSideOverlay.js","sources":["../../../../src/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlay.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { FocusTrapExtended, IFocusTrapExtendedProps } from \"../../FocusTrapExtended\";\nimport {\n    EOverlayDirection,\n    IOverlayBaseProps,\n    OverlayBase,\n    IOverlayChildrenProvideProps,\n} from \"../../Overlay/OverlayBase\";\nimport { OverlayMask } from \"../../Overlay/OverlayMask\";\nimport { ILoaderScreenMiddleProps } from \"../../LoaderScreen/LoaderScreen\";\nimport { LightBoxSideOverlayLoader } from \"./LightBoxSideOverlayLoader\";\nimport { FocusTrapUtils } from \"../../../utils/focus/FocusTrapUtils\";\nimport { LightBoxSideOverlayCloseMobile } from \"./LightBoxSideOverlayCloseMobile\";\nimport { LightBoxSideOverlayCloseDesktop } from \"./LightBoxSideOverlayCloseDesktop\";\nimport { EComponentSize } from \"../../../enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport styles from \"./styles/LightBoxSideOverlay.module.less\";\n\n/** Свойства компонента LightBoxSideOverlay. */\nexport interface ILightBoxSideOverlayProps\n    extends React.HTMLAttributes<HTMLDivElement>, Pick<IOverlayBaseProps, \"opened\" | \"onClose\" | \"onOpen\"> {\n    /** Свойства компонента FocusTrapExtended. */\n    focusTrapProps?: IFocusTrapExtendedProps;\n    /** Состояние загрузки. */\n    isLoading?: boolean;\n    /** Свойства компонента LoaderScreen. */\n    loaderScreenProps?: ILoaderScreenMiddleProps;\n    /** Открыт другой SideOverlay поверх текущего. */\n    isTopLevelSideOverlayOpened?: boolean;\n    /** Открыт TopOverlay в текущем SideOverlay. */\n    isTopOverlayOpened?: boolean;\n    /** Размер компонента. */\n    size?: EComponentSize;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\nconst LightBoxSideOverlayBase = React.forwardRef<HTMLDivElement, ILightBoxSideOverlayProps>(\n    (\n        {\n            children,\n            className,\n            focusTrapProps,\n            isLoading,\n            loaderScreenProps,\n            isTopLevelSideOverlayOpened,\n            isTopOverlayOpened,\n            onClose,\n            onOpen,\n            opened,\n            size = EComponentSize.MD,\n            ...htmlDivAttributes\n        },\n        ref,\n    ) => {\n        // Флаг, в текущий момент оверлей закрывается.\n        const [closing, setClosing] = useState(false);\n        // Флаг, в текущий момент оверлей открывается.\n        const [opening, setOpening] = useState(false);\n        // Предыдущее состояние открыт/закрыт.\n        const prevOpened = useRef(opened);\n        const contentRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (prevOpened.current && !opened) {\n                setOpening(false); // opened меняется в процессе анимации открытия.\n                setClosing(true);\n            } else if (!prevOpened.current && opened) {\n                setClosing(false); // opened меняется в процессе анимации закрытия.\n                setOpening(true);\n            }\n\n            prevOpened.current = opened;\n        }, [opened]);\n\n        const handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {\n            const { target, currentTarget } = event;\n\n            if (target === currentTarget) {\n                if (closing) {\n                    setClosing(false);\n                    onClose?.();\n                } else if (opening) {\n                    setOpening(false);\n                    onOpen?.();\n                }\n            }\n        };\n\n        const renderMask = ({ opened }: IOverlayChildrenProvideProps) => (\n            <OverlayMask opened={opened} className={styles.lightBoxSideOverlayMask} />\n        );\n\n        const renderPanel = () => (\n            <div\n                className={clsx(styles.lightBoxSideOverlayContent, {\n                    [styles.closing]: closing,\n                    [styles.opening]: opening,\n                    [styles.opened]: opened,\n                })}\n                onTransitionEnd={handleTransitionEnd}\n                ref={contentRef}\n            >\n                {children}\n\n                {isLoading && <LightBoxSideOverlayLoader loaderScreenProps={loaderScreenProps} />}\n            </div>\n        );\n\n        const setOpened = () => {};\n\n        const classNameOverlayWrapper = clsx(className, styles.lightBoxSideOverlayWrapper, sizeToClassNameMap[size], {\n            [styles.closing]: closing,\n            [styles.opened]: opened,\n            [styles.overflowXHidden]: Boolean(isTopLevelSideOverlayOpened) || Boolean(isLoading),\n            [styles.overflowYHidden]:\n                Boolean(isTopLevelSideOverlayOpened) || Boolean(isLoading) || Boolean(isTopOverlayOpened),\n        });\n\n        const renderOverlay = (provideProps: IOverlayChildrenProvideProps) => (\n            <>\n                {renderMask(provideProps)}\n                {renderPanel()}\n            </>\n        );\n\n        return (\n            <FocusTrapExtended\n                active={opened && !opening && !closing}\n                {...focusTrapProps}\n                focusTrapOptions={{\n                    allowOutsideClick: true,\n                    initialFocus: () => FocusTrapUtils.getFirstInteractionElementByDataAttr(contentRef.current),\n                    preventScroll: true,\n                    ...focusTrapProps?.focusTrapOptions,\n                }}\n            >\n                <div\n                    className={classNameOverlayWrapper}\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    {...htmlDivAttributes}\n                    ref={ref}\n                >\n                    <div\n                        className={clsx(styles.lightBoxSideOverlay, {\n                            [styles.closing]: closing,\n                            [styles.opening]: opening,\n                        })}\n                    >\n                        <OverlayBase direction={EOverlayDirection.RIGHT} opened={opened} setOpened={setOpened}>\n                            {renderOverlay}\n                        </OverlayBase>\n                    </div>\n                </div>\n            </FocusTrapExtended>\n        );\n    },\n);\n\nLightBoxSideOverlayBase.displayName = \"LightBoxSideOverlay\";\n\n/** Боковая панель LightBox, выезжающая с правой стороны. */\nexport const LightBoxSideOverlay = Object.assign(LightBoxSideOverlayBase, {\n    CloseDesktop: LightBoxSideOverlayCloseDesktop,\n    CloseMobile: LightBoxSideOverlayCloseMobile,\n});\n"],"names":["React","opened","closing","opening"],"mappings":"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"}
+{"version":3,"file":"LightBoxSideOverlay.js","sources":["../../../../src/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlay.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { FocusTrapExtended, IFocusTrapExtendedProps } from \"../../FocusTrapExtended\";\nimport {\n    EOverlayDirection,\n    IOverlayBaseProps,\n    OverlayBase,\n    IOverlayChildrenProvideProps,\n} from \"../../Overlay/OverlayBase\";\nimport { OverlayMask } from \"../../Overlay/OverlayMask\";\nimport { ILoaderScreenMiddleProps } from \"../../LoaderScreen/LoaderScreen\";\nimport { LightBoxSideOverlayLoader } from \"./LightBoxSideOverlayLoader\";\nimport { FocusTrapUtils } from \"../../../utils/focus/FocusTrapUtils\";\nimport { LightBoxSideOverlayCloseMobile } from \"./LightBoxSideOverlayCloseMobile\";\nimport { LightBoxSideOverlayCloseDesktop } from \"./LightBoxSideOverlayCloseDesktop\";\nimport { EComponentSize } from \"../../../enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport styles from \"./styles/LightBoxSideOverlay.module.less\";\n\n/** Свойства компонента LightBoxSideOverlay. */\nexport interface ILightBoxSideOverlayProps\n    extends React.HTMLAttributes<HTMLDivElement>, Pick<IOverlayBaseProps, \"opened\" | \"onClose\" | \"onOpen\"> {\n    /** Свойства компонента FocusTrapExtended. */\n    focusTrapProps?: IFocusTrapExtendedProps;\n    /** Состояние загрузки. */\n    isLoading?: boolean;\n    /** Свойства компонента LoaderScreen. */\n    loaderScreenProps?: ILoaderScreenMiddleProps;\n    /** Открыт другой SideOverlay поверх текущего. */\n    isTopLevelSideOverlayOpened?: boolean;\n    /** Открыт TopOverlay в текущем SideOverlay. */\n    isTopOverlayOpened?: boolean;\n    /** Размер компонента. */\n    size?: EComponentSize;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Заглушка для OverlayBase: состояние открытия SideOverlay управляется снаружи через prop opened. */\nconst setOpened = () => {};\n\nconst LightBoxSideOverlayBase = React.forwardRef<HTMLDivElement, ILightBoxSideOverlayProps>(\n    (\n        {\n            children,\n            className,\n            focusTrapProps,\n            isLoading,\n            loaderScreenProps,\n            isTopLevelSideOverlayOpened,\n            isTopOverlayOpened,\n            onClose,\n            onOpen,\n            opened,\n            size = EComponentSize.MD,\n            ...htmlDivAttributes\n        },\n        ref,\n    ) => {\n        // Флаг, в текущий момент оверлей закрывается.\n        const [closing, setClosing] = useState(false);\n        // Флаг, в текущий момент оверлей открывается.\n        const [opening, setOpening] = useState(false);\n        // Предыдущее состояние открыт/закрыт.\n        const prevOpened = useRef(opened);\n        const contentRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (prevOpened.current && !opened) {\n                setOpening(false); // opened меняется в процессе анимации открытия.\n                setClosing(true);\n            } else if (!prevOpened.current && opened) {\n                setClosing(false); // opened меняется в процессе анимации закрытия.\n                setOpening(true);\n            }\n\n            prevOpened.current = opened;\n        }, [opened]);\n\n        const handleTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {\n            const { target, currentTarget } = event;\n\n            if (target === currentTarget) {\n                if (closing) {\n                    setClosing(false);\n                    onClose?.();\n                } else if (opening) {\n                    setOpening(false);\n                    onOpen?.();\n                }\n            }\n        };\n\n        const renderMask = ({ opened }: IOverlayChildrenProvideProps) => (\n            <OverlayMask opened={opened} className={styles.lightBoxSideOverlayMask} />\n        );\n\n        const renderPanel = () => (\n            <div\n                className={clsx(styles.lightBoxSideOverlayContent, {\n                    [styles.closing]: closing,\n                    [styles.opening]: opening,\n                    [styles.opened]: opened,\n                })}\n                onTransitionEnd={handleTransitionEnd}\n                ref={contentRef}\n            >\n                {children}\n\n                {isLoading && <LightBoxSideOverlayLoader loaderScreenProps={loaderScreenProps} />}\n            </div>\n        );\n\n        const classNameOverlayWrapper = clsx(className, styles.lightBoxSideOverlayWrapper, sizeToClassNameMap[size], {\n            [styles.closing]: closing,\n            [styles.opened]: opened,\n            [styles.overflowXHidden]: Boolean(isTopLevelSideOverlayOpened) || Boolean(isLoading),\n            [styles.overflowYHidden]:\n                Boolean(isTopLevelSideOverlayOpened) || Boolean(isLoading) || Boolean(isTopOverlayOpened),\n        });\n\n        const renderOverlay = (provideProps: IOverlayChildrenProvideProps) => (\n            <>\n                {renderMask(provideProps)}\n                {renderPanel()}\n            </>\n        );\n\n        return (\n            <FocusTrapExtended\n                active={opened && !opening && !closing}\n                {...focusTrapProps}\n                focusTrapOptions={{\n                    allowOutsideClick: true,\n                    initialFocus: () => FocusTrapUtils.getFirstInteractionElementByDataAttr(contentRef.current),\n                    preventScroll: true,\n                    ...focusTrapProps?.focusTrapOptions,\n                }}\n            >\n                <div\n                    className={classNameOverlayWrapper}\n                    role=\"dialog\"\n                    aria-modal=\"true\"\n                    {...htmlDivAttributes}\n                    ref={ref}\n                >\n                    <div\n                        className={clsx(styles.lightBoxSideOverlay, {\n                            [styles.closing]: closing,\n                            [styles.opening]: opening,\n                        })}\n                    >\n                        <OverlayBase direction={EOverlayDirection.RIGHT} opened={opened} setOpened={setOpened}>\n                            {renderOverlay}\n                        </OverlayBase>\n                    </div>\n                </div>\n            </FocusTrapExtended>\n        );\n    },\n);\n\nLightBoxSideOverlayBase.displayName = \"LightBoxSideOverlay\";\n\n/** Боковая панель LightBox, выезжающая с правой стороны. */\nexport const LightBoxSideOverlay = Object.assign(LightBoxSideOverlayBase, {\n    CloseDesktop: LightBoxSideOverlayCloseDesktop,\n    CloseMobile: LightBoxSideOverlayCloseMobile,\n});\n"],"names":["React","opened","closing","opening"],"mappings":"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"}

package/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlayCloseDesktop.js

@@ -2,12 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { TriggerClickOnKeyDownEvent } from "../../Triggers/TriggerClickOnKeyDownEvent.js";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
-import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
 import { CrossStrokeSrvIcon32 } from "@sberbusiness/icons-next";
 import { EButtonTheme } from "../../Button/enums.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { Button } from "../../Button/Button.js";
-import { s as styles } from "../../../chunks/LightBoxSideOverlayClose.module-DH3toLJp.js";
+import { s as styles } from "../../../chunks/LightBoxSideOverlayClose.module-eTdxNvSz.js";
 const LightBoxSideOverlayCloseDesktop = ({
   className,
   clickByEsc,

package/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlayCloseMobile.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { c as clsx } from "../../../chunks/vendor-CtuAQuEN.js";
 import { CrossStrokeSrvIcon20 } from "@sberbusiness/icons-next";
-import { s as styles } from "../../../chunks/LightBoxSideOverlayClose.module-DH3toLJp.js";
+import { s as styles } from "../../../chunks/LightBoxSideOverlayClose.module-eTdxNvSz.js";
 import { EButtonTheme } from "../../Button/enums.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { Button } from "../../Button/Button.js";

package/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlayLoader.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { LoaderScreen } from "../../LoaderScreen/LoaderScreen.js";
-const lightBoxSideOverlayLoaderWrapper = "lightBoxSideOverlayLoaderWrapper__e0ea78b6";
+const lightBoxSideOverlayLoaderWrapper = "lightBoxSideOverlayLoaderWrapper__099ceed8";
 const styles = {
   lightBoxSideOverlayLoaderWrapper
 };
@@ -9,18 +9,15 @@ const LightBoxSideOverlayLoader = ({ loaderScreenProps }) => {
   const [topPosition, setTopPosition] = useState(0);
   const loaderRef = useRef(null);
   useEffect(() => {
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       if (loaderRef.current) {
         const position = loaderRef.current.getBoundingClientRect();
-        if (position.top !== topPosition) {
-          if (position.top > 0) {
-            setTopPosition(0);
-          } else {
-            setTopPosition(Math.abs(position.top));
-          }
+        if (position.top < 0) {
+          setTopPosition(Math.abs(position.top));
         }
       }
     });
+    return () => clearTimeout(timeoutId);
   }, []);
   return /* @__PURE__ */ jsx("div", { ref: loaderRef, className: styles.lightBoxSideOverlayLoaderWrapper, style: { top: `${topPosition}px` }, children: /* @__PURE__ */ jsx(LoaderScreen, { ...loaderScreenProps, type: "middle" }) });
 };

package/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlayLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxSideOverlayLoader.js","sources":["../../../../src/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlayLoader.tsx"],"sourcesContent":["import React from \"react\";\nimport { useEffect, useState, useRef } from \"react\";\nimport { LoaderScreen, ILoaderScreenMiddleProps } from \"../../LoaderScreen/LoaderScreen\";\nimport styles from \"./styles/LightBoxSideOverlayLoader.module.less\";\n\ninterface ILightBoxSideOverlayLoaderProps {\n    /** Свойства компонента LoaderScreen. */\n    loaderScreenProps?: ILoaderScreenMiddleProps;\n}\n\nexport const LightBoxSideOverlayLoader: React.FC<ILightBoxSideOverlayLoaderProps> = ({ loaderScreenProps }) => {\n    // Позиция top, высчитывается из scrollTop родителя.\n    const [topPosition, setTopPosition] = useState<number | string>(0);\n    const loaderRef = useRef<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n        setTimeout(() => {\n            if (loaderRef.current) {\n                const position = loaderRef.current.getBoundingClientRect();\n                // position.top равен высоте скролла родителя.\n                if (position.top !== topPosition) {\n                    if (position.top > 0) {\n                        setTopPosition(0);\n                    } else {\n                        setTopPosition(Math.abs(position.top));\n                    }\n                }\n            }\n        });\n    }, []);\n\n    return (\n        <div ref={loaderRef} className={styles.lightBoxSideOverlayLoaderWrapper} style={{ top: `${topPosition}px` }}>\n            <LoaderScreen {...loaderScreenProps} type=\"middle\" />\n        </div>\n    );\n};\n\nLightBoxSideOverlayLoader.displayName = \"LightBoxSideOverlayLoader\";\n"],"names":[],"mappings":";;;;;;;AAUO,MAAM,4BAAuE,CAAC,EAAE,wBAAwB;AAE3G,QAAM,CAAC,aAAa,cAAc,IAAI,SAA0B,CAAC;AACjE,QAAM,YAAY,OAA8B,IAAI;AAEpD,YAAU,MAAM;AACZ,eAAW,MAAM;AACb,UAAI,UAAU,SAAS;AACnB,cAAM,WAAW,UAAU,QAAQ,sBAAA;AAEnC,YAAI,SAAS,QAAQ,aAAa;AAC9B,cAAI,SAAS,MAAM,GAAG;AAClB,2BAAe,CAAC;AAAA,UACpB,OAAO;AACH,2BAAe,KAAK,IAAI,SAAS,GAAG,CAAC;AAAA,UACzC;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ,CAAC;AAAA,EACL,GAAG,CAAA,CAAE;AAEL,SACI,oBAAC,SAAI,KAAK,WAAW,WAAW,OAAO,kCAAkC,OAAO,EAAE,KAAK,GAAG,WAAW,KAAA,GACjG,UAAA,oBAAC,cAAA,EAAc,GAAG,mBAAmB,MAAK,UAAS,EAAA,CACvD;AAER;AAEA,0BAA0B,cAAc;"}
+{"version":3,"file":"LightBoxSideOverlayLoader.js","sources":["../../../../src/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlayLoader.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { LoaderScreen, ILoaderScreenMiddleProps } from \"../../LoaderScreen/LoaderScreen\";\nimport styles from \"./styles/LightBoxSideOverlayLoader.module.less\";\n\n/** Свойства компонента LightBoxSideOverlayLoader. */\nexport interface ILightBoxSideOverlayLoaderProps {\n    /** Свойства компонента LoaderScreen. */\n    loaderScreenProps?: ILoaderScreenMiddleProps;\n}\n\n/** Экран загрузки, перекрывающий содержимое SideOverlay. */\nexport const LightBoxSideOverlayLoader: React.FC<ILightBoxSideOverlayLoaderProps> = ({ loaderScreenProps }) => {\n    // Позиция top, высчитывается из scrollTop родителя.\n    const [topPosition, setTopPosition] = useState<number>(0);\n    const loaderRef = useRef<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n        const timeoutId = setTimeout(() => {\n            if (loaderRef.current) {\n                const position = loaderRef.current.getBoundingClientRect();\n                // position.top равен высоте скролла родителя. Отрицательное значение — родитель прокручен вниз.\n                if (position.top < 0) {\n                    setTopPosition(Math.abs(position.top));\n                }\n            }\n        });\n\n        return () => clearTimeout(timeoutId);\n    }, []);\n\n    return (\n        <div ref={loaderRef} className={styles.lightBoxSideOverlayLoaderWrapper} style={{ top: `${topPosition}px` }}>\n            <LoaderScreen {...loaderScreenProps} type=\"middle\" />\n        </div>\n    );\n};\n\nLightBoxSideOverlayLoader.displayName = \"LightBoxSideOverlayLoader\";\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,4BAAuE,CAAC,EAAE,wBAAwB;AAE3G,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,CAAC;AACxD,QAAM,YAAY,OAA8B,IAAI;AAEpD,YAAU,MAAM;AACZ,UAAM,YAAY,WAAW,MAAM;AAC/B,UAAI,UAAU,SAAS;AACnB,cAAM,WAAW,UAAU,QAAQ,sBAAA;AAEnC,YAAI,SAAS,MAAM,GAAG;AAClB,yBAAe,KAAK,IAAI,SAAS,GAAG,CAAC;AAAA,QACzC;AAAA,MACJ;AAAA,IACJ,CAAC;AAED,WAAO,MAAM,aAAa,SAAS;AAAA,EACvC,GAAG,CAAA,CAAE;AAEL,SACI,oBAAC,SAAI,KAAK,WAAW,WAAW,OAAO,kCAAkC,OAAO,EAAE,KAAK,GAAG,WAAW,KAAA,GACjG,UAAA,oBAAC,cAAA,EAAc,GAAG,mBAAmB,MAAK,UAAS,EAAA,CACvD;AAER;AAEA,0BAA0B,cAAc;"}