@sberbusiness/triplex-next 0.46.0 → 0.48.0

package/components/Table/NoColumns.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { Gap } from "../Gap/Gap.js";
 import { ServicesetupSysIcon96 } from "@sberbusiness/icons-next";
-const noColumns = "noColumns__a8af9e72";
-const content = "content__1129aa59";
+const noColumns = "noColumns__16fa7104";
+const content = "content__9604e066";
 const styles = {
   noColumns,
   content

package/components/Table/PaginationPanel.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
-const paginationPanel = "paginationPanel__051ad8c5";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
+const paginationPanel = "paginationPanel__ccfc3d19";
 const styles = {
   paginationPanel
 };
@@ -11,7 +11,7 @@ const PaginationPanel = React.forwardRef(
     {
       className: clsx(styles.paginationPanel, className),
       ...htmlDivAttributes,
-      "data-tx": "0.46.0",
+      "data-tx": "0.48.0",
       ref,
       children
     }

package/components/Table/TableBasic/TableBasic.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useContext, useEffect } from "react";
-import { i as isEqual } from "../../../chunks/vendor-BxhAzfnS.js";
+import { i as isEqual } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { MasterTableContext } from "../MasterTableContext.js";
-import { s as styles } from "../../../chunks/utils-haFRFWPQ.js";
+import { s as styles } from "../../../chunks/utils-Co5By2a-.js";
 import { TableBasicHeader } from "./components/TableBasicHeader.js";
 import { TableBasicBody } from "./components/TableBasicBody.js";
 import { LoaderMiddle } from "../../Loader/LoaderMiddle/LoaderMiddle.js";

package/components/Table/TableBasic/components/TableBasicBody.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { TableBasicRow } from "./TableBasicRow.js";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
-import { s as styles } from "../../../../chunks/utils-haFRFWPQ.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../chunks/utils-Co5By2a-.js";
 const TableBasicBody = ({ columns, data, highlightRowOnHover, onClickRow }) => {
   if (data.length === 0) {
     return null;

package/components/Table/TableBasic/components/TableBasicHeader.js

@@ -3,8 +3,8 @@ import { SortdecreaseStrokeSrvIcon16, SortincreaseStrokeSrvIcon16, SortStrokeSrv
 import { getAriaHTMLAttributes } from "../../../../utils/html/AriaAttributes.js";
 import { getDataHTMLAttributes } from "../../../../utils/html/DataAttributes.js";
 import { ECellType, EHorizontalAlign, EOrderDirection } from "../enums.js";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
-import { s as styles, m as mapHorizontalAlignToClassName } from "../../../../chunks/utils-haFRFWPQ.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles, m as mapHorizontalAlignToClassName } from "../../../../chunks/utils-Co5By2a-.js";
 import { Text } from "../../../Typography/Text.js";
 import { ETextSize } from "../../../Typography/enums.js";
 const getNextOrderDirection = (currentDirection) => {

package/components/Table/TableBasic/components/TableBasicRow.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { getAriaHTMLAttributes } from "../../../../utils/html/AriaAttributes.js";
 import { getDataHTMLAttributes } from "../../../../utils/html/DataAttributes.js";
 import { DataTestId } from "../../../../consts/DataTestId.js";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
-import { s as styles, a as mapVerticalAlignToClassName, m as mapHorizontalAlignToClassName, b as mapCellTypeToClassName } from "../../../../chunks/utils-haFRFWPQ.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles, a as mapVerticalAlignToClassName, m as mapHorizontalAlignToClassName, b as mapCellTypeToClassName } from "../../../../chunks/utils-Co5By2a-.js";
 import { ECellType, EVerticalAlign } from "../enums.js";
 import { ETextSize } from "../../../Typography/enums.js";
 import { Text } from "../../../Typography/Text.js";

package/components/Table/TableBasicSettings/TableBasicSettings.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useRef } from "react";
 import { ButtonDropdownExtended } from "../../Button/ButtonDropdownExtended.js";
-import { c as clsx } from "../../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { TableBasicSettingsBody } from "./components/TableBasicSettingsBody.js";
 import { ColumnSettings } from "./components/ColumnSettings.js";
 import { TableBasicSettingsFooter } from "./components/TableBasicSettingsFooter.js";
 import { TableBasicSettingsHeader } from "./components/TableBasicSettingsHeader.js";
 import { Link } from "../../Link/Link.js";
-const tableSettingsLink = "tableSettingsLink__a662d781";
-const tableSettingsDropdown = "tableSettingsDropdown__46528977";
+const tableSettingsLink = "tableSettingsLink__1690a8ed";
+const tableSettingsDropdown = "tableSettingsDropdown__38c0cb55";
 const styles = {
   tableSettingsLink,
   tableSettingsDropdown

package/components/Table/TableBasicSettings/components/ColumnSettingsSortableListItemTarget.js

@@ -2,9 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { ListSortableItemTarget } from "../../../List/components/ListSortableItemTarget.js";
 import { ListSortableItemControls } from "../../../List/components/ListSortableItemControls.js";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
-const columnSettingsSortableListItemTarget = "columnSettingsSortableListItemTarget__e5bb71a3";
-const dragging = "dragging__51ca4c0c";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+const columnSettingsSortableListItemTarget = "columnSettingsSortableListItemTarget__f82fd548";
+const dragging = "dragging__e17806d9";
 const styles = {
   columnSettingsSortableListItemTarget,
   dragging

package/components/Table/TableBasicSettings/components/ColumnSettingsStaticListItem.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
 import { ListItem } from "../../../List/components/ListItem.js";
-const columnSettingsStaticListItem = "columnSettingsStaticListItem__5341a4e0";
+const columnSettingsStaticListItem = "columnSettingsStaticListItem__09624c6f";
 const styles = {
   columnSettingsStaticListItem
 };

package/components/Table/TableBasicSettings/components/TableBasicSettingsBody.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
-const tableBasicSettingsBody = "tableBasicSettingsBody__6f8273bb";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+const tableBasicSettingsBody = "tableBasicSettingsBody__d8f9aa4c";
 const styles = {
   tableBasicSettingsBody
 };

package/components/Table/TableBasicSettings/components/TableBasicSettingsFooter.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
-const tableBasicSettingsFooter = "tableBasicSettingsFooter__4181da3d";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+const tableBasicSettingsFooter = "tableBasicSettingsFooter__0aed2c27";
 const styles = {
   tableBasicSettingsFooter
 };

package/components/Table/TableBasicSettings/components/TableBasicSettingsHeader.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
 import { Text } from "../../../Typography/Text.js";
 import { EFontWeightText, ETextSize } from "../../../Typography/enums.js";
-const tableBasicSettingsHeader = "tableBasicSettingsHeader__1f48d4fe";
+const tableBasicSettingsHeader = "tableBasicSettingsHeader__cdf1eabc";
 const styles = {
   tableBasicSettingsHeader
 };

package/components/Table/TableFooter/TableFooter.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-BxhAzfnS.js";
-import { s as styles } from "../../../chunks/TableFooter.module-kxKCqomc.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../chunks/TableFooter.module-CnvJOn1e.js";
 import { FooterDescription } from "../../Footer/components/FooterDescription.js";
 import { FooterDescriptionControls } from "../../Footer/components/FooterDescriptionControls.js";
 import { TableFooterSummary } from "./components/TableFooterSummary.js";

package/components/Table/TableFooter/components/TableFooterSummary.js

@@ -3,7 +3,7 @@ import { FooterDescription } from "../../../Footer/components/FooterDescription.
 import { TableFooterSummaryAmount } from "./TableFooterSummaryAmount.js";
 import { TableFooterSummarySelectedCount } from "./TableFooterSummarySelectedCount.js";
 import { TableFooterSummarySelectAllButton } from "./TableFooterSummarySelectAllButton.js";
-import { s as styles } from "../../../../chunks/TableFooter.module-kxKCqomc.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-CnvJOn1e.js";
 const TableFooterSummary = Object.assign(
   ({ children, ...htmlDivAttributes }) => {
     return /* @__PURE__ */ jsx(FooterDescription.Content, { ...htmlDivAttributes, children: /* @__PURE__ */ jsx("div", { className: styles.tableFooterSummary, children }) });

package/components/Table/TableFooter/components/TableFooterSummaryAmount.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../../chunks/TableFooter.module-kxKCqomc.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-CnvJOn1e.js";
 import { Amount } from "../../../Amount/Amount.js";
 import { Text } from "../../../Typography/Text.js";
 import { ETextSize } from "../../../Typography/enums.js";

package/components/Table/TableFooter/components/TableFooterSummarySelectAllButton.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../../chunks/TableFooter.module-kxKCqomc.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-CnvJOn1e.js";
 import { ETextSize } from "../../../Typography/enums.js";
 import { Link } from "../../../Link/Link.js";
 import { Text } from "../../../Typography/Text.js";

package/components/Table/TableFooter/components/TableFooterSummarySelectedCount.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../../chunks/TableFooter.module-kxKCqomc.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-CnvJOn1e.js";
 const TableFooterSummarySelectedCount = ({ children }) => /* @__PURE__ */ jsx("span", { className: styles.tableFooterSummarySelectedCount, children });
 TableFooterSummarySelectedCount.displayName = "TableFooterSummarySelectedCount";
 export {

package/components/Table/utils.js

@@ -1,5 +1,5 @@
 import "./TableBasic/enums.js";
-import { b, m, a } from "../../chunks/utils-haFRFWPQ.js";
+import { b, m, a } from "../../chunks/utils-Co5By2a-.js";
 export {
   b as mapCellTypeToClassName,
   m as mapHorizontalAlignToClassName,

package/components/Tabs/Tabs.js

@@ -1,5 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef } from "react";
+import React, { useState, useRef } from "react";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.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-BxhAzfnS.js";
-const tabsContent = "tabsContent__b776bdbe";
-const tabButtonDropdown = "tabButtonDropdown__f8ad0109";
-const sm = "sm__92802745";
-const md = "md__12251fe6";
-const lg = "lg__4466b103";
-const selected = "selected__d49f1ed3";
-const type1 = "type1__54af7cbb";
-const type2 = "type2__e28a3b20";
+const tabsContent = "tabsContent__7f85567b";
+const tabButtonDropdown = "tabButtonDropdown__6d9338e7";
+const sm = "sm__d6a0a562";
+const md = "md__b36e5676";
+const lg = "lg__fe17da26";
+const selected = "selected__09cc97ee";
+const type1 = "type1__e3b58683";
+const type2 = "type2__2977a2be";
 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.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
-        }
-      );
-    } }, 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
-          )
+          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
+            )
+          }
         }
-      }
-    ) })
-  ] }) });
-};
+      ) })
+    ] }) });
+  }
+);
+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":["selected","_a"],"mappings":"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"}

package/components/TabsExtended/TabsExtended.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useMemo } from "react";
-import { c as clsx } from "../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.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-86zTO0XI.js";
-import { s as styles } from "../../chunks/TabsExtended.module-V-Qourpk.js";
+import { T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/utils-DUSFqcmy.js";
+import { s as styles } from "../../chunks/TabsExtended.module-CAHXApzZ.js";
 import "./components/TabsExtendedDropdownWrapper.js";
 import "./components/TabsExtendedTab.js";
 import "./components/TabsExtendedTabButton.js";

package/components/TabsExtended/components/TabsExtendedContent.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { TabsExtendedTabsWrapper } from "./TabsExtendedTabsWrapper.js";
 import { TabsExtendedTab } from "./TabsExtendedTab.js";
 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-V-Qourpk.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-CAHXApzZ.js";
 import "./TabsExtendedTabContext.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const TabsExtendedContent = Object.assign(

package/components/TabsExtended/components/TabsExtendedDropdownWrapper.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useContext, useCallback } from "react";
-import { c as clsx } from "../../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-V-Qourpk.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-CAHXApzZ.js";
 const TabsExtendedDropdownWrapper = React.forwardRef(
   ({ children, className, ...htmlDivAttributes }, ref) => {
     const { dropdownItemsIds, onSelectTab, dropdownRef } = useContext(TabsExtendedContext);

package/components/TabsExtended/components/TabsExtendedTab.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useContext } from "react";
-import { c as clsx } from "../../../chunks/vendor-BxhAzfnS.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { TabsExtendedTabContext } from "./TabsExtendedTabContext.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-V-Qourpk.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-CAHXApzZ.js";
 const TabsExtendedTab = React.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, { useContext } from "react";
-import { c as clsx } from "../../../chunks/vendor-BxhAzfnS.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-86zTO0XI.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.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-DUSFqcmy.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { EFontType } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";

package/components/TabsExtended/components/TabsExtendedTabsWrapper.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React, { useContext, useState, useRef, useCallback, useLayoutEffect, isValidElement } from "react";
-import { g as useResizeDetector, c as clsx, h as pickBy } from "../../../chunks/vendor-BxhAzfnS.js";
+import { g as useResizeDetector, c as clsx, h as pickBy } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { TabsExtendedTabContext } from "./TabsExtendedTabContext.js";
-import { s as styles } from "../../../chunks/TabsExtended.module-V-Qourpk.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-CAHXApzZ.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-86zTO0XI.js";
+import { a, T } from "../../chunks/utils-DUSFqcmy.js";
 export {
   a as TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP,
   T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP