@smwb/ui-react 2.6.3 → 2.8.0

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;

package/dist/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/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/hooks/useFocusTrap.d.ts

@@ -1,4 +1,6 @@
 import { RefObject } from "react";
+/** Elements in the Tab order (hidden ones match too). */
+export declare const FOCUSABLE = "a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";
 export interface UseFocusTrapOptions {
     /** Trap is active only while true. */
     active: boolean;

package/dist/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/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/hooks/useHelperText.d.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+/**
+ * Whether `helperText` is shown under its control, so that it describes the control. TextFieldWrapper shows none for
+ * an inline field, and without helper text it draws a blank line in its place, which describes nothing.
+ */
+export declare function hasHelperText(helperText: React.ReactNode, inline?: boolean): boolean;
+export interface HelperTextOptions {
+    /** The field is inline: TextFieldWrapper draws no helper text for it. */
+    inline?: boolean;
+    /** The caller's own `aria-describedby`, kept after the helper text. */
+    describedBy?: string;
+}
+/**
+ * Links a control to the helper text drawn under it, by TextFieldWrapper or by the component itself (Rating). Put
+ * `id` on the helper text (TextFieldWrapper takes it as `helperTextId`) and `describedBy` on the control's
+ * `aria-describedby`: the helper text's id while it is shown, then the caller's own ids.
+ */
+export declare function useHelperText(helperText: React.ReactNode, { inline, describedBy }?: HelperTextOptions): {
+    id: string;
+    describedBy: string | undefined;
+};

package/dist/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/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/hooks/useSafeLayoutEffect.d.ts

@@ -1,2 +1,8 @@
 import React from "react";
-export declare const useSafeLayoutEffect: typeof React.useEffect;
+/**
+ * `useLayoutEffect` in the browser, `useEffect` where there is no `window` (a
+ * server render), so React does not warn that a layout effect does nothing on
+ * the server. Decided per call rather than once at import: the environment of
+ * the render is what counts, and a render never switches between the two.
+ */
+export declare function useSafeLayoutEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;

package/dist/hooks/useSafeLayoutEffect.js

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

package/dist/hooks/useSafeLayoutEffect.js.map

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

package/dist/icons/catalog.d.ts

@@ -11,4 +11,4 @@ export declare const iconCategories: readonly ["action", "commerce", "communicat
 export type IconCategory = (typeof iconCategories)[number];
 export declare const iconCatalog: readonly IconCatalogEntry[];
 /** Total number of icons in the smwb set. */
-export declare const iconCount = 294;
+export declare const iconCount = 305;

package/dist/icons/catalog.js

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