@smwb/ui-react 2.6.2 → 2.7.0

package/dist/headless/components/navigation/tabs/tabs.js

@@ -1,24 +1,29 @@
-import { jsx as u, jsxs as B } from "react/jsx-runtime";
-import s from "react";
-import v from "clsx";
-import { debounce as D } from "../../../utils/debounce.js";
-import { useEventCallback as S } from "../../../hooks/useEventCallback.js";
-import { setRef as O } from "../../../utils/setRef.js";
-import { animate as j } from "../../../utils/animate.js";
-const L = {
+import { jsxs as M, jsx as i } from "react/jsx-runtime";
+import o from "react";
+import y from "clsx";
+import { debounce as J } from "../../../utils/debounce.js";
+import { useEventCallback as _ } from "../../../hooks/useEventCallback.js";
+import { setRef as K } from "../../../utils/setRef.js";
+import { animate as Q } from "../../../utils/animate.js";
+import { Icon as z } from "../../base/icon/icon.js";
+const x = {
   root: {},
   content: {}
-}, K = s.forwardRef(function(M, N) {
+}, U = 0.8, ot = o.forwardRef(function(B, I) {
   const {
-    className: C,
-    children: _,
-    onChange: E,
-    value: f,
-    indicatorContent: d = !1,
-    scrollable: y = !1,
-    "aria-label": z,
-    ...T
-  } = M, [x, I] = s.useState(!1), [c, h] = s.useState(L), l = s.useRef(null), a = s.useRef(null), b = s.useRef([]), w = 40, p = () => {
+    className: T,
+    children: W,
+    onChange: k,
+    value: u,
+    indicatorContent: m = !1,
+    scrollable: w = !1,
+    scrollButtons: O = !1,
+    dense: A = !1,
+    scrollBackAriaLabel: V = "Scroll tabs back",
+    scrollForwardAriaLabel: D = "Scroll tabs forward",
+    "aria-label": P,
+    ...j
+  } = B, [F, G] = o.useState(!1), [c, R] = o.useState(x), [f, q] = o.useState({ start: !1, end: !1 }), l = o.useRef(null), d = o.useRef(null), h = o.useRef([]), S = 40, g = () => {
     const t = l.current;
     let e;
     if (t) {
@@ -34,57 +39,63 @@ const L = {
         right: n.right
       };
     }
-    let r = null, o = null;
-    if (a.current || console.error("tabListRef.current is undefined"), t && a.current) {
-      const n = a.current.children;
+    let r = null, s = null;
+    if (d.current || console.error("tabListRef.current is undefined"), t && d.current) {
+      const n = d.current.children;
       if (n.length > 0) {
-        const i = n[f];
-        r = i ? i.getBoundingClientRect() : null, d && (o = b.current[f] ? b.current[f].getBoundingClientRect() : null);
+        const a = n[u];
+        r = a ? a.getBoundingClientRect() : null, m && (s = h.current[u] ? h.current[u].getBoundingClientRect() : null);
       }
     }
-    return { tabsMeta: e, tabMeta: r, tabContentMeta: o };
-  }, m = S(() => {
-    const { tabsMeta: t, tabMeta: e, tabContentMeta: r } = p();
-    let o = 0;
-    e && t && (o = 1 * (e.left - t.left + t.scrollLeft));
+    return { tabsMeta: e, tabMeta: r, tabContentMeta: s };
+  }, p = _(() => {
+    const { tabsMeta: t, tabMeta: e, tabContentMeta: r } = g();
+    let s = 0;
+    e && t && (s = 1 * (e.left - t.left + t.scrollLeft));
     const n = {
       root: {
-        left: o,
+        left: s,
         width: e ? e.width : 0
       }
     };
-    if (d && r && (n.content = {
+    if (m && r && (n.content = {
       width: r.width
     }), isNaN(c.root.left) || isNaN(c.root.width))
-      h(n);
+      R(n);
     else {
-      const i = Math.abs(c.root.left - n.root.left), W = Math.abs(c.root.width - n.root.width);
-      (i >= 1 || W >= 1) && h(n);
+      const a = Math.abs(c.root.left - n.root.left), L = Math.abs(c.root.width - n.root.width);
+      (a >= 1 || L >= 1) && R(n);
     }
-  }), R = (t, { animation: e = !0 } = {}) => {
-    l.current && (e ? j(l.current, "scrollLeft", t, {
+  }), v = (t, { animation: e = !0 } = {}) => {
+    l.current && (e ? Q(l.current, "scrollLeft", t, {
       duration: 300
     }) : l.current.scrollLeft = t);
-  }, g = S((t) => {
-    const { tabsMeta: e, tabMeta: r } = p();
+  }, b = _(() => {
+    const t = l.current, e = t ? t.scrollWidth - t.clientWidth : 0, r = t && w ? { start: t.scrollLeft > 1, end: t.scrollLeft < e - 1 } : { start: !1, end: !1 };
+    q((s) => s.start === r.start && s.end === r.end ? s : r);
+  }), N = (t) => {
+    const e = l.current;
+    e && v(e.scrollLeft + t * e.clientWidth * U);
+  }, C = _((t) => {
+    const { tabsMeta: e, tabMeta: r } = g();
     if (!(!r || !e)) {
       if (r.left < e.left) {
-        const o = e.scrollLeft + (r.left - e.left);
-        R(o - w, { animation: t });
+        const s = e.scrollLeft + (r.left - e.left);
+        v(s - S, { animation: t });
       } else if (r.right > e.right) {
-        const o = e.scrollLeft + (r.right - e.right);
-        R(o + w, { animation: t });
+        const s = e.scrollLeft + (r.right - e.right);
+        v(s + S, { animation: t });
       }
     }
   });
-  s.useEffect(() => {
-    I(!0);
-  }, []), s.useEffect(() => {
-    m();
-  }), s.useEffect(() => {
-    var o, n;
-    const t = D(() => {
-      l.current && m();
+  o.useEffect(() => {
+    G(!0);
+  }, []), o.useEffect(() => {
+    p();
+  }), o.useEffect(() => {
+    var n, a;
+    const t = J(() => {
+      l.current && (p(), b());
     }, 166);
     if (!l.current || !l.current.ownerDocument.defaultView) {
       console.error("tabsRef.current.ownerDocument.defaultView is undefined");
@@ -92,45 +103,88 @@ const L = {
     }
     const e = l.current.ownerDocument.defaultView;
     e.addEventListener("resize", t);
-    let r;
-    return typeof ResizeObserver != "undefined" && (r = new ResizeObserver(t), Array.from((n = (o = a.current) == null ? void 0 : o.children) != null ? n : []).forEach((i) => {
-      r.observe(i);
-    })), () => {
-      t.cancel(), e.removeEventListener("resize", t), r && r.disconnect();
+    const r = l.current;
+    r.addEventListener("scroll", b, { passive: !0 });
+    let s;
+    return typeof ResizeObserver != "undefined" && (s = new ResizeObserver(t), s.observe(r), Array.from((a = (n = d.current) == null ? void 0 : n.children) != null ? a : []).forEach((L) => {
+      s.observe(L);
+    })), b(), () => {
+      t.cancel(), e.removeEventListener("resize", t), r.removeEventListener("scroll", b), s && s.disconnect();
     };
-  }, [m]), s.useEffect(() => {
-    g(L !== c);
-  }, [g, c]);
-  const V = s.Children.map(
-    _,
-    (t, e) => s.cloneElement(t, {
-      isActive: f === e,
+  }, [p, b]), o.useEffect(() => {
+    C(x !== c);
+  }, [C, c]);
+  const H = o.Children.map(
+    W,
+    (t, e) => o.cloneElement(t, {
+      isActive: u === e,
       onClick: (r) => {
-        E(r, e);
+        k(r, e);
       },
-      ...d && {
+      ...m && {
         contentRef: (r) => {
-          const { contentRef: o } = t.props;
-          b.current.push(r), o && O(o, r);
+          const { contentRef: s } = t.props;
+          h.current.push(r), s && K(s, r);
         }
       }
     })
-  );
-  return /* @__PURE__ */ u("div", { className: v("smwb-tabs", C), role: "tabpanel", ref: N, ...T, children: /* @__PURE__ */ B(
+  ), E = w && O && (f.start || f.end);
+  return /* @__PURE__ */ M(
     "div",
     {
-      className: v("smwb-tabs__scroller", {
-        "smwb-tabs__scroller--scrollable": y
-      }),
-      ref: l,
+      className: y(
+        "smwb-tabs",
+        {
+          "smwb-tabs--dense": A,
+          "smwb-tabs--overflow-start": f.start,
+          "smwb-tabs--overflow-end": f.end
+        },
+        T
+      ),
+      role: "tabpanel",
+      ref: I,
+      ...j,
       children: [
-        /* @__PURE__ */ u("div", { className: "smwb-tabs__scroll-area", ref: a, role: "tablist", "aria-label": z, children: V }),
-        x && /* @__PURE__ */ u("span", { className: "smwb-tabs__indicator", style: c.root, children: /* @__PURE__ */ u("span", { className: "smwb-tabs__indicator-content", style: c.content }) })
+        E && /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            className: "smwb-tabs__scroll-button smwb-tabs__scroll-button--start",
+            "aria-label": V,
+            disabled: !f.start,
+            onClick: () => N(-1),
+            children: /* @__PURE__ */ i(z, { name: "chevron_left", size: 20 })
+          }
+        ),
+        /* @__PURE__ */ M(
+          "div",
+          {
+            className: y("smwb-tabs__scroller", {
+              "smwb-tabs__scroller--scrollable": w
+            }),
+            ref: l,
+            children: [
+              /* @__PURE__ */ i("div", { className: "smwb-tabs__scroll-area", ref: d, role: "tablist", "aria-label": P, children: H }),
+              F && /* @__PURE__ */ i("span", { className: "smwb-tabs__indicator", style: c.root, children: /* @__PURE__ */ i("span", { className: "smwb-tabs__indicator-content", style: c.content }) })
+            ]
+          }
+        ),
+        E && /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            className: "smwb-tabs__scroll-button smwb-tabs__scroll-button--end",
+            "aria-label": D,
+            disabled: !f.end,
+            onClick: () => N(1),
+            children: /* @__PURE__ */ i(z, { name: "chevron_right", size: 20 })
+          }
+        )
       ]
     }
-  ) });
+  );
 });
 export {
-  K as Tabs
+  ot as Tabs
 };
 //# sourceMappingURL=tabs.js.map

package/dist/headless/components/navigation/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { Tab, TabProps } from \"./tab/tab\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\nimport { setRef } from \"../../../utils/setRef\";\nimport { animate } from \"../../../utils/animate\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;\n  indicatorContent?: boolean;\n  scrollable?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n  /** Accessible label for the tab list. */\n  \"aria-label\"?: string;\n}\n\ninterface IndicatorStyle {\n  root: {\n    left: number;\n    width: number;\n  };\n  content?: {\n    width: number;\n  };\n}\n\nconst defaultIndicatorStyle = {\n  root: {},\n  content: {},\n} as IndicatorStyle;\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(props, ref) {\n  const {\n    className,\n    children,\n    onChange,\n    value,\n    indicatorContent = false,\n    scrollable = false,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const [mounted, setMounted] = React.useState(false);\n  const [indicatorStyle, setIndicatorStyle] = React.useState<IndicatorStyle>(defaultIndicatorStyle);\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n  const tabListRef = React.useRef<HTMLDivElement>(null);\n  const contentTabsRef = React.useRef<HTMLSpanElement[]>([]);\n\n  // Видимость следующего таба в пикселях\n  const viewNextTabInPixels = 40;\n\n  const getTabsMeta = () => {\n    const tabsNode = tabsRef.current;\n\n    let tabsMeta;\n\n    if (tabsNode) {\n      const rect = tabsNode.getBoundingClientRect();\n\n      tabsMeta = {\n        clientWidth: tabsNode.clientWidth,\n        scrollLeft: tabsNode.scrollLeft,\n        scrollTop: tabsNode.scrollTop,\n        scrollWidth: tabsNode.scrollWidth,\n        top: rect.top,\n        bottom: rect.bottom,\n        left: rect.left,\n        right: rect.right,\n      };\n    }\n\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n\n    if (!tabListRef.current) {\n      console.error(\"tabListRef.current is undefined\");\n    }\n    if (tabsNode && tabListRef.current) {\n      const children = tabListRef.current.children;\n\n      if (children.length > 0) {\n        const tab = children[value];\n\n        tabMeta = tab ? tab.getBoundingClientRect() : null;\n\n        if (indicatorContent) {\n          tabContentMeta = contentTabsRef.current[value] ? contentTabsRef.current[value].getBoundingClientRect() : null;\n        }\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = useEventCallback(() => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n\n    if (tabMeta && tabsMeta) {\n      startValue = 1 * (tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft);\n    }\n\n    const newIndicatorStyle: IndicatorStyle = {\n      root: {\n        left: startValue,\n        width: tabMeta ? tabMeta.width : 0,\n      },\n    };\n\n    if (indicatorContent && tabContentMeta) {\n      newIndicatorStyle.content = {\n        width: tabContentMeta.width,\n      };\n    }\n\n    if (isNaN(indicatorStyle.root.left) || isNaN(indicatorStyle.root.width)) {\n      setIndicatorStyle(newIndicatorStyle);\n    } else {\n      const dStart = Math.abs(indicatorStyle.root.left - newIndicatorStyle.root.left);\n      const dSize = Math.abs(indicatorStyle.root.width - newIndicatorStyle.root.width);\n\n      if (dStart >= 1 || dSize >= 1) {\n        setIndicatorStyle(newIndicatorStyle);\n      }\n    }\n  });\n\n  const scroll = (scrollValue: number, { animation = true } = {}) => {\n    if (!tabsRef.current) {\n      return;\n    }\n    if (animation) {\n      animate(tabsRef.current, \"scrollLeft\", scrollValue, {\n        duration: 300,\n      });\n    } else {\n      tabsRef.current.scrollLeft = scrollValue;\n    }\n  };\n\n  const scrollSelectedIntoView = useEventCallback((animation: boolean) => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n\n    if (!tabMeta || !tabsMeta) {\n      return;\n    }\n\n    if (tabMeta.left < tabsMeta.left) {\n      // Левая сторона таба не видна.\n      const nextScrollStart = tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left);\n      scroll(nextScrollStart - viewNextTabInPixels, { animation });\n    } else if (tabMeta.right > tabsMeta.right) {\n      // Правая сторона таба не видна.\n      const nextScrollStart = tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right);\n      scroll(nextScrollStart + viewNextTabInPixels, { animation });\n    }\n  });\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  React.useEffect(() => {\n    updateIndicatorState();\n  });\n\n  React.useEffect(() => {\n    const onResize = debounce(() => {\n      if (tabsRef.current) {\n        updateIndicatorState();\n      }\n    }, 166);\n    if (!tabsRef.current || !tabsRef.current.ownerDocument.defaultView) {\n      console.error(`tabsRef.current.ownerDocument.defaultView is undefined`);\n      return;\n    }\n    const window: Window & typeof globalThis = tabsRef.current.ownerDocument.defaultView;\n\n    window.addEventListener(\"resize\", onResize);\n\n    let resizeObserver: ResizeObserver;\n\n    if (typeof ResizeObserver !== \"undefined\") {\n      resizeObserver = new ResizeObserver(onResize);\n\n      Array.from(tabListRef.current?.children ?? []).forEach((child) => {\n        resizeObserver.observe(child);\n      });\n    }\n\n    return () => {\n      onResize.cancel();\n\n      window.removeEventListener(\"resize\", onResize);\n\n      if (resizeObserver) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [updateIndicatorState]);\n\n  React.useEffect(() => {\n    // Не анимировать при первом рендере\n    scrollSelectedIntoView(defaultIndicatorStyle !== indicatorStyle);\n  }, [scrollSelectedIntoView, indicatorStyle]);\n\n  const tabs = React.Children.map(\n    children as React.ReactElement<TabProps>[],\n    (child: React.ReactElement<TabProps>, index) =>\n      React.cloneElement(child, {\n        isActive: value === index,\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          onChange(event, index);\n        },\n        ...(indicatorContent && {\n          contentRef: (ref: HTMLSpanElement) => {\n            const { contentRef } = child.props;\n\n            contentTabsRef.current.push(ref);\n\n            if (contentRef) {\n              setRef(contentRef as React.Ref<unknown>, ref);\n            }\n          },\n        }),\n      } as TabProps)\n  );\n\n  return (\n    <div className={cn(\"smwb-tabs\", className)} role={\"tabpanel\"} ref={ref} {...rest}>\n      <div\n        className={cn(\"smwb-tabs__scroller\", {\n          \"smwb-tabs__scroller--scrollable\": scrollable,\n        })}\n        ref={tabsRef}\n      >\n        <div className=\"smwb-tabs__scroll-area\" ref={tabListRef} role=\"tablist\" aria-label={ariaLabel}>\n          {tabs}\n        </div>\n        {mounted && (\n          <span className=\"smwb-tabs__indicator\" style={indicatorStyle.root}>\n            <span className=\"smwb-tabs__indicator-content\" style={indicatorStyle.content} />\n          </span>\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport { Tab };\nexport type { TabProps };\n"],"names":["defaultIndicatorStyle","Tabs","React","props","ref","className","children","onChange","value","indicatorContent","scrollable","ariaLabel","rest","mounted","setMounted","indicatorStyle","setIndicatorStyle","tabsRef","tabListRef","contentTabsRef","viewNextTabInPixels","getTabsMeta","tabsNode","tabsMeta","rect","tabMeta","tabContentMeta","tab","updateIndicatorState","useEventCallback","startValue","newIndicatorStyle","dStart","dSize","scroll","scrollValue","animation","animate","scrollSelectedIntoView","nextScrollStart","onResize","debounce","window","resizeObserver","_b","_a","child","tabs","index","event","contentRef","setRef","jsx","cn","jsxs"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { Tab, TabProps } from \"./tab/tab\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\nimport { setRef } from \"../../../utils/setRef\";\nimport { animate } from \"../../../utils/animate\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;\n  indicatorContent?: boolean;\n  /**\n   * Let the tab row scroll sideways instead of clipping it. The edge beyond which\n   * more tabs are hidden fades out.\n   */\n  scrollable?: boolean;\n  /** With `scrollable`: buttons at both ends that scroll the row while it overflows. */\n  scrollButtons?: boolean;\n  /** Compact tabs: labels as written (no capitals, no letter spacing) and less padding. */\n  dense?: boolean;\n  /** Accessible label of the button that scrolls back. */\n  scrollBackAriaLabel?: string;\n  /** Accessible label of the button that scrolls forward. */\n  scrollForwardAriaLabel?: string;\n  className?: string;\n  children?: React.ReactNode;\n  /** Accessible label for the tab list. */\n  \"aria-label\"?: string;\n}\n\ninterface IndicatorStyle {\n  root: {\n    left: number;\n    width: number;\n  };\n  content?: {\n    width: number;\n  };\n}\n\nconst defaultIndicatorStyle = {\n  root: {},\n  content: {},\n} as IndicatorStyle;\n\n/** A scroll button moves the row by this share of its visible width. */\nconst SCROLL_PAGE = 0.8;\n\ninterface Overflow {\n  start: boolean;\n  end: boolean;\n}\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(function Tabs(props, ref) {\n  const {\n    className,\n    children,\n    onChange,\n    value,\n    indicatorContent = false,\n    scrollable = false,\n    scrollButtons = false,\n    dense = false,\n    scrollBackAriaLabel = \"Scroll tabs back\",\n    scrollForwardAriaLabel = \"Scroll tabs forward\",\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const [mounted, setMounted] = React.useState(false);\n  const [indicatorStyle, setIndicatorStyle] = React.useState<IndicatorStyle>(defaultIndicatorStyle);\n  // Whether tabs are hidden past the start / the end of a scrollable row. Only\n  // measured in the browser, so the server markup shows neither.\n  const [overflow, setOverflow] = React.useState<Overflow>({ start: false, end: false });\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n  const tabListRef = React.useRef<HTMLDivElement>(null);\n  const contentTabsRef = React.useRef<HTMLSpanElement[]>([]);\n\n  // Видимость следующего таба в пикселях\n  const viewNextTabInPixels = 40;\n\n  const getTabsMeta = () => {\n    const tabsNode = tabsRef.current;\n\n    let tabsMeta;\n\n    if (tabsNode) {\n      const rect = tabsNode.getBoundingClientRect();\n\n      tabsMeta = {\n        clientWidth: tabsNode.clientWidth,\n        scrollLeft: tabsNode.scrollLeft,\n        scrollTop: tabsNode.scrollTop,\n        scrollWidth: tabsNode.scrollWidth,\n        top: rect.top,\n        bottom: rect.bottom,\n        left: rect.left,\n        right: rect.right,\n      };\n    }\n\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n\n    if (!tabListRef.current) {\n      console.error(\"tabListRef.current is undefined\");\n    }\n    if (tabsNode && tabListRef.current) {\n      const children = tabListRef.current.children;\n\n      if (children.length > 0) {\n        const tab = children[value];\n\n        tabMeta = tab ? tab.getBoundingClientRect() : null;\n\n        if (indicatorContent) {\n          tabContentMeta = contentTabsRef.current[value] ? contentTabsRef.current[value].getBoundingClientRect() : null;\n        }\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = useEventCallback(() => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n\n    if (tabMeta && tabsMeta) {\n      startValue = 1 * (tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft);\n    }\n\n    const newIndicatorStyle: IndicatorStyle = {\n      root: {\n        left: startValue,\n        width: tabMeta ? tabMeta.width : 0,\n      },\n    };\n\n    if (indicatorContent && tabContentMeta) {\n      newIndicatorStyle.content = {\n        width: tabContentMeta.width,\n      };\n    }\n\n    if (isNaN(indicatorStyle.root.left) || isNaN(indicatorStyle.root.width)) {\n      setIndicatorStyle(newIndicatorStyle);\n    } else {\n      const dStart = Math.abs(indicatorStyle.root.left - newIndicatorStyle.root.left);\n      const dSize = Math.abs(indicatorStyle.root.width - newIndicatorStyle.root.width);\n\n      if (dStart >= 1 || dSize >= 1) {\n        setIndicatorStyle(newIndicatorStyle);\n      }\n    }\n  });\n\n  const scroll = (scrollValue: number, { animation = true } = {}) => {\n    if (!tabsRef.current) {\n      return;\n    }\n    if (animation) {\n      animate(tabsRef.current, \"scrollLeft\", scrollValue, {\n        duration: 300,\n      });\n    } else {\n      tabsRef.current.scrollLeft = scrollValue;\n    }\n  };\n\n  const updateOverflow = useEventCallback(() => {\n    const node = tabsRef.current;\n    const max = node ? node.scrollWidth - node.clientWidth : 0;\n    const next: Overflow =\n      node && scrollable\n        ? { start: node.scrollLeft > 1, end: node.scrollLeft < max - 1 }\n        : { start: false, end: false };\n    setOverflow((prev) => (prev.start === next.start && prev.end === next.end ? prev : next));\n  });\n\n  const scrollByPage = (direction: -1 | 1) => {\n    const node = tabsRef.current;\n    if (node) {\n      scroll(node.scrollLeft + direction * node.clientWidth * SCROLL_PAGE);\n    }\n  };\n\n  const scrollSelectedIntoView = useEventCallback((animation: boolean) => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n\n    if (!tabMeta || !tabsMeta) {\n      return;\n    }\n\n    if (tabMeta.left < tabsMeta.left) {\n      // Левая сторона таба не видна.\n      const nextScrollStart = tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left);\n      scroll(nextScrollStart - viewNextTabInPixels, { animation });\n    } else if (tabMeta.right > tabsMeta.right) {\n      // Правая сторона таба не видна.\n      const nextScrollStart = tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right);\n      scroll(nextScrollStart + viewNextTabInPixels, { animation });\n    }\n  });\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  React.useEffect(() => {\n    updateIndicatorState();\n  });\n\n  React.useEffect(() => {\n    const onResize = debounce(() => {\n      if (tabsRef.current) {\n        updateIndicatorState();\n        updateOverflow();\n      }\n    }, 166);\n    if (!tabsRef.current || !tabsRef.current.ownerDocument.defaultView) {\n      console.error(`tabsRef.current.ownerDocument.defaultView is undefined`);\n      return;\n    }\n    const window: Window & typeof globalThis = tabsRef.current.ownerDocument.defaultView;\n\n    window.addEventListener(\"resize\", onResize);\n    const scroller = tabsRef.current;\n    scroller.addEventListener(\"scroll\", updateOverflow, { passive: true });\n\n    let resizeObserver: ResizeObserver;\n\n    // The row and each tab: a label can grow with its data while the row keeps\n    // its width.\n    if (typeof ResizeObserver !== \"undefined\") {\n      resizeObserver = new ResizeObserver(onResize);\n      resizeObserver.observe(scroller);\n\n      Array.from(tabListRef.current?.children ?? []).forEach((child) => {\n        resizeObserver.observe(child);\n      });\n    }\n    updateOverflow();\n\n    return () => {\n      onResize.cancel();\n\n      window.removeEventListener(\"resize\", onResize);\n      scroller.removeEventListener(\"scroll\", updateOverflow);\n\n      if (resizeObserver) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [updateIndicatorState, updateOverflow]);\n\n  React.useEffect(() => {\n    // Не анимировать при первом рендере\n    scrollSelectedIntoView(defaultIndicatorStyle !== indicatorStyle);\n  }, [scrollSelectedIntoView, indicatorStyle]);\n\n  const tabs = React.Children.map(\n    children as React.ReactElement<TabProps>[],\n    (child: React.ReactElement<TabProps>, index) =>\n      React.cloneElement(child, {\n        isActive: value === index,\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          onChange(event, index);\n        },\n        ...(indicatorContent && {\n          contentRef: (ref: HTMLSpanElement) => {\n            const { contentRef } = child.props;\n\n            contentTabsRef.current.push(ref);\n\n            if (contentRef) {\n              setRef(contentRef as React.Ref<unknown>, ref);\n            }\n          },\n        }),\n      } as TabProps)\n  );\n\n  const showScrollButtons = scrollable && scrollButtons && (overflow.start || overflow.end);\n\n  return (\n    <div\n      className={cn(\n        \"smwb-tabs\",\n        {\n          \"smwb-tabs--dense\": dense,\n          \"smwb-tabs--overflow-start\": overflow.start,\n          \"smwb-tabs--overflow-end\": overflow.end,\n        },\n        className\n      )}\n      role={\"tabpanel\"}\n      ref={ref}\n      {...rest}\n    >\n      {showScrollButtons && (\n        <button\n          type=\"button\"\n          className=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--start\"\n          aria-label={scrollBackAriaLabel}\n          disabled={!overflow.start}\n          onClick={() => scrollByPage(-1)}\n        >\n          <Icon name=\"chevron_left\" size={20} />\n        </button>\n      )}\n      <div\n        className={cn(\"smwb-tabs__scroller\", {\n          \"smwb-tabs__scroller--scrollable\": scrollable,\n        })}\n        ref={tabsRef}\n      >\n        <div className=\"smwb-tabs__scroll-area\" ref={tabListRef} role=\"tablist\" aria-label={ariaLabel}>\n          {tabs}\n        </div>\n        {mounted && (\n          <span className=\"smwb-tabs__indicator\" style={indicatorStyle.root}>\n            <span className=\"smwb-tabs__indicator-content\" style={indicatorStyle.content} />\n          </span>\n        )}\n      </div>\n      {showScrollButtons && (\n        <button\n          type=\"button\"\n          className=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--end\"\n          aria-label={scrollForwardAriaLabel}\n          disabled={!overflow.end}\n          onClick={() => scrollByPage(1)}\n        >\n          <Icon name=\"chevron_right\" size={20} />\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport { Tab };\nexport type { TabProps };\n"],"names":["defaultIndicatorStyle","SCROLL_PAGE","Tabs","React","props","ref","className","children","onChange","value","indicatorContent","scrollable","scrollButtons","dense","scrollBackAriaLabel","scrollForwardAriaLabel","ariaLabel","rest","mounted","setMounted","indicatorStyle","setIndicatorStyle","overflow","setOverflow","tabsRef","tabListRef","contentTabsRef","viewNextTabInPixels","getTabsMeta","tabsNode","tabsMeta","rect","tabMeta","tabContentMeta","tab","updateIndicatorState","useEventCallback","startValue","newIndicatorStyle","dStart","dSize","scroll","scrollValue","animation","animate","updateOverflow","node","max","next","prev","scrollByPage","direction","scrollSelectedIntoView","nextScrollStart","onResize","debounce","window","scroller","resizeObserver","_b","_a","child","tabs","index","event","contentRef","setRef","showScrollButtons","jsxs","cn","jsx","Icon"],"mappings":"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"}

package/dist/headless/hooks/useSafeLayoutEffect.js

@@ -1,6 +1,8 @@
 import e from "react";
-const t = typeof window == "undefined" ? e.useEffect : e.useLayoutEffect;
+function u(f, t) {
+  (typeof window == "undefined" ? e.useEffect : e.useLayoutEffect)(f, t);
+}
 export {
-  t as useSafeLayoutEffect
+  u as useSafeLayoutEffect
 };
 //# sourceMappingURL=useSafeLayoutEffect.js.map

package/dist/headless/hooks/useSafeLayoutEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSafeLayoutEffect.js","sources":["../../../src/hooks/useSafeLayoutEffect.ts"],"sourcesContent":["import React from \"react\";\n\nexport const useSafeLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n"],"names":["useSafeLayoutEffect","React"],"mappings":";AAEO,MAAMA,IAAsB,OAAO,UAAW,cAAcC,EAAM,YAAYA,EAAM;"}
+{"version":3,"file":"useSafeLayoutEffect.js","sources":["../../../src/hooks/useSafeLayoutEffect.ts"],"sourcesContent":["import React from \"react\";\n\n/**\n * `useLayoutEffect` in the browser, `useEffect` where there is no `window` (a\n * server render), so React does not warn that a layout effect does nothing on\n * the server. Decided per call rather than once at import: the environment of\n * the render is what counts, and a render never switches between the two.\n */\nexport function useSafeLayoutEffect(effect: React.EffectCallback, deps?: React.DependencyList): void {\n  (typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect)(effect, deps);\n}\n"],"names":["useSafeLayoutEffect","effect","deps","React"],"mappings":";AAQO,SAASA,EAAoBC,GAA8BC,GAAmC;AACnG,GAAC,OAAO,UAAW,cAAcC,EAAM,YAAYA,EAAM,iBAAiBF,GAAQC,CAAI;AACxF;"}

package/dist/headless/icons/catalog.js

@@ -58,6 +58,13 @@ const e = [
     aliases: ["user_circle"],
     keywords: ["account", "user", "profile", "avatar", "person"]
   },
+  {
+    name: "account_tree",
+    export: "accountTree",
+    category: "data",
+    aliases: ["hierarchy", "org_chart"],
+    keywords: ["tree", "hierarchy", "structure", "org chart", "nested", "parent", "child"]
+  },
   {
     name: "add",
     export: "add",
@@ -324,6 +331,13 @@ const e = [
     aliases: ["hang_up"],
     keywords: ["call", "end", "hangup", "decline", "phone"]
   },
+  {
+    name: "call_split",
+    export: "callSplit",
+    category: "navigation",
+    aliases: ["split"],
+    keywords: ["split", "branch", "fork", "diverge", "divide"]
+  },
   {
     name: "campaign",
     export: "campaign",
@@ -534,6 +548,13 @@ const e = [
     aliases: [],
     keywords: ["document", "file", "text", "page", "description"]
   },
+  {
+    name: "device_hub",
+    export: "deviceHub",
+    category: "device",
+    aliases: [],
+    keywords: ["hub", "device", "network", "connection", "nodes", "usb"]
+  },
   {
     name: "diversity_3",
     export: "diversity3",
@@ -604,6 +625,13 @@ const e = [
     aliases: ["pencil"],
     keywords: ["edit", "pencil", "write", "modify", "compose"]
   },
+  {
+    name: "edit_note",
+    export: "editNote",
+    category: "editor",
+    aliases: ["note_edit"],
+    keywords: ["edit", "note", "notes", "write", "journal", "record", "pencil"]
+  },
   {
     name: "emoji_events",
     export: "emojiEvents",
@@ -716,6 +744,13 @@ const e = [
     aliases: ["funnel"],
     keywords: ["filter", "funnel", "refine", "narrow", "sift"]
   },
+  {
+    name: "filter_list",
+    export: "filterList",
+    category: "action",
+    aliases: ["filter_lines"],
+    keywords: ["filter", "list", "refine", "narrow", "sort", "lines"]
+  },
   {
     name: "first_page",
     export: "firstPage",
@@ -751,6 +786,13 @@ const e = [
     aliases: [],
     keywords: ["folder", "open", "directory", "browse", "files"]
   },
+  {
+    name: "fork_right",
+    export: "forkRight",
+    category: "navigation",
+    aliases: [],
+    keywords: ["fork", "branch", "right", "diverge", "road", "turn"]
+  },
   {
     name: "format_align_center",
     export: "formatAlignCenter",
@@ -856,6 +898,13 @@ const e = [
     aliases: ["users_plus"],
     keywords: ["group", "users", "team", "add", "invite", "members"]
   },
+  {
+    name: "groups",
+    export: "groups",
+    category: "social",
+    aliases: ["team"],
+    keywords: ["groups", "team", "people", "community", "members", "staff"]
+  },
   {
     name: "headphones",
     export: "headphones",
@@ -898,6 +947,13 @@ const e = [
     aliases: ["hourglass"],
     keywords: ["hourglass", "wait", "loading", "sand", "time"]
   },
+  {
+    name: "hub",
+    export: "hub",
+    category: "data",
+    aliases: [],
+    keywords: ["hub", "network", "center", "connections", "nodes", "graph"]
+  },
   {
     name: "image",
     export: "image",
@@ -982,6 +1038,13 @@ const e = [
     aliases: ["tag"],
     keywords: ["label", "tag", "badge", "category", "marker"]
   },
+  {
+    name: "lan",
+    export: "lan",
+    category: "device",
+    aliases: ["network"],
+    keywords: ["lan", "network", "local", "ethernet", "topology", "connection"]
+  },
   {
     name: "language",
     export: "language",
@@ -1325,6 +1388,13 @@ const e = [
     aliases: ["user_plus"],
     keywords: ["person", "user", "add", "invite", "new", "signup"]
   },
+  {
+    name: "person_off",
+    export: "personOff",
+    category: "social",
+    aliases: ["user_off"],
+    keywords: ["person", "user", "off", "removed", "inactive", "unassigned", "nobody"]
+  },
   {
     name: "pets",
     export: "pets",
@@ -1528,6 +1598,13 @@ const e = [
     aliases: ["clock"],
     keywords: ["clock", "time", "schedule", "hour", "watch"]
   },
+  {
+    name: "schema",
+    export: "schema",
+    category: "data",
+    aliases: ["diagram"],
+    keywords: ["schema", "diagram", "flow", "structure", "model", "blocks"]
+  },
   {
     name: "school",
     export: "school",
@@ -2074,7 +2151,7 @@ const e = [
     aliases: ["search_minus"],
     keywords: ["zoom", "magnify", "shrink", "scale", "search"]
   }
-], o = 294;
+], o = 305;
 export {
   a as iconCatalog,
   e as iconCategories,