@sberbusiness/triplex-next 1.42.0 → 1.44.0

package/components/Table/TableFooter/TableFooter.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DfvHt3TJ.js";
-import { s as styles } from "../../../chunks/TableFooter.module-r_izsS9u.js";
+import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
+import { s as styles } from "../../../chunks/TableFooter.module-DRlxkZoa.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-r_izsS9u.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-DRlxkZoa.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-r_izsS9u.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-DRlxkZoa.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-r_izsS9u.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-DRlxkZoa.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-r_izsS9u.js";
+import { s as styles } from "../../../../chunks/TableFooter.module-DRlxkZoa.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-BO2qfDaA.js";
+import { b, m, a } from "../../chunks/utils-BL5AUOKS.js";
 export {
   b as mapCellTypeToClassName,
   m as mapHorizontalAlignToClassName,

package/components/Tabs/Tabs.js

@@ -2,11 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
 import { TabsExtended } from "../TabsExtended/TabsExtended.js";
 import "../TabsExtended/components/TabsExtendedContent.js";
-import { c as clsx } from "../../chunks/vendor-DfvHt3TJ.js";
-import "../TabsExtended/TabsExtendedContext.js";
+import "../TabsExtended/components/TabsExtendedDropdownWrapper.js";
 import "../TabsExtended/components/TabsExtendedTab.js";
 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";
@@ -15,22 +15,33 @@ import "../Button/ButtonDropdownExtended.js";
 import { EButtonDotsTheme } from "../Button/enums.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { isKey } from "../../utils/keyboard.js";
-const tabsContent = "tabsContent__863a186e";
-const tabButtonDropdown = "tabButtonDropdown__60a9ebcb";
-const sm = "sm__8511c6b0";
-const md = "md__d1b7795e";
-const lg = "lg__86d13060";
+import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
+const tabsContent = "tabsContent__ceca8d6d";
+const tabButtonDropdown = "tabButtonDropdown__5141c364";
+const sm = "sm__f4531671";
+const md = "md__13d3c926";
+const lg = "lg__e6c615e3";
+const selected = "selected__38950414";
+const type1 = "type1__70ec5c57";
+const type2 = "type2__3545bee7";
 const styles = {
   tabsContent,
   tabButtonDropdown,
   sm,
   md,
-  lg
+  lg,
+  selected,
+  type1,
+  type2
 };
 const TYPE_TO_BUTTON_DOTS_THEME_MAP = {
   [ETabsExtendedType.TYPE_1]: EButtonDotsTheme.DOTS_SECONDARY,
   [ETabsExtendedType.TYPE_2]: EButtonDotsTheme.DOTS_SECONDARY_LIGHT
 };
+const TYPE_TO_CLASS_NAME_MAP = {
+  [ETabsExtendedType.TYPE_1]: styles.type1,
+  [ETabsExtendedType.TYPE_2]: styles.type2
+};
 const Tabs = ({
   buttonDropdownAttributes,
   selectedId,
@@ -47,7 +58,7 @@ const Tabs = ({
   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, isFirstInlineTab, isLastInlineTab }) => {
+    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;
@@ -61,7 +72,7 @@ const Tabs = ({
       return /* @__PURE__ */ jsx(
         TabsExtended.Content.TabButton,
         {
-          selected,
+          selected: selected2,
           tabIndex,
           ref: getRef(),
           size,
@@ -103,7 +114,13 @@ const Tabs = ({
         selected: tabs.filter((tab) => tab.id === selectedId)[0],
         buttonAttributes: {
           ...buttonDropdownAttributes,
-          className: clsx(styles.tabButtonDropdown, styles[size])
+          className: clsx(
+            styles.tabButtonDropdown,
+            styles[size],
+            TYPE_TO_CLASS_NAME_MAP[type],
+            { [styles.selected]: dropdownItemsIds.includes(selectedId) },
+            buttonDropdownAttributes == null ? void 0 : buttonDropdownAttributes.className
+          )
         }
       }
     ) })

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\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(styles.tabButtonDropdown, styles[size]),\n                            }}\n                        />\n                    )}\n                </TabsExtended.Content.DropdownWrapper>\n            </TabsExtended.Content>\n        </TabsExtended>\n    );\n};\n"],"names":["onSelectTab"],"mappings":"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"}
+{"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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"}

package/components/TabsExtended/TabsExtended.js

@@ -1,58 +1,58 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useRef } from "react";
-import { c as clsx } from "../../chunks/vendor-DfvHt3TJ.js";
+import React__default, { useState, useRef, useCallback, useMemo } from "react";
+import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { TabsExtendedContext } from "./TabsExtendedContext.js";
 import { TabsExtendedContent } from "./components/TabsExtendedContent.js";
-import { s as styles } from "../../chunks/TabsExtended.module-DOxO-O0b.js";
 import { ETabsExtendedType } from "./enums.js";
-import { T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/utils-DEIy9WE_.js";
+import { T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP } from "../../chunks/utils-CTCsYynd.js";
+import { s as styles } from "../../chunks/TabsExtended.module-DJH-YNzW.js";
 import "./components/TabsExtendedDropdownWrapper.js";
 import "./components/TabsExtendedTab.js";
 import "./components/TabsExtendedTabButton.js";
 import "./components/TabsExtendedTabContext.js";
 import "./components/TabsExtendedTabsWrapper.js";
-const TabsExtended = ({
-  children,
-  className,
-  selectedId,
-  onSelectTab,
-  type = ETabsExtendedType.TYPE_1,
-  ...htmlDivAttributes
-}) => {
-  const [inlineItemsIds, setInlineItemsIds] = useState([]);
-  const [dropdownItemsIds, setDropdownItemsIds] = useState([]);
-  const dropdownRef = useRef(null);
-  const handleSelectTab = (id) => {
-    if (selectedId !== id) {
-      onSelectTab(id);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    TabsExtendedContext.Provider,
-    {
-      value: {
-        dropdownItemsIds,
-        dropdownRef,
-        inlineItemsIds,
-        onSelectTab: handleSelectTab,
-        selectedId,
-        setDropdownItemsIds,
-        setInlineItemsIds,
-        type
-      },
-      children: /* @__PURE__ */ jsx(
+const TabsExtended = Object.assign(
+  React__default.forwardRef(
+    ({ children, className, selectedId, onSelectTab, type = ETabsExtendedType.TYPE_1, ...htmlDivAttributes }, ref) => {
+      const [inlineItemsIds, setInlineItemsIds] = useState([]);
+      const [dropdownItemsIds, setDropdownItemsIds] = useState([]);
+      const dropdownRef = useRef(null);
+      const handleSelectTab = useCallback(
+        (id) => {
+          if (selectedId !== id) {
+            onSelectTab(id);
+          }
+        },
+        [onSelectTab, selectedId]
+      );
+      const contextValue = useMemo(
+        () => ({
+          dropdownItemsIds,
+          dropdownRef,
+          inlineItemsIds,
+          onSelectTab: handleSelectTab,
+          selectedId,
+          setDropdownItemsIds,
+          setInlineItemsIds,
+          type
+        }),
+        [dropdownItemsIds, handleSelectTab, inlineItemsIds, selectedId, type]
+      );
+      return /* @__PURE__ */ jsx(TabsExtendedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: clsx(styles.tabsExtended, TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP[type], className),
           role: "tablist",
           ...htmlDivAttributes,
+          ref,
           children
         }
-      )
+      ) });
     }
-  );
-};
-TabsExtended.Content = TabsExtendedContent;
+  ),
+  { Content: TabsExtendedContent }
+);
+TabsExtended.displayName = "TabsExtended";
 export {
   TabsExtended
 };

package/components/TabsExtended/TabsExtended.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsExtended.js","sources":["../../../src/components/TabsExtended/TabsExtended.tsx"],"sourcesContent":["import React, { useState, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { TabsExtendedContext } from \"./TabsExtendedContext\";\nimport { TabsExtendedContent } from \"./components/TabsExtendedContent\";\nimport styles from \"./styles/TabsExtended.module.less\";\nimport { TTabsExtendedOnSelectTab } from \"@sberbusiness/triplex-next/components/TabsExtended/types\";\nimport { ETabsExtendedType } from \"./enums\";\nimport { TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP } from \"./utils\";\n\n/** Свойства компонента TabsExtended. */\nexport interface ITabsExtendedProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Уникальный идентификатор выбранного таба. */\n    selectedId: string;\n    /** Обработчик выбора таба. */\n    onSelectTab: TTabsExtendedOnSelectTab;\n    /** Тип компонента. */\n    type?: ETabsExtendedType;\n}\n\n/** Внутренние составляющие компонента TabsExtended. */\ninterface ITabsExtendedComposition {\n    Content: typeof TabsExtendedContent;\n}\n\n/** Базовый компонент табов. На его основе можно рендерить табы любого дизайна. */\nexport const TabsExtended: React.FC<ITabsExtendedProps> & ITabsExtendedComposition = ({\n    children,\n    className,\n    selectedId,\n    onSelectTab,\n    type = ETabsExtendedType.TYPE_1,\n    ...htmlDivAttributes\n}) => {\n    const [inlineItemsIds, setInlineItemsIds] = useState<string[]>([]);\n    const [dropdownItemsIds, setDropdownItemsIds] = useState<string[]>([]);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n\n    const handleSelectTab = (id: string) => {\n        if (selectedId !== id) {\n            onSelectTab(id);\n        }\n    };\n\n    return (\n        <TabsExtendedContext.Provider\n            value={{\n                dropdownItemsIds,\n                dropdownRef,\n                inlineItemsIds,\n                onSelectTab: handleSelectTab,\n                selectedId,\n                setDropdownItemsIds,\n                setInlineItemsIds,\n                type,\n            }}\n        >\n            <div\n                className={clsx(styles.tabsExtended, TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP[type], className)}\n                role=\"tablist\"\n                {...htmlDivAttributes}\n            >\n                {children}\n            </div>\n        </TabsExtendedContext.Provider>\n    );\n};\n\nTabsExtended.Content = TabsExtendedContent;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAyBO,MAAM,eAAwE,CAAC;AAAA,EAClF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,kBAAkB;AAAA,EACzB,GAAG;AACP,MAAM;AACF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAmB,CAAA,CAAE;AACjE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAmB,CAAA,CAAE;AACrE,QAAM,cAAc,OAAuB,IAAI;AAE/C,QAAM,kBAAkB,CAAC,OAAe;AACpC,QAAI,eAAe,IAAI;AACnB,kBAAY,EAAE;AAAA,IAClB;AAAA,EACJ;AAEA,SACI;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACG,OAAO;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,KAAK,OAAO,cAAc,qCAAqC,IAAI,GAAG,SAAS;AAAA,UAC1F,MAAK;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGZ;AAEA,aAAa,UAAU;"}
+{"version":3,"file":"TabsExtended.js","sources":["../../../src/components/TabsExtended/TabsExtended.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { TabsExtendedContext } from \"./TabsExtendedContext\";\nimport { TabsExtendedContent } from \"./components/TabsExtendedContent\";\nimport { ETabsExtendedType } from \"./enums\";\nimport { TTabsExtendedOnSelectTab } from \"./types\";\nimport { TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP } from \"./utils\";\nimport styles from \"./styles/TabsExtended.module.less\";\n\n/** Свойства компонента TabsExtended. */\nexport interface ITabsExtendedProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Уникальный идентификатор выбранного таба. */\n    selectedId: string;\n    /** Обработчик выбора таба. Не вызывается, если выбирается уже выбранный таб. */\n    onSelectTab: TTabsExtendedOnSelectTab;\n    /** Тип оформления, выбирается по фону страницы. По умолчанию ETabsExtendedType.TYPE_1 — серый фон контейнера для белой страницы. */\n    type?: ETabsExtendedType;\n}\n\n/** Базовый компонент табов. На его основе можно рендерить табы любого дизайна. */\nexport const TabsExtended = Object.assign(\n    React.forwardRef<HTMLDivElement, ITabsExtendedProps>(\n        (\n            { children, className, selectedId, onSelectTab, type = ETabsExtendedType.TYPE_1, ...htmlDivAttributes },\n            ref,\n        ) => {\n            const [inlineItemsIds, setInlineItemsIds] = useState<string[]>([]);\n            const [dropdownItemsIds, setDropdownItemsIds] = useState<string[]>([]);\n            const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n            const handleSelectTab = useCallback(\n                (id: string) => {\n                    if (selectedId !== id) {\n                        onSelectTab(id);\n                    }\n                },\n                [onSelectTab, selectedId],\n            );\n\n            const contextValue = useMemo(\n                () => ({\n                    dropdownItemsIds,\n                    dropdownRef,\n                    inlineItemsIds,\n                    onSelectTab: handleSelectTab,\n                    selectedId,\n                    setDropdownItemsIds,\n                    setInlineItemsIds,\n                    type,\n                }),\n                [dropdownItemsIds, handleSelectTab, inlineItemsIds, selectedId, type],\n            );\n\n            return (\n                <TabsExtendedContext.Provider value={contextValue}>\n                    <div\n                        className={clsx(styles.tabsExtended, TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP[type], className)}\n                        role=\"tablist\"\n                        {...htmlDivAttributes}\n                        ref={ref}\n                    >\n                        {children}\n                    </div>\n                </TabsExtendedContext.Provider>\n            );\n        },\n    ),\n    { Content: TabsExtendedContent },\n);\n\nTabsExtended.displayName = \"TabsExtended\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;;AAoBO,MAAM,eAAe,OAAO;AAAA,EAC/BA,eAAM;AAAA,IACF,CACI,EAAE,UAAU,WAAW,YAAY,aAAa,OAAO,kBAAkB,QAAQ,GAAG,kBAAA,GACpF,QACC;AACD,YAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAmB,CAAA,CAAE;AACjE,YAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAmB,CAAA,CAAE;AACrE,YAAM,cAAc,OAA8B,IAAI;AAEtD,YAAM,kBAAkB;AAAA,QACpB,CAAC,OAAe;AACZ,cAAI,eAAe,IAAI;AACnB,wBAAY,EAAE;AAAA,UAClB;AAAA,QACJ;AAAA,QACA,CAAC,aAAa,UAAU;AAAA,MAAA;AAG5B,YAAM,eAAe;AAAA,QACjB,OAAO;AAAA,UACH;AAAA,UACA;AAAA,UACA;AAAA,UACA,aAAa;AAAA,UACb;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEJ,CAAC,kBAAkB,iBAAiB,gBAAgB,YAAY,IAAI;AAAA,MAAA;AAGxE,aACI,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cACjC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,KAAK,OAAO,cAAc,qCAAqC,IAAI,GAAG,SAAS;AAAA,UAC1F,MAAK;AAAA,UACJ,GAAG;AAAA,UACJ;AAAA,UAEC;AAAA,QAAA;AAAA,MAAA,GAET;AAAA,IAER;AAAA,EAAA;AAAA,EAEJ,EAAE,SAAS,oBAAA;AACf;AAEA,aAAa,cAAc;"}

package/components/TabsExtended/TabsExtendedContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsExtendedContext.js","sources":["../../../src/components/TabsExtended/TabsExtendedContext.ts"],"sourcesContent":["import React, { RefObject } from \"react\";\nimport { ETabsExtendedType } from \"./enums\";\n\nexport interface ITabsExtendedContext {\n    // Массив id табов, передаваемых в Dropdown.\n    dropdownItemsIds: string[];\n    // Ref на TabsExtendedDropdownWrapper.\n    dropdownRef: RefObject<HTMLDivElement>;\n    // Массив id табов, отрендереных inline.\n    inlineItemsIds: string[];\n    // Обработчик выбора таба.\n    onSelectTab: (selectedId: string) => void;\n    // Id выбранного таба.\n    selectedId: string;\n    // Определяет id табов, передаваемых в Dropdown.\n    setDropdownItemsIds: (dropdownItemsIds: string[]) => void;\n    // Определяет id табов, отрендереных inline.\n    setInlineItemsIds: (inlineItemsIds: string[]) => void;\n    type: ETabsExtendedType;\n}\n\nconst contextInitial: ITabsExtendedContext = {\n    dropdownItemsIds: [],\n    dropdownRef: { current: null },\n    inlineItemsIds: [],\n    onSelectTab: () => {},\n    selectedId: \"\",\n    setDropdownItemsIds: () => {},\n    setInlineItemsIds: () => {},\n    type: ETabsExtendedType.TYPE_1,\n};\n\nexport const TabsExtendedContext = React.createContext<ITabsExtendedContext>(contextInitial);\n"],"names":["React"],"mappings":";;AAqBA,MAAM,iBAAuC;AAAA,EACzC,kBAAkB,CAAA;AAAA,EAClB,aAAa,EAAE,SAAS,KAAA;AAAA,EACxB,gBAAgB,CAAA;AAAA,EAChB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,YAAY;AAAA,EACZ,qBAAqB,MAAM;AAAA,EAAC;AAAA,EAC5B,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,MAAM,kBAAkB;AAC5B;AAEO,MAAM,sBAAsBA,eAAM,cAAoC,cAAc;"}
+{"version":3,"file":"TabsExtendedContext.js","sources":["../../../src/components/TabsExtended/TabsExtendedContext.ts"],"sourcesContent":["import React, { MutableRefObject } from \"react\";\nimport { ETabsExtendedType } from \"./enums\";\n\n/** Значение контекста TabsExtended, общее для всех частей компонента. */\nexport interface ITabsExtendedContext {\n    /** Массив id табов, передаваемых в Dropdown. */\n    dropdownItemsIds: string[];\n    /** Ref на TabsExtendedDropdownWrapper. */\n    dropdownRef: MutableRefObject<HTMLDivElement | null>;\n    /** Массив id табов, отрендеренных inline. */\n    inlineItemsIds: string[];\n    /** Обработчик выбора таба. */\n    onSelectTab: (selectedId: string) => void;\n    /** Id выбранного таба. */\n    selectedId: string;\n    /** Определяет id табов, передаваемых в Dropdown. */\n    setDropdownItemsIds: (dropdownItemsIds: string[]) => void;\n    /** Определяет id табов, отрендеренных inline. */\n    setInlineItemsIds: (inlineItemsIds: string[]) => void;\n    /** Тип компонента. */\n    type: ETabsExtendedType;\n}\n\nconst contextInitial: ITabsExtendedContext = {\n    dropdownItemsIds: [],\n    dropdownRef: { current: null },\n    inlineItemsIds: [],\n    onSelectTab: () => {},\n    selectedId: \"\",\n    setDropdownItemsIds: () => {},\n    setInlineItemsIds: () => {},\n    type: ETabsExtendedType.TYPE_1,\n};\n\nexport const TabsExtendedContext = React.createContext<ITabsExtendedContext>(contextInitial);\n"],"names":["React"],"mappings":";;AAuBA,MAAM,iBAAuC;AAAA,EACzC,kBAAkB,CAAA;AAAA,EAClB,aAAa,EAAE,SAAS,KAAA;AAAA,EACxB,gBAAgB,CAAA;AAAA,EAChB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,YAAY;AAAA,EACZ,qBAAqB,MAAM;AAAA,EAAC;AAAA,EAC5B,mBAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,MAAM,kBAAkB;AAC5B;AAEO,MAAM,sBAAsBA,eAAM,cAAoC,cAAc;"}

package/components/TabsExtended/components/TabsExtendedContent.js

@@ -1,26 +1,35 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../../chunks/vendor-DfvHt3TJ.js";
+import React__default from "react";
+import { c as clsx } from "../../../chunks/vendor-D4wvHis9.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 { s as styles } from "../../../chunks/TabsExtended.module-DOxO-O0b.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-DJH-YNzW.js";
 import "./TabsExtendedTabContext.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
-const TabsExtendedContent = ({
-  children,
-  className,
-  size = EComponentSize.MD,
-  ...htmlDivAttributes
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx(styles.tabsExtendedContent, sizeToClassNameMap[size], className), ...htmlDivAttributes, children });
-};
-TabsExtendedContent.TabsWrapper = TabsExtendedTabsWrapper;
-TabsExtendedContent.Tab = TabsExtendedTab;
-TabsExtendedContent.TabButton = TabsExtendedTabButton;
-TabsExtendedContent.DropdownWrapper = TabsExtendedDropdownWrapper;
+const TabsExtendedContent = Object.assign(
+  React__default.forwardRef(
+    ({ children, className, size = EComponentSize.MD, ...htmlDivAttributes }, ref) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(styles.tabsExtendedContent, sizeToClassNameMap[size], className),
+        ...htmlDivAttributes,
+        ref,
+        children
+      }
+    )
+  ),
+  {
+    TabsWrapper: TabsExtendedTabsWrapper,
+    Tab: TabsExtendedTab,
+    TabButton: TabsExtendedTabButton,
+    DropdownWrapper: TabsExtendedDropdownWrapper
+  }
+);
+TabsExtendedContent.displayName = "TabsExtendedContent";
 export {
   TabsExtendedContent
 };

package/components/TabsExtended/components/TabsExtendedContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsExtendedContent.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedContent.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { TabsExtendedTabsWrapper } from \"./TabsExtendedTabsWrapper\";\nimport { TabsExtendedTab } from \"./TabsExtendedTab\";\nimport { TabsExtendedTabButton } from \"./TabsExtendedTabButton\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { TabsExtendedDropdownWrapper } from \"./TabsExtendedDropdownWrapper\";\nimport styles from \"../styles/TabsExtended.module.less\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\n\n/** Свойства компонента TabsExtendedContent. */\nexport interface ITabsExtendedContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    size?: EComponentSize;\n}\n\n/** Внутренние составляющие TabsExtendedContent. */\nexport interface ITabsExtendedContentComposition {\n    TabsWrapper: typeof TabsExtendedTabsWrapper;\n    Tab: typeof TabsExtendedTab;\n    TabButton: typeof TabsExtendedTabButton;\n    DropdownWrapper: typeof TabsExtendedDropdownWrapper;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\nexport const TabsExtendedContent: React.FC<ITabsExtendedContentProps> & ITabsExtendedContentComposition = ({\n    children,\n    className,\n    size = EComponentSize.MD,\n    ...htmlDivAttributes\n}) => {\n    return (\n        <div className={clsx(styles.tabsExtendedContent, sizeToClassNameMap[size], className)} {...htmlDivAttributes}>\n            {children}\n        </div>\n    );\n};\n\nTabsExtendedContent.TabsWrapper = TabsExtendedTabsWrapper;\nTabsExtendedContent.Tab = TabsExtendedTab;\nTabsExtendedContent.TabButton = TabsExtendedTabButton;\nTabsExtendedContent.DropdownWrapper = TabsExtendedDropdownWrapper;\n"],"names":[],"mappings":";;;;;;;;;;AAuBA,MAAM,qBAAqB,yBAAyB,MAAM;AAEnD,MAAM,sBAA6F,CAAC;AAAA,EACvG;AAAA,EACA;AAAA,EACA,OAAO,eAAe;AAAA,EACtB,GAAG;AACP,MAAM;AACF,SACI,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,qBAAqB,mBAAmB,IAAI,GAAG,SAAS,GAAI,GAAG,mBACtF,SAAA,CACL;AAER;AAEA,oBAAoB,cAAc;AAClC,oBAAoB,MAAM;AAC1B,oBAAoB,YAAY;AAChC,oBAAoB,kBAAkB;"}
+{"version":3,"file":"TabsExtendedContent.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedContent.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { TabsExtendedTabsWrapper } from \"./TabsExtendedTabsWrapper\";\nimport { TabsExtendedTab } from \"./TabsExtendedTab\";\nimport { TabsExtendedTabButton } from \"./TabsExtendedTabButton\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { TabsExtendedDropdownWrapper } from \"./TabsExtendedDropdownWrapper\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"../styles/TabsExtended.module.less\";\n\n/** Свойства компонента TabsExtendedContent. */\nexport interface ITabsExtendedContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Размер компонента. Задаёт скругление и внутренние отступы контейнера. По умолчанию EComponentSize.MD. */\n    size?: EComponentSize;\n}\n\n/** Внутренние составляющие TabsExtendedContent. */\nexport interface ITabsExtendedContentComposition {\n    /** Контейнер табов, определяющий, какие табы уезжают в Dropdown. */\n    TabsWrapper: typeof TabsExtendedTabsWrapper;\n    /** Контейнер содержимого одного таба. */\n    Tab: typeof TabsExtendedTab;\n    /** Кнопка таба. */\n    TabButton: typeof TabsExtendedTabButton;\n    /** Контейнер для Dropdown со скрытыми табами. */\n    DropdownWrapper: typeof TabsExtendedDropdownWrapper;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Контейнер табов и Dropdown. Задаёт фон и размер компонента. */\nexport const TabsExtendedContent = Object.assign(\n    React.forwardRef<HTMLDivElement, ITabsExtendedContentProps>(\n        ({ children, className, size = EComponentSize.MD, ...htmlDivAttributes }, ref) => (\n            <div\n                className={clsx(styles.tabsExtendedContent, sizeToClassNameMap[size], className)}\n                {...htmlDivAttributes}\n                ref={ref}\n            >\n                {children}\n            </div>\n        ),\n    ),\n    {\n        TabsWrapper: TabsExtendedTabsWrapper,\n        Tab: TabsExtendedTab,\n        TabButton: TabsExtendedTabButton,\n        DropdownWrapper: TabsExtendedDropdownWrapper,\n    } satisfies ITabsExtendedContentComposition,\n);\n\nTabsExtendedContent.displayName = \"TabsExtendedContent\";\n"],"names":["React"],"mappings":";;;;;;;;;;;AA4BA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,sBAAsB,OAAO;AAAA,EACtCA,eAAM;AAAA,IACF,CAAC,EAAE,UAAU,WAAW,OAAO,eAAe,IAAI,GAAG,qBAAqB,QACtE;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,qBAAqB,mBAAmB,IAAI,GAAG,SAAS;AAAA,QAC9E,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EACL;AAAA,EAGR;AAAA,IACI,aAAa;AAAA,IACb,KAAK;AAAA,IACL,WAAW;AAAA,IACX,iBAAiB;AAAA,EAAA;AAEzB;AAEA,oBAAoB,cAAc;"}

package/components/TabsExtended/components/TabsExtendedDropdownWrapper.js

@@ -1,25 +1,35 @@
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { s as styles } from "../../../chunks/TabsExtended.module-DOxO-O0b.js";
-import { c as clsx } from "../../../chunks/vendor-DfvHt3TJ.js";
+import React__default, { useContext, useCallback } from "react";
+import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
-const TabsExtendedDropdownWrapper = ({
-  children,
-  className,
-  ...htmlDivAttributes
-}) => {
-  const { dropdownItemsIds, onSelectTab, dropdownRef } = useContext(TabsExtendedContext);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(styles.tabsExtendedDropdown, className),
-      ...htmlDivAttributes,
-      hidden: !dropdownItemsIds.length,
-      ref: dropdownRef,
-      children: children({ dropdownItemsIds, onSelectTab })
-    }
-  );
-};
+import { s as styles } from "../../../chunks/TabsExtended.module-DJH-YNzW.js";
+const TabsExtendedDropdownWrapper = React__default.forwardRef(
+  ({ children, className, ...htmlDivAttributes }, ref) => {
+    const { dropdownItemsIds, onSelectTab, dropdownRef } = useContext(TabsExtendedContext);
+    const setRef = useCallback(
+      (node) => {
+        dropdownRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [dropdownRef, ref]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(styles.tabsExtendedDropdown, className),
+        ...htmlDivAttributes,
+        hidden: !dropdownItemsIds.length,
+        ref: setRef,
+        children: children({ dropdownItemsIds, onSelectTab })
+      }
+    );
+  }
+);
+TabsExtendedDropdownWrapper.displayName = "TabsExtendedDropdownWrapper";
 export {
   TabsExtendedDropdownWrapper
 };

package/components/TabsExtended/components/TabsExtendedDropdownWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsExtendedDropdownWrapper.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedDropdownWrapper.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styles from \"../styles/TabsExtended.module.less\";\nimport clsx from \"clsx\";\nimport { TabsExtendedContext } from \"../TabsExtendedContext\";\nimport { TTabsExtendedOnSelectTab } from \"@sberbusiness/triplex-next/components/TabsExtended/types\";\n\nexport interface ITabsExtendedDropdownWrapperProvideProps {\n    dropdownItemsIds: string[];\n    onSelectTab: TTabsExtendedOnSelectTab;\n}\n\n/** Свойства компонента TabsExtendedDropdownWrapper. */\nexport interface ITabsExtendedDropdownWrapperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    children: (props: ITabsExtendedDropdownWrapperProvideProps) => React.ReactNode;\n}\n\n/** Контейнер для Dropdown компонента табов. */\nexport const TabsExtendedDropdownWrapper: React.FC<ITabsExtendedDropdownWrapperProps> = ({\n    children,\n    className,\n    ...htmlDivAttributes\n}) => {\n    const { dropdownItemsIds, onSelectTab, dropdownRef } = useContext(TabsExtendedContext);\n\n    return (\n        <div\n            className={clsx(styles.tabsExtendedDropdown, className)}\n            {...htmlDivAttributes}\n            hidden={!dropdownItemsIds.length}\n            ref={dropdownRef}\n        >\n            {children({ dropdownItemsIds, onSelectTab })}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;AAiBO,MAAM,8BAA2E,CAAC;AAAA,EACrF;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,EAAE,kBAAkB,aAAa,YAAA,IAAgB,WAAW,mBAAmB;AAErF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,sBAAsB,SAAS;AAAA,MACrD,GAAG;AAAA,MACJ,QAAQ,CAAC,iBAAiB;AAAA,MAC1B,KAAK;AAAA,MAEJ,UAAA,SAAS,EAAE,kBAAkB,YAAA,CAAa;AAAA,IAAA;AAAA,EAAA;AAGvD;"}
+{"version":3,"file":"TabsExtendedDropdownWrapper.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedDropdownWrapper.tsx"],"sourcesContent":["import React, { useCallback, useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { TabsExtendedContext } from \"../TabsExtendedContext\";\nimport { TTabsExtendedOnSelectTab } from \"../types\";\nimport styles from \"../styles/TabsExtended.module.less\";\n\n/** Данные, передаваемые в render-prop TabsExtendedDropdownWrapper. */\nexport interface ITabsExtendedDropdownWrapperProvideProps {\n    /** Id табов, которые не поместились в строку и должны быть показаны в Dropdown. */\n    dropdownItemsIds: string[];\n    /** Обработчик выбора таба из Dropdown. */\n    onSelectTab: TTabsExtendedOnSelectTab;\n}\n\n/** Свойства компонента TabsExtendedDropdownWrapper. */\nexport interface ITabsExtendedDropdownWrapperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Render-prop, рендерящий Dropdown со скрытыми табами. */\n    children: (props: ITabsExtendedDropdownWrapperProvideProps) => React.ReactNode;\n}\n\n/** Контейнер для Dropdown компонента табов. Скрыт, пока все табы помещаются в строку. */\nexport const TabsExtendedDropdownWrapper = React.forwardRef<HTMLDivElement, ITabsExtendedDropdownWrapperProps>(\n    ({ children, className, ...htmlDivAttributes }, ref) => {\n        const { dropdownItemsIds, onSelectTab, dropdownRef } = useContext(TabsExtendedContext);\n\n        // Ширина этого контейнера участвует в расчёте помещающихся табов, поэтому ref из контекста\n        // обязателен. Ref потребителя устанавливается на тот же элемент.\n        const setRef = useCallback(\n            (node: HTMLDivElement | null) => {\n                dropdownRef.current = node;\n\n                if (typeof ref === \"function\") {\n                    ref(node);\n                } else if (ref) {\n                    ref.current = node;\n                }\n            },\n            [dropdownRef, ref],\n        );\n\n        return (\n            <div\n                className={clsx(styles.tabsExtendedDropdown, className)}\n                {...htmlDivAttributes}\n                hidden={!dropdownItemsIds.length}\n                ref={setRef}\n            >\n                {children({ dropdownItemsIds, onSelectTab })}\n            </div>\n        );\n    },\n);\n\nTabsExtendedDropdownWrapper.displayName = \"TabsExtendedDropdownWrapper\";\n"],"names":["React"],"mappings":";;;;;AAqBO,MAAM,8BAA8BA,eAAM;AAAA,EAC7C,CAAC,EAAE,UAAU,WAAW,GAAG,kBAAA,GAAqB,QAAQ;AACpD,UAAM,EAAE,kBAAkB,aAAa,YAAA,IAAgB,WAAW,mBAAmB;AAIrF,UAAM,SAAS;AAAA,MACX,CAAC,SAAgC;AAC7B,oBAAY,UAAU;AAEtB,YAAI,OAAO,QAAQ,YAAY;AAC3B,cAAI,IAAI;AAAA,QACZ,WAAW,KAAK;AACZ,cAAI,UAAU;AAAA,QAClB;AAAA,MACJ;AAAA,MACA,CAAC,aAAa,GAAG;AAAA,IAAA;AAGrB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,sBAAsB,SAAS;AAAA,QACrD,GAAG;AAAA,QACJ,QAAQ,CAAC,iBAAiB;AAAA,QAC1B,KAAK;AAAA,QAEJ,UAAA,SAAS,EAAE,kBAAkB,YAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvD;AACJ;AAEA,4BAA4B,cAAc;"}

package/components/TabsExtended/components/TabsExtendedTab.js

@@ -1,19 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import React__default, { useContext } from "react";
-import { s as styles } from "../../../chunks/TabsExtended.module-DOxO-O0b.js";
-import { c as clsx } from "../../../chunks/vendor-DfvHt3TJ.js";
+import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { TabsExtendedTabContext } from "./TabsExtendedTabContext.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-DJH-YNzW.js";
 const TabsExtendedTab = React__default.forwardRef(
   ({ children, id, className, onClick, ...htmlSpanAttributes }, ref) => {
     const { dropdownItemsIds, inlineItemsIds, selectedId, onSelectTab } = useContext(TabsExtendedContext);
     const { isFakeTab } = useContext(TabsExtendedTabContext);
+    const isInDropdown = dropdownItemsIds.includes(id);
     const handleClick = (event) => {
       onSelectTab(id);
       onClick == null ? void 0 : onClick(event);
     };
     const getId = () => {
-      if (isFakeTab || dropdownItemsIds.includes(id)) {
+      if (isFakeTab || isInDropdown) {
         return void 0;
       }
       return id;
@@ -22,7 +23,7 @@ const TabsExtendedTab = React__default.forwardRef(
       "span",
       {
         id: getId(),
-        className: clsx(styles.tabsExtendedTab, { [styles.hidden]: dropdownItemsIds.includes(id) }, className),
+        className: clsx(styles.tabsExtendedTab, { [styles.hidden]: isInDropdown }, className),
         onClick: isFakeTab ? void 0 : handleClick,
         ...htmlSpanAttributes,
         role: "presentation",

package/components/TabsExtended/components/TabsExtendedTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsExtendedTab.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedTab.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styles from \"../styles/TabsExtended.module.less\";\nimport clsx from \"clsx\";\nimport { TabsExtendedContext } from \"../TabsExtendedContext\";\nimport { TabsExtendedTabContext } from \"./TabsExtendedTabContext\";\n\nexport interface ITabsExtendedItemProvideProps {\n    /** Выбранное состояние. */\n    selected: boolean;\n    /** Первый таб. */\n    isFirstInlineTab: boolean;\n    /** Последний, отображаемый в строке таб. */\n    isLastInlineTab: boolean;\n}\n\n/** Свойства компонента TabsExtendedTab. */\nexport interface ITabsExtendedTabProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n    id: string;\n    children: (props: ITabsExtendedItemProvideProps) => React.ReactNode;\n}\n\n/**\n * Контейнер содержимого таба.\n * Обрабатывает выбор таба.\n */\nexport const TabsExtendedTab = React.forwardRef<HTMLSpanElement, ITabsExtendedTabProps>(\n    ({ children, id, className, onClick, ...htmlSpanAttributes }, ref) => {\n        const { dropdownItemsIds, inlineItemsIds, selectedId, onSelectTab } = useContext(TabsExtendedContext);\n        const { isFakeTab } = useContext(TabsExtendedTabContext);\n\n        const handleClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n            onSelectTab(id);\n            onClick?.(event);\n        };\n\n        // Возвращает id таба. Если таб отображается в Dropdown, или это fakeTab, возвращается undefined, чтобы не было 2-х элементов в DOM с одинаковыми ID.\n        const getId = () => {\n            if (isFakeTab || dropdownItemsIds.includes(id)) {\n                return undefined;\n            }\n            return id;\n        };\n\n        return (\n            <span\n                id={getId()}\n                className={clsx(styles.tabsExtendedTab, { [styles.hidden]: dropdownItemsIds.includes(id) }, className)}\n                onClick={isFakeTab ? undefined : handleClick}\n                {...htmlSpanAttributes}\n                role=\"presentation\"\n                // Нужен для идентификации таба компонентом TabsWrapper.\n                data-tab-item-id={id}\n                ref={isFakeTab ? undefined : ref}\n            >\n                {children({\n                    isFirstInlineTab: inlineItemsIds[0] === id,\n                    isLastInlineTab: inlineItemsIds[inlineItemsIds.length - 1] === id,\n                    selected: selectedId === id,\n                })}\n            </span>\n        );\n    },\n);\n\nTabsExtendedTab.displayName = \"TabsExtendedTab\";\n"],"names":["React"],"mappings":";;;;;;AAyBO,MAAM,kBAAkBA,eAAM;AAAA,EACjC,CAAC,EAAE,UAAU,IAAI,WAAW,SAAS,GAAG,mBAAA,GAAsB,QAAQ;AAClE,UAAM,EAAE,kBAAkB,gBAAgB,YAAY,YAAA,IAAgB,WAAW,mBAAmB;AACpG,UAAM,EAAE,UAAA,IAAc,WAAW,sBAAsB;AAEvD,UAAM,cAAc,CAAC,UAA6C;AAC9D,kBAAY,EAAE;AACd,yCAAU;AAAA,IACd;AAGA,UAAM,QAAQ,MAAM;AAChB,UAAI,aAAa,iBAAiB,SAAS,EAAE,GAAG;AAC5C,eAAO;AAAA,MACX;AACA,aAAO;AAAA,IACX;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAI,MAAA;AAAA,QACJ,WAAW,KAAK,OAAO,iBAAiB,EAAE,CAAC,OAAO,MAAM,GAAG,iBAAiB,SAAS,EAAE,EAAA,GAAK,SAAS;AAAA,QACrG,SAAS,YAAY,SAAY;AAAA,QAChC,GAAG;AAAA,QACJ,MAAK;AAAA,QAEL,oBAAkB;AAAA,QAClB,KAAK,YAAY,SAAY;AAAA,QAE5B,UAAA,SAAS;AAAA,UACN,kBAAkB,eAAe,CAAC,MAAM;AAAA,UACxC,iBAAiB,eAAe,eAAe,SAAS,CAAC,MAAM;AAAA,UAC/D,UAAU,eAAe;AAAA,QAAA,CAC5B;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,gBAAgB,cAAc;"}
+{"version":3,"file":"TabsExtendedTab.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedTab.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { TabsExtendedContext } from \"../TabsExtendedContext\";\nimport { TabsExtendedTabContext } from \"./TabsExtendedTabContext\";\nimport styles from \"../styles/TabsExtended.module.less\";\n\n/** Данные, передаваемые в render-prop TabsExtendedTab. */\nexport interface ITabsExtendedItemProvideProps {\n    /** Выбранное состояние. */\n    selected: boolean;\n    /** Первый таб. */\n    isFirstInlineTab: boolean;\n    /** Последний, отображаемый в строке таб. */\n    isLastInlineTab: boolean;\n}\n\n/** Свойства компонента TabsExtendedTab. */\nexport interface ITabsExtendedTabProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n    /** Уникальный идентификатор таба. По нему таб сопоставляется с selectedId компонента TabsExtended. */\n    id: string;\n    /** Render-prop, рендерящий содержимое таба. */\n    children: (props: ITabsExtendedItemProvideProps) => React.ReactNode;\n}\n\n/**\n * Контейнер содержимого таба.\n * Обрабатывает выбор таба.\n */\nexport const TabsExtendedTab = React.forwardRef<HTMLSpanElement, ITabsExtendedTabProps>(\n    ({ children, id, className, onClick, ...htmlSpanAttributes }, ref) => {\n        const { dropdownItemsIds, inlineItemsIds, selectedId, onSelectTab } = useContext(TabsExtendedContext);\n        const { isFakeTab } = useContext(TabsExtendedTabContext);\n\n        const isInDropdown = dropdownItemsIds.includes(id);\n\n        const handleClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n            onSelectTab(id);\n            onClick?.(event);\n        };\n\n        // Возвращает id таба. Если таб отображается в Dropdown, или это fakeTab, возвращается undefined, чтобы не было 2-х элементов в DOM с одинаковыми ID.\n        const getId = () => {\n            if (isFakeTab || isInDropdown) {\n                return undefined;\n            }\n\n            return id;\n        };\n\n        return (\n            <span\n                id={getId()}\n                className={clsx(styles.tabsExtendedTab, { [styles.hidden]: isInDropdown }, className)}\n                onClick={isFakeTab ? undefined : handleClick}\n                {...htmlSpanAttributes}\n                role=\"presentation\"\n                // Нужен для идентификации таба компонентом TabsWrapper.\n                data-tab-item-id={id}\n                ref={isFakeTab ? undefined : ref}\n            >\n                {children({\n                    isFirstInlineTab: inlineItemsIds[0] === id,\n                    isLastInlineTab: inlineItemsIds[inlineItemsIds.length - 1] === id,\n                    selected: selectedId === id,\n                })}\n            </span>\n        );\n    },\n);\n\nTabsExtendedTab.displayName = \"TabsExtendedTab\";\n"],"names":["React"],"mappings":";;;;;;AA4BO,MAAM,kBAAkBA,eAAM;AAAA,EACjC,CAAC,EAAE,UAAU,IAAI,WAAW,SAAS,GAAG,mBAAA,GAAsB,QAAQ;AAClE,UAAM,EAAE,kBAAkB,gBAAgB,YAAY,YAAA,IAAgB,WAAW,mBAAmB;AACpG,UAAM,EAAE,UAAA,IAAc,WAAW,sBAAsB;AAEvD,UAAM,eAAe,iBAAiB,SAAS,EAAE;AAEjD,UAAM,cAAc,CAAC,UAA6C;AAC9D,kBAAY,EAAE;AACd,yCAAU;AAAA,IACd;AAGA,UAAM,QAAQ,MAAM;AAChB,UAAI,aAAa,cAAc;AAC3B,eAAO;AAAA,MACX;AAEA,aAAO;AAAA,IACX;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAI,MAAA;AAAA,QACJ,WAAW,KAAK,OAAO,iBAAiB,EAAE,CAAC,OAAO,MAAM,GAAG,aAAA,GAAgB,SAAS;AAAA,QACpF,SAAS,YAAY,SAAY;AAAA,QAChC,GAAG;AAAA,QACJ,MAAK;AAAA,QAEL,oBAAkB;AAAA,QAClB,KAAK,YAAY,SAAY;AAAA,QAE5B,UAAA,SAAS;AAAA,UACN,kBAAkB,eAAe,CAAC,MAAM;AAAA,UACxC,iBAAiB,eAAe,eAAe,SAAS,CAAC,MAAM;AAAA,UAC/D,UAAU,eAAe;AAAA,QAAA,CAC5B;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,gBAAgB,cAAc;"}

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-DfvHt3TJ.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-DEIy9WE_.js";
+import { c as clsx } from "../../../chunks/vendor-D4wvHis9.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-CTCsYynd.js";
 import { TabsExtendedContext } from "../TabsExtendedContext.js";
 import { EFontType } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
@@ -17,7 +17,7 @@ const TabsExtendedTabButton = React__default.forwardRef(
       styles.tabsExtendedTabButton,
       styles[size],
       TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP[type],
-      { [styles.selected]: !!selected },
+      { [styles.selected]: selected },
       className
     );
     return /* @__PURE__ */ jsxs("button", { type: "button", className: classNames, role: "tab", "aria-selected": selected, ref, ...rest, children: [

package/components/TabsExtended/components/TabsExtendedTabButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsExtendedTabButton.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedTabButton.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP, TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP } from \"../utils\";\nimport { TabsExtendedContext } from \"../TabsExtendedContext\";\nimport { Text, EFontType } from \"../../Typography\";\nimport { Badge } from \"../../Badge\";\nimport { EComponentSize } from \"../../../enums\";\nimport styles from \"../styles/TabsExtendedTabButton.module.less\";\n\n/** Свойства компонента TabsExtendedTabButton. */\nexport interface ITabsExtendedButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n    /** Выбранное состояние. */\n    selected?: boolean;\n    /** Размер компонента. */\n    size?: EComponentSize;\n    /** Флаг отображения значка новых уведомлений. */\n    showNotificationIcon?: boolean;\n}\n\n/**\n * Кнопка таба.\n * Если используется кастомный компонент кнопки, желательно, чтобы он рендерил html-элемент button, иначе выбор с клавиатуры может работать не корректно.\n */\nexport const TabsExtendedTabButton = React.forwardRef<HTMLButtonElement, ITabsExtendedButtonProps>(\n    ({ children, className, selected, size = EComponentSize.MD, showNotificationIcon, ...rest }, ref) => {\n        const { type } = useContext(TabsExtendedContext);\n\n        const classNames = clsx(\n            styles.tabsExtendedTabButton,\n            styles[size],\n            TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP[type],\n            { [styles.selected]: !!selected },\n            className,\n        );\n\n        return (\n            <button type=\"button\" className={classNames} role=\"tab\" aria-selected={selected} ref={ref} {...rest}>\n                <Text\n                    className={styles.tabsExtendedTabButtonTextDefault}\n                    size={TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP[size]}\n                    type={EFontType.SECONDARY}\n                >\n                    {children}\n                </Text>\n                <Text\n                    className={styles.tabsExtendedTabButtonTextHover}\n                    size={TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP[size]}\n                >\n                    {children}\n                </Text>\n                {showNotificationIcon && <Badge.Dot size={size} className={styles.notificationIcon} />}\n            </button>\n        );\n    },\n);\n\nTabsExtendedTabButton.displayName = \"TabsExtendedTabButton\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAuBO,MAAM,wBAAwBA,eAAM;AAAA,EACvC,CAAC,EAAE,UAAU,WAAW,UAAU,OAAO,eAAe,IAAI,sBAAsB,GAAG,KAAA,GAAQ,QAAQ;AACjG,UAAM,EAAE,KAAA,IAAS,WAAW,mBAAmB;AAE/C,UAAM,aAAa;AAAA,MACf,OAAO;AAAA,MACP,OAAO,IAAI;AAAA,MACX,qCAAqC,IAAI;AAAA,MACzC,EAAE,CAAC,OAAO,QAAQ,GAAG,CAAC,CAAC,SAAA;AAAA,MACvB;AAAA,IAAA;AAGJ,WACI,qBAAC,UAAA,EAAO,MAAK,UAAS,WAAW,YAAY,MAAK,OAAM,iBAAe,UAAU,KAAW,GAAG,MAC3F,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,OAAO;AAAA,UAClB,MAAM,oCAAoC,IAAI;AAAA,UAC9C,MAAM,UAAU;AAAA,UAEf;AAAA,QAAA;AAAA,MAAA;AAAA,MAEL;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,OAAO;AAAA,UAClB,MAAM,oCAAoC,IAAI;AAAA,UAE7C;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,4CAAyB,MAAM,KAAN,EAAU,MAAY,WAAW,OAAO,iBAAA,CAAkB;AAAA,IAAA,GACxF;AAAA,EAER;AACJ;AAEA,sBAAsB,cAAc;"}
+{"version":3,"file":"TabsExtendedTabButton.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedTabButton.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport clsx from \"clsx\";\nimport { TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP, TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP } from \"../utils\";\nimport { TabsExtendedContext } from \"../TabsExtendedContext\";\nimport { Text, EFontType } from \"../../Typography\";\nimport { Badge } from \"../../Badge\";\nimport { EComponentSize } from \"../../../enums\";\nimport styles from \"../styles/TabsExtendedTabButton.module.less\";\n\n/** Свойства компонента TabsExtendedTabButton. */\nexport interface ITabsExtendedButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n    /** Выбранное состояние. Управляет классом selected и aria-selected. */\n    selected?: boolean;\n    /** Размер компонента. По умолчанию EComponentSize.MD. */\n    size?: EComponentSize;\n    /** Флаг отображения значка новых уведомлений. */\n    showNotificationIcon?: boolean;\n}\n\n/**\n * Кнопка таба.\n * Если используется кастомный компонент кнопки, желательно, чтобы он рендерил html-элемент button, иначе выбор с клавиатуры может работать не корректно.\n */\nexport const TabsExtendedTabButton = React.forwardRef<HTMLButtonElement, ITabsExtendedButtonProps>(\n    ({ children, className, selected, size = EComponentSize.MD, showNotificationIcon, ...rest }, ref) => {\n        const { type } = useContext(TabsExtendedContext);\n\n        const classNames = clsx(\n            styles.tabsExtendedTabButton,\n            styles[size],\n            TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP[type],\n            { [styles.selected]: selected },\n            className,\n        );\n\n        return (\n            <button type=\"button\" className={classNames} role=\"tab\" aria-selected={selected} ref={ref} {...rest}>\n                <Text\n                    className={styles.tabsExtendedTabButtonTextDefault}\n                    size={TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP[size]}\n                    type={EFontType.SECONDARY}\n                >\n                    {children}\n                </Text>\n                <Text\n                    className={styles.tabsExtendedTabButtonTextHover}\n                    size={TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP[size]}\n                >\n                    {children}\n                </Text>\n                {showNotificationIcon && <Badge.Dot size={size} className={styles.notificationIcon} />}\n            </button>\n        );\n    },\n);\n\nTabsExtendedTabButton.displayName = \"TabsExtendedTabButton\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAuBO,MAAM,wBAAwBA,eAAM;AAAA,EACvC,CAAC,EAAE,UAAU,WAAW,UAAU,OAAO,eAAe,IAAI,sBAAsB,GAAG,KAAA,GAAQ,QAAQ;AACjG,UAAM,EAAE,KAAA,IAAS,WAAW,mBAAmB;AAE/C,UAAM,aAAa;AAAA,MACf,OAAO;AAAA,MACP,OAAO,IAAI;AAAA,MACX,qCAAqC,IAAI;AAAA,MACzC,EAAE,CAAC,OAAO,QAAQ,GAAG,SAAA;AAAA,MACrB;AAAA,IAAA;AAGJ,WACI,qBAAC,UAAA,EAAO,MAAK,UAAS,WAAW,YAAY,MAAK,OAAM,iBAAe,UAAU,KAAW,GAAG,MAC3F,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,OAAO;AAAA,UAClB,MAAM,oCAAoC,IAAI;AAAA,UAC9C,MAAM,UAAU;AAAA,UAEf;AAAA,QAAA;AAAA,MAAA;AAAA,MAEL;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,OAAO;AAAA,UAClB,MAAM,oCAAoC,IAAI;AAAA,UAE7C;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,4CAAyB,MAAM,KAAN,EAAU,MAAY,WAAW,OAAO,iBAAA,CAAkB;AAAA,IAAA,GACxF;AAAA,EAER;AACJ;AAEA,sBAAsB,cAAc;"}

package/components/TabsExtended/components/TabsExtendedTabContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsExtendedTabContext.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedTabContext.ts"],"sourcesContent":["import React from \"react\";\n\nexport interface ITabsExtendedTabContext {\n    // Это скрытый tab, отрендеренный для расчета позиционирования отображаемых табов.\n    isFakeTab: boolean;\n}\n\nconst contextInitial: ITabsExtendedTabContext = {\n    isFakeTab: false,\n};\n\nexport const TabsExtendedTabContext = React.createContext<ITabsExtendedTabContext>(contextInitial);\n"],"names":["React"],"mappings":";AAOA,MAAM,iBAA0C;AAAA,EAC5C,WAAW;AACf;AAEO,MAAM,yBAAyBA,eAAM,cAAuC,cAAc;"}
+{"version":3,"file":"TabsExtendedTabContext.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedTabContext.ts"],"sourcesContent":["import React from \"react\";\n\n/** Значение контекста, отличающее скрытую копию табов от отображаемой. */\nexport interface ITabsExtendedTabContext {\n    /** Это скрытый tab, отрендеренный для расчёта позиционирования отображаемых табов. */\n    isFakeTab: boolean;\n}\n\nconst contextInitial: ITabsExtendedTabContext = {\n    isFakeTab: false,\n};\n\nexport const TabsExtendedTabContext = React.createContext<ITabsExtendedTabContext>(contextInitial);\n"],"names":["React"],"mappings":";AAQA,MAAM,iBAA0C;AAAA,EAC5C,WAAW;AACf;AAEO,MAAM,yBAAyBA,eAAM,cAAuC,cAAc;"}