@smwb/ui-react 2.7.0 → 2.8.0

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

@@ -1,55 +1,57 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import '../../../../assets/styles/less/components/tabs/tab/tab.entry.css';import '../../../../assets/styles/less/tokens.entry.css';/* empty css                                        */
 /* empty css                                                         */
-import d from "react";
-import v from "clsx";
-import { Ripple as T } from "../../../base/ripple/ripple.js";
-const q = d.forwardRef(function(p, f) {
+import f from "react";
+import j from "clsx";
+import { Ripple as k } from "../../../base/ripple/ripple.js";
+const y = f.forwardRef(function(w, u) {
   const {
-    className: w,
-    label: c,
-    isActive: s = !1,
-    contentRef: u,
-    icon: i,
-    stacked: R = !1,
-    tag: e,
-    disabled: a,
-    onMouseDown: t,
-    ..._
-  } = p, l = d.useRef(null), h = (n) => {
-    t == null || t(n);
-  }, x = (n) => {
-    var b;
-    (b = l.current) == null || b.onRipple(n);
-  }, r = e != null ? e : e || "button", N = v("smwb-tab", w, {
-    "smwb-tab--active": s,
-    "smwb-tab--stacked": R,
-    "smwb-tab--disabled": a
+    className: R,
+    label: i,
+    isActive: e = !1,
+    contentRef: _,
+    icon: l,
+    stacked: h = !1,
+    tag: s,
+    disabled: t,
+    onMouseDown: n,
+    // The tab sets this on its root too; its own handler calls the caller's first.
+    onPointerDown: c,
+    ...b
+  } = w, r = f.useRef(null), x = (a) => {
+    n == null || n(a);
+  }, N = (a) => {
+    var m;
+    c == null || c(a), (m = r.current) == null || m.onRipple(a);
+  }, d = s != null ? s : s || "button", T = j("smwb-tab", R, {
+    "smwb-tab--active": e,
+    "smwb-tab--stacked": h,
+    "smwb-tab--disabled": t
   });
-  return /* @__PURE__ */ m(
-    r,
+  return /* @__PURE__ */ p(
+    d,
     {
-      ref: f,
-      className: N,
-      onMouseDown: h,
-      onPointerDown: x,
+      ...b,
+      ref: u,
+      className: T,
+      onMouseDown: x,
+      onPointerDown: N,
       role: "tab",
-      "aria-selected": s,
-      "aria-disabled": a || void 0,
-      tabIndex: s ? 0 : -1,
-      disabled: r === "button" ? a : void 0,
-      ..._,
+      "aria-selected": e,
+      "aria-disabled": t || b["aria-disabled"],
+      tabIndex: e ? 0 : -1,
+      disabled: d === "button" ? t : void 0,
       children: [
-        /* @__PURE__ */ m("span", { className: "smwb-tab__content", ref: u, children: [
-          i && /* @__PURE__ */ o("span", { className: "smwb-tab__icon", children: i }),
-          c && /* @__PURE__ */ o("span", { className: "smwb-tab__text-label", children: c })
+        /* @__PURE__ */ p("span", { className: "smwb-tab__content", ref: _, children: [
+          l && /* @__PURE__ */ o("span", { className: "smwb-tab__icon", children: l }),
+          i && /* @__PURE__ */ o("span", { className: "smwb-tab__text-label", children: i })
         ] }),
-        /* @__PURE__ */ o(T, { actionRef: l, classes: { child: "tab__ripple-child" } })
+        /* @__PURE__ */ o(k, { actionRef: r, classes: { child: "tab__ripple-child" } })
       ]
     }
   );
 });
 export {
-  q as Tab
+  y as Tab
 };
 //# sourceMappingURL=tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../../base/ripple/ripple\";\n\nexport interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: string | React.ReactNode;\n  isActive?: boolean;\n  contentRef?: React.Ref<unknown>;\n  icon?: React.ReactNode;\n  stacked?: boolean;\n  tag?: React.ElementType;\n  /** With `tag=\"a\"`: where the link goes, so the tab stays a real link. */\n  href?: string;\n  disabled?: boolean;\n}\n\nexport const Tab = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, TabProps>(function Tab(props, ref) {\n  const {\n    className,\n    label,\n    isActive = false,\n    contentRef,\n    icon,\n    stacked = false,\n    tag,\n    disabled,\n    onMouseDown: onMouseDownProp,\n    ...rest\n  } = props;\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const Tag = tag ?? (tag || \"button\");\n  const classes = cn(\"smwb-tab\", className, {\n    \"smwb-tab--active\": isActive,\n    \"smwb-tab--stacked\": stacked,\n    \"smwb-tab--disabled\": disabled,\n  });\n\n  return (\n    <Tag\n      ref={ref}\n      className={classes}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      role={\"tab\"}\n      aria-selected={isActive}\n      aria-disabled={disabled || undefined}\n      tabIndex={isActive ? 0 : -1}\n      disabled={Tag === \"button\" ? disabled : undefined}\n      {...rest}\n    >\n      <span className=\"smwb-tab__content\" ref={contentRef as React.Ref<HTMLSpanElement>}>\n        {icon && <span className=\"smwb-tab__icon\">{icon}</span>}\n        {label && <span className=\"smwb-tab__text-label\">{label}</span>}\n      </span>\n      <Ripple actionRef={rippleRef} classes={{ child: \"tab__ripple-child\" }} />\n    </Tag>\n  );\n});\n"],"names":["Tab","React","props","ref","className","label","isActive","contentRef","icon","stacked","tag","disabled","onMouseDownProp","rest","rippleRef","onMouseDown","event","onPointerDown","_a","Tag","classes","cn","jsxs","jsx","Ripple"],"mappings":";;;;;;AAkBO,MAAMA,IAAMC,EAAM,WAA4D,SAAaC,GAAOC,GAAK;AAC5G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAaC;AAAA,IACb,GAAGC;AAAA,EAAA,IACDX,GACEY,IAAYb,EAAM,OAAyB,IAAI,GAE/Cc,IAAc,CAACC,MAAmE;AACtF,IAAAJ,KAAA,QAAAA,EAAkBI;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,KAAAE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B,GAEMG,IAAMT,KAAA,OAAAA,IAAQA,KAAO,UACrBU,IAAUC,EAAG,YAAYjB,GAAW;AAAA,IACxC,oBAAoBE;AAAA,IACpB,qBAAqBG;AAAA,IACrB,sBAAsBE;AAAA,EAAA,CACvB;AAED,SACE,gBAAAW;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAhB;AAAA,MACA,WAAWiB;AAAA,MACX,aAAAL;AAAA,MACA,eAAAE;AAAA,MACA,MAAM;AAAA,MACN,iBAAeX;AAAA,MACf,iBAAeK,KAAY;AAAA,MAC3B,UAAUL,IAAW,IAAI;AAAA,MACzB,UAAUa,MAAQ,WAAWR,IAAW;AAAA,MACvC,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKf,GACtC,UAAA;AAAA,UAAAC,KAAQ,gBAAAe,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAf,GAAK;AAAA,UAC/CH,KAAS,gBAAAkB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAlB,EAAA,CAAM;AAAA,QAAA,GAC1D;AAAA,QACA,gBAAAkB,EAACC,KAAO,WAAWV,GAAW,SAAS,EAAE,OAAO,sBAAoB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7E,CAAC;"}
+{"version":3,"file":"tab.js","sources":["../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../../base/ripple/ripple\";\n\nexport interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: string | React.ReactNode;\n  isActive?: boolean;\n  contentRef?: React.Ref<unknown>;\n  icon?: React.ReactNode;\n  stacked?: boolean;\n  tag?: React.ElementType;\n  /** With `tag=\"a\"`: where the link goes, so the tab stays a real link. */\n  href?: string;\n  disabled?: boolean;\n}\n\nexport const Tab = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, TabProps>(function Tab(props, ref) {\n  const {\n    className,\n    label,\n    isActive = false,\n    contentRef,\n    icon,\n    stacked = false,\n    tag,\n    disabled,\n    onMouseDown: onMouseDownProp,\n    // The tab sets this on its root too; its own handler calls the caller's first.\n    onPointerDown: onPointerDownProp,\n    ...rest\n  } = props;\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onPointerDownProp?.(event);\n    rippleRef.current?.onRipple(event);\n  };\n\n  const Tag = tag ?? (tag || \"button\");\n  const classes = cn(\"smwb-tab\", className, {\n    \"smwb-tab--active\": isActive,\n    \"smwb-tab--stacked\": stacked,\n    \"smwb-tab--disabled\": disabled,\n  });\n\n  return (\n    <Tag\n      {...rest}\n      ref={ref}\n      className={classes}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      // The role, the selection and the roving tabIndex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\n      role={\"tab\"}\n      aria-selected={isActive}\n      aria-disabled={disabled || rest[\"aria-disabled\"]}\n      tabIndex={isActive ? 0 : -1}\n      disabled={Tag === \"button\" ? disabled : undefined}\n    >\n      <span className=\"smwb-tab__content\" ref={contentRef as React.Ref<HTMLSpanElement>}>\n        {icon && <span className=\"smwb-tab__icon\">{icon}</span>}\n        {label && <span className=\"smwb-tab__text-label\">{label}</span>}\n      </span>\n      <Ripple actionRef={rippleRef} classes={{ child: \"tab__ripple-child\" }} />\n    </Tag>\n  );\n});\n"],"names":["Tab","React","props","ref","className","label","isActive","contentRef","icon","stacked","tag","disabled","onMouseDownProp","onPointerDownProp","rest","rippleRef","onMouseDown","event","onPointerDown","_a","Tag","classes","cn","jsxs","jsx","Ripple"],"mappings":";;;;;;AAkBO,MAAMA,IAAMC,EAAM,WAA4D,SAAaC,GAAOC,GAAK;AAC5G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAaC;AAAA;AAAA,IAEb,eAAeC;AAAA,IACf,GAAGC;AAAA,EAAA,IACDZ,GACEa,IAAYd,EAAM,OAAyB,IAAI,GAE/Ce,IAAc,CAACC,MAAmE;AACtF,IAAAL,KAAA,QAAAA,EAAkBK;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,IAAAJ,KAAA,QAAAA,EAAoBI,KACpBE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B,GAEMG,IAAMV,KAAA,OAAAA,IAAQA,KAAO,UACrBW,IAAUC,EAAG,YAAYlB,GAAW;AAAA,IACxC,oBAAoBE;AAAA,IACpB,qBAAqBG;AAAA,IACrB,sBAAsBE;AAAA,EAAA,CACvB;AAED,SACE,gBAAAY;AAAA,IAACH;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,KAAAX;AAAA,MACA,WAAWkB;AAAA,MACX,aAAAL;AAAA,MACA,eAAAE;AAAA,MAIA,MAAM;AAAA,MACN,iBAAeZ;AAAA,MACf,iBAAeK,KAAYG,EAAK,eAAe;AAAA,MAC/C,UAAUR,IAAW,IAAI;AAAA,MACzB,UAAUc,MAAQ,WAAWT,IAAW;AAAA,MAExC,UAAA;AAAA,QAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKhB,GACtC,UAAA;AAAA,UAAAC,KAAQ,gBAAAgB,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAhB,GAAK;AAAA,UAC/CH,KAAS,gBAAAmB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAnB,EAAA,CAAM;AAAA,QAAA,GAC1D;AAAA,QACA,gBAAAmB,EAACC,KAAO,WAAWV,GAAW,SAAS,EAAE,OAAO,sBAAoB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7E,CAAC;"}

package/dist/components/navigation/tabs/tabs.d.ts

@@ -1,8 +1,14 @@
 import React from "react";
 import { Tab, TabProps } from "./tab/tab";
 export interface TabsProps {
+    /**
+     * Index of the selected tab. Tabs count in the order they render: a tab left out,
+     * such as `{show && <Tab />}` while `show` is false, takes no index.
+     */
     value: number;
+    /** Called with the index of the clicked tab, counted as for `value`. */
     onChange: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;
+    /** Draw the indicator as wide as the selected tab's label rather than the whole tab. */
     indicatorContent?: boolean;
     /**
      * Let the tab row scroll sideways instead of clipping it. The edge beyond which

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

@@ -1,31 +1,30 @@
-import { jsxs as M, jsx as i } from "react/jsx-runtime";
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/tabs/tabs.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
 import n 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 = {
+import E from "clsx";
+import { debounce as H } from "../../../utils/debounce.js";
+import { useEventCallback as p } from "../../../hooks/useEventCallback.js";
+import { animate as J } from "../../../utils/animate.js";
+import { Icon as M } from "../../base/icon/icon.js";
+const z = {
   root: {},
   content: {}
-}, U = 0.8, ct = n.forwardRef(function(B, I) {
+}, K = 0.8, ot = n.forwardRef(function(x, k) {
   const {
-    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] = n.useState(!1), [c, R] = n.useState(x), [f, q] = n.useState({ start: !1, end: !1 }), l = n.useRef(null), d = n.useRef(null), h = n.useRef([]), S = 40, g = () => {
+    className: B,
+    children: I,
+    onChange: W,
+    value: v,
+    indicatorContent: _ = !1,
+    scrollable: m = !1,
+    scrollButtons: A = !1,
+    dense: O = !1,
+    scrollBackAriaLabel: T = "Scroll tabs back",
+    scrollForwardAriaLabel: V = "Scroll tabs forward",
+    "aria-label": D,
+    ...P
+  } = x, [j, q] = n.useState(!1), [a, L] = n.useState(z), [f, F] = n.useState({ start: !1, end: !1 }), l = n.useRef(null), b = n.useRef(null), S = 40, g = () => {
     const t = l.current;
     let e;
     if (t) {
@@ -42,15 +41,18 @@ const x = {
       };
     }
     let r = null, s = null;
-    if (d.current || console.error("tabListRef.current is undefined"), t && d.current) {
-      const o = d.current.children;
+    if (b.current || console.error("tabListRef.current is undefined"), t && b.current) {
+      const o = b.current.children;
       if (o.length > 0) {
-        const a = o[u];
-        r = a ? a.getBoundingClientRect() : null, m && (s = h.current[u] ? h.current[u].getBoundingClientRect() : null);
+        const c = o[v];
+        if (r = c ? c.getBoundingClientRect() : null, _) {
+          const d = c ? c.querySelector(".smwb-tab__content") : null;
+          s = d ? d.getBoundingClientRect() : null;
+        }
       }
     }
     return { tabsMeta: e, tabMeta: r, tabContentMeta: s };
-  }, p = _(() => {
+  }, w = p(() => {
     const { tabsMeta: t, tabMeta: e, tabContentMeta: r } = g();
     let s = 0;
     e && t && (s = 1 * (e.left - t.left + t.scrollLeft));
@@ -60,44 +62,44 @@ const x = {
         width: e ? e.width : 0
       }
     };
-    if (m && r && (o.content = {
+    if (_ && r && (o.content = {
       width: r.width
-    }), isNaN(c.root.left) || isNaN(c.root.width))
-      R(o);
+    }), isNaN(a.root.left) || isNaN(a.root.width))
+      L(o);
     else {
-      const a = Math.abs(c.root.left - o.root.left), L = Math.abs(c.root.width - o.root.width);
-      (a >= 1 || L >= 1) && R(o);
+      const c = Math.abs(a.root.left - o.root.left), d = Math.abs(a.root.width - o.root.width);
+      (c >= 1 || d >= 1) && L(o);
     }
-  }), v = (t, { animation: e = !0 } = {}) => {
-    l.current && (e ? Q(l.current, "scrollLeft", t, {
+  }), h = (t, { animation: e = !0 } = {}) => {
+    l.current && (e ? J(l.current, "scrollLeft", t, {
       duration: 300
     }) : l.current.scrollLeft = t);
-  }, 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) => {
+  }, u = p(() => {
+    const t = l.current, e = t ? t.scrollWidth - t.clientWidth : 0, r = t && m ? { start: t.scrollLeft > 1, end: t.scrollLeft < e - 1 } : { start: !1, end: !1 };
+    F((s) => s.start === r.start && s.end === r.end ? s : r);
+  }), R = (t) => {
     const e = l.current;
-    e && v(e.scrollLeft + t * e.clientWidth * U);
-  }, C = _((t) => {
+    e && h(e.scrollLeft + t * e.clientWidth * K);
+  }, C = p((t) => {
     const { tabsMeta: e, tabMeta: r } = g();
     if (!(!r || !e)) {
       if (r.left < e.left) {
         const s = e.scrollLeft + (r.left - e.left);
-        v(s - S, { animation: t });
+        h(s - S, { animation: t });
       } else if (r.right > e.right) {
         const s = e.scrollLeft + (r.right - e.right);
-        v(s + S, { animation: t });
+        h(s + S, { animation: t });
       }
     }
   });
   n.useEffect(() => {
-    G(!0);
+    q(!0);
   }, []), n.useEffect(() => {
-    p();
+    w();
   }), n.useEffect(() => {
-    var o, a;
-    const t = J(() => {
-      l.current && (p(), b());
+    var o, c;
+    const t = H(() => {
+      l.current && (w(), u());
     }, 166);
     if (!l.current || !l.current.ownerDocument.defaultView) {
       console.error("tabsRef.current.ownerDocument.defaultView is undefined");
@@ -106,80 +108,75 @@ const x = {
     const e = l.current.ownerDocument.defaultView;
     e.addEventListener("resize", t);
     const r = l.current;
-    r.addEventListener("scroll", b, { passive: !0 });
+    r.addEventListener("scroll", u, { passive: !0 });
     let s;
-    return typeof ResizeObserver != "undefined" && (s = new ResizeObserver(t), s.observe(r), Array.from((a = (o = d.current) == null ? void 0 : o.children) != null ? a : []).forEach((L) => {
-      s.observe(L);
-    })), b(), () => {
-      t.cancel(), e.removeEventListener("resize", t), r.removeEventListener("scroll", b), s && s.disconnect();
+    return typeof ResizeObserver != "undefined" && (s = new ResizeObserver(t), s.observe(r), Array.from((c = (o = b.current) == null ? void 0 : o.children) != null ? c : []).forEach((d) => {
+      s.observe(d);
+    })), u(), () => {
+      t.cancel(), e.removeEventListener("resize", t), r.removeEventListener("scroll", u), s && s.disconnect();
     };
-  }, [p, b]), n.useEffect(() => {
-    C(x !== c);
-  }, [C, c]);
-  const H = n.Children.map(
-    W,
+  }, [w, u]), n.useEffect(() => {
+    C(z !== a);
+  }, [C, a]);
+  const G = n.Children.toArray(I).filter((t) => n.isValidElement(t)).map(
     (t, e) => n.cloneElement(t, {
-      isActive: u === e,
+      isActive: v === e,
+      // The tab's own onClick runs first, then the tab list picks the tab.
       onClick: (r) => {
-        k(r, e);
-      },
-      ...m && {
-        contentRef: (r) => {
-          const { contentRef: s } = t.props;
-          h.current.push(r), s && K(s, r);
-        }
+        var s, o;
+        (o = (s = t.props).onClick) == null || o.call(s, r), W(r, e);
       }
     })
-  ), E = w && O && (f.start || f.end);
-  return /* @__PURE__ */ M(
+  ), N = m && A && (f.start || f.end);
+  return /* @__PURE__ */ y(
     "div",
     {
-      className: y(
+      className: E(
         "smwb-tabs",
         {
-          "smwb-tabs--dense": A,
+          "smwb-tabs--dense": O,
           "smwb-tabs--overflow-start": f.start,
           "smwb-tabs--overflow-end": f.end
         },
-        T
+        B
       ),
       role: "tabpanel",
-      ref: I,
-      ...j,
+      ref: k,
+      ...P,
       children: [
-        E && /* @__PURE__ */ i(
+        N && /* @__PURE__ */ i(
           "button",
           {
             type: "button",
             className: "smwb-tabs__scroll-button smwb-tabs__scroll-button--start",
-            "aria-label": V,
+            "aria-label": T,
             disabled: !f.start,
-            onClick: () => N(-1),
-            children: /* @__PURE__ */ i(z, { name: "chevron_left", size: 20 })
+            onClick: () => R(-1),
+            children: /* @__PURE__ */ i(M, { name: "chevron_left", size: 20 })
           }
         ),
-        /* @__PURE__ */ M(
+        /* @__PURE__ */ y(
           "div",
           {
-            className: y("smwb-tabs__scroller", {
-              "smwb-tabs__scroller--scrollable": w
+            className: E("smwb-tabs__scroller", {
+              "smwb-tabs__scroller--scrollable": m
             }),
             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 }) })
+              /* @__PURE__ */ i("div", { className: "smwb-tabs__scroll-area", ref: b, role: "tablist", "aria-label": D, children: G }),
+              j && /* @__PURE__ */ i("span", { className: "smwb-tabs__indicator", style: a.root, children: /* @__PURE__ */ i("span", { className: "smwb-tabs__indicator-content", style: a.content }) })
             ]
           }
         ),
-        E && /* @__PURE__ */ i(
+        N && /* @__PURE__ */ i(
           "button",
           {
             type: "button",
             className: "smwb-tabs__scroll-button smwb-tabs__scroll-button--end",
-            "aria-label": D,
+            "aria-label": V,
             disabled: !f.end,
-            onClick: () => N(1),
-            children: /* @__PURE__ */ i(z, { name: "chevron_right", size: 20 })
+            onClick: () => R(1),
+            children: /* @__PURE__ */ i(M, { name: "chevron_right", size: 20 })
           }
         )
       ]
@@ -187,6 +184,6 @@ const x = {
   );
 });
 export {
-  ct as Tabs
+  ot as Tabs
 };
 //# sourceMappingURL=tabs.js.map

package/dist/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\";\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":";;;;;;;;;;AA4CA,MAAMA,IAAwB;AAAA,EAC5B,MAAM,CAAA;AAAA,EACN,SAAS,CAAA;AACX,GAGMC,IAAc,KAOPC,KAAOC,EAAM,WAAsC,SAAcC,GAAOC,GAAK;AACxF,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,YAAAC,IAAa;AAAA,IACb,eAAAC,IAAgB;AAAA,IAChB,OAAAC,IAAQ;AAAA,IACR,qBAAAC,IAAsB;AAAA,IACtB,wBAAAC,IAAyB;AAAA,IACzB,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,IACDb,GACE,CAACc,GAASC,CAAU,IAAIhB,EAAM,SAAS,EAAK,GAC5C,CAACiB,GAAgBC,CAAiB,IAAIlB,EAAM,SAAyBH,CAAqB,GAG1F,CAACsB,GAAUC,CAAW,IAAIpB,EAAM,SAAmB,EAAE,OAAO,IAAO,KAAK,IAAO,GAE/EqB,IAAUrB,EAAM,OAAuB,IAAI,GAC3CsB,IAAatB,EAAM,OAAuB,IAAI,GAC9CuB,IAAiBvB,EAAM,OAA0B,EAAE,GAGnDwB,IAAsB,IAEtBC,IAAc,MAAM;AACxB,UAAMC,IAAWL,EAAQ;AAEzB,QAAIM;AAEJ,QAAID,GAAU;AACZ,YAAME,IAAOF,EAAS,sBAAA;AAEtB,MAAAC,IAAW;AAAA,QACT,aAAaD,EAAS;AAAA,QACtB,YAAYA,EAAS;AAAA,QACrB,WAAWA,EAAS;AAAA,QACpB,aAAaA,EAAS;AAAA,QACtB,KAAKE,EAAK;AAAA,QACV,QAAQA,EAAK;AAAA,QACb,MAAMA,EAAK;AAAA,QACX,OAAOA,EAAK;AAAA,MAAA;AAAA,IAEhB;AAEA,QAAIC,IAA0B,MAC1BC,IAAiC;AAKrC,QAHKR,EAAW,WACd,QAAQ,MAAM,iCAAiC,GAE7CI,KAAYJ,EAAW,SAAS;AAClC,YAAMlB,IAAWkB,EAAW,QAAQ;AAEpC,UAAIlB,EAAS,SAAS,GAAG;AACvB,cAAM2B,IAAM3B,EAASE,CAAK;AAE1B,QAAAuB,IAAUE,IAAMA,EAAI,sBAAA,IAA0B,MAE1CxB,MACFuB,IAAiBP,EAAe,QAAQjB,CAAK,IAAIiB,EAAe,QAAQjB,CAAK,EAAE,sBAAA,IAA0B;AAAA,MAE7G;AAAA,IACF;AACA,WAAO,EAAE,UAAAqB,GAAU,SAAAE,GAAS,gBAAAC,EAAA;AAAA,EAC9B,GAEME,IAAuBC,EAAiB,MAAM;AAClD,UAAM,EAAE,UAAAN,GAAU,SAAAE,GAAS,gBAAAC,EAAA,IAAmBL,EAAA;AAC9C,QAAIS,IAAa;AAEjB,IAAIL,KAAWF,MACbO,IAAa,KAAKL,EAAQ,OAAOF,EAAS,OAAOA,EAAS;AAG5D,UAAMQ,IAAoC;AAAA,MACxC,MAAM;AAAA,QACJ,MAAMD;AAAA,QACN,OAAOL,IAAUA,EAAQ,QAAQ;AAAA,MAAA;AAAA,IACnC;AASF,QANItB,KAAoBuB,MACtBK,EAAkB,UAAU;AAAA,MAC1B,OAAOL,EAAe;AAAA,IAAA,IAItB,MAAMb,EAAe,KAAK,IAAI,KAAK,MAAMA,EAAe,KAAK,KAAK;AACpE,MAAAC,EAAkBiB,CAAiB;AAAA,SAC9B;AACL,YAAMC,IAAS,KAAK,IAAInB,EAAe,KAAK,OAAOkB,EAAkB,KAAK,IAAI,GACxEE,IAAQ,KAAK,IAAIpB,EAAe,KAAK,QAAQkB,EAAkB,KAAK,KAAK;AAE/E,OAAIC,KAAU,KAAKC,KAAS,MAC1BnB,EAAkBiB,CAAiB;AAAA,IAEvC;AAAA,EACF,CAAC,GAEKG,IAAS,CAACC,GAAqB,EAAE,WAAAC,IAAY,GAAA,IAAS,OAAO;AACjE,IAAKnB,EAAQ,YAGTmB,IACFC,EAAQpB,EAAQ,SAAS,cAAckB,GAAa;AAAA,MAClD,UAAU;AAAA,IAAA,CACX,IAEDlB,EAAQ,QAAQ,aAAakB;AAAA,EAEjC,GAEMG,IAAiBT,EAAiB,MAAM;AAC5C,UAAMU,IAAOtB,EAAQ,SACfuB,IAAMD,IAAOA,EAAK,cAAcA,EAAK,cAAc,GACnDE,IACJF,KAAQnC,IACJ,EAAE,OAAOmC,EAAK,aAAa,GAAG,KAAKA,EAAK,aAAaC,IAAM,EAAA,IAC3D,EAAE,OAAO,IAAO,KAAK,GAAA;AAC3B,IAAAxB,EAAY,CAAC0B,MAAUA,EAAK,UAAUD,EAAK,SAASC,EAAK,QAAQD,EAAK,MAAMC,IAAOD,CAAK;AAAA,EAC1F,CAAC,GAEKE,IAAe,CAACC,MAAsB;AAC1C,UAAML,IAAOtB,EAAQ;AACrB,IAAIsB,KACFL,EAAOK,EAAK,aAAaK,IAAYL,EAAK,cAAc7C,CAAW;AAAA,EAEvE,GAEMmD,IAAyBhB,EAAiB,CAACO,MAAuB;AACtE,UAAM,EAAE,UAAAb,GAAU,SAAAE,EAAA,IAAYJ,EAAA;AAE9B,QAAI,GAACI,KAAW,CAACF;AAIjB,UAAIE,EAAQ,OAAOF,EAAS,MAAM;AAEhC,cAAMuB,IAAkBvB,EAAS,cAAcE,EAAQ,OAAOF,EAAS;AACvE,QAAAW,EAAOY,IAAkB1B,GAAqB,EAAE,WAAAgB,EAAA,CAAW;AAAA,MAC7D,WAAWX,EAAQ,QAAQF,EAAS,OAAO;AAEzC,cAAMuB,IAAkBvB,EAAS,cAAcE,EAAQ,QAAQF,EAAS;AACxE,QAAAW,EAAOY,IAAkB1B,GAAqB,EAAE,WAAAgB,EAAA,CAAW;AAAA,MAC7D;AAAA;AAAA,EACF,CAAC;AAED,EAAAxC,EAAM,UAAU,MAAM;AACpB,IAAAgB,EAAW,EAAI;AAAA,EACjB,GAAG,CAAA,CAAE,GAELhB,EAAM,UAAU,MAAM;AACpB,IAAAgC,EAAA;AAAA,EACF,CAAC,GAEDhC,EAAM,UAAU,MAAM;;AACpB,UAAMmD,IAAWC,EAAS,MAAM;AAC9B,MAAI/B,EAAQ,YACVW,EAAA,GACAU,EAAA;AAAA,IAEJ,GAAG,GAAG;AACN,QAAI,CAACrB,EAAQ,WAAW,CAACA,EAAQ,QAAQ,cAAc,aAAa;AAClE,cAAQ,MAAM,wDAAwD;AACtE;AAAA,IACF;AACA,UAAMgC,IAAqChC,EAAQ,QAAQ,cAAc;AAEzE,IAAAgC,EAAO,iBAAiB,UAAUF,CAAQ;AAC1C,UAAMG,IAAWjC,EAAQ;AACzB,IAAAiC,EAAS,iBAAiB,UAAUZ,GAAgB,EAAE,SAAS,IAAM;AAErE,QAAIa;AAIJ,WAAI,OAAO,kBAAmB,gBAC5BA,IAAiB,IAAI,eAAeJ,CAAQ,GAC5CI,EAAe,QAAQD,CAAQ,GAE/B,MAAM,MAAKE,KAAAC,IAAAnC,EAAW,YAAX,gBAAAmC,EAAoB,aAApB,OAAAD,IAAgC,EAAE,EAAE,QAAQ,CAACE,MAAU;AAChE,MAAAH,EAAe,QAAQG,CAAK;AAAA,IAC9B,CAAC,IAEHhB,EAAA,GAEO,MAAM;AACX,MAAAS,EAAS,OAAA,GAETE,EAAO,oBAAoB,UAAUF,CAAQ,GAC7CG,EAAS,oBAAoB,UAAUZ,CAAc,GAEjDa,KACFA,EAAe,WAAA;AAAA,IAEnB;AAAA,EACF,GAAG,CAACvB,GAAsBU,CAAc,CAAC,GAEzC1C,EAAM,UAAU,MAAM;AAEpB,IAAAiD,EAAuBpD,MAA0BoB,CAAc;AAAA,EACjE,GAAG,CAACgC,GAAwBhC,CAAc,CAAC;AAE3C,QAAM0C,IAAO3D,EAAM,SAAS;AAAA,IAC1BI;AAAA,IACA,CAACsD,GAAqCE,MACpC5D,EAAM,aAAa0D,GAAO;AAAA,MACxB,UAAUpD,MAAUsD;AAAA,MACpB,SAAS,CAACC,MAA+C;AACvD,QAAAxD,EAASwD,GAAOD,CAAK;AAAA,MACvB;AAAA,MACA,GAAIrD,KAAoB;AAAA,QACtB,YAAY,CAACL,MAAyB;AACpC,gBAAM,EAAE,YAAA4D,MAAeJ,EAAM;AAE7B,UAAAnC,EAAe,QAAQ,KAAKrB,CAAG,GAE3B4D,KACFC,EAAOD,GAAkC5D,CAAG;AAAA,QAEhD;AAAA,MAAA;AAAA,IACF,CACW;AAAA,EAAA,GAGX8D,IAAoBxD,KAAcC,MAAkBU,EAAS,SAASA,EAAS;AAErF,SACE,gBAAA8C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,UACE,oBAAoBxD;AAAA,UACpB,6BAA6BS,EAAS;AAAA,UACtC,2BAA2BA,EAAS;AAAA,QAAA;AAAA,QAEtChB;AAAA,MAAA;AAAA,MAEF,MAAM;AAAA,MACN,KAAAD;AAAA,MACC,GAAGY;AAAA,MAEH,UAAA;AAAA,QAAAkD,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAYxD;AAAA,YACZ,UAAU,CAACQ,EAAS;AAAA,YACpB,SAAS,MAAM4B,EAAa,EAAE;AAAA,YAE9B,UAAA,gBAAAoB,EAACC,GAAA,EAAK,MAAK,gBAAe,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxC,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAG,uBAAuB;AAAA,cACnC,mCAAmC1D;AAAA,YAAA,CACpC;AAAA,YACD,KAAKa;AAAA,YAEL,UAAA;AAAA,cAAA,gBAAA8C,EAAC,OAAA,EAAI,WAAU,0BAAyB,KAAK7C,GAAY,MAAK,WAAU,cAAYT,GACjF,UAAA8C,EAAA,CACH;AAAA,cACC5C,KACC,gBAAAoD,EAAC,QAAA,EAAK,WAAU,wBAAuB,OAAOlD,EAAe,MAC3D,UAAA,gBAAAkD,EAAC,UAAK,WAAU,gCAA+B,OAAOlD,EAAe,SAAS,EAAA,CAChF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH+C,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAYvD;AAAA,YACZ,UAAU,CAACO,EAAS;AAAA,YACpB,SAAS,MAAM4B,EAAa,CAAC;AAAA,YAE7B,UAAA,gBAAAoB,EAACC,GAAA,EAAK,MAAK,iBAAgB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACvC;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"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 { animate } from \"../../../utils/animate\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface TabsProps {\n  /**\n   * Index of the selected tab. Tabs count in the order they render: a tab left out,\n   * such as `{show && <Tab />}` while `show` is false, takes no index.\n   */\n  value: number;\n  /** Called with the index of the clicked tab, counted as for `value`. */\n  onChange: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;\n  /** Draw the indicator as wide as the selected tab's label rather than the whole tab. */\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\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          // The label box of that same tab, found in the DOM like the tab itself.\n          const content = tab ? tab.querySelector(\".smwb-tab__content\") : null;\n          tabContentMeta = content ? content.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  // Only elements are tabs: a child left out, such as `{show && <Tab />}`, takes no\n  // index, so `value` counts the tabs that render, as the indicator does in the DOM.\n  const tabs = React.Children.toArray(children)\n    .filter((child): child is React.ReactElement<TabProps> => React.isValidElement(child))\n    .map((child, index) =>\n      React.cloneElement(child, {\n        isActive: value === index,\n        // The tab's own onClick runs first, then the tab list picks the tab.\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          child.props.onClick?.(event);\n          onChange(event, index);\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","viewNextTabInPixels","getTabsMeta","tabsNode","tabsMeta","rect","tabMeta","tabContentMeta","tab","content","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","showScrollButtons","jsxs","cn","jsx","Icon"],"mappings":";;;;;;;;;AAiDA,MAAMA,IAAwB;AAAA,EAC5B,MAAM,CAAA;AAAA,EACN,SAAS,CAAA;AACX,GAGMC,IAAc,KAOPC,KAAOC,EAAM,WAAsC,SAAcC,GAAOC,GAAK;AACxF,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,YAAAC,IAAa;AAAA,IACb,eAAAC,IAAgB;AAAA,IAChB,OAAAC,IAAQ;AAAA,IACR,qBAAAC,IAAsB;AAAA,IACtB,wBAAAC,IAAyB;AAAA,IACzB,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,IACDb,GACE,CAACc,GAASC,CAAU,IAAIhB,EAAM,SAAS,EAAK,GAC5C,CAACiB,GAAgBC,CAAiB,IAAIlB,EAAM,SAAyBH,CAAqB,GAG1F,CAACsB,GAAUC,CAAW,IAAIpB,EAAM,SAAmB,EAAE,OAAO,IAAO,KAAK,IAAO,GAE/EqB,IAAUrB,EAAM,OAAuB,IAAI,GAC3CsB,IAAatB,EAAM,OAAuB,IAAI,GAG9CuB,IAAsB,IAEtBC,IAAc,MAAM;AACxB,UAAMC,IAAWJ,EAAQ;AAEzB,QAAIK;AAEJ,QAAID,GAAU;AACZ,YAAME,IAAOF,EAAS,sBAAA;AAEtB,MAAAC,IAAW;AAAA,QACT,aAAaD,EAAS;AAAA,QACtB,YAAYA,EAAS;AAAA,QACrB,WAAWA,EAAS;AAAA,QACpB,aAAaA,EAAS;AAAA,QACtB,KAAKE,EAAK;AAAA,QACV,QAAQA,EAAK;AAAA,QACb,MAAMA,EAAK;AAAA,QACX,OAAOA,EAAK;AAAA,MAAA;AAAA,IAEhB;AAEA,QAAIC,IAA0B,MAC1BC,IAAiC;AAKrC,QAHKP,EAAW,WACd,QAAQ,MAAM,iCAAiC,GAE7CG,KAAYH,EAAW,SAAS;AAClC,YAAMlB,IAAWkB,EAAW,QAAQ;AAEpC,UAAIlB,EAAS,SAAS,GAAG;AACvB,cAAM0B,IAAM1B,EAASE,CAAK;AAI1B,YAFAsB,IAAUE,IAAMA,EAAI,sBAAA,IAA0B,MAE1CvB,GAAkB;AAEpB,gBAAMwB,IAAUD,IAAMA,EAAI,cAAc,oBAAoB,IAAI;AAChE,UAAAD,IAAiBE,IAAUA,EAAQ,sBAAA,IAA0B;AAAA,QAC/D;AAAA,MACF;AAAA,IACF;AACA,WAAO,EAAE,UAAAL,GAAU,SAAAE,GAAS,gBAAAC,EAAA;AAAA,EAC9B,GAEMG,IAAuBC,EAAiB,MAAM;AAClD,UAAM,EAAE,UAAAP,GAAU,SAAAE,GAAS,gBAAAC,EAAA,IAAmBL,EAAA;AAC9C,QAAIU,IAAa;AAEjB,IAAIN,KAAWF,MACbQ,IAAa,KAAKN,EAAQ,OAAOF,EAAS,OAAOA,EAAS;AAG5D,UAAMS,IAAoC;AAAA,MACxC,MAAM;AAAA,QACJ,MAAMD;AAAA,QACN,OAAON,IAAUA,EAAQ,QAAQ;AAAA,MAAA;AAAA,IACnC;AASF,QANIrB,KAAoBsB,MACtBM,EAAkB,UAAU;AAAA,MAC1B,OAAON,EAAe;AAAA,IAAA,IAItB,MAAMZ,EAAe,KAAK,IAAI,KAAK,MAAMA,EAAe,KAAK,KAAK;AACpE,MAAAC,EAAkBiB,CAAiB;AAAA,SAC9B;AACL,YAAMC,IAAS,KAAK,IAAInB,EAAe,KAAK,OAAOkB,EAAkB,KAAK,IAAI,GACxEE,IAAQ,KAAK,IAAIpB,EAAe,KAAK,QAAQkB,EAAkB,KAAK,KAAK;AAE/E,OAAIC,KAAU,KAAKC,KAAS,MAC1BnB,EAAkBiB,CAAiB;AAAA,IAEvC;AAAA,EACF,CAAC,GAEKG,IAAS,CAACC,GAAqB,EAAE,WAAAC,IAAY,GAAA,IAAS,OAAO;AACjE,IAAKnB,EAAQ,YAGTmB,IACFC,EAAQpB,EAAQ,SAAS,cAAckB,GAAa;AAAA,MAClD,UAAU;AAAA,IAAA,CACX,IAEDlB,EAAQ,QAAQ,aAAakB;AAAA,EAEjC,GAEMG,IAAiBT,EAAiB,MAAM;AAC5C,UAAMU,IAAOtB,EAAQ,SACfuB,IAAMD,IAAOA,EAAK,cAAcA,EAAK,cAAc,GACnDE,IACJF,KAAQnC,IACJ,EAAE,OAAOmC,EAAK,aAAa,GAAG,KAAKA,EAAK,aAAaC,IAAM,EAAA,IAC3D,EAAE,OAAO,IAAO,KAAK,GAAA;AAC3B,IAAAxB,EAAY,CAAC0B,MAAUA,EAAK,UAAUD,EAAK,SAASC,EAAK,QAAQD,EAAK,MAAMC,IAAOD,CAAK;AAAA,EAC1F,CAAC,GAEKE,IAAe,CAACC,MAAsB;AAC1C,UAAML,IAAOtB,EAAQ;AACrB,IAAIsB,KACFL,EAAOK,EAAK,aAAaK,IAAYL,EAAK,cAAc7C,CAAW;AAAA,EAEvE,GAEMmD,IAAyBhB,EAAiB,CAACO,MAAuB;AACtE,UAAM,EAAE,UAAAd,GAAU,SAAAE,EAAA,IAAYJ,EAAA;AAE9B,QAAI,GAACI,KAAW,CAACF;AAIjB,UAAIE,EAAQ,OAAOF,EAAS,MAAM;AAEhC,cAAMwB,IAAkBxB,EAAS,cAAcE,EAAQ,OAAOF,EAAS;AACvE,QAAAY,EAAOY,IAAkB3B,GAAqB,EAAE,WAAAiB,EAAA,CAAW;AAAA,MAC7D,WAAWZ,EAAQ,QAAQF,EAAS,OAAO;AAEzC,cAAMwB,IAAkBxB,EAAS,cAAcE,EAAQ,QAAQF,EAAS;AACxE,QAAAY,EAAOY,IAAkB3B,GAAqB,EAAE,WAAAiB,EAAA,CAAW;AAAA,MAC7D;AAAA;AAAA,EACF,CAAC;AAED,EAAAxC,EAAM,UAAU,MAAM;AACpB,IAAAgB,EAAW,EAAI;AAAA,EACjB,GAAG,CAAA,CAAE,GAELhB,EAAM,UAAU,MAAM;AACpB,IAAAgC,EAAA;AAAA,EACF,CAAC,GAEDhC,EAAM,UAAU,MAAM;;AACpB,UAAMmD,IAAWC,EAAS,MAAM;AAC9B,MAAI/B,EAAQ,YACVW,EAAA,GACAU,EAAA;AAAA,IAEJ,GAAG,GAAG;AACN,QAAI,CAACrB,EAAQ,WAAW,CAACA,EAAQ,QAAQ,cAAc,aAAa;AAClE,cAAQ,MAAM,wDAAwD;AACtE;AAAA,IACF;AACA,UAAMgC,IAAqChC,EAAQ,QAAQ,cAAc;AAEzE,IAAAgC,EAAO,iBAAiB,UAAUF,CAAQ;AAC1C,UAAMG,IAAWjC,EAAQ;AACzB,IAAAiC,EAAS,iBAAiB,UAAUZ,GAAgB,EAAE,SAAS,IAAM;AAErE,QAAIa;AAIJ,WAAI,OAAO,kBAAmB,gBAC5BA,IAAiB,IAAI,eAAeJ,CAAQ,GAC5CI,EAAe,QAAQD,CAAQ,GAE/B,MAAM,MAAKE,KAAAC,IAAAnC,EAAW,YAAX,gBAAAmC,EAAoB,aAApB,OAAAD,IAAgC,EAAE,EAAE,QAAQ,CAACE,MAAU;AAChE,MAAAH,EAAe,QAAQG,CAAK;AAAA,IAC9B,CAAC,IAEHhB,EAAA,GAEO,MAAM;AACX,MAAAS,EAAS,OAAA,GAETE,EAAO,oBAAoB,UAAUF,CAAQ,GAC7CG,EAAS,oBAAoB,UAAUZ,CAAc,GAEjDa,KACFA,EAAe,WAAA;AAAA,IAEnB;AAAA,EACF,GAAG,CAACvB,GAAsBU,CAAc,CAAC,GAEzC1C,EAAM,UAAU,MAAM;AAEpB,IAAAiD,EAAuBpD,MAA0BoB,CAAc;AAAA,EACjE,GAAG,CAACgC,GAAwBhC,CAAc,CAAC;AAI3C,QAAM0C,IAAO3D,EAAM,SAAS,QAAQI,CAAQ,EACzC,OAAO,CAACsD,MAAiD1D,EAAM,eAAe0D,CAAK,CAAC,EACpF;AAAA,IAAI,CAACA,GAAOE,MACX5D,EAAM,aAAa0D,GAAO;AAAA,MACxB,UAAUpD,MAAUsD;AAAA;AAAA,MAEpB,SAAS,CAACC,MAA+C;;AACvD,SAAAL,KAAAC,IAAAC,EAAM,OAAM,YAAZ,QAAAF,EAAA,KAAAC,GAAsBI,IACtBxD,EAASwD,GAAOD,CAAK;AAAA,MACvB;AAAA,IAAA,CACW;AAAA,EAAA,GAGXE,IAAoBtD,KAAcC,MAAkBU,EAAS,SAASA,EAAS;AAErF,SACE,gBAAA4C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,UACE,oBAAoBtD;AAAA,UACpB,6BAA6BS,EAAS;AAAA,UACtC,2BAA2BA,EAAS;AAAA,QAAA;AAAA,QAEtChB;AAAA,MAAA;AAAA,MAEF,MAAM;AAAA,MACN,KAAAD;AAAA,MACC,GAAGY;AAAA,MAEH,UAAA;AAAA,QAAAgD,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAYtD;AAAA,YACZ,UAAU,CAACQ,EAAS;AAAA,YACpB,SAAS,MAAM4B,EAAa,EAAE;AAAA,YAE9B,UAAA,gBAAAkB,EAACC,GAAA,EAAK,MAAK,gBAAe,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxC,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAG,uBAAuB;AAAA,cACnC,mCAAmCxD;AAAA,YAAA,CACpC;AAAA,YACD,KAAKa;AAAA,YAEL,UAAA;AAAA,cAAA,gBAAA4C,EAAC,OAAA,EAAI,WAAU,0BAAyB,KAAK3C,GAAY,MAAK,WAAU,cAAYT,GACjF,UAAA8C,EAAA,CACH;AAAA,cACC5C,KACC,gBAAAkD,EAAC,QAAA,EAAK,WAAU,wBAAuB,OAAOhD,EAAe,MAC3D,UAAA,gBAAAgD,EAAC,UAAK,WAAU,gCAA+B,OAAOhD,EAAe,SAAS,EAAA,CAChF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH6C,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAYrD;AAAA,YACZ,UAAU,CAACO,EAAS;AAAA,YACpB,SAAS,MAAM4B,EAAa,CAAC;AAAA,YAE7B,UAAA,gBAAAkB,EAACC,GAAA,EAAK,MAAK,iBAAgB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACvC;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/connects/rt/table/headerCellRenderer.d.ts

@@ -8,7 +8,10 @@ export interface HeaderCellRendererProps<T extends object> {
  * Header text that turns into a text field on click, to rename the column.
  *
  * In a sortable table the click on the text only opens the field; the sort
- * marker, and Enter or Space on the focused header, sort the column.
+ * marker, and Enter or Space on the focused header, sort the column. The field
+ * is named after the column and closes when it loses focus; a click elsewhere
+ * (on the marker, on another header) still does what it would do without the
+ * field open.
  */
 declare const HeaderCellRenderer: <T extends object>({ header, onChange }: HeaderCellRendererProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default HeaderCellRenderer;

package/dist/connects/rt/table/headerCellRenderer.js

@@ -1,21 +1,51 @@
-import { jsx as r, Fragment as d } from "react/jsx-runtime";
-import { useState as i, useRef as p, useEffect as v } from "react";
-import { TextField as x } from "../../../components/inputs/textField/textField.js";
-const k = ({ header: e, onChange: l }) => {
-  var o;
-  const [c, s] = i(((o = e == null ? void 0 : e.column.columnDef.header) == null ? void 0 : o.toString()) || ""), [n, u] = i(!1), f = p(null);
-  v(() => {
-    var t;
-    n && ((t = f.current) == null || t.focus());
+import { jsx as f, Fragment as C } from "react/jsx-runtime";
+import { useState as R, useRef as m, useEffect as b } from "react";
+import { TextField as S } from "../../../components/inputs/textField/textField.js";
+const N = ({ header: t, onChange: l }) => {
+  var a, d;
+  const [g, D] = R(((a = t == null ? void 0 : t.column.columnDef.header) == null ? void 0 : a.toString()) || ""), [n, c] = R(!1), i = m(null), u = m(!1), r = m(!1), s = t == null ? void 0 : t.column.columnDef, F = typeof (s == null ? void 0 : s.header) == "string" ? s.header : (d = t == null ? void 0 : t.column.id) != null ? d : "";
+  b(() => {
+    var e;
+    n && ((e = i.current) == null || e.focus());
+  }, [n]), b(() => {
+    var E, L;
+    if (!n) return;
+    const e = (L = (E = i.current) == null ? void 0 : E.ownerDocument) != null ? L : document;
+    let v;
+    const p = (B) => {
+      u.current = B.button === 0;
+    }, o = () => {
+      u.current = !1, r.current && (v = setTimeout(() => {
+        r.current && c(!1);
+      }));
+    };
+    return e.addEventListener("mousedown", p, !0), e.addEventListener("mouseup", o, !0), e.addEventListener("dragend", o, !0), () => {
+      e.removeEventListener("mousedown", p, !0), e.removeEventListener("mouseup", o, !0), e.removeEventListener("dragend", o, !0), clearTimeout(v), u.current = !1, r.current = !1;
+    };
   }, [n]);
-  const m = (t) => {
-    e && (s(t.target.value), l == null || l(t, e));
-  }, a = (t) => {
-    t.preventDefault(), u(!0);
+  const w = (e) => {
+    t && (D(e.target.value), l == null || l(e, t));
+  }, x = (e) => {
+    e.preventDefault(), c(!0);
+  }, T = () => {
+    r.current = !1;
+  }, k = () => {
+    u.current ? r.current = !0 : c(!1);
   };
-  return e ? /* @__PURE__ */ r("div", { onClick: a, children: n ? /* @__PURE__ */ r(x, { ref: f, value: c, onChange: m, inline: !0, onBlur: () => u(!1) }) : e.column.columnDef.header }) : /* @__PURE__ */ r(d, {});
+  return t ? /* @__PURE__ */ f("div", { onClick: x, children: n ? /* @__PURE__ */ f(
+    S,
+    {
+      ref: i,
+      "aria-label": F,
+      value: g,
+      onChange: w,
+      inline: !0,
+      onFocus: T,
+      onBlur: k
+    }
+  ) : t.column.columnDef.header }) : /* @__PURE__ */ f(C, {});
 };
 export {
-  k as default
+  N as default
 };
 //# sourceMappingURL=headerCellRenderer.js.map

package/dist/connects/rt/table/headerCellRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"headerCellRenderer.js","sources":["../../../../src/connects/rt/table/headerCellRenderer.tsx"],"sourcesContent":["import { Header } from \"@tanstack/react-table\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { TextField } from \"../../../components/inputs/textField\";\n\nexport interface HeaderCellRendererProps<T extends object> {\n  header?: Header<T, unknown>;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>, header: Header<T, unknown>) => void;\n}\n\n/**\n * Header text that turns into a text field on click, to rename the column.\n *\n * In a sortable table the click on the text only opens the field; the sort\n * marker, and Enter or Space on the focused header, sort the column.\n */\nconst HeaderCellRenderer = <T extends object>({ header, onChange }: HeaderCellRendererProps<T>) => {\n  const [value, setValue] = useState<string>(header?.column.columnDef.header?.toString() || \"\");\n  const [editable, setEditable] = useState(false);\n  const fieldRef = useRef<HTMLInputElement>(null);\n\n  // The click that opens the field leaves focus on the header's sort control,\n  // where Space and Enter would sort instead of typing.\n  useEffect(() => {\n    if (editable) fieldRef.current?.focus();\n  }, [editable]);\n\n  const handleChangeCell = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!header) return;\n    setValue(e.target.value);\n    onChange?.(e, header);\n  };\n\n  // A sortable header draws this inside its sort control, and a click here is\n  // for editing: preventDefault() tells the control not to sort on it.\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setEditable(true);\n  };\n\n  if (!header) return <></>;\n\n  return (\n    <div onClick={handleClick}>\n      {editable ? (\n        <TextField ref={fieldRef} value={value} onChange={handleChangeCell} inline onBlur={() => setEditable(false)} />\n      ) : (\n        (header.column.columnDef.header as string)\n      )}\n    </div>\n  );\n};\n\nexport default HeaderCellRenderer;\n"],"names":["HeaderCellRenderer","header","onChange","value","setValue","useState","_a","editable","setEditable","fieldRef","useRef","useEffect","handleChangeCell","e","handleClick","jsx","TextField","Fragment"],"mappings":";;;AAeA,MAAMA,IAAqB,CAAmB,EAAE,QAAAC,GAAQ,UAAAC,QAA2C;;AACjG,QAAM,CAACC,GAAOC,CAAQ,IAAIC,IAAiBC,IAAAL,KAAA,gBAAAA,EAAQ,OAAO,UAAU,WAAzB,gBAAAK,EAAiC,eAAc,EAAE,GACtF,CAACC,GAAUC,CAAW,IAAIH,EAAS,EAAK,GACxCI,IAAWC,EAAyB,IAAI;AAI9C,EAAAC,EAAU,MAAM;;AACd,IAAIJ,OAAUD,IAAAG,EAAS,YAAT,QAAAH,EAAkB;AAAA,EAClC,GAAG,CAACC,CAAQ,CAAC;AAEb,QAAMK,IAAmB,CAACC,MAA2C;AACnE,IAAKZ,MACLG,EAASS,EAAE,OAAO,KAAK,GACvBX,KAAA,QAAAA,EAAWW,GAAGZ;AAAA,EAChB,GAIMa,IAAc,CAACD,MAAwC;AAC3D,IAAAA,EAAE,eAAA,GACFL,EAAY,EAAI;AAAA,EAClB;AAEA,SAAKP,IAGH,gBAAAc,EAAC,SAAI,SAASD,GACX,cACC,gBAAAC,EAACC,GAAA,EAAU,KAAKP,GAAU,OAAAN,GAAc,UAAUS,GAAkB,QAAM,IAAC,QAAQ,MAAMJ,EAAY,EAAK,GAAG,IAE5GP,EAAO,OAAO,UAAU,OAAA,CAE7B,IATkB,gBAAAc,EAAAE,GAAA,CAAA,CAAE;AAWxB;"}
+{"version":3,"file":"headerCellRenderer.js","sources":["../../../../src/connects/rt/table/headerCellRenderer.tsx"],"sourcesContent":["import { Header } from \"@tanstack/react-table\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { TextField } from \"../../../components/inputs/textField\";\n\nexport interface HeaderCellRendererProps<T extends object> {\n  header?: Header<T, unknown>;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>, header: Header<T, unknown>) => void;\n}\n\n/**\n * Header text that turns into a text field on click, to rename the column.\n *\n * In a sortable table the click on the text only opens the field; the sort\n * marker, and Enter or Space on the focused header, sort the column. The field\n * is named after the column and closes when it loses focus; a click elsewhere\n * (on the marker, on another header) still does what it would do without the\n * field open.\n */\nconst HeaderCellRenderer = <T extends object>({ header, onChange }: HeaderCellRendererProps<T>) => {\n  const [value, setValue] = useState<string>(header?.column.columnDef.header?.toString() || \"\");\n  const [editable, setEditable] = useState(false);\n  const fieldRef = useRef<HTMLInputElement>(null);\n  // Whether the primary button is down, tracked while the field is open.\n  const pressed = useRef(false);\n  // The field lost focus to a press and closes when the press is over.\n  const closeOnRelease = useRef(false);\n\n  const columnDef = header?.column.columnDef;\n  const columnName = typeof columnDef?.header === \"string\" ? columnDef.header : (header?.column.id ?? \"\");\n\n  // The click that opens the field leaves focus on the header's sort control,\n  // where Space and Enter would sort instead of typing.\n  useEffect(() => {\n    if (editable) fieldRef.current?.focus();\n  }, [editable]);\n\n  // A press elsewhere takes the focus from the field as the button goes down.\n  // Closing the field right then would shrink the header under the pointer\n  // (the field is wider than the text), what was pressed (the sort marker,\n  // another header) would move away before the release, and the browser would\n  // send the click to some ancestor of both. So such a field closes a task\n  // after the release, once the click that follows it has been handled.\n  useEffect(() => {\n    if (!editable) return;\n    const doc = fieldRef.current?.ownerDocument ?? document;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const onPress = (event: MouseEvent) => {\n      pressed.current = event.button === 0;\n    };\n    const onRelease = () => {\n      pressed.current = false;\n      if (!closeOnRelease.current) return;\n      timer = setTimeout(() => {\n        if (closeOnRelease.current) setEditable(false);\n      });\n    };\n    doc.addEventListener(\"mousedown\", onPress, true);\n    doc.addEventListener(\"mouseup\", onRelease, true);\n    // A press that turns into a drag ends without a mouseup.\n    doc.addEventListener(\"dragend\", onRelease, true);\n    return () => {\n      doc.removeEventListener(\"mousedown\", onPress, true);\n      doc.removeEventListener(\"mouseup\", onRelease, true);\n      doc.removeEventListener(\"dragend\", onRelease, true);\n      clearTimeout(timer);\n      pressed.current = false;\n      closeOnRelease.current = false;\n    };\n  }, [editable]);\n\n  const handleChangeCell = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!header) return;\n    setValue(e.target.value);\n    onChange?.(e, header);\n  };\n\n  // A sortable header draws this inside its sort control, and a click here is\n  // for editing: preventDefault() tells the control not to sort on it.\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setEditable(true);\n  };\n\n  const handleFocus = () => {\n    closeOnRelease.current = false;\n  };\n\n  const handleBlur = () => {\n    if (pressed.current) closeOnRelease.current = true;\n    else setEditable(false);\n  };\n\n  if (!header) return <></>;\n\n  return (\n    <div onClick={handleClick}>\n      {editable ? (\n        <TextField\n          ref={fieldRef}\n          aria-label={columnName}\n          value={value}\n          onChange={handleChangeCell}\n          inline\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n      ) : (\n        (header.column.columnDef.header as string)\n      )}\n    </div>\n  );\n};\n\nexport default HeaderCellRenderer;\n"],"names":["HeaderCellRenderer","header","onChange","value","setValue","useState","_a","editable","setEditable","fieldRef","useRef","pressed","closeOnRelease","columnDef","columnName","_b","useEffect","doc","timer","onPress","event","onRelease","handleChangeCell","handleClick","handleFocus","handleBlur","jsx","TextField","Fragment"],"mappings":";;;AAkBA,MAAMA,IAAqB,CAAmB,EAAE,QAAAC,GAAQ,UAAAC,QAA2C;;AACjG,QAAM,CAACC,GAAOC,CAAQ,IAAIC,IAAiBC,IAAAL,KAAA,gBAAAA,EAAQ,OAAO,UAAU,WAAzB,gBAAAK,EAAiC,eAAc,EAAE,GACtF,CAACC,GAAUC,CAAW,IAAIH,EAAS,EAAK,GACxCI,IAAWC,EAAyB,IAAI,GAExCC,IAAUD,EAAO,EAAK,GAEtBE,IAAiBF,EAAO,EAAK,GAE7BG,IAAYZ,KAAA,gBAAAA,EAAQ,OAAO,WAC3Ba,IAAa,QAAOD,KAAA,gBAAAA,EAAW,WAAW,WAAWA,EAAU,UAAUE,IAAAd,KAAA,gBAAAA,EAAQ,OAAO,OAAf,OAAAc,IAAqB;AAIpG,EAAAC,EAAU,MAAM;;AACd,IAAIT,OAAUD,IAAAG,EAAS,YAAT,QAAAH,EAAkB;AAAA,EAClC,GAAG,CAACC,CAAQ,CAAC,GAQbS,EAAU,MAAM;;AACd,QAAI,CAACT,EAAU;AACf,UAAMU,KAAMF,KAAAT,IAAAG,EAAS,YAAT,gBAAAH,EAAkB,kBAAlB,OAAAS,IAAmC;AAC/C,QAAIG;AACJ,UAAMC,IAAU,CAACC,MAAsB;AACrC,MAAAT,EAAQ,UAAUS,EAAM,WAAW;AAAA,IACrC,GACMC,IAAY,MAAM;AAEtB,MADAV,EAAQ,UAAU,IACbC,EAAe,YACpBM,IAAQ,WAAW,MAAM;AACvB,QAAIN,EAAe,WAASJ,EAAY,EAAK;AAAA,MAC/C,CAAC;AAAA,IACH;AACA,WAAAS,EAAI,iBAAiB,aAAaE,GAAS,EAAI,GAC/CF,EAAI,iBAAiB,WAAWI,GAAW,EAAI,GAE/CJ,EAAI,iBAAiB,WAAWI,GAAW,EAAI,GACxC,MAAM;AACX,MAAAJ,EAAI,oBAAoB,aAAaE,GAAS,EAAI,GAClDF,EAAI,oBAAoB,WAAWI,GAAW,EAAI,GAClDJ,EAAI,oBAAoB,WAAWI,GAAW,EAAI,GAClD,aAAaH,CAAK,GAClBP,EAAQ,UAAU,IAClBC,EAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAACL,CAAQ,CAAC;AAEb,QAAMe,IAAmB,CAAC,MAA2C;AACnE,IAAKrB,MACLG,EAAS,EAAE,OAAO,KAAK,GACvBF,KAAA,QAAAA,EAAW,GAAGD;AAAA,EAChB,GAIMsB,IAAc,CAAC,MAAwC;AAC3D,MAAE,eAAA,GACFf,EAAY,EAAI;AAAA,EAClB,GAEMgB,IAAc,MAAM;AACxB,IAAAZ,EAAe,UAAU;AAAA,EAC3B,GAEMa,IAAa,MAAM;AACvB,IAAId,EAAQ,UAASC,EAAe,UAAU,OAC7B,EAAK;AAAA,EACxB;AAEA,SAAKX,IAGH,gBAAAyB,EAAC,OAAA,EAAI,SAASH,GACX,UAAAhB,IACC,gBAAAmB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKlB;AAAA,MACL,cAAYK;AAAA,MACZ,OAAAX;AAAA,MACA,UAAUmB;AAAA,MACV,QAAM;AAAA,MACN,SAASE;AAAA,MACT,QAAQC;AAAA,IAAA;AAAA,EAAA,IAGTxB,EAAO,OAAO,UAAU,OAAA,CAE7B,IAjBkB,gBAAAyB,EAAAE,GAAA,CAAA,CAAE;AAmBxB;"}