@comitor/ui 1.11.0 → 2.0.0

package/README.md

@@ -171,13 +171,21 @@ riêng kèm demo, bảng prop và cạm bẫy của nó:
 | **Tier 2 — composite** · 31 file · `@comitor/ui` | Giá trị thật của gói: pattern lặp ở mọi app, ghép từ nhiều primitive (`DataTable`, `PageHeader`, `Combobox`, `DatePicker`, `StatCard`…) | https://design-system.comitor.ai/composites |
 | **Tier 3 — shell** · 25 file · `@comitor/ui/shell` | Khung ứng dụng workspace × app: sidebar, header, theme, ba trục hiển thị (tương phản · mật độ · cỡ chữ) | https://design-system.comitor.ai/shell |
 | **chart** · 4 file · `@comitor/ui/chart` | Lớp shadcn bọc recharts, cùng ba bản dựng sẵn theo brand. ⚠ Ba wrapper `Comitor*Chart` **mặc định TẮT** hiệu ứng vẽ dần (`isAnimationActive = false`) — bật lại là biểu đồ kẹt ở khung đầu: có trục, có lưới, KHÔNG có dữ liệu. Mặc định đó KHÔNG áp cho `<ChartContainer>` + recharts do app tự lắp | https://design-system.comitor.ai/components/chart |
-| **data-grid** · 33 file · `@comitor/ui/data-grid` | `DataGrid` — lưới sửa trực tiếp kiểu bảng tính, cho màn nhập liệu hàng loạt. Port từ [tablecn](https://www.tablecn.com/data-grid) (MIT) sang primitive + token của gói. ⚠ Là tầng DUY NHẤT có peer **`@tanstack/react-table`**, và mọi thứ trong nó là client component | [docs/data-grid.md](docs/data-grid.md) |
+| **data-grid** · 36 file · `@comitor/ui/data-grid` | `DataGrid` — lưới sửa trực tiếp kiểu bảng tính, cho màn nhập liệu hàng loạt. Port từ [tablecn](https://www.tablecn.com/data-grid) (MIT) sang primitive + token của gói. ⚠ Là tầng DUY NHẤT có peer **`@tanstack/react-table`**, tầng duy nhất mặc định **tiếng Anh** (prop `locale`, xem dưới), và mọi thứ trong nó là client component | [docs/data-grid.md](docs/data-grid.md) |
 | **uploader** · 5 file · `@comitor/ui/uploader` | `FileUpload` (tệp) · `ImageUploadField` (ảnh) · `useFileUpload` — kéo thả, xem trước, tiến độ. Peer optional: `@uppy/core` + `@uppy/xhr-upload` | https://design-system.comitor.ai/components |
 | **form** · `@comitor/ui/form` | Binding shadcn ⇄ react-hook-form | https://design-system.comitor.ai/components/form |
 
 **Cơ chế `labels` — đổi ngôn ngữ mà không fork component.** Chuỗi hiển thị mặc định của gói là **tiếng
 Việt**, kể cả chuỗi chỉ trình đọc màn hình nghe thấy (`aria-label`, `sr-only`); app dùng ngôn ngữ khác
-override qua prop `labels`. Kiểu là `Partial<>` và component luôn trải `{ ...DEFAULT_*, ...labels }`,
+override qua prop `labels`.
+
+⚠ **`DataGrid` là ngoại lệ, ở cả hai vế.** Nó mặc định **tiếng Anh**, và nó không dùng `labels` mà
+dùng prop **`locale`** — `"en"` · `"vi"`, hoặc cả một object `DataGridMessages` tự soạn. Lý do:
+phần lớn chuỗi của nó là chuỗi gốc của tablecn, nên giữ tiếng Anh làm bản gốc thì đối chiếu ngược
+với thượng nguồn là so trực tiếp. Muốn tiếng Việt thì khai một lần bằng `DataGridLocaleProvider`,
+và nhớ truyền `locale` cho cả `useDataGrid` — thanh công cụ nằm ngoài `<DataGrid>` nên nó KHÔNG
+nhận được prop của lưới, còn hook thì bắn toast ở ngoài cây DOM của lưới nên nó không đọc được
+provider. Chi tiết: [docs/data-grid.md](docs/data-grid.md) §11. Kiểu là `Partial<>` và component luôn trải `{ ...DEFAULT_*, ...labels }`,
 nên truyền một khoá không làm mất phần còn lại. Component chỉ có một hai chuỗi thì mở bằng **prop
 rời** thay cho cả một object — `clearLabel`, `pendingLabel`, `overflowLabel`, `placeholder`,
 `emptyText`: cùng cơ chế, chỉ khác hình dạng. ⚠ Khoá có số/đơn vị chèn vào là **HÀM**, không phải

package/dist/data-grid/data-grid-cell-variants.js

@@ -22,7 +22,7 @@ import { Skeleton } from "../components/ui/skeleton.js";
 import { Textarea } from "../components/ui/textarea.js";
 import { cn } from "../lib/cn.js";
 import { DataGridCellWrapper } from "./data-grid-cell-wrapper.js";
-import { msg } from "./messages.js";
+import { useDataGridMessages } from "./data-grid-locale.js";
 import { toastError, toastMessage } from "./toast.js";
 import { useBadgeOverflow } from "./use-badge-overflow.js";
 import { useDebouncedCallback } from "./use-debounced-callback.js";
@@ -191,6 +191,7 @@ function LongTextCell({
   isActiveSearchMatch,
   readOnly
 }) {
+  const msg = useDataGridMessages();
   const initialValue = cell.getValue();
   const [value, setValue] = React.useState(initialValue ?? "");
   const textareaRef = React.useRef(null);
@@ -468,6 +469,7 @@ function UrlCell({
   isActiveSearchMatch,
   readOnly
 }) {
+  const msg = useDataGridMessages();
   const initialValue = cell.getValue();
   const [value, setValue] = React.useState(initialValue ?? "");
   const cellRef = React.useRef(null);
@@ -559,7 +561,7 @@ function UrlCell({
       }
       event.stopPropagation();
     },
-    [isEditing, value]
+    [isEditing, value, msg]
   );
   React.useEffect(() => {
     const wasEditing = prevIsEditingRef.current;
@@ -839,6 +841,7 @@ function MultiSelectCell({
   isActiveSearchMatch,
   readOnly
 }) {
+  const msg = useDataGridMessages();
   const cellValue = React.useMemo(() => {
     const value = cell.getValue();
     return value ?? [];
@@ -1169,6 +1172,7 @@ function FileCell({
   isActiveSearchMatch,
   readOnly
 }) {
+  const msg = useDataGridMessages();
   const cellValue = React.useMemo(() => cell.getValue() ?? [], [cell]);
   const cellKey = getCellKey(rowIndex, columnId);
   const prevCellKeyRef = React.useRef(cellKey);
@@ -1232,7 +1236,7 @@ function FileCell({
       }
       return null;
     },
-    [maxFileSize, acceptedTypes]
+    [maxFileSize, acceptedTypes, msg]
   );
   const addFiles = React.useCallback(
     async (newFiles, skipUpload = false) => {
@@ -1335,7 +1339,7 @@ function FileCell({
         }
       }
     },
-    [files, maxFiles, validateFile, tableMeta, rowIndex, columnId, readOnly, isPending]
+    [files, maxFiles, validateFile, tableMeta, rowIndex, columnId, readOnly, isPending, msg]
   );
   const removeFile = React.useCallback(
     async (fileId) => {
@@ -1373,7 +1377,7 @@ function FileCell({
       });
       tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: updatedFiles });
     },
-    [files, tableMeta, rowIndex, columnId, readOnly, isPending]
+    [files, tableMeta, rowIndex, columnId, readOnly, isPending, msg]
   );
   const clearAll = React.useCallback(async () => {
     if (readOnly || isPending) return;
@@ -1401,7 +1405,7 @@ function FileCell({
     setFiles([]);
     setDeletingFiles(/* @__PURE__ */ new Set());
     tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: [] });
-  }, [files, tableMeta, rowIndex, columnId, readOnly, isPending]);
+  }, [files, tableMeta, rowIndex, columnId, readOnly, isPending, msg]);
   const onCellDragEnter = React.useCallback((event) => {
     event.preventDefault();
     event.stopPropagation();