@k-int/stripes-kint-components 5.28.5 → 5.29.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [5.29.1](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.29.0...v5.29.1) (2025-11-27)
+
+
+### Bug Fixes
+
+* Settings no longer lose focus while typing ([831ea24](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/831ea247f82372f9ef7023a4e2b1b6d3391697dc))
+
+# [5.29.0](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.28.5...v5.29.0) (2025-11-27)
+
+
+### Features
+
+* **SASQLookupComponent:** hasFilterPane -- ability to turn off filter pane entirely and hand roll one. ([bdaf899](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/bdaf8998edc6f50211d740c3d010bb20dc26bc5c))
+
 ## [5.28.5](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.28.4...v5.28.5) (2025-11-24)
 
 

package/es/lib/SASQLookupComponent/SASQLookupComponent.js

@@ -35,6 +35,8 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
     FilterComponent = () => null,
     FilterPaneHeaderComponent = () => null,
     filterPaneProps = {},
+    hasFilterPane = true,
+    // Ability to entirely turn off filter pane
     id,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
@@ -210,7 +212,7 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
         if (mainPaneFirstMenu) {
           return mainPaneFirstMenu(internalStateProps);
         }
-        if (!filterPaneVisible) {
+        if (!filterPaneVisible && hasFilterPane) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PaneMenu, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_smartComponents.ExpandFilterPaneButton, {
               filterCount: filterCount,
@@ -224,7 +226,7 @@ const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
         appId: namespace,
         id: "".concat(id, "-paneset")
       }, persistedPanesetProps), {}, {
-        children: [filterPaneVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, _objectSpread(_objectSpread({
+        children: [hasFilterPane && filterPaneVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Pane, _objectSpread(_objectSpread({
           defaultWidth: "20%",
           firstMenu: filterPaneFirstMenu ? filterPaneFirstMenu(internalStateProps) : null,
           id: "".concat(id, "-filter-pane"),
@@ -328,6 +330,7 @@ SASQLookupComponent.propTypes = {
   FilterComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   FilterPaneHeaderComponent: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   queryParameterGenerator: _propTypes.default.func,
+  hasFilterPane: _propTypes.default.bool,
   id: _propTypes.default.string.isRequired,
   intlKey: _propTypes.default.string,
   intlNS: _propTypes.default.string,

package/es/lib/Settings/EditableSettingsList/EditableSettingsList.js

@@ -14,23 +14,35 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const EditableSettingsList = _ref => {
   let {
     allowEdit = true,
-    // A gloabal boolean permission to turn on/off editing of all appSettings in the frontend
-    data,
+    // A global boolean permission to turn on/off editing of all appSettings in the frontend
     initialValues,
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     label,
     labelOverrides = {},
     onSave,
-    render // Experimental idea, allow unique rendering per setting?
+    render,
+    // Experimental idea, allow unique rendering per setting?
+    settingData
   } = _ref;
+  // Fake the form save... this is super bad I know, but it's very old code and the plan is to get rid of this component
+  // Because it's in a single Form even though each setting really requires it's own form. It'd be more work to unpick that
+  // without accidentally causing some backwards compatibility issues I think. So for now we fake it
+
+  let settingToSave;
+  const handleFormSubmit = async _values => {
+    return onSave(settingToSave).then(res => {
+      settingToSave = undefined;
+      return res;
+    });
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, {
     enableReinitialize: true,
     initialValues: initialValues,
     keepDirtyOnReinitialize: true,
     mutators: _finalFormArrays.default,
     navigationCheck: true,
-    onSubmit: onSave,
+    onSubmit: handleFormSubmit,
     subscription: {
       value: true
     },
@@ -38,20 +50,26 @@ const EditableSettingsList = _ref => {
       let {
         handleSubmit
       } = _ref2;
+      // Set up the setting we want to save, then trigger handleSubmit so we get "submitting" in the form.
+      // Yes this is ugly
+      const handleSave = async setting => {
+        settingToSave = setting;
+        return handleSubmit();
+      };
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
         onSubmit: handleSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
           allowEdit: allowEdit,
           component: _EditableSettingsListFieldArray.default,
-          data: data,
           intlKey: passedIntlKey,
           intlNS: passedIntlNS,
           label: label,
           labelOverrides: labelOverrides,
           name: "settings",
-          onSave: onSave,
-          render: render
-        })
+          onSave: handleSave,
+          render: render,
+          settingData: settingData
+        }, "editable-setting-list-field-array")
       });
     }
   });

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

@@ -18,7 +18,6 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 const EditableSettingsListField = _ref => {
   let {
     allowEdit,
-    data,
     fields,
     handleSave,
     index,
@@ -26,13 +25,18 @@ const EditableSettingsListField = _ref => {
     intlNS,
     labelOverrides,
     render,
-    setting
+    setting,
+    settingData: passedSettingData
   } = _ref;
   // Handle editing or not at this level
   const [editing, setEditing] = (0, _react.useState)(false);
+  // This is really grim.
+  // Set up whether this setting is submitting or not.
+  // Submitting in the form level applies to ALL
+  const [settingSubmitting, setSettingSubmitting] = (0, _react.useState)(false);
   const settingData = (0, _react.useMemo)(() => _objectSpread({
-    currentSetting: fields.value[index]
-  }, fields), [fields, index]);
+    currentSetting: passedSettingData.settings[index]
+  }, passedSettingData), [index, passedSettingData]);
   const DefaultField = (0, _react.useCallback)(() => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
       allowEdit: allowEdit,
@@ -42,15 +46,20 @@ const EditableSettingsListField = _ref => {
       intlKey: intlKey,
       intlNS: intlNS,
       labelOverrides: labelOverrides,
-      name: setting,
-      onSave: () => handleSave(index),
+      name: "".concat(setting, ".value"),
+      onSave: handleSave,
+      parse: v => v,
       setEditing: setEditing,
-      settingData: settingData
-    }, setting);
-  }, [allowEdit, editing, handleSave, index, intlKey, intlNS, labelOverrides, setting, settingData]);
+      setSettingSubmitting: setSettingSubmitting,
+      settingData: settingData,
+      settingSubmitting: settingSubmitting
+    });
+  }, [allowEdit, editing, handleSave, index, intlKey, intlNS, labelOverrides, setting, settingData, settingSubmitting]);
+  if (!render || render instanceof Function) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultField, {}, "".concat(setting, "-default-field"));
+  }
   return render({
     allowEdit,
-    data,
     DefaultField,
     editing,
     fields,
@@ -59,44 +68,37 @@ const EditableSettingsListField = _ref => {
     intlKey,
     intlNS,
     setEditing,
+    setSettingSubmitting,
     setting,
     settingData,
-    SettingFieldComponent: _SettingField.SettingField
+    SettingFieldComponent: _SettingField.SettingField,
+    settingSubmitting
   });
 };
 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, {});
-    }
+    render,
+    settingData
   } = _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,
+      handleSave: onSave,
       index: i,
       intlKey: passedIntlKey,
       intlNS: passedIntlNS,
       labelOverrides: labelOverrides,
       render: render,
-      setting: setting
-    });
+      setting: setting,
+      settingData: settingData
+    }, setting);
   });
 };
 EditableSettingsListFieldArray.propTypes = {

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

@@ -69,7 +69,10 @@ describe('EditableSettingsListFieldArray', () => {
         onSubmit: onSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
           component: _EditableSettingsListFieldArray.default,
-          name: "settings"
+          name: "settings",
+          settingData: {
+            settings
+          }
         })
       }));
     });
@@ -90,7 +93,10 @@ describe('EditableSettingsListFieldArray', () => {
         onSubmit: onSubmit,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
           component: _EditableSettingsListFieldArray.default,
-          name: "settings"
+          name: "settings",
+          settingData: {
+            settings: multipleSettings
+          }
         })
       }));
     });

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../../../hooks");
-var _StaticSettingsField = _interopRequireDefault(require("../../../StaticSettingsField"));
+var _StaticSettingsField = require("../../../StaticSettingsField");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["currentSetting", "input", "intlKey", "intlNS", "labelOverrides"];
+const _excluded = ["currentSetting", "intlKey", "intlNS", "labelOverrides", "name"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -20,25 +21,25 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 const EditSettingValue = _ref => {
   let {
       currentSetting: setting,
-      input,
       intlKey: passedIntlKey,
       intlNS: passedIntlNS,
-      labelOverrides = {}
+      labelOverrides = {},
+      name
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
-  const fieldLabel = kintIntl.formatKintMessage({
+  const fieldLabel = (0, _react.useMemo)(() => kintIntl.formatKintMessage({
     id: 'settings.valueFor',
     overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.valueFor
   }, {
     name: setting.key
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StaticSettingsField.default, _objectSpread({
+  }), [kintIntl, labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.valueFor, setting.key]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StaticSettingsField.StaticSettingsFieldComponent, _objectSpread({
     "aria-label": fieldLabel,
     autofocus: true,
-    name: "".concat(input.name, ".value"),
+    name: name,
     setting: setting
-  }, props));
+  }, props), "static-render-function-".concat(name));
 };
 EditSettingValue.propTypes = {
   currentSetting: _propTypes.default.shape({

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

@@ -1,5 +1,6 @@
 "use strict";
 
+var _reactFinalForm = require("react-final-form");
 var _stripesErmTesting = require("@folio/stripes-erm-testing");
 var _EditSettingValue = _interopRequireDefault(require("./EditSettingValue"));
 var _helpers = require("../../../../../../test/jest/helpers");
@@ -81,11 +82,10 @@ describe('EditSettingValue', () => {
         renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {},
           onSubmit: onSubmit,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+            component: _EditSettingValue.default,
             currentSetting: stringSetting,
-            input: {
-              name: 'test'
-            }
+            name: "test"
           })
         }));
       });
@@ -103,16 +103,13 @@ describe('EditSettingValue', () => {
       beforeEach(() => {
         renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {
-            test: {
-              value: stringSetting.value
-            }
+            test: stringSetting.value
           },
           onSubmit: onSubmit,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+            component: _EditSettingValue.default,
             currentSetting: stringSetting,
-            input: {
-              name: 'test'
-            }
+            name: "test"
           })
         }));
       });
@@ -136,11 +133,10 @@ describe('EditSettingValue', () => {
         renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {},
           onSubmit: onSubmit,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+            component: _EditSettingValue.default,
             currentSetting: refdataSetting,
-            input: {
-              name: 'test'
-            },
+            name: "test",
             refdata: refdata
           })
         }));
@@ -179,16 +175,13 @@ describe('EditSettingValue', () => {
       beforeEach(() => {
         renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {
-            test: {
-              value: refdataSetting.value
-            }
+            test: refdataSetting.value
           },
           onSubmit: onSubmit,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+            component: _EditSettingValue.default,
             currentSetting: refdataSetting,
-            input: {
-              name: 'test'
-            },
+            name: "test",
             refdata: refdata
           })
         }));
@@ -228,11 +221,10 @@ describe('EditSettingValue', () => {
         renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {},
           onSubmit: onSubmit,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+            component: _EditSettingValue.default,
             currentSetting: refdataSetting,
-            input: {
-              name: 'test'
-            },
+            name: "test",
             refdata: moreRefdata
           })
         }));
@@ -274,16 +266,13 @@ describe('EditSettingValue', () => {
       beforeEach(() => {
         renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {
-            test: {
-              value: refdataSetting.value
-            }
+            test: refdataSetting.value
           },
           onSubmit: onSubmit,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+            component: _EditSettingValue.default,
             currentSetting: refdataSetting,
-            input: {
-              name: 'test'
-            },
+            name: "test",
             refdata: moreRefdata
           })
         }));
@@ -328,11 +317,10 @@ describe('EditSettingValue', () => {
         renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {},
           onSubmit: onSubmit,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+            component: _EditSettingValue.default,
             currentSetting: templateSetting,
-            input: {
-              name: 'test'
-            },
+            name: "test",
             templates: templates
           })
         }));
@@ -373,16 +361,13 @@ describe('EditSettingValue', () => {
       beforeEach(() => {
         renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
           initialValues: {
-            test: {
-              value: templateSetting.value
-            }
+            test: templateSetting.value
           },
           onSubmit: onSubmit,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditSettingValue.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+            component: _EditSettingValue.default,
             currentSetting: templateSetting,
-            input: {
-              name: 'test'
-            },
+            name: "test",
             templates: templates
           })
         }));

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactFinalForm = require("react-final-form");
 var _components = require("@folio/stripes/components");
 var _EditSettingValue = _interopRequireDefault(require("./EditSettingValue"));
 var _RenderSettingValue = _interopRequireDefault(require("./RenderSettingValue"));
@@ -27,17 +28,25 @@ const SettingField = settingFieldProps => {
     intlKey: passedIntlKey,
     intlNS: passedIntlNS,
     labelOverrides = {},
+    name,
     onSave,
     setEditing,
     settingData: {
       currentSetting
-    } = {}
+    } = {},
+    setSettingSubmitting,
+    settingSubmitting
   } = settingFieldProps;
   const kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
   const {
     refdataEndpoint,
     templateEndpoint
   } = (0, _react.useContext)(_contexts.SettingsContext);
+  const {
+    submitting,
+    invalid,
+    values
+  } = (0, _reactFinalForm.useFormState)();
   const {
     0: {
       values: refdata = []
@@ -57,7 +66,7 @@ const SettingField = settingFieldProps => {
       enabled: !!(currentSetting !== null && currentSetting !== void 0 && currentSetting.vocab) && currentSetting.settingType === 'Template'
     }
   });
-  const renderHelpText = helpTextId => {
+  const renderHelpText = (0, _react.useCallback)(helpTextId => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _renderHelpText.default.help,
       children: kintIntl.formatKintMessage({
@@ -95,33 +104,49 @@ const SettingField = settingFieldProps => {
         })
       })
     });
-  };
-  const renderEditButton = () => {
+  }, [kintIntl]);
+  const renderEditButton = (0, _react.useCallback)(() => {
     const EditText = editing ? kintIntl.formatKintMessage({
       id: 'save'
     }) : kintIntl.formatKintMessage({
       id: 'edit'
     });
     if (allowEdit) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      var _values$settings;
+      // This is unbelievably gross... this stems from this all being in a single FieldArray.
+      // We should aim to set this up in an ActionList as soon as possible
+      const settingToSave = (_values$settings = values.settings) === null || _values$settings === void 0 ? void 0 : _values$settings.find(s => s.id === currentSetting.id);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
+        disabled: editing && (submitting || invalid),
         marginBottom0: true,
         onClick: e => {
           e.preventDefault();
-          return editing ? onSave().then(() => setEditing(false)) : setEditing(true);
+          if (editing) {
+            setSettingSubmitting(true);
+            // We want to track that JUST this setting is being edited,
+            // since "Submitting" is relevant for any and all submits
+            // I hate this
+            return onSave(settingToSave).then(() => {
+              setEditing(false);
+              setSettingSubmitting(false);
+            });
+          }
+          return setEditing(true);
         },
-        children: EditText
+        children: [submitting && settingSubmitting ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {}) : null, EditText]
       });
     }
     return null;
-  };
-  let RenderFunction;
-  if (editing === false) {
-    RenderFunction = _RenderSettingValue.default;
-  } else {
-    RenderFunction = _EditSettingValue.default;
-  }
-  const id = "settings.".concat((0, _utils.toCamelCase)(currentSetting.section), ".").concat((0, _utils.toCamelCase)(currentSetting.key), ".help");
-  const renderHeaderStart = () => {
+  }, [allowEdit, currentSetting.id, editing, invalid, kintIntl, onSave, setEditing, setSettingSubmitting, settingSubmitting, submitting, values.settings]);
+  const RenderFunction = (0, _react.useMemo)(() => {
+    if (editing === false) {
+      return _RenderSettingValue.default;
+    } else {
+      return _EditSettingValue.default;
+    }
+  }, [editing]);
+  const id = (0, _react.useMemo)(() => "settings.".concat((0, _utils.toCamelCase)(currentSetting.section), ".").concat((0, _utils.toCamelCase)(currentSetting.key), ".help"), [currentSetting.key, currentSetting.section]);
+  const renderHeaderStart = (0, _react.useCallback)(() => {
     const settingName = Object.keys(currentSetting).length > 0 ? kintIntl.formatKintMessage({
       id: "settings.".concat((0, _utils.toCamelCase)(currentSetting.section), ".").concat((0, _utils.toCamelCase)(currentSetting.key))
     }) : kintIntl.formatKintMessage({
@@ -132,20 +157,21 @@ const SettingField = settingFieldProps => {
         content: renderHelpText(id)
       }), settingName]
     });
-  };
+  }, [currentSetting, id, kintIntl, renderHelpText]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Card, {
     headerEnd: renderEditButton(),
     headerStart: renderHeaderStart(),
     roundedBorder: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderFunction, _objectSpread({
       currentSetting: currentSetting,
+      disabled: submitting,
       intlKey: passedIntlKey,
       intlNS: passedIntlNS,
       labelOverrides: labelOverrides,
       refdata: refdata,
       templates: templates
-    }, settingFieldProps))
-  });
+    }, settingFieldProps), "setting-render-function-".concat(name))
+  }, "setting-edit-card-".concat(name));
 };
 SettingField.propTypes = {
   allowEdit: _propTypes.default.bool,

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

@@ -25,6 +25,7 @@ const setting = {
   value: 'diku-shared'
 };
 const setEditing = jest.fn();
+const setSettingSubmitting = jest.fn();
 let renderComponent;
 describe('SettingField', () => {
   describe.each([{
@@ -56,6 +57,7 @@ describe('SettingField', () => {
           name: "test",
           onSave: onSave,
           setEditing: setEditing,
+          setSettingSubmitting: setSettingSubmitting,
           settingData: {
             currentSetting: setting
           }

package/es/lib/Settings/SettingPage/SettingPage.js

@@ -44,6 +44,9 @@ const SettingPage = _ref => {
     onSave: handleSubmit,
     onSubmit: handleSubmit,
     render: render,
+    settingData: {
+      settings
+    },
     settingSection: sectionName
   });
 };