@k-int/stripes-kint-components 2.4.1 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
-## 2.4.1 2022-04-26
+## 2.6.0 2022-06-20
+  * UIOA-118 App does not function when code-splitting is enabled - no longer set history when url has not changed
+  * ERM-2137 Support multi-select refdata properties in Agreement/Licenses settings
+  * ERM-2173 UX tweaks to custom property configuration and views
+  * Added ConfirmationModal and error callout for deletion of refdata to EditableRefDataList
+  * useAppSettings hook for easy fetching of an AppSetting
+  * ActionList
+    * New ActionList fields are now added to the start of the list
+    * Buttons within the ActionList can now be passed specfic aria-labels
+  * Query handling.
+    * useMutateCustomProperties, useMutateRefdataValues, CustomPropertiesSettings and EditableRefdataList now all accept both `afterQueryCalls` and `catchQueryCalls` to allow implementors to trigger specific handling after queries/when queries throw.
+    * The default implementation in both components above is now a standard deletion failure message: `"<strong>Error: {label}</strong> was not deleted. {error}"`. This can alternatively be overriden with a `labelOverrides` prop: `{ deleteError: (error, object) => { ... output a callout message } }`
+  * Some peer deps changed to dev-deps
+  * ERM-2144 Support multi-select refdata properties in License term filter builder
+
+## 2.5.0 2022-05-19
   * 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.4.0 2022-04-21
   * Custom Property component fixes
   * Fix to actionAssigner callback pattern

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/artifacts/coverage-jest/lcov-report/block-navigation.js

@@ -1,14 +1,5 @@
 "use strict";
 
-(function () {
-  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
-  enterModule && enterModule(module);
-})();
-
-var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
-  return a;
-};
-
 /* eslint-disable */
 var jumpToCode = function init() {
   // Classes of code we would like to highlight in the file view
@@ -88,22 +79,4 @@ var jumpToCode = function init() {
   };
 }();
 
-window.addEventListener('keydown', jumpToCode);
-;
-
-(function () {
-  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
-
-  if (!reactHotLoader) {
-    return;
-  }
-
-  reactHotLoader.register(jumpToCode, "jumpToCode", "/home/ethan/FolioModules/stripes-kint-components/src/artifacts/coverage-jest/lcov-report/block-navigation.js");
-})();
-
-;
-
-(function () {
-  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
-  leaveModule && leaveModule(module);
-})();
+window.addEventListener('keydown', jumpToCode);

package/es/artifacts/coverage-jest/lcov-report/prettify.js

@@ -1,9 +1,5 @@
 "use strict";
 
-var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
-  return a;
-};
-
 /* eslint-disable */
 window.PR_SHOULD_USE_CONTINUATION = true;
 

package/es/artifacts/coverage-jest/lcov-report/sorter.js

@@ -1,14 +1,5 @@
 "use strict";
 
-(function () {
-  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
-  enterModule && enterModule(module);
-})();
-
-var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
-  return a;
-};
-
 /* eslint-disable */
 var addSorting = function () {
   'use strict';
@@ -217,22 +208,4 @@ var addSorting = function () {
   };
 }();
 
-window.addEventListener('load', addSorting);
-;
-
-(function () {
-  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
-
-  if (!reactHotLoader) {
-    return;
-  }
-
-  reactHotLoader.register(addSorting, "addSorting", "/home/ethan/FolioModules/stripes-kint-components/src/artifacts/coverage-jest/lcov-report/sorter.js");
-})();
-
-;
-
-(function () {
-  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
-  leaveModule && leaveModule(module);
-})();
+window.addEventListener('load', addSorting);

package/es/index.js

@@ -282,6 +282,12 @@ Object.defineProperty(exports, "useActiveElement", {
     return _hooks.useActiveElement;
   }
 });
+Object.defineProperty(exports, "useAppSettings", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useAppSettings;
+  }
+});
 Object.defineProperty(exports, "useAvailableCustomProperties", {
   enumerable: true,
   get: function get() {
@@ -415,8 +421,4 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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) {
-  return a;
-};
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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,14 +21,13 @@ 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 () {
-  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
-  enterModule && enterModule(module);
-})();
+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 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; }
 
@@ -38,10 +39,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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;
-};
-
 var propTypes = {
   actionAssigner: _propTypes.default.func,
   actionCalls: _propTypes.default.object,
@@ -52,10 +49,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 +66,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 +98,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,29 +112,7 @@ var ActionList = function ActionList(_ref) {
       }
     })
   });
-};
-
+});
 ActionList.propTypes = propTypes;
 var _default = ActionList;
-var _default2 = _default;
-exports.default = _default2;
-;
-
-(function () {
-  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
-
-  if (!reactHotLoader) {
-    return;
-  }
-
-  reactHotLoader.register(propTypes, "propTypes", "/home/ethan/FolioModules/stripes-kint-components/src/lib/ActionList/ActionList.js");
-  reactHotLoader.register(ActionList, "ActionList", "/home/ethan/FolioModules/stripes-kint-components/src/lib/ActionList/ActionList.js");
-  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/ActionList/ActionList.js");
-})();
-
-;
-
-(function () {
-  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
-  leaveModule && leaveModule(module);
-})();
+exports.default = _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"];
 
@@ -35,11 +35,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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);
-})();
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -48,8 +43,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; }
@@ -72,10 +65,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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;
-};
-
 var EDITING_ACTIONS_WIDTH = 25;
 var NON_EDITING_ACTIONS_WIDTH = 20;
 var TOTAL_WIDTH = 100;
@@ -90,10 +79,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)(function (_ref, ref) {
   var actionAssigner = _ref.actionAssigner,
       actionCalls = _ref.actionCalls,
       columnMapping = _ref.columnMapping,
@@ -104,6 +93,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 +131,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 +150,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 +161,19 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
     }
   };
 
+  var handleClickCreate = function handleClickCreate() {
+    toggleEditing('NEW_ROW');
+    fields.unshift({});
+  }; // 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;
@@ -253,6 +260,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
 
         if (action.icon) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+            ariaLabel: action === null || action === void 0 ? void 0 : action.ariaLabel(data),
             disabled: editing,
             icon: action.icon,
             onClick: function onClick() {
@@ -280,66 +288,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 +310,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 = formatter !== null && formatter !== void 0 && formatter[key] ? formatter[key](cd) : cd[key]; // If editing, replace values with fields
 
-        var returnValue = cd[key];
+        if (editingRow) {
+          var _editableFields$key, _creatableFields$key;
 
-        if (!editingRow && formatter !== null && formatter !== void 0 && formatter[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 (formatter !== null && formatter !== void 0 && formatter[key]) {
           returnValue = formatter[key](cd);
         }
 
@@ -368,17 +361,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.new"
+        })
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MultiColumnList, _objectSpread({
       columnMapping: _objectSpread(_objectSpread({}, columnMapping), {}, {
         actionListActions: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
@@ -386,7 +382,7 @@ var ActionListFieldArray = function ActionListFieldArray(_ref) {
         })
       }),
       columnWidths: getColumnWidths(),
-      contentData: formatContent(),
+      contentData: assignActions(),
       formatter: _objectSpread({
         actionListActions: renderActionButtons
       }, fieldAwareFormatter()),
@@ -394,36 +390,7 @@ 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];
 });
-
 ActionListFieldArray.propTypes = propTypes;
 var _default = ActionListFieldArray;
-var _default2 = _default;
-exports.default = _default2;
-;
-
-(function () {
-  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
-
-  if (!reactHotLoader) {
-    return;
-  }
-
-  reactHotLoader.register(EDITING_ACTIONS_WIDTH, "EDITING_ACTIONS_WIDTH", "/home/ethan/FolioModules/stripes-kint-components/src/lib/ActionList/ActionListFieldArray.js");
-  reactHotLoader.register(NON_EDITING_ACTIONS_WIDTH, "NON_EDITING_ACTIONS_WIDTH", "/home/ethan/FolioModules/stripes-kint-components/src/lib/ActionList/ActionListFieldArray.js");
-  reactHotLoader.register(TOTAL_WIDTH, "TOTAL_WIDTH", "/home/ethan/FolioModules/stripes-kint-components/src/lib/ActionList/ActionListFieldArray.js");
-  reactHotLoader.register(propTypes, "propTypes", "/home/ethan/FolioModules/stripes-kint-components/src/lib/ActionList/ActionListFieldArray.js");
-  reactHotLoader.register(ActionListFieldArray, "ActionListFieldArray", "/home/ethan/FolioModules/stripes-kint-components/src/lib/ActionList/ActionListFieldArray.js");
-  reactHotLoader.register(_default, "default", "/home/ethan/FolioModules/stripes-kint-components/src/lib/ActionList/ActionListFieldArray.js");
-})();
-
-;
-
-(function () {
-  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
-  leaveModule && leaveModule(module);
-})();
+exports.default = _default;

package/es/lib/ActionList/index.js

@@ -12,8 +12,4 @@ Object.defineProperty(exports, "default", {
 
 var _ActionList = _interopRequireDefault(require("./ActionList"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
-  return a;
-};
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }