@umodeapporg/ui 0.0.0-canary.ca10e69

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

@@ -0,0 +1,85 @@
+import { IDataTableFiltersConfig, IDataTableRow, IDataTableSortState, TDataTableDataMode, TDataTableFilterValues, TDataTableViewMode } from './types';
+import { IDataTablePagination } from './useDataTableInstance';
+export interface IDataTableFetchParams {
+    page: number;
+    size: number;
+    /** Server mode only. */
+    search?: string;
+    /** Server mode only. */
+    sort?: IDataTableSortState | null;
+    /** Server mode only: built from the active filters' `toServerParams`. */
+    filterParams: Record<string, unknown>;
+    /**
+     * Server mode only. Aborted when this load is superseded (params changed) or the
+     * table unmounts. Pass it to the HTTP layer (axios `signal`) so stale requests are
+     * cancelled instead of left pending.
+     */
+    signal?: AbortSignal;
+}
+export interface IDataTableFetchResult<T> {
+    data: Array<T>;
+    total: number;
+}
+export type TDataTableFetchPage<T> = (params: IDataTableFetchParams) => Promise<IDataTableFetchResult<T>>;
+interface IUseDataTableSourceParams<T extends IDataTableRow> {
+    /** The single switch: mirror `config.dataMode`. `client` = bulk + in-memory; `server` = paginated. */
+    dataMode: TDataTableDataMode | undefined;
+    /** The table's filter config: drives in-memory (client) or server params. */
+    filters?: IDataTableFiltersConfig<T>;
+    /** Fetches one page of ALREADY ROW-SHAPED data. Same function feeds both modes. */
+    fetchPage: TDataTableFetchPage<T>;
+    /** Drawer filter values (applied in memory in client mode, sent as params in server mode). */
+    filterValues?: TDataTableFilterValues;
+    /**
+     * Server mode only: page-level backend params outside the drawer filters (time
+     * window, partner scope). Merged into `filterParams` and into the reload key, so
+     * changing them refetches from page 1 — closures inside `fetchPage` do NOT
+     * retrigger loads (the fetch runs through a ref) and silently go stale.
+     * MUST be reference-stable per value (useMemo); an inline object literal here
+     * recreates the params every render and re-fires the load effect.
+     */
+    serverParams?: Record<string, unknown>;
+    /** Bump to force a reload (e.g. after a mutation). */
+    reloadToken?: number;
+    bulkPageSize?: number;
+    serverPageSize?: number;
+    /**
+     * Current view mode (server mode only). When `cards`, server pages are appended
+     * for infinite scroll (`cardsInfinite`); when `list`, they replace, page by page.
+     */
+    viewMode?: TDataTableViewMode;
+}
+/**
+ * Everything a `DataTable` consumer needs, decided by `dataMode` alone. Spread the
+ * server-mode props (`onSearch`/`sort`/`onSortChange`/`pagination`) into the table;
+ * in client mode they are `undefined` and the table does search/sort/pagination
+ * itself. Read `filteredCount`/`totalCount` for the "Showing X of Y" headline.
+ */
+export interface IDataTableSource<T extends IDataTableRow> {
+    rows: Array<T>;
+    loading: boolean;
+    error: boolean;
+    /** The caught error itself, for the surface to say WHY the load failed. */
+    errorCause: unknown;
+    onRetry: () => void;
+    reload: () => void;
+    filteredCount: number;
+    totalCount: number;
+    onFilteredCountChange: (count: number) => void;
+    onSearch?: (value: string) => void;
+    sort?: IDataTableSortState | null;
+    onSortChange?: (sort: IDataTableSortState | null) => void;
+    pagination?: IDataTablePagination;
+    /**
+     * Server mode + Cards view only. Drives the cards infinite scroll: the table
+     * observes the bottom sentinel and calls `loadMore` while `hasMore`. Undefined
+     * in list view or client mode (both keep their existing paging behaviour).
+     */
+    cardsInfinite?: {
+        hasMore: boolean;
+        loadingMore: boolean;
+        loadMore: () => void;
+    };
+}
+export declare const useDataTableSource: <T extends IDataTableRow>({ dataMode, filters, fetchPage, filterValues, serverParams, reloadToken, bulkPageSize, serverPageSize, viewMode, }: IUseDataTableSourceParams<T>) => IDataTableSource<T>;
+export {};

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

@@ -0,0 +1,199 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { uiLogger } from "../../../helpers/uiLogger.js";
+import { buildDataTableFilterParams, applyDataTableFilters } from "./applyDataTableFilters.js";
+const BULK_PAGE_SIZE = 2e3;
+const SERVER_PAGE_SIZE = 20;
+const EMPTY_FILTER_VALUES = {};
+const useDataTableSource = ({
+  dataMode,
+  filters,
+  fetchPage,
+  filterValues = EMPTY_FILTER_VALUES,
+  serverParams,
+  reloadToken = 0,
+  bulkPageSize = BULK_PAGE_SIZE,
+  serverPageSize = SERVER_PAGE_SIZE,
+  viewMode
+}) => {
+  const isClient = dataMode === "client";
+  const [loadedRows, setLoadedRows] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState(false);
+  const [errorCause, setErrorCause] = useState(null);
+  const [total, setTotal] = useState(0);
+  const [reachedEnd, setReachedEnd] = useState(false);
+  const appendNextRef = useRef(false);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(serverPageSize);
+  const [search, setSearch] = useState("");
+  const [sort, setSort] = useState(null);
+  const [clientFilteredCount, setClientFilteredCount] = useState(0);
+  const fetchPageRef = useRef(fetchPage);
+  fetchPageRef.current = fetchPage;
+  const inFlightRef = useRef(null);
+  const reloadTokenRef = useRef(reloadToken);
+  reloadTokenRef.current = reloadToken;
+  useEffect(
+    () => () => {
+      inFlightRef.current?.controller.abort();
+    },
+    []
+  );
+  const runClientLoad = useCallback(async () => {
+    setLoading(true);
+    setError(false);
+    setErrorCause(null);
+    try {
+      const first = await fetchPageRef.current({ page: 1, size: bulkPageSize, filterParams: {} });
+      const accumulated = [...first.data];
+      const lastPage = Math.max(1, Math.ceil((first.total || accumulated.length) / bulkPageSize));
+      if (lastPage > 1) {
+        const rest = await Promise.all(
+          Array.from(
+            { length: lastPage - 1 },
+            (_, index) => fetchPageRef.current({ page: index + 2, size: bulkPageSize, filterParams: {} })
+          )
+        );
+        rest.forEach((result) => accumulated.push(...result.data));
+      }
+      setLoadedRows(accumulated);
+      setTotal(accumulated.length);
+    } catch (loadError) {
+      uiLogger.error("DataTable client load failed", loadError);
+      setError(true);
+      setErrorCause(loadError);
+      setLoadedRows([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [bulkPageSize]);
+  const nextServerFilterParams = { ...serverParams, ...buildDataTableFilterParams(filters, filterValues) };
+  const serverFilterParamsKey = JSON.stringify(nextServerFilterParams);
+  const serverFilterParams = useMemo(() => nextServerFilterParams, [serverFilterParamsKey]);
+  const runServerLoad = useCallback(async () => {
+    const isAppend = appendNextRef.current;
+    appendNextRef.current = false;
+    const requestKey = JSON.stringify({
+      page,
+      pageSize,
+      search,
+      sort,
+      filters: serverFilterParams,
+      reloadToken: reloadTokenRef.current,
+      isAppend
+    });
+    const liveLoad = inFlightRef.current;
+    if (liveLoad && liveLoad.key === requestKey && !liveLoad.controller.signal.aborted) return;
+    liveLoad?.controller.abort();
+    const controller = new AbortController();
+    inFlightRef.current = { key: requestKey, controller };
+    if (isAppend) setLoadingMore(true);
+    else setLoading(true);
+    setError(false);
+    setErrorCause(null);
+    try {
+      const result = await fetchPageRef.current({
+        page,
+        size: pageSize,
+        search: search || void 0,
+        sort,
+        filterParams: serverFilterParams,
+        signal: controller.signal
+      });
+      if (controller.signal.aborted) return;
+      setLoadedRows((previous) => isAppend ? [...previous, ...result.data] : result.data);
+      setTotal(result.total);
+      if (isAppend && result.data.length === 0) setReachedEnd(true);
+      else if (!isAppend) setReachedEnd(false);
+    } catch (loadError) {
+      if (controller.signal.aborted) return;
+      uiLogger.error("DataTable server load failed", loadError);
+      setError(true);
+      setErrorCause(loadError);
+      if (!isAppend) setLoadedRows([]);
+    } finally {
+      if (inFlightRef.current?.controller === controller) inFlightRef.current = null;
+      if (!controller.signal.aborted) {
+        if (isAppend) setLoadingMore(false);
+        else setLoading(false);
+      }
+    }
+  }, [page, pageSize, search, sort, serverFilterParams]);
+  useEffect(() => {
+    if (isClient) void runClientLoad();
+  }, [isClient, reloadToken, runClientLoad]);
+  useEffect(() => {
+    if (!isClient) void runServerLoad();
+  }, [isClient, reloadToken, runServerLoad]);
+  const isInitialQueryRef = useRef(true);
+  useEffect(() => {
+    if (isInitialQueryRef.current) {
+      isInitialQueryRef.current = false;
+      return;
+    }
+    appendNextRef.current = false;
+    setPage(1);
+  }, [viewMode, serverFilterParams]);
+  const isInitialReloadRef = useRef(true);
+  useEffect(() => {
+    if (isInitialReloadRef.current) {
+      isInitialReloadRef.current = false;
+      return;
+    }
+    if (isClient || viewMode !== "cards") return;
+    appendNextRef.current = false;
+    setPage(1);
+  }, [reloadToken]);
+  const rows = useMemo(
+    () => isClient ? applyDataTableFilters(loadedRows, filters, filterValues) : loadedRows,
+    [isClient, loadedRows, filters, filterValues]
+  );
+  const loadMoreStateRef = useRef({ loading, loadingMore, loaded: 0, total, reachedEnd });
+  loadMoreStateRef.current = { loading, loadingMore, loaded: loadedRows.length, total, reachedEnd };
+  const loadMoreCards = useCallback(() => {
+    const current = loadMoreStateRef.current;
+    if (current.loading || current.loadingMore || current.reachedEnd) return;
+    if (current.loaded >= current.total) return;
+    appendNextRef.current = true;
+    setPage((previous) => previous + 1);
+  }, []);
+  const pagination = isClient ? void 0 : {
+    pageSize,
+    numberOfPages: Math.max(1, Math.ceil(total / pageSize)),
+    currentPage: page,
+    totalItems: total,
+    setCurrentPage: setPage,
+    onPageSizeChange: (size) => {
+      setPageSize(size);
+      setPage(1);
+    }
+  };
+  const reload = isClient ? runClientLoad : runServerLoad;
+  return {
+    rows,
+    loading,
+    error,
+    errorCause,
+    onRetry: reload,
+    reload,
+    filteredCount: isClient ? clientFilteredCount : total,
+    totalCount: total,
+    onFilteredCountChange: setClientFilteredCount,
+    onSearch: isClient ? void 0 : (value) => {
+      setSearch(value);
+      setPage(1);
+    },
+    sort: isClient ? void 0 : sort,
+    onSortChange: isClient ? void 0 : (next) => {
+      setSort(next);
+      setPage(1);
+    },
+    pagination,
+    cardsInfinite: !isClient && viewMode === "cards" ? { hasMore: !reachedEnd && loadedRows.length < total, loadingMore, loadMore: loadMoreCards } : void 0
+  };
+};
+export {
+  useDataTableSource
+};
+//# sourceMappingURL=useDataTableSource.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDataTableSource.js","sources":["../../../../src/components/UI/DataTable/useDataTableSource.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { uiLogger } from '@/helpers/uiLogger';\n\nimport { applyDataTableFilters, buildDataTableFilterParams } from './applyDataTableFilters';\nimport type {\n  IDataTableFiltersConfig,\n  IDataTableRow,\n  IDataTableSortState,\n  TDataTableDataMode,\n  TDataTableFilterValues,\n  TDataTableViewMode,\n} from './types';\nimport type { IDataTablePagination } from './useDataTableInstance';\n\nconst BULK_PAGE_SIZE = 2000;\nconst SERVER_PAGE_SIZE = 20;\n\n// Stable reference for the \"no drawer filters\" case. A `= {}` default would be a\n// fresh object every render, invalidating serverFilterParams -> runServerLoad ->\n// the server-load effect, firing a refetch on every render (flicker + request\n// storm) for consumers that do not pass `filterValues`.\nconst EMPTY_FILTER_VALUES: TDataTableFilterValues = {};\n\nexport interface IDataTableFetchParams {\n  page: number;\n  size: number;\n  /** Server mode only. */\n  search?: string;\n  /** Server mode only. */\n  sort?: IDataTableSortState | null;\n  /** Server mode only: built from the active filters' `toServerParams`. */\n  filterParams: Record<string, unknown>;\n  /**\n   * Server mode only. Aborted when this load is superseded (params changed) or the\n   * table unmounts. Pass it to the HTTP layer (axios `signal`) so stale requests are\n   * cancelled instead of left pending.\n   */\n  signal?: AbortSignal;\n}\n\nexport interface IDataTableFetchResult<T> {\n  data: Array<T>;\n  total: number;\n}\n\nexport type TDataTableFetchPage<T> = (params: IDataTableFetchParams) => Promise<IDataTableFetchResult<T>>;\n\ninterface IUseDataTableSourceParams<T extends IDataTableRow> {\n  /** The single switch: mirror `config.dataMode`. `client` = bulk + in-memory; `server` = paginated. */\n  dataMode: TDataTableDataMode | undefined;\n  /** The table's filter config: drives in-memory (client) or server params. */\n  filters?: IDataTableFiltersConfig<T>;\n  /** Fetches one page of ALREADY ROW-SHAPED data. Same function feeds both modes. */\n  fetchPage: TDataTableFetchPage<T>;\n  /** Drawer filter values (applied in memory in client mode, sent as params in server mode). */\n  filterValues?: TDataTableFilterValues;\n  /**\n   * Server mode only: page-level backend params outside the drawer filters (time\n   * window, partner scope). Merged into `filterParams` and into the reload key, so\n   * changing them refetches from page 1 — closures inside `fetchPage` do NOT\n   * retrigger loads (the fetch runs through a ref) and silently go stale.\n   * MUST be reference-stable per value (useMemo); an inline object literal here\n   * recreates the params every render and re-fires the load effect.\n   */\n  serverParams?: Record<string, unknown>;\n  /** Bump to force a reload (e.g. after a mutation). */\n  reloadToken?: number;\n  bulkPageSize?: number;\n  serverPageSize?: number;\n  /**\n   * Current view mode (server mode only). When `cards`, server pages are appended\n   * for infinite scroll (`cardsInfinite`); when `list`, they replace, page by page.\n   */\n  viewMode?: TDataTableViewMode;\n}\n\n/**\n * Everything a `DataTable` consumer needs, decided by `dataMode` alone. Spread the\n * server-mode props (`onSearch`/`sort`/`onSortChange`/`pagination`) into the table;\n * in client mode they are `undefined` and the table does search/sort/pagination\n * itself. Read `filteredCount`/`totalCount` for the \"Showing X of Y\" headline.\n */\nexport interface IDataTableSource<T extends IDataTableRow> {\n  rows: Array<T>;\n  loading: boolean;\n  error: boolean;\n  /** The caught error itself, for the surface to say WHY the load failed. */\n  errorCause: unknown;\n  onRetry: () => void;\n  reload: () => void;\n  filteredCount: number;\n  totalCount: number;\n  onFilteredCountChange: (count: number) => void;\n  onSearch?: (value: string) => void;\n  sort?: IDataTableSortState | null;\n  onSortChange?: (sort: IDataTableSortState | null) => void;\n  pagination?: IDataTablePagination;\n  /**\n   * Server mode + Cards view only. Drives the cards infinite scroll: the table\n   * observes the bottom sentinel and calls `loadMore` while `hasMore`. Undefined\n   * in list view or client mode (both keep their existing paging behaviour).\n   */\n  cardsInfinite?: {\n    hasMore: boolean;\n    loadingMore: boolean;\n    loadMore: () => void;\n  };\n}\n\nexport const useDataTableSource = <T extends IDataTableRow>({\n  dataMode,\n  filters,\n  fetchPage,\n  filterValues = EMPTY_FILTER_VALUES,\n  serverParams,\n  reloadToken = 0,\n  bulkPageSize = BULK_PAGE_SIZE,\n  serverPageSize = SERVER_PAGE_SIZE,\n  viewMode,\n}: IUseDataTableSourceParams<T>): IDataTableSource<T> => {\n  const isClient = dataMode === 'client';\n\n  // Client: the full set. Server list: the current page. Server cards: pages are\n  // appended (infinite scroll), so this accumulates.\n  const [loadedRows, setLoadedRows] = useState<Array<T>>([]);\n  const [loading, setLoading] = useState(true);\n  // Appending the next cards page keeps the loaded rows visible (no skeleton/dim):\n  // a separate flag drives the bottom \"loading more\" spinner only.\n  const [loadingMore, setLoadingMore] = useState(false);\n  const [error, setError] = useState(false);\n  const [errorCause, setErrorCause] = useState<unknown>(null);\n  const [total, setTotal] = useState(0);\n  // Guards the cards infinite scroll against a backend that reports more rows than\n  // it returns: once an appended page comes back empty, stop asking for more.\n  const [reachedEnd, setReachedEnd] = useState(false);\n\n  // Set right before a page bump when the next server load must append (cards\n  // infinite scroll) instead of replacing. Read and reset inside the load.\n  const appendNextRef = useRef(false);\n\n  // Server-mode round-trip state.\n  const [page, setPage] = useState(1);\n  const [pageSize, setPageSize] = useState(serverPageSize);\n  const [search, setSearch] = useState('');\n  const [sort, setSort] = useState<IDataTableSortState | null>(null);\n\n  // Client-mode post-search count reported by the table (for the headline).\n  const [clientFilteredCount, setClientFilteredCount] = useState(0);\n\n  // The consumer passes an inline `fetchPage`; a ref keeps the load callbacks\n  // stable while always calling the latest closure.\n  const fetchPageRef = useRef(fetchPage);\n  fetchPageRef.current = fetchPage;\n\n  // Circuit breaker + cancelamento: refuses to start a server load identical\n  // (same page/search/sort/filters/token) to one already LIVE in flight — without\n  // it, any consumer that destabilizes the load deps re-fires the effect every\n  // render and floods the backend with thousands of parallel duplicates until the\n  // tab freezes (the admin sessions 401 storm). A DIFFERENT load aborts the\n  // previous one (params changed mid-flight) and takes ownership of the state;\n  // unmount aborts whatever is pending. A retry after settle passes normally.\n  const inFlightRef = useRef<{ key: string; controller: AbortController } | null>(null);\n  const reloadTokenRef = useRef(reloadToken);\n  reloadTokenRef.current = reloadToken;\n\n  useEffect(\n    () => () => {\n      inFlightRef.current?.controller.abort();\n    },\n    [],\n  );\n\n  // Client: first (large) page to learn the total, then any remaining pages in\n  // parallel. No filter/search/sort params, everything is applied in memory.\n  const runClientLoad = useCallback(async () => {\n    setLoading(true);\n    setError(false);\n    setErrorCause(null);\n\n    try {\n      const first = await fetchPageRef.current({ page: 1, size: bulkPageSize, filterParams: {} });\n      const accumulated = [...first.data];\n      const lastPage = Math.max(1, Math.ceil((first.total || accumulated.length) / bulkPageSize));\n\n      if (lastPage > 1) {\n        const rest = await Promise.all(\n          Array.from({ length: lastPage - 1 }, (_, index) =>\n            fetchPageRef.current({ page: index + 2, size: bulkPageSize, filterParams: {} }),\n          ),\n        );\n        rest.forEach((result) => accumulated.push(...result.data));\n      }\n\n      setLoadedRows(accumulated);\n      setTotal(accumulated.length);\n    } catch (loadError) {\n      uiLogger.error('DataTable client load failed', loadError);\n      setError(true);\n      setErrorCause(loadError);\n      setLoadedRows([]);\n    } finally {\n      setLoading(false);\n    }\n  }, [bulkPageSize]);\n\n  // Stabilize by VALUE, not by reference: a parent re-render can hand us a new\n  // `filters`/`filterValues`/`serverParams` object that produces identical params.\n  // Keying the memo on the serialized params keeps the same reference across such\n  // re-renders, so `runServerLoad` (and its effect) does not refire and issue a\n  // duplicate request. Drawer filters win over page-level serverParams on key clash.\n  const nextServerFilterParams = { ...serverParams, ...buildDataTableFilterParams(filters, filterValues) };\n  const serverFilterParamsKey = JSON.stringify(nextServerFilterParams);\n  const serverFilterParams = useMemo(() => nextServerFilterParams, [serverFilterParamsKey]);\n\n  // Server: one page, with search/sort/filters as backend params. In cards view\n  // the next page is appended (infinite scroll); otherwise it replaces.\n  const runServerLoad = useCallback(async () => {\n    const isAppend = appendNextRef.current;\n    appendNextRef.current = false;\n\n    const requestKey = JSON.stringify({\n      page,\n      pageSize,\n      search,\n      sort,\n      filters: serverFilterParams,\n      reloadToken: reloadTokenRef.current,\n      isAppend,\n    });\n    const liveLoad = inFlightRef.current;\n    if (liveLoad && liveLoad.key === requestKey && !liveLoad.controller.signal.aborted) return;\n    liveLoad?.controller.abort();\n\n    const controller = new AbortController();\n    inFlightRef.current = { key: requestKey, controller };\n\n    if (isAppend) setLoadingMore(true);\n    else setLoading(true);\n    setError(false);\n    setErrorCause(null);\n\n    try {\n      const result = await fetchPageRef.current({\n        page,\n        size: pageSize,\n        search: search || undefined,\n        sort,\n        filterParams: serverFilterParams,\n        signal: controller.signal,\n      });\n      if (controller.signal.aborted) return;\n      setLoadedRows((previous) => (isAppend ? [...previous, ...result.data] : result.data));\n      setTotal(result.total);\n      if (isAppend && result.data.length === 0) setReachedEnd(true);\n      else if (!isAppend) setReachedEnd(false);\n    } catch (loadError) {\n      // Um load abortado foi substituído por outro (ou o componente saiu de cena):\n      // o estado pertence ao load mais novo; não é erro.\n      if (controller.signal.aborted) return;\n      uiLogger.error('DataTable server load failed', loadError);\n      setError(true);\n      setErrorCause(loadError);\n      if (!isAppend) setLoadedRows([]);\n    } finally {\n      if (inFlightRef.current?.controller === controller) inFlightRef.current = null;\n      if (!controller.signal.aborted) {\n        if (isAppend) setLoadingMore(false);\n        else setLoading(false);\n      }\n    }\n  }, [page, pageSize, search, sort, serverFilterParams]);\n\n  // Client reloads only on mount / reloadToken (filters are in-memory). Server\n  // reloads whenever page/size/search/sort/filters change, or on reloadToken.\n  useEffect(() => {\n    if (isClient) void runClientLoad();\n  }, [isClient, reloadToken, runClientLoad]);\n\n  useEffect(() => {\n    if (!isClient) void runServerLoad();\n  }, [isClient, reloadToken, runServerLoad]);\n\n  // A drawer-filter change or a Cards<->Lista switch restarts paging at page 1 so\n  // the next server load replaces (never appends onto a stale filter/mode). Skips\n  // the mount run so the first page is not loaded twice.\n  const isInitialQueryRef = useRef(true);\n  useEffect(() => {\n    if (isInitialQueryRef.current) {\n      isInitialQueryRef.current = false;\n      return;\n    }\n    appendNextRef.current = false;\n    setPage(1);\n  }, [viewMode, serverFilterParams]);\n\n  // Cards view accumulates pages, so a post-mutation reload must restart at page 1\n  // (otherwise it would replace the accumulated cards with just the current page).\n  // List mode reloads its current page unchanged.\n  const isInitialReloadRef = useRef(true);\n  useEffect(() => {\n    if (isInitialReloadRef.current) {\n      isInitialReloadRef.current = false;\n      return;\n    }\n    if (isClient || viewMode !== 'cards') return;\n    appendNextRef.current = false;\n    setPage(1);\n  }, [reloadToken]);\n\n  // Client applies drawer filters in memory; server rows are already filtered.\n  const rows = useMemo(\n    () => (isClient ? applyDataTableFilters(loadedRows, filters, filterValues) : loadedRows),\n    [isClient, loadedRows, filters, filterValues],\n  );\n\n  // Stable across renders (reads live state via a ref) so the table's\n  // IntersectionObserver effect is not re-created on every data change.\n  const loadMoreStateRef = useRef({ loading, loadingMore, loaded: 0, total, reachedEnd });\n  loadMoreStateRef.current = { loading, loadingMore, loaded: loadedRows.length, total, reachedEnd };\n\n  const loadMoreCards = useCallback(() => {\n    const current = loadMoreStateRef.current;\n    if (current.loading || current.loadingMore || current.reachedEnd) return;\n    if (current.loaded >= current.total) return;\n    appendNextRef.current = true;\n    setPage((previous) => previous + 1);\n  }, []);\n\n  const pagination: IDataTablePagination | undefined = isClient\n    ? undefined\n    : {\n        pageSize,\n        numberOfPages: Math.max(1, Math.ceil(total / pageSize)),\n        currentPage: page,\n        totalItems: total,\n        setCurrentPage: setPage,\n        onPageSizeChange: (size) => {\n          setPageSize(size);\n          setPage(1);\n        },\n      };\n\n  const reload = isClient ? runClientLoad : runServerLoad;\n\n  return {\n    rows,\n    loading,\n    error,\n    errorCause,\n    onRetry: reload,\n    reload,\n    filteredCount: isClient ? clientFilteredCount : total,\n    totalCount: total,\n    onFilteredCountChange: setClientFilteredCount,\n    onSearch: isClient\n      ? undefined\n      : (value) => {\n          setSearch(value);\n          setPage(1);\n        },\n    sort: isClient ? undefined : sort,\n    onSortChange: isClient\n      ? undefined\n      : (next) => {\n          setSort(next);\n          setPage(1);\n        },\n    pagination,\n    cardsInfinite:\n      !isClient && viewMode === 'cards'\n        ? { hasMore: !reachedEnd && loadedRows.length < total, loadingMore, loadMore: loadMoreCards }\n        : undefined,\n  };\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+import { KeyboardEvent } from 'react';
+import { IDataTableColumnConfig, IDataTableFillChange, IDataTableRow } from './types';
+export interface IDataTableRestoredCell<T extends IDataTableRow> {
+    row: T;
+    columnId: string;
+}
+interface IUseDataTableUndoHistoryParams<T extends IDataTableRow> {
+    enabled: boolean;
+    rows: Array<T>;
+    columns: Array<IDataTableColumnConfig<T>>;
+    onCellChange?: (row: T, columnId: string, value: unknown) => void;
+    onFillCells?: (changes: Array<IDataTableFillChange<T>>) => void;
+}
+/**
+ * Undo/redo of the edits made through the table. Every write already goes through
+ * `editing.onCellChange` or `spreadsheet.fill.onFillCells`, and the column knows the
+ * value the cell held (`editable.getValue`), so undoing is writing that value back
+ * through the same handler: the host persists it like any other edit.
+ *
+ * - keystrokes on the same cell within a short window become one step;
+ * - a fill, a bulk edit or any writes fired in the same tick become one step;
+ * - a write that brings a cell back to the value before its last step (Escape on
+ *   an editor) removes that step instead of stacking a second one.
+ */
+export declare function useDataTableUndoHistory<T extends IDataTableRow>({ enabled, rows, columns, onCellChange, onFillCells, }: IUseDataTableUndoHistoryParams<T>): {
+    recordedOnCellChange: (row: T, columnId: string, value: unknown) => void;
+    recordedOnFillCells: (changes: Array<IDataTableFillChange<T>>) => void;
+    handleUndoShortcut: (event: KeyboardEvent<HTMLElement>) => IDataTableRestoredCell<T> | null;
+};
+export {};

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

@@ -0,0 +1,130 @@
+import { useRef, useCallback } from "react";
+import { isTextEntryTarget } from "./grid/useGridKeyboard.js";
+const TYPING_MERGE_WINDOW_MS = 1e3;
+const resolveUndoDirection = (event) => {
+  if (!(event.ctrlKey || event.metaKey) || event.altKey) return null;
+  const pressedKey = event.key.toLowerCase();
+  if (pressedKey === "z") return event.shiftKey ? "redo" : "undo";
+  if (pressedKey === "y" && event.ctrlKey && !event.shiftKey) return "redo";
+  return null;
+};
+const areCellValuesEqual = (left, right) => JSON.stringify(left ?? null) === JSON.stringify(right ?? null);
+function useDataTableUndoHistory({
+  enabled,
+  rows,
+  columns,
+  onCellChange,
+  onFillCells
+}) {
+  const enabledRef = useRef(enabled);
+  enabledRef.current = enabled;
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+  const columnsRef = useRef(columns);
+  columnsRef.current = columns;
+  const onCellChangeRef = useRef(onCellChange);
+  onCellChangeRef.current = onCellChange;
+  const onFillCellsRef = useRef(onFillCells);
+  onFillCellsRef.current = onFillCells;
+  const undoStackRef = useRef([]);
+  const redoStackRef = useRef([]);
+  const sameTickEntryRef = useRef(null);
+  const readCellValue = useCallback(
+    (row, columnId) => (columnsRef.current ?? []).find((column) => column.id === columnId)?.editable?.getValue(row) ?? null,
+    []
+  );
+  const recordCellChanges = useCallback(
+    (changes) => {
+      if (!enabledRef.current) return;
+      const changedCells = (changes ?? []).map(({ row, columnId, value }) => ({
+        row,
+        columnId,
+        previousValue: readCellValue(row, columnId),
+        nextValue: value
+      })).filter((cell) => !areCellValuesEqual(cell.previousValue, cell.nextValue));
+      if (changedCells.length === 0) return;
+      redoStackRef.current = [];
+      const now = Date.now();
+      const sameTickEntry = sameTickEntryRef.current;
+      if (sameTickEntry) {
+        sameTickEntry.cells.push(...changedCells);
+        return;
+      }
+      const lastEntry = undoStackRef.current[undoStackRef.current.length - 1];
+      const lastCell = lastEntry?.cells.length === 1 ? lastEntry.cells[0] : void 0;
+      const onlyChangedCell = changedCells.length === 1 ? changedCells[0] : void 0;
+      if (lastEntry && lastCell && onlyChangedCell && lastCell.row.id === onlyChangedCell.row.id && lastCell.columnId === onlyChangedCell.columnId) {
+        if (areCellValuesEqual(onlyChangedCell.nextValue, lastCell.previousValue)) {
+          undoStackRef.current = undoStackRef.current.slice(0, -1);
+          return;
+        }
+        if (now - lastEntry.recordedAt < TYPING_MERGE_WINDOW_MS) {
+          lastCell.nextValue = onlyChangedCell.nextValue;
+          lastEntry.recordedAt = now;
+          return;
+        }
+      }
+      const entry = { cells: changedCells, recordedAt: now };
+      undoStackRef.current = [...undoStackRef.current, entry].slice(-100);
+      sameTickEntryRef.current = entry;
+      queueMicrotask(() => {
+        sameTickEntryRef.current = null;
+      });
+    },
+    [readCellValue]
+  );
+  const recordedOnCellChange = useCallback(
+    (row, columnId, value) => {
+      recordCellChanges([{ row, columnId, value }]);
+      onCellChangeRef.current?.(row, columnId, value);
+    },
+    [recordCellChanges]
+  );
+  const recordedOnFillCells = useCallback(
+    (changes) => {
+      recordCellChanges(changes);
+      onFillCellsRef.current?.(changes);
+    },
+    [recordCellChanges]
+  );
+  const replayLastEntry = useCallback((direction) => {
+    const sourceStackRef = direction === "undo" ? undoStackRef : redoStackRef;
+    const targetStackRef = direction === "undo" ? redoStackRef : undoStackRef;
+    const entry = sourceStackRef.current[sourceStackRef.current.length - 1];
+    if (!entry) return null;
+    const cellWrites = entry.cells.map((cell) => ({
+      row: (rowsRef.current ?? []).find((candidate) => candidate.id === cell.row.id) ?? cell.row,
+      columnId: cell.columnId,
+      value: direction === "undo" ? cell.previousValue : cell.nextValue
+    }));
+    if (cellWrites.length > 1 && onFillCellsRef.current) {
+      onFillCellsRef.current(cellWrites);
+    } else {
+      cellWrites.forEach((write) => onCellChangeRef.current?.(write.row, write.columnId, write.value));
+    }
+    sourceStackRef.current = sourceStackRef.current.slice(0, -1);
+    targetStackRef.current = [...targetStackRef.current, entry].slice(-100);
+    sameTickEntryRef.current = null;
+    const firstWrite = cellWrites[0];
+    return firstWrite ? { row: firstWrite.row, columnId: firstWrite.columnId } : null;
+  }, []);
+  const handleUndoShortcut = useCallback(
+    (event) => {
+      if (!enabledRef.current || event.defaultPrevented) return null;
+      if (!(event.target instanceof Node) || !event.currentTarget.contains(event.target)) return null;
+      const direction = resolveUndoDirection(event);
+      if (!direction || isTextEntryTarget(event.target)) return null;
+      const restoredCell = replayLastEntry(direction);
+      if (!restoredCell) return null;
+      event.preventDefault();
+      event.stopPropagation();
+      return restoredCell;
+    },
+    [replayLastEntry]
+  );
+  return { recordedOnCellChange, recordedOnFillCells, handleUndoShortcut };
+}
+export {
+  useDataTableUndoHistory
+};
+//# sourceMappingURL=useDataTableUndoHistory.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDataTableUndoHistory.js","sources":["../../../../src/components/UI/DataTable/useDataTableUndoHistory.ts"],"sourcesContent":["import { type KeyboardEvent, useCallback, useRef } from 'react';\n\nimport { isTextEntryTarget } from './grid/useGridKeyboard';\nimport type { IDataTableColumnConfig, IDataTableFillChange, IDataTableRow } from './types';\n\nconst MAX_UNDO_ENTRIES = 100;\nconst TYPING_MERGE_WINDOW_MS = 1000;\n\ntype TDataTableUndoDirection = 'undo' | 'redo';\n\ninterface IDataTableUndoCell<T extends IDataTableRow> {\n  row: T;\n  columnId: string;\n  previousValue: unknown;\n  nextValue: unknown;\n}\n\ninterface IDataTableUndoEntry<T extends IDataTableRow> {\n  cells: Array<IDataTableUndoCell<T>>;\n  recordedAt: number;\n}\n\nexport interface IDataTableRestoredCell<T extends IDataTableRow> {\n  row: T;\n  columnId: string;\n}\n\ninterface IUseDataTableUndoHistoryParams<T extends IDataTableRow> {\n  enabled: boolean;\n  rows: Array<T>;\n  columns: Array<IDataTableColumnConfig<T>>;\n  onCellChange?: (row: T, columnId: string, value: unknown) => void;\n  onFillCells?: (changes: Array<IDataTableFillChange<T>>) => void;\n}\n\nconst resolveUndoDirection = (event: KeyboardEvent): TDataTableUndoDirection | null => {\n  if (!(event.ctrlKey || event.metaKey) || event.altKey) return null;\n  const pressedKey = event.key.toLowerCase();\n  if (pressedKey === 'z') return event.shiftKey ? 'redo' : 'undo';\n  if (pressedKey === 'y' && event.ctrlKey && !event.shiftKey) return 'redo';\n  return null;\n};\n\nconst areCellValuesEqual = (left: unknown, right: unknown): boolean =>\n  JSON.stringify(left ?? null) === JSON.stringify(right ?? null);\n\n/**\n * Undo/redo of the edits made through the table. Every write already goes through\n * `editing.onCellChange` or `spreadsheet.fill.onFillCells`, and the column knows the\n * value the cell held (`editable.getValue`), so undoing is writing that value back\n * through the same handler: the host persists it like any other edit.\n *\n * - keystrokes on the same cell within a short window become one step;\n * - a fill, a bulk edit or any writes fired in the same tick become one step;\n * - a write that brings a cell back to the value before its last step (Escape on\n *   an editor) removes that step instead of stacking a second one.\n */\nexport function useDataTableUndoHistory<T extends IDataTableRow>({\n  enabled,\n  rows,\n  columns,\n  onCellChange,\n  onFillCells,\n}: IUseDataTableUndoHistoryParams<T>) {\n  const enabledRef = useRef(enabled);\n  enabledRef.current = enabled;\n  const rowsRef = useRef(rows);\n  rowsRef.current = rows;\n  const columnsRef = useRef(columns);\n  columnsRef.current = columns;\n  const onCellChangeRef = useRef(onCellChange);\n  onCellChangeRef.current = onCellChange;\n  const onFillCellsRef = useRef(onFillCells);\n  onFillCellsRef.current = onFillCells;\n\n  const undoStackRef = useRef<Array<IDataTableUndoEntry<T>>>([]);\n  const redoStackRef = useRef<Array<IDataTableUndoEntry<T>>>([]);\n  const sameTickEntryRef = useRef<IDataTableUndoEntry<T> | null>(null);\n\n  const readCellValue = useCallback(\n    (row: T, columnId: string): unknown =>\n      (columnsRef.current ?? []).find((column) => column.id === columnId)?.editable?.getValue(row) ?? null,\n    [],\n  );\n\n  const recordCellChanges = useCallback(\n    (changes: Array<IDataTableFillChange<T>>) => {\n      if (!enabledRef.current) return;\n\n      const changedCells = (changes ?? [])\n        .map<IDataTableUndoCell<T>>(({ row, columnId, value }) => ({\n          row,\n          columnId,\n          previousValue: readCellValue(row, columnId),\n          nextValue: value,\n        }))\n        .filter((cell) => !areCellValuesEqual(cell.previousValue, cell.nextValue));\n      if (changedCells.length === 0) return;\n\n      redoStackRef.current = [];\n      const now = Date.now();\n\n      const sameTickEntry = sameTickEntryRef.current;\n      if (sameTickEntry) {\n        sameTickEntry.cells.push(...changedCells);\n        return;\n      }\n\n      const lastEntry = undoStackRef.current[undoStackRef.current.length - 1];\n      const lastCell = lastEntry?.cells.length === 1 ? lastEntry.cells[0] : undefined;\n      const onlyChangedCell = changedCells.length === 1 ? changedCells[0] : undefined;\n\n      if (\n        lastEntry &&\n        lastCell &&\n        onlyChangedCell &&\n        lastCell.row.id === onlyChangedCell.row.id &&\n        lastCell.columnId === onlyChangedCell.columnId\n      ) {\n        if (areCellValuesEqual(onlyChangedCell.nextValue, lastCell.previousValue)) {\n          undoStackRef.current = undoStackRef.current.slice(0, -1);\n          return;\n        }\n        if (now - lastEntry.recordedAt < TYPING_MERGE_WINDOW_MS) {\n          lastCell.nextValue = onlyChangedCell.nextValue;\n          lastEntry.recordedAt = now;\n          return;\n        }\n      }\n\n      const entry: IDataTableUndoEntry<T> = { cells: changedCells, recordedAt: now };\n      undoStackRef.current = [...undoStackRef.current, entry].slice(-MAX_UNDO_ENTRIES);\n      sameTickEntryRef.current = entry;\n      queueMicrotask(() => {\n        sameTickEntryRef.current = null;\n      });\n    },\n    [readCellValue],\n  );\n\n  const recordedOnCellChange = useCallback(\n    (row: T, columnId: string, value: unknown) => {\n      recordCellChanges([{ row, columnId, value }]);\n      onCellChangeRef.current?.(row, columnId, value);\n    },\n    [recordCellChanges],\n  );\n\n  const recordedOnFillCells = useCallback(\n    (changes: Array<IDataTableFillChange<T>>) => {\n      recordCellChanges(changes);\n      onFillCellsRef.current?.(changes);\n    },\n    [recordCellChanges],\n  );\n\n  const replayLastEntry = useCallback((direction: TDataTableUndoDirection): IDataTableRestoredCell<T> | null => {\n    const sourceStackRef = direction === 'undo' ? undoStackRef : redoStackRef;\n    const targetStackRef = direction === 'undo' ? redoStackRef : undoStackRef;\n    const entry = sourceStackRef.current[sourceStackRef.current.length - 1];\n    if (!entry) return null;\n\n    const cellWrites = entry.cells.map<IDataTableFillChange<T>>((cell) => ({\n      row: (rowsRef.current ?? []).find((candidate) => candidate.id === cell.row.id) ?? cell.row,\n      columnId: cell.columnId,\n      value: direction === 'undo' ? cell.previousValue : cell.nextValue,\n    }));\n\n    if (cellWrites.length > 1 && onFillCellsRef.current) {\n      onFillCellsRef.current(cellWrites);\n    } else {\n      cellWrites.forEach((write) => onCellChangeRef.current?.(write.row, write.columnId, write.value));\n    }\n\n    sourceStackRef.current = sourceStackRef.current.slice(0, -1);\n    targetStackRef.current = [...targetStackRef.current, entry].slice(-MAX_UNDO_ENTRIES);\n    sameTickEntryRef.current = null;\n\n    const firstWrite = cellWrites[0];\n    return firstWrite ? { row: firstWrite.row, columnId: firstWrite.columnId } : null;\n  }, []);\n\n  /**\n   * Handles Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z (or Ctrl+Y) pressed inside the table.\n   * A focused text control keeps its own native undo, and with nothing to replay the\n   * event is left untouched so an outer surface can still handle it.\n   */\n  const handleUndoShortcut = useCallback(\n    (event: KeyboardEvent<HTMLElement>): IDataTableRestoredCell<T> | null => {\n      if (!enabledRef.current || event.defaultPrevented) return null;\n      if (!(event.target instanceof Node) || !event.currentTarget.contains(event.target)) return null;\n\n      const direction = resolveUndoDirection(event);\n      if (!direction || isTextEntryTarget(event.target)) return null;\n\n      const restoredCell = replayLastEntry(direction);\n      if (!restoredCell) return null;\n\n      event.preventDefault();\n      event.stopPropagation();\n      return restoredCell;\n    },\n    [replayLastEntry],\n  );\n\n  return { recordedOnCellChange, recordedOnFillCells, handleUndoShortcut };\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+/**
+ * Lightweight FLIP animation (Web Animations API, no dependency).
+ *
+ * `registerRow` returns a stable ref-setter to attach to each animated row,
+ * keyed by row id. Rows that change position animate from their previous spot
+ * to the new one (First-Last-Invert-Play). Rows that just appeared are shown in
+ * place with NO opacity fade (a fade at the top of the list reads as a first-row
+ * "blink").
+ *
+ * `beginExit(ids)` supports animated REMOVAL (e.g. collapsing a group): React
+ * unmounts rows instantly, which FLIP alone cannot animate: the items would
+ * vanish and only then the gap would slide shut. Call it right before the
+ * removal commits: it clones the departing rows while they are still in the
+ * DOM, and on the next layout pass the clones are overlaid at their exact old
+ * position, fading/sliding up while the rows below FLIP into place. The two
+ * motions together read as a genuine close animation. Respects
+ * `prefers-reduced-motion`.
+ */
+export declare const useFlipRows: (orderedRowIds: Array<string>, durationMs?: number) => {
+    registerRow: (id: string) => (element: HTMLElement | null) => void;
+    beginExit: (ids: Array<string>) => void;
+};

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

@@ -0,0 +1,90 @@
+import { useRef, useLayoutEffect } from "react";
+import { prefersReducedMotion } from "./dataTableMotion.js";
+const FLIP_DURATION_MS = 220;
+const useFlipRows = (orderedRowIds, durationMs = FLIP_DURATION_MS) => {
+  const rowElements = useRef(/* @__PURE__ */ new Map());
+  const previousRects = useRef(/* @__PURE__ */ new Map());
+  const rowCallbacks = useRef(/* @__PURE__ */ new Map());
+  const pendingExits = useRef([]);
+  const registerRow = (id) => {
+    const existing = rowCallbacks.current.get(id);
+    if (existing) return existing;
+    const callback = (element) => {
+      if (element) rowElements.current.set(id, element);
+      else rowElements.current.delete(id);
+    };
+    rowCallbacks.current.set(id, callback);
+    return callback;
+  };
+  const beginExit = (ids) => {
+    if (prefersReducedMotion()) return;
+    const exits = [];
+    ids.forEach((id) => {
+      const element = rowElements.current.get(id);
+      if (!element) return;
+      exits.push({
+        clone: element.cloneNode(true),
+        rect: element.getBoundingClientRect(),
+        cellWidths: Array.from(element.children).map((cell) => cell.getBoundingClientRect().width)
+      });
+    });
+    pendingExits.current = exits;
+  };
+  const playExitGhosts = () => {
+    const exits = pendingExits.current;
+    pendingExits.current = [];
+    exits.forEach(({ clone, rect, cellWidths }) => {
+      const overlay = document.createElement("div");
+      overlay.style.cssText = `position:fixed;top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;overflow:hidden;pointer-events:none;z-index:10;`;
+      const ghostTable = document.createElement("table");
+      ghostTable.style.cssText = `width:${rect.width}px;table-layout:fixed;border-collapse:separate;border-spacing:0;`;
+      Array.from(clone.children).forEach((cell, index) => {
+        cell.style.width = `${cellWidths[index]}px`;
+      });
+      const ghostBody = document.createElement("tbody");
+      ghostBody.appendChild(clone);
+      ghostTable.appendChild(ghostBody);
+      overlay.appendChild(ghostTable);
+      document.body.appendChild(overlay);
+      const animation = overlay.animate(
+        [
+          { opacity: 1, transform: "none" },
+          { opacity: 0, transform: `translateY(-${Math.min(rect.height, 24)}px)` }
+        ],
+        { duration: durationMs, easing: "ease" }
+      );
+      animation.onfinish = () => overlay.remove();
+      animation.oncancel = () => overlay.remove();
+    });
+  };
+  useLayoutEffect(() => {
+    if (prefersReducedMotion()) {
+      previousRects.current = /* @__PURE__ */ new Map();
+      rowElements.current.forEach((element, id) => previousRects.current.set(id, element.getBoundingClientRect()));
+      return;
+    }
+    playExitGhosts();
+    const nextRects = /* @__PURE__ */ new Map();
+    rowElements.current.forEach((element, id) => {
+      const lastRect = element.getBoundingClientRect();
+      nextRects.set(id, lastRect);
+      const firstRect = previousRects.current.get(id);
+      if (!firstRect) return;
+      const deltaY = firstRect.top - lastRect.top;
+      if (deltaY === 0) return;
+      element.animate([{ transform: `translateY(${deltaY}px)` }, { transform: "none" }], {
+        duration: durationMs,
+        easing: "ease"
+      });
+    });
+    previousRects.current = nextRects;
+    rowCallbacks.current.forEach((_, id) => {
+      if (!rowElements.current.has(id)) rowCallbacks.current.delete(id);
+    });
+  }, [orderedRowIds, durationMs]);
+  return { registerRow, beginExit };
+};
+export {
+  useFlipRows
+};
+//# sourceMappingURL=useFlipRows.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFlipRows.js","sources":["../../../../src/components/UI/DataTable/useFlipRows.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react';\n\nimport { prefersReducedMotion } from './dataTableMotion';\n\nconst FLIP_DURATION_MS = 220;\n\ninterface IPendingRowExit {\n  clone: HTMLElement;\n  rect: DOMRect;\n  cellWidths: Array<number>;\n}\n\n/**\n * Lightweight FLIP animation (Web Animations API, no dependency).\n *\n * `registerRow` returns a stable ref-setter to attach to each animated row,\n * keyed by row id. Rows that change position animate from their previous spot\n * to the new one (First-Last-Invert-Play). Rows that just appeared are shown in\n * place with NO opacity fade (a fade at the top of the list reads as a first-row\n * \"blink\").\n *\n * `beginExit(ids)` supports animated REMOVAL (e.g. collapsing a group): React\n * unmounts rows instantly, which FLIP alone cannot animate: the items would\n * vanish and only then the gap would slide shut. Call it right before the\n * removal commits: it clones the departing rows while they are still in the\n * DOM, and on the next layout pass the clones are overlaid at their exact old\n * position, fading/sliding up while the rows below FLIP into place. The two\n * motions together read as a genuine close animation. Respects\n * `prefers-reduced-motion`.\n */\nexport const useFlipRows = (orderedRowIds: Array<string>, durationMs: number = FLIP_DURATION_MS) => {\n  const rowElements = useRef(new Map<string, HTMLElement>());\n  const previousRects = useRef(new Map<string, DOMRect>());\n  const rowCallbacks = useRef(new Map<string, (element: HTMLElement | null) => void>());\n  const pendingExits = useRef<Array<IPendingRowExit>>([]);\n\n  // Stable per-id callback so React does not detach/attach every row's ref on\n  // each render (which would thrash the element map).\n  const registerRow = (id: string) => {\n    const existing = rowCallbacks.current.get(id);\n    if (existing) return existing;\n\n    const callback = (element: HTMLElement | null) => {\n      if (element) rowElements.current.set(id, element);\n      else rowElements.current.delete(id);\n    };\n    rowCallbacks.current.set(id, callback);\n\n    return callback;\n  };\n\n  // Clone the departing rows BEFORE React unmounts them (call in the same event\n  // that triggers the removal). The clones play on the next layout pass.\n  const beginExit = (ids: Array<string>) => {\n    if (prefersReducedMotion()) return;\n\n    const exits: Array<IPendingRowExit> = [];\n    ids.forEach((id) => {\n      const element = rowElements.current.get(id);\n      if (!element) return;\n\n      exits.push({\n        clone: element.cloneNode(true) as HTMLElement,\n        rect: element.getBoundingClientRect(),\n        cellWidths: Array.from(element.children).map((cell) => cell.getBoundingClientRect().width),\n      });\n    });\n    pendingExits.current = exits;\n  };\n\n  const playExitGhosts = () => {\n    const exits = pendingExits.current;\n    pendingExits.current = [];\n\n    exits.forEach(({ clone, rect, cellWidths }) => {\n      // A bare <tr> only renders inside a table; rebuild a minimal fixed-layout\n      // table at the row's exact old viewport position, with the original cell\n      // widths so the ghost is pixel-identical to the row it replaces.\n      const overlay = document.createElement('div');\n      overlay.style.cssText = `position:fixed;top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;overflow:hidden;pointer-events:none;z-index:10;`;\n\n      const ghostTable = document.createElement('table');\n      ghostTable.style.cssText = `width:${rect.width}px;table-layout:fixed;border-collapse:separate;border-spacing:0;`;\n\n      Array.from(clone.children).forEach((cell, index) => {\n        (cell as HTMLElement).style.width = `${cellWidths[index]}px`;\n      });\n\n      const ghostBody = document.createElement('tbody');\n      ghostBody.appendChild(clone);\n      ghostTable.appendChild(ghostBody);\n      overlay.appendChild(ghostTable);\n      document.body.appendChild(overlay);\n\n      const animation = overlay.animate(\n        [\n          { opacity: 1, transform: 'none' },\n          { opacity: 0, transform: `translateY(-${Math.min(rect.height, 24)}px)` },\n        ],\n        { duration: durationMs, easing: 'ease' },\n      );\n      animation.onfinish = () => overlay.remove();\n      animation.oncancel = () => overlay.remove();\n    });\n  };\n\n  useLayoutEffect(() => {\n    if (prefersReducedMotion()) {\n      previousRects.current = new Map();\n      rowElements.current.forEach((element, id) => previousRects.current.set(id, element.getBoundingClientRect()));\n      return;\n    }\n\n    playExitGhosts();\n\n    const nextRects = new Map<string, DOMRect>();\n\n    rowElements.current.forEach((element, id) => {\n      const lastRect = element.getBoundingClientRect();\n      nextRects.set(id, lastRect);\n\n      const firstRect = previousRects.current.get(id);\n      // No recorded previous position → the row just appeared. Show it in place,\n      // no fade (a fade at the top of the list is the first-row blink).\n      if (!firstRect) return;\n\n      const deltaY = firstRect.top - lastRect.top;\n      if (deltaY === 0) return;\n\n      element.animate([{ transform: `translateY(${deltaY}px)` }, { transform: 'none' }], {\n        duration: durationMs,\n        easing: 'ease',\n      });\n    });\n\n    previousRects.current = nextRects;\n\n    // Drop callbacks for rows no longer visible so the map can't grow unbounded.\n    rowCallbacks.current.forEach((_, id) => {\n      if (!rowElements.current.has(id)) rowCallbacks.current.delete(id);\n    });\n    // orderedRowIds is the join of ids in order. Re-run whenever it changes.\n  }, [orderedRowIds, durationMs]);\n\n  return { registerRow, beginExit };\n};\n"],"names":[],"mappings":"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"}