@atom-learning/components 9.0.0-beta.5 → 10.0.0

package/dist/components/data-table/DataTable.context.js

@@ -4,13 +4,12 @@ import { usePagination } from "./usePagination.js";
 import { useSortByColumn } from "./useSorting.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
-import { v4 } from "@lukeed/uuid";
 import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { useDeepCompareEffectNoCheck } from "use-deep-compare-effect";
 //#region src/components/data-table/DataTable.context.tsx
 var DataTableContext = React$1.createContext(null);
 var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSort, initialState = void 0, disabledRows, enableRowSelection, onRowSelectionChange, children }) => {
-	const tableId = React$1.useRef(v4());
+	const tableId = React$1.useId();
 	const [data, setData] = React$1.useState({
 		results: dataProp ?? [],
 		total: dataProp?.length ?? 0
@@ -23,17 +22,22 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
 		offsetTop: 0,
 		isVisible: true
 	});
-	const { isPaginated, applyPagination, paginationState, setPaginationState } = usePagination(initialState?.pagination);
+	const { isPaginated, applyPagination, removePagination, paginationState, setPaginationState } = usePagination(initialState?.pagination);
 	const [asyncDataState, setAsyncDataState] = React$1.useState(AsyncDataState.NONE);
 	const [globalFilter, setGlobalFilter] = React$1.useState("");
 	const { setIsSortable, isSortable, sorting, setSorting } = useSortByColumn(defaultSort);
+	const asyncRequestIdRef = React$1.useRef(0);
 	const runAsyncData = React$1.useCallback(async (overrideAsyncDataOptions) => {
 		if (!getAsyncData) return;
+		const requestId = ++asyncRequestIdRef.current;
 		try {
 			setAsyncDataState(AsyncDataState.PENDING);
-			setData(await getNewAsyncData(getAsyncData, overrideAsyncDataOptions, paginationState, sorting, globalFilter));
+			const newData = await getNewAsyncData(getAsyncData, overrideAsyncDataOptions, paginationState, sorting, globalFilter);
+			if (requestId !== asyncRequestIdRef.current) return;
+			setData(newData);
 			setAsyncDataState(AsyncDataState.FULFILLED);
 		} catch (_error) {
+			if (requestId !== asyncRequestIdRef.current) return;
 			setAsyncDataState(AsyncDataState.REJECTED);
 		}
 	}, [
@@ -53,7 +57,7 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
 			total: dataProp.length
 		});
 	}, [dataProp]);
-	const getTotalRows = () => data.total;
+	const getTotalRows = React$1.useCallback(() => data.total, [data.total]);
 	const table = useReactTable({
 		columns,
 		data: data.results,
@@ -97,42 +101,55 @@ var DataTableProvider = ({ columns, data: dataProp = [], getAsyncData, defaultSo
 			}
 		}
 	});
-	const value = React$1.useMemo(() => {
-		return {
-			...table,
+	return /* @__PURE__ */ jsx(DataTableContext, {
+		value: React$1.useMemo(() => {
+			return {
+				...table,
+				columns,
+				data,
+				setData,
+				setIsSortable,
+				applyPagination,
+				removePagination,
+				getTotalRows,
+				isSortable,
+				asyncDataState,
+				runAsyncData,
+				hasAsyncData: !!getAsyncData,
+				disabledRows,
+				enableRowSelection,
+				rowSelection,
+				tablePosition,
+				setTablePosition,
+				tableId
+			};
+		}, [
+			table,
 			columns,
 			data,
-			setData,
-			setIsSortable,
 			applyPagination,
+			removePagination,
 			getTotalRows,
 			isSortable,
 			asyncDataState,
 			runAsyncData,
-			hasAsyncData: !!getAsyncData,
+			getAsyncData,
 			disabledRows,
 			enableRowSelection,
 			rowSelection,
 			tablePosition,
-			setTablePosition,
-			tableId: tableId.current
-		};
-	}, [
-		table,
-		applyPagination,
-		getTotalRows,
-		isSortable,
-		enableRowSelection,
-		tableId,
-		getAsyncData
-	]);
-	return /* @__PURE__ */ jsx(DataTableContext.Provider, {
-		value,
+			expanded,
+			sorting,
+			globalFilter,
+			paginationState,
+			isPaginated,
+			tableId
+		]),
 		children
 	});
 };
 var useDataTable = () => {
-	const context = React$1.useContext(DataTableContext);
+	const context = React$1.use(DataTableContext);
 	if (!context) throw new Error("useDataTable can only be called from inside a DataTableProvider");
 	return context;
 };

package/dist/components/data-table/DataTable.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.context.js","names":[],"sources":["../../../src/components/data-table/DataTable.context.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  Row,\n  RowSelectionState\n} from '@tanstack/react-table'\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\n// Use the named export, not the default: the CJS build's Node-mode interop\n// (__toESM(mod, 1)) shadows this package's `default` with the whole module\n// object, so a default import resolves to a non-callable object at runtime.\n// NoCheck is equivalent here — the dep (`dataProp`) is always an array, so the\n// default export's dev-only all-primitive guard would never fire.\nimport { useDeepCompareEffectNoCheck as useDeepCompareEffect } from 'use-deep-compare-effect'\n\nimport {\n  AsyncDataState,\n  type DataTableContextType,\n  type InitialState,\n  type TableData,\n  type TablePosition,\n  type AsyncDataOptions,\n  type AsyncDataResult,\n  type DefaultSort,\n  type GetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n  React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n  columns\n  defaultSort?: DefaultSort\n  children: React.ReactNode\n  initialState?: InitialState\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n  | { data: TableData; getAsyncData?: never }\n  | { data?: never; getAsyncData: GetAsyncData }\n)\n\nexport const DataTableProvider = ({\n  columns,\n  data: dataProp = [],\n  getAsyncData,\n  defaultSort,\n  initialState = undefined,\n  disabledRows,\n  enableRowSelection,\n  onRowSelectionChange,\n  children\n}: DataTableProviderProps) => {\n  const tableId = React.useRef(uuid())\n\n  const [data, setData] = React.useState<AsyncDataResult>({\n    results: dataProp ?? [],\n    total: dataProp?.length ?? 0\n  })\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n  const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n  const [tablePosition, setTablePosition] = React.useState<TablePosition>({\n    top: null,\n    bottom: null,\n    offsetTop: 0,\n    isVisible: true\n  })\n\n  const { isPaginated, applyPagination, paginationState, setPaginationState } =\n    usePagination(initialState?.pagination)\n\n  const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n    AsyncDataState.NONE\n  )\n\n  const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n  const { setIsSortable, isSortable, sorting, setSorting } =\n    useSortByColumn(defaultSort)\n\n  const runAsyncData = React.useCallback(\n    async (overrideAsyncDataOptions: Partial<AsyncDataOptions>) => {\n      if (!getAsyncData) return\n\n      try {\n        setAsyncDataState(AsyncDataState.PENDING)\n\n        const newData = await getNewAsyncData(\n          getAsyncData,\n          overrideAsyncDataOptions,\n          paginationState as PaginationState,\n          sorting,\n          globalFilter\n        )\n\n        setData(newData as AsyncDataResult)\n        setAsyncDataState(AsyncDataState.FULFILLED)\n      } catch (_error) {\n        setAsyncDataState(AsyncDataState.REJECTED)\n      }\n    },\n    [\n      getAsyncData,\n      paginationState?.pageIndex,\n      paginationState?.pageSize,\n      sorting,\n      globalFilter\n    ]\n  )\n\n  React.useEffect(() => {\n    runAsyncData({})\n  }, [runAsyncData])\n\n  useDeepCompareEffect(() => {\n    if (!dataProp) return\n\n    setData({ results: dataProp, total: dataProp.length })\n  }, [dataProp])\n\n  const getTotalRows = () => data.total\n\n  const table = useReactTable<unknown>({\n    columns,\n    data: data.results,\n    pageCount:\n      getAsyncData && paginationState\n        ? Math.ceil(getTotalRows() / paginationState.pageSize)\n        : -1,\n    initialState: initialState,\n    state: {\n      sorting,\n      globalFilter,\n      pagination: paginationState,\n      rowSelection,\n      expanded\n    },\n    manualPagination: getAsyncData && isPaginated,\n    manualSorting: getAsyncData && isPaginated,\n    enableSorting: asyncDataState !== AsyncDataState.PENDING,\n    enableGlobalFilter: !getAsyncData,\n    enableRowSelection,\n    onExpandedChange: setExpanded,\n    getSubRows: (row) => (row as Row<unknown>).subRows,\n    onRowSelectionChange: (updaterOrValue) => {\n      if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n      setRowSelection(updaterOrValue)\n    },\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n    getSortedRowModel:\n      isSortable || sorting.length ? getSortedRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    onPaginationChange: isPaginated\n      ? (setPaginationState as OnChangeFn<PaginationState>)\n      : undefined,\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    globalFilterFn: (row, columnId, filterValue) => {\n      const checkFilterMatchesCell = (cellValue: string) =>\n        cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n      const isSubRow = row.depth > 0\n\n      if (isSubRow) return true\n\n      const value = row.getValue(columnId)\n      switch (typeof value) {\n        case 'string':\n          return checkFilterMatchesCell(value)\n        case 'boolean':\n        case 'number':\n          return checkFilterMatchesCell(String(value))\n        default:\n          return false\n      }\n    }\n  })\n\n  const value: DataTableContextType = React.useMemo(() => {\n    return {\n      ...table,\n      columns,\n      data,\n      setData,\n      setIsSortable,\n      applyPagination,\n      getTotalRows,\n      isSortable,\n      asyncDataState,\n      runAsyncData,\n      hasAsyncData: !!getAsyncData,\n      disabledRows,\n      enableRowSelection,\n      rowSelection,\n      tablePosition,\n      setTablePosition,\n      tableId: tableId.current\n    }\n  }, [\n    table,\n    applyPagination,\n    getTotalRows,\n    isSortable,\n    enableRowSelection,\n    tableId,\n    getAsyncData\n  ])\n\n  return (\n    <DataTableContext.Provider value={value}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n  const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n  if (!context)\n    throw new Error(\n      'useDataTable can only be called from inside a DataTableProvider'\n    )\n\n  return context\n}\n"],"mappings":"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"}
+{"version":3,"file":"DataTable.context.js","names":[],"sources":["../../../src/components/data-table/DataTable.context.tsx"],"sourcesContent":["import type {\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  Row,\n  RowSelectionState\n} from '@tanstack/react-table'\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\n// Use the named export, not the default: the CJS build's Node-mode interop\n// (__toESM(mod, 1)) shadows this package's `default` with the whole module\n// object, so a default import resolves to a non-callable object at runtime.\n// NoCheck is equivalent here — the dep (`dataProp`) is always an array, so the\n// default export's dev-only all-primitive guard would never fire.\nimport { useDeepCompareEffectNoCheck as useDeepCompareEffect } from 'use-deep-compare-effect'\n\nimport {\n  AsyncDataState,\n  type DataTableContextType,\n  type InitialState,\n  type TableData,\n  type TablePosition,\n  type AsyncDataOptions,\n  type AsyncDataResult,\n  type DefaultSort,\n  type GetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n  React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n  columns\n  defaultSort?: DefaultSort\n  children: React.ReactNode\n  initialState?: InitialState\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n  | { data: TableData; getAsyncData?: never }\n  | { data?: never; getAsyncData: GetAsyncData }\n)\n\nexport const DataTableProvider = ({\n  columns,\n  data: dataProp = [],\n  getAsyncData,\n  defaultSort,\n  initialState = undefined,\n  disabledRows,\n  enableRowSelection,\n  onRowSelectionChange,\n  children\n}: DataTableProviderProps) => {\n  // Rendered into checkbox id/htmlFor/name attributes, so it must be\n  // identical between server and client render — useId guarantees this.\n  const tableId = React.useId()\n\n  const [data, setData] = React.useState<AsyncDataResult>({\n    results: dataProp ?? [],\n    total: dataProp?.length ?? 0\n  })\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n  const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n  const [tablePosition, setTablePosition] = React.useState<TablePosition>({\n    top: null,\n    bottom: null,\n    offsetTop: 0,\n    isVisible: true\n  })\n\n  const {\n    isPaginated,\n    applyPagination,\n    removePagination,\n    paginationState,\n    setPaginationState\n  } = usePagination(initialState?.pagination)\n\n  const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n    AsyncDataState.NONE\n  )\n\n  const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n  const { setIsSortable, isSortable, sorting, setSorting } =\n    useSortByColumn(defaultSort)\n\n  // Monotonic sequence so only the latest in-flight request may commit its\n  // response — without this, rapid pagination/sort/filter changes race two\n  // requests and the slower, stale response wins `setData`.\n  const asyncRequestIdRef = React.useRef(0)\n\n  const runAsyncData = React.useCallback(\n    async (overrideAsyncDataOptions: Partial<AsyncDataOptions>) => {\n      if (!getAsyncData) return\n\n      const requestId = ++asyncRequestIdRef.current\n\n      try {\n        setAsyncDataState(AsyncDataState.PENDING)\n\n        const newData = await getNewAsyncData(\n          getAsyncData,\n          overrideAsyncDataOptions,\n          paginationState as PaginationState,\n          sorting,\n          globalFilter\n        )\n\n        if (requestId !== asyncRequestIdRef.current) return\n\n        setData(newData as AsyncDataResult)\n        setAsyncDataState(AsyncDataState.FULFILLED)\n      } catch (_error) {\n        if (requestId !== asyncRequestIdRef.current) return\n\n        setAsyncDataState(AsyncDataState.REJECTED)\n      }\n    },\n    [\n      getAsyncData,\n      paginationState?.pageIndex,\n      paginationState?.pageSize,\n      sorting,\n      globalFilter\n    ]\n  )\n\n  React.useEffect(() => {\n    runAsyncData({})\n  }, [runAsyncData])\n\n  useDeepCompareEffect(() => {\n    if (!dataProp) return\n\n    setData({ results: dataProp, total: dataProp.length })\n  }, [dataProp])\n\n  const getTotalRows = React.useCallback(() => data.total, [data.total])\n\n  const table = useReactTable<unknown>({\n    columns,\n    data: data.results,\n    pageCount:\n      getAsyncData && paginationState\n        ? Math.ceil(getTotalRows() / paginationState.pageSize)\n        : -1,\n    initialState: initialState,\n    state: {\n      sorting,\n      globalFilter,\n      pagination: paginationState,\n      rowSelection,\n      expanded\n    },\n    manualPagination: getAsyncData && isPaginated,\n    manualSorting: getAsyncData && isPaginated,\n    enableSorting: asyncDataState !== AsyncDataState.PENDING,\n    enableGlobalFilter: !getAsyncData,\n    enableRowSelection,\n    onExpandedChange: setExpanded,\n    getSubRows: (row) => (row as Row<unknown>).subRows,\n    onRowSelectionChange: (updaterOrValue) => {\n      if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n      setRowSelection(updaterOrValue)\n    },\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n    getSortedRowModel:\n      isSortable || sorting.length ? getSortedRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    onPaginationChange: isPaginated\n      ? (setPaginationState as OnChangeFn<PaginationState>)\n      : undefined,\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    globalFilterFn: (row, columnId, filterValue) => {\n      const checkFilterMatchesCell = (cellValue: string) =>\n        cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n      const isSubRow = row.depth > 0\n\n      if (isSubRow) return true\n\n      const value = row.getValue(columnId)\n      switch (typeof value) {\n        case 'string':\n          return checkFilterMatchesCell(value)\n        case 'boolean':\n        case 'number':\n          return checkFilterMatchesCell(String(value))\n        default:\n          return false\n      }\n    }\n  })\n\n  const value: DataTableContextType = React.useMemo(() => {\n    return {\n      ...table,\n      columns,\n      data,\n      setData,\n      setIsSortable,\n      applyPagination,\n      removePagination,\n      getTotalRows,\n      isSortable,\n      asyncDataState,\n      runAsyncData,\n      hasAsyncData: !!getAsyncData,\n      disabledRows,\n      enableRowSelection,\n      rowSelection,\n      tablePosition,\n      setTablePosition,\n      tableId\n    }\n    // The value object's identity is what notifies consumers, and the spread\n    // `table` instance is stable while its internal state changes — so every\n    // piece of provider state must be a dep here or consumers go stale.\n  }, [\n    table,\n    columns,\n    data,\n    applyPagination,\n    removePagination,\n    getTotalRows,\n    isSortable,\n    asyncDataState,\n    runAsyncData,\n    getAsyncData,\n    disabledRows,\n    enableRowSelection,\n    rowSelection,\n    tablePosition,\n    expanded,\n    sorting,\n    globalFilter,\n    paginationState,\n    isPaginated,\n    tableId\n  ])\n\n  return <DataTableContext value={value}>{children}</DataTableContext>\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n  const context = React.use(DataTableContext) as DataTableContextType<T>\n\n  if (!context)\n    throw new Error(\n      'useDataTable can only be called from inside a DataTableProvider'\n    )\n\n  return context\n}\n"],"mappings":"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"}

package/dist/components/data-table/DataTable.types.d.ts

@@ -27,6 +27,7 @@ export type TablePosition = {
 export type DataTableContextType<T = unknown> = Table<T> & {
     setIsSortable: React.Dispatch<React.SetStateAction<boolean>>;
     applyPagination: () => void;
+    removePagination: () => void;
     getTotalRows: () => number;
     isSortable: boolean;
     asyncDataState?: AsyncDataState;

package/dist/components/data-table/DataTable.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  InitialTableState,\n  Row,\n  RowSelectionState,\n  SortDirection,\n  Table\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type AsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type AsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type GetAsyncData = (\n  options: AsyncDataOptions\n) => Promise<AsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<AsyncDataOptions>) => Promise<void>\n  hasAsyncData: boolean\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: AsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<AsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\n// Use tanstack's purpose-built initial-state type rather than composing from\n// the full `*TableState` interfaces: a shallow `Partial<… & PaginationTableState>`\n// leaves `pagination` typed as the full `PaginationState` (requiring `pageIndex`),\n// whereas `InitialTableState` correctly types it as `Partial<PaginationState>` so\n// consumers can pass e.g. `{ pagination: { pageSize } }`.\nexport type InitialState = InitialTableState\n\nexport type DefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";;AASA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,UAAA;CACA,eAAA,aAAA;CACA,eAAA,eAAA;CACA,eAAA,cAAA;;AACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  InitialTableState,\n  Row,\n  RowSelectionState,\n  SortDirection,\n  Table\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type AsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type AsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type GetAsyncData = (\n  options: AsyncDataOptions\n) => Promise<AsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  removePagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<AsyncDataOptions>) => Promise<void>\n  hasAsyncData: boolean\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: AsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<AsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\n// Use tanstack's purpose-built initial-state type rather than composing from\n// the full `*TableState` interfaces: a shallow `Partial<… & PaginationTableState>`\n// leaves `pagination` typed as the full `PaginationState` (requiring `pageIndex`),\n// whereas `InitialTableState` correctly types it as `Partial<PaginationState>` so\n// consumers can pass e.g. `{ pagination: { pageSize } }`.\nexport type InitialState = InitialTableState\n\nexport type DefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";;AASA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,UAAA;CACA,eAAA,aAAA;CACA,eAAA,eAAA;CACA,eAAA,cAAA;;AACF,EAAA,CAAA,CAAA"}

package/dist/components/data-table/DataTableBulkActionsFloating.js

@@ -5,7 +5,7 @@ import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { Badge } from "../badge/Badge.js";
 import { useDataTable } from "./DataTable.context.js";
 import { BulkActionsSelectedRowActions } from "./DataTableBulkActionsSelectedRowActions.js";
-import * as React$1 from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@atom-learning/icons";
 //#region src/components/data-table/DataTableBulkActionsFloating.tsx
@@ -39,14 +39,10 @@ var StyledContainer = styled("div", { base: [
 ] });
 var DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(({ children, ...rest }) => {
 	const { rowSelection, toggleAllPageRowsSelected } = useDataTable();
-	const actionBarRef = React$1.useRef(null);
-	const numberOfSelectedRows = React$1.useMemo(() => {
-		return Object.keys(rowSelection || {}).length;
-	}, [rowSelection]);
+	const numberOfSelectedRows = Object.keys(rowSelection || {}).length;
 	const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false);
 	if (numberOfSelectedRows === 0) return null;
 	return /* @__PURE__ */ jsx("section", {
-		ref: actionBarRef,
 		className: "pointer-events-none sticky bottom-0 left-0 flex justify-center",
 		children: /* @__PURE__ */ jsxs(StyledContainer, {
 			...rest,

package/dist/components/data-table/DataTableBulkActionsFloating.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActionsFloating.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'pl-3',\n    'pr-1',\n    'py-2',\n    'mb-4',\n    'mt-2',\n    'justify-between',\n    'items-center',\n    'rounded-lg',\n    'bg-primary-800',\n    'pointer-events-auto',\n    'z-2',\n    'w-full',\n    'mx-4',\n    'shadow-lg',\n    'sm:max-w-200',\n    'lg:max-w-250',\n    'lg:mb-8',\n    'lg:pl-4',\n    'lg:pr-1',\n    'lg:py-3',\n    'xl:max-w-350',\n    'xl:mb-8',\n    'xl:pl-6',\n    'xl:pr-2',\n    'xl:py-4'\n  ]\n})\n\nexport const DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(\n  ({\n    children,\n    ...rest\n  }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n    const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n    const actionBarRef = React.useRef<HTMLDivElement>(null)\n\n    const numberOfSelectedRows = React.useMemo(() => {\n      return Object.keys(rowSelection || {}).length\n    }, [rowSelection])\n\n    const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n    if (numberOfSelectedRows === 0) return null\n\n    return (\n      <section\n        ref={actionBarRef}\n        className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\"\n      >\n        <StyledContainer {...rest}>\n          <div className=\"flex flex-auto items-center justify-start gap-2\">\n            <Badge\n              theme=\"success\"\n              size=\"xs\"\n              emphasis=\"subtle\"\n              className=\"h-6 min-w-6\"\n            >\n              {numberOfSelectedRows}\n            </Badge>\n            <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n              selected\n            </Text>\n          </div>\n          <div className=\"flex flex-auto items-center justify-end gap-3\">\n            {children}\n            <ActionIcon\n              appearance=\"simple\"\n              theme=\"white\"\n              size=\"md\"\n              onClick={handleDeselectAllPageRows}\n              label=\"close\"\n            >\n              <Icon is={Close} />\n            </ActionIcon>\n          </div>\n        </StyledContainer>\n      </section>\n    )\n  },\n  {\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,+BAA+C,uBAAO,QAChE,EACC,UACA,GAAG,WACwE;CAC3E,MAAM,EAAE,cAAc,8BAA8B,aAAa;CAEjE,MAAM,eAAe,QAAM,OAAuB,IAAI;CAEtD,MAAM,uBAAuB,QAAM,cAAc;EAC/C,OAAO,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,yBAAyB,GAAG,OAAO;CAEvC,OACE,oBAAC,WAAD;EACE,KAAK;EACL,WAAU;YAEV,qBAAC,iBAAD;GAAiB,GAAI;aAArB,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KACE,OAAM;KACN,MAAK;KACL,UAAS;KACT,WAAU;eAET;IACI,CAAA,GACP,oBAAC,MAAD;KAAM,MAAK;KAAK,QAAO;KAAO,WAAU;eAAa;IAE/C,CAAA,CACH;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UACD,oBAAC,YAAD;KACE,YAAW;KACX,OAAM;KACN,MAAK;KACL,SAAS;KACT,OAAM;eAEN,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;IACR,CAAA,CACT;KACU;;CACV,CAAA;AAEb,GACA,EACE,oBAAoB,8BACtB,CACF"}
+{"version":3,"file":"DataTableBulkActionsFloating.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'pl-3',\n    'pr-1',\n    'py-2',\n    'mb-4',\n    'mt-2',\n    'justify-between',\n    'items-center',\n    'rounded-lg',\n    'bg-primary-800',\n    'pointer-events-auto',\n    'z-2',\n    'w-full',\n    'mx-4',\n    'shadow-lg',\n    'sm:max-w-200',\n    'lg:max-w-250',\n    'lg:mb-8',\n    'lg:pl-4',\n    'lg:pr-1',\n    'lg:py-3',\n    'xl:max-w-350',\n    'xl:mb-8',\n    'xl:pl-6',\n    'xl:pr-2',\n    'xl:py-4'\n  ]\n})\n\nexport const DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(\n  ({\n    children,\n    ...rest\n  }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n    const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n    const numberOfSelectedRows = Object.keys(rowSelection || {}).length\n\n    const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n    if (numberOfSelectedRows === 0) return null\n\n    return (\n      <section className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\">\n        <StyledContainer {...rest}>\n          <div className=\"flex flex-auto items-center justify-start gap-2\">\n            <Badge\n              theme=\"success\"\n              size=\"xs\"\n              emphasis=\"subtle\"\n              className=\"h-6 min-w-6\"\n            >\n              {numberOfSelectedRows}\n            </Badge>\n            <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n              selected\n            </Text>\n          </div>\n          <div className=\"flex flex-auto items-center justify-end gap-3\">\n            {children}\n            <ActionIcon\n              appearance=\"simple\"\n              theme=\"white\"\n              size=\"md\"\n              onClick={handleDeselectAllPageRows}\n              label=\"close\"\n            >\n              <Icon is={Close} />\n            </ActionIcon>\n          </div>\n        </StyledContainer>\n      </section>\n    )\n  },\n  {\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,+BAA+C,uBAAO,QAChE,EACC,UACA,GAAG,WACwE;CAC3E,MAAM,EAAE,cAAc,8BAA8B,aAAa;CAEjE,MAAM,uBAAuB,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC;CAE7D,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,yBAAyB,GAAG,OAAO;CAEvC,OACE,oBAAC,WAAD;EAAS,WAAU;YACjB,qBAAC,iBAAD;GAAiB,GAAI;aAArB,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KACE,OAAM;KACN,MAAK;KACL,UAAS;KACT,WAAU;eAET;IACI,CAAA,GACP,oBAAC,MAAD;KAAM,MAAK;KAAK,QAAO;KAAO,WAAU;eAAa;IAE/C,CAAA,CACH;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UACD,oBAAC,YAAD;KACE,YAAW;KACX,OAAM;KACN,MAAK;KACL,SAAS;KACT,OAAM;eAEN,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;IACR,CAAA,CACT;KACU;;CACV,CAAA;AAEb,GACA,EACE,oBAAoB,8BACtB,CACF"}

package/dist/components/data-table/DataTableGlobalFilter.js

@@ -3,26 +3,34 @@ import { Label } from "../label/Label.js";
 import { AsyncDataState } from "./DataTable.types.js";
 import { useDataTable } from "./DataTable.context.js";
 import { SearchInput } from "../search-input/SearchInput.js";
-import "react";
+import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "throttle-debounce";
 //#region src/components/data-table/DataTableGlobalFilter.tsx
 var DataTableGlobalFilter = ({ onChange, label, hideLabel = false, ...rest }) => {
 	const { setGlobalFilter, getState, resetPagination, getTotalRows, asyncDataState } = useDataTable();
 	const { globalFilter } = getState();
-	if (!(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0) return null;
-	const handleChange = debounce(250, (event) => {
-		const { target: { value } } = event;
+	const inputId = React$1.useId();
+	const handleChange = React$1.useMemo(() => debounce(250, (event) => {
 		onChange?.(event);
-		resetPagination();
-		setGlobalFilter(value);
-	});
+		React$1.startTransition(() => {
+			resetPagination();
+			setGlobalFilter(event.target.value);
+		});
+	}), [
+		onChange,
+		resetPagination,
+		setGlobalFilter
+	]);
+	React$1.useEffect(() => () => handleChange.cancel(), [handleChange]);
+	if (!(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Label, {
-		htmlFor: label,
+		htmlFor: inputId,
 		className: cn("mb-3", hideLabel && "sr-only"),
 		children: label
 	}), /* @__PURE__ */ jsx(SearchInput, {
 		...rest,
+		id: inputId,
 		defaultValue: globalFilter,
 		onChange: handleChange,
 		name: label

package/dist/components/data-table/DataTableGlobalFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { cn } from '../../styled'\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...rest\n}: DataTableSearchProps) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const handleChange = debounce(250, (event) => {\n    const {\n      target: { value }\n    } = event\n\n    onChange?.(event)\n    resetPagination()\n    setGlobalFilter(value)\n  })\n\n  return (\n    <>\n      <Label htmlFor={label} className={cn('mb-3', hideLabel && 'sr-only')}>\n        {label}\n      </Label>\n      <SearchInput\n        {...rest}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAa,yBAAyB,EACpC,UACA,OACA,YAAY,OACZ,GAAG,WACuB;CAC1B,MAAM,EACJ,iBACA,UACA,iBACA,cACA,mBACE,aAAa;CACjB,MAAM,EAAE,iBAAiB,SAAS;CAKlC,IAFgB,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM,GAEpC,OAAO;CAEpB,MAAM,eAAe,SAAS,MAAM,UAAU;EAC5C,MAAM,EACJ,QAAQ,EAAE,YACR;EAEJ,WAAW,KAAK;EAChB,gBAAgB;EAChB,gBAAgB,KAAK;CACvB,CAAC;CAED,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAO,SAAS;EAAO,WAAW,GAAG,QAAQ,aAAa,SAAS;YAChE;CACI,CAAA,GACP,oBAAC,aAAD;EACE,GAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;CACP,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"DataTableGlobalFilter.js","names":[],"sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { cn } from '../../styled'\nimport { Label } from '../label/Label'\nimport { SearchInput } from '../search-input/SearchInput'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...rest\n}: DataTableSearchProps) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n  const inputId = React.useId()\n\n  // Memoized so re-renders don't recreate the debouncer and reset its timer\n  // mid-typing. Filtering happens in a transition: re-filtering large row sets\n  // must not block keystroke rendering.\n  const handleChange = React.useMemo(\n    () =>\n      debounce(250, (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event)\n        React.startTransition(() => {\n          resetPagination()\n          setGlobalFilter(event.target.value)\n        })\n      }),\n    [onChange, resetPagination, setGlobalFilter]\n  )\n\n  React.useEffect(() => () => handleChange.cancel(), [handleChange])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <Label htmlFor={inputId} className={cn('mb-3', hideLabel && 'sr-only')}>\n        {label}\n      </Label>\n      <SearchInput\n        {...rest}\n        id={inputId}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAa,yBAAyB,EACpC,UACA,OACA,YAAY,OACZ,GAAG,WACuB;CAC1B,MAAM,EACJ,iBACA,UACA,iBACA,cACA,mBACE,aAAa;CACjB,MAAM,EAAE,iBAAiB,SAAS;CAClC,MAAM,UAAU,QAAM,MAAM;CAK5B,MAAM,eAAe,QAAM,cAEvB,SAAS,MAAM,UAA+C;EAC5D,WAAW,KAAK;EAChB,QAAM,sBAAsB;GAC1B,gBAAgB;GAChB,gBAAgB,MAAM,OAAO,KAAK;EACpC,CAAC;CACH,CAAC,GACH;EAAC;EAAU;EAAiB;CAAe,CAC7C;CAEA,QAAM,sBAAsB,aAAa,OAAO,GAAG,CAAC,YAAY,CAAC;CAKjE,IAFgB,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM,GAEpC,OAAO;CAEpB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAO,SAAS;EAAS,WAAW,GAAG,QAAQ,aAAa,SAAS;YAClE;CACI,CAAA,GACP,oBAAC,aAAD;EACE,GAAI;EACJ,IAAI;EACJ,cAAc;EACd,UAAU;EACV,MAAM;CACP,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/components/data-table/DataTableHead.js

@@ -7,23 +7,14 @@ import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableHead.tsx
 var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stickyOffset = 0, showTotalInFirstColumn, totalSuffix, style, className, ...rest }) => {
-	const { getHeaderGroups, setIsSortable, enableRowSelection, getCanSomeRowsExpand, tablePosition, setTablePosition } = useDataTable();
+	const { getHeaderGroups, setIsSortable, enableRowSelection, getCanSomeRowsExpand, tablePosition } = useDataTable();
 	React$1.useEffect(() => {
 		setIsSortable(sortable);
 	}, [sortable, setIsSortable]);
 	const tableHeaderRowRef = React$1.useRef(null);
 	const tableRef = React$1.useRef(null);
-	const headerOffsetRef = React$1.useRef(0);
 	const [headerOffset, setHeaderOffset] = React$1.useState(0);
 	const [headerHide, setHeaderHide] = React$1.useState(false);
-	const tableHeadElement = tableHeaderRowRef?.current?.closest("thead");
-	if (tableHeadElement && tablePosition?.offsetTop === null) {
-		const intersectionOffset = stickyOffset + tableHeadElement.getBoundingClientRect().height;
-		if (tablePosition) setTablePosition({
-			...tablePosition,
-			offsetTop: intersectionOffset || 0
-		});
-	}
 	React$1.useEffect(() => {
 		if (!isSticky) return;
 		if (!tableRef.current && tableHeaderRowRef.current) tableRef.current = tableHeaderRowRef.current.closest("table");
@@ -31,11 +22,11 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 			if (tablePosition?.top !== null && tablePosition?.bottom !== null) {
 				const newOffset = tablePosition?.top != null && tablePosition?.bottom != null && tablePosition.top < stickyOffset && tablePosition.bottom > 100 ? -tablePosition.top + stickyOffset : 0;
 				if (newOffset !== 0) setHeaderHide(true);
-				headerOffsetRef.current = newOffset;
 				setHeaderOffset(newOffset);
-				requestAnimationFrame(() => {
+				const rafId = requestAnimationFrame(() => {
 					setHeaderHide(false);
 				});
+				return () => cancelAnimationFrame(rafId);
 			}
 		}
 	}, [
@@ -51,9 +42,9 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 		},
 		...rest,
 		className: cn("relative", "z-3", "[&_tr:not(:last-child)>th]:border-b-none", "[&_tr:not(:first-child)>th]:rounded-none!", className),
-		children: getHeaderGroups().map((headerGroup) => {
+		children: getHeaderGroups().map((headerGroup, headerGroupIndex) => {
 			return /* @__PURE__ */ jsxs(Table.Row, {
-				ref: tableHeaderRowRef,
+				ref: headerGroupIndex === 0 ? tableHeaderRowRef : void 0,
 				className: isSticky && headerOffset !== 0 ? cn("translate-y-(--header-offset)", headerHide ? "delay-0ms opacity-0 transition-none" : "delay-150ms opacity-100 transition-opacity duration-100", "[&_th]:last:before:absolute", "[&_th]:last:before:bottom-0", "[&_th]:last:before:pointer-events-none", "[&_th]:last:before:right-0", "[&_th]:last:before:shadow-sm", "[&_th]:last:before:top-0", "[&_th]:last:before:w-full") : void 0,
 				children: [
 					getCanSomeRowsExpand() && /* @__PURE__ */ jsx(Table.HeaderCell, { className: "w-10" }),

package/dist/components/data-table/DataTableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...rest\n}: DataTableHeadProps): React.ReactElement<unknown> => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...rest}\n      className={cn(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky && headerOffset !== 0\n                ? cn(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"mappings":";;;;;;;;AAmBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,QAAQ,SACR,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,WACkD;CACrD,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,eACA,qBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,cAAc,QAAQ;CACxB,GAAG,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,oBAAoB,QAAM,OAA4B,IAAI;CAChE,MAAM,WAAW,QAAM,OAAgC,IAAI;CAC3D,MAAM,kBAAkB,QAAM,OAAO,CAAC;CAEtC,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,KAAK;CAEjE,MAAM,mBAAmB,mBAAmB,SAAS,QAAQ,OAAO;CAEpE,IAAI,oBAAoB,eAAe,cAAc,MAAM;EAEzD,MAAM,qBAAqB,eADH,iBAAiB,sBAAsB,CAAC,CAAC;EAEjE,IAAI,eACF,iBAAiB;GAAE,GAAG;GAAe,WAAW,sBAAsB;EAAE,CAAC;CAE7E;CAEA,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,IAAI,CAAC,SAAS,WAAW,kBAAkB,SACzC,SAAS,UAAU,kBAAkB,QAAQ,QAC3C,OACF;EAGF,IAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;IAEN,IAAI,cAAc,GAAG,cAAc,IAAI;IAEvC,gBAAgB,UAAU;IAC1B,gBAAgB,SAAS;IAEzB,4BAA4B;KAC1B,cAAc,KAAK;IACrB,CAAC;GACH;;CAEJ,GAAG;EAAC;EAAU;EAAc;CAAa,CAAC;CAE1C,OACE,oBAAC,MAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;EACrC;EACA,GAAI;EACJ,WAAW,GACT,YACA,OACA,4CACA,6CACA,SACF;YAEC,gBAAgB,CAAC,CAAC,KAAK,gBAAgB;GACtC,OACE,qBAAC,MAAM,KAAP;IAEE,KAAK;IACL,WACE,YAAY,iBAAiB,IACzB,GACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,2BACF,IACA,KAAA;cAlBR;KAqBG,qBAAqB,KAAK,oBAAC,MAAM,YAAP,EAAkB,WAAU,OAAQ,CAAA;KAC9D,sBACC,oBAAC,MAAM,YAAP;MAAkB,WAAU;gBAC1B,oBAAC,gCAAD,CAAiC,CAAA;KACjB,CAAA;KAEnB,YAAY,QAAQ,KAAK,QAAQ,UAChC,oBAAC,qBAAD;MACU;MAER,cAAc,UAAU,KAAK;MAChB;KACd,GAHM,OAAO,EAGb,CACF;IACQ;MAlCJ,YAAY,EAkCR;EAEf,CAAC;CACW,CAAA;AAElB"}
+{"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...rest\n}: DataTableHeadProps): React.ReactElement<unknown> => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        setHeaderOffset(newOffset)\n\n        const rafId = requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n\n        return () => cancelAnimationFrame(rafId)\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...rest}\n      className={cn(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup, headerGroupIndex) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            // Single ref slot: only the first header row may carry it, or\n            // each successive header group would silently clobber it.\n            ref={headerGroupIndex === 0 ? tableHeaderRowRef : undefined}\n            className={\n              isSticky && headerOffset !== 0\n                ? cn(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"mappings":";;;;;;;;AAmBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,QAAQ,SACR,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,WACkD;CACrD,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,kBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,cAAc,QAAQ;CACxB,GAAG,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,oBAAoB,QAAM,OAA4B,IAAI;CAChE,MAAM,WAAW,QAAM,OAAgC,IAAI;CAE3D,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,KAAK;CAEjE,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,IAAI,CAAC,SAAS,WAAW,kBAAkB,SACzC,SAAS,UAAU,kBAAkB,QAAQ,QAC3C,OACF;EAGF,IAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;IAEN,IAAI,cAAc,GAAG,cAAc,IAAI;IAEvC,gBAAgB,SAAS;IAEzB,MAAM,QAAQ,4BAA4B;KACxC,cAAc,KAAK;IACrB,CAAC;IAED,aAAa,qBAAqB,KAAK;GACzC;;CAEJ,GAAG;EAAC;EAAU;EAAc;CAAa,CAAC;CAE1C,OACE,oBAAC,MAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;EACrC;EACA,GAAI;EACJ,WAAW,GACT,YACA,OACA,4CACA,6CACA,SACF;YAEC,gBAAgB,CAAC,CAAC,KAAK,aAAa,qBAAqB;GACxD,OACE,qBAAC,MAAM,KAAP;IAIE,KAAK,qBAAqB,IAAI,oBAAoB,KAAA;IAClD,WACE,YAAY,iBAAiB,IACzB,GACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,2BACF,IACA,KAAA;cApBR;KAuBG,qBAAqB,KAAK,oBAAC,MAAM,YAAP,EAAkB,WAAU,OAAQ,CAAA;KAC9D,sBACC,oBAAC,MAAM,YAAP;MAAkB,WAAU;gBAC1B,oBAAC,gCAAD,CAAiC,CAAA;KACjB,CAAA;KAEnB,YAAY,QAAQ,KAAK,QAAQ,UAChC,oBAAC,qBAAD;MACU;MAER,cAAc,UAAU,KAAK;MAChB;KACd,GAHM,OAAO,EAGb,CACF;IACQ;MApCJ,YAAY,EAoCR;EAEf,CAAC;CACW,CAAA;AAElB"}

package/dist/components/data-table/DataTableRowSelectionCheckbox.js

@@ -14,6 +14,7 @@ var DataTableRowSelectionCheckbox = ({ row, checked, onCheckedChange, label = `R
 		style: { "--depth": row.depth },
 		checked,
 		onCheckedChange,
+		id: `${tableId}_row_${row.id}_selection`,
 		name: `${tableId}_row_${row.id}_selection`,
 		disabled: !row.getCanSelect(),
 		className: "mr-3 ml-[calc((var(--depth,0)*2)*4px)]"

package/dist/components/data-table/DataTableRowSelectionCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement<unknown> => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n        className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAMW;CACjC,MAAM,EAAE,YAAY,aAAa;CAEjC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;YAC7D;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,MAAM;EACrB;EACQ;EACjB,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,aAAa;EAC5B,WAAU;CACX,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement<unknown> => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        id={`${tableId}_row_${row.id}_selection`}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n        className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAMW;CACjC,MAAM,EAAE,YAAY,aAAa;CAEjC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;YAC7D;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,MAAM;EACrB;EACQ;EACjB,IAAI,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC7B,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,aAAa;EAC5B,WAAU;CACX,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/components/data-table/DataTableSelectAllRowsCheckbox.js

@@ -22,7 +22,8 @@ var DataTableSelectAllRowsCheckbox = ({ label = "All rows selection" }) => {
 		size: "lg",
 		checked: getCheckedState(),
 		onCheckedChange: updateCheckedState,
-		name: `${tableId}_allRowsSelection`
+		id: `${tableId}_all_rows_selection`,
+		name: `${tableId}_all_rows_selection`
 	})] });
 };
 //#endregion

package/dist/components/data-table/DataTableSelectAllRowsCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,aAAa;CAEjB,MAAM,wBAAwB;EAC5B,IAAI,0BAA0B,GAAG,OAAO;EACxC,IAAI,yBAAyB,GAAG,OAAO;EACvC,OAAO;CACT;CAEA,MAAM,2BAA2B;EAC/B,IAAI,0BAA0B,GAC5B,OAAO,0BAA0B,KAAK;EAExC,OAAO,0BAA0B,CAAC,yBAAyB,CAAC;CAC9D;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;YACxD;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,gBAAgB;EACzB,iBAAiB;EACjB,MAAM,GAAG,QAAQ;CAClB,CAAA,CACD,EAAA,CAAA;AAEN"}
+{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTable.context'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        id={`${tableId}_all_rows_selection`}\n        name={`${tableId}_all_rows_selection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,aAAa;CAEjB,MAAM,wBAAwB;EAC5B,IAAI,0BAA0B,GAAG,OAAO;EACxC,IAAI,yBAAyB,GAAG,OAAO;EACvC,OAAO;CACT;CAEA,MAAM,2BAA2B;EAC/B,IAAI,0BAA0B,GAC5B,OAAO,0BAA0B,KAAK;EAExC,OAAO,0BAA0B,CAAC,yBAAyB,CAAC;CAC9D;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;YACxD;CACI,CAAA,GACP,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,gBAAgB;EACzB,iBAAiB;EACjB,IAAI,GAAG,QAAQ;EACf,MAAM,GAAG,QAAQ;CAClB,CAAA,CACD,EAAA,CAAA;AAEN"}

package/dist/components/data-table/DataTableTable.js

@@ -24,10 +24,8 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 	const tableRef = React$1.useRef(null);
 	const isTableVisible = React$1.useRef(false);
 	const isScrolling = React$1.useRef(false);
-	const scrollTarget = React$1.useMemo(() => {
-		if (typeof window === "undefined") return null;
-		return window;
-	}, []);
+	const scrollRafIdRef = React$1.useRef(null);
+	const scrollTarget = typeof window === "undefined" ? null : window;
 	React$1.useEffect(() => {
 		if (!scrollTarget || typeof IntersectionObserver === "undefined") return;
 		const updatePosition = () => {
@@ -44,7 +42,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		};
 		const handleScroll = () => {
 			if (!isScrolling.current) {
-				requestAnimationFrame(updatePosition);
+				scrollRafIdRef.current = requestAnimationFrame(updatePosition);
 				isScrolling.current = true;
 			}
 		};
@@ -69,13 +67,17 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		if (tableRef.current && (scrollOptions.hasStickyHeader || Object.keys(rowSelection || {}).length > 0)) tableObserver.observe(tableRef.current);
 		return () => {
 			tableObserver.disconnect();
+			if (scrollRafIdRef.current !== null) {
+				cancelAnimationFrame(scrollRafIdRef.current);
+				scrollRafIdRef.current = null;
+			}
+			isScrolling.current = false;
 			if (scrollTarget) scrollTarget?.removeEventListener("scroll", handleScroll);
 		};
 	}, [
 		rowSelection,
 		scrollOptions.hasStickyHeader,
 		scrollOptions?.stickyHeaderOffset,
-		scrollTarget,
 		setTablePosition
 	]);
 	const isPending = asyncDataState === AsyncDataState.PENDING;

package/dist/components/data-table/DataTableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...rest\n}: DataTableTableProps): React.JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...rest}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CAAC;CAAO;CAAY;AAAY,EACxC,CAAC;AAuBD,IAAa,kBAAkB,EAC7B,UACA,SACA,QAAQ,SACR,WACA,gBAAgB;CACd,uBAAuB;CACvB,oBAAoB;CACpB,iBAAiB;CACjB,wBAAwB;CACxB,aAAa;AACf,GACA,WACA,gBAAgB,OAChB,GAAG,WACgD;CACnD,MAAM,EACJ,gBACA,cACA,sBACA,cACA,oBACA,SACA,qBACE,aAAa;CAEjB,MAAM,WAAW,QAAM,OAAgC,IAAI;CAC3D,MAAM,iBAAiB,QAAM,OAAO,KAAK;CACzC,MAAM,cAAc,QAAM,OAAgB,KAAK;CAE/C,MAAM,eAAe,QAAM,cAAc;EACvC,IAAI,OAAO,WAAW,aAAa,OAAO;EAC1C,OAAO;CACT,GAAG,CAAC,CAAC;CAEL,QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,OAAO,yBAAyB,aACnD;EAGF,MAAM,uBAAuB;GAC3B,IAAI,SAAS,SAAS;IACpB,MAAM,WAAW,SAAS,QAAQ,sBAAsB,CAAC,CAAC;IAC1D,MAAM,cAAc,SAAS,QAAQ,sBAAsB,CAAC,CAAC;IAE7D,kBAAkB,kBAAkB;KAClC,GAAG;KACH,KAAK;KACL,QAAQ;IACV,EAAE;GACJ;GACA,YAAY,UAAU;EACxB;EAEA,MAAM,qBAAqB;GACzB,IAAI,CAAC,YAAY,SAAS;IACxB,sBAAsB,cAAc;IACpC,YAAY,UAAU;GACxB;EACF;EAEA,IAAI,CAAC,SAAS,SAAS;EAEvB,MAAM,iBAAiB,eAAe,sBAAsB;EAE5D,MAAM,kBAAkB;GACtB,YAAY,IAAI,eAAe,UAAU,eAAe;GACxD,WAAW;EACb;EAEA,MAAM,2BAA2B,YAAyC;GACxE,IAAI,CAAC,WAAW,QAAQ,WAAW,GAAG;GACtC,MAAM,QAAQ,QAAQ;GAEtB,eAAe,UAAU,MAAM;GAE/B,IAAI,cACF,IAAI,MAAM,gBAER,cAAc,iBAAiB,UAAU,YAAY;QAGrD,cAAc,oBAAoB,UAAU,YAAY;GAI5D,kBAAkB,kBAAkB;IAClC,GAAG;IACH,WAAW,MAAM;GACnB,EAAE;EACJ;EAEA,MAAM,gBAAgB,IAAI,qBACxB,yBACA,eACF;EAGA,IACE,SAAS,YACR,cAAc,mBACb,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,IAE3C,cAAc,QAAQ,SAAS,OAAO;EAGxC,aAAa;GACX,cAAc,WAAW;GACzB,IAAI,cACF,cAAc,oBAAoB,UAAU,YAAY;EAE5D;CACF,GAAG;EACD;EACA,cAAc;EACd,eAAe;EACf;EACA;CACF,CAAC;CAED,MAAM,YAAY,mBAAmB,eAAe;CACpD,MAAM,UAAU,CAAC,aAAa,aAAa,MAAM;CAEjD,MAAM,gCAAwC;EAC5C,IAAI,qBAAqB;EAEzB,IAAI,qBAAqB,KAAK,CAAC,CAAC,oBAC9B,qBAAqB;OAChB,IAAI,qBAAqB,KAAK,CAAC,CAAC,oBACrC,qBAAqB;EAGvB,OAAO,GAAG,QAAQ,GAAG,mBAAmB;CAC1C;CAEA,IAAI,SAAS,OAAO;CAEpB,MAAM,iBACJ,qBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,GAAI;EACJ,KAAK;EACL,uBAAuB,cAAc;EACrC,oBAAoB,cAAc;EAClC,oBAAoB,wBAAwB;EAC5C,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;YAlBF,CAoBE,oBAAC,eAAD;GACS;GACG;GACV,UAAU,cAAc;GACxB,cAAc,cAAc;GAC5B,WAAW,cAAc;GACzB,wBAAwB,cAAc;GACtC,aAAa,cAAc;EAC5B,CAAA,GACD,oBAAC,eAAD;GAAwB;GAAoB;EAAY,CAAA,CACnD;;CAGT,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,CAAmB,CAAA,GAClB,gBACC,oBAAC,gBAAD;EACE,WAAW,GACT,cAAc,0BAA0B,KAAK,iBAC/C;YAEC;CACa,CAAA,IAEhB,cAEF,EAAA,CAAA;AAEN"}
+{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...rest\n}: DataTableTableProps): React.JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n  const scrollRafIdRef = React.useRef<number | null>(null)\n\n  const scrollTarget = typeof window === 'undefined' ? null : window\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        scrollRafIdRef.current = requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollRafIdRef.current !== null) {\n        cancelAnimationFrame(scrollRafIdRef.current)\n        scrollRafIdRef.current = null\n      }\n      isScrolling.current = false\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...rest}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js

@@ -15,7 +15,7 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 	const isPending = asyncDataState === AsyncDataState.PENDING;
 	const rowIds = React$1.useMemo(() => data.results.map((row) => {
 		return row[idColumn];
-	}), [data]);
+	}), [data, idColumn]);
 	return /* @__PURE__ */ jsxs(SortableRoot, {
 		onSortChange: React$1.useCallback(({ oldIndex, newIndex }) => {
 			const sortedResults = arrayMove(data.results, oldIndex, newIndex);

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '../../../styled'\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState, type AsyncDataResult } from '../DataTable.types'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: AsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  className,\n  ...rest\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as string | number\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...rest}\n        className={cn(\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity',\n            'duration-250',\n            'linear',\n            'delay-150'\n          ],\n          className\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,WACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,aAAa;CACvD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;EACxB,OAAO,IAAI;CACb,CAAC,GACH,CAAC,IAAI,CACP;CAWA,OACE,qBAAC,cAAD;EAAe,cAXQ,QAAM,aAC5B,EAAE,UAAU,eAAe;GAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,QAAQ;GAChE,MAAM,UAAU;IAAE,SAAS;IAAe,OAAO,KAAK;GAAM;GAC5D,QAAQ;IAAE,SAAS;IAAe,OAAO,KAAK;GAAM,CAAC;GACrD,gBAAgB;IAAE;IAAU;IAAU;GAAQ,CAAC;EACjD,GACA,CAAC,MAAM,aAAa,CAIS;EAAkB,aAAa;YAA5D,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,qBAAC,OAAD;GACE,GAAI;GACJ,WAAW,GACT,aAAa;IACX;IACA;IACA;IACA;IACA;IACA;GACF,GACA,SACF;aAZF,CAcE,oBAAC,eAAD;IAAsB;IAAiB;GAAW,CAAA,GAClD,oBAAC,sBAAD;IAA+B;IAAmB;GAAW,CAAA,CACxD;IACM;;AAEnB"}
+{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '../../../styled'\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState, type AsyncDataResult } from '../DataTable.types'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: AsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  className,\n  ...rest\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as string | number\n      }),\n    [data, idColumn]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...rest}\n        className={cn(\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity',\n            'duration-250',\n            'linear',\n            'delay-150'\n          ],\n          className\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,WACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,aAAa;CACvD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;EACxB,OAAO,IAAI;CACb,CAAC,GACH,CAAC,MAAM,QAAQ,CACjB;CAWA,OACE,qBAAC,cAAD;EAAe,cAXQ,QAAM,aAC5B,EAAE,UAAU,eAAe;GAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,QAAQ;GAChE,MAAM,UAAU;IAAE,SAAS;IAAe,OAAO,KAAK;GAAM;GAC5D,QAAQ;IAAE,SAAS;IAAe,OAAO,KAAK;GAAM,CAAC;GACrD,gBAAgB;IAAE;IAAU;IAAU;GAAQ,CAAC;EACjD,GACA,CAAC,MAAM,aAAa,CAIS;EAAkB,aAAa;YAA5D,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,qBAAC,OAAD;GACE,GAAI;GACJ,WAAW,GACT,aAAa;IACX;IACA;IACA;IACA;IACA;IACA;GACF,GACA,SACF;aAZF,CAcE,oBAAC,eAAD;IAAsB;IAAiB;GAAW,CAAA,GAClD,oBAAC,sBAAD;IAA+B;IAAmB;GAAW,CAAA,CACxD;IACM;;AAEnB"}

package/dist/components/data-table/pagination/Pagination.js

@@ -20,10 +20,11 @@ var StyledNav = styled("nav", { base: [
 ] });
 /** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
 var Pagination = ({ colorScheme, ...rest }) => {
-	const { applyPagination, getState, getExpandedRowModel, getRowModel, setPageIndex, getTotalRows, getPageCount, asyncDataState, hasAsyncData } = useDataTable();
+	const { applyPagination, removePagination, getState, getExpandedRowModel, getRowModel, setPageIndex, getTotalRows, getPageCount, asyncDataState, hasAsyncData } = useDataTable();
 	React$1.useEffect(() => {
 		applyPagination();
-	}, [applyPagination]);
+		return () => removePagination();
+	}, [applyPagination, removePagination]);
 	const { pagination: paginationState } = getState();
 	const isEmpty = !(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0;
 	const showPagination = hasAsyncData ? getPageCount() > 1 : getExpandedRowModel().rows.length / paginationState.pageSize > 1;

package/dist/components/data-table/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../../styled'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState } from '../DataTable.types'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...rest }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...rest}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AASA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;;AAOD,IAAa,cAAc,EAAE,aAAa,GAAG,WAA4B;CACvE,MAAM,EACJ,iBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,gBAAgB;CAClB,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,EAAE,YAAY,oBAAoB,SAAS;CAEjD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM;CAEjD,MAAM,iBAAiB,eACnB,aAAa,IAAI,IACjB,oBAAoB,CAAC,CAAC,KAAK,SAAS,gBAAgB,WAAW;CAEnE,IAAI,WAAW,CAAC,gBAAgB,OAAO;CACvC,MAAM,mBAAmB,oBAAoB,CAAC,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,YAAY,CAAC,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,gBAAgB;CAGnE,MAAM,WAAW,UAAkB;EACjC,aAAa,QAAQ,CAAC;CACxB;CAEA,MAAM,YAAY,eACd,aAAa,IACb,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,QAAQ,CAAC;CAEtE,OACE,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,aAAa,IAAI,iBACjC;EAAc,CAAA,GACf,oBAAC,cAAD;GACe;GACb,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;EACvB,CAAA,CACQ;;AAEf;AAEA,WAAW,cAAc"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../../styled'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState } from '../DataTable.types'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...rest }: PaginationProps) => {\n  const {\n    applyPagination,\n    removePagination,\n    getState,\n    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n    return () => removePagination()\n  }, [applyPagination, removePagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...rest}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AASA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;;AAOD,IAAa,cAAc,EAAE,aAAa,GAAG,WAA4B;CACvE,MAAM,EACJ,iBACA,kBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,gBAAgB;EAChB,aAAa,iBAAiB;CAChC,GAAG,CAAC,iBAAiB,gBAAgB,CAAC;CAEtC,MAAM,EAAE,YAAY,oBAAoB,SAAS;CAEjD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM;CAEjD,MAAM,iBAAiB,eACnB,aAAa,IAAI,IACjB,oBAAoB,CAAC,CAAC,KAAK,SAAS,gBAAgB,WAAW;CAEnE,IAAI,WAAW,CAAC,gBAAgB,OAAO;CACvC,MAAM,mBAAmB,oBAAoB,CAAC,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,YAAY,CAAC,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,gBAAgB;CAGnE,MAAM,WAAW,UAAkB;EACjC,aAAa,QAAQ,CAAC;CACxB;CAEA,MAAM,YAAY,eACd,aAAa,IACb,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,QAAQ,CAAC;CAEtE,OACE,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,aAAa,IAAI,iBACjC;EAAc,CAAA,GACf,oBAAC,cAAD;GACe;GACb,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;EACvB,CAAA,CACQ;;AAEf;AAEA,WAAW,cAAc"}

package/dist/components/data-table/usePagination.d.ts

@@ -5,4 +5,5 @@ export declare const usePagination: (initialPaginationState: Partial<PaginationS
     paginationState: PaginationState | undefined;
     setPaginationState: React.Dispatch<React.SetStateAction<PaginationState | undefined>>;
     applyPagination: () => void;
+    removePagination: () => void;
 };