@coveord/plasma-mantine 55.6.0 → 55.7.1

package/src/components/sticky-footer/StickyFooter.tsx

@@ -19,6 +19,8 @@ export interface StickyFooterProps
      *
      * The 'modal-footer' removes the modal's default padding so that the footer properly hugs the bottom of the modal.
      * It also adds a border on top of the footer.
+     *
+     * @deprecated Use Modal.Footer from @coveord/plasma-mantine/Modal for modal footers. For other cases, the 'default' variant should suffice.
      */
     variant?: 'default' | 'modal-footer';
 }

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;

package/src/index.ts

@@ -21,6 +21,7 @@ export {
     CopyToClipboard,
     Header,
     Menu,
+    Modal,
     PasswordInput,
     Select,
     Table,
@@ -29,6 +30,7 @@ export {
     type CopyToClipboardProps,
     type HeaderProps,
     type MenuItemProps,
+    type ModalFactory,
     type TableProps,
     type TableState,
 } from './components';

package/dist/cjs/components/prompt/PromptFooter.d.ts

@@ -1,6 +0,0 @@
-import { FunctionComponent, PropsWithChildren } from 'react';
-import { StickyFooterProps } from '../sticky-footer';
-export interface PromptFooterProps extends StickyFooterProps {
-}
-export declare const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>>;
-//# sourceMappingURL=PromptFooter.d.ts.map

package/dist/cjs/components/prompt/PromptFooter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PromptFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/PromptFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAe,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEjE,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;CAAG;AAE/D,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAIhF,CAAC"}

package/dist/cjs/components/prompt/PromptFooter.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "PromptFooter", {
-    enumerable: true,
-    get: function() {
-        return PromptFooter;
-    }
-});
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _jsxruntime = require("react/jsx-runtime");
-var _stickyfooter = require("../sticky-footer");
-var PromptFooter = function(_param) {
-    var children = _param.children, otherProps = _object_without_properties._(_param, [
-        "children"
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stickyfooter.StickyFooter, _object_spread_props._(_object_spread._({
-        borderTop: true
-    }, otherProps), {
-        children: children
-    }));
-};
-
-//# sourceMappingURL=PromptFooter.js.map

package/dist/cjs/components/prompt/PromptFooter.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/prompt/PromptFooter.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren} from 'react';\nimport {StickyFooter, StickyFooterProps} from '../sticky-footer';\n\nexport interface PromptFooterProps extends StickyFooterProps {}\n\nexport const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>> = ({children, ...otherProps}) => (\n    <StickyFooter borderTop {...otherProps}>\n        {children}\n    </StickyFooter>\n);\n"],"names":["PromptFooter","children","otherProps","StickyFooter","borderTop"],"mappings":";;;;+BAKaA;;;eAAAA;;;;;;;4BAJiC;AAIvC,IAAMA,eAAwE;QAAEC,kBAAAA,UAAaC;QAAbD;;yBACnF,qBAACE,0BAAY;QAACC,SAAS;OAAKF;kBACvBD"}

package/dist/esm/components/prompt/PromptFooter.d.ts

@@ -1,6 +0,0 @@
-import { FunctionComponent, PropsWithChildren } from 'react';
-import { StickyFooterProps } from '../sticky-footer';
-export interface PromptFooterProps extends StickyFooterProps {
-}
-export declare const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>>;
-//# sourceMappingURL=PromptFooter.d.ts.map

package/dist/esm/components/prompt/PromptFooter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PromptFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/PromptFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAe,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAEjE,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;CAAG;AAE/D,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAIhF,CAAC"}

package/dist/esm/components/prompt/PromptFooter.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { StickyFooter } from '../sticky-footer';
-export const PromptFooter = ({ children, ...otherProps })=>/*#__PURE__*/ _jsx(StickyFooter, {
-        borderTop: true,
-        ...otherProps,
-        children: children
-    });
-
-//# sourceMappingURL=PromptFooter.js.map

package/dist/esm/components/prompt/PromptFooter.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/prompt/PromptFooter.tsx"],"sourcesContent":["import {FunctionComponent, PropsWithChildren} from 'react';\nimport {StickyFooter, StickyFooterProps} from '../sticky-footer';\n\nexport interface PromptFooterProps extends StickyFooterProps {}\n\nexport const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>> = ({children, ...otherProps}) => (\n    <StickyFooter borderTop {...otherProps}>\n        {children}\n    </StickyFooter>\n);\n"],"names":["StickyFooter","PromptFooter","children","otherProps","borderTop"],"mappings":";AACA,SAAQA,YAAY,QAA0B,mBAAmB;AAIjE,OAAO,MAAMC,eAAwE,CAAC,EAACC,QAAQ,EAAE,GAAGC,YAAW,iBAC3G,KAACH;QAAaI,SAAS;QAAE,GAAGD,UAAU;kBACjCD;OAEP"}

package/src/components/prompt/PromptFooter.tsx

@@ -1,10 +0,0 @@
-import {FunctionComponent, PropsWithChildren} from 'react';
-import {StickyFooter, StickyFooterProps} from '../sticky-footer';
-
-export interface PromptFooterProps extends StickyFooterProps {}
-
-export const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>> = ({children, ...otherProps}) => (
-    <StickyFooter borderTop {...otherProps}>
-        {children}
-    </StickyFooter>
-);