@scaleflex/widget-explorer 4.4.0 → 4.5.1

package/lib/hooks/useFileMetadata.js

@@ -0,0 +1,117 @@
+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 { useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import isUploadableFile from '@scaleflex/widget-utils/lib/isUploadableFile';
+import { PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import useExplorer from './useExplorer';
+import { selectMetaMappedLicenseExpireDateField, selectMetadataModel, selectMetadataRegionalGroups, selectMetadataRootFieldsRegionalGroupUuids } from '../slices/metadata.slice';
+import { REGIONAL_VARIANT_TYPE } from '../components/metadata.adapter';
+import { generateGeneralSectionFields } from '../components/common/FileMetadataFieldValue/FileMetadataFieldValue.utils';
+var useFileMetadata = function useFileMetadata(_ref) {
+  var _filerobot$getPlugin, _filerobot$getPlugin$;
+  var file = _ref.file,
+    scrollToMetaField = _ref.scrollToMetaField,
+    _ref$smallerFont = _ref.smallerFont,
+    smallerFont = _ref$smallerFont === void 0 ? false : _ref$smallerFont;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    i18nArray = _useExplorer.i18nArray,
+    filerobot = _useExplorer.filerobot,
+    opts = _useExplorer.opts;
+  var metadataModel = useSelector(selectMetadataModel);
+  var rootFieldsRegionalUuidsByKeys = useSelector(selectMetadataRootFieldsRegionalGroupUuids);
+  var metaRegionalGroups = useSelector(selectMetadataRegionalGroups);
+  var expireDateMappedField = useSelector(selectMetaMappedLicenseExpireDateField);
+  var isFastToken = opts.isFastToken,
+    findAssetLocationEnabled = opts.findAssetLocationEnabled,
+    hideFileSpecsMetadataFields = opts.hideFileSpecsMetadataFields;
+  var isPreUpload = isUploadableFile(file);
+  var isApprovalsEnabled = (_filerobot$getPlugin = filerobot.getPlugin(PLUGINS_IDS.APPROVALS)) === null || _filerobot$getPlugin === void 0 ? void 0 : (_filerobot$getPlugin$ = _filerobot$getPlugin.isEnabled) === null || _filerobot$getPlugin$ === void 0 ? void 0 : _filerobot$getPlugin$.call(_filerobot$getPlugin);
+  var languageRegionalFilterUuid = useMemo(function () {
+    var _metaRegionalGroups$f;
+    return (_metaRegionalGroups$f = metaRegionalGroups.filter(function (_ref2) {
+      var type = _ref2.type;
+      return type === REGIONAL_VARIANT_TYPE.LANGUAGES;
+    })[0]) === null || _metaRegionalGroups$f === void 0 ? void 0 : _metaRegionalGroups$f.uuid;
+  }, [metaRegionalGroups]);
+  var _useMemo = useMemo(function () {
+      return generateGeneralSectionFields({
+        file: file,
+        languageRegionalFilterUuid: languageRegionalFilterUuid,
+        rootFieldsRegionalUuidsByKeys: rootFieldsRegionalUuidsByKeys,
+        i18n: i18n,
+        isPreUpload: isPreUpload,
+        expireDateMappedField: expireDateMappedField,
+        i18nArray: i18nArray,
+        scrollToMetaField: scrollToMetaField,
+        isFastToken: isFastToken,
+        findAssetLocationEnabled: findAssetLocationEnabled,
+        isApprovalsEnabled: isApprovalsEnabled,
+        smallerFont: smallerFont,
+        hideFileSpecsMetadataFields: hideFileSpecsMetadataFields
+      });
+    }, [file, rootFieldsRegionalUuidsByKeys, languageRegionalFilterUuid, i18n, isPreUpload, expireDateMappedField, i18nArray, scrollToMetaField, isFastToken, findAssetLocationEnabled, isApprovalsEnabled, hideFileSpecsMetadataFields]),
+    readOnlyGeneralMetadataFields = _useMemo.readOnlyFields,
+    editableGeneralMetadataGFields = _useMemo.editableFields;
+  var customMetadataGroups = useMemo(function () {
+    var _metadataModel$filter;
+    var customMetadataGroups = [];
+    metadataModel === null || metadataModel === void 0 ? void 0 : (_metadataModel$filter = metadataModel.filter(function (_ref3) {
+      var appliesTo = _ref3.applies_to;
+      return appliesTo === 'FILES';
+    })) === null || _metadataModel$filter === void 0 ? void 0 : _metadataModel$filter.forEach(function (_ref4) {
+      var _ref5;
+      var groups = _ref4.groups;
+      customMetadataGroups.push.apply(customMetadataGroups, _toConsumableArray((_ref5 = groups || []) === null || _ref5 === void 0 ? void 0 : _ref5.filter(function (group) {
+        return !group.isRoot;
+      })));
+    });
+    return customMetadataGroups;
+  }, [metadataModel]);
+  var hasField = function hasField(fieldKey, thumbnailMetadataFieldKey) {
+    return fieldKey === thumbnailMetadataFieldKey || fieldKey === 'expiredAt' && thumbnailMetadataFieldKey === (expireDateMappedField === null || expireDateMappedField === void 0 ? void 0 : expireDateMappedField.key);
+  };
+  var findFileMetadataField = useCallback(function (key) {
+    var _customMetadataGroups;
+    var generalMetadataFields = [].concat(_toConsumableArray(editableGeneralMetadataGFields), _toConsumableArray(readOnlyGeneralMetadataFields));
+    var generalField = generalMetadataFields.find(function (field) {
+      return hasField(field.key, key);
+    });
+    if (generalField) {
+      return {
+        field: generalField,
+        type: 'general'
+      };
+    }
+    var customField = (_customMetadataGroups = customMetadataGroups.find(function (_ref6) {
+      var fields = _ref6.fields;
+      return fields.some(function (field) {
+        return hasField(field.key, key) && field;
+      });
+    })) === null || _customMetadataGroups === void 0 ? void 0 : _customMetadataGroups.fields.find(function (field) {
+      return hasField(field.key, key);
+    });
+    if (customField) {
+      return {
+        field: customField,
+        type: 'custom'
+      };
+    }
+    return {
+      field: null,
+      type: 'general'
+    };
+  }, [editableGeneralMetadataGFields, readOnlyGeneralMetadataFields, customMetadataGroups]);
+  return {
+    readOnlyGeneralMetadataFields: readOnlyGeneralMetadataFields,
+    editableGeneralMetadataGFields: editableGeneralMetadataGFields,
+    customMetadataGroups: customMetadataGroups,
+    findFileMetadataField: findFileMetadataField
+  };
+};
+export default useFileMetadata;

package/lib/hooks/useFilterSearch.js

@@ -0,0 +1,37 @@
+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 { useState, useMemo } from 'react';
+var toLowerCase = function toLowerCase() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return value.toLowerCase().trim();
+};
+var useFilterSearch = function useFilterSearch(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$searchProperty = _ref.searchProperty,
+    searchProperty = _ref$searchProperty === void 0 ? 'name' : _ref$searchProperty;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchQuery = _useState2[0],
+    setSearchQuery = _useState2[1];
+  var handleSearch = function handleSearch(event) {
+    setSearchQuery(event.target.value);
+  };
+  var filteredOptions = useMemo(function () {
+    return options.filter(function (option) {
+      return toLowerCase(option[searchProperty]).includes(toLowerCase(searchQuery));
+    });
+  }, [searchQuery, options]);
+  return {
+    searchQuery: searchQuery,
+    hasQuery: (searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.length) > 0,
+    filteredOptions: filteredOptions,
+    hasResults: filteredOptions.length > 0,
+    handleSearch: handleSearch
+  };
+};
+export default useFilterSearch;

package/lib/hooks/useForcedFilters.js

@@ -0,0 +1,39 @@
+import useExplorer from './useExplorer';
+var useForcedFilters = function useForcedFilters() {
+  var _useExplorer = useExplorer(),
+    opts = _useExplorer.opts;
+  var disableFiltersAndSearch = opts.disableFiltersAndSearch,
+    forceFilters = opts.forceFilters,
+    _opts$filters = opts.filters,
+    filters = _opts$filters === void 0 ? {} : _opts$filters;
+  var _filters$metadata = filters.metadata,
+    metadata = _filters$metadata === void 0 ? [] : _filters$metadata;
+  var isForcedFilters = disableFiltersAndSearch || forceFilters;
+  var isForcedMetadataField = function isForcedMetadataField(fieldKey) {
+    return isForcedFilters && metadata.some(function (_ref) {
+      var key = _ref.key;
+      return key === fieldKey;
+    });
+  };
+  var isForcedOption = function isForcedOption(_ref2) {
+    var fieldKey = _ref2.fieldKey,
+      optionValue = _ref2.optionValue;
+    if (!isForcedMetadataField(fieldKey)) return false;
+    var _ref3 = metadata.find(function (_ref4) {
+        var key = _ref4.key;
+        return key === fieldKey;
+      }) || {},
+      value = _ref3.value;
+    return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
+  };
+  var isForcedFilter = function isForcedFilter(filterKey) {
+    return isForcedFilters && !!filters[filterKey];
+  };
+  return {
+    isForcedFilters: isForcedFilters,
+    isForcedMetadataField: isForcedMetadataField,
+    isForcedOption: isForcedOption,
+    isForcedFilter: isForcedFilter
+  };
+};
+export default useForcedFilters;

package/lib/hooks/useIsOverflow.js

@@ -0,0 +1,25 @@
+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 { useState, useLayoutEffect } from 'react';
+var useIsOverflow = function useIsOverflow(ref) {
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOverflow = _useState2[0],
+    setIsOverflow = _useState2[1];
+  useLayoutEffect(function () {
+    var current = ref.current;
+    var trigger = function trigger() {
+      var hasOverflow = current.scrollWidth > current.clientWidth;
+      setIsOverflow(hasOverflow);
+    };
+    if (current) {
+      trigger();
+    }
+  }, [ref]);
+  return isOverflow;
+};
+export default useIsOverflow;

package/lib/hooks/useIsSmallScreen.js

@@ -0,0 +1,20 @@
+import { useSelector } from 'react-redux';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { selectContainerWidth } from '../slices/common.slice';
+
+/**
+ * check if the widget container <= 1085px
+ *
+ * @param {containerWidth} Number container width
+ * @param {theme} Object Scaleflex theme
+ * @returns {Boolean}
+ */
+
+var useIsSmallScreen = function useIsSmallScreen() {
+  var theme = useTheme();
+  var containerWidth = useSelector(selectContainerWidth);
+  var mdSize = theme.breakpoints.values.lg; // 1085px
+
+  return containerWidth <= mdSize;
+};
+export default useIsSmallScreen;

package/lib/hooks/useLocateFile.js

@@ -0,0 +1,231 @@
+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 _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 _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); }
+import { useContext, useCallback, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import { VIEW_IDS, FMAW_URL_QUERY_PARAMS, ABORTED_ERROR } from '@scaleflex/widget-utils/lib/constants';
+import recursiveFnCall from '@scaleflex/widget-utils/lib/recursiveFnCall';
+import { VirtualListDataContext } from '@scaleflex/widget-core/lib/Providers';
+import createThunk from '@scaleflex/widget-utils/lib/createThunk';
+import useExplorer from './useExplorer';
+import { fetchFileByUuid, getFileByUuidFromState, selectFilesUuids, selectIsNoMoreFiles } from '../slices/files.slice';
+import { updateSearchQuery, updateSearchSuggestions } from '../slices/search.slice';
+import { activateFoldersView, fetchFolderFiles, selectCurrentFolderPath } from '../slices/folders.slice';
+import { changeView, selectIsFoldersView, selectIsSearchMode } from '../slices/views.slice';
+import { itemsSelected, selectionsCleared } from '../slices/selections.slice';
+import { selectIsFiltersActive, updateFilteredFiles } from '../slices/filters.slice';
+import decodeB64ToStr from '../utils/decodeB64ToStr';
+import { fileWindowUpdated } from '../slices/panels.slice';
+
+// We use this thunk instead of creating a ref inside the hook and utilize ref assigning/un-assigning on chaning the selectors' values
+// cause using the selectors directly won't always use the latest state data/values in places that use callback fns.
+var getUpdatedLocateData = createThunk(function (_, thunkApi) {
+  var state = thunkApi.getState();
+  var isSearchMode = selectIsSearchMode(state);
+  var isFiltersApplied = selectIsFiltersActive(state);
+  var isFoldersView = selectIsFoldersView(state);
+  var currentOpenedFolderPath = selectIsFoldersView(state) && selectCurrentFolderPath(state);
+  var allFilesLoaded = currentOpenedFolderPath && !selectIsNoMoreFiles(state);
+  var filesUuids = selectFilesUuids(state);
+  return {
+    isSearchMode: isSearchMode,
+    isFiltersApplied: isFiltersApplied,
+    isFoldersView: isFoldersView,
+    currentOpenedFolderPath: currentOpenedFolderPath,
+    allFilesLoaded: allFilesLoaded,
+    filesUuids: filesUuids
+  };
+});
+var filesLimit = 500;
+var timeoutToRemoveQueryParam = 10000; // 10 seconds
+
+var useLocateFile = function useLocateFile() {
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    info = _useExplorer.info,
+    i18n = _useExplorer.i18n,
+    hideInfo = _useExplorer.hideInfo,
+    replaceUrlQueryParams = _useExplorer.replaceUrlQueryParams,
+    getUrlQueryParam = _useExplorer.getUrlQueryParam,
+    deleteUrlQueryParams = _useExplorer.deleteUrlQueryParams;
+  var _useContext = useContext(VirtualListDataContext),
+    scrolledElementRef = _useContext.apiRef;
+  var locatingFileUuid = useRef(null);
+  var fetchFileToBeLocated = useCallback(async function (uuid, isFoldersView) {
+    if (!uuid) return Promise.resolve();
+
+    // Feedback while fetching file
+    info(i18n('explorerAssetLocateFetchingFileMessage'), 'info', 0);
+    if (!isFoldersView) {
+      dispatch(changeView({
+        view: VIEW_IDS.FOLDERS
+      }));
+    }
+    var fetchedFile = await dispatch(fetchFileByUuid({
+      uuid: uuid
+    })).throwRejection()["catch"](function (err) {
+      hideInfo();
+      if (err !== ABORTED_ERROR) {
+        info(i18n('explorerAssetLocateFetchingFileFailedMessage'), 'warning');
+      }
+      // open root folder in case of failed  fetch
+      return dispatch(activateFoldersView({
+        skipViewDispatch: true
+      }));
+    });
+    return fetchedFile;
+  }, [i18n, info, hideInfo]);
+  var getScrollToAndSelectFileFn = useCallback(function (index, fileToLocate) {
+    var _scrolledElementRef$c;
+    if (typeof (scrolledElementRef === null || scrolledElementRef === void 0 ? void 0 : (_scrolledElementRef$c = scrolledElementRef.current) === null || _scrolledElementRef$c === void 0 ? void 0 : _scrolledElementRef$c.scrollToItem) !== 'function') return function () {};
+    return function () {
+      scrolledElementRef === null || scrolledElementRef === void 0 ? void 0 : scrolledElementRef.current.scrollToItem({
+        index: index
+      });
+      dispatch(itemsSelected({
+        foldersUuids: [],
+        filesUuids: [fileToLocate.uuid]
+      }));
+      hideInfo();
+    };
+  }, [hideInfo]);
+  var updateUrlWithLocatableFile = useCallback(function (fileUuid) {
+    var fileUuidFromUrl = decodeB64ToStr(getUrlQueryParam(FMAW_URL_QUERY_PARAMS.LOCATE_FILE));
+    if (fileUuid && fileUuidFromUrl !== fileUuid) {
+      replaceUrlQueryParams({
+        params: _defineProperty({}, FMAW_URL_QUERY_PARAMS.LOCATE_FILE, btoa(fileUuid)),
+        push: true
+      });
+    }
+  }, [getUrlQueryParam, replaceUrlQueryParams]);
+  var recursivelyGetFileIndex = useCallback(async function (filesResponse, fileUuidToLocate) {
+    var _ref = filesResponse || {},
+      _ref$files = _ref.files,
+      files = _ref$files === void 0 ? [] : _ref$files,
+      filesUuids = _ref.filesUuids,
+      allFilesLoaded = _ref.allFilesLoaded,
+      offset = _ref.offset;
+    var index = Array.isArray(filesUuids) ? filesUuids.indexOf(fileUuidToLocate) : files.findIndex(function (file) {
+      return file.uuid === fileUuidToLocate;
+    });
+    var filesCount = Array.isArray(filesUuids) ? filesUuids.length : files.length;
+    if (index < 0) {
+      if (allFilesLoaded) {
+        return -1;
+      }
+      var newFilesResponse = await dispatch(fetchFolderFiles({
+        offset: offset !== null && offset !== void 0 ? offset : filesCount,
+        filesLimit: filesLimit
+      }));
+      return recursivelyGetFileIndex(newFilesResponse, fileUuidToLocate);
+    }
+    var prevRequestOffset = offset ? offset - filesLimit : 0;
+    return index + prevRequestOffset;
+  }, []);
+  var lookupTheFile = useCallback(async function (filesResponse, fileToLocate) {
+    var index = await recursivelyGetFileIndex(filesResponse, fileToLocate.uuid);
+    if (index < 0) {
+      throw new Error('');
+    }
+    return recursiveFnCall({
+      getFn: function getFn() {
+        return getScrollToAndSelectFileFn(index, fileToLocate);
+      }
+    });
+  }, [recursivelyGetFileIndex, getScrollToAndSelectFileFn]);
+  var onFileLookupFinish = useCallback(function () {
+    locatingFileUuid.current = null;
+    setTimeout(function () {
+      return deleteUrlQueryParams([FMAW_URL_QUERY_PARAMS.LOCATE_FILE]);
+    }, timeoutToRemoveQueryParam);
+  }, [deleteUrlQueryParams]);
+  var triggerFileLocating = useCallback(async function (_ref2) {
+    var _fileToLocate$folder;
+    var _ref2$uuid = _ref2.uuid,
+      uuid = _ref2$uuid === void 0 ? null : _ref2$uuid,
+      _ref2$file = _ref2.file,
+      file = _ref2$file === void 0 ? null : _ref2$file,
+      disableUrlUpdate = _ref2.disableUrlUpdate,
+      onSuccess = _ref2.onSuccess;
+    var fileUuid = uuid || (file === null || file === void 0 ? void 0 : file.uuid);
+    if (!fileUuid || locatingFileUuid.current === fileUuid) {
+      return;
+    }
+    locatingFileUuid.current = fileUuid;
+    var _dispatch = dispatch(getUpdatedLocateData()),
+      isSearchMode = _dispatch.isSearchMode,
+      isFiltersApplied = _dispatch.isFiltersApplied,
+      isFoldersView = _dispatch.isFoldersView,
+      currentOpenedFolderPath = _dispatch.currentOpenedFolderPath,
+      allFilesLoaded = _dispatch.allFilesLoaded,
+      filesUuids = _dispatch.filesUuids;
+    if (isSearchMode) dispatch(updateSearchQuery({
+      query: ''
+    }));
+    if (isFiltersApplied) {
+      dispatch(updateSearchSuggestions({
+        filters: [],
+        tags: [],
+        dismissApiCall: true
+      }));
+      dispatch(updateFilteredFiles({
+        dismissApiCall: true
+      }));
+    }
+    dispatch(selectionsCleared());
+    dispatch(fileWindowUpdated());
+
+    // `getFileByUuidFromState` is used to get the file from the state using the thunk not selector but doesn't fetch it from BE.
+    var fileToLocate = isFoldersView && !isSearchMode && dispatch(getFileByUuidFromState(fileUuid)) || file || (await fetchFileToBeLocated(uuid, isFoldersView));
+    var folderPath = fileToLocate === null || fileToLocate === void 0 ? void 0 : (_fileToLocate$folder = fileToLocate.folder) === null || _fileToLocate$folder === void 0 ? void 0 : _fileToLocate$folder.name;
+    if (!folderPath) {
+      locatingFileUuid.current = null;
+      info(i18n('explorerAssetLocateFailureInfoMessage'), 'error', 3000);
+      return;
+    }
+    if (!disableUrlUpdate && fileToLocate.uuid) {
+      updateUrlWithLocatableFile(fileToLocate.uuid);
+    }
+    var isFileFolderAlreadyOpened = currentOpenedFolderPath && folderPath === currentOpenedFolderPath && !(isSearchMode || isFiltersApplied);
+    if (isFileFolderAlreadyOpened) {
+      try {
+        await lookupTheFile({
+          filesUuids: filesUuids,
+          allFilesLoaded: allFilesLoaded
+        }, fileToLocate);
+      } catch (e) {
+        info(i18n('explorerAssetNotInFolderError', {
+          assetName: fileToLocate.name
+        }), 'error', 4000);
+      }
+      onFileLookupFinish();
+      return;
+    }
+    dispatch(activateFoldersView({
+      itemToOpen: folderPath,
+      skipViewDispatch: !!uuid || isFoldersView,
+      filesLimit: filesLimit
+    })).then(function () {
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [],
+        _ref4 = _slicedToArray(_ref3, 2),
+        filesResponse = _ref4[1];
+      lookupTheFile(filesResponse, fileToLocate);
+      if (typeof onSuccess === 'function') {
+        onSuccess();
+      }
+    })["catch"](function () {
+      info(i18n('explorerAssetNotInFolderError', {
+        assetName: fileToLocate.name
+      }), 'error', 4000);
+    })["finally"](onFileLookupFinish);
+  }, [i18n, info, fetchFileToBeLocated, lookupTheFile, onFileLookupFinish]);
+  return triggerFileLocating;
+};
+export default useLocateFile;

package/lib/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+var usePrevious = function usePrevious(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  });
+  return ref.current;
+};
+export default usePrevious;

package/lib/hooks/useSearchSuggestions.js

@@ -0,0 +1,168 @@
+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 _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 _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 { useMemo, useCallback, useEffect, useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { SuggestionsManager, SearchSuggestionsMenu } from '@scaleflex/widget-explorer/lib/utils/SearchSuggestions';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import useExplorerI18n from './useExplorerI18n';
+import { getAttributesKeys, getAttributesTags, updateSearchSuggestions, selectSearchSuggestionsAttributesKeys, selectSearchSuggestionsAttributesKeysLoading, selectSearchSuggestionsAttributesTags, selectSearchSuggestionsAttributesTagsLoading, selectSearchSuggestionsFilters, selectSearchSuggestionsTags, selectSearchSuggestionsAttributesKeysLoadingFinished, selectSearchSuggestionsAttributesTagsLoadingFinished, updateSearchQuery } from '../slices/search.slice';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useSearchSuggestions = function useSearchSuggestions(_ref) {
+  var searchContainerRef = _ref.searchContainerRef,
+    searchInputFocused = _ref.searchInputFocused,
+    searchQuery = _ref.searchQuery,
+    searchInputRef = _ref.searchInputRef;
+  var dispatch = useDispatch();
+  var theme = useTheme();
+  var i18n = useExplorerI18n();
+  var searchSuggestionsAttributesKeys = useSelector(selectSearchSuggestionsAttributesKeys);
+  var searchSuggestionsAttributesKeysLoading = useSelector(selectSearchSuggestionsAttributesKeysLoading);
+  var searchSuggestionsAttributesKeysLoadingFinished = useSelector(selectSearchSuggestionsAttributesKeysLoadingFinished);
+  var searchSuggestionsAttributesTags = useSelector(selectSearchSuggestionsAttributesTags);
+  var searchSuggestionsAttributesTagsLoading = useSelector(selectSearchSuggestionsAttributesTagsLoading);
+  var searchSuggestionsAttributesTagsLoadingFinished = useSelector(selectSearchSuggestionsAttributesTagsLoadingFinished);
+  var searchSuggestionsTags = useSelector(selectSearchSuggestionsTags);
+  var searchSuggestionsFilters = useSelector(selectSearchSuggestionsFilters);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    mode = _useState2[0],
+    setMode = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    items = _useState4[0],
+    setItems = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    emptyItemsPlaceholder = _useState6[0],
+    setEmptyItemsPlaceholder = _useState6[1];
+  var isAttributesLoading = searchSuggestionsAttributesKeysLoading || searchSuggestionsAttributesTagsLoading;
+  var isAttributesLoaded = !isAttributesLoading && searchSuggestionsAttributesKeys && searchSuggestionsAttributesTags;
+  var open = Boolean((searchContainerRef === null || searchContainerRef === void 0 ? void 0 : searchContainerRef.current) && isAttributesLoaded);
+  var removeTagsAndFiltersFromSearchQuery = function removeTagsAndFiltersFromSearchQuery(query) {
+    var searchValue = searchInputRef.current.value;
+    var updatedSearchQuery = query.forEach(function (_query) {
+      return searchValue.includes(_query) ? searchValue.replace(_query, '') : searchValue;
+    });
+    dispatch(updateSearchQuery({
+      query: updatedSearchQuery === null || updatedSearchQuery === void 0 ? void 0 : updatedSearchQuery.trim()
+    }));
+  };
+  var selectFilter = useCallback(function (key, value) {
+    var filterQuery = ["@".concat(key, ":").concat(_typeof(value) === 'object' ? value.api_slug : value), "@".concat(key, ":")];
+    removeTagsAndFiltersFromSearchQuery(filterQuery);
+    dispatch(updateSearchSuggestions({
+      filters: [].concat(_toConsumableArray(searchSuggestionsFilters || []), [{
+        key: key,
+        value: value
+      }])
+    }));
+  }, [searchSuggestionsFilters]);
+  var selectTag = useCallback(function (tag) {
+    var tagQuery = ["#".concat(tag.name.toLowerCase()), '#'];
+    removeTagsAndFiltersFromSearchQuery(tagQuery);
+    dispatch(updateSearchSuggestions({
+      tags: [].concat(_toConsumableArray(searchSuggestionsTags || []), [tag])
+    }));
+  }, [searchSuggestionsTags]);
+  var suggestionsManager = useMemo(function () {
+    return new SuggestionsManager({
+      i18n: i18n,
+      modeId: mode,
+      searchInputRef: searchInputRef.current,
+      setModeState: setMode,
+      attributesKeys: searchSuggestionsAttributesKeys,
+      attributesTags: searchSuggestionsAttributesTags,
+      selectFilter: selectFilter,
+      selectTag: selectTag,
+      filters: searchSuggestionsFilters,
+      tags: searchSuggestionsTags,
+      setItems: setItems,
+      setEmptyItemsPlaceholder: setEmptyItemsPlaceholder
+    });
+  }, []);
+  useEffect(function () {
+    if (!searchSuggestionsAttributesKeysLoadingFinished && !searchSuggestionsAttributesKeysLoading) {
+      dispatch(getAttributesKeys());
+    }
+  }, [searchSuggestionsAttributesKeysLoadingFinished]);
+  useEffect(function () {
+    if (!searchSuggestionsAttributesTagsLoadingFinished && !searchSuggestionsAttributesTagsLoading) {
+      dispatch(getAttributesTags());
+    }
+  }, [searchSuggestionsAttributesTagsLoadingFinished]);
+  useEffect(function () {
+    if (!searchQuery) {
+      suggestionsManager.setMode(null);
+      suggestionsManager.setActiveAttribute(null);
+    }
+  }, [searchQuery]);
+
+  // Update suggestionsManager properties
+  useEffect(function () {
+    return suggestionsManager.setI18n(i18n);
+  }, [i18n]);
+  useEffect(function () {
+    return suggestionsManager.setSearchInputRef(searchInputRef.current);
+  }, [searchInputRef.current]);
+  useEffect(function () {
+    return suggestionsManager.setAttributesKeys(searchSuggestionsAttributesKeys);
+  }, [searchSuggestionsAttributesKeys]);
+  useEffect(function () {
+    return suggestionsManager.setAttributesTags(searchSuggestionsAttributesTags);
+  }, [searchSuggestionsAttributesTags]);
+  useEffect(function () {
+    return suggestionsManager.setSelectFilter(selectFilter);
+  }, [selectFilter]);
+  useEffect(function () {
+    return suggestionsManager.setSelectTag(selectTag);
+  }, [selectTag]);
+  useEffect(function () {
+    return suggestionsManager.setFilters(searchSuggestionsFilters);
+  }, [searchSuggestionsFilters]);
+  useEffect(function () {
+    return suggestionsManager.setTags(searchSuggestionsTags);
+  }, [searchSuggestionsTags]);
+
+  // Update "items" and "emptyItemsPlaceholder" states to re-render Menu
+  useEffect(function () {
+    return suggestionsManager.render();
+  }, [suggestionsManager, searchQuery, searchInputRef.current, searchSuggestionsAttributesKeys, searchSuggestionsAttributesTags, searchSuggestionsFilters, searchSuggestionsTags]);
+  var SuggestionsMenu = /*#__PURE__*/_jsx(SearchSuggestionsMenu, {
+    open: open,
+    mode: mode,
+    anchorEl: searchContainerRef.current,
+    searchInputFocused: searchInputFocused,
+    items: items,
+    emptyItemsPlaceholder: emptyItemsPlaceholder,
+    placeholder: i18n('searchSuggestionsPlaceholderDefault'),
+    i18n: i18n,
+    theme: theme
+  });
+  return {
+    SuggestionsMenu: SuggestionsMenu,
+    onKeyDown: function onKeyDown(event) {
+      if (open) {
+        suggestionsManager.onSearchInputKeyDown(event);
+      }
+    },
+    onKeyUp: function onKeyUp(event) {
+      if (open) {
+        suggestionsManager.onSearchInputKeyUp(event);
+      }
+    },
+    onClickSearch: function onClickSearch(event) {
+      suggestionsManager.onSearchButtonClick(event);
+    },
+    mode: mode
+  };
+};
+export default useSearchSuggestions;