@vesture/react 0.2.9 → 0.2.10

package/dist/index.d.ts

@@ -539,4 +539,47 @@ interface TreeViewProps<T = unknown> {
 
 declare function TreeView<T = unknown>({ nodes, expanded: controlledExpanded, defaultExpanded, onExpandedChange, selected: controlledSelected, defaultSelected, onSelectedChange, selectable, onLoadChildren, height, rowHeight, }: TreeViewProps<T>): ReactElement;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeVariant, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarProps, Card, type CardElevation, type CardProps, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, DataGrid, type DataGridColumn, type DataGridExportOptions, type DataGridHandle, type DataGridProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Divider, type DividerOrientation, type DividerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, type SliderValue, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastContextValue, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, type TreeViewSelectable, useToast };
+interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    /** Extra searchable terms not shown in the label. */
+    keywords?: string[];
+    /** Display-only, e.g. "⌘K". */
+    shortcut?: string;
+    /** Groups render under a section header, in the order groups first appear in `commands`. */
+    group?: string;
+    onSelect: () => void;
+    disabled?: boolean;
+}
+interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    commands: CommandItem[];
+    placeholder?: string;
+    emptyMessage?: string;
+    /** Overrides the default case-insensitive substring match against label + keywords + group. */
+    filterCommands?: (commands: CommandItem[], query: string) => CommandItem[];
+    /** Number of rows (commands + group headers) at/above which the list switches to virtualized rendering. */
+    virtualizationThreshold?: number;
+    /** Row height (px) used for virtualized rows; defaults to the `.option` class's rendered height. */
+    rowHeight?: number;
+    "aria-label"?: string;
+}
+
+declare function CommandPalette({ open, onOpenChange, commands, placeholder, emptyMessage, filterCommands, virtualizationThreshold, rowHeight, "aria-label": ariaLabel }: CommandPaletteProps): ReactElement | null;
+
+interface UseCommandPaletteShortcutOptions {
+    key?: string;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+}
+/**
+ * Attaches a document-level Cmd+K (Mac) / Ctrl+K (elsewhere) listener that
+ * calls onOpenChange(true). Separate from CommandPalette so consumers can
+ * wire their own trigger instead.
+ */
+declare function useCommandPaletteShortcut(onOpenChange: (open: boolean) => void, options?: UseCommandPaletteShortcutOptions): void;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeVariant, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarProps, Card, type CardElevation, type CardProps, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, DataGrid, type DataGridColumn, type DataGridExportOptions, type DataGridHandle, type DataGridProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Divider, type DividerOrientation, type DividerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, NumberInput, type NumberInputProps, Pagination, type PaginationProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, type SliderValue, type SortDirection, type SortState, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastContextValue, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, type TreeViewSelectable, type UseCommandPaletteShortcutOptions, useCommandPaletteShortcut, useToast };

package/dist/index.js

@@ -3657,8 +3657,8 @@ function TreeView({
   const rowRefs = useRef10(/* @__PURE__ */ new Map());
   const nodeIndex = useMemo4(() => {
     const map = /* @__PURE__ */ new Map();
-    function walk(list4, parentId) {
-      for (const node of list4) {
+    function walk(list5, parentId) {
+      for (const node of list5) {
         map.set(node.id, { node, parentId });
         const children = getChildren(node, loadedChildren);
         if (children) walk(children, node.id);
@@ -3669,8 +3669,8 @@ function TreeView({
   }, [nodes, loadedChildren]);
   const flatNodes = useMemo4(() => {
     const result = [];
-    function walk(list4, depth) {
-      for (const node of list4) {
+    function walk(list5, depth) {
+      for (const node of list5) {
         const children = getChildren(node, loadedChildren);
         const nodeHasChildren = children ? children.length > 0 : node.hasChildren === true;
         const isExpanded = expandedSet.has(node.id);
@@ -3935,6 +3935,284 @@ function TreeView({
   );
 }
 
+// src/components/CommandPalette/CommandPalette.tsx
+import { useEffect as useEffect9, useId as useId3, useMemo as useMemo5, useRef as useRef11, useState as useState16 } from "react";
+import {
+  FloatingFocusManager as FloatingFocusManager6,
+  FloatingOverlay as FloatingOverlay2,
+  FloatingPortal as FloatingPortal8,
+  useDismiss as useDismiss8,
+  useFloating as useFloating8,
+  useInteractions as useInteractions8,
+  useRole as useRole8
+} from "@floating-ui/react";
+
+// src/components/CommandPalette/CommandPalette.css.ts
+var emptyState3 = "CommandPalette_emptyState__14otg5db";
+var groupHeader = "CommandPalette_groupHeader__14otg5d5";
+var inputEl2 = "CommandPalette_inputEl__14otg5d2";
+var list4 = "CommandPalette_list__14otg5d3";
+var option2 = "CommandPalette_option__14otg5d6";
+var optionDescription = "CommandPalette_optionDescription__14otg5d9";
+var optionIcon = "CommandPalette_optionIcon__14otg5d7";
+var optionLabel = "CommandPalette_optionLabel__14otg5d8";
+var overlay2 = "CommandPalette_overlay__14otg5d0";
+var palette = "CommandPalette_palette__14otg5d1";
+var shortcut = "CommandPalette_shortcut__14otg5da";
+var virtualSpacer2 = "CommandPalette_virtualSpacer__14otg5d4";
+
+// src/components/CommandPalette/CommandPalette.tsx
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+var DEFAULT_ROW_HEIGHT = 40;
+var OVERSCAN2 = 5;
+function defaultFilterCommands(commands, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return commands;
+  return commands.filter((command) => {
+    const haystack = [command.label, command.group, ...command.keywords ?? []].filter(Boolean).join(" ").toLowerCase();
+    return haystack.includes(q);
+  });
+}
+function buildRows(commands) {
+  const rows = [];
+  const itemRowIndices = [];
+  const seenGroups = /* @__PURE__ */ new Set();
+  commands.forEach((command, itemIndex) => {
+    if (command.group && !seenGroups.has(command.group)) {
+      seenGroups.add(command.group);
+      rows.push({ type: "header", key: `__group-${command.group}`, group: command.group });
+    }
+    itemRowIndices[itemIndex] = rows.length;
+    rows.push({ type: "item", key: command.id, command, itemIndex });
+  });
+  return { rows, itemRowIndices };
+}
+function CommandPalette({
+  open,
+  onOpenChange,
+  commands,
+  placeholder = "Type a command or search...",
+  emptyMessage = "No matching commands",
+  filterCommands = defaultFilterCommands,
+  virtualizationThreshold = 50,
+  rowHeight = DEFAULT_ROW_HEIGHT,
+  "aria-label": ariaLabel
+}) {
+  const [query, setQuery] = useState16("");
+  const [activeIndex, setActiveIndex] = useState16(null);
+  const [scrollTop, setScrollTop] = useState16(0);
+  const [viewportHeight, setViewportHeight] = useState16(320);
+  const inputRef = useRef11(null);
+  const listRef = useRef11(null);
+  const listId = useId3();
+  const { refs, context } = useFloating8({ open, onOpenChange });
+  const { getFloatingProps } = useInteractions8([useDismiss8(context), useRole8(context, { role: "dialog" })]);
+  const filteredCommands = useMemo5(() => filterCommands(commands, query), [commands, filterCommands, query]);
+  const { rows, itemRowIndices } = useMemo5(() => buildRows(filteredCommands), [filteredCommands]);
+  const isVirtualized = rows.length >= virtualizationThreshold;
+  useEffect9(() => {
+    if (!open) return;
+    setQuery("");
+    setActiveIndex(null);
+    setScrollTop(0);
+    if (listRef.current) listRef.current.scrollTop = 0;
+  }, [open]);
+  useEffect9(() => {
+    setActiveIndex(null);
+    setScrollTop(0);
+    if (listRef.current) listRef.current.scrollTop = 0;
+  }, [query]);
+  useEffect9(() => {
+    if (!open) return;
+    const node = listRef.current;
+    if (!node) return;
+    if (node.clientHeight > 0) setViewportHeight(node.clientHeight);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setViewportHeight(entry.contentRect.height);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [open]);
+  if (!open) {
+    return null;
+  }
+  const totalHeight = rows.length * rowHeight;
+  const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+  const effectiveScrollTop = Math.min(scrollTop, maxScrollTop);
+  const visibleCount = Math.ceil(viewportHeight / rowHeight) + OVERSCAN2 * 2;
+  const startIndex = isVirtualized ? Math.max(0, Math.floor(effectiveScrollTop / rowHeight) - OVERSCAN2) : 0;
+  const endIndex = isVirtualized ? Math.min(rows.length, startIndex + visibleCount) : rows.length;
+  const visibleRows = rows.slice(startIndex, endIndex);
+  const scrollRowIntoView = (rowIndex) => {
+    if (!isVirtualized) return;
+    const rowTop = rowIndex * rowHeight;
+    const rowBottom = rowTop + rowHeight;
+    let next = scrollTop;
+    if (rowTop < scrollTop) {
+      next = rowTop;
+    } else if (rowBottom > scrollTop + viewportHeight) {
+      next = rowBottom - viewportHeight;
+    } else {
+      return;
+    }
+    setScrollTop(next);
+    if (listRef.current) listRef.current.scrollTop = next;
+  };
+  const moveActiveIndex = (direction2) => {
+    if (filteredCommands.length === 0) return;
+    let next = activeIndex ?? (direction2 === 1 ? -1 : filteredCommands.length);
+    for (let step = 0; step < filteredCommands.length; step++) {
+      next = (next + direction2 + filteredCommands.length) % filteredCommands.length;
+      if (!filteredCommands[next]?.disabled) {
+        setActiveIndex(next);
+        const rowIndex = itemRowIndices[next];
+        if (rowIndex !== void 0) scrollRowIntoView(rowIndex);
+        return;
+      }
+    }
+  };
+  const selectCommand = (command) => {
+    if (command.disabled) return;
+    command.onSelect();
+    onOpenChange(false);
+  };
+  const handleKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        moveActiveIndex(1);
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        moveActiveIndex(-1);
+        return;
+      case "Enter": {
+        event.preventDefault();
+        const active = activeIndex !== null ? filteredCommands[activeIndex] : void 0;
+        if (active) selectCommand(active);
+        return;
+      }
+      case "Escape":
+        event.preventDefault();
+        onOpenChange(false);
+        return;
+      default:
+    }
+  };
+  const activeCommand = activeIndex !== null ? filteredCommands[activeIndex] : void 0;
+  const activeOptionId = activeCommand ? `${listId}-option-${activeCommand.id}` : void 0;
+  const renderRow = (row3, rowIndex, rowStyle) => {
+    if (row3.type === "header") {
+      return /* @__PURE__ */ jsx42("div", { role: "presentation", className: groupHeader, style: rowStyle, children: row3.group }, row3.key);
+    }
+    const { command, itemIndex } = row3;
+    const isActive = itemIndex === activeIndex;
+    return /* @__PURE__ */ jsxs25(
+      "div",
+      {
+        id: `${listId}-option-${command.id}`,
+        role: "option",
+        "aria-selected": isActive,
+        "aria-disabled": command.disabled || void 0,
+        "data-active": isActive || void 0,
+        className: option2,
+        style: rowStyle,
+        onMouseDown: (event) => {
+          event.preventDefault();
+          selectCommand(command);
+        },
+        onMouseEnter: () => {
+          if (!command.disabled) setActiveIndex(itemIndex);
+        },
+        children: [
+          command.icon ? /* @__PURE__ */ jsx42("span", { className: optionIcon, children: command.icon }) : null,
+          /* @__PURE__ */ jsxs25("span", { className: optionLabel, children: [
+            command.label,
+            command.description ? /* @__PURE__ */ jsx42("span", { className: optionDescription, children: command.description }) : null
+          ] }),
+          command.shortcut ? /* @__PURE__ */ jsx42("span", { className: shortcut, children: command.shortcut }) : null
+        ]
+      },
+      row3.key
+    );
+  };
+  return /* @__PURE__ */ jsx42(FloatingPortal8, { children: /* @__PURE__ */ jsx42(FloatingOverlay2, { className: overlay2, lockScroll: true, children: /* @__PURE__ */ jsx42(FloatingFocusManager6, { context, initialFocus: inputRef, children: /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      ref: refs.setFloating,
+      className: palette,
+      "aria-label": ariaLabel ?? "Command palette",
+      ...getFloatingProps(),
+      children: [
+        /* @__PURE__ */ jsx42(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            role: "combobox",
+            className: inputEl2,
+            value: query,
+            placeholder,
+            autoComplete: "off",
+            "aria-autocomplete": "list",
+            "aria-expanded": true,
+            "aria-controls": listId,
+            "aria-activedescendant": activeOptionId,
+            onChange: (event) => setQuery(event.target.value),
+            onKeyDown: handleKeyDown
+          }
+        ),
+        /* @__PURE__ */ jsx42(
+          "div",
+          {
+            ref: listRef,
+            id: listId,
+            role: "listbox",
+            className: list4,
+            onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+            children: filteredCommands.length === 0 ? /* @__PURE__ */ jsx42("div", { className: emptyState3, children: emptyMessage }) : isVirtualized ? /* @__PURE__ */ jsx42("div", { className: virtualSpacer2, style: { height: totalHeight }, children: visibleRows.map((row3, i) => {
+              const rowIndex = startIndex + i;
+              return renderRow(row3, rowIndex, {
+                position: "absolute",
+                top: rowIndex * rowHeight,
+                left: 0,
+                right: 0,
+                height: rowHeight
+              });
+            }) }) : rows.map((row3, rowIndex) => renderRow(row3, rowIndex))
+          }
+        )
+      ]
+    }
+  ) }) }) });
+}
+
+// src/components/CommandPalette/useCommandPaletteShortcut.ts
+import { useEffect as useEffect10 } from "react";
+function isMac() {
+  if (typeof navigator === "undefined") return false;
+  return /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? navigator.userAgent ?? "");
+}
+function useCommandPaletteShortcut(onOpenChange, options = {}) {
+  const { key = "k", metaKey, ctrlKey } = options;
+  useEffect10(() => {
+    const explicit = metaKey !== void 0 || ctrlKey !== void 0;
+    const useMeta = explicit ? Boolean(metaKey) : isMac();
+    const useCtrl = explicit ? Boolean(ctrlKey) : !isMac();
+    const handleKeyDown = (event) => {
+      if (event.key.toLowerCase() !== key.toLowerCase()) return;
+      if (event.metaKey !== useMeta) return;
+      if (event.ctrlKey !== useCtrl) return;
+      event.preventDefault();
+      onOpenChange(true);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onOpenChange, key, metaKey, ctrlKey]);
+}
+
 // src/index.ts
 import { vars as vars3, defaultThemeClass, defaultThemeVars } from "@vesture/tokens";
 export {
@@ -3952,6 +4230,7 @@ export {
   Card,
   Checkbox,
   Combobox,
+  CommandPalette,
   DataGrid,
   DatePicker,
   DateRangePicker,
@@ -3981,6 +4260,7 @@ export {
   TreeView,
   defaultThemeClass,
   defaultThemeVars,
+  useCommandPaletteShortcut,
   useToast,
   vars3 as vars
 };