@smwb/ui-react 2.8.0 → 2.9.0

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

@@ -1,48 +1,53 @@
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import t from "clsx";
-const x = h(function({
-  className: d,
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import m from "clsx";
+const B = v(function({
+  className: b,
   children: s,
-  dense: i,
-  position: b = "static",
+  dense: o,
+  position: w = "static",
   placement: r = "top",
   leftContent: l,
-  midContent: c,
-  midContentAlign: n = "middle",
-  rightContent: o,
-  title: e,
-  color: p = "default",
-  "data-testid": _ = "app-bar",
-  ...f
-}, w) {
+  midContent: n,
+  midContentAlign: c = "middle",
+  rightContent: _,
+  title: p,
+  titleAs: f = "div",
+  variant: t = "default",
+  windowControls: e = "auto",
+  color: d = "default",
+  "data-testid": u = "app-bar",
+  ...h
+}, N) {
   return /* @__PURE__ */ a(
     r === "top" ? "header" : "footer",
     {
-      ref: w,
-      className: t(
+      ref: N,
+      className: m(
         "smwb-appbar",
-        d,
-        `smwb-${b}`,
+        b,
+        `smwb-${w}`,
         `smwb-${r}`,
-        { "smwb-dense": i },
-        p !== "default" && `smwb-appbar_color-${p}`
+        { "smwb-dense": o },
+        d !== "default" && `smwb-appbar_color-${d}`,
+        t === "window" && "smwb-appbar_variant-window",
+        t === "window" && e !== "auto" && `smwb-appbar_window-controls-${e}`
       ),
-      "data-testid": _,
-      ...f,
-      children: s || /* @__PURE__ */ m("div", { className: "smwb-appbar__inner", children: [
-        /* @__PURE__ */ m("div", { className: "smwb-appbar__left", children: [
-          e && /* @__PURE__ */ a("div", { className: "smwb-appbar__left__title", children: e }),
+      "data-testid": u,
+      ...h,
+      children: s || /* @__PURE__ */ i("div", { className: "smwb-appbar__inner", children: [
+        /* @__PURE__ */ i("div", { className: "smwb-appbar__left", children: [
+          p && /* @__PURE__ */ a(f, { className: "smwb-appbar__left__title", children: p }),
           l
         ] }),
-        /* @__PURE__ */ a("div", { className: t("smwb-appbar__mid", `smwb-${n}`), children: c }),
-        /* @__PURE__ */ a("div", { className: "smwb-appbar__right", children: o })
+        /* @__PURE__ */ a("div", { className: m("smwb-appbar__mid", `smwb-${c}`), children: n }),
+        /* @__PURE__ */ a("div", { className: "smwb-appbar__right", children: _ })
       ] })
     }
   );
 });
 export {
-  x as AppBar,
-  x as default
+  B as AppBar,
+  B as default
 };
 //# sourceMappingURL=appBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"appBar.js","sources":["../../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cn from \"clsx\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  children?: React.ReactNode;\n  className?: string;\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: React.ReactNode;\n  midContent?: React.ReactNode;\n  rightContent?: React.ReactNode;\n  title?: React.ReactNode | string;\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n  /** Test id of the root (`<header>`, or `<footer>` at the bottom); `app-bar` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar(\n  {\n    className,\n    children,\n    dense,\n    position = \"static\",\n    placement = \"top\",\n    leftContent,\n    midContent,\n    midContentAlign = \"middle\",\n    rightContent,\n    title,\n    color = \"default\",\n    \"data-testid\": dataTestId = \"app-bar\",\n    ...rest\n  },\n  ref\n) {\n  const MainTag = placement === \"top\" ? \"header\" : \"footer\";\n\n  return (\n    <MainTag\n      ref={ref}\n      className={cn(\n        \"smwb-appbar\",\n        className,\n        `smwb-${position}`,\n        `smwb-${placement}`,\n        { \"smwb-dense\": dense },\n        color !== \"default\" && `smwb-appbar_color-${color}`\n      )}\n      data-testid={dataTestId}\n      {...rest}\n    >\n      {children ? (\n        children\n      ) : (\n        <div className=\"smwb-appbar__inner\">\n          <div className=\"smwb-appbar__left\">\n            {title && <div className=\"smwb-appbar__left__title\">{title}</div>}\n            {leftContent}\n          </div>\n          <div className={cn(\"smwb-appbar__mid\", `smwb-${midContentAlign}`)}>{midContent}</div>\n          <div className=\"smwb-appbar__right\">{rightContent}</div>\n        </div>\n      )}\n    </MainTag>\n  );\n});\n\nexport default AppBar;\n"],"names":["AppBar","forwardRef","className","children","dense","position","placement","leftContent","midContent","midContentAlign","rightContent","title","color","dataTestId","rest","ref","jsx","cn","jsxs"],"mappings":";;;AAsBO,MAAMA,IAASC,EAAqC,SACzD;AAAA,EACE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AAGA,SACE,gBAAAC;AAAA,IAHcV,MAAc,QAAQ,WAAW;AAAA,IAG9C;AAAA,MACC,KAAAS;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAf;AAAA,QACA,QAAQG,CAAQ;AAAA,QAChB,QAAQC,CAAS;AAAA,QACjB,EAAE,cAAcF,EAAA;AAAA,QAChBQ,MAAU,aAAa,qBAAqBA,CAAK;AAAA,MAAA;AAAA,MAEnD,eAAaC;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAAX,KAGC,gBAAAe,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,UAAAP,KAAS,gBAAAK,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAL,GAAM;AAAA,UAC1DJ;AAAA,QAAA,GACH;AAAA,QACA,gBAAAS,EAAC,SAAI,WAAWC,EAAG,oBAAoB,QAAQR,CAAe,EAAE,GAAI,UAAAD,EAAA,CAAW;AAAA,QAC/E,gBAAAQ,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAN,EAAA,CAAa;AAAA,MAAA,EAAA,CACpD;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"appBar.js","sources":["../../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cn from \"clsx\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  children?: React.ReactNode;\n  className?: string;\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: React.ReactNode;\n  midContent?: React.ReactNode;\n  rightContent?: React.ReactNode;\n  title?: React.ReactNode | string;\n  /**\n   * Tag the `title` is rendered in: a `div` (default) or a heading, `h1`–`h6`,\n   * for the page's main heading. Only the tag changes — a heading is drawn with\n   * the bar's own font size, weight and no margins, so it looks exactly like the\n   * div. The heading's text is the `title` itself, so pass a string or plain\n   * markup rather than a `Typography` heading.\n   */\n  titleAs?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /**\n   * `window`: the bar is the title bar of a desktop app window (Electron, Tauri, an installed PWA with Window\n   * Controls Overlay). The bar drags the window; buttons, links, fields and other controls in it stay clickable,\n   * and room is left for the OS window buttons (`windowControls`). In a plain browser tab it looks like `default`.\n   */\n  variant?: \"default\" | \"window\";\n  /**\n   * With `variant=\"window\"`: where the OS window buttons are, so the bar's content keeps clear of them.\n   * `auto` (default) takes the area from the shell's `env(titlebar-area-*)` (Window Controls Overlay, Electron\n   * `titleBarOverlay`) and reserves nothing without it; `left` is macOS (traffic lights, `titleBarStyle: \"hiddenInset\"`),\n   * `right` is Windows/Linux caption buttons drawn by the OS; `none` reserves nothing. The reserved width is\n   * the `--smui-appBarWindowControlsWidth` custom property (64px on the left, 138px on the right by default).\n   */\n  windowControls?: \"auto\" | \"left\" | \"right\" | \"none\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n  /** Test id of the root (`<header>`, or `<footer>` at the bottom); `app-bar` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar(\n  {\n    className,\n    children,\n    dense,\n    position = \"static\",\n    placement = \"top\",\n    leftContent,\n    midContent,\n    midContentAlign = \"middle\",\n    rightContent,\n    title,\n    titleAs: TitleTag = \"div\",\n    variant = \"default\",\n    windowControls = \"auto\",\n    color = \"default\",\n    \"data-testid\": dataTestId = \"app-bar\",\n    ...rest\n  },\n  ref\n) {\n  const MainTag = placement === \"top\" ? \"header\" : \"footer\";\n\n  return (\n    <MainTag\n      ref={ref}\n      className={cn(\n        \"smwb-appbar\",\n        className,\n        `smwb-${position}`,\n        `smwb-${placement}`,\n        { \"smwb-dense\": dense },\n        color !== \"default\" && `smwb-appbar_color-${color}`,\n        variant === \"window\" && \"smwb-appbar_variant-window\",\n        variant === \"window\" && windowControls !== \"auto\" && `smwb-appbar_window-controls-${windowControls}`\n      )}\n      data-testid={dataTestId}\n      {...rest}\n    >\n      {children ? (\n        children\n      ) : (\n        <div className=\"smwb-appbar__inner\">\n          <div className=\"smwb-appbar__left\">\n            {title && <TitleTag className=\"smwb-appbar__left__title\">{title}</TitleTag>}\n            {leftContent}\n          </div>\n          <div className={cn(\"smwb-appbar__mid\", `smwb-${midContentAlign}`)}>{midContent}</div>\n          <div className=\"smwb-appbar__right\">{rightContent}</div>\n        </div>\n      )}\n    </MainTag>\n  );\n});\n\nexport default AppBar;\n"],"names":["AppBar","forwardRef","className","children","dense","position","placement","leftContent","midContent","midContentAlign","rightContent","title","TitleTag","variant","windowControls","color","dataTestId","rest","ref","jsx","cn","jsxs"],"mappings":";;;AA4CO,MAAMA,IAASC,EAAqC,SACzD;AAAA,EACE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAASC,IAAW;AAAA,EACpB,SAAAC,IAAU;AAAA,EACV,gBAAAC,IAAiB;AAAA,EACjB,OAAAC,IAAQ;AAAA,EACR,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AAGA,SACE,gBAAAC;AAAA,IAHcb,MAAc,QAAQ,WAAW;AAAA,IAG9C;AAAA,MACC,KAAAY;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAlB;AAAA,QACA,QAAQG,CAAQ;AAAA,QAChB,QAAQC,CAAS;AAAA,QACjB,EAAE,cAAcF,EAAA;AAAA,QAChBW,MAAU,aAAa,qBAAqBA,CAAK;AAAA,QACjDF,MAAY,YAAY;AAAA,QACxBA,MAAY,YAAYC,MAAmB,UAAU,+BAA+BA,CAAc;AAAA,MAAA;AAAA,MAEpG,eAAaE;AAAA,MACZ,GAAGC;AAAA,MAEH,UAAAd,KAGC,gBAAAkB,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,UAAAV,KAAS,gBAAAQ,EAACP,GAAA,EAAS,WAAU,4BAA4B,UAAAD,GAAM;AAAA,UAC/DJ;AAAA,QAAA,GACH;AAAA,QACA,gBAAAY,EAAC,SAAI,WAAWC,EAAG,oBAAoB,QAAQX,CAAe,EAAE,GAAI,UAAAD,EAAA,CAAW;AAAA,QAC/E,gBAAAW,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAT,EAAA,CAAa;AAAA,MAAA,EAAA,CACpD;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

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

@@ -0,0 +1,335 @@
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as Je, useState as f, useRef as s, useCallback as z, useMemo as we, useEffect as E } from "react";
+import F from "clsx";
+import { useControllableState as Ne } from "../../../hooks/useControllableState.js";
+import { useEventCallback as Ze } from "../../../hooks/useEventCallback.js";
+import { useId as et } from "../../../hooks/useId.js";
+import { useSafeLayoutEffect as tt } from "../../../hooks/useSafeLayoutEffect.js";
+import { commandPaletteFilter as nt } from "./commandPaletteFilter.js";
+import { firstOption as at, keepInView as lt, moveOption as ot } from "./commandPaletteNavigation.js";
+import { Modal as st } from "../../feedBack/modal/modal.js";
+import { Icon as Ce } from "../../base/icon/icon.js";
+import { Kbd as rt } from "../../dataDisplay/kbd/kbd.js";
+import { Skeleton as V } from "../../feedBack/skeleton/skeleton.js";
+const it = "recent", D = [], xe = 10, ct = 500, dt = 3, mt = (r) => r === 1 ? "1 result" : `${r} results`, Re = (r) => {
+  var N;
+  return (N = r.id) != null ? N : r.label;
+}, ut = (r) => typeof r == "object" && r !== null && r.name === "AbortError", kt = Je(function(N, ke) {
+  const {
+    open: Oe,
+    defaultOpen: Pe = !1,
+    onOpenChange: Ae,
+    groups: Y = D,
+    recent: y,
+    recentLabel: X = "Recent",
+    query: $,
+    defaultQuery: I = "",
+    onQueryChange: Ee,
+    filter: T = nt,
+    source: H,
+    debounce: W = 200,
+    minQueryLength: J = 1,
+    loading: De = !1,
+    onSelect: S,
+    closeOnSelect: $e = !0,
+    placeholder: Ie = "Type a command or search…",
+    searchLabel: Te = "Search commands",
+    noResultsText: K = "No results",
+    errorText: L = "Couldn't load results",
+    resultsAnnouncement: Z,
+    footer: M,
+    className: Se,
+    "aria-label": Ke = "Command palette",
+    "aria-labelledby": ee,
+    "aria-describedby": te,
+    "data-testid": Le = "command-palette"
+  } = N, [i, ne] = Ne({
+    value: Oe,
+    defaultValue: Pe,
+    onChange: Ae
+  }), [b, Q] = Ne({
+    value: $,
+    defaultValue: I,
+    onChange: Ee
+  }), m = b.trim(), [ae, le] = f(D), [Me, C] = f(!1), [x, G] = f(!1), [q, R] = f(null), [Qe, oe] = f(""), [se, Ge] = f(0), re = et(void 0, "smwb-command-palette"), ie = `${re}-input`, k = `${re}-listbox`, ce = (e) => `${k}-option-${e}`, U = s(null), de = s(null), me = s([]), O = s(null), d = s(null), ue = s(null), [pe, qe] = f(null), Ue = z((e) => {
+    qe(e);
+  }, []), fe = s({ source: H, debounce: W, minQueryLength: J });
+  fe.current = { source: H, debounce: W, minQueryLength: J };
+  const be = s(Z);
+  be.current = Z;
+  const he = s(b);
+  he.current = b;
+  const ye = s({ defaultQuery: I, controlled: $ !== void 0 });
+  ye.current = { defaultQuery: I, controlled: $ !== void 0 };
+  const _e = s(-1), { sections: je, rows: c } = we(() => {
+    const e = [], n = [], l = (t, o) => {
+      if (o.length === 0)
+        return;
+      const v = [];
+      for (const w of o) {
+        const h = { group: t, item: w, key: `${Re(t)}\0${w.id}`, index: n.length };
+        n.push(h), v.push(h);
+      }
+      e.push({ group: t, rows: v });
+    };
+    m === "" && y !== void 0 && y.length > 0 && l({ id: it, label: X, items: y }, y);
+    for (const t of Y)
+      l(t, T === !1 ? t.items : t.items.filter((o) => T(o, b)));
+    for (const t of ae)
+      l(t, t.items);
+    return { sections: e, rows: n };
+  }, [m, y, X, Y, T, b, ae]), j = z((e) => {
+    var n;
+    return !((n = c[e]) != null && n.item.disabled);
+  }, [c]), u = we(() => {
+    if (q !== null) {
+      const e = c.find((n) => n.key === q);
+      if (e !== void 0 && !e.item.disabled)
+        return e.index;
+    }
+    return at(c.length, j);
+  }, [c, q, j]);
+  _e.current = u;
+  const _ = De || Me, P = c.length > 0, Be = u >= 0 ? ce(u) : void 0;
+  E(() => {
+    var e;
+    pe !== null && ((e = U.current) == null || e.focus({ preventScroll: !0 }));
+  }, [pe]);
+  const ge = s(i);
+  E(() => {
+    const e = i && !ge.current;
+    if (ge.current = i, e) {
+      R(null);
+      const { defaultQuery: n, controlled: l } = ye.current;
+      !l && he.current !== n && Q(n);
+    } else i || R(null);
+  }, [i, Q]);
+  const g = z(() => {
+    O.current !== null && (clearTimeout(O.current), O.current = null), d.current !== null && (d.current.abort(), d.current = null);
+  }, []);
+  E(() => {
+    if (g(), le((t) => t.length === 0 ? t : D), G((t) => t && !1), C((t) => t && !1), !i)
+      return g;
+    const { source: e, debounce: n, minQueryLength: l } = fe.current;
+    return e === void 0 || m.length < l || (C(!0), O.current = setTimeout(() => {
+      const t = new AbortController();
+      d.current = t, e(m, { signal: t.signal }).then(
+        (o) => {
+          d.current !== t || t.signal.aborted || (d.current = null, C(!1), G(!1), le(o != null ? o : D));
+        },
+        (o) => {
+          d.current !== t || t.signal.aborted || ut(o) || (d.current = null, C(!1), G(!0));
+        }
+      );
+    }, n)), g;
+  }, [i, m, g]);
+  const B = c.length;
+  E(() => {
+    let e = null;
+    return !i || m === "" ? oe("") : _ || (e = setTimeout(() => {
+      var n;
+      oe(
+        x ? L : B === 0 ? K : ((n = be.current) != null ? n : mt)(B)
+      );
+    }, ct)), () => {
+      e !== null && clearTimeout(e);
+    };
+  }, [i, m, _, x, L, K, B]), tt(() => {
+    if (se === 0)
+      return;
+    const e = me.current[_e.current];
+    e && lt(e, de.current);
+  }, [se]);
+  const ze = Ze(() => {
+    ne(!1);
+  }), Fe = (e) => {
+    Q(e.currentTarget.value);
+  }, Ve = (e) => {
+    const n = c[e];
+    n === void 0 || e === u || (R(n.key), Ge((l) => l + 1));
+  }, A = (e) => {
+    Ve(ot(c.length, j, u, e));
+  }, ve = (e) => {
+    var l, t;
+    const n = c[e];
+    n === void 0 || n.item.disabled || ($e && ne(!1), (t = (l = n.item).onSelect) == null || t.call(l), S == null || S(n.item, n.group));
+  }, Ye = (e) => {
+    if (e.nativeEvent.isComposing || e.keyCode === 229) {
+      e.key === "Escape" && e.preventDefault();
+      return;
+    }
+    if (!(e.ctrlKey || e.metaKey || e.altKey || e.shiftKey))
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), A(1);
+          return;
+        case "ArrowUp":
+          e.preventDefault(), A(-1);
+          return;
+        case "PageDown":
+          e.preventDefault(), A(xe);
+          return;
+        case "PageUp":
+          e.preventDefault(), A(-xe);
+          return;
+        case "Enter":
+          e.preventDefault(), ve(u);
+          return;
+        default:
+          return;
+      }
+  }, Xe = (e) => {
+    e.target !== U.current && e.preventDefault();
+  }, He = (e, n) => {
+    const l = ue.current;
+    l !== null && l.x === e.clientX && l.y === e.clientY || (ue.current = { x: e.clientX, y: e.clientY }, !n.item.disabled && R(n.key));
+  }, We = { "data-testid": Le };
+  return /* @__PURE__ */ a(
+    st,
+    {
+      ref: ke,
+      open: i,
+      onClose: ze,
+      size: "medium",
+      animation: "fade",
+      backdrop: "dark",
+      closeOnEsc: !0,
+      closeOnOutsideClick: !0,
+      className: F("smwb-command-palette", Se),
+      ...ee === void 0 ? { "aria-label": Ke } : { "aria-labelledby": ee },
+      ...te === void 0 ? {} : { "aria-describedby": te },
+      ...We,
+      children: /* @__PURE__ */ p("div", { className: "smwb-command-palette__panel", ref: Ue, onMouseDown: Xe, children: [
+        /* @__PURE__ */ p("div", { className: "smwb-command-palette__search", children: [
+          /* @__PURE__ */ a("span", { className: "smwb-command-palette__search-icon", "aria-hidden": "true", children: /* @__PURE__ */ a(Ce, { name: "search", size: 20 }) }),
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ref: U,
+              id: ie,
+              className: "smwb-command-palette__input",
+              type: "text",
+              role: "combobox",
+              "data-testid": "command-palette-input",
+              placeholder: Ie,
+              value: b,
+              "aria-label": Te,
+              "aria-autocomplete": "list",
+              "aria-expanded": P,
+              "aria-controls": P ? k : void 0,
+              "aria-activedescendant": Be,
+              autoComplete: "off",
+              autoCapitalize: "off",
+              enterKeyHint: "go",
+              spellCheck: !1,
+              onChange: Fe,
+              onKeyDown: Ye
+            }
+          )
+        ] }),
+        /* @__PURE__ */ p(
+          "div",
+          {
+            className: "smwb-command-palette__results",
+            ref: de,
+            tabIndex: -1,
+            "data-testid": "command-palette-results",
+            children: [
+              P ? /* @__PURE__ */ a(
+                "ul",
+                {
+                  id: k,
+                  className: "smwb-command-palette__listbox",
+                  role: "listbox",
+                  "aria-labelledby": ie,
+                  "aria-busy": _ || void 0,
+                  "data-testid": "command-palette-listbox",
+                  children: je.map((e, n) => {
+                    const l = `${k}-group-${n}`;
+                    return /* @__PURE__ */ p(
+                      "li",
+                      {
+                        className: "smwb-command-palette__group",
+                        role: "group",
+                        "aria-labelledby": l,
+                        children: [
+                          /* @__PURE__ */ a("div", { className: "smwb-command-palette__group-label", id: l, children: e.group.label }),
+                          /* @__PURE__ */ a("ul", { className: "smwb-command-palette__group-options", role: "presentation", children: e.rows.map((t) => {
+                            const o = ce(t.index), v = t.index === u, w = [
+                              t.item.subtitle === void 0 ? "" : `${o}-subtitle`,
+                              t.item.shortcut === void 0 ? "" : `${o}-shortcut`
+                            ].filter(Boolean).join(" ");
+                            return /* @__PURE__ */ p(
+                              "li",
+                              {
+                                ref: (h) => {
+                                  me.current[t.index] = h;
+                                },
+                                id: o,
+                                className: F(
+                                  "smwb-command-palette__item",
+                                  v && "smwb-command-palette__item_active",
+                                  t.item.disabled && "smwb-command-palette__item_disabled"
+                                ),
+                                role: "option",
+                                "aria-labelledby": `${o}-label`,
+                                "aria-describedby": w === "" ? void 0 : w,
+                                "aria-selected": v || void 0,
+                                "aria-disabled": t.item.disabled || void 0,
+                                "data-item-id": t.item.id,
+                                "data-testid": "command-palette-option",
+                                onClick: () => ve(t.index),
+                                onPointerMove: (h) => He(h, t),
+                                children: [
+                                  t.item.icon === void 0 ? null : /* @__PURE__ */ a("span", { className: "smwb-command-palette__item-icon", "aria-hidden": "true", children: typeof t.item.icon == "string" ? /* @__PURE__ */ a(Ce, { name: t.item.icon }) : t.item.icon }),
+                                  /* @__PURE__ */ p("span", { className: "smwb-command-palette__item-text", children: [
+                                    /* @__PURE__ */ a("span", { className: "smwb-command-palette__item-label", id: `${o}-label`, children: t.item.label }),
+                                    t.item.subtitle === void 0 ? null : /* @__PURE__ */ a("span", { className: "smwb-command-palette__item-subtitle", id: `${o}-subtitle`, children: t.item.subtitle })
+                                  ] }),
+                                  t.item.shortcut === void 0 ? null : /* @__PURE__ */ a(
+                                    rt,
+                                    {
+                                      keys: t.item.shortcut,
+                                      id: `${o}-shortcut`,
+                                      className: "smwb-command-palette__item-shortcut"
+                                    }
+                                  )
+                                ]
+                              },
+                              t.key
+                            );
+                          }) })
+                        ]
+                      },
+                      `${Re(e.group)}-${n}`
+                    );
+                  })
+                }
+              ) : null,
+              _ ? /* @__PURE__ */ a("div", { className: "smwb-command-palette__loading", "aria-hidden": "true", "data-testid": "command-palette-loading", children: Array.from({ length: dt }, (e, n) => /* @__PURE__ */ p("div", { className: "smwb-command-palette__loading-row", children: [
+                /* @__PURE__ */ a(V, { variant: "circular", width: 20, height: 20 }),
+                /* @__PURE__ */ a(V, { variant: "text", width: "60%" }),
+                /* @__PURE__ */ a(V, { variant: "text", width: "40%" })
+              ] }, n)) }) : null,
+              x ? /* @__PURE__ */ a(
+                "div",
+                {
+                  className: F("smwb-command-palette__message", "smwb-command-palette__message_error"),
+                  "data-testid": "command-palette-error",
+                  children: L
+                }
+              ) : null,
+              !_ && !x && !P ? /* @__PURE__ */ a("div", { className: "smwb-command-palette__message", "data-testid": "command-palette-empty", children: K }) : null
+            ]
+          }
+        ),
+        M == null ? null : /* @__PURE__ */ a("div", { className: "smwb-command-palette__footer", "data-testid": "command-palette-footer", children: M }),
+        /* @__PURE__ */ a("div", { className: "smwb-command-palette__status", role: "status", "data-testid": "command-palette-status", children: Qe })
+      ] })
+    }
+  );
+});
+export {
+  kt as CommandPalette
+};
+//# sourceMappingURL=commandPalette.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"commandPalette.js","sources":["../../../../../src/components/navigation/commandPalette/commandPalette.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { Kbd } from \"../../dataDisplay/kbd\";\nimport { Modal } from \"../../feedBack/modal\";\nimport { Skeleton } from \"../../feedBack/skeleton\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { useEventCallback } from \"../../../hooks/useEventCallback\";\nimport { useId } from \"../../../hooks/useId\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { commandPaletteFilter } from \"./commandPaletteFilter\";\nimport { firstOption, keepInView, moveOption } from \"./commandPaletteNavigation\";\nimport type {\n  CommandPaletteFilter,\n  CommandPaletteGroup,\n  CommandPaletteItem,\n  CommandPaletteSource,\n} from \"./commandPaletteTypes\";\n\nexport interface CommandPaletteProps {\n  /** Controlled open state. The palette is controlled while this is not `undefined`. */\n  open?: boolean;\n  /** Open state used while `open` is `undefined`; `false` by default. */\n  defaultOpen?: boolean;\n  /**\n   * Called for every request to open or close: Escape, a backdrop click, and choosing an item\n   * while `closeOnSelect`. Called in the controlled and in the uncontrolled mode.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /** Static groups, filtered locally by `filter`. A group left with no items is hidden, heading included. */\n  groups?: CommandPaletteGroup[];\n  /**\n   * Recently used items, kept by the app: it owns the list and updates it from `onSelect`. Shown as\n   * the first group while the trimmed query is empty, never filtered, and hidden while searching.\n   */\n  recent?: CommandPaletteItem[];\n  /** Heading of the recent group; `\"Recent\"` by default. That group is `{ id: \"recent\", label: recentLabel, items: recent }` in `onSelect`. */\n  recentLabel?: string;\n  /** Controlled query. The palette is controlled while this is not `undefined`. */\n  query?: string;\n  /**\n   * Query used while `query` is `undefined`; `\"\"` by default. An uncontrolled field goes back to it\n   * each time the palette opens.\n   */\n  defaultQuery?: string;\n  /** Called for every edit of the field, in the controlled and in the uncontrolled mode. */\n  onQueryChange?: (query: string) => void;\n  /**\n   * Local matching of `groups`; {@link commandPaletteFilter} by default (every word of the query\n   * occurs in the label, the subtitle or a keyword, ignoring case and accents). `false` shows\n   * `groups` as given, for an app that filters or ranks them itself. Never applied to `recent` or\n   * to the results of `source`.\n   */\n  filter?: CommandPaletteFilter | false;\n  /**\n   * Loads results for the trimmed query, appended after the static groups. Called after `debounce`\n   * milliseconds of quiet typing and only for a query of at least `minQueryLength` characters;\n   * `signal` is aborted when a newer query, a close or an unmount makes the answer useless. While a\n   * request is pending its predecessors' groups are not shown, and a rejection that is not an abort\n   * shows `errorText`.\n   */\n  source?: CommandPaletteSource;\n  /** Milliseconds of quiet typing before `source` is called; `200` by default. */\n  debounce?: number;\n  /**\n   * `source` is called only when the trimmed query has at least this many characters; `1` by\n   * default, so an empty query loads nothing. `0` also loads for the empty query.\n   */\n  minQueryLength?: number;\n  /** App-driven loading: shows the skeleton like a pending `source`; `false` by default. */\n  loading?: boolean;\n  /**\n   * Called for every chosen item, after the item's own `onSelect`. The place for the app to run the\n   * command and to update its `recent` list.\n   */\n  onSelect?: (item: CommandPaletteItem, group: CommandPaletteGroup) => void;\n  /** Ask to close (`onOpenChange(false)`) when an item is chosen; `true` by default. */\n  closeOnSelect?: boolean;\n  /** Placeholder of the field; `\"Type a command or search…\"` by default. It is not the field's name. */\n  placeholder?: string;\n  /** Accessible name of the field and, through `aria-labelledby`, of the listbox; `\"Search commands\"` by default. */\n  searchLabel?: string;\n  /** Shown and announced when nothing matches; `\"No results\"` by default. */\n  noResultsText?: string;\n  /** Shown and announced when `source` rejects; `\"Couldn't load results\"` by default. */\n  errorText?: string;\n  /**\n   * Text of the polite status once a search has settled; `\"1 result\"` / `\"N results\"` by default.\n   * Not used for zero results, which announce `noResultsText`.\n   */\n  resultsAnnouncement?: (count: number) => string;\n  /** Slot under the results, e.g. key hints built with `Kbd`. Drawn only when given. */\n  footer?: React.ReactNode;\n  /** Added to the dialog element, after `smwb-command-palette`. */\n  className?: string;\n  /** Name of the dialog; `\"Command palette\"` by default. Not set when `aria-labelledby` is given. */\n  \"aria-label\"?: string;\n  /** Id of the element that names the dialog. Wins over `aria-label`. */\n  \"aria-labelledby\"?: string;\n  /** Id of the element that describes the dialog. */\n  \"aria-describedby\"?: string;\n  /** Test id of the dialog element; `\"command-palette\"` unless given. */\n  \"data-testid\"?: string;\n}\n\n/** One drawn option: the item, the group it is drawn under, and where it sits in the flat list. */\ninterface Row {\n  group: CommandPaletteGroup;\n  item: CommandPaletteItem;\n  /** Group key and item id: keeps the row active while the results change under it. */\n  key: string;\n  /** Position among the drawn options; names the option's id. */\n  index: number;\n}\n\n/** One drawn group and its rows. */\ninterface Section {\n  group: CommandPaletteGroup;\n  rows: Row[];\n}\n\nconst RECENT_GROUP_ID = \"recent\";\nconst NO_GROUPS: CommandPaletteGroup[] = [];\n/** PageDown/PageUp move this many options, as the select field's listbox does. */\nconst PAGE_STEP = 10;\n/** Quiet moment before a settled search is announced, so fast typing makes no chatter. */\nconst ANNOUNCE_DELAY = 500;\nconst LOADING_ROWS = 3;\n\nconst defaultResultsAnnouncement = (count: number): string => (count === 1 ? \"1 result\" : `${count} results`);\n\nconst groupKeyOf = (group: CommandPaletteGroup): string => group.id ?? group.label;\n\n/** A rejection caused by the palette's own abort is not an error state. */\nconst isAbortError = (error: unknown): boolean =>\n  typeof error === \"object\" && error !== null && (error as { name?: unknown }).name === \"AbortError\";\n\n/**\n * The ⌘K palette: a modal dialog with one search field and grouped results, driven by the keyboard.\n *\n * ArrowUp/ArrowDown (and PageUp/PageDown) move the active option, Enter runs it, Escape closes the\n * palette — all of it on the field, which keeps the focus the whole time (`aria-activedescendant`\n * points at the active option). Results come from `groups`, filtered locally, from `recent` while\n * the query is empty, and from an async `source` that is debounced and aborted on a newer query,\n * with skeleton rows while it loads plus empty and error states.\n *\n * The palette does not bind ⌘K itself: the app does it once, with `useKeyboardShortcut`, and draws\n * the same keys with `Kbd`.\n *\n * ```tsx\n * const [open, setOpen] = useState(false);\n * useKeyboardShortcut({ keys: [\"Mod\", \"K\"], onTrigger: () => setOpen((was) => !was) });\n * <Button label=\"Search\" onClick={() => setOpen(true)} endIcon={<Kbd keys={[\"Mod\", \"K\"]} />} />\n * <CommandPalette open={open} onOpenChange={setOpen} groups={groups} recent={recent} onSelect={run} />\n * ```\n *\n * Filtering and rendering are linear, so an app with a long list should cap its groups (50 items is\n * a good ceiling) or rank on the server and pass `filter={false}`.\n */\nexport const CommandPalette = forwardRef<HTMLDivElement, CommandPaletteProps>(function CommandPalette(props, ref) {\n  const {\n    open: openProp,\n    defaultOpen = false,\n    onOpenChange,\n    groups = NO_GROUPS,\n    recent,\n    recentLabel = \"Recent\",\n    query: queryProp,\n    defaultQuery = \"\",\n    onQueryChange,\n    filter = commandPaletteFilter,\n    source,\n    debounce: debounceMs = 200,\n    minQueryLength = 1,\n    loading = false,\n    onSelect,\n    closeOnSelect = true,\n    placeholder = \"Type a command or search…\",\n    searchLabel = \"Search commands\",\n    noResultsText = \"No results\",\n    errorText = \"Couldn't load results\",\n    resultsAnnouncement,\n    footer,\n    className,\n    \"aria-label\": ariaLabel = \"Command palette\",\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"data-testid\": dataTestId = \"command-palette\",\n  } = props;\n\n  const [open, setOpen] = useControllableState<boolean>({\n    value: openProp,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const [query, setQuery] = useControllableState<string>({\n    value: queryProp,\n    defaultValue: defaultQuery,\n    onChange: onQueryChange,\n  });\n  const trimmed = query.trim();\n\n  // The async answer of the current query, whether it is loading, and whether it failed. Cleared on\n  // every query change, so groups of another query are never shown.\n  const [asyncGroups, setAsyncGroups] = useState<CommandPaletteGroup[]>(NO_GROUPS);\n  const [asyncPending, setAsyncPending] = useState(false);\n  const [asyncFailed, setAsyncFailed] = useState(false);\n  // The key of the option the user is on; the drawn index is derived from it (see `activeIndex`).\n  const [activeKey, setActiveKey] = useState<string | null>(null);\n  const [status, setStatus] = useState(\"\");\n  // Bumped by a keyboard move: the effect keyed on it scrolls the active option into view.\n  const [scrollTick, setScrollTick] = useState(0);\n\n  // One id call in the palette body, not in the portaled panel, so the server and the client\n  // consume ids in the same order.\n  const uid = useId(undefined, \"smwb-command-palette\");\n  const inputId = `${uid}-input`;\n  const listboxId = `${uid}-listbox`;\n  const optionIdAt = (index: number): string => `${listboxId}-option-${index}`;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const resultsRef = useRef<HTMLDivElement>(null);\n  const optionRefs = useRef<Array<HTMLLIElement | null>>([]);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const controllerRef = useRef<AbortController | null>(null);\n  const lastPointerRef = useRef<{ x: number; y: number } | null>(null);\n\n  // The panel element as state, used only to focus the field once the portaled panel lands: Modal\n  // portals its content a commit after `open`, and jsdom has no layout, so Modal's `autoFocus` would\n  // stop at the dialog itself there. In a browser the field is already the dialog's first tab stop.\n  const [panelEl, setPanelEl] = useState<HTMLDivElement | null>(null);\n  const attachPanel = useCallback((element: HTMLDivElement | null) => {\n    setPanelEl(element);\n  }, []);\n\n  // Read at call time: a new function or number identity on each render must not start a request.\n  const sourceRef = useRef({ source, debounce: debounceMs, minQueryLength });\n  sourceRef.current = { source, debounce: debounceMs, minQueryLength };\n  const announceRef = useRef(resultsAnnouncement);\n  announceRef.current = resultsAnnouncement;\n  const queryRef = useRef(query);\n  queryRef.current = query;\n  const querySeedRef = useRef({ defaultQuery, controlled: queryProp !== undefined });\n  querySeedRef.current = { defaultQuery, controlled: queryProp !== undefined };\n  const activeIndexRef = useRef(-1);\n\n  // Rows in the order they are drawn: recent (empty query only), the static groups filtered, then\n  // the answer of `source`, which is already for this query. Empty groups are dropped.\n  const { sections, rows } = useMemo(() => {\n    const builtSections: Section[] = [];\n    const builtRows: Row[] = [];\n    const add = (group: CommandPaletteGroup, items: CommandPaletteItem[]) => {\n      if (items.length === 0) {\n        return;\n      }\n      const sectionRows: Row[] = [];\n      for (const item of items) {\n        const row: Row = { group, item, key: `${groupKeyOf(group)}\\u0000${item.id}`, index: builtRows.length };\n        builtRows.push(row);\n        sectionRows.push(row);\n      }\n      builtSections.push({ group, rows: sectionRows });\n    };\n\n    if (trimmed === \"\" && recent !== undefined && recent.length > 0) {\n      add({ id: RECENT_GROUP_ID, label: recentLabel, items: recent }, recent);\n    }\n    for (const group of groups) {\n      add(group, filter === false ? group.items : group.items.filter((item) => filter(item, query)));\n    }\n    for (const group of asyncGroups) {\n      add(group, group.items);\n    }\n    return { sections: builtSections, rows: builtRows };\n  }, [trimmed, recent, recentLabel, groups, filter, query, asyncGroups]);\n\n  const isEnabled = useCallback((index: number) => !rows[index]?.item.disabled, [rows]);\n\n  // The active option is kept by key, not by index: it stays while the results change under it, and\n  // falls back to the first enabled option. That option is active right away (APG list autocomplete\n  // with automatic selection), so Enter runs the top hit.\n  const activeIndex = useMemo(() => {\n    if (activeKey !== null) {\n      const kept = rows.find((row) => row.key === activeKey);\n      if (kept !== undefined && !kept.item.disabled) {\n        return kept.index;\n      }\n    }\n    return firstOption(rows.length, isEnabled);\n  }, [rows, activeKey, isEnabled]);\n  activeIndexRef.current = activeIndex;\n\n  const pending = loading || asyncPending;\n  const hasOptions = rows.length > 0;\n  const activeOptionId = activeIndex >= 0 ? optionIdAt(activeIndex) : undefined;\n\n  // Modal owns the focus trap and the focus return; the field is focused below rather than by the\n  // trap (jsdom has no layout, so the trap's `autoFocus` finds nothing there).\n  useEffect(() => {\n    if (panelEl !== null) {\n      inputRef.current?.focus({ preventScroll: true });\n    }\n  }, [panelEl]);\n\n  const wasOpenRef = useRef(open);\n  useEffect(() => {\n    const opened = open && !wasOpenRef.current;\n    wasOpenRef.current = open;\n    if (opened) {\n      setActiveKey(null);\n      const { defaultQuery: seed, controlled } = querySeedRef.current;\n      // An uncontrolled field goes back to its seed each time the palette opens. A controlled one is\n      // the parent's, so it is left alone and `onQueryChange` is not told about a reset it did not ask\n      // for when nothing changes.\n      if (!controlled && queryRef.current !== seed) {\n        setQuery(seed);\n      }\n    } else if (!open) {\n      setActiveKey(null);\n    }\n  }, [open, setQuery]);\n\n  const cancelPending = useCallback(() => {\n    if (timerRef.current !== null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n    if (controllerRef.current !== null) {\n      controllerRef.current.abort();\n      controllerRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    // Every new query, a close and an unmount drop what the previous one was loading: no timer may\n    // outlive the palette, and an answer to another query is never shown.\n    cancelPending();\n    setAsyncGroups((previous) => (previous.length === 0 ? previous : NO_GROUPS));\n    setAsyncFailed((previous) => (previous ? false : previous));\n    setAsyncPending((previous) => (previous ? false : previous));\n    if (!open) {\n      return cancelPending;\n    }\n    const { source: load, debounce: wait, minQueryLength: min } = sourceRef.current;\n    if (load === undefined || trimmed.length < min) {\n      return cancelPending;\n    }\n    setAsyncPending(true);\n    timerRef.current = setTimeout(() => {\n      const controller = new AbortController();\n      controllerRef.current = controller;\n      void load(trimmed, { signal: controller.signal }).then(\n        (loaded) => {\n          // A source that ignores `signal` is still safe: an answer is applied only while its own\n          // controller is the current one.\n          if (controllerRef.current !== controller || controller.signal.aborted) {\n            return;\n          }\n          controllerRef.current = null;\n          setAsyncPending(false);\n          setAsyncFailed(false);\n          setAsyncGroups(loaded ?? NO_GROUPS);\n        },\n        (error: unknown) => {\n          if (controllerRef.current !== controller || controller.signal.aborted || isAbortError(error)) {\n            return;\n          }\n          controllerRef.current = null;\n          setAsyncPending(false);\n          setAsyncFailed(true);\n        }\n      );\n    }, wait);\n    return cancelPending;\n  }, [open, trimmed, cancelPending]);\n\n  const optionCount = rows.length;\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout> | null = null;\n\n    if (!open || trimmed === \"\") {\n      setStatus(\"\");\n    } else if (!pending) {\n      // Loading is exposed by `aria-busy`; the count follows once the search settles.\n      timer = setTimeout(() => {\n        setStatus(\n          asyncFailed\n            ? errorText\n            : optionCount === 0\n              ? noResultsText\n              : (announceRef.current ?? defaultResultsAnnouncement)(optionCount)\n        );\n      }, ANNOUNCE_DELAY);\n    }\n\n    // Always return a cleanup to clear the timer if one was set. This ensures no timer outlives\n    // the component on unmount or close.\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer);\n      }\n    };\n  }, [open, trimmed, pending, asyncFailed, errorText, noResultsText, optionCount]);\n\n  // A keyboard move scrolls; a pointer move does not (the option is already where the pointer is).\n  useSafeLayoutEffect(() => {\n    if (scrollTick === 0) {\n      return;\n    }\n    const option = optionRefs.current[activeIndexRef.current];\n    if (option) {\n      keepInView(option, resultsRef.current);\n    }\n  }, [scrollTick]);\n\n  const handleClose = useEventCallback(() => {\n    setOpen(false);\n  });\n\n  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.currentTarget.value);\n  };\n\n  const moveTo = (index: number) => {\n    const row = rows[index];\n    if (row === undefined || index === activeIndex) {\n      return;\n    }\n    setActiveKey(row.key);\n    setScrollTick((tick) => tick + 1);\n  };\n\n  const move = (steps: number) => {\n    moveTo(moveOption(rows.length, isEnabled, activeIndex, steps));\n  };\n\n  const choose = (index: number) => {\n    const row = rows[index];\n    if (row === undefined || row.item.disabled) {\n      return;\n    }\n    // Close first, then run the handlers, so focus a handler moves wins over the palette's own\n    // focus return.\n    if (closeOnSelect) {\n      setOpen(false);\n    }\n    row.item.onSelect?.();\n    onSelect?.(row.item, row.group);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.nativeEvent.isComposing || event.keyCode === 229) {\n      // The composition owns the keys. Escape is marked handled so that it cancels the composition\n      // and Modal leaves the palette open.\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n      }\n      return;\n    }\n    // Modified keys stay with the browser and with the field: Shift+ArrowDown selects text,\n    // Alt+ArrowDown and Ctrl+Enter are the app's or the platform's.\n    if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) {\n      return;\n    }\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        move(1);\n        return;\n      case \"ArrowUp\":\n        event.preventDefault();\n        move(-1);\n        return;\n      case \"PageDown\":\n        event.preventDefault();\n        move(PAGE_STEP);\n        return;\n      case \"PageUp\":\n        event.preventDefault();\n        move(-PAGE_STEP);\n        return;\n      case \"Enter\":\n        // Always prevented: the palette is no form, and Enter without an active option does nothing.\n        event.preventDefault();\n        choose(activeIndex);\n        return;\n      default:\n        // Escape is not the palette's: Modal takes it when this overlay is the top layer and the\n        // event is unhandled. Everything else is native text editing. Never `stopPropagation()`\n        // here — it would hide Escape from Modal's document listener and Mod+K from the app's\n        // shortcut hook.\n        return;\n    }\n  };\n\n  // A press anywhere in the panel but on the field keeps the focus in the field: an option, a group\n  // label, the footer or the scrollbar must not blur it. The scrollbar still drags.\n  const handlePanelMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.target === inputRef.current) {\n      return;\n    }\n    event.preventDefault();\n  };\n\n  const handleOptionPointerMove = (event: React.PointerEvent<HTMLLIElement>, row: Row) => {\n    // Content scrolling under a resting pointer must not steal the active option, so only a move to\n    // new coordinates counts.\n    const last = lastPointerRef.current;\n    if (last !== null && last.x === event.clientX && last.y === event.clientY) {\n      return;\n    }\n    lastPointerRef.current = { x: event.clientX, y: event.clientY };\n    if (row.item.disabled) {\n      return;\n    }\n    setActiveKey(row.key);\n  };\n\n  // Modal spreads the attributes it does not declare onto the dialog element, so the test id travels\n  // as a plain attribute bag rather than as a change to Modal's props.\n  const dialogTestId = { \"data-testid\": dataTestId } as Record<string, unknown>;\n\n  return (\n    <Modal\n      ref={ref}\n      open={open}\n      onClose={handleClose}\n      size=\"medium\"\n      animation=\"fade\"\n      backdrop=\"dark\"\n      closeOnEsc\n      closeOnOutsideClick\n      className={cn(\"smwb-command-palette\", className)}\n      {...(ariaLabelledBy === undefined ? { \"aria-label\": ariaLabel } : { \"aria-labelledby\": ariaLabelledBy })}\n      {...(ariaDescribedBy === undefined ? {} : { \"aria-describedby\": ariaDescribedBy })}\n      {...dialogTestId}\n    >\n      <div className=\"smwb-command-palette__panel\" ref={attachPanel} onMouseDown={handlePanelMouseDown}>\n        <div className=\"smwb-command-palette__search\">\n          <span className=\"smwb-command-palette__search-icon\" aria-hidden=\"true\">\n            <Icon name=\"search\" size={20} />\n          </span>\n          <input\n            ref={inputRef}\n            id={inputId}\n            className=\"smwb-command-palette__input\"\n            type=\"text\"\n            role=\"combobox\"\n            data-testid=\"command-palette-input\"\n            placeholder={placeholder}\n            value={query}\n            aria-label={searchLabel}\n            aria-autocomplete=\"list\"\n            aria-expanded={hasOptions}\n            aria-controls={hasOptions ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            autoComplete=\"off\"\n            autoCapitalize=\"off\"\n            enterKeyHint=\"go\"\n            spellCheck={false}\n            onChange={handleQueryChange}\n            onKeyDown={handleKeyDown}\n          />\n        </div>\n        {/* A scroller with nothing focusable inside would be a tab stop of its own in Chromium. */}\n        <div\n          className=\"smwb-command-palette__results\"\n          ref={resultsRef}\n          tabIndex={-1}\n          data-testid=\"command-palette-results\"\n        >\n          {/* An empty listbox is drawn never: axe flags it, and a collapsed combobox may point nowhere. */}\n          {hasOptions ? (\n            <ul\n              id={listboxId}\n              className=\"smwb-command-palette__listbox\"\n              role=\"listbox\"\n              aria-labelledby={inputId}\n              aria-busy={pending || undefined}\n              data-testid=\"command-palette-listbox\"\n            >\n              {sections.map((section, sectionIndex) => {\n                const labelId = `${listboxId}-group-${sectionIndex}`;\n                return (\n                  <li\n                    key={`${groupKeyOf(section.group)}-${sectionIndex}`}\n                    className=\"smwb-command-palette__group\"\n                    role=\"group\"\n                    aria-labelledby={labelId}\n                  >\n                    <div className=\"smwb-command-palette__group-label\" id={labelId}>\n                      {section.group.label}\n                    </div>\n                    <ul className=\"smwb-command-palette__group-options\" role=\"presentation\">\n                      {section.rows.map((row) => {\n                        const optionId = optionIdAt(row.index);\n                        const isActive = row.index === activeIndex;\n                        const describedBy = [\n                          row.item.subtitle === undefined ? \"\" : `${optionId}-subtitle`,\n                          row.item.shortcut === undefined ? \"\" : `${optionId}-shortcut`,\n                        ]\n                          .filter(Boolean)\n                          .join(\" \");\n                        return (\n                          <li\n                            key={row.key}\n                            ref={(element) => {\n                              optionRefs.current[row.index] = element;\n                            }}\n                            id={optionId}\n                            className={cn(\n                              \"smwb-command-palette__item\",\n                              isActive && \"smwb-command-palette__item_active\",\n                              row.item.disabled && \"smwb-command-palette__item_disabled\"\n                            )}\n                            role=\"option\"\n                            // The label alone names the option; the subtitle and the shortcut caps\n                            // describe it, so a screen reader does not read them as part of the name.\n                            aria-labelledby={`${optionId}-label`}\n                            aria-describedby={describedBy === \"\" ? undefined : describedBy}\n                            aria-selected={isActive || undefined}\n                            aria-disabled={row.item.disabled || undefined}\n                            data-item-id={row.item.id}\n                            data-testid=\"command-palette-option\"\n                            onClick={() => choose(row.index)}\n                            onPointerMove={(event) => handleOptionPointerMove(event, row)}\n                          >\n                            {row.item.icon === undefined ? null : (\n                              <span className=\"smwb-command-palette__item-icon\" aria-hidden=\"true\">\n                                {typeof row.item.icon === \"string\" ? <Icon name={row.item.icon} /> : row.item.icon}\n                              </span>\n                            )}\n                            <span className=\"smwb-command-palette__item-text\">\n                              <span className=\"smwb-command-palette__item-label\" id={`${optionId}-label`}>\n                                {row.item.label}\n                              </span>\n                              {row.item.subtitle === undefined ? null : (\n                                <span className=\"smwb-command-palette__item-subtitle\" id={`${optionId}-subtitle`}>\n                                  {row.item.subtitle}\n                                </span>\n                              )}\n                            </span>\n                            {row.item.shortcut === undefined ? null : (\n                              <Kbd\n                                keys={row.item.shortcut}\n                                id={`${optionId}-shortcut`}\n                                className=\"smwb-command-palette__item-shortcut\"\n                              />\n                            )}\n                          </li>\n                        );\n                      })}\n                    </ul>\n                  </li>\n                );\n              })}\n            </ul>\n          ) : null}\n          {pending ? (\n            <div className=\"smwb-command-palette__loading\" aria-hidden=\"true\" data-testid=\"command-palette-loading\">\n              {Array.from({ length: LOADING_ROWS }, (_, rowIndex) => (\n                <div className=\"smwb-command-palette__loading-row\" key={rowIndex}>\n                  <Skeleton variant=\"circular\" width={20} height={20} />\n                  <Skeleton variant=\"text\" width=\"60%\" />\n                  <Skeleton variant=\"text\" width=\"40%\" />\n                </div>\n              ))}\n            </div>\n          ) : null}\n          {asyncFailed ? (\n            <div\n              className={cn(\"smwb-command-palette__message\", \"smwb-command-palette__message_error\")}\n              data-testid=\"command-palette-error\"\n            >\n              {errorText}\n            </div>\n          ) : null}\n          {!pending && !asyncFailed && !hasOptions ? (\n            <div className=\"smwb-command-palette__message\" data-testid=\"command-palette-empty\">\n              {noResultsText}\n            </div>\n          ) : null}\n        </div>\n        {footer === undefined || footer === null ? null : (\n          <div className=\"smwb-command-palette__footer\" data-testid=\"command-palette-footer\">\n            {footer}\n          </div>\n        )}\n        {/* Inside the dialog: a screen reader ignores a live region outside an aria-modal one. */}\n        <div className=\"smwb-command-palette__status\" role=\"status\" data-testid=\"command-palette-status\">\n          {status}\n        </div>\n      </div>\n    </Modal>\n  );\n});\n\nexport default CommandPalette;\n"],"names":["RECENT_GROUP_ID","NO_GROUPS","PAGE_STEP","ANNOUNCE_DELAY","LOADING_ROWS","defaultResultsAnnouncement","count","groupKeyOf","group","_a","isAbortError","error","CommandPalette","forwardRef","props","ref","openProp","defaultOpen","onOpenChange","groups","recent","recentLabel","queryProp","defaultQuery","onQueryChange","filter","commandPaletteFilter","source","debounceMs","minQueryLength","loading","onSelect","closeOnSelect","placeholder","searchLabel","noResultsText","errorText","resultsAnnouncement","footer","className","ariaLabel","ariaLabelledBy","ariaDescribedBy","dataTestId","open","setOpen","useControllableState","query","setQuery","trimmed","asyncGroups","setAsyncGroups","useState","asyncPending","setAsyncPending","asyncFailed","setAsyncFailed","activeKey","setActiveKey","status","setStatus","scrollTick","setScrollTick","uid","useId","inputId","listboxId","optionIdAt","index","inputRef","useRef","resultsRef","optionRefs","timerRef","controllerRef","lastPointerRef","panelEl","setPanelEl","attachPanel","useCallback","element","sourceRef","announceRef","queryRef","querySeedRef","activeIndexRef","sections","rows","useMemo","builtSections","builtRows","add","items","sectionRows","item","row","isEnabled","activeIndex","kept","firstOption","pending","hasOptions","activeOptionId","useEffect","wasOpenRef","opened","seed","controlled","cancelPending","previous","load","wait","min","controller","loaded","optionCount","timer","useSafeLayoutEffect","option","keepInView","handleClose","useEventCallback","handleQueryChange","event","moveTo","tick","move","steps","moveOption","choose","_b","handleKeyDown","handlePanelMouseDown","handleOptionPointerMove","last","dialogTestId","jsx","Modal","cn","jsxs","Icon","section","sectionIndex","labelId","optionId","isActive","describedBy","Kbd","_","rowIndex","Skeleton"],"mappings":"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"}

package/dist/headless/components/navigation/commandPalette/commandPaletteFilter.js

@@ -0,0 +1,16 @@
+function o(e) {
+  return e.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+}
+const c = (e, l) => {
+  var r, n;
+  const t = o(l).split(/\s+/).filter(Boolean);
+  if (t.length === 0)
+    return !0;
+  const s = o([e.label, (r = e.subtitle) != null ? r : "", ...(n = e.keywords) != null ? n : []].join(" "));
+  return t.every((a) => s.includes(a));
+};
+export {
+  c as commandPaletteFilter,
+  o as normalizeSearchText
+};
+//# sourceMappingURL=commandPaletteFilter.js.map

package/dist/headless/components/navigation/commandPalette/commandPaletteFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commandPaletteFilter.js","sources":["../../../../../src/components/navigation/commandPalette/commandPaletteFilter.ts"],"sourcesContent":["import type { CommandPaletteFilter } from \"./commandPaletteTypes\";\n\n/**\n * Lower case, without combining marks: \"Café\" → \"cafe\", \"Ёжик\" → \"ежик\". A side effect of dropping the marks\n * is that \"й\" reads as \"и\", so a query with \"и\" also finds words with \"й\".\n */\nexport function normalizeSearchText(text: string): string {\n  return text.normalize(\"NFD\").replace(/[̀-ͯ]/g, \"\").toLowerCase();\n}\n\n/**\n * The palette's default filter: every word of the query occurs in the label, the subtitle or a keyword,\n * ignoring case and accents. An empty query matches everything. It never reorders items.\n */\nexport const commandPaletteFilter: CommandPaletteFilter = (item, query) => {\n  const words = normalizeSearchText(query).split(/\\s+/).filter(Boolean);\n  if (words.length === 0) {\n    return true;\n  }\n  const text = normalizeSearchText([item.label, item.subtitle ?? \"\", ...(item.keywords ?? [])].join(\" \"));\n  return words.every((word) => text.includes(word));\n};\n"],"names":["normalizeSearchText","text","commandPaletteFilter","item","query","_a","_b","words","word"],"mappings":"AAMO,SAASA,EAAoBC,GAAsB;AACxD,SAAOA,EAAK,UAAU,KAAK,EAAE,QAAQ,UAAU,EAAE,EAAE,YAAA;AACrD;AAMO,MAAMC,IAA6C,CAACC,GAAMC,MAAU;AARpE,MAAAC,GAAAC;AASL,QAAMC,IAAQP,EAAoBI,CAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACpE,MAAIG,EAAM,WAAW;AACnB,WAAO;AAET,QAAMN,IAAOD,EAAoB,CAACG,EAAK,QAAOE,IAAAF,EAAK,aAAL,OAAAE,IAAiB,IAAI,IAAIC,IAAAH,EAAK,aAAL,OAAAG,IAAiB,CAAA,CAAG,EAAE,KAAK,GAAG,CAAC;AACtG,SAAOC,EAAM,MAAM,CAACC,MAASP,EAAK,SAASO,CAAI,CAAC;AAClD;"}

package/dist/headless/components/navigation/commandPalette/commandPaletteNavigation.js

@@ -0,0 +1,38 @@
+function c(e, o) {
+  for (let t = 0; t < e; t++)
+    if (o(t))
+      return t;
+  return -1;
+}
+function u(e, o) {
+  for (let t = e - 1; t >= 0; t--)
+    if (o(t))
+      return t;
+  return -1;
+}
+function p(e, o, t, n) {
+  if (t < 0)
+    return n > 0 ? c(e, o) : u(e, o);
+  const i = n > 0 ? 1 : -1;
+  let l = t, f = Math.abs(n);
+  for (let r = t + i; r >= 0 && r < e && f > 0; r += i)
+    o(r) && (l = r, f--);
+  return l;
+}
+function g(e, o) {
+  for (let t = e.parentElement; t; t = t.parentElement) {
+    if (t.scrollHeight > t.clientHeight) {
+      const n = t.getBoundingClientRect(), i = e.getBoundingClientRect();
+      i.top < n.top ? t.scrollTop -= n.top - i.top : i.bottom > n.bottom && (t.scrollTop += i.bottom - n.bottom);
+    }
+    if (t === o)
+      break;
+  }
+}
+export {
+  c as firstOption,
+  g as keepInView,
+  u as lastOption,
+  p as moveOption
+};
+//# sourceMappingURL=commandPaletteNavigation.js.map

package/dist/headless/components/navigation/commandPalette/commandPaletteNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commandPaletteNavigation.js","sources":["../../../../../src/components/navigation/commandPalette/commandPaletteNavigation.ts"],"sourcesContent":["// Moves of the active option over the palette's options, by index in the order they are drawn.\n// A disabled option is passed over. A copy of the helpers of the select field's listbox: importing\n// them from there would make the palette depend on the select field's styles.\n\nexport type IsOptionEnabled = (index: number) => boolean;\n\n/** The first enabled option, or -1. */\nexport function firstOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = 0; index < count; index++) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/** The last enabled option, or -1. */\nexport function lastOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = count - 1; index >= 0; index--) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/**\n * The enabled option `steps` options after `from` (before it for a negative\n * count), stopping at the first or the last one. With no active option, a move\n * down starts at the first option and a move up at the last.\n */\nexport function moveOption(count: number, isEnabled: IsOptionEnabled, from: number, steps: number): number {\n  if (from < 0) {\n    return steps > 0 ? firstOption(count, isEnabled) : lastOption(count, isEnabled);\n  }\n  const direction = steps > 0 ? 1 : -1;\n  let result = from;\n  let left = Math.abs(steps);\n  for (let index = from + direction; index >= 0 && index < count && left > 0; index += direction) {\n    if (isEnabled(index)) {\n      result = index;\n      left--;\n    }\n  }\n  return result;\n}\n\n/** Scrolls each scrolling box from the element up to `root` so the element shows. */\nexport function keepInView(element: HTMLElement, root: HTMLElement | null) {\n  for (let box = element.parentElement; box; box = box.parentElement) {\n    if (box.scrollHeight > box.clientHeight) {\n      const outer = box.getBoundingClientRect();\n      const inner = element.getBoundingClientRect();\n      if (inner.top < outer.top) {\n        box.scrollTop -= outer.top - inner.top;\n      } else if (inner.bottom > outer.bottom) {\n        box.scrollTop += inner.bottom - outer.bottom;\n      }\n    }\n    if (box === root) {\n      break;\n    }\n  }\n}\n"],"names":["firstOption","count","isEnabled","index","lastOption","moveOption","from","steps","direction","result","left","keepInView","element","root","box","outer","inner"],"mappings":"AAOO,SAASA,EAAYC,GAAeC,GAAoC;AAC7E,WAASC,IAAQ,GAAGA,IAAQF,GAAOE;AACjC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAGO,SAASC,EAAWH,GAAeC,GAAoC;AAC5E,WAASC,IAAQF,IAAQ,GAAGE,KAAS,GAAGA;AACtC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAOO,SAASE,EAAWJ,GAAeC,GAA4BI,GAAcC,GAAuB;AACzG,MAAID,IAAO;AACT,WAAOC,IAAQ,IAAIP,EAAYC,GAAOC,CAAS,IAAIE,EAAWH,GAAOC,CAAS;AAEhF,QAAMM,IAAYD,IAAQ,IAAI,IAAI;AAClC,MAAIE,IAASH,GACTI,IAAO,KAAK,IAAIH,CAAK;AACzB,WAASJ,IAAQG,IAAOE,GAAWL,KAAS,KAAKA,IAAQF,KAASS,IAAO,GAAGP,KAASK;AACnF,IAAIN,EAAUC,CAAK,MACjBM,IAASN,GACTO;AAGJ,SAAOD;AACT;AAGO,SAASE,EAAWC,GAAsBC,GAA0B;AACzE,WAASC,IAAMF,EAAQ,eAAeE,GAAKA,IAAMA,EAAI,eAAe;AAClE,QAAIA,EAAI,eAAeA,EAAI,cAAc;AACvC,YAAMC,IAAQD,EAAI,sBAAA,GACZE,IAAQJ,EAAQ,sBAAA;AACtB,MAAII,EAAM,MAAMD,EAAM,MACpBD,EAAI,aAAaC,EAAM,MAAMC,EAAM,MAC1BA,EAAM,SAASD,EAAM,WAC9BD,EAAI,aAAaE,EAAM,SAASD,EAAM;AAAA,IAE1C;AACA,QAAID,MAAQD;AACV;AAAA,EAEJ;AACF;"}