@godxjp/ui 31.5.0 → 31.7.0

package/dist/components/data-display/tree.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { mergeRefs } from "@react-aria/utils";
 import { ChevronDown, ChevronRight, File as FileIcon, Folder, FolderOpen } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
@@ -8,6 +9,7 @@ import { CheckboxVisual } from "../data-entry/checkbox.js";
 import { Skeleton } from "../feedback/skeleton.js";
 import {
   collectAllExpandableKeys,
+  createLazyLoadLedger,
   flattenVisibleTree,
   getDescendantValues,
   normalizeTreeOptions,
@@ -44,6 +46,7 @@ function indexTree(nodes, into = /* @__PURE__ */ new Map()) {
 function isRtl(element) {
   return element.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
 }
+const VIRTUAL_OVERSCAN = 6;
 function TreeRoot({
   treeData,
   fieldNames,
@@ -62,6 +65,9 @@ function TreeRoot({
   defaultExpandAll = false,
   loadData,
   titleRender,
+  filterTreeNode,
+  height,
+  virtual = true,
   showLine = false,
   showIcon = false,
   divided = false,
@@ -114,21 +120,29 @@ function TreeRoot({
     if (!isCheckedControlled) setInternalChecked(settled);
     onCheckedValuesChange?.(settled);
   };
-  const requestedLoads = React.useRef(/* @__PURE__ */ new Set());
+  const [lazyLoads] = React.useState(createLazyLoadLedger);
+  const loadedFor = React.useRef(/* @__PURE__ */ new Set());
   const [loadingValues, setLoadingValues] = React.useState(() => /* @__PURE__ */ new Set());
   const requestLoad = (node) => {
     if (!loadData) return;
     if ((node.children?.length ?? 0) > 0 || node.isLeaf === true) return;
-    if (requestedLoads.current.has(node.value)) return;
-    requestedLoads.current.add(node.value);
-    setLoadingValues((prev) => new Set(prev).add(node.value));
-    void Promise.resolve(loadData(node)).finally(() => {
-      setLoadingValues((prev) => {
-        const next = new Set(prev);
-        next.delete(node.value);
-        return next;
-      });
-    });
+    const started = lazyLoads.run(
+      node.value,
+      () => loadData(node),
+      (ok) => {
+        setLoadingValues((prev) => {
+          const next = new Set(prev);
+          next.delete(node.value);
+          return next;
+        });
+        if (ok) return;
+        loadedFor.current.delete(node.value);
+        if (!isExpandedControlled) {
+          setInternalExpanded((prev) => prev.filter((entry) => entry !== node.value));
+        }
+      }
+    );
+    if (started) setLoadingValues((prev) => new Set(prev).add(node.value));
   };
   const requestLoadRef = React.useRef(requestLoad);
   requestLoadRef.current = requestLoad;
@@ -143,7 +157,6 @@ function TreeRoot({
     walk(options);
     return map;
   }, [options]);
-  const loadedFor = React.useRef(/* @__PURE__ */ new Set());
   React.useEffect(() => {
     if (!loadData) return;
     for (const value2 of expandedSet) {
@@ -157,6 +170,17 @@ function TreeRoot({
   const visibleIndex = new Map(visible.map((entry, index) => [entry.node.value, index]));
   const [activeValue, setActiveValue] = React.useState(null);
   const rovingValue = (activeValue && visibleIndex.has(activeValue) ? activeValue : null) ?? visible.find((entry) => selected.includes(entry.node.value))?.node.value ?? visible[0]?.node.value ?? null;
+  const isWindowed = height !== void 0 && virtual;
+  const treeRef = React.useRef(null);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [rowHeight, setRowHeight] = React.useState(0);
+  const [hasFocusWithin, setHasFocusWithin] = React.useState(false);
+  React.useLayoutEffect(() => {
+    if (!isWindowed) return;
+    const firstRow = treeRef.current?.querySelector('[role="treeitem"]');
+    const measured = firstRow?.offsetHeight ?? 0;
+    if (measured > 0 && measured !== rowHeight) setRowHeight(measured);
+  }, [isWindowed, rowHeight, size, visible.length]);
   const nodeRefs = React.useRef(/* @__PURE__ */ new Map());
   const pendingFocus = React.useRef(null);
   React.useEffect(() => {
@@ -165,9 +189,23 @@ function TreeRoot({
     pendingFocus.current = null;
     nodeRefs.current.get(target)?.focus();
   });
+  const revealRow = (value2) => {
+    const element = treeRef.current;
+    const rowIndex = rowIndexOf.get(value2);
+    if (!isWindowed || !element || rowHeight <= 0 || rowIndex === void 0) return;
+    const viewport = element.clientHeight || height || 0;
+    const top = rowIndex * rowHeight;
+    let next = element.scrollTop;
+    if (top < next) next = top;
+    else if (top + rowHeight > next + viewport) next = top + rowHeight - viewport;
+    if (next === element.scrollTop) return;
+    element.scrollTop = next;
+    setScrollTop(next);
+  };
   const moveTo = (index) => {
     const entry = visible[index];
     if (!entry) return;
+    revealRow(entry.node.value);
     setActiveValue(entry.node.value);
     pendingFocus.current = entry.node.value;
   };
@@ -318,19 +356,18 @@ function TreeRoot({
       jumpByLabel(event.key, index);
     }
   };
-  const renderNodes = (nodes, depth) => nodes.flatMap((node, position) => {
+  const renderItem = (node, depth, setSize, posInSet, groupId) => {
     const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
     const expandable = expandableOf(node);
     const isOpen = expandable && expandedSet.has(node.value);
     const isLoading = loadingValues.has(node.value);
     const isSelected = selected.includes(node.value);
+    const isFilterMatch = filterTreeNode ? filterTreeNode(node) : false;
     const checkState = checkableProp ? checkStateOf(node) : "unchecked";
     const nodeDisabled = disabled || Boolean(node.disabled);
     const labelId = `${treeId}-${node.value}-label`;
-    const groupId = `${treeId}-${node.value}-group`;
-    const showGroup = isOpen && (hasChildren || isLoading);
     const glyph = node.icon ?? (variant === "directory" ? hasChildren ? isOpen ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(Folder, {}) : /* @__PURE__ */ jsx(FileIcon, {}) : null);
-    const item = /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref: (element) => {
@@ -339,11 +376,11 @@ function TreeRoot({
         role: "treeitem",
         "aria-labelledby": labelId,
         "aria-level": depth + 1,
-        "aria-setsize": nodes.length,
-        "aria-posinset": position + 1,
+        "aria-setsize": setSize,
+        "aria-posinset": posInSet,
         "aria-selected": isSelected,
         "aria-expanded": expandable ? isOpen : void 0,
-        "aria-owns": showGroup ? groupId : void 0,
+        "aria-owns": groupId,
         "aria-checked": checkableProp ? checkState === "indeterminate" ? "mixed" : checkState === "checked" : void 0,
         "aria-disabled": nodeDisabled || void 0,
         "aria-busy": isLoading || void 0,
@@ -357,9 +394,19 @@ function TreeRoot({
         "data-value": node.value,
         "data-selected": isSelected ? "true" : void 0,
         "data-disabled": nodeDisabled ? "" : void 0,
+        "data-filter-node": isFilterMatch ? "true" : void 0,
         className: "ui-tree-node ui-focus-ring",
         style: { "--tree-node-level": depth },
         children: [
+          isWindowed && showLine ? Array.from({ length: depth }, (_, level) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ui-tree-rail",
+              style: { "--tree-rail-level": level + 1 }
+            },
+            `rail-${level}`
+          )) : null,
           /* @__PURE__ */ jsx(
             "span",
             {
@@ -395,11 +442,26 @@ function TreeRoot({
           ) : null,
           showIcon && glyph ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ui-tree-icon", children: glyph }) : null,
           /* @__PURE__ */ jsx("span", { id: labelId, className: "ui-tree-label", children: titleRender ? titleRender(node) : node.label }),
-          isSelected ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.tree.selected") }) : null
+          isSelected ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.tree.selected") }) : null,
+          isFilterMatch ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("dataDisplay.tree.filterMatch") }) : null
         ]
       },
       node.value
     );
+  };
+  const renderNodes = (nodes, depth) => nodes.flatMap((node, position) => {
+    const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
+    const isOpen = expandableOf(node) && expandedSet.has(node.value);
+    const isLoading = loadingValues.has(node.value);
+    const groupId = `${treeId}-${node.value}-group`;
+    const showGroup = isOpen && (hasChildren || isLoading);
+    const item = renderItem(
+      node,
+      depth,
+      nodes.length,
+      position + 1,
+      showGroup ? groupId : void 0
+    );
     if (!showGroup) return [item];
     return [
       item,
@@ -426,13 +488,68 @@ function TreeRoot({
       )
     ];
   });
+  const flatRows = [];
+  if (isWindowed) {
+    const walk = (nodes, depth) => {
+      nodes.forEach((node, position) => {
+        flatRows.push({
+          kind: "node",
+          node,
+          depth,
+          setSize: nodes.length,
+          posInSet: position + 1
+        });
+        if (!expandableOf(node) || !expandedSet.has(node.value)) return;
+        if ((node.children?.length ?? 0) > 0 && node.isLeaf !== true)
+          walk(node.children, depth + 1);
+        else if (loadingValues.has(node.value)) {
+          flatRows.push({ kind: "loading", key: `${node.value}::loading`, depth: depth + 1 });
+        }
+      });
+    };
+    walk(options, 0);
+  }
+  const rowIndexOf = /* @__PURE__ */ new Map();
+  flatRows.forEach((row, index) => {
+    if (row.kind === "node") rowIndexOf.set(row.node.value, index);
+  });
+  let windowStart = 0;
+  let windowEnd = flatRows.length;
+  if (isWindowed && rowHeight > 0 && height !== void 0) {
+    const first = Math.floor(scrollTop / rowHeight);
+    windowStart = Math.max(0, first - VIRTUAL_OVERSCAN);
+    windowEnd = Math.min(flatRows.length, first + Math.ceil(height / rowHeight) + VIRTUAL_OVERSCAN);
+    const focusedRow = rovingValue === null ? void 0 : rowIndexOf.get(rovingValue);
+    if (hasFocusWithin && focusedRow !== void 0) {
+      windowStart = Math.min(windowStart, focusedRow);
+      windowEnd = Math.max(windowEnd, focusedRow + 1);
+    }
+  }
+  const rovingRow = rovingValue === null ? void 0 : rowIndexOf.get(rovingValue);
+  const rovingOffscreen = isWindowed && rovingRow !== void 0 && (rovingRow < windowStart || rovingRow >= windowEnd);
   const isEmpty = visible.length === 0;
+  const body = isEmpty ? null : isWindowed ? flatRows.slice(windowStart, windowEnd).map(
+    (row) => row.kind === "node" ? renderItem(row.node, row.depth, row.setSize, row.posInSet, void 0) : (
+      // A windowed tree has no `group` to hold the placeholder, and `role="tree"` may own
+      // only treeitems — so the skeleton is decoration and `aria-busy` on the row speaks.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "ui-tree-loading",
+          style: { "--tree-node-level": row.depth },
+          children: /* @__PURE__ */ jsx(Skeleton, { className: "ui-tree-loading-bar" })
+        },
+        row.key
+      )
+    )
+  ) : renderNodes(options, 0);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "div",
       {
         ...ariaProps,
-        ref: forwardedRef,
+        ref: mergeRefs(forwardedRef, treeRef),
         id: treeId,
         role: "tree",
         "aria-multiselectable": multiple || checkableProp,
@@ -442,8 +559,47 @@ function TreeRoot({
         "data-show-line": showLine ? "true" : void 0,
         "data-divided": divided ? "true" : void 0,
         "data-empty": isEmpty ? "true" : void 0,
+        "data-virtual": isWindowed ? "true" : void 0,
         className: cn("ui-tree", className),
-        children: isEmpty ? null : renderNodes(options, 0)
+        tabIndex: rovingOffscreen ? 0 : void 0,
+        style: height === void 0 ? void 0 : {
+          maxBlockSize: height,
+          overflowY: "auto"
+        },
+        onScroll: isWindowed ? (event) => setScrollTop(event.currentTarget.scrollTop) : void 0,
+        onFocus: (event) => {
+          if (!isWindowed) return;
+          setHasFocusWithin(true);
+          if (event.target === event.currentTarget && rovingValue !== null) {
+            revealRow(rovingValue);
+            pendingFocus.current = rovingValue;
+          }
+        },
+        onBlur: (event) => {
+          if (!isWindowed) return;
+          if (!event.currentTarget.contains(event.relatedTarget)) {
+            setHasFocusWithin(false);
+          }
+        },
+        children: [
+          isWindowed ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "ui-tree-spacer",
+              style: { blockSize: windowStart * rowHeight }
+            }
+          ) : null,
+          body,
+          isWindowed ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "ui-tree-spacer",
+              style: { blockSize: (flatRows.length - windowEnd) * rowHeight }
+            }
+          ) : null
+        ]
       }
     ),
     isEmpty ? /* @__PURE__ */ jsx("p", { role: "status", className: "ui-tree-empty", children: t("dataDisplay.tree.empty") }) : null

package/dist/components/data-entry/branch-scope-picker.d.ts

@@ -16,6 +16,7 @@ export declare const BranchScopePicker: React.ForwardRefExoticComponent<import("
     error?: import("../../props/index.js").ErrorProp;
     loading?: boolean;
     empty?: React.ReactNode;
+    notFoundContent?: import("../../props/index.js").NotFoundContentProp;
     listError?: React.ReactNode;
     denied?: React.ReactNode;
     allLabel?: React.ReactNode;

package/dist/components/data-entry/branch-scope-picker.js

@@ -25,6 +25,7 @@ const BranchScopePicker = React.forwardRef(
     error,
     loading = false,
     empty,
+    notFoundContent,
     listError,
     denied,
     allLabel,
@@ -156,7 +157,7 @@ const BranchScopePicker = React.forwardRef(
               ariaLabel: t("dataEntry.branchScope.searchPlaceholder")
             }
           ),
-          filtered.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", "aria-live": "polite", children: t("dataEntry.branchScope.noMatches") }) : (
+          filtered.length === 0 ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", "aria-live": "polite", children: notFoundContent ?? t("dataEntry.branchScope.noMatches") }) : (
             // A bounded list is a scroll container, so it MUST be reachable and scrollable
             // with the keyboard alone even when every row is unfocusable (all checkboxes
             // `disabled`) — WCAG 2.1.1 / axe `scrollable-region-focusable`; same contract as

package/dist/components/data-entry/cascader.js

@@ -16,6 +16,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover
 import { ScrollArea } from "../data-display/scroll-area.js";
 import { Command, CommandInput } from "./command.js";
 import {
+  createLazyLoadLedger,
   filterTreeOptions,
   formatPathLabels,
   getNodeByPath,
@@ -175,18 +176,16 @@ function Cascader({
     },
     [isSearchControlled, onSearchChange]
   );
-  const requestedLoads = React.useRef(/* @__PURE__ */ new Set());
+  const [lazyLoads] = React.useState(createLazyLoadLedger);
   const requestLoad = React.useCallback(
     (path, chain) => {
       if (!loadData) return;
       const node = chain.at(-1);
       if (!node || node.isLeaf === true || (node.children?.length ?? 0) > 0) return;
       const key = pathKey(path);
-      if (requestedLoads.current.has(key)) return;
-      requestedLoads.current.add(key);
-      void loadData(chain);
+      lazyLoads.run(key, () => loadData(chain));
     },
-    [loadData]
+    [loadData, lazyLoads]
   );
   const isControlledSingle = !multiple && value !== void 0;
   const isControlledMulti = multiple && value !== void 0;

package/dist/components/data-entry/record-picker.d.ts

@@ -85,6 +85,8 @@ export declare const RecordPicker: React.ForwardRefExoticComponent<Omit<React.Bu
     };
     placeholder?: string;
     dialogTitle?: string;
+    notFoundContent?: import("../../props/index.js").NotFoundContentProp;
+    loadMoreLabel?: import("../../props/index.js").LabelProp;
     size?: "xs" | "sm" | "md" | "lg";
     "data-field"?: string;
 } & React.RefAttributes<HTMLButtonElement | HTMLInputElement>>;

package/dist/components/data-entry/record-picker.js

@@ -50,6 +50,8 @@ const RecordPicker = React.forwardRef(
     emptyOption,
     placeholder,
     dialogTitle,
+    notFoundContent,
+    loadMoreLabel,
     disabled = false,
     size,
     className,
@@ -90,6 +92,8 @@ const RecordPicker = React.forwardRef(
           emptyOption,
           placeholder,
           dialogTitle,
+          notFoundContent,
+          loadMoreLabel,
           disabled,
           size,
           className,
@@ -115,6 +119,7 @@ const RecordPicker = React.forwardRef(
           value: isMultiple ? selected : selected[0] ?? void 0,
           onValueChange: ((next) => commit(toArray(next))),
           placeholder: placeholder ?? t("dataEntry.recordPicker.placeholder"),
+          notFoundContent,
           disabled,
           size,
           className
@@ -136,6 +141,8 @@ const RecordPicker = React.forwardRef(
         emptyOption,
         placeholder,
         dialogTitle,
+        notFoundContent,
+        loadMoreLabel,
         disabled,
         size,
         className,
@@ -164,6 +171,8 @@ const InlinePicker = React.forwardRef(function InlinePicker2({
   emptyOption,
   placeholder,
   dialogTitle,
+  notFoundContent,
+  loadMoreLabel,
   disabled,
   size,
   className,
@@ -295,6 +304,8 @@ const InlinePicker = React.forwardRef(function InlinePicker2({
         selectedOptions,
         emptyOption,
         dialogTitle,
+        notFoundContent,
+        loadMoreLabel,
         initialQuery: dialogQuery,
         autoOpen: true,
         onDismiss: () => setDialogQuery(null)
@@ -313,6 +324,8 @@ const DialogPicker = React.forwardRef(function DialogPicker2({
   emptyOption,
   placeholder,
   dialogTitle,
+  notFoundContent,
+  loadMoreLabel,
   disabled,
   size,
   className,
@@ -479,11 +492,17 @@ const DialogPicker = React.forwardRef(function DialogPicker2({
                     variant: "outline",
                     size: "sm",
                     onClick: () => void load(query, filterValues),
-                    children: t("dataEntry.recordPicker.more")
+                    children: t("common.retry")
                   }
                 )
               }
-            ) : status === "loading" ? /* @__PURE__ */ jsx("div", { role: "status", className: "ui-record-picker-status", children: t("dataEntry.recordPicker.loading") }) : visible.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { variant: "compact", title: t("dataEntry.recordPicker.empty") }) : groups.map(([heading, items]) => {
+            ) : status === "loading" ? /* @__PURE__ */ jsx("div", { role: "status", className: "ui-record-picker-status", children: t("dataEntry.recordPicker.loading") }) : visible.length === 0 ? /* @__PURE__ */ jsx(
+              EmptyState,
+              {
+                variant: "compact",
+                title: notFoundContent ?? t("dataEntry.recordPicker.empty")
+              }
+            ) : groups.map(([heading, items]) => {
               const rendered = items.map((o) => {
                 const picked = (isMultiple ? draft : selected).includes(o.value);
                 return /* @__PURE__ */ jsxs(
@@ -516,7 +535,7 @@ const DialogPicker = React.forwardRef(function DialogPicker2({
                 variant: "outline",
                 size: "sm",
                 onClick: () => void load(query, filterValues, cursor),
-                children: t("dataEntry.recordPicker.more")
+                children: loadMoreLabel ?? t("dataEntry.recordPicker.more")
               }
             ) : null
           ] }) }),

package/dist/components/data-entry/transfer.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { TransferProp } from "../../props/components/data-entry.prop.js";
 export type { TransferProp, TransferProp as TransferProps, TransferItemProp, } from "../../props/components/data-entry.prop.js";
-export declare function Transfer({ dataSource, targetKeys: legacyTargetKeys, value, defaultValue, name, readOnly, pagination, defaultTargetKeys, onValueChange, titles, showSearch, showSelectAll, filterOption, render, oneWay, disabled, id, className, selectedKeys: selectedKeysProp, onSelectChange, ...ariaProps }: TransferProp): React.JSX.Element;
+export declare function Transfer({ dataSource, targetKeys: legacyTargetKeys, value, defaultValue, name, readOnly, pagination, defaultTargetKeys, onValueChange, titles, showSearch, showSelectAll, filterOption, render, oneWay, disabled, id, className, selectedKeys: selectedKeysProp, onSelectChange, locale, ...ariaProps }: TransferProp): React.JSX.Element;

package/dist/components/data-entry/transfer.js

@@ -158,6 +158,7 @@ function Transfer({
   className,
   selectedKeys: selectedKeysProp,
   onSelectChange,
+  locale,
   ...ariaProps
 }) {
   const { t } = useTranslation();
@@ -192,6 +193,8 @@ function Transfer({
     if (!selectedKeysProp) setInternalSelected(cleared);
     onSelectChange?.(cleared[0], cleared[1]);
   };
+  const notFound = locale?.notFoundContent;
+  const [leftNotFound, rightNotFound] = Array.isArray(notFound) ? notFound : [notFound, notFound];
   const leftTitle = titles?.[0] ?? t("dataEntry.transfer.source");
   const rightTitle = titles?.[1] ?? t("dataEntry.transfer.target");
   return /* @__PURE__ */ jsxs(
@@ -219,7 +222,7 @@ function Transfer({
             disabled: disabled || readOnly,
             pagination,
             searchPlaceholder: t("dataEntry.transfer.searchPlaceholder"),
-            emptyText: t("dataEntry.transfer.empty")
+            emptyText: leftNotFound ?? t("dataEntry.transfer.empty")
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "ui-transfer-actions", children: [
@@ -263,7 +266,7 @@ function Transfer({
             disabled: disabled || readOnly,
             pagination,
             searchPlaceholder: t("dataEntry.transfer.searchPlaceholder"),
-            emptyText: t("dataEntry.transfer.empty")
+            emptyText: rightNotFound ?? t("dataEntry.transfer.empty")
           }
         )
       ]

package/dist/components/data-entry/tree-select.js

@@ -19,6 +19,7 @@ import { SearchInput } from "./search-input.js";
 import { Separator } from "../layout/separator.js";
 import {
   collectAllExpandableKeys,
+  createLazyLoadLedger,
   filterVisibleTree,
   findNodeByValue,
   flattenVisibleTree,
@@ -134,15 +135,23 @@ function TreeSelectRoot({
     if (!isControlled) setInternal(next);
     onValueChange?.(checkable || multiple ? next : next[0] ?? void 0);
   };
-  const requestedLoads = React.useRef(/* @__PURE__ */ new Set());
+  const [lazyLoads] = React.useState(createLazyLoadLedger);
   const toggleExpand = (node) => {
     const key = node.value;
     const willExpand = !expandedKeys.has(key);
     if (willExpand && loadData && !(node.children?.length ?? 0) && node.isLeaf !== true) {
-      if (!requestedLoads.current.has(key)) {
-        requestedLoads.current.add(key);
-        void loadData(node);
-      }
+      lazyLoads.run(
+        key,
+        () => loadData(node),
+        (ok) => {
+          if (ok) return;
+          setExpandedKeys((prev) => {
+            const next = new Set(prev);
+            next.delete(key);
+            return next;
+          });
+        }
+      );
     }
     setExpandedKeys((prev) => {
       const next = new Set(prev);

package/dist/components/feedback/tooltip.d.ts

@@ -51,4 +51,25 @@ interface TooltipContentProps extends React.ComponentPropsWithRef<"div"> {
     forceMount?: true;
 }
 export declare function TooltipContent({ className, style, children, ref, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, ...props }: TooltipContentProps): React.JSX.Element;
+/**
+ * antd's ellipsis tooltip (`Base/Ellipsis` + `useTooltipProps`), ported for gh#1045 / gh#1046.
+ * Module-internal (not in the public index): `Text`/`Paragraph`/`Title` `ellipsis.tooltip` and
+ * `BreadcrumbItemProp.ellipsis` render it. It lives here, not in typography, so Breadcrumb does not
+ * pull the Typography module (and its Textarea) into its bundle and stylesheet layers.
+ *
+ * Open while the anchor is ACTUALLY clipping — measured at the moment of the pointer or the focus,
+ * so a box that fits never shows one — on pointer hover of the anchor, and on keyboard focus of the
+ * anchor itself (`Text asChild` link, a breadcrumb link) or of the nearest focusable ANCESTOR that is
+ * a control (`treeitem`, a sort `button`, a link). The anchor never becomes focusable, so a Text in
+ * a treeitem stays inside that item's single tab stop, and the accessible name stays the full text
+ * node — the truncation is paint only. Escape dismisses (WCAG 1.4.13); hovering the tooltip keeps
+ * it open.
+ *
+ * When the focus host is ALREADY a tooltip trigger (a DataTable sort button carries the sort hint on
+ * top), this one opens underneath so the two never cover each other.
+ */
+export declare function EllipsisTooltip({ anchorRef, title, }: {
+    anchorRef: React.RefObject<HTMLElement | null>;
+    title: React.ReactNode;
+}): React.JSX.Element;
 export {};