@coveord/plasma-mantine 55.3.3 → 55.4.0

package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /**\n     * Initial selected range\n     */\n    initialRange: DateRangePickerValue;\n    /**\n     * Function called when the user applies the new date range\n     *\n     * @param range the newly selected dates\n     */\n    onApply: (range: DateRangePickerValue) => void;\n    /**\n     * Function called when the user click on the cancel button\n     */\n    onCancel: () => void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar displayed in the popover\n     */\n    rangeCalendarProps?: Omit<\n        DatePickerBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerInlineCalendar = ({\n    initialRange,\n    onApply,\n    onCancel,\n    presets,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n    const form = useForm({\n        initialValues: {\n            dates: initialRange,\n        },\n    });\n    const calendarInputProps = form.getInputProps('dates');\n\n    const onCalendarApply = () => {\n        if (!form.values.dates[1]) {\n            form.values.dates[1] = form.values.dates[0]; // when date range is the same day\n        }\n        onApply(form.values.dates);\n    };\n\n    return (\n        <>\n            <Group align=\"center\" gap=\"xs\" grow px=\"md\" py=\"sm\" className={DateRangeClasses.picker}>\n                <EditableDateRangePicker\n                    value={calendarInputProps.value}\n                    {...calendarInputProps}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect\n                            value={calendarInputProps.value}\n                            presets={presets}\n                            {...calendarInputProps}\n                            selectProps={{comboboxProps: {withinPortal: false}}}\n                        />\n                    </>\n                ) : null}\n            </Group>\n\n            <Center py=\"sm\" px=\"md\">\n                <DatePicker\n                    numberOfColumns={2}\n                    columnsToScroll={1}\n                    type=\"range\"\n                    styles={{day: {textAlign: 'center'}}}\n                    firstDayOfWeek={0}\n                    allowSingleDateInRange\n                    {...rangeCalendarProps}\n                    {...calendarInputProps}\n                />\n            </Center>\n\n            <Group justify=\"right\" gap=\"xs\" px=\"md\" py=\"sm\" className={DateRangeClasses.save}>\n                <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n                    Cancel\n                </Button>\n                <Button size=\"xs\" onClick={onCalendarApply}>\n                    Apply\n                </Button>\n            </Group>\n        </>\n    );\n};\n"],"names":["Center","Group","Space","DatePicker","useForm","Button","DateRangeClasses","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","initialValues","dates","calendarInputProps","getInputProps","onCalendarApply","values","align","gap","grow","px","py","className","picker","value","w","selectProps","comboboxProps","withinPortal","numberOfColumns","columnsToScroll","type","styles","day","textAlign","firstDayOfWeek","allowSingleDateInRange","justify","save","variant","size","onClick"],"mappings":";AAAA,SAAQA,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAO,gBAAgB;AACnD,SAAQC,UAAU,QAA4B,iBAAiB;AAC/D,SAAQC,OAAO,QAAO,gBAAgB;AAEtC,SAAQC,MAAM,QAAO,YAAY;AACjC,OAAOC,sBAAsB,yBAAyB;AACtD,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AAuChG,OAAO,MAAMC,gCAAgC,CAAC,EAC1CC,YAAY,EACZC,OAAO,EACPC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACRC,kBAAkB,EACe;IACjC,MAAMC,OAAOb,QAAQ;QACjBc,eAAe;YACXC,OAAOT;QACX;IACJ;IACA,MAAMU,qBAAqBH,KAAKI,aAAa,CAAC;IAE9C,MAAMC,kBAAkB;QACpB,IAAI,CAACL,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE;YACvBF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,GAAGF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE,kCAAkC;QACnF;QACAR,QAAQM,KAAKM,MAAM,CAACJ,KAAK;IAC7B;IAEA,qBACI;;0BACI,MAAClB;gBAAMuB,OAAM;gBAASC,KAAI;gBAAKC,IAAI;gBAACC,IAAG;gBAAKC,IAAG;gBAAKC,WAAWvB,iBAAiBwB,MAAM;;kCAClF,KAACtB;wBACGuB,OAAOX,mBAAmBW,KAAK;wBAC9B,GAAGX,kBAAkB;wBACtBN,YAAYA;wBACZC,UAAUA;;oBAEbF,wBACG;;0CACI,KAACX;gCAAM8B,GAAE;;0CACT,KAACzB;gCACGwB,OAAOX,mBAAmBW,KAAK;gCAC/BlB,SAASA;gCACR,GAAGO,kBAAkB;gCACtBa,aAAa;oCAACC,eAAe;wCAACC,cAAc;oCAAK;gCAAC;;;yBAG1D;;;0BAGR,KAACnC;gBAAO4B,IAAG;gBAAKD,IAAG;0BACf,cAAA,KAACxB;oBACGiC,iBAAiB;oBACjBC,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,KAAK;4BAACC,WAAW;wBAAQ;oBAAC;oBACnCC,gBAAgB;oBAChBC,sBAAsB;oBACrB,GAAG3B,kBAAkB;oBACrB,GAAGI,kBAAkB;;;0BAI9B,MAACnB;gBAAM2C,SAAQ;gBAAQnB,KAAI;gBAAKE,IAAG;gBAAKC,IAAG;gBAAKC,WAAWvB,iBAAiBuC,IAAI;;kCAC5E,KAACxC;wBAAOyC,SAAQ;wBAAUC,MAAK;wBAAKC,SAASpC;kCAAU;;kCAGvD,KAACP;wBAAO0C,MAAK;wBAAKC,SAAS1B;kCAAiB;;;;;;AAM5D,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DatePicker, DatePickerBaseProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport dayjs from 'dayjs';\nimport {Button} from '../button';\nimport DateRangeClasses from './DateRange.module.css';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /**\n     * Initial selected range\n     */\n    initialRange: DateRangePickerValue;\n    /**\n     * Function called when the user applies the new date range\n     *\n     * @param range the newly selected dates\n     */\n    onApply: (range: DateRangePickerValue) => void;\n    /**\n     * Function called when the user click on the cancel button\n     */\n    onCancel: () => void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar displayed in the popover\n     */\n    rangeCalendarProps?: Omit<\n        DatePickerBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nconst isDateRangePickerValue = (value: unknown): value is DateRangePickerValue =>\n    Array.isArray(value) && value.length === 2;\n\nconst endOfDay = (value: Date): Date => (value ? dayjs(value).endOf('day').toDate() : value);\n\nexport const DateRangePickerInlineCalendar = ({\n    initialRange,\n    onApply,\n    onCancel,\n    presets,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n    const form = useForm({\n        initialValues: {\n            dates: initialRange,\n        },\n    });\n    const calendarInputProps = form.getInputProps('dates');\n\n    const onCalendarChange = (range: Date | Date[] | DateRangePickerValue): void => {\n        const normalized = isDateRangePickerValue(range) && range[1] ? [range[0], endOfDay(range[1])] : range;\n        calendarInputProps.onChange(normalized);\n    };\n\n    const onCalendarApply = () => {\n        // In case the user only clicked the start date, but not the end date,\n        // assume a single day was meant to be selected.\n        if (!form.values.dates[1]) {\n            form.values.dates[1] = endOfDay(form.values.dates[0]);\n        }\n        onApply(form.values.dates);\n    };\n\n    return (\n        <>\n            <Group align=\"center\" gap=\"xs\" grow px=\"md\" py=\"sm\" className={DateRangeClasses.picker}>\n                <EditableDateRangePicker\n                    value={calendarInputProps.value}\n                    {...calendarInputProps}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect\n                            value={calendarInputProps.value}\n                            presets={presets}\n                            {...calendarInputProps}\n                            selectProps={{comboboxProps: {withinPortal: false}}}\n                        />\n                    </>\n                ) : null}\n            </Group>\n\n            <Center py=\"sm\" px=\"md\">\n                <DatePicker\n                    numberOfColumns={2}\n                    columnsToScroll={1}\n                    type=\"range\"\n                    styles={{day: {textAlign: 'center'}}}\n                    firstDayOfWeek={0}\n                    allowSingleDateInRange\n                    {...rangeCalendarProps}\n                    {...calendarInputProps}\n                    onChange={onCalendarChange}\n                />\n            </Center>\n\n            <Group justify=\"right\" gap=\"xs\" px=\"md\" py=\"sm\" className={DateRangeClasses.save}>\n                <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n                    Cancel\n                </Button>\n                <Button size=\"xs\" onClick={onCalendarApply}>\n                    Apply\n                </Button>\n            </Group>\n        </>\n    );\n};\n"],"names":["Center","Group","Space","DatePicker","useForm","dayjs","Button","DateRangeClasses","DateRangePickerPresetSelect","EditableDateRangePicker","isDateRangePickerValue","value","Array","isArray","length","endOfDay","endOf","toDate","DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","initialValues","dates","calendarInputProps","getInputProps","onCalendarChange","range","normalized","onChange","onCalendarApply","values","align","gap","grow","px","py","className","picker","w","selectProps","comboboxProps","withinPortal","numberOfColumns","columnsToScroll","type","styles","day","textAlign","firstDayOfWeek","allowSingleDateInRange","justify","save","variant","size","onClick"],"mappings":";AAAA,SAAQA,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAO,gBAAgB;AACnD,SAAQC,UAAU,QAA4B,iBAAiB;AAC/D,SAAQC,OAAO,QAAO,gBAAgB;AAEtC,OAAOC,WAAW,QAAQ;AAC1B,SAAQC,MAAM,QAAO,YAAY;AACjC,OAAOC,sBAAsB,yBAAyB;AACtD,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AAuChG,MAAMC,yBAAyB,CAACC,QAC5BC,MAAMC,OAAO,CAACF,UAAUA,MAAMG,MAAM,KAAK;AAE7C,MAAMC,WAAW,CAACJ,QAAuBA,QAAQN,MAAMM,OAAOK,KAAK,CAAC,OAAOC,MAAM,KAAKN;AAEtF,OAAO,MAAMO,gCAAgC,CAAC,EAC1CC,YAAY,EACZC,OAAO,EACPC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACRC,kBAAkB,EACe;IACjC,MAAMC,OAAOtB,QAAQ;QACjBuB,eAAe;YACXC,OAAOT;QACX;IACJ;IACA,MAAMU,qBAAqBH,KAAKI,aAAa,CAAC;IAE9C,MAAMC,mBAAmB,CAACC;QACtB,MAAMC,aAAavB,uBAAuBsB,UAAUA,KAAK,CAAC,EAAE,GAAG;YAACA,KAAK,CAAC,EAAE;YAAEjB,SAASiB,KAAK,CAAC,EAAE;SAAE,GAAGA;QAChGH,mBAAmBK,QAAQ,CAACD;IAChC;IAEA,MAAME,kBAAkB;QACpB,sEAAsE;QACtE,gDAAgD;QAChD,IAAI,CAACT,KAAKU,MAAM,CAACR,KAAK,CAAC,EAAE,EAAE;YACvBF,KAAKU,MAAM,CAACR,KAAK,CAAC,EAAE,GAAGb,SAASW,KAAKU,MAAM,CAACR,KAAK,CAAC,EAAE;QACxD;QACAR,QAAQM,KAAKU,MAAM,CAACR,KAAK;IAC7B;IAEA,qBACI;;0BACI,MAAC3B;gBAAMoC,OAAM;gBAASC,KAAI;gBAAKC,IAAI;gBAACC,IAAG;gBAAKC,IAAG;gBAAKC,WAAWnC,iBAAiBoC,MAAM;;kCAClF,KAAClC;wBACGE,OAAOkB,mBAAmBlB,KAAK;wBAC9B,GAAGkB,kBAAkB;wBACtBN,YAAYA;wBACZC,UAAUA;;oBAEbF,wBACG;;0CACI,KAACpB;gCAAM0C,GAAE;;0CACT,KAACpC;gCACGG,OAAOkB,mBAAmBlB,KAAK;gCAC/BW,SAASA;gCACR,GAAGO,kBAAkB;gCACtBgB,aAAa;oCAACC,eAAe;wCAACC,cAAc;oCAAK;gCAAC;;;yBAG1D;;;0BAGR,KAAC/C;gBAAOyC,IAAG;gBAAKD,IAAG;0BACf,cAAA,KAACrC;oBACG6C,iBAAiB;oBACjBC,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,KAAK;4BAACC,WAAW;wBAAQ;oBAAC;oBACnCC,gBAAgB;oBAChBC,sBAAsB;oBACrB,GAAG9B,kBAAkB;oBACrB,GAAGI,kBAAkB;oBACtBK,UAAUH;;;0BAIlB,MAAC9B;gBAAMuD,SAAQ;gBAAQlB,KAAI;gBAAKE,IAAG;gBAAKC,IAAG;gBAAKC,WAAWnC,iBAAiBkD,IAAI;;kCAC5E,KAACnD;wBAAOoD,SAAQ;wBAAUC,MAAK;wBAAKC,SAASvC;kCAAU;;kCAGvD,KAACf;wBAAOqD,MAAK;wBAAKC,SAASzB;kCAAiB;;;;;;AAM5D,EAAE"}

package/dist/esm/components/table/use-table.d.ts

@@ -1,9 +1,9 @@
 import { type ExpandedState, type PaginationState, type SortingState } from '@tanstack/table-core';
 import { Dispatch, SetStateAction } from 'react';
 import { type DateRangePickerValue } from '../date-range-picker';
-type PartialDeep<T> = T extends object ? {
-    [P in keyof T]?: PartialDeep<T[P]>;
-} : T;
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
 export interface TableState<TData = unknown> {
     /**
      * Current pagination state
@@ -156,7 +156,7 @@ export interface UseTableOptions<TData = unknown> {
     /**
      * Initial state of the table.
      */
-    initialState?: PartialDeep<TableState<TData>>;
+    initialState?: DeepPartial<TableState<TData>>;
     /**
      * Whether rows can be selected.
      *
@@ -176,6 +176,12 @@ export interface UseTableOptions<TData = unknown> {
      * @default false
      */
     forceSelection?: boolean;
+    /**
+     * Whether to sync the table state with the URL.
+     *
+     * @default false
+     */
+    syncWithUrl?: boolean;
 }
 export declare const useTable: <TData>(userOptions?: UseTableOptions<TData>) => TableStore<TData>;
 export {};

package/dist/esm/components/table/use-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/use-table.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/use-table.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/table/use-table.js

@@ -1,10 +1,12 @@
 import { useDidUpdate } from '@mantine/hooks';
 import defaultsDeep from 'lodash.defaultsdeep';
 import { useCallback, useMemo, useState } from 'react';
+import { useUrlSyncedState } from './use-url-synced-state';
 const defaultOptions = {
     enableRowSelection: true,
     enableMultiRowSelection: false,
-    forceSelection: false
+    forceSelection: false,
+    syncWithUrl: false
 };
 const defaultState = {
     pagination: {
@@ -26,17 +28,134 @@ const defaultState = {
 export const useTable = (userOptions = {})=>{
     const options = defaultsDeep({}, userOptions, defaultOptions);
     const initialState = defaultsDeep({}, options.initialState, defaultState);
-    const [pagination, setPagination] = useState(initialState.pagination);
+    // synced with url
+    const [pagination, setPagination] = useUrlSyncedState({
+        initialState: initialState.pagination,
+        serializer: ({ pageIndex, pageSize })=>[
+                [
+                    'page',
+                    (pageIndex + 1).toString()
+                ],
+                [
+                    'pageSize',
+                    pageSize.toString()
+                ]
+            ],
+        deserializer: (params)=>defaultsDeep({
+                pageIndex: params.get('page') ? parseInt(params.get('page'), 10) - 1 : undefined,
+                pageSize: params.get('pageSize') ? parseInt(params.get('pageSize'), 10) : undefined
+            }, initialState.pagination),
+        sync: options.syncWithUrl
+    });
+    const [sorting, setSorting] = useUrlSyncedState({
+        initialState: initialState.sorting,
+        serializer: (_sorting)=>[
+                [
+                    'sortBy',
+                    _sorting.map(({ id, desc })=>`${id}.${desc ? 'desc' : 'asc'}`).join(',')
+                ]
+            ],
+        deserializer: (params)=>{
+            if (!params.has('sortBy')) {
+                return initialState.sorting;
+            }
+            const sorts = params.get('sortBy')?.split(',') ?? [];
+            return sorts.map((sort)=>{
+                const [id, order] = sort.split('.');
+                return {
+                    id,
+                    desc: order === 'desc'
+                };
+            });
+        },
+        sync: options.syncWithUrl
+    });
+    const [globalFilter, setGlobalFilter] = useUrlSyncedState({
+        initialState: initialState.globalFilter,
+        serializer: (filter)=>[
+                [
+                    'filter',
+                    filter
+                ]
+            ],
+        deserializer: (params)=>params.get('filter') ?? initialState.globalFilter,
+        sync: options.syncWithUrl
+    });
+    const [predicates, setPredicates] = useUrlSyncedState({
+        initialState: initialState.predicates,
+        serializer: (_predicates)=>Object.entries(_predicates).map(([key, value])=>[
+                    key,
+                    value
+                ]),
+        deserializer: (params)=>Object.keys(initialState.predicates).reduce((acc, predicateKey)=>{
+                acc[predicateKey] = params.get(predicateKey) ?? initialState.predicates[predicateKey];
+                return acc;
+            }, {}),
+        sync: options.syncWithUrl
+    });
+    const [layout, setLayout] = useUrlSyncedState({
+        initialState: initialState.layout,
+        serializer: (_layout)=>[
+                [
+                    'layout',
+                    _layout
+                ]
+            ],
+        deserializer: (params)=>params.get('layout') ?? initialState.layout,
+        sync: options.syncWithUrl
+    });
+    const [dateRange, setDateRange] = useUrlSyncedState({
+        initialState: initialState.dateRange,
+        serializer: ([from, to])=>[
+                [
+                    'from',
+                    from?.toISOString() ?? ''
+                ],
+                [
+                    'to',
+                    to?.toISOString() ?? ''
+                ]
+            ],
+        deserializer: (params)=>[
+                params.get('from') ? new Date(params.get('from')) : initialState.dateRange[0],
+                params.get('to') ? new Date(params.get('to')) : initialState.dateRange[1]
+            ],
+        sync: options.syncWithUrl
+    });
+    const [columnVisibility, setColumnVisibility] = useUrlSyncedState({
+        initialState: initialState.columnVisibility,
+        serializer: (columns)=>[
+                [
+                    'show',
+                    Object.entries(columns).filter(([, visible])=>visible === true).map(([columnName])=>columnName).join(',')
+                ],
+                [
+                    'hide',
+                    Object.entries(columns).filter(([, visible])=>visible === false).map(([columnName])=>columnName).join(',')
+                ]
+            ],
+        deserializer: (params)=>{
+            if (!params.has('show') && !params.has('hide')) {
+                return initialState.columnVisibility;
+            }
+            const visible = params.get('show')?.split(',') ?? [];
+            const invisible = params.get('hide')?.split(',') ?? [];
+            const columns = {};
+            visible.forEach((column)=>{
+                columns[column] = true;
+            });
+            invisible.forEach((column)=>{
+                columns[column] = false;
+            });
+            return columns;
+        },
+        sync: options.syncWithUrl
+    });
+    // unsynced
     const [totalEntries, _setTotalEntries] = useState(initialState.totalEntries);
     const [unfilteredTotalEntries, setUnfilteredTotalEntries] = useState(initialState.totalEntries);
-    const [sorting, setSorting] = useState(initialState.sorting);
-    const [globalFilter, setGlobalFilter] = useState(initialState.globalFilter);
     const [expanded, setExpanded] = useState(initialState.expanded);
-    const [predicates, setPredicates] = useState(initialState.predicates);
-    const [layout, setLayout] = useState(initialState.layout);
-    const [dateRange, setDateRange] = useState(initialState.dateRange);
     const [rowSelection, setRowSelection] = useState(initialState.rowSelection);
-    const [columnVisibility, setColumnVisibility] = useState(initialState.columnVisibility);
     const isFiltered = !!globalFilter || Object.keys(predicates).some((predicate)=>!!predicates[predicate]) || !!dateRange?.[0] || !!dateRange?.[1];
     const isVacant = unfilteredTotalEntries === 0;
     const setTotalEntries = useCallback((updater)=>{

package/dist/esm/components/table/use-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/use-table.ts"],"sourcesContent":["import {useDidUpdate} from '@mantine/hooks';\nimport {type ExpandedState, type PaginationState, type SortingState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Dispatch, SetStateAction, useCallback, useMemo, useState} from 'react';\nimport {type DateRangePickerValue} from '../date-range-picker';\n\n// Create a deeply optional version of another type\ntype PartialDeep<T> = T extends object\n    ? {\n          [P in keyof T]?: PartialDeep<T[P]>;\n      }\n    : T;\n\nexport interface TableState<TData = unknown> {\n    /**\n     * Current pagination state\n     *\n     * @default { pageIndex: 0, pageSize: 50 }\n     */\n    pagination: PaginationState;\n    /**\n     * Total number of entries in the table.\n     * This number is used to calculate the number of pages in the pagination.\n     * When null, the number of pages is calculated using the current data length.\n     *\n     * @default null\n     */\n    totalEntries: number | null;\n    /**\n     * Current sorting state\n     *\n     * @default []\n     */\n    sorting: SortingState;\n    /**\n     * Current global filter value\n     *\n     * @default ''\n     */\n    globalFilter: string;\n\n    /**\n     * Current expanded state\n     *\n     * @default {}\n     */\n    expanded: ExpandedState;\n    /**\n     * Predicates and their current value\n     *\n     * @default {}\n     */\n    predicates: Record<string, string>;\n    /**\n     * Layout currently selected. When null, the first layout is used.\n     *\n     * @default null\n     */\n    layout: string | null;\n    /**\n     * Currently selected date range\n     *\n     * @default [null, null]\n     */\n    dateRange: DateRangePickerValue;\n    /**\n     * Currently selected rows\n     *\n     * @default {}\n     */\n    rowSelection: Record<string, TData>;\n    /**\n     * Columns that are currently visible\n     *\n     * @default {}\n     */\n    columnVisibility: Record<string, boolean>;\n}\n\nexport interface TableStore<TData = unknown> {\n    /**\n     * Current state of the table.\n     */\n    state: TableState<TData>;\n    /**\n     * Allows to change the pagination state.\n     */\n    setPagination: Dispatch<SetStateAction<TableState<TData>['pagination']>>;\n    /**\n     * Allows to change the total number of entries.\n     */\n    setTotalEntries: Dispatch<SetStateAction<TableState<TData>['totalEntries']>>;\n    /**\n     * Allows to change the sorting state.\n     */\n    setSorting: Dispatch<SetStateAction<TableState<TData>['sorting']>>;\n    /**\n     * Allows to change the global filter value.\n     */\n    setGlobalFilter: Dispatch<SetStateAction<TableState<TData>['globalFilter']>>;\n    /**\n     * Allows to change the rows expanded state.\n     */\n    setExpanded: Dispatch<SetStateAction<TableState<TData>['expanded']>>;\n    /**\n     * Allows to change the predicates values.\n     */\n    setPredicates: Dispatch<SetStateAction<TableState<TData>['predicates']>>;\n    /**\n     * Allows to change the selected layout.\n     */\n    setLayout: Dispatch<SetStateAction<TableState<TData>['layout']>>;\n    /**\n     * Allows to change the selected date range.\n     */\n    setDateRange: Dispatch<SetStateAction<TableState<TData>['dateRange']>>;\n    /**\n     * Allows to change the current row selection.\n     */\n    setRowSelection: Dispatch<SetStateAction<TableState<TData>['rowSelection']>>;\n    /**\n     * Allows to change the visible columns.\n     */\n    setColumnVisibility: Dispatch<SetStateAction<TableState<TData>['columnVisibility']>>;\n    /**\n     * Whether the table is currently filtered.\n     */\n    isFiltered: boolean;\n    /**\n     * Whether the table has data when unfiltered.\n     *\n     * This is derived from the totalEntries so make sure you set that number correctly, even if you're using a client side table.\n     */\n    isVacant: boolean;\n    /**\n     * Clear currently applied filters.\n     */\n    clearFilters: () => void;\n    /**\n     * Deselects all currently selected rows.\n     */\n    clearRowSelection: () => void;\n    /**\n     * Get currently selected rows.\n     */\n    getSelectedRows: () => TData[];\n    /**\n     * Get currently selected row\n     */\n    getSelectedRow: () => TData | null;\n    /**\n     * Whether the user can select multiple rows at the same time.\n     */\n    multiRowSelectionEnabled: boolean;\n    /**\n     * Whether rows can be selected.\n     */\n    rowSelectionEnabled: boolean;\n    /**\n     * Whether row selection is forced.\n     */\n    rowSelectionForced: boolean;\n}\n\nexport interface UseTableOptions<TData = unknown> {\n    /**\n     * Initial state of the table.\n     */\n    initialState?: PartialDeep<TableState<TData>>;\n    /**\n     * Whether rows can be selected.\n     *\n     * @default true\n     */\n    enableRowSelection?: boolean;\n    /**\n     * Whether multiple rows can be selected at the same time.\n     *\n     * @default false\n     */\n    enableMultiRowSelection?: boolean;\n    /**\n     * Forces the user to always have one row selected.\n     * When activating that setting, a good practice is to have a row already selected in the initial state.\n     *\n     * @default false\n     */\n    forceSelection?: boolean;\n}\n\nconst defaultOptions: UseTableOptions = {\n    enableRowSelection: true,\n    enableMultiRowSelection: false,\n    forceSelection: false,\n};\n\nconst defaultState: Partial<TableState> = {\n    pagination: {\n        pageIndex: 0,\n        pageSize: 50,\n    },\n    totalEntries: null,\n    sorting: [],\n    globalFilter: '',\n    predicates: {},\n    layout: null,\n    dateRange: [null, null],\n    rowSelection: {},\n    columnVisibility: {},\n};\n\nexport const useTable = <TData>(userOptions: UseTableOptions<TData> = {}): TableStore<TData> => {\n    const options = defaultsDeep({}, userOptions, defaultOptions) as UseTableOptions<TData>;\n    const initialState = defaultsDeep({}, options.initialState, defaultState) as TableState<TData>;\n\n    const [pagination, setPagination] = useState<TableState<TData>['pagination']>(initialState.pagination);\n    const [totalEntries, _setTotalEntries] = useState<TableState<TData>['totalEntries']>(initialState.totalEntries);\n    const [unfilteredTotalEntries, setUnfilteredTotalEntries] = useState<TableState<TData>['totalEntries']>(\n        initialState.totalEntries,\n    );\n    const [sorting, setSorting] = useState<TableState<TData>['sorting']>(initialState.sorting);\n    const [globalFilter, setGlobalFilter] = useState<TableState<TData>['globalFilter']>(initialState.globalFilter);\n    const [expanded, setExpanded] = useState<TableState<TData>['expanded']>(initialState.expanded);\n    const [predicates, setPredicates] = useState<TableState<TData>['predicates']>(initialState.predicates);\n    const [layout, setLayout] = useState<TableState<TData>['layout']>(initialState.layout);\n    const [dateRange, setDateRange] = useState<TableState<TData>['dateRange']>(initialState.dateRange);\n    const [rowSelection, setRowSelection] = useState<TableState<TData>['rowSelection']>(initialState.rowSelection);\n    const [columnVisibility, setColumnVisibility] = useState<TableState<TData>['columnVisibility']>(\n        initialState.columnVisibility,\n    );\n\n    const isFiltered =\n        !!globalFilter ||\n        Object.keys(predicates).some((predicate) => !!predicates[predicate]) ||\n        !!dateRange?.[0] ||\n        !!dateRange?.[1];\n\n    const isVacant = unfilteredTotalEntries === 0;\n\n    const setTotalEntries: typeof _setTotalEntries = useCallback(\n        (updater) => {\n            _setTotalEntries((old) => {\n                const newTotalEntries = updater instanceof Function ? updater(old) : updater;\n                if (!isFiltered) {\n                    setUnfilteredTotalEntries(newTotalEntries);\n                }\n                return newTotalEntries;\n            });\n        },\n        [isFiltered],\n    );\n\n    const clearFilters = useCallback(() => {\n        setPredicates(initialState.predicates);\n        setGlobalFilter('');\n    }, []);\n\n    const clearRowSelection = useCallback(() => {\n        setRowSelection({});\n    }, []);\n\n    const getSelectedRows = useCallback(() => Object.values(rowSelection), [rowSelection]);\n\n    const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n    useDidUpdate(() => {\n        if (!options.enableMultiRowSelection) {\n            clearRowSelection();\n        }\n    }, [globalFilter, pagination, sorting, dateRange, predicates]);\n\n    const state = useMemo(\n        () => ({\n            pagination,\n            totalEntries,\n            sorting,\n            globalFilter,\n            expanded,\n            predicates,\n            layout,\n            dateRange,\n            rowSelection,\n            columnVisibility,\n        }),\n        [\n            pagination,\n            totalEntries,\n            sorting,\n            globalFilter,\n            expanded,\n            predicates,\n            layout,\n            dateRange,\n            rowSelection,\n            columnVisibility,\n        ],\n    );\n\n    return {\n        state,\n        setPagination,\n        setTotalEntries,\n        setSorting,\n        setGlobalFilter,\n        setExpanded,\n        setPredicates,\n        setLayout,\n        setDateRange,\n        setRowSelection,\n        setColumnVisibility,\n        isFiltered,\n        isVacant,\n        clearFilters,\n        clearRowSelection,\n        getSelectedRows,\n        getSelectedRow,\n        rowSelectionEnabled: options.enableRowSelection,\n        rowSelectionForced: options.forceSelection,\n        multiRowSelectionEnabled: options.enableMultiRowSelection,\n    };\n};\n"],"names":["useDidUpdate","defaultsDeep","useCallback","useMemo","useState","defaultOptions","enableRowSelection","enableMultiRowSelection","forceSelection","defaultState","pagination","pageIndex","pageSize","totalEntries","sorting","globalFilter","predicates","layout","dateRange","rowSelection","columnVisibility","useTable","userOptions","options","initialState","setPagination","_setTotalEntries","unfilteredTotalEntries","setUnfilteredTotalEntries","setSorting","setGlobalFilter","expanded","setExpanded","setPredicates","setLayout","setDateRange","setRowSelection","setColumnVisibility","isFiltered","Object","keys","some","predicate","isVacant","setTotalEntries","updater","old","newTotalEntries","Function","clearFilters","clearRowSelection","getSelectedRows","values","getSelectedRow","state","rowSelectionEnabled","rowSelectionForced","multiRowSelectionEnabled"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/use-table.ts"],"sourcesContent":["import {useDidUpdate} from '@mantine/hooks';\nimport {type ExpandedState, type PaginationState, type SortingState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Dispatch, SetStateAction, useCallback, useMemo, useState} from 'react';\nimport {type DateRangePickerValue} from '../date-range-picker';\nimport {useUrlSyncedState} from './use-url-synced-state';\n\n// Create a deeply optional version of another type\ntype DeepPartial<T> = {\n    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];\n};\n\nexport interface TableState<TData = unknown> {\n    /**\n     * Current pagination state\n     *\n     * @default { pageIndex: 0, pageSize: 50 }\n     */\n    pagination: PaginationState;\n    /**\n     * Total number of entries in the table.\n     * This number is used to calculate the number of pages in the pagination.\n     * When null, the number of pages is calculated using the current data length.\n     *\n     * @default null\n     */\n    totalEntries: number | null;\n    /**\n     * Current sorting state\n     *\n     * @default []\n     */\n    sorting: SortingState;\n    /**\n     * Current global filter value\n     *\n     * @default ''\n     */\n    globalFilter: string;\n\n    /**\n     * Current expanded state\n     *\n     * @default {}\n     */\n    expanded: ExpandedState;\n    /**\n     * Predicates and their current value\n     *\n     * @default {}\n     */\n    predicates: Record<string, string>;\n    /**\n     * Layout currently selected. When null, the first layout is used.\n     *\n     * @default null\n     */\n    layout: string | null;\n    /**\n     * Currently selected date range\n     *\n     * @default [null, null]\n     */\n    dateRange: DateRangePickerValue;\n    /**\n     * Currently selected rows\n     *\n     * @default {}\n     */\n    rowSelection: Record<string, TData>;\n    /**\n     * Columns that are currently visible\n     *\n     * @default {}\n     */\n    columnVisibility: Record<string, boolean>;\n}\n\nexport interface TableStore<TData = unknown> {\n    /**\n     * Current state of the table.\n     */\n    state: TableState<TData>;\n    /**\n     * Allows to change the pagination state.\n     */\n    setPagination: Dispatch<SetStateAction<TableState<TData>['pagination']>>;\n    /**\n     * Allows to change the total number of entries.\n     */\n    setTotalEntries: Dispatch<SetStateAction<TableState<TData>['totalEntries']>>;\n    /**\n     * Allows to change the sorting state.\n     */\n    setSorting: Dispatch<SetStateAction<TableState<TData>['sorting']>>;\n    /**\n     * Allows to change the global filter value.\n     */\n    setGlobalFilter: Dispatch<SetStateAction<TableState<TData>['globalFilter']>>;\n    /**\n     * Allows to change the rows expanded state.\n     */\n    setExpanded: Dispatch<SetStateAction<TableState<TData>['expanded']>>;\n    /**\n     * Allows to change the predicates values.\n     */\n    setPredicates: Dispatch<SetStateAction<TableState<TData>['predicates']>>;\n    /**\n     * Allows to change the selected layout.\n     */\n    setLayout: Dispatch<SetStateAction<TableState<TData>['layout']>>;\n    /**\n     * Allows to change the selected date range.\n     */\n    setDateRange: Dispatch<SetStateAction<TableState<TData>['dateRange']>>;\n    /**\n     * Allows to change the current row selection.\n     */\n    setRowSelection: Dispatch<SetStateAction<TableState<TData>['rowSelection']>>;\n    /**\n     * Allows to change the visible columns.\n     */\n    setColumnVisibility: Dispatch<SetStateAction<TableState<TData>['columnVisibility']>>;\n    /**\n     * Whether the table is currently filtered.\n     */\n    isFiltered: boolean;\n    /**\n     * Whether the table has data when unfiltered.\n     *\n     * This is derived from the totalEntries so make sure you set that number correctly, even if you're using a client side table.\n     */\n    isVacant: boolean;\n    /**\n     * Clear currently applied filters.\n     */\n    clearFilters: () => void;\n    /**\n     * Deselects all currently selected rows.\n     */\n    clearRowSelection: () => void;\n    /**\n     * Get currently selected rows.\n     */\n    getSelectedRows: () => TData[];\n    /**\n     * Get currently selected row\n     */\n    getSelectedRow: () => TData | null;\n    /**\n     * Whether the user can select multiple rows at the same time.\n     */\n    multiRowSelectionEnabled: boolean;\n    /**\n     * Whether rows can be selected.\n     */\n    rowSelectionEnabled: boolean;\n    /**\n     * Whether row selection is forced.\n     */\n    rowSelectionForced: boolean;\n}\n\nexport interface UseTableOptions<TData = unknown> {\n    /**\n     * Initial state of the table.\n     */\n    initialState?: DeepPartial<TableState<TData>>;\n    /**\n     * Whether rows can be selected.\n     *\n     * @default true\n     */\n    enableRowSelection?: boolean;\n    /**\n     * Whether multiple rows can be selected at the same time.\n     *\n     * @default false\n     */\n    enableMultiRowSelection?: boolean;\n    /**\n     * Forces the user to always have one row selected.\n     * When activating that setting, a good practice is to have a row already selected in the initial state.\n     *\n     * @default false\n     */\n    forceSelection?: boolean;\n    /**\n     * Whether to sync the table state with the URL.\n     *\n     * @default false\n     */\n    syncWithUrl?: boolean;\n}\n\nconst defaultOptions: UseTableOptions = {\n    enableRowSelection: true,\n    enableMultiRowSelection: false,\n    forceSelection: false,\n    syncWithUrl: false,\n};\n\nconst defaultState: Partial<TableState> = {\n    pagination: {\n        pageIndex: 0,\n        pageSize: 50,\n    },\n    totalEntries: null,\n    sorting: [],\n    globalFilter: '',\n    predicates: {},\n    layout: null,\n    dateRange: [null, null],\n    rowSelection: {},\n    columnVisibility: {},\n};\n\nexport const useTable = <TData>(userOptions: UseTableOptions<TData> = {}): TableStore<TData> => {\n    const options = defaultsDeep({}, userOptions, defaultOptions) as UseTableOptions<TData>;\n    const initialState = defaultsDeep({}, options.initialState, defaultState) as TableState<TData>;\n\n    // synced with url\n    const [pagination, setPagination] = useUrlSyncedState<TableState<TData>['pagination']>({\n        initialState: initialState.pagination,\n        serializer: ({pageIndex, pageSize}) => [\n            ['page', (pageIndex + 1).toString()],\n            ['pageSize', pageSize.toString()],\n        ],\n        deserializer: (params) =>\n            defaultsDeep(\n                {\n                    pageIndex: params.get('page') ? parseInt(params.get('page'), 10) - 1 : undefined,\n                    pageSize: params.get('pageSize') ? parseInt(params.get('pageSize'), 10) : undefined,\n                },\n                initialState.pagination,\n            ),\n        sync: options.syncWithUrl,\n    });\n    const [sorting, setSorting] = useUrlSyncedState<TableState<TData>['sorting']>({\n        initialState: initialState.sorting,\n        serializer: (_sorting) => [\n            ['sortBy', _sorting.map(({id, desc}) => `${id}.${desc ? 'desc' : 'asc'}`).join(',')],\n        ],\n        deserializer: (params) => {\n            if (!params.has('sortBy')) {\n                return initialState.sorting;\n            }\n            const sorts = params.get('sortBy')?.split(',') ?? [];\n            return sorts.map((sort) => {\n                const [id, order] = sort.split('.');\n                return {id, desc: order === 'desc'};\n            });\n        },\n        sync: options.syncWithUrl,\n    });\n    const [globalFilter, setGlobalFilter] = useUrlSyncedState<TableState<TData>['globalFilter']>({\n        initialState: initialState.globalFilter,\n        serializer: (filter) => [['filter', filter]],\n        deserializer: (params) => params.get('filter') ?? initialState.globalFilter,\n        sync: options.syncWithUrl,\n    });\n    const [predicates, setPredicates] = useUrlSyncedState<TableState<TData>['predicates']>({\n        initialState: initialState.predicates,\n        serializer: (_predicates) => Object.entries(_predicates).map(([key, value]) => [key, value]),\n        deserializer: (params) =>\n            Object.keys(initialState.predicates).reduce(\n                (acc, predicateKey) => {\n                    acc[predicateKey] = params.get(predicateKey) ?? initialState.predicates[predicateKey];\n                    return acc;\n                },\n                {} as TableState<TData>['predicates'],\n            ),\n        sync: options.syncWithUrl,\n    });\n    const [layout, setLayout] = useUrlSyncedState<TableState<TData>['layout']>({\n        initialState: initialState.layout,\n        serializer: (_layout) => [['layout', _layout]],\n        deserializer: (params) => params.get('layout') ?? initialState.layout,\n        sync: options.syncWithUrl,\n    });\n    const [dateRange, setDateRange] = useUrlSyncedState<TableState<TData>['dateRange']>({\n        initialState: initialState.dateRange,\n        serializer: ([from, to]) => [\n            ['from', from?.toISOString() ?? ''],\n            ['to', to?.toISOString() ?? ''],\n        ],\n        deserializer: (params) => [\n            params.get('from') ? new Date(params.get('from') as string) : initialState.dateRange[0],\n            params.get('to') ? new Date(params.get('to') as string) : initialState.dateRange[1],\n        ],\n        sync: options.syncWithUrl,\n    });\n    const [columnVisibility, setColumnVisibility] = useUrlSyncedState<TableState<TData>['columnVisibility']>({\n        initialState: initialState.columnVisibility,\n        serializer: (columns) => [\n            [\n                'show',\n                Object.entries(columns)\n                    .filter(([, visible]) => visible === true)\n                    .map(([columnName]) => columnName)\n                    .join(','),\n            ],\n            [\n                'hide',\n                Object.entries(columns)\n                    .filter(([, visible]) => visible === false)\n                    .map(([columnName]) => columnName)\n                    .join(','),\n            ],\n        ],\n        deserializer: (params) => {\n            if (!params.has('show') && !params.has('hide')) {\n                return initialState.columnVisibility;\n            }\n            const visible = params.get('show')?.split(',') ?? [];\n            const invisible = params.get('hide')?.split(',') ?? [];\n            const columns = {} as TableState<TData>['columnVisibility'];\n            visible.forEach((column) => {\n                columns[column] = true;\n            });\n            invisible.forEach((column) => {\n                columns[column] = false;\n            });\n            return columns;\n        },\n        sync: options.syncWithUrl,\n    });\n\n    // unsynced\n    const [totalEntries, _setTotalEntries] = useState<TableState<TData>['totalEntries']>(initialState.totalEntries);\n    const [unfilteredTotalEntries, setUnfilteredTotalEntries] = useState<TableState<TData>['totalEntries']>(\n        initialState.totalEntries,\n    );\n    const [expanded, setExpanded] = useState<TableState<TData>['expanded']>(initialState.expanded);\n    const [rowSelection, setRowSelection] = useState<TableState<TData>['rowSelection']>(initialState.rowSelection);\n\n    const isFiltered =\n        !!globalFilter ||\n        Object.keys(predicates).some((predicate) => !!predicates[predicate]) ||\n        !!dateRange?.[0] ||\n        !!dateRange?.[1];\n\n    const isVacant = unfilteredTotalEntries === 0;\n\n    const setTotalEntries: typeof _setTotalEntries = useCallback(\n        (updater) => {\n            _setTotalEntries((old) => {\n                const newTotalEntries = updater instanceof Function ? updater(old) : updater;\n                if (!isFiltered) {\n                    setUnfilteredTotalEntries(newTotalEntries);\n                }\n                return newTotalEntries;\n            });\n        },\n        [isFiltered],\n    );\n\n    const clearFilters = useCallback(() => {\n        setPredicates(initialState.predicates);\n        setGlobalFilter('');\n    }, []);\n\n    const clearRowSelection = useCallback(() => {\n        setRowSelection({});\n    }, []);\n\n    const getSelectedRows = useCallback(() => Object.values(rowSelection), [rowSelection]);\n\n    const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n    useDidUpdate(() => {\n        if (!options.enableMultiRowSelection) {\n            clearRowSelection();\n        }\n    }, [globalFilter, pagination, sorting, dateRange, predicates]);\n\n    const state = useMemo(\n        () => ({\n            pagination,\n            totalEntries,\n            sorting,\n            globalFilter,\n            expanded,\n            predicates,\n            layout,\n            dateRange,\n            rowSelection,\n            columnVisibility,\n        }),\n        [\n            pagination,\n            totalEntries,\n            sorting,\n            globalFilter,\n            expanded,\n            predicates,\n            layout,\n            dateRange,\n            rowSelection,\n            columnVisibility,\n        ],\n    );\n\n    return {\n        state,\n        setPagination,\n        setTotalEntries,\n        setSorting,\n        setGlobalFilter,\n        setExpanded,\n        setPredicates,\n        setLayout,\n        setDateRange,\n        setRowSelection,\n        setColumnVisibility,\n        isFiltered,\n        isVacant,\n        clearFilters,\n        clearRowSelection,\n        getSelectedRows,\n        getSelectedRow,\n        rowSelectionEnabled: options.enableRowSelection,\n        rowSelectionForced: options.forceSelection,\n        multiRowSelectionEnabled: options.enableMultiRowSelection,\n    };\n};\n"],"names":["useDidUpdate","defaultsDeep","useCallback","useMemo","useState","useUrlSyncedState","defaultOptions","enableRowSelection","enableMultiRowSelection","forceSelection","syncWithUrl","defaultState","pagination","pageIndex","pageSize","totalEntries","sorting","globalFilter","predicates","layout","dateRange","rowSelection","columnVisibility","useTable","userOptions","options","initialState","setPagination","serializer","toString","deserializer","params","get","parseInt","undefined","sync","setSorting","_sorting","map","id","desc","join","has","sorts","split","sort","order","setGlobalFilter","filter","setPredicates","_predicates","Object","entries","key","value","keys","reduce","acc","predicateKey","setLayout","_layout","setDateRange","from","to","toISOString","Date","setColumnVisibility","columns","visible","columnName","invisible","forEach","column","_setTotalEntries","unfilteredTotalEntries","setUnfilteredTotalEntries","expanded","setExpanded","setRowSelection","isFiltered","some","predicate","isVacant","setTotalEntries","updater","old","newTotalEntries","Function","clearFilters","clearRowSelection","getSelectedRows","values","getSelectedRow","state","rowSelectionEnabled","rowSelectionForced","multiRowSelectionEnabled"],"mappings":"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"}

package/dist/esm/components/table/use-url-synced-state.d.ts

@@ -0,0 +1,29 @@
+export interface UseUrlSyncedStateOptions<T> {
+    /**
+     * The initial state
+     */
+    initialState: T;
+    /**
+     * The serializer function is used to determine how the state is translated to url search parameters.
+     * Called each time the state changes.
+     * @param stateValue The new state value to serialize.
+     * @returns A list of [key, value] to set as url search parameters.
+     * @example (filterValue) => [['filter', filterValue]] // ?filter=filterValue
+     */
+    serializer: (stateValue: T) => Array<[string, string]>;
+    /**
+     * The deserializer function is used to determine how the url parameters influence the initial state.
+     * Called only once when initializing the state.
+     * @param params All the search parameters of the current url.
+     * @returns The initial state based on the current url.
+     * @example (params) => params.get('filter') ?? '',
+     */
+    deserializer: (params: URLSearchParams) => T;
+    /**
+     * Whether the state should be synced with the url.
+     * When set to false, the hook behaves just like a regular useState hook from react.
+     */
+    sync?: boolean;
+}
+export declare const useUrlSyncedState: <T>({ initialState, serializer, deserializer, sync }: UseUrlSyncedStateOptions<T>) => readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
+//# sourceMappingURL=use-url-synced-state.d.ts.map

package/dist/esm/components/table/use-url-synced-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-url-synced-state.d.ts","sourceRoot":"","sources":["../../../../src/components/table/use-url-synced-state.ts"],"names":[],"mappings":"AAiBA,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACvC;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC;IAChB;;;;;;OAMG;IACH,UAAU,EAAE,CAAC,UAAU,EAAE,CAAC,KAAK,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACvD;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,CAAC,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,oDAAkD,wBAAwB,CAAC,CAAC,CAAC,8EAwB/G,CAAC"}

package/dist/esm/components/table/use-url-synced-state.js

@@ -0,0 +1,41 @@
+import { useMemo, useState } from 'react';
+const setSearchParam = (key, value, initial)=>{
+    const url = new URL(window.location.href);
+    if (value === '' || value === initial) {
+        url.searchParams.delete(key);
+    } else {
+        url.searchParams.set(key, value);
+    }
+    window.history.replaceState(null, '', url.toString());
+};
+const getSearchParams = ()=>{
+    const url = new URL(window.location.href);
+    return url.searchParams;
+};
+export const useUrlSyncedState = ({ initialState, serializer, deserializer, sync })=>{
+    const [state, setState] = useState(sync ? deserializer(getSearchParams()) : initialState);
+    const enhancedSetState = useMemo(()=>{
+        if (sync) {
+            const initialSerialized = serializer(initialState).reduce((acc, [key, value])=>{
+                acc[key] = value;
+                return acc;
+            }, {});
+            return (updater)=>{
+                setState((old)=>{
+                    const newValue = updater instanceof Function ? updater(old) : updater;
+                    serializer(newValue).forEach(([key, value])=>setSearchParam(key, value, initialSerialized[key]));
+                    return newValue;
+                });
+            };
+        }
+        return setState;
+    }, [
+        sync
+    ]);
+    return [
+        state,
+        enhancedSetState
+    ];
+};
+
+//# sourceMappingURL=use-url-synced-state.js.map

package/dist/esm/components/table/use-url-synced-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/use-url-synced-state.ts"],"sourcesContent":["import {useMemo, useState} from 'react';\n\nconst setSearchParam = (key: string, value: string, initial: string) => {\n    const url = new URL(window.location.href);\n    if (value === '' || value === initial) {\n        url.searchParams.delete(key);\n    } else {\n        url.searchParams.set(key, value);\n    }\n    window.history.replaceState(null, '', url.toString());\n};\n\nconst getSearchParams = (): URLSearchParams => {\n    const url = new URL(window.location.href);\n    return url.searchParams;\n};\n\nexport interface UseUrlSyncedStateOptions<T> {\n    /**\n     * The initial state\n     */\n    initialState: T;\n    /**\n     * The serializer function is used to determine how the state is translated to url search parameters.\n     * Called each time the state changes.\n     * @param stateValue The new state value to serialize.\n     * @returns A list of [key, value] to set as url search parameters.\n     * @example (filterValue) => [['filter', filterValue]] // ?filter=filterValue\n     */\n    serializer: (stateValue: T) => Array<[string, string]>;\n    /**\n     * The deserializer function is used to determine how the url parameters influence the initial state.\n     * Called only once when initializing the state.\n     * @param params All the search parameters of the current url.\n     * @returns The initial state based on the current url.\n     * @example (params) => params.get('filter') ?? '',\n     */\n    deserializer: (params: URLSearchParams) => T;\n    /**\n     * Whether the state should be synced with the url.\n     * When set to false, the hook behaves just like a regular useState hook from react.\n     */\n    sync?: boolean;\n}\n\nexport const useUrlSyncedState = <T>({initialState, serializer, deserializer, sync}: UseUrlSyncedStateOptions<T>) => {\n    const [state, setState] = useState<T>(sync ? deserializer(getSearchParams()) : initialState);\n    const enhancedSetState = useMemo(() => {\n        if (sync) {\n            const initialSerialized = serializer(initialState).reduce(\n                (acc, [key, value]) => {\n                    acc[key] = value;\n                    return acc;\n                },\n                {} as Record<string, string>,\n            );\n            return (updater: T | ((old: T) => T)) => {\n                setState((old) => {\n                    const newValue = updater instanceof Function ? updater(old) : updater;\n                    serializer(newValue).forEach(([key, value]) => setSearchParam(key, value, initialSerialized[key]));\n                    return newValue;\n                });\n            };\n        }\n\n        return setState;\n    }, [sync]);\n\n    return [state, enhancedSetState] as const;\n};\n"],"names":["useMemo","useState","setSearchParam","key","value","initial","url","URL","window","location","href","searchParams","delete","set","history","replaceState","toString","getSearchParams","useUrlSyncedState","initialState","serializer","deserializer","sync","state","setState","enhancedSetState","initialSerialized","reduce","acc","updater","old","newValue","Function","forEach"],"mappings":"AAAA,SAAQA,OAAO,EAAEC,QAAQ,QAAO,QAAQ;AAExC,MAAMC,iBAAiB,CAACC,KAAaC,OAAeC;IAChD,MAAMC,MAAM,IAAIC,IAAIC,OAAOC,QAAQ,CAACC,IAAI;IACxC,IAAIN,UAAU,MAAMA,UAAUC,SAAS;QACnCC,IAAIK,YAAY,CAACC,MAAM,CAACT;IAC5B,OAAO;QACHG,IAAIK,YAAY,CAACE,GAAG,CAACV,KAAKC;IAC9B;IACAI,OAAOM,OAAO,CAACC,YAAY,CAAC,MAAM,IAAIT,IAAIU,QAAQ;AACtD;AAEA,MAAMC,kBAAkB;IACpB,MAAMX,MAAM,IAAIC,IAAIC,OAAOC,QAAQ,CAACC,IAAI;IACxC,OAAOJ,IAAIK,YAAY;AAC3B;AA8BA,OAAO,MAAMO,oBAAoB,CAAI,EAACC,YAAY,EAAEC,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAA8B;IAC5G,MAAM,CAACC,OAAOC,SAAS,GAAGvB,SAAYqB,OAAOD,aAAaJ,qBAAqBE;IAC/E,MAAMM,mBAAmBzB,QAAQ;QAC7B,IAAIsB,MAAM;YACN,MAAMI,oBAAoBN,WAAWD,cAAcQ,MAAM,CACrD,CAACC,KAAK,CAACzB,KAAKC,MAAM;gBACdwB,GAAG,CAACzB,IAAI,GAAGC;gBACX,OAAOwB;YACX,GACA,CAAC;YAEL,OAAO,CAACC;gBACJL,SAAS,CAACM;oBACN,MAAMC,WAAWF,mBAAmBG,WAAWH,QAAQC,OAAOD;oBAC9DT,WAAWW,UAAUE,OAAO,CAAC,CAAC,CAAC9B,KAAKC,MAAM,GAAKF,eAAeC,KAAKC,OAAOsB,iBAAiB,CAACvB,IAAI;oBAChG,OAAO4B;gBACX;YACJ;QACJ;QAEA,OAAOP;IACX,GAAG;QAACF;KAAK;IAET,OAAO;QAACC;QAAOE;KAAiB;AACpC,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "55.3.3",
+  "version": "55.4.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -28,8 +28,8 @@
   "module": "./dist/esm/index.js",
   "dependencies": {
     "@dnd-kit/core": "6.2.0",
-    "@dnd-kit/modifiers": "8.0.0",
-    "@dnd-kit/sortable": "9.0.0",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@mantine/utils": "6.0.22",
     "@monaco-editor/react": "4.6.0",
@@ -42,8 +42,8 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.52.0",
-    "@coveord/plasma-react-icons": "55.3.3",
-    "@coveord/plasma-tokens": "55.3.3"
+    "@coveord/plasma-react-icons": "55.4.0",
+    "@coveord/plasma-tokens": "55.4.0"
   },
   "devDependencies": {
     "@mantine/carousel": "7.14.3",
@@ -54,7 +54,7 @@
     "@mantine/hooks": "7.14.3",
     "@mantine/modals": "7.14.3",
     "@mantine/notifications": "7.14.3",
-    "@swc/cli": "0.5.1",
+    "@swc/cli": "0.5.2",
     "@swc/core": "1.9.3",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
@@ -74,10 +74,10 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
-    "sass": "1.81.0",
+    "sass": "1.81.1",
     "tslib": "2.8.1",
     "typescript": "5.7.2",
-    "vitest": "2.1.6"
+    "vitest": "2.1.8"
   },
   "peerDependencies": {
     "@mantine/carousel": "^7.6.1",

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

@@ -2,6 +2,7 @@ import {Center, Group, Space} from '@mantine/core';
 import {DatePicker, DatePickerBaseProps} from '@mantine/dates';
 import {useForm} from '@mantine/form';
 
+import dayjs from 'dayjs';
 import {Button} from '../button';
 import DateRangeClasses from './DateRange.module.css';
 import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
@@ -44,6 +45,11 @@ export interface DateRangePickerInlineCalendarProps
     >;
 }
 
+const isDateRangePickerValue = (value: unknown): value is DateRangePickerValue =>
+    Array.isArray(value) && value.length === 2;
+
+const endOfDay = (value: Date): Date => (value ? dayjs(value).endOf('day').toDate() : value);
+
 export const DateRangePickerInlineCalendar = ({
     initialRange,
     onApply,
@@ -60,9 +66,16 @@ export const DateRangePickerInlineCalendar = ({
     });
     const calendarInputProps = form.getInputProps('dates');
 
+    const onCalendarChange = (range: Date | Date[] | DateRangePickerValue): void => {
+        const normalized = isDateRangePickerValue(range) && range[1] ? [range[0], endOfDay(range[1])] : range;
+        calendarInputProps.onChange(normalized);
+    };
+
     const onCalendarApply = () => {
+        // In case the user only clicked the start date, but not the end date,
+        // assume a single day was meant to be selected.
         if (!form.values.dates[1]) {
-            form.values.dates[1] = form.values.dates[0]; // when date range is the same day
+            form.values.dates[1] = endOfDay(form.values.dates[0]);
         }
         onApply(form.values.dates);
     };
@@ -99,6 +112,7 @@ export const DateRangePickerInlineCalendar = ({
                     allowSingleDateInRange
                     {...rangeCalendarProps}
                     {...calendarInputProps}
+                    onChange={onCalendarChange}
                 />
             </Center>
 

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

@@ -3,6 +3,8 @@ import dayjs from 'dayjs';
 
 import {DateRangePickerInlineCalendar} from '../DateRangePickerInlineCalendar';
 
+const endOfDay = (year: number, month: number, day: number): Date => new Date(year, month, day, 23, 59, 59, 999);
+
 describe('DateRangePickerInlineCalendar', () => {
     it('calls onApply when the user clicks on the apply button', async () => {
         const user = userEvent.setup({delay: null});
@@ -37,7 +39,7 @@ describe('DateRangePickerInlineCalendar', () => {
         render(
             <DateRangePickerInlineCalendar
                 presets={{
-                    year2k: {label: 'select me', range: [new Date(1999, 11, 31), new Date(2000, 0, 1)]},
+                    year2k: {label: 'select me', range: [new Date(1999, 11, 31), endOfDay(2000, 0, 1)]},
                 }}
                 initialRange={[null, null]}
                 onApply={onApply}
@@ -53,7 +55,7 @@ describe('DateRangePickerInlineCalendar', () => {
         await user.click(screen.getByRole('option', {name: 'select me'}));
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
-        expect(onApply).toHaveBeenCalledWith([new Date(1999, 11, 31), new Date(2000, 0, 1)]);
+        expect(onApply).toHaveBeenCalledWith([new Date(1999, 11, 31), endOfDay(2000, 0, 1)]);
     });
 
     it('calls onApply with the selected dates when clicking in the calendar', async () => {
@@ -68,7 +70,7 @@ describe('DateRangePickerInlineCalendar', () => {
 
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
-        expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 14)]);
+        expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), endOfDay(2022, 0, 14)]);
 
         vi.useRealTimers();
     });
@@ -81,7 +83,7 @@ describe('DateRangePickerInlineCalendar', () => {
         await user.click(screen.getAllByRole('button', {name: /8 january 2022/i})[0]);
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
-        expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 8)]);
+        expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), endOfDay(2022, 0, 8)]);
 
         vi.useRealTimers();
     });

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

@@ -298,4 +298,55 @@ describe('TableColumnsSelector', () => {
             await waitFor(() => expect(screen.getByText('You can display so many patate')).toBeVisible());
         });
     });
+
+    describe('when url sync is activated', () => {
+        afterEach(() => {
+            window.history.replaceState(null, '', '/');
+        });
+
+        it('sets the current visible column ids in the url', async () => {
+            const user = userEvent.setup();
+            const Fixture = () => {
+                const store = useTable<RowData>({
+                    syncWithUrl: true,
+                    initialState: {columnVisibility: {email: false, phone: true}},
+                });
+                return (
+                    <Table store={store} data={mockData} columns={baseColumns}>
+                        <Table.Header>
+                            <TableColumnsSelector />
+                        </Table.Header>
+                    </Table>
+                );
+            };
+            render(<Fixture />);
+            await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+            const emailCheckBox = await screen.findByRole('checkbox', {name: /email/i});
+            await user.click(emailCheckBox);
+            await user.click(screen.getByRole('checkbox', {name: /phone/i}));
+            expect(window.location.search).toBe('?show=email&hide=phone');
+        });
+
+        it('determines the initial visible columns from the url', async () => {
+            window.history.replaceState(null, '', '?show=email%2Cphone');
+            const user = userEvent.setup();
+            const Fixture = () => {
+                const store = useTable<RowData>({
+                    syncWithUrl: true,
+                    initialState: {columnVisibility: {email: false, phone: false}},
+                });
+                return (
+                    <Table store={store} data={mockData} columns={baseColumns}>
+                        <Table.Header>
+                            <TableColumnsSelector />
+                        </Table.Header>
+                    </Table>
+                );
+            };
+            render(<Fixture />);
+            await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+            expect(await screen.findByRole('checkbox', {name: /email/i})).toBeChecked();
+            expect(screen.getByRole('checkbox', {name: /phone/i})).toBeChecked();
+        });
+    });
 });