@umodeapporg/ui 0.0.0-canary.ca10e69

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDataTableCommitQueue.js","sources":["../../../../src/components/UI/DataTable/useDataTableCommitQueue.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { uiLogger } from '@/helpers/uiLogger';\n\nimport { buildGridCellKey } from './grid/gridTypes';\nimport type { IDataTableFillChange, IDataTableRow } from './types';\n\nconst DEFAULT_DEBOUNCE_MS = 800;\nconst DEFAULT_CONCURRENCY = 4;\n\nexport type TDataTableCommitStatus = 'pending' | 'saving' | 'saved' | 'error';\n\nexport interface IDataTableCommitItem<T extends IDataTableRow> {\n  row: T;\n  /** Accumulated values for that row, keyed by column id. */\n  changes: Record<string, unknown>;\n}\n\n/**\n * Per-row outcome of a batch save. Returning it lets an endpoint with partial\n * success mark only the rows that actually failed, instead of the whole batch.\n */\nexport interface IDataTableCommitRowResult {\n  rowId: string;\n  ok: boolean;\n  message?: string;\n}\n\ninterface IPendingChange {\n  rowId: string;\n  columnId: string;\n  value: unknown;\n  sequence: number;\n}\n\ninterface IUseDataTableCommitQueueParams<T extends IDataTableRow> {\n  rows: Array<T>;\n  /** One call per row, run with limited concurrency. The common case. */\n  saveRow?: (item: IDataTableCommitItem<T>) => Promise<void>;\n  /**\n   * One call for everything, for hosts that own a bulk endpoint. Wins over\n   * `saveRow`. Return per-row results to report partial success; returning\n   * nothing means every row saved.\n   */\n  saveBatch?: (items: Array<IDataTableCommitItem<T>>) => Promise<void | Array<IDataTableCommitRowResult>>;\n  /**\n   * Writes an edited value onto the row for the optimistic overlay. The default\n   * assigns the column id as a top-level key, which only holds when the column id\n   * IS the row field: a column reading `row.productReferenceId` (or a dotted path)\n   * must provide this, or the save succeeds and the screen never changes.\n   */\n  applyChange?: (row: T, columnId: string, value: unknown) => T;\n  debounceMs?: number;\n  concurrency?: number;\n  /** `false` keeps every change pending until `flush()` (an explicit save button). */\n  autoFlush?: boolean;\n}\n\nexport interface IUseDataTableCommitQueueResult<T extends IDataTableRow> {\n  /** `rows` with every applied edit merged in, so the cells show what was typed. */\n  mergedRows: Array<T>;\n  onCellChange: (row: T, columnId: string, value: unknown) => void;\n  /** Whole fill range in one update: one render, one flush, one request per row. */\n  onFillCells: (changes: Array<IDataTableFillChange<T>>) => void;\n  flush: () => Promise<void>;\n  retryFailed: () => Promise<void>;\n  statuses: ReadonlyMap<string, TDataTableCommitStatus>;\n  isDirty: boolean;\n  isSaving: boolean;\n  pendingCount: number;\n  errorCount: number;\n}\n\nconst runWithConcurrency = async <TItem>(\n  items: Array<TItem>,\n  limit: number,\n  worker: (item: TItem) => Promise<void>,\n): Promise<void> => {\n  let nextIndex = 0;\n\n  const runners = Array.from({ length: Math.max(1, Math.min(limit, items.length)) }, async () => {\n    while (nextIndex < items.length) {\n      const item = items[nextIndex];\n      nextIndex += 1;\n      if (item !== undefined) await worker(item);\n    }\n  });\n\n  await Promise.all(runners);\n};\n\n/**\n * The single persistence path for inline editing. It replaces the fire-and-forget\n * buffer with a queue that:\n *\n * - deduplicates by (row, column), so typing three times in a cell sends one value;\n * - stamps every change with a sequence number, so a slow response can never mark\n *   a newer value as saved (and never overwrites it);\n * - runs one request per row with a concurrency cap, instead of `Promise.all` over\n *   everything (a 40-row fill would otherwise open 40 sockets at once);\n * - keeps the optimistic overlay until the cell is actually saved, so a refetch\n *   arriving mid-flight no longer wipes what the user typed;\n * - flushes on unmount and warns on tab close, so leaving the page does not\n *   silently discard pending edits;\n * - exposes a per-cell status the table paints (saving / saved / error).\n */\nexport function useDataTableCommitQueue<T extends IDataTableRow>({\n  rows,\n  saveRow,\n  saveBatch,\n  applyChange,\n  debounceMs = DEFAULT_DEBOUNCE_MS,\n  concurrency = DEFAULT_CONCURRENCY,\n  autoFlush = true,\n}: IUseDataTableCommitQueueParams<T>): IUseDataTableCommitQueueResult<T> {\n  const overlayRef = useRef(new Map<string, Record<string, unknown>>());\n  const pendingRef = useRef(new Map<string, IPendingChange>());\n  const inFlightRef = useRef(new Map<string, number>());\n  const statusesRef = useRef(new Map<string, TDataTableCommitStatus>());\n  const sequenceRef = useRef(0);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const isSavingRef = useRef(false);\n\n  const rowsRef = useRef(rows);\n  rowsRef.current = rows;\n  const saveRowRef = useRef(saveRow);\n  saveRowRef.current = saveRow;\n  const saveBatchRef = useRef(saveBatch);\n  saveBatchRef.current = saveBatch;\n  const applyChangeRef = useRef(applyChange);\n  applyChangeRef.current = applyChange;\n\n  const [version, setVersion] = useState(0);\n  const publish = useCallback(() => setVersion((current) => current + 1), []);\n\n  const flushRef = useRef<() => Promise<void>>(async () => undefined);\n\n  const flush = useCallback(async () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n\n    if (pendingRef.current.size === 0) return;\n\n    const outgoing = Array.from(pendingRef.current.values());\n    pendingRef.current.clear();\n\n    const rowById = new Map(rowsRef.current.map((row) => [row.id, row]));\n    const itemsByRowId = new Map<string, IDataTableCommitItem<T>>();\n\n    outgoing.forEach((change) => {\n      const cellKey = buildGridCellKey(change.rowId, change.columnId);\n      inFlightRef.current.set(cellKey, change.sequence);\n      statusesRef.current.set(cellKey, 'saving');\n\n      const row = rowById.get(change.rowId);\n      if (!row) return;\n\n      const item = itemsByRowId.get(change.rowId) ?? { row, changes: {} };\n      item.changes[change.columnId] = change.value;\n      itemsByRowId.set(change.rowId, item);\n    });\n\n    isSavingRef.current = true;\n    publish();\n\n    const settleRow = (rowChanges: Array<IPendingChange>, succeeded: boolean) => {\n      rowChanges.forEach((change) => {\n        const cellKey = buildGridCellKey(change.rowId, change.columnId);\n        // A newer edit replaced this value while the request was in flight: its own\n        // flush owns the cell now, so this response says nothing about it.\n        if (inFlightRef.current.get(cellKey) !== change.sequence) return;\n\n        inFlightRef.current.delete(cellKey);\n        statusesRef.current.set(cellKey, succeeded ? 'saved' : 'error');\n        if (!succeeded) pendingRef.current.set(cellKey, change);\n      });\n    };\n\n    const changesByRowId = new Map<string, Array<IPendingChange>>();\n    outgoing.forEach((change) => {\n      const list = changesByRowId.get(change.rowId) ?? [];\n      list.push(change);\n      changesByRowId.set(change.rowId, list);\n    });\n\n    const items = Array.from(itemsByRowId.values());\n\n    try {\n      if (saveBatchRef.current) {\n        try {\n          const rowResults = await saveBatchRef.current(items);\n          const failedRowIds = new Set(\n            (Array.isArray(rowResults) ? rowResults : []).filter((result) => !result.ok).map((result) => result.rowId),\n          );\n\n          changesByRowId.forEach((rowChanges, rowId) => settleRow(rowChanges, !failedRowIds.has(rowId)));\n        } catch (error) {\n          uiLogger.error('DataTable batch save failed', error);\n          changesByRowId.forEach((rowChanges) => settleRow(rowChanges, false));\n        }\n      } else if (saveRowRef.current) {\n        await runWithConcurrency(items, concurrency, async (item) => {\n          const rowChanges = changesByRowId.get(item.row.id) ?? [];\n          try {\n            await saveRowRef.current?.(item);\n            settleRow(rowChanges, true);\n          } catch (error) {\n            uiLogger.error('DataTable row save failed', error);\n            settleRow(rowChanges, false);\n          }\n        });\n      }\n    } finally {\n      isSavingRef.current = false;\n      publish();\n    }\n  }, [concurrency, publish]);\n\n  flushRef.current = flush;\n\n  const scheduleFlush = useCallback(() => {\n    if (!autoFlush) return;\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => {\n      void flushRef.current();\n    }, debounceMs);\n  }, [autoFlush, debounceMs]);\n\n  const applyChanges = useCallback(\n    (changes: Array<{ rowId: string; columnId: string; value: unknown }>) => {\n      changes.forEach(({ rowId, columnId, value }) => {\n        sequenceRef.current += 1;\n\n        const rowOverlay = { ...(overlayRef.current.get(rowId) ?? {}), [columnId]: value };\n        overlayRef.current.set(rowId, rowOverlay);\n\n        const cellKey = buildGridCellKey(rowId, columnId);\n        pendingRef.current.set(cellKey, { rowId, columnId, value, sequence: sequenceRef.current });\n        statusesRef.current.set(cellKey, 'pending');\n      });\n\n      publish();\n      scheduleFlush();\n    },\n    [publish, scheduleFlush],\n  );\n\n  const onCellChange = useCallback(\n    (row: T, columnId: string, value: unknown) => applyChanges([{ rowId: row.id, columnId, value }]),\n    [applyChanges],\n  );\n\n  const onFillCells = useCallback(\n    (changes: Array<IDataTableFillChange<T>>) =>\n      applyChanges(\n        (changes ?? []).map((change) => ({ rowId: change.row.id, columnId: change.columnId, value: change.value })),\n      ),\n    [applyChanges],\n  );\n\n  const retryFailed = useCallback(async () => {\n    const failedKeys = Array.from(statusesRef.current.entries())\n      .filter(([, status]) => status === 'error')\n      .map(([cellKey]) => cellKey);\n    if (failedKeys.length === 0) return;\n\n    failedKeys.forEach((cellKey) => statusesRef.current.set(cellKey, 'pending'));\n    await flush();\n  }, [flush]);\n\n  // A fresh page of rows already reflects whatever was persisted, so its overlay\n  // entries are noise. Cells still pending, in flight or failed keep theirs: those\n  // values only exist here.\n  const previousRowsRef = useRef(rows);\n  useEffect(() => {\n    if (previousRowsRef.current === rows) return;\n    previousRowsRef.current = rows;\n\n    let changed = false;\n    overlayRef.current.forEach((rowOverlay, rowId) => {\n      Object.keys(rowOverlay).forEach((columnId) => {\n        const cellKey = buildGridCellKey(rowId, columnId);\n        if (statusesRef.current.get(cellKey) !== 'saved') return;\n\n        delete rowOverlay[columnId];\n        statusesRef.current.delete(cellKey);\n        changed = true;\n      });\n\n      if (Object.keys(rowOverlay).length === 0) overlayRef.current.delete(rowId);\n    });\n\n    if (changed) publish();\n  }, [rows, publish]);\n\n  useEffect(\n    () => () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      // Fire and forget on unmount: the request still reaches the backend, which is\n      // the difference between \"left the page\" and \"lost the edit\".\n      void flushRef.current();\n    },\n    [],\n  );\n\n  const hasUnsavedWork = pendingRef.current.size > 0 || inFlightRef.current.size > 0;\n\n  useEffect(() => {\n    if (!hasUnsavedWork) return undefined;\n\n    const handleBeforeUnload = (event: BeforeUnloadEvent) => {\n      void flushRef.current();\n      event.preventDefault();\n      event.returnValue = '';\n    };\n\n    window.addEventListener('beforeunload', handleBeforeUnload);\n    return () => window.removeEventListener('beforeunload', handleBeforeUnload);\n  }, [hasUnsavedWork]);\n\n  const mergedRows = useMemo<Array<T>>(() => {\n    const safeRows = rows ?? [];\n    if (overlayRef.current.size === 0) return safeRows;\n\n    const applyToRow =\n      applyChangeRef.current ??\n      ((row: T, columnId: string, value: unknown) => ({\n        ...row,\n        [columnId]: value,\n      }));\n\n    return safeRows.map((row) => {\n      const rowOverlay = overlayRef.current.get(row.id);\n      if (!rowOverlay || Object.keys(rowOverlay).length === 0) return row;\n\n      return Object.entries(rowOverlay).reduce(\n        (current, [columnId, value]) => applyToRow(current, columnId, value),\n        row,\n      );\n    });\n    // `version` is the queue's own change signal: the overlay lives in a ref so\n    // editing a cell does not rebuild it on every unrelated render.\n  }, [rows, version]);\n\n  const statuses = useMemo(() => new Map(statusesRef.current), [version]);\n\n  const pendingCount = pendingRef.current.size + inFlightRef.current.size;\n  const errorCount = Array.from(statusesRef.current.values()).filter((status) => status === 'error').length;\n\n  return {\n    mergedRows,\n    onCellChange,\n    onFillCells,\n    flush,\n    retryFailed,\n    statuses,\n    isDirty: pendingCount > 0,\n    isSaving: isSavingRef.current,\n    pendingCount,\n    errorCount,\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+import { IDataTableRow } from './types';
+export interface IDataTableEditBufferItem<T> {
+    id: string;
+    data: Partial<T>;
+}
+interface IUseDataTableEditBufferParams<T extends IDataTableRow> {
+    rows: Array<T>;
+    onBatchUpdate: (items: Array<IDataTableEditBufferItem<T>>) => Promise<void>;
+    autoFlushMs?: number;
+}
+interface IUseDataTableEditBufferResult<T extends IDataTableRow> {
+    /** `rows` with pending edits applied, so editable `getValue` reflects typing. */
+    mergedRows: Array<T>;
+    /** Wire to `editing.onCellChange`: records the edit and enqueues the batch save. */
+    onCellChange: (row: T, columnId: string, value: unknown) => void;
+    /** Wire to `spreadsheet.fill.onFillCells`: a whole fill range in one update. */
+    onFillCells: (changes: Array<{
+        row: T;
+        columnId: string;
+        value: unknown;
+    }>) => void;
+    /** Manual save: flushes the pending queue to the host handler. */
+    flush: () => Promise<void>;
+    isDirty: boolean;
+    queueSize: number;
+    loading: boolean;
+    statuses: ReadonlyMap<string, string>;
+}
+/**
+ * Backwards-compatible façade over `useDataTableCommitQueue`, kept because five
+ * report tables already speak this shape (`onBatchUpdate` receiving `{ id, data }`).
+ * Everything underneath is the queue, so those tables inherit the dedupe, the
+ * stale-response guard, the flush on unmount and the per-cell status for free.
+ */
+export declare function useDataTableEditBuffer<T extends IDataTableRow>({ rows, onBatchUpdate, autoFlushMs, }: IUseDataTableEditBufferParams<T>): IUseDataTableEditBufferResult<T>;
+export {};

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

@@ -0,0 +1,29 @@
+import { useRef, useCallback } from "react";
+import { useDataTableCommitQueue } from "./useDataTableCommitQueue.js";
+const DEFAULT_AUTO_FLUSH_MS = 5e3;
+function useDataTableEditBuffer({
+  rows,
+  onBatchUpdate,
+  autoFlushMs = DEFAULT_AUTO_FLUSH_MS
+}) {
+  const onBatchUpdateRef = useRef(onBatchUpdate);
+  onBatchUpdateRef.current = onBatchUpdate;
+  const saveBatch = useCallback(async (items) => {
+    await onBatchUpdateRef.current(items.map((item) => ({ id: item.row.id, data: item.changes })));
+  }, []);
+  const queue = useDataTableCommitQueue({ rows, saveBatch, debounceMs: autoFlushMs });
+  return {
+    mergedRows: queue.mergedRows,
+    onCellChange: queue.onCellChange,
+    onFillCells: queue.onFillCells,
+    flush: queue.flush,
+    isDirty: queue.isDirty,
+    queueSize: queue.pendingCount,
+    loading: queue.isSaving,
+    statuses: queue.statuses
+  };
+}
+export {
+  useDataTableEditBuffer
+};
+//# sourceMappingURL=useDataTableEditBuffer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDataTableEditBuffer.js","sources":["../../../../src/components/UI/DataTable/useDataTableEditBuffer.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nimport type { IDataTableRow } from './types';\nimport { type IDataTableCommitItem, useDataTableCommitQueue } from './useDataTableCommitQueue';\n\nconst DEFAULT_AUTO_FLUSH_MS = 5000;\n\nexport interface IDataTableEditBufferItem<T> {\n  id: string;\n  data: Partial<T>;\n}\n\ninterface IUseDataTableEditBufferParams<T extends IDataTableRow> {\n  rows: Array<T>;\n  onBatchUpdate: (items: Array<IDataTableEditBufferItem<T>>) => Promise<void>;\n  autoFlushMs?: number;\n}\n\ninterface IUseDataTableEditBufferResult<T extends IDataTableRow> {\n  /** `rows` with pending edits applied, so editable `getValue` reflects typing. */\n  mergedRows: Array<T>;\n  /** Wire to `editing.onCellChange`: records the edit and enqueues the batch save. */\n  onCellChange: (row: T, columnId: string, value: unknown) => void;\n  /** Wire to `spreadsheet.fill.onFillCells`: a whole fill range in one update. */\n  onFillCells: (changes: Array<{ row: T; columnId: string; value: unknown }>) => void;\n  /** Manual save: flushes the pending queue to the host handler. */\n  flush: () => Promise<void>;\n  isDirty: boolean;\n  queueSize: number;\n  loading: boolean;\n  statuses: ReadonlyMap<string, string>;\n}\n\n/**\n * Backwards-compatible façade over `useDataTableCommitQueue`, kept because five\n * report tables already speak this shape (`onBatchUpdate` receiving `{ id, data }`).\n * Everything underneath is the queue, so those tables inherit the dedupe, the\n * stale-response guard, the flush on unmount and the per-cell status for free.\n */\nexport function useDataTableEditBuffer<T extends IDataTableRow>({\n  rows,\n  onBatchUpdate,\n  autoFlushMs = DEFAULT_AUTO_FLUSH_MS,\n}: IUseDataTableEditBufferParams<T>): IUseDataTableEditBufferResult<T> {\n  const onBatchUpdateRef = useRef(onBatchUpdate);\n  onBatchUpdateRef.current = onBatchUpdate;\n\n  const saveBatch = useCallback(async (items: Array<IDataTableCommitItem<T>>) => {\n    await onBatchUpdateRef.current(items.map((item) => ({ id: item.row.id, data: item.changes as Partial<T> })));\n  }, []);\n\n  const queue = useDataTableCommitQueue<T>({ rows, saveBatch, debounceMs: autoFlushMs });\n\n  return {\n    mergedRows: queue.mergedRows,\n    onCellChange: queue.onCellChange,\n    onFillCells: queue.onFillCells,\n    flush: queue.flush,\n    isDirty: queue.isDirty,\n    queueSize: queue.pendingCount,\n    loading: queue.isSaving,\n    statuses: queue.statuses,\n  };\n}\n"],"names":[],"mappings":";;AAKA,MAAM,wBAAwB;AAkCvB,SAAS,uBAAgD;AAAA,EAC9D;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAAuE;AACrE,QAAM,mBAAmB,OAAO,aAAa;AAC7C,mBAAiB,UAAU;AAE3B,QAAM,YAAY,YAAY,OAAO,UAA0C;AAC7E,UAAM,iBAAiB,QAAQ,MAAM,IAAI,CAAC,UAAU,EAAE,IAAI,KAAK,IAAI,IAAI,MAAM,KAAK,QAAA,EAAwB,CAAC;AAAA,EAC7G,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQ,wBAA2B,EAAE,MAAM,WAAW,YAAY,aAAa;AAErF,SAAO;AAAA,IACL,YAAY,MAAM;AAAA,IAClB,cAAc,MAAM;AAAA,IACpB,aAAa,MAAM;AAAA,IACnB,OAAO,MAAM;AAAA,IACb,SAAS,MAAM;AAAA,IACf,WAAW,MAAM;AAAA,IACjB,SAAS,MAAM;AAAA,IACf,UAAU,MAAM;AAAA,EAAA;AAEpB;"}

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

@@ -0,0 +1,65 @@
+import { ColumnSizingState, Updater, VisibilityState } from '@tanstack/react-table';
+import { IDataTableColumnConfig, IDataTableConfig, IDataTableRow, IDataTableSortState } from './types';
+export interface IDataTableClientPaginationState {
+    page: number;
+    pageSize: number;
+}
+export interface IDataTablePagination {
+    pageSize: number;
+    numberOfPages: number;
+    currentPage: number;
+    setCurrentPage: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Total de registros. Presente, a barra mostra o intervalo em vez do número da página. */
+    totalItems?: number;
+}
+interface IUseDataTableInstanceParams<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> {
+    config: IDataTableConfig<T, C>;
+    rows: Array<T>;
+    loading: boolean;
+    sort?: IDataTableSortState | null;
+    onSortChange?: (sort: IDataTableSortState | null) => void;
+    onSearch?: (value: string) => void;
+    initialSearch?: string;
+    onSearchTermChange?: (value: string) => void;
+    pagination?: IDataTablePagination;
+    /** Client mode: seeds the internal page/pageSize (1-based page), e.g. from the URL. */
+    initialClientPagination?: IDataTableClientPaginationState;
+    /** Client mode: reports every page/pageSize change so the host can persist it (URL, storage). */
+    onClientPaginationChange?: (pagination: IDataTableClientPaginationState) => void;
+    columnVisibility: VisibilityState;
+    onColumnVisibilityChange: (updater: Updater<VisibilityState>) => void;
+    columnOrder: Array<string>;
+    onColumnOrderChange: (updater: Updater<Array<string>>) => void;
+    columnSizing: ColumnSizingState;
+    onColumnSizingChange: (updater: Updater<ColumnSizingState>) => void;
+    onFilteredCountChange?: (count: number) => void;
+}
+export declare const useDataTableInstance: <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>({ config, rows, loading, sort, onSortChange, onSearch, initialSearch, onSearchTermChange, pagination, initialClientPagination, onClientPaginationChange, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, columnSizing, onColumnSizingChange, onFilteredCountChange, }: IUseDataTableInstanceParams<T, C>) => {
+    table: import('@tanstack/table-core').Table<T>;
+    isClientMode: boolean;
+    columnContentWidths: Map<string, number>;
+    registerRow: (id: string) => (element: HTMLElement | null) => void;
+    beginRowsExit: (ids: Array<string>) => void;
+    visibleRows: import('@tanstack/table-core').Row<T>[];
+    orderedRowIds: string;
+    filteredCount: number;
+    activeTab: string;
+    tabs: import('./types').IDataTableTab<T>[] | undefined;
+    handleTabChange: (value: string) => void;
+    handleSearchInput: (value: string) => void;
+    handleHeaderSortClick: (columnConfig: IDataTableColumnConfig<T>) => void;
+    resolveSortDirection: (columnConfig: IDataTableColumnConfig<T>) => false | "asc" | "desc";
+    clientPaginationProps: IDataTablePagination | undefined;
+    isUpdating: boolean;
+    showUpdatingBar: boolean;
+    contentOpacityStyle: {
+        opacity: number;
+        transition: string;
+    } | undefined;
+    dataTableOpacityTransitionClass: string;
+    showSkeleton: boolean;
+    hasRows: boolean;
+    clientSearchDebounceMs: number;
+};
+export {};

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

@@ -0,0 +1,336 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import { normalizeText } from "../../../helpers/stringHelpers.js";
+import { createColumnHelper, useReactTable, getExpandedRowModel, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel } from "@tanstack/react-table";
+import DataTableActionsCell from "./cells/DataTableActionsCell.js";
+import DataTableCell from "./cells/DataTableCell.js";
+import { computeColumnContentWidths, resolveColumnMinWidthPx } from "./dataTableColumnWidths.js";
+import { prefersReducedMotion, DATA_TABLE_UPDATING_BAR_DELAY_MS, DATA_TABLE_CROSSFADE_DIP_OPACITY, DATA_TABLE_OPACITY_TRANSITION_MS, DATA_TABLE_UPDATING_OPACITY, dataTableOpacityTransitionClass } from "./dataTableMotion.js";
+import { isDataTablePanelExpansion, isDataTableDetailTableExpansion, isDataTableTableExpansion, isDataTableSubRowsExpansion } from "./types.js";
+import { useFlipRows } from "./useFlipRows.js";
+const CLIENT_SEARCH_DEBOUNCE_MS = 150;
+const useDataTableInstance = ({
+  config,
+  rows,
+  loading,
+  sort,
+  onSortChange,
+  onSearch,
+  initialSearch = "",
+  onSearchTermChange,
+  pagination,
+  initialClientPagination,
+  onClientPaginationChange,
+  columnVisibility,
+  onColumnVisibilityChange,
+  columnOrder,
+  onColumnOrderChange,
+  columnSizing,
+  onColumnSizingChange,
+  onFilteredCountChange
+}) => {
+  const isClientMode = config.dataMode === "client";
+  const tabs = config.tabs;
+  const [activeTab, setActiveTab] = useState(() => tabs?.[0]?.value ?? "");
+  const tabFilteredRows = useMemo(() => {
+    if (!isClientMode || !tabs?.length) return rows;
+    const predicate = tabs.find((tab) => tab.value === activeTab)?.clientPredicate;
+    if (!predicate) return rows;
+    return rows.filter(predicate);
+  }, [isClientMode, tabs, activeTab, rows]);
+  const columnHelper = useMemo(() => createColumnHelper(), []);
+  const columnContentWidths = useMemo(
+    () => computeColumnContentWidths(config.columns, tabFilteredRows),
+    [config.columns, tabFilteredRows]
+  );
+  const columnContentWidthsRef = useRef(columnContentWidths);
+  columnContentWidthsRef.current = columnContentWidths;
+  const columns = useMemo(() => {
+    const contentWidths = columnContentWidthsRef.current;
+    const columnDefs = config.columns.map((columnConfig, columnIndex) => {
+      const accessorFn = (row) => {
+        if (columnConfig.sortAccessor) return columnConfig.sortAccessor(row);
+        const value = columnConfig.accessor?.(row);
+        if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+          return value;
+        }
+        return "";
+      };
+      const isFirstColumn = columnIndex === 0;
+      const columnWidth = contentWidths.get(columnConfig.id) ?? resolveColumnMinWidthPx(columnConfig, {
+        isFirstColumn,
+        hasColumnToggle: isFirstColumn
+      });
+      return columnHelper.accessor(accessorFn, {
+        id: columnConfig.id,
+        header: columnConfig.header,
+        enableSorting: !!columnConfig.sortable,
+        size: columnWidth,
+        minSize: columnWidth,
+        enableResizing: columnConfig.type !== "actions" && columnConfig.resizable !== false,
+        cell: ({ row }) => columnConfig.type === "actions" && columnConfig.actions ? /* @__PURE__ */ jsx(DataTableActionsCell, { row: row.original, actions: columnConfig.actions }) : /* @__PURE__ */ jsx(
+          DataTableCell,
+          {
+            column: columnConfig,
+            row: row.original,
+            gridRowId: row.id,
+            onCellChange: config.editing?.onCellChange,
+            keyboardNav: config.editing?.keyboardNav,
+            clickToEdit: config.editing?.clickToEdit
+          }
+        )
+      });
+    });
+    return columnDefs;
+  }, [config.columns, config.editing, columnHelper]);
+  const [clientSorting, setClientSorting] = useState([]);
+  const [globalFilter, setGlobalFilter] = useState(initialSearch);
+  const [clientPagination, setClientPagination] = useState(() => ({
+    pageIndex: Math.max(0, (initialClientPagination?.page ?? 1) - 1),
+    pageSize: initialClientPagination?.pageSize ?? 20
+  }));
+  const onClientPaginationChangeRef = useRef(onClientPaginationChange);
+  onClientPaginationChangeRef.current = onClientPaginationChange;
+  useEffect(() => {
+    onClientPaginationChangeRef.current?.({
+      page: clientPagination.pageIndex + 1,
+      pageSize: clientPagination.pageSize
+    });
+  }, [clientPagination.pageIndex, clientPagination.pageSize]);
+  const [expanded, setExpanded] = useState({});
+  const expansion = config.expansion;
+  const hasExpansion = !!expansion;
+  const defaultExpanded = expansion?.defaultExpanded;
+  const userToggledRowIdsRef = useRef(/* @__PURE__ */ new Set());
+  const handleExpandedChange = useCallback((updater) => {
+    setExpanded((previous) => {
+      const next = typeof updater === "function" ? updater(previous) : updater;
+      if (previous !== true && next !== true) {
+        for (const rowId of /* @__PURE__ */ new Set([...Object.keys(previous), ...Object.keys(next)])) {
+          if (Boolean(previous[rowId]) !== Boolean(next[rowId])) userToggledRowIdsRef.current.add(rowId);
+        }
+      }
+      return next;
+    });
+  }, []);
+  useEffect(() => {
+    if (!hasExpansion || defaultExpanded === void 0) return;
+    setExpanded((previous) => {
+      if (previous === true) return previous;
+      let next = null;
+      for (const row of tabFilteredRows) {
+        const rowId = row.id;
+        if (!rowId || userToggledRowIdsRef.current.has(rowId)) continue;
+        const shouldExpand = typeof defaultExpanded === "function" ? defaultExpanded(row) : defaultExpanded;
+        if (Boolean(previous[rowId]) === shouldExpand) continue;
+        next = next ?? { ...previous };
+        if (shouldExpand) next[rowId] = true;
+        else delete next[rowId];
+      }
+      return next ?? previous;
+    });
+  }, [hasExpansion, defaultExpanded, tabFilteredRows]);
+  const isPanelExpansion = !!expansion && isDataTablePanelExpansion(expansion);
+  const isDetailTableExpansion = !!expansion && isDataTableDetailTableExpansion(expansion);
+  const isTableExpansion = !!expansion && isDataTableTableExpansion(expansion);
+  const subRowsExpansion = expansion && isDataTableSubRowsExpansion(expansion) ? expansion : null;
+  const getSearchableText = config.getSearchableText;
+  const globalFilterFn = useMemo(
+    () => (row, _columnId, filterValue) => {
+      const searchWords = normalizeText(String(filterValue ?? "")).split(/\s+/).filter(Boolean);
+      if (searchWords.length === 0) return true;
+      const haystack = normalizeText(getSearchableText ? getSearchableText(row.original) : "");
+      return searchWords.every((searchWord) => haystack.includes(searchWord));
+    },
+    [getSearchableText]
+  );
+  const serverSortingState = useMemo(() => {
+    if (!sort) return [];
+    const columnForField = config.columns.find((column) => column.sortField === sort.sortBy);
+    if (!columnForField) return [];
+    return [{ id: columnForField.id, desc: sort.sortDir === "desc" }];
+  }, [sort, config.columns]);
+  const table = useReactTable({
+    data: tabFilteredRows,
+    columns,
+    // The row id IS the entity id (prefixed by the parent for nested rows), not the
+    // default positional index: the spreadsheet layer and the commit queue address
+    // cells by it, so it has to survive sorting, filtering and pagination.
+    getRowId: (row, index, parent) => {
+      const ownId = row.id ?? String(index);
+      return parent ? `${parent.id}.${ownId}` : ownId;
+    },
+    state: isClientMode ? {
+      sorting: clientSorting,
+      globalFilter,
+      pagination: clientPagination,
+      columnVisibility,
+      columnOrder,
+      columnSizing,
+      expanded
+    } : { sorting: serverSortingState, columnVisibility, columnOrder, columnSizing, expanded },
+    manualSorting: !isClientMode,
+    manualFiltering: !isClientMode,
+    manualPagination: !isClientMode,
+    // A host that persists the page (URL) expects an in-place row update to keep it;
+    // TanStack would otherwise jump back to page 1 whenever `rows` changes reference.
+    autoResetPageIndex: onClientPaginationChange ? false : void 0,
+    enableColumnResizing: true,
+    // `onChange`: columns follow the cursor live during the drag (fluid, ag-grid
+    // style) rather than snapping only on release.
+    columnResizeMode: "onChange",
+    onColumnVisibilityChange,
+    onColumnOrderChange,
+    onColumnSizingChange,
+    onSortingChange: isClientMode ? setClientSorting : void 0,
+    onGlobalFilterChange: isClientMode ? setGlobalFilter : void 0,
+    onPaginationChange: isClientMode ? setClientPagination : void 0,
+    onExpandedChange: hasExpansion ? handleExpandedChange : void 0,
+    globalFilterFn: isClientMode ? globalFilterFn : void 0,
+    // Panel and detailTable modes have no nested rows in the row model. Omit
+    // getSubRows so TanStack never looks for children. SubRows mode keeps the
+    // existing lazy-children path.
+    getSubRows: subRowsExpansion?.getSubRows,
+    getRowCanExpand: expansion ? (row) => {
+      if (expansion.canExpand) return expansion.canExpand(row.original);
+      if (isPanelExpansion || isDetailTableExpansion || isTableExpansion) return true;
+      return row.subRows.length > 0;
+    } : void 0,
+    // Client mode keeps children glued to their parent (not counted toward the
+    // page size). The pagination row model re-inserts them. Server mode has NO
+    // pagination row model, so `false` would leave `getExpandedRowModel` without
+    // anything to flatten the children and they would never render; `true` makes
+    // the expanded model flatten them itself (server already paginates parents).
+    // Panel and detailTable modes have no child rows, so the flag is irrelevant.
+    paginateExpandedRows: !isClientMode,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: isClientMode ? getFilteredRowModel() : void 0,
+    getSortedRowModel: isClientMode ? getSortedRowModel() : void 0,
+    getPaginationRowModel: isClientMode ? getPaginationRowModel() : void 0,
+    getExpandedRowModel: hasExpansion ? getExpandedRowModel() : void 0
+  });
+  const visibleRows = table.getRowModel().rows;
+  const orderedRowIds = useMemo(() => visibleRows.map((row) => row.id).join("|"), [visibleRows]);
+  const flipDurationMs = subRowsExpansion ? 420 : void 0;
+  const { registerRow, beginExit: beginRowsExit } = useFlipRows(
+    useMemo(() => orderedRowIds.split("|"), [orderedRowIds]),
+    flipDurationMs
+  );
+  const filteredCount = isClientMode ? table.getFilteredRowModel().rows.length : rows.length;
+  useEffect(() => {
+    onFilteredCountChange?.(filteredCount);
+  }, [filteredCount, onFilteredCountChange]);
+  const handleHeaderSortClick = (columnConfig) => {
+    if (!columnConfig.sortable) return;
+    if (isClientMode) {
+      table.getColumn(columnConfig.id)?.toggleSorting(void 0, false);
+      return;
+    }
+    if (!columnConfig.sortField || !onSortChange) return;
+    const isActive = sort?.sortBy === columnConfig.sortField;
+    let nextDir = "asc";
+    if (isActive && sort?.sortDir === "asc") nextDir = "desc";
+    else if (isActive && sort?.sortDir === "desc") {
+      onSortChange(null);
+      return;
+    }
+    onSortChange({ sortBy: columnConfig.sortField, sortDir: nextDir });
+  };
+  const resolveSortDirection = (columnConfig) => {
+    if (isClientMode) {
+      const direction = table.getColumn(columnConfig.id)?.getIsSorted();
+      return direction ?? false;
+    }
+    if (sort?.sortBy !== columnConfig.sortField) return false;
+    return sort?.sortDir ?? "asc";
+  };
+  const handleSearchInput = (value) => {
+    onSearchTermChange?.(value);
+    if (isClientMode) {
+      setGlobalFilter(value);
+      table.setPageIndex(0);
+      return;
+    }
+    onSearch?.(value);
+  };
+  const handleTabChange = (value) => {
+    setActiveTab(value);
+    if (isClientMode) table.setPageIndex(0);
+  };
+  const showSkeleton = loading && rows.length === 0;
+  const isUpdating = !isClientMode && loading && rows.length > 0;
+  const [showUpdatingBar, setShowUpdatingBar] = useState(false);
+  const [contentOpacity, setContentOpacity] = useState(1);
+  const wasUpdatingRef = useRef(false);
+  useEffect(() => {
+    if (!isUpdating) {
+      setShowUpdatingBar(false);
+      return;
+    }
+    if (prefersReducedMotion()) return;
+    const timer = window.setTimeout(() => setShowUpdatingBar(true), DATA_TABLE_UPDATING_BAR_DELAY_MS);
+    return () => window.clearTimeout(timer);
+  }, [isUpdating]);
+  useEffect(() => {
+    const reducedMotion = prefersReducedMotion();
+    if (wasUpdatingRef.current && !isUpdating && !isClientMode) {
+      if (reducedMotion) {
+        setContentOpacity(1);
+      } else {
+        setContentOpacity(DATA_TABLE_CROSSFADE_DIP_OPACITY);
+        const frame = window.requestAnimationFrame(() => setContentOpacity(1));
+        wasUpdatingRef.current = isUpdating;
+        return () => window.cancelAnimationFrame(frame);
+      }
+    }
+    wasUpdatingRef.current = isUpdating;
+  }, [isUpdating, isClientMode]);
+  const contentOpacityStyle = useMemo(() => {
+    if (prefersReducedMotion()) return void 0;
+    const opacity = isUpdating ? DATA_TABLE_UPDATING_OPACITY : contentOpacity;
+    return {
+      opacity,
+      transition: `opacity ${DATA_TABLE_OPACITY_TRANSITION_MS}ms ease-enter`
+    };
+  }, [isUpdating, contentOpacity]);
+  const clientPaginationProps = isClientMode ? {
+    pageSize: clientPagination.pageSize,
+    numberOfPages: table.getPageCount(),
+    currentPage: clientPagination.pageIndex + 1,
+    totalItems: table.getFilteredRowModel().rows.length,
+    setCurrentPage: (page) => table.setPageIndex(page - 1),
+    onPageSizeChange: (size) => {
+      table.setPageSize(size);
+      table.setPageIndex(0);
+    }
+  } : pagination;
+  const hasRows = visibleRows.length > 0;
+  return {
+    table,
+    isClientMode,
+    columnContentWidths,
+    registerRow,
+    beginRowsExit,
+    visibleRows,
+    orderedRowIds,
+    filteredCount,
+    activeTab,
+    tabs,
+    handleTabChange,
+    handleSearchInput,
+    handleHeaderSortClick,
+    resolveSortDirection,
+    clientPaginationProps,
+    isUpdating,
+    showUpdatingBar,
+    contentOpacityStyle,
+    dataTableOpacityTransitionClass,
+    showSkeleton,
+    hasRows,
+    clientSearchDebounceMs: CLIENT_SEARCH_DEBOUNCE_MS
+  };
+};
+export {
+  useDataTableInstance
+};
+//# sourceMappingURL=useDataTableInstance.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDataTableInstance.js","sources":["../../../../src/components/UI/DataTable/useDataTableInstance.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { normalizeText } from '@/helpers/stringHelpers';\nimport {\n  type ColumnSizingState,\n  createColumnHelper,\n  type ExpandedState,\n  type FilterFn,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type SortingState,\n  type Updater,\n  useReactTable,\n  type VisibilityState,\n} from '@tanstack/react-table';\n\nimport DataTableActionsCell from './cells/DataTableActionsCell';\nimport DataTableCell from './cells/DataTableCell';\nimport { computeColumnContentWidths, resolveColumnMinWidthPx } from './dataTableColumnWidths';\nimport {\n  DATA_TABLE_CROSSFADE_DIP_OPACITY,\n  DATA_TABLE_OPACITY_TRANSITION_MS,\n  DATA_TABLE_UPDATING_BAR_DELAY_MS,\n  DATA_TABLE_UPDATING_OPACITY,\n  dataTableOpacityTransitionClass,\n  prefersReducedMotion,\n} from './dataTableMotion';\nimport {\n  type IDataTableColumnConfig,\n  type IDataTableConfig,\n  type IDataTableRow,\n  type IDataTableSortState,\n  isDataTableDetailTableExpansion,\n  isDataTablePanelExpansion,\n  isDataTableSubRowsExpansion,\n  isDataTableTableExpansion,\n  type TDataTableSortDirection,\n} from './types';\nimport { useFlipRows } from './useFlipRows';\n\nconst CLIENT_SEARCH_DEBOUNCE_MS = 150;\n\nexport interface IDataTableClientPaginationState {\n  page: number;\n  pageSize: number;\n}\n\nexport interface IDataTablePagination {\n  pageSize: number;\n  numberOfPages: number;\n  currentPage: number;\n  setCurrentPage: (page: number) => void;\n  onPageSizeChange?: (pageSize: number) => void;\n  /** Total de registros. Presente, a barra mostra o intervalo em vez do número da página. */\n  totalItems?: number;\n}\n\ninterface IUseDataTableInstanceParams<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> {\n  config: IDataTableConfig<T, C>;\n  rows: Array<T>;\n  loading: boolean;\n  sort?: IDataTableSortState | null;\n  onSortChange?: (sort: IDataTableSortState | null) => void;\n  onSearch?: (value: string) => void;\n  initialSearch?: string;\n  onSearchTermChange?: (value: string) => void;\n  pagination?: IDataTablePagination;\n  /** Client mode: seeds the internal page/pageSize (1-based page), e.g. from the URL. */\n  initialClientPagination?: IDataTableClientPaginationState;\n  /** Client mode: reports every page/pageSize change so the host can persist it (URL, storage). */\n  onClientPaginationChange?: (pagination: IDataTableClientPaginationState) => void;\n  columnVisibility: VisibilityState;\n  onColumnVisibilityChange: (updater: Updater<VisibilityState>) => void;\n  columnOrder: Array<string>;\n  onColumnOrderChange: (updater: Updater<Array<string>>) => void;\n  columnSizing: ColumnSizingState;\n  onColumnSizingChange: (updater: Updater<ColumnSizingState>) => void;\n  onFilteredCountChange?: (count: number) => void;\n}\n\nexport const useDataTableInstance = <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>({\n  config,\n  rows,\n  loading,\n  sort,\n  onSortChange,\n  onSearch,\n  initialSearch = '',\n  onSearchTermChange,\n  pagination,\n  initialClientPagination,\n  onClientPaginationChange,\n  columnVisibility,\n  onColumnVisibilityChange,\n  columnOrder,\n  onColumnOrderChange,\n  columnSizing,\n  onColumnSizingChange,\n  onFilteredCountChange,\n}: IUseDataTableInstanceParams<T, C>) => {\n  const isClientMode = config.dataMode === 'client';\n\n  const tabs = config.tabs;\n  const [activeTab, setActiveTab] = useState(() => tabs?.[0]?.value ?? '');\n\n  // Active tab predicate filters rows BEFORE search/sort/pagination (client mode).\n  const tabFilteredRows = useMemo(() => {\n    if (!isClientMode || !tabs?.length) return rows;\n    const predicate = tabs.find((tab) => tab.value === activeTab)?.clientPredicate;\n    if (!predicate) return rows;\n\n    return rows.filter(predicate);\n  }, [isClientMode, tabs, activeTab, rows]);\n\n  const columnHelper = useMemo(() => createColumnHelper<T>(), []);\n\n  // Actions and badge columns are sized from the current rows (visible action\n  // count / widest chip) so the actions column scales with its buttons and badge\n  // labels are never clipped. Other columns fall back to the config-only seed.\n  // Both are derived in one memo so the hook signature stays unchanged.\n  // Row-derived widths (actions/badge columns) kept in their own memo and read by the\n  // column defs through a ref, so editing a cell (which changes the rows) does NOT\n  // rebuild the column defs. Rebuilding them hands TanStack a new columns array every\n  // keystroke and tears down / remounts every cell, dropping input focus.\n  const columnContentWidths = useMemo(\n    () => computeColumnContentWidths(config.columns, tabFilteredRows),\n    [config.columns, tabFilteredRows],\n  );\n  const columnContentWidthsRef = useRef(columnContentWidths);\n  columnContentWidthsRef.current = columnContentWidths;\n\n  const columns = useMemo(() => {\n    const contentWidths = columnContentWidthsRef.current;\n\n    const columnDefs = config.columns.map((columnConfig, columnIndex) => {\n      const accessorFn = (row: T): string | number | boolean => {\n        if (columnConfig.sortAccessor) return columnConfig.sortAccessor(row);\n\n        const value = columnConfig.accessor?.(row);\n        if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {\n          return value;\n        }\n\n        return '';\n      };\n\n      const isFirstColumn = columnIndex === 0;\n      const columnWidth =\n        contentWidths.get(columnConfig.id) ??\n        resolveColumnMinWidthPx(columnConfig, {\n          isFirstColumn,\n          hasColumnToggle: isFirstColumn,\n        });\n\n      return columnHelper.accessor(accessorFn, {\n        id: columnConfig.id,\n        header: columnConfig.header,\n        enableSorting: !!columnConfig.sortable,\n        size: columnWidth,\n        minSize: columnWidth,\n        enableResizing: columnConfig.type !== 'actions' && columnConfig.resizable !== false,\n        cell: ({ row }) =>\n          columnConfig.type === 'actions' && columnConfig.actions ? (\n            <DataTableActionsCell row={row.original} actions={columnConfig.actions} />\n          ) : (\n            <DataTableCell\n              column={columnConfig}\n              row={row.original}\n              gridRowId={row.id}\n              onCellChange={config.editing?.onCellChange}\n              keyboardNav={config.editing?.keyboardNav}\n              clickToEdit={config.editing?.clickToEdit}\n            />\n          ),\n      });\n    });\n\n    return columnDefs;\n  }, [config.columns, config.editing, columnHelper]);\n\n  // ----- Client-mode internal state -----\n  const [clientSorting, setClientSorting] = useState<SortingState>([]);\n  const [globalFilter, setGlobalFilter] = useState(initialSearch);\n  const [clientPagination, setClientPagination] = useState<PaginationState>(() => ({\n    pageIndex: Math.max(0, (initialClientPagination?.page ?? 1) - 1),\n    pageSize: initialClientPagination?.pageSize ?? 20,\n  }));\n\n  const onClientPaginationChangeRef = useRef(onClientPaginationChange);\n  onClientPaginationChangeRef.current = onClientPaginationChange;\n\n  useEffect(() => {\n    onClientPaginationChangeRef.current?.({\n      page: clientPagination.pageIndex + 1,\n      pageSize: clientPagination.pageSize,\n    });\n  }, [clientPagination.pageIndex, clientPagination.pageSize]);\n  const [expanded, setExpanded] = useState<ExpandedState>({});\n\n  const expansion = config.expansion;\n  const hasExpansion = !!expansion;\n  const defaultExpanded = expansion?.defaultExpanded;\n\n  // Rows the user opened or closed by hand keep that choice; `defaultExpanded` only drives the\n  // rest, so a default that resolves later (a count that arrives async) never undoes a click.\n  const userToggledRowIdsRef = useRef<Set<string>>(new Set());\n\n  const handleExpandedChange = useCallback((updater: Updater<ExpandedState>) => {\n    setExpanded((previous) => {\n      const next = typeof updater === 'function' ? updater(previous) : updater;\n\n      if (previous !== true && next !== true) {\n        for (const rowId of new Set([...Object.keys(previous), ...Object.keys(next)])) {\n          if (Boolean(previous[rowId]) !== Boolean(next[rowId])) userToggledRowIdsRef.current.add(rowId);\n        }\n      }\n\n      return next;\n    });\n  }, []);\n\n  useEffect(() => {\n    if (!hasExpansion || defaultExpanded === undefined) return;\n\n    setExpanded((previous) => {\n      if (previous === true) return previous;\n\n      let next: Record<string, boolean> | null = null;\n\n      for (const row of tabFilteredRows) {\n        const rowId = row.id;\n        if (!rowId || userToggledRowIdsRef.current.has(rowId)) continue;\n\n        const shouldExpand = typeof defaultExpanded === 'function' ? defaultExpanded(row) : defaultExpanded;\n        if (Boolean(previous[rowId]) === shouldExpand) continue;\n\n        next = next ?? { ...previous };\n        if (shouldExpand) next[rowId] = true;\n        else delete next[rowId];\n      }\n\n      return next ?? previous;\n    });\n  }, [hasExpansion, defaultExpanded, tabFilteredRows]);\n\n  const isPanelExpansion = !!expansion && isDataTablePanelExpansion(expansion);\n  const isDetailTableExpansion = !!expansion && isDataTableDetailTableExpansion(expansion);\n  const isTableExpansion = !!expansion && isDataTableTableExpansion(expansion);\n  const subRowsExpansion = expansion && isDataTableSubRowsExpansion(expansion) ? expansion : null;\n\n  const getSearchableText = config.getSearchableText;\n\n  const globalFilterFn: FilterFn<T> = useMemo(\n    () => (row, _columnId, filterValue) => {\n      const searchWords = normalizeText(String(filterValue ?? ''))\n        .split(/\\s+/)\n        .filter(Boolean);\n      if (searchWords.length === 0) return true;\n\n      const haystack = normalizeText(getSearchableText ? getSearchableText(row.original) : '');\n\n      return searchWords.every((searchWord) => haystack.includes(searchWord));\n    },\n    [getSearchableText],\n  );\n\n  // ----- Server-mode external sort mapping -----\n  const serverSortingState: SortingState = useMemo(() => {\n    if (!sort) return [];\n    const columnForField = config.columns.find((column) => column.sortField === sort.sortBy);\n    if (!columnForField) return [];\n\n    return [{ id: columnForField.id, desc: sort.sortDir === 'desc' }];\n  }, [sort, config.columns]);\n\n  const table = useReactTable({\n    data: tabFilteredRows,\n    columns,\n    // The row id IS the entity id (prefixed by the parent for nested rows), not the\n    // default positional index: the spreadsheet layer and the commit queue address\n    // cells by it, so it has to survive sorting, filtering and pagination.\n    getRowId: (row, index, parent) => {\n      const ownId = row.id ?? String(index);\n      return parent ? `${parent.id}.${ownId}` : ownId;\n    },\n    state: isClientMode\n      ? {\n          sorting: clientSorting,\n          globalFilter,\n          pagination: clientPagination,\n          columnVisibility,\n          columnOrder,\n          columnSizing,\n          expanded,\n        }\n      : { sorting: serverSortingState, columnVisibility, columnOrder, columnSizing, expanded },\n    manualSorting: !isClientMode,\n    manualFiltering: !isClientMode,\n    manualPagination: !isClientMode,\n    // A host that persists the page (URL) expects an in-place row update to keep it;\n    // TanStack would otherwise jump back to page 1 whenever `rows` changes reference.\n    autoResetPageIndex: onClientPaginationChange ? false : undefined,\n    enableColumnResizing: true,\n    // `onChange`: columns follow the cursor live during the drag (fluid, ag-grid\n    // style) rather than snapping only on release.\n    columnResizeMode: 'onChange',\n    onColumnVisibilityChange,\n    onColumnOrderChange,\n    onColumnSizingChange,\n    onSortingChange: isClientMode ? setClientSorting : undefined,\n    onGlobalFilterChange: isClientMode ? setGlobalFilter : undefined,\n    onPaginationChange: isClientMode ? setClientPagination : undefined,\n    onExpandedChange: hasExpansion ? handleExpandedChange : undefined,\n    globalFilterFn: isClientMode ? globalFilterFn : undefined,\n    // Panel and detailTable modes have no nested rows in the row model. Omit\n    // getSubRows so TanStack never looks for children. SubRows mode keeps the\n    // existing lazy-children path.\n    getSubRows: subRowsExpansion?.getSubRows,\n    getRowCanExpand: expansion\n      ? (row) => {\n          if (expansion.canExpand) return expansion.canExpand(row.original);\n          // Panel/detailTable/table: every row is expandable unless canExpand says otherwise.\n          if (isPanelExpansion || isDetailTableExpansion || isTableExpansion) return true;\n          return row.subRows.length > 0;\n        }\n      : undefined,\n    // Client mode keeps children glued to their parent (not counted toward the\n    // page size). The pagination row model re-inserts them. Server mode has NO\n    // pagination row model, so `false` would leave `getExpandedRowModel` without\n    // anything to flatten the children and they would never render; `true` makes\n    // the expanded model flatten them itself (server already paginates parents).\n    // Panel and detailTable modes have no child rows, so the flag is irrelevant.\n    paginateExpandedRows: !isClientMode,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: isClientMode ? getFilteredRowModel() : undefined,\n    getSortedRowModel: isClientMode ? getSortedRowModel() : undefined,\n    getPaginationRowModel: isClientMode ? getPaginationRowModel() : undefined,\n    getExpandedRowModel: hasExpansion ? getExpandedRowModel() : undefined,\n  });\n\n  const visibleRows = table.getRowModel().rows;\n  const orderedRowIds = useMemo(() => visibleRows.map((row) => row.id).join('|'), [visibleRows]);\n  // SubRows expansion uses a slower slide so the subgroup open/close reads clearly.\n  // Panel and detailTable expansion only toggle a content row. Keep the default\n  // FLIP timing for those.\n  const flipDurationMs = subRowsExpansion ? 420 : undefined;\n  const { registerRow, beginExit: beginRowsExit } = useFlipRows(\n    useMemo(() => orderedRowIds.split('|'), [orderedRowIds]),\n    flipDurationMs,\n  );\n\n  const filteredCount = isClientMode ? table.getFilteredRowModel().rows.length : rows.length;\n\n  useEffect(() => {\n    onFilteredCountChange?.(filteredCount);\n  }, [filteredCount, onFilteredCountChange]);\n\n  // In server mode, header click round-trips through the host. In client mode\n  // TanStack drives the sorting state directly (cycle: asc -> desc -> none).\n  const handleHeaderSortClick = (columnConfig: IDataTableColumnConfig<T>) => {\n    if (!columnConfig.sortable) return;\n\n    if (isClientMode) {\n      table.getColumn(columnConfig.id)?.toggleSorting(undefined, false);\n      return;\n    }\n\n    if (!columnConfig.sortField || !onSortChange) return;\n\n    const isActive = sort?.sortBy === columnConfig.sortField;\n    let nextDir: TDataTableSortDirection = 'asc';\n\n    if (isActive && sort?.sortDir === 'asc') nextDir = 'desc';\n    else if (isActive && sort?.sortDir === 'desc') {\n      onSortChange(null);\n      return;\n    }\n\n    onSortChange({ sortBy: columnConfig.sortField, sortDir: nextDir });\n  };\n\n  const resolveSortDirection = (columnConfig: IDataTableColumnConfig<T>): false | 'asc' | 'desc' => {\n    if (isClientMode) {\n      const direction = table.getColumn(columnConfig.id)?.getIsSorted();\n      return direction ?? false;\n    }\n\n    if (sort?.sortBy !== columnConfig.sortField) return false;\n    return sort?.sortDir ?? 'asc';\n  };\n\n  const handleSearchInput = (value: string) => {\n    onSearchTermChange?.(value);\n\n    if (isClientMode) {\n      setGlobalFilter(value);\n      table.setPageIndex(0);\n      return;\n    }\n\n    onSearch?.(value);\n  };\n\n  const handleTabChange = (value: string) => {\n    setActiveTab(value);\n    if (isClientMode) table.setPageIndex(0);\n  };\n\n  // Skeleton is shown ONLY on the very first load (no rows yet). Filter/sort/\n  // pagination never swap the loaded table for skeletons. That is the \"blink\".\n  const showSkeleton = loading && rows.length === 0;\n  // Server mode keeps rows visible during a refetch with a subtle updating state.\n  const isUpdating = !isClientMode && loading && rows.length > 0;\n\n  const [showUpdatingBar, setShowUpdatingBar] = useState(false);\n  const [contentOpacity, setContentOpacity] = useState(1);\n  const wasUpdatingRef = useRef(false);\n\n  useEffect(() => {\n    if (!isUpdating) {\n      setShowUpdatingBar(false);\n      return;\n    }\n\n    if (prefersReducedMotion()) return;\n\n    const timer = window.setTimeout(() => setShowUpdatingBar(true), DATA_TABLE_UPDATING_BAR_DELAY_MS);\n    return () => window.clearTimeout(timer);\n  }, [isUpdating]);\n\n  useEffect(() => {\n    const reducedMotion = prefersReducedMotion();\n\n    if (wasUpdatingRef.current && !isUpdating && !isClientMode) {\n      if (reducedMotion) {\n        setContentOpacity(1);\n      } else {\n        setContentOpacity(DATA_TABLE_CROSSFADE_DIP_OPACITY);\n        const frame = window.requestAnimationFrame(() => setContentOpacity(1));\n        wasUpdatingRef.current = isUpdating;\n        return () => window.cancelAnimationFrame(frame);\n      }\n    }\n\n    wasUpdatingRef.current = isUpdating;\n  }, [isUpdating, isClientMode]);\n\n  const contentOpacityStyle = useMemo(() => {\n    if (prefersReducedMotion()) return undefined;\n\n    const opacity = isUpdating ? DATA_TABLE_UPDATING_OPACITY : contentOpacity;\n\n    return {\n      opacity,\n      transition: `opacity ${DATA_TABLE_OPACITY_TRANSITION_MS}ms ease-enter`,\n    };\n  }, [isUpdating, contentOpacity]);\n\n  const clientPaginationProps: IDataTablePagination | undefined = isClientMode\n    ? {\n        pageSize: clientPagination.pageSize,\n        numberOfPages: table.getPageCount(),\n        currentPage: clientPagination.pageIndex + 1,\n        totalItems: table.getFilteredRowModel().rows.length,\n        setCurrentPage: (page: number) => table.setPageIndex(page - 1),\n        onPageSizeChange: (size: number) => {\n          table.setPageSize(size);\n          table.setPageIndex(0);\n        },\n      }\n    : pagination;\n\n  const hasRows = visibleRows.length > 0;\n\n  return {\n    table,\n    isClientMode,\n    columnContentWidths,\n    registerRow,\n    beginRowsExit,\n    visibleRows,\n    orderedRowIds,\n    filteredCount,\n    activeTab,\n    tabs,\n    handleTabChange,\n    handleSearchInput,\n    handleHeaderSortClick,\n    resolveSortDirection,\n    clientPaginationProps,\n    isUpdating,\n    showUpdatingBar,\n    contentOpacityStyle,\n    dataTableOpacityTransitionClass,\n    showSkeleton,\n    hasRows,\n    clientSearchDebounceMs: CLIENT_SEARCH_DEBOUNCE_MS,\n  };\n};\n"],"names":[],"mappings":"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"}