@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-M7TSPEXC.mjs

@@ -0,0 +1,826 @@
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Select.tsx
+import { forwardRef, useEffect as useEffect3, useImperativeHandle, useRef as useRef3 } from "react";
+import {
+  classNames as classNames2,
+  SHAKE_CLASS,
+  runShakeAnimation,
+  selectChevronWrapClasses,
+  selectClearButtonClasses,
+  selectDoneActionClasses,
+  selectDoneButtonClasses,
+  selectDropdownBaseClasses,
+  selectTrailingSlotClasses
+} from "@expcat/tigercat-core";
+
+// src/components/Select/state.ts
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  TIGER_CHROME_ATTR,
+  createSelectSearchDebouncer,
+  createSelectTypeaheadBuffer,
+  flattenSelectOptions,
+  getPickerComboboxAria,
+  getPickerListboxAria,
+  getPickerOptionId,
+  getSelectLabels,
+  getSelectRootClasses,
+  getSelectTriggerClasses,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  normalizeSelectValue,
+  pruneCreatedSelectOptions,
+  rememberSelectOptions,
+  resolveCreatableSelectOption,
+  resolveLocaleText,
+  resolveSelectActiveIndex,
+  resolveSelectDisplayText,
+  resolveSelectFilteredOptions,
+  commitSelectOption,
+  clearSelectValue,
+  getSelectSelectedValues,
+  getSelectTriggerKeyIntent,
+  findSelectTypeaheadIndex,
+  isSelectTypeaheadCharacter,
+  isSelectOptionSelected,
+  shouldShowSelectClear,
+  navigateSelectActiveIndex,
+  getSelectClosedHomeEndIndex,
+  serializeSelectFormValues,
+  coerceSelectFormValue
+} from "@expcat/tigercat-core";
+
+// src/components/Select/types.ts
+var isMultipleSelect = (props) => props.multiple === true;
+
+// src/components/Select/state.ts
+function useSelectController(props) {
+  const isMultiple = isMultipleSelect(props);
+  const {
+    options = [],
+    size = "md",
+    disabled = false,
+    placeholder,
+    searchable = false,
+    searchValue,
+    defaultSearchValue = "",
+    clearable = true,
+    emptyText,
+    maxTagCount,
+    remote = false,
+    searchDebounce = 0,
+    creatable = false,
+    createOptionText,
+    virtual = false,
+    listHeight = 256,
+    labels: labelsOverride,
+    onSearchChange,
+    onSearchValueChange,
+    onCreate,
+    onOpenChange,
+    className,
+    value,
+    defaultValue,
+    onChange,
+    open,
+    defaultOpen = false,
+    autoClearSearchValue = true,
+    loading = false,
+    status: statusProp,
+    name,
+    filterOption,
+    locale,
+    id,
+    onBlur,
+    renderOption
+  } = props;
+  const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getSelectLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  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 incomingValue = value !== void 0 ? value : coerceSelectFormValue(formItemControl?.value, options, isMultiple);
+  const [selected, setSelected] = useControlledState({
+    value: incomingValue,
+    defaultValue: defaultValue ?? (isMultiple ? [] : void 0),
+    onChange: (next) => {
+      const normalized = normalizeSelectValue(next, isMultiple);
+      if (isMultiple) {
+        ;
+        onChange?.(
+          Array.isArray(normalized) ? normalized : []
+        );
+      } else {
+        ;
+        onChange?.(
+          normalized
+        );
+      }
+      formItemControl?.onChange?.(normalized);
+    },
+    postState: (next) => normalizeSelectValue(next, isMultiple)
+  });
+  const [isOpen, setOpen] = useControlledState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [searchQuery, setSearchQuery] = useControlledState({
+    value: searchValue,
+    defaultValue: defaultSearchValue,
+    onChange: onSearchValueChange
+  });
+  const instanceId = useId();
+  const listboxId = `tiger-select-listbox-${instanceId}`;
+  const getOptionId = (index) => getPickerOptionId(listboxId, index);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const [createdOptions, setCreatedOptions] = useState([]);
+  const optionCacheRef = useRef(/* @__PURE__ */ new Map());
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const searchDebouncerRef = useRef(null);
+  const activeValueRef = useRef(void 0);
+  const typeaheadRef = useRef(
+    createSelectTypeaheadBuffer({
+      onQuery: (query) => {
+        const index = findSelectTypeaheadIndex(flatSelectableOptionsRef.current, query, -1);
+        if (index >= 0) setActiveIndex(index);
+      }
+    })
+  );
+  const liveCreated = useMemo(
+    () => pruneCreatedSelectOptions(createdOptions, options),
+    [createdOptions, options]
+  );
+  const allOptions = useMemo(
+    () => [...flattenSelectOptions(options), ...liveCreated],
+    [options, liveCreated]
+  );
+  const filteredOptions = useMemo(
+    () => resolveSelectFilteredOptions(options, searchQuery, {
+      searchable,
+      remote,
+      filterOption
+    }),
+    [filterOption, options, remote, searchable, searchQuery]
+  );
+  const creatableOption = useMemo(
+    () => resolveCreatableSelectOption([...options, ...liveCreated], searchQuery, {
+      creatable: creatable && searchable
+    }),
+    [creatable, liveCreated, options, searchable, searchQuery]
+  );
+  const flatSelectableOptions = useMemo(() => {
+    const flat = flattenSelectOptions(filteredOptions);
+    return creatableOption ? [...flat, creatableOption] : flat;
+  }, [creatableOption, filteredOptions]);
+  const flatSelectableOptionsRef = useRef(flatSelectableOptions);
+  flatSelectableOptionsRef.current = flatSelectableOptions;
+  const selectedValues = getSelectSelectedValues(selected, isMultiple);
+  optionCacheRef.current = rememberSelectOptions(optionCacheRef.current, allOptions, selectedValues);
+  const displayText = resolveSelectDisplayText({
+    value: selected,
+    multiple: isMultiple,
+    options,
+    createdOptions: liveCreated,
+    optionCache: optionCacheRef.current,
+    placeholder: resolveLocaleText(labels.placeholder, placeholder),
+    maxTagCount,
+    moreCountText: labels.moreCountText
+  });
+  const showClear = shouldShowSelectClear({
+    clearable,
+    disabled: effectiveDisabled,
+    value: selected,
+    multiple: isMultiple
+  });
+  const createOptionLabel = createOptionText ? createOptionText.includes("{label}") ? createOptionText : `${createOptionText} "{label}"` : labels.createOptionLabel;
+  const closeDropdown = useCallback(() => {
+    setOpen(false);
+    setSearchQuery("");
+    searchDebouncerRef.current?.schedule("");
+    setActiveIndex(-1);
+  }, [setOpen, setSearchQuery]);
+  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 selectOption = useCallback(
+    (option) => {
+      if (option.disabled || effectiveDisabled) return;
+      if (creatableOption && option.value === creatableOption.value) {
+        setCreatedOptions(
+          (current) => current.some((item) => item.value === option.value) ? current : [...current, option]
+        );
+        onCreate?.(option);
+      }
+      const next = commitSelectOption({ option, value: selected, multiple: isMultiple });
+      setSelected(next);
+      activeValueRef.current = option.value;
+      if (isMultiple) {
+        const nextIndex = flatSelectableOptions.findIndex((item) => item.value === option.value);
+        setActiveIndex(nextIndex);
+        if (autoClearSearchValue) {
+          setSearchQuery("");
+          searchDebouncerRef.current?.schedule("");
+        }
+        return;
+      }
+      closeDropdown();
+      requestAnimationFrame(() => triggerRef.current?.focus());
+    },
+    [
+      autoClearSearchValue,
+      closeDropdown,
+      creatableOption,
+      effectiveDisabled,
+      flatSelectableOptions,
+      isMultiple,
+      onCreate,
+      selected,
+      setSearchQuery,
+      setSelected
+    ]
+  );
+  const clearSelection = useCallback(
+    (event) => {
+      event?.stopPropagation();
+      setSelected(clearSelectValue(isMultiple));
+      requestAnimationFrame(() => triggerRef.current?.focus());
+    },
+    [isMultiple, setSelected]
+  );
+  const updateSearchValue = useCallback(
+    (query) => {
+      setSearchQuery(query);
+      searchDebouncerRef.current?.schedule(query);
+    },
+    [setSearchQuery]
+  );
+  useEffect(() => {
+    searchDebouncerRef.current?.cancel();
+    searchDebouncerRef.current = createSelectSearchDebouncer({
+      delay: searchDebounce,
+      onSearchChange: (query) => onSearchChange?.(query)
+    });
+    return () => searchDebouncerRef.current?.cancel();
+  }, [onSearchChange, searchDebounce]);
+  useEffect(() => {
+    if (!isOpen) {
+      setActiveIndex(-1);
+      activeValueRef.current = void 0;
+      return;
+    }
+    setActiveIndex((previous) => {
+      const next = resolveSelectActiveIndex({
+        items: flatSelectableOptions,
+        previousIndex: previous,
+        previousValue: activeValueRef.current,
+        selectedValues,
+        reason: previous >= 0 ? "filter" : "open"
+      });
+      activeValueRef.current = flatSelectableOptions[next]?.value;
+      return next;
+    });
+  }, [flatSelectableOptions, isOpen, selectedValues]);
+  useEffect(() => {
+    if (isOpen && searchable) {
+      searchInputRef.current?.focus();
+    }
+  }, [isOpen, searchable]);
+  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);
+      else typeaheadRef.current.push(event.key);
+      return;
+    }
+    const intent = getSelectTriggerKeyIntent({
+      key: event.key,
+      open: isOpen,
+      searchable,
+      clearable,
+      hasValue: shouldShowSelectClear({
+        clearable: true,
+        disabled: false,
+        value: selected,
+        multiple: isMultiple
+      }),
+      fromSearchInput
+    });
+    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();
+        const next = getSelectClosedHomeEndIndex(flatSelectableOptions, event.key);
+        setActiveIndex(next);
+        return;
+      }
+      case "navigate": {
+        event.preventDefault();
+        setActiveIndex((current) => {
+          const next = navigateSelectActiveIndex(flatSelectableOptions, current, intent.key);
+          activeValueRef.current = flatSelectableOptions[next]?.value;
+          return next;
+        });
+        return;
+      }
+      case "select-active": {
+        event.preventDefault();
+        const option = flatSelectableOptions[activeIndex];
+        if (option) selectOption(option);
+        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 comboboxAria = getPickerComboboxAria({
+    expanded: isOpen,
+    listboxId,
+    activeIndex
+  });
+  const listboxAria = getPickerListboxAria({ id: listboxId });
+  const renderCtx = {
+    listboxId,
+    listboxAria,
+    multiple: isMultiple,
+    loading,
+    getOptionId,
+    activeIndex,
+    setActiveIndex,
+    size,
+    virtual,
+    listHeight,
+    emptyText: resolveLocaleText(labels.emptyText, emptyText),
+    loadingText: labels.loadingText,
+    createOptionLabel,
+    selectOption,
+    isSelected: (option) => isSelectOptionSelected(option, selected, isMultiple),
+    filteredOptions,
+    creatableOption,
+    renderOption
+  };
+  return {
+    rootRef,
+    triggerRef,
+    searchInputRef,
+    dropdownRef,
+    listboxId,
+    comboboxAria,
+    listboxAria,
+    isOpen,
+    isMultiple,
+    searchable,
+    effectiveDisabled,
+    status,
+    shakeTrigger,
+    effectiveId,
+    effectiveName,
+    describedBy,
+    labelledby,
+    ariaLabel,
+    required: formItemControl?.required,
+    displayText,
+    placeholder: resolveLocaleText(labels.placeholder, placeholder),
+    showClear,
+    searchQuery,
+    searchPlaceholder: resolveLocaleText(labels.searchPlaceholder),
+    clearAriaLabel: labels.clearAriaLabel,
+    doneText: labels.doneText,
+    loading,
+    size,
+    className: getSelectRootClasses(inputGroup != null, className),
+    triggerClasses: getSelectTriggerClasses({
+      size,
+      disabled: effectiveDisabled,
+      isOpen,
+      status,
+      hasClear: showClear
+    }),
+    chromeAttr: TIGER_CHROME_ATTR,
+    hiddenValues: effectiveName ? serializeSelectFormValues(selected, isMultiple) : [],
+    renderCtx,
+    toggleDropdown,
+    closeDropdown,
+    openDropdown,
+    clearSelection,
+    updateSearchValue,
+    handleTriggerKeyDown,
+    handleFocusOut,
+    rootClassName: classNames,
+    focusCombobox: () => {
+      if (searchable && isOpen) searchInputRef.current?.focus();
+      else triggerRef.current?.focus();
+    }
+  };
+}
+
+// src/components/Select/render-option.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import {
+  getSelectOptionClasses,
+  selectEmptyStateClasses,
+  selectGroupLabelClasses,
+  selectListboxClasses,
+  getCreateSelectOptionLabel,
+  getPickerOptionAria,
+  getSelectVirtualItemHeight,
+  getSelectVirtualRange,
+  getSelectActiveAlignScrollTop,
+  getSelectRowIndexForOption,
+  buildSelectListRows
+} from "@expcat/tigercat-core";
+
+// src/components/Select/icons.tsx
+import {
+  icon20ViewBox,
+  chevronDownSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  checkSolidIcon20PathD,
+  selectCheckIconClasses,
+  selectChromeIconClasses,
+  selectClearIconClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function SelectIcon({ 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 SelectCheckIcon() {
+  return /* @__PURE__ */ jsx(SelectIcon, { path: checkSolidIcon20PathD, className: selectCheckIconClasses });
+}
+function SelectClearIcon() {
+  return /* @__PURE__ */ jsx(SelectIcon, { path: closeSolidIcon20PathD, className: selectClearIconClasses });
+}
+function SelectChevronIcon() {
+  return /* @__PURE__ */ jsx(SelectIcon, { path: chevronDownSolidIcon20PathD, className: selectChromeIconClasses });
+}
+
+// src/components/Select/render-option.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function OptionRow({
+  ctx,
+  row
+}) {
+  const option = row.option;
+  const selected = ctx.isSelected(option);
+  const active = row.optionIndex === ctx.activeIndex;
+  const displayLabel = row.isCreate ? getCreateSelectOptionLabel(option, ctx.createOptionLabel) : option.label;
+  const optionAria = getPickerOptionAria({
+    selected,
+    disabled: !!option.disabled
+  });
+  const custom = ctx.renderOption?.({
+    value: option.value,
+    label: displayLabel,
+    disabled: option.disabled,
+    selected,
+    active
+  });
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      id: ctx.getOptionId(row.optionIndex),
+      "data-option-index": row.optionIndex,
+      "data-active": active ? "" : void 0,
+      ...optionAria,
+      className: getSelectOptionClasses({
+        isSelected: selected,
+        isDisabled: !!option.disabled,
+        isActive: active,
+        size: ctx.size
+      }),
+      onMouseEnter: () => {
+        if (!option.disabled) ctx.setActiveIndex(row.optionIndex);
+      },
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: () => ctx.selectOption(option),
+      children: custom ?? /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between w-full gap-2", children: [
+        /* @__PURE__ */ jsx2("span", { className: "truncate", children: displayLabel }),
+        selected ? /* @__PURE__ */ jsx2(SelectCheckIcon, {}) : null
+      ] })
+    }
+  );
+}
+function renderRows(ctx, rows) {
+  return rows.map((row) => {
+    if (row.kind === "group") {
+      return /* @__PURE__ */ jsx2("div", { role: "group", "aria-label": row.label, children: /* @__PURE__ */ jsx2("div", { className: selectGroupLabelClasses, "aria-hidden": "true", children: row.label }) }, row.key);
+    }
+    return /* @__PURE__ */ jsx2(OptionRow, { ctx, row }, row.key);
+  });
+}
+function VirtualSelectRows({ ctx, rows }) {
+  const itemHeight = getSelectVirtualItemHeight(ctx.size);
+  const containerRef = useRef2(null);
+  const [scrollTop, setScrollTop] = useState2(0);
+  const rafRef = useRef2(void 0);
+  const { startIndex, endIndex, totalHeight } = getSelectVirtualRange(
+    scrollTop,
+    ctx.listHeight,
+    rows.length,
+    itemHeight
+  );
+  useEffect2(() => {
+    const el = containerRef.current;
+    if (!el || ctx.activeIndex < 0) return;
+    const rowIndex = getSelectRowIndexForOption(rows, ctx.activeIndex);
+    const next = getSelectActiveAlignScrollTop({
+      scrollTop: el.scrollTop,
+      listHeight: ctx.listHeight,
+      rowIndex,
+      itemHeight
+    });
+    if (next !== el.scrollTop) {
+      el.scrollTop = next;
+      setScrollTop(next);
+    }
+  }, [ctx.activeIndex, ctx.listHeight, itemHeight, rows]);
+  useEffect2(
+    () => () => {
+      if (rafRef.current !== void 0) cancelAnimationFrame(rafRef.current);
+    },
+    []
+  );
+  const visible = rows.slice(startIndex, endIndex + 1);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: containerRef,
+      "data-tiger-select-virtual": "",
+      className: selectListboxClasses,
+      style: { maxHeight: `${ctx.listHeight}px` },
+      ...ctx.listboxAria,
+      "aria-multiselectable": ctx.multiple ? true : void 0,
+      "aria-busy": ctx.loading || void 0,
+      onScroll: (event) => {
+        const top = event.currentTarget.scrollTop;
+        if (rafRef.current !== void 0) cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(() => setScrollTop(top));
+      },
+      children: /* @__PURE__ */ jsx2("div", { style: { height: `${totalHeight}px`, position: "relative" }, children: /* @__PURE__ */ jsx2("div", { style: { transform: `translateY(${startIndex * itemHeight}px)` }, children: renderRows(ctx, visible) }) })
+    }
+  );
+}
+function hasSelectOptionRows(ctx) {
+  return buildSelectListRows(ctx.filteredOptions, ctx.creatableOption).some(
+    (row) => row.kind === "option"
+  );
+}
+function renderSelectPanelBody(ctx) {
+  const rows = buildSelectListRows(ctx.filteredOptions, ctx.creatableOption);
+  if (!rows.some((row) => row.kind === "option")) return null;
+  if (ctx.virtual) return /* @__PURE__ */ jsx2(VirtualSelectRows, { ctx, rows });
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: selectListboxClasses,
+      style: { maxHeight: `${ctx.listHeight}px` },
+      ...ctx.listboxAria,
+      "aria-multiselectable": ctx.multiple ? true : void 0,
+      "aria-busy": ctx.loading || void 0,
+      children: renderRows(ctx, rows)
+    }
+  );
+}
+function renderSelectEmpty(ctx) {
+  return /* @__PURE__ */ jsx2("div", { className: selectEmptyStateClasses, children: ctx.loading ? ctx.loadingText : ctx.emptyText });
+}
+
+// src/components/Select.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Select = forwardRef(function Select2(props, ref) {
+  const ctx = useSelectController(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: true,
+    dismissOnOutside: true,
+    dismissOnEscape: true,
+    restoreFocusOnDismiss: true,
+    getContainer: props.getPopupContainer,
+    onDismiss: ctx.closeDropdown
+  });
+  const rootRef = ctx.rootRef;
+  const mountedRef = useRef3(false);
+  useEffect3(() => {
+    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: classNames2(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: classNames2(
+            "flex-1 truncate",
+            ctx.displayText === ctx.placeholder && "text-[var(--tiger-text-muted,#9ca3af)]"
+          ),
+          children: ctx.displayText
+        }
+      )
+    }
+  );
+  const hasOptions = hasSelectOptionRows(ctx.renderCtx);
+  const dropdown = ctx.isOpen ? /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: ctx.dropdownRef,
+      className: classNames2(
+        selectDropdownBaseClasses,
+        overlay.floatingClasses,
+        props.dropdownClassName
+      ),
+      style: overlay.floatingStyles,
+      "data-positioned": overlay.positioned,
+      "data-tiger-select-dropdown": "",
+      onMouseDown: (event) => event.preventDefault(),
+      onBlur: ctx.handleFocusOut,
+      children: [
+        hasOptions ? renderSelectPanelBody(ctx.renderCtx) : renderSelectEmpty(ctx.renderCtx),
+        /* @__PURE__ */ jsx3("div", { className: selectDoneActionClasses, children: /* @__PURE__ */ jsx3("button", { type: "button", className: selectDoneButtonClasses, onClick: ctx.closeDropdown, children: ctx.doneText }) })
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: rootRef,
+      className: ctx.className,
+      style: props.style,
+      ...{ [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-select-clear": "",
+                "aria-label": ctx.clearAriaLabel,
+                onClick: ctx.clearSelection,
+                children: /* @__PURE__ */ jsx3(SelectClearIcon, {})
+              }
+            ) : null,
+            /* @__PURE__ */ jsx3(
+              "span",
+              {
+                className: classNames2(selectChevronWrapClasses, ctx.isOpen && "rotate-180"),
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx3(SelectChevronIcon, {})
+              }
+            )
+          ] })
+        ] }),
+        ctx.hiddenValues.map((value, index) => /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "hidden",
+            name: ctx.effectiveName,
+            value
+          },
+          `${ctx.effectiveName}-${index}-${value}`
+        )),
+        dropdown && renderOverlayPortal(dropdown, overlay.target)
+      ]
+    }
+  );
+});
+Select.displayName = "Select";
+
+export {
+  Select
+};