@underverse-ui/underverse 2.0.30 → 2.0.31

package/dist/index.d.cts

@@ -1871,6 +1871,8 @@ interface ComboboxProps {
     estimatedItemHeight?: number;
     /** Number of extra rows rendered above and below the visible range. Default: 8 */
     overscan?: number;
+    /** Control whether the dropdown renders search UI and runs search logic. Defaults to automatic detection. */
+    enableSearch?: boolean;
     /** Use "manual" to let callers provide server-filtered options via onSearchChange. Default: "auto" */
     searchMode?: "auto" | "manual";
     /** Called whenever the search query changes. Required for manual/server search. */
@@ -1940,6 +1942,8 @@ interface MultiComboboxProps {
     estimatedItemHeight?: number;
     /** Number of extra rows rendered above and below the visible range. Default: 8 */
     overscan?: number;
+    /** Control whether the dropdown renders search UI and runs search logic. Defaults to automatic detection. */
+    enableSearch?: boolean;
     /** Use "manual" to let callers provide server-filtered options via onSearchChange. Default: "auto" */
     searchMode?: "auto" | "manual";
     /** Called whenever the search query changes. Required for manual/server search. */
@@ -2193,8 +2197,8 @@ interface CategoryTreeSelectBaseProps {
     /** Called whenever expand/collapse changes the expanded branch ids. */
     onExpandedChange?: (expandedIds: number[]) => void;
     /**
-     * Enable search input for filtering categories.
-     * Default: auto-enabled when `categories.length > 10` (similar to MultiCombobox).
+     * Control whether search UI and search logic are enabled.
+     * Defaults to automatic detection from category count and search-related props.
      */
     enableSearch?: boolean;
     /** Replace built-in labels for localization or custom wording. */

package/dist/index.d.ts

@@ -1871,6 +1871,8 @@ interface ComboboxProps {
     estimatedItemHeight?: number;
     /** Number of extra rows rendered above and below the visible range. Default: 8 */
     overscan?: number;
+    /** Control whether the dropdown renders search UI and runs search logic. Defaults to automatic detection. */
+    enableSearch?: boolean;
     /** Use "manual" to let callers provide server-filtered options via onSearchChange. Default: "auto" */
     searchMode?: "auto" | "manual";
     /** Called whenever the search query changes. Required for manual/server search. */
@@ -1940,6 +1942,8 @@ interface MultiComboboxProps {
     estimatedItemHeight?: number;
     /** Number of extra rows rendered above and below the visible range. Default: 8 */
     overscan?: number;
+    /** Control whether the dropdown renders search UI and runs search logic. Defaults to automatic detection. */
+    enableSearch?: boolean;
     /** Use "manual" to let callers provide server-filtered options via onSearchChange. Default: "auto" */
     searchMode?: "auto" | "manual";
     /** Called whenever the search query changes. Required for manual/server search. */
@@ -2193,8 +2197,8 @@ interface CategoryTreeSelectBaseProps {
     /** Called whenever expand/collapse changes the expanded branch ids. */
     onExpandedChange?: (expandedIds: number[]) => void;
     /**
-     * Enable search input for filtering categories.
-     * Default: auto-enabled when `categories.length > 10` (similar to MultiCombobox).
+     * Control whether search UI and search logic are enabled.
+     * Defaults to automatic detection from category count and search-related props.
      */
     enableSearch?: boolean;
     /** Replace built-in labels for localization or custom wording. */

package/dist/index.js

@@ -4702,6 +4702,7 @@ var Combobox = ({
   virtualized = false,
   estimatedItemHeight = 44,
   overscan = 8,
+  enableSearch: enableSearchProp,
   searchMode = "auto",
   onSearchChange,
   searchDebounceMs = 0,
@@ -4730,28 +4731,28 @@ var Combobox = ({
   const autoId = useId4();
   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 = React19.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 = React19.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 = useVirtualizer({
@@ -4812,7 +4813,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(() => {
@@ -4821,14 +4822,14 @@ var Combobox = ({
       return () => triggerWindow.clearTimeout(timeoutId);
     }
     return void 0;
-  }, [enableSearch, open, scrollVirtualListToStart]);
+  }, [isSearchEnabled, open, scrollVirtualListToStart]);
   React19.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]);
   React19.useEffect(() => {
     if (process.env.NODE_ENV !== "production" && options.length > 300 && !virtualized && searchMode !== "manual" && maxInitialOptions === void 0) {
       console.warn(
@@ -4964,7 +4965,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__ */ jsx22("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__ */ jsxs18("div", { className: "relative", children: [
+        isSearchEnabled && /* @__PURE__ */ jsx22("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__ */ jsxs18("div", { className: "relative", children: [
           /* @__PURE__ */ jsx22(
             Search4,
             {
@@ -5120,11 +5121,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);
@@ -15054,6 +15068,7 @@ var MultiCombobox = ({
   virtualized = false,
   estimatedItemHeight = 44,
   overscan = 8,
+  enableSearch: enableSearchProp,
   searchMode = "auto",
   onSearchChange,
   searchDebounceMs = 0,
@@ -15086,25 +15101,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 = React35.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 = React35.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 = useVirtualizer2({
     count: canVirtualize ? renderLimitedOptions.length : 0,
@@ -15148,24 +15163,32 @@ var MultiCombobox = ({
     onChange(value.filter((v) => v !== val));
   };
   const handleKeyDown = (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);
@@ -15181,7 +15204,7 @@ var MultiCombobox = ({
     }
   }, [disabled, required, value.length]);
   React35.useEffect(() => {
-    if (open && enableSearch) {
+    if (open && isSearchEnabled) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 100);
@@ -15190,12 +15213,12 @@ var MultiCombobox = ({
       setActiveIndex(null);
       scrollVirtualListToStart();
     }
-  }, [enableSearch, open, scrollVirtualListToStart]);
+  }, [isSearchEnabled, open, scrollVirtualListToStart]);
   React35.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]);
   React35.useEffect(() => {
     if (process.env.NODE_ENV !== "production" && normalizedOptions.length > 300 && !virtualized && searchMode !== "manual" && maxInitialOptions === void 0) {
       console.warn(
@@ -15270,6 +15293,10 @@ var MultiCombobox = ({
       return /* @__PURE__ */ jsx39(
         "li",
         {
+          id: `${resolvedId}-option-${index}`,
+          role: "option",
+          "aria-selected": isSelected,
+          "aria-disabled": isDisabled,
           ref: (node) => {
             measureRef?.(node);
             listRef.current[index] = node;
@@ -15281,7 +15308,7 @@ var MultiCombobox = ({
             e.preventDefault();
             e.stopPropagation();
             if (!isDisabled) toggleSelect(item.value);
-            inputRef.current?.focus();
+            (isSearchEnabled ? inputRef.current : triggerRef.current)?.focus();
           },
           children: /* @__PURE__ */ jsx39("div", { className: cn("dropdown-item", isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"), children: renderOption(item, isSelected) })
         },
@@ -15291,6 +15318,10 @@ var MultiCombobox = ({
     return /* @__PURE__ */ jsx39(
       "li",
       {
+        id: `${resolvedId}-option-${index}`,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": isDisabled,
         ref: (node) => {
           measureRef?.(node);
           listRef.current[index] = node;
@@ -15302,7 +15333,7 @@ var MultiCombobox = ({
           e.preventDefault();
           e.stopPropagation();
           if (!isDisabled) toggleSelect(item.value);
-          inputRef.current?.focus();
+          (isSearchEnabled ? inputRef.current : triggerRef.current)?.focus();
         },
         children: /* @__PURE__ */ jsxs32(
           "div",
@@ -15358,7 +15389,7 @@ var MultiCombobox = ({
         }
       )
     ] }),
-    enableSearch && /* @__PURE__ */ jsxs32("div", { className: "relative border-b border-border/40", children: [
+    isSearchEnabled && /* @__PURE__ */ jsxs32("div", { className: "relative border-b border-border/40", children: [
       /* @__PURE__ */ jsx39(Search5, { className: cn("absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", sizeStyles7[size].icon) }),
       /* @__PURE__ */ jsx39(
         "input",
@@ -15470,6 +15501,8 @@ var MultiCombobox = ({
       "aria-controls": listboxId,
       "aria-required": required,
       "aria-invalid": !!effectiveError,
+      "aria-activedescendant": activeIndex !== null ? `${resolvedId}-option-${activeIndex}` : void 0,
+      onKeyDown: !isSearchEnabled ? handleKeyDown : void 0,
       className: cn(
         "group flex w-full items-center gap-2 transition-all duration-200",
         formControlFixedClass,
@@ -15539,7 +15572,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__ */ jsx39(X12, { className: "h-3.5 w-3.5" })
             }
@@ -17170,7 +17209,7 @@ function CategoryTreeSelect(props) {
   const trimmedQuery = useMemo18(() => query.trim(), [query]);
   const normalizedQuery = useMemo18(() => 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 = useMemo18(() => getExpandedNodesState(expandedIds, expandedNodes), [expandedIds, expandedNodes]);
@@ -17214,12 +17253,12 @@ function CategoryTreeSelect(props) {
     return visible;
   }, [byId, categories, childrenMap, isSearchMode, normalizedQuery, searchMode, shouldPromptForSearch]);
   useEffect20(() => {
-    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]);
   useEffect20(() => {
     if (!isOpen) return;
     if (!isSearchEnabled) return;
@@ -17302,7 +17341,7 @@ function CategoryTreeSelect(props) {
   const flattenedRows = useMemo18(() => {
     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);
@@ -17330,6 +17369,7 @@ function CategoryTreeSelect(props) {
     effectiveExpandedNodes,
     effectiveParentCategories,
     expandToId,
+    isSearchEnabled,
     maxInitialOptions,
     selectedIds,
     shouldAutoExpandSearchResults,