@jielga/tmdatagrid 2.0.0-beta.3 → 2.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jielga/tmdatagrid",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "description": "A React data grid built on TanStack Table v9 and Mantine - always virtualized, with resizable, reorderable, sortable, filterable, hideable and pinnable columns.",
   "license": "MIT",
   "type": "module",

package/skills/appearance/SKILL.md

@@ -16,7 +16,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/styling.md'
   - 'Jielga/TMDataGrid:src/docs/toolbar.md'

package/skills/cell-selection/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/cell-selection.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/core/cellNavigation.ts'

package/skills/columns/SKILL.md

@@ -16,7 +16,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/columns.md'
   - 'Jielga/TMDataGrid:src/docs/column-layout.md'

package/skills/data/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/pagination.md'
   - 'Jielga/TMDataGrid:src/docs/scrolling.md'

package/skills/editing/SKILL.md

@@ -18,7 +18,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/editing.md'
   - 'Jielga/TMDataGrid:src/docs/query-builder.md'
@@ -123,9 +123,21 @@ tooltip.
 
 `saveDrafts` then sends the draft store: through the per-row
 `editing.onCommit` / `editing.onRowAdd` / `editing.onRowDelete` loop by default,
-or through one `editing.onSaveDrafts({ rows, added, deleted })` call when that
-is set. Rows failing validation stay open either way, and a rejected save keeps
-every draft.
+or through one `editing.onSaveDrafts({ updated, created, deleted })` call when
+that is set. `updated` entries carry a `rowId`, `created` entries a `tempId`, `deleted` is
+a list of row ids. Rows failing validation stay open either way.
+
+`onSaveDrafts` decides how much of the store is cleared: returning nothing
+saves everything, throwing saves nothing, and returning
+`{ updated, created, deleted }` saves everything except the ids reported
+`false`. Each key takes `false` for the whole bucket or a map of id to result;
+an unnamed id saved. A kept row stays committed, so the next `saveDrafts()`
+retries it, and `saveDrafts()` resolves `false` when anything was kept.
+
+Rows carry `data-dirty` (values typed in), `data-draft` (committed, waiting for
+Save), `data-deleted` and, on entry rows, `data-new`. The grid paints none of
+them; use `rowStyle` / `rowClassName` or the attributes to highlight what is
+pending.
 
 ## What a commit receives
 
@@ -236,8 +248,8 @@ const grid = useTMDataGrid({
   editing: {
     mode: "draft",
     newRowDefaults: () => ({ id: 0, firstName: "", salary: 30_000 }),
-    onSaveDrafts: async ({ rows, added, deleted }) => {
-      await api.saveBatch({ rows, added, deleted });
+    onSaveDrafts: async ({ updated, created, deleted }) => {
+      await api.saveBatch({ updated, created, deleted });
     },
   },
 });

package/skills/filtering/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/filtering.md'
   - 'Jielga/TMDataGrid:src/docs/quick-search.md'

package/skills/getting-started/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/getting-started.md'
   - 'Jielga/TMDataGrid:src/docs/anatomy.md'

package/skills/grouping/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/grouping.md'
   - 'Jielga/TMDataGrid:src/docs/summary-row.md'

package/skills/options/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/use-tm-data-grid.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'
@@ -62,7 +62,8 @@ rather than forwarded to TanStack.
 | `onFocusedCellChange` | `(cell \| null) => void` | – | Fires whenever the focused cell moves. |
 | `overscan` | `number` | `6` | Rows the virtualizer keeps mounted above and below the viewport. Defined by the grid. |
 | `columnResizeMode` | `"onChange" \| "onEnd"` | `"onChange"` | Resize update strategy. |
-| `initialState` | `Partial<TableState>` | See below | Merged over the grid defaults. |
+| `initialState` | `Partial<TableState>` | See below | The state the grid starts from, read once on mount. Merged over the grid defaults. |
+| `state` | `Partial<TableState>` | – | Controlled state. Each slice requires its `onXChange` - see below. |
 | `meta` | `TMDataGridTableMeta` | `{}` | Grid configuration, see below. |
 | `persist` | `TMDataGridPersistence` | – | State persistence, see below. |
 | `editing` | `TMDataGridEditingOptions` | off | Turns editing on. `mode` (`"cell" \| "cellConfirm" \| "row" \| "draft"`) picks the commit policy; the object also holds `onCommit`, `onSaveDrafts`, `rowValidators`, `isRowEditable`, `newRowDefaults`, `newRowsSticky`, `onRowAdd` and `onRowDelete` - see the `editing` skill. |
@@ -76,6 +77,35 @@ rather than forwarded to TanStack.
 | `columnPinning.left` | The checkbox column, followed by any columns you provide |
 | `globalFilterFn` | `"includesString"` |
 
+### Controlled state
+
+`state` makes a slice controlled: the parent owns the value, the grid reads it
+every render, and all writes go through the matching `onXChange`. Without the
+callback the slice cannot change; the grid logs a console warning in
+development. For a starting value only, use `initialState`.
+
+```tsx
+const [columnVisibility, setColumnVisibility] = useState({ play: false });
+
+const grid = useTMDataGrid({
+  data,
+  columns,
+  state: { columnVisibility },
+  onColumnVisibilityChange: setColumnVisibility,
+});
+```
+
+- A key set to `undefined` is ignored; the slice is uncontrolled.
+- Slices compare structurally between renders, so the `state` object can be
+  built inline. `Date`s compare by time; `Map`s and class instances compare by
+  identity and belong in `useState` or `useMemo`.
+- `atoms` also controls a slice, with no callback. Takes precedence over
+  `state` for the same slice.
+- `columnVisibility` toggles user-defined columns only. Entries for the
+  generated columns are ignored; enable or disable those through their feature
+  options. The tree column's entry follows `grouping`.
+- `persist` cannot restore a controlled slice; it still writes it to storage.
+
 ## meta
 
 | Field | Type | Default | Description |

package/skills/rows/SKILL.md

@@ -17,7 +17,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/row-selection.md'
   - 'Jielga/TMDataGrid:src/docs/row-interaction.md'

package/skills/server-side/SKILL.md

@@ -10,7 +10,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/server-side.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'

package/skills/testing/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.3'
+  library_version: '2.0.0-beta.4'
 sources:
   - 'Jielga/TMDataGrid:src/docs/testing.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/components/TMDataGrid.tsx'

package/src/tmdatagrid/components/TMDataGridEntryRows.tsx

@@ -192,6 +192,9 @@ export function TMDataGridEntryRows({
         data-row-id={entryRow.id}
         data-new
         data-committed={committed}
+        // The same marker body rows carry once committed, so one selector
+        // reaches everything parked in the draft store.
+        data-draft={committed}
         className={classes.entryRow}
       >
         {orderedColumns.map((column) => {

package/src/tmdatagrid/components/TMDataGridTable.tsx

@@ -750,6 +750,14 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       (id) => (state.rows[id]?.dirtyFields.length ?? 0) > 0,
     ),
   );
+  // Rows parked in the draft store, waiting for Save. A separate marker from
+  // `data-dirty`, which covers any row being typed into: after a partial save
+  // these are what is left, so one selector highlights everything still
+  // pending.
+  const editDraftRowIds = useSelector(
+    edit.store,
+    (state) => state.committedRowIds,
+  );
 
   const { loading, noResultsLabel = labels.noResults } =
     table.options.meta ?? {};
@@ -2233,6 +2241,11 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                     editDirtyRowIds.length > 0 &&
                     editDirtyRowIds.includes(row.id)
                   }
+                  // Committed into the draft store, waiting for Save.
+                  data-draft={
+                    editDraftRowIds.length > 0 &&
+                    editDraftRowIds.includes(row.id)
+                  }
                   // The menu is anchored to the rowgroup, so Mantine's own
                   // `data-expanded` lands there rather than on a row. This is
                   // what says which row the open menu is about.

package/src/tmdatagrid/core/controlledState.ts

@@ -0,0 +1,179 @@
+import type { TableState } from "@tanstack/react-table";
+import type { TMDataGridFeatures } from "../useTMDataGrid";
+
+type GridState = TableState<TMDataGridFeatures>;
+
+/**
+ * Support for TanStack's `state` option (controlled state).
+ *
+ * table-core re-reads `options.state` on every render (`useTable` calls
+ * `setOptions` while rendering) and writes any slice whose value is not
+ * identical to the table's current value into the table's atom. The write
+ * publishes the store and re-renders the consumer, so a slice object built in
+ * the render body causes an infinite render loop.
+ *
+ * {@link stabilizeControlledState} prevents the loop by forwarding the
+ * previous render's value for a slice whose contents are unchanged.
+ * {@link findFrozenStateSlices} detects a controlled slice without its
+ * `onXChange` callback, which the grid cannot write to.
+ */
+
+/**
+ * The `onXChange` option that owns each controlled slice - every slice v9
+ * defines. `globalFilterFn` is not among them: in this beta it is a table
+ * option, not state.
+ */
+export const CONTROLLED_SLICE_HANDLERS = {
+  columnFilters: "onColumnFiltersChange",
+  columnOrder: "onColumnOrderChange",
+  columnPinning: "onColumnPinningChange",
+  columnResizing: "onColumnResizingChange",
+  columnSizing: "onColumnSizingChange",
+  columnVisibility: "onColumnVisibilityChange",
+  expanded: "onExpandedChange",
+  globalFilter: "onGlobalFilterChange",
+  grouping: "onGroupingChange",
+  pagination: "onPaginationChange",
+  rowPinning: "onRowPinningChange",
+  rowSelection: "onRowSelectionChange",
+  sorting: "onSortingChange",
+} as const satisfies Partial<Record<keyof GridState, string>>;
+
+export type TMDataGridControlledSlice = keyof typeof CONTROLLED_SLICE_HANDLERS;
+
+/** The options {@link findFrozenStateSlices} reads - a subset of `TableOptions`. */
+type ControlledOptions = {
+  state?: Partial<GridState>;
+  /**
+   * The v9 way of owning a slice: an atom the table writes through directly.
+   * It outranks `state`, so a slice backed by one is never frozen.
+   */
+  atoms?: Record<string, unknown>;
+} & Partial<
+  Record<(typeof CONTROLLED_SLICE_HANDLERS)[TMDataGridControlledSlice], unknown>
+>;
+
+const hasOwn = (value: object, key: string): boolean =>
+  Object.prototype.hasOwnProperty.call(value, key);
+
+/**
+ * A plain data object: `Object.prototype` or null prototype. table-core builds
+ * its state maps with `Object.create(null)`, so null prototypes must compare
+ * as plain objects.
+ */
+function isDataObject(value: unknown): value is Record<string, unknown> {
+  if (typeof value !== "object" || value === null) return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+
+/**
+ * Structural equality for state values.
+ *
+ * `Date`s compare by time; the built-in date filters hold them in filter
+ * values. `Map`s and class instances compare by identity, so a controlled
+ * slice containing one rebuilt each render reads as changed on every render
+ * and re-renders the table. Use primitives, plain objects, arrays or `Date`s
+ * in controlled state.
+ */
+export function sameStateValue(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) return true;
+  if (a instanceof Date || b instanceof Date) {
+    return (
+      a instanceof Date && b instanceof Date && a.getTime() === b.getTime()
+    );
+  }
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b)) return false;
+    return (
+      a.length === b.length &&
+      a.every((item, index) => sameStateValue(item, b[index]))
+    );
+  }
+  if (!isDataObject(a) || !isDataObject(b)) return false;
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) return false;
+  return keys.every((key) => hasOwn(b, key) && sameStateValue(a[key], b[key]));
+}
+
+/**
+ * Removes keys whose value is `undefined`, as in
+ * `state: { sorting: cond ? sorting : undefined }`.
+ *
+ * TanStack's sync writes every present key into the slice's atom, `undefined`
+ * included, which breaks everything that reads the slice. A key set to
+ * `undefined` is treated as not controlled: the key is removed and the slice
+ * falls back to the table's own state. Identity is preserved when there is
+ * nothing to remove; the stabilizer compares by it.
+ */
+export function withoutUndefinedSlices(
+  state: Partial<GridState> | undefined,
+): Partial<GridState> | undefined {
+  if (state === undefined) return state;
+  if (!Object.values(state).includes(undefined)) return state;
+  const compacted: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(state)) {
+    if (value !== undefined) compacted[key] = value;
+  }
+  return compacted as Partial<GridState>;
+}
+
+/**
+ * Returns `next` with every slice that structurally equals its counterpart in
+ * `previous` replaced by the previous object, so table-core's identity-based
+ * sync finds nothing to write. Returns `previous` when nothing changed.
+ */
+export function stabilizeControlledState(
+  next: Partial<GridState> | undefined,
+  previous: Partial<GridState> | undefined,
+): Partial<GridState> | undefined {
+  if (next === undefined || previous === undefined || next === previous) {
+    return next;
+  }
+
+  const keys = Object.keys(next);
+  const stabilized: Record<string, unknown> = {};
+  let changed = keys.length !== Object.keys(previous).length;
+
+  for (const key of keys) {
+    const nextValue = (next as Record<string, unknown>)[key];
+    const previousValue = (previous as Record<string, unknown>)[key];
+    if (hasOwn(previous, key) && sameStateValue(nextValue, previousValue)) {
+      // Unchanged contents: keep the object the table already holds.
+      stabilized[key] = previousValue;
+    } else {
+      stabilized[key] = nextValue;
+      changed = true;
+    }
+  }
+
+  return changed ? (stabilized as Partial<GridState>) : previous;
+}
+
+/**
+ * Controlled slices without a write path: `state.x` is set but no `onXChange`
+ * was passed and no external atom owns the slice. TanStack routes every write
+ * through the callback, so such a slice cannot change. Reported so the hook
+ * can warn in development; `initialState` is the option for a starting value.
+ */
+export function findFrozenStateSlices(
+  options: ControlledOptions,
+): Array<{ slice: TMDataGridControlledSlice; handler: string }> {
+  const state = options.state;
+  if (state === undefined) return [];
+
+  return (
+    Object.entries(CONTROLLED_SLICE_HANDLERS) as Array<
+      [TMDataGridControlledSlice, string]
+    >
+  )
+    .filter(
+      ([slice, handler]) =>
+        // Undefined-valued keys are removed before the table sees them; the
+        // slice is not controlled.
+        (state as Record<string, unknown>)[slice] !== undefined &&
+        (options as Record<string, unknown>)[handler] === undefined &&
+        options.atoms?.[slice] === undefined,
+    )
+    .map(([slice, handler]) => ({ slice, handler }));
+}

package/src/tmdatagrid/core/editEngine.ts

@@ -308,14 +308,53 @@ export type TMDataGridRowDeleteArgs<TData extends RowData> = {
  * Rows still open (undecided form state) are not in here and stay open.
  */
 export type TMDataGridSaveDraftsArgs<TData extends RowData> = {
-  /** Every committed edit to an existing row. */
-  rows: Array<TMDataGridEditCommitArgs<TData>>;
-  /** Every committed new row from the entry block. */
-  added: Array<TMDataGridRowAddArgs<TData>>;
+  /** Committed edits to existing rows; each entry carries its `rowId`. */
+  updated: Array<TMDataGridEditCommitArgs<TData>>;
+  /** Committed new rows from the entry block; each entry carries its `tempId`. */
+  created: Array<TMDataGridRowAddArgs<TData>>;
   /** Ids marked deleted while the drafts accumulated. */
   deleted: Array<string>;
+  /** @deprecated Renamed to {@link updated}. Removed in a later beta. */
+  rows: Array<TMDataGridEditCommitArgs<TData>>;
+  /** @deprecated Renamed to {@link created}. Removed in a later beta. */
+  added: Array<TMDataGridRowAddArgs<TData>>;
 };
 
+/**
+ * Which entries of one bucket saved. `true`, or an id the map does not name,
+ * saved and is dropped from the draft store; `false` failed and keeps its
+ * draft. A bare boolean answers for the whole bucket.
+ */
+export type TMDataGridSaveOutcomes = boolean | Record<string, boolean>;
+
+/**
+ * What `onSaveDrafts` may return to save part of the store.
+ *
+ * Returning nothing saves everything, and throwing saves nothing. Between
+ * those, name the ids that failed: they keep their drafts, committed and
+ * ready for the next save, while the rest are dropped. The grid marks them
+ * with nothing beyond the state itself - a failed edit keeps `data-draft`,
+ * a failed deletion keeps `data-deleted` - so the display is the consumer's.
+ */
+export type TMDataGridSaveDraftsResult = {
+  /** Keyed by `rowId`. */
+  updated?: TMDataGridSaveOutcomes;
+  /** Keyed by `tempId`. */
+  created?: TMDataGridSaveOutcomes;
+  /** Keyed by `rowId`. */
+  deleted?: TMDataGridSaveOutcomes;
+};
+
+/** Whether one id of a bucket saved. Unnamed ids saved. */
+function isSaved(
+  outcomes: TMDataGridSaveOutcomes | undefined,
+  id: string,
+): boolean {
+  if (outcomes === undefined) return true;
+  if (typeof outcomes === "boolean") return outcomes;
+  return outcomes[id] !== false;
+}
+
 /**
  * @deprecated Renamed to {@link TMDataGridSaveDraftsArgs} - the payload is
  * the draft store being saved, not a commit. Removed in a later beta.
@@ -334,7 +373,10 @@ export type TMDataGridEditEngineContext = {
   ) => void | Promise<void>;
   onSaveDrafts?: (
     args: TMDataGridSaveDraftsArgs<TMDataGridRowData>,
-  ) => void | Promise<void>;
+  ) =>
+    | void
+    | TMDataGridSaveDraftsResult
+    | Promise<void | TMDataGridSaveDraftsResult>;
   /**
    * Seed values for `addRow`, under the values it is called with. A function
    * is called per added row.
@@ -1192,15 +1234,24 @@ export function createEditEngine(
     return results.every(Boolean);
   };
 
-  const saveDrafts = async (): Promise<boolean> => {
+  /**
+   * The in-flight save. A second call while `onSaveDrafts` awaits would
+   * re-collect the same payload and send it again - a double-clicked Save
+   * would create every pending entry row twice - so concurrent calls join
+   * this promise instead of starting a save of their own.
+   */
+  let saveInFlight: Promise<boolean> | null = null;
+
+  const saveDrafts = (): Promise<boolean> => {
+    if (saveInFlight !== null) return saveInFlight;
     // While this runs, `commit` really commits - under draft it parks
     // otherwise. Single-threaded flag, same idiom as the collectors.
     savingDrafts = true;
-    try {
-      return await saveDraftsInner();
-    } finally {
+    saveInFlight = saveDraftsInner().finally(() => {
       savingDrafts = false;
-    }
+      saveInFlight = null;
+    });
+    return saveInFlight;
   };
 
   const saveDraftsInner = async (): Promise<boolean> => {
@@ -1248,21 +1299,47 @@ export function createEditEngine(
     }
     const deleted = deletedIds;
     if (collected.length > 0 || added.length > 0 || deleted.length > 0) {
+      let result: void | TMDataGridSaveDraftsResult;
       try {
-        await getContext().onSaveDrafts?.({ rows: collected, added, deleted });
+        result = await getContext().onSaveDrafts?.({
+          updated: collected,
+          created: added,
+          deleted,
+          // The pre-2.0 names, still filled - see TMDataGridSaveDraftsArgs.
+          rows: collected,
+          added,
+        });
       } catch {
         return false;
       }
-      for (const args of collected) drop(args.rowId);
-      for (const args of added) drop(args.tempId);
-      if (deleted.length > 0) {
+
+      // Nothing returned saves the lot. A result names what failed; those
+      // keep their drafts, committed, so the next save retries them.
+      const outcomes = result ?? {};
+      let savedAll = true;
+
+      for (const args of collected) {
+        if (isSaved(outcomes.updated, args.rowId)) drop(args.rowId);
+        else savedAll = false;
+      }
+      for (const args of added) {
+        if (isSaved(outcomes.created, args.tempId)) drop(args.tempId);
+        else savedAll = false;
+      }
+      const savedDeletions = deleted.filter((id) =>
+        isSaved(outcomes.deleted, id),
+      );
+      if (savedDeletions.length > 0) {
         store.setState((prev) => ({
           ...prev,
           deletedRowIds: prev.deletedRowIds.filter(
-            (id) => !deleted.includes(id),
+            (id) => !savedDeletions.includes(id),
           ),
         }));
       }
+      if (savedDeletions.length < deleted.length) savedAll = false;
+
+      if (!savedAll) return false;
     }
     return allValid;
   };

package/src/tmdatagrid/index.ts

@@ -83,6 +83,8 @@ export {
   type TMDataGridEditChange,
   type TMDataGridEditCommitArgs,
   type TMDataGridSaveDraftsArgs,
+  type TMDataGridSaveDraftsResult,
+  type TMDataGridSaveOutcomes,
   type TMDataGridEditCommitDraftsArgs,
   type TMDataGridAddRowsOptions,
   type TMDataGridAddRowsResult,