@iobroker/adapter-react-v5 3.1.2 → 3.1.5

package/Components/ObjectBrowser.js

@@ -163,6 +163,8 @@ var _IconDevice = _interopRequireDefault(require("../icons/IconDevice"));
 
 var _IconDocument = _interopRequireDefault(require("../icons/IconDocument"));
 
+var _IconDocumentReadOnly = _interopRequireDefault(require("../icons/IconDocumentReadOnly"));
+
 var _IconInstance = _interopRequireDefault(require("../icons/IconInstance"));
 
 var _IconState = _interopRequireDefault(require("../icons/IconState"));
@@ -286,7 +288,8 @@ var styles = function styles(theme) {
     headerRow: {
       paddingLeft: theme.spacing(1),
       height: 38,
-      whiteSpace: 'nowrap'
+      whiteSpace: 'nowrap',
+      userSelect: 'none'
     },
     buttonClearFilter: {
       position: 'relative',
@@ -517,19 +520,6 @@ var styles = function styles(theme) {
         display: 'block'
       }
     },
-    cellValueWritable: {
-      '&:after': {
-        content: '"*"',
-        color: theme.palette.mode === 'dark' ? 'white' : 'black',
-        position: 'absolute',
-        zIndex: 1,
-        top: -6,
-        left: 0,
-        fontSize: 9,
-        width: 4,
-        height: 4
-      }
-    },
     cellValueFile: {
       color: '#2837b9'
     },
@@ -796,6 +786,39 @@ var styles = function styles(theme) {
       top: 4,
       right: 50,
       width: 20
+    },
+    resizeHandle: {
+      display: 'block',
+      position: 'absolute',
+      cursor: 'col-resize',
+      width: 7,
+      top: 2,
+      bottom: 2,
+      zIndex: 1
+    },
+    resizeHandleRight: {
+      right: 3,
+      borderRight: '2px dotted #888',
+      '&:hover': {
+        borderColor: '#ccc',
+        borderRightStyle: 'solid'
+      },
+      '&.active': {
+        borderColor: '#517ea5',
+        borderRightStyle: 'solid'
+      }
+    },
+    resizeHandleLeft: {
+      left: -4,
+      borderLeft: '2px dotted #888',
+      '&:hover': {
+        borderColor: '#ccc',
+        borderLeftStyle: 'solid'
+      },
+      '&.active': {
+        borderColor: '#517ea5',
+        borderLeftStyle: 'solid'
+      }
     }
   };
 };
@@ -894,7 +917,7 @@ function applyFilter(item, filters, lang, objects, context, counter, customFilte
 
     if (!filteredOut && !filters.expertMode) {
       filteredOut = data.id === 'system' || data.id === 'enum' || // (data.obj && data.obj.type === 'meta') ||
-      data.id.startsWith('system.') || data.id.startsWith('enum.') || data.id.startsWith('_design/') || common && common.expert;
+      data.id.startsWith('system.') || data.id.startsWith('enum.') || data.id.startsWith('_design/') || data.id.endsWith('.admin') || common && common.expert;
     }
 
     if (!filteredOut && context.id) {
@@ -1795,7 +1818,7 @@ var SCREEN_WIDTHS = {
   ///////////////
   // extra-large: 1920px
   xl: {
-    idWidth: 650,
+    idWidth: 550,
     fields: ['name', 'type', 'role', 'room', 'func', 'val', 'buttons', 'changedFrom', 'qualityCode', 'timestamp', 'lastChange'],
     widths: {
       name: 400,
@@ -2438,6 +2461,111 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return el;
       })) : '';
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resizerMouseMove", function (e) {
+      if (_this.resizerActiveDiv) {
+        var width;
+        var widthNext;
+
+        if (_this.resizeLeft) {
+          width = _this.resizerOldWidth - e.clientX + _this.resizerPosition;
+          widthNext = _this.resizerOldWidthNext + e.clientX - _this.resizerPosition;
+        } else {
+          width = _this.resizerOldWidth + e.clientX - _this.resizerPosition;
+          widthNext = _this.resizerOldWidthNext - e.clientX + _this.resizerPosition;
+        }
+
+        if ((!_this.resizerMin || width > _this.resizerMin) && (!_this.resizerNextMin || widthNext > _this.resizerNextMin)) {
+          _this.resizerCurrentWidths[_this.resizerActiveName] = width;
+          _this.resizerCurrentWidths[_this.resizerNextName] = widthNext;
+          _this.resizerActiveDiv.style.width = width + 'px';
+          _this.resizerNextDiv.style.width = widthNext + 'px';
+          _this.columnsVisibility[_this.resizerActiveName] = width;
+          _this.columnsVisibility[_this.resizerNextName] = widthNext;
+
+          if (_this.resizerNextName === 'nameHeader') {
+            _this.columnsVisibility['name'] = widthNext - _this.state.scrollBarWidth;
+            _this.resizerCurrentWidths['name'] = widthNext - _this.state.scrollBarWidth;
+          } else if (_this.resizerActiveName === 'nameHeader') {
+            _this.columnsVisibility['name'] = width - _this.state.scrollBarWidth;
+            _this.resizerCurrentWidths['name'] = width - _this.state.scrollBarWidth;
+          }
+
+          _this.customWidth = true;
+          _this.resizeTimeout && clearTimeout(_this.resizeTimeout);
+          _this.resizeTimeout = setTimeout(function () {
+            _this.resizeTimeout = null;
+
+            _this.forceUpdate();
+          }, 200);
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resizerMouseUp", function () {
+      (window._localStorage || window.localStorage).setItem("".concat(_this.props.dialogName || 'App', ".table"), JSON.stringify(_this.resizerCurrentWidths));
+      _this.resizerActiveName = null;
+      _this.resizerNextName = null;
+      _this.resizerActiveDiv = null;
+      _this.resizerNextDiv = null;
+      window.removeEventListener('mousemove', _this.resizerMouseMove);
+      window.removeEventListener('mouseup', _this.resizerMouseUp);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resizerMouseDown", function (e) {
+      if (_this.resizerActiveIndex === null || _this.resizerActiveIndex === undefined) {
+        if (!_this.storedWidths) {
+          _this.storedWidths = JSON.parse(JSON.stringify(SCREEN_WIDTHS[_this.props.width]));
+        }
+
+        _this.resizerCurrentWidths = _this.resizerCurrentWidths || {};
+        _this.resizerActiveDiv = e.target.parentNode;
+        _this.resizerActiveName = _this.resizerActiveDiv.dataset.name;
+        var i = 0;
+
+        if (e.target.dataset.left === 'true') {
+          _this.resizeLeft = true;
+          _this.resizerNextDiv = _this.resizerActiveDiv.previousElementSibling;
+
+          var handle = _this.resizerNextDiv.querySelector('.' + _this.props.classes.resizeHandle);
+
+          while (_this.resizerNextDiv && !handle && i < 10) {
+            _this.resizerNextDiv = _this.resizerNextDiv.previousElementSibling;
+            handle = _this.resizerNextDiv.querySelector('.' + _this.props.classes.resizeHandle);
+            i++;
+          }
+
+          if (handle && handle.dataset.left !== 'true') {
+            _this.resizerNextDiv = _this.resizerNextDiv.nextElementSibling;
+          }
+        } else {
+          _this.resizeLeft = false;
+          _this.resizerNextDiv = _this.resizerActiveDiv.nextElementSibling;
+          /*while (this.resizerNextDiv && !this.resizerNextDiv.querySelector('.' + this.props.classes.resizeHandle) && i < 10) {
+              this.resizerNextDiv = this.resizerNextDiv.nextElementSibling;
+              i++;
+          }*/
+        }
+
+        _this.resizerNextName = _this.resizerNextDiv.dataset.name;
+        _this.resizerMin = parseInt(_this.resizerActiveDiv.dataset.min, 10) || 0;
+        _this.resizerNextMin = parseInt(_this.resizerNextDiv.dataset.min, 10) || 0;
+        _this.resizerPosition = e.clientX;
+        _this.resizerCurrentWidths[_this.resizerActiveName] = _this.resizerActiveDiv.offsetWidth;
+        _this.resizerCurrentWidths[_this.resizerNextName] = _this.resizerNextDiv.offsetWidth;
+        _this.resizerOldWidth = _this.resizerCurrentWidths[_this.resizerActiveName];
+        _this.resizerOldWidthNext = _this.resizerCurrentWidths[_this.resizerNextName];
+        window.addEventListener('mousemove', _this.resizerMouseMove);
+        window.addEventListener('mouseup', _this.resizerMouseUp);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "resizerReset", function () {
+      _this.customWidth = false;
+      SCREEN_WIDTHS[_this.props.width] = JSON.parse(JSON.stringify(_this.storedWidths));
+
+      _this.calculateColumnsVisibility();
+
+      (window._localStorage || window.localStorage).removeItem("".concat(_this.props.dialogName || 'App', ".table"));
+
+      _this.forceUpdate();
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "extendObject", function (id, data) {
       return _this.props.socket.extendObject(id, data)["catch"](function (error) {
         return window.alert(error);
@@ -2448,7 +2576,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return window.alert(error);
       });
     });
-    _this.lastSelectedItems = window.localStorage.getItem("".concat(props.dialogName || 'App', ".objectSelected")) || '[]';
+    _this.lastSelectedItems = (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".objectSelected")) || '[]';
 
     try {
       _this.lastSelectedItems = JSON.parse(_this.lastSelectedItems);
@@ -2462,7 +2590,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       });
     } catch (e) {}
 
-    var expanded = window.localStorage.getItem("".concat(props.dialogName || 'App', ".objectExpanded")) || '[]';
+    var expanded = (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".objectExpanded")) || '[]';
 
     try {
       expanded = JSON.parse(expanded);
@@ -2470,7 +2598,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       expanded = [];
     }
 
-    var filter = props.defaultFilters || window.localStorage.getItem("".concat(props.dialogName || 'App', ".objectFilter")) || Object.assign({}, DEFAULT_FILTER);
+    var filter = props.defaultFilters || (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".objectFilter")) || Object.assign({}, DEFAULT_FILTER);
 
     if (typeof filter === 'string') {
       try {
@@ -2526,7 +2654,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     }).filter(function (id) {
       return id;
     });
-    var columns = window.localStorage.getItem("".concat(props.dialogName || 'App', ".columns"));
+    var columns = (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".columns"));
 
     try {
       columns = columns ? JSON.parse(columns) : null;
@@ -2534,7 +2662,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       columns = null;
     }
 
-    var columnsWidths = window.localStorage.getItem("".concat(props.dialogName || 'App', ".columnsWidths"));
+    var columnsWidths = (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".columnsWidths"));
 
     try {
       columnsWidths = columnsWidths ? JSON.parse(columnsWidths) : {};
@@ -2543,7 +2671,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     }
 
     _this.imagePrefix = props.imagePrefix || '.';
-    var foldersFirst = window.localStorage.getItem((props.dialogName || 'App') + '.foldersFirst');
+    var foldersFirst = (window._localStorage || window.localStorage).getItem((props.dialogName || 'App') + '.foldersFirst');
 
     if (foldersFirst === 'false') {
       foldersFirst = false;
@@ -2553,12 +2681,18 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       foldersFirst = props.foldersFirst === undefined ? true : props.foldersFirst;
     }
 
-    var statesView = _this.props.objectStatesView ? JSON.parse(window.localStorage.getItem((props.dialogName || 'App') + '.objectStatesView')) || false : false;
+    var statesView = false;
+
+    try {
+      statesView = _this.props.objectStatesView ? JSON.parse((window._localStorage || window.localStorage).getItem((props.dialogName || 'App') + '.objectStatesView')) || false : false;
+    } catch (error) {// ignore
+    }
+
     _this.state = {
       loaded: false,
       foldersFirst: foldersFirst,
       selected: selected,
-      selectedNonObject: window.localStorage.getItem("".concat(props.dialogName || 'App', ".selectedNonObject")) || '',
+      selectedNonObject: (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".selectedNonObject")) || '',
       filter: filter,
       filterKey: 0,
       depth: 0,
@@ -2577,13 +2711,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       columns: columns,
       columnsForAdmin: null,
       columnsSelectorShow: false,
-      columnsAuto: window.localStorage.getItem("".concat(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.getItem("".concat(props.dialogName || 'App', ".lines")) === 'true'
+      linesEnabled: (window._localStorage || window.localStorage).getItem("".concat(props.dialogName || 'App', ".lines")) === 'true'
     };
     _this.edit = {};
     _this.texts = {
@@ -2637,6 +2771,25 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       aclEveryone_write_state: props.t('ra_aclEveryone_write_state')
     };
     _this.levelPadding = props.levelPadding || ITEM_LEVEL;
+    var resizerCurrentWidths = (window._localStorage || window.localStorage).getItem("".concat(_this.props.dialogName || 'App', ".table"));
+
+    if (resizerCurrentWidths) {
+      try {
+        resizerCurrentWidths = JSON.parse(resizerCurrentWidths);
+        _this.storedWidths = JSON.parse(JSON.stringify(SCREEN_WIDTHS[_this.props.width]));
+        Object.keys(resizerCurrentWidths).forEach(function (id) {
+          if (id === 'id') {
+            SCREEN_WIDTHS[_this.props.width].idWidth = resizerCurrentWidths.id;
+          } else if (id === 'nameHeader') {
+            SCREEN_WIDTHS[_this.props.width].widths['name'] = resizerCurrentWidths[id];
+          } else if (SCREEN_WIDTHS[_this.props.width].widths[id] !== undefined) {
+            SCREEN_WIDTHS[_this.props.width].widths[id] = resizerCurrentWidths[id];
+          }
+        });
+        _this.customWidth = true;
+      } catch (e) {// ignore
+      }
+    }
 
     _this.calculateColumnsVisibility();
 
@@ -2781,7 +2934,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
       if (changed) {
         expanded.sort();
-        window.localStorage.setItem("".concat(this.props.dialogName || 'App', ".objectExpanded"), JSON.stringify(expanded));
+        (window._localStorage || window.localStorage).setItem("".concat(this.props.dialogName || 'App', ".objectExpanded"), JSON.stringify(expanded));
         this.setState({
           expanded: expanded
         }, cb);
@@ -2802,13 +2955,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       this.lastSelectedItems = (0, _toConsumableArray2["default"])(this.state.selected);
 
       if (this.state.selected && this.state.selected.length) {
-        window.localStorage.setItem("".concat(this.props.dialogName || 'App', ".objectSelected"), JSON.stringify(this.lastSelectedItems));
+        (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
         }) : '';
         this.props.onSelect && this.props.onSelect(this.lastSelectedItems, name, isDouble);
       } else {
-        window.localStorage.setItem("".concat(this.props.dialogName || 'App', ".objectSelected"), '');
+        (window._localStorage || window.localStorage).setItem("".concat(this.props.dialogName || 'App', ".objectSelected"), '');
 
         if (this.state.selected.length) {
           this.setState({
@@ -2955,7 +3108,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
       if (!this.props.multiSelect) {
         if (this.objects[toggleItem] && (!this.props.types || this.props.types.includes(this.objects[toggleItem].type))) {
-          window.localStorage.removeItem("".concat(this.props.dialogName || 'App', ".selectedNonObject"));
+          (window._localStorage || window.localStorage).removeItem("".concat(this.props.dialogName || 'App', ".selectedNonObject"));
 
           if (this.state.selected[0] !== toggleItem) {
             this.setState({
@@ -2968,7 +3121,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             this.onAfterSelect(isDouble);
           }
         } else {
-          window.localStorage.setItem("".concat(this.props.dialogName || 'App', ".selectedNonObject"), toggleItem);
+          (window._localStorage || window.localStorage).setItem("".concat(this.props.dialogName || 'App', ".selectedNonObject"), toggleItem);
           this.setState({
             selected: [],
             selectedNonObject: toggleItem
@@ -2978,7 +3131,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }
       } else {
         if (this.objects[toggleItem] && (!this.props.types || this.props.types.includes(this.objects[toggleItem].type))) {
-          window.localStorage.removeItem("".concat(this.props.dialogName || 'App', ".selectedNonObject"));
+          (window._localStorage || window.localStorage).removeItem("".concat(this.props.dialogName || 'App', ".selectedNonObject"));
           var selected = (0, _toConsumableArray2["default"])(this.state.selected);
           var pos = selected.indexOf(toggleItem);
 
@@ -3036,7 +3189,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                 columns.splice(_pos, 1);
               }
 
-              window.localStorage.setItem((_this9.props.dialogName || 'App') + '.columns', JSON.stringify(columns));
+              (window._localStorage || window.localStorage).setItem((_this9.props.dialogName || 'App') + '.columns', JSON.stringify(columns));
 
               _this9.calculateColumnsVisibility(null, columns);
 
@@ -3070,7 +3223,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           onChange: function onChange(e) {
             var columnsWidths = JSON.parse(JSON.stringify(_this9.state.columnsWidths));
             columnsWidths[id] = e.target.value;
-            window.localStorage.setItem((_this9.props.dialogName || 'App') + '.columnsWidths', JSON.stringify(columnsWidths));
+            (window._localStorage || window.localStorage).setItem((_this9.props.dialogName || 'App') + '.columnsWidths', JSON.stringify(columnsWidths));
 
             _this9.calculateColumnsVisibility(null, null, null, columnsWidths);
 
@@ -3114,7 +3267,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
             checked: this.state.columnsAuto,
             onChange: function onChange() {
-              window.localStorage.setItem((_this10.props.dialogName || 'App') + '.columnsAuto', _this10.state.columnsAuto ? 'false' : 'true');
+              (window._localStorage || window.localStorage).setItem((_this10.props.dialogName || 'App') + '.columnsAuto', _this10.state.columnsAuto ? 'false' : 'true');
 
               if (!_this10.state.columnsAuto) {
                 _this10.calculateColumnsVisibility(true);
@@ -3146,7 +3299,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
             checked: this.state.foldersFirst,
             onChange: function onChange() {
-              window.localStorage.setItem((_this10.props.dialogName || 'App') + '.foldersFirst', _this10.state.foldersFirst ? 'false' : 'true');
+              (window._localStorage || window.localStorage).setItem((_this10.props.dialogName || 'App') + '.foldersFirst', _this10.state.foldersFirst ? 'false' : 'true');
 
               _this10.setState({
                 foldersFirst: !_this10.state.foldersFirst
@@ -3159,7 +3312,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           control: /*#__PURE__*/_react["default"].createElement(_Switch["default"], {
             checked: this.state.linesEnabled,
             onChange: function onChange() {
-              window.localStorage.setItem((_this10.props.dialogName || 'App') + '.lines', _this10.state.linesEnabled ? 'false' : 'true');
+              (window._localStorage || window.localStorage).setItem((_this10.props.dialogName || 'App') + '.lines', _this10.state.linesEnabled ? 'false' : 'true');
 
               _this10.setState({
                 linesEnabled: !_this10.state.linesEnabled
@@ -3202,7 +3355,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
                   _this10.calculateColumnsVisibility(null, columns);
 
-                  window.localStorage.setItem((_this10.props.dialogName || 'App') + '.columns', JSON.stringify(columns));
+                  (window._localStorage || window.localStorage).setItem((_this10.props.dialogName || 'App') + '.columns', JSON.stringify(columns));
 
                   _this10.setState({
                     columns: columns
@@ -3234,7 +3387,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
               onChange: function onChange(e) {
                 var columnsWidths = JSON.parse(JSON.stringify(_this10.state.columnsWidths));
                 columnsWidths['_' + adapter + '_' + column.path] = e.target.value;
-                window.localStorage.setItem((_this10.props.dialogName || 'App') + '.columnsWidths', JSON.stringify(columnsWidths));
+                (window._localStorage || window.localStorage).setItem((_this10.props.dialogName || 'App') + '.columnsWidths', JSON.stringify(columnsWidths));
 
                 _this10.calculateColumnsVisibility(null, null, null, columnsWidths);
 
@@ -3522,7 +3675,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       filter = Object.assign({}, this.state.filter, filter);
 
       if (JSON.stringify(this.state.filter) !== JSON.stringify(filter)) {
-        window.localStorage.setItem((this.props.dialogName || 'App') + '.objectFilter', JSON.stringify(filter));
+        (window._localStorage || window.localStorage).setItem((this.props.dialogName || 'App') + '.objectFilter', JSON.stringify(filter));
         this.setState({
           filter: filter
         }, function () {
@@ -3552,7 +3705,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       filter = Object.assign({}, this.state.filter, filter);
 
       if (JSON.stringify(this.state.filter) !== JSON.stringify(filter)) {
-        window.localStorage.setItem((this.props.dialogName || 'App') + '.objectFilter', JSON.stringify(filter));
+        (window._localStorage || window.localStorage).setItem((this.props.dialogName || 'App') + '.objectFilter', JSON.stringify(filter));
         this.setState({
           filter: filter,
           filterKey: this.state.filterKey + 1
@@ -3690,7 +3843,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
           newFilter[name] = '';
           _this18.filterRefs[name].current.childNodes[1].value = '';
-          window.localStorage.setItem((_this18.props.dialogName || 'App') + '.objectFilter', JSON.stringify(newFilter));
+          (window._localStorage || window.localStorage).setItem((_this18.props.dialogName || 'App') + '.objectFilter', JSON.stringify(newFilter));
 
           _this18.setState({
             filter: newFilter,
@@ -3820,7 +3973,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
       if (root === this.root) {
         expanded.sort();
-        window.localStorage.setItem((this.props.dialogName || 'App') + '.objectExpanded', JSON.stringify(expanded));
+        (window._localStorage || window.localStorage).setItem((this.props.dialogName || 'App') + '.objectExpanded', JSON.stringify(expanded));
         this.setState({
           expanded: expanded
         });
@@ -3833,10 +3986,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onCollapseAll",
     value: function onCollapseAll() {
-      window.localStorage.setItem((this.props.dialogName || 'App') + '.objectExpanded', JSON.stringify([]));
+      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({
         expanded: [],
-        depth: 0
+        depth: 0,
+        selected: []
+      }, function () {
+        return _this23.onAfterSelect();
       });
     }
     /**
@@ -3849,7 +4008,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "expandDepth",
     value: function expandDepth(root, depth, expanded) {
-      var _this23 = this;
+      var _this24 = this;
 
       root = root || this.root;
 
@@ -3863,7 +4022,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
               }
 
               if (depth - 1 > 0) {
-                _this23.expandDepth(item, depth - 1, expanded);
+                _this24.expandDepth(item, depth - 1, expanded);
               }
             }
           });
@@ -3894,7 +4053,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         var depth = this.state.depth + 1;
         var expanded = (0, _toConsumableArray2["default"])(this.state.expanded);
         this.expandDepth(this.root, depth, expanded);
-        window.localStorage.setItem((this.props.dialogName || 'App') + '.objectExpanded', JSON.stringify(expanded));
+        (window._localStorage || window.localStorage).setItem((this.props.dialogName || 'App') + '.objectExpanded', JSON.stringify(expanded));
         this.setState({
           depth: depth,
           expanded: expanded
@@ -3909,7 +4068,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     key: "onStatesViewVisible",
     value: function onStatesViewVisible() {
       var statesView = !this.state.statesView;
-      window.localStorage.setItem((this.props.dialogName || 'App') + '.objectStatesView', JSON.stringify(statesView));
+      (window._localStorage || window.localStorage).setItem((this.props.dialogName || 'App') + '.objectStatesView', JSON.stringify(statesView));
       this.setState({
         statesView: statesView
       });
@@ -3924,7 +4083,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       if (this.state.depth > 0) {
         var depth = this.state.depth - 1;
         var expanded = this.collapseDepth(depth, this.state.expanded);
-        window.localStorage.setItem((this.props.dialogName || 'App') + '.objectExpanded', JSON.stringify(expanded));
+        (window._localStorage || window.localStorage).setItem((this.props.dialogName || 'App') + '.objectExpanded', JSON.stringify(expanded));
         this.setState({
           depth: depth,
           expanded: expanded
@@ -3967,7 +4126,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "_exportObjects",
     value: function _exportObjects(isAll) {
-      var _this24 = this;
+      var _this25 = this;
 
       if (isAll) {
         generateFile('allObjects.json', this.objects);
@@ -3976,10 +4135,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         var id = this.state.selected[0] || this.state.selectedNonObject;
 
         this._getSelectedIdsForExport().forEach(function (key) {
-          result[key] = JSON.parse(JSON.stringify(_this24.objects[key])); // add enum information
+          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;
@@ -3995,7 +4154,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderExportDialog",
     value: function renderExportDialog() {
-      var _this25 = this;
+      var _this26 = this;
 
       if (this.state.showExportDialog === false) {
         return null;
@@ -4006,10 +4165,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')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -4017,17 +4176,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')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
           color: "grey",
           variant: "contained",
           onClick: function onClick() {
-            return _this25.setState({
+            return _this26.setState({
               showExportDialog: false
             });
           },
@@ -4048,7 +4207,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element}
      */
     function getToolbar() {
-      var _this26 = this;
+      var _this27 = this;
 
       var allowObjectCreation = false;
 
@@ -4082,7 +4241,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         title: this.props.t('ra_Refresh tree')
       }, /*#__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"
@@ -4092,7 +4251,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         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"], {
@@ -4101,7 +4260,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         key: "columnSelector",
         color: this.state.columnsAuto ? 'primary' : 'default',
         onClick: function onClick() {
-          return _this26.setState({
+          return _this27.setState({
             columnsSelectorShow: true
           });
         },
@@ -4111,7 +4270,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__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"], {
@@ -4119,7 +4278,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__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"], {
@@ -4128,7 +4287,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         key: "expandVisible",
         color: "primary",
         onClick: function onClick() {
-          return _this26.onExpandVisible();
+          return _this27.onExpandVisible();
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(StyledBadge, {
@@ -4140,7 +4299,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         key: "collapseVisible",
         color: "primary",
         onClick: function onClick() {
-          return _this26.onCollapseVisible();
+          return _this27.onCollapseVisible();
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(StyledBadge, {
@@ -4150,7 +4309,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         title: this.props.t('ra_Toggle the states view')
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         onClick: function onClick() {
-          return _this26.onStatesViewVisible();
+          return _this27.onStatesViewVisible();
         },
         size: "large"
       }, /*#__PURE__*/_react["default"].createElement(_LooksOne["default"], {
@@ -4160,7 +4319,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__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
           });
         },
@@ -4174,7 +4333,7 @@ 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();
         },
@@ -4183,8 +4342,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         title: this.props.t('ra_Save objects tree as JSON file')
       }, /*#__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"
@@ -4198,28 +4357,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')
       }, /*#__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.setItem((_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((_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')
             });
           }
         },
@@ -4244,7 +4403,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         expanded.splice(pos, 1);
       }
 
-      window.localStorage.setItem((this.props.dialogName || 'App') + '.objectExpanded', JSON.stringify(expanded));
+      (window._localStorage || window.localStorage).setItem((this.props.dialogName || 'App') + '.objectExpanded', JSON.stringify(expanded));
       this.setState({
         expanded: expanded
       });
@@ -4281,7 +4440,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;
@@ -4292,7 +4451,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,
               modalEmptyId: id,
               modalEditOfAccessObjData: item.data
@@ -4305,7 +4464,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           "aria-label": "delete",
           title: this.texts.deleteObject,
           onClick: function onClick() {
-            return _this27.props.onObjectDelete(id, !!(item.children && item.children.length), false);
+            return _this28.props.onObjectDelete(id, !!(item.children && item.children.length), false);
           }
         }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
           className: classes.cellButtonsButtonIcon
@@ -4321,7 +4480,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
         className: classes.cellButtonMinWidth,
         onClick: function onClick() {
-          return _this27.setState({
+          return _this28.setState({
             modalEditOfAccess: true,
             modalEditOfAccessObjData: item.data
           });
@@ -4339,9 +4498,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         "aria-label": "edit",
         title: this.texts.editObject,
         onClick: function onClick() {
-          window.localStorage.setItem("".concat(_this27.props.dialogName || 'App', ".objectSelected"), id);
+          (window._localStorage || window.localStorage).setItem("".concat(_this28.props.dialogName || 'App', ".objectSelected"), id);
 
-          _this27.setState({
+          _this28.setState({
             editObjectDialog: id
           });
         }
@@ -4355,7 +4514,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           var _item$children3, _item$data$obj$common2;
 
-          return _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));
+          return _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));
         },
         title: this.texts.deleteObject
       }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], {
@@ -4367,13 +4526,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         "aria-label": "config",
         title: this.texts.customConfig,
         onClick: function onClick() {
-          window.localStorage.setItem((_this27.props.dialogName || 'App') + '.objectSelected', id);
+          (window._localStorage || window.localStorage).setItem((_this28.props.dialogName || 'App') + '.objectSelected', id);
 
-          _this27.pauseSubscribe(true);
+          _this28.pauseSubscribe(true);
 
-          _this27.props.router && _this27.props.router.doNavigate(null, 'customs', id);
+          _this28.props.router && _this28.props.router.doNavigate(null, 'customs', id);
 
-          _this27.setState({
+          _this28.setState({
             customDialog: [id]
           });
         }
@@ -4389,7 +4548,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "readHistory",
     value: function readHistory(id) {
-      var _this28 = this;
+      var _this29 = this;
 
       /*interface GetHistoryOptions {
           instance?: string;
@@ -4434,7 +4593,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             }
           }
         })["catch"](function (e) {
-          return _this28.showError(e);
+          return _this29.showError(e);
         });
       }
     }
@@ -4450,7 +4609,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     key: "renderColumnValue",
     value: function renderColumnValue(id, item, classes) {
       var _obj$common4,
-          _this29 = this;
+          _this30 = this;
 
       var obj = item.data.obj;
 
@@ -4482,7 +4641,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       if (!info) {
         info = item.data.state = item.data.state || formatValue(id, state, obj, this.texts, this.props.dateFormat, this.props.isFloatComma);
         info.valFull = info.valFull.map(function (item) {
-          if (item.t === _this29.texts.quality && state.q) {
+          if (item.t === _this30.texts.quality && state.q) {
             return [/*#__PURE__*/_react["default"].createElement("div", {
               className: classes.cellValueTooltipBoth,
               key: item.t
@@ -4531,7 +4690,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         }, "(", info.valText.s, ")") : null, /*#__PURE__*/_react["default"].createElement(_IconCopy["default"], {
           className: _Utils["default"].clsx(classes.cellButtonsValueButton, 'copyButton', classes.cellButtonsValueButtonCopy),
           onClick: function onClick(e) {
-            return _this29.onCopy(e, copyText);
+            return _this30.onCopy(e, copyText);
           },
           key: "cc"
         }) //<IconEdit className={ Utils.clsx(classes.cellButtonsValueButton, 'copyButton', classes.cellButtonsValueButtonEdit) } key="ce" />
@@ -4554,11 +4713,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           popper: this.props.classes.cellValueTooltipBox
         },
         onOpen: function onOpen() {
-          return _this29.readHistory(id);
+          return _this30.readHistory(id);
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: info.style,
-        className: _Utils["default"].clsx(classes.cellValueText, obj.common && obj.common.write !== false && classes.cellValueWritable)
+        className: classes.cellValueText
       }, val));
     }
     /**
@@ -4569,7 +4728,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "_syncEnum",
     value: function _syncEnum(id, enumIds, newArray, cb) {
-      var _this30 = this;
+      var _this31 = this;
 
       if (!enumIds || !enumIds.length) {
         return cb && cb();
@@ -4590,9 +4749,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
               var obj = JSON.parse(JSON.stringify(this.info.objects[enumId]));
               obj.common.members.splice(pos, 1);
               promises.push(this.props.socket.setObject(enumId, obj).then(function () {
-                return _this30.info.objects[enumId] = obj;
+                return _this31.info.objects[enumId] = obj;
               })["catch"](function (e) {
-                return _this30.showError(e);
+                return _this31.showError(e);
               }));
             }
           } // add to it
@@ -4609,16 +4768,16 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
             _obj.common.members.sort();
 
             promises.push(this.props.socket.setObject(enumId, _obj).then(function () {
-              return _this30.info.objects[enumId] = _obj;
+              return _this31.info.objects[enumId] = _obj;
             })["catch"](function (e) {
-              return _this30.showError(e);
+              return _this31.showError(e);
             }));
           }
         }
 
         Promise.all(promises).then(function () {
           return setTimeout(function () {
-            return _this30._syncEnum(id, enumIds, newArray, cb);
+            return _this31._syncEnum(id, enumIds, newArray, cb);
           }, 0);
         });
       }
@@ -4631,12 +4790,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "syncEnum",
     value: function syncEnum(id, enumName, newArray) {
-      var _this31 = this;
+      var _this32 = this;
 
       var toCheck = (0, _toConsumableArray2["default"])(this.info[enumName === 'func' ? 'funcEnums' : 'roomEnums']);
       return new Promise(function (resolve) {
-        return _this31._syncEnum(id, toCheck, newArray, function (error) {
-          error && _this31.showError(error); // force update of object
+        return _this32._syncEnum(id, toCheck, newArray, function (error) {
+          error && _this32.showError(error); // force update of object
 
           resolve();
         });
@@ -4650,7 +4809,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderEnumDialog",
     value: function renderEnumDialog() {
-      var _this32 = this;
+      var _this33 = this;
 
       if (this.state.enumDialog) {
         var type = this.state.enumDialog.type;
@@ -4659,18 +4818,18 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         var enumsOriginal = this.state.enumDialog.enumsOriginal;
         var enums = (type === 'room' ? this.info.roomEnums : this.info.funcEnums).map(function (id) {
           return {
-            name: getName(_this32.objects[id] && _this32.objects[id].common && _this32.objects[id].common.name || id.split('.').pop(), _this32.props.lang),
+            name: getName(_this33.objects[id] && _this33.objects[id].common && _this33.objects[id].common.name || id.split('.').pop(), _this33.props.lang),
             value: id,
-            icon: getSelectIdIcon(_this32.objects, id, _this32.imagePrefix)
+            icon: getSelectIdIcon(_this33.objects, id, _this33.imagePrefix)
           };
         });
         enums.forEach(function (item) {
           if (item.icon && typeof item.icon == 'string') {
             item.icon = /*#__PURE__*/_react["default"].createElement("div", {
-              className: _this32.props.classes.enumIconDiv
+              className: _this33.props.classes.enumIconDiv
             }, /*#__PURE__*/_react["default"].createElement("img", {
               src: item.icon,
-              className: _this32.props.classes.enumIcon,
+              className: _this33.props.classes.enumIcon,
               alt: item.name
             }));
           }
@@ -4679,7 +4838,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
           className: this.props.classes.enumDialog,
           onClose: function onClose() {
-            return _this32.setState({
+            return _this33.setState({
               enumDialog: null
             });
           },
@@ -4693,8 +4852,8 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           disabled: JSON.stringify(enumsOriginal) === JSON.stringify(itemEnums),
           size: "small",
           onClick: function onClick() {
-            return _this32.syncEnum(item.data.id, type, itemEnums).then(function () {
-              return _this32.setState({
+            return _this33.syncEnum(item.data.id, type, itemEnums).then(function () {
+              return _this33.setState({
                 enumDialog: null,
                 enumDialogEnums: null
               });
@@ -4720,11 +4879,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
           var labelId = "checkbox-list-label-".concat(id);
           return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-            className: _this32.props.classes.headerCellSelectItem,
+            className: _this33.props.classes.headerCellSelectItem,
             key: id,
             onClick: function onClick() {
               var pos = itemEnums.indexOf(id);
-              var enumDialogEnums = JSON.parse(JSON.stringify(_this32.state.enumDialogEnums));
+              var enumDialogEnums = JSON.parse(JSON.stringify(_this33.state.enumDialogEnums));
 
               if (pos === -1) {
                 enumDialogEnums.push(id);
@@ -4733,13 +4892,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                 enumDialogEnums.splice(pos, 1);
               }
 
-              _this32.setState({
+              _this33.setState({
                 enumDialogEnums: enumDialogEnums
               });
             }
           }, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], {
             classes: {
-              root: _this32.props.classes.enumCheckbox
+              root: _this33.props.classes.enumCheckbox
             }
           }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
             edge: "start",
@@ -4765,7 +4924,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderEditRoleDialog",
     value: function renderEditRoleDialog() {
-      var _this33 = this;
+      var _this34 = this;
 
       if (this.state.roleDialog && this.props.objectBrowserEditRole) {
         var ObjectBrowserEditRole = this.props.objectBrowserEditRole;
@@ -4777,10 +4936,10 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           roles: this.info.roles,
           onClose: function onClose(obj) {
             if (obj) {
-              _this33.info.objects[_this33.state.roleDialog] = obj;
+              _this34.info.objects[_this34.state.roleDialog] = obj;
             }
 
-            _this33.setState({
+            _this34.setState({
               roleDialog: false
             });
           }
@@ -4797,7 +4956,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onColumnsEditCustomDialogClose",
     value: function onColumnsEditCustomDialogClose(isSave) {
-      var _this34 = this;
+      var _this35 = this;
 
       if (isSave) {
         var value = this.customColumnDialog.value;
@@ -4810,17 +4969,17 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
         this.customColumnDialog = null;
         this.props.socket.getObject(this.state.columnsEditCustomDialog.obj._id).then(function (obj) {
-          if (_this34.setCustomValue(obj, _this34.state.columnsEditCustomDialog.it, value)) {
-            return _this34.props.socket.setObject(obj._id, obj);
+          if (_this35.setCustomValue(obj, _this35.state.columnsEditCustomDialog.it, value)) {
+            return _this35.props.socket.setObject(obj._id, obj);
           } else {
-            throw new Error(_this34.props.t('ra_Cannot update attribute, because not found in the object'));
+            throw new Error(_this35.props.t('ra_Cannot update attribute, because not found in the object'));
           }
         }).then(function () {
-          return _this34.setState({
+          return _this35.setState({
             columnsEditCustomDialog: null
           });
         })["catch"](function (e) {
-          return _this34.showError(e);
+          return _this35.showError(e);
         });
       } else {
         this.customColumnDialog = null;
@@ -4836,7 +4995,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderColumnsEditCustomDialog",
     value: function renderColumnsEditCustomDialog() {
-      var _this35 = this;
+      var _this36 = this;
 
       if (this.state.columnsEditCustomDialog) {
         if (!this.customColumnDialog) {
@@ -4850,7 +5009,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
         return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
           onClose: function onClose() {
-            return _this35.setState({
+            return _this36.setState({
               columnsEditCustomDialog: null
             });
           },
@@ -4864,15 +5023,15 @@ 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 && _this35.onColumnsEditCustomDialogClose(true);
+              return e.keyCode === 13 && _this36.onColumnsEditCustomDialogClose(true);
             },
             defaultChecked: this.customColumnDialog.value === 'true',
             onChange: function onChange(e) {
-              _this35.customColumnDialog.value = e.target.checked.toString();
-              var changed = _this35.customColumnDialog.value !== _this35.customColumnDialog.initValue;
+              _this36.customColumnDialog.value = e.target.checked.toString();
+              var changed = _this36.customColumnDialog.value !== _this36.customColumnDialog.initValue;
 
-              if (changed === !_this35.state.customColumnDialogValueChanged) {
-                _this35.setState({
+              if (changed === !_this36.state.customColumnDialogValueChanged) {
+                _this36.setState({
                   customColumnDialogValueChanged: changed
                 });
               }
@@ -4884,15 +5043,15 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           defaultValue: this.customColumnDialog.value,
           fullWidth: true,
           onKeyUp: function onKeyUp(e) {
-            return e.keyCode === 13 && _this35.onColumnsEditCustomDialogClose(true);
+            return e.keyCode === 13 && _this36.onColumnsEditCustomDialogClose(true);
           },
           label: this.state.columnsEditCustomDialog.it.name + ' (' + this.state.columnsEditCustomDialog.it.pathText + ')',
           onChange: function onChange(e) {
-            _this35.customColumnDialog.value = e.target.value;
-            var changed = _this35.customColumnDialog.value !== _this35.customColumnDialog.initValue;
+            _this36.customColumnDialog.value = e.target.value;
+            var changed = _this36.customColumnDialog.value !== _this36.customColumnDialog.initValue;
 
-            if (changed === !_this35.state.customColumnDialogValueChanged) {
-              _this35.setState({
+            if (changed === !_this36.state.customColumnDialogValueChanged) {
+              _this36.setState({
                 customColumnDialogValueChanged: changed
               });
             }
@@ -4901,7 +5060,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 _this35.onColumnsEditCustomDialogClose(true);
+            return _this36.onColumnsEditCustomDialogClose(true);
           },
           disabled: !this.state.customColumnDialogValueChanged,
           color: "primary",
@@ -4910,7 +5069,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           color: "grey",
           variant: "contained",
           onClick: function onClick() {
-            return _this35.onColumnsEditCustomDialogClose();
+            return _this36.onColumnsEditCustomDialogClose();
           },
           startIcon: /*#__PURE__*/_react["default"].createElement(_Close["default"], null)
         }, this.props.t('ra_Cancel'))));
@@ -5010,7 +5169,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderCustomValue",
     value: function renderCustomValue(obj, it, item) {
-      var _this36 = this;
+      var _this37 = this;
 
       var text = this.getCustomValue(obj, it);
 
@@ -5019,7 +5178,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/_react["default"].createElement("div", {
             className: _Utils["default"].clsx(this.props.classes.columnCustom, this.props.classes.columnCustomEditable, this.props.classes['columnCustom_' + it.align]),
             onClick: function onClick() {
-              return _this36.setState({
+              return _this37.setState({
                 columnsEditCustomDialog: {
                   item: item,
                   it: it,
@@ -5050,7 +5209,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderLeaf",
     value: function renderLeaf(item, isExpanded, classes, counter) {
-      var _this37 = this,
+      var _this38 = this,
           _common$alias,
           _common$alias2,
           _this$states$id2,
@@ -5072,18 +5231,24 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         iconFolder = isExpanded ? /*#__PURE__*/_react["default"].createElement(_IconOpen["default"], {
           className: classes.cellIdIconFolder,
           onClick: function onClick() {
-            return _this37.toggleExpanded(id);
+            return _this38.toggleExpanded(id);
           }
         }) : /*#__PURE__*/_react["default"].createElement(_IconClosed["default"], {
           className: classes.cellIdIconFolder,
           onClick: function onClick() {
-            return _this37.toggleExpanded(id);
+            return _this38.toggleExpanded(id);
           }
         });
       } else {
-        iconFolder = /*#__PURE__*/_react["default"].createElement(_IconDocument["default"], {
-          className: classes.cellIdIconDocument
-        });
+        if (obj.common && obj.common.write === false && obj.type === 'state') {
+          iconFolder = /*#__PURE__*/_react["default"].createElement(_IconDocumentReadOnly["default"], {
+            className: classes.cellIdIconDocument
+          });
+        } else {
+          iconFolder = /*#__PURE__*/_react["default"].createElement(_IconDocument["default"], {
+            className: classes.cellIdIconDocument
+          });
+        }
       }
 
       var iconItem = null;
@@ -5179,11 +5344,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           e.stopPropagation();
           e.preventDefault();
 
-          _this37.onSelect(common.alias.id.read);
+          _this38.onSelect(common.alias.id.read);
 
           setTimeout(function () {
-            _this37.expandAllSelected(function () {
-              return _this37.scrollToItem(common.alias.id.read);
+            _this38.expandAllSelected(function () {
+              return _this38.scrollToItem(common.alias.id.read);
             });
           }, 100);
         },
@@ -5193,11 +5358,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           e.stopPropagation();
           e.preventDefault();
 
-          _this37.onSelect(common.alias.id.write);
+          _this38.onSelect(common.alias.id.write);
 
           setTimeout(function () {
-            _this37.expandAllSelected(function () {
-              return _this37.scrollToItem(common.alias.id.write);
+            _this38.expandAllSelected(function () {
+              return _this38.scrollToItem(common.alias.id.write);
             });
           }, 100);
         },
@@ -5207,11 +5372,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           e.stopPropagation();
           e.preventDefault();
 
-          _this37.onSelect(common.alias.id);
+          _this38.onSelect(common.alias.id);
 
           setTimeout(function () {
-            _this37.expandAllSelected(function () {
-              return _this37.scrollToItem(common.alias.id);
+            _this38.expandAllSelected(function () {
+              return _this38.scrollToItem(common.alias.id);
             });
           }, 100);
         },
@@ -5241,19 +5406,19 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
           ids[name] = _id;
 
-          if (!_this37.states[_id]) {
-            var _this37$objects$_id;
+          if (!_this38.states[_id]) {
+            var _this38$objects$_id;
 
-            if (((_this37$objects$_id = _this37.objects[_id]) === null || _this37$objects$_id === void 0 ? void 0 : _this37$objects$_id.type) === 'state') {
-              !_this37.recordStates.includes(_id) && _this37.recordStates.push(_id);
-              _this37.states[_id] = {
+            if (((_this38$objects$_id = _this38.objects[_id]) === null || _this38$objects$_id === void 0 ? void 0 : _this38$objects$_id.type) === 'state') {
+              !_this38.recordStates.includes(_id) && _this38.recordStates.push(_id);
+              _this38.states[_id] = {
                 val: null
               };
 
-              _this37.subscribe(_id);
+              _this38.subscribe(_id);
             }
           } else {
-            !_this37.recordStates.includes(_id) && _this37.recordStates.push(_id);
+            !_this38.recordStates.includes(_id) && _this38.recordStates.push(_id);
           }
         }); // calculate color
         // errorId has priority
@@ -5342,13 +5507,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         key: id,
         id: id,
         onClick: function onClick() {
-          return _this37.onSelect(id);
+          return _this38.onSelect(id);
         },
         onDoubleClick: function onDoubleClick() {
           if (!item.children) {
-            _this37.onSelect(id, true);
+            _this38.onSelect(id, true);
           } else {
-            _this37.toggleExpanded(id);
+            _this38.toggleExpanded(id);
           }
         }
       }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
@@ -5393,7 +5558,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_IconCopy["default"], {
         className: _Utils["default"].clsx(classes.cellCopyButton, 'copyButton'),
         onClick: function onClick(e) {
-          return _this37.onCopy(e, id);
+          return _this38.onCopy(e, id);
         }
       }))), this.columnsVisibility.name ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cellName,
@@ -5407,7 +5572,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_IconCopy["default"], {
         className: _Utils["default"].clsx(classes.cellCopyButton, 'copyButton'),
         onClick: function onClick(e) {
-          return _this37.onCopy(e, item.data.title);
+          return _this38.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,
@@ -5421,7 +5586,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           cursor: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole ? 'text' : 'default'
         },
         onClick: this.state.filter.expertMode && enumEditable && this.props.objectBrowserEditRole ? function () {
-          return _this37.setState({
+          return _this38.setState({
             roleDialog: item.data.id
           });
         } : undefined
@@ -5432,9 +5597,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           cursor: enumEditable ? 'text' : 'default'
         },
         onClick: enumEditable ? function () {
-          var enums = findEnumsForObjectAsIds(_this37.info, item.data.id, 'roomEnums');
+          var enums = findEnumsForObjectAsIds(_this38.info, item.data.id, 'roomEnums');
 
-          _this37.setState({
+          _this38.setState({
             enumDialogEnums: enums,
             enumDialog: {
               item: item,
@@ -5450,9 +5615,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           cursor: enumEditable ? 'text' : 'default'
         },
         onClick: enumEditable ? function () {
-          var enums = findEnumsForObjectAsIds(_this37.info, item.data.id, 'funcEnums');
+          var enums = findEnumsForObjectAsIds(_this38.info, item.data.id, 'funcEnums');
 
-          _this37.setState({
+          _this38.setState({
             enumDialogEnums: enums,
             enumDialog: {
               item: item,
@@ -5487,11 +5652,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: classes.cellAdapter,
           style: {
-            width: _this37.columnsVisibility[it.id]
+            width: _this38.columnsVisibility[it.id]
           },
           key: it.id,
           title: it.adapter + ' => ' + it.pathText
-        }, _this37.renderCustomValue(obj, it, item));
+        }, _this38.renderCustomValue(obj, it, item));
       }), this.columnsVisibility.val ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.cellValue,
         style: {
@@ -5499,31 +5664,31 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           cursor: valueEditable ? (common === null || common === void 0 ? void 0 : common.type) === 'file' ? 'zoom-in' : item.data.button ? 'grab' : 'text' : 'default'
         },
         onClick: valueEditable ? function () {
-          if (!obj || !_this37.states) {
+          if (!obj || !_this38.states) {
             return null;
           }
 
           if ((common === null || common === void 0 ? void 0 : common.type) === 'file') {
-            return _this37.setState({
+            return _this38.setState({
               viewFileDialog: id
             });
           } // in non-expert mode control button directly
 
 
-          if (!_this37.state.filter.expertMode && item.data.button) {
-            return _this37.props.socket.setState(id, true)["catch"](function (e) {
+          if (!_this38.state.filter.expertMode && item.data.button) {
+            return _this38.props.socket.setState(id, true)["catch"](function (e) {
               return window.alert("Cannot write state \"".concat(id, "\": ").concat(e));
             });
           }
 
-          _this37.edit = {
-            val: _this37.states[id] ? _this37.states[id].val : '',
-            q: _this37.states[id] ? _this37.states[id].q || 0 : 0,
+          _this38.edit = {
+            val: _this38.states[id] ? _this38.states[id].val : '',
+            q: _this38.states[id] ? _this38.states[id].q || 0 : 0,
             ack: false,
             id: id
           };
 
-          _this37.setState({
+          _this38.setState({
             updateOpened: true
           });
         } : undefined
@@ -5546,7 +5711,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderItem",
     value: function renderItem(root, isExpanded, classes, counter) {
-      var _this38 = this;
+      var _this39 = this;
 
       var items = [];
       counter = counter || {
@@ -5578,9 +5743,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         if (!this.state.foldersFirst) {
           root.children && items.push(root.children.map(function (item) {
             // do not render too many items in column editor mode
-            if (!_this38.state.columnsSelectorShow || counter.count < 15) {
+            if (!_this39.state.columnsSelectorShow || counter.count < 15) {
               if (item.data.sumVisibility) {
-                return _this38.renderItem(item, undefined, classes, counter);
+                return _this39.renderItem(item, undefined, classes, counter);
               }
             }
 
@@ -5591,9 +5756,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           root.children && items.push(root.children.map(function (item) {
             if (item.children) {
               // do not render too many items in column editor mode
-              if (!_this38.state.columnsSelectorShow || counter.count < 15) {
+              if (!_this39.state.columnsSelectorShow || counter.count < 15) {
                 if (item.data.sumVisibility) {
-                  return _this38.renderItem(item, undefined, classes, counter);
+                  return _this39.renderItem(item, undefined, classes, counter);
                 }
               }
             }
@@ -5604,9 +5769,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           root.children && items.push(root.children.map(function (item) {
             if (!item.children) {
               // do not render too many items in column editor mode
-              if (!_this38.state.columnsSelectorShow || counter.count < 15) {
+              if (!_this39.state.columnsSelectorShow || counter.count < 15) {
                 if (item.data.sumVisibility) {
-                  return _this38.renderItem(item, undefined, classes, counter);
+                  return _this39.renderItem(item, undefined, classes, counter);
                 }
               }
             }
@@ -5629,7 +5794,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "calculateColumnsVisibility",
     value: function calculateColumnsVisibility(columnsAuto, columns, columnsForAdmin, columnsWidths) {
-      var _this39 = this;
+      var _this40 = this;
 
       columnsWidths = columnsWidths || this.state.columnsWidths;
       columnsForAdmin = columnsForAdmin || this.state.columnsForAdmin;
@@ -5648,6 +5813,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         this.columnsVisibility = {
           id: SCREEN_WIDTHS[this.props.width].idWidth,
           name: this.visibleCols.includes('name') ? WIDTHS.name || 0 : 0,
+          nameHeader: this.visibleCols.includes('name') ? WIDTHS.name || 0 : 0,
           type: this.visibleCols.includes('type') ? WIDTHS.type || 0 : 0,
           role: this.visibleCols.includes('role') ? WIDTHS.role || 0 : 0,
           room: this.visibleCols.includes('room') ? WIDTHS.room || 0 : 0,
@@ -5660,7 +5826,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           buttons: this.visibleCols.includes('buttons') ? WIDTHS.buttons || 0 : 0
         };
 
-        if (this.columnsVisibility.name) {
+        if (this.columnsVisibility.name && !this.customWidth) {
           var widthSum = this.columnsVisibility.id; // id is always visible
 
           if (this.state.statesView) {
@@ -5679,7 +5845,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           widthSum += this.columnsVisibility.buttons;
           this.columnsVisibility.name = "calc(100% - ".concat(widthSum + 5, "px)");
           this.columnsVisibility.nameHeader = "calc(100% - ".concat(widthSum + 5 + this.state.scrollBarWidth, "px)");
-        } else {
+        } else if (!this.customWidth) {
           // Calculate the with of ID
           var _widthSum = 0; // id is always visible
 
@@ -5721,7 +5887,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           Object.keys(columnsForAdmin).sort().forEach(function (adapter) {
             return columnsForAdmin[adapter].forEach(function (column) {
               var id = '_' + adapter + '_' + column.path;
-              _this39.columnsVisibility[id] = columns.includes(id);
+              _this40.columnsVisibility[id] = columns.includes(id);
 
               if (columns.includes(id)) {
                 var item = {
@@ -5744,12 +5910,12 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
                   }
                 }
 
-                _this39.adapterColumns.push(item);
+                _this40.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];
+                _this40.columnsVisibility[id] = columnsWidths[item.id] || column.width || SCREEN_WIDTHS[_this40.props.width].widths.func || SCREEN_WIDTHS.xl.widths.func;
+                _widthSum2 += _this40.columnsVisibility[id];
               } else {
-                _this39.columnsVisibility[id] = 0;
+                _this40.columnsVisibility[id] = 0;
               }
             });
           });
@@ -5771,25 +5937,25 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           this.columnsVisibility.nameHeader = "calc(100% - ".concat(_widthSum2 + 5 + this.state.scrollBarWidth, "px)");
         } else {
           var newWidth = Object.keys(this.columnsVisibility).reduce(function (accumulator, name) {
-            if (name === 'id' || typeof _this39.columnsVisibility[name] === 'string' || !_this39.columnsVisibility[name]) {
+            if (name === 'id' || typeof _this40.columnsVisibility[name] === 'string' || !_this40.columnsVisibility[name]) {
               return accumulator;
             } else {
-              return accumulator + _this39.columnsVisibility[name];
+              return accumulator + _this40.columnsVisibility[name];
             }
           }, 0);
           this.columnsVisibility.id = "calc(100% - ".concat(newWidth, "px)");
         }
       }
     }
+  }, {
+    key: "renderHeader",
+    value:
     /**
      * @private
      * @returns {JSX.Element}
      */
-
-  }, {
-    key: "renderHeader",
-    value: function renderHeader() {
-      var _this40 = this;
+    function renderHeader() {
+      var _this41 = this;
 
       var classes = this.props.classes;
       var filterClearInValue = null;
@@ -5797,7 +5963,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       if (!this.columnsVisibility.buttons && !this.isFilterEmpty()) {
         filterClearInValue = /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           onClick: function onClick() {
-            return _this40.clearFilter();
+            return _this41.clearFilter();
           },
           className: classes.buttonClearFilter,
           title: this.props.t('ra_Clear filter'),
@@ -5812,68 +5978,105 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
-          width: this.columnsVisibility.id
-        }
-      }, this.getFilterInput('id')), this.columnsVisibility.name ? /*#__PURE__*/_react["default"].createElement("div", {
+          width: this.columnsVisibility.id,
+          position: 'relative'
+        },
+        "data-min": 240,
+        "data-name": "id"
+      }, this.getFilterInput('id'), /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.resizeHandle + ' ' + this.props.classes.resizeHandleRight,
+        onMouseDown: this.resizerMouseDown,
+        onDoubleClick: this.resizerReset,
+        title: this.props.t('ra_Double click to reset table layout')
+      })), this.columnsVisibility.name ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.nameHeader
-        }
+        },
+        "data-min": 100,
+        "data-name": "nameHeader"
       }, this.getFilterInput('name')) : null, !this.state.statesView && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.columnsVisibility.type ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.type
-        }
+        },
+        "data-min": 100,
+        "data-name": "type"
       }, this.getFilterSelectType()) : null, this.columnsVisibility.role ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.role
-        }
+        },
+        "data-min": 100,
+        "data-name": "role"
       }, this.getFilterSelectRole()) : null, this.columnsVisibility.room ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.room
-        }
+        },
+        "data-min": 100,
+        "data-name": "room"
       }, this.getFilterSelectRoom()) : null, this.columnsVisibility.func ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.func
-        }
+        },
+        "data-min": 100,
+        "data-name": "func"
       }, this.getFilterSelectFunction()) : null), this.state.statesView && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
         style: {
           width: this.columnsVisibility.changedFrom
-        }
+        },
+        "data-min": 100,
+        "data-name": "changedFrom"
       }, this.props.t('ra_Changed from')), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
         style: {
           width: this.columnsVisibility.qualityCode
-        }
+        },
+        "data-min": 100,
+        "data-name": "qualityCode"
       }, this.props.t('ra_Quality code')), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
         style: {
           width: this.columnsVisibility.timestamp
-        }
+        },
+        "data-min": 100,
+        "data-name": "timestamp"
       }, this.props.t('ra_Timestamp')), /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
         style: {
           width: this.columnsVisibility.lastChange
-        }
+        },
+        "data-min": 100,
+        "data-name": "lastChange"
       }, this.props.t('ra_Last change'))), this.adapterColumns.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
           style: {
-            width: _this40.columnsVisibility[item.id]
+            width: _this41.columnsVisibility[item.id]
           },
           title: item.adapter,
-          key: item.id
+          key: item.id,
+          "data-min": 100,
+          "data-name": item.id
         }, item.name);
       }), this.columnsVisibility.val ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _Utils["default"].clsx(classes.headerCell, classes.headerCellValue),
         style: {
-          width: this.columnsVisibility.val
-        }
-      }, this.props.t('ra_Value'), filterClearInValue) : null, this.columnsVisibility.buttons ? /*#__PURE__*/_react["default"].createElement("div", {
+          width: this.columnsVisibility.val,
+          position: 'relative'
+        },
+        "data-min": 120,
+        "data-name": "val"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.resizeHandle + ' ' + this.props.classes.resizeHandleLeft,
+        "data-left": "true",
+        onMouseDown: this.resizerMouseDown,
+        onDoubleClick: this.resizerReset,
+        title: this.props.t('ra_Double click to reset table layout')
+      }), this.props.t('ra_Value'), filterClearInValue) : null, this.columnsVisibility.buttons ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.headerCell,
         style: {
           width: this.columnsVisibility.buttons
@@ -5888,18 +6091,18 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderToast",
     value: function renderToast() {
-      var _this41 = this;
+      var _this42 = this;
 
       return /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {
         open: !!this.state.toast,
         autoHideDuration: 3000,
         onClick: function onClick() {
-          return _this41.setState({
+          return _this42.setState({
             toast: ''
           });
         },
         onClose: function onClose() {
-          return _this41.setState({
+          return _this42.setState({
             toast: ''
           });
         },
@@ -5909,7 +6112,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           "aria-label": "close",
           color: "inherit",
           onClick: function onClick() {
-            return _this41.setState({
+            return _this42.setState({
               toast: ''
             });
           }
@@ -5925,14 +6128,14 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _this42 = this;
+      var _this43 = this;
 
       if (this.tableRef.current) {
         var scrollBarWidth = this.tableRef.current.offsetWidth - this.tableRef.current.clientWidth;
 
         if (this.state.scrollBarWidth !== scrollBarWidth) {
           setTimeout(function () {
-            return _this42.setState({
+            return _this43.setState({
               scrollBarWidth: scrollBarWidth
             });
           }, 100);
@@ -5962,13 +6165,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderCustomDialog",
     value: function renderCustomDialog() {
-      var _this43 = this;
+      var _this44 = this;
 
       if (this.state.customDialog && this.props.objectCustomDialog) {
         var ObjectCustomDialog = this.props.objectCustomDialog;
         return /*#__PURE__*/_react["default"].createElement(ObjectCustomDialog, {
           reportChangedIds: function reportChangedIds(changedIds) {
-            return _this43.changedIds = (0, _toConsumableArray2["default"])(changedIds);
+            return _this44.changedIds = (0, _toConsumableArray2["default"])(changedIds);
           },
           objectIDs: this.state.customDialog,
           expertMode: this.state.filter.expertMode,
@@ -5982,19 +6185,19 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           objects: this.objects,
           customsInstances: this.info.customs,
           onClose: function onClose() {
-            _this43.pauseSubscribe(false);
+            _this44.pauseSubscribe(false);
 
-            _this43.setState({
+            _this44.setState({
               customDialog: null
             });
 
-            if (_this43.changedIds) {
-              _this43.changedIds = null; // update all changed IDs
+            if (_this44.changedIds) {
+              _this44.changedIds = null; // update all changed IDs
 
-              _this43.forceUpdate();
+              _this44.forceUpdate();
             }
 
-            _this43.props.router && _this43.props.router.doNavigate('tab-objects');
+            _this44.props.router && _this44.props.router.doNavigate('tab-objects');
           }
         });
       } else {
@@ -6009,7 +6212,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "onUpdate",
     value: function onUpdate(valAck) {
-      var _this44 = this;
+      var _this45 = this;
 
       this.props.socket.setState(this.edit.id, {
         val: valAck.val,
@@ -6017,7 +6220,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         q: valAck.q || 0,
         expire: valAck.expire || undefined
       })["catch"](function (e) {
-        return _this44.showError('Cannot write value: ' + e);
+        return _this45.showError('Cannot write value: ' + e);
       });
     }
     /**
@@ -6028,7 +6231,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderEditObjectDialog",
     value: function renderEditObjectDialog() {
-      var _this45 = this;
+      var _this46 = this;
 
       if (!this.state.editObjectDialog || !this.props.objectBrowserEditObject) {
         return null;
@@ -6048,24 +6251,24 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         t: this.props.t,
         expertMode: this.state.filter.expertMode,
         onNewObject: function onNewObject(obj) {
-          return _this45.props.socket.setObject(obj._id, obj).then(function () {
-            return _this45.setState({
+          return _this46.props.socket.setObject(obj._id, obj).then(function () {
+            return _this46.setState({
               editObjectDialog: obj._id
             }, function () {
-              return _this45.onSelect(obj._id);
+              return _this46.onSelect(obj._id);
             });
           })["catch"](function (e) {
-            return _this45.showError('Cannot write object: ' + e);
+            return _this46.showError('Cannot write object: ' + e);
           });
         },
         onClose: function onClose(obj) {
-          _this45.setState({
+          _this46.setState({
             editObjectDialog: ''
           });
 
           if (obj) {
-            _this45.props.socket.setObject(obj._id, obj)["catch"](function (e) {
-              return _this45.showError('Cannot write object: ' + e);
+            _this46.props.socket.setObject(obj._id, obj)["catch"](function (e) {
+              return _this46.showError('Cannot write object: ' + e);
             });
           }
         }
@@ -6079,7 +6282,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderViewObjectFileDialog",
     value: function renderViewObjectFileDialog() {
-      var _this46 = this;
+      var _this47 = this;
 
       if (!this.state.viewFileDialog || !this.props.objectBrowserViewFile) {
         return null;
@@ -6095,7 +6298,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         t: this.props.t,
         expertMode: this.state.filter.expertMode,
         onClose: function onClose() {
-          return _this46.setState({
+          return _this47.setState({
             viewFileDialog: ''
           });
         }
@@ -6110,7 +6313,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
     key: "renderEditValueDialog",
     value: function renderEditValueDialog() {
       var _this$objects$this$ed,
-          _this47 = this;
+          _this48 = this;
 
       if (!this.state.updateOpened || !this.props.objectBrowserValue) {
         return null;
@@ -6141,11 +6344,11 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
         defaultHistory: this.defaultHistory,
         dateFormat: this.props.dateFormat,
         onClose: function onClose(res) {
-          _this47.setState({
+          _this48.setState({
             updateOpened: false
           });
 
-          res && _this47.onUpdate(res);
+          res && _this48.onUpdate(res);
         }
       });
     }
@@ -6157,7 +6360,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
      * @returns {JSX.Element}
      */
     function render() {
-      var _this48 = this;
+      var _this49 = this;
 
       this.recordStates = [];
       this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer); // apply filter if changed
@@ -6172,13 +6375,13 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
 
         if (counter.count < 500 && !this.state.expandAllVisible) {
           setTimeout(function () {
-            return _this48.setState({
+            return _this49.setState({
               expandAllVisible: true
             });
           });
         } else if (counter.count >= 500 && this.state.expandAllVisible) {
           setTimeout(function () {
-            return _this48.setState({
+            return _this49.setState({
               expandAllVisible: false
             });
           });
@@ -6188,9 +6391,9 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       }
 
       this.unsubscribeTimer = setTimeout(function () {
-        _this48.unsubscribeTimer = null;
+        _this49.unsubscribeTimer = null;
 
-        _this48.checkUnsubscribes();
+        _this49.checkUnsubscribes();
       }, 200);
 
       if (!this.state.loaded) {