@scaleflex/widget-explorer 4.4.0 → 4.5.1

package/lib/components/Filters/Groups/Metadata/Metadata.utils.js

@@ -0,0 +1,160 @@
+import getDateString from '@scaleflex/widget-utils/lib/getDateString';
+import { FILTER_CONDITIONS } from '@scaleflex/widget-utils/lib/constants';
+import getGeoPointValidationErrors from '@scaleflex/widget-utils/lib/metadata/getGeoPointValidationErrors';
+import { isBooleanField, isDateField, isGeoPointField, isMultiSelectField, isNumericField, isSelectField, isTagsField, isTextField, isUriField } from '../../../../utils/filters';
+import { isCustomDate } from '../../Filters.utils';
+import { ADVANCED_FILTERS_LOCAL_STORAGE_KEY, DATE_REGEX, METADATA_MULTI_SELECT_CONDITIONS_OPTIONS, METADATA_TEXT_CONDITIONS_OPTIONS } from './Metadata.constants';
+import { STATIC_OPTIONS, FILTER_CONDITIONS_OPTIONS, FILTER_IS_CONDITION } from '../../Filters.constants';
+export var generateRandomKey = function generateRandomKey() {
+  return Math.random().toString(36).slice(2);
+};
+export var isCustomMetadataDate = function isCustomMetadataDate(value) {
+  return isCustomDate(value) || typeof value === 'string' && (value === null || value === void 0 ? void 0 : value.match(DATE_REGEX));
+};
+export var getFieldDefaultValue = function getFieldDefaultValue(fieldKey, fields) {
+  var field = fields.find(function (_ref) {
+    var key = _ref.key;
+    return key === fieldKey;
+  });
+  var _field$possible_value = field.possible_values,
+    possibleValues = _field$possible_value === void 0 ? [] : _field$possible_value;
+  if (isSelectField(field) && possibleValues.length > 0) {
+    var _possibleValues$;
+    return [(_possibleValues$ = possibleValues[0]) === null || _possibleValues$ === void 0 ? void 0 : _possibleValues$.api_value];
+  }
+  if (isBooleanField(field)) {
+    return true;
+  }
+  if (isDateField(field)) {
+    return getDateString('ymd', '-');
+  }
+  if (isTagsField(field)) {
+    return [];
+  }
+  return '';
+};
+export var getFieldConditionsOptions = function getFieldConditionsOptions(type) {
+  if (isMultiSelectField({
+    type: type
+  })) {
+    return METADATA_MULTI_SELECT_CONDITIONS_OPTIONS;
+  }
+  if (isTextField({
+    type: type
+  })) {
+    return METADATA_TEXT_CONDITIONS_OPTIONS;
+  }
+  if (isDateField({
+    type: type
+  })) {
+    return [FILTER_IS_CONDITION];
+  }
+  return FILTER_CONDITIONS_OPTIONS;
+};
+export var isStaticValue = function isStaticValue(value) {
+  return STATIC_OPTIONS.some(function (_ref2) {
+    var apiValue = _ref2.api_value;
+    return apiValue === value;
+  });
+};
+export var getSelectValue = function getSelectValue(value) {
+  var lastValue = value.at(-1);
+  var isIncludingStaticValue = value.some(isStaticValue);
+  if (isStaticValue(lastValue) || isIncludingStaticValue) {
+    return [lastValue];
+  }
+  return value;
+};
+export var metadataFilterHasValue = function metadataFilterHasValue(metadataFilter) {
+  var value = metadataFilter.value;
+  if (isBooleanField(metadataFilter)) {
+    return typeof value === 'boolean';
+  }
+  if (isNumericField(metadataFilter)) {
+    return value;
+  }
+  return value && value.length;
+};
+export var isAllFiltersHaveValue = function isAllFiltersHaveValue(metadataFilters) {
+  return metadataFilters.every(metadataFilterHasValue);
+};
+export var isFiltersChanged = function isFiltersChanged(metadataValues, metadataFilters) {
+  return metadataFilters.length < metadataValues.length || metadataFilters.some(function (filter) {
+    var _metadataValues$find;
+    var _filter$value = filter.value,
+      value = _filter$value === void 0 ? '' : _filter$value,
+      key = filter.key,
+      condition = filter.condition;
+    var _ref3 = (_metadataValues$find = metadataValues.find(function (_ref4) {
+        var fieldKey = _ref4.key;
+        return fieldKey === key;
+      })) !== null && _metadataValues$find !== void 0 ? _metadataValues$find : {},
+      _ref3$value = _ref3.value,
+      appliedValue = _ref3$value === void 0 ? '' : _ref3$value,
+      appliedCondition = _ref3.condition;
+    if (condition !== appliedCondition) return true;
+    if (isSelectField(filter) || isTagsField(filter) || isUriField(filter)) {
+      return JSON.stringify(appliedValue || []) !== JSON.stringify(value || []);
+    }
+    return appliedValue !== value;
+  });
+};
+export var getDefaultPlaceholder = function getDefaultPlaceholder(field, i18n) {
+  var placeholder = field.placeholder;
+  if (placeholder || !i18n) return placeholder;
+  if (isNumericField(field)) return i18n('filtersNumericFieldPlaceholder');
+  if (isSelectField(field) || isDateField(field) || isUriField(field)) return i18n('filtersSelectFieldPlaceholder');
+  if (isGeoPointField(field)) {
+    return {
+      latitude: i18n('filterGeoPointLatitudeFieldPlaceholder'),
+      longitude: i18n('filterGeoPointLongitudeFieldPlaceholder'),
+      distance: i18n('filterGeoPointDistanceFieldPlaceholder')
+    };
+  }
+  return i18n('filtersTextFieldPlaceholder');
+};
+export var getFieldKey = function getFieldKey() {
+  var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    key = _ref5.key;
+  return key;
+};
+export var findFilterByKey = function findFilterByKey(key, metadataFilters) {
+  return metadataFilters.find(function (row) {
+    return row.key === key;
+  });
+};
+export var isInvalidFilters = function isInvalidFilters(filters) {
+  return filters.some(function (filter) {
+    var value = filter.value,
+      condition = filter.condition;
+    if (isTextField(filter) && condition === FILTER_CONDITIONS.CONTAINS) {
+      return !value || value.length < 3;
+    }
+    if (isDateField(filter)) {
+      return !value;
+    }
+    if (isGeoPointField(filter)) {
+      return !value || Object.keys(getGeoPointValidationErrors({
+        geoPoint: value,
+        showDistanceField: true
+      })).length > 0;
+    }
+    return false;
+  });
+};
+export var getAutoCompleteLabel = function getAutoCompleteLabel(i18n) {
+  return function (_ref6) {
+    var label = _ref6.label,
+      i18nLabel = _ref6.i18nLabel;
+    return i18nLabel ? i18n(i18nLabel) : label;
+  };
+};
+export var getAutoCompleteValue = function getAutoCompleteValue(_ref7) {
+  var apiValue = _ref7.api_value;
+  return apiValue;
+};
+export var loadMetadataTypeFromLocalStorage = function loadMetadataTypeFromLocalStorage() {
+  var _localStorage$getItem;
+  var defaultAdvanced = (_localStorage$getItem = localStorage.getItem(ADVANCED_FILTERS_LOCAL_STORAGE_KEY)) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : false;
+  return JSON.parse(defaultAdvanced);
+};

package/lib/components/Filters/Groups/Metadata/MetadataFiltersContext.js

@@ -0,0 +1,329 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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) { _defineProperty(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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { createContext, memo, useCallback, useContext, useMemo, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { FILTER_CONDITIONS, EXTRA_CONDITIONS } from '@scaleflex/widget-utils/lib/constants';
+import { updateFilteredFiles } from '../../../../slices/filters.slice';
+import { FiltersContext } from '../../FiltersContext';
+import { selectFacetedSearchMetadataFields, selectSortedMetadataFields } from '../../../../slices/metadata.slice';
+import { ADVANCED_CONDITIONS } from './Metadata.constants';
+import { findFilterByKey, getFieldKey, isAllFiltersHaveValue, isFiltersChanged, isInvalidFilters, metadataFilterHasValue } from './Metadata.utils';
+import { FILTER_SECTION_KEYS } from '../../Filters.constants';
+import { getFilterVal } from '../../Filters.utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+var MetadataFiltersContext = /*#__PURE__*/createContext();
+var MetadataFiltersProvider = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    appliedFilters = _ref.appliedFilters;
+  var dispatch = useDispatch();
+  var availableMetadataFields = useSelector(selectSortedMetadataFields);
+  var availableSortedFacetedSearchFields = useSelector(selectFacetedSearchMetadataFields);
+  var _useContext = useContext(FiltersContext),
+    isForcedFilters = _useContext.isForcedFilters,
+    requestClose = _useContext.requestClose,
+    defaultFilters = _useContext.defaultFilters,
+    isDisabledFiltersAndSearch = _useContext.isDisabledFiltersAndSearch;
+  var metadata = appliedFilters[FILTER_SECTION_KEYS.METADATA];
+  var metadataValues = (metadata === null || metadata === void 0 ? void 0 : metadata.value) || [];
+  var _useState = useState(metadataValues),
+    _useState2 = _slicedToArray(_useState, 2),
+    metadataFilters = _useState2[0],
+    setMetadataFilters = _useState2[1];
+  var defaultMetadata = getFilterVal(defaultFilters[FILTER_SECTION_KEYS.METADATA], []);
+  var defaultMetaLength = defaultMetadata === null || defaultMetadata === void 0 ? void 0 : defaultMetadata.length;
+  var fieldsKeys = useMemo(function () {
+    return availableMetadataFields.map(getFieldKey);
+  }, [availableMetadataFields]);
+  var filtersKeys = useMemo(function () {
+    return metadataFilters.map(getFieldKey);
+  }, [metadataFilters]);
+  var isAllFieldsSelected = useMemo(function () {
+    return filtersKeys.length === fieldsKeys.length;
+  }, [filtersKeys, fieldsKeys]);
+  var isChanged = useMemo(function () {
+    return isFiltersChanged(metadataValues, metadataFilters);
+  }, [metadataFilters, metadataValues]);
+  var sanitizedMetadataFilters = useMemo(function () {
+    return metadataFilters.filter(metadataFilterHasValue);
+  }, [metadataFilters]);
+  var hasNotForcedMetaFilters = useMemo(function () {
+    return sanitizedMetadataFilters.length > 0 && (!isForcedFilters || sanitizedMetadataFilters.length !== defaultMetaLength);
+  }, [sanitizedMetadataFilters, isForcedFilters, defaultMetaLength]);
+  var isAnyOfFiltersHaveCondition = useMemo(function () {
+    return metadataFilters.some(function (_ref2) {
+      var condition = _ref2.condition;
+      return ADVANCED_CONDITIONS.includes(condition);
+    });
+  }, [metadataFilters]);
+  var allFieldsHaveValue = useMemo(function () {
+    return isAllFiltersHaveValue(metadataFilters);
+  }, [metadataFilters]);
+  var canAddNewFields = useMemo(function () {
+    return !isDisabledFiltersAndSearch && !isAllFieldsSelected && allFieldsHaveValue && (isForcedFilters || !isInvalidFilters(metadataFilters));
+  }, [isDisabledFiltersAndSearch, isAllFieldsSelected, allFieldsHaveValue, metadataFilters, isForcedFilters]);
+  var selectFirstValidField = useCallback(function () {
+    var _availableMetadataFie;
+    return (_availableMetadataFie = availableMetadataFields.find(function (_ref3) {
+      var key = _ref3.key;
+      return !findFilterByKey(key, metadataFilters);
+    })) !== null && _availableMetadataFie !== void 0 ? _availableMetadataFie : {};
+  }, [availableMetadataFields, metadataFilters]);
+  var findFilterIndex = useCallback(function (key) {
+    return metadataFilters.findIndex(function (row) {
+      return row.key === key;
+    });
+  }, [metadataFilters]);
+  var getFieldByKey = useCallback(function (key) {
+    return availableMetadataFields.find(function (field) {
+      return field.key === key;
+    });
+  }, [availableMetadataFields]);
+  var isSelectedField = useCallback(function (fieldKey) {
+    return filtersKeys.includes(fieldKey);
+  }, [filtersKeys]);
+  var isExistKey = useCallback(function (key) {
+    return fieldsKeys.includes(key);
+  }, [fieldsKeys]);
+  var getDefaultField = useCallback(function (forceFirstField) {
+    var field = forceFirstField ? availableMetadataFields[0] : selectFirstValidField();
+    return _objectSpread(_objectSpread({}, field), {}, {
+      condition: FILTER_CONDITIONS.IS
+    });
+  }, [availableMetadataFields, selectFirstValidField]);
+  var applyFilters = useCallback(function (metadataFilters) {
+    var nextAppliedFilters = _objectSpread({}, appliedFilters);
+    if (metadataFilters.length === 0) {
+      delete nextAppliedFilters[FILTER_SECTION_KEYS.METADATA];
+    } else {
+      nextAppliedFilters[FILTER_SECTION_KEYS.METADATA] = {
+        value: metadataFilters
+      };
+    }
+    dispatch(updateFilteredFiles({
+      filters: nextAppliedFilters
+    }));
+  }, [appliedFilters]);
+  var updateMetadataFilters = useCallback(function (nextMetadataFilters) {
+    if (isDisabledFiltersAndSearch) {
+      return;
+    }
+    setMetadataFilters(nextMetadataFilters);
+  }, [isDisabledFiltersAndSearch]);
+  var clearMetadataFilters = useCallback(function (isAdvanced) {
+    if (isDisabledFiltersAndSearch) {
+      return;
+    }
+    if (isForcedFilters) {
+      setMetadataFilters(defaultMetadata);
+    } else {
+      setMetadataFilters(isAdvanced ? [_objectSpread(_objectSpread({}, getDefaultField(true)), {}, {
+        isDefault: true
+      })] : []);
+    }
+    if (metadataValues.length > 0) {
+      applyFilters(isForcedFilters ? defaultMetadata : []);
+    }
+  }, [isDisabledFiltersAndSearch, metadataValues, isForcedFilters, defaultMetadata, getDefaultField]);
+  var clearMetadataField = useCallback(function (fieldKey) {
+    if (!fieldKey || metadataValues.length === 0) {
+      return;
+    }
+    var newMetadata = metadataValues.filter(function (_ref4) {
+      var key = _ref4.key;
+      return key !== fieldKey;
+    });
+    applyFilters(newMetadata);
+  }, [metadataValues, applyFilters]);
+  var applySanitizedMetadataFilters = useCallback(function () {
+    applyFilters(sanitizedMetadataFilters);
+    requestClose();
+  }, [sanitizedMetadataFilters, applyFilters, requestClose]);
+  var addFilter = useCallback(function (isDefault) {
+    if (isDisabledFiltersAndSearch) {
+      return;
+    }
+    var nextMetadataFilters = _toConsumableArray(metadataFilters);
+    nextMetadataFilters.push(_objectSpread(_objectSpread({}, getDefaultField()), {}, {
+      isDefault: isDefault
+    }));
+    setMetadataFilters(nextMetadataFilters);
+  }, [isDisabledFiltersAndSearch, metadataFilters, getDefaultField]);
+  var deleteFilter = useCallback(function (index) {
+    if (isDisabledFiltersAndSearch) {
+      return;
+    }
+    var nextMetadataFilters = _toConsumableArray(metadataFilters);
+    nextMetadataFilters.splice(index, 1);
+    setMetadataFilters(nextMetadataFilters);
+  }, [isDisabledFiltersAndSearch, metadataFilters]);
+  var updateFilterKey = useCallback(function (key, value) {
+    if (isDisabledFiltersAndSearch) {
+      return;
+    }
+    var nextMetadataFilters = _toConsumableArray(metadataFilters);
+    var filterIndex = findFilterIndex(key);
+    var filter = getFieldByKey(value);
+    if (filterIndex !== -1) {
+      nextMetadataFilters[filterIndex] = _objectSpread(_objectSpread({}, filter), {}, {
+        isDefault: false,
+        condition: FILTER_CONDITIONS.IS
+      });
+      setMetadataFilters(nextMetadataFilters);
+    }
+  }, [isDisabledFiltersAndSearch, metadataFilters, findFilterIndex, getFieldByKey, availableMetadataFields]);
+  var updateFilterCondition = useCallback(function (key, condition) {
+    if (isDisabledFiltersAndSearch) {
+      return;
+    }
+    var nextMetadataFilters = _toConsumableArray(metadataFilters);
+    var filterIndex = findFilterIndex(key);
+    if (filterIndex !== -1) {
+      var _nextMetadataFilters$;
+      var filter = _objectSpread({}, (_nextMetadataFilters$ = nextMetadataFilters[filterIndex]) !== null && _nextMetadataFilters$ !== void 0 ? _nextMetadataFilters$ : {});
+      if (condition === FILTER_CONDITIONS.CONTAINS_NOT) {
+        filter.extraCondition = EXTRA_CONDITIONS.NOT;
+        filter.extraValue = [];
+      }
+      nextMetadataFilters[filterIndex] = _objectSpread(_objectSpread({}, filter), {}, {
+        isDefault: false,
+        condition: condition,
+        value: undefined
+      });
+      setMetadataFilters(nextMetadataFilters);
+    }
+  }, [isDisabledFiltersAndSearch, metadataFilters, findFilterIndex]);
+  var updateFilterValue = useCallback(function (key, value, operator) {
+    if (isDisabledFiltersAndSearch) {
+      return;
+    }
+    var nextMetadataFilters = _toConsumableArray(metadataFilters);
+    var filterIndex = findFilterIndex(key);
+    if (filterIndex !== -1) {
+      var _nextMetadataFilters$2;
+      var filter = (_nextMetadataFilters$2 = nextMetadataFilters[filterIndex]) !== null && _nextMetadataFilters$2 !== void 0 ? _nextMetadataFilters$2 : {};
+      nextMetadataFilters[filterIndex] = _objectSpread(_objectSpread({}, filter), {}, {
+        isDefault: false,
+        value: value,
+        operator: operator || filter.operator
+      });
+      setMetadataFilters(nextMetadataFilters);
+    }
+  }, [isDisabledFiltersAndSearch, metadataFilters, findFilterIndex]);
+  var updateFilterExtraCondition = useCallback(function (key, extraCondition) {
+    if (isDisabledFiltersAndSearch) {
+      return;
+    }
+    var nextMetadataFilters = _toConsumableArray(metadataFilters);
+    var filterIndex = findFilterIndex(key);
+    if (filterIndex !== -1) {
+      nextMetadataFilters[filterIndex] = _objectSpread(_objectSpread({}, nextMetadataFilters[filterIndex]), {}, {
+        extraCondition: extraCondition
+      });
+      setMetadataFilters(nextMetadataFilters);
+    }
+  }, [isDisabledFiltersAndSearch, metadataFilters, findFilterIndex]);
+  var updateFilterExtraValue = useCallback(function (key, extraValue) {
+    if (isDisabledFiltersAndSearch) {
+      return;
+    }
+    var nextMetadataFilters = _toConsumableArray(metadataFilters);
+    var filterIndex = findFilterIndex(key);
+    if (filterIndex !== -1) {
+      var _nextMetadataFilters$3;
+      var filter = (_nextMetadataFilters$3 = nextMetadataFilters[filterIndex]) !== null && _nextMetadataFilters$3 !== void 0 ? _nextMetadataFilters$3 : {};
+      nextMetadataFilters[filterIndex] = _objectSpread(_objectSpread({}, filter), {}, {
+        extraValue: extraValue
+      });
+      setMetadataFilters(nextMetadataFilters);
+    }
+  }, [isDisabledFiltersAndSearch, metadataFilters, findFilterIndex]);
+  var getOptions = useCallback(function (field) {
+    var _field$possible_value = field.possible_values,
+      possibleValues = _field$possible_value === void 0 ? [] : _field$possible_value,
+      _field$extraValue = field.extraValue,
+      extraValue = _field$extraValue === void 0 ? [] : _field$extraValue,
+      condition = field.condition;
+    if (condition === FILTER_CONDITIONS.CONTAINS_NOT) {
+      return possibleValues.filter(function (_ref5) {
+        var apiValue = _ref5.api_value;
+        return !extraValue.includes(apiValue);
+      });
+    }
+    return possibleValues;
+  }, []);
+  var getExtraOptions = useCallback(function (field) {
+    var _field$possible_value2 = field.possible_values,
+      possibleValues = _field$possible_value2 === void 0 ? [] : _field$possible_value2,
+      _field$value = field.value,
+      value = _field$value === void 0 ? [] : _field$value;
+    return possibleValues.filter(function (_ref6) {
+      var apiValue = _ref6.api_value;
+      return !value.includes(apiValue);
+    });
+  }, []);
+  var canClear = useCallback(function (isAdvanced) {
+    var _metadataFilters$;
+    if (metadataValues.length && (!isForcedFilters || metadataValues.length !== defaultMetaLength)) return true;
+    return isAdvanced ? hasNotForcedMetaFilters && (metadataFilters.length > 1 || !((_metadataFilters$ = metadataFilters[0]) !== null && _metadataFilters$ !== void 0 && _metadataFilters$.isDefault)) : hasNotForcedMetaFilters;
+  }, [metadataValues, metadataFilters, hasNotForcedMetaFilters]);
+  var isMetadataDisabled = function isMetadataDisabled(key) {
+    return isDisabledFiltersAndSearch || isForcedFilters && defaultMetadata.some(function (meta) {
+      return meta.key === key;
+    });
+  };
+  var contextValue = useMemo(function () {
+    return {
+      metadataFilters: metadataFilters,
+      availableMetadataFields: availableMetadataFields,
+      availableSortedFacetedSearchFields: availableSortedFacetedSearchFields,
+      hasMetadataFilters: hasNotForcedMetaFilters,
+      isChanged: isChanged,
+      defaultMetadata: defaultMetadata,
+      isForcedFilters: isForcedFilters,
+      isDisabledFiltersAndSearch: isDisabledFiltersAndSearch,
+      fieldsKeys: fieldsKeys,
+      isAnyOfFiltersHaveCondition: isAnyOfFiltersHaveCondition,
+      canAddNewFields: canAddNewFields,
+      allFieldsHaveValue: allFieldsHaveValue,
+      defaultFilters: defaultFilters,
+      canClear: canClear,
+      getOptions: getOptions,
+      addFilter: addFilter,
+      deleteFilter: deleteFilter,
+      isSelectedField: isSelectedField,
+      isExistKey: isExistKey,
+      isMetadataDisabled: isMetadataDisabled,
+      applyMetadataFilters: applySanitizedMetadataFilters,
+      updateMetadataFilters: updateMetadataFilters,
+      clearMetadataFilters: clearMetadataFilters,
+      updateFilterKey: updateFilterKey,
+      updateFilterCondition: updateFilterCondition,
+      updateFilterValue: updateFilterValue,
+      findFilterIndex: findFilterIndex,
+      updateFilterExtraCondition: updateFilterExtraCondition,
+      updateFilterExtraValue: updateFilterExtraValue,
+      getExtraOptions: getExtraOptions,
+      getFieldByKey: getFieldByKey,
+      clearMetadataField: clearMetadataField
+    };
+  }, [metadataFilters, availableMetadataFields, availableSortedFacetedSearchFields, hasNotForcedMetaFilters, isChanged, defaultMetadata, isForcedFilters, isDisabledFiltersAndSearch, fieldsKeys, isAnyOfFiltersHaveCondition, canAddNewFields, allFieldsHaveValue, defaultFilters, canClear, getOptions, addFilter, deleteFilter, isSelectedField, isExistKey, isMetadataDisabled, applySanitizedMetadataFilters, updateMetadataFilters, clearMetadataFilters, updateFilterKey, updateFilterCondition, updateFilterValue, findFilterIndex, updateFilterExtraCondition, updateFilterExtraValue, getExtraOptions, getFieldByKey, clearMetadataField]);
+  return /*#__PURE__*/_jsx(MetadataFiltersContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+});
+export { MetadataFiltersContext, MetadataFiltersProvider };

package/lib/components/Filters/Groups/Metadata/Placeholder.js

@@ -0,0 +1,25 @@
+import { Fragment } from 'react';
+import { NoMenu } from '@scaleflex/icons';
+import { useExplorer } from '../../../../hooks';
+import Styled from './Metadata.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Placeholder = function Placeholder(_ref) {
+  var description = _ref.description;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n;
+  return /*#__PURE__*/_jsxs(Styled.PlaceholderWrapper, {
+    children: [/*#__PURE__*/_jsx(NoMenu, {
+      width: 150,
+      height: 60
+    }), /*#__PURE__*/_jsx(Styled.PlaceholderTitle, {
+      children: i18n('filtersPlaceholderTitle')
+    }), Array.isArray(description) && /*#__PURE__*/_jsx(Styled.PlaceholderDesc, {
+      children: description.map(function (item) {
+        return /*#__PURE__*/_jsx(Fragment, {
+          children: item
+        }, item);
+      })
+    })]
+  });
+};
+export default Placeholder;

package/lib/components/Filters/Groups/Metadata/common/TagsField/TagsMenu.js

@@ -0,0 +1,81 @@
+import { useRef } from 'react';
+import { EllipsedText, Skeleton, TextWithHighlights } from '@scaleflex/ui/core';
+import removeDuplicatesFromArray from '@scaleflex/widget-utils/lib/removeDuplicatesFromArray';
+import { useKeyboardNavigation } from '@scaleflex/widget-common/lib/hooks';
+import { useExplorerI18n } from '../../../../../../hooks';
+import TagsSearchPlaceholder from './TagsSearchPlaceholder';
+import Styled from '../../Metadata.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var SKELETON_SPAN = ['span 6', 'span 3', 'span 3', 'span 2', 'span 2', 'span 2'];
+var TagsMenu = function TagsMenu(_ref) {
+  var _ref$tags = _ref.tags,
+    tags = _ref$tags === void 0 ? [] : _ref$tags,
+    pending = _ref.pending,
+    onSelectTag = _ref.onSelectTag,
+    initialPlaceholderShown = _ref.initialPlaceholderShown,
+    query = _ref.query;
+  var i18n = useExplorerI18n();
+  var containerRef = useRef();
+  var uniqueTags = removeDuplicatesFromArray(tags, 'name');
+  var _useKeyboardNavigatio = useKeyboardNavigation({
+      items: uniqueTags,
+      containerRef: containerRef,
+      onSelectItem: function onSelectItem(tag) {
+        return onSelectTag(tag.name);
+      }
+    }),
+    itemRefs = _useKeyboardNavigatio.itemRefs,
+    handleKeyDown = _useKeyboardNavigatio.handleKeyDown;
+  if (initialPlaceholderShown) {
+    return /*#__PURE__*/_jsx(Styled.TagsMenuWrapper, {
+      children: /*#__PURE__*/_jsx(Styled.TagsMenuPlaceholderText, {
+        children: i18n('tagsSearchSuggestionStartPlaceholder')
+      })
+    });
+  }
+  if (pending) {
+    return /*#__PURE__*/_jsx(Styled.TagsMenuWrapper, {
+      children: /*#__PURE__*/_jsx(Styled.TagsMenuSkeletonWrapper, {
+        children: Array.from({
+          length: 13
+        }).map(function (_, index) {
+          return /*#__PURE__*/_jsx(Skeleton, {
+            style: {
+              gridColumn: SKELETON_SPAN[index % SKELETON_SPAN.length]
+            }
+          }, index);
+        })
+      })
+    });
+  }
+  if (tags.length === 0) {
+    return /*#__PURE__*/_jsx(TagsSearchPlaceholder, {});
+  }
+  return /*#__PURE__*/_jsx(Styled.TagsMenuWrapper, {
+    children: /*#__PURE__*/_jsx(Styled.TagsMenuChipsWrapper, {
+      ref: containerRef,
+      children: uniqueTags.map(function (_ref2, index) {
+        var name = _ref2.name;
+        return /*#__PURE__*/_jsx(Styled.TagChip, {
+          tabIndex: 0,
+          crossIcon: false,
+          ref: function ref(element) {
+            return itemRefs.current[index] = element;
+          },
+          onClick: function onClick() {
+            return onSelectTag(name);
+          },
+          onKeyDown: handleKeyDown,
+          children: /*#__PURE__*/_jsx(EllipsedText, {
+            maxLinesCount: 1,
+            children: /*#__PURE__*/_jsx(TextWithHighlights, {
+              text: name,
+              highlightText: query
+            })
+          })
+        }, name);
+      })
+    })
+  });
+};
+export default TagsMenu;

package/lib/components/Filters/Groups/Metadata/common/TagsField/TagsSearchPlaceholder.js

@@ -0,0 +1,18 @@
+import { NoResult } from '@scaleflex/icons';
+import { useExplorerI18n } from '../../../../../../hooks';
+import Styled from '../../Metadata.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var TagsSearchPlaceholder = function TagsSearchPlaceholder() {
+  var i18n = useExplorerI18n();
+  return /*#__PURE__*/_jsx(Styled.TagsMenuWrapper, {
+    children: /*#__PURE__*/_jsxs(Styled.TagsMenuPlaceholderWrapper, {
+      children: [/*#__PURE__*/_jsx(NoResult, {
+        width: 150,
+        height: 60
+      }), /*#__PURE__*/_jsx(Styled.TagsMenuPlaceholder, {
+        children: i18n('filtersPlaceholderTagNotFound')
+      })]
+    })
+  });
+};
+export default TagsSearchPlaceholder;