@iobroker/adapter-react-v5 8.2.10 → 8.2.12

package/README.md

@@ -690,6 +690,13 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 8.2.12 (2026-06-20)
+- (@GermanBluefox) Correcetd InfoBox color
+
+### 8.2.11 (2026-06-19)
+- (@GermanBluefox) Correcting background of state if overloaded
+- (@GermanBluefox) Moved translations for json-config to other package
+
 ### 8.2.10 (2026-06-16)
 - (@GermanBluefox) Corrected the folder creation
 

package/build/Components/InfoBox.js

@@ -84,7 +84,7 @@ export class InfoBox extends React.Component {
                 borderColor: theme => this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,
             } },
             this.props.type === 'ok' ? (React.createElement(Check, { style: { color: '#0F0' } })) : this.props.type === 'info' ? (React.createElement(Info, { color: "primary" })) : (React.createElement(Warning, { color: this.props.type })),
-            React.createElement(Typography, { ref: this.refTypo }, this.props.children),
+            React.createElement(Typography, { ref: this.refTypo, sx: { color: 'text.primary' } }, this.props.children),
             this.props.closeable ? (React.createElement(Icon, { sx: {
                     color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),
                     // alignSelf: 'flex-start',

package/build/Components/InfoBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoBox.js","sourceRoot":"./src/","sources":["Components/InfoBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { Info, Warning, Close, Visibility, type SvgIconComponent, Check } from '@mui/icons-material';\n\ninterface InfoBoxProps {\n    /** Text to display in the info box */\n    children: string | (string | React.JSX.Element | null)[] | React.JSX.Element;\n    /** The type determines the color and symbol */\n    type: 'warning' | 'info' | 'error' | 'ok';\n    /** If the Box is closeable */\n    closeable?: boolean;\n    /** Use together with `closeable: true`. You can specify in which variable in local storage the state of this info box could be stored */\n    storeId?: string;\n    /** Use together with `closeable: true`, listener called if close button clicked */\n    onClose?: (desiredState: boolean) => void;\n    /** Custom style */\n    style?: React.CSSProperties;\n    /** Icon position */\n    iconPosition?: 'top' | 'middle';\n    /** Use together with `closeable: true`. If the box is closed or not. In this case, it will be controlled from outside */\n    closed?: boolean;\n}\n\ninterface InfoBoxState {\n    closed: boolean;\n}\n/**\n * This component can be used to show important information or warnings to the user\n */\nexport class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {\n    private readonly refTypo: React.RefObject<HTMLDivElement>;\n    private height: number;\n    private width: number;\n\n    constructor(props: InfoBoxProps) {\n        super(props);\n        this.state = {\n            closed: this.props.storeId ? window.localStorage.getItem(this.props.storeId) === 'true' : false,\n        };\n        this.height = 0;\n        this.width = 0;\n\n        this.refTypo = React.createRef();\n    }\n\n    componentDidMount(): void {\n        this.detectHeight();\n    }\n\n    onClick(): void {\n        if (this.props.storeId && this.props.closed === undefined) {\n            if (this.state.closed) {\n                window.localStorage.removeItem(this.props.storeId);\n            } else {\n                window.localStorage.setItem(this.props.storeId, 'true');\n            }\n        }\n        if (this.props.closed === undefined) {\n            this.setState({ closed: !this.state.closed }, () => {\n                // Inform about state change\n                if (this.props.onClose) {\n                    this.props.onClose(this.state.closed);\n                }\n            });\n        } else if (this.props.onClose) {\n            this.props.onClose(!this.props.closed);\n        }\n    }\n\n    detectHeight(): void {\n        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n        // We must get the height of the element when it is open to make transition\n        if (this.props.closeable && !closed && this.refTypo.current) {\n            window.requestAnimationFrame(() => {\n                const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n                if (closed) {\n                    return;\n                }\n                if (this.refTypo.current && (!this.height || this.width !== this.refTypo.current.clientWidth)) {\n                    this.height = this.refTypo.current.clientHeight;\n                    this.width = this.refTypo.current.clientWidth;\n                    this.forceUpdate();\n                }\n            });\n        }\n    }\n\n    componentDidUpdate(): void {\n        this.detectHeight();\n    }\n\n    render(): React.ReactNode {\n        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n\n        const Icon: SvgIconComponent = closed ? Visibility : Close;\n\n        return (\n            <Box\n                className=\"iom-info-box\"\n                style={{\n                    whiteSpace: 'preserve',\n                    display: 'flex',\n                    gap: 8,\n                    alignItems: closed || this.props.iconPosition === 'top' ? 'flex-start' : 'center',\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    padding: 4,\n                    borderRadius: 5,\n                    marginBottom: 8,\n                    maxWidth: '100%',\n                    transition: 'height 0.5s',\n                    height: this.props.closeable ? (closed ? 30 : this.height || undefined) : undefined,\n                    overflow: this.props.closeable ? 'hidden' : undefined,\n                    position: 'relative',\n                    ...this.props.style,\n                }}\n                sx={{\n                    borderColor: theme =>\n                        this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,\n                }}\n            >\n                {this.props.type === 'ok' ? (\n                    <Check style={{ color: '#0F0' }} />\n                ) : this.props.type === 'info' ? (\n                    <Info color=\"primary\" />\n                ) : (\n                    <Warning color={this.props.type} />\n                )}\n                <Typography ref={this.refTypo}>{this.props.children}</Typography>\n                {this.props.closeable ? (\n                    <Icon\n                        sx={{\n                            color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),\n                            // alignSelf: 'flex-start',\n                            cursor: 'pointer',\n                            position: 'absolute',\n                            top: 4,\n                            right: 4,\n                        }}\n                        onClick={() => this.onClick()}\n                    />\n                ) : null}\n                {/* Reserve place for button so it will not overlap the text */}\n                {this.props.closeable ? <div style={{ width: 22 }} /> : null}\n                {closed ? (\n                    <Box\n                        // This is a shadow box at the bottom of the InfoBox when it closed\n                        component=\"div\"\n                        sx={theme => {\n                            const color = theme.palette[this.props.type === 'ok' ? 'info' : this.props.type].main;\n                            return {\n                                background: `linear-gradient(${color}00 0%, ${color}10 60%, ${color}90 100%)`,\n                            };\n                        }}\n                        style={{\n                            bottom: 0,\n                            position: 'absolute',\n                            left: 0,\n                            right: 0,\n                            height: 10,\n                        }}\n                    />\n                ) : null}\n            </Box>\n        );\n    }\n}\n"]}
+{"version":3,"file":"InfoBox.js","sourceRoot":"./src/","sources":["Components/InfoBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { Info, Warning, Close, Visibility, type SvgIconComponent, Check } from '@mui/icons-material';\n\ninterface InfoBoxProps {\n    /** Text to display in the info box */\n    children: string | (string | React.JSX.Element | null)[] | React.JSX.Element;\n    /** The type determines the color and symbol */\n    type: 'warning' | 'info' | 'error' | 'ok';\n    /** If the Box is closeable */\n    closeable?: boolean;\n    /** Use together with `closeable: true`. You can specify in which variable in local storage the state of this info box could be stored */\n    storeId?: string;\n    /** Use together with `closeable: true`, listener called if close button clicked */\n    onClose?: (desiredState: boolean) => void;\n    /** Custom style */\n    style?: React.CSSProperties;\n    /** Icon position */\n    iconPosition?: 'top' | 'middle';\n    /** Use together with `closeable: true`. If the box is closed or not. In this case, it will be controlled from outside */\n    closed?: boolean;\n}\n\ninterface InfoBoxState {\n    closed: boolean;\n}\n/**\n * This component can be used to show important information or warnings to the user\n */\nexport class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {\n    private readonly refTypo: React.RefObject<HTMLDivElement>;\n    private height: number;\n    private width: number;\n\n    constructor(props: InfoBoxProps) {\n        super(props);\n        this.state = {\n            closed: this.props.storeId ? window.localStorage.getItem(this.props.storeId) === 'true' : false,\n        };\n        this.height = 0;\n        this.width = 0;\n\n        this.refTypo = React.createRef();\n    }\n\n    componentDidMount(): void {\n        this.detectHeight();\n    }\n\n    onClick(): void {\n        if (this.props.storeId && this.props.closed === undefined) {\n            if (this.state.closed) {\n                window.localStorage.removeItem(this.props.storeId);\n            } else {\n                window.localStorage.setItem(this.props.storeId, 'true');\n            }\n        }\n        if (this.props.closed === undefined) {\n            this.setState({ closed: !this.state.closed }, () => {\n                // Inform about state change\n                if (this.props.onClose) {\n                    this.props.onClose(this.state.closed);\n                }\n            });\n        } else if (this.props.onClose) {\n            this.props.onClose(!this.props.closed);\n        }\n    }\n\n    detectHeight(): void {\n        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n        // We must get the height of the element when it is open to make transition\n        if (this.props.closeable && !closed && this.refTypo.current) {\n            window.requestAnimationFrame(() => {\n                const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n                if (closed) {\n                    return;\n                }\n                if (this.refTypo.current && (!this.height || this.width !== this.refTypo.current.clientWidth)) {\n                    this.height = this.refTypo.current.clientHeight;\n                    this.width = this.refTypo.current.clientWidth;\n                    this.forceUpdate();\n                }\n            });\n        }\n    }\n\n    componentDidUpdate(): void {\n        this.detectHeight();\n    }\n\n    render(): React.ReactNode {\n        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n\n        const Icon: SvgIconComponent = closed ? Visibility : Close;\n\n        return (\n            <Box\n                className=\"iom-info-box\"\n                style={{\n                    whiteSpace: 'preserve',\n                    display: 'flex',\n                    gap: 8,\n                    alignItems: closed || this.props.iconPosition === 'top' ? 'flex-start' : 'center',\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    padding: 4,\n                    borderRadius: 5,\n                    marginBottom: 8,\n                    maxWidth: '100%',\n                    transition: 'height 0.5s',\n                    height: this.props.closeable ? (closed ? 30 : this.height || undefined) : undefined,\n                    overflow: this.props.closeable ? 'hidden' : undefined,\n                    position: 'relative',\n                    ...this.props.style,\n                }}\n                sx={{\n                    borderColor: theme =>\n                        this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,\n                }}\n            >\n                {this.props.type === 'ok' ? (\n                    <Check style={{ color: '#0F0' }} />\n                ) : this.props.type === 'info' ? (\n                    <Info color=\"primary\" />\n                ) : (\n                    <Warning color={this.props.type} />\n                )}\n                <Typography\n                    ref={this.refTypo}\n                    sx={{ color: 'text.primary' }}\n                >\n                    {this.props.children}\n                </Typography>\n                {this.props.closeable ? (\n                    <Icon\n                        sx={{\n                            color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),\n                            // alignSelf: 'flex-start',\n                            cursor: 'pointer',\n                            position: 'absolute',\n                            top: 4,\n                            right: 4,\n                        }}\n                        onClick={() => this.onClick()}\n                    />\n                ) : null}\n                {/* Reserve place for button so it will not overlap the text */}\n                {this.props.closeable ? <div style={{ width: 22 }} /> : null}\n                {closed ? (\n                    <Box\n                        // This is a shadow box at the bottom of the InfoBox when it closed\n                        component=\"div\"\n                        sx={theme => {\n                            const color = theme.palette[this.props.type === 'ok' ? 'info' : this.props.type].main;\n                            return {\n                                background: `linear-gradient(${color}00 0%, ${color}10 60%, ${color}90 100%)`,\n                            };\n                        }}\n                        style={{\n                            bottom: 0,\n                            position: 'absolute',\n                            left: 0,\n                            right: 0,\n                            height: 10,\n                        }}\n                    />\n                ) : null}\n            </Box>\n        );\n    }\n}\n"]}

package/build/Components/ObjectBrowser.js

@@ -3416,24 +3416,30 @@ export class ObjectBrowserClass extends Component {
         if (id === '0_userdata') {
             checkColor = COLOR_NAME_USERDATA(this.props.themeType);
             bold = true;
+            invertBackground = false;
         }
         else if (id === 'alias') {
             checkColor = COLOR_NAME_ALIAS(this.props.themeType);
             bold = true;
+            invertBackground = false;
         }
         else if (id === 'javascript') {
             checkColor = COLOR_NAME_JAVASCRIPT(this.props.themeType);
             bold = true;
+            invertBackground = false;
         }
         else if (id === 'system') {
             checkColor = COLOR_NAME_SYSTEM(this.props.themeType);
             bold = true;
+            invertBackground = false;
         }
         else if (id === 'system.adapter') {
             checkColor = COLOR_NAME_SYSTEM_ADAPTER(this.props.themeType);
+            invertBackground = false;
         }
         else if (!checkColor || this.state.selected.includes(id)) {
             checkColor = 'inherit';
+            invertBackground = false;
         }
         const icons = [];
         if (common?.statusStates) {
@@ -3462,6 +3468,7 @@ export class ObjectBrowserClass extends Component {
             let colorSet = false;
             if (common.statusStates.errorId && this.states[ids.errorId] && this.states[ids.errorId].val) {
                 checkColor = this.props.themeType === 'dark' ? COLOR_NAME_ERROR_DARK : COLOR_NAME_ERROR_LIGHT;
+                invertBackground = false;
                 colorSet = true;
                 icons.push(React.createElement(IconError, { key: "error", 
                     // title={this.texts.deviceError}
@@ -3472,6 +3479,7 @@ export class ObjectBrowserClass extends Component {
                     if (this.states[ids.onlineId].val) {
                         checkColor =
                             this.props.themeType === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT;
+                        invertBackground = false;
                         icons.push(React.createElement(IconConnection, { key: "conn", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceConnected }));
@@ -3481,6 +3489,7 @@ export class ObjectBrowserClass extends Component {
                             this.props.themeType === 'dark'
                                 ? COLOR_NAME_DISCONNECTED_DARK
                                 : COLOR_NAME_DISCONNECTED_LIGHT;
+                        invertBackground = false;
                         icons.push(React.createElement(IconDisconnected, { key: "disc", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceDisconnected }));
@@ -3504,6 +3513,7 @@ export class ObjectBrowserClass extends Component {
                             this.props.themeType === 'dark'
                                 ? COLOR_NAME_DISCONNECTED_DARK
                                 : COLOR_NAME_DISCONNECTED_LIGHT;
+                        invertBackground = false;
                         icons.push(React.createElement(IconDisconnected, { key: "disc", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceDisconnected }));
@@ -3511,6 +3521,7 @@ export class ObjectBrowserClass extends Component {
                     else {
                         checkColor =
                             this.props.themeType === 'dark' ? COLOR_NAME_CONNECTED_DARK : COLOR_NAME_CONNECTED_LIGHT;
+                        invertBackground = false;
                         icons.push(React.createElement(IconConnection, { key: "conn", 
                             // title={this.texts.deviceError}
                             style: this.styles.iconDeviceConnected }));