@scaleflex/widget-explorer 0.0.1

package/lib/slices/views.slice.js

@@ -0,0 +1,346 @@
+var _excluded = ["searchQuery", "offset", "cachedViewQueries", "sorting"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { VIEW_IDS, PLUGINS_IDS, LAYOUTS_IDS, FMAW_URL_VIEW_QUERY_PARAMS, FMAW_URL_QUERY_PARAMS } from '@scaleflex/widget-utils/lib/constants';
+import { createSlice, isAnyOf } from '@reduxjs/toolkit';
+import { fetchUserAuthState, generateUserKey } from '@scaleflex/widget-core/lib/slices/user.slice';
+import createThunk from '@scaleflex/widget-utils/lib/createThunk';
+import { VIEW_OPTIONS } from '../components/Views/Views.constants';
+import { loadSearchFromOutside, selectIsSimilarSearchActive, selectSearchQuery, submitSearch, updateSearchQuery, updateSearchSuggestions, searchFilesWithAiText, selectIsAiSearch, selectIsSearchFetchType } from './search.slice';
+import { loadFiltersFromOutside, selectIsFiltersActive, updateFilteredFiles } from './filters.slice';
+import { fetchFoldersPreviews, selectFoldersArray, selectFoldersSortOrder, selectFoldersSortedBy } from './folders.slice';
+import { fetchFiles, selectFilesSortOrder, selectFilesSortedBy } from './files.slice';
+import { SORT_BY, SORT_ORDER } from '../components/common/Sort/Sort.constants';
+import { checkIsValidSearchSortBy, checkIsValidSortOrder } from '../components/common/Sort/Sort.utils';
+var slicePropName = 'views';
+var sliceName = "".concat(PLUGINS_IDS.EXPLORER, "/").concat(slicePropName);
+var initialState = {
+  layout: LAYOUTS_IDS.GRID,
+  activeView: VIEW_IDS.FOLDERS,
+  list: Object.values(VIEW_IDS)
+};
+export var viewCachedFetchFilesQueries = null;
+export var changeViewFetchFilesCachedQueries = function changeViewFetchFilesCachedQueries(newCachedQueries) {
+  viewCachedFetchFilesQueries = newCachedQueries;
+};
+export var changeView = createThunk(async function (_ref, thunkApi) {
+  var _VIEW_OPTIONS$newlyAc;
+  var view = _ref.view,
+    _ref$triggerActivate = _ref.triggerActivate,
+    triggerActivate = _ref$triggerActivate === void 0 ? false : _ref$triggerActivate,
+    activateOptions = _ref.activateOptions,
+    keepFiltersAndSearch = _ref.keepFiltersAndSearch,
+    _ref$fromUrl = _ref.fromUrl,
+    fromUrl = _ref$fromUrl === void 0 ? false : _ref$fromUrl,
+    forceRemoveFiltersAndSearch = _ref.forceRemoveFiltersAndSearch;
+  var state = thunkApi.getState();
+  var filerobot = thunkApi.extra.filerobot;
+  var viewBeforeChange = selectActiveView(state);
+  var newlyActivatedView = viewBeforeChange;
+  var isDiffView = viewBeforeChange !== view;
+  if (isDiffView) {
+    var allViews = selectAllViews(state);
+    var _filerobot$getPlugin = filerobot.getPlugin(PLUGINS_IDS.EXPLORER),
+      _filerobot$getPlugin$ = _filerobot$getPlugin.opts,
+      disableFiltersAndSearch = _filerobot$getPlugin$.disableFiltersAndSearch,
+      forceFilters = _filerobot$getPlugin$.forceFilters,
+      updateViewQueryInUrl = _filerobot$getPlugin.updateViewQueryInUrl;
+    if (!allViews.includes(view)) {
+      return;
+    }
+
+    // We are almost don't need any running/pending request if we have changed the view to avoid issues with views changing
+    // by returning back to some view again due to late request's response that's received after switching to another view..
+    thunkApi.abortAllInProgressAsyncThunks();
+    changeViewFetchFilesCachedQueries(null);
+    var dontRemoveFiltersAndSearch = (disableFiltersAndSearch || forceFilters || keepFiltersAndSearch || fromUrl) && !forceRemoveFiltersAndSearch;
+    thunkApi.dispatch(viewChanged({
+      view: view,
+      keepFiltersAndSearch: dontRemoveFiltersAndSearch
+    }));
+    newlyActivatedView = selectActiveView(thunkApi.getState());
+    var isViewChanged = viewBeforeChange !== newlyActivatedView; // double checking that the view is changed, as there is possibility for otherwise if wrong view id is provided
+
+    // Triggered here for making sure it's triggered after changing the view, and avoid extrareducers/issues that handled after calling viewChanged.
+    filerobot.emit('view-change-request', newlyActivatedView, isDiffView);
+    if (isViewChanged) {
+      if (!fromUrl) {
+        updateViewQueryInUrl({
+          view: newlyActivatedView,
+          keysToDelete: Object.values(dontRemoveFiltersAndSearch ? FMAW_URL_VIEW_QUERY_PARAMS : FMAW_URL_QUERY_PARAMS)
+        });
+      }
+      filerobot.emit('view-changed', newlyActivatedView);
+    }
+  } else {
+    filerobot.emit('view-change-request', newlyActivatedView, isDiffView);
+  }
+  if (triggerActivate && typeof ((_VIEW_OPTIONS$newlyAc = VIEW_OPTIONS[newlyActivatedView]) === null || _VIEW_OPTIONS$newlyAc === void 0 ? void 0 : _VIEW_OPTIONS$newlyAc.activateAction) === 'function') {
+    thunkApi.dispatch(loadFiltersFromOutside({
+      fromUrl: fromUrl
+    }));
+    thunkApi.dispatch(loadSearchFromOutside({
+      fromUrl: fromUrl
+    }));
+    thunkApi.dispatch(VIEW_OPTIONS[newlyActivatedView].activateAction(_objectSpread({
+      skipViewDispatch: true,
+      keepFiltersAndSearch: keepFiltersAndSearch
+    }, activateOptions)));
+  }
+  return newlyActivatedView;
+});
+export var changeLayout = createThunk(function (newLayout, thunkApi) {
+  thunkApi.dispatch(layoutChanged(newLayout));
+  var state = thunkApi.getState();
+  var isFoldersView = selectIsFoldersView(state);
+  if (isFoldersView && newLayout === LAYOUTS_IDS.GRID) {
+    // If the first folder of current loaded folders doesn't contain value for previews property
+    // means no previews request triggered before, so we are triggering it now.
+    // Also if the sort of files & folders are not the same, while we are changing the layout from list to grid...
+    // then no need to trigger folder previews request cause we're going to refetch the folders with a unified sort with previews.
+    var folders = selectFoldersArray(state) || [];
+    var isFilesAndFoldersSortDifferent = selectFoldersSortedBy(state) !== selectFilesSortedBy(state) || selectFoldersSortOrder(state) !== selectFilesSortOrder(state);
+    if (folders.length > 0 && !folders[0].previews && !isFilesAndFoldersSortDifferent) {
+      thunkApi.dispatch(fetchFoldersPreviews({
+        abortSignal: thunkApi.signal
+      }));
+    }
+  }
+});
+export var activateViewFromOutside = createThunk(function (_ref2, thunkApi) {
+  var _currentView$checkVis;
+  var _ref2$fromUrl = _ref2.fromUrl,
+    fromUrl = _ref2$fromUrl === void 0 ? false : _ref2$fromUrl;
+  var dispatch = thunkApi.dispatch,
+    getState = thunkApi.getState,
+    filerobot = thunkApi.extra.filerobot;
+  var _filerobot$getPlugin2 = filerobot.getPlugin(PLUGINS_IDS.EXPLORER),
+    getUrlQueryParam = _filerobot$getPlugin2.getUrlQueryParam,
+    opts = _filerobot$getPlugin2.opts,
+    checkUserPermissions = _filerobot$getPlugin2.checkUserPermissions,
+    i18n = _filerobot$getPlugin2.i18n,
+    info = _filerobot$getPlugin2.info;
+  var view = opts.view,
+    viewItem = opts.viewItem,
+    viewSubItem = opts.viewSubItem,
+    views = opts.views,
+    defaultView = opts.defaultView,
+    _opts$isRecursiveFetc = opts.isRecursiveFetch,
+    isRecursiveFetch = _opts$isRecursiveFetc === void 0 ? false : _opts$isRecursiveFetc;
+  var activeView = selectActiveView(getState());
+  var viewOptions = {
+    id: view || defaultView || activeView,
+    itemToOpen: viewItem,
+    subItemToOpen: viewSubItem,
+    isRecursive: isRecursiveFetch
+  };
+  if (fromUrl) {
+    var _getUrlQueryParam;
+    var viewId = ((_getUrlQueryParam = getUrlQueryParam(FMAW_URL_QUERY_PARAMS.VIEW)) === null || _getUrlQueryParam === void 0 ? void 0 : _getUrlQueryParam.toUpperCase()) || viewOptions.id;
+    viewOptions = {
+      id: viewId,
+      itemToOpen: getUrlQueryParam(FMAW_URL_QUERY_PARAMS.VIEW_ITEM) || viewId === viewOptions.id && viewOptions.itemToOpen,
+      subItemToOpen: getUrlQueryParam(FMAW_URL_QUERY_PARAMS.VIEW_SUB_ITEM) || viewId === viewOptions.id && viewOptions.subItemToOpen,
+      fromUrl: true,
+      isRecursive: parseInt(getUrlQueryParam(FMAW_URL_QUERY_PARAMS.VIEW_RECURSIVE), 10) === 1
+    };
+  }
+  if (viewOptions.itemToOpen && (viewOptions.itemToOpen === '/.internal' || viewOptions.itemToOpen.startsWith('/.internal/'))) {
+    info(i18n('explorerInvalidPathInfo'), 'warning');
+    viewOptions.itemToOpen = '/';
+  }
+  var currentView = VIEW_OPTIONS[viewOptions.id];
+  var isVisibleView = currentView && views.includes(viewOptions.id.toUpperCase()) && (!fromUrl || !currentView.checkVisibility || ((_currentView$checkVis = currentView.checkVisibility) === null || _currentView$checkVis === void 0 ? void 0 : _currentView$checkVis.call(currentView, {
+    checkUserPermissions: checkUserPermissions
+  })));
+  if (isVisibleView) {
+    return dispatch(changeView({
+      triggerActivate: true,
+      view: viewOptions.id,
+      activateOptions: viewOptions,
+      fromUrl: fromUrl
+    }));
+  }
+  info(i18n('explorerInvalidViewProvided'), 'warning');
+  var activeViewId = selectActiveView(thunkApi.getState());
+  return dispatch(changeView({
+    triggerActivate: true,
+    view: activeViewId,
+    fromUrl: fromUrl
+  }));
+});
+export var searchOrListViewFiles = createThunk(function () {
+  var _extra$filerobot$getP, _extra$filerobot$getP2, _defaultSearchSort$te, _defaultSearchSort$te2;
+  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    searchQuery = _ref3.searchQuery,
+    offset = _ref3.offset,
+    cachedViewQueries = _ref3.cachedViewQueries,
+    sorting = _ref3.sorting,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  var thunkApi = arguments.length > 1 ? arguments[1] : undefined;
+  var _rest$applyActiveView = rest.applyActiveViewItemCheck,
+    applyActiveViewItemCheck = _rest$applyActiveView === void 0 ? true : _rest$applyActiveView;
+  var dispatch = thunkApi.dispatch,
+    getState = thunkApi.getState,
+    extra = thunkApi.extra;
+  var state = getState();
+  if (applyActiveViewItemCheck && !selectActiveViewItem(state)) {
+    return;
+  }
+  var currentSearchQuery = selectSearchQuery(state);
+  var isAiSearch = selectIsAiSearch(state);
+  var isAssetsView = selectIsAssetsView(state);
+  if (isAiSearch && isAssetsView) {
+    return dispatch(searchFilesWithAiText({
+      searchQuery: currentSearchQuery
+    }));
+  }
+  var isSimilarSearchActive = selectIsSimilarSearchActive(state);
+  if (isSimilarSearchActive) {
+    return;
+  }
+
+  // If no search query at all then no need to trigger search request instead trigger fetchFiles for listing.
+  var isNoSearchAtAll = !searchQuery && !currentSearchQuery;
+  if (isNoSearchAtAll) {
+    var defaultOffset = rest.replaceOldFiles === false ? undefined : 0;
+    return dispatch(fetchFiles(_objectSpread({
+      offset: offset !== null && offset !== void 0 ? offset : defaultOffset,
+      cachedViewQueries: cachedViewQueries,
+      sorting: sorting
+    }, rest)));
+  }
+
+  // exact and extended search
+  var _ref4 = (extra === null || extra === void 0 ? void 0 : (_extra$filerobot$getP = extra.filerobot.getPlugin(PLUGINS_IDS.EXPLORER)) === null || _extra$filerobot$getP === void 0 ? void 0 : (_extra$filerobot$getP2 = _extra$filerobot$getP.opts) === null || _extra$filerobot$getP2 === void 0 ? void 0 : _extra$filerobot$getP2.config) || {},
+    defaultSearchSort = _ref4.defaultSearchSort;
+  var defaultSearchSortBy = checkIsValidSearchSortBy(defaultSearchSort === null || defaultSearchSort === void 0 ? void 0 : (_defaultSearchSort$te = defaultSearchSort.text) === null || _defaultSearchSort$te === void 0 ? void 0 : _defaultSearchSort$te.by) ? defaultSearchSort.text.by : SORT_BY.RELEVANCE;
+  var defaultSearchSortOrder = checkIsValidSortOrder(defaultSearchSort === null || defaultSearchSort === void 0 ? void 0 : (_defaultSearchSort$te2 = defaultSearchSort.text) === null || _defaultSearchSort$te2 === void 0 ? void 0 : _defaultSearchSort$te2.order) ? defaultSearchSort.text.order : SORT_ORDER.DSC;
+  var isSearchedBefore = selectIsSearchFetchType(state);
+  var searchArgs = {
+    searchQuery: searchQuery || currentSearchQuery,
+    cachedViewQueries: cachedViewQueries,
+    sorting: isSearchedBefore ? sorting : "".concat(defaultSearchSortBy, ":").concat(defaultSearchSortOrder)
+  };
+  return dispatch(submitSearch(searchArgs));
+});
+export var resetSearchAndFiltersMode = createThunk(function (_, thunkApi) {
+  thunkApi.dispatch(updateFilteredFiles({
+    filters: {},
+    dismissApiCall: true,
+    noInformer: true
+  }));
+  thunkApi.dispatch(updateSearchQuery({
+    query: '',
+    noInformer: true
+  }));
+  thunkApi.dispatch(updateSearchSuggestions({
+    filters: [],
+    tags: [],
+    dismissApiCall: true,
+    noInformer: true
+  }));
+});
+var viewsSlice = createSlice({
+  name: sliceName,
+  initialState: initialState,
+  reducers: {
+    viewChanged: function viewChanged(state, action) {
+      var newView = action.payload.view;
+      if (newView === state.activeView) {
+        return state;
+      }
+      return _objectSpread(_objectSpread({}, state), {}, {
+        activeView: newView
+      });
+    },
+    viewsChanged: function viewsChanged(state, action) {
+      var newViews = action.payload.views || state.list;
+      return _objectSpread(_objectSpread({}, state), {}, {
+        list: newViews
+      });
+    },
+    layoutChanged: function layoutChanged(state, action) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        layout: action.payload
+      });
+    },
+    viewsStateUpdated: function viewsStateUpdated(state, action) {
+      return _objectSpread(_objectSpread({}, state), action.payload);
+    }
+  },
+  extraReducers: function extraReducers(builder) {
+    builder.addMatcher(isAnyOf(generateUserKey.fulfilled, fetchUserAuthState.fulfilled), viewsSlice.caseReducers.viewsChanged);
+  }
+});
+var _viewsSlice$actions = viewsSlice.actions,
+  viewChanged = _viewsSlice$actions.viewChanged,
+  viewsChanged = _viewsSlice$actions.viewsChanged,
+  layoutChanged = _viewsSlice$actions.layoutChanged,
+  viewsStateUpdated = _viewsSlice$actions.viewsStateUpdated;
+export { viewChanged, viewsChanged, layoutChanged, viewsStateUpdated };
+export var selectViewsState = function selectViewsState(state) {
+  var _state$PLUGINS_IDS$EX;
+  return ((_state$PLUGINS_IDS$EX = state[PLUGINS_IDS.EXPLORER]) === null || _state$PLUGINS_IDS$EX === void 0 ? void 0 : _state$PLUGINS_IDS$EX[slicePropName]) || initialState;
+};
+export var selectActiveView = function selectActiveView(state) {
+  return selectViewsState(state).activeView;
+};
+var checkViewActivation = function checkViewActivation(state, viewId) {
+  return selectActiveView(state) === viewId;
+};
+var checkViewLayoutActivation = function checkViewLayoutActivation(state, layout) {
+  return selectViewLayout(state) === layout;
+};
+export var selectAllViews = function selectAllViews(state) {
+  return selectViewsState(state).list;
+};
+var checkViewAvailability = function checkViewAvailability(state, viewId) {
+  return selectAllViews(state).includes(viewId);
+};
+export var selectIsAssetsViewAvailable = function selectIsAssetsViewAvailable(state) {
+  return checkViewAvailability(state, VIEW_IDS.ASSETS);
+};
+export var selectIsFoldersViewAvailable = function selectIsFoldersViewAvailable(state) {
+  return checkViewAvailability(state, VIEW_IDS.FOLDERS);
+};
+export var selectIsSearchMode = function selectIsSearchMode(state) {
+  return Boolean(selectSearchQuery(state));
+};
+export var selectIsSearchOrFiltersMode = function selectIsSearchOrFiltersMode(state) {
+  return selectIsSearchMode(state) || selectIsFiltersActive(state);
+};
+export var selectIsAssetsView = function selectIsAssetsView(state) {
+  return checkViewActivation(state, VIEW_IDS.ASSETS);
+};
+export var selectIsFoldersView = function selectIsFoldersView(state) {
+  return checkViewActivation(state, VIEW_IDS.FOLDERS);
+};
+export var selectViewLayout = function selectViewLayout(state) {
+  return selectViewsState(state).layout;
+};
+export var selectIsListLayout = function selectIsListLayout(state) {
+  return checkViewLayoutActivation(state, LAYOUTS_IDS.LIST);
+};
+export var selectIsGridLayout = function selectIsGridLayout(state) {
+  return checkViewLayoutActivation(state, LAYOUTS_IDS.GRID);
+};
+export var selectIsTilesLayout = function selectIsTilesLayout(state) {
+  return checkViewLayoutActivation(state, LAYOUTS_IDS.TILES);
+};
+export var selectActiveViewItem = function selectActiveViewItem(state) {
+  var _VIEW_OPTIONS$activeV, _VIEW_OPTIONS$activeV2;
+  var activeView = selectActiveView(state);
+  if (!activeView) {
+    return null;
+  }
+  var activeViewItem = (_VIEW_OPTIONS$activeV = VIEW_OPTIONS[activeView]) === null || _VIEW_OPTIONS$activeV === void 0 ? void 0 : (_VIEW_OPTIONS$activeV2 = _VIEW_OPTIONS$activeV.activeItemSelector) === null || _VIEW_OPTIONS$activeV2 === void 0 ? void 0 : _VIEW_OPTIONS$activeV2.call(_VIEW_OPTIONS$activeV, state);
+  return activeViewItem || null;
+};
+export default viewsSlice.reducer;

package/lib/style.scss

@@ -0,0 +1,265 @@
+@import '@scaleflex/widget-core/lib/_utils.scss';
+@import '@scaleflex/widget-core/lib/_variables.scss';
+@import '@scaleflex/widget-common/lib/style.scss';
+// TODO: Remove this import from provider-views and from the 2nd file (LabelsListSkeleton.jsx) then remove it from package.json
+@import '@scaleflex/widget-provider-views/lib/style.scss';
+
+// Component-specific css imports
+@import './components/CropPanel/index.scss';
+@import './components/TopBar/index.scss';
+
+
+// ExplorerWrapper.jsx |>>
+
+@keyframes filerobot-Explorer-fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes filerobot-Explorer-fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes filerobot-Explorer-slideDownAndFadeIn {
+  from {
+    transform: translate3d(-50%, -70%, 0);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(-50%, -50%, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes filerobot-Explorer-slideDownAndFadeIn--small {
+  from {
+    transform: translate3d(0, -20%, 0);
+    opacity: 0;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes filerobot-Explorer-slideUpFadeOut {
+  from {
+    transform: translate3d(-50%, -50%, 0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translate3d(-50%, -70%, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes filerobot-Explorer-slideUpFadeOut--small {
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translate3d(0, -20%, 0);
+    opacity: 0;
+  }
+}
+
+// End Transitions //
+
+.filerobot-Explorer--modal {
+  z-index: $zIndex-highest;
+}
+
+.filerobot-Explorer-assets-picker-modal {
+  z-index: $zIndex-modal;
+}
+
+.filerobot-Explorer--modal[aria-hidden=true] {
+  display: none;
+}
+
+.filerobot-Explorer--modal.filerobot-Explorer--animateOpenClose>.filerobot-Explorer-inner {
+  animation: filerobot-Explorer-slideDownAndFadeIn--small 0.3s cubic-bezier(0, 0, .2, 1);
+
+  @media #{$screen-medium} {
+    animation: filerobot-Explorer-slideDownAndFadeIn 0.3s cubic-bezier(0, 0, .2, 1);
+  }
+}
+
+.filerobot-Explorer--modal.filerobot-Explorer--animateOpenClose>.filerobot-Explorer-overlay {
+  animation: filerobot-Explorer-fadeIn 0.3s cubic-bezier(0, 0, .2, 1);
+}
+
+.filerobot-Explorer--modal.filerobot-Explorer--animateOpenClose.filerobot-Explorer--isClosing>.filerobot-Explorer-inner {
+  animation: filerobot-Explorer-slideUpFadeOut--small 0.3s cubic-bezier(0, 0, .2, 1);
+
+  @media #{$screen-medium} {
+    animation: filerobot-Explorer-slideUpFadeOut 0.3s cubic-bezier(0, 0, .2, 1);
+  }
+}
+
+.filerobot-Explorer--modal.filerobot-Explorer--animateOpenClose.filerobot-Explorer--isClosing>.filerobot-Explorer-overlay {
+  animation: filerobot-Explorer-fadeOut 0.3s cubic-bezier(0, 0, .2, 1);
+}
+
+.filerobot-Explorer--modal .filerobot-Explorer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(79, 98, 118, 0.3);
+  z-index: $zIndex-2;
+  outline: none;
+}
+
+.filerobot-Explorer-inner {
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+  outline: none;
+  border: 1px solid $gray-200;
+  border-radius: 5px;
+
+  .filerobot-size--md & {
+    min-height: auto;
+  }
+
+  .filerobot-Explorer--modal & {
+    z-index: $zIndex-3;
+  }
+
+  [data-filerobot-theme="dark"] & {
+    background-color: $gray-900;
+  }
+}
+
+.filerobot-Explorer-innerWrap {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  border-radius: 5px;
+  opacity: 0;
+  overflow: hidden;
+  background: $white;
+}
+
+.filerobot-Explorer-close {
+  @include clear-focus;
+  display: block;
+  position: absolute;
+  top: -33px;
+  right: -2px;
+  cursor: pointer;
+  color: rgba($white, 0.9);
+  font-size: 27px;
+  z-index: $zIndex-5;
+
+  @media #{$screen-medium} {
+    font-size: 35px;
+    top: -10px;
+    right: -35px;
+  }
+}
+
+.filerobot-Explorer--isInnerWrapVisible .filerobot-Explorer-innerWrap {
+  opacity: 1;
+}
+
+.filerobot-Explorer--modal .filerobot-Explorer-inner {
+  position: fixed;
+  top: 5px;
+  left: 0;
+  right: 0;
+  bottom: 15px;
+  border: none;
+
+  @media #{$screen-medium} {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 5px 15px 4px rgba($black, 0.15);
+  }
+}
+
+.filerobot-Explorer--move-informer {
+  .filerobot.filerobot-Informer {
+    bottom: 80px;
+  }
+}
+
+// ExplorerWrapper.jsx <<|
+
+// Added to body to prevent the page from scrolling when Modal is open
+// packages/@scaleflex/widget-explorer/src/index.js |>>
+.filerobot-Explorer-isFixed {
+  overflow: hidden;
+  height: 100vh;
+}
+
+// <<|
+
+// packages/@scaleflex/widget-explorer/src/components/AddFilesPanel/AddFiles.jsx
+.filerobot-Explorer-input {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+// <<|
+
+
+.filerobot-Explorer-TopBar-leftSide {
+  height: 100%;
+  margin-right: 12px;
+}
+
+// <<|
+
+// Is used for overriding ui-kit Tag styles
+
+.filerobot-Explorer-Search-filtersInside-newFilterChip {
+  margin-top: 0;
+  margin-right: 8px;
+  outline: none;
+
+  * {
+    outline: none;
+  }
+}
+
+// <<|
+
+
+// Fix of TagField fullWidth
+// packages/@scaleflex/widget-common/src/FormControl.jsx
+.filerobot-common-FormControl .SfxTagField-listWrapper {
+  width: 100%;
+}
+
+.sort-menuitem.SfxMenuItem-root {
+  .SfxMenuItem-Icon.SfxMenuItem-Actions {
+    display: none;
+  }
+}
+
+// <<|