@k-int/stripes-kint-components 2.3.3 → 2.5.0

package/CHANGELOG.md

@@ -1,15 +1,29 @@
-## 2.3.3 2022-04-04
-  * Fixed inconsistent `retiredName` labelOverride function behaviour, where in `filters` the function accepted the name, and in `view` the function accepted the entire object. The behaviour has been standardised to be the name alone in both scenarios.
-  * Fixed improper custom property count behaviour in view mode, now only _set_ primary properties are included in the count.
+## 2.5.0 In progress
+  * Added FilterConfig support to generateKiwtQueryParams
+  * Added a way to trigger inline creation externally through refs and useImperativeHandle
+  * Fix for ActionList editing. When a formatter was in place and a field was not editable, the formatter was ignored.
+  * Added disabled prop to create button so it is no longer to create infinite new rows, or enter create while editing another row.
+  * "Show filters" button on SASQ main pane still displayed when filters are visible
+  * AppSettings now use generateKiwtQueryParams and are not limitied to 10.
+  * FormModal now disables default footer button when form is invalid/prisitn/submitting (Submit handler must be asyncronous for submitting to be parsed correctly)
+  * Typedown labels are now accessible
 
-## 2.3.2 2022-04-01
+## 2.4.0 2022-04-21
+  * Custom Property component fixes
   * Fix to actionAssigner callback pattern
   * Tweak to remove marginBottom0 warning
   * FormModal buttons have marginBottom0 prop on them now
   * Fixed issue where cusotm property updates would not be reflected on the open view pane in settings
-
-## 2.3.1 2022-03-28
-  * Custom Property component fixes
+  * Fixed inconsistent `retiredName` labelOverride function behaviour, where in `filters` the function accepted the name, and in `view` the function accepted the entire object. The behaviour has been standardised to be the name alone in both scenarios.
+  * Fixed improper custom property count behaviour in view mode, now only _set_ primary properties are included in the count.
+  * ActionListFieldArray changed autofocus to autoFocus to avoid react console noise
+  * Refactored SASQ Components to fix various bugs/oddities
+    * TableBody default now exported as SASQTableBody from module
+    * Table now no longer redraws on row click
+    * Formatting tweaks to fix horizontal scroll issue
+    * Manually clearing the search field now has the same effect as clicking the "x" button to clear, ensuring the items are refetched without a search term.
+    * Implementor can pass props to the filter pane via "filterPaneProps" on SASQRoute/SASQLookupComponent
+    * boldString, highlightString, matchString util functions
 
 ## 2.3.0 2022-03-25
   * FormModal

package/README.md

@@ -10,10 +10,23 @@ This repository is available as a public NPM and is pre-transpiled, so it should
 
 In the case where components from this repository require translations, it will need to be added to the `stripesDeps` array in the implementing module's `package.json`.
 
+## Development
+In order to develop this module within a stripes workspace, a couple of steps are needed
+- An environment variable must be set up (See https://chlee.co/how-to-setup-environment-variables-for-windows-mac-and-linux/), `STRIPES_TRANSPILE_TOKENS="@k-int"`
+- Clone this repository `git clone git@gitlab.com:knowledge-integration/folio/stripes-kint-components.git`
+- Delete all the `devDependencies` in your local package.json. (DO NOT MERGE THESE CHANGES BACK TO MASTER)
+- Nuke your workspace node_modules and rebuild
+
+### What went wrong
+- If you aren't seeing changes take effect double check
+  - Your environment variable is definitely set `printenv STRIPES_TRANSPILE_TOKENS` on Linux, Windows may differ
+  - The `es` directory does not exist inside your local copy of kint-components. When built, this directory is constructed, and will take precedence if present, so if present, always delete for development work
+- If you aren't seeing translations properly, ensure stripes-kint-components is present in the stripesDeps of your implementing module
+
 ## Documentation
 The gitlab repository for this project can be found [here](https://gitlab.com/knowledge-integration/folio/stripes-kint-components).
 
 ### Quick links
   - [Components](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/-/tree/main/src/lib)
   - [Hooks](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/-/tree/main/src/lib/hooks)
-  - [Utility functions](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/-/tree/main/src/lib/utils)
+  - [Utility functions](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/-/tree/main/src/lib/utils)

package/es/index.js

@@ -140,7 +140,7 @@ Object.defineProperty(exports, "RefdataButtons", {
 Object.defineProperty(exports, "SASQLookupComponent", {
   enumerable: true,
   get: function get() {
-    return _SASQLookupComponent.default;
+    return _SASQLookupComponent.SASQLookupComponent;
   }
 });
 Object.defineProperty(exports, "SASQRoute", {
@@ -149,6 +149,12 @@ Object.defineProperty(exports, "SASQRoute", {
     return _SASQRoute.default;
   }
 });
+Object.defineProperty(exports, "SASQTableBody", {
+  enumerable: true,
+  get: function get() {
+    return _SASQLookupComponent.TableBody;
+  }
+});
 Object.defineProperty(exports, "SASQViewComponent", {
   enumerable: true,
   get: function get() {
@@ -185,6 +191,12 @@ Object.defineProperty(exports, "Typedown", {
     return _Typedown.default;
   }
 });
+Object.defineProperty(exports, "boldString", {
+  enumerable: true,
+  get: function get() {
+    return _utils.boldString;
+  }
+});
 Object.defineProperty(exports, "composeValidators", {
   enumerable: true,
   get: function get() {
@@ -210,12 +222,24 @@ Object.defineProperty(exports, "groupCustomPropertiesByCtx", {
     return _utils.groupCustomPropertiesByCtx;
   }
 });
+Object.defineProperty(exports, "highlightString", {
+  enumerable: true,
+  get: function get() {
+    return _utils.highlightString;
+  }
+});
 Object.defineProperty(exports, "invalidNumber", {
   enumerable: true,
   get: function get() {
     return _validators.invalidNumber;
   }
 });
+Object.defineProperty(exports, "matchString", {
+  enumerable: true,
+  get: function get() {
+    return _utils.matchString;
+  }
+});
 Object.defineProperty(exports, "refdataOptions", {
   enumerable: true,
   get: function get() {
@@ -371,7 +395,7 @@ var _SearchField = _interopRequireDefault(require("./lib/SearchField"));
 
 var _SASQRoute = _interopRequireDefault(require("./lib/SASQRoute"));
 
-var _SASQLookupComponent = _interopRequireDefault(require("./lib/SASQLookupComponent"));
+var _SASQLookupComponent = require("./lib/SASQLookupComponent");
 
 var _SASQViewComponent = _interopRequireDefault(require("./lib/SASQViewComponent"));
 

package/es/lib/ActionList/ActionList.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,10 +21,14 @@ var _ActionListFieldArray = _interopRequireDefault(require("./ActionListFieldArr
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["actionAssigner", "actionCalls", "columnMapping", "contentData", "creatableFields", "createCallback", "editableFields", "fieldComponents", "hideCreateButton", "visibleFields"];
+var _excluded = ["actionAssigner", "actionCalls", "columnMapping", "contentData", "creatableFields", "createCallback", "editableFields", "fieldComponents", "hideCreateButton", "label", "visibleFields"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 (function () {
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
@@ -52,10 +58,10 @@ var propTypes = {
   editableFields: _propTypes.default.object,
   fieldComponents: _propTypes.default.object,
   hideCreateButton: _propTypes.default.bool,
+  label: _propTypes.default.string,
   visibleFields: _propTypes.default.arrayOf(_propTypes.default.string)
 };
-
-var ActionList = function ActionList(_ref) {
+var ActionList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var actionAssigner = _ref.actionAssigner,
       _ref$actionCalls = _ref.actionCalls,
       actionCalls = _ref$actionCalls === void 0 ? {} : _ref$actionCalls,
@@ -69,9 +75,16 @@ var ActionList = function ActionList(_ref) {
       _ref$fieldComponents = _ref.fieldComponents,
       fieldComponents = _ref$fieldComponents === void 0 ? {} : _ref$fieldComponents,
       hideCreateButton = _ref.hideCreateButton,
+      label = _ref.label,
       visibleFields = _ref.visibleFields,
       mclProps = _objectWithoutProperties(_ref, _excluded);
 
+  var ActionListFieldArrayWithRef = function ActionListFieldArrayWithRef(alfaProps) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionListFieldArray.default, _objectSpread({
+      ref: ref
+    }, alfaProps));
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, {
       enableReinitialize: true,
@@ -94,12 +107,13 @@ var ActionList = function ActionList(_ref) {
             actionAssigner: actionAssigner,
             actionCalls: actionCalls,
             columnMapping: columnMapping,
-            component: _ActionListFieldArray.default,
+            component: ActionListFieldArrayWithRef,
             creatableFields: creatableFields,
             createCallback: createCallback,
             editableFields: editableFields,
             fieldComponents: fieldComponents,
             hideCreateButton: hideCreateButton,
+            label: label,
             name: "contentData",
             visibleFields: visibleFields
           }, mclProps))
@@ -107,8 +121,7 @@ var ActionList = function ActionList(_ref) {
       }
     })
   });
-};
-
+});
 ActionList.propTypes = propTypes;
 var _default = ActionList;
 var _default2 = _default;

package/es/lib/ActionList/ActionListFieldArray.js

@@ -23,9 +23,9 @@ var _ActionListFieldArray = _interopRequireDefault(require("../../../styles/Acti
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["actionAssigner", "actionCalls", "columnMapping", "creatableFields", "createCallback", "editableFields", "fields", "fieldComponents", "hideCreateButton", "visibleFields"],
-    _excluded2 = ["actionListActions"],
-    _excluded3 = ["actionListActions"],
+var _excluded = ["actionAssigner", "actionCalls", "columnMapping", "creatableFields", "createCallback", "editableFields", "fields", "fieldComponents", "hideCreateButton", "label", "visibleFields"],
+    _excluded2 = ["actionListActions", "fieldName", "fieldIndex"],
+    _excluded3 = ["actionListActions", "fieldName", "fieldIndex"],
     _excluded4 = ["actionListActions"],
     _excluded5 = ["formatter"];
 
@@ -48,8 +48,6 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -90,10 +88,10 @@ var propTypes = {
   fieldComponents: _propTypes.default.object,
   formatter: _propTypes.default.object,
   hideCreateButton: _propTypes.default.bool,
+  label: _propTypes.default.string,
   visibleFields: _propTypes.default.arrayOf(_propTypes.default.string)
 };
-
-var ActionListFieldArray = function ActionListFieldArray(_ref) {
+var ActionListFieldArray = /*#__PURE__*/(0, _react.forwardRef)(__signature__(function (_ref, ref) {
   var actionAssigner = _ref.actionAssigner,
       actionCalls = _ref.actionCalls,
       columnMapping = _ref.columnMapping,
@@ -104,6 +102,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
       fieldComponents = _ref.fieldComponents,
       _ref$hideCreateButton = _ref.hideCreateButton,
       hideCreateButton = _ref$hideCreateButton === void 0 ? false : _ref$hideCreateButton,
+      label = _ref.label,
       visibleFields = _ref.visibleFields,
       mclProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -141,6 +140,8 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
 
     var _fields$value$index = fields.value[index],
         _a = _fields$value$index.actionListActions,
+        _fn = _fields$value$index.fieldName,
+        _fi = _fields$value$index.fieldIndex,
         rowData = _objectWithoutProperties(_fields$value$index, _excluded2); // Find "edit" entry in actionAssigner
 
 
@@ -158,6 +159,8 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
   var handleCreate = function handleCreate(index) {
     var _fields$value$index2 = fields.value[index],
         _a = _fields$value$index2.actionListActions,
+        _fn = _fields$value$index2.fieldName,
+        _fi = _fields$value$index2.fieldIndex,
         rowData = _objectWithoutProperties(_fields$value$index2, _excluded3);
 
     if (createCallback) {
@@ -167,6 +170,19 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
     }
   };
 
+  var handleClickCreate = function handleClickCreate() {
+    toggleEditing('NEW_ROW');
+    fields.push({});
+  }; // Way to go into create mode from external component, and way to tell internal editing state
+
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      create: handleClickCreate,
+      editing: editing
+    };
+  });
+
   var getColumnWidths = function getColumnWidths() {
     var widthNotInUseByActions = editing ? TOTAL_WIDTH - EDITING_ACTIONS_WIDTH : TOTAL_WIDTH - NON_EDITING_ACTIONS_WIDTH;
     var staticWidth = widthNotInUseByActions / visibleFields.length;
@@ -280,66 +296,15 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
     });
   };
 
-  var formatContent = function formatContent() {
+  var assignActions = function assignActions() {
     return fields.map(function (fieldName, fieldIndex) {
       // Fetch the content from the field Values
       var cd = (0, _get.default)(values, fieldName);
-      cd.actionListActions = actionAssigner(cd); // Row is being edited if it has no id, or its id is in the editing string
-
-      var editingRow = cd.id === editing || !cd.id;
-
-      var returnObj = _objectSpread({}, cd); // If editing, replace values with fields
-
-
-      if (editingRow) {
-        /*
-          Check if the property is a visible field.
-          If it is not then we don't allow editing in this component.
-        */
-        var _iterator = _createForOfIteratorHelper(visibleFields),
-            _step;
-
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var _editableFields$key, _creatableFields$key;
-
-            var key = _step.value;
-            var editFunction = (_editableFields$key = editableFields[key]) !== null && _editableFields$key !== void 0 ? _editableFields$key : function () {
-              return true;
-            };
-            var createFunction = (_creatableFields$key = creatableFields[key]) !== null && _creatableFields$key !== void 0 ? _creatableFields$key : function () {
-              return true;
-            };
-            /*
-              Next check if this is a new row, if so we should run the createableField function with the data.
-              If it is not a new row, then we run the editableField function with the data,
-              and it should return true/false
-               For both checks
-              true => Field, false => display value
-            */
-
-            if (!cd.id && createFunction(cd) || editFunction(cd)) {
-              returnObj[key] = fieldComponents[key] ? fieldComponents[key]({
-                name: "".concat(fieldName, ".").concat(key)
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
-                autofocus: fieldIndex === 0,
-                component: _components.TextField,
-                marginBottom0: true,
-                name: "".concat(fieldName, ".").concat(key),
-                parse: function parse(v) {
-                  return v;
-                }
-              });
-            }
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
-      }
-
-      return returnObj;
+      cd.actionListActions = actionAssigner(cd);
+      return _objectSpread(_objectSpread({}, cd), {}, {
+        fieldName: fieldName,
+        fieldIndex: fieldIndex
+      });
     });
   };
 
@@ -353,11 +318,47 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
     visibleFields.forEach(function (key) {
       returnObj[key] = function (cd) {
         // Row is being edited if it has no id, or its id is in the editing string
-        var editingRow = cd.id === editing || !cd.id; // If not editing, use the passed formatter values
+        var editingRow = cd.id === editing || !cd.id; // Default to the passed formatter values
 
-        var returnValue = cd[key];
+        var returnValue = formatter !== null && formatter !== void 0 && formatter[key] ? formatter[key](cd) : cd[key]; // If editing, replace values with fields
+
+        if (editingRow) {
+          var _editableFields$key, _creatableFields$key;
+
+          /*
+            Check if the property is a visible field.
+            If it is not then we don't allow editing in this component.
+          */
+          var editFunction = (_editableFields$key = editableFields[key]) !== null && _editableFields$key !== void 0 ? _editableFields$key : function () {
+            return true;
+          };
+          var createFunction = (_creatableFields$key = creatableFields[key]) !== null && _creatableFields$key !== void 0 ? _creatableFields$key : function () {
+            return true;
+          };
+          /*
+            Next check if this is a new row, if so we should run the createableField function with the data.
+            If it is not a new row, then we run the editableField function with the data,
+            and it should return true/false
+             For both checks
+            true => Field, false => display value
+          */
+
+          if (!cd.id && createFunction(cd) || editFunction(cd)) {
+            returnValue = fieldComponents[key] ? fieldComponents[key]({
+              name: "".concat(cd.fieldName, ".").concat(key)
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+              autoFocus: cd.fieldIndex === 0,
+              component: _components.TextField,
+              marginBottom0: true,
+              name: "".concat(cd.fieldName, ".").concat(key),
+              parse: function parse(v) {
+                return v;
+              }
+            });
+          }
+        }
 
-        if (!editingRow && formatter !== null && formatter !== void 0 && formatter[key]) {
+        if (formatter !== null && formatter !== void 0 && formatter[key]) {
           returnValue = formatter[key](cd);
         }
 
@@ -368,17 +369,20 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [!hideCreateButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
-      buttonClass: _ActionListFieldArray.default.buttonRight,
-      disabled: !actionCalls.create && !createCallback // DEPRECATED actionCalls
-      ,
-      onClick: function onClick() {
-        toggleEditing('NEW_ROW');
-        fields.push({});
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-        id: "stripes-kint-components.actionList.create"
-      })
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _ActionListFieldArray.default.header,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Headline, {
+        className: _ActionListFieldArray.default.headerText,
+        children: label
+      }), !hideCreateButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        disabled: editing || !actionCalls.create && !createCallback // DEPRECATED actionCalls
+        ,
+        marginBottom0: true,
+        onClick: handleClickCreate,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+          id: "stripes-kint-components.actionList.create"
+        })
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MultiColumnList, _objectSpread({
       columnMapping: _objectSpread(_objectSpread({}, columnMapping), {}, {
         actionListActions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
@@ -386,7 +390,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
         })
       }),
       columnWidths: getColumnWidths(),
-      contentData: formatContent(),
+      contentData: assignActions(),
       formatter: _objectSpread({
         actionListActions: renderActionButtons
       }, fieldAwareFormatter()),
@@ -394,12 +398,9 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
       visibleColumns: [].concat(_toConsumableArray(visibleFields), ['actionListActions'])
     }, restOfMclProps))]
   });
-};
-
-__signature__(ActionListFieldArray, "useForm{{ change }}\nuseFormState{{ initialValues, pristine, submitting, values }}\nuseState{[editing, setEditing](null)}", function () {
-  return [_reactFinalForm.useForm, _reactFinalForm.useFormState];
-});
-
+}, "useForm{{ change }}\nuseFormState{{ initialValues, pristine, submitting, values }}\nuseState{[editing, setEditing](null)}\nuseImperativeHandle{}", function () {
+  return [_reactFinalForm.useForm, _reactFinalForm.useFormState, _react.useImperativeHandle];
+}));
 ActionListFieldArray.propTypes = propTypes;
 var _default = ActionListFieldArray;
 var _default2 = _default;

package/es/lib/CustomProperties/Config/CustomPropertiesSettings.js

@@ -15,8 +15,6 @@ var _reactIntl = require("react-intl");
 
 var _reactQuery = require("react-query");
 
-var _reactIntlSafeHtml = _interopRequireDefault(require("@folio/react-intl-safe-html"));
-
 var _components = require("@folio/stripes/components");
 
 var _FormModal = _interopRequireDefault(require("../../FormModal/FormModal"));
@@ -269,7 +267,7 @@ var CustomPropertiesSettings = function CustomPropertiesSettings(_ref) {
         id: "stripes-kint-components.customProperties.delete.confirmHeading"
       }),
       id: "delete-job-confirmation",
-      message: (_labelOverrides$confi3 = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.confirmMessage) !== null && _labelOverrides$confi3 !== void 0 ? _labelOverrides$confi3 : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntlSafeHtml.default, {
+      message: (_labelOverrides$confi3 = labelOverrides === null || labelOverrides === void 0 ? void 0 : labelOverrides.confirmMessage) !== null && _labelOverrides$confi3 !== void 0 ? _labelOverrides$confi3 : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
         id: "stripes-kint-components.customProperties.delete.confirmMessage",
         values: {
           name: customProperty === null || customProperty === void 0 ? void 0 : customProperty.name

package/es/lib/CustomProperties/View/CustomPropertyCard.js

@@ -133,7 +133,7 @@ var CustomPropertyCard = function CustomPropertyCard(_ref) {
           }),
           children: renderValue()
         })
-      }), customProperty !== null && customProperty !== void 0 && customProperty.internalNote ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
+      }), customProperty !== null && customProperty !== void 0 && customProperty.note ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
         xs: 6,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.KeyValue, {
           label: (_labelOverrides$inter3 = labelOverrides.internalNote) !== null && _labelOverrides$inter3 !== void 0 ? _labelOverrides$inter3 : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
@@ -143,7 +143,7 @@ var CustomPropertyCard = function CustomPropertyCard(_ref) {
             style: {
               whiteSpace: 'pre-wrap'
             },
-            children: customProperty.internalNote
+            children: customProperty.note
           })
         })
       }) : null]

package/es/lib/EditableRefdataList/EditableRefdataList.js

@@ -48,11 +48,13 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 
 var propTypes = {
   desc: _propTypes.default.string,
+  label: _propTypes.default.string,
   refdataEndpoint: _propTypes.default.string
 };
 
 var EditableRefdataList = function EditableRefdataList(_ref) {
   var desc = _ref.desc,
+      label = _ref.label,
       refdataEndpoint = _ref.refdataEndpoint;
 
   /* A component that allows for editing of refdata values */
@@ -169,6 +171,7 @@ var EditableRefdataList = function EditableRefdataList(_ref) {
         return false;
       }
     },
+    label: label,
     visibleFields: ['label', 'value']
   });
 };

package/es/lib/EditableSettingsList/EditableSettingsList.js

@@ -33,6 +33,7 @@ var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoader
 var EditableSettingsList = function EditableSettingsList(_ref) {
   var data = _ref.data,
       initialValues = _ref.initialValues,
+      label = _ref.label,
       onSave = _ref.onSave;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, {
     enableReinitialize: true,
@@ -51,6 +52,7 @@ var EditableSettingsList = function EditableSettingsList(_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
           component: _EditableSettingsListFieldArray.default,
           data: data,
+          label: label,
           name: "settings",
           onSave: onSave
         })
@@ -64,7 +66,8 @@ EditableSettingsList.propTypes = {
   data: _propTypes.default.shape({
     refdatavalues: _propTypes.default.arrayOf(_propTypes.default.object)
   }),
-  initialValues: _propTypes.default.object
+  initialValues: _propTypes.default.object,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.object])
 };
 var _default = EditableSettingsList;
 var _default2 = _default;

package/es/lib/FormModal/FormModal.js

@@ -55,7 +55,10 @@ var FormModal = function FormModal(_ref) {
   }, formProps), {}, {
     children: function children(_ref2) {
       var handleSubmit = _ref2.handleSubmit,
-          restart = _ref2.form.restart;
+          _ref2$form = _ref2.form,
+          getState = _ref2$form.getState,
+          restart = _ref2$form.restart;
+      var formState = getState();
 
       var handleClose = function handleClose(e) {
         onClose(e);
@@ -67,16 +70,22 @@ var FormModal = function FormModal(_ref) {
 
         if (footer) {
           return footer({
+            formState: formState,
             handleSubmit: handleSubmit,
             handleClose: handleClose
           });
         }
 
+        var invalid = formState.invalid,
+            pristine = formState.pristine,
+            submitting = formState.submitting;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ModalFooter, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
             buttonStyle: "primary",
+            disabled: submitting || invalid || pristine,
             marginBottom0: true,
             onClick: handleSubmit,
+            type: "submit",
             children: (_labelOverrides$save = labelOverrides.save) !== null && _labelOverrides$save !== void 0 ? _labelOverrides$save : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
               id: "stripes-kint-components.save"
             })