@underverse-ui/underverse 2.0.29 → 2.0.31

package/dist/index.js

@@ -4,19 +4,19 @@ import {
   extractImageSrcsFromHtml,
   normalizeImageUrl,
   prepareUEditorContentForSave
-} from "./chunk-XTZTUDRE.js";
+} from "./chunk-57BKIC6J.js";
 import {
   EmojiPicker_default
-} from "./chunk-F7MX3XXK.js";
+} from "./chunk-S4UHFRL3.js";
 import {
   getEmojiImageUrl,
   getEmojiUnifiedCode,
   setEmojiBaseUrl
-} from "./chunk-LRIRY4DG.js";
+} from "./chunk-5W63IHIN.js";
 import "./chunk-4TYW5K4J.js";
 import {
   Modal_default
-} from "./chunk-LK6YWBI6.js";
+} from "./chunk-2P7TSXEE.js";
 import {
   DropdownMenuItem,
   DropdownMenuSeparator,
@@ -31,7 +31,7 @@ import {
   shadcnAnimationStyles,
   useShadCNAnimations,
   useUnderverseUIConfig
-} from "./chunk-5QWYO527.js";
+} from "./chunk-37MHVJMV.js";
 import {
   ForceInternalTranslationsProvider,
   NextIntlAdapter,
@@ -58,7 +58,7 @@ import {
   useUnderverseLocale,
   useUnderverseTranslations,
   vi_default
-} from "./chunk-A4GUPKHM.js";
+} from "./chunk-ZP7F4ZD7.js";
 import {
   __export,
   __require
@@ -4433,6 +4433,10 @@ var Tabs = ({
   tabs,
   defaultValue,
   className,
+  tabClassName,
+  activeTabClassName,
+  inactiveTabClassName,
+  indicatorClassName,
   contentClassName,
   variant = "default",
   size = "md",
@@ -4535,6 +4539,7 @@ var Tabs = ({
           stretch && orientation === "horizontal" && "flex-1 justify-center",
           tab.href && tab.disabled && "pointer-events-none cursor-not-allowed opacity-50"
         );
+        const consumerClassName = cn(tabClassName, isActive ? activeTabClassName : inactiveTabClassName);
         const sharedStyle = {
           outline: "none"
         };
@@ -4547,7 +4552,6 @@ var Tabs = ({
           "aria-selected": isActive,
           "aria-controls": panelId2,
           tabIndex: isActive ? 0 : -1,
-          className: sharedClassName,
           style: sharedStyle,
           onKeyDown: handleTabKeyDown
         };
@@ -4565,7 +4569,7 @@ var Tabs = ({
                   handleTabChange(tab.value);
                 }
               },
-              className: cn(sharedClassName, "no-underline"),
+              className: cn(sharedClassName, "no-underline", consumerClassName),
               children: [
                 Icon && /* @__PURE__ */ jsx21(Icon, { className: "h-4 w-4" }),
                 tab.label
@@ -4580,7 +4584,7 @@ var Tabs = ({
             ...sharedProps,
             onClick: () => !tab.disabled && handleTabChange(tab.value),
             disabled: tab.disabled,
-            className: cn(sharedClassName, "border-0 bg-transparent outline-none"),
+            className: cn(sharedClassName, "border-0 bg-transparent outline-none", consumerClassName),
             children: [
               Icon && /* @__PURE__ */ jsx21(Icon, { className: "h-4 w-4" }),
               tab.label
@@ -4589,7 +4593,16 @@ var Tabs = ({
           tab.value
         );
       }),
-      variant === "underline" && orientation === "horizontal" && /* @__PURE__ */ jsx21("div", { className: "absolute bottom-0 h-0.5 bg-primary transition-all duration-300 ease-out", style: underlineStyle })
+      variant === "underline" && orientation === "horizontal" && /* @__PURE__ */ jsx21(
+        "div",
+        {
+          className: cn(
+            "absolute bottom-0 h-0.5 bg-primary transition-all duration-300 ease-out",
+            indicatorClassName
+          ),
+          style: underlineStyle
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx21(
       "div",
@@ -4689,6 +4702,7 @@ var Combobox = ({
   virtualized = false,
   estimatedItemHeight = 44,
   overscan = 8,
+  enableSearch: enableSearchProp,
   searchMode = "auto",
   onSearchChange,
   searchDebounceMs = 0,
@@ -4717,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({
@@ -4799,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(() => {
@@ -4808,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(
@@ -4951,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,
             {
@@ -5107,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);
@@ -15041,6 +15068,7 @@ var MultiCombobox = ({
   virtualized = false,
   estimatedItemHeight = 44,
   overscan = 8,
+  enableSearch: enableSearchProp,
   searchMode = "auto",
   onSearchChange,
   searchDebounceMs = 0,
@@ -15073,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,
@@ -15135,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);
@@ -15168,7 +15204,7 @@ var MultiCombobox = ({
     }
   }, [disabled, required, value.length]);
   React35.useEffect(() => {
-    if (open && enableSearch) {
+    if (open && isSearchEnabled) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 100);
@@ -15177,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(
@@ -15257,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;
@@ -15268,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) })
         },
@@ -15278,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;
@@ -15289,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",
@@ -15345,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",
@@ -15457,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,
@@ -15526,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" })
             }
@@ -17157,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]);
@@ -17201,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;
@@ -17289,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);
@@ -17317,6 +17369,7 @@ function CategoryTreeSelect(props) {
     effectiveExpandedNodes,
     effectiveParentCategories,
     expandToId,
+    isSearchEnabled,
     maxInitialOptions,
     selectedIds,
     shouldAutoExpandSearchResults,