@smwb/ui-react 2.7.0 → 2.8.0

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

@@ -1,101 +1,103 @@
-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 = {
+import { jsxs as y, jsx as i } from "react/jsx-runtime";
+import n from "react";
+import E from "clsx";
+import { debounce as H } from "../../../utils/debounce.js";
+import { useEventCallback as v } 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, ot = o.forwardRef(function(B, I) {
+}, K = 0.8, rt = 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] = 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 = () => {
+    className: B,
+    children: I,
+    onChange: W,
+    value: _,
+    indicatorContent: p = !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) {
-      const n = t.getBoundingClientRect();
+      const o = t.getBoundingClientRect();
       e = {
         clientWidth: t.clientWidth,
         scrollLeft: t.scrollLeft,
         scrollTop: t.scrollTop,
         scrollWidth: t.scrollWidth,
-        top: n.top,
-        bottom: n.bottom,
-        left: n.left,
-        right: n.right
+        top: o.top,
+        bottom: o.bottom,
+        left: o.left,
+        right: o.right
       };
     }
     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 a = n[u];
-        r = a ? a.getBoundingClientRect() : null, m && (s = h.current[u] ? h.current[u].getBoundingClientRect() : null);
+    if (b.current || console.error("tabListRef.current is undefined"), t && b.current) {
+      const o = b.current.children;
+      if (o.length > 0) {
+        const c = o[_];
+        if (r = c ? c.getBoundingClientRect() : null, p) {
+          const d = c ? c.querySelector(".smwb-tab__content") : null;
+          s = d ? d.getBoundingClientRect() : null;
+        }
       }
     }
     return { tabsMeta: e, tabMeta: r, tabContentMeta: s };
-  }, p = _(() => {
+  }, w = v(() => {
     const { tabsMeta: t, tabMeta: e, tabContentMeta: r } = g();
     let s = 0;
     e && t && (s = 1 * (e.left - t.left + t.scrollLeft));
-    const n = {
+    const o = {
       root: {
         left: s,
         width: e ? e.width : 0
       }
     };
-    if (m && r && (n.content = {
+    if (p && r && (o.content = {
       width: r.width
-    }), isNaN(c.root.left) || isNaN(c.root.width))
-      R(n);
+    }), isNaN(a.root.left) || isNaN(a.root.width))
+      L(o);
     else {
-      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);
+      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 = v(() => {
+    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 = v((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 });
       }
     }
   });
-  o.useEffect(() => {
-    G(!0);
-  }, []), o.useEffect(() => {
-    p();
-  }), o.useEffect(() => {
-    var n, a;
-    const t = J(() => {
-      l.current && (p(), b());
+  n.useEffect(() => {
+    q(!0);
+  }, []), n.useEffect(() => {
+    w();
+  }), n.useEffect(() => {
+    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");
@@ -104,80 +106,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 = (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();
+    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]), o.useEffect(() => {
-    C(x !== c);
-  }, [C, c]);
-  const H = o.Children.map(
-    W,
-    (t, e) => o.cloneElement(t, {
-      isActive: u === e,
+  }, [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: _ === 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 })
           }
         )
       ]
@@ -185,6 +182,6 @@ const x = {
   );
 });
 export {
-  ot as Tabs
+  rt 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\";\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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"}
+{"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":"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"}

package/dist/headless/hooks/useDismissOnEscape.js

@@ -0,0 +1,16 @@
+import { useEffect as s } from "react";
+import { useEventCallback as u } from "./useEventCallback.js";
+function c(e, o) {
+  const n = u(o);
+  s(() => {
+    if (!e) return;
+    const t = (r) => {
+      r.key === "Escape" && (r.preventDefault(), n());
+    };
+    return document.addEventListener("keydown", t, !0), () => document.removeEventListener("keydown", t, !0);
+  }, [e, n]);
+}
+export {
+  c as useDismissOnEscape
+};
+//# sourceMappingURL=useDismissOnEscape.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDismissOnEscape.js","sources":["../../../src/hooks/useDismissOnEscape.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useEventCallback } from \"./useEventCallback\";\n\n/**\n * While `active`, Escape calls `onDismiss` wherever focus is and is marked as handled\n * (`preventDefault()`), so a window, fullscreen panel, Modal or Sheet around stays open\n * until the next press. For content shown on hover or focus, such as a tooltip, which\n * Escape must hide without moving the pointer or focus (WCAG 1.4.13).\n *\n * The listener runs in the capture phase on `document`: those surfaces listen on\n * `document` in the bubble phase, and one opened before the content showed would\n * otherwise see the key first.\n */\nexport function useDismissOnEscape(active: boolean, onDismiss: () => void): void {\n  const dismiss = useEventCallback(onDismiss);\n  useEffect(() => {\n    if (!active) return undefined;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key !== \"Escape\") return;\n      event.preventDefault();\n      dismiss();\n    };\n    document.addEventListener(\"keydown\", onKeyDown, true);\n    return () => document.removeEventListener(\"keydown\", onKeyDown, true);\n  }, [active, dismiss]);\n}\n"],"names":["useDismissOnEscape","active","onDismiss","dismiss","useEventCallback","useEffect","onKeyDown","event"],"mappings":";;AAaO,SAASA,EAAmBC,GAAiBC,GAA6B;AAC/E,QAAMC,IAAUC,EAAiBF,CAAS;AAC1C,EAAAG,EAAU,MAAM;AACd,QAAI,CAACJ,EAAQ;AACb,UAAMK,IAAY,CAACC,MAA+B;AAChD,MAAIA,EAAM,QAAQ,aAClBA,EAAM,eAAA,GACNJ,EAAA;AAAA,IACF;AACA,oBAAS,iBAAiB,WAAWG,GAAW,EAAI,GAC7C,MAAM,SAAS,oBAAoB,WAAWA,GAAW,EAAI;AAAA,EACtE,GAAG,CAACL,GAAQE,CAAO,CAAC;AACtB;"}

package/dist/headless/hooks/useFocusTrap.js

@@ -33,6 +33,7 @@ function E(c, { active: s, restoreFocus: f = !0, autoFocus: l = !0 }) {
   }, [s, l, f, c]);
 }
 export {
+  b as FOCUSABLE,
   E as useFocusTrap
 };
 //# sourceMappingURL=useFocusTrap.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { RefObject, useEffect, useRef } from \"react\";\n\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nexport interface UseFocusTrapOptions {\n  /** Trap is active only while true. */\n  active: boolean;\n  /** Restore focus to the previously focused element on deactivate. */\n  restoreFocus?: boolean;\n  /** Focus the first focusable element on activate. */\n  autoFocus?: boolean;\n}\n\n/**\n * Confines Tab/Shift+Tab focus within `containerRef` while `active`.\n * Restores focus to the previously focused element on teardown.\n */\nexport function useFocusTrap<T extends HTMLElement>(\n  containerRef: RefObject<T>,\n  { active, restoreFocus = true, autoFocus = true }: UseFocusTrapOptions\n): void {\n  const prevFocused = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!active) {\n      return;\n    }\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    prevFocused.current = document.activeElement as HTMLElement | null;\n\n    const focusables = () =>\n      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n        (el) => el.offsetParent !== null || el === document.activeElement\n      );\n\n    if (autoFocus) {\n      const first = focusables()[0];\n      (first ?? container).focus({ preventScroll: true });\n    }\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") {\n        return;\n      }\n      const items = focusables();\n      if (items.length === 0) {\n        event.preventDefault();\n        return;\n      }\n      const first = items[0];\n      const last = items[items.length - 1];\n      const activeEl = document.activeElement;\n\n      if (event.shiftKey && activeEl === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && activeEl === last) {\n        event.preventDefault();\n        first.focus();\n      } else if (!container.contains(activeEl)) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown, true);\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown, true);\n      if (restoreFocus && prevFocused.current) {\n        prevFocused.current.focus({ preventScroll: true });\n      }\n    };\n  }, [active, autoFocus, restoreFocus, containerRef]);\n}\n\nexport default useFocusTrap;\n"],"names":["FOCUSABLE","useFocusTrap","containerRef","active","restoreFocus","autoFocus","prevFocused","useRef","useEffect","container","focusables","el","first","onKeyDown","event","items","last","activeEl"],"mappings":";AAEA,MAAMA,IACJ;AAeK,SAASC,EACdC,GACA,EAAE,QAAAC,GAAQ,cAAAC,IAAe,IAAM,WAAAC,IAAY,MACrC;AACN,QAAMC,IAAcC,EAA2B,IAAI;AAEnD,EAAAC,EAAU,MAAM;AACd,QAAI,CAACL;AACH;AAEF,UAAMM,IAAYP,EAAa;AAC/B,QAAI,CAACO;AACH;AAGF,IAAAH,EAAY,UAAU,SAAS;AAE/B,UAAMI,IAAa,MACjB,MAAM,KAAKD,EAAU,iBAA8BT,CAAS,CAAC,EAAE;AAAA,MAC7D,CAACW,MAAOA,EAAG,iBAAiB,QAAQA,MAAO,SAAS;AAAA,IAAA;AAGxD,QAAIN,GAAW;AACb,YAAMO,IAAQF,EAAA,EAAa,CAAC;AAC5B,OAACE,KAAA,OAAAA,IAASH,GAAW,MAAM,EAAE,eAAe,IAAM;AAAA,IACpD;AAEA,UAAMI,IAAY,CAACC,MAAyB;AAC1C,UAAIA,EAAM,QAAQ;AAChB;AAEF,YAAMC,IAAQL,EAAA;AACd,UAAIK,EAAM,WAAW,GAAG;AACtB,QAAAD,EAAM,eAAA;AACN;AAAA,MACF;AACA,YAAMF,IAAQG,EAAM,CAAC,GACfC,IAAOD,EAAMA,EAAM,SAAS,CAAC,GAC7BE,IAAW,SAAS;AAE1B,MAAIH,EAAM,YAAYG,MAAaL,KACjCE,EAAM,eAAA,GACNE,EAAK,MAAA,KACI,CAACF,EAAM,YAAYG,MAAaD,KACzCF,EAAM,eAAA,GACNF,EAAM,MAAA,KACIH,EAAU,SAASQ,CAAQ,MACrCH,EAAM,eAAA,GACNF,EAAM,MAAA;AAAA,IAEV;AAEA,oBAAS,iBAAiB,WAAWC,GAAW,EAAI,GAC7C,MAAM;AACX,eAAS,oBAAoB,WAAWA,GAAW,EAAI,GACnDT,KAAgBE,EAAY,WAC9BA,EAAY,QAAQ,MAAM,EAAE,eAAe,IAAM;AAAA,IAErD;AAAA,EACF,GAAG,CAACH,GAAQE,GAAWD,GAAcF,CAAY,CAAC;AACpD;"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import { RefObject, useEffect, useRef } from \"react\";\n\n/** Elements in the Tab order (hidden ones match too). */\nexport const FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nexport interface UseFocusTrapOptions {\n  /** Trap is active only while true. */\n  active: boolean;\n  /** Restore focus to the previously focused element on deactivate. */\n  restoreFocus?: boolean;\n  /** Focus the first focusable element on activate. */\n  autoFocus?: boolean;\n}\n\n/**\n * Confines Tab/Shift+Tab focus within `containerRef` while `active`.\n * Restores focus to the previously focused element on teardown.\n */\nexport function useFocusTrap<T extends HTMLElement>(\n  containerRef: RefObject<T>,\n  { active, restoreFocus = true, autoFocus = true }: UseFocusTrapOptions\n): void {\n  const prevFocused = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!active) {\n      return;\n    }\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    prevFocused.current = document.activeElement as HTMLElement | null;\n\n    const focusables = () =>\n      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n        (el) => el.offsetParent !== null || el === document.activeElement\n      );\n\n    if (autoFocus) {\n      const first = focusables()[0];\n      (first ?? container).focus({ preventScroll: true });\n    }\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\") {\n        return;\n      }\n      const items = focusables();\n      if (items.length === 0) {\n        event.preventDefault();\n        return;\n      }\n      const first = items[0];\n      const last = items[items.length - 1];\n      const activeEl = document.activeElement;\n\n      if (event.shiftKey && activeEl === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && activeEl === last) {\n        event.preventDefault();\n        first.focus();\n      } else if (!container.contains(activeEl)) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown, true);\n    return () => {\n      document.removeEventListener(\"keydown\", onKeyDown, true);\n      if (restoreFocus && prevFocused.current) {\n        prevFocused.current.focus({ preventScroll: true });\n      }\n    };\n  }, [active, autoFocus, restoreFocus, containerRef]);\n}\n\nexport default useFocusTrap;\n"],"names":["FOCUSABLE","useFocusTrap","containerRef","active","restoreFocus","autoFocus","prevFocused","useRef","useEffect","container","focusables","el","first","onKeyDown","event","items","last","activeEl"],"mappings":";AAGO,MAAMA,IACX;AAeK,SAASC,EACdC,GACA,EAAE,QAAAC,GAAQ,cAAAC,IAAe,IAAM,WAAAC,IAAY,MACrC;AACN,QAAMC,IAAcC,EAA2B,IAAI;AAEnD,EAAAC,EAAU,MAAM;AACd,QAAI,CAACL;AACH;AAEF,UAAMM,IAAYP,EAAa;AAC/B,QAAI,CAACO;AACH;AAGF,IAAAH,EAAY,UAAU,SAAS;AAE/B,UAAMI,IAAa,MACjB,MAAM,KAAKD,EAAU,iBAA8BT,CAAS,CAAC,EAAE;AAAA,MAC7D,CAACW,MAAOA,EAAG,iBAAiB,QAAQA,MAAO,SAAS;AAAA,IAAA;AAGxD,QAAIN,GAAW;AACb,YAAMO,IAAQF,EAAA,EAAa,CAAC;AAC5B,OAACE,KAAA,OAAAA,IAASH,GAAW,MAAM,EAAE,eAAe,IAAM;AAAA,IACpD;AAEA,UAAMI,IAAY,CAACC,MAAyB;AAC1C,UAAIA,EAAM,QAAQ;AAChB;AAEF,YAAMC,IAAQL,EAAA;AACd,UAAIK,EAAM,WAAW,GAAG;AACtB,QAAAD,EAAM,eAAA;AACN;AAAA,MACF;AACA,YAAMF,IAAQG,EAAM,CAAC,GACfC,IAAOD,EAAMA,EAAM,SAAS,CAAC,GAC7BE,IAAW,SAAS;AAE1B,MAAIH,EAAM,YAAYG,MAAaL,KACjCE,EAAM,eAAA,GACNE,EAAK,MAAA,KACI,CAACF,EAAM,YAAYG,MAAaD,KACzCF,EAAM,eAAA,GACNF,EAAM,MAAA,KACIH,EAAU,SAASQ,CAAQ,MACrCH,EAAM,eAAA,GACNF,EAAM,MAAA;AAAA,IAEV;AAEA,oBAAS,iBAAiB,WAAWC,GAAW,EAAI,GAC7C,MAAM;AACX,eAAS,oBAAoB,WAAWA,GAAW,EAAI,GACnDT,KAAgBE,EAAY,WAC9BA,EAAY,QAAQ,MAAM,EAAE,eAAe,IAAM;AAAA,IAErD;AAAA,EACF,GAAG,CAACH,GAAQE,GAAWD,GAAcF,CAAY,CAAC;AACpD;"}

package/dist/headless/hooks/useHelperText.js

@@ -0,0 +1,13 @@
+import { useId as n } from "./useId.js";
+function d(e, o) {
+  return !o && !!e;
+}
+function l(e, { inline: o, describedBy: r } = {}) {
+  const t = n(void 0, "smwb-helper-text"), i = [d(e, o) ? t : void 0, r].filter(Boolean).join(" ");
+  return { id: t, describedBy: i || void 0 };
+}
+export {
+  d as hasHelperText,
+  l as useHelperText
+};
+//# sourceMappingURL=useHelperText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHelperText.js","sources":["../../../src/hooks/useHelperText.ts"],"sourcesContent":["import type React from \"react\";\nimport { useId } from \"./useId\";\n\n/**\n * Whether `helperText` is shown under its control, so that it describes the control. TextFieldWrapper shows none for\n * an inline field, and without helper text it draws a blank line in its place, which describes nothing.\n */\nexport function hasHelperText(helperText: React.ReactNode, inline?: boolean): boolean {\n  return !inline && Boolean(helperText);\n}\n\nexport interface HelperTextOptions {\n  /** The field is inline: TextFieldWrapper draws no helper text for it. */\n  inline?: boolean;\n  /** The caller's own `aria-describedby`, kept after the helper text. */\n  describedBy?: string;\n}\n\n/**\n * Links a control to the helper text drawn under it, by TextFieldWrapper or by the component itself (Rating). Put\n * `id` on the helper text (TextFieldWrapper takes it as `helperTextId`) and `describedBy` on the control's\n * `aria-describedby`: the helper text's id while it is shown, then the caller's own ids.\n */\nexport function useHelperText(\n  helperText: React.ReactNode,\n  { inline, describedBy }: HelperTextOptions = {}\n): { id: string; describedBy: string | undefined } {\n  const id = useId(undefined, \"smwb-helper-text\");\n  const ids = [hasHelperText(helperText, inline) ? id : undefined, describedBy].filter(Boolean).join(\" \");\n  return { id, describedBy: ids || undefined };\n}\n"],"names":["hasHelperText","helperText","inline","useHelperText","describedBy","id","useId","ids"],"mappings":";AAOO,SAASA,EAAcC,GAA6BC,GAA2B;AACpF,SAAO,CAACA,KAAU,EAAQD;AAC5B;AAcO,SAASE,EACdF,GACA,EAAE,QAAAC,GAAQ,aAAAE,EAAA,IAAmC,CAAA,GACI;AACjD,QAAMC,IAAKC,EAAM,QAAW,kBAAkB,GACxCC,IAAM,CAACP,EAAcC,GAAYC,CAAM,IAAIG,IAAK,QAAWD,CAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACtG,SAAO,EAAE,IAAAC,GAAI,aAAaE,KAAO,OAAA;AACnC;"}

package/dist/headless/utils/controlProps.js

@@ -0,0 +1,14 @@
+function u(o) {
+  return o === "role" || o === "tabIndex" || o === "onFocus" || o === "onBlur" || o.startsWith("aria-") && o !== "aria-hidden";
+}
+function c(o, i = !0) {
+  if (!i) return [{}, o];
+  const t = {}, r = {};
+  for (const [n, s] of Object.entries(o))
+    (u(n) ? t : r)[n] = s;
+  return [t, r];
+}
+export {
+  c as splitControlProps
+};
+//# sourceMappingURL=controlProps.js.map

package/dist/headless/utils/controlProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controlProps.js","sources":["../../../src/utils/controlProps.ts"],"sourcesContent":["import type React from \"react\";\n\n/** What an element is to the keyboard and to assistive tech. */\nexport type ControlProps = Pick<React.HTMLAttributes<HTMLElement>, \"role\" | \"tabIndex\" | \"onFocus\" | \"onBlur\"> &\n  React.AriaAttributes;\n\nfunction isControlProp(key: string): boolean {\n  return (\n    key === \"role\" ||\n    key === \"tabIndex\" ||\n    key === \"onFocus\" ||\n    key === \"onBlur\" ||\n    (key.startsWith(\"aria-\") && key !== \"aria-hidden\")\n  );\n}\n\n/**\n * Splits the caller's props of a component whose root is a box around its\n * control and other content beside it: a card's button and its footer or\n * corner slots, a chip's button and its delete button.\n *\n * What the component is to the keyboard and to assistive tech goes to the\n * control, the element that takes focus: `role`, `tabIndex`, `onFocus`,\n * `onBlur` and the `aria-*` attributes. The rest stays on the box, and so does\n * `aria-hidden`, which hides the whole component. While `toControl` is false\n * (the component is not a control, e.g. a card without `onClick`), all of them\n * stay on the box.\n */\nexport function splitControlProps<T extends object>(props: T, toControl = true): [ControlProps, T] {\n  if (!toControl) return [{}, props];\n  const control: Record<string, unknown> = {};\n  const box: Record<string, unknown> = {};\n  for (const [key, value] of Object.entries(props)) {\n    (isControlProp(key) ? control : box)[key] = value;\n  }\n  return [control, box as T];\n}\n"],"names":["isControlProp","key","splitControlProps","props","toControl","control","box","value"],"mappings":"AAMA,SAASA,EAAcC,GAAsB;AAC3C,SACEA,MAAQ,UACRA,MAAQ,cACRA,MAAQ,aACRA,MAAQ,YACPA,EAAI,WAAW,OAAO,KAAKA,MAAQ;AAExC;AAcO,SAASC,EAAoCC,GAAUC,IAAY,IAAyB;AACjG,MAAI,CAACA,EAAW,QAAO,CAAC,CAAA,GAAID,CAAK;AACjC,QAAME,IAAmC,CAAA,GACnCC,IAA+B,CAAA;AACrC,aAAW,CAACL,GAAKM,CAAK,KAAK,OAAO,QAAQJ,CAAK;AAC7C,KAACH,EAAcC,CAAG,IAAII,IAAUC,GAAKL,CAAG,IAAIM;AAE9C,SAAO,CAACF,GAASC,CAAQ;AAC3B;"}

package/dist/headless/utils/overlayLayer.js

@@ -1,11 +1,18 @@
-const e = "data-smwb-overlay-layer", r = () => typeof document == "undefined" ? [] : Array.from(document.querySelectorAll(`[${e}]`)), a = (n, o) => typeof n.composedPath != "function" ? !1 : n.composedPath().some((t) => t instanceof Element && t.hasAttribute(e) && !t.contains(o)), s = (n) => {
-  if (!n) return !0;
-  const o = r(), t = o[o.length - 1];
-  return !t || t === n || t.contains(n) || n.contains(t);
-};
+const r = "data-smwb-overlay-layer", s = () => typeof document == "undefined" ? [] : Array.from(document.querySelectorAll(`[${r}]`)), a = (o, e) => {
+  if (typeof o.composedPath != "function") return !1;
+  const t = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_DISCONNECTED;
+  return o.composedPath().some(
+    (n) => n instanceof Element && n.hasAttribute(r) && (e.compareDocumentPosition(n) & t) !== 0
+  );
+}, c = (o) => {
+  if (!o) return !0;
+  const e = s(), t = e[e.length - 1];
+  return !t || t === o || t.contains(o);
+}, O = (o) => !o || !o.isConnected ? !1 : s().some((e) => (o.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0);
 export {
-  e as OVERLAY_LAYER_ATTR,
+  r as OVERLAY_LAYER_ATTR,
+  O as hasOverlayLayerAbove,
   a as isEventInForeignOverlay,
-  s as isTopOverlayLayer
+  c as isTopOverlayLayer
 };
 //# sourceMappingURL=overlayLayer.js.map

package/dist/headless/utils/overlayLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlayLayer.js","sources":["../../../src/utils/overlayLayer.ts"],"sourcesContent":["/** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, …). */\nexport const OVERLAY_LAYER_ATTR = \"data-smwb-overlay-layer\";\n\n/** All open overlay layers in document order (last = topmost). */\nconst overlayLayers = (): Element[] =>\n  typeof document === \"undefined\" ? [] : Array.from(document.querySelectorAll(`[${OVERLAY_LAYER_ATTR}]`));\n\n/**\n * True when `event` happened inside an overlay layer that does NOT contain\n * `node` — i.e. `node` sits underneath that layer, so the interaction is not\n * a \"click away\" from `node`.\n */\nexport const isEventInForeignOverlay = (event: Event, node: Element): boolean => {\n  if (typeof event.composedPath !== \"function\") return false;\n  return event\n    .composedPath()\n    .some((el) => el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && !el.contains(node));\n};\n\n/**\n * True when `el` belongs to the topmost open overlay layer (or no layers are\n * open). Used to make Escape close only the top layer instead of every layer.\n */\nexport const isTopOverlayLayer = (el: Element | null | undefined): boolean => {\n  if (!el) return true;\n  const all = overlayLayers();\n  const top = all[all.length - 1];\n  return !top || top === el || top.contains(el) || el.contains(top);\n};\n"],"names":["OVERLAY_LAYER_ATTR","overlayLayers","isEventInForeignOverlay","event","node","el","isTopOverlayLayer","all","top"],"mappings":"AACO,MAAMA,IAAqB,2BAG5BC,IAAgB,MACpB,OAAO,YAAa,cAAc,CAAA,IAAK,MAAM,KAAK,SAAS,iBAAiB,IAAID,CAAkB,GAAG,CAAC,GAO3FE,IAA0B,CAACC,GAAcC,MAChD,OAAOD,EAAM,gBAAiB,aAAmB,KAC9CA,EACJ,aAAA,EACA,KAAK,CAACE,MAAOA,aAAc,WAAWA,EAAG,aAAaL,CAAkB,KAAK,CAACK,EAAG,SAASD,CAAI,CAAC,GAOvFE,IAAoB,CAACD,MAA4C;AAC5E,MAAI,CAACA,EAAI,QAAO;AAChB,QAAME,IAAMN,EAAA,GACNO,IAAMD,EAAIA,EAAI,SAAS,CAAC;AAC9B,SAAO,CAACC,KAAOA,MAAQH,KAAMG,EAAI,SAASH,CAAE,KAAKA,EAAG,SAASG,CAAG;AAClE;"}
+{"version":3,"file":"overlayLayer.js","sources":["../../../src/utils/overlayLayer.ts"],"sourcesContent":["/** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, …). */\nexport const OVERLAY_LAYER_ATTR = \"data-smwb-overlay-layer\";\n\n/** All open overlay layers in document order (last = topmost). */\nconst overlayLayers = (): Element[] =>\n  typeof document === \"undefined\" ? [] : Array.from(document.querySelectorAll(`[${OVERLAY_LAYER_ATTR}]`));\n\n/**\n * True when `event` happened inside an overlay layer above `node`, so the\n * interaction is not a \"click away\" from `node`. A layer is above `node` when it\n * comes later in document order (portaled after it, as everything opened from\n * inside `node` is) or sits inside it. A layer that holds `node` or comes before\n * it is below: a click in the Modal a select menu was opened from is a click away\n * from the menu.\n */\nexport const isEventInForeignOverlay = (event: Event, node: Element): boolean => {\n  if (typeof event.composedPath !== \"function\") return false;\n  // A layer detached during the dispatch can't be ranked; it counts as above.\n  const above = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_DISCONNECTED;\n  return event\n    .composedPath()\n    .some(\n      (el) =>\n        el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && (node.compareDocumentPosition(el) & above) !== 0\n    );\n};\n\n/**\n * True when `el` belongs to the topmost open overlay layer (or no layers are\n * open). Used to make Escape close only the top layer instead of every layer.\n * A layer inside `el`, such as a select menu rendered into a Modal through\n * `menuContainer`, is above `el` rather than part of it.\n */\nexport const isTopOverlayLayer = (el: Element | null | undefined): boolean => {\n  if (!el) return true;\n  const all = overlayLayers();\n  const top = all[all.length - 1];\n  return !top || top === el || top.contains(el);\n};\n\n/**\n * True when an open overlay layer other than `el` sits above it: inside it, or\n * later in document order (portaled after it). FloatingWindow and the fullscreen\n * ExpansionPanel leave Escape to such a layer, e.g. a select menu opened from\n * inside them. Layers earlier in document order are below `el`.\n */\nexport const hasOverlayLayerAbove = (el: Element | null | undefined): boolean => {\n  if (!el || !el.isConnected) return false;\n  return overlayLayers().some((layer) => (el.compareDocumentPosition(layer) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0);\n};\n"],"names":["OVERLAY_LAYER_ATTR","overlayLayers","isEventInForeignOverlay","event","node","above","el","isTopOverlayLayer","all","top","hasOverlayLayerAbove","layer"],"mappings":"AACO,MAAMA,IAAqB,2BAG5BC,IAAgB,MACpB,OAAO,YAAa,cAAc,CAAA,IAAK,MAAM,KAAK,SAAS,iBAAiB,IAAID,CAAkB,GAAG,CAAC,GAU3FE,IAA0B,CAACC,GAAcC,MAA2B;AAC/E,MAAI,OAAOD,EAAM,gBAAiB,WAAY,QAAO;AAErD,QAAME,IAAQ,KAAK,8BAA8B,KAAK;AACtD,SAAOF,EACJ,eACA;AAAA,IACC,CAACG,MACCA,aAAc,WAAWA,EAAG,aAAaN,CAAkB,MAAMI,EAAK,wBAAwBE,CAAE,IAAID,OAAW;AAAA,EAAA;AAEvH,GAQaE,IAAoB,CAACD,MAA4C;AAC5E,MAAI,CAACA,EAAI,QAAO;AAChB,QAAME,IAAMP,EAAA,GACNQ,IAAMD,EAAIA,EAAI,SAAS,CAAC;AAC9B,SAAO,CAACC,KAAOA,MAAQH,KAAMG,EAAI,SAASH,CAAE;AAC9C,GAQaI,IAAuB,CAACJ,MAC/B,CAACA,KAAM,CAACA,EAAG,cAAoB,KAC5BL,EAAA,EAAgB,KAAK,CAACU,OAAWL,EAAG,wBAAwBK,CAAK,IAAI,KAAK,iCAAiC,CAAC;"}

package/dist/headless/utils/ownClick.js

@@ -0,0 +1,40 @@
+const a = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "label",
+  "summary",
+  "[tabindex]",
+  "[contenteditable]:not([contenteditable='false'])",
+  ...[
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "switch",
+    "textbox",
+    "searchbox",
+    "combobox",
+    "spinbutton",
+    "slider",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "tab"
+  ].map((t) => `[role='${t}']`)
+].join(",");
+function c(t, r = t.currentTarget) {
+  var i;
+  if (t.defaultPrevented) return !1;
+  const e = t.target, o = (i = e == null ? void 0 : e.closest(a)) != null ? i : null;
+  if (o !== null && o === r) return !0;
+  const n = t.currentTarget;
+  return r === n || !e || !(n != null && n.contains(e)) ? !1 : !(o && n.contains(o));
+}
+export {
+  c as isOwnClick
+};
+//# sourceMappingURL=ownClick.js.map

package/dist/headless/utils/ownClick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ownClick.js","sources":["../../../src/utils/ownClick.ts"],"sourcesContent":["/**\n * Whatever takes a click of its own: a native control or link, a label,\n * anything focusable, a widget role, editable content.\n */\nconst INTERACTIVE = [\n  \"a[href]\",\n  \"button\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  \"label\",\n  \"summary\",\n  \"[tabindex]\",\n  \"[contenteditable]:not([contenteditable='false'])\",\n  ...[\n    \"button\",\n    \"link\",\n    \"checkbox\",\n    \"radio\",\n    \"switch\",\n    \"textbox\",\n    \"searchbox\",\n    \"combobox\",\n    \"spinbutton\",\n    \"slider\",\n    \"menuitem\",\n    \"menuitemcheckbox\",\n    \"menuitemradio\",\n    \"option\",\n    \"tab\",\n  ].map((role) => `[role='${role}']`),\n].join(\",\");\n\n/**\n * Whether a click belongs to the control that listens for it on a wrapper (a\n * sortable header, a selectable card) rather than to something inside it.\n *\n * The control must match `INTERACTIVE` itself (`role=\"button\"`, `tabindex`), and\n * then a click is its own when it is the nearest match from the click's target\n * up, and no handler has prevented the click's default yet. So a click in a\n * nested control is that control's, and so is a click in a portal rendered\n * inside: React delivers it to the wrapper, though it landed outside.\n *\n * The control is the element that listens (`currentTarget`), unless the caller\n * passes another: a box that holds a control and other content beside it (a\n * card's button and its corner slots) listens for both. A click on that content\n * is then the control's too, unless it lands in a control of its own there.\n */\nexport function isOwnClick(\n  event: Pick<Event, \"target\" | \"currentTarget\" | \"defaultPrevented\">,\n  control: Element | null = event.currentTarget as Element | null\n): boolean {\n  if (event.defaultPrevented) return false;\n  const target = event.target as Element | null;\n  const nearest = target?.closest(INTERACTIVE) ?? null;\n  if (nearest !== null && nearest === control) return true;\n  const box = event.currentTarget as Element | null;\n  if (control === box || !target || !box?.contains(target)) return false;\n  return !(nearest && box.contains(nearest));\n}\n"],"names":["INTERACTIVE","role","isOwnClick","event","control","_a","target","nearest","box"],"mappings":"AAIA,MAAMA,IAAc;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,IAAI,CAACC,MAAS,UAAUA,CAAI,IAAI;AACpC,EAAE,KAAK,GAAG;AAiBH,SAASC,EACdC,GACAC,IAA0BD,EAAM,eACvB;AA/CX,MAAAE;AAgDE,MAAIF,EAAM,iBAAkB,QAAO;AACnC,QAAMG,IAASH,EAAM,QACfI,KAAUF,IAAAC,KAAA,gBAAAA,EAAQ,QAAQN,OAAhB,OAAAK,IAAgC;AAChD,MAAIE,MAAY,QAAQA,MAAYH,EAAS,QAAO;AACpD,QAAMI,IAAML,EAAM;AAClB,SAAIC,MAAYI,KAAO,CAACF,KAAU,EAACE,KAAA,QAAAA,EAAK,SAASF,MAAgB,KAC1D,EAAEC,KAAWC,EAAI,SAASD,CAAO;AAC1C;"}

package/dist/headless/utils/readOnlyToggle.js

@@ -0,0 +1,14 @@
+function r(e, t) {
+  t == null && e.preventDefault();
+}
+function g(e, t) {
+  var l, o;
+  if (t != null) return;
+  const c = e.currentTarget, n = c.checked;
+  c.checked = !n, (o = (l = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "checked")) == null ? void 0 : l.set) == null || o.call(c, n);
+}
+export {
+  r as cancelToggle,
+  g as forgetCancelledToggle
+};
+//# sourceMappingURL=readOnlyToggle.js.map

package/dist/headless/utils/readOnlyToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readOnlyToggle.js","sources":["../../../src/utils/readOnlyToggle.ts"],"sourcesContent":["import type React from \"react\";\n\n// `readonly` means nothing to a checkbox or radio input: a click on it or on its label, Space, and\n// the arrow keys in a radio group still toggle it, each through a click on the input. Checkbox,\n// RadioButton and Toggle call these two while read-only.\n//\n// A controlled input (`checked` given) needs neither: after every click React puts it back to\n// `checked`, and the rest of its named radio group to theirs. Cancelling the click as well would\n// give the last word to the browser, which restores the state from before the click even when the\n// click changed `checked` (say, a row that selects itself on click).\n\n/**\n * Call from the input's `onClick`. Cancels the click on an uncontrolled input; the browser then\n * restores its previous state, and re-checks the radio that was checked before.\n */\nexport function cancelToggle(event: React.MouseEvent<HTMLInputElement>, checked: boolean | null | undefined): void {\n  if (checked == null) event.preventDefault();\n}\n\n/**\n * Call from the input's `onChange`. React has recorded the toggled state of an uncontrolled input,\n * and the browser puts the old one back after the cancelled click without React noticing; React\n * would then take the next real change for no change and skip `onChange`. Record the old state\n * instead: set it through the input's own `checked` (the property React watches), then put the\n * toggled one back through the prototype's setter, which React doesn't watch, so the input stays\n * as it is until the browser restores it.\n */\nexport function forgetCancelledToggle(\n  event: React.ChangeEvent<HTMLInputElement>,\n  checked: boolean | null | undefined\n): void {\n  if (checked != null) return;\n  const input = event.currentTarget;\n  const toggled = input.checked;\n  input.checked = !toggled;\n  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, \"checked\")?.set?.call(input, toggled);\n}\n"],"names":["cancelToggle","event","checked","forgetCancelledToggle","_a","_b","input","toggled"],"mappings":"AAeO,SAASA,EAAaC,GAA2CC,GAA2C;AACjH,EAAIA,KAAW,QAAMD,EAAM,eAAA;AAC7B;AAUO,SAASE,EACdF,GACAC,GACM;AAfD,MAAAE,GAAAC;AAgBL,MAAIH,KAAW,KAAM;AACrB,QAAMI,IAAQL,EAAM,eACdM,IAAUD,EAAM;AACtB,EAAAA,EAAM,UAAU,CAACC,IACjBF,KAAAD,IAAA,OAAO,yBAAyB,iBAAiB,WAAW,SAAS,MAArE,gBAAAA,EAAwE,QAAxE,QAAAC,EAA6E,KAAKC,GAAOC;AAC3F;"}

package/dist/hooks/useDismissOnEscape.d.ts

@@ -0,0 +1,11 @@
+/**
+ * While `active`, Escape calls `onDismiss` wherever focus is and is marked as handled
+ * (`preventDefault()`), so a window, fullscreen panel, Modal or Sheet around stays open
+ * until the next press. For content shown on hover or focus, such as a tooltip, which
+ * Escape must hide without moving the pointer or focus (WCAG 1.4.13).
+ *
+ * The listener runs in the capture phase on `document`: those surfaces listen on
+ * `document` in the bubble phase, and one opened before the content showed would
+ * otherwise see the key first.
+ */
+export declare function useDismissOnEscape(active: boolean, onDismiss: () => void): void;