@iobroker/adapter-react-v5 4.0.23 → 4.0.24

package/Components/FileBrowser.js

@@ -20,45 +20,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
-var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-var _Toolbar = _interopRequireDefault(require("@mui/material/Toolbar"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
-var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
-var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
-var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
-var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
-var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _Input = _interopRequireDefault(require("@mui/material/Input"));
 var _material = require("@mui/material");
 var _Error = _interopRequireDefault(require("../Dialogs/Error"));
 var _Utils = _interopRequireDefault(require("./Utils"));
 var _TextInput = _interopRequireDefault(require("../Dialogs/TextInput"));
 var _FileViewer = _interopRequireWildcard(require("./FileViewer"));
-var _Refresh = _interopRequireDefault(require("@mui/icons-material/Refresh"));
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-var _Bookmark = _interopRequireDefault(require("@mui/icons-material/Bookmark"));
-var _BookmarkBorder = _interopRequireDefault(require("@mui/icons-material/BookmarkBorder"));
-var _Description = _interopRequireDefault(require("@mui/icons-material/Description"));
-var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
-var _Code = _interopRequireDefault(require("@mui/icons-material/Code"));
-var _InsertDriveFile = _interopRequireDefault(require("@mui/icons-material/InsertDriveFile"));
-var _Publish = _interopRequireDefault(require("@mui/icons-material/Publish"));
-var _MusicNote = _interopRequireDefault(require("@mui/icons-material/MusicNote"));
-var _SaveAlt = _interopRequireDefault(require("@mui/icons-material/SaveAlt"));
-var _CreateNewFolder = _interopRequireDefault(require("@mui/icons-material/CreateNewFolder"));
-var _FolderOpen = _interopRequireDefault(require("@mui/icons-material/FolderOpen"));
-var _List = _interopRequireDefault(require("@mui/icons-material/List"));
-var _ViewModule = _interopRequireDefault(require("@mui/icons-material/ViewModule"));
-var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
-var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _Brightness = _interopRequireDefault(require("@mui/icons-material/Brightness6"));
-var _Image = _interopRequireDefault(require("@mui/icons-material/Image"));
-var _FontDownload = _interopRequireDefault(require("@mui/icons-material/FontDownload"));
-var _AudioFile = _interopRequireDefault(require("@mui/icons-material/AudioFile"));
-var _Videocam = _interopRequireDefault(require("@mui/icons-material/Videocam"));
+var _iconsMaterial = require("@mui/icons-material");
 var _IconExpert = _interopRequireDefault(require("../icons/IconExpert"));
 var _IconClosed = _interopRequireDefault(require("../icons/IconClosed"));
 var _IconOpen = _interopRequireDefault(require("../icons/IconOpen"));
@@ -67,19 +34,24 @@ var _withWidth = _interopRequireDefault(require("./withWidth"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
+                                                                                                                                                                                                                                                                                                                                           * Copyright 2020-2023, bluefox <dogafox@gmail.com>
+                                                                                                                                                                                                                                                                                                                                           *
+                                                                                                                                                                                                                                                                                                                                           * MIT License
+                                                                                                                                                                                                                                                                                                                                           *
+                                                                                                                                                                                                                                                                                                                                           * */ // Icons
 var ROW_HEIGHT = 32;
 var BUTTON_WIDTH = 32;
 var TILE_HEIGHT = 120;
 var TILE_WIDTH = 64;
 var NOT_FOUND = 'Not found';
 var FILE_TYPE_ICONS = {
-  all: _InsertDriveFile["default"],
-  images: _Image["default"],
-  code: _Code["default"],
-  txt: _FontDownload["default"],
-  audio: _AudioFile["default"],
-  video: _Videocam["default"]
+  all: _iconsMaterial.InsertDriveFile,
+  images: _iconsMaterial.Image,
+  code: _iconsMaterial.Code,
+  txt: _iconsMaterial.FontDownload,
+  audio: _iconsMaterial.AudioFile,
+  video: _iconsMaterial.Videocam
 };
 var styles = function styles(theme) {
   return {
@@ -98,6 +70,14 @@ var styles = function styles(theme) {
       overflowY: 'auto',
       padding: theme.spacing(1)
     },
+    filesDivHint: {
+      position: 'absolute',
+      bottom: 0,
+      left: 20,
+      opacity: 0.5,
+      fontStyle: 'italic',
+      fontSize: 10
+    },
     filesDivTable: {
       height: "calc(100% - ".concat(48 + parseInt(theme.spacing(1), 10), "px)")
     },
@@ -334,11 +314,10 @@ var styles = function styles(theme) {
     },
     uploadCenterTextAndIcon: {
       position: 'absolute',
-      top: '50%',
-      left: '50%',
       height: '30%',
-      width: '50%',
-      margin: '-15% 0 0 -25%'
+      width: '100%',
+      margin: 'auto',
+      opacity: 0.3
     },
     menuButtonExpertActive: {
       color: '#c00000'
@@ -350,35 +329,20 @@ var styles = function styles(theme) {
       marginRight: theme.spacing(1),
       textOverflow: 'clip',
       overflow: 'hidden',
-      whiteSpace: 'nowrap'
+      whiteSpace: 'nowrap',
+      backgroundColor: theme.palette.secondary.main
     },
     pathDivInput: {
       width: '100%'
     },
-    pathDivBreadcrumb: {
-      paddingTop: 3,
-      paddingBottom: 2,
-      borderBottom: 'solid 1px'
-    },
     pathDivBreadcrumbDir: {
-      paddingLeft: 4,
-      paddingRight: 4,
-      paddingBottom: 4,
+      paddingLeft: 2,
+      paddingRight: 2,
       cursor: 'pointer',
       '&:hover': {
         background: theme.palette.mode === 'dark' ? '#333' : '#CCC'
       }
     },
-    pathDivBreadcrumbSlash: {
-      paddingLeft: 4,
-      paddingRight: 4,
-      paddingBottom: 4,
-      opacity: 0.7
-    },
-    pathDivBreadcrumbFile: {
-      cursor: 'pointer',
-      flexGrow: 1
-    },
     backgroundImageLight: {
       background: 'white'
     },
@@ -775,7 +739,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       if (_newFolders[folderId] && !force) {
         if (!_checkEmpty) {
           return new Promise(function (resolve, reject) {
-            return Promise.all(_newFolders[folderId].filter(function (item) {
+            Promise.all(_newFolders[folderId].filter(function (item) {
               return item.folder;
             }).map(function (item) {
               return _this7.browseFolder(item.id, _newFolders, true)["catch"](function () {});
@@ -936,18 +900,23 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       var _this9 = this;
       e && e.stopPropagation();
       this.lastSelect = Date.now();
-      folder = folder || getParentDir(this.state.currentDir);
-      if (folder === '/') {
-        folder = '';
+      var _folder = folder || getParentDir(this.state.currentDir);
+      if (_folder === '/') {
+        _folder = '';
       }
-      (window._localStorage || window.localStorage).setItem('files.currentDir', folder);
-      if (folder && !this.state.folders[folder]) {
-        return this.browseFolder(folder).then(function (folders) {
+      (window._localStorage || window.localStorage).setItem('files.currentDir', _folder);
+      if (folder && e && (e.altKey || e.shiftKey || e.ctrlKey || e.metaKey)) {
+        return this.setState({
+          selected: _folder
+        });
+      }
+      if (_folder && !this.state.folders[_folder]) {
+        return this.browseFolder(_folder).then(function (folders) {
           return _this9.setState({
             folders: folders,
-            path: folder,
-            currentDir: folder,
-            selected: folder,
+            path: _folder,
+            currentDir: _folder,
+            selected: _folder,
             pathFocus: false
           }, function () {
             return _this9.props.onSelect && _this9.props.onSelect('');
@@ -955,9 +924,9 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         });
       }
       return this.setState({
-        currentDir: folder,
-        selected: folder,
-        path: folder,
+        currentDir: _folder,
+        selected: _folder,
+        path: _folder,
         pathFocus: false
       }, function () {
         return _this9.props.onSelect && _this9.props.onSelect('');
@@ -1035,7 +1004,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         className: this.props.classes["itemDeleteButton".concat(this.state.viewType)]
       }) : null), this.state.viewType === TABLE && this.props.allowDownload ? /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes["itemDownloadEmpty".concat(this.state.viewType)]
-      }) : null, this.state.viewType === TABLE && this.props.allowDelete && this.state.folders[item.id] && this.state.folders[item.id].length ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }) : null, this.state.viewType === TABLE && this.props.allowDelete && this.state.folders[item.id] && this.state.folders[item.id].length ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         "aria-label": "delete",
         onClick: function onClick(e) {
           e.stopPropagation();
@@ -1049,7 +1018,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         },
         className: this.props.classes["itemDeleteButton".concat(this.state.viewType)],
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, {
         fontSize: "small"
       })) : this.state.viewType === TABLE && this.props.allowDelete ? /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes["itemDeleteButton".concat(this.state.viewType)]
@@ -1069,7 +1038,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         className: _Utils["default"].clsx('browserItem', this.props.classes["item".concat(this.state.viewType)], this.props.classes["itemFolder".concat(this.state.viewType)])
       }, /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], {
         className: this.props.classes["itemFolderIcon".concat(this.state.viewType)]
-      }), /*#__PURE__*/_react["default"].createElement(_ArrowBack["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ArrowBack, {
         className: this.props.classes.itemFolderIconBack
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(this.props.classes["itemName".concat(this.state.viewType)], this.props.classes["itemNameFolder".concat(this.state.viewType)])
@@ -1092,7 +1061,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       }
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes["itemAccess".concat(this.state.viewType)]
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         size: "large",
         onClick: function onClick() {
           return _this13.setState({
@@ -1108,21 +1077,21 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       switch (ext) {
         case 'json':
         case 'json5':
-          return /*#__PURE__*/_react["default"].createElement(_Bookmark["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Bookmark, {
             className: this.props.classes["itemIcon".concat(this.state.viewType)]
           });
         case 'css':
-          return /*#__PURE__*/_react["default"].createElement(_BookmarkBorder["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_iconsMaterial.BookmarkBorder, {
             className: this.props.classes["itemIcon".concat(this.state.viewType)]
           });
         case 'js':
         case 'ts':
-          return /*#__PURE__*/_react["default"].createElement(_Code["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Code, {
             className: this.props.classes["itemIcon".concat(this.state.viewType)]
           });
         case 'html':
         case 'md':
-          return /*#__PURE__*/_react["default"].createElement(_Description["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Description, {
             className: this.props.classes["itemIcon".concat(this.state.viewType)]
           });
         case 'mp3':
@@ -1131,11 +1100,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         case 'm4a':
         case 'mp4':
         case 'flac':
-          return /*#__PURE__*/_react["default"].createElement(_MusicNote["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_iconsMaterial.MusicNote, {
             className: this.props.classes["itemIcon".concat(this.state.viewType)]
           });
         default:
-          return /*#__PURE__*/_react["default"].createElement(_InsertDriveFile["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_iconsMaterial.InsertDriveFile, {
             className: this.props.classes["itemIcon".concat(this.state.viewType)]
           });
       }
@@ -1149,7 +1118,8 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         id: item.id,
-        onDoubleClick: function onDoubleClick() {
+        onDoubleClick: function onDoubleClick(e) {
+          e.stopPropagation();
           if (!_this14.props.onSelect) {
             _this14.setState({
               viewer: _this14.imagePrefix + item.id,
@@ -1191,7 +1161,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         smDown: true
       }, this.state.viewType === TABLE ? this.formatAcl(item.acl) : null), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
         smDown: true
-      }, this.state.viewType === TABLE && this.props.expertMode && FileBrowser.getEditFile(ext) ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, this.state.viewType === TABLE && this.props.expertMode && FileBrowser.getEditFile(ext) ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         "aria-label": "edit",
         onClick: function onClick(e) {
           e.stopPropagation();
@@ -1206,7 +1176,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         },
         className: this.props.classes["itemDeleteButton".concat(this.state.viewType)],
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Edit, {
         fontSize: "small"
       })) : /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes["itemDeleteButton".concat(this.state.viewType)]
@@ -1218,7 +1188,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick(e) {
           e.stopPropagation();
         }
-      }, /*#__PURE__*/_react["default"].createElement(_SaveAlt["default"], null)) : null, this.state.viewType === TABLE && this.props.allowDelete && item.id !== 'vis.0/' && item.id !== 'vis-2-beta.0/' && item.id !== USER_DATA ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.SaveAlt, null)) : null, this.state.viewType === TABLE && this.props.allowDelete && item.id !== 'vis.0/' && item.id !== 'vis-2-beta.0/' && item.id !== USER_DATA ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         "aria-label": "delete",
         onClick: function onClick(e) {
           e.stopPropagation();
@@ -1232,7 +1202,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         },
         className: this.props.classes["itemDeleteButton".concat(this.state.viewType)],
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, {
         fontSize: "small"
       })) : this.state.viewType === TABLE && this.props.allowDelete ? /*#__PURE__*/_react["default"].createElement("div", {
         className: this.props.classes["itemDeleteButton".concat(this.state.viewType)]
@@ -1278,7 +1248,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         style: {
           position: 'relative'
         }
-      }, /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.CircularProgress, {
         key: folderId,
         color: "secondary",
         size: 24
@@ -1297,10 +1267,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
     value: function renderToolbar() {
       var _this16 = this;
       var IconType = this.props.showTypeSelector ? FILE_TYPE_ICONS[this.state.filterByType || 'all'] || FILE_TYPE_ICONS.all : null;
-      return /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+      var isInFolder = this.findFirstFolder(this.state.selected);
+      return /*#__PURE__*/_react["default"].createElement(_material.Toolbar, {
         key: "toolbar",
         variant: "dense"
-      }, this.props.showExpertButton ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, this.props.showExpertButton ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         edge: "start",
         title: this.props.t('ra_Toggle expert mode'),
         className: _Utils["default"].clsx(this.props.classes.menuButton, this.state.expertMode && this.props.classes.menuButtonExpertActive),
@@ -1313,7 +1284,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         size: "small"
       }, /*#__PURE__*/_react["default"].createElement(_IconExpert["default"], {
         fontSize: "small"
-      })) : null, this.props.showViewTypeButton ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      })) : null, this.props.showViewTypeButton ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         edge: "start",
         title: this.props.t('ra_Toggle view mode'),
         className: this.props.classes.menuButton,
@@ -1335,11 +1306,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           });
         },
         size: "small"
-      }, this.state.viewType !== TABLE ? /*#__PURE__*/_react["default"].createElement(_List["default"], {
+      }, this.state.viewType !== TABLE ? /*#__PURE__*/_react["default"].createElement(_iconsMaterial.List, {
         fontSize: "small"
-      }) : /*#__PURE__*/_react["default"].createElement(_ViewModule["default"], {
+      }) : /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ViewModule, {
         fontSize: "small"
-      })) : null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      })) : null, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         edge: "start",
         title: this.props.t('ra_Hide empty folders'),
         className: this.props.classes.menuButton,
@@ -1352,9 +1323,9 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           });
         },
         size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_FolderOpen["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FolderOpen, {
         fontSize: "small"
-      })), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      })), /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         edge: "start",
         title: this.props.t('ra_Reload files'),
         className: this.props.classes.menuButton,
@@ -1368,11 +1339,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           });
         },
         size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_Refresh["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Refresh, {
         fontSize: "small"
-      })), this.props.allowCreateFolder ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      })), this.props.allowCreateFolder ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         edge: "start",
-        disabled: !this.state.selected || !this.state.folders[this.state.selected] || this.limitToPath && !this.state.selected.startsWith("".concat(this.limitToPath, "/")) && this.limitToPath !== this.state.selected,
+        disabled: !this.state.selected || !isInFolder || this.limitToPath && !this.state.selected.startsWith("".concat(this.limitToPath, "/")) && this.limitToPath !== this.state.selected,
         title: this.props.t('ra_Create folder'),
         className: this.props.classes.menuButton,
         color: "inherit",
@@ -1383,11 +1354,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           });
         },
         size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_CreateNewFolder["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.CreateNewFolder, {
         fontSize: "small"
-      })) : null, this.props.allowUpload ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      })) : null, this.props.allowUpload ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         edge: "start",
-        disabled: !this.state.selected || !this.state.folders[this.state.selected] || this.limitToPath && !this.state.selected.startsWith("".concat(this.limitToPath, "/")) && this.limitToPath !== this.state.selected,
+        disabled: !this.state.selected || !isInFolder || this.limitToPath && !this.state.selected.startsWith("".concat(this.limitToPath, "/")) && this.limitToPath !== this.state.selected,
         title: this.props.t('ra_Upload file'),
         className: this.props.classes.menuButton,
         color: "inherit",
@@ -1398,11 +1369,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
           });
         },
         size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_Publish["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Publish, {
         fontSize: "small"
       })) : null, this.props.showTypeSelector ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Filter files')
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         size: "small",
         onClick: function onClick(e) {
           return _this16.setState({
@@ -1444,15 +1415,36 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         })), /*#__PURE__*/_react["default"].createElement(_material.ListItemText, null, _this16.props.t("ra_fileType_".concat(type))));
       })) : null, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Background image')
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         color: "inherit",
         edge: "start",
         className: this.props.classes.menuButton,
         onClick: this.setStateBackgroundImage,
         size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_Brightness["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Brightness6, {
+        fontSize: "small"
+      }))), this.state.viewType !== TABLE && this.props.allowDelete ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
+        title: this.props.t('ra_Delete')
+      }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+        "aria-label": "delete",
+        disabled: !this.state.selected || this.state.selected === 'vis.0/' || this.state.selected === 'vis-2-beta.0/' || this.state.selected === USER_DATA,
+        color: "inherit",
+        edge: "start",
+        className: this.props.classes.menuButton,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          if (_this16.suppressDeleteConfirm > Date.now()) {
+            _this16.deleteItem(_this16.state.selected);
+          } else {
+            _this16.setState({
+              deleteItem: _this16.state.selected
+            });
+          }
+        },
+        size: "small"
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, {
         fontSize: "small"
-      }))));
+      })))) : null);
     }
   }, {
     key: "findItem",
@@ -1583,7 +1575,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
     value: function renderUpload() {
       var _this19 = this;
       if (this.state.uploadFile) {
-        return [/*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+        return [/*#__PURE__*/_react["default"].createElement(_material.Fab, {
           key: "close",
           color: "primary",
           "aria-label": "close",
@@ -1593,7 +1585,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
               uploadFile: false
             });
           }
-        }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null)), /*#__PURE__*/_react["default"].createElement(_reactDropzone["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)), /*#__PURE__*/_react["default"].createElement(_reactDropzone["default"], {
           key: "dropzone",
           onDragEnter: function onDragEnter() {
             return _this19.setState({
@@ -1675,7 +1667,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             className: _this19.props.classes.uploadCenterDiv
           }, /*#__PURE__*/_react["default"].createElement("div", {
             className: _this19.props.classes.uploadCenterTextAndIcon
-          }, /*#__PURE__*/_react["default"].createElement(_Publish["default"], {
+          }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Publish, {
             className: _this19.props.classes.uploadCenterIcon
           }), /*#__PURE__*/_react["default"].createElement("div", {
             className: _this19.props.classes.uploadCenterText
@@ -1747,6 +1739,11 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
             newState.expanded = expanded;
           }
+          if (_this21.state.selected === _deleteItem) {
+            var parts = _this21.state.selected.split('/');
+            parts.pop();
+            newState.selected = parts.join('/');
+          }
           if (!_this21.supportSubscribes) {
             var parentFolder = _this21.findFirstFolder(_deleteItem);
             var folders = {};
@@ -1776,7 +1773,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
     value: function renderDeleteDialog() {
       var _this22 = this;
       if (this.state.deleteItem) {
-        return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
           key: "deleteDialog",
           open: !0,
           onClose: function onClose() {
@@ -1785,23 +1782,23 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
             });
           },
           "aria-labelledby": "form-dialog-title"
-        }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, {
           id: "form-dialog-title"
-        }, this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop())), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], null, this.props.t('ra_Are you sure?'))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        }, this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop())), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_material.DialogContentText, null, this.props.t('ra_Are you sure?'))), /*#__PURE__*/_react["default"].createElement(_material.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
           color: "grey",
           variant: "contained",
           onClick: function onClick() {
             _this22.suppressDeleteConfirm = Date.now() + 60000 * 5;
             _this22.deleteItem();
           }
-        }, this.props.t('ra_Delete (no confirm for 5 mins)')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        }, this.props.t('ra_Delete (no confirm for 5 mins)')), /*#__PURE__*/_react["default"].createElement(_material.Button, {
           variant: "contained",
           onClick: function onClick() {
             return _this22.deleteItem();
           },
           color: "primary",
           autoFocus: true
-        }, this.props.t('ra_Delete')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        }, this.props.t('ra_Delete')), /*#__PURE__*/_react["default"].createElement(_material.Button, {
           variant: "contained",
           onClick: function onClick() {
             return _this22.setState({
@@ -1914,33 +1911,29 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
     key: "renderBreadcrumb",
     value: function renderBreadcrumb() {
       var _this26 = this;
-      var parts = this.state.selected.startsWith('/') ? this.state.selected.split('/') : "/".concat(this.state.selected).split('/');
+      var parts = this.state.currentDir.startsWith('/') ? this.state.currentDir.split('/') : "/".concat(this.state.currentDir).split('/');
       var p = [];
-      return parts.map(function (part, i) {
+      return /*#__PURE__*/_react["default"].createElement(_material.Breadcrumbs, null, parts.map(function (part, i) {
         part && p.push(part);
         var path = p.join('/');
         if (i < parts.length - 1) {
-          return [/*#__PURE__*/_react["default"].createElement("div", {
+          return /*#__PURE__*/_react["default"].createElement("div", {
             key: "".concat(_this26.state.selected, "_").concat(i),
             className: _this26.props.classes.pathDivBreadcrumbDir,
             onClick: function onClick(e) {
               return _this26.changeFolder(e, path || '/');
             }
-          }, part || _this26.props.t('ra_Root')), /*#__PURE__*/_react["default"].createElement("span", {
-            key: "".concat(_this26.state.selected, "_s_").concat(i),
-            className: _this26.props.classes.pathDivBreadcrumbSlash
-          }, '>')];
+          }, part || _this26.props.t('ra_Root'));
         }
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: "".concat(_this26.state.selected, "_").concat(i),
-          className: _this26.props.classes.pathDivBreadcrumbFile,
           onClick: function onClick() {
             return _this26.setState({
               pathFocus: true
             });
           }
         }, part);
-      });
+      }));
     }
   }, {
     key: "renderPath",
@@ -1948,12 +1941,24 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
       var _this27 = this;
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: "path",
-        className: _Utils["default"].clsx(this.props.classes.pathDiv, !this.state.pathFocus && this.props.classes.pathDivBreadcrumb)
-      }, this.state.pathFocus ? /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+        className: this.props.classes.pathDiv
+      }, this.state.pathFocus ? /*#__PURE__*/_react["default"].createElement(_material.Input, {
         value: this.state.path,
         onKeyDown: function onKeyDown(e) {
-          return e.keyCode === 13 && _this27.changeToPath();
+          if (e.keyCode === 13) {
+            _this27.changeToPath();
+          } else if (e.keyCode === 27) {
+            _this27.setState({
+              pathFocus: false
+            });
+          }
         },
+        endAdornment: /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
+          size: "small",
+          onClick: function onClick() {
+            return _this27.changeToPath();
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.KeyboardReturn, null)),
         onBlur: function onBlur() {
           return _this27.changeToPath();
         },
@@ -1970,7 +1975,7 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this28 = this;
       if (!this.props.ready) {
-        return /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], null);
+        return /*#__PURE__*/_react["default"].createElement(_material.LinearProgress, null);
       }
       if (this.state.loadAllFolders && !this.foldersLoading) {
         this.foldersLoading = true;
@@ -1988,8 +1993,19 @@ var FileBrowser = /*#__PURE__*/function (_Component) {
         style: this.props.style,
         className: _Utils["default"].clsx(this.props.classes.root, this.props.className)
       }, this.props.showToolbar ? this.renderToolbar() : null, this.state.viewType === TILE ? this.renderPath() : null, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _Utils["default"].clsx(this.props.classes.filesDiv, this.props.classes["filesDiv".concat(this.state.viewType)])
-      }, this.state.viewType === TABLE ? this.renderItems('/') : this.renderItems(this.state.currentDir || '/')), this.props.allowUpload ? this.renderInputDialog() : null, this.props.allowUpload ? this.renderUpload() : null, this.props.allowDelete ? this.renderDeleteDialog() : null, this.props.allowView ? this.renderViewDialog() : null, this.state.modalEditOfAccess && this.props.modalEditOfAccessControl && this.props.modalEditOfAccessControl(this, this.state.modalEditOfAccessObjData), this.renderError());
+        className: _Utils["default"].clsx(this.props.classes.filesDiv, this.props.classes["filesDiv".concat(this.state.viewType)]),
+        onClick: function onClick(e) {
+          if (_this28.state.viewType !== TABLE) {
+            if (_this28.state.selected !== (_this28.state.currentDir || '/')) {
+              _this28.changeFolder(e, _this28.state.currentDir || '/');
+            } else {
+              e.stopPropagation();
+            }
+          }
+        }
+      }, this.state.viewType === TABLE ? this.renderItems('/') : this.renderItems(this.state.currentDir || '/'), this.state.viewType !== TABLE ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.filesDivHint
+      }, this.props.t('ra_select_folder_hint')) : null), this.props.allowUpload ? this.renderInputDialog() : null, this.props.allowUpload ? this.renderUpload() : null, this.props.allowDelete ? this.renderDeleteDialog() : null, this.props.allowView ? this.renderViewDialog() : null, this.state.modalEditOfAccess && this.props.modalEditOfAccessControl && this.props.modalEditOfAccessControl(this, this.state.modalEditOfAccessObjData), this.renderError());
     }
   }], [{
     key: "getDerivedStateFromProps",