@iobroker/adapter-react-v5 5.0.8 → 6.0.0

package/Components/TreeTable.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const styles_1 = require("@mui/styles");
 const react_colorful_1 = require("react-colorful");
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
@@ -62,7 +61,7 @@ function setAttr(obj, attr, value) {
     }
     return setAttr(obj[name], attr, value);
 }
-const styles = (theme) => ({
+const styles = {
     tableContainer: {
         width: '100%',
         height: '100%',
@@ -92,8 +91,8 @@ const styles = (theme) => ({
     },
     cellHeader: {
         fontWeight: 'bold',
-        background: theme.palette.mode === 'dark' ? '#888' : '#888',
-        color: theme.palette.mode === 'dark' ? '#EEE' : '#111',
+        background: (theme) => theme.palette.mode === 'dark' ? '#888' : '#888',
+        color: (theme) => theme.palette.mode === 'dark' ? '#EEE' : '#111',
         height: 48,
         wordBreak: 'break-word',
         whiteSpace: 'pre',
@@ -155,7 +154,7 @@ const styles = (theme) => ({
     glow: {
         animation: 'glow 0.2s 2 alternate',
     },
-});
+};
 function descendingComparator(a, b, orderBy, lookup) {
     const _a = getAttr(a, orderBy, lookup) || '';
     const _b = getAttr(b, orderBy, lookup) || '';
@@ -275,10 +274,10 @@ class TreeTable extends react_1.Component {
             .map((v, i) => { var _c; return react_1.default.createElement(material_1.MenuItem, { key: i, value: v }, (_c = col.lookup) === null || _c === void 0 ? void 0 : _c[v]); }));
     }
     renderCellEditString(col, val) {
-        return react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.fieldEdit, fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) });
+        return react_1.default.createElement(material_1.TextField, { variant: "standard", style: styles.fieldEdit, fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) });
     }
     renderCellEditNumber(col, val) {
-        return react_1.default.createElement(material_1.TextField, { variant: "standard", className: this.props.classes.fieldEdit, type: "number", fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) });
+        return react_1.default.createElement(material_1.TextField, { variant: "standard", style: styles.fieldEdit, type: "number", fullWidth: true, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) });
     }
     renderCellEditCustom(col, val, item) {
         const EditComponent = col.editComponent;
@@ -288,13 +287,16 @@ class TreeTable extends react_1.Component {
             item = JSON.parse(JSON.stringify(item));
             item[col.field] = val;
         }
-        return react_1.default.createElement(EditComponent, { value: val, rowData: item, onChange: (newVal) => this.onChange(col, val, newVal) });
+        return EditComponent ? react_1.default.createElement(EditComponent, { value: val, rowData: item, onChange: (newVal) => this.onChange(col, val, newVal) }) : null;
     }
     renderCellEditBoolean(col, val) {
         return react_1.default.createElement(material_1.Checkbox, { checked: this.state.editData && this.state.editData[col.field] !== undefined ? !!this.state.editData[col.field] : !!val, onChange: e => this.onChange(col, !!val, e.target.checked), inputProps: { 'aria-label': 'checkbox' } });
     }
     renderSelectColorDialog() {
-        return react_1.default.createElement(material_1.Dialog, { classes: { root: this.props.classes.colorDialog, paper: this.props.classes.colorDialog }, onClose: () => {
+        return react_1.default.createElement(material_1.Dialog, { sx: {
+                '& .MuiPaper-root': styles.root,
+                '& .MuiPaper-paper': styles.paper,
+            }, onClose: () => {
                 this.selectCallback = null;
                 this.setState({ showSelectColor: false });
             }, open: this.state.showSelectColor },
@@ -302,9 +304,9 @@ class TreeTable extends react_1.Component {
     }
     renderCellEditColor(col, val) {
         const _val = this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val;
-        return react_1.default.createElement("div", { className: this.props.classes.fieldEdit },
-            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, className: this.props.classes.fieldEditWithButton, value: _val, inputProps: { style: { backgroundColor: _val, color: Utils_1.default.isUseBright(_val) ? '#FFF' : '#000' } }, onChange: e => this.onChange(col, !!val, e.target.value) }),
-            react_1.default.createElement(material_1.IconButton, { className: this.props.classes.fieldButton, onClick: () => {
+        return react_1.default.createElement("div", { style: styles.fieldEdit },
+            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, style: styles.fieldEditWithButton, value: _val, inputProps: { style: { backgroundColor: _val, color: Utils_1.default.isUseBright(_val) ? '#FFF' : '#000' } }, onChange: e => this.onChange(col, !!val, e.target.value) }),
+            react_1.default.createElement(material_1.IconButton, { style: styles.fieldButton, onClick: () => {
                     this.selectCallback = newColor => this.onChange(col, val, newColor);
                     this.setState({ showSelectColor: true, selectIdValue: val });
                 }, size: "large" },
@@ -321,9 +323,9 @@ class TreeTable extends react_1.Component {
         return null;
     }
     renderCellEditObjectID(col, val) {
-        return react_1.default.createElement("div", { className: this.props.classes.fieldEdit },
-            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, className: this.props.classes.fieldEditWithButton, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) }),
-            react_1.default.createElement(material_1.IconButton, { className: this.props.classes.fieldButton, onClick: () => {
+        return react_1.default.createElement("div", { style: styles.fieldEdit },
+            react_1.default.createElement(material_1.TextField, { variant: "standard", fullWidth: true, style: styles.fieldEditWithButton, value: this.state.editData && this.state.editData[col.field] !== undefined ? this.state.editData[col.field] : val, onChange: e => this.onChange(col, val, e.target.value) }),
+            react_1.default.createElement(material_1.IconButton, { style: styles.fieldButton, onClick: () => {
                     this.selectCallback = selected => this.onChange(col, val, selected);
                     this.setState({ showSelectId: true, selectIdValue: val });
                 }, size: "large" },
@@ -341,20 +343,20 @@ class TreeTable extends react_1.Component {
     }
     renderCell(item, col, level, i) {
         if (this.state.editMode === i && col.editable !== 'never' && col.editable !== false) {
-            return react_1.default.createElement(material_1.TableCell, { key: col.field, className: Utils_1.default.clsx(this.props.classes.cell, level && this.props.classes.cellSecondary), style: col.cellStyle, component: "th" }, this.renderCellEdit(item, col));
+            return react_1.default.createElement(material_1.TableCell, { key: col.field, style: Object.assign(Object.assign(Object.assign({}, styles.cell), (level ? styles.cellSecondary : undefined)), col.cellStyle), component: "th" }, this.renderCellEdit(item, col));
         }
-        return react_1.default.createElement(material_1.TableCell, { key: col.field, className: Utils_1.default.clsx(this.props.classes.cell, level && this.props.classes.cellSecondary), style: col.cellStyle, component: "th" }, TreeTable.renderCellNonEdit(item, col));
+        return react_1.default.createElement(material_1.TableCell, { key: col.field, style: Object.assign(Object.assign(Object.assign({}, styles.cell), (level ? styles.cellSecondary : undefined)), col.cellStyle), component: "th" }, TreeTable.renderCellNonEdit(item, col));
     }
     renderCellWithSubField(item, col) {
         const main = getAttr(item, col.field, col.lookup);
         if (col.subField) {
             const sub = getAttr(item, col.subField, col.subLookup);
             return react_1.default.createElement("div", null,
-                react_1.default.createElement("div", { className: this.props.classes.mainText }, main),
-                react_1.default.createElement("div", { className: this.props.classes.subText, style: col.subStyle || {} }, sub));
+                react_1.default.createElement("div", { style: styles.mainText }, main),
+                react_1.default.createElement("div", { style: Object.assign({}, styles.subText, col.subStyle || {}) }, sub));
         }
         return react_1.default.createElement("div", null,
-            react_1.default.createElement("div", { className: this.props.classes.mainText }, main));
+            react_1.default.createElement("div", { style: styles.mainText }, main));
     }
     renderLine(item, level) {
         const levelShift = this.props.levelShift === undefined ? 24 : this.props.levelShift;
@@ -372,8 +374,8 @@ class TreeTable extends react_1.Component {
         // try to find children
         const opened = this.state.opened.includes(item.id);
         const children = this.props.data.filter(it => it.parentId === item.id);
-        const row = react_1.default.createElement(material_1.TableRow, { key: item.id, className: Utils_1.default.clsx(`table-row-${(item.id || '').toString().replace(/[.$]/g, '_')}`, this.state.update && this.state.update.includes(item.id) && this.props.classes.glow, this.props.classes.row, level && this.props.classes.rowSecondary, !level && children.length && this.props.classes.rowMainWithChildren, !level && !children.length && this.props.classes.rowMainWithoutChildren, this.state.editMode !== false && this.state.editMode !== i && this.props.classes.rowNoEdit, this.state.deleteMode !== false && this.state.deleteMode !== i && this.props.classes.rowNoEdit) },
-            react_1.default.createElement(material_1.TableCell, { className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellExpand, level && this.props.classes.cellSecondary) }, children.length ? react_1.default.createElement(material_1.IconButton, { onClick: () => {
+        const row = react_1.default.createElement(material_1.TableRow, { key: item.id, className: `table-row-${(item.id || '').toString().replace(/[.$]/g, '_')}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, ((this.state.update && this.state.update.includes(item.id) && styles.glow) || undefined)), styles.row), (level ? styles.rowSecondary : undefined)), (!level && children.length ? styles.rowMainWithChildren : undefined)), (!level && !children.length ? styles.rowMainWithoutChildren : undefined)), (this.state.editMode !== false && this.state.editMode !== i ? styles.rowNoEdit : undefined)), (this.state.deleteMode !== false && this.state.deleteMode !== i ? styles.rowNoEdit : undefined)) },
+            react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign(Object.assign({}, styles.cell), styles.cellExpand), (level ? styles.cellSecondary : undefined)) }, children.length ? react_1.default.createElement(material_1.IconButton, { onClick: () => {
                     const _opened = [...this.state.opened];
                     const pos = _opened.indexOf(item.id);
                     if (pos === -1) {
@@ -386,12 +388,12 @@ class TreeTable extends react_1.Component {
                     (window._localStorage || window.localStorage).setItem(this.props.name || 'iob-table', JSON.stringify(_opened));
                     this.setState({ opened: _opened });
                 }, size: "small" }, opened ? react_1.default.createElement(icons_material_1.ExpandMore, null) : react_1.default.createElement(icons_material_1.NavigateNext, null)) : null),
-            react_1.default.createElement(material_1.TableCell, { scope: "row", className: Utils_1.default.clsx(this.props.classes.cell, level && this.props.classes.cellSecondary), style: Object.assign(Object.assign({}, this.props.columns[0].cellStyle), { paddingLeft: levelShift * level }) }, this.props.columns[0].subField ?
+            react_1.default.createElement(material_1.TableCell, { scope: "row", style: Object.assign(Object.assign(Object.assign(Object.assign({}, styles.cell), (level ? styles.cellSecondary : undefined)), this.props.columns[0].cellStyle), { paddingLeft: levelShift * level }) }, this.props.columns[0].subField ?
                 this.renderCellWithSubField(item, this.props.columns[0])
                 :
                     getAttr(item, this.props.columns[0].field, this.props.columns[0].lookup)),
             this.props.columns.map((col, ii) => (!ii && !col.hidden ? null : this.renderCell(item, col, level, i))),
-            this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellButton) }, this.state.editMode === i || this.state.deleteMode === i ?
+            this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign({}, styles.cell), styles.cellButton) }, this.state.editMode === i || this.state.deleteMode === i ?
                 react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length), onClick: () => {
                         if (this.state.editMode !== false) {
                             const newData = JSON.parse(JSON.stringify(item));
@@ -407,12 +409,12 @@ class TreeTable extends react_1.Component {
                     react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false, onClick: () => this.setState({ editMode: i, editData: null }), size: "large" },
                         react_1.default.createElement(icons_material_1.Edit, null))) : null,
             this.props.onDelete && !this.props.onUpdate ?
-                react_1.default.createElement(material_1.TableCell, { className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellButton) }, this.state.deleteMode === i ?
+                react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign({}, styles.cell), styles.cellButton) }, this.state.deleteMode === i ?
                     react_1.default.createElement(material_1.IconButton, { disabled: this.state.editMode !== false && (!this.state.editData || !Object.keys(this.state.editData).length), onClick: () => this.setState({ deleteMode: false }, () => this.props.onDelete && this.props.onDelete(item)), size: "large" },
                         react_1.default.createElement(icons_material_1.Check, null))
                     :
                         null) : null,
-            this.props.onUpdate || this.props.onDelete ? react_1.default.createElement(material_1.TableCell, { className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellButton) }, this.state.editMode === i || this.state.deleteMode === i ?
+            this.props.onUpdate || this.props.onDelete ? react_1.default.createElement(material_1.TableCell, { style: Object.assign(Object.assign({}, styles.cell), styles.cellButton) }, this.state.editMode === i || this.state.deleteMode === i ?
                 react_1.default.createElement(material_1.IconButton, { onClick: () => this.setState({ editMode: false, deleteMode: false }), size: "large" },
                     react_1.default.createElement(icons_material_1.Close, null))
                 :
@@ -432,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", className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellExpand) }),
-                react_1.default.createElement(material_1.TableCell, { component: "th", className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes[`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(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) },
                     this.props.columns[0].title || this.props.columns[0].field,
                     this.state.orderBy === this.props.columns[0].field ?
-                        react_1.default.createElement("span", { className: this.props.classes.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, className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes[`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) },
+                        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) },
                     col.title || col.field,
                     this.state.orderBy === col.field ?
-                        react_1.default.createElement("span", { className: this.props.classes.visuallyHidden }, this.state.order === 'desc' ? 'sorted descending' : 'sorted ascending') : null)))),
-                this.props.onUpdate ? react_1.default.createElement(material_1.TableCell, { component: "th", className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.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("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) },
                     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", className: Utils_1.default.clsx(this.props.classes.cell, this.props.classes.cellHeader, this.props.classes.cellButton) }) : null));
+                    react_1.default.createElement(material_1.TableCell, { component: "th", sx: Utils_1.default.getStyle(styles.cell, styles.cellHeader, styles.cellButton) }) : null));
     }
     render() {
         const col = this.props.columns.find(_col => _col.field === this.state.orderBy);
@@ -458,8 +460,8 @@ class TreeTable extends react_1.Component {
                     this.setState({ update: null });
                 }, 500);
             }
-            return react_1.default.createElement("div", { className: Utils_1.default.clsx(this.props.classes.tableContainer, this.props.className) },
-                react_1.default.createElement(material_1.Table, { className: this.props.classes.table, "aria-label": "simple table", size: "small", stickyHeader: true },
+            return react_1.default.createElement("div", { style: styles.tableContainer, className: this.props.className },
+                react_1.default.createElement(material_1.Table, { style: styles.table, "aria-label": "simple table", size: "small", stickyHeader: true },
                     this.renderHead(),
                     react_1.default.createElement(material_1.TableBody, null, table.map(it => this.renderLine(it)))),
                 this.renderSelectIdDialog(),
@@ -531,7 +533,7 @@ const styles = theme => ({
 });
 // renderTable
 renderTable() {
-    return <div className={this.props.classes.tableDiv}>
+    return <div style={styles.tableDiv}>
         <TreeTable
             columns={this.columns}
             data={lines}
@@ -541,4 +543,4 @@ renderTable() {
     </div>;
 }
  */
-exports.default = (0, styles_1.withStyles)(styles)(TreeTable);
+exports.default = TreeTable;

package/Components/UploadImage.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { Component } from 'react';
 interface UploadImageProps {
-    classes: Record<string, string>;
     maxSize?: number;
     disabled?: boolean;
     crop?: boolean;
@@ -10,5 +9,15 @@ interface UploadImageProps {
     removeIconFunc: () => void | null;
     accept?: Record<string, string[]>;
 }
-declare const _default: React.JSXElementConstructor<Omit<UploadImageProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
-export default _default;
+interface UploadImageState {
+    uploadFile: boolean | 'dragging';
+    anchorEl: HTMLElement | null;
+    cropHandler: boolean;
+}
+declare class UploadImage extends Component<UploadImageProps, UploadImageState> {
+    private readonly cropperRef;
+    constructor(props: UploadImageProps);
+    onDrop(acceptedFiles: File[]): void;
+    render(): React.JSX.Element;
+}
+export default UploadImage;

package/Components/UploadImage.js

@@ -29,11 +29,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_dropzone_1 = __importDefault(require("react-dropzone"));
 const react_cropper_1 = require("react-cropper");
-const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
 const fa_1 = require("react-icons/fa");
-const Utils_1 = __importDefault(require("./Utils"));
 const i18n_1 = __importDefault(require("../i18n"));
 const Icon_1 = __importDefault(require("./Icon"));
 // import 'cropperjs/dist/cropper.css';
@@ -472,7 +470,7 @@ class UploadImage extends react_1.Component {
         reader.readAsArrayBuffer(file);
     }
     render() {
-        const { disabled, classes, icon, removeIconFunc, error, crop, onChange, } = this.props;
+        const { disabled, icon, removeIconFunc, error, crop, onChange, } = this.props;
         const maxSize = this.props.maxSize || 10 * 1024;
         const accept = this.props.accept || { 'image/*': [] };
         const { uploadFile, anchorEl, cropHandler } = this.state;
@@ -484,22 +482,22 @@ class UploadImage extends react_1.Component {
                 else {
                     this.onDrop(acceptedFiles);
                 }
-            } }, ({ getRootProps, getInputProps }) => react_1.default.createElement("div", Object.assign({ className: Utils_1.default.clsx(classes.uploadDiv, uploadFile === 'dragging' && classes.uploadDivDragging, classes.dropZone, disabled && classes.disabledOpacity, !icon && classes.dropZoneEmpty) }, getRootProps()),
+            } }, ({ getRootProps, getInputProps }) => react_1.default.createElement("div", Object.assign({ style: Object.assign({}, styles.uploadDiv, uploadFile === 'dragging' ? styles.uploadDivDragging : {}, styles.dropZone, disabled ? styles.disabledOpacity : {}, !icon ? styles.dropZoneEmpty : {}) }, getRootProps()),
             react_1.default.createElement("input", Object.assign({}, getInputProps())),
-            react_1.default.createElement("div", { className: Utils_1.default.clsx(classes.uploadCenterDiv, error && classes.error) },
-                !icon ? react_1.default.createElement("div", { className: classes.uploadCenterTextAndIcon },
-                    react_1.default.createElement(fa_1.FaFileUpload, { className: classes.uploadCenterIcon }),
-                    react_1.default.createElement("div", { className: classes.uploadCenterText }, uploadFile === 'dragging' ? i18n_1.default.t('ra_Drop file here') :
+            react_1.default.createElement("div", { style: Object.assign({}, styles.uploadCenterDiv, error ? styles.error : {}) },
+                !icon ? react_1.default.createElement("div", { style: styles.uploadCenterTextAndIcon },
+                    react_1.default.createElement(fa_1.FaFileUpload, { style: styles.uploadCenterIcon }),
+                    react_1.default.createElement("div", { style: styles.uploadCenterText }, uploadFile === 'dragging' ? i18n_1.default.t('ra_Drop file here') :
                         i18n_1.default.t('ra_Place your files here or click here to open the browse dialog')))
                     :
-                        removeIconFunc && !cropHandler && react_1.default.createElement("div", { className: classes.buttonRemoveWrapper },
+                        removeIconFunc && !cropHandler && react_1.default.createElement("div", { style: styles.buttonRemoveWrapper },
                             react_1.default.createElement(material_1.Tooltip, { title: i18n_1.default.t('ra_Clear') },
                                 react_1.default.createElement(material_1.IconButton, { size: "large", onClick: e => {
                                         removeIconFunc && removeIconFunc();
                                         e.stopPropagation();
                                     } },
                                     react_1.default.createElement(icons_material_1.Close, null)))),
-                icon && crop && react_1.default.createElement("div", { className: classes.buttonCropWrapper },
+                icon && crop && react_1.default.createElement("div", { style: styles.buttonCropWrapper },
                     react_1.default.createElement(material_1.Tooltip, { title: i18n_1.default.t('ra_Crop') },
                         react_1.default.createElement(material_1.IconButton, { size: "large", onClick: e => {
                                 if (!cropHandler) {
@@ -525,8 +523,8 @@ class UploadImage extends react_1.Component {
                                 }
                             }) }, i18n_1.default.t('ra_Save')),
                         react_1.default.createElement(material_1.MenuItem, { onClick: () => this.setState({ anchorEl: null, cropHandler: false }) }, i18n_1.default.t('ra_Close')))),
-                icon && !cropHandler ? react_1.default.createElement(Icon_1.default, { src: icon, className: classes.image, alt: "icon" }) : null,
-                icon && crop && cropHandler ? react_1.default.createElement(react_cropper_1.Cropper, { ref: this.cropperRef, className: classes.image, src: icon, initialAspectRatio: 1, viewMode: 1, guides: false, minCropBoxHeight: 10, minCropBoxWidth: 10, background: false, checkOrientation: false }) : null)));
+                icon && !cropHandler ? react_1.default.createElement(Icon_1.default, { src: icon, style: styles.image, alt: "icon" }) : null,
+                icon && crop && cropHandler ? react_1.default.createElement(react_cropper_1.Cropper, { ref: this.cropperRef, style: styles.image, src: icon, initialAspectRatio: 1, viewMode: 1, guides: false, minCropBoxHeight: 10, minCropBoxWidth: 10, background: false, checkOrientation: false }) : null)));
     }
 }
-exports.default = (0, styles_1.withStyles)(styles)(UploadImage);
+exports.default = UploadImage;

package/Components/Utils.d.ts

@@ -5,7 +5,7 @@
  *
  * */
 import React from 'react';
-import { ThemeName, ThemeType } from '../types';
+import { IobTheme, ThemeName, ThemeType } from '../types';
 type SmartName = null | false | string | ({
     [lang in ioBroker.Languages]?: string;
 } & {
@@ -305,5 +305,6 @@ declare class Utils {
      * Check if the date is valid
      */
     static isValidDate(date: any): boolean;
+    static getStyle(theme: IobTheme, ...args: (((_theme: IobTheme) => Record<string, any>) | undefined | Record<string, any>)[]): Record<string, any>;
 }
 export default Utils;

package/Components/Utils.js

@@ -1580,6 +1580,37 @@ class Utils {
         // eslint-disable-next-line no-restricted-globals
         return date instanceof Date && !isNaN(date);
     }
+    static 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;
+    }
 }
 Utils.namespace = NAMESPACE;
 Utils.INSTANCES = 'instances';

package/Dialogs/ComplexCron.d.ts

@@ -7,8 +7,16 @@ interface DialogCronProps {
     cancel?: string;
     ok?: string;
     clear?: string;
-    classes: Record<string, string>;
     clearButton?: boolean;
 }
-declare const _default: React.JSXElementConstructor<Omit<DialogCronProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
-export default _default;
+interface DialogCronState {
+    cron: string;
+}
+declare class DialogComplexCron extends React.Component<DialogCronProps, DialogCronState> {
+    constructor(props: DialogCronProps);
+    handleCancel(): void;
+    handleOk(): void;
+    handleClear(): void;
+    render(): React.JSX.Element;
+}
+export default DialogComplexCron;

package/Dialogs/ComplexCron.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
 const ComplexCron_1 = __importDefault(require("../Components/ComplexCron"));
@@ -51,7 +50,7 @@ class DialogComplexCron extends react_1.default.Component {
         this.props.onClose();
     }
     render() {
-        return react_1.default.createElement(material_1.Dialog, { onClose: () => { }, maxWidth: "md", fullWidth: true, classes: { paper: this.props.classes.dialogPaper }, open: !0, "aria-labelledby": "cron-dialog-title" },
+        return react_1.default.createElement(material_1.Dialog, { onClose: () => { }, maxWidth: "md", fullWidth: true, sx: { '& .MuiDialog-paper': styles.dialogPaper }, open: !0, "aria-labelledby": "cron-dialog-title" },
             react_1.default.createElement(material_1.DialogTitle, { id: "cron-dialog-title" }, this.props.title || i18n_1.default.t('ra_Define schedule...')),
             react_1.default.createElement(material_1.DialogContent, { style: { height: '100%', overflow: 'hidden' } },
                 react_1.default.createElement(ComplexCron_1.default, { cronExpression: this.state.cron, onChange: cron => this.setState({ cron }), language: i18n_1.default.getLanguage() })),
@@ -61,4 +60,4 @@ class DialogComplexCron extends react_1.default.Component {
                 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'))));
     }
 }
-exports.default = (0, styles_1.withStyles)(styles)(DialogComplexCron);
+exports.default = DialogComplexCron;

package/Dialogs/Confirm.d.ts

@@ -4,22 +4,35 @@
  * MIT License
  *
  * */
-import React from 'react';
+import React, { Component } from 'react';
 interface DialogConfirmProps {
     title?: string;
+    /** The dialog text */
     text: string | React.JSX.Element;
+    /** Close handler. */
     onClose?: (ok: boolean) => void;
-    classes: {
-        suppress: string;
-        suppressRoot: string;
-    };
+    /** if the dialog must be fill sized */
     fullWidth?: boolean;
+    /** optional icon */
     icon?: React.JSX.Element;
+    /** optional ok button text */
     ok?: string;
+    /** optional cancel button text */
     cancel?: string;
+    /** optional interval in minutes for which the confirmation dialog will be suppressed if activated. */
     suppressQuestionMinutes?: number;
+    /** optional text for the suppression checkbox */
     suppressText?: string;
+    /** optional name of the dialog. Used only with suppressQuestionMinutes to store the user choice */
     dialogName?: string;
 }
-declare const _export: React.JSXElementConstructor<Omit<DialogConfirmProps, "classes"> & import("@mui/styles").StyledComponentProps<"suppress" | "suppressRoot"> & object>;
-export default _export;
+interface DialogConfirmState {
+    suppress: number | boolean;
+}
+declare class DialogConfirm extends Component<DialogConfirmProps, DialogConfirmState> {
+    constructor(props: DialogConfirmProps);
+    handleOk(): void;
+    handleCancel(): void;
+    render(): React.JSX.Element;
+}
+export default DialogConfirm;

package/Dialogs/Confirm.js

@@ -34,7 +34,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 // please do not delete React, as without it other projects could not be compiled: ReferenceError: React is not defined
 const react_1 = __importStar(require("react"));
-const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
 const i18n_1 = __importDefault(require("../i18n"));
@@ -43,19 +42,10 @@ const styles = {
         fontSize: 12,
     },
     suppressRoot: {
-        marginTop: 16,
+        // it is sx
+        marginTop: '16px',
     },
 };
-/**
- * @property title The dialog title; default: Are you sure? (translated)
- * @property text The dialog text.
- * @property ok The ok button text; default: OK (translated)
- * @property cancel The cancel button text; default: Cancel (translated)
- * @property suppressQuestionMinutes interval in minutes for which the confirmation dialog will be suppressed if activated.
- * @property suppressText The suppress checkbox text; default: Suppress question for next %s minutes (translated)
- * @property dialogName Name of the dialog. Used only with suppressQuestionMinutes to store the user choice
- * @property onClose Close handler.
- */
 class DialogConfirm extends react_1.Component {
     constructor(props) {
         super(props);
@@ -102,11 +92,10 @@ class DialogConfirm extends react_1.Component {
                     this.props.icon || null,
                     this.props.text,
                     this.props.suppressQuestionMinutes ? react_1.default.createElement("br", null) : null,
-                    this.props.suppressQuestionMinutes ? react_1.default.createElement(material_1.FormControlLabel, { classes: { label: this.props.classes.suppress, root: this.props.classes.suppressRoot }, control: react_1.default.createElement(material_1.Checkbox, { id: `ar_dialog_confirm_suppress_${this.props.dialogName || ''}`, checked: !!this.state.suppress, onChange: () => this.setState({ suppress: !this.state.suppress }) }), label: this.props.suppressText || i18n_1.default.t('ra_Suppress question for next %s minutes', (this.props.suppressQuestionMinutes || 2).toString()) }) : null)),
+                    this.props.suppressQuestionMinutes ? react_1.default.createElement(material_1.FormControlLabel, { sx: { '& .FormControlLabel-label': styles.suppress, '&.FormControlLabel-root': styles.suppressRoot }, control: react_1.default.createElement(material_1.Checkbox, { id: `ar_dialog_confirm_suppress_${this.props.dialogName || ''}`, checked: !!this.state.suppress, onChange: () => this.setState({ suppress: !this.state.suppress }) }), label: this.props.suppressText || i18n_1.default.t('ra_Suppress question for next %s minutes', (this.props.suppressQuestionMinutes || 2).toString()) }) : null)),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { id: `ar_dialog_confirm_ok_${this.props.dialogName || ''}`, variant: "contained", onClick: () => this.handleOk(), color: "primary", autoFocus: true, startIcon: react_1.default.createElement(icons_material_1.Check, null) }, this.props.ok || i18n_1.default.t('ra_Ok')),
                 react_1.default.createElement(material_1.Button, { id: `ar_dialog_confirm_cancel_${this.props.dialogName || ''}`, variant: "contained", onClick: () => this.handleCancel(), color: "grey", startIcon: react_1.default.createElement(icons_material_1.Close, null) }, this.props.cancel || i18n_1.default.t('ra_Cancel'))));
     }
 }
-const _export = (0, styles_1.withStyles)(styles)(DialogConfirm);
-exports.default = _export;
+exports.default = DialogConfirm;

package/Dialogs/Cron.d.ts

@@ -12,7 +12,16 @@ interface DialogCronProps {
     complex?: boolean;
     /** do not show wizard */
     noWizard?: boolean;
-    classes: Record<string, string>;
 }
-declare const _default: React.JSXElementConstructor<Omit<DialogCronProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
-export default _default;
+interface DialogCronState {
+    cron: string;
+    mode: 'simple' | 'complex' | 'wizard';
+}
+declare class DialogCron extends React.Component<DialogCronProps, DialogCronState> {
+    constructor(props: DialogCronProps);
+    handleCancel(): void;
+    handleOk(): void;
+    setMode(mode: 'simple' | 'complex' | 'wizard'): void;
+    render(): React.JSX.Element;
+}
+export default DialogCron;

package/Dialogs/Cron.js

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
 const ComplexCron_1 = __importDefault(require("../Components/ComplexCron"));
@@ -36,13 +35,6 @@ const Schedule_1 = __importDefault(require("../Components/Schedule"));
 const i18n_1 = __importDefault(require("../i18n"));
 // Generate cron expression
 const styles = {
-    headerID: {
-        fontWeight: 'bold',
-        fontStyle: 'italic',
-    },
-    radio: {
-        display: 'inline-block',
-    },
     dialogPaper: {
         height: 'calc(100% - 96px)',
     },
@@ -80,7 +72,7 @@ class DialogCron extends react_1.default.Component {
         this.setState({ mode });
     }
     render() {
-        return react_1.default.createElement(material_1.Dialog, { onClose: () => { }, maxWidth: "md", fullWidth: true, classes: { paper: this.props.classes.dialogPaper }, open: !0, "aria-labelledby": "cron-dialog-title" },
+        return react_1.default.createElement(material_1.Dialog, { onClose: () => { }, maxWidth: "md", fullWidth: true, sx: { '& .MuiDialog-paper': styles.dialogPaper }, open: !0, "aria-labelledby": "cron-dialog-title" },
             react_1.default.createElement(material_1.DialogTitle, { id: "cron-dialog-title" }, this.props.title || i18n_1.default.t('ra_Define schedule...')),
             react_1.default.createElement(material_1.DialogContent, { style: { height: '100%', overflow: 'hidden' } },
                 (this.props.simple && this.props.complex) || (!this.props.simple && !this.props.complex) ? react_1.default.createElement("div", null,
@@ -94,11 +86,11 @@ 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, { 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')),
                 react_1.default.createElement(material_1.Button, { variant: "contained", onClick: () => this.handleCancel(), color: "grey", startIcon: react_1.default.createElement(icons_material_1.Cancel, null) }, this.props.cancel || i18n_1.default.t('ra_Cancel'))));
     }
 }
-exports.default = (0, styles_1.withStyles)(styles)(DialogCron);
+exports.default = DialogCron;

package/Dialogs/SelectFile.d.ts

@@ -52,7 +52,6 @@ interface DialogSelectFileProps {
     /** Handler that is called when the user presses OK or by double click. */
     onOk: (selected: string | string[] | undefined) => void;
     /** The styling class names. */
-    classes: Record<string, string>;
     filters?: Record<string, string>;
     /** Allow switch views Table<=>Rows */
     showViewTypeButton?: boolean;
@@ -67,5 +66,15 @@ interface DialogSelectFileProps {
     /** Translate function - optional */
     t?: (text: string, ...args: any[]) => string;
 }
-declare const _default: React.JSXElementConstructor<Omit<DialogSelectFileProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
-export default _default;
+interface DialogSelectFileState {
+    selected: string[];
+}
+declare class DialogSelectFile extends React.Component<DialogSelectFileProps, DialogSelectFileState> {
+    private readonly dialogName;
+    private readonly filters;
+    constructor(props: DialogSelectFileProps);
+    handleCancel(): void;
+    handleOk(): void;
+    render(): React.JSX.Element;
+}
+export default DialogSelectFile;