@sberbusiness/triplex-next 1.34.0 → 1.35.0

package/components/TabsExtended/components/TabsExtendedDropdownWrapper.js

@@ -1,26 +1,26 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useContext as m } from "react";
-import { s as p } from "../../../chunks/TabsExtended.module-CAl-vyry.js";
-import { c as a } from "../../../chunks/vendor-D5cfSbgz.js";
-import { TabsExtendedContext as i } from "../TabsExtendedContext.js";
-const w = ({
-  children: e,
-  className: r,
-  ...t
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { s as styles } from "../../../chunks/TabsExtended.module-8TiEo2ec.js";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { TabsExtendedContext } from "../TabsExtendedContext.js";
+const TabsExtendedDropdownWrapper = ({
+  children,
+  className,
+  ...htmlDivAttributes
 }) => {
-  const { dropdownItemsIds: o, onSelectTab: d, dropdownRef: s } = m(i);
-  return /* @__PURE__ */ n(
+  const { dropdownItemsIds, onSelectTab, dropdownRef } = useContext(TabsExtendedContext);
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: a(p.tabsExtendedDropdown, r),
-      ...t,
-      hidden: !o.length,
-      ref: s,
-      children: e({ dropdownItemsIds: o, onSelectTab: d })
+      className: clsx(styles.tabsExtendedDropdown, className),
+      ...htmlDivAttributes,
+      hidden: !dropdownItemsIds.length,
+      ref: dropdownRef,
+      children: children({ dropdownItemsIds, onSelectTab })
     }
   );
 };
 export {
-  w as TabsExtendedDropdownWrapper
+  TabsExtendedDropdownWrapper
 };
 //# sourceMappingURL=TabsExtendedDropdownWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabsExtendedDropdownWrapper.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedDropdownWrapper.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport styles from \"../styles/TabsExtended.module.less\";\nimport clsx from \"clsx\";\nimport { TabsExtendedContext } from \"../TabsExtendedContext\";\nimport { TTabsExtendedOnSelectTab } from \"@sberbusiness/triplex-next/components/TabsExtended/types\";\n\nexport interface ITabsExtendedDropdownWrapperProvideProps {\n    dropdownItemsIds: string[];\n    onSelectTab: TTabsExtendedOnSelectTab;\n}\n\n/** Свойства компонента TabsExtendedDropdownWrapper. */\nexport interface ITabsExtendedDropdownWrapperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    children: (props: ITabsExtendedDropdownWrapperProvideProps) => React.ReactNode;\n}\n\n/** Контейнер для Dropdown компонента табов. */\nexport const TabsExtendedDropdownWrapper: React.FC<ITabsExtendedDropdownWrapperProps> = ({\n    children,\n    className,\n    ...htmlDivAttributes\n}) => {\n    const { dropdownItemsIds, onSelectTab, dropdownRef } = useContext(TabsExtendedContext);\n\n    return (\n        <div\n            className={clsx(styles.tabsExtendedDropdown, className)}\n            {...htmlDivAttributes}\n            hidden={!dropdownItemsIds.length}\n            ref={dropdownRef}\n        >\n            {children({ dropdownItemsIds, onSelectTab })}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;AAiBO,MAAM,8BAA2E,CAAC;AAAA,EACrF;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,EAAE,kBAAkB,aAAa,YAAA,IAAgB,WAAW,mBAAmB;AAErF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,sBAAsB,SAAS;AAAA,MACrD,GAAG;AAAA,MACJ,QAAQ,CAAC,iBAAiB;AAAA,MAC1B,KAAK;AAAA,MAEJ,UAAA,SAAS,EAAE,kBAAkB,YAAA,CAAa;AAAA,IAAA;AAAA,EAAA;AAGvD;"}

package/components/TabsExtended/components/TabsExtendedTab.js

@@ -1,38 +1,44 @@
-import { jsx as p } from "react/jsx-runtime";
-import x, { useContext as d } from "react";
-import { s as o } from "../../../chunks/TabsExtended.module-CAl-vyry.js";
-import { c as I } from "../../../chunks/vendor-D5cfSbgz.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);
+import { jsx } from "react/jsx-runtime";
+import React__default, { useContext } from "react";
+import { s as styles } from "../../../chunks/TabsExtended.module-8TiEo2ec.js";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { TabsExtendedContext } from "../TabsExtendedContext.js";
+import { TabsExtendedTabContext } from "./TabsExtendedTabContext.js";
+const TabsExtendedTab = React__default.forwardRef(
+  ({ children, id, className, onClick, ...htmlSpanAttributes }, ref) => {
+    const { dropdownItemsIds, inlineItemsIds, selectedId, onSelectTab } = useContext(TabsExtendedContext);
+    const { isFakeTab } = useContext(TabsExtendedTabContext);
+    const handleClick = (event) => {
+      onSelectTab(id);
+      onClick == null ? void 0 : onClick(event);
     };
-    return /* @__PURE__ */ p(
+    const getId = () => {
+      if (isFakeTab || dropdownItemsIds.includes(id)) {
+        return void 0;
+      }
+      return id;
+    };
+    return /* @__PURE__ */ jsx(
       "span",
       {
-        id: (() => {
-          if (!(a || n.includes(e)))
-            return e;
-        })(),
-        className: I(o.tabsExtendedTab, { [o.hidden]: n.includes(e) }, i),
-        onClick: a ? void 0 : T,
-        ...m,
+        id: getId(),
+        className: clsx(styles.tabsExtendedTab, { [styles.hidden]: dropdownItemsIds.includes(id) }, className),
+        onClick: isFakeTab ? void 0 : handleClick,
+        ...htmlSpanAttributes,
         role: "presentation",
-        "data-tab-item-id": e,
-        ref: a ? void 0 : l,
-        children: r({
-          isFirstInlineTab: s[0] === e,
-          isLastInlineTab: s[s.length - 1] === e,
-          selected: b === e
+        "data-tab-item-id": id,
+        ref: isFakeTab ? void 0 : ref,
+        children: children({
+          isFirstInlineTab: inlineItemsIds[0] === id,
+          isLastInlineTab: inlineItemsIds[inlineItemsIds.length - 1] === id,
+          selected: selectedId === id
         })
       }
     );
   }
 );
-h.displayName = "TabsExtendedTab";
+TabsExtendedTab.displayName = "TabsExtendedTab";
 export {
-  h as TabsExtendedTab
+  TabsExtendedTab
 };
 //# sourceMappingURL=TabsExtendedTab.js.map

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

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

package/components/TabsExtended/components/TabsExtendedTabButton.js

@@ -1,48 +1,49 @@
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
-import b, { useContext as c } from "react";
-import { c as f } from "../../../chunks/vendor-D5cfSbgz.js";
-import { s as t, T as _, a as r } from "../../../chunks/utils-YOUyx-FI.js";
-import { TabsExtendedContext as l } from "../TabsExtendedContext.js";
-import { EFontType as u } from "../../Typography/enums.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { useContext } from "react";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { s as styles, T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP, a as TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP } from "../../../chunks/utils-Bxe6TI9J.js";
+import { TabsExtendedContext } from "../TabsExtendedContext.js";
+import { EFontType } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
-import { Text as m } from "../../Typography/Text.js";
+import { Text } from "../../Typography/Text.js";
 import "../../Typography/Title.js";
-import { Badge as N } from "../../Badge/Badge.js";
-import { EComponentSize as B } from "../../../enums/EComponentSize.js";
-const D = b.forwardRef(
-  ({ children: a, className: n, selected: s, size: o = B.MD, showNotificationIcon: T, ...E }, p) => {
-    const { type: d } = c(l), i = f(
-      t.tabsExtendedTabButton,
-      t[o],
-      _[d],
-      { [t.selected]: !!s },
-      n
+import { Badge } from "../../Badge/Badge.js";
+import { EComponentSize } from "../../../enums/EComponentSize.js";
+const TabsExtendedTabButton = React__default.forwardRef(
+  ({ children, className, selected, size = EComponentSize.MD, showNotificationIcon, ...rest }, ref) => {
+    const { type } = useContext(TabsExtendedContext);
+    const classNames = clsx(
+      styles.tabsExtendedTabButton,
+      styles[size],
+      TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP[type],
+      { [styles.selected]: !!selected },
+      className
     );
-    return /* @__PURE__ */ x("button", { type: "button", className: i, role: "tab", "aria-selected": s, ref: p, ...E, children: [
-      /* @__PURE__ */ e(
-        m,
+    return /* @__PURE__ */ jsxs("button", { type: "button", className: classNames, role: "tab", "aria-selected": selected, ref, ...rest, children: [
+      /* @__PURE__ */ jsx(
+        Text,
         {
-          className: t.tabsExtendedTabButtonTextDefault,
-          size: r[o],
-          type: u.SECONDARY,
-          children: a
+          className: styles.tabsExtendedTabButtonTextDefault,
+          size: TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP[size],
+          type: EFontType.SECONDARY,
+          children
         }
       ),
-      /* @__PURE__ */ e(
-        m,
+      /* @__PURE__ */ jsx(
+        Text,
         {
-          className: t.tabsExtendedTabButtonTextHover,
-          size: r[o],
-          children: a
+          className: styles.tabsExtendedTabButtonTextHover,
+          size: TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP[size],
+          children
         }
       ),
-      T && /* @__PURE__ */ e(N.Dot, { size: o, className: t.notificationIcon })
+      showNotificationIcon && /* @__PURE__ */ jsx(Badge.Dot, { size, className: styles.notificationIcon })
     ] });
   }
 );
-D.displayName = "TabsExtendedTabButton";
+TabsExtendedTabButton.displayName = "TabsExtendedTabButton";
 export {
-  D as TabsExtendedTabButton
+  TabsExtendedTabButton
 };
 //# sourceMappingURL=TabsExtendedTabButton.js.map

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

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

package/components/TabsExtended/components/TabsExtendedTabContext.js

@@ -1,8 +1,9 @@
-import t from "react";
-const e = {
-  isFakeTab: !1
-}, o = t.createContext(e);
+import React__default from "react";
+const contextInitial = {
+  isFakeTab: false
+};
+const TabsExtendedTabContext = React__default.createContext(contextInitial);
 export {
-  o as TabsExtendedTabContext
+  TabsExtendedTabContext
 };
 //# sourceMappingURL=TabsExtendedTabContext.js.map

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

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

package/components/TabsExtended/components/TabsExtendedTabsWrapper.js

@@ -1,70 +1,107 @@
-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 { g as F, c as N, h as z } from "../../../chunks/vendor-D5cfSbgz.js";
-import { TabsExtendedContext as _ } from "../TabsExtendedContext.js";
-import { TabsExtendedTabContext as j } from "./TabsExtendedTabContext.js";
-import { s as l } from "../../../chunks/TabsExtended.module-CAl-vyry.js";
-const G = ({
-  children: s,
-  className: C,
-  ...w
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React__default, { useContext, useState, useRef, useLayoutEffect, isValidElement } from "react";
+import { g as useResizeDetector, c as clsx, h as pickBy } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { TabsExtendedContext } from "../TabsExtendedContext.js";
+import { TabsExtendedTabContext } from "./TabsExtendedTabContext.js";
+import { s as styles } from "../../../chunks/TabsExtended.module-8TiEo2ec.js";
+const TabsExtendedTabsWrapper = ({
+  children,
+  className,
+  ...htmlDivAttributes
 }) => {
-  const { setDropdownItemsIds: m, setInlineItemsIds: x, dropdownRef: p } = A(_), [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();
-      const i = [], u = [];
-      let n = !1;
-      e = e - 4, Array.from(t).forEach((o) => {
-        const { right: b } = o.getBoundingClientRect();
-        e - c < b ? (i.push(o.getAttribute("data-tab-item-id")), !n && e < b && (n = !0)) : o.getAttribute("data-tab-item-id") && u.push(o.getAttribute("data-tab-item-id"));
-      }), m(n ? i : []), x(u);
+  const { setDropdownItemsIds, setInlineItemsIds, dropdownRef } = useContext(TabsExtendedContext);
+  const [dropdownWidth, setDropdownWidth] = useState(0);
+  const tabsFakeRef = useRef(null);
+  const childrenCount = useRef(React__default.Children.count(children));
+  const checkVisibleItems = () => {
+    if (tabsFakeRef.current) {
+      const { children: children2 } = tabsFakeRef.current;
+      let { right: containerRight } = tabsFakeRef.current.getBoundingClientRect();
+      const dropdownIds = [];
+      const inlineIds = [];
+      let overflow = false;
+      containerRight = containerRight - 4;
+      Array.from(children2).forEach((tab) => {
+        const { right } = tab.getBoundingClientRect();
+        if (containerRight - dropdownWidth < right) {
+          dropdownIds.push(tab.getAttribute("data-tab-item-id"));
+          if (!overflow && containerRight < right) {
+            overflow = true;
+          }
+        } else {
+          if (tab.getAttribute("data-tab-item-id")) {
+            inlineIds.push(tab.getAttribute("data-tab-item-id"));
+          }
+        }
+      });
+      if (overflow) {
+        setDropdownItemsIds(dropdownIds);
+      } else {
+        setDropdownItemsIds([]);
+      }
+      setInlineItemsIds(inlineIds);
+    }
+  };
+  const setNewDropdownWidth = () => {
+    if (dropdownRef.current) {
+      const { width } = dropdownRef.current.getBoundingClientRect();
+      if (width !== dropdownWidth) {
+        setDropdownWidth(width);
+      }
     }
-  }, E = () => {
-    if (p.current) {
-      const { width: t } = p.current.getBoundingClientRect();
-      t !== c && I(t);
+  };
+  const setNewChildrenCount = () => {
+    const count = React__default.Children.count(children);
+    if (childrenCount.current !== count) {
+      childrenCount.current = count;
+      checkVisibleItems();
     }
-  }, v = () => {
-    const t = a.Children.count(s);
-    h.current !== t && (h.current = t, d());
   };
-  R(() => {
-    E(), v();
-  }), R(d, [c]);
-  const T = (t) => a.Children.map(t, (e) => {
-    if (!B(e))
-      return e;
-    const i = z(e.props, (u, n) => !n.startsWith("data-"));
-    return a.createElement(e.type, i);
-  }), { ref: W } = F({
-    handleWidth: !0,
-    onResize: d,
+  useLayoutEffect(() => {
+    setNewDropdownWidth();
+    setNewChildrenCount();
+  });
+  useLayoutEffect(checkVisibleItems, [dropdownWidth]);
+  const stripDataAttributes = (toProcess) => {
+    return React__default.Children.map(toProcess, (child) => {
+      if (!isValidElement(child)) {
+        return child;
+      }
+      const filteredProps = pickBy(child.props, (_val, key) => !key.startsWith("data-"));
+      return React__default.createElement(child.type, filteredProps);
+    });
+  };
+  const { ref: resizeRef } = useResizeDetector({
+    handleWidth: true,
+    onResize: checkVisibleItems,
     refreshMode: "throttle",
     refreshRate: 150
   });
-  return /* @__PURE__ */ k(y, { children: [
-    /* @__PURE__ */ f(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: l.tabsFake,
-        ref: (t) => {
-          r.current !== t && (r.current = t), W(t);
+        className: styles.tabsFake,
+        ref: (node) => {
+          if (tabsFakeRef.current !== node) {
+            tabsFakeRef.current = node;
+          }
+          resizeRef(node);
         },
-        children: /* @__PURE__ */ f(j.Provider, { value: { isFakeTab: !0 }, children: T(s) })
+        children: /* @__PURE__ */ jsx(TabsExtendedTabContext.Provider, { value: { isFakeTab: true }, children: stripDataAttributes(children) })
       }
     ),
-    /* @__PURE__ */ f(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: N(l.tabsReal, { [l.hidden]: !r.current }, C),
-        ...w,
-        children: s
+        className: clsx(styles.tabsReal, { [styles.hidden]: !tabsFakeRef.current }, className),
+        ...htmlDivAttributes,
+        children
       }
     )
   ] });
 };
 export {
-  G as TabsExtendedTabsWrapper
+  TabsExtendedTabsWrapper
 };
 //# sourceMappingURL=TabsExtendedTabsWrapper.js.map

package/components/TabsExtended/components/TabsExtendedTabsWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsExtendedTabsWrapper.js","sources":["../../../../src/components/TabsExtended/components/TabsExtendedTabsWrapper.tsx"],"sourcesContent":["import React, { useContext, useState, useRef, useLayoutEffect, isValidElement } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\nimport pickBy from \"lodash/pickBy\";\nimport clsx from \"clsx\";\nimport { TabsExtendedContext } from \"../TabsExtendedContext\";\nimport { TabsExtendedTabContext } from \"./TabsExtendedTabContext\";\nimport styles from \"../styles/TabsExtended.module.less\";\n\n/** Свойства компонента TabsExtendedTabsWrapper. */\nexport interface ITabsExtendedTabsWrapperProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Контейнер табов.\n * Рендерит инлайн табы и определяет табы, которые должны быть отрендерены в Dropdown.\n */\nexport const TabsExtendedTabsWrapper: React.FC<ITabsExtendedTabsWrapperProps> = ({\n    children,\n    className,\n    ...htmlDivAttributes\n}) => {\n    const { setDropdownItemsIds, setInlineItemsIds, dropdownRef } = useContext(TabsExtendedContext);\n    const [dropdownWidth, setDropdownWidth] = useState(0);\n    const tabsFakeRef = useRef<HTMLDivElement>(null);\n    const childrenCount = useRef(React.Children.count(children));\n\n    const checkVisibleItems = () => {\n        if (tabsFakeRef.current) {\n            const { children } = tabsFakeRef.current;\n            let { right: containerRight } = tabsFakeRef.current.getBoundingClientRect();\n            const dropdownIds: string[] = [];\n            const inlineIds: string[] = [];\n            let overflow = false;\n\n            // Padding-right контейнера равен 2px и отступ между кнопками 2px. Правая граница таба не должна выходить за (граница контейнера - 4px).\n            containerRight = containerRight - 4;\n\n            Array.from(children).forEach((tab) => {\n                const { right } = tab.getBoundingClientRect();\n\n                if (containerRight - dropdownWidth < right) {\n                    dropdownIds.push(tab.getAttribute(\"data-tab-item-id\")!);\n                    if (!overflow && containerRight < right) {\n                        overflow = true;\n                    }\n                } else {\n                    if (tab.getAttribute(\"data-tab-item-id\")) {\n                        inlineIds.push(tab.getAttribute(\"data-tab-item-id\")!);\n                    }\n                }\n            });\n\n            if (overflow) {\n                setDropdownItemsIds(dropdownIds);\n            } else {\n                setDropdownItemsIds([]);\n            }\n\n            setInlineItemsIds(inlineIds);\n        }\n    };\n\n    const setNewDropdownWidth = () => {\n        if (dropdownRef.current) {\n            const { width } = dropdownRef.current.getBoundingClientRect();\n\n            if (width !== dropdownWidth) {\n                setDropdownWidth(width);\n            }\n        }\n    };\n\n    const setNewChildrenCount = () => {\n        const count = React.Children.count(children);\n\n        if (childrenCount.current !== count) {\n            childrenCount.current = count;\n            checkVisibleItems();\n        }\n    };\n\n    useLayoutEffect(() => {\n        setNewDropdownWidth();\n        setNewChildrenCount();\n    });\n\n    useLayoutEffect(checkVisibleItems, [dropdownWidth]);\n\n    /** Возвращает children без `data-` атрибутов */\n    const stripDataAttributes = (toProcess: React.ReactNode): React.ReactNode => {\n        return React.Children.map(toProcess, (child) => {\n            // Если не может иметь `data-` атрибутов, вернуть как есть\n            if (!isValidElement(child)) {\n                return child;\n            }\n\n            // Оставить только пропы, не начинающиеся с `data-`\n            const filteredProps = pickBy(child.props, (_val, key) => !key.startsWith(\"data-\"));\n\n            return React.createElement(child.type, filteredProps);\n        });\n    };\n\n    const { ref: resizeRef } = useResizeDetector({\n        handleWidth: true,\n        onResize: checkVisibleItems,\n        refreshMode: \"throttle\",\n        refreshRate: 150,\n    });\n\n    return (\n        <>\n            {/* Скрытый контейнер с дубликатом табов, для вычисления табов, передаваемых в Dropdown. */}\n            {/* TabsFake идут в коде обязательно выше, чем tabsReal. */}\n            <div\n                className={styles.tabsFake}\n                ref={(node) => {\n                    if (tabsFakeRef.current !== node) {\n                        (tabsFakeRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n                    }\n\n                    resizeRef(node);\n                }}\n            >\n                <TabsExtendedTabContext.Provider value={{ isFakeTab: true }}>\n                    {stripDataAttributes(children)}\n                </TabsExtendedTabContext.Provider>\n            </div>\n\n            <div\n                className={clsx(styles.tabsReal, { [styles.hidden]: !tabsFakeRef.current }, className)}\n                {...htmlDivAttributes}\n            >\n                {children}\n            </div>\n        </>\n    );\n};\n"],"names":["React","children"],"mappings":"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"}

package/components/TabsExtended/components/index.js

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

package/components/TabsExtended/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/TabsExtended/enums.js

@@ -1,5 +1,9 @@
-var t = /* @__PURE__ */ ((r) => (r.TYPE_1 = "type1", r.TYPE_2 = "type2", r))(t || {});
+var ETabsExtendedType = /* @__PURE__ */ ((ETabsExtendedType2) => {
+  ETabsExtendedType2["TYPE_1"] = "type1";
+  ETabsExtendedType2["TYPE_2"] = "type2";
+  return ETabsExtendedType2;
+})(ETabsExtendedType || {});
 export {
-  t as ETabsExtendedType
+  ETabsExtendedType
 };
 //# sourceMappingURL=enums.js.map

package/components/TabsExtended/enums.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.js","sources":["../../../src/components/TabsExtended/enums.ts"],"sourcesContent":["export enum ETabsExtendedType {\n    TYPE_1 = \"type1\",\n    TYPE_2 = \"type2\",\n}\n"],"names":["ETabsExtendedType"],"mappings":"AAAO,IAAK,sCAAAA,uBAAL;AACHA,qBAAA,QAAA,IAAS;AACTA,qBAAA,QAAA,IAAS;AAFD,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;"}

package/components/TabsExtended/index.js

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

package/components/TabsExtended/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/components/TabsExtended/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/TabsExtended/utils.js

@@ -1,9 +1,9 @@
 import "./enums.js";
 import "../../enums/EComponentSize.js";
-import { a as o, T as r } from "../../chunks/utils-YOUyx-FI.js";
+import { a, T } from "../../chunks/utils-Bxe6TI9J.js";
 import "../Typography/enums.js";
 export {
-  o as TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP,
-  r as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP
+  a as TABS_EXTENDED_SIZE_TO_TEXT_SIZE_MAP,
+  T as TABS_EXTENDED_TYPE_TO_CLASS_NAME_MAP
 };
 //# sourceMappingURL=utils.js.map

package/components/TabsExtended/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}