@k-int/stripes-kint-components 5.13.0 → 5.15.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [5.15.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.14.0...v5.15.0) (2025-02-21)
+
+
+### Features
+
+* useSettings sections ([0c062bf](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/0c062bf203811078371820b5106b3106982845ad))
+
+# [5.14.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.13.0...v5.14.0) (2025-02-19)
+
+
+### Features
+
+* Added filterConfig options to generateKiwtQueryParams ([8502b91](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/8502b91beef93065a24c1b1ab6ed4b73759b851d))
+
 # [5.13.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.12.0...v5.13.0) (2025-02-17)
 
 

package/es/lib/settingsHooks/useSettings.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactQuery = require("react-query");
 var _core = require("@folio/stripes/core");
@@ -15,97 +15,213 @@ var _utils = require("../utils");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const useSettings = _ref => {
-  let {
+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; }
+// TODO work underway to make the settings hook more useful when trying to render multiple sections at a time
+const useSettings = function () {
+  let settingsProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
     allowGlobalEdit = true,
     dynamicPageExclusions,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
-    persistentPages,
+    pages,
+    // If this is present, act completely as a passthrough either in sections OR standalone
+    persistentPages = [],
+    preventQueries = false,
     refdataEndpoint,
+    renderSingleSection = false,
+    // IF SECTIONS == NULL, this prop allows the implementor to render the pageList as a section with label etc
+    sectionPermission,
+    // If we're rendering sections, this prevents the rendering of said section (works as fallback or prevention for single section)
+    sectionRoute,
+    sections,
+    // if present, should be an array of objects with the SAME shape as the overall props here.
+    // If a prop isn't present it can fall back to the "global" prop.
     settingEndpoint,
     templateEndpoint
-  } = _ref;
+  } = settingsProps;
   const ky = (0, _core.useOkapiKy)();
+  const stripes = (0, _core.useStripes)();
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
-  const queryParams = (0, _utils.generateKiwtQueryParams)({
-    filters: dynamicPageExclusions?.map(dpe => ({
-      path: 'section',
-      comparator: '!=',
-      value: dpe
-    })),
-    perPage: 100,
-    stats: false
-  }, {});
-  const {
-    data: appSettings = [],
-    isLoading
-  } = (0, _reactQuery.useQuery)(['stripes-kint-components', 'useSettings', 'appSettings', settingEndpoint, queryParams], () => ky(`${settingEndpoint}?${queryParams?.join('&')}`).json());
-  const sections = [...new Set(appSettings.map(s => s.section))];
-  const dynamic = sections.map(section => {
+
+  // Set up array of queryParams, pageLists etc etc ready for us to do all the work in a single place
+
+  const sectionMetaArray = (0, _react.useMemo)(() => {
+    const array = [];
+    const getSectionQueryProps = sectionProps => {
+      const dqp = sectionProps.dynamicPageExclusions ?? dynamicPageExclusions;
+      const queryParams = (0, _utils.generateKiwtQueryParams)({
+        filters: dqp?.map(dpe => ({
+          path: 'section',
+          comparator: '!=',
+          value: dpe
+        })),
+        perPage: 100,
+        stats: false
+      }, {});
+      const finalSettingEndpoint = sectionProps.settingEndpoint ?? settingEndpoint;
+      const queryKey = ['stripes-kint-components', 'useSettings', 'appSettings', finalSettingEndpoint, queryParams];
+      const queryFn = () => ky(`${finalSettingEndpoint}?${queryParams?.join('&')}`).json();
+      return {
+        queryParams,
+        queryKey,
+        queryFn
+      };
+    };
+    if ((sections?.length ?? 0) > 0) {
+      array.push(...sections.map(section => {
+        const querySectionProps = getSectionQueryProps(section);
+        return {
+          ...settingsProps,
+          // ensure these fall through to section based props
+          ...querySectionProps,
+          ...section // return original section object
+        };
+      }));
+    } else {
+      const querySectionProps = getSectionQueryProps(settingsProps);
+      array.push({
+        ...settingsProps,
+        ...querySectionProps
+      });
+    }
+    return array;
+  }, [dynamicPageExclusions, ky, sections, settingEndpoint, settingsProps]);
+  const queries = (0, _react.useMemo)(() => sectionMetaArray.map(sma => {
+    let enabled = true;
+    if (sma.pages || sma.preventQueries || pages || preventQueries) {
+      enabled = false;
+    }
     return {
-      route: section,
-      label: kintIntl.formatKintMessage({
-        id: `settings.settingsSection.${(0, _utils.toCamelCase)(section)}`,
-        fallbackMessage: section
-      }),
-      component: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingPage.SettingPagePane, {
-        intlKey: passedIntlKey,
-        intlNS: passedIntlNS,
-        sectionName: section,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingPage.SettingPage, {
-          allowEdit: allowGlobalEdit,
+      queryKey: sma.queryKey,
+      queryFn: sma.queryFn,
+      enabled
+    };
+  }) ?? [], [pages, preventQueries, sectionMetaArray]);
+  const queryReturnArray = (0, _reactQuery.useQueries)(queries);
+  const [isLoading, setIsLoading] = (0, _react.useState)(true);
+  const getDynamicPages = (0, _react.useCallback)((qra, sma) => {
+    const pagesFromQueryReturn = [...new Set(qra.data?.map(s => s.section))];
+    const dynamic = pagesFromQueryReturn.map(page => {
+      const finalSectionRoute = sma.sectionRoute ?? sectionRoute;
+      const pageRoute = (finalSectionRoute ? `${finalSectionRoute}/` : '') + page;
+      return {
+        route: pageRoute,
+        label: kintIntl.formatKintMessage({
+          id: `settings.settingsSection.${(0, _utils.toCamelCase)(page)}`,
+          fallbackMessage: page
+        }),
+        component: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingPage.SettingPagePane, {
           intlKey: passedIntlKey,
           intlNS: passedIntlNS,
-          labelOverrides: labelOverrides,
-          sectionName: section,
-          ...props
+          sectionName: page,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SettingPage.SettingPage, {
+            allowEdit: allowGlobalEdit,
+            intlKey: passedIntlKey,
+            intlNS: passedIntlNS,
+            labelOverrides: labelOverrides,
+            sectionName: page,
+            ...props
+          })
         })
-      })
-    };
-  });
-  const pageList = persistentPages.concat(dynamic).sort(_utils.sortByLabel);
-  const intlKey = (0, _hooks.useIntlKey)(passedIntlKey, passedIntlNS);
-  const SettingsContextProvider = _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_contexts.SettingsContext.Provider, {
-      value: {
-        intlKey,
-        // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
-        refdataEndpoint,
-        settingEndpoint,
-        templateEndpoint
-      },
-      children: children
+      };
     });
-  };
-  SettingsContextProvider.propTypes = {
-    children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
-  };
+    return {
+      pages: pagesFromQueryReturn,
+      dynamic
+    };
+  }, [allowGlobalEdit, kintIntl, labelOverrides, passedIntlKey, passedIntlNS, sectionRoute]);
+  (0, _react.useEffect)(() => {
+    // Handle loading
+    if (queryReturnArray.length > 0 && queryReturnArray.every(qra => qra.isLoading === false) && isLoading === true) {
+      setIsLoading(false);
+    }
+  }, [isLoading, queryReturnArray]);
+  const finalSections = (0, _react.useMemo)(() => {
+    return sectionMetaArray.map((sma, idx) => {
+      const SettingsContextProvider = _ref => {
+        let {
+          children
+        } = _ref;
+        const intlKey = (0, _hooks.useIntlKey)(passedIntlKey, passedIntlNS);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_contexts.SettingsContext.Provider, {
+          value: {
+            intlKey: sma.intlKey ?? intlKey,
+            // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
+            refdataEndpoint: sma.refdataEndpoint ?? refdataEndpoint,
+            settingEndpoint: sma.settingEndpoint ?? settingEndpoint,
+            templateEndpoint: sma.templateEndpoint ?? templateEndpoint
+          },
+          children: children
+        });
+      };
+      SettingsContextProvider.propTypes = {
+        children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
+      };
+      const finalPermission = sma.sectionPermission ?? sectionPermission;
+      if (!finalPermission || stripes.hasPerm(finalPermission)) {
+        const dynamicPagesFromQueryReturn = getDynamicPages(queryReturnArray[idx], sma);
+        const finalPages = sma.pages ?? pages ?? (sma.persistentPages ?? persistentPages).concat(dynamicPagesFromQueryReturn.dynamic).sort(_utils.sortByLabel).map(p => {
+          return {
+            ...p,
+            component: pCProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsContextProvider, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(p.component, {
+                ...pCProps
+              })
+            })
+          };
+        });
+        return {
+          ...sma,
+          SettingsContextProvider,
+          ...dynamicPagesFromQueryReturn,
+          pageList: finalPages,
+          // DEPRECATED Here for backwards compatibility
+          pages: finalPages // ASSUMPTION MADE THAT INDICES REMAIN THE SAME
+        };
+      }
+      return null;
+    }).filter(Boolean);
+  }, [getDynamicPages, pages, passedIntlKey, passedIntlNS, persistentPages, queryReturnArray, refdataEndpoint, sectionMetaArray, sectionPermission, settingEndpoint, stripes, templateEndpoint]);
+  const pageList = (0, _react.useMemo)(() => {
+    let finalPages = null;
+    if (finalSections && finalSections.length === 1 && !renderSingleSection) {
+      finalPages = pages ?? finalSections[0].pages;
+    }
+    return finalPages;
+  }, [finalSections, pages, renderSingleSection]);
+  const passedSections = (0, _react.useMemo)(() => {
+    if (finalSections.length > 1 || finalSections.length === 1 && renderSingleSection) {
+      return finalSections;
+    }
+    return null;
+  }, [finalSections, renderSingleSection]);
   const SettingsComponent = props => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.Settings, {
       pages: pageList,
       paneTitle: kintIntl.formatKintMessage({
         id: 'meta.title'
       }),
+      sections: passedSections,
       ...props
     });
   };
-  const SettingsComponentWithContext = props => {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsContextProvider, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsComponent, {
-        ...props
-      })
-    });
-  };
   return {
     isLoading,
     pageList,
-    SettingsComponent: SettingsComponentWithContext,
-    SettingsContextProvider
+    sections: finalSections,
+    SettingsComponent,
+    // This doesn't make much sense if there is more than one section, here to avoid breaking changes
+    SettingsContextProvider: finalSections && finalSections.length === 1 ? finalSections[0].SettingsContextProvider : _ref2 => {
+      let {
+        children
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [" ", children, " "]
+      });
+    }
   };
 };
 var _default = exports.default = useSettings;

package/es/lib/utils/generateKiwtQuery.js

@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _generateKiwtQueryParams = _interopRequireDefault(require("./generateKiwtQueryParams"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _generateKiwtQueryParams = require("./generateKiwtQueryParams");
 const generateKiwtQuery = function (options, nsValues) {
   let encode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  const paramsArray = (0, _generateKiwtQueryParams.default)(options, nsValues, encode);
+  const paramsArray = (0, _generateKiwtQueryParams.generateKiwtQueryParams)(options, nsValues, encode);
   return paramsArray.length ? '?' + paramsArray.join('&') : '';
 };
 var _default = exports.default = generateKiwtQuery;

package/es/lib/utils/{generateKiwtQueryParams.js → generateKiwtQueryParams/generateKiwtQueryParams.js}

@@ -134,8 +134,11 @@ const generateKiwtQueryParams = function (options, nsValues) {
       if (filterConfigEntry) {
         // We have a direct mapping instruction, use it
         const filterString = filterValues.map(v => {
-          const fceValue = filterConfigEntry?.values?.find(fce => fce.name === v)?.value;
-          return `${filterName}==${fceValue ?? v}`;
+          const fcValueEntry = filterConfigEntry?.values?.find(fce => fce.name === v) ?? {};
+          const fceValue = fcValueEntry.value ?? v;
+          // This is especially useful where comparator acts strangely for a single value, such as `filters=foo isNotSet`
+          const fceComparator = fcValueEntry.comparator ?? '==';
+          return `${filterKey ?? filterName}${fceComparator}${fceValue ?? v}`;
         }).join('||');
         paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString, encode)}`);
       } else if (!filterKey) {

package/es/lib/utils/generateKiwtQueryParams/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "generateKiwtQueryParams", {
+  enumerable: true,
+  get: function () {
+    return _generateKiwtQueryParams.default;
+  }
+});
+var _generateKiwtQueryParams = _interopRequireDefault(require("./generateKiwtQueryParams"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/utils/index.js

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "generateKiwtQuery", {
 Object.defineProperty(exports, "generateKiwtQueryParams", {
   enumerable: true,
   get: function () {
-    return _generateKiwtQueryParams.default;
+    return _generateKiwtQueryParams.generateKiwtQueryParams;
   }
 });
 Object.defineProperty(exports, "groupCustomPropertiesByCtx", {
@@ -136,7 +136,7 @@ Object.defineProperty(exports, "typedownQueryKey", {
   }
 });
 var _generateKiwtQuery = _interopRequireDefault(require("./generateKiwtQuery"));
-var _generateKiwtQueryParams = _interopRequireDefault(require("./generateKiwtQueryParams"));
+var _generateKiwtQueryParams = require("./generateKiwtQueryParams");
 var _selectorSafe = _interopRequireDefault(require("./selectorSafe"));
 var _buildUrl = _interopRequireDefault(require("./buildUrl"));
 var _refdataOptions = _interopRequireDefault(require("./refdataOptions"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.13.0",
+  "version": "5.15.0",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/lib/settingsHooks/useSettings.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { useQuery } from 'react-query';
-import { useOkapiKy } from '@folio/stripes/core';
+import { useQueries } from 'react-query';
+import { useOkapiKy, useStripes } from '@folio/stripes/core';
 
 import { Settings } from '@folio/stripes/smart-components';
 
@@ -12,88 +12,207 @@ import { SettingsContext } from '../contexts';
 import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../utils';
 import { useKintIntl, useIntlKey } from '../hooks';
 
-const useSettings = ({
-  allowGlobalEdit = true,
-  dynamicPageExclusions,
-  intlKey: passedIntlKey,
-  intlNS: passedIntlNS,
-  labelOverrides = {},
-  persistentPages,
-  refdataEndpoint,
-  settingEndpoint,
-  templateEndpoint
-}) => {
+// TODO work underway to make the settings hook more useful when trying to render multiple sections at a time
+const useSettings = (settingsProps = {}) => {
+  const {
+    allowGlobalEdit = true,
+    dynamicPageExclusions,
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
+    pages, // If this is present, act completely as a passthrough either in sections OR standalone
+    persistentPages = [],
+    preventQueries = false,
+    refdataEndpoint,
+    renderSingleSection = false, // IF SECTIONS == NULL, this prop allows the implementor to render the pageList as a section with label etc
+    sectionPermission, // If we're rendering sections, this prevents the rendering of said section (works as fallback or prevention for single section)
+    sectionRoute,
+    sections, // if present, should be an array of objects with the SAME shape as the overall props here.
+    // If a prop isn't present it can fall back to the "global" prop.
+    settingEndpoint,
+    templateEndpoint
+  } = settingsProps;
+
   const ky = useOkapiKy();
+  const stripes = useStripes();
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 
-  const queryParams = generateKiwtQueryParams({
-      filters: dynamicPageExclusions?.map(dpe => ({
-        path: 'section',
-        comparator: '!=',
-        value: dpe
-      })),
-      perPage: 100,
-      stats: false
-  }, {});
-
-  const { data: appSettings = [], isLoading } = useQuery(
-    ['stripes-kint-components', 'useSettings', 'appSettings', settingEndpoint, queryParams],
-    () => ky(`${settingEndpoint}?${queryParams?.join('&')}`).json()
-  );
-
-  const sections = [...new Set(appSettings.map(s => s.section))];
-  const dynamic = sections.map(section => {
-    return (
-      {
-        route: section,
-        label: kintIntl.formatKintMessage({
-          id: `settings.settingsSection.${toCamelCase(section)}`,
-          fallbackMessage: section
-        }),
-        component: (props) => (
-          <SettingPagePane
-            intlKey={passedIntlKey}
-            intlNS={passedIntlNS}
-            sectionName={section}
-          >
-            <SettingPage
-              allowEdit={allowGlobalEdit}
+  // Set up array of queryParams, pageLists etc etc ready for us to do all the work in a single place
+
+  const sectionMetaArray = useMemo(() => {
+    const array = [];
+    const getSectionQueryProps = (sectionProps) => {
+      const dqp = sectionProps.dynamicPageExclusions ?? dynamicPageExclusions;
+      const queryParams = generateKiwtQueryParams({
+        filters: dqp?.map(dpe => ({
+          path: 'section',
+          comparator: '!=',
+          value: dpe
+        })),
+        perPage: 100,
+        stats: false
+      }, {});
+      const finalSettingEndpoint = sectionProps.settingEndpoint ?? settingEndpoint;
+      const queryKey = ['stripes-kint-components', 'useSettings', 'appSettings', finalSettingEndpoint, queryParams];
+      const queryFn = () => ky(`${finalSettingEndpoint}?${queryParams?.join('&')}`).json();
+
+      return { queryParams, queryKey, queryFn };
+    };
+
+    if ((sections?.length ?? 0) > 0) {
+      array.push(...sections.map((section) => {
+        const querySectionProps = getSectionQueryProps(section);
+
+        return ({
+          ...settingsProps, // ensure these fall through to section based props
+          ...querySectionProps,
+          ...section // return original section object
+        });
+      }));
+    } else {
+      const querySectionProps = getSectionQueryProps(settingsProps);
+      array.push({
+        ...settingsProps,
+        ...querySectionProps,
+      });
+    }
+
+    return array;
+  }, [dynamicPageExclusions, ky, sections, settingEndpoint, settingsProps]);
+
+  const queries = useMemo(() => sectionMetaArray.map(sma => {
+    let enabled = true;
+    if (sma.pages || sma.preventQueries || pages || preventQueries) {
+      enabled = false;
+    }
+
+    return {
+      queryKey: sma.queryKey,
+      queryFn: sma.queryFn,
+      enabled
+    };
+  }) ?? [], [pages, preventQueries, sectionMetaArray]);
+
+  const queryReturnArray = useQueries(queries);
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const getDynamicPages = useCallback((qra, sma) => {
+    const pagesFromQueryReturn = [...new Set(qra.data?.map(s => s.section))];
+    const dynamic = pagesFromQueryReturn.map(page => {
+      const finalSectionRoute = sma.sectionRoute ?? sectionRoute;
+      const pageRoute = (finalSectionRoute ? `${finalSectionRoute}/` : '') + page;
+      return (
+        {
+          route: pageRoute,
+          label: kintIntl.formatKintMessage({
+            id: `settings.settingsSection.${toCamelCase(page)}`,
+            fallbackMessage: page
+          }),
+          component: (props) => (
+            <SettingPagePane
               intlKey={passedIntlKey}
               intlNS={passedIntlNS}
-              labelOverrides={labelOverrides}
-              sectionName={section}
-              {...props}
-            />
-          </SettingPagePane>
-        )
+              sectionName={page}
+            >
+              <SettingPage
+                allowEdit={allowGlobalEdit}
+                intlKey={passedIntlKey}
+                intlNS={passedIntlNS}
+                labelOverrides={labelOverrides}
+                sectionName={page}
+                {...props}
+              />
+            </SettingPagePane>
+          )
+        }
+      );
+    });
+
+    return {
+      pages: pagesFromQueryReturn,
+      dynamic,
+    };
+  }, [allowGlobalEdit, kintIntl, labelOverrides, passedIntlKey, passedIntlNS, sectionRoute]);
+
+  useEffect(() => {
+    // Handle loading
+    if (
+      queryReturnArray.length > 0 &&
+      queryReturnArray.every(qra => qra.isLoading === false) &&
+      isLoading === true
+    ) {
+      setIsLoading(false);
+    }
+  }, [isLoading, queryReturnArray]);
+
+  const finalSections = useMemo(() => {
+    return sectionMetaArray.map(((sma, idx) => {
+      const SettingsContextProvider = ({ children }) => {
+        const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
+        return (
+          <SettingsContext.Provider
+            value={{
+              intlKey: sma.intlKey ?? intlKey, // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
+              refdataEndpoint: sma.refdataEndpoint ?? refdataEndpoint,
+              settingEndpoint: sma.settingEndpoint ?? settingEndpoint,
+              templateEndpoint: sma.templateEndpoint ?? templateEndpoint,
+            }}
+          >
+            {children}
+          </SettingsContext.Provider>
+        );
+      };
+
+      SettingsContextProvider.propTypes = {
+        children: PropTypes.oneOfType([
+          PropTypes.func,
+          PropTypes.node
+        ])
+      };
+
+      const finalPermission = sma.sectionPermission ?? sectionPermission;
+      if (!finalPermission || stripes.hasPerm(finalPermission)) {
+        const dynamicPagesFromQueryReturn = getDynamicPages(queryReturnArray[idx], sma);
+
+        const finalPages = sma.pages ?? pages ?? (sma.persistentPages ?? persistentPages).concat(dynamicPagesFromQueryReturn.dynamic).sort(sortByLabel).map((p) => {
+          return {
+            ...p,
+            component: (pCProps) => (
+              <SettingsContextProvider>
+                <p.component {...pCProps} />
+              </SettingsContextProvider>
+            )
+          };
+        });
+
+        return {
+          ...sma,
+          SettingsContextProvider,
+          ...dynamicPagesFromQueryReturn,
+          pageList: finalPages, // DEPRECATED Here for backwards compatibility
+          pages: finalPages // ASSUMPTION MADE THAT INDICES REMAIN THE SAME
+        };
       }
-    );
-  });
+      return null;
+    })).filter(Boolean);
+  }, [getDynamicPages, pages, passedIntlKey, passedIntlNS, persistentPages, queryReturnArray, refdataEndpoint, sectionMetaArray, sectionPermission, settingEndpoint, stripes, templateEndpoint]);
 
-  const pageList = persistentPages.concat(dynamic).sort(sortByLabel);
+  const pageList = useMemo(() => {
+    let finalPages = null;
+    if (finalSections && finalSections.length === 1 && !renderSingleSection) {
+      finalPages = pages ?? finalSections[0].pages;
+    }
 
-  const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
-  const SettingsContextProvider = ({ children }) => {
-    return (
-      <SettingsContext.Provider
-        value={{
-          intlKey, // This is only here for backwards compatibility... is now grabbed from useIntlKey instead of what's passed in directly
-          refdataEndpoint,
-          settingEndpoint,
-          templateEndpoint
-        }}
-      >
-        {children}
-      </SettingsContext.Provider>
-    );
-  };
+    return finalPages;
+  }, [finalSections, pages, renderSingleSection]);
 
-  SettingsContextProvider.propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.node
-    ])
-  };
+  const passedSections = useMemo(() => {
+    if (finalSections.length > 1 || (finalSections.length === 1 && renderSingleSection)) {
+      return finalSections;
+    }
+    return null;
+  }, [finalSections, renderSingleSection]);
 
   const SettingsComponent = (props) => {
     return (
@@ -101,26 +220,21 @@ const useSettings = ({
         pages={pageList}
         paneTitle={
           kintIntl.formatKintMessage({
-          id: 'meta.title'
-        })}
+            id: 'meta.title'
+          })}
+        sections={passedSections}
         {...props}
       />
     );
   };
 
-  const SettingsComponentWithContext = (props) => {
-    return (
-      <SettingsContextProvider>
-        <SettingsComponent {...props} />
-      </SettingsContextProvider>
-    );
-  };
-
   return {
     isLoading,
     pageList,
-    SettingsComponent: SettingsComponentWithContext,
-    SettingsContextProvider
+    sections: finalSections,
+    SettingsComponent,
+    // This doesn't make much sense if there is more than one section, here to avoid breaking changes
+    SettingsContextProvider: (finalSections && finalSections.length === 1) ? finalSections[0].SettingsContextProvider : ({ children }) => <> { children } </>
   };
 };
 

package/src/lib/utils/README.md

@@ -3,7 +3,7 @@
 ## generateKiwtQuery
 
 The `generateKiwtQuery` function generates a URL query string in "KIWT" (K-Int Web Toolkit) style from a SASQ (Search and Sort Query) object. It handles search terms, filters, sorting, and other parameters, making it easy to construct complex query strings for backend APIs.
-
+This component calls and then joins the output of `generateKiwtQueryParams`. For more granular information on how this works, see the generateKiwtQueryParams README.
 ### Basic Usage
 
 ```javascript
@@ -39,105 +39,3 @@ const queryString = generateKiwtQuery(options, nsValues);
 | options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys`, and `stats`, which maps the incoming `nsValues` object to a KIWT query. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. |  | ✓ |
 | nsValues | object | An object containing the query parameters.  Can contain `query`, `filters`, and `sort`, as well as any other arbitrary parameters. |  | ✓ |
 | encode | boolean | A boolean indicating whether to URL-encode the values. | `true` | ✕ |
-
-## generateKiwtQueryParams
-
-The `generateKiwtQueryParams` function is similar to `generateKiwtQuery`, but instead of returning a string, it returns an array of query parameters. This can be useful for more advanced use cases where you need to manipulate the parameters before constructing the final query string.
-
-### Basic Usage
-
-```javascript
-import { generateKiwtQueryParams } from '@k-int/stripes-kint-components';
-
-const nsValues = {
-  query: 'test',
-  filters: 'requestStatus.completed,journalVolume.test1,startDate.startDate>=2021-10-28'
-};
-
-const options = {
-  searchKey: 'request.name',
-  filterKeys: {
-    requestStatus: 'requestStatus.value',
-    journalVolume: 'journalVolume'
-  }
-};
-
-const queryArray = generateKiwtQueryParams(options, nsValues);
-
-// queryArray will be:
-// [
-//   "match=request.name",
-//   "term=test",
-//   "filters=requestStatus.value==completed",
-//   "filters=journalVolume==test1",
-//   "filters=startDate%3E=2021-10-28",
-//   "stats=true"
-// ]
-```
-
-### Props
-
-| Name | Type | Description | Default | Required |
-|---|---|---|---|---|
-| options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys`, and `stats`, which maps the incoming `nsValues` object to a KIWT query array. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. |  | ✓ |
-| nsValues | object | An object containing the query parameters. Can contain `query`, `filters`, and `sort`, as well as any other arbitrary parameters. |  | ✓ |
-| encode | boolean | A boolean indicating whether to URL-encode the values. | `true` | ✕ |
-
-
-### Options Parameter Structure
-
-The `options` parameter is a powerful tool for customizing the query string generation. It has the following key elements:
-
-*   **Search:**
-    *   `searchKey`: Specifies the field to search on. If using SASQ, the corresponding value in `nsValues.query` will be used as the search term. Otherwise, you can directly specify the search term using the `term` key in `options`.
-*   **Filters:** See the "Filters Object Structure" section below for details.
-*   **Sorting:**
-    *   `sortKeys`: An object mapping sort field names from `nsValues.sort` to their corresponding backend keys.
-    *   `sort`: An array of sort objects. Each object can have `path` (field to sort on) and `direction` (`asc` or `desc`).
-*   **Statistics:**
-    *   `stats`: A boolean value indicating whether to include the `stats=true` parameter.
-*   **Other parameters:** Any other key-value pairs in the `options` object will be directly added as query parameters.
-
-
-### Filters Object Structure
-
-The `filters` option in the `options` parameter allows you to define complex filter expressions using an array of filter objects. Each filter object can have the following properties:
-
-*   **path:** The path to the field to filter on (e.g., `item.title`).
-*   **comparator:** *(Optional)* The comparator to use for the filter (e.g., `==`, `!=`, `>`, `<`). Defaults to `==`.
-*   **value:** A single value to filter on.
-*   **values:** An array of values to filter on. If present, this property takes precedence over `value`, and an `OR` condition is implied between the values.
-*   **groupValues:** An object defining nested filter groups with `AND` or `OR` logic. This property allows for building complex nested filters. See the explanation below.
-
-#### Nested Filter Groups (`groupValues`)
-
-The `groupValues` property enables the creation of nested filter expressions with `AND` and `OR` logic. It is an object with either `AND` or `OR` properties (or both, with `AND` taking precedence). The value of these properties should be an array of filter objects, allowing for recursive nesting.
-
-```javascript
-// Example: (status==active AND type==local) OR (status==pending)
-const filters = [
-  {
-    groupValues: {
-      OR: [
-        {
-          groupValues: {
-            AND: [
-              { path: 'item.status', value: 'active' },
-              { path: 'item.type', value: 'local' },
-            ],
-          }
-        },
-        { path: 'item.status', value: 'pending' },
-      ]
-    },
-  },
-];
-```
-
-This structure allows you to express complex filter logic in a clear and organized way.
-
-### Key Takeaways
-
-*   `generateKiwtQuery` provides a flexible way to construct URL query strings for backend APIs, especially when working with Stripes SASQ.
-*   The `options` parameter offers fine-grained control over the query generation process, allowing for complex filtering, sorting, and other customizations.
-*   `generateKiwtQueryParams` is useful for advanced use cases where you need to manipulate the parameters before constructing the final query string.

package/src/lib/utils/generateKiwtQuery.js

@@ -1,4 +1,4 @@
-import generateKiwtQueryParams from './generateKiwtQueryParams';
+import { generateKiwtQueryParams } from './generateKiwtQueryParams';
 
 const generateKiwtQuery = (options, nsValues, encode = true) => {
   const paramsArray = generateKiwtQueryParams(options, nsValues, encode);

package/src/lib/utils/generateKiwtQueryParams/README.md

@@ -0,0 +1,199 @@
+# generateKiwtQueryParams
+
+The `generateKiwtQueryParams` function is similar to `generateKiwtQuery`, but instead of returning a string, it returns an array of query parameters. This can be useful for more advanced use cases where you need to manipulate the parameters before constructing the final query string.
+
+## Basic Usage
+
+```javascript
+import { generateKiwtQueryParams } from '@k-int/stripes-kint-components';
+
+const nsValues = {
+  query: 'test',
+  filters: 'requestStatus.completed,journalVolume.test1,startDate.startDate>=2021-10-28'
+};
+
+const options = {
+  searchKey: 'request.name',
+  filterKeys: {
+    requestStatus: 'requestStatus.value',
+    journalVolume: 'journalVolume'
+  }
+};
+
+const queryArray = generateKiwtQueryParams(options, nsValues);
+
+// queryArray will be:
+// [
+//   "match=request.name",
+//   "term=test",
+//   "filters=requestStatus.value==completed",
+//   "filters=journalVolume==test1",
+//   "filters=startDate%3E=2021-10-28",
+//   "stats=true"
+// ]
+```
+
+## Props
+
+| Name | Type | Description | Default | Required |
+|---|---|---|---|---|
+| options | object | An object with keys: `searchKey`, `filterKeys`, `sortKeys`, and `stats`, which maps the incoming `nsValues` object to a KIWT query array. You can also pass arbitrary `key`/`value` pairs to append `key==value` onto the query. |  | ✓ |
+| nsValues | object | An object containing the query parameters. Can contain `query`, `filters`, and `sort`, as well as any other arbitrary parameters. |  | ✓ |
+| encode | boolean | A boolean indicating whether to URL-encode the values. | `true` | ✕ |
+
+
+## Options Parameter Structure
+
+The `options` parameter is a powerful tool for customizing the query string generation manually. It has the following key elements:
+
+*   **Search:**
+    *   `searchKey`: Specifies the field to search on. If using SASQ, the corresponding value in `nsValues.query` will be used as the search term. Otherwise, you can directly specify the search term using the `term` key in `options`.
+*   **Filters:** See the "Filters Object Structure" section below for details.
+*   **Sorting:**
+    *   `sortKeys`: An object mapping sort field names from `nsValues.sort` to their corresponding backend keys.
+    *   `sort`: An array of sort objects. Each object can have `path` (field to sort on) and `direction` (`asc` or `desc`).
+*   **Statistics:**
+    *   `stats`: A boolean value indicating whether to include the `stats=true` parameter.
+*   **Other parameters:** Any other key-value pairs in the `options` object will be directly added as query parameters.
+
+
+### Filters Object Structure
+
+The `filters` option in the `options` parameter allows you to define complex filter expressions using an array of filter objects. Each filter object can have the following properties:
+
+*   **path:** The path to the field to filter on (e.g., `item.title`).
+*   **comparator:** *(Optional)* The comparator to use for the filter (e.g., `==`, `!=`, `>`, `<`). Defaults to `==`.
+*   **value:** A single value to filter on.
+*   **values:** An array of values to filter on. If present, this property takes precedence over `value`, and an `OR` condition is implied between the values.
+*   **groupValues:** An object defining nested filter groups with `AND` or `OR` logic. This property allows for building complex nested filters. See the explanation below.
+
+### Nested Filter Groups (`groupValues`)
+
+The `groupValues` property enables the creation of nested filter expressions with `AND` and `OR` logic. It is an object with either `AND` or `OR` properties (or both, with `AND` taking precedence). The value of these properties should be an array of filter objects, allowing for recursive nesting.
+
+```javascript
+// Example: (status==active AND type==local) OR (status==pending)
+const filters = [
+  {
+    groupValues: {
+      OR: [
+        {
+          groupValues: {
+            AND: [
+              { path: 'item.status', value: 'active' },
+              { path: 'item.type', value: 'local' },
+            ],
+          }
+        },
+        { path: 'item.status', value: 'pending' },
+      ]
+    },
+  },
+];
+```
+
+This structure allows you to express complex filter logic in a clear and organized way.
+
+## nsValues options
+
+In addition to the manual filtering capabilities, `generateKiwtQueryParams` supports advanced filtering options including custom comparators and dynamic filter key overrides for the `query` nsValues passed by SASQ. These features enable you to generate complex query expressions more easily.
+
+### Custom Comparators & Filter Key Overrides
+  When using the older `nsValues.filters` string (e.g., `"requestStatus.completed,journalVolume.test1"`), you can use `filterConfig` to customize how filters are interpreted:
+
+    - **Mapping Filter Names:**  
+      Each entry in `filterConfig` should include a `name` field that matches the filter name parsed from `nsValues.filters`.
+
+    - **Overriding Values and Comparators:**  
+      Optionally, a `values` array can be provided for more granular control. For each possible value, you can specify:
+        - A replacement value.
+        - A custom comparator to be used instead of the default `'=='`.
+
+  For example, if you want the filter `status` to use a comparator like `isNotSet` for a certain value, your configuration might look like this:
+
+  ```javascript
+  const options = {
+    filterKeys: { status: 'requestStatus.value' },
+    filterConfig: [
+      {
+        name: 'status',
+        values: [
+          { name: 'notSet', value: '', comparator: ' isNotSet' },
+          { name: 'isNotActive', value: 'active', comparator: '!=' },
+          // other value mappings... Any not present will be evaluated as is
+        ]
+      }
+    ]
+  };
+  ```
+
+  With this configuration, the generated query parameter for various nsValues.filters would be:
+
+| nsValues.filters | outcome |
+| -- | -- |
+| status.notSet | `filters=requestStatus.value isNotSet` |
+| status.wibble | `filters=requestStatus.value==wibble` |
+| status.isNotActive | `filters=requestStatus.value!=active` |
+
+
+
+
+### Dynamic Date Example with `moreThanToday`
+
+You can also dynamically set filter values based on runtime data. For instance, if you want to filter records where a date field is greater than or equal to today’s date, you can calculate the date value first and then reference it in your `filterConfig`:
+
+```javascript
+// Dynamically calculate today's date in YYYY-MM-DD format
+const today = new Date().toISOString().split('T')[0];
+
+const filterConfig = [
+  {
+    name: 'startDate',
+    values: [
+      {
+        name: 'moreThanToday',
+        value: today,
+        comparator: '>='
+      }
+    ]
+  }
+];
+
+const options = {
+  filterConfig,
+};
+
+const nsValues = {
+  // When 'startDate.moreThanToday' is encountered, it will use the filterConfig mapping
+  filters: 'startDate.moreThanToday'
+};
+
+const queryArray = generateKiwtQueryParams(options, nsValues);
+console.log(queryArray);
+// Example output (URL encoded):
+// [
+//   "filters=startDate%3E%3D2025-02-19", // The date value will reflect today's date
+//   "stats=true"
+// ]
+```
+
+In this example, when `nsValues.filters` contains `startDate.moreThanToday`, the function looks up the corresponding configuration in `filterConfig`, uses the dynamically calculated date stored in `today`, and applies the comparator `>=` to produce a query parameter like:
+
+```
+filters=startDate>=2025-02-19
+```
+
+This approach makes it easy to filter records based on dynamic criteria, such as dates relative to the current day.
+
+### How It Works
+
+- **For `options.filters` (object-based filtering):**  
+  The function handles nested filters, groups (using `groupValues` with `AND`/`OR` logic), and applies the specified comparators. This provides full flexibility when building complex queries.
+
+- **For Legacy SASQ `nsValues.filters` (string-based filtering):**  
+  The code splits the incoming comma-separated string into individual filters. For each filter:
+    - It checks if there’s a matching entry in `filterConfig`.
+    - If found, it applies the mapping from `filterConfig` and uses the comparator specified there (or defaults to `'=='`).
+    - If no mapping exists and no filter key is provided in `filterKeys`, the raw value is passed to the backend.
+
+By utilizing these advanced filtering options, you can tailor your query string generation to meet complex backend requirements while maintaining clarity and control over your filter logic.

package/src/lib/utils/{generateKiwtQueryParams.js → generateKiwtQueryParams/generateKiwtQueryParams.js}

@@ -129,8 +129,11 @@ const generateKiwtQueryParams = (options, nsValues, encode = true) => {
       if (filterConfigEntry) {
         // We have a direct mapping instruction, use it
         const filterString = filterValues.map(v => {
-          const fceValue = filterConfigEntry?.values?.find(fce => fce.name === v)?.value;
-          return `${filterName}==${fceValue ?? v}`;
+          const fcValueEntry = filterConfigEntry?.values?.find(fce => fce.name === v) ?? {};
+          const fceValue = fcValueEntry.value ?? v;
+          // This is especially useful where comparator acts strangely for a single value, such as `filters=foo isNotSet`
+          const fceComparator = fcValueEntry.comparator ?? '==';
+          return `${filterKey ?? filterName}${fceComparator}${fceValue ?? v}`;
         }).join('||');
 
         paramsArray.push(`filters=${conditionalEncodeURIComponent(filterString, encode)}`);

package/src/lib/utils/generateKiwtQueryParams/index.js

@@ -0,0 +1 @@
+export { default as generateKiwtQueryParams } from './generateKiwtQueryParams';

package/src/lib/utils/index.js

@@ -1,5 +1,5 @@
 export { default as generateKiwtQuery } from './generateKiwtQuery';
-export { default as generateKiwtQueryParams } from './generateKiwtQueryParams';
+export { generateKiwtQueryParams } from './generateKiwtQueryParams';
 export { default as selectorSafe } from './selectorSafe';
 
 export { default as buildUrl } from './buildUrl';