@ansible/ansible-ui-framework 0.0.190

package/cjs/framework/useTableItems.js

@@ -0,0 +1,485 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePaged = exports.useFiltered = exports.useSorted = exports.useSelectedInMemory = exports.useSelected = exports.useTableItems = void 0;
+var debounce_1 = __importDefault(require("debounce"));
+var react_1 = require("react");
+function useTableItems(items, keyFn, defaults) {
+    var _a = useSelected(items, keyFn), selectedItems = _a.selectedItems, selectItem = _a.selectItem, unselectItem = _a.unselectItem, isSelected = _a.isSelected, selectItems = _a.selectItems, unselectAll = _a.unselectAll, allSelected = _a.allSelected;
+    var _b = useSorted(items), sorted = _b.sorted, sort = _b.sort, setSort = _b.setSort;
+    var _c = useFiltered(sorted, keyFn), filtered = _c.filtered, setFilterFn = _c.setFilterFn;
+    var _d = useSearched(filtered, keyFn, defaults === null || defaults === void 0 ? void 0 : defaults.search), searched = _d.searched, search = _d.search, setSearch = _d.setSearch, setSearchFn = _d.setSearchFn;
+    var _e = usePaged(searched), paged = _e.paged, page = _e.page, setPage = _e.setPage, perPage = _e.perPage, setPerPage = _e.setPerPage;
+    var selectPage = (0, react_1.useCallback)(function () { return selectItems(paged); }, [paged, selectItems]);
+    var selectAll = (0, react_1.useCallback)(function () { return selectItems(searched); }, [searched, selectItems]);
+    return (0, react_1.useMemo)(function () { return ({
+        allSelected: allSelected,
+        filtered: filtered,
+        isSelected: isSelected,
+        page: page,
+        paged: paged,
+        perPage: perPage,
+        search: search,
+        searched: searched,
+        selectAll: selectAll,
+        selectItem: selectItem,
+        selectPage: selectPage,
+        selectedItems: selectedItems,
+        setFilterFn: setFilterFn,
+        setPage: setPage,
+        setPerPage: setPerPage,
+        setSearch: setSearch,
+        setSearchFn: setSearchFn,
+        setSort: setSort,
+        sort: sort,
+        sorted: sorted,
+        unselectAll: unselectAll,
+        unselectItem: unselectItem,
+    }); }, [
+        allSelected,
+        filtered,
+        isSelected,
+        page,
+        paged,
+        perPage,
+        search,
+        searched,
+        selectAll,
+        selectItem,
+        selectPage,
+        selectedItems,
+        setFilterFn,
+        setPage,
+        setPerPage,
+        setSearch,
+        setSearchFn,
+        setSort,
+        sort,
+        sorted,
+        unselectAll,
+        unselectItem,
+    ]);
+}
+exports.useTableItems = useTableItems;
+function useSelected(items, keyFn) {
+    var _a = __read((0, react_1.useState)({}), 2), selectedMap = _a[0], setSelectedMap = _a[1];
+    (0, react_1.useEffect)(function () {
+        setSelectedMap(function (selectedMap) {
+            var changed = false;
+            items.forEach(function (item) {
+                var key = keyFn(item);
+                if (selectedMap[key] && selectedMap[key] !== item) {
+                    changed = true;
+                    selectedMap[key] = item;
+                }
+            });
+            return changed ? __assign({}, selectedMap) : selectedMap;
+        });
+    }, [items, keyFn]);
+    var selectItem = (0, react_1.useCallback)(function (item) {
+        setSelectedMap(function (selectedMap) {
+            var itemKey = keyFn(item);
+            var existing = selectedMap[itemKey];
+            if (existing !== item) {
+                selectedMap = __assign({}, selectedMap);
+                selectedMap[itemKey] = item;
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    var unselectItem = (0, react_1.useCallback)(function (item) {
+        setSelectedMap(function (selectedMap) {
+            var itemKey = keyFn(item);
+            var existing = selectedMap[itemKey];
+            if (existing) {
+                selectedMap = __assign({}, selectedMap);
+                delete selectedMap[itemKey];
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    var isSelected = (0, react_1.useCallback)(function (item) {
+        var itemKey = keyFn(item);
+        return selectedMap[itemKey] !== undefined;
+    }, [keyFn, selectedMap]);
+    var selectItems = (0, react_1.useCallback)(function (items) {
+        setSelectedMap(function (selectedMap) {
+            var e_1, _a;
+            selectedMap = __assign({}, selectedMap);
+            try {
+                for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
+                    var item = items_1_1.value;
+                    var itemKey = keyFn(item);
+                    selectedMap[itemKey] = item;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    var selectAll = (0, react_1.useCallback)(function () { return selectItems(items); }, [items, selectItems]);
+    var unselectItems = (0, react_1.useCallback)(function (items) {
+        var e_2, _a;
+        try {
+            for (var items_2 = __values(items), items_2_1 = items_2.next(); !items_2_1.done; items_2_1 = items_2.next()) {
+                var item = items_2_1.value;
+                unselectItem(item);
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (items_2_1 && !items_2_1.done && (_a = items_2.return)) _a.call(items_2);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    }, [unselectItem]);
+    var unselectAll = (0, react_1.useCallback)(function () {
+        setSelectedMap(function (selectedMap) {
+            if (Object.keys(selectedMap).length > 0) {
+                return {};
+            }
+            return selectedMap;
+        });
+    }, []);
+    var selectedItems = (0, react_1.useMemo)(function () { return Object.values(selectedMap); }, [selectedMap]);
+    var allSelected = (0, react_1.useMemo)(function () { return selectedItems.length === items.length; }, [items.length, selectedItems.length]);
+    return (0, react_1.useMemo)(function () { return ({
+        selectedItems: selectedItems,
+        selectItem: selectItem,
+        unselectItem: unselectItem,
+        isSelected: isSelected,
+        selectItems: selectItems,
+        selectAll: selectAll,
+        unselectAll: unselectAll,
+        allSelected: allSelected,
+        keyFn: keyFn,
+        unselectItems: unselectItems,
+    }); }, [
+        allSelected,
+        isSelected,
+        keyFn,
+        selectAll,
+        selectItem,
+        selectItems,
+        selectedItems,
+        unselectAll,
+        unselectItem,
+        unselectItems,
+    ]);
+}
+exports.useSelected = useSelected;
+function useSelectedInMemory(items, keyFn) {
+    var _a = __read((0, react_1.useState)({}), 2), selectedMap = _a[0], setSelectedMap = _a[1];
+    (0, react_1.useEffect)(function () {
+        setSelectedMap(function (selectedMap) {
+            var e_3, _a;
+            var changed = false;
+            var itemsKeys = items.reduce(function (itemsKeys, item) {
+                var key = keyFn(item);
+                itemsKeys[key] = item;
+                if (selectedMap[key] && selectedMap[key] !== item) {
+                    changed = true;
+                    selectedMap[key] = item;
+                }
+                return itemsKeys;
+            }, {});
+            var removeKeyMap = {};
+            for (var key in selectedMap) {
+                if (!itemsKeys[key]) {
+                    removeKeyMap[key] = true;
+                }
+            }
+            var removeKeys = Object.keys(removeKeyMap);
+            if (removeKeys.length) {
+                changed = true;
+                try {
+                    for (var removeKeys_1 = __values(removeKeys), removeKeys_1_1 = removeKeys_1.next(); !removeKeys_1_1.done; removeKeys_1_1 = removeKeys_1.next()) {
+                        var key = removeKeys_1_1.value;
+                        delete selectedMap[key];
+                    }
+                }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (removeKeys_1_1 && !removeKeys_1_1.done && (_a = removeKeys_1.return)) _a.call(removeKeys_1);
+                    }
+                    finally { if (e_3) throw e_3.error; }
+                }
+            }
+            return changed ? __assign({}, selectedMap) : selectedMap;
+        });
+    }, [items, keyFn]);
+    var selectItem = (0, react_1.useCallback)(function (item) {
+        setSelectedMap(function (selectedMap) {
+            var itemKey = keyFn(item);
+            var existing = selectedMap[itemKey];
+            if (existing !== item) {
+                selectedMap = __assign({}, selectedMap);
+                selectedMap[itemKey] = item;
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    var unselectItem = (0, react_1.useCallback)(function (item) {
+        setSelectedMap(function (selectedMap) {
+            var itemKey = keyFn(item);
+            var existing = selectedMap[itemKey];
+            if (existing) {
+                selectedMap = __assign({}, selectedMap);
+                delete selectedMap[itemKey];
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    var isSelected = (0, react_1.useCallback)(function (item) {
+        var itemKey = keyFn(item);
+        return selectedMap[itemKey] !== undefined;
+    }, [keyFn, selectedMap]);
+    var selectItems = (0, react_1.useCallback)(function (items) {
+        setSelectedMap(function (selectedMap) {
+            var e_4, _a;
+            selectedMap = __assign({}, selectedMap);
+            try {
+                for (var items_3 = __values(items), items_3_1 = items_3.next(); !items_3_1.done; items_3_1 = items_3.next()) {
+                    var item = items_3_1.value;
+                    var itemKey = keyFn(item);
+                    selectedMap[itemKey] = item;
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (items_3_1 && !items_3_1.done && (_a = items_3.return)) _a.call(items_3);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            return selectedMap;
+        });
+    }, [keyFn]);
+    var selectAll = (0, react_1.useCallback)(function () {
+        selectItems(items);
+    }, [items, selectItems]);
+    var unselectAll = (0, react_1.useCallback)(function () {
+        setSelectedMap(function (selectedMap) {
+            if (Object.keys(selectedMap).length > 0) {
+                return {};
+            }
+            return selectedMap;
+        });
+    }, []);
+    var selectedItems = (0, react_1.useMemo)(function () { return Object.values(selectedMap); }, [selectedMap]);
+    var allSelected = (0, react_1.useMemo)(function () { return selectedItems.length === items.length; }, [items.length, selectedItems.length]);
+    return (0, react_1.useMemo)(function () { return ({
+        selectedItems: selectedItems,
+        selectItem: selectItem,
+        unselectItem: unselectItem,
+        isSelected: isSelected,
+        selectItems: selectItems,
+        selectAll: selectAll,
+        unselectAll: unselectAll,
+        allSelected: allSelected,
+        keyFn: keyFn,
+    }); }, [
+        allSelected,
+        isSelected,
+        keyFn,
+        selectAll,
+        selectItem,
+        selectItems,
+        selectedItems,
+        unselectAll,
+        unselectItem,
+    ]);
+}
+exports.useSelectedInMemory = useSelectedInMemory;
+function useSorted(items) {
+    var _a = __read((0, react_1.useState)(), 2), sort = _a[0], setSort = _a[1];
+    var _b = sort !== null && sort !== void 0 ? sort : {}, direction = _b.direction, sortFn = _b.sortFn;
+    var sorted = (0, react_1.useMemo)(function () {
+        if (sortFn) {
+            if (direction === 'asc') {
+                return __spreadArray([], __read(items.sort(sortFn)), false);
+            }
+            else {
+                return __spreadArray([], __read(items.sort(sortFn).reverse()), false);
+            }
+        }
+        else {
+            return items;
+        }
+    }, [direction, items, sortFn]);
+    return (0, react_1.useMemo)(function () { return ({ sorted: sorted, sort: sort, setSort: setSort }); }, [sort, sorted]);
+}
+exports.useSorted = useSorted;
+function useFiltered(items, keyFn) {
+    var filterMapRef = (0, react_1.useRef)({
+        map: {},
+    });
+    var _a = __read((0, react_1.useState)(), 2), filterFn = _a[0], setFilterFnState = _a[1];
+    var setFilterFn = (0, react_1.useCallback)(function (filterFn) { return setFilterFnState(function () { return filterFn; }); }, []);
+    var _b = __read((0, react_1.useState)([]), 2), filtered = _b[0], setFiltered = _b[1];
+    (0, react_1.useEffect)(function () {
+        filterMapRef.current.map = {};
+    }, [filterFn]);
+    var cachedFilterFn = (0, react_1.useCallback)(function (item) {
+        var key = keyFn(item);
+        var cached = filterMapRef.current.map[key];
+        if (!cached) {
+            cached = { item: item, passes: filterFn ? filterFn(item) : true };
+            filterMapRef.current.map[key] = cached;
+        }
+        else if (cached.item !== item) {
+            cached.item = item;
+            cached.passes = filterFn ? filterFn(item) : true;
+        }
+        return cached.passes;
+    }, [filterFn, keyFn]);
+    (0, react_1.useEffect)(function () {
+        if (filterFn) {
+            setFiltered(items.filter(cachedFilterFn));
+        }
+        else {
+            setFiltered(items);
+        }
+    }, [items, filterFn, cachedFilterFn]);
+    return (0, react_1.useMemo)(function memoFiltered() {
+        return { filtered: filtered, setFilterFn: setFilterFn };
+    }, [filtered, setFilterFn]);
+}
+exports.useFiltered = useFiltered;
+function useSearched(items, keyFn, defaultSearch) {
+    var searchMapRef = (0, react_1.useRef)({
+        map: {},
+    });
+    var _a = __read((0, react_1.useState)(), 2), searchFn = _a[0], setSearchFnState = _a[1];
+    var setSearchFn = (0, react_1.useCallback)(function (searchFn) { return setSearchFnState(function () { return searchFn; }); }, []);
+    var _b = __read((0, react_1.useState)([]), 2), searched = _b[0], setSearched = _b[1];
+    var _c = __read((0, react_1.useState)(defaultSearch !== null && defaultSearch !== void 0 ? defaultSearch : ''), 2), search = _c[0], setSearchState = _c[1];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var setSearch = (0, react_1.useCallback)((0, debounce_1.default)(function (search) { return setSearchState(search); }, 200), []);
+    (0, react_1.useEffect)(function () {
+        searchMapRef.current.map = {};
+    }, [search, searchFn]);
+    var cachedSearchFn = (0, react_1.useCallback)(function (item) {
+        var key = keyFn(item);
+        var cached = searchMapRef.current.map[key];
+        if (!cached) {
+            cached = { item: item, score: searchFn ? searchFn(item, search) : 0 };
+            searchMapRef.current.map[key] = cached;
+        }
+        else if (cached.item !== item) {
+            cached.item = item;
+            cached.score = searchFn ? searchFn(item, search) : 0;
+        }
+        return cached;
+    }, [keyFn, searchFn, search]);
+    (0, react_1.useEffect)(function () {
+        if (searchFn && search) {
+            setSearched(items
+                .map(cachedSearchFn)
+                .filter(function (cached) { return cached.score < 0.5; })
+                .sort(function (l, r) { return l.score - r.score; })
+                .map(function (cached) { return cached.item; }));
+        }
+        else {
+            setSearched(items);
+        }
+    }, [search, items, searchFn, cachedSearchFn]);
+    return (0, react_1.useMemo)(function memoFiltered() {
+        return { searched: searched, search: search, setSearch: setSearch, setSearchFn: setSearchFn };
+    }, [searched, search, setSearch, setSearchFn]);
+}
+function usePaged(source) {
+    var _a = __read((0, react_1.useState)([]), 2), paged = _a[0], setPaged = _a[1];
+    var _b = __read((0, react_1.useState)(1), 2), page = _b[0], setPage = _b[1];
+    var _c = __read((0, react_1.useState)(10), 2), perPage = _c[0], setPerPage = _c[1];
+    (0, react_1.useEffect)(function () {
+        setPaged(function (paged) {
+            var e_5, _a;
+            var newPaged = source.slice((page - 1) * perPage, page * perPage);
+            if (paged.length !== newPaged.length) {
+                return newPaged;
+            }
+            var index = 0;
+            try {
+                for (var newPaged_1 = __values(newPaged), newPaged_1_1 = newPaged_1.next(); !newPaged_1_1.done; newPaged_1_1 = newPaged_1.next()) {
+                    var item = newPaged_1_1.value;
+                    if (paged[index++] !== item) {
+                        return newPaged;
+                    }
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (newPaged_1_1 && !newPaged_1_1.done && (_a = newPaged_1.return)) _a.call(newPaged_1);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+            return paged;
+        });
+    }, [page, perPage, source]);
+    (0, react_1.useEffect)(function () {
+        if (page > Math.ceil(source.length / perPage)) {
+            setPage(1);
+        }
+    }, [page, perPage, source.length]);
+    return (0, react_1.useMemo)(function () { return ({ paged: paged, page: page, setPage: setPage, perPage: perPage, setPerPage: setPerPage }); }, [page, paged, perPage]);
+}
+exports.usePaged = usePaged;

package/cjs/framework/useView.js

@@ -0,0 +1,155 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useView = void 0;
+var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
+function useView(view, disableQueryString) {
+    var _a = __read((0, react_router_dom_1.useSearchParams)(), 2), searchParams = _a[0], setSearchParams = _a[1];
+    var _b = __read((0, react_1.useState)(function () {
+        var _a;
+        if (!disableQueryString) {
+            var queryPage = searchParams.get('page');
+            if (queryPage) {
+                var page_1 = Number(queryPage);
+                if (Number.isInteger(page_1)) {
+                    return page_1;
+                }
+            }
+        }
+        return (_a = view === null || view === void 0 ? void 0 : view.page) !== null && _a !== void 0 ? _a : 1;
+    }), 2), page = _b[0], setPage = _b[1];
+    var _c = __read((0, react_1.useState)(function () {
+        var _a;
+        if (!disableQueryString) {
+            var queryPerPage = searchParams.get('perPage');
+            if (queryPerPage) {
+                var perPage_1 = Number(queryPerPage);
+                if (Number.isInteger(perPage_1)) {
+                    return perPage_1;
+                }
+            }
+        }
+        var localPerPage = localStorage.getItem('perPage');
+        if (localPerPage) {
+            var perPage_2 = Number(localPerPage);
+            if (Number.isInteger(perPage_2)) {
+                return perPage_2;
+            }
+        }
+        return (_a = view === null || view === void 0 ? void 0 : view.perPage) !== null && _a !== void 0 ? _a : 10;
+    }), 2), perPage = _c[0], setPerPage = _c[1];
+    var _d = __read((0, react_1.useState)(function () {
+        var _a;
+        if (!disableQueryString) {
+            var querySort = searchParams.get('sort');
+            if (querySort) {
+                if (querySort.startsWith('-'))
+                    return querySort.slice(1);
+                return querySort;
+            }
+        }
+        return (_a = view === null || view === void 0 ? void 0 : view.sort) !== null && _a !== void 0 ? _a : '';
+    }), 2), sort = _d[0], setSort = _d[1];
+    var _e = __read((0, react_1.useState)(function () {
+        var _a;
+        if (!disableQueryString) {
+            var querySort = searchParams.get('sort');
+            if (querySort) {
+                if (querySort.startsWith('-'))
+                    return 'desc';
+                return 'asc';
+            }
+        }
+        return (_a = view === null || view === void 0 ? void 0 : view.sortDirection) !== null && _a !== void 0 ? _a : 'asc';
+    }), 2), sortDirection = _e[0], setSortDirection = _e[1];
+    var _f = __read((0, react_1.useState)(function () {
+        var e_1, _a;
+        var _b;
+        var filters = {};
+        try {
+            for (var _c = __values(searchParams.keys()), _d = _c.next(); !_d.done; _d = _c.next()) {
+                var key = _d.value;
+                switch (key) {
+                    case 'sort':
+                    case 'page':
+                    case 'perPage':
+                        break;
+                    default: {
+                        var value = searchParams.get(key);
+                        if (value) {
+                            var values = value.split(',');
+                            filters[key] = values;
+                        }
+                    }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        if (Object.keys(filters))
+            return filters;
+        return (_b = view === null || view === void 0 ? void 0 : view.filters) !== null && _b !== void 0 ? _b : {};
+    }), 2), filters = _f[0], setFilters = _f[1];
+    var clearAllFilters = (0, react_1.useCallback)(function () { return setFilters({}); }, [setFilters]);
+    (0, react_1.useEffect)(function () {
+        if (disableQueryString)
+            return;
+        var newSearchParams = new URLSearchParams();
+        sortDirection === 'asc'
+            ? newSearchParams.set('sort', sort)
+            : newSearchParams.set('sort', "-".concat(sort));
+        newSearchParams.set('page', page.toString());
+        newSearchParams.set('perPage', perPage.toString());
+        for (var filter in filters) {
+            newSearchParams.set(filter, filters[filter].join(','));
+        }
+        localStorage.setItem('perPage', perPage.toString());
+        setSearchParams(newSearchParams, { replace: true });
+    }, [sort, sortDirection, setSearchParams, disableQueryString, page, perPage, filters]);
+    return (0, react_1.useMemo)(function () { return ({
+        page: page,
+        setPage: setPage,
+        perPage: perPage,
+        setPerPage: setPerPage,
+        sort: sort,
+        setSort: setSort,
+        sortDirection: sortDirection,
+        setSortDirection: setSortDirection,
+        filters: filters,
+        setFilters: setFilters,
+        clearAllFilters: clearAllFilters,
+    }); }, [clearAllFilters, filters, page, perPage, sort, sortDirection]);
+}
+exports.useView = useView;

package/cjs/framework/utils/compare.js

@@ -0,0 +1,59 @@
+"use strict";
+/* istanbul ignore file */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compareNumbers = exports.compareStrings = exports.compareUnknowns = void 0;
+function compareUnknowns(a, b) {
+    /* istanbul ignore next */
+    if (a == undefined && b == undefined)
+        return 0;
+    /* istanbul ignore next */
+    if (a == undefined)
+        return 1;
+    /* istanbul ignore next */
+    if (b == undefined)
+        return -1;
+    /* istanbul ignore else */
+    if (typeof a === 'string') {
+        /* istanbul ignore else */
+        if (typeof b === 'string') {
+            return compareStrings(a, b);
+        }
+        else if (typeof b === 'number') {
+            return compareStrings(a, b.toString());
+        }
+    }
+    else if (typeof a === 'number') {
+        /* istanbul ignore else */
+        if (typeof b === 'number') {
+            return compareNumbers(a, b);
+        }
+        else if (typeof b === 'string') {
+            return compareStrings(a.toString(), b);
+        }
+    }
+    /* istanbul ignore next */
+    return 0;
+}
+exports.compareUnknowns = compareUnknowns;
+/* istanbul ignore next */
+function compareStrings(a, b) {
+    if (a == undefined && b == undefined)
+        return 0;
+    if (a == undefined)
+        return 1;
+    if (b == undefined)
+        return -1;
+    return a < b ? -1 : a > b ? 1 : 0;
+}
+exports.compareStrings = compareStrings;
+/* istanbul ignore next */
+function compareNumbers(a, b) {
+    if (a == undefined && b == undefined)
+        return 0;
+    if (a == undefined)
+        return 1;
+    if (b == undefined)
+        return -1;
+    return a < b ? -1 : a > b ? 1 : 0;
+}
+exports.compareNumbers = compareNumbers;