@k-int/stripes-kint-components 2.2.0 → 2.3.2

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

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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");
+
+var _useParseActiveFilterStrings = _interopRequireDefault(require("./useParseActiveFilterStrings"));
+
+var _CustomPropertiesFilterForm = _interopRequireDefault(require("./CustomPropertiesFilterForm"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["customProperties"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 _ref$activeFilters = _ref.activeFilters,
+      custPropFilters = _ref$activeFilters.customProperties,
+      restOfFilters = _objectWithoutProperties(_ref$activeFilters, _excluded),
+      customPropertiesEndpoint = _ref.customPropertiesEndpoint,
+      filterHandlers = _ref.filterHandlers,
+      labelOverrides = _ref.labelOverrides;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      editingFilters = _useState2[0],
+      setEditingFilters = _useState2[1];
+
+  var openEditModal = function openEditModal() {
+    return setEditingFilters(true);
+  };
+
+  var closeEditModal = function closeEditModal() {
+    return setEditingFilters(false);
+  };
+
+  var _useCustomProperties = (0, _hooks.useCustomProperties)({
+    endpoint: customPropertiesEndpoint,
+    returnQueryObject: true,
+    options: {
+      sort: [{
+        path: 'ctx'
+      }, // Group by ctx
+      {
+        path: 'retired'
+      }, // Place retired custprops at the end
+      {
+        path: 'label'
+      } // Within those groups, sort by label
+      ]
+    }
+  }),
+      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
+      }
+    });
+  };
+
+  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"
+      }),
+      separator: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
+    });
+  }
+
+  var handleSubmit = function handleSubmit(values) {
+    var _values$filters = values.filters,
+        filters = _values$filters === void 0 ? [] : _values$filters;
+    var filterStrings = filters.filter(function (filter) {
+      return filter.rules;
+    }).map(function (filter) {
+      return filter.rules.map(function (rule) {
+        var _rule$value;
+
+        return "customProperties.".concat(filter.customProperty, ".value").concat(rule.operator).concat((_rule$value = rule.value) !== null && _rule$value !== void 0 ? _rule$value : '');
+      }).join('||');
+    });
+    filterHandlers.state(_objectSpread(_objectSpread({}, restOfFilters), {}, {
+      customProperties: filterStrings
+    }));
+    setEditingFilters(false);
+    return Promise.resolve();
+  };
+
+  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,
+    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"
+    }),
+    onClearFilter: function onClearFilter() {
+      return filterHandlers.state(_objectSpread(_objectSpread({}, restOfFilters), {}, {
+        customProperties: []
+      }));
+    },
+    separator: false,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Layout, {
+      className: "padding-bottom-gutter",
+      children: getFiltersApplied()
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilterForm.default, {
+      customProperties: custprops,
+      editingFilters: editingFilters,
+      filters: parsedFilterData === null || parsedFilterData === void 0 ? void 0 : parsedFilterData.filters,
+      handlers: {
+        closeEditModal: closeEditModal,
+        openEditModal: openEditModal
+      },
+      labelOverrides: labelOverrides,
+      onSubmit: handleSubmit
+    })]
+  });
+};
+
+CustomPropertiesFilter.propTypes = {
+  activeFilters: _propTypes.default.object,
+  customPropertiesEndpoint: _propTypes.default.string,
+  filterHandlers: _propTypes.default.object,
+  labelOverrides: _propTypes.default.object
+};
+var _default = CustomPropertiesFilter;
+exports.default = _default;

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

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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");
+
+var _components = require("@folio/stripes/components");
+
+var _utils = require("../../utils");
+
+var _validators = require("../../utils/validators");
+
+var _CustomPropertiesRule = _interopRequireDefault(require("./CustomPropertiesRule"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+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 _ref$customProperties = _ref.customProperties,
+      customProperties = _ref$customProperties === void 0 ? [] : _ref$customProperties,
+      fields = _ref.fields,
+      index = _ref.index,
+      _ref$labelOverrides = _ref.labelOverrides,
+      labelOverrides = _ref$labelOverrides === void 0 ? {} : _ref$labelOverrides,
+      name = _ref.name;
+  var groupedCustomProperties = (0, _utils.groupCustomPropertiesByCtx)(customProperties);
+
+  var _useForm = (0, _reactFinalForm.useForm)(),
+      change = _useForm.change,
+      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
+      }
+    });
+  };
+
+  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"
+      }),
+      name: "".concat(name, ".customProperty"),
+      placeholder: " ",
+      render: function render(fieldProps) {
+        var _Object$entries;
+
+        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) {
+            var _ref3 = _slicedToArray(_ref2, 2),
+                key = _ref3[0],
+                value = _ref3[1];
+
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("optgroup", {
+              label: key === 'isNull' ? '-' : key,
+              children: value.map(function (v) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                  value: v.name,
+                  children: v.retired ? getRetiredName(v) : v.label
+                }, v.id);
+              })
+            });
+          })]
+        }));
+      },
+      required: true,
+      validate: _validators.required
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: "selected-custprop-name-".concat(index),
+      style: {
+        display: 'none'
+      },
+      children: (_customProperties$fin = (_customProperties$fin2 = customProperties.find(function (t) {
+        var _fields$value$index;
+
+        return t.name === ((_fields$value$index = fields.value[index]) === null || _fields$value$index === void 0 ? void 0 : _fields$value$index.customProperty);
+      })) === null || _customProperties$fin2 === void 0 ? void 0 : _customProperties$fin2.label) !== null && _customProperties$fin !== void 0 ? _customProperties$fin : ''
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Row, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
+        xs: 2
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
+        xs: 4,
+        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"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
+        xs: 4,
+        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"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Col, {
+        xs: 2
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalFormArrays.FieldArray, {
+      name: "".concat(name, ".rules"),
+      children: function children(_ref4) {
+        var ruleFields = _ref4.fields;
+        return ruleFields.map(function (ruleFieldName, ruleFieldIndex) {
+          var _values$filters$index;
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesRule.default, {
+            ariaLabelledby: "selected-custprop-name-".concat(index),
+            clearRuleValue: function clearRuleValue() {
+              return change("filters[".concat(index, "].rules[").concat(ruleFieldIndex, "].value"), '');
+            },
+            custPropDefinition: customProperties.find(function (t) {
+              return t.name === fields.value[index].customProperty;
+            }),
+            index: ruleFieldIndex,
+            name: ruleFieldName,
+            onDelete: function onDelete() {
+              return ruleFields.remove(ruleFieldIndex);
+            },
+            value: (_values$filters$index = values.filters[index]) === null || _values$filters$index === void 0 ? void 0 : _values$filters$index.rules[ruleFieldIndex]
+          }, ruleFieldName);
+        });
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      "data-test-add-rule-btn": true,
+      disabled: !((_fields$value$index2 = fields.value[index]) !== null && _fields$value$index2 !== void 0 && _fields$value$index2.customProperty),
+      onClick: function onClick() {
+        return push("".concat(name, ".rules"));
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+        id: "stripes-erm-components.customProperty.filters.addRule"
+      })
+    })]
+  });
+};
+
+CustomPropertiesFilterField.propTypes = {
+  customProperties: _propTypes.default.arrayOf(_propTypes.default.object),
+  fields: _propTypes.default.object,
+  index: _propTypes.default.number,
+  labelOverrides: _propTypes.default.object,
+  name: _propTypes.default.string
+};
+var _default = CustomPropertiesFilterField;
+exports.default = _default;

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

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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");
+
+var _components = require("@folio/stripes/components");
+
+var _CustomPropertiesFilterField = _interopRequireDefault(require("./CustomPropertiesFilterField"));
+
+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,
+      labelOverrides = _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
+      }
+    });
+  };
+
+  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, {
+            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),
+                children: function children(_ref3) {
+                  var ref = _ref3.ref,
+                      ariaIds = _ref3.ariaIds;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+                    ref: ref,
+                    "aria-labelledby": ariaIds.text,
+                    icon: "trash",
+                    id: "custom-property-filter-card-delete-[".concat(index, "]"),
+                    onClick: function onClick() {
+                      return fields.remove(index);
+                    }
+                  });
+                }
+              }),
+              headerStart: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+                children: getCardTitle(index)
+              }),
+              marginBottom0: index !== fields.length - 1,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilterField.default, {
+                customProperties: customProperties,
+                fields: fields,
+                index: index,
+                labelOverrides: labelOverrides,
+                name: name
+              })
+            }, "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"
+              })
+            })]
+          });
+        });
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      onClick: function onClick() {
+        return push('filters', {
+          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"
+      })
+    })]
+  });
+};
+
+CustomPropertiesFilterFieldArray.propTypes = {
+  customProperties: _propTypes.default.arrayOf(_propTypes.default.object),
+  labelOverrides: _propTypes.default.object
+};
+var _default = CustomPropertiesFilterFieldArray;
+exports.default = _default;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactIntl = require("react-intl");
+
+var _finalFormArrays = _interopRequireDefault(require("final-form-arrays"));
+
+var _components = require("@folio/stripes/components");
+
+var _FormModal = _interopRequireDefault(require("../../FormModal"));
+
+var _CustomPropertiesFilterFieldArray = _interopRequireDefault(require("./CustomPropertiesFilterFieldArray"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var CustomPropertyFiltersForm = function CustomPropertyFiltersForm(_ref) {
+  var _labelOverrides$editC, _labelOverrides$filte;
+
+  var customProperties = _ref.customProperties,
+      editingFilters = _ref.editingFilters,
+      filters = _ref.filters,
+      _ref$handlers = _ref.handlers,
+      closeEditModal = _ref$handlers.closeEditModal,
+      openEditModal = _ref$handlers.openEditModal,
+      labelOverrides = _ref.labelOverrides,
+      onSubmit = _ref.onSubmit;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      onClick: openEditModal,
+      children: (_labelOverrides$editC = labelOverrides.editCustomPropertyFilters) !== null && _labelOverrides$editC !== void 0 ? _labelOverrides$editC : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+        id: "stripes-kint-components.customProperty.editCustomPropertyFilters"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormModal.default, {
+      initialValues: {
+        filters: filters.length ? filters : [{
+          rules: [{}]
+        }]
+      },
+      labelOverrides: {
+        save: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+          id: "stripes-kint-components.apply"
+        })
+      },
+      modalProps: {
+        dismissible: true,
+        enforceFocus: false,
+        label: (_labelOverrides$filte = labelOverrides.filterBuilder) !== null && _labelOverrides$filte !== void 0 ? _labelOverrides$filte : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIntl.FormattedMessage, {
+          id: "stripes-kint-components.customProperty.filterbuilder"
+        }),
+        onClose: closeEditModal,
+        open: editingFilters,
+        size: 'medium'
+      },
+      mutators: _objectSpread({}, _finalFormArrays.default),
+      onSubmit: onSubmit,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CustomPropertiesFilterFieldArray.default, {
+        customProperties: customProperties,
+        labelOverrides: labelOverrides
+      })
+    })]
+  });
+};
+
+CustomPropertyFiltersForm.propTypes = {
+  customProperties: _propTypes.default.arrayOf(_propTypes.default.object),
+  editingFilters: _propTypes.default.bool,
+  filters: _propTypes.default.arrayOf(_propTypes.default.object),
+  handlers: _propTypes.default.shape({
+    closeEditModal: _propTypes.default.func.isRequired,
+    openEditModal: _propTypes.default.func.isRequired
+  }),
+  labelOverrides: _propTypes.default.object,
+  onSubmit: _propTypes.default.func.isRequired
+};
+var _default = CustomPropertyFiltersForm;
+exports.default = _default;