@smwb/ui-react 2.7.0 → 2.8.0

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;"}