@comitor/ui 3.5.0 → 3.6.1

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

@@ -35,6 +35,14 @@ type CellOpts = {
      * `{ value, label: value }`. Lọc, sắp xếp, tìm (`Ctrl+F`) và sao chép vẫn đọc `label`.
      */
     renderValue?: (value: string, option: CellSelectOption) => React.ReactNode;
+    /**
+     * Danh sách chọn RIÊNG của một dòng, dùng khi ô đó đang SỬA (thêm ở `3.6.1`) — vd trạng thái chỉ của nhóm
+     * mà việc thuộc về. Nhận `row.id` (tức `getRowId` của `useDataGrid`). Trả `undefined` thì dùng `options`.
+     * Lúc nghỉ, lọc, đếm facet, tìm và dán vẫn đọc `options` — nên `options` phải là TẬP ĐỦ mọi giá trị có thể
+     * gặp, còn `getOptions` chỉ thu hẹp thứ được MỜI chọn. Viết riêng ra vì `options` là theo CỘT, và dòng
+     * của lưới được `memo` nên dựng lại cột không tới được ô đang mở.
+     */
+    getOptions?: (rowId: string) => CellSelectOption[] | undefined;
 } | {
     variant: "multi-select";
     options: CellSelectOption[];
@@ -98,6 +106,8 @@ declare module "@tanstack/react-table" {
         getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean;
         getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean;
         getVisualRowIndex?: (rowId: string) => number | undefined;
+        /** Dời focus tới ô mà KHÔNG xoá lựa chọn và không mở trình sửa (thêm ở `3.6.1`); không cuộn. */
+        focusCell?: (rowIndex: number, columnId: string) => void;
         scrollToCell?: (rowIndex: number, columnId: string, align?: "auto" | "start" | "center" | "end") => void;
         rowHeight?: RowHeightValue;
         onRowHeightChange?: (value: RowHeightValue) => void;

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

@@ -122,7 +122,7 @@ declare function useDataGrid<TData>({ data, columns, rowHeight: rowHeightProp, o
     pasteDialog: PasteDialogState;
     onRowAdd: ((event?: React.MouseEvent<HTMLDivElement>) => Promise<void>) | undefined;
     adjustLayout: boolean;
-    locale: "en" | "vi" | {
+    locale: {
         grid: {
             label: string;
             addRow: string;
@@ -397,7 +397,7 @@ declare function useDataGrid<TData>({ data, columns, rowHeight: rowHeightProp, o
                 shortcuts: string;
             };
         };
-    } | undefined;
+    } | "en" | "vi" | undefined;
 };
 
 export { type UseDataGridProps, useDataGrid };

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

@@ -1477,8 +1477,8 @@ function useDataGrid({
     },
     [store, propsRef]
   );
-  const onRowSelectionChange = React.useCallback(
-    (updater) => {
+  const applyRowSelection = React.useCallback(
+    (updater, keepFocus) => {
       const currentState = store.getState();
       const newRowSelection = typeof updater === "function" ? updater(currentState.rowSelection) : updater;
       const selectedCells = getRowSelectionCells(
@@ -1493,13 +1493,17 @@ function useDataGrid({
           selectionRange: null,
           isSelecting: false
         });
-        store.setState("focusedCell", null);
+        if (!keepFocus) store.setState("focusedCell", null);
         store.setState("editingCell", null);
       });
       propsRef.current.onRowSelectionChange?.(updater);
     },
     [store, columnIds, propsRef]
   );
+  const onRowSelectionChange = React.useCallback(
+    (updater) => applyRowSelection(updater, false),
+    [applyRowSelection]
+  );
   const onRowSelect = React.useCallback(
     (rowId, selected, shiftKey) => {
       const currentState = store.getState();
@@ -1521,22 +1525,28 @@ function useDataGrid({
               newRowSelection[row.id] = selected;
             }
           }
-          onRowSelectionChange(newRowSelection);
+          applyRowSelection(newRowSelection, true);
         } else {
-          onRowSelectionChange({
-            ...currentState.rowSelection,
-            [currentRow.id]: selected
-          });
+          applyRowSelection(
+            {
+              ...currentState.rowSelection,
+              [currentRow.id]: selected
+            },
+            true
+          );
         }
       } else {
-        onRowSelectionChange({
-          ...currentState.rowSelection,
-          [currentRow.id]: selected
-        });
+        applyRowSelection(
+          {
+            ...currentState.rowSelection,
+            [currentRow.id]: selected
+          },
+          true
+        );
       }
       store.setState("lastClickedRowId", rowId);
     },
-    [store, onRowSelectionChange]
+    [store, applyRowSelection]
   );
   const onRowHeightChange = React.useCallback(
     (updater) => {
@@ -1628,6 +1638,12 @@ function useDataGrid({
       getIsSearchMatch,
       getIsActiveSearchMatch,
       getVisualRowIndex,
+      /*
+       * Dời focus tới một ô mà KHÔNG đụng lựa chọn (thêm ở `3.6.1`) — cho phím di chuyển của app (`J`/`K`).
+       * `onCellClick` không dùng được cho việc đó: nó là đường của CÚ BẤM, nên xoá lựa chọn dòng và mở trình
+       * sửa khi bấm lại ô đang focus. Không cuộn — gọi kèm `scrollToCell` nếu ô có thể nằm ngoài khung.
+       */
+      focusCell,
       scrollToCell: (rowIndex, columnId, align = "auto") => {
         const container = dataGridRef.current;
         if (!container) return;
@@ -1690,6 +1706,7 @@ function useDataGrid({
     getIsSearchMatch,
     getIsActiveSearchMatch,
     getVisualRowIndex,
+    focusCell,
     onRowHeightChange,
     onRowSelect,
     onDataUpdate,