@expcat/tigercat-react 2.1.0 → 2.1.2

package/dist/{chunk-UCBW5RJN.mjs → chunk-RGVU4EMA.mjs}

@@ -33,7 +33,7 @@ import {
   getPictureCardClasses,
   getUploadStatusIconClasses
 } from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var spinnerSvg = getSpinnerSVG("spinner");
 var Upload = ({
   accept,
@@ -133,6 +133,11 @@ var Upload = ({
       onExceed?.(prepared.rejectedExceedFiles, fileList);
     }
     let nextFileList = [...fileList];
+    const notifyFileList = (file) => {
+      const nextList = [...nextFileList];
+      updateFileList(nextList);
+      onChange?.(file, nextList);
+    };
     for (const file of prepared.acceptedFiles) {
       const uploadFile = fileToUploadFile(file);
       nextFileList = [...nextFileList, uploadFile];
@@ -141,7 +146,7 @@ var Upload = ({
         onChange(uploadFile, nextFileList);
       }
       if (autoUpload && !queue) {
-        await uploadOne(file, uploadFile, () => updateFileList([...nextFileList]));
+        await uploadOne(file, uploadFile, () => notifyFileList(uploadFile));
       }
     }
     if (autoUpload && queue) {
@@ -154,7 +159,7 @@ var Upload = ({
         async (item) => {
           const uploadFile = nextFileList.find((candidate) => candidate.uid === item.id);
           if (!uploadFile) return;
-          await uploadOne(item.file, uploadFile, () => updateFileList([...nextFileList]));
+          await uploadOne(item.file, uploadFile, () => notifyFileList(uploadFile));
         },
         { concurrency: maxConcurrent, onChange: onQueueChange }
       );
@@ -266,7 +271,7 @@ var Upload = ({
   };
   const renderUploadButton = () => {
     if (drag) {
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsx(
         "div",
         {
           className: getDragAreaClasses(isDragging, disabled),
@@ -279,7 +284,7 @@ var Upload = ({
           tabIndex: disabled ? -1 : 0,
           "aria-disabled": disabled,
           "aria-label": labels.dragAreaAriaLabel,
-          children: [
+          children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               "svg",
               {
@@ -308,7 +313,7 @@ var Upload = ({
             maxSize && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: interpolateUploadLabel(labels.maxSizeInfoText, {
               maxSize: formatFileSize(maxSize)
             }) })
-          ]
+          ] })
         }
       );
     }

package/dist/{chunk-IBSOUQGB.mjs → chunk-RRGPDFDI.mjs}

@@ -155,14 +155,17 @@ var FormWizard = ({
   ]);
   const handleStepChange = useCallback(
     async (nextIndex) => {
-      if (nextIndex === currentIndex || steps[nextIndex]?.disabled) return;
-      if (nextIndex > currentIndex) {
+      if (nextIndex === currentIndex) return;
+      const direction2 = nextIndex > currentIndex ? 1 : -1;
+      if (direction2 === 1) {
         const ok = await runBeforeNext();
         if (!ok) return;
       }
-      setCurrent(nextIndex);
+      const target = findNextUnskipped(nextIndex, direction2);
+      if (target === currentIndex) return;
+      setCurrent(target);
     },
-    [currentIndex, runBeforeNext, setCurrent, steps]
+    [currentIndex, runBeforeNext, setCurrent, findNextUnskipped]
   );
   const contentNode = useMemo(() => {
     if (!currentStep) return null;

package/dist/{chunk-ZH5ZBLAN.mjs → chunk-RUQ3F3MV.mjs}

@@ -21,6 +21,25 @@ import {
   getFormItemAsteriskClasses
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
+function isEventTarget(value) {
+  return value !== null && typeof value === "object";
+}
+function extractFormChangeValue(argument) {
+  if (argument === void 0) {
+    return { found: false };
+  }
+  if (argument !== null && typeof argument === "object" && "target" in argument) {
+    const target = argument.target;
+    if (isEventTarget(target)) {
+      const type = typeof target.type === "string" ? target.type.toLowerCase() : "";
+      if (type === "checkbox" || type === "radio") {
+        return { found: true, value: target.checked };
+      }
+      return { found: true, value: target.value };
+    }
+  }
+  return { found: true, value: argument };
+}
 function hasRequiredRule(maybeRules) {
   if (!maybeRules) return false;
   const ruleArr = Array.isArray(maybeRules) ? maybeRules : [maybeRules];
@@ -129,11 +148,19 @@ var FormItem = ({
       formContext.validateField(name, rules, "blur");
     }
   }, [name, formContext, rules]);
-  const handleChange = useCallback(() => {
-    if (name && formContext) {
+  const handleChange = useCallback(
+    (argument) => {
+      if (!name || !formContext) {
+        return;
+      }
+      const extracted = extractFormChangeValue(argument);
+      if (extracted.found) {
+        formContext.updateValue(name, extracted.value);
+      }
       formContext.validateField(name, rules, "change");
-    }
-  }, [name, formContext, rules]);
+    },
+    [name, formContext, rules]
+  );
   const hasError = !!errorMessage;
   const popupErrorVisible = showMessage && hasError && errorDisplayMode === "popup";
   const overlay = useAnchoredOverlay({
@@ -172,9 +199,9 @@ var FormItem = ({
         onlyChild.props.onBlur?.(event);
         handleBlur();
       },
-      onChange: (event) => {
-        onlyChild.props.onChange?.(event);
-        handleChange();
+      onChange: (...args) => {
+        onlyChild.props.onChange?.(...args);
+        handleChange(args[0]);
       }
     };
     if (!isNativeElement) {

package/dist/{chunk-KVCI2346.mjs → chunk-S2V3HGLZ.mjs}

@@ -63,7 +63,7 @@ function useSelectState(props) {
     options = [],
     size = "md",
     disabled = false,
-    placeholder = "Select an option",
+    placeholder,
     searchable = false,
     searchValue,
     defaultSearchValue = "",
@@ -95,6 +95,7 @@ function useSelectState(props) {
     () => getSelectLabels(mergedLocale, labelsOverride),
     [mergedLocale, labelsOverride]
   );
+  const resolvedPlaceholder = resolveLocaleText(labels.placeholder, placeholder);
   const divProps = {};
   for (const [k, v] of Object.entries(props)) {
     if (!SELECT_KEYS.has(k)) divProps[k] = v;
@@ -132,7 +133,7 @@ function useSelectState(props) {
   const displayText = useMemo(() => {
     if (isMultiple) {
       const values = Array.isArray(value) ? value : [];
-      if (values.length === 0) return placeholder;
+      if (values.length === 0) return resolvedPlaceholder;
       const labels2 = [...allOptions, ...createdOptions].filter((opt) => values.includes(opt.value)).map((opt) => opt.label);
       if (maxTagCount !== void 0 && labels2.length > maxTagCount) {
         const visible = labels2.slice(0, maxTagCount);
@@ -140,9 +141,9 @@ function useSelectState(props) {
       }
       return labels2.join(", ");
     }
-    if (value === void 0 || value === null || value === "") return placeholder;
-    return [...allOptions, ...createdOptions].find((opt) => opt.value === value)?.label ?? placeholder;
-  }, [isMultiple, value, allOptions, createdOptions, placeholder, maxTagCount]);
+    if (value === void 0 || value === null || value === "") return resolvedPlaceholder;
+    return [...allOptions, ...createdOptions].find((opt) => opt.value === value)?.label ?? resolvedPlaceholder;
+  }, [isMultiple, value, allOptions, createdOptions, resolvedPlaceholder, maxTagCount]);
   const showClearButton = useMemo(
     () => clearable && !disabled && value !== void 0 && value !== null && value !== "" && (!Array.isArray(value) || value.length > 0),
     [clearable, disabled, value]
@@ -434,10 +435,10 @@ function useSelectState(props) {
     virtual,
     listHeight,
     disabled,
-    placeholder,
+    placeholder: resolvedPlaceholder,
     searchable,
     clearable,
-    emptyText: resolveLocaleText("No options found", emptyText, mergedLocale?.common?.emptyText),
+    emptyText: resolveLocaleText(labels.emptyText, emptyText),
     createOptionText,
     className,
     divProps,

package/dist/{chunk-PGD5RPKF.mjs → chunk-SVIJ2UZA.mjs}

@@ -7,6 +7,7 @@ import { useState, useMemo, useCallback } from "react";
 import {
   rateBaseClasses,
   getRateStarClasses,
+  rateHalfStarInnerClasses,
   rateActiveColor,
   rateInactiveColor,
   rateHoverColor,
@@ -126,7 +127,7 @@ var Rate = ({
               isHovering ? rateHoverColor : rateActiveColor
             ),
             style: { width: "50%" },
-            children: isChar ? /* @__PURE__ */ jsx("span", { children: character }) : starIcon
+            children: isChar ? /* @__PURE__ */ jsx("span", { className: rateHalfStarInnerClasses, children: character }) : /* @__PURE__ */ jsx("svg", { viewBox: starViewBox, fill: "currentColor", className: rateHalfStarInnerClasses, children: /* @__PURE__ */ jsx("path", { d: starPathD }) })
           }
         )
       ] }) : /* @__PURE__ */ jsx("span", { className: colorClass, children: isChar ? /* @__PURE__ */ jsx("span", { children: character }) : starIcon });

package/dist/{chunk-UETARXIK.mjs → chunk-SXWEFZOF.mjs}

@@ -32,6 +32,8 @@ import {
   getPickerOptionAria,
   getPickerTriggerKeyAction,
   getPickerNavigationIndex,
+  getPickerOptionId,
+  findFirstEnabledIndex,
   icon20ViewBox,
   chevronDownSolidIcon20PathD,
   closeSolidIcon20PathD,
@@ -178,6 +180,7 @@ var Cascader = (props) => {
   const [activePath, setActivePath] = useState([]);
   const [columnActiveIndices, setColumnActiveIndices] = useState([]);
   const [searchActiveIndex, setSearchActiveIndex] = useState(-1);
+  const [focusedColumnIndex, setFocusedColumnIndex] = useState(0);
   const [indexedSearchQuery, setIndexedSearchQuery] = useState(searchQuery);
   if (indexedSearchQuery !== searchQuery) {
     setIndexedSearchQuery(searchQuery);
@@ -231,6 +234,7 @@ var Cascader = (props) => {
       wasOpenRef.current = false;
       setColumnActiveIndices([]);
       setSearchActiveIndex(-1);
+      setFocusedColumnIndex(0);
       return;
     }
     if (wasOpenRef.current) return;
@@ -239,16 +243,21 @@ var Cascader = (props) => {
     updateSearchValue("");
   }, [isOpen, updateSearchValue, value]);
   useEffect(() => {
-    if (!virtual || !isOpen) return;
+    if (!isOpen) return;
     setColumnActiveIndices(
       (prev) => columns.map((col, i) => {
-        if (prev[i] !== void 0 && prev[i] >= 0 && prev[i] < col.options.length) {
+        if (prev[i] !== void 0 && prev[i] >= 0 && prev[i] < col.options.length && !col.options[prev[i]]?.disabled) {
           return prev[i];
         }
         return selectedIndexInColumn(col.options, col.selectedValue);
       })
     );
-  }, [virtual, isOpen, columns]);
+    setFocusedColumnIndex((prev) => {
+      const last = columns.length - 1;
+      if (last < 0) return 0;
+      return prev > last ? last : prev;
+    });
+  }, [isOpen, columns]);
   const toggleOpen = useCallback(() => {
     if (disabled) return;
     setIsOpen((prev) => !prev);
@@ -266,6 +275,7 @@ var Cascader = (props) => {
           next[level] = optionIndex;
           return next;
         });
+        setFocusedColumnIndex(level);
       }
       const hasChildren = isCascaderOptionExpandable(option);
       if (!hasChildren) {
@@ -286,6 +296,7 @@ var Cascader = (props) => {
           next[level] = optionIndex;
           return next;
         });
+        setFocusedColumnIndex(level);
       }
       if (expandTrigger !== "hover" || option.disabled) return;
       const newPath = activePath.slice(0, level);
@@ -309,8 +320,142 @@ var Cascader = (props) => {
     },
     [onChange]
   );
+  const isOptionDisabled = useCallback((option) => !!option.disabled, []);
+  const getColumnOptionDomId = useCallback(
+    (colIndex, optionIndex) => `${listboxId}-col${colIndex}-opt${optionIndex}`,
+    [listboxId]
+  );
+  const getCurrentColumnIndex = useCallback(() => {
+    const last = columns.length - 1;
+    if (last < 0) return 0;
+    if (focusedColumnIndex >= 0 && focusedColumnIndex <= last) return focusedColumnIndex;
+    return last;
+  }, [columns.length, focusedColumnIndex]);
+  const commitActiveOption = useCallback(() => {
+    if (isSearchMode) {
+      const item = searchResults[searchActiveIndex];
+      if (!item || item.disabled) return;
+      handleSearchResultClick(item.valuePath, item.disabled);
+      return;
+    }
+    const colIndex = getCurrentColumnIndex();
+    const col = columns[colIndex];
+    const idx = columnActiveIndices[colIndex] ?? -1;
+    const option = col?.options[idx];
+    if (!option || option.disabled) return;
+    handleOptionClick(option, colIndex);
+    if (isCascaderOptionExpandable(option)) {
+      const nextCol = colIndex + 1;
+      const childOptions = option.children ?? [];
+      const nextIdx = findFirstEnabledIndex(childOptions, isOptionDisabled);
+      setColumnActiveIndices((prev) => {
+        const next = prev.slice();
+        next[colIndex] = idx;
+        next[nextCol] = nextIdx;
+        return next;
+      });
+      setFocusedColumnIndex(nextCol);
+    }
+  }, [
+    isSearchMode,
+    searchResults,
+    searchActiveIndex,
+    handleSearchResultClick,
+    getCurrentColumnIndex,
+    columns,
+    columnActiveIndices,
+    handleOptionClick,
+    isOptionDisabled
+  ]);
+  const handleOpenListKeyDown = useCallback(
+    (e, fromSearchInput = false) => {
+      const key = e.key;
+      if (fromSearchInput && key === " ") return false;
+      if (isSearchMode) {
+        if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+          e.preventDefault();
+          e.stopPropagation();
+          setSearchActiveIndex(
+            (current) => getPickerNavigationIndex(searchResults, current, key, (item) => !!item.disabled)
+          );
+          return true;
+        }
+        if (key === "Enter" || key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+          commitActiveOption();
+          return true;
+        }
+        return false;
+      }
+      const colIndex = getCurrentColumnIndex();
+      const col = columns[colIndex];
+      if (!col) return false;
+      if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+        e.preventDefault();
+        e.stopPropagation();
+        const current = columnActiveIndices[colIndex] ?? -1;
+        const next = getPickerNavigationIndex(col.options, current, key, isOptionDisabled);
+        setColumnActiveIndices((prev) => {
+          const nextIndices = prev.slice();
+          nextIndices[colIndex] = next;
+          return nextIndices;
+        });
+        setFocusedColumnIndex(colIndex);
+        return true;
+      }
+      if (key === "ArrowRight") {
+        e.preventDefault();
+        e.stopPropagation();
+        const idx = columnActiveIndices[colIndex] ?? -1;
+        const option = col.options[idx];
+        if (option && !option.disabled && isCascaderOptionExpandable(option)) {
+          handleOptionClick(option, colIndex);
+          const childOptions = option.children ?? [];
+          const nextIdx = findFirstEnabledIndex(childOptions, isOptionDisabled);
+          setColumnActiveIndices((prev) => {
+            const next = prev.slice();
+            next[colIndex] = idx;
+            next[colIndex + 1] = nextIdx;
+            return next;
+          });
+          setFocusedColumnIndex(colIndex + 1);
+        }
+        return true;
+      }
+      if (key === "ArrowLeft") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (activePath.length > 0) {
+          setActivePath(activePath.slice(0, -1));
+          setFocusedColumnIndex(Math.max(0, colIndex - 1));
+        }
+        return true;
+      }
+      if (key === "Enter" || key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        commitActiveOption();
+        return true;
+      }
+      return false;
+    },
+    [
+      isSearchMode,
+      searchResults,
+      commitActiveOption,
+      getCurrentColumnIndex,
+      columns,
+      columnActiveIndices,
+      isOptionDisabled,
+      handleOptionClick,
+      activePath
+    ]
+  );
   const handleTriggerKeyDown = useCallback(
     (e) => {
+      if (disabled) return;
+      if (isOpen && handleOpenListKeyDown(e)) return;
       const action = getPickerTriggerKeyAction(e.key, isOpen);
       if (action === "none") return;
       e.preventDefault();
@@ -322,69 +467,99 @@ var Cascader = (props) => {
         setIsOpen(false);
       }
     },
-    [toggleOpen, isOpen]
+    [disabled, isOpen, handleOpenListKeyDown, toggleOpen]
+  );
+  const handleDropdownKeyDown = useCallback(
+    (e) => {
+      if (e.target instanceof HTMLInputElement) return;
+      if (!isOpen) return;
+      handleOpenListKeyDown(e);
+    },
+    [isOpen, handleOpenListKeyDown]
+  );
+  const handleSearchKeyDown = useCallback(
+    (e) => {
+      switch (e.key) {
+        case " ":
+          e.stopPropagation();
+          return;
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+          handleOpenListKeyDown(e, true);
+          return;
+        case "Escape":
+          e.preventDefault();
+          e.stopPropagation();
+          setIsOpen(false);
+          triggerRef.current?.focus();
+          return;
+        default:
+          return;
+      }
+    },
+    [handleOpenListKeyDown]
   );
   const hasValue = value && value.length > 0;
   const showClearBtn = clearable && hasValue && !disabled;
+  const currentCol = getCurrentColumnIndex();
+  const currentOpt = columnActiveIndices[currentCol] ?? -1;
+  const activeOptionId = !isOpen ? void 0 : isSearchMode ? searchActiveIndex >= 0 ? getPickerOptionId(listboxId, searchActiveIndex) : void 0 : currentOpt >= 0 ? getColumnOptionDomId(currentCol, currentOpt) : void 0;
   return /* @__PURE__ */ jsxs("div", { className: cascaderBaseClasses, "data-testid": "cascader", ...divProps, children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "button",
       {
         ref: triggerRef,
         type: "button",
-        className: triggerClasses,
+        className: classNames(triggerClasses, showClearBtn ? "pr-14" : "pr-9"),
         disabled,
-        ...getPickerComboboxAria({ expanded: isOpen, listboxId }),
+        ...getPickerComboboxAria({ expanded: isOpen, listboxId, activeOptionId }),
         onClick: toggleOpen,
         onKeyDown: handleTriggerKeyDown,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: classNames(
-                "flex-1 text-left truncate",
-                !hasValue && "text-[var(--tiger-cascader-placeholder,var(--tiger-text-muted,#9ca3af))]"
-              ),
-              children: hasValue ? displayLabel : placeholder
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
-            showClearBtn && /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "flex items-center",
-                role: "button",
-                "aria-label": resolveLocaleText("Clear selection", mergedLocale?.common?.clearText),
-                onClick: handleClear,
-                children: /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    className: "w-4 h-4 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-cascader-icon-hover,var(--tiger-text-muted,#6b7280))]",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    viewBox: icon20ViewBox,
-                    fill: "currentColor",
-                    children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: closeSolidIcon20PathD, clipRule: "evenodd" })
-                  }
-                )
-              }
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(
+              "flex-1 text-left truncate",
+              !hasValue && "text-[var(--tiger-cascader-placeholder,var(--tiger-text-muted,#9ca3af))]"
             ),
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                className: classNames(
-                  "w-5 h-5 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
-                  isOpen && "rotate-180"
-                ),
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: icon20ViewBox,
-                fill: "currentColor",
-                children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronDownSolidIcon20PathD, clipRule: "evenodd" })
-              }
-            )
-          ] })
-        ]
+            children: hasValue ? displayLabel : placeholder
+          }
+        )
       }
     ),
+    /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-1", children: [
+      showClearBtn && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "pointer-events-auto inline-flex rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-cascader-ring,var(--tiger-primary,#2563eb))]",
+          "data-tiger-cascader-clear": "",
+          "aria-label": resolveLocaleText("Clear selection", mergedLocale?.common?.clearText),
+          onClick: handleClear,
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-4 h-4 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-cascader-icon-hover,var(--tiger-text-muted,#6b7280))]",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: icon20ViewBox,
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: closeSolidIcon20PathD, clipRule: "evenodd" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: classNames("inline-flex", isOpen && "rotate-180"), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "w-5 h-5 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: icon20ViewBox,
+          fill: "currentColor",
+          children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronDownSolidIcon20PathD, clipRule: "evenodd" })
+        }
+      ) })
+    ] }),
     renderOverlayPortal(
       isOpen ? /* @__PURE__ */ jsxs(
         "div",
@@ -397,6 +572,7 @@ var Cascader = (props) => {
           ),
           style: overlay.floatingStyles,
           "data-positioned": overlay.positioned,
+          onKeyDown: handleDropdownKeyDown,
           children: [
             searchable && /* @__PURE__ */ jsx(
               "input",
@@ -409,6 +585,7 @@ var Cascader = (props) => {
                 ),
                 value: searchQuery,
                 onChange: (e) => updateSearchValue(e.target.value),
+                onKeyDown: handleSearchKeyDown,
                 "aria-label": resolveLocaleText(
                   "Search options",
                   mergedLocale?.common?.searchPlaceholder
@@ -433,9 +610,12 @@ var Cascader = (props) => {
                   renderItem: (item, index) => /* @__PURE__ */ jsx(
                     "div",
                     {
+                      id: getPickerOptionId(listboxId, index),
                       "data-option-index": index,
+                      "data-active": searchActiveIndex === index || void 0,
                       className: classNames(
                         cascaderSearchResultClasses,
+                        searchActiveIndex === index && "bg-[var(--tiger-cascader-option-bg-selected,var(--tiger-outline-bg-hover,#eff6ff))]",
                         item.disabled && "opacity-50 cursor-not-allowed"
                       ),
                       ...getPickerOptionAria({
@@ -460,15 +640,21 @@ var Cascader = (props) => {
                   children: searchResults.map((item, index) => /* @__PURE__ */ jsx(
                     "div",
                     {
+                      id: getPickerOptionId(listboxId, index),
                       "data-option-index": index,
+                      "data-active": searchActiveIndex === index || void 0,
                       className: classNames(
                         cascaderSearchResultClasses,
+                        searchActiveIndex === index && "bg-[var(--tiger-cascader-option-bg-selected,var(--tiger-outline-bg-hover,#eff6ff))]",
                         item.disabled && "opacity-50 cursor-not-allowed"
                       ),
                       ...getPickerOptionAria({
                         selected: value?.join(",") === item.valuePath.join(","),
                         disabled: item.disabled
                       }),
+                      onMouseEnter: () => {
+                        if (!item.disabled) setSearchActiveIndex(index);
+                      },
                       onClick: () => handleSearchResultClick(item.valuePath, item.disabled),
                       children: typeof searchable === "object" && searchable.render ? searchable.render(searchQuery, item.path) : item.label
                     },
@@ -485,12 +671,19 @@ var Cascader = (props) => {
                 });
                 const renderColumnOption = (option, optionIndex) => {
                   const isSelected = col.selectedValue === option.value;
+                  const isActive = (columnActiveIndices[colIndex] ?? -1) === optionIndex;
                   const hasChildren = isCascaderOptionExpandable(option);
                   return /* @__PURE__ */ jsxs(
                     "div",
                     {
+                      id: getColumnOptionDomId(colIndex, optionIndex),
                       "data-option-index": optionIndex,
-                      className: getCascaderOptionClasses(isSelected, !!option.disabled, size),
+                      "data-active": isActive || void 0,
+                      className: getCascaderOptionClasses(
+                        isSelected || isActive,
+                        !!option.disabled,
+                        size
+                      ),
                       ...getPickerOptionAria({
                         selected: isSelected,
                         disabled: !!option.disabled