@sberbusiness/triplex-next 1.45.0 → 1.47.0

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-D4wvHis9.js";
-import { s as styles } from "../../../chunks/TabsLine.module-CFuF3nRE.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-BOD6aGpU.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":";;;;;;;AAiBO,MAAM,kBAAmD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,QAAM,CAAC,YAAY,aAAa,IAAI,SAA+B,CAAA,CAAE;AACrE,QAAM,CAAC,cAAc,eAAe,IAAI,SAA+B,CAAA,CAAE;AAEzE,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,uBAAuB,OAAO,CAAC;AACrC,QAAM,iBAAiB,OAA4B,EAAE;AAErD,YAAU,MAAM;AACZ,UAAM,kBAAwC,CAAA;AAC9C,UAAM,gBAAsC,CAAA;AAE5C,SAAK,QAAQ,CAAC,MAA0B,MAAc;AAClD,YAAM,YAAY,cAAc,IAAI,KAAK,cAAc,KAAK,SAAS;AACrE,YAAM,SAAS,YAAY,kBAAkB;AAE7C,aAAO,KAAK,IAAI;AAAA,IACpB,CAAC;AAED,QAAIA,sBAAQ,eAAe,UAAU,MAAM,OAAO;AAC9C,oBAAc,aAAa;AAAA,IAC/B;AAEA,QAAIA,sBAAQ,iBAAiB,YAAY,MAAM,OAAO;AAClD,sBAAgB,eAAe;AAAA,IACnC;AAAA,EACJ,GAAG,CAAC,MAAM,UAAU,CAAC;AAErB,QAAM,kBAAkB,CACpB,EAAE,UAAU,SAAS,SAAS,QAAQ,MAAM,UAAU,GAAG,KAAA,GACzD,UACC;AACD,UAAM,WAAW,qBAAqB,YAAY,QAAQ,IAAI;AAE9D,UAAM,cAAc,CAAC,UAA+C;AAChE,kBAAY,KAAK,EAAE;AACnB,yCAAU;AAAA,IACd;AAEA,UAAM,gBAAgB,CAAC,UAAkD;AAErE,YAAM,kBAAkB,WAAW,SAAS,MAAM,qBAAqB;AAEvE,UAAI,MAAM,MAAM,MAAM,YAAY,KAAM,MAAM,MAAM,MAAM,aAAa,KAAK,CAAC,iBAAkB;AAE3F,cAAM,QAAQ,MAAM,MAAM,MAAM,aAAa,IAAI,IAAI;AAGrD,cAAM,eAAe,qBAAqB,UAAU;AACpD,cAAM,UAAU,eAAe,QAAQ,YAAY;AAEnD,YAAI,SAAS;AACT,gBAAM,eAAA;AACN,kBAAQ,MAAA;AAAA,QACZ;AAAA,MACJ;AAAA,IACJ;AAEA,UAAM,cAAc,CAAC,UAA+C;AAChE,2BAAqB,UAAU;AAC/B,yCAAU;AAAA,IACd;AAEA,UAAM,aAAa,CAAC,UAA+C;AAC/D,2BAAqB,UAAU;AAC/B,uCAAS;AAAA,IACb;AAEA,UAAM,SAAS,CAAC,SAA4B;AACxC,qBAAe,QAAQ,KAAK,IAAI;AAAA,IACpC;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QAEG,UAAU,eAAe,KAAK;AAAA,QAC9B,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA,QACA,SAAS;AAAA,QACT,QAAQ;AAAA,QACP,GAAG;AAAA,QACJ,MAAM,YAAY;AAAA,QAClB,KAAK;AAAA,MAAA;AAAA,MATA,KAAK;AAAA,IAAA;AAAA,EAYtB;AAEA,QAAM,aAAa,MAAM;AACrB,UAAM,gBAA+B,WAAW,IAAI,CAAC,MAAM,UAAU,gBAAgB,MAAM,KAAK,CAAC;AAEjG,QAAI,aAAa,SAAS,GAAG;AACzB,YAAM,cAAc,aAAa,KAAK,CAAC,SAAS,KAAK,OAAO,UAAU;AACtE,YAAM,gBAAgB,cAAc,YAAY,QAAQ,aAAa,CAAC,EAAE;AAExE,oBAAc;AAAA,QACV;AAAA,UAAC;AAAA,UAAA;AAAA,YAEG,MAAM;AAAA,YACN,QAAQ,gBAAgB;AAAA,YACxB,OAAO;AAAA,YACP,YAAY,CAAC,SAAS,YAAY,KAAK,EAAE;AAAA,YACzC,UAAU;AAAA,YACV,sBAAsB;AAAA,YACtB;AAAA,UAAA;AAAA,UAPI;AAAA,QAAA;AAAA,MAQR;AAAA,IAER;AAEA,WAAO;AAAA,EACX;AAEA,SAAO,KAAK,SACR,oBAAC,OAAA,EAAI,WAAW,OAAO,UAAU,KAAK,SAAS,aAAW,MAErD,UAAA,WAAA,GACL,IACA;AACR;"}
+{"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-D4wvHis9.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-kMroiHoh.js";
+import "../../../chunks/DropdownListItem-B9cIx_8A.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-CFuF3nRE.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-BOD6aGpU.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
 };

package/components/TabsLine/components/TabsLineDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsLineDropdown.js","sources":["../../../../src/components/TabsLine/components/TabsLineDropdown.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport { Dropdown, DropdownList, DropdownListContext, EDropdownWidth } from \"../../Dropdown\";\nimport { CaretdownStrokeSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { isKey } from \"../../../utils/keyboard\";\nimport { uniqueId } from \"lodash-es\";\nimport { ITabsLineItemProps } from \"./TabsLineItem\";\nimport styles from \"../styles/TabsLine.module.less\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { Text, EFontType } from \"../../Typography\";\nimport { tabsLineSizeToTextSizeMap } from \"../utils\";\n\n/** Свойства компонента TabsLineDropdown. */\ninterface ITabsLineDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Табы дропдауна. */\n    tabs: ITabsLineItemProps[];\n    /** Выбранный таб находится в дропдауне. */\n    active: boolean;\n    /** Текст таргет кнопки дропдауна. */\n    label: string;\n    /** Коллбэк выбора таба. */\n    onClickTab: (tab: ITabsLineItemProps) => void;\n    /** Выбранный таб. */\n    selected?: ITabsLineItemProps;\n    /** Размер таба кнопки дропдауна. */\n    size?: EComponentSize;\n    /** Атрибуты кнопки дропдауна. */\n    targetHtmlAttributes?: React.HTMLAttributes<HTMLButtonElement> & TestProps;\n}\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\nexport const TabsLineDropdown: React.FC<ITabsLineDropdownProps> = ({\n    tabs,\n    active,\n    label,\n    onClickTab,\n    selected,\n    size = EComponentSize.MD,\n    targetHtmlAttributes,\n    ...rest\n}) => {\n    const [activeDescendant, setActiveDescendant] = useState<string | undefined>(undefined);\n    const [opened, setOpened] = useState(false);\n    const [focused, setFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n\n    const targetRef = useRef<HTMLDivElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const instanceId = useRef(uniqueId());\n\n    useEffect(() => {\n        if (!opened) {\n            return;\n        }\n\n        const handleClickOutside = (event: Event) => {\n            if (\n                !targetRef.current?.contains(event.target as Node) &&\n                !dropdownRef.current?.contains(event.target as Node)\n            ) {\n                setOpened(false);\n            }\n        };\n\n        document.addEventListener(\"mouseup\", handleClickOutside);\n\n        return () => {\n            document.removeEventListener(\"mouseup\", handleClickOutside);\n        };\n    }, [opened]);\n\n    const handleTargetClick = () => {\n        setOpened(!opened);\n    };\n\n    const handleTargetKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (!opened) {\n            // При нажатии Enter, Space, ArrowUp или ArrowDown открывается выпадающий список.\n            if (isKey(event.code, \"ARROW_UP\") || isKey(event.code, \"ARROW_DOWN\")) {\n                event.preventDefault();\n                setOpened(true);\n            }\n        }\n\n        if (opened) {\n            // При нажатии Tab или Esc закрывается выпадающий список.\n            if (isKey(event.code, \"TAB\") || isKey(event.code, \"ESCAPE\")) {\n                setOpened(false);\n            }\n        }\n    };\n\n    const handleClickTab = (tab: ITabsLineItemProps) => {\n        onClickTab(tab);\n        setOpened(!opened);\n    };\n\n    const renderTarget = () => {\n        const { onFocus, onBlur, onMouseEnter, onMouseLeave, ...restTargetHtmlAttributes } = targetHtmlAttributes || {};\n\n        const buttonClassName = clsx(styles.tab, SIZE_TO_CLASS_NAME_MAP[size], styles.dropdownTarget, {\n            [styles.active]: active,\n        });\n\n        const caretClassName = clsx(styles.dropdownTargetCaret, { [styles.opened]: opened });\n\n        const handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(true);\n            onFocus?.(e);\n        };\n\n        const handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n            setFocused(false);\n            onBlur?.(e);\n        };\n\n        const handleMouseEnter = (e: React.MouseEvent<HTMLButtonElement>) => {\n            setHovered(true);\n            onMouseEnter?.(e);\n        };\n\n        const handleMouseLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n            setHovered(false);\n            onMouseLeave?.(e);\n        };\n\n        return (\n            <button\n                {...restTargetHtmlAttributes}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onMouseEnter={handleMouseEnter}\n                onMouseLeave={handleMouseLeave}\n                className={buttonClassName}\n                onClick={handleTargetClick}\n                onKeyDown={handleTargetKeyDown}\n                type=\"button\"\n                role=\"tab\"\n                aria-haspopup=\"menu\"\n                aria-expanded={opened}\n                aria-controls={instanceId.current}\n                aria-activedescendant={activeDescendant}\n            >\n                <span className={styles.tabInner}>\n                    <span className={styles.dropdownTargetInner}>\n                        <Text\n                            size={tabsLineSizeToTextSizeMap[size]}\n                            type={active || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY}\n                        >\n                            {label}\n                        </Text>\n                        <CaretdownStrokeSrvIcon16 className={caretClassName} paletteIndex={5} />\n                    </span>\n                </span>\n            </button>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <Dropdown\n                className={styles.dropdown}\n                opened={opened}\n                setOpened={setOpened}\n                size={size}\n                width={EDropdownWidth.MIN_TARGET}\n                targetRef={targetRef}\n                ref={dropdownRef}\n            >\n                <DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>\n                    <DropdownList dropdownOpened={opened} id={instanceId.current} size={size}>\n                        {tabs.map((tab) => {\n                            const { id, label, showNotificationIcon, ...htmlDivAttributes } = tab;\n                            const className = clsx(styles.dropdownItem);\n\n                            return (\n                                <DropdownList.Item\n                                    {...(htmlDivAttributes as React.HTMLAttributes<HTMLDivElement>)}\n                                    className={className}\n                                    id={id}\n                                    key={id}\n                                    onSelect={() => {\n                                        handleClickTab(tab);\n                                    }}\n                                    selected={tab === selected}\n                                    showNotificationIcon={showNotificationIcon}\n                                >\n                                    <span className={styles.dropdownItemInner}>{label}</span>\n                                </DropdownList.Item>\n                            );\n                        })}\n                    </DropdownList>\n                </DropdownListContext.Provider>\n            </Dropdown>\n        );\n    };\n\n    return (\n        <div className={styles.tabsLineDropdown} ref={targetRef} {...rest}>\n            {/* eslint-disable-next-line react-hooks/refs */}\n            {renderTarget()}\n            {/* eslint-disable-next-line react-hooks/refs */}\n            {renderDropdown()}\n        </div>\n    );\n};\n"],"names":["label"],"mappings":"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"}
+{"version":3,"file":"TabsLineDropdown.js","sources":["../../../../src/components/TabsLine/components/TabsLineDropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { CaretdownStrokeSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport { TestProps } from \"../../../types/CoreTypes\";\nimport { isKey } from \"../../../utils/keyboard\";\nimport { Dropdown, DropdownList, DropdownListContext, EDropdownWidth } from \"../../Dropdown\";\nimport { Text, EFontType } from \"../../Typography\";\nimport { tabsLineSizeToTextSizeMap } from \"../utils\";\nimport { ITabsLineItemProps } from \"./TabsLineItem\";\nimport styles from \"../styles/TabsLine.module.less\";\n\n/** Свойства компонента TabsLineDropdown. */\ninterface ITabsLineDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Табы дропдауна. */\n    tabs: ITabsLineItemProps[];\n    /** Выбранный таб находится в дропдауне. */\n    active: boolean;\n    /** Текст таргет кнопки дропдауна. */\n    label: string;\n    /** Коллбэк выбора таба. */\n    onClickTab: (tab: ITabsLineItemProps) => void;\n    /** Выбранный таб. */\n    selected?: ITabsLineItemProps;\n    /** Размер таба кнопки дропдауна. По умолчанию EComponentSize.MD. */\n    size?: EComponentSize;\n    /** Атрибуты кнопки дропдауна. */\n    targetHtmlAttributes?: React.HTMLAttributes<HTMLButtonElement> & TestProps;\n}\n\nconst SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);\n\n/** Таб-кнопка TabsLine, раскрывающая выпадающий список с не поместившимися табами. */\nexport const TabsLineDropdown = React.forwardRef<HTMLDivElement, ITabsLineDropdownProps>((props, ref) => {\n    const {\n        className,\n        tabs,\n        active,\n        label,\n        onClickTab,\n        selected,\n        size = EComponentSize.MD,\n        targetHtmlAttributes,\n        ...htmlDivAttributes\n    } = props;\n\n    const [activeDescendant, setActiveDescendant] = useState<string | undefined>(undefined);\n    const [opened, setOpened] = useState(false);\n    const [focused, setFocused] = useState(false);\n    const [hovered, setHovered] = useState(false);\n\n    const targetRef = useRef<HTMLDivElement | null>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const instanceId = useRef(uniqueId());\n\n    /** Корневой элемент нужен и снаружи (forwarded ref), и внутри — по нему позиционируется Dropdown. */\n    const setRootRef = useCallback(\n        (node: HTMLDivElement | null) => {\n            targetRef.current = node;\n\n            if (typeof ref === \"function\") {\n                ref(node);\n            } else if (ref) {\n                ref.current = node;\n            }\n        },\n        [ref],\n    );\n\n    useEffect(() => {\n        if (!opened) {\n            return;\n        }\n\n        const handleClickOutside = (event: Event) => {\n            if (\n                !targetRef.current?.contains(event.target as Node) &&\n                !dropdownRef.current?.contains(event.target as Node)\n            ) {\n                setOpened(false);\n            }\n        };\n\n        document.addEventListener(\"mouseup\", handleClickOutside);\n\n        return () => {\n            document.removeEventListener(\"mouseup\", handleClickOutside);\n        };\n    }, [opened]);\n\n    const handleTargetClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOpened((prevOpened) => !prevOpened);\n        targetHtmlAttributes?.onClick?.(event);\n    };\n\n    const handleTargetKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (!opened) {\n            // Enter и Space раскрывают список нативной активацией кнопки, ArrowUp/ArrowDown обрабатываются здесь.\n            if (isKey(event.code, \"ARROW_UP\") || isKey(event.code, \"ARROW_DOWN\")) {\n                event.preventDefault();\n                setOpened(true);\n            }\n        } else {\n            // При нажатии Tab или Esc закрывается выпадающий список.\n            if (isKey(event.code, \"TAB\") || isKey(event.code, \"ESCAPE\")) {\n                setOpened(false);\n            }\n        }\n\n        targetHtmlAttributes?.onKeyDown?.(event);\n    };\n\n    const handleClickTab = (tab: ITabsLineItemProps) => {\n        onClickTab(tab);\n        setOpened(false);\n    };\n\n    const handleTargetFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        setFocused(true);\n        targetHtmlAttributes?.onFocus?.(event);\n    };\n\n    const handleTargetBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n        setFocused(false);\n        targetHtmlAttributes?.onBlur?.(event);\n    };\n\n    const handleTargetMouseEnter = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setHovered(true);\n        targetHtmlAttributes?.onMouseEnter?.(event);\n    };\n\n    const handleTargetMouseLeave = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setHovered(false);\n        targetHtmlAttributes?.onMouseLeave?.(event);\n    };\n\n    const renderTarget = () => {\n        // className и обработчики выделяем, чтобы не потерять переданные потребителем:\n        // ниже идут одноимённые внутренние props, и спред их бы не пережил.\n        // onClick и onKeyDown деструктурируются только ради исключения из спреда —\n        // вызываются они внутри handleTargetClick / handleTargetKeyDown.\n        const {\n            className: targetClassName,\n            onFocus,\n            onBlur,\n            onMouseEnter,\n            onMouseLeave,\n            onClick,\n            onKeyDown,\n            ...restTargetHtmlAttributes\n        } = targetHtmlAttributes || {};\n\n        return (\n            <button\n                {...restTargetHtmlAttributes}\n                onFocus={handleTargetFocus}\n                onBlur={handleTargetBlur}\n                onMouseEnter={handleTargetMouseEnter}\n                onMouseLeave={handleTargetMouseLeave}\n                className={clsx(\n                    styles.tab,\n                    SIZE_TO_CLASS_NAME_MAP[size],\n                    styles.dropdownTarget,\n                    {\n                        [styles.active]: active,\n                    },\n                    targetClassName,\n                )}\n                onClick={handleTargetClick}\n                onKeyDown={handleTargetKeyDown}\n                type=\"button\"\n                role=\"tab\"\n                aria-haspopup=\"menu\"\n                aria-expanded={opened}\n                aria-controls={instanceId.current}\n                aria-activedescendant={activeDescendant}\n            >\n                <span className={styles.dropdownTargetInner}>\n                    <Text\n                        size={tabsLineSizeToTextSizeMap[size]}\n                        type={active || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY}\n                    >\n                        {label}\n                    </Text>\n                    <CaretdownStrokeSrvIcon16\n                        className={clsx(styles.dropdownTargetCaret, { [styles.opened]: opened })}\n                        paletteIndex={5}\n                    />\n                </span>\n            </button>\n        );\n    };\n\n    const renderDropdown = () => (\n        <Dropdown\n            className={styles.dropdown}\n            opened={opened}\n            setOpened={setOpened}\n            size={size}\n            width={EDropdownWidth.MIN_TARGET}\n            targetRef={targetRef}\n            ref={dropdownRef}\n        >\n            <DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>\n                <DropdownList dropdownOpened={opened} id={instanceId.current} size={size}>\n                    {tabs.map((tab, index) => {\n                        const { id, label: tabLabel, showNotificationIcon, ...htmlButtonAttributes } = tab;\n\n                        return (\n                            <DropdownList.Item\n                                // Свойства таба типизированы под <button>, а пункт списка рендерит <div>.\n                                // Набор атрибутов совпадает, расходятся только дженерики обработчиков событий.\n                                {...(htmlButtonAttributes as React.HTMLAttributes<HTMLDivElement>)}\n                                // DOM id выводим из instanceId, а не из tab.id: два TabsLine с одинаковыми\n                                // tab.id иначе дают дублирующиеся id, и aria-activedescendant адресует\n                                // пункт чужого экземпляра. Исходный tab.id уходит в onClickTab.\n                                id={`${instanceId.current}-item-${index}`}\n                                key={id}\n                                onSelect={() => {\n                                    handleClickTab(tab);\n                                }}\n                                selected={tab === selected}\n                                showNotificationIcon={showNotificationIcon}\n                            >\n                                {tabLabel}\n                            </DropdownList.Item>\n                        );\n                    })}\n                </DropdownList>\n            </DropdownListContext.Provider>\n        </Dropdown>\n    );\n\n    return (\n        <div {...htmlDivAttributes} className={clsx(styles.tabsLineDropdown, className)} ref={setRootRef}>\n            {renderTarget()}\n            {renderDropdown()}\n        </div>\n    );\n});\n\nTabsLineDropdown.displayName = \"TabsLineDropdown\";\n"],"names":["React"],"mappings":"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"}