@expcat/tigercat-react 2.0.19 → 2.1.0

package/dist/chunk-IGBQGR6G.mjs

@@ -0,0 +1,234 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+import {
+  useTigerConfig
+} from "./chunk-YSIXURBW.mjs";
+
+// src/components/InputOTP.tsx
+import { useEffect, useId, useMemo, useRef } from "react";
+import {
+  applyOtpBackspace,
+  applyOtpCharInput,
+  applyOtpDelete,
+  classNames,
+  devWarn,
+  distributeOtpPaste,
+  formatOtpSlotLabel,
+  getInputOTPLabels,
+  getOtpContainerClasses,
+  getOtpErrorClasses,
+  getOtpSeparatorClasses,
+  getOtpSeparatorIndices,
+  getOtpSlotClasses,
+  injectShakeStyle,
+  isOtpComplete,
+  normalizeOtpValue,
+  SHAKE_CLASS
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputOTP = ({
+  size = "md",
+  status: statusProp,
+  errorMessage: errorMessageProp,
+  _shakeTrigger: shakeTriggerProp,
+  length = 6,
+  value,
+  defaultValue,
+  type = "numeric",
+  pattern,
+  masked = false,
+  maskChar = "\u2022",
+  groups,
+  separator = "-",
+  disabled = false,
+  readonly = false,
+  autoFocus = false,
+  name,
+  id,
+  ariaLabel,
+  onChange,
+  onComplete,
+  onFocus,
+  onBlur,
+  className,
+  style,
+  ...rest
+}) => {
+  injectShakeStyle();
+  const config = useTigerConfig();
+  const formItemControl = useFormItemControlContext();
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const errorMessage = errorMessageProp ?? formItemControl?.errorMessage;
+  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
+  const labels = getInputOTPLabels(config.locale);
+  const reactId = useId();
+  const errorMsgId = `tiger-input-otp-error-${reactId}`;
+  const containerRef = useRef(null);
+  const slotRefs = useRef([]);
+  const charOptions = useMemo(() => ({ type, pattern }), [type, pattern]);
+  const [rawValue, setRawValue] = useControlledState(value, defaultValue ?? "", onChange);
+  const currentValue = normalizeOtpValue(rawValue, length, charOptions);
+  const separatorIndices = useMemo(() => getOtpSeparatorIndices(length, groups), [length, groups]);
+  if (groups && groups.length > 0 && separatorIndices.length === 0) {
+    devWarn("InputOTP.groups", "[Tigercat] InputOTP: `groups` must sum to `length`; ignoring.");
+  }
+  useEffect(() => {
+    if (status === "error" && containerRef.current) {
+      const el = containerRef.current;
+      el.classList.remove(SHAKE_CLASS);
+      void el.offsetWidth;
+      el.classList.add(SHAKE_CLASS);
+    }
+  }, [status, shakeTrigger]);
+  useEffect(() => {
+    if (autoFocus) {
+      slotRefs.current[Math.min(currentValue.length, length - 1)]?.focus();
+    }
+  }, []);
+  const focusSlot = (index) => {
+    slotRefs.current[Math.max(0, Math.min(index, length - 1))]?.focus();
+  };
+  const displayChar = (val, index) => {
+    const char = val[index] ?? "";
+    return char && masked ? maskChar : char;
+  };
+  const emitValue = (next) => {
+    if (next === currentValue) return;
+    setRawValue(next);
+    if (isOtpComplete(next, length)) onComplete?.(next);
+  };
+  const isInteractive = !disabled && !readonly;
+  const handleSlotChange = (index, event) => {
+    if (!isInteractive) return;
+    const result = applyOtpCharInput(
+      currentValue,
+      index,
+      event.currentTarget.value,
+      length,
+      charOptions
+    );
+    event.currentTarget.value = displayChar(result.value, index);
+    emitValue(result.value);
+    focusSlot(result.nextIndex);
+  };
+  const handleSlotKeyDown = (index, event) => {
+    if (!isInteractive) return;
+    switch (event.key) {
+      case "Backspace": {
+        event.preventDefault();
+        const result = applyOtpBackspace(currentValue, index);
+        emitValue(result.value);
+        focusSlot(result.nextIndex);
+        break;
+      }
+      case "Delete": {
+        event.preventDefault();
+        const result = applyOtpDelete(currentValue, index);
+        emitValue(result.value);
+        break;
+      }
+      case "ArrowLeft":
+        event.preventDefault();
+        focusSlot(index - 1);
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        focusSlot(index + 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        focusSlot(0);
+        break;
+      case "End":
+        event.preventDefault();
+        focusSlot(Math.min(currentValue.length, length - 1));
+        break;
+    }
+  };
+  const handlePaste = (event) => {
+    if (!isInteractive) return;
+    event.preventDefault();
+    const result = distributeOtpPaste(event.clipboardData.getData("text"), length, charOptions);
+    if (!result) return;
+    emitValue(result.value);
+    focusSlot(result.nextIndex);
+  };
+  const handleSlotFocus = (event) => {
+    event.currentTarget.select();
+  };
+  const handleGroupFocus = (event) => {
+    if (!containerRef.current?.contains(event.relatedTarget)) {
+      onFocus?.(event);
+    }
+  };
+  const handleGroupBlur = (event) => {
+    if (!containerRef.current?.contains(event.relatedTarget)) {
+      onBlur?.(event);
+    }
+  };
+  const activeError = status === "error" && !!errorMessage;
+  const slotClasses = getOtpSlotClasses(size, status, { disabled, readonly });
+  const slots = [];
+  for (let i = 0; i < length; i++) {
+    slots.push(
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (el) => {
+            slotRefs.current[i] = el;
+          },
+          className: slotClasses,
+          type: "text",
+          inputMode: type === "numeric" ? "numeric" : void 0,
+          autoComplete: i === 0 ? "one-time-code" : "off",
+          value: displayChar(currentValue, i),
+          disabled,
+          readOnly: readonly,
+          "aria-label": formatOtpSlotLabel(labels.slotLabel, i + 1, length),
+          ...status === "error" ? { "aria-invalid": true } : {},
+          onChange: (event) => handleSlotChange(i, event),
+          onKeyDown: (event) => handleSlotKeyDown(i, event),
+          onFocus: handleSlotFocus
+        },
+        `slot-${i}`
+      )
+    );
+    if (separatorIndices.includes(i) && separator) {
+      slots.push(
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: getOtpSeparatorClasses(size), children: separator }, `separator-${i}`)
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: classNames("inline-block", className), style, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: containerRef,
+        id,
+        role: "group",
+        "aria-label": ariaLabel ?? labels.groupLabel,
+        ...activeError ? { "aria-describedby": errorMsgId } : {},
+        className: getOtpContainerClasses(size),
+        onPaste: handlePaste,
+        onFocus: handleGroupFocus,
+        onBlur: handleGroupBlur,
+        children: [
+          slots,
+          name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue })
+        ]
+      }
+    ),
+    activeError && /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getOtpErrorClasses(), children: errorMessage })
+  ] });
+};
+var InputOTP_default = InputOTP;
+
+export {
+  InputOTP,
+  InputOTP_default
+};

package/dist/{chunk-D33BIMGK.mjs → chunk-IR7VA6AO.mjs}

@@ -61,7 +61,17 @@ var DataExport = ({
         setExporting(false);
       }
     },
-    [columns, dataSource, sheetName, cellFormatter, fileName, disabled, exporting, onExport, onError]
+    [
+      columns,
+      dataSource,
+      sheetName,
+      cellFormatter,
+      fileName,
+      disabled,
+      exporting,
+      onExport,
+      onError
+    ]
   );
   const formatLabel = (format) => format === "xlsx" ? resolvedLabels.xlsxText : resolvedLabels.markdownText;
   if (formats.length === 0) return null;

package/dist/chunk-J76R2S62.mjs

@@ -0,0 +1,161 @@
+// src/components/Masonry.tsx
+import {
+  Children,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import {
+  classNames,
+  computeMasonryColumnHeights,
+  distributeMasonryItems,
+  getMasonryColumnClasses,
+  getMasonryColumnStyle,
+  getMasonryGapStyle,
+  getMasonryItemClasses,
+  getMasonryRootClasses,
+  moduloDistributeMasonryItems,
+  observeScrollAreaSize,
+  readMasonryItemHeight,
+  resolveMasonryColumnCount,
+  resolveMasonryGap,
+  MASONRY_DEFAULT_COLUMNS,
+  MASONRY_DEFAULT_GAP
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function childSignature(nodes) {
+  return nodes.map(
+    (node, index) => `${index}:${typeof node === "object" && node !== null && "key" in node ? String(node.key ?? "") : String(node)}`
+  ).join("\0");
+}
+function sameHeights(previous, next) {
+  return previous.length === next.length && previous.every((height, index) => height === next[index]);
+}
+function subscribeToResize(onChange) {
+  window.addEventListener("resize", onChange);
+  return () => window.removeEventListener("resize", onChange);
+}
+var noopSubscribe = () => () => void 0;
+var Masonry = forwardRef(
+  ({
+    columns = MASONRY_DEFAULT_COLUMNS,
+    gap = MASONRY_DEFAULT_GAP,
+    className,
+    columnClassName,
+    itemClassName,
+    children,
+    onLayout,
+    style,
+    ...rest
+  }, ref) => {
+    const itemRefs = useRef(/* @__PURE__ */ new Map());
+    const heightsRef = useRef([]);
+    const lastSignatureRef = useRef("");
+    const onLayoutRef = useRef(onLayout);
+    onLayoutRef.current = onLayout;
+    const [distribution, setDistribution] = useState([]);
+    const childNodes = useMemo(() => Children.toArray(children), [children]);
+    const signature = childSignature(childNodes);
+    const isResponsive = typeof columns === "object" || typeof gap === "object";
+    const subscribe = useMemo(
+      () => isResponsive ? subscribeToResize : noopSubscribe,
+      [isResponsive]
+    );
+    const windowWidth = useSyncExternalStore(
+      subscribe,
+      () => window.innerWidth,
+      () => 1024
+    );
+    const columnCount = resolveMasonryColumnCount(columns, windowWidth);
+    const gapPx = resolveMasonryGap(gap, windowWidth);
+    const relayout = useCallback(() => {
+      const elements = itemRefs.current;
+      const indices = Array.from(elements.keys());
+      const maxIndex = indices.length > 0 ? Math.max(...indices) : -1;
+      const nextHeights = [];
+      for (let index = 0; index <= maxIndex; index++) {
+        const element = elements.get(index);
+        nextHeights.push(element ? readMasonryItemHeight(element) : 0);
+      }
+      const countChanged = nextHeights.length !== heightsRef.current.length;
+      if (!countChanged && sameHeights(heightsRef.current, nextHeights)) return;
+      heightsRef.current = nextHeights;
+      const nextDistribution = distributeMasonryItems(nextHeights, columnCount);
+      setDistribution(nextDistribution);
+      onLayoutRef.current?.({
+        columnCount,
+        columnHeights: computeMasonryColumnHeights(nextHeights, nextDistribution, gapPx)
+      });
+    }, [columnCount, gapPx]);
+    useEffect(() => {
+      if (lastSignatureRef.current !== signature) {
+        lastSignatureRef.current = signature;
+        relayout();
+        return;
+      }
+      if (heightsRef.current.length === 0) return;
+      const nextDistribution = distributeMasonryItems(heightsRef.current, columnCount);
+      setDistribution(nextDistribution);
+      onLayoutRef.current?.({
+        columnCount,
+        columnHeights: computeMasonryColumnHeights(heightsRef.current, nextDistribution, gapPx)
+      });
+    }, [signature, columnCount, gapPx, relayout]);
+    useEffect(() => {
+      if (childNodes.length === 0) return;
+      return observeScrollAreaSize(Array.from(itemRefs.current.values()), relayout);
+    }, [signature, distribution, relayout, childNodes.length]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        relayout,
+        getColumnCount: () => columnCount
+      }),
+      [relayout, columnCount]
+    );
+    const activeDistribution = distribution.length > 0 && heightsRef.current.length === childNodes.length ? distribution : moduloDistributeMasonryItems(childNodes.length, columnCount);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        className: classNames(getMasonryRootClasses(className)),
+        style: { ...getMasonryGapStyle(gapPx), ...style },
+        "data-masonry": "",
+        children: activeDistribution.map((indices, columnIndex) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: getMasonryColumnClasses(columnClassName),
+            style: getMasonryColumnStyle(gapPx),
+            "data-masonry-column": columnIndex,
+            children: indices.map((index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: getMasonryItemClasses(itemClassName),
+                "data-masonry-item": index,
+                ref: (el) => {
+                  if (el) itemRefs.current.set(index, el);
+                  else itemRefs.current.delete(index);
+                },
+                children: childNodes[index]
+              },
+              `item-${index}`
+            ))
+          },
+          `column-${columnIndex}`
+        ))
+      }
+    );
+  }
+);
+Masonry.displayName = "Masonry";
+var Masonry_default = Masonry;
+
+export {
+  Masonry,
+  Masonry_default
+};

package/dist/{chunk-2WGEHH5A.mjs → chunk-JQJM65RJ.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-Z3CRHC5F.mjs";
 import {
   List
-} from "./chunk-QJE3MZBO.mjs";
+} from "./chunk-FSMJLJFL.mjs";
 import {
   Button
 } from "./chunk-5TE7KLE5.mjs";

package/dist/{chunk-7AFRHC7P.mjs → chunk-KC55B62J.mjs}

@@ -1,3 +1,6 @@
+import {
+  VirtualList
+} from "./chunk-Y5X3G2LD.mjs";
 import {
   renderOverlayPortal,
   useAnchoredOverlay
@@ -7,24 +10,30 @@ import {
 } from "./chunk-YSIXURBW.mjs";
 
 // src/components/TreeSelect.tsx
-import { useState, useMemo, useRef, useId } from "react";
+import { useState, useMemo, useRef, useId, useLayoutEffect, useCallback } from "react";
 import {
   resolveLocaleText,
   mergeTigerLocale,
   treeSelectBaseClasses,
-  treeSelectDropdownClasses,
   treeSelectSearchClasses,
   treeSelectEmptyClasses,
   getTreeSelectTriggerClasses,
   getTreeSelectNodeClasses,
+  getTreeSelectDropdownClasses,
   getTreeSelectDisplayLabel,
   getAllTreeSelectKeys,
   flattenTreeSelectNodes,
   filterTreeSelectNodes,
+  getTreeSelectVisibleIndex,
+  alignTreeSelectVirtualScroll,
+  TREE_SELECT_DEFAULT_HEIGHT,
+  TREE_SELECT_DEFAULT_ITEM_HEIGHT,
   getPickerComboboxAria,
   getPickerListboxAria,
   getPickerOptionAria,
   getPickerTriggerKeyAction,
+  getPickerNavigationIndex,
+  findFirstEnabledIndex,
   classNames,
   icon20ViewBox,
   chevronDownSolidIcon20PathD,
@@ -45,6 +54,9 @@ var TREESELECT_KEYS = /* @__PURE__ */ new Set([
   "defaultSearchValue",
   "emptyText",
   "defaultExpandAll",
+  "virtual",
+  "height",
+  "itemHeight",
   "onChange",
   "onSearchChange"
 ]);
@@ -62,6 +74,9 @@ var TreeSelect = (props) => {
     defaultSearchValue = "",
     emptyText,
     defaultExpandAll = false,
+    virtual = false,
+    height = TREE_SELECT_DEFAULT_HEIGHT,
+    itemHeight = TREE_SELECT_DEFAULT_ITEM_HEIGHT,
     className,
     onChange,
     onSearchChange,
@@ -90,6 +105,8 @@ var TreeSelect = (props) => {
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
   const dropdownRef = useRef(null);
+  const virtualListWrapperRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(-1);
   const overlay = useAnchoredOverlay({
     enabled: isOpen,
     referenceRef: triggerRef,
@@ -118,6 +135,60 @@ var TreeSelect = (props) => {
     if (!matchedKeys) return flatNodes;
     return flatNodes.filter((f) => matchedKeys.has(f.node.key));
   }, [flatNodes, matchedKeys]);
+  const isNodeDisabled = useCallback((item) => !!item.node.disabled, []);
+  const visibleNodesRef = useRef(visibleNodes);
+  visibleNodesRef.current = visibleNodes;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const lastActiveKeyRef = useRef(void 0);
+  const resolveActiveIndex = useCallback(() => {
+    const nodes = visibleNodesRef.current;
+    const selected = getTreeSelectVisibleIndex(nodes, valueRef.current);
+    if (selected >= 0 && !nodes[selected]?.node.disabled) return selected;
+    return findFirstEnabledIndex(nodes, isNodeDisabled);
+  }, [isNodeDisabled]);
+  const commitActiveIndex = useCallback((index) => {
+    lastActiveKeyRef.current = index >= 0 ? visibleNodesRef.current[index]?.node.key : void 0;
+    setActiveIndex(index);
+  }, []);
+  const alignVirtualScroll = useCallback(
+    (index) => {
+      if (!virtual) return;
+      const wrapper = virtualListWrapperRef.current;
+      const el = wrapper?.firstElementChild ?? wrapper;
+      alignTreeSelectVirtualScroll(el, index, itemHeight, height);
+    },
+    [virtual, itemHeight, height]
+  );
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      commitActiveIndex(-1);
+      return;
+    }
+    if (!virtual) return;
+    commitActiveIndex(resolveActiveIndex());
+  }, [isOpen, searchQuery, virtual, commitActiveIndex, resolveActiveIndex]);
+  useLayoutEffect(() => {
+    if (!isOpen || !virtual) return;
+    const remapped = getTreeSelectVisibleIndex(visibleNodesRef.current, lastActiveKeyRef.current);
+    if (remapped >= 0) setActiveIndex(remapped);
+  }, [expandedKeys, treeData, isOpen, virtual]);
+  useLayoutEffect(() => {
+    if (!isOpen || !virtual) return;
+    alignVirtualScroll(activeIndex);
+  }, [activeIndex, isOpen, virtual, alignVirtualScroll, visibleNodes.length]);
+  function handleVirtualListKeyDown(e) {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    setActiveIndex((current) => {
+      const next = getPickerNavigationIndex(visibleNodes, current, e.key, isNodeDisabled);
+      lastActiveKeyRef.current = visibleNodes[next]?.node.key;
+      return next;
+    });
+  }
   function openDropdown() {
     if (disabled) return;
     setIsOpen(true);
@@ -181,6 +252,38 @@ var TreeSelect = (props) => {
       closeDropdown();
     }
   }
+  function renderFlatNode(flatNode) {
+    const { node, level, hasChildren, isExpanded } = flatNode;
+    const selected = isSelected(node.key);
+    const indent = level * 20;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
+        className: getTreeSelectNodeClasses(selected, !!node.disabled, size),
+        style: { paddingLeft: `${indent + 8}px`, height: virtual ? "100%" : void 0 },
+        onClick: (e) => {
+          e.stopPropagation();
+          handleNodeSelect(node);
+        },
+        children: [
+          hasChildren ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames(
+                "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                isExpanded ? "rotate-90" : ""
+              ),
+              onClick: (e) => toggleExpand(node.key, e),
+              children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: icon20ViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: chevronRightSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" }) })
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "w-4 mr-1" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.label })
+        ]
+      },
+      String(node.key)
+    );
+  }
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(treeSelectBaseClasses, className), ...divProps, children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -239,7 +342,7 @@ var TreeSelect = (props) => {
         {
           ref: dropdownRef,
           ...getPickerListboxAria({ id: listboxId }),
-          className: classNames(treeSelectDropdownClasses, overlay.floatingClasses),
+          className: classNames(getTreeSelectDropdownClasses(virtual), overlay.floatingClasses),
           style: overlay.floatingStyles,
           "data-positioned": overlay.positioned,
           children: [
@@ -260,45 +363,27 @@ var TreeSelect = (props) => {
                 onChange: (e) => updateSearchValue(e.target.value)
               }
             ),
-            visibleNodes.length > 0 ? visibleNodes.map((flatNode) => {
-              const { node, level, hasChildren, isExpanded } = flatNode;
-              const selected = isSelected(node.key);
-              const indent = level * 20;
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
-                  className: getTreeSelectNodeClasses(selected, !!node.disabled, size),
-                  style: { paddingLeft: `${indent + 8}px` },
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleNodeSelect(node);
-                  },
-                  children: [
-                    hasChildren ? /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: classNames(
-                          "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
-                          isExpanded ? "rotate-90" : ""
-                        ),
-                        onClick: (e) => toggleExpand(node.key, e),
-                        children: /* @__PURE__ */ jsx("svg", { className: "w-3 h-3", viewBox: icon20ViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx(
-                          "path",
-                          {
-                            d: chevronRightSolidIcon20PathD,
-                            fillRule: "evenodd",
-                            clipRule: "evenodd"
-                          }
-                        ) })
-                      }
-                    ) : /* @__PURE__ */ jsx("span", { className: "w-4 mr-1" }),
-                    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.label })
-                  ]
-                },
-                String(node.key)
-              );
-            }) : /* @__PURE__ */ jsx("div", { className: treeSelectEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) })
+            visibleNodes.length > 0 ? virtual ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: virtualListWrapperRef,
+                "data-tiger-treeselect-virtual": "",
+                tabIndex: 0,
+                onKeyDown: handleVirtualListKeyDown,
+                children: /* @__PURE__ */ jsx(
+                  VirtualList,
+                  {
+                    itemCount: visibleNodes.length,
+                    itemHeight,
+                    height,
+                    renderItem: ({ index }) => {
+                      const item = visibleNodes[index];
+                      return item ? renderFlatNode(item) : null;
+                    }
+                  }
+                )
+              }
+            ) : visibleNodes.map((flatNode) => renderFlatNode(flatNode)) : /* @__PURE__ */ jsx("div", { className: treeSelectEmptyClasses, children: resolveLocaleText("No data", emptyText, mergedLocale?.common?.emptyText) })
           ]
         }
       ) : null,