@sberbusiness/triplex-next 1.47.0 → 1.48.0

package/components/Tabs/Tabs.js

@@ -1,5 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef } from "react";
+import React__default, { useState, useRef } from "react";
+import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
+import "../Button/Button.js";
+import "../Button/ButtonIcon.js";
+import { ButtonDropdown } from "../Button/ButtonDropdown.js";
+import "../Button/ButtonDropdownExtended.js";
+import { EButtonDotsTheme } from "../Button/enums.js";
 import { TabsExtended } from "../TabsExtended/TabsExtended.js";
 import "../TabsExtended/components/TabsExtendedContent.js";
 import "../TabsExtended/components/TabsExtendedDropdownWrapper.js";
@@ -8,22 +14,17 @@ import "../TabsExtended/components/TabsExtendedTabButton.js";
 import "../TabsExtended/components/TabsExtendedTabContext.js";
 import "../TabsExtended/components/TabsExtendedTabsWrapper.js";
 import { ETabsExtendedType } from "../TabsExtended/enums.js";
-import "../Button/Button.js";
-import "../Button/ButtonIcon.js";
-import { ButtonDropdown } from "../Button/ButtonDropdown.js";
-import "../Button/ButtonDropdownExtended.js";
-import { EButtonDotsTheme } from "../Button/enums.js";
+import { TabsExtendedContext } from "../TabsExtended/TabsExtendedContext.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { isKey } from "../../utils/keyboard.js";
-import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
-const tabsContent = "tabsContent__d5511ef8";
-const tabButtonDropdown = "tabButtonDropdown__42042748";
-const sm = "sm__1e326a09";
-const md = "md__be14b5cb";
-const lg = "lg__7ec9f913";
-const selected = "selected__ec685aa5";
-const type1 = "type1__3820b242";
-const type2 = "type2__a9c16d27";
+const tabsContent = "tabsContent__9ccd4634";
+const tabButtonDropdown = "tabButtonDropdown__a109ffa4";
+const sm = "sm__e51a9f27";
+const md = "md__4fd15062";
+const lg = "lg__b29fa92c";
+const selected = "selected__e64d86a5";
+const type1 = "type1__0bbe6507";
+const type2 = "type2__14269d03";
 const styles = {
   tabsContent,
   tabButtonDropdown,
@@ -42,90 +43,107 @@ const TYPE_TO_CLASS_NAME_MAP = {
   [ETabsExtendedType.TYPE_1]: styles.type1,
   [ETabsExtendedType.TYPE_2]: styles.type2
 };
-const Tabs = ({
-  buttonDropdownAttributes,
-  selectedId,
-  onSelectTab,
-  size = EComponentSize.MD,
-  tabs,
-  type = ETabsExtendedType.TYPE_1,
-  ...props
-}) => {
-  const [availableToFocusTabId, setAvailableToFocusTabId] = useState(selectedId || tabs[0].id);
-  const [prevAvailableToFocusTabId, setPrevAvailableToFocusTabId] = useState("");
-  const [nextAvailableToFocusTabId, setNextAvailableToFocusTabId] = useState("");
-  const prevTabRef = useRef(null);
-  const nextTabRef = useRef(null);
-  const getDropdownOptions = ({ dropdownItemsIds, onSelectTab: onSelectTab2 }) => tabs.filter((tab) => dropdownItemsIds.includes(tab.id)).map((tab) => ({ ...tab, onSelect: () => onSelectTab2(tab.id) }));
-  const renderTab = (item, index) => {
-    return /* @__PURE__ */ jsx(TabsExtended.Content.Tab, { ...item, children: ({ selected: selected2, isFirstInlineTab, isLastInlineTab }) => {
-      const tabIndex = availableToFocusTabId === item.id ? 0 : -1;
-      const getRef = () => {
-        let ref = void 0;
-        if (prevAvailableToFocusTabId === item.id) {
-          ref = prevTabRef;
-        } else if (nextAvailableToFocusTabId === item.id) {
-          ref = nextTabRef;
-        }
-        return ref;
-      };
-      return /* @__PURE__ */ jsx(
-        TabsExtended.Content.TabButton,
+const getFocusableTabId = (candidateTabIds, inlineTabIds) => candidateTabIds.find((id) => inlineTabIds.includes(id)) ?? inlineTabIds[0] ?? candidateTabIds[0];
+const Tabs = React__default.forwardRef(
+  ({
+    buttonDropdownAttributes,
+    selectedId,
+    onSelectTab,
+    size = EComponentSize.MD,
+    tabs,
+    type = ETabsExtendedType.TYPE_1,
+    ...props
+  }, ref) => {
+    var _a;
+    const [lastFocusedTab, setLastFocusedTab] = useState(null);
+    const [prevAvailableToFocusTabId, setPrevAvailableToFocusTabId] = useState("");
+    const [nextAvailableToFocusTabId, setNextAvailableToFocusTabId] = useState("");
+    const prevTabRef = useRef(null);
+    const nextTabRef = useRef(null);
+    const getDropdownOptions = ({
+      dropdownItemsIds,
+      onSelectTab: onSelectDropdownTab
+    }) => tabs.filter((tab) => dropdownItemsIds.includes(tab.id)).map((tab) => ({ ...tab, onSelect: () => onSelectDropdownTab(tab.id) }));
+    const focusCandidateTabIds = [
+      ...(lastFocusedTab == null ? void 0 : lastFocusedTab.selectedId) === selectedId ? [lastFocusedTab.tabId] : [],
+      selectedId || ((_a = tabs[0]) == null ? void 0 : _a.id) || ""
+    ];
+    const getInlineTabIds = (inlineItemsIds) => tabs.filter((tab) => inlineItemsIds.includes(tab.id)).map((tab) => tab.id);
+    const renderTab = (item, index) => {
+      const { label, showNotificationIcon, ...tabProps } = item;
+      return /* @__PURE__ */ jsx(TabsExtended.Content.Tab, { ...tabProps, children: ({ selected: selected2, isFirstInlineTab, isLastInlineTab }) => {
+        const getTabRef = () => {
+          if (prevAvailableToFocusTabId === item.id) {
+            return prevTabRef;
+          }
+          if (nextAvailableToFocusTabId === item.id) {
+            return nextTabRef;
+          }
+          return void 0;
+        };
+        const handleFocus = () => {
+          var _a2, _b;
+          setLastFocusedTab({ tabId: item.id, selectedId });
+          setPrevAvailableToFocusTabId(((_a2 = tabs[index - 1]) == null ? void 0 : _a2.id) ?? "");
+          setNextAvailableToFocusTabId(((_b = tabs[index + 1]) == null ? void 0 : _b.id) ?? "");
+        };
+        const handleKeyDown = (event) => {
+          var _a2;
+          const { key } = event;
+          const isArrowLeft = isKey(key, "ARROW_LEFT");
+          if (!isArrowLeft && !isKey(key, "ARROW_RIGHT")) {
+            return;
+          }
+          const isEdgeTab = isArrowLeft ? isFirstInlineTab : isLastInlineTab;
+          const siblingTab = isEdgeTab ? void 0 : tabs[isArrowLeft ? index - 1 : index + 1];
+          if (siblingTab) {
+            (_a2 = (isArrowLeft ? prevTabRef : nextTabRef).current) == null ? void 0 : _a2.focus();
+          }
+          event.preventDefault();
+        };
+        return (
+          // Распределение табов по строке и выпадающему списку знает только TabsExtended.
+          /* @__PURE__ */ jsx(TabsExtendedContext.Consumer, { children: ({ inlineItemsIds }) => /* @__PURE__ */ jsx(
+            TabsExtended.Content.TabButton,
+            {
+              selected: selected2,
+              tabIndex: getFocusableTabId(focusCandidateTabIds, getInlineTabIds(inlineItemsIds)) === item.id ? 0 : -1,
+              ref: getTabRef(),
+              size,
+              showNotificationIcon,
+              onFocus: handleFocus,
+              onKeyDown: handleKeyDown,
+              children: label
+            }
+          ) })
+        );
+      } }, item.id);
+    };
+    return /* @__PURE__ */ jsx(TabsExtended, { ...props, selectedId, onSelectTab, type, ref, children: /* @__PURE__ */ jsxs(TabsExtended.Content, { className: styles.tabsContent, size, children: [
+      /* @__PURE__ */ jsx(TabsExtended.Content.TabsWrapper, { children: tabs.map(renderTab) }),
+      /* @__PURE__ */ jsx(TabsExtended.Content.DropdownWrapper, { children: ({ dropdownItemsIds, onSelectTab: onSelectDropdownTab }) => /* @__PURE__ */ jsx(
+        ButtonDropdown,
         {
-          selected: selected2,
-          tabIndex,
-          ref: getRef(),
+          theme: TYPE_TO_BUTTON_DOTS_THEME_MAP[type],
           size,
-          showNotificationIcon: item.showNotificationIcon,
-          onFocus: () => {
-            setPrevAvailableToFocusTabId(tabs[index - 1] ? tabs[index - 1].id : "");
-            setNextAvailableToFocusTabId(tabs[index + 1] ? tabs[index + 1].id : "");
-          },
-          onKeyDown: (event) => {
-            var _a, _b;
-            const { key } = event;
-            if (isKey(key, "ARROW_LEFT")) {
-              if (!isFirstInlineTab) {
-                setAvailableToFocusTabId(tabs[index - 1].id);
-                (_a = prevTabRef.current) == null ? void 0 : _a.focus();
-              }
-              event.preventDefault();
-            } else if (isKey(key, "ARROW_RIGHT")) {
-              if (!isLastInlineTab) {
-                setAvailableToFocusTabId(tabs[index + 1].id);
-                (_b = nextTabRef.current) == null ? void 0 : _b.focus();
-              }
-              event.preventDefault();
-            }
-          },
-          children: item.label
+          options: getDropdownOptions({ dropdownItemsIds, onSelectTab: onSelectDropdownTab }),
+          selected: tabs.find((tab) => tab.id === selectedId),
+          buttonAttributes: {
+            ...buttonDropdownAttributes,
+            className: clsx(
+              styles.tabButtonDropdown,
+              styles[size],
+              TYPE_TO_CLASS_NAME_MAP[type],
+              { [styles.selected]: dropdownItemsIds.includes(selectedId) },
+              buttonDropdownAttributes == null ? void 0 : buttonDropdownAttributes.className
+            )
+          }
         }
-      );
-    } }, index);
-  };
-  return /* @__PURE__ */ jsx(TabsExtended, { ...props, selectedId, onSelectTab, type, children: /* @__PURE__ */ jsxs(TabsExtended.Content, { className: styles.tabsContent, size, children: [
-    /* @__PURE__ */ jsx(TabsExtended.Content.TabsWrapper, { children: tabs.map(renderTab) }),
-    /* @__PURE__ */ jsx(TabsExtended.Content.DropdownWrapper, { children: ({ dropdownItemsIds, onSelectTab: onSelectTab2 }) => /* @__PURE__ */ jsx(
-      ButtonDropdown,
-      {
-        theme: TYPE_TO_BUTTON_DOTS_THEME_MAP[type],
-        size,
-        options: getDropdownOptions({ dropdownItemsIds, onSelectTab: onSelectTab2 }),
-        selected: tabs.filter((tab) => tab.id === selectedId)[0],
-        buttonAttributes: {
-          ...buttonDropdownAttributes,
-          className: clsx(
-            styles.tabButtonDropdown,
-            styles[size],
-            TYPE_TO_CLASS_NAME_MAP[type],
-            { [styles.selected]: dropdownItemsIds.includes(selectedId) },
-            buttonDropdownAttributes == null ? void 0 : buttonDropdownAttributes.className
-          )
-        }
-      }
-    ) })
-  ] }) });
-};
+      ) })
+    ] }) });
+  }
+);
+Tabs.displayName = "Tabs";
 export {
   Tabs
 };

package/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { ETabsExtendedType, TabsExtended } from \"@sberbusiness/triplex-next/components/TabsExtended\";\nimport { ITabsExtendedDropdownWrapperProvideProps } from \"@sberbusiness/triplex-next/components/TabsExtended\";\nimport { ButtonDropdown } from \"@sberbusiness/triplex-next/components/Button\";\nimport { EButtonDotsTheme } from \"@sberbusiness/triplex-next/components/Button\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { ITabsExtendedTabProps, ITabsExtendedProps } from \"@sberbusiness/triplex-next/components/TabsExtended\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport styles from \"./styles/Tabs.module.less\";\nimport clsx from \"clsx\";\n\nexport interface ITabsItem extends Omit<ITabsExtendedTabProps, \"children\" | \"onSelect\"> {\n    label: React.ReactNode;\n    showNotificationIcon?: boolean;\n}\n\nexport interface ITabsProps extends ITabsExtendedProps {\n    /** HTML-атрибуты dropdown-кнопки. */\n    buttonDropdownAttributes?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n    children?: never;\n    /** Обработчик выбора таба. */\n    onSelectTab: (selectedId: string) => void;\n    /** Размер компонента. */\n    size?: EComponentSize;\n    /** Массив табов. */\n    tabs: Array<ITabsItem>;\n}\n\nconst TYPE_TO_BUTTON_DOTS_THEME_MAP: Record<ETabsExtendedType, EButtonDotsTheme> = {\n    [ETabsExtendedType.TYPE_1]: EButtonDotsTheme.DOTS_SECONDARY,\n    [ETabsExtendedType.TYPE_2]: EButtonDotsTheme.DOTS_SECONDARY_LIGHT,\n};\n\nconst TYPE_TO_CLASS_NAME_MAP: Record<ETabsExtendedType, string> = {\n    [ETabsExtendedType.TYPE_1]: styles.type1,\n    [ETabsExtendedType.TYPE_2]: styles.type2,\n};\n\n/** Компонент Tabs. */\nexport const Tabs: React.FC<ITabsProps> = ({\n    buttonDropdownAttributes,\n    selectedId,\n    onSelectTab,\n    size = EComponentSize.MD,\n    tabs,\n    type = ETabsExtendedType.TYPE_1,\n    ...props\n}) => {\n    // Id таба с tabIndex = 0;\n    const [availableToFocusTabId, setAvailableToFocusTabId] = useState(selectedId || tabs[0].id);\n    // Id таба, предшествующий табу с tabIndex = 0;\n    const [prevAvailableToFocusTabId, setPrevAvailableToFocusTabId] = useState(\"\");\n    // Id таба, следующего за табом с tabIndex = 0;\n    const [nextAvailableToFocusTabId, setNextAvailableToFocusTabId] = useState(\"\");\n    // Ref таба, предшествующий табу с tabIndex = 0;\n    const prevTabRef = useRef<HTMLButtonElement>(null);\n    // Ref таба, следующего за табом с tabIndex = 0;\n    const nextTabRef = useRef<HTMLButtonElement>(null);\n\n    const getDropdownOptions = ({ dropdownItemsIds, onSelectTab }: ITabsExtendedDropdownWrapperProvideProps) =>\n        tabs\n            .filter((tab) => dropdownItemsIds.includes(tab.id))\n            .map((tab) => ({ ...tab, onSelect: () => onSelectTab(tab.id) }));\n\n    const renderTab = (item: ITabsItem, index: number) => {\n        return (\n            <TabsExtended.Content.Tab key={index} {...item}>\n                {({ selected, isFirstInlineTab, isLastInlineTab }) => {\n                    const tabIndex = availableToFocusTabId === item.id ? 0 : -1;\n\n                    const getRef = () => {\n                        let ref = undefined;\n\n                        if (prevAvailableToFocusTabId === item.id) {\n                            ref = prevTabRef;\n                        } else if (nextAvailableToFocusTabId === item.id) {\n                            ref = nextTabRef;\n                        }\n\n                        return ref;\n                    };\n\n                    return (\n                        <TabsExtended.Content.TabButton\n                            selected={selected}\n                            tabIndex={tabIndex}\n                            /* Установка ref для предыдущего или следующего за фокусируемым табом элемента, */\n                            ref={getRef()}\n                            size={size}\n                            showNotificationIcon={item.showNotificationIcon}\n                            onFocus={() => {\n                                setPrevAvailableToFocusTabId(tabs[index - 1] ? tabs[index - 1].id : \"\");\n                                setNextAvailableToFocusTabId(tabs[index + 1] ? tabs[index + 1].id : \"\");\n                            }}\n                            onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n                                const { key } = event;\n\n                                if (isKey(key, \"ARROW_LEFT\")) {\n                                    // Не первый таб.\n                                    if (!isFirstInlineTab) {\n                                        setAvailableToFocusTabId(tabs[index - 1].id);\n                                        prevTabRef.current?.focus();\n                                    }\n\n                                    // Предотвращение скролла.\n                                    event.preventDefault();\n                                } else if (isKey(key, \"ARROW_RIGHT\")) {\n                                    // Не последний таб в строке.\n                                    if (!isLastInlineTab) {\n                                        setAvailableToFocusTabId(tabs[index + 1].id);\n                                        nextTabRef.current?.focus();\n                                    }\n\n                                    // Предотвращение скролла.\n                                    event.preventDefault();\n                                }\n                            }}\n                        >\n                            {item.label}\n                        </TabsExtended.Content.TabButton>\n                    );\n                }}\n            </TabsExtended.Content.Tab>\n        );\n    };\n\n    return (\n        <TabsExtended {...props} selectedId={selectedId} onSelectTab={onSelectTab} type={type}>\n            <TabsExtended.Content className={styles.tabsContent} size={size}>\n                <TabsExtended.Content.TabsWrapper>{tabs.map(renderTab)}</TabsExtended.Content.TabsWrapper>\n\n                <TabsExtended.Content.DropdownWrapper>\n                    {({ dropdownItemsIds, onSelectTab }) => (\n                        <ButtonDropdown\n                            theme={TYPE_TO_BUTTON_DOTS_THEME_MAP[type]}\n                            size={size}\n                            options={getDropdownOptions({ dropdownItemsIds, onSelectTab })}\n                            selected={tabs.filter((tab) => tab.id === selectedId)[0]}\n                            buttonAttributes={{\n                                ...buttonDropdownAttributes,\n                                className: clsx(\n                                    styles.tabButtonDropdown,\n                                    styles[size],\n                                    TYPE_TO_CLASS_NAME_MAP[type],\n                                    { [styles.selected]: dropdownItemsIds.includes(selectedId) },\n                                    buttonDropdownAttributes?.className,\n                                ),\n                            }}\n                        />\n                    )}\n                </TabsExtended.Content.DropdownWrapper>\n            </TabsExtended.Content>\n        </TabsExtended>\n    );\n};\n"],"names":["onSelectTab","selected"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { ButtonDropdown, EButtonDotsTheme } from \"@sberbusiness/triplex-next/components/Button\";\nimport {\n    ETabsExtendedType,\n    ITabsExtendedDropdownWrapperProvideProps,\n    ITabsExtendedProps,\n    ITabsExtendedTabProps,\n    TabsExtended,\n} from \"@sberbusiness/triplex-next/components/TabsExtended\";\nimport { TabsExtendedContext } from \"@sberbusiness/triplex-next/components/TabsExtended/TabsExtendedContext\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport styles from \"./styles/Tabs.module.less\";\n\n/** Описание одного таба. Неизвестные компоненту атрибуты уходят на контейнер таба. */\nexport interface ITabsItem extends Omit<ITabsExtendedTabProps, \"children\" | \"onSelect\"> {\n    /** Содержимое таба: текст или произвольная разметка. */\n    label: React.ReactNode;\n    /** Значок новых уведомлений на табе. */\n    showNotificationIcon?: boolean;\n}\n\n/** Свойства компонента Tabs. */\nexport interface ITabsProps extends ITabsExtendedProps {\n    /** HTML-атрибуты dropdown-кнопки. */\n    buttonDropdownAttributes?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n    /** Содержимое задаётся массивом tabs, children не поддерживается. */\n    children?: never;\n    /** Обработчик выбора таба. Принимает id выбираемого таба. */\n    onSelectTab: (selectedId: string) => void;\n    /** Размер компонента. По умолчанию EComponentSize.MD. */\n    size?: EComponentSize;\n    /** Массив табов. */\n    tabs: Array<ITabsItem>;\n}\n\n/** Тема кнопки выпадающего списка для каждого типа табов. */\nconst TYPE_TO_BUTTON_DOTS_THEME_MAP: Record<ETabsExtendedType, EButtonDotsTheme> = {\n    [ETabsExtendedType.TYPE_1]: EButtonDotsTheme.DOTS_SECONDARY,\n    [ETabsExtendedType.TYPE_2]: EButtonDotsTheme.DOTS_SECONDARY_LIGHT,\n};\n\n/** CSS-класс кнопки выпадающего списка для каждого типа табов. */\nconst TYPE_TO_CLASS_NAME_MAP: Record<ETabsExtendedType, string> = {\n    [ETabsExtendedType.TYPE_1]: styles.type1,\n    [ETabsExtendedType.TYPE_2]: styles.type2,\n};\n\n/** Таб, последним получивший фокус, и выбранный таб на тот момент. */\ninterface ILastFocusedTab {\n    /** Id таба, получившего фокус. */\n    tabId: string;\n    /** Id таба, выбранного в момент получения фокуса. */\n    selectedId: string;\n}\n\n/**\n * Возвращает id таба, который получает tabIndex = 0: первый из кандидатов, отображаемый в строке, иначе первый таб строки.\n * Таб из выпадающего списка скрыт — с ним строка табов выпала бы из обхода по Tab.\n * Пока табы не распределены по строке и списку (inlineTabIds пуст), возвращается первый кандидат.\n * @param candidateTabIds Кандидаты в порядке приоритета. Непустой массив.\n * @param inlineTabIds Id табов, отображаемых в строке, в порядке массива tabs.\n */\nconst getFocusableTabId = (candidateTabIds: string[], inlineTabIds: string[]) =>\n    candidateTabIds.find((id) => inlineTabIds.includes(id)) ?? inlineTabIds[0] ?? candidateTabIds[0];\n\n/**\n * Компонент Tabs.\n * Готовые табы поверх TabsExtended: рендерит табы по массиву, переносит не поместившиеся в выпадающий список\n * и добавляет навигацию стрелками.\n */\nexport const Tabs = React.forwardRef<HTMLDivElement, ITabsProps>(\n    (\n        {\n            buttonDropdownAttributes,\n            selectedId,\n            onSelectTab,\n            size = EComponentSize.MD,\n            tabs,\n            type = ETabsExtendedType.TYPE_1,\n            ...props\n        },\n        ref,\n    ) => {\n        /** Таб, последним получивший фокус. Запоминается вместе с выбранным табом, чтобы смена выбора сбрасывала его. */\n        const [lastFocusedTab, setLastFocusedTab] = useState<ILastFocusedTab | null>(null);\n        /** Id таба, предшествующего табу в фокусе. */\n        const [prevAvailableToFocusTabId, setPrevAvailableToFocusTabId] = useState(\"\");\n        /** Id таба, следующего за табом в фокусе. */\n        const [nextAvailableToFocusTabId, setNextAvailableToFocusTabId] = useState(\"\");\n        /** Ref таба, предшествующего табу в фокусе. */\n        const prevTabRef = useRef<HTMLButtonElement>(null);\n        /** Ref таба, следующего за табом в фокусе. */\n        const nextTabRef = useRef<HTMLButtonElement>(null);\n\n        /** Опции выпадающего списка — табы, не поместившиеся в строку. */\n        const getDropdownOptions = ({\n            dropdownItemsIds,\n            onSelectTab: onSelectDropdownTab,\n        }: ITabsExtendedDropdownWrapperProvideProps) =>\n            tabs\n                .filter((tab) => dropdownItemsIds.includes(tab.id))\n                .map((tab) => ({ ...tab, onSelect: () => onSelectDropdownTab(tab.id) }));\n\n        /**\n         * Кандидаты на таб-порядок страницы: в него попадает только один таб, остальные обходятся стрелками.\n         * Первый кандидат — таб, последним получивший фокус, пока выбран тот же таб, что и в момент фокуса: смена выбора,\n         * в том числе извне через selectedId, его сбрасывает. Второй — выбранный таб (или первый, если selectedId пуст).\n         */\n        const focusCandidateTabIds = [\n            ...(lastFocusedTab?.selectedId === selectedId ? [lastFocusedTab.tabId] : []),\n            selectedId || tabs[0]?.id || \"\",\n        ];\n\n        /**\n         * Id табов, отображаемых в строке. Сверяются с текущим tabs: TabsExtended пересчитывает раскладку только\n         * при смене числа табов или ширины, и после замены tabs на массив той же длины в inlineItemsIds остаются старые id.\n         */\n        const getInlineTabIds = (inlineItemsIds: string[]) =>\n            tabs.filter((tab) => inlineItemsIds.includes(tab.id)).map((tab) => tab.id);\n\n        const renderTab = (item: ITabsItem, index: number) => {\n            // label и showNotificationIcon — props кнопки таба, на контейнер таба (span) они уходить не должны.\n            const { label, showNotificationIcon, ...tabProps } = item;\n\n            return (\n                <TabsExtended.Content.Tab key={item.id} {...tabProps}>\n                    {({ selected, isFirstInlineTab, isLastInlineTab }) => {\n                        /** Ref ставится только соседям фокусируемого таба — по нему стрелки переносят фокус. */\n                        const getTabRef = () => {\n                            if (prevAvailableToFocusTabId === item.id) {\n                                return prevTabRef;\n                            }\n\n                            if (nextAvailableToFocusTabId === item.id) {\n                                return nextTabRef;\n                            }\n\n                            return undefined;\n                        };\n\n                        /**\n                         * Таб, получивший фокус (стрелкой или кликом), становится единственным табом с tabIndex = 0.\n                         * Его соседи запоминаются заранее: стрелка переносит фокус по ref, а не поиском в DOM.\n                         */\n                        const handleFocus = () => {\n                            setLastFocusedTab({ tabId: item.id, selectedId });\n                            setPrevAvailableToFocusTabId(tabs[index - 1]?.id ?? \"\");\n                            setNextAvailableToFocusTabId(tabs[index + 1]?.id ?? \"\");\n                        };\n\n                        const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n                            const { key } = event;\n                            const isArrowLeft = isKey(key, \"ARROW_LEFT\");\n\n                            if (!isArrowLeft && !isKey(key, \"ARROW_RIGHT\")) {\n                                return;\n                            }\n\n                            // На краях строки фокус остаётся на месте: влево с первого таба и вправо с последнего он не уходит.\n                            const isEdgeTab = isArrowLeft ? isFirstInlineTab : isLastInlineTab;\n                            const siblingTab = isEdgeTab ? undefined : tabs[isArrowLeft ? index - 1 : index + 1];\n\n                            // tabIndex = 0 переходит на соседа в его обработчике фокуса.\n                            if (siblingTab) {\n                                (isArrowLeft ? prevTabRef : nextTabRef).current?.focus();\n                            }\n\n                            // Предотвращение скролла.\n                            event.preventDefault();\n                        };\n\n                        return (\n                            // Распределение табов по строке и выпадающему списку знает только TabsExtended.\n                            <TabsExtendedContext.Consumer>\n                                {({ inlineItemsIds }) => (\n                                    <TabsExtended.Content.TabButton\n                                        selected={selected}\n                                        tabIndex={\n                                            getFocusableTabId(focusCandidateTabIds, getInlineTabIds(inlineItemsIds)) ===\n                                            item.id\n                                                ? 0\n                                                : -1\n                                        }\n                                        ref={getTabRef()}\n                                        size={size}\n                                        showNotificationIcon={showNotificationIcon}\n                                        onFocus={handleFocus}\n                                        onKeyDown={handleKeyDown}\n                                    >\n                                        {label}\n                                    </TabsExtended.Content.TabButton>\n                                )}\n                            </TabsExtendedContext.Consumer>\n                        );\n                    }}\n                </TabsExtended.Content.Tab>\n            );\n        };\n\n        return (\n            <TabsExtended {...props} selectedId={selectedId} onSelectTab={onSelectTab} type={type} ref={ref}>\n                <TabsExtended.Content className={styles.tabsContent} size={size}>\n                    <TabsExtended.Content.TabsWrapper>{tabs.map(renderTab)}</TabsExtended.Content.TabsWrapper>\n\n                    <TabsExtended.Content.DropdownWrapper>\n                        {({ dropdownItemsIds, onSelectTab: onSelectDropdownTab }) => (\n                            <ButtonDropdown\n                                theme={TYPE_TO_BUTTON_DOTS_THEME_MAP[type]}\n                                size={size}\n                                options={getDropdownOptions({ dropdownItemsIds, onSelectTab: onSelectDropdownTab })}\n                                selected={tabs.find((tab) => tab.id === selectedId)}\n                                buttonAttributes={{\n                                    ...buttonDropdownAttributes,\n                                    className: clsx(\n                                        styles.tabButtonDropdown,\n                                        styles[size],\n                                        TYPE_TO_CLASS_NAME_MAP[type],\n                                        { [styles.selected]: dropdownItemsIds.includes(selectedId) },\n                                        buttonDropdownAttributes?.className,\n                                    ),\n                                }}\n                            />\n                        )}\n                    </TabsExtended.Content.DropdownWrapper>\n                </TabsExtended.Content>\n            </TabsExtended>\n        );\n    },\n);\n\nTabs.displayName = \"Tabs\";\n"],"names":["React","selected","_a"],"mappings":"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"}

package/components/TabsExtended/TabsExtended.js

@@ -4,8 +4,8 @@ import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { TabsExtendedContext } from "./TabsExtendedContext.js";
 import { TabsExtendedContent } from "./components/TabsExtendedContent.js";
 import { ETabsExtendedType } from "./enums.js";
-import { T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/utils-tt7vKg1E.js";
-import { s as styles } from "../../chunks/TabsExtended.module-DPptPKmZ.js";
+import { T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/utils-Dfb5lzLn.js";
+import { s as styles } from "../../chunks/TabsExtended.module-Bv7Xqx7g.js";
 import "./components/TabsExtendedDropdownWrapper.js";
 import "./components/TabsExtendedTab.js";
 import "./components/TabsExtendedTabButton.js";

package/components/TabsExtended/components/TabsExtendedContent.js

@@ -7,7 +7,7 @@ import { TabsExtendedTabButton } from "./TabsExtendedTabButton.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { TabsExtendedDropdownWrapper } from "./TabsExtendedDropdownWrapper.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-DPptPKmZ.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-Bv7Xqx7g.js";
 import "./TabsExtendedTabContext.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const TabsExtendedContent = Object.assign(

package/components/TabsExtended/components/TabsExtendedDropdownWrapper.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React__default, { useContext, useCallback } from "react";
 import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-DPptPKmZ.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-Bv7Xqx7g.js";
 const TabsExtendedDropdownWrapper = React__default.forwardRef(
   ({ children, className, ...htmlDivAttributes }, ref) => {
     const { dropdownItemsIds, onSelectTab, dropdownRef } = useContext(TabsExtendedContext);

package/components/TabsExtended/components/TabsExtendedTab.js

@@ -3,7 +3,7 @@ import React__default, { useContext } from "react";
 import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { TabsExtendedTabContext } from "./TabsExtendedTabContext.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-DPptPKmZ.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-Bv7Xqx7g.js";
 const TabsExtendedTab = React__default.forwardRef(
   ({ children, id, className, onClick, ...htmlSpanAttributes }, ref) => {
     const { dropdownItemsIds, inlineItemsIds, selectedId, onSelectTab } = useContext(TabsExtendedContext);

package/components/TabsExtended/components/TabsExtendedTabButton.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { useContext } from "react";
 import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
-import { s as styles, T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP, a as TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP } from "../../../chunks/utils-tt7vKg1E.js";
+import { s as styles, T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP, a as TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP } from "../../../chunks/utils-Dfb5lzLn.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { EFontType } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";

package/components/TabsExtended/components/TabsExtendedTabsWrapper.js

@@ -3,7 +3,7 @@ import React__default, { useContext, useState, useRef, useCallback, useLayoutEff
 import { g as useResizeDetector, c as clsx, h as pickBy } from "../../../chunks/vendor-CUIykw0y.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { TabsExtendedTabContext } from "./TabsExtendedTabContext.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-DPptPKmZ.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-Bv7Xqx7g.js";
 const TAB_ITEM_ID_ATTRIBUTE = "data-tab-item-id";
 const TABS_CONTAINER_RIGHT_OFFSET = 4;
 const RESIZE_REFRESH_RATE_MS = 150;

package/components/TabsExtended/utils.js

@@ -1,7 +1,7 @@
 import "./enums.js";
 import "../../enums/EComponentSize.js";
 import "../Typography/enums.js";
-import { a, T } from "../../chunks/utils-tt7vKg1E.js";
+import { a, T } from "../../chunks/utils-Dfb5lzLn.js";
 export {
   a as TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP,
   T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP

package/components/TabsLine/TabsLine.js

@@ -5,7 +5,7 @@ import { MobileView } from "../MobileView/MobileView.js";
 import "../MobileView/useMobileView.js";
 import { TabsLineDesktop } from "./components/TabsLineDesktop.js";
 import { TabsLineMobile } from "./components/TabsLineMobile.js";
-import { s as styles } from "../../chunks/TabsLine.module-BOD6aGpU.js";
+import { s as styles } from "../../chunks/TabsLine.module-v6dP7lY_.js";
 import "./components/TabsLineDropdown.js";
 import "./components/TabsLineItem.js";
 const TabsLine = React__default.forwardRef(

package/components/TabsLine/components/TabsLineDesktop.js

@@ -5,7 +5,7 @@ import { isKey } from "../../../utils/keyboard.js";
 import { splitTabsByMaxVisible } from "../utils.js";
 import { TabsLineDropdown } from "./TabsLineDropdown.js";
 import { TabsLineItem } from "./TabsLineItem.js";
-import { s as styles } from "../../../chunks/TabsLine.module-BOD6aGpU.js";
+import { s as styles } from "../../../chunks/TabsLine.module-v6dP7lY_.js";
 const TabsLineDesktop = React__default.forwardRef(
   ({
     className,

package/components/TabsLine/components/TabsLineDropdown.js

@@ -8,7 +8,7 @@ import { isKey } from "../../../utils/keyboard.js";
 import { DropdownListContext } from "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import { DropdownList } from "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-B9cIx_8A.js";
+import "../../../chunks/DropdownListItem-cXbzcYKR.js";
 import { EDropdownWidth } from "../../Dropdown/desktop/enums.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
@@ -28,7 +28,7 @@ import "../../Typography/CodeText.js";
 import { Text } from "../../Typography/Text.js";
 import "../../Typography/Title.js";
 import { tabsLineSizeToTextSizeMap } from "../utils.js";
-import { s as styles } from "../../../chunks/TabsLine.module-BOD6aGpU.js";
+import { s as styles } from "../../../chunks/TabsLine.module-v6dP7lY_.js";
 const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
 const TabsLineDropdown = React__default.forwardRef((props, ref) => {
   const {

package/components/TabsLine/components/TabsLineItem.js

@@ -7,7 +7,7 @@ import { Badge } from "../../Badge/Badge.js";
 import { Text } from "../../Typography/Text.js";
 import { EFontType } from "../../Typography/enums.js";
 import { tabsLineSizeToTextSizeMap } from "../utils.js";
-import { s as styles } from "../../../chunks/TabsLine.module-BOD6aGpU.js";
+import { s as styles } from "../../../chunks/TabsLine.module-v6dP7lY_.js";
 const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
 const TabsLineItem = React__default.forwardRef(
   ({

package/components/TabsLine/components/TabsLineMobile.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
 import { TabsLineItem } from "./TabsLineItem.js";
-const tabsLineMobileWrapper = "tabsLineMobileWrapper__ff018c0e";
-const tabsLineMobile = "tabsLineMobile__be5842fe";
+const tabsLineMobileWrapper = "tabsLineMobileWrapper__54444894";
+const tabsLineMobile = "tabsLineMobile__18d13a5a";
 const styles = {
   tabsLineMobileWrapper,
   tabsLineMobile

package/components/Tag/Tag.js

@@ -7,11 +7,11 @@ import { ETextSize, EFontType } from "../Typography/enums.js";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
-const tag = "tag__7b8212ff";
-const sm = "sm__ae1570eb";
-const md = "md__5e08aca1";
-const lg = "lg__9a0960b3";
-const content = "content__7d07379e";
+const tag = "tag__ff44f083";
+const sm = "sm__cf0eea1c";
+const md = "md__84b3507f";
+const lg = "lg__c05c7cbb";
+const content = "content__19ea2ccd";
 const styles = {
   tag,
   sm,

package/components/TagColor/TagColor.js

@@ -3,21 +3,21 @@ import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
 import { ETagColorStatus } from "./enums.js";
-const tagColor = "tagColor__f0dbbcc7";
-const sm = "sm__5e763fc5";
-const md = "md__62ba51d3";
-const lg = "lg__b7d7b970";
-const success = "success__17fe9ad1";
-const info = "info__487df36c";
-const warning = "warning__1f7b02f0";
-const error = "error__e8aadfa0";
-const content = "content__f02572e0";
+const tagColor = "tagColor__6591fd92";
+const sm = "sm__97ec1891";
+const md = "md__8f4409eb";
+const lg = "lg__d4449009";
+const success = "success__cfaf4a93";
+const info = "info__77671a38";
+const warning = "warning__f4d4b039";
+const error = "error__3d512f80";
+const content = "content__40189810";
 const styles = {
   tagColor,
   sm,
   md,
   lg,
-  "default": "default__c10543dd",
+  "default": "default__5648b721",
   success,
   info,
   warning,

package/components/TagColor/TagColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagColor.js","sources":["../../../src/components/TagColor/TagColor.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { ITagColorProps } from \"@sberbusiness/triplex-next/components/TagColor/types\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/TagColor.module.less\";\nimport { ETagColorStatus } from \"./enums\";\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\nconst STATUS_TO_CLASS_NAME_MAP = {\n    [ETagColorStatus.DEFAULT]: styles.default,\n    [ETagColorStatus.SUCCESS]: styles.success,\n    [ETagColorStatus.INFO]: styles.info,\n    [ETagColorStatus.WARNING]: styles.warning,\n    [ETagColorStatus.ERROR]: styles.error,\n};\n\n/** Компонент, который используется для маркировки и классификации. */\nexport const TagColor = React.forwardRef<HTMLSpanElement, ITagColorProps>(\n    ({ children, className, size, status = ETagColorStatus.DEFAULT, ...restProps }, ref) => (\n        <span\n            className={clsx(styles.tagColor, SIZE_TO_CLASS_NAME_MAP[size], STATUS_TO_CLASS_NAME_MAP[status], className)}\n            {...restProps}\n            ref={ref}\n        >\n            <span className={styles.content}>{children}</span>\n        </span>\n    ),\n);\n\nTagColor.displayName = \"TagColor\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAAyB,yBAAyB,MAAM;AAE9D,MAAM,2BAA2B;AAAA,EAC7B,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,IAAI,GAAG,OAAO;AAAA,EAC/B,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,KAAK,GAAG,OAAO;AACpC;AAGO,MAAM,WAAWA,eAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,WAAW,MAAM,SAAS,gBAAgB,SAAS,GAAG,aAAa,QAC5E;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,UAAU,uBAAuB,IAAI,GAAG,yBAAyB,MAAM,GAAG,SAAS;AAAA,MACzG,GAAG;AAAA,MACJ;AAAA,MAEA,UAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,SAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD;AAEA,SAAS,cAAc;"}
+{"version":3,"file":"TagColor.js","sources":["../../../src/components/TagColor/TagColor.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { ITagColorProps } from \"@sberbusiness/triplex-next/components/TagColor/types\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/TagColor.module.less\";\nimport { ETagColorStatus } from \"./enums\";\n\n/** Соответствие размера тега имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Соответствие статуса тега имени класса. */\nconst STATUS_TO_CLASS_NAME_MAP: Record<ETagColorStatus, string> = {\n    [ETagColorStatus.DEFAULT]: styles.default,\n    [ETagColorStatus.SUCCESS]: styles.success,\n    [ETagColorStatus.INFO]: styles.info,\n    [ETagColorStatus.WARNING]: styles.warning,\n    [ETagColorStatus.ERROR]: styles.error,\n};\n\n/**\n * Компонент, который используется для маркировки и классификации.\n *\n * Неинтерактивный: рендерит `span` без обработчиков и фокуса, цвет фона задаёт `status`.\n */\nexport const TagColor = React.forwardRef<HTMLSpanElement, ITagColorProps>(\n    ({ children, className, size, status = ETagColorStatus.DEFAULT, ...restProps }, ref) => (\n        <span\n            className={clsx(styles.tagColor, SIZE_TO_CLASS_NAME_MAP[size], STATUS_TO_CLASS_NAME_MAP[status], className)}\n            {...restProps}\n            ref={ref}\n        >\n            <span className={styles.content}>{children}</span>\n        </span>\n    ),\n);\n\nTagColor.displayName = \"TagColor\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,yBAAyB,yBAAyB,MAAM;AAG9D,MAAM,2BAA4D;AAAA,EAC9D,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,IAAI,GAAG,OAAO;AAAA,EAC/B,CAAC,gBAAgB,OAAO,GAAG,OAAO;AAAA,EAClC,CAAC,gBAAgB,KAAK,GAAG,OAAO;AACpC;AAOO,MAAM,WAAWA,eAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,WAAW,MAAM,SAAS,gBAAgB,SAAS,GAAG,aAAa,QAC5E;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,UAAU,uBAAuB,IAAI,GAAG,yBAAyB,MAAM,GAAG,SAAS;AAAA,MACzG,GAAG;AAAA,MACJ;AAAA,MAEA,UAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,SAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvD;AAEA,SAAS,cAAc;"}

package/components/TagColor/enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"enums.js","sources":["../../../src/components/TagColor/enums.ts"],"sourcesContent":["export enum ETagColorStatus {\n    DEFAULT = \"default\",\n    SUCCESS = \"success\",\n    INFO = \"info\",\n    WARNING = \"warning\",\n    ERROR = \"error\",\n}\n"],"names":["ETagColorStatus"],"mappings":"AAAO,IAAK,oCAAAA,qBAAL;AACHA,mBAAA,SAAA,IAAU;AACVA,mBAAA,SAAA,IAAU;AACVA,mBAAA,MAAA,IAAO;AACPA,mBAAA,SAAA,IAAU;AACVA,mBAAA,OAAA,IAAQ;AALA,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;"}
+{"version":3,"file":"enums.js","sources":["../../../src/components/TagColor/enums.ts"],"sourcesContent":["/** Статус тега, определяющий цвет фона. */\nexport enum ETagColorStatus {\n    /** Нейтральный — статус по умолчанию. */\n    DEFAULT = \"default\",\n    /** Успешное завершение. */\n    SUCCESS = \"success\",\n    /** Информационное сообщение. */\n    INFO = \"info\",\n    /** Предупреждение. */\n    WARNING = \"warning\",\n    /** Ошибка. */\n    ERROR = \"error\",\n}\n"],"names":["ETagColorStatus"],"mappings":"AACO,IAAK,oCAAAA,qBAAL;AAEHA,mBAAA,SAAA,IAAU;AAEVA,mBAAA,SAAA,IAAU;AAEVA,mBAAA,MAAA,IAAO;AAEPA,mBAAA,SAAA,IAAU;AAEVA,mBAAA,OAAA,IAAQ;AAVA,SAAAA;AAAA,GAAA,mBAAA,CAAA,CAAA;"}

package/components/TagGroup/TagGroup.js

@@ -2,22 +2,22 @@ import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const tagGroup = "tagGroup__02f76d6f";
-const sm = "sm__771cd712";
-const md = "md__14641a0c";
-const lg = "lg__dd052486";
+const tagGroup = "tagGroup__1ceaddd5";
+const sm = "sm__7e9e83cf";
+const md = "md__99e31c2b";
+const lg = "lg__6e5ad2fc";
 const styles = {
   tagGroup,
   sm,
   md,
   lg
 };
-const sizeToClassNameMap = createSizeToClassNameMap(styles);
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
 const TagGroup = React__default.forwardRef(
   ({ children, className, size, ...restProps }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(styles.tagGroup, sizeToClassNameMap[size], className),
+      className: clsx(styles.tagGroup, SIZE_TO_CLASS_NAME_MAP[size], className),
       role: "group",
       ...restProps,
       ref,
@@ -25,6 +25,7 @@ const TagGroup = React__default.forwardRef(
     }
   )
 );
+TagGroup.displayName = "TagGroup";
 export {
   TagGroup
 };

package/components/TagGroup/TagGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.js","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { ITagGroupProps } from \"@sberbusiness/triplex-next/components/TagGroup/types\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/TagGroup.module.less\";\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Контейнер для группы Tag. */\nexport const TagGroup = React.forwardRef<HTMLDivElement, ITagGroupProps>(\n    ({ children, className, size, ...restProps }, ref) => (\n        <div\n            className={clsx(styles.tagGroup, sizeToClassNameMap[size], className)}\n            role=\"group\"\n            {...restProps}\n            ref={ref}\n        >\n            {children}\n        </div>\n    ),\n);\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,WAAWA,eAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,WAAW,MAAM,GAAG,UAAA,GAAa,QAC1C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,UAAU,mBAAmB,IAAI,GAAG,SAAS;AAAA,MACpE,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"TagGroup.js","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { ITagGroupProps } from \"@sberbusiness/triplex-next/components/TagGroup/types\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/TagGroup.module.less\";\n\n/** Соответствие размера имени класса. */\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/**\n * Контейнер для группы Tag.\n * Теги идут в общем потоке и переносятся по строкам, отступ между ними задаёт size.\n * Корневой элемент — div с role=\"group\", на него указывает ref и приходят className и остальные props.\n */\nexport const TagGroup = React.forwardRef<HTMLDivElement, ITagGroupProps>(\n    ({ children, className, size, ...restProps }, ref) => (\n        <div\n            className={clsx(styles.tagGroup, SIZE_TO_CLASS_NAME_MAP[size], className)}\n            role=\"group\"\n            {...restProps}\n            ref={ref}\n        >\n            {children}\n        </div>\n    ),\n);\n\nTagGroup.displayName = \"TagGroup\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,yBAAyB,yBAAyB,MAAM;AAOvD,MAAM,WAAWA,eAAM;AAAA,EAC1B,CAAC,EAAE,UAAU,WAAW,MAAM,GAAG,UAAA,GAAa,QAC1C;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,UAAU,uBAAuB,IAAI,GAAG,SAAS;AAAA,MACxE,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGb;AAEA,SAAS,cAAc;"}

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

@@ -4,7 +4,7 @@ import { c as clsx } from "../../../../chunks/vendor-CUIykw0y.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-_lk-8WZV.js";
+import { s as styles } from "../../../../chunks/TooltipDesktop.module-Bg6ol2mk.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-CUIykw0y.js";
 import { MobileView } from "../../../MobileView/MobileView.js";
 import { getSafeRel } from "../../../../utils/html/anchorSecurity.js";
-const tooltipLink = "tooltipLink__264f473a";
-const desktop = "desktop__8c384c9b";
-const mobile = "mobile__192b9e50";
+const tooltipLink = "tooltipLink__2a106314";
+const desktop = "desktop__a75b46c0";
+const mobile = "mobile__ad922ac8";
 const styles = {
   tooltipLink,
   desktop,
@@ -21,7 +21,7 @@ const TooltipLink = React__default.forwardRef(
         ...rest,
         target,
         rel: safeRel,
-        "data-tx": "1.47.0",
+        "data-tx": "1.48.0",
         ref,
         children
       }

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-_lk-8WZV.js";
+import { s as styles } from "../../../../chunks/TooltipDesktop.module-Bg6ol2mk.js";
 const TooltipXButton = ({ onClick, ...rest }) => {
   const { setTooltipOpen } = useContext(TooltipContext);
   const handleClick = (event) => {

package/components/Tooltip/components/desktop/components/TooltipDesktopBase.js

@@ -9,7 +9,7 @@ import { Portal } from "../../../../Portal/Portal.js";
 import { ETooltipFlowTypes, ETooltipPreferPlace, ETooltipDirection, ETooltipAlign, ETooltipSizeParameter, ETooltipTypeName, ETooltipEndCoordinates, ETooltipStartCoordinates, ETooltipAxesType, ETooltipSize } from "../../../enums.js";
 import { TooltipDesktopTip } from "./TooltipDesktopTip.js";
 import { pickZone, axes, calcRelPos, centerOfBoundsFromBounds, calcBounds, equalCoords } from "../../../utils/Positioning.js";
-import { s as styles } from "../../../../../chunks/TooltipDesktop.module-_lk-8WZV.js";
+import { s as styles } from "../../../../../chunks/TooltipDesktop.module-Bg6ol2mk.js";
 const flowToTipTranslations = {
   [ETooltipFlowTypes.COLUMN]: "translateX",
   [ETooltipFlowTypes.ROW]: "translateY"