@sberbusiness/triplex-next 0.1.9 → 0.10.0

package/components/TabsExtended/TabsExtended.js

@@ -1,38 +1,54 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useState as s, useRef as x } from "react";
-import { TabsExtendedContext as I } from "./TabsExtendedContext.js";
-import { TabsExtendedContent as b } from "./components/TabsExtendedContent.js";
-import { s as u } from "../../chunks/TabsExtended.module-yT8L2ZYS.js";
-import { c as T } from "../../chunks/vendor-CF2m175I.js";
-import "./enums.js";
-const E = ({
+import { jsx as s } from "react/jsx-runtime";
+import { useState as r, useRef as T } from "react";
+import { c as b } from "../../chunks/vendor-BlJo2ILB.js";
+import { TabsExtendedContext as E } from "./TabsExtendedContext.js";
+import { TabsExtendedContent as I } from "./components/TabsExtendedContent.js";
+import { s as u } from "../../chunks/TabsExtended.module-DW52Fxa9.js";
+import { ETabsExtendedType as C } from "./enums.js";
+import { t as v } from "../../chunks/utils-Ql50x949.js";
+import "./components/TabsExtendedDropdownWrapper.js";
+import "./components/TabsExtendedTab.js";
+import "./components/TabsExtendedTabButton.js";
+import "./components/TabsExtendedTabContext.js";
+import "./components/TabsExtendedTabsWrapper.js";
+const w = ({
   children: n,
-  className: r,
+  className: m,
   selectedId: t,
   onSelectTab: d,
-  ...m
+  type: e = C.TYPE_1,
+  ...a
 }) => {
-  const [a, i] = s([]), [l, p] = s([]), c = x(null), f = (e) => {
-    t !== e && d(e);
+  const [i, p] = r([]), [l, f] = r([]), c = T(null), x = (o) => {
+    t !== o && d(o);
   };
-  return /* @__PURE__ */ o(
-    I.Provider,
+  return /* @__PURE__ */ s(
+    E.Provider,
     {
       value: {
         dropdownItemsIds: l,
         dropdownRef: c,
-        inlineItemsIds: a,
-        onSelectTab: f,
+        inlineItemsIds: i,
+        onSelectTab: x,
         selectedId: t,
-        setDropdownItemsIds: p,
-        setInlineItemsIds: i
+        setDropdownItemsIds: f,
+        setInlineItemsIds: p,
+        type: e
       },
-      children: /* @__PURE__ */ o("div", { className: T(u.tabsExtended, r), role: "tablist", ...m, children: n })
+      children: /* @__PURE__ */ s(
+        "div",
+        {
+          className: b(u.tabsExtended, v[e], m),
+          role: "tablist",
+          ...a,
+          children: n
+        }
+      )
     }
   );
 };
-E.Content = b;
+w.Content = I;
 export {
-  E as TabsExtended
+  w as TabsExtended
 };
 //# sourceMappingURL=TabsExtended.js.map

package/components/TabsExtended/TabsExtendedContext.js

@@ -1,5 +1,6 @@
 import e from "react";
-const t = {
+import { ETabsExtendedType as t } from "./enums.js";
+const n = {
   dropdownItemsIds: [],
   dropdownRef: { current: null },
   inlineItemsIds: [],
@@ -9,9 +10,10 @@ const t = {
   setDropdownItemsIds: () => {
   },
   setInlineItemsIds: () => {
-  }
-}, o = e.createContext(t);
+  },
+  type: t.TYPE_1
+}, s = e.createContext(n);
 export {
-  o as TabsExtendedContext
+  s as TabsExtendedContext
 };
 //# sourceMappingURL=TabsExtendedContext.js.map

package/components/TabsExtended/components/TabsExtendedContent.js

@@ -1,20 +1,24 @@
-import { jsx as a } from "react/jsx-runtime";
-import { TabsExtendedTabsWrapper as p } from "./TabsExtendedTabsWrapper.js";
-import { TabsExtendedTab as s } from "./TabsExtendedTab.js";
-import { TabsExtendedTabButton as d } from "./TabsExtendedTabButton.js";
-import { TabsExtendedDropdownWrapper as m } from "./TabsExtendedDropdownWrapper.js";
-import { s as n } from "../../../chunks/TabsExtended.module-yT8L2ZYS.js";
-import { c as b } from "../../../chunks/vendor-CF2m175I.js";
-const r = ({
+import { jsx as s } from "react/jsx-runtime";
+import { c as m } from "../../../chunks/vendor-BlJo2ILB.js";
+import { TabsExtendedTabsWrapper as n } from "./TabsExtendedTabsWrapper.js";
+import { TabsExtendedTab as d } from "./TabsExtendedTab.js";
+import { TabsExtendedTabButton as i } from "./TabsExtendedTabButton.js";
+import { EComponentSize as T } from "../../../enums/EComponentSize.js";
+import { TabsExtendedDropdownWrapper as b } from "./TabsExtendedDropdownWrapper.js";
+import { s as r } from "../../../chunks/TabsExtended.module-DW52Fxa9.js";
+import { createSizeToClassNameMap as f } from "../../../utils/classNameMaps.js";
+import "./TabsExtendedTabContext.js";
+const x = f(r), o = ({
   children: t,
-  className: o,
-  ...e
-}) => /* @__PURE__ */ a("div", { className: b(n.tabsExtendedContent, o), ...e, children: t });
-r.TabsWrapper = p;
-r.Tab = s;
-r.TabButton = d;
-r.DropdownWrapper = m;
+  className: e,
+  size: a = T.MD,
+  ...p
+}) => /* @__PURE__ */ s("div", { className: m(r.tabsExtendedContent, x[a], e), ...p, children: t });
+o.TabsWrapper = n;
+o.Tab = d;
+o.TabButton = i;
+o.DropdownWrapper = b;
 export {
-  r as TabsExtendedContent
+  o as TabsExtendedContent
 };
 //# sourceMappingURL=TabsExtendedContent.js.map

package/components/TabsExtended/components/TabsExtendedDropdownWrapper.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { useContext as m } from "react";
-import { s as p } from "../../../chunks/TabsExtended.module-yT8L2ZYS.js";
-import { c as a } from "../../../chunks/vendor-CF2m175I.js";
+import { s as p } from "../../../chunks/TabsExtended.module-DW52Fxa9.js";
+import { c as a } from "../../../chunks/vendor-BlJo2ILB.js";
 import { TabsExtendedContext as i } from "../TabsExtendedContext.js";
 const w = ({
   children: e,

package/components/TabsExtended/components/TabsExtendedTab.js

@@ -1,31 +1,31 @@
-import { jsx as p } from "react/jsx-runtime";
-import x, { useContext as d } from "react";
-import { s as o } from "../../../chunks/TabsExtended.module-yT8L2ZYS.js";
-import { c as I } from "../../../chunks/vendor-CF2m175I.js";
+import { jsx as x } from "react/jsx-runtime";
+import f, { useContext as o } from "react";
+import { s as r } from "../../../chunks/TabsExtended.module-DW52Fxa9.js";
+import { c as I } from "../../../chunks/vendor-BlJo2ILB.js";
 import { TabsExtendedContext as u } from "../TabsExtendedContext.js";
 import { TabsExtendedTabContext as E } from "./TabsExtendedTabContext.js";
-const h = x.forwardRef(
-  ({ children: r, id: e, className: i, onClick: t, ...m }, l) => {
-    const { dropdownItemsIds: n, inlineItemsIds: s, selectedId: b, onSelectTab: c } = d(u), { isFakeTab: a } = d(E), T = (f) => {
-      c(e), t == null || t(f);
+const h = f.forwardRef(
+  ({ children: d, id: e, className: i, onClick: t, ...m }, b) => {
+    const { dropdownItemsIds: a, inlineItemsIds: s, selectedId: l, onSelectTab: c } = o(u), { isFakeTab: n } = o(E), T = (p) => {
+      c(e), t == null || t(p);
     };
-    return /* @__PURE__ */ p(
+    return /* @__PURE__ */ x(
       "span",
       {
         id: (() => {
-          if (!(a || n.includes(e)))
+          if (!(n || a.includes(e)))
             return e;
         })(),
-        className: I(o.tabsExtendedTab, { [o.hidden]: n.includes(e) }, i),
-        onClick: a ? void 0 : T,
+        className: I(r.tabsExtendedTab, { [r.hidden]: a.includes(e) }, i),
+        onClick: n ? void 0 : T,
         ...m,
         role: "presentation",
         "data-tab-item-id": e,
-        ref: a ? void 0 : l,
-        children: r({
+        ref: n ? void 0 : b,
+        children: d({
           isFirstInlineTab: s[0] === e,
           isLastInlineTab: s[s.length - 1] === e,
-          selected: b === e
+          selected: l === e
         })
       }
     );

package/components/TabsExtended/components/TabsExtendedTabButton.js

@@ -1,22 +1,28 @@
-import { jsx as a } from "react/jsx-runtime";
-import i from "react";
-import { s, t as b, a as x } from "../../../chunks/TabsExtendedUtils-BOHZcNx8.js";
-import { c as T } from "../../../chunks/vendor-CF2m175I.js";
-import { Text as l } from "../../Typography/Text.js";
-import { ETabsExtendedTabButtonSize as p } from "../enums.js";
-const c = i.forwardRef(
-  ({ children: o, className: r, selected: t, size: e = p.MD, ...d }, m) => {
-    const n = T(
-      s.tabsExtendedTabButton,
-      b[e],
-      { [s.selected]: !!t },
-      r
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import x, { useContext as b } from "react";
+import { c as f } from "../../../chunks/vendor-BlJo2ILB.js";
+import { EComponentSize as T } from "../../../enums/EComponentSize.js";
+import { s as t, t as l, a as u } from "../../../chunks/utils-Ql50x949.js";
+import { TabsExtendedContext as E } from "../TabsExtendedContext.js";
+import { Text as N } from "../../Typography/Text.js";
+import { NotificationIcon as y } from "../../NotificationIcon/NotificationIcon.js";
+const B = x.forwardRef(
+  ({ children: s, className: n, selected: e, size: o = T.MD, showNotificationIcon: r, ...m }, i) => {
+    const { type: c } = b(E), d = f(
+      t.tabsExtendedTabButton,
+      t[o],
+      l[c],
+      { [t.selected]: !!e },
+      n
     );
-    return /* @__PURE__ */ a("button", { className: n, role: "tab", "aria-selected": t, ref: m, ...d, children: /* @__PURE__ */ a(l, { size: x[e], children: o }) });
+    return /* @__PURE__ */ p("button", { type: "button", className: d, role: "tab", "aria-selected": e, ref: i, ...m, children: [
+      /* @__PURE__ */ a(N, { size: u[o], className: t.tabButtonText, children: s }),
+      r && /* @__PURE__ */ a(y, { className: t.notificationIcon })
+    ] });
   }
 );
-c.displayName = "TabsExtendedTabButton";
+B.displayName = "TabsExtendedTabButton";
 export {
-  c as TabsExtendedTabButton
+  B as TabsExtendedTabButton
 };
 //# sourceMappingURL=TabsExtendedTabButton.js.map

package/components/TabsExtended/components/TabsExtendedTabsWrapper.js

@@ -1,15 +1,15 @@
 import { jsxs as k, Fragment as y, jsx as f } from "react/jsx-runtime";
 import a, { useContext as A, useState as D, useRef as g, useLayoutEffect as R, isValidElement as B } from "react";
-import { h as F, c as N, p as z } from "../../../chunks/vendor-CF2m175I.js";
-import { TabsExtendedContext as _ } from "../TabsExtendedContext.js";
-import { TabsExtendedTabContext as j } from "./TabsExtendedTabContext.js";
-import { s as l } from "../../../chunks/TabsExtended.module-yT8L2ZYS.js";
+import { u as F, c as N, p as z } from "../../../chunks/vendor-BlJo2ILB.js";
+import { TabsExtendedContext as j } from "../TabsExtendedContext.js";
+import { TabsExtendedTabContext as P } from "./TabsExtendedTabContext.js";
+import { s as l } from "../../../chunks/TabsExtended.module-DW52Fxa9.js";
 const G = ({
   children: s,
   className: C,
   ...w
 }) => {
-  const { setDropdownItemsIds: m, setInlineItemsIds: x, dropdownRef: p } = A(_), [c, I] = D(0), r = g(null), h = g(a.Children.count(s)), d = () => {
+  const { setDropdownItemsIds: m, setInlineItemsIds: x, dropdownRef: p } = A(j), [c, I] = D(0), r = g(null), h = g(a.Children.count(s)), d = () => {
     if (r.current) {
       const { children: t } = r.current;
       let { right: e } = r.current.getBoundingClientRect();
@@ -51,7 +51,7 @@ const G = ({
         ref: (t) => {
           r.current !== t && (r.current = t), W(t);
         },
-        children: /* @__PURE__ */ f(j.Provider, { value: { isFakeTab: !0 }, children: T(s) })
+        children: /* @__PURE__ */ f(P.Provider, { value: { isFakeTab: !0 }, children: T(s) })
       }
     ),
     /* @__PURE__ */ f(

package/components/TabsExtended/components/index.js

@@ -0,0 +1,15 @@
+import { TabsExtendedContent as o } from "./TabsExtendedContent.js";
+import { TabsExtendedDropdownWrapper as d } from "./TabsExtendedDropdownWrapper.js";
+import { TabsExtendedTab as a } from "./TabsExtendedTab.js";
+import { TabsExtendedTabButton as p } from "./TabsExtendedTabButton.js";
+import { TabsExtendedTabContext as T } from "./TabsExtendedTabContext.js";
+import { TabsExtendedTabsWrapper as f } from "./TabsExtendedTabsWrapper.js";
+export {
+  o as TabsExtendedContent,
+  d as TabsExtendedDropdownWrapper,
+  a as TabsExtendedTab,
+  p as TabsExtendedTabButton,
+  T as TabsExtendedTabContext,
+  f as TabsExtendedTabsWrapper
+};
+//# sourceMappingURL=index.js.map

package/components/TabsExtended/enums.js

@@ -1,5 +1,5 @@
-var m = /* @__PURE__ */ ((r) => (r.LG = "lg", r.MD = "md", r.SM = "sm", r))(m || {});
+var t = /* @__PURE__ */ ((r) => (r.TYPE_1 = "type1", r.TYPE_2 = "type2", r))(t || {});
 export {
-  m as ETabsExtendedTabButtonSize
+  t as ETabsExtendedType
 };
 //# sourceMappingURL=enums.js.map

package/components/TabsExtended/index.js

@@ -1,7 +1,19 @@
 import { TabsExtended as o } from "./TabsExtended.js";
-import { ETabsExtendedTabButtonSize as r } from "./enums.js";
+import { TabsExtendedContent as d } from "./components/TabsExtendedContent.js";
+import { TabsExtendedDropdownWrapper as a } from "./components/TabsExtendedDropdownWrapper.js";
+import { TabsExtendedTab as n } from "./components/TabsExtendedTab.js";
+import { TabsExtendedTabButton as b } from "./components/TabsExtendedTabButton.js";
+import { TabsExtendedTabContext as E } from "./components/TabsExtendedTabContext.js";
+import { TabsExtendedTabsWrapper as m } from "./components/TabsExtendedTabsWrapper.js";
+import { ETabsExtendedType as W } from "./enums.js";
 export {
-  r as ETabsExtendedTabButtonSize,
-  o as TabsExtended
+  W as ETabsExtendedType,
+  o as TabsExtended,
+  d as TabsExtendedContent,
+  a as TabsExtendedDropdownWrapper,
+  n as TabsExtendedTab,
+  b as TabsExtendedTabButton,
+  E as TabsExtendedTabContext,
+  m as TabsExtendedTabsWrapper
 };
 //# sourceMappingURL=index.js.map

package/components/TabsExtended/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/components/TabsExtended/utils.js

@@ -0,0 +1,9 @@
+import "./enums.js";
+import "../../enums/EComponentSize.js";
+import { a as s, t as i } from "../../chunks/utils-Ql50x949.js";
+import "../Typography/enums.js";
+export {
+  s as tabsExtendedSizeToTextSizeMap,
+  i as tabsExtendedTypeToClassNameMap
+};
+//# sourceMappingURL=utils.js.map

package/components/TabsLine/TabsLine.js

@@ -0,0 +1,49 @@
+import { jsx as r } from "react/jsx-runtime";
+import { c as b } from "../../chunks/vendor-BlJo2ILB.js";
+import { MobileView as c } from "../MobileView/MobileView.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-Do3KfZpp.js";
+import "./components/TabsLineDropdown.js";
+import "./components/TabsLineItem.js";
+const v = ({
+  className: s,
+  dropdownTargetHtmlAttributes: a,
+  maxVisible: e,
+  onChangeTab: i,
+  paddingX: p,
+  selectedId: o,
+  tabs: t,
+  size: l,
+  withSeparator: f,
+  ...n
+}) => /* @__PURE__ */ r(
+  "div",
+  {
+    role: "tablist",
+    className: b(s, m.tabsLineWrapper, { [m.withSeparator]: f }),
+    ...n,
+    "data-paddingx-size": p,
+    children: /* @__PURE__ */ r(
+      c,
+      {
+        fallback: /* @__PURE__ */ r(
+          d,
+          {
+            tabs: t,
+            onChangeTab: i,
+            selectedId: o,
+            dropdownTargetHtmlAttributes: a,
+            maxVisible: e,
+            size: l
+          }
+        ),
+        children: /* @__PURE__ */ r(x, { tabs: t, onChangeTab: i, selectedId: o })
+      }
+    )
+  }
+);
+export {
+  v as TabsLine
+};
+//# sourceMappingURL=TabsLine.js.map

package/components/TabsLine/components/TabsLineDesktop.js

@@ -0,0 +1,81 @@
+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-BlJo2ILB.js";
+import { s as J } from "../../../chunks/TabsLine.module-Do3KfZpp.js";
+const $ = ({
+  tabs: l,
+  dropdownTargetHtmlAttributes: g,
+  selectedId: R,
+  onChangeTab: m,
+  maxVisible: d,
+  size: i
+}) => {
+  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());
+      }
+    }, _ = (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,
+      {
+        selected: R === c.id,
+        onClick: O,
+        onKeyDown: W,
+        tabIndex: K,
+        onFocus: _,
+        onBlur: q,
+        ...c,
+        size: w ?? i,
+        ref: G
+      },
+      c.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,
+          {
+            tabs: r,
+            active: e !== void 0,
+            label: n,
+            onClickTab: (s) => m(s.id),
+            selected: e,
+            targetHtmlAttributes: g,
+            size: i
+          },
+          "TabsLineDropdown"
+        )
+      );
+    }
+    return o;
+  };
+  return l.length ? /* @__PURE__ */ p("div", { className: J.tabsLine, ref: A, "data-size": i, children: H() }) : null;
+};
+export {
+  $ as TabsLineDesktop
+};
+//# sourceMappingURL=TabsLineDesktop.js.map

package/components/TabsLine/components/TabsLineDropdown.js

@@ -0,0 +1,173 @@
+var A = Object.defineProperty;
+var k = (p, r, e) => r in p ? A(p, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : p[r] = e;
+var t = (p, r, e) => k(p, typeof r != "symbol" ? r + "" : r, e);
+import { jsxs as g, jsx as d } from "react/jsx-runtime";
+import v, { createElement as O } from "react";
+import { a as x, c as C } from "../../../chunks/vendor-BlJo2ILB.js";
+import { Dropdown as E } from "../../Dropdown/Dropdown.js";
+import { DropdownListContext as M } from "../../Dropdown/DropdownListContext.js";
+import "../../Dropdown/desktop/DropdownDesktop.js";
+import { DropdownList as N } from "../../Dropdown/desktop/DropdownList.js";
+import "../../../chunks/DropdownListItem-lbLsbKwC.js";
+import "../../Dropdown/mobile/DropdownMobile.js";
+import "../../Dropdown/mobile/DropdownMobileBody.js";
+import "../../Dropdown/mobile/DropdownMobileClose.js";
+import "../../Dropdown/mobile/DropdownMobileFooter.js";
+import "../../Dropdown/mobile/DropdownMobileHeader.js";
+import "../../Dropdown/mobile/DropdownMobileInner.js";
+import "../../Dropdown/mobile/DropdownMobileInput.js";
+import "../../Dropdown/mobile/DropdownMobileList.js";
+import "../../Dropdown/mobile/DropdownMobileListItem.js";
+import "../../Loader/LoaderSmall/LoaderSmall.js";
+import "../../Loader/LoaderMiddle/LoaderMiddle.js";
+import { EComponentSize as y } from "../../../enums/EComponentSize.js";
+import { CaretdownStrokeSrvIcon16 as L } from "@sberbusiness/icons-next";
+import { isKey as l } from "../../../utils/keyboard.js";
+import { s as o } from "../../../chunks/TabsLine.module-Do3KfZpp.js";
+import { createSizeToClassNameMap as z } from "../../../utils/classNameMaps.js";
+import { Text as P } from "../../Typography/Text.js";
+import { tabsLineSizeToTextSizeMap as K } from "../utils.js";
+import { EFontType as I } from "../../Typography/enums.js";
+const W = z(o);
+class De extends v.PureComponent {
+  constructor(e) {
+    super(e);
+    t(this, "state", {
+      activeDescendant: void 0,
+      opened: !1,
+      focused: !1,
+      hovered: !1
+    });
+    t(this, "targetRef");
+    t(this, "dropdownRef");
+    t(this, "instanceId", x());
+    /** Установка значения activeDescendant. */
+    t(this, "setActiveDescendant", (e) => {
+      this.setState({ activeDescendant: e });
+    });
+    /** Рендер кнопки, раскрывающей список. */
+    t(this, "renderTarget", () => {
+      const { active: e, label: s, targetHtmlAttributes: a, size: i = y.MD } = this.props, { activeDescendant: n, opened: h, focused: R, hovered: S } = this.state, m = C(o.tab, W[i], o.dropdownTarget, {
+        [o.active]: e
+      }), f = C(o.dropdownTargetCaret, { [o.opened]: h }), { onFocus: u, onBlur: w, onMouseEnter: D, onMouseLeave: T, ...b } = a || {};
+      return /* @__PURE__ */ d(
+        "button",
+        {
+          ...b,
+          onFocus: (c) => {
+            this.setState({ focused: !0 }), u == null || u(c);
+          },
+          onBlur: (c) => {
+            this.setState({ focused: !1 }), w == null || w(c);
+          },
+          onMouseEnter: (c) => {
+            this.setState({ hovered: !0 }), D == null || D(c);
+          },
+          onMouseLeave: (c) => {
+            this.setState({ hovered: !1 }), T == null || T(c);
+          },
+          className: m,
+          onClick: this.handleTargetClick,
+          onKeyDown: this.handleTargetKeyDown,
+          type: "button",
+          role: "tab",
+          "aria-haspopup": "menu",
+          "aria-expanded": h,
+          "aria-controls": this.instanceId,
+          "aria-activedescendant": n,
+          children: /* @__PURE__ */ d("span", { className: o.tabInner, children: /* @__PURE__ */ g("span", { className: o.dropdownTargetInner, children: [
+            /* @__PURE__ */ d(
+              P,
+              {
+                size: K[i],
+                type: e || R || S ? I.PRIMARY : I.SECONDARY,
+                children: s
+              }
+            ),
+            /* @__PURE__ */ d(L, { className: f, paletteIndex: 5 })
+          ] }) })
+        }
+      );
+    });
+    /** Рендер дропдаун списка. */
+    t(this, "renderDropdown", () => {
+      const { selected: e, tabs: s } = this.props, { activeDescendant: a, opened: i } = this.state;
+      return /* @__PURE__ */ d(
+        E,
+        {
+          className: o.dropdown,
+          opened: i,
+          setOpened: this.setOpenedDropdown,
+          targetRef: this.targetRef,
+          ref: this.dropdownRef,
+          children: /* @__PURE__ */ d(
+            M.Provider,
+            {
+              value: { activeDescendant: a, setActiveDescendant: this.setActiveDescendant },
+              children: /* @__PURE__ */ d(N, { dropdownOpened: i, id: this.instanceId, children: s.map((n) => {
+                const { id: h, label: R, showNotificationIcon: S, ...m } = n, f = C(o.dropdownItem);
+                return /* @__PURE__ */ O(
+                  N.Item,
+                  {
+                    ...m,
+                    className: f,
+                    id: n.id,
+                    key: n.id,
+                    onSelect: () => {
+                      this.handleClickTab(n);
+                    },
+                    selected: n === e,
+                    showNotificationIcon: n.showNotificationIcon
+                  },
+                  /* @__PURE__ */ d("span", { className: o.dropdownItemInner, children: n.label })
+                );
+              }) })
+            }
+          )
+        }
+      );
+    });
+    /** Открывает/закрывает Dropdown. */
+    t(this, "setOpenedDropdown", (e) => {
+      this.setState({ opened: e });
+    });
+    /** Обработчик кнопки, раскрывающей список. */
+    t(this, "handleTargetClick", () => {
+      const { opened: e } = this.state;
+      this.setState({ opened: !e });
+    });
+    /** Обработчик клика по табу. */
+    t(this, "handleClickTab", (e) => {
+      const { onClickTab: s } = this.props, { opened: a } = this.state;
+      s(e), this.setState({ opened: !a });
+    });
+    /** Обработчик нажатия клавиш по кнопке, раскрывающей список. */
+    t(this, "handleTargetKeyDown", (e) => {
+      const { opened: s } = this.state;
+      s || (l(e.code, "ARROW_UP") || l(e.code, "ARROW_DOWN")) && (e.preventDefault(), this.setState({ opened: !0 })), s && (l(e.code, "TAB") || l(e.code, "ESCAPE")) && this.setState({ opened: !1 });
+    });
+    /** Обработчик клика вне дропдауна. */
+    t(this, "handleClickOutside", (e) => {
+      var a, i;
+      const { opened: s } = this.state;
+      s && !((a = this.targetRef.current) != null && a.contains(e.target)) && !((i = this.dropdownRef.current) != null && i.contains(e.target)) && this.setState({ opened: !1 });
+    });
+    this.targetRef = v.createRef(), this.dropdownRef = v.createRef();
+  }
+  componentDidMount() {
+    document.addEventListener("mouseup", this.handleClickOutside);
+  }
+  componentWillUnmount() {
+    document.removeEventListener("mouseup", this.handleClickOutside);
+  }
+  render() {
+    return /* @__PURE__ */ g("div", { className: o.tabsLineDropdown, ref: this.targetRef, children: [
+      this.renderTarget(),
+      this.renderDropdown()
+    ] });
+  }
+}
+export {
+  De as TabsLineDropdown
+};
+//# sourceMappingURL=TabsLineDropdown.js.map