@k-int/stripes-kint-components 2.4.0 → 2.5.1

package/src/artifacts/coverage-jest/lcov-report/ActionList/ActionListFieldArray.js.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/81</span>
+                <span class='fraction'>0/95</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/53</span>
+                <span class='fraction'>0/68</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/21</span>
+                <span class='fraction'>0/28</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/77</span>
+                <span class='fraction'>0/86</span>
             </div>
         
             
@@ -343,7 +343,50 @@
 <a name='L278'></a><a href='#L278'>278</a>
 <a name='L279'></a><a href='#L279'>279</a>
 <a name='L280'></a><a href='#L280'>280</a>
-<a name='L281'></a><a href='#L281'>281</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L281'></a><a href='#L281'>281</a>
+<a name='L282'></a><a href='#L282'>282</a>
+<a name='L283'></a><a href='#L283'>283</a>
+<a name='L284'></a><a href='#L284'>284</a>
+<a name='L285'></a><a href='#L285'>285</a>
+<a name='L286'></a><a href='#L286'>286</a>
+<a name='L287'></a><a href='#L287'>287</a>
+<a name='L288'></a><a href='#L288'>288</a>
+<a name='L289'></a><a href='#L289'>289</a>
+<a name='L290'></a><a href='#L290'>290</a>
+<a name='L291'></a><a href='#L291'>291</a>
+<a name='L292'></a><a href='#L292'>292</a>
+<a name='L293'></a><a href='#L293'>293</a>
+<a name='L294'></a><a href='#L294'>294</a>
+<a name='L295'></a><a href='#L295'>295</a>
+<a name='L296'></a><a href='#L296'>296</a>
+<a name='L297'></a><a href='#L297'>297</a>
+<a name='L298'></a><a href='#L298'>298</a>
+<a name='L299'></a><a href='#L299'>299</a>
+<a name='L300'></a><a href='#L300'>300</a>
+<a name='L301'></a><a href='#L301'>301</a>
+<a name='L302'></a><a href='#L302'>302</a>
+<a name='L303'></a><a href='#L303'>303</a>
+<a name='L304'></a><a href='#L304'>304</a>
+<a name='L305'></a><a href='#L305'>305</a>
+<a name='L306'></a><a href='#L306'>306</a>
+<a name='L307'></a><a href='#L307'>307</a>
+<a name='L308'></a><a href='#L308'>308</a>
+<a name='L309'></a><a href='#L309'>309</a>
+<a name='L310'></a><a href='#L310'>310</a>
+<a name='L311'></a><a href='#L311'>311</a>
+<a name='L312'></a><a href='#L312'>312</a>
+<a name='L313'></a><a href='#L313'>313</a>
+<a name='L314'></a><a href='#L314'>314</a>
+<a name='L315'></a><a href='#L315'>315</a>
+<a name='L316'></a><a href='#L316'>316</a>
+<a name='L317'></a><a href='#L317'>317</a>
+<a name='L318'></a><a href='#L318'>318</a>
+<a name='L319'></a><a href='#L319'>319</a>
+<a name='L320'></a><a href='#L320'>320</a>
+<a name='L321'></a><a href='#L321'>321</a>
+<a name='L322'></a><a href='#L322'>322</a>
+<a name='L323'></a><a href='#L323'>323</a>
+<a name='L324'></a><a href='#L324'>324</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -369,6 +412,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -382,6 +427,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -400,16 +447,48 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -478,8 +557,11 @@
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -490,10 +572,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -503,6 +590,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -519,43 +607,49 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -567,35 +661,27 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -623,13 +709,13 @@
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useState } from 'react';
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { forwardRef, useImperativeHandle, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import get from 'lodash/get';
 &nbsp;
 import { Field, useForm, useFormState } from 'react-final-form';
-import { Button, IconButton, MultiColumnList, TextField } from '@folio/stripes/components';
+import { Button, Headline, IconButton, MultiColumnList, TextField } from '@folio/stripes/components';
 import css from '../../../styles/ActionListFieldArray.css';
 &nbsp;
 const EDITING_ACTIONS_WIDTH = <span class="cstat-no" title="statement not covered" >25;</span>
@@ -641,26 +727,30 @@ const propTypes = <span class="cstat-no" title="statement not covered" >{</span>
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
   creatableFields: PropTypes.object,
+  createCallback: PropTypes.func,
   editableFields: PropTypes.object,
   fields: PropTypes.object,
   fieldComponents: PropTypes.object,
   formatter: PropTypes.object,
   hideCreateButton: PropTypes.bool,
+  label: PropTypes.string,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 &nbsp;
-const ActionListFieldArray = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >({</span></span>
+const ActionListFieldArray = <span class="cstat-no" title="statement not covered" >forwardRef(<span class="fstat-no" title="function not covered" >({</span></span>
   actionAssigner,
-  actionCalls,
+  actionCalls, // DEPRECATED
   columnMapping,
   creatableFields,
+  createCallback,
   editableFields,
   fields,
   fieldComponents,
   hideCreateButton = <span class="branch-0 cbranch-no" title="branch not covered" >false,</span>
+  label,
   visibleFields,
   ...mclProps // Assume anything left over is to directly apply to the MCL
-}) =&gt; {
+}, ref) =&gt; {
   // Grab finalForm functions/values from form hooks
   const { change } = <span class="cstat-no" title="statement not covered" >useForm();</span>
   const { initialValues, pristine, submitting, values } = <span class="cstat-no" title="statement not covered" >useFormState();</span>
@@ -679,17 +769,49 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
 <span class="cstat-no" title="statement not covered" >      setEditing(id);</span>
     }
   };
-&nbsp;
 &nbsp;
   const handleSave = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(i</span>ndex) =&gt; {</span>
-    const { actionListActions: _a, ...rowData } = <span class="cstat-no" title="statement not covered" >fields.value[index];</span>
-<span class="cstat-no" title="statement not covered" >    actionCalls.edit(rowData);</span>
+    const {
+      actionListActions: _a,
+      fieldName: _fn,
+      fieldIndex: _fi,
+      ...rowData
+    } = <span class="cstat-no" title="statement not covered" >fields.value[index];</span>
+&nbsp;
+    // Find "edit" entry in actionAssigner
+    const editCallback = <span class="cstat-no" title="statement not covered" >actionAssigner(rowData)?.find(<span class="fstat-no" title="function not covered" >ac</span>t =&gt; <span class="cstat-no" title="statement not covered" >act.name === 'edit')</span>?.callback;</span>
+<span class="cstat-no" title="statement not covered" >    if (editCallback) {</span>
+<span class="cstat-no" title="statement not covered" >      editCallback(rowData);</span>
+    } else {
+<span class="cstat-no" title="statement not covered" >      actionCalls.edit(rowData); </span>// DEPRECATED
+    }
   };
 &nbsp;
   const handleCreate = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(i</span>ndex) =&gt; {</span>
-    const { actionListActions: _a, ...rowData } = <span class="cstat-no" title="statement not covered" >fields.value[index];</span>
-<span class="cstat-no" title="statement not covered" >    actionCalls.create(rowData);</span>
+    const {
+      actionListActions: _a,
+      fieldName: _fn,
+      fieldIndex: _fi,
+      ...rowData
+    } = <span class="cstat-no" title="statement not covered" >fields.value[index];</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >    if (createCallback) {</span>
+<span class="cstat-no" title="statement not covered" >      createCallback(rowData);</span>
+    } else {
+<span class="cstat-no" title="statement not covered" >      actionCalls.create(rowData); </span>// DEPRECATED
+    }
   };
+&nbsp;
+  const handleClickCreate = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >    toggleEditing('NEW_ROW');</span>
+<span class="cstat-no" title="statement not covered" >    fields.push({});</span>
+  };
+&nbsp;
+  // Way to go into create mode from external component, and way to tell internal editing state
+<span class="cstat-no" title="statement not covered" >  useImperativeHandle(ref, <span class="fstat-no" title="function not covered" >()</span> =&gt; (<span class="cstat-no" title="statement not covered" >{</span></span>
+    create: handleClickCreate,
+    editing
+  }));
 &nbsp;
  const getColumnWidths = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
     const widthNotInUseByActions = <span class="cstat-no" title="statement not covered" >editing ?</span>
@@ -758,7 +880,15 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
 <span class="cstat-no" title="statement not covered" >    return (</span>
       &lt;div&gt;
         {actions?.map(<span class="fstat-no" title="function not covered" >ac</span>tion =&gt; {
-          let actionFunction = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >actionCalls[action.name](rest);</span></span>
+          let actionFunction;
+<span class="cstat-no" title="statement not covered" >          if (action.callback) {</span>
+<span class="cstat-no" title="statement not covered" >            actionFunction = <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >action.callback(rest);</span></span>
+          }
+&nbsp;
+<span class="cstat-no" title="statement not covered" >          if (!actionFunction &amp;&amp; actionCalls[action.name]) {</span>
+<span class="cstat-no" title="statement not covered" >            actionFunction = <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >actionCalls[action.name](rest);</span> </span>// DEPRECATED
+          }
+&nbsp;
           // Edit has special action functionality, revealing fields etc.
 <span class="cstat-no" title="statement not covered" >          if (action.name === 'edit') {</span>
 <span class="cstat-no" title="statement not covered" >            actionFunction = <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >toggleEditing(data.id);</span></span>
@@ -771,8 +901,8 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
                 key={`action-${action.name}[${data.rowIndex}]`}
                 disabled={editing}
                 icon={action.icon}
-                marginBottom0
-                onClick={actionFunction}
+                onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; (<span class="cstat-no" title="statement not covered" >actionFunction ? actionFunction() : <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >null)</span></span>}
+                to={action.to}
               /&gt;
             );
           }
@@ -783,7 +913,8 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
               key={`action-${action.name}[${data.rowIndex}]`}
               disabled={editing}
               marginBottom0
-              onClick={actionFunction}
+              onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; (<span class="cstat-no" title="statement not covered" >actionFunction ? actionFunction() : <span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >null)</span></span>}
+              to={action.to}
             &gt;
               {action.label ?? action.name}
             &lt;/Button&gt;
@@ -793,54 +924,13 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
     );
   };
 &nbsp;
-  const formatContent = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+  const assignActions = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
 <span class="cstat-no" title="statement not covered" >    return (</span>
       fields.map(<span class="fstat-no" title="function not covered" >(f</span>ieldName, fieldIndex) =&gt; {
         // Fetch the content from the field Values
         const cd = <span class="cstat-no" title="statement not covered" >get(values, fieldName);</span>
 <span class="cstat-no" title="statement not covered" >        cd.actionListActions = actionAssigner(cd);</span>
-&nbsp;
-        // Row is being edited if it has no id, or its id is in the editing string
-        const editingRow = <span class="cstat-no" title="statement not covered" >cd.id === editing || !cd.id;</span>
-        const returnObj = <span class="cstat-no" title="statement not covered" >{ ...cd };</span>
-&nbsp;
-        // If editing, replace values with fields
-<span class="cstat-no" title="statement not covered" >        if (editingRow) {</span>
-          /*
-            Check if the property is a visible field.
-            If it is not then we don't allow editing in this component.
-          */
-<span class="cstat-no" title="statement not covered" >          for (const key of visibleFields) {</span>
-            const editFunction = <span class="cstat-no" title="statement not covered" >editableFields[key] ?? (<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >true)</span>;</span>
-            const createFunction = <span class="cstat-no" title="statement not covered" >creatableFields[key] ?? (<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >true)</span>;</span>
-            /*
-              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
-&nbsp;
-              For both checks
-              true =&gt; Field, false =&gt; display value
-            */
-<span class="cstat-no" title="statement not covered" >            if (</span>
-                (!cd.id &amp;&amp; createFunction(cd)) ||
-                (editFunction(cd))
-            ) {
-<span class="cstat-no" title="statement not covered" >              returnObj[key] =</span>
-                fieldComponents[key] ?
-                fieldComponents[key]({
-                  name: `${fieldName}.${key}`
-                }) :
-                &lt;Field
-                  autofocus={fieldIndex === 0}
-                  component={TextField}
-                  marginBottom0
-                  name={`${fieldName}.${key}`}
-                  parse={<span class="fstat-no" title="function not covered" >v </span>=&gt; <span class="cstat-no" title="statement not covered" >v}</span>
-                /&gt;;
-            }
-          }
-        }
-<span class="cstat-no" title="statement not covered" >        return returnObj;</span>
+<span class="cstat-no" title="statement not covered" >        return { ...cd, fieldName, fieldIndex };</span>
       })
     );
   };
@@ -853,11 +943,46 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
 <span class="cstat-no" title="statement not covered" >      returnObj[key] = <span class="fstat-no" title="function not covered" >cd</span> =&gt; {</span>
          // Row is being edited if it has no id, or its id is in the editing string
         const editingRow = <span class="cstat-no" title="statement not covered" >cd.id === editing || !cd.id;</span>
-        // If not editing, use the passed formatter values
 &nbsp;
-        let returnValue = <span class="cstat-no" title="statement not covered" >cd[key];</span>
+        // Default to the passed formatter values
+        let returnValue = <span class="cstat-no" title="statement not covered" >formatter?.[key] ? formatter[key](cd) : cd[key];</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        if (!editingRow &amp;&amp; formatter?.[key]) {</span>
+        // If editing, replace values with fields
+<span class="cstat-no" title="statement not covered" >        if (editingRow) {</span>
+          /*
+            Check if the property is a visible field.
+            If it is not then we don't allow editing in this component.
+          */
+          const editFunction = <span class="cstat-no" title="statement not covered" >editableFields[key] ?? (<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >true)</span>;</span>
+          const createFunction = <span class="cstat-no" title="statement not covered" >creatableFields[key] ?? (<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >true)</span>;</span>
+          /*
+            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
+&nbsp;
+            For both checks
+            true =&gt; Field, false =&gt; display value
+          */
+<span class="cstat-no" title="statement not covered" >          if (</span>
+              (!cd.id &amp;&amp; createFunction(cd)) ||
+              (editFunction(cd))
+          ) {
+<span class="cstat-no" title="statement not covered" >            returnValue =</span>
+              fieldComponents[key] ?
+              fieldComponents[key]({
+                name: `${cd.fieldName}.${key}`
+              }) :
+              &lt;Field
+                autoFocus={cd.fieldIndex === 0}
+                component={TextField}
+                marginBottom0
+                name={`${cd.fieldName}.${key}`}
+                parse={<span class="fstat-no" title="function not covered" >v </span>=&gt; <span class="cstat-no" title="statement not covered" >v}</span>
+              /&gt;;
+          }
+        }
+&nbsp;
+<span class="cstat-no" title="statement not covered" >        if (formatter?.[key]) {</span>
 <span class="cstat-no" title="statement not covered" >          returnValue = formatter[key](cd);</span>
         }
 &nbsp;
@@ -869,25 +994,29 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
 &nbsp;
 <span class="cstat-no" title="statement not covered" >  return (</span>
     &lt;&gt;
-      {!hideCreateButton &amp;&amp;
-        &lt;Button
-          buttonClass={css.buttonRight}
-          disabled={!actionCalls.create}
-          onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >            toggleEditing('NEW_ROW');</span>
-<span class="cstat-no" title="statement not covered" >            fields.push({});</span>
-          }}
+      &lt;div className={css.header}&gt;
+        &lt;Headline
+          className={css.headerText}
         &gt;
-          &lt;FormattedMessage id="stripes-kint-components.actionList.create" /&gt;
-        &lt;/Button&gt;
-      }
+          {label}
+        &lt;/Headline&gt;
+        {!hideCreateButton &amp;&amp;
+          &lt;Button
+            disabled={editing || (!actionCalls.create &amp;&amp; !createCallback)} // DEPRECATED actionCalls
+            marginBottom0
+            onClick={handleClickCreate}
+          &gt;
+            &lt;FormattedMessage id="stripes-kint-components.actionList.create" /&gt;
+          &lt;/Button&gt;
+        }
+      &lt;/div&gt;
       &lt;MultiColumnList
         columnMapping={{
           ...columnMapping,
           actionListActions: &lt;FormattedMessage id="stripes-kint-components.actionList.actions" /&gt;
         }}
         columnWidths={getColumnWidths()}
-        contentData={formatContent()}
+        contentData={assignActions()}
         formatter={{
           actionListActions: renderActionButtons,
           ...fieldAwareFormatter()
@@ -898,7 +1027,7 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
       /&gt;
     &lt;/&gt;
   );
-};
+});
 &nbsp;
 <span class="cstat-no" title="statement not covered" >ActionListFieldArray.propTypes = propTypes;</span>
 &nbsp;
@@ -910,7 +1039,7 @@ export default ActionListFieldArray;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Mar 11 2022 16:43:16 GMT+0000 (Greenwich Mean Time)
+                at Thu May 19 2022 10:55:24 GMT+0100 (British Summer Time)
             </div>
         <script src="../prettify.js"></script>
         <script>