@smwb/ui-react 2.8.0 → 2.9.0

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

@@ -10,7 +10,29 @@ export interface AppBarProps extends Omit<React.HTMLAttributes<HTMLElement>, "ti
     midContent?: React.ReactNode;
     rightContent?: React.ReactNode;
     title?: React.ReactNode | string;
+    /**
+     * Tag the `title` is rendered in: a `div` (default) or a heading, `h1`–`h6`,
+     * for the page's main heading. Only the tag changes — a heading is drawn with
+     * the bar's own font size, weight and no margins, so it looks exactly like the
+     * div. The heading's text is the `title` itself, so pass a string or plain
+     * markup rather than a `Typography` heading.
+     */
+    titleAs?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     midContentAlign?: "middle" | "left" | "right";
+    /**
+     * `window`: the bar is the title bar of a desktop app window (Electron, Tauri, an installed PWA with Window
+     * Controls Overlay). The bar drags the window; buttons, links, fields and other controls in it stay clickable,
+     * and room is left for the OS window buttons (`windowControls`). In a plain browser tab it looks like `default`.
+     */
+    variant?: "default" | "window";
+    /**
+     * With `variant="window"`: where the OS window buttons are, so the bar's content keeps clear of them.
+     * `auto` (default) takes the area from the shell's `env(titlebar-area-*)` (Window Controls Overlay, Electron
+     * `titleBarOverlay`) and reserves nothing without it; `left` is macOS (traffic lights, `titleBarStyle: "hiddenInset"`),
+     * `right` is Windows/Linux caption buttons drawn by the OS; `none` reserves nothing. The reserved width is
+     * the `--smui-appBarWindowControlsWidth` custom property (64px on the left, 138px on the right by default).
+     */
+    windowControls?: "auto" | "left" | "right" | "none";
     /** Semantic background color. */
     color?: AppBarColor;
     /** Test id of the root (`<header>`, or `<footer>` at the bottom); `app-bar` unless given. */

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

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

package/dist/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":";;;;;AAwBO,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":";;;;;AA8CO,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/components/navigation/commandPalette/commandPalette.d.ts

@@ -0,0 +1,111 @@
+import React from "react";
+import type { CommandPaletteFilter, CommandPaletteGroup, CommandPaletteItem, CommandPaletteSource } from "./commandPaletteTypes";
+export interface CommandPaletteProps {
+    /** Controlled open state. The palette is controlled while this is not `undefined`. */
+    open?: boolean;
+    /** Open state used while `open` is `undefined`; `false` by default. */
+    defaultOpen?: boolean;
+    /**
+     * Called for every request to open or close: Escape, a backdrop click, and choosing an item
+     * while `closeOnSelect`. Called in the controlled and in the uncontrolled mode.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** Static groups, filtered locally by `filter`. A group left with no items is hidden, heading included. */
+    groups?: CommandPaletteGroup[];
+    /**
+     * Recently used items, kept by the app: it owns the list and updates it from `onSelect`. Shown as
+     * the first group while the trimmed query is empty, never filtered, and hidden while searching.
+     */
+    recent?: CommandPaletteItem[];
+    /** Heading of the recent group; `"Recent"` by default. That group is `{ id: "recent", label: recentLabel, items: recent }` in `onSelect`. */
+    recentLabel?: string;
+    /** Controlled query. The palette is controlled while this is not `undefined`. */
+    query?: string;
+    /**
+     * Query used while `query` is `undefined`; `""` by default. An uncontrolled field goes back to it
+     * each time the palette opens.
+     */
+    defaultQuery?: string;
+    /** Called for every edit of the field, in the controlled and in the uncontrolled mode. */
+    onQueryChange?: (query: string) => void;
+    /**
+     * Local matching of `groups`; {@link commandPaletteFilter} by default (every word of the query
+     * occurs in the label, the subtitle or a keyword, ignoring case and accents). `false` shows
+     * `groups` as given, for an app that filters or ranks them itself. Never applied to `recent` or
+     * to the results of `source`.
+     */
+    filter?: CommandPaletteFilter | false;
+    /**
+     * Loads results for the trimmed query, appended after the static groups. Called after `debounce`
+     * milliseconds of quiet typing and only for a query of at least `minQueryLength` characters;
+     * `signal` is aborted when a newer query, a close or an unmount makes the answer useless. While a
+     * request is pending its predecessors' groups are not shown, and a rejection that is not an abort
+     * shows `errorText`.
+     */
+    source?: CommandPaletteSource;
+    /** Milliseconds of quiet typing before `source` is called; `200` by default. */
+    debounce?: number;
+    /**
+     * `source` is called only when the trimmed query has at least this many characters; `1` by
+     * default, so an empty query loads nothing. `0` also loads for the empty query.
+     */
+    minQueryLength?: number;
+    /** App-driven loading: shows the skeleton like a pending `source`; `false` by default. */
+    loading?: boolean;
+    /**
+     * Called for every chosen item, after the item's own `onSelect`. The place for the app to run the
+     * command and to update its `recent` list.
+     */
+    onSelect?: (item: CommandPaletteItem, group: CommandPaletteGroup) => void;
+    /** Ask to close (`onOpenChange(false)`) when an item is chosen; `true` by default. */
+    closeOnSelect?: boolean;
+    /** Placeholder of the field; `"Type a command or search…"` by default. It is not the field's name. */
+    placeholder?: string;
+    /** Accessible name of the field and, through `aria-labelledby`, of the listbox; `"Search commands"` by default. */
+    searchLabel?: string;
+    /** Shown and announced when nothing matches; `"No results"` by default. */
+    noResultsText?: string;
+    /** Shown and announced when `source` rejects; `"Couldn't load results"` by default. */
+    errorText?: string;
+    /**
+     * Text of the polite status once a search has settled; `"1 result"` / `"N results"` by default.
+     * Not used for zero results, which announce `noResultsText`.
+     */
+    resultsAnnouncement?: (count: number) => string;
+    /** Slot under the results, e.g. key hints built with `Kbd`. Drawn only when given. */
+    footer?: React.ReactNode;
+    /** Added to the dialog element, after `smwb-command-palette`. */
+    className?: string;
+    /** Name of the dialog; `"Command palette"` by default. Not set when `aria-labelledby` is given. */
+    "aria-label"?: string;
+    /** Id of the element that names the dialog. Wins over `aria-label`. */
+    "aria-labelledby"?: string;
+    /** Id of the element that describes the dialog. */
+    "aria-describedby"?: string;
+    /** Test id of the dialog element; `"command-palette"` unless given. */
+    "data-testid"?: string;
+}
+/**
+ * The ⌘K palette: a modal dialog with one search field and grouped results, driven by the keyboard.
+ *
+ * ArrowUp/ArrowDown (and PageUp/PageDown) move the active option, Enter runs it, Escape closes the
+ * palette — all of it on the field, which keeps the focus the whole time (`aria-activedescendant`
+ * points at the active option). Results come from `groups`, filtered locally, from `recent` while
+ * the query is empty, and from an async `source` that is debounced and aborted on a newer query,
+ * with skeleton rows while it loads plus empty and error states.
+ *
+ * The palette does not bind ⌘K itself: the app does it once, with `useKeyboardShortcut`, and draws
+ * the same keys with `Kbd`.
+ *
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ * useKeyboardShortcut({ keys: ["Mod", "K"], onTrigger: () => setOpen((was) => !was) });
+ * <Button label="Search" onClick={() => setOpen(true)} endIcon={<Kbd keys={["Mod", "K"]} />} />
+ * <CommandPalette open={open} onOpenChange={setOpen} groups={groups} recent={recent} onSelect={run} />
+ * ```
+ *
+ * Filtering and rendering are linear, so an app with a long list should cap its groups (50 items is
+ * a good ceiling) or rank on the server and pass `filter={false}`.
+ */
+export declare const CommandPalette: React.ForwardRefExoticComponent<CommandPaletteProps & React.RefAttributes<HTMLDivElement>>;
+export default CommandPalette;

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

@@ -0,0 +1,337 @@
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/commandPalette/commandPalette.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                       */
+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", Pt = 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 {
+  Pt as CommandPalette
+};
+//# sourceMappingURL=commandPalette.js.map