modern-cmdk 1.3.0 → 1.5.0

package/dist/core/index.mjs

@@ -1051,6 +1051,7 @@ function createCommandMachine(options = {}) {
 	const scheduler = createScheduler();
 	const emitter = new TypedEmitter();
 	const keyboardRegistry = new KeyboardShortcutRegistry();
+	const pendingSources = /* @__PURE__ */ new Set();
 	let frecencyEngine = null;
 	if (options.frecency?.enabled) {
 		frecencyEngine = new FrecencyEngine(options.frecency);
@@ -1224,12 +1225,19 @@ function createCommandMachine(options = {}) {
 			case "ITEMS_LOADED":
 				registry.registerItems(event.items);
 				searchEngine.index(event.items);
-				state = {
-					...state,
-					loading: false
-				};
 				refilter(state.search);
 				break;
+			case "LOADING": {
+				if (event.pending) pendingSources.add(event.source);
+				else pendingSources.delete(event.source);
+				const loading = pendingSources.size > 0;
+				if (loading !== state.loading) setState({
+					...state,
+					loading,
+					lastUpdated: Date.now()
+				});
+				break;
+			}
 			case "REGISTER_ITEM":
 				registry.registerItem(event.item);
 				searchEngine.index([event.item]);

package/dist/react/chunk-dialog.mjs

@@ -0,0 +1,237 @@
+'use client';
+import { createContext, use, useCallback, useEffect, useId, useMemo, useOptimistic, useRef, useSyncExternalStore, useTransition } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createCommandMachine } from "modern-cmdk";
+import { Dialog } from "radix-ui";
+// src/react/context.ts
+const CommandStableContext = createContext(null);
+CommandStableContext.displayName = "CommandStableContext";
+const CommandStateContext = createContext(null);
+CommandStateContext.displayName = "CommandStateContext";
+/** Consume stable context with a descriptive error — replaces 3-line boilerplate in every component */
+function useStableContext(component) {
+	const ctx = use(CommandStableContext);
+	if (!ctx) throw new Error(`${component} must be used within a <Command> component`);
+	return ctx;
+}
+/** Consume state context with a descriptive error — replaces 3-line boilerplate in every component */
+function useStateContext(component) {
+	const ctx = use(CommandStateContext);
+	if (!ctx) throw new Error(`${component} must be used within a <Command> component`);
+	return ctx;
+}
+const CommandGroupContext = createContext(null);
+CommandGroupContext.displayName = "CommandGroupContext";
+/** Context for the status container rendered outside the listbox — used by Command.Empty */
+const CommandListStatusContext = createContext(null);
+CommandListStatusContext.displayName = "CommandListStatusContext";
+// src/react/hooks/use-command.ts
+/** Core hook that binds a CommandMachine to React via useSyncExternalStore, useOptimistic, and a transition for optimistic active-item updates. */
+function useCommand(machine) {
+	const id = useId();
+	const [isPending, startTransition] = useTransition();
+	const state = useSyncExternalStore(machine.subscribe, machine.getState, machine.getState);
+	const filteredIdSet = useMemo(() => machine.getFilteredIdSet(), [state.filteredIds, machine]);
+	const [optimisticActiveId, rawSetOptimisticActiveId] = useOptimistic(state.activeId);
+	const setOptimisticActiveId = useCallback((id) => {
+		startTransition(() => {
+			rawSetOptimisticActiveId(id);
+		});
+	}, [rawSetOptimisticActiveId]);
+	const updateSearch = useCallback((query) => {
+		machine.send({
+			type: "SEARCH_CHANGE",
+			query
+		});
+	}, [machine]);
+	return {
+		state: optimisticActiveId !== state.activeId ? {
+			...state,
+			activeId: optimisticActiveId
+		} : state,
+		isPending,
+		updateSearch,
+		setOptimisticActiveId,
+		filteredIdSet,
+		id
+	};
+}
+// src/react/hooks/use-keyboard.ts
+/** Navigation key to machine direction mapping */
+const NAVIGATION_KEYS = {
+	ArrowDown: "next",
+	ArrowUp: "prev",
+	Home: "first",
+	End: "last"
+};
+/** Create a keydown handler for command palette keyboard navigation */
+function createKeydownHandler(machine, getState) {
+	return (event) => {
+		const { key } = event;
+		const state = getState();
+		const direction = NAVIGATION_KEYS[key];
+		if (direction) {
+			event.preventDefault();
+			machine.send({
+				type: "NAVIGATE",
+				direction
+			});
+			return;
+		}
+		switch (key) {
+			case "Enter": {
+				event.preventDefault();
+				const { activeId } = state;
+				if (activeId) machine.send({
+					type: "ITEM_SELECT",
+					id: activeId
+				});
+				break;
+			}
+			case "Backspace":
+				if (state.search === "" && state.pageStack.length > 0) {
+					event.preventDefault();
+					machine.send({ type: "PAGE_POP" });
+				}
+				break;
+			case "Escape":
+				event.preventDefault();
+				machine.send({ type: "CLOSE" });
+		}
+	};
+}
+// src/react/hooks/use-command-setup.ts
+/**
+* Shared setup for Command and Command.Dialog — creates machine once,
+* subscribes via useSyncExternalStore, memoizes context values, and
+* registers disposal on unmount.
+*
+* @param machineFactory - Called exactly once (first render) to create the machine.
+*   Subsequent renders skip it via ref guard.
+* @param label - Accessible label for the command palette (included in stable context).
+*/
+function useCommandSetup(machineFactory, label) {
+	const machineRef = useRef(null);
+	if (machineRef.current === null) machineRef.current = machineFactory();
+	const machine = machineRef.current;
+	const { state, isPending, updateSearch, setOptimisticActiveId, filteredIdSet, id } = useCommand(machine);
+	const listId = `${id}-list`;
+	const inputId = `${id}-input`;
+	useEffect(() => {
+		return () => {
+			machineRef.current?.[Symbol.dispose]();
+			machineRef.current = null;
+		};
+	}, []);
+	return {
+		machine,
+		state,
+		isPending,
+		listId,
+		inputId,
+		handleKeyDown: useMemo(() => createKeydownHandler(machine, () => machine.getState()), [machine]),
+		stableContextValue: useMemo(() => ({
+			machine,
+			rootId: id,
+			listId,
+			inputId,
+			label,
+			updateSearch,
+			setOptimisticActiveId
+		}), [
+			machine,
+			id,
+			listId,
+			inputId,
+			label,
+			updateSearch,
+			setOptimisticActiveId
+		]),
+		stateContextValue: useMemo(() => ({
+			state,
+			isPending,
+			filteredIdSet,
+			visibleIdSet: null,
+			virtualPositionMap: null
+		}), [
+			state,
+			isPending,
+			filteredIdSet
+		])
+	};
+}
+// src/react/dialog.tsx
+/** Dialog variant that wraps the command palette in a Radix UI Dialog with focus trap and overlay. */
+function CommandDialog({ children, className, overlayClassName, contentClassName, label = "Command palette", description = "Type a command or search...", open: controlledOpen, onOpenChange, container, ...machineOptions }) {
+	const onOpenChangeRef = useRef(onOpenChange);
+	onOpenChangeRef.current = onOpenChange;
+	const { machine, state, handleKeyDown, stableContextValue, stateContextValue, inputId } = useCommandSetup(() => createCommandMachine({
+		...machineOptions,
+		open: controlledOpen ?? false,
+		onOpenChange: (open) => {
+			onOpenChangeRef.current?.(open);
+		}
+	}), label);
+	useEffect(() => {
+		if (!state.open) return;
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [handleKeyDown, state.open]);
+	useEffect(() => {
+		if (controlledOpen !== void 0) machine.send({ type: controlledOpen ? "OPEN" : "CLOSE" });
+	}, [controlledOpen, machine]);
+	const handleOpenAutoFocus = useCallback((e) => {
+		e.preventDefault();
+		document.getElementById(inputId)?.focus();
+	}, [inputId]);
+	const handleRadixOpenChange = useCallback((open) => {
+		machine.send({ type: open ? "OPEN" : "CLOSE" });
+	}, [machine]);
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open: state.open,
+		onOpenChange: handleRadixOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, {
+			container,
+			children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+				"data-command-overlay": "",
+				"data-state": state.open ? "open" : "closed",
+				className: overlayClassName
+			}), /* @__PURE__ */ jsxs(Dialog.Content, {
+				"data-command-dialog": "",
+				"data-state": state.open ? "open" : "closed",
+				className,
+				"aria-label": label,
+				onOpenAutoFocus: handleOpenAutoFocus,
+				children: [
+					/* @__PURE__ */ jsx(Dialog.Title, {
+						className: "sr-only",
+						children: label
+					}),
+					/* @__PURE__ */ jsx(Dialog.Description, {
+						className: "sr-only",
+						children: description
+					}),
+					/* @__PURE__ */ jsx(CommandStableContext, {
+						value: stableContextValue,
+						children: /* @__PURE__ */ jsx(CommandStateContext, {
+							value: stateContextValue,
+							children: /* @__PURE__ */ jsx("div", {
+								"data-command-dialog-content": "",
+								className: contentClassName,
+								children: /* @__PURE__ */ jsx("div", {
+									"data-command-root": "",
+									role: "search",
+									"aria-label": label,
+									children
+								})
+							})
+						})
+					})
+				]
+			})]
+		})
+	});
+}
+export { CommandGroupContext as a, CommandStateContext as c, useCommand as i, useStableContext as l, useCommandSetup as n, CommandListStatusContext as o, createKeydownHandler as r, CommandStableContext as s, CommandDialog as t, useStateContext as u };

package/dist/react/dialog.d.mts

@@ -0,0 +1,18 @@
+
+import { ReactNode } from "react";
+import { CommandMachineOptions } from "modern-cmdk";
+export interface CommandDialogProps extends CommandMachineOptions {
+  readonly children?: ReactNode;
+  readonly className?: string;
+  readonly overlayClassName?: string;
+  readonly contentClassName?: string;
+  readonly label?: string;
+  readonly open?: boolean;
+  readonly onOpenChange?: (open: boolean) => void;
+  /** Accessible description for screen readers (default: 'Type a command or search...') */
+  readonly description?: string;
+  /** Container element for the portal (default: document.body) */
+  readonly container?: HTMLElement | null;
+}
+/** Dialog variant that wraps the command palette in a Radix UI Dialog with focus trap and overlay. */
+export declare function CommandDialog({ children, className, overlayClassName, contentClassName, label, description, open: controlledOpen, onOpenChange, container, ...machineOptions }: CommandDialogProps): ReactNode;

package/dist/react/dialog.mjs

@@ -0,0 +1,2 @@
+'use client';
+export { t as CommandDialog } from "./chunk-dialog.mjs";