@k-int/stripes-kint-components 2.8.2 → 2.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

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

@@ -32,7 +32,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/4</span>
+                <span class='fraction'>0/5</span>
             </div>
         
             
@@ -140,7 +140,17 @@
 <a name='L75'></a><a href='#L75'>75</a>
 <a name='L76'></a><a href='#L76'>76</a>
 <a name='L77'></a><a href='#L77'>77</a>
-<a name='L78'></a><a href='#L78'>78</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a>
+<a name='L88'></a><a href='#L88'>88</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>
@@ -163,6 +173,11 @@
 <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-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>
@@ -177,6 +192,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>
@@ -214,6 +231,9 @@
 <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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -233,10 +253,15 @@ const propTypes = <span class="cstat-no" title="statement not covered" >{</span>
   contentData: PropTypes.arrayOf(PropTypes.object),
   creatableFields: PropTypes.object,
   createCallback: PropTypes.func,
+  defaultNewObject: PropTypes.object,
   editableFields: PropTypes.object,
   fieldComponents: PropTypes.object,
   hideCreateButton: PropTypes.bool,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node
+  ]),
+  validateFields: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 &nbsp;
@@ -247,10 +272,12 @@ const ActionList = <span class="cstat-no" title="statement not covered" >forward
   contentData,
   creatableFields = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
   createCallback,
+  defaultNewObject = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
   editableFields = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
   fieldComponents = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
   hideCreateButton,
   label,
+  validateFields,
   visibleFields,
   ...mclProps // Assume anything left over is to directly apply to the MCL
 }, ref) =&gt; {
@@ -267,7 +294,7 @@ const ActionList = <span class="cstat-no" title="statement not covered" >forward
         onSubmit={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >null}</span>
         subscription={{ contentData: true }}
       &gt;
-        {<span class="fstat-no" title="function not covered" >()</span> =&gt; (
+        {<span class="fstat-no" title="function not covered" >({</span> handleSubmit }) =&gt; (
 <span class="cstat-no" title="statement not covered" >          &lt;form onSubmit={<span class="fstat-no" title="function not covered" >e </span>=&gt; { <span class="cstat-no" title="statement not covered" >e.preventDefault(); </span>}}&gt;</span>
             &lt;FieldArray
               actionAssigner={actionAssigner}
@@ -276,11 +303,14 @@ const ActionList = <span class="cstat-no" title="statement not covered" >forward
               component={ActionListFieldArrayWithRef}
               creatableFields={creatableFields}
               createCallback={createCallback}
+              defaultNewObject={defaultNewObject}
               editableFields={editableFields}
               fieldComponents={fieldComponents}
               hideCreateButton={hideCreateButton}
               label={label}
               name="contentData"
+              triggerFormSubmit={handleSubmit}
+              validateFields={validateFields}
               visibleFields={visibleFields}
               {...mclProps}
             /&gt;
@@ -301,7 +331,7 @@ export default ActionList;
             <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 Thu Jun 16 2022 14:59:18 GMT+0100 (British Summer Time)
+                at 2022-11-22T09:57:19.883Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -25,14 +25,14 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/95</span>
+                <span class='fraction'>0/105</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/68</span>
+                <span class='fraction'>0/78</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/86</span>
+                <span class='fraction'>0/96</span>
             </div>
         
             
@@ -386,7 +386,40 @@
 <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>
+<a name='L324'></a><a href='#L324'>324</a>
+<a name='L325'></a><a href='#L325'>325</a>
+<a name='L326'></a><a href='#L326'>326</a>
+<a name='L327'></a><a href='#L327'>327</a>
+<a name='L328'></a><a href='#L328'>328</a>
+<a name='L329'></a><a href='#L329'>329</a>
+<a name='L330'></a><a href='#L330'>330</a>
+<a name='L331'></a><a href='#L331'>331</a>
+<a name='L332'></a><a href='#L332'>332</a>
+<a name='L333'></a><a href='#L333'>333</a>
+<a name='L334'></a><a href='#L334'>334</a>
+<a name='L335'></a><a href='#L335'>335</a>
+<a name='L336'></a><a href='#L336'>336</a>
+<a name='L337'></a><a href='#L337'>337</a>
+<a name='L338'></a><a href='#L338'>338</a>
+<a name='L339'></a><a href='#L339'>339</a>
+<a name='L340'></a><a href='#L340'>340</a>
+<a name='L341'></a><a href='#L341'>341</a>
+<a name='L342'></a><a href='#L342'>342</a>
+<a name='L343'></a><a href='#L343'>343</a>
+<a name='L344'></a><a href='#L344'>344</a>
+<a name='L345'></a><a href='#L345'>345</a>
+<a name='L346'></a><a href='#L346'>346</a>
+<a name='L347'></a><a href='#L347'>347</a>
+<a name='L348'></a><a href='#L348'>348</a>
+<a name='L349'></a><a href='#L349'>349</a>
+<a name='L350'></a><a href='#L350'>350</a>
+<a name='L351'></a><a href='#L351'>351</a>
+<a name='L352'></a><a href='#L352'>352</a>
+<a name='L353'></a><a href='#L353'>353</a>
+<a name='L354'></a><a href='#L354'>354</a>
+<a name='L355'></a><a href='#L355'>355</a>
+<a name='L356'></a><a href='#L356'>356</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>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -414,6 +447,12 @@
 <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-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>
@@ -429,6 +468,9 @@
 <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>
@@ -525,6 +567,9 @@
 <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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -539,6 +584,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-no">&nbsp;</span>
@@ -571,6 +618,17 @@
 <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-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-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -578,6 +636,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-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>
@@ -590,6 +649,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-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>
@@ -616,6 +676,9 @@
 <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-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -646,6 +709,8 @@
 <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-neutral">&nbsp;</span>
@@ -658,11 +723,10 @@
 <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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -713,6 +777,7 @@
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import get from 'lodash/get';
+import cloneDeep from 'lodash/cloneDeep';
 &nbsp;
 import { Field, useForm, useFormState } from 'react-final-form';
 import { Button, Headline, IconButton, MultiColumnList, TextField } from '@folio/stripes/components';
@@ -728,12 +793,18 @@ const propTypes = <span class="cstat-no" title="statement not covered" >{</span>
   columnMapping: PropTypes.object,
   creatableFields: PropTypes.object,
   createCallback: PropTypes.func,
+  defaultNewObject: PropTypes.object,
   editableFields: PropTypes.object,
   fields: PropTypes.object,
   fieldComponents: PropTypes.object,
   formatter: PropTypes.object,
   hideCreateButton: PropTypes.bool,
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node
+  ]),
+  triggerFormSubmit: PropTypes.func.isRequired,
+  validateFields: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 &nbsp;
@@ -743,17 +814,20 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
   columnMapping,
   creatableFields,
   createCallback,
+  defaultNewObject,
   editableFields,
   fields,
   fieldComponents,
   hideCreateButton = <span class="branch-0 cbranch-no" title="branch not covered" >false,</span>
   label,
+  validateFields,
   visibleFields,
+  triggerFormSubmit,
   ...mclProps // Assume anything left over is to directly apply to the MCL
 }, 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>
+  const { hasValidationErrors, initialValues, pristine, submitting, values } = <span class="cstat-no" title="statement not covered" >useFormState();</span>
 &nbsp;
   /*
     Keep track of which field we are editing.
@@ -804,7 +878,7 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
 &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>
+<span class="cstat-no" title="statement not covered" >    fields.unshift(defaultNewObject);</span>
   };
 &nbsp;
   // Way to go into create mode from external component, and way to tell internal editing state
@@ -844,16 +918,21 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
           &lt;Button
             key={`save[${data.rowIndex}]`}
             buttonStyle="primary"
-            disabled={submitting || pristine}
+            disabled={hasValidationErrors || submitting || pristine}
             marginBottom0
             onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >              if (!data.id &amp;&amp; editing === 'NEW_ROW') {</span>
-<span class="cstat-no" title="statement not covered" >                handleCreate(data.rowIndex);</span>
-              } else {
-<span class="cstat-no" title="statement not covered" >                handleSave(data.rowIndex);</span>
+<span class="cstat-no" title="statement not covered" >              triggerFormSubmit(); </span>// This is set up as () =&gt; null in ActionList, so essentially only acts here to force validation
+&nbsp;
+<span class="cstat-no" title="statement not covered" >              if (!hasValidationErrors) {</span>
+<span class="cstat-no" title="statement not covered" >                if (!data.id &amp;&amp; editing === 'NEW_ROW') {</span>
+<span class="cstat-no" title="statement not covered" >                  handleCreate(data.rowIndex);</span>
+                } else {
+<span class="cstat-no" title="statement not covered" >                  handleSave(data.rowIndex);</span>
+                }
+<span class="cstat-no" title="statement not covered" >                toggleEditing(data.id);</span>
               }
-<span class="cstat-no" title="statement not covered" >              toggleEditing(data.id);</span>
             }}
+            type="submit"
           &gt;
             &lt;FormattedMessage id="stripes-kint-components.actionList.save" /&gt;
           &lt;/Button&gt;
@@ -893,12 +972,24 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
 <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>
           }
+&nbsp;
+          let ariaLabel = <span class="cstat-no" title="statement not covered" >`action-${action.name}[${data.rowIndex}]`;</span>
+<span class="cstat-no" title="statement not covered" >          if (action?.ariaLabel) {</span>
+<span class="cstat-no" title="statement not covered" >            if (typeof action.ariaLabel === 'function') {</span>
+<span class="cstat-no" title="statement not covered" >              ariaLabel = action.ariaLabel(data);</span>
+            } else <span class="cstat-no" title="statement not covered" >if (typeof action.ariaLabel === 'string') {</span>
+<span class="cstat-no" title="statement not covered" >              ariaLabel = action.ariaLabel;</span>
+            } else {
+<span class="cstat-no" title="statement not covered" >              throw new Error(`Provided ariaLabel for action "${action.name}" must be a function or a string.`);</span>
+            }
+          }
 &nbsp;
           // If we're handed an icon, use that for the action button
 <span class="cstat-no" title="statement not covered" >          if (action.icon) {</span>
 <span class="cstat-no" title="statement not covered" >            return (</span>
               &lt;IconButton
                 key={`action-${action.name}[${data.rowIndex}]`}
+                ariaLabel={ariaLabel}
                 disabled={editing}
                 icon={action.icon}
                 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>}
@@ -911,6 +1002,7 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
 <span class="cstat-no" title="statement not covered" >          return (</span>
             &lt;Button
               key={`action-${action.name}[${data.rowIndex}]`}
+              ariaLabel={ariaLabel}
               disabled={editing}
               marginBottom0
               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>}
@@ -928,7 +1020,7 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
 <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>
+        const cd = <span class="cstat-no" title="statement not covered" >cloneDeep(get(values, fieldName));</span>
 <span class="cstat-no" title="statement not covered" >        cd.actionListActions = actionAssigner(cd);</span>
 <span class="cstat-no" title="statement not covered" >        return { ...cd, fieldName, fieldIndex };</span>
       })
@@ -939,6 +1031,9 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
   const fieldAwareFormatter = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
     const returnObj = <span class="cstat-no" title="statement not covered" >{};</span>
     // For each visible field, if it's being edited then ignore passed formatters, else use them
+&nbsp;
+    // Track whether we've autoFocused on a field yet
+    let autoFocus = <span class="cstat-no" title="statement not covered" >true;</span>
 <span class="cstat-no" title="statement not covered" >    visibleFields.forEach(<span class="fstat-no" title="function not covered" >ke</span>y =&gt; {</span>
 <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
@@ -965,27 +1060,28 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
           */
 <span class="cstat-no" title="statement not covered" >          if (</span>
               (!cd.id &amp;&amp; createFunction(cd)) ||
-              (editFunction(cd))
+              (!!cd.id &amp;&amp; editFunction(cd))
           ) {
+            const validateFunction = <span class="cstat-no" title="statement not covered" >validateFields?.[key] ? validateFields?.[key](cd) : null;</span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >            returnValue =</span>
               fieldComponents[key] ?
               fieldComponents[key]({
                 name: `${cd.fieldName}.${key}`
               }) :
               &lt;Field
-                autoFocus={cd.fieldIndex === 0}
+                autoFocus={autoFocus}
                 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>
+                validate={validateFunction}
               /&gt;;
+            // After first field, every other field should not autofocus
+<span class="cstat-no" title="statement not covered" >            autoFocus = false;</span>
           }
         }
 &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;
 <span class="cstat-no" title="statement not covered" >        return returnValue;</span>
       };
     });
@@ -1006,7 +1102,7 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
             marginBottom0
             onClick={handleClickCreate}
           &gt;
-            &lt;FormattedMessage id="stripes-kint-components.actionList.create" /&gt;
+            &lt;FormattedMessage id="stripes-kint-components.new" /&gt;
           &lt;/Button&gt;
         }
       &lt;/div&gt;
@@ -1039,7 +1135,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 Thu Jun 16 2022 14:59:18 GMT+0100 (British Summer Time)
+                at 2022-11-22T09:57:19.883Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -25,14 +25,14 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/104</span>
+                <span class='fraction'>0/114</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/72</span>
+                <span class='fraction'>0/83</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/94</span>
+                <span class='fraction'>0/104</span>
             </div>
         
             
@@ -86,7 +86,7 @@
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="9" class="abs low">0/9</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="4" class="abs low">0/4</td>
+	<td data-value="5" class="abs low">0/5</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="5" class="abs low">0/5</td>
 	<td data-value="0" class="pct low">0%</td>
@@ -99,13 +99,13 @@
 	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
 	</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="95" class="abs low">0/95</td>
+	<td data-value="105" class="abs low">0/105</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="68" class="abs low">0/68</td>
+	<td data-value="78" class="abs low">0/78</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="28" class="abs low">0/28</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="86" class="abs low">0/86</td>
+	<td data-value="96" class="abs low">0/96</td>
 	</tr>
 
 <tr>
@@ -131,7 +131,7 @@
             <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 Thu Jun 16 2022 14:59:18 GMT+0100 (British Summer Time)
+                at 2022-11-22T09:57:19.883Z
             </div>
         <script src="../prettify.js"></script>
         <script>

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

@@ -73,7 +73,7 @@
             <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 Thu Jun 16 2022 14:59:18 GMT+0100 (British Summer Time)
+                at 2022-11-22T09:57:19.883Z
             </div>
         <script src="../prettify.js"></script>
         <script>