@coveord/plasma-mantine 55.7.0 → 55.7.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/use-url-synced-state.ts"],"sourcesContent":["import {Dispatch, SetStateAction, useMemo, useState} from 'react';\n\n/**\n * A search param entry defines the encoded value of a search parameter as `[key, value, alwaysEmit?]`.\n * The third entry is an optional boolean that defaults to `false`.\n * Setting `alwaysEmit` to `true` means any non-nullish value is always written to the search params,\n * even if it matches the initial value. It is also written on initialization.\n */\nexport type SearchParamEntry = [string, string | null | undefined, boolean?];\n\n/**\n * Get the index of the ? in a URL that denotes the start of the \"search\".\n * Performs a nested search for '#/', to detect hash router urls and take the params of the hash in that case.\n *\n * @param url The URL to search.\n * @returns The location of the question mark, or `-1` if not found.\n */\nconst indexOfSearch = (url: string): number => url.indexOf('?', url.indexOf('#/') + 1);\n\n/**\n * Read the **current** search params from `window.location`, with support for detecting React's HashRouter.\n * Also returns a method that will yield the href (string) value, after any changes made on the params object.\n *\n * @returns The `URLSearchParams` instance, and a function that can be used to get an updated href.\n */\nconst getSearchParams = (): URLSearchParams => {\n    const href = window.location.href;\n    const searchStart = indexOfSearch(href);\n    return new URLSearchParams(searchStart < 0 ? undefined : href.substring(searchStart));\n};\n\n/**\n * Apply the search params to the current location, using `replaceState` (no navigation history).\n * Note that only parameters in the `params` argument will be set, any other current params will be removed.\n *\n * @param params The parameters to apply.\n */\nconst applySearchParams = (params: URLSearchParams): void => {\n    const currentHref = window.location.href;\n    const index = indexOfSearch(currentHref);\n    let nextHref = index < 0 ? currentHref : currentHref.substring(0, index);\n    if (params.size > 0) {\n        nextHref = nextHref.concat('?', params.toString());\n    }\n    if (nextHref !== currentHref) {\n        window.history.replaceState(null, '', nextHref);\n    }\n};\n\nexport interface UseUrlSyncedStateOptions<T> {\n    /**\n     * The initial state to use, if there would be no search params to deserialize from.\n     * These values are also treated as defaults, and if the current state matches the initialState,\n     * no value will be written to the search params.\n     */\n    initialState: T | (() => 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     * Note that the serializer should always return entries for keys it controls, also if the current value is \"unset\" (`null` or empty).\n     * This ensures params get removed from the search when they are being unset.\n     *\n     * @param stateValue The new state value to serialize.\n     * @returns An iterable of `[key, value]` to set as url search parameters.\n     * @example (filterValue) => [['filter', filterValue]] // ?filter=filterValue\n     */\n    serializer: (stateValue: T) => Iterable<SearchParamEntry>;\n    /**\n     * The deserializer function is used to determine how the url parameters influence the initial state.\n     * May return a partial state, values that are not deserialed are taken from the `initialState`.\n     * Called only once when initializing the state.\n     * @param params All the search parameters of the current url.\n     * @param initialState The initialState, can be used to take defaults from.\n     * @returns The initial state based on the current url.\n     * @example (params) => params.get('filter') ?? '',\n     */\n    deserializer: (params: URLSearchParams, initialState: T) => T;\n    /**\n     * Whether the state should be synced with the url, defaults to `true`.\n     * When set to `false`, the hook behaves just like a regular `useState` hook from react.\n     */\n    sync?: boolean;\n}\n\nconst getInitialState = <T>(options: UseUrlSyncedStateOptions<T>): T =>\n    options.initialState instanceof Function ? options.initialState() : options.initialState;\n\nexport const useUrlSyncedState = <T>(options: UseUrlSyncedStateOptions<T>) => {\n    const sync = options.sync !== false;\n    const [state, setState] = useState<T>(() => {\n        const initialState = getInitialState(options);\n        return sync ? options.deserializer(getSearchParams(), initialState) : initialState;\n    });\n    // Capture the initial state as a map (first render only!), to compare values and see if they should be set to the params.\n    const initialStateSerialized = useMemo(() => {\n        const stateMap = new Map<string, string>();\n        let initialize: URLSearchParams | null = null;\n        for (const [key, value, alwaysEmit] of options.serializer(getInitialState(options))) {\n            stateMap.set(key, value);\n            if (alwaysEmit && value) {\n                initialize ??= getSearchParams();\n                initialize.set(key, value);\n            }\n        }\n        if (initialize) {\n            applySearchParams(initialize);\n        }\n        return stateMap;\n    }, []);\n\n    const enhancedSetState = useMemo<Dispatch<SetStateAction<T>>>(() => {\n        if (!sync) {\n            return setState;\n        }\n        return (updater: SetStateAction<T>) => {\n            setState((old) => {\n                const newValue = updater instanceof Function ? updater(old) : updater;\n\n                const search = getSearchParams();\n                for (const [key, value, alwaysEmit] of options.serializer(newValue)) {\n                    if (value && (alwaysEmit || !Object.is(initialStateSerialized.get(key), value))) {\n                        search.set(key, value);\n                    } else {\n                        search.delete(key);\n                    }\n                }\n                applySearchParams(search);\n\n                return newValue;\n            });\n        };\n    }, [sync]);\n\n    return [state, enhancedSetState] as const;\n};\n"],"names":["useMemo","useState","indexOfSearch","url","indexOf","getSearchParams","href","window","location","searchStart","URLSearchParams","undefined","substring","applySearchParams","params","currentHref","index","nextHref","size","concat","toString","history","replaceState","getInitialState","options","initialState","Function","useUrlSyncedState","sync","state","setState","deserializer","initialStateSerialized","stateMap","Map","initialize","key","value","alwaysEmit","serializer","set","enhancedSetState","updater","old","newValue","search","Object","is","get","delete"],"mappings":"AAAA,SAAkCA,OAAO,EAAEC,QAAQ,QAAO,QAAQ;AAUlE;;;;;;CAMC,GACD,MAAMC,gBAAgB,CAACC,MAAwBA,IAAIC,OAAO,CAAC,KAAKD,IAAIC,OAAO,CAAC,QAAQ;AAEpF;;;;;CAKC,GACD,MAAMC,kBAAkB;IACpB,MAAMC,OAAOC,OAAOC,QAAQ,CAACF,IAAI;IACjC,MAAMG,cAAcP,cAAcI;IAClC,OAAO,IAAII,gBAAgBD,cAAc,IAAIE,YAAYL,KAAKM,SAAS,CAACH;AAC5E;AAEA;;;;;CAKC,GACD,MAAMI,oBAAoB,CAACC;IACvB,MAAMC,cAAcR,OAAOC,QAAQ,CAACF,IAAI;IACxC,MAAMU,QAAQd,cAAca;IAC5B,IAAIE,WAAWD,QAAQ,IAAID,cAAcA,YAAYH,SAAS,CAAC,GAAGI;IAClE,IAAIF,OAAOI,IAAI,GAAG,GAAG;QACjBD,WAAWA,SAASE,MAAM,CAAC,KAAKL,OAAOM,QAAQ;IACnD;IACA,IAAIH,aAAaF,aAAa;QAC1BR,OAAOc,OAAO,CAACC,YAAY,CAAC,MAAM,IAAIL;IAC1C;AACJ;AAqCA,MAAMM,kBAAkB,CAAIC,UACxBA,QAAQC,YAAY,YAAYC,WAAWF,QAAQC,YAAY,KAAKD,QAAQC,YAAY;AAE5F,OAAO,MAAME,oBAAoB,CAAIH;IACjC,MAAMI,OAAOJ,QAAQI,IAAI,KAAK;IAC9B,MAAM,CAACC,OAAOC,SAAS,GAAG7B,SAAY;QAClC,MAAMwB,eAAeF,gBAAgBC;QACrC,OAAOI,OAAOJ,QAAQO,YAAY,CAAC1B,mBAAmBoB,gBAAgBA;IAC1E;IACA,0HAA0H;IAC1H,MAAMO,yBAAyBhC,QAAQ;QACnC,MAAMiC,WAAW,IAAIC;QACrB,IAAIC,aAAqC;QACzC,KAAK,MAAM,CAACC,KAAKC,OAAOC,WAAW,IAAId,QAAQe,UAAU,CAAChB,gBAAgBC,UAAW;YACjFS,SAASO,GAAG,CAACJ,KAAKC;YAClB,IAAIC,cAAcD,OAAO;gBACrBF,eAAAA,aAAe9B;gBACf8B,WAAWK,GAAG,CAACJ,KAAKC;YACxB;QACJ;QACA,IAAIF,YAAY;YACZtB,kBAAkBsB;QACtB;QACA,OAAOF;IACX,GAAG,EAAE;IAEL,MAAMQ,mBAAmBzC,QAAqC;QAC1D,IAAI,CAAC4B,MAAM;YACP,OAAOE;QACX;QACA,OAAO,CAACY;YACJZ,SAAS,CAACa;gBACN,MAAMC,WAAWF,mBAAmBhB,WAAWgB,QAAQC,OAAOD;gBAE9D,MAAMG,SAASxC;gBACf,KAAK,MAAM,CAAC+B,KAAKC,OAAOC,WAAW,IAAId,QAAQe,UAAU,CAACK,UAAW;oBACjE,IAAIP,SAAUC,CAAAA,cAAc,CAACQ,OAAOC,EAAE,CAACf,uBAAuBgB,GAAG,CAACZ,MAAMC,MAAK,GAAI;wBAC7EQ,OAAOL,GAAG,CAACJ,KAAKC;oBACpB,OAAO;wBACHQ,OAAOI,MAAM,CAACb;oBAClB;gBACJ;gBACAvB,kBAAkBgC;gBAElB,OAAOD;YACX;QACJ;IACJ,GAAG;QAAChB;KAAK;IAET,OAAO;QAACC;QAAOY;KAAiB;AACpC,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/use-url-synced-state.ts"],"sourcesContent":["import {Dispatch, SetStateAction, useMemo, useState} from 'react';\n\n/**\n * A search param entry defines the encoded value of a search parameter as `[key, value, alwaysEmit?]`.\n * The third entry is an optional boolean that defaults to `false`.\n * Setting `alwaysEmit` to `true` means any non-nullish value is always written to the search params,\n * even if it matches the initial value. It is also written on initialization.\n */\nexport type SearchParamEntry = [string, string | null | undefined, boolean?];\n\n/** A URL split into an array of length 4, as [pathname, search, hash, hashSearch] */\ntype UrlParts = [string, string, string, string];\n\nconst slice = Function.prototype.call.bind(Array.prototype.slice) as <T>(\n    from: ArrayLike<T>,\n    start?: number,\n    end?: number,\n) => T[];\n\n/**\n * Split a url into its parts.\n *\n * @param href The url to extract the parts from.\n * @returns The separate parts, all are an empty string if not present.\n */\nconst extractParts = (href: string) => slice(/^([^?#]*)(\\?[^#]*|)(#[^?]*|)(\\?.*|)$/.exec(href ?? ''), 1, 5) as UrlParts;\n\n/**\n * The index of the search parameter to use, e.g. hashSearch for hash routes (hash starts with '#/').\n *\n * @param parts: The url parts, as returned by `extractParts`.\n * @returns The index of the search parameter to use (1 or 3).\n */\nconst searchIndex = (parts: UrlParts): 1 | 3 => (/^#\\//.test(parts[2]) ? 3 : 1);\n\n/**\n * Read the **current** search params from `window.location`, with support for detecting React's HashRouter.\n * Also returns a method that will yield the href (string) value, after any changes made on the params object.\n *\n * @returns The `URLSearchParams` instance, and a function that can be used to get an updated href.\n */\nconst getSearchParams = (): URLSearchParams => {\n    const parts = extractParts(window.location.href);\n    return new URLSearchParams(parts[searchIndex(parts)]);\n};\n\n/**\n * Apply the search params to the current location, using `replaceState` (no navigation history).\n * Note that only parameters in the `params` argument will be set, any other current params will be removed.\n *\n * @param params The parameters to apply.\n */\nconst applySearchParams = (params: URLSearchParams): void => {\n    const currentHref = window.location.href;\n    const parts = extractParts(currentHref);\n    const search = params.size > 0 ? `?${params.toString()}` : '';\n    const index = searchIndex(parts);\n    if (parts[index] !== search) {\n        parts[index] = search;\n        window.history.replaceState(null, '', parts.join(''));\n    }\n};\n\nexport interface UseUrlSyncedStateOptions<T> {\n    /**\n     * The initial state to use, if there would be no search params to deserialize from.\n     * These values are also treated as defaults, and if the current state matches the initialState,\n     * no value will be written to the search params.\n     */\n    initialState: T | (() => 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     * Note that the serializer should always return entries for keys it controls, also if the current value is \"unset\" (`null` or empty).\n     * This ensures params get removed from the search when they are being unset.\n     *\n     * @param stateValue The new state value to serialize.\n     * @returns An iterable of `[key, value]` to set as url search parameters.\n     * @example (filterValue) => [['filter', filterValue]] // ?filter=filterValue\n     */\n    serializer: (stateValue: T) => Iterable<SearchParamEntry>;\n    /**\n     * The deserializer function is used to determine how the url parameters influence the initial state.\n     * May return a partial state, values that are not deserialed are taken from the `initialState`.\n     * Called only once when initializing the state.\n     * @param params All the search parameters of the current url.\n     * @param initialState The initialState, can be used to take defaults from.\n     * @returns The initial state based on the current url.\n     * @example (params) => params.get('filter') ?? '',\n     */\n    deserializer: (params: URLSearchParams, initialState: T) => T;\n    /**\n     * Whether the state should be synced with the url, defaults to `true`.\n     * When set to `false`, the hook behaves just like a regular `useState` hook from react.\n     */\n    sync?: boolean;\n}\n\nconst getInitialState = <T>(options: UseUrlSyncedStateOptions<T>): T =>\n    options.initialState instanceof Function ? options.initialState() : options.initialState;\n\nexport const useUrlSyncedState = <T>(options: UseUrlSyncedStateOptions<T>) => {\n    const sync = options.sync !== false;\n    const [state, setState] = useState<T>(() => {\n        const initialState = getInitialState(options);\n        return sync ? options.deserializer(getSearchParams(), initialState) : initialState;\n    });\n    // Capture the initial state as a map (first render only!), to compare values and see if they should be set to the params.\n    const initialStateSerialized = useMemo(() => {\n        const stateMap = new Map<string, string>();\n        let initialize: URLSearchParams | null = null;\n        let needsApply = false;\n        for (const [key, value, alwaysEmit] of options.serializer(getInitialState(options))) {\n            stateMap.set(key, value);\n            if (sync && alwaysEmit && value) {\n                initialize ??= getSearchParams();\n                if (!initialize.has(key)) {\n                    needsApply = true;\n                    initialize.set(key, value);\n                }\n            }\n        }\n        if (needsApply) {\n            applySearchParams(initialize);\n        }\n        return stateMap;\n    }, []);\n\n    const enhancedSetState = useMemo<Dispatch<SetStateAction<T>>>(() => {\n        if (!sync) {\n            return setState;\n        }\n        return (updater: SetStateAction<T>) => {\n            setState((old) => {\n                const newValue = updater instanceof Function ? updater(old) : updater;\n\n                const search = getSearchParams();\n                for (const [key, value, alwaysEmit] of options.serializer(newValue)) {\n                    if (value && (alwaysEmit || !Object.is(initialStateSerialized.get(key), value))) {\n                        search.set(key, value);\n                    } else {\n                        search.delete(key);\n                    }\n                }\n                applySearchParams(search);\n\n                return newValue;\n            });\n        };\n    }, [sync]);\n\n    return [state, enhancedSetState] as const;\n};\n"],"names":["useMemo","useState","slice","Function","prototype","call","bind","Array","extractParts","href","exec","searchIndex","parts","test","getSearchParams","window","location","URLSearchParams","applySearchParams","params","currentHref","search","size","toString","index","history","replaceState","join","getInitialState","options","initialState","useUrlSyncedState","sync","state","setState","deserializer","initialStateSerialized","stateMap","Map","initialize","needsApply","key","value","alwaysEmit","serializer","set","has","enhancedSetState","updater","old","newValue","Object","is","get","delete"],"mappings":"AAAA,SAAkCA,OAAO,EAAEC,QAAQ,QAAO,QAAQ;AAalE,MAAMC,QAAQC,SAASC,SAAS,CAACC,IAAI,CAACC,IAAI,CAACC,MAAMH,SAAS,CAACF,KAAK;AAMhE;;;;;CAKC,GACD,MAAMM,eAAe,CAACC,OAAiBP,MAAM,uCAAuCQ,IAAI,CAACD,QAAQ,KAAK,GAAG;AAEzG;;;;;CAKC,GACD,MAAME,cAAc,CAACC,QAA4B,OAAOC,IAAI,CAACD,KAAK,CAAC,EAAE,IAAI,IAAI;AAE7E;;;;;CAKC,GACD,MAAME,kBAAkB;IACpB,MAAMF,QAAQJ,aAAaO,OAAOC,QAAQ,CAACP,IAAI;IAC/C,OAAO,IAAIQ,gBAAgBL,KAAK,CAACD,YAAYC,OAAO;AACxD;AAEA;;;;;CAKC,GACD,MAAMM,oBAAoB,CAACC;IACvB,MAAMC,cAAcL,OAAOC,QAAQ,CAACP,IAAI;IACxC,MAAMG,QAAQJ,aAAaY;IAC3B,MAAMC,SAASF,OAAOG,IAAI,GAAG,IAAI,CAAC,CAAC,EAAEH,OAAOI,QAAQ,IAAI,GAAG;IAC3D,MAAMC,QAAQb,YAAYC;IAC1B,IAAIA,KAAK,CAACY,MAAM,KAAKH,QAAQ;QACzBT,KAAK,CAACY,MAAM,GAAGH;QACfN,OAAOU,OAAO,CAACC,YAAY,CAAC,MAAM,IAAId,MAAMe,IAAI,CAAC;IACrD;AACJ;AAqCA,MAAMC,kBAAkB,CAAIC,UACxBA,QAAQC,YAAY,YAAY3B,WAAW0B,QAAQC,YAAY,KAAKD,QAAQC,YAAY;AAE5F,OAAO,MAAMC,oBAAoB,CAAIF;IACjC,MAAMG,OAAOH,QAAQG,IAAI,KAAK;IAC9B,MAAM,CAACC,OAAOC,SAAS,GAAGjC,SAAY;QAClC,MAAM6B,eAAeF,gBAAgBC;QACrC,OAAOG,OAAOH,QAAQM,YAAY,CAACrB,mBAAmBgB,gBAAgBA;IAC1E;IACA,0HAA0H;IAC1H,MAAMM,yBAAyBpC,QAAQ;QACnC,MAAMqC,WAAW,IAAIC;QACrB,IAAIC,aAAqC;QACzC,IAAIC,aAAa;QACjB,KAAK,MAAM,CAACC,KAAKC,OAAOC,WAAW,IAAId,QAAQe,UAAU,CAAChB,gBAAgBC,UAAW;YACjFQ,SAASQ,GAAG,CAACJ,KAAKC;YAClB,IAAIV,QAAQW,cAAcD,OAAO;gBAC7BH,eAAAA,aAAezB;gBACf,IAAI,CAACyB,WAAWO,GAAG,CAACL,MAAM;oBACtBD,aAAa;oBACbD,WAAWM,GAAG,CAACJ,KAAKC;gBACxB;YACJ;QACJ;QACA,IAAIF,YAAY;YACZtB,kBAAkBqB;QACtB;QACA,OAAOF;IACX,GAAG,EAAE;IAEL,MAAMU,mBAAmB/C,QAAqC;QAC1D,IAAI,CAACgC,MAAM;YACP,OAAOE;QACX;QACA,OAAO,CAACc;YACJd,SAAS,CAACe;gBACN,MAAMC,WAAWF,mBAAmB7C,WAAW6C,QAAQC,OAAOD;gBAE9D,MAAM3B,SAASP;gBACf,KAAK,MAAM,CAAC2B,KAAKC,OAAOC,WAAW,IAAId,QAAQe,UAAU,CAACM,UAAW;oBACjE,IAAIR,SAAUC,CAAAA,cAAc,CAACQ,OAAOC,EAAE,CAAChB,uBAAuBiB,GAAG,CAACZ,MAAMC,MAAK,GAAI;wBAC7ErB,OAAOwB,GAAG,CAACJ,KAAKC;oBACpB,OAAO;wBACHrB,OAAOiC,MAAM,CAACb;oBAClB;gBACJ;gBACAvB,kBAAkBG;gBAElB,OAAO6B;YACX;QACJ;IACJ,GAAG;QAAClB;KAAK;IAET,OAAO;QAACC;QAAOc;KAAiB;AACpC,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "55.7.0",
+  "version": "55.7.1",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -42,20 +42,20 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.52.2",
-    "@coveord/plasma-react-icons": "55.7.0",
-    "@coveord/plasma-tokens": "55.7.0"
+    "@coveord/plasma-react-icons": "55.7.1",
+    "@coveord/plasma-tokens": "55.7.1"
   },
   "devDependencies": {
-    "@mantine/carousel": "7.16.0",
-    "@mantine/code-highlight": "7.16.0",
-    "@mantine/core": "7.16.0",
-    "@mantine/dates": "7.16.0",
-    "@mantine/form": "7.16.0",
-    "@mantine/hooks": "7.16.0",
-    "@mantine/modals": "7.16.0",
-    "@mantine/notifications": "7.16.0",
+    "@mantine/carousel": "7.16.1",
+    "@mantine/code-highlight": "7.16.1",
+    "@mantine/core": "7.16.1",
+    "@mantine/dates": "7.16.1",
+    "@mantine/form": "7.16.1",
+    "@mantine/hooks": "7.16.1",
+    "@mantine/modals": "7.16.1",
+    "@mantine/notifications": "7.16.1",
     "@swc/cli": "0.6.0",
-    "@swc/core": "1.10.7",
+    "@swc/core": "1.10.8",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
@@ -77,7 +77,7 @@
     "sass": "1.83.4",
     "tslib": "2.8.1",
     "typescript": "5.7.3",
-    "vitest": "2.1.8"
+    "vitest": "3.0.5"
   },
   "peerDependencies": {
     "@mantine/carousel": "^7.6.1",

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

@@ -72,6 +72,12 @@ interface CodeEditorProps
      * @default 'local'
      */
     monacoLoader?: 'cdn' | 'local';
+    /**
+     * Options to pass to the monaco editor.
+     * Currently only supporting [`tabSize`](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html#tabSize).
+     *
+     */
+    options?: Pick<monacoEditor.IStandaloneEditorConstructionOptions, 'tabSize'>;
 }
 
 const defaultProps: Partial<CodeEditorProps> = {
@@ -101,6 +107,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         maxHeight,
         disabled,
         monacoLoader,
+        options: {tabSize} = {tabSize: 2},
         ...others
     } = useProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
@@ -230,7 +237,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                     formatOnPaste: true,
                     fontSize: px(theme.fontSizes.xs) as number,
                     readOnly: disabled,
-                    tabSize: 2,
+                    tabSize,
                 }}
                 value={_value}
                 onChange={handleChange}

package/src/components/modal/Modal.tsx

@@ -4,12 +4,12 @@ import {
     ModalFactory as MantineModalFactory,
     ModalProps as MantineModalProps,
 } from '@mantine/core';
-import {ModalFooter, ModalFooter as PlasmaModalFooter} from './ModalFooter';
+import {ModalFooter as PlasmaModalFooter} from './ModalFooter';
 
 // Need to redeclare the factory to override and add footer to the props type
 type PlasmaModalFactory = Omit<MantineModalFactory, 'staticComponents'> & {
     staticComponents: MantineModalFactory['staticComponents'] & {
-        Footer: typeof ModalFooter;
+        Footer: typeof PlasmaModalFooter;
     };
 };
 

package/src/components/table/__tests__/use-url-synced-state.unit.spec.ts

@@ -1,118 +1,119 @@
 import {act, renderHook} from '@test-utils';
 import {useUrlSyncedState} from '../use-url-synced-state';
 
-describe('useUrlSyncedState', () => {
-    afterEach(() => {
-        window.history.replaceState(null, '', '/');
-    });
-
-    it('serializes the state value as url parameter when the state changes', () => {
-        const {result} = renderHook(() =>
-            useUrlSyncedState({
-                initialState: '',
-                serializer: (state) => [['key', state]],
-                deserializer: (params) => params.get('key') ?? '',
-            }),
-        );
-        act(() => result.current[1]('value'));
-        expect(result.current[0]).toBe('value');
-        expect(window.location.search).toBe('?key=value');
-    });
-
-    it('allows to serialize the state value into multiple parameters', () => {
-        const {result} = renderHook(() =>
-            useUrlSyncedState({
-                initialState: new Date(),
-                serializer: (state) => {
-                    const iso = state.toISOString();
-                    return [
-                        ['date', iso.substring(0, 10)],
-                        ['time', iso.substring(11, 24)],
-                    ];
-                },
-                deserializer: (params) =>
-                    new Date(`${params.get('date') ?? '2025-01-01'}T${params.get('time') ?? '00:00:00.000Z'}`),
-            }),
-        );
-        act(() => result.current[1](new Date(Date.UTC(2025, 0, 31, 12, 34, 56, 789))));
-        expect(window.location.search).toBe('?date=2025-01-31&time=12%3A34%3A56.789Z');
-    });
-
-    it('removes the parameter from the url if the state serializes to the same value as the initial state', () => {
-        const {result} = renderHook(() =>
-            useUrlSyncedState({
-                initialState: true,
-                serializer: (state) => [['key', state ? 'true' : 'false']],
-                deserializer: (params, initialState) =>
-                    params.has('key') ? params.get('key') === 'true' : initialState,
-                sync: true,
-            }),
-        );
-        act(() => result.current[1](false));
-        expect(window.location.search).toBe('?key=false');
-        act(() => result.current[1](true));
-        expect(window.location.search).toBe('');
-    });
-
-    it('removes the parameter from the url if the state serializes to the empty string', () => {
-        const {result} = renderHook(() =>
-            useUrlSyncedState({
-                initialState: 'initial',
-                serializer: (state) => [['key', state]],
-                deserializer: (params) => params.get('key') ?? '',
-            }),
-        );
-        act(() => result.current[1]('value'));
-        expect(window.location.search).toBe('?key=value');
-        act(() => result.current[1](''));
-        expect(window.location.search).toBe('');
-    });
-
-    it('does not sync with the url if the sync parameter is set to false', () => {
-        const {result} = renderHook(() =>
-            useUrlSyncedState({
-                initialState: '',
-                serializer: (state) => [['key', state]],
-                deserializer: (params) => params.get('key') ?? '',
-                sync: false,
-            }),
-        );
-        act(() => result.current[1]('value'));
-        expect(result.current[0]).toBe('value');
-        expect(window.location.search).toBe('');
-    });
-
-    it('derives the initial state from the url on first render', () => {
-        window.history.replaceState(null, '', '?key=value');
-
-        const {result} = renderHook(() =>
-            useUrlSyncedState({
-                initialState: 'initial',
-                serializer: (state) => [['key', state]],
-                deserializer: (params) => params.get('key') ?? '',
-            }),
-        );
-        expect(result.current[0]).toBe('value');
-    });
-
-    it('does not derive the initial state from the url on first render if sync option is false', () => {
-        window.history.replaceState(null, '', '?key=value');
-
-        const {result} = renderHook(() =>
-            useUrlSyncedState({
-                initialState: 'initial',
-                serializer: (state) => [['key', state]],
-                deserializer: (params) => params.get('key') ?? '',
-                sync: false,
-            }),
-        );
-        expect(result.current[0]).toBe('initial');
-    });
-
-    describe('with hash router urls', () => {
-        it('reads values from the hash parameters', () => {
-            window.history.replaceState(null, '', '?key=unexpected#/hash/route?key=value');
+/**
+ * Split a url into its parts.
+ * Note that this method is purposefully different from the implementation,
+ * and it splits to an object instead of an Array.
+ *
+ * @param href The url to extract the parts from.
+ * @returns The separate parts, all are an empty string if not present.
+ */
+const extractParts = (href: string) =>
+    /^(?<pathname>[^?#]*)(?<search>\?[^#]*|)(?<hash>#[^?]*|)(?<hashSearch>\?.*|)$/.exec(href).groups as {
+        pathname: string;
+        search: string;
+        hash: string;
+        hashSearch: string;
+    };
+
+describe.each(['/', '/#', '/#?', '/#hash?with-question=mark', '/sub/path', '/?leave=untouched#/', '/?dev#/sub/path/'])(
+    'useUrlSyncedState with location %s',
+    (location) => {
+        const locationParts = extractParts(location);
+        const isHashRoute = locationParts.hash.startsWith('#/');
+
+        beforeEach(() => {
+            window.history.replaceState(null, '', location);
+        });
+
+        afterEach(() => {
+            window.history.replaceState(null, '', '/');
+        });
 
+        /**
+         * Utility that will set the search to be a specific value, taking into account hash routes.
+         *
+         * @param search The search value to set.
+         */
+        const setSearch = (search: string) => {
+            const parts = extractParts(location);
+            if (isHashRoute) {
+                parts.hashSearch = search;
+            } else {
+                parts.search = search;
+            }
+            window.history.replaceState(null, '', `${parts.pathname}${parts.search}${parts.hash}${parts.hashSearch}`);
+        };
+
+        /**
+         * Utility expect that will automatically check either the hash route search or normal search,
+         * and also validates the other part is left as-is, if necessary.
+         *
+         * @param expectedSearch The expected search
+         */
+        const expectSearch = (expectedSearch: string) => {
+            expect(window.location.pathname).toBe(locationParts.pathname);
+            if (isHashRoute) {
+                expect(window.location.search).toBe(locationParts.search);
+                expect(window.location.hash).toBe(`${locationParts.hash}${expectedSearch}`);
+            } else {
+                expect(window.location.search).toBe(expectedSearch);
+                const hash = `${locationParts.hash}${locationParts.hashSearch}`;
+                // "fun" quirk: if the hash is only #, location.hash is empty.
+                expect(window.location.hash).toBe(hash === '#' ? '' : hash);
+            }
+        };
+
+        it('serializes the state value as url parameter when the state changes', () => {
+            const {result} = renderHook(() =>
+                useUrlSyncedState({
+                    initialState: '',
+                    serializer: (state) => [['key', state]],
+                    deserializer: (params) => params.get('key') ?? '',
+                }),
+            );
+            act(() => result.current[1]('value'));
+            expect(result.current[0]).toBe('value');
+            expectSearch('?key=value');
+        });
+
+        it('allows to serialize the state value into multiple parameters', () => {
+            const {result} = renderHook(() =>
+                useUrlSyncedState({
+                    initialState: new Date(),
+                    serializer: (state) => {
+                        const iso = state.toISOString();
+                        return [
+                            ['date', iso.substring(0, 10)],
+                            ['time', iso.substring(11, 24)],
+                        ];
+                    },
+                    deserializer: (params) =>
+                        new Date(`${params.get('date') ?? '2025-01-01'}T${params.get('time') ?? '00:00:00.000Z'}`),
+                }),
+            );
+            act(() => result.current[1](new Date(Date.UTC(2025, 0, 31, 12, 34, 56, 789))));
+            expectSearch('?date=2025-01-31&time=12%3A34%3A56.789Z');
+        });
+
+        it('removes the parameter from the url if the state serializes to the same value as the initial state', () => {
+            const {result} = renderHook(() =>
+                useUrlSyncedState({
+                    initialState: true,
+                    serializer: (state) => [['key', state ? 'true' : 'false']],
+                    deserializer: (params, initialState) =>
+                        params.has('key') ? params.get('key') === 'true' : initialState,
+                    sync: true,
+                }),
+            );
+            act(() => result.current[1](false));
+            expectSearch('?key=false');
+            act(() => result.current[1](true));
+            expectSearch('');
+        });
+
+        it('removes the parameter from the url if the state serializes to the empty string', () => {
             const {result} = renderHook(() =>
                 useUrlSyncedState({
                     initialState: 'initial',
@@ -120,48 +121,98 @@ describe('useUrlSyncedState', () => {
                     deserializer: (params) => params.get('key') ?? '',
                 }),
             );
+            act(() => result.current[1]('value'));
+            expectSearch('?key=value');
+            act(() => result.current[1](''));
+            expectSearch('');
+        });
+
+        it('does not sync with the url if the sync parameter is set to false', () => {
+            const {result} = renderHook(() =>
+                useUrlSyncedState({
+                    initialState: '',
+                    serializer: (state) => [['key', state]],
+                    deserializer: (params) => params.get('key') ?? '',
+                    sync: false,
+                }),
+            );
+            act(() => result.current[1]('value'));
             expect(result.current[0]).toBe('value');
+            expectSearch('');
         });
 
-        it('serializes the state values to the hash route parameters', () => {
-            window.history.replaceState(null, '', '?a=untouched#/hash/route');
+        it('derives the initial state from the url on first render', () => {
+            setSearch('?key=value');
 
             const {result} = renderHook(() =>
                 useUrlSyncedState({
-                    initialState: {a: null, b: null},
-                    serializer: (state) => [
-                        ['a', state.a],
-                        ['b', state.b],
-                    ],
-                    deserializer: (params) => ({a: params.get('a') ?? '', b: params.get('b')}),
+                    initialState: 'initial',
+                    serializer: (state) => [['key', state]],
+                    deserializer: (params) => params.get('key') ?? '',
+                }),
+            );
+            expect(result.current[0]).toBe('value');
+        });
+
+        it('does not derive the initial state from the url on first render if sync option is false', () => {
+            setSearch('?key=value');
+
+            const {result} = renderHook(() =>
+                useUrlSyncedState({
+                    initialState: 'initial',
+                    serializer: (state) => [['key', state]],
+                    deserializer: (params) => params.get('key') ?? '',
+                    sync: false,
+                }),
+            );
+            expect(result.current[0]).toBe('initial');
+        });
+
+        it('does not serializes initial state for "always emit" value, if sync option is false', () => {
+            const {result} = renderHook(() =>
+                useUrlSyncedState({
+                    initialState: 'initial',
+                    serializer: (state) => [['key', state, true]],
+                    deserializer: (params) => params.get('key') ?? '',
+                    sync: false,
+                }),
+            );
+            expect(result.current[0]).toBe('initial');
+            expectSearch('');
+        });
+
+        it('serializes initial state for "always emit" value', () => {
+            setSearch('?keep=as-is');
+
+            const {result} = renderHook(() =>
+                useUrlSyncedState({
+                    initialState: 'initial',
+                    serializer: (state) => [['key', state, true]],
+                    deserializer: (params, initial) => params.get('key') ?? initial,
                 }),
             );
-            act(() => result.current[1]({a: 'test', b: 'state'}));
-            expect(result.current[0]).toStrictEqual({a: 'test', b: 'state'});
-            expect(window.location.search).toBe('?a=untouched');
-            expect(window.location.hash).toBe('#/hash/route?a=test&b=state');
+            expect(result.current[0]).toBe('initial');
+            expectSearch('?keep=as-is&key=initial');
         });
 
-        it('removes the state values from the hash route parameters', () => {
-            window.history.replaceState(null, '', '?a=untouched&b=part-of-search#/hash/route?a=1&b=2');
+        it('deserializes initial state for "always emit" value, without changing it', () => {
+            setSearch('?text=value');
 
             const {result} = renderHook(() =>
-                useUrlSyncedState<{a: number | null; b: number}>({
-                    initialState: {a: 13, b: 37},
+                useUrlSyncedState({
+                    initialState: {text: 'initial', nr: 42},
                     serializer: (state) => [
-                        ['a', state.a?.toString()],
-                        ['b', state.b?.toString()],
+                        ['text', state.text, true],
+                        ['number', String(state.nr), true],
                     ],
-                    deserializer: (params) => ({
-                        a: Number.parseInt(params.get('a') ?? '0', 10),
-                        b: Number.parseInt(params.get('b') ?? '0', 10),
+                    deserializer: (params, initial) => ({
+                        text: params.get('text') ?? initial.text,
+                        nr: params.has('number') ? Number.parseInt(params.get('number'), 10) : initial.nr,
                     }),
                 }),
             );
-            act(() => result.current[1]({a: null, b: 37}));
-            expect(result.current[0]).toStrictEqual({a: null, b: 37});
-            expect(window.location.search).toBe('?a=untouched&b=part-of-search');
-            expect(window.location.hash).toBe('#/hash/route');
+            expect(result.current[0]).toStrictEqual({text: 'value', nr: 42});
+            expectSearch('?text=value&number=42');
         });
-    });
-});
+    },
+);

package/src/components/table/use-url-synced-state.ts

@@ -8,14 +8,30 @@ import {Dispatch, SetStateAction, useMemo, useState} from 'react';
  */
 export type SearchParamEntry = [string, string | null | undefined, boolean?];
 
+/** A URL split into an array of length 4, as [pathname, search, hash, hashSearch] */
+type UrlParts = [string, string, string, string];
+
+const slice = Function.prototype.call.bind(Array.prototype.slice) as <T>(
+    from: ArrayLike<T>,
+    start?: number,
+    end?: number,
+) => T[];
+
+/**
+ * Split a url into its parts.
+ *
+ * @param href The url to extract the parts from.
+ * @returns The separate parts, all are an empty string if not present.
+ */
+const extractParts = (href: string) => slice(/^([^?#]*)(\?[^#]*|)(#[^?]*|)(\?.*|)$/.exec(href ?? ''), 1, 5) as UrlParts;
+
 /**
- * Get the index of the ? in a URL that denotes the start of the "search".
- * Performs a nested search for '#/', to detect hash router urls and take the params of the hash in that case.
+ * The index of the search parameter to use, e.g. hashSearch for hash routes (hash starts with '#/').
  *
- * @param url The URL to search.
- * @returns The location of the question mark, or `-1` if not found.
+ * @param parts: The url parts, as returned by `extractParts`.
+ * @returns The index of the search parameter to use (1 or 3).
  */
-const indexOfSearch = (url: string): number => url.indexOf('?', url.indexOf('#/') + 1);
+const searchIndex = (parts: UrlParts): 1 | 3 => (/^#\//.test(parts[2]) ? 3 : 1);
 
 /**
  * Read the **current** search params from `window.location`, with support for detecting React's HashRouter.
@@ -24,9 +40,8 @@ const indexOfSearch = (url: string): number => url.indexOf('?', url.indexOf('#/'
  * @returns The `URLSearchParams` instance, and a function that can be used to get an updated href.
  */
 const getSearchParams = (): URLSearchParams => {
-    const href = window.location.href;
-    const searchStart = indexOfSearch(href);
-    return new URLSearchParams(searchStart < 0 ? undefined : href.substring(searchStart));
+    const parts = extractParts(window.location.href);
+    return new URLSearchParams(parts[searchIndex(parts)]);
 };
 
 /**
@@ -37,13 +52,12 @@ const getSearchParams = (): URLSearchParams => {
  */
 const applySearchParams = (params: URLSearchParams): void => {
     const currentHref = window.location.href;
-    const index = indexOfSearch(currentHref);
-    let nextHref = index < 0 ? currentHref : currentHref.substring(0, index);
-    if (params.size > 0) {
-        nextHref = nextHref.concat('?', params.toString());
-    }
-    if (nextHref !== currentHref) {
-        window.history.replaceState(null, '', nextHref);
+    const parts = extractParts(currentHref);
+    const search = params.size > 0 ? `?${params.toString()}` : '';
+    const index = searchIndex(parts);
+    if (parts[index] !== search) {
+        parts[index] = search;
+        window.history.replaceState(null, '', parts.join(''));
     }
 };
 
@@ -95,14 +109,18 @@ export const useUrlSyncedState = <T>(options: UseUrlSyncedStateOptions<T>) => {
     const initialStateSerialized = useMemo(() => {
         const stateMap = new Map<string, string>();
         let initialize: URLSearchParams | null = null;
+        let needsApply = false;
         for (const [key, value, alwaysEmit] of options.serializer(getInitialState(options))) {
             stateMap.set(key, value);
-            if (alwaysEmit && value) {
+            if (sync && alwaysEmit && value) {
                 initialize ??= getSearchParams();
-                initialize.set(key, value);
+                if (!initialize.has(key)) {
+                    needsApply = true;
+                    initialize.set(key, value);
+                }
             }
         }
-        if (initialize) {
+        if (needsApply) {
             applySearchParams(initialize);
         }
         return stateMap;