@comitor/ui 1.11.0 → 2.0.0

package/dist/data-grid/use-data-grid.d.ts

@@ -2,7 +2,10 @@ import * as _tanstack_react_virtual from '@tanstack/react-virtual';
 import * as _tanstack_react_table from '@tanstack/react-table';
 import { TableOptions, TableMeta, ColumnDef } from '@tanstack/react-table';
 import * as React from 'react';
+import { DataGridLocale } from './messages.js';
 import { CellPosition, CellUpdate, FileCellData, RowHeightValue, Direction, SearchState, ContextMenuState, PasteDialogState } from './types.js';
+import { DataGridMessages } from './messages-en.js';
+import './messages-vi.js';
 
 /**
  * Tuỳ chọn của {@link useDataGrid} — mở rộng `TableOptions` của TanStack Table v8.
@@ -60,8 +63,19 @@ interface UseDataGridProps<TData> extends Omit<TableOptions<TData>, "pageCount"
     enablePaste?: boolean;
     /** Chỉ xem: khoá mọi thao tác sửa/xoá/dán */
     readOnly?: boolean;
+    /**
+     * Ngôn ngữ của lưới: `"en"` (mặc định) · `"vi"`, hoặc cả một bảng chuỗi tự soạn.
+     *
+     * Giá trị này đi ra theo kết quả của hook, nên `<DataGrid {...gridProps}>` tự nhận được và tự
+     * phát xuống cây con. Hook cũng giữ một bản cho RIÊNG nó, vì toast render ở gốc app
+     * (`<Toaster />`) chứ không nằm trong cây của lưới — không có context nào ở đó để đọc.
+     *
+     * ⚠ Thanh công cụ nằm ngoài `<DataGrid>` nên KHÔNG nhận được giá trị này: bọc cả màn bằng
+     * `DataGridLocaleProvider`, hoặc truyền `locale` cho từng menu.
+     */
+    locale?: DataGridLocale | DataGridMessages;
 }
-declare function useDataGrid<TData>({ data, columns, rowHeight: rowHeightProp, overscan, dir: dirProp, initialState, ...props }: UseDataGridProps<TData>): {
+declare function useDataGrid<TData>({ data, columns, rowHeight: rowHeightProp, overscan, dir: dirProp, initialState, locale, ...props }: UseDataGridProps<TData>): {
     dataGridRef: React.RefObject<HTMLDivElement | null>;
     headerRef: React.RefObject<HTMLDivElement | null>;
     rowMapRef: React.RefObject<Map<number, HTMLDivElement>>;
@@ -87,6 +101,272 @@ declare function useDataGrid<TData>({ data, columns, rowHeight: rowHeightProp, o
     pasteDialog: PasteDialogState;
     onRowAdd: ((event?: React.MouseEvent<HTMLDivElement>) => Promise<void>) | undefined;
     adjustLayout: boolean;
+    locale: {
+        grid: {
+            label: string;
+            addRow: string;
+        };
+        search: {
+            placeholder: string;
+            label: string;
+            prevMatch: string;
+            nextMatch: string;
+            close: string;
+            matchPosition: (index: number, total: number) => string;
+            noResults: string;
+            typeToSearch: string;
+        };
+        column: {
+            sortAsc: string;
+            sortDesc: string;
+            removeSort: string;
+            pinLeft: string;
+            unpinLeft: string;
+            pinRight: string;
+            unpinRight: string;
+            hide: string;
+            resize: (label: string) => string;
+            variant: {
+                shortText: string;
+                longText: string;
+                number: string;
+                url: string;
+                checkbox: string;
+                select: string;
+                multiSelect: string;
+                date: string;
+                file: string;
+            };
+        };
+        select: {
+            all: string;
+            row: string;
+            rowNumber: (rowNumber: number) => string;
+        };
+        contextMenu: {
+            copy: string;
+            cut: string;
+            clear: string;
+            deleteRows: string;
+        };
+        pasteDialog: {
+            title: string;
+            description: (rowsNeeded: number) => string;
+            expandTitle: string;
+            expandDescription: (rowsNeeded: number) => string;
+            keepTitle: string;
+            keepDescription: string;
+            cancel: string;
+            confirm: string;
+        };
+        rowHeight: {
+            label: string;
+            short: string;
+            medium: string;
+            tall: string;
+            extraTall: string;
+        };
+        view: {
+            trigger: string;
+            toggleColumns: string;
+            searchPlaceholder: string;
+            empty: string;
+        };
+        sort: {
+            trigger: string;
+            title: string;
+            emptyTitle: string;
+            description: string;
+            emptyDescription: string;
+            add: string;
+            reset: string;
+            remove: string;
+            drag: string;
+            fieldPlaceholder: string;
+            fieldEmpty: string;
+            asc: string;
+            desc: string;
+        };
+        filter: {
+            trigger: string;
+            title: string;
+            emptyTitle: string;
+            description: string;
+            emptyDescription: string;
+            add: string;
+            reset: string;
+            remove: string;
+            drag: string;
+            where: string;
+            and: string;
+            fieldPlaceholder: string;
+            fieldEmpty: string;
+            valuePlaceholder: string;
+            rangeStart: string;
+            rangeEnd: string;
+            pickDate: string;
+            pickRange: string;
+            optionPlaceholder: string;
+            optionEmpty: string;
+            selectedCount: (count: number) => string;
+            emptyValue: (label: string) => string;
+            operators: {
+                contains: string;
+                notContains: string;
+                equals: string;
+                notEquals: string;
+                startsWith: string;
+                endsWith: string;
+                isEmpty: string;
+                isNotEmpty: string;
+                lessThan: string;
+                lessThanOrEqual: string;
+                greaterThan: string;
+                greaterThanOrEqual: string;
+                isBetween: string;
+                dateEquals: string;
+                dateNotEquals: string;
+                before: string;
+                after: string;
+                onOrBefore: string;
+                onOrAfter: string;
+                is: string;
+                isNot: string;
+                isAnyOf: string;
+                isNoneOf: string;
+                isTrue: string;
+                isFalse: string;
+            };
+        };
+        cell: {
+            longTextPlaceholder: string;
+            optionSearchPlaceholder: string;
+            optionEmpty: string;
+            clearAll: string;
+            invalidUrlTitle: string;
+            invalidUrlDescription: string;
+        };
+        file: {
+            uploadLabel: string;
+            dropHere: string;
+            dragHere: string;
+            browse: string;
+            limits: (maxSize?: string, maxFiles?: number) => string;
+            count: (count: number) => string;
+            clearAll: string;
+            remove: string;
+            uploading: string;
+            deleting: string;
+            tooMany: (maxFiles: number) => string;
+            tooLarge: (maxSize: string) => string;
+            wrongType: string;
+            rejectedOne: (name: string) => string;
+            rejectedMany: (name: string, others: number) => string;
+            uploadFailed: (count: number) => string;
+            deleteFailed: (name: string) => string;
+            deleteFailedMany: string;
+        };
+        toast: {
+            cellsCopied: (count: number) => string;
+            copyFailed: string;
+            cellsCut: (count: number) => string;
+            cutFailed: string;
+            cellsPasted: (count: number) => string;
+            cellsPastedWithSkipped: (count: number, skipped: number) => string;
+            pasteSkipped: (skipped: number) => string;
+            pasteFailed: string;
+            cellsCleared: (count: number) => string;
+            rowsDeleted: (count: number) => string;
+            nothingToUndo: string;
+            nothingToRedo: string;
+            undone: (count: number) => string;
+            redone: (count: number) => string;
+        };
+        booleanText: {
+            checked: string;
+            unchecked: string;
+        };
+        shortcuts: {
+            trigger: string;
+            title: string;
+            description: string;
+            searchPlaceholder: string;
+            emptyTitle: string;
+            emptyDescription: string;
+            close: string;
+            groups: {
+                navigation: string;
+                selection: string;
+                editing: string;
+                search: string;
+                filtering: string;
+                sorting: string;
+                general: string;
+            };
+            keys: {
+                click: string;
+                doubleClick: string;
+            };
+            navigation: {
+                move: string;
+                nextCell: string;
+                prevCell: string;
+                firstColumn: string;
+                lastColumn: string;
+                firstRowSameColumn: string;
+                lastRowSameColumn: string;
+                firstColumnSameRow: string;
+                lastColumnSameRow: string;
+                firstCell: string;
+                lastCell: string;
+                pageUp: string;
+                pageDown: string;
+                scrollUp: string;
+                scrollDown: string;
+                scrollLeft: string;
+                scrollRight: string;
+            };
+            selection: {
+                extend: string;
+                toTop: string;
+                toBottom: string;
+                toFirstColumn: string;
+                toLastColumn: string;
+                all: string;
+                toggle: string;
+                range: string;
+                clear: string;
+            };
+            editing: {
+                start: string;
+                insertRow: string;
+                copy: string;
+                cut: string;
+                paste: string;
+                clear: string;
+                deleteRows: string;
+                undo: string;
+                redo: string;
+            };
+            search: {
+                open: string;
+                next: string;
+                prev: string;
+                close: string;
+            };
+            filtering: {
+                toggle: string;
+                remove: string;
+            };
+            sorting: {
+                toggle: string;
+                remove: string;
+            };
+            general: {
+                shortcuts: string;
+            };
+        };
+    } | "en" | "vi" | undefined;
 };
 
 export { type UseDataGridProps, useDataGrid };

package/dist/data-grid/use-data-grid.js

@@ -8,7 +8,7 @@ import {
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import * as React from "react";
-import { msg } from "./messages.js";
+import { getDataGridMessages } from "./messages.js";
 import { toastError, toastSuccess } from "./toast.js";
 import { useAsRef } from "./use-as-ref.js";
 import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
@@ -57,8 +57,11 @@ function useDataGrid({
   overscan = OVERSCAN,
   dir: dirProp,
   initialState,
+  locale,
   ...props
 }) {
+  const msg = React.useMemo(() => getDataGridMessages(locale), [locale]);
+  const msgRef = useAsRef(msg);
   const dir = useDirection(dirProp);
   const dataGridRef = React.useRef(null);
   const tableRef = React.useRef(null);
@@ -456,11 +459,11 @@ function useDataGrid({
       if (currentState.cutCells.size > 0) {
         store.setState("cutCells", /* @__PURE__ */ new Set());
       }
-      toastSuccess(msg.toast.cellsCopied(selectedCellsArray.length));
+      toastSuccess(msgRef.current.toast.cellsCopied(selectedCellsArray.length));
     } catch {
-      toastError(msg.toast.copyFailed);
+      toastError(msgRef.current.toast.copyFailed);
     }
-  }, [store, serializeCellsToTsv]);
+  }, [store, serializeCellsToTsv, msgRef]);
   const onCellsCut = React.useCallback(async () => {
     if (propsRef.current.readOnly) return;
     const result = serializeCellsToTsv();
@@ -469,11 +472,11 @@ function useDataGrid({
     try {
       await writeClipboardText(tsvData);
       store.setState("cutCells", new Set(selectedCellsArray));
-      toastSuccess(msg.toast.cellsCut(selectedCellsArray.length));
+      toastSuccess(msgRef.current.toast.cellsCut(selectedCellsArray.length));
     } catch {
-      toastError(msg.toast.cutFailed);
+      toastError(msgRef.current.toast.cutFailed);
     }
-  }, [store, propsRef, serializeCellsToTsv]);
+  }, [store, propsRef, serializeCellsToTsv, msgRef]);
   const restoreFocus = React.useCallback((element) => {
     if (element && document.activeElement !== element) {
       requestAnimationFrame(() => {
@@ -710,12 +713,12 @@ function useDataGrid({
                         processedValue = parsed.join(", ");
                       }
                     } else if (typeof parsed === "boolean") {
-                      processedValue = parsed ? msg.booleanText.checked : msg.booleanText.unchecked;
+                      processedValue = parsed ? msgRef.current.booleanText.checked : msgRef.current.booleanText.unchecked;
                     }
                   } catch {
                     const lower = pastedValue.toLowerCase();
                     if (lower === "true" || lower === "false") {
-                      processedValue = lower === "true" ? msg.booleanText.checked : msg.booleanText.unchecked;
+                      processedValue = lower === "true" ? msgRef.current.booleanText.checked : msgRef.current.booleanText.unchecked;
                     }
                   }
                 }
@@ -755,9 +758,9 @@ function useDataGrid({
           }
           onDataUpdate(allUpdates);
           if (cellsSkipped > 0) {
-            toastSuccess(msg.toast.cellsPastedWithSkipped(cellsUpdated, cellsSkipped));
+            toastSuccess(msgRef.current.toast.cellsPastedWithSkipped(cellsUpdated, cellsSkipped));
           } else {
-            toastSuccess(msg.toast.cellsPasted(cellsUpdated));
+            toastSuccess(msgRef.current.toast.cellsPasted(cellsUpdated));
           }
           const endColumnId = navigableColumnIds[endColIndex];
           if (endColumnId) {
@@ -771,7 +774,7 @@ function useDataGrid({
           }
           restoreFocus(dataGridRef.current);
         } else if (cellsSkipped > 0) {
-          toastError(msg.toast.pasteSkipped(cellsSkipped));
+          toastError(msgRef.current.toast.pasteSkipped(cellsSkipped));
         }
         if (currentState.pasteDialog.open) {
           store.setState("pasteDialog", {
@@ -781,10 +784,10 @@ function useDataGrid({
           });
         }
       } catch {
-        toastError(msg.toast.pasteFailed);
+        toastError(msgRef.current.toast.pasteFailed);
       }
     },
-    [store, navigableColumnIds, propsRef, onDataUpdate, selectRange, restoreFocus]
+    [store, navigableColumnIds, propsRef, onDataUpdate, selectRange, restoreFocus, msgRef]
   );
   const releaseFocusGuard = React.useCallback((immediate = false) => {
     if (immediate) {
@@ -2660,7 +2663,8 @@ function useDataGrid({
       contextMenu,
       pasteDialog,
       onRowAdd: hasRowAdd ? onRowAdd : void 0,
-      adjustLayout
+      adjustLayout,
+      locale
     }),
     [
       hasRowAdd,
@@ -2682,7 +2686,8 @@ function useDataGrid({
       contextMenu,
       pasteDialog,
       onRowAdd,
-      adjustLayout
+      adjustLayout,
+      locale
     ]
   );
 }