@sberbusiness/triplex-next 0.39.0 → 0.41.0

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

@@ -5,11 +5,11 @@ import { Portal } from "../../../Portal/Portal.js";
 import { DropdownMobile } from "../../../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "../../../Dropdown/mobile/DropdownMobileBody.js";
 import { TooltipMobileCloseButton } from "./components/TooltipMobileCloseButton.js";
-import { c as clsx } from "../../../../chunks/vendor-DKrjZZwJ.js";
-const tooltipMobile = "tooltipMobile__05c26685";
-const tooltipMobileContent = "tooltipMobileContent__3b0b26fc";
-const headerless = "headerless__0d2840c4";
-const closeButton = "closeButton__aa9427e8";
+import { c as clsx } from "../../../../chunks/vendor-BtZO8a0z.js";
+const tooltipMobile = "tooltipMobile__644b4b48";
+const tooltipMobileContent = "tooltipMobileContent__abce4d18";
+const headerless = "headerless__5c050718";
+const closeButton = "closeButton__70b48034";
 const styles = {
   tooltipMobile,
   tooltipMobileContent,
@@ -17,11 +17,15 @@ const styles = {
   closeButton
 };
 const TooltipMobile = ({
+  // children, renderContainer, targetRef, disableAdaptiveMode, size и alignTip не нужны мобильной
+  // версии и не должны попадать в DOM — исключаются из rest, который спредится на DropdownMobile.
   children,
-  className,
   renderContainer,
   targetRef,
   disableAdaptiveMode,
+  size,
+  alignTip,
+  className,
   isOpen,
   onShow,
   ...rest
@@ -30,7 +34,7 @@ const TooltipMobile = ({
   const tooltipRef = useRef(null);
   const classNames = clsx(styles.tooltipMobile, { [styles.headerless]: elements.mobileHeader === null }, className);
   useEffect(() => {
-    if (isOpen) {
+    if (isOpen && tooltipRef.current) {
       onShow == null ? void 0 : onShow(tooltipRef.current);
     }
   }, [isOpen]);

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipMobile.js","sources":["../../../../../src/components/Tooltip/components/mobile/TooltipMobile.tsx"],"sourcesContent":["import React, { useEffect, useContext, useRef } from \"react\";\nimport { TooltipContext } from \"@sberbusiness/triplex-next/components/Tooltip/TootlipContext\";\nimport { Portal } from \"@sberbusiness/triplex-next/components/Portal/Portal\";\nimport { DropdownMobile } from \"@sberbusiness/triplex-next/components/Dropdown/mobile/DropdownMobile\";\nimport { DropdownMobileBody } from \"@sberbusiness/triplex-next/components/Dropdown/mobile/DropdownMobileBody\";\nimport { TooltipMobileCloseButton } from \"@sberbusiness/triplex-next/components/Tooltip/components/mobile/components/TooltipMobileCloseButton\";\nimport clsx from \"clsx\";\nimport styles from \"@sberbusiness/triplex-next/components/Tooltip/styles/TooltipMobile.module.less\";\nimport { ITooltipProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/** Свойства компонента TooltipMobile. */\nexport interface ITooltipMobileProps extends Omit<ITooltipProps, \"preferPlace\" | \"toggle\"> {\n    /** Признак открыт ли TooltipMobile. */\n    isOpen: boolean;\n    /** Дочерние элементы. */\n    children?: never;\n}\n\n/** Мобильная версия Tooltip. */\nexport const TooltipMobile: React.FC<ITooltipMobileProps> = ({\n    children,\n    className,\n    renderContainer,\n    targetRef,\n    disableAdaptiveMode,\n    isOpen,\n    onShow,\n    ...rest\n}) => {\n    const { elements, setTooltipOpen } = useContext(TooltipContext);\n    const tooltipRef = useRef<HTMLDivElement | null>(null);\n    const classNames = clsx(styles.tooltipMobile, { [styles.headerless]: elements.mobileHeader === null }, className);\n\n    useEffect(() => {\n        if (isOpen) {\n            onShow?.(tooltipRef.current!);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isOpen]);\n\n    /** Рендер кнопки закрытия. */\n    const renderCloseButton = () => {\n        return (\n            <div className={styles.closeButton}>\n                <TooltipMobileCloseButton {...elements.closeButton?.props} />\n            </div>\n        );\n    };\n\n    return (\n        <>\n            {elements.target}\n            <Portal container={document.body}>\n                <DropdownMobile\n                    className={classNames}\n                    tabIndex={-1}\n                    opened={isOpen}\n                    setOpened={setTooltipOpen}\n                    {...rest}\n                    ref={tooltipRef}\n                >\n                    {elements.mobileHeader}\n                    <DropdownMobileBody className={styles.tooltipMobileContent}>\n                        {elements.body}\n                        {elements.link}\n                        {elements.mobileHeader === null && renderCloseButton()}\n                    </DropdownMobileBody>\n                </DropdownMobile>\n            </Portal>\n        </>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAmBO,MAAM,gBAA+C,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,EAAE,UAAU,mBAAmB,WAAW,cAAc;AAC9D,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,aAAa,KAAK,OAAO,eAAe,EAAE,CAAC,OAAO,UAAU,GAAG,SAAS,iBAAiB,KAAA,GAAQ,SAAS;AAEhH,YAAU,MAAM;AACZ,QAAI,QAAQ;AACR,uCAAS,WAAW;AAAA,IACxB;AAAA,EAEJ,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,oBAAoB,MAAM;;AAC5B,WACI,oBAAC,OAAA,EAAI,WAAW,OAAO,aACnB,UAAA,oBAAC,0BAAA,EAA0B,IAAG,cAAS,gBAAT,mBAAsB,MAAA,CAAO,EAAA,CAC/D;AAAA,EAER;AAEA,SACI,qBAAA,UAAA,EACK,UAAA;AAAA,IAAA,SAAS;AAAA,IACV,oBAAC,QAAA,EAAO,WAAW,SAAS,MACxB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW;AAAA,QACX,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,WAAW;AAAA,QACV,GAAG;AAAA,QACJ,KAAK;AAAA,QAEJ,UAAA;AAAA,UAAA,SAAS;AAAA,UACV,qBAAC,oBAAA,EAAmB,WAAW,OAAO,sBACjC,UAAA;AAAA,YAAA,SAAS;AAAA,YACT,SAAS;AAAA,YACT,SAAS,iBAAiB,QAAQ,kBAAA;AAAA,UAAkB,EAAA,CACzD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACJ,CACJ;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"TooltipMobile.js","sources":["../../../../../src/components/Tooltip/components/mobile/TooltipMobile.tsx"],"sourcesContent":["import React, { useEffect, useContext, useRef } from \"react\";\nimport { TooltipContext } from \"@sberbusiness/triplex-next/components/Tooltip/TootlipContext\";\nimport { Portal } from \"@sberbusiness/triplex-next/components/Portal/Portal\";\nimport { DropdownMobile } from \"@sberbusiness/triplex-next/components/Dropdown/mobile/DropdownMobile\";\nimport { DropdownMobileBody } from \"@sberbusiness/triplex-next/components/Dropdown/mobile/DropdownMobileBody\";\nimport { TooltipMobileCloseButton } from \"@sberbusiness/triplex-next/components/Tooltip/components/mobile/components/TooltipMobileCloseButton\";\nimport clsx from \"clsx\";\nimport styles from \"@sberbusiness/triplex-next/components/Tooltip/styles/TooltipMobile.module.less\";\nimport { ITooltipProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/** Свойства компонента TooltipMobile. */\nexport interface ITooltipMobileProps extends Omit<ITooltipProps, \"preferPlace\" | \"toggle\"> {\n    /** Признак открыт ли TooltipMobile. */\n    isOpen: boolean;\n    /** Дочерние элементы. */\n    children?: never;\n}\n\n/**\n * Мобильная версия Tooltip.\n * Рендерится в document.body поверх страницы как нижний оверлей (DropdownMobile).\n */\nexport const TooltipMobile: React.FC<ITooltipMobileProps> = ({\n    // children, renderContainer, targetRef, disableAdaptiveMode, size и alignTip не нужны мобильной\n    // версии и не должны попадать в DOM — исключаются из rest, который спредится на DropdownMobile.\n    children,\n    renderContainer,\n    targetRef,\n    disableAdaptiveMode,\n    size,\n    alignTip,\n    className,\n    isOpen,\n    onShow,\n    ...rest\n}) => {\n    const { elements, setTooltipOpen } = useContext(TooltipContext);\n    const tooltipRef = useRef<HTMLDivElement | null>(null);\n    const classNames = clsx(styles.tooltipMobile, { [styles.headerless]: elements.mobileHeader === null }, className);\n\n    useEffect(() => {\n        if (isOpen && tooltipRef.current) {\n            onShow?.(tooltipRef.current);\n        }\n        // onShow намеренно вне зависимостей: колбэк вызывается только на открытие подсказки,\n        // иначе нестабильная inline-функция вызывала бы его на каждый рендер.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isOpen]);\n\n    /** Рендер кнопки закрытия. */\n    const renderCloseButton = () => {\n        return (\n            <div className={styles.closeButton}>\n                <TooltipMobileCloseButton {...elements.closeButton?.props} />\n            </div>\n        );\n    };\n\n    return (\n        <>\n            {elements.target}\n            <Portal container={document.body}>\n                <DropdownMobile\n                    className={classNames}\n                    tabIndex={-1}\n                    opened={isOpen}\n                    setOpened={setTooltipOpen}\n                    {...rest}\n                    ref={tooltipRef}\n                >\n                    {elements.mobileHeader}\n                    <DropdownMobileBody className={styles.tooltipMobileContent}>\n                        {elements.body}\n                        {elements.link}\n                        {elements.mobileHeader === null && renderCloseButton()}\n                    </DropdownMobileBody>\n                </DropdownMobile>\n            </Portal>\n        </>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAsBO,MAAM,gBAA+C,CAAC;AAAA;AAAA;AAAA,EAGzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,EAAE,UAAU,mBAAmB,WAAW,cAAc;AAC9D,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,aAAa,KAAK,OAAO,eAAe,EAAE,CAAC,OAAO,UAAU,GAAG,SAAS,iBAAiB,KAAA,GAAQ,SAAS;AAEhH,YAAU,MAAM;AACZ,QAAI,UAAU,WAAW,SAAS;AAC9B,uCAAS,WAAW;AAAA,IACxB;AAAA,EAIJ,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,oBAAoB,MAAM;;AAC5B,WACI,oBAAC,OAAA,EAAI,WAAW,OAAO,aACnB,UAAA,oBAAC,0BAAA,EAA0B,IAAG,cAAS,gBAAT,mBAAsB,MAAA,CAAO,EAAA,CAC/D;AAAA,EAER;AAEA,SACI,qBAAA,UAAA,EACK,UAAA;AAAA,IAAA,SAAS;AAAA,IACV,oBAAC,QAAA,EAAO,WAAW,SAAS,MACxB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW;AAAA,QACX,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,WAAW;AAAA,QACV,GAAG;AAAA,QACJ,KAAK;AAAA,QAEJ,UAAA;AAAA,UAAA,SAAS;AAAA,UACV,qBAAC,oBAAA,EAAmB,WAAW,OAAO,sBACjC,UAAA;AAAA,YAAA,SAAS;AAAA,YACT,SAAS;AAAA,YACT,SAAS,iBAAiB,QAAQ,kBAAA;AAAA,UAAkB,EAAA,CACzD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACJ,CACJ;AAAA,EAAA,GACJ;AAER;"}

package/components/Tooltip/components/mobile/components/TooltipMobileHeader.js

@@ -8,8 +8,8 @@ import { EFontType, ETextSize } from "../../../../Typography/enums.js";
 const TooltipMobileHeader = ({ children, ...rest }) => {
   var _a;
   const { elements } = useContext(TooltipContext);
-  const renderCloseButton = /* @__PURE__ */ jsx(TooltipMobileCloseButton, { ...(_a = elements.closeButton) == null ? void 0 : _a.props });
-  return /* @__PURE__ */ jsx(DropdownMobileHeader, { controlButtons: renderCloseButton, ...rest, children: /* @__PURE__ */ jsx(Text, { size: ETextSize.B3, type: EFontType.PRIMARY, tag: "div", children }) });
+  const closeButton = /* @__PURE__ */ jsx(TooltipMobileCloseButton, { ...(_a = elements.closeButton) == null ? void 0 : _a.props });
+  return /* @__PURE__ */ jsx(DropdownMobileHeader, { controlButtons: closeButton, ...rest, children: /* @__PURE__ */ jsx(Text, { size: ETextSize.B3, type: EFontType.PRIMARY, tag: "div", children }) });
 };
 export {
   TooltipMobileHeader

package/components/Tooltip/components/mobile/components/TooltipMobileHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipMobileHeader.js","sources":["../../../../../../src/components/Tooltip/components/mobile/components/TooltipMobileHeader.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { DropdownMobileHeader } from \"@sberbusiness/triplex-next/components/Dropdown/mobile/DropdownMobileHeader\";\nimport { TooltipContext } from \"@sberbusiness/triplex-next/components/Tooltip/TootlipContext\";\nimport { TooltipMobileCloseButton } from \"@sberbusiness/triplex-next/components/Tooltip/components/mobile/components/TooltipMobileCloseButton\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { EFontType, ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\nimport { ITooltipMobileHeaderProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/** Заголовок компонента TooltipMobile. */\nexport const TooltipMobileHeader: React.FC<ITooltipMobileHeaderProps> = ({ children, ...rest }) => {\n    const { elements } = useContext(TooltipContext);\n\n    /** Рендер кнопки закрытия DropdownMobile. */\n    const renderCloseButton = <TooltipMobileCloseButton {...elements.closeButton?.props} />;\n\n    return (\n        <DropdownMobileHeader controlButtons={renderCloseButton} {...rest}>\n            <Text size={ETextSize.B3} type={EFontType.PRIMARY} tag=\"div\">\n                {children}\n            </Text>\n        </DropdownMobileHeader>\n    );\n};\n"],"names":[],"mappings":";;;;;;;AASO,MAAM,sBAA2D,CAAC,EAAE,UAAU,GAAG,WAAW;;AAC/F,QAAM,EAAE,SAAA,IAAa,WAAW,cAAc;AAG9C,QAAM,oBAAoB,oBAAC,0BAAA,EAA0B,IAAG,cAAS,gBAAT,mBAAsB,OAAO;AAErF,6BACK,sBAAA,EAAqB,gBAAgB,mBAAoB,GAAG,MACzD,UAAA,oBAAC,MAAA,EAAK,MAAM,UAAU,IAAI,MAAM,UAAU,SAAS,KAAI,OAClD,UACL,GACJ;AAER;"}
+{"version":3,"file":"TooltipMobileHeader.js","sources":["../../../../../../src/components/Tooltip/components/mobile/components/TooltipMobileHeader.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { DropdownMobileHeader } from \"@sberbusiness/triplex-next/components/Dropdown/mobile/DropdownMobileHeader\";\nimport { TooltipContext } from \"@sberbusiness/triplex-next/components/Tooltip/TootlipContext\";\nimport { TooltipMobileCloseButton } from \"@sberbusiness/triplex-next/components/Tooltip/components/mobile/components/TooltipMobileCloseButton\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { EFontType, ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\nimport { ITooltipMobileHeaderProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/**\n * Заголовок компонента TooltipMobile.\n * Кнопку закрытия подставляет сам, наследуя props переданного в Tooltip TooltipXButton.\n */\nexport const TooltipMobileHeader: React.FC<ITooltipMobileHeaderProps> = ({ children, ...rest }) => {\n    const { elements } = useContext(TooltipContext);\n\n    /** Кнопка закрытия мобильной версии подсказки. */\n    const closeButton = <TooltipMobileCloseButton {...elements.closeButton?.props} />;\n\n    return (\n        <DropdownMobileHeader controlButtons={closeButton} {...rest}>\n            <Text size={ETextSize.B3} type={EFontType.PRIMARY} tag=\"div\">\n                {children}\n            </Text>\n        </DropdownMobileHeader>\n    );\n};\n"],"names":[],"mappings":";;;;;;;AAYO,MAAM,sBAA2D,CAAC,EAAE,UAAU,GAAG,WAAW;;AAC/F,QAAM,EAAE,SAAA,IAAa,WAAW,cAAc;AAG9C,QAAM,cAAc,oBAAC,0BAAA,EAA0B,IAAG,cAAS,gBAAT,mBAAsB,OAAO;AAE/E,6BACK,sBAAA,EAAqB,gBAAgB,aAAc,GAAG,MACnD,UAAA,oBAAC,MAAA,EAAK,MAAM,UAAU,IAAI,MAAM,UAAU,SAAS,KAAI,OAClD,UACL,GACJ;AAER;"}

package/components/Tooltip/enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"enums.js","sources":["../../../src/components/Tooltip/enums.ts"],"sourcesContent":["/**\n * Параметры размера.\n *\n * H Высота.\n * W Ширина.\n */\nexport enum ETooltipSizeParameter {\n    H = \"h\",\n    W = \"w\",\n}\n\n/**\n * Начало координат (первые координаты).\n *\n * X икс.\n * Y игрек.\n */\nexport enum ETooltipStartCoordinates {\n    X = \"x\",\n    Y = \"y\",\n}\n\n/**\n * Конец координат (конечные координаты).\n *\n * X икс.\n * Y игрек.\n */\nexport enum ETooltipEndCoordinates {\n    X = \"x2\",\n    Y = \"y2\",\n}\n\n/**\n * Enum типов осей.\n *\n * MAIN Главная ось.\n * CROSS Вспомогательная, поперечная, перекрестная.\n */\nexport enum ETooltipAxesType {\n    MAIN = \"main\",\n    CROSS = \"cross\",\n}\n\n/**\n * Enum типов расположения элементов (flow) для flex.\n *\n * COLUMN Столбец.\n * ROW Ряд.\n */\nexport enum ETooltipFlowTypes {\n    COLUMN = \"column\",\n    ROW = \"row\",\n}\n\n/**\n * Enum типов настроек позиционирования.\n *\n * SIDE Сторона ддля типа.\n * STANDING Положение поповера относительно элемента (но это не точно).\n * FLOW Расположение элементов.\n */\nexport enum ETooltipTypeName {\n    SIDE = \"side\",\n    STANDING = \"standing\",\n    FLOW = \"flow\",\n}\n\n/**\n * Предпочитаемое место для поповера.\n *\n * ABOVE Сверху.\n * BELOW Снизу.\n * RIGHT Справа.\n * LEFT Слева.\n */\nexport enum ETooltipPreferPlace {\n    ABOVE = \"above\",\n    BELOW = \"below\",\n    RIGHT = \"right\",\n    LEFT = \"left\",\n}\n\n/**\n * Выравнивание для позиционирования (вроде как для треугольничка).\n *\n * END В конце.\n * CENTER По центру\n * START В начале.\n */\nexport enum ETooltipAlign {\n    END = \"end\",\n    CENTER = \"center\",\n    START = \"start\",\n}\n\n/**\n * Направление указателя поповера.\n *\n * UP Сверху.\n * DOWN Снизу.\n * RIGHT Справа.\n * LEFT Слева.\n */\nexport enum ETooltipDirection {\n    UP = \"up\",\n    DOWN = \"down\",\n    LEFT = \"left\",\n    RIGHT = \"right\",\n}\n\nexport enum ETooltipSize {\n    SM = \"sm\",\n    LG = \"lg\",\n}\n"],"names":["ETooltipSizeParameter","ETooltipStartCoordinates","ETooltipEndCoordinates","ETooltipAxesType","ETooltipFlowTypes","ETooltipTypeName","ETooltipPreferPlace","ETooltipAlign","ETooltipDirection","ETooltipSize"],"mappings":"AAMO,IAAK,0CAAAA,2BAAL;AACHA,yBAAA,GAAA,IAAI;AACJA,yBAAA,GAAA,IAAI;AAFI,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAWL,IAAK,6CAAAC,8BAAL;AACHA,4BAAA,GAAA,IAAI;AACJA,4BAAA,GAAA,IAAI;AAFI,SAAAA;AAAA,GAAA,4BAAA,CAAA,CAAA;AAWL,IAAK,2CAAAC,4BAAL;AACHA,0BAAA,GAAA,IAAI;AACJA,0BAAA,GAAA,IAAI;AAFI,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;AAWL,IAAK,qCAAAC,sBAAL;AACHA,oBAAA,MAAA,IAAO;AACPA,oBAAA,OAAA,IAAQ;AAFA,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAWL,IAAK,sCAAAC,uBAAL;AACHA,qBAAA,QAAA,IAAS;AACTA,qBAAA,KAAA,IAAM;AAFE,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAYL,IAAK,qCAAAC,sBAAL;AACHA,oBAAA,MAAA,IAAO;AACPA,oBAAA,UAAA,IAAW;AACXA,oBAAA,MAAA,IAAO;AAHC,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAcL,IAAK,wCAAAC,yBAAL;AACHA,uBAAA,OAAA,IAAQ;AACRA,uBAAA,OAAA,IAAQ;AACRA,uBAAA,OAAA,IAAQ;AACRA,uBAAA,MAAA,IAAO;AAJC,SAAAA;AAAA,GAAA,uBAAA,CAAA,CAAA;AAcL,IAAK,kCAAAC,mBAAL;AACHA,iBAAA,KAAA,IAAM;AACNA,iBAAA,QAAA,IAAS;AACTA,iBAAA,OAAA,IAAQ;AAHA,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAcL,IAAK,sCAAAC,uBAAL;AACHA,qBAAA,IAAA,IAAK;AACLA,qBAAA,MAAA,IAAO;AACPA,qBAAA,MAAA,IAAO;AACPA,qBAAA,OAAA,IAAQ;AAJA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAOL,IAAK,iCAAAC,kBAAL;AACHA,gBAAA,IAAA,IAAK;AACLA,gBAAA,IAAA,IAAK;AAFG,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;"}
+{"version":3,"file":"enums.js","sources":["../../../src/components/Tooltip/enums.ts"],"sourcesContent":["/**\n * Параметры размера.\n *\n * H Высота.\n * W Ширина.\n */\nexport enum ETooltipSizeParameter {\n    H = \"h\",\n    W = \"w\",\n}\n\n/**\n * Начало координат (первые координаты).\n *\n * X икс.\n * Y игрек.\n */\nexport enum ETooltipStartCoordinates {\n    X = \"x\",\n    Y = \"y\",\n}\n\n/**\n * Конец координат (конечные координаты).\n *\n * X икс.\n * Y игрек.\n */\nexport enum ETooltipEndCoordinates {\n    X = \"x2\",\n    Y = \"y2\",\n}\n\n/**\n * Enum типов осей.\n *\n * MAIN Главная ось.\n * CROSS Вспомогательная, поперечная, перекрестная.\n */\nexport enum ETooltipAxesType {\n    MAIN = \"main\",\n    CROSS = \"cross\",\n}\n\n/**\n * Enum типов расположения элементов (flow) для flex.\n *\n * COLUMN Столбец.\n * ROW Ряд.\n */\nexport enum ETooltipFlowTypes {\n    COLUMN = \"column\",\n    ROW = \"row\",\n}\n\n/**\n * Enum типов настроек позиционирования.\n *\n * SIDE Выравнивание подсказки вдоль основной оси зоны.\n * STANDING Положение подсказки относительно целевого элемента.\n * FLOW Расположение элементов (направление flex).\n */\nexport enum ETooltipTypeName {\n    SIDE = \"side\",\n    STANDING = \"standing\",\n    FLOW = \"flow\",\n}\n\n/**\n * Предпочитаемое место для поповера.\n *\n * ABOVE Сверху.\n * BELOW Снизу.\n * RIGHT Справа.\n * LEFT Слева.\n */\nexport enum ETooltipPreferPlace {\n    ABOVE = \"above\",\n    BELOW = \"below\",\n    RIGHT = \"right\",\n    LEFT = \"left\",\n}\n\n/**\n * Выравнивание указателя (стрелочки) подсказки относительно целевого элемента.\n *\n * END В конце.\n * CENTER По центру.\n * START В начале.\n */\nexport enum ETooltipAlign {\n    END = \"end\",\n    CENTER = \"center\",\n    START = \"start\",\n}\n\n/**\n * Направление указателя поповера.\n *\n * UP Сверху.\n * DOWN Снизу.\n * RIGHT Справа.\n * LEFT Слева.\n */\nexport enum ETooltipDirection {\n    UP = \"up\",\n    DOWN = \"down\",\n    LEFT = \"left\",\n    RIGHT = \"right\",\n}\n\n/**\n * Размер подсказки (ширина тела в десктопной версии).\n *\n * SM Узкая подсказка, 192px.\n * LG Широкая подсказка, 384px.\n */\nexport enum ETooltipSize {\n    SM = \"sm\",\n    LG = \"lg\",\n}\n"],"names":["ETooltipSizeParameter","ETooltipStartCoordinates","ETooltipEndCoordinates","ETooltipAxesType","ETooltipFlowTypes","ETooltipTypeName","ETooltipPreferPlace","ETooltipAlign","ETooltipDirection","ETooltipSize"],"mappings":"AAMO,IAAK,0CAAAA,2BAAL;AACHA,yBAAA,GAAA,IAAI;AACJA,yBAAA,GAAA,IAAI;AAFI,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAWL,IAAK,6CAAAC,8BAAL;AACHA,4BAAA,GAAA,IAAI;AACJA,4BAAA,GAAA,IAAI;AAFI,SAAAA;AAAA,GAAA,4BAAA,CAAA,CAAA;AAWL,IAAK,2CAAAC,4BAAL;AACHA,0BAAA,GAAA,IAAI;AACJA,0BAAA,GAAA,IAAI;AAFI,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;AAWL,IAAK,qCAAAC,sBAAL;AACHA,oBAAA,MAAA,IAAO;AACPA,oBAAA,OAAA,IAAQ;AAFA,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAWL,IAAK,sCAAAC,uBAAL;AACHA,qBAAA,QAAA,IAAS;AACTA,qBAAA,KAAA,IAAM;AAFE,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAYL,IAAK,qCAAAC,sBAAL;AACHA,oBAAA,MAAA,IAAO;AACPA,oBAAA,UAAA,IAAW;AACXA,oBAAA,MAAA,IAAO;AAHC,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAcL,IAAK,wCAAAC,yBAAL;AACHA,uBAAA,OAAA,IAAQ;AACRA,uBAAA,OAAA,IAAQ;AACRA,uBAAA,OAAA,IAAQ;AACRA,uBAAA,MAAA,IAAO;AAJC,SAAAA;AAAA,GAAA,uBAAA,CAAA,CAAA;AAcL,IAAK,kCAAAC,mBAAL;AACHA,iBAAA,KAAA,IAAM;AACNA,iBAAA,QAAA,IAAS;AACTA,iBAAA,OAAA,IAAQ;AAHA,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAcL,IAAK,sCAAAC,uBAAL;AACHA,qBAAA,IAAA,IAAK;AACLA,qBAAA,MAAA,IAAO;AACPA,qBAAA,MAAA,IAAO;AACPA,qBAAA,OAAA,IAAQ;AAJA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAaL,IAAK,iCAAAC,kBAAL;AACHA,gBAAA,IAAA,IAAK;AACLA,gBAAA,IAAA,IAAK;AAFG,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;"}

package/components/Tooltip/utils/Positioning.js

@@ -36,17 +36,14 @@ const place = (flow, axis, align, bounds, size) => {
   const axisProps = axes[flow][axis];
   if (align === ETooltipAlign.CENTER) {
     return centerOfBounds(flow, axis, bounds) - centerOfSize(flow, axis, size);
-  } else {
-    if (align === ETooltipAlign.END) {
-      return bounds[axisProps.end];
-    } else {
-      if (align === ETooltipAlign.START) {
-        return bounds[axisProps.start] - size[axisProps.size];
-      } else {
-        return 0;
-      }
-    }
   }
+  if (align === ETooltipAlign.END) {
+    return bounds[axisProps.end];
+  }
+  if (align === ETooltipAlign.START) {
+    return bounds[axisProps.start] - size[axisProps.size];
+  }
+  return 0;
 };
 const calcBounds = (el) => {
   if (el === window) {
@@ -139,15 +136,19 @@ const calcRelPos = (zone, targetBounds, tooltipSize) => {
   const mainSize = tooltipSize[main.size];
   const crossStart = place(zone.flow, ETooltipAxesType.CROSS, crossAlign, targetBounds, tooltipSize);
   const crossSize = tooltipSize[cross.size];
-  const result = {
-    [cross.start]: crossStart,
+  const position = {
+    [ETooltipStartCoordinates.X]: 0,
+    [ETooltipEndCoordinates.X]: 0,
+    [ETooltipStartCoordinates.Y]: 0,
+    [ETooltipEndCoordinates.Y]: 0,
     crossLength: crossSize,
-    [cross.end]: crossStart + crossSize,
-    [main.start]: mainStart,
-    mainLength: mainSize,
-    [main.end]: mainStart + mainSize
+    mainLength: mainSize
   };
-  return result;
+  position[cross.start] = crossStart;
+  position[cross.end] = crossStart + crossSize;
+  position[main.start] = mainStart;
+  position[main.end] = mainStart + mainSize;
+  return position;
 };
 export {
   axes,

package/components/Tooltip/utils/Positioning.js.map

@@ -1 +1 @@
-{"version":3,"file":"Positioning.js","sources":["../../../../src/components/Tooltip/utils/Positioning.ts"],"sourcesContent":["import {\n    ETooltipAlign,\n    ETooltipAxesType,\n    ETooltipEndCoordinates,\n    ETooltipFlowTypes,\n    ETooltipPreferPlace,\n    ETooltipSizeParameter,\n    ETooltipStartCoordinates,\n    ETooltipTypeName,\n} from \"@sberbusiness/triplex-next/components/Tooltip/enums\";\nimport {\n    ITooltipAxes,\n    ITooltipBounds,\n    ITooltipDomainSize,\n    ITooltipRelPosition,\n    ITooltipSize,\n} from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/**\n *  Значение на которое должен отступать тултип от границы экрана сверху и снизу.\n */\nconst WINDOW_OFFSET = 8;\n\n/**\n * Сравнивает координаты. По сути shadowEqual, но она делает лишние проверки, здесь мы ограничваемся только обьектом\n * координат.\n * @param {ITooltipBounds} o1 Сравниваемые координаты.\n * @param {ITooltipBounds} o2 Координаты для сравнения.\n */\nconst equalCoords = (o1: ITooltipBounds, o2: ITooltipBounds) => {\n    return o1.h === o2.h && o1.w === o2.w && o1.x === o2.x && o1.y === o2.y && o1.x2 === o2.x2 && o1.y2 === o2.y2;\n};\n\n/**\n * Система осей\n * Позволяет работать в разных ориентациях без необходимости вручную отслеживать используется x или y координаты.\n */\nconst axes: ITooltipAxes = {\n    column: {\n        cross: {\n            end: ETooltipEndCoordinates.X,\n            size: ETooltipSizeParameter.W,\n            start: ETooltipStartCoordinates.X,\n        },\n        main: {\n            end: ETooltipEndCoordinates.Y,\n            size: ETooltipSizeParameter.H,\n            start: ETooltipStartCoordinates.Y,\n        },\n    },\n    row: {\n        cross: {\n            end: ETooltipEndCoordinates.Y,\n            size: ETooltipSizeParameter.H,\n            start: ETooltipStartCoordinates.Y,\n        },\n        main: {\n            end: ETooltipEndCoordinates.X,\n            size: ETooltipSizeParameter.W,\n            start: ETooltipStartCoordinates.X,\n        },\n    },\n};\n\n/**\n * Найти центр для заданного размера.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ITooltipSize} size размер.\n *\n * @return {number} Середина размера.\n */\nconst centerOfSize = (flow: ETooltipFlowTypes, axis: ETooltipAxesType, size: ITooltipSize): number =>\n    size[axes[flow][axis].size] / 2;\n\n/**\n * Найти центр для заданных границ.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ITooltipBounds} bounds Границы.\n */\nconst centerOfBounds = (flow: ETooltipFlowTypes, axis: ETooltipAxesType, bounds: ITooltipBounds): number =>\n    bounds[axes[flow][axis].start] + bounds[axes[flow][axis].size] / 2;\n\n/**\n * Расстояние от центра до центра границ.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ITooltipBounds} boundsTo Границы от.\n * @param {ITooltipBounds} boundsFrom Границы до.\n */\nconst centerOfBoundsFromBounds = (\n    flow: ETooltipFlowTypes,\n    axis: ETooltipAxesType,\n    boundsTo: ITooltipBounds,\n    boundsFrom: ITooltipRelPosition,\n): number => centerOfBounds(flow, axis, boundsTo) - boundsFrom[axes[flow][axis].start];\n\n/**\n * Возвращет координаты для выравнивания.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ETooltipAlign} align Выравнивание для позиционирования.\n * @param {ITooltipBounds} bounds Границы.\n * @param {ITooltipSize} size размер.\n */\nconst place = (\n    flow: ETooltipFlowTypes,\n    axis: ETooltipAxesType,\n    align: ETooltipAlign,\n    bounds: ITooltipBounds,\n    size: ITooltipSize,\n): number => {\n    const axisProps = axes[flow][axis];\n\n    if (align === ETooltipAlign.CENTER) {\n        return centerOfBounds(flow, axis, bounds) - centerOfSize(flow, axis, size);\n    } else {\n        if (align === ETooltipAlign.END) {\n            return bounds[axisProps.end];\n        } else {\n            /* Рендеринг дома левосторонний. Поэтому если вспомогательный элемент спозиционирован перед основным, то\n                расположение вспомогательного должно быть с дополнительным отступом на его (вспомогательного) длину.*/\n            if (align === ETooltipAlign.START) {\n                return bounds[axisProps.start] - size[axisProps.size];\n            } else {\n                return 0;\n            }\n        }\n    }\n};\n\n// Расчеты размеров элемента\n/**\n * Поиск границ элемента.\n * @param {HTMLElement | Window} el Элемент, для которого ищутся границы.\n */\nconst calcBounds = (el: HTMLElement | Window): ITooltipBounds => {\n    if (el === window) {\n        return {\n            h: el.innerHeight,\n            w: el.innerWidth,\n            x: 0,\n            x2: el.innerWidth,\n            y: 0,\n            y2: el.innerHeight,\n        };\n    }\n\n    const b = (el as HTMLElement).getBoundingClientRect();\n\n    return {\n        h: b.bottom - b.top,\n        w: b.right - b.left,\n        x: b.left,\n        x2: b.right,\n        y: b.top,\n        y2: b.bottom,\n    };\n};\n\n/**\n * Проверка помещается ли элемент в область.\n * @param {ETooltipSizeParameter} dimension Тип координаты для сравнения (высота/ширина).\n */\nconst fitWithinChecker =\n    (dimension: ETooltipSizeParameter) =>\n    (domainSize: ITooltipDomainSize, itemSize: ITooltipSize): boolean =>\n        domainSize[dimension] >= itemSize[dimension];\n\nconst doesWidthFitWithin = fitWithinChecker(ETooltipSizeParameter.W);\nconst doesHeightFitWithin = fitWithinChecker(ETooltipSizeParameter.H);\n\nconst doesFitWithin = (domainSize: ITooltipDomainSize, itemSize: ITooltipSize): boolean =>\n    doesWidthFitWithin(domainSize, itemSize) && doesHeightFitWithin(domainSize, itemSize);\n\n/**\n * Алгоритм выбора наиболее подходящей зоны для тултипа. Текущий подход: в цикле пройти все зоны и выбрать\n * последнюю, что подходит, если ни одна не походит, выбрать наименее непоходящую.\n *\n * @param {ETooltipPreferPlace | undefined} preferPlace Предпочитаемое место расположение тултипа.\n * @param {ITooltipBounds} windowBounds Границы окна.\n * @param {ITooltipBounds} targetBounds Границы элемента, который обернут в тултип.\n * @param {number} tipHeight Высота Tip (стрелочки), px.\n * @param {number} maxFromEdgeForTip Уголок бегает по периметру максимально на 16 px от края.\n * @param {ITooltipSize} tooltipSize Размеры тултипа.\n *\n * @return {ITooltipDomainSize} Размеры области с параметрами.\n */\nconst pickZone = (\n    preferPlace: ETooltipPreferPlace | undefined,\n    windowBounds: ITooltipBounds,\n    targetBounds: ITooltipBounds,\n    tipHeight: number,\n    maxFromEdgeForTip: number,\n    tooltipSize: ITooltipSize,\n): ITooltipDomainSize => {\n    // В случае горизонтального расположения доступное место по высоте расчитывается по формуле:\n    // минимальная высота от центра таргета до границы окна по Y плюс максимальный возможный остаток высота тултипа и учитывается отступ от границы окна,\n    // чтобы тултип не прилигал к границе.\n    let targetMiddleY = targetBounds.y + (targetBounds.y2 - targetBounds.y) / 2; // расстояние от верхней границы окна до середина таргета по Y\n    const fromTargetMiddleToWindowY2 = windowBounds[ETooltipEndCoordinates.Y] - targetMiddleY; // расстояние от нижней границы окна до середина таргета по Y\n    // берем наименьшее расстояние от границы окна до середины таргета\n    if (fromTargetMiddleToWindowY2 < targetMiddleY) {\n        targetMiddleY = fromTargetMiddleToWindowY2;\n    }\n    const zoneHeight =\n        targetMiddleY + tooltipSize[ETooltipSizeParameter.H] - tipHeight - maxFromEdgeForTip - WINDOW_OFFSET;\n    const zones: ITooltipDomainSize[] = [\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.START,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.ABOVE,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.COLUMN,\n            h: targetBounds.y,\n            order: -1,\n            w: windowBounds.x2,\n        },\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.END,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.RIGHT,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.ROW,\n            h: zoneHeight,\n            order: 1,\n            w: windowBounds.x2 - targetBounds.x2,\n        },\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.END,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.BELOW,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.COLUMN,\n            h: windowBounds.y2 - targetBounds.y2,\n            order: 1,\n            w: windowBounds.x2,\n        },\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.START,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.LEFT,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.ROW,\n            h: zoneHeight,\n            order: -1,\n            w: targetBounds.x,\n        },\n    ];\n\n    /* Упорядочивает зоны по количеству popup которые будут обрезаны, если использовать зону. Первый элемент в\n     массиве режет наименьшее количество\n     const area = size.w * size.h  // Площадь popup постоянная и не меняет порядок\n    */\n    zones.forEach((zone) => {\n        zone.cutOff =\n            /* area */ -Math.max(0, Math.min(zone.w, tooltipSize.w)) * Math.max(0, Math.min(zone.h, tooltipSize.h));\n    });\n    zones.sort((a, b) => (a.cutOff ?? 0) - (b.cutOff ?? 0));\n\n    const availZones = zones.filter((zone) => doesFitWithin(zone, tooltipSize));\n\n    if (preferPlace) {\n        // Поиск доступных предпочитаемых зон\n        const preferredAvailZones = availZones.filter((zone) => zone[ETooltipTypeName.STANDING] === preferPlace);\n        if (preferredAvailZones.length) {\n            return preferredAvailZones[0];\n        }\n\n        // Если нет доступных предпочитаемых зон, то используем ту, что подходит лучше всего\n        const preferredZones = zones.filter((zone) => zone[ETooltipTypeName.STANDING] === preferPlace);\n        if (!availZones.length && preferredZones.length) {\n            return preferredZones[0];\n        }\n    }\n    // Возвращаем зону, которая подходит полностью либо лучше всего\n    return availZones.length ? availZones[0] : zones[0];\n};\n\n/**\n * Высчитывает относительные координаты\n * @param {ITooltipDomainSize} zone Зона с параметрами.\n * @param {ITooltipBounds} targetBounds Границы элемента, который обернут в тултип.\n * @param {ITooltipBounds} tooltipSize Размеры тултипа.\n */\nconst calcRelPos = (\n    zone: ITooltipDomainSize,\n    targetBounds: ITooltipBounds,\n    tooltipSize: ITooltipSize,\n): ITooltipRelPosition => {\n    const { main, cross } = axes[zone.flow];\n    const crossAlign = ETooltipAlign.CENTER;\n    const mainStart = place(zone.flow, ETooltipAxesType.MAIN, zone.side, targetBounds, tooltipSize);\n    const mainSize = tooltipSize[main.size];\n    const crossStart = place(zone.flow, ETooltipAxesType.CROSS, crossAlign, targetBounds, tooltipSize);\n\n    const crossSize = tooltipSize[cross.size];\n    const result = {\n        [cross.start]: crossStart,\n        crossLength: crossSize,\n        [cross.end]: crossStart + crossSize,\n        [main.start]: mainStart,\n        mainLength: mainSize,\n        [main.end]: mainStart + mainSize,\n    };\n    return result as unknown as ITooltipRelPosition;\n};\n\nexport {\n    calcRelPos,\n    place,\n    pickZone,\n    axes,\n    centerOfSize,\n    centerOfBounds,\n    centerOfBoundsFromBounds,\n    doesFitWithin,\n    equalCoords,\n    calcBounds,\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Positioning.js","sources":["../../../../src/components/Tooltip/utils/Positioning.ts"],"sourcesContent":["import {\n    ETooltipAlign,\n    ETooltipAxesType,\n    ETooltipEndCoordinates,\n    ETooltipFlowTypes,\n    ETooltipPreferPlace,\n    ETooltipSizeParameter,\n    ETooltipStartCoordinates,\n    ETooltipTypeName,\n} from \"@sberbusiness/triplex-next/components/Tooltip/enums\";\nimport {\n    ITooltipAxes,\n    ITooltipBounds,\n    ITooltipDomainSize,\n    ITooltipRelPosition,\n    ITooltipSize,\n} from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/**\n *  Значение на которое должен отступать тултип от границы экрана сверху и снизу.\n */\nconst WINDOW_OFFSET = 8;\n\n/**\n * Сравнивает координаты. По сути shallowEqual, но он делает лишние проверки — здесь достаточно сравнить\n * только поля объекта координат.\n * @param {ITooltipBounds} o1 Сравниваемые координаты.\n * @param {ITooltipBounds} o2 Координаты для сравнения.\n */\nconst equalCoords = (o1: ITooltipBounds, o2: ITooltipBounds) => {\n    return o1.h === o2.h && o1.w === o2.w && o1.x === o2.x && o1.y === o2.y && o1.x2 === o2.x2 && o1.y2 === o2.y2;\n};\n\n/**\n * Система осей\n * Позволяет работать в разных ориентациях без необходимости вручную отслеживать используется x или y координаты.\n */\nconst axes: ITooltipAxes = {\n    column: {\n        cross: {\n            end: ETooltipEndCoordinates.X,\n            size: ETooltipSizeParameter.W,\n            start: ETooltipStartCoordinates.X,\n        },\n        main: {\n            end: ETooltipEndCoordinates.Y,\n            size: ETooltipSizeParameter.H,\n            start: ETooltipStartCoordinates.Y,\n        },\n    },\n    row: {\n        cross: {\n            end: ETooltipEndCoordinates.Y,\n            size: ETooltipSizeParameter.H,\n            start: ETooltipStartCoordinates.Y,\n        },\n        main: {\n            end: ETooltipEndCoordinates.X,\n            size: ETooltipSizeParameter.W,\n            start: ETooltipStartCoordinates.X,\n        },\n    },\n};\n\n/**\n * Найти центр для заданного размера.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ITooltipSize} size размер.\n *\n * @return {number} Середина размера.\n */\nconst centerOfSize = (flow: ETooltipFlowTypes, axis: ETooltipAxesType, size: ITooltipSize): number =>\n    size[axes[flow][axis].size] / 2;\n\n/**\n * Найти центр для заданных границ.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ITooltipBounds} bounds Границы.\n */\nconst centerOfBounds = (flow: ETooltipFlowTypes, axis: ETooltipAxesType, bounds: ITooltipBounds): number =>\n    bounds[axes[flow][axis].start] + bounds[axes[flow][axis].size] / 2;\n\n/**\n * Расстояние от центра до центра границ.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ITooltipBounds} boundsTo Границы от.\n * @param {ITooltipBounds} boundsFrom Границы до.\n */\nconst centerOfBoundsFromBounds = (\n    flow: ETooltipFlowTypes,\n    axis: ETooltipAxesType,\n    boundsTo: ITooltipBounds,\n    boundsFrom: ITooltipRelPosition,\n): number => centerOfBounds(flow, axis, boundsTo) - boundsFrom[axes[flow][axis].start];\n\n/**\n * Возвращет координаты для выравнивания.\n *\n * @param {ETooltipFlowTypes} flow Тип flow в flex.\n * @param {ETooltipAxesType} axis Тип оси.\n * @param {ETooltipAlign} align Выравнивание для позиционирования.\n * @param {ITooltipBounds} bounds Границы.\n * @param {ITooltipSize} size размер.\n */\nconst place = (\n    flow: ETooltipFlowTypes,\n    axis: ETooltipAxesType,\n    align: ETooltipAlign,\n    bounds: ITooltipBounds,\n    size: ITooltipSize,\n): number => {\n    const axisProps = axes[flow][axis];\n\n    if (align === ETooltipAlign.CENTER) {\n        return centerOfBounds(flow, axis, bounds) - centerOfSize(flow, axis, size);\n    }\n\n    if (align === ETooltipAlign.END) {\n        return bounds[axisProps.end];\n    }\n\n    if (align === ETooltipAlign.START) {\n        /* Рендеринг дома левосторонний. Поэтому если вспомогательный элемент спозиционирован перед основным, то\n            расположение вспомогательного должно быть с дополнительным отступом на его (вспомогательного) длину.*/\n        return bounds[axisProps.start] - size[axisProps.size];\n    }\n\n    return 0;\n};\n\n// Расчеты размеров элемента\n/**\n * Поиск границ элемента.\n * @param {HTMLElement | Window} el Элемент, для которого ищутся границы.\n */\nconst calcBounds = (el: HTMLElement | Window): ITooltipBounds => {\n    if (el === window) {\n        return {\n            h: el.innerHeight,\n            w: el.innerWidth,\n            x: 0,\n            x2: el.innerWidth,\n            y: 0,\n            y2: el.innerHeight,\n        };\n    }\n\n    const b = (el as HTMLElement).getBoundingClientRect();\n\n    return {\n        h: b.bottom - b.top,\n        w: b.right - b.left,\n        x: b.left,\n        x2: b.right,\n        y: b.top,\n        y2: b.bottom,\n    };\n};\n\n/**\n * Проверка помещается ли элемент в область.\n * @param {ETooltipSizeParameter} dimension Тип координаты для сравнения (высота/ширина).\n */\nconst fitWithinChecker =\n    (dimension: ETooltipSizeParameter) =>\n    (domainSize: ITooltipDomainSize, itemSize: ITooltipSize): boolean =>\n        domainSize[dimension] >= itemSize[dimension];\n\nconst doesWidthFitWithin = fitWithinChecker(ETooltipSizeParameter.W);\nconst doesHeightFitWithin = fitWithinChecker(ETooltipSizeParameter.H);\n\nconst doesFitWithin = (domainSize: ITooltipDomainSize, itemSize: ITooltipSize): boolean =>\n    doesWidthFitWithin(domainSize, itemSize) && doesHeightFitWithin(domainSize, itemSize);\n\n/**\n * Алгоритм выбора наиболее подходящей зоны для тултипа. Текущий подход: в цикле пройти все зоны и выбрать\n * последнюю, что подходит, если ни одна не походит, выбрать наименее непоходящую.\n *\n * @param {ETooltipPreferPlace | undefined} preferPlace Предпочитаемое место расположение тултипа.\n * @param {ITooltipBounds} windowBounds Границы окна.\n * @param {ITooltipBounds} targetBounds Границы элемента, который обернут в тултип.\n * @param {number} tipHeight Высота Tip (стрелочки), px.\n * @param {number} maxFromEdgeForTip Уголок бегает по периметру максимально на 16 px от края.\n * @param {ITooltipSize} tooltipSize Размеры тултипа.\n *\n * @return {ITooltipDomainSize} Размеры области с параметрами.\n */\nconst pickZone = (\n    preferPlace: ETooltipPreferPlace | undefined,\n    windowBounds: ITooltipBounds,\n    targetBounds: ITooltipBounds,\n    tipHeight: number,\n    maxFromEdgeForTip: number,\n    tooltipSize: ITooltipSize,\n): ITooltipDomainSize => {\n    // В случае горизонтального расположения доступное место по высоте расчитывается по формуле:\n    // минимальная высота от центра таргета до границы окна по Y плюс максимальный возможный остаток высота тултипа и учитывается отступ от границы окна,\n    // чтобы тултип не прилигал к границе.\n    let targetMiddleY = targetBounds.y + (targetBounds.y2 - targetBounds.y) / 2; // расстояние от верхней границы окна до середина таргета по Y\n    const fromTargetMiddleToWindowY2 = windowBounds[ETooltipEndCoordinates.Y] - targetMiddleY; // расстояние от нижней границы окна до середина таргета по Y\n    // берем наименьшее расстояние от границы окна до середины таргета\n    if (fromTargetMiddleToWindowY2 < targetMiddleY) {\n        targetMiddleY = fromTargetMiddleToWindowY2;\n    }\n    const zoneHeight =\n        targetMiddleY + tooltipSize[ETooltipSizeParameter.H] - tipHeight - maxFromEdgeForTip - WINDOW_OFFSET;\n    const zones: ITooltipDomainSize[] = [\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.START,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.ABOVE,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.COLUMN,\n            h: targetBounds.y,\n            order: -1,\n            w: windowBounds.x2,\n        },\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.END,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.RIGHT,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.ROW,\n            h: zoneHeight,\n            order: 1,\n            w: windowBounds.x2 - targetBounds.x2,\n        },\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.END,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.BELOW,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.COLUMN,\n            h: windowBounds.y2 - targetBounds.y2,\n            order: 1,\n            w: windowBounds.x2,\n        },\n        {\n            [ETooltipTypeName.SIDE]: ETooltipAlign.START,\n            [ETooltipTypeName.STANDING]: ETooltipPreferPlace.LEFT,\n            [ETooltipTypeName.FLOW]: ETooltipFlowTypes.ROW,\n            h: zoneHeight,\n            order: -1,\n            w: targetBounds.x,\n        },\n    ];\n\n    /* Упорядочивает зоны по количеству popup которые будут обрезаны, если использовать зону. Первый элемент в\n     массиве режет наименьшее количество\n     const area = size.w * size.h  // Площадь popup постоянная и не меняет порядок\n    */\n    zones.forEach((zone) => {\n        zone.cutOff =\n            /* area */ -Math.max(0, Math.min(zone.w, tooltipSize.w)) * Math.max(0, Math.min(zone.h, tooltipSize.h));\n    });\n    zones.sort((a, b) => (a.cutOff ?? 0) - (b.cutOff ?? 0));\n\n    const availZones = zones.filter((zone) => doesFitWithin(zone, tooltipSize));\n\n    if (preferPlace) {\n        // Поиск доступных предпочитаемых зон\n        const preferredAvailZones = availZones.filter((zone) => zone[ETooltipTypeName.STANDING] === preferPlace);\n        if (preferredAvailZones.length) {\n            return preferredAvailZones[0];\n        }\n\n        // Если нет доступных предпочитаемых зон, то используем ту, что подходит лучше всего\n        const preferredZones = zones.filter((zone) => zone[ETooltipTypeName.STANDING] === preferPlace);\n        if (!availZones.length && preferredZones.length) {\n            return preferredZones[0];\n        }\n    }\n    // Возвращаем зону, которая подходит полностью либо лучше всего\n    return availZones.length ? availZones[0] : zones[0];\n};\n\n/**\n * Высчитывает относительные координаты\n * @param {ITooltipDomainSize} zone Зона с параметрами.\n * @param {ITooltipBounds} targetBounds Границы элемента, который обернут в тултип.\n * @param {ITooltipBounds} tooltipSize Размеры тултипа.\n */\nconst calcRelPos = (\n    zone: ITooltipDomainSize,\n    targetBounds: ITooltipBounds,\n    tooltipSize: ITooltipSize,\n): ITooltipRelPosition => {\n    const { main, cross } = axes[zone.flow];\n    const crossAlign = ETooltipAlign.CENTER;\n    const mainStart = place(zone.flow, ETooltipAxesType.MAIN, zone.side, targetBounds, tooltipSize);\n    const mainSize = tooltipSize[main.size];\n    const crossStart = place(zone.flow, ETooltipAxesType.CROSS, crossAlign, targetBounds, tooltipSize);\n    const crossSize = tooltipSize[cross.size];\n\n    // Главная и вспомогательная оси вместе покрывают все четыре координаты, поэтому нули — это заглушки,\n    // которые перезаписываются ниже.\n    const position: ITooltipRelPosition = {\n        [ETooltipStartCoordinates.X]: 0,\n        [ETooltipEndCoordinates.X]: 0,\n        [ETooltipStartCoordinates.Y]: 0,\n        [ETooltipEndCoordinates.Y]: 0,\n        crossLength: crossSize,\n        mainLength: mainSize,\n    };\n\n    position[cross.start] = crossStart;\n    position[cross.end] = crossStart + crossSize;\n    position[main.start] = mainStart;\n    position[main.end] = mainStart + mainSize;\n\n    return position;\n};\n\nexport {\n    calcRelPos,\n    place,\n    pickZone,\n    axes,\n    centerOfSize,\n    centerOfBounds,\n    centerOfBoundsFromBounds,\n    doesFitWithin,\n    equalCoords,\n    calcBounds,\n};\n"],"names":[],"mappings":"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"}

package/components/Tooltip/utils/useTooltipTheme.js

@@ -1,51 +1,79 @@
-import { useEffect } from "react";
+import { useRef, useEffect } from "react";
 import "../../DesignTokens/DesignTokensComponents.js";
 import "../../DesignTokens/DesignTokensComponentsThemeDark.js";
 import "../../ThemeProvider/ThemeProviderContext.js";
 import { useToken } from "../../ThemeProvider/useToken.js";
+const THEME_CLEANUP_DELAY_MS = 500;
+const getUsageCounterAttrName = (scopeClassName) => `data-tooltip-theme-${scopeClassName}-counter`;
 function useTooltipTheme(open, renderContainer) {
   const { scopeClassName } = useToken();
+  const hasUsageRef = useRef(false);
+  const cleanupTimeoutRef = useRef(void 0);
   useEffect(() => {
     if (scopeClassName && renderContainer) {
       const cl = renderContainer.classList;
       if (open) {
+        if (cleanupTimeoutRef.current !== void 0) {
+          window.clearTimeout(cleanupTimeoutRef.current);
+          cleanupTimeoutRef.current = void 0;
+        }
         if (!cl.contains(scopeClassName)) {
           cl.add(scopeClassName);
         }
-        incTooltipThemeUsage(renderContainer, scopeClassName);
-      } else {
-        if (cl.contains(scopeClassName)) {
-          const usage = decTooltipThemeUsage(renderContainer, scopeClassName);
-          if (usage <= 0) {
-            window.setTimeout(() => {
+        if (!hasUsageRef.current) {
+          incTooltipThemeUsage(renderContainer, scopeClassName);
+          hasUsageRef.current = true;
+        }
+      } else if (hasUsageRef.current) {
+        hasUsageRef.current = false;
+        const usage = decTooltipThemeUsage(renderContainer, scopeClassName);
+        if (usage <= 0) {
+          cleanupTimeoutRef.current = window.setTimeout(() => {
+            cleanupTimeoutRef.current = void 0;
+            if (getTooltipThemeUsage(renderContainer, scopeClassName) <= 0) {
               cl.remove(scopeClassName);
-            }, 500);
-          }
+            }
+          }, THEME_CLEANUP_DELAY_MS);
         }
       }
     }
   }, [scopeClassName, open, renderContainer]);
   useEffect(() => {
     return () => {
+      const hasPendingCleanup = cleanupTimeoutRef.current !== void 0;
+      if (hasPendingCleanup) {
+        window.clearTimeout(cleanupTimeoutRef.current);
+        cleanupTimeoutRef.current = void 0;
+      }
+      if (!scopeClassName || !renderContainer) {
+        return;
+      }
       const cl = renderContainer.classList;
-      if (cl.contains(scopeClassName)) {
+      if (hasUsageRef.current) {
+        hasUsageRef.current = false;
         const usage = decTooltipThemeUsage(renderContainer, scopeClassName);
         if (usage <= 0) {
           cl.remove(scopeClassName);
         }
+      } else if (hasPendingCleanup && getTooltipThemeUsage(renderContainer, scopeClassName) <= 0) {
+        cl.remove(scopeClassName);
       }
     };
   }, [renderContainer, scopeClassName]);
 }
+function getTooltipThemeUsage(node, scopeClassName) {
+  const counterAttr = node.getAttribute(getUsageCounterAttrName(scopeClassName));
+  return counterAttr ? parseInt(counterAttr, 10) : 0;
+}
 function incTooltipThemeUsage(node, scopeClassName) {
-  const counterAttrName = `data-tooltip-theme-${scopeClassName}-counter`;
+  const counterAttrName = getUsageCounterAttrName(scopeClassName);
   const counterAttr = node.getAttribute(counterAttrName);
   const counter = counterAttr ? parseInt(counterAttr, 10) + 1 : 1;
   node.setAttribute(counterAttrName, counter.toString());
   return counter;
 }
 function decTooltipThemeUsage(node, scopeClassName) {
-  const counterAttrName = `data-tooltip-theme-${scopeClassName}-counter`;
+  const counterAttrName = getUsageCounterAttrName(scopeClassName);
   const counterAttr = node.getAttribute(counterAttrName);
   const counter = counterAttr ? parseInt(counterAttr, 10) - 1 : 0;
   if (counter > 0) {

package/components/Tooltip/utils/useTooltipTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltipTheme.js","sources":["../../../../src/components/Tooltip/utils/useTooltipTheme.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useToken } from \"@sberbusiness/triplex-next/components/ThemeProvider\";\n\n/**\n * Хук для установки css-класса текущей темы на контейнер tooltip-а.\n * @param open Флаг отображения тултипа.\n * @param renderContainer DOM-элемент, куда рендерится тултип\n */\nexport function useTooltipTheme(open: boolean, renderContainer: Element) {\n    const { scopeClassName } = useToken();\n\n    useEffect(() => {\n        if (scopeClassName && renderContainer) {\n            const cl = renderContainer.classList;\n\n            if (open) {\n                if (!cl.contains(scopeClassName)) {\n                    cl.add(scopeClassName);\n                }\n                incTooltipThemeUsage(renderContainer, scopeClassName);\n            } else {\n                if (cl.contains(scopeClassName)) {\n                    const usage = decTooltipThemeUsage(renderContainer, scopeClassName);\n                    if (usage <= 0) {\n                        // т.к. закрытие с анимацией, стили нужно придержать на это время\n                        // см. TooltipDesktopBase ENTER_EXIT_TRANSITION_DURATION_MS\n                        window.setTimeout(() => {\n                            cl.remove(scopeClassName);\n                        }, 500);\n                    }\n                }\n            }\n        }\n\n        // очистка эффекта нам нужна только на unmount, тут она мешает, удаляя css класс темы раньше времени\n    }, [scopeClassName, open, renderContainer]);\n\n    // unmount, если тултип еще отображался в этот момент\n    useEffect(() => {\n        return () => {\n            const cl = renderContainer.classList;\n            if (cl.contains(scopeClassName)) {\n                const usage = decTooltipThemeUsage(renderContainer, scopeClassName);\n                if (usage <= 0) {\n                    cl.remove(scopeClassName);\n                }\n            }\n        };\n    }, [renderContainer, scopeClassName]);\n}\n\nfunction incTooltipThemeUsage(node: Element, scopeClassName: string): number {\n    const counterAttrName = `data-tooltip-theme-${scopeClassName}-counter`;\n    const counterAttr = node.getAttribute(counterAttrName);\n    const counter = counterAttr ? parseInt(counterAttr, 10) + 1 : 1;\n    node.setAttribute(counterAttrName, counter.toString());\n\n    return counter;\n}\n\nfunction decTooltipThemeUsage(node: Element, scopeClassName: string): number {\n    const counterAttrName = `data-tooltip-theme-${scopeClassName}-counter`;\n    const counterAttr = node.getAttribute(counterAttrName);\n    const counter = counterAttr ? parseInt(counterAttr, 10) - 1 : 0;\n\n    if (counter > 0) {\n        node.setAttribute(counterAttrName, counter.toString());\n    } else {\n        node.removeAttribute(counterAttrName);\n    }\n\n    return counter;\n}\n"],"names":[],"mappings":";;;;;AAQO,SAAS,gBAAgB,MAAe,iBAA0B;AACrE,QAAM,EAAE,eAAA,IAAmB,SAAA;AAE3B,YAAU,MAAM;AACZ,QAAI,kBAAkB,iBAAiB;AACnC,YAAM,KAAK,gBAAgB;AAE3B,UAAI,MAAM;AACN,YAAI,CAAC,GAAG,SAAS,cAAc,GAAG;AAC9B,aAAG,IAAI,cAAc;AAAA,QACzB;AACA,6BAAqB,iBAAiB,cAAc;AAAA,MACxD,OAAO;AACH,YAAI,GAAG,SAAS,cAAc,GAAG;AAC7B,gBAAM,QAAQ,qBAAqB,iBAAiB,cAAc;AAClE,cAAI,SAAS,GAAG;AAGZ,mBAAO,WAAW,MAAM;AACpB,iBAAG,OAAO,cAAc;AAAA,YAC5B,GAAG,GAAG;AAAA,UACV;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EAGJ,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAG1C,YAAU,MAAM;AACZ,WAAO,MAAM;AACT,YAAM,KAAK,gBAAgB;AAC3B,UAAI,GAAG,SAAS,cAAc,GAAG;AAC7B,cAAM,QAAQ,qBAAqB,iBAAiB,cAAc;AAClE,YAAI,SAAS,GAAG;AACZ,aAAG,OAAO,cAAc;AAAA,QAC5B;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,iBAAiB,cAAc,CAAC;AACxC;AAEA,SAAS,qBAAqB,MAAe,gBAAgC;AACzE,QAAM,kBAAkB,sBAAsB,cAAc;AAC5D,QAAM,cAAc,KAAK,aAAa,eAAe;AACrD,QAAM,UAAU,cAAc,SAAS,aAAa,EAAE,IAAI,IAAI;AAC9D,OAAK,aAAa,iBAAiB,QAAQ,SAAA,CAAU;AAErD,SAAO;AACX;AAEA,SAAS,qBAAqB,MAAe,gBAAgC;AACzE,QAAM,kBAAkB,sBAAsB,cAAc;AAC5D,QAAM,cAAc,KAAK,aAAa,eAAe;AACrD,QAAM,UAAU,cAAc,SAAS,aAAa,EAAE,IAAI,IAAI;AAE9D,MAAI,UAAU,GAAG;AACb,SAAK,aAAa,iBAAiB,QAAQ,SAAA,CAAU;AAAA,EACzD,OAAO;AACH,SAAK,gBAAgB,eAAe;AAAA,EACxC;AAEA,SAAO;AACX;"}
+{"version":3,"file":"useTooltipTheme.js","sources":["../../../../src/components/Tooltip/utils/useTooltipTheme.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useToken } from \"@sberbusiness/triplex-next/components/ThemeProvider\";\n\n/**\n * Задержка снятия класса темы после закрытия подсказки, мс.\n * Закрытие идёт с анимацией, поэтому стили нужно придержать на это время.\n * См. ENTER_EXIT_TRANSITION_DURATION_MS в TooltipDesktopBase.\n */\nconst THEME_CLEANUP_DELAY_MS = 500;\n\n/**\n * Имя data-атрибута со счётчиком подсказок, которые сейчас используют класс темы на контейнере.\n * @param scopeClassName Класс темы.\n */\nconst getUsageCounterAttrName = (scopeClassName: string) => `data-tooltip-theme-${scopeClassName}-counter`;\n\n/**\n * Хук для установки css-класса текущей темы на контейнер tooltip-а.\n * @param open Флаг отображения тултипа.\n * @param renderContainer DOM-элемент, куда рендерится тултип\n */\nexport function useTooltipTheme(open: boolean, renderContainer: Element) {\n    const { scopeClassName } = useToken();\n    /** Держит ли эта подсказка сейчас инкремент счётчика — чтобы не декрементировать чужой. */\n    const hasUsageRef = useRef(false);\n    /** Идентификатор отложенного снятия класса темы, запланированного этой подсказкой. */\n    const cleanupTimeoutRef = useRef<number | undefined>(undefined);\n\n    useEffect(() => {\n        if (scopeClassName && renderContainer) {\n            const cl = renderContainer.classList;\n\n            if (open) {\n                // Подсказку открыли снова до истечения задержки — снятие класса больше не нужно.\n                if (cleanupTimeoutRef.current !== undefined) {\n                    window.clearTimeout(cleanupTimeoutRef.current);\n                    cleanupTimeoutRef.current = undefined;\n                }\n\n                if (!cl.contains(scopeClassName)) {\n                    cl.add(scopeClassName);\n                }\n\n                if (!hasUsageRef.current) {\n                    incTooltipThemeUsage(renderContainer, scopeClassName);\n                    hasUsageRef.current = true;\n                }\n            } else if (hasUsageRef.current) {\n                hasUsageRef.current = false;\n\n                const usage = decTooltipThemeUsage(renderContainer, scopeClassName);\n                if (usage <= 0) {\n                    cleanupTimeoutRef.current = window.setTimeout(() => {\n                        cleanupTimeoutRef.current = undefined;\n\n                        // За время задержки контейнер могла занять эта же или другая подсказка — класс ещё нужен.\n                        if (getTooltipThemeUsage(renderContainer, scopeClassName) <= 0) {\n                            cl.remove(scopeClassName);\n                        }\n                    }, THEME_CLEANUP_DELAY_MS);\n                }\n            }\n        }\n\n        // очистка эффекта нам нужна только на unmount, тут она мешает, удаляя css класс темы раньше времени\n    }, [scopeClassName, open, renderContainer]);\n\n    // unmount, если тултип еще отображался в этот момент\n    useEffect(() => {\n        return () => {\n            const hasPendingCleanup = cleanupTimeoutRef.current !== undefined;\n\n            if (hasPendingCleanup) {\n                window.clearTimeout(cleanupTimeoutRef.current);\n                cleanupTimeoutRef.current = undefined;\n            }\n\n            if (!scopeClassName || !renderContainer) {\n                return;\n            }\n\n            const cl = renderContainer.classList;\n\n            if (hasUsageRef.current) {\n                hasUsageRef.current = false;\n\n                const usage = decTooltipThemeUsage(renderContainer, scopeClassName);\n                if (usage <= 0) {\n                    cl.remove(scopeClassName);\n                }\n            } else if (hasPendingCleanup && getTooltipThemeUsage(renderContainer, scopeClassName) <= 0) {\n                // Снятие класса было отложено, но ждать больше нечему — снимаем сразу.\n                cl.remove(scopeClassName);\n            }\n        };\n    }, [renderContainer, scopeClassName]);\n}\n\n/**\n * Текущее значение счётчика подсказок, использующих класс темы на контейнере.\n * @param node Контейнер рендера подсказки.\n * @param scopeClassName Класс темы.\n */\nfunction getTooltipThemeUsage(node: Element, scopeClassName: string): number {\n    const counterAttr = node.getAttribute(getUsageCounterAttrName(scopeClassName));\n\n    return counterAttr ? parseInt(counterAttr, 10) : 0;\n}\n\n/**\n * Увеличивает счётчик подсказок, использующих класс темы на контейнере.\n * @param node Контейнер рендера подсказки.\n * @param scopeClassName Класс темы.\n * @returns Новое значение счётчика.\n */\nfunction incTooltipThemeUsage(node: Element, scopeClassName: string): number {\n    const counterAttrName = getUsageCounterAttrName(scopeClassName);\n    const counterAttr = node.getAttribute(counterAttrName);\n    const counter = counterAttr ? parseInt(counterAttr, 10) + 1 : 1;\n    node.setAttribute(counterAttrName, counter.toString());\n\n    return counter;\n}\n\n/**\n * Уменьшает счётчик подсказок, использующих класс темы на контейнере.\n * Когда счётчик доходит до нуля, атрибут удаляется.\n * @param node Контейнер рендера подсказки.\n * @param scopeClassName Класс темы.\n * @returns Новое значение счётчика.\n */\nfunction decTooltipThemeUsage(node: Element, scopeClassName: string): number {\n    const counterAttrName = getUsageCounterAttrName(scopeClassName);\n    const counterAttr = node.getAttribute(counterAttrName);\n    const counter = counterAttr ? parseInt(counterAttr, 10) - 1 : 0;\n\n    if (counter > 0) {\n        node.setAttribute(counterAttrName, counter.toString());\n    } else {\n        node.removeAttribute(counterAttrName);\n    }\n\n    return counter;\n}\n"],"names":[],"mappings":";;;;;AAQA,MAAM,yBAAyB;AAM/B,MAAM,0BAA0B,CAAC,mBAA2B,sBAAsB,cAAc;AAOzF,SAAS,gBAAgB,MAAe,iBAA0B;AACrE,QAAM,EAAE,eAAA,IAAmB,SAAA;AAE3B,QAAM,cAAc,OAAO,KAAK;AAEhC,QAAM,oBAAoB,OAA2B,MAAS;AAE9D,YAAU,MAAM;AACZ,QAAI,kBAAkB,iBAAiB;AACnC,YAAM,KAAK,gBAAgB;AAE3B,UAAI,MAAM;AAEN,YAAI,kBAAkB,YAAY,QAAW;AACzC,iBAAO,aAAa,kBAAkB,OAAO;AAC7C,4BAAkB,UAAU;AAAA,QAChC;AAEA,YAAI,CAAC,GAAG,SAAS,cAAc,GAAG;AAC9B,aAAG,IAAI,cAAc;AAAA,QACzB;AAEA,YAAI,CAAC,YAAY,SAAS;AACtB,+BAAqB,iBAAiB,cAAc;AACpD,sBAAY,UAAU;AAAA,QAC1B;AAAA,MACJ,WAAW,YAAY,SAAS;AAC5B,oBAAY,UAAU;AAEtB,cAAM,QAAQ,qBAAqB,iBAAiB,cAAc;AAClE,YAAI,SAAS,GAAG;AACZ,4BAAkB,UAAU,OAAO,WAAW,MAAM;AAChD,8BAAkB,UAAU;AAG5B,gBAAI,qBAAqB,iBAAiB,cAAc,KAAK,GAAG;AAC5D,iBAAG,OAAO,cAAc;AAAA,YAC5B;AAAA,UACJ,GAAG,sBAAsB;AAAA,QAC7B;AAAA,MACJ;AAAA,IACJ;AAAA,EAGJ,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAG1C,YAAU,MAAM;AACZ,WAAO,MAAM;AACT,YAAM,oBAAoB,kBAAkB,YAAY;AAExD,UAAI,mBAAmB;AACnB,eAAO,aAAa,kBAAkB,OAAO;AAC7C,0BAAkB,UAAU;AAAA,MAChC;AAEA,UAAI,CAAC,kBAAkB,CAAC,iBAAiB;AACrC;AAAA,MACJ;AAEA,YAAM,KAAK,gBAAgB;AAE3B,UAAI,YAAY,SAAS;AACrB,oBAAY,UAAU;AAEtB,cAAM,QAAQ,qBAAqB,iBAAiB,cAAc;AAClE,YAAI,SAAS,GAAG;AACZ,aAAG,OAAO,cAAc;AAAA,QAC5B;AAAA,MACJ,WAAW,qBAAqB,qBAAqB,iBAAiB,cAAc,KAAK,GAAG;AAExF,WAAG,OAAO,cAAc;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,iBAAiB,cAAc,CAAC;AACxC;AAOA,SAAS,qBAAqB,MAAe,gBAAgC;AACzE,QAAM,cAAc,KAAK,aAAa,wBAAwB,cAAc,CAAC;AAE7E,SAAO,cAAc,SAAS,aAAa,EAAE,IAAI;AACrD;AAQA,SAAS,qBAAqB,MAAe,gBAAgC;AACzE,QAAM,kBAAkB,wBAAwB,cAAc;AAC9D,QAAM,cAAc,KAAK,aAAa,eAAe;AACrD,QAAM,UAAU,cAAc,SAAS,aAAa,EAAE,IAAI,IAAI;AAC9D,OAAK,aAAa,iBAAiB,QAAQ,SAAA,CAAU;AAErD,SAAO;AACX;AASA,SAAS,qBAAqB,MAAe,gBAAgC;AACzE,QAAM,kBAAkB,wBAAwB,cAAc;AAC9D,QAAM,cAAc,KAAK,aAAa,eAAe;AACrD,QAAM,UAAU,cAAc,SAAS,aAAa,EAAE,IAAI,IAAI;AAE9D,MAAI,UAAU,GAAG;AACb,SAAK,aAAa,iBAAiB,QAAQ,SAAA,CAAU;AAAA,EACzD,OAAO;AACH,SAAK,gBAAgB,eAAe;AAAA,EACxC;AAEA,SAAO;AACX;"}

package/components/TopOverlay/TopOverlay.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
-import { c as clsx } from "../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
 import { FocusTrapExtended } from "../FocusTrapExtended/FocusTrapExtended.js";
 import { Overlay } from "../Overlay/Overlay.js";
 import { EOverlayDirection } from "../Overlay/OverlayBase.js";
-const topOverlayMask = "topOverlayMask__a1ba8c14";
-const topOverlayWrapper = "topOverlayWrapper__0b3478ce";
-const closing = "closing__588a6ad6";
-const opened = "opened__71509e2d";
-const topOverlayPanel = "topOverlayPanel__475b3ede";
-const topOverlay = "topOverlay__9d8593de";
+const topOverlayMask = "topOverlayMask__e2a825d4";
+const topOverlayWrapper = "topOverlayWrapper__7ed52c7b";
+const closing = "closing__7f9793af";
+const opened = "opened__7a650451";
+const topOverlayPanel = "topOverlayPanel__12e58e6e";
+const topOverlay = "topOverlay__031a4317";
 const styles = {
   topOverlayMask,
   topOverlayWrapper,

package/components/TreeView/TreeView.js

@@ -9,8 +9,8 @@ import { TreeViewContext } from "./TreeViewContext.js";
 import { TreeViewAbstractNode } from "./TreeViewAbstractNode.js";
 import { TreeViewNode } from "./components/TreeViewNode.js";
 import { TreeViewGroup } from "./components/TreeViewGroup.js";
-import { c as clsx } from "../../chunks/vendor-DKrjZZwJ.js";
-import { s as styles } from "../../chunks/TreeView.module-BheprFto.js";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../chunks/TreeView.module-uRhEW69Z.js";
 const rootNodeId = "rootNode";
 class TreeView extends React.Component {
   constructor(props) {

package/components/TreeView/components/TreeViewGroup.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../chunks/TreeView.module-BheprFto.js";
+import { s as styles } from "../../../chunks/TreeView.module-uRhEW69Z.js";
 const TreeViewGroup = ({ children, ...props }) => /* @__PURE__ */ jsx("ul", { role: "group", className: styles.treeViewGroup, ...props, children });
 export {
   TreeViewGroup

package/components/TreeView/components/TreeViewNode.js

@@ -6,8 +6,8 @@ import React from "react";
 import { TreeViewContext, withTreeViewContext } from "../TreeViewContext.js";
 import { TreeViewAbstractNode } from "../TreeViewAbstractNode.js";
 import { TreeViewAbstractNodeUtils } from "../TreeViewAbstractNodeUtils.js";
-import { c as clsx } from "../../../chunks/vendor-DKrjZZwJ.js";
-import { s as styles } from "../../../chunks/TreeView.module-BheprFto.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../../chunks/TreeView.module-uRhEW69Z.js";
 class TreeViewNodeWithContext extends React.Component {
   constructor(props) {
     super(props);

package/components/Typography/Caption.js

@@ -1,15 +1,15 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
 import { ECaptionSize, EFontWeightCaption, EFontType } from "./enums.js";
-import { t as typographyStyles, F as FONT_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/constants-b3mFJcdx.js";
+import { t as typographyStyles, F as FONT_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/constants-CroH6kNa.js";
 import { getTextDecorationClassName } from "./utils.js";
-const caption = "caption__5143d250";
-const regular = "regular__29d224b1";
-const semibold = "semibold__5580b9ca";
-const c1 = "c1__03355a03";
-const c2 = "c2__7f38371b";
-const d1 = "d1__1990ad6c";
+const caption = "caption__662b9e4a";
+const regular = "regular__f77b1cc0";
+const semibold = "semibold__92c5296f";
+const c1 = "c1__89cf3b92";
+const c2 = "c2__75dad325";
+const d1 = "d1__29b4e284";
 const styles = {
   caption,
   regular,

package/components/Typography/CodeText.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { c as clsx } from "../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
 import { EFontType } from "./enums.js";
-import { t as typographyStyles, F as FONT_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/constants-b3mFJcdx.js";
+import { t as typographyStyles, F as FONT_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/constants-CroH6kNa.js";
 import { getTextDecorationClassName } from "./utils.js";
-const codeText = "codeText__42f53fd1";
+const codeText = "codeText__a49068ce";
 const styles = {
   codeText
 };

package/components/Typography/Text.js

@@ -1,17 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { c as clsx } from "../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
 import { ETextSize, EFontWeightText, ELineType, EFontType } from "./enums.js";
-import { t as typographyStyles, F as FONT_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/constants-b3mFJcdx.js";
+import { t as typographyStyles, F as FONT_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/constants-CroH6kNa.js";
 import { getTextDecorationClassName } from "./utils.js";
-const text = "text__a6755c1c";
-const regular = "regular__29d224b1";
-const semibold = "semibold__5580b9ca";
-const b1 = "b1__bb8466d2";
-const b2 = "b2__9c22403e";
-const b3 = "b3__ab2e279d";
-const compact = "compact__6d2ad4cf";
-const b4 = "b4__7586fde0";
+const text = "text__cb8938b2";
+const regular = "regular__f77b1cc0";
+const semibold = "semibold__92c5296f";
+const b1 = "b1__db2d5436";
+const b2 = "b2__00910ba7";
+const b3 = "b3__60777065";
+const compact = "compact__e4960728";
+const b4 = "b4__c0e6181a";
 const styles = {
   text,
   regular,

package/components/Typography/Title.js

@@ -1,17 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
 import { ETitleSize, EFontWeightTitle, EFontType } from "./enums.js";
-import { t as typographyStyles, F as FONT_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/constants-b3mFJcdx.js";
+import { t as typographyStyles, F as FONT_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/constants-CroH6kNa.js";
 import { getTextDecorationClassName } from "./utils.js";
-const title = "title__465bb399";
-const regular = "regular__29d224b1";
-const medium = "medium__d852699e";
-const semibold = "semibold__5580b9ca";
-const bold = "bold__44f85157";
-const h1 = "h1__1f715ded";
-const h2 = "h2__74249ac5";
-const h3 = "h3__00a3a31f";
+const title = "title__ec6ba2c3";
+const regular = "regular__f77b1cc0";
+const medium = "medium__37f633f1";
+const semibold = "semibold__92c5296f";
+const bold = "bold__fbda34f1";
+const h1 = "h1__f84b28aa";
+const h2 = "h2__4ec8f311";
+const h3 = "h3__e811ebcd";
 const styles = {
   title,
   regular,
@@ -54,7 +54,7 @@ const Title = React.forwardRef(
       getTextDecorationClassName(typographyStyles, underline, strikethrough),
       className
     );
-    const Tag = tag || "h1";
+    const Tag = tag || size;
     return /* @__PURE__ */ jsx(Tag, { ref, className: classes, ...props, children });
   }
 );

package/components/Typography/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../../../src/components/Typography/Title.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport { EFontType, EFontWeightTitle, ETitleSize } from \"./enums\";\nimport { ITypographyProps } from \"./types\";\nimport { FONT_TYPE_TO_CLASS_NAME_MAP } from \"./constants\";\nimport { getTextDecorationClassName } from \"./utils\";\nimport { PolymorphicComponentPropsWithRef } from \"../../types/CoreTypes\";\nimport styles from \"./styles/Title.module.less\";\nimport typographyStyles from \"./styles/Typography.module.less\";\n\n/** Соответствие размера имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP: Record<ETitleSize, string> = {\n    [ETitleSize.H1]: styles.h1,\n    [ETitleSize.H2]: styles.h2,\n    [ETitleSize.H3]: styles.h3,\n};\n\n/** Соответствие веса шрифта имени класса. */\nconst FONT_WEIGHT_TO_CLASS_NAME_MAP: Record<EFontWeightTitle, string> = {\n    [EFontWeightTitle.MEDIUM]: styles.medium,\n    [EFontWeightTitle.REGULAR]: styles.regular,\n    [EFontWeightTitle.SEMIBOLD]: styles.semibold,\n    [EFontWeightTitle.BOLD]: styles.bold,\n};\n\ninterface ITitleProps extends ITypographyProps {\n    /** Размер текста. */\n    size: ETitleSize;\n    /** Толщина шрифта. */\n    weight?: EFontWeightTitle;\n}\n\n/** Свойства компонента Text. */\nexport type TTitleProps<T extends React.ElementType> = PolymorphicComponentPropsWithRef<T, ITitleProps>;\n\ntype TitleComponent = (<T extends React.ElementType = \"span\">(props: TTitleProps<T>) => React.ReactElement | null) & {\n    displayName?: string;\n};\n\n/** Заголовок (типографика). */\nexport const Title: TitleComponent = React.forwardRef(\n    <T extends React.ElementType = `h1`>(\n        {\n            children,\n            className,\n            size,\n            tag,\n            weight = EFontWeightTitle.SEMIBOLD,\n            type = EFontType.PRIMARY,\n            underline,\n            strikethrough,\n            ...props\n        }: TTitleProps<T>,\n        ref: React.ForwardedRef<HTMLElement>,\n    ) => {\n        const classes = clsx(\n            typographyStyles.typography,\n            styles.title,\n            SIZE_TO_CLASS_NAME_MAP[size],\n            FONT_WEIGHT_TO_CLASS_NAME_MAP[weight],\n            FONT_TYPE_TO_CLASS_NAME_MAP[type],\n            getTextDecorationClassName(typographyStyles, underline, strikethrough),\n            className,\n        );\n\n        const Tag: React.ElementType = tag || \"h1\";\n\n        return (\n            <Tag ref={ref} className={classes} {...props}>\n                {children}\n            </Tag>\n        );\n    },\n);\n\nTitle.displayName = \"Title\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,yBAAqD;AAAA,EACvD,CAAC,WAAW,EAAE,GAAG,OAAO;AAAA,EACxB,CAAC,WAAW,EAAE,GAAG,OAAO;AAAA,EACxB,CAAC,WAAW,EAAE,GAAG,OAAO;AAC5B;AAGA,MAAM,gCAAkE;AAAA,EACpE,CAAC,iBAAiB,MAAM,GAAG,OAAO;AAAA,EAClC,CAAC,iBAAiB,OAAO,GAAG,OAAO;AAAA,EACnC,CAAC,iBAAiB,QAAQ,GAAG,OAAO;AAAA,EACpC,CAAC,iBAAiB,IAAI,GAAG,OAAO;AACpC;AAiBO,MAAM,QAAwB,MAAM;AAAA,EACvC,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,iBAAiB;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,UAAU;AAAA,MACZ,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,uBAAuB,IAAI;AAAA,MAC3B,8BAA8B,MAAM;AAAA,MACpC,4BAA4B,IAAI;AAAA,MAChC,2BAA2B,kBAAkB,WAAW,aAAa;AAAA,MACrE;AAAA,IAAA;AAGJ,UAAM,MAAyB,OAAO;AAEtC,+BACK,KAAA,EAAI,KAAU,WAAW,SAAU,GAAG,OAClC,UACL;AAAA,EAER;AACJ;AAEA,MAAM,cAAc;"}
+{"version":3,"file":"Title.js","sources":["../../../src/components/Typography/Title.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx } from \"clsx\";\nimport { EFontType, EFontWeightTitle, ETitleSize } from \"./enums\";\nimport { ITypographyProps } from \"./types\";\nimport { FONT_TYPE_TO_CLASS_NAME_MAP } from \"./constants\";\nimport { getTextDecorationClassName } from \"./utils\";\nimport { PolymorphicComponentPropsWithRef } from \"../../types/CoreTypes\";\nimport styles from \"./styles/Title.module.less\";\nimport typographyStyles from \"./styles/Typography.module.less\";\n\n/** Соответствие размера имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP: Record<ETitleSize, string> = {\n    [ETitleSize.H1]: styles.h1,\n    [ETitleSize.H2]: styles.h2,\n    [ETitleSize.H3]: styles.h3,\n};\n\n/** Соответствие веса шрифта имени класса. */\nconst FONT_WEIGHT_TO_CLASS_NAME_MAP: Record<EFontWeightTitle, string> = {\n    [EFontWeightTitle.MEDIUM]: styles.medium,\n    [EFontWeightTitle.REGULAR]: styles.regular,\n    [EFontWeightTitle.SEMIBOLD]: styles.semibold,\n    [EFontWeightTitle.BOLD]: styles.bold,\n};\n\ninterface ITitleProps extends ITypographyProps {\n    /** Размер текста. */\n    size: ETitleSize;\n    /** Толщина шрифта. */\n    weight?: EFontWeightTitle;\n}\n\n/** Свойства компонента Text. */\nexport type TTitleProps<T extends React.ElementType> = PolymorphicComponentPropsWithRef<T, ITitleProps>;\n\ntype TitleComponent = (<T extends React.ElementType = \"span\">(props: TTitleProps<T>) => React.ReactElement | null) & {\n    displayName?: string;\n};\n\n/** Заголовок (типографика). */\nexport const Title: TitleComponent = React.forwardRef(\n    <T extends React.ElementType = `h1`>(\n        {\n            children,\n            className,\n            size,\n            tag,\n            weight = EFontWeightTitle.SEMIBOLD,\n            type = EFontType.PRIMARY,\n            underline,\n            strikethrough,\n            ...props\n        }: TTitleProps<T>,\n        ref: React.ForwardedRef<HTMLElement>,\n    ) => {\n        const classes = clsx(\n            typographyStyles.typography,\n            styles.title,\n            SIZE_TO_CLASS_NAME_MAP[size],\n            FONT_WEIGHT_TO_CLASS_NAME_MAP[weight],\n            FONT_TYPE_TO_CLASS_NAME_MAP[type],\n            getTextDecorationClassName(typographyStyles, underline, strikethrough),\n            className,\n        );\n\n        // Значения ETitleSize совпадают с именами тегов (h1/h2/h3), поэтому по умолчанию\n        // уровень заголовка следует за размером — как в React 18-ветке.\n        const Tag: React.ElementType = tag || size;\n\n        return (\n            <Tag ref={ref} className={classes} {...props}>\n                {children}\n            </Tag>\n        );\n    },\n);\n\nTitle.displayName = \"Title\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,yBAAqD;AAAA,EACvD,CAAC,WAAW,EAAE,GAAG,OAAO;AAAA,EACxB,CAAC,WAAW,EAAE,GAAG,OAAO;AAAA,EACxB,CAAC,WAAW,EAAE,GAAG,OAAO;AAC5B;AAGA,MAAM,gCAAkE;AAAA,EACpE,CAAC,iBAAiB,MAAM,GAAG,OAAO;AAAA,EAClC,CAAC,iBAAiB,OAAO,GAAG,OAAO;AAAA,EACnC,CAAC,iBAAiB,QAAQ,GAAG,OAAO;AAAA,EACpC,CAAC,iBAAiB,IAAI,GAAG,OAAO;AACpC;AAiBO,MAAM,QAAwB,MAAM;AAAA,EACvC,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,iBAAiB;AAAA,IAC1B,OAAO,UAAU;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,UAAU;AAAA,MACZ,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,uBAAuB,IAAI;AAAA,MAC3B,8BAA8B,MAAM;AAAA,MACpC,4BAA4B,IAAI;AAAA,MAChC,2BAA2B,kBAAkB,WAAW,aAAa;AAAA,MACrE;AAAA,IAAA;AAKJ,UAAM,MAAyB,OAAO;AAEtC,+BACK,KAAA,EAAI,KAAU,WAAW,SAAU,GAAG,OAClC,UACL;AAAA,EAER;AACJ;AAEA,MAAM,cAAc;"}

package/components/Typography/constants.js

@@ -1,5 +1,5 @@
 import "./enums.js";
-import { F } from "../../chunks/constants-b3mFJcdx.js";
+import { F } from "../../chunks/constants-CroH6kNa.js";
 export {
   F as FONT_TYPE_TO_CLASS_NAME_MAP
 };

package/components/UnorderedList/UnorderedList.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-DKrjZZwJ.js";
+import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
 import { UnorderedListItem } from "./UnorderedListItem.js";
-const unorderedList = "unorderedList__f0451ec9";
+const unorderedList = "unorderedList__fbea280c";
 const styles = {
   unorderedList
 };
@@ -12,7 +12,7 @@ const UnorderedList = Object.assign(
     {
       className: clsx(styles.unorderedList, className),
       ...restProps,
-      "data-tx": "0.39.0",
+      "data-tx": "0.41.0",
       ref
     }
   )),