@iobroker/adapter-react-v5 4.2.1 → 4.3.1

package/Components/ObjectBrowser.js

@@ -19,62 +19,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _styles = require("@mui/styles");
 var _reactInlinesvg = _interopRequireDefault(require("react-inlinesvg"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
-var _Select = _interopRequireDefault(require("@mui/material/Select"));
-var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
-var _Input = _interopRequireDefault(require("@mui/material/Input"));
-var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
-var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
-var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
-var _Snackbar = _interopRequireDefault(require("@mui/material/Snackbar"));
-var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-var _List = _interopRequireDefault(require("@mui/material/List"));
-var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
-var _ListItemButton = _interopRequireDefault(require("@mui/material/ListItemButton"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemSecondaryAction = _interopRequireDefault(require("@mui/material/ListItemSecondaryAction"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
-var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
-var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
-var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
-var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
-var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
-var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
-var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
-var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
-var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
-var _Settings = _interopRequireDefault(require("@mui/icons-material/Settings"));
-var _SettingsApplications = _interopRequireDefault(require("@mui/icons-material/SettingsApplications"));
-var _Photo = _interopRequireDefault(require("@mui/icons-material/Photo"));
-var _SupervisedUserCircle = _interopRequireDefault(require("@mui/icons-material/SupervisedUserCircle"));
-var _CalendarToday = _interopRequireDefault(require("@mui/icons-material/CalendarToday"));
-var _PersonOutlined = _interopRequireDefault(require("@mui/icons-material/PersonOutlined"));
-var _Router = _interopRequireDefault(require("@mui/icons-material/Router"));
-var _Wifi = _interopRequireDefault(require("@mui/icons-material/Wifi"));
-var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
-var _Description = _interopRequireDefault(require("@mui/icons-material/Description"));
-var _Code = _interopRequireDefault(require("@mui/icons-material/Code"));
-var _ShowChart = _interopRequireDefault(require("@mui/icons-material/ShowChart"));
-var _ListAlt = _interopRequireDefault(require("@mui/icons-material/ListAlt"));
-var _ViewColumn = _interopRequireDefault(require("@mui/icons-material/ViewColumn"));
-var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-var _Build = _interopRequireDefault(require("@mui/icons-material/Build"));
-var _Publish = _interopRequireDefault(require("@mui/icons-material/Publish"));
-var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
-var _Refresh = _interopRequireDefault(require("@mui/icons-material/Refresh"));
-var _LooksOne = _interopRequireDefault(require("@mui/icons-material/LooksOne"));
-var _RoomService = _interopRequireDefault(require("@mui/icons-material/RoomService"));
-var _Error = _interopRequireDefault(require("@mui/icons-material/Error"));
-var _WifiOff = _interopRequireDefault(require("@mui/icons-material/WifiOff"));
-var _TextFields = _interopRequireDefault(require("@mui/icons-material/TextFields"));
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
 var _IconExpert = _interopRequireDefault(require("../icons/IconExpert"));
 var _IconAdapter = _interopRequireDefault(require("../icons/IconAdapter"));
 var _IconAlias = _interopRequireDefault(require("../icons/IconAlias"));
@@ -104,10 +52,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
                                                                                                                                                                                                                                                                                                                                            *
                                                                                                                                                                                                                                                                                                                                            * MIT License
                                                                                                                                                                                                                                                                                                                                            *
-                                                                                                                                                                                                                                                                                                                                           **/ // import ListItemButton from '@mui/material/ListItemButton';
-// import Slider from '@mui/material/Slider';
-// import Typography from '@mui/material/Typography';
-// Icons
+                                                                                                                                                                                                                                                                                                                                           **/ // Icons
 // own
 var ICON_SIZE = 24;
 var ROW_HEIGHT = 32;
@@ -308,12 +253,12 @@ var styles = function styles(theme) {
       fontSize: 14
     },
     cellIdTooltipLink: {
-      color: "#7ec2fd",
-      "&:hover": {
-        color: "#7ec2fd"
+      color: '#7ec2fd',
+      '&:hover': {
+        color: '#7ec2fd'
       },
-      "&:visited": {
-        color: "#7ec2fd"
+      '&:visited': {
+        color: '#7ec2fd'
       }
     },
     cellCopyButton: {
@@ -823,17 +768,15 @@ function getSelectIdIcon(objects, id, imagePrefix) {
       } else {
         return null; // '<i class="material-icons iob-list-icon">' + objects[_id_].common.icon + '</i>';
       }
+    } else if (aIcon.startsWith('data:image/svg')) {
+      src = /*#__PURE__*/_react["default"].createElement(_reactInlinesvg["default"], {
+        className: "iconOwn",
+        src: aIcon,
+        width: 28,
+        height: 28
+      });
     } else {
-      if (aIcon.startsWith('data:image/svg')) {
-        src = /*#__PURE__*/_react["default"].createElement(_reactInlinesvg["default"], {
-          className: "iconOwn",
-          src: aIcon,
-          width: 28,
-          height: 28
-        });
-      } else {
-        src = aIcon;
-      }
+      src = aIcon;
     }
   } else {
     var common = objects[id] && objects[id].common;
@@ -1074,11 +1017,11 @@ function getSystemIcon(objects, id, k, imagePrefix) {
 
   // system or design have special icons
   if (id.startsWith('_design/') || id === 'system') {
-    icon = /*#__PURE__*/_react["default"].createElement(_SettingsApplications["default"], {
+    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.SettingsApplications, {
       className: "iconOwn"
     });
   } else if (id === '0_userdata' || id === '0_userdata.0') {
-    icon = /*#__PURE__*/_react["default"].createElement(_Photo["default"], {
+    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Photo, {
       className: "iconOwn"
     });
   } else if (id === 'alias' || id === 'alias.0') {
@@ -1086,31 +1029,31 @@ function getSystemIcon(objects, id, k, imagePrefix) {
       className: "iconOwn"
     });
   } else if (id === 'system.adapter') {
-    icon = /*#__PURE__*/_react["default"].createElement(_SettingsApplications["default"], {
+    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.SettingsApplications, {
       className: "iconOwn"
     });
   } else if (id === 'system.group') {
-    icon = /*#__PURE__*/_react["default"].createElement(_SupervisedUserCircle["default"], {
+    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.SupervisedUserCircle, {
       className: "iconOwn"
     });
   } else if (id === 'system.user') {
-    icon = /*#__PURE__*/_react["default"].createElement(_PersonOutlined["default"], {
+    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.PersonOutlined, {
       className: "iconOwn"
     });
   } else if (id === 'system.host') {
-    icon = /*#__PURE__*/_react["default"].createElement(_Router["default"], {
+    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Router, {
       className: "iconOwn"
     });
   } else if (id.endsWith('.connection') || id.endsWith('.connected')) {
-    icon = /*#__PURE__*/_react["default"].createElement(_Wifi["default"], {
+    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Wifi, {
       className: "iconOwn"
     });
   } else if (id.endsWith('.info')) {
-    icon = /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Info, {
       className: "iconOwn"
     });
   } else if (objects[id] && objects[id].type === 'meta') {
-    icon = /*#__PURE__*/_react["default"].createElement(_Description["default"], {
+    icon = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Description, {
       className: "iconOwn"
     });
   } else if (k < 2) {
@@ -1149,11 +1092,10 @@ function getIdFieldTooltip(data, classes, lang) {
       target: "_blank",
       rel: "noreferrer"
     }, tooltip);
-  } else {
-    return /*#__PURE__*/_react["default"].createElement("span", {
-      className: _Utils["default"].clsx(classes.cellIdTooltip)
-    }, tooltip || data.id || '');
   }
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: _Utils["default"].clsx(classes.cellIdTooltip)
+  }, tooltip || data.id || '');
 }
 function buildTree(objects, options) {
   options = options || {};
@@ -1487,13 +1429,26 @@ function quality2text(q) {
 }
 */
 
-function formatValue(id, state, obj, texts, dateFormat, isFloatComma) {
+/** @typedef  {{ state: ioBroker.State, obj: Record<string, any>, texts: Record<string, any>, dateFormat: any, isFloatComma: boolean }} FormatValueOptions */
+
+/**
+ * Format a state value for visualization
+ *
+ * @param {FormatValueOptions} options
+ * @return {{valText: {}, valFull: [{t: (*|String), v: (string|*)}] }}
+ */
+function formatValue(options) {
+  var dateFormat = options.dateFormat,
+    obj = options.obj,
+    state = options.state,
+    isFloatComma = options.isFloatComma,
+    texts = options.texts;
   var states = _Utils["default"].getStates(obj);
   var isCommon = obj.common;
   var valText = {};
   var v = isCommon && isCommon.type === 'file' ? '[file]' : !state || state.val === null ? '(null)' : state.val === undefined ? '[undef]' : state.val;
   var type = (0, _typeof2["default"])(v);
-  if (isCommon && isCommon.role && typeof isCommon.role === 'string' && isCommon.role.match(/^value\.time|^date/)) {
+  if (isCommon !== null && isCommon !== void 0 && isCommon.role && typeof isCommon.role === 'string' && isCommon.role.match(/^value\.time|^date/)) {
     if (v && typeof v === 'string') {
       if (v.length === 13) {
         // (length of "1647597254924") warning, this solution only works till Nov 20 2286 18:46:39CET
@@ -1532,7 +1487,7 @@ function formatValue(id, state, obj, texts, dateFormat, isFloatComma) {
       v = states[v];
     }
   }
-  if (isCommon && isCommon.unit) {
+  if (isCommon !== null && isCommon !== void 0 && isCommon.unit) {
     valText.u = isCommon.unit;
   }
   var valFull = [{
@@ -1593,10 +1548,28 @@ function formatValue(id, state, obj, texts, dateFormat, isFloatComma) {
   valText.v = v;
   return {
     valText: valText,
-    valFull: valFull,
-    style: {
-      color: state !== null && state !== void 0 && state.ack ? state.q ? '#ffa500' : '' : '#ff2222c9'
-    }
+    valFull: valFull
+  };
+}
+
+/** @typedef {{ state: ioBroker.State, isExpertMode: boolean, isButton: boolean }} GetValueStyleOptions */
+
+/**
+ * Get css style for given state value
+ *
+ * @param {GetValueStyleOptions} options
+ * @return {{color: (string)}}
+ */
+function getValueStyle(options) {
+  var state = options.state,
+    isExpertMode = options.isExpertMode,
+    isButton = options.isButton;
+  var color = state !== null && state !== void 0 && state.ack ? state.q ? '#ffa500' : '' : '#ff2222c9';
+  if (!isExpertMode && isButton) {
+    color = '';
+  }
+  return {
+    color: color
   };
 }
 function prepareSparkData(values, from) {
@@ -1655,7 +1628,7 @@ var ITEM_IMAGES = {
   adapter: /*#__PURE__*/_react["default"].createElement(_IconAdapter["default"], {
     className: "itemIcon"
   }),
-  meta: /*#__PURE__*/_react["default"].createElement(_Description["default"], {
+  meta: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Description, {
     className: "itemIcon"
   }),
   instance: /*#__PURE__*/_react["default"].createElement(_IconInstance["default"], {
@@ -1664,35 +1637,35 @@ var ITEM_IMAGES = {
       color: '#7da7ff'
     }
   }),
-  "enum": /*#__PURE__*/_react["default"].createElement(_ListAlt["default"], {
+  "enum": /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ListAlt, {
     className: "itemIcon"
   }),
-  chart: /*#__PURE__*/_react["default"].createElement(_ShowChart["default"], {
+  chart: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ShowChart, {
     className: "itemIcon"
   }),
-  config: /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
+  config: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Settings, {
     className: "itemIcon"
   }),
-  group: /*#__PURE__*/_react["default"].createElement(_SupervisedUserCircle["default"], {
+  group: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.SupervisedUserCircle, {
     className: "itemIcon"
   }),
-  user: /*#__PURE__*/_react["default"].createElement(_PersonOutlined["default"], {
+  user: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.PersonOutlined, {
     className: "itemIcon"
   }),
-  host: /*#__PURE__*/_react["default"].createElement(_Router["default"], {
+  host: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Router, {
     className: "itemIcon"
   }),
-  schedule: /*#__PURE__*/_react["default"].createElement(_CalendarToday["default"], {
+  schedule: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.CalendarToday, {
     className: "itemIcon"
   }),
-  script: /*#__PURE__*/_react["default"].createElement(_Code["default"], {
+  script: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Code, {
     className: "itemIcon"
   }),
   folder: /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], {
     className: "itemIcon itemIconFolder"
   })
 };
-var StyledBadge = (0, _withStyles["default"])(function (theme) {
+var StyledBadge = (0, _styles.withStyles)(function (theme) {
   return {
     badge: {
       right: 3,
@@ -1701,7 +1674,7 @@ var StyledBadge = (0, _withStyles["default"])(function (theme) {
       padding: '0 4px'
     }
   };
-})(_Badge["default"]);
+})(_material.Badge);
 var SCREEN_WIDTHS = {
   // extra-small: 0px
   xs: {
@@ -1912,59 +1885,63 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      */
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_createAllEnums", /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(enums, objId) {
-        var e, _enObj$common, id, _enObj, enObj;
+        var e, _oldObj$common, id, newObj, oldObj;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               e = 0;
             case 1:
               if (!(e < enums.length)) {
-                _context.next = 24;
+                _context.next = 26;
                 break;
               }
               id = enums[e];
-              _enObj = void 0;
+              newObj = void 0; // some admin version delivered enums as string
               if ((0, _typeof2["default"])(id) === 'object') {
-                _enObj = id;
+                newObj = id;
                 id = id._id;
               }
-              enObj = _this.objects[id];
-              if (enObj) {
-                _context.next = 14;
+              oldObj = _this.objects[id]; // if enum does not exist
+              if (oldObj) {
+                _context.next = 15;
                 break;
               }
-              enObj = _enObj || {
+              // create a new one
+              oldObj = newObj || {
                 _id: id,
                 common: {
                   name: id.split('.').pop(),
                   members: []
                 },
-                "native": {}
+                "native": {},
+                type: 'enum'
               };
-              enObj.common = enObj.common || {};
-              enObj.common.members = [objId];
-              _context.next = 12;
-              return _this.props.socket.setObject(id, enObj);
-            case 12:
-              _context.next = 21;
+              oldObj.common = oldObj.common || {};
+              oldObj.common.members = [objId];
+              oldObj.type = 'enum';
+              _context.next = 13;
+              return _this.props.socket.setObject(id, oldObj);
+            case 13:
+              _context.next = 23;
               break;
-            case 14:
-              if ((_enObj$common = enObj.common) !== null && _enObj$common !== void 0 && (_enObj$common = _enObj$common.members) !== null && _enObj$common !== void 0 && _enObj$common.includes(objId)) {
-                _context.next = 21;
+            case 15:
+              if ((_oldObj$common = oldObj.common) !== null && _oldObj$common !== void 0 && (_oldObj$common = _oldObj$common.members) !== null && _oldObj$common !== void 0 && _oldObj$common.includes(objId)) {
+                _context.next = 23;
                 break;
               }
-              enObj.common = enObj.common || {};
-              enObj.common.members = enObj.common.members || [];
-              // add missing object
-              enObj.common.members.push(objId);
-              enObj.common.members.sort();
-              _context.next = 21;
-              return _this.props.socket.setObject(id, enObj);
-            case 21:
+              oldObj.common = oldObj.common || {};
+              oldObj.type = 'enum';
+              oldObj.common.members = oldObj.common.members || [];
+              // add the missing object
+              oldObj.common.members.push(objId);
+              oldObj.common.members.sort();
+              _context.next = 23;
+              return _this.props.socket.setObject(id, oldObj);
+            case 23:
               e++;
               _context.next = 1;
               break;
-            case 24:
+            case 26:
             case "end":
               return _context.stop();
           }
@@ -2441,16 +2418,6 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       (window._localStorage || window.localStorage).removeItem("".concat(_this.props.dialogName || 'App', ".table"));
       _this.forceUpdate();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "extendObject", function (id, data) {
-      return _this.props.socket.extendObject(id, data)["catch"](function (error) {
-        return window.alert(error);
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setObject", function (id, data) {
-      return _this.props.socket.setObject(id, data)["catch"](function (error) {
-        return window.alert(error);
-      });
-    });
     _this.lastSelectedItems = (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".objectSelected")) || '[]';
     try {
       _this.lastSelectedItems = JSON.parse(_this.lastSelectedItems);
@@ -2744,7 +2711,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         var node = _this2.state.selected && _this2.state.selected.length && findNode(_this2.root, _this2.state.selected[0]);
         _this2.lastAppliedFilter = null;
 
-        // If selected ID is not visible, reset filter
+        // If the selected ID is not visible, reset filter
         if (node && !applyFilter(node, _this2.state.filter, _this2.props.lang, _this2.objects, null, null, props.customFilter, props.types)) {
           // reset filter
           _this2.setState({
@@ -2778,7 +2745,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
     /**
      * @private
-     * @param {ioBroker.EmptyCallback} cb
+     * @param {ioBroker.EmptyCallback?} cb
      */
   }, {
     key: "expandAllSelected",
@@ -2847,25 +2814,38 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     /**
      * Called when component is mounted.
      */
-    function componentDidMount() {
-      var _this4 = this;
-      this.loadAllObjects(!objectsAlreadyLoaded).then(function () {
-        if (_this4.props.objectsWorker) {
-          _this4.props.objectsWorker.registerHandler(_this4.onObjectChange);
-        } else {
-          _this4.props.socket.subscribeObject('*', _this4.onObjectChange);
-        }
-        objectsAlreadyLoaded = true;
-      });
-    }
-
+    function () {
+      var _componentDidMount = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return this.loadAllObjects(!objectsAlreadyLoaded);
+            case 2:
+              if (this.props.objectsWorker) {
+                this.props.objectsWorker.registerHandler(this.onObjectChange);
+              } else {
+                this.props.socket.subscribeObject('*', this.onObjectChange);
+              }
+              objectsAlreadyLoaded = true;
+            case 4:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function componentDidMount() {
+        return _componentDidMount.apply(this, arguments);
+      }
+      return componentDidMount;
+    }()
     /**
      * Called when component is unmounted.
      */
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this5 = this;
+      var _this4 = this;
       this.filterTimer && clearTimeout(this.filterTimer);
       this.filterTimer = null;
       if (this.props.objectsWorker) {
@@ -2877,7 +2857,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       // remove all subscribes
       this.subscribes.forEach(function (pattern) {
         console.log("- unsubscribe ".concat(pattern));
-        _this5.props.socket.unsubscribeState(pattern, _this5.onStateChange);
+        _this4.props.socket.unsubscribeState(pattern, _this4.onStateChange);
       });
       this.subscribes = [];
       this.objects = {};
@@ -2889,11 +2869,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "refreshComponent",
     value: function refreshComponent() {
-      var _this6 = this;
+      var _this5 = this;
       // remove all subscribes
       this.subscribes.forEach(function (pattern) {
         console.log("- unsubscribe ".concat(pattern));
-        _this6.props.socket.unsubscribeState(pattern, _this6.onStateChange);
+        _this5.props.socket.unsubscribeState(pattern, _this5.onStateChange);
       });
       this.subscribes = [];
       this.loadAllObjects(true).then(function () {
@@ -2908,32 +2888,32 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderErrorDialog",
     value: function renderErrorDialog() {
-      var _this7 = this;
-      return this.state.error ? /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      var _this6 = this;
+      return this.state.error ? /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
         open: !0,
         maxWidth: "sm",
         fullWidth: true,
         onClose: function onClose() {
-          return _this7.setState({
+          return _this6.setState({
             error: ''
           });
         },
         "aria-labelledby": "error-dialog-title",
         "aria-describedby": "error-dialog-description"
-      }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, {
         id: "alert-dialog-title"
-      }, this.props.title || this.props.t('ra_Error')), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], {
+      }, this.props.title || this.props.t('ra_Error')), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_material.DialogContentText, {
         id: "alert-dialog-description"
-      }, this.state.error)), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }, this.state.error)), /*#__PURE__*/_react["default"].createElement(_material.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
         variant: "contained",
         onClick: function onClick() {
-          return _this7.setState({
+          return _this6.setState({
             error: ''
           });
         },
         color: "primary",
         autoFocus: true,
-        startIcon: /*#__PURE__*/_react["default"].createElement(_Check["default"], null)
+        startIcon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Check, null)
       }, this.props.t('ra_Ok')))) : null;
     }
 
@@ -2957,7 +2937,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onSelect",
     value: function onSelect(toggleItem, isDouble) {
-      var _this8 = this;
+      var _this7 = this;
       if (!this.props.multiSelect) {
         if (this.objects[toggleItem] && (!this.props.types || this.props.types.includes(this.objects[toggleItem].type))) {
           (window._localStorage || window.localStorage).removeItem("".concat(this.props.dialogName || 'App', ".selectedNonObject"));
@@ -2966,7 +2946,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
               selected: [toggleItem],
               selectedNonObject: ''
             }, function () {
-              return _this8.onAfterSelect(isDouble);
+              return _this7.onAfterSelect(isDouble);
             });
           } else if (isDouble && this.props.onSelect) {
             this.onAfterSelect(isDouble);
@@ -2977,7 +2957,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             selected: [],
             selectedNonObject: toggleItem
           }, function () {
-            return _this8.onAfterSelect();
+            return _this7.onAfterSelect();
           });
         }
       } else if (this.objects[toggleItem] && (!this.props.types || this.props.types.includes(this.objects[toggleItem].type))) {
@@ -2994,7 +2974,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           selected: selected,
           selectedNonObject: ''
         }, function () {
-          return _this8.onAfterSelect(isDouble);
+          return _this7.onAfterSelect(isDouble);
         });
       }
     }
@@ -3006,7 +2986,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "_renderDefinedList",
     value: function _renderDefinedList(isLast) {
-      var _this9 = this;
+      var _this8 = this;
       var cols = (0, _toConsumableArray2["default"])(this.possibleCols);
       cols.unshift('id');
       if (this.props.columns && !this.props.columns.includes('buttons')) {
@@ -3018,10 +2998,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       return cols.filter(function (id) {
         return isLast && (id === 'val' || id === 'buttons') || !isLast && id !== 'val' && id !== 'buttons';
       }).map(function (id) {
-        return /*#__PURE__*/_react["default"].createElement(_ListItemButton["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_material.ListItemButton, {
           onClick: function onClick() {
-            if (!_this9.state.columnsAuto && id !== 'id') {
-              var columns = (0, _toConsumableArray2["default"])(_this9.state.columns || []);
+            if (!_this8.state.columnsAuto && id !== 'id') {
+              var columns = (0, _toConsumableArray2["default"])(_this8.state.columns || []);
               var _pos = columns.indexOf(id);
               if (_pos === -1) {
                 columns.push(id);
@@ -3029,21 +3009,21 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
               } else {
                 columns.splice(_pos, 1);
               }
-              (window._localStorage || window.localStorage).setItem((_this9.props.dialogName || 'App') + '.columns', JSON.stringify(columns));
-              _this9.calculateColumnsVisibility(null, columns);
-              _this9.setState({
+              (window._localStorage || window.localStorage).setItem("".concat(_this8.props.dialogName || 'App', ".columns"), JSON.stringify(columns));
+              _this8.calculateColumnsVisibility(null, columns);
+              _this8.setState({
                 columns: columns
               });
             }
           },
           key: id
-        }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
           edge: "start",
-          disabled: id === 'id' || _this9.state.columnsAuto,
-          checked: id === 'id' || (_this9.state.columnsAuto ? _this9.visibleCols.includes(id) : _this9.state.columns && _this9.state.columns.includes(id)),
+          disabled: id === 'id' || _this8.state.columnsAuto,
+          checked: id === 'id' || (_this8.state.columnsAuto ? _this8.visibleCols.includes(id) : _this8.state.columns && _this8.state.columns.includes(id)),
           disableRipple: true
-        }), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
-          primary: _this9.texts['filter_' + id] || _this9.props.t('ra_' + id)
+        }), /*#__PURE__*/_react["default"].createElement(_material.ListItemText, {
+          primary: _this8.texts["filter_".concat(id)] || _this8.props.t("ra_".concat(id))
         }));
       });
     }
@@ -3055,13 +3035,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColumnsSelectorDialog",
     value: function renderColumnsSelectorDialog() {
-      var _this10 = this;
+      var _this9 = this;
       if (!this.state.columnsSelectorShow) {
         return null;
       }
-      return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
         onClose: function onClose() {
-          return _this10.setState({
+          return _this9.setState({
             columnsSelectorShow: false
           });
         },
@@ -3069,68 +3049,66 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         classes: {
           root: _Utils["default"].clsx(this.props.classes.dialogColumns, this.props.classes["transparent_".concat(this.state.columnsDialogTransparent)])
         }
-      }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, {
         className: this.props.classes.fontSizeTitle
-      }, this.props.t('ra_Configure')), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], {
+      }, this.props.t('ra_Configure')), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, {
         className: this.props.classes.fontSizeTitle
-      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
         className: this.props.classes.switchColumnAuto,
-        control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+        control: /*#__PURE__*/_react["default"].createElement(_material.Switch, {
           checked: this.state.foldersFirst,
           onChange: function onChange() {
-            (window._localStorage || window.localStorage).setItem("".concat(_this10.props.dialogName || 'App', ".foldersFirst"), _this10.state.foldersFirst ? 'false' : 'true');
-            _this10.setState({
-              foldersFirst: !_this10.state.foldersFirst
+            (window._localStorage || window.localStorage).setItem("".concat(_this9.props.dialogName || 'App', ".foldersFirst"), _this9.state.foldersFirst ? 'false' : 'true');
+            _this9.setState({
+              foldersFirst: !_this9.state.foldersFirst
             });
           }
         }),
         label: this.props.t('ra_Folders always first')
-      }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
         className: this.props.classes.switchColumnAuto,
-        control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+        control: /*#__PURE__*/_react["default"].createElement(_material.Switch, {
           checked: this.state.linesEnabled,
           onChange: function onChange() {
-            (window._localStorage || window.localStorage).setItem("".concat(_this10.props.dialogName || 'App', ".lines"), _this10.state.linesEnabled ? 'false' : 'true');
-            _this10.setState({
-              linesEnabled: !_this10.state.linesEnabled
+            (window._localStorage || window.localStorage).setItem("".concat(_this9.props.dialogName || 'App', ".lines"), _this9.state.linesEnabled ? 'false' : 'true');
+            _this9.setState({
+              linesEnabled: !_this9.state.linesEnabled
             });
           }
         }),
         label: this.props.t('ra_Show lines between rows')
-      }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
         className: this.props.classes.switchColumnAuto,
-        control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+        control: /*#__PURE__*/_react["default"].createElement(_material.Switch, {
           checked: this.state.columnsAuto,
           onChange: function onChange() {
-            (window._localStorage || window.localStorage).setItem((_this10.props.dialogName || 'App') + '.columnsAuto', _this10.state.columnsAuto ? 'false' : 'true');
-            if (!_this10.state.columnsAuto) {
-              _this10.calculateColumnsVisibility(true);
-              _this10.setState({
+            (window._localStorage || window.localStorage).setItem("".concat(_this9.props.dialogName || 'App', ".columnsAuto"), _this9.state.columnsAuto ? 'false' : 'true');
+            if (!_this9.state.columnsAuto) {
+              _this9.calculateColumnsVisibility(true);
+              _this9.setState({
                 columnsAuto: true
               });
+            } else if (!_this9.state.columns) {
+              _this9.calculateColumnsVisibility(false, (0, _toConsumableArray2["default"])(_this9.visibleCols));
+              _this9.setState({
+                columnsAuto: false,
+                columns: (0, _toConsumableArray2["default"])(_this9.visibleCols)
+              });
             } else {
-              if (!_this10.state.columns) {
-                _this10.calculateColumnsVisibility(false, (0, _toConsumableArray2["default"])(_this10.visibleCols));
-                _this10.setState({
-                  columnsAuto: false,
-                  columns: (0, _toConsumableArray2["default"])(_this10.visibleCols)
-                });
-              } else {
-                _this10.calculateColumnsVisibility(false);
-                _this10.setState({
-                  columnsAuto: false
-                });
-              }
+              _this9.calculateColumnsVisibility(false);
+              _this9.setState({
+                columnsAuto: false
+              });
             }
           }
         }),
         label: this.props.t('ra_Auto (no custom columns)')
-      }), /*#__PURE__*/_react["default"].createElement(_List["default"], null, this._renderDefinedList(false), this.state.columnsForAdmin && Object.keys(this.state.columnsForAdmin).sort().map(function (adapter) {
-        return _this10.state.columnsForAdmin[adapter].map(function (column) {
-          return /*#__PURE__*/_react["default"].createElement(_ListItemButton["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_material.List, null, this._renderDefinedList(false), this.state.columnsForAdmin && Object.keys(this.state.columnsForAdmin).sort().map(function (adapter) {
+        return _this9.state.columnsForAdmin[adapter].map(function (column) {
+          return /*#__PURE__*/_react["default"].createElement(_material.ListItemButton, {
             onClick: function onClick() {
-              if (!_this10.state.columnsAuto) {
-                var columns = (0, _toConsumableArray2["default"])(_this10.state.columns || []);
+              if (!_this9.state.columnsAuto) {
+                var columns = (0, _toConsumableArray2["default"])(_this9.state.columns || []);
                 var id = "_".concat(adapter, "_").concat(column.path);
                 var pos = columns.indexOf(id);
                 if (pos === -1) {
@@ -3139,32 +3117,32 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                 } else {
                   columns.splice(pos, 1);
                 }
-                _this10.calculateColumnsVisibility(null, columns);
-                (window._localStorage || window.localStorage).setItem("".concat(_this10.props.dialogName || 'App', ".columns"), JSON.stringify(columns));
-                _this10.setState({
+                _this9.calculateColumnsVisibility(null, columns);
+                (window._localStorage || window.localStorage).setItem("".concat(_this9.props.dialogName || 'App', ".columns"), JSON.stringify(columns));
+                _this9.setState({
                   columns: columns
                 });
               }
             },
             key: "".concat(adapter, "_").concat(column.name)
-          }, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
-            disabled: _this10.state.columnsAuto,
+          }, /*#__PURE__*/_react["default"].createElement(_material.ListItemIcon, null, /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
+            disabled: _this9.state.columnsAuto,
             edge: "start",
-            checked: !_this10.state.columnsAuto && _this10.state.columns && _this10.state.columns.includes("_".concat(adapter, "_").concat(column.path)),
+            checked: !_this9.state.columnsAuto && _this9.state.columns && _this9.state.columns.includes("_".concat(adapter, "_").concat(column.path)),
             disableRipple: true
-          })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_material.ListItemText, {
             primary: "".concat(column.name, " (").concat(adapter, ")")
           }));
         });
-      }), this._renderDefinedList(true))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }), this._renderDefinedList(true))), /*#__PURE__*/_react["default"].createElement(_material.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
         variant: "contained",
         onClick: function onClick() {
-          return _this10.setState({
+          return _this9.setState({
             columnsSelectorShow: false
           });
         },
         color: "primary",
-        startIcon: /*#__PURE__*/_react["default"].createElement(_Close["default"], null)
+        startIcon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)
       }, this.texts.close)));
     }
 
@@ -3174,12 +3152,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getAdditionalColumns",
     value: function getAdditionalColumns() {
-      var _this11 = this;
+      var _this10 = this;
       return this.props.socket.getAdapters().then(function (instances) {
         var columnsForAdmin = null;
         // find all additional columns
         instances.forEach(function (obj) {
-          return columnsForAdmin = _this11.parseObjectForAdmins(columnsForAdmin, obj);
+          return columnsForAdmin = _this10.parseObjectForAdmins(columnsForAdmin, obj);
         });
         return columnsForAdmin;
       })["catch"](function () {
@@ -3244,7 +3222,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @param {any} obj
      */
     function parseObjectForAdmins(columnsForAdmin, obj) {
-      var _this12 = this;
+      var _this11 = this;
       if (obj.common && obj.common.adminColumns && obj.common.name) {
         var columns = obj.common.adminColumns;
         if ((0, _typeof2["default"])(columns) !== 'object') {
@@ -3290,7 +3268,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           }
           return {
             path: item.path,
-            name: item.name[_this12.props.lang] || item.name.en,
+            name: item.name[_this11.props.lang] || item.name.en,
             width: item.width,
             edit: !!item.edit,
             type: item.type,
@@ -3353,16 +3331,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "pauseSubscribe",
     value: function pauseSubscribe(isPause) {
-      var _this13 = this;
+      var _this12 = this;
       if (!this.pausedSubscribes && isPause) {
         this.pausedSubscribes = true;
         this.subscribes.forEach(function (id) {
-          return _this13.props.socket.unsubscribeState(id, _this13.onStateChange);
+          return _this12.props.socket.unsubscribeState(id, _this12.onStateChange);
         });
       } else if (this.pausedSubscribes && !isPause) {
         this.pausedSubscribes = false;
         this.subscribes.forEach(function (id) {
-          return _this13.props.socket.subscribeState(id, _this13.onStateChange);
+          return _this12.props.socket.subscribeState(id, _this12.onStateChange);
         });
       }
     }
@@ -3375,14 +3353,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onFilter",
     value: function onFilter(name, value) {
-      var _this14 = this;
+      var _this13 = this;
       this.filterTimer = null;
       var filter = _objectSpread({}, this.state.filter);
       Object.keys(this.filterRefs).forEach(function (_name) {
-        if (_this14.filterRefs[_name] && _this14.filterRefs[_name].current) {
-          for (var i = 0; i < _this14.filterRefs[_name].current.children.length; i++) {
-            if (_this14.filterRefs[_name].current.children[i].tagName === 'INPUT') {
-              filter[_name] = _this14.filterRefs[_name].current.children[i].value;
+        if (_this13.filterRefs[_name] && _this13.filterRefs[_name].current) {
+          for (var i = 0; i < _this13.filterRefs[_name].current.children.length; i++) {
+            if (_this13.filterRefs[_name].current.children[i].tagName === 'INPUT') {
+              filter[_name] = _this13.filterRefs[_name].current.children[i].value;
               break;
             }
           }
@@ -3399,19 +3377,19 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         this.setState({
           filter: filter
         }, function () {
-          return _this14.props.onFilterChanged && _this14.props.onFilterChanged(filter);
+          return _this13.props.onFilterChanged && _this13.props.onFilterChanged(filter);
         });
       }
     }
   }, {
     key: "clearFilter",
     value: function clearFilter() {
-      var _this15 = this;
+      var _this14 = this;
       var filter = _objectSpread({}, this.state.filter);
       Object.keys(this.filterRefs).forEach(function (name) {
-        if (_this15.filterRefs[name] && _this15.filterRefs[name].current) {
-          for (var i = 0; i < _this15.filterRefs[name].current.childNodes.length; i++) {
-            var item = _this15.filterRefs[name].current.childNodes[i];
+        if (_this14.filterRefs[name] && _this14.filterRefs[name].current) {
+          for (var i = 0; i < _this14.filterRefs[name].current.childNodes.length; i++) {
+            var item = _this14.filterRefs[name].current.childNodes[i];
             if (item.tagName === 'INPUT') {
               filter[name] = '';
               item.value = '';
@@ -3426,16 +3404,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           filter: filter,
           filterKey: this.state.filterKey + 1
         }, function () {
-          return _this15.props.onFilterChanged && _this15.props.onFilterChanged(filter);
+          return _this14.props.onFilterChanged && _this14.props.onFilterChanged(filter);
         });
       }
     }
   }, {
     key: "isFilterEmpty",
     value: function isFilterEmpty() {
-      var _this16 = this;
+      var _this15 = this;
       var someNotEmpty = Object.keys(this.state.filter).find(function (attr) {
-        return attr !== 'expertMode' && _this16.state.filter[attr];
+        return attr !== 'expertMode' && _this15.state.filter[attr];
       });
       return !someNotEmpty;
     }
@@ -3447,15 +3425,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterInput",
     value: function getFilterInput(name) {
-      var _this17 = this,
+      var _this16 = this,
         _this$filterRefs$name;
-      return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.FormControl, {
         className: _Utils["default"].clsx(this.props.classes.headerCellInput, this.props.classes.filterInput),
         key: "".concat(name, "_").concat(this.state.filterKey)
         // style={{ marginTop: 0, marginBottom: 0 }}
         ,
         margin: "dense"
-      }, /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.Input, {
         ref: this.filterRefs[name],
         classes: {
           underline: 'no-underline'
@@ -3464,9 +3442,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         placeholder: this.texts["filter_".concat(name)],
         defaultValue: this.state.filter[name],
         onChange: function onChange() {
-          _this17.filterTimer && clearTimeout(_this17.filterTimer);
-          _this17.filterTimer = setTimeout(function () {
-            return _this17.onFilter();
+          _this16.filterTimer && clearTimeout(_this16.filterTimer);
+          _this16.filterTimer = setTimeout(function () {
+            return _this16.onFilter();
           }, 400);
         },
         autoComplete: "off"
@@ -3475,13 +3453,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           position: 'absolute',
           right: 0
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         size: "small",
         onClick: function onClick() {
-          _this17.filterRefs[name].current.firstChild.value = '';
-          _this17.onFilter(name, '');
+          _this16.filterRefs[name].current.firstChild.value = '';
+          _this16.onFilter(name, '');
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null))) : null);
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null))) : null);
     }
 
     /**
@@ -3492,7 +3470,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterSelect",
     value: function getFilterSelect(name, values) {
-      var _this18 = this,
+      var _this17 = this,
         _this$filterRefs$name2;
       var hasIcons = !!values.find(function (item) {
         return item.icon;
@@ -3501,15 +3479,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         style: {
           position: 'relative'
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.Select, {
         variant: "standard",
         key: "".concat(name, "_").concat(this.state.filterKey),
         ref: this.filterRefs[name],
         className: "".concat(this.props.classes.headerCellInput, " no-underline"),
         onChange: function onChange() {
-          _this18.filterTimer && clearTimeout(_this18.filterTimer);
-          _this18.filterTimer = setTimeout(function () {
-            return _this18.onFilter();
+          _this17.filterTimer && clearTimeout(_this17.filterTimer);
+          _this17.filterTimer = setTimeout(function () {
+            return _this17.onFilter();
           }, 400);
         },
         defaultValue: this.state.filter[name] || '',
@@ -3518,7 +3496,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           id: name
         },
         displayEmpty: true
-      }, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
         key: "empty",
         value: ""
       }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -3535,8 +3513,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           id = item;
           _name = item;
         }
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-          className: _this18.props.classes.headerCellSelectItem,
+        return /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
+          className: _this17.props.classes.headerCellSelectItem,
           key: id,
           value: id
         }, icon || (hasIcons ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -3544,21 +3522,21 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }) : null), _name);
       })), (_this$filterRefs$name2 = this.filterRefs[name]) !== null && _this$filterRefs$name2 !== void 0 && (_this$filterRefs$name2 = _this$filterRefs$name2.current) !== null && _this$filterRefs$name2 !== void 0 && (_this$filterRefs$name2 = _this$filterRefs$name2.childNodes[1]) !== null && _this$filterRefs$name2 !== void 0 && _this$filterRefs$name2.value ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(this.props.classes.selectClearButton)
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         size: "small",
         onClick: function onClick() {
-          var newFilter = _objectSpread({}, _this18.state.filter);
+          var newFilter = _objectSpread({}, _this17.state.filter);
           newFilter[name] = '';
-          _this18.filterRefs[name].current.childNodes[1].value = '';
-          (window._localStorage || window.localStorage).setItem("".concat(_this18.props.dialogName || 'App', ".objectFilter"), JSON.stringify(newFilter));
-          _this18.setState({
+          _this17.filterRefs[name].current.childNodes[1].value = '';
+          (window._localStorage || window.localStorage).setItem("".concat(_this17.props.dialogName || 'App', ".objectFilter"), JSON.stringify(newFilter));
+          _this17.setState({
             filter: newFilter,
-            filterKey: _this18.state.filterKey + 1
+            filterKey: _this17.state.filterKey + 1
           }, function () {
-            return _this18.props.onFilterChanged && _this18.props.onFilterChanged(newFilter);
+            return _this17.props.onFilterChanged && _this17.props.onFilterChanged(newFilter);
           });
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null))) : null);
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null))) : null);
     }
 
     /**
@@ -3576,15 +3554,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterSelectRoom",
     value: function getFilterSelectRoom() {
-      var _this19 = this;
+      var _this18 = this;
       var rooms = this.info.roomEnums.map(function (id) {
-        var _this19$objects$id, _this19$objects$id2;
+        var _this18$objects$id, _this18$objects$id2;
         return {
-          name: getName(((_this19$objects$id = _this19.objects[id]) === null || _this19$objects$id === void 0 || (_this19$objects$id = _this19$objects$id.common) === null || _this19$objects$id === void 0 ? void 0 : _this19$objects$id.name) || id.split('.').pop()),
+          name: getName(((_this18$objects$id = _this18.objects[id]) === null || _this18$objects$id === void 0 || (_this18$objects$id = _this18$objects$id.common) === null || _this18$objects$id === void 0 ? void 0 : _this18$objects$id.name) || id.split('.').pop()),
           value: id,
           icon: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-            src: ((_this19$objects$id2 = _this19.objects[id]) === null || _this19$objects$id2 === void 0 || (_this19$objects$id2 = _this19$objects$id2.common) === null || _this19$objects$id2 === void 0 ? void 0 : _this19$objects$id2.icon) || '',
-            className: _this19.props.classes.selectIcon
+            src: ((_this18$objects$id2 = _this18.objects[id]) === null || _this18$objects$id2 === void 0 || (_this18$objects$id2 = _this18$objects$id2.common) === null || _this18$objects$id2 === void 0 ? void 0 : _this18$objects$id2.icon) || '',
+            className: _this18.props.classes.selectIcon
           })
         };
       });
@@ -3597,15 +3575,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterSelectFunction",
     value: function getFilterSelectFunction() {
-      var _this20 = this;
+      var _this19 = this;
       var func = this.info.funcEnums.map(function (id) {
-        var _this20$objects$id;
+        var _this19$objects$id;
         return {
-          name: getName(_this20.objects[id] && _this20.objects[id].common && _this20.objects[id].common.name || id.split('.').pop()),
+          name: getName(_this19.objects[id] && _this19.objects[id].common && _this19.objects[id].common.name || id.split('.').pop()),
           value: id,
           icon: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-            src: ((_this20$objects$id = _this20.objects[id]) === null || _this20$objects$id === void 0 || (_this20$objects$id = _this20$objects$id.common) === null || _this20$objects$id === void 0 ? void 0 : _this20$objects$id.icon) || '',
-            className: _this20.props.classes.selectIcon
+            src: ((_this19$objects$id = _this19.objects[id]) === null || _this19$objects$id === void 0 || (_this19$objects$id = _this19$objects$id.common) === null || _this19$objects$id === void 0 ? void 0 : _this19$objects$id.icon) || '',
+            className: _this19.props.classes.selectIcon
           })
         };
       });
@@ -3634,15 +3612,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterSelectCustoms",
     value: function getFilterSelectCustoms() {
-      var _this21 = this;
+      var _this20 = this;
       if (this.info.customs.length > 1) {
         var customs = this.info.customs.map(function (id) {
           return {
-            name: id === '_' ? _this21.texts.filterCustomsWithout : id,
+            name: id === '_' ? _this20.texts.filterCustomsWithout : id,
             value: id,
             icon: id === '_' ? null : /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-              src: getSelectIdIcon(_this21.objects, id, _this21.imagePrefix) || '',
-              className: _this21.props.classes.selectIcon
+              src: getSelectIdIcon(_this20.objects, id, _this20.imagePrefix) || '',
+              className: _this20.props.classes.selectIcon
             })
           };
         });
@@ -3659,13 +3637,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onExpandAll",
     value: function onExpandAll(root, expanded) {
-      var _this22 = this;
+      var _this21 = this;
       root = root || this.root;
       expanded = expanded || [];
       root.children && root.children.forEach(function (item) {
         if (item.data.sumVisibility) {
           expanded.push(item.data.id);
-          _this22.onExpandAll(item, expanded);
+          _this21.onExpandAll(item, expanded);
         }
       });
       if (root === this.root) {
@@ -3683,7 +3661,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onCollapseAll",
     value: function onCollapseAll() {
-      var _this23 = this;
+      var _this22 = this;
       (window._localStorage || window.localStorage).setItem("".concat(this.props.dialogName || 'App', ".objectExpanded"), JSON.stringify([]));
       (window._localStorage || window.localStorage).setItem("".concat(this.props.dialogName || 'App', ".objectSelected"), '[]');
       this.setState({
@@ -3691,7 +3669,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         depth: 0,
         selected: []
       }, function () {
-        return _this23.onAfterSelect();
+        return _this22.onAfterSelect();
       });
     }
 
@@ -3704,7 +3682,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "expandDepth",
     value: function expandDepth(root, depth, expanded) {
-      var _this24 = this;
+      var _this23 = this;
       root = root || this.root;
       if (depth > 0) {
         if (root.children) {
@@ -3715,7 +3693,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                 expanded.sort();
               }
               if (depth - 1 > 0) {
-                _this24.expandDepth(item, depth - 1, expanded);
+                _this23.expandDepth(item, depth - 1, expanded);
               }
             }
           });
@@ -3802,17 +3780,17 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "_exportObjects",
     value: function _exportObjects(isAll) {
-      var _this25 = this;
+      var _this24 = this;
       if (isAll) {
         generateFile('allObjects.json', this.objects);
       } else if (this.state.selected.length || this.state.selectedNonObject) {
         var result = {};
         var id = this.state.selected[0] || this.state.selectedNonObject;
         this._getSelectedIdsForExport().forEach(function (key) {
-          result[key] = JSON.parse(JSON.stringify(_this25.objects[key]));
+          result[key] = JSON.parse(JSON.stringify(_this24.objects[key]));
           // add enum information
           if (result[key].common) {
-            var enums = _this25.getEnumsForId(key);
+            var enums = _this24.getEnumsForId(key);
             if (enums) {
               result[key].common.enums = enums;
             }
@@ -3826,42 +3804,42 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderExportDialog",
     value: function renderExportDialog() {
-      var _this26 = this;
+      var _this25 = this;
       if (this.state.showExportDialog === false) {
         return null;
       }
-      return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
         open: !0
-      }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], null, this.props.t('Select type of export')), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], null, this.props.t('You can export all objects or just the selected branch.'), /*#__PURE__*/_react["default"].createElement("br", null), this.props.t('Selected %s object(s)', this.state.showExportDialog))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, null, this.props.t('Select type of export')), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_material.DialogContentText, null, this.props.t('You can export all objects or just the selected branch.'), /*#__PURE__*/_react["default"].createElement("br", null), this.props.t('Selected %s object(s)', this.state.showExportDialog))), /*#__PURE__*/_react["default"].createElement(_material.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
         color: "grey",
         variant: "outlined",
         onClick: function onClick() {
-          return _this26.setState({
+          return _this25.setState({
             showExportDialog: false
           }, function () {
-            return _this26._exportObjects(true);
+            return _this25._exportObjects(true);
           });
         }
-      }, this.props.t('ra_All objects'), " (", Object.keys(this.objects).length, ")"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }, this.props.t('ra_All objects'), ' ', "(", Object.keys(this.objects).length, ")"), /*#__PURE__*/_react["default"].createElement(_material.Button, {
         color: "primary",
         variant: "contained",
         autoFocus: true,
         onClick: function onClick() {
-          return _this26.setState({
+          return _this25.setState({
             showExportDialog: false
           }, function () {
-            return _this26._exportObjects(false);
+            return _this25._exportObjects(false);
           });
         }
-      }, this.props.t('ra_Only selected'), " (", this.state.showExportDialog, ")"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }, this.props.t('ra_Only selected'), ' ', "(", this.state.showExportDialog, ")"), /*#__PURE__*/_react["default"].createElement(_material.Button, {
         color: "grey",
         variant: "contained",
         onClick: function onClick() {
-          return _this26.setState({
+          return _this25.setState({
             showExportDialog: false
           });
         },
-        startIcon: /*#__PURE__*/_react["default"].createElement(_Close["default"], null)
+        startIcon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)
       }, this.props.t('ra_Cancel'))));
     }
   }, {
@@ -3872,7 +3850,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element}
      */
     function getToolbar() {
-      var _this27 = this;
+      var _this26 = this;
       var allowObjectCreation = false;
       if (this.state.selected.length || this.state.selectedNonObject) {
         var id = this.state.selected[0] || this.state.selectedNonObject;
@@ -3896,165 +3874,165 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           width: '100%',
           alignItems: 'center'
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Refresh tree'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         onClick: function onClick() {
-          return _this27.refreshComponent();
+          return _this26.refreshComponent();
         },
         disabled: this.state.updating,
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Refresh["default"], null)))), this.props.showExpertButton && !this.props.expertMode && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Refresh, null)))), this.props.showExpertButton && !this.props.expertMode && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_expertMode'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         key: "expertMode",
         color: this.state.filter.expertMode ? 'secondary' : 'default',
         onClick: function onClick() {
-          return _this27.onFilter('expertMode', !_this27.state.filter.expertMode);
+          return _this26.onFilter('expertMode', !_this26.state.filter.expertMode);
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_IconExpert["default"], null))), !this.props.disableColumnSelector && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_IconExpert["default"], null))), !this.props.disableColumnSelector && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Configure'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         key: "columnSelector",
         color: this.state.columnsAuto ? 'primary' : 'default',
         onClick: function onClick() {
-          return _this27.setState({
+          return _this26.setState({
             columnsSelectorShow: true
           });
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_ViewColumn["default"], null))), this.state.expandAllVisible && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.ViewColumn, null))), this.state.expandAllVisible && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Expand all nodes'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         key: "expandAll",
         onClick: function onClick() {
-          return _this27.onExpandAll();
+          return _this26.onExpandAll();
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_IconOpen["default"], null))), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_IconOpen["default"], null))), /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Collapse all nodes'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         key: "collapseAll",
         onClick: function onClick() {
-          return _this27.onCollapseAll();
+          return _this26.onCollapseAll();
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], null))), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], null))), /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Expand one step node'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         key: "expandVisible",
         color: "primary",
         onClick: function onClick() {
-          return _this27.onExpandVisible();
+          return _this26.onExpandVisible();
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(StyledBadge, {
         badgeContent: this.state.depth,
         color: "secondary"
-      }, /*#__PURE__*/_react["default"].createElement(_IconOpen["default"], null)))), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_IconOpen["default"], null)))), /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Collapse one step node'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         key: "collapseVisible",
         color: "primary",
         onClick: function onClick() {
-          return _this27.onCollapseVisible();
+          return _this26.onCollapseVisible();
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(StyledBadge, {
         badgeContent: this.state.depth,
         color: "secondary"
-      }, /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], null)))), this.props.objectStatesView && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], null)))), this.props.objectStatesView && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Toggle the states view'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         onClick: function onClick() {
-          return _this27.onStatesViewVisible();
+          return _this26.onStatesViewVisible();
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_LooksOne["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.LooksOne, {
         color: this.state.statesView ? 'primary' : 'inherit'
-      }))), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }))), /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Show/Hide object descriptions'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         onClick: function onClick() {
-          (window._localStorage || window.localStorage).setItem("".concat(_this27.props.dialogName || 'App', ".desc"), _this27.state.showDescription ? 'false' : 'true');
-          _this27.setState({
-            showDescription: !_this27.state.showDescription
+          (window._localStorage || window.localStorage).setItem("".concat(_this26.props.dialogName || 'App', ".desc"), _this26.state.showDescription ? 'false' : 'true');
+          _this26.setState({
+            showDescription: !_this26.state.showDescription
           });
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_TextFields["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.TextFields, {
         color: this.state.showDescription ? 'primary' : 'inherit'
-      }))), this.props.objectAddBoolean ? /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }))), this.props.objectAddBoolean ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.toolTipObjectCreating(),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         disabled: !allowObjectCreation,
         onClick: function onClick() {
-          return _this27.setState({
+          return _this26.setState({
             modalNewObj: true
           });
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Add["default"], null)))) : null, this.props.objectImportExport && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Add, null)))) : null, this.props.objectImportExport && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Add objects tree from JSON file'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         onClick: function onClick() {
           var input = document.createElement('input');
           input.setAttribute('type', 'file');
           input.setAttribute('id', 'files');
           input.setAttribute('opacity', 0);
           input.addEventListener('change', function (e) {
-            return _this27.handleJsonUpload(e);
+            return _this26.handleJsonUpload(e);
           }, false);
           input.click();
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Publish["default"], null))), this.props.objectImportExport && (!!this.state.selected.length || this.state.selectedNonObject) && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Publish, null))), this.props.objectImportExport && (!!this.state.selected.length || this.state.selectedNonObject) && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Save objects tree as JSON file'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         onClick: function onClick() {
-          return _this27.setState({
-            showExportDialog: _this27._getSelectedIdsForExport().length
+          return _this26.setState({
+            showExportDialog: _this26._getSelectedIdsForExport().length
           });
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Publish["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Publish, {
         style: {
           transform: 'rotate(180deg)'
         }
@@ -4064,33 +4042,33 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           whiteSpace: 'nowrap'
         }
       }, "".concat(this.props.t('ra_Objects'), ": ").concat(Object.keys(this.info.objects).length, ", ").concat(this.props.t('ra_States'), ": ").concat(Object.keys(this.info.objects).filter(function (el) {
-        return _this27.info.objects[el].type === 'state';
-      }).length)), this.props.objectEditBoolean && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        return _this26.info.objects[el].type === 'state';
+      }).length)), this.props.objectEditBoolean && /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: this.props.t('ra_Edit custom config'),
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         onClick: function onClick() {
           // get all visible states
-          var ids = getVisibleItems(_this27.root, 'state', _this27.objects);
+          var ids = getVisibleItems(_this26.root, 'state', _this26.objects);
           if (ids.length) {
-            _this27.pauseSubscribe(true);
+            _this26.pauseSubscribe(true);
             if (ids.length === 1) {
-              (window._localStorage || window.localStorage).setItem("".concat(_this27.props.dialogName || 'App', ".objectSelected"), _this27.state.selected[0]);
-              _this27.props.router && _this27.props.router.doNavigate(null, 'custom', _this27.state.selected[0]);
+              (window._localStorage || window.localStorage).setItem("".concat(_this26.props.dialogName || 'App', ".objectSelected"), _this26.state.selected[0]);
+              _this26.props.router && _this26.props.router.doNavigate(null, 'custom', _this26.state.selected[0]);
             }
-            _this27.setState({
+            _this26.setState({
               customDialog: ids
             });
           } else {
-            _this27.setState({
-              toast: _this27.props.t('ra_please select object')
+            _this26.setState({
+              toast: _this26.props.t('ra_please select object')
             });
           }
         },
         size: "large"
-      }, /*#__PURE__*/_react["default"].createElement(_Build["default"], null))));
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Build, null))));
     }
 
     /**
@@ -4144,30 +4122,30 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @param {{ cellButtonsButton: string | undefined; cellButtonsButtonAlone: any; cellButtonsButtonIcon: string | undefined; cellButtonsButtonWithCustoms: any; }} classes
      */
     function renderColumnButtons(id, item, classes) {
-      var _this28 = this,
+      var _this27 = this,
         _item$children2,
         _item$data$obj$common,
         _item$data$obj$common3;
       if (!item.data.obj) {
         return this.props.onObjectDelete || this.props.objectEditOfAccessControl ? /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.buttonDiv
-        }, this.state.filter.expertMode && this.props.objectEditOfAccessControl ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        }, this.state.filter.expertMode && this.props.objectEditOfAccessControl ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           className: _Utils["default"].clsx(classes.cellButtonsButton, classes.cellButtonsEmptyButton, classes.cellButtonMinWidth),
           onClick: function onClick() {
-            return _this28.setState({
+            return _this27.setState({
               modalEditOfAccess: true,
               modalEditOfAccessObjData: item.data
             });
           },
           size: "large"
-        }, "---") : null, this.props.onObjectDelete && item.children && item.children.length ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        }, "---") : null, this.props.onObjectDelete && item.children && item.children.length ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           className: _Utils["default"].clsx(classes.cellButtonsButton, classes.cellButtonsButtonAlone),
           size: "small",
           "aria-label": "delete",
           title: this.texts.deleteObject,
           onClick: function onClick() {
             // calculate number of children
-            var keys = Object.keys(_this28.objects);
+            var keys = Object.keys(_this27.objects);
             keys.sort();
             var count = 0;
             var start = "".concat(id, ".");
@@ -4178,25 +4156,25 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                 break;
               }
             }
-            _this28.props.onObjectDelete(id, !!(item.children && item.children.length), false, count + 1);
+            _this27.props.onObjectDelete(id, !!(item.children && item.children.length), false, count + 1);
           }
-        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, {
           className: classes.cellButtonsButtonIcon
         })) : null) : null;
       }
       item.data.aclTooltip = item.data.aclTooltip || this.renderTooltipAccessControl(item.data.obj.acl);
       var acl = item.data.obj.acl ? item.data.obj.type === 'state' ? item.data.obj.acl.state : item.data.obj.acl.object : 0;
       var aclSystemConfig = item.data.obj.acl && (item.data.obj.type === 'state' ? this.systemConfig.common.defaultNewAcl.state : this.systemConfig.common.defaultNewAcl.object);
-      return [this.state.filter.expertMode && this.props.objectEditOfAccessControl ? /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      return [this.state.filter.expertMode && this.props.objectEditOfAccessControl ? /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         key: "acl",
         title: item.data.aclTooltip,
         classes: {
           popper: this.props.classes.tooltip
         }
-      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         className: classes.cellButtonMinWidth,
         onClick: function onClick() {
-          return _this28.setState({
+          return _this27.setState({
             modalEditOfAccess: true,
             modalEditOfAccessObjData: item.data
           });
@@ -4207,28 +4185,28 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, Number.isNaN(Number(acl)) ? Number(aclSystemConfig).toString(16) : Number(acl).toString(16)))) : /*#__PURE__*/_react["default"].createElement("div", {
         key: "aclEmpty",
         className: classes.cellButtonMinWidth
-      }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         key: "edit",
         className: classes.cellButtonsButton,
         size: "small",
         "aria-label": "edit",
         title: this.texts.editObject,
         onClick: function onClick() {
-          (window._localStorage || window.localStorage).setItem("".concat(_this28.props.dialogName || 'App', ".objectSelected"), id);
-          _this28.setState({
+          (window._localStorage || window.localStorage).setItem("".concat(_this27.props.dialogName || 'App', ".objectSelected"), id);
+          _this27.setState({
             editObjectDialog: id
           });
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Edit["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Edit, {
         className: classes.cellButtonsButtonIcon
-      })), this.props.onObjectDelete && ((_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length || !((_item$data$obj$common = item.data.obj.common) !== null && _item$data$obj$common !== void 0 && _item$data$obj$common.dontDelete)) ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      })), this.props.onObjectDelete && ((_item$children2 = item.children) !== null && _item$children2 !== void 0 && _item$children2.length || !((_item$data$obj$common = item.data.obj.common) !== null && _item$data$obj$common !== void 0 && _item$data$obj$common.dontDelete)) ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         key: "delete",
         className: classes.cellButtonsButton,
         size: "small",
         "aria-label": "delete",
         onClick: function onClick() {
           var _item$children3, _item$data$obj$common2;
-          var keys = Object.keys(_this28.objects);
+          var keys = Object.keys(_this27.objects);
           keys.sort();
           var count = 0;
           var start = "".concat(id, ".");
@@ -4239,26 +4217,26 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
               break;
             }
           }
-          _this28.props.onObjectDelete(id, !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length), !((_item$data$obj$common2 = item.data.obj.common) !== null && _item$data$obj$common2 !== void 0 && _item$data$obj$common2.dontDelete), count);
+          _this27.props.onObjectDelete(id, !!((_item$children3 = item.children) !== null && _item$children3 !== void 0 && _item$children3.length), !((_item$data$obj$common2 = item.data.obj.common) !== null && _item$data$obj$common2 !== void 0 && _item$data$obj$common2.dontDelete), count);
         },
         title: this.texts.deleteObject
-      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Delete, {
         className: classes.cellButtonsButtonIcon
-      })) : null, this.props.objectCustomDialog && this.info.hasSomeCustoms && item.data.obj.type === 'state' && ((_item$data$obj$common3 = item.data.obj.common) === null || _item$data$obj$common3 === void 0 ? void 0 : _item$data$obj$common3.type) !== 'file' ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      })) : null, this.props.objectCustomDialog && this.info.hasSomeCustoms && item.data.obj.type === 'state' && ((_item$data$obj$common3 = item.data.obj.common) === null || _item$data$obj$common3 === void 0 ? void 0 : _item$data$obj$common3.type) !== 'file' ? /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
         className: _Utils["default"].clsx(classes.cellButtonsButton, item.data.hasCustoms ? classes.cellButtonsButtonWithCustoms : classes.cellButtonsButtonWithoutCustoms),
         key: "custom",
         size: "small",
         "aria-label": "config",
         title: this.texts.customConfig,
         onClick: function onClick() {
-          (window._localStorage || window.localStorage).setItem("".concat(_this28.props.dialogName || 'App', ".objectSelected"), id);
-          _this28.pauseSubscribe(true);
-          _this28.props.router && _this28.props.router.doNavigate(null, 'customs', id);
-          _this28.setState({
+          (window._localStorage || window.localStorage).setItem("".concat(_this27.props.dialogName || 'App', ".objectSelected"), id);
+          _this27.pauseSubscribe(true);
+          _this27.props.router && _this27.props.router.doNavigate(null, 'customs', id);
+          _this27.setState({
             customDialog: [id]
           });
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Settings["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Settings, {
         className: classes.cellButtonsButtonIcon
       })) : null];
     }
@@ -4328,7 +4306,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     key: "renderColumnValue",
     value: function renderColumnValue(id, item, classes) {
       var _obj$common4,
-        _this29 = this;
+        _this28 = this;
       var obj = item.data.obj;
       if (!obj || !this.states) {
         return null;
@@ -4352,10 +4330,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       var state = this.states[id];
       var info = item.data.state;
       if (!info) {
-        item.data.state = item.data.state || formatValue(id, state, obj, this.texts, this.props.dateFormat, this.props.isFloatComma);
+        item.data.state = formatValue({
+          state: state,
+          obj: obj,
+          texts: this.texts,
+          dateFormat: this.props.dateFormat,
+          isFloatComma: this.props.isFloatComma
+        });
         info = item.data.state;
         info.valFull = info.valFull.map(function (_item) {
-          if (_item.t === _this29.texts.quality && state.q) {
+          if (_item.t === _this28.texts.quality && state.q) {
             return [/*#__PURE__*/_react["default"].createElement("div", {
               className: classes.cellValueTooltipBoth,
               key: _item.t
@@ -4402,7 +4386,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }, "(", info.valText.s, ")") : null, /*#__PURE__*/_react["default"].createElement(_IconCopy["default"], {
           className: _Utils["default"].clsx(classes.cellButtonsValueButton, 'copyButton', classes.cellButtonsValueButtonCopy),
           onClick: function onClick(e) {
-            return _this29.onCopy(e, copyText);
+            return _this28.onCopy(e, copyText);
           },
           key: "cc"
         })
@@ -4410,13 +4394,18 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         ];
       }
 
+      info.style = getValueStyle({
+        state: state,
+        isExpertMode: this.state.filter.expertMode,
+        isButton: item.data.button
+      });
       var val = info.valText;
       if (!this.state.filter.expertMode && item.data.button) {
-        val = /*#__PURE__*/_react["default"].createElement(_RoomService["default"], {
-          className: _Utils["default"].clsx(this.props.classes.cellValueButton, !this.states[id] || !this.states[id].val ? this.props.classes.cellValueButtonFalse : '')
+        val = /*#__PURE__*/_react["default"].createElement(_iconsMaterial.RoomService, {
+          className: this.props.classes.cellValueButton
         });
       }
-      return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         key: "value",
         title: info.valFull,
         classes: {
@@ -4424,7 +4413,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           popper: this.props.classes.cellValueTooltipBox
         },
         onOpen: function onOpen() {
-          return _this29.readHistory(id);
+          return _this28.readHistory(id);
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: info.style,
@@ -4440,7 +4429,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     key: "_syncEnum",
     value: function _syncEnum(id, enumIds, newArray, cb) {
       var _this$info$objects$en,
-        _this30 = this;
+        _this29 = this;
       if (!enumIds || !enumIds.length) {
         cb && cb();
         return;
@@ -4456,9 +4445,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             var obj = JSON.parse(JSON.stringify(this.info.objects[enumId]));
             obj.common.members.splice(pos, 1);
             promises.push(this.props.socket.setObject(enumId, obj).then(function () {
-              return _this30.info.objects[enumId] = obj;
+              return _this29.info.objects[enumId] = obj;
             })["catch"](function (e) {
-              return _this30.showError(e);
+              return _this29.showError(e);
             }));
           }
         }
@@ -4471,15 +4460,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           _obj.common.members.push(id);
           _obj.common.members.sort();
           promises.push(this.props.socket.setObject(enumId, _obj).then(function () {
-            return _this30.info.objects[enumId] = _obj;
+            return _this29.info.objects[enumId] = _obj;
           })["catch"](function (e) {
-            return _this30.showError(e);
+            return _this29.showError(e);
           }));
         }
       }
       Promise.all(promises).then(function () {
         return setTimeout(function () {
-          return _this30._syncEnum(id, enumIds, newArray, cb);
+          return _this29._syncEnum(id, enumIds, newArray, cb);
         }, 0);
       });
     }
@@ -4491,11 +4480,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "syncEnum",
     value: function syncEnum(id, enumName, newArray) {
-      var _this31 = this;
+      var _this30 = this;
       var toCheck = (0, _toConsumableArray2["default"])(this.info[enumName === 'func' ? 'funcEnums' : 'roomEnums']);
       return new Promise(function (resolve) {
-        _this31._syncEnum(id, toCheck, newArray, function (error) {
-          error && _this31.showError(error);
+        _this30._syncEnum(id, toCheck, newArray, function (error) {
+          error && _this30.showError(error);
           // force update of object
           resolve();
         });
@@ -4509,7 +4498,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderEnumDialog",
     value: function renderEnumDialog() {
-      var _this32 = this;
+      var _this31 = this;
       if (this.state.enumDialog) {
         var type = this.state.enumDialog.type;
         var item = this.state.enumDialog.item;
@@ -4517,9 +4506,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         var enumsOriginal = this.state.enumDialog.enumsOriginal;
         var enums = (type === 'room' ? this.info.roomEnums : this.info.funcEnums).map(function (id) {
           return {
-            name: getName(_this32.objects[id] && _this32.objects[id].common && _this32.objects[id].common.name || id.split('.').pop(), _this32.props.lang),
+            name: getName(_this31.objects[id] && _this31.objects[id].common && _this31.objects[id].common.name || id.split('.').pop(), _this31.props.lang),
             value: id,
-            icon: getSelectIdIcon(_this32.objects, id, _this32.imagePrefix)
+            icon: getSelectIdIcon(_this31.objects, id, _this31.imagePrefix)
           };
         }).sort(function (a, b) {
           return a.name > b.name ? 1 : -1;
@@ -4527,10 +4516,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         enums.forEach(function (_item) {
           if (_item.icon && typeof _item.icon === 'string') {
             _item.icon = /*#__PURE__*/_react["default"].createElement("div", {
-              className: _this32.props.classes.enumIconDiv
+              className: _this31.props.classes.enumIconDiv
             }, /*#__PURE__*/_react["default"].createElement("img", {
               src: _item.icon,
-              className: _this32.props.classes.enumIcon,
+              className: _this31.props.classes.enumIcon,
               alt: _item.name
             }));
           }
@@ -4538,31 +4527,31 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
         // const hasIcons = !!enums.find(item => item.icon);
 
-        return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
           className: this.props.classes.enumDialog,
           onClose: function onClose() {
-            return _this32.setState({
+            return _this31.setState({
               enumDialog: null
             });
           },
           "aria-labelledby": "enum-dialog-title",
           open: !0 // true
-        }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, {
           id: "enum-dialog-title"
-        }, type === 'func' ? this.props.t('ra_Define functions') : this.props.t('ra_Define rooms'), /*#__PURE__*/_react["default"].createElement(_Fab["default"], {
+        }, type === 'func' ? this.props.t('ra_Define functions') : this.props.t('ra_Define rooms'), /*#__PURE__*/_react["default"].createElement(_material.Fab, {
           className: this.props.classes.enumButton,
           color: "primary",
           disabled: JSON.stringify(enumsOriginal) === JSON.stringify(itemEnums),
           size: "small",
           onClick: function onClick() {
-            return _this32.syncEnum(item.data.id, type, itemEnums).then(function () {
-              return _this32.setState({
+            return _this31.syncEnum(item.data.id, type, itemEnums).then(function () {
+              return _this31.setState({
                 enumDialog: null,
                 enumDialogEnums: null
               });
             });
           }
-        }, /*#__PURE__*/_react["default"].createElement(_Check["default"], null))), /*#__PURE__*/_react["default"].createElement(_List["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Check, null))), /*#__PURE__*/_react["default"].createElement(_material.List, {
           classes: {
             root: this.props.classes.enumList
           }
@@ -4579,27 +4568,27 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             name = _item;
           }
           var labelId = "checkbox-list-label-".concat(id);
-          return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-            className: _this32.props.classes.headerCellSelectItem,
+          return /*#__PURE__*/_react["default"].createElement(_material.ListItem, {
+            className: _this31.props.classes.headerCellSelectItem,
             key: id,
             onClick: function onClick() {
               var pos = itemEnums.indexOf(id);
-              var enumDialogEnums = JSON.parse(JSON.stringify(_this32.state.enumDialogEnums));
+              var enumDialogEnums = JSON.parse(JSON.stringify(_this31.state.enumDialogEnums));
               if (pos === -1) {
                 enumDialogEnums.push(id);
                 enumDialogEnums.sort();
               } else {
                 enumDialogEnums.splice(pos, 1);
               }
-              _this32.setState({
+              _this31.setState({
                 enumDialogEnums: enumDialogEnums
               });
             }
-          }, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], {
+          }, /*#__PURE__*/_react["default"].createElement(_material.ListItemIcon, {
             classes: {
-              root: _this32.props.classes.enumCheckbox
+              root: _this31.props.classes.enumCheckbox
             }
-          }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+          }, /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
             edge: "start",
             checked: itemEnums.includes(id),
             tabIndex: -1,
@@ -4607,9 +4596,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             inputProps: {
               'aria-labelledby': labelId
             }
-          })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_material.ListItemText, {
             id: labelId
-          }, name), icon ? /*#__PURE__*/_react["default"].createElement(_ListItemSecondaryAction["default"], null, icon) : null);
+          }, name), icon ? /*#__PURE__*/_react["default"].createElement(_material.ListItemSecondaryAction, null, icon) : null);
         })));
       }
       return null;
@@ -4622,7 +4611,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderEditRoleDialog",
     value: function renderEditRoleDialog() {
-      var _this33 = this;
+      var _this32 = this;
       if (this.state.roleDialog && this.props.objectBrowserEditRole) {
         var ObjectBrowserEditRole = this.props.objectBrowserEditRole;
         return /*#__PURE__*/_react["default"].createElement(ObjectBrowserEditRole, {
@@ -4633,9 +4622,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           roles: this.info.roles,
           onClose: function onClose(obj) {
             if (obj) {
-              _this33.info.objects[_this33.state.roleDialog] = obj;
+              _this32.info.objects[_this32.state.roleDialog] = obj;
             }
-            _this33.setState({
+            _this32.setState({
               roleDialog: false
             });
           }
@@ -4651,7 +4640,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onColumnsEditCustomDialogClose",
     value: function onColumnsEditCustomDialogClose(isSave) {
-      var _this34 = this;
+      var _this33 = this;
       if (isSave) {
         var value = this.customColumnDialog.value;
         if (this.customColumnDialog.type === 'boolean') {
@@ -4661,16 +4650,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
         this.customColumnDialog = null;
         this.props.socket.getObject(this.state.columnsEditCustomDialog.obj._id).then(function (obj) {
-          if (ObjectBrowser.setCustomValue(obj, _this34.state.columnsEditCustomDialog.it, value)) {
-            return _this34.props.socket.setObject(obj._id, obj);
+          if (ObjectBrowser.setCustomValue(obj, _this33.state.columnsEditCustomDialog.it, value)) {
+            return _this33.props.socket.setObject(obj._id, obj);
           }
-          throw new Error(_this34.props.t('ra_Cannot update attribute, because not found in the object'));
+          throw new Error(_this33.props.t('ra_Cannot update attribute, because not found in the object'));
         }).then(function () {
-          return _this34.setState({
+          return _this33.setState({
             columnsEditCustomDialog: null
           });
         })["catch"](function (e) {
-          return _this34.showError(e);
+          return _this33.showError(e);
         });
       } else {
         this.customColumnDialog = null;
@@ -4686,7 +4675,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColumnsEditCustomDialog",
     value: function renderColumnsEditCustomDialog() {
-      var _this35 = this;
+      var _this34 = this;
       if (this.state.columnsEditCustomDialog) {
         if (!this.customColumnDialog) {
           var value = ObjectBrowser.getCustomValue(this.state.columnsEditCustomDialog.obj, this.state.columnsEditCustomDialog.it);
@@ -4696,69 +4685,69 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             value: (value === null || value === undefined ? '' : value).toString()
           };
         }
-        return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_material.Dialog, {
           onClose: function onClose() {
-            return _this35.setState({
+            return _this34.setState({
               columnsEditCustomDialog: null
             });
           },
           maxWidth: "md",
           "aria-labelledby": "custom-dialog-title",
           open: !0
-        }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_material.DialogTitle, {
           id: "custom-dialog-title"
-        }, "".concat(this.props.t('ra_Edit object field'), ": ").concat(this.state.columnsEditCustomDialog.obj._id)), /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], {
+        }, "".concat(this.props.t('ra_Edit object field'), ": ").concat(this.state.columnsEditCustomDialog.obj._id)), /*#__PURE__*/_react["default"].createElement(_material.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_material.DialogContentText, {
           id: "alert-dialog-description"
-        }, this.customColumnDialog.type === 'boolean' ? /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
-          control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+        }, this.customColumnDialog.type === 'boolean' ? /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
+          control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
             onKeyUp: function onKeyUp(e) {
-              return e.keyCode === 13 && _this35.onColumnsEditCustomDialogClose(true);
+              return e.keyCode === 13 && _this34.onColumnsEditCustomDialogClose(true);
             },
             defaultChecked: this.customColumnDialog.value === 'true',
             onChange: function onChange(e) {
-              _this35.customColumnDialog.value = e.target.checked.toString();
-              var changed = _this35.customColumnDialog.value !== _this35.customColumnDialog.initValue;
-              if (changed === !_this35.state.customColumnDialogValueChanged) {
-                _this35.setState({
+              _this34.customColumnDialog.value = e.target.checked.toString();
+              var changed = _this34.customColumnDialog.value !== _this34.customColumnDialog.initValue;
+              if (changed === !_this34.state.customColumnDialogValueChanged) {
+                _this34.setState({
                   customColumnDialogValueChanged: changed
                 });
               }
             }
           }),
           label: "".concat(this.state.columnsEditCustomDialog.it.name, " (").concat(this.state.columnsEditCustomDialog.it.pathText, ")")
-        }) : /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        }) : /*#__PURE__*/_react["default"].createElement(_material.TextField, {
           variant: "standard",
           defaultValue: this.customColumnDialog.value,
           fullWidth: true,
           onKeyUp: function onKeyUp(e) {
-            return e.keyCode === 13 && _this35.onColumnsEditCustomDialogClose(true);
+            return e.keyCode === 13 && _this34.onColumnsEditCustomDialogClose(true);
           },
           label: "".concat(this.state.columnsEditCustomDialog.it.name, " (").concat(this.state.columnsEditCustomDialog.it.pathText, ")"),
           onChange: function onChange(e) {
-            _this35.customColumnDialog.value = e.target.value;
-            var changed = _this35.customColumnDialog.value !== _this35.customColumnDialog.initValue;
-            if (changed === !_this35.state.customColumnDialogValueChanged) {
-              _this35.setState({
+            _this34.customColumnDialog.value = e.target.value;
+            var changed = _this34.customColumnDialog.value !== _this34.customColumnDialog.initValue;
+            if (changed === !_this34.state.customColumnDialogValueChanged) {
+              _this34.setState({
                 customColumnDialogValueChanged: changed
               });
             }
           },
           autoFocus: true
-        }))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        }))), /*#__PURE__*/_react["default"].createElement(_material.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
           variant: "contained",
           onClick: function onClick() {
-            return _this35.onColumnsEditCustomDialogClose(true);
+            return _this34.onColumnsEditCustomDialogClose(true);
           },
           disabled: !this.state.customColumnDialogValueChanged,
           color: "primary",
-          startIcon: /*#__PURE__*/_react["default"].createElement(_Check["default"], null)
-        }, this.props.t('ra_Update')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+          startIcon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Check, null)
+        }, this.props.t('ra_Update')), /*#__PURE__*/_react["default"].createElement(_material.Button, {
           color: "grey",
           variant: "contained",
           onClick: function onClick() {
-            return _this35.onColumnsEditCustomDialogClose();
+            return _this34.onColumnsEditCustomDialogClose();
           },
-          startIcon: /*#__PURE__*/_react["default"].createElement(_Close["default"], null)
+          startIcon: /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, null)
         }, this.props.t('ra_Cancel'))));
       }
       return null;
@@ -4780,14 +4769,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element | null}
      */
     function renderCustomValue(obj, it, item) {
-      var _this36 = this;
+      var _this35 = this;
       var text = ObjectBrowser.getCustomValue(obj, it);
       if (text !== null && text !== undefined) {
         if (it.edit && !this.props.notEditable && (!it.objTypes || it.objTypes.includes(obj.type))) {
           return /*#__PURE__*/_react["default"].createElement("div", {
             className: _Utils["default"].clsx(this.props.classes.columnCustom, this.props.classes.columnCustomEditable, this.props.classes["columnCustom_".concat(it.align)]),
             onClick: function onClick() {
-              return _this36.setState({
+              return _this35.setState({
                 columnsEditCustomDialog: {
                   item: item,
                   it: it,
@@ -4816,7 +4805,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderLeaf",
     value: function renderLeaf(item, isExpanded, classes, counter) {
-      var _this37 = this,
+      var _this36 = this,
         _common$alias,
         _common$alias2,
         _this$states$id2,
@@ -4837,12 +4826,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         iconFolder = isExpanded ? /*#__PURE__*/_react["default"].createElement(_IconOpen["default"], {
           className: classes.cellIdIconFolder,
           onClick: function onClick() {
-            return _this37.toggleExpanded(id);
+            return _this36.toggleExpanded(id);
           }
         }) : /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], {
           className: classes.cellIdIconFolder,
           onClick: function onClick() {
-            return _this37.toggleExpanded(id);
+            return _this36.toggleExpanded(id);
           }
         });
       } else if (obj.common && obj.common.write === false && obj.type === 'state') {
@@ -4890,7 +4879,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         item.data.pef = pef;
         item.data.lang = this.props.lang;
       }
-      var checkbox = this.props.multiSelect && this.objects[id] && (!this.props.types || this.props.types.includes(this.objects[id].type)) ? /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      var checkbox = this.props.multiSelect && this.objects[id] && (!this.props.types || this.props.types.includes(this.objects[id].type)) ? /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
         className: classes.checkBox,
         checked: this.state.selected.includes(id)
       }) : null;
@@ -4929,10 +4918,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick(e) {
           e.stopPropagation();
           e.preventDefault();
-          _this37.onSelect(common.alias.id.read);
+          _this36.onSelect(common.alias.id.read);
           setTimeout(function () {
-            _this37.expandAllSelected(function () {
-              return _this37.scrollToItem(common.alias.id.read);
+            return _this36.expandAllSelected(function () {
+              return _this36.scrollToItem(common.alias.id.read);
             });
           }, 100);
         },
@@ -4941,10 +4930,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick(e) {
           e.stopPropagation();
           e.preventDefault();
-          _this37.onSelect(common.alias.id.write);
+          _this36.onSelect(common.alias.id.write);
           setTimeout(function () {
-            _this37.expandAllSelected(function () {
-              return _this37.scrollToItem(common.alias.id.write);
+            return _this36.expandAllSelected(function () {
+              return _this36.scrollToItem(common.alias.id.write);
             });
           }, 100);
         },
@@ -4953,17 +4942,17 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick(e) {
           e.stopPropagation();
           e.preventDefault();
-          _this37.onSelect(common.alias.id);
+          _this36.onSelect(common.alias.id);
           setTimeout(function () {
-            _this37.expandAllSelected(function () {
-              return _this37.scrollToItem(common.alias.id);
+            return _this36.expandAllSelected(function () {
+              return _this36.scrollToItem(common.alias.id);
             });
           }, 100);
         },
         className: _Utils["default"].clsx(classes.cellIdAlias, classes.cellIdAliasAlone)
       }, "\u2192", common.alias.id) : null;
       var checkColor = common === null || common === void 0 ? void 0 : common.color;
-      var invertBackground = undefined;
+      var invertBackground;
       if (checkColor && !this.state.selected.includes(id)) {
         var background = this.props.themeName === 'dark' ? '#1f1f1f' : this.props.themeName === 'blue' ? '#222a2e' : '#FFFFFF';
         var distance = _Utils["default"].colorDistance(checkColor, background);
@@ -4988,17 +4977,17 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             _id = "".concat(id, ".").concat(_id);
           }
           ids[name] = _id;
-          if (!_this37.states[_id]) {
-            var _this37$objects$_id;
-            if (((_this37$objects$_id = _this37.objects[_id]) === null || _this37$objects$_id === void 0 ? void 0 : _this37$objects$_id.type) === 'state') {
-              !_this37.recordStates.includes(_id) && _this37.recordStates.push(_id);
-              _this37.states[_id] = {
+          if (!_this36.states[_id]) {
+            var _this36$objects$_id;
+            if (((_this36$objects$_id = _this36.objects[_id]) === null || _this36$objects$_id === void 0 ? void 0 : _this36$objects$_id.type) === 'state') {
+              !_this36.recordStates.includes(_id) && _this36.recordStates.push(_id);
+              _this36.states[_id] = {
                 val: null
               };
-              _this37.subscribe(_id);
+              _this36.subscribe(_id);
             }
           } else {
-            !_this37.recordStates.includes(_id) && _this37.recordStates.push(_id);
+            !_this36.recordStates.includes(_id) && _this36.recordStates.push(_id);
           }
         });
         // calculate color
@@ -5007,67 +4996,67 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         if (common.statusStates.errorId && this.states[ids.errorId] && this.states[ids.errorId].val) {
           checkColor = this.props.themeType === 'dark' ? COLOR_NAME_ERROR_DARK : COLOR_NAME_ERROR_LIGHT;
           colorSet = true;
-          icons.push( /*#__PURE__*/_react["default"].createElement(_Error["default"], {
+          icons.push( /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Error, {
             key: "error",
             title: this.texts.deviceError,
             className: this.props.classes.iconDeviceError
           }));
         }
-        if (ids.onlineId && this.states[ids.onlineId] && this.states[ids.onlineId].val !== null) {
+        if (ids.onlineId && this.states[ids.onlineId]) {
           if (!colorSet) {
             if (this.states[ids.onlineId].val) {
               checkColor = this.props.themeType === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT;
-              icons.push( /*#__PURE__*/_react["default"].createElement(_Wifi["default"], {
+              icons.push( /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Wifi, {
                 key: "conn",
                 title: this.texts.deviceError,
                 className: this.props.classes.iconDeviceConnected
               }));
             } else {
               checkColor = this.props.themeType === 'dark' ? COLOR_NAME_DISCONNECTED_DARK : COLOR_NAME_DISCONNECTED_LIGHT;
-              icons.push( /*#__PURE__*/_react["default"].createElement(_WifiOff["default"], {
+              icons.push( /*#__PURE__*/_react["default"].createElement(_iconsMaterial.WifiOff, {
                 key: "disc",
                 title: this.texts.deviceError,
                 className: this.props.classes.iconDeviceDisconnected
               }));
             }
           } else if (this.states[ids.onlineId].val) {
-            icons.push( /*#__PURE__*/_react["default"].createElement(_Wifi["default"], {
+            icons.push( /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Wifi, {
               key: "conn",
               title: this.texts.deviceError,
               className: this.props.classes.iconDeviceConnected
             }));
           } else {
-            icons.push( /*#__PURE__*/_react["default"].createElement(_WifiOff["default"], {
+            icons.push( /*#__PURE__*/_react["default"].createElement(_iconsMaterial.WifiOff, {
               key: "disc",
               title: this.texts.deviceError,
               className: this.props.classes.iconDeviceDisconnected
             }));
           }
-        } else if (ids.offlineId && this.states[ids.offlineId] && this.states[ids.offlineId].val !== null) {
+        } else if (ids.offlineId && this.states[ids.offlineId]) {
           if (!colorSet) {
             if (this.states[ids.offlineId].val) {
               checkColor = this.props.themeType === 'dark' ? COLOR_NAME_DISCONNECTED_DARK : COLOR_NAME_DISCONNECTED_LIGHT;
-              icons.push( /*#__PURE__*/_react["default"].createElement(_WifiOff["default"], {
+              icons.push( /*#__PURE__*/_react["default"].createElement(_iconsMaterial.WifiOff, {
                 key: "disc",
                 title: this.texts.deviceError,
                 className: this.props.classes.iconDeviceDisconnected
               }));
             } else {
               checkColor = this.props.themeType === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT;
-              icons.push( /*#__PURE__*/_react["default"].createElement(_Wifi["default"], {
+              icons.push( /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Wifi, {
                 key: "conn",
                 title: this.texts.deviceError,
                 className: this.props.classes.iconDeviceConnected
               }));
             }
           } else if (this.states[ids.offlineId].val) {
-            icons.push( /*#__PURE__*/_react["default"].createElement(_WifiOff["default"], {
+            icons.push( /*#__PURE__*/_react["default"].createElement(_iconsMaterial.WifiOff, {
               key: "disc",
               title: this.texts.deviceError,
               className: this.props.classes.iconDeviceDisconnected
             }));
           } else {
-            icons.push( /*#__PURE__*/_react["default"].createElement(_Wifi["default"], {
+            icons.push( /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Wifi, {
               key: "conn",
               title: this.texts.deviceError,
               className: this.props.classes.iconDeviceConnected
@@ -5091,7 +5080,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           useDesc = !!useDesc;
         }
       }
-      return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.Grid, {
         container: true,
         direction: "row",
         wrap: "nowrap",
@@ -5099,16 +5088,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         key: id,
         id: id,
         onClick: function onClick() {
-          return _this37.onSelect(id);
+          return _this36.onSelect(id);
         },
         onDoubleClick: function onDoubleClick() {
           if (!item.children) {
-            _this37.onSelect(id, true);
+            _this36.onSelect(id, true);
           } else {
-            _this37.toggleExpanded(id);
+            _this36.toggleExpanded(id);
           }
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
         container: true,
         wrap: "nowrap",
         direction: "row",
@@ -5117,35 +5106,31 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           width: this.columnsVisibility.id,
           paddingLeft: paddingLeft
         }
-      }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.Grid, {
         item: true,
         container: true,
-        alignItems: "center",
-        style: {
-          // color: checkColor,
-          // background: invertBackground,
-        }
-      }, checkbox, iconFolder), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+        alignItems: "center"
+      }, checkbox, iconFolder), /*#__PURE__*/_react["default"].createElement(_material.Grid, {
         item: true,
         style: {
           color: checkColor
         },
         className: _Utils["default"].clsx(classes.cellIdSpan, invertBackground && classes.invertedBackground)
-      }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_material.Tooltip, {
         title: getIdFieldTooltip(item.data, this.props.classes, this.props.lang),
         classes: {
           popper: this.props.classes.tooltip
         }
       }, /*#__PURE__*/_react["default"].createElement("div", null, item.data.name)), alias, icons), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.grow, invertBackground && classes.invertedBackgroundFlex)
-      }), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_material.Grid, {
         item: true,
         container: true,
         alignItems: "center"
       }, iconItem), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_IconCopy["default"], {
         className: _Utils["default"].clsx(classes.cellCopyButton, 'copyButton'),
         onClick: function onClick(e) {
-          return _this37.onCopy(e, id);
+          return _this36.onCopy(e, id);
         }
       }))), this.columnsVisibility.name ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.cellName, useDesc && classes.cellNameWithDesc),
@@ -5159,7 +5144,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_IconCopy["default"], {
         className: _Utils["default"].clsx(classes.cellCopyButton, 'copyButton'),
         onClick: function onClick(e) {
-          return _this37.onCopy(e, item.data.title);
+          return _this36.onCopy(e, item.data.title);
         }
       })) : null) : null, !this.state.statesView ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.columnsVisibility.type ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cellType,
@@ -5173,7 +5158,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           cursor: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole ? 'text' : 'default'
         },
         onClick: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole ? function () {
-          return _this37.setState({
+          return _this36.setState({
             roleDialog: item.data.id
           });
         } : undefined
@@ -5184,8 +5169,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           cursor: enumEditable ? 'text' : 'default'
         },
         onClick: enumEditable ? function () {
-          var enums = findEnumsForObjectAsIds(_this37.info, item.data.id, 'roomEnums');
-          _this37.setState({
+          var enums = findEnumsForObjectAsIds(_this36.info, item.data.id, 'roomEnums');
+          _this36.setState({
             enumDialogEnums: enums,
             enumDialog: {
               item: item,
@@ -5201,8 +5186,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           cursor: enumEditable ? 'text' : 'default'
         },
         onClick: enumEditable ? function () {
-          var enums = findEnumsForObjectAsIds(_this37.info, item.data.id, 'funcEnums');
-          _this37.setState({
+          var enums = findEnumsForObjectAsIds(_this36.info, item.data.id, 'funcEnums');
+          _this36.setState({
             enumDialogEnums: enums,
             enumDialog: {
               item: item,
@@ -5237,11 +5222,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.cellAdapter,
           style: {
-            width: _this37.columnsVisibility[it.id]
+            width: _this36.columnsVisibility[it.id]
           },
           key: it.id,
           title: "".concat(it.adapter, " => ").concat(it.pathText)
-        }, _this37.renderCustomValue(obj, it, item));
+        }, _this36.renderCustomValue(obj, it, item));
       }), this.columnsVisibility.val ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cellValue,
         style: {
@@ -5249,29 +5234,29 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           cursor: valueEditable ? (common === null || common === void 0 ? void 0 : common.type) === 'file' ? 'zoom-in' : item.data.button ? 'grab' : 'text' : 'default'
         },
         onClick: valueEditable ? function () {
-          if (!obj || !_this37.states) {
+          if (!obj || !_this36.states) {
             // return;
           } else if ((common === null || common === void 0 ? void 0 : common.type) === 'file') {
-            _this37.setState({
+            _this36.setState({
               viewFileDialog: id
             });
-          } else
+            // eslint-disable-next-line brace-style
+          } else if (!_this36.state.filter.expertMode && item.data.button) {
             // in non-expert mode control button directly
-            if (!_this37.state.filter.expertMode && item.data.button) {
-              _this37.props.socket.setState(id, true)["catch"](function (e) {
-                return window.alert("Cannot write state \"".concat(id, "\": ").concat(e));
-              });
-            } else {
-              _this37.edit = {
-                val: _this37.states[id] ? _this37.states[id].val : '',
-                q: _this37.states[id] ? _this37.states[id].q || 0 : 0,
-                ack: false,
-                id: id
-              };
-              _this37.setState({
-                updateOpened: true
-              });
-            }
+            _this36.props.socket.setState(id, true)["catch"](function (e) {
+              return window.alert("Cannot write state \"".concat(id, "\": ").concat(e));
+            });
+          } else {
+            _this36.edit = {
+              val: _this36.states[id] ? _this36.states[id].val : '',
+              q: _this36.states[id] ? _this36.states[id].q || 0 : 0,
+              ack: false,
+              id: id
+            };
+            _this36.setState({
+              updateOpened: true
+            });
+          }
         } : undefined
       }, this.renderColumnValue(id, item, classes)) : null, this.columnsVisibility.buttons ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cellButtons,
@@ -5292,7 +5277,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderItem",
     value: function renderItem(root, isExpanded, classes, counter) {
-      var _this38 = this;
+      var _this37 = this;
       var items = [];
       counter = counter || {
         count: 0
@@ -5320,9 +5305,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         if (!this.state.foldersFirst) {
           root.children && items.push(root.children.map(function (item) {
             // do not render too many items in column editor mode
-            if (!_this38.state.columnsSelectorShow || counter.count < 15) {
+            if (!_this37.state.columnsSelectorShow || counter.count < 15) {
               if (item.data.sumVisibility) {
-                return _this38.renderItem(item, undefined, classes, counter);
+                return _this37.renderItem(item, undefined, classes, counter);
               }
             }
             return null;
@@ -5332,9 +5317,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           root.children && items.push(root.children.map(function (item) {
             if (item.children) {
               // do not render too many items in column editor mode
-              if (!_this38.state.columnsSelectorShow || counter.count < 15) {
+              if (!_this37.state.columnsSelectorShow || counter.count < 15) {
                 if (item.data.sumVisibility) {
-                  return _this38.renderItem(item, undefined, classes, counter);
+                  return _this37.renderItem(item, undefined, classes, counter);
                 }
               }
             }
@@ -5344,9 +5329,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           root.children && items.push(root.children.map(function (item) {
             if (!item.children) {
               // do not render too many items in column editor mode
-              if (!_this38.state.columnsSelectorShow || counter.count < 15) {
+              if (!_this37.state.columnsSelectorShow || counter.count < 15) {
                 if (item.data.sumVisibility) {
-                  return _this38.renderItem(item, undefined, classes, counter);
+                  return _this37.renderItem(item, undefined, classes, counter);
                 }
               }
             }
@@ -5367,7 +5352,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "calculateColumnsVisibility",
     value: function calculateColumnsVisibility(columnsAuto, columns, columnsForAdmin, columnsWidths) {
-      var _this39 = this;
+      var _this38 = this;
       columnsWidths = columnsWidths || this.state.columnsWidths;
       columnsForAdmin = columnsForAdmin || this.state.columnsForAdmin;
       columns = columns || this.state.columns || [];
@@ -5451,7 +5436,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           Object.keys(columnsForAdmin).sort().forEach(function (adapter) {
             return columnsForAdmin[adapter].forEach(function (column) {
               var id = "_".concat(adapter, "_").concat(column.path);
-              _this39.columnsVisibility[id] = columns.includes(id);
+              _this38.columnsVisibility[id] = columns.includes(id);
               if (columns.includes(id)) {
                 var item = {
                   adapter: adapter,
@@ -5469,11 +5454,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                     item.objTypes = column.objTypes;
                   }
                 }
-                _this39.adapterColumns.push(item);
-                _this39.columnsVisibility[id] = columnsWidths[item.id] || column.width || SCREEN_WIDTHS[_this39.props.width].widths.func || SCREEN_WIDTHS.xl.widths.func;
-                _widthSum2 += _this39.columnsVisibility[id];
+                _this38.adapterColumns.push(item);
+                _this38.columnsVisibility[id] = columnsWidths[item.id] || column.width || SCREEN_WIDTHS[_this38.props.width].widths.func || SCREEN_WIDTHS.xl.widths.func;
+                _widthSum2 += _this38.columnsVisibility[id];
               } else {
-                _this39.columnsVisibility[id] = 0;
+                _this38.columnsVisibility[id] = 0;
               }
             });
           });
@@ -5494,15 +5479,44 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           this.columnsVisibility.nameHeader = "calc(100% - ".concat(_widthSum2 + 5 + this.state.scrollBarWidth, "px)");
         } else {
           var newWidth = Object.keys(this.columnsVisibility).reduce(function (accumulator, name) {
-            if (name === 'id' || typeof _this39.columnsVisibility[name] === 'string' || !_this39.columnsVisibility[name]) {
+            if (name === 'id' || typeof _this38.columnsVisibility[name] === 'string' || !_this38.columnsVisibility[name]) {
               return accumulator;
             }
-            return accumulator + _this39.columnsVisibility[name];
+            return accumulator + _this38.columnsVisibility[name];
           }, 0);
           this.columnsVisibility.id = "calc(100% - ".concat(newWidth, "px)");
         }
       }
     }
+  }, {
+    key: "navigateKeyPress",
+    value:
+    /**
+     * Handle keyboard events for navigation
+     *
+     * @param {KeyboardEvent} event
+     */
+    function navigateKeyPress(event) {
+      var selectedId = this.state.selectedNonObject || this.state.selected[0];
+      if (!selectedId) {
+        return;
+      }
+      if (event.code === 'ArrowUp' || event.code === 'ArrowDown') {
+        event.preventDefault();
+        var ids = [];
+        this.tableRef.current.childNodes.forEach(function (node) {
+          return ids.push(node.id);
+        });
+        var idx = ids.indexOf(selectedId);
+        var newIdx = event.code === 'ArrowDown' ? idx + 1 : idx - 1;
+        var newId = ids[newIdx] || selectedId;
+        this.onSelect(newId);
+        this.scrollToItem(newId);
+      }
+      if (event.code === 'ArrowRight' || event.code === 'ArrowLeft') {
+        this.toggleExpanded(selectedId);
+      }
+    }
   }, {
     key: "renderHeader",
     value:
@@ -5511,18 +5525,18 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element}
      */
     function renderHeader() {
-      var _this40 = this;
+      var _this39 = this;
       var classes = this.props.classes;
       var filterClearInValue = null;
       if (!this.columnsVisibility.buttons && !this.isFilterEmpty()) {
-        filterClearInValue = /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        filterClearInValue = /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           onClick: function onClick() {
-            return _this40.clearFilter();
+            return _this39.clearFilter();
           },
           className: classes.buttonClearFilter,
           title: this.props.t('ra_Clear filter'),
           size: "large"
-        }, /*#__PURE__*/_react["default"].createElement(_IconClearFilter["default"], null), /*#__PURE__*/_react["default"].createElement(_Close["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_IconClearFilter["default"], null), /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, {
           className: classes.buttonClearFilterIcon
         }));
       }
@@ -5608,7 +5622,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
           style: {
-            width: _this40.columnsVisibility[item.id]
+            width: _this39.columnsVisibility[item.id]
           },
           title: item.adapter,
           key: item.id,
@@ -5644,31 +5658,31 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderToast",
     value: function renderToast() {
-      var _this41 = this;
-      return /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
+      var _this40 = this;
+      return /*#__PURE__*/_react["default"].createElement(_material.Snackbar, {
         open: !!this.state.toast,
         autoHideDuration: 3000,
         onClick: function onClick() {
-          return _this41.setState({
+          return _this40.setState({
             toast: ''
           });
         },
         onClose: function onClose() {
-          return _this41.setState({
+          return _this40.setState({
             toast: ''
           });
         },
         message: this.state.toast,
-        action: /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        action: /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
           size: "small",
           "aria-label": "close",
           color: "inherit",
           onClick: function onClick() {
-            return _this41.setState({
+            return _this40.setState({
               toast: ''
             });
           }
-        }, /*#__PURE__*/_react["default"].createElement(_Close["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_iconsMaterial.Close, {
           fontSize: "small"
         }))
       });
@@ -5680,12 +5694,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _this42 = this;
+      var _this41 = this;
       if (this.tableRef.current) {
         var scrollBarWidth = this.tableRef.current.offsetWidth - this.tableRef.current.clientWidth;
         if (this.state.scrollBarWidth !== scrollBarWidth) {
           setTimeout(function () {
-            return _this42.setState({
+            return _this41.setState({
               scrollBarWidth: scrollBarWidth
             });
           }, 100);
@@ -5713,12 +5727,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderCustomDialog",
     value: function renderCustomDialog() {
-      var _this43 = this;
+      var _this42 = this;
       if (this.state.customDialog && this.props.objectCustomDialog) {
         var ObjectCustomDialog = this.props.objectCustomDialog;
         return /*#__PURE__*/_react["default"].createElement(ObjectCustomDialog, {
           reportChangedIds: function reportChangedIds(changedIds) {
-            return _this43.changedIds = (0, _toConsumableArray2["default"])(changedIds);
+            return _this42.changedIds = (0, _toConsumableArray2["default"])(changedIds);
           },
           objectIDs: this.state.customDialog,
           expertMode: this.state.filter.expertMode,
@@ -5732,16 +5746,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           objects: this.objects,
           customsInstances: this.info.customs,
           onClose: function onClose() {
-            _this43.pauseSubscribe(false);
-            _this43.setState({
+            _this42.pauseSubscribe(false);
+            _this42.setState({
               customDialog: null
             });
-            if (_this43.changedIds) {
-              _this43.changedIds = null;
+            if (_this42.changedIds) {
+              _this42.changedIds = null;
               // update all changed IDs
-              _this43.forceUpdate();
+              _this42.forceUpdate();
             }
-            _this43.props.router && _this43.props.router.doNavigate('tab-objects');
+            _this42.props.router && _this42.props.router.doNavigate('tab-objects');
           }
         });
       }
@@ -5755,14 +5769,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onUpdate",
     value: function onUpdate(valAck) {
-      var _this44 = this;
+      var _this43 = this;
       this.props.socket.setState(this.edit.id, {
         val: valAck.val,
         ack: valAck.ack,
         q: valAck.q || 0,
         expire: valAck.expire || undefined
       })["catch"](function (e) {
-        return _this44.showError("Cannot write value: ".concat(e));
+        return _this43.showError("Cannot write value: ".concat(e));
       });
     }
 
@@ -5773,7 +5787,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderEditObjectDialog",
     value: function renderEditObjectDialog() {
-      var _this45 = this;
+      var _this44 = this;
       if (!this.state.editObjectDialog || !this.props.objectBrowserEditObject) {
         return null;
       }
@@ -5791,37 +5805,37 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         t: this.props.t,
         expertMode: this.state.filter.expertMode,
         onNewObject: function onNewObject(obj) {
-          return _this45.props.socket.setObject(obj._id, obj).then(function () {
-            return _this45.setState({
+          return _this44.props.socket.setObject(obj._id, obj).then(function () {
+            return _this44.setState({
               editObjectDialog: obj._id
             }, function () {
-              return _this45.onSelect(obj._id);
+              return _this44.onSelect(obj._id);
             });
           })["catch"](function (e) {
-            return _this45.showError("Cannot write object: ".concat(e));
+            return _this44.showError("Cannot write object: ".concat(e));
           });
         },
         onClose: function onClose(obj) {
           if (obj) {
             var updateAlias;
-            if (_this45.state.editObjectDialog.startsWith('alias.')) {
-              var _this45$objects$_this, _obj$common5;
-              if (JSON.stringify((_this45$objects$_this = _this45.objects[_this45.state.editObjectDialog].common) === null || _this45$objects$_this === void 0 ? void 0 : _this45$objects$_this.alias) !== JSON.stringify((_obj$common5 = obj.common) === null || _obj$common5 === void 0 ? void 0 : _obj$common5.alias)) {
-                updateAlias = _this45.state.editObjectDialog;
+            if (_this44.state.editObjectDialog.startsWith('alias.')) {
+              var _this44$objects$_this, _obj$common5;
+              if (JSON.stringify((_this44$objects$_this = _this44.objects[_this44.state.editObjectDialog].common) === null || _this44$objects$_this === void 0 ? void 0 : _this44$objects$_this.alias) !== JSON.stringify((_obj$common5 = obj.common) === null || _obj$common5 === void 0 ? void 0 : _obj$common5.alias)) {
+                updateAlias = _this44.state.editObjectDialog;
               }
             }
-            _this45.props.socket.setObject(obj._id, obj).then(function () {
-              if (updateAlias && _this45.subscribes.includes(updateAlias)) {
-                _this45.unsubscribe(updateAlias);
+            _this44.props.socket.setObject(obj._id, obj).then(function () {
+              if (updateAlias && _this44.subscribes.includes(updateAlias)) {
+                _this44.unsubscribe(updateAlias);
                 setTimeout(function () {
-                  return _this45.subscribe(updateAlias);
+                  return _this44.subscribe(updateAlias);
                 }, 100);
               }
             })["catch"](function (e) {
-              return _this45.showError("Cannot write object: ".concat(e));
+              return _this44.showError("Cannot write object: ".concat(e));
             });
           }
-          _this45.setState({
+          _this44.setState({
             editObjectDialog: ''
           });
         }
@@ -5835,7 +5849,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderViewObjectFileDialog",
     value: function renderViewObjectFileDialog() {
-      var _this46 = this;
+      var _this45 = this;
       if (!this.state.viewFileDialog || !this.props.objectBrowserViewFile) {
         return null;
       }
@@ -5849,7 +5863,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         t: this.props.t,
         expertMode: this.state.filter.expertMode,
         onClose: function onClose() {
-          return _this46.setState({
+          return _this45.setState({
             viewFileDialog: ''
           });
         }
@@ -5864,7 +5878,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     key: "renderEditValueDialog",
     value: function renderEditValueDialog() {
       var _this$objects$this$ed,
-        _this47 = this;
+        _this46 = this;
       if (!this.state.updateOpened || !this.props.objectBrowserValue) {
         return null;
       }
@@ -5891,22 +5905,30 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         defaultHistory: this.defaultHistory,
         dateFormat: this.props.dateFormat,
         onClose: function onClose(res) {
-          _this47.setState({
+          _this46.setState({
             updateOpened: false
           });
-          res && _this47.onUpdate(res);
+          res && _this46.onUpdate(res);
         }
       });
     }
-  }, {
-    key: "render",
-    value:
+
+    // extendObject = (id, data) =>
+    //     this.props.socket.extendObject(id, data)
+    //         .catch(error => window.alert(error));
+
+    // setObject = (id, data) =>
+    //     this.props.socket.setObject(id, data)
+    //         .catch(error => window.alert(error));
+
     /**
      * The rendering method of this component.
      * @returns {JSX.Element}
      */
-    function render() {
-      var _this48 = this;
+  }, {
+    key: "render",
+    value: function render() {
+      var _this47 = this;
       this.recordStates = [];
       this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer);
 
@@ -5919,13 +5941,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         applyFilter(this.root, this.state.filter, this.props.lang, this.objects, null, counter, this.props.customFilter, this.props.types);
         if (counter.count < 500 && !this.state.expandAllVisible) {
           setTimeout(function () {
-            return _this48.setState({
+            return _this47.setState({
               expandAllVisible: true
             });
           });
         } else if (counter.count >= 500 && this.state.expandAllVisible) {
           setTimeout(function () {
-            return _this48.setState({
+            return _this47.setState({
               expandAllVisible: false
             });
           });
@@ -5933,11 +5955,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         this.lastAppliedFilter = jsonFilter;
       }
       this.unsubscribeTimer = setTimeout(function () {
-        _this48.unsubscribeTimer = null;
-        _this48.checkUnsubscribes();
+        _this47.unsubscribeTimer = null;
+        _this47.checkUnsubscribes();
       }, 200);
       if (!this.state.loaded) {
-        return /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_material.CircularProgress, {
           key: "".concat(this.props.dialogName, "_c")
         });
       }
@@ -5945,7 +5967,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       var items = this.renderItem(this.root, undefined, classes);
       return /*#__PURE__*/_react["default"].createElement(_TabContainer["default"], {
         key: this.props.dialogName,
-        classes: {}
+        classes: {},
+        onKeyDown: function onKeyDown(event) {
+          return _this47.navigateKeyPress(event);
+        },
+        tabIndex: 0
       }, /*#__PURE__*/_react["default"].createElement(_TabHeader["default"], null, this.getToolbar()), /*#__PURE__*/_react["default"].createElement(_TabContent["default"], {
         classes: {}
       }, this.renderHeader(), /*#__PURE__*/_react["default"].createElement("div", {
@@ -6119,6 +6145,7 @@ ObjectBrowser.propTypes = {
   // optional ['state', 'instance', 'channel']
   columns: _propTypes["default"].array,
   // optional ['name', 'type', 'role', 'room', 'func', 'val', 'buttons']
+  // eslint-disable-next-line react/no-unused-prop-types
   root: _propTypes["default"].string,
   // optional, shows only elements of this root
 
@@ -6128,14 +6155,12 @@ ObjectBrowser.propTypes = {
   // function to filter out all unnecessary objects. It cannot be used together with "types"
   // Example for function: `obj => obj.common && obj.common.type === 'boolean'` to show only boolean states
 
-  dragSettings: _propTypes["default"].object,
   DragWrapper: _propTypes["default"].func,
-  dragEnabled: _propTypes["default"].bool,
-  useDrag: _propTypes["default"].func
+  dragEnabled: _propTypes["default"].bool
 };
 
 /** @type {typeof ObjectBrowser} */
-var _export = (0, _withWidth["default"])()((0, _withStyles["default"])(styles)(ObjectBrowser));
+var _export = (0, _withWidth["default"])()((0, _styles.withStyles)(styles)(ObjectBrowser));
 var _default = _export;
 exports["default"] = _default;
 //# sourceMappingURL=ObjectBrowser.js.map