@sberbusiness/triplex-next 1.46.0 → 1.48.0

package/components/TabsLine/TabsLine.js

@@ -1,31 +1,33 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../chunks/vendor-DqjKLGwf.js";
+import React__default from "react";
+import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { MobileView } from "../MobileView/MobileView.js";
 import "../MobileView/useMobileView.js";
 import { TabsLineDesktop } from "./components/TabsLineDesktop.js";
 import { TabsLineMobile } from "./components/TabsLineMobile.js";
-import { s as styles } from "../../chunks/TabsLine.module-RwtPmU40.js";
+import { s as styles } from "../../chunks/TabsLine.module-v6dP7lY_.js";
 import "./components/TabsLineDropdown.js";
 import "./components/TabsLineItem.js";
-const TabsLine = ({
-  className,
-  dropdownTargetHtmlAttributes,
-  maxVisible,
-  onChangeTab,
-  paddingX,
-  selectedId,
-  tabs,
-  size,
-  withSeparator,
-  ...htmlDivAttributes
-}) => {
-  return /* @__PURE__ */ jsx(
+const TabsLine = React__default.forwardRef(
+  ({
+    className,
+    dropdownTargetHtmlAttributes,
+    maxVisible,
+    onChangeTab,
+    paddingX,
+    selectedId,
+    tabs,
+    size,
+    withSeparator,
+    ...htmlDivAttributes
+  }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       role: "tablist",
       className: clsx(className, styles.tabsLineWrapper, { [styles.withSeparator]: withSeparator }),
       ...htmlDivAttributes,
       "data-paddingx-size": paddingX,
+      ref,
       children: /* @__PURE__ */ jsx(
         MobileView,
         {
@@ -44,8 +46,9 @@ const TabsLine = ({
         }
       )
     }
-  );
-};
+  )
+);
+TabsLine.displayName = "TabsLine";
 export {
   TabsLine
 };

package/components/TabsLine/TabsLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsLine.js","sources":["../../../src/components/TabsLine/TabsLine.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { MobileView } from \"../MobileView\";\nimport { TabsLineDesktop, ITabsLineDesktopProps } from \"./components/TabsLineDesktop\";\nimport { TabsLineMobile } from \"./components/TabsLineMobile\";\nimport styles from \"./styles/TabsLine.module.less\";\n\n/** Состояние компонента TabsLine. */\nexport interface ITabsLineProps extends ITabsLineDesktopProps {\n    /** Горизонтальный отступ от первого таба слева и последнего таба справа. */\n    paddingX?: 0 | 8 | 16 | 24;\n    /** Разделитель в виде нижнего бордера. */\n    withSeparator?: boolean;\n}\n\n/** Компонент TabsLine. */\nexport const TabsLine: React.FC<ITabsLineProps> = ({\n    className,\n    dropdownTargetHtmlAttributes,\n    maxVisible,\n    onChangeTab,\n    paddingX,\n    selectedId,\n    tabs,\n    size,\n    withSeparator,\n    ...htmlDivAttributes\n}) => {\n    return (\n        <div\n            role=\"tablist\"\n            className={clsx(className, styles.tabsLineWrapper, { [styles.withSeparator]: withSeparator })}\n            {...htmlDivAttributes}\n            data-paddingx-size={paddingX}\n        >\n            <MobileView\n                fallback={\n                    <TabsLineDesktop\n                        tabs={tabs}\n                        onChangeTab={onChangeTab}\n                        selectedId={selectedId}\n                        dropdownTargetHtmlAttributes={dropdownTargetHtmlAttributes}\n                        maxVisible={maxVisible}\n                        size={size}\n                    />\n                }\n            >\n                <TabsLineMobile tabs={tabs} onChangeTab={onChangeTab} selectedId={selectedId} />\n            </MobileView>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAgBO,MAAM,WAAqC,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,WAAW,KAAK,WAAW,OAAO,iBAAiB,EAAE,CAAC,OAAO,aAAa,GAAG,eAAe;AAAA,MAC3F,GAAG;AAAA,MACJ,sBAAoB;AAAA,MAEpB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,UACI;AAAA,YAAC;AAAA,YAAA;AAAA,cACG;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA;AAAA,UAIR,UAAA,oBAAC,gBAAA,EAAe,MAAY,aAA0B,WAAA,CAAwB;AAAA,QAAA;AAAA,MAAA;AAAA,IAClF;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"TabsLine.js","sources":["../../../src/components/TabsLine/TabsLine.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport { MobileView } from \"../MobileView\";\nimport { ITabsLineDesktopProps, TabsLineDesktop } from \"./components/TabsLineDesktop\";\nimport { TabsLineMobile } from \"./components/TabsLineMobile\";\nimport styles from \"./styles/TabsLine.module.less\";\n\n/** Свойства компонента TabsLine. */\nexport interface ITabsLineProps extends ITabsLineDesktopProps {\n    /** Горизонтальный отступ от первого таба слева и последнего таба справа. */\n    paddingX?: 0 | 8 | 16 | 24;\n    /** Разделитель в виде нижнего бордера. По умолчанию false. */\n    withSeparator?: boolean;\n}\n\n/**\n * Линейка табов-подчёркиваний. На десктопе не поместившиеся по maxVisible табы уезжают в дропдаун,\n * на мобильном (<768px) все табы остаются в строке с горизонтальной прокруткой.\n */\nexport const TabsLine = React.forwardRef<HTMLDivElement, ITabsLineProps>(\n    (\n        {\n            className,\n            dropdownTargetHtmlAttributes,\n            maxVisible,\n            onChangeTab,\n            paddingX,\n            selectedId,\n            tabs,\n            size,\n            withSeparator,\n            ...htmlDivAttributes\n        },\n        ref,\n    ) => (\n        <div\n            role=\"tablist\"\n            className={clsx(className, styles.tabsLineWrapper, { [styles.withSeparator]: withSeparator })}\n            {...htmlDivAttributes}\n            data-paddingx-size={paddingX}\n            ref={ref}\n        >\n            <MobileView\n                fallback={\n                    <TabsLineDesktop\n                        tabs={tabs}\n                        onChangeTab={onChangeTab}\n                        selectedId={selectedId}\n                        dropdownTargetHtmlAttributes={dropdownTargetHtmlAttributes}\n                        maxVisible={maxVisible}\n                        size={size}\n                    />\n                }\n            >\n                <TabsLineMobile tabs={tabs} onChangeTab={onChangeTab} selectedId={selectedId} />\n            </MobileView>\n        </div>\n    ),\n);\n\nTabsLine.displayName = \"TabsLine\";\n"],"names":["React"],"mappings":";;;;;;;;;;AAmBO,MAAM,WAAWA,eAAM;AAAA,EAC1B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QAEA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,WAAW,KAAK,WAAW,OAAO,iBAAiB,EAAE,CAAC,OAAO,aAAa,GAAG,eAAe;AAAA,MAC3F,GAAG;AAAA,MACJ,sBAAoB;AAAA,MACpB;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,UACI;AAAA,YAAC;AAAA,YAAA;AAAA,cACG;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UAAA;AAAA,UAIR,UAAA,oBAAC,gBAAA,EAAe,MAAY,aAA0B,WAAA,CAAwB;AAAA,QAAA;AAAA,MAAA;AAAA,IAClF;AAAA,EAAA;AAGZ;AAEA,SAAS,cAAc;"}

package/components/TabsLine/components/TabsLineDesktop.js

@@ -1,108 +1,95 @@
-import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useState, useRef, useMemo } from "react";
+import { c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
+import { isKey } from "../../../utils/keyboard.js";
+import { splitTabsByMaxVisible } from "../utils.js";
 import { TabsLineDropdown } from "./TabsLineDropdown.js";
 import { TabsLineItem } from "./TabsLineItem.js";
-import { isKey } from "../../../utils/keyboard.js";
-import { l as lodashExports } from "../../../chunks/vendor-DqjKLGwf.js";
-import { s as styles } from "../../../chunks/TabsLine.module-RwtPmU40.js";
-const TabsLineDesktop = ({
-  tabs,
-  dropdownTargetHtmlAttributes,
-  selectedId,
-  onChangeTab,
-  maxVisible,
-  size
-}) => {
-  const [inlineTabs, setInlineTabs] = useState([]);
-  const [dropdownTabs, setDropdownTabs] = useState([]);
-  const tabsRef = useRef(null);
-  const focusableTabIndexRef = useRef(0);
-  const inlineTabsRefs = useRef([]);
-  useEffect(() => {
-    const newDropdownTabs = [];
-    const newInlineTabs = [];
-    tabs.forEach((item, i) => {
-      const collapsed = maxVisible && i + 1 >= maxVisible && tabs.length > maxVisible;
-      const target = collapsed ? newDropdownTabs : newInlineTabs;
-      target.push(item);
-    });
-    if (lodashExports.isEqual(newInlineTabs, inlineTabs) === false) {
-      setInlineTabs(newInlineTabs);
-    }
-    if (lodashExports.isEqual(newDropdownTabs, dropdownTabs) === false) {
-      setDropdownTabs(newDropdownTabs);
-    }
-  }, [tabs, maxVisible]);
-  const renderInlineTab = ({ selected, onClick, onFocus, onBlur, size: itemSize, ...item }, index) => {
-    const tabIndex = focusableTabIndexRef.current === index ? 0 : -1;
-    const handleClick = (event) => {
-      onChangeTab(item.id);
-      onClick == null ? void 0 : onClick(event);
-    };
-    const handleKeyDown = (event) => {
-      const isLastInlineTab = inlineTabs.length - 1 === focusableTabIndexRef.current;
-      if (isKey(event.code, "ARROW_LEFT") || isKey(event.code, "ARROW_RIGHT") && !isLastInlineTab) {
-        const delta = isKey(event.code, "ARROW_RIGHT") ? 1 : -1;
-        const nextTabIndex = focusableTabIndexRef.current + delta;
-        const nextTab = inlineTabsRefs.current[nextTabIndex];
-        if (nextTab) {
-          event.preventDefault();
-          nextTab.focus();
+import { s as styles } from "../../../chunks/TabsLine.module-v6dP7lY_.js";
+const TabsLineDesktop = React__default.forwardRef(
+  ({
+    className,
+    dropdownTargetHtmlAttributes,
+    maxVisible,
+    onChangeTab,
+    selectedId,
+    size,
+    tabs,
+    ...htmlDivAttributes
+  }, ref) => {
+    const [focusableTabIndex, setFocusableTabIndex] = useState(0);
+    const inlineTabsRefs = useRef([]);
+    const { inlineTabs, dropdownTabs } = useMemo(() => splitTabsByMaxVisible(tabs, maxVisible), [tabs, maxVisible]);
+    const activeTabIndex = focusableTabIndex < inlineTabs.length ? focusableTabIndex : 0;
+    const renderInlineTab = ({ selected, onClick, onFocus, onBlur, size: itemSize, ...item }, index) => {
+      const handleClick = (event) => {
+        onChangeTab(item.id);
+        onClick == null ? void 0 : onClick(event);
+      };
+      const handleKeyDown = (event) => {
+        const isLastInlineTab = index === inlineTabs.length - 1;
+        if (isKey(event.code, "ARROW_LEFT") || isKey(event.code, "ARROW_RIGHT") && !isLastInlineTab) {
+          const delta = isKey(event.code, "ARROW_RIGHT") ? 1 : -1;
+          const nextTab = inlineTabsRefs.current[index + delta];
+          if (nextTab) {
+            event.preventDefault();
+            nextTab.focus();
+          }
         }
-      }
-    };
-    const handleFocus = (event) => {
-      focusableTabIndexRef.current = index;
-      onFocus == null ? void 0 : onFocus(event);
-    };
-    const handleBlur = (event) => {
-      focusableTabIndexRef.current = 0;
-      onBlur == null ? void 0 : onBlur(event);
-    };
-    const setRef = (node) => {
-      inlineTabsRefs.current[index] = node;
+      };
+      const handleFocus = (event) => {
+        setFocusableTabIndex(index);
+        onFocus == null ? void 0 : onFocus(event);
+      };
+      const handleBlur = (event) => {
+        setFocusableTabIndex(0);
+        onBlur == null ? void 0 : onBlur(event);
+      };
+      const setRef = (node) => {
+        inlineTabsRefs.current[index] = node;
+      };
+      return /* @__PURE__ */ jsx(
+        TabsLineItem,
+        {
+          selected: selectedId === item.id,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          tabIndex: activeTabIndex === index ? 0 : -1,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          ...item,
+          size: itemSize ?? size,
+          ref: setRef
+        },
+        item.id
+      );
     };
-    return /* @__PURE__ */ jsx(
-      TabsLineItem,
-      {
-        selected: selectedId === item.id,
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        tabIndex,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        ...item,
-        size: itemSize ?? size,
-        ref: setRef
-      },
-      item.id
-    );
-  };
-  const renderTabs = () => {
-    const itemsToRender = inlineTabs.map((item, index) => renderInlineTab(item, index));
-    if (dropdownTabs.length > 0) {
+    const renderDropdown = () => {
       const selectedTab = dropdownTabs.find((item) => item.id === selectedId);
-      const dropdownLabel = selectedTab ? selectedTab.label : dropdownTabs[0].label;
-      itemsToRender.push(
-        /* @__PURE__ */ jsx(
-          TabsLineDropdown,
-          {
-            tabs: dropdownTabs,
-            active: selectedTab !== void 0,
-            label: dropdownLabel,
-            onClickTab: (item) => onChangeTab(item.id),
-            selected: selectedTab,
-            targetHtmlAttributes: dropdownTargetHtmlAttributes,
-            size
-          },
-          "TabsLineDropdown"
-        )
+      return /* @__PURE__ */ jsx(
+        TabsLineDropdown,
+        {
+          tabs: dropdownTabs,
+          active: selectedTab !== void 0,
+          label: selectedTab ? selectedTab.label : dropdownTabs[0].label,
+          onClickTab: (item) => onChangeTab(item.id),
+          selected: selectedTab,
+          targetHtmlAttributes: dropdownTargetHtmlAttributes,
+          size
+        },
+        "TabsLineDropdown"
       );
+    };
+    if (tabs.length === 0) {
+      return null;
     }
-    return itemsToRender;
-  };
-  return tabs.length ? /* @__PURE__ */ jsx("div", { className: styles.tabsLine, ref: tabsRef, "data-size": size, children: renderTabs() }) : null;
-};
+    return /* @__PURE__ */ jsxs("div", { ...htmlDivAttributes, className: clsx(styles.tabsLine, className), "data-size": size, ref, children: [
+      inlineTabs.map((item, index) => renderInlineTab(item, index)),
+      dropdownTabs.length > 0 && renderDropdown()
+    ] });
+  }
+);
+TabsLineDesktop.displayName = "TabsLineDesktop";
 export {
   TabsLineDesktop
 };

package/components/TabsLine/components/TabsLineDesktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsLineDesktop.js","sources":["../../../../src/components/TabsLine/components/TabsLineDesktop.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport { TabsLineDropdown } from \"./TabsLineDropdown\";\nimport { ITabsLineItemProps, TabsLineItem } from \"./TabsLineItem\";\nimport { ITabsLineBaseProps } from \"../types\";\nimport { isKey } from \"../../../utils/keyboard\";\nimport { isEqual } from \"lodash\";\nimport styles from \"../styles/TabsLine.module.less\";\n\n/** Свойства компонента TabsLineDesktop. */\nexport interface ITabsLineDesktopProps extends ITabsLineBaseProps {\n    /** Атрибуты кнопки дропдауна. */\n    dropdownTargetHtmlAttributes?: React.HTMLAttributes<HTMLButtonElement> & TestProps;\n    /** Максимальное число отображаемых табов. */\n    maxVisible?: number;\n}\n\nexport const TabsLineDesktop: React.FC<ITabsLineDesktopProps> = ({\n    tabs,\n    dropdownTargetHtmlAttributes,\n    selectedId,\n    onChangeTab,\n    maxVisible,\n    size,\n}) => {\n    const [inlineTabs, setInlineTabs] = useState<ITabsLineItemProps[]>([]);\n    const [dropdownTabs, setDropdownTabs] = useState<ITabsLineItemProps[]>([]);\n\n    const tabsRef = useRef<HTMLDivElement>(null);\n    const focusableTabIndexRef = useRef(0);\n    const inlineTabsRefs = useRef<HTMLButtonElement[]>([]);\n\n    useEffect(() => {\n        const newDropdownTabs: ITabsLineItemProps[] = [];\n        const newInlineTabs: ITabsLineItemProps[] = [];\n\n        tabs.forEach((item: ITabsLineItemProps, i: number) => {\n            const collapsed = maxVisible && i + 1 >= maxVisible && tabs.length > maxVisible;\n            const target = collapsed ? newDropdownTabs : newInlineTabs;\n\n            target.push(item);\n        });\n\n        if (isEqual(newInlineTabs, inlineTabs) === false) {\n            setInlineTabs(newInlineTabs);\n        }\n\n        if (isEqual(newDropdownTabs, dropdownTabs) === false) {\n            setDropdownTabs(newDropdownTabs);\n        }\n    }, [tabs, maxVisible]);\n\n    const renderInlineTab = (\n        { selected, onClick, onFocus, onBlur, size: itemSize, ...item }: ITabsLineItemProps,\n        index: number,\n    ) => {\n        const tabIndex = focusableTabIndexRef.current === index ? 0 : -1;\n\n        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            onChangeTab(item.id);\n            onClick?.(event);\n        };\n\n        const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            /** Является ли таб в фокусе последним перед дропдауном */\n            const isLastInlineTab = inlineTabs.length - 1 === focusableTabIndexRef.current;\n\n            if (isKey(event.code, \"ARROW_LEFT\") || (isKey(event.code, \"ARROW_RIGHT\") && !isLastInlineTab)) {\n                /** Движение влево или вправо */\n                const delta = isKey(event.code, \"ARROW_RIGHT\") ? 1 : -1;\n\n                /** Следующий таб, к которому переходим клавишей ArrowLeft/ArrowRight */\n                const nextTabIndex = focusableTabIndexRef.current + delta;\n                const nextTab = inlineTabsRefs.current[nextTabIndex];\n\n                if (nextTab) {\n                    event.preventDefault();\n                    nextTab.focus();\n                }\n            }\n        };\n\n        const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n            focusableTabIndexRef.current = index;\n            onFocus?.(event);\n        };\n\n        const handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            focusableTabIndexRef.current = 0;\n            onBlur?.(event);\n        };\n\n        const setRef = (node: HTMLButtonElement) => {\n            inlineTabsRefs.current[index] = node;\n        };\n\n        return (\n            <TabsLineItem\n                key={item.id}\n                selected={selectedId === item.id}\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                tabIndex={tabIndex}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                {...item}\n                size={itemSize ?? size}\n                ref={setRef}\n            />\n        );\n    };\n\n    const renderTabs = () => {\n        const itemsToRender: JSX.Element[] = inlineTabs.map((item, index) => renderInlineTab(item, index));\n\n        if (dropdownTabs.length > 0) {\n            const selectedTab = dropdownTabs.find((item) => item.id === selectedId);\n            const dropdownLabel = selectedTab ? selectedTab.label : dropdownTabs[0].label;\n\n            itemsToRender.push(\n                <TabsLineDropdown\n                    key=\"TabsLineDropdown\"\n                    tabs={dropdownTabs}\n                    active={selectedTab !== undefined}\n                    label={dropdownLabel}\n                    onClickTab={(item) => onChangeTab(item.id)}\n                    selected={selectedTab}\n                    targetHtmlAttributes={dropdownTargetHtmlAttributes}\n                    size={size}\n                />,\n            );\n        }\n\n        return itemsToRender;\n    };\n\n    return tabs.length ? (\n        <div className={styles.tabsLine} ref={tabsRef} data-size={size}>\n            {/* eslint-disable-next-line react-hooks/refs */}\n            {renderTabs()}\n        </div>\n    ) : null;\n};\n"],"names":["isEqual"],"mappings":"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"}
+{"version":3,"file":"TabsLineDesktop.js","sources":["../../../../src/components/TabsLine/components/TabsLineDesktop.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport { isKey } from \"../../../utils/keyboard\";\nimport { ITabsLineBaseProps } from \"../types\";\nimport { splitTabsByMaxVisible } from \"../utils\";\nimport { TabsLineDropdown } from \"./TabsLineDropdown\";\nimport { ITabsLineItemProps, TabsLineItem } from \"./TabsLineItem\";\nimport styles from \"../styles/TabsLine.module.less\";\n\n/** Свойства компонента TabsLineDesktop. */\nexport interface ITabsLineDesktopProps extends ITabsLineBaseProps {\n    /** Атрибуты кнопки дропдауна. */\n    dropdownTargetHtmlAttributes?: React.HTMLAttributes<HTMLButtonElement> & TestProps;\n    /** Максимальное число элементов строки, включая кнопку дропдауна. Без него все табы остаются в строке. */\n    maxVisible?: number;\n}\n\n/**\n * Десктопный вариант TabsLine: табы в строку, не поместившиеся по maxVisible — в дропдауне.\n * Клавиатурная навигация по табам строки — стрелками влево/вправо (roving tabIndex).\n */\nexport const TabsLineDesktop = React.forwardRef<HTMLDivElement, ITabsLineDesktopProps>(\n    (\n        {\n            className,\n            dropdownTargetHtmlAttributes,\n            maxVisible,\n            onChangeTab,\n            selectedId,\n            size,\n            tabs,\n            ...htmlDivAttributes\n        },\n        ref,\n    ) => {\n        /** Индекс таба строки, доступного по Tab. Остальные табы выключены из порядка обхода. */\n        const [focusableTabIndex, setFocusableTabIndex] = useState(0);\n        const inlineTabsRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n        const { inlineTabs, dropdownTabs } = useMemo(() => splitTabsByMaxVisible(tabs, maxVisible), [tabs, maxVisible]);\n\n        // Если tabs или maxVisible уменьшились, сохранённый индекс может выйти за границы строки.\n        // Без клэмпа ни один таб не получил бы tabIndex=0, и строка выпала бы из порядка обхода.\n        // Клэмп производный, а не через useEffect: состояние, синхронизируемое эффектом, вернуло бы\n        // react-hooks/set-state-in-effect, который этот рефакторинг как раз снял.\n        const activeTabIndex = focusableTabIndex < inlineTabs.length ? focusableTabIndex : 0;\n\n        const renderInlineTab = (\n            { selected, onClick, onFocus, onBlur, size: itemSize, ...item }: ITabsLineItemProps,\n            index: number,\n        ) => {\n            const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n                onChangeTab(item.id);\n                onClick?.(event);\n            };\n\n            const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n                /** Является ли таб в фокусе последним перед дропдауном. */\n                const isLastInlineTab = index === inlineTabs.length - 1;\n\n                if (isKey(event.code, \"ARROW_LEFT\") || (isKey(event.code, \"ARROW_RIGHT\") && !isLastInlineTab)) {\n                    const delta = isKey(event.code, \"ARROW_RIGHT\") ? 1 : -1;\n                    const nextTab = inlineTabsRefs.current[index + delta];\n\n                    if (nextTab) {\n                        event.preventDefault();\n                        nextTab.focus();\n                    }\n                }\n            };\n\n            const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n                setFocusableTabIndex(index);\n                onFocus?.(event);\n            };\n\n            const handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n                setFocusableTabIndex(0);\n                onBlur?.(event);\n            };\n\n            const setRef = (node: HTMLButtonElement | null) => {\n                inlineTabsRefs.current[index] = node;\n            };\n\n            return (\n                <TabsLineItem\n                    key={item.id}\n                    selected={selectedId === item.id}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    tabIndex={activeTabIndex === index ? 0 : -1}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    // Осознанно спредим item последним: onClick/onFocus/onBlur/size выделены выше и смерджены\n                    // с внутренними, а onKeyDown и tabIndex из элемента tabs намеренно перекрывают внутренние —\n                    // это pre-existing контракт (см. «Ограничения» в TabsLine-ai.md), он не чинится в рамках\n                    // рефакторинга, чтобы не менять публичное поведение.\n                    {...item}\n                    size={itemSize ?? size}\n                    ref={setRef}\n                />\n            );\n        };\n\n        const renderDropdown = () => {\n            const selectedTab = dropdownTabs.find((item) => item.id === selectedId);\n\n            return (\n                <TabsLineDropdown\n                    key=\"TabsLineDropdown\"\n                    tabs={dropdownTabs}\n                    active={selectedTab !== undefined}\n                    label={selectedTab ? selectedTab.label : dropdownTabs[0].label}\n                    onClickTab={(item) => onChangeTab(item.id)}\n                    selected={selectedTab}\n                    targetHtmlAttributes={dropdownTargetHtmlAttributes}\n                    size={size}\n                />\n            );\n        };\n\n        if (tabs.length === 0) {\n            return null;\n        }\n\n        return (\n            <div {...htmlDivAttributes} className={clsx(styles.tabsLine, className)} data-size={size} ref={ref}>\n                {inlineTabs.map((item, index) => renderInlineTab(item, index))}\n                {dropdownTabs.length > 0 && renderDropdown()}\n            </div>\n        );\n    },\n);\n\nTabsLineDesktop.displayName = \"TabsLineDesktop\";\n"],"names":["React"],"mappings":";;;;;;;;AAsBO,MAAM,kBAAkBA,eAAM;AAAA,EACjC,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AAED,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AAC5D,UAAM,iBAAiB,OAAqC,EAAE;AAE9D,UAAM,EAAE,YAAY,aAAA,IAAiB,QAAQ,MAAM,sBAAsB,MAAM,UAAU,GAAG,CAAC,MAAM,UAAU,CAAC;AAM9G,UAAM,iBAAiB,oBAAoB,WAAW,SAAS,oBAAoB;AAEnF,UAAM,kBAAkB,CACpB,EAAE,UAAU,SAAS,SAAS,QAAQ,MAAM,UAAU,GAAG,KAAA,GACzD,UACC;AACD,YAAM,cAAc,CAAC,UAA+C;AAChE,oBAAY,KAAK,EAAE;AACnB,2CAAU;AAAA,MACd;AAEA,YAAM,gBAAgB,CAAC,UAAkD;AAErE,cAAM,kBAAkB,UAAU,WAAW,SAAS;AAEtD,YAAI,MAAM,MAAM,MAAM,YAAY,KAAM,MAAM,MAAM,MAAM,aAAa,KAAK,CAAC,iBAAkB;AAC3F,gBAAM,QAAQ,MAAM,MAAM,MAAM,aAAa,IAAI,IAAI;AACrD,gBAAM,UAAU,eAAe,QAAQ,QAAQ,KAAK;AAEpD,cAAI,SAAS;AACT,kBAAM,eAAA;AACN,oBAAQ,MAAA;AAAA,UACZ;AAAA,QACJ;AAAA,MACJ;AAEA,YAAM,cAAc,CAAC,UAA+C;AAChE,6BAAqB,KAAK;AAC1B,2CAAU;AAAA,MACd;AAEA,YAAM,aAAa,CAAC,UAA+C;AAC/D,6BAAqB,CAAC;AACtB,yCAAS;AAAA,MACb;AAEA,YAAM,SAAS,CAAC,SAAmC;AAC/C,uBAAe,QAAQ,KAAK,IAAI;AAAA,MACpC;AAEA,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UAEG,UAAU,eAAe,KAAK;AAAA,UAC9B,SAAS;AAAA,UACT,WAAW;AAAA,UACX,UAAU,mBAAmB,QAAQ,IAAI;AAAA,UACzC,SAAS;AAAA,UACT,QAAQ;AAAA,UAKP,GAAG;AAAA,UACJ,MAAM,YAAY;AAAA,UAClB,KAAK;AAAA,QAAA;AAAA,QAbA,KAAK;AAAA,MAAA;AAAA,IAgBtB;AAEA,UAAM,iBAAiB,MAAM;AACzB,YAAM,cAAc,aAAa,KAAK,CAAC,SAAS,KAAK,OAAO,UAAU;AAEtE,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UAEG,MAAM;AAAA,UACN,QAAQ,gBAAgB;AAAA,UACxB,OAAO,cAAc,YAAY,QAAQ,aAAa,CAAC,EAAE;AAAA,UACzD,YAAY,CAAC,SAAS,YAAY,KAAK,EAAE;AAAA,UACzC,UAAU;AAAA,UACV,sBAAsB;AAAA,UACtB;AAAA,QAAA;AAAA,QAPI;AAAA,MAAA;AAAA,IAUhB;AAEA,QAAI,KAAK,WAAW,GAAG;AACnB,aAAO;AAAA,IACX;AAEA,WACI,qBAAC,OAAA,EAAK,GAAG,mBAAmB,WAAW,KAAK,OAAO,UAAU,SAAS,GAAG,aAAW,MAAM,KACrF,UAAA;AAAA,MAAA,WAAW,IAAI,CAAC,MAAM,UAAU,gBAAgB,MAAM,KAAK,CAAC;AAAA,MAC5D,aAAa,SAAS,KAAK,eAAA;AAAA,IAAe,GAC/C;AAAA,EAER;AACJ;AAEA,gBAAgB,cAAc;"}

package/components/TabsLine/components/TabsLineDropdown.js

@@ -1,10 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect, createElement } from "react";
-import { u as uniqueId, c as clsx } from "../../../chunks/vendor-DqjKLGwf.js";
+import React__default, { useState, useRef, useCallback, useEffect, createElement } from "react";
+import { u as uniqueId, c as clsx } from "../../../chunks/vendor-CUIykw0y.js";
+import { CaretdownStrokeSrvIcon16 } from "@sberbusiness/icons-next";
+import { EComponentSize } from "../../../enums/EComponentSize.js";
+import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
+import { isKey } from "../../../utils/keyboard.js";
 import { DropdownListContext } from "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import { DropdownList } from "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-BaP5AaMK.js";
+import "../../../chunks/DropdownListItem-cXbzcYKR.js";
 import { EDropdownWidth } from "../../Dropdown/desktop/enums.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
@@ -17,29 +21,27 @@ import "../../Dropdown/mobile/DropdownMobileList.js";
 import "../../Dropdown/mobile/DropdownMobileListItem.js";
 import "../../Loader/LoaderSmall/LoaderSmall.js";
 import "../../Loader/LoaderMiddle/LoaderMiddle.js";
-import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { Dropdown } from "../../Dropdown/Dropdown.js";
-import { CaretdownStrokeSrvIcon16 } from "@sberbusiness/icons-next";
-import { isKey } from "../../../utils/keyboard.js";
-import { s as styles } from "../../../chunks/TabsLine.module-RwtPmU40.js";
-import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { EFontType } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
 import { Text } from "../../Typography/Text.js";
 import "../../Typography/Title.js";
 import { tabsLineSizeToTextSizeMap } from "../utils.js";
+import { s as styles } from "../../../chunks/TabsLine.module-v6dP7lY_.js";
 const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
-const TabsLineDropdown = ({
-  tabs,
-  active,
-  label,
-  onClickTab,
-  selected,
-  size = EComponentSize.MD,
-  targetHtmlAttributes,
-  ...rest
-}) => {
+const TabsLineDropdown = React__default.forwardRef((props, ref) => {
+  const {
+    className,
+    tabs,
+    active,
+    label,
+    onClickTab,
+    selected,
+    size = EComponentSize.MD,
+    targetHtmlAttributes,
+    ...htmlDivAttributes
+  } = props;
   const [activeDescendant, setActiveDescendant] = useState(void 0);
   const [opened, setOpened] = useState(false);
   const [focused, setFocused] = useState(false);
@@ -47,6 +49,17 @@ const TabsLineDropdown = ({
   const targetRef = useRef(null);
   const dropdownRef = useRef(null);
   const instanceId = useRef(uniqueId());
+  const setRootRef = useCallback(
+    (node) => {
+      targetRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
   useEffect(() => {
     if (!opened) {
       return;
@@ -62,57 +75,77 @@ const TabsLineDropdown = ({
       document.removeEventListener("mouseup", handleClickOutside);
     };
   }, [opened]);
-  const handleTargetClick = () => {
-    setOpened(!opened);
+  const handleTargetClick = (event) => {
+    var _a;
+    setOpened((prevOpened) => !prevOpened);
+    (_a = targetHtmlAttributes == null ? void 0 : targetHtmlAttributes.onClick) == null ? void 0 : _a.call(targetHtmlAttributes, event);
   };
   const handleTargetKeyDown = (event) => {
+    var _a;
     if (!opened) {
       if (isKey(event.code, "ARROW_UP") || isKey(event.code, "ARROW_DOWN")) {
         event.preventDefault();
         setOpened(true);
       }
-    }
-    if (opened) {
+    } else {
       if (isKey(event.code, "TAB") || isKey(event.code, "ESCAPE")) {
         setOpened(false);
       }
     }
+    (_a = targetHtmlAttributes == null ? void 0 : targetHtmlAttributes.onKeyDown) == null ? void 0 : _a.call(targetHtmlAttributes, event);
   };
   const handleClickTab = (tab) => {
     onClickTab(tab);
-    setOpened(!opened);
+    setOpened(false);
+  };
+  const handleTargetFocus = (event) => {
+    var _a;
+    setFocused(true);
+    (_a = targetHtmlAttributes == null ? void 0 : targetHtmlAttributes.onFocus) == null ? void 0 : _a.call(targetHtmlAttributes, event);
+  };
+  const handleTargetBlur = (event) => {
+    var _a;
+    setFocused(false);
+    (_a = targetHtmlAttributes == null ? void 0 : targetHtmlAttributes.onBlur) == null ? void 0 : _a.call(targetHtmlAttributes, event);
+  };
+  const handleTargetMouseEnter = (event) => {
+    var _a;
+    setHovered(true);
+    (_a = targetHtmlAttributes == null ? void 0 : targetHtmlAttributes.onMouseEnter) == null ? void 0 : _a.call(targetHtmlAttributes, event);
+  };
+  const handleTargetMouseLeave = (event) => {
+    var _a;
+    setHovered(false);
+    (_a = targetHtmlAttributes == null ? void 0 : targetHtmlAttributes.onMouseLeave) == null ? void 0 : _a.call(targetHtmlAttributes, event);
   };
   const renderTarget = () => {
-    const { onFocus, onBlur, onMouseEnter, onMouseLeave, ...restTargetHtmlAttributes } = targetHtmlAttributes || {};
-    const buttonClassName = clsx(styles.tab, SIZE_TO_CLASS_NAME_MAP[size], styles.dropdownTarget, {
-      [styles.active]: active
-    });
-    const caretClassName = clsx(styles.dropdownTargetCaret, { [styles.opened]: opened });
-    const handleFocus = (e) => {
-      setFocused(true);
-      onFocus == null ? void 0 : onFocus(e);
-    };
-    const handleBlur = (e) => {
-      setFocused(false);
-      onBlur == null ? void 0 : onBlur(e);
-    };
-    const handleMouseEnter = (e) => {
-      setHovered(true);
-      onMouseEnter == null ? void 0 : onMouseEnter(e);
-    };
-    const handleMouseLeave = (e) => {
-      setHovered(false);
-      onMouseLeave == null ? void 0 : onMouseLeave(e);
-    };
+    const {
+      className: targetClassName,
+      onFocus,
+      onBlur,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      onKeyDown,
+      ...restTargetHtmlAttributes
+    } = targetHtmlAttributes || {};
     return /* @__PURE__ */ jsx(
       "button",
       {
         ...restTargetHtmlAttributes,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        className: buttonClassName,
+        onFocus: handleTargetFocus,
+        onBlur: handleTargetBlur,
+        onMouseEnter: handleTargetMouseEnter,
+        onMouseLeave: handleTargetMouseLeave,
+        className: clsx(
+          styles.tab,
+          SIZE_TO_CLASS_NAME_MAP[size],
+          styles.dropdownTarget,
+          {
+            [styles.active]: active
+          },
+          targetClassName
+        ),
         onClick: handleTargetClick,
         onKeyDown: handleTargetKeyDown,
         type: "button",
@@ -121,7 +154,7 @@ const TabsLineDropdown = ({
         "aria-expanded": opened,
         "aria-controls": instanceId.current,
         "aria-activedescendant": activeDescendant,
-        children: /* @__PURE__ */ jsx("span", { className: styles.tabInner, children: /* @__PURE__ */ jsxs("span", { className: styles.dropdownTargetInner, children: [
+        children: /* @__PURE__ */ jsxs("span", { className: styles.dropdownTargetInner, children: [
           /* @__PURE__ */ jsx(
             Text,
             {
@@ -130,49 +163,52 @@ const TabsLineDropdown = ({
               children: label
             }
           ),
-          /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon16, { className: caretClassName, paletteIndex: 5 })
-        ] }) })
-      }
-    );
-  };
-  const renderDropdown = () => {
-    return /* @__PURE__ */ jsx(
-      Dropdown,
-      {
-        className: styles.dropdown,
-        opened,
-        setOpened,
-        size,
-        width: EDropdownWidth.MIN_TARGET,
-        targetRef,
-        ref: dropdownRef,
-        children: /* @__PURE__ */ jsx(DropdownListContext.Provider, { value: { activeDescendant, setActiveDescendant }, children: /* @__PURE__ */ jsx(DropdownList, { dropdownOpened: opened, id: instanceId.current, size, children: tabs.map((tab) => {
-          const { id, label: label2, showNotificationIcon, ...htmlDivAttributes } = tab;
-          const className = clsx(styles.dropdownItem);
-          return /* @__PURE__ */ createElement(
-            DropdownList.Item,
+          /* @__PURE__ */ jsx(
+            CaretdownStrokeSrvIcon16,
             {
-              ...htmlDivAttributes,
-              className,
-              id,
-              key: id,
-              onSelect: () => {
-                handleClickTab(tab);
-              },
-              selected: tab === selected,
-              showNotificationIcon
-            },
-            /* @__PURE__ */ jsx("span", { className: styles.dropdownItemInner, children: label2 })
-          );
-        }) }) })
+              className: clsx(styles.dropdownTargetCaret, { [styles.opened]: opened }),
+              paletteIndex: 5
+            }
+          )
+        ] })
       }
     );
   };
-  return /* @__PURE__ */ jsxs("div", { className: styles.tabsLineDropdown, ref: targetRef, ...rest, children: [
+  const renderDropdown = () => /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      className: styles.dropdown,
+      opened,
+      setOpened,
+      size,
+      width: EDropdownWidth.MIN_TARGET,
+      targetRef,
+      ref: dropdownRef,
+      children: /* @__PURE__ */ jsx(DropdownListContext.Provider, { value: { activeDescendant, setActiveDescendant }, children: /* @__PURE__ */ jsx(DropdownList, { dropdownOpened: opened, id: instanceId.current, size, children: tabs.map((tab, index) => {
+        const { id, label: tabLabel, showNotificationIcon, ...htmlButtonAttributes } = tab;
+        return /* @__PURE__ */ createElement(
+          DropdownList.Item,
+          {
+            ...htmlButtonAttributes,
+            id: `${instanceId.current}-item-${index}`,
+            key: id,
+            onSelect: () => {
+              handleClickTab(tab);
+            },
+            selected: tab === selected,
+            showNotificationIcon
+          },
+          tabLabel
+        );
+      }) }) })
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { ...htmlDivAttributes, className: clsx(styles.tabsLineDropdown, className), ref: setRootRef, children: [
     renderTarget(),
     renderDropdown()
   ] });
-};
+});
+TabsLineDropdown.displayName = "TabsLineDropdown";
 export {
   TabsLineDropdown
 };