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

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

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">56.52% </span>
+                <span class="strong">60% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>39/69</span>
+                <span class='fraction'>51/85</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">50% </span>
+                <span class="strong">62.29% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>21/42</span>
+                <span class='fraction'>38/61</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">45% </span>
+                <span class="strong">47.61% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>9/20</span>
+                <span class='fraction'>10/21</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">60% </span>
+                <span class="strong">62.96% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>39/65</span>
+                <span class='fraction'>51/81</span>
             </div>
         
             
@@ -394,7 +394,80 @@
 <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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<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>
+<a name='L357'></a><a href='#L357'>357</a>
+<a name='L358'></a><a href='#L358'>358</a>
+<a name='L359'></a><a href='#L359'>359</a>
+<a name='L360'></a><a href='#L360'>360</a>
+<a name='L361'></a><a href='#L361'>361</a>
+<a name='L362'></a><a href='#L362'>362</a>
+<a name='L363'></a><a href='#L363'>363</a>
+<a name='L364'></a><a href='#L364'>364</a>
+<a name='L365'></a><a href='#L365'>365</a>
+<a name='L366'></a><a href='#L366'>366</a>
+<a name='L367'></a><a href='#L367'>367</a>
+<a name='L368'></a><a href='#L368'>368</a>
+<a name='L369'></a><a href='#L369'>369</a>
+<a name='L370'></a><a href='#L370'>370</a>
+<a name='L371'></a><a href='#L371'>371</a>
+<a name='L372'></a><a href='#L372'>372</a>
+<a name='L373'></a><a href='#L373'>373</a>
+<a name='L374'></a><a href='#L374'>374</a>
+<a name='L375'></a><a href='#L375'>375</a>
+<a name='L376'></a><a href='#L376'>376</a>
+<a name='L377'></a><a href='#L377'>377</a>
+<a name='L378'></a><a href='#L378'>378</a>
+<a name='L379'></a><a href='#L379'>379</a>
+<a name='L380'></a><a href='#L380'>380</a>
+<a name='L381'></a><a href='#L381'>381</a>
+<a name='L382'></a><a href='#L382'>382</a>
+<a name='L383'></a><a href='#L383'>383</a>
+<a name='L384'></a><a href='#L384'>384</a>
+<a name='L385'></a><a href='#L385'>385</a>
+<a name='L386'></a><a href='#L386'>386</a>
+<a name='L387'></a><a href='#L387'>387</a>
+<a name='L388'></a><a href='#L388'>388</a>
+<a name='L389'></a><a href='#L389'>389</a>
+<a name='L390'></a><a href='#L390'>390</a>
+<a name='L391'></a><a href='#L391'>391</a>
+<a name='L392'></a><a href='#L392'>392</a>
+<a name='L393'></a><a href='#L393'>393</a>
+<a name='L394'></a><a href='#L394'>394</a>
+<a name='L395'></a><a href='#L395'>395</a>
+<a name='L396'></a><a href='#L396'>396</a>
+<a name='L397'></a><a href='#L397'>397</a>
+<a name='L398'></a><a href='#L398'>398</a>
+<a name='L399'></a><a href='#L399'>399</a>
+<a name='L400'></a><a href='#L400'>400</a>
+<a name='L401'></a><a href='#L401'>401</a>
+<a name='L402'></a><a href='#L402'>402</a>
+<a name='L403'></a><a href='#L403'>403</a>
+<a name='L404'></a><a href='#L404'>404</a>
+<a name='L405'></a><a href='#L405'>405</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>
@@ -412,9 +485,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-yes">1x</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>
@@ -428,6 +501,58 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">14x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">14x</span>
+<span class="cline-any cline-yes">14x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">14x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-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-yes">14x</span>
+<span class="cline-any cline-yes">1x</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-yes">13x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</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-yes">12x</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">12x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">14x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -460,6 +585,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>
@@ -542,9 +669,6 @@
 <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">2x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -586,9 +710,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-yes">14x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">14x</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>
@@ -624,6 +749,20 @@
 <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-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">14x</span>
 <span class="cline-any cline-yes">14x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -650,6 +789,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-yes">14x</span>
 <span class="cline-any cline-yes">14x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -677,6 +819,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-yes">14x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -725,10 +869,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></td><td class="text"><pre class="prettyprint lang-js">import PropTypes from 'prop-types';
 &nbsp;
-import { FormattedMessage, useIntl } from 'react-intl';
-&nbsp;
 import { Field } from 'react-final-form';
 &nbsp;
 import {
@@ -743,7 +887,7 @@ import {
 &nbsp;
 import * as CUSTOM_PROPERTY_TYPES from '../../constants/customProperties';
 &nbsp;
-import { customPropertyValidator } from '../../utils/validators';
+import { useKintIntl } from '../../hooks';
 &nbsp;
 const CustomPropertyField = ({
   availableCustomProperties,
@@ -751,13 +895,67 @@ const CustomPropertyField = ({
   customPropertyType,
   customProperties,
   index,
-  labelOverrides = <span class="branch-0 cbranch-no" title="branch not covered" >{},</span>
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
   name,
   onChange,
   value,
   setCustomProperties
 }) =&gt; {
-  const intl = useIntl();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+&nbsp;
+  // Set up the validator for the customProperty
+  const customPropertyValidator = (fieldValue, allValues) =&gt; {
+    const { note, publicNote, value: currentValue } = allValues?.customProperties?.[customProperty?.value]?.[0] ?? {};
+&nbsp;
+    <span class="missing-if-branch" title="if path not taken" >I</span>if ((note &amp;&amp; !currentValue) || (publicNote &amp;&amp; !currentValue)) {
+<span class="cstat-no" title="statement not covered" >      if (</span>
+        customProperty.type === CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME ||
+        customProperty.type === CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME
+      ) {
+<span class="cstat-no" title="statement not covered" >        return (</span>
+          kintIntl.formatKintMessage({
+            id: 'customProperties.errors.customPropertyNoteInvalidNumber',
+            overrideValue: labelOverrides.customPropertyNoteInvalidNumberError
+          })
+        );
+      } else {
+<span class="cstat-no" title="statement not covered" >        return (</span>
+          kintIntl.formatKintMessage({
+            id: 'customProperties.errors.customPropertyNoteWithoutValue',
+            overrideValue: labelOverrides.customPropertyNoteWithoutValueError
+          })
+        );
+      }
+    }
+&nbsp;
+    if (customProperty.type === CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME) {
+      const regexp = /^-?[\d]*(\.[\d]{0,2})?$/;
+      return (fieldValue &amp;&amp; !regexp.test(fieldValue)) ?
+<span class="branch-0 cbranch-no" title="branch not covered" >        kintIntl.formatKintMessage({</span>
+          id: 'errors.maxTwoDecimals',
+          overrideValue: labelOverrides.maxTwoDecimalsError
+        }) : undefined;
+    }
+&nbsp;
+    if (customProperty.type === CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME) {
+      const min = Number.MIN_SAFE_INTEGER;
+      const max = Number.MAX_SAFE_INTEGER;
+&nbsp;
+      return (fieldValue &amp;&amp; (fieldValue &gt; max || fieldValue &lt; min)) ?
+<span class="branch-0 cbranch-no" title="branch not covered" >        kintIntl.formatKintMessage({</span>
+          id: 'errors.valueNotInRange',
+          overrideValue: labelOverrides.valueNotInRangeError
+        }, { min, max }) : undefined;
+    }
+&nbsp;
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (!customProperty.primary &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >!currentValue)</span> {
+<span class="cstat-no" title="statement not covered" >      return kintIntl.formatMessage({ id: 'stripes-core.label.missingRequiredField' });</span>
+    }
+&nbsp;
+    return undefined;
+  };
 &nbsp;
   const getCustomProperty = <span class="fstat-no" title="function not covered" >(c</span>ustomPropertyValue) =&gt; {
 <span class="cstat-no" title="statement not covered" >    return availableCustomProperties.find(<span class="fstat-no" title="function not covered" >cp</span> =&gt; <span class="cstat-no" title="statement not covered" >cp.value === customPropertyValue)</span>;</span>
@@ -787,8 +985,10 @@ const CustomPropertyField = ({
         dataOptions={[customProperty, ...unsetCustomProperties]} // The selected customProperty, and the available unset customProperties
         id={`edit-customproperty-${index}-name`}
         label={
-          labelOverrides.name ??
-          &lt;FormattedMessage id="stripes-kint-components.customProperty.name" /&gt;
+          kintIntl.formatKintMessage({
+            id: 'customProperties.name',
+            overrideValue: labelOverrides.name
+          })
         }
         onChange={<span class="fstat-no" title="function not covered" >e </span>=&gt; {
           const newValue = <span class="cstat-no" title="statement not covered" >e.target.value;</span>
@@ -819,7 +1019,7 @@ const CustomPropertyField = ({
   };
 &nbsp;
   const renderCustomPropertyValue = () =&gt; {
-    const currentValue = value[customProperty.value] ? value[customProperty.value][0] : <span class="branch-1 cbranch-no" title="branch not covered" >{};</span>
+    const currentValue = value[customProperty.value] ? value[customProperty.value][0] : {};
     const min = Number.MIN_SAFE_INTEGER;
     const max = Number.MAX_SAFE_INTEGER;
 &nbsp;
@@ -867,12 +1067,9 @@ const CustomPropertyField = ({
       case CUSTOM_PROPERTY_TYPES.INTEGER_CLASS_NAME:
       case CUSTOM_PROPERTY_TYPES.DECIMAL_CLASS_NAME:
         fieldProps = {
-          badInput: intl.formatMessage({ id: 'stripes-kint-components.errors.customPropertyInvalidNumber' }),
           component: TextField,
           max,
           min,
-          rangeOverflow: intl.formatMessage({ id: 'stripes-kint-components.errors.customPropertyDecimalValueNotInRange' }, { min, max }),
-          rangeUnderflow: intl.formatMessage({ id: 'stripes-kint-components.errors.customPropertyDecimalValueNotInRange' }, { min, max }),
           step: 'any',
           type: 'number',
         };
@@ -911,21 +1108,22 @@ const CustomPropertyField = ({
         data-test-customproperty-value
         id={`edit-customproperty-${index}-value`}
         label={
-          labelOverrides.value ??
-          &lt;FormattedMessage id="stripes-kint-components.customProperty.value" /&gt;
+          kintIntl.formatKintMessage({
+            id: 'customProperties.value',
+            overrideValue: labelOverrides.value
+          })
         }
         name={`${name}.${customProperty.value}[0].value`}
         onChange={handleChange}
         required={!customProperty.primary}
-        validate={(fieldValue, allValues) =&gt; customPropertyValidator(fieldValue, allValues, customProperty)}
-        valueMissing={intl.formatMessage({ id: 'stripes-core.label.missingRequiredField' })}
+        validate={(fieldValue, allValues) =&gt; customPropertyValidator(fieldValue, allValues)}
         {...fieldProps}
       /&gt;
     );
   };
 &nbsp;
   const renderCustomPropertyVisibility = () =&gt; {
-    const customPropertyObject = value[customProperty.value]?.[0] ?? <span class="branch-1 cbranch-no" title="branch not covered" >{};</span>
+    const customPropertyObject = value[customProperty.value]?.[0] ?? {};
 &nbsp;
     const handleChange = <span class="fstat-no" title="function not covered" >e </span>=&gt; {
 <span class="cstat-no" title="statement not covered" >      onChange({</span>
@@ -941,13 +1139,27 @@ const CustomPropertyField = ({
       &lt;Select
         data-test-customproperty-visibility
         dataOptions={[
-          { value: true, label: intl.formatMessage({ id: 'stripes-kint-components.customProperty.internalTrue' }) },
-          { value: false, label: intl.formatMessage({ id: 'stripes-kint-components.customProperty.internalFalse' }) }
+          {
+            value: true,
+            label: kintIntl.formatKintMessage({
+              id: 'customProperties.internalTrue',
+              overrideValue: labelOverrides.internalTrue
+            })
+          },
+          {
+            value: false,
+            label: kintIntl.formatKintMessage({
+              id: 'customProperties.internalFalse',
+              overrideValue: labelOverrides.internalFalse
+            })
+          }
         ]}
         id={`edit-customproperty-${index}-visibility`}
         label={
-          labelOverrides.visibility ??
-          &lt;FormattedMessage id="stripes-kint-components.customProperty.visibility" /&gt;
+          kintIntl.formatKintMessage({
+            id: 'customProperties.visibility',
+            overrideValue: labelOverrides.visibility
+          })
         }
         onChange={handleChange}
         value={customPropertyObject?.internal ?? customProperty.defaultInternal}
@@ -956,7 +1168,7 @@ const CustomPropertyField = ({
   };
 &nbsp;
   const renderCustomPropertyNoteInternal = () =&gt; {
-    const customPropertyObject = value[customProperty.value]?.[0] ?? <span class="branch-1 cbranch-no" title="branch not covered" >{};</span>
+    const customPropertyObject = value[customProperty.value]?.[0] ?? {};
 &nbsp;
     const handleChange = <span class="fstat-no" title="function not covered" >e </span>=&gt; {
 <span class="cstat-no" title="statement not covered" >      onChange({</span>
@@ -973,8 +1185,11 @@ const CustomPropertyField = ({
         data-test-customproperty-note
         id={`edit-customproperty-${index}-internal-note`}
         label={
-          labelOverrides.internalNote ??
-          &lt;FormattedMessage id="stripes-kint-components.customProperty.internalNote" /&gt;}
+          kintIntl.formatKintMessage({
+            id: 'customProperties.internalNote',
+            overrideValue: labelOverrides.internalNote
+          })
+        }
         onChange={handleChange}
         value={customPropertyObject?.note}
       /&gt;
@@ -982,7 +1197,7 @@ const CustomPropertyField = ({
   };
 &nbsp;
   const renderCustomPropertyNotePublic = () =&gt; {
-    const customPropertyObject = value[customProperty.value]?.[0] ?? <span class="branch-1 cbranch-no" title="branch not covered" >{};</span>
+    const customPropertyObject = value[customProperty.value]?.[0] ?? {};
 &nbsp;
     const handleChange = <span class="fstat-no" title="function not covered" >e </span>=&gt; {
 <span class="cstat-no" title="statement not covered" >      onChange({</span>
@@ -999,8 +1214,10 @@ const CustomPropertyField = ({
         data-test-customproperty-public-note
         id={`edit-customproperty-${index}-public-note`}
         label={
-          labelOverrides.publicNote ??
-          &lt;FormattedMessage id="stripes-kint-components.customProperty.publicNote" /&gt;
+          kintIntl.formatKintMessage({
+            id: 'customProperties.publicNote',
+            overrideValue: labelOverrides.publicNote
+          })
         }
         onChange={handleChange}
         value={customPropertyObject?.publicNote}
@@ -1048,6 +1265,8 @@ CustomPropertyField.propTypes = {
   customPropertyType: PropTypes.string,
   customProperties: PropTypes.arrayOf(PropTypes.object),
   index: PropTypes.number,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   name: PropTypes.string,
   onChange: PropTypes.func,
@@ -1063,7 +1282,7 @@ export default CustomPropertyField;
             <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 2022-11-22T09:57:19.883Z
+                at 2022-12-09T15:17:50.295Z
             </div>
         <script src="../../prettify.js"></script>
         <script>