@godxjp/ui 31.5.0 → 31.6.0

package/docs/data-display/data-table/examples/server-paged.tsx

@@ -26,6 +26,10 @@ import { Download, FileText, LayoutDashboard, Plus, ReceiptText } from "lucide-r
  * showTotal, onChange }}` — the real Pagination, total beside the page numbers, bottom-end. The
  * table is compact, so the pager is `size="sm"` and sits on the same control step as the toolbar
  * buttons above it. `data` is only the current page; the footer offers ceil(total / pageSize).
+ *
+ * Selection on a server-paged list (gh#1036): the header checkbox ticks THIS PAGE, and says so.
+ * Once the page is fully ticked, `rowSelection.matching` offers every matching row; while that is
+ * chosen the bulk action sends the query's filter to the server instead of a list of ids.
  */
 const sections: SidebarSectionProp[] = [
   {
@@ -86,6 +90,8 @@ export default function Demo() {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const rows = useMemo(() => fetchPage(page, pageSize), [page, pageSize]);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const [allMatching, setAllMatching] = useState(false);
 
   return (
     <AppShell
@@ -126,6 +132,17 @@ export default function Demo() {
               data={rows}
               columns={columns}
               getRowId={(row) => row.id}
+              rowSelection={{
+                selectedRowKeys: selectedKeys,
+                onChange: (keys) => {
+                  setSelectedKeys(keys);
+                },
+                matching: {
+                  total: SERVER_TOTAL,
+                  selected: allMatching,
+                  onSelectedChange: setAllMatching,
+                },
+              }}
               pagination={{
                 total: SERVER_TOTAL,
                 current: page,
@@ -144,6 +161,12 @@ export default function Demo() {
                     <Download />
                     エクスポート
                   </Button>
+                  {/* While "all matching" is chosen the count is the server's, not the page's. */}
+                  <DataTable.BulkActions count={allMatching ? SERVER_TOTAL : undefined}>
+                    <Button size="sm" variant="outline">
+                      Mark as paid
+                    </Button>
+                  </DataTable.BulkActions>
                 </Flex>
                 <DataTable.ViewOptions />
               </DataTable.Toolbar>

package/docs/data-display/data-table/index.md

@@ -5,3 +5,5 @@ The admin list primitive — sticky header, sorting, bulk selection, density tog
 See the "Approval queue" example.
 
 See the "Selectable inbox" example for a `ListRow` hosted in a selectable DataTable: mark that column `flush: true` so the cell drops its own padding and the ListRow owns the inset (gh#1016).
+
+See the "Server paged" example for selection on a server-paged list (gh#1036). `rowSelection.selectAllLabel` names the header checkbox; `rowSelection.matching={{ total, selected, onSelectedChange }}` adds the "Select all N matching rows" banner once the page is fully ticked. antd has no equivalent of `matching` — it is the Gmail / Jira / GitHub pattern, and the one deliberate deviation from antd's `rowSelection` here. While `selected` is true every row of any page shows ticked; send the query's filter to the server instead of the ids. Unticking a row or "Clear selection" reports `false`. `selections` also takes antd's `DataTable.SELECTION_ALL` / `SELECTION_INVERT` / `SELECTION_NONE` mixed with custom entries.

package/docs/data-display/timeline.tsx

@@ -230,6 +230,39 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* sticky sits OUTSIDE a Card on purpose: Card clips (`overflow: hidden`), and a clipping
+            ancestor becomes the box the header sticks to — the same limit as antd Table sticky. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>sticky · the axis stays on screen (gh#1044)</CardTitle>
+            <CardDescription>
+              A long schedule scrolled by the page, placed as a page section rather than inside a
+              Card (a Card clips, which would pin the header to the card instead of the viewport).
+              With sticky the band and tick rows stay at the top of the viewport — offsetHeader
+              clears a fixed app topbar — and still scroll sideways with the body.
+            </CardDescription>
+          </CardHeader>
+        </Card>
+        <RangeTimeline
+          data-testid="range-timeline-sticky"
+          label={t("rangeTimeline.schedule")}
+          sticky={{ offsetHeader: 0 }}
+          today={8}
+          bands={[{ label: monthLabel(8), units: 30 }]}
+          columns={Array.from({ length: 30 }, (_, index) => ({
+            label: new Intl.NumberFormat(locale).format(index + 1),
+            units: 1,
+          }))}
+          rows={Array.from({ length: 40 }, (_, index) => ({
+            id: `task-${index + 1}`,
+            label: `Task ${index + 1}`,
+            start: index % 20,
+            end: (index % 20) + 5,
+            startLabel: dayLabel((index % 20) + 1),
+            endLabel: dayLabel((index % 20) + 6),
+          }))}
+        />
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>月をまたぐ日単位の軸（bands）</CardTitle>

package/docs/data-display/tree.tsx

@@ -12,7 +12,9 @@ import {
   Tree,
   type TreeNodeProp,
 } from "@godxjp/ui/data-display";
+import { SearchInput } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
 import { Building2, FolderTree, ShieldCheck } from "lucide-react";
 
@@ -167,7 +169,85 @@ function attachChildren(nodes: Department[], id: string, children: Department[])
   );
 }
 
+// ── card 4 · a long lazy level (height + virtual · filterTreeNode · retry) ────────────────────
+// The godx-task shape (gh#1041-1043): 2 suites → 28 sections → up to 421 cases per section,
+// fetched when a section opens. antd's Tree has no "load more" node — `height` keeps a 421-row
+// level to a few dozen DOM rows — so the one paged section below composes its own: a leaf whose
+// selection asks for the next page. It is a real treeitem, so the keyboard reaches it.
+const CASE_PAGE = 100;
+// The data carries VALUES only; every visible label is derived from the value through `t()` at
+// render (`labelSuiteTree`), so the demo follows the active locale like the library's chrome does.
+const suites: TreeNodeProp[] = [1, 2].map((suiteNumber) => ({
+  value: `suite-${suiteNumber}`,
+  label: "",
+  children: Array.from({ length: 14 }, (_, sectionIndex) => ({
+    value: `suite-${suiteNumber}/section-${sectionIndex + 1}`,
+    label: "",
+    isLeaf: false,
+  })),
+}));
+
+function caseNodes(section: string, from: number, to: number): TreeNodeProp[] {
+  return Array.from({ length: to - from }, (_, index) => ({
+    value: `${section}/case-${from + index + 1}`,
+    label: "",
+    isLeaf: true,
+  }));
+}
+
+function withChildren(
+  nodes: TreeNodeProp[],
+  value: string,
+  children: TreeNodeProp[],
+): TreeNodeProp[] {
+  return nodes.map((node) =>
+    node.value === value
+      ? { ...node, children }
+      : node.children
+        ? { ...node, children: withChildren(node.children, value, children) }
+        : node,
+  );
+}
+
+function labelSuiteTree(
+  nodes: TreeNodeProp[],
+  t: ReturnType<typeof useTranslation>["t"],
+): TreeNodeProp[] {
+  return nodes.map((node) => {
+    const value = node.value;
+    let label: string;
+    if (value.endsWith("::more")) {
+      label = t("treeDocs.longList.loadMore", { count: CASE_PAGE });
+    } else if (/\/case-\d+$/.test(value)) {
+      label = t("treeDocs.longList.case", {
+        number: String(Number(value.split("case-").pop())).padStart(3, "0"),
+      });
+    } else if (/\/section-\d+$/.test(value)) {
+      const number = Number(value.split("section-").pop());
+      const key =
+        value === "suite-1/section-2"
+          ? "treeDocs.longList.sectionFailing"
+          : value === "suite-1/section-3"
+            ? "treeDocs.longList.sectionPaged"
+            : "treeDocs.longList.section";
+      label = t(key, { number, count: CASE_PAGE });
+    } else {
+      label = t(
+        value === "suite-1"
+          ? "treeDocs.longList.suiteIntegration"
+          : "treeDocs.longList.suiteAcceptance",
+      );
+    }
+    return {
+      ...node,
+      label,
+      children: node.children ? labelSuiteTree(node.children, t) : undefined,
+    };
+  });
+}
+
 export default function Demo() {
+  const { t } = useTranslation();
   // Card 1 — checks are controlled so the readout beside the tree can never disagree with it.
   const [granted, setGranted] = React.useState<string[]>(["billing.invoice.read"]);
   // Card 2 — selection is controlled and drives the detail pane.
@@ -179,6 +259,45 @@ export default function Demo() {
   // Card 5 — independent (strict) checks, and a multi-select tree.
   const [strictChecks, setStrictChecks] = React.useState<string[]>(["people", "people.read"]);
   const [picked, setPicked] = React.useState<string[]>(["billing", "audit"]);
+  // Card 4 — the long lazy level.
+  const [suiteTree, setSuiteTree] = React.useState<TreeNodeProp[]>(suites);
+  const [caseQuery, setCaseQuery] = React.useState("");
+  // "" (not undefined) keeps the tree CONTROLLED while nothing is open.
+  const [openCase, setOpenCase] = React.useState("");
+  const failedOnce = React.useRef(false);
+
+  const loadSection = async (node: TreeNodeProp) => {
+    await new Promise((resolve) => setTimeout(resolve, 600));
+    if (node.value === "suite-1/section-2" && !failedOnce.current) {
+      failedOnce.current = true;
+      // Rejected: the branch folds back shut, and opening it again asks again (gh#1041).
+      throw new Error("network");
+    }
+    const paged = node.value === "suite-1/section-3";
+    const children = caseNodes(node.value, 0, paged ? CASE_PAGE : 421);
+    if (paged) {
+      children.push({
+        value: `${node.value}::more`,
+        label: "",
+        isLeaf: true,
+      });
+    }
+    setSuiteTree((current) => withChildren(current, node.value, children));
+  };
+
+  const loadMoreCases = (moreValue: string) => {
+    const section = moreValue.replace(/::more$/, "");
+    setSuiteTree((current) => {
+      const sectionNode = current
+        .flatMap((suite) => suite.children ?? [])
+        .find((node) => node.value === section);
+      const loaded = (sectionNode?.children ?? []).filter((node) => !node.value.endsWith("::more"));
+      const next = caseNodes(section, loaded.length, Math.min(421, loaded.length + CASE_PAGE));
+      const more =
+        loaded.length + next.length < 421 ? [{ value: moreValue, label: "", isLeaf: true }] : [];
+      return withChildren(current, section, [...loaded, ...next, ...more]);
+    });
+  };
 
   const loadDepartment = async (node: TreeNodeProp) => {
     // A real delay, so the Skeleton row and aria-busy are OBSERVABLE rather than theoretical.
@@ -365,6 +484,41 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("treeDocs.longList.title")}</CardTitle>
+            <CardDescription>{t("treeDocs.longList.description")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              <SearchInput
+                ariaLabel={t("treeDocs.longList.searchLabel")}
+                placeholder={t("treeDocs.longList.searchPlaceholder")}
+                value={caseQuery}
+                onValueChange={setCaseQuery}
+                onSearch={() => {}}
+              />
+              <Tree
+                aria-label={t("treeDocs.longList.treeLabel")}
+                treeData={labelSuiteTree(suiteTree, t)}
+                height={360}
+                defaultExpandedValues={["suite-1"]}
+                loadData={loadSection}
+                filterTreeNode={(node) =>
+                  caseQuery.trim() !== "" && String(node.label).includes(caseQuery.trim())
+                }
+                value={openCase}
+                onValueChange={(next) => {
+                  // The "load more" leaf is an action, not a selection — it never stays selected,
+                  // so choosing it again always asks for the next page.
+                  if (typeof next === "string" && next.endsWith("::more")) loadMoreCases(next);
+                  else setOpenCase((next as string | undefined) ?? "");
+                }}
+              />
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>checkStrictly と multiple（チェックと選択は別の軸）</CardTitle>

package/docs/data-entry/branch-scope-picker.tsx

@@ -54,7 +54,12 @@ export default function Demo() {
             </CardHeader>
             <CardContent>
               <FormField label="適用範囲" required>
-                <BranchScopePicker branches={BRANCHES} value={scope} onValueChange={setScope} />
+                <BranchScopePicker
+                  branches={BRANCHES}
+                  value={scope}
+                  onValueChange={setScope}
+                  notFoundContent="No branch matches that search"
+                />
               </FormField>
             </CardContent>
           </Card>

package/docs/data-entry/record-picker.tsx

@@ -109,6 +109,7 @@ export default function Demo() {
                 value={owner}
                 onValueChange={(v) => setOwner(v as string)}
                 dialogTitle="Choose an owner"
+                notFoundContent="No one matches that name"
               />
               <Text as="p" size="2xs" tone="muted" tabular>
                 value: {JSON.stringify(owner)}

package/docs/data-entry/transfer.tsx

@@ -104,6 +104,7 @@ export default function Demo() {
               defaultValue={[]}
               showSearch
               pagination={{ pageSize: 3 }}
+              locale={{ notFoundContent: ["No matching accounts", "Nothing selected yet"] }}
               name="accounts[]"
             />
           </CardContent>

package/docs/i18n/messages/en.json

@@ -1450,5 +1450,24 @@
     "nameColumn": "Name",
     "inviteTitle": "Send invitation",
     "send": "Send"
+  },
+  "treeDocs": {
+    "longList": {
+      "title": "Long child lists (height · virtual · filterTreeNode)",
+      "description": "2 suites → 28 sections → up to 421 cases. With height the tree scrolls inside that height and renders only the rows in view (antd height + virtual). Nodes matching the search are highlighted by filterTreeNode, never hidden. Section 2 fails its first loadData and fetches again when reopened. Section 3 shows how to compose a paged API: selecting the last leaf loads the next 100.",
+      "searchLabel": "Search cases",
+      "searchPlaceholder": "Highlight by case name (e.g. 042)",
+      "treeLabel": "Test suites",
+      "suiteIntegration": "Integration tests",
+      "suiteAcceptance": "Acceptance tests",
+      "section": "Section {number}",
+      "sectionFailing": "Section {number} (first load fails)",
+      "sectionPaged": "Section {number} ({count} at a time)",
+      "case": "Case {number}",
+      "loadMore": {
+        "one": "Load {count} more",
+        "other": "Load {count} more"
+      }
+    }
   }
 }

package/docs/i18n/messages/ja.json

@@ -1444,5 +1444,23 @@
     "nameColumn": "氏名",
     "inviteTitle": "招待を送信",
     "send": "送信"
+  },
+  "treeDocs": {
+    "longList": {
+      "title": "長い子リスト（height · virtual · filterTreeNode）",
+      "description": "2 スイート → 28 セクション → 最大 421 ケース。height を渡すとツリー自身がその高さでスクロールし、見えている行だけを描画します（antd の height + virtual）。検索語に一致するノードは filterTreeNode で強調されるだけで、隠れません。セクション 2 は初回の loadData が失敗し、もう一度開くと再取得します。セクション 3 は API がページングされている場合の組み立て例で、末尾の葉を選ぶと次の 100 件を読み込みます。",
+      "searchLabel": "ケースを検索",
+      "searchPlaceholder": "ケース名で強調（例: 042）",
+      "treeLabel": "テストスイート",
+      "suiteIntegration": "結合テスト",
+      "suiteAcceptance": "受入テスト",
+      "section": "セクション {number}",
+      "sectionFailing": "セクション {number}（初回の読み込みが失敗）",
+      "sectionPaged": "セクション {number}（{count} 件ずつ）",
+      "case": "ケース {number}",
+      "loadMore": {
+        "other": "さらに {count} 件を読み込む"
+      }
+    }
   }
 }

package/docs/i18n/messages/vi.json

@@ -1444,5 +1444,23 @@
     "nameColumn": "Họ tên",
     "inviteTitle": "Gửi lời mời",
     "send": "Gửi"
+  },
+  "treeDocs": {
+    "longList": {
+      "title": "Danh sách con dài (height · virtual · filterTreeNode)",
+      "description": "2 bộ → 28 mục → tối đa 421 ca. Với height, cây cuộn trong chiều cao đó và chỉ vẽ các hàng đang thấy (antd height + virtual). Nút khớp từ tìm kiếm được filterTreeNode làm nổi bật, không bị ẩn. Mục 2 thất bại ở lần loadData đầu và tải lại khi mở lần nữa. Mục 3 là ví dụ ghép cho API phân trang: chọn lá cuối để tải thêm 100 ca.",
+      "searchLabel": "Tìm ca kiểm thử",
+      "searchPlaceholder": "Làm nổi bật theo tên ca (vd: 042)",
+      "treeLabel": "Bộ kiểm thử",
+      "suiteIntegration": "Kiểm thử tích hợp",
+      "suiteAcceptance": "Kiểm thử chấp nhận",
+      "section": "Mục {number}",
+      "sectionFailing": "Mục {number} (lần tải đầu thất bại)",
+      "sectionPaged": "Mục {number} (mỗi lần {count} ca)",
+      "case": "Ca {number}",
+      "loadMore": {
+        "other": "Tải thêm {count} ca"
+      }
+    }
   }
 }

package/docs/query/infinite-query-state.tsx

@@ -54,6 +54,7 @@ function Block() {
       flatten={flattenItemPages}
       isEmpty={(items) => items.length === 0}
       empty={<EmptyState title="アクティビティがありません" />}
+      loadMoreLabel="Show older activity"
     >
       {(items) => (
         <Timeline
@@ -80,7 +81,10 @@ export default function Demo() {
           <Card>
             <CardHeader>
               <CardTitle level={2}>アクティビティ</CardTitle>
-              <CardDescription>Click 「もっと見る」 to append the next page.</CardDescription>
+              <CardDescription>
+                Click “Show older activity” to append the next page. loadMoreLabel renames the
+                built-in button; its pending state stays the component&apos;s.
+              </CardDescription>
             </CardHeader>
             <CardContent>
               <Block />

package/docs/roadmap/tree-components.md

@@ -79,7 +79,8 @@ that every Ant-shaped app reaches for was never built.
 | Density | — | `size: xs \| sm \| lg` (`md` is the default, never `"default"`) |
 | Directory variant | `<DirectoryTree>` | `variant="directory"` |
 | Drag & drop | `draggable` | **out of scope for v1** — file a follow-up issue |
-| Virtual scroll | `virtual` / `height` | **out of scope for v1** — cap with `ScrollArea`; file a follow-up issue |
+| Virtual scroll | `virtual` / `height` | `height` + `virtual` (gh#1042) — windowed rows are a flat run of treeitems; antd has no "load more" node, so none is shipped |
+| Match highlight | `filterTreeNode` | `filterTreeNode` (gh#1043) — `data-filter-node="true"` for antd's `filter-node` class, plus an sr-only "matches" |
 
 Plus the house rules: forward `ref`, spread `...props`, accept `className` + `id`, export
 `TreeProp` and `TreeProp as TreeProps` from `src/props/components/data-display.prop.ts`, and

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "31.5.0",
-  "godxUiMcp": "31.5.0",
+  "version": "31.6.0",
+  "godxUiMcp": "31.6.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/scripts/ui-audit.mjs

@@ -1916,6 +1916,16 @@ for (const dir of SCAN_DIRS) {
        */
       const stack = [];
       const bareByParent = new Map();
+      /*
+       * Every exported tag that renders @godxjp/ui's <Form> around its children (gh#1039). A field
+       * under any of them has the Form layout context, so it must count like a literal <Form>.
+       * `FormRoot` (@godxjp/ui/form, src/form/form-root.tsx) wraps its <form> in <Form asChild>
+       * whenever a layout prop is set, and is the form shell with one stacked layout otherwise.
+       * Pagination also renders <Form>, but around its own controls, not a consumer's fields. Add a
+       * tag here when another exported wrapper starts rendering <Form> around children.
+       */
+      const FORM_TAGS = new Set(["Form", "FormRoot"]);
+      const formOpenTag = new RegExp(`<(${[...FORM_TAGS].join("|")})(?=[\\s>])([^>]*)>`, "g");
       let formDepth = 0;
       for (const m of scanContent.matchAll(
         /(?<![\w.$])<(\/?)([A-Za-z][\w.]*)(?=[\s>/])([^<>]*?(?:\{[^{}]*\}[^<>]*?)*)(\/?)>/g,
@@ -1928,7 +1938,7 @@ for (const dir of SCAN_DIRS) {
               break;
             }
           }
-          if (tag === "Form") formDepth = Math.max(0, formDepth - 1);
+          if (FORM_TAGS.has(tag)) formDepth = Math.max(0, formDepth - 1);
           continue;
         }
         if (tag === "FormField" && formDepth === 0) {
@@ -1937,7 +1947,7 @@ for (const dir of SCAN_DIRS) {
         }
         if (selfClose) continue;
         stack.push({ tag, index: m.index });
-        if (tag === "Form") formDepth += 1;
+        if (FORM_TAGS.has(tag)) formDepth += 1;
       }
       for (const group of bareByParent.values()) {
         if (group.length < 2) continue;
@@ -1975,9 +1985,9 @@ for (const dir of SCAN_DIRS) {
       for (const m of scanContent.matchAll(/<FormField(?=[\s>])([^>]*)>([\s\S]*?)<\/FormField>/g)) {
         if (!/<Select(?=[\s>/])/.test(m[2]) || /controlWidth=/.test(m[1])) continue;
         const before = scanContent.slice(0, m.index);
-        const lastForm = [...before.matchAll(/<Form(?=[\s>])([^>]*)>/g)].at(-1);
-        const insideForm = lastForm && before.lastIndexOf("</Form>") < lastForm.index;
-        if (insideForm && /controlWidth=/.test(lastForm[1])) continue;
+        const lastForm = [...before.matchAll(formOpenTag)].at(-1);
+        const insideForm = lastForm && before.lastIndexOf(`</${lastForm[1]}>`) < lastForm.index;
+        if (insideForm && /controlWidth=/.test(lastForm[2])) continue;
         const lineNo = lineAt(m.index);
         if (suppressed("select-width-hint", lineNo - 1)) continue;
         findings.push({