@coveord/plasma-mantine 55.8.0 → 56.0.0

package/src/components/table/Table.types.ts

@@ -1,4 +1,4 @@
-import {Icon} from '@coveord/plasma-react-icons';
+import {TablerIcon} from '@coveord/plasma-react-icons';
 import {BoxProps, StylesApiProps} from '@mantine/core';
 import {ColumnDef, CoreOptions, Row, TableOptions} from '@tanstack/table-core';
 import {ReactElement, ReactNode} from 'react';
@@ -23,7 +23,7 @@ export interface TableLayout {
      * Icon illustrating the layout.
      * Will be displayed in the layout control
      */
-    Icon?: Icon;
+    Icon?: TablerIcon;
     /**
      * Header portion of the table.
      * In the standard row layout that is where column headers would be displayed.

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

@@ -1,6 +1,7 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
 import {render, screen, userEvent} from '@test-utils';
 
+import dayjs from 'dayjs';
 import {Table} from '../Table';
 import {useTable} from '../use-table';
 
@@ -12,7 +13,10 @@ const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enabl
 describe('Table.DateRangePicker', () => {
     it('displays the initial dates', () => {
         const Fixture = () => {
-            const store = useTable<RowData>({initialState: {dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}});
+            const store = useTable<RowData>({
+                initialState: {dateRange: [dayjs('2022-01-01').toISOString(), dayjs('2022-01-07').toISOString()]},
+            });
+
             return (
                 <Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
                     <Table.Header>
@@ -35,7 +39,7 @@ describe('Table.DateRangePicker', () => {
             const user = userEvent.setup();
             const Fixture = () => {
                 const store = useTable<RowData>({
-                    initialState: {dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]},
+                    initialState: {dateRange: [dayjs('2022-01-01').toISOString(), dayjs('2022-01-07').toISOString()]},
                     syncWithUrl: true,
                 });
                 return (
@@ -59,10 +63,9 @@ describe('Table.DateRangePicker', () => {
 
         it('initially selects the specified date range from in the url', async () => {
             window.history.replaceState(null, '', '?from=2022-01-02T00%3A00%3A00.000Z&to=2022-01-08T23%3A59%3A59.999Z');
-            const user = userEvent.setup();
             const Fixture = () => {
                 const store = useTable<RowData>({
-                    initialState: {dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]},
+                    initialState: {dateRange: [dayjs('2022-01-02').toISOString(), dayjs('2022-01-08').toISOString()]},
                     syncWithUrl: true,
                 });
                 return (

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

@@ -76,7 +76,7 @@ describe('Table.Filter', () => {
         };
         render(<Fixture />);
         expect(screen.getByRole('textbox')).toHaveValue('foo');
-        await user.click(screen.getByRole('button', {name: /cross/i}));
+        await user.click(screen.getByRole('button', {name: /clear/i}));
         expect(screen.getByRole('textbox')).toHaveValue('');
     });
 

package/src/components/table/layouts/TableLayoutControl.tsx

@@ -13,7 +13,7 @@ export const TableLayoutControl = () => {
                         <Center>
                             {Icon ? (
                                 <>
-                                    <Icon height={16} />
+                                    <Icon size={16} />
                                     <Space w="xs" />
                                 </>
                             ) : null}

package/src/components/table/layouts/__tests__/RowLayout.spec.tsx

@@ -111,11 +111,11 @@ describe('RowLayout', () => {
         render(<Fixture />);
 
         // wait for the collapsible icon to show
-        await screen.findByRole('button', {name: 'arrowHeadDown'});
+        await screen.findByRole('button', {name: 'Expand'});
 
         expect(screen.queryByText('Collapsible content: last')).not.toBeVisible();
 
-        await user.click(screen.getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(screen.getByRole('button', {name: 'Expand'}));
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: last')).toBeVisible();
         });
@@ -156,9 +156,9 @@ describe('RowLayout', () => {
         render(<Fixture />);
 
         // wait for the collapsible icon to show
-        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
+        await screen.findAllByRole('button', {name: 'Expand'});
 
-        const allRows = screen.getAllByRole('button', {name: 'arrowHeadDown'});
+        const allRows = screen.getAllByRole('button', {name: 'Expand'});
         expect(allRows).toHaveLength(2);
     });
 
@@ -190,18 +190,18 @@ describe('RowLayout', () => {
         render(<Fixture />);
 
         // wait for the collapsible icon to show
-        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
+        await screen.findAllByRole('button', {name: 'Expand'});
 
         expect(screen.queryByText('Collapsible content: Russel')).not.toBeVisible();
         expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
 
-        await user.click(within(screen.getAllByRole('row')[1]).getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(within(screen.getAllByRole('row')[1]).getByRole('button', {name: 'Expand'}));
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: Russel')).toBeVisible();
         });
         expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
 
-        await user.click(within(screen.getAllByRole('row')[3]).getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(within(screen.getAllByRole('row')[3]).getByRole('button', {name: 'Expand'}));
 
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: Retriever')).toBeVisible();

package/src/components/table/layouts/row-layout/RowLayout.module.css

@@ -1,18 +1,12 @@
 .headerRow {
-    &[data-selectable='true'] input[type='checkbox'] {
-        border-color: var(--mantine-color-gray-4);
-        pointer-events: auto;
-        cursor: default;
-    }
-
     &[data-selectable='false'] input[type='checkbox'] {
-        background-color: var(--mantine-color-gray-2);
-        border-color: var(--mantine-color-gray-3);
+        background-color: var(--mantine-color-gray-light);
+        border-color: var(--mantine-color-default-border);
         pointer-events: none;
         cursor: not-allowed;
 
         & + svg {
-            color: var(--mantine-color-gray-5);
+            color: var(--mantine-color-dimmed);
         }
     }
 }
@@ -25,23 +19,23 @@
     }
 
     @mixin hover {
-        background-color: var(--mantine-color-gray-1);
+        background-color: var(--mantine-color-gray-light-hover);
     }
 
     &[data-selectable='false'] input[type='checkbox'] {
-        background-color: var(--mantine-color-gray-2);
-        border-color: var(--mantine-color-gray-3);
+        background-color: var(--mantine-color-gray-light);
+        border-color: var(--mantine-color-default-border);
         pointer-events: none;
         cursor: not-allowed;
 
         &:checked + svg {
-            color: var(--mantine-color-gray-5);
+            color: var(--mantine-color-dimmed);
         }
     }
 
     &[data-selected='true'] {
         &[data-multi-selection='false'] {
-            background-color: var(--mantine-color-gray-1);
+            background-color: var(--mantine-color-gray-light-hover);
         }
 
         &[data-multi-selection='true'] {
@@ -61,10 +55,10 @@
     /* We must use height instead of minHeight here, otherwise it doesn’t apply */
     height: 56px;
     padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-    border-bottom: rem(1) solid var(--mantine-color-gray-3);
+    border-bottom: rem(1) solid var(--mantine-color-default-border);
 }
 
 .collapsibleWrapper {
-    border-bottom: rem(1) solid var(--mantine-color-gray-3);
-    background-color: var(--mantine-color-gray-1);
+    border-bottom: rem(1) solid var(--mantine-color-default-border);
+    background-color: var(--mantine-color-gray-light);
 }

package/src/components/table/layouts/row-layout/RowLayout.tsx

@@ -1,3 +1,4 @@
+import {IconList} from '@coveord/plasma-react-icons';
 import {Factory, MantineComponent, StylesApiProps, useProps, useStyles} from '@mantine/core';
 import {ReactNode} from 'react';
 import {identity} from '../../../../utils';
@@ -6,7 +7,6 @@ import classes from './RowLayout.module.css';
 import {RowLayoutBody, RowLayoutBodyStylesNames} from './RowLayoutBody';
 import {RowLayoutProvider} from './RowLayoutContext';
 import {RowLayoutHeader, RowLayoutHeaderStyleNames} from './RowLayoutHeader';
-import {RowLayoutIcon} from './RowLayoutIcon';
 
 type RowLayoutStylesNames = RowLayoutHeaderStyleNames | RowLayoutBodyStylesNames;
 export interface RowLayoutProps extends StylesApiProps<RowLayoutFactory> {
@@ -37,6 +37,6 @@ export const RowLayout = ((props: RowLayoutProps) => {
 
 RowLayout.Body = RowLayoutBody;
 RowLayout.Header = RowLayoutHeader;
-RowLayout.Icon = RowLayoutIcon;
+RowLayout.Icon = IconList;
 RowLayout.displayName = 'Rows';
 RowLayout.extend = identity;

package/src/components/table/table-actions/TableActionItem.tsx

@@ -1,15 +1,9 @@
-import {
-    CompoundStylesApiProps,
-    Menu,
-    MenuItemProps,
-    PolymorphicFactory,
-    polymorphicFactory,
-    useProps,
-} from '@mantine/core';
+import {CompoundStylesApiProps, PolymorphicFactory, polymorphicFactory, useProps} from '@mantine/core';
 import {ReactNode} from 'react';
 import {Button, ButtonProps} from '../../button';
 import {useTableContext} from '../TableContext';
 import {useTableActionContext} from './TableActionContext';
+import {Menu, MenuItemProps} from '../../menu';
 
 export type TableActionItemStylesNames = 'actionItemRoot';
 
@@ -54,15 +48,14 @@ export const TableActionItem = polymorphicFactory<TableActionItemFactory>(
 
         if (primary) {
             return (
-                <Button
+                <Button.Quaternary
                     component={component}
                     ref={ref}
-                    variant="subtle"
                     {...others}
                     {...getStyles('actionItemRoot', {className, style, classNames, styles})}
                 >
                     {children}
-                </Button>
+                </Button.Quaternary>
             );
         }
 

package/src/components/table/table-actions/TableActionsList.tsx

@@ -1,10 +1,8 @@
 import {MoreSize16Px} from '@coveord/plasma-react-icons';
 import {
-    ActionIcon,
     Box,
-    Button,
-    CSSProperties,
     CompoundStylesApiProps,
+    CSSProperties,
     ExtendComponent,
     Factory,
     Menu,
@@ -13,6 +11,8 @@ import {
     useProps,
 } from '@mantine/core';
 import {MouseEventHandler, ReactNode, useState} from 'react';
+import {ActionIcon} from '../../action-icon';
+import {Button} from '../../button';
 import {InlineConfirm} from '../../inline-confirm';
 import {TableAction} from '../Table.types';
 import {useTableContext} from '../TableContext';
@@ -131,13 +131,12 @@ export const TableActionsList = (props: TableActionsListProps) => {
                     <TableActionProvider value={{primary: false}}>
                         <Menu withinPortal={false} {...others} keepMounted>
                             <Menu.Target>
-                                <Button
+                                <Button.Quaternary
                                     {...getStyles('actionsTarget', {styles, classNames})}
-                                    variant="subtle"
                                     leftSection={icon}
                                 >
                                     {label}
-                                </Button>
+                                </Button.Quaternary>
                             </Menu.Target>
                             <Menu.Dropdown {...getStyles('actionsDropdown', {styles, classNames})}>
                                 <ActionsGroupsMenuItems
@@ -159,13 +158,12 @@ export const TableActionsList = (props: TableActionsListProps) => {
                 <Menu opened={opened} onChange={onChange} {...others} keepMounted>
                     <Menu.Target>
                         <Tooltip label={label} {...getStyles('actionsTooltip', {styles, classNames})}>
-                            <ActionIcon
+                            <ActionIcon.Quaternary
                                 {...getStyles('actionsTarget', {styles, classNames})}
                                 onClick={onClick}
-                                variant="subtle"
                             >
                                 {icon}
-                            </ActionIcon>
+                            </ActionIcon.Quaternary>
                         </Tooltip>
                     </Menu.Target>
                     <Menu.Dropdown {...getStyles('actionsDropdown', {styles, classNames})}>

package/src/components/table/table-column/TableCollapsibleColumn.tsx

@@ -1,4 +1,4 @@
-import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';
+import {IconChevronDown, IconChevronUp} from '@coveord/plasma-react-icons';
 import {Factory, factory, useProps} from '@mantine/core';
 import {CellContext, ColumnDef} from '@tanstack/table-core';
 import {MouseEvent as ReactMouseEvent, ReactNode} from 'react';
@@ -58,8 +58,8 @@ type TableCollapsibleColumnFactory = Factory<{
 }>;
 
 const defaultProps: Partial<CollapsibleIconProps> = {
-    iconExpanded: <ArrowHeadUpSize16Px height={16} />,
-    iconCollapsed: <ArrowHeadDownSize16Px height={16} />,
+    iconExpanded: <IconChevronUp aria-label="Collapse" size={16} />,
+    iconCollapsed: <IconChevronDown aria-label="Expand" size={16} />,
 };
 
 const CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {
@@ -76,16 +76,15 @@ const CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {
         handler();
     };
     return info.row.getCanExpand() ? (
-        <ActionIcon
+        <ActionIcon.Quaternary
             ref={ref}
             onClick={onClick}
-            variant="subtle"
             color="gray"
             radius="sm"
             {...getStyles('collapsibleIcon', {className, classNames, styles, style})}
             {...others}
         >
             {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}
-        </ActionIcon>
+        </ActionIcon.Quaternary>
     ) : null;
 });

package/src/components/table/table-date-range-picker/TableDateRangePicker.tsx

@@ -1,13 +1,13 @@
 import {CalendarSize16Px} from '@coveord/plasma-react-icons';
-import {BoxProps, CompoundStylesApiProps, Factory, Grid, InputBase, Popover, factory, useProps} from '@mantine/core';
+import {BoxProps, CompoundStylesApiProps, Factory, factory, Grid, InputBase, Popover, useProps} from '@mantine/core';
 import dayjs from 'dayjs';
 
+import {type DatesRangeValue, type DateStringValue} from '@mantine/dates';
 import {useState} from 'react';
 import {
     DateRangePickerInlineCalendar,
     DateRangePickerInlineCalendarProps,
     DateRangePickerPreset,
-    DateRangePickerValue,
 } from '../../date-range-picker';
 import {TableComponentsOrder} from '../Table';
 import {useTableContext} from '../TableContext';
@@ -52,7 +52,7 @@ export const TableDateRangePicker = factory<TableDateRangePickerFactory>((props,
     );
     const [opened, setOpened] = useState(false);
 
-    const onApply = (dates: DateRangePickerValue) => {
+    const onApply = (dates: DatesRangeValue<DateStringValue | null>) => {
         store.setDateRange(dates);
         store.setPagination({pageIndex: 0, pageSize: store.state.pagination.pageSize});
         setOpened(false);
@@ -62,9 +62,11 @@ export const TableDateRangePicker = factory<TableDateRangePickerFactory>((props,
         setOpened(false);
     };
 
-    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');
+    const formatDate = (date: DateStringValue) => dayjs(date).format('MMM DD, YYYY');
     const formattedRange = `${formatDate(store.state.dateRange[0])} - ${formatDate(store.state.dateRange[1])}`;
-    const dateRangeInitialized = store.state.dateRange.every((date) => date instanceof Date);
+    const dateRangeInitialized = store.state.dateRange.every(
+        (date: DateStringValue) => typeof date === 'string' && date !== '',
+    );
 
     const stylesApiProps = {classNames, styles};
 
@@ -76,7 +78,7 @@ export const TableDateRangePicker = factory<TableDateRangePickerFactory>((props,
             {...getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}
             {...others}
         >
-            <Popover withinPortal opened={opened} onChange={setOpened}>
+            <Popover opened={opened} onChange={setOpened}>
                 <Popover.Target>
                     <InputBase
                         component="button"

package/src/components/table/table-filter/TableFilter.tsx

@@ -1,8 +1,9 @@
-import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, BoxProps, CompoundStylesApiProps, Factory, Grid, TextInput, factory, useProps} from '@mantine/core';
+import {IconSearch, IconX} from '@coveord/plasma-react-icons';
+import {BoxProps, CompoundStylesApiProps, Factory, factory, Grid, TextInput, useProps} from '@mantine/core';
 import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
 import {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';
 
+import {ActionIcon} from '../../action-icon';
 import {TableComponentsOrder} from '../Table';
 import {useTableContext} from '../TableContext';
 
@@ -74,11 +75,11 @@ export const TableFilter = factory<TableFilterFactory>((props, ref) => {
                 autoComplete="off"
                 rightSection={
                     filter ? (
-                        <ActionIcon onClick={handleClear} color="gray" variant="subtle">
-                            <CrossSize16Px height={16} />
-                        </ActionIcon>
+                        <ActionIcon.Quaternary onClick={handleClear}>
+                            <IconX aria-label="clear" size={16} />
+                        </ActionIcon.Quaternary>
                     ) : (
-                        <FilterSize16Px height={16} {...getStyles('filterEmpty', stylesApiProps)} />
+                        <IconSearch size={16} {...getStyles('filterEmpty', stylesApiProps)} />
                     )
                 }
                 value={filter}

package/src/components/table/table-header/TableHeader.tsx

@@ -23,6 +23,12 @@ export interface TableHeaderProps
      * default true
      */
     showActions?: boolean;
+    /**
+     * Whether to show a border on top of the header
+     *
+     * default true
+     */
+    borderTop?: boolean;
 }
 
 export type TableHeaderFactory = Factory<{
@@ -36,6 +42,7 @@ const defaultProps: Partial<TableHeaderProps> = {
     unselectAllLabel: 'Unselect all',
     selectedCountLabel: (count) => `${count} selected`,
     showActions: true,
+    borderTop: true,
 };
 
 export const TableHeader = factory<TableHeaderFactory>((props, ref) => {
@@ -44,6 +51,7 @@ export const TableHeader = factory<TableHeaderFactory>((props, ref) => {
         showActions,
         unselectAllLabel,
         selectedCountLabel,
+        borderTop,
         children,
         classNames,
         className,
@@ -59,7 +67,12 @@ export const TableHeader = factory<TableHeaderFactory>((props, ref) => {
     const gridStyles = getStyles('headerGrid', stylesApiProps);
 
     return (
-        <Box ref={ref} {...getStyles('headerRoot', {className, style, ...stylesApiProps})} {...others}>
+        <Box
+            ref={ref}
+            {...getStyles('headerRoot', {className, style, ...stylesApiProps})}
+            {...others}
+            mod={{'with-border-top': borderTop}}
+        >
             <Grid
                 justify="flex-start"
                 align="center"
@@ -73,14 +86,13 @@ export const TableHeader = factory<TableHeaderFactory>((props, ref) => {
                         order={TableComponentsOrder.MultiSelectInfo}
                     >
                         <Tooltip label={unselectAllLabel}>
-                            <Button
+                            <Button.Quaternary
                                 onClick={store.clearRowSelection}
-                                variant="subtle"
                                 disabled={!store.rowSelectionEnabled}
                                 leftSection={<CrossSize16Px height={16} />}
                             >
                                 {selectedCountLabel(selectedRows.length)}
-                            </Button>
+                            </Button.Quaternary>
                         </Tooltip>
                     </Grid.Col>
                 ) : null}

package/src/components/table/table-last-updated/TableLastUpdated.tsx

@@ -1,19 +1,16 @@
-import {BoxProps, CompoundStylesApiProps, factory, Factory, Group, Text, useProps} from '@mantine/core';
+import {BoxProps, CompoundStylesApiProps, factory, Factory} from '@mantine/core';
 import {useDidUpdate} from '@mantine/hooks';
-import dayjs from 'dayjs';
 import {useState} from 'react';
+import {LastUpdated, LastUpdatedProps} from '../../last-updated/LastUpdated';
 import {useTableContext} from '../TableContext';
 
 export type TableLastUpdatedStylesNames = 'lastUpdatedRoot' | 'lastUpdatedLabel';
 
-export interface TableLastUpdatedProps extends BoxProps, CompoundStylesApiProps<TableLastUpdatedFactory> {
-    /**
-     * Label to contextualize the date
-     *
-     * @default "Last update:"
-     */
-    label?: string;
-}
+export interface TableLastUpdatedProps
+    extends BoxProps,
+        CompoundStylesApiProps<TableLastUpdatedFactory>,
+        Pick<LastUpdatedProps, 'label'> {}
+
 export type TableLastUpdatedFactory = Factory<{
     props: TableLastUpdatedProps;
     ref: HTMLDivElement;
@@ -21,37 +18,34 @@ export type TableLastUpdatedFactory = Factory<{
     compound: true;
 }>;
 
-const defaultProps: Partial<TableLastUpdatedProps> = {
-    label: 'Last update:',
-};
-
 export const TableLastUpdated = factory<TableLastUpdatedFactory>((props, ref) => {
     const {table, getStyles} = useTableContext();
-    const {label, classNames, className, styles, style, vars, ...others} = useProps(
-        'PlasmaTableLastUpdated',
-        defaultProps,
-        props,
-    );
+    const {classNames: _classNames, styles: _styles, vars: _vars, ...lastUpdatedProps} = props;
     const [time, setTime] = useState(new Date());
 
+    const {className: rootClassName, style: rootStyle} = getStyles('lastUpdatedRoot', {
+        classNames: _classNames,
+        styles: _styles,
+    });
+
+    const {className: labelClassName, style: labelStyle} = getStyles('lastUpdatedLabel', {
+        classNames: _classNames,
+        styles: _styles,
+    });
+
     useDidUpdate(() => {
         setTime(new Date());
     }, [table.options.data]);
 
-    const stylesApiProps = {classNames, styles};
-
     return (
-        <Group
-            px="xl"
-            justify="right"
+        <LastUpdated
+            time={time}
             ref={ref}
-            {...getStyles('lastUpdatedRoot', {className, style, ...stylesApiProps})}
-            {...others}
-        >
-            <Text size="xs" {...getStyles('lastUpdatedLabel', {className, style, ...stylesApiProps})}>
-                {label}
-                <span role="timer">{dayjs(time).format('h:mm:ss A')}</span>
-            </Text>
-        </Group>
+            justify="right"
+            px="lg"
+            classNames={{root: rootClassName, label: labelClassName}}
+            styles={{root: rootStyle, label: labelStyle}}
+            {...lastUpdatedProps}
+        />
     );
 });

package/src/components/table/use-table.ts

@@ -1,8 +1,8 @@
+import type {DatesRangeValue, DateStringValue} from '@mantine/dates';
 import {useDidUpdate} from '@mantine/hooks';
 import {type ExpandedState, type PaginationState, type SortingState} from '@tanstack/table-core';
 import defaultsDeep from 'lodash.defaultsdeep';
 import {Dispatch, SetStateAction, useCallback, useMemo, useState} from 'react';
-import {type DateRangePickerValue} from '../date-range-picker';
 import {useUrlSyncedState, UseUrlSyncedStateOptions} from './use-url-synced-state';
 
 // Create a deeply optional version of another type
@@ -61,7 +61,7 @@ export interface TableState<TData = unknown> {
      *
      * @default [null, null]
      */
-    dateRange: DateRangePickerValue;
+    dateRange: DatesRangeValue<DateStringValue | null>;
     /**
      * Currently selected rows
      *
@@ -272,12 +272,12 @@ const LAYOUT_SERIALIZATION = serialization<'layout'>({
 
 const DATE_RANGE_SERIALIZATION = serialization<'dateRange'>({
     serializer: ([from, to]) => [
-        ['from', from?.toISOString() ?? '', true],
-        ['to', to?.toISOString() ?? '', true],
+        ['from', from ? new Date(from).toISOString() : '', true],
+        ['to', to ? new Date(to).toISOString() : '', true],
     ],
     deserializer: (params, initial) => [
-        params.get('from') ? new Date(params.get('from') as string) : initial[0],
-        params.get('to') ? new Date(params.get('to') as string) : initial[1],
+        params.get('from') ? params.get('from') : initial[0],
+        params.get('to') ? params.get('to') : initial[1],
     ],
 });
 

package/src/images/placeholder.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 3.58172 3.58172 0 8 0L40 0C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40L0 8Z" fill="#F5F5F5"/>
+<path d="M26 21.3333H26.0067M18 26.6667L21.3333 23.3333C21.952 22.738 22.7147 22.738 23.3333 23.3333L26.6667 26.6667M25.3333 25.3333L26 24.6667C26.6187 24.0713 27.3813 24.0713 28 24.6667L30 26.6667M18 20C18 19.4696 18.2107 18.9609 18.5858 18.5858C18.9609 18.2107 19.4696 18 20 18H28C28.5304 18 29.0391 18.2107 29.4142 18.5858C29.7893 18.9609 30 19.4696 30 20V28C30 28.5304 29.7893 29.0391 29.4142 29.4142C29.0391 29.7893 28.5304 30 28 30H20C19.4696 30 18.9609 29.7893 18.5858 29.4142C18.2107 29.0391 18 28.5304 18 28V20Z" stroke="#676D7A" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/index.ts

@@ -5,6 +5,7 @@ import {type PlasmaColors} from './theme/PlasmaColors';
 export * from '@mantine/carousel';
 export * from '@mantine/core';
 export {Pagination} from '@mantine/core';
+export {type DatesRangeValue} from '@mantine/dates';
 export * from '@mantine/form';
 export * from '@mantine/hooks';
 export * from '@mantine/notifications';
@@ -15,9 +16,13 @@ export {noop};
 
 // explicitly overriding mantine components
 export {
+    Accordion,
     ActionIcon,
+    Alert,
+    Badge,
     BrowserPreview,
     Button,
+    Chip,
     CopyToClipboard,
     Header,
     Menu,
@@ -31,6 +36,7 @@ export {
     type HeaderProps,
     type MenuItemProps,
     type ModalFactory,
+    type ModalProps,
     type TableProps,
     type TableState,
 } from './components';