@k-int/stripes-kint-components 5.16.0 → 5.18.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [5.18.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.17.0...v5.18.0) (2025-04-04)
+
+
+### Bug Fixes
+
+* Change README table formatting (actually a doc change, but here to try and force through a patch update pipeline on gitlab) ([d0452d1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/d0452d128297d962f39f9095f157da95faa5f061))
+* Fixed tests and running issues ([699ebcb](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/699ebcbdf66244ed6f3f816bb21f3d5d16a9a215))
+
+
+### Features
+
+* Added "render" prop which allows for specialised rendering on a setting-by-setting case in EditableSettingsList. ([9d1eaa3](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/9d1eaa316f1f1e84347f643369fa7126dd6f104b))
+
+# [5.17.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.16.0...v5.17.0) (2025-03-14)
+
+
+### Features
+
+* Added the ability to generate a custom queryNamespace on SASQLookup and SASQView components ([df68645](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/df686452ed854fffc7724bad40a6b4de2d651a42))
+
 # [5.16.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.15.0...v5.16.0) (2025-03-14)
 
 

package/LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2018-2025 Knowledge Integration Ltd
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/es/index.js

@@ -335,18 +335,6 @@ Object.keys(_hooks).forEach(function (key) {
     }
   });
 });
-var _settingsHooks = require("./lib/settingsHooks");
-Object.keys(_settingsHooks).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _settingsHooks[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _settingsHooks[key];
-    }
-  });
-});
 var _utils = require("./lib/utils");
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -373,6 +361,30 @@ Object.keys(_validators).forEach(function (key) {
 });
 var _contexts = require("./lib/contexts");
 var _SettingPage = require("./lib/SettingPage");
+var _EditableSettingsList = require("./lib/EditableSettingsList");
+Object.keys(_EditableSettingsList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _EditableSettingsList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _EditableSettingsList[key];
+    }
+  });
+});
+var _settingsHooks = require("./lib/settingsHooks");
+Object.keys(_settingsHooks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _settingsHooks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _settingsHooks[key];
+    }
+  });
+});
 var _ActionList = _interopRequireDefault(require("./lib/ActionList"));
 var _EditableRefdataList = _interopRequireDefault(require("./lib/EditableRefdataList"));
 var _EditableRefdataCategoryList = _interopRequireDefault(require("./lib/EditableRefdataCategoryList"));

package/es/lib/EditableSettingsList/EditableSettingsList.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactFinalFormArrays = require("react-final-form-arrays");
 var _reactFinalForm = require("react-final-form");
@@ -22,7 +21,8 @@ const EditableSettingsList = _ref => {
     intlNS: passedIntlNS,
     label,
     labelOverrides = {},
-    onSave
+    onSave,
+    render // Experimental idea, allow unique rendering per setting?
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, {
     enableReinitialize: true,
@@ -49,7 +49,8 @@ const EditableSettingsList = _ref => {
           label: label,
           labelOverrides: labelOverrides,
           name: "settings",
-          onSave: onSave
+          onSave: onSave,
+          render: render
         })
       });
     }

package/es/lib/EditableSettingsList/EditableSettingsListFieldArray/EditableSettingsListFieldArray.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactFinalForm = require("react-final-form");
+var _SettingField = require("../SettingField");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const EditableSettingsListField = _ref => {
+  let {
+    allowEdit,
+    data,
+    fields,
+    handleSave,
+    index,
+    intlKey,
+    intlNS,
+    labelOverrides,
+    render,
+    setting
+  } = _ref;
+  // Handle editing or not at this level
+  const [editing, setEditing] = (0, _react.useState)(false);
+  const settingData = (0, _react.useMemo)(() => ({
+    currentSetting: fields.value[index],
+    ...fields
+  }), [fields, index]);
+  const DefaultField = (0, _react.useCallback)(() => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+      allowEdit: allowEdit,
+      component: _SettingField.SettingField,
+      "data-testid": `editableSettingsListFieldArray[${index}]`,
+      editing: editing,
+      intlKey: intlKey,
+      intlNS: intlNS,
+      labelOverrides: labelOverrides,
+      name: setting,
+      onSave: () => handleSave(index),
+      setEditing: setEditing,
+      settingData: settingData
+    }, setting);
+  }, [allowEdit, editing, handleSave, index, intlKey, intlNS, labelOverrides, setting, settingData]);
+  return render({
+    allowEdit,
+    data,
+    DefaultField,
+    editing,
+    fields,
+    handleSave,
+    index,
+    intlKey,
+    intlNS,
+    setEditing,
+    setting,
+    settingData,
+    SettingFieldComponent: _SettingField.SettingField
+  });
+};
+const EditableSettingsListFieldArray = _ref2 => {
+  let {
+    allowEdit: passedAllowEdit = true,
+    data: passedData,
+    fields: passedFields,
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
+    onSave,
+    render = _ref3 => {
+      let {
+        DefaultField
+      } = _ref3;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultField, {});
+    }
+  } = _ref2;
+  const handleSave = index => {
+    const setting = passedFields.value[index];
+    return onSave(setting);
+  };
+  return passedFields.map((setting, i) => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(EditableSettingsListField, {
+      allowEdit: passedAllowEdit,
+      data: passedData,
+      fields: passedFields,
+      handleSave: handleSave,
+      index: i,
+      intlKey: passedIntlKey,
+      intlNS: passedIntlNS,
+      labelOverrides: labelOverrides,
+      render: render,
+      setting: setting
+    });
+  });
+};
+EditableSettingsListFieldArray.propTypes = {
+  allowEdit: _propTypes.default.bool,
+  fields: _propTypes.default.object,
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
+  labelOverrides: _propTypes.default.object,
+  onSave: _propTypes.default.func,
+  data: _propTypes.default.shape({
+    refdatavalues: _propTypes.default.arrayOf(_propTypes.default.object)
+  }),
+  initialValues: _propTypes.default.object
+};
+var _default = exports.default = EditableSettingsListFieldArray;

package/es/lib/EditableSettingsList/{EditableSettingsListFieldArray.test.js → EditableSettingsListFieldArray/EditableSettingsListFieldArray.test.js}

@@ -1,14 +1,13 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
 var _stripesErmTesting = require("@folio/stripes-erm-testing");
 var _reactFinalFormArrays = require("react-final-form-arrays");
 var _EditableSettingsListFieldArray = _interopRequireDefault(require("./EditableSettingsListFieldArray"));
-var _helpers = require("../../../test/jest/helpers");
+var _helpers = require("../../../../test/jest/helpers");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const onSubmit = jest.fn();
-jest.mock('./SettingField', () => ({
+jest.mock('../SettingField', () => ({
   SettingField: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: "SettingField"
   })
@@ -57,7 +56,7 @@ describe('EditableSettingsListFieldArray', () => {
       const {
         queryAllByTestId
       } = renderComponent;
-      expect(queryAllByTestId(/editableSettingsListFieldArray\[.*\]/).length).toEqual(0);
+      expect(queryAllByTestId(/editableSettingsListFieldArray\[.*]/).length).toEqual(0);
     });
   });
   describe('with initial value set', () => {

package/es/lib/EditableSettingsList/EditableSettingsListFieldArray/index.js

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

package/es/lib/EditableSettingsList/SettingField/{EditSettingValue.js → EditSettingValue/EditSettingValue.js}

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactFinalForm = require("react-final-form");
 var _components = require("@folio/stripes/components");
-var _RefdataButtons = _interopRequireDefault(require("../../RefdataButtons"));
-var _hooks = require("../../hooks");
+var _RefdataButtons = _interopRequireDefault(require("../../../RefdataButtons"));
+var _hooks = require("../../../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const EditSettingValue = props => {

package/es/lib/EditableSettingsList/SettingField/{EditSettingValue.test.js → EditSettingValue/EditSettingValue.test.js}

@@ -1,13 +1,12 @@
 "use strict";
 
-var _react = _interopRequireDefault(require("react"));
 var _stripesErmTesting = require("@folio/stripes-erm-testing");
 var _EditSettingValue = _interopRequireDefault(require("./EditSettingValue"));
-var _helpers = require("../../../../test/jest/helpers");
+var _helpers = require("../../../../../test/jest/helpers");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const onSubmit = jest.fn();
-jest.mock('../../hooks');
+jest.mock('../../../hooks');
 const stringSetting = {
   id: '12345',
   key: 'testSettingKey',

package/es/lib/EditableSettingsList/SettingField/EditSettingValue/index.js

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

package/es/lib/EditableSettingsList/SettingField/{RenderSettingValue.js → RenderSettingValue/RenderSettingValue.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _hooks = require("../../hooks");
+var _hooks = require("../../../hooks");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RenderSettingValue = props => {
   const {

package/es/lib/EditableSettingsList/SettingField/{RenderSettingValue.test.js → RenderSettingValue/RenderSettingValue.test.js}

@@ -2,10 +2,10 @@
 
 var _react = _interopRequireDefault(require("react"));
 var _RenderSettingValue = _interopRequireDefault(require("./RenderSettingValue"));
-var _helpers = require("../../../../test/jest/helpers");
+var _helpers = require("../../../../../test/jest/helpers");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-jest.mock('../../hooks');
+jest.mock('../../../hooks');
 const stringSetting = {
   id: '12345',
   key: 'testSettingKey',

package/es/lib/EditableSettingsList/SettingField/RenderSettingValue/index.js

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

package/es/lib/EditableSettingsList/SettingField/SettingField.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _components = require("@folio/stripes/components");
 var _EditSettingValue = _interopRequireDefault(require("./EditSettingValue"));
@@ -15,20 +15,19 @@ var _utils = require("../../utils");
 var _renderHelpText = _interopRequireDefault(require("../../../../styles/renderHelpText.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SettingField = settingFieldProps => {
   const {
     allowEdit = true,
+    editing,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
     onSave,
+    setEditing,
     settingData: {
       currentSetting
     } = {}
   } = settingFieldProps;
-  const [editing, setEditing] = (0, _react.useState)(false);
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
   const {
     refdataEndpoint,
@@ -42,7 +41,8 @@ const SettingField = settingFieldProps => {
     endpoint: refdataEndpoint,
     desc: currentSetting.vocab,
     queryParams: {
-      enabled: !!currentSetting?.vocab && currentSetting.settingType === 'Refdata'
+      enabled: !!currentSetting?.vocab && currentSetting.settingType === 'Refdata',
+      staleTime: 1000 * 60 * 2 // 2 minutes staletime for refdata in settings?
     }
   });
   const templates = (0, _hooks.useTemplates)({

package/es/lib/EditableSettingsList/SettingField/SettingField.test.js

@@ -24,52 +24,62 @@ const setting = {
   settingType: 'String',
   value: 'diku-shared'
 };
+const setEditing = jest.fn();
+let renderComponent;
 describe('SettingField', () => {
-  let renderComponent;
-  beforeEach(async () => {
-    renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
-      initialValues: {},
-      onSubmit: onSubmit,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
-        component: _SettingField.default,
-        name: "test",
-        onSave: onSave,
-        settingData: {
-          currentSetting: setting
-        }
-      })
-    }));
-  });
-  it('renders RenderSettingValue', async () => {
-    const {
-      getByText
-    } = renderComponent;
-    await (0, _react2.waitFor)(async () => expect(await getByText('RenderSettingValue')).toBeInTheDocument());
-  });
-  test('renders the edit button', () => {
-    (0, _stripesErmTesting.Button)('Edit').exists();
-  });
-  it('clicking edit/save works as expected', async () => {
-    const {
-      findByText
-    } = renderComponent;
-    // before clicking on edit button, we should be rendering setting value
-    await (0, _react2.waitFor)(async () => expect(await findByText('RenderSettingValue')).toBeInTheDocument());
-
-    // Clicking edit button
-    await (0, _react2.waitFor)(async () => {
-      await (0, _stripesErmTesting.Button)('Edit').click();
+  describe.each([{
+    editing: false,
+    expectedRender: 'RenderSettingValue',
+    expectedButton: 'Edit',
+    expectedCallback: setEditing
+  }, {
+    editing: true,
+    expectedRender: 'EditSettingValue',
+    expectedButton: 'Save',
+    expectedCallback: onSave
+  }])('render SettingField with editing: editing', _ref => {
+    let {
+      editing,
+      expectedButton,
+      expectedCallback,
+      expectedRender
+    } = _ref;
+    beforeEach(async () => {
+      setEditing.mockClear();
+      onSave.mockClear();
+      renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        initialValues: {},
+        onSubmit: onSubmit,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+          component: _SettingField.default,
+          editing: editing,
+          name: "test",
+          onSave: onSave,
+          setEditing: setEditing,
+          settingData: {
+            currentSetting: setting
+          }
+        })
+      }));
     });
-
-    // Should be rendering the "edit" for a setting value
-    await (0, _react2.waitFor)(async () => expect(await findByText('EditSettingValue')).toBeInTheDocument());
-
-    // Clicking save button
-    await (0, _react2.waitFor)(async () => {
-      await (0, _stripesErmTesting.Button)('Save').click();
+    it(`renders ${expectedRender}`, () => {
+      const {
+        getByText
+      } = renderComponent;
+      expect(getByText(expectedRender)).toBeInTheDocument();
+    });
+    test(`renders the ${expectedButton} button`, () => {
+      (0, _stripesErmTesting.Button)('Edit').exists();
+    });
+    describe(`clicking the ${expectedButton} button`, () => {
+      beforeEach(async () => {
+        await (0, _react2.waitFor)(async () => {
+          await (0, _stripesErmTesting.Button)(expectedButton).click();
+        });
+      });
+      it('fired expected callback', () => {
+        expect(expectedCallback).toHaveBeenCalled();
+      });
     });
-
-    // Should be rendering the setting value again
-    await (0, _react2.waitFor)(async () => expect(await findByText('RenderSettingValue')).toBeInTheDocument());
   });
 });

package/es/lib/EditableSettingsList/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "EditSettingValue", {
+  enumerable: true,
+  get: function () {
+    return _SettingField.EditSettingValue;
+  }
+});
 Object.defineProperty(exports, "EditableSettingsList", {
   enumerable: true,
   get: function () {
@@ -15,6 +21,12 @@ Object.defineProperty(exports, "EditableSettingsListFieldArray", {
     return _EditableSettingsListFieldArray.default;
   }
 });
+Object.defineProperty(exports, "RenderSettingValue", {
+  enumerable: true,
+  get: function () {
+    return _SettingField.RenderSettingValue;
+  }
+});
 Object.defineProperty(exports, "SettingField", {
   enumerable: true,
   get: function () {

package/es/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -27,6 +27,22 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
+    lookupQueryNamespaceGenerator = _ref => {
+      let {
+        currentPage,
+        namespace,
+        id: passedId,
+        query
+      } = _ref;
+      const queryNamespace = [namespace, 'SASQ'];
+      if (passedId) {
+        queryNamespace.push(passedId);
+      }
+      queryNamespace.push('viewAll');
+      queryNamespace.push(query);
+      queryNamespace.push(currentPage);
+      return queryNamespace;
+    },
     mainPaneProps = {},
     mclProps = {},
     noSearchField,
@@ -79,20 +95,21 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
   }, query ?? {}), [currentPage, fetchParameters.SASQ_MAP, query, queryParameterGenerator]);
   const [filterPaneVisible, setFilterPaneVisible] = (0, _hooks.useLocalStorageState)(filterPaneVisibileKey, true);
   const toggleFilterPane = () => setFilterPaneVisible(!filterPaneVisible);
-  const queryNamespace = [namespace, 'SASQ'];
-  if (id) {
-    queryNamespace.push(id);
-  }
-  queryNamespace.push('viewAll');
-  queryNamespace.push(query);
-  queryNamespace.push(currentPage);
   const {
     data = {},
     ...restOfQueryProps
-  } = (0, _reactQuery.useQuery)(queryNamespace, () => {
+  } = (0, _reactQuery.useQuery)(lookupQueryNamespaceGenerator({
+    currentPage,
+    endpoint: fetchParameters.endpoint,
+    namespace,
+    id,
+    query,
+    queryParams
+  }), () => {
     return ky.get(`${fetchParameters.endpoint}${queryParams}`).json();
   }, {
-    enabled: (!!query?.filters || !!query?.query) && !!currentPage
+    enabled: (!!query?.filters || !!query?.query) && !!currentPage,
+    ...(fetchParameters.queryOptions ?? {})
   });
   (0, _react.useEffect)(() => {
     if (count !== data?.totalRecords) {

package/es/lib/SASQViewComponent/SASQViewComponent.js

@@ -19,6 +19,20 @@ const SASQViewComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     match,
     path,
     ViewComponent,
+    viewQueryNamespaceGenerator = _ref2 => {
+      let {
+        namespace,
+        componentId,
+        id: passedId
+      } = _ref2;
+      const queryNamespace = [namespace, 'SASQ'];
+      if (componentId) {
+        queryNamespace.push(componentId);
+      }
+      queryNamespace.push('view');
+      queryNamespace.push(passedId);
+      return queryNamespace;
+    },
     ...props
   } = _ref;
   const {
@@ -27,17 +41,17 @@ const SASQViewComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   // If itemEndpoint is available, use that, otherwise use standard endpoint
   const endpoint = fetchParameters?.itemEndpoint ?? fetchParameters?.endpoint;
-  const queryNamespace = [namespace, 'SASQ'];
-  if (id) {
-    queryNamespace.push(id);
-  }
-  queryNamespace.push('view');
-  queryNamespace.push(match?.params?.id);
   const ky = (0, _core.useOkapiKy)();
   const {
     data = {},
     ...rest
-  } = (0, _reactQuery.useQuery)(queryNamespace, () => ky(`${endpoint}/${match?.params?.id}`).json(), {
+  } = (0, _reactQuery.useQuery)(viewQueryNamespaceGenerator({
+    componentId: id,
+    namespace,
+    endpoint,
+    id: match?.params?.id,
+    match
+  }), () => ky(`${endpoint}/${match?.params?.id}`).json(), {
     enabled: !!match?.params?.id
   });
   (0, _react.useImperativeHandle)(ref, () => ({

package/es/lib/SettingPage/SettingPage.js

@@ -21,7 +21,8 @@ const SettingPage = _ref => {
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
-    sectionName
+    sectionName,
+    render
   } = _ref;
   const {
     settingEndpoint
@@ -43,6 +44,7 @@ const SettingPage = _ref => {
     labelOverrides: labelOverrides,
     onSave: handleSubmit,
     onSubmit: handleSubmit,
+    render: render,
     settingSection: sectionName
   });
 };

package/es/lib/SettingPage/{SettingPagePane.js → SettingPagePane/SettingPagePane.js}

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _components = require("@folio/stripes/components");
-var _utils = require("../utils");
-var _hooks = require("../hooks");
+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 SettingPagePane = _ref => {