@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-GJRGMIB3.mjs

@@ -0,0 +1,863 @@
+import {
+  VirtualList
+} from "./chunk-NTCVAVYZ.mjs";
+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/TreeSelect.tsx
+import { forwardRef, useEffect as useEffect2, useImperativeHandle, useRef as useRef2 } from "react";
+import {
+  SHAKE_CLASS,
+  classNames,
+  runShakeAnimation,
+  selectChevronWrapClasses,
+  selectClearButtonClasses,
+  selectTrailingSlotClasses,
+  treeSelectDropdownClasses
+} from "@expcat/tigercat-core";
+
+// src/components/TreeSelect/state.ts
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  TIGER_CHROME_ATTR,
+  TREE_SELECT_DEFAULT_HEIGHT,
+  coerceTreeSelectFormValue,
+  commitTreeSelectNode,
+  getEmptyLabels,
+  getFirstVisibleChildKey,
+  getPickerComboboxAria,
+  getPickerTreeAria,
+  getSelectLabels,
+  getTreeKeyboardAction,
+  getTreeSelectDisplayLabel,
+  getTreeSelectOpenExpandedKeys,
+  getTreeSelectRootClasses,
+  getTreeSelectSelectedKeys,
+  getTreeSelectTreeItemId,
+  getTreeSelectTriggerClasses,
+  getTreeSelectTriggerKeyIntent,
+  getTreeSelectVirtualItemHeight,
+  getTreeSelectVisibleIndex,
+  isSelectTypeaheadCharacter,
+  isTreeNodeExpandable,
+  isTreeSelectValueEmpty,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  normalizeTreeSelectValue,
+  rememberTreeSelectLabel,
+  resolveTreeSelectVisibleItems,
+  serializeTreeSelectFormValues,
+  shouldShowTreeSelectClear,
+  toggleTreeSelectExpandedKey
+} from "@expcat/tigercat-core";
+var EMPTY_TREE_DATA = [];
+var EMPTY_MULTIPLE_VALUE = [];
+function useTreeSelectController(props) {
+  const {
+    treeData: treeDataProp = EMPTY_TREE_DATA,
+    size = "md",
+    disabled = false,
+    placeholder,
+    searchable = false,
+    searchValue,
+    defaultSearchValue = "",
+    clearable = false,
+    emptyText,
+    multiple = false,
+    checkStrictly = true,
+    checkStrategy = "all",
+    defaultExpandAll = false,
+    expandedKeys,
+    defaultExpandedKeys,
+    virtual = false,
+    height = TREE_SELECT_DEFAULT_HEIGHT,
+    itemHeight: itemHeightProp,
+    loading = false,
+    loadData,
+    filterFn,
+    autoClearSearchValue = true,
+    labels: labelsOverride,
+    onSearchChange,
+    onOpenChange,
+    onExpand,
+    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 : coerceTreeSelectFormValue(formItemControl?.value, multiple);
+  const [selected, setSelected] = useControlledState({
+    value: incomingValue,
+    defaultValue: defaultValue ?? (multiple ? EMPTY_MULTIPLE_VALUE : void 0),
+    onChange: (next) => {
+      const normalized = normalizeTreeSelectValue(next, multiple);
+      onChange?.(normalized);
+      formItemControl?.onChange?.(normalized);
+    },
+    postState: (next) => normalizeTreeSelectValue(next, multiple)
+  });
+  const [isOpen, setOpen] = useControlledState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [searchQuery, setSearchQuery] = useControlledState({
+    value: searchValue,
+    defaultValue: defaultSearchValue,
+    onChange: onSearchChange
+  });
+  const instanceId = useId();
+  const treeId = `tiger-treeselect-tree-${instanceId}`;
+  const [loadedData, setLoadedData] = useState(null);
+  const [loadingKeys, setLoadingKeys] = useState(/* @__PURE__ */ new Set());
+  const [localExpanded, setLocalExpanded] = useState(
+    () => new Set(defaultExpandedKeys ?? [])
+  );
+  const [activeKey, setActiveKey] = useState(void 0);
+  const labelCacheRef = useRef(/* @__PURE__ */ new Map());
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const treeDataPropRef = useRef(treeDataProp);
+  if (treeDataPropRef.current !== treeDataProp) {
+    treeDataPropRef.current = treeDataProp;
+    setLoadedData(null);
+  }
+  const treeData = loadedData ?? treeDataProp;
+  const hasLoadData = typeof loadData === "function";
+  const expandedSet = useMemo(() => {
+    if (expandedKeys) return new Set(expandedKeys);
+    return localExpanded;
+  }, [expandedKeys, localExpanded]);
+  const selectedKeys = useMemo(
+    () => getTreeSelectSelectedKeys(selected, multiple),
+    [multiple, selected]
+  );
+  const visibleItems = useMemo(
+    () => resolveTreeSelectVisibleItems({
+      treeData,
+      expandedKeys: expandedSet,
+      searchQuery,
+      filterFn
+    }),
+    [expandedSet, filterFn, searchQuery, treeData]
+  );
+  const displayLabel = getTreeSelectDisplayLabel(treeData, selected, labelCacheRef.current);
+  const placeholderText = placeholder ?? labels.placeholder;
+  const displayText = isTreeSelectValueEmpty(selected, multiple) ? placeholderText : displayLabel;
+  const emptyCopy = loading ? labels.loadingText : emptyText?.trim() ? emptyText : emptyLabels.noResults;
+  const showClear = shouldShowTreeSelectClear({
+    clearable,
+    disabled: effectiveDisabled,
+    value: selected,
+    multiple
+  });
+  const itemHeight = itemHeightProp ?? getTreeSelectVirtualItemHeight(size);
+  const setExpanded = useCallback(
+    (next) => {
+      if (expandedKeys === void 0) setLocalExpanded(next);
+      onExpand?.([...next]);
+    },
+    [expandedKeys, onExpand]
+  );
+  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 commitKey = useCallback(
+    (key) => {
+      const node = visibleItems.find((item) => item.key === key)?.node;
+      if (node) rememberTreeSelectLabel(labelCacheRef.current, key, node.label);
+      const next = commitTreeSelectNode({
+        treeData,
+        key,
+        value: selected,
+        multiple,
+        checkStrictly,
+        checkStrategy
+      });
+      setSelected(next);
+      if (multiple) {
+        if (autoClearSearchValue) setSearchQuery("");
+        return;
+      }
+      closeDropdown();
+      requestAnimationFrame(() => triggerRef.current?.focus());
+    },
+    [
+      autoClearSearchValue,
+      checkStrategy,
+      checkStrictly,
+      closeDropdown,
+      multiple,
+      selected,
+      setSearchQuery,
+      setSelected,
+      treeData,
+      visibleItems
+    ]
+  );
+  const toggleExpand = useCallback(
+    (key) => {
+      setExpanded(toggleTreeSelectExpandedKey(expandedSet, key));
+    },
+    [expandedSet, setExpanded]
+  );
+  const loadChildren = useCallback(
+    async (node) => {
+      if (!loadData) return;
+      setLoadingKeys((current) => new Set(current).add(node.key));
+      try {
+        const children = await loadData(node);
+        const inject = (nodes) => nodes.map(
+          (item) => item.key === node.key ? { ...item, children, isLeaf: children.length === 0 ? true : item.isLeaf } : item.children ? { ...item, children: inject(item.children) } : item
+        );
+        setLoadedData((current) => inject(current ?? treeDataProp));
+        setExpanded(new Set(expandedSet).add(node.key));
+      } finally {
+        setLoadingKeys((current) => {
+          const next = new Set(current);
+          next.delete(node.key);
+          return next;
+        });
+      }
+    },
+    [expandedSet, loadData, setExpanded, treeDataProp]
+  );
+  const handleNodeSelect = useCallback(
+    (item) => {
+      if (item.node.disabled || effectiveDisabled) return;
+      const expandable = isTreeNodeExpandable(item.node, hasLoadData);
+      if (expandable && (!item.node.children || item.node.children.length === 0) && loadData) {
+        void loadChildren(item.node);
+        return;
+      }
+      setActiveKey(item.key);
+      commitKey(item.key);
+    },
+    [commitKey, effectiveDisabled, hasLoadData, loadChildren, loadData]
+  );
+  const handleExpandClick = useCallback(
+    (item, event) => {
+      event.stopPropagation();
+      if (item.node.disabled) return;
+      const expandable = isTreeNodeExpandable(item.node, hasLoadData);
+      if (expandable && (!item.node.children || item.node.children.length === 0) && loadData) {
+        void loadChildren(item.node);
+        return;
+      }
+      toggleExpand(item.key);
+      setActiveKey(item.key);
+    },
+    [hasLoadData, loadChildren, loadData, toggleExpand]
+  );
+  const clearSelection = useCallback(
+    (event) => {
+      event?.stopPropagation();
+      setSelected(multiple ? [] : void 0);
+      requestAnimationFrame(() => triggerRef.current?.focus());
+    },
+    [multiple, setSelected]
+  );
+  useEffect(() => {
+    if (expandedKeys !== void 0) return;
+    if (!defaultExpandAll) return;
+    setLocalExpanded((current) => {
+      const next = getTreeSelectOpenExpandedKeys({
+        treeData,
+        selectedKeys,
+        defaultExpandAll: true,
+        expandedKeys: current
+      });
+      if (next.size === current.size && [...next].every((key) => current.has(key))) {
+        return current;
+      }
+      return next;
+    });
+  }, [defaultExpandAll, expandedKeys, selectedKeys, treeData]);
+  useEffect(() => {
+    if (!isOpen) return;
+    setExpanded(
+      getTreeSelectOpenExpandedKeys({
+        treeData,
+        selectedKeys,
+        defaultExpandAll,
+        expandedKeys: expandedSet
+      })
+    );
+    const visible = resolveTreeSelectVisibleItems({
+      treeData,
+      expandedKeys: expandedSet,
+      searchQuery,
+      filterFn
+    });
+    const index = getTreeSelectVisibleIndex(visible, selected);
+    setActiveKey(visible[index]?.key ?? visible[0]?.key);
+    if (searchable) searchInputRef.current?.focus();
+  }, [isOpen]);
+  const applyTreeAction = useCallback(
+    (key) => {
+      const current = activeKey ?? visibleItems[0]?.key;
+      if (current === void 0) return;
+      const item = visibleItems.find((row) => row.key === current);
+      if (!item) return;
+      const action = getTreeKeyboardAction({
+        key,
+        nodeKey: current,
+        currentKey: current,
+        focusableKeys: visibleItems.filter((row) => !row.node.disabled).map((row) => row.key),
+        parentKey: item.parentKey,
+        firstChildKey: getFirstVisibleChildKey(visibleItems, current),
+        isExpandable: isTreeNodeExpandable(item.node, hasLoadData),
+        isExpanded: expandedSet.has(current),
+        isParentExpanded: item.parentKey !== void 0 && expandedSet.has(item.parentKey),
+        isChecked: selectedKeys.includes(current),
+        selectable: true,
+        checkable: multiple,
+        dir
+      });
+      if (!action) return false;
+      if (action.type === "none") return key === "Escape" ? false : true;
+      if (action.type === "focus") {
+        setActiveKey(action.key);
+        return true;
+      }
+      if (action.type === "toggleExpand") {
+        toggleExpand(action.key);
+        setActiveKey(action.key);
+        return true;
+      }
+      if (action.type === "select") {
+        commitKey(action.key);
+        return true;
+      }
+      if (action.type === "check") {
+        commitKey(action.key);
+        return true;
+      }
+      if (action.type === "collapseAndFocus") {
+        if (action.collapseKey !== void 0) toggleExpand(action.collapseKey);
+        setActiveKey(action.focusKey);
+        return true;
+      }
+      return true;
+    },
+    [
+      activeKey,
+      commitKey,
+      dir,
+      expandedSet,
+      hasLoadData,
+      multiple,
+      selectedKeys,
+      toggleExpand,
+      visibleItems
+    ]
+  );
+  const handleTriggerKeyDown = (event) => {
+    if (effectiveDisabled) return;
+    const fromSearchInput = event.currentTarget.tagName === "INPUT";
+    if (!isOpen && isSelectTypeaheadCharacter(event.key, event)) {
+      event.preventDefault();
+      openDropdown();
+      if (searchable) setSearchQuery(event.key);
+      return;
+    }
+    const intent = getTreeSelectTriggerKeyIntent({
+      key: event.key,
+      open: isOpen,
+      searchable,
+      clearable,
+      hasValue: !isTreeSelectValueEmpty(selected, multiple),
+      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();
+        return;
+      case "select-active": {
+        event.preventDefault();
+        const key = activeKey ?? visibleItems[0]?.key;
+        if (key !== void 0) commitKey(key);
+        return;
+      }
+      case "tree-key": {
+        event.preventDefault();
+        const handled = applyTreeAction(intent.key);
+        if (intent.key === "Escape" && !handled) {
+          closeDropdown();
+          triggerRef.current?.focus();
+        }
+        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 activeOptionId = isOpen && activeKey !== void 0 ? getTreeSelectTreeItemId(treeId, activeKey) : void 0;
+  const comboboxAria = getPickerComboboxAria({
+    expanded: isOpen,
+    listboxId: treeId,
+    activeOptionId,
+    haspopup: "tree"
+  });
+  const treeAria = getPickerTreeAria({
+    id: treeId,
+    multiselectable: multiple
+  });
+  return {
+    rootRef,
+    triggerRef,
+    searchInputRef,
+    dropdownRef,
+    treeId,
+    comboboxAria,
+    treeAria,
+    isOpen,
+    searchable,
+    searchQuery,
+    setSearchQuery,
+    displayText,
+    placeholderText,
+    emptyCopy,
+    showClear,
+    clearAriaLabel: labels.clearAriaLabel,
+    searchPlaceholder: labels.searchPlaceholder,
+    doneText: labels.doneText,
+    expandAriaLabel: labels.expandAriaLabel,
+    collapseAriaLabel: labels.collapseAriaLabel,
+    triggerClasses: getTreeSelectTriggerClasses({
+      size,
+      disabled: effectiveDisabled,
+      isOpen,
+      status,
+      hasClear: showClear
+    }),
+    className: getTreeSelectRootClasses(inputGroup != null, className),
+    chromeAttr: TIGER_CHROME_ATTR,
+    status,
+    shakeTrigger,
+    effectiveId,
+    effectiveName,
+    effectiveDisabled,
+    describedBy,
+    labelledby,
+    ariaLabel,
+    required,
+    size,
+    virtual,
+    height,
+    itemHeight,
+    dir,
+    multiple,
+    loading,
+    loadingKeys,
+    visibleItems,
+    activeKey,
+    setActiveKey,
+    expandedSet,
+    selectedKeys,
+    hiddenValues: effectiveName ? serializeTreeSelectFormValues(selected, multiple) : [],
+    handleNodeSelect,
+    handleExpandClick,
+    handleTriggerKeyDown,
+    handleFocusOut,
+    toggleDropdown,
+    openDropdown,
+    closeDropdown,
+    clearSelection,
+    focusCombobox,
+    isExpandable: (node) => isTreeNodeExpandable(node, hasLoadData)
+  };
+}
+
+// src/components/TreeSelect/render.tsx
+import {
+  getTreeSelectExpandIconClasses,
+  getTreeSelectNodeClasses,
+  getTreeSelectNodeIndentStyle,
+  getTreeSelectTreeItemAria,
+  getTreeSelectTreeItemId as getTreeSelectTreeItemId2,
+  treeSelectDoneActionClasses,
+  treeSelectDoneButtonClasses,
+  treeSelectEmptyClasses,
+  treeSelectExpandButtonClasses,
+  treeSelectTreeClasses
+} from "@expcat/tigercat-core";
+
+// src/components/TreeSelect/icons.tsx
+import {
+  icon20ViewBox,
+  chevronDownSolidIcon20PathD,
+  chevronRightSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  selectChromeIconClasses,
+  selectClearIconClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function TreeSelectIcon({ 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 TreeSelectClearIcon() {
+  return /* @__PURE__ */ jsx(TreeSelectIcon, { path: closeSolidIcon20PathD, className: selectClearIconClasses });
+}
+function TreeSelectChevronIcon() {
+  return /* @__PURE__ */ jsx(TreeSelectIcon, { path: chevronDownSolidIcon20PathD, className: selectChromeIconClasses });
+}
+function TreeSelectNodeChevronIcon() {
+  return /* @__PURE__ */ jsx(
+    TreeSelectIcon,
+    {
+      path: chevronRightSolidIcon20PathD,
+      className: "w-4 h-4 text-[var(--tiger-text-muted,#9ca3af)]"
+    }
+  );
+}
+
+// src/components/TreeSelect/render.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function renderNode(ctx, item) {
+  const selected = ctx.selectedKeys.includes(item.key);
+  const isActive = ctx.activeKey === item.key;
+  const expandable = ctx.isExpandable(item.node);
+  const expanded = ctx.expandedSet.has(item.key);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: getTreeSelectTreeItemId2(ctx.treeId, item.key),
+      className: getTreeSelectNodeClasses({
+        isSelected: selected,
+        isDisabled: Boolean(item.node.disabled),
+        isActive,
+        size: ctx.size
+      }),
+      style: { ...getTreeSelectNodeIndentStyle(item.level), height: ctx.itemHeight },
+      ...getTreeSelectTreeItemAria({
+        selected,
+        disabled: Boolean(item.node.disabled),
+        level: item.level,
+        expanded,
+        expandable
+      }),
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: () => ctx.handleNodeSelect(item),
+      children: [
+        expandable ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: treeSelectExpandButtonClasses,
+            "aria-label": expanded ? ctx.collapseAriaLabel : ctx.expandAriaLabel,
+            "aria-expanded": expanded,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: (event) => ctx.handleExpandClick(item, event),
+            children: /* @__PURE__ */ jsx2("span", { className: getTreeSelectExpandIconClasses(expanded, ctx.dir), children: /* @__PURE__ */ jsx2(TreeSelectNodeChevronIcon, {}) })
+          }
+        ) : /* @__PURE__ */ jsx2("span", { className: "inline-flex w-6 h-6 shrink-0", "aria-hidden": "true" }),
+        ctx.multiple ? /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "checkbox",
+            className: "me-2",
+            tabIndex: -1,
+            checked: selected,
+            disabled: Boolean(item.node.disabled),
+            readOnly: true,
+            "aria-hidden": "true"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx2("span", { className: "flex-1 truncate", children: item.node.label })
+      ]
+    },
+    String(item.key)
+  );
+}
+function renderTreeSelectPanel(ctx) {
+  const body = ctx.visibleItems.length === 0 ? /* @__PURE__ */ jsx2("div", { className: treeSelectEmptyClasses, children: ctx.emptyCopy }) : ctx.virtual ? /* @__PURE__ */ jsx2("div", { className: treeSelectTreeClasses, style: { height: ctx.height }, ...ctx.treeAria, children: /* @__PURE__ */ jsx2(
+    VirtualList,
+    {
+      role: "none",
+      itemCount: ctx.visibleItems.length,
+      itemHeight: ctx.itemHeight,
+      height: ctx.height,
+      renderItem: ({ index }) => {
+        const item = ctx.visibleItems[index];
+        return item ? renderNode(ctx, item) : null;
+      }
+    }
+  ) }) : /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: treeSelectTreeClasses,
+      style: { maxHeight: `${ctx.height}px` },
+      ...ctx.treeAria,
+      children: ctx.visibleItems.map((item) => renderNode(ctx, item))
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    body,
+    /* @__PURE__ */ jsx2("div", { className: treeSelectDoneActionClasses, children: /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: treeSelectDoneButtonClasses,
+        "data-tiger-treeselect-done": "",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: ctx.closeDropdown,
+        children: ctx.doneText
+      }
+    ) })
+  ] });
+}
+
+// src/components/TreeSelect.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TreeSelect = forwardRef(
+  function TreeSelect2(props, ref) {
+    const ctx = useTreeSelectController(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: false,
+      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.setSearchQuery(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(
+          treeSelectDropdownClasses,
+          overlay.floatingClasses,
+          props.dropdownClassName
+        ),
+        style: overlay.floatingStyles,
+        "data-positioned": overlay.positioned,
+        "data-tiger-treeselect-dropdown": "",
+        onMouseDown: (event) => event.preventDefault(),
+        onBlur: ctx.handleFocusOut,
+        children: renderTreeSelectPanel(ctx)
+      }
+    ) : 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-treeselect-clear": "",
+                  "aria-label": ctx.clearAriaLabel,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: ctx.clearSelection,
+                  children: /* @__PURE__ */ jsx3(TreeSelectClearIcon, {})
+                }
+              ) : null,
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  className: classNames(selectChevronWrapClasses, ctx.isOpen && "rotate-180"),
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx3(TreeSelectChevronIcon, {})
+                }
+              )
+            ] })
+          ] }),
+          ctx.hiddenValues.map((value, index) => /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "hidden",
+              name: ctx.effectiveName,
+              value
+            },
+            `${ctx.effectiveName}-${index}-${value}`
+          )),
+          dropdown && renderOverlayPortal(dropdown, overlay.target)
+        ]
+      }
+    );
+  }
+);
+TreeSelect.displayName = "TreeSelect";
+
+export {
+  TreeSelect
+};