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

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [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)
 
 

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/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/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;

package/es/lib/hooks/usePrevNextPagination.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactRouterDom = require("react-router-dom");
+var _queryString = _interopRequireDefault(require("query-string"));
+var _pagination = require("../constants/pagination");
+var _useLocalPageStore = _interopRequireDefault(require("./useLocalPageStore"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Currently there are several places in which this hook is used twice within the same component
+// Once in order to get the current page, and again in order to handle changes to paginations
+// This hook should be refactored in order to resolve these issue - @EthanFreestone
+const usePrevNextPagination = function () {
+  let {
+    count = 0,
+    // Only needed for reading back MCL props
+    defaultToPageOne = true,
+    // A prop to allow the implementor to turn off the defaulting to page=1
+    pageSize = _pagination.DEFAULT_PAGINATION_SIZE,
+    // Only needed for reading back MCL props
+    id = _pagination.DEFAULT_PAGE_KEY,
+    // This id is ONLY used for syncToLocation: false cases, as a key to the zustand store
+    syncToLocation = true,
+    // Used to turn on/off location syncing, so can be used as standalone state if required,
+    hasNextPage = null // Override for canGoNext, used in the case in which resources are fetched with no stats
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  /* ------ ZUSTAND STORE ------ */
+  // For NON-SYNC-TO-LOCATION use cases, store the currentPage in a keyed store
+  const pageStore = (0, _useLocalPageStore.default)(state => state.pageStore);
+  const setPage = (0, _useLocalPageStore.default)(state => state.setPage);
+
+  /* ------ CURRENTPAGE STATE ------ */
+  // Set up initialValue
+  const getInitialCurrentPage = (0, _react.useCallback)(() => {
+    let initialCurrentPage;
+    if (!syncToLocation) {
+      if (pageStore[id]) {
+        initialCurrentPage = pageStore[id];
+      } else {
+        // Initialise store state
+        setPage(id, 1);
+        initialCurrentPage = 1;
+      }
+    }
+    return initialCurrentPage;
+  }, [id, pageStore, setPage, syncToLocation]);
+  // State itself
+  const [currentPage, setCurrentPage] = (0, _react.useState)(getInitialCurrentPage());
+  const location = (0, _reactRouterDom.useLocation)();
+  const history = (0, _reactRouterDom.useHistory)();
+
+  /* ------ HANDLEPAGECHANGE ------ */
+  // Takes in a direction "prev" or "next" and performs the requisite logic to move
+  // currentPage state and/or zustand store state
+  const handlePageChange = (0, _react.useCallback)(direction => {
+    const urlQuery = _queryString.default.parse(location.search);
+    let newPage;
+    if (direction === _pagination.NEXT) {
+      newPage = currentPage + 1;
+    } else if (direction === _pagination.PREV) {
+      newPage = currentPage - 1;
+    }
+    if (!syncToLocation) {
+      // We're manipulating the state directly in this case
+      // We're dealing with the zustand store in this case,
+      // change the store and the currentPage will update below
+      setPage(id, newPage);
+      setCurrentPage(newPage);
+    } else if (newPage !== urlQuery?.page) {
+      const newQuery = {
+        ...urlQuery,
+        page: newPage
+      };
+      history.push({
+        pathname: location.pathname,
+        search: `?${_queryString.default.stringify(newQuery)}`
+      });
+    }
+  }, [currentPage, history, id, location.pathname, location.search, setPage, syncToLocation]);
+  const [resetPageState, setResetPageState] = (0, _react.useState)(false);
+  const resetPage = (0, _react.useCallback)(() => {
+    if (syncToLocation) {
+      setResetPageState(true);
+    } else {
+      setPage(id, 1);
+      setCurrentPage(1);
+    }
+  }, [id, setPage, syncToLocation]);
+  (0, _react.useEffect)(() => {
+    if (syncToLocation) {
+      const urlQuery = _queryString.default.parse(location.search);
+      if (urlQuery?.page && currentPage !== urlQuery?.page) {
+        setCurrentPage(Number(urlQuery?.page));
+      } else if (!urlQuery?.page && defaultToPageOne) {
+        // If url query "page" is not yet set, set it to 1
+        setCurrentPage(1);
+        const newQuery = {
+          ...urlQuery,
+          page: 1
+        };
+        history.push({
+          pathname: location.pathname,
+          search: `?${_queryString.default.stringify(newQuery)}`
+        });
+      }
+      if (resetPageState) {
+        const newQuery = {
+          ...urlQuery,
+          page: 1
+        };
+        history.push({
+          pathname: location.pathname,
+          search: `?${_queryString.default.stringify(newQuery)}`
+        });
+        setResetPageState(false);
+      }
+    } else if (currentPage !== pageStore[id]) {
+      // Only do this when not syncing to location...
+      // If current page state is not what we have in the store, set current page state
+      setCurrentPage(pageStore[id]);
+    }
+  }, [currentPage, defaultToPageOne, history, id, location, pageStore, resetPageState, syncToLocation]);
+
+  // Set up MCL specific props based on page
+  const pagingCanGoNext = hasNextPage ?? (currentPage && currentPage < Number(count) / pageSize);
+  const pagingCanGoPrevious = currentPage && Number(currentPage) > 1;
+  const pagingOffset = currentPage ? (currentPage - 1) * pageSize : 0;
+  const onNeedMoreData = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (args[_pagination.MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX]) {
+      handlePageChange(args[_pagination.MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX]);
+    }
+  };
+
+  // Set up SASQ callback handling
+  // If extras are needed, these can be set up
+  // manually using resetPage per SASQ
+  const queryStateReducer = (0, _react.useCallback)((_currState, nextState) => {
+    const resetPageEvents = ['clear.all', 'reset.all', 'filter.state', 'filter.clearGroup', 'sort.change', 'search.reset', 'search.submit'];
+    if (resetPageEvents.includes(nextState.changeType)) {
+      resetPage();
+    }
+    return nextState;
+  }, [resetPage]);
+  const paginationSASQProps = (0, _react.useMemo)(() => ({
+    queryStateReducer
+  }), [queryStateReducer]);
+  return {
+    currentPage,
+    handlePageChange,
+    paginationMCLProps: {
+      onNeedMoreData,
+      pagingCanGoNext,
+      pagingCanGoPrevious,
+      pagingOffset,
+      pagingType: 'prev-next'
+    },
+    paginationSASQProps,
+    queryStateReducer,
+    resetPage
+  };
+};
+var _default = exports.default = usePrevNextPagination;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"
@@ -40,12 +40,12 @@
     "@babel/preset-flow": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@folio/eslint-config-stripes": "^7.0.0",
-    "@folio/jest-config-stripes": "^2.0.0",
-    "@folio/stripes": "^9.0.0",
-    "@folio/stripes-cli": "^3.0.0",
+    "@folio/eslint-config-stripes": "^7.0.0 || ^8.0.0",
+    "@folio/jest-config-stripes": "^2.0.0 || ^3.0.0",
+    "@folio/stripes": "^9.0.0 || ^10.0.0",
+    "@folio/stripes-cli": "^3.0.0 || ^4.0.0",
     "@folio/stripes-erm-testing": "^2.0.0",
-    "@formatjs/cli": "^6.1.3",
+    "@formatjs/cli": "^6.6.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/gitlab": "^12.0.6",
@@ -64,7 +64,7 @@
     "prop-types-extra": ">=1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-intl": "^6.4.4",
+    "react-intl": "^6.4.4 || ^7.1.5",
     "react-query": "^3.6.0",
     "react-redux": "^9.0.0",
     "react-router": "^5.2.0",
@@ -77,7 +77,7 @@
     "sinon": "^18.0.0"
   },
   "peerDependencies": {
-    "@folio/stripes": ">=9.0.0",
+    "@folio/stripes": "^9.0.0 || ^10.0.0",
     "final-form": ">=4.18.4",
     "final-form-arrays": ">=3.0.1",
     "lodash": ">=4.17.0",
@@ -86,7 +86,7 @@
     "react": "*",
     "react-final-form": ">=6.3.0",
     "react-final-form-arrays": ">=3.1.0",
-    "react-intl": ">=6.4.4",
+    "react-intl": "^6.4.4 || ^7.1.5",
     "react-query": ">=3.9.0",
     "react-router-dom": ">=5.2.0"
   },

package/src/lib/EditableRefdataList/EditableRefdataList.js

@@ -106,16 +106,16 @@ const EditableRefdataList = ({
       // or one provided in labelOverrides, which is passed the error message and refdata in question
       delete: async (err) => {
         const errorResp = await parseErrorResponse(err.response);
-        console.log("ERRORRESP: %o", errorResp);
+        // console.log('ERRORRESP: %o', errorResp);
         callout.sendCallout({
           message: kintIntl.formatKintMessage({
             id: 'refdata.deleteRefdataValue.errorMessage',
             overrideValue: labelOverrides?.deleteError
           },
-          {
-            label: deleteModal?.refdata?.label,
-            error: errorResp?.message
-          }),
+            {
+              label: deleteModal?.refdata?.label,
+              error: errorResp?.message
+            }),
           type: 'error',
         });
       },

package/src/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -1,8 +1,8 @@
-import { forwardRef, useImperativeHandle } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { useInfiniteQuery } from 'react-query';
+import { useQuery } from 'react-query';
 
 import {
   useNamespace,
@@ -25,7 +25,7 @@ import {
 } from '@folio/stripes/components';
 
 import { generateKiwtQuery } from '../utils';
-import { useKintIntl, useKiwtSASQuery, useLocalStorageState } from '../hooks';
+import { useKintIntl, useKiwtSASQuery, useLocalStorageState, usePrevNextPagination } from '../hooks';
 
 import TableBody from './TableBody';
 
@@ -41,6 +41,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     intlNS: passedIntlNS,
     labelOverrides = {},
     mainPaneProps,
+    mclProps = {},
     noSearchField,
     persistedPanesetProps = {},
     RenderBody,
@@ -50,6 +51,12 @@ const SASQLookupComponent = forwardRef((props, ref) => {
     searchFieldProps
   } = props;
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+  const [count, setCount] = useState(0);
+
+  const { currentPage, paginationMCLProps, paginationSASQProps } = usePrevNextPagination({
+    count,
+    pageSize: fetchParameters.SASQ_MAP?.perPage
+  });
 
   const { query, queryGetter, querySetter } = useKiwtSASQuery();
   const { 0: namespace } = useNamespace();
@@ -57,11 +64,14 @@ const SASQLookupComponent = forwardRef((props, ref) => {
 
   const filterPaneVisibileKey = `${namespace}-${id}-filterPaneVisibility`;
 
-  const fetchPageData = ({ pageParam = 0 }) => {
-    const queryMap = fetchParameters.SASQ_MAP;
-    queryMap.offset = pageParam;
-    return ky(`${fetchParameters.endpoint}${generateKiwtQuery(queryMap, query)}`).json();
-  };
+  const queryParams = useMemo(() => (
+    generateKiwtQuery(
+      {
+        ...fetchParameters.SASQ_MAP,
+        page: currentPage,
+      }, (query ?? {})
+    )
+  ), [currentPage, fetchParameters.SASQ_MAP, query]);
 
   const [filterPaneVisible, setFilterPaneVisible] = useLocalStorageState(filterPaneVisibileKey, true);
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
@@ -72,65 +82,57 @@ const SASQLookupComponent = forwardRef((props, ref) => {
   }
   queryNamespace.push('viewAll');
   queryNamespace.push(query);
+  queryNamespace.push(currentPage);
 
   const {
-    data: totalData = {},
-    ...restOfInfiniteQueryProps
-  } = useInfiniteQuery(
+    data = {},
+    ...restOfQueryProps
+  } = useQuery(
     queryNamespace,
-    fetchPageData
+    () => {
+      return ky.get(`${fetchParameters.endpoint}${queryParams}`).json();
+    },
+    {
+      enabled: !!currentPage,
+    }
   );
 
+  useEffect(() => {
+    if (count !== data?.totalRecords) {
+      setCount(data?.totalRecords);
+    }
+  }, [count, data.totalRecords]);
+
   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 (
     <SearchAndSortQuery
       initialSearchState={{ query: '' }}
       queryGetter={queryGetter}
       querySetter={querySetter}
       {...sasqProps}
+      {...paginationSASQProps}
     >
       {
         (sasqRenderProps) => {
           const {
-          activeFilters,
-          filterChanged,
-          getFilterHandlers,
-          getSearchHandlers,
-          onSubmitSearch,
-          resetAll,
-          searchChanged,
-          searchValue
-        } = sasqRenderProps;
+            activeFilters,
+            filterChanged,
+            getFilterHandlers,
+            getSearchHandlers,
+            onSubmitSearch,
+            resetAll,
+            searchChanged,
+            searchValue
+          } = sasqRenderProps;
 
           const searchHandlers = getSearchHandlers();
           const disableReset = !filterChanged && !searchChanged;
@@ -143,7 +145,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
             filterPaneFirstMenu,
             filterPaneLastMenu,
             ...restOfFilterPaneProps
-            } = filterPaneProps;
+          } = filterPaneProps;
           const {
             mainPaneFirstMenu,
             mainPaneLastMenu,
@@ -269,7 +271,7 @@ const SASQLookupComponent = forwardRef((props, ref) => {
                   query={query}
                   rowNavigation={rowNavigation}
                   toggleFilterPane={toggleFilterPane}
-                  {...restOfInfiniteQueryProps}
+                  {...restOfQueryProps}
                   {...sasqRenderProps}
                   /*
                    * This is insane, it looks like SASQProps `initialSortState`
@@ -277,7 +279,16 @@ const SASQLookupComponent = forwardRef((props, ref) => {
                    * sort handler. Passing through SASQProps.
                    */
                   {...sasqProps}
-                  {...props}
+                  // pass down all props handed to us except mclProps (pass those down below with our extra prev/next goodies)
+                  {
+                    ...{
+                      ...props,
+                      mclProps: {
+                        ...paginationMCLProps,
+                        ...mclProps,
+                      }
+                    }
+                  }
                 />
               </Pane>
               {children}

package/src/lib/constants/pagination.js

@@ -0,0 +1,10 @@
+export const NEXT = 'next';
+export const PREV = 'prev';
+
+// THIS SHOULD BE SET BY CALLING CODE, ONLY DEFAULTED TO AVOID DIVISION BY UNDEFINED
+export const DEFAULT_PAGINATION_SIZE = 25;
+// Only here because we need argument 3 from onNeedMoreData
+// and want to avoid "magic number" sonarlint
+export const MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX = 3;
+
+export const DEFAULT_PAGE_KEY = 'defaultPageKey';

package/src/lib/hooks/index.js

@@ -20,3 +20,5 @@ export { default as useMutateRefdataValue } from './useMutateRefdataValue';
 export { default as useMutateRefdataCategory } from './useMutateRefdataCategory';
 export { default as useMutateCustomProperties } from './useMutateCustomProperties';
 export { default as useMutateModConfigEntry } from './useMutateModConfigEntry';
+
+export { default as usePrevNextPagination } from './usePrevNextPagination';

package/src/lib/hooks/useLocalPageStore.js

@@ -0,0 +1,18 @@
+import { create } from 'zustand';
+import { DEFAULT_PAGE_KEY } from '../constants/pagination';
+
+// Any time that usePrevNextPagination is NOT synced to location,
+// store a keyed currentPage here instead
+const useLocalPageStore = create(
+  (set) => ({
+    pageStore: {},
+    setPage: (id, page) => set((state) => {
+      // Any non-id keyed pages will go into a single storage slot
+      const key = id ?? DEFAULT_PAGE_KEY;
+
+      return { ...state, pageStore: { ...state.pageStore, [key]: page } };
+    }),
+  }),
+);
+
+export default useLocalPageStore;

package/src/lib/hooks/usePrevNextPagination.js

@@ -0,0 +1,203 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+
+import queryString from 'query-string';
+import {
+  DEFAULT_PAGINATION_SIZE,
+  DEFAULT_PAGE_KEY,
+  MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX,
+  NEXT,
+  PREV
+} from '../constants/pagination';
+
+import useLocalPageStore from './useLocalPageStore';
+
+// Currently there are several places in which this hook is used twice within the same component
+// Once in order to get the current page, and again in order to handle changes to paginations
+// This hook should be refactored in order to resolve these issue - @EthanFreestone
+const usePrevNextPagination = ({
+  count = 0, // Only needed for reading back MCL props
+  defaultToPageOne = true, // A prop to allow the implementor to turn off the defaulting to page=1
+  pageSize = DEFAULT_PAGINATION_SIZE, // Only needed for reading back MCL props
+  id = DEFAULT_PAGE_KEY, // This id is ONLY used for syncToLocation: false cases, as a key to the zustand store
+  syncToLocation = true, // Used to turn on/off location syncing, so can be used as standalone state if required,
+  hasNextPage = null // Override for canGoNext, used in the case in which resources are fetched with no stats
+} = {}) => {
+  /* ------ ZUSTAND STORE ------ */
+  // For NON-SYNC-TO-LOCATION use cases, store the currentPage in a keyed store
+  const pageStore = useLocalPageStore(state => state.pageStore);
+  const setPage = useLocalPageStore(state => state.setPage);
+
+  /* ------ CURRENTPAGE STATE ------ */
+  // Set up initialValue
+  const getInitialCurrentPage = useCallback(() => {
+    let initialCurrentPage;
+    if (!syncToLocation) {
+      if (pageStore[id]) {
+        initialCurrentPage = pageStore[id];
+      } else {
+        // Initialise store state
+        setPage(id, 1);
+        initialCurrentPage = 1;
+      }
+    }
+
+    return initialCurrentPage;
+  }, [id, pageStore, setPage, syncToLocation]);
+  // State itself
+  const [currentPage, setCurrentPage] = useState(getInitialCurrentPage());
+
+  const location = useLocation();
+  const history = useHistory();
+
+  /* ------ HANDLEPAGECHANGE ------ */
+  // Takes in a direction "prev" or "next" and performs the requisite logic to move
+  // currentPage state and/or zustand store state
+  const handlePageChange = useCallback((direction) => {
+    const urlQuery = queryString.parse(location.search);
+
+    let newPage;
+    if (direction === NEXT) {
+      newPage = currentPage + 1;
+    } else if (direction === PREV) {
+      newPage = currentPage - 1;
+    }
+
+    if (!syncToLocation) {
+      // We're manipulating the state directly in this case
+      // We're dealing with the zustand store in this case,
+      // change the store and the currentPage will update below
+      setPage(id, newPage);
+      setCurrentPage(newPage);
+    } else if (newPage !== urlQuery?.page) {
+      const newQuery = {
+        ...urlQuery,
+        page: newPage
+      };
+      history.push({
+        pathname: location.pathname,
+        search: `?${queryString.stringify(newQuery)}`
+      });
+    }
+  }, [
+    currentPage,
+    history,
+    id,
+    location.pathname,
+    location.search,
+    setPage,
+    syncToLocation
+  ]);
+
+
+
+  const [resetPageState, setResetPageState] = useState(false);
+  const resetPage = useCallback(() => {
+    if (syncToLocation) {
+      setResetPageState(true);
+    } else {
+      setPage(id, 1);
+      setCurrentPage(1);
+    }
+  }, [id, setPage, syncToLocation]);
+
+  useEffect(() => {
+    if (syncToLocation) {
+      const urlQuery = queryString.parse(location.search);
+
+      if (urlQuery?.page && currentPage !== urlQuery?.page) {
+        setCurrentPage(Number(urlQuery?.page));
+      } else if (!urlQuery?.page && defaultToPageOne) {
+        // If url query "page" is not yet set, set it to 1
+        setCurrentPage(1);
+        const newQuery = {
+          ...urlQuery,
+          page: 1
+        };
+
+        history.push({
+          pathname: location.pathname,
+          search: `?${queryString.stringify(newQuery)}`
+        });
+      }
+
+      if (resetPageState) {
+        const newQuery = {
+          ...urlQuery,
+          page: 1
+        };
+
+        history.push({
+          pathname: location.pathname,
+          search: `?${queryString.stringify(newQuery)}`
+        });
+        setResetPageState(false);
+      }
+    } else if (currentPage !== pageStore[id]) {
+      // Only do this when not syncing to location...
+      // If current page state is not what we have in the store, set current page state
+      setCurrentPage(pageStore[id]);
+    }
+  }, [
+    currentPage,
+    defaultToPageOne,
+    history,
+    id,
+    location,
+    pageStore,
+    resetPageState,
+    syncToLocation
+  ]);
+
+  // Set up MCL specific props based on page
+  const pagingCanGoNext = hasNextPage ?? (currentPage && (currentPage < Number(count) / pageSize));
+  const pagingCanGoPrevious = currentPage && Number(currentPage) > 1;
+  const pagingOffset = currentPage ? (currentPage - 1) * pageSize : 0;
+  const onNeedMoreData = (...args) => {
+    if (args[MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX]) {
+      handlePageChange(args[MCL_NEED_MORE_DATA_PREV_NEXT_ARG_INDEX]);
+    }
+  };
+
+  // Set up SASQ callback handling
+  // If extras are needed, these can be set up
+  // manually using resetPage per SASQ
+  const queryStateReducer = useCallback((_currState, nextState) => {
+    const resetPageEvents = [
+      'clear.all',
+      'reset.all',
+      'filter.state',
+      'filter.clearGroup',
+      'sort.change',
+      'search.reset',
+      'search.submit'
+    ];
+
+    if (resetPageEvents.includes(nextState.changeType)) {
+      resetPage();
+    }
+
+    return nextState;
+  }, [resetPage]);
+
+  const paginationSASQProps = useMemo(() => ({
+    queryStateReducer
+  }), [queryStateReducer]);
+
+  return ({
+    currentPage,
+    handlePageChange,
+    paginationMCLProps: {
+      onNeedMoreData,
+      pagingCanGoNext,
+      pagingCanGoPrevious,
+      pagingOffset,
+      pagingType: 'prev-next'
+    },
+    paginationSASQProps,
+    queryStateReducer,
+    resetPage,
+  });
+};
+
+export default usePrevNextPagination;