@k-int/stripes-kint-components 5.32.0 → 5.33.0

package/src/artifacts/coverage-jest/utils/generateKiwtQuery.js.html

@@ -94,7 +94,7 @@ export default generateKiwtQuery;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/generateKiwtQueryParams/generateKiwtQueryParams.js.html

@@ -790,7 +790,7 @@ export default generateKiwtQueryParams;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/generateKiwtQueryParams/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/generateKiwtQueryParams/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/groupCustomPropertiesByCtx.js.html

@@ -109,7 +109,7 @@ export default groupCustomPropertiesByCtx;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/highlightString.js.html

@@ -244,7 +244,7 @@ export {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/index.html

@@ -296,7 +296,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/index.js.html

@@ -175,7 +175,7 @@ export { default as parseModConfigEntry } from './parseModConfigEntry';
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/matchString.js.html

@@ -175,7 +175,7 @@ export default matchString;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/modConfigEntriesQueryKey.js.html

@@ -127,7 +127,7 @@ export default modConfigEntriesQueryKey;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/parseErrorResponse.js.html

@@ -142,7 +142,7 @@ export default parseErrorResponse;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/parseModConfigEntry.js.html

@@ -115,7 +115,7 @@ export default parseModConfigEntry;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/refdataOptions.js.html

@@ -94,7 +94,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/refdataQueryKey/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/refdataQueryKey/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/refdataQueryKey/refdataQueryKey.js.html

@@ -97,7 +97,7 @@ export default refdataQueryKey;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/selectorSafe.js.html

@@ -130,7 +130,7 @@ export default selectorSafe;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/sortByLabel.js.html

@@ -115,7 +115,7 @@ export default sortByLabel;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/toCamelCase.js.html

@@ -112,7 +112,7 @@ export default toCamelCase;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/utils/typedownQueryKey.js.html

@@ -97,7 +97,7 @@ export default typedownQueryKey;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/validators/index.html

@@ -116,7 +116,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/validators/index.js.html

@@ -73,7 +73,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/artifacts/coverage-jest/validators/validators.js.html

@@ -355,7 +355,7 @@ export {
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2026-02-17T13:52:17.739Z
+                at 2026-03-06T00:03:21.988Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/src/lib/Settings/Settings/Settings.js

@@ -99,11 +99,40 @@ const Settings = ({
   }, [location.pathname, location.search, match.path, stripes]);
 
   const routes = useMemo(() => internalRoutes.map((internalRoute) => {
+    const { page } = internalRoute;
+    const { component: Component, contextValue, Provider } = page;
+
+    if (Provider) {
+      return (
+        <Route
+          key={internalRoute.page.route}
+          path={`${match.path}/${internalRoute.page.route}`}
+          render={props2 => (
+            <Provider
+              contextValue={contextValue}
+            >
+              <Component
+                {...props2}
+                label={internalRoute.page.label}
+                stripes={stripes}
+              />
+            </Provider>
+          )}
+        />
+      );
+    }
+
     const Current = internalRoute.component;
     return (<Route
       key={internalRoute.page.route}
       path={`${match.path}/${internalRoute.page.route}`}
-      render={props2 => <Current {...props2} label={internalRoute.page.label} stripes={stripes} />}
+      render={props2 => (
+        <Current
+          {...props2}
+          label={internalRoute.page.label}
+          stripes={stripes}
+        />
+      )}
     />);
   }), [internalRoutes, match.path, stripes]);
 

package/src/lib/Settings/hooks/useSettings/README.md

@@ -1,5 +1,9 @@
 # useSettings
 
+>[!WARNING]
+>Legacy Pattern > This hook has become significantly complex and "heavy" due to the need to support legacy stripes-smart-components patterns while managing dynamic context injection.
+> It is possible that this pattern will be significantly reworked in future versions to separate data-fetching logic from UI component generation in a more modular way.
+
 A comprehensive hook that manages the retrieval and configuration of settings data for one or multiple sections. It orchestrates multiple queries with `react-query`, constructs dynamic pages for each settings section, and returns a pre-configured `SettingsComponent` for rendering the settings UI.
 
 ## Overview
@@ -45,24 +49,25 @@ const SettingsContainer = () => {
 
 `useSettings` accepts an optional settings props object (`settingsProps`) that may include the following properties:
 
-| Name                   | Type     | Description                                                                                                                                                                                                                                | Required |
-|------------------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
-| `allowGlobalEdit`      | `boolean`| Global flag to enable or disable editing of settings. Defaults to `true`.                                                                                                                                                                  | ✕        |
-| `dynamicPageExclusions`| `array`  | Array of section names to be excluded from dynamic page generation.                                                                                                                                                                        | ✕        |
-| `intlKey`              | `string` | Base internationalization key for resolving labels.                                                                                                                                                                                        | ✕        |
-| `intlNS`               | `string` | Internationalization namespace.                                                                                                                                                                                                            | ✕        |
-| `labelOverrides`       | `object` | Custom label overrides for specific settings keys.                                                                                                                                                                                         | ✕        |
-| `pages`                | `array`  | If provided, acts as a passthrough configuration for either sections or standalone pages, disabling query execution.                                                                                                                       | ✕        |
-| `persistentPages`      | `array`  | Array of pages that persist regardless of dynamic query results.                                                                                                                                                                           | ✕        |
-| `preventQueries`       | `boolean`| Flag to disable querying if settings data is provided externally.                                                                                                                                                                          | ✕        |
-| `refdataEndpoint`      | `string` | The API endpoint to retrieve reference data for settings.                                                                                                                                                                                  | ✕        |
-| `renderSingleSection`  | `boolean`| When only one section is available, determines if it should be rendered as a single section with its own label.                                                                                                                            | ✕        |
-| `sectionPermission`    | `string` | Permission string that, if provided, restricts the rendering of a section unless the current user has the specified permission.                                                                                                            | ✕        |
-| `sectionRoute`         | `string` | Base route path to be used when constructing dynamic page routes for settings sections.                                                                                                                                                    | ✕        |
-| `sections`             | `array`  | Array of section configuration objects. Each object can override or extend the global settings props for that specific section. This means that the shape here matches more or less the shape for the props of `useSettings` itself.       | ✕        |
-| `settingEndpoint`      | `string` | The base URL endpoint for fetching and updating settings.                                                                                                                                                                                  | ✕        |
-| `templateEndpoint`     | `string` | The endpoint for retrieving settings templates (if applicable).                                                                                                                                                                            | ✕        |
-| `render`               | `func`   | A custom render function for rendering individual setting fields. This function is passed down to the underlying settings components for specialized display logic. See `EditableSettingsList` for more information on how render is used. | ✕        |
+| Name                    | Type      | Description                                                                                                                                                                                                                                | Required |
+|-------------------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
+| `allowGlobalEdit`       | `boolean` | Global flag to enable or disable editing of settings. Defaults to `true`.                                                                                                                                                                  | ✕        |
+| `contextPerPage`        | `boolean` | If `true`, wraps every individual page component in a Context Provider. Set to `false` if encountering redraw issues with SASQ components. Defaults to `true`, see "Performance & Redraws" section below for more information.             | ✕        |
+| `dynamicPageExclusions` | `array`   | Array of section names to be excluded from dynamic page generation.                                                                                                                                                                        | ✕        |
+| `intlKey`               | `string`  | Base internationalization key for resolving labels.                                                                                                                                                                                        | ✕        |
+| `intlNS`                | `string`  | Internationalization namespace.                                                                                                                                                                                                            | ✕        |
+| `labelOverrides`        | `object`  | Custom label overrides for specific settings keys.                                                                                                                                                                                         | ✕        |
+| `pages`                 | `array`   | If provided, acts as a passthrough configuration for either sections or standalone pages, disabling query execution.                                                                                                                       | ✕        |
+| `persistentPages`       | `array`   | Array of pages that persist regardless of dynamic query results.                                                                                                                                                                           | ✕        |
+| `preventQueries`        | `boolean` | Flag to disable querying if settings data is provided externally.                                                                                                                                                                          | ✕        |
+| `refdataEndpoint`       | `string`  | The API endpoint to retrieve reference data for settings.                                                                                                                                                                                  | ✕        |
+| `renderSingleSection`   | `boolean` | When only one section is available, determines if it should be rendered as a single section with its own label.                                                                                                                            | ✕        |
+| `sectionPermission`     | `string`  | Permission string that, if provided, restricts the rendering of a section unless the current user has the specified permission.                                                                                                            | ✕        |
+| `sectionRoute`          | `string`  | Base route path to be used when constructing dynamic page routes for settings sections.                                                                                                                                                    | ✕        |
+| `sections`              | `array`   | Array of section configuration objects. Each object can override or extend the global settings props for that specific section. This means that the shape here matches more or less the shape for the props of `useSettings` itself.       | ✕        |
+| `settingEndpoint`       | `string`  | The base URL endpoint for fetching and updating settings.                                                                                                                                                                                  | ✕        |
+| `templateEndpoint`      | `string`  | The endpoint for retrieving settings templates (if applicable).                                                                                                                                                                            | ✕        |
+| `render`                | `func`    | A custom render function for rendering individual setting fields. This function is passed down to the underlying settings components for specialized display logic. See `EditableSettingsList` for more information on how render is used. | ✕        |
 
 ## Returns
 
@@ -81,4 +86,29 @@ The hook returns an object containing:
   A component pre-configured with the pages and sections that renders the settings UI. This component wraps the settings in the required `Settings` component from `@folio/stripes/smart-components`.
 
 - **`SettingsContextProvider`** (`React Component`):  
-  A context provider component for settings configuration. If only one section is available, it is provided directly; otherwise, it defaults to a pass-through provider.
+  A context provider component for settings configuration. If only one section is available, it is provided directly; otherwise, it defaults to a pass-through provider.
+
+## Performance and redraws
+Because SettingsComponent is generated within the hook, its function reference changes whenever the underlying settings data (like pageList or sections) updates.
+
+In some complex scenarios (e.g., using SearchAndSortQuery inside a settings page), this can cause the entire settings pane to unmount and remount (a "redraw"). If you experience lost input focus or flickering, instead of using the returned SettingsComponent, manually render the Settings component using the pageList or sections provided by the hook:
+
+```javascript
+import { Settings } from '@k-int/stripes-kint-components';
+
+const { isLoading, pageList, sections } = useSettings({
+  contextPerPage: false, // This should be turned off for this pattern
+  ...restOfConfig
+});
+
+if (isLoading) return null;
+
+return (
+  <Settings
+    {...props}
+    pages={pageList}
+    sections={sections}
+    paneTitle={<FormattedMessage id="my-app.settings.title" />}
+  />
+);
+```

package/src/lib/Settings/hooks/useSettings/useSettings.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-
 import { useQueries } from 'react-query';
+
 import { useOkapiKy, useStripes } from '@folio/stripes/core';
 
 // We have swapped from the stripes-smart components settings page to our own internal one.
@@ -13,12 +13,30 @@ import { SettingPage, SettingPagePane } from '../../SettingPage';
 import { SettingsContext } from '../../contexts';
 
 import { generateKiwtQueryParams, sortByLabel, toCamelCase } from '../../../utils';
-import { useKintIntl, useIntlKey } from '../../../hooks';
+import { useIntlKey, useKintIntl } from '../../../hooks';
+
+const InternalSettingsContextProvider = ({ children, contextValue }) => (
+  <SettingsContext.Provider value={contextValue}>
+    {children}
+  </SettingsContext.Provider>
+);
+
+InternalSettingsContextProvider.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  contextValue: PropTypes.object,
+};
 
 // 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,
+    // DEPRECATED This prop will eventually be set to FALSE in a breaking change.
+    // This is a LEGACY prop, which ensured each page had context pre-wrapped.
+    // This is NOT required while using Settings component within kint-components
+    // to render dynamic pages, but the dynamic pages break if context is missing with
+    // the stripes smart components model
+    // Turn this OFF if having difficulties with settings page redraws (When using SASQ in particular)
+    contextPerPage = true,
     dynamicPageExclusions,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
@@ -40,6 +58,7 @@ const useSettings = (settingsProps = {}) => {
   const ky = useOkapiKy();
   const stripes = useStripes();
   const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+  const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
 
   // Set up array of queryParams, pageLists etc etc ready for us to do all the work in a single place
 
@@ -154,50 +173,42 @@ const useSettings = (settingsProps = {}) => {
 
   const finalSections = useMemo(() => {
     return sectionMetaArray.map(((sma, idx) => {
-      const SettingsContextProvider = ({ children }) => {
-        const intlKey = useIntlKey(passedIntlKey, passedIntlNS);
-
-        const contextValue = useMemo(() => ({
-          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,
-        }), [intlKey]);
-
-        return (
-          <SettingsContext.Provider
-            value={contextValue}
-          >
-            {children}
-          </SettingsContext.Provider>
-        );
-      };
-
-      SettingsContextProvider.propTypes = {
-        children: PropTypes.oneOfType([
-          PropTypes.func,
-          PropTypes.node
-        ])
+      const contextValue = {
+        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,
       };
 
       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>
-            )
-          };
-        });
+        const finalPages = sma.pages ?? pages ??
+          (sma.persistentPages ?? persistentPages)
+            .concat(dynamicPagesFromQueryReturn.dynamic)
+            .sort(sortByLabel)
+            .map((p) => {
+              let component = p.component;
+              if (contextPerPage) {
+                component = (cprops) => (
+                  <InternalSettingsContextProvider contextValue={contextValue}>
+                    <p.component {...cprops} />
+                  </InternalSettingsContextProvider>
+                );
+              }
+
+              return {
+                ...p,
+                component,
+                Provider: InternalSettingsContextProvider,
+                contextValue,
+              };
+            });
 
         return {
           ...sma,
-          SettingsContextProvider,
+          SettingsContextProvider: InternalSettingsContextProvider,
           ...dynamicPagesFromQueryReturn,
           pageList: finalPages, // DEPRECATED Here for backwards compatibility
           pages: finalPages // ASSUMPTION MADE THAT INDICES REMAIN THE SAME
@@ -205,46 +216,47 @@ const useSettings = (settingsProps = {}) => {
       }
       return null;
     })).filter(Boolean);
-  }, [getDynamicPages, pages, passedIntlKey, passedIntlNS, persistentPages, queryReturnArray, refdataEndpoint, sectionMetaArray, sectionPermission, settingEndpoint, stripes, templateEndpoint]);
+  }, [contextPerPage, getDynamicPages, intlKey, pages, persistentPages, queryReturnArray, refdataEndpoint, sectionMetaArray, sectionPermission, settingEndpoint, stripes, templateEndpoint]);
 
-  const pageList = useMemo(() => {
+  const outputPages = useMemo(() => {
     let finalPages = null;
-    if (finalSections && finalSections.length === 1 && !renderSingleSection) {
+    if (finalSections?.length === 1 && !renderSingleSection) {
       finalPages = pages ?? finalSections[0].pages;
     }
 
     return finalPages;
   }, [finalSections, pages, renderSingleSection]);
 
-  const passedSections = useMemo(() => {
+  const outputSections = useMemo(() => {
     if (finalSections.length > 1 || (finalSections.length === 1 && renderSingleSection)) {
       return finalSections;
     }
     return null;
   }, [finalSections, renderSingleSection]);
 
-  const SettingsComponent = (props) => {
+  const SettingsComponent = useCallback((props) => {
     return (
       <Settings
-        pages={pageList}
+        pages={outputPages}
         paneTitle={
           kintIntl.formatKintMessage({
             id: 'meta.title'
           })}
-        sections={passedSections}
+        sections={outputSections}
         {...props}
       />
     );
-  };
+  }, [kintIntl, outputPages, outputSections]);
 
   return {
     isLoading,
-    pageList,
-    sections: finalSections,
+    pageList: outputPages,
+    sections: outputSections,
     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 } </>
+    SettingsContextProvider: (finalSections?.length === 1) ? finalSections[0].SettingsContextProvider : ({ children }) => <> { children } </>
   };
 };
 
 export default useSettings;
+

package/src/lib/Settings/index.js

@@ -9,6 +9,9 @@ export {
   SettingPagePane,
 } from './SettingPage';
 
+// Internal replacement for stripes-smart-components Settings component
+export { default as Settings } from './Settings';
+
 // EditableSettingsList
 export * from './EditableSettingsList';