@yahoo/uds-v5-wip 1.60.0 → 1.61.0

package/dist/components/dist/command.js

@@ -1,341 +0,0 @@
-"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: 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 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 jsx(CommandConfigContext.Provider, {
-		value: config,
-		children: jsx(CommandProvider, { children: 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(jsxs("div", {
-		...props.overlay,
-		children: [jsx("button", {
-			type: "button",
-			"aria-label": "Close command menu",
-			tabIndex: -1,
-			onClick: () => setOpen(false),
-			...props.dismiss
-		}), jsx("div", {
-			ref: panelRef,
-			role: "dialog",
-			"aria-modal": "true",
-			tabIndex: -1,
-			...props.dialogPanel,
-			children: 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 jsxs("div", {
-		...props.inputWrapper,
-		children: [jsx("span", {
-			...props.searchIcon,
-			children: jsxs("svg", {
-				width: "16",
-				height: "16",
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				children: [jsx("circle", {
-					cx: "11",
-					cy: "11",
-					r: "8"
-				}), jsx("line", {
-					x1: "21",
-					y1: "21",
-					x2: "16.65",
-					y2: "16.65"
-				})]
-			})
-		}), 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 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 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 jsxs("fieldset", {
-		ref: groupRef,
-		...props.group,
-		children: [heading && 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 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 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 jsx("hr", { ...props.separator });
-});
-//#endregion
-export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandProvider, CommandSeparator, CommandShortcut, useCommand };