@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/DataTable/useCellEditingState.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo, useContext } from "react";
+const EDITABLE_CELL_ATTR = "data-datatable-editable-cell";
+const buildEditableCellKey = (rowId, columnId) => `${rowId}::${columnId}`;
+const DataTableCellEditingContext = createContext(null);
+const useDataTableCellEditing = () => useContext(DataTableCellEditingContext);
+const DataTableCellEditingProvider = ({ children }) => {
+  const [editingCellKey, setEditingCellKey] = useState(null);
+  const startEditing = useCallback((cellKey) => setEditingCellKey(cellKey), []);
+  const stopEditing = useCallback(() => setEditingCellKey(null), []);
+  const navigate = useCallback((currentCellKey, direction) => {
+    const cells = Array.from(document.querySelectorAll(`[${EDITABLE_CELL_ATTR}]`)).map((node) => node.getAttribute(EDITABLE_CELL_ATTR) ?? "").filter((key) => key !== "");
+    const index = cells.indexOf(currentCellKey);
+    if (index === -1) {
+      setEditingCellKey(null);
+      return;
+    }
+    const next = cells[(index + direction + cells.length) % cells.length];
+    setEditingCellKey(next === currentCellKey ? null : next);
+  }, []);
+  const value = useMemo(
+    () => ({ editingCellKey, startEditing, stopEditing, navigate }),
+    [editingCellKey, startEditing, stopEditing, navigate]
+  );
+  return /* @__PURE__ */ jsx(DataTableCellEditingContext.Provider, { value, children });
+};
+export {
+  EDITABLE_CELL_ATTR,
+  buildEditableCellKey,
+  DataTableCellEditingProvider as default,
+  useDataTableCellEditing
+};
+//# sourceMappingURL=useCellEditingState.js.map

package/dist/components/UI/DataTable/useCellEditingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCellEditingState.js","sources":["../../../../src/components/UI/DataTable/useCellEditingState.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';\n\n/** Marca a célula editável no DOM para que a navegação por Tab siga a ordem visual da tabela. */\nexport const EDITABLE_CELL_ATTR = 'data-datatable-editable-cell';\n\nexport const buildEditableCellKey = (rowId: string, columnId: string): string => `${rowId}::${columnId}`;\n\ninterface IDataTableCellEditing {\n  editingCellKey: string | null;\n  startEditing: (cellKey: string) => void;\n  stopEditing: () => void;\n  navigate: (currentCellKey: string, direction: 1 | -1) => void;\n}\n\nconst DataTableCellEditingContext = createContext<IDataTableCellEditing | null>(null);\n\n/** Estado da célula em edição no modo `editing.clickToEdit`; `null` fora dele. */\nexport const useDataTableCellEditing = (): IDataTableCellEditing | null => useContext(DataTableCellEditingContext);\n\n/**\n * Guarda qual célula está aberta para edição. Vive em um provider próprio para que abrir ou fechar\n * uma célula re-renderize apenas as células, nunca a tabela inteira.\n */\nconst DataTableCellEditingProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [editingCellKey, setEditingCellKey] = useState<string | null>(null);\n\n  const startEditing = useCallback((cellKey: string) => setEditingCellKey(cellKey), []);\n  const stopEditing = useCallback(() => setEditingCellKey(null), []);\n\n  // A ordem vem do DOM: as células editáveis se marcam com `EDITABLE_CELL_ATTR`, então Tab anda na\n  // mesma sequência que o usuário lê, sem a tabela precisar manter um índice paralelo.\n  const navigate = useCallback((currentCellKey: string, direction: 1 | -1) => {\n    const cells = Array.from(document.querySelectorAll<HTMLElement>(`[${EDITABLE_CELL_ATTR}]`))\n      .map((node) => node.getAttribute(EDITABLE_CELL_ATTR) ?? '')\n      .filter((key) => key !== '');\n    const index = cells.indexOf(currentCellKey);\n    if (index === -1) {\n      setEditingCellKey(null);\n      return;\n    }\n    const next = cells[(index + direction + cells.length) % cells.length];\n    setEditingCellKey(next === currentCellKey ? null : next);\n  }, []);\n\n  const value = useMemo<IDataTableCellEditing>(\n    () => ({ editingCellKey, startEditing, stopEditing, navigate }),\n    [editingCellKey, startEditing, stopEditing, navigate],\n  );\n\n  return <DataTableCellEditingContext.Provider value={value}>{children}</DataTableCellEditingContext.Provider>;\n};\n\nexport default DataTableCellEditingProvider;\n"],"names":[],"mappings":";;AAGO,MAAM,qBAAqB;AAE3B,MAAM,uBAAuB,CAAC,OAAe,aAA6B,GAAG,KAAK,KAAK,QAAQ;AAStG,MAAM,8BAA8B,cAA4C,IAAI;AAG7E,MAAM,0BAA0B,MAAoC,WAAW,2BAA2B;AAMjH,MAAM,+BAAwE,CAAC,EAAE,eAAe;AAC9F,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AAExE,QAAM,eAAe,YAAY,CAAC,YAAoB,kBAAkB,OAAO,GAAG,EAAE;AACpF,QAAM,cAAc,YAAY,MAAM,kBAAkB,IAAI,GAAG,CAAA,CAAE;AAIjE,QAAM,WAAW,YAAY,CAAC,gBAAwB,cAAsB;AAC1E,UAAM,QAAQ,MAAM,KAAK,SAAS,iBAA8B,IAAI,kBAAkB,GAAG,CAAC,EACvF,IAAI,CAAC,SAAS,KAAK,aAAa,kBAAkB,KAAK,EAAE,EACzD,OAAO,CAAC,QAAQ,QAAQ,EAAE;AAC7B,UAAM,QAAQ,MAAM,QAAQ,cAAc;AAC1C,QAAI,UAAU,IAAI;AAChB,wBAAkB,IAAI;AACtB;AAAA,IACF;AACA,UAAM,OAAO,OAAO,QAAQ,YAAY,MAAM,UAAU,MAAM,MAAM;AACpE,sBAAkB,SAAS,iBAAiB,OAAO,IAAI;AAAA,EACzD,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,gBAAgB,cAAc,aAAa,SAAA;AAAA,IACpD,CAAC,gBAAgB,cAAc,aAAa,QAAQ;AAAA,EAAA;AAGtD,SAAO,oBAAC,4BAA4B,UAA5B,EAAqC,OAAe,SAAA,CAAS;AACvE;"}

package/dist/components/UI/DataTable/useColumnOrder.d.ts

@@ -0,0 +1,25 @@
+import { Updater } from '@tanstack/react-table';
+import { IDataTableColumnConfig, IDataTableConfig, IDataTableRow } from './types';
+export declare const getFixedEndColumns: <T extends IDataTableRow>(columns: Array<IDataTableColumnConfig<T>>) => Array<IDataTableColumnConfig<T>>;
+export declare const getFixedStartColumns: <T extends IDataTableRow>(columns: Array<IDataTableColumnConfig<T>>) => Array<IDataTableColumnConfig<T>>;
+export declare const getReorderableColumns: <T extends IDataTableRow>(columns: Array<IDataTableColumnConfig<T>>) => Array<IDataTableColumnConfig<T>>;
+export declare const resolveColumnOrder: <R extends IDataTableRow>(storageKey: string, columns: Array<IDataTableColumnConfig<R>>) => Array<string>;
+interface IUseColumnOrderResult {
+    columnOrder: Array<string>;
+    onColumnOrderChange: (updater: Updater<Array<string>>) => void;
+    resetColumnOrder: () => void;
+}
+export declare const useColumnOrder: <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>(config: IDataTableConfig<T, C>) => IUseColumnOrderResult;
+interface IUseDetailColumnOrderResult {
+    detailColumnOrder: Array<string>;
+    onDetailColumnOrderChange: (updater: Updater<Array<string>>) => void;
+    resetDetailColumnOrder: () => void;
+}
+/**
+ * Column order for the nested detail table of a `detailTable` expansion.
+ * Same reconcile/persist semantics as the parent order, stored under the
+ * detail entry (`${entityKey}:detail`). Pass `null` columns for tables without
+ * a detailTable expansion: the hook is inert then.
+ */
+export declare const useDetailColumnOrder: <C extends IDataTableRow>(entityKey: string, columns: Array<IDataTableColumnConfig<C>> | null) => IUseDetailColumnOrderResult;
+export {};

package/dist/components/UI/DataTable/useColumnOrder.js

@@ -0,0 +1,94 @@
+import { useState, useEffect } from "react";
+import { readColumnsEntry, writeColumnsEntry, detailColumnsEntryKey } from "./dataTableColumnsStore.js";
+const getFixedEndColumns = (columns) => (columns ?? []).filter((column) => column.type === "actions");
+const getFixedStartColumns = (columns) => (columns ?? []).filter((column) => column.type !== "actions" && column.hideable === false);
+const getReorderableColumns = (columns) => (columns ?? []).filter((column) => column.type !== "actions" && column.hideable !== false);
+const mergeReorderableOrder = (reorderableIds, persistedIds) => {
+  const defaultIndexById = new Map(reorderableIds.map((id, index) => [id, index]));
+  const result = persistedIds.filter((id) => defaultIndexById.has(id));
+  const persistedSet = new Set(result);
+  for (const id of reorderableIds) {
+    if (persistedSet.has(id)) continue;
+    const defaultIndex = defaultIndexById.get(id) ?? 0;
+    const insertAt = result.findIndex((existingId) => (defaultIndexById.get(existingId) ?? 0) > defaultIndex);
+    if (insertAt === -1) result.push(id);
+    else result.splice(insertAt, 0, id);
+  }
+  return result;
+};
+const buildDefaultColumnOrder = (columns) => [
+  ...getFixedStartColumns(columns).map((column) => column.id),
+  ...getReorderableColumns(columns).map((column) => column.id),
+  ...getFixedEndColumns(columns).map((column) => column.id)
+];
+const resolveColumnOrder = (storageKey, columns) => {
+  const reorderableIds = getReorderableColumns(columns).map((column) => column.id);
+  const persisted = readColumnsEntry(storageKey).order;
+  const mergedReorderable = persisted ? mergeReorderableOrder(reorderableIds, persisted) : reorderableIds;
+  return [
+    ...getFixedStartColumns(columns).map((column) => column.id),
+    ...mergedReorderable,
+    ...getFixedEndColumns(columns).map((column) => column.id)
+  ];
+};
+const reconcileColumnOrder = (previous, columns) => {
+  const reorderableIds = getReorderableColumns(columns).map((column) => column.id);
+  const reorderableIdSet = new Set(reorderableIds);
+  const previousReorderable = previous.filter((id) => reorderableIdSet.has(id));
+  const next = [
+    ...getFixedStartColumns(columns).map((column) => column.id),
+    ...mergeReorderableOrder(reorderableIds, previousReorderable),
+    ...getFixedEndColumns(columns).map((column) => column.id)
+  ];
+  return next.length === previous.length && next.every((id, index) => id === previous[index]) ? previous : next;
+};
+const useColumnOrder = (config) => {
+  const [columnOrder, setColumnOrder] = useState(
+    () => resolveColumnOrder(config.entityKey, config.columns)
+  );
+  const onColumnOrderChange = (updater) => {
+    setColumnOrder((previous) => typeof updater === "function" ? updater(previous) : updater);
+  };
+  const resetColumnOrder = () => {
+    setColumnOrder(buildDefaultColumnOrder(config.columns));
+  };
+  const columnIdsSignature = config.columns.map((column) => column.id).join("|");
+  useEffect(() => {
+    setColumnOrder((previous) => reconcileColumnOrder(previous, config.columns));
+  }, [columnIdsSignature]);
+  useEffect(() => {
+    writeColumnsEntry(config.entityKey, { order: columnOrder });
+  }, [config.entityKey, columnOrder]);
+  return { columnOrder, onColumnOrderChange, resetColumnOrder };
+};
+const useDetailColumnOrder = (entityKey, columns) => {
+  const [detailColumnOrder, setDetailColumnOrder] = useState(
+    () => columns ? resolveColumnOrder(detailColumnsEntryKey(entityKey), columns) : []
+  );
+  const onDetailColumnOrderChange = (updater) => {
+    setDetailColumnOrder((previous) => typeof updater === "function" ? updater(previous) : updater);
+  };
+  const resetDetailColumnOrder = () => {
+    if (columns) setDetailColumnOrder(buildDefaultColumnOrder(columns));
+  };
+  const hasDetailColumns = !!columns;
+  const detailColumnIdsSignature = (columns ?? []).map((column) => column.id).join("|");
+  useEffect(() => {
+    if (!columns) return;
+    setDetailColumnOrder((previous) => reconcileColumnOrder(previous, columns));
+  }, [detailColumnIdsSignature, hasDetailColumns]);
+  useEffect(() => {
+    if (!hasDetailColumns) return;
+    writeColumnsEntry(detailColumnsEntryKey(entityKey), { order: detailColumnOrder });
+  }, [entityKey, hasDetailColumns, detailColumnOrder]);
+  return { detailColumnOrder, onDetailColumnOrderChange, resetDetailColumnOrder };
+};
+export {
+  getFixedEndColumns,
+  getFixedStartColumns,
+  getReorderableColumns,
+  resolveColumnOrder,
+  useColumnOrder,
+  useDetailColumnOrder
+};
+//# sourceMappingURL=useColumnOrder.js.map

package/dist/components/UI/DataTable/useColumnOrder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnOrder.js","sources":["../../../../src/components/UI/DataTable/useColumnOrder.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { Updater } from '@tanstack/react-table';\n\nimport { detailColumnsEntryKey, readColumnsEntry, writeColumnsEntry } from './dataTableColumnsStore';\nimport type { IDataTableColumnConfig, IDataTableConfig, IDataTableRow } from './types';\n\n// Fixed columns never enter the drag list. Identity/first columns (`hideable:\n// false`) stay pinned to the start; the `actions` column stays pinned to the\n// end. Only the middle columns are reorderable. `actions` is checked first so a\n// column that is both non-hideable and `actions` lands at the end, not the start.\nexport const getFixedEndColumns = <T extends IDataTableRow>(\n  columns: Array<IDataTableColumnConfig<T>>,\n): Array<IDataTableColumnConfig<T>> => (columns ?? []).filter((column) => column.type === 'actions');\n\nexport const getFixedStartColumns = <T extends IDataTableRow>(\n  columns: Array<IDataTableColumnConfig<T>>,\n): Array<IDataTableColumnConfig<T>> =>\n  (columns ?? []).filter((column) => column.type !== 'actions' && column.hideable === false);\n\nexport const getReorderableColumns = <T extends IDataTableRow>(\n  columns: Array<IDataTableColumnConfig<T>>,\n): Array<IDataTableColumnConfig<T>> =>\n  (columns ?? []).filter((column) => column.type !== 'actions' && column.hideable !== false);\n\n// Reconcile the persisted reorderable ids with the current config:\n// - keep saved ids that are still reorderable, in the saved order;\n// - drop obsolete ids silently (they are absent from the current config);\n// - insert reorderable ids missing from persistence at their default config\n//   position (relative to the other reorderable columns).\nconst mergeReorderableOrder = (reorderableIds: Array<string>, persistedIds: Array<string>): Array<string> => {\n  const defaultIndexById = new Map(reorderableIds.map((id, index) => [id, index]));\n\n  const result = persistedIds.filter((id) => defaultIndexById.has(id));\n  const persistedSet = new Set(result);\n\n  for (const id of reorderableIds) {\n    if (persistedSet.has(id)) continue;\n\n    const defaultIndex = defaultIndexById.get(id) ?? 0;\n    const insertAt = result.findIndex((existingId) => (defaultIndexById.get(existingId) ?? 0) > defaultIndex);\n\n    if (insertAt === -1) result.push(id);\n    else result.splice(insertAt, 0, id);\n  }\n\n  return result;\n};\n\nconst buildDefaultColumnOrder = <R extends IDataTableRow>(columns: Array<IDataTableColumnConfig<R>>): Array<string> => [\n  ...getFixedStartColumns(columns).map((column) => column.id),\n  ...getReorderableColumns(columns).map((column) => column.id),\n  ...getFixedEndColumns(columns).map((column) => column.id),\n];\n\n// Full column order = fixed start + (persisted-merged) reorderable + fixed end.\n// Fixed columns are always re-anchored from the current config, so a column that\n// changed to fixed since the order was saved lands in the right bucket.\nexport const resolveColumnOrder = <R extends IDataTableRow>(\n  storageKey: string,\n  columns: Array<IDataTableColumnConfig<R>>,\n): Array<string> => {\n  const reorderableIds = getReorderableColumns(columns).map((column) => column.id);\n  const persisted = readColumnsEntry(storageKey).order;\n  const mergedReorderable = persisted ? mergeReorderableOrder(reorderableIds, persisted) : reorderableIds;\n\n  return [\n    ...getFixedStartColumns(columns).map((column) => column.id),\n    ...mergedReorderable,\n    ...getFixedEndColumns(columns).map((column) => column.id),\n  ];\n};\n\ninterface IUseColumnOrderResult {\n  columnOrder: Array<string>;\n  onColumnOrderChange: (updater: Updater<Array<string>>) => void;\n  resetColumnOrder: () => void;\n}\n\n// Reconcile a stateful order with the CURRENT config columns. Columns that\n// appeared since the state was built (async/dynamic columns) land at their\n// config position instead of being appended by TanStack; columns that left are\n// dropped; the user's order of surviving reorderable columns is preserved.\n// Returns the previous array identity when nothing changed, so the sync effect\n// below never loops.\nconst reconcileColumnOrder = <R extends IDataTableRow>(\n  previous: Array<string>,\n  columns: Array<IDataTableColumnConfig<R>>,\n): Array<string> => {\n  const reorderableIds = getReorderableColumns(columns).map((column) => column.id);\n  const reorderableIdSet = new Set(reorderableIds);\n  const previousReorderable = previous.filter((id) => reorderableIdSet.has(id));\n\n  const next = [\n    ...getFixedStartColumns(columns).map((column) => column.id),\n    ...mergeReorderableOrder(reorderableIds, previousReorderable),\n    ...getFixedEndColumns(columns).map((column) => column.id),\n  ];\n\n  return next.length === previous.length && next.every((id, index) => id === previous[index]) ? previous : next;\n};\n\nexport const useColumnOrder = <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>(\n  config: IDataTableConfig<T, C>,\n): IUseColumnOrderResult => {\n  const [columnOrder, setColumnOrder] = useState<Array<string>>(() =>\n    resolveColumnOrder(config.entityKey, config.columns),\n  );\n\n  const onColumnOrderChange = (updater: Updater<Array<string>>) => {\n    setColumnOrder((previous) => (typeof updater === 'function' ? updater(previous) : updater));\n  };\n\n  const resetColumnOrder = () => {\n    setColumnOrder(buildDefaultColumnOrder(config.columns));\n  };\n\n  // Config columns can change while mounted (columns fetched async, dynamic\n  // catalogs). Re-anchor the order so new ids take their config position.\n  const columnIdsSignature = config.columns.map((column) => column.id).join('|');\n  useEffect(() => {\n    setColumnOrder((previous) => reconcileColumnOrder(previous, config.columns));\n  }, [columnIdsSignature]);\n\n  useEffect(() => {\n    writeColumnsEntry(config.entityKey, { order: columnOrder });\n  }, [config.entityKey, columnOrder]);\n\n  return { columnOrder, onColumnOrderChange, resetColumnOrder };\n};\n\ninterface IUseDetailColumnOrderResult {\n  detailColumnOrder: Array<string>;\n  onDetailColumnOrderChange: (updater: Updater<Array<string>>) => void;\n  resetDetailColumnOrder: () => void;\n}\n\n/**\n * Column order for the nested detail table of a `detailTable` expansion.\n * Same reconcile/persist semantics as the parent order, stored under the\n * detail entry (`${entityKey}:detail`). Pass `null` columns for tables without\n * a detailTable expansion: the hook is inert then.\n */\nexport const useDetailColumnOrder = <C extends IDataTableRow>(\n  entityKey: string,\n  columns: Array<IDataTableColumnConfig<C>> | null,\n): IUseDetailColumnOrderResult => {\n  const [detailColumnOrder, setDetailColumnOrder] = useState<Array<string>>(() =>\n    columns ? resolveColumnOrder(detailColumnsEntryKey(entityKey), columns) : [],\n  );\n\n  const onDetailColumnOrderChange = (updater: Updater<Array<string>>) => {\n    setDetailColumnOrder((previous) => (typeof updater === 'function' ? updater(previous) : updater));\n  };\n\n  const resetDetailColumnOrder = () => {\n    if (columns) setDetailColumnOrder(buildDefaultColumnOrder(columns));\n  };\n\n  const hasDetailColumns = !!columns;\n\n  // Same re-anchoring as the parent order when the detail columns change while mounted.\n  const detailColumnIdsSignature = (columns ?? []).map((column) => column.id).join('|');\n  useEffect(() => {\n    if (!columns) return;\n    setDetailColumnOrder((previous) => reconcileColumnOrder(previous, columns));\n  }, [detailColumnIdsSignature, hasDetailColumns]);\n\n  useEffect(() => {\n    if (!hasDetailColumns) return;\n    writeColumnsEntry(detailColumnsEntryKey(entityKey), { order: detailColumnOrder });\n  }, [entityKey, hasDetailColumns, detailColumnOrder]);\n\n  return { detailColumnOrder, onDetailColumnOrderChange, resetDetailColumnOrder };\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/useColumnSizing.d.ts

@@ -0,0 +1,9 @@
+import { ColumnSizingState, Updater } from '@tanstack/react-table';
+import { IDataTableConfig, IDataTableRow } from './types';
+interface IUseColumnSizingResult {
+    columnSizing: ColumnSizingState;
+    onColumnSizingChange: (updater: Updater<ColumnSizingState>) => void;
+    resetColumnSizing: () => void;
+}
+export declare const useColumnSizing: <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>(config: IDataTableConfig<T, C>) => IUseColumnSizingResult;
+export {};

package/dist/components/UI/DataTable/useColumnSizing.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+import { readColumnsEntry, writeColumnsEntry } from "./dataTableColumnsStore.js";
+const useColumnSizing = (config) => {
+  const [columnSizing, setColumnSizing] = useState(
+    () => readColumnsEntry(config.entityKey).sizing ?? {}
+  );
+  const onColumnSizingChange = (updater) => {
+    setColumnSizing((previous) => typeof updater === "function" ? updater(previous) : updater);
+  };
+  const resetColumnSizing = () => {
+    setColumnSizing({});
+  };
+  useEffect(() => {
+    writeColumnsEntry(config.entityKey, { sizing: columnSizing });
+  }, [config.entityKey, columnSizing]);
+  return { columnSizing, onColumnSizingChange, resetColumnSizing };
+};
+export {
+  useColumnSizing
+};
+//# sourceMappingURL=useColumnSizing.js.map

package/dist/components/UI/DataTable/useColumnSizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnSizing.js","sources":["../../../../src/components/UI/DataTable/useColumnSizing.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { ColumnSizingState, Updater } from '@tanstack/react-table';\n\nimport { readColumnsEntry, writeColumnsEntry } from './dataTableColumnsStore';\nimport type { IDataTableConfig, IDataTableRow } from './types';\n\ninterface IUseColumnSizingResult {\n  columnSizing: ColumnSizingState;\n  onColumnSizingChange: (updater: Updater<ColumnSizingState>) => void;\n  resetColumnSizing: () => void;\n}\n\n// An empty sizing map means \"use the seeded default widths\", so appearance is\n// preserved until the user drags a column edge. Persisted widths (per column id)\n// override the seed. Mirrors useColumnVisibility/useColumnOrder: state seeded\n// from the shared columns entry and written back on every change.\nexport const useColumnSizing = <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>(\n  config: IDataTableConfig<T, C>,\n): IUseColumnSizingResult => {\n  const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(\n    () => readColumnsEntry(config.entityKey).sizing ?? {},\n  );\n\n  const onColumnSizingChange = (updater: Updater<ColumnSizingState>) => {\n    setColumnSizing((previous) => (typeof updater === 'function' ? updater(previous) : updater));\n  };\n\n  const resetColumnSizing = () => {\n    setColumnSizing({});\n  };\n\n  useEffect(() => {\n    writeColumnsEntry(config.entityKey, { sizing: columnSizing });\n  }, [config.entityKey, columnSizing]);\n\n  return { columnSizing, onColumnSizingChange, resetColumnSizing };\n};\n"],"names":[],"mappings":";;AAiBO,MAAM,kBAAkB,CAC7B,WAC2B;AAC3B,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC,MAAM,iBAAiB,OAAO,SAAS,EAAE,UAAU,CAAA;AAAA,EAAC;AAGtD,QAAM,uBAAuB,CAAC,YAAwC;AACpE,oBAAgB,CAAC,aAAc,OAAO,YAAY,aAAa,QAAQ,QAAQ,IAAI,OAAQ;AAAA,EAC7F;AAEA,QAAM,oBAAoB,MAAM;AAC9B,oBAAgB,CAAA,CAAE;AAAA,EACpB;AAEA,YAAU,MAAM;AACd,sBAAkB,OAAO,WAAW,EAAE,QAAQ,cAAc;AAAA,EAC9D,GAAG,CAAC,OAAO,WAAW,YAAY,CAAC;AAEnC,SAAO,EAAE,cAAc,sBAAsB,kBAAA;AAC/C;"}

package/dist/components/UI/DataTable/useColumnVisibility.d.ts

@@ -0,0 +1,19 @@
+import { Updater, VisibilityState } from '@tanstack/react-table';
+import { IDataTableColumnConfig, IDataTableConfig, IDataTableRow } from './types';
+interface IUseColumnVisibilityResult {
+    columnVisibility: VisibilityState;
+    onColumnVisibilityChange: (updater: Updater<VisibilityState>) => void;
+}
+export declare const useColumnVisibility: <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>(config: IDataTableConfig<T, C>) => IUseColumnVisibilityResult;
+interface IUseDetailColumnVisibilityResult {
+    detailColumnVisibility: VisibilityState;
+    toggleDetailColumn: (columnId: string) => void;
+}
+/**
+ * Visibility state for the nested detail table of a `detailTable` expansion.
+ * Lives at the DataTable level (not per expanded row) so every open detail
+ * table shares one state and one persisted entry. Pass `null` columns for
+ * tables without a detailTable expansion: the hook is inert then.
+ */
+export declare const useDetailColumnVisibility: <C extends IDataTableRow>(entityKey: string, columns: Array<IDataTableColumnConfig<C>> | null) => IUseDetailColumnVisibilityResult;
+export {};

package/dist/components/UI/DataTable/useColumnVisibility.js

@@ -0,0 +1,47 @@
+import { useState, useEffect } from "react";
+import { writeColumnsEntry, detailColumnsEntryKey, readColumnsEntry } from "./dataTableColumnsStore.js";
+const resolveInitialColumnVisibility = (storageKey, columns) => {
+  const visibility = {};
+  for (const column of columns) {
+    if (column.hideable === false) continue;
+    if (column.defaultHidden) visibility[column.id] = false;
+  }
+  const persisted = readColumnsEntry(storageKey).visibility;
+  if (!persisted) return visibility;
+  for (const column of columns) {
+    if (column.hideable === false) continue;
+    if (typeof persisted[column.id] === "boolean") visibility[column.id] = persisted[column.id];
+  }
+  return visibility;
+};
+const useColumnVisibility = (config) => {
+  const [columnVisibility, setColumnVisibility] = useState(
+    () => resolveInitialColumnVisibility(config.entityKey, config.columns)
+  );
+  const onColumnVisibilityChange = (updater) => {
+    setColumnVisibility((previous) => typeof updater === "function" ? updater(previous) : updater);
+  };
+  useEffect(() => {
+    writeColumnsEntry(config.entityKey, { visibility: columnVisibility });
+  }, [config.entityKey, columnVisibility]);
+  return { columnVisibility, onColumnVisibilityChange };
+};
+const useDetailColumnVisibility = (entityKey, columns) => {
+  const [detailColumnVisibility, setDetailColumnVisibility] = useState(
+    () => columns ? resolveInitialColumnVisibility(detailColumnsEntryKey(entityKey), columns) : {}
+  );
+  const toggleDetailColumn = (columnId) => {
+    setDetailColumnVisibility((previous) => ({ ...previous, [columnId]: !(previous[columnId] ?? true) }));
+  };
+  const hasDetailColumns = !!columns;
+  useEffect(() => {
+    if (!hasDetailColumns) return;
+    writeColumnsEntry(detailColumnsEntryKey(entityKey), { visibility: detailColumnVisibility });
+  }, [entityKey, hasDetailColumns, detailColumnVisibility]);
+  return { detailColumnVisibility, toggleDetailColumn };
+};
+export {
+  useColumnVisibility,
+  useDetailColumnVisibility
+};
+//# sourceMappingURL=useColumnVisibility.js.map

package/dist/components/UI/DataTable/useColumnVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnVisibility.js","sources":["../../../../src/components/UI/DataTable/useColumnVisibility.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { Updater, VisibilityState } from '@tanstack/react-table';\n\nimport { detailColumnsEntryKey, readColumnsEntry, writeColumnsEntry } from './dataTableColumnsStore';\nimport type { IDataTableColumnConfig, IDataTableConfig, IDataTableRow } from './types';\n\n// Non-hideable columns are always forced visible. The persisted map only ever\n// stores the state of hideable columns, so it can never blank out the table.\nconst resolveInitialColumnVisibility = <R extends IDataTableRow>(\n  storageKey: string,\n  columns: Array<IDataTableColumnConfig<R>>,\n): VisibilityState => {\n  const visibility: VisibilityState = {};\n\n  for (const column of columns) {\n    if (column.hideable === false) continue;\n    if (column.defaultHidden) visibility[column.id] = false;\n  }\n\n  const persisted = readColumnsEntry(storageKey).visibility;\n  if (!persisted) return visibility;\n\n  for (const column of columns) {\n    if (column.hideable === false) continue;\n    if (typeof persisted[column.id] === 'boolean') visibility[column.id] = persisted[column.id];\n  }\n\n  return visibility;\n};\n\ninterface IUseColumnVisibilityResult {\n  columnVisibility: VisibilityState;\n  onColumnVisibilityChange: (updater: Updater<VisibilityState>) => void;\n}\n\nexport const useColumnVisibility = <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>(\n  config: IDataTableConfig<T, C>,\n): IUseColumnVisibilityResult => {\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(() =>\n    resolveInitialColumnVisibility(config.entityKey, config.columns),\n  );\n\n  const onColumnVisibilityChange = (updater: Updater<VisibilityState>) => {\n    setColumnVisibility((previous) => (typeof updater === 'function' ? updater(previous) : updater));\n  };\n\n  useEffect(() => {\n    writeColumnsEntry(config.entityKey, { visibility: columnVisibility });\n  }, [config.entityKey, columnVisibility]);\n\n  return { columnVisibility, onColumnVisibilityChange };\n};\n\ninterface IUseDetailColumnVisibilityResult {\n  detailColumnVisibility: VisibilityState;\n  toggleDetailColumn: (columnId: string) => void;\n}\n\n/**\n * Visibility state for the nested detail table of a `detailTable` expansion.\n * Lives at the DataTable level (not per expanded row) so every open detail\n * table shares one state and one persisted entry. Pass `null` columns for\n * tables without a detailTable expansion: the hook is inert then.\n */\nexport const useDetailColumnVisibility = <C extends IDataTableRow>(\n  entityKey: string,\n  columns: Array<IDataTableColumnConfig<C>> | null,\n): IUseDetailColumnVisibilityResult => {\n  const [detailColumnVisibility, setDetailColumnVisibility] = useState<VisibilityState>(() =>\n    columns ? resolveInitialColumnVisibility(detailColumnsEntryKey(entityKey), columns) : {},\n  );\n\n  const toggleDetailColumn = (columnId: string) => {\n    setDetailColumnVisibility((previous) => ({ ...previous, [columnId]: !(previous[columnId] ?? true) }));\n  };\n\n  const hasDetailColumns = !!columns;\n\n  useEffect(() => {\n    if (!hasDetailColumns) return;\n    writeColumnsEntry(detailColumnsEntryKey(entityKey), { visibility: detailColumnVisibility });\n  }, [entityKey, hasDetailColumns, detailColumnVisibility]);\n\n  return { detailColumnVisibility, toggleDetailColumn };\n};\n"],"names":[],"mappings":";;AASA,MAAM,iCAAiC,CACrC,YACA,YACoB;AACpB,QAAM,aAA8B,CAAA;AAEpC,aAAW,UAAU,SAAS;AAC5B,QAAI,OAAO,aAAa,MAAO;AAC/B,QAAI,OAAO,cAAe,YAAW,OAAO,EAAE,IAAI;AAAA,EACpD;AAEA,QAAM,YAAY,iBAAiB,UAAU,EAAE;AAC/C,MAAI,CAAC,UAAW,QAAO;AAEvB,aAAW,UAAU,SAAS;AAC5B,QAAI,OAAO,aAAa,MAAO;AAC/B,QAAI,OAAO,UAAU,OAAO,EAAE,MAAM,UAAW,YAAW,OAAO,EAAE,IAAI,UAAU,OAAO,EAAE;AAAA,EAC5F;AAEA,SAAO;AACT;AAOO,MAAM,sBAAsB,CACjC,WAC+B;AAC/B,QAAM,CAAC,kBAAkB,mBAAmB,IAAI;AAAA,IAA0B,MACxE,+BAA+B,OAAO,WAAW,OAAO,OAAO;AAAA,EAAA;AAGjE,QAAM,2BAA2B,CAAC,YAAsC;AACtE,wBAAoB,CAAC,aAAc,OAAO,YAAY,aAAa,QAAQ,QAAQ,IAAI,OAAQ;AAAA,EACjG;AAEA,YAAU,MAAM;AACd,sBAAkB,OAAO,WAAW,EAAE,YAAY,kBAAkB;AAAA,EACtE,GAAG,CAAC,OAAO,WAAW,gBAAgB,CAAC;AAEvC,SAAO,EAAE,kBAAkB,yBAAA;AAC7B;AAaO,MAAM,4BAA4B,CACvC,WACA,YACqC;AACrC,QAAM,CAAC,wBAAwB,yBAAyB,IAAI;AAAA,IAA0B,MACpF,UAAU,+BAA+B,sBAAsB,SAAS,GAAG,OAAO,IAAI,CAAA;AAAA,EAAC;AAGzF,QAAM,qBAAqB,CAAC,aAAqB;AAC/C,8BAA0B,CAAC,cAAc,EAAE,GAAG,UAAU,CAAC,QAAQ,GAAG,EAAE,SAAS,QAAQ,KAAK,QAAQ;AAAA,EACtG;AAEA,QAAM,mBAAmB,CAAC,CAAC;AAE3B,YAAU,MAAM;AACd,QAAI,CAAC,iBAAkB;AACvB,sBAAkB,sBAAsB,SAAS,GAAG,EAAE,YAAY,wBAAwB;AAAA,EAC5F,GAAG,CAAC,WAAW,kBAAkB,sBAAsB,CAAC;AAExD,SAAO,EAAE,wBAAwB,mBAAA;AACnC;"}

package/dist/components/UI/DataTable/useDataTableCommitQueue.d.ts

@@ -0,0 +1,69 @@
+import { IDataTableFillChange, IDataTableRow } from './types';
+export type TDataTableCommitStatus = 'pending' | 'saving' | 'saved' | 'error';
+export interface IDataTableCommitItem<T extends IDataTableRow> {
+    row: T;
+    /** Accumulated values for that row, keyed by column id. */
+    changes: Record<string, unknown>;
+}
+/**
+ * Per-row outcome of a batch save. Returning it lets an endpoint with partial
+ * success mark only the rows that actually failed, instead of the whole batch.
+ */
+export interface IDataTableCommitRowResult {
+    rowId: string;
+    ok: boolean;
+    message?: string;
+}
+interface IUseDataTableCommitQueueParams<T extends IDataTableRow> {
+    rows: Array<T>;
+    /** One call per row, run with limited concurrency. The common case. */
+    saveRow?: (item: IDataTableCommitItem<T>) => Promise<void>;
+    /**
+     * One call for everything, for hosts that own a bulk endpoint. Wins over
+     * `saveRow`. Return per-row results to report partial success; returning
+     * nothing means every row saved.
+     */
+    saveBatch?: (items: Array<IDataTableCommitItem<T>>) => Promise<void | Array<IDataTableCommitRowResult>>;
+    /**
+     * Writes an edited value onto the row for the optimistic overlay. The default
+     * assigns the column id as a top-level key, which only holds when the column id
+     * IS the row field: a column reading `row.productReferenceId` (or a dotted path)
+     * must provide this, or the save succeeds and the screen never changes.
+     */
+    applyChange?: (row: T, columnId: string, value: unknown) => T;
+    debounceMs?: number;
+    concurrency?: number;
+    /** `false` keeps every change pending until `flush()` (an explicit save button). */
+    autoFlush?: boolean;
+}
+export interface IUseDataTableCommitQueueResult<T extends IDataTableRow> {
+    /** `rows` with every applied edit merged in, so the cells show what was typed. */
+    mergedRows: Array<T>;
+    onCellChange: (row: T, columnId: string, value: unknown) => void;
+    /** Whole fill range in one update: one render, one flush, one request per row. */
+    onFillCells: (changes: Array<IDataTableFillChange<T>>) => void;
+    flush: () => Promise<void>;
+    retryFailed: () => Promise<void>;
+    statuses: ReadonlyMap<string, TDataTableCommitStatus>;
+    isDirty: boolean;
+    isSaving: boolean;
+    pendingCount: number;
+    errorCount: number;
+}
+/**
+ * The single persistence path for inline editing. It replaces the fire-and-forget
+ * buffer with a queue that:
+ *
+ * - deduplicates by (row, column), so typing three times in a cell sends one value;
+ * - stamps every change with a sequence number, so a slow response can never mark
+ *   a newer value as saved (and never overwrites it);
+ * - runs one request per row with a concurrency cap, instead of `Promise.all` over
+ *   everything (a 40-row fill would otherwise open 40 sockets at once);
+ * - keeps the optimistic overlay until the cell is actually saved, so a refetch
+ *   arriving mid-flight no longer wipes what the user typed;
+ * - flushes on unmount and warns on tab close, so leaving the page does not
+ *   silently discard pending edits;
+ * - exposes a per-cell status the table paints (saving / saved / error).
+ */
+export declare function useDataTableCommitQueue<T extends IDataTableRow>({ rows, saveRow, saveBatch, applyChange, debounceMs, concurrency, autoFlush, }: IUseDataTableCommitQueueParams<T>): IUseDataTableCommitQueueResult<T>;
+export {};

package/dist/components/UI/DataTable/useDataTableCommitQueue.js

@@ -0,0 +1,220 @@
+import { useRef, useState, useCallback, useEffect, useMemo } from "react";
+import { uiLogger } from "../../../helpers/uiLogger.js";
+import { buildGridCellKey } from "./grid/gridTypes.js";
+const DEFAULT_DEBOUNCE_MS = 800;
+const DEFAULT_CONCURRENCY = 4;
+const runWithConcurrency = async (items, limit, worker) => {
+  let nextIndex = 0;
+  const runners = Array.from({ length: Math.max(1, Math.min(limit, items.length)) }, async () => {
+    while (nextIndex < items.length) {
+      const item = items[nextIndex];
+      nextIndex += 1;
+      if (item !== void 0) await worker(item);
+    }
+  });
+  await Promise.all(runners);
+};
+function useDataTableCommitQueue({
+  rows,
+  saveRow,
+  saveBatch,
+  applyChange,
+  debounceMs = DEFAULT_DEBOUNCE_MS,
+  concurrency = DEFAULT_CONCURRENCY,
+  autoFlush = true
+}) {
+  const overlayRef = useRef(/* @__PURE__ */ new Map());
+  const pendingRef = useRef(/* @__PURE__ */ new Map());
+  const inFlightRef = useRef(/* @__PURE__ */ new Map());
+  const statusesRef = useRef(/* @__PURE__ */ new Map());
+  const sequenceRef = useRef(0);
+  const timeoutRef = useRef(null);
+  const isSavingRef = useRef(false);
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+  const saveRowRef = useRef(saveRow);
+  saveRowRef.current = saveRow;
+  const saveBatchRef = useRef(saveBatch);
+  saveBatchRef.current = saveBatch;
+  const applyChangeRef = useRef(applyChange);
+  applyChangeRef.current = applyChange;
+  const [version, setVersion] = useState(0);
+  const publish = useCallback(() => setVersion((current) => current + 1), []);
+  const flushRef = useRef(async () => void 0);
+  const flush = useCallback(async () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (pendingRef.current.size === 0) return;
+    const outgoing = Array.from(pendingRef.current.values());
+    pendingRef.current.clear();
+    const rowById = new Map(rowsRef.current.map((row) => [row.id, row]));
+    const itemsByRowId = /* @__PURE__ */ new Map();
+    outgoing.forEach((change) => {
+      const cellKey = buildGridCellKey(change.rowId, change.columnId);
+      inFlightRef.current.set(cellKey, change.sequence);
+      statusesRef.current.set(cellKey, "saving");
+      const row = rowById.get(change.rowId);
+      if (!row) return;
+      const item = itemsByRowId.get(change.rowId) ?? { row, changes: {} };
+      item.changes[change.columnId] = change.value;
+      itemsByRowId.set(change.rowId, item);
+    });
+    isSavingRef.current = true;
+    publish();
+    const settleRow = (rowChanges, succeeded) => {
+      rowChanges.forEach((change) => {
+        const cellKey = buildGridCellKey(change.rowId, change.columnId);
+        if (inFlightRef.current.get(cellKey) !== change.sequence) return;
+        inFlightRef.current.delete(cellKey);
+        statusesRef.current.set(cellKey, succeeded ? "saved" : "error");
+        if (!succeeded) pendingRef.current.set(cellKey, change);
+      });
+    };
+    const changesByRowId = /* @__PURE__ */ new Map();
+    outgoing.forEach((change) => {
+      const list = changesByRowId.get(change.rowId) ?? [];
+      list.push(change);
+      changesByRowId.set(change.rowId, list);
+    });
+    const items = Array.from(itemsByRowId.values());
+    try {
+      if (saveBatchRef.current) {
+        try {
+          const rowResults = await saveBatchRef.current(items);
+          const failedRowIds = new Set(
+            (Array.isArray(rowResults) ? rowResults : []).filter((result) => !result.ok).map((result) => result.rowId)
+          );
+          changesByRowId.forEach((rowChanges, rowId) => settleRow(rowChanges, !failedRowIds.has(rowId)));
+        } catch (error) {
+          uiLogger.error("DataTable batch save failed", error);
+          changesByRowId.forEach((rowChanges) => settleRow(rowChanges, false));
+        }
+      } else if (saveRowRef.current) {
+        await runWithConcurrency(items, concurrency, async (item) => {
+          const rowChanges = changesByRowId.get(item.row.id) ?? [];
+          try {
+            await saveRowRef.current?.(item);
+            settleRow(rowChanges, true);
+          } catch (error) {
+            uiLogger.error("DataTable row save failed", error);
+            settleRow(rowChanges, false);
+          }
+        });
+      }
+    } finally {
+      isSavingRef.current = false;
+      publish();
+    }
+  }, [concurrency, publish]);
+  flushRef.current = flush;
+  const scheduleFlush = useCallback(() => {
+    if (!autoFlush) return;
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      void flushRef.current();
+    }, debounceMs);
+  }, [autoFlush, debounceMs]);
+  const applyChanges = useCallback(
+    (changes) => {
+      changes.forEach(({ rowId, columnId, value }) => {
+        sequenceRef.current += 1;
+        const rowOverlay = { ...overlayRef.current.get(rowId) ?? {}, [columnId]: value };
+        overlayRef.current.set(rowId, rowOverlay);
+        const cellKey = buildGridCellKey(rowId, columnId);
+        pendingRef.current.set(cellKey, { rowId, columnId, value, sequence: sequenceRef.current });
+        statusesRef.current.set(cellKey, "pending");
+      });
+      publish();
+      scheduleFlush();
+    },
+    [publish, scheduleFlush]
+  );
+  const onCellChange = useCallback(
+    (row, columnId, value) => applyChanges([{ rowId: row.id, columnId, value }]),
+    [applyChanges]
+  );
+  const onFillCells = useCallback(
+    (changes) => applyChanges(
+      (changes ?? []).map((change) => ({ rowId: change.row.id, columnId: change.columnId, value: change.value }))
+    ),
+    [applyChanges]
+  );
+  const retryFailed = useCallback(async () => {
+    const failedKeys = Array.from(statusesRef.current.entries()).filter(([, status]) => status === "error").map(([cellKey]) => cellKey);
+    if (failedKeys.length === 0) return;
+    failedKeys.forEach((cellKey) => statusesRef.current.set(cellKey, "pending"));
+    await flush();
+  }, [flush]);
+  const previousRowsRef = useRef(rows);
+  useEffect(() => {
+    if (previousRowsRef.current === rows) return;
+    previousRowsRef.current = rows;
+    let changed = false;
+    overlayRef.current.forEach((rowOverlay, rowId) => {
+      Object.keys(rowOverlay).forEach((columnId) => {
+        const cellKey = buildGridCellKey(rowId, columnId);
+        if (statusesRef.current.get(cellKey) !== "saved") return;
+        delete rowOverlay[columnId];
+        statusesRef.current.delete(cellKey);
+        changed = true;
+      });
+      if (Object.keys(rowOverlay).length === 0) overlayRef.current.delete(rowId);
+    });
+    if (changed) publish();
+  }, [rows, publish]);
+  useEffect(
+    () => () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      void flushRef.current();
+    },
+    []
+  );
+  const hasUnsavedWork = pendingRef.current.size > 0 || inFlightRef.current.size > 0;
+  useEffect(() => {
+    if (!hasUnsavedWork) return void 0;
+    const handleBeforeUnload = (event) => {
+      void flushRef.current();
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [hasUnsavedWork]);
+  const mergedRows = useMemo(() => {
+    const safeRows = rows ?? [];
+    if (overlayRef.current.size === 0) return safeRows;
+    const applyToRow = applyChangeRef.current ?? ((row, columnId, value) => ({
+      ...row,
+      [columnId]: value
+    }));
+    return safeRows.map((row) => {
+      const rowOverlay = overlayRef.current.get(row.id);
+      if (!rowOverlay || Object.keys(rowOverlay).length === 0) return row;
+      return Object.entries(rowOverlay).reduce(
+        (current, [columnId, value]) => applyToRow(current, columnId, value),
+        row
+      );
+    });
+  }, [rows, version]);
+  const statuses = useMemo(() => new Map(statusesRef.current), [version]);
+  const pendingCount = pendingRef.current.size + inFlightRef.current.size;
+  const errorCount = Array.from(statusesRef.current.values()).filter((status) => status === "error").length;
+  return {
+    mergedRows,
+    onCellChange,
+    onFillCells,
+    flush,
+    retryFailed,
+    statuses,
+    isDirty: pendingCount > 0,
+    isSaving: isSavingRef.current,
+    pendingCount,
+    errorCount
+  };
+}
+export {
+  useDataTableCommitQueue
+};
+//# sourceMappingURL=useDataTableCommitQueue.js.map