@atom-learning/components 8.0.3 → 8.1.0

package/dist/components/data-table/{DataTableContext.d.ts → DataTable.context.d.ts}

@@ -1,9 +1,9 @@
 import type { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';
 import * as React from 'react';
-import { DataTableContextType, InitialState, TableData, TDefaultSort, TGetAsyncData } from './DataTable.types';
+import { type DataTableContextType, type InitialState, type TableData, type DefaultSort, type GetAsyncData } from './DataTable.types';
 type DataTableProviderProps = {
     columns: any;
-    defaultSort?: TDefaultSort;
+    defaultSort?: DefaultSort;
     children: React.ReactNode;
     initialState?: InitialState;
     disabledRows?: Record<string, boolean>;
@@ -14,7 +14,7 @@ type DataTableProviderProps = {
     getAsyncData?: never;
 } | {
     data?: never;
-    getAsyncData: TGetAsyncData;
+    getAsyncData: GetAsyncData;
 });
 export declare const DataTableProvider: ({ columns, data: dataProp, getAsyncData, defaultSort, initialState, disabledRows, enableRowSelection, onRowSelectionChange, children }: DataTableProviderProps) => React.JSX.Element;
 export declare const useDataTable: <T extends Record<string, unknown>>() => DataTableContextType<T>;

package/dist/components/data-table/{DataTableContext.js → DataTable.context.js}

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 import { v4 } from "@lukeed/uuid";
 import { getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import useDeepCompareEffect from "use-deep-compare-effect";
-//#region src/components/data-table/DataTableContext.tsx
+//#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());
@@ -139,4 +139,4 @@ var useDataTable = () => {
 //#endregion
 export { DataTableProvider, useDataTable };
 
-//# sourceMappingURL=DataTableContext.js.map
+//# sourceMappingURL=DataTable.context.js.map

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

@@ -0,0 +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'\nimport 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":";;;;;;;;;;AAkCA,IAAM,mBACJ,QAAM,cAAoD,IAAI;AAehE,IAAa,qBAAqB,EAChC,SACA,MAAM,WAAW,CAAC,GAClB,cACA,aACA,eAAe,KAAA,GACf,cACA,oBACA,sBACA,eAC4B;CAC5B,MAAM,UAAU,QAAM,OAAO,GAAK,CAAC;CAEnC,MAAM,CAAC,MAAM,WAAW,QAAM,SAA0B;EACtD,SAAS,YAAY,CAAC;EACtB,OAAO,UAAU,UAAU;CAC7B,CAAC;CAED,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAA4B,CAAC,CAAC;CAC5E,MAAM,CAAC,UAAU,eAAe,QAAM,SAAwB,CAAC,CAAC;CAEhE,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAwB;EACtE,KAAK;EACL,QAAQ;EACR,WAAW;EACX,WAAW;CACb,CAAC;CAED,MAAM,EAAE,aAAa,iBAAiB,iBAAiB,uBACrD,cAAc,cAAc,UAAU;CAExC,MAAM,CAAC,gBAAgB,qBAAqB,QAAM,SAChD,eAAe,IACjB;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,EAAE;CAEjE,MAAM,EAAE,eAAe,YAAY,SAAS,eAC1C,gBAAgB,WAAW;CAE7B,MAAM,eAAe,QAAM,YACzB,OAAO,6BAAwD;EAC7D,IAAI,CAAC,cAAc;EAEnB,IAAI;GACF,kBAAkB,eAAe,OAAO;GAUxC,QAAQ,MARc,gBACpB,cACA,0BACA,iBACA,SACA,YACF,CAEkC;GAClC,kBAAkB,eAAe,SAAS;EAC5C,SAAS,QAAQ;GACf,kBAAkB,eAAe,QAAQ;EAC3C;CACF,GACA;EACE;EACA,iBAAiB;EACjB,iBAAiB;EACjB;EACA;CACF,CACF;CAEA,QAAM,gBAAgB;EACpB,aAAa,CAAC,CAAC;CACjB,GAAG,CAAC,YAAY,CAAC;CAEjB,2BAA2B;EACzB,IAAI,CAAC,UAAU;EAEf,QAAQ;GAAE,SAAS;GAAU,OAAO,SAAS;EAAO,CAAC;CACvD,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,qBAAqB,KAAK;CAEhC,MAAM,QAAQ,cAAuB;EACnC;EACA,MAAM,KAAK;EACX,WACE,gBAAgB,kBACZ,KAAK,KAAK,aAAa,IAAI,gBAAgB,QAAQ,IACnD;EACQ;EACd,OAAO;GACL;GACA;GACA,YAAY;GACZ;GACA;EACF;EACA,kBAAkB,gBAAgB;EAClC,eAAe,gBAAgB;EAC/B,eAAe,mBAAmB,eAAe;EACjD,oBAAoB,CAAC;EACrB;EACA,kBAAkB;EAClB,aAAa,QAAS,IAAqB;EAC3C,uBAAuB,mBAAmB;GACxC,IAAI,sBAAsB,qBAAqB,cAAc;GAC7D,gBAAgB,cAAc;EAChC;EACA,iBAAiB,gBAAgB;EACjC,uBAAuB,cAAc,sBAAsB,IAAI,KAAA;EAC/D,mBACE,cAAc,QAAQ,SAAS,kBAAkB,IAAI,KAAA;EACvD,qBAAqB,oBAAoB;EACzC,qBAAqB,oBAAoB;EACzC,oBAAoB,cACf,qBACD,KAAA;EACJ,iBAAiB;EACjB,sBAAsB;EACtB,iBAAiB,KAAK,UAAU,gBAAgB;GAC9C,MAAM,0BAA0B,cAC9B,UAAU,YAAY,CAAC,CAAC,SAAS,YAAY,YAAY,CAAC;GAI5D,IAFiB,IAAI,QAAQ,GAEf,OAAO;GAErB,MAAM,QAAQ,IAAI,SAAS,QAAQ;GACnC,QAAQ,OAAO,OAAf;IACE,KAAK,UACH,OAAO,uBAAuB,KAAK;IACrC,KAAK;IACL,KAAK,UACH,OAAO,uBAAuB,OAAO,KAAK,CAAC;IAC7C,SACE,OAAO;GACX;EACF;CACF,CAAC;CAED,MAAM,QAA8B,QAAM,cAAc;EACtD,OAAO;GACL,GAAG;GACH;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,cAAc,CAAC,CAAC;GAChB;GACA;GACA;GACA;GACA;GACA,SAAS,QAAQ;EACnB;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,iBAAiB,UAAlB;EAAkC;EAC/B;CACwB,CAAA;AAE/B;AAEA,IAAa,qBAAwD;CACnE,MAAM,UAAU,QAAM,WAAW,gBAAgB;CAEjD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,iEACF;CAEF,OAAO;AACT"}

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

@@ -5,7 +5,7 @@
  */
 export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defaultSort, initialState, disabledRows, enableRowSelection, onRowSelectionChange, children }: {
     columns: any;
-    defaultSort?: import("./DataTable.types").TDefaultSort;
+    defaultSort?: import("./DataTable.types").DefaultSort;
     children: React.ReactNode;
     initialState?: import("./DataTable.types").InitialState;
     disabledRows?: Record<string, boolean>;
@@ -16,19 +16,19 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     getAsyncData?: never;
 } | {
     data?: never;
-    getAsyncData: import("./DataTable.types").TGetAsyncData;
-})) => React.JSX.Element) & {
+    getAsyncData: import("./DataTable.types").GetAsyncData;
+})) => import("react").JSX.Element) & {
     /** Default table body implementation for `DataTable`.
      *
      * Can be configured with alternating colours of rows. If you need more customisation options,
      * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.
      */
-    Body: ({ striped, rowAction, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "striped"> & {
+    Body: ({ striped, rowAction, ...rest }: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "striped"> & {
         striped?: boolean | undefined;
     } & {
         as?: import("react").ElementType;
     }, "children"> & {
-        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent<Element, MouseEvent>) => void;
     }) => import("react").JSX.Element;
     /** Default table data cell implementation for `DataTable`
      *
@@ -40,8 +40,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     /**
      * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop
      */
-    DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, className, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "size" | "corners"> & {
-        size?: "md" | "lg" | "xl" | undefined;
+    DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, className, ...rest }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "corners" | "size"> & {
+        size?: "lg" | "md" | "xl" | undefined;
         corners?: "round" | "square" | undefined;
     } & {
         as?: import("react").ElementType;
@@ -50,8 +50,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         scrollContainerCls?: string | string[];
         scrollContainerkey?: string;
         maxRowDepth?: number;
-    }, "ref"> & import("react").RefAttributes<HTMLTableElement>, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "theme" | "isSticky"> & {
-        theme?: "primary" | "white" | "primaryDark" | "light" | "primaryLight" | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLTableElement>, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "isSticky" | "theme"> & {
+        theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
         isSticky?: boolean | undefined;
     } & {
         as?: import("react").ElementType;
@@ -61,7 +61,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         stickyOffset?: number;
         showTotalInFirstColumn?: boolean;
         totalSuffix?: string;
-    }, "theme" | "sortable">> & Partial<Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "striped"> & {
+    }, "sortable" | "theme">> & Partial<Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "striped"> & {
         striped?: boolean | undefined;
     } & {
         as?: import("react").ElementType;
@@ -75,7 +75,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             showTotalInFirstColumn?: boolean;
             totalSuffix?: string;
         };
-        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent<Element, MouseEvent>) => void;
         withContainer?: boolean;
     } & {
         className?: string;
@@ -83,14 +83,14 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         onDragAndDrop?: (onDragAndDropData: {
             oldIndex: number;
             newIndex: number;
-            newData: import("./DataTable.types").TAsyncDataResult;
+            newData: import("./DataTable.types").AsyncDataResult;
         }) => void;
     }) => import("react").JSX.Element;
     /** Default global search implementation for `DataTable`
      *
      * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.
      */
-    GlobalFilter: ({ onChange, label, hideLabel, ...props }: Omit<import("../search-input/SearchInput").SearchInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement> & {
+    GlobalFilter: ({ onChange, label, hideLabel, ...rest }: Omit<import("../search-input/SearchInput").SearchInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement> & {
         label: string;
         hideLabel?: boolean;
     }) => import("react").JSX.Element | null;
@@ -100,8 +100,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation options, you can build your own implementation
      * with `useDataTable` and the UI-only `Table` components.
      */
-    Head: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, className, ...props }: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "theme" | "isSticky"> & {
-        theme?: "primary" | "white" | "primaryDark" | "light" | "primaryLight" | undefined;
+    Head: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, className, ...rest }: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "isSticky" | "theme"> & {
+        theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
         isSticky?: boolean | undefined;
     } & {
         as?: import("react").ElementType;
@@ -117,7 +117,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * Can be configured to make the column sortable. If you need more customisation options,
      * you can build your own implementation with the UI-only `Table` components.
      */
-    HeaderCell: ({ header, includeTotal, totalSuffix, children, className, ...props }: Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never> & {
+    HeaderCell: ({ header, includeTotal, totalSuffix, children, className, ...rest }: Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never> & {
         as?: import("react").ElementType;
     } & {
         header: import("@tanstack/table-core").Header<Record<string, unknown>, unknown>;
@@ -143,7 +143,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      */
     Pagination: {
-        ({ colorScheme, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & {
+        ({ colorScheme, ...rest }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & {
             as?: import("react").ElementType;
         } & {
             colorScheme?: import("../..").TcolorScheme;
@@ -165,7 +165,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * scratch with `useDataTable` and the UI-only `Table` components.
      *
      */
-    Table: ({ sortable, striped, theme, className, scrollOptions, rowAction, withContainer, ...props }: import("./DataTableTable").DataTableTableProps) => React.JSX.Element | null;
+    Table: ({ sortable, striped, theme, className, scrollOptions, rowAction, withContainer, ...rest }: import("./DataTableTable").DataTableTableProps) => React.JSX.Element | null;
     /** Default loading implementation for remote data
      *
      * Renders a loading component while fetching the paginated data using `getAsyncData`.
@@ -175,7 +175,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      */
     Loading: (props: React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
         message?: string;
-        size?: "sm" | "md" | "lg";
+        size?: 'sm' | 'md' | 'lg';
     }, never> & {
         as?: import("react").ElementType;
     }>>) => import("react").JSX.Element | null;
@@ -191,14 +191,14 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      */
     Error: ({ children }: {
-        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => React.ReactElement<unknown>;
+        children: (retry?: import("./DataTable.types").DataTableContextType['runAsyncData']) => React.ReactElement<unknown>;
     }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
     /** Empty state implementation for `DataTable`.
      *
      * Extends the EmptyState component
      */
     EmptyState: ({ children, ...rest }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & {
-        size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
+        size?: ("lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
     } & {
         as?: import("react").ElementType;
     }) => import("react").JSX.Element | null;
@@ -215,7 +215,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      */
     RowSelectionCheckbox: ({ row, checked, onCheckedChange, label }: {
         row: import("@tanstack/table-core").Row<Record<string, unknown>>;
-        checked: boolean | "indeterminate";
+        checked: boolean | 'indeterminate';
         onCheckedChange: (value: boolean) => void;
         label?: string;
     }) => React.ReactElement<unknown>;

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

@@ -1,4 +1,4 @@
-import { DataTableProvider } from "./DataTableContext.js";
+import { DataTableProvider } from "./DataTable.context.js";
 import { DataTableDataCell } from "./DataTableDataCell.js";
 import { DataTableRowSelectionCheckbox } from "./DataTableRowSelectionCheckbox.js";
 import { DataTableRow } from "./DataTableRow.js";
@@ -23,22 +23,110 @@ import { Pagination } from "./pagination/Pagination.js";
 * the functionality we've built on top.
 */
 var DataTable = Object.assign(DataTableProvider, {
+	/** Default table body implementation for `DataTable`.
+	*
+	* Can be configured with alternating colours of rows. If you need more customisation options,
+	* you can build your own implementation with `useDataTable()` and the UI-only `Table` components.
+	*/
 	Body: DataTableBody,
+	/** Default table data cell implementation for `DataTable`
+	*
+	*
+	*/
 	DataCell: DataTableDataCell,
+	/**
+	* Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop
+	*/
 	DragAndDropTable,
+	/** Default global search implementation for `DataTable`
+	*
+	* If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.
+	*/
 	GlobalFilter: DataTableGlobalFilter,
+	/** Default table head implementation
+	*
+	* Can be configured to be sortable and with different visual themes.
+	* If you need more customisation options, you can build your own implementation
+	* with `useDataTable` and the UI-only `Table` components.
+	*/
 	Head: DataTableHead,
+	/** Default header implementation for `DataTable`
+	*
+	* Can be configured to make the column sortable. If you need more customisation options,
+	* you can build your own implementation with the UI-only `Table` components.
+	*/
 	HeaderCell: DataTableHeaderCell,
+	/** Default pagination implementation for `DataTable`
+	*
+	* Can navigate forward, backward, or to any specific page. If you need more customisation options,
+	* you can build your own implementation with `useDataTable` and other UI components.
+	*
+	*/
 	MetaData: DataTableMetaData,
+	/** Default display of amount of items and current sorting status for 'DataTable'
+	*
+	*/
 	Pagination,
+	/** Default row implementation for `DataTable`
+	*
+	* Renders all visible cells as `Table.Cell`. If you need more customisation options,
+	* you can build your own implementation with the UI-only `Table` components.
+	*/
 	Row: DataTableRow,
+	/** Default table implementation for `DataTable`.
+	*
+	* Can be configured with sortable columns and different visual themes.
+	*
+	* If you need more customisation options, you can compose your own implementation with
+	* lower-level `DataTable` components or build the whole thing from
+	* scratch with `useDataTable` and the UI-only `Table` components.
+	*
+	*/
 	Table: DataTableTable,
+	/** Default loading implementation for remote data
+	*
+	* Renders a loading component while fetching the paginated data using `getAsyncData`.
+	*
+	* If you need more customisation, you can compose your own implentation, `asyncDataState`
+	* can be retrieved from `useDataTable`
+	*/
 	Loading: DataTableLoading,
+	/** Default error implementation for remote data
+	*
+	* Renders an error component when `getAsyncData` promise rejects.
+	* Children are rendered as a function, it exposes a `runAsyncData` function to the children component.
+	* `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize
+	* and sorting parameters or your own custom paginated options.
+	*
+	* If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`
+	* can be retrieved from `useDataTable`
+	*
+	*/
 	Error: DataTableError,
+	/** Empty state implementation for `DataTable`.
+	*
+	* Extends the EmptyState component
+	*/
 	EmptyState: DataTableEmptyState,
+	/** Select all rows checkbox.
+	*
+	* Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows
+	*/
 	SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,
+	/** Individual row selection checkbox.
+	*
+	* Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row
+	*/
 	RowSelectionCheckbox: DataTableRowSelectionCheckbox,
+	/** Bulk actions for selected rows.
+	*
+	* Renders a toolbar with actions that can be applied to all selected rows
+	*/
 	BulkActions: DataTableBulkActions,
+	/** Bulk actions for selected rows.
+	*
+	* Renders a toolbar with actions that can be applied to all selected rows
+	*/
 	BulkActionsFloating: DataTableBulkActionsFloating
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableBulkActionsFloating } from './DataTableBulkActionsFloating'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop/DragAndDropTable'\nimport { Pagination } from './pagination/Pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: DataTableBody,\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: DataTableDataCell,\n\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: DragAndDropTable,\n\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: DataTableGlobalFilter,\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n  Head: DataTableHead,\n\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  HeaderCell: DataTableHeaderCell,\n\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n  MetaData: DataTableMetaData,\n\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n  Pagination: Pagination,\n\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  Row: DataTableRow,\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: DataTableTable,\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: DataTableLoading,\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: DataTableError,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: DataTableEmptyState,\n\n  /** Select all rows checkbox.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n  /** Individual row selection checkbox.\n   *\n   * Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActions: DataTableBulkActions,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActionsFloating: DataTableBulkActionsFloating\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,YAAY,OAAO,OAAO,mBAAmB;CAMxD,MAAM;CAMN,UAAU;CAKQ;CAMlB,cAAc;CAQd,MAAM;CAON,YAAY;CAQZ,UAAU;CAKE;CAOZ,KAAK;CAWL,OAAO;CASP,SAAS;CAaT,OAAO;CAMP,YAAY;CAMZ,uBAAuB;CAMvB,sBAAsB;CAMtB,aAAa;CAMb,qBAAqB;CACtB,CAAC"}
+{"version":3,"file":"DataTable.js","names":[],"sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableProvider } from './DataTable.context'\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableBulkActionsFloating } from './DataTableBulkActionsFloating'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop/DragAndDropTable'\nimport { Pagination } from './pagination/Pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: DataTableBody,\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: DataTableDataCell,\n\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: DragAndDropTable,\n\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: DataTableGlobalFilter,\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n  Head: DataTableHead,\n\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  HeaderCell: DataTableHeaderCell,\n\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n  MetaData: DataTableMetaData,\n\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n  Pagination: Pagination,\n\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  Row: DataTableRow,\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: DataTableTable,\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: DataTableLoading,\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: DataTableError,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: DataTableEmptyState,\n\n  /** Select all rows checkbox.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n  /** Individual row selection checkbox.\n   *\n   * Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActions: DataTableBulkActions,\n\n  /** Bulk actions for selected rows.\n   *\n   * Renders a toolbar with actions that can be applied to all selected rows\n   */\n  BulkActionsFloating: DataTableBulkActionsFloating\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,YAAY,OAAO,OAAO,mBAAmB;;;;;;CAMxD,MAAM;;;;;CAMN,UAAU;;;;CAKQ;;;;;CAMlB,cAAc;;;;;;;CAQd,MAAM;;;;;;CAON,YAAY;;;;;;;CAQZ,UAAU;;;;CAKE;;;;;;CAOZ,KAAK;;;;;;;;;;CAWL,OAAO;;;;;;;;CASP,SAAS;;;;;;;;;;;;CAaT,OAAO;;;;;CAMP,YAAY;;;;;CAMZ,uBAAuB;;;;;CAMvB,sBAAsB;;;;;CAMtB,aAAa;;;;;CAMb,qBAAqB;AACvB,CAAC"}

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

@@ -1,4 +1,4 @@
-import type { ColumnOrderTableState, ColumnPinningTableState, ColumnSizingTableState, ExpandedTableState, FiltersTableState, GroupingTableState, PaginationTableState, Row, RowSelectionState, RowSelectionTableState, SortDirection, SortingTableState, Table, VisibilityTableState } from '@tanstack/react-table';
+import type { ColumnOrderTableState, ColumnPinningTableState, ColumnSizingTableState, ExpandedTableState, ColumnFiltersTableState, GlobalFilterTableState, GroupingTableState, PaginationTableState, Row, RowSelectionState, RowSelectionTableState, SortDirection, SortingTableState, Table, VisibilityTableState } from '@tanstack/react-table';
 import * as React from 'react';
 export declare enum AsyncDataState {
     NONE = "none",
@@ -6,18 +6,18 @@ export declare enum AsyncDataState {
     FULFILLED = "fulfilled",
     REJECTED = "rejected"
 }
-export type TAsyncDataResult = {
+export type AsyncDataResult = {
     total: number;
     results: TableData;
 };
-export type TAsyncDataOptions = {
+export type AsyncDataOptions = {
     pageIndex: number;
     pageSize: number;
     sortBy?: string;
     sortDirection?: SortDirection;
     globalFilter?: string;
 };
-export type TGetAsyncData = (options: TAsyncDataOptions) => Promise<TAsyncDataResult | undefined>;
+export type GetAsyncData = (options: AsyncDataOptions) => Promise<AsyncDataResult | undefined>;
 export type TablePosition = {
     top: number | null;
     bottom: number | null;
@@ -30,14 +30,14 @@ export type DataTableContextType<T = unknown> = Table<T> & {
     getTotalRows: () => number;
     isSortable: boolean;
     asyncDataState?: AsyncDataState;
-    runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>;
+    runAsyncData?: (options: Partial<AsyncDataOptions>) => Promise<void>;
     hasAsyncData: boolean;
     disabledRows?: Record<string, boolean>;
     enableRowSelection?: boolean | ((row: Row<unknown>) => boolean);
     rowSelection: RowSelectionState;
     tablePosition?: TablePosition;
     setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>;
-    data: TAsyncDataResult;
+    data: AsyncDataResult;
     columns: any;
     tableId: string;
     /**
@@ -47,11 +47,11 @@ export type DataTableContextType<T = unknown> = Table<T> & {
      *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop
      *  — it's probably best to only use one of those two methods for any given table.
      */
-    setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>;
+    setData: React.Dispatch<React.SetStateAction<AsyncDataResult>>;
 };
 export type TableData = Array<Record<string, unknown>>;
-export type InitialState = Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & FiltersTableState & SortingTableState & ExpandedTableState & GroupingTableState & ColumnSizingTableState & PaginationTableState & RowSelectionTableState>;
-export type TDefaultSort = {
+export type InitialState = Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & ColumnFiltersTableState & GlobalFilterTableState & SortingTableState & ExpandedTableState & GroupingTableState & ColumnSizingTableState & PaginationTableState & RowSelectionTableState>;
+export type DefaultSort = {
     column: string;
     direction: SortDirection;
 };

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

@@ -1,3 +1,4 @@
+import "react";
 //#region src/components/data-table/DataTable.types.ts
 var AsyncDataState = /* @__PURE__ */ function(AsyncDataState) {
 	AsyncDataState["NONE"] = "none";

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  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  FiltersTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\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 TAsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type TAsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n  options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | 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<TAsyncDataOptions>) => 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: TAsyncDataResult\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<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    FiltersTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";AAkBA,IAAY,iBAAL,yBAAA,gBAAA;AACL,gBAAA,UAAA;AACA,gBAAA,aAAA;AACA,gBAAA,eAAA;AACA,gBAAA,cAAA;;KACD"}
+{"version":3,"file":"DataTable.types.js","names":[],"sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  ColumnFiltersTableState,\n  GlobalFilterTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\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\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    ColumnFiltersTableState &\n    GlobalFilterTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type DefaultSort = { column: string; direction: SortDirection }\n"],"mappings":";;AAmBA,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/DataTableBody.d.ts

@@ -3,5 +3,5 @@ import { Table } from '../table/Table';
 type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'> & {
     rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
 };
-export declare const DataTableBody: ({ striped, rowAction, ...props }: DataTableBodyProps) => React.JSX.Element;
+export declare const DataTableBody: ({ striped, rowAction, ...rest }: DataTableBodyProps) => React.JSX.Element;
 export {};

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

@@ -1,13 +1,13 @@
+import { useDataTable } from "./DataTable.context.js";
 import { Table } from "../table/Table.js";
-import { useDataTable } from "./DataTableContext.js";
 import { DataTableRow } from "./DataTableRow.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableBody.tsx
-var DataTableBody = ({ striped = false, rowAction, ...props }) => {
+var DataTableBody = ({ striped = false, rowAction, ...rest }) => {
 	const { getRowModel } = useDataTable();
 	return /* @__PURE__ */ jsx(Table.Body, {
-		...props,
+		...rest,
 		striped,
 		children: getRowModel().rows.map((row) => {
 			return /* @__PURE__ */ jsx(DataTableRow, {

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.js","names":[],"sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableRow } from './DataTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nexport const DataTableBody = ({\n  striped = false,\n  rowAction,\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTableRow row={row} key={row.id} rowAction={rowAction} />\n      })}\n    </Table.Body>\n  )\n}\n"],"mappings":";;;;;;AAaA,IAAa,iBAAiB,EAC5B,UAAU,OACV,WACA,GAAG,YACqB;CACxB,MAAM,EAAE,gBAAgB,cAAc;AAEtC,QACE,oBAAC,MAAM,MAAP;EAAY,GAAI;EAAgB;YAC7B,aAAa,CAAC,KAAK,KAAK,QAAQ;AAC/B,UAAO,oBAAC,cAAD;IAAmB;IAA6B;IAAa,EAAhC,IAAI,GAA4B;IACpE;EACS,CAAA"}
+{"version":3,"file":"DataTableBody.js","names":[],"sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableRow } from './DataTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nexport const DataTableBody = ({\n  striped = false,\n  rowAction,\n  ...rest\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...rest} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTableRow row={row} key={row.id} rowAction={rowAction} />\n      })}\n    </Table.Body>\n  )\n}\n"],"mappings":";;;;;;AAaA,IAAa,iBAAiB,EAC5B,UAAU,OACV,WACA,GAAG,WACqB;CACxB,MAAM,EAAE,gBAAgB,aAAa;CAErC,OACE,oBAAC,MAAM,MAAP;EAAY,GAAI;EAAe;YAC5B,YAAY,CAAC,CAAC,KAAK,KAAK,QAAQ;GAC/B,OAAO,oBAAC,cAAD;IAAmB;IAA6B;GAAY,GAA/B,IAAI,EAA2B;EACrE,CAAC;CACS,CAAA;AAEhB"}

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

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { Button } from "../button/Button.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
 import { Divider } from "../divider/Divider.js";
 import { DataTableMetaData } from "./DataTableMetaData.js";
 import * as React$1 from "react";

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '~/components/button/Button'\nimport { Divider } from '~/components/divider/Divider'\nimport { styled } from '~/styled'\n\nimport { useDataTable } from './DataTableContext'\nimport { DataTableMetaData } from './DataTableMetaData'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'p-2',\n    'w-full',\n    'mb-2',\n    'justify-between',\n    'items-center',\n    'min-h-16',\n    'rounded-t-sm'\n  ],\n  variants: {\n    isRowSelected: {\n      true: ['bg-primary-100']\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement<unknown>\n}): React.ReactElement<unknown> | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  children\n}: {\n  cancelLabel?: string\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions = Object.assign(\n  ({\n    children,\n    ...rest\n  }: {\n    children:\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      | [\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsDefaultActions>\n          >,\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsSelectedRowActions>\n          >\n        ]\n  }) => {\n    const { rowSelection } = useDataTable()\n\n    const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n    return (\n      <StyledContainer isRowSelected={isRowSelected} {...rest}>\n        <DataTableMetaData />\n        <div className=\"flex items-center justify-end\">{children}</div>\n      </StyledContainer>\n    )\n  },\n  {\n    DefaultActions: BulkActionsDefaultActions,\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;AASA,IAAM,kBAAkB,OAAO,OAAO;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,eAAe,EACb,MAAM,CAAC,iBAAiB,EACzB,EACF;CACF,CAAC;AAEF,IAAM,6BAA6B,EACjC,eAGwC;CACxC,MAAM,EAAE,iBAAiB,cAAc;AAEvC,KAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS,EAAG,QAAO;AAEvD,QAAO;;AAGT,IAAM,iCAAiC,EACrC,cAAc,UACd,eAII;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,cAAc;CAElE,MAAM,kCAAkC,0BAA0B,MAAM;AAExE,KAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,WAAW,EAAG,QAAO;AAEzD,QACE,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,QAAM,SAAS,MAAM,SAAS,GAAG,KAChC,oBAAC,SAAD;GAAS,aAAY;GAAW,WAAU;GAAS,CAAA;EAErD,oBAAC,QAAD;GAAQ,OAAM;GAAU,SAAS;aAC9B;GACM,CAAA;EACR,EAAA,CAAA;;AAIP,IAAa,uBAAuB,OAAO,QACxC,EACC,UACA,GAAG,WAiBC;CACJ,MAAM,EAAE,iBAAiB,cAAc;AAIvC,QACE,qBAAC,iBAAD;EAAgC,eAHZ,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS;EAGd,GAAI;YAAnD,CACE,oBAAC,mBAAD,EAAqB,CAAA,EACrB,oBAAC,OAAD;GAAK,WAAU;GAAiC;GAAe,CAAA,CAC/C;;GAGtB;CACE,gBAAgB;CAChB,oBAAoB;CACrB,CACF"}
+{"version":3,"file":"DataTableBulkActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableMetaData } from './DataTableMetaData'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'p-2',\n    'w-full',\n    'mb-2',\n    'justify-between',\n    'items-center',\n    'min-h-16',\n    'rounded-t-sm'\n  ],\n  variants: {\n    isRowSelected: {\n      true: ['bg-primary-100']\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement<unknown>\n}): React.ReactElement<unknown> | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  children\n}: {\n  cancelLabel?: string\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions = Object.assign(\n  ({\n    children,\n    ...rest\n  }: {\n    children:\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      | [\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsDefaultActions>\n          >,\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsSelectedRowActions>\n          >\n        ]\n  }) => {\n    const { rowSelection } = useDataTable()\n\n    const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n    return (\n      <StyledContainer isRowSelected={isRowSelected} {...rest}>\n        <DataTableMetaData />\n        <div className=\"flex items-center justify-end\">{children}</div>\n      </StyledContainer>\n    )\n  },\n  {\n    DefaultActions: BulkActionsDefaultActions,\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;AAQA,IAAM,kBAAkB,OAAO,OAAO;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,eAAe,EACb,MAAM,CAAC,gBAAgB,EACzB,EACF;AACF,CAAC;AAED,IAAM,6BAA6B,EACjC,eAGwC;CACxC,MAAM,EAAE,iBAAiB,aAAa;CAEtC,IAAI,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,OAAO;CAEvD,OAAO;AACT;AAEA,IAAM,iCAAiC,EACrC,cAAc,UACd,eAII;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,aAAa;CAEjE,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,OAAO;CAEzD,OACE,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,QAAM,SAAS,MAAM,QAAQ,IAAI,KAChC,oBAAC,SAAD;GAAS,aAAY;GAAW,WAAU;EAAQ,CAAA;EAEpD,oBAAC,QAAD;GAAQ,OAAM;GAAU,SAAS;aAC9B;EACK,CAAA;CACR,EAAA,CAAA;AAEN;AAEA,IAAa,uBAAuB,OAAO,QACxC,EACC,UACA,GAAG,WAiBC;CACJ,MAAM,EAAE,iBAAiB,aAAa;CAItC,OACE,qBAAC,iBAAD;EAAgC,eAHZ,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS;EAGd,GAAI;YAAnD,CACE,oBAAC,mBAAD,CAAoB,CAAA,GACpB,oBAAC,OAAD;GAAK,WAAU;GAAiC;EAAc,CAAA,CAC/C;;AAErB,GACA;CACE,gBAAgB;CAChB,oBAAoB;AACtB,CACF"}

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

@@ -3,7 +3,7 @@ import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { Text } from "../text/Text.js";
 import { Badge } from "../badge/Badge.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
 import { BulkActionsSelectedRowActions } from "./DataTableBulkActionsSelectedRowActions.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\nimport { useDataTable } from './DataTableContext'\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 = 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":";;;;;;;;;;;AAYA,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;CACD,EACF,CAAC;AAEF,IAAa,+BAA+B,OAAO,QAChD,EACC,UACA,GAAG,WACwE;CAC3E,MAAM,EAAE,cAAc,8BAA8B,cAAc;CAElE,MAAM,eAAe,QAAM,OAAuB,KAAK;CAEvD,MAAM,uBAAuB,QAAM,cAAc;AAC/C,SAAO,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC;IACtC,CAAC,aAAa,CAAC;CAElB,MAAM,kCAAkC,0BAA0B,MAAM;AAExE,KAAI,yBAAyB,EAAG,QAAO;AAEvC,QACE,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;KACK,CAAA,EACR,oBAAC,MAAD;KAAM,MAAK;KAAK,QAAO;KAAO,WAAU;eAAa;KAE9C,CAAA,CACH;OACN,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UACD,oBAAC,YAAD;KACE,YAAW;KACX,OAAM;KACN,MAAK;KACL,SAAS;KACT,OAAM;eAEN,oBAAC,MAAD,EAAM,IAAI,OAAS,CAAA;KACR,CAAA,CACT;MACU;;EACV,CAAA;GAGd,EACE,oBAAoB,+BACrB,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 = 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+B,OAAO,QAChD,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"}

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

@@ -1,5 +1,5 @@
 import { Button } from "../button/Button.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
 import { Divider } from "../divider/Divider.js";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActionsSelectedRowActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTableContext'\n\nexport const BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  showDividers = true,\n  children\n}: {\n  cancelLabel?: string\n  showDividers?: boolean\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {showDividers && React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAa,iCAAiC,EAC5C,cAAc,UACd,eAAe,MACf,eAKI;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,cAAc;CAElE,MAAM,kCAAkC,0BAA0B,MAAM;AAExE,KAAI,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,WAAW,EAAG,QAAO;AAEzD,QACE,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,gBAAgB,QAAM,SAAS,MAAM,SAAS,GAAG,KAChD,oBAAC,SAAD;GAAS,aAAY;GAAW,WAAU;GAAS,CAAA;EAErD,oBAAC,QAAD;GAAQ,OAAM;GAAU,SAAS;aAC9B;GACM,CAAA;EACR,EAAA,CAAA"}
+{"version":3,"file":"DataTableBulkActionsSelectedRowActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTable.context'\n\nexport const BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  showDividers = true,\n  children\n}: {\n  cancelLabel?: string\n  showDividers?: boolean\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {showDividers && React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAa,iCAAiC,EAC5C,cAAc,UACd,eAAe,MACf,eAKI;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,aAAa;CAEjE,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,OAAO;CAEzD,OACE,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,gBAAgB,QAAM,SAAS,MAAM,QAAQ,IAAI,KAChD,oBAAC,SAAD;GAAS,aAAY;GAAW,WAAU;EAAQ,CAAA;EAEpD,oBAAC,QAAD;GAAQ,OAAM;GAAU,SAAS;aAC9B;EACK,CAAA;CACR,EAAA,CAAA;AAEN"}

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

@@ -3,9 +3,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { flexRender } from "@tanstack/react-table";
 //#region src/components/data-table/DataTableDataCell.tsx
-var DataTableDataCell = ({ cell }) => {
-	return /* @__PURE__ */ jsx(Table.Cell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
-};
+var DataTableDataCell = ({ cell }) => /* @__PURE__ */ jsx(Table.Cell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
 //#endregion
 export { DataTableDataCell };
 

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableDataCell.js","names":[],"sources":["../../../src/components/data-table/DataTableDataCell.tsx"],"sourcesContent":["import type { Cell } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table } from '../table/Table'\n\ntype DataTableDataCellProps = {\n  cell: Cell<Record<string, unknown>, unknown>\n}\n\nexport const DataTableDataCell = ({ cell }: DataTableDataCellProps) => {\n  return (\n    <Table.Cell key={cell.id}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </Table.Cell>\n  )\n}\n"],"mappings":";;;;;AAUA,IAAa,qBAAqB,EAAE,WAAmC;AACrE,QACE,oBAAC,MAAM,MAAP,EAAA,UACG,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,YAAY,CAAC,EAC/C,EAFI,KAAK,GAET"}
+{"version":3,"file":"DataTableDataCell.js","names":[],"sources":["../../../src/components/data-table/DataTableDataCell.tsx"],"sourcesContent":["import type { Cell } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table } from '../table/Table'\n\ntype DataTableDataCellProps = {\n  cell: Cell<Record<string, unknown>, unknown>\n}\n\nexport const DataTableDataCell = ({ cell }: DataTableDataCellProps) => (\n  <Table.Cell key={cell.id}>\n    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n  </Table.Cell>\n)\n"],"mappings":";;;;;AAUA,IAAa,qBAAqB,EAAE,WAClC,oBAAC,MAAM,MAAP,EAAA,UACG,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC,EAC/C,GAFK,KAAK,EAEV"}

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

@@ -1,5 +1,5 @@
 import { AsyncDataState } from "./DataTable.types.js";
-import { useDataTable } from "./DataTableContext.js";
+import { useDataTable } from "./DataTable.context.js";
 import { EmptyState } from "../empty-state/EmptyState.js";
 import "react";
 import { jsx } from "react/jsx-runtime";