@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-5TASA6W6.mjs

@@ -0,0 +1,743 @@
+import {
+  INPUT_GROUP_INJECTION_KEY
+} from "./chunk-J4HGCSOE.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Y63TRXZO.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/TreeSelect.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  h,
+  inject,
+  watch,
+  nextTick,
+  useId
+} from "vue";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  TREE_SELECT_DEFAULT_HEIGHT,
+  classNames,
+  coerceClassValue,
+  coerceTreeSelectFormValue,
+  commitTreeSelectNode,
+  getEmptyLabels,
+  getFirstVisibleChildKey,
+  getPickerComboboxAria,
+  getPickerTreeAria,
+  getSelectLabels,
+  getTreeKeyboardAction,
+  getTreeSelectDisplayLabel,
+  getTreeSelectExpandIconClasses,
+  getTreeSelectNodeClasses,
+  getTreeSelectNodeIndentStyle,
+  getTreeSelectOpenExpandedKeys,
+  getTreeSelectRootClasses,
+  getTreeSelectSelectedKeys,
+  getTreeSelectTreeItemAria,
+  getTreeSelectTreeItemId,
+  getTreeSelectTriggerClasses,
+  getTreeSelectTriggerKeyIntent,
+  getTreeSelectVirtualItemHeight,
+  getTreeSelectVisibleIndex,
+  icon20ViewBox,
+  chevronDownSolidIcon20PathD,
+  chevronRightSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  isSelectTypeaheadCharacter,
+  isTreeNodeExpandable,
+  isTreeSelectValueEmpty,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  normalizeTreeSelectValue,
+  rememberTreeSelectLabel,
+  resolveTreeSelectVisibleItems,
+  runShakeAnimation,
+  selectChevronWrapClasses,
+  selectChromeIconClasses,
+  selectClearButtonClasses,
+  selectClearIconClasses,
+  selectTrailingSlotClasses,
+  serializeTreeSelectFormValues,
+  shouldShowTreeSelectClear,
+  toggleTreeSelectExpandedKey,
+  treeSelectDoneActionClasses,
+  treeSelectDoneButtonClasses,
+  treeSelectDropdownClasses,
+  treeSelectEmptyClasses,
+  treeSelectExpandButtonClasses,
+  treeSelectTreeClasses
+} from "@expcat/tigercat-core";
+function iconVNode(path, className) {
+  return h(
+    "svg",
+    {
+      class: className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    [
+      h("path", {
+        "fill-rule": "evenodd",
+        d: path,
+        "clip-rule": "evenodd"
+      })
+    ]
+  );
+}
+var TreeSelect = defineComponent({
+  name: "TigerTreeSelect",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: [String, Number, Array], default: void 0 },
+    defaultValue: {
+      type: [String, Number, Array],
+      default: void 0
+    },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    treeData: { type: Array, default: () => [] },
+    placeholder: { type: String, default: void 0 },
+    size: { type: String, default: "md" },
+    disabled: Boolean,
+    clearable: Boolean,
+    multiple: Boolean,
+    checkStrictly: { type: Boolean, default: true },
+    checkStrategy: { type: String, default: "all" },
+    searchable: Boolean,
+    searchValue: { type: String, default: void 0 },
+    defaultSearchValue: { type: String, default: "" },
+    autoClearSearchValue: { type: Boolean, default: true },
+    emptyText: { type: String, default: void 0 },
+    defaultExpandAll: Boolean,
+    expandedKeys: { type: Array, default: void 0 },
+    defaultExpandedKeys: { type: Array, default: void 0 },
+    virtual: Boolean,
+    height: { type: Number, default: TREE_SELECT_DEFAULT_HEIGHT },
+    itemHeight: { type: Number, default: void 0 },
+    loading: Boolean,
+    loadData: { type: Function },
+    filterFn: { type: Function },
+    status: { type: String, default: void 0 },
+    name: String,
+    placement: { type: String, default: "bottom-start" },
+    offset: { type: Number, default: 4 },
+    dropdownClassName: String,
+    getPopupContainer: { type: Function },
+    locale: { type: Object },
+    labels: { type: Object },
+    className: String
+  },
+  emits: [
+    "update:modelValue",
+    "update:searchValue",
+    "update:open",
+    "update:expandedKeys",
+    "change",
+    "search-change",
+    "open-change",
+    "expand",
+    "blur"
+  ],
+  setup(props, { emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const inputGroup = inject(INPUT_GROUP_INJECTION_KEY, null);
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getSelectLabels(mergedLocale.value, props.labels));
+    const emptyLabels = computed(() => getEmptyLabels(mergedLocale.value));
+    const dir = computed(() => config.value.direction === "rtl" ? "rtl" : "ltr");
+    const instanceId = useId();
+    const treeId = computed(() => `tiger-treeselect-tree-${instanceId}`);
+    const localValue = ref(
+      normalizeTreeSelectValue(
+        props.modelValue ?? coerceTreeSelectFormValue(formItemControl?.value.value, props.multiple) ?? props.defaultValue ?? (props.multiple ? [] : void 0),
+        props.multiple
+      )
+    );
+    const localOpen = ref(props.defaultOpen);
+    const localSearch = ref(props.defaultSearchValue);
+    const loadedData = ref(null);
+    const localExpanded = ref(new Set(props.defaultExpandedKeys ?? []));
+    const activeKey = ref(void 0);
+    const labelCache = /* @__PURE__ */ new Map();
+    const rootRef = ref(null);
+    const triggerRef = ref(null);
+    const searchInputRef = ref(null);
+    const dropdownRef = ref(null);
+    const selected = computed(
+      () => props.modelValue !== void 0 ? normalizeTreeSelectValue(props.modelValue, props.multiple) : coerceTreeSelectFormValue(formItemControl?.value.value, props.multiple) ?? localValue.value
+    );
+    const isOpen = computed(() => props.open !== void 0 ? props.open : localOpen.value);
+    const searchQuery = computed(() => props.searchValue ?? localSearch.value);
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const treeData = computed(() => loadedData.value ?? props.treeData);
+    const expandedSet = computed(
+      () => props.expandedKeys ? new Set(props.expandedKeys) : localExpanded.value
+    );
+    const selectedKeys = computed(() => getTreeSelectSelectedKeys(selected.value, props.multiple));
+    const visibleItems = computed(
+      () => resolveTreeSelectVisibleItems({
+        treeData: treeData.value,
+        expandedKeys: expandedSet.value,
+        searchQuery: searchQuery.value,
+        filterFn: props.filterFn
+      })
+    );
+    const placeholderText = computed(() => props.placeholder ?? labels.value.placeholder);
+    const displayText = computed(
+      () => isTreeSelectValueEmpty(selected.value, props.multiple) ? placeholderText.value : getTreeSelectDisplayLabel(treeData.value, selected.value, labelCache)
+    );
+    const emptyCopy = computed(
+      () => props.loading ? labels.value.loadingText : props.emptyText?.trim() ? props.emptyText : emptyLabels.value.noResults
+    );
+    const showClear = computed(
+      () => shouldShowTreeSelectClear({
+        clearable: props.clearable,
+        disabled: effectiveDisabled.value,
+        value: selected.value,
+        multiple: props.multiple
+      })
+    );
+    const itemHeight = computed(
+      () => props.itemHeight ?? getTreeSelectVirtualItemHeight(props.size)
+    );
+    const hasLoadData = computed(() => typeof props.loadData === "function");
+    watch(
+      () => [props.modelValue, formItemControl?.value.value],
+      ([model, formValue]) => {
+        const next = model !== void 0 ? model : coerceTreeSelectFormValue(formValue, props.multiple);
+        if (next === void 0) return;
+        localValue.value = normalizeTreeSelectValue(next, props.multiple);
+      }
+    );
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value],
+      (current, previous) => {
+        if (!previous) return;
+        if (current[0] === "error") runShakeAnimation(rootRef.value);
+      },
+      { flush: "post" }
+    );
+    watch(
+      () => props.treeData,
+      () => {
+        loadedData.value = null;
+      }
+    );
+    watch(
+      () => props.treeData,
+      (data) => {
+        if (props.expandedKeys !== void 0 || !props.defaultExpandAll) return;
+        localExpanded.value = getTreeSelectOpenExpandedKeys({
+          treeData: data,
+          selectedKeys: selectedKeys.value,
+          defaultExpandAll: true,
+          expandedKeys: localExpanded.value
+        });
+      },
+      { immediate: true }
+    );
+    function setOpen(next) {
+      if (props.open === void 0) localOpen.value = next;
+      emit("update:open", next);
+      emit("open-change", next);
+    }
+    function setSearch(query) {
+      if (props.searchValue === void 0) localSearch.value = query;
+      emit("update:searchValue", query);
+      emit("search-change", query);
+    }
+    function setSelected(next) {
+      const normalized = normalizeTreeSelectValue(next, props.multiple);
+      if (props.modelValue === void 0) localValue.value = normalized;
+      emit("update:modelValue", normalized);
+      emit("change", normalized);
+      formItemControl?.onChange(normalized);
+    }
+    function setExpanded(next) {
+      if (props.expandedKeys === void 0) localExpanded.value = next;
+      const keys = [...next];
+      emit("update:expandedKeys", keys);
+      emit("expand", keys);
+    }
+    function closeDropdown() {
+      setOpen(false);
+    }
+    function openDropdown() {
+      if (effectiveDisabled.value) return;
+      setOpen(true);
+    }
+    function toggleDropdown() {
+      if (effectiveDisabled.value) return;
+      if (isOpen.value) closeDropdown();
+      else openDropdown();
+    }
+    function focusCombobox() {
+      triggerRef.value?.focus();
+    }
+    function commitKey(key) {
+      const node = visibleItems.value.find((item) => item.key === key)?.node;
+      if (node) rememberTreeSelectLabel(labelCache, key, node.label);
+      const next = commitTreeSelectNode({
+        treeData: treeData.value,
+        key,
+        value: selected.value,
+        multiple: props.multiple,
+        checkStrictly: props.checkStrictly,
+        checkStrategy: props.checkStrategy
+      });
+      setSelected(next);
+      if (props.multiple) {
+        if (props.autoClearSearchValue) setSearch("");
+        return;
+      }
+      closeDropdown();
+      nextTick(() => triggerRef.value?.focus());
+    }
+    function toggleExpand(key) {
+      setExpanded(toggleTreeSelectExpandedKey(expandedSet.value, key));
+    }
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: dropdownRef,
+      placement: () => props.placement ?? "bottom-start",
+      offset: () => props.offset ?? 4,
+      layout: "fullscreen-sm",
+      matchReferenceWidth: false,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: () => props.getPopupContainer?.() ?? null,
+      onDismiss: closeDropdown
+    });
+    async function loadChildren(node) {
+      if (!props.loadData) return;
+      const inject2 = (nodes, children2) => nodes.map(
+        (item) => item.key === node.key ? { ...item, children: children2, isLeaf: children2.length === 0 ? true : item.isLeaf } : item.children ? { ...item, children: inject2(item.children, children2) } : item
+      );
+      const children = await props.loadData(node);
+      loadedData.value = inject2(loadedData.value ?? props.treeData, children);
+      setExpanded(new Set(expandedSet.value).add(node.key));
+    }
+    function handleNodeSelect(item) {
+      if (item.node.disabled || effectiveDisabled.value) return;
+      const expandable = isTreeNodeExpandable(item.node, hasLoadData.value);
+      if (expandable && (!item.node.children || item.node.children.length === 0) && props.loadData) {
+        void loadChildren(item.node);
+        return;
+      }
+      activeKey.value = item.key;
+      commitKey(item.key);
+    }
+    function handleExpandClick(item, event) {
+      event.stopPropagation();
+      if (item.node.disabled) return;
+      const expandable = isTreeNodeExpandable(item.node, hasLoadData.value);
+      if (expandable && (!item.node.children || item.node.children.length === 0) && props.loadData) {
+        void loadChildren(item.node);
+        return;
+      }
+      toggleExpand(item.key);
+      activeKey.value = item.key;
+    }
+    function clearSelection(event) {
+      event?.stopPropagation();
+      setSelected(props.multiple ? [] : void 0);
+      nextTick(() => triggerRef.value?.focus());
+    }
+    function applyTreeAction(key) {
+      const current = activeKey.value ?? visibleItems.value[0]?.key;
+      if (current === void 0) return false;
+      const item = visibleItems.value.find((row) => row.key === current);
+      if (!item) return false;
+      const action = getTreeKeyboardAction({
+        key,
+        nodeKey: current,
+        currentKey: current,
+        focusableKeys: visibleItems.value.filter((row) => !row.node.disabled).map((row) => row.key),
+        parentKey: item.parentKey,
+        firstChildKey: getFirstVisibleChildKey(visibleItems.value, current),
+        isExpandable: isTreeNodeExpandable(item.node, hasLoadData.value),
+        isExpanded: expandedSet.value.has(current),
+        isParentExpanded: item.parentKey !== void 0 && expandedSet.value.has(item.parentKey),
+        isChecked: selectedKeys.value.includes(current),
+        selectable: true,
+        checkable: props.multiple,
+        dir: dir.value
+      });
+      if (!action) return false;
+      if (action.type === "none") return key !== "Escape";
+      if (action.type === "focus") {
+        activeKey.value = action.key;
+        return true;
+      }
+      if (action.type === "toggleExpand") {
+        toggleExpand(action.key);
+        activeKey.value = action.key;
+        return true;
+      }
+      if (action.type === "select" || action.type === "check") {
+        commitKey(action.key);
+        return true;
+      }
+      if (action.type === "collapseAndFocus") {
+        if (action.collapseKey !== void 0) toggleExpand(action.collapseKey);
+        activeKey.value = action.focusKey;
+        return true;
+      }
+      return true;
+    }
+    function handleKeyDown(event, fromSearchInput = false) {
+      if (effectiveDisabled.value) return;
+      if (!isOpen.value && isSelectTypeaheadCharacter(event.key, event)) {
+        event.preventDefault();
+        openDropdown();
+        if (props.searchable) setSearch(event.key);
+        return;
+      }
+      const intent = getTreeSelectTriggerKeyIntent({
+        key: event.key,
+        open: isOpen.value,
+        searchable: props.searchable,
+        clearable: props.clearable,
+        hasValue: !isTreeSelectValueEmpty(selected.value, props.multiple),
+        fromSearchInput
+      });
+      switch (intent.type) {
+        case "open":
+          event.preventDefault();
+          openDropdown();
+          return;
+        case "close":
+          if (event.key !== "Tab") event.preventDefault();
+          closeDropdown();
+          triggerRef.value?.focus();
+          return;
+        case "clear":
+          event.preventDefault();
+          clearSelection();
+          return;
+        case "prevent-scroll":
+          event.preventDefault();
+          openDropdown();
+          return;
+        case "select-active": {
+          event.preventDefault();
+          const key = activeKey.value ?? visibleItems.value[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.value?.focus();
+          }
+          return;
+        }
+        default:
+          return;
+      }
+    }
+    function handleFocusOut(event) {
+      const next = event.relatedTarget;
+      if (rootRef.value && next && rootRef.value.contains(next) || dropdownRef.value && next && dropdownRef.value.contains(next)) {
+        return;
+      }
+      formItemControl?.onBlur();
+      emit("blur", event);
+    }
+    watch(isOpen, (open) => {
+      if (!open) return;
+      setExpanded(
+        getTreeSelectOpenExpandedKeys({
+          treeData: treeData.value,
+          selectedKeys: selectedKeys.value,
+          defaultExpandAll: props.defaultExpandAll,
+          expandedKeys: expandedSet.value
+        })
+      );
+      const visible = resolveTreeSelectVisibleItems({
+        treeData: treeData.value,
+        expandedKeys: expandedSet.value,
+        searchQuery: searchQuery.value,
+        filterFn: props.filterFn
+      });
+      const index = getTreeSelectVisibleIndex(visible, selected.value);
+      activeKey.value = visible[index]?.key ?? visible[0]?.key;
+      if (props.searchable) nextTick(() => searchInputRef.value?.focus());
+    });
+    expose({ focus: focusCombobox, open: openDropdown, close: closeDropdown });
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const ariaLabel = typeof restAttrs["aria-label"] === "string" ? restAttrs["aria-label"] : void 0;
+      const attrLabelledby = typeof restAttrs["aria-labelledby"] === "string" ? restAttrs["aria-labelledby"] : void 0;
+      const labelledby = attrLabelledby?.trim() ? attrLabelledby : formItemControl?.labelId.value;
+      const describedBy = mergeAriaDescribedBy(
+        typeof restAttrs["aria-describedby"] === "string" ? restAttrs["aria-describedby"] : void 0,
+        formItemControl?.describedBy.value
+      );
+      const attrId = typeof restAttrs.id === "string" ? restAttrs.id : void 0;
+      const effectiveId = attrId ?? formItemControl?.id.value;
+      const effectiveName = props.name ?? formItemControl?.name.value;
+      const activeOptionId = isOpen.value && activeKey.value !== void 0 ? getTreeSelectTreeItemId(treeId.value, activeKey.value) : void 0;
+      const comboboxAria = getPickerComboboxAria({
+        expanded: isOpen.value,
+        listboxId: treeId.value,
+        activeOptionId,
+        haspopup: "tree"
+      });
+      const treeAria = getPickerTreeAria({
+        id: treeId.value,
+        multiselectable: props.multiple
+      });
+      const triggerClasses = getTreeSelectTriggerClasses({
+        size: props.size,
+        disabled: effectiveDisabled.value,
+        isOpen: isOpen.value,
+        status: status.value,
+        hasClear: showClear.value
+      });
+      const comboboxProps = {
+        ...comboboxAria,
+        id: effectiveId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": labelledby,
+        "aria-describedby": describedBy,
+        "aria-invalid": status.value === "error" ? true : void 0,
+        "aria-required": formItemControl?.required.value ? true : void 0,
+        "aria-autocomplete": props.searchable ? "list" : "none"
+      };
+      const searchOpen = props.searchable && isOpen.value;
+      let trigger;
+      if (searchOpen) {
+        trigger = h("input", {
+          ref: (node) => {
+            const el = node instanceof HTMLInputElement ? node : null;
+            searchInputRef.value = el;
+            triggerRef.value = el;
+          },
+          type: "text",
+          class: classNames(triggerClasses, "bg-transparent"),
+          disabled: effectiveDisabled.value,
+          value: searchQuery.value,
+          placeholder: displayText.value,
+          onInput: (event) => setSearch(event.target.value),
+          onKeydown: (event) => handleKeyDown(event, true),
+          onFocusout: handleFocusOut,
+          ...comboboxProps
+        });
+      } else {
+        trigger = h(
+          "div",
+          {
+            ref: triggerRef,
+            tabindex: effectiveDisabled.value ? -1 : 0,
+            class: triggerClasses,
+            onClick: toggleDropdown,
+            onKeydown: (event) => handleKeyDown(event, false),
+            onFocusout: handleFocusOut,
+            ...comboboxProps
+          },
+          [
+            h(
+              "span",
+              {
+                class: classNames(
+                  "flex-1 truncate",
+                  displayText.value === placeholderText.value && "text-[var(--tiger-text-muted,#9ca3af)]"
+                )
+              },
+              displayText.value
+            )
+          ]
+        );
+      }
+      function renderNode(item) {
+        const selectedNode = selectedKeys.value.includes(item.key);
+        const isActive = activeKey.value === item.key;
+        const expandable = isTreeNodeExpandable(item.node, hasLoadData.value);
+        const expanded = expandedSet.value.has(item.key);
+        return h(
+          "div",
+          {
+            key: String(item.key),
+            id: getTreeSelectTreeItemId(treeId.value, item.key),
+            class: getTreeSelectNodeClasses({
+              isSelected: selectedNode,
+              isDisabled: Boolean(item.node.disabled),
+              isActive,
+              size: props.size
+            }),
+            style: {
+              ...getTreeSelectNodeIndentStyle(item.level),
+              height: `${itemHeight.value}px`
+            },
+            ...getTreeSelectTreeItemAria({
+              selected: selectedNode,
+              disabled: Boolean(item.node.disabled),
+              level: item.level,
+              expanded,
+              expandable
+            }),
+            onMousedown: (event) => event.preventDefault(),
+            onClick: () => handleNodeSelect(item)
+          },
+          [
+            expandable ? h(
+              "button",
+              {
+                type: "button",
+                class: treeSelectExpandButtonClasses,
+                "aria-label": expanded ? labels.value.collapseAriaLabel : labels.value.expandAriaLabel,
+                "aria-expanded": expanded,
+                onMousedown: (event) => event.preventDefault(),
+                onClick: (event) => handleExpandClick(item, event)
+              },
+              [
+                h("span", { class: getTreeSelectExpandIconClasses(expanded, dir.value) }, [
+                  iconVNode(
+                    chevronRightSolidIcon20PathD,
+                    "w-4 h-4 text-[var(--tiger-text-muted,#9ca3af)]"
+                  )
+                ])
+              ]
+            ) : h("span", { class: "inline-flex w-6 h-6 shrink-0", "aria-hidden": "true" }),
+            props.multiple ? h("input", {
+              type: "checkbox",
+              class: "me-2",
+              tabindex: -1,
+              checked: selectedNode,
+              disabled: Boolean(item.node.disabled),
+              readonly: true,
+              "aria-hidden": "true"
+            }) : null,
+            h("span", { class: "flex-1 truncate" }, item.node.label)
+          ]
+        );
+      }
+      const body = visibleItems.value.length === 0 ? h("div", { class: treeSelectEmptyClasses }, emptyCopy.value) : h(
+        "div",
+        {
+          class: treeSelectTreeClasses,
+          style: { maxHeight: `${props.height}px` },
+          ...treeAria
+        },
+        visibleItems.value.map(renderNode)
+      );
+      const dropdown = isOpen.value ? renderVueOverlayTeleport(
+        h(
+          "div",
+          {
+            ref: dropdownRef,
+            class: classNames(
+              treeSelectDropdownClasses,
+              overlay.floatingClasses.value,
+              props.dropdownClassName
+            ),
+            style: overlay.floatingStyles.value,
+            "data-positioned": overlay.positioned.value,
+            "data-tiger-treeselect-dropdown": "",
+            onMousedown: (event) => event.preventDefault(),
+            onFocusout: handleFocusOut
+          },
+          [
+            body,
+            h("div", { class: treeSelectDoneActionClasses }, [
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: treeSelectDoneButtonClasses,
+                  "data-tiger-treeselect-done": "",
+                  onMousedown: (event) => event.preventDefault(),
+                  onClick: closeDropdown
+                },
+                labels.value.doneText
+              )
+            ])
+          ]
+        ),
+        overlay.target.value
+      ) : null;
+      const hiddenValues = effectiveName ? serializeTreeSelectFormValues(selected.value, props.multiple) : [];
+      return h(
+        "div",
+        {
+          ref: rootRef,
+          class: getTreeSelectRootClasses(
+            inputGroup != null,
+            classNames(props.className, coerceClassValue(attrClass))
+          ),
+          style: attrStyle ?? void 0,
+          [TIGER_CHROME_ATTR]: "",
+          onAnimationend: () => rootRef.value?.classList.remove(SHAKE_CLASS)
+        },
+        [
+          h("div", { class: "relative" }, [
+            trigger,
+            h("span", { class: selectTrailingSlotClasses }, [
+              showClear.value ? h(
+                "button",
+                {
+                  type: "button",
+                  class: selectClearButtonClasses,
+                  "data-tiger-treeselect-clear": "",
+                  "aria-label": labels.value.clearAriaLabel,
+                  onMousedown: (event) => event.preventDefault(),
+                  onClick: clearSelection
+                },
+                iconVNode(closeSolidIcon20PathD, selectClearIconClasses)
+              ) : null,
+              h(
+                "span",
+                {
+                  class: classNames(selectChevronWrapClasses, isOpen.value && "rotate-180"),
+                  "aria-hidden": "true"
+                },
+                iconVNode(chevronDownSolidIcon20PathD, selectChromeIconClasses)
+              )
+            ])
+          ]),
+          ...hiddenValues.map(
+            (value, index) => h("input", {
+              key: `${effectiveName}-${index}-${value}`,
+              type: "hidden",
+              name: effectiveName,
+              value
+            })
+          ),
+          dropdown
+        ]
+      );
+    };
+  }
+});
+
+export {
+  TreeSelect
+};