@blaze-cms/plugin-data-ui 0.146.0-translations.8 → 0.147.0-rc-eagle.4

package/lib/components/ListingTable/SearchFilter/SearchContainer.js

@@ -1,313 +1,487 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.object.define-properties.js");
-require("core-js/modules/es.object.define-property.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.weak-map.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.find.js");
-require("core-js/modules/es.array.for-each.js");
-require("core-js/modules/es.array.is-array.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.array.join.js");
-require("core-js/modules/es.array.map.js");
-require("core-js/modules/es.array.reduce.js");
-require("core-js/modules/es.function.name.js");
-require("core-js/modules/es.object.entries.js");
-require("core-js/modules/es.object.keys.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.promise.js");
-require("core-js/modules/es.string.iterator.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _select = _interopRequireDefault(require("@blaze-react/select"));
+var _multiselect = _interopRequireDefault(require("@blaze-react/multiselect"));
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _lodash2 = _interopRequireDefault(require("lodash.unionby"));
 var _client = require("@apollo/client");
 var _adminUiUtils = require("@blaze-cms/admin-ui-utils");
+var _utils = require("@blaze-cms/utils");
 var _bs = require("react-icons/bs");
 var _helpers = require("./helpers");
 var _querys = require("./querys");
 var _constants = require("../../../constants");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var SearchContainer = function SearchContainer(_ref) {
-  var setListFilters = _ref.setListFilters,
-    _ref$keywordFiltersTo = _ref.keywordFiltersToUse,
-    keywordFiltersToUse = _ref$keywordFiltersTo === void 0 ? [] : _ref$keywordFiltersTo,
-    _ref$selectFiltersToD = _ref.selectFiltersToDisplay,
-    selectFiltersToDisplay = _ref$selectFiltersToD === void 0 ? [] : _ref$selectFiltersToD,
-    schema = _ref.schema,
-    index = _ref.index;
-  var apolloClient = (0, _client.useApolloClient)();
-  var _useState = (0, _react.useState)(''),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    searchTerm = _useState2[0],
-    setSearchTerm = _useState2[1];
-  var _useState3 = (0, _react.useState)({}),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    selectedFilters = _useState4[0],
-    setSelectedFilters = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    selectOptions = _useState6[0],
-    setSelectOptions = _useState6[1];
-  var displaySearchFilter = keywordFiltersToUse.length > 0;
-  var displaySelectFilters = selectFiltersToDisplay.length > 0;
-  var _useMemo = (0, _react.useMemo)(function () {
-      var labels = [];
-      var properties = [];
-      keywordFiltersToUse.forEach(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
-          property = _ref3[0],
-          label = _ref3[1].label;
-        if (label) labels.push(label);
-        properties.push(property);
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const SearchContainer = ({
+  setListFilters,
+  keywordFiltersToUse = [],
+  selectFiltersToDisplay = [],
+  multiSelectFiltersToDisplay = [],
+  schema,
+  index,
+  values
+}) => {
+  const client = (0, _client.useApolloClient)();
+  const [searchTerm, setSearchTerm] = (0, _react.useState)('');
+  const [selectedFilters, setSelectedFilters] = (0, _react.useState)({});
+  const [selectOptions, setSelectOptions] = (0, _react.useState)([]);
+  const [multiSelectOptions, setMultiSelectOptions] = (0, _react.useState)([]);
+  const [allEntitySchemas, setAllEntitySchemas] = (0, _react.useState)([]);
+  const displaySearchFilter = keywordFiltersToUse.length > 0;
+  const displaySelectFilters = selectFiltersToDisplay.length > 0;
+  const displayMultiSelectFilters = multiSelectFiltersToDisplay.length > 0;
+  const displayAggregations = displaySelectFilters || displayMultiSelectFilters;
+  (0, _react.useEffect)(() => {
+    (async () => {
+      try {
+        const all = await (0, _adminUiUtils.fetchAllEntities)({
+          client
+        });
+        setAllEntitySchemas(all || []);
+      } catch (error) {
+        setAllEntitySchemas([]);
+      }
+    })();
+  }, [client]);
+  const multiSelectPropertySet = (0, _react.useMemo)(() => new Set(multiSelectFiltersToDisplay.map(([property]) => property)), [multiSelectFiltersToDisplay]);
+  const {
+    keywordSearchProperties,
+    keywordSearchLabels
+  } = (0, _react.useMemo)(() => {
+    const labels = [];
+    const properties = [];
+    keywordFiltersToUse.forEach(([property, {
+      label
+    }]) => {
+      if (label) labels.push(label);
+      properties.push(property);
+    });
+    return {
+      keywordSearchProperties: properties,
+      keywordSearchLabels: labels
+    };
+  }, [keywordFiltersToUse]);
+  const {
+    gqlFields,
+    rawQuery
+  } = (0, _react.useMemo)(() => (0, _helpers.buildQueryFields)([...selectFiltersToDisplay, ...multiSelectFiltersToDisplay], schema.id), [selectFiltersToDisplay, multiSelectFiltersToDisplay, schema.id]);
+  const action = displayAggregations ? (0, _adminUiUtils.getDynamicQuery)('ADMIN_SEARCH')([schema], gqlFields, false, index) : _querys.NOOP_QUERY;
+  const {
+    data
+  } = (0, _client.useQuery)(action, {
+    skip: !displayAggregations,
+    variables: {
+      where: rawQuery,
+      limit: 0
+    },
+    fetchPolicy: 'cache-and-network'
+  });
+  const buildRelationsIndex = (0, _react.useCallback)(schemaObj => {
+    const items = [];
+    if (schemaObj.properties) {
+      Object.entries(schemaObj.properties).forEach(([propName, definition]) => {
+        const {
+          relation
+        } = definition || {};
+        if (!relation) return;
+        const {
+          localField: relationLocalField,
+          entityIdentifier
+        } = relation;
+        const localField = relationLocalField || propName;
+        if (localField) items.push({
+          localField,
+          entityIdentifier
+        });
       });
-      return {
-        keywordSearchProperties: properties,
-        keywordSearchLabels: labels
-      };
-    }, [keywordFiltersToUse]),
-    keywordSearchProperties = _useMemo.keywordSearchProperties,
-    keywordSearchLabels = _useMemo.keywordSearchLabels;
-  var _useMemo2 = (0, _react.useMemo)(function () {
-      return (0, _helpers.buildQueryFields)(selectFiltersToDisplay, schema.id);
-    }, [selectFiltersToDisplay, schema.id]),
-    gqlFields = _useMemo2.gqlFields,
-    rawQuery = _useMemo2.rawQuery;
-  var action = displaySelectFilters ? (0, _adminUiUtils.getDynamicQuery)('ADMIN_SEARCH')([schema], gqlFields, false, index) : _querys.NOOP_QUERY;
-  var _useQuery = (0, _client.useQuery)(action, {
-      skip: !displaySelectFilters,
-      variables: {
-        where: rawQuery,
-        limit: 0
-      },
-      fetchPolicy: 'cache-and-network'
-    }),
-    data = _useQuery.data;
-  var filterData = (0, _react.useMemo)(function () {
-    var _ref4 = data || {},
-      _ref4$searchResults = _ref4.searchResults,
-      _ref4$searchResults2 = _ref4$searchResults === void 0 ? {} : _ref4$searchResults,
-      _ref4$searchResults2$ = _ref4$searchResults2.rawResults,
-      _ref4$searchResults2$2 = _ref4$searchResults2$ === void 0 ? {} : _ref4$searchResults2$,
-      _ref4$searchResults2$3 = _ref4$searchResults2$2.aggregations,
-      aggregations = _ref4$searchResults2$3 === void 0 ? {} : _ref4$searchResults2$3;
-    var proccessedData = [];
-    Object.entries(aggregations).forEach(function (_ref5) {
-      var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
-        key = _ref6[0],
-        buckets = _ref6[1].buckets;
-      proccessedData.push(Array.isArray(buckets) ? [key, buckets.map(function (b) {
-        return b.key;
-      }).filter(Boolean)] : []);
+    }
+    if (Array.isArray(schemaObj.relations)) {
+      schemaObj.relations.forEach(relation => {
+        if (!relation.localField) return;
+        const {
+          localField,
+          entityIdentifier
+        } = relation;
+        items.push({
+          localField,
+          entityIdentifier
+        });
+      });
+    }
+    const byKey = new Map();
+    items.forEach(item => {
+      const key = `${item.localField}|${item.entityIdentifier || ''}`;
+      if (!byKey.has(key)) byKey.set(key, item);
     });
-    return proccessedData;
+    return Array.from(byKey.values());
+  }, []);
+  const relationsIndex = (0, _react.useMemo)(() => buildRelationsIndex(schema), [schema, buildRelationsIndex]);
+  const stringTypeProps = (0, _react.useMemo)(() => (0, _utils.getStringTypeProps)(schema.id, relationsIndex, allEntitySchemas), [schema.id, relationsIndex, allEntitySchemas]);
+  const aggregationsData = (0, _react.useMemo)(() => {
+    const {
+      searchResults: {
+        rawResults: {
+          aggregations = {}
+        } = {}
+      } = {}
+    } = data || {};
+    const processed = [];
+    Object.entries(aggregations).forEach(([key, {
+      buckets
+    }]) => {
+      processed.push(Array.isArray(buckets) ? [key, buckets.map(bucket => bucket.key).filter(Boolean)] : []);
+    });
+    return processed;
   }, [data]);
-  (0, _react.useEffect)(function () {
-    if (!filterData.length) {
+  const findFilterConfig = (0, _react.useCallback)(property => {
+    var _selectFiltersToDispl, _multiSelectFiltersTo;
+    return ((_selectFiltersToDispl = selectFiltersToDisplay.find(([prop]) => prop === property)) === null || _selectFiltersToDispl === void 0 ? void 0 : _selectFiltersToDispl[1]) || ((_multiSelectFiltersTo = multiSelectFiltersToDisplay.find(([prop]) => prop === property)) === null || _multiSelectFiltersTo === void 0 ? void 0 : _multiSelectFiltersTo[1]);
+  }, [selectFiltersToDisplay, multiSelectFiltersToDisplay]);
+  (0, _react.useEffect)(() => {
+    if (!aggregationsData.length) {
       setSelectOptions([]);
+      setMultiSelectOptions([]);
       return;
     }
-    (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-      var results;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return Promise.all(filterData.map( /*#__PURE__*/function () {
-              var _ref9 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(_ref8) {
-                var _ref10, property, ids, _ref11, _ref12, selectionDetails, query, _yield$apolloClient$q, _yield$apolloClient$q2, relationSchema, _yield$apolloClient$q3, _yield$apolloClient$q4, selected;
-                return _regenerator["default"].wrap(function _callee$(_context) {
-                  while (1) switch (_context.prev = _context.next) {
-                    case 0:
-                      _ref10 = (0, _slicedToArray2["default"])(_ref8, 2), property = _ref10[0], ids = _ref10[1];
-                      _context.prev = 1;
-                      if (!(!ids || !ids.length)) {
-                        _context.next = 4;
-                        break;
-                      }
-                      return _context.abrupt("return", {});
-                    case 4:
-                      _ref11 = selectFiltersToDisplay.find(function (_ref13) {
-                        var _ref14 = (0, _slicedToArray2["default"])(_ref13, 1),
-                          selectProperty = _ref14[0];
-                        return selectProperty === property;
-                      }) || [], _ref12 = (0, _slicedToArray2["default"])(_ref11, 2), selectionDetails = _ref12[1];
-                      if (selectionDetails) {
-                        _context.next = 7;
-                        break;
-                      }
-                      return _context.abrupt("return", null);
-                    case 7:
-                      if (selectionDetails.relation) {
-                        _context.next = 9;
-                        break;
-                      }
-                      return _context.abrupt("return", {
-                        id: property,
-                        label: selectionDetails.label,
-                        options: ids.map(function (value) {
-                          return [value, value];
-                        })
-                      });
-                    case 9:
-                      query = (0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA');
-                      _context.next = 12;
-                      return apolloClient.query({
-                        query: query,
-                        variables: {
-                          identifier: selectionDetails.relation.entityIdentifier
-                        }
-                      });
-                    case 12:
-                      _yield$apolloClient$q = _context.sent;
-                      _yield$apolloClient$q2 = (0, _slicedToArray2["default"])(_yield$apolloClient$q.data.getEntitySchemas, 1);
-                      relationSchema = _yield$apolloClient$q2[0];
-                      _context.next = 17;
-                      return apolloClient.query({
-                        query: (0, _adminUiUtils.getDynamicQuery)('GET_ALL_ENTITIES')(relationSchema),
-                        variables: {
-                          where: {
-                            id: {
-                              _in: ids
-                            }
-                          },
-                          sort: [{
-                            property: 'name',
-                            direction: 'asc'
-                          }]
-                        }
-                      })
-                      // eslint-disable-next-line no-console
-                      ["catch"](function (e) {
-                        return console.error(e);
-                      });
-                    case 17:
-                      _yield$apolloClient$q3 = _context.sent;
-                      _yield$apolloClient$q4 = _yield$apolloClient$q3.data.result;
-                      selected = _yield$apolloClient$q4 === void 0 ? [] : _yield$apolloClient$q4;
-                      return _context.abrupt("return", {
-                        id: property,
-                        label: selectionDetails.label,
-                        options: selected.map(function (item) {
-                          return [item.id, item.name];
-                        })
-                      });
-                    case 23:
-                      _context.prev = 23;
-                      _context.t0 = _context["catch"](1);
-                      return _context.abrupt("return", null);
-                    case 26:
-                    case "end":
-                      return _context.stop();
-                  }
-                }, _callee, null, [[1, 23]]);
-              }));
-              return function (_x) {
-                return _ref9.apply(this, arguments);
-              };
-            }()));
-          case 2:
-            results = _context2.sent;
-            setSelectOptions(results.filter(Boolean));
-          case 4:
-          case "end":
-            return _context2.stop();
+    (async () => {
+      const results = await Promise.all(aggregationsData.map(async ([property, ids]) => {
+        try {
+          if (!ids || !ids.length) return null;
+          const config = findFilterConfig(property);
+          if (!config) return null;
+          const {
+            adminListingOptions: {
+              tidyLabel
+            } = {}
+          } = config;
+          if (!config.relation) {
+            const baseOptions = ids.map(value => [value, (0, _helpers.getTidyLabel)(value, tidyLabel)]);
+            return {
+              property,
+              label: config.label,
+              type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+              options: baseOptions,
+              selected: values && values[property]
+            };
+          }
+          const schemaQuery = (0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA');
+          const {
+            data: {
+              getEntitySchemas: [relationSchema]
+            }
+          } = await client.query({
+            query: schemaQuery,
+            variables: {
+              identifier: config.relation.entityIdentifier
+            }
+          });
+          const {
+            data: {
+              result: selected = []
+            }
+          } = await client.query({
+            query: (0, _adminUiUtils.getDynamicQuery)('GET_ALL_ENTITIES')(relationSchema),
+            variables: {
+              where: {
+                id: {
+                  _in: ids
+                }
+              },
+              sort: [{
+                property: 'name',
+                direction: 'asc'
+              }]
+            }
+          })
+          // eslint-disable-next-line no-console
+          .catch(error => console.error(error));
+          const baseOptions = selected.map(item => [item.id, (0, _helpers.getTidyLabel)(item.name, tidyLabel)]);
+          return {
+            property,
+            label: config.label || config.relation.label,
+            type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+            options: baseOptions,
+            selected: values && values[property]
+          };
+        } catch {
+          return null;
         }
-      }, _callee2);
-    }))();
-  }, [apolloClient, filterData, schema, selectFiltersToDisplay]);
-  var updateFilters = (0, _react.useCallback)(function (term, filters) {
-    return (0, _helpers.updateListFilters)(term, filters, setListFilters, keywordSearchProperties);
-  }, [setListFilters, keywordSearchProperties]);
-  var handleSearch = (0, _react.useCallback)(function () {
-    return updateFilters(searchTerm, selectedFilters);
-  }, [searchTerm, selectedFilters, updateFilters]);
-  var handleSearchChange = (0, _react.useCallback)(function (e) {
-    return setSearchTerm(e.target.value);
-  }, []);
-  var handleEnterKey = (0, _react.useCallback)(function (e) {
-    if (e.key === _constants.ENTER_KEY) handleSearch();
+      }));
+      const valid = results.filter(Boolean);
+      setSelectOptions(valid.filter(option => option.type === 'single').map(({
+        property,
+        label,
+        options,
+        selected
+      }) => ({
+        id: property,
+        label,
+        options,
+        selected
+      })));
+      setMultiSelectOptions(valid.filter(option => option.type === 'multi').map(({
+        property,
+        label,
+        options,
+        selected
+      }) => ({
+        id: property,
+        label,
+        items: options.map(([id, name]) => ({
+          id,
+          name
+        })),
+        selected
+      })));
+    })();
+  }, [client, aggregationsData, findFilterConfig, multiSelectPropertySet, values]);
+  const updateFilters = (0, _react.useCallback)((term, filters) => (0, _helpers.updateListFilters)(term, filters, setListFilters, keywordSearchProperties), [setListFilters, keywordSearchProperties]);
+  const debouncedUpdateFilters = (0, _react.useMemo)(() => (0, _lodash.default)((term, filters) => updateFilters(term, filters), 300), [updateFilters]);
+  (0, _react.useEffect)(() => () => debouncedUpdateFilters.cancel(), [debouncedUpdateFilters]);
+  const handleSearch = (0, _react.useCallback)(() => updateFilters(searchTerm, selectedFilters), [searchTerm, selectedFilters, updateFilters]);
+  const handleSearchChange = (0, _react.useCallback)(({
+    target: {
+      value
+    }
+  }) => setSearchTerm(value), []);
+  const handleEnterKey = (0, _react.useCallback)(({
+    key
+  }) => {
+    if (key === _constants.ENTER_KEY) handleSearch();
   }, [handleSearch]);
-  var handleReset = (0, _react.useCallback)(function () {
+  const handleReset = (0, _react.useCallback)(() => {
     setSearchTerm('');
-    setSelectedFilters(Object.keys(selectedFilters).reduce(function (acc, key) {
-      return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2["default"])({}, key, _constants.DEFAULT_FILTER_OPTION_LABEL));
+    debouncedUpdateFilters.cancel();
+    setSelectedFilters(prev => Object.keys(prev).reduce((acc, key) => {
+      acc[key] = multiSelectPropertySet.has(key) ? [] : _constants.DEFAULT_FILTER_OPTION_LABEL;
+      return acc;
     }, {}));
     updateFilters('', {});
-  }, [selectedFilters, updateFilters]);
-  var handleSelect = (0, _react.useCallback)(function (property, event) {
-    var value = event.value;
-    var next = _objectSpread(_objectSpread({}, selectedFilters), {}, (0, _defineProperty2["default"])({}, property, value));
+  }, [multiSelectPropertySet, updateFilters, debouncedUpdateFilters]);
+  const handleSelect = (0, _react.useCallback)((property, {
+    value
+  }) => {
+    const next = _objectSpread(_objectSpread({}, selectedFilters), {}, {
+      [property]: value
+    });
     setSelectedFilters(next);
-    updateFilters(searchTerm, next);
-  }, [searchTerm, selectedFilters, updateFilters]);
-  var placeholderText = "Search ".concat(keywordSearchLabels.join(', '));
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "search-container"
-  }, displaySearchFilter && /*#__PURE__*/_react["default"].createElement("div", {
+    debouncedUpdateFilters(searchTerm, next);
+  }, [searchTerm, selectedFilters, debouncedUpdateFilters]);
+  const handleMultiSelect = (0, _react.useCallback)((property, ids) => {
+    const next = _objectSpread(_objectSpread({}, selectedFilters), {}, {
+      [property]: ids
+    });
+    setSelectedFilters(next);
+    debouncedUpdateFilters(searchTerm, next);
+  }, [searchTerm, selectedFilters, debouncedUpdateFilters]);
+  const findRelationByLocalField = (0, _react.useCallback)(localField => relationsIndex.find(relation => relation.localField === localField), [relationsIndex]);
+  const resolveAggProp = (0, _react.useCallback)((property, config) => {
+    if (!config.relation) return property;
+    if (property.includes('.')) return property;
+    const localField = config.relation.localField || property;
+    return `${localField}.name`;
+  }, []);
+  const resolveEntityIdentifier = (0, _react.useCallback)((property, config) => {
+    if (!config.relation) return undefined;
+    if (config.relation.entityIdentifier) return config.relation.entityIdentifier;
+    const localField = property.includes('.') ? property.split('.')[0] : config.relation.localField || property;
+    return findRelationByLocalField(localField).entityIdentifier;
+  }, [findRelationByLocalField]);
+  const addEntitySuffixIfNeeded = (0, _react.useCallback)((aggProp, entityIdentifier, config) => {
+    if (!config.relation || !entityIdentifier) return aggProp;
+    return `${aggProp}/${entityIdentifier}`;
+  }, []);
+  const makeOnSearchChange = (0, _react.useCallback)(property => async ({
+    event: {
+      value
+    },
+    currentOffset
+  }) => {
+    try {
+      var _config$relation, _aggregations$key, _multiSelectOptions$f;
+      if (!value || currentOffset) return [];
+      const config = findFilterConfig(property);
+      if (!config) return [];
+      let aggProp = resolveAggProp(property, config);
+      if (config.relation && !config.relation.localField && !property.includes('.')) {
+        const matchingRelation = findRelationByLocalField(property);
+        if (matchingRelation.localField) aggProp = `${matchingRelation.localField}.name`;
+      }
+      const entityIdentifier = resolveEntityIdentifier(property, config) || ((_config$relation = config.relation) === null || _config$relation === void 0 ? void 0 : _config$relation.entityIdentifier);
+      const filterByEntry = addEntitySuffixIfNeeded(aggProp, entityIdentifier, config);
+      const currentValues = {
+        entity: schema.id,
+        filterByProperty: [filterByEntry]
+      };
+      const aggregations = await (0, _adminUiUtils.fetchFilterByDataFromElastic)(client, currentValues, relationsIndex, stringTypeProps, value);
+      const key = aggProp;
+      const buckets = (aggregations === null || aggregations === void 0 ? void 0 : (_aggregations$key = aggregations[key]) === null || _aggregations$key === void 0 ? void 0 : _aggregations$key.buckets) || [];
+      let items = [];
+      if (config.relation) {
+        const names = buckets.map(bucket => bucket.key).filter(Boolean);
+        if (names.length) {
+          const schemaQuery = (0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA');
+          const {
+            data: {
+              getEntitySchemas: [relationSchema]
+            }
+          } = await client.query({
+            query: schemaQuery,
+            variables: {
+              identifier: entityIdentifier
+            }
+          });
+          const {
+            data: {
+              result: selected = []
+            }
+          } = await client.query({
+            query: (0, _adminUiUtils.getDynamicQuery)('GET_ALL_ENTITIES')(relationSchema),
+            variables: {
+              where: {
+                name: {
+                  _in: names
+                }
+              },
+              sort: [{
+                property: 'name',
+                direction: 'asc'
+              }]
+            }
+          })
+          // eslint-disable-next-line no-console
+          .catch(error => console.error(error));
+          items = selected.map(item => ({
+            id: item.id,
+            name: item.name
+          }));
+        }
+      } else {
+        items = buckets.map(bucket => ({
+          id: bucket.key,
+          name: bucket.key
+        })).filter(option => option.id != null);
+      }
+      const existingItems = ((_multiSelectOptions$f = multiSelectOptions.find(opt => opt.id === property)) === null || _multiSelectOptions$f === void 0 ? void 0 : _multiSelectOptions$f.items) || [];
+      return (0, _lodash2.default)(items, existingItems, 'id');
+    } catch (error) {
+      return [];
+    }
+  }, [client, schema.id, relationsIndex, stringTypeProps, multiSelectOptions, findFilterConfig, resolveAggProp, resolveEntityIdentifier, addEntitySuffixIfNeeded, findRelationByLocalField]);
+  const placeholderText = `Search ${keywordSearchLabels.join(', ')}`;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-container ms-filter"
+  }, displaySearchFilter && /*#__PURE__*/_react.default.createElement("div", {
     className: "search-container__search-input-container"
-  }, /*#__PURE__*/_react["default"].createElement("input", {
+  }, /*#__PURE__*/_react.default.createElement("input", {
     type: "search",
     className: "search-container__search-input-container__search-input",
     placeholder: placeholderText,
     value: searchTerm,
     onChange: handleSearchChange,
     onKeyDown: handleEnterKey
-  }), /*#__PURE__*/_react["default"].createElement("i", {
+  }), /*#__PURE__*/_react.default.createElement("i", {
     role: "button",
     onClick: handleSearch
-  }, /*#__PURE__*/_react["default"].createElement(_bs.BsSearch, null))), displaySelectFilters && selectOptions.map(function (_ref15) {
-    var id = _ref15.id,
-      options = _ref15.options,
-      label = _ref15.label;
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options && !!options.length && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "search-container__select-wrapper"
-    }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
-      label: label,
-      id: id,
+  }, /*#__PURE__*/_react.default.createElement(_bs.BsSearch, null))), displaySelectFilters && selectOptions.map(({
+    id,
+    options,
+    label,
+    selected
+  }) => options && options.length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-container__select-wrapper",
+    key: `select-${id}`
+  }, /*#__PURE__*/_react.default.createElement(_select.default, {
+    label: label,
+    id: id,
+    name: id,
+    onChange: ({
+      value
+    }) => handleSelect(id, {
+      value
+    }),
+    options: options,
+    value: selectedFilters[id] !== undefined ? selectedFilters[id] : selected,
+    defaultTextValue: _constants.DEFAULT_FILTER_OPTION_LABEL
+  })) : null), displayMultiSelectFilters && multiSelectOptions.map(({
+    id,
+    label,
+    items
+  }) => {
+    const selectedIds = selectedFilters[id] ? selectedFilters[id] : [];
+    const multiSelectData = {
+      filterBy: ['name'],
+      identification: 'id',
+      keyValue: 'name',
+      data: items.map(({
+        id: itemId,
+        name
+      }) => ({
+        id: itemId,
+        name,
+        description: '',
+        checked: selectedIds.includes(itemId),
+        show: true
+      }))
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-container__select-wrapper",
+      key: `multiselect-${id}`
+    }, /*#__PURE__*/_react.default.createElement(_multiselect.default, {
+      onChange: ({
+        value,
+        currentOffset
+      }) => makeOnSearchChange(id)({
+        event: {
+          value
+        },
+        currentOffset
+      }),
       name: id,
-      onChange: function onChange(event) {
-        return handleSelect(id, event);
-      },
-      options: options,
-      value: selectedFilters[id],
-      defaultTextValue: _constants.DEFAULT_FILTER_OPTION_LABEL
-    })));
-  }), /*#__PURE__*/_react["default"].createElement("div", {
+      label: label,
+      data: multiSelectData,
+      limit: 10,
+      getSelected: ({
+        event: {
+          target: {
+            value
+          }
+        }
+      }) => handleMultiSelect(id, value),
+      required: false,
+      checkedPreviewCount: 1,
+      formatMoreLabel: n => `${n} more`
+    }));
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "search-container__reset-button"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
     role: "button",
     onClick: handleReset
-  }, /*#__PURE__*/_react["default"].createElement(_bs.BsArrowCounterclockwise, null))));
+  }, /*#__PURE__*/_react.default.createElement(_bs.BsArrowCounterclockwise, null))));
 };
 SearchContainer.propTypes = {
-  setListFilters: _propTypes["default"].func.isRequired,
-  keywordFiltersToUse: _propTypes["default"].array,
-  selectFiltersToDisplay: _propTypes["default"].array,
-  schema: _propTypes["default"].object.isRequired,
-  index: _propTypes["default"].string
+  setListFilters: _propTypes.default.func.isRequired,
+  keywordFiltersToUse: _propTypes.default.array,
+  selectFiltersToDisplay: _propTypes.default.array,
+  multiSelectFiltersToDisplay: _propTypes.default.array,
+  schema: _propTypes.default.object.isRequired,
+  index: _propTypes.default.string
 };
 SearchContainer.defaultProps = {
   keywordFiltersToUse: [],
   selectFiltersToDisplay: [],
+  multiSelectFiltersToDisplay: [],
   index: 'admin'
 };
-var _default = exports["default"] = SearchContainer;
+var _default = exports.default = SearchContainer;
 //# sourceMappingURL=SearchContainer.js.map