@underverse-ui/underverse 1.0.113 → 1.0.116

package/dist/index.cjs

@@ -17475,6 +17475,7 @@ function OverlayControls({
 
 // src/components/CategoryTreeSelect.tsx
 var import_react22 = require("react");
+var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_lucide_react26 = require("lucide-react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var defaultLabels = {
@@ -17488,6 +17489,7 @@ var TREE_NODE_INDENT_REM = 1;
 var TREE_BRANCH_OFFSET_CLASS = "ml-1.5 pl-1.5";
 var TREE_NODE_GAP_CLASS = "gap-1.5";
 var TREE_EXPANDER_PLACEHOLDER_CLASS = "w-5";
+var CATEGORY_TREE_DROPDOWN_MAX_HEIGHT = 320;
 function getAncestorPathIds(categories, targetId) {
   const byId = new Map(categories.map((category) => [category.id, category]));
   const expanded = /* @__PURE__ */ new Set();
@@ -17566,6 +17568,24 @@ function pruneAncestorSelection(categories, childrenMap, selected, fromCategoryI
 function toCategoryOrderSelection(categories, selected) {
   return categories.map((category) => category.id).filter((categoryId) => selected.has(categoryId));
 }
+function flattenVisibleCategories(roots, childrenMap, expandedNodes, expandAllVisibleBranches) {
+  const rows = [];
+  const stack = roots.map((category) => ({ category, level: 0, path: /* @__PURE__ */ new Set() })).reverse();
+  while (stack.length > 0) {
+    const { category, level, path } = stack.pop();
+    if (path.has(category.id)) continue;
+    rows.push({ category, level });
+    const children = childrenMap.get(category.id) ?? [];
+    const isExpanded = children.length > 0 && (expandAllVisibleBranches || expandedNodes.has(category.id));
+    if (!isExpanded) continue;
+    const nextPath = new Set(path);
+    nextPath.add(category.id);
+    for (let index = children.length - 1; index >= 0; index -= 1) {
+      stack.push({ category: children[index], level: level + 1, path: nextPath });
+    }
+  }
+  return rows;
+}
 function CategoryTreeSelect(props) {
   const tv = useSmartTranslations("ValidationInput");
   const {
@@ -17594,6 +17614,15 @@ function CategoryTreeSelect(props) {
     className,
     useOverlayScrollbar = false,
     leafOnlySelect = false,
+    virtualized = false,
+    estimatedItemHeight = 44,
+    overscan = 8,
+    maxInitialOptions,
+    searchMode = "auto",
+    onSearchChange,
+    searchDebounceMs = 0,
+    minSearchLength = 0,
+    showSearchPromptWhenEmptyQuery = false,
     singleSelect = false
   } = props;
   const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
@@ -17601,10 +17630,13 @@ function CategoryTreeSelect(props) {
     () => getInitialExpandedNodes(categories, { defaultExpanded, defaultExpandedIds, expandToId, viewOnly, inline })
   );
   const [query, setQuery] = (0, import_react22.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react22.useState)(null);
   const [localRequiredError, setLocalRequiredError] = (0, import_react22.useState)();
   const searchInputRef = (0, import_react22.useRef)(null);
   const dropdownViewportRef = (0, import_react22.useRef)(null);
-  useOverlayScrollbarTarget(dropdownViewportRef, { enabled: useOverlayScrollbar });
+  useOverlayScrollbarTarget(dropdownViewportRef, {
+    enabled: isOpen && useOverlayScrollbar && !virtualized && !inline && !viewOnly
+  });
   const autoId = (0, import_react22.useId)();
   const resolvedId = id ? String(id) : `category-tree-select-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
@@ -17624,7 +17656,7 @@ function CategoryTreeSelect(props) {
     const parentCategories2 = [];
     for (const cat of categories) byId2.set(cat.id, cat);
     for (const cat of categories) {
-      if (cat.parent_id == null) {
+      if (cat.parent_id == null || !byId2.has(cat.parent_id)) {
         parentCategories2.push(cat);
         continue;
       }
@@ -17633,12 +17665,19 @@ function CategoryTreeSelect(props) {
     }
     return { parentCategories: parentCategories2, childrenMap: childrenMap2, byId: byId2 };
   }, [categories]);
-  const isSearchEnabled = (0, import_react22.useMemo)(() => enableSearch ?? categories.length > 10, [enableSearch, categories.length]);
-  const normalizedQuery = (0, import_react22.useMemo)(() => query.trim().toLowerCase(), [query]);
+  const isSearchEnabled = (0, import_react22.useMemo)(
+    () => enableSearch ?? (categories.length > 10 || searchMode === "manual" || minSearchLength > 0 || !!onSearchChange),
+    [categories.length, enableSearch, minSearchLength, onSearchChange, searchMode]
+  );
+  const trimmedQuery = (0, import_react22.useMemo)(() => query.trim(), [query]);
+  const normalizedQuery = (0, import_react22.useMemo)(() => trimmedQuery.toLowerCase(), [trimmedQuery]);
+  const queryMeetsMinimum = trimmedQuery.length >= minSearchLength;
+  const shouldPromptForSearch = minSearchLength > 0 && !queryMeetsMinimum && (searchMode === "manual" || showSearchPromptWhenEmptyQuery);
   const isSearchMode = isSearchEnabled && normalizedQuery.length > 0;
+  const shouldAutoExpandSearchResults = searchMode === "auto" && isSearchMode;
   const effectiveExpandedNodes = (0, import_react22.useMemo)(() => getExpandedNodesState(expandedIds, expandedNodes), [expandedIds, expandedNodes]);
   const visibleIds = (0, import_react22.useMemo)(() => {
-    if (!isSearchMode) return null;
+    if (shouldPromptForSearch || !isSearchMode || searchMode === "manual") return null;
     const matches = categories.filter((c) => c.name.toLowerCase().includes(normalizedQuery));
     if (matches.length === 0) return /* @__PURE__ */ new Set();
     const visible = /* @__PURE__ */ new Set();
@@ -17675,7 +17714,14 @@ function CategoryTreeSelect(props) {
       addDescendants(m.id);
     }
     return visible;
-  }, [byId, categories, childrenMap, isSearchMode, normalizedQuery]);
+  }, [byId, categories, childrenMap, isSearchMode, normalizedQuery, searchMode, shouldPromptForSearch]);
+  (0, import_react22.useEffect)(() => {
+    if (!onSearchChange) return;
+    const timeoutId = window.setTimeout(() => {
+      onSearchChange(trimmedQuery);
+    }, Math.max(0, searchDebounceMs));
+    return () => window.clearTimeout(timeoutId);
+  }, [onSearchChange, searchDebounceMs, trimmedQuery]);
   (0, import_react22.useEffect)(() => {
     if (!isOpen) return;
     if (!isSearchEnabled) return;
@@ -17688,7 +17734,7 @@ function CategoryTreeSelect(props) {
     }
   }, [disabled, required, valueArray.length]);
   const toggleExpand = (id2) => {
-    if (isSearchMode) return;
+    if (shouldAutoExpandSearchResults) return;
     const newExpanded = new Set(effectiveExpandedNodes);
     if (newExpanded.has(id2)) {
       newExpanded.delete(id2);
@@ -17739,27 +17785,137 @@ function CategoryTreeSelect(props) {
       onChange(toCategoryOrderSelection(categories, newSelected));
     }
   };
-  const renderCategory = (category, level = 0) => {
+  const effectiveParentCategories = (0, import_react22.useMemo)(() => {
+    if (shouldPromptForSearch) return [];
+    if (!isSearchMode || searchMode === "manual") return parentCategories;
+    return parentCategories.filter((c) => visibleIds?.has(c.id));
+  }, [isSearchMode, parentCategories, searchMode, shouldPromptForSearch, visibleIds]);
+  const effectiveChildrenMap = (0, import_react22.useMemo)(() => {
+    if (shouldPromptForSearch || !isSearchMode || !visibleIds || searchMode === "manual") return childrenMap;
+    const nextChildrenMap = /* @__PURE__ */ new Map();
+    for (const [parentId, children] of childrenMap.entries()) {
+      nextChildrenMap.set(
+        parentId,
+        children.filter((child) => visibleIds.has(child.id))
+      );
+    }
+    return nextChildrenMap;
+  }, [childrenMap, isSearchMode, searchMode, shouldPromptForSearch, visibleIds]);
+  const flattenedRows = (0, import_react22.useMemo)(() => {
+    if (shouldPromptForSearch) return [];
+    const rows = flattenVisibleCategories(effectiveParentCategories, effectiveChildrenMap, effectiveExpandedNodes, shouldAutoExpandSearchResults);
+    if (trimmedQuery || maxInitialOptions === void 0 || maxInitialOptions < 1) {
+      return rows;
+    }
+    const limitedRows = rows.slice(0, maxInitialOptions);
+    const includedIds = new Set(limitedRows.map((row) => row.category.id));
+    const pinnedIds = /* @__PURE__ */ new Set();
+    for (const selectedId of selectedIds) {
+      for (const ancestorId of getAncestorPathIds(categories, selectedId)) {
+        pinnedIds.add(ancestorId);
+      }
+    }
+    if (typeof expandToId === "number") {
+      for (const ancestorId of getAncestorPathIds(categories, expandToId)) {
+        pinnedIds.add(ancestorId);
+      }
+    }
+    for (const row of rows) {
+      if (!pinnedIds.has(row.category.id) || includedIds.has(row.category.id)) continue;
+      limitedRows.push(row);
+      includedIds.add(row.category.id);
+    }
+    return limitedRows;
+  }, [
+    categories,
+    effectiveChildrenMap,
+    effectiveExpandedNodes,
+    effectiveParentCategories,
+    expandToId,
+    maxInitialOptions,
+    selectedIds,
+    shouldAutoExpandSearchResults,
+    shouldPromptForSearch,
+    trimmedQuery
+  ]);
+  const canVirtualize = virtualized && !inline && !viewOnly;
+  const treeVirtualizer = (0, import_react_virtual3.useVirtualizer)({
+    count: canVirtualize ? flattenedRows.length : 0,
+    getScrollElement: () => dropdownViewportRef.current,
+    estimateSize: () => estimatedItemHeight,
+    initialRect: { width: 0, height: CATEGORY_TREE_DROPDOWN_MAX_HEIGHT },
+    overscan,
+    enabled: canVirtualize
+  });
+  const virtualRows = canVirtualize ? treeVirtualizer.getVirtualItems() : [];
+  const scrollVirtualTreeToStart = () => {
+    if (!canVirtualize || flattenedRows.length === 0) return;
+    treeVirtualizer.scrollToIndex(0, { align: "start" });
+  };
+  const moveActiveVirtualRow = (direction) => {
+    if (!canVirtualize || flattenedRows.length === 0) return;
+    const nextIndex = activeIndex === null ? direction === 1 ? 0 : flattenedRows.length - 1 : (activeIndex + direction + flattenedRows.length) % flattenedRows.length;
+    setActiveIndex(nextIndex);
+    treeVirtualizer.scrollToIndex(nextIndex, { align: "auto" });
+  };
+  const handleVirtualTreeKeyDown = (event) => {
+    if (!canVirtualize) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveActiveVirtualRow(1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveActiveVirtualRow(-1);
+      return;
+    }
+    if (event.key === "Enter" && activeIndex !== null) {
+      const row = flattenedRows[activeIndex];
+      if (!row) return;
+      event.preventDefault();
+      handleSelect(row.category.id, row.category);
+    }
+  };
+  (0, import_react22.useEffect)(() => {
+    setActiveIndex(null);
+  }, [flattenedRows]);
+  const renderCategoryRow = (category, level = 0, virtualItem) => {
     const children = effectiveChildrenMap.get(category.id) || [];
     const hasChildren = children.length > 0;
-    const isExpanded = hasChildren && (isSearchMode || effectiveExpandedNodes.has(category.id));
+    const isExpanded = hasChildren && (shouldAutoExpandSearchResults || effectiveExpandedNodes.has(category.id));
     const isSelected = selectedIds.has(category.id);
     const isSelectable = !viewOnly && (!leafOnlySelect || !hasChildren);
+    const isActive = virtualItem?.index === activeIndex;
+    const rowStyle = virtualItem ? {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      transform: `translateY(${virtualItem.start}px)`
+    } : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       "div",
       {
-        className: "min-w-0 animate-in fade-in-50 duration-200 [content-visibility:auto] [contain-intrinsic-size:44px]",
-        style: { animationDelay: `${level * 30}ms` },
+        ref: virtualItem ? treeVirtualizer.measureElement : void 0,
+        "data-index": virtualItem?.index,
+        className: cn("min-w-0 [content-visibility:auto] [contain-intrinsic-size:44px]", !virtualItem && "animate-in fade-in-50 duration-200"),
+        style: { animationDelay: virtualItem ? void 0 : `${level * 30}ms`, ...rowStyle },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
             "div",
             {
+              role: "treeitem",
+              "aria-level": level + 1,
+              "aria-expanded": hasChildren ? isExpanded : void 0,
+              "aria-selected": viewOnly ? void 0 : isSelected,
               onClick: () => !viewOnly && handleSelect(category.id, category),
               className: cn(
                 "relative flex min-w-0 items-center px-3 py-2.5 min-h-11 transition-all duration-200 rounded-3xl",
                 TREE_NODE_GAP_CLASS,
                 !viewOnly && (isSelectable ? "cursor-pointer" : "cursor-default"),
                 isSelectable && !isSelected && "hover:bg-accent/50",
+                canVirtualize && isActive && "bg-accent/50",
                 // Selected state - đồng bộ cho tất cả
                 !viewOnly && isSelected && "bg-accent/40"
               ),
@@ -17769,6 +17925,7 @@ function CategoryTreeSelect(props) {
                   "button",
                   {
                     type: "button",
+                    "aria-label": isExpanded ? `Collapse ${category.name}` : `Expand ${category.name}`,
                     onClick: (e) => {
                       e.stopPropagation();
                       toggleExpand(category.id);
@@ -17778,9 +17935,9 @@ function CategoryTreeSelect(props) {
                       "hover:scale-110 active:scale-95",
                       "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
                       isExpanded && "text-primary",
-                      isSearchMode && "opacity-60 cursor-not-allowed hover:scale-100 active:scale-100"
+                      shouldAutoExpandSearchResults && "opacity-60 cursor-not-allowed hover:scale-100 active:scale-100"
                     ),
-                    disabled: isSearchMode,
+                    disabled: shouldAutoExpandSearchResults,
                     children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.ChevronRight, { className: "w-4 h-4" }) })
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: TREE_EXPANDER_PLACEHOLDER_CLASS }),
@@ -17811,15 +17968,16 @@ function CategoryTreeSelect(props) {
               ]
             }
           ),
-          hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          !virtualItem && hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "div",
             {
+              role: "group",
               className: cn(
                 TREE_BRANCH_OFFSET_CLASS,
                 "border-l-2 border-dashed border-border/50",
                 "animate-in slide-in-from-top-2 fade-in-50 duration-200"
               ),
-              children: children.map((child) => renderCategory(child, level + 1))
+              children: children.map((child) => renderCategoryRow(child, level + 1))
             }
           )
         ]
@@ -17836,7 +17994,11 @@ function CategoryTreeSelect(props) {
         {
           ref: searchInputRef,
           value: query,
-          onChange: (e) => setQuery(e.target.value),
+          onChange: (e) => {
+            setQuery(e.target.value);
+            scrollVirtualTreeToStart();
+          },
+          onKeyDown: handleVirtualTreeKeyDown,
           placeholder: mergedLabels.searchPlaceholder,
           className: cn(
             "peer w-full rounded-full bg-background/90 py-2.5 pl-10 pr-10 text-sm shadow-sm",
@@ -17853,6 +18015,7 @@ function CategoryTreeSelect(props) {
           type: "button",
           onClick: () => {
             setQuery("");
+            scrollVirtualTreeToStart();
             searchInputRef.current?.focus();
           },
           className: cn(
@@ -17867,24 +18030,40 @@ function CategoryTreeSelect(props) {
       )
     ] }) });
   };
-  const effectiveParentCategories = (0, import_react22.useMemo)(() => {
-    if (!isSearchMode) return parentCategories;
-    return parentCategories.filter((c) => visibleIds?.has(c.id));
-  }, [isSearchMode, parentCategories, visibleIds]);
-  let effectiveChildrenMap = childrenMap;
-  if (isSearchMode && visibleIds) {
-    effectiveChildrenMap = /* @__PURE__ */ new Map();
-    for (const [parentId, children] of childrenMap.entries()) {
-      effectiveChildrenMap.set(
-        parentId,
-        children.filter((child) => visibleIds.has(child.id))
-      );
-    }
-  }
-  const renderTreeContent = () => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "space-y-0.5 overflow-x-hidden", children: effectiveParentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+  const renderTreeContent = () => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "space-y-0.5 overflow-x-hidden", children: shouldPromptForSearch ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.Search, { className: "w-6 h-6 text-muted-foreground/50" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-sm text-muted-foreground", children: [
+      "Type at least ",
+      minSearchLength,
+      " characters to search"
+    ] })
+  ] }) : effectiveParentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: isSearchMode ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.SearchX, { className: "w-6 h-6 text-muted-foreground/50" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.Layers, { className: "w-6 h-6 text-muted-foreground/50" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm text-muted-foreground", children: isSearchMode ? mergedLabels.noResultsText : mergedLabels.emptyText })
-  ] }) : effectiveParentCategories.map((cat) => renderCategory(cat)) });
+  ] }) : effectiveParentCategories.map((cat) => renderCategoryRow(cat)) });
+  const renderVirtualTreeContent = () => {
+    if (shouldPromptForSearch) {
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.Search, { className: "w-6 h-6 text-muted-foreground/50" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "text-sm text-muted-foreground", children: [
+          "Type at least ",
+          minSearchLength,
+          " characters to search"
+        ] })
+      ] });
+    }
+    if (flattenedRows.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: isSearchMode ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.SearchX, { className: "w-6 h-6 text-muted-foreground/50" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.Layers, { className: "w-6 h-6 text-muted-foreground/50" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm text-muted-foreground", children: isSearchMode ? mergedLabels.noResultsText : mergedLabels.emptyText })
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "relative overflow-x-hidden", style: { height: `${treeVirtualizer.getTotalSize()}px` }, children: virtualRows.map((virtualRow) => {
+      const row = flattenedRows[virtualRow.index];
+      if (!row) return null;
+      return renderCategoryRow(row.category, row.level, virtualRow);
+    }) });
+  };
   const renderLabel = () => label ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     Label,
     {
@@ -17927,8 +18106,10 @@ function CategoryTreeSelect(props) {
         "div",
         {
           id: resolvedId,
+          role: "tree",
           "aria-labelledby": labelId,
           "aria-describedby": describedBy,
+          "aria-multiselectable": singleSelect ? void 0 : true,
           className: cn("rounded-2xl border border-border/60 bg-card/50 backdrop-blur-sm p-3 shadow-sm", disabled && "opacity-50"),
           children: [
             renderSearch(),
@@ -17963,8 +18144,10 @@ function CategoryTreeSelect(props) {
         "div",
         {
           id: resolvedId,
+          role: "tree",
           "aria-labelledby": labelId,
           "aria-describedby": describedBy,
+          "aria-multiselectable": singleSelect ? void 0 : true,
           className: cn("rounded-2xl border border-border/60 bg-card/50 backdrop-blur-sm p-3 shadow-sm", disabled && "opacity-50 pointer-events-none"),
           children: [
             renderSearch(),
@@ -18029,6 +18212,7 @@ function CategoryTreeSelect(props) {
     setIsOpen(nextOpen);
     if (!nextOpen) {
       setQuery("");
+      scrollVirtualTreeToStart();
     }
   };
   let displayText;
@@ -18044,15 +18228,20 @@ function CategoryTreeSelect(props) {
       displayText = mergedLabels.selectedText(selectedCount);
     }
   }
-  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex max-h-80 flex-col overflow-hidden", children: [
+  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col overflow-hidden", style: { maxHeight: CATEGORY_TREE_DROPDOWN_MAX_HEIGHT }, children: [
     renderSearch({ sticky: false, className: "border-b border-border/30 p-2 pb-2" }),
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "div",
       {
         ref: dropdownViewportRef,
         id: `${resolvedId}-tree`,
+        role: "tree",
+        "aria-multiselectable": singleSelect ? void 0 : true,
+        "data-os-ignore": virtualized ? "" : void 0,
+        tabIndex: canVirtualize ? 0 : void 0,
+        onKeyDown: handleVirtualTreeKeyDown,
         className: cn("min-h-0 flex-1 overflow-auto overflow-x-hidden p-2 pt-2"),
-        children: renderTreeContent()
+        children: canVirtualize ? renderVirtualTreeContent() : renderTreeContent()
       }
     )
   ] });
@@ -18107,6 +18296,10 @@ function CategoryTreeSelect(props) {
               if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
                 event.preventDefault();
                 handleOpenChange(!isOpen);
+                if (event.key === "ArrowDown" && canVirtualize && flattenedRows.length > 0) {
+                  setActiveIndex(0);
+                  treeVirtualizer.scrollToIndex(0, { align: "start" });
+                }
               }
             },
             className: cn(
@@ -21726,6 +21919,7 @@ var TableCaption = import_react28.default.forwardRef(({ className, ...props }, r
 TableCaption.displayName = "TableCaption";
 
 // src/components/DataTable/DataTable.tsx
+var import_react_virtual4 = require("@tanstack/react-virtual");
 var import_react38 = __toESM(require("react"), 1);
 
 // src/components/DataTable/components/DataTableBody.tsx
@@ -21798,8 +21992,17 @@ function DataTableBodyRows({
   getStickyColumnStyle,
   getStickyCellClass,
   t,
-  labels
+  labels,
+  virtualRows,
+  virtualPaddingTop = 0,
+  virtualPaddingBottom = 0,
+  measureVirtualRow
 }) {
+  const rowsToRender = virtualRows ? virtualRows.map((virtualRow) => ({
+    row: displayedData[virtualRow.index],
+    idx: virtualRow.index,
+    virtualRow
+  })).filter((item) => Boolean(item.row)) : displayedData.map((row, idx) => ({ row, idx, virtualRow: void 0 }));
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
@@ -21816,42 +22019,48 @@ function DataTableBodyRows({
       t("loading"),
       "\u2026"
     ] })
-  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : displayedData.map((row, idx) => {
-    const isStripedRow = striped && idx % 2 === 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-      TableRow,
-      {
-        className: cn(densityRowClass, isStripedRow ? "bg-surface-1" : "bg-surface-0"),
-        style: {
-          contentVisibility: "auto",
-          containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
+  ] }) }) }) : displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: labels?.noData || t("noData") }) }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+    virtualPaddingTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableRow, { "aria-hidden": "true", className: "border-0 hover:bg-transparent hover:shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableCell, { colSpan: leafColumns.length, className: "p-0", style: { height: virtualPaddingTop } }) }),
+    rowsToRender.map(({ row, idx, virtualRow }) => {
+      const isStripedRow = striped && idx % 2 === 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        TableRow,
+        {
+          ref: virtualRow ? measureVirtualRow : void 0,
+          "data-index": virtualRow?.index,
+          className: cn(densityRowClass, isStripedRow ? "bg-surface-1" : "bg-surface-0"),
+          style: {
+            contentVisibility: "auto",
+            containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
+          },
+          children: leafColumns.map((col, colIdx) => {
+            const value = col.dataIndex ? row[col.dataIndex] : void 0;
+            const prevCol = colIdx > 0 ? leafColumns[colIdx - 1] : null;
+            const isAfterFixedLeft = prevCol?.fixed === "left";
+            const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
+            return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              TableCell,
+              {
+                "data-underverse-column-key": col.key,
+                style: getStickyColumnStyle(col),
+                className: cn(
+                  cellPadding,
+                  col.align === "right" && "text-right",
+                  col.align === "center" && "text-center",
+                  showBorderLeft && "border-l border-border/60",
+                  getStickyCellClass(col, isStripedRow)
+                ),
+                children: col.render ? col.render(value, row, idx) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DataTableOverflowText, { text: String(value ?? ""), align: col.align })
+              },
+              col.key
+            );
+          })
         },
-        children: leafColumns.map((col, colIdx) => {
-          const value = col.dataIndex ? row[col.dataIndex] : void 0;
-          const prevCol = colIdx > 0 ? leafColumns[colIdx - 1] : null;
-          const isAfterFixedLeft = prevCol?.fixed === "left";
-          const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
-          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-            TableCell,
-            {
-              "data-underverse-column-key": col.key,
-              style: getStickyColumnStyle(col),
-              className: cn(
-                cellPadding,
-                col.align === "right" && "text-right",
-                col.align === "center" && "text-center",
-                showBorderLeft && "border-l border-border/60",
-                getStickyCellClass(col, isStripedRow)
-              ),
-              children: col.render ? col.render(value, row, idx) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DataTableOverflowText, { text: String(value ?? ""), align: col.align })
-            },
-            col.key
-          );
-        })
-      },
-      getRowKey(row, idx)
-    );
-  }) });
+        getRowKey(row, idx)
+      );
+    }),
+    virtualPaddingBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableRow, { "aria-hidden": "true", className: "border-0 hover:bg-transparent hover:shadow-none", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableCell, { colSpan: leafColumns.length, className: "p-0", style: { height: virtualPaddingBottom } }) })
+  ] }) });
 }
 
 // src/components/DataTable/components/DataTableHeader.tsx
@@ -22918,6 +23127,9 @@ function DataTable({
   horizontalMode = "auto",
   overflowHidden = true,
   useOverlayScrollbar = false,
+  virtualizedRows = false,
+  estimatedRowHeight,
+  overscan = 8,
   enableHeaderAutoFit = true,
   labels
 }) {
@@ -22973,6 +23185,7 @@ function DataTable({
     console.warn("[DataTable] `rowKey` should be provided when using sort/filter/pagination to keep row identity stable.");
   }, [columns, isServerMode, pageSizeOptions, rowKey]);
   const densityRowClass = density === "compact" ? "h-9" : density === "comfortable" ? "h-14" : "h-12";
+  const defaultEstimatedRowHeight = density === "compact" ? 36 : density === "comfortable" ? 56 : 48;
   const cellPadding = density === "compact" ? "py-1.5 px-3" : density === "comfortable" ? "py-3 px-4" : "py-2.5 px-4";
   const headerTitleClass = size === "sm" ? "text-xs" : size === "lg" ? "text-[15px]" : "text-sm";
   const headerMinHeightClass = size === "sm" ? "min-h-9" : size === "lg" ? "min-h-11" : "min-h-10";
@@ -23000,8 +23213,24 @@ function DataTable({
   };
   const viewportRef = import_react38.default.useRef(null);
   const tableRef = import_react38.default.useRef(null);
+  const canVirtualizeRows = virtualizedRows && !loading2 && displayedData.length > 0;
+  const shouldUseScrollViewport = stickyHeader || canVirtualizeRows;
+  const rowVirtualizer = (0, import_react_virtual4.useVirtualizer)({
+    count: canVirtualizeRows ? displayedData.length : 0,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: () => estimatedRowHeight ?? defaultEstimatedRowHeight,
+    initialRect: {
+      width: 0,
+      height: typeof maxHeight === "number" ? maxHeight : 500
+    },
+    overscan,
+    enabled: canVirtualizeRows
+  });
+  const virtualRows = canVirtualizeRows ? rowVirtualizer.getVirtualItems() : [];
+  const virtualPaddingTop = canVirtualizeRows && virtualRows.length > 0 ? virtualRows[0]?.start ?? 0 : 0;
+  const virtualPaddingBottom = canVirtualizeRows && virtualRows.length > 0 ? Math.max(0, rowVirtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1]?.end ?? 0)) : 0;
   useOverlayScrollbarTarget(viewportRef, {
-    enabled: useOverlayScrollbar,
+    enabled: useOverlayScrollbar && !canVirtualizeRows,
     overflowX: overlayOverflowX
   });
   const autoFitColumn = import_react38.default.useCallback((columnKey) => {
@@ -23065,8 +23294,9 @@ function DataTable({
           "div",
           {
             ref: viewportRef,
-            className: cn("w-full", viewportOverflowXClass, stickyHeader && "overflow-y-auto"),
-            style: stickyHeader ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+            "data-os-ignore": canVirtualizeRows ? "" : void 0,
+            className: cn("w-full", viewportOverflowXClass, shouldUseScrollViewport && "overflow-y-auto"),
+            style: shouldUseScrollViewport ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
               Table,
               {
@@ -23116,7 +23346,11 @@ function DataTable({
                       getStickyColumnStyle,
                       getStickyCellClass,
                       t,
-                      labels
+                      labels,
+                      virtualRows: canVirtualizeRows ? virtualRows : void 0,
+                      virtualPaddingTop: canVirtualizeRows ? virtualPaddingTop : void 0,
+                      virtualPaddingBottom: canVirtualizeRows ? virtualPaddingBottom : void 0,
+                      measureVirtualRow: canVirtualizeRows ? rowVirtualizer.measureElement : void 0
                     }
                   )
                 ]
@@ -27054,7 +27288,7 @@ function findDiffEnd(a, b, posA, posB) {
     posB -= size;
   }
 }
-var Fragment26 = class _Fragment {
+var Fragment27 = class _Fragment {
   /**
   @internal
   */
@@ -27346,7 +27580,7 @@ var Fragment26 = class _Fragment {
     throw new RangeError("Can not convert " + nodes + " to a Fragment" + (nodes.nodesBetween ? " (looks like multiple versions of prosemirror-model were loaded)" : ""));
   }
 };
-Fragment26.empty = new Fragment26([], 0);
+Fragment27.empty = new Fragment27([], 0);
 var found = { index: 0, offset: 0 };
 function retIndex(index, offset) {
   found.index = index;
@@ -27571,7 +27805,7 @@ var Slice = class _Slice {
     let openStart = json.openStart || 0, openEnd = json.openEnd || 0;
     if (typeof openStart != "number" || typeof openEnd != "number")
       throw new RangeError("Invalid input for Slice.fromJSON");
-    return new _Slice(Fragment26.fromJSON(schema, json.content), openStart, openEnd);
+    return new _Slice(Fragment27.fromJSON(schema, json.content), openStart, openEnd);
   }
   /**
   Create a slice from a fragment by taking the maximum possible
@@ -27586,7 +27820,7 @@ var Slice = class _Slice {
     return new _Slice(fragment, openStart, openEnd);
   }
 };
-Slice.empty = new Slice(Fragment26.empty, 0, 0);
+Slice.empty = new Slice(Fragment27.empty, 0, 0);
 function removeRange(content, from, to) {
   let { index, offset } = content.findIndex(from), child = content.maybeChild(index);
   let { index: indexTo, offset: offsetTo } = content.findIndex(to);
@@ -27684,7 +27918,7 @@ function replaceThreeWay($from, $start, $end, $to, depth) {
       addNode(close(openEnd, replaceTwoWay($end, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment26(content);
+  return new Fragment27(content);
 }
 function replaceTwoWay($from, $to, depth) {
   let content = [];
@@ -27694,13 +27928,13 @@ function replaceTwoWay($from, $to, depth) {
     addNode(close(type, replaceTwoWay($from, $to, depth + 1)), content);
   }
   addRange($to, null, depth, content);
-  return new Fragment26(content);
+  return new Fragment27(content);
 }
 function prepareSliceForReplace(slice, $along) {
   let extra = $along.depth - slice.openStart, parent = $along.node(extra);
   let node = parent.copy(slice.content);
   for (let i = extra - 1; i >= 0; i--)
-    node = $along.node(i).copy(Fragment26.from(node));
+    node = $along.node(i).copy(Fragment27.from(node));
   return {
     start: node.resolveNoCache(slice.openStart + extra),
     end: node.resolveNoCache(node.content.size - slice.openEnd - extra)
@@ -28039,7 +28273,7 @@ var Node2 = class _Node {
     this.type = type;
     this.attrs = attrs;
     this.marks = marks;
-    this.content = content || Fragment26.empty;
+    this.content = content || Fragment27.empty;
   }
   /**
   The array of this node's child nodes.
@@ -28344,7 +28578,7 @@ var Node2 = class _Node {
   can optionally pass `start` and `end` indices into the
   replacement fragment.
   */
-  canReplace(from, to, replacement = Fragment26.empty, start = 0, end = replacement.childCount) {
+  canReplace(from, to, replacement = Fragment27.empty, start = 0, end = replacement.childCount) {
     let one = this.contentMatchAt(from).matchFragment(replacement, start, end);
     let two = one && one.matchFragment(this.content, to);
     if (!two || !two.validEnd)
@@ -28426,7 +28660,7 @@ var Node2 = class _Node {
         throw new RangeError("Invalid text node in JSON");
       return schema.text(json.text, marks);
     }
-    let content = Fragment26.fromJSON(schema, json.content);
+    let content = Fragment27.fromJSON(schema, json.content);
     let node = schema.nodeType(json.type).create(json.attrs, content, marks);
     node.type.checkAttrs(node.attrs);
     return node;
@@ -28522,7 +28756,7 @@ var ContentMatch = class _ContentMatch {
     function search(match, types) {
       let finished = match.matchFragment(after, startIndex);
       if (finished && (!toEnd || finished.validEnd))
-        return Fragment26.from(types.map((tp) => tp.createAndFill()));
+        return Fragment27.from(types.map((tp) => tp.createAndFill()));
       for (let i = 0; i < match.next.length; i++) {
         let { type, next } = match.next[i];
         if (!(type.isText || type.hasRequiredAttrs()) && seen.indexOf(next) == -1) {
@@ -29090,7 +29324,7 @@ function mapFragment(fragment, f, parent) {
       child = f(child, parent, i);
     mapped.push(child);
   }
-  return Fragment26.fromArray(mapped);
+  return Fragment27.fromArray(mapped);
 }
 var AddMarkStep = class _AddMarkStep extends Step {
   /**
@@ -29207,7 +29441,7 @@ var AddNodeMarkStep = class _AddNodeMarkStep extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.addToSet(node.marks));
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment26.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment27.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc) {
     let node = doc.nodeAt(this.pos);
@@ -29253,7 +29487,7 @@ var RemoveNodeMarkStep = class _RemoveNodeMarkStep extends Step {
     if (!node)
       return StepResult.fail("No node at mark step's position");
     let updated = node.type.create(node.attrs, null, this.mark.removeFromSet(node.marks));
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment26.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment27.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   invert(doc) {
     let node = doc.nodeAt(this.pos);
@@ -29454,7 +29688,7 @@ var AttrStep = class _AttrStep extends Step {
       attrs[name] = node.attrs[name];
     attrs[this.attr] = this.value;
     let updated = node.type.create(attrs, null, node.marks);
-    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment26.from(updated), 0, node.isLeaf ? 0 : 1));
+    return StepResult.fromReplace(doc, this.pos, this.pos + 1, new Slice(Fragment27.from(updated), 0, node.isLeaf ? 0 : 1));
   }
   getMap() {
     return StepMap.empty;
@@ -29838,7 +30072,7 @@ var NodeSelection2 = class _NodeSelection extends Selection {
     return new _NodeSelection($pos);
   }
   content() {
-    return new Slice(Fragment26.from(this.node), 0, 0);
+    return new Slice(Fragment27.from(this.node), 0, 0);
   }
   eq(other) {
     return other instanceof _NodeSelection && other.anchor == this.anchor;
@@ -30566,10 +30800,10 @@ var CellSelection = class CellSelection2 extends Selection {
         }
         rowContent.push(cell);
       }
-      rows.push(table.child(row).copy(Fragment26.from(rowContent)));
+      rows.push(table.child(row).copy(Fragment27.from(rowContent)));
     }
     const fragment = this.isColSelection() && this.isRowSelection() ? table : rows;
-    return new Slice(Fragment26.from(fragment), 1, 1);
+    return new Slice(Fragment27.from(fragment), 1, 1);
   }
   replace(tr, content = Slice.empty) {
     const mapFrom = tr.steps.length, ranges = this.ranges;
@@ -30581,7 +30815,7 @@ var CellSelection = class CellSelection2 extends Selection {
     if (sel) tr.setSelection(sel);
   }
   replaceWith(tr, node) {
-    this.replace(tr, new Slice(Fragment26.from(node), 0, 0));
+    this.replace(tr, new Slice(Fragment27.from(node), 0, 0));
   }
   forEachCell(f) {
     const table = this.$anchorCell.node(-1);