@comitor/ui 1.10.0 → 1.11.0

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

@@ -0,0 +1,189 @@
+import { RowData, Cell, TableMeta } from '@tanstack/react-table';
+
+/** Hướng đọc của lưới (mặc định "ltr" — tiếng Việt) */
+type Direction = "ltr" | "rtl";
+/** Chiều cao dòng: short 36px, medium 56px, tall 76px, extra-tall 96px */
+type RowHeightValue = "short" | "medium" | "tall" | "extra-tall";
+interface CellSelectOption {
+    label: string;
+    value: string;
+    icon?: React.ComponentType<React.ComponentProps<"svg">>;
+    /** Số lượng hiển thị bên phải trong danh sách lọc */
+    count?: number;
+}
+/**
+ * Kiểu ô của một cột — khai báo trong `columnDef.meta.cell`.
+ * Quyết định cả cách hiển thị, cách sửa, cách dán và bộ toán tử lọc.
+ */
+type CellOpts = {
+    variant: "short-text";
+} | {
+    variant: "long-text";
+} | {
+    variant: "number";
+    min?: number;
+    max?: number;
+    step?: number;
+} | {
+    variant: "select";
+    options: CellSelectOption[];
+} | {
+    variant: "multi-select";
+    options: CellSelectOption[];
+} | {
+    variant: "checkbox";
+} | {
+    /** Giá trị lưu dạng chuỗi "yyyy-MM-dd", hiển thị dd/MM/yyyy */
+    variant: "date";
+} | {
+    variant: "url";
+} | {
+    variant: "file";
+    /** Giới hạn dung lượng mỗi tệp (byte) — mặc định 10MB */
+    maxFileSize?: number;
+    /** Số tệp tối đa mỗi ô — mặc định 10 */
+    maxFiles?: number;
+    /** Chuỗi `accept` của input file, vd "image/*,.pdf" */
+    accept?: string;
+    multiple?: boolean;
+};
+/** Một thay đổi ô: dòng (theo thứ tự đang hiển thị) + cột + giá trị mới */
+interface CellUpdate {
+    rowIndex: number;
+    columnId: string;
+    value: unknown;
+}
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** Tên cột hiển thị trong menu Lọc/Sắp xếp/Hiển thị cột */
+        label?: string;
+        /** Kiểu ô của cột — xem {@link CellOpts} */
+        cell?: CellOpts;
+    }
+    interface TableMeta<TData extends RowData> {
+        dataGridRef?: React.RefObject<HTMLElement | null>;
+        cellMapRef?: React.RefObject<Map<string, HTMLDivElement>>;
+        focusedCell?: CellPosition | null;
+        editingCell?: CellPosition | null;
+        selectionState?: SelectionState;
+        searchOpen?: boolean;
+        getIsCellSelected?: (rowIndex: number, columnId: string) => boolean;
+        getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean;
+        getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean;
+        getVisualRowIndex?: (rowId: string) => number | undefined;
+        scrollToCell?: (rowIndex: number, columnId: string, align?: "auto" | "start" | "center" | "end") => void;
+        rowHeight?: RowHeightValue;
+        onRowHeightChange?: (value: RowHeightValue) => void;
+        onRowSelect?: (rowId: string, checked: boolean, shiftKey: boolean) => void;
+        onDataUpdate?: (params: CellUpdate | Array<CellUpdate>) => void;
+        onRowsDelete?: (rowIndices: number[]) => void | Promise<void>;
+        onColumnClick?: (columnId: string) => void;
+        onCellClick?: (rowIndex: number, columnId: string, event?: React.MouseEvent) => void;
+        onCellDoubleClick?: (rowIndex: number, columnId: string) => void;
+        onCellMouseDown?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+        onCellMouseEnter?: (rowIndex: number, columnId: string) => void;
+        onCellMouseUp?: () => void;
+        onCellContextMenu?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+        onCellEditingStart?: (rowIndex: number, columnId: string) => void;
+        onCellEditingStop?: (opts?: {
+            direction?: NavigationDirection;
+            moveToNextRow?: boolean;
+        }) => void;
+        onCellsCopy?: () => void;
+        onCellsCut?: () => void;
+        onCellsPaste?: (expand?: boolean) => void;
+        onSelectionClear?: () => void;
+        onFilesUpload?: (params: {
+            files: File[];
+            rowIndex: number;
+            columnId: string;
+        }) => Promise<FileCellData[]>;
+        onFilesDelete?: (params: {
+            fileIds: string[];
+            rowIndex: number;
+            columnId: string;
+        }) => void | Promise<void>;
+        contextMenu?: ContextMenuState;
+        onContextMenuOpenChange?: (open: boolean) => void;
+        pasteDialog?: PasteDialogState;
+        onPasteDialogOpenChange?: (open: boolean) => void;
+        readOnly?: boolean;
+    }
+}
+/** Vị trí một ô: chỉ số dòng đang hiển thị + id cột */
+interface CellPosition {
+    rowIndex: number;
+    columnId: string;
+}
+interface CellRange {
+    start: CellPosition;
+    end: CellPosition;
+}
+interface SelectionState {
+    /** Khoá ô đang chọn dạng `"{rowIndex}:{columnId}"` */
+    selectedCells: Set<string>;
+    selectionRange: CellRange | null;
+    /** Đang giữ chuột kéo chọn */
+    isSelecting: boolean;
+}
+interface ContextMenuState {
+    open: boolean;
+    x: number;
+    y: number;
+}
+interface PasteDialogState {
+    open: boolean;
+    /** Số dòng còn thiếu để dán hết nội dung clipboard */
+    rowsNeeded: number;
+    clipboardText: string;
+}
+type NavigationDirection = "up" | "down" | "left" | "right" | "home" | "end" | "ctrl+up" | "ctrl+down" | "ctrl+home" | "ctrl+end" | "pageup" | "pagedown" | "pageleft" | "pageright";
+/** Trạng thái + hành vi của ô tìm kiếm trong lưới (bật bằng `enableSearch`) */
+interface SearchState {
+    searchMatches: CellPosition[];
+    matchIndex: number;
+    searchOpen: boolean;
+    onSearchOpenChange: (open: boolean) => void;
+    searchQuery: string;
+    onSearchQueryChange: (query: string) => void;
+    onSearch: (query: string) => void;
+    onNavigateToNextMatch: () => void;
+    onNavigateToPrevMatch: () => void;
+}
+interface DataGridCellProps<TData> {
+    cell: Cell<TData, unknown>;
+    tableMeta: TableMeta<TData>;
+    rowIndex: number;
+    columnId: string;
+    rowHeight: RowHeightValue;
+    isEditing: boolean;
+    isFocused: boolean;
+    isSelected: boolean;
+    isSearchMatch: boolean;
+    isActiveSearchMatch: boolean;
+    readOnly: boolean;
+}
+/** Tệp đính kèm trong ô `variant: "file"` */
+interface FileCellData {
+    id: string;
+    name: string;
+    size: number;
+    type: string;
+    /** Thiếu url = đang tải lên */
+    url?: string;
+}
+type TextFilterOperator = "contains" | "notContains" | "equals" | "notEquals" | "startsWith" | "endsWith" | "isEmpty" | "isNotEmpty";
+type NumberFilterOperator = "equals" | "notEquals" | "lessThan" | "lessThanOrEqual" | "greaterThan" | "greaterThanOrEqual" | "isBetween" | "isEmpty" | "isNotEmpty";
+type DateFilterOperator = "equals" | "notEquals" | "before" | "after" | "onOrBefore" | "onOrAfter" | "isBetween" | "isEmpty" | "isNotEmpty";
+type SelectFilterOperator = "is" | "isNot" | "isAnyOf" | "isNoneOf" | "isEmpty" | "isNotEmpty";
+type BooleanFilterOperator = "isTrue" | "isFalse";
+type FilterOperator = TextFilterOperator | NumberFilterOperator | DateFilterOperator | SelectFilterOperator | BooleanFilterOperator;
+/** Giá trị của một bộ lọc cột (đặt trong `columnFilters[].value`) */
+interface FilterValue {
+    operator: FilterOperator;
+    value?: string | number | string[];
+    /** Vế thứ hai của toán tử `isBetween` */
+    endValue?: string | number;
+}
+
+export type { BooleanFilterOperator, CellOpts, CellPosition, CellRange, CellSelectOption, CellUpdate, ContextMenuState, DataGridCellProps, DateFilterOperator, Direction, FileCellData, FilterOperator, FilterValue, NavigationDirection, NumberFilterOperator, PasteDialogState, RowHeightValue, SearchState, SelectFilterOperator, SelectionState, TextFilterOperator };

package/dist/data-grid/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/data-grid/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare function useAsRef<T>(props: T): React.RefObject<T>;
+
+export { useAsRef };

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+function useAsRef(props) {
+  const ref = React.useRef(props);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = props;
+  });
+  return ref;
+}
+export {
+  useAsRef
+};
+//# sourceMappingURL=use-as-ref.js.map

package/dist/data-grid/use-as-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/use-as-ref.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"./use-isomorphic-layout-effect.js\";\n\nfunction useAsRef<T>(props: T) {\n  const ref = React.useRef<T>(props);\n\n  useIsomorphicLayoutEffect(() => {\n    ref.current = props;\n  });\n\n  return ref;\n}\n\nexport { useAsRef };\n"],"mappings":"AAAA,YAAY,WAAW;AAEvB,SAAS,iCAAiC;AAE1C,SAAS,SAAY,OAAU;AAC7B,QAAM,MAAM,MAAM,OAAU,KAAK;AAEjC,4BAA0B,MAAM;AAC9B,QAAI,UAAU;AAAA,EAChB,CAAC;AAED,SAAO;AACT;","names":[]}

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+interface UseBadgeOverflowProps<T> {
+    items: T[];
+    getLabel: (item: T) => string;
+    containerRef: React.RefObject<HTMLElement | null>;
+    lineCount: number;
+    cacheKeyPrefix?: string;
+    iconSize?: number;
+    maxWidth?: number;
+    className?: string;
+    containerPadding?: number;
+    badgeGap?: number;
+    overflowBadgeWidth?: number;
+}
+interface UseBadgeOverflowReturn<T> {
+    visibleItems: T[];
+    hiddenCount: number;
+    containerWidth: number;
+}
+declare function useBadgeOverflow<T>({ items, getLabel, containerRef, lineCount, cacheKeyPrefix, containerPadding, badgeGap, overflowBadgeWidth, iconSize, maxWidth, className }: UseBadgeOverflowProps<T>): UseBadgeOverflowReturn<T>;
+declare function clearBadgeWidthCache(): void;
+
+export { clearBadgeWidthCache, useBadgeOverflow };

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

@@ -0,0 +1,123 @@
+import * as React from "react";
+const badgeWidthCache = /* @__PURE__ */ new Map();
+const DEFAULT_CONTAINER_PADDING = 16;
+const DEFAULT_BADGE_GAP = 4;
+const DEFAULT_OVERFLOW_BADGE_WIDTH = 40;
+function measureBadgeWidth({ label, cacheKey, iconSize, maxWidth, className }) {
+  const cached = badgeWidthCache.get(cacheKey);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const measureEl = document.createElement("div");
+  measureEl.className = `inline-flex items-center rounded-md border px-1.5 text-xs font-semibold h-5 gap-1 shrink-0 absolute invisible pointer-events-none ${className ?? ""}`;
+  measureEl.style.whiteSpace = "nowrap";
+  if (iconSize) {
+    const icon = document.createElement("span");
+    icon.className = "shrink-0";
+    icon.style.width = `${iconSize}px`;
+    icon.style.height = `${iconSize}px`;
+    measureEl.appendChild(icon);
+  }
+  if (maxWidth) {
+    const text = document.createElement("span");
+    text.className = "truncate";
+    text.style.maxWidth = `${maxWidth}px`;
+    text.textContent = label;
+    measureEl.appendChild(text);
+  } else {
+    measureEl.textContent = label;
+  }
+  document.body.appendChild(measureEl);
+  const width = measureEl.offsetWidth;
+  document.body.removeChild(measureEl);
+  badgeWidthCache.set(cacheKey, width);
+  return width;
+}
+function useBadgeOverflow({
+  items,
+  getLabel,
+  containerRef,
+  lineCount,
+  cacheKeyPrefix = "",
+  containerPadding = DEFAULT_CONTAINER_PADDING,
+  badgeGap = DEFAULT_BADGE_GAP,
+  overflowBadgeWidth = DEFAULT_OVERFLOW_BADGE_WIDTH,
+  iconSize,
+  maxWidth,
+  className
+}) {
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    function measureWidth() {
+      if (containerRef.current) {
+        const width = containerRef.current.clientWidth - containerPadding;
+        setContainerWidth(width);
+      }
+    }
+    measureWidth();
+    const resizeObserver = new ResizeObserver(measureWidth);
+    resizeObserver.observe(containerRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef, containerPadding]);
+  const result = React.useMemo(() => {
+    if (!containerWidth || items.length === 0) {
+      return { visibleItems: items, hiddenCount: 0, containerWidth };
+    }
+    let currentLineWidth = 0;
+    let currentLine = 1;
+    const visible = [];
+    for (const item of items) {
+      const label = getLabel(item);
+      const cacheKey = cacheKeyPrefix ? `${cacheKeyPrefix}:${label}` : label;
+      const badgeWidth = measureBadgeWidth({
+        label,
+        cacheKey,
+        iconSize,
+        maxWidth,
+        className
+      });
+      const widthWithGap = badgeWidth + badgeGap;
+      if (currentLineWidth + widthWithGap <= containerWidth) {
+        currentLineWidth += widthWithGap;
+        visible.push(item);
+      } else if (currentLine < lineCount) {
+        currentLine++;
+        currentLineWidth = widthWithGap;
+        visible.push(item);
+      } else {
+        if (currentLineWidth + overflowBadgeWidth > containerWidth && visible.length > 0) {
+          visible.pop();
+        }
+        break;
+      }
+    }
+    return {
+      visibleItems: visible,
+      hiddenCount: Math.max(0, items.length - visible.length),
+      containerWidth
+    };
+  }, [
+    items,
+    getLabel,
+    containerWidth,
+    lineCount,
+    cacheKeyPrefix,
+    iconSize,
+    maxWidth,
+    className,
+    badgeGap,
+    overflowBadgeWidth
+  ]);
+  return result;
+}
+function clearBadgeWidthCache() {
+  badgeWidthCache.clear();
+}
+export {
+  clearBadgeWidthCache,
+  useBadgeOverflow
+};
+//# sourceMappingURL=use-badge-overflow.js.map

package/dist/data-grid/use-badge-overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/use-badge-overflow.ts"],"sourcesContent":["import * as React from \"react\";\n\nconst badgeWidthCache = new Map<string, number>();\n\nconst DEFAULT_CONTAINER_PADDING = 16; // px-2 = 8px * 2\nconst DEFAULT_BADGE_GAP = 4; // gap-1 = 4px\nconst DEFAULT_OVERFLOW_BADGE_WIDTH = 40; // Approximate width of \"+N\" badge\n\ninterface MeasureBadgeWidthProps {\n  label: string;\n  cacheKey: string;\n  iconSize?: number;\n  maxWidth?: number;\n  className?: string;\n}\n\nfunction measureBadgeWidth({ label, cacheKey, iconSize, maxWidth, className }: MeasureBadgeWidthProps): number {\n  const cached = badgeWidthCache.get(cacheKey);\n  if (cached !== undefined) {\n    return cached;\n  }\n\n  const measureEl = document.createElement(\"div\");\n  measureEl.className = `inline-flex items-center rounded-md border px-1.5 text-xs font-semibold h-5 gap-1 shrink-0 absolute invisible pointer-events-none ${\n    className ?? \"\"\n  }`;\n  measureEl.style.whiteSpace = \"nowrap\";\n\n  if (iconSize) {\n    const icon = document.createElement(\"span\");\n    icon.className = \"shrink-0\";\n    icon.style.width = `${iconSize}px`;\n    icon.style.height = `${iconSize}px`;\n    measureEl.appendChild(icon);\n  }\n\n  if (maxWidth) {\n    const text = document.createElement(\"span\");\n    text.className = \"truncate\";\n    text.style.maxWidth = `${maxWidth}px`;\n    text.textContent = label;\n    measureEl.appendChild(text);\n  } else {\n    measureEl.textContent = label;\n  }\n\n  document.body.appendChild(measureEl);\n  const width = measureEl.offsetWidth;\n  document.body.removeChild(measureEl);\n\n  badgeWidthCache.set(cacheKey, width);\n  return width;\n}\n\ninterface UseBadgeOverflowProps<T> {\n  items: T[];\n  getLabel: (item: T) => string;\n  containerRef: React.RefObject<HTMLElement | null>;\n  lineCount: number;\n  cacheKeyPrefix?: string;\n  iconSize?: number;\n  maxWidth?: number;\n  className?: string;\n  containerPadding?: number;\n  badgeGap?: number;\n  overflowBadgeWidth?: number;\n}\n\ninterface UseBadgeOverflowReturn<T> {\n  visibleItems: T[];\n  hiddenCount: number;\n  containerWidth: number;\n}\n\nexport function useBadgeOverflow<T>({\n  items,\n  getLabel,\n  containerRef,\n  lineCount,\n  cacheKeyPrefix = \"\",\n  containerPadding = DEFAULT_CONTAINER_PADDING,\n  badgeGap = DEFAULT_BADGE_GAP,\n  overflowBadgeWidth = DEFAULT_OVERFLOW_BADGE_WIDTH,\n  iconSize,\n  maxWidth,\n  className\n}: UseBadgeOverflowProps<T>): UseBadgeOverflowReturn<T> {\n  const [containerWidth, setContainerWidth] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!containerRef.current) return;\n\n    function measureWidth() {\n      if (containerRef.current) {\n        const width = containerRef.current.clientWidth - containerPadding;\n        setContainerWidth(width);\n      }\n    }\n\n    measureWidth();\n\n    const resizeObserver = new ResizeObserver(measureWidth);\n    resizeObserver.observe(containerRef.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [containerRef, containerPadding]);\n\n  const result = React.useMemo(() => {\n    if (!containerWidth || items.length === 0) {\n      return { visibleItems: items, hiddenCount: 0, containerWidth };\n    }\n\n    let currentLineWidth = 0;\n    let currentLine = 1;\n    const visible: T[] = [];\n\n    for (const item of items) {\n      const label = getLabel(item);\n      const cacheKey = cacheKeyPrefix ? `${cacheKeyPrefix}:${label}` : label;\n      const badgeWidth = measureBadgeWidth({\n        label,\n        cacheKey,\n        iconSize,\n        maxWidth,\n        className\n      });\n      const widthWithGap = badgeWidth + badgeGap;\n\n      if (currentLineWidth + widthWithGap <= containerWidth) {\n        currentLineWidth += widthWithGap;\n        visible.push(item);\n      } else if (currentLine < lineCount) {\n        currentLine++;\n        currentLineWidth = widthWithGap;\n        visible.push(item);\n      } else {\n        if (currentLineWidth + overflowBadgeWidth > containerWidth && visible.length > 0) {\n          visible.pop();\n        }\n\n        break;\n      }\n    }\n\n    return {\n      visibleItems: visible,\n      hiddenCount: Math.max(0, items.length - visible.length),\n      containerWidth\n    };\n  }, [\n    items,\n    getLabel,\n    containerWidth,\n    lineCount,\n    cacheKeyPrefix,\n    iconSize,\n    maxWidth,\n    className,\n    badgeGap,\n    overflowBadgeWidth\n  ]);\n\n  return result;\n}\n\nexport function clearBadgeWidthCache(): void {\n  badgeWidthCache.clear();\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,10 @@
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+declare function useCallbackRef<T extends (...args: never[]) => unknown>(callback: T | undefined): T;
+
+export { useCallbackRef };

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+function useCallbackRef(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
+}
+export {
+  useCallbackRef
+};
+//# sourceMappingURL=use-callback-ref.js.map

package/dist/data-grid/use-callback-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-grid/use-callback-ref.ts"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx\n */\n\n/**\n * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a\n * prop or avoid re-executing effects when passed as a dependency\n */\nfunction useCallbackRef<T extends (...args: never[]) => unknown>(callback: T | undefined): T {\n  const callbackRef = React.useRef(callback);\n\n  React.useEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  // https://github.com/facebook/react/issues/19240\n  return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport { useCallbackRef };\n"],"mappings":"AAAA,YAAY,WAAW;AAUvB,SAAS,eAAwD,UAA4B;AAC3F,QAAM,cAAc,MAAM,OAAO,QAAQ;AAEzC,QAAM,UAAU,MAAM;AACpB,gBAAY,UAAU;AAAA,EACxB,CAAC;AAGD,SAAO,MAAM,QAAQ,OAAO,IAAI,SAAS,YAAY,UAAU,GAAG,IAAI,IAAS,CAAC,CAAC;AACnF;","names":[]}

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

@@ -0,0 +1,33 @@
+interface UndoRedoCellUpdate {
+    rowId: string;
+    columnId: string;
+    previousValue: unknown;
+    newValue: unknown;
+}
+/**
+ * Tuỳ chọn của {@link useDataGridUndoRedo}. Lịch sử nằm hoàn toàn ở phía trình duyệt:
+ * hook tính ra mảng dữ liệu trước/sau rồi trả về qua `onDataChange` — ứng dụng tự
+ * đồng bộ lên máy chủ (hoặc bỏ qua nếu chỉ làm việc với state cục bộ).
+ */
+interface UseDataGridUndoRedoProps<TData> {
+    data: TData[];
+    onDataChange: (data: TData[]) => void;
+    /** Khoá định danh bản ghi — phải khớp với `getRowId` của lưới */
+    getRowId: (row: TData) => string;
+    /** Số thao tác giữ trong lịch sử (mặc định 100) */
+    maxHistory?: number;
+    enabled?: boolean;
+}
+interface UseDataGridUndoRedoReturn<TData> {
+    canUndo: boolean;
+    canRedo: boolean;
+    onUndo: () => void;
+    onRedo: () => void;
+    onClear: () => void;
+    trackCellsUpdate: (updates: UndoRedoCellUpdate[]) => void;
+    trackRowsAdd: (rows: TData[]) => void;
+    trackRowsDelete: (rows: TData[]) => void;
+}
+declare function useDataGridUndoRedo<TData>({ data, onDataChange, getRowId, maxHistory, enabled }: UseDataGridUndoRedoProps<TData>): UseDataGridUndoRedoReturn<TData>;
+
+export { type UndoRedoCellUpdate, useDataGridUndoRedo };