@coveord/plasma-mantine 52.27.4 → 53.0.0

package/dist/esm/components/table/Table.d.ts

@@ -1,3 +1,141 @@
-import { TableType } from './Table.types';
-export declare const Table: TableType;
+import { Factory } from '@mantine/core';
+import { ColumnDef } from '@tanstack/react-table';
+import { ForwardedRef, ReactElement } from 'react';
+import { CustomComponentThemeExtend } from '../../utils';
+import { TableLayouts } from './layouts/TableLayouts';
+import { TableActions, TableActionsStylesNames } from './table-actions/TableActions';
+import { TableAccordionColumn, TableCollapsibleColumn, TableCollapsibleColumnStylesNames } from './table-column/TableCollapsibleColumn';
+import { TableColumnsSelector, TableColumnsSelectorStylesNames } from './table-columns-selector/TableColumnsSelector';
+import { TableConsumer } from './table-consumer/TableConsumer';
+import { TableDateRangePicker, TableDateRangePickerStylesNames } from './table-date-range-picker/TableDateRangePicker';
+import { TableFilter, TableFilterStylesNames } from './table-filter/TableFilter';
+import { TableFooter } from './table-footer/TableFooter';
+import { TableHeader, TableHeaderStylesNames } from './table-header/TableHeader';
+import { TableThStylesNames } from './table-header/Th';
+import { TableLastUpdated, TableLastUpdatedStylesNames } from './table-last-updated/TableLastUpdated';
+import { TableLoading } from './table-loading/TableLoading';
+import { TablePagination } from './table-pagination/TablePagination';
+import { TablePerPage } from './table-per-page/TablePerPage';
+import { TablePredicate, TablePredicateStylesNames } from './table-predicate/TablePredicate';
+import { TableLayout, TableProps } from './Table.types';
+type TableStylesNames = 'root' | 'table' | 'header' | 'body' | TableActionsStylesNames | TableCollapsibleColumnStylesNames | TableDateRangePickerStylesNames | TableFilterStylesNames | TableHeaderStylesNames | TableThStylesNames | TableLastUpdatedStylesNames | TablePredicateStylesNames | TableColumnsSelectorStylesNames;
+export type PlasmaTableFactory = Factory<{
+    props: TableProps<unknown>;
+    ref: HTMLDivElement;
+    stylesNames: TableStylesNames;
+    staticComponents: {
+        Actions: typeof TableActions;
+        Filter: typeof TableFilter;
+        Footer: typeof TableFooter;
+        Header: typeof TableHeader;
+        LastUpdated: typeof TableLastUpdated;
+        Pagination: typeof TablePagination;
+        PerPage: typeof TablePerPage;
+        Predicate: typeof TablePredicate;
+        DateRangePicker: typeof TableDateRangePicker;
+        CollapsibleColumn: typeof TableCollapsibleColumn;
+        ColumnsSelector: typeof TableColumnsSelector;
+        AccordionColumn: typeof TableAccordionColumn;
+        Consumer: typeof TableConsumer;
+        Loading: typeof TableLoading;
+        Layouts: typeof TableLayouts;
+    };
+}>;
+export declare const Table: {
+    <T>(props: TableProps<T> & {
+        ref?: ForwardedRef<HTMLDivElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    Actions: {
+        <T_1>(props: import("./table-actions/TableActions").TableActionsProps<T_1> & {
+            ref?: ForwardedRef<HTMLDivElement>;
+        }): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        extend: CustomComponentThemeExtend<{
+            props: import("./table-actions/TableActions").TableActionsProps<unknown>;
+            ref: HTMLDivElement;
+            stylesNames: TableActionsStylesNames;
+            compound: true;
+        }>;
+    };
+    Filter: import("@mantine/core").MantineComponent<{
+        props: import("./table-filter/TableFilter").TableFilterProps;
+        ref: HTMLDivElement;
+        stylesNames: TableFilterStylesNames;
+        compound: true;
+    }>;
+    Footer: import("react").FunctionComponent<import("./table-footer/TableFooter").TableFooterProps>;
+    Header: import("@mantine/core").MantineComponent<{
+        props: import("./table-header/TableHeader").TableHeaderProps;
+        ref: HTMLDivElement;
+        stylesNames: TableHeaderStylesNames;
+        compound: true;
+    }>;
+    LastUpdated: import("@mantine/core").MantineComponent<{
+        props: import("./table-last-updated/TableLastUpdated").TableLastUpdatedProps;
+        ref: HTMLDivElement;
+        stylesNames: TableLastUpdatedStylesNames;
+        compound: true;
+    }>;
+    Pagination: import("react").FunctionComponent<import("./table-pagination/TablePagination.types").TablePaginationProps>;
+    Predicate: import("react").FunctionComponent<import("./table-predicate/TablePredicate").TablePredicateProps>;
+    PerPage: import("react").FunctionComponent<import("./table-per-page/TablePerPage.types").TablePerPageProps> & {
+        DEFAULT_SIZE: number;
+    };
+    CollapsibleColumn: ColumnDef<unknown>;
+    AccordionColumn: ColumnDef<unknown>;
+    DateRangePicker: import("@mantine/core").MantineComponent<{
+        props: import("./table-date-range-picker/TableDateRangePicker").TableDateRangePickerProps;
+        ref: HTMLDivElement;
+        stylesNames: "dateRangeRoot";
+        compound: true;
+    }>;
+    Consumer: import("react").FunctionComponent<{
+        children: import("react").ReactNode;
+    }>;
+    Loading: import("react").FunctionComponent<import("@mantine/core").SkeletonProps>;
+    ColumnsSelector: import("@mantine/core").MantineComponent<{
+        props: import("./table-columns-selector/TableColumnsSelector").TableColumnsSelectorProps;
+        ref: HTMLDivElement;
+        stylesNames: TableColumnsSelectorStylesNames;
+        compound: true;
+    }>;
+    Layouts: {
+        Rows: import("@mantine/core").MantineComponent<{
+            props: import("./layouts/row-layout/RowLayout").RowLayoutProps;
+            stylesNames: "icon" | "headerRow" | import("./layouts/row-layout/RowLayoutBody").RowLayoutBodyStylesNames;
+            staticComponents: TableLayout;
+        }>;
+    };
+    extend: CustomComponentThemeExtend<{
+        props: TableProps<unknown>;
+        ref: HTMLDivElement;
+        stylesNames: TableStylesNames;
+        staticComponents: {
+            Actions: typeof TableActions;
+            Filter: typeof TableFilter;
+            Footer: typeof TableFooter;
+            Header: typeof TableHeader;
+            LastUpdated: typeof TableLastUpdated;
+            Pagination: typeof TablePagination;
+            PerPage: typeof TablePerPage;
+            Predicate: typeof TablePredicate;
+            DateRangePicker: typeof TableDateRangePicker;
+            CollapsibleColumn: typeof TableCollapsibleColumn;
+            ColumnsSelector: typeof TableColumnsSelector;
+            AccordionColumn: typeof TableAccordionColumn;
+            Consumer: typeof TableConsumer;
+            Loading: typeof TableLoading;
+            Layouts: typeof TableLayouts;
+        };
+    }>;
+};
+export declare const TableComponentsOrder: {
+    MultiSelectInfo: number;
+    Actions: number;
+    Predicate: number;
+    Filter: number;
+    DateRangePicker: number;
+    ColumnsSelector: number;
+    LayoutControl: number;
+};
+export {};
 //# sourceMappingURL=Table.d.ts.map

package/dist/esm/components/table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAwC,SAAS,EAAC,MAAM,eAAe,CAAC;AAkB/E,eAAO,MAAM,KAAK,EAAE,SA0LnB,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/table/Table.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Center, Loader } from '@mantine/core';
+import { Box, Center, Loader, useProps, useStyles } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { useDidUpdate } from '@mantine/hooks';
+import { useDidUpdate, useMergedRef } from '@mantine/hooks';
 import { defaultColumnSizing, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
 import { Children, cloneElement, useCallback, useEffect, useState } from 'react';
 import { useRowSelection } from '../../hooks/useRowSelection';
-import useStyles from './Table.styles';
-import { TableContext } from './TableContext';
+import { identity } from '../../utils';
 import { TableLayouts } from './layouts/TableLayouts';
 import { TableActions } from './table-actions/TableActions';
 import { TableAccordionColumn, TableCollapsibleColumn } from './table-column/TableCollapsibleColumn';
@@ -24,9 +23,30 @@ import { TableLoading } from './table-loading/TableLoading';
 import { TablePagination } from './table-pagination/TablePagination';
 import { TablePerPage } from './table-per-page/TablePerPage';
 import { TablePredicate } from './table-predicate/TablePredicate';
-export const Table = ({ data, getRowId, noDataChildren, getExpandChildren, initialState = {}, columns, layouts = [
-    TableLayouts.Rows
-], onMount, onChange, children, loading = false, doubleClickAction, multiRowSelectionEnabled, disableRowSelection, onRowSelectionChange, additionalRootNodes, classNames, styles, unstyled, options = {} })=>{
+import classes from './Table.module.css';
+import { TableContext, TableStylesProvider } from './TableContext';
+const defaultProps = {
+    layouts: [
+        TableLayouts.Rows
+    ],
+    loading: false,
+    multiRowSelectionEnabled: false,
+    initialState: {},
+    options: {}
+};
+export const Table = (props)=>{
+    const { data, getRowId, noDataChildren, getExpandChildren, initialState, columns, layouts, onMount, onChange, children, loading, doubleClickAction, multiRowSelectionEnabled, disableRowSelection, onRowSelectionChange, additionalRootNodes, options, ref, // Style props
+    style, className, classNames, styles, unstyled, ...others } = useProps('PlasmaTable', defaultProps, props);
+    const getStyles = useStyles({
+        name: 'PlasmaTable',
+        classes,
+        props: props,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled
+    });
     const convertedChildren = Children.toArray(children);
     const header = convertedChildren.find((child)=>child.type === TableHeader);
     const footer = convertedChildren.find((child)=>child.type === TableFooter);
@@ -40,15 +60,9 @@ export const Table = ({ data, getRowId, noDataChildren, getExpandChildren, initi
                 null,
                 null
             ],
-            layout: initialState?.layout ?? layouts[0].name
+            layout: initialState?.layout ?? layouts[0].displayName
         }
     });
-    const { classes } = useStyles(null, {
-        name: 'PlasmaTable',
-        classNames,
-        styles,
-        unstyled
-    });
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {
             pagination: {
@@ -85,6 +99,7 @@ export const Table = ({ data, getRowId, noDataChildren, getExpandChildren, initi
         onRowSelectionChange,
         additionalRootNodes
     });
+    const containerRef = useMergedRef(outsideClickRef, ref);
     const isFiltered = !!state.globalFilter || Object.keys(form.values?.predicates ?? {}).some((predicate)=>!!form.values.predicates[predicate]) || !!form.values.dateRange?.[0] || !!form.values.dateRange?.[1];
     const triggerChange = debounce(()=>onChange?.({
             ...state,
@@ -120,96 +135,113 @@ export const Table = ({ data, getRowId, noDataChildren, getExpandChildren, initi
     }, []);
     if (!data) {
         return /*#__PURE__*/ _jsx(Center, {
-            sx: {
+            style: {
                 flexGrow: 1
             },
             children: /*#__PURE__*/ _jsx(Loader, {})
         });
     }
-    const Layout = layouts.find(({ name })=>name === form.values.layout);
-    const hasRows = table.getRowModel()?.rows.length > 0;
+    const Layout = layouts.find(({ displayName })=>displayName === form.values.layout);
+    const hasRows = table.getRowModel().rows.length > 0;
     return /*#__PURE__*/ _jsx(Box, {
-        ref: outsideClickRef,
-        children: /*#__PURE__*/ _jsxs(TableContext.Provider, {
+        ref: containerRef,
+        ...others,
+        ...getStyles('root'),
+        children: /*#__PURE__*/ _jsx(TableStylesProvider, {
             value: {
-                onChange: triggerChange,
-                state,
-                isFiltered,
-                setState,
-                clearFilters,
-                getSelectedRow,
-                getSelectedRows,
-                clearSelection,
-                form,
-                containerRef: outsideClickRef,
-                multiRowSelectionEnabled,
-                getPageCount: table.getPageCount,
-                disableRowSelection,
-                layouts,
-                getAllColumns
+                getStyles
             },
-            children: [
-                consumer,
-                !hasRows && !isFiltered && !loading ? noDataChildren : /*#__PURE__*/ _jsxs(_Fragment, {
+            children: /*#__PURE__*/ _jsx(TableContext.Provider, {
+                value: {
+                    onChange: triggerChange,
+                    state,
+                    isFiltered,
+                    setState,
+                    clearFilters,
+                    getSelectedRow,
+                    getSelectedRows,
+                    clearSelection,
+                    form,
+                    containerRef: outsideClickRef,
+                    multiRowSelectionEnabled,
+                    getPageCount: table.getPageCount,
+                    getAllColumns,
+                    disableRowSelection,
+                    layouts
+                },
+                children: /*#__PURE__*/ _jsxs(Layout, {
                     children: [
-                        /*#__PURE__*/ _jsxs(Box, {
-                            component: "table",
-                            className: classes.table,
-                            pb: "sm",
+                        consumer,
+                        !hasRows && !isFiltered && !loading ? noDataChildren : /*#__PURE__*/ _jsxs(_Fragment, {
                             children: [
-                                /*#__PURE__*/ _jsxs("thead", {
-                                    className: classes.header,
+                                /*#__PURE__*/ _jsxs(Box, {
+                                    component: "table",
+                                    ...getStyles('table'),
+                                    pb: "sm",
                                     children: [
-                                        !!header ? /*#__PURE__*/ _jsx("tr", {
-                                            children: /*#__PURE__*/ _jsx("th", {
-                                                style: {
-                                                    padding: 0
-                                                },
-                                                colSpan: table.getAllColumns().length,
-                                                children: header
+                                        /*#__PURE__*/ _jsxs("thead", {
+                                            ...getStyles('header'),
+                                            children: [
+                                                !!header ? /*#__PURE__*/ _jsx("tr", {
+                                                    children: /*#__PURE__*/ _jsx("th", {
+                                                        style: {
+                                                            padding: 0
+                                                        },
+                                                        colSpan: table.getAllColumns().length,
+                                                        children: header
+                                                    })
+                                                }) : null,
+                                                /*#__PURE__*/ _jsx(Layout.Header, {
+                                                    table: table,
+                                                    doubleClickAction: doubleClickAction,
+                                                    getExpandChildren: getExpandChildren,
+                                                    loading: loading
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx("tbody", {
+                                            ...getStyles('body'),
+                                            children: hasRows ? /*#__PURE__*/ _jsx(Layout.Body, {
+                                                table: table,
+                                                doubleClickAction: doubleClickAction,
+                                                getExpandChildren: getExpandChildren,
+                                                loading: loading
+                                            }) : /*#__PURE__*/ _jsx("tr", {
+                                                children: /*#__PURE__*/ _jsx("td", {
+                                                    colSpan: table.getAllColumns().length,
+                                                    children: /*#__PURE__*/ _jsx(TableLoading, {
+                                                        visible: loading,
+                                                        children: noDataChildren
+                                                    })
+                                                })
                                             })
-                                        }) : null,
-                                        /*#__PURE__*/ _jsx(Layout.Header, {
-                                            table: table,
-                                            doubleClickAction: doubleClickAction,
-                                            getExpandChildren: getExpandChildren,
-                                            loading: loading
                                         })
                                     ]
                                 }),
-                                /*#__PURE__*/ _jsx("tbody", {
-                                    className: classes.body,
-                                    children: hasRows ? /*#__PURE__*/ _jsx(Layout.Body, {
-                                        table: table,
-                                        doubleClickAction: doubleClickAction,
-                                        getExpandChildren: getExpandChildren,
-                                        loading: loading
-                                    }) : /*#__PURE__*/ _jsx("tr", {
-                                        children: /*#__PURE__*/ _jsx("td", {
-                                            colSpan: table.getAllColumns().length,
-                                            children: /*#__PURE__*/ _jsx(TableLoading, {
-                                                visible: loading,
-                                                children: noDataChildren
-                                            })
-                                        })
-                                    })
-                                })
-                            ]
-                        }),
-                        footer,
-                        lastUpdated ? /*#__PURE__*/ cloneElement(lastUpdated, {
-                            dependencies: [
-                                data,
-                                ...lastUpdated.props.dependencies ?? []
+                                footer,
+                                lastUpdated ? /*#__PURE__*/ cloneElement(lastUpdated, {
+                                    dependencies: [
+                                        data,
+                                        ...lastUpdated.props.dependencies ?? []
+                                    ]
+                                }) : null
                             ]
-                        }) : null
+                        })
                     ]
                 })
-            ]
+            })
         })
     });
 };
-Table.ColumnsSelector = TableColumnsSelector;
+export const TableComponentsOrder = {
+    MultiSelectInfo: 7,
+    Actions: 6,
+    Predicate: 5,
+    Filter: 4,
+    DateRangePicker: 3,
+    ColumnsSelector: 2,
+    LayoutControl: 1
+};
 Table.Actions = TableActions;
 Table.Filter = TableFilter;
 Table.Footer = TableFooter;
@@ -224,6 +256,8 @@ Table.AccordionColumn = TableAccordionColumn;
 Table.DateRangePicker = TableDateRangePicker;
 Table.Consumer = TableConsumer;
 Table.Loading = TableLoading;
+Table.ColumnsSelector = TableColumnsSelector;
 Table.Layouts = TableLayouts;
+Table.extend = identity;
 
 //# sourceMappingURL=Table.js.map

package/dist/esm/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Loader} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    Row,\n    TableState as TanstackTableState,\n    defaultColumnSizing,\n    getCoreRowModel,\n    useReactTable,\n} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Dispatch, ReactElement, cloneElement, useCallback, useEffect, useState} from 'react';\n\nimport {useRowSelection} from '../../hooks/useRowSelection';\nimport useStyles from './Table.styles';\nimport {TableFormType, TableProps, TableState, TableType} from './Table.types';\nimport {TableContext} from './TableContext';\nimport {TableLayouts} from './layouts/TableLayouts';\nimport {TableActions} from './table-actions/TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './table-column/TableCollapsibleColumn';\nimport {TableSelectableColumn} from './table-column/TableSelectableColumn';\nimport {TableColumnsSelector} from './table-columns-selector/TableColumnsSelector';\nimport {TableConsumer} from './table-consumer/TableConsumer';\nimport {TableDateRangePicker} from './table-date-range-picker/TableDateRangePicker';\nimport {TableFilter} from './table-filter/TableFilter';\nimport {TableFooter} from './table-footer/TableFooter';\nimport {TableHeader} from './table-header/TableHeader';\nimport {TableLastUpdated} from './table-last-updated/TableLastUpdated';\nimport {TableLoading} from './table-loading/TableLoading';\nimport {TablePagination} from './table-pagination/TablePagination';\nimport {TablePerPage} from './table-per-page/TablePerPage';\nimport {TablePredicate} from './table-predicate/TablePredicate';\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    layouts = [TableLayouts.Rows],\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\n    disableRowSelection,\n    onRowSelectionChange,\n    additionalRootNodes,\n    classNames,\n    styles,\n    unstyled,\n    options = {},\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n    const consumer = convertedChildren.find((child) => child.type === TableConsumer);\n    const lastUpdated = convertedChildren.find((child) => child.type === TableLastUpdated);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {\n            predicates: initialState?.predicates ?? {},\n            dateRange: initialState?.dateRange ?? [null, null],\n            layout: initialState?.layout ?? layouts[0].name,\n        },\n    });\n    const {classes} = useStyles(null, {name: 'PlasmaTable', classNames, styles, unstyled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {\n            pagination: {pageSize: TablePerPage.DEFAULT_SIZE},\n            globalFilter: '',\n        }),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: options?.getPaginationRowModel === undefined,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n        enableRowSelection: !loading,\n        defaultColumn: {\n            size: undefined,\n            minSize: defaultColumnSizing.minSize,\n            maxSize: defaultColumnSizing.maxSize,\n        },\n        ...options,\n    });\n\n    const getAllColumns = table.getAllFlatColumns;\n\n    const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n    table.setOptions((prev) => ({\n        ...prev,\n        state: state as TanstackTableState,\n        onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n        multiRowSelectionEnabled,\n        onRowSelectionChange,\n        additionalRootNodes,\n    });\n    const isFiltered =\n        !!state.globalFilter ||\n        Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n        !!form.values.dateRange?.[0] ||\n        !!form.values.dateRange?.[1];\n\n    const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n        return () => {\n            triggerChange.cancel();\n        };\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [\n        state.globalFilter,\n        state.pagination,\n        state.sorting,\n        JSON.stringify(form.values.dateRange),\n        JSON.stringify(form.values.predicates),\n    ]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', initialState.predicates ?? {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const Layout = layouts.find(({name}) => name === form.values.layout);\n    const hasRows = table.getRowModel()?.rows.length > 0;\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    isFiltered,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                    getPageCount: table.getPageCount,\n                    disableRowSelection,\n                    layouts,\n                    getAllColumns,\n                }}\n            >\n                {consumer}\n                {!hasRows && !isFiltered && !loading ? (\n                    noDataChildren\n                ) : (\n                    <>\n                        <Box component=\"table\" className={classes.table} pb=\"sm\">\n                            <thead className={classes.header}>\n                                {!!header ? (\n                                    <tr>\n                                        <th style={{padding: 0}} colSpan={table.getAllColumns().length}>\n                                            {header}\n                                        </th>\n                                    </tr>\n                                ) : null}\n                                <Layout.Header\n                                    table={table}\n                                    doubleClickAction={doubleClickAction}\n                                    getExpandChildren={getExpandChildren}\n                                    loading={loading}\n                                />\n                            </thead>\n                            <tbody className={classes.body}>\n                                {hasRows ? (\n                                    <Layout.Body\n                                        table={table}\n                                        doubleClickAction={doubleClickAction}\n                                        getExpandChildren={getExpandChildren}\n                                        loading={loading}\n                                    />\n                                ) : (\n                                    <tr>\n                                        <td colSpan={table.getAllColumns().length}>\n                                            <TableLoading visible={loading}>{noDataChildren}</TableLoading>\n                                        </td>\n                                    </tr>\n                                )}\n                            </tbody>\n                        </Box>\n                        {footer}\n                        {lastUpdated\n                            ? cloneElement(lastUpdated, {\n                                  dependencies: [data, ...(lastUpdated.props.dependencies ?? [])],\n                              })\n                            : null}\n                    </>\n                )}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.ColumnsSelector = TableColumnsSelector;\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LastUpdated = TableLastUpdated;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Consumer = TableConsumer;\nTable.Loading = TableLoading;\nTable.Layouts = TableLayouts;\n"],"names":["Box","Center","Loader","useForm","useDidUpdate","defaultColumnSizing","getCoreRowModel","useReactTable","debounce","defaultsDeep","Children","cloneElement","useCallback","useEffect","useState","useRowSelection","useStyles","TableContext","TableLayouts","TableActions","TableAccordionColumn","TableCollapsibleColumn","TableSelectableColumn","TableColumnsSelector","TableConsumer","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TableLastUpdated","TableLoading","TablePagination","TablePerPage","TablePredicate","Table","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","layouts","Rows","onMount","onChange","children","loading","doubleClickAction","multiRowSelectionEnabled","disableRowSelection","onRowSelectionChange","additionalRootNodes","classNames","styles","unstyled","options","convertedChildren","toArray","header","find","child","type","footer","consumer","lastUpdated","predicates","dateRange","initialStateWithoutForm","form","initialValues","layout","name","classes","table","pagination","pageSize","DEFAULT_SIZE","globalFilter","concat","manualPagination","getPaginationRowModel","undefined","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","defaultColumn","size","minSize","maxSize","getAllColumns","getAllFlatColumns","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","isFiltered","Object","keys","values","some","predicate","triggerChange","cancel","sorting","JSON","stringify","clearFilters","setFieldValue","prevState","sx","flexGrow","Layout","hasRows","getRowModel","rows","length","ref","Provider","value","containerRef","getPageCount","component","className","pb","thead","tr","th","style","padding","colSpan","Header","tbody","body","Body","td","visible","dependencies","props","ColumnsSelector","Actions","Filter","Footer","LastUpdated","Pagination","Predicate","PerPage","CollapsibleColumn","AccordionColumn","DateRangePicker","Consumer","Loading","Layouts"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Factory, Loader, useProps, useStyles} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate, useMergedRef} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    getCoreRowModel,\n    Row,\n    TableState as TanstackTableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, cloneElement, Dispatch, ForwardedRef, ReactElement, useCallback, useEffect, useState} from 'react';\n\nimport {useRowSelection} from '../../hooks/useRowSelection';\nimport {CustomComponentThemeExtend, identity} from '../../utils';\nimport {TableLayouts} from './layouts/TableLayouts';\nimport {TableActions, TableActionsStylesNames} from './table-actions/TableActions';\nimport {\n    TableAccordionColumn,\n    TableCollapsibleColumn,\n    TableCollapsibleColumnStylesNames,\n} from './table-column/TableCollapsibleColumn';\nimport {TableSelectableColumn} from './table-column/TableSelectableColumn';\nimport {TableColumnsSelector, TableColumnsSelectorStylesNames} from './table-columns-selector/TableColumnsSelector';\nimport {TableConsumer} from './table-consumer/TableConsumer';\nimport {TableDateRangePicker, TableDateRangePickerStylesNames} from './table-date-range-picker/TableDateRangePicker';\nimport {TableFilter, TableFilterStylesNames} from './table-filter/TableFilter';\nimport {TableFooter} from './table-footer/TableFooter';\nimport {TableHeader, TableHeaderStylesNames} from './table-header/TableHeader';\nimport {TableThStylesNames} from './table-header/Th';\nimport {TableLastUpdated, TableLastUpdatedStylesNames} from './table-last-updated/TableLastUpdated';\nimport {TableLoading} from './table-loading/TableLoading';\nimport {TablePagination} from './table-pagination/TablePagination';\nimport {TablePerPage} from './table-per-page/TablePerPage';\nimport {TablePredicate, TablePredicateStylesNames} from './table-predicate/TablePredicate';\nimport classes from './Table.module.css';\nimport {TableFormType, TableLayout, TableProps, TableState} from './Table.types';\nimport {TableContext, TableStylesProvider} from './TableContext';\n\ntype TableStylesNames =\n    | 'root'\n    | 'table'\n    | 'header'\n    | 'body'\n    | TableActionsStylesNames\n    | TableCollapsibleColumnStylesNames\n    | TableDateRangePickerStylesNames\n    | TableFilterStylesNames\n    | TableHeaderStylesNames\n    | TableThStylesNames\n    | TableLastUpdatedStylesNames\n    | TablePredicateStylesNames\n    | TableColumnsSelectorStylesNames;\n\nexport type PlasmaTableFactory = Factory<{\n    props: TableProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: TableStylesNames;\n    staticComponents: {\n        Actions: typeof TableActions;\n        Filter: typeof TableFilter;\n        Footer: typeof TableFooter;\n        Header: typeof TableHeader;\n        LastUpdated: typeof TableLastUpdated;\n        Pagination: typeof TablePagination;\n        PerPage: typeof TablePerPage;\n        Predicate: typeof TablePredicate;\n        DateRangePicker: typeof TableDateRangePicker;\n        CollapsibleColumn: typeof TableCollapsibleColumn;\n        ColumnsSelector: typeof TableColumnsSelector;\n        AccordionColumn: typeof TableAccordionColumn;\n        Consumer: typeof TableConsumer;\n        Loading: typeof TableLoading;\n        Layouts: typeof TableLayouts;\n    };\n}>;\n\nconst defaultProps: Partial<TableProps<unknown>> = {\n    layouts: [TableLayouts.Rows as TableLayout],\n    loading: false,\n    multiRowSelectionEnabled: false,\n    initialState: {},\n    options: {},\n};\n\nexport const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {\n    const {\n        data,\n        getRowId,\n        noDataChildren,\n        getExpandChildren,\n        initialState,\n        columns,\n        layouts,\n        onMount,\n        onChange,\n        children,\n        loading,\n        doubleClickAction,\n        multiRowSelectionEnabled,\n        disableRowSelection,\n        onRowSelectionChange,\n        additionalRootNodes,\n        options,\n        ref,\n\n        // Style props\n        style,\n        className,\n        classNames,\n        styles,\n        unstyled,\n        ...others\n    } = useProps('PlasmaTable', defaultProps as TableProps<T>, props);\n\n    const getStyles = useStyles<PlasmaTableFactory>({\n        name: 'PlasmaTable',\n        classes,\n        props: props as TableProps<unknown>,\n        className,\n        style,\n        classNames,\n        styles,\n        unstyled,\n    });\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n    const consumer = convertedChildren.find((child) => child.type === TableConsumer);\n    const lastUpdated = convertedChildren.find((child) => child.type === TableLastUpdated);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {\n            predicates: initialState?.predicates ?? {},\n            dateRange: initialState?.dateRange ?? [null, null],\n            layout: initialState?.layout ?? layouts[0].displayName,\n        },\n    });\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {\n            pagination: {pageSize: TablePerPage.DEFAULT_SIZE},\n            globalFilter: '',\n        }),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: options?.getPaginationRowModel === undefined,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n        enableRowSelection: !loading,\n        defaultColumn: {\n            size: undefined,\n            minSize: defaultColumnSizing.minSize,\n            maxSize: defaultColumnSizing.maxSize,\n        },\n        ...options,\n    });\n\n    const getAllColumns = table.getAllFlatColumns;\n\n    const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n    table.setOptions((prev) => ({\n        ...prev,\n        state: state as TanstackTableState,\n        onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n        multiRowSelectionEnabled,\n        onRowSelectionChange,\n        additionalRootNodes,\n    });\n    const containerRef = useMergedRef(outsideClickRef, ref);\n    const isFiltered =\n        !!state.globalFilter ||\n        Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n        !!form.values.dateRange?.[0] ||\n        !!form.values.dateRange?.[1];\n\n    const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n        return () => {\n            triggerChange.cancel();\n        };\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [\n        state.globalFilter,\n        state.pagination,\n        state.sorting,\n        JSON.stringify(form.values.dateRange),\n        JSON.stringify(form.values.predicates),\n    ]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', initialState.predicates ?? {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    if (!data) {\n        return (\n            <Center style={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const Layout = layouts.find(({displayName}) => displayName === form.values.layout);\n    const hasRows = table.getRowModel().rows.length > 0;\n\n    return (\n        <Box ref={containerRef} {...others} {...getStyles('root')}>\n            <TableStylesProvider value={{getStyles}}>\n                <TableContext.Provider\n                    value={{\n                        onChange: triggerChange,\n                        state,\n                        isFiltered,\n                        setState,\n                        clearFilters,\n                        getSelectedRow,\n                        getSelectedRows,\n                        clearSelection,\n                        form,\n                        containerRef: outsideClickRef,\n                        multiRowSelectionEnabled,\n                        getPageCount: table.getPageCount,\n                        getAllColumns,\n                        disableRowSelection,\n                        layouts,\n                    }}\n                >\n                    <Layout>\n                        {consumer}\n                        {!hasRows && !isFiltered && !loading ? (\n                            noDataChildren\n                        ) : (\n                            <>\n                                <Box component=\"table\" {...getStyles('table')} pb=\"sm\">\n                                    <thead {...getStyles('header')}>\n                                        {!!header ? (\n                                            <tr>\n                                                <th style={{padding: 0}} colSpan={table.getAllColumns().length}>\n                                                    {header}\n                                                </th>\n                                            </tr>\n                                        ) : null}\n                                        <Layout.Header\n                                            table={table}\n                                            doubleClickAction={doubleClickAction}\n                                            getExpandChildren={getExpandChildren}\n                                            loading={loading}\n                                        />\n                                    </thead>\n                                    <tbody {...getStyles('body')}>\n                                        {hasRows ? (\n                                            <Layout.Body\n                                                table={table}\n                                                doubleClickAction={doubleClickAction}\n                                                getExpandChildren={getExpandChildren}\n                                                loading={loading}\n                                            />\n                                        ) : (\n                                            <tr>\n                                                <td colSpan={table.getAllColumns().length}>\n                                                    <TableLoading visible={loading}>{noDataChildren}</TableLoading>\n                                                </td>\n                                            </tr>\n                                        )}\n                                    </tbody>\n                                </Box>\n                                {footer}\n                                {lastUpdated\n                                    ? cloneElement(lastUpdated, {\n                                          dependencies: [data, ...(lastUpdated.props.dependencies ?? [])],\n                                      })\n                                    : null}\n                            </>\n                        )}\n                    </Layout>\n                </TableContext.Provider>\n            </TableStylesProvider>\n        </Box>\n    );\n};\n\nexport const TableComponentsOrder = {\n    MultiSelectInfo: 7,\n    Actions: 6,\n    Predicate: 5,\n    Filter: 4,\n    DateRangePicker: 3,\n    ColumnsSelector: 2,\n    LayoutControl: 1,\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LastUpdated = TableLastUpdated;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Consumer = TableConsumer;\nTable.Loading = TableLoading;\nTable.ColumnsSelector = TableColumnsSelector;\nTable.Layouts = TableLayouts;\n\nTable.extend = identity as CustomComponentThemeExtend<PlasmaTableFactory>;\n"],"names":["Box","Center","Loader","useProps","useStyles","useForm","useDidUpdate","useMergedRef","defaultColumnSizing","getCoreRowModel","useReactTable","debounce","defaultsDeep","Children","cloneElement","useCallback","useEffect","useState","useRowSelection","identity","TableLayouts","TableActions","TableAccordionColumn","TableCollapsibleColumn","TableSelectableColumn","TableColumnsSelector","TableConsumer","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TableLastUpdated","TableLoading","TablePagination","TablePerPage","TablePredicate","classes","TableContext","TableStylesProvider","defaultProps","layouts","Rows","loading","multiRowSelectionEnabled","initialState","options","Table","props","data","getRowId","noDataChildren","getExpandChildren","columns","onMount","onChange","children","doubleClickAction","disableRowSelection","onRowSelectionChange","additionalRootNodes","ref","style","className","classNames","styles","unstyled","others","getStyles","name","convertedChildren","toArray","header","find","child","type","footer","consumer","lastUpdated","predicates","dateRange","initialStateWithoutForm","form","initialValues","layout","displayName","table","pagination","pageSize","DEFAULT_SIZE","globalFilter","concat","manualPagination","getPaginationRowModel","undefined","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","defaultColumn","size","minSize","maxSize","getAllColumns","getAllFlatColumns","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","containerRef","isFiltered","Object","keys","values","some","predicate","triggerChange","cancel","sorting","JSON","stringify","clearFilters","setFieldValue","prevState","flexGrow","Layout","hasRows","getRowModel","rows","length","value","Provider","getPageCount","component","pb","thead","tr","th","padding","colSpan","Header","tbody","Body","td","visible","dependencies","TableComponentsOrder","MultiSelectInfo","Actions","Predicate","Filter","DateRangePicker","ColumnsSelector","LayoutControl","Footer","LastUpdated","Pagination","PerPage","CollapsibleColumn","AccordionColumn","Consumer","Loading","Layouts","extend"],"mappings":";AAAA,SAAQA,GAAG,EAAEC,MAAM,EAAWC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,QAAO,gBAAgB;AAChF,SAAQC,OAAO,QAAO,gBAAgB;AACtC,SAAQC,YAAY,EAAEC,YAAY,QAAO,iBAAiB;AAC1D,SAEIC,mBAAmB,EACnBC,eAAe,EAGfC,aAAa,QACV,wBAAwB;AAC/B,OAAOC,cAAc,kBAAkB;AACvC,OAAOC,kBAAkB,sBAAsB;AAC/C,SAAQC,QAAQ,EAAEC,YAAY,EAAwCC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAErH,SAAQC,eAAe,QAAO,8BAA8B;AAC5D,SAAoCC,QAAQ,QAAO,cAAc;AACjE,SAAQC,YAAY,QAAO,yBAAyB;AACpD,SAAQC,YAAY,QAAgC,+BAA+B;AACnF,SACIC,oBAAoB,EACpBC,sBAAsB,QAEnB,wCAAwC;AAC/C,SAAQC,qBAAqB,QAAO,uCAAuC;AAC3E,SAAQC,oBAAoB,QAAwC,gDAAgD;AACpH,SAAQC,aAAa,QAAO,iCAAiC;AAC7D,SAAQC,oBAAoB,QAAwC,iDAAiD;AACrH,SAAQC,WAAW,QAA+B,6BAA6B;AAC/E,SAAQC,WAAW,QAAO,6BAA6B;AACvD,SAAQC,WAAW,QAA+B,6BAA6B;AAE/E,SAAQC,gBAAgB,QAAoC,wCAAwC;AACpG,SAAQC,YAAY,QAAO,+BAA+B;AAC1D,SAAQC,eAAe,QAAO,qCAAqC;AACnE,SAAQC,YAAY,QAAO,gCAAgC;AAC3D,SAAQC,cAAc,QAAkC,mCAAmC;AAC3F,OAAOC,aAAa,qBAAqB;AAEzC,SAAQC,YAAY,EAAEC,mBAAmB,QAAO,iBAAiB;AAwCjE,MAAMC,eAA6C;IAC/CC,SAAS;QAACpB,aAAaqB,IAAI;KAAgB;IAC3CC,SAAS;IACTC,0BAA0B;IAC1BC,cAAc,CAAC;IACfC,SAAS,CAAC;AACd;AAEA,OAAO,MAAMC,QAAQ,CAAKC;IACtB,MAAM,EACFC,IAAI,EACJC,QAAQ,EACRC,cAAc,EACdC,iBAAiB,EACjBP,YAAY,EACZQ,OAAO,EACPZ,OAAO,EACPa,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRb,OAAO,EACPc,iBAAiB,EACjBb,wBAAwB,EACxBc,mBAAmB,EACnBC,oBAAoB,EACpBC,mBAAmB,EACnBd,OAAO,EACPe,GAAG,EAEH,cAAc;IACdC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACR,GAAGC,QACN,GAAG/D,SAAS,eAAeoC,cAA+BQ;IAE3D,MAAMoB,YAAY/D,UAA8B;QAC5CgE,MAAM;QACNhC;QACAW,OAAOA;QACPe;QACAD;QACAE;QACAC;QACAC;IACJ;IAEA,MAAMI,oBAAoBxD,SAASyD,OAAO,CAACf;IAC3C,MAAMgB,SAASF,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK5C;IAChE,MAAM6C,SAASN,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK7C;IAChE,MAAM+C,WAAWP,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAKhD;IAClE,MAAMmD,cAAcR,kBAAkBG,IAAI,CAAC,CAACC,QAAUA,MAAMC,IAAI,KAAK3C;IAErE,MAAM,EAAC+C,UAAU,EAAEC,SAAS,EAAE,GAAGC,yBAAwB,GAAGpC;IAC5D,MAAMqC,OAAO5E,QAAuB;QAChC6E,eAAe;YACXJ,YAAYlC,cAAckC,cAAc,CAAC;YACzCC,WAAWnC,cAAcmC,aAAa;gBAAC;gBAAM;aAAK;YAClDI,QAAQvC,cAAcuC,UAAU3C,OAAO,CAAC,EAAE,CAAC4C,WAAW;QAC1D;IACJ;IAEA,MAAMC,QAAQ3E,cAAc;QACxBkC,cAAchC,aAAaoE,yBAAyB;YAChDM,YAAY;gBAACC,UAAUrD,aAAasD,YAAY;YAAA;YAChDC,cAAc;QAClB;QACAzC;QACAI,SAAST,2BAA2B;YAACnB;SAAsC,CAACkE,MAAM,CAACtC,WAAWA;QAC9F3C,iBAAiBA;QACjBkF,kBAAkB9C,SAAS+C,0BAA0BC;QACrDC,yBAAyB,CAAC,CAACnD;QAC3BM;QACA8C,iBAAiB,CAACC,MAAgB,CAAC,CAAC7C,oBAAoB6C,IAAIC,QAAQ,KAAK;QACzEC,oBAAoB,CAACxD;QACrByD,eAAe;YACXC,MAAMP;YACNQ,SAAS7F,oBAAoB6F,OAAO;YACpCC,SAAS9F,oBAAoB8F,OAAO;QACxC;QACA,GAAGzD,OAAO;IACd;IAEA,MAAM0D,gBAAgBlB,MAAMmB,iBAAiB;IAE7C,MAAM,CAACC,OAAOC,SAAS,GAAGzF,SAAwBoE,MAAMzC,YAAY;IACpEyC,MAAMsB,UAAU,CAAC,CAACC,OAAU,CAAA;YACxB,GAAGA,IAAI;YACPH,OAAOA;YACPI,eAAeH;QACnB,CAAA;IACA,MAAM,EAACI,cAAc,EAAEC,cAAc,EAAEC,eAAe,EAAEC,eAAe,EAAC,GAAG/F,gBAAgBmE,OAAO;QAC9F1C;QACAe;QACAC;IACJ;IACA,MAAMuD,eAAe3G,aAAa0G,iBAAiBrD;IACnD,MAAMuD,aACF,CAAC,CAACV,MAAMhB,YAAY,IACpB2B,OAAOC,IAAI,CAACpC,KAAKqC,MAAM,EAAExC,cAAc,CAAC,GAAGyC,IAAI,CAAC,CAACC,YAAc,CAAC,CAACvC,KAAKqC,MAAM,CAACxC,UAAU,CAAC0C,UAAU,KAClG,CAAC,CAACvC,KAAKqC,MAAM,CAACvC,SAAS,EAAE,CAAC,EAAE,IAC5B,CAAC,CAACE,KAAKqC,MAAM,CAACvC,SAAS,EAAE,CAAC,EAAE;IAEhC,MAAM0C,gBAAgB9G,SAAS,IAAM2C,WAAW;YAAC,GAAGmD,KAAK;YAAE,GAAGxB,KAAKqC,MAAM;QAAA,IAAI;IAE7EtG,UAAU;QACNqC,UAAU;YAAC,GAAGoD,KAAK;YAAE,GAAGxB,KAAKqC,MAAM;QAAA;QACnC,OAAO;YACHG,cAAcC,MAAM;QACxB;IACJ,GAAG,EAAE;IAELpH,aAAa;QACTmH;QACA,IAAI,CAAC9E,0BAA0B;YAC3BmE;QACJ;IACJ,GAAG;QACCL,MAAMhB,YAAY;QAClBgB,MAAMnB,UAAU;QAChBmB,MAAMkB,OAAO;QACbC,KAAKC,SAAS,CAAC5C,KAAKqC,MAAM,CAACvC,SAAS;QACpC6C,KAAKC,SAAS,CAAC5C,KAAKqC,MAAM,CAACxC,UAAU;KACxC;IAED,MAAMgD,eAAe/G,YAAY;QAC7BkE,KAAK8C,aAAa,CAAC,cAAcnF,aAAakC,UAAU,IAAI,CAAC;QAC7D4B,SAAS,CAACsB,YAAe,CAAA;gBAAC,GAAGA,SAAS;gBAAEvC,cAAc;YAAE,CAAA;IAC5D,GAAG,EAAE;IAEL,IAAI,CAACzC,MAAM;QACP,qBACI,KAAC/C;YAAO4D,OAAO;gBAACoE,UAAU;YAAC;sBACvB,cAAA,KAAC/H;;IAGb;IAEA,MAAMgI,SAAS1F,QAAQgC,IAAI,CAAC,CAAC,EAACY,WAAW,EAAC,GAAKA,gBAAgBH,KAAKqC,MAAM,CAACnC,MAAM;IACjF,MAAMgD,UAAU9C,MAAM+C,WAAW,GAAGC,IAAI,CAACC,MAAM,GAAG;IAElD,qBACI,KAACtI;QAAI4D,KAAKsD;QAAe,GAAGhD,MAAM;QAAG,GAAGC,UAAU,OAAO;kBACrD,cAAA,KAAC7B;YAAoBiG,OAAO;gBAACpE;YAAS;sBAClC,cAAA,KAAC9B,aAAamG,QAAQ;gBAClBD,OAAO;oBACHjF,UAAUmE;oBACVhB;oBACAU;oBACAT;oBACAoB;oBACAf;oBACAC;oBACAF;oBACA7B;oBACAiC,cAAcD;oBACdtE;oBACA8F,cAAcpD,MAAMoD,YAAY;oBAChClC;oBACA9C;oBACAjB;gBACJ;0BAEA,cAAA,MAAC0F;;wBACItD;wBACA,CAACuD,WAAW,CAAChB,cAAc,CAACzE,UACzBQ,+BAEA;;8CACI,MAAClD;oCAAI0I,WAAU;oCAAS,GAAGvE,UAAU,QAAQ;oCAAEwE,IAAG;;sDAC9C,MAACC;4CAAO,GAAGzE,UAAU,SAAS;;gDACzB,CAAC,CAACI,uBACC,KAACsE;8DACG,cAAA,KAACC;wDAAGjF,OAAO;4DAACkF,SAAS;wDAAC;wDAAGC,SAAS3D,MAAMkB,aAAa,GAAG+B,MAAM;kEACzD/D;;qDAGT;8DACJ,KAAC2D,OAAOe,MAAM;oDACV5D,OAAOA;oDACP7B,mBAAmBA;oDACnBL,mBAAmBA;oDACnBT,SAASA;;;;sDAGjB,KAACwG;4CAAO,GAAG/E,UAAU,OAAO;sDACvBgE,wBACG,KAACD,OAAOiB,IAAI;gDACR9D,OAAOA;gDACP7B,mBAAmBA;gDACnBL,mBAAmBA;gDACnBT,SAASA;+DAGb,KAACmG;0DACG,cAAA,KAACO;oDAAGJ,SAAS3D,MAAMkB,aAAa,GAAG+B,MAAM;8DACrC,cAAA,KAACtG;wDAAaqH,SAAS3G;kEAAUQ;;;;;;;gCAMpDyB;gCACAE,4BACK/D,aAAa+D,aAAa;oCACtByE,cAAc;wCAACtG;2CAAU6B,YAAY9B,KAAK,CAACuG,YAAY,IAAI,EAAE;qCAAE;gCACnE,KACA;;;;;;;;AAQtC,EAAE;AAEF,OAAO,MAAMC,uBAAuB;IAChCC,iBAAiB;IACjBC,SAAS;IACTC,WAAW;IACXC,QAAQ;IACRC,iBAAiB;IACjBC,iBAAiB;IACjBC,eAAe;AACnB,EAAE;AAEFhH,MAAM2G,OAAO,GAAGpI;AAChByB,MAAM6G,MAAM,GAAG/H;AACfkB,MAAMiH,MAAM,GAAGlI;AACfiB,MAAMmG,MAAM,GAAGnH;AACfgB,MAAMkH,WAAW,GAAGjI;AACpBe,MAAMmH,UAAU,GAAGhI;AACnBa,MAAM4G,SAAS,GAAGvH;AAClBW,MAAMoH,OAAO,GAAGhI;AAChBY,MAAM4G,SAAS,GAAGvH;AAClBW,MAAMqH,iBAAiB,GAAG5I;AAC1BuB,MAAMsH,eAAe,GAAG9I;AACxBwB,MAAM8G,eAAe,GAAGjI;AACxBmB,MAAMuH,QAAQ,GAAG3I;AACjBoB,MAAMwH,OAAO,GAAGtI;AAChBc,MAAM+G,eAAe,GAAGpI;AACxBqB,MAAMyH,OAAO,GAAGnJ;AAEhB0B,MAAM0H,MAAM,GAAGrJ"}

package/dist/esm/components/table/Table.module.css

@@ -0,0 +1,93 @@
+.table {
+    width: 100%;
+}
+
+.header {
+    position: sticky;
+    top: 0;
+    transition: box-shadow 150ms ease;
+    z-index: 1;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-bottom: 1px solid var(--mantine-color-gray-3);
+    }
+}
+
+/* Table.Actions */
+.actionsGroup {
+    display: inline-flex;
+}
+
+/* Table.Filter */
+.filterWrapper {
+    width: 20rem;
+}
+.filterEmpty {
+    color: var(--mantine-color-gray-5);
+}
+
+/* Table.Header */
+.headerRoot {
+    border-bottom: 1px solid var(--mantine-color-gray-3);
+    background-color: var(--mantine-color-gray-1);
+    padding-left: var(--mantine-spacing-xl);
+    padding-right: var(--mantine-spacing-lg);
+    position: relative;
+}
+
+.headerGridInner {
+    flex-direction: row-reverse;
+}
+
+.headerCol {
+    display: flex;
+}
+
+.th {
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+    vertical-align: middle;
+    white-space: nowrap;
+    text-align: left;
+    color: var(--mantine-color-gray-6);
+    height: var(--mantine-spacing-xl);
+    font-weight: 500;
+    font-size: var(--mantine-font-size-xs);
+
+    &:first-of-type {
+        padding-left: var(--mantine-spacing-xl);
+    }
+
+    &:last-of-type {
+        padding-right: var(--mantine-spacing-xl);
+    }
+
+    background-color: var(--mantine-color-gray-0);
+
+    &[data-control='true'] {
+        @mixin hover {
+            background-color: var(--mantine-color-gray-1);
+        }
+    }
+}
+
+.lastUpdatedRoot {
+    min-height: 98px;
+}
+.lastUpdatedLabel {
+    color: var(--mantine-color-gray-6);
+}
+
+/* Table.Predicate */
+.predicateLabel {
+    font-size: var(--mantine-font-size-sm);
+}
+
+/* Table.ColumnsSelector */
+.columnSelector {
+    max-width: 100%;
+}