@iobroker/gui-components 10.2.1 → 10.2.3

package/README.md

@@ -36,7 +36,7 @@ npm create vite@latest src -- --template react-ts
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@iobroker/gui-components": "^10.2.1",
+        "@iobroker/gui-components": "^10.2.3",
         "@mui/icons-material": "^9.0.1",
         "@mui/material": "^9.0.1",
         "react": "^19.2.5",
@@ -877,6 +877,19 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 10.2.3 (2026-09-04)
+
+- (@GermanBluefox) Fixed: Expert button highlighted in the object browser
+
+### 10.2.2 (2026-09-03)
+
+- (@GermanBluefox) Fixed: the object browser lost the column widths as soon as the page was left and opened again. Every width class has its own widths, and the stored ones were written into the class that was guessed before the container was measured, so the table fell back to the defaults of the class it really had: https://github.com/ioBroker/ioBroker.admin/issues/3616
+- (@GermanBluefox) Fixed: after reopening the object browser, the next resize stored only the two columns it touched and dropped every other width the user had set
+- (@GermanBluefox) Fixed: with "Auto" switched off, the checkboxes for "Changed from", "Quality code", "Timestamp" and "Last change" had no effect, and the header of the states view showed those columns although the rows had no cells for them
+- (@GermanBluefox) Fixed: the buttons column could not be resized, as neither it nor the value column in front of it had a resize handle
+- (@GermanBluefox) Fixed: switching "Auto" off did not store the column selection, so after a reload the table showed nothing but the ID column
+- (@GermanBluefox) A double click on a resize handle resets the widths of all width classes now, not only of the current one
+
 ### 10.2.1 (2026-08-31)
 
 - (@GermanBluefox) Changed layouts for some components

package/build/Components/ObjectBrowser/ObjectBrowserClass.d.ts

@@ -32,6 +32,8 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private observedContainer;
     /** Width class for which the columns were calculated the last time */
     private lastCalculatedWidth;
+    /** States view for which the columns were calculated the last time */
+    private lastCalculatedStatesView;
     private pausedSubscribes;
     /** The tree was rebuilt while subscribes were paused, so the filter must be re-applied on resume */
     private treeRebuiltWhilePaused;
@@ -74,7 +76,12 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private resizerPosition;
     private resizerActiveDiv;
     private resizerNextDiv;
-    private storedWidths;
+    /**
+     * The column widths the user stored for this dialog, as they were written to
+     * `<dialogName>.table`. They are kept independently of the width class, because the class is
+     * only known after the container was measured and changes when the window is resized.
+     */
+    private storedColumnWidths;
     systemConfig: ioBroker.SystemConfigObject | null;
     objects: Record<string, ioBroker.Object>;
     defaultHistory: string;
@@ -128,6 +135,15 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
         initValue: boolean | number | string;
     };
     constructor(props: ObjectBrowserProps);
+    /**
+     * Write the stored column widths into the width class that is active now.
+     *
+     * Every width class has its own default widths, and the class of the object browser is only
+     * known after its container was measured - in the constructor it is still the initial guess.
+     * The stored widths must therefore be applied again whenever the class changes, otherwise the
+     * table falls back to the defaults of the new class and the user sees their widths reset.
+     */
+    applyStoredWidths(): void;
     loadAllObjects(update?: boolean): Promise<void>;
     expandAllSelected(cb?: () => void): void;
     /**

package/build/Components/ObjectBrowser/ObjectBrowserClass.js

@@ -53,6 +53,8 @@ export class ObjectBrowserClass extends Component {
     observedContainer = null;
     /** Width class for which the columns were calculated the last time */
     lastCalculatedWidth = null;
+    /** States view for which the columns were calculated the last time */
+    lastCalculatedStatesView = null;
     pausedSubscribes = false;
     /** The tree was rebuilt while subscribes were paused, so the filter must be re-applied on resume */
     treeRebuiltWhilePaused = false;
@@ -95,7 +97,12 @@ export class ObjectBrowserClass extends Component {
     resizerPosition = 0;
     resizerActiveDiv = null;
     resizerNextDiv = null;
-    storedWidths = null;
+    /**
+     * The column widths the user stored for this dialog, as they were written to
+     * `<dialogName>.table`. They are kept independently of the width class, because the class is
+     * only known after the container was measured and changes when the window is resized.
+     */
+    storedColumnWidths = null;
     systemConfig = null;
     objects;
     defaultHistory = '';
@@ -355,29 +362,51 @@ export class ObjectBrowserClass extends Component {
         const resizerCurrentWidthsStr = this.localStorage.getItem(`${this.props.dialogName || 'App'}.table`);
         if (resizerCurrentWidthsStr) {
             try {
-                const resizerCurrentWidths = JSON.parse(resizerCurrentWidthsStr);
-                const width = this.width || 'lg';
-                this.storedWidths = JSON.parse(JSON.stringify(this.screenWidths[width]));
-                Object.keys(resizerCurrentWidths).forEach(id => {
-                    if (id === 'id') {
-                        this.screenWidths[width].idWidth = resizerCurrentWidths.id;
-                    }
-                    else if (id === 'nameHeader') {
-                        // widths stored by an older version, where the header had an own width
-                        this.screenWidths[width].widths.name = resizerCurrentWidths[id];
-                    }
-                    else if (this.screenWidths[width].widths[id] !== undefined) {
-                        this.screenWidths[width].widths[id] = resizerCurrentWidths[id];
-                    }
+                const parsed = JSON.parse(resizerCurrentWidthsStr);
+                const storedColumnWidths = {};
+                Object.keys(parsed).forEach(id => {
+                    // widths stored by an older version, where the header had an own width
+                    storedColumnWidths[id === 'nameHeader' ? 'name' : id] = parsed[id];
                 });
-                this.customWidth = true;
+                this.storedColumnWidths = storedColumnWidths;
+                // The resizer has to start from the stored widths too. Without them the next drag
+                // would write only the two columns it touched back to the storage, and every other
+                // width the user had set would be lost.
+                this.resizerCurrentWidths = { ...storedColumnWidths };
             }
             catch {
-                // ignore
+                this.storedColumnWidths = null;
             }
         }
+        this.applyStoredWidths();
         this.calculateColumnsVisibility();
     }
+    /**
+     * Write the stored column widths into the width class that is active now.
+     *
+     * Every width class has its own default widths, and the class of the object browser is only
+     * known after its container was measured - in the constructor it is still the initial guess.
+     * The stored widths must therefore be applied again whenever the class changes, otherwise the
+     * table falls back to the defaults of the new class and the user sees their widths reset.
+     */
+    applyStoredWidths() {
+        if (!this.storedColumnWidths) {
+            return;
+        }
+        const screen = this.screenWidths[this.width || 'lg'];
+        const storedColumnWidths = this.storedColumnWidths;
+        Object.keys(storedColumnWidths).forEach(id => {
+            if (id === 'id') {
+                screen.idWidth = storedColumnWidths.id;
+            }
+            else if (screen.widths[id] !== undefined) {
+                // A column that this width class does not know keeps its place; only the widths of
+                // the columns the class actually shows may be overwritten.
+                screen.widths[id] = storedColumnWidths[id];
+            }
+        });
+        this.customWidth = true;
+    }
     async loadAllObjects(update) {
         const props = this.props;
         try {
@@ -1873,30 +1902,45 @@ export class ObjectBrowserClass extends Component {
         }
         else {
             const width = this.width || 'lg';
+            /**
+             * A row shows either type/role/room/function or the four columns of the states view,
+             * never both. A column of the set that is not shown must have the width zero, so that
+             * the ID column, which fills the rest of the row, gets the right place.
+             */
+            const shown = (name, inStatesView) => !!this.state.statesView === inStatesView && columns.includes(name);
+            /** Width of one column: what the user set for it, else the default of the width class */
+            const widthOf = (name) => columnsWidths[name] || WIDTHS[name] || 0;
+            /**
+             * The width classes below `lg` do not define the columns of the states view, but the
+             * user can select them by hand there too, so they fall back to the widest class.
+             */
+            const statesWidthOf = (name) => widthOf(name) || this.screenWidths.xl.widths[name] || 0;
             this.columnsVisibility = {
                 id: columnsWidths.id || this.screenWidths[width].idWidth,
-                name: columns.includes('name')
-                    ? columnsWidths.name || WIDTHS.name || this.screenWidths[width].widths.name || 0
-                    : 0,
-                type: columns.includes('type')
-                    ? columnsWidths.type || WIDTHS.type || this.screenWidths[width].widths.type || 0
-                    : 0,
-                role: columns.includes('role')
-                    ? columnsWidths.role || WIDTHS.role || this.screenWidths[width].widths.role || 0
-                    : 0,
-                room: columns.includes('room')
-                    ? columnsWidths.room || WIDTHS.room || this.screenWidths[width].widths.room || 0
-                    : 0,
-                func: columns.includes('func')
-                    ? columnsWidths.func || WIDTHS.func || this.screenWidths[width].widths.func || 0
-                    : 0,
+                name: columns.includes('name') ? widthOf('name') : 0,
+                type: shown('type', false) ? widthOf('type') : 0,
+                role: shown('role', false) ? widthOf('role') : 0,
+                room: shown('room', false) ? widthOf('room') : 0,
+                func: shown('func', false) ? widthOf('func') : 0,
+                // The states view columns were missing here completely: their checkboxes in the
+                // configuration dialog had no effect, and the header showed them although no row
+                // had a cell for them.
+                changedFrom: shown('changedFrom', true) ? statesWidthOf('changedFrom') : 0,
+                qualityCode: shown('qualityCode', true) ? statesWidthOf('qualityCode') : 0,
+                timestamp: shown('timestamp', true) ? statesWidthOf('timestamp') : 0,
+                lastChange: shown('lastChange', true) ? statesWidthOf('lastChange') : 0,
             };
             let widthSum = this.columnsVisibility.id; // id is always visible
             if (this.columnsVisibility.name) {
+                // Only one of the two sets has a width, so both may be added up
                 widthSum += this.columnsVisibility.type || 0;
                 widthSum += this.columnsVisibility.role || 0;
                 widthSum += this.columnsVisibility.room || 0;
                 widthSum += this.columnsVisibility.func || 0;
+                widthSum += this.columnsVisibility.changedFrom || 0;
+                widthSum += this.columnsVisibility.qualityCode || 0;
+                widthSum += this.columnsVisibility.timestamp || 0;
+                widthSum += this.columnsVisibility.lastChange || 0;
             }
             if (columnsForAdmin && columns) {
                 Object.keys(columnsForAdmin)
@@ -2049,6 +2093,10 @@ export class ObjectBrowserClass extends Component {
         }
     };
     resizerMouseUp = () => {
+        // Remember the new widths for the other width classes as well: the drag only changed two CSS
+        // variables, the width class of the container may change at any time afterwards.
+        this.storedColumnWidths = { ...this.resizerCurrentWidths };
+        this.applyStoredWidths();
         this.localStorage.setItem(`${this.props.dialogName || 'App'}.table`, JSON.stringify(this.resizerCurrentWidths));
         this.resizerActiveName = null;
         this.resizerNextName = null;
@@ -2058,7 +2106,6 @@ export class ObjectBrowserClass extends Component {
         window.removeEventListener('mouseup', this.resizerMouseUp);
     };
     resizerMouseDown = (e) => {
-        this.storedWidths ||= JSON.parse(JSON.stringify(this.screenWidths[this.width || 'lg']));
         this.resizerCurrentWidths ||= {};
         this.resizerActiveDiv = e.target.parentNode;
         this.resizerActiveName = this.resizerActiveDiv.dataset.name || null;
@@ -2085,6 +2132,12 @@ export class ObjectBrowserClass extends Component {
                     i++;
                 } */
             }
+            if (!this.resizerNextDiv) {
+                // The column is the last one of the row, there is no neighbour to take the place from
+                this.resizerActiveDiv = null;
+                this.resizerActiveName = null;
+                return;
+            }
             this.resizerNextName = this.resizerNextDiv.dataset.name || null;
             this.resizerMin = parseInt(this.resizerActiveDiv.dataset.min, 10) || 0;
             this.resizerNextMin = parseInt(this.resizerNextDiv.dataset.min, 10) || 0;
@@ -2167,7 +2220,13 @@ export class ObjectBrowserClass extends Component {
     }
     resizerReset = () => {
         this.customWidth = false;
-        this.screenWidths[this.width || 'lg'] = JSON.parse(JSON.stringify(this.storedWidths));
+        this.storedColumnWidths = null;
+        this.resizerCurrentWidths = {};
+        // Back to the defaults of every width class, not only of the one that is active now - the
+        // stored widths had been applied to every class the user had the browser open in.
+        Object.keys(SCREEN_WIDTHS).forEach(width => {
+            this.screenWidths[width] = JSON.parse(JSON.stringify(SCREEN_WIDTHS[width]));
+        });
         this.calculateColumnsVisibility();
         this.localStorage.removeItem(`${this.props.dialogName || 'App'}.table`);
         this.forceUpdate();
@@ -2381,9 +2440,13 @@ export class ObjectBrowserClass extends Component {
         if (!this.state.loaded) {
             return React.createElement(LinearProgress, { key: `${this.props.dialogName}_c` });
         }
-        // the container was resized into another width class => other columns are visible
-        if (this.lastCalculatedWidth !== this.width) {
+        // the container was resized into another width class => other columns are visible, and the
+        // stored widths have to be written into the defaults of the new class.
+        // The states view shows other columns too, so it has to be recalculated as well.
+        if (this.lastCalculatedWidth !== this.width || this.lastCalculatedStatesView !== this.state.statesView) {
             this.lastCalculatedWidth = this.width;
+            this.lastCalculatedStatesView = this.state.statesView;
+            this.applyStoredWidths();
             this.calculateColumnsVisibility();
         }
         const items = this.root ? this.renderItem(this.root, undefined) : null;