@sberbusiness/triplex-next 1.33.0 → 1.35.0

package/components/TabsLine/TabsLine.js

@@ -1,50 +1,52 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as b } from "../../chunks/vendor-D5cfSbgz.js";
-import { MobileView as c } from "../MobileView/MobileView.js";
+import { jsx } from "react/jsx-runtime";
+import { c as clsx } from "../../chunks/vendor-Bco_z_Yi.js";
+import { MobileView } from "../MobileView/MobileView.js";
 import "../MobileView/useMobileView.js";
-import { TabsLineDesktop as d } from "./components/TabsLineDesktop.js";
-import { TabsLineMobile as x } from "./components/TabsLineMobile.js";
-import { s as m } from "../../chunks/TabsLine.module-CR0Zbz9g.js";
+import { TabsLineDesktop } from "./components/TabsLineDesktop.js";
+import { TabsLineMobile } from "./components/TabsLineMobile.js";
+import { s as styles } from "../../chunks/TabsLine.module-Mm1XmLbz.js";
 import "./components/TabsLineDropdown.js";
 import "./components/TabsLineItem.js";
-const y = ({
-  className: p,
-  dropdownTargetHtmlAttributes: s,
-  maxVisible: a,
-  onChangeTab: i,
-  paddingX: e,
-  selectedId: o,
-  tabs: t,
-  size: l,
-  withSeparator: f,
-  ...n
-}) => /* @__PURE__ */ r(
-  "div",
-  {
-    role: "tablist",
-    className: b(p, m.tabsLineWrapper, { [m.withSeparator]: f }),
-    ...n,
-    "data-paddingx-size": e,
-    children: /* @__PURE__ */ r(
-      c,
-      {
-        fallback: /* @__PURE__ */ r(
-          d,
-          {
-            tabs: t,
-            onChangeTab: i,
-            selectedId: o,
-            dropdownTargetHtmlAttributes: s,
-            maxVisible: a,
-            size: l
-          }
-        ),
-        children: /* @__PURE__ */ r(x, { tabs: t, onChangeTab: i, selectedId: o })
-      }
-    )
-  }
-);
+const TabsLine = ({
+  className,
+  dropdownTargetHtmlAttributes,
+  maxVisible,
+  onChangeTab,
+  paddingX,
+  selectedId,
+  tabs,
+  size,
+  withSeparator,
+  ...htmlDivAttributes
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      className: clsx(className, styles.tabsLineWrapper, { [styles.withSeparator]: withSeparator }),
+      ...htmlDivAttributes,
+      "data-paddingx-size": paddingX,
+      children: /* @__PURE__ */ jsx(
+        MobileView,
+        {
+          fallback: /* @__PURE__ */ jsx(
+            TabsLineDesktop,
+            {
+              tabs,
+              onChangeTab,
+              selectedId,
+              dropdownTargetHtmlAttributes,
+              maxVisible,
+              size
+            }
+          ),
+          children: /* @__PURE__ */ jsx(TabsLineMobile, { tabs, onChangeTab, selectedId })
+        }
+      )
+    }
+  );
+};
 export {
-  y as TabsLine
+  TabsLine
 };
 //# sourceMappingURL=TabsLine.js.map

package/components/TabsLine/TabsLine.js.map

@@ -0,0 +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;"}

package/components/TabsLine/components/TabsLineDesktop.js

@@ -1,81 +1,109 @@
-import { jsx as p } from "react/jsx-runtime";
-import { useState as D, useRef as T, useEffect as N } from "react";
-import { TabsLineDropdown as S } from "./TabsLineDropdown.js";
-import { TabsLineItem as k } from "./TabsLineItem.js";
-import { isKey as u } from "../../../utils/keyboard.js";
-import { l as L } from "../../../chunks/vendor-D5cfSbgz.js";
-import { s as J } from "../../../chunks/TabsLine.module-CR0Zbz9g.js";
-const $ = ({
-  tabs: l,
-  dropdownTargetHtmlAttributes: g,
-  selectedId: R,
-  onChangeTab: m,
-  maxVisible: d,
-  size: i
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { TabsLineDropdown } from "./TabsLineDropdown.js";
+import { TabsLineItem } from "./TabsLineItem.js";
+import { isKey } from "../../../utils/keyboard.js";
+import { l as lodashExports } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { s as styles } from "../../../chunks/TabsLine.module-Mm1XmLbz.js";
+const TabsLineDesktop = ({
+  tabs,
+  dropdownTargetHtmlAttributes,
+  selectedId,
+  onChangeTab,
+  maxVisible,
+  size
 }) => {
-  const [f, E] = D([]), [r, y] = D([]), A = T(null), a = T(0), h = T([]);
-  N(() => {
-    const o = [], e = [];
-    l.forEach((n, s) => {
-      (d && s + 1 >= d && l.length > d ? o : e).push(n);
-    }), L.isEqual(e, f) === !1 && E(e), L.isEqual(o, r) === !1 && y(o);
-  }, [l, d]);
-  const x = ({ selected: o, onClick: e, onFocus: n, onBlur: s, size: w, ...c }, b) => {
-    const K = a.current === b ? 0 : -1, O = (t) => {
-      m(c.id), e == null || e(t);
-    }, W = (t) => {
-      const j = f.length - 1 === a.current;
-      if (u(t.code, "ARROW_LEFT") || u(t.code, "ARROW_RIGHT") && !j) {
-        const v = u(t.code, "ARROW_RIGHT") ? 1 : -1, z = a.current + v, I = h.current[z];
-        I && (t.preventDefault(), I.focus());
+  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();
+        }
       }
-    }, _ = (t) => {
-      a.current = b, n == null || n(t);
-    }, q = (t) => {
-      a.current = 0, s == null || s(t);
-    }, G = (t) => {
-      h.current[b] = t;
     };
-    return /* @__PURE__ */ p(
-      k,
+    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;
+    };
+    return /* @__PURE__ */ jsx(
+      TabsLineItem,
       {
-        selected: R === c.id,
-        onClick: O,
-        onKeyDown: W,
-        tabIndex: K,
-        onFocus: _,
-        onBlur: q,
-        ...c,
-        size: w ?? i,
-        ref: G
+        selected: selectedId === item.id,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        ...item,
+        size: itemSize ?? size,
+        ref: setRef
       },
-      c.id
+      item.id
     );
-  }, H = () => {
-    const o = f.map((e, n) => x(e, n));
-    if (r.length > 0) {
-      const e = r.find((s) => s.id === R), n = e ? e.label : r[0].label;
-      o.push(
-        /* @__PURE__ */ p(
-          S,
+  };
+  const renderTabs = () => {
+    const itemsToRender = inlineTabs.map((item, index) => renderInlineTab(item, index));
+    if (dropdownTabs.length > 0) {
+      const selectedTab = dropdownTabs.find((item) => item.id === selectedId);
+      const dropdownLabel = selectedTab ? selectedTab.label : dropdownTabs[0].label;
+      itemsToRender.push(
+        /* @__PURE__ */ jsx(
+          TabsLineDropdown,
           {
-            tabs: r,
-            active: e !== void 0,
-            label: n,
-            onClickTab: (s) => m(s.id),
-            selected: e,
-            targetHtmlAttributes: g,
-            size: i
+            tabs: dropdownTabs,
+            active: selectedTab !== void 0,
+            label: dropdownLabel,
+            onClickTab: (item) => onChangeTab(item.id),
+            selected: selectedTab,
+            targetHtmlAttributes: dropdownTargetHtmlAttributes,
+            size
           },
           "TabsLineDropdown"
         )
       );
     }
-    return o;
+    return itemsToRender;
   };
-  return l.length ? /* @__PURE__ */ p("div", { className: J.tabsLine, ref: A, "data-size": i, children: H() }) : null;
+  return tabs.length ? /* @__PURE__ */ jsx("div", { className: styles.tabsLine, ref: tabsRef, "data-size": size, children: renderTabs() }) : null;
 };
 export {
-  $ as TabsLineDesktop
+  TabsLineDesktop
 };
 //# sourceMappingURL=TabsLineDesktop.js.map

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

@@ -0,0 +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;"}

package/components/TabsLine/components/TabsLineDropdown.js

@@ -1,11 +1,11 @@
-import { jsxs as A, jsx as a } from "react/jsx-runtime";
-import { useState as m, useRef as h, useEffect as j, createElement as z } from "react";
-import { u as H, c as w } from "../../../chunks/vendor-D5cfSbgz.js";
-import { DropdownListContext as Y } from "../../Dropdown/DropdownListContext.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, createElement } from "react";
+import { u as uniqueId, c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { DropdownListContext } from "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
-import { DropdownList as S } from "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-DfdRzHWo.js";
-import { EDropdownWidth as q } from "../../Dropdown/desktop/enums.js";
+import { DropdownList } from "../../Dropdown/desktop/DropdownList.js";
+import "../../../chunks/DropdownListItem-Bar1VVOv.js";
+import { EDropdownWidth } from "../../Dropdown/desktop/enums.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
 import "../../Dropdown/mobile/DropdownMobileClose.js";
@@ -17,124 +17,163 @@ import "../../Dropdown/mobile/DropdownMobileList.js";
 import "../../Dropdown/mobile/DropdownMobileListItem.js";
 import "../../Loader/LoaderSmall/LoaderSmall.js";
 import "../../Loader/LoaderMiddle/LoaderMiddle.js";
-import { EComponentSize as G } from "../../../enums/EComponentSize.js";
-import { Dropdown as U } from "../../Dropdown/Dropdown.js";
-import { CaretdownStrokeSrvIcon16 as Z } from "@sberbusiness/icons-next";
-import { isKey as p } from "../../../utils/keyboard.js";
-import { s as t } from "../../../chunks/TabsLine.module-CR0Zbz9g.js";
-import { createSizeToClassNameMap as J } from "../../../utils/classNameMaps.js";
-import { EFontType as b } from "../../Typography/enums.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-Mm1XmLbz.js";
+import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
+import { EFontType } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
-import { Text as Q } from "../../Typography/Text.js";
+import { Text } from "../../Typography/Text.js";
 import "../../Typography/Title.js";
-import { tabsLineSizeToTextSizeMap as V } from "../utils.js";
-const X = J(t), _e = ({
-  tabs: v,
-  active: T,
-  label: M,
-  onClickTab: R,
-  selected: g,
-  size: c = G.MD,
-  targetHtmlAttributes: L,
-  ...x
+import { tabsLineSizeToTextSizeMap } from "../utils.js";
+const SIZE_TO_CLASS_NAME_MAP = createSizeToClassNameMap(styles);
+const TabsLineDropdown = ({
+  tabs,
+  active,
+  label,
+  onClickTab,
+  selected,
+  size = EComponentSize.MD,
+  targetHtmlAttributes,
+  ...rest
 }) => {
-  const [D, y] = m(void 0), [o, d] = m(!1), [O, N] = m(!1), [_, E] = m(!1), l = h(null), C = h(null), I = h(H());
-  j(() => {
-    if (!o)
+  const [activeDescendant, setActiveDescendant] = useState(void 0);
+  const [opened, setOpened] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const targetRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const instanceId = useRef(uniqueId());
+  useEffect(() => {
+    if (!opened) {
       return;
-    const e = (r) => {
-      var n, s;
-      !((n = l.current) != null && n.contains(r.target)) && !((s = C.current) != null && s.contains(r.target)) && d(!1);
+    }
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      if (!((_a = targetRef.current) == null ? void 0 : _a.contains(event.target)) && !((_b = dropdownRef.current) == null ? void 0 : _b.contains(event.target))) {
+        setOpened(false);
+      }
+    };
+    document.addEventListener("mouseup", handleClickOutside);
+    return () => {
+      document.removeEventListener("mouseup", handleClickOutside);
+    };
+  }, [opened]);
+  const handleTargetClick = () => {
+    setOpened(!opened);
+  };
+  const handleTargetKeyDown = (event) => {
+    if (!opened) {
+      if (isKey(event.code, "ARROW_UP") || isKey(event.code, "ARROW_DOWN")) {
+        event.preventDefault();
+        setOpened(true);
+      }
+    }
+    if (opened) {
+      if (isKey(event.code, "TAB") || isKey(event.code, "ESCAPE")) {
+        setOpened(false);
+      }
+    }
+  };
+  const handleClickTab = (tab) => {
+    onClickTab(tab);
+    setOpened(!opened);
+  };
+  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);
     };
-    return document.addEventListener("mouseup", e), () => {
-      document.removeEventListener("mouseup", e);
+    const handleBlur = (e) => {
+      setFocused(false);
+      onBlur == null ? void 0 : onBlur(e);
     };
-  }, [o]);
-  const k = () => {
-    d(!o);
-  }, P = (e) => {
-    o || (p(e.code, "ARROW_UP") || p(e.code, "ARROW_DOWN")) && (e.preventDefault(), d(!0)), o && (p(e.code, "TAB") || p(e.code, "ESCAPE")) && d(!1);
-  }, F = (e) => {
-    R(e), d(!o);
-  }, W = () => {
-    const { onFocus: e, onBlur: r, onMouseEnter: n, onMouseLeave: s, ...u } = L || {}, f = w(t.tab, X[c], t.dropdownTarget, {
-      [t.active]: T
-    }), K = w(t.dropdownTargetCaret, { [t.opened]: o });
-    return /* @__PURE__ */ a(
+    const handleMouseEnter = (e) => {
+      setHovered(true);
+      onMouseEnter == null ? void 0 : onMouseEnter(e);
+    };
+    const handleMouseLeave = (e) => {
+      setHovered(false);
+      onMouseLeave == null ? void 0 : onMouseLeave(e);
+    };
+    return /* @__PURE__ */ jsx(
       "button",
       {
-        ...u,
-        onFocus: (i) => {
-          N(!0), e == null || e(i);
-        },
-        onBlur: (i) => {
-          N(!1), r == null || r(i);
-        },
-        onMouseEnter: (i) => {
-          E(!0), n == null || n(i);
-        },
-        onMouseLeave: (i) => {
-          E(!1), s == null || s(i);
-        },
-        className: f,
-        onClick: k,
-        onKeyDown: P,
+        ...restTargetHtmlAttributes,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        className: buttonClassName,
+        onClick: handleTargetClick,
+        onKeyDown: handleTargetKeyDown,
         type: "button",
         role: "tab",
         "aria-haspopup": "menu",
-        "aria-expanded": o,
-        "aria-controls": I.current,
-        "aria-activedescendant": D,
-        children: /* @__PURE__ */ a("span", { className: t.tabInner, children: /* @__PURE__ */ A("span", { className: t.dropdownTargetInner, children: [
-          /* @__PURE__ */ a(
-            Q,
+        "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: [
+          /* @__PURE__ */ jsx(
+            Text,
             {
-              size: V[c],
-              type: T || O || _ ? b.PRIMARY : b.SECONDARY,
-              children: M
+              size: tabsLineSizeToTextSizeMap[size],
+              type: active || focused || hovered ? EFontType.PRIMARY : EFontType.SECONDARY,
+              children: label
             }
           ),
-          /* @__PURE__ */ a(Z, { className: K, paletteIndex: 5 })
+          /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon16, { className: caretClassName, paletteIndex: 5 })
         ] }) })
       }
     );
-  }, B = () => /* @__PURE__ */ a(
-    U,
-    {
-      className: t.dropdown,
-      opened: o,
-      setOpened: d,
-      size: c,
-      width: q.MIN_TARGET,
-      targetRef: l,
-      ref: C,
-      children: /* @__PURE__ */ a(Y.Provider, { value: { activeDescendant: D, setActiveDescendant: y }, children: /* @__PURE__ */ a(S, { dropdownOpened: o, id: I.current, size: c, children: v.map((e) => {
-        const { id: r, label: n, showNotificationIcon: s, ...u } = e, f = w(t.dropdownItem);
-        return /* @__PURE__ */ z(
-          S.Item,
-          {
-            ...u,
-            className: f,
-            id: r,
-            key: r,
-            onSelect: () => {
-              F(e);
+  };
+  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,
+            {
+              ...htmlDivAttributes,
+              className,
+              id,
+              key: id,
+              onSelect: () => {
+                handleClickTab(tab);
+              },
+              selected: tab === selected,
+              showNotificationIcon
             },
-            selected: e === g,
-            showNotificationIcon: s
-          },
-          /* @__PURE__ */ a("span", { className: t.dropdownItemInner, children: n })
-        );
-      }) }) })
-    }
-  );
-  return /* @__PURE__ */ A("div", { className: t.tabsLineDropdown, ref: l, ...x, children: [
-    W(),
-    B()
+            /* @__PURE__ */ jsx("span", { className: styles.dropdownItemInner, children: label2 })
+          );
+        }) }) })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.tabsLineDropdown, ref: targetRef, ...rest, children: [
+    renderTarget(),
+    renderDropdown()
   ] });
 };
 export {
-  _e as TabsLineDropdown
+  TabsLineDropdown
 };
 //# sourceMappingURL=TabsLineDropdown.js.map

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

@@ -0,0 +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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"}