@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/command.js

@@ -0,0 +1,341 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import { createProvider } from "../../core/dist/createProvider.js";
+import "../../core/dist/index.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region ../components/dist/command.js
+function defaultFilter(value, search, keywords) {
+	const hay = [value, ...keywords ?? []].join(" ").toLowerCase();
+	const needle = search.toLowerCase();
+	return hay.includes(needle) ? 1 : 0;
+}
+function getSelectableItems(container) {
+	return Array.from(container.querySelectorAll("[data-command-item]:not([aria-disabled=\"true\"])")).filter((el) => el.offsetParent !== null);
+}
+function selectItem(items, index) {
+	for (let i = 0; i < items.length; i++) items[i].setAttribute("aria-selected", i === index ? "true" : "false");
+}
+const CommandConfigContext = createContext({
+	filter: defaultFilter,
+	shouldFilter: true,
+	loop: false
+});
+const [CommandProvider, useCommand] = createProvider("Command", ({ children }) => {
+	const config = useContext(CommandConfigContext);
+	const [search, setSearch] = useState("");
+	const [internalValue, setInternalValue] = useState("");
+	const value = config.controlledValue ?? internalValue;
+	const setValue = useCallback((v) => {
+		setInternalValue(v);
+		config.onValueChange?.(v);
+	}, [config]);
+	const items = useRef(/* @__PURE__ */ new Map());
+	const [, forceRender] = useState(0);
+	const registerItem = useCallback((id, val, keywords) => {
+		items.current.set(id, {
+			value: val,
+			keywords
+		});
+		forceRender((n) => n + 1);
+	}, []);
+	const unregisterItem = useCallback((id) => {
+		items.current.delete(id);
+		forceRender((n) => n + 1);
+	}, []);
+	const visibleCount = useMemo(() => {
+		if (!config.shouldFilter || !search) return items.current.size;
+		let count = 0;
+		for (const item of items.current.values()) if (config.filter(item.value, search, item.keywords) > 0) count++;
+		return count;
+	}, [search, config]);
+	return {
+		context: {
+			search,
+			setSearch,
+			value,
+			setValue,
+			filter: config.filter,
+			shouldFilter: config.shouldFilter,
+			loop: config.loop,
+			registerItem,
+			unregisterItem,
+			items: items.current,
+			visibleCount
+		},
+		render: /* @__PURE__ */ jsx(Fragment, { children })
+	};
+});
+function CommandRoot({ slotProps, label, children }) {
+	const ctx = useCommand();
+	const rootRef = useRef(null);
+	const handleKeyDown = useCallback((e) => {
+		const container = rootRef.current;
+		if (!container) return;
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			e.preventDefault();
+			const selectableItems = getSelectableItems(container);
+			if (selectableItems.length === 0) return;
+			const currentIndex = selectableItems.findIndex((el) => el.getAttribute("aria-selected") === "true");
+			let nextIndex;
+			if (e.key === "ArrowDown") {
+				nextIndex = currentIndex + 1;
+				if (nextIndex >= selectableItems.length) nextIndex = ctx.loop ? 0 : selectableItems.length - 1;
+			} else {
+				nextIndex = currentIndex - 1;
+				if (nextIndex < 0) nextIndex = ctx.loop ? selectableItems.length - 1 : 0;
+			}
+			selectItem(selectableItems, nextIndex);
+			selectableItems[nextIndex].scrollIntoView({ block: "nearest" });
+			const itemValue = selectableItems[nextIndex].getAttribute("data-value") ?? "";
+			ctx.setValue(itemValue);
+		}
+		if (e.key === "Enter") {
+			e.preventDefault();
+			container.querySelector("[data-command-item][aria-selected=\"true\"]")?.click();
+		}
+	}, [ctx]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: rootRef,
+		role: "listbox",
+		"aria-label": label ?? "Command menu",
+		onKeyDown: handleKeyDown,
+		...slotProps.root,
+		children
+	});
+}
+/**
+* @description A searchable command menu for quick actions and navigation. Provides fuzzy filtering, keyboard navigation, and composable sub-components.
+*/
+const Command = createComponent(({ props, children, value: controlledValue, onValueChange, filter: filterFn, shouldFilter = true, loop = false, label }) => {
+	const config = useMemo(() => ({
+		filter: filterFn ?? defaultFilter,
+		shouldFilter,
+		loop,
+		controlledValue,
+		onValueChange
+	}), [
+		filterFn,
+		shouldFilter,
+		loop,
+		controlledValue,
+		onValueChange
+	]);
+	return /* @__PURE__ */ jsx(CommandConfigContext.Provider, {
+		value: config,
+		children: /* @__PURE__ */ jsx(CommandProvider, { children: /* @__PURE__ */ jsx(CommandRoot, {
+			slotProps: props,
+			label,
+			children
+		}) })
+	});
+});
+/**
+* @description Command menu rendered inside a modal dialog. Typically triggered by Cmd+K / Ctrl+K.
+*/
+const CommandDialog = createComponent(({ props, children, open: controlledOpen, onOpenChange, filter, shouldFilter, loop, label }) => {
+	const [internalOpen, setInternalOpen] = useState(false);
+	const open = controlledOpen ?? internalOpen;
+	const setOpen = onOpenChange ?? setInternalOpen;
+	const panelRef = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		document.body.style.overflow = "hidden";
+		panelRef.current?.focus();
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			document.body.style.overflow = "";
+		};
+	}, [open, setOpen]);
+	if (!open) return null;
+	return createPortal(/* @__PURE__ */ jsxs("div", {
+		...props.overlay,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Close command menu",
+			tabIndex: -1,
+			onClick: () => setOpen(false),
+			...props.dismiss
+		}), /* @__PURE__ */ jsx("div", {
+			ref: panelRef,
+			role: "dialog",
+			"aria-modal": "true",
+			tabIndex: -1,
+			...props.dialogPanel,
+			children: /* @__PURE__ */ jsx(Command, {
+				filter,
+				shouldFilter,
+				loop: loop ?? true,
+				label: label ?? "Command Menu",
+				_root: props.root,
+				children
+			})
+		})]
+	}), document.body);
+});
+/**
+* @description Search input for filtering command items
+*/
+const CommandInput = createComponent(({ props, placeholder, value: controlledValue, onValueChange }) => {
+	const ctx = useCommand();
+	const inputValue = controlledValue ?? ctx.search;
+	const { setSearch } = ctx;
+	const handleChange = useCallback((e) => {
+		const v = e.target.value;
+		setSearch(v);
+		onValueChange?.(v);
+	}, [setSearch, onValueChange]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props.inputWrapper,
+		children: [/* @__PURE__ */ jsx("span", {
+			...props.searchIcon,
+			children: /* @__PURE__ */ jsxs("svg", {
+				width: "16",
+				height: "16",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "11",
+					cy: "11",
+					r: "8"
+				}), /* @__PURE__ */ jsx("line", {
+					x1: "21",
+					y1: "21",
+					x2: "16.65",
+					y2: "16.65"
+				})]
+			})
+		}), /* @__PURE__ */ jsx("input", {
+			type: "text",
+			placeholder: placeholder ?? "Type a command or search...",
+			value: inputValue,
+			onChange: handleChange,
+			autoFocus: true,
+			autoComplete: "off",
+			autoCorrect: "off",
+			spellCheck: false,
+			...props.input
+		})]
+	});
+});
+/**
+* @description Scrollable container for command results
+*/
+const CommandList = createComponent(({ props, children }) => {
+	return /* @__PURE__ */ jsx("fieldset", {
+		...props.list,
+		children
+	});
+});
+/**
+* @description Displayed when no command items match the search query
+*/
+const CommandEmpty = createComponent(({ props, children }) => {
+	const ctx = useCommand();
+	if (ctx.visibleCount > 0 || !ctx.search) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props.empty,
+		children: children ?? "No results found."
+	});
+});
+/**
+* @description Groups related command items with an optional heading
+*/
+const CommandGroup = createComponent(({ props, children, heading }) => {
+	useCommand();
+	const groupRef = useRef(null);
+	useEffect(() => {
+		const el = groupRef.current;
+		if (!el) return;
+		if (el.querySelectorAll("[data-command-item]").length > 0) el.removeAttribute("hidden");
+		else el.setAttribute("hidden", "");
+	});
+	return /* @__PURE__ */ jsxs("fieldset", {
+		ref: groupRef,
+		...props.group,
+		children: [heading && /* @__PURE__ */ jsx("div", {
+			...props.groupHeading,
+			children: heading
+		}), children]
+	});
+});
+let itemIdCounter = 0;
+/**
+* @description A selectable command item. Supports onSelect callback, keywords for search, and disabled state.
+*/
+const CommandItem = createComponent(({ props, children, onSelect, value, keywords, disabled }) => {
+	const ctx = useCommand();
+	const idRef = useRef(`command-item-${++itemIdCounter}`);
+	const itemRef = useRef(null);
+	const textValue = useMemo(() => {
+		if (value) return value;
+		const extract = (node) => {
+			if (typeof node === "string") return node;
+			if (typeof node === "number") return String(node);
+			if (Array.isArray(node)) return node.map(extract).join("");
+			if (node && typeof node === "object" && "props" in node) return extract(node.props.children);
+			return "";
+		};
+		return extract(children);
+	}, [value, children]);
+	const { registerItem, unregisterItem } = ctx;
+	useEffect(() => {
+		const id = idRef.current;
+		registerItem(id, textValue, keywords);
+		return () => unregisterItem(id);
+	}, [
+		registerItem,
+		unregisterItem,
+		textValue,
+		keywords
+	]);
+	if (!(!ctx.shouldFilter || !ctx.search || ctx.filter(textValue, ctx.search, keywords) > 0)) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: itemRef,
+		role: "option",
+		tabIndex: 0,
+		"data-command-item": "",
+		"data-value": textValue,
+		"aria-selected": "false",
+		"aria-disabled": disabled ? "true" : void 0,
+		onClick: () => {
+			if (!disabled) onSelect?.(textValue);
+		},
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				if (!disabled) onSelect?.(textValue);
+			}
+		},
+		...props.item,
+		children
+	});
+});
+/**
+* @description Displays a keyboard shortcut hint alongside a command item
+*/
+const CommandShortcut = createComponent(({ props, children }) => {
+	return /* @__PURE__ */ jsx("span", {
+		...props.shortcut,
+		children
+	});
+});
+/**
+* @description Visual divider between command groups
+*/
+const CommandSeparator = createComponent(({ props }) => {
+	const ctx = useCommand();
+	if (ctx.search && ctx.visibleCount === 0) return null;
+	return /* @__PURE__ */ jsx("hr", { ...props.separator });
+});
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandProvider, CommandSeparator, CommandShortcut, useCommand };