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

package/src/artifacts/coverage-jest/lcov-report/CustomProperties/Config/CustomPropertyForm.js.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">67.74% </span>
+                <span class="strong">66.66% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>21/31</span>
+                <span class='fraction'>20/30</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">61.53% </span>
+                <span class="strong">54.76% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>40/65</span>
+                <span class='fraction'>23/42</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">70% </span>
+                <span class="strong">66.66% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>7/10</span>
+                <span class='fraction'>6/9</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">67.85% </span>
+                <span class="strong">66.66% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>19/28</span>
+                <span class='fraction'>18/27</span>
             </div>
         
             
@@ -453,7 +453,80 @@
 <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></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<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>
+<a name='L406'></a><a href='#L406'>406</a>
+<a name='L407'></a><a href='#L407'>407</a>
+<a name='L408'></a><a href='#L408'>408</a>
+<a name='L409'></a><a href='#L409'>409</a>
+<a name='L410'></a><a href='#L410'>410</a>
+<a name='L411'></a><a href='#L411'>411</a>
+<a name='L412'></a><a href='#L412'>412</a>
+<a name='L413'></a><a href='#L413'>413</a>
+<a name='L414'></a><a href='#L414'>414</a>
+<a name='L415'></a><a href='#L415'>415</a>
+<a name='L416'></a><a href='#L416'>416</a>
+<a name='L417'></a><a href='#L417'>417</a>
+<a name='L418'></a><a href='#L418'>418</a>
+<a name='L419'></a><a href='#L419'>419</a>
+<a name='L420'></a><a href='#L420'>420</a>
+<a name='L421'></a><a href='#L421'>421</a>
+<a name='L422'></a><a href='#L422'>422</a>
+<a name='L423'></a><a href='#L423'>423</a>
+<a name='L424'></a><a href='#L424'>424</a>
+<a name='L425'></a><a href='#L425'>425</a>
+<a name='L426'></a><a href='#L426'>426</a>
+<a name='L427'></a><a href='#L427'>427</a>
+<a name='L428'></a><a href='#L428'>428</a>
+<a name='L429'></a><a href='#L429'>429</a>
+<a name='L430'></a><a href='#L430'>430</a>
+<a name='L431'></a><a href='#L431'>431</a>
+<a name='L432'></a><a href='#L432'>432</a>
+<a name='L433'></a><a href='#L433'>433</a>
+<a name='L434'></a><a href='#L434'>434</a>
+<a name='L435'></a><a href='#L435'>435</a>
+<a name='L436'></a><a href='#L436'>436</a>
+<a name='L437'></a><a href='#L437'>437</a>
+<a name='L438'></a><a href='#L438'>438</a>
+<a name='L439'></a><a href='#L439'>439</a>
+<a name='L440'></a><a href='#L440'>440</a>
+<a name='L441'></a><a href='#L441'>441</a>
+<a name='L442'></a><a href='#L442'>442</a>
+<a name='L443'></a><a href='#L443'>443</a>
+<a name='L444'></a><a href='#L444'>444</a>
+<a name='L445'></a><a href='#L445'>445</a>
+<a name='L446'></a><a href='#L446'>446</a>
+<a name='L447'></a><a href='#L447'>447</a>
+<a name='L448'></a><a href='#L448'>448</a>
+<a name='L449'></a><a href='#L449'>449</a>
+<a name='L450'></a><a href='#L450'>450</a>
+<a name='L451'></a><a href='#L451'>451</a>
+<a name='L452'></a><a href='#L452'>452</a>
+<a name='L453'></a><a href='#L453'>453</a>
+<a name='L454'></a><a href='#L454'>454</a>
+<a name='L455'></a><a href='#L455'>455</a>
+<a name='L456'></a><a href='#L456'>456</a>
+<a name='L457'></a><a href='#L457'>457</a>
+<a name='L458'></a><a href='#L458'>458</a>
+<a name='L459'></a><a href='#L459'>459</a>
+<a name='L460'></a><a href='#L460'>460</a>
+<a name='L461'></a><a href='#L461'>461</a>
+<a name='L462'></a><a href='#L462'>462</a>
+<a name='L463'></a><a href='#L463'>463</a>
+<a name='L464'></a><a href='#L464'>464</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>
@@ -484,6 +557,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">40x</span>
 <span class="cline-any cline-yes">40x</span>
 <span class="cline-any cline-yes">40x</span>
@@ -507,11 +582,23 @@
 <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">40x</span>
 <span class="cline-any cline-yes">40x</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-yes">40x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -638,6 +725,28 @@
 <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-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">20x</span>
 <span class="cline-any cline-yes">20x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -646,6 +755,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>
@@ -689,13 +800,46 @@
 <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-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-yes">20x</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-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>
@@ -843,9 +987,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 { useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, useIntl } from 'react-intl';
 import { Field, useFormState, useForm } from 'react-final-form';
 &nbsp;
 import {
@@ -867,16 +1012,19 @@ import {
   MULTI_REFDATA_CLASS_NAME,
   DATE_CLASS_NAME
 } from '../../constants/customProperties';
+import { useKintIntl } from '../../hooks';
 &nbsp;
 const CustomPropertyForm = ({
   contextFilterOptions,
   helpPopovers,
-  labelOverrides,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
   refdata
 }) =&gt; {
   const { values } = useFormState();
   const { change } = useForm();
-  const intl = useIntl();
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
 &nbsp;
   const booleanToString = booleanValue =&gt; booleanValue?.toString();
   const stringToBoolean = <span class="fstat-no" title="function not covered" >st</span>ringValue =&gt; <span class="cstat-no" title="statement not covered" >stringValue === 'true';</span>
@@ -893,14 +1041,26 @@ const CustomPropertyForm = ({
     if (!filterValue || <span class="branch-1 cbranch-no" title="branch not covered" >exactMatch)</span> {
       return null;
     } else <span class="missing-if-branch" title="else path not taken" >E</span>{
-<span class="cstat-no" title="statement not covered" >      return &lt;FormattedMessage id="stripes-kint-components.customProperties.ctx.addContext" values={{ value: filterValue }} /&gt;;</span>
+<span class="cstat-no" title="statement not covered" >      return kintIntl.formatKintMessage(</span>
+        {
+          id: 'customProperties.ctx.addContext',
+          overrideValue: labelOverrides?.addCtx
+        },
+        {
+          value: filterValue
+        }
+      );
     }
   };
 &nbsp;
   const primaryRetiredValidator = (_v, allValues) =&gt; {
     <span class="missing-if-branch" title="if path not taken" >I</span>if (allValues.primary &amp;&amp; allValues.retired) {
-<span class="cstat-no" title="statement not covered" >      return labelOverrides?.primaryRetired ??</span>
-        &lt;FormattedMessage id="stripes-kint-components.errors.primaryRetired" /&gt;;
+<span class="cstat-no" title="statement not covered" >      return kintIntl.formatKintMessage(</span>
+        {
+          id: 'customProperties.errors.primaryRetired',
+          overrideValue: labelOverrides?.primaryRetired
+        }
+      );
     }
     return null;
   };
@@ -915,48 +1075,58 @@ const CustomPropertyForm = ({
             dataOptions={[
               { label: '', value: '' },
               {
-                label: intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${DECIMAL_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${DECIMAL_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[DECIMAL_CLASS_NAME]
                 }),
                 value: DECIMAL_CLASS_NAME,
               },
               {
-                label: intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${INTEGER_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${INTEGER_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[INTEGER_CLASS_NAME]
                 }),
                 value: INTEGER_CLASS_NAME,
               },
               {
-                label: intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${TEXT_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${TEXT_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[TEXT_CLASS_NAME]
                 }),
                 value: TEXT_CLASS_NAME,
               },
               {
-                label: intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${REFDATA_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${REFDATA_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[REFDATA_CLASS_NAME]
                 }),
                 value: REFDATA_CLASS_NAME,
               },
               {
-                label: intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${MULTI_REFDATA_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${MULTI_REFDATA_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[MULTI_REFDATA_CLASS_NAME]
                 }),
                 value: MULTI_REFDATA_CLASS_NAME,
               },
               {
-                label: intl.formatMessage({
-                  id: `stripes-kint-components.customProperties.type.${DATE_CLASS_NAME}`,
+                label: kintIntl.formatKintMessage({
+                  id: `customProperties.type.${DATE_CLASS_NAME}`,
+                  overrideValue: labelOverrides?.[DATE_CLASS_NAME]
                 }),
                 value: DATE_CLASS_NAME,
               },
             ]
             }
-            disabled={values?.id}
+            disabled={!!values?.id}
             label={
               &lt;div&gt;
-                {labelOverrides?.type ??
-                  &lt;FormattedMessage id="stripes-kint-components.customProperties.type" /&gt;}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.type',
+                    overrideValue: labelOverrides?.type
+                  })
+                }
                 {helpPopovers?.type ?
 <span class="branch-0 cbranch-no" title="branch not covered" >                  &lt;InfoPopover</span>
                     content={helpPopovers?.type}
@@ -973,11 +1143,15 @@ const CustomPropertyForm = ({
 <span class="branch-2 cbranch-no" title="branch not covered" >            &lt;Field</span>
               component={Select}
               dataOptions={[{ label: '', value: '' }, ...refdata]}
-              disabled={values?.id}
+              disabled={!!values?.id}
               label={
                 &lt;div&gt;
-                  {labelOverrides?.category ??
-                    &lt;FormattedMessage id="stripes-kint-components.customProperties.category" /&gt;}
+                  {
+                    kintIntl.formatKintMessage({
+                      id: 'customProperties.category',
+                      overrideValue: labelOverrides?.category
+                    })
+                  }
                   {helpPopovers?.category ?
                     &lt;InfoPopover
                       content={helpPopovers?.category}
@@ -998,12 +1172,16 @@ const CustomPropertyForm = ({
             id="custom-prop-label"
             label={
               &lt;div&gt;
-                {labelOverrides?.label ??
-                  &lt;FormattedMessage id="stripes-kint-components.customProperties.label" /&gt;}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.label',
+                    overrideValue: labelOverrides?.label
+                  })
+                }
                 {helpPopovers?.label ?
-                  &lt;InfoPopover
+<span class="branch-0 cbranch-no" title="branch not covered" >                  &lt;InfoPopover</span>
                     content={helpPopovers?.label}
-                  /&gt; : <span class="branch-1 cbranch-no" title="branch not covered" >null}</span>
+                  /&gt; : null}
               &lt;/div&gt;
             }
             name="label"
@@ -1017,12 +1195,16 @@ const CustomPropertyForm = ({
             id="custom-prop-name"
             label={
               &lt;div&gt;
-                {labelOverrides?.name ??
-                  &lt;FormattedMessage id="stripes-kint-components.customProperties.name" /&gt;}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.name',
+                    overrideValue: labelOverrides?.name
+                  })
+                }
                 {helpPopovers?.name ?
-                  &lt;InfoPopover
+<span class="branch-0 cbranch-no" title="branch not covered" >                  &lt;InfoPopover</span>
                     content={helpPopovers?.name}
-                  /&gt; : <span class="branch-1 cbranch-no" title="branch not covered" >null}</span>
+                  /&gt; : null}
               &lt;/div&gt;
             }
             name="name"
@@ -1031,9 +1213,11 @@ const CustomPropertyForm = ({
               <span class="missing-if-branch" title="else path not taken" >E</span>if (v &amp;&amp; v.length) {
                 return /^[a-z][a-z0-9]*$/i.test(v) ? (
                   undefined
-                ) : (
-<span class="branch-1 cbranch-no" title="branch not covered" >                  &lt;FormattedMessage id="stripes-kint-components.errors.hasNonAlphaName" /&gt;</span>
-                );
+                ) :
+<span class="branch-1 cbranch-no" title="branch not covered" >                kintIntl.formatKintMessage({</span>
+                  id: 'errors.hasNonAlphaName',
+                  overrideValue: labelOverrides?.hasNonAlphaName
+                });
               }
 &nbsp;
 <span class="cstat-no" title="statement not covered" >              return requiredValidator(v);</span>
@@ -1048,8 +1232,12 @@ const CustomPropertyForm = ({
             id="custom-prop-description"
             label={
               &lt;div&gt;
-                {labelOverrides?.description ??
-                  &lt;FormattedMessage id="stripes-kint-components.customProperties.description" /&gt;}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.description',
+                    overrideValue: labelOverrides?.description
+                  })
+                }
                 {helpPopovers?.description ?
 <span class="branch-0 cbranch-no" title="branch not covered" >                  &lt;InfoPopover</span>
                     content={helpPopovers?.description}
@@ -1058,6 +1246,7 @@ const CustomPropertyForm = ({
             }
             name="description"
             required
+            // FIXME I think the required Validator might pose translation problems
             validate={requiredValidator}
           /&gt;
         &lt;/Col&gt;
@@ -1066,11 +1255,20 @@ const CustomPropertyForm = ({
             actions={[{ onSelect: addCtx, render: renderAddCtx }]}
             component={MultiSelection}
             dataOptions={contextOptions}
-            emptyMessage={intl.formatMessage({ id: 'stripes-kint-components.customProperties.noCtxFound' })}
+            emptyMessage={
+              kintIntl.formatKintMessage({
+                id: 'customProperties.noCtxFound',
+                overrideValue: labelOverrides?.noCtxFound
+              })
+            }
             label={
               &lt;div&gt;
-                {labelOverrides?.ctx ??
-                  &lt;FormattedMessage id="stripes-kint-components.customProperties.ctx" /&gt;}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.ctx',
+                    overrideValue: labelOverrides?.ctx
+                  })
+                }
                 {helpPopovers?.ctx ?
 <span class="branch-0 cbranch-no" title="branch not covered" >                  &lt;InfoPopover</span>
                     content={helpPopovers?.ctx}
@@ -1085,7 +1283,6 @@ const CustomPropertyForm = ({
 <span class="cstat-no" title="statement not covered" >                change('ctx', undefined);</span>
               }
             }}
-            validate={value =&gt; (value?.length &gt; 1 ? <span class="branch-0 cbranch-no" title="branch not covered" >&lt;FormattedMessage id="stripes-kint-components.customProperties.ctx.error.moreThanOne" /&gt; </span>: null)}
           /&gt;
         &lt;/Col&gt;
       &lt;/Row&gt;
@@ -1096,8 +1293,12 @@ const CustomPropertyForm = ({
             id="custom-prop-weight"
             label={
               &lt;div&gt;
-                {labelOverrides?.weight ??
-                  &lt;FormattedMessage id="stripes-kint-components.customProperties.weight" /&gt;}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.weight',
+                    overrideValue: labelOverrides?.weight
+                  })
+                }
                 {helpPopovers?.weight ?
 <span class="branch-0 cbranch-no" title="branch not covered" >                  &lt;InfoPopover</span>
                     content={helpPopovers?.weight}
@@ -1115,14 +1316,16 @@ const CustomPropertyForm = ({
             component={Select}
             dataOptions={[
               {
-                label: intl.formatMessage({
-                  id: 'stripes-kint-components.yes',
+                label: kintIntl.formatKintMessage({
+                  id: 'yes',
+                  overrideValue: labelOverrides?.yes
                 }),
                 value: 'true',
               },
               {
-                label: intl.formatMessage({
-                  id: 'stripes-kint-components.no',
+                label: kintIntl.formatKintMessage({
+                  id: 'no',
+                  overrideValue: labelOverrides?.no
                 }),
                 value: 'false',
               },
@@ -1130,8 +1333,12 @@ const CustomPropertyForm = ({
             format={booleanToString}
             label={
               &lt;div&gt;
-                {labelOverrides?.primary ??
-                  &lt;FormattedMessage id="stripes-kint-components.customProperties.primary" /&gt;}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.primary',
+                    overrideValue: labelOverrides?.primary
+                  })
+                }
                 {helpPopovers?.primary ?
 <span class="branch-0 cbranch-no" title="branch not covered" >                  &lt;InfoPopover</span>
                     content={helpPopovers?.primary}
@@ -1152,14 +1359,16 @@ const CustomPropertyForm = ({
             component={Select}
             dataOptions={[
               {
-                label: intl.formatMessage({
-                  id: 'stripes-kint-components.yes',
+                label: kintIntl.formatKintMessage({
+                  id: 'yes',
+                  overrideValue: labelOverrides?.yes
                 }),
                 value: 'true',
               },
               {
-                label: intl.formatMessage({
-                  id: 'stripes-kint-components.no',
+                label: kintIntl.formatKintMessage({
+                  id: 'no',
+                  overrideValue: labelOverrides?.no
                 }),
                 value: 'false',
               },
@@ -1167,8 +1376,12 @@ const CustomPropertyForm = ({
             format={booleanToString}
             label={
               &lt;div&gt;
-                {labelOverrides?.retired ??
-<span class="branch-1 cbranch-no" title="branch not covered" >                  &lt;FormattedMessage id="stripes-kint-components.customProperties.retired" /&gt;}</span>
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.retired',
+                    overrideValue: labelOverrides?.retired
+                  })
+                }
                 {helpPopovers?.retired ?
 <span class="branch-0 cbranch-no" title="branch not covered" >                  &lt;InfoPopover</span>
                     content={helpPopovers?.retired}
@@ -1189,16 +1402,16 @@ const CustomPropertyForm = ({
             component={Select}
             dataOptions={[
               {
-                label: intl.formatMessage({
-                  id:
-                    'stripes-kint-components.customProperties.internalTrue',
+                label: kintIntl.formatKintMessage({
+                  id: 'customProperties.internalTrue',
+                  overrideValue: labelOverrides?.internalTrue
                 }),
                 value: 'true',
               },
               {
-                label: intl.formatMessage({
-                  id:
-                    'stripes-kint-components.customProperties.internalFalse',
+                label: kintIntl.formatKintMessage({
+                  id: 'customProperties.internalFalse',
+                  overrideValue: labelOverrides?.internalFalse
                 }),
                 value: 'false',
               },
@@ -1206,8 +1419,12 @@ const CustomPropertyForm = ({
             format={booleanToString}
             label={
               &lt;div&gt;
-                {labelOverrides?.defaultVisibility ??
-                  &lt;FormattedMessage id="stripes-kint-components.customProperties.defaultVisibility" /&gt;}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.defaultVisibility',
+                    overrideValue: labelOverrides?.defaultVisibility
+                  })
+                }
                 {helpPopovers?.defaultVisibility ?
 <span class="branch-0 cbranch-no" title="branch not covered" >                  &lt;InfoPopover</span>
                     content={helpPopovers?.defaultVisibility}
@@ -1228,6 +1445,8 @@ const CustomPropertyForm = ({
 CustomPropertyForm.propTypes = {
   contextFilterOptions: PropTypes.arrayOf(PropTypes.object),
   helpPopovers: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   refdata: PropTypes.arrayOf(PropTypes.object)
 };
@@ -1240,7 +1459,7 @@ export default CustomPropertyForm;
             <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>