@k-int/stripes-kint-components 1.6.0 → 2.0.1

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## 2.0.1 2022-03-08
+* Fixes for ActionList
+  * When no formatter is present, it no longer crashes
+  * Formatting for buttons
+* Fixes for CustomProperty work
+  * Editing CustProp with context no longer crashes
+  * Added translation for "no matching context found"
+
+## 2.0.0 2022-03-04
+  * ActionList updates
+    * Formatter now accepted, will apply while not editing a row
+    * MCL props not specified in prop list will be passed directly to MCL
+    * fieldComponents prop allows for rendering of a custom Field for use in editing a specific field on a row
+  * Removed deprecated TypeDown component (replaced by Typedown in v1.3.0)
+  * Typedown
+    * Added isSelected prop
+    * Added id prop
+    * Added label prop
+    * Added required prop
+    * Added endOfList prop 
+  * FormModal component
+  * Custom Property configuration components
+    * CustomPropertiesLookup
+    * CustomPropertiesView
+    * CustomPropertiesSettings
+  * Added jest artifacts one level below root to gitignore
+## 1.7.0 Released 20th January 2022
+ * EditableRefdataList fixes and sorting
+ * Fixes to create action in actionlist
+ * creatableFields added to ActionList
+ * refdataOptions -- a default SASQ options setup is now exported
+ * Added FilterPaneHeaderComponent to SASQLookupComponent
+ 
 ## 1.6.0 Released 10th December 2021
  * RefdataButtons now exposed
  * Jest testing framework now up and operational
@@ -51,4 +84,4 @@
   * Settings files migrated away from ui-rs
   * useTemplates hook created
   * useRefdata hook created
-  * Set up npm publishing to the @k-int scope
+  * Set up npm publishing to the @k-int scope

package/es/index.js

@@ -1,5 +1,7 @@
 "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
 });
@@ -9,6 +11,24 @@ Object.defineProperty(exports, "ActionList", {
     return _ActionList.default;
   }
 });
+Object.defineProperty(exports, "CustomPropertiesLookup", {
+  enumerable: true,
+  get: function get() {
+    return _Config.CustomPropertiesLookup;
+  }
+});
+Object.defineProperty(exports, "CustomPropertiesSettings", {
+  enumerable: true,
+  get: function get() {
+    return _Config.CustomPropertiesSettings;
+  }
+});
+Object.defineProperty(exports, "CustomPropertiesView", {
+  enumerable: true,
+  get: function get() {
+    return _Config.CustomPropertiesView;
+  }
+});
 Object.defineProperty(exports, "EditableRefdataList", {
   enumerable: true,
   get: function get() {
@@ -75,18 +95,13 @@ Object.defineProperty(exports, "SettingsContext", {
     return _contexts.SettingsContext;
   }
 });
-Object.defineProperty(exports, "TypeDown", {
-  enumerable: true,
-  get: function get() {
-    return _TypeDown.default;
-  }
-});
 Object.defineProperty(exports, "Typedown", {
   enumerable: true,
   get: function get() {
     return _Typedown.default;
   }
 });
+exports.customPropertyContants = void 0;
 Object.defineProperty(exports, "generateKiwtQuery", {
   enumerable: true,
   get: function get() {
@@ -99,6 +114,12 @@ Object.defineProperty(exports, "generateKiwtQueryParams", {
     return _utils.generateKiwtQueryParams;
   }
 });
+Object.defineProperty(exports, "refdataOptions", {
+  enumerable: true,
+  get: function get() {
+    return _utils.refdataOptions;
+  }
+});
 Object.defineProperty(exports, "selectorSafe", {
   enumerable: true,
   get: function get() {
@@ -111,6 +132,12 @@ Object.defineProperty(exports, "useActiveElement", {
     return _hooks.useActiveElement;
   }
 });
+Object.defineProperty(exports, "useCustomProperties", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useCustomProperties;
+  }
+});
 Object.defineProperty(exports, "useHelperApp", {
   enumerable: true,
   get: function get() {
@@ -135,6 +162,12 @@ Object.defineProperty(exports, "useLocalStorageState", {
     return _hooks.useLocalStorageState;
   }
 });
+Object.defineProperty(exports, "useMutateCustomProperties", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useMutateCustomProperties;
+  }
+});
 Object.defineProperty(exports, "useMutateRefdataValue", {
   enumerable: true,
   get: function get() {
@@ -178,8 +211,6 @@ var _ActionList = _interopRequireDefault(require("./lib/ActionList"));
 
 var _EditableRefdataList = _interopRequireDefault(require("./lib/EditableRefdataList"));
 
-var _TypeDown = _interopRequireDefault(require("./lib/TypeDown"));
-
 var _Typedown = _interopRequireDefault(require("./lib/Typedown"));
 
 var _QueryTypedown = _interopRequireDefault(require("./lib/QueryTypedown"));
@@ -196,6 +227,16 @@ var _NoResultsMessage = _interopRequireDefault(require("./lib/NoResultsMessage")
 
 var _RefdataButtons = _interopRequireDefault(require("./lib/RefdataButtons"));
 
+var _Config = require("./lib/CustomProperties/Config");
+
+var _customPropertyContants = _interopRequireWildcard(require("./lib/constants/customProperties"));
+
+exports.customPropertyContants = _customPropertyContants;
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {

package/es/lib/ActionList/ActionList.js

@@ -19,6 +19,8 @@ var _ActionListFieldArray = _interopRequireDefault(require("./ActionListFieldArr
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["actionAssigner", "actionCalls", "columnMapping", "contentData", "creatableFields", "editableFields", "fieldComponents", "visibleFields"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 (function () {
@@ -26,6 +28,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   enterModule && enterModule(module);
 })();
 
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
@@ -35,7 +47,9 @@ var propTypes = {
   actionCalls: _propTypes.default.object,
   columnMapping: _propTypes.default.object,
   contentData: _propTypes.default.arrayOf(_propTypes.default.object),
+  creatableFields: _propTypes.default.object,
   editableFields: _propTypes.default.object,
+  fieldComponents: _propTypes.default.object,
   visibleFields: _propTypes.default.arrayOf(_propTypes.default.string)
 };
 
@@ -45,34 +59,45 @@ var ActionList = function ActionList(_ref) {
       actionCalls = _ref$actionCalls === void 0 ? {} : _ref$actionCalls,
       columnMapping = _ref.columnMapping,
       contentData = _ref.contentData,
+      _ref$creatableFields = _ref.creatableFields,
+      creatableFields = _ref$creatableFields === void 0 ? {} : _ref$creatableFields,
       _ref$editableFields = _ref.editableFields,
       editableFields = _ref$editableFields === void 0 ? {} : _ref$editableFields,
-      visibleFields = _ref.visibleFields;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, {
-    enableReinitialize: true,
-    initialValues: {
-      contentData: contentData
-    },
-    mutators: _finalFormArrays.default,
-    onSubmit: actionCalls.edit,
-    subscription: {
-      contentData: true
-    },
-    children: function children(_ref2) {
-      var handleSubmit = _ref2.handleSubmit;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
-        onSubmit: handleSubmit,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
-          actionAssigner: actionAssigner,
-          actionCalls: actionCalls,
-          columnMapping: columnMapping,
-          component: _ActionListFieldArray.default,
-          editableFields: editableFields,
-          name: "contentData",
-          visibleFields: visibleFields
-        })
-      });
-    }
+      _ref$fieldComponents = _ref.fieldComponents,
+      fieldComponents = _ref$fieldComponents === void 0 ? {} : _ref$fieldComponents,
+      visibleFields = _ref.visibleFields,
+      mclProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Form, {
+      enableReinitialize: true,
+      initialValues: {
+        contentData: contentData
+      },
+      mutators: _finalFormArrays.default,
+      onSubmit: actionCalls.edit,
+      subscription: {
+        contentData: true
+      },
+      children: function children() {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
+          onSubmit: function onSubmit(e) {
+            e.preventDefault();
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, _objectSpread({
+            actionAssigner: actionAssigner,
+            actionCalls: actionCalls,
+            columnMapping: columnMapping,
+            component: _ActionListFieldArray.default,
+            creatableFields: creatableFields,
+            editableFields: editableFields,
+            fieldComponents: fieldComponents,
+            name: "contentData",
+            visibleFields: visibleFields
+          }, mclProps))
+        });
+      }
+    })
   });
 };
 

package/es/lib/ActionList/ActionListFieldArray.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+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
@@ -23,8 +23,11 @@ var _ActionListFieldArray = _interopRequireDefault(require("../../../styles/Acti
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["actionListActions"],
-    _excluded2 = ["actionListActions"];
+var _excluded = ["actionAssigner", "actionCalls", "columnMapping", "creatableFields", "editableFields", "fields", "fieldComponents", "visibleFields"],
+    _excluded2 = ["actionListActions"],
+    _excluded3 = ["actionListActions"],
+    _excluded4 = ["actionListActions"],
+    _excluded5 = ["formatter"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,16 +50,12 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -69,6 +68,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
@@ -80,8 +83,11 @@ var propTypes = {
   actionAssigner: _propTypes.default.func,
   actionCalls: _propTypes.default.object,
   columnMapping: _propTypes.default.object,
+  creatableFields: _propTypes.default.object,
   editableFields: _propTypes.default.object,
   fields: _propTypes.default.object,
+  fieldComponents: _propTypes.default.object,
+  formatter: _propTypes.default.object,
   visibleFields: _propTypes.default.arrayOf(_propTypes.default.string)
 };
 
@@ -89,9 +95,12 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
   var actionAssigner = _ref.actionAssigner,
       actionCalls = _ref.actionCalls,
       columnMapping = _ref.columnMapping,
+      creatableFields = _ref.creatableFields,
       editableFields = _ref.editableFields,
       fields = _ref.fields,
-      visibleFields = _ref.visibleFields;
+      fieldComponents = _ref.fieldComponents,
+      visibleFields = _ref.visibleFields,
+      mclProps = _objectWithoutProperties(_ref, _excluded);
 
   // Grab finalForm functions/values from form hooks
   var _useForm = (0, _reactFinalForm.useForm)(),
@@ -125,13 +134,16 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
   var handleSave = function handleSave(index) {
     var _fields$value$index = fields.value[index],
         _a = _fields$value$index.actionListActions,
-        rowData = _objectWithoutProperties(_fields$value$index, _excluded);
+        rowData = _objectWithoutProperties(_fields$value$index, _excluded2);
 
     actionCalls.edit(rowData);
   };
 
   var handleCreate = function handleCreate(index) {
-    var rowData = fields.value[index];
+    var _fields$value$index2 = fields.value[index],
+        _a = _fields$value$index2.actionListActions,
+        rowData = _objectWithoutProperties(_fields$value$index2, _excluded3);
+
     actionCalls.create(rowData);
   };
 
@@ -152,7 +164,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
     var fieldName = "contentData[".concat(data.rowIndex, "]");
 
     var actions = data.actionListActions,
-        rest = _objectWithoutProperties(data, _excluded2);
+        rest = _objectWithoutProperties(data, _excluded4);
 
     if (data.id === editing || !data.id && editing === 'NEW_ROW') {
       // Render the save/cancel buttons
@@ -160,6 +172,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           buttonStyle: "primary",
           disabled: submitting || pristine,
+          marginBottom0: true,
           onClick: function onClick() {
             if (!data.id && editing === 'NEW_ROW') {
               handleCreate(data.rowIndex);
@@ -174,9 +187,15 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
           })
         }, "save[".concat(data.rowIndex, "]")), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           "data-type-button": "cancel",
+          marginBottom0: true,
           onClick: function onClick() {
-            change(fieldName, (0, _get.default)(initialValues, fieldName));
-            toggleEditing(data.id);
+            if (!data.id && editing === 'NEW_ROW') {
+              fields.remove(data.rowIndex);
+              toggleEditing('NEW_ROW');
+            } else {
+              change(fieldName, (0, _get.default)(initialValues, fieldName));
+              toggleEditing(data.id);
+            }
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
             id: "stripes-kint-components.actionList.cancel"
@@ -205,6 +224,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
             disabled: editing,
             icon: action.icon,
+            marginBottom0: true,
             onClick: actionFunction
           }, "action-".concat(action.name, "[").concat(data.rowIndex, "]"));
         } // Else return a button with the label, or failing that the name of the action
@@ -212,6 +232,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
 
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
           disabled: editing,
+          marginBottom0: true,
           onClick: actionFunction,
           children: (_action$label = action.label) !== null && _action$label !== void 0 ? _action$label : action.name
         }, "action-".concat(action.name, "[").concat(data.rowIndex, "]"));
@@ -220,7 +241,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
   };
 
   var formatContent = function formatContent() {
-    return fields.map(function (fieldName) {
+    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
@@ -240,22 +261,34 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
 
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var _editableFields$key;
+            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 edit it in a Field
-              If it does, then we check if the property has an editableField function,
-              if it does we run it with the data. If not then we just return the Field
+              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 || editFunction(cd)) {
-              returnObj[key] = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
-                component: _components.TextField,
+            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;
+                }
               });
             }
           }
@@ -270,6 +303,30 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
     });
   };
 
+  var formatter = mclProps.formatter,
+      restOfMclProps = _objectWithoutProperties(mclProps, _excluded5); // Destructure formatter part of mclProps
+
+
+  var fieldAwareFormatter = function fieldAwareFormatter() {
+    var returnObj = {}; // For each visible field, if it's being edited then ignore passed formatters, else use them
+
+    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 returnValue = cd[key];
+
+        if (!editingRow && formatter !== null && formatter !== void 0 && formatter[key]) {
+          returnValue = formatter[key](cd);
+        }
+
+        return returnValue;
+      };
+    });
+    return returnObj;
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
       buttonClass: _ActionListFieldArray.default.buttonRight,
@@ -281,7 +338,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
         id: "stripes-kint-components.actionList.create"
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MultiColumnList, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MultiColumnList, _objectSpread({
       columnMapping: _objectSpread(_objectSpread({}, columnMapping), {}, {
         actionListActions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
           id: "stripes-kint-components.actionList.actions"
@@ -289,12 +346,12 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
       }),
       columnWidths: getColumnWidths(),
       contentData: formatContent(),
-      formatter: {
+      formatter: _objectSpread({
         actionListActions: renderActionButtons
-      },
+      }, fieldAwareFormatter()),
       interactive: false,
       visibleColumns: [].concat(_toConsumableArray(visibleFields), ['actionListActions'])
-    })]
+    }, restOfMclProps))]
   });
 };