@coveord/plasma-mantine 50.0.2 → 51.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\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 default useStyles;\n"],"names":["createStyles","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"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAO3C,IAAMC,YAAYD,aAAwC,SAACE,cAAiD;QAAzCC,kBAAAA,WAAWC,iCAAAA;IAC1E,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAChBJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OACnDR,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE;IAC7C,OAAO;QACHC,OAAO;YACHC,OAAO;YACP,4CAA4C;gBACxCC,aAAaX,MAAMY,OAAO,CAACC,EAAE;YACjC;YACA,cAAc;gBACVC,eAAe;YACnB;QACJ;QAEAC,QAAQ;YACJC,UAAU;YACVC,KAAKhB,YAAY,KAAK,CAAC;YACvBiB,iBAAiBlB,MAAMI,WAAW,KAAK,SAASJ,MAAMmB,KAAK,GAAGnB,MAAMoB,KAAK;YACzEC,YAAY;YACZC,QAAQ;YAER,YAAY;gBACRC,SAAS;gBACTP,UAAU;gBACVQ,MAAM;gBACNC,OAAO;gBACPC,QAAQ;gBACRC,cAAc,AAAC,aAAiC,OAArB3B,MAAMO,MAAM,CAACqB,IAAI,CAAC,EAAE;YACnD;QACJ;QAEAC,aAAa;YACTX,iBAAiBhB,2BAA2B4B,YAAY3B,kBAAkB;QAC9E;QAEA4B,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,GAA4BjC,OAA1BA,MAAMY,OAAO,CAACsB,EAAE,GAAG,GAAE,OAAsB,OAAjBlC,MAAMY,OAAO,CAACuB,EAAE,EAAC;QAC3D;QAEAC,KAAK;YACD,WAAW;gBACPlB,iBAAiBf;YACrB;QACJ;IACJ;AACJ;AAEA,eAAeJ,UAAU"}
+{"version":3,"sources":["../../../../src/components/table/Table.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\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: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\nexport default useStyles;\n"],"names":["createStyles","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"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAO3C,IAAMC,YAAYD,aAAwC,SAACE,cAAiD;QAAzCC,kBAAAA,WAAWC,iCAAAA;IAC1E,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAChBJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OACnDR,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE;IAC7C,OAAO;QACHC,OAAO;YACHC,OAAO;YACP,4CAA4C;gBACxCC,aAAaX,MAAMY,OAAO,CAACC,EAAE;YACjC;YACA,cAAc;gBACVC,eAAe;YACnB;QACJ;QAEAC,QAAQ;YACJC,UAAU;YACVC,KAAKhB,YAAY,KAAK,CAAC;YACvBiB,iBAAiBlB,MAAMI,WAAW,KAAK,SAASJ,MAAMmB,KAAK,GAAGnB,MAAMoB,KAAK;YACzEC,YAAY;YACZC,QAAQ;YAER,YAAY;gBACRC,SAAS;gBACTP,UAAU;gBACVQ,MAAM;gBACNC,OAAO;gBACPC,QAAQ;gBACRC,cAAc,AAAC,aAAiC,OAArB3B,MAAMO,MAAM,CAACqB,IAAI,CAAC,EAAE;YACnD;QACJ;QAEAC,aAAa;YACTX,iBAAiBhB,2BAA2B4B,YAAY3B,kBAAkB;QAC9E;QAEA4B,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BjC,OAAvBA,MAAMY,OAAO,CAACsB,EAAE,EAAC,QAAuB,OAAjBlC,MAAMY,OAAO,CAACuB,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,WAAW;gBACPlB,iBAAiBf;YACrB;QACJ;IACJ;AACJ;AAEA,eAAeJ,UAAU"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.types.ts"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {\n    ColumnDef,\n    CoreOptions,\n    InitialTableState as TanstackInitialTableState,\n    TableOptions,\n    TableState as TanstackTableState,\n} from '@tanstack/table-core';\nimport {Dispatch, ReactElement, ReactNode, RefObject} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\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';\n\nexport type RowSelectionWithData<TData> = Record<string, TData>;\nexport interface RowSelectionState<TData> {\n    rowSelection: RowSelectionWithData<TData>;\n}\n\nexport interface TableState<TData> extends Omit<TanstackTableState, 'rowSelection'>, RowSelectionState<TData> {}\n\nexport interface InitialTableState<TData>\n    extends Omit<TanstackInitialTableState, 'rowSelection'>,\n        Partial<RowSelectionState<TData>>,\n        Partial<TableFormType> {}\n\nexport type onTableChangeEvent<TData> = (params: TableState<TData> & 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\nexport type TableContextType<TData> = {\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<TData>;\n    /**\n     * Function to update the table state\n     */\n    setState: Dispatch<(prevState: TableState<TData>) => TableState<TData>>;\n    /**\n     * Whether the table currently as any kind of filter applied.\n     * Useful to determine if the noDataChildren is an empty state or just the result of a filter\n     */\n    isFiltered: boolean;\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: () => TData | null;\n    /**\n     * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.\n     */\n    getSelectedRows: () => TData[];\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    /**\n     * Whether multi row selection is activated\n     */\n    multiRowSelectionEnabled: boolean;\n    /**\n     * Function that returns the number of pages\n     */\n    getPageCount: () => number;\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<T>;\n    /**\n     * Function called when the table should update\n     *\n     * @param state the state of the table\n     */\n    onChange?: onTableChangeEvent<T>;\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     * Initial state of the table\n     */\n    initialState?: InitialTableState<T>;\n    /**\n     * Action passed when user double clicks on a row\n     */\n    doubleClickAction?: (datum: T) => void;\n    /**\n     * Function called whenever the row selection changes\n     *\n     * @param selectedRows The selected rows\n     */\n    onRowSelectionChange?: (selectedRows: 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     * Additional options that can be passed to the table\n     */\n    options?: Omit<\n        Partial<TableOptions<T>>,\n        | 'initialState'\n        | 'data'\n        | 'columns'\n        | 'manualPagination'\n        | 'enableMultiRowSelection'\n        | 'getRowId'\n        | 'getRowCanExpand'\n        | 'enableRowSelection'\n        | 'onRowSelectionChange'\n    >;\n}\n\nexport interface 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"],"names":[],"mappings":"AAAA,WAgNC"}
+{"version":3,"sources":["../../../../src/components/table/Table.types.ts"],"sourcesContent":["import {UseFormReturnType} from '@mantine/form';\nimport {\n    ColumnDef,\n    CoreOptions,\n    InitialTableState as TanstackInitialTableState,\n    TableOptions,\n    TableState as TanstackTableState,\n} from '@tanstack/table-core';\nimport {Dispatch, ReactElement, ReactNode, RefObject} from 'react';\nimport {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';\n\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\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';\n\nexport type RowSelectionWithData<TData> = Record<string, TData>;\nexport interface RowSelectionState<TData> {\n    rowSelection: RowSelectionWithData<TData>;\n}\n\nexport interface TableState<TData> extends Omit<TanstackTableState, 'rowSelection'>, RowSelectionState<TData> {}\n\nexport interface InitialTableState<TData>\n    extends Omit<TanstackInitialTableState, 'rowSelection'>,\n        Partial<RowSelectionState<TData>>,\n        Partial<TableFormType> {}\n\nexport type onTableChangeEvent<TData> = (params: TableState<TData> & 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\nexport type TableContextType<TData> = {\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<TData>;\n    /**\n     * Function to update the table state\n     */\n    setState: Dispatch<(prevState: TableState<TData>) => TableState<TData>>;\n    /**\n     * Whether the table currently as any kind of filter applied.\n     * Useful to determine if the noDataChildren is an empty state or just the result of a filter\n     */\n    isFiltered: boolean;\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: () => TData | null;\n    /**\n     * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.\n     */\n    getSelectedRows: () => TData[];\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    /**\n     * Whether multi row selection is activated\n     */\n    multiRowSelectionEnabled: boolean;\n    /**\n     * Function that returns the number of pages\n     */\n    getPageCount: () => number;\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<T>;\n    /**\n     * Function called when the table should update\n     *\n     * @param state the state of the table\n     */\n    onChange?: onTableChangeEvent<T>;\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     * Initial state of the table\n     */\n    initialState?: InitialTableState<T>;\n    /**\n     * Action passed when user double clicks on a row\n     */\n    doubleClickAction?: (datum: T) => void;\n    /**\n     * Function called whenever the row selection changes\n     *\n     * @param selectedRows The selected rows\n     */\n    onRowSelectionChange?: (selectedRows: 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     * Additional options that can be passed to the table\n     */\n    options?: Omit<\n        Partial<TableOptions<T>>,\n        | 'initialState'\n        | 'data'\n        | 'columns'\n        | 'manualPagination'\n        | 'enableMultiRowSelection'\n        | 'getRowId'\n        | 'getRowCanExpand'\n        | 'enableRowSelection'\n        | 'onRowSelectionChange'\n    >;\n}\n\nexport interface 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"],"names":[],"mappings":"AAAA,WAgNC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';\nimport {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {useTable} from './TableContext';\n\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n}) => {\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <>\n            {formatedRange}\n            <Popover opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n                        <CalendarSize24Px width={24} height={24} />\n                    </Button>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={form.values.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["CalendarSize24Px","Popover","dayjs","useState","Button","DateRangePickerInlineCalendar","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formatedRange","values","dateRange","onChange","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,OAAO,QAAO,gBAAgB;AAEtC,OAAOC,WAAW,QAAQ;AAC1B,SAA2BC,QAAQ,QAAO,QAAQ;AAElD,SAAQC,MAAM,QAAO,YAAY;AACjC,SAAQC,6BAA6B,QAA2C,uBAAuB;AAEvG,SAAQC,QAAQ,QAAO,iBAAiB;AAkBxC,OAAO,IAAMC,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BN,6BAAAA,SAAS,KAAK,OAAnCO,SAAqBP,cAAbQ,YAAaR;IAC5B,IAAM,AAACS,OAAQN,WAARM;IAEP,IAAMC,UAAU,SAACC,OAAgC;QAC7CF,KAAKG,aAAa,CAAC,aAAaD;QAChCH,UAAU,KAAK;IACnB;IACA,IAAMK,WAAW,WAAM;QACnBL,UAAU,KAAK;IACnB;IAEA,IAAMM,aAAa,SAACC;eAAehB,MAAMgB,MAAMC,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CH,OAA1CA,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCL,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI;;YACKF;0BACD,MAACnB;gBAAQS,QAAQA;gBAAQa,UAAUZ;;kCAC/B,KAACV,QAAQuB,MAAM;kCACX,cAAA,KAACpB;4BAAOqB,SAAQ;4BAAUC,OAAM;4BAAOC,SAAS;uCAAMhB,UAAU,IAAI;;4BAAGiB,IAAG;sCACtE,cAAA,KAAC5B;gCAAiB6B,OAAO;gCAAIC,QAAQ;;;;kCAG7C,KAAC7B,QAAQ8B,QAAQ;wBAACC,GAAG;kCACjB,cAAA,KAAC3B;4BACG4B,cAAcrB,KAAKS,MAAM,CAACC,SAAS;4BACnCT,SAASA;4BACTG,UAAUA;4BACVR,SAASA;4BACTC,oBAAoBA;;;;;;;AAM5C,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {\n    DateRangePickerInlineCalendar,\n    DateRangePickerInlineCalendarProps,\n    DateRangePickerPreset,\n    DateRangePickerValue,\n} from '../date-range-picker';\nimport {useTable} from './TableContext';\n\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n}) => {\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <>\n            {formatedRange}\n            <Popover opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n                        <CalendarSize24Px width={24} height={24} />\n                    </Button>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={form.values.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["CalendarSize24Px","Popover","dayjs","useState","Button","DateRangePickerInlineCalendar","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formatedRange","values","dateRange","onChange","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,OAAO,QAAO,gBAAgB;AACtC,OAAOC,WAAW,QAAQ;AAC1B,SAA2BC,QAAQ,QAAO,QAAQ;AAElD,SAAQC,MAAM,QAAO,YAAY;AACjC,SACIC,6BAA6B,QAI1B,uBAAuB;AAC9B,SAAQC,QAAQ,QAAO,iBAAiB;AAkBxC,OAAO,IAAMC,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BN,6BAAAA,SAAS,KAAK,OAAnCO,SAAqBP,cAAbQ,YAAaR;IAC5B,IAAM,AAACS,OAAQN,WAARM;IAEP,IAAMC,UAAU,SAACC,OAAgC;QAC7CF,KAAKG,aAAa,CAAC,aAAaD;QAChCH,UAAU,KAAK;IACnB;IACA,IAAMK,WAAW,WAAM;QACnBL,UAAU,KAAK;IACnB;IAEA,IAAMM,aAAa,SAACC;eAAehB,MAAMgB,MAAMC,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CH,OAA1CA,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCL,WAAWL,KAAKS,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI;;YACKF;0BACD,MAACnB;gBAAQS,QAAQA;gBAAQa,UAAUZ;;kCAC/B,KAACV,QAAQuB,MAAM;kCACX,cAAA,KAACpB;4BAAOqB,SAAQ;4BAAUC,OAAM;4BAAOC,SAAS;uCAAMhB,UAAU,IAAI;;4BAAGiB,IAAG;sCACtE,cAAA,KAAC5B;gCAAiB6B,OAAO;gCAAIC,QAAQ;;;;kCAG7C,KAAC7B,QAAQ8B,QAAQ;wBAACC,GAAG;kCACjB,cAAA,KAAC3B;4BACG4B,cAAcrB,KAAKS,MAAM,CAACC,SAAS;4BACnCT,SAASA;4BACTG,UAAUA;4BACVR,SAASA;4BACTC,oBAAoBA;;;;;;;AAM5C,EAAE"}

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

@@ -20,19 +20,25 @@ export var TablePagination = function(param) {
     };
     var total = totalPages === null ? getPageCount() : totalPages;
     return /*#__PURE__*/ _jsx(Pagination, {
-        page: state.pagination.pageIndex + 1,
+        value: state.pagination.pageIndex + 1,
         onChange: updatePage,
         total: total,
         boundaries: 0,
         size: "md",
-        getItemAriaLabel: function(label) {
-            switch(label){
-                case "prev":
-                    return "previous page";
+        getControlProps: function(control) {
+            switch(control){
+                case "previous":
+                    return {
+                        component: "button",
+                        "aria-label": "previous page"
+                    };
                 case "next":
-                    return "next page";
+                    return {
+                        component: "button",
+                        "aria-label": "next page"
+                    };
                 default:
-                    return "".concat(label);
+                    return {};
             }
         }
     });

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 {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\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) => ({\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,SAAQA,UAAU,QAAO,gBAAgB;AAGzC,SAAQC,QAAQ,QAAO,iBAAiB;AASxC,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;mBAAe,wCAClBA;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"}
+{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\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) => ({\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            value={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            getControlProps={(control) => {\n                switch (control) {\n                    case 'previous':\n                        return {\n                            component: 'button',\n                            'aria-label': 'previous page',\n                        };\n                    case 'next':\n                        return {component: 'button', 'aria-label': 'next page'};\n                    default:\n                        return {};\n                }\n            }}\n        />\n    );\n};\n"],"names":["Pagination","useTable","TablePagination","totalPages","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","value","onChange","boundaries","size","getControlProps","control","component"],"mappings":";;;AAAA,SAAQA,UAAU,QAAO,gBAAgB;AAGzC,SAAQC,QAAQ,QAAO,iBAAiB;AASxC,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;mBAAe,wCAClBA;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,OAAOb,MAAMO,UAAU,CAACC,SAAS,GAAG;QACpCM,UAAUV;QACVQ,OAAOA;QACPG,YAAY;QACZC,MAAK;QACLC,iBAAiB,SAACC,SAAY;YAC1B,OAAQA;gBACJ,KAAK;oBACD,OAAO;wBACHC,WAAW;wBACX,cAAc;oBAClB;gBACJ,KAAK;oBACD,OAAO;wBAACA,WAAW;wBAAU,cAAc;oBAAW;gBAC1D;oBACI,OAAO,CAAC;YAChB;QACJ;;AAGZ,EAAE"}

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

@@ -12,7 +12,7 @@ var useStyles = createStyles(function(theme) {
         },
         control: {
             width: "100%",
-            padding: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.sm, "px"),
+            padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
             whiteSpace: "nowrap",
             "&:hover": {
                 backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[6] : theme.colors.gray[2]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} 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: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\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() || 'none';\n    const Icon = SortingIcons[sortingOrder];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>\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>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","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","none","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","py","px","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","onClick","position","noWrap","height"],"mappings":";AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,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,MAAM9B;IACN+B,MAAM7B;AACV;AAEA,IAAM8B,gBAAgB;IAClBH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK,gBAA8B;QAAxBC,eAAAA;IACpB,IAAM,AAACC,UAAWzB,YAAXyB;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMnB,QAAQiB,SAAS5B,oBAAoB4B,IAAI,GAAGA,OAAOG,SAAS;IAElE,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACN,OAAOG,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,KAAC7B;YAAG8B,WAAWP,QAAQvB,EAAE;YAAE+B,OAAO;gBAACxB,OAAAA;YAAK;sBACpC,cAAA,KAACb;gBAAK8B,MAAK;gBAAKQ,IAAG;gBAAKC,IAAG;0BACtBpC,WAAWyB,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,MAAM;IACpD,IAAMC,OAAOxB,YAAY,CAACsB,aAAa;IAEvC,qBACI,KAACtC;QAAG8B,WAAWP,QAAQvB,EAAE;QAAE+B,OAAO;YAACxB,OAAAA;QAAK;QAAGkC,aAAWrB,aAAa,CAACkB,aAAa;kBAC7E,cAAA,KAAC3C;YAAe+C,SAASN;YAAQN,WAAWP,QAAQjB,OAAO;sBACvD,cAAA,MAACb;gBAAMkD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAClD;wBAAK8B,MAAK;kCAAM3B,WAAWyB,OAAOG,MAAM,CAACS,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;kCAC7E,KAAC5C;kCACG,cAAA,KAACiD;4BAAKK,QAAQ;;;;;;;AAMtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} 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} ${theme.spacing.sm}`,\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: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\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() || 'none';\n    const Icon = SortingIcons[sortingOrder];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>\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>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","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","none","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","py","px","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","onClick","position","noWrap","height"],"mappings":";AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,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,GAAsBH,OAApBA,MAAMS,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBV,MAAMS,OAAO,CAACE,EAAE;YAChDC,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,MAAM9B;IACN+B,MAAM7B;AACV;AAEA,IAAM8B,gBAAgB;IAClBH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK,gBAA8B;QAAxBC,eAAAA;IACpB,IAAM,AAACC,UAAWzB,YAAXyB;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMnB,QAAQiB,SAAS5B,oBAAoB4B,IAAI,GAAGA,OAAOG,SAAS;IAElE,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACN,OAAOG,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,KAAC7B;YAAG8B,WAAWP,QAAQvB,EAAE;YAAE+B,OAAO;gBAACxB,OAAAA;YAAK;sBACpC,cAAA,KAACb;gBAAK8B,MAAK;gBAAKQ,IAAG;gBAAKC,IAAG;0BACtBpC,WAAWyB,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,MAAM;IACpD,IAAMC,OAAOxB,YAAY,CAACsB,aAAa;IAEvC,qBACI,KAACtC;QAAG8B,WAAWP,QAAQvB,EAAE;QAAE+B,OAAO;YAACxB,OAAAA;QAAK;QAAGkC,aAAWrB,aAAa,CAACkB,aAAa;kBAC7E,cAAA,KAAC3C;YAAe+C,SAASN;YAAQN,WAAWP,QAAQjB,OAAO;sBACvD,cAAA,MAACb;gBAAMkD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAClD;wBAAK8B,MAAK;kCAAM3B,WAAWyB,OAAOG,MAAM,CAACS,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;kCAC7E,KAAC5C;kCACG,cAAA,KAACiD;4BAAKK,QAAQ;;;;;;;AAMtC,EAAE"}

package/dist/esm/theme/Theme.js

@@ -2,6 +2,7 @@ import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InfoSize24Px } from "@coveord/plasma-react-icons";
 import { color } from "@coveord/plasma-tokens";
+import { getSize, rem } from "@mantine/core";
 import { PlasmaColors } from "./PlasmaColors";
 export var plasmaTheme = {
     // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts
@@ -11,11 +12,11 @@ export var plasmaTheme = {
     defaultRadius: 8,
     lineHeight: 1.5,
     spacing: {
-        xs: 8,
-        sm: 16,
-        md: 24,
-        lg: 32,
-        xl: 40
+        xs: "8px",
+        sm: "16px",
+        md: "24px",
+        lg: "32px",
+        xl: "40px"
     },
     primaryColor: "action",
     headings: {
@@ -23,32 +24,32 @@ export var plasmaTheme = {
         fontWeight: 500,
         sizes: {
             h1: {
-                fontSize: 48,
+                fontSize: "48px",
                 lineHeight: undefined,
                 fontWeight: 300
             },
             h2: {
-                fontSize: 32,
+                fontSize: "32px",
                 lineHeight: undefined,
                 fontWeight: 500
             },
             h3: {
-                fontSize: 24,
+                fontSize: "24px",
                 lineHeight: undefined,
                 fontWeight: 500
             },
             h4: {
-                fontSize: 18,
+                fontSize: "18px",
                 lineHeight: undefined,
                 fontWeight: 300
             },
             h5: {
-                fontSize: 14,
+                fontSize: "14px",
                 lineHeight: undefined,
                 fontWeight: 500
             },
             h6: {
-                fontSize: 12,
+                fontSize: "12px",
                 lineHeight: undefined,
                 fontWeight: 500
             }
@@ -93,30 +94,38 @@ export var plasmaTheme = {
             }
         },
         Button: {
-            styles: function(theme, params) {
+            styles: function() {
                 return {
                     root: {
-                        fontWeight: 400,
-                        backgroundColor: params.variant === "outline" ? "white" : undefined
+                        fontWeight: 400
                     }
                 };
+            },
+            variants: {
+                outline: function() {
+                    return {
+                        root: {
+                            backgroundColor: "white"
+                        }
+                    };
+                }
             }
         },
         Modal: {
             styles: function(theme, param) {
                 var size = param.size, fullScreen = param.fullScreen;
                 return {
-                    modal: {
-                        width: fullScreen ? undefined : theme.fn.size({
+                    content: {
+                        flex: fullScreen ? "0 0 100%" : "0 0 ".concat(getSize({
                             size: size,
                             sizes: {
-                                xs: 440,
-                                sm: 550,
-                                md: 800,
-                                lg: 1334,
-                                xl: "85%"
+                                xs: rem(440),
+                                sm: rem(550),
+                                md: rem(800),
+                                lg: rem(1334),
+                                xl: rem("85%")
                             }
-                        }),
+                        })),
                         overflow: "auto"
                     },
                     title: {
@@ -125,8 +134,10 @@ export var plasmaTheme = {
                 };
             },
             defaultProps: {
-                overlayColor: color.primary.navy[9],
-                overlayOpacity: 0.9
+                overlayProps: {
+                    color: color.primary.navy[9],
+                    opacity: 0.9
+                }
             }
         },
         InputWrapper: {
@@ -181,7 +192,7 @@ export var plasmaTheme = {
         },
         Anchor: {
             defaultProps: {
-                color: "action"
+                color: "action.6"
             },
             styles: function(theme) {
                 return {

package/dist/esm/theme/Theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    lineHeight: 1.5,\n    spacing: {\n        xs: 8,\n        sm: 16,\n        md: 24,\n        lg: 32,\n        xl: 40,\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: 48, lineHeight: undefined, fontWeight: 300},\n            h2: {fontSize: 32, lineHeight: undefined, fontWeight: 500},\n            h3: {fontSize: 24, lineHeight: undefined, fontWeight: 500},\n            h4: {fontSize: 18, lineHeight: undefined, fontWeight: 300},\n            h5: {fontSize: 14, lineHeight: undefined, fontWeight: 500},\n            h6: {fontSize: 12, lineHeight: undefined, fontWeight: 500},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},\n                },\n            }),\n        },\n        Text: {\n            defaultProps: {\n                weight: 300,\n            },\n        },\n        Button: {\n            styles: (theme, params: ButtonStylesParams) => ({\n                root: {\n                    fontWeight: 400,\n                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n                },\n            }),\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n                modal: {\n                    width: fullScreen\n                        ? undefined\n                        : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),\n                    overflow: 'auto',\n                },\n                title: {width: '100%'},\n            }),\n            defaultProps: {\n                overlayColor: color.primary.navy[9],\n                overlayOpacity: 0.9,\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n            styles: (theme) => ({\n                label: {\n                    marginBottom: theme.spacing.xs,\n                },\n                description: {\n                    fontSize: theme.fontSizes.sm,\n                    color: theme.colors.gray[7],\n                    marginBottom: theme.spacing.xs,\n                },\n                invalid: {\n                    color: theme.colors.red[9],\n                    borderColor: theme.colors.red[6],\n                },\n                error: {\n                    color: theme.colors.red[9],\n                },\n            }),\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n                multiline: true,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n        Popover: {\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        },\n        Badge: {\n            styles: {\n                root: {\n                    textTransform: 'none',\n                    padding: '4px 8px',\n                    fontWeight: 500,\n                },\n            },\n        },\n        ColorSwatch: {\n            defaultProps: {\n                size: 8,\n                withShadow: false,\n            },\n        },\n        MenuItem: {\n            defaultProps: {\n                fw: 300,\n            },\n        },\n    },\n};\n"],"names":["InfoSize24Px","color","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Text","weight","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overflow","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw"],"mappings":";;AAAA,SAAQA,YAAY,QAAO,8BAA8B;AACzD,SAAQC,KAAK,QAAO,yBAAyB;AAG7C,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,OAAO,IAAMC,cAAoC;IAC7C,2HAA2H;IAC3HC,aAAa;IACbC,YAAY;IACZC,OAAOL,MAAMM,OAAO,CAACC,IAAI,CAAC,EAAE;IAC5BC,eAAe;IACfC,YAAY;IACZC,SAAS;QACLC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;IACR;IACAC,cAAc;IACdC,UAAU;QACNb,YAAY;QACZc,YAAY;QACZC,OAAO;YACHC,IAAI;gBAACC,UAAU;gBAAIZ,YAAYa;gBAAWJ,YAAY;YAAG;YACzDK,IAAI;gBAACF,UAAU;gBAAIZ,YAAYa;gBAAWJ,YAAY;YAAG;YACzDM,IAAI;gBAACH,UAAU;gBAAIZ,YAAYa;gBAAWJ,YAAY;YAAG;YACzDO,IAAI;gBAACJ,UAAU;gBAAIZ,YAAYa;gBAAWJ,YAAY;YAAG;YACzDQ,IAAI;gBAACL,UAAU;gBAAIZ,YAAYa;gBAAWJ,YAAY;YAAG;YACzDS,IAAI;gBAACN,UAAU;gBAAIZ,YAAYa;gBAAWJ,YAAY;YAAG;QAC7D;IACJ;IACAU,SAAS;QACLjB,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;IACR;IACAc,QAAQ5B;IACR6B,YAAY;QACRC,OAAO;YACHC,cAAc;gBACVC,oBAAM,KAAClC;oBAAamC,QAAQ;;gBAC5BlC,OAAO;YACX;YACAmC,QAAQ;gBACJC,OAAO;oBACHlB,YAAY;gBAChB;YACJ;QACJ;QACAmB,OAAO;YACHF,QAAQ,SAACG;uBAAW;oBAChBC,MAAM;wBACF,2BAA2B;4BAACC,eAAe;wBAAS;oBACxD;gBACJ;;QACJ;QACAC,MAAM;YACFT,cAAc;gBACVU,QAAQ;YACZ;QACJ;QACAC,QAAQ;YACJR,QAAQ,SAACG,OAAOM;uBAAgC;oBAC5CL,MAAM;wBACFrB,YAAY;wBACZ2B,iBAAiBD,OAAOE,OAAO,KAAK,YAAY,UAAUxB,SAAS;oBACvE;gBACJ;;QACJ;QACAyB,OAAO;YACHZ,QAAQ,SAACG;oBAAQU,aAAAA,MAAMC,mBAAAA;uBAAoC;oBACvDC,OAAO;wBACHC,OAAOF,aACD3B,YACAgB,MAAMc,EAAE,CAACJ,IAAI,CAAC;4BAACA,MAAAA;4BAAM7B,OAAO;gCAACR,IAAI;gCAAKC,IAAI;gCAAKC,IAAI;gCAAKC,IAAI;gCAAMC,IAAI;4BAAK;wBAAC,EAAE;wBACpFsC,UAAU;oBACd;oBACAjB,OAAO;wBAACe,OAAO;oBAAM;gBACzB;;YACAnB,cAAc;gBACVsB,cAActD,MAAMM,OAAO,CAACiD,IAAI,CAAC,EAAE;gBACnCC,gBAAgB;YACpB;QACJ;QACAC,cAAc;YACVzB,cAAc;gBACV0B,cAAc,KAAK;YACvB;YACAvB,QAAQ,SAACG;uBAAW;oBAChBqB,OAAO;wBACHC,cAActB,MAAM5B,OAAO,CAACC,EAAE;oBAClC;oBACAkD,aAAa;wBACTxC,UAAUiB,MAAMwB,SAAS,CAAClD,EAAE;wBAC5BZ,OAAOsC,MAAMT,MAAM,CAACtB,IAAI,CAAC,EAAE;wBAC3BqD,cAActB,MAAM5B,OAAO,CAACC,EAAE;oBAClC;oBACAoD,SAAS;wBACL/D,OAAOsC,MAAMT,MAAM,CAACmC,GAAG,CAAC,EAAE;wBAC1BC,aAAa3B,MAAMT,MAAM,CAACmC,GAAG,CAAC,EAAE;oBACpC;oBACAE,OAAO;wBACHlE,OAAOsC,MAAMT,MAAM,CAACmC,GAAG,CAAC,EAAE;oBAC9B;gBACJ;;QACJ;QACAG,WAAW;YACPnC,cAAc;gBACVoC,QAAQ;YACZ;QACJ;QACAC,SAAS;YACLrC,cAAc;gBACVhC,OAAO;gBACPsE,WAAW,IAAI;gBACfC,cAAc,IAAI;gBAClBC,WAAW,IAAI;YACnB;QACJ;QACAC,QAAQ;YACJzC,cAAc;gBACVc,SAAS;gBACT9C,OAAO;YACX;QACJ;QACA0E,iBAAiB;YACbvC,QAAQ;gBACJwC,MAAM;oBACFC,WAAW;gBACf;YACJ;QACJ;QACAC,QAAQ;YACJ7C,cAAc;gBACVhC,OAAO;YACX;YACAmC,QAAQ,SAACG;uBAAW;oBAChBC,MAAM,mBACCD,MAAMc,EAAE,CAAC0B,KAAK,CAAC;wBACdC,gBAAgB;wBAChB/E,OAAOsC,MAAMT,MAAM,CAACmD,MAAM,CAAC,EAAE;oBACjC;gBAER;;QACJ;QACAC,UAAU;YACNjD,cAAc;gBACVoC,QAAQ;YACZ;QACJ;QACAc,MAAM;YACF/C,QAAQ;uBAAO;oBACXI,MAAM;wBACF4C,eAAe;oBACnB;gBACJ;;QACJ;QACAC,OAAO;YACHjD,QAAQ;gBACJkD,cAAc;oBACVC,SAAS;oBACTC,YAAY;gBAChB;YACJ;QACJ;QACAC,SAAS;YACLxD,cAAc;gBACVyD,QAAQ;gBACRnB,WAAW,IAAI;YACnB;QACJ;QACAoB,OAAO;YACHvD,QAAQ;gBACJI,MAAM;oBACFoD,eAAe;oBACfC,SAAS;oBACT1E,YAAY;gBAChB;YACJ;QACJ;QACA2E,aAAa;YACT7D,cAAc;gBACVgB,MAAM;gBACN8C,YAAY,KAAK;YACrB;QACJ;QACAC,UAAU;YACN/D,cAAc;gBACVgE,IAAI;YACR;QACJ;IACJ;AACJ,EAAE"}
+{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {getSize, MantineThemeOverride, ModalProps, rem} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    lineHeight: 1.5,\n    spacing: {\n        xs: '8px',\n        sm: '16px',\n        md: '24px',\n        lg: '32px',\n        xl: '40px',\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: '48px', lineHeight: undefined, fontWeight: 300},\n            h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},\n            h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},\n            h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},\n            h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},\n            h6: {fontSize: '12px', lineHeight: undefined, fontWeight: 500},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},\n                },\n            }),\n        },\n        Text: {\n            defaultProps: {\n                weight: 300,\n            },\n        },\n        Button: {\n            styles: () => ({\n                root: {\n                    fontWeight: 400,\n                },\n            }),\n            variants: {\n                outline: () => ({\n                    root: {\n                        backgroundColor: 'white',\n                    },\n                }),\n            },\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalProps) => ({\n                content: {\n                    flex: fullScreen\n                        ? '0 0 100%'\n                        : `0 0 ${getSize({\n                              size: size,\n                              sizes: {\n                                  xs: rem(440),\n                                  sm: rem(550),\n                                  md: rem(800),\n                                  lg: rem(1334),\n                                  xl: rem('85%'),\n                              },\n                          })}`,\n                    overflow: 'auto',\n                },\n                title: {width: '100%'},\n            }),\n            defaultProps: {\n                overlayProps: {\n                    color: color.primary.navy[9],\n                    opacity: 0.9,\n                },\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n            styles: (theme) => ({\n                label: {\n                    marginBottom: theme.spacing.xs,\n                },\n                description: {\n                    fontSize: theme.fontSizes.sm,\n                    color: theme.colors.gray[7],\n                    marginBottom: theme.spacing.xs,\n                },\n                invalid: {\n                    color: theme.colors.red[9],\n                    borderColor: theme.colors.red[6],\n                },\n                error: {\n                    color: theme.colors.red[9],\n                },\n            }),\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n                multiline: true,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action.6',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n        Popover: {\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        },\n        Badge: {\n            styles: {\n                root: {\n                    textTransform: 'none',\n                    padding: '4px 8px',\n                    fontWeight: 500,\n                },\n            },\n        },\n        ColorSwatch: {\n            defaultProps: {\n                size: 8,\n                withShadow: false,\n            },\n        },\n        MenuItem: {\n            defaultProps: {\n                fw: 300,\n            },\n        },\n    },\n};\n"],"names":["InfoSize24Px","color","getSize","rem","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Text","weight","Button","variants","outline","backgroundColor","Modal","size","fullScreen","content","flex","overflow","width","overlayProps","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Loader","variant","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "50.0.2",
+  "version": "51.0.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -14,7 +14,7 @@
   "module": "./dist/esm/index.js",
   "types": "./dist/definitions/index.d.ts",
   "dependencies": {
-    "@mantine/utils": "5.10.1",
+    "@mantine/utils": "6.0.1",
     "@monaco-editor/react": "4.4.5",
     "@swc/helpers": "0.4.14",
     "@tanstack/react-table": "8.7.9",
@@ -30,13 +30,13 @@
   },
   "devDependencies": {
     "@emotion/react": "11.10.6",
-    "@mantine/carousel": "5.9.2",
-    "@mantine/core": "5.9.2",
-    "@mantine/dates": "5.9.2",
-    "@mantine/form": "5.9.2",
-    "@mantine/hooks": "5.9.2",
-    "@mantine/modals": "5.9.2",
-    "@mantine/notifications": "5.9.2",
+    "@mantine/carousel": "6.0.1",
+    "@mantine/core": "6.0.1",
+    "@mantine/dates": "6.0.1",
+    "@mantine/form": "6.0.1",
+    "@mantine/hooks": "6.0.1",
+    "@mantine/modals": "6.0.1",
+    "@mantine/notifications": "6.0.1",
     "@swc/cli": "0.1.62",
     "@swc/core": "1.3.36",
     "@swc/jest": "0.2.24",
@@ -70,12 +70,12 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.0",
-    "@mantine/carousel": "^5.8.3",
-    "@mantine/core": "^5.6.2",
-    "@mantine/dates": "^5.6.2",
-    "@mantine/form": "^5.6.2",
-    "@mantine/hooks": "^5.6.2",
-    "@mantine/modals": "^5.6.2",
+    "@mantine/carousel": "^6.0.1",
+    "@mantine/core": "^6.0.1",
+    "@mantine/dates": "^6.0.1",
+    "@mantine/form": "^6.0.1",
+    "@mantine/hooks": "^6.0.1",
+    "@mantine/modals": "^6.0.1",
     "embla-carousel-react": "^7.0.4",
     "react": ">= 18.0.0",
     "react-dom": ">= 18.0.0"

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

@@ -10,6 +10,7 @@ import {
     Input,
     InputWrapperBaseProps,
     Loader,
+    px,
     Selectors,
     Space,
     Stack,
@@ -184,7 +185,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                     wrappingStrategy: 'advanced',
                     scrollBeyondLastLine: false,
                     formatOnPaste: true,
-                    fontSize: theme.fontSizes.xs,
+                    fontSize: px(theme.fontSizes.xs),
                     readOnly: disabled,
                     tabSize: 2,
                 }}

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

@@ -1,5 +1,5 @@
 import {loader} from '@monaco-editor/react';
-import {render, screen, waitForElementToBeRemoved, within} from '@test-utils';
+import {render, screen, waitForElementToBeRemoved} from '@test-utils';
 import {useForm} from '../../../form';
 
 import {CodeEditor} from '../CodeEditor';
@@ -39,9 +39,7 @@ describe('CodeEditor', () => {
         render(<Fixture />);
         await waitForElementToBeRemoved(screen.queryByRole('presentation'));
 
-        const errors = screen.getByRole('alert');
-
-        expect(within(errors).getByText(/invalid configuration/i)).toBeInTheDocument();
+        expect(screen.getByText(/invalid configuration/i)).toBeInTheDocument();
     });
 
     it('loads the monaco editor files from node_modules when monacoLoader prop is "local"', async () => {

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

@@ -1,11 +1,12 @@
 import {Center, Group, Space} from '@mantine/core';
-import {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';
+import {CalendarBaseProps, DatePicker} from '@mantine/dates';
 import {useForm} from '@mantine/form';
 
 import {Button} from '../button';
 import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
 import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
 
+export type DateRangePickerValue = [Date | null, Date | null];
 export interface DateRangePickerInlineCalendarProps
     extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /**
@@ -36,7 +37,10 @@ export interface DateRangePickerInlineCalendarProps
     /**
      * Props for RangeCalendar displayed in the popover
      */
-    rangeCalendarProps?: Omit<RangeCalendarProps, 'value' | 'onChange'>;
+    rangeCalendarProps?: Omit<
+        CalendarBaseProps,
+        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'
+    >;
 }
 
 export const DateRangePickerInlineCalendar = ({
@@ -84,10 +88,11 @@ export const DateRangePickerInlineCalendar = ({
             </Group>
 
             <Center py="sm" px="md">
-                <RangeCalendar
-                    amountOfMonths={2}
-                    styles={{cell: {textAlign: 'center'}}}
-                    firstDayOfWeek="sunday"
+                <DatePicker
+                    numberOfColumns={2}
+                    type="range"
+                    styles={{calendar: {cell: {textAlign: 'center'}}}}
+                    firstDayOfWeek={0}
                     allowSingleDateInRange
                     {...rangeCalendarProps}
                     {...calendarInputProps}

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

@@ -1,10 +1,11 @@
-import {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';
 import {Group, Popover, Space} from '@mantine/core';
+import {CalendarBaseProps, DatePicker} from '@mantine/dates';
 import {useClickOutside, useUncontrolled} from '@mantine/hooks';
 import {useState} from 'react';
 
+import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
+import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
 import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
-import {DateRangePickerPresetSelect, DateRangePickerPreset} from './DateRangePickerPresetSelect';
 
 interface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /** Default value for uncontrolled input */
@@ -28,7 +29,10 @@ interface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangeP
     /**
      * Props for RangeCalendar
      */
-    rangeCalendarProps?: Omit<RangeCalendarProps, 'value' | 'onChange'>;
+    rangeCalendarProps?: Omit<
+        CalendarBaseProps,
+        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'
+    >;
 }
 
 export const DateRangePickerPopoverCalendar = <T extends unknown>({
@@ -77,11 +81,12 @@ export const DateRangePickerPopoverCalendar = <T extends unknown>({
 
             <Popover opened={opened} onChange={setOpened} trapFocus>
                 <Popover.Dropdown>
-                    <RangeCalendar
+                    <DatePicker
                         ref={ref}
-                        styles={{cell: {textAlign: 'center'}}}
-                        amountOfMonths={2}
-                        firstDayOfWeek="sunday"
+                        type="range"
+                        styles={{calendar: {cell: {textAlign: 'center'}}}}
+                        numberOfColumns={2}
+                        firstDayOfWeek={0}
                         allowSingleDateInRange
                         value={_value}
                         onChange={onCalendarChange}

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

@@ -1,7 +1,7 @@
-import {DateRangePickerValue, isSameDate} from '@mantine/dates';
 import {Select, SelectItem, SelectProps} from '@mantine/core';
-import {useState, useEffect} from 'react';
 import dayjs from 'dayjs';
+import {useEffect, useState} from 'react';
+import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
 
 export interface DateRangePickerPreset {
     label: string;
@@ -26,7 +26,7 @@ export const DateRangePickerPresetSelect = <T extends unknown>({
     const getSelectedPreset = () => {
         if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {
             const selected = Object.entries(presets).find(
-                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && isSameDate(range[1]!, value[1]!)
+                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!)
             );
             if (selected) {
                 return selected[0];

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

@@ -1,6 +1,7 @@
-import {DatePicker, DatePickerProps, DateRangePickerValue} from '@mantine/dates';
+import {DateInput, DatePickerProps} from '@mantine/dates';
 import dayjs from 'dayjs';
 import {ReactNode} from 'react';
+import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
 
 export interface EditableDateRangePickerProps {
     value: DateRangePickerValue;
@@ -34,26 +35,24 @@ export const EditableDateRangePicker = ({
 
     return (
         <>
-            <DatePicker
-                allowFreeInput
+            <DateInput
                 clearable={false}
                 label="Start"
-                {...startProps}
                 value={value?.[0]}
                 onChange={onChangeStart}
                 onFocus={onFocus}
-                styles={{...startProps.styles, dropdown: {display: 'none'}}}
+                popoverProps={{styles: {dropdown: {display: 'none'}}}}
+                styles={{...startProps.styles}}
             />
             {separator}
-            <DatePicker
-                allowFreeInput
+            <DateInput
                 clearable={false}
                 label="End"
-                {...endProps}
                 value={value?.[1]}
                 onChange={onChangeEnd}
                 onFocus={onFocus}
-                styles={{...endProps.styles, dropdown: {display: 'none'}}}
+                popoverProps={{styles: {dropdown: {display: 'none'}}}}
+                styles={{...endProps.styles}}
             />
         </>
     );