@atom-learning/components 8.0.2 → 9.0.0-beta.0

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<{
         striped?: boolean | undefined;
     } & {
-        as?: import("react").ElementType;
-    }, "children"> & {
-        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+        as?: never;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "as" | "striped">, "children"> & {
+        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent<Element, MouseEvent>) => void;
     }) => import("react").JSX.Element;
     /** Default table data cell implementation for `DataTable`
      *
@@ -40,32 +40,32 @@ 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<{
+        size?: "lg" | "md" | "xl" | undefined;
         corners?: "round" | "square" | undefined;
     } & {
-        as?: import("react").ElementType;
-    } & {
+        as?: never;
+    } & Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "as" | "corners" | "size"> & {
         numberOfStickyColumns?: number;
         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;
+    }, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<{
+        theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
         isSticky?: boolean | undefined;
     } & {
-        as?: import("react").ElementType;
-    }, "children"> & {
+        as?: never;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "as" | "isSticky" | "theme">, "children"> & {
         sortable?: boolean;
         isSticky?: boolean;
         stickyOffset?: number;
         showTotalInFirstColumn?: boolean;
         totalSuffix?: string;
-    }, "theme" | "sortable">> & Partial<Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "striped"> & {
+    }, "sortable" | "theme">> & Partial<Pick<{
         striped?: boolean | undefined;
     } & {
-        as?: import("react").ElementType;
-    }, "striped">> & {
+        as?: never;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "as" | "striped">, "striped">> & {
         scrollOptions?: {
             hasStickyHeader?: boolean;
             stickyHeaderOffset?: number;
@@ -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,46 @@ 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<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "size"> & Omit<{
+        as?: never;
+    } & Omit<{
+        size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "body" | "display" | "mono">>) | undefined;
+    } & {
+        as?: never;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "as" | "family" | "noCapsize" | "size" | "weight">, "as">, "as" | "ref" | "type"> & {
+        type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
+        as?: never;
+        disabled?: boolean;
+        ref?: React.Ref<HTMLInputElement>;
+    }, "appearance" | "size" | "state"> & {
+        size?: "lg" | "md" | "sm" | "xl" | undefined;
+        state?: "error" | undefined;
+        appearance?: "modern" | "standard" | undefined;
+        theme?: "grey" | "white" | undefined;
+        disabled?: boolean;
+        name?: string;
+        readOnly?: boolean;
+        value?: string | number;
+        onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    } & {
+        size?: 'sm' | 'md' | 'lg';
+        className?: string;
+        value?: string;
+        defaultValue?: string;
+        onValueChange?: (newValue: string) => void;
+        clearText?: string;
+        onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    } & {
         label: string;
         hideLabel?: boolean;
     }) => import("react").JSX.Element | null;
@@ -100,12 +132,12 @@ 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<{
+        theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
         isSticky?: boolean | undefined;
     } & {
-        as?: import("react").ElementType;
-    }, "children"> & {
+        as?: never;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "as" | "isSticky" | "theme">, "children"> & {
         sortable?: boolean;
         isSticky?: boolean;
         stickyOffset?: number;
@@ -117,9 +149,9 @@ 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> & {
-        as?: import("react").ElementType;
-    } & {
+    HeaderCell: ({ header, includeTotal, totalSuffix, children, className, ...rest }: {
+        as?: never;
+    } & Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "as"> & {
         header: import("@tanstack/table-core").Header<Record<string, unknown>, unknown>;
         includeTotal?: boolean;
         totalSuffix?: string;
@@ -143,9 +175,9 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      */
     Pagination: {
-        ({ colorScheme, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never> & {
-            as?: import("react").ElementType;
-        } & {
+        ({ colorScheme, ...rest }: {
+            as?: never;
+        } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "as"> & {
             colorScheme?: import("../..").TcolorScheme;
         }): import("react").JSX.Element | null;
         displayName: string;
@@ -165,7 +197,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`.
@@ -173,12 +205,10 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation, you can compose your own implentation, `asyncDataState`
      * can be retrieved from `useDataTable`
      */
-    Loading: (props: React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    Loading: (props: React.ComponentProps<import("../..").PolymorphicComponent<({ className, message, size, ...rest }: import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
         message?: string;
-        size?: "sm" | "md" | "lg";
-    }, never> & {
-        as?: import("react").ElementType;
-    }>>) => import("react").JSX.Element | null;
+        size?: 'sm' | 'md' | 'lg';
+    }) => import("react").JSX.Element, unknown>>) => import("react").JSX.Element | null;
     /** Default error implementation for remote data
      *
      * Renders an error component when `getAsyncData` promise rejects.
@@ -191,17 +221,17 @@ 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;
+    EmptyState: ({ children, ...rest }: {
+        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;
+        as?: never;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | "size">) => import("react").JSX.Element | null;
     /** Select all rows checkbox.
      *
      * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows
@@ -215,7 +245,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>;
@@ -248,9 +278,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      * Renders a toolbar with actions that can be applied to all selected rows
      */
-    BulkActionsFloating: (({ children, ...rest }: React.PropsWithChildren<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-        as?: import("react").ElementType;
-    }>>>) => import("react").JSX.Element | null) & {
+    BulkActionsFloating: (({ children, ...rest }: React.PropsWithChildren<React.ComponentProps<import("../..").PolymorphicComponent<"div", unknown>>>) => import("react").JSX.Element | null) & {
         SelectedRowActions: ({ cancelLabel, showDividers, children }: {
             cancelLabel?: string;
             showDividers?: boolean;

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";
@@ -22,23 +22,111 @@ import { Pagination } from "./pagination/Pagination.js";
 * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus
 * the functionality we've built on top.
 */
-var DataTable = Object.assign(DataTableProvider, {
+var DataTable = /* @__PURE__ */ 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 = /* @__PURE__ */ 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,YAA4B,uBAAO,OAAO,mBAAmB;;;;;;CAMxE,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";
@@ -41,7 +41,7 @@ var BulkActionsSelectedRowActions = ({ cancelLabel = "Cancel", children }) => {
 		})
 	] });
 };
-var DataTableBulkActions = Object.assign(({ children, ...rest }) => {
+var DataTableBulkActions = /* @__PURE__ */ Object.assign(({ children, ...rest }) => {
 	const { rowSelection } = useDataTable();
 	return /* @__PURE__ */ jsxs(StyledContainer, {
 		isRowSelected: Object.keys(rowSelection || {}).length > 0,

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 = /* @__PURE__ */ 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,uBAAuC,uBAAO,QACxD,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.d.ts

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const StyledContainer: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & {
-    as?: React.ElementType;
-}>;
+declare const StyledContainer: import("../..").PolymorphicComponent<"div", unknown>;
 export declare const DataTableBulkActionsFloating: (({ children, ...rest }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => React.JSX.Element | null) & {
     SelectedRowActions: ({ cancelLabel, showDividers, children }: {
         cancelLabel?: string;

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

@@ -1,9 +1,9 @@
 import { styled } from "../../styled.js";
+import { Text } from "../text/Text.js";
 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";
@@ -37,7 +37,7 @@ var StyledContainer = styled("div", { base: [
 	"xl:pr-2",
 	"xl:py-4"
 ] });
-var DataTableBulkActionsFloating = Object.assign(({ children, ...rest }) => {
+var DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(({ children, ...rest }) => {
 	const { rowSelection, toggleAllPageRowsSelected } = useDataTable();
 	const actionBarRef = React$1.useRef(null);
 	const numberOfSelectedRows = React$1.useMemo(() => {

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 = /* @__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"}