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

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/Edit/CustomPropertiesListField.js.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">83.33% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/48</span>
+                <span class='fraction'>45/54</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">68.75% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/34</span>
+                <span class='fraction'>22/32</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">88.88% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>0/17</span>
+                <span class='fraction'>16/18</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">84.31% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/45</span>
+                <span class='fraction'>43/51</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <div class='status-line high'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -257,7 +257,61 @@
 <a name='L192'></a><a href='#L192'>192</a>
 <a name='L193'></a><a href='#L193'>193</a>
 <a name='L194'></a><a href='#L194'>194</a>
-<a name='L195'></a><a href='#L195'>195</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L195'></a><a href='#L195'>195</a>
+<a name='L196'></a><a href='#L196'>196</a>
+<a name='L197'></a><a href='#L197'>197</a>
+<a name='L198'></a><a href='#L198'>198</a>
+<a name='L199'></a><a href='#L199'>199</a>
+<a name='L200'></a><a href='#L200'>200</a>
+<a name='L201'></a><a href='#L201'>201</a>
+<a name='L202'></a><a href='#L202'>202</a>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</a>
+<a name='L220'></a><a href='#L220'>220</a>
+<a name='L221'></a><a href='#L221'>221</a>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<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>
+<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></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>
@@ -265,8 +319,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-yes">1x</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>
@@ -278,12 +332,13 @@
 <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-no">&nbsp;</span>
+<span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">11x</span>
+<span class="cline-any cline-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">11x</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>
@@ -292,15 +347,17 @@
 <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-no">&nbsp;</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">96x</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-yes">8x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">11x</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>
@@ -317,16 +374,16 @@
 <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-yes">11x</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-yes">22x</span>
+<span class="cline-any cline-yes">22x</span>
+<span class="cline-any cline-yes">132x</span>
+<span class="cline-any cline-yes">132x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">66x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">66x</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>
@@ -345,27 +402,43 @@
 <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-yes">132x</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-yes">11x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">11x</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>
 <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-yes">132x</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-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-yes">132x</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>
@@ -383,41 +456,35 @@
 <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-yes">1x</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-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-yes">8x</span>
+<span class="cline-any cline-yes">8x</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-yes">8x</span>
+<span class="cline-any cline-yes">96x</span>
+<span class="cline-any cline-yes">96x</span>
+<span class="cline-any cline-yes">32x</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>
-<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-yes">96x</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>
@@ -427,17 +494,58 @@
 <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-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">96x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">88x</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-yes">38x</span>
+<span class="cline-any cline-yes">3x</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-yes">5x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">8x</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-yes">8x</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>
+<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-yes">1x</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-yes">1x</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>
@@ -455,27 +563,30 @@
 import PropTypes from 'prop-types';
 import { Field, useFormState } from 'react-final-form';
 &nbsp;
-import { Button, KeyValue } from '@folio/stripes/components';
-import { FormattedMessage } from 'react-intl';
-import { useAvailableCustomProperties } from '../../hooks';
+import { Button, Headline, KeyValue } from '@folio/stripes/components';
+import { useKintIntl } from '../../hooks';
 import CustomPropertyFormCard from './CustomPropertyFormCard';
 &nbsp;
-const CustomPropertiesList = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >({</span></span>
+const CustomPropertiesList = ({
   availableCustomProperties = <span class="branch-0 cbranch-no" title="branch not covered" >[],</span>
   input: {
     name,
     onChange,
     value
   },
-  labelOverrides,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
   meta: {
     pristine
   },
 }) =&gt; {
-  const [customProperties, setCustomProperties] = <span class="cstat-no" title="statement not covered" >useState([]);</span> // This is the list of customProperties we're currently displaying for edit.
-  const [dirtying, setDirtying] = <span class="cstat-no" title="statement not covered" >useState(false);</span>
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+&nbsp;
+  const [customProperties, setCustomProperties] = useState([]); // This is the list of customProperties we're currently displaying for edit.
+  const [dirtying, setDirtying] = useState(false);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
+  useEffect(() =&gt; {
     // When the user loads this form, we want to init the list of customProperties
     // we're displaying (state.customProperties) with the list of customProperties that have been set
     // either via defaults or previously-saved data. Since that data may come in
@@ -486,15 +597,15 @@ const CustomPropertiesList = <span class="cstat-no" title="statement not covered
     // the component when we add/remove rows. That happens _before_ `onChange` is called,
     // so internally we use `state.dirtying` to show that we just initiated an action
     // that will result in a dirty component.
-<span class="cstat-no" title="statement not covered" >    if (pristine &amp;&amp; !dirtying) {</span>
-<span class="cstat-no" title="statement not covered" >      setCustomProperties(availableCustomProperties.filter(</span>
-<span class="fstat-no" title="function not covered" >        cu</span>stomProperty =&gt; <span class="cstat-no" title="statement not covered" >value[customProperty.value] !== undefined</span>
+    <span class="missing-if-branch" title="else path not taken" >E</span>if (pristine &amp;&amp; !dirtying) {
+      setCustomProperties(availableCustomProperties.filter(
+        customProperty =&gt; value[customProperty.value] !== undefined
       ));
     }
-<span class="cstat-no" title="statement not covered" >    return null;</span>
+    return null;
   }, [availableCustomProperties, dirtying, pristine, value]);
 &nbsp;
-  const handleDeleteCustomProperty = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(c</span>ustomProperty, i) =&gt; {</span>
+  const handleDeleteCustomProperty = <span class="fstat-no" title="function not covered" >(c</span>ustomProperty, i) =&gt; {
     const currentValue = <span class="cstat-no" title="statement not covered" >value[customProperty.value]?.[0] ?? {};</span>
 &nbsp;
     const newCustomProperties = <span class="cstat-no" title="statement not covered" >[...customProperties];</span>
@@ -511,16 +622,16 @@ const CustomPropertiesList = <span class="cstat-no" title="statement not covered
     });
   };
 &nbsp;
-  const renderCustomProperties = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(c</span>ustomPropertyType) =&gt; {</span>
+  const renderCustomProperties = (customPropertyType) =&gt; {
     // This is necessary to track individually since "index" will span primary/optional for a given set
-    let internalPropertyCounter = <span class="cstat-no" title="statement not covered" >0;</span>
-<span class="cstat-no" title="statement not covered" >    return customProperties.map(<span class="fstat-no" title="function not covered" >(c</span>ustomProperty, index) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >      if (customPropertyType === 'primary' &amp;&amp; !customProperty.primary) <span class="cstat-no" title="statement not covered" >return undefined;</span></span>
-<span class="cstat-no" title="statement not covered" >      if (customPropertyType === 'optional' &amp;&amp; customProperty.primary) <span class="cstat-no" title="statement not covered" >return undefined;</span></span>
+    let internalPropertyCounter = 0;
+    return customProperties.map((customProperty, index) =&gt; {
+      <span class="missing-if-branch" title="if path not taken" >I</span>if (customPropertyType === 'primary' &amp;&amp; !customProperty.primary) <span class="cstat-no" title="statement not covered" >return undefined;</span>
+      if (customPropertyType === 'optional' &amp;&amp; customProperty.primary) return undefined;
 &nbsp;
-<span class="cstat-no" title="statement not covered" >      internalPropertyCounter += 1;</span>
+      internalPropertyCounter += 1;
 &nbsp;
-<span class="cstat-no" title="statement not covered" >      return (</span>
+      return (
         &lt;CustomPropertyFormCard
           key={`customPropertyField-${customProperty.value}-${index}`}
           {...{
@@ -531,6 +642,8 @@ const CustomPropertiesList = <span class="cstat-no" title="statement not covered
             handleDeleteCustomProperty,
             index,
             internalPropertyCounter,
+            intlKey: passedIntlKey,
+            intlNS: passedIntlNS,
             labelOverrides,
             name,
             onChange,
@@ -539,27 +652,41 @@ const CustomPropertiesList = <span class="cstat-no" title="statement not covered
           }}
         /&gt;
       );
-    }).filter(<span class="fstat-no" title="function not covered" >cp</span> =&gt; <span class="cstat-no" title="statement not covered" >cp !== undefined)</span>;
+    }).filter(cp =&gt; cp !== undefined);
   };
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  return (</span>
+  return (
     &lt;&gt;
       {
-        availableCustomProperties.some(<span class="fstat-no" title="function not covered" >(c</span>ustomProperty = <span class="branch-0 cbranch-no" title="branch not covered" >{})</span> =&gt; <span class="cstat-no" title="statement not covered" >customProperty.primary)</span> &amp;&amp;
+        availableCustomProperties.some((customProperty = <span class="branch-0 cbranch-no" title="branch not covered" >{})</span> =&gt; customProperty.primary) &amp;&amp;
           &lt;KeyValue
-            label={labelOverrides.primaryProperties ?? &lt;FormattedMessage id="stripes-kint-components.customProperties.primaryProperties" /&gt;}
+            label={
+              &lt;Headline margin="x-small" size="large" tag="h4"&gt;
+                {kintIntl.formatKintMessage({
+                  id: 'customProperties.primaryProperties',
+                  overrideValue: labelOverrides.primaryProperties
+                })}
+              &lt;/Headline&gt;
+            }
             value={renderCustomProperties('primary')}
           /&gt;
       }
       {
-        availableCustomProperties.some(<span class="fstat-no" title="function not covered" >(c</span>ustomProperty = <span class="branch-0 cbranch-no" title="branch not covered" >{})</span> =&gt; <span class="cstat-no" title="statement not covered" >!customProperty.primary)</span> &amp;&amp;
+        availableCustomProperties.some((customProperty = <span class="branch-0 cbranch-no" title="branch not covered" >{})</span> =&gt; !customProperty.primary) &amp;&amp;
           &lt;KeyValue
-            label={labelOverrides.optionalProperties ?? &lt;FormattedMessage id="stripes-kint-components.customProperties.optionalProperties" /&gt;}
+            label={
+              &lt;Headline margin="x-small" size="large" tag="h4"&gt;
+                {kintIntl.formatKintMessage({
+                  id: 'customProperties.optionalProperties',
+                  overrideValue: labelOverrides.optionalProperties
+                })}
+              &lt;/Headline&gt;
+            }
             value={renderCustomProperties('optional')}
           /&gt;
       }
       {
-        availableCustomProperties.some(<span class="fstat-no" title="function not covered" >(c</span>ustomProperty = <span class="branch-0 cbranch-no" title="branch not covered" >{})</span> =&gt; <span class="cstat-no" title="statement not covered" >!customProperty.primary)</span> &amp;&amp;
+        availableCustomProperties.some((customProperty = <span class="branch-0 cbranch-no" title="branch not covered" >{})</span> =&gt; !customProperty.primary) &amp;&amp;
         &lt;Button
           id="add-customproperty-btn"
           onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
@@ -567,55 +694,86 @@ const CustomPropertiesList = <span class="cstat-no" title="statement not covered
 <span class="cstat-no" title="statement not covered" >            setDirtying(true);</span>
           }}
         &gt;
-          {
-            labelOverrides.addProperty ??
-            &lt;FormattedMessage id="stripes-kint-components.customProperties.addProperty" /&gt;
-          }
+          {kintIntl.formatKintMessage({
+            id: 'customProperties.addProperty',
+            overrideValue: labelOverrides.addProperty
+          })}
         &lt;/Button&gt;
       }
     &lt;/&gt;
   );
 };
 &nbsp;
-const CustomPropertiesListField = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >({</span></span>
+const CustomPropertiesListField = ({
   ctx,
   customProperties,
-  labelOverrides,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
   ...fieldProps
 }) =&gt; {
-  const fieldRef = <span class="cstat-no" title="statement not covered" >useRef();</span>
-  const availableCustomProperties = <span class="cstat-no" title="statement not covered" >useAvailableCustomProperties(customProperties);</span>
+  const fieldRef = useRef();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+&nbsp;
+  // Map customProperties to bring together the options and the definition values
+  const availableCustomProperties = customProperties?.map(customProperty =&gt; {
+    let options = customProperty?.category?.values;
+    if (options) {
+      options = [
+        {
+          label: kintIntl.formatKintMessage({
+            id: 'notSet',
+            overrideValue: labelOverrides.notSet
+          }),
+          value: '',
+        },
+        ...options,
+      ];
+    }
+&nbsp;
+    return {
+      description: customProperty.description,
+      label: customProperty.label,
+      primary: customProperty.primary,
+      type: customProperty.type,
+      options,
+      value: customProperty.name,
+      defaultInternal: customProperty.defaultInternal,
+    };
+  });
 &nbsp;
-  const { initialValues } = <span class="cstat-no" title="statement not covered" >useFormState();</span>
-  const getInitialValue = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
-    const cps = <span class="cstat-no" title="statement not covered" >{};</span>
-<span class="cstat-no" title="statement not covered" >    (customProperties || [])</span>
-      .filter(<span class="fstat-no" title="function not covered" >cp</span> =&gt; <span class="cstat-no" title="statement not covered" >cp.primary)</span>
+  const { initialValues } = useFormState();
+  const getInitialValue = () =&gt; {
+    const cps = {};
+    (customProperties || <span class="branch-1 cbranch-no" title="branch not covered" >[])</span>
+      .filter(cp =&gt; cp.primary)
       // Change default to be an ignored customProperty.
       // This means any changes without setting the value will be ignored
-      .forEach(<span class="fstat-no" title="function not covered" >cp</span> =&gt; { <span class="cstat-no" title="statement not covered" >cps[cp.name] = [{ _delete: true }]; </span>});
+      .forEach(cp =&gt; { cps[cp.name] = [{ _delete: true }]; });
 &nbsp;
     // IMPORTANT -- All customproperty ctx sections are adding to the same "initialValue" field
     // Ensure that we don't already have initialValues for this particular set before setting them,
     // to ensure no looping behaviour
-<span class="cstat-no" title="statement not covered" >    if (Object.keys(cps).every(<span class="fstat-no" title="function not covered" >ke</span>y =&gt; <span class="cstat-no" title="statement not covered" >initialValues.customProperties?.[key] !== undefined)</span>) {</span>
-<span class="cstat-no" title="statement not covered" >      return initialValues.customProperties;</span>
+    if (Object.keys(cps).every(key =&gt; initialValues.customProperties?.[key] !== undefined)) {
+      return initialValues.customProperties;
     }
 &nbsp;
     // Ensure that if we already had these values in initialvalues they're not overwritten
-<span class="cstat-no" title="statement not covered" >    return ({ ...cps, ...initialValues.customProperties });</span>
+    return ({ ...cps, ...initialValues.customProperties });
   };
 &nbsp;
-<span class="cstat-no" title="statement not covered" >  return (</span>
+  return (
     &lt;Field
       {...fieldProps}
       initialValue={getInitialValue()}
-      render={<span class="fstat-no" title="function not covered" >p </span>=&gt; {
-<span class="cstat-no" title="statement not covered" >        return (</span>
+      render={p =&gt; {
+        return (
           &lt;CustomPropertiesList
             ref={fieldRef}
             availableCustomProperties={availableCustomProperties}
             ctx={ctx}
+            intlKey={passedIntlKey}
+            intlNS={passedIntlNS}
             labelOverrides={labelOverrides}
             {...p}
           /&gt;
@@ -625,13 +783,15 @@ const CustomPropertiesListField = <span class="cstat-no" title="statement not co
   );
 };
 &nbsp;
-<span class="cstat-no" title="statement not covered" >CustomPropertiesListField.propTypes = {</span>
+CustomPropertiesListField.propTypes = {
   ctx: PropTypes.string,
   customProperties: PropTypes.arrayOf(PropTypes.object),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
 };
 &nbsp;
-<span class="cstat-no" title="statement not covered" >CustomPropertiesList.propTypes = {</span>
+CustomPropertiesList.propTypes = {
   availableCustomProperties: PropTypes.arrayOf(PropTypes.object),
   ctx: PropTypes.string,
   input: PropTypes.shape({
@@ -639,6 +799,8 @@ const CustomPropertiesListField = <span class="cstat-no" title="statement not co
     value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     onChange: PropTypes.func,
   }),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   meta: PropTypes.object,
 };
@@ -652,7 +814,7 @@ export default CustomPropertiesListField;
             <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-09-16T13:23:25.290Z
             </div>
         <script src="../../prettify.js"></script>
         <script>