@coveord/plasma-mantine 55.5.1 → 55.6.0

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

@@ -12,36 +12,13 @@ var _instanceof = require("@swc/helpers/_/_instanceof");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = require("react");
 /**
- * Iterates over the `SearchParamEntry` values, and applies them to `target`, optionally filtering values.
+ * 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.
  *
- * @param target The target to write values to, can be a Map (for the initial values) or `URLSearchParams`.
- * @param entries The entries to apply (as returned by the serializer).
- * @param filter Optional filter that allows to treat non-empty values as empty (e.g. to not set default values).
- */ var applyValues = function(target, entries, filter) {
-    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-    try {
-        for(var _iterator = entries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-            var entry = _step.value;
-            if (entry[1] && filter(entry)) {
-                target.set(entry[0], entry[1]);
-            } else {
-                target.delete(entry[0]);
-            }
-        }
-    } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-    } finally{
-        try {
-            if (!_iteratorNormalCompletion && _iterator.return != null) {
-                _iterator.return();
-            }
-        } finally{
-            if (_didIteratorError) {
-                throw _iteratorError;
-            }
-        }
-    }
+ * @param url The URL to search.
+ * @returns The location of the question mark, or `-1` if not found.
+ */ var indexOfSearch = function(url) {
+    return url.indexOf('?', url.indexOf('#/') + 1);
 };
 /**
  * Read the **current** search params from `window.location`, with support for detecting React's HashRouter.
@@ -50,53 +27,103 @@ var _react = require("react");
  * @returns The `URLSearchParams` instance, and a function that can be used to get an updated href.
  */ var getSearchParams = function() {
     var href = window.location.href;
-    // Search for '#/' to detect hash router urls
-    var searchStart = href.indexOf('?', href.indexOf('#/') + 1);
-    var params = new URLSearchParams(searchStart < 0 ? '' : href.substring(searchStart));
-    return [
-        params,
-        function() {
-            var result = searchStart < 0 ? href : href.substring(0, searchStart);
-            if (params.size > 0) {
-                result = result.concat('?', params.toString());
-            }
-            return result;
-        }
-    ];
+    var searchStart = indexOfSearch(href);
+    return new URLSearchParams(searchStart < 0 ? undefined : href.substring(searchStart));
+};
+/**
+ * Apply the search params to the current location, using `replaceState` (no navigation history).
+ * Note that only parameters in the `params` argument will be set, any other current params will be removed.
+ *
+ * @param params The parameters to apply.
+ */ var applySearchParams = function(params) {
+    var currentHref = window.location.href;
+    var index = indexOfSearch(currentHref);
+    var 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);
+    }
+};
+var getInitialState = function(options) {
+    return _instanceof._(options.initialState, Function) ? options.initialState() : options.initialState;
 };
 var useUrlSyncedState = function(options) {
     var sync = options.sync !== false;
-    var initialState = (0, _react.useMemo)(function() {
-        return sync ? options.deserializer(getSearchParams()[0]) : options.initialState;
-    }, [
-        options.initialState,
-        options.sync
-    ]);
-    var _useState = _sliced_to_array._((0, _react.useState)(initialState), 2), state = _useState[0], setState = _useState[1];
-    // Capture the initial state as a map, to compare values and not set them if they match.
+    var _useState = _sliced_to_array._((0, _react.useState)(function() {
+        var initialState = getInitialState(options);
+        return sync ? options.deserializer(getSearchParams(), initialState) : initialState;
+    }), 2), state = _useState[0], setState = _useState[1];
+    // Capture the initial state as a map (first render only!), to compare values and see if they should be set to the params.
     var initialStateSerialized = (0, _react.useMemo)(function() {
-        var v = new Map();
-        applyValues(v, options.serializer(options.initialState), function(_) {
-            return true;
-        });
-        return v;
-    }, [
-        initialState,
-        options.serializer
-    ]);
+        var stateMap = new Map();
+        var initialize = null;
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = options.serializer(getInitialState(options))[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var _step_value = _sliced_to_array._(_step.value, 3), key = _step_value[0], value = _step_value[1], alwaysEmit = _step_value[2];
+                stateMap.set(key, value);
+                if (alwaysEmit && value) {
+                    initialize !== null && initialize !== void 0 ? initialize : initialize = getSearchParams();
+                    initialize.set(key, value);
+                }
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+        if (initialize) {
+            applySearchParams(initialize);
+        }
+        return stateMap;
+    }, []);
     var enhancedSetState = (0, _react.useMemo)(function() {
-        return sync ? function(updater) {
+        if (!sync) {
+            return setState;
+        }
+        return function(updater) {
             setState(function(old) {
-                var _getSearchParams = _sliced_to_array._(getSearchParams(), 2), search = _getSearchParams[0], getUrl = _getSearchParams[1];
                 var newValue = _instanceof._(updater, Function) ? updater(old) : updater;
-                applyValues(search, options.serializer(newValue), function(param) {
-                    var _param = _sliced_to_array._(param, 2), key = _param[0], value = _param[1];
-                    return initialStateSerialized.get(key) !== value;
-                });
-                window.history.replaceState(null, '', getUrl());
+                var search = getSearchParams();
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = options.serializer(newValue)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var _step_value = _sliced_to_array._(_step.value, 3), key = _step_value[0], value = _step_value[1], alwaysEmit = _step_value[2];
+                        if (value && (alwaysEmit || !Object.is(initialStateSerialized.get(key), value))) {
+                            search.set(key, value);
+                        } else {
+                            search.delete(key);
+                        }
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+                applySearchParams(search);
                 return newValue;
             });
-        } : setState;
+        };
     }, [
         sync
     ]);

package/dist/cjs/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 key (index 0) and value (index 1) of a search parameter.\n */\nexport type SearchParamEntry = [string, string | null | undefined];\n\n/**\n * Iterates over the `SearchParamEntry` values, and applies them to `target`, optionally filtering values.\n *\n * @param target The target to write values to, can be a Map (for the initial values) or `URLSearchParams`.\n * @param entries The entries to apply (as returned by the serializer).\n * @param filter Optional filter that allows to treat non-empty values as empty (e.g. to not set default values).\n */\nconst applyValues = (\n    target: Map<string, string> | URLSearchParams,\n    entries: Iterable<SearchParamEntry>,\n    filter: (entry: Readonly<SearchParamEntry>) => boolean,\n): void => {\n    for (const entry of entries) {\n        if (entry[1] && filter(entry)) {\n            target.set(entry[0], entry[1]);\n        } else {\n            target.delete(entry[0]);\n        }\n    }\n};\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, () => string] => {\n    const href = window.location.href;\n    // Search for '#/' to detect hash router urls\n    const searchStart = href.indexOf('?', href.indexOf('#/') + 1);\n    const params = new URLSearchParams(searchStart < 0 ? '' : href.substring(searchStart));\n    return [\n        params,\n        () => {\n            let result = searchStart < 0 ? href : href.substring(0, searchStart);\n            if (params.size > 0) {\n                result = result.concat('?', params.toString());\n            }\n            return result;\n        },\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 extends object ? Readonly<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     * @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, 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\nexport const useUrlSyncedState = <T>(options: UseUrlSyncedStateOptions<T>) => {\n    const sync = options.sync !== false;\n    const initialState = useMemo(\n        () => (sync ? options.deserializer(getSearchParams()[0]) : options.initialState),\n        [options.initialState, options.sync],\n    );\n    const [state, setState] = useState<T>(initialState);\n    // Capture the initial state as a map, to compare values and not set them if they match.\n    const initialStateSerialized = useMemo(() => {\n        const v = new Map<string, string>();\n        applyValues(v, options.serializer(options.initialState), (_) => true);\n        return v;\n    }, [initialState, options.serializer]);\n    const enhancedSetState = useMemo<Dispatch<SetStateAction<T>>>(\n        () =>\n            sync\n                ? (updater: SetStateAction<T>) => {\n                      setState((old) => {\n                          const [search, getUrl] = getSearchParams();\n                          const newValue = updater instanceof Function ? updater(old) : updater;\n                          applyValues(\n                              search,\n                              options.serializer(newValue),\n                              ([key, value]) => initialStateSerialized.get(key) !== value,\n                          );\n                          window.history.replaceState(null, '', getUrl());\n                          return newValue;\n                      });\n                  }\n                : setState,\n        [sync],\n    );\n\n    return [state, enhancedSetState] as const;\n};\n"],"names":["useUrlSyncedState","applyValues","target","entries","filter","entry","set","delete","getSearchParams","href","window","location","searchStart","indexOf","params","URLSearchParams","substring","result","size","concat","toString","options","sync","initialState","useMemo","deserializer","useState","state","setState","initialStateSerialized","v","Map","serializer","_","enhancedSetState","updater","old","search","getUrl","newValue","Function","key","value","get","history","replaceState"],"mappings":";;;;+BAqFaA;;;eAAAA;;;;;qBArF6C;AAO1D;;;;;;CAMC,GACD,IAAMC,cAAc,SAChBC,QACAC,SACAC;QAEK,kCAAA,2BAAA;;QAAL,QAAK,YAAeD,4BAAf,SAAA,6BAAA,QAAA,yBAAA,iCAAwB;YAAxB,IAAME,QAAN;YACD,IAAIA,KAAK,CAAC,EAAE,IAAID,OAAOC,QAAQ;gBAC3BH,OAAOI,GAAG,CAACD,KAAK,CAAC,EAAE,EAAEA,KAAK,CAAC,EAAE;YACjC,OAAO;gBACHH,OAAOK,MAAM,CAACF,KAAK,CAAC,EAAE;YAC1B;QACJ;;QANK;QAAA;;;iBAAA,6BAAA;gBAAA;;;gBAAA;sBAAA;;;;AAOT;AAEA;;;;;CAKC,GACD,IAAMG,kBAAkB;IACpB,IAAMC,OAAOC,OAAOC,QAAQ,CAACF,IAAI;IACjC,6CAA6C;IAC7C,IAAMG,cAAcH,KAAKI,OAAO,CAAC,KAAKJ,KAAKI,OAAO,CAAC,QAAQ;IAC3D,IAAMC,SAAS,IAAIC,gBAAgBH,cAAc,IAAI,KAAKH,KAAKO,SAAS,CAACJ;IACzE,OAAO;QACHE;QACA;YACI,IAAIG,SAASL,cAAc,IAAIH,OAAOA,KAAKO,SAAS,CAAC,GAAGJ;YACxD,IAAIE,OAAOI,IAAI,GAAG,GAAG;gBACjBD,SAASA,OAAOE,MAAM,CAAC,KAAKL,OAAOM,QAAQ;YAC/C;YACA,OAAOH;QACX;KACH;AACL;AAoCO,IAAMjB,oBAAoB,SAAIqB;IACjC,IAAMC,OAAOD,QAAQC,IAAI,KAAK;IAC9B,IAAMC,eAAeC,IAAAA,cAAO,EACxB;eAAOF,OAAOD,QAAQI,YAAY,CAACjB,iBAAiB,CAAC,EAAE,IAAIa,QAAQE,YAAY;OAC/E;QAACF,QAAQE,YAAY;QAAEF,QAAQC,IAAI;KAAC;IAExC,IAA0BI,+BAAAA,IAAAA,eAAQ,EAAIH,mBAA/BI,QAAmBD,cAAZE,WAAYF;IAC1B,wFAAwF;IACxF,IAAMG,yBAAyBL,IAAAA,cAAO,EAAC;QACnC,IAAMM,IAAI,IAAIC;QACd9B,YAAY6B,GAAGT,QAAQW,UAAU,CAACX,QAAQE,YAAY,GAAG,SAACU;mBAAM;;QAChE,OAAOH;IACX,GAAG;QAACP;QAAcF,QAAQW,UAAU;KAAC;IACrC,IAAME,mBAAmBV,IAAAA,cAAO,EAC5B;eACIF,OACM,SAACa;YACGP,SAAS,SAACQ;gBACN,IAAyB5B,sCAAAA,uBAAlB6B,SAAkB7B,qBAAV8B,SAAU9B;gBACzB,IAAM+B,WAAWJ,AAAO,aAAYK,CAAnBL,SAAmBK,YAAWL,QAAQC,OAAOD;gBAC9DlC,YACIoC,QACAhB,QAAQW,UAAU,CAACO,WACnB;+DAAEE,iBAAKC;2BAAWb,uBAAuBc,GAAG,CAACF,SAASC;;gBAE1DhC,OAAOkC,OAAO,CAACC,YAAY,CAAC,MAAM,IAAIP;gBACtC,OAAOC;YACX;QACJ,IACAX;OACV;QAACN;KAAK;IAGV,OAAO;QAACK;QAAOO;KAAiB;AACpC"}
+{"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":["useUrlSyncedState","indexOfSearch","url","indexOf","getSearchParams","href","window","location","searchStart","URLSearchParams","undefined","substring","applySearchParams","params","currentHref","index","nextHref","size","concat","toString","history","replaceState","getInitialState","options","Function","initialState","sync","useState","deserializer","state","setState","initialStateSerialized","useMemo","stateMap","Map","initialize","serializer","key","value","alwaysEmit","set","enhancedSetState","updater","old","newValue","search","Object","is","get","delete"],"mappings":"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"}

package/dist/esm/components/table/index.d.ts

@@ -4,5 +4,5 @@ export { type TablePredicateProps } from './table-predicate/TablePredicate';
 export { type TableAction, type TableLayout, type TableLayoutProps, type TableProps } from './Table.types';
 export { useTableContext } from './TableContext';
 export { useTable, type TableState, type TableStore, type UseTableOptions } from './use-table';
-export { useUrlSyncedState } from './use-url-synced-state';
+export { useUrlSyncedState, type UseUrlSyncedStateOptions, type SearchParamEntry } from './use-url-synced-state';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,IAAI,eAAe,EAAC,MAAM,uBAAuB,CAAC;AACpE,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,KAAK,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAC,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC;AACzG,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAC,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAC,MAAM,aAAa,CAAC;AAC7F,OAAO,EAAC,iBAAiB,EAAC,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,IAAI,eAAe,EAAC,MAAM,uBAAuB,CAAC;AACpE,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,KAAK,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAC,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,UAAU,EAAC,MAAM,eAAe,CAAC;AACzG,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAC,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAC,MAAM,aAAa,CAAC;AAC7F,OAAO,EAAC,iBAAiB,EAAE,KAAK,wBAAwB,EAAE,KAAK,gBAAgB,EAAC,MAAM,wBAAwB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export {flexRender as renderTableCell} from '@tanstack/react-table';\nexport * from './Table';\nexport {type TablePredicateProps} from './table-predicate/TablePredicate';\nexport {type TableAction, type TableLayout, type TableLayoutProps, type TableProps} from './Table.types';\nexport {useTableContext} from './TableContext';\nexport {useTable, type TableState, type TableStore, type UseTableOptions} from './use-table';\nexport {useUrlSyncedState} from './use-url-synced-state';\n"],"names":["flexRender","renderTableCell","useTableContext","useTable","useUrlSyncedState"],"mappings":"AAAA,SAAQA,cAAcC,eAAe,QAAO,wBAAwB;AACpE,cAAc,UAAU;AAGxB,SAAQC,eAAe,QAAO,iBAAiB;AAC/C,SAAQC,QAAQ,QAA+D,cAAc;AAC7F,SAAQC,iBAAiB,QAAO,yBAAyB"}
+{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export {flexRender as renderTableCell} from '@tanstack/react-table';\nexport * from './Table';\nexport {type TablePredicateProps} from './table-predicate/TablePredicate';\nexport {type TableAction, type TableLayout, type TableLayoutProps, type TableProps} from './Table.types';\nexport {useTableContext} from './TableContext';\nexport {useTable, type TableState, type TableStore, type UseTableOptions} from './use-table';\nexport {useUrlSyncedState, type UseUrlSyncedStateOptions, type SearchParamEntry} from './use-url-synced-state';\n"],"names":["flexRender","renderTableCell","useTableContext","useTable","useUrlSyncedState"],"mappings":"AAAA,SAAQA,cAAcC,eAAe,QAAO,wBAAwB;AACpE,cAAc,UAAU;AAGxB,SAAQC,eAAe,QAAO,iBAAiB;AAC/C,SAAQC,QAAQ,QAA+D,cAAc;AAC7F,SAAQC,iBAAiB,QAA6D,yBAAyB"}

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":"AACA,OAAO,EAAC,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEjG,OAAO,EAAC,QAAQ,EAAE,cAAc,EAAiC,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAC,KAAK,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAI/D,KAAK,WAAW,CAAC,CAAC,IAAI;KACjB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAClE,CAAC;AAEF,MAAM,WAAW,UAAU,CAAC,KAAK,GAAG,OAAO;IACvC;;;;OAIG;IACH,UAAU,EAAE,eAAe,CAAC;IAC5B;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;;;OAIG;IACH,OAAO,EAAE,YAAY,CAAC;IACtB;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,QAAQ,EAAE,aAAa,CAAC;IACxB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;;OAIG;IACH,SAAS,EAAE,oBAAoB,CAAC;IAChC;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACpC;;;;OAIG;IACH,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC7C;AAED,MAAM,WAAW,UAAU,CAAC,KAAK,GAAG,OAAO;IACvC;;OAEG;IACH,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACzB;;OAEG;IACH,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACzE;;OAEG;IACH,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7E;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACnE;;OAEG;IACH,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7E;;OAEG;IACH,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrE;;OAEG;IACH,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACzE;;OAEG;IACH,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACjE;;OAEG;IACH,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACvE;;OAEG;IACH,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7E;;OAEG;IACH,mBAAmB,EAAE,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACrF;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,eAAe,EAAE,MAAM,KAAK,EAAE,CAAC;IAC/B;;OAEG;IACH,cAAc,EAAE,MAAM,KAAK,GAAG,IAAI,CAAC;IACnC;;OAEG;IACH,wBAAwB,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,kBAAkB,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe,CAAC,KAAK,GAAG,OAAO;IAC5C;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9C;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AA4HD,eAAO,MAAM,QAAQ,GAAI,KAAK,gBAAe,eAAe,CAAC,KAAK,CAAC,KAAQ,UAAU,CAAC,KAAK,CA+I1F,CAAC"}

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

@@ -25,6 +25,114 @@ const defaultState = {
     rowSelection: {},
     columnVisibility: {}
 };
+const serialization = (input)=>Object.freeze(input);
+const PAGINATION_SERIALIZATION = serialization({
+    serializer: ({ pageIndex, pageSize })=>[
+            [
+                'page',
+                (pageIndex + 1).toString()
+            ],
+            [
+                'pageSize',
+                pageSize.toString()
+            ]
+        ],
+    deserializer: (params, initialState)=>defaultsDeep({
+            pageIndex: params.get('page') ? Math.max(1, parseInt(params.get('page'), 10)) - 1 : undefined,
+            pageSize: params.get('pageSize') ? parseInt(params.get('pageSize'), 10) : undefined
+        }, initialState)
+});
+const SORTING_SERIALIZATION = serialization({
+    serializer: (sorting)=>[
+            [
+                'sortBy',
+                sorting.map(({ id, desc })=>`${id}.${desc ? 'desc' : 'asc'}`).join(',')
+            ]
+        ],
+    deserializer: (params, initialState)=>{
+        if (!params.has('sortBy')) {
+            return initialState;
+        }
+        const sorts = params.get('sortBy')?.split(',') ?? [];
+        return sorts.map((sort)=>{
+            const [id, order] = sort.split('.');
+            return {
+                id,
+                desc: order === 'desc'
+            };
+        });
+    }
+});
+const GLOBAL_FILTER_SERIALIZATION = serialization({
+    serializer: (filter)=>[
+            [
+                'filter',
+                filter
+            ]
+        ],
+    deserializer: (params, initialState)=>params.get('filter') ?? initialState
+});
+const PREDICATES_SERIALIZATION = serialization({
+    serializer: (predicates)=>Object.entries(predicates),
+    deserializer: (params, initialState)=>Object.keys(initialState).reduce((acc, predicateKey)=>{
+            acc[predicateKey] = params.get(predicateKey) ?? initialState[predicateKey];
+            return acc;
+        }, {})
+});
+const LAYOUT_SERIALIZATION = serialization({
+    serializer: (_layout)=>[
+            [
+                'layout',
+                _layout
+            ]
+        ],
+    deserializer: (params, initialState)=>params.get('layout') ?? initialState
+});
+const DATE_RANGE_SERIALIZATION = serialization({
+    serializer: ([from, to])=>[
+            [
+                'from',
+                from?.toISOString() ?? '',
+                true
+            ],
+            [
+                'to',
+                to?.toISOString() ?? '',
+                true
+            ]
+        ],
+    deserializer: (params, initial)=>[
+            params.get('from') ? new Date(params.get('from')) : initial[0],
+            params.get('to') ? new Date(params.get('to')) : initial[1]
+        ]
+});
+const COLUMN_VISIBILITY_SERIALIZATION = serialization({
+    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, initial)=>{
+        if (!params.has('show') && !params.has('hide')) {
+            return initial;
+        }
+        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;
+    }
+});
 export const useTable = (userOptions = {})=>{
     const options = defaultsDeep({}, userOptions, defaultOptions);
     const initialState = defaultsDeep({}, options.initialState, defaultState);
@@ -32,127 +140,40 @@ export const useTable = (userOptions = {})=>{
      * The `useUrlSyncedState` hook defaults to synchronize, but the table wants to default to not synchronize,
      * so always pass the sync option as a resolved boolean value.
      */ const sync = !!options.syncWithUrl;
-    // synced with url
+    // (Optionally) synced with url
     const [pagination, setPagination] = useUrlSyncedState({
+        ...PAGINATION_SERIALIZATION,
         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
     });
     const [sorting, setSorting] = useUrlSyncedState({
+        ...SORTING_SERIALIZATION,
         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
     });
     const [globalFilter, setGlobalFilter] = useUrlSyncedState({
+        ...GLOBAL_FILTER_SERIALIZATION,
         initialState: initialState.globalFilter,
-        serializer: (filter)=>[
-                [
-                    'filter',
-                    filter
-                ]
-            ],
-        deserializer: (params)=>params.get('filter') ?? initialState.globalFilter,
         sync
     });
     const [predicates, setPredicates] = useUrlSyncedState({
+        ...PREDICATES_SERIALIZATION,
         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
     });
     const [layout, setLayout] = useUrlSyncedState({
+        ...LAYOUT_SERIALIZATION,
         initialState: initialState.layout,
-        serializer: (_layout)=>[
-                [
-                    'layout',
-                    _layout
-                ]
-            ],
-        deserializer: (params)=>params.get('layout') ?? initialState.layout,
         sync
     });
     const [dateRange, setDateRange] = useUrlSyncedState({
+        ...DATE_RANGE_SERIALIZATION,
         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
     });
     const [columnVisibility, setColumnVisibility] = useUrlSyncedState({
+        ...COLUMN_VISIBILITY_SERIALIZATION,
         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
     });
     // unsynced