@scaleflex/widget-explorer 0.0.1

package/lib/index.js

@@ -0,0 +1,1560 @@
+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; }
+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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
+function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
+function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+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 { createElement } from 'react';
+import { Plugin } from '@scaleflex/widget-core';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Informer from '@scaleflex/widget-informer';
+import ThumbnailGenerator from '@scaleflex/widget-thumbnail-generator';
+import getDroppedFiles from '@scaleflex/widget-utils/lib/getDroppedFiles';
+import toArray from '@scaleflex/widget-utils/lib/toArray';
+import Translator from '@scaleflex/widget-utils/lib/Translator';
+import findAllDOMElements from '@scaleflex/widget-utils/lib/findAllDOMElements';
+import { selectUploadsCount } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import isEmptyObject from '@scaleflex/widget-utils/lib/isEmptyObject';
+import { LIST_VIEW_COLS_IDS, VIEW_IDS, IMAGE_EDITOR_MODES, LIST_VIEW_FOLDERS_COLS_IDS, PLUGINS_IDS, LAYOUTS_IDS, FMAW_URL_QUERY_PARAMS } from '@scaleflex/widget-utils/lib/constants';
+import cuid from 'cuid';
+import { getFileInheritedVisibility } from '@scaleflex/widget-utils/lib/visibility';
+import ExplorerUI from './components/ExplorerUI';
+import defaultLocale from './defaultLocale';
+import createSuperFocus from './utils/createSuperFocus';
+import createPromise from './utils/createPromise';
+import trapFocus from './utils/trapFocus';
+import explorerReducer from './slices';
+import { targetAdded, targetRemoved } from './slices/targets.slice';
+import { allPanelsClosed, detailsViewToggled, facetedSearchSidebarToggled, fileWindowUpdated, selectActiveOverlayType, selectFileWindowFor, showAddFilesPanelUpdated, uploadsPanelOpened } from './slices/panels.slice';
+import { /* darkModeUpdated, */accessRolesUpdated, explorerCommonStateUpdated, selectIsPluginModalHidden, explorerPluginLoadingSet, pluginModalClosing, pluginModalHidden, selectIsPluginModalClosing } from './slices/common.slice';
+import { foldersAdded, foldersSortingUpdated, foldersStateUpdated, selectBaseFolderPath, selectCurrentFolder, selectCurrentFolderPath, selectFolderByPath, selectFolders } from './slices/folders.slice';
+import { fileAdded, filesSortingUpdated, selectCurrentFileByIdOrUuid } from './slices/files.slice';
+import { changeView, selectActiveView, selectIsAssetsView, viewsStateUpdated } from './slices/views.slice';
+import { foldersTreeFoldersUpdated, recursivelyFetchFoldersTree } from './slices/foldersTree.slice';
+import { isMetaRegionalLanguagesGroupExists } from './components/metadata.adapter';
+import { metadataUpdated } from './slices/metadata.slice';
+import { DEFAULT_FILTER_OPERATOR, AVAILABLE_FILTER_OPERATORS, FILTER_SECTION_KEYS } from './components/Filters/Filters.constants';
+import { getMappedFilterValues } from './components/Filters/Filters.utils';
+import { facetedSearchToggled } from './slices/filters.slice';
+import { checkIsValidSortBy, checkIsValidSortOrder } from './components/common/Sort/Sort.utils';
+import { DEFAULT_SORT_OPTION } from './components/common/Sort/Sort.constants';
+import isFileVersion from './utils/isFileVersion';
+
+// TODO: find a way to show version of the current plugin
+// why solution below isn't good?
+// first import doesn't work with webpack 5 as it was deprecated
+// second import fixes webpack 5 issue as it was mentioned in their docs
+// but it exposes our package.json to the client and it is mentioned as security rist in mutiple places
+// https://github.com/axelpale/genversion
+// https://stackoverflow.com/questions/64993118/error-should-not-import-the-named-export-version-imported-as-version
+// https://stackoverflow.com/questions/9153571/is-there-a-way-to-get-version-from-package-json-in-nodejs-code/10855054#10855054
+// import { version } from '../package.json'
+// import packageInfo from '../package.json'
+var Explorer = /*#__PURE__*/function (_Plugin) {
+  // static VERSION = packageInfo.version
+
+  function Explorer(filerobot) {
+    var _defaultOptions$confi, _opts$config, _defaultOptions$confi2, _opts$config2, _opts$config3;
+    var _this;
+    var _opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, Explorer);
+    _this = _callSuper(this, Explorer, [filerobot, _opts]);
+    _defineProperty(_this, "isUrlPathUpdateDismissed", function () {
+      return _this.opts.dismissUrlPathQueryUpdate || !_this.opts.ExploreViewComponent || _this.opts.useAssetsPicker;
+    });
+    _defineProperty(_this, "pushUrlInBrowser", function (newUrl) {
+      var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      // Avoiding pushing the same url so we keep the backward/forward states as they are and avoid duplicating.
+      if (_this.isUrlPathUpdateDismissed() || !newUrl || newUrl.toString() === window.location.toString()) {
+        return;
+      }
+      history.pushState(data, '', newUrl);
+    });
+    _defineProperty(_this, "replaceUrlInBrowser", function (newUrl) {
+      var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      if (_this.isUrlPathUpdateDismissed() || !newUrl || newUrl.toString() === window.location.toString()) {
+        return;
+      }
+      history.replaceState(data, '', newUrl, true);
+    });
+    _defineProperty(_this, "replaceUrlQueryParams", function (_ref) {
+      var params = _ref.params,
+        _ref$keyPrefix = _ref.keyPrefix,
+        keyPrefix = _ref$keyPrefix === void 0 ? '' : _ref$keyPrefix,
+        _ref$keysToDelete = _ref.keysToDelete,
+        keysToDelete = _ref$keysToDelete === void 0 ? [] : _ref$keysToDelete,
+        _ref$callback = _ref.callback,
+        callback = _ref$callback === void 0 ? function (_key, value) {
+          return value;
+        } : _ref$callback,
+        _ref$push = _ref.push,
+        push = _ref$push === void 0 ? false : _ref$push;
+      if (_this.isUrlPathUpdateDismissed()) return;
+      var url;
+      if (keysToDelete.length > 0) {
+        url = _this._getDeletedUrlQueryParams(keysToDelete);
+      }
+      Object.keys(params || {}).forEach(function (key) {
+        var value = callback(key, params[key]);
+        url = _this._getUpdatedUrlQueryParams(["".concat(keyPrefix || '').concat(key)], [value], url);
+      });
+      if (push) {
+        _this.pushUrlInBrowser(url);
+      } else {
+        _this.replaceUrlInBrowser(url);
+      }
+    });
+    _defineProperty(_this, "getUrlQueryParam", function (key, defaultValue) {
+      if (_this.isUrlPathUpdateDismissed() || !key) return defaultValue;
+      var targetUrl = new URL(window.location);
+      var paramValue = targetUrl.searchParams.get("".concat(_this.opts.queryParamPrefix || '').concat(key));
+      return paramValue || defaultValue;
+    });
+    _defineProperty(_this, "getQueryParamsAsObject", function () {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        forEachCallback = _ref2.forEachCallback,
+        _ref2$keyPrefix = _ref2.keyPrefix,
+        keyPrefix = _ref2$keyPrefix === void 0 ? '' : _ref2$keyPrefix,
+        _ref2$returnValueOnly = _ref2.returnValueOnly,
+        returnValueOnly = _ref2$returnValueOnly === void 0 ? false : _ref2$returnValueOnly;
+      if (_this.isUrlPathUpdateDismissed()) return [];
+      var targetUrl = new URL(window.location);
+      var params = {};
+      targetUrl.searchParams.forEach(function (value, key) {
+        var keyStartsWithPrefix = "".concat(_this.opts.queryParamPrefix).concat(keyPrefix);
+        if (key.startsWith(keyStartsWithPrefix)) {
+          var _value$match;
+          var filterRegex = new RegExp("(?:(?<filterKey>[a-z]*)?(?<filterOperator>".concat(AVAILABLE_FILTER_OPERATORS.join('|'), "))?(?<filterValue>.*)"), 'i');
+          var _ref3 = ((_value$match = value.match(filterRegex)) === null || _value$match === void 0 ? void 0 : _value$match.groups) || {},
+            filterKey = _ref3.filterKey,
+            _ref3$filterOperator = _ref3.filterOperator,
+            filterOperator = _ref3$filterOperator === void 0 ? DEFAULT_FILTER_OPERATOR : _ref3$filterOperator,
+            filterValue = _ref3.filterValue;
+          var mappedValue = (filterValue || value).split(',');
+          var sanitizedKey = key.replace(keyStartsWithPrefix, '');
+          params[sanitizedKey] = returnValueOnly ? mappedValue : _objectSpread(_objectSpread({}, filterKey && {
+            key: filterKey
+          }), {}, {
+            operator: filterOperator,
+            value: mappedValue
+          });
+          if (typeof forEachCallback === 'function') {
+            forEachCallback(params[sanitizedKey], sanitizedKey);
+          }
+        }
+      });
+      if (Array.isArray(params[FILTER_SECTION_KEYS.METADATA])) {
+        params[FILTER_SECTION_KEYS.METADATA] = params[FILTER_SECTION_KEYS.METADATA][0];
+      }
+      return params;
+    });
+    _defineProperty(_this, "_getUpdatedUrlQueryParams", function () {
+      var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var locationUrl = arguments.length > 2 ? arguments[2] : undefined;
+      if (_this.isUrlPathUpdateDismissed() || !keys || (keys === null || keys === void 0 ? void 0 : keys.length) === 0) return;
+      var url = locationUrl !== null && locationUrl !== void 0 ? locationUrl : new URL(window.location);
+      keys.forEach(function (key, index) {
+        var value = values[index];
+        if (value) {
+          url.searchParams.set("".concat(_this.opts.queryParamPrefix || '').concat(key), value);
+        } else {
+          url.searchParams["delete"]("".concat(_this.opts.queryParamPrefix || '').concat(key));
+        }
+      });
+      return url;
+    });
+    _defineProperty(_this, "_getDeletedUrlQueryParams", function (keys) {
+      if (_this.isUrlPathUpdateDismissed()) return;
+      var url = new URL(window.location);
+      var searchParamKeys = Array.from(url.searchParams.keys());
+
+      // If there is query param prefix identifier and we should remove all the keys, then let's use this for quick removing
+      // otherwise we are going to do loop inside another to remove the specified keys only.
+      if (_this.opts.queryParamPrefix && (!Array.isArray(keys) || keys.length === 0)) {
+        searchParamKeys.forEach(function (key) {
+          if (key.startsWith(_this.opts.queryParamPrefix)) {
+            url.searchParams["delete"](key);
+          }
+        });
+      } else {
+        var keysToRemove = keys || Object.values(FMAW_URL_QUERY_PARAMS);
+        keysToRemove.forEach(function (param) {
+          param && searchParamKeys.forEach(function (key) {
+            if (key.startsWith("".concat(_this.opts.queryParamPrefix || '').concat(param))) {
+              url.searchParams["delete"](key);
+            }
+          });
+        });
+      }
+      return url;
+    });
+    _defineProperty(_this, "triggerViewEvents", function (_ref4) {
+      var viewItem = _ref4.viewItem,
+        viewSubItem = _ref4.viewSubItem;
+      var currentView = selectActiveView(_this.getGlobalState());
+      if (viewItem) {
+        _this.filerobot.emit('view-item-changed', {
+          view: currentView,
+          viewItem: viewItem
+        });
+      }
+      if (viewSubItem) {
+        _this.filerobot.emit('view-sub-item-changed', {
+          view: currentView,
+          viewItem: viewItem,
+          viewSubItem: viewSubItem
+        });
+      }
+    });
+    _defineProperty(_this, "updateViewQueryInUrl", function () {
+      var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        view = _ref5.view,
+        viewItem = _ref5.viewItem,
+        viewSubItem = _ref5.viewSubItem,
+        keysToDelete = _ref5.keysToDelete;
+      _this.triggerViewEvents({
+        viewItem: viewItem,
+        viewSubItem: viewSubItem
+      });
+      if (_this.isUrlPathUpdateDismissed() || !view && !viewItem && !viewSubItem) {
+        return;
+      }
+      var params = {};
+      if (view) {
+        params[FMAW_URL_QUERY_PARAMS.VIEW] = view === null || view === void 0 ? void 0 : view.toLowerCase();
+      }
+      if (viewItem) {
+        params[FMAW_URL_QUERY_PARAMS.VIEW_ITEM] = viewItem;
+      }
+      if (viewSubItem) {
+        params[FMAW_URL_QUERY_PARAMS.VIEW_SUB_ITEM] = viewSubItem;
+      }
+      var replaceIfFirstTimeToAdd = false;
+      if (!view) {
+        if (viewItem) {
+          replaceIfFirstTimeToAdd = !_this.getUrlQueryParam(FMAW_URL_QUERY_PARAMS.VIEW_ITEM);
+        }
+        if (viewSubItem) {
+          replaceIfFirstTimeToAdd = !_this.getUrlQueryParam(FMAW_URL_QUERY_PARAMS.VIEW_SUB_ITEM);
+        }
+      }
+      _this.replaceUrlQueryParams({
+        params: params,
+        keysToDelete: keysToDelete,
+        push: !replaceIfFirstTimeToAdd
+      });
+    });
+    _defineProperty(_this, "deleteUrlQueryParams", function (keys) {
+      if (_this.isUrlPathUpdateDismissed()) return;
+      var url = _this._getDeletedUrlQueryParams(keys);
+      _this.replaceUrlInBrowser(url);
+    });
+    /**
+     * Initialize the i18n translations provided (default, core and from options) and inits the i18n class's attribute.
+     *
+     */
+    _defineProperty(_this, "i18nInit", function () {
+      _this.translator = new Translator([_this.defaultLocale, _this.filerobot.locale, _this.opts.locale]);
+      _this.i18n = _this.translator.translate.bind(_this.translator);
+      _this.i18nArray = _this.translator.translateArray.bind(_this.translator);
+    });
+    /**
+     * Adds the provided plugin to the explorer state for possiblity to be used/called/checked through the explroer.
+     *
+     * @param {Plugin} plugin - the plugin would be added to the explorer.
+     * Plugin = @scaleflex/widget-core/lib/Plugin.js
+     * @returns {HTMLElement} this.el - the plugin's wrapper HTML element.
+     */
+    _defineProperty(_this, "addTarget", function (plugin) {
+      var callerPluginId = plugin.id || plugin.constructor.name;
+      var callerPluginName = plugin.title || callerPluginId;
+      var callerPluginType = plugin.type;
+      var callerPluginInvisible = plugin.invisible;
+      if (callerPluginType !== 'acquirer' && callerPluginType !== 'progressindicator' && callerPluginType !== 'editor' && callerPluginType !== 'annotator') {
+        var msg = 'Explorer: can only be targeted by plugins of types: acquirer, progressindicator, editor, annotator';
+        _this.filerobot.log(msg, 'error');
+        return;
+      }
+      var target = {
+        id: callerPluginId,
+        name: callerPluginName,
+        type: callerPluginType,
+        invisible: callerPluginInvisible
+      };
+      _this.dispatch(targetAdded(target));
+      return _this.el;
+    });
+    /**
+     * Removes the provided Plugin from the explorer state.
+     *
+     * @param {Plugin} plugin - The plugin to be removed from the state
+     * Plugin = @scaleflex/widget-core/lib/Plugin.js
+     */
+    _defineProperty(_this, "removeTarget", function (plugin) {
+      _this.dispatch(targetRemoved(plugin.id));
+    });
+    /**
+     * Hides all the opened/shown panels in case any is opened.
+     *
+     */
+    _defineProperty(_this, "hideAllPanels", function (cb) {
+      if (typeof cb === 'function') {
+        cb();
+      }
+      _this.dispatch(allPanelsClosed());
+    });
+    _defineProperty(_this, "hideAllPanelsAndShowAddFilesPanel", function () {
+      _this.dispatch(showAddFilesPanelUpdated({
+        show: true,
+        closeOthers: true
+      }));
+    });
+    /**
+     * Opens the Explorer plugin main modal which is responsible for showing the plugin.
+     *
+     * @emits {Event} explorer:modal-open
+     * @returns {Promise | undefined} promsie
+     */
+    _defineProperty(_this, "openModal", function () {
+      var _createPromise = createPromise(),
+        promise = _createPromise.promise,
+        resolve = _createPromise.resolve;
+      // save scroll position
+      _this.savedScrollPosition = window.pageYOffset;
+      // save active element, so we can restore focus when modal is closed
+      _this.savedActiveElement = document.activeElement;
+      if (_this.opts.disablePageScrollWhenModalOpen) {
+        document.body.classList.add('filerobot-Explorer-isFixed');
+      }
+      if (_this.opts.animateOpenClose && selectIsPluginModalClosing(_this.getGlobalState())) {
+        var _handler = function handler() {
+          _this.dispatch(pluginModalHidden(false));
+          _this.el.removeEventListener('animationend', _handler, false);
+          resolve();
+        };
+        _this.el.addEventListener('animationend', _handler, false);
+      } else {
+        _this.dispatch(pluginModalHidden(false));
+        resolve();
+      }
+      if (_this.opts.browserBackButtonCloseModal) {
+        _this.updateBrowserHistory();
+      }
+
+      // handle ESC and TAB keys in modal dialog
+      document.addEventListener('keydown', _this.handleKeyDownInModal);
+      _this.filerobot.emit('explorer:modal-open');
+      return promise;
+    });
+    /**
+     * Closes the Explorer plugin main modal.
+     *
+     * @param {Object} opts - options to be used while closing the modal.
+     * @emits {Event} explorer:modal-close
+     * @returns {Promise | undefeined} promise
+     */
+    _defineProperty(_this, "closeModal", function () {
+      var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var _opts$manualClose = opts.manualClose,
+        manualClose = _opts$manualClose === void 0 ? true : _opts$manualClose;
+      var modalEl = document.querySelector(".".concat(_this.modalClassName));
+      if (modalEl) {
+        modalEl.remove();
+      }
+      var state = _this.getGlobalState();
+      var isHidden = selectIsPluginModalHidden(state);
+      var isClosing = selectIsPluginModalClosing(state);
+      if (isHidden || isClosing) {
+        // short-circuit if animation is ongoing
+        return;
+      }
+      var _createPromise2 = createPromise(),
+        promise = _createPromise2.promise,
+        resolve = _createPromise2.resolve;
+      if (_this.opts.disablePageScrollWhenModalOpen) {
+        document.body.classList.remove('filerobot-Explorer-isFixed');
+      }
+      if (_this.opts.animateOpenClose) {
+        _this.dispatch(pluginModalClosing(true));
+        var _handler2 = function handler() {
+          _this.dispatch(pluginModalHidden(true));
+          _this.superFocus.cancel();
+          _this.savedActiveElement.focus();
+          _this.el.removeEventListener('animationend', _handler2, false);
+          resolve();
+        };
+        _this.el.addEventListener('animationend', _handler2, false);
+      } else {
+        _this.dispatch(pluginModalHidden(true));
+        _this.superFocus.cancel();
+        _this.savedActiveElement.focus();
+        resolve();
+      }
+
+      // handle ESC and TAB keys in modal dialog
+      document.removeEventListener('keydown', _this.handleKeyDownInModal);
+      if (manualClose && _this.opts.browserBackButtonCloseModal &&
+      // Check if the latest entry in the history state is the modal name
+      history.state && history.state[_this.modalName]) {
+        // Go back in history to clear out the entry we created (ultimately closing the modal)
+        history.go(-1);
+      }
+      _this.filerobot.emit('explorer:modal-close');
+      _this._getDeletedUrlQueryParams();
+      return promise;
+    });
+    /**
+     * Checks whether the Explorer plugin main modal is opened or not.
+     *
+     * @returns {Boolean} Anonymous - The state of the main modal whether opened or closed.
+     */
+    _defineProperty(_this, "isModalOpen", function () {
+      return !selectIsPluginModalHidden(_this.getGlobalState());
+    });
+    /**
+     * Calls the modal closing function either the function provided by the user from options or the default one.
+     *
+     * @returns {Any} Anonymous - The returned value of the user's provided closing fn. or the default closing fn.
+     */
+    _defineProperty(_this, "requestCloseModal", function () {
+      if (_this.opts.onRequestCloseModal) {
+        return _this.opts.onRequestCloseModal();
+      }
+      return _this.closeModal();
+    });
+    /**
+     * Sets the widget's dark mode ON/OFF.
+     *
+     * @param {Boolean} isDarkModeOn - Defines whether to turn the dark mode ON or OFF.
+     */
+    _defineProperty(_this, "setDarkModeCapability", function (isDarkModeOn) {
+      // TODO: enable darkMode when it is ready
+      // this.dispatch(darkModeUpdated(false))
+    });
+    /**
+     * Handles the widget's dark mode changing.
+     *
+     * @param {Event} event
+     */
+    _defineProperty(_this, "handleSystemDarkModeChange", function (event) {
+      var isDarkModeOnNow = event.matches;
+      _this.filerobot.log("[Explorer] Dark mode is ".concat(isDarkModeOnNow ? 'on' : 'off'));
+      _this.setDarkModeCapability(isDarkModeOnNow);
+    });
+    /**
+     * Adds files to the widget's state for being uploaded.
+     *
+     * @param {Array} files - Array of files objects that would be added to the widget's state.
+     */
+    _defineProperty(_this, "addFiles", function (files) {
+      var targetFolder = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      _this.filerobot.setCoreCommonState({
+        fromDragging: false
+      });
+      var state = _this.getGlobalState();
+      var uploadToFolder = targetFolder.path ? targetFolder : selectCurrentFolder(state);
+      // Fallbacks to currentFolderPath in-case we have base folder path only (I think shouldn't be possible?).
+      var targetFolderPath = uploadToFolder.path || selectCurrentFolderPath(state);
+      var filesVisibility = getFileInheritedVisibility(uploadToFolder);
+      var descriptors = files.map(function (file) {
+        var localParentFoldersPath = file.relativePath ? file.relativePath.substr(0, file.relativePath.lastIndexOf('/')) // it does starts with / so no need to prepend one
+        : '';
+        return {
+          source: _this.id,
+          name: file.name,
+          type: file.type,
+          data: file,
+          toFolder: "".concat(targetFolderPath).concat(localParentFoldersPath),
+          visibility: filesVisibility
+        };
+      });
+      try {
+        if (!isEmptyObject(targetFolder)) {
+          _this.filerobot.setCoreCommonState({
+            dndTargetFolderPath: targetFolder.path,
+            fromDragging: true
+          });
+        }
+        _this.filerobot.addFiles(descriptors);
+      } catch (err) {
+        _this.filerobot.log(err);
+      }
+    });
+    /**
+     * Listens to resizing of the Explorer plugin container element.
+     *
+     * * Why make insides/inner of Explorer invisible until first ResizeObserver event is emitted?
+     * - ResizeOberserver doesn't emit the first resize event fast enough, users can see the jump from one .filerobot-size-- to another (e.g. in Safari)
+     * * Why not apply visibility property to .filerobot-Explorer-inner?
+     * - Because ideally, acc to specs, ResizeObserver should see invisible elements as of width 0. So even though applying invisibility to .filerobot-Explorer-inner works now, it may not work in the future.
+     */
+    _defineProperty(_this, "startListeningToResize", function () {
+      // Watch for Explorer container (`.filerobot-Explorer-inner`) resize
+      // and update containerWidth/containerHeight in plugin state accordingly.
+      // Emits first event on initialization.
+      _this.resizeObserver = new ResizeObserver(function (entries) {
+        var filerobotExplorerInnerEl = entries[0];
+        var _filerobotExplorerInn = filerobotExplorerInnerEl.contentRect,
+          width = _filerobotExplorerInn.width,
+          height = _filerobotExplorerInn.height;
+        _this.filerobot.log("[Explorer] resized: ".concat(width, " / ").concat(height), 'debug');
+        _this.setPluginCommonState({
+          containerWidth: width,
+          containerHeight: height,
+          areInsidesReadyToBeVisible: true
+        });
+      });
+      _this.resizeObserver.observe(_this.el.querySelector('.filerobot-Explorer-inner'));
+
+      // If ResizeObserver fails to emit an event telling us what size to use - default to the mobile view
+      _this.makeExplorerInsidesVisibleAnywayTimeout = setTimeout(function () {
+        var _this$getPluginCommon = _this.getPluginCommonState(),
+          areInsidesReadyToBeVisible = _this$getPluginCommon.areInsidesReadyToBeVisible,
+          isPluginModalHidden = _this$getPluginCommon.isPluginModalHidden;
+        var isModalAndClosed = !_this.opts.inline && isPluginModalHidden;
+        if (
+        // if ResizeObserver hasn't yet fired,
+        !areInsidesReadyToBeVisible &&
+        // and it's not due to the modal being closed
+        !isModalAndClosed) {
+          _this.filerobot.log("[Explorer] resize event didn't fire on time: defaulted to mobile layout", 'debug');
+          _this.setPluginCommonState({
+            areInsidesReadyToBeVisible: true
+          });
+        }
+      }, 1000);
+    });
+    /**
+     * Stops the tracking or listening to Explorer plugin container element resizing.
+     *
+     */
+    _defineProperty(_this, "stopListeningToResize", function () {
+      var _this$resizeObserver;
+      (_this$resizeObserver = _this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
+      clearTimeout(_this.makeExplorerInsidesVisibleAnywayTimeout);
+    });
+    /**
+     * Records whether we have been interacting with filerobot/explorer right now, which is then used to determine whether state updates should trigger a refocusing.
+     *
+     * @param {Event} event
+     */
+    _defineProperty(_this, "recordIfFocusedOnFilerobotRecently", function (event) {
+      var _this$el, _this$el$contains;
+      if ((_this$el = _this.el) !== null && _this$el !== void 0 && (_this$el$contains = _this$el.contains) !== null && _this$el$contains !== void 0 && _this$el$contains.call(_this$el, event.target)) {
+        _this.ifFocusedOnFilerobotRecently = true;
+      } else {
+        _this.ifFocusedOnFilerobotRecently = false;
+        // ___Why run this.superFocus.cancel here when it already runs in superFocusOnEachUpdate?
+        //    Because superFocus is debounced, when we move from Filerobot to some other element on the page,
+        //    previously run superFocus sometimes hits and moves focus back to Filerobot.
+        _this.superFocus.cancel();
+      }
+    });
+    /**
+     * Updates the history of the browser with the plugin's main modal's name.
+     *
+     */
+    _defineProperty(_this, "updateBrowserHistory", function () {
+      // Ensure history state does not already contain our modal name to avoid double-pushing
+      if (!history.state || !history.state[_this.modalName]) {
+        // Push to history so that the page is not lost on browser back button press
+        history.pushState(_objectSpread(_objectSpread({}, history.state), {}, _defineProperty({}, _this.modalName, true)), '');
+      }
+
+      // Listen for back button presses
+      window.addEventListener('popstate', _this.handlePopState, false);
+    });
+    /**
+     * browser's history popstate event handler fired when back button of the browser pressed.
+     *
+     * @param {Event} event
+     */
+    _defineProperty(_this, "handlePopState", function (event) {
+      // Close the modal if the history state no longer contains our modal name
+      if (_this.isModalOpen() && (!event.state || !event.state[_this.modalName])) {
+        _this.closeModal({
+          manualClose: false
+        });
+      }
+
+      // When the browser back button is pressed and filerobot is now the latest entry in the history but the modal is closed, fix the history by removing the filerobot history entry
+      // This occurs when another entry is added into the history state while the modal is open, and then the modal gets manually closed
+      if (!_this.isModalOpen() && event.state && event.state[_this.modalName]) {
+        history.go(-1);
+      }
+    });
+    /**
+     * Event handler for keydown inside the plugin's base/main modal
+     *
+     * @param {*} event
+     */
+    _defineProperty(_this, "handleKeyDownInModal", function (event) {
+      // close modal on esc key press, Escape key = 27
+      if (event.keyCode === 27) {
+        _this.handleClickOutside();
+      }
+      // trap focus on tab key press, Tab key = 9
+      if (event.keyCode === 9) {
+        trapFocus.forModal(event, selectActiveOverlayType(_this.getGlobalState()), _this.el);
+      }
+    });
+    /**
+     * Requests modal closing if the user provided closeModalOnClickOutside property with true value.
+     *
+     */
+    _defineProperty(_this, "handleClickOutside", function () {
+      if (_this.opts.closeModalOnClickOutside) {
+        var state = _this.getGlobalState();
+        var uploadsCount = selectUploadsCount(state);
+        if (_this.opts.preventModalOverlayClickOnUpload && uploadsCount > 0) {
+          _this.filerobot.info(_this.i18n('filerobotAddedUploadedFilesError'), 'warning', 3000);
+        } else {
+          _this.requestCloseModal();
+        }
+      }
+    });
+    /**
+     * Adds the found copies files in the clipboard on pasting them.
+     *
+     * @param {Event} event
+     */
+    _defineProperty(_this, "handlePaste", function (event) {
+      if (_this._isPasteAndDnDUploadDisabled() || ['TEXTAREA', 'INPUT'].includes(event.target.tagName)) {
+        return;
+      }
+
+      // 1. Let any acquirer plugin (Url/Webcam/etc.) handle pastes to the root
+      _this.filerobot.iteratePlugins(function (plugin) {
+        if (plugin.type === 'acquirer') {
+          // Every Plugin with .type acquirer can define handleRootPaste(event)
+          plugin.handleRootPaste && plugin.handleRootPaste(event);
+        }
+      });
+
+      // 2. Add all dropped files
+      var files = toArray(event.clipboardData.files);
+      if (files.length > 0) {
+        _this.addFiles(files);
+      }
+    });
+    /**
+     * Event handler for dragOver event for preparing the drag & drop functionality.
+     *
+     * @param {Event} event
+     */
+    _defineProperty(_this, "handleDragOver", function (event) {
+      if (_this._isPasteAndDnDUploadDisabled()) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      var _this$getPluginCommon2 = _this.getPluginCommonState(),
+        isDraggingOver = _this$getPluginCommon2.isDraggingOver;
+
+      // Add a small (+) icon on drop
+      event.dataTransfer.dropEffect = 'copy';
+      clearTimeout(_this.removeDragOverClassTimeout);
+      if (!isDraggingOver) _this.setPluginCommonState({
+        isDraggingOver: true
+      });
+    });
+    /**
+     * Event handler for dragLeave event for removing the classes shown while dragOver event.
+     *
+     * @param {Event} event
+     */
+    _defineProperty(_this, "handleDragLeave", function (event) {
+      if (_this._isPasteAndDnDUploadDisabled()) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      clearTimeout(_this.removeDragOverClassTimeout);
+      // Timeout against flickering, this solution is taken from drag-drop library. Solution with 'pointer-events: none' didn't work across browsers.
+      _this.removeDragOverClassTimeout = setTimeout(function () {
+        _this.setPluginCommonState({
+          isDraggingOver: false
+        });
+      }, 50);
+    });
+    /**
+     * Event handler for drop event for handling the adding of dropped files.
+     *
+     * @param {Event} event
+     */
+    _defineProperty(_this, "handleDrop", function (event) {
+      var _event$dataTransfer$f, _event$dataTransfer$i;
+      if (_this._isPasteAndDnDUploadDisabled()) {
+        return;
+      }
+      clearTimeout(_this.removeDragOverClassTimeout);
+
+      // 1. Remove dragover class
+      _this.setPluginCommonState({
+        isDraggingOver: false
+      });
+      var isNoExternalFiles = ((_event$dataTransfer$f = event.dataTransfer.files) === null || _event$dataTransfer$f === void 0 ? void 0 : _event$dataTransfer$f.length) === 0 && ((_event$dataTransfer$i = event.dataTransfer.items) === null || _event$dataTransfer$i === void 0 ? void 0 : _event$dataTransfer$i.length) === 0;
+      if (isNoExternalFiles) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+
+      // 2. Let any acquirer plugin (Url/Webcam/etc.) handle drops to the root
+      _this.filerobot.iteratePlugins(function (plugin) {
+        if (plugin.type === 'acquirer') {
+          // Every Plugin with .type acquirer can define handleRootDrop(event)
+          plugin.handleRootDrop && plugin.handleRootDrop(event);
+        }
+      });
+
+      // 3. Add all dropped files
+      var executedDropErrorOnce = false;
+      var logDropError = function logDropError(error) {
+        _this.filerobot.log(error, 'error');
+
+        // In practice all drop errors are most likely the same, so let's just show one to avoid overwhelming the user
+        if (!executedDropErrorOnce) {
+          _this.filerobot.info(error.message, 'error', 5000);
+          executedDropErrorOnce = true;
+        }
+      };
+      getDroppedFiles(event.dataTransfer, {
+        logDropError: logDropError
+      }).then(function (files) {
+        if (files.length > 0) {
+          _this.filerobot.log('[Explorer] Files were dropped');
+          _this.addFiles(files);
+        }
+      });
+    });
+    /**
+     * Requests thumbnails for files for being shown to the user.
+     *
+     * @param {Object} file - The object of the file that thumbnail would be generated for.
+     */
+    _defineProperty(_this, "handleRequestThumbnail", function (file) {
+      if (!_this.opts.waitForThumbnailsBeforeUpload) {
+        _this.filerobot.emit('thumbnail:request', file);
+      }
+    });
+    /**
+     * Cancels thumbnail requests when a file item component unmounts to avoid clogging up the queue when the user scrolls past many elements.
+     *
+     * @param {Object} file - the file which its thumbnail generating request should be canceled.
+     */
+    _defineProperty(_this, "handleCancelThumbnail", function (file) {
+      if (!_this.opts.waitForThumbnailsBeforeUpload) {
+        _this.filerobot.emit('thumbnail:cancel', file);
+      }
+    });
+    /**
+     * Event handler for keydown event in plugin's inline mode.
+     *
+     * @param {Event} event
+     */
+    _defineProperty(_this, "handleKeyDownInInline", function (event) {
+      // Trap focus on tab key press, Tab key = 9.
+      if (event.keyCode === 9) {
+        trapFocus.forInline(event, selectActiveOverlayType(_this.getGlobalState()), _this.el);
+      }
+    });
+    /**
+     * Event handler for paste event.
+     *
+     * * Why do we listen to the 'paste' event on a document instead of onPaste={props.handlePaste} prop, or this.el.addEventListener('paste')?
+     * - Because (at least) Chrome doesn't handle paste if focus is on some button, e.g. 'My Device'...
+     *    Therefore, the best option is to listen to all 'paste' events, and only react to them when we are focused on our particular Filerobot instance.
+     * * Why do we still need onPaste={props.handlePaste} for the ExplorerUi?
+     * - Because if we click on the 'Drop files here' caption e.g., `document.activeElement` will be 'body'. Which means our standard determination of whether we're pasting into our Filerobot instance won't work...
+     *    Therefore, we need a traditional onPaste={props.handlePaste} handler too.
+     *
+     * @param {Event} event
+     */
+    _defineProperty(_this, "handlePasteOnBody", function (event) {
+      var isFocusInOverlay = _this.el.contains(document.activeElement);
+      if (isFocusInOverlay) {
+        _this.handlePaste(event);
+      }
+    });
+    /**
+     * Public method that used on Hub to sync with burger menu.
+     *
+     * @param {string} newViewId
+     * @param {Object} activationOptions - optional object for providing options used in activation, ex. if the view's activation might accept an initial value to activate for example opening specific label once activating.
+     */
+    _defineProperty(_this, "changeView", function () {
+      var newViewId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : VIEW_IDS.FOLDERS;
+      var activationOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      _this.dispatch(changeView({
+        view: newViewId,
+        triggerActivate: true,
+        activateOptions: activationOptions
+      }));
+    });
+    _defineProperty(_this, "createFolderDetails", function (otherProps) {
+      var _otherProps$fileSize, _otherProps$fileSize2;
+      var createdAt = new Date().toISOString();
+      var folderPath = otherProps.name;
+      var splittedFolderPath = folderPath.split('/');
+      var firstFolderName = splittedFolderPath[splittedFolderPath.length - 1];
+      var minSplittedFolderPaths = 3;
+      var isUploadDirectChild = splittedFolderPath.length === minSplittedFolderPaths;
+      return _objectSpread(_objectSpread({}, otherProps), {}, {
+        count: {
+          files_direct: isUploadDirectChild ? 1 : 0,
+          files_recursive: isUploadDirectChild ? 0 : 1
+        },
+        size: {
+          total_recursive_bytes: ((_otherProps$fileSize = otherProps.fileSize) === null || _otherProps$fileSize === void 0 ? void 0 : _otherProps$fileSize.bytes) || 0,
+          total_pretty_bytes: ((_otherProps$fileSize2 = otherProps.fileSize) === null || _otherProps$fileSize2 === void 0 ? void 0 : _otherProps$fileSize2.pretty) || 0
+        },
+        created_at: createdAt,
+        updated_at: createdAt,
+        isFolder: true,
+        type: 'folder',
+        children: [],
+        path: folderPath,
+        name: firstFolderName
+      });
+    });
+    /**
+     * Handler which is fired on file uploaded that adds the new uploaded file to the state for being shown without refresh.
+     *
+     * @param {Object} _file - upload file object.
+     * @param {Object} uploadResponse - The uploading process response object.
+     */
+    _defineProperty(_this, "handleFileUploaded", function (_file, response) {
+      var _response$body, _file$data, _currentFolder$path;
+      var uploadedFile = response === null || response === void 0 ? void 0 : (_response$body = response.body) === null || _response$body === void 0 ? void 0 : _response$body.file;
+      if (!uploadedFile) {
+        return;
+      }
+      var localParentFolderPath = (_file$data = _file.data) === null || _file$data === void 0 ? void 0 : _file$data.relativePath;
+      var isUploadedWithParentFolder = Boolean(localParentFolderPath);
+      var state = _this.getGlobalState();
+      var folders = selectFolders(state);
+      var currentFolder = selectCurrentFolder(state) || {};
+      var isAssetsView = selectIsAssetsView(state);
+      var isFileWindowOpened = selectFileWindowFor(state);
+      var originalFile = selectCurrentFileByIdOrUuid(state, selectFileWindowFor(state));
+      var fileParentFolder = uploadedFile.toFolder || uploadedFile.folder || '';
+      var fileParentFolderPath = fileParentFolder.name || fileParentFolder || '';
+      var localFolderPathNoFileName = (localParentFolderPath === null || localParentFolderPath === void 0 ? void 0 : localParentFolderPath.substr(0, localParentFolderPath === null || localParentFolderPath === void 0 ? void 0 : localParentFolderPath.lastIndexOf('/'))) || '';
+      var targetFolderPath = fileParentFolderPath.substr(0, fileParentFolderPath.indexOf(localFolderPathNoFileName));
+      if (isFileWindowOpened && isFileVersion({
+        newVersion: uploadedFile,
+        originalFile: originalFile
+      })) {
+        var _uploadedFile;
+        _this.dispatch(fileWindowUpdated({
+          "for": (_uploadedFile = uploadedFile) === null || _uploadedFile === void 0 ? void 0 : _uploadedFile.uuid
+        }));
+        _this.filerobot.info(_this.i18n('explorerNewVersionUploadedSuccessfully'), 'success', 3000);
+      }
+      // Set the file's visibility to the same as it's parent folder since the uploaded file is by default inherits it's parent folder visibility.
+      if (fileParentFolderPath === currentFolder.path) {
+        uploadedFile = _objectSpread(_objectSpread({}, uploadedFile), {}, {
+          visibility: getFileInheritedVisibility(currentFolder)
+        });
+      }
+
+      // If the file uploaded is related to the current opened folder
+      // or we are in assets mode (treated as current opened folder) then add it
+      // else if maybe the file related to a sub folder of current folder, add that sub folder inside current folder if not there.
+      if (fileParentFolderPath === currentFolder.path || isAssetsView) {
+        // In case the file is a new version of a current uploaded file then override it with the new version instead,
+        // otherwise add the file.
+        _this.dispatch(fileAdded(uploadedFile));
+        return;
+      }
+      var fileDirectParentFolderPathIndex = fileParentFolderPath.indexOf('/', (currentFolder === null || currentFolder === void 0 ? void 0 : (_currentFolder$path = currentFolder.path) === null || _currentFolder$path === void 0 ? void 0 : _currentFolder$path.length) + 1 || 0);
+      var fileDirectParentFolderPath = fileParentFolderPath.slice(0, fileDirectParentFolderPathIndex > -1 ? fileDirectParentFolderPathIndex : undefined);
+      if (fileParentFolderPath && targetFolderPath === currentFolder.path && !(folders[fileParentFolder.uuid] || selectFolderByPath(state, fileDirectParentFolderPath))) {
+        var newFolder = [_this.createFolderDetails(_objectSpread(_objectSpread({}, fileParentFolder), {}, {
+          name: fileDirectParentFolderPath,
+          fileSize: uploadedFile.size
+        }))];
+        _this.dispatch(foldersAdded({
+          folders: newFolder
+        }));
+        _this.dispatch(foldersTreeFoldersUpdated({
+          folders: newFolder,
+          parentFolder: currentFolder
+        }));
+        return;
+      }
+      if (isUploadedWithParentFolder && !folders[fileParentFolder.uuid]) {
+        _this.dispatch(recursivelyFetchFoldersTree({
+          path: "/".concat(fileParentFolderPath.split('/')[1])
+        }));
+      }
+    });
+    /**
+     * Event handler fired after the whole upload process is done whether with success, failure or both.
+     *
+     * @param {Object} uploadResultObject
+     */
+    _defineProperty(_this, "handleComplete", function (_ref6) {
+      var failed = _ref6.failed;
+      if (_this.opts.closeAfterFinish && failed.length === 0) {
+        // All uploads are done
+        _this.requestCloseModal();
+      }
+    });
+    _defineProperty(_this, "updateOpts", function (_ref7) {
+      var _ref7$newOpts = _ref7.newOpts,
+        newOpts = _ref7$newOpts === void 0 ? {} : _ref7$newOpts;
+      _this.isDevEnv = _this.filerobot.opts.dev;
+      _this.container = _this.filerobot.opts.container;
+      _this.passOptsToState(newOpts);
+      if (typeof newOpts.inline !== 'undefined' && !newOpts.inline) {
+        _this.removeEvents();
+        _this.initEvents();
+      }
+    });
+    /**
+     * Initializes event handlers for different event listeners on the plugin capturing/loading.
+     *
+     */
+    _defineProperty(_this, "initEvents", function () {
+      if (!_this.el) {
+        return;
+      }
+
+      // Add the click event for modal open button/trigger.
+      if (_this.opts.trigger && !_this.opts.inline) {
+        var showModalTrigger = findAllDOMElements(_this.opts.trigger);
+        if (showModalTrigger) {
+          showModalTrigger.forEach(function (trigger) {
+            trigger.addEventListener('click', _this.openModal);
+            trigger.addEventListener('drop', _this.openModal);
+          });
+        } else {
+          _this.filerobot.log('Explorer modal trigger not found. Make sure `trigger` is set in Explorer options, unless you are planning to call `explorer.openModal()` method yourself', 'warning');
+        }
+      }
+      _this.startListeningToResize();
+      document.addEventListener('paste', _this.handlePasteOnBody);
+      _this.filerobot.on('opts-updated', _this.updateOpts);
+      _this.filerobot.on('plugin-remove', _this.removeTarget);
+      _this.filerobot.on('explorer:modal-close', _this.hideAllPanels);
+      _this.filerobot.on('upload-success', _this.handleFileUploaded);
+      _this.filerobot.on('complete', _this.handleComplete);
+      // ___Why fire on capture?
+      //    Because this.ifFocusedOnFilerobotRecently needs to change before onUpdate() fires.
+      document.addEventListener('focus', _this.recordIfFocusedOnFilerobotRecently, true);
+      document.addEventListener('click', _this.recordIfFocusedOnFilerobotRecently, true);
+      if (_this.opts.inline) {
+        _this.el.addEventListener('keydown', _this.handleKeyDownInInline);
+      }
+      if (!_this.isUrlPathUpdateDismissed()) {
+        _this._replaceStateProxy = Proxy.revocable(window.history.replaceState, {
+          apply: function apply(target, thisArg, args) {
+            var originalReplaceStateResult = target.apply(thisArg, args);
+
+            // Used to differentiate from the event triggered from widget to avoid the custom event dispatching.
+            var shouldDismissCustomEvent = args[3];
+
+            // Custom replacestate event to be dispatched we are going to use in whatever place we need to handle anything after
+            // new replaceState to the URL whether from widget or external project.
+            // to use => window.addEventListener('replacestate', callback)
+            // to remove listening => window.removeEventListener('replacestate', callback)
+            if (!shouldDismissCustomEvent) {
+              var eventArgs = {
+                data: args[0],
+                unused: args[1],
+                url: args[2]
+              };
+              window.dispatchEvent(new CustomEvent('replacestate', {
+                detail: eventArgs
+              }));
+            }
+            return originalReplaceStateResult;
+          }
+        });
+        _this._replaceStateProxy.nativeFn = window.history.replaceState;
+        window.history.replaceState = _this._replaceStateProxy.proxy;
+      }
+    });
+    /**
+     * Removes the event handlers assigned on the plugin's capturing/initialization.
+     *
+     */
+    _defineProperty(_this, "removeEvents", function () {
+      var showModalTrigger = findAllDOMElements(_this.opts.trigger);
+      if (!_this.opts.inline && showModalTrigger) {
+        showModalTrigger.forEach(function (trigger) {
+          return trigger.removeEventListener('click', _this.openModal);
+        });
+      }
+      _this.stopListeningToResize();
+      document.removeEventListener('paste', _this.handlePasteOnBody);
+      window.removeEventListener('popstate', _this.handlePopState, false);
+      _this.filerobot.off('opts-updated', _this.updateOpts);
+      _this.filerobot.off('plugin-remove', _this.removeTarget);
+      _this.filerobot.off('explorer:modal-close', _this.hideAllPanels);
+      _this.filerobot.off('upload-success', _this.handleFileUploaded);
+      _this.filerobot.off('complete', _this.handleComplete);
+      document.removeEventListener('focus', _this.recordIfFocusedOnFilerobotRecently);
+      document.removeEventListener('click', _this.recordIfFocusedOnFilerobotRecently);
+      if (_this.opts.inline) {
+        var _this$el2;
+        (_this$el2 = _this.el) === null || _this$el2 === void 0 ? void 0 : _this$el2.removeEventListener('keydown', _this.handleKeyDownInInline);
+      }
+      if (!_this.isUrlPathUpdateDismissed() && typeof _this._replaceStateProxy.revoke === 'function') {
+        _this._replaceStateProxy.revoke();
+        window.history.replaceState = _this._replaceStateProxy.nativeFn || window.history.replaceState;
+      }
+    });
+    /**
+     * Handles focusing after each state update of the plugin.
+     *
+     */
+    _defineProperty(_this, "superFocusOnEachUpdate", function () {
+      if (!_this.el) {
+        return;
+      }
+      var isFocusInFilerobot = _this.el.contains(document.activeElement);
+      // When focus is lost on the page (== focus is on body for most browsers, or focus is null for IE11)
+      var isFocusNowhere = document.activeElement === document.body || document.activeElement === null;
+      var isInformerHidden = _this.filerobot.getCoreState().info.isHidden;
+      var isModal = !_this.opts.inline;
+      if (
+      // If update is connected to showing the Informer - let the screen reader calmly read it.
+      isInformerHidden && (
+      // If we are in a modal - always superfocus without concern for other elements on the page (user is unlikely to want to interact with the rest of the page)
+      isModal ||
+      // If we are already inside of Filerobot, or
+      isFocusInFilerobot ||
+      // If we are not focused on anything BUT we have already, at least once, focused on filerobot
+      //   1. We focus when isFocusNowhere, because when the element we were focused on disappears (e.g. an overlay), - focus gets lost. If user is typing something somewhere else on the page, - focus won't be 'nowhere'.
+      //   2. We only focus when focus is nowhere AND this.ifFocusedOnFilerobotRecently, to avoid focus jumps if we do something else on the page.
+      //   [Practical check] Without '&& this.ifFocusedOnFilerobotRecently', in Safari, in inline mode, when file is uploading, - navigate via tab to the checkbox, try to press space multiple times. Focus will jump to Filerobot.
+      isFocusNowhere && _this.ifFocusedOnFilerobotRecently)) {
+        _this.superFocus(_this.el, selectActiveOverlayType(_this.getGlobalState()));
+      } else {
+        _this.superFocus.cancel();
+      }
+    });
+    /**
+     * The function fired after each state update, debounced.
+     *
+     */
+    _defineProperty(_this, "afterUpdate", function () {
+      _this.superFocusOnEachUpdate();
+    });
+    /**
+     * pause uploading for the provided file.
+     * @param {String} fileId - The id of the file which uploading process would be canceled.
+     */
+    _defineProperty(_this, "pauseUpload", function (fileId) {
+      _this.filerobot.pauseResume(fileId);
+    });
+    /**
+     * retry uploading for the provided file.
+     * @param {String} fileId - The id of the file which uploading process would be canceled.
+     */
+    _defineProperty(_this, "retryUpload", function (fileId) {
+      _this.filerobot.retryUpload(fileId);
+    });
+    _defineProperty(_this, "removeUploadFiles", function (filesIds, keepPanelOpen) {
+      _this.filerobot.removeUploads(filesIds);
+      var uploadsCount = selectUploadsCount(_this.getGlobalState());
+      if (uploadsCount === 0 && !keepPanelOpen) {
+        _this.dispatch(uploadsPanelOpened(false));
+      }
+    });
+    _defineProperty(_this, "checkUserPermissions", function (permissionsToCheck) {
+      return _this.filerobot.checkUserPermissions(typeof permissionsToCheck === 'string' ? [permissionsToCheck] : permissionsToCheck, false);
+    });
+    _defineProperty(_this, "checkFileFolderPermissions", function (_ref8) {
+      var _ref8$permissionsToCh = _ref8.permissionsToCheck,
+        permissionsToCheck = _ref8$permissionsToCh === void 0 ? [] : _ref8$permissionsToCh,
+        _ref8$permissionsList = _ref8.permissionsList,
+        permissionsList = _ref8$permissionsList === void 0 ? {} : _ref8$permissionsList;
+      if (!permissionsList || Object.keys(permissionsList || {}).length === 0) {
+        return true;
+      }
+      return !permissionsToCheck.some(function (permission) {
+        return permission && !(permissionsList !== null && permissionsList !== void 0 && permissionsList[permission]);
+      });
+    });
+    _defineProperty(_this, "openFileWindow", function (fileUuid) {
+      if (fileUuid) {
+        _this.dispatch(fileWindowUpdated(fileUuid));
+      }
+    });
+    _defineProperty(_this, "setOptions", function () {
+      var newOpts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var updatedOpts = _objectSpread({}, newOpts);
+      if (updatedOpts.filters) {
+        updatedOpts.filters = getMappedFilterValues(updatedOpts.filters);
+      }
+      _superPropGet((_this, Explorer), "setOptions", _this, 3)([updatedOpts]);
+    });
+    _defineProperty(_this, "mountTargetModal", function () {
+      var body = document.querySelector('body');
+      var newTarget = document.createElement('div');
+      newTarget.className = _this.modalClassName;
+      body.append(newTarget);
+      _this.mount(".".concat(_this.modalClassName), _this);
+    });
+    _defineProperty(_this, "onMount", function () {
+      var plugins = _this.opts.plugins || [];
+      plugins.forEach(function (pluginId) {
+        var plugin = _this.filerobot.getPlugin(pluginId);
+        if (plugin) {
+          plugin.mount(_this, plugin);
+        }
+      });
+      if (!_this.opts.disableInformer) {
+        _this.filerobot.use(Informer, {
+          id: "".concat(_this.id, ":Informer"),
+          target: _this
+        });
+      }
+      if (!_this.opts.disableThumbnailGenerator) {
+        _this.filerobot.use(ThumbnailGenerator, {
+          id: "".concat(_this.id, ":ThumbnailGenerator"),
+          thumbnailWidth: _this.opts.thumbnailWidth,
+          waitForThumbnailsBeforeUpload: _this.opts.waitForThumbnailsBeforeUpload,
+          // If we don't block on thumbnails, we can lazily generate them
+          lazy: !_this.opts.waitForThumbnailsBeforeUpload
+        });
+      }
+
+      // Dark Mode / theme
+      _this.darkModeMediaQuery = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+      var isDarkModeOnFromTheStart = _this.darkModeMediaQuery ? _this.darkModeMediaQuery.matches : false;
+      _this.filerobot.log("[Explorer] Dark mode is ".concat(isDarkModeOnFromTheStart ? 'on' : 'off'));
+      _this.setDarkModeCapability(isDarkModeOnFromTheStart);
+      if (_this.opts.theme === 'auto') {
+        _this.darkModeMediaQuery.addListener(_this.handleSystemDarkModeChange);
+      }
+      _this.initEvents();
+    });
+    _defineProperty(_this, "uninstall", function () {
+      if (!_this.opts.disableInformer) {
+        var informer = _this.filerobot.getPlugin("".concat(_this.id, ":Informer"));
+        // Checking if this plugin exists, in case it was removed by filerobot-core
+        // before the Explorer was.
+        if (informer) _this.filerobot.removePlugin(informer);
+      }
+      if (!_this.opts.disableThumbnailGenerator) {
+        var thumbnail = _this.filerobot.getPlugin("".concat(_this.id, ":ThumbnailGenerator"));
+        if (thumbnail) _this.filerobot.removePlugin(thumbnail);
+      }
+      var plugins = _this.opts.plugins || [];
+      plugins.forEach(function (pluginId) {
+        var plugin = _this.filerobot.getPlugin(pluginId);
+        if (plugin) plugin.unmount();
+      });
+      if (_this.opts.theme === 'auto') {
+        _this.darkModeMediaQuery.removeListener(_this.handleSystemDarkModeChange);
+      }
+      if (_this.opts.disablePageScrollWhenModalOpen) {
+        document.body.classList.remove('filerobot-Explorer-isFixed');
+      }
+      _this._getDeletedUrlQueryParams();
+      _this.unmount();
+      _this.removeEvents();
+      // Tmp solution for resetting the loading state, as the latest state of each plugin is cached even after removing the plugin, so this is a workaround till we find a good solution for that.
+      _this.dispatch(explorerPluginLoadingSet(true));
+    });
+    _this.id = PLUGINS_IDS.EXPLORER;
+    _this.title = _this.opts.title || 'Explorer';
+    _this.type = 'orchestrator';
+    _this.modalName = "filerobot-Explorer-".concat(cuid());
+    _this.isDevEnv = filerobot.opts.dev;
+    _this.container = filerobot.opts.container;
+    _this.modalClassName = 'filerobot-modal';
+    _this.defaultLocale = {
+      strings: defaultLocale
+    };
+    var defaultOptions = {
+      target: 'body',
+      trigger: '#filerobot-trigger-button',
+      useAssetsPicker: false,
+      assetsPickerModelTitle: 'explorerTopSectionImportFileTitle',
+      disableFolderSelection: false,
+      hideFolderOptions: false,
+      hideDetailsTab: false,
+      disableDnDActions: false,
+      hideActionBarSelectionButtons: false,
+      inline: false,
+      width: 768,
+      height: 538,
+      thumbnailWidth: 280,
+      thumbnailHeight: 170,
+      waitForThumbnailsBeforeUpload: false,
+      hideUploadButton: false,
+      hideSearch: false,
+      note: null,
+      hint: null,
+      closeModalOnClickOutside: false,
+      preventModalOverlayClickOnUpload: false,
+      closeAfterFinish: false,
+      disableInformer: false,
+      disableThumbnailGenerator: false,
+      disablePageScrollWhenModalOpen: true,
+      animateOpenClose: true,
+      onRequestCloseModal: function onRequestCloseModal() {
+        return _this.closeModal();
+      },
+      browserBackButtonCloseModal: false,
+      disableDownloadButton: false,
+      preventDownloadDefaultBehavior: false,
+      hideDownloadVariationsOption: false,
+      forceDownload: false,
+      hideExportCropPanel: false,
+      theme: 'light',
+      showGlobalRegVariants: false,
+      ExploreViewComponent: null,
+      showMeta: true,
+      // TODO(configs): check if we still need this
+      showBreadcrumbs: true,
+      // TODO(configs): check if we still need this.
+      showSort: true,
+      disableSelectionActions: false,
+      // TODO(configs): check if we still need this.
+      showBar: true,
+      hideDownloadButtonIcon: false,
+      hideHeaderBar: false,
+      showRemoveBackgroundOption: true,
+      hideLeftSideBar: false,
+      facetedSearchEnabled: false,
+      facetedSearchSidebarExpanded: true,
+      activeFacetedSearchMetadataFields: [],
+      onClickUploadButton: function onClickUploadButton() {},
+      hideModalAfterExport: false,
+      defaultFilters: {},
+      // [Deprecated] Deprecated -- TODO:(docs) check type and description
+      defaultSearchQuery: '',
+      // [Deprecated] Deprecated
+      imageEditorMode: IMAGE_EDITOR_MODES.DEFAULT,
+      // Image Editor Mode
+      closeAfterImageEdit: false,
+      // Close the modal after image edit
+      showDragDropPanel: false,
+      selectedListViewCols: [
+      // TODO(configs): check if we still need this as a config.
+      LIST_VIEW_COLS_IDS.TYPE, LIST_VIEW_COLS_IDS.VISIBILITY,
+      // LIST_VIEW_COLS_IDS.STATUS,
+      LIST_VIEW_COLS_IDS.TAGS, LIST_VIEW_COLS_IDS.LABELS, LIST_VIEW_COLS_IDS.LAST_MODIFY],
+      selectedListViewFoldersCols: [
+      // TODO(configs): check if we still need this as a config.
+      LIST_VIEW_FOLDERS_COLS_IDS.VISIBILITY, LIST_VIEW_FOLDERS_COLS_IDS.AMOUNT, LIST_VIEW_FOLDERS_COLS_IDS.LAST_MODIFY],
+      videoTranscoding: {
+        // TODO:(docs) check if this matches our current desc in readme
+        resolution: 'auto',
+        protocol: 'hls',
+        filesIds: []
+      },
+      imageProcessor: {
+        // TODO(configs): check if we still need this.
+        name: '',
+        values: {},
+        filesIds: []
+      },
+      config: {
+        companyName: 'scaleflex',
+        foldersLimit: 200,
+        filesLimit: 50,
+        rootFolderPath: '/',
+        defaultSearchSort: {
+          text: {
+            by: undefined,
+            // just replace the `undefined` with another value acceptable search sort by value if u want to replace the default.
+            order: undefined // just replace the `undefined` with another acceptable search sort order value if u want to replace the default.
+          }
+        },
+        defaultSort: {
+          by: undefined,
+          // DEFAULT_SORT_OPTION.by, just replace the `undefined` with another value acceptable sort by value if u want to replace the default.
+          order: undefined // DEFAULT_SORT_OPTION.order, just replace the `undefined` with another acceptable sort order value if u want to replace the default.
+        },
+        metadata: {
+          model: null,
+          store: {
+            force_filling_metadata_on_upload: false,
+            regional_variants_groups: []
+          }
+        },
+        numberFormatLocale: null,
+        // TODO:(docs) check type and description
+        tagging: {
+          enabled: false,
+          autoTagging: false,
+          suggestedTagsOnly: false,
+          language: 'en',
+          confidence: 60,
+          limit: 10,
+          provider: 'google',
+          suggestionList: []
+        },
+        video: {
+          // TODO:(docs) check type and description
+          compression: {
+            target_resolutions: [],
+            // ['480', '720', '1080', '2160'],
+            target_bitrate: '',
+            // '500',
+            target_folder: '' // '/.internal/videos/compression'
+          },
+          conversion: {
+            target_formats: '',
+            // 'WebM',
+            target_resolution: '',
+            // '480',
+            target_folder: '' // 'internal'
+          },
+          transcoding: {
+            protocol: '' // 'HLS'
+          },
+          enableEmbed: true,
+          redirectToVideoSettingsPage: '' // /settings/project-settings/process-settings/video
+        }
+      },
+      isDownloadUsageRightsEnabled: false,
+      enableAIDescription: false,
+      enableAIEmbed: false,
+      enableFoldersStatsApiRequest: false,
+      enabledManageAccess: false,
+      usersAndTeams: [],
+      galleryRoles: undefined,
+      disableMultipleSelect: false,
+      maxCountOfSelectedFiles: undefined,
+      mutedFilesUuids: [],
+      dismissUrlPathQueryUpdate: false,
+      queryParamPrefix: 'fmaw_',
+      isUploadBarAddMoreButtonHidden: false,
+      layoutType: LAYOUTS_IDS.GRID,
+      views: Object.values(VIEW_IDS),
+      view: VIEW_IDS.FOLDERS,
+      viewItem: null,
+      viewSubItem: null,
+      isFastToken: false,
+      showResumableUploadSwitcher: false,
+      useLoginMode: false,
+      prefilledLoginModeEmail: null,
+      downloadConsent: undefined,
+      restrictedSearchContext: false,
+      hideAddingComment: false,
+      findAssetLocationEnabled: true,
+      disableFiltersAndSearch: false,
+      forceFilters: false,
+      filters: undefined,
+      search: undefined,
+      thumbnailMetadataKeys: [],
+      tags: undefined,
+      permissions: undefined,
+      showScaleflexCopyright: false,
+      disableFileResolutionFallback: false,
+      onImportFromDam: function onImportFromDam() {},
+      showImportFromDamButton: false,
+      defaultFieldKeyOfBulkEditPanel: '',
+      hideDetailsViewButton: false
+    };
+
+    // merge default options with the ones set by user
+    _this.opts = _objectSpread(_objectSpread(_objectSpread({}, defaultOptions), _opts), {}, {
+      filters: _opts.filters ? getMappedFilterValues(_opts.filters) : defaultOptions.filters,
+      views: _opts.views || defaultOptions.views,
+      view: _opts.view || _opts.defaultView || defaultOptions.view,
+      config: _objectSpread(_objectSpread(_objectSpread({}, defaultOptions.config), _opts.config), {}, {
+        tagging: _objectSpread(_objectSpread({}, (_defaultOptions$confi = defaultOptions.config) === null || _defaultOptions$confi === void 0 ? void 0 : _defaultOptions$confi.tagging), (_opts$config = _opts.config) === null || _opts$config === void 0 ? void 0 : _opts$config.tagging),
+        video: _objectSpread(_objectSpread({}, (_defaultOptions$confi2 = defaultOptions.config) === null || _defaultOptions$confi2 === void 0 ? void 0 : _defaultOptions$confi2.video), (_opts$config2 = _opts.config) === null || _opts$config2 === void 0 ? void 0 : _opts$config2.video),
+        metadata: _objectSpread(_objectSpread({}, defaultOptions.metadata), (_opts$config3 = _opts.config) === null || _opts$config3 === void 0 ? void 0 : _opts$config3.metadata)
+      })
+    });
+    _this.i18nInit();
+    _this.superFocus = createSuperFocus();
+    _this.ifFocusedOnFilerobotRecently = false;
+
+    // Timeouts
+    _this.makeExplorerInsidesVisibleAnywayTimeout = null;
+    _this.removeDragOverClassTimeout = null;
+    if (!filerobot.opts.securityTemplateId && !filerobot.opts.sassKey && !_this.opts.useLoginMode) {
+      throw new Error('`securityTemplateId` or `sassKey` property is required in core for working properly.');
+    }
+    return _this;
+  }
+
+  /**
+   * Any state value that doesn't have a proper slice (container) then it will be stored in the common state here.
+   * @param {Object} update - the object with the new values to be updated in the common state.
+   */
+  _inherits(Explorer, _Plugin);
+  return _createClass(Explorer, [{
+    key: "setPluginCommonState",
+    value: function setPluginCommonState(update) {
+      this.dispatch(explorerCommonStateUpdated(update));
+    }
+  }, {
+    key: "_isPasteAndDnDUploadDisabled",
+    value: function _isPasteAndDnDUploadDisabled() {
+      var currentView = selectActiveView(this.getGlobalState());
+      return this.opts.disableDnDActions || ![VIEW_IDS.FOLDERS, VIEW_IDS.ASSETS].includes(currentView);
+    }
+  }, {
+    key: "getPluginReducer",
+    value: function getPluginReducer() {
+      return explorerReducer;
+    }
+  }, {
+    key: "dispatchIfDefined",
+    value: function dispatchIfDefined(actionFn, payload) {
+      var payloadType = _typeof(payload);
+      if (payloadType === 'undefined') {
+        return;
+      }
+      if (payloadType === 'object' && !Array.isArray(payload)) {
+        var valuedKeys = Object.keys(payload).filter(function (key) {
+          return typeof payload[key] !== 'undefined';
+        });
+        if (valuedKeys.length > 0) {
+          var definedPayload = {};
+          valuedKeys.forEach(function (key) {
+            definedPayload[key] = payload[key];
+          });
+          this.dispatch(actionFn(definedPayload));
+        }
+        return;
+      }
+      this.dispatch(actionFn(payload));
+    }
+
+    // First time (installing) opts will receive all the opts (default & provided to plugin)
+    // After that (opts-updated) will receive the newOpts only that has provided to setOptions so we are considering this case also
+    // if the value is undefined then don't consider dispatching it for avoiding changing the current state's value inappropriately.
+  }, {
+    key: "passOptsToState",
+    value: function passOptsToState() {
+      var _this$getUrlQueryPara, _metadata$store, _metadata$store2, _config$tagging;
+      var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var isInstall = arguments.length > 1 ? arguments[1] : undefined;
+      if (Object.keys(opts).length === 0) {
+        return;
+      }
+      var config = opts.config || {};
+      var allViews = Object.values(VIEW_IDS);
+      var allLayouts = Object.values(LAYOUTS_IDS);
+      var currentView = isInstall && ((_this$getUrlQueryPara = this.getUrlQueryParam(FMAW_URL_QUERY_PARAMS.VIEW, opts.view || opts.defaultView)) === null || _this$getUrlQueryPara === void 0 ? void 0 : _this$getUrlQueryPara.toUpperCase());
+      var viewState = _objectSpread({
+        layout: opts.layoutType ? allLayouts.includes(opts.layoutType) && opts.layoutType || LAYOUTS_IDS.GRID : undefined,
+        list: opts.views ? opts.views.filter(function (viewId) {
+          return allViews.includes(viewId);
+        }) : undefined
+      }, currentView && {
+        activeView: opts.views ? opts.views.includes(currentView) && currentView || opts.views[0] || VIEW_IDS.FOLDERS : undefined
+      });
+      this.dispatchIfDefined(viewsStateUpdated, viewState);
+      this.dispatchIfDefined(foldersStateUpdated, _objectSpread({
+        showTree: opts.showFoldersTree && !opts.hideLeftSideBar
+      }, !selectBaseFolderPath(this.getGlobalState()) && {
+        baseFolderPath: config.rootFolderPath
+      }));
+      this.dispatchIfDefined(detailsViewToggled, opts.showDetailsView);
+      this.dispatchIfDefined(facetedSearchSidebarToggled, opts.facetedSearchSidebarExpanded);
+      this.dispatchIfDefined(facetedSearchToggled, opts.facetedSearchEnabled);
+      var _config$metadata = config.metadata,
+        metadata = _config$metadata === void 0 ? {} : _config$metadata,
+        defaultSort = config.defaultSort;
+      var newMetaRegionalGroups = (_metadata$store = metadata.store) === null || _metadata$store === void 0 ? void 0 : _metadata$store.regional_variants_groups;
+      this.dispatchIfDefined(metadataUpdated, {
+        activeFacetedSearchMetadataFields: opts.activeFacetedSearchMetadataFields,
+        metaDataModel: metadata.model,
+        metaRegionalGroups: newMetaRegionalGroups,
+        forceFillingMetadataOnUpload: (_metadata$store2 = metadata.store) === null || _metadata$store2 === void 0 ? void 0 : _metadata$store2.force_filling_metadata_on_upload,
+        showTags: ((_config$tagging = config.tagging) === null || _config$tagging === void 0 ? void 0 : _config$tagging.enabled) && isMetaRegionalLanguagesGroupExists(newMetaRegionalGroups)
+      });
+      var galleryRoles = opts.galleryRoles;
+      if (Array.isArray(galleryRoles) && galleryRoles.length) {
+        var roles = _toConsumableArray(galleryRoles);
+        roles.sort(function (a, b) {
+          return +a.id - +b.id;
+        });
+        this.dispatchIfDefined(accessRolesUpdated, {
+          accessRoles: roles
+        });
+      }
+      if (isInstall) {
+        var _viewState$activeView;
+        var _ref9 = defaultSort || {},
+          by = _ref9.by,
+          order = _ref9.order;
+        var isValidSortBy = checkIsValidSortBy(by);
+        var isValidSortOrder = checkIsValidSortOrder(order);
+        var newSort = {
+          sortBy: isValidSortBy ? by : undefined,
+          order: isValidSortOrder ? order : undefined
+        };
+        if (isValidSortBy || isValidSortOrder) {
+          this.dispatchIfDefined(filesSortingUpdated, newSort);
+          this.dispatchIfDefined(foldersSortingUpdated, newSort);
+
+          // Change the default constant of sorting value to the provided default one to be always reused wherever needed.
+          if (isValidSortBy) {
+            DEFAULT_SORT_OPTION.by = by;
+          }
+          if (isValidSortOrder) {
+            DEFAULT_SORT_OPTION.order = order;
+          }
+        }
+        this.replaceUrlInBrowser(this._getUpdatedUrlQueryParams([FMAW_URL_QUERY_PARAMS.VIEW], [(_viewState$activeView = viewState.activeView) === null || _viewState$activeView === void 0 ? void 0 : _viewState$activeView.toLowerCase()]));
+      }
+    }
+  }, {
+    key: "passStorageToState",
+    value: function passStorageToState() {}
+  }, {
+    key: "install",
+    value: function install() {
+      this.passOptsToState(this.opts, true);
+      this.passStorageToState();
+      var _this$opts = this.opts,
+        inline = _this$opts.inline,
+        closeAfterFinish = _this$opts.closeAfterFinish;
+      if (inline && closeAfterFinish) {
+        throw new Error('[Explorer] `closeAfterFinish: true` cannot be used on an inline Explorer, because an inline Explorer cannot be closed at all. Either set `inline: false`, or disable the `closeAfterFinish` option.');
+      }
+      var allowMultipleUploads = this.filerobot.opts.allowMultipleUploads;
+      if (allowMultipleUploads && closeAfterFinish) {
+        this.filerobot.log('[Explorer] When using `closeAfterFinish`, we recommended setting the `allowMultipleUploads` option to `false` in the Filerobot constructor.', 'warning');
+      }
+      var target = this.opts.target;
+      if (target) {
+        this.mount(target, this);
+      } else {
+        this.mountTargetModal();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/createElement(Router, null, /*#__PURE__*/createElement(ExplorerUI));
+    }
+  }]);
+}(Plugin);
+export default Explorer;