npm - @iobroker/adapter-react-v5 - Versions diffs - 4.0.14 → 4.0.15 - Mend

@iobroker/adapter-react-v5 4.0.14 → 4.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/Components/FileBrowser.js +2 -1
package/Components/FileBrowser.js.map +1 -1
package/Components/FileViewer.js +31 -19
package/Components/FileViewer.js.map +1 -1
package/Components/Icon.js +5 -5
package/Components/Icon.js.map +1 -1
package/Components/JsonConfigComponent/ConfigCoordinates.d.ts +1 -1
package/Components/JsonConfigComponent/ConfigCoordinates.js +112 -16
package/Components/JsonConfigComponent/ConfigCoordinates.js.map +1 -1
package/Components/JsonConfigComponent/ConfigGeneric.js +6 -1
package/Components/JsonConfigComponent/ConfigGeneric.js.map +1 -1
package/Components/JsonConfigComponent/ConfigTextSendTo.js +3 -3
package/Components/JsonConfigComponent/ConfigTextSendTo.js.map +1 -1
package/Components/ObjectBrowser.d.ts +4 -2
package/Components/ObjectBrowser.js +502 -371
package/Components/ObjectBrowser.js.map +1 -1
package/Components/Utils.js +1 -1
package/Components/Utils.js.map +1 -1
package/README.md +3 -0
package/i18n/de.json +7 -1
package/i18n/en.json +7 -1
package/i18n/es.json +7 -1
package/i18n/fr.json +7 -1
package/i18n/it.json +7 -1
package/i18n/nl.json +7 -1
package/i18n/pl.json +7 -1
package/i18n/pt.json +7 -1
package/i18n/ru.json +7 -1
package/i18n/uk.json +7 -1
package/i18n/zh-cn.json +7 -1
package/package.json +11 -11

package/Components/ObjectBrowser.js CHANGED Viewed

@@ -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 || {};
@@ -2451,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();
@@ -2471,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) {
@@ -2509,7 +2528,6 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       expandAllVisible: false,
       expanded: expanded,
       toast: '',
-      lang: props.lang,
       scrollBarWidth: 16,
       customDialog: customDialog,
       editObjectDialog: '',
@@ -2520,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 = {
@@ -2700,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),
@@ -2774,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 {
@@ -2958,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
           });
         },
@@ -3050,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
             });
           }
         }),
@@ -3062,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
           });
         },
@@ -3087,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 () {
@@ -3157,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') {
@@ -3203,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,
@@ -3266,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);
         });
       }
     }
@@ -3288,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;
             }
           }
@@ -3312,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 = '';
@@ -3339,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;
     }
@@ -3360,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"], {
@@ -3378,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"
@@ -3392,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);
     }
@@ -3406,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;
@@ -3423,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] || '',
@@ -3452,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", {
@@ -3463,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);
@@ -3492,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
           })
         };
       });
@@ -3513,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
           })
         };
       });
@@ -3550,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
             })
           };
         });
@@ -3575,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) {
@@ -3599,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({
@@ -3607,7 +3667,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         depth: 0,
         selected: []
       }, function () {
-        return _this22.onAfterSelect();
+        return _this23.onAfterSelect();
       });
     }
@@ -3620,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) {
@@ -3631,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);
               }
             }
           });
@@ -3718,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;
             }
@@ -3742,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;
       }
@@ -3752,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"], {
@@ -3763,17 +3823,17 @@ 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
           });
         },
@@ -3788,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;
@@ -3813,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');
@@ -3909,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"
@@ -3933,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')
             });
           }
         },
@@ -4010,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;
@@ -4020,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
             });
@@ -4033,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, ".");
@@ -4044,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
@@ -4055,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
           });
@@ -4077,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
           });
         }
@@ -4091,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, ".");
@@ -4102,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"], {
@@ -4114,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]
           });
         }
@@ -4191,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;
@@ -4218,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
@@ -4265,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"
         })
@@ -4287,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,
@@ -4303,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;
@@ -4319,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);
             }));
           }
         }
@@ -4334,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);
       });
     }
@@ -4354,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();
         });
@@ -4372,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;
@@ -4380,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;
@@ -4390,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
             }));
           }
@@ -4404,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
             });
           },
@@ -4418,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
               });
@@ -4443,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",
@@ -4485,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, {
@@ -4496,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
             });
           }
@@ -4514,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') {
@@ -4524,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;
@@ -4549,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);
@@ -4561,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
             });
           },
@@ -4575,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
                 });
               }
@@ -4594,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
               });
             }
@@ -4610,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",
@@ -4619,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'))));
@@ -4643,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,
@@ -4679,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,
@@ -4700,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') {
@@ -4740,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,
@@ -4792,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);
         },
@@ -4804,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);
         },
@@ -4816,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);
         },
@@ -4851,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
@@ -4939,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",
@@ -4947,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"], {
@@ -4980,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"], {
@@ -4990,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,
@@ -5018,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
@@ -5029,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,
@@ -5046,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,
@@ -5082,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: {
@@ -5094,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
               });
             }
@@ -5137,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
@@ -5165,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;
@@ -5177,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);
                 }
               }
             }
@@ -5189,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);
                 }
               }
             }
@@ -5212,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 || [];
@@ -5296,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,
@@ -5314,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;
               }
             });
           });
@@ -5339,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)");
         }
@@ -5356,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'),
@@ -5453,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,
@@ -5489,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: ''
           });
         },
@@ -5509,7 +5640,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           "aria-label": "close",
           color: "inherit",
           onClick: function onClick() {
-            return _this40.setState({
+            return _this41.setState({
               toast: ''
             });
           }
@@ -5525,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);
@@ -5558,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,
@@ -5577,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');
           }
         });
       }
@@ -5600,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));
       });
     }
@@ -5618,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;
       }
@@ -5636,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: ''
           });
         }
@@ -5680,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;
       }
@@ -5694,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: ''
           });
         }
@@ -5709,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;
       }
@@ -5736,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);
         }
       });
     }
@@ -5751,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);
@@ -5761,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
             });
           });
@@ -5778,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"], {