@sberbusiness/triplex-next 0.37.0 → 0.39.0

package/components/LightBox/LightBoxSideOverlay/LightBoxSideOverlay.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect } from "react";
-import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.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__ffc82440";
-const lightBoxSideOverlayWrapper = "lightBoxSideOverlayWrapper__fb5b3e98";
-const overflowXHidden = "overflowXHidden__36ca3b3b";
-const overflowYHidden = "overflowYHidden__3634de38";
-const closing = "closing__8613ef11";
-const opened = "opened__397655ed";
-const lightBoxSideOverlayContent = "lightBoxSideOverlayContent__8ed85f7f";
-const opening = "opening__59d09fa3";
-const sm = "sm__ad8bd5ca";
-const md = "md__60f396d6";
-const lg = "lg__34a5a10f";
-const lightBoxSideOverlay = "lightBoxSideOverlay__2e591089";
+const lightBoxSideOverlayMask = "lightBoxSideOverlayMask__f5d5c696";
+const lightBoxSideOverlayWrapper = "lightBoxSideOverlayWrapper__cd15d6fc";
+const overflowXHidden = "overflowXHidden__4c851297";
+const overflowYHidden = "overflowYHidden__fbb94e00";
+const closing = "closing__a0ed5bc8";
+const opened = "opened__5adfae31";
+const lightBoxSideOverlayContent = "lightBoxSideOverlayContent__8c55080c";
+const opening = "opening__58c96cff";
+const sm = "sm__d8f82c13";
+const md = "md__865bf87c";
+const lg = "lg__0f219463";
+const lightBoxSideOverlay = "lightBoxSideOverlay__83c72f6d";
 const styles = {
   lightBoxSideOverlayMask,
   lightBoxSideOverlayWrapper,
@@ -37,6 +37,8 @@ const styles = {
   lightBoxSideOverlay
 };
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const setOpened = () => {
+};
 const LightBoxSideOverlayBase = React.forwardRef(
   ({
     children,
@@ -95,8 +97,6 @@ const LightBoxSideOverlayBase = React.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":["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":["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-BtZO8a0z.js";
+import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.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-CNNq1ih2.js";
+import { s as styles } from "../../../chunks/LightBoxSideOverlayClose.module-BVuB53vM.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-BtZO8a0z.js";
+import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
 import { CrossStrokeSrvIcon20 } from "@sberbusiness/icons-next";
-import { s as styles } from "../../../chunks/LightBoxSideOverlayClose.module-CNNq1ih2.js";
+import { s as styles } from "../../../chunks/LightBoxSideOverlayClose.module-BVuB53vM.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__219bb71e";
+const lightBoxSideOverlayLoaderWrapper = "lightBoxSideOverlayLoaderWrapper__39b15751";
 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;"}

package/components/LightBox/LightBoxSidebars/LightBoxLeftSidebar.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useImperativeHandle, useState, useEffect } from "react";
-import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
-const lightBoxLeftSidebar = "lightBoxLeftSidebar__83ff4968";
-const fixed = "fixed__d0b90922";
-const hidden = "hidden__bba23518";
+import { forwardRef, useRef, useImperativeHandle } from "react";
+import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
+import { useLightBoxSidebarVisibility } from "./useLightBoxSidebarVisibility.js";
+const lightBoxLeftSidebar = "lightBoxLeftSidebar__dcbdf6d4";
+const fixed = "fixed__4c700ee7";
+const hidden = "hidden__1800283f";
 const styles = {
   lightBoxLeftSidebar,
   fixed,
@@ -13,35 +14,7 @@ const LightBoxLeftSidebar = forwardRef(
   ({ children, className, fixed: fixed2, minVisibleWidth = 100, onShow, onHide, ...htmlDivAttributes }, ref) => {
     const outerRef = useRef(null);
     useImperativeHandle(ref, () => outerRef.current);
-    const [isVisible, setIsVisible] = useState(true);
-    const onShowRef = useRef(onShow);
-    const onHideRef = useRef(onHide);
-    useEffect(() => {
-      onShowRef.current = onShow;
-      onHideRef.current = onHide;
-    }, [onShow, onHide]);
-    useEffect(() => {
-      const element = outerRef.current;
-      if (!element) return;
-      const observer = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const shouldBeVisible = entry.contentRect.width > minVisibleWidth;
-          setIsVisible((prev) => {
-            var _a, _b;
-            if (shouldBeVisible !== prev) {
-              if (shouldBeVisible) {
-                (_a = onShowRef.current) == null ? void 0 : _a.call(onShowRef);
-              } else {
-                (_b = onHideRef.current) == null ? void 0 : _b.call(onHideRef);
-              }
-            }
-            return shouldBeVisible;
-          });
-        }
-      });
-      observer.observe(element);
-      return () => observer.disconnect();
-    }, [minVisibleWidth]);
+    const isVisible = useLightBoxSidebarVisibility(outerRef, { minVisibleWidth, onShow, onHide });
     return /* @__PURE__ */ jsx(
       "div",
       {

package/components/LightBox/LightBoxSidebars/LightBoxLeftSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxLeftSidebar.js","sources":["../../../../src/components/LightBox/LightBoxSidebars/LightBoxLeftSidebar.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/LightBoxLeftSidebar.module.less\";\n\nexport interface ILightBoxLeftSidebarProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Фиксация боковой панели. */\n    fixed?: boolean;\n    /** Минимальная ширина (в пикселях), при которой содержимое боковой панели отображается. По умолчанию 100. */\n    minVisibleWidth?: number;\n    /** Callback при отображении содержимого боковой панели. */\n    onShow?: () => void;\n    /** Callback при скрытии содержимого боковой панели. */\n    onHide?: () => void;\n}\n\n/** Контейнер левой боковой панели. */\nexport const LightBoxLeftSidebar = forwardRef<HTMLDivElement, ILightBoxLeftSidebarProps>(\n    ({ children, className, fixed, minVisibleWidth = 100, onShow, onHide, ...htmlDivAttributes }, ref) => {\n        const outerRef = useRef<HTMLDivElement>(null);\n        useImperativeHandle(ref, () => outerRef.current!);\n        const [isVisible, setIsVisible] = useState(true);\n        const onShowRef = useRef(onShow);\n        const onHideRef = useRef(onHide);\n\n        useEffect(() => {\n            onShowRef.current = onShow;\n            onHideRef.current = onHide;\n        }, [onShow, onHide]);\n\n        useEffect(() => {\n            const element = outerRef.current;\n            if (!element) return;\n\n            const observer = new ResizeObserver((entries) => {\n                for (const entry of entries) {\n                    const shouldBeVisible = entry.contentRect.width > minVisibleWidth;\n\n                    setIsVisible((prev) => {\n                        if (shouldBeVisible !== prev) {\n                            if (shouldBeVisible) {\n                                onShowRef.current?.();\n                            } else {\n                                onHideRef.current?.();\n                            }\n                        }\n                        return shouldBeVisible;\n                    });\n                }\n            });\n\n            observer.observe(element);\n            return () => observer.disconnect();\n        }, [minVisibleWidth]);\n\n        return (\n            <div\n                ref={outerRef}\n                className={clsx(className, styles.lightBoxLeftSidebar, { [styles.fixed]: fixed })}\n                {...htmlDivAttributes}\n            >\n                <div className={clsx(styles.lightBoxLeftSidebarInner, { [styles.hidden]: !isVisible })}>{children}</div>\n            </div>\n        );\n    },\n);\n\nLightBoxLeftSidebar.displayName = \"LightBoxLeftSidebar\";\n"],"names":["fixed"],"mappings":";;;;;;;;;;;AAgBO,MAAM,sBAAsB;AAAA,EAC/B,CAAC,EAAE,UAAU,WAAW,OAAAA,QAAO,kBAAkB,KAAK,QAAQ,QAAQ,GAAG,kBAAA,GAAqB,QAAQ;AAClG,UAAM,WAAW,OAAuB,IAAI;AAC5C,wBAAoB,KAAK,MAAM,SAAS,OAAQ;AAChD,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,UAAM,YAAY,OAAO,MAAM;AAC/B,UAAM,YAAY,OAAO,MAAM;AAE/B,cAAU,MAAM;AACZ,gBAAU,UAAU;AACpB,gBAAU,UAAU;AAAA,IACxB,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,cAAU,MAAM;AACZ,YAAM,UAAU,SAAS;AACzB,UAAI,CAAC,QAAS;AAEd,YAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAC7C,mBAAW,SAAS,SAAS;AACzB,gBAAM,kBAAkB,MAAM,YAAY,QAAQ;AAElD,uBAAa,CAAC,SAAS;;AACnB,gBAAI,oBAAoB,MAAM;AAC1B,kBAAI,iBAAiB;AACjB,gCAAU,YAAV;AAAA,cACJ,OAAO;AACH,gCAAU,YAAV;AAAA,cACJ;AAAA,YACJ;AACA,mBAAO;AAAA,UACX,CAAC;AAAA,QACL;AAAA,MACJ,CAAC;AAED,eAAS,QAAQ,OAAO;AACxB,aAAO,MAAM,SAAS,WAAA;AAAA,IAC1B,GAAG,CAAC,eAAe,CAAC;AAEpB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK;AAAA,QACL,WAAW,KAAK,WAAW,OAAO,qBAAqB,EAAE,CAAC,OAAO,KAAK,GAAGA,QAAO;AAAA,QAC/E,GAAG;AAAA,QAEJ,UAAA,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,0BAA0B,EAAE,CAAC,OAAO,MAAM,GAAG,CAAC,UAAA,CAAW,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAG9G;AACJ;AAEA,oBAAoB,cAAc;"}
+{"version":3,"file":"LightBoxLeftSidebar.js","sources":["../../../../src/components/LightBox/LightBoxSidebars/LightBoxLeftSidebar.tsx"],"sourcesContent":["import React, { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { useLightBoxSidebarVisibility } from \"./useLightBoxSidebarVisibility\";\nimport styles from \"./styles/LightBoxLeftSidebar.module.less\";\n\n/** Свойства компонента LightBoxLeftSidebar. */\nexport interface ILightBoxLeftSidebarProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Фиксация боковой панели. */\n    fixed?: boolean;\n    /** Минимальная ширина (в пикселях), при которой содержимое боковой панели отображается. По умолчанию 100. */\n    minVisibleWidth?: number;\n    /** Callback при отображении содержимого боковой панели. */\n    onShow?: () => void;\n    /** Callback при скрытии содержимого боковой панели. */\n    onHide?: () => void;\n}\n\n/** Контейнер левой боковой панели. */\nexport const LightBoxLeftSidebar = forwardRef<HTMLDivElement, ILightBoxLeftSidebarProps>(\n    ({ children, className, fixed, minVisibleWidth = 100, onShow, onHide, ...htmlDivAttributes }, ref) => {\n        const outerRef = useRef<HTMLDivElement>(null);\n        // Callback вызывается после монтирования, когда outerRef уже установлен.\n        useImperativeHandle(ref, () => outerRef.current!);\n        const isVisible = useLightBoxSidebarVisibility(outerRef, { minVisibleWidth, onShow, onHide });\n\n        return (\n            <div\n                ref={outerRef}\n                className={clsx(className, styles.lightBoxLeftSidebar, { [styles.fixed]: fixed })}\n                {...htmlDivAttributes}\n            >\n                <div className={clsx(styles.lightBoxLeftSidebarInner, { [styles.hidden]: !isVisible })}>{children}</div>\n            </div>\n        );\n    },\n);\n\nLightBoxLeftSidebar.displayName = \"LightBoxLeftSidebar\";\n"],"names":["fixed"],"mappings":";;;;;;;;;;;;AAkBO,MAAM,sBAAsB;AAAA,EAC/B,CAAC,EAAE,UAAU,WAAW,OAAAA,QAAO,kBAAkB,KAAK,QAAQ,QAAQ,GAAG,kBAAA,GAAqB,QAAQ;AAClG,UAAM,WAAW,OAAuB,IAAI;AAE5C,wBAAoB,KAAK,MAAM,SAAS,OAAQ;AAChD,UAAM,YAAY,6BAA6B,UAAU,EAAE,iBAAiB,QAAQ,QAAQ;AAE5F,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK;AAAA,QACL,WAAW,KAAK,WAAW,OAAO,qBAAqB,EAAE,CAAC,OAAO,KAAK,GAAGA,QAAO;AAAA,QAC/E,GAAG;AAAA,QAEJ,UAAA,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,0BAA0B,EAAE,CAAC,OAAO,MAAM,GAAG,CAAC,UAAA,CAAW,GAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAG9G;AACJ;AAEA,oBAAoB,cAAc;"}

package/components/LightBox/LightBoxSidebars/LightBoxRightSidebar.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useImperativeHandle, useState, useEffect } from "react";
-import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
-const lightBoxRightSidebar = "lightBoxRightSidebar__86077510";
-const fixed = "fixed__d0b90922";
-const hidden = "hidden__bba23518";
+import { forwardRef, useRef, useImperativeHandle } from "react";
+import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
+import { useLightBoxSidebarVisibility } from "./useLightBoxSidebarVisibility.js";
+const lightBoxRightSidebar = "lightBoxRightSidebar__31ccf1fd";
+const fixed = "fixed__4c700ee7";
+const hidden = "hidden__1800283f";
 const styles = {
   lightBoxRightSidebar,
   fixed,
@@ -13,35 +14,7 @@ const LightBoxRightSidebar = forwardRef(
   ({ children, className, fixed: fixed2, minVisibleWidth = 100, onShow, onHide, ...htmlDivAttributes }, ref) => {
     const outerRef = useRef(null);
     useImperativeHandle(ref, () => outerRef.current);
-    const [isVisible, setIsVisible] = useState(true);
-    const onShowRef = useRef(onShow);
-    const onHideRef = useRef(onHide);
-    useEffect(() => {
-      onShowRef.current = onShow;
-      onHideRef.current = onHide;
-    }, [onShow, onHide]);
-    useEffect(() => {
-      const element = outerRef.current;
-      if (!element) return;
-      const observer = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const shouldBeVisible = entry.contentRect.width > minVisibleWidth;
-          setIsVisible((prev) => {
-            var _a, _b;
-            if (shouldBeVisible !== prev) {
-              if (shouldBeVisible) {
-                (_a = onShowRef.current) == null ? void 0 : _a.call(onShowRef);
-              } else {
-                (_b = onHideRef.current) == null ? void 0 : _b.call(onHideRef);
-              }
-            }
-            return shouldBeVisible;
-          });
-        }
-      });
-      observer.observe(element);
-      return () => observer.disconnect();
-    }, [minVisibleWidth]);
+    const isVisible = useLightBoxSidebarVisibility(outerRef, { minVisibleWidth, onShow, onHide });
     return /* @__PURE__ */ jsx(
       "div",
       {

package/components/LightBox/LightBoxSidebars/LightBoxRightSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxRightSidebar.js","sources":["../../../../src/components/LightBox/LightBoxSidebars/LightBoxRightSidebar.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./styles/LightBoxRightSidebar.module.less\";\n\nexport interface ILightBoxRightSidebarProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Фиксация боковой панели. */\n    fixed?: boolean;\n    /** Минимальная ширина (в пикселях), при которой содержимое боковой панели отображается. По умолчанию 100. */\n    minVisibleWidth?: number;\n    /** Callback при отображении содержимого боковой панели. */\n    onShow?: () => void;\n    /** Callback при скрытии содержимого боковой панели. */\n    onHide?: () => void;\n}\n\n/** Контейнер правой боковой панели. */\nexport const LightBoxRightSidebar = forwardRef<HTMLDivElement, ILightBoxRightSidebarProps>(\n    ({ children, className, fixed, minVisibleWidth = 100, onShow, onHide, ...htmlDivAttributes }, ref) => {\n        const outerRef = useRef<HTMLDivElement>(null);\n        useImperativeHandle(ref, () => outerRef.current!);\n        const [isVisible, setIsVisible] = useState(true);\n        const onShowRef = useRef(onShow);\n        const onHideRef = useRef(onHide);\n\n        useEffect(() => {\n            onShowRef.current = onShow;\n            onHideRef.current = onHide;\n        }, [onShow, onHide]);\n\n        useEffect(() => {\n            const element = outerRef.current;\n            if (!element) return;\n\n            const observer = new ResizeObserver((entries) => {\n                for (const entry of entries) {\n                    const shouldBeVisible = entry.contentRect.width > minVisibleWidth;\n\n                    setIsVisible((prev) => {\n                        if (shouldBeVisible !== prev) {\n                            if (shouldBeVisible) {\n                                onShowRef.current?.();\n                            } else {\n                                onHideRef.current?.();\n                            }\n                        }\n                        return shouldBeVisible;\n                    });\n                }\n            });\n\n            observer.observe(element);\n            return () => observer.disconnect();\n        }, [minVisibleWidth]);\n\n        return (\n            <div\n                ref={outerRef}\n                className={clsx(className, styles.lightBoxRightSidebar, { [styles.fixed]: fixed })}\n                {...htmlDivAttributes}\n            >\n                <div className={clsx(styles.lightBoxRightSidebarInner, { [styles.hidden]: !isVisible })}>\n                    {children}\n                </div>\n            </div>\n        );\n    },\n);\n\nLightBoxRightSidebar.displayName = \"LightBoxRightSidebar\";\n"],"names":["fixed"],"mappings":";;;;;;;;;;;AAgBO,MAAM,uBAAuB;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,OAAAA,QAAO,kBAAkB,KAAK,QAAQ,QAAQ,GAAG,kBAAA,GAAqB,QAAQ;AAClG,UAAM,WAAW,OAAuB,IAAI;AAC5C,wBAAoB,KAAK,MAAM,SAAS,OAAQ;AAChD,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,UAAM,YAAY,OAAO,MAAM;AAC/B,UAAM,YAAY,OAAO,MAAM;AAE/B,cAAU,MAAM;AACZ,gBAAU,UAAU;AACpB,gBAAU,UAAU;AAAA,IACxB,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,cAAU,MAAM;AACZ,YAAM,UAAU,SAAS;AACzB,UAAI,CAAC,QAAS;AAEd,YAAM,WAAW,IAAI,eAAe,CAAC,YAAY;AAC7C,mBAAW,SAAS,SAAS;AACzB,gBAAM,kBAAkB,MAAM,YAAY,QAAQ;AAElD,uBAAa,CAAC,SAAS;;AACnB,gBAAI,oBAAoB,MAAM;AAC1B,kBAAI,iBAAiB;AACjB,gCAAU,YAAV;AAAA,cACJ,OAAO;AACH,gCAAU,YAAV;AAAA,cACJ;AAAA,YACJ;AACA,mBAAO;AAAA,UACX,CAAC;AAAA,QACL;AAAA,MACJ,CAAC;AAED,eAAS,QAAQ,OAAO;AACxB,aAAO,MAAM,SAAS,WAAA;AAAA,IAC1B,GAAG,CAAC,eAAe,CAAC;AAEpB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK;AAAA,QACL,WAAW,KAAK,WAAW,OAAO,sBAAsB,EAAE,CAAC,OAAO,KAAK,GAAGA,QAAO;AAAA,QAChF,GAAG;AAAA,QAEJ,UAAA,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,2BAA2B,EAAE,CAAC,OAAO,MAAM,GAAG,CAAC,UAAA,CAAW,GACjF,SAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEA,qBAAqB,cAAc;"}
+{"version":3,"file":"LightBoxRightSidebar.js","sources":["../../../../src/components/LightBox/LightBoxSidebars/LightBoxRightSidebar.tsx"],"sourcesContent":["import React, { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { useLightBoxSidebarVisibility } from \"./useLightBoxSidebarVisibility\";\nimport styles from \"./styles/LightBoxRightSidebar.module.less\";\n\n/** Свойства компонента LightBoxRightSidebar. */\nexport interface ILightBoxRightSidebarProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Фиксация боковой панели. */\n    fixed?: boolean;\n    /** Минимальная ширина (в пикселях), при которой содержимое боковой панели отображается. По умолчанию 100. */\n    minVisibleWidth?: number;\n    /** Callback при отображении содержимого боковой панели. */\n    onShow?: () => void;\n    /** Callback при скрытии содержимого боковой панели. */\n    onHide?: () => void;\n}\n\n/** Контейнер правой боковой панели. */\nexport const LightBoxRightSidebar = forwardRef<HTMLDivElement, ILightBoxRightSidebarProps>(\n    ({ children, className, fixed, minVisibleWidth = 100, onShow, onHide, ...htmlDivAttributes }, ref) => {\n        const outerRef = useRef<HTMLDivElement>(null);\n        // Callback вызывается после монтирования, когда outerRef уже установлен.\n        useImperativeHandle(ref, () => outerRef.current!);\n        const isVisible = useLightBoxSidebarVisibility(outerRef, { minVisibleWidth, onShow, onHide });\n\n        return (\n            <div\n                ref={outerRef}\n                className={clsx(className, styles.lightBoxRightSidebar, { [styles.fixed]: fixed })}\n                {...htmlDivAttributes}\n            >\n                <div className={clsx(styles.lightBoxRightSidebarInner, { [styles.hidden]: !isVisible })}>\n                    {children}\n                </div>\n            </div>\n        );\n    },\n);\n\nLightBoxRightSidebar.displayName = \"LightBoxRightSidebar\";\n"],"names":["fixed"],"mappings":";;;;;;;;;;;;AAkBO,MAAM,uBAAuB;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,OAAAA,QAAO,kBAAkB,KAAK,QAAQ,QAAQ,GAAG,kBAAA,GAAqB,QAAQ;AAClG,UAAM,WAAW,OAAuB,IAAI;AAE5C,wBAAoB,KAAK,MAAM,SAAS,OAAQ;AAChD,UAAM,YAAY,6BAA6B,UAAU,EAAE,iBAAiB,QAAQ,QAAQ;AAE5F,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK;AAAA,QACL,WAAW,KAAK,WAAW,OAAO,sBAAsB,EAAE,CAAC,OAAO,KAAK,GAAGA,QAAO;AAAA,QAChF,GAAG;AAAA,QAEJ,UAAA,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,2BAA2B,EAAE,CAAC,OAAO,MAAM,GAAG,CAAC,UAAA,CAAW,GACjF,SAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEA,qBAAqB,cAAc;"}

package/components/LightBox/LightBoxSidebars/useLightBoxSidebarVisibility.js

@@ -0,0 +1,37 @@
+import { useState, useRef, useEffect } from "react";
+const useLightBoxSidebarVisibility = (elementRef, { minVisibleWidth, onShow, onHide }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const isVisibleRef = useRef(true);
+  const onShowRef = useRef(onShow);
+  const onHideRef = useRef(onHide);
+  useEffect(() => {
+    onShowRef.current = onShow;
+    onHideRef.current = onHide;
+  }, [onShow, onHide]);
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      var _a, _b;
+      for (const entry of entries) {
+        const shouldBeVisible = entry.contentRect.width > minVisibleWidth;
+        if (shouldBeVisible !== isVisibleRef.current) {
+          isVisibleRef.current = shouldBeVisible;
+          if (shouldBeVisible) {
+            (_a = onShowRef.current) == null ? void 0 : _a.call(onShowRef);
+          } else {
+            (_b = onHideRef.current) == null ? void 0 : _b.call(onHideRef);
+          }
+        }
+        setIsVisible(shouldBeVisible);
+      }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [elementRef, minVisibleWidth]);
+  return isVisible;
+};
+export {
+  useLightBoxSidebarVisibility
+};
+//# sourceMappingURL=useLightBoxSidebarVisibility.js.map

package/components/LightBox/LightBoxSidebars/useLightBoxSidebarVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLightBoxSidebarVisibility.js","sources":["../../../../src/components/LightBox/LightBoxSidebars/useLightBoxSidebarVisibility.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/** Параметры хука useLightBoxSidebarVisibility. */\ninterface IUseLightBoxSidebarVisibilityParams {\n    /** Минимальная ширина (в пикселях), при которой содержимое боковой панели отображается. */\n    minVisibleWidth: number;\n    /** Callback при отображении содержимого боковой панели. */\n    onShow?: () => void;\n    /** Callback при скрытии содержимого боковой панели. */\n    onHide?: () => void;\n}\n\n/**\n * Наблюдает за шириной боковой панели лайтбокса и возвращает флаг видимости её содержимого.\n * При пересечении порога minVisibleWidth вызывает onShow/onHide.\n */\nexport const useLightBoxSidebarVisibility = (\n    elementRef: React.RefObject<HTMLDivElement>,\n    { minVisibleWidth, onShow, onHide }: IUseLightBoxSidebarVisibilityParams,\n): boolean => {\n    const [isVisible, setIsVisible] = useState(true);\n    // Текущее значение видимости вне state, чтобы вызывать onShow/onHide вне setState-updater (updater должен быть чистым).\n    const isVisibleRef = useRef(true);\n    const onShowRef = useRef(onShow);\n    const onHideRef = useRef(onHide);\n\n    useEffect(() => {\n        onShowRef.current = onShow;\n        onHideRef.current = onHide;\n    }, [onShow, onHide]);\n\n    useEffect(() => {\n        const element = elementRef.current;\n        if (!element) return;\n\n        const observer = new ResizeObserver((entries) => {\n            for (const entry of entries) {\n                const shouldBeVisible = entry.contentRect.width > minVisibleWidth;\n\n                if (shouldBeVisible !== isVisibleRef.current) {\n                    isVisibleRef.current = shouldBeVisible;\n\n                    if (shouldBeVisible) {\n                        onShowRef.current?.();\n                    } else {\n                        onHideRef.current?.();\n                    }\n                }\n\n                setIsVisible(shouldBeVisible);\n            }\n        });\n\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [elementRef, minVisibleWidth]);\n\n    return isVisible;\n};\n"],"names":[],"mappings":";AAgBO,MAAM,+BAA+B,CACxC,YACA,EAAE,iBAAiB,QAAQ,aACjB;AACV,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAE/C,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,YAAY,OAAO,MAAM;AAC/B,QAAM,YAAY,OAAO,MAAM;AAE/B,YAAU,MAAM;AACZ,cAAU,UAAU;AACpB,cAAU,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,YAAU,MAAM;AACZ,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAS;AAEd,UAAM,WAAW,IAAI,eAAe,CAAC,YAAY;;AAC7C,iBAAW,SAAS,SAAS;AACzB,cAAM,kBAAkB,MAAM,YAAY,QAAQ;AAElD,YAAI,oBAAoB,aAAa,SAAS;AAC1C,uBAAa,UAAU;AAEvB,cAAI,iBAAiB;AACjB,4BAAU,YAAV;AAAA,UACJ,OAAO;AACH,4BAAU,YAAV;AAAA,UACJ;AAAA,QACJ;AAEA,qBAAa,eAAe;AAAA,MAChC;AAAA,IACJ,CAAC;AAED,aAAS,QAAQ,OAAO;AACxB,WAAO,MAAM,SAAS,WAAA;AAAA,EAC1B,GAAG,CAAC,YAAY,eAAe,CAAC;AAEhC,SAAO;AACX;"}

package/components/LightBox/LightBoxViewManager/LightBoxViewManager.js

@@ -1,9 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useLayoutEffect } from "react";
-import { g as useResizeDetector, i as isEqual, p as pick } from "../../../chunks/vendor-BtZO8a0z.js";
+import { g as useResizeDetector, i as isEqual, p as pick } from "../../../chunks/vendor-DKrjZZwJ.js";
 import { Portal } from "../../Portal/Portal.js";
 import { LightBoxViewManagerConsts } from "./LightBoxViewManagerConsts.js";
 const lightBoxMountNodeClassName = "LightBoxMountNodeViewManager";
+const rectComparedKeys = ["top", "left", "width", "height"];
+const viewManagerCountByMountNode = /* @__PURE__ */ new WeakMap();
+const removeClassNamesFromMountNode = (mountNode) => {
+  mountNode.classList.remove(lightBoxMountNodeClassName);
+  Array.from(mountNode.classList).forEach((className) => {
+    if (className.includes("LB-")) {
+      mountNode.classList.remove(className);
+    }
+  });
+};
+const getBreakPointsClassNames = (rect) => rect.width <= LightBoxViewManagerConsts.lightBoxMediaPoint0 ? LightBoxViewManagerConsts.breakPointsClassNames["less-or-equal-media-point-0"] : LightBoxViewManagerConsts.breakPointsClassNames["more-media-point-0"];
 const LightBoxViewManager = ({
   lightBoxMountNode,
   lightBoxViewManagerNode
@@ -11,57 +22,47 @@ const LightBoxViewManager = ({
   const [rectViewNode, setRectViewNode] = useState();
   const [breakPointsClassNames, setBreakPointsClassNames] = useState("");
   const viewNodeRef = useRef(null);
-  const calculateBreakPointsClassNames = useCallback(
-    (rect) => {
-      if (!rect) {
-        return;
-      }
-      let classNames = [];
-      if (rect.width <= LightBoxViewManagerConsts.lightBoxMediaPoint0) {
-        classNames.push(LightBoxViewManagerConsts.breakPointsClassNames["less-or-equal-media-point-0"]);
-      } else {
-        classNames.push(LightBoxViewManagerConsts.breakPointsClassNames["more-media-point-0"]);
-      }
-      classNames = classNames.sort().join(" ");
-      if (breakPointsClassNames !== classNames) {
-        setBreakPointsClassNames(classNames);
-      }
-    },
-    [breakPointsClassNames]
-  );
   const updateRect = () => {
     if (viewNodeRef.current) {
       const nextRect = viewNodeRef.current.getBoundingClientRect();
-      if (!isEqual(
-        pick(rectViewNode, ["top", "left", "width", "height"]),
-        pick(nextRect, ["top", "left", "width", "height"])
-      )) {
-        setRectViewNode(nextRect);
-      }
+      setRectViewNode(
+        (prevRect) => isEqual(pick(prevRect, rectComparedKeys), pick(nextRect, rectComparedKeys)) ? prevRect : nextRect
+      );
     }
   };
   const updateRectAndClassNames = useCallback(() => {
     if (viewNodeRef.current) {
       const nextRect = viewNodeRef.current.getBoundingClientRect();
       setRectViewNode(nextRect);
-      calculateBreakPointsClassNames(nextRect);
+      setBreakPointsClassNames(getBreakPointsClassNames(nextRect));
     }
-  }, [calculateBreakPointsClassNames]);
+  }, []);
   const addClassNameToMountNode = useCallback(() => {
     if (!breakPointsClassNames) {
       return;
     }
     Array.from(lightBoxMountNode.classList).forEach((c) => {
       if (c.includes("LB-")) {
-        lightBoxMountNode.classList.toggle(c);
+        lightBoxMountNode.classList.remove(c);
       }
     });
     breakPointsClassNames.split(" ").forEach((c) => lightBoxMountNode.classList.add(c));
-  }, [breakPointsClassNames, lightBoxMountNode.classList]);
+  }, [breakPointsClassNames, lightBoxMountNode]);
   useLayoutEffect(() => {
     updateRectAndClassNames();
+    viewManagerCountByMountNode.set(
+      lightBoxMountNode,
+      (viewManagerCountByMountNode.get(lightBoxMountNode) ?? 0) + 1
+    );
     lightBoxMountNode.classList.add(lightBoxMountNodeClassName);
-  }, []);
+    return () => {
+      const nextCount = (viewManagerCountByMountNode.get(lightBoxMountNode) ?? 1) - 1;
+      viewManagerCountByMountNode.set(lightBoxMountNode, nextCount);
+      if (nextCount === 0) {
+        removeClassNamesFromMountNode(lightBoxMountNode);
+      }
+    };
+  }, [lightBoxMountNode, updateRectAndClassNames]);
   useLayoutEffect(() => {
     addClassNameToMountNode();
   }, [breakPointsClassNames, addClassNameToMountNode]);
@@ -85,6 +86,7 @@ const LightBoxViewManager = ({
                         ` })
   ] }) });
 };
+LightBoxViewManager.displayName = "LightBoxViewManager";
 export {
   LightBoxViewManager
 };

package/components/LightBox/LightBoxViewManager/LightBoxViewManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxViewManager.js","sources":["../../../../src/components/LightBox/LightBoxViewManager/LightBoxViewManager.tsx"],"sourcesContent":["import React from \"react\";\nimport { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport { Portal } from \"../../Portal/Portal\";\nimport { LightBoxViewManagerConsts } from \"./LightBoxViewManagerConsts\";\nimport isEqual from \"lodash-es/isEqual\";\nimport pick from \"lodash-es/pick\";\n\nexport interface ILightBoxViewManagerProps {\n    // Элемент, в который рендерится LightBox.\n    lightBoxMountNode: HTMLDivElement;\n    // Элемент, в визуальных границах (левая и правая координата) которого рендерится LightBox. Отступ LightBox от верхней границы экрана равен высоте этого элемента.\n    lightBoxViewManagerNode: HTMLDivElement;\n}\n\n// Css класс, подставляемый в lightBoxMountNode. Нужен для создания области видимости css переменных.\nconst lightBoxMountNodeClassName = \"LightBoxMountNodeViewManager\";\n\n/**\n * Элемент, определяющий позиционирование LightBox.\n */\nexport const LightBoxViewManager: React.FC<ILightBoxViewManagerProps> = ({\n    lightBoxMountNode,\n    lightBoxViewManagerNode,\n}) => {\n    // Координаты DOM ноды, в границах которой рендерится LightBox.\n    const [rectViewNode, setRectViewNode] = useState<DOMRect>();\n    // Класснеймы, рассчитанные на основе ширины области LightBox.\n    const [breakPointsClassNames, setBreakPointsClassNames] = useState<string>(\"\");\n    // DOM нода, в границах которой рендерится LightBox.\n    const viewNodeRef = useRef<HTMLDivElement | null>(null);\n\n    /**\n     * Раcчет класснеймов на основе ширины области viewNode.\n     * Эти класснеймы опеределяют позиционирование LightBox.\n     */\n    const calculateBreakPointsClassNames = useCallback(\n        (rect: DOMRect | undefined) => {\n            if (!rect) {\n                return;\n            }\n\n            let classNames: Array<string> | string = [];\n\n            if (rect.width <= LightBoxViewManagerConsts.lightBoxMediaPoint0) {\n                classNames.push(LightBoxViewManagerConsts.breakPointsClassNames[\"less-or-equal-media-point-0\"]);\n            } else {\n                classNames.push(LightBoxViewManagerConsts.breakPointsClassNames[\"more-media-point-0\"]);\n            }\n\n            classNames = classNames.sort().join(\" \");\n\n            if (breakPointsClassNames !== classNames) {\n                setBreakPointsClassNames(classNames);\n            }\n        },\n        [breakPointsClassNames],\n    );\n\n    const updateRect = () => {\n        if (viewNodeRef.current) {\n            const nextRect = viewNodeRef.current.getBoundingClientRect();\n\n            if (\n                !isEqual(\n                    pick(rectViewNode, [\"top\", \"left\", \"width\", \"height\"]),\n                    pick(nextRect, [\"top\", \"left\", \"width\", \"height\"]),\n                )\n            ) {\n                setRectViewNode(nextRect);\n            }\n        }\n    };\n\n    const updateRectAndClassNames = useCallback(() => {\n        if (viewNodeRef.current) {\n            const nextRect = viewNodeRef.current.getBoundingClientRect();\n            setRectViewNode(nextRect);\n            calculateBreakPointsClassNames(nextRect);\n        }\n    }, [calculateBreakPointsClassNames]);\n\n    const addClassNameToMountNode = useCallback(() => {\n        if (!breakPointsClassNames) {\n            return;\n        }\n\n        // Удаление предыдущих классов.\n        Array.from(lightBoxMountNode.classList).forEach((c) => {\n            if (c.includes(\"LB-\")) {\n                lightBoxMountNode.classList.toggle(c);\n            }\n        });\n\n        breakPointsClassNames.split(\" \").forEach((c) => lightBoxMountNode.classList.add(c));\n    }, [breakPointsClassNames, lightBoxMountNode.classList]);\n\n    useLayoutEffect(() => {\n        updateRectAndClassNames();\n\n        lightBoxMountNode.classList.add(lightBoxMountNodeClassName);\n    }, []);\n\n    useLayoutEffect(() => {\n        addClassNameToMountNode();\n    }, [breakPointsClassNames, addClassNameToMountNode]);\n\n    useLayoutEffect(() => {\n        updateRect();\n    });\n\n    const { ref: resizeRef } = useResizeDetector({\n        handleWidth: true,\n        onResize: updateRectAndClassNames,\n        refreshMode: \"throttle\",\n        refreshRate: 150,\n    });\n    return (\n        <Portal container={lightBoxViewManagerNode}>\n            {/* Высота div должна быть равной высоте lightBoxViewManagerNode. */}\n            <div ref={viewNodeRef} style={{ height: \"100%\" }}>\n                <div ref={resizeRef} style={{ width: \"100%\", height: \"100%\", position: \"absolute\" }} />\n                {rectViewNode && (\n                    <style>\n                        {/*\n                            Вернуть --lightBox-screen-left: ${rectViewNode.x}px; в 8й версии библиотеки.\n                        */}\n                        {`\n                            .${lightBoxMountNodeClassName} {\n                                --lightBox-screen-left: ${rectViewNode.x >= 0 ? rectViewNode.x : 0}px;\n                                --lightBox-screen-width: ${rectViewNode.width}px;\n                                --lightBox-screen-top: ${rectViewNode.height}px;\n                            }\n                        `}\n                    </style>\n                )}\n            </div>\n        </Portal>\n    );\n};\n"],"names":[],"mappings":";;;;;AAgBA,MAAM,6BAA6B;AAK5B,MAAM,sBAA2D,CAAC;AAAA,EACrE;AAAA,EACA;AACJ,MAAM;AAEF,QAAM,CAAC,cAAc,eAAe,IAAI,SAAA;AAExC,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAiB,EAAE;AAE7E,QAAM,cAAc,OAA8B,IAAI;AAMtD,QAAM,iCAAiC;AAAA,IACnC,CAAC,SAA8B;AAC3B,UAAI,CAAC,MAAM;AACP;AAAA,MACJ;AAEA,UAAI,aAAqC,CAAA;AAEzC,UAAI,KAAK,SAAS,0BAA0B,qBAAqB;AAC7D,mBAAW,KAAK,0BAA0B,sBAAsB,6BAA6B,CAAC;AAAA,MAClG,OAAO;AACH,mBAAW,KAAK,0BAA0B,sBAAsB,oBAAoB,CAAC;AAAA,MACzF;AAEA,mBAAa,WAAW,OAAO,KAAK,GAAG;AAEvC,UAAI,0BAA0B,YAAY;AACtC,iCAAyB,UAAU;AAAA,MACvC;AAAA,IACJ;AAAA,IACA,CAAC,qBAAqB;AAAA,EAAA;AAG1B,QAAM,aAAa,MAAM;AACrB,QAAI,YAAY,SAAS;AACrB,YAAM,WAAW,YAAY,QAAQ,sBAAA;AAErC,UACI,CAAC;AAAA,QACG,KAAK,cAAc,CAAC,OAAO,QAAQ,SAAS,QAAQ,CAAC;AAAA,QACrD,KAAK,UAAU,CAAC,OAAO,QAAQ,SAAS,QAAQ,CAAC;AAAA,MAAA,GAEvD;AACE,wBAAgB,QAAQ;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,0BAA0B,YAAY,MAAM;AAC9C,QAAI,YAAY,SAAS;AACrB,YAAM,WAAW,YAAY,QAAQ,sBAAA;AACrC,sBAAgB,QAAQ;AACxB,qCAA+B,QAAQ;AAAA,IAC3C;AAAA,EACJ,GAAG,CAAC,8BAA8B,CAAC;AAEnC,QAAM,0BAA0B,YAAY,MAAM;AAC9C,QAAI,CAAC,uBAAuB;AACxB;AAAA,IACJ;AAGA,UAAM,KAAK,kBAAkB,SAAS,EAAE,QAAQ,CAAC,MAAM;AACnD,UAAI,EAAE,SAAS,KAAK,GAAG;AACnB,0BAAkB,UAAU,OAAO,CAAC;AAAA,MACxC;AAAA,IACJ,CAAC;AAED,0BAAsB,MAAM,GAAG,EAAE,QAAQ,CAAC,MAAM,kBAAkB,UAAU,IAAI,CAAC,CAAC;AAAA,EACtF,GAAG,CAAC,uBAAuB,kBAAkB,SAAS,CAAC;AAEvD,kBAAgB,MAAM;AAClB,4BAAA;AAEA,sBAAkB,UAAU,IAAI,0BAA0B;AAAA,EAC9D,GAAG,CAAA,CAAE;AAEL,kBAAgB,MAAM;AAClB,4BAAA;AAAA,EACJ,GAAG,CAAC,uBAAuB,uBAAuB,CAAC;AAEnD,kBAAgB,MAAM;AAClB,eAAA;AAAA,EACJ,CAAC;AAED,QAAM,EAAE,KAAK,UAAA,IAAc,kBAAkB;AAAA,IACzC,aAAa;AAAA,IACb,UAAU;AAAA,IACV,aAAa;AAAA,IACb,aAAa;AAAA,EAAA,CAChB;AACD,SACI,oBAAC,QAAA,EAAO,WAAW,yBAEf,UAAA,qBAAC,OAAA,EAAI,KAAK,aAAa,OAAO,EAAE,QAAQ,OAAA,GACpC,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,KAAK,WAAW,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,UAAU,WAAA,EAAW,CAAG;AAAA,IACpF,oCACI,SAAA,EAII,UAAA;AAAA,+BACM,0BAA0B;AAAA,0DACC,aAAa,KAAK,IAAI,aAAa,IAAI,CAAC;AAAA,2DACvC,aAAa,KAAK;AAAA,yDACpB,aAAa,MAAM;AAAA;AAAA,0BAAA,CAGxD;AAAA,EAAA,EAAA,CAER,EAAA,CACJ;AAER;"}
+{"version":3,"file":"LightBoxViewManager.js","sources":["../../../../src/components/LightBox/LightBoxViewManager/LightBoxViewManager.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport isEqual from \"lodash-es/isEqual\";\nimport pick from \"lodash-es/pick\";\nimport { Portal } from \"../../Portal/Portal\";\nimport { LightBoxViewManagerConsts } from \"./LightBoxViewManagerConsts\";\n\n/** Свойства компонента LightBoxViewManager. */\nexport interface ILightBoxViewManagerProps {\n    /** Элемент, в который рендерится LightBox. */\n    lightBoxMountNode: HTMLDivElement;\n    /** Элемент, в визуальных границах (левая и правая координата) которого рендерится LightBox. Отступ LightBox от верхней границы экрана равен высоте этого элемента. */\n    lightBoxViewManagerNode: HTMLDivElement;\n}\n\n/** Css класс, подставляемый в lightBoxMountNode. Нужен для создания области видимости css переменных. */\nconst lightBoxMountNodeClassName = \"LightBoxMountNodeViewManager\";\n\n/** Свойства DOMRect, изменение которых требует обновления позиционирования LightBox. */\nconst rectComparedKeys = [\"top\", \"left\", \"width\", \"height\"];\n\n/**\n * Количество активных LightBoxViewManager на каждую mount-ноду. Нода общая для всех лайтбоксов\n * (при переключении через роутер менеджеры могут перекрываться во времени), поэтому классы\n * снимаются только при размонтировании последнего менеджера этой ноды.\n */\nconst viewManagerCountByMountNode = new WeakMap<HTMLDivElement, number>();\n\n/** Удаляет с mount-ноды класс области видимости CSS-переменных и breakpoint-классы. */\nconst removeClassNamesFromMountNode = (mountNode: HTMLDivElement) => {\n    mountNode.classList.remove(lightBoxMountNodeClassName);\n\n    Array.from(mountNode.classList).forEach((className) => {\n        if (className.includes(\"LB-\")) {\n            mountNode.classList.remove(className);\n        }\n    });\n};\n\n/**\n * Расчет класснеймов на основе ширины области viewNode.\n * Эти класснеймы определяют позиционирование LightBox.\n */\nconst getBreakPointsClassNames = (rect: DOMRect): string =>\n    rect.width <= LightBoxViewManagerConsts.lightBoxMediaPoint0\n        ? LightBoxViewManagerConsts.breakPointsClassNames[\"less-or-equal-media-point-0\"]\n        : LightBoxViewManagerConsts.breakPointsClassNames[\"more-media-point-0\"];\n\n/**\n * Элемент, определяющий позиционирование LightBox.\n */\nexport const LightBoxViewManager: React.FC<ILightBoxViewManagerProps> = ({\n    lightBoxMountNode,\n    lightBoxViewManagerNode,\n}) => {\n    // Координаты DOM ноды, в границах которой рендерится LightBox.\n    const [rectViewNode, setRectViewNode] = useState<DOMRect>();\n    // Класснеймы, рассчитанные на основе ширины области LightBox.\n    const [breakPointsClassNames, setBreakPointsClassNames] = useState<string>(\"\");\n    // DOM нода, в границах которой рендерится LightBox.\n    const viewNodeRef = useRef<HTMLDivElement | null>(null);\n\n    /** Обновление координат viewNode, если они изменились. */\n    const updateRect = () => {\n        if (viewNodeRef.current) {\n            const nextRect = viewNodeRef.current.getBoundingClientRect();\n\n            setRectViewNode((prevRect) =>\n                isEqual(pick(prevRect, rectComparedKeys), pick(nextRect, rectComparedKeys)) ? prevRect : nextRect,\n            );\n        }\n    };\n\n    /** Обновление координат viewNode и breakpoint-класснеймов. */\n    const updateRectAndClassNames = useCallback(() => {\n        if (viewNodeRef.current) {\n            const nextRect = viewNodeRef.current.getBoundingClientRect();\n            setRectViewNode(nextRect);\n            setBreakPointsClassNames(getBreakPointsClassNames(nextRect));\n        }\n    }, []);\n\n    /** Подстановка breakpoint-класснеймов в lightBoxMountNode. */\n    const addClassNameToMountNode = useCallback(() => {\n        if (!breakPointsClassNames) {\n            return;\n        }\n\n        // Удаление предыдущих классов.\n        Array.from(lightBoxMountNode.classList).forEach((c) => {\n            if (c.includes(\"LB-\")) {\n                lightBoxMountNode.classList.remove(c);\n            }\n        });\n\n        breakPointsClassNames.split(\" \").forEach((c) => lightBoxMountNode.classList.add(c));\n    }, [breakPointsClassNames, lightBoxMountNode]);\n\n    useLayoutEffect(() => {\n        updateRectAndClassNames();\n\n        viewManagerCountByMountNode.set(\n            lightBoxMountNode,\n            (viewManagerCountByMountNode.get(lightBoxMountNode) ?? 0) + 1,\n        );\n        lightBoxMountNode.classList.add(lightBoxMountNodeClassName);\n\n        return () => {\n            const nextCount = (viewManagerCountByMountNode.get(lightBoxMountNode) ?? 1) - 1;\n            viewManagerCountByMountNode.set(lightBoxMountNode, nextCount);\n\n            if (nextCount === 0) {\n                removeClassNamesFromMountNode(lightBoxMountNode);\n            }\n        };\n    }, [lightBoxMountNode, updateRectAndClassNames]);\n\n    useLayoutEffect(() => {\n        addClassNameToMountNode();\n    }, [breakPointsClassNames, addClassNameToMountNode]);\n\n    useLayoutEffect(() => {\n        updateRect();\n    });\n\n    const { ref: resizeRef } = useResizeDetector({\n        handleWidth: true,\n        onResize: updateRectAndClassNames,\n        refreshMode: \"throttle\",\n        refreshRate: 150,\n    });\n\n    return (\n        <Portal container={lightBoxViewManagerNode}>\n            {/* Высота div должна быть равной высоте lightBoxViewManagerNode. */}\n            <div ref={viewNodeRef} style={{ height: \"100%\" }}>\n                <div ref={resizeRef} style={{ width: \"100%\", height: \"100%\", position: \"absolute\" }} />\n                {rectViewNode && (\n                    <style>\n                        {/*\n                            Вернуть --lightBox-screen-left: ${rectViewNode.x}px; в 8й версии библиотеки.\n                        */}\n                        {`\n                            .${lightBoxMountNodeClassName} {\n                                --lightBox-screen-left: ${rectViewNode.x >= 0 ? rectViewNode.x : 0}px;\n                                --lightBox-screen-width: ${rectViewNode.width}px;\n                                --lightBox-screen-top: ${rectViewNode.height}px;\n                            }\n                        `}\n                    </style>\n                )}\n            </div>\n        </Portal>\n    );\n};\n\nLightBoxViewManager.displayName = \"LightBoxViewManager\";\n"],"names":[],"mappings":"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"}

package/components/LightBox/LightBoxViewManager/LightBoxViewManagerConsts.js

@@ -5,26 +5,15 @@ const lightBoxArrowMarginToScreen = 16;
 const lightBoxArrowWithMarginWidth = lightBoxArrowWidth + lightBoxArrowMarginToLightBox + lightBoxArrowMarginToScreen;
 const lightBoxMediaPoint0 = 1024;
 const LightBoxViewManagerConsts = {
-  /**
-   * ClassNames для обозначения ширины контейнера.
-   * Используются для замены media query в Css, т.к. media query учитывает только ширину экрана, а не ширину элемента.
-   */
   breakPointsClassNames: {
-    // Ширина меньше или равна lightBoxMediaPoint0.
     "less-or-equal-media-point-0": "global-LB-less-or-equal-media-point-0",
-    // Ширина больше lightBoxMediaPoint0.
     // У этого класса нет стилей, поэтому тут произвольный класс.
     "more-media-point-0": "global-LB-more-media-point-0"
   },
-  // Расстояние от стрелки до лайтбокса.
   lightBoxArrowMarginToLightBox,
-  // Расстояние от стрелки до края экрана.
   lightBoxArrowMarginToScreen,
-  // Ширина стрелки лайтбокса.
   lightBoxArrowWidth,
-  //  Ширина стрелки лайтбокса с полями по бокам.
   lightBoxArrowWithMarginWidth,
-  // Breakpoint для экранов менее 1024px.
   lightBoxMediaPoint0: lightBoxMediaPoint0 + getScrollbarWidth()
 };
 export {

package/components/LightBox/LightBoxViewManager/LightBoxViewManagerConsts.js.map

@@ -1 +1 @@
-{"version":3,"file":"LightBoxViewManagerConsts.js","sources":["../../../../src/components/LightBox/LightBoxViewManager/LightBoxViewManagerConsts.ts"],"sourcesContent":["/**\n * Константы соответствуют less константам в src/styles/components/lightbox.less.\n */\nimport { getScrollbarWidth } from \"../../../utils/scroll/scrollbar\";\n\ninterface ILightBoxViewManagerConsts {\n    /**\n     * ClassNames для обозначения ширины контейнера.\n     * Используются для замены media query в Css, т.к. media query учитывает только ширину экрана, а не ширину элемента.\n     */\n    breakPointsClassNames: {\n        // Ширина меньше или равна lightBoxMediaPoint0.\n        \"less-or-equal-media-point-0\": string;\n        // Ширина больше lightBoxMediaPoint0.\n        \"more-media-point-0\": string;\n    };\n\n    // Ширина стрелки лайтбокса.\n    lightBoxArrowWidth: number;\n\n    // Расстояние от стрелки до лайтбокса.\n    lightBoxArrowMarginToLightBox: number;\n\n    // Расстояние от стрелки до края экрана.\n    lightBoxArrowMarginToScreen: number;\n\n    // Ширина стрелки лайтбокса с полями по бокам.\n    lightBoxArrowWithMarginWidth: number;\n\n    // Breakpoint для экранов менее 1024px.\n    lightBoxMediaPoint0: number;\n}\n\nconst lightBoxArrowWidth = 64;\nconst lightBoxArrowMarginToLightBox = 16;\nconst lightBoxArrowMarginToScreen = 16;\nconst lightBoxArrowWithMarginWidth = lightBoxArrowWidth + lightBoxArrowMarginToLightBox + lightBoxArrowMarginToScreen; // 96\nconst lightBoxMediaPoint0 = 1024;\n\nexport const LightBoxViewManagerConsts: ILightBoxViewManagerConsts = {\n    /**\n     * ClassNames для обозначения ширины контейнера.\n     * Используются для замены media query в Css, т.к. media query учитывает только ширину экрана, а не ширину элемента.\n     */\n    breakPointsClassNames: {\n        // Ширина меньше или равна lightBoxMediaPoint0.\n        \"less-or-equal-media-point-0\": \"global-LB-less-or-equal-media-point-0\",\n        // Ширина больше lightBoxMediaPoint0.\n        // У этого класса нет стилей, поэтому тут произвольный класс.\n        \"more-media-point-0\": \"global-LB-more-media-point-0\",\n    },\n    // Расстояние от стрелки до лайтбокса.\n    lightBoxArrowMarginToLightBox,\n    // Расстояние от стрелки до края экрана.\n    lightBoxArrowMarginToScreen,\n    // Ширина стрелки лайтбокса.\n    lightBoxArrowWidth,\n    //  Ширина стрелки лайтбокса с полями по бокам.\n    lightBoxArrowWithMarginWidth,\n    // Breakpoint для экранов менее 1024px.\n    lightBoxMediaPoint0: lightBoxMediaPoint0 + getScrollbarWidth(),\n};\n"],"names":[],"mappings":";AAiCA,MAAM,qBAAqB;AAC3B,MAAM,gCAAgC;AACtC,MAAM,8BAA8B;AACpC,MAAM,+BAA+B,qBAAqB,gCAAgC;AAC1F,MAAM,sBAAsB;AAErB,MAAM,4BAAwD;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjE,uBAAuB;AAAA;AAAA,IAEnB,+BAA+B;AAAA;AAAA;AAAA,IAG/B,sBAAsB;AAAA,EAAA;AAAA;AAAA,EAG1B;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA,qBAAqB,sBAAsB,kBAAA;AAC/C;"}
+{"version":3,"file":"LightBoxViewManagerConsts.js","sources":["../../../../src/components/LightBox/LightBoxViewManager/LightBoxViewManagerConsts.ts"],"sourcesContent":["/**\n * Константы соответствуют less константам в src/styles/components/lightbox.less.\n */\nimport { getScrollbarWidth } from \"../../../utils/scroll/scrollbar\";\n\ninterface ILightBoxViewManagerConsts {\n    /**\n     * ClassNames для обозначения ширины контейнера.\n     * Используются для замены media query в Css, т.к. media query учитывает только ширину экрана, а не ширину элемента.\n     */\n    breakPointsClassNames: {\n        /** Ширина меньше или равна lightBoxMediaPoint0. */\n        \"less-or-equal-media-point-0\": string;\n        /** Ширина больше lightBoxMediaPoint0. */\n        \"more-media-point-0\": string;\n    };\n\n    /** Ширина стрелки лайтбокса. */\n    lightBoxArrowWidth: number;\n\n    /** Расстояние от стрелки до лайтбокса. */\n    lightBoxArrowMarginToLightBox: number;\n\n    /** Расстояние от стрелки до края экрана. */\n    lightBoxArrowMarginToScreen: number;\n\n    /** Ширина стрелки лайтбокса с полями по бокам. */\n    lightBoxArrowWithMarginWidth: number;\n\n    /** Breakpoint для экранов менее 1024px. */\n    lightBoxMediaPoint0: number;\n}\n\nconst lightBoxArrowWidth = 64;\nconst lightBoxArrowMarginToLightBox = 16;\nconst lightBoxArrowMarginToScreen = 16;\nconst lightBoxArrowWithMarginWidth = lightBoxArrowWidth + lightBoxArrowMarginToLightBox + lightBoxArrowMarginToScreen; // 96\nconst lightBoxMediaPoint0 = 1024;\n\nexport const LightBoxViewManagerConsts: ILightBoxViewManagerConsts = {\n    breakPointsClassNames: {\n        \"less-or-equal-media-point-0\": \"global-LB-less-or-equal-media-point-0\",\n        // У этого класса нет стилей, поэтому тут произвольный класс.\n        \"more-media-point-0\": \"global-LB-more-media-point-0\",\n    },\n    lightBoxArrowMarginToLightBox,\n    lightBoxArrowMarginToScreen,\n    lightBoxArrowWidth,\n    lightBoxArrowWithMarginWidth,\n    lightBoxMediaPoint0: lightBoxMediaPoint0 + getScrollbarWidth(),\n};\n"],"names":[],"mappings":";AAiCA,MAAM,qBAAqB;AAC3B,MAAM,gCAAgC;AACtC,MAAM,8BAA8B;AACpC,MAAM,+BAA+B,qBAAqB,gCAAgC;AAC1F,MAAM,sBAAsB;AAErB,MAAM,4BAAwD;AAAA,EACjE,uBAAuB;AAAA,IACnB,+BAA+B;AAAA;AAAA,IAE/B,sBAAsB;AAAA,EAAA;AAAA,EAE1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB,sBAAsB,kBAAA;AAC/C;"}

package/components/LightBox/enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"enums.js","sources":["../../../src/components/LightBox/enums.ts"],"sourcesContent":["export enum ELightBoxSize {\n    SM = \"sm\",\n    MD = \"md\",\n    LG = \"lg\",\n    XL = \"xl\",\n}\n"],"names":["ELightBoxSize"],"mappings":"AAAO,IAAK,kCAAAA,mBAAL;AACHA,iBAAA,IAAA,IAAK;AACLA,iBAAA,IAAA,IAAK;AACLA,iBAAA,IAAA,IAAK;AACLA,iBAAA,IAAA,IAAK;AAJG,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;"}
+{"version":3,"file":"enums.js","sources":["../../../src/components/LightBox/enums.ts"],"sourcesContent":["/** Размер контента LightBox. */\nexport enum ELightBoxSize {\n    SM = \"sm\",\n    MD = \"md\",\n    LG = \"lg\",\n    XL = \"xl\",\n}\n"],"names":["ELightBoxSize"],"mappings":"AACO,IAAK,kCAAAA,mBAAL;AACHA,iBAAA,IAAA,IAAK;AACLA,iBAAA,IAAA,IAAK;AACLA,iBAAA,IAAA,IAAK;AACLA,iBAAA,IAAA,IAAK;AAJG,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;"}