@scaleflex/widget-explorer 4.4.0 → 4.5.1

package/lib/components/ContextMenu/ContextMenuItem.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 { ArrowRightOutline } from '@scaleflex/icons';
+import { TooltipV2 } from '@scaleflex/ui/core';
+import Styled from './ContextMenu.styled';
+import isFileContextMenu from './utils/isFileContextMenu';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var ContextMenuItem = function ContextMenuItem(_ref) {
+  var option = _ref.option,
+    type = _ref.type,
+    index = _ref.index,
+    passedCommonProps = _ref.passedCommonProps,
+    handleMenuClosing = _ref.handleMenuClosing,
+    contextMenuWrapperRef = _ref.contextMenuWrapperRef,
+    containerHeight = _ref.containerHeight,
+    menuStyles = _ref.menuStyles,
+    setSubListProps = _ref.setSubListProps,
+    initialSubListState = _ref.initialSubListState,
+    isSubList = _ref.isSubList,
+    iconPrimaryColor = _ref.iconPrimaryColor,
+    i18n = _ref.i18n;
+  var _ref2 = option || {},
+    key = _ref2.key,
+    prefix = _ref2.prefix,
+    content = _ref2.content,
+    desc = _ref2.desc,
+    suffix = _ref2.suffix,
+    _onClick = _ref2.onClick,
+    keepItemsSelected = _ref2.keepItemsSelected,
+    disabledTooltip = _ref2.disabledTooltip,
+    subListItemsFn = _ref2.subListItemsFn,
+    keepMenuOpened = _ref2.keepMenuOpened,
+    disabled = _ref2.disabled,
+    isActive = _ref2.isActive,
+    hoverTheme = _ref2.hoverTheme,
+    singleCustomMenuOption = _ref2.singleCustomMenuOption;
+  var isDisabled = function isDisabled(disabled) {
+    return typeof disabled === 'function' ? disabled(passedCommonProps) : disabled;
+  };
+  var handleSubListOpening = function handleSubListOpening(event, subListOptions) {
+    var optionElem = event.currentTarget;
+    var contextMenuWrapper = contextMenuWrapperRef.current;
+    if (!contextMenuWrapper) {
+      return;
+    }
+    // 1 is const for overlapping the sub list over the parent menu
+    var subListLeft = contextMenuWrapper.getBoundingClientRect().width - 1;
+    var subListYOffset = containerHeight - parseInt(contextMenuWrapper.offsetTop + optionElem.offsetTop + optionElem.offsetHeight - contextMenuWrapper.scrollTop);
+    setSubListProps({
+      isSubList: true,
+      // (-) sign to know which starting position parent menu coming from
+      subListLeft: menuStyles.right ? -subListLeft : subListLeft,
+      subListBottom: subListYOffset,
+      subListOptions: subListOptions
+    });
+  };
+  var handleSubListClosing = function handleSubListClosing() {
+    return setSubListProps(initialSubListState);
+  };
+  var handleOptionClick = function handleOptionClick(_ref3) {
+    var keepMenuOpened = _ref3.keepMenuOpened,
+      keepItemsSelected = _ref3.keepItemsSelected,
+      onClick = _ref3.onClick,
+      disabled = _ref3.disabled;
+    if (!keepMenuOpened && !isDisabled(disabled)) {
+      handleMenuClosing(keepItemsSelected);
+    }
+    if (onClick) {
+      onClick();
+    }
+  };
+  var renderTooltipTitle = function renderTooltipTitle(tooltip) {
+    return /*#__PURE__*/_jsx(Styled.TooltipTitle, {
+      children: typeof tooltip === 'function' ? tooltip(passedCommonProps) : i18n(tooltip) || tooltip
+    });
+  };
+  var renderOptionContent = function renderOptionContent(_ref4) {
+    var content = _ref4.content,
+      desc = _ref4.desc;
+    return /*#__PURE__*/_jsxs(Styled.OptionContent, {
+      className: "filerobot-Explorer-contextMenu-option-content",
+      children: [typeof content === 'function' ? content(passedCommonProps) : typeof content === 'string' ? i18n(content) || content : content, desc && /*#__PURE__*/_jsx(Styled.OptionContentDesc, {
+        className: "filerobot-Explorer-contextMenu-option-content-desc",
+        children: desc
+      })]
+    });
+  };
+  var subListItems = subListItemsFn === null || subListItemsFn === void 0 ? void 0 : subListItemsFn(passedCommonProps);
+  var subListOnMouseEnterHandler = subListItems ? function (e) {
+    return handleSubListOpening(e, subListItems);
+  } : handleSubListClosing;
+  return /*#__PURE__*/_jsxs(Styled.OptionWrapper, _objectSpread(_objectSpread({
+    "data-testid": "fmaw-explorer-context_menu_option_".concat(key === null || key === void 0 ? void 0 : key.toLowerCase()),
+    $disabled: isDisabled(disabled)
+  }, isActive ? {
+    className: 'active'
+  } : {}), {}, {
+    onClick: function onClick(event) {
+      return handleOptionClick({
+        keepMenuOpened: keepMenuOpened,
+        keepItemsSelected: keepItemsSelected,
+        disabled: disabled,
+        onClick: _onClick && !isDisabled(disabled) ? function () {
+          return _onClick(_objectSpread({
+            event: event
+          }, passedCommonProps));
+        } : undefined
+      });
+    },
+    onContextMenu: function onContextMenu(e) {
+      return e.preventDefault();
+    },
+    onMouseEnter: !isSubList && !isDisabled(disabled) ? subListOnMouseEnterHandler : undefined,
+    isFileType: isFileContextMenu(type),
+    isSubList: isSubList,
+    hasPrefix: Boolean(prefix),
+    $hoverTheme: hoverTheme,
+    $key: key,
+    $singleCustomMenuOption: singleCustomMenuOption,
+    children: [prefix && (typeof prefix === 'function' ? prefix(passedCommonProps) : prefix), content && renderOptionContent({
+      content: content,
+      desc: desc
+    }), isDisabled(disabled) && !(key !== null && key !== void 0 && key.includes('SEPARATOR')) && disabledTooltip && /*#__PURE__*/_jsx(TooltipV2, {
+      size: "md",
+      position: "right",
+      title: renderTooltipTitle(disabledTooltip),
+      zIndex: 2000000,
+      children: /*#__PURE__*/_jsx(Styled.InfoOutline, {})
+    }, key), (suffix || subListItemsFn) && !isDisabled(disabled) && /*#__PURE__*/_jsxs(Styled.OptionSuffix, {
+      className: "filerobot-Explorer-contextMenu-option-suffix",
+      children: [typeof suffix === 'function' ? suffix(passedCommonProps) : suffix, (subListItemsFn === null || subListItemsFn === void 0 ? void 0 : subListItemsFn(passedCommonProps)) && /*#__PURE__*/_jsx(ArrowRightOutline, {
+        color: iconPrimaryColor,
+        size: 10
+      })]
+    })]
+  }), key || "".concat(index, "-").concat(content === null || content === void 0 ? void 0 : content.toString()));
+};
+export default ContextMenuItem;

package/lib/components/ContextMenu/FileMenu/CollaborateSection/index.js

@@ -0,0 +1,33 @@
+import { useExplorer } from '../../../../hooks';
+import createSeparator from '../../utils/createSeparator';
+import DownloadSubMenu from '../../SharedMenus/DownloadSubMenu';
+import isSeparatorHidden from '../../utils/isSeparatorHidden';
+import DownloadOption from '../../MenuOptions/DownloadOption';
+import ManageDetailsOption from '../../MenuOptions/ManageDetailsOption';
+import CdnLinkOption from '../../MenuOptions/CdnLinkOption';
+var CollaborateSection = function CollaborateSection() {
+  var _useExplorer = useExplorer(),
+    opts = _useExplorer.opts;
+  var preventDownloadDefaultBehavior = opts.preventDownloadDefaultBehavior,
+    hideDownloadVariationsOption = opts.hideDownloadVariationsOption;
+  var downloadOption = DownloadOption({
+    subListItemsFn: function subListItemsFn(_ref) {
+      var folders = _ref.folders,
+        files = _ref.files;
+      return !(preventDownloadDefaultBehavior && hideDownloadVariationsOption) && DownloadSubMenu({
+        files: files,
+        folders: folders
+      });
+    }
+  });
+  var manageDetailsOption = ManageDetailsOption();
+  var cdnLinkOption = CdnLinkOption();
+  var fileCollaborateMenuItems = [downloadOption, cdnLinkOption, manageDetailsOption];
+  return [].concat(fileCollaborateMenuItems, [createSeparator({
+    key: 'FILE_COLLABORATE_SECTION_SEPARATOR',
+    hideOption: function hideOption(props) {
+      return isSeparatorHidden(fileCollaborateMenuItems, props);
+    }
+  })]);
+};
+export default CollaborateSection;

package/lib/components/ContextMenu/FileMenu/DeleteSection/index.js

@@ -0,0 +1,25 @@
+import { useDispatch } from 'react-redux';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../../hooks';
+import { fileWindowUpdated } from '../../../../slices/panels.slice';
+import DeleteOption from '../../MenuOptions/DeleteOption';
+var DeleteSection = function DeleteSection() {
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    checkFileFolderPermissions = _useExplorer.checkFileFolderPermissions;
+  var deleteOption = DeleteOption({
+    onSuccess: function onSuccess() {
+      return dispatch(fileWindowUpdated(null));
+    },
+    disabled: function disabled(_ref) {
+      var files = _ref.files;
+      return !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.FILE_DELETE],
+        permissionsList: files[0].permissions
+      });
+    },
+    disabledTooltip: 'explorerContextMenuPermissionMutedHint'
+  });
+  return [deleteOption];
+};
+export default DeleteSection;

package/lib/components/ContextMenu/FileMenu/EditSection/index.js

@@ -0,0 +1,42 @@
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../../hooks';
+import createSeparator from '../../utils/createSeparator';
+import isSeparatorHidden from '../../utils/isSeparatorHidden';
+import EditVideoOption from '../../MenuOptions/EditVideoOption';
+import EditImageOption from '../../MenuOptions/EditImageOption';
+import AddVariationOption from '../../MenuOptions/AddVariationOption';
+import RenameOption from '../../MenuOptions/RenameOption';
+var EditSection = function EditSection() {
+  var _useExplorer = useExplorer(),
+    checkFileFolderPermissions = _useExplorer.checkFileFolderPermissions;
+  var editImageOption = EditImageOption({
+    disabled: function disabled(_ref) {
+      var files = _ref.files;
+      return !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.UPLOAD, PERMISSIONS.FILE_IMAGE_EDITOR],
+        permissionsList: files[0].permissions
+      });
+    },
+    disabledTooltip: 'explorerContextMenuPermissionMutedHint'
+  });
+  var editVideoOption = EditVideoOption();
+  var renameOption = RenameOption({
+    disabled: function disabled(_ref2) {
+      var files = _ref2.files;
+      return !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.FILE_RENAME],
+        permissionsList: files[0].permissions
+      });
+    },
+    disabledTooltip: 'explorerContextMenuPermissionMutedHint'
+  });
+  var addVariationOption = AddVariationOption();
+  var fileEditMenuItems = [renameOption, editImageOption, editVideoOption, addVariationOption];
+  return [].concat(fileEditMenuItems, [createSeparator({
+    key: 'FILE_EDIT_SECTION_SEPARATOR',
+    hideOption: function hideOption(props) {
+      return isSeparatorHidden(fileEditMenuItems, props);
+    }
+  })]);
+};
+export default EditSection;

package/lib/components/ContextMenu/FileMenu/FindSection/index.js

@@ -0,0 +1,29 @@
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../../hooks';
+import isSeparatorHidden from '../../utils/isSeparatorHidden';
+import createSeparator from '../../utils/createSeparator';
+import LocateFileOption from '../../MenuOptions/LocateFileOption';
+import MoveOption from '../../MenuOptions/MoveOption';
+var FindSection = function FindSection() {
+  var _useExplorer = useExplorer(),
+    checkFileFolderPermissions = _useExplorer.checkFileFolderPermissions;
+  var moveOption = MoveOption({
+    disabled: function disabled(_ref) {
+      var files = _ref.files;
+      return !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.FILE_MOVE],
+        permissionsList: files[0].permissions
+      });
+    },
+    disabledTooltip: 'explorerContextMenuPermissionMutedHint'
+  });
+  var locateFileOption = LocateFileOption();
+  var fileFindMenuItems = [locateFileOption, moveOption];
+  return [].concat(fileFindMenuItems, [createSeparator({
+    key: 'FILE_FIND_SECTION_SEPARATOR',
+    hideOption: function hideOption(props) {
+      return isSeparatorHidden(fileFindMenuItems, props);
+    }
+  })]);
+};
+export default FindSection;

package/lib/components/ContextMenu/FileMenu/index.js

@@ -0,0 +1,15 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import CollaborateSection from './CollaborateSection';
+import EditSection from './EditSection';
+import DeleteSection from './DeleteSection';
+import FindSection from './FindSection';
+var FileMenu = function FileMenu() {
+  var fileMenu = [].concat(_toConsumableArray(CollaborateSection()), _toConsumableArray(EditSection()), _toConsumableArray(FindSection()), _toConsumableArray(DeleteSection()));
+  return fileMenu;
+};
+export default FileMenu;

package/lib/components/ContextMenu/FolderMenu/CollaborateSection/index.js

@@ -0,0 +1,17 @@
+import createSeparator from '../../utils/createSeparator';
+import isSeparatorHidden from '../../utils/isSeparatorHidden';
+import DownloadFolderSubMenu from '../../SharedMenus/DownloadFolderSubMenu';
+import DownloadOption from '../../MenuOptions/DownloadOption';
+var CollaborateSection = function CollaborateSection() {
+  var downloadOption = DownloadOption({
+    subListItemsFn: DownloadFolderSubMenu
+  });
+  var folderCollaborateMenuItems = [downloadOption];
+  return [].concat(folderCollaborateMenuItems, [createSeparator({
+    key: 'FOLDER_COLLABORATE_SECTION_SEPARATOR',
+    hideOption: function hideOption(props) {
+      return isSeparatorHidden(folderCollaborateMenuItems, props);
+    }
+  })]);
+};
+export default CollaborateSection;

package/lib/components/ContextMenu/FolderMenu/DeleteSection/index.js

@@ -0,0 +1,41 @@
+import { useSelector } from 'react-redux';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../../hooks';
+import { getDisabledTooltip, isCurrentAndSelectedFolderSame } from '../FolderMenu.utils';
+import { selectCurrentFolder } from '../../../../slices/folders.slice';
+import DeleteOption from '../../MenuOptions/DeleteOption';
+var DeleteSection = function DeleteSection() {
+  var _useExplorer = useExplorer(),
+    checkFileFolderPermissions = _useExplorer.checkFileFolderPermissions;
+  var currentFolder = useSelector(selectCurrentFolder);
+  var deleteOption = DeleteOption({
+    disabled: function disabled(_ref) {
+      var _folders$, _folderTree$;
+      var folders = _ref.folders,
+        _ref$folderTree = _ref.folderTree,
+        folderTree = _ref$folderTree === void 0 ? [] : _ref$folderTree;
+      return !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.FOLDER_DELETE],
+        permissionsList: ((_folders$ = folders[0]) === null || _folders$ === void 0 ? void 0 : _folders$.permissions) || ((_folderTree$ = folderTree[0]) === null || _folderTree$ === void 0 ? void 0 : _folderTree$.permissions)
+      }) || isCurrentAndSelectedFolderSame({
+        folders: folders,
+        currentFolder: currentFolder
+      });
+    },
+    disabledTooltip: function disabledTooltip(_ref2) {
+      var folders = _ref2.folders,
+        folderTree = _ref2.folderTree,
+        i18n = _ref2.i18n;
+      return getDisabledTooltip({
+        folders: folders,
+        folderTree: folderTree,
+        i18n: i18n,
+        permissionsToCheck: [PERMISSIONS.FOLDER_DELETE],
+        currentFolder: currentFolder,
+        checkFileFolderPermissions: checkFileFolderPermissions
+      });
+    }
+  });
+  return [deleteOption];
+};
+export default DeleteSection;

package/lib/components/ContextMenu/FolderMenu/EditSection/index.js

@@ -0,0 +1,49 @@
+import { useSelector } from 'react-redux';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../../hooks';
+import { getDisabledTooltip, isCurrentAndSelectedFolderSame } from '../FolderMenu.utils';
+import { selectCurrentFolder } from '../../../../slices/folders.slice';
+import createSeparator from '../../utils/createSeparator';
+import isSeparatorHidden from '../../utils/isSeparatorHidden';
+import RenameOption from '../../MenuOptions/RenameOption';
+var EditSection = function EditSection() {
+  var _useExplorer = useExplorer(),
+    checkFileFolderPermissions = _useExplorer.checkFileFolderPermissions;
+  var currentFolder = useSelector(selectCurrentFolder);
+  var renameOption = RenameOption({
+    disabled: function disabled(_ref) {
+      var _folders$, _folderTree$;
+      var folders = _ref.folders,
+        _ref$folderTree = _ref.folderTree,
+        folderTree = _ref$folderTree === void 0 ? [] : _ref$folderTree;
+      return !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.FOLDER_RENAME],
+        permissionsList: ((_folders$ = folders[0]) === null || _folders$ === void 0 ? void 0 : _folders$.permissions) || ((_folderTree$ = folderTree[0]) === null || _folderTree$ === void 0 ? void 0 : _folderTree$.permissions)
+      }) || isCurrentAndSelectedFolderSame({
+        folders: folders,
+        currentFolder: currentFolder
+      });
+    },
+    disabledTooltip: function disabledTooltip(_ref2) {
+      var folders = _ref2.folders,
+        folderTree = _ref2.folderTree,
+        i18n = _ref2.i18n;
+      return getDisabledTooltip({
+        folders: folders,
+        folderTree: folderTree,
+        i18n: i18n,
+        permissionsToCheck: [PERMISSIONS.FOLDER_RENAME],
+        currentFolder: currentFolder,
+        checkFileFolderPermissions: checkFileFolderPermissions
+      });
+    }
+  });
+  var folderEditMenuItems = [renameOption];
+  return [].concat(folderEditMenuItems, [createSeparator({
+    key: 'FOLDER_EDIT_SECTION_SEPARATOR',
+    hideOption: function hideOption(props) {
+      return isSeparatorHidden(folderEditMenuItems, props);
+    }
+  })]);
+};
+export default EditSection;

package/lib/components/ContextMenu/FolderMenu/FindSection/index.js

@@ -0,0 +1,49 @@
+import { useSelector } from 'react-redux';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../../hooks';
+import { getDisabledTooltip, isCurrentAndSelectedFolderSame } from '../FolderMenu.utils';
+import { selectCurrentFolder } from '../../../../slices/folders.slice';
+import createSeparator from '../../utils/createSeparator';
+import isSeparatorHidden from '../../utils/isSeparatorHidden';
+import MoveOption from '../../MenuOptions/MoveOption';
+var FindSection = function FindSection() {
+  var _useExplorer = useExplorer(),
+    checkFileFolderPermissions = _useExplorer.checkFileFolderPermissions;
+  var currentFolder = useSelector(selectCurrentFolder);
+  var moveOption = MoveOption({
+    disabled: function disabled(_ref) {
+      var _folders$, _folderTree$;
+      var folders = _ref.folders,
+        _ref$folderTree = _ref.folderTree,
+        folderTree = _ref$folderTree === void 0 ? [] : _ref$folderTree;
+      return !checkFileFolderPermissions({
+        permissionsToCheck: [PERMISSIONS.FOLDER_MOVE],
+        permissionsList: ((_folders$ = folders[0]) === null || _folders$ === void 0 ? void 0 : _folders$.permissions) || ((_folderTree$ = folderTree[0]) === null || _folderTree$ === void 0 ? void 0 : _folderTree$.permissions)
+      }) || isCurrentAndSelectedFolderSame({
+        folders: folders,
+        currentFolder: currentFolder
+      });
+    },
+    disabledTooltip: function disabledTooltip(_ref2) {
+      var folders = _ref2.folders,
+        folderTree = _ref2.folderTree,
+        i18n = _ref2.i18n;
+      return getDisabledTooltip({
+        folders: folders,
+        folderTree: folderTree,
+        i18n: i18n,
+        permissionsToCheck: [PERMISSIONS.FOLDER_MOVE],
+        currentFolder: currentFolder,
+        checkFileFolderPermissions: checkFileFolderPermissions
+      });
+    }
+  });
+  var folderFindMenuItems = [moveOption];
+  return [].concat(folderFindMenuItems, [createSeparator({
+    key: 'FOLDER_FIND_SECTION_SEPARATOR',
+    hideOption: function hideOption(props) {
+      return isSeparatorHidden(folderFindMenuItems, props);
+    }
+  })]);
+};
+export default FindSection;

package/lib/components/ContextMenu/FolderMenu/FolderMenu.utils.js

@@ -0,0 +1,31 @@
+export var isSelected = function isSelected(_ref) {
+  var folders = _ref.folders;
+  return !!folders.length;
+};
+export var isCurrentAndSelectedFolderSame = function isCurrentAndSelectedFolderSame(_ref2) {
+  var _folders$;
+  var currentFolder = _ref2.currentFolder,
+    folders = _ref2.folders;
+  return (currentFolder === null || currentFolder === void 0 ? void 0 : currentFolder.uuid) === ((_folders$ = folders[0]) === null || _folders$ === void 0 ? void 0 : _folders$.uuid);
+};
+export var getDisabledTooltip = function getDisabledTooltip(_ref3) {
+  var _folders$2, _folderTree$;
+  var folders = _ref3.folders,
+    _ref3$folderTree = _ref3.folderTree,
+    folderTree = _ref3$folderTree === void 0 ? [] : _ref3$folderTree,
+    i18n = _ref3.i18n,
+    permissionsToCheck = _ref3.permissionsToCheck,
+    currentFolder = _ref3.currentFolder,
+    checkFileFolderPermissions = _ref3.checkFileFolderPermissions;
+  var hasPermission = checkFileFolderPermissions({
+    permissionsToCheck: permissionsToCheck,
+    permissionsList: ((_folders$2 = folders[0]) === null || _folders$2 === void 0 ? void 0 : _folders$2.permissions) || ((_folderTree$ = folderTree[0]) === null || _folderTree$ === void 0 ? void 0 : _folderTree$.permissions)
+  });
+  if (isCurrentAndSelectedFolderSame({
+    folders: folders,
+    currentFolder: currentFolder
+  }) && hasPermission) {
+    return i18n('explorerContextMenuActiveFolderMutedHint');
+  }
+  return i18n('explorerContextMenuPermissionMutedHint');
+};

package/lib/components/ContextMenu/FolderMenu/index.js

@@ -0,0 +1,14 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import CollaborateSection from './CollaborateSection';
+import EditSection from './EditSection';
+import FindSection from './FindSection';
+import DeleteSection from './DeleteSection';
+var FolderMenu = function FolderMenu() {
+  return [].concat(_toConsumableArray(CollaborateSection()), _toConsumableArray(EditSection()), _toConsumableArray(FindSection()), _toConsumableArray(DeleteSection()));
+};
+export default FolderMenu;

package/lib/components/ContextMenu/MenuOptions/AddVariationOption.js

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { Variations } from '@scaleflex/icons';
+import { DEFAULT_ICON_SIZE } from '../ContextMenu.constants';
+import { selectIsUserAuth } from '@scaleflex/widget-core/lib/slices/user.slice';
+import isSvg from '@scaleflex/widget-utils/lib/isSvg';
+import isImage from '@scaleflex/widget-utils/lib/isImage';
+import { fileWindowUpdated } from '@scaleflex/widget-explorer/lib/slices/panels.slice';
+import { FILE_WINDOW_TAB_IDS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+var AddVariationOption = function AddVariationOption() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    onClick = _ref.onClick,
+    hideOption = _ref.hideOption,
+    disabled = _ref.disabled,
+    disabledTooltip = _ref.disabledTooltip,
+    _ref$isPreUpload = _ref.isPreUpload,
+    isPreUpload = _ref$isPreUpload === void 0 ? false : _ref$isPreUpload;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    checkUserPermissions = _useExplorer.checkUserPermissions,
+    checkPluginExistence = _useExplorer.checkPluginExistence,
+    opts = _useExplorer.opts;
+  var isUserAuth = useSelector(selectIsUserAuth);
+  var isFastToken = opts.isFastToken;
+  var addVariation = function addVariation(_ref2) {
+    var _files$;
+    var files = _ref2.files;
+    dispatch(fileWindowUpdated({
+      "for": (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.uuid,
+      tabId: FILE_WINDOW_TAB_IDS.VARIATIONS
+    }));
+  };
+  var hideAddVariationOption = function hideAddVariationOption(_ref3) {
+    var files = _ref3.files;
+    var isSvgImage = isSvg(files[0]);
+    var isImageFile = isImage(files[0]);
+    return isPreUpload || !isImageFile || isSvgImage || !isUserAuth || isFastToken;
+  };
+  return useMemo(function () {
+    return {
+      key: 'ADD_VARIATION',
+      content: 'explorerContextMenuAddVariationLabel',
+      prefix: function prefix(_ref4) {
+        var iconPrimaryColor = _ref4.iconPrimaryColor;
+        return /*#__PURE__*/_jsx(Variations, {
+          color: iconPrimaryColor,
+          size: DEFAULT_ICON_SIZE
+        });
+      },
+      onClick: onClick || addVariation,
+      hideOption: hideOption || hideAddVariationOption,
+      disabled: disabled,
+      disabledTooltip: disabledTooltip
+    };
+  }, [checkUserPermissions, isPreUpload, checkPluginExistence, isFastToken, isUserAuth, disabled, disabledTooltip, onClick, hideOption]);
+};
+export default AddVariationOption;

package/lib/components/ContextMenu/MenuOptions/BulkEditOption.js

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { Annotate } from '@scaleflex/icons';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { useExplorer } from '../../../hooks';
+import { bulkEditPanelOpened } from '../../../slices/panels.slice';
+import { DEFAULT_ICON_SIZE } from '../ContextMenu.constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+var BulkEditOption = function BulkEditOption() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    onClick = _ref.onClick,
+    hideOption = _ref.hideOption,
+    disabled = _ref.disabled,
+    disabledTooltip = _ref.disabledTooltip;
+  var dispatch = useDispatch();
+  var _useExplorer = useExplorer(),
+    checkUserPermissions = _useExplorer.checkUserPermissions,
+    opts = _useExplorer.opts;
+  var isFastToken = opts.isFastToken;
+  var hideEditBulkOption = function hideEditBulkOption(_ref2) {
+    var foldersUuids = _ref2.foldersUuids;
+    return foldersUuids.length > 0 || !checkUserPermissions([PERMISSIONS.FILE_META]) || isFastToken;
+  };
+  return useMemo(function () {
+    return {
+      key: 'BULK_EDIT',
+      content: 'mutualizedBulkEditLabel',
+      prefix: function prefix(_ref3) {
+        var iconPrimaryColor = _ref3.iconPrimaryColor;
+        return /*#__PURE__*/_jsx(Annotate, {
+          color: iconPrimaryColor,
+          size: DEFAULT_ICON_SIZE
+        });
+      },
+      onClick: onClick || function (_ref4) {
+        var filesUuids = _ref4.filesUuids;
+        return dispatch(bulkEditPanelOpened({
+          "for": filesUuids
+        }));
+      },
+      hideOption: hideOption || hideEditBulkOption,
+      disabled: disabled,
+      disabledTooltip: disabledTooltip
+    };
+  }, [onClick, hideOption, disabled, disabledTooltip, isFastToken]);
+};
+export default BulkEditOption;