@k-int/stripes-kint-components 5.10.0 → 5.12.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [5.12.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.11.0...v5.12.0) (2025-02-13)
+
+
+### Features
+
+* **deps:** Stripes v10 dependency updates ([be3892f](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/be3892f9a3f61bf7e52cf1c1287082aed412161b))
+* Paginated display as default for SASQRoute (refs UISER-185) ([9f379c9](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/9f379c91ef284dad9408cccb8d80cc314c969d8d))
+
+# [5.11.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.10.0...v5.11.0) (2025-02-07)
+
+
+### Features
+
+* Added Tags helper app and hooks to stripes-kint-components (Moving out of erm-components longer term) ([e881639](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/e881639b49036d6016dc65d83bcf67e596652acc))
+
 # [5.10.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.9.0...v5.10.0) (2025-02-04)
 
 

package/es/index.js

@@ -400,6 +400,18 @@ var _ResponsiveButtonGroup = _interopRequireDefault(require("./lib/ResponsiveBut
 var _SettingsFormContainer = _interopRequireDefault(require("./lib/SettingsFormContainer"));
 var _ComboButton = _interopRequireDefault(require("./lib/ComboButton"));
 var _NumberField = _interopRequireDefault(require("./lib/NumberField"));
+var _Tags = require("./lib/Tags");
+Object.keys(_Tags).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Tags[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tags[key];
+    }
+  });
+});
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/EditableRefdataList/EditableRefdataList.js

@@ -116,7 +116,7 @@ const EditableRefdataList = _ref => {
       // or one provided in labelOverrides, which is passed the error message and refdata in question
       delete: async err => {
         const errorResp = await (0, _utils.parseErrorResponse)(err.response);
-        console.log("ERRORRESP: %o", errorResp);
+        // console.log('ERRORRESP: %o', errorResp);
         callout.sendCallout({
           message: kintIntl.formatKintMessage({
             id: 'refdata.deleteRefdataValue.errorMessage',

package/es/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -28,6 +28,7 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     intlNS: passedIntlNS,
     labelOverrides = {},
     mainPaneProps,
+    mclProps = {},
     noSearchField,
     persistedPanesetProps = {},
     RenderBody,
@@ -38,6 +39,15 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     searchFieldProps
   } = props;
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
+  const [count, setCount] = (0, _react.useState)(0);
+  const {
+    currentPage,
+    paginationMCLProps,
+    paginationSASQProps
+  } = (0, _hooks.usePrevNextPagination)({
+    count,
+    pageSize: fetchParameters.SASQ_MAP?.perPage
+  });
   const {
     query,
     queryGetter,
@@ -48,14 +58,10 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   } = (0, _core.useNamespace)();
   const ky = (0, _core.useOkapiKy)();
   const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
-  const fetchPageData = _ref => {
-    let {
-      pageParam = 0
-    } = _ref;
-    const queryMap = fetchParameters.SASQ_MAP;
-    queryMap.offset = pageParam;
-    return ky(`${fetchParameters.endpoint}${(0, _utils.generateKiwtQuery)(queryMap, query)}`).json();
-  };
+  const queryParams = (0, _react.useMemo)(() => (0, _utils.generateKiwtQuery)({
+    ...fetchParameters.SASQ_MAP,
+    page: currentPage
+  }, query ?? {}), [currentPage, fetchParameters.SASQ_MAP, query]);
   const [filterPaneVisible, setFilterPaneVisible] = (0, _hooks.useLocalStorageState)(filterPaneVisibileKey, true);
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
   const queryNamespace = [namespace, 'SASQ'];
@@ -64,30 +70,27 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   }
   queryNamespace.push('viewAll');
   queryNamespace.push(query);
+  queryNamespace.push(currentPage);
   const {
-    data: totalData = {},
-    ...restOfInfiniteQueryProps
-  } = (0, _reactQuery.useInfiniteQuery)(queryNamespace, fetchPageData);
+    data = {},
+    ...restOfQueryProps
+  } = (0, _reactQuery.useQuery)(queryNamespace, () => {
+    return ky.get(`${fetchParameters.endpoint}${queryParams}`).json();
+  }, {
+    enabled: !!currentPage
+  });
+  (0, _react.useEffect)(() => {
+    if (count !== data?.totalRecords) {
+      setCount(data?.totalRecords);
+    }
+  }, [count, data.totalRecords]);
   (0, _react.useImperativeHandle)(ref, () => ({
     lookupQueryProps: {
-      data: totalData,
-      ...restOfInfiniteQueryProps
-    }
+      data,
+      ...restOfQueryProps
+    },
+    queryParams
   }));
-  const data = totalData.pages?.reduce((acc, curr) => {
-    const newAcc = {
-      ...acc
-    };
-    for (const [key, value] of Object.entries(curr)) {
-      if (key !== 'page' && key !== 'result' && acc[key] !== value) {
-        newAcc[key] = value;
-      }
-    }
-    const newResults = [...(acc.results ?? [])];
-    newResults.push(...(curr.results ?? []));
-    newAcc.results = newResults;
-    return newAcc;
-  }, {}) ?? {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.SearchAndSortQuery, {
     initialSearchState: {
       query: ''
@@ -95,6 +98,7 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     queryGetter: queryGetter,
     querySetter: querySetter,
     ...sasqProps,
+    ...paginationSASQProps,
     children: sasqRenderProps => {
       const {
         activeFilters,
@@ -222,10 +226,14 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
             query: query,
             rowNavigation: rowNavigation,
             toggleFilterPane: toggleFilterPane,
-            ...restOfInfiniteQueryProps,
+            ...restOfQueryProps,
             ...sasqRenderProps,
             ...sasqProps,
-            ...props
+            ...props,
+            mclProps: {
+              ...paginationMCLProps,
+              ...mclProps
+            }
           })
         }), children]
       });

package/es/lib/Tags/Tags.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactQuery = require("react-query");
+var _core = require("@folio/stripes/core");
+var _lodash = require("lodash");
+var _components = require("@folio/stripes/components");
+var _smartComponents = require("@folio/stripes/smart-components");
+var _tagsConfig = require("./tagsConfig");
+var _hooks = require("./hooks");
+var _hooks2 = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Tags = _ref => {
+  let {
+    invalidateLinks = [],
+    // If there are other queries that need invalidating, pass those here
+    labelOverrides = {},
+    link,
+    onToggle,
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS
+  } = _ref;
+  const kintIntl = (0, _hooks2.useKintIntl)(passedIntlKey, passedIntlNS);
+  const ky = (0, _core.useOkapiKy)();
+  const callout = (0, _react.useContext)(_core.CalloutContext);
+  const queryClient = (0, _reactQuery.useQueryClient)();
+
+  // TAG GET/POST
+  const {
+    data: {
+      tags = []
+    } = {}
+  } = (0, _hooks.useTags)([..._tagsConfig.tagNamespaceArray, link]);
+
+  // istanbul ignore next
+  const {
+    mutateAsync: postTags
+  } = (0, _reactQuery.useMutation)(['tags', 'stripes-erm-components', 'Tags', 'postTags'], data => ky.post('tags', {
+    json: data
+  }).then(() => {
+    queryClient.invalidateQueries('tags');
+  }));
+
+  // ENTITY GET/PUT
+  const {
+    data: entity
+  } = (0, _reactQuery.useQuery)([link, 'stripes-erm-components', 'Tags'], () => ky.get(link).json());
+
+  // istanbul ignore next
+  const {
+    mutateAsync: putEntity
+  } = (0, _reactQuery.useMutation)([link, 'stripes-erm-components', 'Tags', 'putEntity'], data => ky.put(link, {
+    json: data
+  }).then(() => {
+    queryClient.invalidateQueries(link);
+    if (invalidateLinks?.length) {
+      invalidateLinks.forEach(il => queryClient.invalidateQueries(il));
+    }
+  }));
+
+  // add tags to global list of tags
+  // istanbul ignore next
+  const saveTags = tagsToSave => {
+    const newTag = (0, _lodash.difference)(tagsToSave.map(t => t.value || t), tags.map(t => t.label.toLowerCase()));
+    if (!newTag || !newTag.length) return;
+    postTags({
+      label: newTag[0],
+      description: newTag[0]
+    });
+    callout.sendCallout({
+      message: kintIntl.formatKintMessage({
+        id: 'newTagCreated',
+        overrideValue: labelOverrides.newTagCreated
+      })
+    });
+  };
+
+  // add tag to the list of entity tags
+  // istanbul ignore next
+  const saveEntityTags = tagsToSave => {
+    const tagListMap = (entity?.tags ?? []).map(tag => ({
+      'value': tag.value
+    }));
+    const tagsMap = tagsToSave.map(tag => ({
+      'value': tag.value || tag
+    }));
+    const newTags = (0, _lodash.sortBy)((0, _lodash.uniqBy)([...tagListMap, ...tagsMap], 'value'));
+    putEntity({
+      tags: newTags
+    });
+  };
+  const onAdd = addTags => {
+    saveEntityTags(addTags);
+    saveTags(addTags);
+  };
+  const onRemove = tag => {
+    const tagToDelete = (entity?.tags ?? []).filter(t => t.value.toLowerCase() === tag.toLowerCase());
+    putEntity({
+      tags: [{
+        id: tagToDelete[0].id,
+        _delete: true
+      }]
+    });
+  };
+  const entityTags = (entity?.tags ?? []).map(tag => tag.value.toLowerCase());
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, {
+    defaultWidth: "20%",
+    dismissible: true,
+    id: "tags-helper-pane",
+    onClose: onToggle,
+    paneSub: kintIntl.formatKintMessage({
+      id: 'numberOfTags',
+      overrideValue: labelOverrides.numberOfTags
+    }, {
+      count: entity?.tags?.length ?? 0
+    }),
+    paneTitle: kintIntl.formatKintMessage({
+      id: 'tags',
+      overrideValue: labelOverrides.tags
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.TagsForm, {
+      entityTags: entityTags,
+      onAdd: onAdd,
+      onRemove: onRemove,
+      tags: tags
+    })
+  });
+};
+Tags.propTypes = {
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
+  invalidateLinks: _propTypes.default.arrayOf(_propTypes.default.string),
+  labelOverrides: _propTypes.default.object,
+  link: _propTypes.default.string,
+  onToggle: _propTypes.default.func
+};
+var _default = exports.default = Tags;

package/es/lib/Tags/Tags.test.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _stripesErmTesting = require("@folio/stripes-erm-testing");
+var _Tags = _interopRequireDefault(require("./Tags"));
+var _jest = require("../../../test/jest");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const onToggle = jest.fn();
+const onAdd = jest.fn();
+const link = 'erm/sas/14c16fc4-f986-4e60-aa59-4e627fcf160b';
+describe('Tags', () => {
+  let renderComponent;
+  beforeEach(() => {
+    renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tags.default, {
+        invalidateLinks: [],
+        link: link,
+        onAdd: onAdd,
+        onToggle: onToggle
+      })
+    }));
+  });
+  test('renders the expected label', () => {
+    const {
+      getByText
+    } = renderComponent;
+    expect(getByText('0 Tags')).toBeInTheDocument();
+  });
+  test('renders expected pane dismiss button ', async () => {
+    await (0, _stripesErmTesting.IconButton)('Close Tags').exists();
+  });
+  test('renders expected open menu button ', () => {
+    const {
+      getByRole
+    } = renderComponent;
+    expect(getByRole('button', {
+      name: 'stripes-components.multiSelection.dropdownTriggerLabel'
+    })).toBeInTheDocument();
+  });
+  test('renders tags heading  ', () => {
+    const {
+      getByRole
+    } = renderComponent;
+    expect(getByRole('heading', {
+      name: 'Tags'
+    })).toBeInTheDocument();
+  });
+  test('renders expected region with zero tags', () => {
+    const {
+      getByRole
+    } = renderComponent;
+    expect(getByRole('region', {
+      name: 'Tags 0 Tags'
+    })).toBeInTheDocument();
+  });
+  test('renders the expected multiSelectDescription', () => {
+    const {
+      getByText
+    } = renderComponent;
+    expect(getByText('Contains a list of any selected values, followed by an autocomplete textfield for selecting additional values.')).toBeInTheDocument();
+  });
+  test('renders the expected label', () => {
+    const {
+      getByText
+    } = renderComponent;
+    expect(getByText('0 items selected')).toBeInTheDocument();
+  });
+  test('displays the tags pane', async () => {
+    await (0, _stripesErmTesting.Pane)('Tags').is({
+      visible: true
+    });
+  });
+  test('displays the tags pane header', async () => {
+    await (0, _stripesErmTesting.PaneHeader)('Tags').is({
+      visible: true
+    });
+  });
+});

package/es/lib/Tags/hooks/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "tagsEnabledQueryKey", {
+  enumerable: true,
+  get: function () {
+    return _useTagsEnabled.tagsEnabledQueryKey;
+  }
+});
+Object.defineProperty(exports, "useTags", {
+  enumerable: true,
+  get: function () {
+    return _useTags.default;
+  }
+});
+Object.defineProperty(exports, "useTagsEnabled", {
+  enumerable: true,
+  get: function () {
+    return _useTagsEnabled.default;
+  }
+});
+var _useTagsEnabled = _interopRequireWildcard(require("./useTagsEnabled"));
+var _useTags = _interopRequireDefault(require("./useTags"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/es/lib/Tags/hooks/useTags.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactQuery = require("react-query");
+var _core = require("@folio/stripes/core");
+var _tagsConfig = require("../tagsConfig");
+const useTags = (namespaceArray, options) => {
+  const ky = (0, _core.useOkapiKy)();
+  const nsArray = namespaceArray ?? _tagsConfig.tagNamespaceArray;
+  return (0, _reactQuery.useQuery)(nsArray, () => ky.get(_tagsConfig.defaultTagQuery).json(), options);
+};
+var _default = exports.default = useTags;

package/es/lib/Tags/hooks/useTagsEnabled.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tagsEnabledQueryKey = exports.default = void 0;
+var _core = require("@folio/stripes/core");
+var _reactQuery = require("react-query");
+var _endpoints = require("../../constants/endpoints");
+const tagsEnabledQueryKey = exports.tagsEnabledQueryKey = [_endpoints.MOD_SETTINGS_ENDPOINT, 'query=(module==TAGS and configName==tags_enabled)', 'stripes-kint-components', 'useTagsEnabled'];
+const useTagsEnabled = () => {
+  const ky = (0, _core.useOkapiKy)();
+  const queryObject = (0, _reactQuery.useQuery)(tagsEnabledQueryKey, () => ky.get(`${_endpoints.MOD_SETTINGS_ENDPOINT}?query=(module==TAGS and configName==tags_enabled)`).json());
+  const {
+    data: {
+      configs: {
+        0: {
+          value
+        } = {}
+      } = []
+    } = {}
+  } = queryObject;
+  return !value || value === 'true';
+};
+var _default = exports.default = useTagsEnabled;

package/es/lib/Tags/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Tags: true
+};
+Object.defineProperty(exports, "Tags", {
+  enumerable: true,
+  get: function () {
+    return _Tags.default;
+  }
+});
+var _Tags = _interopRequireDefault(require("./Tags"));
+var _tagsConfig = require("./tagsConfig");
+Object.keys(_tagsConfig).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _tagsConfig[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tagsConfig[key];
+    }
+  });
+});
+var _hooks = require("./hooks");
+Object.keys(_hooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _hooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _hooks[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/Tags/tagsConfig.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tagsPath = exports.tagNamespaceArray = exports.defaultTagsParams = exports.defaultTagQuery = void 0;
+const tagNamespaceArray = exports.tagNamespaceArray = ['tags', 'stripes-kint-components', 'Tags'];
+const tagsPath = exports.tagsPath = 'tags';
+const defaultTagsParams = exports.defaultTagsParams = ['limit=1000', 'query=cql.allRecords%3D1%20sortby%20label'];
+const defaultTagQuery = exports.defaultTagQuery = `${tagsPath}?${defaultTagsParams?.join('&')}`;

package/es/lib/constants/pagination.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PREV = exports.NEXT = exports.MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX = exports.DEFAULT_PAGINATION_SIZE = exports.DEFAULT_PAGE_KEY = void 0;
+const NEXT = exports.NEXT = 'next';
+const PREV = exports.PREV = 'prev';
+
+// THIS SHOULD BE SET BY CALLING CODE, ONLY DEFAULTED TO AVOID DIVISION BY UNDEFINED
+const DEFAULT_PAGINATION_SIZE = exports.DEFAULT_PAGINATION_SIZE = 25;
+// Only here because we need argument 3 from onNeedMoreData
+// and want to avoid "magic number" sonarlint
+const MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX = exports.MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX = 3;
+const DEFAULT_PAGE_KEY = exports.DEFAULT_PAGE_KEY = 'defaultPageKey';

package/es/lib/hooks/index.js

@@ -105,6 +105,12 @@ Object.defineProperty(exports, "useMutateRefdataValue", {
     return _useMutateRefdataValue.default;
   }
 });
+Object.defineProperty(exports, "usePrevNextPagination", {
+  enumerable: true,
+  get: function () {
+    return _usePrevNextPagination.default;
+  }
+});
 Object.defineProperty(exports, "useQIndex", {
   enumerable: true,
   get: function () {
@@ -150,4 +156,5 @@ var _useMutateRefdataValue = _interopRequireDefault(require("./useMutateRefdataV
 var _useMutateRefdataCategory = _interopRequireDefault(require("./useMutateRefdataCategory"));
 var _useMutateCustomProperties = _interopRequireDefault(require("./useMutateCustomProperties"));
 var _useMutateModConfigEntry = _interopRequireDefault(require("./useMutateModConfigEntry"));
+var _usePrevNextPagination = _interopRequireDefault(require("./usePrevNextPagination"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/hooks/useHelperApp.js

@@ -4,18 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _reactRouterDom = require("react-router-dom");
 var _queryString = _interopRequireDefault(require("query-string"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-let helperObject = {};
 const useHelperApp = helpers => {
   const history = (0, _reactRouterDom.useHistory)();
   const location = (0, _reactRouterDom.useLocation)();
+  const [helperObject, setHelperObject] = (0, _react.useState)({});
+  const [helperToggleFunctions, setHelperToggleFunctions] = (0, _react.useState)({});
   const query = _queryString.default.parse(location.search);
   const [currentHelper, setCurrentHelper] = (0, _react.useState)(query?.helper);
   const handleToggleHelper = (0, _react.useCallback)(helper => {
@@ -25,9 +24,16 @@ const useHelperApp = helpers => {
     return currentHelper === hlp;
   };
   (0, _react.useEffect)(() => {
-    // Keep object outside of hook to avoid redraw, oncly change when keys change
     if (!(0, _isEqual.default)(Object.keys(helperObject), Object.keys(helpers))) {
-      helperObject = helpers;
+      setHelperObject(helpers);
+    }
+    const newHelperToggleFunctions = {};
+    Object.keys(helperObject).forEach(h => {
+      newHelperToggleFunctions[h] = () => handleToggleHelper(h);
+    });
+    if (!(0, _isEqual.default)(Object.keys(helperToggleFunctions), Object.keys(newHelperToggleFunctions))) {
+      // This makes sure adding/removing helpers changes the functions
+      setHelperToggleFunctions(newHelperToggleFunctions);
     }
     if (currentHelper !== query?.helper) {
       const newQuery = {
@@ -38,11 +44,14 @@ const useHelperApp = helpers => {
         pathname: location.pathname,
         search: `?${_queryString.default.stringify(newQuery)}`
       });
+
+      // When helper changes, reset helperToggleFunctions
+      setHelperToggleFunctions(newHelperToggleFunctions);
     }
-  }, [currentHelper, helpers, history, location, query]);
+  }, [currentHelper, handleToggleHelper, helperObject, helperToggleFunctions, helpers, history, location, query]);
 
   // Set the HelperComponent
-  const HelperComponent = (0, _react.useMemo)(() => props => {
+  const HelperComponent = (0, _react.useCallback)(props => {
     if (!query?.helper) return null;
     let Component = null;
     Component = helperObject[query?.helper];
@@ -51,13 +60,7 @@ const useHelperApp = helpers => {
       onToggle: () => handleToggleHelper(query?.helper),
       ...props
     });
-  }, [handleToggleHelper, query.helper]);
-
-  // Set up the helperToggleFunctions
-  const helperToggleFunctions = {};
-  Object.keys(helperObject).forEach(h => {
-    helperToggleFunctions[h] = () => handleToggleHelper(h);
-  });
+  }, [handleToggleHelper, helperObject, query?.helper]);
   return {
     currentHelper,
     HelperComponent,

package/es/lib/hooks/useLocalPageStore.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _zustand = require("zustand");
+var _pagination = require("../constants/pagination");
+// Any time that usePrevNextPagination is NOT synced to location,
+// store a keyed currentPage here instead
+const useLocalPageStore = (0, _zustand.create)(set => ({
+  pageStore: {},
+  setPage: (id, page) => set(state => {
+    // Any non-id keyed pages will go into a single storage slot
+    const key = id ?? _pagination.DEFAULT_PAGE_KEY;
+    return {
+      ...state,
+      pageStore: {
+        ...state.pageStore,
+        [key]: page
+      }
+    };
+  })
+}));
+var _default = exports.default = useLocalPageStore;