@scaleflex/widget-explorer 0.0.1

package/lib/components/Filters/Groups/Metadata/Advanced/Field/Text.js

@@ -0,0 +1,39 @@
+import { useContext, useMemo } from 'react';
+import { InputGroup } from '@scaleflex/ui/core';
+import { FILTER_CONDITIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorerI18n } from '../../../../../../hooks';
+import { isTextAreaField } from '../../../../../../utils/filters';
+import { getDefaultPlaceholder } from '../../Metadata.utils';
+import { MetadataFiltersContext } from '../../MetadataFiltersContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Text = function Text(_ref) {
+  var row = _ref.row;
+  var i18n = useExplorerI18n();
+  var _useContext = useContext(MetadataFiltersContext),
+    updateFilterValue = _useContext.updateFilterValue,
+    isMetadataDisabled = _useContext.isMetadataDisabled;
+  var _row$value = row.value,
+    value = _row$value === void 0 ? '' : _row$value,
+    key = row.key,
+    condition = row.condition;
+  var isTextArea = useMemo(function () {
+    return isTextAreaField(row);
+  }, [row]);
+  var invalidInput = value && value.length < 3 && condition === FILTER_CONDITIONS.CONTAINS;
+  return /*#__PURE__*/_jsx(InputGroup, {
+    fullWidth: true,
+    size: isTextArea ? 'md' : 'sm',
+    disabled: isMetadataDisabled(key),
+    value: value,
+    error: invalidInput,
+    onChange: function onChange(event) {
+      return updateFilterValue(key, event.target.value);
+    },
+    placeholder: getDefaultPlaceholder(row, i18n),
+    type: isTextArea ? 'textarea' : 'input',
+    TextareaProps: {
+      rows: 3
+    }
+  });
+};
+export default Text;

package/lib/components/Filters/Groups/Metadata/Advanced/Field/index.js

@@ -0,0 +1,52 @@
+import { isBooleanField, isDateField, isNumericField, isTagsField, isTextField, isSelectField, isGeoPointField } from '../../../../../../utils/filters';
+import AutoComplete from './AutoComplete';
+import Boolean from './Boolean';
+import Date from './Date';
+import Numeric from './Numeric';
+import Select from './Select';
+import Tags from './Tags';
+import Text from './Text';
+import GeoPointField from './GeoPointField';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Field = function Field(_ref) {
+  var row = _ref.row;
+  if (isBooleanField(row)) {
+    return /*#__PURE__*/_jsx(Boolean, {
+      row: row
+    });
+  }
+  if (isTextField(row)) {
+    return /*#__PURE__*/_jsx(Text, {
+      row: row
+    });
+  }
+  if (isNumericField(row)) {
+    return /*#__PURE__*/_jsx(Numeric, {
+      row: row
+    });
+  }
+  if (isTagsField(row)) {
+    return /*#__PURE__*/_jsx(Tags, {
+      row: row
+    });
+  }
+  if (isDateField(row)) {
+    return /*#__PURE__*/_jsx(Date, {
+      row: row
+    });
+  }
+  if (isSelectField(row)) {
+    return /*#__PURE__*/_jsx(AutoComplete, {
+      row: row
+    });
+  }
+  if (isGeoPointField(row)) {
+    return /*#__PURE__*/_jsx(GeoPointField, {
+      row: row
+    });
+  }
+  return /*#__PURE__*/_jsx(Select, {
+    row: row
+  });
+};
+export default Field;

package/lib/components/Filters/Groups/Metadata/Advanced/KeySelector.js

@@ -0,0 +1,34 @@
+import { useContext } from 'react';
+import { EllipsedText, MenuItem, SelectGroup } from '@scaleflex/ui/core';
+import { MetadataFiltersContext } from '../MetadataFiltersContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+var KeySelector = function KeySelector(_ref) {
+  var row = _ref.row;
+  var _useContext = useContext(MetadataFiltersContext),
+    fieldsKeys = _useContext.fieldsKeys,
+    updateFilterKey = _useContext.updateFilterKey,
+    isSelectedField = _useContext.isSelectedField,
+    isMetadataDisabled = _useContext.isMetadataDisabled,
+    getFieldByKey = _useContext.getFieldByKey;
+  var key = row.key;
+  return /*#__PURE__*/_jsx(SelectGroup, {
+    size: "sm",
+    fullWidth: true,
+    disabled: isMetadataDisabled(key),
+    value: key,
+    onChange: function onChange(newValue) {
+      return updateFilterKey(key, newValue);
+    },
+    children: fieldsKeys.map(function (key) {
+      return /*#__PURE__*/_jsx(MenuItem, {
+        value: key,
+        disabled: isSelectedField(key),
+        children: /*#__PURE__*/_jsx(EllipsedText, {
+          maxLinesCount: 1,
+          children: getFieldByKey(key).title
+        })
+      }, key);
+    })
+  });
+};
+export default KeySelector;

package/lib/components/Filters/Groups/Metadata/Advanced/Row.js

@@ -0,0 +1,53 @@
+import { useContext } from 'react';
+import KeySelector from './KeySelector';
+import ConditionSelector from './ConditionSelector';
+import { useIsSmallScreen } from '../../../../../hooks';
+import { isCustomMetadataDate } from '../Metadata.utils';
+import Field from './Field';
+import { MetadataFiltersContext } from '../MetadataFiltersContext';
+import { isContainsNotCondition } from '../../../../../utils/filters';
+import ExtraRow from './ExtraRow';
+import Styled from '../Metadata.styled';
+import { METADATA_FIELDS_TYPES } from '../../../Filters.constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Row = function Row(_ref) {
+  var row = _ref.row,
+    canRemoveRow = _ref.canRemoveRow,
+    index = _ref.index;
+  var _useContext = useContext(MetadataFiltersContext),
+    deleteFilter = _useContext.deleteFilter,
+    updateFilterValue = _useContext.updateFilterValue,
+    isMetadataDisabled = _useContext.isMetadataDisabled;
+  var isWidgetSmallSize = useIsSmallScreen();
+  var value = row.value,
+    condition = row.condition,
+    key = row.key,
+    type = row.type;
+  var onClickCrossButton = function onClickCrossButton() {
+    if (canRemoveRow) {
+      deleteFilter(index);
+    } else {
+      updateFilterValue(key, undefined);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Styled.RowWrapper, {
+    children: [/*#__PURE__*/_jsxs(Styled.MainRowWrapper, {
+      isWidgetSmallSize: isWidgetSmallSize,
+      children: [/*#__PURE__*/_jsx(KeySelector, {
+        row: row
+      }), /*#__PURE__*/_jsx(ConditionSelector, {
+        row: row
+      }), /*#__PURE__*/_jsx(Field, {
+        row: row
+      }), /*#__PURE__*/_jsx(Styled.CrossButton, {
+        disabled: isMetadataDisabled(key) || !(value !== null && value !== void 0 && value.length),
+        color: "basic",
+        onClick: onClickCrossButton,
+        alignItem: isCustomMetadataDate(value) || type === METADATA_FIELDS_TYPES.GEO_POINT ? 'flex-start' : 'center'
+      })]
+    }), isContainsNotCondition(condition) && /*#__PURE__*/_jsx(ExtraRow, {
+      row: row
+    })]
+  });
+};
+export default Row;

package/lib/components/Filters/Groups/Metadata/Advanced/index.js

@@ -0,0 +1,48 @@
+import { useContext, useRef } from 'react';
+import { PlusOutline } from '@scaleflex/icons';
+import { useExplorerI18n } from '../../../../../hooks';
+import { MetadataFiltersContext } from '../MetadataFiltersContext';
+import Row from './Row';
+import Styled from '../Metadata.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Advanced = function Advanced() {
+  var i18n = useExplorerI18n();
+  var _useContext = useContext(MetadataFiltersContext),
+    metadataFilters = _useContext.metadataFilters,
+    addFilter = _useContext.addFilter,
+    canAddNewFields = _useContext.canAddNewFields,
+    isDisabledFiltersAndSearch = _useContext.isDisabledFiltersAndSearch;
+  var rowsContainerRef = useRef(null);
+  var scrollToBottom = function scrollToBottom() {
+    if (rowsContainerRef.current) {
+      rowsContainerRef.current.scrollTop = rowsContainerRef.current.scrollHeight;
+    }
+  };
+  var addNewFilter = function addNewFilter() {
+    addFilter();
+    setTimeout(function () {
+      scrollToBottom();
+    });
+  };
+  return /*#__PURE__*/_jsxs(Styled.MetadataWrapper, {
+    className: "filerobot-Provider-Filters-Metadata-filterBody",
+    children: [/*#__PURE__*/_jsx(Styled.RowsContainer, {
+      ref: rowsContainerRef,
+      children: metadataFilters.map(function (row, index) {
+        return /*#__PURE__*/_jsx(Row, {
+          row: row,
+          index: index,
+          canRemoveRow: !isDisabledFiltersAndSearch || metadataFilters.length > 1
+        }, row.key);
+      })
+    }), /*#__PURE__*/_jsx(Styled.AddRowButton, {
+      size: "sm",
+      color: "link-primary",
+      disabled: !canAddNewFields,
+      startIcon: /*#__PURE__*/_jsx(PlusOutline, {}),
+      onClick: addNewFilter,
+      children: i18n('filtersAddFieldButtonLabel')
+    })]
+  });
+};
+export default Advanced;

package/lib/components/Filters/Groups/Metadata/Basic/Field/Date.js

@@ -0,0 +1,45 @@
+import { useContext, useMemo } from 'react';
+import { DatePicker } from '@scaleflex/ui/core';
+import preventDefault from '@scaleflex/widget-utils/lib/preventDefault';
+import { MetadataFiltersContext } from '../../MetadataFiltersContext';
+import { findMetadataFieldIndex, getOldMetadataDateFilterValFromArray } from '../../../../../../utils/filters';
+import { getUpdatedMetadataFilters } from './Field.utils';
+import Styled from '../../Metadata.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Date = function Date(_ref) {
+  var field = _ref.field;
+  var _useContext = useContext(MetadataFiltersContext),
+    metadataFilters = _useContext.metadataFilters,
+    updateMetadataFilters = _useContext.updateMetadataFilters,
+    isForcedFilters = _useContext.isForcedFilters;
+  var key = field.key;
+  var metadataFieldIndex = useMemo(function () {
+    return findMetadataFieldIndex(metadataFilters, key);
+  }, [metadataFilters]);
+  var _useMemo = useMemo(function () {
+      var _metadataFilters$meta;
+      return (_metadataFilters$meta = metadataFilters[metadataFieldIndex]) !== null && _metadataFilters$meta !== void 0 ? _metadataFilters$meta : {};
+    }, [metadataFilters]),
+    _useMemo$value = _useMemo.value,
+    value = _useMemo$value === void 0 ? '' : _useMemo$value;
+  var updateDateField = function updateDateField(value) {
+    if (isForcedFilters) return;
+    var nextMetadataFilters = getUpdatedMetadataFilters({
+      metadataFilters: metadataFilters,
+      field: field,
+      value: value,
+      index: metadataFieldIndex
+    });
+    updateMetadataFilters(nextMetadataFilters);
+  };
+  return /*#__PURE__*/_jsx(Styled.OptionsContainer, {
+    children: /*#__PURE__*/_jsx(DatePicker, {
+      size: "sm",
+      value: Array.isArray(value) ? getOldMetadataDateFilterValFromArray(value[0]) : value,
+      onKeyDown: preventDefault,
+      disabled: isForcedFilters,
+      onChange: updateDateField
+    })
+  });
+};
+export default Date;

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

@@ -0,0 +1,58 @@
+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 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 _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 _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 _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 _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; }
+import { FILTER_CONDITIONS } from '@scaleflex/widget-utils/lib/constants';
+export var getUpdatedMetadataFilters = function getUpdatedMetadataFilters(_ref) {
+  var metadataFilters = _ref.metadataFilters,
+    field = _ref.field,
+    value = _ref.value,
+    index = _ref.index;
+  var nextMetadataFilters = _toConsumableArray(metadataFilters);
+  var updatedField = _objectSpread(_objectSpread({}, field), {}, {
+    value: value,
+    condition: FILTER_CONDITIONS.IS
+  });
+  if (index !== -1) {
+    nextMetadataFilters[index] = updatedField;
+  } else {
+    nextMetadataFilters.push(updatedField);
+  }
+  return nextMetadataFilters;
+};
+export var getAlphabeticGroupedOptions = function getAlphabeticGroupedOptions(allOptions) {
+  var sortedOptions = _toConsumableArray(allOptions).sort(function (a, b) {
+    return a.label.localeCompare(b.label);
+  });
+
+  // Group by the first letter of the label
+  return sortedOptions.reduce(function (acc, option) {
+    var firstLetter = option.label.charAt(0).toUpperCase();
+    if (!acc[firstLetter]) {
+      acc[firstLetter] = [];
+    }
+    acc[firstLetter].push(option);
+    return acc;
+  }, {});
+};
+export var isActiveForcedOption = function isActiveForcedOption(_ref2) {
+  var _defaultMetadata$find;
+  var defaultMetadata = _ref2.defaultMetadata,
+    key = _ref2.key,
+    value = _ref2.value;
+  var _ref3 = (_defaultMetadata$find = defaultMetadata.find(function (_ref4) {
+      var fieldKey = _ref4.key;
+      return fieldKey === key;
+    })) !== null && _defaultMetadata$find !== void 0 ? _defaultMetadata$find : {},
+    _ref3$value = _ref3.value,
+    forcedValues = _ref3$value === void 0 ? [] : _ref3$value;
+  return forcedValues.includes(value);
+};

package/lib/components/Filters/Groups/Metadata/Basic/Field/Numeric.js

@@ -0,0 +1,51 @@
+import { useContext, useMemo } from 'react';
+import { InputGroup } from '@scaleflex/ui/core';
+import { MetadataFiltersContext } from '../../MetadataFiltersContext';
+import { findMetadataFieldIndex, isValidNumber } from '../../../../../../utils/filters';
+import { getUpdatedMetadataFilters } from './Field.utils';
+import { getDefaultPlaceholder } from '../../Metadata.utils';
+import { useExplorerI18n } from '../../../../../../hooks';
+import Styled from '../../Metadata.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Numeric = function Numeric(_ref) {
+  var field = _ref.field;
+  var i18n = useExplorerI18n();
+  var _useContext = useContext(MetadataFiltersContext),
+    metadataFilters = _useContext.metadataFilters,
+    isForcedFilters = _useContext.isForcedFilters,
+    updateMetadataFilters = _useContext.updateMetadataFilters;
+  var key = field.key;
+  var metadataFieldIndex = useMemo(function () {
+    return findMetadataFieldIndex(metadataFilters, key);
+  }, [metadataFilters]);
+  var _useMemo = useMemo(function () {
+      var _metadataFilters$meta;
+      return (_metadataFilters$meta = metadataFilters[metadataFieldIndex]) !== null && _metadataFilters$meta !== void 0 ? _metadataFilters$meta : {};
+    }, [metadataFilters]),
+    _useMemo$value = _useMemo.value,
+    value = _useMemo$value === void 0 ? '' : _useMemo$value;
+  var updateMetadata = function updateMetadata(event) {
+    if (isForcedFilters) return;
+    var value = event.target.value;
+    if (isValidNumber(value)) {
+      var nextMetadataFilters = getUpdatedMetadataFilters({
+        metadataFilters: metadataFilters,
+        field: field,
+        value: value,
+        index: metadataFieldIndex
+      });
+      updateMetadataFilters(nextMetadataFilters);
+    }
+  };
+  return /*#__PURE__*/_jsx(Styled.OptionsContainer, {
+    children: /*#__PURE__*/_jsx(InputGroup, {
+      fullWidth: true,
+      size: "sm",
+      placeholder: getDefaultPlaceholder(field, i18n),
+      disabled: isForcedFilters,
+      value: value,
+      onChange: updateMetadata
+    })
+  });
+};
+export default Numeric;

package/lib/components/Filters/Groups/Metadata/Basic/Field/OptionsPopup.js

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import { CheckBoxGroup, EllipsedText, TextWithHighlights } from '@scaleflex/ui/core';
+import { NoResults2 } from '@scaleflex/widget-icons/lib';
+import { getAlphabeticGroupedOptions } from './Field.utils';
+import { useExplorerI18n, useFilterSearch } from '../../../../../../hooks';
+import { isCheckedOption } from '../../../../../../utils/filters';
+import Placeholder from '../../../../Placeholder';
+import FilterSearch from '../../../common/FilterSearch';
+import StyledFilter from '../../../../Filters.styled';
+import Styled from '../../Metadata.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var OptionsPopup = function OptionsPopup(_ref) {
+  var allOptions = _ref.allOptions,
+    field = _ref.field,
+    metadataFieldFilter = _ref.metadataFieldFilter,
+    updateMetadata = _ref.updateMetadata,
+    isDisabledOption = _ref.isDisabledOption;
+  var i18n = useExplorerI18n();
+  var _useFilterSearch = useFilterSearch({
+      options: allOptions,
+      searchProperty: 'label'
+    }),
+    searchQuery = _useFilterSearch.searchQuery,
+    filteredOptions = _useFilterSearch.filteredOptions,
+    hasResults = _useFilterSearch.hasResults,
+    handleSearch = _useFilterSearch.handleSearch;
+  var groupedOptions = useMemo(function () {
+    return getAlphabeticGroupedOptions(filteredOptions);
+  }, [filteredOptions]);
+  var hasSingleColumn = useMemo(function () {
+    return Object.keys(groupedOptions).length === 1;
+  }, [groupedOptions]);
+  return /*#__PURE__*/_jsxs(StyledFilter.OptionsPopupWrapper, {
+    minHeight: !hasResults ? 350 : 0,
+    $width: 700,
+    children: [/*#__PURE__*/_jsx(Styled.OptionsPopupContainer, {
+      children: /*#__PURE__*/_jsx(Styled.FilterHeader, {
+        children: /*#__PURE__*/_jsx(FilterSearch, {
+          searchQuery: searchQuery,
+          handleSearch: handleSearch
+        })
+      })
+    }), /*#__PURE__*/_jsx(StyledFilter.OptionsGroupWrapper, {
+      col: hasResults && !hasSingleColumn ? 2 : 1,
+      children: !hasResults ? /*#__PURE__*/_jsx(Placeholder, {
+        "data-placeholder": true,
+        className: "filerobot-Explorer-Filters-noResults-placeholder",
+        icon: /*#__PURE__*/_jsx(NoResults2, {
+          size: 120
+        }),
+        title: i18n('filtersNoResult'),
+        desc: i18n('mutualizedTryAnotherSearch')
+      }) : Object.keys(groupedOptions).map(function (letter) {
+        return /*#__PURE__*/_jsxs(Styled.OptionsPopupContainer, {
+          children: [/*#__PURE__*/_jsx(Styled.GroupHeader, {
+            children: letter
+          }), /*#__PURE__*/_jsx(Styled.OptionsContainer, {
+            col: 1,
+            children: groupedOptions[letter].map(function (_ref2) {
+              var label = _ref2.label,
+                apiValue = _ref2.api_value;
+              return /*#__PURE__*/_jsx(CheckBoxGroup, {
+                disabled: isDisabledOption(apiValue),
+                label: /*#__PURE__*/_jsx(EllipsedText, {
+                  maxLinesCount: 1,
+                  children: /*#__PURE__*/_jsx(TextWithHighlights, {
+                    text: label,
+                    highlightText: searchQuery
+                  })
+                }),
+                checked: isCheckedOption({
+                  value: apiValue,
+                  field: field,
+                  metadataFieldFilter: metadataFieldFilter
+                }),
+                onChange: function onChange() {
+                  updateMetadata(apiValue);
+                }
+              }, apiValue);
+            })
+          })]
+        }, letter);
+      })
+    })]
+  });
+};
+export default OptionsPopup;

package/lib/components/Filters/Groups/Metadata/Basic/Field/Select.js

@@ -0,0 +1,168 @@
+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 { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { ArrowBottom } from '@scaleflex/icons';
+import { CheckBoxGroup, EllipsedText, Popper } from '@scaleflex/ui/core';
+import { isActiveForcedOption } from './Field.utils';
+import { useExplorerI18n } from '../../../../../../hooks';
+import { findMetadataFieldIndex, getUpdatedSelectMetadataFields, isBigOptions, isCheckedOption } from '../../../../../../utils/filters';
+import { MetadataFiltersContext } from '../../MetadataFiltersContext';
+import OptionsPopup from './OptionsPopup';
+import Styled from '../../Metadata.styled';
+import { BIG_OPTIONS_THRESHOLD } from '../../Metadata.constants';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var MAXIMUM_SELECTED_OPTIONS_COUNT = 10;
+var Select = function Select(_ref) {
+  var field = _ref.field;
+  var i18n = useExplorerI18n();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showAllOptions = _useState2[0],
+    setShowAllOptions = _useState2[1];
+  var _useContext = useContext(MetadataFiltersContext),
+    metadataFilters = _useContext.metadataFilters,
+    defaultMetadata = _useContext.defaultMetadata,
+    isForcedFilters = _useContext.isForcedFilters,
+    updateMetadataFilters = _useContext.updateMetadataFilters;
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    anchorEl = _useState4[0],
+    setAnchorEl = _useState4[1];
+  var _field$possible_value = field.possible_values,
+    possibleValues = _field$possible_value === void 0 ? [] : _field$possible_value,
+    key = field.key;
+  var metadataFieldIndex = useMemo(function () {
+    return findMetadataFieldIndex(metadataFilters, key);
+  }, [metadataFilters]);
+  var metadataFieldFilter = useMemo(function () {
+    var _metadataFilters$meta;
+    return (_metadataFilters$meta = metadataFilters[metadataFieldIndex]) !== null && _metadataFilters$meta !== void 0 ? _metadataFilters$meta : {};
+  }, [metadataFilters]);
+  var displayedValues = useMemo(function () {
+    return possibleValues.slice(0, 6);
+  }, [possibleValues]);
+  var _metadataFieldFilter$ = metadataFieldFilter.value,
+    selectValue = _metadataFieldFilter$ === void 0 ? [] : _metadataFieldFilter$;
+  var isReachedTheLimit = useMemo(function () {
+    return selectValue.length >= MAXIMUM_SELECTED_OPTIONS_COUNT;
+  }, [selectValue]);
+  var toggleList = function toggleList(event) {
+    var currentTarget = event.currentTarget;
+    event.stopPropagation();
+    setAnchorEl(anchorEl ? null : currentTarget);
+    setShowAllOptions(!showAllOptions);
+  };
+  var isValidSelection = function isValidSelection(apiValue) {
+    return !isForcedFilters && (!isReachedTheLimit || selectValue.includes(apiValue));
+  };
+  var updateMetadata = function updateMetadata(apiValue) {
+    if (!isValidSelection(apiValue)) return;
+    var nextMetadata = getUpdatedSelectMetadataFields({
+      apiValue: apiValue,
+      metadataFilters: metadataFilters,
+      field: field,
+      metadataFieldIndex: metadataFieldIndex,
+      metadataFieldFilter: metadataFieldFilter
+    });
+    updateMetadataFilters(nextMetadata);
+  };
+  var isDisabledOption = function isDisabledOption(apiValue) {
+    var activeForcedOption = isActiveForcedOption({
+      key: key,
+      value: apiValue,
+      defaultMetadata: defaultMetadata
+    });
+    var checkedOption = isCheckedOption({
+      value: apiValue,
+      field: field,
+      metadataFieldFilter: metadataFieldFilter
+    });
+    return isReachedTheLimit && !checkedOption || isForcedFilters && !activeForcedOption;
+  };
+  var updatePosition = useCallback(function () {
+    if (anchorEl) {
+      setAnchorEl(null);
+      setShowAllOptions(false);
+    }
+  }, [anchorEl]);
+  useEffect(function () {
+    window.addEventListener('resize', updatePosition);
+    return function () {
+      window.removeEventListener('resize', updatePosition);
+    };
+  }, [updatePosition]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Styled.OptionsContainer, {
+      children: displayedValues.map(function (_ref2) {
+        var label = _ref2.label,
+          apiValue = _ref2.api_value;
+        return /*#__PURE__*/_jsx(CheckBoxGroup, {
+          label: /*#__PURE__*/_jsx(EllipsedText, {
+            maxLinesCount: 1,
+            children: label
+          }),
+          disabled: isDisabledOption(apiValue),
+          checked: isCheckedOption({
+            value: apiValue,
+            field: field,
+            metadataFieldFilter: metadataFieldFilter
+          }),
+          onChange: function onChange() {
+            updateMetadata(apiValue);
+          }
+        }, apiValue);
+      })
+    }), isBigOptions(possibleValues, BIG_OPTIONS_THRESHOLD) && /*#__PURE__*/_jsx(Styled.ToggleListButton, {
+      size: "sm",
+      color: "link-primary",
+      isFlipped: showAllOptions,
+      onClick: toggleList,
+      endIcon: /*#__PURE__*/_jsx(ArrowBottom, {
+        size: 12
+      }),
+      children: i18n('filterMetadataAllValue', {
+        count: possibleValues.length
+      })
+    }), /*#__PURE__*/_jsx(Popper, {
+      open: !!anchorEl,
+      anchorEl: anchorEl,
+      overlay: true,
+      onClick: toggleList,
+      position: "bottom-start",
+      style: {
+        height: 350
+      },
+      popperOptions: {
+        modifiers: [{
+          name: 'offset',
+          options: {
+            offset: [0, -100]
+          }
+        }, {
+          name: 'preventOverflow',
+          options: {
+            boundary: 'viewport',
+            padding: 200
+          }
+        }, {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['top-start', 'bottom-end']
+          }
+        }]
+      },
+      children: /*#__PURE__*/_jsx(OptionsPopup, {
+        allOptions: possibleValues,
+        field: field,
+        metadataFieldFilter: metadataFieldFilter,
+        updateMetadata: updateMetadata,
+        isDisabledOption: isDisabledOption
+      })
+    })]
+  });
+};
+export default Select;