@iobroker/gui-components 10.0.2 → 10.0.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.0.2",
+        "@iobroker/gui-components": "^10.0.3",
         "@mui/icons-material": "^9.0.1",
         "@mui/material": "^9.0.1",
         "react": "^19.2.5",
@@ -856,6 +856,10 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 10.0.3 (2026-07-25)
+
+- (@GermanBluefox) Split the object browser into the directory `Components/ObjectBrowser` (no API changes)
+
 ### 10.0.2 (2026-07-25)
 
 - (@GermanBluefox) BREAKING: Package renamed from `@iobroker/adapter-react-v5` to `@iobroker/gui-components`

package/build/Components/FileBrowser.js

@@ -39,12 +39,18 @@ const styles = {
         overflow: 'hidden',
         height: '100%',
         position: 'relative',
+        // toolbar, path and the file list are stacked, the list takes the remaining height
+        display: 'flex',
+        flexDirection: 'column',
     },
     filesDiv: {
         width: 'calc(100% - 8px)',
         overflowX: 'hidden',
         overflowY: 'auto',
         padding: 8,
+        // takes the remaining height, `minHeight` allows it to shrink in the flex column
+        flex: '1 1 auto',
+        minHeight: 0,
     },
     filesDivHint: {
         position: 'absolute',
@@ -54,16 +60,12 @@ const styles = {
         fontStyle: 'italic',
         fontSize: 12,
     },
-    filesDivTable: {
-        height: 'calc(100% - 56px)',
-    },
+    filesDivTable: {},
     filesDivTile: {
-        height: `calc(100% - ${48 * 2 + 8}px)`,
         display: 'flex',
         alignContent: 'flex-start',
         alignItems: 'stretch',
         flexWrap: 'wrap',
-        flex: `0 0 ${TILE_WIDTH}px`,
     },
     itemTile: (theme) => ({
         position: 'relative',
@@ -106,7 +108,8 @@ const styles = {
         top: 22,
         left: 18,
         zIndex: 1,
-        color: theme.palette.mode === 'dark' ? '#FFF' : '#FFF',
+        // the arrow is drawn on the folder icon (secondary.main)
+        color: theme.palette.secondary.contrastText,
     }),
     itemSizeTile: {
         width: '100%',
@@ -564,6 +567,15 @@ export class FileBrowserClass extends Component {
         this.mounted = false;
         this.browseList = null;
         this.browseListRunning = false;
+        // the timers must not fire after the component was destroyed
+        if (this.setOpacityTimer) {
+            clearTimeout(this.setOpacityTimer);
+            this.setOpacityTimer = null;
+        }
+        if (this.cacheFoldersTimeout) {
+            clearTimeout(this.cacheFoldersTimeout);
+            this.cacheFoldersTimeout = null;
+        }
         Object.values(this._tempTimeout).forEach(timer => {
             if (timer) {
                 clearTimeout(timer);
@@ -1769,13 +1781,6 @@ export class FileBrowserClass extends Component {
             React.createElement("div", { style: {
                     ...styles.filesDiv,
                     ...styles[this.state.viewType === 'Tile' ? 'filesDivTile' : 'filesDivTable'],
-                    height: this.props.showToolbar
-                        ? this.state.viewType === 'Tile'
-                            ? `calc(100% - ${48 + 8}px)`
-                            : 'calc(100% - 56px)'
-                        : this.state.viewType === 'Tile'
-                            ? `calc(100% - ${48 * 2 + 8}px)`
-                            : 'calc(100% - 8px)',
                 }, onClick: e => {
                     if (this.state.viewType !== TABLE) {
                         if (this.state.selected !== (this.state.currentDir || '/')) {