@k-int/stripes-kint-components 5.17.0 → 5.19.0

package/es/lib/settingsHooks/useSettingSection/index.js

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

package/es/lib/settingsHooks/{useSettingSection.js → useSettingSection/useSettingSection.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _reactQuery = require("react-query");
 var _core = require("@folio/stripes/core");
-var _utils = require("../utils");
+var _utils = require("../../utils");
 const useSettingSection = _ref => {
   let {
     sectionName,

package/es/lib/settingsHooks/useSettings/index.js

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

package/es/lib/settingsHooks/{useSettings.js → useSettings/useSettings.js}

@@ -4,19 +4,17 @@ 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 _reactQuery = require("react-query");
 var _core = require("@folio/stripes/core");
 var _smartComponents = require("@folio/stripes/smart-components");
-var _SettingPage = require("../SettingPage");
-var _contexts = require("../contexts");
-var _utils = require("../utils");
-var _hooks = require("../hooks");
+var _SettingPage = require("../../SettingPage");
+var _contexts = require("../../contexts");
+var _utils = require("../../utils");
+var _hooks = require("../../hooks");
 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; }
 // 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] : {};
@@ -40,7 +38,8 @@ const useSettings = function () {
     // 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
+    templateEndpoint,
+    render // Allow setting-by-setting rendering of fields, to allow for special treatment for a given setting key etc
   } = settingsProps;
   const ky = (0, _core.useOkapiKy)();
   const stripes = (0, _core.useStripes)();
@@ -105,6 +104,7 @@ const useSettings = function () {
   const getDynamicPages = (0, _react.useCallback)((qra, sma) => {
     const pagesFromQueryReturn = [...new Set(qra.data?.map(s => s.section))];
     const dynamic = pagesFromQueryReturn.map(page => {
+      const finalRender = sma.render ?? render;
       const finalSectionRoute = sma.sectionRoute ?? sectionRoute;
       const pageRoute = (finalSectionRoute ? `${finalSectionRoute}/` : '') + page;
       return {
@@ -122,6 +122,7 @@ const useSettings = function () {
             intlKey: passedIntlKey,
             intlNS: passedIntlNS,
             labelOverrides: labelOverrides,
+            render: finalRender,
             sectionName: page,
             ...props
           })
@@ -132,7 +133,7 @@ const useSettings = function () {
       pages: pagesFromQueryReturn,
       dynamic
     };
-  }, [allowGlobalEdit, kintIntl, labelOverrides, passedIntlKey, passedIntlNS, sectionRoute]);
+  }, [allowGlobalEdit, kintIntl, labelOverrides, passedIntlKey, passedIntlNS, render, sectionRoute]);
   (0, _react.useEffect)(() => {
     // Handle loading
     if (queryReturnArray.length > 0 && queryReturnArray.every(qra => qra.isLoading === false) && isLoading === true) {

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

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

package/package.json

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

package/src/index.js

@@ -1,9 +1,6 @@
 // Useful hooks
 export * from './lib/hooks';
 
-// Settings hooks
-export * from './lib/settingsHooks';
-
 // Useful utility stuff
 export * from './lib/utils';
 
@@ -20,6 +17,10 @@ export {
   SettingPage,
   SettingPagePane,
 } from './lib/SettingPage';
+export * from './lib/EditableSettingsList';
+
+// Settings hooks
+export * from './lib/settingsHooks';
 
 // ActionList & RefdataEditor components
 export { default as ActionList } from './lib/ActionList';
@@ -41,6 +42,10 @@ export {
   default as SearchField
 } from './lib/SearchField';
 
+export {
+  default as SearchKeyControl
+} from './lib/SearchKeyControl';
+
 // SASQRoute
 export {
   default as SASQRoute

package/src/lib/ActionList/README.md

@@ -89,21 +89,21 @@ const myRef = useRef();
 
 ## Props
 
-Name | Type | Description | default | required
---- | --- | --- | --- | ---
-actionAssigner | function | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject, ariaLabel: () => null, tooltip: 'tooltip', tooltipSub: 'tooltipSub' }`. The props `name` and `callback` are required, but `label`,  `icon`, `to` and `tooltip`/`tooltipSub` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. The `ariaLabel` prop, which can be either a static string or a function accepting the row data and returning a string, will give the associated icon button an aria-label. If a `to` prop is passed, then the resulting button will be rendered as a \<Link/> element, as per Stripes Button/IconButton. If a `tooltip` prop is passed, the actionButton will be rendered with a surrounding Stripes Tooltip, with text `tooltip` and sub `tooltipSub`. | | ✓ |
-actionCalls (DEPRECATED) | object\<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. THESE CAN NOW BE PASSED AS "callback" in the actionAssigner. | {} | ✕ |
-columnMapping | object | An object which will act on the rendered MultiColumnList headers to map the labels for each `visibleField` | | ✕ |
-contentData | array | An array of objects to render along with their actions | | ✓ |
-creatableFields | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is fillable on create or not. | | ✕ |
-createCallback | function | A callback to be used for the built in "create" action (ie "save" on a new row). Will be prioritised ahead of a `create` entry in the deprecated actionCalls prop. | {} | ✕ |
-defaultNewObject | object | An object to use when pushing a new entry into the ActionList fields, acting as a way to bootstrap defaults into new items | {} | ✕ |
-editableFields | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is editable or not. No key for a given field will be interpreted as () => true, so a field is editable by default. | | ✕ |
-fieldComponents | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take some `fieldProps` (`allValues`: The full form values, `index`: The current fieldIndex of the editing row, `key`: The object property in question, `name`: The field name for the Field component to glue properly into final-form, `rowFieldName`: The field name in final-form for the whole row object.), and returns a Field component to be used in "edit mode" for the visible field specified. | | ✕ |
-formatter | object\<function> | A "formatter" object that takes the same shape as an MCL formatter, and is used in the same way whilst a row is NOT being edited. While editing a given row, this formatter entry is ignored. | | ✕ |
-hideActionsColumn | boolean | A simple bool to hide the actions column. This will hide the actions column, unless the ActionList manages to get into a state of "editing/creating". In this case, the actions column will once again display to avoid soft locking the form. | false | ✕ |
-hideCreateButton | boolean | A simple bool to hide the create button. Default behaviour without create action is disabled. | false | ✕ |
-onRowClick | function | A function accepting an event and the row data, fired on row click. The presence of this prop will cause the MCL to take on the interactive styling | | ✕ |
-validateFields | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and either return a validate function for final-form, or null. The validate function will be passed the same properties as fieldComponents, above. THESE WILL NOT BE USED if fieldComponents are defined for the same key. | | ✕ |
-visibleFields | array\<String> | An array of strings corresponding to those fields to be displayed in the rendered MultiColumnList | | ✓ |
-...mclProps | any | Any other props supplied to ActionList will be applied to the MCL directly. *WARNING* Some MCL props may override important functionality within ActionList | | ✕ |
+| Name                     | Type              | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | default | required |
+|--------------------------|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|----------|
+| actionAssigner           | function          | A function which will be passed the entire row object, and can use that to assign an array of actions valid for that row, in the form `{ name: 'actionName', label: "Action Label", icon: 'someIcon', callback: () => null, to: toObject, ariaLabel: () => null, tooltip: 'tooltip', tooltipSub: 'tooltipSub' }`. The props `name` and `callback` are required, but `label`,  `icon`, `to` and `tooltip`/`tooltipSub` are optional props. The `callback` prop will be prioritised ahead of the deprecated actionCalls prop. The `ariaLabel` prop, which can be either a static string or a function accepting the row data and returning a string, will give the associated icon button an aria-label. If a `to` prop is passed, then the resulting button will be rendered as a \<Link/> element, as per Stripes Button/IconButton. If a `tooltip` prop is passed, the actionButton will be rendered with a surrounding Stripes Tooltip, with text `tooltip` and sub `tooltipSub`. |         | ✓        |
+| actionCalls (DEPRECATED) | object\<function> | An object with keys matching any "actions" the `actionAssigner` may have assigned (In addition to special case `create`, if relevant), and values which are functions. These functions will be handed the row as a parameter. THESE CAN NOW BE PASSED AS "callback" in the actionAssigner.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | {}      | ✕        |
+| columnMapping            | object            | An object which will act on the rendered MultiColumnList headers to map the labels for each `visibleField`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |         | ✕        |
+| contentData              | array             | An array of objects to render along with their actions                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |         | ✓        |
+| creatableFields          | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is fillable on create or not.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |         | ✕        |
+| createCallback           | function          | A callback to be used for the built in "create" action (ie "save" on a new row). Will be prioritised ahead of a `create` entry in the deprecated actionCalls prop.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | {}      | ✕        |
+| defaultNewObject         | object            | An object to use when pushing a new entry into the ActionList fields, acting as a way to bootstrap defaults into new items                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | {}      | ✕        |
+| editableFields           | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and return a boolean indicating whether that field is editable or not. No key for a given field will be interpreted as () => true, so a field is editable by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |         | ✕        |
+| fieldComponents          | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take some `fieldProps` (`allValues`: The full form values, `index`: The current fieldIndex of the editing row, `key`: The object property in question, `name`: The field name for the Field component to glue properly into final-form, `rowFieldName`: The field name in final-form for the whole row object.), and returns a Field component to be used in "edit mode" for the visible field specified.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |         | ✕        |
+| formatter                | object\<function> | A "formatter" object that takes the same shape as an MCL formatter, and is used in the same way whilst a row is NOT being edited. While editing a given row, this formatter entry is ignored.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |         | ✕        |
+| hideActionsColumn        | boolean           | A simple bool to hide the actions column. This will hide the actions column, unless the ActionList manages to get into a state of "editing/creating". In this case, the actions column will once again display to avoid soft locking the form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | false   | ✕        |
+| hideCreateButton         | boolean           | A simple bool to hide the create button. Default behaviour without create action is disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | false   | ✕        |
+| onRowClick               | function          | A function accepting an event and the row data, fired on row click. The presence of this prop will cause the MCL to take on the interactive styling                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |         | ✕        |
+| validateFields           | object\<function> | An object with keys from the `visibleFields` array, and values of functions which take the entire row object and either return a validate function for final-form, or null. The validate function will be passed the same properties as fieldComponents, above. THESE WILL NOT BE USED if fieldComponents are defined for the same key.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |         | ✕        |
+| visibleFields            | array\<String>    | An array of strings corresponding to those fields to be displayed in the rendered MultiColumnList                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |         | ✓        |
+| ...mclProps              | any               | Any other props supplied to ActionList will be applied to the MCL directly. *WARNING* Some MCL props may override important functionality within ActionList                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |         | ✕        |

package/src/lib/EditableSettingsList/EditableSettingsList.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { FieldArray } from 'react-final-form-arrays';
 import { Form } from 'react-final-form';
@@ -14,7 +13,8 @@ const EditableSettingsList = ({
   intlNS: passedIntlNS,
   label,
   labelOverrides = {},
-  onSave
+  onSave,
+  render // Experimental idea, allow unique rendering per setting?
 }) => {
   return (
     <Form
@@ -38,6 +38,7 @@ const EditableSettingsList = ({
             labelOverrides={labelOverrides}
             name="settings"
             onSave={onSave}
+            render={render}
           />
         </form>
       )}

package/src/lib/EditableSettingsList/EditableSettingsListFieldArray/EditableSettingsListFieldArray.js

@@ -0,0 +1,118 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import PropTypes from 'prop-types';
+import { Field } from 'react-final-form';
+
+import { SettingField } from '../SettingField';
+
+const EditableSettingsListField = ({
+  allowEdit,
+  data,
+  fields,
+  handleSave,
+  index,
+  intlKey,
+  intlNS,
+  labelOverrides,
+  render,
+  setting
+}) => {
+  // Handle editing or not at this level
+  const [editing, setEditing] = useState(false);
+
+  const settingData = useMemo(() => ({
+    currentSetting: fields.value[index],
+    ...fields,
+  }), [fields, index]);
+
+  const DefaultField = useCallback(() => {
+    return (
+      <Field
+        key={setting}
+        allowEdit={allowEdit}
+        component={SettingField}
+        data-testid={`editableSettingsListFieldArray[${index}]`}
+        editing={editing}
+        intlKey={intlKey}
+        intlNS={intlNS}
+        labelOverrides={labelOverrides}
+        name={setting}
+        onSave={() => handleSave(index)}
+        setEditing={setEditing}
+        settingData={settingData}
+      />
+    );
+  }, [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,
+  });
+};
+
+const EditableSettingsListFieldArray = ({
+  allowEdit: passedAllowEdit = true,
+  data: passedData,
+  fields: passedFields,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
+  onSave,
+  render = ({
+    DefaultField,
+  }) => {
+    return (
+      <DefaultField />
+    );
+  }
+}) => {
+  const handleSave = (index) => {
+    const setting = passedFields.value[index];
+    return onSave(setting);
+  };
+
+  return (
+    passedFields.map((setting, i) => {
+      return (
+        <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.bool,
+  fields: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
+  labelOverrides: PropTypes.object,
+  onSave: PropTypes.func,
+  data: PropTypes.shape({
+    refdatavalues: PropTypes.arrayOf(PropTypes.object)
+  }),
+  initialValues: PropTypes.object
+};
+
+export default EditableSettingsListFieldArray;

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

@@ -1,13 +1,11 @@
-import React from 'react';
-
 import { TestForm } from '@folio/stripes-erm-testing';
 import { FieldArray } from 'react-final-form-arrays';
 import EditableSettingsListFieldArray from './EditableSettingsListFieldArray';
 
-import { renderWithKintHarness } from '../../../test/jest/helpers';
+import { renderWithKintHarness } from '../../../../test/jest/helpers';
 
 const onSubmit = jest.fn();
-jest.mock('./SettingField', () => ({ SettingField: () => <div>SettingField</div> }));
+jest.mock('../SettingField', () => ({ SettingField: () => <div>SettingField</div> }));
 
 const settings = [{
   id: 'ff8081817d94374a017d94449a660049',
@@ -61,7 +59,7 @@ describe('EditableSettingsListFieldArray', () => {
 
     it('renders empty field', () => {
       const { queryAllByTestId } = renderComponent;
-      expect(queryAllByTestId(/editableSettingsListFieldArray\[.*\]/).length).toEqual(0);
+      expect(queryAllByTestId(/editableSettingsListFieldArray\[.*]/).length).toEqual(0);
     });
   });
 

package/src/lib/EditableSettingsList/EditableSettingsListFieldArray/README.md

@@ -0,0 +1,68 @@
+# EditableSettingsListFieldArray
+
+A component designed to render an array of settings fields, typically used within a `react-final-form` and `react-final-form-arrays` context. It iterates over an array of settings provided by `react-final-form-arrays`' `fields` object, rendering each setting using an internal `EditableSettingsListField` component. This internal component manages the display/edit state for each individual setting and uses a `SettingField` component (passed via render prop) for the actual input rendering. The component facilitates saving individual settings within the array and allows for customization of how each setting row is rendered via a `render` prop.
+
+## Basic Usage
+
+This component is intended to be used as the `component` prop for `react-final-form-arrays`'s `<FieldArray>` component.
+
+```jsx
+import { FieldArray } from 'react-final-form-arrays';
+
+const MyForm = (props) => {
+  // Example save handler - should interact with your backend/state management
+  // It's often async and should return a Promise for react-final-form
+  const handleSettingSave = (setting) => {
+    console.log('Saving setting:', setting);
+    return Promise.resolve(); // Indicate success to react-final-form
+  };
+
+  return (
+    <form onSubmit={props.handleSubmit}>
+      {/* Other form fields */}
+
+      <FieldArray
+        name="yourSettingsArrayFieldName" // The name matching your form's initialValues structure
+        component={({ fields }) => (
+          <EditableSettingsListFieldArray
+            fields={fields}
+            onSave={handleSettingSave}
+            // Optional: Pass contextual data if SettingField needs it
+            // data={{ refdatavalues: [...] }}
+            // Optional: Customize rendering per row
+            // render={({ DefaultField, editing, index, setting, ...rest }) => (
+            //   <div>
+            //     Custom Row {index}: {editing ? 'Editing' : 'Displaying'}
+            //     <DefaultField />
+            //   </div>
+            // )}
+          />
+        )}
+      />
+
+      {/* Submit button etc. */}
+      <button type="submit" disabled={props.pristine || props.submitting}>
+        Submit All Changes
+      </button>
+    </form>
+  );
+};
+
+// Remember to wrap MyForm with reduxForm or ReactFinalForm as appropriate
+```
+
+**Note:** This component relies heavily on the structure provided by `react-final-form` and `react-final-form-arrays`. The `fields` prop is expected to be the object passed by `<FieldArray>` to its `component`. The `onSave` handler should integrate with your application's data persistence logic and ideally return a `Promise` to manage submission state correctly with `react-final-form`. The actual rendering of the setting input depends on the `SettingField` component used internally (or overridden via the `render` prop).
+
+## Props
+
+| Name             | Type      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | default                    | required |
+|------------------|-----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------|----------|
+| `allowEdit`      | `boolean` | Controls whether the edit/save functionality is enabled for the settings in the list.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `true`                     | ✕        |
+| `data`           | `object`  | Arbitrary data passed down through the render prop and potentially used by the underlying `SettingField`. The example `propTypes` show a shape `{ refdatavalues: PropTypes.arrayOf(PropTypes.object) }`, often used for dropdown options.                                                                                                                                                                                                                                                                                                                                                                                                                       | `undefined`                | ✕        |
+| `fields`         | `object`  | The `fields` object provided by `react-final-form-arrays`' `<FieldArray>` component. Contains the array values and methods (`map`, `value`, `push`, `remove`, etc.).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |                            | ✓        |
+| `intlKey`        | `string`  | A base key used for generating internationalization keys/labels, passed down to `SettingField`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined`                | ✕        |
+| `intlNS`         | `string`  | The internationalization namespace used for resolving labels, passed down to `SettingField`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`                | ✕        |
+| `labelOverrides` | `object`  | An object where keys are setting names/paths and values are custom labels, allowing override of default labels generated by `SettingField`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `{}`                       | ✕        |
+| `onSave`         | `func`    | A callback function triggered when the save action is initiated for an individual setting row. It receives the specific setting object (`fields.value[index]`) being saved as its argument. Should typically return a `Promise` for `react-final-form` integration.                                                                                                                                                                                                                                                                                                                                                                                             |                            | ✓        |
+| `render`         | `func`    | A render prop function allowing customization of the rendering for *each* setting row. It receives an object containing: `allowEdit`, `data`, `DefaultField` (a pre-configured component rendering the standard `SettingField`), `editing` (boolean state of the row), `fields` (the top-level fields object), `handleSave` (the save handler for the specific row), `index`, `intlKey`, `intlNS`, `setEditing` (function to toggle edit state), `setting` (the field name/identifier for the current row), `settingData` (memoized object with `currentSetting` and `fields`), and `SettingFieldComponent` (reference to the `SettingField` component itself). | Renders `<DefaultField />` | ✕        |
+| `initialValues`  | `object`  | The initial values object for the entire form. Passed down but not directly used by `EditableSettingsListFieldArray` itself; may be needed by the underlying `SettingField`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`                | ✕        |

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

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

package/src/lib/EditableSettingsList/README.md

@@ -0,0 +1,74 @@
+# EditableSettingsList
+
+A wrapper component that sets up a `react-final-form` Form instance specifically configured for managing a list of settings. It utilizes `react-final-form-arrays`'s `<FieldArray>` component, rendering the list using the `EditableSettingsListFieldArray` component.
+
+This component simplifies rendering an editable settings list by encapsulating the necessary `react-final-form` setup, including array mutators and form configuration. It expects initial values under a specific structure and passes relevant props down to `EditableSettingsListFieldArray` for rendering and handling individual setting saves.
+
+## Basic Usage
+
+Import the component and provide it with initial values (structured correctly) and a save handler.
+
+```jsx
+const MyAppSettingsWrapper = () => {
+  // Initial settings data must be under the 'settings' key
+  const settingsInitialData = {
+    settings: [
+      { key: 'siteUrl', settingType: 'Refdata' },
+      { key: 'adminPass', settingType: 'Password' },
+      { key: 'featureFlagX', value: 'This is a string value', settingType: 'String' },
+      // ... other settings with potentially different structures/types
+      // handled by the underlying SettingField component
+    ]
+  };
+
+  // This handler receives the individual setting object when saving a single row.
+  // It's also technically wired to the form's onSubmit, though the component
+  // doesn't provide an explicit form submit button.
+  const handleSave = (settingData) => {
+    console.log('Saving setting:', settingData);
+    // Implement logic to persist the changed setting (e.g., API call)
+    // It's recommended to return a Promise for react-final-form integration.
+    // Example: return updateSettingApi(settingData);
+    return Promise.resolve();
+  };
+
+  // Example: Check user permissions
+  const userCanEditSettings = true;
+
+  return (
+    <div>
+      <h2>Application Settings</h2>
+      <EditableSettingsList
+        allowEdit={userCanEditSettings}
+        initialValues={settingsInitialData}
+        intlKey="appSettings" // Optional: for label generation
+        intlNS="settings"    // Optional: for label generation
+        onSave={handleSave}
+        // Optional: Pass contextual data if needed by SettingField
+        // data={{ refdatavalues: [...] }}
+        // Optional: Override specific labels
+        // labelOverrides={{ adminEmail: 'Administrator Email Address' }}
+      />
+    </div>
+  );
+};
+```
+
+**Note:**
+* This component depends on `react-final-form`, `react-final-form-arrays`, `final-form-arrays`, and the `EditableSettingsListFieldArray` component.
+* The `initialValues` prop **must** be an object containing a key named `settings`, and the value of `settings` must be the array of setting objects you want to manage.
+* The `onSave` function provided serves primarily as the callback for *individual* setting saves triggered within `EditableSettingsListFieldArray`. It receives the specific setting object being saved in that context.
+
+## Props
+
+| Name             | Type                           | Description                                                                                                                                                                                                                                                                                   | default     | required |
+|------------------|--------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|----------|
+| `allowEdit`      | `boolean`                      | A global flag passed down to control whether editing is enabled for all settings in the list.                                                                                                                                                                                                 | `true`      | ✕        |
+| `data`           | `object`                       | Arbitrary data to be passed down through `EditableSettingsListFieldArray` to the underlying `SettingField` component(s). Often used for context like reference data values (e.g., `{ refdatavalues: [...] }`).                                                                                | `undefined` | ✕        |
+| `initialValues`  | `object`                       | An object containing the initial values for the form. It **must** include a key named `settings` whose value is the array of setting objects.                                                                                                                                                 | `undefined` | ✓        |
+| `intlKey`        | `string`                       | A base key passed down for generating internationalization keys/labels within `EditableSettingsListFieldArray` and `SettingField`.                                                                                                                                                            | `undefined` | ✕        |
+| `intlNS`         | `string`                       | An internationalization namespace passed down for resolving labels within `EditableSettingsListFieldArray` and `SettingField`.                                                                                                                                                                | `undefined` | ✕        |
+| `label`          | `string` \| `node` \| `object` | A label for the entire settings list/section. Passed to `<FieldArray>`, but its rendering depends on downstream components/customization.                                                                                                                                                     | `undefined` | ✕        |
+| `labelOverrides` | `object`                       | An object passed down to `EditableSettingsListFieldArray` to allow overriding default labels for specific settings. Keys should match setting identifiers (e.g., `setting.key`), values are the custom labels.                                                                                | `{}`        | ✕        |
+| `onSave`         | `func`                         | Callback function triggered primarily when an *individual* setting's save action is invoked within `EditableSettingsListFieldArray`. Receives the setting object being saved. Also connected to the internal `<Form>`'s `onSubmit`. Should handle persistence and ideally return a `Promise`. | `undefined` | ✓        |
+| `render`         | `func`                         | A render prop passed down to `EditableSettingsListFieldArray` to allow full customization of how *each* setting row is rendered. See `EditableSettingsListFieldArray` documentation for details.                                                                                              | `undefined` | ✕        |

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

@@ -6,8 +6,8 @@ import {
   Select,
   TextField,
 } from '@folio/stripes/components';
-import RefdataButtons from '../../RefdataButtons';
-import { useKintIntl } from '../../hooks';
+import RefdataButtons from '../../../RefdataButtons';
+import { useKintIntl } from '../../../hooks';
 
 const EditSettingValue = (props) => {
   const {

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

@@ -1,14 +1,11 @@
-import React from 'react';
-
-
 import { TestForm } from '@folio/stripes-erm-testing';
 
 import EditSettingValue from './EditSettingValue';
 
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
+import { renderWithKintHarness } from '../../../../../test/jest/helpers';
 
 const onSubmit = jest.fn();
-jest.mock('../../hooks');
+jest.mock('../../../hooks');
 
 const stringSetting = {
   id: '12345',