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

package/CHANGELOG.md

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.14.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 } </>
   };
 };