@underverse-ui/underverse 2.0.30 → 2.0.31

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "sourceEntry": "src/index.ts",
   "totalExports": 263,
   "exports": [

package/dist/index.cjs

@@ -15838,6 +15838,7 @@ var Combobox = ({
   virtualized = false,
   estimatedItemHeight = 44,
   overscan = 8,
+  enableSearch: enableSearchProp,
   searchMode = "auto",
   onSearchChange,
   searchDebounceMs = 0,
@@ -15866,28 +15867,28 @@ var Combobox = ({
   const autoId = (0, import_react18.useId)();
   const resolvedId = id ? String(id) : `combobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
-  const enableSearch = options.length > 10 || searchMode === "manual" || minSearchLength > 0 || !!onSearchChange;
+  const isSearchEnabled = enableSearchProp ?? (options.length > 10 || searchMode === "manual" || minSearchLength > 0 || !!onSearchChange);
   const trimmedQuery = query.trim();
   const queryMeetsMinimum = trimmedQuery.length >= minSearchLength;
-  const shouldPromptForSearch = minSearchLength > 0 && !queryMeetsMinimum && (searchMode === "manual" || showSearchPromptWhenEmptyQuery);
+  const shouldPromptForSearch = isSearchEnabled && minSearchLength > 0 && !queryMeetsMinimum && (searchMode === "manual" || showSearchPromptWhenEmptyQuery);
   const filteredOptions = React31.useMemo(
     () => {
       if (shouldPromptForSearch) return [];
-      if (!enableSearch || searchMode === "manual") return options;
+      if (!isSearchEnabled || searchMode === "manual") return options;
       const normalizedQuery = trimmedQuery.toLowerCase();
       if (!normalizedQuery) return options;
       return options.filter((o) => getOptionLabel(o).toLowerCase().includes(normalizedQuery));
     },
-    [enableSearch, options, searchMode, shouldPromptForSearch, trimmedQuery]
+    [isSearchEnabled, options, searchMode, shouldPromptForSearch, trimmedQuery]
   );
   const renderLimitedOptions = React31.useMemo(
     () => {
-      if (trimmedQuery || maxInitialOptions === void 0 || maxInitialOptions < 1) {
+      if (!isSearchEnabled || trimmedQuery || maxInitialOptions === void 0 || maxInitialOptions < 1) {
         return filteredOptions;
       }
       return filteredOptions.slice(0, maxInitialOptions);
     },
-    [filteredOptions, maxInitialOptions, trimmedQuery]
+    [filteredOptions, isSearchEnabled, maxInitialOptions, trimmedQuery]
   );
   const canVirtualize = virtualized && !groupBy;
   const optionVirtualizer = (0, import_react_virtual.useVirtualizer)({
@@ -15948,7 +15949,7 @@ var Combobox = ({
       setQuery("");
       setActiveIndex(null);
       scrollVirtualListToStart();
-    } else if (enableSearch) {
+    } else if (isSearchEnabled) {
       const triggerWindow = triggerRef.current?.ownerDocument.defaultView;
       if (!triggerWindow) return void 0;
       const timeoutId = triggerWindow.setTimeout(() => {
@@ -15957,14 +15958,14 @@ var Combobox = ({
       return () => triggerWindow.clearTimeout(timeoutId);
     }
     return void 0;
-  }, [enableSearch, open, scrollVirtualListToStart]);
+  }, [isSearchEnabled, open, scrollVirtualListToStart]);
   React31.useEffect(() => {
-    if (!onSearchChange) return void 0;
+    if (!isSearchEnabled || !onSearchChange) return void 0;
     const triggerWindow = triggerRef.current?.ownerDocument.defaultView;
     if (!triggerWindow) return void 0;
     const timeoutId = triggerWindow.setTimeout(() => onSearchChange(query), searchDebounceMs);
     return () => triggerWindow.clearTimeout(timeoutId);
-  }, [onSearchChange, query, searchDebounceMs]);
+  }, [isSearchEnabled, onSearchChange, query, searchDebounceMs]);
   React31.useEffect(() => {
     if (process.env.NODE_ENV !== "production" && options.length > 300 && !virtualized && searchMode !== "manual" && maxInitialOptions === void 0) {
       console.warn(
@@ -16100,7 +16101,7 @@ var Combobox = ({
       style: usePortal ? { maxHeight: "var(--underverse-popover-available-height)" } : void 0,
       className: cn("w-full overflow-hidden", usePortal && "flex min-h-0 flex-col", getPanelBorderRadiusClass(resolvedBorderMode)),
       children: [
-        enableSearch && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("relative shrink-0 border-b border-border/30", size === "xs" ? "p-1.5" : size === "sm" ? "p-2" : size === "lg" ? "p-3" : size === "xl" ? "p-3.5" : "p-2.5"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative", children: [
+        isSearchEnabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("relative shrink-0 border-b border-border/30", size === "xs" ? "p-1.5" : size === "sm" ? "p-2" : size === "lg" ? "p-3" : size === "xl" ? "p-3.5" : "p-2.5"), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             import_lucide_react15.Search,
             {
@@ -16256,11 +16257,24 @@ var Combobox = ({
     "aria-invalid": !!effectiveError,
     id: resolvedId,
     "aria-labelledby": labelId,
+    "aria-activedescendant": activeIndex !== null ? `${resolvedId}-item-${activeIndex}` : void 0,
     onKeyDown: (e) => {
       if (disabled) return;
-      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      if (!open && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")) {
         e.preventDefault();
         setOpen(true);
+        if (!isSearchEnabled && e.key === "ArrowDown") moveActiveIndex(1);
+      } else if (open && !isSearchEnabled && e.key === "ArrowDown") {
+        e.preventDefault();
+        moveActiveIndex(1);
+      } else if (open && !isSearchEnabled && e.key === "ArrowUp") {
+        e.preventDefault();
+        moveActiveIndex(-1);
+      } else if (open && !isSearchEnabled && e.key === "Enter") {
+        e.preventDefault();
+        if (activeIndex !== null && renderLimitedOptions[activeIndex] && !getOptionDisabled(renderLimitedOptions[activeIndex])) {
+          handleSelect(renderLimitedOptions[activeIndex]);
+        }
       } else if (e.key === "Escape") {
         e.preventDefault();
         setOpen(false);
@@ -26250,6 +26264,7 @@ var MultiCombobox = ({
   virtualized = false,
   estimatedItemHeight = 44,
   overscan = 8,
+  enableSearch: enableSearchProp,
   searchMode = "auto",
   onSearchChange,
   searchDebounceMs = 0,
@@ -26282,25 +26297,25 @@ var MultiCombobox = ({
     ),
     [options]
   );
-  const enableSearch = normalizedOptions.length > 10 || searchMode === "manual" || minSearchLength > 0 || !!onSearchChange;
+  const isSearchEnabled = enableSearchProp ?? (normalizedOptions.length > 10 || searchMode === "manual" || minSearchLength > 0 || !!onSearchChange);
   const trimmedQuery = query.trim();
   const queryMeetsMinimum = trimmedQuery.length >= minSearchLength;
-  const shouldPromptForSearch = minSearchLength > 0 && !queryMeetsMinimum && (searchMode === "manual" || showSearchPromptWhenEmptyQuery);
+  const shouldPromptForSearch = isSearchEnabled && minSearchLength > 0 && !queryMeetsMinimum && (searchMode === "manual" || showSearchPromptWhenEmptyQuery);
   const filtered = React47.useMemo(() => {
     if (shouldPromptForSearch) return [];
-    if (!enableSearch || searchMode === "manual") return normalizedOptions;
+    if (!isSearchEnabled || searchMode === "manual") return normalizedOptions;
     const normalizedQuery = trimmedQuery.toLowerCase();
     if (!normalizedQuery) return normalizedOptions;
     return normalizedOptions.filter(
       (opt) => opt.label.toLowerCase().includes(normalizedQuery) || opt.description?.toLowerCase().includes(normalizedQuery)
     );
-  }, [enableSearch, normalizedOptions, searchMode, shouldPromptForSearch, trimmedQuery]);
+  }, [isSearchEnabled, normalizedOptions, searchMode, shouldPromptForSearch, trimmedQuery]);
   const renderLimitedOptions = React47.useMemo(() => {
-    if (trimmedQuery || maxInitialOptions === void 0 || maxInitialOptions < 1) {
+    if (!isSearchEnabled || trimmedQuery || maxInitialOptions === void 0 || maxInitialOptions < 1) {
       return filtered;
     }
     return filtered.slice(0, maxInitialOptions);
-  }, [filtered, maxInitialOptions, trimmedQuery]);
+  }, [filtered, isSearchEnabled, maxInitialOptions, trimmedQuery]);
   const canVirtualize = virtualized && !groupBy;
   const optionVirtualizer = (0, import_react_virtual2.useVirtualizer)({
     count: canVirtualize ? renderLimitedOptions.length : 0,
@@ -26344,24 +26359,32 @@ var MultiCombobox = ({
     onChange(value.filter((v) => v !== val));
   };
   const handleKeyDown2 = (e) => {
-    if (!open) setOpen(true);
     if (e.key === "ArrowDown") {
       e.preventDefault();
+      if (!open) setOpen(true);
       if (renderLimitedOptions.length === 0) return;
       const next = activeIndex === null ? 0 : (activeIndex + 1) % renderLimitedOptions.length;
       setActiveIndex(next);
       scrollVirtualListToIndex(next);
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
+      if (!open) setOpen(true);
       if (renderLimitedOptions.length === 0) return;
       const next = activeIndex === null ? renderLimitedOptions.length - 1 : (activeIndex - 1 + renderLimitedOptions.length) % renderLimitedOptions.length;
       setActiveIndex(next);
       scrollVirtualListToIndex(next);
     } else if (e.key === "Enter") {
       e.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
       if (activeIndex !== null && renderLimitedOptions[activeIndex]) {
         toggleSelect(renderLimitedOptions[activeIndex].value);
       }
+    } else if (e.key === " " && !open) {
+      e.preventDefault();
+      setOpen(true);
     } else if (e.key === "Escape") {
       e.preventDefault();
       setOpen(false);
@@ -26377,7 +26400,7 @@ var MultiCombobox = ({
     }
   }, [disabled, required, value.length]);
   React47.useEffect(() => {
-    if (open && enableSearch) {
+    if (open && isSearchEnabled) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 100);
@@ -26386,12 +26409,12 @@ var MultiCombobox = ({
       setActiveIndex(null);
       scrollVirtualListToStart();
     }
-  }, [enableSearch, open, scrollVirtualListToStart]);
+  }, [isSearchEnabled, open, scrollVirtualListToStart]);
   React47.useEffect(() => {
-    if (!onSearchChange) return void 0;
+    if (!isSearchEnabled || !onSearchChange) return void 0;
     const timeoutId = window.setTimeout(() => onSearchChange(query), searchDebounceMs);
     return () => window.clearTimeout(timeoutId);
-  }, [onSearchChange, query, searchDebounceMs]);
+  }, [isSearchEnabled, onSearchChange, query, searchDebounceMs]);
   React47.useEffect(() => {
     if (process.env.NODE_ENV !== "production" && normalizedOptions.length > 300 && !virtualized && searchMode !== "manual" && maxInitialOptions === void 0) {
       console.warn(
@@ -26466,6 +26489,10 @@ var MultiCombobox = ({
       return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "li",
         {
+          id: `${resolvedId}-option-${index}`,
+          role: "option",
+          "aria-selected": isSelected,
+          "aria-disabled": isDisabled,
           ref: (node) => {
             measureRef?.(node);
             listRef.current[index] = node;
@@ -26477,7 +26504,7 @@ var MultiCombobox = ({
             e.preventDefault();
             e.stopPropagation();
             if (!isDisabled) toggleSelect(item.value);
-            inputRef.current?.focus();
+            (isSearchEnabled ? inputRef.current : triggerRef.current)?.focus();
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cn("dropdown-item", isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"), children: renderOption(item, isSelected) })
         },
@@ -26487,6 +26514,10 @@ var MultiCombobox = ({
     return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "li",
       {
+        id: `${resolvedId}-option-${index}`,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": isDisabled,
         ref: (node) => {
           measureRef?.(node);
           listRef.current[index] = node;
@@ -26498,7 +26529,7 @@ var MultiCombobox = ({
           e.preventDefault();
           e.stopPropagation();
           if (!isDisabled) toggleSelect(item.value);
-          inputRef.current?.focus();
+          (isSearchEnabled ? inputRef.current : triggerRef.current)?.focus();
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           "div",
@@ -26554,7 +26585,7 @@ var MultiCombobox = ({
         }
       )
     ] }),
-    enableSearch && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "relative border-b border-border/40", children: [
+    isSearchEnabled && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "relative border-b border-border/40", children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react27.Search, { className: cn("absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", sizeStyles8[size].icon) }),
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "input",
@@ -26666,6 +26697,8 @@ var MultiCombobox = ({
       "aria-controls": listboxId,
       "aria-required": required,
       "aria-invalid": !!effectiveError,
+      "aria-activedescendant": activeIndex !== null ? `${resolvedId}-option-${activeIndex}` : void 0,
+      onKeyDown: !isSearchEnabled ? handleKeyDown2 : void 0,
       className: cn(
         "group flex w-full items-center gap-2 transition-all duration-200",
         formControlFixedClass,
@@ -26735,7 +26768,13 @@ var MultiCombobox = ({
                 e.stopPropagation();
                 handleClearAll();
               },
-              onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && handleClearAll(),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleClearAll();
+                }
+              },
               className: "opacity-0 group-hover:opacity-100 transition-all duration-200 p-1 rounded-lg hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
               children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_lucide_react27.X, { className: "h-3.5 w-3.5" })
             }
@@ -28381,7 +28420,7 @@ function CategoryTreeSelect(props) {
   const trimmedQuery = (0, import_react26.useMemo)(() => query.trim(), [query]);
   const normalizedQuery = (0, import_react26.useMemo)(() => trimmedQuery.toLowerCase(), [trimmedQuery]);
   const queryMeetsMinimum = trimmedQuery.length >= minSearchLength;
-  const shouldPromptForSearch = minSearchLength > 0 && !queryMeetsMinimum && (searchMode === "manual" || showSearchPromptWhenEmptyQuery);
+  const shouldPromptForSearch = isSearchEnabled && minSearchLength > 0 && !queryMeetsMinimum && (searchMode === "manual" || showSearchPromptWhenEmptyQuery);
   const isSearchMode = isSearchEnabled && normalizedQuery.length > 0;
   const shouldAutoExpandSearchResults = searchMode === "auto" && isSearchMode;
   const effectiveExpandedNodes = (0, import_react26.useMemo)(() => getExpandedNodesState(expandedIds, expandedNodes), [expandedIds, expandedNodes]);
@@ -28425,12 +28464,12 @@ function CategoryTreeSelect(props) {
     return visible;
   }, [byId, categories, childrenMap, isSearchMode, normalizedQuery, searchMode, shouldPromptForSearch]);
   (0, import_react26.useEffect)(() => {
-    if (!onSearchChange) return;
+    if (!isSearchEnabled || !onSearchChange) return;
     const timeoutId = window.setTimeout(() => {
       onSearchChange(trimmedQuery);
     }, Math.max(0, searchDebounceMs));
     return () => window.clearTimeout(timeoutId);
-  }, [onSearchChange, searchDebounceMs, trimmedQuery]);
+  }, [isSearchEnabled, onSearchChange, searchDebounceMs, trimmedQuery]);
   (0, import_react26.useEffect)(() => {
     if (!isOpen) return;
     if (!isSearchEnabled) return;
@@ -28513,7 +28552,7 @@ function CategoryTreeSelect(props) {
   const flattenedRows = (0, import_react26.useMemo)(() => {
     if (shouldPromptForSearch) return [];
     const rows = flattenVisibleCategories(effectiveParentCategories, effectiveChildrenMap, effectiveExpandedNodes, shouldAutoExpandSearchResults);
-    if (trimmedQuery || maxInitialOptions === void 0 || maxInitialOptions < 1) {
+    if (!isSearchEnabled || trimmedQuery || maxInitialOptions === void 0 || maxInitialOptions < 1) {
       return rows;
     }
     const limitedRows = rows.slice(0, maxInitialOptions);
@@ -28541,6 +28580,7 @@ function CategoryTreeSelect(props) {
     effectiveExpandedNodes,
     effectiveParentCategories,
     expandToId,
+    isSearchEnabled,
     maxInitialOptions,
     selectedIds,
     shouldAutoExpandSearchResults,