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

package/src/lib/CustomProperties/Config/CustomPropertyView.js

@@ -1,15 +1,19 @@
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { Col, InfoPopover, KeyValue, NoValue, Row } from '@folio/stripes/components';
 
+import { useKintIntl } from '../../hooks';
 import { MULTI_REFDATA_CLASS_NAME, REFDATA_CLASS_NAME } from '../../constants/customProperties';
 
 // A default option for CustProp view pane, with the ability to override labels for fields
 const CustomPropertyView = ({
   customProperty,
   helpPopovers,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {}
 }) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   return (
     <>
       <Row>
@@ -17,8 +21,12 @@ const CustomPropertyView = ({
           <KeyValue
             label={
               <div>
-                {labelOverrides?.label ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.label" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.label',
+                    overrideValue: labelOverrides?.label
+                  })
+                }
                 {helpPopovers?.label ?
                   <InfoPopover
                     content={helpPopovers?.label}
@@ -32,8 +40,12 @@ const CustomPropertyView = ({
           <KeyValue
             label={
               <div>
-                {labelOverrides?.name ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.name" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.name',
+                    overrideValue: labelOverrides?.name
+                  })
+                }
                 {helpPopovers?.name ?
                   <InfoPopover
                     content={helpPopovers?.name}
@@ -48,8 +60,10 @@ const CustomPropertyView = ({
         <Col xs={12}>
           <KeyValue
             label={
-              labelOverrides?.description ??
-              <FormattedMessage id="stripes-kint-components.customProperties.description" />
+              kintIntl.formatKintMessage({
+                id: 'customProperties.description',
+                overrideValue: labelOverrides?.description
+              })
             }
             value={customProperty?.description}
           />
@@ -59,38 +73,32 @@ const CustomPropertyView = ({
         <Col xs={6}>
           <KeyValue
             label={
-              labelOverrides?.primary ??
-              <FormattedMessage
-                id="stripes-kint-components.customProperties.primary"
-              />
+              kintIntl.formatKintMessage({
+                id: 'customProperties.primary',
+                overrideValue: labelOverrides?.primary
+              })
             }
             value={
-              <FormattedMessage
-                id={
-                  customProperty?.primary
-                    ? 'stripes-kint-components.yes'
-                    : 'stripes-kint-components.no'
-                }
-              />
+              kintIntl.formatKintMessage({
+                id: customProperty?.primary ? 'yes' : 'no',
+                overrideValue: customProperty?.primary ? labelOverrides.yes : labelOverrides.no,
+              })
             }
           />
         </Col>
         <Col xs={6}>
           <KeyValue
             label={
-              labelOverrides?.retired ??
-              <FormattedMessage
-                id="stripes-kint-components.customProperties.retired"
-              />
+              kintIntl.formatKintMessage({
+                id: 'customProperties.retired',
+                overrideValue: labelOverrides?.retired
+              })
             }
             value={
-              <FormattedMessage
-                id={
-                  customProperty?.retired
-                    ? 'stripes-kint-components.yes'
-                    : 'stripes-kint-components.no'
-                }
-              />
+              kintIntl.formatKintMessage({
+                id: customProperty?.retired ? 'yes' : 'no',
+                overrideValue: customProperty?.retired ? labelOverrides.yes : labelOverrides.no,
+              })
             }
           />
         </Col>
@@ -99,8 +107,10 @@ const CustomPropertyView = ({
         <Col xs={6}>
           <KeyValue
             label={
-              labelOverrides?.weight ??
-              <FormattedMessage id="stripes-kint-components.customProperties.weight" />
+              kintIntl.formatKintMessage({
+                id: 'customProperties.weight',
+                overrideValue: labelOverrides?.weight
+              })
             }
             value={customProperty?.weight}
           />
@@ -108,17 +118,16 @@ const CustomPropertyView = ({
         <Col xs={6}>
           <KeyValue
             label={
-              labelOverrides?.defaultVisibility ??
-              <FormattedMessage id="stripes-kint-components.customProperties.defaultVisibility" />
+              kintIntl.formatKintMessage({
+                id: 'customProperties.defaultVisibility',
+                overrideValue: labelOverrides?.defaultVisibility
+              })
             }
             value={
-              <FormattedMessage
-                id={
-                  customProperty?.defaultInternal
-                    ? 'stripes-kint-components.customProperties.internalTrue'
-                    : 'stripes-kint-components.customProperties.internalFalse'
-                }
-              />
+              kintIntl.formatKintMessage({
+                id: customProperty?.defaultInternal ? 'customProperties.internalTrue' : 'customProperties.internalFalse',
+                overrideValue: customProperty?.defaultInternal ? labelOverrides.internalTrue : labelOverrides.internalFalse,
+              })
             }
           />
         </Col>
@@ -128,8 +137,12 @@ const CustomPropertyView = ({
           <KeyValue
             label={
               <div>
-                {labelOverrides?.ctx ??
-                  <FormattedMessage id="stripes-kint-components.customProperties.ctx" />}
+                {
+                  kintIntl.formatKintMessage({
+                    id: 'customProperties.ctx',
+                    overrideValue: labelOverrides?.ctx
+                  })
+                }
                 {helpPopovers?.ctx ?
                   <InfoPopover
                     content={helpPopovers?.ctx}
@@ -145,10 +158,17 @@ const CustomPropertyView = ({
           {customProperty?.type && (
             <KeyValue
               label={
-                labelOverrides?.type ??
-                <FormattedMessage id="stripes-kint-components.customProperties.type" />
+                kintIntl.formatKintMessage({
+                  id: 'customProperties.type',
+                  overrideValue: labelOverrides?.type
+                })
+              }
+              value={
+                kintIntl.formatKintMessage({
+                  id: `customProperties.type.${customProperty?.type}`,
+                  overrideValue: labelOverrides?.[customProperty?.type]
+                })
               }
-              value={labelOverrides?.[customProperty?.type] ?? <FormattedMessage id={`stripes-kint-components.customProperties.type.${customProperty?.type}`} />}
             />
           )}
         </Col>
@@ -156,8 +176,10 @@ const CustomPropertyView = ({
           {(customProperty?.type === REFDATA_CLASS_NAME || customProperty?.type === MULTI_REFDATA_CLASS_NAME) && (
             <KeyValue
               label={
-                labelOverrides?.category ??
-                <FormattedMessage id="stripes-kint-components.customProperties.category" />
+                kintIntl.formatKintMessage({
+                  id: 'customProperties.category',
+                  overrideValue: labelOverrides?.category
+                })
               }
               value={customProperty?.category?.desc ?? <NoValue />}
             />
@@ -186,6 +208,8 @@ CustomPropertyView.propTypes = {
 
   }),
   helpPopovers: PropTypes.object,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object
 };
 

package/src/lib/CustomProperties/Config/CustomPropertyView.test.js

@@ -2,17 +2,19 @@ import React from 'react';
 import '@folio/stripes-erm-components/test/jest/__mock__';
 import { MemoryRouter } from 'react-router-dom';
 import { KeyValue } from '@folio/stripes-testing';
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
 
-import { custPropView } from './testResources';
 import CustomPropertyView from './CustomPropertyView';
+import customProperties from '../../../../test/jest/customProperties';
+import { renderWithKintHarness } from '../../../../test/jest';
+
+jest.mock('../../hooks');
 
 describe('CustomPropertyView', () => {
   beforeEach(() => {
     renderWithKintHarness(
       <MemoryRouter>
         <CustomPropertyView
-          {...custPropView}
+          customProperty={customProperties?.find(cp => cp.name === 'Eligible authors')}
         />
       </MemoryRouter>
     );
@@ -33,11 +35,11 @@ describe('CustomPropertyView', () => {
     await KeyValue('Primary').has({ value: 'Yes' });
   });
 
-  test('displays expected Deprecated value', async () => {
-    await KeyValue('Deprecated').has({ value: 'No' });
+  test('displays expected Retired value', async () => {
+    await KeyValue('Retired').has({ value: 'No' });
   });
 
-  test('displays expected Order weight value', async () => {
+  test('displays expected Weight value', async () => {
     await KeyValue('Order weight').has({ value: '0' });
   });
 

package/src/lib/CustomProperties/Config/README.md

@@ -4,32 +4,37 @@
 These components, namely CustomPropertiesSettings, and its constituent components CustomPropertiesLookup, CustomPropertiesForm and CustomPropertyView are designed for use in a FOLIO settings context, as a way to search through, view, create and edit custom properties.
 
 ## LabelOverrides
-These components can all be provided with a prop `labelOverrides` which allows the overriding of certain translation defaults provided by kint-components. These values must take a certain shape, which differs by translation key. A table is provided below.
+The default behaviour for translations as of v3.0.0 is that Stripes-Kint-Components will attempt to read a top level intlKey from the store, say `ui-agreements`, and then build a standard translation which the implementing library is expected to then provide. This allows us to keep translations existing within the FOLIO sphere of influence.
 
-Key | Type | Description | default
---- | --- | --- | ---
-category | node/string | Override for the display of field "category" | "Category" |
-confirmHeading | node/string | Override for the title of the confirmation modal which pops up on attempting to delete a custom property | "Delete custom property" |
-com.k_int.web.toolkit.custprops.types.CustomPropertyDate (See customPropertyConstants) | string | Override for the "Date" type custom property display. Must be string in order to support display within the Select. | "Date" |
-com.k_int.web.toolkit.custprops.types.CustomPropertyDecimal (See customPropertyConstants) | string | Override for the "Decimal" type custom property display. Must be string in order to support display within the Select. | "Decimal" |
-com.k_int.web.toolkit.custprops.types.CustomPropertyInteger (See customPropertyConstants) | string | Override for the "Integer" type custom property display. Must be string in order to support display within the Select. | "Integer" |
-com.k_int.web.toolkit.custprops.types.CustomPropertyMultiRefdata (See customPropertyConstants) | string | Override for the "MultiRefdata" type custom property display. Must be string in order to support display within the Select. | "Refdata (multi-select)" |
-com.k_int.web.toolkit.custprops.types.CustomPropertyRefdata (See customPropertyConstants) | string | Override for the "Refdata" type custom property display. Must be string in order to support display within the Select. | "Refdata" |
-com.k_int.web.toolkit.custprops.types.CustomPropertyText (See customPropertyConstants) | string | Override for the "Text" type custom property display. Must be string in order to support display within the Select. | "Text" |
-confirmMessage | function | Override for the message displayed in the confirmation modal on trying to delete a custom property. Accepts a function which will be provided the custom property object in question. | "Custom property <strong>{name}</strong> will be <strong>deleted</strong>." |
-ctx | node/string | Override for the display of field "ctx" | "Context" |
-deleteError | function | Override for the default callout message shown when a custom property fails to delete. Accepts a function to which it will provide the error message and the customProperty in question. | "<strong>Error: {label}</strong> was not deleted. {error}" |
-defaultVisibility | node/string | Override for the display of field "defaultVisibility" | "Default visibility" |
-description | node/string | Override for the display of field "description" | "Description" |
-label | node/string | Override for the display of field "label" | "Label" |
-modalTitleEdit | node/string | Override for the modal header on editing a custom property | "New custom property" |
-modalTitleNew | node/string | Override for the modal header on attempting to create a custom property | "Edit custom property" |
-name | node/string | Override for the display of field "name" | "Name" |
-paneTitle | node/string | Override for the pane title displayed in the main lookup section. | "Custom properties" |
-primary | node/string | Override for the display of field "primary" | "Primary" |
-primaryRetired | node/string | Override for the warning message on validation, preventing a custom property being set both as primary AND as retired | "A custom property cannot be both primary and retired" |
-retired | node/string | Override for the display of field "retired" | "Retired" |
-searchAriaLabel | string | Override for the aria label provided by the search field in the main custom property lookup section | 'custom-property-search-field' |
-type | node/string | Override for the display of field "type" | "Type" |
-viewPaneTitle | node/string/function | Label override for the title of the custom property view pane once one has been selected. This override accepts any shape, if a function is provided it will provide the customProperty and expect a string/node in return: `(customProperty) => ("${customProperty.name}-example")` | customProperty label if exists, falls back to customProperty name |
-weight | node/string | Override for the display of field "weight" | ""Order weight" |
+However, these components can all be provided with a prop `labelOverrides` to allow the overriding of this default behaviour. These values must be of type `String`, either referring to an intl translation key `ui-agreements.test.intl.key` or the string to display.
+
+In the case where a key is provided, for some translations the library will present values the resulting translation can read from.
+
+In some very rare cases, a fallback is provided by default by the library, meaning no intl or labelOverride is necessary.
+
+The default translation keys, their corresponding `labelOverrides` value, and any passed information are described below.
+
+LabelOverrides key | Default key | Description | Values provided | FallbackMessage |
+--- | --- | --- | --- | ---
+ category | `<moduleIntlKey>.customProperties.category` | Override for the display of field "category" | | |
+confirmHeading | `<moduleIntlKey>.customProperties.config.delete.confirmHeading` | Override for the title of the confirmation modal which pops up on attempting to delete a custom property | | |
+confirmMessage | `<moduleIntlKey>.customProperties.config.delete.confirmMessage` | Override for the message displayed in the confirmation modal on trying to delete a custom property. Accepts a function which will be provided the custom property object in question. | name: The label of the custom property, falling back to name |
+ctx | `<moduleIntlKey>.customProperties.ctx` | Override for the display of field "ctx" | | |
+deleteError | `<moduleIntlKey>customProperties.config.delete.errorMessage` | Override for the default callout message shown when a custom property fails to delete. Accepts a function to which it will provide the error message and the customProperty in question. | error; The error on delete, label: The label of the custom property |
+defaultVisibility | `<moduleIntlKey>.customProperties.defaultVisibility` | Override for the display of field "defaultVisibility" | | |
+description | `<moduleIntlKey>.customProperties.description` | Override for the display of field "description" | | |
+editModalTitle | `<moduleIntlKey>.customProperties.config.editModal` | Override for the modal header on editing a custom property | name: Label of custom property, falling back to name. |
+label | `<moduleIntlKey>.customProperties.label` | Override for the display of field "label" | | |
+name | `<moduleIntlKey>.customProperties.name` | Override for the display of field "name" | | |newModalTitle | `<moduleIntlKey>.customProperties.config.newModal` | Override for the modal header on attempting to create a custom property | "Edit custom property" |
+paneTitle | `<moduleIntlKey>.customProperties` | Override for the pane title displayed in the main lookup section. | | |
+primary | `<moduleIntlKey>.customProperties.primary` | Override for the display of field "primary" | | |primaryRetired | `<moduleIntlKey>.customProperties.errors.primaryRetired` | Override for the warning message on validation, preventing a custom property being set both as primary AND as retired | | |
+retired | `<moduleIntlKey>.customProperties.retired` | Override for the display of field "retired" | | |
+searchAriaLabel | `<moduleIntlKey>.customProperties.config.searchAriaLabel` | Override for the aria label provided by the search field in the main custom property lookup section | | 'custom-property-search-field' |
+type | `<moduleIntlKey>.customProperties.type` | Override for the display of field "type" | | |
+viewPaneTitle | `<moduleIntlKey>.customProperties.config.viewPaneTitle` | Label override for the title of the custom property view pane once one has been selected. | label: customProperty label if exists, falls back to customProperty name | customProperty label if exists, falls back to customProperty name |
+weight | `<moduleIntlKey>.customProperties.weight` | Override for the display of field "weight" | | |DATE_CLASS_NAME (See customPropertyConstants) | `<moduleIntlKey>.customProperties.type.${DATE_CLASS_NAME}` | Override for the "Date" type custom property display. | | |
+DECIMAL_CLASS_NAME (See customPropertyConstants) | `<moduleIntlKey>.customProperties.type.${DECIMAL_CLASS_NAME}` | Override for the "Decimal" type custom property display. | | |
+INTEGER_CLASS_NAME (See customPropertyConstants) | `<moduleIntlKey>.customProperties.type.${INTEGER_CLASS_NAME}` | Override for the "Integer" type custom property display. | | |
+MULTI_REFDATA_CLASS_NAME (See customPropertyConstants) | `<moduleIntlKey>.customProperties.type.${MULTI_REFDATA_CLASS_NAME}` | Override for the "MultiRefdata" type custom property display. | | |
+REFDATA_CLASS_NAME (See customPropertyConstants) | `<moduleIntlKey>.customProperties.type.${REFDATA_CLASS_NAME}` | Override for the "Refdata" type custom property display. | | |
+TEXT_CLASS_NAME (See customPropertyConstants) | `<moduleIntlKey>.customProperties.type.${TEXT_CLASS_NAME}` | Override for the "Text" type custom property display. | | |

package/src/lib/CustomProperties/Edit/CustomPropertiesEdit.js

@@ -5,6 +5,8 @@ const CustomPropertiesEdit = ({
   contexts = [],
   customPropertiesEndpoint,
   id,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   nameOverride
 }) => {
@@ -16,6 +18,8 @@ const CustomPropertiesEdit = ({
           ctx,
           customPropertiesEndpoint,
           id,
+          intlKey: passedIntlKey,
+          intlNS: passedIntlNS,
           labelOverrides,
           nameOverride
         }}
@@ -28,6 +32,8 @@ CustomPropertiesEdit.propTypes = {
   contexts: PropTypes.arrayOf(PropTypes.string),
   customPropertiesEndpoint: PropTypes.string,
   id: PropTypes.string,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   nameOverride: PropTypes.string
 };

package/src/lib/CustomProperties/Edit/CustomPropertiesEdit.test.js

@@ -3,10 +3,9 @@ import '@folio/stripes-erm-components/test/jest/__mock__';
 import { waitFor } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
 
-import { custPropEdit } from './testResources';
 import CustomPropertiesEdit from './CustomPropertiesEdit';
+import { renderWithKintHarness } from '../../../../test/jest';
 
 jest.mock('./CustomPropertiesEditCtx', () => () => <div>CustomPropertiesEditCtx</div>);
 
@@ -16,7 +15,12 @@ describe('CustomPropertiesEdit', () => {
     renderComponent = renderWithKintHarness(
       <MemoryRouter>
         <CustomPropertiesEdit
-          {...custPropEdit}
+          contexts={[
+            'isNull',
+            'OpenAccess'
+          ]}
+          customPropertiesEndpoint="erm/custprops"
+          id="supplementaryProperties"
         />
       </MemoryRouter>
     );

package/src/lib/CustomProperties/Edit/CustomPropertiesEditCtx.js

@@ -1,43 +1,43 @@
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { Accordion } from '@folio/stripes/components';
 
 import CustomPropertiesListField from './CustomPropertiesListField';
-import { useCustomProperties } from '../../hooks';
+import { useCustomProperties, useKintIntl } from '../../hooks';
 
 const CustomPropertiesEditCtx = ({
   ctx,
   customPropertiesEndpoint,
   id,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   nameOverride
 }) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   // Deal with all the possible label override options
   const getAccordionLabel = () => {
     // Special case for null context
     if (ctx === 'isNull') {
       return (
-        labelOverrides.noContext ??
-        <FormattedMessage id="stripes-kint-components.customProperties" />
-      );
-    }
-
-    // Label overrides for specific contexts
-    if (labelOverrides[ctx]) {
-      return labelOverrides[ctx];
-    }
-
-    // Label override for default title, taking ctx into account
-    if (labelOverrides.defaultTitle && typeof labelOverrides.defaultTitle === 'function') {
-      return (
-        labelOverrides.defaultTitle(ctx)
+        kintIntl.formatKintMessage({
+          id: 'customProperties',
+          overrideValue: labelOverrides.noContext
+        })
       );
     }
 
-    // Label override for default title or finally built in default
+    // Chain formatKintMessages together using provided fallbackMessage to
+    // allow for "If override or translation exists, use it, else use default"
     return (
-      labelOverrides.defaultTitle ??
-      <FormattedMessage id="stripes-kint-components.customProperties.ctx.title" values={{ ctx }} />
+      kintIntl.formatKintMessage({
+        id: `customProperties.ctx.${ctx}`,
+        overrideValue: labelOverrides[ctx],
+        fallbackMessage: kintIntl.formatKintMessage({
+          id: 'customProperties.defaultTitle',
+          overrideValue: labelOverrides.defaultTitle
+        }, { ctx })
+      }, { ctx })
     );
   };
 
@@ -67,6 +67,8 @@ const CustomPropertiesEditCtx = ({
       <CustomPropertiesListField
         ctx={ctx}
         customProperties={custprops}
+        intlKey={passedIntlKey}
+        intlNS={passedIntlNS}
         labelOverrides={labelOverrides}
         name={nameOverride ?? 'customProperties'}
       />
@@ -78,6 +80,8 @@ CustomPropertiesEditCtx.propTypes = {
   ctx: PropTypes.string,
   customPropertiesEndpoint: PropTypes.string,
   id: PropTypes.string,
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   nameOverride: PropTypes.string
 };

package/src/lib/CustomProperties/Edit/CustomPropertiesEditCtx.test.js

@@ -3,12 +3,12 @@ import '@folio/stripes-erm-components/test/jest/__mock__';
 import { waitFor } from '@testing-library/react';
 
 import { MemoryRouter } from 'react-router-dom';
-import { renderWithKintHarness } from '../../../../test/jest/helpers';
 
-import { custPropEditCtx } from './testResources';
 import CustomPropertiesEditCtx from './CustomPropertiesEditCtx';
+import { renderWithKintHarness } from '../../../../test/jest';
 
 jest.mock('./CustomPropertiesListField', () => () => <div>CustomPropertiesListField</div>);
+jest.mock('../../hooks');
 
 describe('CustomPropertiesEditCtx', () => {
   let renderComponent;
@@ -16,7 +16,9 @@ describe('CustomPropertiesEditCtx', () => {
     renderComponent = renderWithKintHarness(
       <MemoryRouter>
         <CustomPropertiesEditCtx
-          {...custPropEditCtx}
+          ctx="OpenAccess"
+          customPropertiesEndpoint="erm/custprops"
+          id="supplementaryProperties"
         />
       </MemoryRouter>
     );

package/src/lib/CustomProperties/Edit/CustomPropertiesListField.js

@@ -2,9 +2,8 @@ import { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Field, useFormState } from 'react-final-form';
 
-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';
 
 const CustomPropertiesList = ({
@@ -14,11 +13,15 @@ const CustomPropertiesList = ({
     onChange,
     value
   },
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
   labelOverrides = {},
   meta: {
     pristine
   },
 }) => {
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
   const [customProperties, setCustomProperties] = useState([]); // This is the list of customProperties we're currently displaying for edit.
   const [dirtying, setDirtying] = useState(false);
 
@@ -78,6 +81,8 @@ const CustomPropertiesList = ({
             handleDeleteCustomProperty,
             index,
             internalPropertyCounter,
+            intlKey: passedIntlKey,
+            intlNS: passedIntlNS,
             labelOverrides,
             name,
             onChange,
@@ -94,14 +99,28 @@ const CustomPropertiesList = ({
       {
         availableCustomProperties.some((customProperty = {}) => customProperty.primary) &&
           <KeyValue
-            label={labelOverrides.primaryProperties ?? <FormattedMessage id="stripes-kint-components.customProperties.primaryProperties" />}
+            label={
+              <Headline margin="x-small" size="large" tag="h4">
+                {kintIntl.formatKintMessage({
+                  id: 'customProperties.primaryProperties',
+                  overrideValue: labelOverrides.primaryProperties
+                })}
+              </Headline>
+            }
             value={renderCustomProperties('primary')}
           />
       }
       {
         availableCustomProperties.some((customProperty = {}) => !customProperty.primary) &&
           <KeyValue
-            label={labelOverrides.optionalProperties ?? <FormattedMessage id="stripes-kint-components.customProperties.optionalProperties" />}
+            label={
+              <Headline margin="x-small" size="large" tag="h4">
+                {kintIntl.formatKintMessage({
+                  id: 'customProperties.optionalProperties',
+                  overrideValue: labelOverrides.optionalProperties
+                })}
+              </Headline>
+            }
             value={renderCustomProperties('optional')}
           />
       }
@@ -114,10 +133,10 @@ const CustomPropertiesList = ({
             setDirtying(true);
           }}
         >
-          {
-            labelOverrides.addProperty ??
-            <FormattedMessage id="stripes-kint-components.customProperties.addProperty" />
-          }
+          {kintIntl.formatKintMessage({
+            id: 'customProperties.addProperty',
+            overrideValue: labelOverrides.addProperty
+          })}
         </Button>
       }
     </>
@@ -127,11 +146,40 @@ const CustomPropertiesList = ({
 const CustomPropertiesListField = ({
   ctx,
   customProperties,
-  labelOverrides,
+  intlKey: passedIntlKey,
+  intlNS: passedIntlNS,
+  labelOverrides = {},
   ...fieldProps
 }) => {
   const fieldRef = useRef();
-  const availableCustomProperties = useAvailableCustomProperties(customProperties);
+  const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
+
+  // Map customProperties to bring together the options and the definition values
+  const availableCustomProperties = customProperties?.map(customProperty => {
+    let options = customProperty?.category?.values;
+    if (options) {
+      options = [
+        {
+          label: kintIntl.formatKintMessage({
+            id: 'notSet',
+            overrideValue: labelOverrides.notSet
+          }),
+          value: '',
+        },
+        ...options,
+      ];
+    }
+
+    return {
+      description: customProperty.description,
+      label: customProperty.label,
+      primary: customProperty.primary,
+      type: customProperty.type,
+      options,
+      value: customProperty.name,
+      defaultInternal: customProperty.defaultInternal,
+    };
+  });
 
   const { initialValues } = useFormState();
   const getInitialValue = () => {
@@ -163,6 +211,8 @@ const CustomPropertiesListField = ({
             ref={fieldRef}
             availableCustomProperties={availableCustomProperties}
             ctx={ctx}
+            intlKey={passedIntlKey}
+            intlNS={passedIntlNS}
             labelOverrides={labelOverrides}
             {...p}
           />
@@ -175,6 +225,8 @@ const CustomPropertiesListField = ({
 CustomPropertiesListField.propTypes = {
   ctx: PropTypes.string,
   customProperties: PropTypes.arrayOf(PropTypes.object),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
 };
 
@@ -186,6 +238,8 @@ CustomPropertiesList.propTypes = {
     value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     onChange: PropTypes.func,
   }),
+  intlKey: PropTypes.string,
+  intlNS: PropTypes.string,
   labelOverrides: PropTypes.object,
   meta: PropTypes.object,
 };