@iobroker/adapter-react-v5 6.0.0 → 6.0.2

package/Components/CustomModal.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IobTheme } from '../types';
 interface CustomModalProps {
     icon?: any;
     open: boolean;
@@ -19,6 +20,7 @@ interface CustomModalProps {
     progress?: boolean;
     textInput?: boolean;
     defaultValue?: string;
+    theme: IobTheme;
 }
 declare const CustomModal: (props: CustomModalProps) => React.JSX.Element;
 export default CustomModal;

package/Components/CustomModal.js

@@ -46,11 +46,11 @@ const styles = {
     content: {
         fontSize: 16,
     },
-    languageButton: (theme) => ({
+    languageButton: {
         position: 'absolute',
         right: 8,
         top: 8,
-    }),
+    },
     languageButtonActive: (theme) => ({
         color: theme.palette.primary.main,
     }),
@@ -69,7 +69,7 @@ const CustomModal = (props) => {
         title && react_1.default.createElement(material_1.DialogTitle, null,
             icon ? react_1.default.createElement(Icon, { style: styles.titleIcon }) : null,
             title,
-            i18n_1.default.getLanguage() !== 'en' && toggleTranslation ? react_1.default.createElement(material_1.IconButton, { size: "large", sx: Utils_1.default.getStyle(styles.languageButton, noTranslation && styles.languageButtonActive), onClick: () => toggleTranslation(), title: i18n_1.default.t('Disable/Enable translation') },
+            i18n_1.default.getLanguage() !== 'en' && toggleTranslation ? react_1.default.createElement(material_1.IconButton, { size: "large", sx: Utils_1.default.getStyle(props.theme, styles.languageButton, noTranslation && styles.languageButtonActive), onClick: () => toggleTranslation(), title: i18n_1.default.t('Disable/Enable translation') },
                 react_1.default.createElement(icons_material_1.Language, null)) : null),
         react_1.default.createElement(material_1.DialogContent, { style: Object.assign(Object.assign(Object.assign({}, styles.content), (overflowHidden ? styles.overflowHidden : undefined)), { paddingTop: 8 }) },
             textInput && react_1.default.createElement(material_1.TextField

package/Components/FileBrowser.js

@@ -1231,7 +1231,7 @@ class FileBrowserClass extends react_1.Component {
                         !this.state.selected.startsWith(`${this.limitToPath}/`) &&
                         this.limitToPath !== this.state.selected), title: this.props.t('ra_Upload file'), style: styles.menuButton, color: "inherit", "aria-label": "upload file", onClick: () => this.setState({ uploadFile: true }), size: "small" },
                 react_1.default.createElement(icons_material_1.Publish, { fontSize: "small" })) : null,
-            this.props.showTypeSelector && IconType ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Filter files') },
+            this.props.showTypeSelector && IconType ? react_1.default.createElement(material_1.Tooltip, { title: this.props.t('ra_Filter files'), componentsProps: { popper: { sx: styles.tooltip } } },
                 react_1.default.createElement(material_1.IconButton, { size: "small", onClick: e => this.setState({ showTypesMenu: e.target }) },
                     react_1.default.createElement(IconType, { fontSize: "small" }))) : null,
             this.state.showTypesMenu ? react_1.default.createElement(material_1.Menu, { open: !0, anchorEl: this.state.showTypesMenu, onClose: () => this.setState({ showTypesMenu: null }) }, Object.keys(FILE_TYPE_ICONS).map(type => {

package/Components/Icon.js

@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectIdIcon = exports.getSystemIcon = void 0;
+exports.getSystemIcon = getSystemIcon;
+exports.getSelectIdIcon = getSelectIdIcon;
+exports.default = Icon;
 const react_1 = __importDefault(require("react"));
 const react_inlinesvg_1 = __importDefault(require("react-inlinesvg"));
 const icons_material_1 = require("@mui/icons-material");
@@ -49,7 +51,6 @@ function getSystemIcon(obj) {
     }
     return icon || null;
 }
-exports.getSystemIcon = getSystemIcon;
 function getSelectIdIcon(obj, imagePrefix) {
     imagePrefix = imagePrefix || '.'; // http://localhost:8081';
     let src = '';
@@ -96,7 +97,6 @@ function getSelectIdIcon(obj, imagePrefix) {
     }
     return src || null;
 }
-exports.getSelectIdIcon = getSelectIdIcon;
 const REMOTE_SERVER = window.location.hostname.includes('iobroker.in');
 const REMOTE_PREFIX = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
 function Icon(props) {
@@ -135,4 +135,3 @@ function Icon(props) {
     }
     return null;
 }
-exports.default = Icon;

package/Components/ObjectBrowser.js

@@ -32,7 +32,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _a, _ObjectBrowserClass_NON_EXPERT_NAMESPACES;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectBrowserClass = exports.ITEM_IMAGES = exports.getSelectIdIconFromObjects = void 0;
+exports.ObjectBrowserClass = exports.ITEM_IMAGES = void 0;
+exports.getSelectIdIconFromObjects = getSelectIdIconFromObjects;
 /**
  * Copyright 2020-2024, Denis Haev <dogafox@gmail.com>
  *
@@ -719,37 +720,6 @@ const styles = {
         display: 'flex',
     },
 };
-function getStyle(theme, ...args) {
-    const result = {};
-    for (let a = 0; a < args.length; a++) {
-        if (typeof args[a] === 'function') {
-            Object.assign(result, args[a](theme));
-        }
-        else if (args[a] && typeof args[a] === 'object') {
-            Object.keys(args[a]).forEach((attr) => {
-                if (typeof args[a][attr] === 'function') {
-                    result[attr] = args[a][attr](theme);
-                }
-                else if (typeof args[a][attr] === 'object') {
-                    const obj = args[a][attr];
-                    result[attr] = {};
-                    Object.keys(obj).forEach((attr1) => {
-                        if (typeof obj[attr1] === 'function') {
-                            result[attr][attr1] = obj(theme);
-                        }
-                        else if (obj[attr1] || obj[attr1] === 0) {
-                            result[attr][attr1] = obj[attr1];
-                        }
-                    });
-                }
-                else if (args[a][attr] || args[a][attr] === 0) {
-                    result[attr] = args[a][attr];
-                }
-            });
-        }
-    }
-    return result;
-}
 /**
  * Function that walks through all keys of an object or array and applies a function to each key.
  */
@@ -947,7 +917,6 @@ function getSelectIdIconFromObjects(objects, id, imagePrefix) {
     }
     return src || null;
 }
-exports.getSelectIdIconFromObjects = getSelectIdIconFromObjects;
 function applyFilter(item, filters, lang, objects, context, counter, customFilter, selectedTypes, _depth) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     _depth = _depth || 0;
@@ -2793,7 +2762,7 @@ class ObjectBrowserClass extends react_1.Component {
             return null;
         }
         return react_1.default.createElement(material_1.Dialog, { onClose: () => this.setState({ columnsSelectorShow: false }), open: !0, sx: {
-                '& .MuiPaper-root': getStyle(this.props.theme, styles.dialogColumns, styles[`transparent_${this.state.columnsDialogTransparent}`]),
+                '& .MuiPaper-root': Utils_1.default.getStyle(this.props.theme, styles.dialogColumns, styles[`transparent_${this.state.columnsDialogTransparent}`]),
             } },
             react_1.default.createElement(material_1.DialogTitle, { sx: styles.fontSizeTitle }, this.props.t('ra_Configure')),
             react_1.default.createElement(material_1.DialogContent, { sx: styles.fontSizeTitle },
@@ -4440,7 +4409,7 @@ class ObjectBrowserClass extends react_1.Component {
                 useDesc = !!oTooltip;
             }
         }
-        return react_1.default.createElement(material_1.Grid, { container: true, direction: "row", wrap: "nowrap", sx: getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
+        return react_1.default.createElement(material_1.Grid, { container: true, direction: "row", wrap: "nowrap", sx: Utils_1.default.getStyle(this.props.theme, styles.tableRow, this.state.linesEnabled && styles.tableRowLines, !this.props.dragEnabled && styles.tableRowNoDragging, alias && styles.tableRowAlias, readWriteAlias && styles.tableRowAliasReadWrite, !item.data.visible && styles.filteredOut, item.data.hasVisibleParent &&
                 !item.data.visible &&
                 !item.data.hasVisibleChildren &&
                 styles.filteredParentOut, this.state.selected.includes(id) && styles.itemSelected, this.state.selectedNonObject === id && styles.itemSelected), key: id, id: id, onMouseDown: e => {
@@ -5341,26 +5310,26 @@ class ObjectBrowserClass extends react_1.Component {
         this.unsubscribeTimer && clearTimeout(this.unsubscribeTimer);
         if (this.styleTheme !== this.props.themeType) {
             this.styles = {
-                cellIdIconFolder: getStyle(this.props.theme, styles.cellIdIconFolder),
-                cellIdIconDocument: getStyle(this.props.theme, styles.cellIdIconDocument),
-                iconDeviceError: getStyle(this.props.theme, styles.iconDeviceError),
-                iconDeviceConnected: getStyle(this.props.theme, styles.iconDeviceConnected),
-                iconDeviceDisconnected: getStyle(this.props.theme, styles.iconDeviceDisconnected),
-                cellButtonsButtonWithCustoms: getStyle(this.props.theme, styles.cellButtonsButtonWithCustoms),
-                invertedBackground: getStyle(this.props.theme, styles.invertedBackground),
-                invertedBackgroundFlex: getStyle(this.props.theme, styles.invertedBackgroundFlex),
-                contextMenuEdit: getStyle(this.props.theme, styles.contextMenuEdit),
-                contextMenuEditValue: getStyle(this.props.theme, styles.contextMenuEditValue),
-                contextMenuView: getStyle(this.props.theme, styles.contextMenuView),
-                contextMenuCustom: getStyle(this.props.theme, styles.contextMenuCustom),
-                contextMenuACL: getStyle(this.props.theme, styles.contextMenuACL),
-                contextMenuRoom: getStyle(this.props.theme, styles.contextMenuRoom),
-                contextMenuRole: getStyle(this.props.theme, styles.contextMenuRole),
-                contextMenuDelete: getStyle(this.props.theme, styles.contextMenuDelete),
-                filterInput: getStyle(this.props.theme, styles.headerCellInput, styles.filterInput),
-                iconCopy: getStyle(this.props.theme, styles.cellButtonsValueButton, styles.cellButtonsValueButtonCopy),
-                aliasReadWrite: getStyle(styles.cellIdAlias, styles.cellIdAliasReadWrite),
-                aliasAlone: getStyle(styles.cellIdAlias, styles.cellIdAliasAlone),
+                cellIdIconFolder: Utils_1.default.getStyle(this.props.theme, styles.cellIdIconFolder),
+                cellIdIconDocument: Utils_1.default.getStyle(this.props.theme, styles.cellIdIconDocument),
+                iconDeviceError: Utils_1.default.getStyle(this.props.theme, styles.iconDeviceError),
+                iconDeviceConnected: Utils_1.default.getStyle(this.props.theme, styles.iconDeviceConnected),
+                iconDeviceDisconnected: Utils_1.default.getStyle(this.props.theme, styles.iconDeviceDisconnected),
+                cellButtonsButtonWithCustoms: Utils_1.default.getStyle(this.props.theme, styles.cellButtonsButtonWithCustoms),
+                invertedBackground: Utils_1.default.getStyle(this.props.theme, styles.invertedBackground),
+                invertedBackgroundFlex: Utils_1.default.getStyle(this.props.theme, styles.invertedBackgroundFlex),
+                contextMenuEdit: Utils_1.default.getStyle(this.props.theme, styles.contextMenuEdit),
+                contextMenuEditValue: Utils_1.default.getStyle(this.props.theme, styles.contextMenuEditValue),
+                contextMenuView: Utils_1.default.getStyle(this.props.theme, styles.contextMenuView),
+                contextMenuCustom: Utils_1.default.getStyle(this.props.theme, styles.contextMenuCustom),
+                contextMenuACL: Utils_1.default.getStyle(this.props.theme, styles.contextMenuACL),
+                contextMenuRoom: Utils_1.default.getStyle(this.props.theme, styles.contextMenuRoom),
+                contextMenuRole: Utils_1.default.getStyle(this.props.theme, styles.contextMenuRole),
+                contextMenuDelete: Utils_1.default.getStyle(this.props.theme, styles.contextMenuDelete),
+                filterInput: Utils_1.default.getStyle(this.props.theme, styles.headerCellInput, styles.filterInput),
+                iconCopy: Utils_1.default.getStyle(this.props.theme, styles.cellButtonsValueButton, styles.cellButtonsValueButtonCopy),
+                aliasReadWrite: Utils_1.default.getStyle(this.props.theme, styles.cellIdAlias, styles.cellIdAliasReadWrite),
+                aliasAlone: Utils_1.default.getStyle(this.props.theme, styles.cellIdAlias, styles.cellIdAliasAlone),
             };
             this.styleTheme = this.props.themeType;
         }

package/Components/Schedule.d.ts

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { IobTheme } from '../types';
 interface ScheduleConfig {
     time: {
         exactTime: boolean;
@@ -26,6 +27,7 @@ interface ScheduleConfig {
 interface ScheduleProps {
     schedule: string | ScheduleConfig;
     onChange: (schedule: string, desc?: string) => void;
+    theme: IobTheme;
 }
 interface ScheduleState {
     schedule: ScheduleConfig;

package/Components/Schedule.js

@@ -705,7 +705,7 @@ class Schedule extends react_1.Component {
                             }, 1500, e.target.value);
                         }, InputLabelProps: { shrink: true }, label: i18n_1.default.t('sch_at'), margin: "normal" }))),
             // ----- days ---
-            react_1.default.createElement(material_1.Box, { component: "div", key: "days", sx: Utils_1.default.getStyle(styles.rowDiv, styles.rowDays) },
+            react_1.default.createElement(material_1.Box, { component: "div", key: "days", sx: Utils_1.default.getStyle(this.props.theme, styles.rowDiv, styles.rowDays) },
                 react_1.default.createElement("div", { style: styles.modeDiv },
                     react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { style: styles.inputRadio, checked: !!schedule.period.days, onClick: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
@@ -741,7 +741,7 @@ class Schedule extends react_1.Component {
                 </div>,
             */
             // ----- weeks ---
-            react_1.default.createElement(material_1.Box, { component: "div", key: "weeks", sx: Utils_1.default.getStyle(styles.rowDiv, styles.rowDows) },
+            react_1.default.createElement(material_1.Box, { component: "div", key: "weeks", sx: Utils_1.default.getStyle(this.props.theme, styles.rowDiv, styles.rowDows) },
                 react_1.default.createElement("div", { style: styles.modeDiv },
                     react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { style: styles.inputRadio, checked: !!schedule.period.weeks, onClick: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
@@ -758,9 +758,9 @@ class Schedule extends react_1.Component {
                             } }), label: i18n_1.default.t('sch_periodWeekly') })),
                 react_1.default.createElement(material_1.Box, { component: "div", style: styles.settingsDiv },
                     react_1.default.createElement("div", { style: styles.settingsDiv }, this.getPeriodSettingsWeekly()),
-                    react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(styles.settingsDiv, styles.rowDowsDows) }, this.state.schedule.period.weeks ? this.getPeriodSettingsWeekdays() : null))),
+                    react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles.settingsDiv, styles.rowDowsDows) }, this.state.schedule.period.weeks ? this.getPeriodSettingsWeekdays() : null))),
             // ----- months ---
-            react_1.default.createElement(material_1.Box, { component: "div", key: "months", sx: Utils_1.default.getStyle(styles.rowDiv, styles.rowMonths) },
+            react_1.default.createElement(material_1.Box, { component: "div", key: "months", sx: Utils_1.default.getStyle(this.props.theme, styles.rowDiv, styles.rowMonths) },
                 react_1.default.createElement("div", { style: styles.modeDiv },
                     react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { style: styles.inputRadio, checked: !!schedule.period.months, onClick: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
@@ -778,7 +778,7 @@ class Schedule extends react_1.Component {
                 react_1.default.createElement("div", { style: styles.settingsDiv },
                     this.getPeriodSettingsMonthly(),
                     schedule.period.months ? react_1.default.createElement(material_1.Box, null,
-                        react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(styles.settingsDiv, styles.rowMonthsDates) },
+                        react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles.settingsDiv, styles.rowMonthsDates) },
                             react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { style: styles.inputRadio, checked: !!schedule.period.dates, onClick: () => {
                                         const _schedule = JSON.parse(JSON.stringify(this.state.schedule));
                                         _schedule.period.months = _schedule.period.months || 1;
@@ -796,9 +796,9 @@ class Schedule extends react_1.Component {
                                         _schedule.period.once = '';
                                         this.onChange(_schedule);
                                     } }), label: i18n_1.default.t('sch_periodDates') })),
-                        react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(styles.settingsDiv, styles.rowMonthsDates) }, this.getPeriodSettingsDates())) : null)),
+                        react_1.default.createElement(material_1.Box, { component: "div", sx: Utils_1.default.getStyle(this.props.theme, styles.settingsDiv, styles.rowMonthsDates) }, this.getPeriodSettingsDates())) : null)),
             // ----- years ---
-            react_1.default.createElement(material_1.Box, { component: "div", key: "years", sx: Utils_1.default.getStyle(styles.rowDiv, styles.rowYears) },
+            react_1.default.createElement(material_1.Box, { component: "div", key: "years", sx: Utils_1.default.getStyle(this.props.theme, styles.rowDiv, styles.rowYears) },
                 react_1.default.createElement("div", { style: styles.modeDiv },
                     react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Radio, { style: styles.inputRadio, checked: !!schedule.period.years, onClick: () => {
                                 const _schedule = JSON.parse(JSON.stringify(this.state.schedule));

package/Components/SimpleCron/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cron2state = void 0;
+exports.cron2state = cron2state;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const cronText_1 = __importDefault(require("./cronText"));
@@ -213,7 +213,6 @@ function cron2state(cron, force) {
     }
     return state;
 }
-exports.cron2state = cron2state;
 class SimpleCron extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -604,7 +603,7 @@ class SimpleCron extends react_1.default.Component {
     render() {
         return react_1.default.createElement("div", { style: styles.mainDiv },
             react_1.default.createElement("div", { style: { paddingLeft: 8, width: '100%' } },
-                react_1.default.createElement(material_1.TextField, { style: { width: '100%' }, value: this.state.cron, disabled: true })),
+                react_1.default.createElement(material_1.TextField, { variant: "standard", style: { width: '100%' }, value: this.state.cron, disabled: true })),
             react_1.default.createElement("div", { style: { paddingLeft: 8, width: '100%', height: 60 } }, (0, cronText_1.default)(this.state.cron, this.props.language || 'en')),
             react_1.default.createElement("div", null,
                 react_1.default.createElement(material_1.FormControl, { variant: "standard", style: Object.assign(Object.assign({}, styles.formControl), { marginLeft: 8, marginTop: 8 }) },

package/Components/TabContainer.d.ts

@@ -2,10 +2,13 @@ import React from 'react';
 interface TabContainerProps {
     elevation?: number;
     overflow?: string;
-    className?: string;
-    style?: React.CSSProperties;
+    styles?: {
+        root?: React.CSSProperties;
+        container?: React.CSSProperties;
+    };
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     tabIndex?: number;
+    /** The content of the component. */
     children: React.ReactNode;
 }
 declare function TabContainer(props: TabContainerProps): React.JSX.Element;

package/Components/TabContainer.js

@@ -18,7 +18,8 @@ const styles = {
     },
 };
 function TabContainer(props) {
-    return react_1.default.createElement(material_1.Paper, { elevation: !Number.isNaN(props.elevation) ? props.elevation : 1, className: props.className, style: Object.assign(Object.assign(Object.assign({}, styles.root), (props.overflow !== 'visible' ? styles.overflowHidden : undefined)), props.style), onKeyDown: props.onKeyDown, tabIndex: props.tabIndex },
+    var _a;
+    return react_1.default.createElement(material_1.Paper, { elevation: !Number.isNaN(props.elevation) ? props.elevation : 1, style: Object.assign(Object.assign(Object.assign({}, styles.root), (((_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) || undefined)), (props.overflow !== 'visible' ? styles.overflowHidden : undefined)), onKeyDown: props.onKeyDown, tabIndex: props.tabIndex },
         react_1.default.createElement(material_1.Grid, { container: true, direction: "column", wrap: "nowrap", sx: styles.container }, props.children));
 }
 exports.default = TabContainer;

package/Components/TabContent.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 interface TabContentProps {
-    overflow?: string;
-    children: React.ReactNode;
+    /** The content of the component. */
+    children: React.JSX.Element | (React.JSX.Element | null | React.JSX.Element[])[];
+    /** Overflow behavior */
+    overflow?: 'auto';
+    style?: React.CSSProperties;
 }
 declare function TabContent(props: TabContentProps): React.JSX.Element;
 export default TabContent;

package/Components/TabContent.js

@@ -16,6 +16,6 @@ const styles = {
     },
 };
 function TabContent(props) {
-    return react_1.default.createElement(material_1.Grid, { item: true, sx: Object.assign(Object.assign({}, styles.root), (props.overflow === 'auto' ? styles.overflowAuto : undefined)) }, props.children);
+    return react_1.default.createElement(material_1.Grid, { item: true, sx: Object.assign(Object.assign({}, props.style), (props.overflow === 'auto' ? styles.overflowAuto : undefined)) }, props.children);
 }
 exports.default = TabContent;

package/Components/ToggleThemeMenu.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ToggleThemeMenu;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
@@ -15,4 +16,3 @@ function ToggleThemeMenu({ themeName, toggleTheme, t, className, style, size, })
                 themeName === 'colored' && react_1.default.createElement(icons_material_1.Brightness6, { className: className }),
                 themeName !== 'dark' && themeName !== 'blue' && themeName !== 'colored' && react_1.default.createElement(icons_material_1.Brightness7, { className: className }))));
 }
-exports.default = ToggleThemeMenu;

package/Components/TreeTable.d.ts

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import type Connection from '../Connection';
+import { IobTheme } from '../types';
 interface Column {
     cellStyle?: Record<string, any>;
     editComponent?: React.FC<{
@@ -36,6 +37,7 @@ interface TreeTableProps {
     /** Shift in pixels for every level */
     levelShift?: number;
     adapterName: string;
+    theme: IobTheme;
 }
 interface TreeTableState {
     opened: string[];

package/Components/TreeTable.js

@@ -434,19 +434,19 @@ class TreeTable extends react_1.Component {
     renderHead() {
         return react_1.default.createElement(material_1.TableHead, null,
             react_1.default.createElement(material_1.TableRow, { key: "headerRow" },
-                react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles.cellExpand) }),
-                react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles[`width_${this.props.columns[0].field.replace(/\./g, '_')}`]), style: this.props.columns[0].headerStyle || this.props.columns[0].cellStyle, sortDirection: this.props.noSort ? false : (this.state.orderBy === this.props.columns[0].field ? this.state.order : false) }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === this.props.columns[0].field, direction: this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(this.props.columns[0].field) },
+                react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellExpand) }),
+                react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${this.props.columns[0].field.replace(/\./g, '_')}`]), style: this.props.columns[0].headerStyle || this.props.columns[0].cellStyle, sortDirection: this.props.noSort ? false : (this.state.orderBy === this.props.columns[0].field ? this.state.order : false) }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === this.props.columns[0].field, direction: this.state.orderBy === this.props.columns[0].field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(this.props.columns[0].field) },
                     this.props.columns[0].title || this.props.columns[0].field,
                     this.state.orderBy === this.props.columns[0].field ?
                         react_1.default.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)),
-                this.props.columns.map((col, i) => (!i && !col.hidden ? null : react_1.default.createElement(material_1.TableCell, { key: col.field, sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles[`width_${col.field.replace(/\./g, '_')}`]), style: col.headerStyle || col.cellStyle, component: "th" }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === col.field, direction: this.state.orderBy === col.field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(col.field) },
+                this.props.columns.map((col, i) => (!i && !col.hidden ? null : react_1.default.createElement(material_1.TableCell, { key: col.field, sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles[`width_${col.field.replace(/\./g, '_')}`]), style: col.headerStyle || col.cellStyle, component: "th" }, this.props.noSort ? null : react_1.default.createElement(material_1.TableSortLabel, { active: this.state.orderBy === col.field, direction: this.state.orderBy === col.field ? this.state.order : 'asc', onClick: () => this.handleRequestSort(col.field) },
                     col.title || col.field,
                     this.state.orderBy === col.field ?
                         react_1.default.createElement("span", { style: styles.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)))),
-                this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles.cellButton) }, !this.props.noAdd ? react_1.default.createElement(material_1.Fab, { color: "primary", size: "small", disabled: this.state.editMode !== false, onClick: () => this.props.onUpdate && this.props.onUpdate(true) },
+                this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) }, !this.props.noAdd ? react_1.default.createElement(material_1.Fab, { color: "primary", size: "small", disabled: this.state.editMode !== false, onClick: () => this.props.onUpdate && this.props.onUpdate(true) },
                     react_1.default.createElement(icons_material_1.Add, null)) : null) : null,
                 this.props.onDelete || this.props.onUpdate ?
-                    react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles.cellButton) }) : null));
+                    react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(this.props.theme, styles.cell, styles.cellHeader, styles.cellButton) }) : null));
     }
     render() {
         const col = this.props.columns.find(_col => _col.field === this.state.orderBy);

package/Dialogs/Cron.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IobTheme } from '../types';
 interface DialogCronProps {
     onClose: () => void;
     onOk: (cron: string) => void;
@@ -12,6 +13,7 @@ interface DialogCronProps {
     complex?: boolean;
     /** do not show wizard */
     noWizard?: boolean;
+    theme: IobTheme;
 }
 interface DialogCronState {
     cron: string;

package/Dialogs/Cron.js

@@ -86,7 +86,7 @@ class DialogCron extends react_1.default.Component {
                         react_1.default.createElement(material_1.Radio, { key: "complex", checked: this.state.mode === 'complex', onChange: () => this.setMode('complex') }),
                         react_1.default.createElement("label", { onClick: () => this.setMode('complex'), style: this.state.mode !== 'complex' ? { color: 'lightgrey' } : {} }, i18n_1.default.t('sc_cron')))) : null,
                 this.state.mode === 'simple' && react_1.default.createElement(SimpleCron_1.default, { cronExpression: this.state.cron, onChange: cron => this.setState({ cron }), language: i18n_1.default.getLanguage() }),
-                this.state.mode === 'wizard' && react_1.default.createElement(Schedule_1.default, { schedule: this.state.cron, onChange: (cron) => this.setState({ cron }) }),
+                this.state.mode === 'wizard' && react_1.default.createElement(Schedule_1.default, { theme: this.props.theme, schedule: this.state.cron, onChange: (cron) => this.setState({ cron }) }),
                 this.state.mode === 'complex' && react_1.default.createElement(ComplexCron_1.default, { cronExpression: this.state.cron, onChange: cron => this.setState({ cron }), language: i18n_1.default.getLanguage() })),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.handleOk(), color: "primary", startIcon: react_1.default.createElement(icons_material_1.Check, null) }, this.props.ok || i18n_1.default.t('ra_Ok')),

package/Dialogs/SelectFile.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Connection } from '@iobroker/socket-client';
+import { IobTheme } from '../types';
 interface DialogSelectFileProps {
     /** where to store settings in localStorage * @property {string} [title] The dialog title; default: Please select object ID... (translated) */
     dialogName?: string;
@@ -21,6 +22,8 @@ interface DialogSelectFileProps {
     themeName?: string;
     /** Theme type. */
     themeType?: 'dark' | 'light';
+    /** Theme object. */
+    theme: IobTheme;
     /** The selected IDs. */
     selected?: string | string[];
     /** The ok button text; default: OK (translated) */

package/Dialogs/SelectFile.js

@@ -108,7 +108,7 @@ class DialogSelectFile extends react_1.default.Component {
             react_1.default.createElement(material_1.DialogContent, { style: Object.assign(Object.assign({}, styles.content), styles.contentMobile) },
                 react_1.default.createElement(FileBrowser_1.default, { ready: true, imagePrefix: this.props.imagePrefix || this.props.prefix || '../', allowUpload: !!this.props.allowUpload, allowDownload: this.props.allowDownload !== false, allowCreateFolder: !!this.props.allowCreateFolder, allowDelete: !!this.props.allowDelete, allowView: this.props.allowView !== false, showViewTypeButton: this.props.showViewTypeButton !== false, showToolbar: this.props.showToolbar !== false, limitPath: this.props.limitPath, filterFiles: this.props.filterFiles, filterByType: this.props.filterByType, selected: this.props.selected, restrictToFolder: this.props.restrictToFolder, allowNonRestricted: this.props.allowNonRestricted, onSelect: (selected, isDoubleClick, isFolder) => {
                         this.setState({ selected: Array.isArray(selected) ? selected : [selected] }, () => isDoubleClick && (!this.props.selectOnlyFolders || isFolder) && this.handleOk());
-                    }, t: this.props.t || i18n_1.default.t, lang: this.props.lang || i18n_1.default.getLanguage(), socket: this.props.socket, themeType: this.props.themeType, themeName: this.props.themeName, showExpertButton: this.props.showExpertButton, expertMode: this.props.expertMode, showTypeSelector: this.props.showTypeSelector })),
+                    }, t: this.props.t || i18n_1.default.t, lang: this.props.lang || i18n_1.default.getLanguage(), socket: this.props.socket, themeType: this.props.themeType, themeName: this.props.themeName, theme: this.props.theme, showExpertButton: this.props.showExpertButton, expertMode: this.props.expertMode, showTypeSelector: this.props.showTypeSelector })),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.handleOk(), startIcon: react_1.default.createElement(icons_material_1.Check, null), disabled: !this.state.selected.length, color: "primary" }, this.props.ok || i18n_1.default.t('ra_Ok')),
                 react_1.default.createElement(material_1.Button, { color: "grey", variant: "contained", onClick: () => this.handleCancel(), startIcon: react_1.default.createElement(icons_material_1.Cancel, null) }, this.props.cancel || i18n_1.default.t('ra_Cancel'))));

package/Dialogs/SelectID.d.ts

@@ -7,6 +7,7 @@
 import React, { Component } from 'react';
 import type Connection from '../Connection';
 import { ObjectBrowserColumn, ObjectBrowserCustomFilter, ObjectBrowserType } from '../Components/types';
+import { IobTheme } from '../types';
 export interface SelectIDFilters {
     id?: string;
     name?: string;
@@ -32,6 +33,8 @@ interface DialogSelectIDProps {
     notEditable?: boolean;
     themeName?: string;
     themeType?: string;
+    /** The theme object */
+    theme?: IobTheme;
     customFilter?: ObjectBrowserCustomFilter;
     selected?: string | string[];
     ok?: string;

package/Dialogs/SelectID.js

@@ -133,7 +133,7 @@ class DialogSelectID extends react_1.Component {
                     // style={{ width: '100%', height: '100%' }}
                     columns: this.props.columns || ['name', 'type', 'role', 'room', 'func', 'val'], types: this.props.types ? (Array.isArray(this.props.types) ? this.props.types : [this.props.types]) : ['state'], root: this.props.root, t: i18n_1.default.t, lang: this.props.lang || i18n_1.default.getLanguage(), socket: this.props.socket, selected: this.state.selected, multiSelect: this.props.multiSelect, notEditable: this.props.notEditable === undefined ? true : this.props.notEditable, 
                     // name={this.state.name}
-                    themeName: this.props.themeName, themeType: this.props.themeType, customFilter: this.props.customFilter, onFilterChanged: (filterConfig) => {
+                    themeName: this.props.themeName, themeType: this.props.themeType, theme: this.props.theme, customFilter: this.props.customFilter, onFilterChanged: (filterConfig) => {
                         this.filters = filterConfig;
                         (window._localStorage || window.localStorage).setItem(this.dialogName, JSON.stringify(filterConfig));
                     }, onSelect: (_selected, name, isDouble) => {

package/LegacyConnection.d.ts

@@ -4,7 +4,6 @@
  * MIT License
  *
  * */
-/// <reference types="node" />
 import { type HostInfo } from '@iobroker/js-controller-common-db/build/esm/lib/common/tools';
 import { type FilteredNotificationInformation } from '@iobroker/js-controller-common/build/esm/lib/common/notificationHandler';
 declare global {

package/LegacyConnection.js

@@ -6,7 +6,8 @@
  *
  * */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pattern2RegEx = exports.ERRORS = exports.PROGRESS = void 0;
+exports.ERRORS = exports.PROGRESS = void 0;
+exports.pattern2RegEx = pattern2RegEx;
 /** Possible progress states. */
 exports.PROGRESS = {
     /** The socket is connecting. */
@@ -95,7 +96,6 @@ function pattern2RegEx(pattern) {
         .replace(/\*/g, '.*');
     return (startsWithWildcard ? '' : '^') + pattern + (endsWithWildcard ? '' : '$');
 }
-exports.pattern2RegEx = pattern2RegEx;
 class Connection {
     constructor(props) {
         this.systemLang = 'en';

package/README.md

@@ -690,7 +690,8 @@ class JsonComponent extends ConfigGeneric {
 The main change is that the `withStyles` was removed. So you have to replace all `withStyles` with `sx` or `style` properties.
 
 You can read more about sx [here](https://mui.com/system/getting-started/the-sx-prop/).
-
+- Remove at start of the file `import { withStyles } from '@mui/styles';`
+- Replace at the very end of the file `export default withStyles(styles)(MyComponent);` with `export default MyComponent;`
 - Modify `const styles`:
 Before:
 ```
@@ -733,11 +734,11 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
 - Modify `classes`:
   Before: `<Dialog classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}>`
 
-  After: `<Dialog {{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
+  After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
 
   Before: `<Dialog classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}>`
 
-  After: `<Dialog {{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
+  After: `<Dialog sx={{ '&.MuiDialog-scrollPaper': styles.dialog, '& .MuiDialog-paper': styles.paper }}>`
 
   Before: `<ListItem classes={{ root: styles.listItem }} >`
   
@@ -751,20 +752,26 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
   
   After: `<Badge sx={{ '& .MuiBadge-badge': styles.expertBadge }}>`
 
+  Before: `<Tab classes={{ selected: styles.selected }} />`
+  
+  After: `<Tab sx={{ '&.Mui-selected': styles.selected }} />`
+
   Before: `<Tooltip title={this.props.t('ra_Refresh tree')} classes={{ popper: styles.tooltip }}>`
   
   After: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}>`
   Or: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: styles.tooltip } }}>`
 
-## Warning
-`react-inlinesvg@4.0.5` cannot be used. Use `react-inlinesvg@4.0.3` instead.  
+  Before. `<AccordionSummary classes={{ root: styles.rootStyle, content: styles.content }}>`
+
+  After. `<AccordionSummary sx={{ '&.MuiAccordionSummary-root': styles.rootStyle, '& .MuiAccordionSummary-content': styles.content }}>`
+
 <!--
 	Placeholder for the next version (at the beginning of the line):
 	### **WORK IN PROGRESS**
 -->
 
 ## Changelog
-### 6.0.0 (2024-06-19)
+### 6.0.2 (2024-06-21)
 * (bluefox) Removed the usage of `withStyles` in favor of `sx` and `style` properties (see [Migration from v5 to v6](#migration-from-v5-to-v6)
 * (bluefox) (BREAKING) Higher version of `@mui/material` (5.15.20) is used
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",
@@ -36,12 +36,12 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@mui/x-date-pickers": "^7.7.0",
-    "@sentry/browser": "^8.9.2",
+    "@sentry/browser": "^8.10.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-cropper": "^2.3.3",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
-    "react-inlinesvg": "4.1.3"
+    "react-inlinesvg": "^4.1.3"
   }
 }