@godxjp/ui 31.5.0 → 31.7.0

package/docs/i18n/messages/vi.json

@@ -6,7 +6,18 @@
     "breakDescription": "Định danh không có chỗ ngắt — địa chỉ email, mã giảm giá, ID đăng nhập — dùng break=\"anywhere\", và cột vẫn nằm gọn trong bề ngang màn hình kể cả trong ô của bảng. whitespace=\"pre-wrap\" dành cho ký tự xuống dòng do người nhập; nó không ngắt được một định danh trong ô bảng.",
     "breakColumnOwner": "Phụ trách",
     "breakColumnEmail": "Địa chỉ email",
-    "breakSampleName": "Sato"
+    "breakSampleName": "Sato",
+    "ellipsisTitle": "ellipsis · toàn văn trong tooltip khi bị cắt",
+    "ellipsisDescription": "ellipsis={{ tooltip: true }} giữ một dòng và hiện toàn văn khi rê chuột và khi bàn phím đưa tiêu điểm tới điều khiển chứa nó (liên kết, mục cây, nút sắp xếp). Tiêu đề vừa chỗ thì không có tooltip, và Text không bao giờ tự thành một điểm dừng Tab.",
+    "ellipsisPlain": "Text thường",
+    "ellipsisLink": "Text asChild · liên kết",
+    "ellipsisTree": "titleRender của Tree",
+    "ellipsisTable": "Bộ kiểm thử",
+    "ellipsisBreadcrumb": "Breadcrumb có cắt chữ",
+    "ellipsisCrumbHome": "Trang chủ",
+    "ellipsisLongTitle": "Kiểm thử tích hợp quý 3 · mô-đun thanh toán · kịch bản xuất lại hoá đơn và rà soát tiêu chí nghiệm thu",
+    "ellipsisShortTitle": "Kiểm thử nhanh đăng nhập",
+    "ellipsisLongHeader": "Tên lần chạy gần nhất (bản ứng viên 2026-09)"
   },
   "themeShowcase": {
     "page": {
@@ -1444,5 +1455,40 @@
     "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"
+      }
+    }
+  },
+  "progressDocs": {
+    "testRun": {
+      "passed": "Đạt",
+      "failed": "Lỗi",
+      "blocked": "Bị chặn",
+      "notRun": "Chưa chạy",
+      "caption": "Bộ kiểm thử hồi quy — {total} ca"
+    }
+  },
+  "breadcrumbExamples": {
+    "ellipsisTitle": "ellipsis · một đoạn dài trên một dòng",
+    "ellipsisDescription": "ellipsis trên một đoạn giữ breadcrumb trên một dòng và cắt nhãn đó bằng \"…\"; toàn văn hiện trong tooltip khi rê chuột và khi liên kết của đoạn nhận tiêu điểm bàn phím. Breadcrumb của antd không có ellipsis theo từng mục — hình dạng lấy theo Typography. breadcrumb của PageContainer nhận cùng trường này.",
+    "ellipsisAria": "Breadcrumb có cắt chữ",
+    "home": "Trang chủ",
+    "longSuite": "Kiểm thử tích hợp quý 3 · mô-đun thanh toán · kịch bản xuất lại hoá đơn",
+    "longSection": "Rà soát tiêu chí nghiệm thu cho bản ứng viên tháng 9/2026"
   }
 }

package/docs/navigation/breadcrumb.tsx

@@ -9,6 +9,7 @@ import {
   CodeBlock,
 } from "@godxjp/ui/data-display";
 import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Breadcrumb } from "@godxjp/ui/layout";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
@@ -25,6 +26,9 @@ const RouterLink = forwardRef<
 });
 
 export default function Demo() {
+  const { t } = useTranslation();
+  const suite = t("breadcrumbExamples.longSuite");
+  const section = t("breadcrumbExamples.longSection");
   return (
     <PageContainer
       title="Breadcrumb"
@@ -177,6 +181,26 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        {/* gh#1046 — a long segment cut to one line, the full label in a tooltip. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("breadcrumbExamples.ellipsisTitle")}</CardTitle>
+            <CardDescription>{t("breadcrumbExamples.ellipsisDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div id="breadcrumb-ellipsis">
+              <Breadcrumb
+                ariaLabel={t("breadcrumbExamples.ellipsisAria")}
+                items={[
+                  { label: t("breadcrumbExamples.home"), to: "/" },
+                  { label: suite, to: "/suites/412", ellipsis: true },
+                  { label: section, ellipsis: true },
+                ]}
+              />
+            </div>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

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.7.0",
+  "godxUiMcp": "31.7.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({