@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-Q4TGJNVU.mjs

@@ -0,0 +1,857 @@
+import {
+  useDrag
+} from "./chunk-REJVXLW5.mjs";
+import {
+  VirtualList
+} from "./chunk-NTCVAVYZ.mjs";
+import {
+  Checkbox
+} from "./chunk-HAG7TGPS.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Tree.tsx
+import { forwardRef } from "react";
+import {
+  classNames as classNames2,
+  treeBaseClasses,
+  treeEmptyStateClasses,
+  treeSearchInputClasses
+} from "@expcat/tigercat-core";
+
+// src/components/Tree/state.ts
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  EMPTY_TREE_DATA,
+  EMPTY_TREE_KEYS,
+  applyLoadedChildren,
+  applyTreeDrop,
+  applyTreeFilter,
+  applyTreeKeyboard,
+  createTreeKeyIdSet,
+  formatTreeSelectNodeLabel,
+  getCheckedKeysByStrategy,
+  getTreeLabels,
+  lookupTreeNode,
+  mergeLoadedChildren,
+  mergeTigerLocale,
+  nextTreeCheckedState,
+  nextTreeExpandedKeys,
+  nextTreeSelectedKeys,
+  reconcileUncontrolledExpandedKeys,
+  resolveCheckedInput,
+  resolveInitialExpandedKeys,
+  resolveLocaleText,
+  resolveTreeDropPosition,
+  resolveTreeKeyboardAction,
+  resolveTreeSelection,
+  resolveTreeView,
+  shouldLoadTreeNode,
+  sameTreeKey,
+  treeKeyId,
+  uniqueTreeKeys,
+  warnControlledExpandedFilter,
+  devWarn
+} from "@expcat/tigercat-core";
+function sameKeyList(a, b) {
+  if (a.length !== b.length) return false;
+  const ids = createTreeKeyIdSet(a);
+  return b.every((key) => ids.has(treeKeyId(key)));
+}
+function useTreeState(props) {
+  const {
+    treeData: treeDataProp,
+    selectionMode,
+    checkable = false,
+    showIcon = true,
+    showLine = false,
+    defaultExpandedKeys,
+    defaultSelectedKeys,
+    defaultCheckedKeys,
+    expandedKeys: controlledExpandedKeys,
+    selectedKeys: controlledSelectedKeys,
+    checkedKeys: controlledCheckedKeys,
+    defaultExpandAll = false,
+    checkStrictly = false,
+    checkStrategy = "all",
+    selectable,
+    multiple,
+    allowDeselect = false,
+    loadData,
+    loadedKeys: controlledLoadedKeys,
+    filterValue,
+    searchValue,
+    defaultSearchValue,
+    searchable = false,
+    filterFn,
+    filterMode,
+    autoExpandParent = true,
+    blockNode = false,
+    emptyText,
+    ariaLabel,
+    onExpandedKeysChange,
+    onSelectedKeysChange,
+    onCheckedKeysChange,
+    onSearch,
+    onExpand,
+    onSelect,
+    onCheck,
+    onLoad,
+    onLoadedKeysChange,
+    onDrop,
+    onTreeDataChange,
+    onNodeClick,
+    onNodeExpand,
+    onNodeCollapse,
+    className,
+    draggable = false,
+    virtual = false,
+    height = 400,
+    itemHeight = 32,
+    locale,
+    "aria-labelledby": labelledBy
+  } = props;
+  const treeData = treeDataProp ?? EMPTY_TREE_DATA;
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getTreeLabels(mergedLocale), [mergedLocale]);
+  const dir = config.direction === "rtl" ? "rtl" : "ltr";
+  const selection = resolveTreeSelection({ selectionMode, selectable, multiple });
+  const hasLoadData = typeof loadData === "function";
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const virtualRef = useRef(null);
+  const dropPosRef = useRef("inside");
+  const autoExpandRef = useRef([]);
+  const [dropIndicator, setDropIndicator] = useState(null);
+  const [loadedMap, setLoadedMap] = useState(() => /* @__PURE__ */ new Map());
+  const [dropTree, setDropTree] = useState(void 0);
+  const [dropTreeFrom, setDropTreeFrom] = useState(void 0);
+  if (dropTreeFrom !== void 0 && dropTreeFrom !== treeData && dropTree !== void 0) {
+    setDropTree(void 0);
+    setDropTreeFrom(void 0);
+  }
+  const sourceTree = dropTree ?? treeData;
+  const derivedTree = useMemo(
+    () => mergeLoadedChildren(sourceTree, loadedMap),
+    [sourceTree, loadedMap]
+  );
+  const [userHasToggled, setUserHasToggled] = useState(false);
+  const [internalExpanded, setInternalExpanded] = useState(
+    () => resolveInitialExpandedKeys({
+      treeData: derivedTree,
+      expandedKeys: controlledExpandedKeys,
+      defaultExpandedKeys,
+      defaultExpandAll
+    }).keys
+  );
+  const [internalSelected, setInternalSelected] = useState(
+    () => controlledSelectedKeys ?? defaultSelectedKeys ?? EMPTY_TREE_KEYS
+  );
+  const [internalChecked, setInternalChecked] = useState(
+    () => resolveCheckedInput(derivedTree, controlledCheckedKeys, defaultCheckedKeys, checkStrictly)
+  );
+  const [loadingIds, setLoadingIds] = useState(() => /* @__PURE__ */ new Set());
+  const [activeKey, setActiveKey] = useState(void 0);
+  const [internalSearch, setInternalSearch] = useState(defaultSearchValue ?? "");
+  useEffect(() => {
+    if (controlledExpandedKeys !== void 0) return;
+    setInternalExpanded(
+      (current) => reconcileUncontrolledExpandedKeys({
+        current,
+        treeData: derivedTree,
+        defaultExpandAll,
+        userHasToggled
+      })
+    );
+  }, [derivedTree, defaultExpandAll, userHasToggled, controlledExpandedKeys]);
+  const computedExpanded = controlledExpandedKeys !== void 0 ? controlledExpandedKeys : internalExpanded;
+  const computedSelected = controlledSelectedKeys !== void 0 ? controlledSelectedKeys : internalSelected;
+  const computedChecked = controlledCheckedKeys !== void 0 ? resolveCheckedInput(derivedTree, controlledCheckedKeys, void 0, checkStrictly) : internalChecked;
+  const searchQuery = searchValue !== void 0 ? searchValue : filterValue !== void 0 ? filterValue : internalSearch;
+  const matchedKeys = useMemo(
+    () => searchQuery ? applyTreeFilter({
+      treeData: derivedTree,
+      query: searchQuery,
+      filterFn,
+      filterMode,
+      autoExpandParent: false,
+      currentExpanded: EMPTY_TREE_KEYS
+    }).matchedKeys : /* @__PURE__ */ new Set(),
+    [derivedTree, searchQuery, filterFn, filterMode]
+  );
+  useEffect(() => {
+    const result = applyTreeFilter({
+      treeData: derivedTree,
+      query: searchQuery,
+      filterFn,
+      filterMode,
+      autoExpandParent,
+      currentExpanded: computedExpanded,
+      previousAutoExpand: autoExpandRef.current
+    });
+    autoExpandRef.current = result.autoExpandKeys;
+    if (!autoExpandParent) return;
+    if (sameKeyList(computedExpanded, result.nextExpandedKeys)) return;
+    if (controlledExpandedKeys === void 0) {
+      setInternalExpanded(result.nextExpandedKeys);
+    }
+    onExpandedKeysChange?.(result.nextExpandedKeys);
+    if (controlledExpandedKeys !== void 0) warnControlledExpandedFilter(true);
+  }, [
+    derivedTree,
+    searchQuery,
+    filterFn,
+    filterMode,
+    autoExpandParent,
+    computedExpanded,
+    controlledExpandedKeys,
+    onExpandedKeysChange
+  ]);
+  const view = useMemo(
+    () => resolveTreeView({
+      treeData: derivedTree,
+      expandedKeys: computedExpanded,
+      selectedKeys: computedSelected,
+      checkedState: computedChecked,
+      matchedKeys: searchQuery ? matchedKeys : void 0,
+      loadingKeys: loadingIds,
+      checkable,
+      selectable: selection.selectable,
+      hasLoadData
+    }),
+    [
+      derivedTree,
+      computedExpanded,
+      computedSelected,
+      computedChecked,
+      searchQuery,
+      matchedKeys,
+      loadingIds,
+      checkable,
+      selection.selectable,
+      hasLoadData
+    ]
+  );
+  const loadedIds = useMemo(() => {
+    const ids = new Set(loadedMap.keys());
+    if (controlledLoadedKeys) {
+      for (const key of controlledLoadedKeys) ids.add(treeKeyId(key));
+    }
+    return ids;
+  }, [loadedMap, controlledLoadedKeys]);
+  const commitExpanded = useCallback(
+    (next, node, expanded) => {
+      setUserHasToggled(true);
+      if (controlledExpandedKeys === void 0) setInternalExpanded(next);
+      onExpandedKeysChange?.(next);
+      onExpand?.(next, { expanded, node });
+      if (expanded) onNodeExpand?.(node, node.key);
+      else onNodeCollapse?.(node, node.key);
+    },
+    [controlledExpandedKeys, onExpandedKeysChange, onExpand, onNodeExpand, onNodeCollapse]
+  );
+  const handleExpand = useCallback(
+    (nodeKey) => {
+      const node = lookupTreeNode(view.index, nodeKey);
+      if (!node || node.disabled) return;
+      const expanded = computedExpanded.some((key) => sameTreeKey(key, nodeKey));
+      const next = nextTreeExpandedKeys(computedExpanded, node.key, !expanded);
+      commitExpanded(next, node, !expanded);
+      if (!expanded && shouldLoadTreeNode({
+        node,
+        hasLoadData,
+        loadedIds,
+        loadingIds
+      })) {
+        const id = treeKeyId(node.key);
+        setLoadingIds((prev) => new Set(prev).add(id));
+        loadData?.(node).then((children) => {
+          setLoadedMap((prev) => {
+            const nextMap = new Map(prev);
+            nextMap.set(id, children);
+            return nextMap;
+          });
+          setLoadingIds((prev) => {
+            const nextSet = new Set(prev);
+            nextSet.delete(id);
+            return nextSet;
+          });
+          const nextTree = applyLoadedChildren(derivedTree, node.key, children);
+          onLoad?.(node, children);
+          onLoadedKeysChange?.(uniqueTreeKeys([...controlledLoadedKeys ?? [], node.key]));
+          onTreeDataChange?.(nextTree);
+        }).catch(() => {
+          setLoadingIds((prev) => {
+            const nextSet = new Set(prev);
+            nextSet.delete(id);
+            return nextSet;
+          });
+          devWarn("Tree.loadData", "Tree loadData rejected; the node is not mutated.");
+        });
+      }
+    },
+    [
+      view.index,
+      computedExpanded,
+      commitExpanded,
+      hasLoadData,
+      loadedIds,
+      loadingIds,
+      loadData,
+      derivedTree,
+      onLoad,
+      onLoadedKeysChange,
+      onTreeDataChange,
+      controlledLoadedKeys
+    ]
+  );
+  const handleSelect = useCallback(
+    (nodeKey) => {
+      const node = lookupTreeNode(view.index, nodeKey);
+      if (!node || node.disabled || !selection.selectable) return;
+      const next = nextTreeSelectedKeys({
+        current: computedSelected,
+        key: node.key,
+        multiple: selection.multiple,
+        allowDeselect
+      });
+      if (controlledSelectedKeys === void 0) setInternalSelected(next);
+      onSelectedKeysChange?.(next);
+      onSelect?.(next, {
+        selected: next.some((key) => sameTreeKey(key, node.key)),
+        selectedNodes: next.map((key) => lookupTreeNode(view.index, key)).filter((item) => Boolean(item)),
+        node
+      });
+    },
+    [
+      view.index,
+      selection.selectable,
+      selection.multiple,
+      computedSelected,
+      allowDeselect,
+      controlledSelectedKeys,
+      onSelectedKeysChange,
+      onSelect
+    ]
+  );
+  const handleCheck = useCallback(
+    (nodeKey, checked) => {
+      const node = lookupTreeNode(view.index, nodeKey);
+      if (!node || node.disabled) return;
+      const nextState = nextTreeCheckedState(
+        derivedTree,
+        node.key,
+        checked,
+        computedChecked.checked,
+        checkStrictly
+      );
+      if (controlledCheckedKeys === void 0) setInternalChecked(nextState);
+      const returnKeys = getCheckedKeysByStrategy(nextState, derivedTree, checkStrategy);
+      onCheckedKeysChange?.(returnKeys);
+      onCheck?.(returnKeys, {
+        checked,
+        checkedNodes: returnKeys.map((key) => lookupTreeNode(view.index, key)).filter((item) => Boolean(item)),
+        node,
+        halfChecked: nextState.halfChecked
+      });
+    },
+    [
+      view.index,
+      derivedTree,
+      computedChecked.checked,
+      checkStrictly,
+      checkStrategy,
+      controlledCheckedKeys,
+      onCheckedKeysChange,
+      onCheck
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (event, nodeKey) => {
+      const action = resolveTreeKeyboardAction({
+        key: event.key,
+        nodeKey,
+        view,
+        expandedKeys: computedExpanded,
+        activeKey,
+        checkable,
+        selectable: selection.selectable,
+        hasLoadData,
+        dir
+      });
+      const patch = applyTreeKeyboard(action);
+      if (!patch.preventDefault) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (patch.activeKey !== void 0) {
+        setActiveKey(patch.activeKey);
+        const index = view.visibleItems.findIndex((item) => sameTreeKey(item.key, patch.activeKey));
+        if (virtual) virtualRef.current?.scrollToIndex(index);
+        const id = treeKeyId(patch.activeKey);
+        requestAnimationFrame(() => itemRefs.current.get(id)?.focus());
+      }
+      if (patch.expandKey !== void 0) handleExpand(patch.expandKey);
+      if (patch.selectKey !== void 0) handleSelect(patch.selectKey);
+      if (patch.checkKey !== void 0 && patch.checkChecked !== void 0) {
+        handleCheck(patch.checkKey, patch.checkChecked);
+      }
+    },
+    [
+      view,
+      computedExpanded,
+      activeKey,
+      checkable,
+      selection.selectable,
+      hasLoadData,
+      dir,
+      handleExpand,
+      handleSelect,
+      handleCheck,
+      virtual
+    ]
+  );
+  const drag = useDrag({
+    containerId: "tree",
+    onDrop: (event) => {
+      const dropKey = event.overItem?.id;
+      if (dropKey == null || sameTreeKey(dropKey, event.item.id)) return;
+      const dropNode = lookupTreeNode(view.index, dropKey);
+      const canInside = dropNode ? dropNode.isLeaf !== true : false;
+      const position = dropPosRef.current ?? (canInside ? "inside" : "after");
+      const nextTree = applyTreeDrop({
+        treeData: derivedTree,
+        dragKey: event.item.id,
+        dropKey,
+        position
+      });
+      if (!nextTree) return;
+      if (treeDataProp === void 0 || dropTree !== void 0) {
+        setDropTree(nextTree);
+        setDropTreeFrom(treeData);
+      }
+      onTreeDataChange?.(nextTree);
+      onDrop?.({
+        dragKey: event.item.id,
+        dropKey,
+        dropPosition: position,
+        treeData: nextTree
+      });
+      setDropIndicator(null);
+    }
+  });
+  useLayoutEffect(() => {
+    if (activeKey === void 0) return;
+    const index = view.visibleItems.findIndex((item) => sameTreeKey(item.key, activeKey));
+    if (index < 0) return;
+    if (virtual) virtualRef.current?.scrollToIndex(index);
+    const focus = () => itemRefs.current.get(treeKeyId(activeKey))?.focus();
+    focus();
+    const frame = requestAnimationFrame(focus);
+    return () => cancelAnimationFrame(frame);
+  }, [activeKey, view.visibleItems, virtual]);
+  const setSearchQuery = useCallback(
+    (value) => {
+      if (searchValue === void 0 && filterValue === void 0) setInternalSearch(value);
+      onSearch?.(value);
+    },
+    [searchValue, filterValue, onSearch]
+  );
+  return {
+    treeData: derivedTree,
+    className,
+    ariaLabel: labelledBy ? void 0 : resolveLocaleText(labels.ariaLabel, ariaLabel, labels.ariaLabel),
+    labelledBy: typeof labelledBy === "string" ? labelledBy : void 0,
+    emptyText: resolveLocaleText(
+      mergedLocale?.empty?.noData ?? mergedLocale?.common?.emptyText ?? "No data",
+      emptyText,
+      mergedLocale?.empty?.noData,
+      mergedLocale?.common?.emptyText
+    ),
+    showIcon,
+    showLine,
+    blockNode,
+    checkable,
+    selectable: selection.selectable,
+    multiple: selection.multiple,
+    draggable,
+    searchable,
+    virtual,
+    height,
+    itemHeight,
+    searchQuery,
+    setSearchQuery,
+    searchPlaceholder: resolveLocaleText(
+      "Search",
+      mergedLocale?.common?.searchPlaceholder,
+      mergedLocale?.select?.searchPlaceholder
+    ),
+    selectNodeLabel: (label) => formatTreeSelectNodeLabel(labels.selectNode, label),
+    view,
+    loadingIds,
+    activeKey,
+    dropKey: dropIndicator?.key,
+    dropPosition: dropIndicator?.position,
+    itemRefs,
+    virtualRef,
+    dir,
+    setActiveKey,
+    handleExpand,
+    handleSelect,
+    handleCheck,
+    handleKeyDown,
+    handleNodeClick: (node, event) => {
+      if (node.disabled) return;
+      setActiveKey(node.key);
+      onNodeClick?.(node, event);
+      if (selection.selectable) handleSelect(node.key);
+    },
+    startTreeDrag: (nodeKey, event) => {
+      const target = event.target;
+      if (target?.closest("button, input, label")) {
+        event.preventDefault();
+        return;
+      }
+      const index = view.visibleItems.findIndex((item) => sameTreeKey(item.key, nodeKey));
+      drag.startDrag({ id: nodeKey, index: Math.max(0, index), containerId: "tree" }, event);
+    },
+    overTreeDrag: (nodeKey, event) => {
+      event.preventDefault();
+      const index = view.visibleItems.findIndex((item) => sameTreeKey(item.key, nodeKey));
+      drag.dragOver({ id: nodeKey, index: Math.max(0, index), containerId: "tree" }, event);
+      const node = lookupTreeNode(view.index, nodeKey);
+      const rect = event.currentTarget.getBoundingClientRect();
+      const position = resolveTreeDropPosition(
+        event.clientY,
+        rect.top,
+        rect.height,
+        node ? node.isLeaf !== true : false
+      );
+      dropPosRef.current = position;
+      setDropIndicator({ key: nodeKey, position });
+      if (virtual) {
+        const scroller = virtualRef.current?.getScrollElement();
+        if (scroller) {
+          const box = scroller.getBoundingClientRect();
+          const edge = 24;
+          if (event.clientY < box.top + edge) scroller.scrollTop -= 16;
+          else if (event.clientY > box.bottom - edge) scroller.scrollTop += 16;
+        }
+      }
+    },
+    dropTreeDrag: (event) => {
+      drag.drop(event);
+      setDropIndicator(null);
+    },
+    endTreeDrag: () => {
+      drag.endDrag();
+      setDropIndicator(null);
+    }
+  };
+}
+
+// src/components/Tree/render-row.tsx
+import React2 from "react";
+import {
+  classNames,
+  getHighlightSegments,
+  getTreeIndentSlotClasses,
+  getTreeIndentSlots,
+  getTreeNodeClasses,
+  highlightMarkClasses,
+  sameTreeKey as sameTreeKey2,
+  treeDropAfterClasses,
+  treeDropBeforeClasses,
+  treeDropInsideClasses,
+  treeItemKeyAttr,
+  treeKeyId as treeKeyId2,
+  treeNodeIconClasses,
+  treeNodeLabelClasses,
+  treeNodeLabelMatchedClasses
+} from "@expcat/tigercat-core";
+
+// src/components/Tree/icons.tsx
+import {
+  getTreeNodeExpandIconClasses,
+  treeLoadingClasses,
+  treeNodeIndentClasses,
+  getSpinnerSVG
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var spinnerSvg = getSpinnerSVG("spinner");
+function ExpandIcon({
+  expanded,
+  expandable
+}) {
+  if (!expandable) {
+    return /* @__PURE__ */ jsx("span", { className: treeNodeIndentClasses, "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getTreeNodeExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4V4z" })
+    }
+  );
+}
+function LoadingSpinner() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: treeLoadingClasses,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: spinnerSvg.viewBox,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: spinnerSvg.elements.map((el, index) => {
+        if (el.type === "circle") return /* @__PURE__ */ jsx("circle", { ...el.attrs }, index);
+        if (el.type === "path") return /* @__PURE__ */ jsx("path", { ...el.attrs }, index);
+        return null;
+      })
+    }
+  );
+}
+
+// src/components/Tree/render-row.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function renderNodeIcon(icon) {
+  if (icon == null || typeof icon === "boolean") return null;
+  if (typeof icon === "string" || typeof icon === "number") return icon;
+  return icon;
+}
+function renderLabel(label, query, matched) {
+  if (!query || !matched) return label;
+  const segments = getHighlightSegments(label, query, { global: true, caseSensitive: false });
+  if (segments.length === 0) return label;
+  return segments.map(
+    (segment, index) => segment.highlighted ? /* @__PURE__ */ jsx2("mark", { className: highlightMarkClasses, children: segment.text }, index) : /* @__PURE__ */ jsx2(React2.Fragment, { children: segment.text }, index)
+  );
+}
+function renderTreeRow(ctx, rowIndex, fillHeight) {
+  const row = ctx.view.rows[rowIndex];
+  if (!row) return null;
+  const { item } = row;
+  const node = item.node;
+  const isFocusable = !row.disabled && sameTreeKey2(node.key, ctx.activeKey ?? ctx.view.defaultActiveKey);
+  const indent = getTreeIndentSlots(item, ctx.showLine);
+  const dropping = ctx.draggable && ctx.dropKey !== void 0 && sameTreeKey2(ctx.dropKey, node.key);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        getTreeNodeClasses(row.selected, row.disabled, ctx.blockNode || fillHeight, {
+          active: isFocusable,
+          interactive: ctx.selectable || row.expandable || ctx.checkable
+        }),
+        fillHeight && "h-full min-h-0 overflow-hidden",
+        dropping && ctx.dropPosition === "before" && treeDropBeforeClasses,
+        dropping && ctx.dropPosition === "after" && treeDropAfterClasses,
+        dropping && ctx.dropPosition === "inside" && treeDropInsideClasses
+      ),
+      ref: (el) => {
+        const id = treeKeyId2(node.key);
+        if (el) ctx.itemRefs.current.set(id, el);
+        else ctx.itemRefs.current.delete(id);
+      },
+      role: "treeitem",
+      "data-tiger-treeitem-key": treeItemKeyAttr(node.key),
+      "aria-level": item.level,
+      "aria-setsize": row.setsize,
+      "aria-posinset": row.posinset,
+      "aria-disabled": row.disabled || void 0,
+      "aria-selected": ctx.selectable ? row.selected : void 0,
+      "aria-expanded": row.expandable ? row.expanded : void 0,
+      "aria-checked": ctx.checkable ? row.halfChecked ? "mixed" : row.checked : void 0,
+      tabIndex: isFocusable ? 0 : -1,
+      draggable: ctx.draggable && !row.disabled ? true : void 0,
+      onDragStart: ctx.draggable && !row.disabled ? (event) => {
+        event.stopPropagation();
+        ctx.startTreeDrag(node.key, event);
+      } : void 0,
+      onDragOver: ctx.draggable ? (event) => {
+        event.stopPropagation();
+        ctx.overTreeDrag(node.key, event);
+      } : void 0,
+      onDrop: ctx.draggable ? (event) => {
+        event.stopPropagation();
+        ctx.dropTreeDrag(event);
+      } : void 0,
+      onDragEnd: ctx.draggable ? () => ctx.endTreeDrag() : void 0,
+      onFocus: () => {
+        if (!row.disabled) ctx.setActiveKey(node.key);
+      },
+      onKeyDown: (event) => ctx.handleKeyDown(event, node.key),
+      onClick: (event) => ctx.handleNodeClick(node, event),
+      children: [
+        indent.map((slot) => /* @__PURE__ */ jsx2("span", { className: getTreeIndentSlotClasses(slot), "aria-hidden": "true" }, slot.key)),
+        row.expandable ? /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": "true",
+            className: "inline-flex items-center justify-center w-6 h-6 shrink-0",
+            onClick: (event) => {
+              event.stopPropagation();
+              if (!row.disabled) {
+                ctx.setActiveKey(node.key);
+                ctx.handleExpand(node.key);
+              }
+            },
+            children: /* @__PURE__ */ jsx2(ExpandIcon, { expanded: row.expanded, expandable: true })
+          }
+        ) : /* @__PURE__ */ jsx2(ExpandIcon, { expanded: false, expandable: false }),
+        ctx.checkable ? /* @__PURE__ */ jsx2(
+          Checkbox,
+          {
+            tabIndex: -1,
+            size: "sm",
+            checked: row.checked,
+            indeterminate: row.halfChecked,
+            disabled: row.disabled,
+            "aria-label": ctx.selectNodeLabel(node.label),
+            className: "me-2 shrink-0",
+            onClick: (event) => event.stopPropagation(),
+            onChange: (checked, event) => {
+              event.stopPropagation();
+              ctx.handleCheck(node.key, checked);
+            }
+          }
+        ) : null,
+        ctx.showIcon && node.icon != null ? /* @__PURE__ */ jsx2("span", { className: treeNodeIconClasses, children: renderNodeIcon(node.icon) }) : null,
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: classNames(
+              treeNodeLabelClasses,
+              row.matched && ctx.searchQuery ? treeNodeLabelMatchedClasses : void 0
+            ),
+            children: renderLabel(node.label, ctx.searchQuery, row.matched)
+          }
+        ),
+        row.loading ? /* @__PURE__ */ jsx2(LoadingSpinner, {}) : null
+      ]
+    },
+    treeKeyId2(node.key)
+  );
+}
+function renderTreeRows(ctx, fillHeight) {
+  return ctx.view.rows.map((_, index) => renderTreeRow(ctx, index, fillHeight));
+}
+
+// src/components/Tree.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Tree = forwardRef(function Tree2(props, ref) {
+  const ctx = useTreeState(props);
+  const {
+    treeData: _treeData,
+    selectionMode: _selectionMode,
+    checkable: _checkable,
+    showIcon: _showIcon,
+    showLine: _showLine,
+    defaultExpandedKeys: _defaultExpandedKeys,
+    defaultSelectedKeys: _defaultSelectedKeys,
+    defaultCheckedKeys: _defaultCheckedKeys,
+    expandedKeys: _expandedKeys,
+    selectedKeys: _selectedKeys,
+    checkedKeys: _checkedKeys,
+    defaultExpandAll: _defaultExpandAll,
+    checkStrictly: _checkStrictly,
+    checkStrategy: _checkStrategy,
+    selectable: _selectable,
+    multiple: _multiple,
+    allowDeselect: _allowDeselect,
+    loadData: _loadData,
+    loadedKeys: _loadedKeys,
+    filterValue: _filterValue,
+    searchValue: _searchValue,
+    defaultSearchValue: _defaultSearchValue,
+    searchable: _searchable,
+    filterFn: _filterFn,
+    filterMode: _filterMode,
+    autoExpandParent: _autoExpandParent,
+    blockNode: _blockNode,
+    emptyText: _emptyText,
+    ariaLabel: _ariaLabel,
+    onExpandedKeysChange: _onExpandedKeysChange,
+    onSelectedKeysChange: _onSelectedKeysChange,
+    onCheckedKeysChange: _onCheckedKeysChange,
+    onSearch: _onSearch,
+    onExpand: _onExpand,
+    onSelect: _onSelect,
+    onCheck: _onCheck,
+    onLoad: _onLoad,
+    onLoadedKeysChange: _onLoadedKeysChange,
+    onDrop: _onDrop,
+    onTreeDataChange: _onTreeDataChange,
+    onNodeClick: _onNodeClick,
+    onNodeExpand: _onNodeExpand,
+    onNodeCollapse: _onNodeCollapse,
+    draggable: _draggable,
+    virtual: _virtual,
+    height: _height,
+    itemHeight: _itemHeight,
+    locale: _locale,
+    className: _className,
+    "aria-labelledby": _labelledBy,
+    "aria-label": _htmlAriaLabel,
+    ...rest
+  } = props;
+  const search = ctx.searchable ? /* @__PURE__ */ jsx3(
+    "input",
+    {
+      type: "search",
+      className: treeSearchInputClasses,
+      placeholder: ctx.searchPlaceholder,
+      value: ctx.searchQuery,
+      onChange: (event) => ctx.setSearchQuery(event.target.value)
+    }
+  ) : null;
+  const empty = !ctx.treeData.length;
+  const tree = empty ? /* @__PURE__ */ jsx3("div", { className: treeEmptyStateClasses, children: ctx.emptyText }) : /* @__PURE__ */ jsx3(
+    "div",
+    {
+      role: "tree",
+      "aria-label": ctx.ariaLabel,
+      "aria-labelledby": ctx.labelledBy,
+      "aria-multiselectable": ctx.multiple || void 0,
+      onKeyDown: (event) => {
+        const attr = event.target.closest("[data-tiger-treeitem-key]")?.getAttribute("data-tiger-treeitem-key");
+        if (attr == null) return;
+        ctx.handleKeyDown(event, attr);
+      },
+      children: ctx.virtual ? /* @__PURE__ */ jsx3(
+        VirtualList,
+        {
+          ref: ctx.virtualRef,
+          role: "none",
+          "data-tiger-tree-virtual": "",
+          itemCount: ctx.view.rows.length,
+          itemHeight: ctx.itemHeight,
+          height: ctx.height,
+          renderItem: ({ index }) => renderTreeRow(ctx, index, true)
+        }
+      ) : renderTreeRows(ctx, false)
+    }
+  );
+  return /* @__PURE__ */ jsxs2("div", { ...rest, ref, className: classNames2(treeBaseClasses, empty && "p-4", ctx.className), children: [
+    search,
+    tree
+  ] });
+});
+var Tree_default = Tree;
+
+export {
+  Tree,
+  Tree_default
+};