@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-DJLVNYZD.mjs

@@ -0,0 +1,967 @@
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Cascader.tsx
+import { forwardRef, useEffect as useEffect2, useImperativeHandle, useRef as useRef2 } from "react";
+import {
+  SHAKE_CLASS,
+  cascaderDropdownClasses,
+  classNames,
+  runShakeAnimation,
+  selectChevronWrapClasses,
+  selectClearButtonClasses,
+  selectTrailingSlotClasses
+} from "@expcat/tigercat-core";
+
+// src/components/Cascader/state.ts
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  CASCADER_DEFAULT_LIST_HEIGHT,
+  CASCADER_DEFAULT_SEPARATOR,
+  TIGER_CHROME_ATTR,
+  coerceCascaderFormValue,
+  filterCascaderOptions,
+  flattenCascaderOptions,
+  formatSelectLevelLabel,
+  getCascaderColumnOptionId,
+  getCascaderColumns,
+  getCascaderDisplayLabel,
+  getCascaderOptionKey,
+  getCascaderRootClasses,
+  getCascaderTriggerClasses,
+  getCascaderTriggerKeyIntent,
+  getCascaderVirtualAlignScrollTop,
+  getCascaderVirtualItemHeight,
+  getCascaderVirtualRange,
+  getEmptyLabels,
+  getPickerNavigationIndex,
+  getPickerComboboxAria,
+  getPickerListboxAria,
+  getPickerOptionAria,
+  getPickerOptionId,
+  getSelectLabels,
+  initialCascaderColumnActiveIndices,
+  isCascaderOptionExpandable,
+  isCascaderValueEmpty,
+  isSelectTypeaheadCharacter,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  navigateCascaderColumnIndex,
+  normalizeCascaderValue,
+  rememberCascaderLabel,
+  resolveCascaderActivePath,
+  serializeCascaderFormValue,
+  setCascaderOptionChildren,
+  shouldShowCascaderClear
+} from "@expcat/tigercat-core";
+var EMPTY_OPTIONS = [];
+function useCascaderController(props) {
+  const {
+    options: optionsProp = EMPTY_OPTIONS,
+    size = "md",
+    disabled = false,
+    placeholder,
+    searchable = false,
+    searchValue,
+    defaultSearchValue = "",
+    clearable = true,
+    emptyText,
+    expandTrigger = "click",
+    changeOnSelect = false,
+    separator = CASCADER_DEFAULT_SEPARATOR,
+    virtual = false,
+    listHeight = CASCADER_DEFAULT_LIST_HEIGHT,
+    loading = false,
+    loadData,
+    labels: labelsOverride,
+    onSearchChange,
+    onOpenChange,
+    className,
+    value,
+    defaultValue,
+    onChange,
+    open,
+    defaultOpen = false,
+    status: statusProp,
+    name,
+    locale,
+    id,
+    onBlur
+  } = props;
+  const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
+  const config = useTigerConfig();
+  const dir = config.direction === "rtl" ? "rtl" : "ltr";
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getSelectLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const emptyLabels = useMemo(() => getEmptyLabels(mergedLocale), [mergedLocale]);
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const shakeTrigger = formItemControl?.shakeTrigger;
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const describedBy = mergeAriaDescribedBy(
+    typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const labelledby = typeof props["aria-labelledby"] === "string" && props["aria-labelledby"].trim() ? props["aria-labelledby"] : formItemControl?.labelId;
+  const ariaLabel = typeof props["aria-label"] === "string" && props["aria-label"].trim() ? props["aria-label"] : void 0;
+  const required = Boolean(formItemControl?.required);
+  const incomingValue = value !== void 0 ? value : coerceCascaderFormValue(formItemControl?.value);
+  const [selected, setSelected] = useControlledState({
+    value: incomingValue,
+    defaultValue,
+    onChange: (next) => {
+      const normalized = normalizeCascaderValue(next);
+      onChange?.(normalized);
+      formItemControl?.onChange?.(normalized);
+    },
+    postState: normalizeCascaderValue
+  });
+  const [isOpen, setOpen] = useControlledState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [searchQuery, setSearchQuery] = useControlledState({
+    value: searchValue,
+    defaultValue: defaultSearchValue,
+    onChange: onSearchChange
+  });
+  const instanceId = useId();
+  const listboxId = `tiger-cascader-listbox-${instanceId}`;
+  const [loadedOptions, setLoadedOptions] = useState(null);
+  const [loadingKeys, setLoadingKeys] = useState(/* @__PURE__ */ new Set());
+  const [activePath, setActivePath] = useState([]);
+  const [columnActiveIndices, setColumnActiveIndices] = useState([]);
+  const [focusedColumnIndex, setFocusedColumnIndex] = useState(0);
+  const [searchActiveIndex, setSearchActiveIndex] = useState(-1);
+  const [columnScrollTops, setColumnScrollTops] = useState([]);
+  const [searchScrollTop, setSearchScrollTop] = useState(0);
+  const labelCacheRef = useRef(/* @__PURE__ */ new Map());
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const optionsPropRef = useRef(optionsProp);
+  if (optionsPropRef.current !== optionsProp) {
+    optionsPropRef.current = optionsProp;
+    setLoadedOptions(null);
+  }
+  const options = loadedOptions ?? optionsProp;
+  const hasLoadData = typeof loadData === "function";
+  const columns = useMemo(
+    () => getCascaderColumns(options, activePath, hasLoadData),
+    [activePath, hasLoadData, options]
+  );
+  const isSearchMode = Boolean(searchable) && searchQuery.length > 0;
+  const flattened = useMemo(
+    () => searchable ? flattenCascaderOptions(options, [], [], changeOnSelect, separator) : [],
+    [changeOnSelect, options, searchable, separator]
+  );
+  const searchResults = useMemo(
+    () => isSearchMode ? filterCascaderOptions(flattened, searchQuery, searchable) : [],
+    [flattened, isSearchMode, searchQuery, searchable]
+  );
+  const displayLabel = getCascaderDisplayLabel(options, selected, separator, labelCacheRef.current);
+  const placeholderText = placeholder ?? labels.placeholder;
+  const displayText = isCascaderValueEmpty(selected) ? placeholderText : displayLabel;
+  const emptyCopy = resolveEmptyCopy(emptyText, emptyLabels.noResults, loading, labels.loadingText);
+  const showClear = shouldShowCascaderClear({
+    clearable,
+    disabled: effectiveDisabled,
+    value: selected
+  });
+  const closeDropdown = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const openDropdown = useCallback(() => {
+    if (effectiveDisabled) return;
+    setOpen(true);
+  }, [effectiveDisabled, setOpen]);
+  const toggleDropdown = useCallback(() => {
+    if (effectiveDisabled) return;
+    if (isOpen) closeDropdown();
+    else openDropdown();
+  }, [closeDropdown, effectiveDisabled, isOpen, openDropdown]);
+  const focusCombobox = useCallback(() => {
+    triggerRef.current?.focus();
+  }, []);
+  const commitPath = useCallback(
+    (path, close) => {
+      const normalized = normalizeCascaderValue(path);
+      const label = getCascaderDisplayLabel(options, normalized, separator);
+      if (normalized) rememberCascaderLabel(labelCacheRef.current, normalized, label);
+      setSelected(normalized);
+      if (close) {
+        closeDropdown();
+        requestAnimationFrame(() => triggerRef.current?.focus());
+      }
+    },
+    [closeDropdown, options, separator, setSelected]
+  );
+  const loadChildren = useCallback(
+    async (option, path) => {
+      if (!loadData) return;
+      const key = path.map(String).join("/");
+      setLoadingKeys((current) => new Set(current).add(key));
+      try {
+        const children = await loadData(option);
+        setLoadedOptions(
+          (current) => setCascaderOptionChildren(current ?? optionsProp, path, children)
+        );
+      } finally {
+        setLoadingKeys((current) => {
+          const next = new Set(current);
+          next.delete(key);
+          return next;
+        });
+      }
+    },
+    [loadData, optionsProp]
+  );
+  const activateOption = useCallback(
+    (option, colIndex2, commitLeaf) => {
+      if (option.disabled || effectiveDisabled) return;
+      const nextPath = [...activePath.slice(0, colIndex2), option.value];
+      setActivePath(nextPath);
+      const expandable = isCascaderOptionExpandable(option, hasLoadData);
+      if (expandable && (!option.children || option.children.length === 0) && loadData) {
+        void loadChildren(option, nextPath);
+        if (changeOnSelect) commitPath(nextPath, false);
+        return;
+      }
+      if (expandable) {
+        if (changeOnSelect && commitLeaf) commitPath(nextPath, false);
+        setFocusedColumnIndex(colIndex2 + 1);
+        return;
+      }
+      if (commitLeaf) commitPath(nextPath, true);
+    },
+    [activePath, changeOnSelect, commitPath, effectiveDisabled, hasLoadData, loadChildren, loadData]
+  );
+  const handleOptionClick = useCallback(
+    (option, colIndex2) => {
+      activateOption(option, colIndex2, true);
+    },
+    [activateOption]
+  );
+  const handleOptionHover = useCallback(
+    (option, colIndex2) => {
+      if (expandTrigger !== "hover" || option.disabled) return;
+      if (!isCascaderOptionExpandable(option, hasLoadData)) return;
+      activateOption(option, colIndex2, false);
+    },
+    [activateOption, expandTrigger, hasLoadData]
+  );
+  const handleSearchResultClick = useCallback(
+    (item) => {
+      if (item.disabled) return;
+      commitPath(item.valuePath, true);
+    },
+    [commitPath]
+  );
+  const clearSelection = useCallback(
+    (event) => {
+      event?.stopPropagation();
+      commitPath([], true);
+    },
+    [commitPath]
+  );
+  const updateSearchValue = useCallback(
+    (query) => {
+      setSearchQuery(query);
+    },
+    [setSearchQuery]
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    const nextPath = resolveCascaderActivePath(selected);
+    setActivePath(nextPath);
+    const nextColumns = getCascaderColumns(options, nextPath, hasLoadData);
+    setColumnActiveIndices(initialCascaderColumnActiveIndices(nextColumns));
+    setFocusedColumnIndex(Math.max(0, nextColumns.length - 1));
+    setSearchActiveIndex(0);
+    if (searchable) {
+      searchInputRef.current?.focus();
+    }
+  }, [hasLoadData, isOpen, options, searchable, selected]);
+  useEffect(() => {
+    if (!isOpen || isSearchMode) return;
+    setColumnActiveIndices((previous) => {
+      if (previous.length === columns.length) return previous;
+      return initialCascaderColumnActiveIndices(columns);
+    });
+  }, [columns, isOpen, isSearchMode]);
+  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) handleSearchResultClick(item);
+      return;
+    }
+    const colIndex2 = getCurrentColumnIndex();
+    const col = columns[colIndex2];
+    const idx = columnActiveIndices[colIndex2] ?? -1;
+    const option = col?.options[idx];
+    if (option) handleOptionClick(option, colIndex2);
+  }, [
+    columnActiveIndices,
+    columns,
+    getCurrentColumnIndex,
+    handleOptionClick,
+    handleSearchResultClick,
+    isSearchMode,
+    searchActiveIndex,
+    searchResults
+  ]);
+  const handleTriggerKeyDown = (event) => {
+    if (effectiveDisabled) return;
+    const fromSearchInput = event.currentTarget.tagName === "INPUT";
+    if (!isOpen && isSelectTypeaheadCharacter(event.key, event)) {
+      event.preventDefault();
+      openDropdown();
+      if (searchable) updateSearchValue(event.key);
+      return;
+    }
+    const intent = getCascaderTriggerKeyIntent({
+      key: event.key,
+      open: isOpen,
+      searchable: Boolean(searchable),
+      searchMode: isSearchMode,
+      clearable,
+      hasValue: !isCascaderValueEmpty(selected),
+      fromSearchInput,
+      dir
+    });
+    switch (intent.type) {
+      case "open":
+        event.preventDefault();
+        openDropdown();
+        return;
+      case "close":
+        if (event.key !== "Tab") event.preventDefault();
+        closeDropdown();
+        triggerRef.current?.focus();
+        return;
+      case "clear":
+        event.preventDefault();
+        clearSelection();
+        return;
+      case "prevent-scroll":
+        event.preventDefault();
+        openDropdown();
+        return;
+      case "navigate": {
+        event.preventDefault();
+        if (isSearchMode) {
+          setSearchActiveIndex(
+            (current) => getPickerNavigationIndex(searchResults, current, intent.key, (item) => item.disabled)
+          );
+          return;
+        }
+        const colIndex2 = getCurrentColumnIndex();
+        const col = columns[colIndex2];
+        if (!col) return;
+        setColumnActiveIndices((prev) => {
+          const next = prev.slice();
+          next[colIndex2] = navigateCascaderColumnIndex(
+            col.options,
+            prev[colIndex2] ?? -1,
+            intent.key
+          );
+          return next;
+        });
+        setFocusedColumnIndex(colIndex2);
+        return;
+      }
+      case "into": {
+        event.preventDefault();
+        const colIndex2 = getCurrentColumnIndex();
+        const col = columns[colIndex2];
+        const idx = columnActiveIndices[colIndex2] ?? -1;
+        const option = col?.options[idx];
+        if (option && isCascaderOptionExpandable(option, hasLoadData)) {
+          handleOptionClick(option, colIndex2);
+        }
+        return;
+      }
+      case "out": {
+        event.preventDefault();
+        if (activePath.length > 0) {
+          const nextPath = activePath.slice(0, -1);
+          setActivePath(nextPath);
+          setFocusedColumnIndex(Math.max(0, getCurrentColumnIndex() - 1));
+        }
+        return;
+      }
+      case "select-active":
+        event.preventDefault();
+        commitActiveOption();
+        return;
+      default:
+        return;
+    }
+  };
+  const handleFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (rootRef.current && next && rootRef.current.contains(next) || dropdownRef.current && next && dropdownRef.current.contains(next)) {
+      return;
+    }
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  };
+  const colIndex = getCurrentColumnIndex();
+  const currentOpt = columnActiveIndices[colIndex] ?? -1;
+  const activeOptionId = !isOpen ? void 0 : isSearchMode ? searchActiveIndex >= 0 ? getPickerOptionId(listboxId, searchActiveIndex) : void 0 : currentOpt >= 0 ? getCascaderColumnOptionId(listboxId, colIndex, currentOpt) : void 0;
+  const comboboxAria = getPickerComboboxAria({
+    expanded: isOpen,
+    listboxId,
+    activeOptionId
+  });
+  const listboxAria = getPickerListboxAria({
+    id: listboxId,
+    label: isSearchMode ? void 0 : formatSelectLevelLabel(labels.levelLabel, colIndex + 1)
+  });
+  const itemHeight = getCascaderVirtualItemHeight(size);
+  const alignColumnScroll = (index, optionIndex) => {
+    if (!virtual || optionIndex < 0) return;
+    setColumnScrollTops((prev) => {
+      const next = prev.slice();
+      const current = next[index] ?? 0;
+      next[index] = getCascaderVirtualAlignScrollTop(current, optionIndex, itemHeight, listHeight);
+      return next;
+    });
+  };
+  useEffect(() => {
+    if (!isOpen || !virtual) return;
+    if (isSearchMode) {
+      setSearchScrollTop(
+        (current) => getCascaderVirtualAlignScrollTop(current, searchActiveIndex, itemHeight, listHeight)
+      );
+      return;
+    }
+    alignColumnScroll(colIndex, currentOpt);
+  }, [
+    colIndex,
+    currentOpt,
+    isOpen,
+    isSearchMode,
+    itemHeight,
+    listHeight,
+    searchActiveIndex,
+    virtual
+  ]);
+  const hiddenValue = effectiveName ? serializeCascaderFormValue(selected) : void 0;
+  return {
+    rootRef,
+    triggerRef,
+    searchInputRef,
+    dropdownRef,
+    listboxId,
+    comboboxAria,
+    listboxAria,
+    isOpen,
+    searchable: Boolean(searchable),
+    isSearchMode,
+    searchQuery,
+    updateSearchValue,
+    displayText,
+    placeholderText,
+    emptyCopy,
+    showClear,
+    clearAriaLabel: labels.clearAriaLabel,
+    searchPlaceholder: labels.searchPlaceholder,
+    doneText: labels.doneText,
+    backText: labels.backText,
+    levelLabel: labels.levelLabel,
+    formatLevel: (level) => formatSelectLevelLabel(labels.levelLabel, level),
+    triggerClasses: getCascaderTriggerClasses({
+      size,
+      disabled: effectiveDisabled,
+      isOpen,
+      status,
+      hasClear: showClear
+    }),
+    className: getCascaderRootClasses(inputGroup != null, className),
+    chromeAttr: TIGER_CHROME_ATTR,
+    status,
+    shakeTrigger,
+    effectiveId,
+    effectiveName,
+    effectiveDisabled,
+    describedBy,
+    labelledby,
+    ariaLabel,
+    required,
+    size,
+    virtual,
+    listHeight,
+    itemHeight,
+    columns,
+    columnActiveIndices,
+    focusedColumnIndex,
+    setFocusedColumnIndex,
+    searchActiveIndex,
+    setSearchActiveIndex,
+    searchResults,
+    searchableConfig: searchable,
+    changeOnSelect,
+    separator,
+    dir,
+    loading,
+    loadingKeys,
+    hiddenValue,
+    getOptionId: (index) => getPickerOptionId(listboxId, index),
+    getColumnOptionId: (c, i) => getCascaderColumnOptionId(listboxId, c, i),
+    getOptionKey: getCascaderOptionKey,
+    optionAria: getPickerOptionAria,
+    handleOptionClick,
+    handleOptionHover,
+    handleSearchResultClick,
+    handleTriggerKeyDown,
+    handleFocusOut,
+    toggleDropdown,
+    openDropdown,
+    closeDropdown,
+    clearSelection,
+    focusCombobox,
+    columnScrollTops,
+    searchScrollTop,
+    setSearchScrollTop,
+    getVirtualRange: getCascaderVirtualRange,
+    isExpandable: (option) => isCascaderOptionExpandable(option, hasLoadData),
+    isSelectedPath: (path) => (selected ?? []).join("\0") === path.join("\0"),
+    isSelectedValue: (col, option) => columns[col]?.selectedValue === option.value || (selected ?? [])[col] === option.value,
+    selected
+  };
+}
+function resolveEmptyCopy(emptyText, noResults, loading, loadingText) {
+  if (loading) return loadingText;
+  return emptyText?.trim() ? emptyText : noResults;
+}
+
+// src/components/Cascader/render.tsx
+import {
+  cascaderBackButtonClasses,
+  cascaderColumnsClasses,
+  cascaderDoneActionClasses,
+  cascaderDoneButtonClasses,
+  cascaderEmptyStateClasses,
+  cascaderListboxClasses,
+  cascaderSearchInputClasses,
+  cascaderSearchWrapClasses,
+  getCascaderColumnClasses,
+  getCascaderColumnStyle,
+  getCascaderOptionClasses,
+  getCascaderVirtualRange as getCascaderVirtualRange2
+} from "@expcat/tigercat-core";
+
+// src/components/Cascader/icons.tsx
+import {
+  icon20ViewBox,
+  chevronDownSolidIcon20PathD,
+  chevronRightSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  selectChromeIconClasses,
+  selectClearIconClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function CascaderIcon({ path, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
+    }
+  );
+}
+function CascaderClearIcon() {
+  return /* @__PURE__ */ jsx(CascaderIcon, { path: closeSolidIcon20PathD, className: selectClearIconClasses });
+}
+function CascaderChevronIcon() {
+  return /* @__PURE__ */ jsx(CascaderIcon, { path: chevronDownSolidIcon20PathD, className: selectChromeIconClasses });
+}
+function CascaderColumnChevronIcon({ dir }) {
+  return /* @__PURE__ */ jsx("span", { className: dir === "rtl" ? "inline-flex rotate-180" : "inline-flex", children: /* @__PURE__ */ jsx(
+    CascaderIcon,
+    {
+      path: chevronRightSolidIcon20PathD,
+      className: "w-4 h-4 text-[var(--tiger-text-muted,#9ca3af)]"
+    }
+  ) });
+}
+
+// src/components/Cascader/render.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function VirtualWindow({
+  items,
+  itemHeight,
+  listHeight,
+  scrollTop,
+  onScrollTop,
+  renderItem
+}) {
+  const range = getCascaderVirtualRange2(scrollTop, listHeight, items.length, itemHeight);
+  const slice = items.slice(range.startIndex, range.endIndex + 1);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: { height: listHeight, overflow: "auto" },
+      onScroll: (event) => onScrollTop(event.target.scrollTop),
+      children: /* @__PURE__ */ jsx2("div", { style: { height: range.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx2("div", { style: { transform: `translateY(${range.offsetTop}px)` }, children: slice.map((item, offset) => renderItem(item, range.startIndex + offset)) }) })
+    }
+  );
+}
+function renderOptionRow(ctx, option, colIndex, optionIndex) {
+  const isSelected = ctx.isSelectedValue(colIndex, option);
+  const isActive = (ctx.columnActiveIndices[colIndex] ?? -1) === optionIndex;
+  const expandable = ctx.isExpandable(option);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: colIndex === ctx.focusedColumnIndex ? ctx.getColumnOptionId(colIndex, optionIndex) : void 0,
+      "data-option-index": optionIndex,
+      "data-active": isActive || void 0,
+      className: getCascaderOptionClasses({
+        isSelected,
+        isDisabled: Boolean(option.disabled),
+        isActive,
+        size: ctx.size
+      }),
+      style: { height: ctx.itemHeight },
+      ...ctx.optionAria({ selected: isSelected, disabled: Boolean(option.disabled) }),
+      onMouseDown: (event) => event.preventDefault(),
+      onMouseEnter: () => ctx.handleOptionHover(option, colIndex),
+      onClick: () => ctx.handleOptionClick(option, colIndex),
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "flex-1 truncate", children: option.label }),
+        expandable ? /* @__PURE__ */ jsx2(CascaderColumnChevronIcon, { dir: ctx.dir }) : null
+      ]
+    },
+    ctx.getOptionKey(option, optionIndex)
+  );
+}
+function renderSearchRow(ctx, item, index) {
+  const selected = ctx.isSelectedPath(item.valuePath);
+  const isActive = ctx.searchActiveIndex === index;
+  const label = typeof ctx.searchableConfig === "object" && ctx.searchableConfig.render ? ctx.searchableConfig.render(ctx.searchQuery, item.path) : item.label;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      id: ctx.getOptionId(index),
+      "data-option-index": index,
+      "data-active": isActive || void 0,
+      className: getCascaderOptionClasses({
+        isSelected: selected,
+        isDisabled: item.disabled,
+        isActive,
+        size: ctx.size
+      }),
+      style: { height: ctx.itemHeight },
+      ...ctx.optionAria({ selected, disabled: item.disabled }),
+      onMouseDown: (event) => event.preventDefault(),
+      onMouseEnter: () => {
+        if (!item.disabled) ctx.setSearchActiveIndex(index);
+      },
+      onClick: () => ctx.handleSearchResultClick(item),
+      children: /* @__PURE__ */ jsx2("span", { className: "flex-1 truncate", children: label })
+    },
+    `${index}-${item.valuePath.join(",")}`
+  );
+}
+function renderCascaderPanel(ctx) {
+  const hasSearchChrome = ctx.searchable && ctx.isOpen;
+  const searchChrome = hasSearchChrome ? null : ctx.searchable ? /* @__PURE__ */ jsx2("div", { className: cascaderSearchWrapClasses, children: /* @__PURE__ */ jsx2(
+    "input",
+    {
+      ref: ctx.searchInputRef,
+      type: "text",
+      className: cascaderSearchInputClasses,
+      value: ctx.searchQuery,
+      placeholder: ctx.searchPlaceholder,
+      "aria-label": ctx.searchPlaceholder,
+      onChange: (event) => ctx.updateSearchValue(event.target.value),
+      onKeyDown: ctx.handleTriggerKeyDown,
+      onBlur: ctx.handleFocusOut
+    }
+  ) }) : null;
+  let body;
+  if (ctx.isSearchMode) {
+    if (ctx.searchResults.length === 0) {
+      body = /* @__PURE__ */ jsx2("div", { className: cascaderEmptyStateClasses, children: ctx.emptyCopy });
+    } else if (ctx.virtual) {
+      body = /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: cascaderListboxClasses,
+          style: { maxHeight: `${ctx.listHeight}px` },
+          ...ctx.listboxAria,
+          children: /* @__PURE__ */ jsx2(
+            VirtualWindow,
+            {
+              items: ctx.searchResults,
+              itemHeight: ctx.itemHeight,
+              listHeight: ctx.listHeight,
+              scrollTop: ctx.searchScrollTop,
+              onScrollTop: ctx.setSearchScrollTop,
+              renderItem: (item, index) => renderSearchRow(ctx, item, index)
+            }
+          )
+        }
+      );
+    } else {
+      body = /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: cascaderListboxClasses,
+          style: { maxHeight: `${ctx.listHeight}px` },
+          ...ctx.listboxAria,
+          children: ctx.searchResults.map((item, index) => renderSearchRow(ctx, item, index))
+        }
+      );
+    }
+  } else if (ctx.columns.length === 0) {
+    body = /* @__PURE__ */ jsx2("div", { className: cascaderEmptyStateClasses, children: ctx.emptyCopy });
+  } else {
+    body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      ctx.focusedColumnIndex > 0 ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: cascaderBackButtonClasses,
+          "data-tiger-cascader-back": "",
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => ctx.setFocusedColumnIndex(Math.max(0, ctx.focusedColumnIndex - 1)),
+          children: ctx.backText
+        }
+      ) : null,
+      /* @__PURE__ */ jsx2("div", { className: cascaderColumnsClasses, children: ctx.columns.map((column, colIndex) => {
+        const focused = colIndex === ctx.focusedColumnIndex;
+        const listboxProps = focused ? ctx.listboxAria : {};
+        const rows = ctx.virtual ? /* @__PURE__ */ jsx2(
+          VirtualWindow,
+          {
+            items: column.options,
+            itemHeight: ctx.itemHeight,
+            listHeight: ctx.listHeight,
+            scrollTop: ctx.columnScrollTops[colIndex] ?? 0,
+            onScrollTop: () => void 0,
+            renderItem: (option, optionIndex) => renderOptionRow(ctx, option, colIndex, optionIndex)
+          }
+        ) : column.options.map(
+          (option, optionIndex) => renderOptionRow(ctx, option, colIndex, optionIndex)
+        );
+        return /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: getCascaderColumnClasses(focused),
+            style: getCascaderColumnStyle(ctx.listHeight),
+            "data-focused": focused || void 0,
+            "aria-label": ctx.formatLevel(colIndex + 1),
+            ...listboxProps,
+            children: column.options.length === 0 ? /* @__PURE__ */ jsx2("div", { className: cascaderEmptyStateClasses, children: ctx.emptyCopy }) : rows
+          },
+          colIndex
+        );
+      }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    searchChrome,
+    body,
+    /* @__PURE__ */ jsx2("div", { className: cascaderDoneActionClasses, children: /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: cascaderDoneButtonClasses,
+        "data-tiger-cascader-done": "",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: ctx.closeDropdown,
+        children: ctx.doneText
+      }
+    ) })
+  ] });
+}
+
+// src/components/Cascader.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Cascader = forwardRef(function Cascader2(props, ref) {
+  const ctx = useCascaderController(props);
+  const overlay = useAnchoredOverlay({
+    enabled: ctx.isOpen,
+    referenceRef: ctx.triggerRef,
+    floatingRef: ctx.dropdownRef,
+    placement: props.placement ?? "bottom-start",
+    offset: props.offset ?? 4,
+    layout: "fullscreen-sm",
+    matchReferenceWidth: ctx.isSearchMode,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    restoreFocusOnDismiss: true,
+    getContainer: props.getPopupContainer,
+    onDismiss: ctx.closeDropdown
+  });
+  const rootRef = ctx.rootRef;
+  const mountedRef = useRef2(false);
+  useEffect2(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    if (ctx.status === "error") runShakeAnimation(rootRef.current);
+  }, [ctx.status, ctx.shakeTrigger, rootRef]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: ctx.focusCombobox,
+      open: ctx.openDropdown,
+      close: ctx.closeDropdown
+    }),
+    [ctx.closeDropdown, ctx.focusCombobox, ctx.openDropdown]
+  );
+  const comboboxCommon = {
+    ...ctx.comboboxAria,
+    id: ctx.effectiveId,
+    "aria-label": ctx.ariaLabel,
+    "aria-labelledby": ctx.labelledby,
+    "aria-describedby": ctx.describedBy,
+    "aria-invalid": ctx.status === "error" ? true : void 0,
+    "aria-required": ctx.required ? true : void 0,
+    "aria-autocomplete": ctx.searchable ? "list" : "none"
+  };
+  const searchOpen = ctx.searchable && ctx.isOpen;
+  const trigger = searchOpen ? /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ref: (node) => {
+        ctx.searchInputRef.current = node;
+        ctx.triggerRef.current = node;
+      },
+      type: "text",
+      className: classNames(ctx.triggerClasses, "bg-transparent"),
+      disabled: ctx.effectiveDisabled,
+      value: ctx.searchQuery,
+      placeholder: ctx.displayText,
+      onChange: (event) => ctx.updateSearchValue(event.target.value),
+      onKeyDown: ctx.handleTriggerKeyDown,
+      onBlur: ctx.handleFocusOut,
+      ...comboboxCommon
+    }
+  ) : /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: (node) => {
+        ctx.triggerRef.current = node;
+      },
+      tabIndex: ctx.effectiveDisabled ? -1 : 0,
+      className: ctx.triggerClasses,
+      onClick: ctx.toggleDropdown,
+      onKeyDown: ctx.handleTriggerKeyDown,
+      onBlur: ctx.handleFocusOut,
+      ...comboboxCommon,
+      children: /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: classNames(
+            "flex-1 truncate",
+            ctx.displayText === ctx.placeholderText && "text-[var(--tiger-text-muted,#9ca3af)]"
+          ),
+          children: ctx.displayText
+        }
+      )
+    }
+  );
+  const dropdown = ctx.isOpen ? /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: ctx.dropdownRef,
+      className: classNames(
+        cascaderDropdownClasses,
+        overlay.floatingClasses,
+        props.dropdownClassName
+      ),
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      "data-tiger-cascader-dropdown": "",
+      onMouseDown: (event) => event.preventDefault(),
+      onBlur: ctx.handleFocusOut,
+      children: renderCascaderPanel(ctx)
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: rootRef,
+      className: ctx.className,
+      style: props.style,
+      "data-testid": "cascader",
+      ...{ [ctx.chromeAttr]: "" },
+      onAnimationEnd: () => rootRef.current?.classList.remove(SHAKE_CLASS),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+          trigger,
+          /* @__PURE__ */ jsxs2("span", { className: selectTrailingSlotClasses, children: [
+            ctx.showClear ? /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                className: selectClearButtonClasses,
+                "data-tiger-cascader-clear": "",
+                "aria-label": ctx.clearAriaLabel,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: ctx.clearSelection,
+                children: /* @__PURE__ */ jsx3(CascaderClearIcon, {})
+              }
+            ) : null,
+            /* @__PURE__ */ jsx3(
+              "span",
+              {
+                className: classNames(selectChevronWrapClasses, ctx.isOpen && "rotate-180"),
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx3(CascaderChevronIcon, {})
+              }
+            )
+          ] })
+        ] }),
+        ctx.hiddenValue !== void 0 ? /* @__PURE__ */ jsx3("input", { type: "hidden", name: ctx.effectiveName, value: ctx.hiddenValue }) : null,
+        dropdown && renderOverlayPortal(dropdown, overlay.target)
+      ]
+    }
+  );
+});
+Cascader.displayName = "Cascader";
+
+export {
+  Cascader
+};