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

package/es/lib/CustomProperties/Filter/CustomPropertiesFilter.js

@@ -9,8 +9,6 @@ var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactIntl = require("react-intl");
-
 var _components = require("@folio/stripes/components");
 
 var _hooks = require("../../hooks");
@@ -50,13 +48,15 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var CustomPropertiesFilter = function CustomPropertiesFilter(_ref) {
-  var _parsedFilterData$num3, _labelOverrides$custo2;
+  var _parsedFilterData$num, _parsedFilterData$num2;
 
   var _ref$activeFilters = _ref.activeFilters,
       custPropFilters = _ref$activeFilters.customProperties,
       restOfFilters = _objectWithoutProperties(_ref$activeFilters, _excluded),
       customPropertiesEndpoint = _ref.customPropertiesEndpoint,
       filterHandlers = _ref.filterHandlers,
+      passedIntlKey = _ref.intlKey,
+      passedIntlNS = _ref.intlNS,
       _ref$labelOverrides = _ref.labelOverrides,
       labelOverrides = _ref$labelOverrides === void 0 ? {} : _ref$labelOverrides;
 
@@ -73,6 +73,8 @@ var CustomPropertiesFilter = function CustomPropertiesFilter(_ref) {
     return setEditingFilters(false);
   };
 
+  var kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
+
   var _useCustomProperties = (0, _hooks.useCustomProperties)({
     endpoint: customPropertiesEndpoint,
     returnQueryObject: true,
@@ -95,34 +97,16 @@ var CustomPropertiesFilter = function CustomPropertiesFilter(_ref) {
       custprops = _useCustomProperties.data,
       isLoading = _useCustomProperties.isLoading;
 
-  var parsedFilterData = (0, _useParseActiveFilterStrings.default)(custPropFilters || []);
-
-  var getFiltersApplied = function getFiltersApplied() {
-    var _labelOverrides$filte, _parsedFilterData$num2;
-
-    if (labelOverrides.filtersApplied && typeof labelOverrides.filtersApplied === 'function') {
-      var _parsedFilterData$num;
-
-      return labelOverrides.filtersApplied((_parsedFilterData$num = parsedFilterData === null || parsedFilterData === void 0 ? void 0 : parsedFilterData.numberOfFilters) !== null && _parsedFilterData$num !== void 0 ? _parsedFilterData$num : 0);
-    }
-
-    return (_labelOverrides$filte = labelOverrides.filtersApplied) !== null && _labelOverrides$filte !== void 0 ? _labelOverrides$filte : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "stripes-kint-components.customProperty.filtersApplied",
-      values: {
-        count: (_parsedFilterData$num2 = parsedFilterData === null || parsedFilterData === void 0 ? void 0 : parsedFilterData.numberOfFilters) !== null && _parsedFilterData$num2 !== void 0 ? _parsedFilterData$num2 : 0
-      }
-    });
-  };
+  var parsedFilterData = (0, _useParseActiveFilterStrings.default)(custPropFilters || [], passedIntlKey, passedIntlNS, labelOverrides);
 
   if (isLoading) {
-    var _labelOverrides$custo;
-
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Accordion, {
       closedByDefault: true,
       header: _components.FilterAccordionHeader,
       id: "clickable-custprop-filter",
-      label: (_labelOverrides$custo = labelOverrides.customProperties) !== null && _labelOverrides$custo !== void 0 ? _labelOverrides$custo : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-        id: "stripes-kint-components.customProperties"
+      label: kintIntl.formatKintMessage({
+        id: 'customProperties',
+        overrideValue: labelOverrides.customProperties
       }),
       separator: false,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
@@ -156,11 +140,12 @@ var CustomPropertiesFilter = function CustomPropertiesFilter(_ref) {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Accordion, {
     closedByDefault: true,
-    displayClearButton: ((_parsedFilterData$num3 = parsedFilterData === null || parsedFilterData === void 0 ? void 0 : parsedFilterData.numberOfFilters) !== null && _parsedFilterData$num3 !== void 0 ? _parsedFilterData$num3 : 0) > 0,
+    displayClearButton: ((_parsedFilterData$num = parsedFilterData === null || parsedFilterData === void 0 ? void 0 : parsedFilterData.numberOfFilters) !== null && _parsedFilterData$num !== void 0 ? _parsedFilterData$num : 0) > 0,
     header: _components.FilterAccordionHeader,
     id: "clickable-custprop-filter",
-    label: (_labelOverrides$custo2 = labelOverrides.customProperties) !== null && _labelOverrides$custo2 !== void 0 ? _labelOverrides$custo2 : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "stripes-kint-components.customProperties"
+    label: kintIntl.formatKintMessage({
+      id: 'customProperties',
+      overrideValue: labelOverrides.customProperties
     }),
     onClearFilter: function onClearFilter() {
       return filterHandlers.state(_objectSpread(_objectSpread({}, restOfFilters), {}, {
@@ -170,7 +155,12 @@ var CustomPropertiesFilter = function CustomPropertiesFilter(_ref) {
     separator: false,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Layout, {
       className: "padding-bottom-gutter",
-      children: getFiltersApplied()
+      children: kintIntl.formatKintMessage({
+        id: 'customProperty.filtersApplied',
+        overrideValue: labelOverrides.filtersApplied
+      }, {
+        count: (_parsedFilterData$num2 = parsedFilterData === null || parsedFilterData === void 0 ? void 0 : parsedFilterData.numberOfFilters) !== null && _parsedFilterData$num2 !== void 0 ? _parsedFilterData$num2 : 0
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilterForm.default, {
       customProperties: custprops,
       editingFilters: editingFilters,
@@ -189,6 +179,8 @@ CustomPropertiesFilter.propTypes = {
   activeFilters: _propTypes.default.object,
   customPropertiesEndpoint: _propTypes.default.string,
   filterHandlers: _propTypes.default.object,
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
   labelOverrides: _propTypes.default.object
 };
 var _default = CustomPropertiesFilter;

package/es/lib/CustomProperties/Filter/CustomPropertiesFilter.test.js

@@ -10,12 +10,14 @@ var _reactRouterDom = require("react-router-dom");
 
 var _stripesTesting = require("@folio/stripes-testing");
 
-var _helpers = require("../../../../test/jest/helpers");
-
 var _testResources = require("./testResources");
 
 var _CustomPropertiesFilter = _interopRequireDefault(require("./CustomPropertiesFilter"));
 
+var _helpers = _interopRequireDefault(require("../../../../test/helpers"));
+
+var _jest = require("../../../../test/jest");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,6 +28,7 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+jest.mock('../../hooks');
 jest.mock('./CustomPropertiesFilterForm', function () {
   return function () {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -36,16 +39,15 @@ jest.mock('./CustomPropertiesFilterForm', function () {
 describe('CustomPropertiesFilter', function () {
   var renderComponent;
   beforeEach(function () {
-    renderComponent = (0, _helpers.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilter.default, {
         activeFilters: _testResources.activeFilters,
         customPropertiesEndpoint: "erm/custprops",
-        filterHandlers: _testResources.filterHandlers,
-        labelOverrides: _testResources.labelOverrides
+        filterHandlers: _testResources.filterHandlers
       })
-    }));
+    }), {}, _helpers.default);
   });
-  test('renders the Supplementrary properties Accordion by id', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+  test('renders the Custom properties Accordion by id', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
@@ -62,13 +64,13 @@ describe('CustomPropertiesFilter', function () {
       }
     }, _callee);
   })));
-  test('renders the Supplementrary properties Accordion', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+  test('renders the Custom properties Accordion', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
             _context2.next = 2;
-            return (0, _stripesTesting.Accordion)('Supplementrary properties').exists();
+            return (0, _stripesTesting.Accordion)('Custom properties').exists();
 
           case 2:
           case "end":
@@ -77,7 +79,7 @@ describe('CustomPropertiesFilter', function () {
       }
     }, _callee2);
   })));
-  test('renders the edit supplementary property filters button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+  test('renders the edit custom property filters button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
     return _regeneratorRuntime().wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {

package/es/lib/CustomProperties/Filter/CustomPropertiesFilterField.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactIntl = require("react-intl");
-
 var _reactFinalForm = require("react-final-form");
 
 var _reactFinalFormArrays = require("react-final-form-arrays");
@@ -21,6 +19,8 @@ var _validators = require("../../utils/validators");
 
 var _CustomPropertiesRule = _interopRequireDefault(require("./CustomPropertiesRule"));
 
+var _hooks = require("../../hooks");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,12 +44,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var CustomPropertiesFilterField = function CustomPropertiesFilterField(_ref) {
-  var _labelOverrides$custo, _customProperties$fin, _customProperties$fin2, _fields$value$index2;
+  var _customProperties$fin, _customProperties$fin2, _fields$value$index2;
 
   var _ref$customProperties = _ref.customProperties,
       customProperties = _ref$customProperties === void 0 ? [] : _ref$customProperties,
       fields = _ref.fields,
       index = _ref.index,
+      passedIntlKey = _ref.intlKey,
+      passedIntlNS = _ref.intlNS,
       _ref$labelOverrides = _ref.labelOverrides,
       labelOverrides = _ref$labelOverrides === void 0 ? {} : _ref$labelOverrides,
       name = _ref.name;
@@ -60,50 +62,35 @@ var CustomPropertiesFilterField = function CustomPropertiesFilterField(_ref) {
       push = _useForm.mutators.push;
 
   var _useFormState = (0, _reactFinalForm.useFormState)(),
-      values = _useFormState.values; // Deal with all the possible label override options
-
-
-  var getRetiredName = function getRetiredName(customProperty) {
-    var _labelOverrides$retir;
-
-    // Label override for default card title,
-    if (labelOverrides.retiredName && typeof labelOverrides.retiredName === 'function') {
-      return labelOverrides.retiredName(customProperty.label);
-    } // Label override for default title or finally built in default
-
-
-    return (_labelOverrides$retir = labelOverrides.retiredName) !== null && _labelOverrides$retir !== void 0 ? _labelOverrides$retir : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "stripes-kint-components.customProperty.retiredName",
-      values: {
-        name: customProperty.label
-      }
-    });
-  };
+      values = _useFormState.values;
 
+  var kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
       id: "input-custprop-".concat(index),
-      label: (_labelOverrides$custo = labelOverrides.customProperty) !== null && _labelOverrides$custo !== void 0 ? _labelOverrides$custo : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-        id: "stripes-kint-components.customProperty"
+      label: kintIntl.formatKintMessage({
+        id: 'customProperty',
+        overrideValue: labelOverrides.customProperty
       }),
       name: "".concat(name, ".customProperty"),
       placeholder: " ",
       render: function render(fieldProps) {
         var _Object$entries;
 
+        var sortedGroupedCustProps = (_Object$entries = Object.entries(groupedCustomProperties)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.sort(function (a, b) {
+          if (a[0] === 'isNull') return -1; // Make sure noContext is at top
+
+          if (a[0].toLowerCase() < b[0].toLowerCase()) return -1;
+          if (a[0].toLowerCase() > b[0].toLowerCase()) return 1;
+          return 0;
+        });
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Select, _objectSpread(_objectSpread({}, fieldProps), {}, {
           placeholder: null // placeholder default causes issues
           ,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
             value: "",
             children: " "
-          }), (_Object$entries = Object.entries(groupedCustomProperties)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.sort(function (a, b) {
-            if (a[0] === 'isNull') return -1; // Make sure noContext is at top
-
-            if (a[0].toLowerCase() < b[0].toLowerCase()) return -1;
-            if (a[0].toLowerCase() > b[0].toLowerCase()) return 1;
-            return 0;
-          }).map(function (_ref2) {
+          }, "empty-option"), sortedGroupedCustProps.map(function (_ref2) {
             var _ref3 = _slicedToArray(_ref2, 2),
                 key = _ref3[0],
                 value = _ref3[1];
@@ -113,16 +100,22 @@ var CustomPropertiesFilterField = function CustomPropertiesFilterField(_ref) {
               children: value.map(function (v) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
                   value: v.name,
-                  children: v.retired ? getRetiredName(v) : v.label
+                  children: v.retired ? kintIntl.formatKintMessage({
+                    id: 'customProperty.retiredName',
+                    overrideValue: labelOverrides.retiredName
+                  }, {
+                    name: v.label
+                  }) : v.label
                 }, v.id);
               })
-            });
+            }, "custom-property-optgroup-".concat(key));
           })]
         }));
       },
       required: true,
       validate: _validators.required
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": "selected-custprop-name-".concat(index),
       id: "selected-custprop-name-".concat(index),
       style: {
         display: 'none'
@@ -140,8 +133,9 @@ var CustomPropertiesFilterField = function CustomPropertiesFilterField(_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Label, {
           id: "rule-column-header-comparator",
           required: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-            id: "stripes-erm-components.customProperty.filters.comparator"
+          children: kintIntl.formatKintMessage({
+            id: 'comparator',
+            overrideValue: labelOverrides.comparator
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
@@ -149,8 +143,9 @@ var CustomPropertiesFilterField = function CustomPropertiesFilterField(_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Label, {
           id: "rule-column-header-value",
           required: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-            id: "stripes-erm-components.customProperty.filters.value"
+          children: kintIntl.formatKintMessage({
+            id: 'value',
+            overrideValue: labelOverrides.value
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
@@ -172,6 +167,7 @@ var CustomPropertiesFilterField = function CustomPropertiesFilterField(_ref) {
               return t.name === fields.value[index].customProperty;
             }),
             index: ruleFieldIndex,
+            labelOverrides: labelOverrides,
             name: ruleFieldName,
             onDelete: function onDelete() {
               return ruleFields.remove(ruleFieldIndex);
@@ -186,8 +182,9 @@ var CustomPropertiesFilterField = function CustomPropertiesFilterField(_ref) {
       onClick: function onClick() {
         return push("".concat(name, ".rules"));
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-        id: "stripes-erm-components.customProperty.filters.addRule"
+      children: kintIntl.formatKintMessage({
+        id: 'addRule',
+        overrideValue: labelOverrides.addRule
       })
     })]
   });
@@ -197,6 +194,8 @@ CustomPropertiesFilterField.propTypes = {
   customProperties: _propTypes.default.arrayOf(_propTypes.default.object),
   fields: _propTypes.default.object,
   index: _propTypes.default.number,
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
   labelOverrides: _propTypes.default.object,
   name: _propTypes.default.string
 };

package/es/lib/CustomProperties/Filter/CustomPropertiesFilterField.test.js

@@ -2,40 +2,55 @@
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactFinalFormArrays = require("react-final-form-arrays");
+
 require("@folio/stripes-erm-components/test/jest/__mock__");
 
 var _helpers = require("@folio/stripes-erm-components/test/jest/helpers");
 
 var _reactRouterDom = require("react-router-dom");
 
-var _helpers2 = require("../../../../test/jest/helpers");
+var _CustomPropertiesFilterField = _interopRequireDefault(require("./CustomPropertiesFilterField"));
 
-var _testResources = require("./testResources");
+var _customProperties = _interopRequireDefault(require("../../../../test/jest/customProperties"));
 
-var _CustomPropertiesFilterField = _interopRequireDefault(require("./CustomPropertiesFilterField"));
+var _jest = require("../../../../test/jest");
+
+var _testResources = require("./testResources");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+jest.mock('../../hooks');
 var onSubmit = jest.fn();
 var renderComponent;
 describe('CustomPropertiesFilterField', function () {
-  renderComponent = (0, _helpers2.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+  renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_helpers.TestForm, {
+      initialValues: {
+        filters: _testResources.data.filters
+      },
       onSubmit: onSubmit,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilterField.default, {
-        customProperties: _testResources.customProperties,
-        fields: _testResources.fields,
-        index: 0,
-        labelOverrides: _testResources.labelOverrides,
-        name: "filters[0]"
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
+        name: "filters",
+        children: function children(_ref) {
+          var fields = _ref.fields;
+          return fields.map(function (name, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilterField.default, {
+              customProperties: _customProperties.default,
+              fields: fields,
+              index: index,
+              name: name
+            }, "custom-property-filter-field-".concat(name, "[").concat(index, "]"));
+          });
+        }
       })
     })
   }));
-  test('displays the Supplementary property label', function () {
+  test('displays the Custom property label', function () {
     var _renderComponent = renderComponent,
-        getByText = _renderComponent.getByText;
-    expect(getByText('Supplementary property')).toBeInTheDocument();
+        getByTestId = _renderComponent.getByTestId;
+    expect(getByTestId('selected-custprop-name-0')).toHaveTextContent('Author Identification');
   });
 });

package/es/lib/CustomProperties/Filter/CustomPropertiesFilterFieldArray.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _reactIntl = require("react-intl");
-
 var _reactFinalForm = require("react-final-form");
 
 var _reactFinalFormArrays = require("react-final-form-arrays");
@@ -17,61 +15,39 @@ var _components = require("@folio/stripes/components");
 
 var _CustomPropertiesFilterField = _interopRequireDefault(require("./CustomPropertiesFilterField"));
 
+var _hooks = require("../../hooks");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var CustomPropertiesFilterFieldArray = function CustomPropertiesFilterFieldArray(_ref) {
-  var _labelOverrides$addFi;
-
   var customProperties = _ref.customProperties,
+      passedIntlKey = _ref.intlKey,
+      passedIntlNS = _ref.intlNS,
       _ref$labelOverrides = _ref.labelOverrides,
       labelOverrides = _ref$labelOverrides === void 0 ? {} : _ref$labelOverrides;
 
   var _useForm = (0, _reactFinalForm.useForm)(),
       push = _useForm.mutators.push;
 
-  var getCardTitle = function getCardTitle(index) {
-    var _labelOverrides$custo;
-
-    if (labelOverrides.customPropertyFilter && typeof labelOverrides.customPropertyFilter === 'function') {
-      return labelOverrides.customPropertyFilter(index);
-    }
-
-    return (_labelOverrides$custo = labelOverrides.customPropertyFilter) !== null && _labelOverrides$custo !== void 0 ? _labelOverrides$custo : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "stripes-kint-components.customProperty.filterIndex",
-      values: {
-        index: index + 1
-      }
-    });
-  };
-
-  var getTooltipText = function getTooltipText(index) {
-    var _labelOverrides$remov;
-
-    if (labelOverrides.removeFilter && typeof labelOverrides.removeFilter === 'function') {
-      return labelOverrides.removeFilter(index);
-    }
-
-    return (_labelOverrides$remov = labelOverrides.removeFilter) !== null && _labelOverrides$remov !== void 0 ? _labelOverrides$remov : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-      id: "stripes-kint-components.customProperty.removeFilter",
-      values: {
-        number: index + 1
-      }
-    });
-  };
-
+  var kintIntl = (0, _hooks.useKintIntl)(passedIntlKey, passedIntlNS);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
       name: "filters",
       children: function children(_ref2) {
         var fields = _ref2.fields;
         return fields.map(function (name, index) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Card, {
               headerEnd: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
                 id: "custom-property-filter-card-delete-[".concat(index, "]-tooltip"),
-                text: getTooltipText(index),
+                text: kintIntl.formatKintMessage({
+                  id: 'customProperty.removeFilter',
+                  overrideValue: labelOverrides.removeFilter
+                }, {
+                  index: index + 1
+                }),
                 children: function children(_ref3) {
                   var ref = _ref3.ref,
                       ariaIds = _ref3.ariaIds;
@@ -87,7 +63,12 @@ var CustomPropertiesFilterFieldArray = function CustomPropertiesFilterFieldArray
                 }
               }),
               headerStart: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
-                children: getCardTitle(index)
+                children: kintIntl.formatKintMessage({
+                  id: 'customProperty.filterIndex',
+                  overrideValue: labelOverrides.customPropertyFilter
+                }, {
+                  index: index + 1
+                })
               }),
               marginBottom0: index !== fields.length - 1,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilterField.default, {
@@ -96,14 +77,15 @@ var CustomPropertiesFilterFieldArray = function CustomPropertiesFilterFieldArray
                 index: index,
                 labelOverrides: labelOverrides,
                 name: name
-              })
+              }, "custom-property-filter-field-".concat(name, "[").concat(index, "]"))
             }, "custom-property-filter-card[".concat(index, "]")), index < fields.value.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Layout, {
               className: "textCentered",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-                id: "stripes-kint-components.AND"
+              children: kintIntl.formatKintMessage({
+                id: 'AND',
+                overrideValue: labelOverrides.AND
               })
-            })]
-          });
+            }, "custom-property-filter[".concat(index, "]-AND"))]
+          }, "custom-property-filter-card[".concat(index, "]-container"));
         });
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
@@ -112,8 +94,9 @@ var CustomPropertiesFilterFieldArray = function CustomPropertiesFilterFieldArray
           rules: [{}]
         });
       },
-      children: (_labelOverrides$addFi = labelOverrides.addFilter) !== null && _labelOverrides$addFi !== void 0 ? _labelOverrides$addFi : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
-        id: "stripes-kint-components.customProperty.addFilter"
+      children: kintIntl.formatKintMessage({
+        id: 'customProperty.addFilter',
+        overrideValue: labelOverrides.addFilter
       })
     })]
   });
@@ -121,6 +104,8 @@ var CustomPropertiesFilterFieldArray = function CustomPropertiesFilterFieldArray
 
 CustomPropertiesFilterFieldArray.propTypes = {
   customProperties: _propTypes.default.arrayOf(_propTypes.default.object),
+  intlKey: _propTypes.default.string,
+  intlNS: _propTypes.default.string,
   labelOverrides: _propTypes.default.object
 };
 var _default = CustomPropertiesFilterFieldArray;

package/es/lib/CustomProperties/Filter/CustomPropertiesFilterFieldArray.test.js

@@ -14,11 +14,11 @@ var _stripesTesting = require("@folio/stripes-testing");
 
 var _reactFinalFormArrays = require("react-final-form-arrays");
 
-var _helpers2 = require("../../../../test/jest/helpers");
+var _CustomPropertiesFilterFieldArray = _interopRequireDefault(require("./CustomPropertiesFilterFieldArray"));
 
-var _testResources = require("../Edit/testResources");
+var _customProperties = _interopRequireDefault(require("../../../../test/jest/customProperties"));
 
-var _CustomPropertiesFilterFieldArray = _interopRequireDefault(require("./CustomPropertiesFilterFieldArray"));
+var _jest = require("../../../../test/jest");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -30,6 +30,7 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+jest.mock('../../hooks');
 jest.mock('./CustomPropertiesFilterField', function () {
   return function () {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -41,12 +42,11 @@ var onSubmit = jest.fn();
 var renderComponent;
 describe('CustomPropertiesFilterFieldArray', function () {
   beforeEach(function () {
-    renderComponent = (0, _helpers2.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_helpers.TestForm, {
+    renderComponent = (0, _jest.renderWithKintHarness)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_helpers.TestForm, {
       onSubmit: onSubmit,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
         component: _CustomPropertiesFilterFieldArray.default,
-        customProperties: _testResources.customProperties,
-        labelOverrides: _testResources.labelOverrides,
+        customProperties: _customProperties.default,
         name: "customProperties"
       })
     }));