@godxjp/ui 31.5.0 → 31.7.0

package/dist/components/feedback/tooltip.js

@@ -12,6 +12,7 @@ import {
 import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/slot.js";
 const DEFAULT_DELAY_DURATION = 200;
+const TooltipAnchorContext = React.createContext(null);
 function toPlacement(side, align) {
   if (align === "center") return side;
   if (side === "top" || side === "bottom") return `${side} ${align}`;
@@ -76,9 +77,11 @@ function TooltipContent({
   ...props
 }) {
   const overlayPortalContainer = useOverlayPortalContainer();
+  const anchorRef = React.useContext(TooltipAnchorContext);
   return /* @__PURE__ */ jsx(
     AriaTooltip,
     {
+      ...anchorRef ? { triggerRef: anchorRef } : null,
       UNSTABLE_portalContainer: overlayPortalContainer,
       placement: toPlacement(side, align),
       offset: sideOffset,
@@ -119,7 +122,105 @@ function TooltipContent({
     }
   );
 }
+const FOCUS_HOST = 'a[href], button, input, select, textarea, summary, [tabindex]:is([role="treeitem"], [role="gridcell"], [role="row"], [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="link"], [role="button"], [role="checkbox"], [role="radio"], [role="switch"])';
+function isClipping(node) {
+  const box = node.querySelector(':scope > [data-slot="typography-content"]') ?? node;
+  return box.scrollWidth > box.clientWidth || box.scrollHeight > box.clientHeight;
+}
+function isFocusVisible(node) {
+  try {
+    return node.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+function EllipsisTooltip({
+  anchorRef,
+  title
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [side, setSide] = React.useState("top");
+  const timer = React.useRef(void 0);
+  React.useEffect(() => {
+    const node = anchorRef.current;
+    if (!node) return void 0;
+    const host = node.matches(FOCUS_HOST) ? node : node.parentElement?.closest(FOCUS_HOST);
+    const schedule = (next, delay) => {
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => {
+        setOpen(next);
+      }, delay);
+    };
+    const show = (delay) => {
+      if (!isClipping(node)) return;
+      setSide(host && host !== node && host.hasAttribute("data-state") ? "bottom" : "top");
+      schedule(true, delay);
+    };
+    const hide = () => {
+      schedule(false, 100);
+    };
+    const onPointerEnter = () => {
+      show(DEFAULT_DELAY_DURATION);
+    };
+    const onFocusIn = () => {
+      const active = document.activeElement;
+      if (active && (active === host || node.contains(active)) && isFocusVisible(active)) show(0);
+    };
+    node.addEventListener("pointerenter", onPointerEnter);
+    node.addEventListener("pointerleave", hide);
+    node.addEventListener("focusin", onFocusIn);
+    node.addEventListener("focusout", hide);
+    host?.addEventListener("focusin", onFocusIn);
+    host?.addEventListener("focusout", hide);
+    return () => {
+      clearTimeout(timer.current);
+      node.removeEventListener("pointerenter", onPointerEnter);
+      node.removeEventListener("pointerleave", hide);
+      node.removeEventListener("focusin", onFocusIn);
+      node.removeEventListener("focusout", hide);
+      host?.removeEventListener("focusin", onFocusIn);
+      host?.removeEventListener("focusout", hide);
+    };
+  }, [anchorRef]);
+  React.useEffect(() => {
+    if (!open) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        clearTimeout(timer.current);
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!next) setOpen(false);
+      },
+      children: /* @__PURE__ */ jsx(TooltipAnchorContext.Provider, { value: anchorRef, children: /* @__PURE__ */ jsx(
+        TooltipContent,
+        {
+          side,
+          "data-ellipsis-tooltip": "",
+          onPointerEnter: () => {
+            clearTimeout(timer.current);
+          },
+          onPointerLeave: () => {
+            setOpen(false);
+          },
+          children: title
+        }
+      ) })
+    }
+  );
+}
 export {
+  EllipsisTooltip,
   Tooltip,
   TooltipContent,
   TooltipProvider,

package/dist/components/general/typography.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Check, Copy, LoaderCircle, Pencil } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../i18n/use-translation.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
+import { EllipsisTooltip, Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
 import { Textarea } from "../data-entry/textarea.js";
 import { isDevelopment } from "../../lib/dev.js";
 const COPIED_RESET_MS = 3e3;
@@ -347,7 +347,9 @@ function useTypographyBlock(props, allowRows) {
     wrapsContent,
     onTextClick: enableEdit && triggerType.includes("text") ? startEditing : void 0,
     ellipsisTooltip,
-    isEllipsis
+    isEllipsis,
+    anchorRef: elementRef,
+    showsEllipsisTooltip: clamping && ellipsisTooltip !== void 0 && ellipsisTooltip !== null && ellipsisTooltip !== false && ellipsisTooltip !== ""
   };
 }
 function usesBlockBehaviour(props) {
@@ -409,7 +411,11 @@ const TextBase = React.forwardRef((props, ref) => {
     italic: _italic,
     ...rest
   } = props;
-  const block = useTypographyBlock(props, allowRows);
+  const asChildElement = asChild && React.isValidElement(children) ? children : null;
+  const block = useTypographyBlock(
+    asChildElement ? { ...props, children: asChildElement.props.children } : props,
+    allowRows
+  );
   const element = as ?? component ?? "span";
   const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
   const ellipsisRowCount = ellipsis ? ellipsisRows(ellipsis) : 0;
@@ -492,21 +498,29 @@ const TextBase = React.forwardRef((props, ref) => {
     ) : block.text,
     block.trailing
   ] });
+  let rendered;
   if (asChild) {
     const child = React.Children.only(children);
     const cloned = {
       ...typography,
       ...child.props,
-      ref,
+      // The measuring ref too, or an `asChild` ellipsis never learns it is clipping (gh#1045).
+      ref: composeRefs(block.measureRef, ref),
       className: cn(typography.className, child.props.className)
     };
-    return usesBlockBehaviour(props) ? React.cloneElement(child, cloned, body) : React.cloneElement(child, cloned);
+    rendered = usesBlockBehaviour(props) ? React.cloneElement(child, cloned, body) : React.cloneElement(child, cloned);
+  } else {
+    rendered = React.createElement(
+      element,
+      { ref: composeRefs(block.measureRef, ref), ...typography },
+      body
+    );
   }
-  return React.createElement(
-    element,
-    { ref: composeRefs(block.measureRef, ref), ...typography },
-    body
-  );
+  if (!block.showsEllipsisTooltip) return rendered;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    rendered,
+    /* @__PURE__ */ jsx(EllipsisTooltip, { anchorRef: block.anchorRef, title: block.ellipsisTooltip })
+  ] });
 });
 TextBase.displayName = "TextBase";
 const Text = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TextBase, { ref, ...props }));
@@ -615,7 +629,7 @@ const Title = React.forwardRef((props, ref) => {
     ) : block.text,
     block.trailing
   ] });
-  return React.createElement(
+  const rendered = React.createElement(
     element,
     {
       ref: composeRefs(block.measureRef, ref),
@@ -635,6 +649,11 @@ const Title = React.forwardRef((props, ref) => {
     },
     body
   );
+  if (!block.showsEllipsisTooltip) return rendered;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    rendered,
+    /* @__PURE__ */ jsx(EllipsisTooltip, { anchorRef: block.anchorRef, title: block.ellipsisTooltip })
+  ] });
 });
 Title.displayName = "Title";
 const TypographyRoot = React.forwardRef(

package/dist/components/layout/breadcrumb-ellipsis.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement } from "react";
+import type { BreadcrumbItemProp, BreadcrumbProp } from "../../props/vocabulary/navigation.prop.js";
+/** `data-ellipsis` for the `<ol>`: present when any crumb truncates, so the trail stays one line. */
+export declare function trailEllipsis(items: BreadcrumbProp): "" | undefined;
+/**
+ * gh#1046 — one crumb's text box, bounded to one line with "…", and the full label in a tooltip on
+ * hover and on keyboard focus of the link. The crumb element itself is the clipped box (never a
+ * wrapper around it), so the link's own focus ring is not clipped. Shared with PageContainer's
+ * trail, which renders its own markup.
+ */
+export declare function BreadcrumbCrumbText({ item, children, }: {
+    item: BreadcrumbItemProp;
+    children: ReactElement<{
+        className?: string;
+    }>;
+}): import("react").JSX.Element;

package/dist/components/layout/breadcrumb-ellipsis.js

@@ -0,0 +1,28 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, useRef } from "react";
+import { cn } from "../../lib/utils.js";
+import { EllipsisTooltip } from "../feedback/tooltip.js";
+function trailEllipsis(items) {
+  return items.some((item) => item.ellipsis) ? "" : void 0;
+}
+function BreadcrumbCrumbText({
+  item,
+  children
+}) {
+  const anchorRef = useRef(null);
+  if (!item.ellipsis) return children;
+  const tooltip = typeof item.ellipsis === "object" && "tooltip" in item.ellipsis ? item.ellipsis.tooltip === true ? item.label : item.ellipsis.tooltip : item.label;
+  const hasTooltip = tooltip !== void 0 && tooltip !== null && tooltip !== false && tooltip !== "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloneElement(children, {
+      ref: anchorRef,
+      className: cn(children.props.className, "ui-breadcrumb-ellipsis")
+    }),
+    hasTooltip ? /* @__PURE__ */ jsx(EllipsisTooltip, { anchorRef, title: tooltip }) : null
+  ] });
+}
+export {
+  BreadcrumbCrumbText,
+  trailEllipsis
+};

package/dist/components/layout/breadcrumb.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { BreadcrumbCrumbText, trailEllipsis } from "./breadcrumb-ellipsis.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,12 +18,20 @@ function Breadcrumb({
 }) {
   const { t } = useTranslation();
   const separatorNode = separator === void 0 ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) : separator;
-  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel ?? t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel ?? t("navigation.breadcrumb.ariaLabel"), className: "ui-breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", "data-ellipsis": trailEllipsis(items), children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
-      renderBreadcrumbSegment({ item, index, isLast, items, itemRender, LinkComponent }),
-      !isLast ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: separatorNode }) : null
-    ] }, item.to ?? index);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "ui-breadcrumb-item",
+        "data-ellipsis": item.ellipsis ? "" : void 0,
+        children: [
+          renderBreadcrumbSegment({ item, index, isLast, items, itemRender, LinkComponent }),
+          !isLast ? /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-separator", "aria-hidden": "true", children: separatorNode }) : null
+        ]
+      },
+      item.to ?? index
+    );
   }) }) });
 }
 function renderBreadcrumbSegment({
@@ -54,9 +63,9 @@ function renderBreadcrumbSegment({
     ] });
   }
   if (item.to && !isLast) {
-    return /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label });
+    return /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx(LinkComponent, { href: item.to, to: item.to, className: "ui-breadcrumb-link", children: item.label }) });
   }
-  return /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label });
+  return /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx("span", { className: "ui-breadcrumb-current", "aria-current": isLast ? "page" : void 0, children: item.label }) });
 }
 export {
   Breadcrumb

package/dist/components/layout/page-container.js

@@ -5,6 +5,7 @@ import { ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { scrollParent, useInView } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
+import { BreadcrumbCrumbText, trailEllipsis } from "./breadcrumb-ellipsis.js";
 import { densityClass, pageContainerVariantClass, padStyle } from "../../lib/variants.js";
 function useFooterReveal(enabled) {
   const headerRef = useRef(null);
@@ -92,7 +93,7 @@ function PageContainerRoot({
                 {
                   "aria-label": breadcrumbLabel ?? breadcrumbAriaLabel ?? t("navigation.breadcrumb.ariaLabel"),
                   className: "ui-breadcrumb",
-                  children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", children: breadcrumb.map((item, i) => {
+                  children: /* @__PURE__ */ jsx("ol", { className: "ui-breadcrumb-list", "data-ellipsis": trailEllipsis(breadcrumb), children: breadcrumb.map((item, i) => {
                     const isLast = i === breadcrumb.length - 1;
                     return (
                       // `--space-inline-xs` gap the previous `.ui-inline-xs` gave, and it brings
@@ -100,25 +101,33 @@ function PageContainerRoot({
                       // longer carries a `size-3` literal. It also drops `.ui-inline-xs`'s
                       // `flex-wrap: wrap` — a crumb must not break between its label and its
                       // chevron; the LIST wraps instead, exactly as <Breadcrumb> already behaves.
-                      /* @__PURE__ */ jsxs("li", { className: "ui-breadcrumb-item", children: [
-                        item.to && !isLast ? /* @__PURE__ */ jsx(
-                          LinkComponent,
-                          {
-                            href: item.to,
-                            to: item.to,
-                            className: "hover:text-foreground hover:underline",
-                            children: item.label
-                          }
-                        ) : /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            className: isLast ? "text-foreground" : "",
-                            "aria-current": isLast ? "page" : void 0,
-                            children: item.label
-                          }
-                        ),
-                        !isLast && /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
-                      ] }, i)
+                      /* @__PURE__ */ jsxs(
+                        "li",
+                        {
+                          className: "ui-breadcrumb-item",
+                          "data-ellipsis": item.ellipsis ? "" : void 0,
+                          children: [
+                            item.to && !isLast ? /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx(
+                              LinkComponent,
+                              {
+                                href: item.to,
+                                to: item.to,
+                                className: "hover:text-foreground hover:underline",
+                                children: item.label
+                              }
+                            ) }) : /* @__PURE__ */ jsx(BreadcrumbCrumbText, { item, children: /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: isLast ? "text-foreground" : "",
+                                "aria-current": isLast ? "page" : void 0,
+                                children: item.label
+                              }
+                            ) }),
+                            !isLast && /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+                          ]
+                        },
+                        i
+                      )
                     );
                   }) })
                 }

package/dist/components/query/infinite-query-state.d.ts

@@ -27,4 +27,4 @@ export declare function flattenItemPages<TItem>(data: {
  */
 export declare function InfiniteQueryState<TPage, TFlat = TPage extends {
     items: (infer TItem)[];
-} ? TItem[] : unknown>({ query, skeleton, empty, flatten, isEmpty, errorRenderer, showRetry, onRetry, onAuthError, loadingMore, loadMore, showLoadMore, children, }: InfiniteQueryStateProp<TPage, TFlat>): React.JSX.Element;
+} ? TItem[] : unknown>({ query, skeleton, empty, flatten, isEmpty, errorRenderer, showRetry, onRetry, onAuthError, loadingMore, loadMore, loadMoreLabel, showLoadMore, children, }: InfiniteQueryStateProp<TPage, TFlat>): React.JSX.Element;

package/dist/components/query/infinite-query-state.js

@@ -26,6 +26,7 @@ function InfiniteQueryState({
   onAuthError,
   loadingMore,
   loadMore,
+  loadMoreLabel,
   showLoadMore = true,
   children
 }) {
@@ -73,7 +74,7 @@ function InfiniteQueryState({
       size: "sm",
       disabled: query.isFetchingNextPage,
       onClick: () => void query.fetchNextPage(),
-      children: query.isFetchingNextPage ? t("common.working") : t("query.loadMore")
+      children: query.isFetchingNextPage ? t("common.working") : loadMoreLabel ?? t("query.loadMore")
     }
   ) }) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "31.5.0",
+  "version": "31.7.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/i18n/messages/en.json

@@ -350,7 +350,8 @@
     },
     "progress": {
       "ariaLabel": "Progress",
-      "breakdownSeparator": ", "
+      "breakdownSeparator": ", ",
+      "remainder": "Remaining"
     },
     "scrollArea": {
       "region": "Scrollable region"
@@ -360,7 +361,8 @@
       "collapse": "Collapse",
       "loading": "Loading child nodes…",
       "empty": "Nothing to show",
-      "selected": "Selected"
+      "selected": "Selected",
+      "filterMatch": "Matches the filter"
     },
     "thoughtChain": {
       "label": "Reasoning steps",
@@ -585,7 +587,20 @@
     "sortDescending": "Sort descending",
     "sortCancel": "Cancel sort",
     "selectColumn": "Select",
-    "scrollRegion": "Scrollable table"
+    "scrollRegion": "Scrollable table",
+    "selectPage": "Select all rows on this page",
+    "matchingPage": {
+      "one": "{count} row on this page is selected.",
+      "other": "All {count} rows on this page are selected."
+    },
+    "matchingSelectAll": {
+      "one": "Select {count} matching row",
+      "other": "Select all {count} matching rows"
+    },
+    "matchingSelected": {
+      "one": "{count} matching row is selected.",
+      "other": "All {count} matching rows are selected."
+    }
   },
   "dataGrid": {
     "search": "Search",

package/dist/i18n/messages/ja.json

@@ -343,7 +343,8 @@
     },
     "progress": {
       "ariaLabel": "進捗",
-      "breakdownSeparator": "、"
+      "breakdownSeparator": "、",
+      "remainder": "残り"
     },
     "scrollArea": {
       "region": "スクロール可能な領域"
@@ -353,7 +354,8 @@
       "collapse": "折りたたむ",
       "loading": "子ノードを読み込み中…",
       "empty": "表示する項目がありません",
-      "selected": "選択中"
+      "selected": "選択中",
+      "filterMatch": "フィルターに一致"
     },
     "thoughtChain": {
       "label": "思考の手順",
@@ -572,7 +574,11 @@
     "sortDescending": "降順に並べ替え",
     "sortCancel": "並べ替えを解除",
     "selectColumn": "選択",
-    "scrollRegion": "スクロール可能な表"
+    "scrollRegion": "スクロール可能な表",
+    "selectPage": "このページの行をすべて選択",
+    "matchingPage": "このページの{count}件を選択中",
+    "matchingSelectAll": "{count}件すべてを選択",
+    "matchingSelected": "{count}件すべてを選択中"
   },
   "dataGrid": {
     "search": "検索",

package/dist/i18n/messages/vi.json

@@ -344,7 +344,8 @@
     },
     "progress": {
       "ariaLabel": "Tiến độ",
-      "breakdownSeparator": ", "
+      "breakdownSeparator": ", ",
+      "remainder": "Còn lại"
     },
     "scrollArea": {
       "region": "Vùng có thể cuộn"
@@ -354,7 +355,8 @@
       "collapse": "Thu gọn",
       "loading": "Đang tải nút con…",
       "empty": "Không có gì để hiển thị",
-      "selected": "Đã chọn"
+      "selected": "Đã chọn",
+      "filterMatch": "Khớp bộ lọc"
     },
     "thoughtChain": {
       "label": "Các bước suy luận",
@@ -573,7 +575,11 @@
     "sortDescending": "Sắp xếp giảm dần",
     "sortCancel": "Bỏ sắp xếp",
     "selectColumn": "Chọn",
-    "scrollRegion": "Bảng có thể cuộn"
+    "scrollRegion": "Bảng có thể cuộn",
+    "selectPage": "Chọn tất cả các dòng trên trang này",
+    "matchingPage": "Đã chọn {count} dòng trên trang này.",
+    "matchingSelectAll": "Chọn tất cả {count} dòng khớp",
+    "matchingSelected": "Đã chọn tất cả {count} dòng khớp."
   },
   "dataGrid": {
     "search": "Tìm kiếm",

package/dist/lib/hooks.d.ts

@@ -53,12 +53,16 @@ export declare function useScrollableRegionTabIndex(element: HTMLElement | null)
  * overflows. Reading it as "no overflow" would strand the overflow from every keyboard user — a
  * worse failure than an extra tab stop — so an unmeasured box counts as scrolling.
  *
- * `axis` is the box's OWN `overflow`, not a preference: an axis it does not scroll on is `hidden`
- * there, so overflow on that axis is CLIPPED rather than reachable, and measuring it would keep a
- * tab stop that scrolls nothing. `ScrollArea`'s `orientation` is exactly this union.
+ * `axis` names the axes the caller KNOWS scroll; an axis whose computed `overflow` is `auto` or
+ * `scroll` is measured as well, because the box scrolls there whatever the caller asked. An axis
+ * that is `hidden` CLIPS rather than scrolls, so it is never measured — that would keep a tab stop
+ * that scrolls nothing. `ScrollArea`'s `orientation` is exactly this union.
  */
 export declare function useScrollsOnAxis(ref: RefObject<HTMLElement | null>, enabled: boolean, axis: "horizontal" | "vertical" | "both"): boolean;
-/** A table's wrapper scrolls on one axis only, so it asks the one question it has (gh#817). */
+/**
+ * The horizontal question a table asks (gh#817). The block axis is measured TOO whenever the box's
+ * computed `overflow-y` scrolls — `overflow-x: auto` computes it to `auto` — see `useScrollsOnAxis`.
+ */
 export declare function useScrollsHorizontally(ref: RefObject<HTMLElement | null>, enabled: boolean): boolean;
 /**
  * Nearest scrollable ancestor — the box an element actually scrolls inside — else `null`, which is

package/dist/lib/hooks.js

@@ -111,9 +111,12 @@ function useScrollsOnAxis(ref, enabled, axis) {
   useEffect(() => {
     const el = ref.current;
     if (!enabled || !el) return void 0;
-    const overflows = (client, scroll) => client === 0 || scroll - client > 1;
+    const overflows = (client, scroll) => scroll - client > 1;
+    const scrollsOn = (value) => value === "auto" || value === "scroll";
     const update = (sync) => {
-      const next = axis !== "vertical" && overflows(el.clientWidth, el.scrollWidth) || axis !== "horizontal" && overflows(el.clientHeight, el.scrollHeight);
+      const unmeasured = el.clientWidth === 0 && el.clientHeight === 0;
+      const style = getComputedStyle(el);
+      const next = unmeasured || (axis !== "vertical" || scrollsOn(style.overflowX)) && overflows(el.clientWidth, el.scrollWidth) || (axis !== "horizontal" || scrollsOn(style.overflowY)) && overflows(el.clientHeight, el.scrollHeight);
       if (next && sync) flushSync(() => setScrolls(true));
       else setScrolls(next);
     };

package/dist/lib/tree.d.ts

@@ -50,4 +50,27 @@ export declare function filterVisibleTree(options: NormalizedTreeOption[], query
 }[];
 export declare function collectAllExpandableKeys(options: NormalizedTreeOption[]): string[];
 export declare function findNodeByValue(options: NormalizedTreeOption[], value: string): NormalizedTreeOption | undefined;
+/**
+ * rc-tree gives up on a node after this many rejected `loadData` calls and treats it as loaded
+ * (rc-tree `MAX_RETRY_TIMES`), so a permanently broken endpoint cannot be hammered forever.
+ */
+export declare const MAX_LAZY_LOAD_RETRIES = 10;
+/**
+ * The lazy-children ledger shared by `Tree`, `TreeSelect` and `Cascader` — rc-tree's
+ * `loadedKeys` / `loadingKeys` / `loadingRetryTimes`, in one place (gh#1041).
+ *
+ * A key is asked for at most once while in flight and never again once it RESOLVED. A REJECTED
+ * load is not "loaded": the key leaves the in-flight set and the next expand asks again, until
+ * `MAX_LAZY_LOAD_RETRIES` failures. The old per-component ledgers recorded the key before the
+ * promise settled and never cleared it, so one network blip left a branch unloadable for the life
+ * of the component.
+ */
+export type LazyLoadLedger = {
+    /**
+     * Call `load` for `key` unless it is in flight or already loaded. A synchronous throw counts
+     * as a rejection. `onSettle(ok)` runs once the load settles. Returns whether `load` was called.
+     */
+    run: (key: string, load: () => void | Promise<void>, onSettle?: (ok: boolean) => void) => boolean;
+};
+export declare function createLazyLoadLedger(): LazyLoadLedger;
 export {};

package/dist/lib/tree.js

@@ -136,10 +136,39 @@ function findNodeByValue(options, value) {
   }
   return void 0;
 }
+const MAX_LAZY_LOAD_RETRIES = 10;
+function createLazyLoadLedger() {
+  const loaded = /* @__PURE__ */ new Set();
+  const inFlight = /* @__PURE__ */ new Set();
+  const failures = /* @__PURE__ */ new Map();
+  return {
+    run(key, load, onSettle) {
+      if (loaded.has(key) || inFlight.has(key)) return false;
+      inFlight.add(key);
+      new Promise((resolve) => resolve(load())).then(
+        () => {
+          inFlight.delete(key);
+          loaded.add(key);
+          onSettle?.(true);
+        },
+        () => {
+          inFlight.delete(key);
+          const count = (failures.get(key) ?? 0) + 1;
+          failures.set(key, count);
+          if (count >= MAX_LAZY_LOAD_RETRIES) loaded.add(key);
+          onSettle?.(false);
+        }
+      );
+      return true;
+    }
+  };
+}
 export {
+  MAX_LAZY_LOAD_RETRIES,
   collectAllExpandableKeys,
   collectAllPaths,
   collectLeafPaths,
+  createLazyLoadLedger,
   filterTreeOptions,
   filterVisibleTree,
   findNodeByValue,