@scaleflex/widget-explorer 4.4.0 → 4.5.1

package/lib/components/AssetsList/GridView/FilesSection/FileOverlayOptions.js

@@ -0,0 +1,140 @@
+import { useMemo, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Download, FitScreen, Link, More } from '@scaleflex/icons';
+import { selectIsUserPermittedToDisplayFile, selectIsUserPermittedToShare } from '@scaleflex/widget-core/lib/slices/user.slice';
+import { isVisibilityPublic } from '@scaleflex/widget-utils/lib/visibility';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { Button, IconButton } from '@scaleflex/ui/core';
+import { downloadOneFile, emitExportEvent } from '../../../../thunks/downloads.thunks';
+import { useExplorer } from '../../../../hooks';
+import { useDownloadConsentModal } from '../../../Modals';
+import { copyFileCdnLink } from '../../../../slices/files.slice';
+import { ANIMATED_IMG_ACCEPT_HEADER } from '../../../../utils/constants';
+import Styled from './FilesSection.styled';
+import prepareExportedFilesLinks from '@scaleflex/widget-explorer/lib/utils/prepareExportedFilesLinks';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileOverlayOptions = function FileOverlayOptions(_ref) {
+  var file = _ref.file,
+    onContextMenu = _ref.onContextMenu,
+    toggleFileWindow = _ref.toggleFileWindow;
+  var dispatch = useDispatch();
+  var triggerDownloadConsentModal = useDownloadConsentModal();
+  var _useExplorer = useExplorer(),
+    checkFileFolderPermissions = _useExplorer.checkFileFolderPermissions,
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    useAssetsPicker = _useExplorer$opts.useAssetsPicker,
+    noImgOperationsAndDownload = _useExplorer$opts.noImgOperationsAndDownload,
+    preventDownloadDefaultBehavior = _useExplorer$opts.preventDownloadDefaultBehavior;
+  var isUserPermittedToShare = useSelector(selectIsUserPermittedToShare);
+  var isUserPermittedToDisplayFile = useSelector(selectIsUserPermittedToDisplayFile);
+  var copyLinkToClipboard = function copyLinkToClipboard() {
+    dispatch(copyFileCdnLink(file));
+  };
+  var download = useCallback(function (event) {
+    event.stopPropagation();
+    if (preventDownloadDefaultBehavior) {
+      var _file$url;
+      dispatch(emitExportEvent([{
+        link: file === null || file === void 0 ? void 0 : (_file$url = file.url) === null || _file$url === void 0 ? void 0 : _file$url.cdn,
+        file: file
+      }]));
+      return;
+    }
+    triggerDownloadConsentModal(function () {
+      return dispatch(downloadOneFile({
+        file: file,
+        headers: ANIMATED_IMG_ACCEPT_HEADER
+      }));
+    });
+  }, [triggerDownloadConsentModal, preventDownloadDefaultBehavior]);
+  var options = useMemo(function () {
+    return useAssetsPicker ? [{
+      key: 'GridLi-SelectButton',
+      onClick: function onClick() {
+        var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        dispatch(emitExportEvent(prepareExportedFilesLinks([file])));
+      },
+      label: i18n('explorerGridFileOptionsOverlaySelectBtn'),
+      testId: 'fmaw-explorer-grid_file_options_select'
+    }, {
+      key: 'GridLi-FitScreen',
+      Icon: FitScreen,
+      iconSize: 16,
+      onClick: function onClick(event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        toggleFileWindow(event);
+      },
+      hidden: !isUserPermittedToDisplayFile,
+      testId: 'fmaw-explorer-grid_file_options_fit_screen',
+      style: {
+        position: 'absolute',
+        top: 12,
+        right: 12
+      },
+      color: 'secondary'
+    }] : [{
+      key: 'GridLi-CopyLink',
+      Icon: Link,
+      iconSize: 16,
+      onClick: copyLinkToClipboard,
+      hidden: !isVisibilityPublic(file.visibility),
+      testId: 'fmaw-explorer-grid_file_options_copy',
+      color: 'secondary'
+    }, {
+      key: 'GridLi-OpenMenu',
+      Icon: More,
+      iconSize: 16,
+      onClick: onContextMenu,
+      testId: 'fmaw-explorer-grid_file_options_open_menu',
+      color: 'secondary'
+    }, {
+      key: 'GridLi-DownloadFile',
+      Icon: Download,
+      iconSize: 16,
+      onClick: download,
+      hidden: noImgOperationsAndDownload || !isUserPermittedToDisplayFile,
+      disabled: !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.DISPLAY],
+        permissionsList: file.permissions
+      }),
+      disabledTooltip: i18n('mutualizedFileOptionPermissionsMutedHint'),
+      testId: 'fmaw-explorer-grid_file_options_download'
+    }];
+  }, [file, noImgOperationsAndDownload, isUserPermittedToShare, isUserPermittedToDisplayFile, download, checkFileFolderPermissions, i18n, useAssetsPicker]);
+  var renderOption = function renderOption(_ref2) {
+    var key = _ref2.key,
+      label = _ref2.label,
+      Icon = _ref2.Icon,
+      iconSize = _ref2.iconSize,
+      onClick = _ref2.onClick,
+      testId = _ref2.testId,
+      style = _ref2.style,
+      color = _ref2.color,
+      hidden = _ref2.hidden;
+    if (hidden) {
+      return null;
+    }
+    return label ? /*#__PURE__*/_jsx(Button, {
+      size: "md",
+      onClick: onClick,
+      "data-testid": testId,
+      style: style,
+      children: label
+    }, key) : /*#__PURE__*/_jsx(IconButton, {
+      onClick: onClick,
+      "data-testid": testId,
+      size: "md",
+      style: style,
+      color: color,
+      children: /*#__PURE__*/_jsx(Icon, {
+        size: iconSize
+      })
+    }, key);
+  };
+  return /*#__PURE__*/_jsx(Styled.FileOverlay, {
+    children: options.map(renderOption)
+  });
+};
+export default FileOverlayOptions;

package/lib/components/AssetsList/GridView/FilesSection/FilesSection.styled.js

@@ -0,0 +1,15 @@
+var _templateObject, _templateObject2;
+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/lib';
+import { Button } from '@scaleflex/ui/core';
+import styled from 'styled-components';
+var FileOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  visibility: hidden;\n  gap: 8px;\n\n  *:hover>& {\n    visibility: visible;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette[PC.Extra_0_7_Overlay];
+});
+var FileOverlayButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 40px;\n  height: 40px;\n"])));
+var Styled = {
+  FileOverlay: FileOverlay,
+  FileOverlayButton: FileOverlayButton
+};
+export default Styled;

package/lib/components/AssetsList/GridView/FilesSection/index.js

@@ -0,0 +1,31 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["filesUuids"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useContext } from 'react';
+import { VirtualGrid } from '@scaleflex/widget-common';
+import { VirtualListDataContext } from '@scaleflex/widget-core/lib/Providers';
+import FileCell from './FileCell';
+import { jsx as _jsx } from "react/jsx-runtime";
+var getFileItemKey = function getFileItemKey(uuid) {
+  return uuid;
+};
+var FilesSection = function FilesSection(_ref) {
+  var filesUuids = _ref.filesUuids,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(VirtualListDataContext),
+    apiRef = _useContext.apiRef;
+  return /*#__PURE__*/_jsx(VirtualGrid, {
+    items: filesUuids,
+    injectedItemPropName: "fileUuid",
+    getItemKey: getFileItemKey,
+    apiRef: apiRef,
+    children: /*#__PURE__*/_jsx(FileCell, _objectSpread({}, others))
+  });
+};
+export default /*#__PURE__*/memo(FilesSection);

package/lib/components/AssetsList/GridView/FilesSkeleton.js

@@ -0,0 +1,47 @@
+import { Skeleton } from '@scaleflex/ui/core';
+import Styled from '../AssetsList.styled';
+import StyledGridView from './GridView.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var GridLayoutFilesSkeleton = function GridLayoutFilesSkeleton(_ref) {
+  var hideAccordionHeader = _ref.hideAccordionHeader;
+  return /*#__PURE__*/_jsx(Styled.Accordion, {
+    expanded: true,
+    label: /*#__PURE__*/_jsx(Skeleton, {
+      width: 200
+    }),
+    style: {
+      marginTop: hideAccordionHeader ? 0 : 12
+    },
+    detailStyle: {
+      margin: '0px'
+    },
+    hideIcon: true,
+    onContextMenu: function onContextMenu(e) {
+      return e.stopPropagation();
+    },
+    hideHeader: hideAccordionHeader,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "filerobot-Provider-ItemCategory-wrapper",
+      children: /*#__PURE__*/_jsx(StyledGridView.SkeletonContainer, {
+        children: Array(18).fill().map(function (_, index) {
+          return /*#__PURE__*/_jsx(Styled.FileSectionItem, {
+            isSkeleton: true,
+            children: /*#__PURE__*/_jsxs(Styled.FileSectionItemWrapper, {
+              type: "button",
+              className: "filerobot-u-reset",
+              $loading: true,
+              children: [/*#__PURE__*/_jsx(Styled.FileSkeleton, {
+                bottom: "16%",
+                width: 150
+              }), /*#__PURE__*/_jsx(Styled.FileSkeleton, {
+                bottom: "5%",
+                width: 66
+              })]
+            })
+          }, index);
+        })
+      })
+    })
+  });
+};
+export default GridLayoutFilesSkeleton;

package/lib/components/AssetsList/GridView/FoldersSection/FolderCell.js

@@ -0,0 +1,239 @@
+var _excluded = ["folderUuid", "handleNavigatingThroughArrows", "DetailsView", "hideTopOptions", "openFolderOnClick", "hideDetailsInfo", "disableHoverEffects"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useRef, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { EllipsedText } from '@scaleflex/ui/core';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import getFolderDetails from '@scaleflex/widget-utils/lib/getFolderDetails';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import { checkFileOrFolderNameValidation } from '@scaleflex/widget-utils/lib/checkFileOrFolderNameValidation';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import DnD from '../../../DnD';
+import FolderTopOptions from './FolderTopOptions';
+import FolderPreviewGrid from './FolderPreviewGrid';
+import { useExplorer, useFetchFileFolderPermissions } from '../../../../hooks';
+import { selectIsItemChecked, toggleSelection } from '../../../../slices/selections.slice';
+import { itemRenameOpened, selectIsRenameItemFromSidebar, selectRenameItemFor } from '../../../../slices/panels.slice';
+import { renameFolder, selectFolderByUuid } from '../../../../slices/folders.slice';
+import Styled from '../../AssetsList.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var checkboxOnChange = function checkboxOnChange() {};
+var FolderCell = function FolderCell(_ref) {
+  var folderUuid = _ref.folderUuid,
+    handleNavigatingThroughArrows = _ref.handleNavigatingThroughArrows,
+    DetailsView = _ref.DetailsView,
+    hideTopOptions = _ref.hideTopOptions,
+    openFolderOnClick = _ref.openFolderOnClick,
+    hideDetailsInfo = _ref.hideDetailsInfo,
+    _ref$disableHoverEffe = _ref.disableHoverEffects,
+    disableHoverEffects = _ref$disableHoverEffe === void 0 ? false : _ref$disableHoverEffe,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    info = _useExplorer.info,
+    opts = _useExplorer.opts,
+    checkUserPermissions = _useExplorer.checkUserPermissions;
+  var _useFetchFileFolderPe = useFetchFileFolderPermissions(),
+    fetchPermissions = _useFetchFileFolderPe.fetchPermissions,
+    clearFetchPermissionsTimer = _useFetchFileFolderPe.clearFetchPermissionsTimer;
+  var folder = useSelector(function (state) {
+    return selectFolderByUuid(state, folderUuid) || {};
+  });
+  var renameItemFor = useSelector(selectRenameItemFor);
+  var renameSidebarItem = useSelector(selectIsRenameItemFromSidebar);
+  var isChecked = useSelector(function (state) {
+    return selectIsItemChecked(state, getFolderDetails(folder).uuid);
+  });
+  var disableFolderSelection = opts.disableFolderSelection,
+    hideFolderOptions = opts.hideFolderOptions,
+    useAssetsPicker = opts.useAssetsPicker;
+  var isLoading = folder.loading;
+  var stagedFileName = useRef(folder.name);
+  var focusedInput = useRef();
+  var id = getFolderDetails(folder).uuid;
+  var folderName = getFolderDetails(folder).name;
+  var isItemBeingRenamed = renameItemFor === id;
+  var isFolderChecked = isChecked;
+  var isRenamingFolder = !renameSidebarItem && renameItemFor && isItemBeingRenamed;
+  useEffect(function () {
+    if (focusedInput.current) {
+      focusedInput.current.focus();
+    }
+  }, [renameSidebarItem, renameItemFor]);
+  useEffect(function () {
+    window.addEventListener('mousedown', handleSubmitRename);
+    return function () {
+      window.removeEventListener('mousedown', handleSubmitRename);
+    };
+  }, [isRenamingFolder, isLoading]);
+  var handleToggleCheckbox = function handleToggleCheckbox(event) {
+    if (isLoading || disableFolderSelection || useAssetsPicker) {
+      return;
+    }
+    dispatch(toggleSelection({
+      event: event,
+      itemUuid: id,
+      isMultiple: event.isMultiple
+    }));
+  };
+  var handleOnContextMenu = function handleOnContextMenu(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!isLoading && typeof props.handleContextMenuToggle === 'function') {
+      props.handleContextMenuToggle(event, folder);
+    }
+  };
+  var triggerRenaming = function triggerRenaming(newName) {
+    var renameAction = renameFolder({
+      uuid: id,
+      name: newName
+    });
+    handlePromise(dispatch(renameAction), function () {
+      return info(i18n('mutualizedRenamedSuccessfullyInfo'), 'success');
+    }, info);
+  };
+  var handleRenaming = function handleRenaming(newName) {
+    if (isLoading) return;
+    var oldName = folderName;
+    if (!newName || newName === oldName) {
+      dispatch(itemRenameOpened(null));
+      return;
+    }
+    if (checkFileOrFolderNameValidation(newName)) {
+      info(i18n('mutualizedFolderInvalidNameError'));
+    } else if (newName) {
+      triggerRenaming(newName);
+    } else if (newName === '') {
+      // 'else if' not 'else' Cuz maybe the user would cancel then we don't need to show the msg.
+      info(i18n('explorerInvalidNameInfo'));
+    }
+  };
+  var handleSubmitRename = function handleSubmitRename(event) {
+    if (!isRenamingFolder || isLoading || event.target.dataset.folderName === folder.name) return;
+    event.target.value = stagedFileName.current;
+    handleRenaming(event.target.value);
+  };
+  var handleKeyUp = function handleKeyUp(event) {
+    if (isLoading) {
+      return;
+    }
+    var eventKey = event.key.toLowerCase();
+    var newName = event.target.value;
+    if (eventKey === 'escape') {
+      dispatch(itemRenameOpened(null));
+      return;
+    }
+    stagedFileName.current = newName;
+    if (eventKey !== 'enter') {
+      return;
+    }
+    handleRenaming(newName);
+  };
+  var startRenameOnSecondClick = function startRenameOnSecondClick(event) {
+    if (isLoading || DetailsView || event.detail !== 1 || !checkUserPermissions([PERMISSIONS.FOLDER_RENAME])) return;
+    event.stopPropagation();
+    dispatch(itemRenameOpened(folder.uuid || folder.id));
+  };
+  var _getFolderDetails = getFolderDetails(folder),
+    filesDirect = _getFolderDetails.filesDirect,
+    filesRecursive = _getFolderDetails.filesRecursive;
+  return /*#__PURE__*/_jsx(DnD, {
+    disableDrag: isItemBeingRenamed || isLoading,
+    disableDrop: isLoading,
+    item: folder,
+    children: /*#__PURE__*/_jsxs(Styled.FolderSectionItem, {
+      role: "button",
+      className: "item-folder".concat(props.isDragging ? ' filerobot-Dragging-folders' : ''),
+      onKeyDown: isLoading ? undefined : handleNavigatingThroughArrows,
+      onKeyUp: function onKeyUp() {
+        return fetchPermissions({
+          foldersUuids: [id]
+        });
+      },
+      "data-filerobot-focusable-uuid": id,
+      tabIndex: "-1",
+      selected: isFolderChecked && !DetailsView,
+      onClick: handleToggleCheckbox,
+      onDoubleClick: function onDoubleClick(e) {
+        return isLoading ? ignoreEvent(e) : openFolderOnClick(folder);
+      },
+      onContextMenu: handleOnContextMenu,
+      "aria-label": isFolderChecked && !DetailsView ? i18n('mutualizedUnselectFileNamedLabel', {
+        name: folderName
+      }) : i18n('mutualizedSelectFileNamedLabel', {
+        name: folderName
+      }),
+      $loading: isLoading,
+      disableHoverEffects: disableHoverEffects,
+      onMouseEnter: function onMouseEnter() {
+        return fetchPermissions({
+          foldersUuids: [id]
+        });
+      },
+      onMouseLeave: clearFetchPermissionsTimer,
+      children: [/*#__PURE__*/_jsx(Styled.FolderIcon, {
+        small: hideDetailsInfo
+      }), /*#__PURE__*/_jsxs(Styled.FolderContent, {
+        fullSizeGrid: hideDetailsInfo,
+        children: [/*#__PURE__*/_jsx(FolderPreviewGrid, {
+          folder: folder
+        }), !hideDetailsInfo && /*#__PURE__*/_jsxs(Styled.FolderInfo, {
+          children: [/*#__PURE__*/_jsx(Styled.FolderTitle, {
+            onClick: isFolderChecked ? startRenameOnSecondClick : undefined,
+            children: isRenamingFolder ? /*#__PURE__*/_jsx(Styled.FolderInputRename, {
+              type: "text",
+              size: "sm",
+              defaultValue: folderName,
+              onKeyUp: handleKeyUp,
+              onKeyDown: ignoreEvent,
+              onClick: ignoreEvent,
+              onDoubleClick: ignoreEvent,
+              onContextMenu: ignoreEvent,
+              ref: focusedInput,
+              disabled: isLoading,
+              focusOnMount: true,
+              "data-folder-name": folder.name
+            }) : /*#__PURE__*/_jsx(EllipsedText, {
+              maxLinesCount: 1,
+              children: folderName
+            })
+          }), /*#__PURE__*/_jsxs(Styled.FolderSubTitle, {
+            children: [/*#__PURE__*/_jsx(Styled.FolderSubTitleText, {
+              size: "sm",
+              children: i18n('gridViewFolderSubTitleAssets', {
+                count: filesDirect
+              })
+            }), /*#__PURE__*/_jsx(Styled.FolderSubTitleText, {
+              size: "sm",
+              children: i18n('gridViewFolderSubTitleSubAssets', {
+                count: filesRecursive - filesDirect
+              })
+            })]
+          })]
+        }), !DetailsView && !disableFolderSelection && !useAssetsPicker && /*#__PURE__*/_jsx(Styled.FolderSectionItemCheckbox, {
+          // TODO: fix
+          // we use onClick instead of onChange as onChange causes multiple rerenders
+          // we add onChnage as emty function to avoid type warning
+          onClick: function onClick(e) {
+            e.isMultiple = true;
+          },
+          onChange: checkboxOnChange,
+          checked: isFolderChecked,
+          onContextMenu: handleOnContextMenu,
+          size: "md"
+        }), !hideTopOptions && !isLoading && !hideFolderOptions && !useAssetsPicker && /*#__PURE__*/_jsx(FolderTopOptions, {
+          folder: folder,
+          onContextMenu: handleOnContextMenu,
+          style: {
+            padding: 12,
+            top: 0,
+            right: 0
+          }
+        })]
+      })]
+    })
+  });
+};
+export default FolderCell;

package/lib/components/AssetsList/GridView/FoldersSection/FolderPreviewGrid.js

@@ -0,0 +1,106 @@
+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 { useSelector } from 'react-redux';
+import { Skeleton } from '@scaleflex/ui/core';
+import getItemIcon from '@scaleflex/widget-utils/lib/getItemIcon';
+import getFormattedPreviewUrl from '@scaleflex/widget-utils/lib/getFormattedPreviewUrl';
+import isThumbnailCloudimgSupported from '@scaleflex/widget-utils/lib/isThumbnailCloudimgSupported';
+import getFileDefaultIcon from '@scaleflex/widget-utils/lib/getFileDefaultIcon';
+import LinkHelper from '@scaleflex/widget-utils/lib/LinkHelper';
+import { FILE_TYPES_ICON_PATH } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../../hooks';
+import { selectIsExplorerPluginLoading } from '../../../../slices/common.slice';
+import Styled from '../../AssetsList.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_ICON_WIDTH = 84;
+var DEFAULT_ICON_HEIGHT = 84;
+var DEFAULT_ICON_MARGIN = 30;
+var FolderPreviewGrid = function FolderPreviewGrid(_ref) {
+  var folder = _ref.folder;
+  var _useExplorer = useExplorer(),
+    isFastToken = _useExplorer.opts.isFastToken,
+    isDevEnv = _useExplorer.isDevEnv,
+    container = _useExplorer.container;
+  var loading = useSelector(selectIsExplorerPluginLoading);
+  var isLoadingPreviews = !folder.previews && !folder.files && !isFastToken;
+  var isLoading = isLoadingPreviews || loading;
+  var folderAssetsPreviews = folder.previews || folder.files || [];
+  var hideImgOnLoadingErr = function hideImgOnLoadingErr() {
+    var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (e.currentTarget) {
+      e.currentTarget.style.display = 'none';
+    }
+  };
+  var getAppendedLink = function getAppendedLink(_ref2) {
+    var url = _ref2.url,
+      searchParams = _ref2.searchParams;
+    return new LinkHelper({
+      href: url || ''
+    }).appendSearchParams(searchParams);
+  };
+  var renderPreviewGridImg = function renderPreviewGridImg(file) {
+    var _file$info, _file$url;
+    if (isLoading) {
+      return /*#__PURE__*/_jsx(Styled.PreviewGridImgWrapper, {
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          height: "100%",
+          width: "100%"
+        })
+      });
+    }
+    if (!file) {
+      return /*#__PURE__*/_jsx(Styled.PreviewGridImgWrapper, {});
+    }
+    var filePreviewUrl = file.file_uri_cdn || (file === null || file === void 0 ? void 0 : (_file$info = file.info) === null || _file$info === void 0 ? void 0 : _file$info.video_gif) || (file === null || file === void 0 ? void 0 : (_file$url = file.url) === null || _file$url === void 0 ? void 0 : _file$url.cdn);
+    var tmpFile = _objectSpread(_objectSpread({}, file), {}, {
+      url: getFormattedPreviewUrl({
+        url: filePreviewUrl,
+        isDevEnv: isDevEnv,
+        containerToken: container
+      }),
+      type: file.file_type || file.type,
+      uuid: file.file_uuid
+    });
+    var itemIconUrl = getItemIcon({
+      fileOrFolder: tmpFile,
+      showVideoGif: true,
+      cloudimgFunc: 'bound',
+      isDevEnv: isDevEnv,
+      container: container
+    });
+    var isFileTypeIcon = itemIconUrl.includes(FILE_TYPES_ICON_PATH);
+    var filePreviewUri = isFileTypeIcon ? getAppendedLink({
+      url: itemIconUrl,
+      searchParams: {
+        w: DEFAULT_ICON_WIDTH,
+        func: 'fit',
+        h: DEFAULT_ICON_HEIGHT,
+        margin: "".concat(DEFAULT_ICON_MARGIN, "p")
+      }
+    }) : itemIconUrl;
+    var isContainedFit = !isThumbnailCloudimgSupported(tmpFile);
+    return /*#__PURE__*/_jsx(Styled.PreviewGridImgWrapper, {
+      children: filePreviewUri && /*#__PURE__*/_jsx(Styled.PreviewGridImg, {
+        src: filePreviewUri,
+        isContainedFit: isContainedFit,
+        onError: hideImgOnLoadingErr,
+        firstFallbackSrc: function firstFallbackSrc() {
+          return getFileDefaultIcon(file);
+        },
+        applyFallback: true
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(Styled.FolderPreviewGrid, {
+    children: [/*#__PURE__*/_jsx(Styled.PreviewGridLeftColumn, {
+      children: renderPreviewGridImg(folderAssetsPreviews[0])
+    }), /*#__PURE__*/_jsxs(Styled.PreviewGridRightColumn, {
+      children: [renderPreviewGridImg(folderAssetsPreviews[1]), renderPreviewGridImg(folderAssetsPreviews[2])]
+    })]
+  });
+};
+export default FolderPreviewGrid;

package/lib/components/AssetsList/GridView/FoldersSection/FolderTopOptions.js

@@ -0,0 +1,70 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["folder", "onContextMenu"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useMemo, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ItemHoverTopOptions } from '@scaleflex/widget-common';
+import { Download, More } from '@scaleflex/icons';
+import { selectIsUserPermittedToDisplayFile } from '@scaleflex/widget-core/lib/slices/user.slice';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useDownloadConsentModal } from '../../../Modals';
+import { downloadItems } from '../../../../thunks/downloads.thunks';
+import { useExplorer } from '../../../../hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FolderTopOptions = function FolderTopOptions(_ref) {
+  var folder = _ref.folder,
+    onContextMenu = _ref.onContextMenu,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    preventDownloadDefaultBehavior = _useExplorer$opts.preventDownloadDefaultBehavior,
+    noImgOperationsAndDownload = _useExplorer$opts.noImgOperationsAndDownload;
+  var triggerDownloadConsentModal = useDownloadConsentModal();
+  var isUserPermittedToDisplayFile = useSelector(selectIsUserPermittedToDisplayFile);
+  var _useExplorer2 = useExplorer(),
+    checkFileFolderPermissions = _useExplorer2.checkFileFolderPermissions;
+  var notifyAndDownload = useCallback(function (event) {
+    event.stopPropagation();
+    if (preventDownloadDefaultBehavior) {
+      return;
+    }
+    triggerDownloadConsentModal(function () {
+      return dispatch(downloadItems({
+        items: [folder]
+      }));
+    });
+  }, [preventDownloadDefaultBehavior, triggerDownloadConsentModal]);
+  var options = useMemo(function () {
+    return [{
+      key: 'GridLi-DownloadFolder',
+      Icon: Download,
+      iconSize: 12,
+      onClick: notifyAndDownload,
+      hidden: noImgOperationsAndDownload || preventDownloadDefaultBehavior,
+      disabled: !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.DISPLAY],
+        permissionsList: folder.permissions
+      }),
+      disabledTooltip: i18n('mutualizedFileOptionPermissionsMutedHint'),
+      testId: 'fmaw-explorer-grid_folder_top_options_download'
+    }, {
+      key: 'GridLi-OpenMenu',
+      Icon: More,
+      iconSize: 12,
+      onClick: onContextMenu
+    }];
+  }, [folder, i18n, preventDownloadDefaultBehavior, notifyAndDownload, isUserPermittedToDisplayFile, checkFileFolderPermissions]);
+  return /*#__PURE__*/_jsx(ItemHoverTopOptions, _objectSpread({
+    options: options,
+    onContextMenu: onContextMenu
+  }, props));
+};
+export default FolderTopOptions;