@iobroker/adapter-react-v5 4.0.13 → 4.0.15

package/Components/ObjectBrowser.js

@@ -34,6 +34,7 @@ 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"));
@@ -73,6 +74,7 @@ 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 _IconExpert = _interopRequireDefault(require("../icons/IconExpert"));
 var _IconAdapter = _interopRequireDefault(require("../icons/IconAdapter"));
 var _IconAlias = _interopRequireDefault(require("../icons/IconAlias"));
@@ -343,6 +345,15 @@ var styles = function styles(theme) {
         display: 'block'
       }
     },
+    cellNameWithDesc: {
+      lineHeight: 'normal'
+    },
+    cellNameDivDiv: {},
+    cellDescription: {
+      fontSize: 10,
+      opacity: 0.5,
+      fontStyle: 'italic'
+    },
     cellIdAlias: {
       fontStyle: 'italic',
       fontSize: 12,
@@ -455,7 +466,11 @@ var styles = function styles(theme) {
     },
     cellValueTooltipBox: {
       width: 250,
-      overflow: 'hidden'
+      overflow: 'hidden',
+      pointerEvents: 'none'
+    },
+    tooltip: {
+      pointerEvents: 'none'
     },
     cellValueTextUnit: {
       marginLeft: theme.spacing(0.5),
@@ -1090,33 +1105,39 @@ function getSystemIcon(objects, id, k, imagePrefix) {
   }
   return icon || null;
 }
-function getIdFieldTooltip(data, classes, lang) {
+function getObjectTooltip(data, lang) {
   var _data$obj2, _data$obj2$common;
-  if (data !== null && data !== void 0 && (_data$obj2 = data.obj) !== null && _data$obj2 !== void 0 && (_data$obj2$common = _data$obj2.common) !== null && _data$obj2$common !== void 0 && _data$obj2$common.desc && data.obj.common.desc !== '') {
-    var _data$obj3, _data$obj3$common, _data$obj4, _data$obj4$common, _data$obj5, _data$obj5$common, _tooltip;
+  if (!data) {
+    return null;
+  }
+  if ((_data$obj2 = data.obj) !== null && _data$obj2 !== void 0 && (_data$obj2$common = _data$obj2.common) !== null && _data$obj2$common !== void 0 && _data$obj2$common.desc) {
     var tooltip = '';
-    if ((0, _typeof2["default"])(data === null || data === void 0 ? void 0 : (_data$obj3 = data.obj) === null || _data$obj3 === void 0 ? void 0 : (_data$obj3$common = _data$obj3.common) === null || _data$obj3$common === void 0 ? void 0 : _data$obj3$common.desc) === 'object' && data.obj.common.desc[lang] !== undefined) {
-      tooltip = data.obj.common.desc[lang];
-    } else if ((0, _typeof2["default"])(data === null || data === void 0 ? void 0 : (_data$obj4 = data.obj) === null || _data$obj4 === void 0 ? void 0 : (_data$obj4$common = _data$obj4.common) === null || _data$obj4$common === void 0 ? void 0 : _data$obj4$common.desc) === 'object' && data.obj.common.desc['en'] !== undefined) {
-      tooltip = data.obj.common.desc['en'];
-    } else if ((0, _typeof2["default"])(data === null || data === void 0 ? void 0 : (_data$obj5 = data.obj) === null || _data$obj5 === void 0 ? void 0 : (_data$obj5$common = _data$obj5.common) === null || _data$obj5$common === void 0 ? void 0 : _data$obj5$common.desc) === 'object' && data.obj.common.desc[lang] === undefined) {
-      return data.id;
+    if ((0, _typeof2["default"])(data.obj.common.desc) === 'object') {
+      tooltip = data.obj.common.desc[lang] || data.obj.common.desc.en;
     } else {
       tooltip = data.obj.common.desc;
     }
-    if ((_tooltip = tooltip) !== null && _tooltip !== void 0 && _tooltip.startsWith('http')) {
-      return /*#__PURE__*/_react["default"].createElement("a", {
-        className: _Utils["default"].clsx(classes.cellIdTooltipLink),
-        href: tooltip,
-        target: "_blank",
-        rel: "noreferrer"
-      }, tooltip);
+    if (!tooltip) {
+      return null;
     }
+    return tooltip.toString();
+  }
+  return null;
+}
+function getIdFieldTooltip(data, classes, lang) {
+  var tooltip = getObjectTooltip(data, lang);
+  if (tooltip !== null && tooltip !== void 0 && tooltip.startsWith('http')) {
+    return /*#__PURE__*/_react["default"].createElement("a", {
+      className: _Utils["default"].clsx(classes.cellIdTooltipLink),
+      href: tooltip,
+      target: "_blank",
+      rel: "noreferrer"
+    }, tooltip);
+  } else {
     return /*#__PURE__*/_react["default"].createElement("span", {
       className: _Utils["default"].clsx(classes.cellIdTooltip)
-    }, tooltip);
+    }, tooltip || data.id || '');
   }
-  return data.id;
 }
 function buildTree(objects, options) {
   options = options || {};
@@ -1737,6 +1758,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     var _this;
     (0, _classCallCheck2["default"])(this, ObjectBrowser);
     _this = _super.call(this, props);
+    /**
+     * Called when a state changes.
+     * @param {string} id
+     * @param {ioBroker.State} state
+     */
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onStateChange", function (id, state) {
       console.log("> stateChange ".concat(id));
       if (_this.states[id]) {
@@ -1758,6 +1784,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         _this.statesUpdateTimer = null;
       }
     });
+    /**
+     * @param {string} id
+     * @param {ioBroker.Object} obj
+     */
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onObjectChange", function (id, obj /* , oldObj */) {
       var newState;
       if (Array.isArray(id)) {
@@ -1825,6 +1855,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }, 500);
       }
     });
+    /**
+     * @private
+     * @param {string} id
+     */
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEnumsForId", function (id) {
       var result = [];
       _this.info.enums.forEach(function (_id) {
@@ -1846,6 +1880,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       });
       return result.length ? result : undefined;
     });
+    /**
+     * @private
+     * @param {array} enums
+     * @param {string} objId
+     */
     (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, _enObj$common$members, id, _enObj, enObj;
@@ -1910,6 +1949,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return _ref.apply(this, arguments);
       };
     }());
+    /**
+     * @private
+     * @param {any} objs
+     */
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "loadObjects", /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(objs) {
         var id, obj, enums, state;
@@ -2003,6 +2046,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return _ref2.apply(this, arguments);
       };
     }());
+    /**
+     * @private
+     * @param {object} evt
+     */
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleJsonUpload", function (evt) {
       var f = evt.target.files[0];
       if (f) {
@@ -2425,9 +2472,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       var pos = _this.visibleCols.indexOf('type');
       pos !== -1 && _this.visibleCols.splice(pos, 1);
     }
-
-    // this.possibleCols = SCREEN_WIDTHS.xl.fields;
-
+    _this.possibleCols = SCREEN_WIDTHS.xl.fields;
     var customDialog = null;
     if (props.router) {
       var location = props.router.getLocation();
@@ -2445,7 +2490,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     }).filter(function (id) {
       return id;
     });
-    var columns = null; // (window._localStorage || window.localStorage).getItem(`${props.dialogName || 'App'}.columns`);
+    var columns = (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".columns"));
     try {
       columns = columns ? JSON.parse(columns) : null;
     } catch (e) {
@@ -2483,7 +2528,6 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       expandAllVisible: false,
       expanded: expanded,
       toast: '',
-      lang: props.lang,
       scrollBarWidth: 16,
       customDialog: customDialog,
       editObjectDialog: '',
@@ -2494,14 +2538,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       columns: columns,
       columnsForAdmin: null,
       columnsSelectorShow: false,
-      columnsAuto: true,
-      // (window._localStorage || window.localStorage).getItem(`${props.dialogName || 'App'}.columnsAuto`) !== 'false',
+      columnsAuto: (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".columnsAuto")) !== 'false',
       columnsWidths: columnsWidths,
       columnsDialogTransparent: 100,
       columnsEditCustomDialog: null,
       customColumnDialogValueChanged: false,
       showExportDialog: false,
-      linesEnabled: (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".lines")) === 'true'
+      linesEnabled: (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".lines")) === 'true',
+      showDescription: (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".desc")) !== 'false'
     };
     _this.edit = {};
     _this.texts = {
@@ -2674,7 +2718,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         _this2.lastAppliedFilter = null;
 
         // If selected ID is not visible, reset filter
-        if (node && !applyFilter(node, _this2.state.filter, _this2.state.lang, _this2.objects, null, null, props.customFilter, props.types)) {
+        if (node && !applyFilter(node, _this2.state.filter, _this2.props.lang, _this2.objects, null, null, props.customFilter, props.types)) {
           // reset filter
           _this2.setState({
             filter: _objectSpread({}, DEFAULT_FILTER),
@@ -2748,7 +2792,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       if (this.state.selected && this.state.selected.length) {
         (window._localStorage || window.localStorage).setItem("".concat(this.props.dialogName || 'App', ".objectSelected"), JSON.stringify(this.lastSelectedItems));
         var name = this.lastSelectedItems.length === 1 ? _Utils["default"].getObjectName(this.objects, this.lastSelectedItems[0], null, {
-          language: this.state.lang
+          language: this.props.lang
         }) : '';
         this.props.onSelect && this.props.onSelect(this.lastSelectedItems, name, isDouble);
       } else {
@@ -2932,82 +2976,65 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @private
      * @param {boolean} isLast
      */
-    /*
-    _renderDefinedList(isLast) {
-        const cols = [...this.possibleCols];
-        cols.unshift('id');
-        if (this.props.columns && !this.props.columns.includes('buttons')) {
-            const pos = cols.indexOf('buttons');
-            if (pos !== -1) {
-                cols.splice(pos, 1);
-            }
+  }, {
+    key: "_renderDefinedList",
+    value: function _renderDefinedList(isLast) {
+      var _this9 = this;
+      var cols = (0, _toConsumableArray2["default"])(this.possibleCols);
+      cols.unshift('id');
+      if (this.props.columns && !this.props.columns.includes('buttons')) {
+        var pos = cols.indexOf('buttons');
+        if (pos !== -1) {
+          cols.splice(pos, 1);
         }
-        return cols
-            .filter(id => (isLast && (id === 'val' || id === 'buttons')) || (!isLast && id !== 'val' && id !== 'buttons'))
-            .map(id =>
-                <ListItemButton onClick={() => {
-                    if (!this.state.columnsAuto && id !== 'id') {
-                        const columns = [...(this.state.columns || [])];
-                        const pos = columns.indexOf(id);
-                        if (pos === -1) {
-                            columns.push(id);
-                            columns.sort();
-                        } else {
-                            columns.splice(pos, 1);
-                        }
-                        (window._localStorage || window.localStorage).setItem((this.props.dialogName || 'App') + '.columns', JSON.stringify(columns));
-                        this.calculateColumnsVisibility(null, columns);
-                        this.setState({ columns });
-                    }
-                }} key={id}>
-                    <Checkbox
-                        edge="start"
-                        disabled={id === 'id' || this.state.columnsAuto}
-                        checked={id === 'id' || (this.state.columnsAuto ? this.visibleCols.includes(id) : (this.state.columns && this.state.columns.includes(id)))}
-                        disableRipple
-                    />
-                    <ListItemText primary={this.texts['filter_' + id] || this.props.t('ra_' + id)} />
-                    <ListItemSecondaryAction>
-                        <FormControl
-                            variant="standard"
-                            className={this.props.classes.columnsDialogInputWidth}
-                            style={{ marginTop: 0, marginBottom: 0 }}
-                            margin="dense"
-                        >
-                            <Input
-                                classes={{ underline: 'no-underline' }}
-                                placeholder={this.props.t('ra_Width')}
-                                value={this.state.columnsWidths[id] || ''}
-                                onChange={e => {
-                                    const columnsWidths = JSON.parse(JSON.stringify(this.state.columnsWidths));
-                                    columnsWidths[id] = e.target.value;
-                                    (window._localStorage || window.localStorage).setItem((this.props.dialogName || 'App') + '.columnsWidths', JSON.stringify(columnsWidths));
-                                    this.calculateColumnsVisibility(null, null, null, columnsWidths);
-                                    this.setState({ columnsWidths });
-                                }}
-                                autoComplete="off"
-                            />
-                        </FormControl>
-                    </ListItemSecondaryAction>
-                </ListItemButton>
-            );
-    }
-    */
+      }
+      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"], {
+          onClick: function onClick() {
+            if (!_this9.state.columnsAuto && id !== 'id') {
+              var columns = (0, _toConsumableArray2["default"])(_this9.state.columns || []);
+              var _pos = columns.indexOf(id);
+              if (_pos === -1) {
+                columns.push(id);
+                columns.sort();
+              } else {
+                columns.splice(_pos, 1);
+              }
+              (window._localStorage || window.localStorage).setItem((_this9.props.dialogName || 'App') + '.columns', JSON.stringify(columns));
+              _this9.calculateColumnsVisibility(null, columns);
+              _this9.setState({
+                columns: columns
+              });
+            }
+          },
+          key: id
+        }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+          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)),
+          disableRipple: true
+        }), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
+          primary: _this9.texts['filter_' + id] || _this9.props.t('ra_' + id)
+        }));
+      });
+    }
 
     /**
-     * Renders the columns selector.
+     * Renders the columns' selector.
      * @returns {JSX.Element | null}
      */
   }, {
     key: "renderColumnsSelectorDialog",
     value: function renderColumnsSelectorDialog() {
-      var _this9 = this;
+      var _this10 = this;
       if (!this.state.columnsSelectorShow) {
         return null;
       }
       return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
         onClose: function onClose() {
-          return _this9.setState({
+          return _this10.setState({
             columnsSelectorShow: false
           });
         },
@@ -3024,9 +3051,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
           checked: this.state.foldersFirst,
           onChange: function onChange() {
-            (window._localStorage || window.localStorage).setItem("".concat(_this9.props.dialogName || 'App', ".foldersFirst"), _this9.state.foldersFirst ? 'false' : 'true');
-            _this9.setState({
-              foldersFirst: !_this9.state.foldersFirst
+            (window._localStorage || window.localStorage).setItem("".concat(_this10.props.dialogName || 'App', ".foldersFirst"), _this10.state.foldersFirst ? 'false' : 'true');
+            _this10.setState({
+              foldersFirst: !_this10.state.foldersFirst
             });
           }
         }),
@@ -3036,17 +3063,76 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
           checked: this.state.linesEnabled,
           onChange: function onChange() {
-            (window._localStorage || window.localStorage).setItem("".concat(_this9.props.dialogName || 'App', ".lines"), _this9.state.linesEnabled ? 'false' : 'true');
-            _this9.setState({
-              linesEnabled: !_this9.state.linesEnabled
+            (window._localStorage || window.localStorage).setItem("".concat(_this10.props.dialogName || 'App', ".lines"), _this10.state.linesEnabled ? 'false' : 'true');
+            _this10.setState({
+              linesEnabled: !_this10.state.linesEnabled
             });
           }
         }),
         label: this.props.t('ra_Show lines between rows')
-      })), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+        className: this.props.classes.switchColumnAuto,
+        control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
+          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({
+                columnsAuto: true
+              });
+            } 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
+                });
+              }
+            }
+          }
+        }),
+        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"], {
+            onClick: function onClick() {
+              if (!_this10.state.columnsAuto) {
+                var columns = (0, _toConsumableArray2["default"])(_this10.state.columns || []);
+                var id = '_' + adapter + '_' + column.path;
+                var pos = columns.indexOf(id);
+                if (pos === -1) {
+                  columns.push(id);
+                  columns.sort();
+                } else {
+                  columns.splice(pos, 1);
+                }
+                _this10.calculateColumnsVisibility(null, columns);
+                (window._localStorage || window.localStorage).setItem((_this10.props.dialogName || 'App') + '.columns', JSON.stringify(columns));
+                _this10.setState({
+                  columns: columns
+                });
+              }
+            },
+            key: adapter + '_' + column.name
+          }, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], null, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+            disabled: _this10.state.columnsAuto,
+            edge: "start",
+            checked: !_this10.state.columnsAuto && _this10.state.columns && _this10.state.columns.includes('_' + adapter + '_' + column.path),
+            disableRipple: true
+          })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
+            primary: column.name + ' (' + adapter + ')'
+          }));
+        });
+      }), this._renderDefinedList(true))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         variant: "contained",
         onClick: function onClick() {
-          return _this9.setState({
+          return _this10.setState({
             columnsSelectorShow: false
           });
         },
@@ -3061,12 +3147,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getAdditionalColumns",
     value: function getAdditionalColumns() {
-      var _this10 = this;
+      var _this11 = this;
       return this.props.socket.getAdapters().then(function (instances) {
         var columnsForAdmin = null;
         // find all additional columns
         instances.forEach(function (obj) {
-          return columnsForAdmin = _this10.parseObjectForAdmins(columnsForAdmin, obj);
+          return columnsForAdmin = _this11.parseObjectForAdmins(columnsForAdmin, obj);
         });
         return columnsForAdmin;
       })["catch"](function () {
@@ -3122,12 +3208,6 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }
       return null;
     }
-
-    /**
-     * Called when a state changes.
-     * @param {string} id
-     * @param {ioBroker.State} state
-     */
   }, {
     key: "parseObjectForAdmins",
     value:
@@ -3137,7 +3217,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @param {any} obj
      */
     function parseObjectForAdmins(columnsForAdmin, obj) {
-      var _this11 = this;
+      var _this12 = this;
       if (obj.common && obj.common.adminColumns && obj.common.name) {
         var columns = obj.common.adminColumns;
         if ((0, _typeof2["default"])(columns) !== 'object') {
@@ -3183,7 +3263,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           }
           return {
             path: item.path,
-            name: item.name[_this11.props.lang] || item.name.en,
+            name: item.name[_this12.props.lang] || item.name.en,
             width: item.width,
             edit: !!item.edit,
             type: item.type,
@@ -3203,11 +3283,6 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }
       return columnsForAdmin;
     }
-
-    /**
-     * @param {string} id
-     * @param {ioBroker.Object} obj
-     */
   }, {
     key: "subscribe",
     value:
@@ -3251,16 +3326,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "pauseSubscribe",
     value: function pauseSubscribe(isPause) {
-      var _this12 = this;
+      var _this13 = this;
       if (!this.pausedSubscribes && isPause) {
         this.pausedSubscribes = true;
         this.subscribes.forEach(function (id) {
-          return _this12.props.socket.unsubscribeState(id, _this12.onStateChange);
+          return _this13.props.socket.unsubscribeState(id, _this13.onStateChange);
         });
       } else if (this.pausedSubscribes && !isPause) {
         this.pausedSubscribes = false;
         this.subscribes.forEach(function (id) {
-          return _this12.props.socket.subscribeState(id, _this12.onStateChange);
+          return _this13.props.socket.subscribeState(id, _this13.onStateChange);
         });
       }
     }
@@ -3273,14 +3348,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onFilter",
     value: function onFilter(name, value) {
-      var _this13 = this;
+      var _this14 = this;
       this.filterTimer = null;
       var filter = _objectSpread({}, this.state.filter);
       Object.keys(this.filterRefs).forEach(function (_name) {
-        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;
+        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;
               break;
             }
           }
@@ -3297,19 +3372,19 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         this.setState({
           filter: filter
         }, function () {
-          return _this13.props.onFilterChanged && _this13.props.onFilterChanged(filter);
+          return _this14.props.onFilterChanged && _this14.props.onFilterChanged(filter);
         });
       }
     }
   }, {
     key: "clearFilter",
     value: function clearFilter() {
-      var _this14 = this;
+      var _this15 = this;
       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.childNodes.length; i++) {
-            var item = _this14.filterRefs[name].current.childNodes[i];
+        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 (item.tagName === 'INPUT') {
               filter[name] = '';
               item.value = '';
@@ -3324,16 +3399,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           filter: filter,
           filterKey: this.state.filterKey + 1
         }, function () {
-          return _this14.props.onFilterChanged && _this14.props.onFilterChanged(filter);
+          return _this15.props.onFilterChanged && _this15.props.onFilterChanged(filter);
         });
       }
     }
   }, {
     key: "isFilterEmpty",
     value: function isFilterEmpty() {
-      var _this15 = this;
+      var _this16 = this;
       var someNotEmpty = Object.keys(this.state.filter).find(function (attr) {
-        return attr !== 'expertMode' && _this15.state.filter[attr];
+        return attr !== 'expertMode' && _this16.state.filter[attr];
       });
       return !someNotEmpty;
     }
@@ -3345,7 +3420,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterInput",
     value: function getFilterInput(name) {
-      var _this16 = this,
+      var _this17 = this,
         _this$filterRefs$name,
         _this$filterRefs$name2;
       return /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
@@ -3363,9 +3438,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         placeholder: this.texts["filter_".concat(name)],
         defaultValue: this.state.filter[name],
         onChange: function onChange() {
-          _this16.filterTimer && clearTimeout(_this16.filterTimer);
-          _this16.filterTimer = setTimeout(function () {
-            return _this16.onFilter();
+          _this17.filterTimer && clearTimeout(_this17.filterTimer);
+          _this17.filterTimer = setTimeout(function () {
+            return _this17.onFilter();
           }, 400);
         },
         autoComplete: "off"
@@ -3377,8 +3452,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         size: "small",
         onClick: function onClick() {
-          _this16.filterRefs[name].current.firstChild.value = '';
-          _this16.onFilter(name, '');
+          _this17.filterRefs[name].current.firstChild.value = '';
+          _this17.onFilter(name, '');
         }
       }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null))) : null);
     }
@@ -3391,7 +3466,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterSelect",
     value: function getFilterSelect(name, values) {
-      var _this17 = this,
+      var _this18 = this,
         _this$filterRefs$name3,
         _this$filterRefs$name4,
         _this$filterRefs$name5;
@@ -3408,9 +3483,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         ref: this.filterRefs[name],
         className: "".concat(this.props.classes.headerCellInput, " no-underline"),
         onChange: function onChange() {
-          _this17.filterTimer && clearTimeout(_this17.filterTimer);
-          _this17.filterTimer = setTimeout(function () {
-            return _this17.onFilter();
+          _this18.filterTimer && clearTimeout(_this18.filterTimer);
+          _this18.filterTimer = setTimeout(function () {
+            return _this18.onFilter();
           }, 400);
         },
         defaultValue: this.state.filter[name] || '',
@@ -3437,7 +3512,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           _name = item;
         }
         return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-          className: _this17.props.classes.headerCellSelectItem,
+          className: _this18.props.classes.headerCellSelectItem,
           key: id,
           value: id
         }, icon || (hasIcons ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -3448,15 +3523,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         size: "small",
         onClick: function onClick() {
-          var newFilter = _objectSpread({}, _this17.state.filter);
+          var newFilter = _objectSpread({}, _this18.state.filter);
           newFilter[name] = '';
-          _this17.filterRefs[name].current.childNodes[1].value = '';
-          (window._localStorage || window.localStorage).setItem("".concat(_this17.props.dialogName || 'App', ".objectFilter"), JSON.stringify(newFilter));
-          _this17.setState({
+          _this18.filterRefs[name].current.childNodes[1].value = '';
+          (window._localStorage || window.localStorage).setItem("".concat(_this18.props.dialogName || 'App', ".objectFilter"), JSON.stringify(newFilter));
+          _this18.setState({
             filter: newFilter,
-            filterKey: _this17.state.filterKey + 1
+            filterKey: _this18.state.filterKey + 1
           }, function () {
-            return _this17.props.onFilterChanged && _this17.props.onFilterChanged(newFilter);
+            return _this18.props.onFilterChanged && _this18.props.onFilterChanged(newFilter);
           });
         }
       }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null))) : null);
@@ -3477,15 +3552,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterSelectRoom",
     value: function getFilterSelectRoom() {
-      var _this18 = this;
+      var _this19 = this;
       var rooms = this.info.roomEnums.map(function (id) {
-        var _this18$objects$id, _this18$objects$id$co, _this18$objects$id2, _this18$objects$id2$c;
+        var _this19$objects$id, _this19$objects$id$co, _this19$objects$id2, _this19$objects$id2$c;
         return {
-          name: getName(((_this18$objects$id = _this18.objects[id]) === null || _this18$objects$id === void 0 ? void 0 : (_this18$objects$id$co = _this18$objects$id.common) === null || _this18$objects$id$co === void 0 ? void 0 : _this18$objects$id$co.name) || id.split('.').pop()),
+          name: getName(((_this19$objects$id = _this19.objects[id]) === null || _this19$objects$id === void 0 ? void 0 : (_this19$objects$id$co = _this19$objects$id.common) === null || _this19$objects$id$co === void 0 ? void 0 : _this19$objects$id$co.name) || id.split('.').pop()),
           value: id,
           icon: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-            src: ((_this18$objects$id2 = _this18.objects[id]) === null || _this18$objects$id2 === void 0 ? void 0 : (_this18$objects$id2$c = _this18$objects$id2.common) === null || _this18$objects$id2$c === void 0 ? void 0 : _this18$objects$id2$c.icon) || '',
-            className: _this18.props.classes.selectIcon
+            src: ((_this19$objects$id2 = _this19.objects[id]) === null || _this19$objects$id2 === void 0 ? void 0 : (_this19$objects$id2$c = _this19$objects$id2.common) === null || _this19$objects$id2$c === void 0 ? void 0 : _this19$objects$id2$c.icon) || '',
+            className: _this19.props.classes.selectIcon
           })
         };
       });
@@ -3498,15 +3573,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterSelectFunction",
     value: function getFilterSelectFunction() {
-      var _this19 = this;
+      var _this20 = this;
       var func = this.info.funcEnums.map(function (id) {
-        var _this19$objects$id, _this19$objects$id$co;
+        var _this20$objects$id, _this20$objects$id$co;
         return {
-          name: getName(_this19.objects[id] && _this19.objects[id].common && _this19.objects[id].common.name || id.split('.').pop()),
+          name: getName(_this20.objects[id] && _this20.objects[id].common && _this20.objects[id].common.name || id.split('.').pop()),
           value: id,
           icon: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-            src: ((_this19$objects$id = _this19.objects[id]) === null || _this19$objects$id === void 0 ? void 0 : (_this19$objects$id$co = _this19$objects$id.common) === null || _this19$objects$id$co === void 0 ? void 0 : _this19$objects$id$co.icon) || '',
-            className: _this19.props.classes.selectIcon
+            src: ((_this20$objects$id = _this20.objects[id]) === null || _this20$objects$id === void 0 ? void 0 : (_this20$objects$id$co = _this20$objects$id.common) === null || _this20$objects$id$co === void 0 ? void 0 : _this20$objects$id$co.icon) || '',
+            className: _this20.props.classes.selectIcon
           })
         };
       });
@@ -3535,15 +3610,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "getFilterSelectCustoms",
     value: function getFilterSelectCustoms() {
-      var _this20 = this;
+      var _this21 = this;
       if (this.info.customs.length) {
         var customs = this.info.customs.map(function (id) {
           return {
             name: id,
             value: id,
             icon: /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-              src: getSelectIdIcon(_this20.objects, id, _this20.imagePrefix) || '',
-              className: _this20.props.classes.selectIcon
+              src: getSelectIdIcon(_this21.objects, id, _this21.imagePrefix) || '',
+              className: _this21.props.classes.selectIcon
             })
           };
         });
@@ -3560,13 +3635,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onExpandAll",
     value: function onExpandAll(root, expanded) {
-      var _this21 = this;
+      var _this22 = this;
       root = root || this.root;
       expanded = expanded || [];
       root.children && root.children.forEach(function (item) {
         if (item.data.sumVisibility) {
           expanded.push(item.data.id);
-          _this21.onExpandAll(item, expanded);
+          _this22.onExpandAll(item, expanded);
         }
       });
       if (root === this.root) {
@@ -3584,7 +3659,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onCollapseAll",
     value: function onCollapseAll() {
-      var _this22 = this;
+      var _this23 = 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({
@@ -3592,7 +3667,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         depth: 0,
         selected: []
       }, function () {
-        return _this22.onAfterSelect();
+        return _this23.onAfterSelect();
       });
     }
 
@@ -3605,7 +3680,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "expandDepth",
     value: function expandDepth(root, depth, expanded) {
-      var _this23 = this;
+      var _this24 = this;
       root = root || this.root;
       if (depth > 0) {
         if (root.children) {
@@ -3616,7 +3691,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                 expanded.sort();
               }
               if (depth - 1 > 0) {
-                _this23.expandDepth(item, depth - 1, expanded);
+                _this24.expandDepth(item, depth - 1, expanded);
               }
             }
           });
@@ -3677,11 +3752,6 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         });
       }
     }
-
-    /**
-     * @private
-     * @param {string} id
-     */
   }, {
     key: "_getSelectedIdsForExport",
     value: function _getSelectedIdsForExport() {
@@ -3708,17 +3778,17 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "_exportObjects",
     value: function _exportObjects(isAll) {
-      var _this24 = this;
+      var _this25 = 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(_this24.objects[key]));
+          result[key] = JSON.parse(JSON.stringify(_this25.objects[key]));
           // add enum information
           if (result[key].common) {
-            var enums = _this24.getEnumsForId(key);
+            var enums = _this25.getEnumsForId(key);
             if (enums) {
               result[key].common.enums = enums;
             }
@@ -3732,7 +3802,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderExportDialog",
     value: function renderExportDialog() {
-      var _this25 = this;
+      var _this26 = this;
       if (this.state.showExportDialog === false) {
         return null;
       }
@@ -3742,10 +3812,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         color: "grey",
         variant: "outlined",
         onClick: function onClick() {
-          return _this25.setState({
+          return _this26.setState({
             showExportDialog: false
           }, function () {
-            return _this25._exportObjects(true);
+            return _this26._exportObjects(true);
           });
         }
       }, this.props.t('ra_All objects'), " (", Object.keys(this.objects).length, ")"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -3753,28 +3823,23 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         variant: "contained",
         autoFocus: true,
         onClick: function onClick() {
-          return _this25.setState({
+          return _this26.setState({
             showExportDialog: false
           }, function () {
-            return _this25._exportObjects(false);
+            return _this26._exportObjects(false);
           });
         }
       }, this.props.t('ra_Only selected'), " (", this.state.showExportDialog, ")"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
         color: "grey",
         variant: "contained",
         onClick: function onClick() {
-          return _this25.setState({
+          return _this26.setState({
             showExportDialog: false
           });
         },
         startIcon: /*#__PURE__*/_react["default"].createElement(_Close["default"], null)
       }, this.props.t('ra_Cancel'))));
     }
-
-    /**
-     * @private
-     * @param {object} evt
-     */
   }, {
     key: "getToolbar",
     value:
@@ -3783,7 +3848,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element}
      */
     function getToolbar() {
-      var _this26 = this;
+      var _this27 = this;
       var allowObjectCreation = false;
       if (this.state.selected.length || this.state.selectedNonObject) {
         var id = this.state.selected[0] || this.state.selectedNonObject;
@@ -3808,95 +3873,139 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           alignItems: 'center'
         }
       }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        title: this.props.t('ra_Refresh tree')
+        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"], {
         onClick: function onClick() {
-          return _this26.refreshComponent();
+          return _this27.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"], {
-        title: this.props.t('ra_expertMode')
+        title: this.props.t('ra_expertMode'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         key: "expertMode",
         color: this.state.filter.expertMode ? 'secondary' : 'default',
         onClick: function onClick() {
-          return _this26.onFilter('expertMode', !_this26.state.filter.expertMode);
+          return _this27.onFilter('expertMode', !_this27.state.filter.expertMode);
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(_IconExpert["default"], null))), !this.props.disableColumnSelector && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        title: this.props.t('ra_Configure')
+        title: this.props.t('ra_Configure'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-        key: "columnSelector"
-        // color={this.state.columnsAuto ? 'primary' : 'default'}
-        ,
+        key: "columnSelector",
+        color: this.state.columnsAuto ? 'primary' : 'default',
         onClick: function onClick() {
-          return _this26.setState({
+          return _this27.setState({
             columnsSelectorShow: true
           });
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(_ViewColumn["default"], null))), this.state.expandAllVisible && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        title: this.props.t('ra_Expand all nodes')
+        title: this.props.t('ra_Expand all nodes'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         key: "expandAll",
         onClick: function onClick() {
-          return _this26.onExpandAll();
+          return _this27.onExpandAll();
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(_IconOpen["default"], null))), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        title: this.props.t('ra_Collapse all nodes')
+        title: this.props.t('ra_Collapse all nodes'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         key: "collapseAll",
         onClick: function onClick() {
-          return _this26.onCollapseAll();
+          return _this27.onCollapseAll();
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], null))), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        title: this.props.t('ra_Expand one step node')
+        title: this.props.t('ra_Expand one step node'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         key: "expandVisible",
         color: "primary",
         onClick: function onClick() {
-          return _this26.onExpandVisible();
+          return _this27.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"], {
-        title: this.props.t('ra_Collapse one step node')
+        title: this.props.t('ra_Collapse one step node'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         key: "collapseVisible",
         color: "primary",
         onClick: function onClick() {
-          return _this26.onCollapseVisible();
+          return _this27.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"], {
-        title: this.props.t('ra_Toggle the states view')
+        title: this.props.t('ra_Toggle the states view'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         onClick: function onClick() {
-          return _this26.onStatesViewVisible();
+          return _this27.onStatesViewVisible();
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(_LooksOne["default"], {
         color: this.state.statesView ? 'primary' : 'inherit'
+      }))), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        title: this.props.t('ra_Show/Hide object descriptions'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        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
+          });
+        },
+        size: "large"
+      }, /*#__PURE__*/_react["default"].createElement(_TextFields["default"], {
+        color: this.state.showDescription ? 'primary' : 'inherit'
       }))), this.props.objectAddBoolean ? /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        title: this.toolTipObjectCreating()
+        title: this.toolTipObjectCreating(),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         disabled: !allowObjectCreation,
         onClick: function onClick() {
-          return _this26.setState({
+          return _this27.setState({
             modalNewObj: true
           });
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(_Add["default"], null)))) : null, this.props.objectImportExport && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        title: this.props.t('ra_Add objects tree from JSON file')
+        title: this.props.t('ra_Add objects tree from JSON file'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         onClick: function onClick() {
           var input = document.createElement('input');
@@ -3904,17 +4013,20 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           input.setAttribute('id', 'files');
           input.setAttribute('opacity', 0);
           input.addEventListener('change', function (e) {
-            return _this26.handleJsonUpload(e);
+            return _this27.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"], {
-        title: this.props.t('ra_Save objects tree as JSON file')
+        title: this.props.t('ra_Save objects tree as JSON file'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         onClick: function onClick() {
-          return _this26.setState({
-            showExportDialog: _this26._getSelectedIdsForExport().length
+          return _this27.setState({
+            showExportDialog: _this27._getSelectedIdsForExport().length
           });
         },
         size: "large"
@@ -3928,25 +4040,28 @@ 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 _this26.info.objects[el].type === 'state';
+        return _this27.info.objects[el].type === 'state';
       }).length)), this.props.objectEditBoolean && /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        title: this.props.t('ra_Edit custom config')
+        title: this.props.t('ra_Edit custom config'),
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         onClick: function onClick() {
           // get all visible states
-          var ids = getVisibleItems(_this26.root, 'state', _this26.objects);
+          var ids = getVisibleItems(_this27.root, 'state', _this27.objects);
           if (ids.length) {
-            _this26.pauseSubscribe(true);
+            _this27.pauseSubscribe(true);
             if (ids.length === 1) {
-              (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]);
+              (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]);
             }
-            _this26.setState({
+            _this27.setState({
               customDialog: ids
             });
           } else {
-            _this26.setState({
-              toast: _this26.props.t('ra_please select object')
+            _this27.setState({
+              toast: _this27.props.t('ra_please select object')
             });
           }
         },
@@ -4005,7 +4120,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @param {{ cellButtonsButton: string | undefined; cellButtonsButtonAlone: any; cellButtonsButtonIcon: string | undefined; cellButtonsButtonWithCustoms: any; }} classes
      */
     function renderColumnButtons(id, item, classes) {
-      var _this27 = this,
+      var _this28 = this,
         _item$children2,
         _item$data$obj$common,
         _item$data$obj$common3;
@@ -4015,7 +4130,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }, this.state.filter.expertMode && this.props.objectEditOfAccessControl ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           className: _Utils["default"].clsx(classes.cellButtonsButton, classes.cellButtonsEmptyButton, classes.cellButtonMinWidth),
           onClick: function onClick() {
-            return _this27.setState({
+            return _this28.setState({
               modalEditOfAccess: true,
               modalEditOfAccessObjData: item.data
             });
@@ -4028,7 +4143,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           title: this.texts.deleteObject,
           onClick: function onClick() {
             // calculate number of children
-            var keys = Object.keys(_this27.objects);
+            var keys = Object.keys(_this28.objects);
             keys.sort();
             var count = 0;
             var start = "".concat(id, ".");
@@ -4039,7 +4154,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                 break;
               }
             }
-            _this27.props.onObjectDelete(id, !!(item.children && item.children.length), false, count + 1);
+            _this28.props.onObjectDelete(id, !!(item.children && item.children.length), false, count + 1);
           }
         }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
           className: classes.cellButtonsButtonIcon
@@ -4050,11 +4165,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       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"], {
         key: "acl",
-        title: item.data.aclTooltip
+        title: item.data.aclTooltip,
+        classes: {
+          popper: this.props.classes.tooltip
+        }
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         className: classes.cellButtonMinWidth,
         onClick: function onClick() {
-          return _this27.setState({
+          return _this28.setState({
             modalEditOfAccess: true,
             modalEditOfAccessObjData: item.data
           });
@@ -4072,8 +4190,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         "aria-label": "edit",
         title: this.texts.editObject,
         onClick: function onClick() {
-          (window._localStorage || window.localStorage).setItem("".concat(_this27.props.dialogName || 'App', ".objectSelected"), id);
-          _this27.setState({
+          (window._localStorage || window.localStorage).setItem("".concat(_this28.props.dialogName || 'App', ".objectSelected"), id);
+          _this28.setState({
             editObjectDialog: id
           });
         }
@@ -4086,7 +4204,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         "aria-label": "delete",
         onClick: function onClick() {
           var _item$children3, _item$data$obj$common2;
-          var keys = Object.keys(_this27.objects);
+          var keys = Object.keys(_this28.objects);
           keys.sort();
           var count = 0;
           var start = "".concat(id, ".");
@@ -4097,7 +4215,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
               break;
             }
           }
-          _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);
+          _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);
         },
         title: this.texts.deleteObject
       }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
@@ -4109,10 +4227,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         "aria-label": "config",
         title: this.texts.customConfig,
         onClick: function onClick() {
-          (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({
+          (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({
             customDialog: [id]
           });
         }
@@ -4186,7 +4304,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     key: "renderColumnValue",
     value: function renderColumnValue(id, item, classes) {
       var _obj$common4,
-        _this28 = this;
+        _this29 = this;
       var obj = item.data.obj;
       if (!obj || !this.states) {
         return null;
@@ -4213,7 +4331,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         item.data.state = item.data.state || formatValue(id, state, obj, this.texts, this.props.dateFormat, this.props.isFloatComma);
         info = item.data.state;
         info.valFull = info.valFull.map(function (_item) {
-          if (_item.t === _this28.texts.quality && state.q) {
+          if (_item.t === _this29.texts.quality && state.q) {
             return [/*#__PURE__*/_react["default"].createElement("div", {
               className: classes.cellValueTooltipBoth,
               key: _item.t
@@ -4260,7 +4378,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 _this28.onCopy(e, copyText);
+            return _this29.onCopy(e, copyText);
           },
           key: "cc"
         })
@@ -4282,7 +4400,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           popper: this.props.classes.cellValueTooltipBox
         },
         onOpen: function onOpen() {
-          return _this28.readHistory(id);
+          return _this29.readHistory(id);
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: info.style,
@@ -4298,7 +4416,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     key: "_syncEnum",
     value: function _syncEnum(id, enumIds, newArray, cb) {
       var _this$info$objects$en,
-        _this29 = this;
+        _this30 = this;
       if (!enumIds || !enumIds.length) {
         cb && cb();
         return;
@@ -4314,9 +4432,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 _this29.info.objects[enumId] = obj;
+              return _this30.info.objects[enumId] = obj;
             })["catch"](function (e) {
-              return _this29.showError(e);
+              return _this30.showError(e);
             }));
           }
         }
@@ -4329,15 +4447,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 _this29.info.objects[enumId] = _obj;
+            return _this30.info.objects[enumId] = _obj;
           })["catch"](function (e) {
-            return _this29.showError(e);
+            return _this30.showError(e);
           }));
         }
       }
       Promise.all(promises).then(function () {
         return setTimeout(function () {
-          return _this29._syncEnum(id, enumIds, newArray, cb);
+          return _this30._syncEnum(id, enumIds, newArray, cb);
         }, 0);
       });
     }
@@ -4349,11 +4467,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "syncEnum",
     value: function syncEnum(id, enumName, newArray) {
-      var _this30 = this;
+      var _this31 = this;
       var toCheck = (0, _toConsumableArray2["default"])(this.info[enumName === 'func' ? 'funcEnums' : 'roomEnums']);
       return new Promise(function (resolve) {
-        _this30._syncEnum(id, toCheck, newArray, function (error) {
-          error && _this30.showError(error);
+        _this31._syncEnum(id, toCheck, newArray, function (error) {
+          error && _this31.showError(error);
           // force update of object
           resolve();
         });
@@ -4367,7 +4485,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderEnumDialog",
     value: function renderEnumDialog() {
-      var _this31 = this;
+      var _this32 = this;
       if (this.state.enumDialog) {
         var type = this.state.enumDialog.type;
         var item = this.state.enumDialog.item;
@@ -4375,9 +4493,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(_this31.objects[id] && _this31.objects[id].common && _this31.objects[id].common.name || id.split('.').pop(), _this31.props.lang),
+            name: getName(_this32.objects[id] && _this32.objects[id].common && _this32.objects[id].common.name || id.split('.').pop(), _this32.props.lang),
             value: id,
-            icon: getSelectIdIcon(_this31.objects, id, _this31.imagePrefix)
+            icon: getSelectIdIcon(_this32.objects, id, _this32.imagePrefix)
           };
         }).sort(function (a, b) {
           return a.name > b.name ? 1 : -1;
@@ -4385,10 +4503,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: _this31.props.classes.enumIconDiv
+              className: _this32.props.classes.enumIconDiv
             }, /*#__PURE__*/_react["default"].createElement("img", {
               src: _item.icon,
-              className: _this31.props.classes.enumIcon,
+              className: _this32.props.classes.enumIcon,
               alt: _item.name
             }));
           }
@@ -4399,7 +4517,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
           className: this.props.classes.enumDialog,
           onClose: function onClose() {
-            return _this31.setState({
+            return _this32.setState({
               enumDialog: null
             });
           },
@@ -4413,8 +4531,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           disabled: JSON.stringify(enumsOriginal) === JSON.stringify(itemEnums),
           size: "small",
           onClick: function onClick() {
-            return _this31.syncEnum(item.data.id, type, itemEnums).then(function () {
-              return _this31.setState({
+            return _this32.syncEnum(item.data.id, type, itemEnums).then(function () {
+              return _this32.setState({
                 enumDialog: null,
                 enumDialogEnums: null
               });
@@ -4438,24 +4556,24 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           }
           var labelId = "checkbox-list-label-".concat(id);
           return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-            className: _this31.props.classes.headerCellSelectItem,
+            className: _this32.props.classes.headerCellSelectItem,
             key: id,
             onClick: function onClick() {
               var pos = itemEnums.indexOf(id);
-              var enumDialogEnums = JSON.parse(JSON.stringify(_this31.state.enumDialogEnums));
+              var enumDialogEnums = JSON.parse(JSON.stringify(_this32.state.enumDialogEnums));
               if (pos === -1) {
                 enumDialogEnums.push(id);
                 enumDialogEnums.sort();
               } else {
                 enumDialogEnums.splice(pos, 1);
               }
-              _this31.setState({
+              _this32.setState({
                 enumDialogEnums: enumDialogEnums
               });
             }
           }, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], {
             classes: {
-              root: _this31.props.classes.enumCheckbox
+              root: _this32.props.classes.enumCheckbox
             }
           }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
             edge: "start",
@@ -4480,7 +4598,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderEditRoleDialog",
     value: function renderEditRoleDialog() {
-      var _this32 = this;
+      var _this33 = this;
       if (this.state.roleDialog && this.props.objectBrowserEditRole) {
         var ObjectBrowserEditRole = this.props.objectBrowserEditRole;
         return /*#__PURE__*/_react["default"].createElement(ObjectBrowserEditRole, {
@@ -4491,9 +4609,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           roles: this.info.roles,
           onClose: function onClose(obj) {
             if (obj) {
-              _this32.info.objects[_this32.state.roleDialog] = obj;
+              _this33.info.objects[_this33.state.roleDialog] = obj;
             }
-            _this32.setState({
+            _this33.setState({
               roleDialog: false
             });
           }
@@ -4509,7 +4627,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onColumnsEditCustomDialogClose",
     value: function onColumnsEditCustomDialogClose(isSave) {
-      var _this33 = this;
+      var _this34 = this;
       if (isSave) {
         var value = this.customColumnDialog.value;
         if (this.customColumnDialog.type === 'boolean') {
@@ -4519,16 +4637,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, _this33.state.columnsEditCustomDialog.it, value)) {
-            return _this33.props.socket.setObject(obj._id, obj);
+          if (ObjectBrowser.setCustomValue(obj, _this34.state.columnsEditCustomDialog.it, value)) {
+            return _this34.props.socket.setObject(obj._id, obj);
           }
-          throw new Error(_this33.props.t('ra_Cannot update attribute, because not found in the object'));
+          throw new Error(_this34.props.t('ra_Cannot update attribute, because not found in the object'));
         }).then(function () {
-          return _this33.setState({
+          return _this34.setState({
             columnsEditCustomDialog: null
           });
         })["catch"](function (e) {
-          return _this33.showError(e);
+          return _this34.showError(e);
         });
       } else {
         this.customColumnDialog = null;
@@ -4544,7 +4662,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColumnsEditCustomDialog",
     value: function renderColumnsEditCustomDialog() {
-      var _this34 = this;
+      var _this35 = this;
       if (this.state.columnsEditCustomDialog) {
         if (!this.customColumnDialog) {
           var value = ObjectBrowser.getCustomValue(this.state.columnsEditCustomDialog.obj, this.state.columnsEditCustomDialog.it);
@@ -4556,7 +4674,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
         return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
           onClose: function onClose() {
-            return _this34.setState({
+            return _this35.setState({
               columnsEditCustomDialog: null
             });
           },
@@ -4570,14 +4688,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }, this.customColumnDialog.type === 'boolean' ? /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
           control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
             onKeyUp: function onKeyUp(e) {
-              return e.keyCode === 13 && _this34.onColumnsEditCustomDialogClose(true);
+              return e.keyCode === 13 && _this35.onColumnsEditCustomDialogClose(true);
             },
             defaultChecked: this.customColumnDialog.value === 'true',
             onChange: function onChange(e) {
-              _this34.customColumnDialog.value = e.target.checked.toString();
-              var changed = _this34.customColumnDialog.value !== _this34.customColumnDialog.initValue;
-              if (changed === !_this34.state.customColumnDialogValueChanged) {
-                _this34.setState({
+              _this35.customColumnDialog.value = e.target.checked.toString();
+              var changed = _this35.customColumnDialog.value !== _this35.customColumnDialog.initValue;
+              if (changed === !_this35.state.customColumnDialogValueChanged) {
+                _this35.setState({
                   customColumnDialogValueChanged: changed
                 });
               }
@@ -4589,14 +4707,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           defaultValue: this.customColumnDialog.value,
           fullWidth: true,
           onKeyUp: function onKeyUp(e) {
-            return e.keyCode === 13 && _this34.onColumnsEditCustomDialogClose(true);
+            return e.keyCode === 13 && _this35.onColumnsEditCustomDialogClose(true);
           },
           label: "".concat(this.state.columnsEditCustomDialog.it.name, " (").concat(this.state.columnsEditCustomDialog.it.pathText, ")"),
           onChange: function onChange(e) {
-            _this34.customColumnDialog.value = e.target.value;
-            var changed = _this34.customColumnDialog.value !== _this34.customColumnDialog.initValue;
-            if (changed === !_this34.state.customColumnDialogValueChanged) {
-              _this34.setState({
+            _this35.customColumnDialog.value = e.target.value;
+            var changed = _this35.customColumnDialog.value !== _this35.customColumnDialog.initValue;
+            if (changed === !_this35.state.customColumnDialogValueChanged) {
+              _this35.setState({
                 customColumnDialogValueChanged: changed
               });
             }
@@ -4605,7 +4723,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }))), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           variant: "contained",
           onClick: function onClick() {
-            return _this34.onColumnsEditCustomDialogClose(true);
+            return _this35.onColumnsEditCustomDialogClose(true);
           },
           disabled: !this.state.customColumnDialogValueChanged,
           color: "primary",
@@ -4614,7 +4732,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           color: "grey",
           variant: "contained",
           onClick: function onClick() {
-            return _this34.onColumnsEditCustomDialogClose();
+            return _this35.onColumnsEditCustomDialogClose();
           },
           startIcon: /*#__PURE__*/_react["default"].createElement(_Close["default"], null)
         }, this.props.t('ra_Cancel'))));
@@ -4638,14 +4756,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element | null}
      */
     function renderCustomValue(obj, it, item) {
-      var _this35 = this;
+      var _this36 = 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 _this35.setState({
+              return _this36.setState({
                 columnsEditCustomDialog: {
                   item: item,
                   it: it,
@@ -4674,7 +4792,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderLeaf",
     value: function renderLeaf(item, isExpanded, classes, counter) {
-      var _this36 = this,
+      var _this37 = this,
         _common$alias,
         _common$alias2,
         _this$states$id2,
@@ -4695,12 +4813,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         iconFolder = isExpanded ? /*#__PURE__*/_react["default"].createElement(_IconOpen["default"], {
           className: classes.cellIdIconFolder,
           onClick: function onClick() {
-            return _this36.toggleExpanded(id);
+            return _this37.toggleExpanded(id);
           }
         }) : /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], {
           className: classes.cellIdIconFolder,
           onClick: function onClick() {
-            return _this36.toggleExpanded(id);
+            return _this37.toggleExpanded(id);
           }
         });
       } else if (obj.common && obj.common.write === false && obj.type === 'state') {
@@ -4735,18 +4853,18 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         className: "itemIcon"
       });
       var paddingLeft = this.levelPadding * item.data.level;
-      if (item.data.lang !== this.state.lang) {
-        var _findRoomsForObject = findRoomsForObject(this.info, id, this.state.lang),
+      if (item.data.lang !== this.props.lang) {
+        var _findRoomsForObject = findRoomsForObject(this.info, id, this.props.lang),
           rooms = _findRoomsForObject.rooms,
           per = _findRoomsForObject.per;
         item.data.rooms = rooms.join(', ');
         item.data.per = per;
-        var _findFunctionsForObje = findFunctionsForObject(this.info, id, this.state.lang),
+        var _findFunctionsForObje = findFunctionsForObject(this.info, id, this.props.lang),
           funcs = _findFunctionsForObje.funcs,
           pef = _findFunctionsForObje.pef;
         item.data.funcs = funcs.join(', ');
         item.data.pef = pef;
-        item.data.lang = this.state.lang;
+        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"], {
         className: classes.checkBox,
@@ -4787,10 +4905,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick(e) {
           e.stopPropagation();
           e.preventDefault();
-          _this36.onSelect(common.alias.id.read);
+          _this37.onSelect(common.alias.id.read);
           setTimeout(function () {
-            _this36.expandAllSelected(function () {
-              return _this36.scrollToItem(common.alias.id.read);
+            _this37.expandAllSelected(function () {
+              return _this37.scrollToItem(common.alias.id.read);
             });
           }, 100);
         },
@@ -4799,10 +4917,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick(e) {
           e.stopPropagation();
           e.preventDefault();
-          _this36.onSelect(common.alias.id.write);
+          _this37.onSelect(common.alias.id.write);
           setTimeout(function () {
-            _this36.expandAllSelected(function () {
-              return _this36.scrollToItem(common.alias.id.write);
+            _this37.expandAllSelected(function () {
+              return _this37.scrollToItem(common.alias.id.write);
             });
           }, 100);
         },
@@ -4811,10 +4929,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick(e) {
           e.stopPropagation();
           e.preventDefault();
-          _this36.onSelect(common.alias.id);
+          _this37.onSelect(common.alias.id);
           setTimeout(function () {
-            _this36.expandAllSelected(function () {
-              return _this36.scrollToItem(common.alias.id);
+            _this37.expandAllSelected(function () {
+              return _this37.scrollToItem(common.alias.id);
             });
           }, 100);
         },
@@ -4846,17 +4964,17 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             _id = "".concat(id, ".").concat(_id);
           }
           ids[name] = _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] = {
+          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] = {
                 val: null
               };
-              _this36.subscribe(_id);
+              _this37.subscribe(_id);
             }
           } else {
-            !_this36.recordStates.includes(_id) && _this36.recordStates.push(_id);
+            !_this37.recordStates.includes(_id) && _this37.recordStates.push(_id);
           }
         });
         // calculate color
@@ -4934,6 +5052,21 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
       }
       var q = checkVisibleObjectType ? _Utils["default"].quality2text(((_this$states$id2 = this.states[id]) === null || _this$states$id2 === void 0 ? void 0 : _this$states$id2.q) || 0).join(', ') : null;
+      var name = ((_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.title) || '';
+      var useDesc;
+      if (this.state.showDescription) {
+        useDesc = getObjectTooltip(item.data, this.props.lang);
+        if (useDesc) {
+          name = [/*#__PURE__*/_react["default"].createElement("div", {
+            key: "name",
+            className: classes.cellNameDivDiv
+          }, name), /*#__PURE__*/_react["default"].createElement("div", {
+            key: "desc",
+            className: classes.cellDescription
+          }, useDesc)];
+          useDesc = !!useDesc;
+        }
+      }
       return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         container: true,
         direction: "row",
@@ -4942,13 +5075,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         key: id,
         id: id,
         onClick: function onClick() {
-          return _this36.onSelect(id);
+          return _this37.onSelect(id);
         },
         onDoubleClick: function onDoubleClick() {
           if (!item.children) {
-            _this36.onSelect(id, true);
+            _this37.onSelect(id, true);
           } else {
-            _this36.toggleExpanded(id);
+            _this37.toggleExpanded(id);
           }
         }
       }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
@@ -4975,7 +5108,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         },
         className: _Utils["default"].clsx(classes.cellIdSpan, invertBackground && classes.invertedBackground)
       }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        title: getIdFieldTooltip(item.data, this.props.classes, this.props.lang)
+        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"], {
@@ -4985,21 +5121,21 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, 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 _this36.onCopy(e, id);
+          return _this37.onCopy(e, id);
         }
       }))), this.columnsVisibility.name ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.cellName,
+        className: _Utils["default"].clsx(classes.cellName, useDesc && classes.cellNameWithDesc),
         style: {
           width: this.columnsVisibility.name
         }
-      }, ((_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.title) || '', (_item$data2 = item.data) !== null && _item$data2 !== void 0 && _item$data2.title ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, name, (_item$data2 = item.data) !== null && _item$data2 !== void 0 && _item$data2.title ? /*#__PURE__*/_react["default"].createElement("div", {
         style: {
           color: checkColor
         }
       }, /*#__PURE__*/_react["default"].createElement(_IconCopy["default"], {
         className: _Utils["default"].clsx(classes.cellCopyButton, 'copyButton'),
         onClick: function onClick(e) {
-          return _this36.onCopy(e, item.data.title);
+          return _this37.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,
@@ -5013,7 +5149,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 _this36.setState({
+          return _this37.setState({
             roleDialog: item.data.id
           });
         } : undefined
@@ -5024,8 +5160,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           cursor: enumEditable ? 'text' : 'default'
         },
         onClick: enumEditable ? function () {
-          var enums = findEnumsForObjectAsIds(_this36.info, item.data.id, 'roomEnums');
-          _this36.setState({
+          var enums = findEnumsForObjectAsIds(_this37.info, item.data.id, 'roomEnums');
+          _this37.setState({
             enumDialogEnums: enums,
             enumDialog: {
               item: item,
@@ -5041,8 +5177,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           cursor: enumEditable ? 'text' : 'default'
         },
         onClick: enumEditable ? function () {
-          var enums = findEnumsForObjectAsIds(_this36.info, item.data.id, 'funcEnums');
-          _this36.setState({
+          var enums = findEnumsForObjectAsIds(_this37.info, item.data.id, 'funcEnums');
+          _this37.setState({
             enumDialogEnums: enums,
             enumDialog: {
               item: item,
@@ -5077,11 +5213,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.cellAdapter,
           style: {
-            width: _this36.columnsVisibility[it.id]
+            width: _this37.columnsVisibility[it.id]
           },
           key: it.id,
           title: "".concat(it.adapter, " => ").concat(it.pathText)
-        }, _this36.renderCustomValue(obj, it, item));
+        }, _this37.renderCustomValue(obj, it, item));
       }), this.columnsVisibility.val ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cellValue,
         style: {
@@ -5089,26 +5225,26 @@ 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 || !_this36.states) {
+          if (!obj || !_this37.states) {
             // return;
           } else if ((common === null || common === void 0 ? void 0 : common.type) === 'file') {
-            _this36.setState({
+            _this37.setState({
               viewFileDialog: id
             });
           } else
             // in non-expert mode control button directly
-            if (!_this36.state.filter.expertMode && item.data.button) {
-              _this36.props.socket.setState(id, true)["catch"](function (e) {
+            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 {
-              _this36.edit = {
-                val: _this36.states[id] ? _this36.states[id].val : '',
-                q: _this36.states[id] ? _this36.states[id].q || 0 : 0,
+              _this37.edit = {
+                val: _this37.states[id] ? _this37.states[id].val : '',
+                q: _this37.states[id] ? _this37.states[id].q || 0 : 0,
                 ack: false,
                 id: id
               };
-              _this36.setState({
+              _this37.setState({
                 updateOpened: true
               });
             }
@@ -5132,7 +5268,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderItem",
     value: function renderItem(root, isExpanded, classes, counter) {
-      var _this37 = this;
+      var _this38 = this;
       var items = [];
       counter = counter || {
         count: 0
@@ -5160,9 +5296,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 (!_this37.state.columnsSelectorShow || counter.count < 15) {
+            if (!_this38.state.columnsSelectorShow || counter.count < 15) {
               if (item.data.sumVisibility) {
-                return _this37.renderItem(item, undefined, classes, counter);
+                return _this38.renderItem(item, undefined, classes, counter);
               }
             }
             return null;
@@ -5172,9 +5308,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 (!_this37.state.columnsSelectorShow || counter.count < 15) {
+              if (!_this38.state.columnsSelectorShow || counter.count < 15) {
                 if (item.data.sumVisibility) {
-                  return _this37.renderItem(item, undefined, classes, counter);
+                  return _this38.renderItem(item, undefined, classes, counter);
                 }
               }
             }
@@ -5184,9 +5320,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 (!_this37.state.columnsSelectorShow || counter.count < 15) {
+              if (!_this38.state.columnsSelectorShow || counter.count < 15) {
                 if (item.data.sumVisibility) {
-                  return _this37.renderItem(item, undefined, classes, counter);
+                  return _this38.renderItem(item, undefined, classes, counter);
                 }
               }
             }
@@ -5207,7 +5343,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "calculateColumnsVisibility",
     value: function calculateColumnsVisibility(columnsAuto, columns, columnsForAdmin, columnsWidths) {
-      var _this38 = this;
+      var _this39 = this;
       columnsWidths = columnsWidths || this.state.columnsWidths;
       columnsForAdmin = columnsForAdmin || this.state.columnsForAdmin;
       columns = columns || this.state.columns || [];
@@ -5291,7 +5427,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);
-              _this38.columnsVisibility[id] = columns.includes(id);
+              _this39.columnsVisibility[id] = columns.includes(id);
               if (columns.includes(id)) {
                 var item = {
                   adapter: adapter,
@@ -5309,11 +5445,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                     item.objTypes = column.objTypes;
                   }
                 }
-                _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];
+                _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];
               } else {
-                _this38.columnsVisibility[id] = 0;
+                _this39.columnsVisibility[id] = 0;
               }
             });
           });
@@ -5334,10 +5470,10 @@ 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 _this38.columnsVisibility[name] === 'string' || !_this38.columnsVisibility[name]) {
+            if (name === 'id' || typeof _this39.columnsVisibility[name] === 'string' || !_this39.columnsVisibility[name]) {
               return accumulator;
             }
-            return accumulator + _this38.columnsVisibility[name];
+            return accumulator + _this39.columnsVisibility[name];
           }, 0);
           this.columnsVisibility.id = "calc(100% - ".concat(newWidth, "px)");
         }
@@ -5351,13 +5487,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element}
      */
     function renderHeader() {
-      var _this39 = this;
+      var _this40 = this;
       var classes = this.props.classes;
       var filterClearInValue = null;
       if (!this.columnsVisibility.buttons && !this.isFilterEmpty()) {
         filterClearInValue = /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           onClick: function onClick() {
-            return _this39.clearFilter();
+            return _this40.clearFilter();
           },
           className: classes.buttonClearFilter,
           title: this.props.t('ra_Clear filter'),
@@ -5448,7 +5584,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
           style: {
-            width: _this39.columnsVisibility[item.id]
+            width: _this40.columnsVisibility[item.id]
           },
           title: item.adapter,
           key: item.id,
@@ -5484,17 +5620,17 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderToast",
     value: function renderToast() {
-      var _this40 = this;
+      var _this41 = this;
       return /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
         open: !!this.state.toast,
         autoHideDuration: 3000,
         onClick: function onClick() {
-          return _this40.setState({
+          return _this41.setState({
             toast: ''
           });
         },
         onClose: function onClose() {
-          return _this40.setState({
+          return _this41.setState({
             toast: ''
           });
         },
@@ -5504,7 +5640,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           "aria-label": "close",
           color: "inherit",
           onClick: function onClick() {
-            return _this40.setState({
+            return _this41.setState({
               toast: ''
             });
           }
@@ -5520,12 +5656,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _this41 = this;
+      var _this42 = this;
       if (this.tableRef.current) {
         var scrollBarWidth = this.tableRef.current.offsetWidth - this.tableRef.current.clientWidth;
         if (this.state.scrollBarWidth !== scrollBarWidth) {
           setTimeout(function () {
-            return _this41.setState({
+            return _this42.setState({
               scrollBarWidth: scrollBarWidth
             });
           }, 100);
@@ -5553,12 +5689,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderCustomDialog",
     value: function renderCustomDialog() {
-      var _this42 = this;
+      var _this43 = this;
       if (this.state.customDialog && this.props.objectCustomDialog) {
         var ObjectCustomDialog = this.props.objectCustomDialog;
         return /*#__PURE__*/_react["default"].createElement(ObjectCustomDialog, {
           reportChangedIds: function reportChangedIds(changedIds) {
-            return _this42.changedIds = (0, _toConsumableArray2["default"])(changedIds);
+            return _this43.changedIds = (0, _toConsumableArray2["default"])(changedIds);
           },
           objectIDs: this.state.customDialog,
           expertMode: this.state.filter.expertMode,
@@ -5572,16 +5708,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           objects: this.objects,
           customsInstances: this.info.customs,
           onClose: function onClose() {
-            _this42.pauseSubscribe(false);
-            _this42.setState({
+            _this43.pauseSubscribe(false);
+            _this43.setState({
               customDialog: null
             });
-            if (_this42.changedIds) {
-              _this42.changedIds = null;
+            if (_this43.changedIds) {
+              _this43.changedIds = null;
               // update all changed IDs
-              _this42.forceUpdate();
+              _this43.forceUpdate();
             }
-            _this42.props.router && _this42.props.router.doNavigate('tab-objects');
+            _this43.props.router && _this43.props.router.doNavigate('tab-objects');
           }
         });
       }
@@ -5595,14 +5731,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onUpdate",
     value: function onUpdate(valAck) {
-      var _this43 = this;
+      var _this44 = 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 _this43.showError("Cannot write value: ".concat(e));
+        return _this44.showError("Cannot write value: ".concat(e));
       });
     }
 
@@ -5613,7 +5749,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderEditObjectDialog",
     value: function renderEditObjectDialog() {
-      var _this44 = this;
+      var _this45 = this;
       if (!this.state.editObjectDialog || !this.props.objectBrowserEditObject) {
         return null;
       }
@@ -5631,37 +5767,37 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         t: this.props.t,
         expertMode: this.state.filter.expertMode,
         onNewObject: function onNewObject(obj) {
-          return _this44.props.socket.setObject(obj._id, obj).then(function () {
-            return _this44.setState({
+          return _this45.props.socket.setObject(obj._id, obj).then(function () {
+            return _this45.setState({
               editObjectDialog: obj._id
             }, function () {
-              return _this44.onSelect(obj._id);
+              return _this45.onSelect(obj._id);
             });
           })["catch"](function (e) {
-            return _this44.showError("Cannot write object: ".concat(e));
+            return _this45.showError("Cannot write object: ".concat(e));
           });
         },
         onClose: function onClose(obj) {
           if (obj) {
             var updateAlias;
-            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;
+            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;
               }
             }
-            _this44.props.socket.setObject(obj._id, obj).then(function () {
-              if (updateAlias && _this44.subscribes.includes(updateAlias)) {
-                _this44.unsubscribe(updateAlias);
+            _this45.props.socket.setObject(obj._id, obj).then(function () {
+              if (updateAlias && _this45.subscribes.includes(updateAlias)) {
+                _this45.unsubscribe(updateAlias);
                 setTimeout(function () {
-                  return _this44.subscribe(updateAlias);
+                  return _this45.subscribe(updateAlias);
                 }, 100);
               }
             })["catch"](function (e) {
-              return _this44.showError("Cannot write object: ".concat(e));
+              return _this45.showError("Cannot write object: ".concat(e));
             });
           }
-          _this44.setState({
+          _this45.setState({
             editObjectDialog: ''
           });
         }
@@ -5675,7 +5811,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderViewObjectFileDialog",
     value: function renderViewObjectFileDialog() {
-      var _this45 = this;
+      var _this46 = this;
       if (!this.state.viewFileDialog || !this.props.objectBrowserViewFile) {
         return null;
       }
@@ -5689,7 +5825,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         t: this.props.t,
         expertMode: this.state.filter.expertMode,
         onClose: function onClose() {
-          return _this45.setState({
+          return _this46.setState({
             viewFileDialog: ''
           });
         }
@@ -5704,7 +5840,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     key: "renderEditValueDialog",
     value: function renderEditValueDialog() {
       var _this$objects$this$ed,
-        _this46 = this;
+        _this47 = this;
       if (!this.state.updateOpened || !this.props.objectBrowserValue) {
         return null;
       }
@@ -5731,10 +5867,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         defaultHistory: this.defaultHistory,
         dateFormat: this.props.dateFormat,
         onClose: function onClose(res) {
-          _this46.setState({
+          _this47.setState({
             updateOpened: false
           });
-          res && _this46.onUpdate(res);
+          res && _this47.onUpdate(res);
         }
       });
     }
@@ -5746,7 +5882,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element}
      */
     function render() {
-      var _this47 = this;
+      var _this48 = this;
       this.recordStates = [];
       this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer);
 
@@ -5756,16 +5892,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         var counter = {
           count: 0
         };
-        applyFilter(this.root, this.state.filter, this.state.lang, this.objects, null, counter, this.props.customFilter, this.props.types);
+        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 _this47.setState({
+            return _this48.setState({
               expandAllVisible: true
             });
           });
         } else if (counter.count >= 500 && this.state.expandAllVisible) {
           setTimeout(function () {
-            return _this47.setState({
+            return _this48.setState({
               expandAllVisible: false
             });
           });
@@ -5773,8 +5909,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         this.lastAppliedFilter = jsonFilter;
       }
       this.unsubscribeTimer = setTimeout(function () {
-        _this47.unsubscribeTimer = null;
-        _this47.checkUnsubscribes();
+        _this48.unsubscribeTimer = null;
+        _this48.checkUnsubscribes();
       }, 200);
       if (!this.state.loaded) {
         return /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], {