@iobroker/adapter-react-v5 4.10.0 → 4.10.2

package/Components/FileBrowser.js

@@ -1,2177 +1,1595 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports["default"] = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/styles");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
-var _material = require("@mui/material");
-var _iconsMaterial = require("@mui/icons-material");
-var _Error = _interopRequireDefault(require("../Dialogs/Error"));
-var _Utils = _interopRequireDefault(require("./Utils"));
-var _TextInput = _interopRequireDefault(require("../Dialogs/TextInput"));
-var _IconExpert = _interopRequireDefault(require("../icons/IconExpert"));
-var _IconClosed = _interopRequireDefault(require("../icons/IconClosed"));
-var _IconOpen = _interopRequireDefault(require("../icons/IconOpen"));
-var _IconNoIcon = _interopRequireDefault(require("../icons/IconNoIcon"));
-var _withWidth = _interopRequireDefault(require("./withWidth"));
-var _FileViewer = _interopRequireWildcard(require("./FileViewer"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
- * Copyright 2020-2023, Denis Haev <dogafox@gmail.com>
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Copyright 2020-2024, Denis Haev <dogafox@gmail.com>
  *
  * MIT License
  *
- * */ // MUI Icons
+ * */
+const react_1 = __importStar(require("react"));
+const styles_1 = require("@mui/styles");
+const react_dropzone_1 = __importDefault(require("react-dropzone"));
+const material_1 = require("@mui/material");
+// MUI Icons
+const icons_material_1 = require("@mui/icons-material");
+const Error_1 = __importDefault(require("../Dialogs/Error"));
+const Utils_1 = __importDefault(require("./Utils"));
+const TextInput_1 = __importDefault(require("../Dialogs/TextInput"));
 // Custom 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: _iconsMaterial.InsertDriveFile,
-  images: _iconsMaterial.Image,
-  code: _iconsMaterial.Code,
-  txt: _iconsMaterial.FontDownload,
-  audio: _iconsMaterial.AudioFile,
-  video: _iconsMaterial.Videocam
+const IconExpert_1 = __importDefault(require("../icons/IconExpert"));
+const IconClosed_1 = __importDefault(require("../icons/IconClosed"));
+const IconOpen_1 = __importDefault(require("../icons/IconOpen"));
+const IconNoIcon_1 = __importDefault(require("../icons/IconNoIcon"));
+const withWidth_1 = __importDefault(require("./withWidth"));
+const FileViewer_1 = __importStar(require("./FileViewer"));
+const ROW_HEIGHT = 32;
+const BUTTON_WIDTH = 32;
+const TILE_HEIGHT = 120;
+const TILE_WIDTH = 64;
+const NOT_FOUND = 'Not found';
+const FILE_TYPE_ICONS = {
+    all: icons_material_1.InsertDriveFile,
+    images: icons_material_1.Image,
+    code: icons_material_1.Code,
+    txt: icons_material_1.FontDownload,
+    audio: icons_material_1.AudioFile,
+    video: icons_material_1.Videocam,
 };
-var styles = function styles(theme) {
-  return {
+const styles = (theme) => ({
     dialog: {
-      height: "calc(100% - ".concat(theme.mixins.toolbar.minHeight, "px)")
+        height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
     },
     root: {
-      width: '100%',
-      overflow: 'hidden',
-      height: '100%',
-      position: 'relative'
+        width: '100%',
+        overflow: 'hidden',
+        height: '100%',
+        position: 'relative',
     },
     filesDiv: {
-      width: "calc(100% - ".concat(theme.spacing(2), ")"),
-      overflowX: 'hidden',
-      overflowY: 'auto',
-      padding: theme.spacing(1)
+        width: `calc(100% - ${theme.spacing(2)})`,
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        padding: theme.spacing(1),
     },
     filesDivHint: {
-      position: 'absolute',
-      bottom: 0,
-      left: 20,
-      opacity: 0.7,
-      fontStyle: 'italic',
-      fontSize: 12
+        position: 'absolute',
+        bottom: 0,
+        left: 20,
+        opacity: 0.7,
+        fontStyle: 'italic',
+        fontSize: 12,
     },
     filesDivTable: {
-      height: "calc(100% - ".concat(48 + parseInt(theme.spacing(1), 10), "px)")
+        height: `calc(100% - ${48 + parseInt(theme.spacing(1), 10)}px)`,
     },
     filesDivTile: {
-      height: "calc(100% - ".concat(48 * 2 + parseInt(theme.spacing(1), 10), "px)"),
-      display: 'flex',
-      alignContent: 'flex-start',
-      alignItems: 'stretch',
-      flexWrap: 'wrap',
-      flex: "0 0 ".concat(TILE_WIDTH, "px")
+        height: `calc(100% - ${48 * 2 + parseInt(theme.spacing(1), 10)}px)`,
+        display: 'flex',
+        alignContent: 'flex-start',
+        alignItems: 'stretch',
+        flexWrap: 'wrap',
+        flex: `0 0 ${TILE_WIDTH}px`,
     },
     itemTile: {
-      position: 'relative',
-      userSelect: 'none',
-      cursor: 'pointer',
-      height: TILE_HEIGHT,
-      width: TILE_WIDTH,
-      display: 'inline-block',
-      textAlign: 'center',
-      opacity: 0.1,
-      transition: 'opacity 1s',
-      margin: 4,
-      '&:hover': {
-        background: theme.palette.secondary.light,
-        color: _Utils["default"].invertColor(theme.palette.secondary.main, true)
-      }
+        position: 'relative',
+        userSelect: 'none',
+        cursor: 'pointer',
+        height: TILE_HEIGHT,
+        width: TILE_WIDTH,
+        display: 'inline-block',
+        textAlign: 'center',
+        opacity: 0.1,
+        transition: 'opacity 1s',
+        margin: 4,
+        '&:hover': {
+            background: theme.palette.secondary.light,
+            color: Utils_1.default.invertColor(theme.palette.secondary.main, true),
+        },
     },
     itemNameFolderTile: {
-      fontWeight: 'bold'
+        fontWeight: 'bold',
     },
     itemNameTile: {
-      width: '100%',
-      height: 32,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      fontSize: 12,
-      textAlign: 'center',
-      wordBreak: 'break-all'
+        width: '100%',
+        height: 32,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: 12,
+        textAlign: 'center',
+        wordBreak: 'break-all',
     },
     itemFolderIconTile: {
-      width: '100%',
-      height: TILE_HEIGHT - 32 - 16 - 8,
-      // name + size
-      display: 'block',
-      paddingLeft: 8,
-      color: theme.palette.secondary.main || '#fbff7d'
+        width: '100%',
+        height: TILE_HEIGHT - 32 - 16 - 8, // name + size
+        display: 'block',
+        paddingLeft: 8,
+        color: theme.palette.secondary.main || '#fbff7d',
     },
     itemFolderIconBack: {
-      position: 'absolute',
-      top: 22,
-      left: 18,
-      zIndex: 1,
-      color: theme.palette.mode === 'dark' ? '#FFF' : '#000'
+        position: 'absolute',
+        top: 22,
+        left: 18,
+        zIndex: 1,
+        color: theme.palette.mode === 'dark' ? '#FFF' : '#000',
     },
     itemSizeTile: {
-      width: '100%',
-      height: 16,
-      textAlign: 'center',
-      fontSize: 10
+        width: '100%',
+        height: 16,
+        textAlign: 'center',
+        fontSize: 10,
     },
     itemImageTile: {
-      width: 'calc(100% - 8px)',
-      height: TILE_HEIGHT - 32 - 16 - 8,
-      // name + size
-      margin: 4,
-      display: 'block',
-      textAlign: 'center',
-      objectFit: 'contain'
+        width: 'calc(100% - 8px)',
+        height: TILE_HEIGHT - 32 - 16 - 8, // name + size
+        margin: 4,
+        display: 'block',
+        textAlign: 'center',
+        objectFit: 'contain',
     },
     itemIconTile: {
-      width: '100%',
-      height: TILE_HEIGHT - 32 - 16 - 8,
-      // name + size
-      display: 'block',
-      objectFit: 'contain'
+        width: '100%',
+        height: TILE_HEIGHT - 32 - 16 - 8, // name + size
+        display: 'block',
+        objectFit: 'contain',
     },
     itemSelected: {
-      background: theme.palette.primary.main,
-      color: _Utils["default"].invertColor(theme.palette.primary.main, true)
+        background: theme.palette.primary.main,
+        color: Utils_1.default.invertColor(theme.palette.primary.main, true),
     },
     itemTable: {
-      userSelect: 'none',
-      cursor: 'pointer',
-      height: ROW_HEIGHT,
-      display: 'inline-flex',
-      lineHeight: "".concat(ROW_HEIGHT, "px"),
-      '&:hover': {
-        background: theme.palette.secondary.light,
-        color: _Utils["default"].invertColor(theme.palette.secondary.main, true)
-      }
+        userSelect: 'none',
+        cursor: 'pointer',
+        height: ROW_HEIGHT,
+        display: 'inline-flex',
+        lineHeight: `${ROW_HEIGHT}px`,
+        '&:hover': {
+            background: theme.palette.secondary.light,
+            color: Utils_1.default.invertColor(theme.palette.secondary.main, true),
+        },
     },
     itemNameTable: {
-      display: 'inline-block',
-      paddingLeft: 10,
-      fontSize: '1rem',
-      verticalAlign: 'top',
-      flexGrow: 1
+        display: 'inline-block',
+        paddingLeft: 10,
+        fontSize: '1rem',
+        verticalAlign: 'top',
+        flexGrow: 1,
     },
     itemNameFolderTable: {
-      fontWeight: 'bold'
+        fontWeight: 'bold',
     },
     itemSizeTable: {
-      display: 'inline-block',
-      width: 60,
-      verticalAlign: 'top',
-      textAlign: 'right'
+        display: 'inline-block',
+        width: 60,
+        verticalAlign: 'top',
+        textAlign: 'right',
     },
     itemAccessTable: {
-      // display: 'inline-block',
-      verticalAlign: 'top',
-      width: 60,
-      textAlign: 'right',
-      paddingRight: 5,
-      display: 'flex',
-      justifyContent: 'center'
+        // display: 'inline-block',
+        verticalAlign: 'top',
+        width: 60,
+        textAlign: 'right',
+        paddingRight: 5,
+        display: 'flex',
+        justifyContent: 'center',
     },
     itemImageTable: {
-      display: 'inline-block',
-      width: 30,
-      marginTop: 1,
-      objectFit: 'contain',
-      maxHeight: 30
+        display: 'inline-block',
+        width: 30,
+        marginTop: 1,
+        objectFit: 'contain',
+        maxHeight: 30,
     },
     itemIconTable: {
-      display: 'inline-block',
-      marginTop: 1,
-      width: 30,
-      height: 30
+        display: 'inline-block',
+        marginTop: 1,
+        width: 30,
+        height: 30,
     },
     itemFolderTable: {},
     itemFolderTemp: {
-      opacity: 0.4
+        opacity: 0.4,
     },
     itemFolderIconTable: {
-      marginTop: 1,
-      marginLeft: theme.spacing(1),
-      display: 'inline-block',
-      width: 30,
-      height: 30,
-      color: theme.palette.secondary.main || '#fbff7d'
+        marginTop: 1,
+        marginLeft: theme.spacing(1),
+        display: 'inline-block',
+        width: 30,
+        height: 30,
+        color: theme.palette.secondary.main || '#fbff7d',
     },
     itemDownloadButtonTable: {
-      display: 'inline-block',
-      width: BUTTON_WIDTH,
-      height: ROW_HEIGHT,
-      minWidth: BUTTON_WIDTH,
-      verticalAlign: 'middle',
-      textAlign: 'center',
-      padding: 0,
-      borderRadius: BUTTON_WIDTH / 2,
-      '&:hover': {
-        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)'
-      },
-      '& span': {
-        paddingTop: 9
-      },
-      '& svg': {
-        width: 14,
-        height: 14,
-        fontSize: '1rem',
-        marginTop: -3,
+        display: 'inline-block',
+        width: BUTTON_WIDTH,
+        height: ROW_HEIGHT,
+        minWidth: BUTTON_WIDTH,
         verticalAlign: 'middle',
-        color: theme.palette.mode === 'dark' ? '#EEE' : '#111'
-      }
+        textAlign: 'center',
+        padding: 0,
+        borderRadius: BUTTON_WIDTH / 2,
+        '&:hover': {
+            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)',
+        },
+        '& span': {
+            paddingTop: 9,
+        },
+        '& svg': {
+            width: 14,
+            height: 14,
+            fontSize: '1rem',
+            marginTop: -3,
+            verticalAlign: 'middle',
+            color: theme.palette.mode === 'dark' ? '#EEE' : '#111',
+        },
     },
     itemDownloadEmptyTable: {
-      display: 'inline-block',
-      width: BUTTON_WIDTH,
-      height: ROW_HEIGHT,
-      minWidth: BUTTON_WIDTH,
-      padding: 0
+        display: 'inline-block',
+        width: BUTTON_WIDTH,
+        height: ROW_HEIGHT,
+        minWidth: BUTTON_WIDTH,
+        padding: 0,
     },
     itemAclButtonTable: {
-      width: BUTTON_WIDTH,
-      height: ROW_HEIGHT,
-      minWidth: BUTTON_WIDTH,
-      verticalAlign: 'top',
-      padding: 0,
-      fontSize: 12,
-      display: 'flex'
+        width: BUTTON_WIDTH,
+        height: ROW_HEIGHT,
+        minWidth: BUTTON_WIDTH,
+        verticalAlign: 'top',
+        padding: 0,
+        fontSize: 12,
+        display: 'flex',
     },
     itemDeleteButtonTable: {
-      display: 'inline-block',
-      width: BUTTON_WIDTH,
-      height: ROW_HEIGHT,
-      minWidth: BUTTON_WIDTH,
-      verticalAlign: 'top',
-      padding: 0,
-      '& svg': {
-        width: 18,
-        height: 18,
-        fontSize: '1.5rem'
-      }
+        display: 'inline-block',
+        width: BUTTON_WIDTH,
+        height: ROW_HEIGHT,
+        minWidth: BUTTON_WIDTH,
+        verticalAlign: 'top',
+        padding: 0,
+        '& svg': {
+            width: 18,
+            height: 18,
+            fontSize: '1.5rem',
+        },
     },
     uploadDiv: {
-      top: 0,
-      zIndex: 1,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      position: 'absolute',
-      opacity: 0.9,
-      textAlign: 'center',
-      background: '#FFFFFF'
+        top: 0,
+        zIndex: 1,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        position: 'absolute',
+        opacity: 0.9,
+        textAlign: 'center',
+        background: '#FFFFFF',
     },
     uploadDivDragging: {
-      opacity: 1
+        opacity: 1,
     },
     uploadCenterDiv: {
-      margin: 20,
-      border: '3px dashed grey',
-      borderRadius: 30,
-      width: 'calc(100% - 40px)',
-      height: 'calc(100% - 40px)',
-      position: 'relative',
-      color: theme.palette.mode === 'dark' ? '#222' : '#CCC',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
+        margin: 20,
+        border: '3px dashed grey',
+        borderRadius: 30,
+        width: 'calc(100% - 40px)',
+        height: 'calc(100% - 40px)',
+        position: 'relative',
+        color: theme.palette.mode === 'dark' ? '#222' : '#CCC',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
     },
     uploadCenterIcon: {
-      width: '25%',
-      height: '25%'
+        width: '25%',
+        height: '25%',
     },
     uploadCenterText: {
-      fontSize: 24,
-      fontWeight: 'bold'
+        fontSize: 24,
+        fontWeight: 'bold',
     },
     uploadCloseButton: {
-      zIndex: 2,
-      position: 'absolute',
-      top: 30,
-      right: 30
+        zIndex: 2,
+        position: 'absolute',
+        top: 30,
+        right: 30,
     },
     uploadCenterTextAndIcon: {
-      position: 'absolute',
-      height: '30%',
-      width: '100%',
-      margin: 'auto',
-      opacity: 0.3
+        position: 'absolute',
+        height: '30%',
+        width: '100%',
+        margin: 'auto',
+        opacity: 0.3,
     },
     menuButtonExpertActive: {
-      color: '#c00000'
+        color: '#c00000',
     },
     menuButtonRestrictActive: {
-      color: '#c05000'
+        color: '#c05000',
     },
     pathDiv: {
-      display: 'flex',
-      width: "calc(100% - ".concat(theme.spacing(2), ")"),
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(1),
-      textOverflow: 'clip',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      backgroundColor: theme.palette.secondary.main
+        display: 'flex',
+        width: `calc(100% - ${theme.spacing(2)})`,
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        textOverflow: 'clip',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        backgroundColor: theme.palette.secondary.main,
     },
     pathDivInput: {
-      width: '100%'
+        width: '100%',
     },
     pathDivBreadcrumbDir: {
-      paddingLeft: 2,
-      paddingRight: 2,
-      cursor: 'pointer',
-      '&:hover': {
-        background: theme.palette.primary.main
-      }
+        paddingLeft: 2,
+        paddingRight: 2,
+        cursor: 'pointer',
+        '&:hover': {
+            background: theme.palette.primary.main,
+        },
     },
     backgroundImageLight: {
-      background: 'white'
+        background: 'white',
     },
     backgroundImageDark: {
-      background: 'black'
+        background: 'black',
     },
     backgroundImageColored: {
-      background: 'silver'
+        background: 'silver',
     },
     '@media screen and (max-width: 500px)': {
-      itemNameTable: {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        textAlign: 'end',
-        direction: 'rtl'
-      }
+        itemNameTable: {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            textAlign: 'end',
+            direction: 'rtl',
+        },
     },
     specialFolder: {
-      color: theme.palette.mode === 'dark' ? '#229b0f' : '#5dd300'
-    }
-  };
-};
-var USER_DATA = '0_userdata.0';
+        color: theme.palette.mode === 'dark' ? '#229b0f' : '#5dd300',
+    },
+});
+const USER_DATA = '0_userdata.0';
 function sortFolders(a, b) {
-  if (a.folder && b.folder) {
-    return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
-  }
-  if (a.folder) {
-    return -1;
-  }
-  if (b.folder) {
-    return 1;
-  }
-  return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
+    if (a.folder && b.folder) {
+        return a.name > b.name ? 1 : (a.name < b.name ? -1 : 0);
+    }
+    if (a.folder) {
+        return -1;
+    }
+    if (b.folder) {
+        return 1;
+    }
+    return a.name > b.name ? 1 : (a.name < b.name ? -1 : 0);
 }
 function getParentDir(dir) {
-  var parts = (dir || '').split('/');
-  parts.length && parts.pop();
-  return parts.join('/');
+    const parts = (dir || '').split('/');
+    parts.length && parts.pop();
+    return parts.join('/');
 }
 function isFile(path) {
-  var ext = _Utils["default"].getFileExtension(path);
-  return !!(ext && ext.toLowerCase().match(/[a-z]+/) && ext.length < 5);
+    const ext = Utils_1.default.getFileExtension(path);
+    return !!((ext === null || ext === void 0 ? void 0 : ext.toLowerCase().match(/[a-z]+/)) && ext.length < 5);
 }
-var TABLE = 'Table';
-var TILE = 'Tile';
-
+const TABLE = 'Table';
+const TILE = 'Tile';
 /**
  * @extends {React.Component<import('./types').FileBrowserProps>}
  */
-var FileBrowser = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(FileBrowser, _Component);
-  /**
-   * @param {Readonly<import("./types").FileBrowserProps>} props
-   */
-  function FileBrowser(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, FileBrowser);
-    _this = _callSuper(this, FileBrowser, [props]);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFileChange", function (id, fileName, size) {
-      var key = "".concat(id, "/").concat(fileName);
-      var pos = key.lastIndexOf('/');
-      var folder = key.substring(0, pos);
-      console.log("File changed ".concat(key, "[").concat(size, "]"));
-      if (_this.state.folders[folder]) {
-        _this._tempTimeout[folder] && clearTimeout(_this._tempTimeout[folder]);
-        _this._tempTimeout[folder] = setTimeout(function () {
-          delete _this._tempTimeout[folder];
-          _this.browseFolder(folder, true).then(function (folders) {
-            return _this.setState({
-              folders: folders
+class FileBrowser extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.limitToObjectID = null;
+        this.limitToPath = null;
+        this.lastSelect = null;
+        this.setOpacityTimer = null;
+        this.cacheFoldersTimeout = null;
+        this.foldersLoading = null;
+        this.cacheFolders = null;
+        this.onFileChange = (id, fileName, size) => {
+            const key = `${id}/${fileName}`;
+            const pos = key.lastIndexOf('/');
+            const folder = key.substring(0, pos);
+            console.log(`File changed ${key}[${size}]`);
+            if (this.state.folders[folder]) {
+                this._tempTimeout[folder] && clearTimeout(this._tempTimeout[folder]);
+                this._tempTimeout[folder] = setTimeout(() => {
+                    delete this._tempTimeout[folder];
+                    this.browseFolder(folder, null, false, true)
+                        .then(folders => this.setState({ folders }));
+                }, 300);
+            }
+        };
+        this.setStateBackgroundImage = () => {
+            const array = ['light', 'dark', 'colored', 'delete'];
+            this.setState(({ backgroundImage }) => {
+                if (array.indexOf(backgroundImage) !== -1 && array.length - 1 !== array.indexOf(backgroundImage)) {
+                    (window._localStorage || window.localStorage).setItem('files.backgroundImage', array[array.indexOf(backgroundImage) + 1]);
+                    return { backgroundImage: array[array.indexOf(backgroundImage) + 1] };
+                }
+                (window._localStorage || window.localStorage).setItem('files.backgroundImage', array[0]);
+                return { backgroundImage: array[0] };
             });
-          });
-        }, 300);
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setStateBackgroundImage", function () {
-      var array = ['light', 'dark', 'colored', 'delete'];
-      _this.setState(function (_ref) {
-        var backgroundImage = _ref.backgroundImage;
-        if (array.indexOf(backgroundImage) !== -1 && array.length - 1 !== array.indexOf(backgroundImage)) {
-          (window._localStorage || window.localStorage).setItem('files.backgroundImage', array[array.indexOf(backgroundImage) + 1]);
-          return {
-            backgroundImage: array[array.indexOf(backgroundImage) + 1]
-          };
+        };
+        this.getClassBackgroundImage = () => {
+            // ['light', 'dark', 'colored', 'delete']
+            switch (this.state.backgroundImage) {
+                case 'light':
+                    return this.props.classes.backgroundImageLight;
+                case 'dark':
+                    return this.props.classes.backgroundImageDark;
+                case 'colored':
+                    return this.props.classes.backgroundImageColored;
+                case 'delete':
+                    return null;
+                default:
+                    return null;
+            }
+        };
+        let expandedStr = (window._localStorage || window.localStorage).getItem('files.expanded') || '[]';
+        if (this.props.limitPath) {
+            const parts = this.props.limitPath.split('/');
+            this.limitToObjectID = parts[0];
+            this.limitToPath = !parts.length ? null : (parts.length === 1 && parts[0] === '' ? null : parts.join('/'));
+            if (this.limitToPath && this.limitToPath.endsWith('/')) {
+                this.limitToPath.substring(0, this.limitToPath.length - 1);
+            }
+        }
+        let expanded;
+        try {
+            expanded = JSON.parse(expandedStr);
+            if (this.limitToPath) {
+                expanded = expanded.filter(id => { var _a; return id.startsWith(`${this.limitToPath}/`) || id === this.limitToPath || ((_a = this.limitToPath) === null || _a === void 0 ? void 0 : _a.startsWith(`${id}/`)); });
+            }
+        }
+        catch (e) {
+            expanded = [];
+        }
+        let viewType;
+        if (this.props.showViewTypeButton) {
+            viewType = (window._localStorage || window.localStorage).getItem('files.viewType') || TABLE;
+        }
+        else {
+            viewType = TABLE;
+        }
+        let selected = this.props.selected || (window._localStorage || window.localStorage).getItem('files.selected') || USER_DATA;
+        let currentDir = '';
+        if (props.restrictToFolder) {
+            selected = props.restrictToFolder;
+            currentDir = props.restrictToFolder;
+            const parts = props.restrictToFolder.split('/');
+            expanded = [];
+            let path = '';
+            for (let i = 0; i < parts.length; i++) {
+                path += (path ? '/' : '') + parts[i];
+                expanded.push(path);
+            }
+        }
+        else {
+            // TODO: Now we do not support multiple selection
+            if (Array.isArray(selected)) {
+                selected = selected[0];
+            }
+            if (isFile(selected)) {
+                currentDir = getParentDir(selected);
+            }
+            else {
+                currentDir = selected;
+            }
         }
-        (window._localStorage || window.localStorage).setItem('files.backgroundImage', array[0]);
-        return {
-          backgroundImage: array[0]
+        const backgroundImage = (window._localStorage || window.localStorage).getItem('files.backgroundImage') || null;
+        this.state = {
+            viewType,
+            folders: {},
+            filterEmpty: (window._localStorage || window.localStorage).getItem('files.empty') !== 'false',
+            expanded,
+            currentDir,
+            expertMode: !!props.expertMode,
+            addFolder: false,
+            uploadFile: false,
+            deleteItem: '',
+            // marked: [],
+            viewer: '',
+            formatEditFile: '',
+            path: selected,
+            selected,
+            errorText: '',
+            modalEditOfAccess: false,
+            backgroundImage,
+            queueLength: 0,
+            loadAllFolders: false,
+            // allFoldersLoaded: false,
+            fileErrors: [],
+            filterByType: props.filterByType || window.localStorage.getItem('files.filterByType') || '',
+            showTypesMenu: null,
+            restrictToFolder: props.restrictToFolder || '',
+            pathFocus: false,
         };
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getClassBackgroundImage", function () {
-      // ['light', 'dark', 'colored', 'delete']
-      switch (_this.state.backgroundImage) {
-        case 'light':
-          return _this.props.classes.backgroundImageLight;
-        case 'dark':
-          return _this.props.classes.backgroundImageDark;
-        case 'colored':
-          return _this.props.classes.backgroundImageColored;
-        case 'delete':
-          return null;
-        default:
-          return null;
-      }
-    });
-    var expanded = (window._localStorage || window.localStorage).getItem('files.expanded') || '[]';
-    if (_this.props.limitPath) {
-      var parts = _this.props.limitPath.split('/');
-      _this.limitToObjectID = parts[0];
-      _this.limitToPath = !parts.length ? null : parts.length === 1 && parts[0] === '' ? null : parts.join('/');
-      if (_this.limitToPath && _this.limitToPath.endsWith('/')) {
-        _this.limitToPath.substring(0, _this.limitToPath.length - 1);
-      }
+        this.imagePrefix = this.props.imagePrefix || './files/';
+        this.levelPadding = this.props.levelPadding || 20;
+        this.mounted = true;
+        this.suppressDeleteConfirm = 0;
+        this.browseList = [];
+        this.browseListRunning = false;
+        this.initialReadFinished = false;
+        this.supportSubscribes = null;
+        this._tempTimeout = {};
     }
-    try {
-      expanded = JSON.parse(expanded);
-      if (_this.limitToPath) {
-        expanded = expanded.filter(function (id) {
-          return id.startsWith("".concat(_this.limitToPath, "/")) || id === _this.limitToPath || _this.limitToPath.startsWith("".concat(id, "/"));
-        });
-      }
-    } catch (e) {
-      expanded = [];
-    }
-    var viewType;
-    if (_this.props.showViewTypeButton) {
-      viewType = (window._localStorage || window.localStorage).getItem('files.viewType') || TABLE;
-    } else {
-      viewType = TABLE;
-    }
-    var selected = _this.props.selected || (window._localStorage || window.localStorage).getItem('files.selected') || USER_DATA;
-    var currentDir = '';
-    if (props.restrictToFolder) {
-      selected = props.restrictToFolder;
-      currentDir = props.restrictToFolder;
-      var _parts = props.restrictToFolder.split('/');
-      expanded = [];
-      var path = '';
-      for (var i = 0; i < _parts.length; i++) {
-        path += (path ? '/' : '') + _parts[i];
-        expanded.push(path);
-      }
-    } else {
-      // TODO: Now we do not support multiple selection
-      if (Array.isArray(selected)) {
-        selected = selected[0];
-      }
-      if (isFile(selected)) {
-        currentDir = getParentDir(selected);
-      } else {
-        currentDir = selected;
-      }
+    static getDerivedStateFromProps(props, state) {
+        if (props.expertMode !== undefined && props.expertMode !== state.expertMode) {
+            return { expertMode: props.expertMode, loadAllFolders: true };
+        }
+        return null;
     }
-    var _backgroundImage = (window._localStorage || window.localStorage).getItem('files.backgroundImage') || null;
-    _this.state = {
-      viewType: viewType,
-      folders: {},
-      filterEmpty: (window._localStorage || window.localStorage).getItem('files.empty') !== 'false',
-      expanded: expanded,
-      currentDir: currentDir,
-      expertMode: _this.props.expertMode,
-      addFolder: false,
-      uploadFile: false,
-      deleteItem: '',
-      // marked: [],
-      viewer: '',
-      formatEditFile: '',
-      path: selected,
-      selected: selected,
-      errorText: '',
-      modalEditOfAccess: false,
-      backgroundImage: _backgroundImage,
-      queueLength: 0,
-      loadAllFolders: false,
-      // allFoldersLoaded: false,
-      fileErrors: [],
-      filterByType: props.filterByType || window.localStorage.getItem('files.filterByType') || '',
-      showTypesMenu: null,
-      restrictToFolder: props.restrictToFolder || ''
-    };
-    _this.imagePrefix = _this.props.imagePrefix || './files/';
-    _this.levelPadding = _this.props.levelPadding || 20;
-    _this.mounted = true;
-    _this.suppressDeleteConfirm = 0;
-    _this.browseList = [];
-    _this.browseListRunning = false;
-    _this.initialReadFinished = false;
-    _this.supportSubscribes = null;
-    _this._tempTimeout = {};
-    return _this;
-  }
-  (0, _createClass2["default"])(FileBrowser, [{
-    key: "loadFolders",
-    value: function () {
-      var _loadFolders = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var _this2 = this;
-        var folders;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              this.initialReadFinished = false;
-              _context.next = 3;
-              return this.browseFolder('/');
-            case 3:
-              folders = _context.sent;
-              if (!(this.state.viewType === TABLE)) {
-                _context.next = 10;
-                break;
-              }
-              _context.next = 7;
-              return this.browseFolders((0, _toConsumableArray2["default"])(this.state.expanded), folders);
-            case 7:
-              folders = _context.sent;
-              _context.next = 14;
-              break;
-            case 10:
-              if (!(this.state.currentDir && this.state.currentDir !== '/' && (!this.limitToObjectID || this.state.currentDir.startsWith(this.limitToObjectID)))) {
-                _context.next = 14;
-                break;
-              }
-              _context.next = 13;
-              return this.browseFolder(this.state.currentDir, folders);
-            case 13:
-              folders = _context.sent;
-            case 14:
-              this.setState({
-                folders: folders
-              }, function () {
-                if (_this2.state.viewType === TABLE && !_this2.findItem(_this2.state.selected)) {
-                  var parts = _this2.state.selected.split('/');
-                  while (parts.length && !_this2.findItem(parts.join('/'))) {
+    async loadFolders() {
+        this.initialReadFinished = false;
+        let folders = (await this.browseFolder('/'));
+        if (this.state.viewType === TABLE) {
+            folders = (await this.browseFolders([...this.state.expanded], folders));
+        }
+        else if (this.state.currentDir &&
+            this.state.currentDir !== '/' &&
+            (!this.limitToObjectID || this.state.currentDir.startsWith(this.limitToObjectID))) {
+            folders = (await this.browseFolder(this.state.currentDir, folders));
+        }
+        this.setState({ folders }, () => {
+            if (this.state.viewType === TABLE && !this.findItem(this.state.selected)) {
+                const parts = this.state.selected.split('/');
+                while (parts.length && !this.findItem(parts.join('/'))) {
                     parts.pop();
-                  }
-                  var selected;
-                  if (parts.length) {
+                }
+                let selected;
+                if (parts.length) {
                     selected = parts.join('/');
-                  } else {
+                }
+                else {
                     selected = USER_DATA;
-                  }
-                  _this2.setState({
-                    selected: selected,
-                    path: selected,
-                    pathFocus: false
-                  }, function () {
-                    return _this2.scrollToSelected();
-                  });
-                } else {
-                  _this2.scrollToSelected();
                 }
-                _this2.initialReadFinished = true;
-              });
-            case 15:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function loadFolders() {
-        return _loadFolders.apply(this, arguments);
-      }
-      return loadFolders;
-    }()
-  }, {
-    key: "scrollToSelected",
-    value: function scrollToSelected() {
-      if (this.mounted) {
-        var el = document.getElementById(this.state.selected);
-        el && el.scrollIntoView();
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this3 = this;
-      this.mounted = true;
-      this.loadFolders();
-      return this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT').then(function (result) {
-        _this3.supportSubscribes = result;
-        _this3.supportSubscribes && _this3.props.socket.subscribeFiles('*', '*', _this3.onFileChange);
-      });
+                this.setState({ selected, path: selected, pathFocus: false }, () => this.scrollToSelected());
+            }
+            else {
+                this.scrollToSelected();
+            }
+            this.initialReadFinished = true;
+        });
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.supportSubscribes && this.props.socket.unsubscribeFiles('*', '*', this.onFileChange);
-      this.mounted = false;
-      this.browseList = null;
-      this.browseListRunning = false;
-      Object.values(this._tempTimeout).forEach(function (timer) {
-        return timer && clearTimeout(timer);
-      });
-      this._tempTimeout = {};
+    scrollToSelected() {
+        if (this.mounted) {
+            const el = document.getElementById(this.state.selected);
+            el && el.scrollIntoView();
+        }
     }
-  }, {
-    key: "browseFolders",
-    value: function browseFolders(foldersList, _newFolders, _resolve) {
-      var _this4 = this;
-      if (!_newFolders) {
-        _newFolders = {};
-        Object.keys(this.state.folders).forEach(function (folder) {
-          return _newFolders[folder] = _this4.state.folders[folder];
-        });
-      }
-      if (!_resolve) {
-        return new Promise(function (resolve) {
-          _this4.browseFolders(foldersList, _newFolders, resolve);
+    componentDidMount() {
+        this.mounted = true;
+        this.loadFolders();
+        return this.props.socket.checkFeatureSupported('BINARY_STATE_EVENT')
+            .then(result => {
+            this.supportSubscribes = result;
+            this.supportSubscribes && this.props.socket.subscribeFiles('*', '*', this.onFileChange);
         });
-      }
-      if (!foldersList || !foldersList.length) {
-        return _resolve(_newFolders);
-      }
-      return this.browseFolder(foldersList.shift(), _newFolders).then(function () {
-        return setTimeout(function () {
-          return _this4.browseFolders(foldersList, _newFolders, _resolve);
-        }, 0);
-      })["catch"](function () {
-        return setTimeout(function () {
-          return _this4.browseFolders(foldersList, _newFolders, _resolve);
-        }, 0);
-      });
     }
-  }, {
-    key: "readDirSerial",
-    value: function readDirSerial(adapter, relPath) {
-      var _this5 = this;
-      return new Promise(function (resolve, reject) {
-        if (_this5.browseList) {
-          // if component still mounted
-          _this5.browseList.push({
-            resolve: resolve,
-            reject: reject,
-            adapter: adapter,
-            relPath: relPath
-          });
-          !_this5.browseListRunning && _this5.processBrowseList();
-        }
-      });
+    componentWillUnmount() {
+        this.supportSubscribes && this.props.socket.unsubscribeFiles('*', '*', this.onFileChange);
+        this.mounted = false;
+        this.browseList = null;
+        this.browseListRunning = false;
+        Object.values(this._tempTimeout)
+            .forEach(timer => timer && clearTimeout(timer));
+        this._tempTimeout = {};
     }
-  }, {
-    key: "processBrowseList",
-    value: function processBrowseList(level) {
-      var _this6 = this;
-      if (!this.browseListRunning && this.browseList && this.browseList.length) {
-        this.browseListRunning = true;
-        if (this.browseList.length > 10) {
-          // not too often
-          if (!(this.browseList.length % 10)) {
-            this.setState({
-              queueLength: this.browseList.length
-            });
-          }
-        } else {
-          this.setState({
-            queueLength: this.browseList.length
-          });
+    browseFoldersCb(foldersList, newFoldersNotNull, cb) {
+        if (!(foldersList === null || foldersList === void 0 ? void 0 : foldersList.length)) {
+            cb(newFoldersNotNull);
         }
-        this.browseList[0].processing = true;
-        this.props.socket.readDir(this.browseList[0].adapter, this.browseList[0].relPath).then(function (files) {
-          if (_this6.browseList) {
-            // if component still mounted
-            var item = _this6.browseList.shift();
-            if (item) {
-              var resolve = item.resolve;
-              item.resolve = null;
-              item.reject = null;
-              item.adapter = null;
-              item.relPath = null;
-              resolve(files);
-              _this6.browseListRunning = false;
-              if (_this6.browseList.length) {
-                if (level < 5) {
-                  _this6.processBrowseList(level + 1);
-                } else {
-                  setTimeout(function () {
-                    return _this6.processBrowseList(0);
-                  }, 0);
-                }
-              } else {
-                _this6.setState({
-                  queueLength: 0
+        else {
+            const folder = foldersList.shift();
+            if (folder) {
+                this.browseFolder(folder, newFoldersNotNull)
+                    .catch((e) => console.error(`Cannot read folder ${folder}: ${e}`))
+                    .then(() => {
+                    setTimeout(() => this.browseFoldersCb(foldersList, newFoldersNotNull, cb), 0);
                 });
-              }
-            } else {
-              _this6.setState({
-                queueLength: 0
-              });
             }
-          }
-        })["catch"](function (e) {
-          if (_this6.browseList) {
-            // if component still mounted
-            var item = _this6.browseList.shift();
-            if (item) {
-              var reject = item.reject;
-              item.resolve = null;
-              item.reject = null;
-              item.adapter = null;
-              item.relPath = null;
-              reject(e);
-              _this6.browseListRunning = false;
-              if (_this6.browseList.length) {
-                if (level < 5) {
-                  _this6.processBrowseList(level + 1);
-                } else {
-                  setTimeout(function () {
-                    return _this6.processBrowseList(0);
-                  }, 0);
-                }
-              } else {
-                _this6.setState({
-                  queueLength: 0
-                });
-              }
-            } else {
-              _this6.setState({
-                queueLength: 0
-              });
+            else {
+                setTimeout(() => this.browseFoldersCb(foldersList, newFoldersNotNull, cb), 0);
             }
-          }
+        }
+    }
+    browseFolders(foldersList, _newFolders) {
+        let newFoldersNotNull;
+        if (!_newFolders) {
+            newFoldersNotNull = {};
+            Object.keys(this.state.folders).forEach(folder => newFoldersNotNull[folder] = this.state.folders[folder]);
+        }
+        else {
+            newFoldersNotNull = _newFolders;
+        }
+        if (!(foldersList === null || foldersList === void 0 ? void 0 : foldersList.length)) {
+            return Promise.resolve(newFoldersNotNull);
+        }
+        return new Promise(resolve => {
+            this.browseFoldersCb(foldersList, newFoldersNotNull, resolve);
         });
-      }
     }
-  }, {
-    key: "browseFolder",
-    value: function browseFolder(folderId, _newFolders, _checkEmpty, force) {
-      var _this7 = this;
-      if (typeof _newFolders === 'boolean') {
-        force = _newFolders;
-        _newFolders = null;
-      }
-      if (!_newFolders) {
-        _newFolders = {};
-        Object.keys(this.state.folders).forEach(function (folder) {
-          return _newFolders[folder] = _this7.state.folders[folder];
+    readDirSerial(adapter, relPath) {
+        return new Promise((resolve, reject) => {
+            if (this.browseList) { // if component still mounted
+                this.browseList.push({
+                    resolve: resolve,
+                    reject,
+                    adapter,
+                    relPath,
+                });
+                !this.browseListRunning && this.processBrowseList();
+            }
         });
-      }
-      if (_newFolders[folderId] && !force) {
-        if (!_checkEmpty) {
-          return new Promise(function (resolve, reject) {
-            Promise.all(_newFolders[folderId].filter(function (item) {
-              return item.folder;
-            }).map(function (item) {
-              return _this7.browseFolder(item.id, _newFolders, true)["catch"](function () {});
-            })).then(function () {
-              return resolve(_newFolders);
-            })["catch"](function (error) {
-              return reject(error);
+    }
+    processBrowseList(level = 0) {
+        if (!this.browseListRunning && this.browseList && this.browseList.length) {
+            this.browseListRunning = true;
+            if (this.browseList.length > 10) {
+                // not too often
+                if (!(this.browseList.length % 10)) {
+                    this.setState({ queueLength: this.browseList.length });
+                }
+            }
+            else {
+                this.setState({ queueLength: this.browseList.length });
+            }
+            this.browseList[0].processing = true;
+            this.props.socket.readDir(this.browseList[0].adapter, this.browseList[0].relPath)
+                .then(files => {
+                if (this.browseList) { // if component still mounted
+                    const item = this.browseList.shift();
+                    if (item) {
+                        const resolve = item.resolve;
+                        item.resolve = null;
+                        item.reject = null;
+                        item.adapter = null;
+                        item.relPath = null;
+                        resolve && resolve(files);
+                        this.browseListRunning = false;
+                        if (this.browseList.length) {
+                            if (level < 5) {
+                                this.processBrowseList(level + 1);
+                            }
+                            else {
+                                setTimeout(() => this.processBrowseList(0), 0);
+                            }
+                        }
+                        else {
+                            this.setState({ queueLength: 0 });
+                        }
+                    }
+                    else {
+                        this.setState({ queueLength: 0 });
+                    }
+                }
+            })
+                .catch(e => {
+                if (this.browseList) { // if component still mounted
+                    const item = this.browseList.shift();
+                    if (item) {
+                        const reject = item.reject;
+                        item.resolve = null;
+                        item.reject = null;
+                        item.adapter = null;
+                        item.relPath = null;
+                        reject && reject(e);
+                        this.browseListRunning = false;
+                        if (this.browseList.length) {
+                            if (level < 5) {
+                                this.processBrowseList(level + 1);
+                            }
+                            else {
+                                setTimeout(() => this.processBrowseList(0), 0);
+                            }
+                        }
+                        else {
+                            this.setState({ queueLength: 0 });
+                        }
+                    }
+                    else {
+                        this.setState({ queueLength: 0 });
+                    }
+                }
             });
-          });
         }
-        return Promise.resolve(_newFolders);
-      }
-      if (!folderId || folderId === '/') {
-        return this.props.socket.readMetaItems().then(function (objs) {
-          var _folders = [];
-          var userData = null;
-          if (_this7.state.restrictToFolder) {
-            var _adapter = _this7.state.restrictToFolder.split('/')[0];
-            objs = objs.filter(function (obj) {
-              return obj._id === _adapter;
-            });
-          } else if (!_this7.state.expertMode) {
-            // load only adapter.admin and not other meta files like hm-rpc.0.devices.blablabla
-            objs = objs.filter(function (obj) {
-              return !obj._id.endsWith('.admin');
+    }
+    async browseFolder(folderId, _newFolders, _checkEmpty, force) {
+        let newFoldersNotNull;
+        if (!_newFolders) {
+            newFoldersNotNull = {};
+            Object.keys(this.state.folders).forEach(folder => {
+                newFoldersNotNull[folder] = this.state.folders[folder];
             });
-          }
-          var pos = objs.findIndex(function (obj) {
-            return obj._id === 'system.meta.uuid';
-          });
-          if (pos !== -1) {
-            objs.splice(pos, 1);
-          }
-          objs.forEach(function (obj) {
-            if (_this7.limitToObjectID && _this7.limitToObjectID !== obj._id) {
-              return;
+        }
+        else {
+            newFoldersNotNull = _newFolders;
+        }
+        if (newFoldersNotNull[folderId] && !force) {
+            if (!_checkEmpty) {
+                return new Promise((resolve, reject) => {
+                    Promise.all(newFoldersNotNull[folderId].filter(item => item.folder).map(item => this.browseFolder(item.id, newFoldersNotNull, true)
+                        .catch(() => { })))
+                        .then(() => resolve(newFoldersNotNull))
+                        .catch(error => reject(error));
+                });
+            }
+            return Promise.resolve(newFoldersNotNull);
+        }
+        // if root folder
+        if (!folderId || folderId === '/') {
+            try {
+                let objs = await this.props.socket.readMetaItems();
+                const _folders = [];
+                let userData = null;
+                if (this.state.restrictToFolder) {
+                    const adapter = this.state.restrictToFolder.split('/')[0];
+                    objs = objs.filter(obj => obj._id === adapter);
+                }
+                else if (!this.state.expertMode) {
+                    // load only adapter.admin and not other meta files like hm-rpc.0.devices.blablabla
+                    objs = objs.filter(obj => !obj._id.endsWith('.admin'));
+                }
+                const pos = objs.findIndex(obj => obj._id === 'system.meta.uuid');
+                if (pos !== -1) {
+                    objs.splice(pos, 1);
+                }
+                objs.forEach(obj => {
+                    if (this.limitToObjectID && this.limitToObjectID !== obj._id) {
+                        return;
+                    }
+                    const item = {
+                        id: obj._id,
+                        name: obj._id,
+                        title: (obj.common && obj.common.name) || obj._id,
+                        meta: true,
+                        from: obj.from,
+                        ts: obj.ts,
+                        color: obj.common && obj.common.color,
+                        icon: obj.common && obj.common.icon,
+                        folder: true,
+                        acl: obj.acl,
+                        level: 0,
+                    };
+                    if (item.id === USER_DATA) {
+                        // user data must be first
+                        userData = item;
+                    }
+                    else {
+                        _folders.push(item);
+                    }
+                });
+                _folders.sort((a, b) => (a.id > b.id ? 1 : (a.id < b.id ? -1 : 0)));
+                if (!this.limitToObjectID || this.limitToObjectID === USER_DATA) {
+                    userData && _folders.unshift(userData);
+                }
+                newFoldersNotNull[folderId || '/'] = _folders;
+                if (!_checkEmpty) {
+                    return Promise.all(_folders.filter(item => item.folder)
+                        .map(item => this.browseFolder(item.id, newFoldersNotNull, true)
+                        .catch(() => { })))
+                        .then(() => newFoldersNotNull);
+                }
             }
-            var item = {
-              id: obj._id,
-              name: obj._id,
-              title: obj.common && obj.common.name || obj._id,
-              meta: true,
-              from: obj.from,
-              ts: obj.ts,
-              color: obj.common && obj.common.color,
-              icon: obj.common && obj.common.icon,
-              folder: true,
-              acl: obj.acl,
-              level: 0
-            };
-            if (item.id === USER_DATA) {
-              // user data must be first
-              userData = item;
-            } else {
-              _folders.push(item);
+            catch (e) {
+                this.initialReadFinished && window.alert(`Cannot read meta items: ${e}`);
+                newFoldersNotNull[folderId || '/'] = [];
             }
-          });
-          _folders.sort(function (a, b) {
-            return a.id > b.id ? 1 : a.id < b.id ? -1 : 0;
-          });
-          if (!_this7.limitToObjectID || _this7.limitToObjectID === USER_DATA) {
-            userData && _folders.unshift(userData);
-          }
-          _newFolders[folderId || '/'] = _folders;
-          if (!_checkEmpty) {
-            return Promise.all(_folders.filter(function (item) {
-              return item.folder;
-            }).map(function (item) {
-              return _this7.browseFolder(item.id, _newFolders, true)["catch"](function () {});
-            })).then(function () {
-              return _newFolders;
+            return newFoldersNotNull;
+        }
+        const parts = folderId.split('/');
+        const level = parts.length;
+        const adapter = parts.shift();
+        const relPath = parts.join('/');
+        // make all requests here serial
+        const files = await this.readDirSerial(adapter || '', relPath);
+        try {
+            const _folders = [];
+            files.forEach(file => {
+                var _a;
+                const item = {
+                    id: `${folderId}/${file.file}`,
+                    ext: Utils_1.default.getFileExtension(file.file),
+                    folder: file.isDir,
+                    name: file.file,
+                    size: (_a = file.stats) === null || _a === void 0 ? void 0 : _a.size,
+                    modified: file.modifiedAt,
+                    acl: file.acl,
+                    level,
+                };
+                if (this.state.restrictToFolder) {
+                    if (item.folder && (item.id.startsWith(`${this.state.restrictToFolder}/`) || item.id === this.state.restrictToFolder || this.state.restrictToFolder.startsWith(`${item.id}/`))) {
+                        _folders.push(item);
+                    }
+                    else if (item.id.startsWith(`${this.state.restrictToFolder}/`)) {
+                        _folders.push(item);
+                    }
+                }
+                else if (this.limitToPath) {
+                    if (item.folder && (item.id.startsWith(`${this.limitToPath}/`) || item.id === this.limitToPath || this.limitToPath.startsWith(`${item.id}/`))) {
+                        _folders.push(item);
+                    }
+                    else if (item.id.startsWith(`${this.limitToPath}/`)) {
+                        _folders.push(item);
+                    }
+                }
+                else {
+                    _folders.push(item);
+                }
             });
-          }
-          return _newFolders;
-        })["catch"](function (e) {
-          return _this7.initialReadFinished && window.alert("Cannot read meta items: ".concat(e));
-        });
-      }
-      var parts = folderId.split('/');
-      var level = parts.length;
-      var adapter = parts.shift();
-      var relPath = parts.join('/');
-
-      // make all requests here serial
-      return this.readDirSerial(adapter, relPath).then(function (files) {
-        var _folders = [];
-        files.forEach(function (file) {
-          var item = {
-            id: "".concat(folderId, "/").concat(file.file),
-            ext: _Utils["default"].getFileExtension(file.file),
-            folder: file.isDir,
-            name: file.file,
-            size: file.stats && file.stats.size,
-            modified: file.modifiedAt,
-            acl: file.acl,
-            level: level
-          };
-          if (_this7.state.restrictToFolder) {
-            if (item.folder && (item.id.startsWith("".concat(_this7.state.restrictToFolder, "/")) || item.id === _this7.state.restrictToFolder || _this7.state.restrictToFolder.startsWith("".concat(item.id, "/")))) {
-              _folders.push(item);
-            } else if (item.id.startsWith("".concat(_this7.state.restrictToFolder, "/"))) {
-              _folders.push(item);
-            }
-          } else if (_this7.limitToPath) {
-            if (item.folder && (item.id.startsWith("".concat(_this7.limitToPath, "/")) || item.id === _this7.limitToPath || _this7.limitToPath.startsWith("".concat(item.id, "/")))) {
-              _folders.push(item);
-            } else if (item.id.startsWith("".concat(_this7.limitToPath, "/"))) {
-              _folders.push(item);
+            _folders.sort(sortFolders);
+            newFoldersNotNull[folderId] = _folders;
+            if (!_checkEmpty) {
+                return Promise.all(_folders
+                    .filter(item => item.folder)
+                    .map(item => this.browseFolder(item.id, newFoldersNotNull, true)))
+                    .then(() => newFoldersNotNull);
             }
-          } else {
-            _folders.push(item);
-          }
-        });
-        _folders.sort(sortFolders);
-        _newFolders[folderId] = _folders;
-        if (!_checkEmpty) {
-          return Promise.all(_folders.filter(function (item) {
-            return item.folder;
-          }).map(function (item) {
-            return _this7.browseFolder(item.id, _newFolders, true);
-          })).then(function () {
-            return _newFolders;
-          });
         }
-        return _newFolders;
-      })["catch"](function (e) {
-        _this7.initialReadFinished && window.alert("Cannot read ".concat(adapter).concat(relPath ? "/".concat(relPath) : '', ": ").concat(e));
-        _newFolders[folderId] = [];
-        return _newFolders;
-      });
+        catch (e) {
+            this.initialReadFinished && window.alert(`Cannot read ${adapter}${relPath ? `/${relPath}` : ''}: ${e}`);
+            newFoldersNotNull[folderId] = [];
+        }
+        return newFoldersNotNull;
     }
-  }, {
-    key: "toggleFolder",
-    value: function toggleFolder(item, e) {
-      var _this8 = this;
-      e && e.stopPropagation();
-      var expanded = (0, _toConsumableArray2["default"])(this.state.expanded);
-      var pos = expanded.indexOf(item.id);
-      if (pos === -1) {
-        expanded.push(item.id);
-        expanded.sort();
-        (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
-        if (!item.temp) {
-          this.browseFolder(item.id).then(function (folders) {
-            return _this8.setState({
-              expanded: expanded,
-              folders: folders
-            });
-          })["catch"](function (err) {
-            return window.alert(err === NOT_FOUND ? _this8.props.t('ra_Cannot find "%s"', item.id) : _this8.props.t('ra_Cannot read "%s"', item.id));
-          });
-        } else {
-          this.setState({
-            expanded: expanded
-          });
+    toggleFolder(item, e) {
+        e && e.stopPropagation();
+        const expanded = [...this.state.expanded];
+        const pos = expanded.indexOf(item.id);
+        if (pos === -1) {
+            expanded.push(item.id);
+            expanded.sort();
+            (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+            if (!item.temp) {
+                this.browseFolder(item.id)
+                    .then(folders => this.setState({ expanded, folders }))
+                    .catch(err => window.alert(err === NOT_FOUND ? this.props.t('ra_Cannot find "%s"', item.id) : this.props.t('ra_Cannot read "%s"', item.id)));
+            }
+            else {
+                this.setState({ expanded });
+            }
+        }
+        else {
+            expanded.splice(pos, 1);
+            (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+            this.setState({ expanded });
         }
-      } else {
-        expanded.splice(pos, 1);
-        (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
-        this.setState({
-          expanded: expanded
-        });
-      }
     }
-  }, {
-    key: "changeFolder",
-    value: function changeFolder(e, folder) {
-      var _this9 = this;
-      e && e.stopPropagation();
-      this.lastSelect = Date.now();
-      var _folder = folder || getParentDir(this.state.currentDir);
-      if (_folder === '/') {
-        _folder = '';
-      }
-      (window._localStorage || window.localStorage).setItem('files.currentDir', _folder);
-      if (folder && e && (e.altKey || e.shiftKey || e.ctrlKey || e.metaKey)) {
+    changeFolder(e, folder) {
+        e && e.stopPropagation();
+        this.lastSelect = Date.now();
+        let _folder = folder || getParentDir(this.state.currentDir);
+        if (_folder === '/') {
+            _folder = '';
+        }
+        (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(folders => this.setState({
+                folders,
+                path: _folder,
+                currentDir: _folder,
+                selected: _folder,
+                pathFocus: false,
+            }, () => this.props.onSelect && this.props.onSelect('')));
+        }
         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,
-            pathFocus: false
-          }, function () {
-            return _this9.props.onSelect && _this9.props.onSelect('');
-          });
+            path: _folder,
+            pathFocus: false,
+        }, () => this.props.onSelect && this.props.onSelect(''));
+    }
+    select(id, e, cb) {
+        e && e.stopPropagation();
+        this.lastSelect = Date.now();
+        (window._localStorage || window.localStorage).setItem('files.selected', id);
+        this.setState({ selected: id, path: id, pathFocus: false }, () => {
+            if (this.props.onSelect) {
+                const ext = Utils_1.default.getFileExtension(id);
+                if ((!this.props.filterFiles || (ext && this.props.filterFiles.includes(ext))) &&
+                    (!this.state.filterByType || (ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(ext)))) {
+                    this.props.onSelect(id, false, !!this.state.folders[id]);
+                }
+                else {
+                    this.props.onSelect('');
+                }
+            }
+            cb && cb();
         });
-      }
-      return this.setState({
-        currentDir: _folder,
-        selected: _folder,
-        path: _folder,
-        pathFocus: false
-      }, function () {
-        return _this9.props.onSelect && _this9.props.onSelect('');
-      });
     }
-  }, {
-    key: "select",
-    value: function select(id, e, cb) {
-      var _this10 = this;
-      if (typeof e === 'function') {
-        cb = e;
-        e = null;
-      }
-      e && e.stopPropagation();
-      this.lastSelect = Date.now();
-      (window._localStorage || window.localStorage).setItem('files.selected', id);
-      this.setState({
-        selected: id,
-        path: id,
-        pathFocus: false
-      }, function () {
-        if (_this10.props.onSelect) {
-          var ext = _Utils["default"].getFileExtension(id);
-          if ((!_this10.props.filterFiles || _this10.props.filterFiles.includes(ext)) && (!_this10.state.filterByType || _FileViewer.EXTENSIONS[_this10.state.filterByType].includes(ext))) {
-            _this10.props.onSelect(id, false, !!_this10.state.folders[id]);
-          } else {
-            _this10.props.onSelect('');
-          }
+    getText(text) {
+        if (text) {
+            if (typeof text === 'object') {
+                return text[this.props.lang] || text.en || undefined;
+            }
+            return text;
         }
-        cb && cb();
-      });
+        return undefined;
     }
-  }, {
-    key: "renderFolder",
-    value: function renderFolder(item, expanded) {
-      var _this11 = this;
-      if (this.state.viewType === TABLE && this.state.filterEmpty && (!this.state.folders[item.id] || !this.state.folders[item.id].length) && item.id !== USER_DATA && !item.temp) {
-        return null;
-      }
-      var Icon = expanded ? _IconOpen["default"] : _IconClosed["default"];
-      var padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
-      var isUserData = item.name === USER_DATA;
-      var isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2.0';
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: item.id,
-        id: item.id,
-        style: this.state.viewType === TABLE ? {
-          marginLeft: padding,
-          width: "calc(100% - ".concat(padding, "px")
-        } : {},
-        onClick: function onClick(e) {
-          return _this11.state.viewType === TABLE ? _this11.select(item.id, e) : _this11.changeFolder(e, item.id);
-        },
-        onDoubleClick: function onDoubleClick(e) {
-          return _this11.state.viewType === TABLE && _this11.toggleFolder(item, e);
-        },
-        title: item.title && (0, _typeof2["default"])(item.title) === 'object' ? item.title[this.props.lang] || item.title.end || '' : item.title || null,
-        className: _Utils["default"].clsx('browserItem', this.props.classes["item".concat(this.state.viewType)], this.props.classes["itemFolder".concat(this.state.viewType)], this.state.selected === item.id && this.props.classes.itemSelected, item.temp && this.props.classes.itemFolderTemp)
-      }, /*#__PURE__*/_react["default"].createElement(Icon, {
-        className: _Utils["default"].clsx(this.props.classes["itemFolderIcon".concat(this.state.viewType)], isSpecialData && this.props.classes.specialFolder),
-        onClick: this.state.viewType === TABLE ? function (e) {
-          return _this11.toggleFolder(item, e);
-        } : undefined
-      }), /*#__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)])
-      }, isUserData ? this.props.t('ra_User files') : item.name), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
-        smDown: true
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes["itemSize".concat(this.state.viewType)]
-      }, this.state.viewType === TABLE && this.state.folders[item.id] ? this.state.folders[item.id].length : '')), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
-        smDown: true
-      }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
-        smDown: true
-      }, this.state.viewType === TABLE && this.props.expertMode ? /*#__PURE__*/_react["default"].createElement("div", {
-        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(_material.IconButton, {
-        "aria-label": "delete",
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          if (_this11.suppressDeleteConfirm > Date.now()) {
-            _this11.deleteItem(item.id);
-          } else {
-            _this11.setState({
-              deleteItem: item.id
-            });
-          }
-        },
-        className: this.props.classes["itemDeleteButton".concat(this.state.viewType)],
-        size: "large"
-      }, /*#__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)]
-      }) : null);
+    renderFolder(item, expanded) {
+        if (this.state.viewType === TABLE &&
+            this.state.filterEmpty &&
+            (!this.state.folders[item.id] || !this.state.folders[item.id].length) &&
+            item.id !== USER_DATA && !item.temp) {
+            return null;
+        }
+        const Icon = expanded ? IconOpen_1.default : IconClosed_1.default;
+        const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
+        const isUserData = item.name === USER_DATA;
+        const isSpecialData = isUserData || item.name === 'vis.0' || item.name === 'vis-2.0';
+        return react_1.default.createElement("div", { key: item.id, id: item.id, style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px` } : {}, onClick: e => (this.state.viewType === TABLE ? this.select(item.id, e) : this.changeFolder(e, item.id)), onDoubleClick: e => this.state.viewType === TABLE && this.toggleFolder(item, e), title: this.getText(item.title), className: Utils_1.default.clsx('browserItem', this.props.classes[`item${this.state.viewType}`], this.props.classes[`itemFolder${this.state.viewType}`], this.state.selected === item.id && this.props.classes.itemSelected, item.temp && this.props.classes.itemFolderTemp) },
+            react_1.default.createElement(Icon, { className: Utils_1.default.clsx(this.props.classes[`itemFolderIcon${this.state.viewType}`], isSpecialData && this.props.classes.specialFolder), onClick: this.state.viewType === TABLE ? e => this.toggleFolder(item, e) : undefined }),
+            react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes[`itemName${this.state.viewType}`], this.props.classes[`itemNameFolder${this.state.viewType}`]) }, isUserData ? this.props.t('ra_User files') : item.name),
+            react_1.default.createElement(material_1.Hidden, { smDown: true },
+                react_1.default.createElement("div", { className: this.props.classes[`itemSize${this.state.viewType}`] }, this.state.viewType === TABLE && this.state.folders[item.id] ? this.state.folders[item.id].length : '')),
+            react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
+            react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode ? react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] }) : null),
+            this.state.viewType === TABLE && this.props.allowDownload ? react_1.default.createElement("div", { className: this.props.classes[`itemDownloadEmpty${this.state.viewType}`] }) : null,
+            this.state.viewType === TABLE && this.props.allowDelete && this.state.folders[item.id] && this.state.folders[item.id].length ?
+                react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", onClick: e => {
+                        e.stopPropagation();
+                        if (this.suppressDeleteConfirm > Date.now()) {
+                            this.deleteItem(item.id);
+                        }
+                        else {
+                            this.setState({ deleteItem: item.id });
+                        }
+                    }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
+                    react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))
+                :
+                    (this.state.viewType === TABLE && this.props.allowDelete ? react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] }) : null));
     }
-  }, {
-    key: "renderBackFolder",
-    value: function renderBackFolder() {
-      var _this12 = this;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: this.state.currentDir,
-        id: this.state.currentDir,
-        onClick: function onClick(e) {
-          return _this12.changeFolder(e);
-        },
-        title: this.props.t('ra_Back to %s', getParentDir(this.state.currentDir)),
-        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(_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)])
-      }, ".."));
+    renderBackFolder() {
+        return react_1.default.createElement("div", { key: this.state.currentDir, id: this.state.currentDir, onClick: e => this.changeFolder(e), title: this.props.t('ra_Back to %s', getParentDir(this.state.currentDir)), className: Utils_1.default.clsx('browserItem', this.props.classes[`item${this.state.viewType}`], this.props.classes[`itemFolder${this.state.viewType}`]) },
+            react_1.default.createElement(IconClosed_1.default, { className: this.props.classes[`itemFolderIcon${this.state.viewType}`] }),
+            react_1.default.createElement(icons_material_1.ArrowBack, { className: this.props.classes.itemFolderIconBack }),
+            react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes[`itemName${this.state.viewType}`], this.props.classes[`itemNameFolder${this.state.viewType}`]) }, ".."));
     }
-  }, {
-    key: "formatSize",
-    value: function formatSize(size) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes["itemSize".concat(this.state.viewType)]
-      }, size || size === 0 ? _Utils["default"].formatBytes(size) : '');
+    formatSize(size) {
+        return react_1.default.createElement("div", { className: this.props.classes[`itemSize${this.state.viewType}`] }, size || size === 0 ? Utils_1.default.formatBytes(size) : '');
     }
-  }, {
-    key: "formatAcl",
-    value: function formatAcl(acl) {
-      var _this13 = this;
-      var access = acl && (acl.permissions || acl.file);
-      if (access) {
-        access = access.toString(16).padStart(3, '0');
-      }
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes["itemAccess".concat(this.state.viewType)]
-      }, this.props.modalEditOfAccessControl ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-        size: "large",
-        onClick: function onClick() {
-          return _this13.setState({
-            modalEditOfAccess: true
-          });
-        },
-        className: this.props.classes["itemAclButton".concat(this.state.viewType)]
-      }, access || '---') : access || '---');
+    formatAcl(acl) {
+        let access = acl && (acl.permissions || acl.file);
+        let accessStr;
+        if (access) {
+            accessStr = access.toString(16).padStart(3, '0');
+        }
+        else {
+            accessStr = '';
+        }
+        return react_1.default.createElement("div", { className: this.props.classes[`itemAccess${this.state.viewType}`] }, this.props.modalEditOfAccessControl ? react_1.default.createElement(material_1.IconButton, { size: "large", onClick: () => this.setState({ modalEditOfAccess: true }), className: this.props.classes[`itemAclButton${this.state.viewType}`] }, accessStr || '---') : accessStr || '---');
     }
-  }, {
-    key: "getFileIcon",
-    value: function getFileIcon(ext) {
-      switch (ext) {
-        case 'json':
-        case 'json5':
-          return /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Bookmark, {
-            className: this.props.classes["itemIcon".concat(this.state.viewType)]
-          });
-        case 'css':
-          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(_iconsMaterial.Code, {
-            className: this.props.classes["itemIcon".concat(this.state.viewType)]
-          });
-        case 'html':
-        case 'md':
-          return /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Description, {
-            className: this.props.classes["itemIcon".concat(this.state.viewType)]
-          });
-        case 'mp3':
-        case 'ogg':
-        case 'wav':
-        case 'm4a':
-        case 'mp4':
-        case 'flac':
-          return /*#__PURE__*/_react["default"].createElement(_iconsMaterial.MusicNote, {
-            className: this.props.classes["itemIcon".concat(this.state.viewType)]
-          });
-        default:
-          return /*#__PURE__*/_react["default"].createElement(_iconsMaterial.InsertDriveFile, {
-            className: this.props.classes["itemIcon".concat(this.state.viewType)]
-          });
-      }
+    getFileIcon(ext) {
+        switch (ext) {
+            case 'json':
+            case 'json5':
+                return react_1.default.createElement(icons_material_1.Bookmark, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+            case 'css':
+                return react_1.default.createElement(icons_material_1.BookmarkBorder, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+            case 'js':
+            case 'ts':
+                return react_1.default.createElement(icons_material_1.Code, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+            case 'html':
+            case 'md':
+                return react_1.default.createElement(icons_material_1.Description, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+            case 'mp3':
+            case 'ogg':
+            case 'wav':
+            case 'm4a':
+            case 'mp4':
+            case 'flac':
+                return react_1.default.createElement(icons_material_1.MusicNote, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+            default:
+                return react_1.default.createElement(icons_material_1.InsertDriveFile, { className: this.props.classes[`itemIcon${this.state.viewType}`] });
+        }
     }
-  }, {
-    key: "renderFile",
-    value: function renderFile(item) {
-      var _this14 = this;
-      var padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
-      var ext = _Utils["default"].getFileExtension(item.name);
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: item.id,
-        id: item.id,
-        onDoubleClick: function onDoubleClick(e) {
-          e.stopPropagation();
-          if (!_this14.props.onSelect) {
-            _this14.setState({
-              viewer: _this14.imagePrefix + item.id,
-              formatEditFile: ext
-            });
-          } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.state.filterByType || _FileViewer.EXTENSIONS[_this14.state.filterByType].includes(item.ext))) {
-            _this14.props.onSelect(item.id, true, !!_this14.state.folders[item.id]);
-          }
-        },
-        onClick: function onClick(e) {
-          return _this14.select(item.id, e);
-        },
-        style: this.state.viewType === TABLE ? {
-          marginLeft: padding,
-          width: "calc(100% - ".concat(padding, "px)")
-        } : {},
-        className: _Utils["default"].clsx('browserItem', this.props.classes["item".concat(this.state.viewType)], this.props.classes["itemFile".concat(this.state.viewType)], this.state.selected === item.id && this.props.classes.itemSelected)
-      }, _FileViewer.EXTENSIONS.images.includes(ext) ? this.state.fileErrors.includes(item.id) ? /*#__PURE__*/_react["default"].createElement(_IconNoIcon["default"], {
-        className: _Utils["default"].clsx(this.props.classes["itemImage".concat(this.state.viewType)], this.getClassBackgroundImage())
-      }) : /*#__PURE__*/_react["default"].createElement("img", {
-        onError: function onError(e) {
-          e.target.onerror = null;
-          var fileErrors = (0, _toConsumableArray2["default"])(_this14.state.fileErrors);
-          if (!fileErrors.includes(item.id)) {
-            fileErrors.push(item.id);
-            _this14.setState({
-              fileErrors: fileErrors
-            });
-          }
-        },
-        className: _Utils["default"].clsx(this.props.classes["itemImage".concat(this.state.viewType)], this.getClassBackgroundImage()),
-        src: this.imagePrefix + item.id,
-        alt: item.name
-      }) : this.getFileIcon(ext), /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes["itemName".concat(this.state.viewType)]
-      }, item.name), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
-        smDown: true
-      }, this.formatSize(item.size)), /*#__PURE__*/_react["default"].createElement(_material.Hidden, {
-        smDown: true
-      }, this.state.viewType === TABLE && this.props.expertMode ? 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(_material.IconButton, {
-        "aria-label": "edit",
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          if (!_this14.props.onSelect) {
-            _this14.setState({
-              viewer: _this14.imagePrefix + item.id,
-              formatEditFile: ext
-            });
-          } else if ((!_this14.props.filterFiles || _this14.props.filterFiles.includes(item.ext)) && (!_this14.state.filterByType || _FileViewer.EXTENSIONS[_this14.state.filterByType].includes(item.ext))) {
-            _this14.props.onSelect(item.id, true, !!_this14.state.folders[item.id]);
-          }
-        },
-        className: this.props.classes["itemDeleteButton".concat(this.state.viewType)],
-        size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Edit, {
-        fontSize: "small"
-      })) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes["itemDeleteButton".concat(this.state.viewType)]
-      })), this.state.viewType === TABLE && this.props.allowDownload ? /*#__PURE__*/_react["default"].createElement("a", {
-        className: _Utils["default"].clsx('MuiButtonBase-root', 'MuiIconButton-root', 'MuiIconButton-sizeLarge', this.props.classes.itemDownloadButtonTable),
-        tabIndex: "0",
-        download: item.id,
-        href: this.imagePrefix + item.id,
-        onClick: function onClick(e) {
-          e.stopPropagation();
+    static getEditFile(ext) {
+        switch (ext) {
+            case 'json':
+            case 'json5':
+            case 'js':
+            case 'html':
+            case 'txt':
+            case 'css':
+            case 'log':
+                return true;
+            default:
+                return false;
         }
-      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.SaveAlt, null)) : null, this.state.viewType === TABLE && this.props.allowDelete && item.id !== 'vis.0/' && item.id !== 'vis-2.0/' && item.id !== USER_DATA ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-        "aria-label": "delete",
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          if (_this14.suppressDeleteConfirm > Date.now()) {
-            _this14.deleteItem(item.id);
-          } else {
-            _this14.setState({
-              deleteItem: item.id
-            });
-          }
-        },
-        className: this.props.classes["itemDeleteButton".concat(this.state.viewType)],
-        size: "large"
-      }, /*#__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)]
-      }) : null);
     }
-  }, {
-    key: "renderItems",
-    value: function renderItems(folderId) {
-      var _this15 = this;
-      if (this.state.folders && this.state.folders[folderId]) {
-        // tile
-        if (this.state.viewType === TILE) {
-          var res = [];
-          if (folderId && folderId !== '/') {
-            res.push(this.renderBackFolder());
-          }
-          this.state.folders[folderId].forEach(function (item) {
-            if (item.folder) {
-              res.push(_this15.renderFolder(item));
-            } else if ((!_this15.props.filterFiles || _this15.props.filterFiles.includes(item.ext)) && (!_this15.state.filterByType || _FileViewer.EXTENSIONS[_this15.state.filterByType].includes(item.ext))) {
-              res.push(_this15.renderFile(item));
+    renderFile(item) {
+        const padding = this.state.viewType === TABLE ? item.level * this.levelPadding : 0;
+        const ext = Utils_1.default.getFileExtension(item.name);
+        return react_1.default.createElement("div", { key: item.id, id: item.id, onDoubleClick: e => {
+                e.stopPropagation();
+                if (!this.props.onSelect) {
+                    this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
+                }
+                else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
+                    (!this.state.filterByType || (item.ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                    this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
+                }
+            }, onClick: e => this.select(item.id, e), style: this.state.viewType === TABLE ? { marginLeft: padding, width: `calc(100% - ${padding}px)` } : {}, className: Utils_1.default.clsx('browserItem', this.props.classes[`item${this.state.viewType}`], this.props.classes[`itemFile${this.state.viewType}`], this.state.selected === item.id && this.props.classes.itemSelected) },
+            ext && FileViewer_1.EXTENSIONS.images.includes(ext) ?
+                this.state.fileErrors.includes(item.id) ?
+                    react_1.default.createElement(IconNoIcon_1.default, { className: Utils_1.default.clsx(this.props.classes[`itemImage${this.state.viewType}`], this.getClassBackgroundImage()) }) :
+                    react_1.default.createElement("img", { onError: e => {
+                            // @ts-expect-error it exists
+                            e.target.onerror = null;
+                            const fileErrors = [...this.state.fileErrors];
+                            if (!fileErrors.includes(item.id)) {
+                                fileErrors.push(item.id);
+                                this.setState({ fileErrors });
+                            }
+                        }, className: Utils_1.default.clsx(this.props.classes[`itemImage${this.state.viewType}`], this.getClassBackgroundImage()), src: this.imagePrefix + item.id, alt: item.name })
+                :
+                    this.getFileIcon(ext),
+            react_1.default.createElement("div", { className: this.props.classes[`itemName${this.state.viewType}`] }, item.name),
+            react_1.default.createElement(material_1.Hidden, { smDown: true }, this.formatSize(item.size)),
+            react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode ? this.formatAcl(item.acl) : null),
+            react_1.default.createElement(material_1.Hidden, { smDown: true }, this.state.viewType === TABLE && this.props.expertMode && FileBrowser.getEditFile(ext) ?
+                react_1.default.createElement(material_1.IconButton, { "aria-label": "edit", onClick: e => {
+                        e.stopPropagation();
+                        if (!this.props.onSelect) {
+                            this.setState({ viewer: this.imagePrefix + item.id, formatEditFile: ext });
+                        }
+                        else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
+                            (!this.state.filterByType || (item.ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                            this.props.onSelect(item.id, true, !!this.state.folders[item.id]);
+                        }
+                    }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
+                    react_1.default.createElement(icons_material_1.Edit, { fontSize: "small" }))
+                :
+                    react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] })),
+            this.state.viewType === TABLE && this.props.allowDownload ? react_1.default.createElement("a", { className: Utils_1.default.clsx('MuiButtonBase-root', 'MuiIconButton-root', 'MuiIconButton-sizeLarge', this.props.classes.itemDownloadButtonTable), tabIndex: 0, download: item.id, href: this.imagePrefix + item.id, onClick: e => {
+                    e.stopPropagation();
+                } },
+                react_1.default.createElement(icons_material_1.SaveAlt, null)) : null,
+            this.state.viewType === TABLE &&
+                this.props.allowDelete &&
+                item.id !== 'vis.0/' &&
+                item.id !== 'vis-2.0/' &&
+                item.id !== USER_DATA
+                ?
+                    react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", onClick: e => {
+                            e.stopPropagation();
+                            if (this.suppressDeleteConfirm > Date.now()) {
+                                this.deleteItem(item.id);
+                            }
+                            else {
+                                this.setState({ deleteItem: item.id });
+                            }
+                        }, className: this.props.classes[`itemDeleteButton${this.state.viewType}`], size: "large" },
+                        react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" }))
+                :
+                    (this.state.viewType === TABLE && this.props.allowDelete ?
+                        react_1.default.createElement("div", { className: this.props.classes[`itemDeleteButton${this.state.viewType}`] })
+                        :
+                            null));
+    }
+    renderItems(folderId) {
+        if (this.state.folders && this.state.folders[folderId]) {
+            // tile
+            if (this.state.viewType === TILE) {
+                const res = [];
+                if (folderId && folderId !== '/') {
+                    res.push(this.renderBackFolder());
+                }
+                this.state.folders[folderId].forEach(item => {
+                    if (item.folder) {
+                        res.push(this.renderFolder(item));
+                    }
+                    else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
+                        (!this.state.filterByType || (item.ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                        res.push(this.renderFile(item));
+                    }
+                });
+                return res;
             }
-          });
-          return res;
+            const totalResult = [];
+            this.state.folders[folderId].forEach(item => {
+                if (item.folder) {
+                    const expanded = this.state.expanded.includes(item.id);
+                    const folders = this.renderFolder(item, expanded);
+                    if (Array.isArray(folders)) {
+                        folders.forEach(folder => totalResult.push(folder));
+                    }
+                    else {
+                        totalResult.push(folders);
+                    }
+                    if (this.state.folders[item.id] && expanded) {
+                        const items = this.renderItems(item.id);
+                        if (Array.isArray(items)) {
+                            items.forEach(item => totalResult.push(item));
+                        }
+                        else {
+                            totalResult.push(items);
+                        }
+                    }
+                }
+                else if ((!this.props.filterFiles || (item.ext && this.props.filterFiles.includes(item.ext))) &&
+                    (!this.state.filterByType || (item.ext && FileViewer_1.EXTENSIONS[this.state.filterByType].includes(item.ext)))) {
+                    totalResult.push(this.renderFile(item));
+                }
+            });
+            return totalResult;
         }
-        return this.state.folders[folderId].map(function (item) {
-          var res = [];
-          if (item.folder) {
-            var expanded = _this15.state.expanded.includes(item.id);
-            res.push(_this15.renderFolder(item, expanded));
-            if (_this15.state.folders[item.id] && expanded) {
-              res.push(_this15.renderItems(item.id));
-            }
-          } else if ((!_this15.props.filterFiles || _this15.props.filterFiles.includes(item.ext)) && (!_this15.state.filterByType || _FileViewer.EXTENSIONS[_this15.state.filterByType].includes(item.ext))) {
-            res.push(_this15.renderFile(item));
-          } else {
+        return react_1.default.createElement("div", { style: { position: 'relative' } },
+            react_1.default.createElement(material_1.CircularProgress, { key: folderId, color: "secondary", size: 24 }),
+            react_1.default.createElement("div", { style: {
+                    position: 'absolute', zIndex: 2, top: 4, width: 24, textAlign: 'center',
+                } }, this.state.queueLength));
+    }
+    renderToolbar() {
+        const IconType = this.props.showTypeSelector ?
+            (FILE_TYPE_ICONS[this.state.filterByType || 'all'] || FILE_TYPE_ICONS.all) :
+            null;
+        const isInFolder = this.findFirstFolder(this.state.selected);
+        return react_1.default.createElement(material_1.Toolbar, { key: "toolbar", variant: "dense" },
+            this.props.allowNonRestricted && this.props.restrictToFolder ? react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.state.restrictToFolder ? this.props.t('ra_Show all folders') : this.props.t('ra_Restrict to folder'), className: Utils_1.default.clsx(this.props.classes.menuButton, this.state.restrictToFolder && this.props.classes.menuButtonRestrictActive), "aria-label": "restricted to folder", onClick: () => this.setState({
+                    restrictToFolder: (this.state.restrictToFolder ? '' : this.props.restrictToFolder) || '',
+                    loadAllFolders: true,
+                }), size: "small" },
+                react_1.default.createElement(icons_material_1.FolderSpecial, { fontSize: "small" })) : null,
+            this.props.showExpertButton ? react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Toggle expert mode'), className: Utils_1.default.clsx(this.props.classes.menuButton, this.state.expertMode && this.props.classes.menuButtonExpertActive), "aria-label": "expert mode", onClick: () => this.setState({ expertMode: !this.state.expertMode }), size: "small" },
+                react_1.default.createElement(IconExpert_1.default, null)) : null,
+            this.props.showViewTypeButton ? react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Toggle view mode'), className: this.props.classes.menuButton, "aria-label": "view mode", onClick: () => {
+                    const viewType = this.state.viewType === TABLE ? TILE : TABLE;
+                    (window._localStorage || window.localStorage).setItem('files.viewType', viewType);
+                    let currentDir = this.state.selected;
+                    if (isFile(currentDir)) {
+                        currentDir = getParentDir(currentDir);
+                    }
+                    this.setState({ viewType, currentDir }, () => {
+                        if (this.state.viewType === TABLE) {
+                            this.scrollToSelected();
+                        }
+                    });
+                }, size: "small" }, this.state.viewType !== TABLE ? react_1.default.createElement(icons_material_1.List, { fontSize: "small" }) : react_1.default.createElement(icons_material_1.ViewModule, { fontSize: "small" })) : null,
+            react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Hide empty folders'), className: this.props.classes.menuButton, color: this.state.filterEmpty ? 'secondary' : 'inherit', "aria-label": "filter empty", onClick: () => {
+                    (window._localStorage || window.localStorage).setItem('file.empty', !this.state.filterEmpty);
+                    this.setState({ filterEmpty: !this.state.filterEmpty });
+                }, size: "small" },
+                react_1.default.createElement(icons_material_1.FolderOpen, { fontSize: "small" })),
+            react_1.default.createElement(material_1.IconButton, { edge: "start", title: this.props.t('ra_Reload files'), className: this.props.classes.menuButton, color: "inherit", "aria-label": "reload files", onClick: () => this.setState({ folders: {} }, () => this.loadFolders()), size: "small" },
+                react_1.default.createElement(icons_material_1.Refresh, { fontSize: "small" })),
+            this.props.allowCreateFolder ? react_1.default.createElement(material_1.IconButton, { edge: "start", disabled: !this.state.selected ||
+                    !isInFolder ||
+                    (!!this.limitToPath &&
+                        !this.state.selected.startsWith(`${this.limitToPath}/`) &&
+                        this.limitToPath !== this.state.selected), title: this.props.t('ra_Create folder'), className: this.props.classes.menuButton, color: "inherit", "aria-label": "add folder", onClick: () => this.setState({ addFolder: true }), size: "small" },
+                react_1.default.createElement(icons_material_1.CreateNewFolder, { fontSize: "small" })) : null,
+            this.props.allowUpload ? react_1.default.createElement(material_1.IconButton, { edge: "start", disabled: !this.state.selected ||
+                    !isInFolder ||
+                    (!!this.limitToPath &&
+                        !this.state.selected.startsWith(`${this.limitToPath}/`) &&
+                        this.limitToPath !== this.state.selected), title: this.props.t('ra_Upload file'), className: this.props.classes.menuButton, color: "inherit", "aria-label": "upload file", onClick: () => this.setState({ uploadFile: true }), size: "small" },
+                react_1.default.createElement(icons_material_1.Publish, { fontSize: "small" })) : null,
+            this.props.showTypeSelector ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Filter files') },
+                react_1.default.createElement(material_1.IconButton, { size: "small", onClick: e => this.setState({ showTypesMenu: e.target }) },
+                    react_1.default.createElement(IconType, { fontSize: "small" }))) : null,
+            this.state.showTypesMenu ? react_1.default.createElement(material_1.Menu, { open: !0, anchorEl: this.state.showTypesMenu, onClose: () => this.setState({ showTypesMenu: null }) }, Object.keys(FILE_TYPE_ICONS).map(type => {
+                const MyIcon = FILE_TYPE_ICONS[type];
+                return react_1.default.createElement(material_1.MenuItem, { key: type, selected: this.state.filterByType === type, onClick: () => {
+                        if (type === 'all') {
+                            (window._localStorage || window.localStorage).removeItem('files.filterByType');
+                            this.setState({ filterByType: '', showTypesMenu: null });
+                        }
+                        else {
+                            (window._localStorage || window.localStorage).setItem('files.filterByType', type);
+                            this.setState({ filterByType: type, showTypesMenu: null });
+                        }
+                    } },
+                    react_1.default.createElement(material_1.ListItemIcon, null,
+                        react_1.default.createElement(MyIcon, { fontSize: "small" })),
+                    react_1.default.createElement(material_1.ListItemText, null, this.props.t(`ra_fileType_${type}`)));
+            })) : null,
+            react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Background image') },
+                react_1.default.createElement(material_1.IconButton, { color: "inherit", edge: "start", className: this.props.classes.menuButton, onClick: this.setStateBackgroundImage, size: "small" },
+                    react_1.default.createElement(icons_material_1.Brightness6, { fontSize: "small" }))),
+            this.state.viewType !== TABLE && this.props.allowDelete ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Delete') },
+                react_1.default.createElement("span", null,
+                    react_1.default.createElement(material_1.IconButton, { "aria-label": "delete", disabled: !this.state.selected ||
+                            this.state.selected === 'vis.0/' ||
+                            this.state.selected === 'vis-2.0/' ||
+                            this.state.selected === USER_DATA, color: "inherit", edge: "start", className: this.props.classes.menuButton, onClick: e => {
+                            e.stopPropagation();
+                            if (this.suppressDeleteConfirm > Date.now()) {
+                                this.deleteItem(this.state.selected);
+                            }
+                            else {
+                                this.setState({ deleteItem: this.state.selected });
+                            }
+                        }, size: "small" },
+                        react_1.default.createElement(icons_material_1.Delete, { fontSize: "small" })))) : null);
+    }
+    findItem(id, folders) {
+        folders = folders || this.state.folders;
+        if (!folders) {
             return null;
-          }
-          return res;
-        });
-      }
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          position: 'relative'
         }
-      }, /*#__PURE__*/_react["default"].createElement(_material.CircularProgress, {
-        key: folderId,
-        color: "secondary",
-        size: 24
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          position: 'absolute',
-          zIndex: 2,
-          top: 4,
-          width: 24,
-          textAlign: 'center'
+        const parts = id.split('/');
+        parts.pop();
+        const parentFolder = parts.join('/') || '/';
+        if (!folders[parentFolder]) {
+            return null;
         }
-      }, this.state.queueLength));
+        return folders[parentFolder].find(item => item.id === id);
     }
-  }, {
-    key: "renderToolbar",
-    value: function renderToolbar() {
-      var _this16 = this;
-      var IconType = this.props.showTypeSelector ? FILE_TYPE_ICONS[this.state.filterByType || 'all'] || FILE_TYPE_ICONS.all : null;
-      var isInFolder = this.findFirstFolder(this.state.selected);
-      return /*#__PURE__*/_react["default"].createElement(_material.Toolbar, {
-        key: "toolbar",
-        variant: "dense"
-      }, this.props.allowNonRestricted && this.props.restrictToFolder ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-        edge: "start",
-        title: this.state.restrictToFolder ? this.props.t('ra_Show all folders') : this.props.t('ra_Restrict to folder'),
-        className: _Utils["default"].clsx(this.props.classes.menuButton, this.state.restrictToFolder && this.props.classes.menuButtonRestrictActive),
-        "aria-label": "restricted to folder",
-        onClick: function onClick() {
-          return _this16.setState({
-            restrictToFolder: _this16.state.restrictToFolder ? '' : _this16.props.restrictToFolder,
-            loadAllFolders: true
-          });
-        },
-        size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FolderSpecial, {
-        fontSize: "small"
-      })) : null, 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),
-        "aria-label": "expert mode",
-        onClick: function onClick() {
-          return _this16.setState({
-            expertMode: !_this16.state.expertMode
-          });
-        },
-        size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_IconExpert["default"], {
-        fontSize: "small"
-      })) : 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,
-        "aria-label": "view mode",
-        onClick: function onClick() {
-          var viewType = _this16.state.viewType === TABLE ? TILE : TABLE;
-          (window._localStorage || window.localStorage).setItem('files.viewType', viewType);
-          var currentDir = _this16.state.selected;
-          if (isFile(currentDir)) {
-            currentDir = getParentDir(currentDir);
-          }
-          _this16.setState({
-            viewType: viewType,
-            currentDir: currentDir
-          }, function () {
-            if (_this16.state.viewType === TABLE) {
-              _this16.scrollToSelected();
+    renderInputDialog() {
+        if (this.state.addFolder) {
+            const parentFolder = this.findFirstFolder(this.state.selected);
+            if (!parentFolder) {
+                window.alert(this.props.t('ra_Invalid parent folder!'));
+                return null;
             }
-          });
-        },
-        size: "small"
-      }, this.state.viewType !== TABLE ? /*#__PURE__*/_react["default"].createElement(_iconsMaterial.List, {
-        fontSize: "small"
-      }) : /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ViewModule, {
-        fontSize: "small"
-      })) : null, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-        edge: "start",
-        title: this.props.t('ra_Hide empty folders'),
-        className: this.props.classes.menuButton,
-        color: this.state.filterEmpty ? 'secondary' : 'inherit',
-        "aria-label": "filter empty",
-        onClick: function onClick() {
-          (window._localStorage || window.localStorage).setItem('file.empty', !_this16.state.filterEmpty);
-          _this16.setState({
-            filterEmpty: !_this16.state.filterEmpty
-          });
-        },
-        size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.FolderOpen, {
-        fontSize: "small"
-      })), /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-        edge: "start",
-        title: this.props.t('ra_Reload files'),
-        className: this.props.classes.menuButton,
-        color: "inherit",
-        "aria-label": "reload files",
-        onClick: function onClick() {
-          return _this16.setState({
-            folders: {}
-          }, function () {
-            return _this16.loadFolders();
-          });
-        },
-        size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Refresh, {
-        fontSize: "small"
-      })), this.props.allowCreateFolder ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-        edge: "start",
-        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",
-        "aria-label": "add folder",
-        onClick: function onClick() {
-          return _this16.setState({
-            addFolder: true
-          });
-        },
-        size: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.CreateNewFolder, {
-        fontSize: "small"
-      })) : null, this.props.allowUpload ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-        edge: "start",
-        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",
-        "aria-label": "upload file",
-        onClick: function onClick() {
-          return _this16.setState({
-            uploadFile: true
-          });
-        },
-        size: "small"
-      }, /*#__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(_material.IconButton, {
-        size: "small",
-        onClick: function onClick(e) {
-          return _this16.setState({
-            showTypesMenu: e.target
-          });
-        }
-      }, /*#__PURE__*/_react["default"].createElement(IconType, {
-        fontSize: "small"
-      }))) : null, this.state.showTypesMenu ? /*#__PURE__*/_react["default"].createElement(_material.Menu, {
-        open: !0,
-        anchorEl: this.state.showTypesMenu,
-        onClose: function onClose() {
-          return _this16.setState({
-            showTypesMenu: null
-          });
+            return react_1.default.createElement(TextInput_1.default, { key: "inputDialog", applyText: this.props.t('ra_Create'), cancelText: this.props.t('ra_Cancel'), titleText: this.props.t('ra_Create new folder in %s', this.state.selected), promptText: this.props.t('ra_If no file will be created in the folder, it will disappear after the browser closed'), labelText: this.props.t('ra_Folder name'), verify: (text) => (this.state.folders[parentFolder].find(item => item.name === text) ? '' : this.props.t('ra_Duplicate name')), onClose: (name) => {
+                    if (name) {
+                        const folders = {};
+                        Object.keys(this.state.folders).forEach(folder => folders[folder] = this.state.folders[folder]);
+                        const parent = this.findItem(parentFolder);
+                        const id = `${parentFolder}/${name}`;
+                        folders[parentFolder].push({
+                            id,
+                            level: ((parent === null || parent === void 0 ? void 0 : parent.level) || 0) + 1,
+                            name,
+                            folder: true,
+                            temp: true,
+                        });
+                        folders[parentFolder].sort(sortFolders);
+                        folders[id] = [];
+                        const expanded = [...this.state.expanded];
+                        if (!expanded.includes(parentFolder)) {
+                            expanded.push(parentFolder);
+                            expanded.sort();
+                        }
+                        (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                        this.setState({ addFolder: false, folders, expanded }, () => this.select(id));
+                    }
+                    else {
+                        this.setState({ addFolder: false });
+                    }
+                }, replace: (text) => text.replace(/[^-_\w\d]/, '_') });
         }
-      }, Object.keys(FILE_TYPE_ICONS).map(function (type) {
-        var MyIcon = FILE_TYPE_ICONS[type];
-        return /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-          key: type,
-          selected: _this16.state.filterByType === type,
-          onClick: function onClick() {
-            if (type === 'all') {
-              (window._localStorage || window.localStorage).removeItem('files.filterByType');
-              _this16.setState({
-                filterByType: '',
-                showTypesMenu: null
-              });
-            } else {
-              (window._localStorage || window.localStorage).setItem('files.filterByType', type);
-              _this16.setState({
-                filterByType: type,
-                showTypesMenu: null
-              });
-            }
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_material.ListItemIcon, null, /*#__PURE__*/_react["default"].createElement(MyIcon, {
-          fontSize: "small"
-        })), /*#__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(_material.IconButton, {
-        color: "inherit",
-        edge: "start",
-        className: this.props.classes.menuButton,
-        onClick: this.setStateBackgroundImage,
-        size: "small"
-      }, /*#__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.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",
-    value: function findItem(id, folders) {
-      folders = folders || this.state.folders;
-      if (!folders) {
-        return null;
-      }
-      var parts = id.split('/');
-      parts.pop();
-      var parentFolder = parts.join('/') || '/';
-      if (!folders[parentFolder]) {
         return null;
-      }
-      return folders[parentFolder].find(function (item) {
-        return item.id === id;
-      });
     }
-  }, {
-    key: "renderInputDialog",
-    value: function renderInputDialog() {
-      var _this17 = this;
-      if (this.state.addFolder) {
-        var parentFolder = this.findFirstFolder(this.state.selected);
-        if (!parentFolder) {
-          return window.alert(this.props.t('ra_Invalid parent folder!'));
-        }
-        return /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-          key: "inputDialog",
-          applyText: this.props.t('ra_Create'),
-          cancelText: this.props.t('ra_Cancel'),
-          titleText: this.props.t('ra_Create new folder in %s', this.state.selected),
-          promptText: this.props.t('ra_If no file will be created in the folder, it will disappear after the browser closed'),
-          labelText: this.props.t('ra_Folder name'),
-          verify: function verify(text) {
-            return _this17.state.folders[parentFolder].find(function (item) {
-              return item.name === text;
-            }) ? '' : _this17.props.t('ra_Duplicate name');
-          },
-          onClose: function onClose(name) {
-            if (name) {
-              var folders = {};
-              Object.keys(_this17.state.folders).forEach(function (folder) {
-                return folders[folder] = _this17.state.folders[folder];
-              });
-              var parent = _this17.findItem(parentFolder);
-              var id = "".concat(parentFolder, "/").concat(name);
-              folders[parentFolder].push({
-                id: id,
-                level: parent.level + 1,
-                name: name,
-                folder: true,
-                temp: true
-              });
-              folders[parentFolder].sort(sortFolders);
-              folders[id] = [];
-              var expanded = (0, _toConsumableArray2["default"])(_this17.state.expanded);
-              if (!expanded.includes(parentFolder)) {
-                expanded.push(parentFolder);
-                expanded.sort();
-              }
-              (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
-              _this17.setState({
-                addFolder: false,
-                folders: folders,
-                expanded: expanded
-              }, function () {
-                return _this17.select(id);
-              });
-            } else {
-              _this17.setState({
-                addFolder: false
-              });
+    componentDidUpdate( /* prevProps , prevState, snapshot */) {
+        this.setOpacityTimer && clearTimeout(this.setOpacityTimer);
+        this.setOpacityTimer = setTimeout(() => {
+            this.setOpacityTimer = null;
+            const items = window.document.getElementsByClassName('browserItem');
+            for (let i = 0; i < items.length; i++) {
+                items[i].style.opacity = '1';
             }
-          },
-          replace: function replace(text) {
-            return text.replace(/[^-_\w\d]/, '_');
-          }
-        });
-      }
-      return null;
+        }, 100);
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate( /* prevProps , prevState, snapshot */
-    ) {
-      var _this18 = this;
-      this.setOpacityTimer && clearTimeout(this.setOpacityTimer);
-      this.setOpacityTimer = setTimeout(function () {
-        _this18.setOpacityTimer = null;
-        var items = window.document.getElementsByClassName('browserItem');
-        for (var i = 0; i < items.length; i++) {
-          items[i].style.opacity = 1;
-        }
-      }, 100);
+    uploadFile(fileName, data) {
+        const parts = fileName.split('/');
+        const adapter = parts.shift();
+        return this.props.socket.writeFile64(adapter || '', parts.join('/'), data)
+            .catch(e => window.alert(`Cannot write file: ${e}`));
     }
-  }, {
-    key: "uploadFile",
-    value: function uploadFile(fileName, data) {
-      var parts = fileName.split('/');
-      var adapter = parts.shift();
-      return this.props.socket.writeFile64(adapter, parts.join('/'), data)["catch"](function (e) {
-        return window.alert("Cannot write file: ".concat(e));
-      });
+    findFirstFolder(id) {
+        let parentFolder = id;
+        const item = this.findItem(parentFolder);
+        // find folder
+        if (item && !item.folder) {
+            const parts = parentFolder.split('/');
+            parts.pop();
+            parentFolder = '';
+            while (parts.length) {
+                const _item = this.findItem(parts.join('/'));
+                if (_item && _item.folder) {
+                    parentFolder = parts.join('/');
+                    break;
+                }
+            }
+        }
+        return parentFolder;
     }
-  }, {
-    key: "findFirstFolder",
-    value: function findFirstFolder(id) {
-      var parentFolder = id;
-      var item = this.findItem(parentFolder);
-      // find folder
-      if (item && !item.folder) {
-        var parts = parentFolder.split('/');
-        parts.pop();
-        parentFolder = '';
-        while (parts.length) {
-          var _item = this.findItem(parts.join('/'));
-          if (_item && _item.folder) {
-            parentFolder = parts.join('/');
-            break;
-          }
+    renderUpload() {
+        if (this.state.uploadFile) {
+            return [
+                react_1.default.createElement(material_1.Fab, { key: "close", color: "primary", "aria-label": "close", className: this.props.classes.uploadCloseButton, onClick: () => this.setState({ uploadFile: false }) },
+                    react_1.default.createElement(icons_material_1.Close, null)),
+                react_1.default.createElement(react_dropzone_1.default, { key: "dropzone", onDragEnter: () => this.setState({ uploadFile: 'dragging' }), onDragLeave: () => this.setState({ uploadFile: true }), onDrop: acceptedFiles => {
+                        let count = acceptedFiles.length;
+                        acceptedFiles.forEach(file => {
+                            const reader = new FileReader();
+                            reader.onabort = () => console.log('file reading was aborted');
+                            reader.onerror = () => console.log('file reading has failed');
+                            reader.onload = () => {
+                                const parentFolder = this.findFirstFolder(this.state.selected);
+                                if (!parentFolder) {
+                                    window.alert(this.props.t('ra_Invalid parent folder!'));
+                                }
+                                else {
+                                    const id = `${parentFolder}/${file.name}`;
+                                    this.uploadFile(id, reader.result)
+                                        .then(() => {
+                                        if (!--count) {
+                                            this.setState({ uploadFile: false }, () => {
+                                                if (this.supportSubscribes) {
+                                                    // open current folder
+                                                    const expanded = [...this.state.expanded];
+                                                    if (!expanded.includes(parentFolder)) {
+                                                        expanded.push(parentFolder);
+                                                        expanded.sort();
+                                                        (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                                                    }
+                                                    this.setState({ expanded }, () => this.select(id));
+                                                }
+                                                else {
+                                                    setTimeout(() => this.browseFolder(parentFolder, null, false, true)
+                                                        .then(folders => {
+                                                        // open current folder
+                                                        const expanded = [...this.state.expanded];
+                                                        if (!expanded.includes(parentFolder)) {
+                                                            expanded.push(parentFolder);
+                                                            expanded.sort();
+                                                            (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                                                        }
+                                                        this.setState({ folders, expanded }, () => this.select(id));
+                                                    }), 500);
+                                                }
+                                            });
+                                        }
+                                    });
+                                }
+                            };
+                            reader.readAsArrayBuffer(file);
+                        });
+                    } }, ({ getRootProps, getInputProps }) => (react_1.default.createElement("div", Object.assign({ className: Utils_1.default.clsx(this.props.classes.uploadDiv, this.state.uploadFile === 'dragging' && this.props.classes.uploadDivDragging) }, getRootProps()),
+                    react_1.default.createElement("input", Object.assign({}, getInputProps())),
+                    react_1.default.createElement("div", { className: this.props.classes.uploadCenterDiv },
+                        react_1.default.createElement("div", { className: this.props.classes.uploadCenterTextAndIcon },
+                            react_1.default.createElement(icons_material_1.Publish, { className: this.props.classes.uploadCenterIcon }),
+                            react_1.default.createElement("div", { className: this.props.classes.uploadCenterText }, this.state.uploadFile === 'dragging' ? this.props.t('ra_Drop file here') :
+                                this.props.t('ra_Place your files here or click here to open the browse dialog'))))))),
+            ];
         }
-      }
-      return parentFolder;
+        return null;
     }
-  }, {
-    key: "renderUpload",
-    value: function renderUpload() {
-      var _this19 = this;
-      if (this.state.uploadFile) {
-        return [/*#__PURE__*/_react["default"].createElement(_material.Fab, {
-          key: "close",
-          color: "primary",
-          "aria-label": "close",
-          className: this.props.classes.uploadCloseButton,
-          onClick: function onClick() {
-            return _this19.setState({
-              uploadFile: false
-            });
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)), /*#__PURE__*/_react["default"].createElement(_reactDropzone["default"], {
-          key: "dropzone",
-          onDragEnter: function onDragEnter() {
-            return _this19.setState({
-              uploadFile: 'dragging'
-            });
-          },
-          onDragLeave: function onDragLeave() {
-            return _this19.setState({
-              uploadFile: true
-            });
-          },
-          onDrop: function onDrop(acceptedFiles) {
-            var count = acceptedFiles.length;
-            acceptedFiles.forEach(function (file) {
-              var reader = new FileReader();
-              reader.onabort = function () {
-                return console.log('file reading was aborted');
-              };
-              reader.onerror = function () {
-                return console.log('file reading has failed');
-              };
-              reader.onload = function () {
-                var parentFolder = _this19.findFirstFolder(_this19.state.selected);
-                if (!parentFolder) {
-                  window.alert(_this19.props.t('ra_Invalid parent folder!'));
-                } else {
-                  var id = "".concat(parentFolder, "/").concat(file.name);
-                  _this19.uploadFile(id, reader.result).then(function () {
-                    if (! --count) {
-                      _this19.setState({
-                        uploadFile: false
-                      }, function () {
-                        if (_this19.supportSubscribes) {
-                          // open current folder
-                          var expanded = (0, _toConsumableArray2["default"])(_this19.state.expanded);
-                          if (!expanded.includes(parentFolder)) {
-                            expanded.push(parentFolder);
-                            expanded.sort();
-                            (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
-                          }
-                          _this19.setState({
-                            expanded: expanded
-                          }, function () {
-                            return _this19.select(id);
-                          });
-                        } else {
-                          setTimeout(function () {
-                            return _this19.browseFolder(parentFolder, true).then(function (folders) {
-                              // open current folder
-                              var expanded = (0, _toConsumableArray2["default"])(_this19.state.expanded);
-                              if (!expanded.includes(parentFolder)) {
-                                expanded.push(parentFolder);
-                                expanded.sort();
-                                (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
-                              }
-                              _this19.setState({
-                                folders: folders,
-                                expanded: expanded
-                              }, function () {
-                                return _this19.select(id);
-                              });
-                            });
-                          }, 500);
+    deleteRecursive(id) {
+        const item = this.findItem(id);
+        if (item === null || item === void 0 ? void 0 : item.folder) {
+            return (this.state.folders[id] ? Promise.all(this.state.folders[id].map(_item => this.deleteRecursive(_item.id))) : Promise.resolve())
+                .then(() => {
+                // If it is a folder of second level
+                if (item.level >= 1) {
+                    const parts = id.split('/');
+                    const adapter = parts.shift();
+                    this.props.socket.deleteFolder(adapter || '', parts.join('/'))
+                        .then(() => {
+                        // remove this folder
+                        const folders = JSON.parse(JSON.stringify(this.state.folders));
+                        delete folders[item.id];
+                        // delete folder from parent item
+                        const parentId = getParentDir(item.id);
+                        const parentFolder = folders[parentId];
+                        if (parentFolder) {
+                            const pos = parentFolder.findIndex((f) => f.id === item.id);
+                            if (pos !== -1) {
+                                parentFolder.splice(pos, 1);
+                            }
+                            this.select(parentId, null, () => this.setState({ folders }));
                         }
-                      });
-                    }
-                  });
+                    });
                 }
-              };
-              reader.readAsArrayBuffer(file);
             });
-          }
-        }, function (_ref2) {
-          var getRootProps = _ref2.getRootProps,
-            getInputProps = _ref2.getInputProps;
-          return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-            className: _Utils["default"].clsx(_this19.props.classes.uploadDiv, _this19.state.uploadFile === 'dragging' && _this19.props.classes.uploadDivDragging)
-          }, getRootProps()), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), /*#__PURE__*/_react["default"].createElement("div", {
-            className: _this19.props.classes.uploadCenterDiv
-          }, /*#__PURE__*/_react["default"].createElement("div", {
-            className: _this19.props.classes.uploadCenterTextAndIcon
-          }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Publish, {
-            className: _this19.props.classes.uploadCenterIcon
-          }), /*#__PURE__*/_react["default"].createElement("div", {
-            className: _this19.props.classes.uploadCenterText
-          }, _this19.state.uploadFile === 'dragging' ? _this19.props.t('ra_Drop file here') : _this19.props.t('ra_Place your files here or click here to open the browse dialog')))));
-        })];
-      }
-      return null;
+        }
+        const parts = id.split('/');
+        const adapter = parts.shift();
+        if (parts.length) {
+            return this.props.socket.deleteFile(adapter || '', parts.join('/'))
+                .catch(e => window.alert(`Cannot delete file: ${e}`));
+        }
+        return Promise.resolve();
     }
-  }, {
-    key: "deleteRecursive",
-    value: function deleteRecursive(id) {
-      var _this20 = this;
-      var item = this.findItem(id);
-      if (item.folder) {
-        return (this.state.folders[id] ? Promise.all(this.state.folders[id].map(function (_item) {
-          return _this20.deleteRecursive(_item.id);
-        })) : Promise.resolve()).then(function () {
-          // If it is folder of second level
-          if (item.level >= 1) {
-            var _parts2 = id.split('/');
-            var _adapter2 = _parts2.shift();
-            _this20.props.socket.deleteFolder(_adapter2, _parts2.join('/')).then(function () {
-              // remove this folder
-              var folders = JSON.parse(JSON.stringify(_this20.state.folders));
-              delete folders[item.id];
-              // delete folder from parent item
-              var parentId = getParentDir(item.id);
-              var parentFolder = folders[parentId];
-              if (parentFolder) {
-                var pos = parentFolder.indexOf(parentFolder.find(function (f) {
-                  return f.id === item.id;
-                }));
-                if (pos !== -1) {
-                  parentFolder.splice(pos, 1);
-                }
-                _this20.select(parentId, function () {
-                  return _this20.setState({
-                    folders: folders
-                  });
+    deleteItem(deleteItem) {
+        deleteItem = deleteItem || this.state.deleteItem;
+        this.setState({ deleteItem: '' }, () => this.deleteRecursive(deleteItem)
+            .then(() => {
+            const newState = {};
+            const pos = this.state.expanded.indexOf(deleteItem);
+            if (pos !== -1) {
+                const expanded = [...this.state.expanded];
+                expanded.splice(pos, 1);
+                (window._localStorage || window.localStorage).setItem('files.expanded', JSON.stringify(expanded));
+                newState.expanded = expanded;
+            }
+            if (this.state.selected === deleteItem) {
+                const parts = this.state.selected.split('/');
+                parts.pop();
+                newState.selected = parts.join('/');
+            }
+            if (!this.supportSubscribes) {
+                const parentFolder = this.findFirstFolder(deleteItem);
+                const folders = {};
+                Object.keys(this.state.folders).forEach(name => {
+                    if (name !== parentFolder && !name.startsWith(`${parentFolder}/`)) {
+                        folders[name] = this.state.folders[name];
+                    }
                 });
-              }
-            });
-          }
-        });
-      }
-      var parts = id.split('/');
-      var adapter = parts.shift();
-      if (parts.length) {
-        return this.props.socket.deleteFile(adapter, parts.join('/'))["catch"](function (e) {
-          return window.alert("Cannot delete file: ".concat(e));
-        });
-      }
-      return Promise.resolve();
+                newState.folders = folders;
+                // @ts-expect-error fix later
+                this.setState(newState, () => setTimeout(() => {
+                    this.browseFolders([...this.state.expanded], folders)
+                        .then(_folders => this.setState({ folders: _folders }));
+                }, 200));
+            }
+            else {
+                // @ts-expect-error fix later
+                this.setState(newState);
+            }
+        }));
     }
-  }, {
-    key: "deleteItem",
-    value: function deleteItem(_deleteItem) {
-      var _this21 = this;
-      _deleteItem = _deleteItem || this.state.deleteItem;
-      this.setState({
-        deleteItem: ''
-      }, function () {
-        return _this21.deleteRecursive(_deleteItem).then(function () {
-          var newState = {};
-          var pos = _this21.state.expanded.indexOf(_deleteItem);
-          if (pos !== -1) {
-            var expanded = (0, _toConsumableArray2["default"])(_this21.state.expanded);
-            expanded.splice(pos, 1);
-            (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 = {};
-            Object.keys(_this21.state.folders).forEach(function (name) {
-              if (name !== parentFolder && !name.startsWith("".concat(parentFolder, "/"))) {
-                folders[name] = _this21.state.folders[name];
-              }
-            });
-            newState.folders = folders;
-            _this21.setState(newState, function () {
-              return setTimeout(function () {
-                return _this21.browseFolders((0, _toConsumableArray2["default"])(_this21.state.expanded), folders).then(function (_folders) {
-                  return _this21.setState({
-                    folders: _folders
-                  });
-                });
-              }, 200);
-            });
-          } else {
-            _this21.setState(newState);
-          }
-        });
-      });
+    renderDeleteDialog() {
+        if (this.state.deleteItem) {
+            return react_1.default.createElement(material_1.Dialog, { key: "deleteDialog", open: !0, onClose: () => this.setState({ deleteItem: '' }), "aria-labelledby": "ar_dialog_file_delete_title" },
+                react_1.default.createElement(material_1.DialogTitle, { id: "ar_dialog_file_delete_title" }, this.props.t('ra_Confirm deletion of %s', this.state.deleteItem.split('/').pop())),
+                react_1.default.createElement(material_1.DialogContent, null,
+                    react_1.default.createElement(material_1.DialogContentText, null, this.props.t('ra_Are you sure?'))),
+                react_1.default.createElement(material_1.DialogActions, null,
+                    react_1.default.createElement(material_1.Button
+                    // @ts-expect-error grey is valid color
+                    , { 
+                        // @ts-expect-error grey is valid color
+                        color: "grey", variant: "contained", onClick: () => {
+                            this.suppressDeleteConfirm = Date.now() + 60000 * 5;
+                            this.deleteItem('');
+                        } }, this.props.t('ra_Delete (no confirm for 5 mins)')),
+                    react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.deleteItem(''), color: "primary", autoFocus: true }, this.props.t('ra_Delete')),
+                    react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.setState({ deleteItem: '' }), 
+                        // @ts-expect-error grey is valid color
+                        color: "grey" }, this.props.t('ra_Cancel'))));
+        }
+        return false;
     }
-  }, {
-    key: "renderDeleteDialog",
-    value: function renderDeleteDialog() {
-      var _this22 = this;
-      if (this.state.deleteItem) {
-        return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
-          key: "deleteDialog",
-          open: !0,
-          onClose: function onClose() {
-            return _this22.setState({
-              deleteItem: ''
-            });
-          },
-          "aria-labelledby": "ar_dialog_file_delete_title"
-        }, /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, {
-          id: "ar_dialog_file_delete_title"
-        }, 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(_material.Button, {
-          variant: "contained",
-          onClick: function onClick() {
-            return _this22.deleteItem();
-          },
-          color: "primary",
-          autoFocus: true
-        }, this.props.t('ra_Delete')), /*#__PURE__*/_react["default"].createElement(_material.Button, {
-          variant: "contained",
-          onClick: function onClick() {
-            return _this22.setState({
-              deleteItem: ''
-            });
-          },
-          color: "grey"
-        }, this.props.t('ra_Cancel'))));
-      }
-      return false;
+    renderViewDialog() {
+        return this.state.viewer ? react_1.default.createElement(FileViewer_1.default, { supportSubscribes: this.supportSubscribes, key: this.state.viewer, href: this.state.viewer, formatEditFile: this.state.formatEditFile, themeType: this.props.themeType, setStateBackgroundImage: this.setStateBackgroundImage, getClassBackgroundImage: this.getClassBackgroundImage, t: this.props.t, socket: this.props.socket, lang: this.props.lang, expertMode: this.state.expertMode, onClose: () => this.setState({ viewer: '', formatEditFile: '' }) }) : null;
     }
-  }, {
-    key: "renderViewDialog",
-    value: function renderViewDialog() {
-      var _this23 = this;
-      return this.state.viewer ? /*#__PURE__*/_react["default"].createElement(_FileViewer["default"], {
-        supportSubscribes: this.supportSubscribes,
-        key: this.state.viewer,
-        href: this.state.viewer,
-        formatEditFile: this.state.formatEditFile,
-        themeType: this.props.themeType,
-        setStateBackgroundImage: this.setStateBackgroundImage,
-        getClassBackgroundImage: this.getClassBackgroundImage,
-        t: this.props.t,
-        socket: this.props.socket,
-        lang: this.props.lang,
-        expertMode: this.state.expertMode,
-        onClose: function onClose() {
-          return _this23.setState({
-            viewer: '',
-            formatEditFile: ''
-          });
+    renderError() {
+        if (this.state.errorText) {
+            return react_1.default.createElement(Error_1.default, { key: "errorDialog", text: this.state.errorText, onClose: () => this.setState({ errorText: '' }) });
         }
-      }) : null;
-    }
-  }, {
-    key: "renderError",
-    value: function renderError() {
-      var _this24 = this;
-      if (this.state.errorText) {
-        return /*#__PURE__*/_react["default"].createElement(_Error["default"], {
-          classes: {},
-          key: "errorDialog",
-          text: this.state.errorText,
-          onClose: function onClose() {
-            return _this24.setState({
-              errorText: ''
-            });
-          }
-        });
-      }
-      return null;
+        return null;
     }
-
     // used in tabs/Files
     // eslint-disable-next-line react/no-unused-class-component-methods
-  }, {
-    key: "updateItemsAcl",
-    value: function updateItemsAcl(info) {
-      var _this25 = this;
-      this.cacheFolders = this.cacheFolders || JSON.parse(JSON.stringify(this.state.folders));
-      var changed;
-      info.forEach(function (it) {
-        var item = _this25.findItem(it.id, _this25.cacheFolders);
-        if (item && JSON.stringify(item.acl) !== JSON.stringify(it.acl)) {
-          item.acl = it.acl;
-          changed = true;
-        }
-      });
-      if (changed) {
-        this.cacheFoldersTimeout && clearTimeout(this.cacheFoldersTimeout);
-        this.cacheFoldersTimeout = setTimeout(function () {
-          _this25.cacheFoldersTimeout = null;
-          var folders = _this25.cacheFolders;
-          _this25.cacheFolders = null;
-          _this25.setState({
-            folders: folders
-          });
-        }, 200);
-      }
-    }
-  }, {
-    key: "changeToPath",
-    value: function changeToPath() {
-      var _this26 = this;
-      setTimeout(function () {
-        if (_this26.state.path !== _this26.state.selected && (!_this26.lastSelect || Date.now() - _this26.lastSelect > 100)) {
-          var folder = _this26.state.path;
-          if (isFile(_this26.state.path)) {
-            folder = getParentDir(_this26.state.path);
-          }
-          new Promise(function (resolve) {
-            if (!_this26.state.folders[folder]) {
-              _this26.browseFolder(folder).then(function (folders) {
-                return _this26.setState({
-                  folders: folders
-                }, function () {
-                  return resolve(true);
-                });
-              })["catch"](function (err) {
-                return _this26.setState({
-                  errorText: err === NOT_FOUND ? _this26.props.t('ra_Cannot find "%s"', folder) : _this26.props.t('ra_Cannot read "%s"', folder)
-                });
-              });
-            } else {
-              resolve(true);
+    updateItemsAcl(info) {
+        this.cacheFolders = this.cacheFolders || JSON.parse(JSON.stringify(this.state.folders));
+        let changed;
+        info.forEach(it => {
+            const item = this.findItem(it.id, this.cacheFolders);
+            if (item && JSON.stringify(item.acl) !== JSON.stringify(it.acl)) {
+                item.acl = it.acl;
+                changed = true;
             }
-          }).then(function (result) {
-            return result && _this26.setState({
-              selected: _this26.state.path,
-              currentDir: folder,
-              pathFocus: false
-            });
-          });
-        } else if (!_this26.lastSelect || Date.now() - _this26.lastSelect > 100) {
-          _this26.setState({
-            pathFocus: false
-          });
+        });
+        if (changed) {
+            this.cacheFoldersTimeout && clearTimeout(this.cacheFoldersTimeout);
+            this.cacheFoldersTimeout = setTimeout(() => {
+                this.cacheFoldersTimeout = null;
+                const folders = this.cacheFolders || {};
+                this.cacheFolders = null;
+                this.setState({ folders });
+            }, 200);
         }
-      }, 100);
     }
-  }, {
-    key: "renderBreadcrumb",
-    value: function renderBreadcrumb() {
-      var _this27 = this;
-      var parts = this.state.currentDir.startsWith('/') ? this.state.currentDir.split('/') : "/".concat(this.state.currentDir).split('/');
-      var p = [];
-      return /*#__PURE__*/_react["default"].createElement(_material.Breadcrumbs, {
-        style: {
-          paddingLeft: 8
-        }
-      }, parts.map(function (part, i) {
-        part && p.push(part);
-        var path = p.join('/');
-        if (i < parts.length - 1) {
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            key: "".concat(_this27.state.selected, "_").concat(i),
-            className: _this27.props.classes.pathDivBreadcrumbDir,
-            onClick: function onClick(e) {
-              return _this27.changeFolder(e, path || '/');
+    changeToPath() {
+        setTimeout(() => {
+            if (this.state.path !== this.state.selected && (!this.lastSelect || Date.now() - this.lastSelect > 100)) {
+                let folder = this.state.path;
+                if (isFile(this.state.path)) {
+                    folder = getParentDir(this.state.path);
+                }
+                new Promise(resolve => {
+                    if (!this.state.folders[folder]) {
+                        this.browseFolder(folder)
+                            .then(folders => this.setState({ folders }, () => resolve(true)))
+                            .catch(err => this.setState({ errorText: err === NOT_FOUND ? this.props.t('ra_Cannot find "%s"', folder) : this.props.t('ra_Cannot read "%s"', folder) }));
+                    }
+                    else {
+                        resolve(true);
+                    }
+                })
+                    .then(result => result && this.setState({ selected: this.state.path, currentDir: folder, pathFocus: false }));
             }
-          }, part || _this27.props.t('ra_Root'));
-        }
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          className: _this27.props.classes.pathDivBreadcrumbSelected,
-          key: "".concat(_this27.state.selected, "_").concat(i),
-          onClick: function onClick() {
-            return _this27.setState({
-              pathFocus: true
-            });
-          }
-        }, part);
-      }));
-    }
-  }, {
-    key: "renderPath",
-    value: function renderPath() {
-      var _this28 = this;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: "path",
-        className: this.props.classes.pathDiv
-      }, this.state.pathFocus ? /*#__PURE__*/_react["default"].createElement(_material.Input, {
-        value: this.state.path,
-        onKeyDown: function onKeyDown(e) {
-          if (e.keyCode === 13) {
-            _this28.changeToPath();
-          } else if (e.keyCode === 27) {
-            _this28.setState({
-              pathFocus: false
-            });
-          }
-        },
-        endAdornment: /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
-          size: "small",
-          onClick: function onClick() {
-            return _this28.changeToPath();
-          }
-        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.KeyboardReturn, null)),
-        onBlur: function onBlur() {
-          return _this28.changeToPath();
-        },
-        onChange: function onChange(e) {
-          return _this28.setState({
-            path: e.target.value
-          });
-        },
-        className: this.props.classes.pathDivInput
-      }) : this.renderBreadcrumb());
+            else if (!this.lastSelect || Date.now() - this.lastSelect > 100) {
+                this.setState({ pathFocus: false });
+            }
+        }, 100);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this29 = this;
-      if (!this.props.ready) {
-        return /*#__PURE__*/_react["default"].createElement(_material.LinearProgress, null);
-      }
-      if (this.state.loadAllFolders && !this.foldersLoading) {
-        this.foldersLoading = true;
-        setTimeout(function () {
-          _this29.setState({
-            loadAllFolders: false,
-            folders: {}
-          }, function () {
-            _this29.foldersLoading = false;
-            _this29.loadFolders();
-          });
-        }, 300);
-      }
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        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)]),
-        onClick: function onClick(e) {
-          if (_this29.state.viewType !== TABLE) {
-            if (_this29.state.selected !== (_this29.state.currentDir || '/')) {
-              _this29.changeFolder(e, _this29.state.currentDir || '/');
-            } else {
-              e.stopPropagation();
+    renderBreadcrumb() {
+        const parts = this.state.currentDir.startsWith('/') ? this.state.currentDir.split('/') : (`/${this.state.currentDir}`).split('/');
+        const p = [];
+        return react_1.default.createElement(material_1.Breadcrumbs, { style: { paddingLeft: 8 } }, parts.map((part, i) => {
+            part && p.push(part);
+            const path = p.join('/');
+            if (i < parts.length - 1) {
+                return react_1.default.createElement("div", { key: `${this.state.selected}_${i}`, className: this.props.classes.pathDivBreadcrumbDir, onClick: e => this.changeFolder(e, path || '/') }, part || this.props.t('ra_Root'));
             }
-          }
-        }
-      }, 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.renderError());
+            return react_1.default.createElement("div", { className: this.props.classes.pathDivBreadcrumbSelected, key: `${this.state.selected}_${i}`, onClick: () => this.setState({ pathFocus: true }) }, part);
+        }));
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (props.expertMode !== undefined && props.expertMode !== state.expertMode) {
-        return {
-          expertMode: props.expertMode,
-          loadAllFolders: true
-        };
-      }
-      return null;
+    renderPath() {
+        return react_1.default.createElement("div", { key: "path", className: this.props.classes.pathDiv }, this.state.pathFocus ?
+            react_1.default.createElement(material_1.Input, { value: this.state.path, onKeyDown: e => {
+                    if (e.keyCode === 13) {
+                        this.changeToPath();
+                    }
+                    else if (e.keyCode === 27) {
+                        this.setState({ pathFocus: false });
+                    }
+                }, endAdornment: react_1.default.createElement(material_1.IconButton, { size: "small", onClick: () => this.changeToPath() },
+                    react_1.default.createElement(icons_material_1.KeyboardReturn, null)), onBlur: () => this.changeToPath(), onChange: e => this.setState({ path: e.target.value }), className: this.props.classes.pathDivInput })
+            :
+                this.renderBreadcrumb());
     }
-  }, {
-    key: "getEditFile",
-    value: function getEditFile(ext) {
-      switch (ext) {
-        case 'json':
-        case 'json5':
-        case 'js':
-        case 'html':
-        case 'txt':
-        case 'css':
-        case 'log':
-          return true;
-        default:
-          return false;
-      }
+    render() {
+        if (!this.props.ready) {
+            return react_1.default.createElement(material_1.LinearProgress, null);
+        }
+        if (this.state.loadAllFolders && !this.foldersLoading) {
+            this.foldersLoading = true;
+            setTimeout(() => {
+                this.setState({ loadAllFolders: false, folders: {} }, () => {
+                    this.foldersLoading = false;
+                    this.loadFolders();
+                });
+            }, 300);
+        }
+        return react_1.default.createElement("div", { style: this.props.style, className: Utils_1.default.clsx(this.props.classes.root, this.props.className) },
+            this.props.showToolbar ? this.renderToolbar() : null,
+            this.state.viewType === TILE ? this.renderPath() : null,
+            react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes.filesDiv, this.props.classes[`filesDiv${this.state.viewType}`]), onClick: e => {
+                    if (this.state.viewType !== TABLE) {
+                        if (this.state.selected !== (this.state.currentDir || '/')) {
+                            this.changeFolder(e, this.state.currentDir || '/');
+                        }
+                        else {
+                            e.stopPropagation();
+                        }
+                    }
+                } },
+                this.state.viewType === TABLE ? this.renderItems('/') : this.renderItems(this.state.currentDir || '/'),
+                this.state.viewType !== TABLE ? react_1.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) : null,
+            this.renderError());
     }
-  }]);
-  return FileBrowser;
-}(_react.Component);
-FileBrowser.defaultProps = {
-  modalEditOfAccessControl: function modalEditOfAccessControl() {}
-};
-FileBrowser.propTypes = {
-  style: _propTypes["default"].object,
-  className: _propTypes["default"].string,
-  t: _propTypes["default"].func.isRequired,
-  lang: _propTypes["default"].string.isRequired,
-  socket: _propTypes["default"].object.isRequired,
-  ready: _propTypes["default"].bool,
-  expertMode: _propTypes["default"].bool,
-  showTypeSelector: _propTypes["default"].bool,
-  showToolbar: _propTypes["default"].bool,
-  allowUpload: _propTypes["default"].bool,
-  allowDownload: _propTypes["default"].bool,
-  allowCreateFolder: _propTypes["default"].bool,
-  allowDelete: _propTypes["default"].bool,
-  allowView: _propTypes["default"].bool,
-  imagePrefix: _propTypes["default"].string,
-  showExpertButton: _propTypes["default"].bool,
-  viewType: _propTypes["default"].string,
-  showViewTypeButton: _propTypes["default"].bool,
-  themeType: _propTypes["default"].string,
-  restrictToFolder: _propTypes["default"].string,
-  // If defined, allow selecting only files from this folder
-  allowNonRestricted: _propTypes["default"].bool,
-  // If restrictToFolder defined, allow selecting files outside of this folder
-
-  selected: _propTypes["default"].string,
-  tileView: _propTypes["default"].bool,
-  filterFiles: _propTypes["default"].array,
-  // like ['png', 'svg', 'bmp', 'jpg', 'jpeg', 'gif']
-  filterByType: _propTypes["default"].string,
-  // images, code or txt from EXTENSIONS
-  onSelect: _propTypes["default"].func,
-  // function (id, isDoubleClick)
-
-  modalEditOfAccessControl: _propTypes["default"].func
-};
-
-/** @type {typeof FileBrowser} */
-var _export = (0, _withWidth["default"])()((0, _styles.withStyles)(styles)(FileBrowser));
-var _default = exports["default"] = _export;
-//# sourceMappingURL=FileBrowser.js.map
+}
+exports.default = (0, withWidth_1.default)()((0, styles_1.withStyles)(styles)(FileBrowser));