@coveord/plasma-mantine 49.1.2 → 49.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n    hasHeader: boolean;\n    multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark'\n            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n            : theme.colors[theme.primaryColor][0];\n    return {\n        table: {\n            width: '100%',\n            '& td:first-of-type, th:first-of-type > *': {\n                paddingLeft: theme.spacing.xl,\n            },\n            '& tbody td': {\n                verticalAlign: 'top',\n            },\n        },\n\n        header: {\n            position: 'sticky',\n            top: hasHeader ? 69 : 0,\n            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n            transition: 'box-shadow 150ms ease',\n            zIndex: 12, // skeleton is 11\n\n            '&::after': {\n                content: '\"\"',\n                position: 'absolute',\n                left: 0,\n                right: 0,\n                bottom: 0,\n                borderBottom: `1px solid ${theme.colors.gray[2]}`,\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\ninterface TableProps<T> {\n    /**\n     * Data to display in the table\n     */\n    data: T[];\n    /**\n     * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     */\n    getRowId?: CoreOptions<T>['getRowId'];\n    /**\n     * Columns to display in the table.\n     *\n     * @see https://tanstack.com/table/v8/docs/guide/column-defs\n     */\n    columns: Array<ColumnDef<T>>;\n    /**\n     * Function called when the table mounts\n     *\n     * @param state the state of the table\n     */\n    onMount?: onTableChangeEvent;\n    /**\n     * Function called when the table should update\n     *\n     * @param state the state of the table\n     */\n    onChange?: onTableChangeEvent;\n    /**\n     * Function that generates the expandable content of a row\n     * Return null for rows that don't need to be expandable\n     *\n     * @param datum the row for which the children should be generated.\n     */\n    getExpandChildren?: (datum: T) => ReactNode;\n    /**\n     * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n     */\n    noDataChildren?: ReactNode;\n    /**\n     * Whether the table is loading or not\n     *\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n     *\n     * @example\n     * <Table ...>\n     *     <Table.Header>\n     *         <div>Hello</div>\n     *     </Table.Header>\n     * </Table>\n     */\n    children?: ReactNode;\n\n    /**\n     * Initial state of the table\n     */\n    initialState?: InitialTableState & Partial<TableFormType>;\n    /**\n     * Action passed when user double clicks on a row\n     */\n    doubleClickAction?: (datum: T) => void;\n    /**\n     * Whether the user can select multiple rows in order to perform actions in bulk\n     *\n     * @default false\n     */\n    multiRowSelectionEnabled?: boolean;\n}\n\ninterface TableType {\n    <T>(props: TableProps<T>): ReactElement;\n    Actions: typeof TableActions;\n    Filter: typeof TableFilter;\n    Footer: typeof TableFooter;\n    Header: typeof TableHeader;\n    Pagination: typeof TablePagination;\n    PerPage: typeof TablePerPage;\n    Predicate: typeof TablePredicate;\n    DateRangePicker: typeof TableDateRangePicker;\n    CollapsibleColumn: typeof TableCollapsibleColumn;\n}\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\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\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n    const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: true,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n    });\n    const [state, setState] = useState<TableState>(table.initialState);\n    table.setOptions((prev) => ({\n        ...prev,\n        state,\n        onStateChange: setState,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n    const triggerChange = () => onChange?.({...state, ...form.values});\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    const outsideClickRef = useClickOutside(() => {\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    });\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => row.toggleSelected()}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n                    aria-selected={row.getIsSelected()}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </Skeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={columns.length + 1}\n                            style={{\n                                padding: 0,\n                                borderTop: row.getIsExpanded() ? undefined : 'none',\n                                borderBottom: row.getIsExpanded() ? undefined : 'none',\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                }}\n            >\n                {header}\n                <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                    <thead className={classes.header}>\n                        {table.getHeaderGroups().map((headerGroup) => (\n                            <tr key={headerGroup.id}>\n                                {headerGroup.headers.map((columnHeader) => (\n                                    <Th key={columnHeader.id} header={columnHeader} />\n                                ))}\n                            </tr>\n                        ))}\n                    </thead>\n                    <tbody>\n                        {rows.length ? (\n                            rows\n                        ) : (\n                            <tr>\n                                <td colSpan={columns.length}>{noDataChildren}</td>\n                            </tr>\n                        )}\n                    </tbody>\n                </MantineTable>\n                {footer}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Box","Center","Collapse","createStyles","Loader","Skeleton","Table","MantineTable","useForm","useClickOutside","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","TableActions","TableCollapsibleColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableSelectableColumn","Th","useRowSelection","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","toArray","find","child","type","footer","predicates","dateRange","initialStateWithoutForm","form","initialValues","cx","classes","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","enableMultiRowSelection","getRowCanExpand","original","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","globalFilter","sorting","clearFilters","setFieldValue","prevState","outsideClickRef","sx","flexGrow","rows","getRowModel","map","rowChildren","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","td","style","id","visible","borderRadius","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","in","px","py","ref","Provider","value","containerRef","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","DateRangePicker"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn, TableAccordionColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n    hasHeader: boolean;\n    multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark'\n            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n            : theme.colors[theme.primaryColor][0];\n    return {\n        table: {\n            width: '100%',\n            '& td:first-of-type, th:first-of-type > *': {\n                paddingLeft: theme.spacing.xl,\n            },\n            '& tbody td': {\n                verticalAlign: 'top',\n            },\n        },\n\n        header: {\n            position: 'sticky',\n            top: hasHeader ? 69 : 0,\n            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n            transition: 'box-shadow 150ms ease',\n            zIndex: 12, // skeleton is 11\n\n            '&::after': {\n                content: '\"\"',\n                position: 'absolute',\n                left: 0,\n                right: 0,\n                bottom: 0,\n                borderBottom: `1px solid ${theme.colors.gray[2]}`,\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\nexport interface TableProps<T> {\n    /**\n     * Data to display in the table\n     */\n    data: T[];\n    /**\n     * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     */\n    getRowId?: CoreOptions<T>['getRowId'];\n    /**\n     * Columns to display in the table.\n     *\n     * @see https://tanstack.com/table/v8/docs/guide/column-defs\n     */\n    columns: Array<ColumnDef<T>>;\n    /**\n     * Function called when the table mounts\n     *\n     * @param state the state of the table\n     */\n    onMount?: onTableChangeEvent;\n    /**\n     * Function called when the table should update\n     *\n     * @param state the state of the table\n     */\n    onChange?: onTableChangeEvent;\n    /**\n     * Function that generates the expandable content of a row\n     * Return null for rows that don't need to be expandable\n     *\n     * @param datum the row for which the children should be generated.\n     */\n    getExpandChildren?: (datum: T) => ReactNode;\n    /**\n     * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n     */\n    noDataChildren?: ReactNode;\n    /**\n     * Whether the table is loading or not\n     *\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n     *\n     * @example\n     * <Table ...>\n     *     <Table.Header>\n     *         <div>Hello</div>\n     *     </Table.Header>\n     * </Table>\n     */\n    children?: ReactNode;\n\n    /**\n     * Initial state of the table\n     */\n    initialState?: InitialTableState & Partial<TableFormType>;\n    /**\n     * Action passed when user double clicks on a row\n     */\n    doubleClickAction?: (datum: T) => void;\n    /**\n     * Whether the user can select multiple rows in order to perform actions in bulk\n     *\n     * @default false\n     */\n    multiRowSelectionEnabled?: boolean;\n\n    options?: Omit<\n        Partial<TableOptions<T>>,\n        | 'initialState'\n        | 'data'\n        | 'columns'\n        | 'manualPagination'\n        | 'enableMultiRowSelection'\n        | 'getRowId'\n        | 'getRowCanExpand'\n    >;\n}\n\ninterface TableType {\n    <T>(props: TableProps<T>): ReactElement;\n    Actions: typeof TableActions;\n    Filter: typeof TableFilter;\n    Footer: typeof TableFooter;\n    Header: typeof TableHeader;\n    Pagination: typeof TablePagination;\n    PerPage: typeof TablePerPage;\n    Predicate: typeof TablePredicate;\n    DateRangePicker: typeof TableDateRangePicker;\n    CollapsibleColumn: typeof TableCollapsibleColumn;\n    AccordionColumn: typeof TableAccordionColumn;\n}\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\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\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n    const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\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        ...options,\n    });\n    const [state, setState] = useState<TableState>(table.initialState);\n    table.setOptions((prev) => ({\n        ...prev,\n        state,\n        onStateChange: setState,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n    const triggerChange = () => onChange?.({...state, ...form.values});\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    const outsideClickRef = useClickOutside(() => {\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    });\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => row.toggleSelected()}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n                    aria-selected={row.getIsSelected()}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </Skeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={columns.length + 1}\n                            style={{\n                                padding: 0,\n                                borderTop: row.getIsExpanded() ? undefined : 'none',\n                                borderBottom: row.getIsExpanded() ? undefined : 'none',\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                    getPageCount: table.getPageCount,\n                }}\n            >\n                {header}\n                <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                    <thead className={classes.header}>\n                        {table.getHeaderGroups().map((headerGroup) => (\n                            <tr key={headerGroup.id}>\n                                {headerGroup.headers.map((columnHeader) => (\n                                    <Th key={columnHeader.id} header={columnHeader} />\n                                ))}\n                            </tr>\n                        ))}\n                    </thead>\n                    <tbody>\n                        {rows.length ? (\n                            rows\n                        ) : (\n                            <tr>\n                                <td colSpan={columns.length}>{noDataChildren}</td>\n                            </tr>\n                        )}\n                    </tbody>\n                </MantineTable>\n                {footer}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Box","Center","Collapse","createStyles","Loader","Skeleton","Table","MantineTable","useForm","useClickOutside","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","TableActions","TableCollapsibleColumn","TableAccordionColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableSelectableColumn","Th","useRowSelection","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","options","convertedChildren","toArray","find","child","type","footer","predicates","dateRange","initialStateWithoutForm","form","initialValues","cx","classes","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","original","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","globalFilter","sorting","clearFilters","setFieldValue","prevState","outsideClickRef","sx","flexGrow","rows","getRowModel","map","rowChildren","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","td","style","id","visible","borderRadius","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","in","px","py","ref","Provider","value","containerRef","getPageCount","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","AccordionColumn","DateRangePicker"],"mappings":"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"}

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

@@ -1,26 +1,53 @@
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowHeadDownSize24Px, ArrowHeadUpSize24Px } from "@coveord/plasma-react-icons";
 import { ActionIcon } from "@mantine/core";
-/**
- * Generic column to use when your table needs collapsible rows
- */ export var TableCollapsibleColumn = {
+var defaultProps = {
     id: "collapsible",
     enableSorting: false,
     header: "",
-    size: 62,
+    size: 62
+};
+/**
+ * Generic column to use when your table needs collapsible rows
+ */ export var TableCollapsibleColumn = _object_spread_props(_object_spread({}, defaultProps), {
+    cell: function(info) {
+        return /*#__PURE__*/ _jsx(CollapsibleIcon, {
+            info: info
+        });
+    }
+});
+/**
+ * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)
+ */ export var TableAccordionColumn = _object_spread_props(_object_spread({}, defaultProps), {
     cell: function(info) {
-        var handler = info.row.getToggleExpandedHandler();
-        var onClick = function(e) {
-            e.stopPropagation();
-            handler();
+        var onToggle = function() {
+            // close all other rows when the current row not is expanded
+            if (!info.row.getIsExpanded()) {
+                info.table.toggleAllRowsExpanded(false);
+            }
         };
-        return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(ActionIcon, {
-            onClick: onClick,
-            variant: "subtle",
-            radius: "sm",
-            children: info.row.getIsExpanded() ? /*#__PURE__*/ _jsx(ArrowHeadUpSize24Px, {}) : /*#__PURE__*/ _jsx(ArrowHeadDownSize24Px, {})
-        }) : null;
+        return /*#__PURE__*/ _jsx(CollapsibleIcon, {
+            onToggle: onToggle,
+            info: info
+        });
     }
+});
+var CollapsibleIcon = function(param) {
+    var info = param.info, onToggle = param.onToggle;
+    var handler = info.row.getToggleExpandedHandler();
+    var onClick = function(e) {
+        e.stopPropagation();
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(e);
+        handler();
+    };
+    return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(ActionIcon, {
+        onClick: onClick,
+        variant: "subtle",
+        radius: "sm",
+        children: info.row.getIsExpanded() ? /*#__PURE__*/ _jsx(ArrowHeadUpSize24Px, {}) : /*#__PURE__*/ _jsx(ArrowHeadDownSize24Px, {})
+    }) : null;
 };
 
 //# sourceMappingURL=TableCollapsibleColumn.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent} from 'react';\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    size: 62,\n    cell: (info) => {\n        const handler = info.row.getToggleExpandedHandler();\n        const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n            handler();\n        };\n\n        return info.row.getCanExpand() ? (\n            <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n                {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n            </ActionIcon>\n        ) : null;\n    },\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","ActionIcon","TableCollapsibleColumn","id","enableSorting","header","size","cell","info","handler","row","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","radius","getIsExpanded"],"mappings":"AAAA;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,UAAU,QAAO,gBAAgB;AAIzC;;CAEC,GACD,OAAO,IAAMC,yBAA6C;IACtDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ;IACRC,MAAM;IACNC,MAAM,SAACC,MAAS;QACZ,IAAMC,UAAUD,KAAKE,GAAG,CAACC,wBAAwB;QACjD,IAAMC,UAAU,SAACC,GAA0C;YACvDA,EAAEC,eAAe;YACjBL;QACJ;QAEA,OAAOD,KAAKE,GAAG,CAACK,YAAY,mBACxB,KAACd;YAAWW,SAASA;YAASI,SAAQ;YAASC,QAAO;sBACjDT,KAAKE,GAAG,CAACQ,aAAa,mBAAK,KAAClB,yCAAyB,KAACD,0BAAwB;aAEnF,IAAI;IACZ;AACJ,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';\n\nconst defaultProps: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    size: 62,\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    ...defaultProps,\n    cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n    ...defaultProps,\n    cell: (info) => {\n        const onToggle = () => {\n            // close all other rows when the current row not is expanded\n            if (!info.row.getIsExpanded()) {\n                info.table.toggleAllRowsExpanded(false);\n            }\n        };\n\n        return <CollapsibleIcon onToggle={onToggle} info={info} />;\n    },\n};\n\nconst CollapsibleIcon: FunctionComponent<{\n    info: CellContext<unknown, unknown>;\n    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n}> = ({info, onToggle}) => {\n    const handler = info.row.getToggleExpandedHandler();\n    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        onToggle?.(e);\n        handler();\n    };\n    return info.row.getCanExpand() ? (\n        <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n            {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n        </ActionIcon>\n    ) : null;\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","ActionIcon","defaultProps","id","enableSorting","header","size","TableCollapsibleColumn","cell","info","CollapsibleIcon","TableAccordionColumn","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","radius"],"mappings":"AAAA;;;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,UAAU,QAAO,gBAAgB;AAIzC,IAAMC,eAAmC;IACrCC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ;IACRC,MAAM;AACV;AAEA;;CAEC,GACD,OAAO,IAAMC,yBAA6C,wCACnDL;IACHM,MAAM,SAACC;6BAAS,KAACC;YAAgBD,MAAMA;;;GACzC;AAEF;;CAEC,GACD,OAAO,IAAME,uBAA2C,wCACjDT;IACHM,MAAM,SAACC,MAAS;QACZ,IAAMG,WAAW,WAAM;YACnB,4DAA4D;YAC5D,IAAI,CAACH,KAAKI,GAAG,CAACC,aAAa,IAAI;gBAC3BL,KAAKM,KAAK,CAACC,qBAAqB,CAAC,KAAK;YAC1C,CAAC;QACL;QAEA,qBAAO,KAACN;YAAgBE,UAAUA;YAAUH,MAAMA;;IACtD;GACF;AAEF,IAAMC,kBAGD,gBAAsB;QAApBD,aAAAA,MAAMG,iBAAAA;IACT,IAAMK,UAAUR,KAAKI,GAAG,CAACK,wBAAwB;IACjD,IAAMC,UAAU,SAACC,GAA0C;QACvDA,EAAEC,eAAe;QACjBT,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWQ;QACXH;IACJ;IACA,OAAOR,KAAKI,GAAG,CAACS,YAAY,mBACxB,KAACrB;QAAWkB,SAASA;QAASI,SAAQ;QAASC,QAAO;kBACjDf,KAAKI,GAAG,CAACC,aAAa,mBAAK,KAACd,yCAAyB,KAACD,0BAAwB;SAEnF,IAAI;AACZ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {TableState} from '@tanstack/react-table';\nimport {createContext, Dispatch, RefObject} from 'react';\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n    /**\n     * Object containing the table predicates and their selected values\n     *\n     * @example {type: \"LONG\", origin: \"system\"}\n     */\n    predicates: Record<string, string>;\n    /**\n     * Selected date range in the table\n     *\n     * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]\n     */\n    dateRange: DateRangePickerValue;\n};\n\ntype TableContextType = {\n    /**\n     * Function to call when the table needs an update\n     */\n    onChange: () => void;\n    /**\n     * Internal state of the table\n     *\n     * @see https://tanstack.com/table/v8/docs/api/core/table#state\n     */\n    state: TableState;\n    /**\n     * Function to update the table state\n     */\n    setState: Dispatch<(prevState: TableState) => TableState>;\n    /**\n     * Function that clears the filter and predicates\n     */\n    clearFilters: () => void;\n    /**\n     * Function that returns the selected row if any.\n     */\n    getSelectedRow: () => any | null;\n    /**\n     * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.\n     */\n    getSelectedRows: () => any[];\n    /**\n     * Function that clear the selected row\n     */\n    clearSelection: () => void;\n    /**\n     * Form used to handle predicates and dateRange\n     */\n    form: UseFormReturnType<TableFormType>;\n    /**\n     * Table container ref\n     */\n    containerRef: RefObject<HTMLDivElement>;\n    multiRowSelectionEnabled: boolean;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":["createContext","TableContext"],"mappings":"AAGA,SAAQA,aAAa,QAA4B,QAAQ;AA6DzD,OAAO,IAAMC,6BAAeD,cAAuC,IAAI,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {TableState} from '@tanstack/react-table';\nimport {createContext, Dispatch, RefObject} from 'react';\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n    /**\n     * Object containing the table predicates and their selected values\n     *\n     * @example {type: \"LONG\", origin: \"system\"}\n     */\n    predicates: Record<string, string>;\n    /**\n     * Selected date range in the table\n     *\n     * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]\n     */\n    dateRange: DateRangePickerValue;\n};\n\ntype TableContextType = {\n    /**\n     * Function to call when the table needs an update\n     */\n    onChange: () => void;\n    /**\n     * Internal state of the table\n     *\n     * @see https://tanstack.com/table/v8/docs/api/core/table#state\n     */\n    state: TableState;\n    /**\n     * Function to update the table state\n     */\n    setState: Dispatch<(prevState: TableState) => TableState>;\n    /**\n     * Function that clears the filter and predicates\n     */\n    clearFilters: () => void;\n    /**\n     * Function that returns the selected row if any.\n     */\n    getSelectedRow: () => any | null;\n    /**\n     * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.\n     */\n    getSelectedRows: () => any[];\n    /**\n     * Function that clear the selected row\n     */\n    clearSelection: () => void;\n    /**\n     * Form used to handle predicates and dateRange\n     */\n    form: UseFormReturnType<TableFormType>;\n    /**\n     * Table container ref\n     */\n    containerRef: RefObject<HTMLDivElement>;\n    multiRowSelectionEnabled: boolean;\n\n    /**\n     * Function that returns the number of pages\n     */\n    getPageCount: () => number;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":["createContext","TableContext"],"mappings":"AAGA,SAAQA,aAAa,QAA4B,QAAQ;AAkEzD,OAAO,IAAMC,6BAAeD,cAAuC,IAAI,EAAE"}

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

@@ -5,7 +5,7 @@ import { Pagination } from "@mantine/core";
 import { useTable } from "./useTable";
 export var TablePagination = function(param) {
     var totalPages = param.totalPages;
-    var _useTable = useTable(), state = _useTable.state, setState = _useTable.setState, containerRef = _useTable.containerRef;
+    var _useTable = useTable(), state = _useTable.state, setState = _useTable.setState, containerRef = _useTable.containerRef, getPageCount = _useTable.getPageCount;
     var updatePage = function(newPage) {
         setState(function(prevState) {
             return _object_spread_props(_object_spread({}, prevState), {
@@ -18,10 +18,11 @@ export var TablePagination = function(param) {
             behavior: "smooth"
         });
     };
+    var total = totalPages === null ? getPageCount() : totalPages;
     return /*#__PURE__*/ _jsx(Pagination, {
         page: state.pagination.pageIndex + 1,
         onChange: updatePage,
-        total: totalPages,
+        total: total,
         boundaries: 0,
         size: "md",
         getItemAriaLabel: function(label) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\ninterface TablePaginationProps {\n    /**\n     * The total number of page\n     */\n    totalPages: number;\n}\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {\n    const {state, setState, containerRef} = useTable();\n    const updatePage = (newPage: number) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageIndex: newPage - 1},\n        }));\n        containerRef.current.scrollIntoView({behavior: 'smooth'});\n    };\n\n    return (\n        <Pagination\n            page={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={totalPages}\n            boundaries={0}\n            size=\"md\"\n            getItemAriaLabel={(label) => {\n                switch (label) {\n                    case 'prev':\n                        return 'previous page';\n                    case 'next':\n                        return 'next page';\n                    default:\n                        return `${label}`;\n                }\n            }}\n        />\n    );\n};\n"],"names":["Pagination","useTable","TablePagination","totalPages","state","setState","containerRef","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","page","onChange","total","boundaries","size","getItemAriaLabel","label"],"mappings":"AAAA;;;AAAA,SAAQA,UAAU,QAAO,gBAAgB;AAGzC,SAAQC,QAAQ,QAAO,aAAa;AASpC,OAAO,IAAMC,kBAA2D,gBAAkB;QAAhBC,mBAAAA;IACtE,IAAwCF,YAAAA,YAAjCG,QAAiCH,UAAjCG,OAAOC,WAA0BJ,UAA1BI,UAAUC,eAAgBL,UAAhBK;IACxB,IAAMC,aAAa,SAACC,SAAoB;QACpCH,SAAS,SAACI;mBAA2B,wCAC9BA;gBACHC,YAAY,wCAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DF,aAAaM,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,qBACI,KAACd;QACGe,MAAMX,MAAMM,UAAU,CAACC,SAAS,GAAG;QACnCK,UAAUT;QACVU,OAAOd;QACPe,YAAY;QACZC,MAAK;QACLC,kBAAkB,SAACC,OAAU;YACzB,OAAQA;gBACJ,KAAK;oBACD,OAAO;gBACX,KAAK;oBACD,OAAO;gBACX;oBACI,OAAO,AAAC,GAAQ,OAANA;YAClB;QACJ;;AAGZ,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\ninterface TablePaginationProps {\n    /**\n     * The total number of page. Use null only if your table is paginated client side\n     */\n    totalPages: number | null;\n}\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {\n    const {state, setState, containerRef, getPageCount} = useTable();\n    const updatePage = (newPage: number) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageIndex: newPage - 1},\n        }));\n        containerRef.current.scrollIntoView({behavior: 'smooth'});\n    };\n\n    const total = totalPages === null ? getPageCount() : totalPages;\n\n    return (\n        <Pagination\n            page={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            getItemAriaLabel={(label) => {\n                switch (label) {\n                    case 'prev':\n                        return 'previous page';\n                    case 'next':\n                        return 'next page';\n                    default:\n                        return `${label}`;\n                }\n            }}\n        />\n    );\n};\n"],"names":["Pagination","useTable","TablePagination","totalPages","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","page","onChange","boundaries","size","getItemAriaLabel","label"],"mappings":"AAAA;;;AAAA,SAAQA,UAAU,QAAO,gBAAgB;AAGzC,SAAQC,QAAQ,QAAO,aAAa;AASpC,OAAO,IAAMC,kBAA2D,gBAAkB;QAAhBC,mBAAAA;IACtE,IAAsDF,YAAAA,YAA/CG,QAA+CH,UAA/CG,OAAOC,WAAwCJ,UAAxCI,UAAUC,eAA8BL,UAA9BK,cAAcC,eAAgBN,UAAhBM;IACtC,IAAMC,aAAa,SAACC,SAAoB;QACpCJ,SAAS,SAACK;mBAA2B,wCAC9BA;gBACHC,YAAY,wCAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQb,eAAe,IAAI,GAAGI,iBAAiBJ,UAAU;IAE/D,qBACI,KAACH;QACGiB,MAAMb,MAAMO,UAAU,CAACC,SAAS,GAAG;QACnCM,UAAUV;QACVQ,OAAOA;QACPG,YAAY;QACZC,MAAK;QACLC,kBAAkB,SAACC,OAAU;YACzB,OAAQA;gBACJ,KAAK;oBACD,OAAO;gBACX,KAAK;oBACD,OAAO;gBACX;oBACI,OAAO,AAAC,GAAQ,OAANA;YAClB;QACJ;;AAGZ,EAAE"}

package/dist/esm/index.js

@@ -1,9 +1,10 @@
 export * from "@mantine/carousel";
 export * from "@mantine/core";
 export * from "@mantine/hooks";
-export { createColumnHelper } from "@tanstack/table-core";
+export * from "@tanstack/table-core";
 export * from "./components";
 export * from "@mantine/form";
+export { Pagination } from "@mantine/core";
 // explicitly overriding mantine components
 export { Header, Table, Modal, Button, Menu } from "./components";
 export { useForm, createFormContext } from "./form";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport {createColumnHelper, type ColumnDef} from '@tanstack/table-core';\nexport * from './components';\nexport * from '@mantine/form';\n// explicitly overriding mantine components\nexport {Header, Table, type HeaderProps, Modal, Button, type ButtonProps, Menu, type MenuItemProps} from './components';\nexport {useForm, createFormContext} from './form';\n\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["createColumnHelper","Header","Table","Modal","Button","Menu","useForm","createFormContext"],"mappings":"AAIA,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAE9B,cAAc,iBAAiB;AAC/B,SAAQA,kBAAkB,QAAuB,uBAAuB;AACxE,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,2CAA2C;AAC3C,SAAQC,MAAM,EAAEC,KAAK,EAAoBC,KAAK,EAAEC,MAAM,EAAoBC,IAAI,QAA2B,eAAe;AACxH,SAAQC,OAAO,EAAEC,iBAAiB,QAAO,SAAS;AAElD,cAAc,UAAU"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport * from '@tanstack/table-core';\nexport * from './components';\nexport * from '@mantine/form';\nexport {Pagination} from '@mantine/core';\n// explicitly overriding mantine components\nexport {\n    Header,\n    Table,\n    type TableProps,\n    type HeaderProps,\n    Modal,\n    Button,\n    type ButtonProps,\n    Menu,\n    type MenuItemProps,\n} from './components';\nexport {useForm, createFormContext} from './form';\n\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["Pagination","Header","Table","Modal","Button","Menu","useForm","createFormContext"],"mappings":"AAIA,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAE9B,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,SAAQA,UAAU,QAAO,gBAAgB;AACzC,2CAA2C;AAC3C,SACIC,MAAM,EACNC,KAAK,EAGLC,KAAK,EACLC,MAAM,EAENC,IAAI,QAED,eAAe;AACtB,SAAQC,OAAO,EAAEC,iBAAiB,QAAO,SAAS;AAElD,cAAc,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "49.1.2",
+  "version": "49.2.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -17,8 +17,8 @@
     "@mantine/utils": "5.10.1",
     "@monaco-editor/react": "4.4.5",
     "@swc/helpers": "0.4.12",
-    "@tanstack/react-table": "8.5.11",
-    "@tanstack/table-core": "8.5.11",
+    "@tanstack/react-table": "8.7.9",
+    "@tanstack/table-core": "8.7.9",
     "dayjs": "1.11.3",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.34.0",

package/src/components/button/Button.tsx

@@ -19,3 +19,4 @@ const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 
 export const Button = createPolymorphicComponent<'button', ButtonProps, {Group: typeof MantineButton.Group}>(_Button);
+Button.Group = MantineButton.Group;

package/src/components/button/__tests__/Button.spec.tsx

@@ -0,0 +1,12 @@
+import {render} from '@test-utils';
+
+import {Button} from '../Button';
+
+describe('Button', () => {
+    it('exposes a Button Group component', () => {
+        expect(Button.Group).toBeDefined();
+        expect(() => {
+            render(<Button.Group></Button.Group>);
+        }).not.toThrow();
+    });
+});

package/src/components/table/Table.tsx

@@ -10,12 +10,12 @@ import {
     TableState,
     useReactTable,
 } from '@tanstack/react-table';
-import {CoreOptions, InitialTableState} from '@tanstack/table-core';
+import {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';
 import defaultsDeep from 'lodash.defaultsdeep';
 import {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';
 
 import {TableActions} from './TableActions';
-import {TableCollapsibleColumn} from './TableCollapsibleColumn';
+import {TableCollapsibleColumn, TableAccordionColumn} from './TableCollapsibleColumn';
 import {onTableChangeEvent, TableContext, TableFormType} from './TableContext';
 import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
@@ -83,7 +83,7 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
     };
 });
 
-interface TableProps<T> {
+export interface TableProps<T> {
     /**
      * Data to display in the table
      */
@@ -153,6 +153,17 @@ interface TableProps<T> {
      * @default false
      */
     multiRowSelectionEnabled?: boolean;
+
+    options?: Omit<
+        Partial<TableOptions<T>>,
+        | 'initialState'
+        | 'data'
+        | 'columns'
+        | 'manualPagination'
+        | 'enableMultiRowSelection'
+        | 'getRowId'
+        | 'getRowCanExpand'
+    >;
 }
 
 interface TableType {
@@ -166,6 +177,7 @@ interface TableType {
     Predicate: typeof TablePredicate;
     DateRangePicker: typeof TableDateRangePicker;
     CollapsibleColumn: typeof TableCollapsibleColumn;
+    AccordionColumn: typeof TableAccordionColumn;
 }
 
 export const Table: TableType = <T,>({
@@ -181,6 +193,7 @@ export const Table: TableType = <T,>({
     loading = false,
     doubleClickAction,
     multiRowSelectionEnabled,
+    options = {},
 }: TableProps<T>) => {
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const header = convertedChildren.find((child) => child.type === TableHeader);
@@ -197,10 +210,11 @@ export const Table: TableType = <T,>({
         data,
         columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,
         getCoreRowModel: getCoreRowModel(),
-        manualPagination: true,
+        manualPagination: options?.getPaginationRowModel === undefined,
         enableMultiRowSelection: !!multiRowSelectionEnabled,
         getRowId,
         getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,
+        ...options,
     });
     const [state, setState] = useState<TableState>(table.initialState);
     table.setOptions((prev) => ({
@@ -307,6 +321,7 @@ export const Table: TableType = <T,>({
                     form,
                     containerRef: outsideClickRef,
                     multiRowSelectionEnabled,
+                    getPageCount: table.getPageCount,
                 }}
             >
                 {header}
@@ -345,4 +360,5 @@ Table.Predicate = TablePredicate;
 Table.PerPage = TablePerPage;
 Table.Predicate = TablePredicate;
 Table.CollapsibleColumn = TableCollapsibleColumn;
+Table.AccordionColumn = TableAccordionColumn;
 Table.DateRangePicker = TableDateRangePicker;

package/src/components/table/TableCollapsibleColumn.tsx

@@ -1,27 +1,53 @@
 import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';
 import {ActionIcon} from '@mantine/core';
-import {ColumnDef} from '@tanstack/table-core';
-import {MouseEvent as ReactMouseEvent} from 'react';
+import {CellContext, ColumnDef} from '@tanstack/table-core';
+import {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';
 
-/**
- * Generic column to use when your table needs collapsible rows
- */
-export const TableCollapsibleColumn: ColumnDef<unknown> = {
+const defaultProps: ColumnDef<unknown> = {
     id: 'collapsible',
     enableSorting: false,
     header: '',
     size: 62,
+};
+
+/**
+ * Generic column to use when your table needs collapsible rows
+ */
+export const TableCollapsibleColumn: ColumnDef<unknown> = {
+    ...defaultProps,
+    cell: (info) => <CollapsibleIcon info={info} />,
+};
+
+/**
+ * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)
+ */
+export const TableAccordionColumn: ColumnDef<unknown> = {
+    ...defaultProps,
     cell: (info) => {
-        const handler = info.row.getToggleExpandedHandler();
-        const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {
-            e.stopPropagation();
-            handler();
+        const onToggle = () => {
+            // close all other rows when the current row not is expanded
+            if (!info.row.getIsExpanded()) {
+                info.table.toggleAllRowsExpanded(false);
+            }
         };
 
-        return info.row.getCanExpand() ? (
-            <ActionIcon onClick={onClick} variant="subtle" radius="sm">
-                {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}
-            </ActionIcon>
-        ) : null;
+        return <CollapsibleIcon onToggle={onToggle} info={info} />;
     },
 };
+
+const CollapsibleIcon: FunctionComponent<{
+    info: CellContext<unknown, unknown>;
+    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;
+}> = ({info, onToggle}) => {
+    const handler = info.row.getToggleExpandedHandler();
+    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        onToggle?.(e);
+        handler();
+    };
+    return info.row.getCanExpand() ? (
+        <ActionIcon onClick={onClick} variant="subtle" radius="sm">
+            {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}
+        </ActionIcon>
+    ) : null;
+};

package/src/components/table/TableContext.tsx

@@ -60,6 +60,11 @@ type TableContextType = {
      */
     containerRef: RefObject<HTMLDivElement>;
     multiRowSelectionEnabled: boolean;
+
+    /**
+     * Function that returns the number of pages
+     */
+    getPageCount: () => number;
 };
 
 export const TableContext = createContext<TableContextType | null>(null);

package/src/components/table/TablePagination.tsx

@@ -5,13 +5,13 @@ import {useTable} from './useTable';
 
 interface TablePaginationProps {
     /**
-     * The total number of page
+     * The total number of page. Use null only if your table is paginated client side
      */
-    totalPages: number;
+    totalPages: number | null;
 }
 
 export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {
-    const {state, setState, containerRef} = useTable();
+    const {state, setState, containerRef, getPageCount} = useTable();
     const updatePage = (newPage: number) => {
         setState((prevState: TableState) => ({
             ...prevState,
@@ -20,11 +20,13 @@ export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalP
         containerRef.current.scrollIntoView({behavior: 'smooth'});
     };
 
+    const total = totalPages === null ? getPageCount() : totalPages;
+
     return (
         <Pagination
             page={state.pagination.pageIndex + 1}
             onChange={updatePage}
-            total={totalPages}
+            total={total}
             boundaries={0}
             size="md"
             getItemAriaLabel={(label) => {

package/src/components/table/__tests__/Table.spec.tsx

@@ -127,6 +127,46 @@ describe('Table', () => {
         expect(allRows).toHaveLength(2);
     });
 
+    it('closes the opened collapsible when using the accordion column and the user expand a different row', async () => {
+        const user = userEvent.setup({delay: null});
+        const Fixture: FunctionComponent<{row: RowData}> = ({row}) => <div>Collapsible content: {row.lastName}</div>;
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {
+                enableSorting: false,
+            }),
+            Table.AccordionColumn as ColumnDef<RowData>,
+        ];
+        render(
+            <Table
+                data={[
+                    {firstName: 'Jack', lastName: 'Russel'},
+                    {firstName: 'Golden', lastName: 'Retriever'},
+                ]}
+                getExpandChildren={(row: RowData) => <Fixture row={row} />}
+                columns={customColumns}
+            />
+        );
+
+        // wait for the collapsible icon to show
+        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
+
+        expect(screen.queryByText('Collapsible content: Russel')).not.toBeVisible();
+        expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
+
+        await user.click(within(screen.getAllByRole('row')[1]).getByRole('button', {name: 'arrowHeadDown'}));
+        await waitFor(() => {
+            expect(screen.queryByText('Collapsible content: Russel')).toBeVisible();
+        });
+        expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
+
+        await user.click(within(screen.getAllByRole('row')[3]).getByRole('button', {name: 'arrowHeadDown'}));
+
+        await waitFor(() => {
+            expect(screen.queryByText('Collapsible content: Retriever')).toBeVisible();
+        });
+        expect(screen.queryByText('Collapsible content: Russel')).not.toBeVisible();
+    });
+
     it('calls an action when user double clicks on a row', async () => {
         const user = userEvent.setup();
         const doubleClickSpy = jest.fn();

package/src/components/table/__tests__/TablePagination.spec.tsx

@@ -1,4 +1,4 @@
-import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {ColumnDef, createColumnHelper, getPaginationRowModel} from '@tanstack/table-core';
 import {render, screen, userEvent, waitFor} from '@test-utils';
 
 import {Table} from '../Table';
@@ -36,6 +36,7 @@ describe('Table.Pagination', () => {
     });
 
     it('calls onChange when clicking on a page number', async () => {
+        const user = userEvent.setup();
         const onChange = jest.fn();
         render(
             <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
@@ -47,7 +48,7 @@ describe('Table.Pagination', () => {
 
         onChange.mockReset();
 
-        userEvent.click(screen.queryByRole('button', {name: '2'}));
+        await user.click(screen.queryByRole('button', {name: '2'}));
 
         await waitFor(() => {
             expect(onChange).toHaveBeenCalledWith(
@@ -55,4 +56,49 @@ describe('Table.Pagination', () => {
             );
         });
     });
+
+    it('changes the page when the pagination is client side', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table
+                data={[
+                    {name: 'fruits'},
+                    {name: 'vegetables'},
+                    {name: 'grains'},
+                    {name: 'protein foods'},
+                    {name: 'dairy'},
+                ]}
+                columns={columns}
+                initialState={{pagination: {pageSize: 3}}}
+                options={{
+                    getPaginationRowModel: getPaginationRowModel(),
+                }}
+            >
+                <Table.Footer>
+                    <Table.Pagination totalPages={null} />
+                </Table.Footer>
+            </Table>
+        );
+
+        expect(screen.getByText('fruits')).toBeVisible();
+        expect(screen.getByText('vegetables')).toBeVisible();
+        expect(screen.getByText('grains')).toBeVisible();
+        expect(screen.queryByText('protein foods')).not.toBeInTheDocument();
+        expect(screen.queryByText('dairy')).not.toBeInTheDocument();
+
+        const buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(4);
+        expect(buttons[0]).toHaveAccessibleName('previous page');
+        expect(buttons[1]).toHaveAccessibleName('1');
+        expect(buttons[2]).toHaveAccessibleName('2');
+        expect(buttons[3]).toHaveAccessibleName('next page');
+
+        await user.click(screen.getByRole('button', {name: 'next page'}));
+
+        expect(screen.queryByText('fruits')).not.toBeInTheDocument();
+        expect(screen.queryByText('vegetables')).not.toBeInTheDocument();
+        expect(screen.queryByText('grains')).not.toBeInTheDocument();
+        expect(screen.getByText('protein foods')).toBeVisible();
+        expect(screen.getByText('dairy')).toBeVisible();
+    });
 });