@sberbusiness/triplex-next 1.40.0 → 1.41.1

package/components/ThemeProvider/ThemeProvider.js

@@ -5,6 +5,8 @@ import { DesignTokenUtils } from "../DesignTokens/DesignTokenUtils.js";
 import { ThemeProviderView } from "./components/ThemeProviderView.js";
 import { ETriplexNextTheme } from "./ETriplexNextTheme.js";
 const uniqueId = (prefix) => `${prefix}${Date.now()}${Math.floor(Math.random() * 1e6)}`;
+const SCOPE_CLASS_NAME_PREFIX = "triplex-next-theme-";
+const getStyleTagKey = (scopeClassName) => `triplex-next-dynamic-tokens-${scopeClassName}`;
 const ThemeProvider = ({
   children,
   scopeClassName,
@@ -12,16 +14,16 @@ const ThemeProvider = ({
   theme = ETriplexNextTheme.LIGHT,
   tokens
 }) => {
-  const scopeCssClassName = useMemo(() => scopeClassName || uniqueId("triplex-next-theme-"), [scopeClassName]);
+  const scopeCssClassName = useMemo(() => scopeClassName || uniqueId(SCOPE_CLASS_NAME_PREFIX), [scopeClassName]);
   useLayoutEffect(() => {
     if (canUseDom()) {
       const style = `.${scopeCssClassName} {${DesignTokenUtils.getStyle(theme, tokens || {})}}`;
-      updateCSS(style, `triplex-next-dynamic-tokens-${scopeCssClassName}`);
+      updateCSS(style, getStyleTagKey(scopeCssClassName));
     } else {
       console.warn("ThemeProvider", "SSR do not support dynamic theme with css variables.");
     }
   }, [scopeCssClassName, theme, tokens]);
-  useLayoutEffect(() => () => removeCSS(`triplex-next-dynamic-tokens-${scopeCssClassName}`), [scopeCssClassName]);
+  useLayoutEffect(() => () => removeCSS(getStyleTagKey(scopeCssClassName)), [scopeCssClassName]);
   return /* @__PURE__ */ jsx(ThemeProviderView, { scopeClassName: scopeCssClassName, scopeRef, theme, tokens, children });
 };
 export {

package/components/ThemeProvider/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../scripts/uniqueId.ts","../../../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["export const uniqueId = (prefix?: string): string =>\n    `${prefix ? prefix : \"\"}${Date.now()}${Math.floor(Math.random() * 1000000)}`;\n","import React, { useLayoutEffect, useMemo } from \"react\";\nimport canUseDom from \"rc-util/es/Dom/canUseDom\";\nimport { removeCSS, updateCSS } from \"rc-util/es/Dom/dynamicCSS\";\nimport { TDesignTokensPartial } from \"../DesignTokens/types/DesignTokensTypes\";\nimport { DesignTokenUtils } from \"../DesignTokens/DesignTokenUtils\";\nimport { ThemeProviderView } from \"./components/ThemeProviderView\";\nimport { uniqueId } from \"../../../scripts/uniqueId\";\nimport { ETriplexNextTheme } from \"./ETriplexNextTheme\";\n\nexport interface IThemeProviderProps {\n    children: React.ReactNode;\n    /** Classname, который добавлен к элементу из scopeRef для создания области видимости css-переменных. */\n    scopeClassName?: string;\n    /** Ref на HTML элемент, внутри которого будет действовать текущий конфиг. */\n    scopeRef: React.RefObject<HTMLElement>;\n    /** Дизайн-тема Triplex Next. */\n    theme?: ETriplexNextTheme;\n    /** Переопределяемые токены. */\n    tokens?: TDesignTokensPartial;\n}\n\nexport const ThemeProvider: React.FC<IThemeProviderProps> = ({\n    children,\n    scopeClassName,\n    scopeRef,\n    theme = ETriplexNextTheme.LIGHT,\n    tokens,\n}) => {\n    // ClassName, добавляемый к HTML элементу, для определения области видимости CSS-переменных.\n    const scopeCssClassName = useMemo(() => scopeClassName || uniqueId(\"triplex-next-theme-\"), [scopeClassName]);\n\n    useLayoutEffect(() => {\n        if (canUseDom()) {\n            const style = `.${scopeCssClassName} {${DesignTokenUtils.getStyle(theme, tokens || {})}}`;\n            // Обновление мета тега со стилями темы. Обновляется тег с ключом triplex-next-dynamic-theme.\n            updateCSS(style, `triplex-next-dynamic-tokens-${scopeCssClassName}`);\n        } else {\n            console.warn(\"ThemeProvider\", \"SSR do not support dynamic theme with css variables.\");\n        }\n    }, [scopeCssClassName, theme, tokens]);\n\n    // Удаляет стили при размонтировании компонента.\n    useLayoutEffect(() => () => removeCSS(`triplex-next-dynamic-tokens-${scopeCssClassName}`), [scopeCssClassName]);\n\n    return (\n        <ThemeProviderView scopeClassName={scopeCssClassName} scopeRef={scopeRef} theme={theme} tokens={tokens}>\n            {children}\n        </ThemeProviderView>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAAO,MAAM,WAAW,CAAC,WACrB,GAAY,MAAW,GAAG,KAAK,IAAA,CAAK,GAAG,KAAK,MAAM,KAAK,OAAA,IAAW,GAAO,CAAC;ACoBvE,MAAM,gBAA+C,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,kBAAkB;AAAA,EAC1B;AACJ,MAAM;AAEF,QAAM,oBAAoB,QAAQ,MAAM,kBAAkB,SAAS,qBAAqB,GAAG,CAAC,cAAc,CAAC;AAE3G,kBAAgB,MAAM;AAClB,QAAI,aAAa;AACb,YAAM,QAAQ,IAAI,iBAAiB,KAAK,iBAAiB,SAAS,OAAO,UAAU,CAAA,CAAE,CAAC;AAEtF,gBAAU,OAAO,+BAA+B,iBAAiB,EAAE;AAAA,IACvE,OAAO;AACH,cAAQ,KAAK,iBAAiB,sDAAsD;AAAA,IACxF;AAAA,EACJ,GAAG,CAAC,mBAAmB,OAAO,MAAM,CAAC;AAGrC,kBAAgB,MAAM,MAAM,UAAU,+BAA+B,iBAAiB,EAAE,GAAG,CAAC,iBAAiB,CAAC;AAE9G,6BACK,mBAAA,EAAkB,gBAAgB,mBAAmB,UAAoB,OAAc,QACnF,UACL;AAER;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../scripts/uniqueId.ts","../../../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["export const uniqueId = (prefix?: string): string =>\n    `${prefix ? prefix : \"\"}${Date.now()}${Math.floor(Math.random() * 1000000)}`;\n","import React, { useLayoutEffect, useMemo } from \"react\";\nimport canUseDom from \"rc-util/es/Dom/canUseDom\";\nimport { removeCSS, updateCSS } from \"rc-util/es/Dom/dynamicCSS\";\nimport { TDesignTokensPartial } from \"../DesignTokens/types/DesignTokensTypes\";\nimport { DesignTokenUtils } from \"../DesignTokens/DesignTokenUtils\";\nimport { ThemeProviderView } from \"./components/ThemeProviderView\";\nimport { uniqueId } from \"../../../scripts/uniqueId\";\nimport { ETriplexNextTheme } from \"./ETriplexNextTheme\";\n\n/** Префикс автогенерируемого scopeClassName. */\nconst SCOPE_CLASS_NAME_PREFIX = \"triplex-next-theme-\";\n\n/**\n * Возвращает ключ тега style с css-переменными темы. По этому ключу стили обновляются\n * и удаляются, поэтому ключ вычисляется в одном месте.\n */\nconst getStyleTagKey = (scopeClassName: string): string => `triplex-next-dynamic-tokens-${scopeClassName}`;\n\nexport interface IThemeProviderProps {\n    /** Контент, внутри которого действуют тема и токены. */\n    children: React.ReactNode;\n    /** Classname, который добавлен к элементу из scopeRef для создания области видимости css-переменных. */\n    scopeClassName?: string;\n    /** Ref на HTML элемент, внутри которого будет действовать текущий конфиг. */\n    scopeRef: React.RefObject<HTMLElement>;\n    /** Дизайн-тема Triplex Next. @default ETriplexNextTheme.LIGHT */\n    theme?: ETriplexNextTheme;\n    /** Переопределяемые токены. */\n    tokens?: TDesignTokensPartial;\n}\n\n/**\n * Провайдер темы. Рендерит css-переменные дизайн-токенов выбранной темы в тег style,\n * ограничивает их областью видимости элемента из scopeRef и передаёт тему и токены\n * дочерним компонентам через контекст (см. useToken).\n */\nexport const ThemeProvider: React.FC<IThemeProviderProps> = ({\n    children,\n    scopeClassName,\n    scopeRef,\n    theme = ETriplexNextTheme.LIGHT,\n    tokens,\n}) => {\n    // ClassName, добавляемый к HTML элементу, для определения области видимости CSS-переменных.\n    const scopeCssClassName = useMemo(() => scopeClassName || uniqueId(SCOPE_CLASS_NAME_PREFIX), [scopeClassName]);\n\n    useLayoutEffect(() => {\n        if (canUseDom()) {\n            const style = `.${scopeCssClassName} {${DesignTokenUtils.getStyle(theme, tokens || {})}}`;\n            // Создание или обновление тега style с css-переменными текущей темы.\n            updateCSS(style, getStyleTagKey(scopeCssClassName));\n        } else {\n            console.warn(\"ThemeProvider\", \"SSR do not support dynamic theme with css variables.\");\n        }\n    }, [scopeCssClassName, theme, tokens]);\n\n    // Удаляет стили при размонтировании компонента.\n    useLayoutEffect(() => () => removeCSS(getStyleTagKey(scopeCssClassName)), [scopeCssClassName]);\n\n    return (\n        <ThemeProviderView scopeClassName={scopeCssClassName} scopeRef={scopeRef} theme={theme} tokens={tokens}>\n            {children}\n        </ThemeProviderView>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAAO,MAAM,WAAW,CAAC,WACrB,GAAY,MAAW,GAAG,KAAK,IAAA,CAAK,GAAG,KAAK,MAAM,KAAK,OAAA,IAAW,GAAO,CAAC;ACS9E,MAAM,0BAA0B;AAMhC,MAAM,iBAAiB,CAAC,mBAAmC,+BAA+B,cAAc;AAoBjG,MAAM,gBAA+C,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,kBAAkB;AAAA,EAC1B;AACJ,MAAM;AAEF,QAAM,oBAAoB,QAAQ,MAAM,kBAAkB,SAAS,uBAAuB,GAAG,CAAC,cAAc,CAAC;AAE7G,kBAAgB,MAAM;AAClB,QAAI,aAAa;AACb,YAAM,QAAQ,IAAI,iBAAiB,KAAK,iBAAiB,SAAS,OAAO,UAAU,CAAA,CAAE,CAAC;AAEtF,gBAAU,OAAO,eAAe,iBAAiB,CAAC;AAAA,IACtD,OAAO;AACH,cAAQ,KAAK,iBAAiB,sDAAsD;AAAA,IACxF;AAAA,EACJ,GAAG,CAAC,mBAAmB,OAAO,MAAM,CAAC;AAGrC,kBAAgB,MAAM,MAAM,UAAU,eAAe,iBAAiB,CAAC,GAAG,CAAC,iBAAiB,CAAC;AAE7F,6BACK,mBAAA,EAAkB,gBAAgB,mBAAmB,UAAoB,OAAc,QACnF,UACL;AAER;"}

package/components/ThemeProvider/ThemeProviderContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProviderContext.js","sources":["../../../src/components/ThemeProvider/ThemeProviderContext.ts"],"sourcesContent":["import React from \"react\";\nimport { TDesignTokens } from \"../DesignTokens/types/DesignTokensTypes\";\nimport { ETriplexNextTheme } from \"./ETriplexNextTheme\";\nimport { DesignTokensCore, DesignTokensComponents } from \"../DesignTokens\";\n\nexport interface IThemeProviderContext {\n    scopeClassName: string;\n    theme: ETriplexNextTheme;\n    tokens: TDesignTokens;\n}\n\nconst contextInitial: IThemeProviderContext = {\n    scopeClassName: \"\",\n    theme: ETriplexNextTheme.LIGHT,\n    tokens: { ...DesignTokensCore, ...DesignTokensComponents },\n};\n\nexport const ThemeProviderContext = React.createContext<IThemeProviderContext>(contextInitial);\n"],"names":["React"],"mappings":";;;;;AAWA,MAAM,iBAAwC;AAAA,EAC1C,gBAAgB;AAAA,EAChB,OAAO,kBAAkB;AAAA,EACzB,QAAQ,EAAE,GAAG,kBAAkB,GAAG,uBAAA;AACtC;AAEO,MAAM,uBAAuBA,eAAM,cAAqC,cAAc;"}
+{"version":3,"file":"ThemeProviderContext.js","sources":["../../../src/components/ThemeProvider/ThemeProviderContext.ts"],"sourcesContent":["import React from \"react\";\nimport { TDesignTokens } from \"../DesignTokens/types/DesignTokensTypes\";\nimport { ETriplexNextTheme } from \"./ETriplexNextTheme\";\nimport { DesignTokensCore, DesignTokensComponents } from \"../DesignTokens\";\n\nexport interface IThemeProviderContext {\n    /** Classname, задающий область видимости css-переменных темы. Пустая строка вне ThemeProvider. */\n    scopeClassName: string;\n    /** Текущая дизайн-тема Triplex Next. */\n    theme: ETriplexNextTheme;\n    /** Итоговые токены: переопределения потребителя поверх токенов темы. */\n    tokens: TDesignTokens;\n}\n\n/** Значение контекста вне ThemeProvider: светлая тема и токены по умолчанию. */\nconst contextInitial: IThemeProviderContext = {\n    scopeClassName: \"\",\n    theme: ETriplexNextTheme.LIGHT,\n    tokens: { ...DesignTokensCore, ...DesignTokensComponents },\n};\n\n/** Контекст темы. Значение читается хуком useToken. */\nexport const ThemeProviderContext = React.createContext<IThemeProviderContext>(contextInitial);\n"],"names":["React"],"mappings":";;;;;AAeA,MAAM,iBAAwC;AAAA,EAC1C,gBAAgB;AAAA,EAChB,OAAO,kBAAkB;AAAA,EACzB,QAAQ,EAAE,GAAG,kBAAkB,GAAG,uBAAA;AACtC;AAGO,MAAM,uBAAuBA,eAAM,cAAqC,cAAc;"}

package/components/ThemeProvider/components/ThemeProviderView.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect, useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { ThemeProviderContext } from "../ThemeProviderContext.js";
 import { ETriplexNextTheme } from "../ETriplexNextTheme.js";
 import { DesignTokensCore } from "../../DesignTokens/DesignTokensCore.js";
@@ -14,17 +14,14 @@ const ThemeProviderView = ({
   theme,
   tokens: tokensProps
 }) => {
-  const prevScopeClassName = useRef("");
   useEffect(() => {
-    const scopeRefCurrent = scopeRef.current;
-    if (scopeClassName) {
-      scopeRefCurrent == null ? void 0 : scopeRefCurrent.classList.add(scopeClassName);
+    const scopeElement = scopeRef.current;
+    if (!scopeClassName) {
+      return;
     }
-    prevScopeClassName.current = scopeClassName;
+    scopeElement == null ? void 0 : scopeElement.classList.add(scopeClassName);
     return () => {
-      if (prevScopeClassName.current) {
-        scopeRefCurrent == null ? void 0 : scopeRefCurrent.classList.remove(prevScopeClassName.current);
-      }
+      scopeElement == null ? void 0 : scopeElement.classList.remove(scopeClassName);
     };
   }, [scopeClassName, scopeRef]);
   const value = useMemo(() => {

package/components/ThemeProvider/components/ThemeProviderView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProviderView.js","sources":["../../../../src/components/ThemeProvider/components/ThemeProviderView.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from \"react\";\nimport { defaultsDeep } from \"lodash-es\";\nimport { TDesignTokens, TDesignTokensPartial } from \"../../DesignTokens/types/DesignTokensTypes\";\n// Импорт не должен быть относительным.\nimport { ThemeProviderContext } from \"../ThemeProviderContext\";\nimport { ETriplexNextTheme } from \"../ETriplexNextTheme\";\nimport {\n    DesignTokensCore,\n    DesignTokensCoreThemeDark,\n    DesignTokensComponents,\n    DesignTokensComponentsThemeDark,\n} from \"../../DesignTokens\";\n\ninterface IThemeProviderViewProps {\n    // Дизайн-тема Triplex Next.\n    theme: ETriplexNextTheme;\n    // Дизайн-токены Triplex.\n    tokens?: TDesignTokensPartial;\n    // Classname, который добавлен к элементу из scopeRef для создания области видимости css-переменных.\n    scopeClassName: string;\n    // Ref на HTML элемент, внутри которого будет действовать текущий конфиг. По-умолчанию - html.\n    scopeRef: React.RefObject<HTMLElement>;\n    children?: React.ReactNode;\n}\n\n/**\n *  Создает провайдер темы и создает область видимости для css-переменных.\n */\nexport const ThemeProviderView: React.FC<IThemeProviderViewProps> = ({\n    children,\n    scopeClassName,\n    scopeRef,\n    theme,\n    tokens: tokensProps,\n}) => {\n    const prevScopeClassName = useRef(\"\");\n\n    useEffect(() => {\n        const scopeRefCurrent = scopeRef.current;\n\n        if (scopeClassName) {\n            scopeRefCurrent?.classList.add(scopeClassName);\n        }\n        prevScopeClassName.current = scopeClassName;\n\n        return () => {\n            if (prevScopeClassName.current) {\n                scopeRefCurrent?.classList.remove(prevScopeClassName.current);\n            }\n        };\n    }, [scopeClassName, scopeRef]);\n\n    const value = useMemo(() => {\n        // Не менять порядок, иначе токены темы будут переопределять пользовательские значения.\n        const tokens: TDesignTokens = defaultsDeep(\n            {},\n            tokensProps,\n            theme === ETriplexNextTheme.LIGHT ? DesignTokensCore : DesignTokensCoreThemeDark,\n            theme === ETriplexNextTheme.LIGHT ? DesignTokensComponents : DesignTokensComponentsThemeDark,\n        );\n\n        return { scopeClassName, theme, tokens };\n    }, [scopeClassName, theme, tokensProps]);\n\n    return <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;\n};\n"],"names":[],"mappings":";;;;;;;;;AA4BO,MAAM,oBAAuD,CAAC;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACZ,MAAM;AACF,QAAM,qBAAqB,OAAO,EAAE;AAEpC,YAAU,MAAM;AACZ,UAAM,kBAAkB,SAAS;AAEjC,QAAI,gBAAgB;AAChB,yDAAiB,UAAU,IAAI;AAAA,IACnC;AACA,uBAAmB,UAAU;AAE7B,WAAO,MAAM;AACT,UAAI,mBAAmB,SAAS;AAC5B,2DAAiB,UAAU,OAAO,mBAAmB;AAAA,MACzD;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,QAAM,QAAQ,QAAQ,MAAM;AAExB,UAAM,SAAwB;AAAA,MAC1B,CAAA;AAAA,MACA;AAAA,MACA,UAAU,kBAAkB,QAAQ,mBAAmB;AAAA,MACvD,UAAU,kBAAkB,QAAQ,yBAAyB;AAAA,IAAA;AAGjE,WAAO,EAAE,gBAAgB,OAAO,OAAA;AAAA,EACpC,GAAG,CAAC,gBAAgB,OAAO,WAAW,CAAC;AAEvC,SAAO,oBAAC,qBAAqB,UAArB,EAA8B,OAAe,SAAA,CAAS;AAClE;"}
+{"version":3,"file":"ThemeProviderView.js","sources":["../../../../src/components/ThemeProvider/components/ThemeProviderView.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { defaultsDeep } from \"lodash-es\";\nimport { TDesignTokens, TDesignTokensPartial } from \"../../DesignTokens/types/DesignTokensTypes\";\nimport { ThemeProviderContext } from \"../ThemeProviderContext\";\nimport { ETriplexNextTheme } from \"../ETriplexNextTheme\";\nimport {\n    DesignTokensCore,\n    DesignTokensCoreThemeDark,\n    DesignTokensComponents,\n    DesignTokensComponentsThemeDark,\n} from \"../../DesignTokens\";\n\ninterface IThemeProviderViewProps {\n    /** Дизайн-тема Triplex Next. */\n    theme: ETriplexNextTheme;\n    /** Переопределяемые токены. */\n    tokens?: TDesignTokensPartial;\n    /** Classname, который добавлен к элементу из scopeRef для создания области видимости css-переменных. */\n    scopeClassName: string;\n    /** Ref на HTML элемент, внутри которого будет действовать текущий конфиг. */\n    scopeRef: React.RefObject<HTMLElement>;\n    /** Контент, внутри которого действуют тема и токены. */\n    children?: React.ReactNode;\n}\n\n/**\n * Создаёт провайдер темы: навешивает scopeClassName на элемент из scopeRef (область видимости\n * css-переменных) и отдаёт тему вместе с итоговыми токенами в контекст.\n */\nexport const ThemeProviderView: React.FC<IThemeProviderViewProps> = ({\n    children,\n    scopeClassName,\n    scopeRef,\n    theme,\n    tokens: tokensProps,\n}) => {\n    useEffect(() => {\n        const scopeElement = scopeRef.current;\n\n        if (!scopeClassName) {\n            return;\n        }\n\n        scopeElement?.classList.add(scopeClassName);\n\n        return () => {\n            scopeElement?.classList.remove(scopeClassName);\n        };\n    }, [scopeClassName, scopeRef]);\n\n    const value = useMemo(() => {\n        // Не менять порядок, иначе токены темы будут переопределять пользовательские значения.\n        const tokens: TDesignTokens = defaultsDeep(\n            {},\n            tokensProps,\n            theme === ETriplexNextTheme.LIGHT ? DesignTokensCore : DesignTokensCoreThemeDark,\n            theme === ETriplexNextTheme.LIGHT ? DesignTokensComponents : DesignTokensComponentsThemeDark,\n        );\n\n        return { scopeClassName, theme, tokens };\n    }, [scopeClassName, theme, tokensProps]);\n\n    return <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;\n};\n"],"names":[],"mappings":";;;;;;;;;AA6BO,MAAM,oBAAuD,CAAC;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACZ,MAAM;AACF,YAAU,MAAM;AACZ,UAAM,eAAe,SAAS;AAE9B,QAAI,CAAC,gBAAgB;AACjB;AAAA,IACJ;AAEA,iDAAc,UAAU,IAAI;AAE5B,WAAO,MAAM;AACT,mDAAc,UAAU,OAAO;AAAA,IACnC;AAAA,EACJ,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,QAAM,QAAQ,QAAQ,MAAM;AAExB,UAAM,SAAwB;AAAA,MAC1B,CAAA;AAAA,MACA;AAAA,MACA,UAAU,kBAAkB,QAAQ,mBAAmB;AAAA,MACvD,UAAU,kBAAkB,QAAQ,yBAAyB;AAAA,IAAA;AAGjE,WAAO,EAAE,gBAAgB,OAAO,OAAA;AAAA,EACpC,GAAG,CAAC,gBAAgB,OAAO,WAAW,CAAC;AAEvC,SAAO,oBAAC,qBAAqB,UAArB,EAA8B,OAAe,SAAA,CAAS;AAClE;"}

package/components/ThemeProvider/useToken.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToken.js","sources":["../../../src/components/ThemeProvider/useToken.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { TDesignTokens } from \"../DesignTokens/types/DesignTokensTypes\";\nimport { ThemeProviderContext } from \"@sberbusiness/triplex-next/components/ThemeProvider/ThemeProviderContext\";\nimport { ETriplexNextTheme } from \"./ETriplexNextTheme\";\n\n/**\n * Хук, возвращающий текущую тему и токены.\n */\nexport const useToken = (): { scopeClassName: string; theme: ETriplexNextTheme; tokens: TDesignTokens } => {\n    const { scopeClassName, theme, tokens } = useContext(ThemeProviderContext);\n\n    return { scopeClassName, theme, tokens };\n};\n"],"names":[],"mappings":";;AAQO,MAAM,WAAW,MAAmF;AACvG,QAAM,EAAE,gBAAgB,OAAO,OAAA,IAAW,WAAW,oBAAoB;AAEzE,SAAO,EAAE,gBAAgB,OAAO,OAAA;AACpC;"}
+{"version":3,"file":"useToken.js","sources":["../../../src/components/ThemeProvider/useToken.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { TDesignTokens } from \"../DesignTokens/types/DesignTokensTypes\";\nimport { ThemeProviderContext } from \"@sberbusiness/triplex-next/components/ThemeProvider/ThemeProviderContext\";\nimport { ETriplexNextTheme } from \"./ETriplexNextTheme\";\n\n/**\n * Хук, возвращающий текущую тему и токены ближайшего ThemeProvider.\n * Вне ThemeProvider возвращает светлую тему, токены по умолчанию и пустой scopeClassName.\n */\nexport const useToken = (): { scopeClassName: string; theme: ETriplexNextTheme; tokens: TDesignTokens } => {\n    const { scopeClassName, theme, tokens } = useContext(ThemeProviderContext);\n\n    return { scopeClassName, theme, tokens };\n};\n"],"names":[],"mappings":";;AASO,MAAM,WAAW,MAAmF;AACvG,QAAM,EAAE,gBAAgB,OAAO,OAAA,IAAW,WAAW,oBAAoB;AAEzE,SAAO,EAAE,gBAAgB,OAAO,OAAA;AACpC;"}

package/components/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React__default, { useState, useRef, useEffect, useCallback } from "react";
+import React__default, { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { TooltipContext } from "./TootlipContext.js";
 import { MobileView } from "../MobileView/MobileView.js";
 import { TooltipDesktop } from "./components/desktop/TooltipDesktop.js";
@@ -12,6 +12,29 @@ import { TooltipMobileHeader } from "./components/mobile/components/TooltipMobil
 import { useTooltipTheme } from "./utils/useTooltipTheme.js";
 import { useMobileView } from "../MobileView/useMobileView.js";
 import "./enums.js";
+const collectTooltipElements = (children) => {
+  const elements = {
+    body: null,
+    link: null,
+    closeButton: null,
+    mobileHeader: null,
+    target: null
+  };
+  React__default.Children.forEach(children, (child) => {
+    if (React__default.isValidElement(child) && child.type === TooltipTarget) {
+      elements.target = child;
+    } else if (React__default.isValidElement(child) && child.type === TooltipBody) {
+      elements.body = child;
+    } else if (React__default.isValidElement(child) && child.type === TooltipLink) {
+      elements.link = child;
+    } else if (React__default.isValidElement(child) && child.type === TooltipXButton) {
+      elements.closeButton = child;
+    } else if (React__default.isValidElement(child) && child.type === TooltipMobileHeader) {
+      elements.mobileHeader = child;
+    }
+  });
+  return elements;
+};
 const Tooltip = ({
   children,
   toggleType,
@@ -26,65 +49,39 @@ const Tooltip = ({
   const targetHoveredRef = useRef(false);
   const open = openProp ?? openState;
   const isBodyOnlyRenderContainer = isMobileScreenWidth && !disableAdaptiveMode;
-  useTooltipTheme(open, isBodyOnlyRenderContainer ? document.body : rest.renderContainer ?? document.body);
+  const themeContainer = isBodyOnlyRenderContainer ? document.body : rest.renderContainer ?? document.body;
+  useTooltipTheme(open, themeContainer);
   useEffect(() => {
     if (openProp === false) {
       targetHoveredRef.current = false;
     }
   }, [openProp]);
-  const getChildrenElements = useCallback(() => {
-    const elements = {
-      body: null,
-      link: null,
-      closeButton: null,
-      mobileHeader: null,
-      target: null
-    };
-    React__default.Children.map(children, (child) => {
-      if (React__default.isValidElement(child)) {
-        if (child.type === TooltipTarget) {
-          elements.target = child;
-        } else if (child.type === TooltipBody) {
-          elements.body = child;
-        } else if (child.type === TooltipLink) {
-          elements.link = child;
-        } else if (child.type === TooltipXButton) {
-          elements.closeButton = child;
-        } else if (child.type === TooltipMobileHeader) {
-          elements.mobileHeader = child;
+  const elements = useMemo(() => collectTooltipElements(children), [children]);
+  const handleOpen = useCallback(
+    (nextOpen) => {
+      if (openProp === void 0) {
+        if (!nextOpen) {
+          targetHoveredRef.current = false;
         }
+        setOpenState(nextOpen);
       }
-    });
-    return elements;
-  }, [children]);
-  const handleOpen = (nextOpen) => {
-    if (openProp === void 0) {
-      if (!nextOpen) {
-        targetHoveredRef.current = false;
-      }
-      setOpenState(nextOpen);
-    }
-    toggle == null ? void 0 : toggle(nextOpen);
-  };
-  const renderDesktopTooltip = () => {
-    return /* @__PURE__ */ jsx(TooltipDesktop, { isOpen: open, toggleType, preferPlace, ...rest });
-  };
-  const renderMobileTooltip = () => {
-    return /* @__PURE__ */ jsx(TooltipMobile, { isOpen: open, ...rest });
-  };
-  return /* @__PURE__ */ jsx(
-    TooltipContext.Provider,
-    {
-      value: {
-        elements: getChildrenElements(),
-        setTooltipOpen: handleOpen,
-        targetHoveredRef,
-        toggleType,
-        tooltipOpen: open
-      },
-      children: disableAdaptiveMode ? renderDesktopTooltip() : /* @__PURE__ */ jsx(MobileView, { fallback: renderDesktopTooltip(), children: renderMobileTooltip() })
-    }
+      toggle == null ? void 0 : toggle(nextOpen);
+    },
+    [openProp, toggle]
+  );
+  const contextValue = useMemo(
+    () => ({
+      elements,
+      setTooltipOpen: handleOpen,
+      targetHoveredRef,
+      toggleType,
+      tooltipOpen: open
+    }),
+    [elements, handleOpen, toggleType, open]
   );
+  const renderDesktopTooltip = () => /* @__PURE__ */ jsx(TooltipDesktop, { isOpen: open, toggleType, preferPlace, ...rest });
+  const renderMobileTooltip = () => /* @__PURE__ */ jsx(TooltipMobile, { isOpen: open, ...rest });
+  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: contextValue, children: disableAdaptiveMode ? renderDesktopTooltip() : /* @__PURE__ */ jsx(MobileView, { fallback: renderDesktopTooltip(), children: renderMobileTooltip() }) });
 };
 Tooltip.Target = TooltipTarget;
 Tooltip.Body = TooltipBody;

package/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback, useRef } from \"react\";\nimport { TooltipContext } from \"./TootlipContext\";\nimport { MobileView } from \"../MobileView/MobileView\";\nimport { TooltipDesktop } from \"./components/desktop/TooltipDesktop\";\nimport { TooltipMobile } from \"./components/mobile/TooltipMobile\";\nimport { TooltipBody } from \"./components/common/TooltipBody\";\nimport { TooltipLink } from \"./components/common/TooltipLink\";\nimport { TooltipTarget } from \"./components/common/TooltipTarget\";\nimport { TooltipXButton } from \"./components/common/TooltipXButton\";\nimport { TooltipMobileHeader } from \"./components/mobile/components/TooltipMobileHeader\";\nimport { ITooltipElements, ITooltipProps } from \"./types\";\nimport { useTooltipTheme } from \"./utils/useTooltipTheme\";\nimport { useMobileView } from \"../MobileView\";\n\n/** Внутренние составляющие компонента Tooltip. */\ninterface ITooltipComposition {\n    Target: typeof TooltipTarget;\n    Body: typeof TooltipBody;\n    Link: typeof TooltipLink;\n    XButton: typeof TooltipXButton;\n    MobileHeader: typeof TooltipMobileHeader;\n}\n\n/** Всплывающая подсказка. */\nexport const Tooltip: React.FC<ITooltipProps> & ITooltipComposition = ({\n    children,\n    toggleType,\n    preferPlace,\n    disableAdaptiveMode,\n    isOpen: openProp,\n    toggle,\n    ...rest\n}) => {\n    const isMobileScreenWidth = useMobileView();\n    const [openState, setOpenState] = useState(false);\n    const targetHoveredRef = useRef(false);\n    const open = openProp ?? openState;\n    // renderContainer для mobile режима только document.body\n    const isBodyOnlyRenderContainer = isMobileScreenWidth && !disableAdaptiveMode;\n    useTooltipTheme(open, isBodyOnlyRenderContainer ? document.body : (rest.renderContainer ?? document.body));\n\n    useEffect(() => {\n        if (openProp === false) {\n            targetHoveredRef.current = false;\n        }\n    }, [openProp]);\n\n    /** Получить дочерние React-элементы. */\n    const getChildrenElements = useCallback(() => {\n        const elements: ITooltipElements = {\n            body: null,\n            link: null,\n            closeButton: null,\n            mobileHeader: null,\n            target: null,\n        };\n\n        React.Children.map(children, (child) => {\n            if (React.isValidElement<React.ReactElement>(child)) {\n                if (child.type === TooltipTarget) {\n                    elements.target = child as React.ReactElement;\n                } else if (child.type === TooltipBody) {\n                    elements.body = child as React.ReactElement;\n                } else if (child.type === TooltipLink) {\n                    elements.link = child as React.ReactElement;\n                } else if (child.type === TooltipXButton) {\n                    elements.closeButton = child as React.ReactElement;\n                } else if (child.type === TooltipMobileHeader) {\n                    elements.mobileHeader = child as React.ReactElement;\n                }\n            }\n        });\n\n        return elements;\n    }, [children]);\n\n    /** Обработчик изменения состояния компонента. */\n    const handleOpen = (nextOpen: boolean) => {\n        if (openProp === undefined) {\n            if (!nextOpen) {\n                targetHoveredRef.current = false;\n            }\n            setOpenState(nextOpen);\n        }\n\n        toggle?.(nextOpen);\n    };\n\n    /** Рендер десктоп версии компонента. */\n    const renderDesktopTooltip = () => {\n        return <TooltipDesktop isOpen={open} toggleType={toggleType} preferPlace={preferPlace} {...rest} />;\n    };\n\n    /** Рендер мобильной версии компонента. */\n    const renderMobileTooltip = () => {\n        return <TooltipMobile isOpen={open} {...rest} />;\n    };\n\n    return (\n        <TooltipContext.Provider\n            value={{\n                elements: getChildrenElements(),\n                setTooltipOpen: handleOpen,\n                targetHoveredRef,\n                toggleType,\n                tooltipOpen: open,\n            }}\n        >\n            {disableAdaptiveMode ? (\n                renderDesktopTooltip()\n            ) : (\n                <MobileView fallback={renderDesktopTooltip()}>{renderMobileTooltip()}</MobileView>\n            )}\n        </TooltipContext.Provider>\n    );\n};\n\nTooltip.Target = TooltipTarget;\nTooltip.Body = TooltipBody;\nTooltip.Link = TooltipLink;\nTooltip.XButton = TooltipXButton;\nTooltip.MobileHeader = TooltipMobileHeader;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAwBO,MAAM,UAAyD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,sBAAsB,cAAA;AAC5B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,mBAAmB,OAAO,KAAK;AACrC,QAAM,OAAO,YAAY;AAEzB,QAAM,4BAA4B,uBAAuB,CAAC;AAC1D,kBAAgB,MAAM,4BAA4B,SAAS,OAAQ,KAAK,mBAAmB,SAAS,IAAK;AAEzG,YAAU,MAAM;AACZ,QAAI,aAAa,OAAO;AACpB,uBAAiB,UAAU;AAAA,IAC/B;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,sBAAsB,YAAY,MAAM;AAC1C,UAAM,WAA6B;AAAA,MAC/B,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,QAAQ;AAAA,IAAA;AAGZA,mBAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACpC,UAAIA,eAAM,eAAmC,KAAK,GAAG;AACjD,YAAI,MAAM,SAAS,eAAe;AAC9B,mBAAS,SAAS;AAAA,QACtB,WAAW,MAAM,SAAS,aAAa;AACnC,mBAAS,OAAO;AAAA,QACpB,WAAW,MAAM,SAAS,aAAa;AACnC,mBAAS,OAAO;AAAA,QACpB,WAAW,MAAM,SAAS,gBAAgB;AACtC,mBAAS,cAAc;AAAA,QAC3B,WAAW,MAAM,SAAS,qBAAqB;AAC3C,mBAAS,eAAe;AAAA,QAC5B;AAAA,MACJ;AAAA,IACJ,CAAC;AAED,WAAO;AAAA,EACX,GAAG,CAAC,QAAQ,CAAC;AAGb,QAAM,aAAa,CAAC,aAAsB;AACtC,QAAI,aAAa,QAAW;AACxB,UAAI,CAAC,UAAU;AACX,yBAAiB,UAAU;AAAA,MAC/B;AACA,mBAAa,QAAQ;AAAA,IACzB;AAEA,qCAAS;AAAA,EACb;AAGA,QAAM,uBAAuB,MAAM;AAC/B,+BAAQ,gBAAA,EAAe,QAAQ,MAAM,YAAwB,aAA2B,GAAG,MAAM;AAAA,EACrG;AAGA,QAAM,sBAAsB,MAAM;AAC9B,WAAO,oBAAC,eAAA,EAAc,QAAQ,MAAO,GAAG,MAAM;AAAA,EAClD;AAEA,SACI;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACG,OAAO;AAAA,QACH,UAAU,oBAAA;AAAA,QACV,gBAAgB;AAAA,QAChB;AAAA,QACA;AAAA,QACA,aAAa;AAAA,MAAA;AAAA,MAGhB,UAAA,sBACG,yBAEA,oBAAC,cAAW,UAAU,qBAAA,GAAyB,UAAA,oBAAA,EAAoB,CAAE;AAAA,IAAA;AAAA,EAAA;AAIrF;AAEA,QAAQ,SAAS;AACjB,QAAQ,OAAO;AACf,QAAQ,OAAO;AACf,QAAQ,UAAU;AAClB,QAAQ,eAAe;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback, useMemo, useRef } from \"react\";\nimport { TooltipContext } from \"./TootlipContext\";\nimport { MobileView } from \"../MobileView/MobileView\";\nimport { TooltipDesktop } from \"./components/desktop/TooltipDesktop\";\nimport { TooltipMobile } from \"./components/mobile/TooltipMobile\";\nimport { TooltipBody } from \"./components/common/TooltipBody\";\nimport { TooltipLink } from \"./components/common/TooltipLink\";\nimport { TooltipTarget } from \"./components/common/TooltipTarget\";\nimport { TooltipXButton } from \"./components/common/TooltipXButton\";\nimport { TooltipMobileHeader } from \"./components/mobile/components/TooltipMobileHeader\";\nimport {\n    ITooltipBodyProps,\n    ITooltipElements,\n    ITooltipLinkProps,\n    ITooltipMobileHeaderProps,\n    ITooltipProps,\n    ITooltipTargetProps,\n    ITooltipXButtonProps,\n} from \"./types\";\nimport { useTooltipTheme } from \"./utils/useTooltipTheme\";\nimport { useMobileView } from \"../MobileView\";\n\n/** Внутренние составляющие компонента Tooltip. */\ninterface ITooltipComposition {\n    /** Целевой элемент, к которому привязана подсказка. */\n    Target: typeof TooltipTarget;\n    /** Содержимое подсказки. */\n    Body: typeof TooltipBody;\n    /** Гиперссылка внутри подсказки. */\n    Link: typeof TooltipLink;\n    /** Кнопка закрытия подсказки. */\n    XButton: typeof TooltipXButton;\n    /** Заголовок мобильной (адаптивной) версии подсказки. */\n    MobileHeader: typeof TooltipMobileHeader;\n}\n\n/**\n * Разбирает children на именованные слоты Tooltip.\n * Узлы, не являющиеся субкомпонентами Tooltip, игнорируются.\n */\nconst collectTooltipElements = (children: React.ReactNode): ITooltipElements => {\n    const elements: ITooltipElements = {\n        body: null,\n        link: null,\n        closeButton: null,\n        mobileHeader: null,\n        target: null,\n    };\n\n    React.Children.forEach(children, (child) => {\n        if (React.isValidElement<ITooltipTargetProps>(child) && child.type === TooltipTarget) {\n            elements.target = child;\n        } else if (React.isValidElement<ITooltipBodyProps>(child) && child.type === TooltipBody) {\n            elements.body = child;\n        } else if (React.isValidElement<ITooltipLinkProps>(child) && child.type === TooltipLink) {\n            elements.link = child;\n        } else if (React.isValidElement<ITooltipXButtonProps>(child) && child.type === TooltipXButton) {\n            elements.closeButton = child;\n        } else if (React.isValidElement<ITooltipMobileHeaderProps>(child) && child.type === TooltipMobileHeader) {\n            elements.mobileHeader = child;\n        }\n    });\n\n    return elements;\n};\n\n/** Всплывающая подсказка. */\nexport const Tooltip: React.FC<ITooltipProps> & ITooltipComposition = ({\n    children,\n    toggleType,\n    preferPlace,\n    disableAdaptiveMode,\n    isOpen: openProp,\n    toggle,\n    ...rest\n}) => {\n    const isMobileScreenWidth = useMobileView();\n    const [openState, setOpenState] = useState(false);\n    const targetHoveredRef = useRef(false);\n    const open = openProp ?? openState;\n    // renderContainer для mobile режима только document.body\n    const isBodyOnlyRenderContainer = isMobileScreenWidth && !disableAdaptiveMode;\n    const themeContainer = isBodyOnlyRenderContainer ? document.body : (rest.renderContainer ?? document.body);\n\n    useTooltipTheme(open, themeContainer);\n\n    useEffect(() => {\n        if (openProp === false) {\n            targetHoveredRef.current = false;\n        }\n    }, [openProp]);\n\n    const elements = useMemo(() => collectTooltipElements(children), [children]);\n\n    /** Обработчик изменения состояния компонента. */\n    const handleOpen = useCallback(\n        (nextOpen: boolean) => {\n            if (openProp === undefined) {\n                if (!nextOpen) {\n                    targetHoveredRef.current = false;\n                }\n                setOpenState(nextOpen);\n            }\n\n            toggle?.(nextOpen);\n        },\n        [openProp, toggle],\n    );\n\n    const contextValue = useMemo(\n        () => ({\n            elements,\n            setTooltipOpen: handleOpen,\n            targetHoveredRef,\n            toggleType,\n            tooltipOpen: open,\n        }),\n        [elements, handleOpen, toggleType, open],\n    );\n\n    /** Рендер десктоп версии компонента. */\n    const renderDesktopTooltip = () => (\n        <TooltipDesktop isOpen={open} toggleType={toggleType} preferPlace={preferPlace} {...rest} />\n    );\n\n    /** Рендер мобильной версии компонента. */\n    const renderMobileTooltip = () => <TooltipMobile isOpen={open} {...rest} />;\n\n    return (\n        <TooltipContext.Provider value={contextValue}>\n            {disableAdaptiveMode ? (\n                renderDesktopTooltip()\n            ) : (\n                <MobileView fallback={renderDesktopTooltip()}>{renderMobileTooltip()}</MobileView>\n            )}\n        </TooltipContext.Provider>\n    );\n};\n\nTooltip.Target = TooltipTarget;\nTooltip.Body = TooltipBody;\nTooltip.Link = TooltipLink;\nTooltip.XButton = TooltipXButton;\nTooltip.MobileHeader = TooltipMobileHeader;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAwCA,MAAM,yBAAyB,CAAC,aAAgD;AAC5E,QAAM,WAA6B;AAAA,IAC/B,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,cAAc;AAAA,IACd,QAAQ;AAAA,EAAA;AAGZA,iBAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AACxC,QAAIA,eAAM,eAAoC,KAAK,KAAK,MAAM,SAAS,eAAe;AAClF,eAAS,SAAS;AAAA,IACtB,WAAWA,eAAM,eAAkC,KAAK,KAAK,MAAM,SAAS,aAAa;AACrF,eAAS,OAAO;AAAA,IACpB,WAAWA,eAAM,eAAkC,KAAK,KAAK,MAAM,SAAS,aAAa;AACrF,eAAS,OAAO;AAAA,IACpB,WAAWA,eAAM,eAAqC,KAAK,KAAK,MAAM,SAAS,gBAAgB;AAC3F,eAAS,cAAc;AAAA,IAC3B,WAAWA,eAAM,eAA0C,KAAK,KAAK,MAAM,SAAS,qBAAqB;AACrG,eAAS,eAAe;AAAA,IAC5B;AAAA,EACJ,CAAC;AAED,SAAO;AACX;AAGO,MAAM,UAAyD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,sBAAsB,cAAA;AAC5B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,mBAAmB,OAAO,KAAK;AACrC,QAAM,OAAO,YAAY;AAEzB,QAAM,4BAA4B,uBAAuB,CAAC;AAC1D,QAAM,iBAAiB,4BAA4B,SAAS,OAAQ,KAAK,mBAAmB,SAAS;AAErG,kBAAgB,MAAM,cAAc;AAEpC,YAAU,MAAM;AACZ,QAAI,aAAa,OAAO;AACpB,uBAAiB,UAAU;AAAA,IAC/B;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,WAAW,QAAQ,MAAM,uBAAuB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAG3E,QAAM,aAAa;AAAA,IACf,CAAC,aAAsB;AACnB,UAAI,aAAa,QAAW;AACxB,YAAI,CAAC,UAAU;AACX,2BAAiB,UAAU;AAAA,QAC/B;AACA,qBAAa,QAAQ;AAAA,MACzB;AAEA,uCAAS;AAAA,IACb;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EAAA;AAGrB,QAAM,eAAe;AAAA,IACjB,OAAO;AAAA,MACH;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,aAAa;AAAA,IAAA;AAAA,IAEjB,CAAC,UAAU,YAAY,YAAY,IAAI;AAAA,EAAA;AAI3C,QAAM,uBAAuB,MACzB,oBAAC,gBAAA,EAAe,QAAQ,MAAM,YAAwB,aAA2B,GAAG,MAAM;AAI9F,QAAM,sBAAsB,MAAM,oBAAC,iBAAc,QAAQ,MAAO,GAAG,MAAM;AAEzE,6BACK,eAAe,UAAf,EAAwB,OAAO,cAC3B,UAAA,sBACG,qBAAA,IAEA,oBAAC,cAAW,UAAU,qBAAA,GAAyB,UAAA,oBAAA,GAAsB,GAE7E;AAER;AAEA,QAAQ,SAAS;AACjB,QAAQ,OAAO;AACf,QAAQ,OAAO;AACf,QAAQ,UAAU;AAClB,QAAQ,eAAe;"}

package/components/Tooltip/TootlipContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TootlipContext.js","sources":["../../../src/components/Tooltip/TootlipContext.ts"],"sourcesContent":["import React from \"react\";\nimport { TTooltipToggleType, ITooltipElements } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/** Свойства контекста Tooltip. */\nexport interface ITooltipContext {\n    toggleType?: TTooltipToggleType;\n    elements: ITooltipElements;\n    tooltipOpen: boolean;\n    targetHoveredRef: React.MutableRefObject<boolean>;\n    setTooltipOpen: (open: boolean) => void;\n}\n\n/** Контекст компонента Tooltip. */\nexport const TooltipContext = React.createContext<ITooltipContext>({\n    elements: {\n        body: null,\n        link: null,\n        closeButton: null,\n        mobileHeader: null,\n        target: null,\n    },\n    setTooltipOpen: () => {},\n    targetHoveredRef: { current: false },\n    tooltipOpen: false,\n});\n"],"names":["React"],"mappings":";AAaO,MAAM,iBAAiBA,eAAM,cAA+B;AAAA,EAC/D,UAAU;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,cAAc;AAAA,IACd,QAAQ;AAAA,EAAA;AAAA,EAEZ,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,kBAAkB,EAAE,SAAS,MAAA;AAAA,EAC7B,aAAa;AACjB,CAAC;"}
+{"version":3,"file":"TootlipContext.js","sources":["../../../src/components/Tooltip/TootlipContext.ts"],"sourcesContent":["import React from \"react\";\nimport { TTooltipToggleType, ITooltipElements } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/** Свойства контекста Tooltip. */\nexport interface ITooltipContext {\n    /** Способ открытия подсказки: по клику или по наведению. */\n    toggleType?: TTooltipToggleType;\n    /** Субкомпоненты, разобранные из children Tooltip. */\n    elements: ITooltipElements;\n    /** Признак того, что подсказка открыта. */\n    tooltipOpen: boolean;\n    /** Признак того, что открытие было инициировано наведением на целевой элемент. */\n    targetHoveredRef: React.MutableRefObject<boolean>;\n    /** Изменение состояния открытости подсказки. */\n    setTooltipOpen: (open: boolean) => void;\n}\n\n/** Контекст компонента Tooltip. */\nexport const TooltipContext = React.createContext<ITooltipContext>({\n    elements: {\n        body: null,\n        link: null,\n        closeButton: null,\n        mobileHeader: null,\n        target: null,\n    },\n    setTooltipOpen: () => {},\n    targetHoveredRef: { current: false },\n    tooltipOpen: false,\n});\n"],"names":["React"],"mappings":";AAkBO,MAAM,iBAAiBA,eAAM,cAA+B;AAAA,EAC/D,UAAU;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,cAAc;AAAA,IACd,QAAQ;AAAA,EAAA;AAAA,EAEZ,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,kBAAkB,EAAE,SAAS,MAAA;AAAA,EAC7B,aAAa;AACjB,CAAC;"}

package/components/Tooltip/components/common/TooltipBody.js

@@ -4,7 +4,7 @@ import { c as clsx } from "../../../../chunks/vendor-CtuAQuEN.js";
 import { MobileView } from "../../../MobileView/MobileView.js";
 import { Text } from "../../../Typography/Text.js";
 import { ELineType, ETextSize } from "../../../Typography/enums.js";
-import { s as styles } from "../../../../chunks/TooltipDesktop.module-DBiY8cJJ.js";
+import { s as styles } from "../../../../chunks/TooltipDesktop.module-BKIRlstC.js";
 const TooltipBody = React__default.forwardRef(({ className, ...rest }, ref) => {
   const classNames = clsx(styles.tooltipBody, className);
   return /* @__PURE__ */ jsx(MobileView, { fallback: /* @__PURE__ */ jsx("div", { className: classNames, ...rest, ref }), children: /* @__PURE__ */ jsx(Text, { className: classNames, size: ETextSize.B3, line: ELineType.NORMAL, tag: "div", ...rest, ref }) });

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

@@ -3,9 +3,9 @@ import React__default from "react";
 import { c as clsx } from "../../../../chunks/vendor-CtuAQuEN.js";
 import { MobileView } from "../../../MobileView/MobileView.js";
 import { getSafeRel } from "../../../../utils/html/anchorSecurity.js";
-const tooltipLink = "tooltipLink__86ee5f38";
-const desktop = "desktop__188a8712";
-const mobile = "mobile__2985087c";
+const tooltipLink = "tooltipLink__d211ddc1";
+const desktop = "desktop__11edf5a1";
+const mobile = "mobile__2cca39dd";
 const styles = {
   tooltipLink,
   desktop,
@@ -14,30 +14,19 @@ const styles = {
 const TooltipLink = React__default.forwardRef(
   ({ children, className, target, rel, ...rest }, ref) => {
     const safeRel = getSafeRel(target, rel);
-    const renderDesktopLink = () => /* @__PURE__ */ jsx(
+    const renderLink = (variantClassName) => /* @__PURE__ */ jsx(
       "a",
       {
-        className: clsx(styles.tooltipLink, styles.desktop, className),
+        className: clsx(styles.tooltipLink, variantClassName, className),
         ...rest,
         target,
         rel: safeRel,
-        "data-tx": "1.40.0",
+        "data-tx": "1.41.1",
         ref,
         children
       }
     );
-    return /* @__PURE__ */ jsx(MobileView, { fallback: renderDesktopLink(), children: /* @__PURE__ */ jsx(
-      "a",
-      {
-        className: clsx(styles.tooltipLink, styles.mobile, className),
-        ...rest,
-        target,
-        rel: safeRel,
-        "data-tx": "1.40.0",
-        ref,
-        children
-      }
-    ) });
+    return /* @__PURE__ */ jsx(MobileView, { fallback: renderLink(styles.desktop), children: renderLink(styles.mobile) });
   }
 );
 TooltipLink.displayName = "TooltipLink";

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipLink.js","sources":["../../../../../src/components/Tooltip/components/common/TooltipLink.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { MobileView } from \"@sberbusiness/triplex-next/components/MobileView/MobileView\";\nimport { getSafeRel } from \"@sberbusiness/triplex-next/utils/html/anchorSecurity\";\nimport styles from \"@sberbusiness/triplex-next/components/Tooltip/styles/TooltipLink.module.less\";\nimport { ITooltipLinkProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/** Гиперссылка в Tooltip. */\nexport const TooltipLink = React.forwardRef<HTMLAnchorElement, ITooltipLinkProps>(\n    ({ children, className, target, rel, ...rest }, ref) => {\n        // Защита от reverse tabnabbing при target=\"_blank\".\n        const safeRel = getSafeRel(target, rel);\n\n        /** Рендер десктоп версии. */\n        const renderDesktopLink = () => (\n            <a\n                className={clsx(styles.tooltipLink, styles.desktop, className)}\n                {...rest}\n                target={target}\n                rel={safeRel}\n                data-tx={process.env.npm_package_version}\n                ref={ref}\n            >\n                {children}\n            </a>\n        );\n\n        return (\n            <MobileView fallback={renderDesktopLink()}>\n                <a\n                    className={clsx(styles.tooltipLink, styles.mobile, className)}\n                    {...rest}\n                    target={target}\n                    rel={safeRel}\n                    data-tx={process.env.npm_package_version}\n                    ref={ref}\n                >\n                    {children}\n                </a>\n            </MobileView>\n        );\n    },\n);\n\nTooltipLink.displayName = \"TooltipLink\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,cAAcA,eAAM;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,QAAQ,KAAK,GAAG,KAAA,GAAQ,QAAQ;AAEpD,UAAM,UAAU,WAAW,QAAQ,GAAG;AAGtC,UAAM,oBAAoB,MACtB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,aAAa,OAAO,SAAS,SAAS;AAAA,QAC5D,GAAG;AAAA,QACJ;AAAA,QACA,KAAK;AAAA,QACL,WAAS;AAAA,QACT;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAIT,+BACK,YAAA,EAAW,UAAU,kBAAA,GAClB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,aAAa,OAAO,QAAQ,SAAS;AAAA,QAC3D,GAAG;AAAA,QACJ;AAAA,QACA,KAAK;AAAA,QACL,WAAS;AAAA,QACT;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER;AACJ;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"TooltipLink.js","sources":["../../../../../src/components/Tooltip/components/common/TooltipLink.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { MobileView } from \"@sberbusiness/triplex-next/components/MobileView/MobileView\";\nimport { getSafeRel } from \"@sberbusiness/triplex-next/utils/html/anchorSecurity\";\nimport styles from \"@sberbusiness/triplex-next/components/Tooltip/styles/TooltipLink.module.less\";\nimport { ITooltipLinkProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/** Гиперссылка в Tooltip. */\nexport const TooltipLink = React.forwardRef<HTMLAnchorElement, ITooltipLinkProps>(\n    ({ children, className, target, rel, ...rest }, ref) => {\n        // Защита от reverse tabnabbing при target=\"_blank\".\n        const safeRel = getSafeRel(target, rel);\n\n        /** Рендер ссылки с классом варианта отображения (десктопный или мобильный). */\n        const renderLink = (variantClassName: string) => (\n            <a\n                className={clsx(styles.tooltipLink, variantClassName, className)}\n                {...rest}\n                target={target}\n                rel={safeRel}\n                data-tx={process.env.npm_package_version}\n                ref={ref}\n            >\n                {children}\n            </a>\n        );\n\n        return <MobileView fallback={renderLink(styles.desktop)}>{renderLink(styles.mobile)}</MobileView>;\n    },\n);\n\nTooltipLink.displayName = \"TooltipLink\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAQO,MAAM,cAAcA,eAAM;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,QAAQ,KAAK,GAAG,KAAA,GAAQ,QAAQ;AAEpD,UAAM,UAAU,WAAW,QAAQ,GAAG;AAGtC,UAAM,aAAa,CAAC,qBAChB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,aAAa,kBAAkB,SAAS;AAAA,QAC9D,GAAG;AAAA,QACJ;AAAA,QACA,KAAK;AAAA,QACL,WAAS;AAAA,QACT;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAIT,WAAO,oBAAC,YAAA,EAAW,UAAU,WAAW,OAAO,OAAO,GAAI,UAAA,WAAW,OAAO,MAAM,GAAE;AAAA,EACxF;AACJ;AAEA,YAAY,cAAc;"}

package/components/Tooltip/components/common/TooltipTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipTarget.js","sources":["../../../../../src/components/Tooltip/components/common/TooltipTarget.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { TooltipContext } from \"@sberbusiness/triplex-next/components/Tooltip/TootlipContext\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { ITooltipTargetProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/** Целевой элемент компонента Tooltip. */\nexport const TooltipTarget: React.FC<ITooltipTargetProps> = ({ children }) => {\n    const { toggleType, tooltipOpen, targetHoveredRef, setTooltipOpen } = useContext(TooltipContext);\n    const child = React.Children.only(children);\n\n    /** Обработчик нажатия клавиши. */\n    const handleKeyDown = (onKeyDown?: React.KeyboardEventHandler) => (event: React.KeyboardEvent) => {\n        const key = event.code || event.keyCode;\n\n        if (isKey(key, \"TAB\")) {\n            if (tooltipOpen) {\n                setTooltipOpen(false);\n            }\n        }\n        onKeyDown?.(event);\n    };\n\n    /** Обработчик клика. */\n    const handleClick = (onClick?: React.MouseEventHandler) => (event: React.MouseEvent) => {\n        if (\n            toggleType === \"click\" ||\n            (toggleType === \"hover\" && !targetHoveredRef.current && event.currentTarget.contains(event.target as Node))\n        ) {\n            setTooltipOpen(!tooltipOpen);\n        }\n        onClick?.(event);\n    };\n\n    if (React.isValidElement<React.HTMLAttributes<Element>>(child)) {\n        return React.cloneElement(child, {\n            onClick: handleClick(child.props.onClick),\n            onKeyDown: handleKeyDown(child.props.onKeyDown),\n        });\n    }\n\n    return child;\n};\n"],"names":["React"],"mappings":";;;AAMO,MAAM,gBAA+C,CAAC,EAAE,eAAe;AAC1E,QAAM,EAAE,YAAY,aAAa,kBAAkB,eAAA,IAAmB,WAAW,cAAc;AAC/F,QAAM,QAAQA,eAAM,SAAS,KAAK,QAAQ;AAG1C,QAAM,gBAAgB,CAAC,cAA2C,CAAC,UAA+B;AAC9F,UAAM,MAAM,MAAM,QAAQ,MAAM;AAEhC,QAAI,MAAM,KAAK,KAAK,GAAG;AACnB,UAAI,aAAa;AACb,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AACA,2CAAY;AAAA,EAChB;AAGA,QAAM,cAAc,CAAC,YAAsC,CAAC,UAA4B;AACpF,QACI,eAAe,WACd,eAAe,WAAW,CAAC,iBAAiB,WAAW,MAAM,cAAc,SAAS,MAAM,MAAc,GAC3G;AACE,qBAAe,CAAC,WAAW;AAAA,IAC/B;AACA,uCAAU;AAAA,EACd;AAEA,MAAIA,eAAM,eAA8C,KAAK,GAAG;AAC5D,WAAOA,eAAM,aAAa,OAAO;AAAA,MAC7B,SAAS,YAAY,MAAM,MAAM,OAAO;AAAA,MACxC,WAAW,cAAc,MAAM,MAAM,SAAS;AAAA,IAAA,CACjD;AAAA,EACL;AAEA,SAAO;AACX;"}
+{"version":3,"file":"TooltipTarget.js","sources":["../../../../../src/components/Tooltip/components/common/TooltipTarget.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { TooltipContext } from \"@sberbusiness/triplex-next/components/Tooltip/TootlipContext\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { ITooltipTargetProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/**\n * Целевой элемент компонента Tooltip.\n * Не рендерит собственную разметку: клонирует единственный дочерний элемент,\n * добавляя ему обработчики открытия подсказки. Собственные onClick/onKeyDown ребёнка сохраняются.\n */\nexport const TooltipTarget: React.FC<ITooltipTargetProps> = ({ children }) => {\n    const { toggleType, tooltipOpen, targetHoveredRef, setTooltipOpen } = useContext(TooltipContext);\n    const child = React.Children.only(children);\n\n    /** Обработчик нажатия клавиши. */\n    const handleKeyDown = (onKeyDown?: React.KeyboardEventHandler) => (event: React.KeyboardEvent) => {\n        const key = event.code || event.keyCode;\n\n        if (isKey(key, \"TAB\")) {\n            if (tooltipOpen) {\n                setTooltipOpen(false);\n            }\n        }\n        onKeyDown?.(event);\n    };\n\n    /** Обработчик клика. */\n    const handleClick = (onClick?: React.MouseEventHandler) => (event: React.MouseEvent) => {\n        if (\n            toggleType === \"click\" ||\n            (toggleType === \"hover\" && !targetHoveredRef.current && event.currentTarget.contains(event.target as Node))\n        ) {\n            setTooltipOpen(!tooltipOpen);\n        }\n        onClick?.(event);\n    };\n\n    if (React.isValidElement<React.HTMLAttributes<Element>>(child)) {\n        return React.cloneElement(child, {\n            onClick: handleClick(child.props.onClick),\n            onKeyDown: handleKeyDown(child.props.onKeyDown),\n        });\n    }\n\n    return child;\n};\n"],"names":["React"],"mappings":";;;AAUO,MAAM,gBAA+C,CAAC,EAAE,eAAe;AAC1E,QAAM,EAAE,YAAY,aAAa,kBAAkB,eAAA,IAAmB,WAAW,cAAc;AAC/F,QAAM,QAAQA,eAAM,SAAS,KAAK,QAAQ;AAG1C,QAAM,gBAAgB,CAAC,cAA2C,CAAC,UAA+B;AAC9F,UAAM,MAAM,MAAM,QAAQ,MAAM;AAEhC,QAAI,MAAM,KAAK,KAAK,GAAG;AACnB,UAAI,aAAa;AACb,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AACA,2CAAY;AAAA,EAChB;AAGA,QAAM,cAAc,CAAC,YAAsC,CAAC,UAA4B;AACpF,QACI,eAAe,WACd,eAAe,WAAW,CAAC,iBAAiB,WAAW,MAAM,cAAc,SAAS,MAAM,MAAc,GAC3G;AACE,qBAAe,CAAC,WAAW;AAAA,IAC/B;AACA,uCAAU;AAAA,EACd;AAEA,MAAIA,eAAM,eAA8C,KAAK,GAAG;AAC5D,WAAOA,eAAM,aAAa,OAAO;AAAA,MAC7B,SAAS,YAAY,MAAM,MAAM,OAAO;AAAA,MACxC,WAAW,cAAc,MAAM,MAAM,SAAS;AAAA,IAAA,CACjD;AAAA,EACL;AAEA,SAAO;AACX;"}

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

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

package/components/Tooltip/components/desktop/TooltipDesktop.js

@@ -6,11 +6,13 @@ import React__default from "react";
 import { TooltipDesktopBase } from "./components/TooltipDesktopBase.js";
 import { TooltipContext } from "../../TootlipContext.js";
 import { isKey } from "../../../../utils/keyboard.js";
+const HOVER_CLOSE_DELAY_MS = 500;
 class TooltipDesktop extends React__default.Component {
   constructor() {
     super(...arguments);
     __publicField(this, "tooltip", null);
     __publicField(this, "timeout");
+    /** Сохранение ноды подсказки и подписка её на события наведения. */
     __publicField(this, "setTooltipRef", (node) => {
       const { toggleType } = this.props;
       if (node && toggleType === "hover") {
@@ -18,7 +20,7 @@ class TooltipDesktop extends React__default.Component {
       }
       this.tooltip = node;
     });
-    // Закрываем Tooltip при клике за его пределами.
+    /** Закрытие подсказки при действии мышью за её пределами. */
     __publicField(this, "closeIfOuterAction", (event) => {
       const { targetRef } = this.props;
       const { setTooltipOpen } = this.context;
@@ -30,21 +32,24 @@ class TooltipDesktop extends React__default.Component {
         }
       }
     });
-    // Закрываем Tooltip по нажатию Esc
+    /** Закрытие подсказки по нажатию Escape. */
     __publicField(this, "closeIfEscapeKey", (event) => {
       const key = event.code || event.keyCode;
       if (isKey(key, "ESCAPE")) {
         this.context.setTooltipOpen(false);
       }
     });
+    /** Подписка элемента на события наведения. */
     __publicField(this, "addHoverListeners", (element) => {
       element.addEventListener("mouseenter", this.handleMouseEnter);
       element.addEventListener("mouseleave", this.handleMouseLeave);
     });
+    /** Отписка элемента от событий наведения. */
     __publicField(this, "removeHoverListeners", (element) => {
       element.removeEventListener("mouseenter", this.handleMouseEnter);
       element.removeEventListener("mouseleave", this.handleMouseLeave);
     });
+    /** Обработчик наведения курсора на целевой элемент или на саму подсказку. */
     __publicField(this, "handleMouseEnter", () => {
       const { tooltipOpen, targetHoveredRef, setTooltipOpen } = this.context;
       if (!tooltipOpen) {
@@ -53,11 +58,12 @@ class TooltipDesktop extends React__default.Component {
       }
       clearTimeout(this.timeout);
     });
+    /** Обработчик ухода курсора: подсказка закрывается с задержкой, чтобы курсор успел дойти до неё. */
     __publicField(this, "handleMouseLeave", () => {
       const { setTooltipOpen } = this.context;
       this.timeout = window.setTimeout(() => {
         setTooltipOpen(false);
-      }, 500);
+      }, HOVER_CLOSE_DELAY_MS);
     });
   }
   render() {
@@ -65,9 +71,9 @@ class TooltipDesktop extends React__default.Component {
     return /* @__PURE__ */ jsx(TooltipDesktopBase, { ...rest, setTooltipRef: this.setTooltipRef });
   }
   componentDidMount() {
-    const { toggleType, targetRef } = this.props;
-    if (this.props.isOpen) {
-      document.addEventListener("click", this.closeIfOuterAction);
+    const { toggleType, targetRef, isOpen } = this.props;
+    if (isOpen) {
+      document.addEventListener("mousedown", this.closeIfOuterAction);
       document.addEventListener("keydown", this.closeIfEscapeKey);
     }
     if (targetRef.current && toggleType === "hover") {
@@ -85,15 +91,16 @@ class TooltipDesktop extends React__default.Component {
     if (isClosed) {
       document.removeEventListener("mousedown", this.closeIfOuterAction);
       document.removeEventListener("keydown", this.closeIfEscapeKey);
-      if (this.props.toggleType === "hover") {
+      if (this.props.toggleType === "hover" && this.tooltip) {
         this.removeHoverListeners(this.tooltip);
       }
     }
-    if (targetRef.current && prevProps.toggleType != this.props.toggleType) {
+    if (prevProps.toggleType !== this.props.toggleType) {
+      const elements = [targetRef.current, this.tooltip];
       if (this.props.toggleType === "hover") {
-        this.addHoverListeners(targetRef.current);
+        elements.forEach((element) => element && this.addHoverListeners(element));
       } else if (prevProps.toggleType === "hover") {
-        this.removeHoverListeners(targetRef.current);
+        elements.forEach((element) => element && this.removeHoverListeners(element));
       }
     }
   }
@@ -101,8 +108,13 @@ class TooltipDesktop extends React__default.Component {
     const { toggleType, targetRef } = this.props;
     document.removeEventListener("mousedown", this.closeIfOuterAction);
     document.removeEventListener("keydown", this.closeIfEscapeKey);
-    if (targetRef.current && toggleType === "hover") {
-      this.removeHoverListeners(targetRef.current);
+    if (toggleType === "hover") {
+      if (targetRef.current) {
+        this.removeHoverListeners(targetRef.current);
+      }
+      if (this.tooltip) {
+        this.removeHoverListeners(this.tooltip);
+      }
     }
     clearTimeout(this.timeout);
   }

package/components/Tooltip/components/desktop/TooltipDesktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipDesktop.js","sources":["../../../../../src/components/Tooltip/components/desktop/TooltipDesktop.tsx"],"sourcesContent":["import React from \"react\";\nimport { TooltipDesktopBase } from \"@sberbusiness/triplex-next/components/Tooltip/components/desktop/components/TooltipDesktopBase\";\nimport { TooltipContext } from \"@sberbusiness/triplex-next/components/Tooltip/TootlipContext\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { ITooltipDesktopProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/** Десктоп версия компонента Tooltip. */\nexport class TooltipDesktop extends React.Component<ITooltipDesktopProps> {\n    public static displayName = \"TooltipDesktop\";\n    public static contextType = TooltipContext;\n\n    declare context: React.ContextType<typeof TooltipContext>;\n\n    private tooltip: Element | null = null;\n    private timeout?: number;\n\n    public render(): JSX.Element {\n        const { children, toggleType, ...rest } = this.props;\n\n        return <TooltipDesktopBase {...rest} setTooltipRef={this.setTooltipRef} />;\n    }\n\n    public componentDidMount(): void {\n        const { toggleType, targetRef } = this.props;\n\n        // Если Tooltip открывается по клику, то должен уметь закрываться по клику вне и по Esc.\n        if (this.props.isOpen) {\n            document.addEventListener(\"click\", this.closeIfOuterAction);\n            document.addEventListener(\"keydown\", this.closeIfEscapeKey);\n        }\n\n        if (targetRef.current && toggleType === \"hover\") {\n            this.addHoverListeners(targetRef.current);\n        }\n    }\n\n    public componentDidUpdate(prevProps: Readonly<ITooltipDesktopProps>): void {\n        const { targetRef } = this.props;\n        const isOpen = !prevProps.isOpen && this.props.isOpen;\n        const isClosed = prevProps.isOpen && !this.props.isOpen;\n\n        // Tooltip открылся.\n        if (isOpen) {\n            document.addEventListener(\"mousedown\", this.closeIfOuterAction);\n            document.addEventListener(\"keydown\", this.closeIfEscapeKey);\n        }\n\n        // Tooltip закрылся.\n        if (isClosed) {\n            document.removeEventListener(\"mousedown\", this.closeIfOuterAction);\n            document.removeEventListener(\"keydown\", this.closeIfEscapeKey);\n\n            if (this.props.toggleType === \"hover\") {\n                this.removeHoverListeners(this.tooltip!);\n            }\n        }\n\n        if (targetRef.current && prevProps.toggleType != this.props.toggleType) {\n            if (this.props.toggleType === \"hover\") {\n                this.addHoverListeners(targetRef.current);\n            } else if (prevProps.toggleType === \"hover\") {\n                this.removeHoverListeners(targetRef.current);\n            }\n        }\n    }\n\n    public componentWillUnmount(): void {\n        const { toggleType, targetRef } = this.props;\n\n        document.removeEventListener(\"mousedown\", this.closeIfOuterAction);\n        document.removeEventListener(\"keydown\", this.closeIfEscapeKey);\n\n        if (targetRef.current && toggleType === \"hover\") {\n            this.removeHoverListeners(targetRef.current);\n        }\n\n        clearTimeout(this.timeout);\n    }\n\n    private setTooltipRef = (node: HTMLDivElement | null) => {\n        const { toggleType } = this.props;\n\n        if (node && toggleType === \"hover\") {\n            this.addHoverListeners(node);\n        }\n\n        this.tooltip = node;\n    };\n\n    // Закрываем Tooltip при клике за его пределами.\n    private closeIfOuterAction = (event: Event) => {\n        const { targetRef } = this.props;\n        const { setTooltipOpen } = this.context;\n\n        if (targetRef.current && this.tooltip) {\n            const outOfTarget = !targetRef.current.contains(event.target as Node);\n            const outOfTooltip = !this.tooltip.contains(event.target as Node);\n\n            if (outOfTarget && outOfTooltip) {\n                setTooltipOpen(false);\n            }\n        }\n    };\n\n    // Закрываем Tooltip по нажатию Esc\n    private closeIfEscapeKey = (event: KeyboardEvent) => {\n        const key = event.code || event.keyCode;\n\n        if (isKey(key, \"ESCAPE\")) {\n            this.context.setTooltipOpen(false);\n        }\n    };\n\n    private addHoverListeners = (element: Element) => {\n        element.addEventListener(\"mouseenter\", this.handleMouseEnter);\n        element.addEventListener(\"mouseleave\", this.handleMouseLeave);\n    };\n\n    private removeHoverListeners = (element: Element) => {\n        element.removeEventListener(\"mouseenter\", this.handleMouseEnter);\n        element.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n    };\n\n    private handleMouseEnter = () => {\n        const { tooltipOpen, targetHoveredRef, setTooltipOpen } = this.context;\n\n        if (!tooltipOpen) {\n            setTooltipOpen(true);\n            targetHoveredRef.current = true;\n        }\n        clearTimeout(this.timeout);\n    };\n\n    private handleMouseLeave = () => {\n        const { setTooltipOpen } = this.context;\n\n        this.timeout = window.setTimeout(() => {\n            setTooltipOpen(false);\n        }, 500);\n    };\n}\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"TooltipDesktop.js","sources":["../../../../../src/components/Tooltip/components/desktop/TooltipDesktop.tsx"],"sourcesContent":["import React from \"react\";\nimport { TooltipDesktopBase } from \"@sberbusiness/triplex-next/components/Tooltip/components/desktop/components/TooltipDesktopBase\";\nimport { TooltipContext } from \"@sberbusiness/triplex-next/components/Tooltip/TootlipContext\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { ITooltipDesktopProps } from \"@sberbusiness/triplex-next/components/Tooltip/types\";\n\n/** Задержка закрытия подсказки после ухода курсора, мс. */\nconst HOVER_CLOSE_DELAY_MS = 500;\n\n/**\n * Десктоп версия компонента Tooltip.\n * Отвечает за подписки на события документа и целевого элемента: закрытие по клику вне,\n * по Escape и открытие/закрытие по наведению.\n */\nexport class TooltipDesktop extends React.Component<ITooltipDesktopProps> {\n    public static displayName = \"TooltipDesktop\";\n    public static contextType = TooltipContext;\n\n    declare context: React.ContextType<typeof TooltipContext>;\n\n    private tooltip: Element | null = null;\n    private timeout?: number;\n\n    public render(): JSX.Element {\n        // children и toggleType не должны попадать в DOM — исключаются из rest.\n        const { children, toggleType, ...rest } = this.props;\n\n        return <TooltipDesktopBase {...rest} setTooltipRef={this.setTooltipRef} />;\n    }\n\n    public componentDidMount(): void {\n        const { toggleType, targetRef, isOpen } = this.props;\n\n        // Если Tooltip открывается по клику, то должен уметь закрываться по клику вне и по Esc.\n        if (isOpen) {\n            document.addEventListener(\"mousedown\", this.closeIfOuterAction);\n            document.addEventListener(\"keydown\", this.closeIfEscapeKey);\n        }\n\n        if (targetRef.current && toggleType === \"hover\") {\n            this.addHoverListeners(targetRef.current);\n        }\n    }\n\n    public componentDidUpdate(prevProps: Readonly<ITooltipDesktopProps>): void {\n        const { targetRef } = this.props;\n        const isOpen = !prevProps.isOpen && this.props.isOpen;\n        const isClosed = prevProps.isOpen && !this.props.isOpen;\n\n        // Tooltip открылся.\n        if (isOpen) {\n            document.addEventListener(\"mousedown\", this.closeIfOuterAction);\n            document.addEventListener(\"keydown\", this.closeIfEscapeKey);\n        }\n\n        // Tooltip закрылся.\n        if (isClosed) {\n            document.removeEventListener(\"mousedown\", this.closeIfOuterAction);\n            document.removeEventListener(\"keydown\", this.closeIfEscapeKey);\n\n            if (this.props.toggleType === \"hover\" && this.tooltip) {\n                this.removeHoverListeners(this.tooltip);\n            }\n        }\n\n        // Смена toggleType на лету: обработчики нужно синхронизировать и на целевом элементе,\n        // и на самой подсказке — на неё их вешает setTooltipRef, который повторно не вызывается.\n        if (prevProps.toggleType !== this.props.toggleType) {\n            const elements = [targetRef.current, this.tooltip];\n\n            if (this.props.toggleType === \"hover\") {\n                elements.forEach((element) => element && this.addHoverListeners(element));\n            } else if (prevProps.toggleType === \"hover\") {\n                elements.forEach((element) => element && this.removeHoverListeners(element));\n            }\n        }\n    }\n\n    public componentWillUnmount(): void {\n        const { toggleType, targetRef } = this.props;\n\n        document.removeEventListener(\"mousedown\", this.closeIfOuterAction);\n        document.removeEventListener(\"keydown\", this.closeIfEscapeKey);\n\n        if (toggleType === \"hover\") {\n            if (targetRef.current) {\n                this.removeHoverListeners(targetRef.current);\n            }\n\n            // На саму подсказку обработчики вешает setTooltipRef — снимаем их симметрично,\n            // иначе при размонтировании открытой подсказки они остаются на ноде.\n            if (this.tooltip) {\n                this.removeHoverListeners(this.tooltip);\n            }\n        }\n\n        clearTimeout(this.timeout);\n    }\n\n    /** Сохранение ноды подсказки и подписка её на события наведения. */\n    private setTooltipRef = (node: HTMLDivElement | null) => {\n        const { toggleType } = this.props;\n\n        if (node && toggleType === \"hover\") {\n            this.addHoverListeners(node);\n        }\n\n        this.tooltip = node;\n    };\n\n    /** Закрытие подсказки при действии мышью за её пределами. */\n    private closeIfOuterAction = (event: Event) => {\n        const { targetRef } = this.props;\n        const { setTooltipOpen } = this.context;\n\n        if (targetRef.current && this.tooltip) {\n            const outOfTarget = !targetRef.current.contains(event.target as Node);\n            const outOfTooltip = !this.tooltip.contains(event.target as Node);\n\n            if (outOfTarget && outOfTooltip) {\n                setTooltipOpen(false);\n            }\n        }\n    };\n\n    /** Закрытие подсказки по нажатию Escape. */\n    private closeIfEscapeKey = (event: KeyboardEvent) => {\n        const key = event.code || event.keyCode;\n\n        if (isKey(key, \"ESCAPE\")) {\n            this.context.setTooltipOpen(false);\n        }\n    };\n\n    /** Подписка элемента на события наведения. */\n    private addHoverListeners = (element: Element) => {\n        element.addEventListener(\"mouseenter\", this.handleMouseEnter);\n        element.addEventListener(\"mouseleave\", this.handleMouseLeave);\n    };\n\n    /** Отписка элемента от событий наведения. */\n    private removeHoverListeners = (element: Element) => {\n        element.removeEventListener(\"mouseenter\", this.handleMouseEnter);\n        element.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n    };\n\n    /** Обработчик наведения курсора на целевой элемент или на саму подсказку. */\n    private handleMouseEnter = () => {\n        const { tooltipOpen, targetHoveredRef, setTooltipOpen } = this.context;\n\n        if (!tooltipOpen) {\n            setTooltipOpen(true);\n            targetHoveredRef.current = true;\n        }\n        clearTimeout(this.timeout);\n    };\n\n    /** Обработчик ухода курсора: подсказка закрывается с задержкой, чтобы курсор успел дойти до неё. */\n    private handleMouseLeave = () => {\n        const { setTooltipOpen } = this.context;\n\n        this.timeout = window.setTimeout(() => {\n            setTooltipOpen(false);\n        }, HOVER_CLOSE_DELAY_MS);\n    };\n}\n"],"names":["React"],"mappings":"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"}