@iobroker/adapter-react-v5 7.0.2 → 7.1.1

package/src/Components/TextWithIcon.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Icon from './Icon';
 import Utils from './Utils';
-import { ThemeType } from '../types';
+import type { ThemeType } from '../types';
 
 const styles: Record<string, React.CSSProperties> = {
     div: {
@@ -53,7 +53,7 @@ interface TextWithIconItem {
     color?: string;
 }
 
-const TextWithIcon = (props: TextWithIconProps) => {
+const TextWithIcon = (props: TextWithIconProps): React.JSX.Element => {
     const value = props.value;
     let item: TextWithIconItem;
     const prefix = props.removePrefix || '';
@@ -125,24 +125,35 @@ const TextWithIcon = (props: TextWithIconProps) => {
         };
     }
 
-    const style = item?.color ? {
-        border:`1px solid ${Utils.invertColor(item?.color)}`,
-        color: Utils.getInvertedColor(item?.color, props.themeType || 'light', true) || undefined,
-        backgroundColor: item?.color,
-    } : {};
+    const style = item?.color
+        ? {
+              border: `1px solid ${Utils.invertColor(item?.color)}`,
+              color: Utils.getInvertedColor(item?.color, props.themeType || 'light', true) || undefined,
+              backgroundColor: item?.color,
+          }
+        : {};
 
-    return <div
-        style={{ ...(props.style || undefined), ...styles.div, ...(style || undefined) }}
-        className={Utils.clsx(props.className, props.moreClasses?.root)}
-        title={props.title || item.value}
-    >
-        {item?.icon ? <Icon
-            src={item?.icon}
-            className={props.moreClasses?.icon}
-            style={styles.icon}
-        /> : null}
-        <div style={styles.text} className={props.moreClasses?.text}>{item?.name}</div>
-    </div>;
+    return (
+        <div
+            style={{ ...(props.style || undefined), ...styles.div, ...(style || undefined) }}
+            className={Utils.clsx(props.className, props.moreClasses?.root)}
+            title={props.title || item.value}
+        >
+            {item?.icon ? (
+                <Icon
+                    src={item?.icon}
+                    className={props.moreClasses?.icon}
+                    style={styles.icon}
+                />
+            ) : null}
+            <div
+                style={styles.text}
+                className={props.moreClasses?.text}
+            >
+                {item?.name}
+            </div>
+        </div>
+    );
 };
 
 export default TextWithIcon;

package/src/Components/ToggleThemeMenu.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { IconButton, Tooltip } from '@mui/material';
 
@@ -19,16 +19,34 @@ interface ToggleThemeMenuProps {
 }
 
 export default function ToggleThemeMenu({
-    themeName, toggleTheme, t, className, style, size,
-}: ToggleThemeMenuProps) {
-    return <div className={className || undefined} style={style || undefined}>
-        <Tooltip title={t('ra_Change color theme')} componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}>
-            <IconButton onClick={() => toggleTheme()} size={size || 'medium'}>
-                {themeName === 'dark' && <Brightness4Icon className={className} />}
-                {themeName === 'blue' && <Brightness5Icon className={className} />}
-                {themeName === 'colored' && <Brightness6Icon className={className} />}
-                {themeName !== 'dark' && themeName !== 'blue' && themeName !== 'colored' && <Brightness7Icon className={className} />}
-            </IconButton>
-        </Tooltip>
-    </div>;
+    themeName,
+    toggleTheme,
+    t,
+    className,
+    style,
+    size,
+}: ToggleThemeMenuProps): JSX.Element {
+    return (
+        <div
+            className={className || undefined}
+            style={style || undefined}
+        >
+            <Tooltip
+                title={t('ra_Change color theme')}
+                slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}
+            >
+                <IconButton
+                    onClick={() => toggleTheme()}
+                    size={size || 'medium'}
+                >
+                    {themeName === 'dark' && <Brightness4Icon className={className} />}
+                    {themeName === 'blue' && <Brightness5Icon className={className} />}
+                    {themeName === 'colored' && <Brightness6Icon className={className} />}
+                    {themeName !== 'dark' && themeName !== 'blue' && themeName !== 'colored' && (
+                        <Brightness7Icon className={className} />
+                    )}
+                </IconButton>
+            </Tooltip>
+        </div>
+    );
 }