@scaleflex/widget-explorer 4.4.0 → 4.5.0

package/lib/components/AssetsList/index.js

@@ -0,0 +1,266 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useRef, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import classNames from 'classnames';
+import { useContextMenu } from '@scaleflex/widget-core/lib/hooks';
+import { LAYOUTS_IDS, PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import findIndex from '@scaleflex/widget-utils/lib/findIndex';
+import GridView from './GridView';
+import ListView from './ListView';
+import EmptyViewPlaceholder from '../EmptyViewPlaceholder';
+import StyledExplorer from '../../Explorer.styled';
+import { selectionsCleared, toggleSelection } from '../../slices/selections.slice';
+import { useExplorer, useIsSmallScreen } from '../../hooks';
+import { selectContainerWidth } from '../../slices/common.slice';
+import { selectTopSectionHeight } from '../../slices/topSection.slice';
+import { fileWindowUpdated } from '../../slices/panels.slice';
+import { openFolderByPath, selectIsFoldersLoading, selectOpenedFolders } from '../../slices/folders.slice';
+import { selectIsFoldersView, selectViewLayout } from '../../slices/views.slice';
+import ScrollToTop from './ScrollToTop';
+import { selectIsCurrentFilesLoading, selectCurrentFilesUuids } from '../../slices/files.slice';
+import { getItemByUuid } from '../../thunks/items.thunks';
+import DnD from '../DnD';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var mouseClickTimeout = null;
+var AssetsList = function AssetsList(_ref) {
+  var foldersUuids = _ref.foldersUuids,
+    customFilesUuids = _ref.filesUuids,
+    hideAccordionHeader = _ref.hideAccordionHeader,
+    _ref$sortProps = _ref.sortProps,
+    sortProps = _ref$sortProps === void 0 ? {} : _ref$sortProps,
+    _ref$noTopMargin = _ref.noTopMargin,
+    noTopMargin = _ref$noTopMargin === void 0 ? false : _ref$noTopMargin,
+    ignoreEmptyFolder = _ref.ignoreEmptyFolder,
+    fetchNextFiles = _ref.fetchNextFiles,
+    fetchNextFolders = _ref.fetchNextFolders,
+    isInitialLoading = _ref.isInitialLoading,
+    _ref$isDraggingOver = _ref.isDraggingOver,
+    isDraggingOver = _ref$isDraggingOver === void 0 ? false : _ref$isDraggingOver,
+    _ref$emptyViewPlaceho = _ref.emptyViewPlaceholderData,
+    emptyViewPlaceholderData = _ref$emptyViewPlaceho === void 0 ? {} : _ref$emptyViewPlaceho,
+    _ref$dndProps = _ref.dndProps,
+    dndProps = _ref$dndProps === void 0 ? {
+      disableDrop: false,
+      disableDrag: false,
+      draggable: false
+    } : _ref$dndProps;
+  var dispatch = useDispatch();
+  var toggleContextMenu = useContextMenu();
+  var isWidgetSmallSize = useIsSmallScreen();
+  var _useExplorer = useExplorer(),
+    checkUserPermissions = _useExplorer.checkUserPermissions,
+    opts = _useExplorer.opts;
+  var containerWidth = useSelector(selectContainerWidth);
+  var topSectionHeight = useSelector(selectTopSectionHeight);
+  var openedFolders = useSelector(selectOpenedFolders);
+  var viewLayout = useSelector(selectViewLayout);
+  var isFoldersView = useSelector(selectIsFoldersView);
+  var filesUuids = useSelector(function (state) {
+    return customFilesUuids || selectCurrentFilesUuids(state);
+  });
+  var isFoldersLoading = useSelector(function (state) {
+    return isInitialLoading || selectIsFoldersLoading(state);
+  });
+  var isFilesLoading = useSelector(function (state) {
+    return isInitialLoading || selectIsCurrentFilesLoading(state);
+  });
+  var useAssetsPicker = opts.useAssetsPicker;
+  var isLoading = isFoldersLoading || isFilesLoading;
+  var assetListRef = useRef();
+  var foldersLength = (foldersUuids === null || foldersUuids === void 0 ? void 0 : foldersUuids.length) || 0;
+  var filesLength = filesUuids.length;
+  var hasFolders = foldersLength > 0;
+  var hasFiles = filesLength > 0;
+  var hasItems = hasFolders || hasFiles;
+
+  // const itemIconString = props.getItemIcon()
+  var className = classNames('filerobot-ProviderBrowserItem'
+  // { 'with-meta': props.showMeta && props.type !== 'folder' },
+  // { 'filerobot-ProviderBrowserItem--selected': props.isChecked }
+  // to be decided as we should support video preview in v3
+  // { 'filerobot-ProviderBrowserItem--noPreview': itemIconString === 'video' },
+  // { 'filerobot-ProviderBrowserItem--beingRenamed': props.renameItemFor && props.renameItemFor === props.id }
+  );
+  var getItemsContainerWidth = useCallback(function () {
+    var _assetListRef$current;
+    return assetListRef ? (_assetListRef$current = assetListRef.current) === null || _assetListRef$current === void 0 ? void 0 : _assetListRef$current.getBoundingClientRect().width : containerWidth;
+  }, [containerWidth]);
+  var openFolderOnClick = useCallback(function (folder) {
+    clearTimeout(mouseClickTimeout);
+    mouseClickTimeout = null;
+    dispatch(openFolderByPath({
+      folderPath: folder.path
+    }));
+  }, []);
+  var navigateToItem = useCallback(function (event, navigatedItemIndexOffset) {
+    var _document$activeEleme, _document$activeEleme2;
+    if (!event || !navigatedItemIndexOffset) {
+      return;
+    }
+    var lastFocusedItemUuid = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : (_document$activeEleme2 = _document$activeEleme.dataset) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.filerobotFocusableUuid;
+    if (!lastFocusedItemUuid) {
+      return;
+    }
+    event.preventDefault();
+    var _dispatch = dispatch(getItemByUuid(lastFocusedItemUuid)),
+      isFolder = _dispatch.isFolder,
+      item = _dispatch.item;
+    if (navigatedItemIndexOffset === 'enter') {
+      return isFolder ? openFolderOnClick === null || openFolderOnClick === void 0 ? void 0 : openFolderOnClick(item) : dispatch(fileWindowUpdated(lastFocusedItemUuid));
+    }
+    var items = isFolder ? foldersUuids : filesUuids;
+    var navigatedItemIndex = findIndex(items, function (i) {
+      return i === lastFocusedItemUuid;
+    }) + navigatedItemIndexOffset;
+    var navigatedItemUuid;
+    if (isFolder && navigatedItemIndex >= foldersUuids.length) {
+      navigatedItemUuid = filesUuids[0];
+    } else if (!isFolder && navigatedItemIndex < 0 && hasFolders) {
+      navigatedItemUuid = foldersUuids[foldersUuids.length - 1];
+    } else if (isFolder && navigatedItemIndex < 0 || !isFolder && navigatedItemIndex === filesUuids.length) {
+      return;
+    } else {
+      navigatedItemUuid = items[navigatedItemIndex];
+    }
+    if (navigatedItemUuid) {
+      dispatch(toggleSelection({
+        event: event,
+        itemUuid: navigatedItemUuid
+      }));
+      var _item = assetListRef.current.querySelector("[data-filerobot-focusable-uuid=\"".concat(navigatedItemUuid, "\"]"));
+      if (_item) {
+        _item.focus();
+        _item.scrollIntoViewIfNeeded();
+      }
+    }
+  }, [foldersUuids, filesUuids, openFolderOnClick, toggleSelection]);
+  var handleNavigatingThroughArrows = useCallback(function (e) {
+    var calcIndexOffset = function calcIndexOffset() {
+      return parseInt(getItemsContainerWidth() / e.currentTarget.getBoundingClientRect().width);
+    };
+    var isGridLayout = viewLayout === LAYOUTS_IDS.GRID;
+    var navigatedItemIndexOffset = {
+      ArrowRight: 1,
+      ArrowLeft: -1,
+      ArrowUp: isGridLayout ? -calcIndexOffset() : -1,
+      ArrowDown: isGridLayout ? calcIndexOffset() : 1,
+      Enter: 'enter'
+    };
+    navigateToItem(e, navigatedItemIndexOffset[e.key]);
+  }, [viewLayout, navigateToItem]);
+  var handleNavigatingBack = function handleNavigatingBack(e) {
+    if (e.key === 'Backspace') {
+      var openedDirsLength = openedFolders.length;
+      if (openedDirsLength) {
+        var previousFolder = openedFolders[openedDirsLength - 2];
+        if (previousFolder) {
+          openFolderOnClick(previousFolder);
+        }
+      }
+    }
+  };
+  var handleContextMenuToggle = useCallback(function (event, fileOrFolder) {
+    if (useAssetsPicker) return;
+    var newSelections = dispatch(toggleSelection({
+      event: event,
+      itemUuid: fileOrFolder.uuid,
+      keepSelectionsIfItemExisted: true
+    }));
+    return toggleContextMenu({
+      event: event,
+      foldersUuids: newSelections.foldersUuids || [],
+      filesUuids: newSelections.filesUuids || []
+    });
+  }, []);
+  var resetSelections = function resetSelections(e) {
+    dispatch(selectionsCleared());
+  };
+  var openCurrentFolderContextMenu = function openCurrentFolderContextMenu(event) {
+    if (!checkUserPermissions([PERMISSIONS.LIST_ALL]) || useAssetsPicker || !isFoldersView) {
+      event.preventDefault();
+      return;
+    }
+    dispatch(selectionsCleared());
+    toggleContextMenu({
+      event: event,
+      foldersUuids: [],
+      filesUuids: [],
+      items: null
+    });
+  };
+  var renderLayout = function renderLayout(props) {
+    switch (viewLayout) {
+      case LAYOUTS_IDS.GRID:
+        return /*#__PURE__*/_jsx(GridView, _objectSpread(_objectSpread({}, props), {}, {
+          className: className
+        }));
+      case LAYOUTS_IDS.LIST:
+      case LAYOUTS_IDS.TILES:
+        return /*#__PURE__*/_jsx(ListView, _objectSpread(_objectSpread({}, props), {}, {
+          className: className
+        }));
+      default:
+        throw new Error("There is no such type ".concat(viewLayout));
+    }
+  };
+
+  // TODO: This might cause jumping while we are already scrolled cause there is possibility that folders load before files or the reverse, so we might improve this?
+  // useEffect(() => {
+  //   if (itemsContainerRef?.current) {
+  //     itemsContainerRef.current.scrollTo(0, 0)
+  //   }
+  // }, [isLoading])
+
+  if (!isLoading && !hasItems && !ignoreEmptyFolder) {
+    return /*#__PURE__*/_jsx(EmptyViewPlaceholder, _objectSpread({
+      onContextMenu: openCurrentFolderContextMenu
+    }, emptyViewPlaceholderData));
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(DnD, _objectSpread(_objectSpread({}, dndProps), {}, {
+      children: /*#__PURE__*/_jsx(StyledExplorer.ExplorerBrowserList, {
+        className: "filerobot-ProviderBrowser-list",
+        onClick: resetSelections,
+        onContextMenu: openCurrentFolderContextMenu,
+        role: "listbox"
+        // making <ul> not focusable for firefox
+        ,
+        tabIndex: "-1",
+        ref: assetListRef,
+        onKeyDown: handleNavigatingBack,
+        isWidgetSmallSize: isWidgetSmallSize,
+        topSectionHeight: topSectionHeight,
+        isFoldersView: hasFolders,
+        "data-scroller": "true",
+        isDraggingOver: isDraggingOver,
+        children: renderLayout({
+          handleNavigatingThroughArrows: handleNavigatingThroughArrows,
+          containerWidth: getItemsContainerWidth,
+          openFolderOnClick: openFolderOnClick,
+          hasFolders: hasFolders,
+          hasFiles: hasFiles,
+          foldersUuids: foldersUuids,
+          filesUuids: filesUuids,
+          handleContextMenuToggle: handleContextMenuToggle,
+          hideAccordionHeader: hideAccordionHeader,
+          noTopMargin: noTopMargin,
+          openCurrentFolderContextMenu: openCurrentFolderContextMenu,
+          fetchNextFiles: fetchNextFiles,
+          fetchNextFolders: fetchNextFolders,
+          isFoldersLoading: isFoldersLoading,
+          isFilesLoading: isFilesLoading,
+          sortProps: sortProps,
+          scrollableElem: assetListRef.current
+        })
+      })
+    })), /*#__PURE__*/_jsx(ScrollToTop, {
+      scrollableElem: assetListRef.current
+    })]
+  });
+};
+export default AssetsList;

package/lib/components/AssetsList/relevanceBadge.js

@@ -0,0 +1,15 @@
+import StyledAssetsList from '../AssetsList/AssetsList.styled';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var relevanceBadge = function relevanceBadge(_ref) {
+  var relevance = _ref.relevance,
+    isListView = _ref.isListView,
+    isFileChecked = _ref.isFileChecked;
+  var fileRelevance = Math.floor(relevance * 100);
+  return /*#__PURE__*/_jsxs(StyledAssetsList.FileRelevanceBadge, {
+    $isListView: isListView,
+    $relevance: fileRelevance,
+    isFileChecked: isFileChecked,
+    children: [fileRelevance, "%"]
+  });
+};
+export default relevanceBadge;

package/lib/components/AssetsView/AssetsView.styled.js

@@ -0,0 +1,25 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { PC } from '@scaleflex/widget-common';
+import styled, { css } from 'styled-components';
+import { ModalTitle as SfxModalTitle } from '@scaleflex/ui/core';
+var BrowserBody = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  z-index: 1000;\n  position: relative;\n  display: flex;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref) {
+  var isListLayout = _ref.isListLayout;
+  return isListLayout && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n  "])));
+});
+var ViewBody = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n"])));
+var MainContent = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  display: block;\n  width: 100%;\n  background-color: ", ";\n  border-spacing: 0;\n  overflow-y: auto;\n  list-style: none;\n  padding: 0;\n  -webkit-overflow-scrolling: touch;\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.BackgroundPrimaryStateless];
+});
+var ModalTitle = styled(SfxModalTitle)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  padding: 12px 12px 12px 24px;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  width: 100%;\n  height: 64px;\n  z-index: 1000;\n\n  .SfxModalTitle-Close {\n    top: 12px;\n    right: 12px;\n  }\n\n  .SfxModalTitle-LabelPrimary {\n    line-height: 20px;\n    /* width: 236px; */ // Why we had this width limitation? Commented as it brings issue when used longer title set in config \"assetsPickerModelTitle\"\n    height: 20px;\n  }\n\n"])), function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.BackgroundStateless];
+});
+var Styled = {
+  BrowserBody: BrowserBody,
+  ViewBody: ViewBody,
+  MainContent: MainContent,
+  ModalTitle: ModalTitle
+};
+export default Styled;

package/lib/components/AssetsView/AssetsView.thunks.js

@@ -0,0 +1,64 @@
+import createThunk from '@scaleflex/widget-utils/lib/createThunk';
+import { VIEW_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { changeView, searchOrListViewFiles } from '../../slices/views.slice';
+import { currentFolderUpdated, selectBaseFolderPath } from '../../slices/folders.slice';
+export var activateAssetsView = createThunk(function () {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    disableApiCall = _ref.disableApiCall,
+    _ref$skipViewDispatch = _ref.skipViewDispatch,
+    skipViewDispatch = _ref$skipViewDispatch === void 0 ? false : _ref$skipViewDispatch,
+    _ref$keepFiltersAndSe = _ref.keepFiltersAndSearch,
+    keepFiltersAndSearch = _ref$keepFiltersAndSe === void 0 ? false : _ref$keepFiltersAndSe,
+    _ref$fromUrl = _ref.fromUrl,
+    fromUrl = _ref$fromUrl === void 0 ? false : _ref$fromUrl;
+  var thunkApi = arguments.length > 1 ? arguments[1] : undefined;
+  var dispatch = thunkApi.dispatch;
+  if (!skipViewDispatch) {
+    dispatch(changeView({
+      view: VIEW_IDS.ASSETS,
+      keepFiltersAndSearch: keepFiltersAndSearch,
+      fromUrl: fromUrl
+    }));
+  }
+  var baseFolderPath = selectBaseFolderPath(thunkApi.getState());
+  dispatch(currentFolderUpdated(baseFolderPath));
+  if (!disableApiCall) {
+    var fetchPromise = dispatch(searchOrListViewFiles({
+      cachedViewQueries: {
+        folder: baseFolderPath,
+        recursive: true
+      },
+      skipDispatch: false,
+      withStats: true
+    }));
+
+    // Update the current folder with the whole object instead of only path.
+    fetchPromise === null || fetchPromise === void 0 ? void 0 : fetchPromise.then(function () {
+      var _ref2;
+      var res = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var currentFolder = res && (res.folder || ((_ref2 = res.extendResult || res.quickResult) === null || _ref2 === void 0 ? void 0 : _ref2.folder));
+      if (currentFolder) {
+        dispatch(currentFolderUpdated(currentFolder));
+      }
+    });
+    return fetchPromise;
+  }
+});
+export var fetchNextAssets = createThunk(function () {
+  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    offset = _ref3.offset,
+    sortBy = _ref3.sortBy,
+    sortOrder = _ref3.sortOrder,
+    skipDispatch = _ref3.skipDispatch,
+    skipPendingDispatch = _ref3.skipPendingDispatch;
+  var thunkApi = arguments.length > 1 ? arguments[1] : undefined;
+  return thunkApi.dispatch(searchOrListViewFiles({
+    withStats: false,
+    recursive: true,
+    offset: offset,
+    sorting: sortBy && sortOrder && [sortBy, sortOrder],
+    skipPendingDispatch: skipPendingDispatch,
+    skipDispatch: skipDispatch,
+    replaceOldFiles: false
+  }));
+});

package/lib/components/AssetsView/index.js

@@ -0,0 +1,142 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useExplorer, useIsSmallScreen } from '../../hooks';
+import { detailsViewToggled, selectFileWindowFor, selectIsDetailsViewOpened } from '../../slices/panels.slice';
+import { selectIsAiSearch, searchSimilarFiles, selectIsSimilarSearchActive, selectSearchQuery, selectSimilarSearchOriginalFile } from '../../slices/search.slice';
+import Drawer from '../Drawer';
+import AssetsList from '../AssetsList';
+import DragImage from '../DnD/DragImage';
+import Details from '../Details';
+import TopSection from '../TopSection';
+import Styled from './AssetsView.styled';
+import Sort from '../common/Sort';
+import { selectIsListLayout } from '../../slices/views.slice';
+import { selectIsDraggingMultipleItems } from '../../slices/drag.slice';
+import { fetchNextAssets } from './AssetsView.thunks';
+import TopBarUploadButton from '../common/TopBarUploadButton';
+import { selectIsDraggingOver } from '../../slices/common.slice';
+import { DETAILS_SIDEBAR_WIDTHS } from '../Details/Details.constants';
+import FacetedSearch from '../FacetedSearch';
+import { selectIsFacetedSearchActive } from '../../slices/filters.slice';
+import { selectFilesError } from '../../slices/files.slice';
+import ErroredViewPlaceholder from '../Views/ErroredViewPlaceholder';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var EMPTY_ASSETS_VIEW_PLACEHOLDER_DATA = {
+  titleI18nKey: 'explorerAssetsViewEmptyTitle',
+  hintI18nKeys: ['explorerAssetsViewEmptyHint']
+};
+var AssetsView = function AssetsView() {
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    opts = _useExplorer.opts,
+    i18n = _useExplorer.i18n,
+    requestCloseModal = _useExplorer.requestCloseModal;
+  var isWidgetSmallSize = useIsSmallScreen();
+  var searchQuery = useSelector(selectSearchQuery);
+  var isDetailsViewOpened = useSelector(selectIsDetailsViewOpened);
+  var isListLayout = useSelector(selectIsListLayout);
+  var isDraggingMultipleItems = useSelector(selectIsDraggingMultipleItems);
+  var isDraggingOver = useSelector(selectIsDraggingOver);
+  var isFacetedSearchActive = useSelector(selectIsFacetedSearchActive);
+  var isSimilarSearchActive = useSelector(selectIsSimilarSearchActive);
+  var isAiSearchActive = useSelector(selectIsAiSearch);
+  var similarSearchOriginalFile = useSelector(selectSimilarSearchOriginalFile);
+  var error = useSelector(selectFilesError);
+  var isFileWindowOpened = useSelector(selectFileWindowFor);
+  var showFilters = !isFacetedSearchActive && !isSimilarSearchActive && !isAiSearchActive;
+  var hideHeaderBar = opts.hideHeaderBar,
+    showBar = opts.showBar,
+    ExploreViewComponent = opts.ExploreViewComponent,
+    assetsPickerModelTitle = opts.assetsPickerModelTitle,
+    useAssetsPicker = opts.useAssetsPicker;
+  var applyRightSideNavigation = function applyRightSideNavigation(child, closeFunc) {
+    return /*#__PURE__*/_jsx(Drawer, _objectSpread(_objectSpread({
+      direction: "w",
+      position: "right",
+      closeFn: closeFunc,
+      showCloseIcon: true
+    }, DETAILS_SIDEBAR_WIDTHS), {}, {
+      children: child
+    }));
+  };
+  var renderRightSideNavigation = function renderRightSideNavigation() {
+    return isDetailsViewOpened && applyRightSideNavigation(/*#__PURE__*/_jsx(Details, {}), function () {
+      return dispatch(detailsViewToggled());
+    });
+  };
+  var fetchNextFiles = useCallback(function () {
+    dispatch(fetchNextAssets({
+      skipPendingDispatch: true,
+      skipDispatch: false
+    }));
+  }, []);
+  var onRefresh = function onRefresh() {
+    if (isSimilarSearchActive) {
+      return dispatch(searchSimilarFiles({
+        file: similarSearchOriginalFile
+      }));
+    }
+    dispatch(fetchNextAssets({
+      offset: 0
+    }));
+  };
+  var handleChangeSort = function handleChangeSort(sortedBy, order) {
+    dispatch(fetchNextAssets({
+      offset: 0,
+      sortBy: sortedBy,
+      sortOrder: order
+    }));
+  };
+  var sortProps = {
+    useFilesSort: true,
+    onChange: handleChangeSort
+  };
+  var SortElement = /*#__PURE__*/_jsx(Sort, _objectSpread({
+    disabled: isAiSearchActive
+  }, sortProps));
+  var renderTopRightComponent = function renderTopRightComponent() {
+    return /*#__PURE__*/_jsx(TopBarUploadButton, {});
+  };
+  var renderTopSection = function renderTopSection(hideTopSection) {
+    return /*#__PURE__*/_jsx(TopSection, {
+      showTopBar: showBar && Boolean(ExploreViewComponent),
+      showFilters: showFilters,
+      showHeaderBar: !hideHeaderBar,
+      SortElement: SortElement,
+      hideTopSection: hideTopSection,
+      TopBarRightComponent: renderTopRightComponent,
+      onRefresh: onRefresh
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [useAssetsPicker && !isFileWindowOpened && /*#__PURE__*/_jsx(Styled.ModalTitle, {
+      onClose: requestCloseModal,
+      primary: i18n(assetsPickerModelTitle)
+    }), renderTopSection(!isWidgetSmallSize), /*#__PURE__*/_jsxs(Styled.BrowserBody, {
+      isListLayout: isListLayout,
+      className: "filerobot-ProviderBrowser-body",
+      children: [!isSimilarSearchActive && !isAiSearchActive && !error && /*#__PURE__*/_jsx(FacetedSearch, {}), isDraggingMultipleItems && !error && /*#__PURE__*/_jsx(DragImage, {}), /*#__PURE__*/_jsxs("div", {
+        className: "filerobot-ProviderBrowser-mainContent",
+        children: [renderTopSection(isWidgetSmallSize), error ? /*#__PURE__*/_jsx(ErroredViewPlaceholder, {
+          title: (error === null || error === void 0 ? void 0 : error.message) || error,
+          description: error === null || error === void 0 ? void 0 : error.details,
+          error: error
+        }) : /*#__PURE__*/_jsx(AssetsList, {
+          hideAccordionHeader: true,
+          ignoreEmptyFolder: Boolean(searchQuery),
+          fetchNextFiles: fetchNextFiles,
+          sortProps: sortProps,
+          isDraggingOver: isDraggingOver,
+          emptyViewPlaceholderData: EMPTY_ASSETS_VIEW_PLACEHOLDER_DATA
+        })]
+      }), renderRightSideNavigation()]
+    })]
+  });
+};
+export default AssetsView;

package/lib/components/AuthExplorerView.js

@@ -0,0 +1,79 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectCoreLoading } from '@scaleflex/widget-core/lib/slices/common.slice';
+import AddFilesPanel from './AddFilesPanel';
+import ImageEditorPanel from './ImageEditorPanel';
+import PdftronPanel from './PdftronPanel';
+import PickerPanel from './PickerPanel';
+import ExplorerWrapper from './ExplorerWrapper';
+import FileWindowPanel from './FileWindowPanel';
+import CropPanel from './CropPanel';
+import Modals from './Modals';
+import UploadsPanel from './UploadsPanel';
+import BulkEditPanel from './BulkEditPanel';
+import { useExplorer } from '../hooks';
+import { explorerPluginLoadingSet, fetchAccessConstants, fetchPublicConstants, selectIsExplorerPluginLoading } from '../slices/common.slice';
+import { fetchMetaAndSettings, metadataAdaptAndSet } from '../slices/metadata.slice';
+import ContextMenu from './ContextMenu';
+import Informer from './Informer';
+import ProgressPanel from './ProgressPanel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var AuthExplorerView = function AuthExplorerView() {
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    opts = _useExplorer.opts;
+  var isCoreLoading = useSelector(selectCoreLoading);
+  var isExplorerLoading = useSelector(selectIsExplorerPluginLoading);
+  var isLoading = isCoreLoading || isExplorerLoading;
+  useEffect(function () {
+    var _opts$config, _opts$config$metadata, _opts$config$tagging;
+    if (isCoreLoading) {
+      return;
+    }
+    dispatch(explorerPluginLoadingSet(true));
+    var hasMetaConfig = !!((_opts$config = opts.config) !== null && _opts$config !== void 0 && (_opts$config$metadata = _opts$config.metadata) !== null && _opts$config$metadata !== void 0 && _opts$config$metadata.model);
+    var promises = [];
+    var isTaggingEnabled = !!((_opts$config$tagging = opts.config.tagging) !== null && _opts$config$tagging !== void 0 && _opts$config$tagging.enabled);
+    if (hasMetaConfig) {
+      dispatch(metadataAdaptAndSet({
+        metadata: opts.config.metadata,
+        isTaggingEnabled: isTaggingEnabled
+      }));
+    }
+    if (opts.ExploreViewComponent) {
+      promises.push(dispatch(fetchPublicConstants()).throwRejection());
+    }
+    promises.push(dispatch(fetchMetaAndSettings({
+      updateMetaFromApi: !hasMetaConfig,
+      isTaggingEnabled: isTaggingEnabled
+    })).throwRejection());
+    if (opts.enabledManageAccess) {
+      promises.push(dispatch(fetchAccessConstants()).throwRejection());
+    }
+    Promise.all(promises)["catch"](function () {})["finally"](function () {
+      dispatch(explorerPluginLoadingSet(false));
+    });
+  }, [isCoreLoading]);
+  return /*#__PURE__*/_jsxs(ExplorerWrapper, {
+    children: [/*#__PURE__*/_jsx(ProgressPanel, {
+      zIndex: 1111
+    }), /*#__PURE__*/_jsx(UploadsPanel, {
+      zIndex: 1112
+    }), /*#__PURE__*/_jsx(AddFilesPanel, {
+      zIndex: 1113
+    }), /*#__PURE__*/_jsx(FileWindowPanel, {
+      zIndex: 1114
+    }), /*#__PURE__*/_jsx(PickerPanel, {
+      zIndex: 1115
+    }), /*#__PURE__*/_jsx(ImageEditorPanel, {
+      zIndex: 1117
+    }), /*#__PURE__*/_jsx(CropPanel, {
+      zIndex: 1120
+    }), /*#__PURE__*/_jsx(PdftronPanel, {
+      zIndex: 1121
+    }), /*#__PURE__*/_jsx(Modals, {}), /*#__PURE__*/_jsx(BulkEditPanel, {
+      zIndex: 1122
+    }), !isLoading && /*#__PURE__*/_jsx(ContextMenu, {}), /*#__PURE__*/_jsx(Informer, {})]
+  });
+};
+export default AuthExplorerView;

package/lib/components/Breadcrumbs/BreadCrumbViews/BreadCrumbsViews.styled.js

@@ -0,0 +1,30 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+import { PC, FV } from '@scaleflex/widget-common';
+var BreadcrumbsWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])));
+var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-shrink: 0;\n"])));
+var LabelText = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  min-width: fit-content;\n"])), function (_ref) {
+  var typography = _ref.theme.typography;
+  return typography.font[FV.LabelLarge];
+}, function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.TextSecondary];
+});
+var ActiveLabel = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  cursor: ", ";\n  max-width: 400px;\n"])), function (_ref3) {
+  var typography = _ref3.theme.typography;
+  return typography.font[FV.LabelLarge];
+}, function (_ref4) {
+  var palette = _ref4.theme.palette;
+  return palette[PC.TextPrimary];
+}, function (_ref5) {
+  var defaultCursor = _ref5.defaultCursor;
+  return defaultCursor ? 'default' : 'pointer';
+});
+var Styled = {
+  BreadcrumbsWrapper: BreadcrumbsWrapper,
+  LabelText: LabelText,
+  ActiveLabel: ActiveLabel,
+  IconWrapper: IconWrapper
+};
+export default Styled;

package/lib/components/Breadcrumbs/BreadCrumbViews/index.js

@@ -0,0 +1,32 @@
+import { EllipsedText } from '@scaleflex/ui/core';
+import Styled from './BreadCrumbsViews.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var BreadcrumbsViews = function BreadcrumbsViews(_ref) {
+  var mainText = _ref.mainText,
+    icon = _ref.icon,
+    _ref$activeName = _ref.activeName,
+    activeName = _ref$activeName === void 0 ? '' : _ref$activeName,
+    _ref$onClickMain = _ref.onClickMain,
+    onClickMain = _ref$onClickMain === void 0 ? function () {} : _ref$onClickMain,
+    _ref$showActiveLabel = _ref.showActiveLabel,
+    showActiveLabel = _ref$showActiveLabel === void 0 ? false : _ref$showActiveLabel,
+    _ref$onClickActive = _ref.onClickActive,
+    onClickActive = _ref$onClickActive === void 0 ? function () {} : _ref$onClickActive;
+  if (showActiveLabel) {
+    return /*#__PURE__*/_jsx(Styled.ActiveLabel, {
+      onClick: onClickActive,
+      defaultCursor: !icon,
+      children: /*#__PURE__*/_jsx(EllipsedText, {
+        maxLinesCount: 1,
+        children: activeName
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(Styled.BreadcrumbsWrapper, {
+    children: [/*#__PURE__*/_jsx(Styled.LabelText, {
+      onClick: onClickMain,
+      children: mainText
+    }), icon]
+  });
+};
+export default BreadcrumbsViews;