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

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

@@ -25,21 +25,21 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/5</span>
+                <span class='fraction'>0/6</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/2</span>
+                <span class='fraction'>0/4</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/2</span>
+                <span class='fraction'>0/3</span>
             </div>
         
             
@@ -117,7 +117,17 @@
 <a name='L52'></a><a href='#L52'>52</a>
 <a name='L53'></a><a href='#L53'>53</a>
 <a name='L54'></a><a href='#L54'>54</a>
-<a name='L55'></a><a href='#L55'>55</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L55'></a><a href='#L55'>55</a>
+<a name='L56'></a><a href='#L56'>56</a>
+<a name='L57'></a><a href='#L57'>57</a>
+<a name='L58'></a><a href='#L58'>58</a>
+<a name='L59'></a><a href='#L59'>59</a>
+<a name='L60'></a><a href='#L60'>60</a>
+<a name='L61'></a><a href='#L61'>61</a>
+<a name='L62'></a><a href='#L62'>62</a>
+<a name='L63'></a><a href='#L63'>63</a>
+<a name='L64'></a><a href='#L64'>64</a>
+<a name='L65'></a><a href='#L65'>65</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>
@@ -135,6 +145,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>
@@ -143,6 +155,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>
@@ -152,6 +167,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>
@@ -168,6 +184,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-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>
@@ -185,7 +205,9 @@ const propTypes = <span class="cstat-no" title="statement not covered" >{</span>
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
   contentData: PropTypes.arrayOf(PropTypes.object),
+  creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
+  fieldComponents: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 &nbsp;
@@ -194,31 +216,39 @@ const ActionList = <span class="cstat-no" title="statement not covered" ><span c
   actionCalls = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
   columnMapping,
   contentData,
+  creatableFields = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
   editableFields = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
-  visibleFields
+  fieldComponents = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
+  visibleFields,
+  ...mclProps // Assume anything left over is to directly apply to the MCL
 }) =&gt; {
 <span class="cstat-no" title="statement not covered" >  return (</span>
-    &lt;Form
-      enableReinitialize
-      initialValues={{ contentData }}
-      mutators={arrayMutators}
-      onSubmit={actionCalls.edit}
-      subscription={{ contentData: true }}
-    &gt;
-      {<span class="fstat-no" title="function not covered" >({</span> handleSubmit }) =&gt; (
-<span class="cstat-no" title="statement not covered" >        &lt;form onSubmit={handleSubmit}&gt;</span>
-          &lt;FieldArray
-            actionAssigner={actionAssigner}
-            actionCalls={actionCalls}
-            columnMapping={columnMapping}
-            component={ActionListFieldArray}
-            editableFields={editableFields}
-            name="contentData"
-            visibleFields={visibleFields}
-          /&gt;
-        &lt;/form&gt;
-      )}
-    &lt;/Form&gt;
+    &lt;&gt;
+      &lt;Form
+        enableReinitialize
+        initialValues={{ contentData }}
+        mutators={arrayMutators}
+        onSubmit={actionCalls.edit}
+        subscription={{ contentData: true }}
+      &gt;
+        {<span class="fstat-no" title="function not covered" >()</span> =&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}
+              actionCalls={actionCalls}
+              columnMapping={columnMapping}
+              component={ActionListFieldArray}
+              creatableFields={creatableFields}
+              editableFields={editableFields}
+              fieldComponents={fieldComponents}
+              name="contentData"
+              visibleFields={visibleFields}
+              {...mclProps}
+            /&gt;
+          &lt;/form&gt;
+        )}
+      &lt;/Form&gt;
+    &lt;/&gt;
   );
 };
 &nbsp;
@@ -231,10 +261,9 @@ export default ActionList;
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Fri Dec 10 2021 16:29:27 GMT+0000 (Greenwich Mean Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Tue Mar 08 2022 11:38:49 GMT+0000 (Greenwich Mean Time)
             </div>
-        </div>
         <script src="../prettify.js"></script>
         <script>
             window.onload = function () {

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/64</span>
+                <span class='fraction'>0/81</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/35</span>
+                <span class='fraction'>0/50</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/16</span>
+                <span class='fraction'>0/21</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/61</span>
+                <span class='fraction'>0/77</span>
             </div>
         
             
@@ -289,7 +289,57 @@
 <a name='L224'></a><a href='#L224'>224</a>
 <a name='L225'></a><a href='#L225'>225</a>
 <a name='L226'></a><a href='#L226'>226</a>
-<a name='L227'></a><a href='#L227'>227</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L227'></a><a href='#L227'>227</a>
+<a name='L228'></a><a href='#L228'>228</a>
+<a name='L229'></a><a href='#L229'>229</a>
+<a name='L230'></a><a href='#L230'>230</a>
+<a name='L231'></a><a href='#L231'>231</a>
+<a name='L232'></a><a href='#L232'>232</a>
+<a name='L233'></a><a href='#L233'>233</a>
+<a name='L234'></a><a href='#L234'>234</a>
+<a name='L235'></a><a href='#L235'>235</a>
+<a name='L236'></a><a href='#L236'>236</a>
+<a name='L237'></a><a href='#L237'>237</a>
+<a name='L238'></a><a href='#L238'>238</a>
+<a name='L239'></a><a href='#L239'>239</a>
+<a name='L240'></a><a href='#L240'>240</a>
+<a name='L241'></a><a href='#L241'>241</a>
+<a name='L242'></a><a href='#L242'>242</a>
+<a name='L243'></a><a href='#L243'>243</a>
+<a name='L244'></a><a href='#L244'>244</a>
+<a name='L245'></a><a href='#L245'>245</a>
+<a name='L246'></a><a href='#L246'>246</a>
+<a name='L247'></a><a href='#L247'>247</a>
+<a name='L248'></a><a href='#L248'>248</a>
+<a name='L249'></a><a href='#L249'>249</a>
+<a name='L250'></a><a href='#L250'>250</a>
+<a name='L251'></a><a href='#L251'>251</a>
+<a name='L252'></a><a href='#L252'>252</a>
+<a name='L253'></a><a href='#L253'>253</a>
+<a name='L254'></a><a href='#L254'>254</a>
+<a name='L255'></a><a href='#L255'>255</a>
+<a name='L256'></a><a href='#L256'>256</a>
+<a name='L257'></a><a href='#L257'>257</a>
+<a name='L258'></a><a href='#L258'>258</a>
+<a name='L259'></a><a href='#L259'>259</a>
+<a name='L260'></a><a href='#L260'>260</a>
+<a name='L261'></a><a href='#L261'>261</a>
+<a name='L262'></a><a href='#L262'>262</a>
+<a name='L263'></a><a href='#L263'>263</a>
+<a name='L264'></a><a href='#L264'>264</a>
+<a name='L265'></a><a href='#L265'>265</a>
+<a name='L266'></a><a href='#L266'>266</a>
+<a name='L267'></a><a href='#L267'>267</a>
+<a name='L268'></a><a href='#L268'>268</a>
+<a name='L269'></a><a href='#L269'>269</a>
+<a name='L270'></a><a href='#L270'>270</a>
+<a name='L271'></a><a href='#L271'>271</a>
+<a name='L272'></a><a href='#L272'>272</a>
+<a name='L273'></a><a href='#L273'>273</a>
+<a name='L274'></a><a href='#L274'>274</a>
+<a name='L275'></a><a href='#L275'>275</a>
+<a name='L276'></a><a href='#L276'>276</a>
+<a name='L277'></a><a href='#L277'>277</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>
@@ -311,6 +361,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>
@@ -320,6 +373,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>
@@ -382,6 +438,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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -396,9 +453,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-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-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>
@@ -428,6 +491,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>
@@ -442,6 +506,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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -461,6 +526,10 @@
 <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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -478,6 +547,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>
@@ -488,10 +559,39 @@
 <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-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-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-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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -532,8 +632,11 @@ const propTypes = <span class="cstat-no" title="statement not covered" >{</span>
   actionAssigner: PropTypes.func,
   actionCalls: PropTypes.object,
   columnMapping: PropTypes.object,
+  creatableFields: PropTypes.object,
   editableFields: PropTypes.object,
   fields: PropTypes.object,
+  fieldComponents: PropTypes.object,
+  formatter: PropTypes.object,
   visibleFields: PropTypes.arrayOf(PropTypes.string)
 };
 &nbsp;
@@ -541,9 +644,12 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
   actionAssigner,
   actionCalls,
   columnMapping,
+  creatableFields,
   editableFields,
   fields,
-  visibleFields
+  fieldComponents,
+  visibleFields,
+  ...mclProps // Assume anything left over is to directly apply to the MCL
 }) =&gt; {
   // Grab finalForm functions/values from form hooks
   const { change } = <span class="cstat-no" title="statement not covered" >useForm();</span>
@@ -571,7 +677,7 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
   };
 &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 rowData = <span class="cstat-no" title="statement not covered" >fields.value[index];</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>
   };
 &nbsp;
@@ -607,6 +713,7 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
             key={`save[${data.rowIndex}]`}
             buttonStyle="primary"
             disabled={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>
@@ -621,9 +728,15 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
           &lt;Button
             key={`cancel[${data.rowIndex}]`}
             data-type-button="cancel"
+            marginBottom0
             onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >              change(fieldName, get(initialValues, fieldName));</span>
-<span class="cstat-no" title="statement not covered" >              toggleEditing(data.id);</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" >                fields.remove(data.rowIndex);</span>
+<span class="cstat-no" title="statement not covered" >                toggleEditing('NEW_ROW');</span>
+              } else {
+<span class="cstat-no" title="statement not covered" >                change(fieldName, get(initialValues, fieldName));</span>
+<span class="cstat-no" title="statement not covered" >                toggleEditing(data.id);</span>
+              }
             }}
           &gt;
             &lt;FormattedMessage id="stripes-kint-components.actionList.cancel" /&gt;
@@ -648,6 +761,7 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
                 key={`action-${action.name}[${data.rowIndex}]`}
                 disabled={editing}
                 icon={action.icon}
+                marginBottom0
                 onClick={actionFunction}
               /&gt;
             );
@@ -658,6 +772,7 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
             &lt;Button
               key={`action-${action.name}[${data.rowIndex}]`}
               disabled={editing}
+              marginBottom0
               onClick={actionFunction}
             &gt;
               {action.label ?? action.name}
@@ -670,7 +785,7 @@ 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>
 <span class="cstat-no" title="statement not covered" >    return (</span>
-      fields.map(<span class="fstat-no" title="function not covered" >fi</span>eldName =&gt; {
+      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>
@@ -687,19 +802,30 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
           */
 <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 edit it in a Field
-              If it does, then we check if the property has an editableField function,
-              if it does we run it with the data. If not then we just return the Field
+              Next check if this is a new row, if so we should run the createableField function with the data.
+              If it is not a new row, then we run the editableField function with the data,
+              and it should return true/false
+&nbsp;
+              For both checks
+              true =&gt; Field, false =&gt; display value
             */
 <span class="cstat-no" title="statement not covered" >            if (</span>
-                !cd.id ||
+                (!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;;
             }
           }
@@ -708,6 +834,28 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
       })
     );
   };
+&nbsp;
+  const { formatter, ...restOfMclProps } = <span class="cstat-no" title="statement not covered" >mclProps;</span> // Destructure formatter part of mclProps
+  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
+<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
+        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>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >        if (!editingRow &amp;&amp; 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>
+      };
+    });
+<span class="cstat-no" title="statement not covered" >    return returnObj;</span>
+  };
 &nbsp;
 <span class="cstat-no" title="statement not covered" >  return (</span>
     &lt;&gt;
@@ -729,10 +877,12 @@ const ActionListFieldArray = <span class="cstat-no" title="statement not covered
         columnWidths={getColumnWidths()}
         contentData={formatContent()}
         formatter={{
-          actionListActions: renderActionButtons
+          actionListActions: renderActionButtons,
+          ...fieldAwareFormatter()
         }}
         interactive={false}
         visibleColumns={[...visibleFields, 'actionListActions']}
+        {...restOfMclProps}
       /&gt;
     &lt;/&gt;
   );
@@ -747,10 +897,9 @@ export default ActionListFieldArray;
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Fri Dec 10 2021 16:29:27 GMT+0000 (Greenwich Mean Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Tue Mar 08 2022 11:38:49 GMT+0000 (Greenwich Mean Time)
             </div>
-        </div>
         <script src="../prettify.js"></script>
         <script>
             window.onload = function () {

package/src/artifacts/coverage-jest/lcov-report/ActionList/index.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/69</span>
+                <span class='fraction'>0/87</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/37</span>
+                <span class='fraction'>0/54</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/18</span>
+                <span class='fraction'>0/24</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/66</span>
+                <span class='fraction'>0/82</span>
             </div>
         
             
@@ -84,11 +84,11 @@
 	<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="5" class="abs low">0/5</td>
+	<td data-value="6" class="abs low">0/6</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="2" class="abs low">0/2</td>
+	<td data-value="4" class="abs low">0/4</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="2" class="abs low">0/2</td>
+	<td data-value="3" class="abs low">0/3</td>
 	<td data-value="0" class="pct low">0%</td>
 	<td data-value="5" class="abs low">0/5</td>
 	</tr>
@@ -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="64" class="abs low">0/64</td>
+	<td data-value="81" class="abs low">0/81</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="35" class="abs low">0/35</td>
+	<td data-value="50" class="abs low">0/50</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="16" class="abs low">0/16</td>
+	<td data-value="21" class="abs low">0/21</td>
 	<td data-value="0" class="pct low">0%</td>
-	<td data-value="61" class="abs low">0/61</td>
+	<td data-value="77" class="abs low">0/77</td>
 	</tr>
 
 <tr>
@@ -130,10 +130,9 @@
             </div><!-- /wrapper -->
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
-                <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
-                at Fri Dec 10 2021 16:29:27 GMT+0000 (Greenwich Mean Time)
+                <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
+                at Tue Mar 08 2022 11:38:49 GMT+0000 (Greenwich Mean Time)
             </div>
-        </div>
         <script src="../prettify.js"></script>
         <script>
             window.onload = function () {