@coveord/plasma-mantine 48.23.0 → 48.23.2

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        },\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        rowSelectionCheckboxCell: {\n            verticalAlign: 'middle',\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\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.rowSelectionCheckboxCell]: cell.column.id === TableSelectableColumn.id,\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={{padding: 0, borderTop: row.getIsExpanded() ? undefined : 'none'}}\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","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowSelectionCheckboxCell","verticalAlign","rowCollapsibleButtonCell","textAlign","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","padding","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} 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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"}

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Group } from "@mantine/core";
 import { useTable } from "./useTable";
 export var TableActions = function(param) {
     var children = param.children;
@@ -7,7 +8,8 @@ export var TableActions = function(param) {
     if (selectedRows.length <= 0) {
         return null;
     }
-    return /*#__PURE__*/ _jsx(_Fragment, {
+    return /*#__PURE__*/ _jsx(Group, {
+        spacing: "xs",
         children: children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\n\ninterface TableActionsProps<T> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return <>{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</>;\n};\n"],"names":["useTable","TableActions","children","getSelectedRows","multiRowSelectionEnabled","selectedRows","length"],"mappings":"AAAA;AACA,SAAQA,QAAQ,QAAO,aAAa;AAyBpC,OAAO,IAAMC,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDF,YAAAA,YAA7CG,kBAA6CH,UAA7CG,iBAAiBC,2BAA4BJ,UAA5BI;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBAAO;kBAAGJ,SAASE,2BAA2BC,eAAeA,YAAY,CAAC,EAAE;;AAChF,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\n\ninterface TableActionsProps<T> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return <Group spacing=\"xs\">{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</Group>;\n};\n"],"names":["Group","useTable","TableActions","children","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","spacing"],"mappings":"AAAA;AAAA,SAAQA,KAAK,QAAO,gBAAgB;AAEpC,SAAQC,QAAQ,QAAO,aAAa;AAyBpC,OAAO,IAAMC,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDF,YAAAA,YAA7CG,kBAA6CH,UAA7CG,iBAAiBC,2BAA4BJ,UAA5BI;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBAAO,KAACP;QAAMQ,SAAQ;kBAAML,SAASE,2BAA2BC,eAAeA,YAAY,CAAC,EAAE;;AAClG,EAAE"}

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

@@ -1,22 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowHeadDownSize24Px, ArrowHeadUpSize24Px } from "@coveord/plasma-react-icons";
-import { Button } from "@mantine/core";
+import { ActionIcon } from "@mantine/core";
 /**
  * Generic column to use when your table needs collapsible rows
  */ export var TableCollapsibleColumn = {
     id: "collapsible",
     enableSorting: false,
     header: "",
+    size: 62,
     cell: function(info) {
         var handler = info.row.getToggleExpandedHandler();
         var onClick = function(e) {
             e.stopPropagation();
             handler();
         };
-        return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(Button, {
+        return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(ActionIcon, {
             onClick: onClick,
             variant: "subtle",
-            size: "xs",
+            radius: "sm",
             children: info.row.getIsExpanded() ? /*#__PURE__*/ _jsx(ArrowHeadUpSize24Px, {}) : /*#__PURE__*/ _jsx(ArrowHeadDownSize24Px, {})
         }) : null;
     }

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 {Button} 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    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            <Button onClick={onClick} variant=\"subtle\" size=\"xs\">\n                {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n            </Button>\n        ) : null;\n    },\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","Button","TableCollapsibleColumn","id","enableSorting","header","cell","info","handler","row","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","size","getIsExpanded"],"mappings":"AAAA;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,MAAM,QAAO,gBAAgB;AAIrC;;CAEC,GACD,OAAO,IAAMC,yBAA6C;IACtDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ;IACRC,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,KAACb;YAAOU,SAASA;YAASI,SAAQ;YAASC,MAAK;sBAC3CT,KAAKE,GAAG,CAACQ,aAAa,mBAAK,KAACjB,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 {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"}

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

@@ -44,6 +44,8 @@ export var Th = function(param) {
             },
             children: /*#__PURE__*/ _jsx(Text, {
                 size: "xs",
+                py: "xs",
+                px: "sm",
                 children: flexRender(header.column.columnDef.header, header.getContext())
             })
         });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        color: theme.black + '!important',\n        verticalAlign: 'middle',\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n        whiteSpace: 'nowrap',\n\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowHeadDownSize16Px,\n    desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\n                <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted();\n    const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\" noWrap>\n                    <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n                    <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","fontWeight","padding","color","black","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","desc","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","onClick","position","noWrap","sx","action","height"],"mappings":"AAAA;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAChF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,OAAOJ,MAAMK,KAAK,GAAG;YACrBC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPL,SAAS,AAAC,GAAwBH,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;YACnDC,YAAY;YAEZ,WAAW;gBACPC,iBAAiBb,MAAMc,WAAW,KAAK,SAASd,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,KAAK5B;IACL6B,MAAM5B;AACV;AAEA,IAAM6B,gBAAgB;IAClBF,KAAK;IACLC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK,gBAA8B;QAAxBC,eAAAA;IACpB,IAAM,AAACC,UAAWxB,YAAXwB;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMlB,QAAQgB,SAAS3B,oBAAoB2B,IAAI,GAAGA,OAAOG,SAAS;IAElE,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACN,OAAOG,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,KAAC5B;YAAG6B,WAAWP,QAAQtB,EAAE;YAAE8B,OAAO;gBAACvB,OAAAA;YAAK;sBACpC,cAAA,KAACb;gBAAK6B,MAAK;0BAAM1B,WAAWwB,OAAOG,MAAM,CAACO,SAAS,CAACV,MAAM,EAAEA,OAAOW,UAAU;;;IAGzF,CAAC;IAED,IAAMC,SAASZ,OAAOG,MAAM,CAACU,uBAAuB;IACpD,IAAMC,eAAed,OAAOG,MAAM,CAACY,WAAW;IAC9C,IAAMC,OAAOrB,YAAY,CAACmB,gBAAgBd,OAAOG,MAAM,CAACc,eAAe,GAAG;IAE1E,qBACI,KAACtC;QAAG6B,WAAWP,QAAQtB,EAAE;QAAE8B,OAAO;YAACvB,OAAAA;QAAK;QAAGgC,aAAWJ,eAAehB,aAAa,CAACgB,aAAa,GAAG,MAAM;kBACrG,cAAA,KAACxC;YAAe6C,SAASP;YAAQJ,WAAWP,QAAQhB,OAAO;sBACvD,cAAA,MAACb;gBAAMgD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAChD;wBAAK6B,MAAK;kCAAM1B,WAAWwB,OAAOG,MAAM,CAACO,SAAS,CAACV,MAAM,EAAEA,OAAOW,UAAU;;kCAC7E,KAACzC;wBAAOoD,IAAI,SAAC5C;mCAAW;gCAACI,OAAOgC,eAAepC,MAAMe,MAAM,CAAC8B,MAAM,CAAC,EAAE,GAAGlB,SAAS;4BAAA;;kCAC7E,cAAA,KAACW;4BAAKQ,QAAQ;;;;;;;AAMtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        color: theme.black + '!important',\n        verticalAlign: 'middle',\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n        whiteSpace: 'nowrap',\n\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowHeadDownSize16Px,\n    desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\n                <Text size=\"xs\" py=\"xs\" px=\"sm\">\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted();\n    const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\" noWrap>\n                    <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n                    <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","fontWeight","padding","color","black","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","desc","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","py","px","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","onClick","position","noWrap","sx","action","height"],"mappings":"AAAA;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAChF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,OAAOJ,MAAMK,KAAK,GAAG;YACrBC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPL,SAAS,AAAC,GAAwBH,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;YACnDC,YAAY;YAEZ,WAAW;gBACPC,iBAAiBb,MAAMc,WAAW,KAAK,SAASd,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,KAAK5B;IACL6B,MAAM5B;AACV;AAEA,IAAM6B,gBAAgB;IAClBF,KAAK;IACLC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK,gBAA8B;QAAxBC,eAAAA;IACpB,IAAM,AAACC,UAAWxB,YAAXwB;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMlB,QAAQgB,SAAS3B,oBAAoB2B,IAAI,GAAGA,OAAOG,SAAS;IAElE,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACN,OAAOG,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,KAAC5B;YAAG6B,WAAWP,QAAQtB,EAAE;YAAE8B,OAAO;gBAACvB,OAAAA;YAAK;sBACpC,cAAA,KAACb;gBAAK6B,MAAK;gBAAKQ,IAAG;gBAAKC,IAAG;0BACtBnC,WAAWwB,OAAOG,MAAM,CAACS,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;;IAI7E,CAAC;IAED,IAAMC,SAASd,OAAOG,MAAM,CAACY,uBAAuB;IACpD,IAAMC,eAAehB,OAAOG,MAAM,CAACc,WAAW;IAC9C,IAAMC,OAAOvB,YAAY,CAACqB,gBAAgBhB,OAAOG,MAAM,CAACgB,eAAe,GAAG;IAE1E,qBACI,KAACxC;QAAG6B,WAAWP,QAAQtB,EAAE;QAAE8B,OAAO;YAACvB,OAAAA;QAAK;QAAGkC,aAAWJ,eAAelB,aAAa,CAACkB,aAAa,GAAG,MAAM;kBACrG,cAAA,KAAC1C;YAAe+C,SAASP;YAAQN,WAAWP,QAAQhB,OAAO;sBACvD,cAAA,MAACb;gBAAMkD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAClD;wBAAK6B,MAAK;kCAAM1B,WAAWwB,OAAOG,MAAM,CAACS,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;kCAC7E,KAAC3C;wBAAOsD,IAAI,SAAC9C;mCAAW;gCAACI,OAAOkC,eAAetC,MAAMe,MAAM,CAACgC,MAAM,CAAC,EAAE,GAAGpB,SAAS;4BAAA;;kCAC7E,cAAA,KAACa;4BAAKQ,QAAQ;;;;;;;AAMtC,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "48.23.0",
+  "version": "48.23.2",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -22,7 +22,7 @@
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.34.0",
     "react-beautiful-dnd": "13.1.1",
-    "@coveord/plasma-react-icons": "48.17.4",
+    "@coveord/plasma-react-icons": "48.23.1",
     "@coveord/plasma-tokens": "48.17.4"
   },
   "devDependencies": {
@@ -34,7 +34,7 @@
     "@mantine/hooks": "5.9.2",
     "@mantine/modals": "5.9.2",
     "@swc/cli": "0.1.57",
-    "@swc/core": "1.3.16",
+    "@swc/core": "1.3.22",
     "@swc/jest": "0.2.23",
     "@testing-library/dom": "8.18.1",
     "@testing-library/jest-dom": "5.16.5",

package/src/components/code-editor/CodeEditor.tsx

@@ -17,7 +17,7 @@ import {
     useComponentDefaultProps,
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
-import Editor, {loader, useMonaco} from '@monaco-editor/react';
+import Editor, {loader, Monaco} from '@monaco-editor/react';
 import {FunctionComponent, useEffect, useState} from 'react';
 
 import {useParentHeight} from '../../hooks';
@@ -104,8 +104,6 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         ...others
     } = useComponentDefaultProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
-    const [registered, setRegistered] = useState(false);
-    const monaco = useMonaco();
     const {classes, theme} = useStyles();
     const [_value, handleChange] = useUncontrolled<string>({
         value,
@@ -121,6 +119,12 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         setLoaded(true);
     };
 
+    const registerLanguages = (monaco: Monaco) => {
+        if (monaco && language === 'xml') {
+            XML.register(monaco);
+        }
+    };
+
     useEffect(() => {
         if (monacoLoader === 'local') {
             loadLocalMonaco();
@@ -129,13 +133,6 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         }
     }, []);
 
-    useEffect(() => {
-        if (monaco && language === 'xml' && !registered) {
-            XML.register(monaco);
-            setRegistered(true);
-        }
-    }, [monaco, language]);
-
     const _label = label ? (
         <Input.Label required={required} {...labelProps}>
             {label}
@@ -193,7 +190,8 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                 }}
                 value={_value}
                 onChange={handleChange}
-                onMount={(editor) => {
+                onMount={(editor, monaco) => {
+                    registerLanguages(monaco);
                     editor.onDidFocusEditorText(onFocus);
                     editor.onDidBlurEditorText(async () => {
                         await editor.getAction('editor.action.formatDocument').run();

package/src/components/code-editor/__mocks__/@monaco-editor/react.tsx

@@ -1,7 +1,19 @@
 import {EditorProps} from '@monaco-editor/react';
-import {FunctionComponent} from 'react';
+import {FunctionComponent, useEffect} from 'react';
 
-const MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid="monaco-editor" />;
+const editor: any = {
+    onDidFocusEditorText: jest.fn(),
+    onDidBlurEditorText: jest.fn(),
+};
+
+const monaco: any = jest.fn();
+
+const MockedEditor: FunctionComponent<EditorProps> = (props) => {
+    useEffect(() => {
+        props.onMount(editor, monaco);
+    }, []);
+    return <div data-testid="monaco-editor" />;
+};
 
 export default MockedEditor;
 

package/src/components/code-editor/__tests__/CodeEditor.spec.tsx

@@ -55,7 +55,7 @@ describe('CodeEditor', () => {
         expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
     });
 
-    it('loads the xml language in the monaco instance if the editor language is xml', () => {
+    it('loads the xml language in the monaco instance if the editor language is xml', async () => {
         const xmlLanguageSpy = jest.spyOn(XML, 'register').mockImplementation();
         render(<CodeEditor label="label" description="description" monacoLoader="cdn" language="xml" />);
         expect(xmlLanguageSpy).toHaveBeenCalledTimes(1);

package/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx

@@ -55,6 +55,9 @@ export const DateRangePickerInlineCalendar = ({
     const calendarInputProps = form.getInputProps('dates');
 
     const onCalendarApply = () => {
+        if (!form.values.dates[1]) {
+            form.values.dates[1] = form.values.dates[0]; // when date range is the same day
+        }
         onApply(form.values.dates);
     };
 

package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx

@@ -73,6 +73,20 @@ describe('DateRangePickerInlineCalendar', () => {
         jest.useRealTimers();
     });
 
+    it('set end date same as start date if only one date is selected when clicking in the calendar', async () => {
+        const user = userEvent.setup({delay: null});
+        jest.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
+        const onApply = jest.fn();
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
+
+        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
+
+        expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 8)]);
+
+        jest.useRealTimers();
+    });
+
     it('calls onApply with the selected dates when typing in the inputs', async () => {
         const user = userEvent.setup({delay: null});
         const onApply = jest.fn();

package/src/components/table/Table.tsx

@@ -44,6 +44,9 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
             '& td:first-of-type, th:first-of-type > *': {
                 paddingLeft: theme.spacing.xl,
             },
+            '& tbody td': {
+                verticalAlign: 'top',
+            },
         },
 
         header: {
@@ -67,12 +70,9 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
             backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
         },
 
-        rowSelectionCheckboxCell: {
-            verticalAlign: 'middle',
-        },
-
         rowCollapsibleButtonCell: {
             textAlign: 'right',
+            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,
         },
 
         row: {
@@ -261,7 +261,6 @@ export const Table: TableType = <T,>({
                                 key={cell.id}
                                 style={{width}}
                                 className={cx({
-                                    [classes.rowSelectionCheckboxCell]: cell.column.id === TableSelectableColumn.id,
                                     [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,
                                 })}
                             >
@@ -276,7 +275,11 @@ export const Table: TableType = <T,>({
                     <tr>
                         <td
                             colSpan={columns.length + 1}
-                            style={{padding: 0, borderTop: row.getIsExpanded() ? undefined : 'none'}}
+                            style={{
+                                padding: 0,
+                                borderTop: row.getIsExpanded() ? undefined : 'none',
+                                borderBottom: row.getIsExpanded() ? undefined : 'none',
+                            }}
                         >
                             <Collapse in={row.getIsExpanded()}>
                                 <Box px="sm" py="xs">

package/src/components/table/TableActions.tsx

@@ -1,3 +1,4 @@
+import {Group} from '@mantine/core';
 import {ReactElement, ReactNode} from 'react';
 import {useTable} from './useTable';
 
@@ -32,5 +33,5 @@ export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement
         return null;
     }
 
-    return <>{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</>;
+    return <Group spacing="xs">{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</Group>;
 };

package/src/components/table/TableCollapsibleColumn.tsx

@@ -1,5 +1,5 @@
 import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';
-import {Button} from '@mantine/core';
+import {ActionIcon} from '@mantine/core';
 import {ColumnDef} from '@tanstack/table-core';
 import {MouseEvent as ReactMouseEvent} from 'react';
 
@@ -10,6 +10,7 @@ export const TableCollapsibleColumn: ColumnDef<unknown> = {
     id: 'collapsible',
     enableSorting: false,
     header: '',
+    size: 62,
     cell: (info) => {
         const handler = info.row.getToggleExpandedHandler();
         const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {
@@ -18,9 +19,9 @@ export const TableCollapsibleColumn: ColumnDef<unknown> = {
         };
 
         return info.row.getCanExpand() ? (
-            <Button onClick={onClick} variant="subtle" size="xs">
+            <ActionIcon onClick={onClick} variant="subtle" radius="sm">
                 {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}
-            </Button>
+            </ActionIcon>
         ) : null;
     },
 };

package/src/components/table/Th.tsx

@@ -47,7 +47,9 @@ export const Th = <T,>({header}: ThProps<T>) => {
     if (!header.column.getCanSort()) {
         return (
             <th className={classes.th} style={{width}}>
-                <Text size="xs">{flexRender(header.column.columnDef.header, header.getContext())}</Text>
+                <Text size="xs" py="xs" px="sm">
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                </Text>
             </th>
         );
     }