@sableui/react 0.6.2 → 0.7.1

package/dist/components/command-menu/command-menu.js

@@ -0,0 +1,433 @@
+"use client";
+
+// src/components/command-menu/command-menu.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { useAnchoredDensity, useTypeTier } from "../../lib/density.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle
+} from "../dialog/dialog.js";
+import { Scroller } from "../scroller/scroller.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function defaultFilter(items, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return items;
+  return items.filter((item) => item.label.toLowerCase().includes(q));
+}
+function useCommandQuery(queryProp, onQueryChange) {
+  const [ownQuery, setOwnQuery] = useState("");
+  const query = queryProp ?? ownQuery;
+  const setQuery = (next) => {
+    if (queryProp === void 0) setOwnQuery(next);
+    onQueryChange?.(next);
+  };
+  return [query, setQuery];
+}
+var COMMAND_GEOMETRY = "[--cm-inset:max(--spacing(1),calc(var(--radius-lg)/3))] [--cm-pad:max(--spacing(2),calc(--spacing(4)-var(--cm-inset)))]";
+function CommandMenuBody({
+  query,
+  setQuery,
+  items,
+  filter,
+  listClassName,
+  placeholder,
+  emptyMessage,
+  title,
+  scope,
+  inputProps,
+  children,
+  close,
+  open,
+  inline
+}) {
+  const [activeId, setActiveId] = useState(null);
+  const listRef = useRef(null);
+  const listboxId = useId();
+  const tier = useTypeTier();
+  const grouped = useMemo(() => {
+    if (!items) return [];
+    const visible = filter === null ? items : filter ? filter(items, query) : defaultFilter(items, query);
+    const map = /* @__PURE__ */ new Map();
+    for (const item of visible) {
+      const bucket = map.get(item.group);
+      if (bucket) bucket.push(item);
+      else map.set(item.group, [item]);
+    }
+    return Array.from(map, ([group, groupItems]) => ({ group, groupItems }));
+  }, [items, query, filter]);
+  const q = filter === void 0 ? query.trim().toLowerCase() : "";
+  const options = () => Array.from(
+    listRef.current?.querySelectorAll('[role="option"]') ?? []
+  );
+  const seedActive = useCallback(() => {
+    const all = options();
+    const runnable = all.find(
+      (option) => option.getAttribute("aria-disabled") !== "true"
+    );
+    setActiveId((runnable ?? all[0])?.id ?? null);
+  }, []);
+  const [resultCount, setResultCount] = useState(0);
+  useEffect(() => {
+    const all = options();
+    const next = all.length;
+    setResultCount((current) => current === next ? current : next);
+    if (inline && (activeId ? !all.some((option) => option.id === activeId) : next > 0)) {
+      seedActive();
+    }
+  });
+  const attachList = useCallback(
+    (node) => {
+      listRef.current = node;
+      if (node) seedActive();
+    },
+    [seedActive]
+  );
+  useEffect(() => {
+    if (open) seedActive();
+  }, [open, query]);
+  const onInputKeyDown = (event) => {
+    inputProps?.onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (inline && event.key === "Escape") {
+      if (query) {
+        event.preventDefault();
+        event.stopPropagation();
+        setQuery("");
+      }
+      return;
+    }
+    const opts = options();
+    if (opts.length === 0) return;
+    const index = opts.findIndex((o) => o.id === activeId);
+    const move = (next) => {
+      if (!next) return;
+      event.preventDefault();
+      setActiveId(next.id);
+      next.scrollIntoView({ block: "nearest" });
+    };
+    switch (event.key) {
+      case "ArrowDown":
+        move(index < 0 ? opts[0] : opts[(index + 1) % opts.length]);
+        break;
+      case "ArrowUp":
+        move(
+          index < 0 ? opts[opts.length - 1] : opts[(index - 1 + opts.length) % opts.length]
+        );
+        break;
+      case "Home":
+        move(opts[0]);
+        break;
+      case "End":
+        move(opts[opts.length - 1]);
+        break;
+      // A screenful, near enough. Rows are a fixed height, so "ten" is the
+      // same distance every time — measuring the listbox would be more exact
+      // and less predictable. Clamped rather than wrapped: a page jump that
+      // wraps to the far end is a jump nobody asked for.
+      case "PageDown":
+        move(opts[Math.min(opts.length - 1, (index < 0 ? 0 : index) + 10)]);
+        break;
+      case "PageUp":
+        move(opts[Math.max(0, (index < 0 ? 0 : index) - 10)]);
+        break;
+      case "Enter": {
+        const active = opts.find((o) => o.id === activeId) ?? opts[0];
+        if (active) {
+          event.preventDefault();
+          if (active.getAttribute("aria-disabled") !== "true") active.click();
+        }
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2 border-b border-border px-[calc(var(--cm-inset)+var(--cm-pad))] py-3", COMMAND_GEOMETRY), children: [
+      /* @__PURE__ */ jsx(Icon, { name: "search", className: "text-base text-muted-foreground" }),
+      scope ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: scope }) : null,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          autoFocus: !inline,
+          type: "text",
+          ...inputProps,
+          "data-command-menu-input": inline ? void 0 : "",
+          role: "combobox",
+          "aria-expanded": true,
+          "aria-controls": listboxId,
+          "aria-activedescendant": activeId ?? void 0,
+          "aria-autocomplete": "list",
+          value: query,
+          onChange: (event) => setQuery(event.target.value),
+          onKeyDown: onInputKeyDown,
+          placeholder,
+          "aria-label": inputProps?.["aria-label"] ?? "Command search",
+          className: cn(
+            `w-full border-0 bg-transparent ${tier.body} text-foreground outline-none placeholder:text-muted-foreground`,
+            inputProps?.className
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: resultCount === 0 ? "No results" : `${resultCount} result${resultCount === 1 ? "" : "s"}` }),
+    /* @__PURE__ */ jsxs(
+      Scroller,
+      {
+        ref: attachList,
+        role: "listbox",
+        id: listboxId,
+        "aria-label": title,
+        className: cn("min-h-0 max-h-80 p-(--cm-inset)", COMMAND_GEOMETRY, listClassName),
+        children: [
+          /* @__PURE__ */ jsx(
+            CommandQueryContext.Provider,
+            {
+              value: { query: children ? q : "", close, activeId, setActiveId },
+              children: children ?? grouped.map(({ group, groupItems }) => /* @__PURE__ */ jsx(CommandMenuGroup, { label: group, children: groupItems.map((item) => /* @__PURE__ */ jsx(
+                CommandMenuItem,
+                {
+                  id: item.id ? `${listboxId}-${item.id}` : void 0,
+                  icon: item.icon,
+                  detail: item.detail,
+                  hint: item.hint,
+                  disabled: item.disabled,
+                  onSelect: () => {
+                    item.onSelect();
+                    close();
+                  },
+                  children: item.label
+                },
+                item.id ?? `${group}:${item.label}`
+              )) }, group))
+            }
+          ),
+          (children ? resultCount === 0 : grouped.length === 0) && /* @__PURE__ */ jsx("div", { className: "px-(--cm-pad) py-6 text-center text-body-sm text-muted-foreground", children: emptyMessage })
+        ]
+      }
+    )
+  ] });
+}
+function CommandMenu({
+  open,
+  onOpenChange,
+  items,
+  query: queryProp,
+  onQueryChange,
+  filter,
+  listClassName,
+  placeholder = "Type a command or search\u2026",
+  emptyMessage = "No results found.",
+  title = "Command menu",
+  description = "Search for a command and press Enter to run it.",
+  finalFocus,
+  scope,
+  inputProps,
+  children,
+  className,
+  ...props
+}) {
+  const [query, setQuery] = useCommandQuery(queryProp, onQueryChange);
+  const anchoredDensity = useAnchoredDensity();
+  const handleOpenChange = (next) => {
+    if (!next) setQuery("");
+    onOpenChange(next);
+  };
+  const close = () => handleOpenChange(false);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      scroll: false,
+      ...anchoredDensity,
+      finalFocus,
+      className: cn(
+        // Top-anchored rather than centred, so the viewport cap DialogContent
+        // applies (which assumes a 1rem margin top and bottom) has to be
+        // restated for the 12vh offset: everything below the offset, less the
+        // bottom margin.
+        "top-[12vh] max-h-[calc(88dvh-1rem)] max-w-140 -translate-y-0 overflow-hidden p-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: description }),
+        /* @__PURE__ */ jsx(
+          CommandMenuBody,
+          {
+            query,
+            setQuery,
+            items,
+            filter,
+            listClassName,
+            placeholder,
+            emptyMessage,
+            title,
+            scope,
+            inputProps,
+            close,
+            open,
+            inline: false,
+            children
+          }
+        )
+      ]
+    }
+  ) });
+}
+var noop = () => {
+};
+function CommandMenuPanel({
+  items,
+  query: queryProp,
+  onQueryChange,
+  filter,
+  listClassName,
+  placeholder = "Type a command or search\u2026",
+  emptyMessage = "No results found.",
+  title = "Command menu",
+  scope,
+  inputProps,
+  children,
+  className,
+  ...props
+}) {
+  const [query, setQuery] = useCommandQuery(queryProp, onQueryChange);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "command-menu-panel",
+      className: cn(
+        "flex min-h-0 flex-col overflow-hidden rounded-lg border border-border bg-card text-card-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        CommandMenuBody,
+        {
+          query,
+          setQuery,
+          items,
+          filter,
+          listClassName,
+          placeholder,
+          emptyMessage,
+          title,
+          scope,
+          inputProps,
+          close: noop,
+          open: true,
+          inline: true,
+          children
+        }
+      )
+    }
+  );
+}
+var CommandQueryContext = createContext(
+  null
+);
+function CommandMenuGroup({
+  label,
+  className,
+  children,
+  ...props
+}) {
+  const labelId = useId();
+  const tier = useTypeTier();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-labelledby": labelId,
+      className: cn("py-1", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: labelId,
+            className: `px-(--cm-pad,--spacing(2)) py-1 ${tier.label} text-muted-foreground`,
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function CommandMenuItem({
+  onSelect,
+  icon,
+  detail,
+  hint,
+  id: idProp,
+  className,
+  children,
+  disabled,
+  ...props
+}) {
+  const ctx = useContext(CommandQueryContext);
+  const tier = useTypeTier();
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  if (ctx?.query) {
+    const text = textOf(children).toLowerCase();
+    if (!text.includes(ctx.query)) return null;
+  }
+  const handleSelect = () => {
+    if (disabled) return;
+    onSelect?.();
+    ctx?.close();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      role: "option",
+      "aria-selected": ctx?.activeId === id,
+      "aria-disabled": disabled || void 0,
+      onClick: handleSelect,
+      onMouseMove: () => ctx?.setActiveId(id),
+      className: cn(
+        `flex items-center gap-2 rounded-[max(0px,calc(var(--radius-lg)-var(--cm-inset,--spacing(1))-1px))] px-(--cm-pad,--spacing(2)) py-2 ${tier.body} outline-none motion-interactive aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg]:shrink-0`,
+        disabled ? "cursor-default text-muted-foreground" : "cursor-pointer text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-base text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+        detail && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-body-sm text-muted-foreground", children: detail }),
+        hint && /* @__PURE__ */ jsx("span", { className: "ms-auto flex min-w-0 max-w-1/2 items-center ps-4 text-body-sm text-muted-foreground", children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: hint }) })
+      ]
+    }
+  );
+}
+function textOf(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(textOf).join("");
+  if (typeof node === "object" && "props" in node) {
+    const props = node.props;
+    return textOf(props?.children);
+  }
+  return "";
+}
+export {
+  CommandMenu,
+  CommandMenuGroup,
+  CommandMenuItem,
+  CommandMenuPanel
+};