@blaze-cms/plugin-data-ui 0.146.0-node18-core-styles-tooltips.56 → 0.146.0-node18-tooltips.44

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

@@ -13,36 +13,47 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.concat.js");
 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.from.js");
+require("core-js/modules/es.array.includes.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.map.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.set.js");
+require("core-js/modules/es.string.includes.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");
-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 && {}.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, 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 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) {
@@ -51,9 +62,12 @@ var SearchContainer = function SearchContainer(_ref) {
     keywordFiltersToUse = _ref$keywordFiltersTo === void 0 ? [] : _ref$keywordFiltersTo,
     _ref$selectFiltersToD = _ref.selectFiltersToDisplay,
     selectFiltersToDisplay = _ref$selectFiltersToD === void 0 ? [] : _ref$selectFiltersToD,
+    _ref$multiSelectFilte = _ref.multiSelectFiltersToDisplay,
+    multiSelectFiltersToDisplay = _ref$multiSelectFilte === void 0 ? [] : _ref$multiSelectFilte,
     schema = _ref.schema,
-    index = _ref.index;
-  var apolloClient = (0, _client.useApolloClient)();
+    index = _ref.index,
+    values = _ref.values;
+  var client = (0, _client.useApolloClient)();
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     searchTerm = _useState2[0],
@@ -66,15 +80,59 @@ var SearchContainer = function SearchContainer(_ref) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     selectOptions = _useState6[0],
     setSelectOptions = _useState6[1];
+  var _useState7 = (0, _react.useState)([]),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    multiSelectOptions = _useState8[0],
+    setMultiSelectOptions = _useState8[1];
+  var _useState9 = (0, _react.useState)([]),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    allEntitySchemas = _useState10[0],
+    setAllEntitySchemas = _useState10[1];
   var displaySearchFilter = keywordFiltersToUse.length > 0;
   var displaySelectFilters = selectFiltersToDisplay.length > 0;
+  var displayMultiSelectFilters = multiSelectFiltersToDisplay.length > 0;
+  var displayAggregations = displaySelectFilters || displayMultiSelectFilters;
+  (0, _react.useEffect)(function () {
+    (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      var all;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return (0, _adminUiUtils.fetchAllEntities)({
+              client: client
+            });
+          case 3:
+            all = _context.sent;
+            setAllEntitySchemas(all || []);
+            _context.next = 10;
+            break;
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](0);
+            setAllEntitySchemas([]);
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 7]]);
+    }))();
+  }, [client]);
+  var multiSelectPropertySet = (0, _react.useMemo)(function () {
+    return new Set(multiSelectFiltersToDisplay.map(function (_ref3) {
+      var _ref4 = (0, _slicedToArray2["default"])(_ref3, 1),
+        property = _ref4[0];
+      return property;
+    }));
+  }, [multiSelectFiltersToDisplay]);
   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;
+      keywordFiltersToUse.forEach(function (_ref5) {
+        var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+          property = _ref6[0],
+          label = _ref6[1].label;
         if (label) labels.push(label);
         properties.push(property);
       });
@@ -86,13 +144,13 @@ var SearchContainer = function SearchContainer(_ref) {
     keywordSearchProperties = _useMemo.keywordSearchProperties,
     keywordSearchLabels = _useMemo.keywordSearchLabels;
   var _useMemo2 = (0, _react.useMemo)(function () {
-      return (0, _helpers.buildQueryFields)(selectFiltersToDisplay, schema.id);
-    }, [selectFiltersToDisplay, schema.id]),
+      return (0, _helpers.buildQueryFields)([].concat((0, _toConsumableArray2["default"])(selectFiltersToDisplay), (0, _toConsumableArray2["default"])(multiSelectFiltersToDisplay)), schema.id);
+    }, [selectFiltersToDisplay, multiSelectFiltersToDisplay, schema.id]),
     gqlFields = _useMemo2.gqlFields,
     rawQuery = _useMemo2.rawQuery;
-  var action = displaySelectFilters ? (0, _adminUiUtils.getDynamicQuery)('ADMIN_SEARCH')([schema], gqlFields, false, index) : _querys.NOOP_QUERY;
+  var action = displayAggregations ? (0, _adminUiUtils.getDynamicQuery)('ADMIN_SEARCH')([schema], gqlFields, false, index) : _querys.NOOP_QUERY;
   var _useQuery = (0, _client.useQuery)(action, {
-      skip: !displaySelectFilters,
+      skip: !displayAggregations,
       variables: {
         where: rawQuery,
         limit: 0
@@ -100,87 +158,143 @@ var SearchContainer = function SearchContainer(_ref) {
       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;
+  var buildRelationsIndex = (0, _react.useCallback)(function (schemaObj) {
+    var items = [];
+    if (schemaObj.properties) {
+      Object.entries(schemaObj.properties).forEach(function (_ref7) {
+        var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
+          propName = _ref8[0],
+          definition = _ref8[1];
+        var _ref9 = definition || {},
+          relation = _ref9.relation;
+        if (!relation) return;
+        var relationLocalField = relation.localField,
+          entityIdentifier = relation.entityIdentifier;
+        var localField = relationLocalField || propName;
+        if (localField) items.push({
+          localField: localField,
+          entityIdentifier: entityIdentifier
+        });
+      });
+    }
+    if (Array.isArray(schemaObj.relations)) {
+      schemaObj.relations.forEach(function (relation) {
+        if (!relation.localField) return;
+        var localField = relation.localField,
+          entityIdentifier = relation.entityIdentifier;
+        items.push({
+          localField: localField,
+          entityIdentifier: entityIdentifier
+        });
+      });
+    }
+    var byKey = new Map();
+    items.forEach(function (item) {
+      var key = "".concat(item.localField, "|").concat(item.entityIdentifier || '');
+      if (!byKey.has(key)) byKey.set(key, item);
+    });
+    return Array.from(byKey.values());
+  }, []);
+  var relationsIndex = (0, _react.useMemo)(function () {
+    return buildRelationsIndex(schema);
+  }, [schema, buildRelationsIndex]);
+  var stringTypeProps = (0, _react.useMemo)(function () {
+    return (0, _utils.getStringTypeProps)(schema.id, relationsIndex, allEntitySchemas);
+  }, [schema.id, relationsIndex, allEntitySchemas]);
+  var aggregationsData = (0, _react.useMemo)(function () {
+    var _ref10 = data || {},
+      _ref10$searchResults = _ref10.searchResults,
+      _ref10$searchResults2 = _ref10$searchResults === void 0 ? {} : _ref10$searchResults,
+      _ref10$searchResults3 = _ref10$searchResults2.rawResults,
+      _ref10$searchResults4 = _ref10$searchResults3 === void 0 ? {} : _ref10$searchResults3,
+      _ref10$searchResults5 = _ref10$searchResults4.aggregations,
+      aggregations = _ref10$searchResults5 === void 0 ? {} : _ref10$searchResults5;
+    var processed = [];
+    Object.entries(aggregations).forEach(function (_ref11) {
+      var _ref12 = (0, _slicedToArray2["default"])(_ref11, 2),
+        key = _ref12[0],
+        buckets = _ref12[1].buckets;
+      processed.push(Array.isArray(buckets) ? [key, buckets.map(function (bucket) {
+        return bucket.key;
       }).filter(Boolean)] : []);
     });
-    return proccessedData;
+    return processed;
   }, [data]);
+  var findFilterConfig = (0, _react.useCallback)(function (property) {
+    var _selectFiltersToDispl, _multiSelectFiltersTo;
+    return ((_selectFiltersToDispl = selectFiltersToDisplay.find(function (_ref13) {
+      var _ref14 = (0, _slicedToArray2["default"])(_ref13, 1),
+        prop = _ref14[0];
+      return prop === property;
+    })) === null || _selectFiltersToDispl === void 0 ? void 0 : _selectFiltersToDispl[1]) || ((_multiSelectFiltersTo = multiSelectFiltersToDisplay.find(function (_ref15) {
+      var _ref16 = (0, _slicedToArray2["default"])(_ref15, 1),
+        prop = _ref16[0];
+      return prop === property;
+    })) === null || _multiSelectFiltersTo === void 0 ? void 0 : _multiSelectFiltersTo[1]);
+  }, [selectFiltersToDisplay, multiSelectFiltersToDisplay]);
   (0, _react.useEffect)(function () {
-    if (!filterData.length) {
+    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) {
+    (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+      var results, valid;
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.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) {
+            _context3.next = 2;
+            return Promise.all(aggregationsData.map( /*#__PURE__*/function () {
+              var _ref19 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(_ref18) {
+                var _ref20, property, ids, config, _config$adminListingO, _config$adminListingO2, tidyLabel, _baseOptions, schemaQuery, _yield$client$query, _yield$client$query$d, relationSchema, _yield$client$query$c, _yield$client$query$c2, selected, baseOptions;
+                return _regenerator["default"].wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
                     case 0:
-                      _ref10 = (0, _slicedToArray2["default"])(_ref8, 2), property = _ref10[0], ids = _ref10[1];
-                      _context.prev = 1;
+                      _ref20 = (0, _slicedToArray2["default"])(_ref18, 2), property = _ref20[0], ids = _ref20[1];
+                      _context2.prev = 1;
                       if (!(!ids || !ids.length)) {
-                        _context.next = 4;
+                        _context2.next = 4;
                         break;
                       }
-                      return _context.abrupt("return", {});
+                      return _context2.abrupt("return", null);
                     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;
+                      config = findFilterConfig(property);
+                      if (config) {
+                        _context2.next = 7;
                         break;
                       }
-                      return _context.abrupt("return", null);
+                      return _context2.abrupt("return", null);
                     case 7:
-                      if (selectionDetails.relation) {
-                        _context.next = 9;
+                      _config$adminListingO = config.adminListingOptions, _config$adminListingO2 = _config$adminListingO === void 0 ? {} : _config$adminListingO, tidyLabel = _config$adminListingO2.tidyLabel;
+                      if (config.relation) {
+                        _context2.next = 11;
                         break;
                       }
-                      return _context.abrupt("return", {
-                        id: property,
-                        label: selectionDetails.label,
-                        options: ids.map(function (value) {
-                          return [value, value];
-                        })
+                      _baseOptions = ids.map(function (value) {
+                        return [value, (0, _helpers.getTidyLabel)(value, tidyLabel)];
                       });
-                    case 9:
-                      query = (0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA');
-                      _context.next = 12;
-                      return apolloClient.query({
-                        query: query,
+                      return _context2.abrupt("return", {
+                        property: property,
+                        label: config.label,
+                        type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+                        options: _baseOptions,
+                        selected: values && values[property]
+                      });
+                    case 11:
+                      schemaQuery = (0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA');
+                      _context2.next = 14;
+                      return client.query({
+                        query: schemaQuery,
                         variables: {
-                          identifier: selectionDetails.relation.entityIdentifier
+                          identifier: config.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({
+                    case 14:
+                      _yield$client$query = _context2.sent;
+                      _yield$client$query$d = (0, _slicedToArray2["default"])(_yield$client$query.data.getEntitySchemas, 1);
+                      relationSchema = _yield$client$query$d[0];
+                      _context2.next = 19;
+                      return client.query({
                         query: (0, _adminUiUtils.getDynamicQuery)('GET_ALL_ENTITIES')(relationSchema),
                         variables: {
                           where: {
@@ -195,72 +309,277 @@ var SearchContainer = function SearchContainer(_ref) {
                         }
                       })
                       // eslint-disable-next-line no-console
-                      ["catch"](function (e) {
-                        return console.error(e);
+                      ["catch"](function (error) {
+                        return console.error(error);
+                      });
+                    case 19:
+                      _yield$client$query$c = _context2.sent;
+                      _yield$client$query$c2 = _yield$client$query$c.data.result;
+                      selected = _yield$client$query$c2 === void 0 ? [] : _yield$client$query$c2;
+                      baseOptions = selected.map(function (item) {
+                        return [item.id, (0, _helpers.getTidyLabel)(item.name, tidyLabel)];
                       });
-                    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];
-                        })
+                      return _context2.abrupt("return", {
+                        property: property,
+                        label: config.label || config.relation.label,
+                        type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+                        options: baseOptions,
+                        selected: values && values[property]
                       });
-                    case 23:
-                      _context.prev = 23;
-                      _context.t0 = _context["catch"](1);
-                      return _context.abrupt("return", null);
                     case 26:
+                      _context2.prev = 26;
+                      _context2.t0 = _context2["catch"](1);
+                      return _context2.abrupt("return", null);
+                    case 29:
                     case "end":
-                      return _context.stop();
+                      return _context2.stop();
                   }
-                }, _callee, null, [[1, 23]]);
+                }, _callee2, null, [[1, 26]]);
               }));
               return function (_x) {
-                return _ref9.apply(this, arguments);
+                return _ref19.apply(this, arguments);
               };
             }()));
           case 2:
-            results = _context2.sent;
-            setSelectOptions(results.filter(Boolean));
-          case 4:
+            results = _context3.sent;
+            valid = results.filter(Boolean);
+            setSelectOptions(valid.filter(function (option) {
+              return option.type === 'single';
+            }).map(function (_ref21) {
+              var property = _ref21.property,
+                label = _ref21.label,
+                options = _ref21.options,
+                selected = _ref21.selected;
+              return {
+                id: property,
+                label: label,
+                options: options,
+                selected: selected
+              };
+            }));
+            setMultiSelectOptions(valid.filter(function (option) {
+              return option.type === 'multi';
+            }).map(function (_ref22) {
+              var property = _ref22.property,
+                label = _ref22.label,
+                options = _ref22.options,
+                selected = _ref22.selected;
+              return {
+                id: property,
+                label: label,
+                items: options.map(function (_ref23) {
+                  var _ref24 = (0, _slicedToArray2["default"])(_ref23, 2),
+                    id = _ref24[0],
+                    name = _ref24[1];
+                  return {
+                    id: id,
+                    name: name
+                  };
+                }),
+                selected: selected
+              };
+            }));
+          case 6:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2);
+      }, _callee3);
     }))();
-  }, [apolloClient, filterData, schema, selectFiltersToDisplay]);
+  }, [client, aggregationsData, findFilterConfig, multiSelectPropertySet, values]);
   var updateFilters = (0, _react.useCallback)(function (term, filters) {
     return (0, _helpers.updateListFilters)(term, filters, setListFilters, keywordSearchProperties);
   }, [setListFilters, keywordSearchProperties]);
+  var debouncedUpdateFilters = (0, _react.useMemo)(function () {
+    return (0, _lodash["default"])(function (term, filters) {
+      return updateFilters(term, filters);
+    }, 300);
+  }, [updateFilters]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      return debouncedUpdateFilters.cancel();
+    };
+  }, [debouncedUpdateFilters]);
   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 handleSearchChange = (0, _react.useCallback)(function (_ref25) {
+    var value = _ref25.target.value;
+    return setSearchTerm(value);
   }, []);
-  var handleEnterKey = (0, _react.useCallback)(function (e) {
-    if (e.key === _constants.ENTER_KEY) handleSearch();
+  var handleEnterKey = (0, _react.useCallback)(function (_ref26) {
+    var key = _ref26.key;
+    if (key === _constants.ENTER_KEY) handleSearch();
   }, [handleSearch]);
   var handleReset = (0, _react.useCallback)(function () {
     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(function (prev) {
+      return Object.keys(prev).reduce(function (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;
+  }, [multiSelectPropertySet, updateFilters, debouncedUpdateFilters]);
+  var handleSelect = (0, _react.useCallback)(function (property, _ref27) {
+    var value = _ref27.value;
     var next = _objectSpread(_objectSpread({}, selectedFilters), {}, (0, _defineProperty2["default"])({}, property, value));
     setSelectedFilters(next);
-    updateFilters(searchTerm, next);
-  }, [searchTerm, selectedFilters, updateFilters]);
+    debouncedUpdateFilters(searchTerm, next);
+  }, [searchTerm, selectedFilters, debouncedUpdateFilters]);
+  var handleMultiSelect = (0, _react.useCallback)(function (property, ids) {
+    var next = _objectSpread(_objectSpread({}, selectedFilters), {}, (0, _defineProperty2["default"])({}, property, ids));
+    setSelectedFilters(next);
+    debouncedUpdateFilters(searchTerm, next);
+  }, [searchTerm, selectedFilters, debouncedUpdateFilters]);
+  var findRelationByLocalField = (0, _react.useCallback)(function (localField) {
+    return relationsIndex.find(function (relation) {
+      return relation.localField === localField;
+    });
+  }, [relationsIndex]);
+  var resolveAggProp = (0, _react.useCallback)(function (property, config) {
+    if (!config.relation) return property;
+    if (property.includes('.')) return property;
+    var localField = config.relation.localField || property;
+    return "".concat(localField, ".name");
+  }, []);
+  var resolveEntityIdentifier = (0, _react.useCallback)(function (property, config) {
+    if (!config.relation) return undefined;
+    if (config.relation.entityIdentifier) return config.relation.entityIdentifier;
+    var localField = property.includes('.') ? property.split('.')[0] : config.relation.localField || property;
+    return findRelationByLocalField(localField).entityIdentifier;
+  }, [findRelationByLocalField]);
+  var addEntitySuffixIfNeeded = (0, _react.useCallback)(function (aggProp, entityIdentifier, config) {
+    if (!config.relation || !entityIdentifier) return aggProp;
+    return "".concat(aggProp, "/").concat(entityIdentifier);
+  }, []);
+  var makeOnSearchChange = (0, _react.useCallback)(function (property) {
+    return /*#__PURE__*/function () {
+      var _ref29 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(_ref28) {
+        var value, currentOffset, _config$relation, _aggregations$key, _multiSelectOptions$f, config, aggProp, matchingRelation, entityIdentifier, filterByEntry, currentValues, aggregations, key, buckets, items, names, schemaQuery, _yield$client$query2, _yield$client$query2$, relationSchema, _yield$client$query$c3, _yield$client$query$c4, selected, existingItems;
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              value = _ref28.event.value, currentOffset = _ref28.currentOffset;
+              _context4.prev = 1;
+              if (!(!value || currentOffset)) {
+                _context4.next = 4;
+                break;
+              }
+              return _context4.abrupt("return", []);
+            case 4:
+              config = findFilterConfig(property);
+              if (config) {
+                _context4.next = 7;
+                break;
+              }
+              return _context4.abrupt("return", []);
+            case 7:
+              aggProp = resolveAggProp(property, config);
+              if (config.relation && !config.relation.localField && !property.includes('.')) {
+                matchingRelation = findRelationByLocalField(property);
+                if (matchingRelation.localField) aggProp = "".concat(matchingRelation.localField, ".name");
+              }
+              entityIdentifier = resolveEntityIdentifier(property, config) || ((_config$relation = config.relation) === null || _config$relation === void 0 ? void 0 : _config$relation.entityIdentifier);
+              filterByEntry = addEntitySuffixIfNeeded(aggProp, entityIdentifier, config);
+              currentValues = {
+                entity: schema.id,
+                filterByProperty: [filterByEntry]
+              };
+              _context4.next = 14;
+              return (0, _adminUiUtils.fetchFilterByDataFromElastic)(client, currentValues, relationsIndex, stringTypeProps, value);
+            case 14:
+              aggregations = _context4.sent;
+              key = aggProp;
+              buckets = (aggregations === null || aggregations === void 0 ? void 0 : (_aggregations$key = aggregations[key]) === null || _aggregations$key === void 0 ? void 0 : _aggregations$key.buckets) || [];
+              items = [];
+              if (!config.relation) {
+                _context4.next = 35;
+                break;
+              }
+              names = buckets.map(function (bucket) {
+                return bucket.key;
+              }).filter(Boolean);
+              if (!names.length) {
+                _context4.next = 33;
+                break;
+              }
+              schemaQuery = (0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA');
+              _context4.next = 24;
+              return client.query({
+                query: schemaQuery,
+                variables: {
+                  identifier: entityIdentifier
+                }
+              });
+            case 24:
+              _yield$client$query2 = _context4.sent;
+              _yield$client$query2$ = (0, _slicedToArray2["default"])(_yield$client$query2.data.getEntitySchemas, 1);
+              relationSchema = _yield$client$query2$[0];
+              _context4.next = 29;
+              return 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"](function (error) {
+                return console.error(error);
+              });
+            case 29:
+              _yield$client$query$c3 = _context4.sent;
+              _yield$client$query$c4 = _yield$client$query$c3.data.result;
+              selected = _yield$client$query$c4 === void 0 ? [] : _yield$client$query$c4;
+              items = selected.map(function (item) {
+                return {
+                  id: item.id,
+                  name: item.name
+                };
+              });
+            case 33:
+              _context4.next = 36;
+              break;
+            case 35:
+              items = buckets.map(function (bucket) {
+                return {
+                  id: bucket.key,
+                  name: bucket.key
+                };
+              }).filter(function (option) {
+                return option.id != null;
+              });
+            case 36:
+              existingItems = ((_multiSelectOptions$f = multiSelectOptions.find(function (opt) {
+                return opt.id === property;
+              })) === null || _multiSelectOptions$f === void 0 ? void 0 : _multiSelectOptions$f.items) || [];
+              return _context4.abrupt("return", (0, _lodash2["default"])(items, existingItems, 'id'));
+            case 40:
+              _context4.prev = 40;
+              _context4.t0 = _context4["catch"](1);
+              return _context4.abrupt("return", []);
+            case 43:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, null, [[1, 40]]);
+      }));
+      return function (_x2) {
+        return _ref29.apply(this, arguments);
+      };
+    }();
+  }, [client, schema.id, relationsIndex, stringTypeProps, multiSelectOptions, findFilterConfig, resolveAggProp, resolveEntityIdentifier, addEntitySuffixIfNeeded, findRelationByLocalField]);
   var placeholderText = "Search ".concat(keywordSearchLabels.join(', '));
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "search-container"
+    className: "search-container ms-filter"
   }, displaySearchFilter && /*#__PURE__*/_react["default"].createElement("div", {
     className: "search-container__search-input-container"
   }, /*#__PURE__*/_react["default"].createElement("input", {
@@ -273,23 +592,77 @@ var SearchContainer = function SearchContainer(_ref) {
   }), /*#__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(_bs.BsSearch, null))), displaySelectFilters && selectOptions.map(function (_ref30) {
+    var id = _ref30.id,
+      options = _ref30.options,
+      label = _ref30.label,
+      selected = _ref30.selected;
+    return options && options.length ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "search-container__select-wrapper",
+      key: "select-".concat(id)
     }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
       label: label,
       id: id,
       name: id,
-      onChange: function onChange(event) {
-        return handleSelect(id, event);
+      onChange: function onChange(_ref31) {
+        var value = _ref31.value;
+        return handleSelect(id, {
+          value: value
+        });
       },
       options: options,
-      value: selectedFilters[id],
+      value: selectedFilters[id] !== undefined ? selectedFilters[id] : selected,
       defaultTextValue: _constants.DEFAULT_FILTER_OPTION_LABEL
-    })));
+    })) : null;
+  }), displayMultiSelectFilters && multiSelectOptions.map(function (_ref32) {
+    var id = _ref32.id,
+      label = _ref32.label,
+      items = _ref32.items;
+    var selectedIds = selectedFilters[id] ? selectedFilters[id] : [];
+    var multiSelectData = {
+      filterBy: ['name'],
+      identification: 'id',
+      keyValue: 'name',
+      data: items.map(function (_ref33) {
+        var itemId = _ref33.id,
+          name = _ref33.name;
+        return {
+          id: itemId,
+          name: name,
+          description: '',
+          checked: selectedIds.includes(itemId),
+          show: true
+        };
+      })
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "search-container__select-wrapper",
+      key: "multiselect-".concat(id)
+    }, /*#__PURE__*/_react["default"].createElement(_multiselect["default"], {
+      onChange: function onChange(_ref34) {
+        var value = _ref34.value,
+          currentOffset = _ref34.currentOffset;
+        return makeOnSearchChange(id)({
+          event: {
+            value: value
+          },
+          currentOffset: currentOffset
+        });
+      },
+      name: id,
+      label: label,
+      data: multiSelectData,
+      limit: 10,
+      getSelected: function getSelected(_ref35) {
+        var value = _ref35.event.target.value;
+        return handleMultiSelect(id, value);
+      },
+      required: false,
+      checkedPreviewCount: 1,
+      formatMoreLabel: function formatMoreLabel(n) {
+        return "".concat(n, " more");
+      }
+    }));
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "search-container__reset-button"
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -301,12 +674,14 @@ SearchContainer.propTypes = {
   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;