@atom-learning/components 6.0.0-beta.0 → 6.0.0-beta.10

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

@@ -0,0 +1,294 @@
+/** Context provider for DataTable state and logic.
+ *
+ * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus
+ * the functionality we've built on top.
+ */
+export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defaultSort, initialState, disabledRows, enableRowSelection, onRowSelectionChange, children }: {
+    columns: any;
+    defaultSort?: import("./DataTable.types").TDefaultSort;
+    children: React.ReactNode;
+    initialState?: import("./DataTable.types").InitialState;
+    disabledRows?: Record<string, boolean>;
+    enableRowSelection?: boolean | ((row: import("@tanstack/table-core").Row<unknown>) => boolean);
+    onRowSelectionChange?: import("@tanstack/table-core").OnChangeFn<import("@tanstack/table-core").RowSelectionState>;
+} & ({
+    data: import("./DataTable.types").TableData;
+    getAsyncData?: never;
+} | {
+    data?: never;
+    getAsyncData: import("./DataTable.types").TGetAsyncData;
+})) => 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<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+    }, "striped"> & {
+        striped?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>, "children"> & {
+        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+    }) => import("react").JSX.Element;
+    /** Default table data cell implementation for `DataTable`
+     *
+     *
+     */
+    DataCell: ({ cell }: {
+        cell: import("@tanstack/table-core").Cell<Record<string, unknown>, unknown>;
+    }) => import("react").JSX.Element;
+    /**
+     * 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<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
+        ref?: ((instance: HTMLTableElement | null) => void) | import("react").RefObject<HTMLTableElement> | null | undefined;
+    }, "size" | "corners"> & {
+        size?: ("md" | "lg" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "md" | "lg" | "xl">>) | undefined;
+        corners?: ("round" | "square" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "round" | "square">>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLTableElement> & {
+        numberOfStickyColumns?: number;
+        scrollContainerCss?: string;
+        scrollContainerkey?: string;
+        maxRowDepth?: number;
+    }, "ref"> & import("react").RefAttributes<HTMLTableElement>, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+    }, "theme" | "isSticky"> & {
+        theme?: ("primary" | "white" | "primaryDark" | "primaryLight" | "light" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "primaryDark" | "primaryLight" | "light">>) | undefined;
+        isSticky?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>, "children"> & {
+        sortable?: boolean;
+        isSticky?: boolean;
+        stickyOffset?: number;
+        showTotalInFirstColumn?: boolean;
+        totalSuffix?: string;
+    }, "theme" | "sortable">> & Partial<Pick<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+    }, "striped"> & {
+        striped?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>, "striped">> & {
+        scrollOptions?: {
+            hasStickyHeader?: boolean;
+            stickyHeaderOffset?: number;
+            headerCss?: string;
+            numberOfStickyColumns?: number;
+            scrollContainerCss?: string;
+            showTotalInFirstColumn?: boolean;
+            totalSuffix?: string;
+        };
+        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+        withContainer?: boolean;
+    } & {
+        className?: string;
+        idColumn?: string;
+        onDragAndDrop?: (onDragAndDropData: {
+            oldIndex: number;
+            newIndex: number;
+            newData: import("./DataTable.types").TAsyncDataResult;
+        }) => 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").SearchInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement> & {
+        label: string;
+        hideLabel?: boolean;
+    }) => import("react").JSX.Element | null;
+    /** 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: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, className, ...props }: Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+    }, "theme" | "isSticky"> & {
+        theme?: ("primary" | "white" | "primaryDark" | "primaryLight" | "light" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "primary" | "white" | "primaryDark" | "primaryLight" | "light">>) | undefined;
+        isSticky?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>, "children"> & {
+        sortable?: boolean;
+        isSticky?: boolean;
+        stickyOffset?: number;
+        showTotalInFirstColumn?: boolean;
+        totalSuffix?: string;
+    }) => React.ReactElement;
+    /** 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: ({ header, includeTotal, totalSuffix, children, className, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
+        ref?: ((instance: HTMLTableHeaderCellElement | null) => void) | import("react").RefObject<HTMLTableHeaderCellElement> | null | undefined;
+    }, never> & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLTableHeaderCellElement> & {
+        header: import("@tanstack/table-core").Header<Record<string, unknown>, unknown>;
+        includeTotal?: boolean;
+        totalSuffix?: string;
+    }) => import("react").JSX.Element;
+    /** 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: ({ copy, ...rest }: {
+        copy?: {
+            sorted_by?: string;
+            ascending?: string;
+            descending?: string;
+            separator?: string;
+        };
+        sortLabel?: string;
+    }) => import("react").JSX.Element;
+    /** Default display of amount of items and current sorting status for 'DataTable'
+     *
+     */
+    Pagination: {
+        ({ colorScheme, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+            ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+        }, never> & {
+            as?: import("react").ElementType;
+        }, "ref"> & import("react").RefAttributes<HTMLElement> & {
+            colorScheme?: import("../..").TcolorScheme;
+        }): import("react").JSX.Element | null;
+        displayName: string;
+    };
+    /** 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: ({ row, rowAction }: import("./DataTableRow").DataTableRowProps) => import("react").JSX.Element;
+    /** 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: ({ sortable, striped, theme, className, scrollOptions, rowAction, withContainer, ...props }: import("./DataTableTable").DataTableTableProps) => JSX.Element | null;
+    /** 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: (props: React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, "direction" | "align" | "wrap" | "justify" | "gap"> & {
+        direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+        wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+        justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+        align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+        gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+        message?: string;
+        size?: "sm" | "md" | "lg";
+    }, never> & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>>) => import("react").JSX.Element | null;
+    /** 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: ({ children }: {
+        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => React.ReactElement;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+    /** Empty state implementation for `DataTable`.
+     *
+     * Extends the EmptyState component
+     */
+    EmptyState: ({ children, ...rest }: Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, "direction" | "align" | "wrap" | "justify" | "gap"> & {
+        direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+        wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+        justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+        align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+        gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>, "size"> & {
+        size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").JSX.Element | null;
+    /** Select all rows checkbox.
+     *
+     * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows
+     */
+    SelectAllRowsCheckbox: ({ label }: {
+        label?: string;
+    }) => import("react").JSX.Element;
+    /** Individual row selection checkbox.
+     *
+     * Renders a checkbox on each row, allowing for individual selection/deselection of any selectable row
+     */
+    RowSelectionCheckbox: ({ row, checked, onCheckedChange, label }: {
+        row: import("@tanstack/table-core").Row<Record<string, unknown>>;
+        checked: boolean | "indeterminate";
+        onCheckedChange: (value: boolean) => void;
+        label?: string;
+    }) => React.ReactElement;
+    /** Bulk actions for selected rows.
+     *
+     * Renders a toolbar with actions that can be applied to all selected rows
+     */
+    BulkActions: (({ children, ...rest }: {
+        children: React.ReactElement<React.ComponentProps<({ children }: {
+            children: React.ReactElement;
+        }) => React.ReactElement | null>> | React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
+            cancelLabel?: string;
+            children: React.ReactNode;
+        }) => import("react").JSX.Element | null>> | [React.ReactElement<React.ComponentProps<({ children }: {
+            children: React.ReactElement;
+        }) => React.ReactElement | null>>, React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
+            cancelLabel?: string;
+            children: React.ReactNode;
+        }) => import("react").JSX.Element | null>>];
+    }) => import("react").JSX.Element) & {
+        DefaultActions: ({ children }: {
+            children: React.ReactElement;
+        }) => React.ReactElement | null;
+        SelectedRowActions: ({ cancelLabel, children }: {
+            cancelLabel?: string;
+            children: React.ReactNode;
+        }) => import("react").JSX.Element | null;
+    };
+    /** Bulk actions for selected rows.
+     *
+     * Renders a toolbar with actions that can be applied to all selected rows
+     */
+    BulkActionsFloating: (({ children, ...rest }: {
+        children: React.ReactNode;
+    }) => import("react").JSX.Element | null) & {
+        SelectedRowActions: ({ cancelLabel, showDividers, children }: {
+            cancelLabel?: string;
+            showDividers?: boolean;
+            children: React.ReactNode;
+        }) => import("react").JSX.Element | null;
+    };
+};

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

@@ -0,0 +1,56 @@
+import type { ColumnOrderTableState, ColumnPinningTableState, ColumnSizingTableState, ExpandedTableState, FiltersTableState, GroupingTableState, PaginationTableState, Row, RowSelectionState, RowSelectionTableState, SortDirection, SortingTableState, Table, VisibilityTableState } from '@tanstack/react-table';
+import * as React from 'react';
+export declare enum AsyncDataState {
+    NONE = "none",
+    PENDING = "pending",
+    FULFILLED = "fulfilled",
+    REJECTED = "rejected"
+}
+export type TAsyncDataResult = {
+    total: number;
+    results: TableData;
+};
+export type TAsyncDataOptions = {
+    pageIndex: number;
+    pageSize: number;
+    sortBy?: string;
+    sortDirection?: SortDirection;
+    globalFilter?: string;
+};
+export type TGetAsyncData = (options: TAsyncDataOptions) => Promise<TAsyncDataResult | undefined>;
+export type TablePosition = {
+    top: number | null;
+    bottom: number | null;
+    offsetTop: number;
+    isVisible: boolean;
+};
+export type DataTableContextType<T = unknown> = Table<T> & {
+    setIsSortable: React.Dispatch<React.SetStateAction<boolean>>;
+    applyPagination: () => void;
+    getTotalRows: () => number;
+    isSortable: boolean;
+    asyncDataState?: AsyncDataState;
+    runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>;
+    disabledRows?: Record<string, boolean>;
+    enableRowSelection?: boolean | ((row: Row<unknown>) => boolean);
+    rowSelection: RowSelectionState;
+    tablePosition?: TablePosition;
+    setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>;
+    data: TAsyncDataResult;
+    columns: any;
+    tableId: string;
+    /**
+     * Directly update the data array that the table rows are built from.
+     * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!
+     *
+     *  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>>;
+};
+export type TableData = Array<Record<string, unknown>>;
+export type InitialState = Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & FiltersTableState & SortingTableState & ExpandedTableState & GroupingTableState & ColumnSizingTableState & PaginationTableState & RowSelectionTableState>;
+export type TDefaultSort = {
+    column: string;
+    direction: SortDirection;
+};

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Table } from '../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 {};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+declare const BulkActionsDefaultActions: ({ children }: {
+    children: React.ReactElement;
+}) => React.ReactElement | null;
+declare const BulkActionsSelectedRowActions: ({ cancelLabel, children }: {
+    cancelLabel?: string;
+    children: React.ReactNode;
+}) => React.JSX.Element | null;
+export declare const DataTableBulkActions: (({ children, ...rest }: {
+    children: React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>> | React.ReactElement<React.ComponentProps<typeof BulkActionsSelectedRowActions>> | [React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>>, React.ReactElement<React.ComponentProps<typeof BulkActionsSelectedRowActions>>];
+}) => React.JSX.Element) & {
+    DefaultActions: ({ children }: {
+        children: React.ReactElement;
+    }) => React.ReactElement | null;
+    SelectedRowActions: ({ cancelLabel, children }: {
+        cancelLabel?: string;
+        children: React.ReactNode;
+    }) => React.JSX.Element | null;
+};
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export declare const DataTableBulkActionsFloating: (({ children, ...rest }: {
+    children: React.ReactNode;
+}) => React.JSX.Element | null) & {
+    SelectedRowActions: ({ cancelLabel, showDividers, children }: {
+        cancelLabel?: string;
+        showDividers?: boolean;
+        children: React.ReactNode;
+    }) => React.JSX.Element | null;
+};

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const BulkActionsSelectedRowActions: ({ cancelLabel, showDividers, children }: {
+    cancelLabel?: string;
+    showDividers?: boolean;
+    children: React.ReactNode;
+}) => React.JSX.Element | null;

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

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

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

@@ -0,0 +1,7 @@
+import type { Cell } from '@tanstack/react-table';
+import * as React from 'react';
+type DataTableDataCellProps = {
+    cell: Cell<Record<string, unknown>, unknown>;
+};
+export declare const DataTableDataCell: ({ cell }: DataTableDataCellProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { EmptyState } from '../empty-state';
+type DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>;
+export declare const DataTableEmptyState: ({ children, ...rest }: DataTableEmptyStateProps) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { DataTableContextType } from './DataTable.types';
+export declare const DataTableError: ({ children }: {
+    children: (retry?: DataTableContextType["runAsyncData"]) => React.ReactElement;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SearchInput } from '../search-input';
+type DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {
+    label: string;
+    hideLabel?: boolean;
+};
+export declare const DataTableGlobalFilter: ({ onChange, label, hideLabel, ...props }: DataTableSearchProps) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Table } from '../table';
+type DataTableHeadProps = Omit<React.ComponentProps<typeof Table.Header>, 'children'> & {
+    sortable?: boolean;
+    isSticky?: boolean;
+    stickyOffset?: number;
+    showTotalInFirstColumn?: boolean;
+    totalSuffix?: string;
+};
+export declare const DataTableHead: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, className, ...props }: DataTableHeadProps) => React.ReactElement;
+export {};

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

@@ -1,2 +1,2 @@
-import j from"clsx";import*as t from"react";import{Table as n}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as H}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as k}from"./DataTableContext.js";import{DataTable as N}from"./DataTable.js";const O=({sortable:i=!0,theme:h="light",isSticky:s=!1,stickyOffset:a=0,showTotalInFirstColumn:p,totalSuffix:v,style:E,className:T,..._})=>{var f;const{getHeaderGroups:w,setIsSortable:u,enableRowSelection:R,getCanSomeRowsExpand:S,tablePosition:e,setTablePosition:g}=k();t.useEffect(()=>{u(i)},[i,u]);const o=t.useRef(null),c=t.useRef(null),C=t.useRef(0),[m,x]=t.useState(0),[D,b]=t.useState(!1),d=(f=o==null?void 0:o.current)==null?void 0:f.closest("thead");if(d&&(e==null?void 0:e.offsetTop)===null){const l=d.getBoundingClientRect().height,r=a+l;e&&g({...e,offsetTop:r||0})}return t.useEffect(()=>{if(s&&(!c.current&&o.current&&(c.current=o.current.closest("table")),c.current&&(e==null?void 0:e.top)!==null&&(e==null?void 0:e.bottom)!==null)){const l=(e==null?void 0:e.top)!=null&&(e==null?void 0:e.bottom)!=null&&e.top<a&&e.bottom>100?-e.top+a:0;l!==0&&b(!0),C.current=l,x(l),requestAnimationFrame(()=>{b(!1)})}},[s,a,e]),t.createElement(n.Header,{theme:h,style:{...E,"--header-offset":"".concat(m,"px")},..._,className:j("relative","z-3","[&_tr:not(:last-child)>th]:border-b-none","[&_tr:not(:first-child)>th]:rounded-none!",T)},w().map(l=>t.createElement(n.Row,{key:l.id,ref:o,className:s&&m!==0&&["translate-y-(--header-offset)","[object Object]","transition-[[object Object]]","[object Object]","[&_th]:last:before:absolute","[&_th]:last:before:bottom-0",'[&_th]:last:before:content-[""]',"[&_th]:last:before:pointer-events-none","[&_th]:last:before:right-0","[&_th]:last:before:shadow-sm","[&_th]:last:before:top-0","[&_th]:last:before:w-full"]},S()&&t.createElement(n.HeaderCell,{className:"w-10"}),R&&t.createElement(n.HeaderCell,{className:"w-10"},t.createElement(H,null)),l.headers.map((r,y)=>t.createElement(N.HeaderCell,{header:r,key:r.id,includeTotal:y===0&&p,totalSuffix:v})))))};export{O as DataTableHead};
+import h from"clsx";import*as t from"react";import{Table as n}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as D}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as N}from"./DataTableContext.js";import{DataTable as A}from"./DataTable.js";const F=({sortable:c=!0,theme:p="light",isSticky:s=!1,stickyOffset:a=0,showTotalInFirstColumn:y,totalSuffix:v,style:E,className:S,...T})=>{var u;const{getHeaderGroups:_,setIsSortable:f,enableRowSelection:w,getCanSomeRowsExpand:R,tablePosition:e,setTablePosition:g}=N();t.useEffect(()=>{f(c)},[c,f]);const o=t.useRef(null),i=t.useRef(null),x=t.useRef(0),[m,C]=t.useState(0),[H,d]=t.useState(!1),b=(u=o==null?void 0:o.current)==null?void 0:u.closest("thead");if(b&&(e==null?void 0:e.offsetTop)===null){const l=b.getBoundingClientRect().height,r=a+l;e&&g({...e,offsetTop:r||0})}return t.useEffect(()=>{if(s&&(!i.current&&o.current&&(i.current=o.current.closest("table")),i.current&&(e==null?void 0:e.top)!==null&&(e==null?void 0:e.bottom)!==null)){const l=(e==null?void 0:e.top)!=null&&(e==null?void 0:e.bottom)!=null&&e.top<a&&e.bottom>100?-e.top+a:0;l!==0&&d(!0),x.current=l,C(l),requestAnimationFrame(()=>{d(!1)})}},[s,a,e]),t.createElement(n.Header,{theme:p,style:{...E,"--header-offset":"".concat(m,"px")},...T,className:h("relative","z-3","[&_tr:not(:last-child)>th]:border-b-none","[&_tr:not(:first-child)>th]:rounded-none!",S)},_().map(l=>t.createElement(n.Row,{key:l.id,ref:o,className:s&&m!==0?h("translate-y-(--header-offset)",H?"delay-0ms opacity-0 transition-none":"delay-150ms opacity-100 transition-opacity duration-100","[&_th]:last:before:absolute","[&_th]:last:before:bottom-0","[&_th]:last:before:pointer-events-none","[&_th]:last:before:right-0","[&_th]:last:before:shadow-sm","[&_th]:last:before:top-0","[&_th]:last:before:w-full"):void 0},R()&&t.createElement(n.HeaderCell,{className:"w-10"}),w&&t.createElement(n.HeaderCell,{className:"w-10"},t.createElement(D,null)),l.headers.map((r,k)=>t.createElement(A.HeaderCell,{header:r,key:r.id,includeTotal:k===0&&y,totalSuffix:v})))))};export{F as DataTableHead};
 //# sourceMappingURL=DataTableHead.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...props\n}: DataTableHeadProps): React.ReactElement => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...props}\n      className={clsx(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky &&\n              headerOffset !== 0 && [\n                'translate-y-(--header-offset)',\n                '[object Object]',\n                'transition-[[object Object]]',\n                '[object Object]',\n                '[&_th]:last:before:absolute',\n                '[&_th]:last:before:bottom-0',\n                '[&_th]:last:before:content-[\"\"]',\n                '[&_th]:last:before:pointer-events-none',\n                '[&_th]:last:before:right-0',\n                '[&_th]:last:before:shadow-sm',\n                '[&_th]:last:before:top-0',\n                '[&_th]:last:before:w-full'\n              ]\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTable.HeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","showTotalInFirstColumn","totalSuffix","style","className","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","clsx","headerGroup","DataTableSelectAllRowsCheckbox","header","index","DataTable"],"mappings":"2QAkBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,uBAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA8C,CA5B9C,IAAAC,EA6BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,EAEJC,EAAAA,EAAM,UAAU,IAAM,CACpBN,EAAcX,CAAQ,CACxB,EAAG,CAACA,EAAUW,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,KAAAA,OAAAA,EAAmB,UAAnB,KAAA,OAAAT,EAA4B,QAAQ,OAAA,EAE7D,GAAIgB,IAAoBX,GAAA,YAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,sBAAsB,EAAE,OAC3DE,EAAqBxB,EAAeuB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAKf,IAED,CAACiB,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,KAAA,OAAAA,EAAe,OAAQ,OAAQA,GAAA,KAAA,OAAAA,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,KAAA,OAAAA,EAAe,MAAO,OACtBA,GAAA,KAAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMX,GACpBW,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMX,EACrB,EAEFyB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACtB,EAAUC,EAAcW,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAO5B,EACP,MAAO,CACL,GAAGK,EACH,kBAAmB,GAAG,OAAAe,EAAY,IAAA,CACpC,EACC,GAAGb,EACJ,UAAWsB,EACT,WACA,MACA,2CACA,4CACAvB,CACF,CAAA,EAECG,IAAkB,IAAKqB,GAEpBd,EAAA,cAACY,EAAM,IAAN,CACC,IAAKE,EAAY,GACjB,IAAKb,EACL,UACEhB,GACAmB,IAAiB,GAAK,CACpB,gCACA,kBACA,+BACA,kBACA,8BACA,8BACA,kCACA,yCACA,6BACA,+BACA,2BACA,2BACF,CAAA,EAGDR,EAA0BI,GAAAA,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAAA,CAAO,EAC7DjB,GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAC1BZ,EAAAA,EAAA,cAACe,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAI,CAACE,EAAQC,IAChCjB,EAAA,cAACkB,EAAU,WAAV,CACC,OAAQF,EACR,IAAKA,EAAO,GACZ,aAAcC,IAAU,GAAK9B,EAC7B,YAAaC,CAAAA,CACf,CACD,CACH,CAEH,CACH,CAEJ"}
+{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...props\n}: DataTableHeadProps): React.ReactElement => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition,\n    setTablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const headerOffsetRef = React.useRef(0)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n  if (tableHeadElement && tablePosition?.offsetTop === null) {\n    const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n    const intersectionOffset = stickyOffset + tableHeadHeight\n    if (tablePosition) {\n      setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n    }\n  }\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        headerOffsetRef.current = newOffset\n        setHeaderOffset(newOffset)\n\n        requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...props}\n      className={clsx(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            ref={tableHeaderRowRef}\n            className={\n              isSticky && headerOffset !== 0\n                ? clsx(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTable.HeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","stickyOffset","showTotalInFirstColumn","totalSuffix","style","className","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","clsx","headerGroup","DataTableSelectAllRowsCheckbox","header","index","DataTable"],"mappings":"2QAkBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,uBAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA8C,CA5B9C,IAAAC,EA6BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,EAEJC,EAAAA,EAAM,UAAU,IAAM,CACpBN,EAAcX,CAAQ,CACxB,EAAG,CAACA,EAAUW,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,GAAmBhB,EAAAS,GAAA,KAAAA,OAAAA,EAAmB,UAAnB,KAAA,OAAAT,EAA4B,QAAQ,OAAA,EAE7D,GAAIgB,IAAoBX,GAAA,YAAAA,EAAe,aAAc,KAAM,CACzD,MAAMY,EAAkBD,EAAiB,sBAAsB,EAAE,OAC3DE,EAAqBxB,EAAeuB,EACtCZ,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWa,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAV,EAAM,UAAU,IAAM,CACpB,GAAKf,IAED,CAACiB,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,KAAA,OAAAA,EAAe,OAAQ,OAAQA,GAAA,KAAA,OAAAA,EAAe,UAAW,MAAM,CACjE,MAAMc,GACJd,GAAA,KAAA,OAAAA,EAAe,MAAO,OACtBA,GAAA,KAAAA,OAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMX,GACpBW,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMX,EACrB,EAEFyB,IAAc,GAAGJ,EAAc,EAAI,EAEvCJ,EAAgB,QAAUQ,EAC1BN,EAAgBM,CAAS,EAEzB,sBAAsB,IAAM,CAC1BJ,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACtB,EAAUC,EAAcW,CAAa,CAAC,EAGxCG,EAAA,cAACY,EAAM,OAAN,CACC,MAAO5B,EACP,MAAO,CACL,GAAGK,EACH,kBAAmB,GAAG,OAAAe,EAAY,IAAA,CACpC,EACC,GAAGb,EACJ,UAAWsB,EACT,WACA,MACA,2CACA,4CACAvB,CACF,CAAA,EAECG,EAAkB,EAAA,IAAKqB,GAEpBd,EAAA,cAACY,EAAM,IAAN,CACC,IAAKE,EAAY,GACjB,IAAKb,EACL,UACEhB,GAAYmB,IAAiB,EACzBS,EACE,gCACAP,EACI,sCACA,0DACJ,8BACA,8BACA,yCACA,6BACA,+BACA,2BACA,2BACF,EACA,MAAA,EAGLV,EAA0BI,GAAAA,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAAA,CAAO,EAC7DjB,GACCK,EAAA,cAACY,EAAM,WAAN,CAAiB,UAAU,MAC1BZ,EAAAA,EAAA,cAACe,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAI,CAACE,EAAQC,IAChCjB,EAAA,cAACkB,EAAU,WAAV,CACC,OAAQF,EACR,IAAKA,EAAO,GACZ,aAAcC,IAAU,GAAK9B,EAC7B,YAAaC,CAAAA,CACf,CACD,CACH,CAEH,CACH,CAEJ"}

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

@@ -0,0 +1,10 @@
+import type { Header } from '@tanstack/react-table';
+import * as React from 'react';
+import { Table } from '../table';
+type DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {
+    header: Header<Record<string, unknown>, unknown>;
+    includeTotal?: boolean;
+    totalSuffix?: string;
+};
+export declare const DataTableHeaderCell: ({ header, includeTotal, totalSuffix, children, className, ...props }: DataTableHeaderProps) => React.JSX.Element;
+export {};

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

@@ -1,2 +1,2 @@
-import{ArrowUp as x,ArrowDown as h}from"@atom-learning/icons";import{flexRender as E}from"@tanstack/react-table";import D from"clsx";import*as o from"react";import{useHover as T}from"react-aria";import{styled as s}from"../../styled.js";import{Flex as c}from"../flex/Flex.js";import{Icon as k}from"../icon/Icon.js";import{Table as C}from"../table/Table.js";import{Text as H}from"../text/Text.js";import{useDataTable as N}from"./DataTableContext.js";const z=s(H,{base:["text-grey-600","whitespace-nowrap","hidden","min-[800px]:block"]}),I=s(C.HeaderCell,{base:[],variants:{isSortable:{true:["*:relative","before:absolute","before:bg-primary-100","before:content-['']","before:duration-200","before:ease-in","before:inset-0","before:opacity-0","before:transition-opacity","cursor-pointer","hover:before:opacity-50","relative"]}}}),A={asc:x,desc:h},F=({direction:e})=>o.createElement(k,{is:A[e],size:"sm",className:"stroke-primary-900 absolute left-1"}),K=({header:e,includeTotal:p=!1,totalSuffix:f="items",children:R,className:b,...d})=>{var n,i;const m=e.column.getIsSorted(),{isSortable:t,getRowModel:u}=N(),a=e.column.getCanSort(),g=(i=(n=u())==null?void 0:n.rows)==null?void 0:i.length,{hoverProps:y,isHovered:v}=T({}),S=(r,w)=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),w(r))},l=e.column.getToggleSortingHandler();return o.createElement(I,{isSortable:t&&a,colSpan:e.colSpan,onClick:t&&a&&l?l:void 0,onKeyDown:r=>t&&a&&l&&S(r,l),tabIndex:t&&a?0:-1,...y,className:b,...d},o.createElement(c,{align:"center",gap:1,justify:e.colSpan>1?"center":"flex-start"},E(e.column.columnDef.header,e.getContext()),m&&t&&o.createElement(c,{align:"center",className:D("relative","size-6","ml-2",v?"bg-primary-200":"bg-primary-100","rounded-sm")},o.createElement(F,{direction:m})),p&&o.createElement(z,{size:"sm",weight:"normal"},"(",g," ",f,")")))};export{K as DataTableHeaderCell};
+import{ArrowUp as x,ArrowDown as h}from"@atom-learning/icons";import{flexRender as E}from"@tanstack/react-table";import D from"clsx";import*as t from"react";import{useHover as T}from"react-aria";import{styled as s}from"../../styled.js";import{Flex as c}from"../flex/Flex.js";import{Icon as k}from"../icon/Icon.js";import{Table as C}from"../table/Table.js";import{Text as H}from"../text/Text.js";import{useDataTable as N}from"./DataTableContext.js";const z=s(H,{base:["text-grey-600","whitespace-nowrap","hidden","min-[800px]:block"]}),I=s(C.HeaderCell,{base:[],variants:{isSortable:{true:["*:relative","before:absolute","before:bg-primary-100","before:content-['']","before:duration-200","before:ease-in","before:inset-0","before:opacity-0","before:transition-opacity","cursor-pointer","hover:before:opacity-50","relative"]}}}),A={asc:x,desc:h},F=({direction:e})=>t.createElement(k,{is:A[e],size:"sm",className:"stroke-primary-900 absolute left-1"}),K=({header:e,includeTotal:p=!1,totalSuffix:f="items",children:R,className:b,...d})=>{var n,i;const m=e.column.getIsSorted(),{isSortable:o,getRowModel:u}=N(),a=e.column.getCanSort(),g=(i=(n=u())==null?void 0:n.rows)==null?void 0:i.length,{hoverProps:y,isHovered:v}=T({}),S=(r,w)=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),w(r))},l=e.column.getToggleSortingHandler();return t.createElement(I,{isSortable:o&&a,colSpan:e.colSpan,onClick:o&&a&&l?l:void 0,onKeyDown:r=>o&&a&&l&&S(r,l),tabIndex:o&&a?0:-1,...y,className:b,...d},t.createElement(c,{align:"center",gap:1,justify:e.colSpan>1?"center":"flex-start"},E(e.column.columnDef.header,e.getContext()),m&&o&&t.createElement(c,{align:"center",className:D("relative","size-6","ml-2",v?"bg-primary-200":"bg-primary-100","rounded-sm")},t.createElement(F,{direction:m})),p&&t.createElement(z,{size:"sm",weight:"normal"},"(",g," ",f,")")))};export{K as DataTableHeaderCell};
 //# sourceMappingURL=DataTableHeaderCell.js.map

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+declare const PendingState: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
+    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
+    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement> & {
+    message?: string;
+    size?: "sm" | "md" | "lg";
+}, never> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DataTableLoading: (props: React.ComponentProps<typeof PendingState>) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export declare const DataTableMetaData: ({ copy, ...rest }: {
+    copy?: {
+        sorted_by?: string;
+        ascending?: string;
+        descending?: string;
+        separator?: string;
+    };
+    sortLabel?: string;
+}) => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import type { Row } from '@tanstack/react-table';
+import * as React from 'react';
+import { Table } from '../table';
+export type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
+    row: Row<Record<string, unknown>>;
+    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+};
+export declare const DataTableRow: ({ row, rowAction }: DataTableRowProps) => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+import type { Row } from '@tanstack/react-table';
+import * as React from 'react';
+export declare const DataTableRowSelectionCheckbox: ({ row, checked, onCheckedChange, label }: {
+    row: Row<Record<string, unknown>>;
+    checked: boolean | "indeterminate";
+    onCheckedChange: (value: boolean) => void;
+    label?: string;
+}) => React.ReactElement;