@k-int/stripes-kint-components 5.29.0 → 5.30.0

package/es/lib/Settings/EditableRefdataList/EditableRefdataList.js

@@ -15,11 +15,6 @@ var _utils = require("../../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const propTypes = {
   afterQueryCalls: _propTypes.default.object,
   allowSpecial: _propTypes.default.bool,
@@ -37,7 +32,6 @@ const propTypes = {
   refdataEndpoint: _propTypes.default.string
 };
 const EditableRefdataList = _ref => {
-  var _deleteModal$refdata2;
   let {
     afterQueryCalls,
     allowSpecial = false,
@@ -92,8 +86,7 @@ const EditableRefdataList = _ref => {
   const sortByLabel = (a, b) => a.label.localeCompare(b.label);
   (0, _react.useEffect)(() => {
     if (!isRefdataLoading) {
-      var _refdata$values$sort, _refdata$values;
-      setContentData((_refdata$values$sort = refdata === null || refdata === void 0 || (_refdata$values = refdata.values) === null || _refdata$values === void 0 ? void 0 : _refdata$values.sort(sortByLabel)) !== null && _refdata$values$sort !== void 0 ? _refdata$values$sort : []);
+      setContentData(refdata?.values?.sort(sortByLabel) ?? []);
     }
   }, [isRefdataLoading, refdata]);
 
@@ -105,41 +98,39 @@ const EditableRefdataList = _ref => {
   } = (0, _hooks.useMutateRefdataValue)({
     afterQueryCalls: {
       delete: json => {
-        var _json$values$sort, _json$values;
-        setContentData((_json$values$sort = json === null || json === void 0 || (_json$values = json.values) === null || _json$values === void 0 ? void 0 : _json$values.sort(sortByLabel)) !== null && _json$values$sort !== void 0 ? _json$values$sort : []);
-        if (afterQueryCalls !== null && afterQueryCalls !== void 0 && afterQueryCalls.delete) {
+        setContentData(json?.values?.sort(sortByLabel) ?? []);
+        if (afterQueryCalls?.delete) {
           afterQueryCalls.delete(json);
         }
       },
       put: json => {
-        var _json$values$sort2, _json$values2;
-        setContentData((_json$values$sort2 = json === null || json === void 0 || (_json$values2 = json.values) === null || _json$values2 === void 0 ? void 0 : _json$values2.sort(sortByLabel)) !== null && _json$values$sort2 !== void 0 ? _json$values$sort2 : []);
-        if (afterQueryCalls !== null && afterQueryCalls !== void 0 && afterQueryCalls.put) {
+        setContentData(json?.values?.sort(sortByLabel) ?? []);
+        if (afterQueryCalls?.put) {
           afterQueryCalls.put(json);
         }
       }
     },
-    catchQueryCalls: _objectSpread({
+    catchQueryCalls: {
       // Default delete behaviour is to fire a callout, either with kint-components default message
       // or one provided in labelOverrides, which is passed the error message and refdata in question
       delete: async err => {
-        var _deleteModal$refdata;
         const errorResp = await (0, _utils.parseErrorResponse)(err.response);
         // console.log('ERRORRESP: %o', errorResp);
         callout.sendCallout({
           message: kintIntl.formatKintMessage({
             id: 'refdata.deleteRefdataValue.errorMessage',
-            overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.deleteError
+            overrideValue: labelOverrides?.deleteError
           }, {
-            label: deleteModal === null || deleteModal === void 0 || (_deleteModal$refdata = deleteModal.refdata) === null || _deleteModal$refdata === void 0 ? void 0 : _deleteModal$refdata.label,
-            error: errorResp === null || errorResp === void 0 ? void 0 : errorResp.message
+            label: deleteModal?.refdata?.label,
+            error: errorResp?.message
           }),
           type: 'error'
         });
-      }
-    }, catchQueryCalls),
+      },
+      ...catchQueryCalls // override defaults here
+    },
     endpoint: refdataEndpoint,
-    id: refdata === null || refdata === void 0 ? void 0 : refdata.id,
+    id: refdata?.id,
     queryParams: {
       delete: {
         enabled: !!refdata
@@ -161,24 +152,24 @@ const EditableRefdataList = _ref => {
         name: 'edit',
         label: kintIntl.formatKintMessage({
           id: 'edit',
-          overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.edit
+          overrideValue: labelOverrides?.edit
         }),
         icon: 'edit',
         callback: data => editRefdataValue(data),
         ariaLabel: data => kintIntl.formatKintMessage({
           id: 'refdata.editAriaLabel',
-          overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.editAriaLabel
+          overrideValue: labelOverrides?.editAriaLabel
         }, {
-          label: data === null || data === void 0 ? void 0 : data.label
+          label: data?.label
         })
       });
     }
-    if (!(refdata !== null && refdata !== void 0 && refdata.internal) && deleteCondition) {
+    if (!refdata?.internal && deleteCondition) {
       actionArray.push({
         name: 'delete',
         label: kintIntl.formatKintMessage({
           id: 'delete',
-          overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.delete
+          overrideValue: labelOverrides?.delete
         }),
         icon: 'trash',
         callback: data => setDeleteModal({
@@ -187,9 +178,9 @@ const EditableRefdataList = _ref => {
         }),
         ariaLabel: data => kintIntl.formatKintMessage({
           id: 'refdata.deleteAriaLabel',
-          overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.deleteAriaLabel
+          overrideValue: labelOverrides?.deleteAriaLabel
         }, {
-          label: data === null || data === void 0 ? void 0 : data.label
+          label: data?.label
         })
       });
     }
@@ -201,25 +192,25 @@ const EditableRefdataList = _ref => {
       columnMapping: {
         label: kintIntl.formatKintMessage({
           id: 'refdata.label',
-          overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.label
+          overrideValue: labelOverrides?.label
         }),
         value: kintIntl.formatKintMessage({
           id: 'refdata.value',
-          overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.value
+          overrideValue: labelOverrides?.value
         })
       },
       contentData: contentData,
       creatableFields: {
         value: () => false
       },
-      createCallback: !createCondition || refdata !== null && refdata !== void 0 && refdata.internal ? null : data => {
+      createCallback: !createCondition || refdata?.internal ? null : data => {
         if (allowSpecial) {
           editRefdataValue(data);
         } else {
-          var _selectorSafe;
-          editRefdataValue(_objectSpread(_objectSpread({}, data), {}, {
-            value: (_selectorSafe = (0, _utils.selectorSafe)(data === null || data === void 0 ? void 0 : data.label)) === null || _selectorSafe === void 0 ? void 0 : _selectorSafe.replaceAll('%20', ' ')
-          }));
+          editRefdataValue({
+            ...data,
+            value: (0, _utils.selectorSafe)(data?.label)?.replaceAll('%20', ' ')
+          });
         }
       },
       editableFields: {
@@ -235,31 +226,30 @@ const EditableRefdataList = _ref => {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ConfirmationModal, {
       confirmLabel: kintIntl.formatKintMessage({
         id: 'delete',
-        overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.delete
+        overrideValue: labelOverrides?.delete
       }),
       heading: kintIntl.formatKintMessage({
         id: 'refdata.deleteRefdataValue',
-        overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.deleteRefdataValue
+        overrideValue: labelOverrides?.deleteRefdataValue
       }),
       message: kintIntl.formatKintMessage({
         id: 'refdata.deleteRefdataValue.confirmMessage',
-        overrideValue: labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.deleteRefdataValueMessage
+        overrideValue: labelOverrides?.deleteRefdataValueMessage
       }, {
-        name: deleteModal === null || deleteModal === void 0 || (_deleteModal$refdata2 = deleteModal.refdata) === null || _deleteModal$refdata2 === void 0 ? void 0 : _deleteModal$refdata2.label
+        name: deleteModal?.refdata?.label
       }),
       onCancel: () => setDeleteModal({
         visible: false,
         refdata: null
       }),
       onConfirm: () => {
-        var _deleteModal$refdata3;
-        deleteRefdataValue(deleteModal === null || deleteModal === void 0 || (_deleteModal$refdata3 = deleteModal.refdata) === null || _deleteModal$refdata3 === void 0 ? void 0 : _deleteModal$refdata3.id);
+        deleteRefdataValue(deleteModal?.refdata?.id);
         setDeleteModal({
           visible: false,
           refdata: null
         });
       },
-      open: deleteModal === null || deleteModal === void 0 ? void 0 : deleteModal.visible
+      open: deleteModal?.visible
     })]
   });
 };

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

@@ -10,15 +10,9 @@ 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 }; }
-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; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const EditableSettingsListField = _ref => {
   let {
     allowEdit,
-    data,
     fields,
     handleSave,
     index,
@@ -26,31 +20,42 @@ 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);
-  const settingData = (0, _react.useMemo)(() => _objectSpread({
-    currentSetting: fields.value[index]
-  }, fields), [fields, index]);
+  // 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)(() => ({
+    currentSetting: passedSettingData.settings[index],
+    ...passedSettingData
+  }), [index, passedSettingData]);
   const DefaultField = (0, _react.useCallback)(() => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
       allowEdit: allowEdit,
       component: _SettingField.SettingField,
-      "data-testid": "editableSettingsListFieldArray[".concat(index, "]"),
+      "data-testid": `editableSettingsListFieldArray[${index}]`,
       editing: editing,
       intlKey: intlKey,
       intlNS: intlNS,
       labelOverrides: labelOverrides,
-      name: setting,
-      onSave: () => handleSave(index),
+      name: `${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, {}, `${setting}-default-field`);
+  }
   return render({
     allowEdit,
-    data,
     DefaultField,
     editing,
     fields,
@@ -59,44 +64,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,41 +4,35 @@ 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"];
 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; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const EditSettingValue = _ref => {
   let {
-      currentSetting: setting,
-      input,
-      intlKey: passedIntlKey,
-      intlNS: passedIntlNS,
-      labelOverrides = {}
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+    currentSetting: setting,
+    intlKey: passedIntlKey,
+    intlNS: passedIntlNS,
+    labelOverrides = {},
+    name,
+    ...props
+  } = _ref;
   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
+    overrideValue: labelOverrides?.valueFor
   }, {
     name: setting.key
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StaticSettingsField.default, _objectSpread({
+  }), [kintIntl, labelOverrides?.valueFor, setting.key]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StaticSettingsField.StaticSettingsFieldComponent, {
     "aria-label": fieldLabel,
     autofocus: true,
-    name: "".concat(input.name, ".value"),
-    setting: setting
-  }, props));
+    name: name,
+    setting: setting,
+    ...props
+  }, `static-render-function-${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
           })
         }));