@scaleflex/widget-explorer 4.4.0 → 4.5.1

package/lib/components/FileItem/FileInfo/FileInfo.utils.js

@@ -0,0 +1,13 @@
+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); }
+export var getLabelText = function getLabelText(label, currentLanguage) {
+  if (!label) return null;
+  var i18n = label.i18n,
+    name = label.name;
+  if (i18n && _typeof(i18n) === 'object' && Object.keys(i18n).length > 0) {
+    return i18n[currentLanguage];
+  }
+  if (typeof i18n === 'string') {
+    return i18n;
+  }
+  return name;
+};

package/lib/components/FileItem/FileInfo/FileMetadata.js

@@ -0,0 +1,37 @@
+import { EllipsedText } from '@scaleflex/ui/core';
+import { useExplorer, useFileMetadata } from '../../../hooks';
+import FileMetadataFieldValue from '../../common/FileMetadataFieldValue';
+import Styled from './FileInfo.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var FileMetadata = function FileMetadata(_ref) {
+  var _thumbnailMetadataKey;
+  var file = _ref.file;
+  var _useExplorer = useExplorer(),
+    thumbnailMetadataKeys = _useExplorer.opts.thumbnailMetadataKeys;
+  var _useFileMetadata = useFileMetadata({
+      file: file
+    }),
+    findFileMetadataField = _useFileMetadata.findFileMetadataField;
+  return (_thumbnailMetadataKey = thumbnailMetadataKeys.map) === null || _thumbnailMetadataKey === void 0 ? void 0 : _thumbnailMetadataKey.call(thumbnailMetadataKeys, function (metadataKey) {
+    var _ref2 = findFileMetadataField(metadataKey) || {},
+      field = _ref2.field,
+      type = _ref2.type;
+    return field && /*#__PURE__*/_jsxs(Styled.Row, {
+      children: [/*#__PURE__*/_jsx(Styled.Title, {
+        children: /*#__PURE__*/_jsx(EllipsedText, {
+          maxLinesCount: 1,
+          children: field.title
+        })
+      }), /*#__PURE__*/_jsx(Styled.Separator, {
+        children: ":"
+      }), /*#__PURE__*/_jsx(Styled.ValueWrapper, {
+        children: /*#__PURE__*/_jsx(FileMetadataFieldValue, {
+          file: file,
+          field: field,
+          fieldType: type
+        })
+      })]
+    }, metadataKey);
+  });
+};
+export default FileMetadata;

package/lib/components/FileItem/FileInfo/FileName.js

@@ -0,0 +1,197 @@
+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 { useEffect, useMemo, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import { EllipsedText } from '@scaleflex/ui/core';
+import { PERMISSIONS } from '@scaleflex/widget-utils/lib/constants';
+import { uploadUpdated } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import handlePromise from '@scaleflex/widget-utils/lib/handlePromise';
+import isFile from '@scaleflex/widget-utils/lib/isFile';
+import isUploadableFile from '@scaleflex/widget-utils/lib/isUploadableFile';
+import { ScaleflexWidget } from '@scaleflex/widget-core/lib';
+import extractFileDataNoBlob from '@scaleflex/widget-utils/lib/extractFileDataNoBlob';
+import { itemRenameOpened, selectRenameItemFor } from '../../../slices/panels.slice';
+import { renameFile } from '../../../slices/files.slice';
+import { renameFolder } from '../../../slices/folders.slice';
+import { useExplorer, useValidateFileName } from '../../../hooks';
+import { selectIsItemChecked } from '../../../slices/selections.slice';
+import Styled from './FileInfo.styled';
+
+// TODO: seems like it's used from both folders & files, then we need to change to more referrable naming, not file but (item).
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileName = function FileName(_ref) {
+  var _item$info;
+  var item = _ref.file,
+    isListView = _ref.isListView,
+    renameOnDblClick = _ref.renameOnDblClick;
+  var dispatch = useDispatch();
+  var renameItemFor = useSelector(selectRenameItemFor);
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    info = _useExplorer.info,
+    checkUserPermissions = _useExplorer.checkUserPermissions,
+    opts = _useExplorer.opts;
+  var _useValidateFileName = useValidateFileName(),
+    handleItemRenamingValidation = _useValidateFileName.handleItemRenamingValidation;
+  var stagedFileName = useRef(item.name);
+  var isFileType = isFile(item);
+  var isFileSelected = useSelector(function (state) {
+    return selectIsItemChecked(state, item.uuid);
+  });
+  var isLoading = item.loading;
+  var useAssetsPicker = opts.useAssetsPicker;
+  var isPreUpload = isUploadableFile(item);
+  var isUserPermittedToRename = useMemo(function () {
+    return isPreUpload || !useAssetsPicker && checkUserPermissions([PERMISSIONS[isFileType ? 'FILE_RENAME' : 'FOLDER_RENAME']]);
+  }, [checkUserPermissions, isFileType, useAssetsPicker]);
+  if (stagedFileName.current !== item.name) {
+    stagedFileName.current = item.name;
+  }
+  var isRenamingEnabled = isUserPermittedToRename && renameItemFor && renameItemFor === (item.uuid || item.id);
+  var fileName = item.name || (item === null || item === void 0 ? void 0 : (_item$info = item.info) === null || _item$info === void 0 ? void 0 : _item$info.name);
+  var handleMouseDown = function handleMouseDown(event) {
+    if (!isRenamingEnabled || isLoading || !isUserPermittedToRename || event.target.dataset.fileName === item.name) return;
+    event.target.value = stagedFileName.current;
+    handleRenaming(event.target.value);
+  };
+  var triggerRenaming = function triggerRenaming(newName) {
+    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      beforeRequest = _ref2.beforeRequest;
+    if (typeof beforeRequest === 'function') {
+      beforeRequest();
+    }
+
+    // Before/Pre upload case, if the file has id property means it's uploadable item.
+    if (isPreUpload && isFileType) {
+      var newFile = _objectSpread(_objectSpread({}, item), {}, {
+        data: ScaleflexWidget.uploadFilesData[item.id]
+      });
+      var fileRelativePath = newFile.data.relativePath;
+      var renamedFileData = new File([newFile.data], newName, {
+        type: newFile.data.type
+      });
+      newFile.name = newName;
+      newFile.data = extractFileDataNoBlob(renamedFileData);
+      newFile.data.relativePath = fileRelativePath; // for not losing it after changing the data object.
+      if (newFile.info) {
+        newFile.info = _objectSpread(_objectSpread({}, newFile.info), {}, {
+          name: newName
+        });
+      }
+      dispatch(uploadUpdated(newFile));
+      dispatch(itemRenameOpened(null));
+      // Updating the file data in ScaleflexWidget's static object that has all uploads [File] class instance.
+      ScaleflexWidget.uploadFilesData[item.id] = renamedFileData;
+      info(i18n('mutualizedRenamedSuccessfullyInfo'), 'success');
+      return;
+    }
+    var renameAction = isFileType ? renameFile({
+      uuid: item.uuid,
+      name: newName
+    }) : renameFolder({
+      uuid: item.uuid,
+      name: newName
+    });
+    handlePromise(dispatch(renameAction), function () {
+      return info(i18n('mutualizedRenamedSuccessfullyInfo'), 'success');
+    }, info, function () {
+      dispatch(itemRenameOpened(null));
+    });
+  };
+  var handleRenaming = function handleRenaming(newName) {
+    var oldName = item.name;
+    if (!newName || newName === oldName) {
+      dispatch(itemRenameOpened(null));
+      return;
+    }
+    if (isFileType) {
+      var renameValidation = handleItemRenamingValidation(oldName, newName, {
+        onChangeExtension: function onChangeExtension(handleCancellation) {
+          return triggerRenaming(newName, {
+            beforeRequest: function beforeRequest() {
+              return handleCancellation();
+            }
+          });
+        },
+        onKeepOldExtension: function onKeepOldExtension(newNameWithOldExtension, handleCancellation) {
+          if (newNameWithOldExtension !== oldName) {
+            triggerRenaming(newNameWithOldExtension, {
+              beforeRequest: function beforeRequest() {
+                return handleCancellation();
+              }
+            });
+          } else {
+            dispatch(itemRenameOpened(null));
+            handleCancellation();
+          }
+        }
+      });
+      if (!renameValidation.valid) {
+        return;
+      }
+    }
+    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 handleKeyUp = function handleKeyUp(event) {
+    if (!isUserPermittedToRename || isLoading) return;
+    event.stopPropagation();
+    event.preventDefault();
+    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 startRenameSecondClick = function startRenameSecondClick(event) {
+    if (!isUserPermittedToRename || event.detail !== 1 && !renameOnDblClick) return;
+    event.stopPropagation();
+    dispatch(itemRenameOpened(item.uuid || item.id));
+  };
+  useEffect(function () {
+    if (isRenamingEnabled) {
+      window.addEventListener('mousedown', handleMouseDown);
+    }
+    return function () {
+      window.removeEventListener('mousedown', handleMouseDown);
+    };
+  }, [isRenamingEnabled, isLoading]);
+  if (isRenamingEnabled) {
+    return /*#__PURE__*/_jsx(Styled.FileRename, {
+      type: "text",
+      "data-file-name": item.name,
+      defaultValue: fileName,
+      onKeyUp: handleKeyUp,
+      onKeyDown: ignoreEvent,
+      onClick: ignoreEvent,
+      disabled: isLoading,
+      focusOnMount: true,
+      size: "sm"
+    });
+  }
+  return /*#__PURE__*/_jsx(Styled.FileName, {
+    isListView: isListView,
+    onClick: isFileSelected && !renameOnDblClick ? startRenameSecondClick : undefined,
+    onDoubleClick: renameOnDblClick ? startRenameSecondClick : undefined,
+    children: /*#__PURE__*/_jsx(EllipsedText, {
+      maxLinesCount: 1,
+      children: fileName
+    })
+  });
+};
+export default FileName;

package/lib/components/FileItem/FileInfo/index.js

@@ -0,0 +1,200 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useState, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useTheme } from '@scaleflex/ui/theme/hooks';
+import { EllipsedText, TooltipV2 } from '@scaleflex/ui/core';
+import LabelIcon from '@scaleflex/icons/label';
+import getFileExtension from '@scaleflex/widget-utils/lib/getFileExtension';
+import { NEGLECTED_MIME_TYPES, MIME_TYPE_REGEX } from '@scaleflex/widget-utils/lib/constants';
+import getFileType from '@scaleflex/widget-utils/lib/getFileType';
+import getImgFileDimensions from '@scaleflex/widget-utils/lib/getImgFileDimensions';
+import getFileLink from '@scaleflex/widget-utils/lib/getFileLink';
+import prettyFileSize from '@scaleflex/widget-utils/lib/prettyFileSize';
+import isImage from '@scaleflex/widget-utils/lib/isImage';
+import { getVisibilityObject, getFileInheritedVisibility } from '@scaleflex/widget-utils/lib/visibility';
+import { selectUploadsCount } from '@scaleflex/widget-core/lib/slices/uploads.slice';
+import { PC } from '@scaleflex/widget-common';
+import { ScaleflexWidget } from '@scaleflex/widget-core';
+import isUploadableFile from '@scaleflex/widget-utils/lib/isUploadableFile';
+import FileName from './FileName';
+import Styled from './FileInfo.styled';
+import { activateLabel, selectFileLabels } from '../../../slices/labels.slice';
+import { useExplorer, useToLocaleNumber } from '../../../hooks';
+import { selectIsLabelsViewAvailable } from '../../../slices/views.slice';
+import { selectActiveRegionalLang } from '../../../slices/metadata.slice';
+import { selectCurrentFolder } from '../../../slices/folders.slice';
+import FileMetadata from './FileMetadata';
+import OriginalBadge from '../../common/OriginalBadge';
+import { getLabelText } from './FileInfo.utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var FileInfo = function FileInfo(_ref) {
+  var _getFileType$match;
+  var file = _ref.file,
+    handleContextMenuToggle = _ref.handleContextMenuToggle,
+    hideFileName = _ref.hideFileName,
+    hideVisibility = _ref.hideVisibility,
+    showThumbnailMetadata = _ref.showThumbnailMetadata,
+    noTruncate = _ref.noTruncate,
+    showMeta = _ref.showMeta,
+    containerWidth = _ref.containerWidth,
+    isListView = _ref.isListView,
+    renameOnDblClick = _ref.renameOnDblClick,
+    showSimilarSearchOriginalBadge = _ref.showSimilarSearchOriginalBadge;
+  var _useExplorer = useExplorer(),
+    i18n = _useExplorer.i18n,
+    _useExplorer$opts = _useExplorer.opts,
+    disableFileResolutionFallback = _useExplorer$opts.disableFileResolutionFallback,
+    thumbnailMetadataKeys = _useExplorer$opts.thumbnailMetadataKeys,
+    isFastToken = _useExplorer$opts.isFastToken;
+  var dispatch = useDispatch();
+  var toLocaleNumber = useToLocaleNumber();
+  var showUploadsPanel = useSelector(function (state) {
+    return selectUploadsCount(state) > 0;
+  });
+  var theme = useTheme();
+  var iconPrimaryColor = theme.palette[PC.IconsPrimary];
+  var isLabelsViewAvailable = useSelector(selectIsLabelsViewAvailable);
+  var currentLanguage = useSelector(selectActiveRegionalLang);
+  var currentFolder = useSelector(selectCurrentFolder);
+  var visibility = getVisibilityObject((file === null || file === void 0 ? void 0 : file.visibility) || getFileInheritedVisibility(currentFolder));
+  var _ref2 = file.info || {},
+    defaultImgWidth = _ref2.img_w,
+    defaultImgHeight = _ref2.img_h,
+    defaultVideoThumbnailWidth = _ref2.video_w,
+    defaultVideoThumbnailHeight = _ref2.video_h;
+  var _useState = useState({
+      width: defaultImgWidth || defaultVideoThumbnailWidth,
+      height: defaultImgHeight || defaultVideoThumbnailHeight
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    imgDimensions = _useState2[0],
+    setImgDimensions = _useState2[1];
+  var isNegelectedMimeType = NEGLECTED_MIME_TYPES.includes(getFileType((file === null || file === void 0 ? void 0 : file.file) || file));
+  var extension = getFileExtension(file, i18n('mutualizedUnknownText'), isNegelectedMimeType);
+  var fileSize = file.data ? file.data.size : file.size;
+  var showResolution = imgDimensions.width && imgDimensions.height;
+  var visibilityName = i18n(visibility === null || visibility === void 0 ? void 0 : visibility.i18nLabel);
+  var fileLabels = useSelector(function (state) {
+    return selectFileLabels(state, file.labels);
+  });
+  var formattedSize = toLocaleNumber(typeof fileSize === 'string' ? fileSize : fileSize ? prettyFileSize(fileSize) : '');
+  var formattedImgWidth = toLocaleNumber(imgDimensions.width);
+  var formattedImgHeight = toLocaleNumber(imgDimensions.height);
+  var fileType = (_getFileType$match = getFileType((file === null || file === void 0 ? void 0 : file.file) || file).match(MIME_TYPE_REGEX)) === null || _getFileType$match === void 0 ? void 0 : _getFileType$match[1];
+  var isPreUpload = isUploadableFile(file);
+  var isOnlyFirstRowShownInListView = !fileSize && !showResolution && isListView;
+  useEffect(function () {
+    var _file$data;
+    var cancel = false;
+    var isResolutionFallbackEnabled = isPreUpload || !disableFileResolutionFallback;
+    if (isResolutionFallbackEnabled && !file.isRemote && isImage(file) && !((_file$data = file.data) !== null && _file$data !== void 0 && _file$data.thumbnail) && (!defaultImgWidth || !defaultImgHeight) && (!imgDimensions.width || !imgDimensions.height)) {
+      var _file$remote, _file$remote$body;
+      var beforeUploadFileData = (file === null || file === void 0 ? void 0 : file.id) && ScaleflexWidget.uploadFilesData[file.id] || (file === null || file === void 0 ? void 0 : file.data);
+      getImgFileDimensions(beforeUploadFileData instanceof File ? beforeUploadFileData : (file === null || file === void 0 ? void 0 : (_file$remote = file.remote) === null || _file$remote === void 0 ? void 0 : (_file$remote$body = _file$remote.body) === null || _file$remote$body === void 0 ? void 0 : _file$remote$body.url) || getFileLink(file)).then(function (imgDimensions) {
+        if (cancel) return;
+        setImgDimensions(imgDimensions);
+      });
+    }
+    return function () {
+      cancel = true;
+    };
+  }, [file.data, file.url]);
+  var getLabelTooltipTitle = function getLabelTooltipTitle(label) {
+    if (!label) {
+      return;
+    }
+    return /*#__PURE__*/_jsx(Styled.ClickableText, {
+      color: "link-basic-primary",
+      size: "sm",
+      onClick: isLabelsViewAvailable ? function () {
+        return dispatch(activateLabel(label));
+      } : undefined,
+      startIcon: /*#__PURE__*/_jsx(LabelIcon, {
+        color: (label === null || label === void 0 ? void 0 : label.color) || iconPrimaryColor,
+        size: 14
+      }),
+      children: /*#__PURE__*/_jsx(EllipsedText, {
+        maxLinesCount: 1,
+        children: getLabelText(label, currentLanguage)
+      })
+    }, label === null || label === void 0 ? void 0 : label.sid);
+  };
+  return /*#__PURE__*/_jsxs(Styled.FileInfoWrapper, {
+    className: "filerobot-Explorer-Item-fileInfo",
+    isListView: isListView,
+    onContextMenu: handleContextMenuToggle,
+    $onlyFirstRowShown: isOnlyFirstRowShownInListView,
+    children: [/*#__PURE__*/_jsxs(Styled.FirstRow, {
+      $onlyFirstRowShown: isOnlyFirstRowShownInListView,
+      children: [showSimilarSearchOriginalBadge && /*#__PURE__*/_jsx(OriginalBadge, {}), !hideFileName && /*#__PURE__*/_jsx(FileName, {
+        file: file,
+        isListView: isListView && !showSimilarSearchOriginalBadge,
+        noTruncate: noTruncate,
+        containerWidth: containerWidth,
+        renameOnDblClick: renameOnDblClick
+      }), showMeta && !isListView && /*#__PURE__*/_jsx(Styled.FileExtension, {
+        children: /*#__PURE__*/_jsx(Styled.Label, {
+          defaultCursor: Boolean(showUploadsPanel),
+          className: "filerobot-Explorer-Item-statusSize-text",
+          title: "".concat(extension, " (").concat(fileType, ")"),
+          $ellipsis: true,
+          children: extension
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Styled.SecondRow, {
+      children: [/*#__PURE__*/_jsxs(Styled.LeftSection, {
+        children: [fileSize && /*#__PURE__*/_jsx(Styled.Label, {
+          size: "md",
+          children: formattedSize
+        }), showResolution && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Styled.Label, {
+            size: "md",
+            defaultCursor: Boolean(showUploadsPanel),
+            style: {
+              margin: '0px 4px'
+            },
+            children: "\u2022"
+          }), /*#__PURE__*/_jsxs(Styled.Label, {
+            size: "md",
+            defaultCursor: Boolean(showUploadsPanel),
+            children: [formattedImgWidth, "\xD7", formattedImgHeight]
+          })]
+        })]
+      }), !isListView && /*#__PURE__*/_jsxs(Styled.RightSection, {
+        children: [!isFastToken && (fileLabels === null || fileLabels === void 0 ? void 0 : fileLabels.length) > 0 && /*#__PURE__*/_jsx(Styled.FileInfoIcon, {
+          isLabelIcon: true,
+          children: /*#__PURE__*/_jsx(Styled.LabelsTooltip, {
+            arrow: true,
+            position: "top",
+            size: "md",
+            title: fileLabels.map(getLabelTooltipTitle),
+            children: /*#__PURE__*/_jsx(LabelIcon, {
+              size: 14,
+              color: iconPrimaryColor
+            })
+          })
+        }), (visibility === null || visibility === void 0 ? void 0 : visibility.icon) && !hideVisibility && /*#__PURE__*/_jsx(Styled.FileInfoIcon, {
+          isLastIcon: true,
+          children: /*#__PURE__*/_jsx(TooltipV2, {
+            arrow: true,
+            position: "top",
+            size: "md",
+            title: visibilityName,
+            children: /*#__PURE__*/_jsx(visibility.icon, {
+              size: 14,
+              color: iconPrimaryColor
+            })
+          })
+        })]
+      })]
+    }), showThumbnailMetadata && (thumbnailMetadataKeys === null || thumbnailMetadataKeys === void 0 ? void 0 : thumbnailMetadataKeys.length) > 0 && /*#__PURE__*/_jsx(FileMetadata, {
+      file: file
+    })]
+  });
+};
+export default FileInfo;

package/lib/components/FileItem/FileItem.mixin.js

@@ -0,0 +1,22 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { css } from 'styled-components';
+import { PC } from '@scaleflex/widget-common';
+var getItemVariant = function getItemVariant(color, overlayColor) {
+  return function (_ref) {
+    var palette = _ref.theme.palette;
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), palette[color], palette[overlayColor], palette[overlayColor]);
+  };
+};
+var fileItemVariants = function fileItemVariants(_ref2) {
+  var error = _ref2.error,
+    warning = _ref2.warning;
+  if (error) {
+    return getItemVariant(PC.Error, PC.Red_0_1_Overlay);
+  }
+  if (warning) {
+    return getItemVariant(PC.Warning, PC.Orange_0_1_Overlay);
+  }
+  return '';
+};
+export { fileItemVariants };

package/lib/components/FileItem/FileItem.styled.js

@@ -0,0 +1,54 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { FV, PC } from '@scaleflex/widget-common';
+import { Info } from '@scaleflex/icons';
+import styled, { css } from 'styled-components';
+import UploadFileFloatyLabel from '@scaleflex/widget-common/lib/UploadFileFloatyLabel';
+import { fileItemVariants } from './FileItem.mixin';
+var FloatyButton = styled(UploadFileFloatyLabel)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n"])));
+var FileItem = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  border: 1px solid ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  min-width: 214px;\n  max-height: 250px;\n\n  ", "\n\n &:hover {\n    background-color: ", ";\n\n    .filerobot-Explorer-Item-fileInfo{\n      background-color: ", ";\n    }\n\n    .filerobot-common-ItemHoverTopOptions {\n      visibility: visible;\n    }\n\n   ", "\n  }\n\n  ", ";\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.BordersItem];
+}, function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.BackgroundStateless];
+}, function (_ref3) {
+  var breakpoints = _ref3.theme.breakpoints;
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", " {\n      min-width: 178px;\n      max-height: 230px;\n    }\n\n    ", " & {\n      min-width: 178px;\n      max-height: 230px;\n    }\n\n    ", " & {\n      min-width: 178px;\n      max-height: 230px;\n    }\n\n    ", " & {\n      min-width: 178px;\n      max-height: 230px;\n    }\n\n    ", " & {\n      min-width: 178px;\n      max-height: 230px;\n    }\n  "])), breakpoints.between('xs', 'lg'), breakpoints.classes.lg, breakpoints.classes.md, breakpoints.classes.sm, breakpoints.classes.xs);
+}, function (_ref4) {
+  var palette = _ref4.theme.palette;
+  return palette[PC.Extra_0_3_Overlay];
+}, function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.BackgroundActive];
+}, function (_ref6) {
+  var showFloatyButton = _ref6.showFloatyButton;
+  return showFloatyButton && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      ", " {\n        display: inline-flex;\n      }\n   "])), FloatyButton);
+}, function (props) {
+  return fileItemVariants(props);
+});
+var FileItemIconWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n\n  ", "\n\n  img {\n    object-fit: contain;\n    z-index: 1;\n    max-width: 100%;\n    max-height: 100%;\n  }\n"])), function (_ref7) {
+  var breakpoints = _ref7.theme.breakpoints;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", " {\n      height: 174px;\n    }\n\n    ", " {\n      height: 184px;\n    }\n  "])), breakpoints.down('xl'), breakpoints.up('xl'));
+});
+var UploadInfoBar = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 22px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 3px 3px 0 0;\n  position: absolute;\n  color: ", ";\n  top: 0;\n  left: 0;\n  z-index: 2;\n  visibility: hidden;\n  opacity: 1;\n  transition: all 150ms ease-out;\n  ", "\n  ", ";\n"])), function (_ref8) {
+  var palette = _ref8.theme.palette;
+  return palette[PC.ButtonPrimaryText];
+}, function (_ref9) {
+  var palette = _ref9.theme.palette,
+    error = _ref9.error,
+    warning = _ref9.warning;
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    background-color: ", ";\n\n    ", "\n  "])), palette[warning ? PC.Warning : PC.Error], (error || warning) && "\n      opacity: 1;\n      visibility: visible;\n    ");
+}, function (_ref10) {
+  var typography = _ref10.theme.typography;
+  return typography.font[FV.LabelSmall];
+});
+var InfoIcon = styled(Info)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n"])));
+var Styled = {
+  FileItem: FileItem,
+  FileItemIconWrapper: FileItemIconWrapper,
+  UploadInfoBar: UploadInfoBar,
+  InfoIcon: InfoIcon,
+  FloatyButton: FloatyButton
+};
+export default Styled;

package/lib/components/FileItem/FileUploadTopOptions.js

@@ -0,0 +1,87 @@
+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 = ["file", "openFileWindow", "onRemove"];
+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 { useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { ItemHoverTopOptions } from '@scaleflex/widget-common';
+import { Rename, Preview, Remove, EditImage } from '@scaleflex/icons';
+import isPreviewSupported from '@scaleflex/widget-utils/lib/isPreviewSupported';
+import { IMAGE_EDITOR_MODES, PLUGINS_IDS } from '@scaleflex/widget-utils/lib/constants';
+import isImage from '@scaleflex/widget-utils/lib/isImage';
+import { useExplorer } from '../../hooks';
+import { imageEditorOpened, itemRenameOpened } from '../../slices/panels.slice';
+import { useDeleteItemsModal } from '../Modals';
+import { jsx as _jsx } from "react/jsx-runtime";
+var FileUploadTopOptions = function FileUploadTopOptions(_ref) {
+  var file = _ref.file,
+    openFileWindow = _ref.openFileWindow,
+    _onRemove = _ref.onRemove,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var dispatch = useDispatch();
+  var triggerDeleteItemsModal = useDeleteItemsModal();
+  var _useExplorer = useExplorer(),
+    checkPluginExistence = _useExplorer.checkPluginExistence,
+    noImgOperationsAndDownload = _useExplorer.opts.noImgOperationsAndDownload;
+  var isImgEditorPluginFound = checkPluginExistence(PLUGINS_IDS.IMAGE_EDITOR);
+  var renameFile = function renameFile() {
+    // .id for pre-upload case
+    dispatch(itemRenameOpened(file.id));
+  };
+  var triggerEditImage = function triggerEditImage() {
+    dispatch(imageEditorOpened({
+      file: file,
+      mode: IMAGE_EDITOR_MODES.DEFAULT,
+      showBackButton: true,
+      hideSavingOptions: true
+    }));
+  };
+  var deleteFile = function deleteFile() {
+    triggerDeleteItemsModal({
+      filesUuids: [file.id],
+      modalPrimaryButtonColor: 'error-primary',
+      onRemove: function onRemove(_ref2) {
+        var closeModal = _ref2.closeModal;
+        _onRemove(file);
+        closeModal();
+      }
+    });
+  };
+  var hideEditImg = useCallback(function () {
+    return !isImgEditorPluginFound || !isImage(file) || file.isRemote || noImgOperationsAndDownload;
+  }, [isImgEditorPluginFound, checkPluginExistence, noImgOperationsAndDownload, file]);
+  var options = useMemo(function () {
+    return [{
+      key: 'GridLi-PreviewFile',
+      Icon: Preview,
+      iconSize: 12,
+      onClick: openFileWindow,
+      hidden: !isPreviewSupported(file)
+    }, {
+      key: 'GridLi-RenameFile',
+      Icon: Rename,
+      iconSize: 12,
+      onClick: renameFile
+    }, {
+      key: 'GridLi-EditImg',
+      Icon: EditImage,
+      iconSize: 12,
+      onClick: triggerEditImage,
+      hidden: hideEditImg()
+    }, {
+      key: 'GridLi-RemoveFile',
+      Icon: Remove,
+      iconSize: 12,
+      onClick: deleteFile
+    }];
+  }, [file, openFileWindow, hideEditImg]);
+  return /*#__PURE__*/_jsx(ItemHoverTopOptions, _objectSpread({
+    options: options
+  }, props));
+};
+export default FileUploadTopOptions;