@scaleflex/widget-common 4.4.0 → 4.5.0

package/lib/SuggestedSelectInput/index.js

@@ -0,0 +1,238 @@
+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); }
+var _excluded = ["i18n", "values", "sortedOptions", "onChange", "style", "isBulkEdit", "size", "tagsFieldMaxWidth"];
+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 _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 _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; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { EllipsedText, Popper, TextWithHighlights } from '@scaleflex/ui/core';
+import { NoResult } from '@scaleflex/icons';
+import { useKeyboardNavigation } from '../hooks';
+import Styled from './SuggestedSelectInput.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var SuggestedSelectInput = function SuggestedSelectInput(_ref) {
+  var _inputListRef$current;
+  var i18n = _ref.i18n,
+    _ref$values = _ref.values,
+    values = _ref$values === void 0 ? [] : _ref$values,
+    sortedOptions = _ref.sortedOptions,
+    onChange = _ref.onChange,
+    style = _ref.style,
+    isBulkEdit = _ref.isBulkEdit,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    tagsFieldMaxWidth = _ref.tagsFieldMaxWidth,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var inputListRef = useRef(null);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    anchorEl = _useState4[0],
+    setAnchorEl = _useState4[1];
+  var _useState5 = useState(sortedOptions !== null && sortedOptions !== void 0 ? sortedOptions : []),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectOptions = _useState6[0],
+    setSelectOptions = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    filteredOptionsList = _useState8[0],
+    setFilteredOptionsList = _useState8[1];
+  var toLowerCase = function toLowerCase() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return value.toLowerCase().trim();
+  };
+  var tags = sortedOptions.filter(function (_ref2) {
+    var id = _ref2.id;
+    return values.includes(id);
+  });
+  var tagsLabels = tags.map(function (_ref3) {
+    var label = _ref3.label;
+    return label;
+  });
+  var options = useMemo(function () {
+    return searchValue.length ? filteredOptionsList : selectOptions;
+  }, [searchValue, filteredOptionsList, selectOptions]);
+  var _useKeyboardNavigatio = useKeyboardNavigation({
+      items: options,
+      onSelectItem: selectOption,
+      onEscape: closeMenu
+    }),
+    itemRefs = _useKeyboardNavigatio.itemRefs,
+    setFocusedIndex = _useKeyboardNavigatio.setFocusedIndex,
+    handleKeyDown = _useKeyboardNavigatio.handleKeyDown;
+  var handleSearch = function handleSearch(event) {
+    var searchInputValue = event.target.value;
+    var searchResults = selectOptions.filter(function (_ref4) {
+      var label = _ref4.label;
+      return toLowerCase(label).includes(toLowerCase(searchInputValue));
+    });
+    setFilteredOptionsList(searchResults);
+    setSearchValue(searchInputValue);
+    handleFocus();
+  };
+  var onRemove = function onRemove(id) {
+    var nextValues = [];
+    tags.forEach(function (tag, index) {
+      if (index !== id) {
+        nextValues.push(tag.id);
+      }
+    });
+    var options = sortedOptions.filter(function (_ref5) {
+      var optionId = _ref5.id;
+      return !nextValues.includes(optionId);
+    });
+    setSelectOptions(options);
+    onChange(nextValues);
+  };
+  function closeMenu() {
+    setAnchorEl(null);
+    setFocusedIndex(-1);
+  }
+  function selectOption() {
+    var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      optionId = _ref6.id;
+    var nextOptions = _toConsumableArray(values);
+    var nextOptionIndex = nextOptions.findIndex(function (id) {
+      return id === optionId;
+    });
+    var filteredOption = selectOptions.filter(function (_ref7) {
+      var id = _ref7.id;
+      return id !== optionId;
+    });
+    if (nextOptionIndex !== -1) {
+      nextOptions.splice(nextOptionIndex, 1);
+    } else {
+      nextOptions.push(optionId);
+    }
+    setSelectOptions(filteredOption);
+    setSearchValue('');
+    onChange(nextOptions);
+    closeMenu();
+  }
+  var selectAllHandler = function selectAllHandler() {
+    onChange(sortedOptions.map(function (_ref8) {
+      var id = _ref8.id;
+      return id;
+    }));
+    setSelectOptions([]);
+  };
+  var clearAllHandler = function clearAllHandler() {
+    onChange([]);
+    setSelectOptions(sortedOptions);
+    setSearchValue('');
+  };
+  var onAdd = function onAdd(optionLabel) {
+    if (!searchValue) return;
+    var existOption = selectOptions.find(function (_ref9) {
+      var label = _ref9.label;
+      return toLowerCase(label) === toLowerCase(optionLabel);
+    });
+    if (existOption) {
+      selectOption(existOption.id);
+    }
+  };
+  var handleFocus = function handleFocus() {
+    setAnchorEl(inputListRef.current);
+  };
+  useEffect(function () {
+    if (values.length) {
+      var filteredOptions = sortedOptions.filter(function (_ref10) {
+        var id = _ref10.id;
+        return !values.includes(id);
+      });
+      setSelectOptions(filteredOptions);
+    }
+  }, [values]);
+  var renderOptions = function renderOptions() {
+    if (!options.length) {
+      return /*#__PURE__*/_jsx(Styled.PlaceholderWrapper, {
+        icon: /*#__PURE__*/_jsx(NoResult, {
+          size: 120,
+          height: "50"
+        }),
+        desc: i18n('placeholderNoOptions')
+      });
+    }
+    return options.map(function (_ref11, index) {
+      var label = _ref11.label,
+        id = _ref11.id;
+      return /*#__PURE__*/_jsx(Styled.Option, {
+        tabIndex: 0,
+        ref: function ref(element) {
+          return itemRefs.current[index] = element;
+        },
+        onClick: function onClick() {
+          return selectOption({
+            id: id
+          });
+        },
+        onKeyDown: handleKeyDown,
+        children: /*#__PURE__*/_jsx(EllipsedText, {
+          maxLinesCount: 1,
+          children: /*#__PURE__*/_jsx(TextWithHighlights, {
+            text: label || '',
+            highlightText: searchValue || ''
+          })
+        })
+      }, id);
+    });
+  };
+  return /*#__PURE__*/_jsx(Styled.Tags, {
+    tagsFieldMaxWidth: tagsFieldMaxWidth,
+    children: /*#__PURE__*/_jsxs(Styled.TagsBody, {
+      children: [/*#__PURE__*/_jsx(Styled.TagField, _objectSpread(_objectSpread({}, rest), {}, {
+        ref: inputListRef,
+        tags: tagsLabels,
+        value: searchValue,
+        appliedValue: searchValue,
+        onChange: handleSearch,
+        onAdd: onAdd,
+        onClick: handleFocus,
+        onRemove: onRemove,
+        onFocus: handleFocus,
+        onClear: clearAllHandler,
+        onGenerate: selectAllHandler,
+        placeholder: i18n('placeholderSelectOption'),
+        showGenerateTagsButton: !!values.length,
+        generateTagsButtonLabel: i18n('mutualizedSelectAllButton'),
+        clearTagsButtonLabel: i18n('mutualizedClearAllButton'),
+        fullWidth: true,
+        onKeyDown: handleKeyDown,
+        size: size,
+        placeholderAlwaysVisible: true,
+        hideCopyIcon: true,
+        style: style
+      })), /*#__PURE__*/_jsx(Popper, {
+        open: !!anchorEl,
+        anchorEl: anchorEl,
+        overlay: true,
+        onClose: closeMenu,
+        onClick: closeMenu,
+        position: "bottom-start",
+        children: /*#__PURE__*/_jsx(Styled.OptionsWrapper, {
+          style: {
+            width: (_inputListRef$current = inputListRef.current) === null || _inputListRef$current === void 0 ? void 0 : _inputListRef$current.offsetWidth
+          },
+          children: renderOptions()
+        })
+      })]
+    })
+  });
+};
+export default SuggestedSelectInput;

package/lib/SuggestedTagsInput/SuggestedTagsInput.js

@@ -0,0 +1,295 @@
+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); }
+var _excluded = ["i18n", "values", "handleAdd", "isItemCard", "generateTags", "isLoading", "isFetching", "notSuggestedTagsList", "suggestedTagsList", "filteredTagsList", "setFilteredTagsList", "config", "onChangeSearchQuery", "onRemove", "style", "isMetadataGeneralSection", "isBulkEdit", "isMetadataFilter", "showGenerateTagsButton", "size", "tagsFieldMaxWidth", "disableOnEnter", "field"],
+  _excluded2 = ["name"];
+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; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useCallback, useState, useRef, useEffect, useMemo } from 'react';
+import { NoTags, Success } from '@scaleflex/icons';
+import { Label, TextWithHighlights } from '@scaleflex/ui/core';
+import { PC } from '@scaleflex/widget-common';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { NoResults2 } from '@scaleflex/widget-icons/lib';
+// TODO: Not allowed to import from explorer while u are in common, we should move this component to common or replace it
+import FilterOptions from '@scaleflex/widget-explorer/lib/components/Filters/Groups/common/FilterOptions';
+import { useDebounce } from '../hooks';
+import { getTagsPlaceholderDesc } from './SuggestedTagsInput.utils';
+import SuggestedTagsInputSkeleton from './SuggestedTagsInputSkeleton';
+import Styled from './SuggestedTagsInput.styled';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var SuggestedTagsInput = function SuggestedTagsInput(_ref) {
+  var i18n = _ref.i18n,
+    _ref$values = _ref.values,
+    values = _ref$values === void 0 ? [] : _ref$values,
+    _ref$handleAdd = _ref.handleAdd,
+    handleAdd = _ref$handleAdd === void 0 ? function () {} : _ref$handleAdd,
+    isItemCard = _ref.isItemCard,
+    generateTags = _ref.generateTags,
+    isLoading = _ref.isLoading,
+    isFetching = _ref.isFetching,
+    notSuggestedTagsList = _ref.notSuggestedTagsList,
+    suggestedTagsList = _ref.suggestedTagsList,
+    filteredTagsList = _ref.filteredTagsList,
+    setFilteredTagsList = _ref.setFilteredTagsList,
+    config = _ref.config,
+    onChangeSearchQuery = _ref.onChangeSearchQuery,
+    _ref$onRemove = _ref.onRemove,
+    onRemove = _ref$onRemove === void 0 ? function () {} : _ref$onRemove,
+    style = _ref.style,
+    isMetadataGeneralSection = _ref.isMetadataGeneralSection,
+    isBulkEdit = _ref.isBulkEdit,
+    isMetadataFilter = _ref.isMetadataFilter,
+    showGenerateTagsButton = _ref.showGenerateTagsButton,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    tagsFieldMaxWidth = _ref.tagsFieldMaxWidth,
+    disableOnEnter = _ref.disableOnEnter,
+    field = _ref.field,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var inputListRef = useRef(null);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    anchorEl = _useState4[0],
+    setAnchorEl = _useState4[1];
+  var _useState5 = useState(filteredTagsList),
+    _useState6 = _slicedToArray(_useState5, 2),
+    results = _useState6[0],
+    setResults = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFocused = _useState8[0],
+    setIsFocused = _useState8[1];
+  var debouncedSearchValue = useDebounce(searchValue, 500);
+  var isChanged = (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length) > 0;
+  var showTagsList = isFocused && (suggestedTagsList.length > 0 || searchValue.length > 1);
+  var showTagsPlaceholder = useMemo(function () {
+    return isChanged && isFocused && !(results !== null && results !== void 0 && results.filter(function (_ref2) {
+      var hidden = _ref2.hidden;
+      return !hidden;
+    }).length) > 0;
+  }, [isChanged, isFocused, results]);
+  var showMenuOptions = useMemo(function () {
+    return showTagsPlaceholder || showTagsList;
+  }, [showTagsPlaceholder, showTagsList]);
+  var _ref3 = config || {},
+    _ref3$tagging = _ref3.tagging,
+    _ref3$tagging2 = _ref3$tagging === void 0 ? {} : _ref3$tagging,
+    isAutoTaggingEnabled = _ref3$tagging2.autoTagging,
+    isSuggestedTagsOnlyEnabled = _ref3$tagging2.suggestedTagsOnly;
+  var toLowerCase = function toLowerCase() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return value.toLowerCase().trim();
+  };
+  var handleSearch = function handleSearch(event) {
+    var searchInputValue = event.target.value;
+    var searchResults = filteredTagsList.map(function (_ref4) {
+      var name = _ref4.name,
+        rest = _objectWithoutProperties(_ref4, _excluded2);
+      return _objectSpread(_objectSpread({}, rest), {}, {
+        name: name,
+        hidden: !toLowerCase(name).includes(toLowerCase(searchInputValue))
+      });
+    });
+    setResults(searchResults);
+    setSearchValue(searchInputValue);
+  };
+  var handleDeleteFromSuggList = function handleDeleteFromSuggList(newTags) {
+    setFilteredTagsList(filteredTagsList === null || filteredTagsList === void 0 ? void 0 : filteredTagsList.filter(function (option) {
+      return !newTags.includes(option.name);
+    }));
+  };
+  var handleAddFromSuggestion = function handleAddFromSuggestion(name) {
+    var newTags = handleAdd(name);
+    handleDeleteFromSuggList(newTags);
+    setSearchValue('');
+  };
+  var handleAddFromSearch = function handleAddFromSearch(value) {
+    handleAdd(value);
+    setSearchValue('');
+    setResults(filteredTagsList);
+  };
+  var handleFocus = function handleFocus() {
+    setAnchorEl(inputListRef.current);
+    if (typeof setIsFocused === 'function') {
+      setIsFocused(true);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === 'Enter' && isFocused && (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length) > 0) {
+      setSearchValue('');
+    }
+  };
+  useEffect(function () {
+    if ((debouncedSearchValue === null || debouncedSearchValue === void 0 ? void 0 : debouncedSearchValue.length) >= 3 && typeof onChangeSearchQuery === 'function') {
+      var metadataFieldCKey = field === null || field === void 0 ? void 0 : field.ckey;
+      onChangeSearchQuery({
+        debouncedSearchValue: debouncedSearchValue,
+        cb: setResults,
+        metadataFieldCKey: metadataFieldCKey
+      });
+    }
+  }, [debouncedSearchValue]);
+  var renderOptions = useCallback(function (options, highlight) {
+    return options === null || options === void 0 ? void 0 : options.map(function (_ref5) {
+      var name = _ref5.name,
+        value = _ref5.value,
+        sid = _ref5.sid,
+        hidden = _ref5.hidden,
+        isSelected = _ref5.isSelected;
+      return /*#__PURE__*/_jsx(FilterOptions, {
+        onClick: function onClick() {
+          return handleAddFromSuggestion(name);
+        },
+        hidden: hidden,
+        isSelected: isSelected,
+        label: highlight ? /*#__PURE__*/_jsx(TextWithHighlights, {
+          text: name,
+          highlightText: searchValue
+        }) : name
+      }, value || sid || name);
+    });
+  }, [filteredTagsList, values, searchValue]);
+  var renderTags = function renderTags() {
+    var filteredNotSuggestedTagsList = notSuggestedTagsList.filter(function (_ref6) {
+      var name = _ref6.name;
+      return toLowerCase(name).includes(toLowerCase(searchValue));
+    });
+    var hasNoTags = !filteredNotSuggestedTagsList.length && !suggestedTagsList.length && !results.length;
+    if (hasNoTags) {
+      return /*#__PURE__*/_jsxs(Styled.NoResult, {
+        children: [/*#__PURE__*/_jsx(NoResults2, {
+          width: 150,
+          height: 60
+        }), /*#__PURE__*/_jsx(Label, {
+          children: i18n('subTabNoResultPlaceholder')
+        })]
+      });
+    }
+    if (filteredNotSuggestedTagsList.length > 0 && searchValue.length > 1) {
+      return /*#__PURE__*/_jsxs(Styled.TagsOptionsWrapper, {
+        children: [/*#__PURE__*/_jsx(Styled.TagsLabel, {
+          children: i18n('subTabAllTagsLabel')
+        }), /*#__PURE__*/_jsx(Styled.SuggestedOptions, {
+          children: renderOptions(filteredNotSuggestedTagsList, true)
+        })]
+      });
+    }
+  };
+  var renderTagsWrapper = function renderTagsWrapper() {
+    if (isFetching) return /*#__PURE__*/_jsx(SuggestedTagsInputSkeleton, {});
+    if (showTagsPlaceholder) {
+      return /*#__PURE__*/_jsx(Styled.MenuItem, {
+        disableHover: true,
+        children: /*#__PURE__*/_jsx(Styled.TagsOptionsWrapper, {
+          isSuggestedTagsOnlyEnabled: isSuggestedTagsOnlyEnabled,
+          isCentered: true,
+          children: /*#__PURE__*/_jsx(Styled.PlaceholderWrapper, {
+            icon: isSuggestedTagsOnlyEnabled && /*#__PURE__*/_jsx(NoTags, {
+              width: 150,
+              height: 60
+            }),
+            desc: getTagsPlaceholderDesc({
+              isSuggestedTagsOnlyEnabled: isSuggestedTagsOnlyEnabled,
+              isMetadataFilter: isMetadataFilter,
+              searchValue: searchValue,
+              i18n: i18n
+            })
+          })
+        })
+      });
+    }
+    if (showTagsList) {
+      var filteredSuggestedTagsList = (searchValue ? results : suggestedTagsList).filter(function (_ref7) {
+        var hidden = _ref7.hidden;
+        return !hidden;
+      });
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: /*#__PURE__*/_jsxs(Styled.MenuItem, {
+          disableHover: true,
+          children: [/*#__PURE__*/_jsx(Styled.TagsOptionsWrapper, {
+            children: filteredSuggestedTagsList.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [isMetadataGeneralSection && /*#__PURE__*/_jsx(Styled.TagsLabel, {
+                children: i18n('detailsTabSuggestedTagsLabel')
+              }), /*#__PURE__*/_jsx(Styled.SuggestedOptions, {
+                isSuggestedTags: true,
+                children: renderOptions(filteredSuggestedTagsList, true)
+              })]
+            })
+          }), renderTags()]
+        })
+      });
+    }
+  };
+  return /*#__PURE__*/_jsx(Styled.Tags, {
+    tagsFieldMaxWidth: tagsFieldMaxWidth,
+    children: /*#__PURE__*/_jsxs(Styled.TagsBody, {
+      children: [/*#__PURE__*/_jsx(Styled.TagField, _objectSpread(_objectSpread({}, rest), {}, {
+        ref: inputListRef,
+        tags: Array.isArray(values) ? values : [],
+        value: searchValue,
+        appliedValue: searchValue,
+        onChange: handleSearch,
+        getTagLabel: function getTagLabel(tag) {
+          var _tag$label;
+          return (_tag$label = tag.label) !== null && _tag$label !== void 0 ? _tag$label : tag;
+        },
+        getTagValue: function getTagValue(tag) {
+          var _tag$sid;
+          return (_tag$sid = tag === null || tag === void 0 ? void 0 : tag.sid) !== null && _tag$sid !== void 0 ? _tag$sid : tag;
+        },
+        onAdd: handleAddFromSearch,
+        onGenerate: generateTags,
+        onRemove: onRemove,
+        onKeyDown: handleKeyDown,
+        showTooltip: true,
+        onFocus: handleFocus,
+        getTagIcon: function getTagIcon() {
+          return null;
+        },
+        loading: isLoading,
+        showGenerateTagsButton: showGenerateTagsButton && isAutoTaggingEnabled && !isBulkEdit,
+        disableOnEnter: isSuggestedTagsOnlyEnabled && disableOnEnter,
+        fullWidth: true,
+        size: size,
+        placeholderAlwaysVisible: true,
+        copySuccessIcon: /*#__PURE__*/_jsx(Success, {
+          color: theme.palette[PC.Green]
+        }),
+        copyTextMessage: i18n('tagsCopiedSuccessfullyMsg'),
+        style: style
+      })), showMenuOptions && /*#__PURE__*/_jsx(Styled.Menu, {
+        onClose: function onClose() {
+          return setAnchorEl(null);
+        },
+        open: Boolean(anchorEl),
+        anchorEl: anchorEl,
+        position: "bottom-start",
+        popperOptions: {
+          modifiers: [{
+            name: 'offset',
+            options: {
+              offset: [0, 5]
+            }
+          }]
+        },
+        children: renderTagsWrapper()
+      })]
+    })
+  });
+};
+export default SuggestedTagsInput;

package/lib/SuggestedTagsInput/SuggestedTagsInput.styled.js

@@ -0,0 +1,83 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { PC, FV } from '@scaleflex/widget-common';
+import { TagField as SfxTagField, Button as SfxButton, MenuItem as SfxMenuItem, Menu as SfxMenu } from '@scaleflex/ui/core';
+import styled, { css } from 'styled-components';
+import Placeholder from '@scaleflex/widget-explorer/lib/components/Filters/Placeholder';
+
+// TODO: Not allowed to import from explorer while u are in common, we should move this component to common or replace it
+import StyledFilters from '@scaleflex/widget-explorer/lib/components/Filters/Filters.styled';
+var TagField = styled(SfxTagField)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px;\n\n  .SfxTagField-listWrapper {\n    overflow: ", ";\n  }\n \n  .SfxTag-Label {\n    display: inline-block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .SfxButton-Label {\n    ", ";\n  }\n\n  ", "\n"])), function (_ref) {
+  var loading = _ref.loading;
+  return loading ? 'hidden' : 'hidden auto';
+}, function (_ref2) {
+  var typography = _ref2.theme.typography;
+  return typography.font[FV.ButtonXs];
+}, function (_ref3) {
+  var theme = _ref3.theme,
+    loading = _ref3.loading,
+    showGenerateTagsButton = _ref3.showGenerateTagsButton;
+  return showGenerateTagsButton && loading && "\n      .SfxTagField-tagFieldActions .SfxButton-root:first-child .SfxButton-Label {\n        color: ".concat(theme.palette[PC.ButtonDisabledText], ";\n      }\n  ");
+});
+var Tags = styled(StyledFilters.Filter)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0;\n  width: 100%;\n  min-height: auto;\n\n  .SfxTagField-root {\n    display: flex;\n    width: 100%;\n  }\n\n  .SfxTagField-tagInputFieldWrapper {\n    display: flex;\n    width: 100%;\n  }\n\n  .SfxTagField-tagFieldWrapper, .SfxTagField-wrapper {\n    display: flex;\n    width: 100%;\n    height: 100%;\n  }\n\n  ", "\n"])), function (_ref4) {
+  var breakpoints = _ref4.theme.breakpoints,
+    tagsFieldMaxWidth = _ref4.tagsFieldMaxWidth;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", " {\n      max-width: ", ";\n    }\n  "])), breakpoints.up('lg'), tagsFieldMaxWidth ? "".concat(tagsFieldMaxWidth, "px") : 'unset');
+});
+var TagsBody = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n"])));
+var NoResult = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 16px;\n  color:  ", ";\n\n  .SfxLabel-text {\n    ", ";\n  }\n"])), function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.LabelPlaceholder];
+}, function (_ref6) {
+  var typography = _ref6.theme.typography;
+  return typography.font[FV.TextLarge];
+});
+var TagsOptionsWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: ", ";\n  flex-direction: column;\n  width: 100%;\n  row-gap: 8px;\n"])), function (_ref7) {
+  var isCentered = _ref7.isCentered,
+    isSuggestedTagsOnlyEnabled = _ref7.isSuggestedTagsOnlyEnabled;
+  return isCentered && isSuggestedTagsOnlyEnabled ? 'center' : 'flex-start';
+});
+var Menu = styled(SfxMenu)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  overflow: visible;\n  background-color: ", ";\n  max-height: none;\n"])), function (_ref8) {
+  var palette = _ref8.theme.palette;
+  return palette[PC.BackgroundStateless];
+});
+var MenuItem = styled(SfxMenuItem)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 4px;\n  align-items: flex-start;\n  padding: 0;\n  row-gap: 24px;\n"])));
+var SkeletonWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: grid;\n  width: 100%;\n  padding: 16px;\n  max-height: 113px;\n  overflow: hidden;\n  gap: 8px;\n  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));\n"])));
+var TagsLabel = styled(StyledFilters.FilterLabel)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-bottom: 0;\n  padding: 16px;\n  padding-bottom: 0;\n  color: ", ";\n  ", ";\n"])), function (_ref9) {
+  var palette = _ref9.theme.palette;
+  return palette[PC.TextSecondary];
+}, function (_ref10) {
+  var typography = _ref10.theme.typography;
+  return typography.font[FV.LabelMedium];
+});
+var SuggestedOptions = styled.div(function (_ref11) {
+  var isSuggestedTags = _ref11.isSuggestedTags,
+    _ref11$theme = _ref11.theme,
+    palette = _ref11$theme.palette,
+    typography = _ref11$theme.typography;
+  return "\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  width: 100%;\n  padding: 16px;\n  padding-top: 0;\n  max-height: 256px;\n  overflow-y: auto;\n\n  .filerobot-Provider-Filters-FilterOption {\n    width: auto;\n    padding: 4px 12px;\n    height: auto;\n\n    ".concat(typography.font[FV.LabelMedium], ";\n\n    ").concat(isSuggestedTags ? "\n      // Todo: add background-base-light and border-base-light colors to scaleflex UI Kit\n      background-color: rgba(235, 239, 252, 1);\n      border: 1px solid rgba(211, 219, 250, 1);\n    " : "\n      background-color: ".concat(palette[PC.BackgroundActive], ";\n      border: 1px solid ").concat(palette[PC.BorderPrimaryStateless], ";\n    "), "\n  }\n");
+});
+var PlaceholderWrapper = styled(Placeholder)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding-bottom: 0;\n"])));
+var OptionsList = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  width: 100%;\n  max-height: 252px;\n  overflow: hidden auto;\n"])));
+var Button = styled(SfxButton)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n", "\n"])), function (_ref12) {
+  var _ref12$theme = _ref12.theme,
+    palette = _ref12$theme.palette,
+    typography = _ref12$theme.typography;
+  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  width: 91px;\n  height: 32px;\n  padding: 8px, 12px;\n  border-radius: 4px;\n  gap: 4px;\n  border: 1px solid ", ";\n  margin-bottom: 15px ;\n  ", ";\n\n  .SfxButton-Label {\n    width: 49px;\n  }\n"])), palette[PC.AccentStateless], typography.font[FV.ButtonMdEmphasis]);
+});
+var Styled = {
+  TagField: TagField,
+  Tags: Tags,
+  TagsBody: TagsBody,
+  TagsOptionsWrapper: TagsOptionsWrapper,
+  SuggestedOptions: SuggestedOptions,
+  TagsLabel: TagsLabel,
+  NoResult: NoResult,
+  PlaceholderWrapper: PlaceholderWrapper,
+  Button: Button,
+  Menu: Menu,
+  MenuItem: MenuItem,
+  SkeletonWrapper: SkeletonWrapper,
+  OptionsList: OptionsList
+};
+export default Styled;

package/lib/SuggestedTagsInput/SuggestedTagsInput.utils.js

@@ -0,0 +1,15 @@
+export var getTagsPlaceholderDesc = function getTagsPlaceholderDesc(_ref) {
+  var isSuggestedTagsOnlyEnabled = _ref.isSuggestedTagsOnlyEnabled,
+    isMetadataFilter = _ref.isMetadataFilter,
+    searchValue = _ref.searchValue,
+    i18n = _ref.i18n;
+  if (isMetadataFilter) {
+    return i18n('filtersPlaceholderTagNotFound');
+  }
+  if (isSuggestedTagsOnlyEnabled) {
+    return i18n('tagsSearchSuggestionsPlaceholderNoAvailableTags');
+  }
+  return i18n('placeholderTagNotFound', {
+    searchedTag: searchValue
+  });
+};

package/lib/SuggestedTagsInput/SuggestedTagsInputSkeleton.js

@@ -0,0 +1,14 @@
+import { Skeleton } from '@scaleflex/ui/core';
+import Styled from './SuggestedTagsInput.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var SuggestedTagsInputSkeleton = function SuggestedTagsInputSkeleton() {
+  return /*#__PURE__*/_jsx(Styled.SkeletonWrapper, {
+    children: Array(30).fill().map(function (_, index) {
+      return /*#__PURE__*/_jsx(Skeleton, {
+        width: 60,
+        height: 16
+      }, index);
+    })
+  });
+};
+export default SuggestedTagsInputSkeleton;