@iobroker/adapter-react-v5 4.14.1 → 5.0.1

package/Components/FileBrowser.js

@@ -1496,7 +1496,6 @@ class FileBrowser extends react_1.Component {
                     }
                 });
                 newState.folders = folders;
-                // @ts-expect-error fix later
                 this.setState(newState, () => setTimeout(() => {
                     this.browseFolders([...this.state.expanded], folders)
                         .then(_folders => this.setState({ folders: _folders }));

package/Components/FileViewer.js

@@ -176,7 +176,6 @@ class FileViewer extends react_1.Component {
                         newState.editingValue = fileData;
                     }
                 }
-                // @ts-expect-error I don't know how to fix it
                 this.setState(newState);
             })
                 .catch(e => window.alert(`Cannot read file: ${e}`));
@@ -221,7 +220,6 @@ class FileViewer extends react_1.Component {
                 return react_1.default.createElement(IconNoIcon_1.default, { className: Utils_1.default.clsx(this.props.classes.img, this.props.getClassBackgroundImage()) });
             }
             return react_1.default.createElement(Icon_1.default, { onError: e => {
-                    // @ts-ignore-error to check
                     e.target.onerror = null;
                     this.setState({ imgError: true });
                 }, className: Utils_1.default.clsx(this.props.classes.img, this.props.getClassBackgroundImage()), src: `${this.props.href}?ts=${this.state.forceUpdate}`, alt: this.props.href });

package/Components/Logo.js

@@ -21,7 +21,7 @@ class Logo extends react_1.default.Component {
             if (f) {
                 const r = new window.FileReader();
                 r.onload = () => {
-                    // @ts-ignore
+                    // @ts-expect-error I don't know how to fix this
                     const contents = target.result;
                     try {
                         const json = JSON.parse(contents);

package/Components/ObjectBrowser.js

@@ -3963,8 +3963,11 @@ class ObjectBrowser extends react_1.Component {
         }
         if (this.state.roleDialog && this.props.objectBrowserEditRole) {
             const ObjectBrowserEditRole = this.props.objectBrowserEditRole;
-            // @ts-expect-error How to solve it?
-            return react_1.default.createElement(ObjectBrowserEditRole, { key: "objectBrowserEditRole", id: this.state.roleDialog, socket: this.props.socket, t: this.props.t, roles: this.info.roles, onClose: (obj) => {
+            return react_1.default.createElement(ObjectBrowserEditRole
+            // dummy, just to make compiler happy
+            , { 
+                // dummy, just to make compiler happy
+                classes: {}, key: "objectBrowserEditRole", id: this.state.roleDialog, socket: this.props.socket, t: this.props.t, roles: this.info.roles, onClose: (obj) => {
                     if (obj) {
                         this.info.objects[this.state.roleDialog] = obj;
                     }
@@ -4549,9 +4552,8 @@ class ObjectBrowser extends react_1.Component {
         counter = counter || { count: 0 };
         let leaf = this.renderLeaf(root, isExpanded, classes, counter);
         const DragWrapper = this.props.DragWrapper;
-        if (this.props.dragEnabled) {
+        if (this.props.dragEnabled && DragWrapper) {
             if (root.data.sumVisibility) {
-                // @ts-expect-error How to solve it?
                 leaf = react_1.default.createElement(DragWrapper, { key: root.data.id, item: root, className: classes.draggable }, leaf);
             }
             else {
@@ -4906,8 +4908,7 @@ class ObjectBrowser extends react_1.Component {
     renderCustomDialog() {
         if (this.state.customDialog && this.props.objectCustomDialog) {
             const ObjectCustomDialog = this.props.objectCustomDialog;
-            // @ts-expect-error How to solve it?
-            return react_1.default.createElement(ObjectCustomDialog, { reportChangedIds: (changedIds) => (this.changedIds = [...changedIds]), objectIDs: this.state.customDialog, allVisibleObjects: this.state.customDialogAll, expertMode: this.state.filter.expertMode, isFloatComma: this.props.isFloatComma, t: this.props.t, lang: this.props.lang, socket: this.props.socket, themeName: this.props.themeName, themeType: this.props.themeType, theme: this.props.theme, objects: this.objects, customsInstances: this.info.customs, onClose: () => {
+            return react_1.default.createElement(ObjectCustomDialog, { reportChangedIds: (changedIds) => (this.changedIds = [...changedIds]), objectIDs: this.state.customDialog, allVisibleObjects: !!this.state.customDialogAll, expertMode: this.state.filter.expertMode, isFloatComma: this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma, t: this.props.t, lang: this.props.lang, socket: this.props.socket, themeName: this.props.themeName, themeType: this.props.themeType, theme: this.props.theme, objects: this.objects, customsInstances: this.info.customs, onClose: () => {
                     var _b;
                     this.pauseSubscribe(false);
                     this.setState({ customDialog: null });
@@ -4917,7 +4918,9 @@ class ObjectBrowser extends react_1.Component {
                         this.forceUpdate();
                     }
                     (_b = this.props.router) === null || _b === void 0 ? void 0 : _b.doNavigate('tab-objects');
-                }, systemConfig: this.systemConfig });
+                }, systemConfig: this.systemConfig, 
+                // dummy, just to make compiler happy
+                classes: {} });
         }
         return null;
     }
@@ -4936,8 +4939,11 @@ class ObjectBrowser extends react_1.Component {
             return null;
         }
         const ObjectBrowserEditObject = this.props.objectBrowserEditObject;
-        // @ts-expect-error How to solve it?
-        return react_1.default.createElement(ObjectBrowserEditObject, { key: this.state.editObjectDialog, obj: this.objects[this.state.editObjectDialog], roleArray: this.info.roles, objects: this.objects, dateFormat: this.props.dateFormat, isFloatComma: this.props.isFloatComma, themeType: this.props.themeType, socket: this.props.socket, dialogName: this.props.dialogName, aliasTab: this.state.editObjectAlias, t: this.props.t, expertMode: this.state.filter.expertMode, onNewObject: (obj) => this.props.socket
+        return react_1.default.createElement(ObjectBrowserEditObject
+        // dummy, just to make compiler happy
+        , { 
+            // dummy, just to make compiler happy
+            classes: {}, key: this.state.editObjectDialog, obj: this.objects[this.state.editObjectDialog], roleArray: this.info.roles, objects: this.objects, dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat, isFloatComma: this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma, themeType: this.props.themeType, socket: this.props.socket, dialogName: this.props.dialogName, aliasTab: this.state.editObjectAlias, t: this.props.t, expertMode: !!this.state.filter.expertMode, onNewObject: (obj) => this.props.socket
                 .setObject(obj._id, obj)
                 .then(() => this.setState({ editObjectDialog: obj._id, editObjectAlias: false }, () => this.onSelect(obj._id)))
                 .catch(e => this.showError(`Cannot write object: ${e}`)), onClose: (obj) => {
@@ -4968,16 +4974,14 @@ class ObjectBrowser extends react_1.Component {
             return null;
         }
         const ObjectBrowserViewFile = this.props.objectBrowserViewFile;
-        // @ts-expect-error How to solve it?
-        return react_1.default.createElement(ObjectBrowserViewFile, { key: "viewFile", obj: this.objects[this.state.viewFileDialog], themeType: this.props.themeType, socket: this.props.socket, dialogName: this.props.dialogName, t: this.props.t, expertMode: this.state.filter.expertMode, onClose: () => this.setState({ viewFileDialog: '' }) });
+        return react_1.default.createElement(ObjectBrowserViewFile, { key: "viewFile", obj: this.objects[this.state.viewFileDialog], socket: this.props.socket, t: this.props.t, onClose: () => this.setState({ viewFileDialog: '' }) });
     }
     renderAliasEditorDialog() {
         if (!this.props.objectBrowserAliasEditor || !this.state.showAliasEditor) {
             return null;
         }
         const ObjectBrowserAliasEditor = this.props.objectBrowserAliasEditor;
-        // @ts-expect-error How to solve it?
-        return react_1.default.createElement(ObjectBrowserAliasEditor, { key: "editAlias", obj: this.objects[this.state.showAliasEditor], objects: this.objects, themeType: this.props.themeType, socket: this.props.socket, dialogName: this.props.dialogName, t: this.props.t, expertMode: this.state.filter.expertMode, onClose: () => this.setState({ showAliasEditor: '' }), onRedirect: (id, timeout) => setTimeout(() => this.onSelect(id, false, () => this.expandAllSelected(() => {
+        return react_1.default.createElement(ObjectBrowserAliasEditor, { key: "editAlias", obj: this.objects[this.state.showAliasEditor], objects: this.objects, socket: this.props.socket, t: this.props.t, onClose: () => this.setState({ showAliasEditor: '' }), onRedirect: (id, timeout) => setTimeout(() => this.onSelect(id, false, () => this.expandAllSelected(() => {
                 this.scrollToItem(id);
                 setTimeout(() => this.setState({
                     editObjectDialog: id,
@@ -5325,11 +5329,12 @@ class ObjectBrowser extends react_1.Component {
             : typeof this.edit.val;
         const role = this.objects[this.edit.id].common.role;
         const ObjectBrowserValue = this.props.objectBrowserValue;
-        // @ts-expect-error How to solve it?
-        return react_1.default.createElement(ObjectBrowserValue, { t: this.props.t, lang: this.props.lang, type: type, role: role, states: Utils_1.default.getStates(this.objects[this.edit.id]), themeType: this.props.themeType, expertMode: this.state.filter.expertMode, value: this.edit.val, socket: this.props.socket, object: this.objects[this.edit.id], defaultHistory: this.defaultHistory, dateFormat: this.props.dateFormat, onClose: (res) => {
+        return react_1.default.createElement(ObjectBrowserValue, { t: this.props.t, lang: this.props.lang, type: type, role: role || '', states: Utils_1.default.getStates(this.objects[this.edit.id]), themeType: this.props.themeType, expertMode: !!this.state.filter.expertMode, value: this.edit.val, socket: this.props.socket, object: this.objects[this.edit.id], defaultHistory: this.defaultHistory, dateFormat: this.props.dateFormat || this.systemConfig.common.dateFormat, isFloatComma: this.props.isFloatComma === undefined ? this.systemConfig.common.isFloatComma : this.props.isFloatComma, onClose: (res) => {
                 this.setState({ updateOpened: false });
                 res && this.onUpdate(res);
-            } });
+            }, 
+            // dummy, just to make compiler happy
+            classes: {} });
     }
     /**
      * The rendering method of this component.

package/Components/SaveCloseButtons.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { IobTheme } from '../types';
 interface SaveCloseButtonsProps {
     noTextOnButtons?: boolean;
-    theme: any;
+    theme: IobTheme;
     isIFrame?: boolean;
     newReact?: boolean;
     onSave: (close: boolean) => void;
@@ -10,10 +11,7 @@ interface SaveCloseButtonsProps {
     paddingLeft?: number;
     changed: boolean;
     error?: boolean;
-    classes: {
-        buttonIcon: string;
-    };
+    classes: Record<string, string>;
 }
-/** @type {typeof SaveCloseButtons} */
-declare const _export: React.JSXElementConstructor<Omit<SaveCloseButtonsProps, "classes"> & import("@mui/styles").StyledComponentProps<"buttonIcon"> & object>;
-export default _export;
+declare const _default: React.JSXElementConstructor<Omit<SaveCloseButtonsProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
+export default _default;

package/Components/SaveCloseButtons.js

@@ -9,11 +9,11 @@ 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"));
-const styles = () => ({
+const styles = {
     buttonIcon: {
         marginRight: 8,
     },
-});
+};
 /**
  * @typedef {object} SaveCloseButtonsProps
  * @property {boolean} noTextOnButtons Are the buttons without text
@@ -76,6 +76,4 @@ class SaveCloseButtons extends react_1.default.Component {
                 !noTextOnButtons && i18n_1.default.t('ra_Close')));
     }
 }
-/** @type {typeof SaveCloseButtons} */
-const _export = (0, styles_1.withStyles)(styles)(SaveCloseButtons);
-exports.default = _export;
+exports.default = (0, styles_1.withStyles)(styles)(SaveCloseButtons);

package/Components/Schedule.d.ts

@@ -1,32 +1,3 @@
 import React from 'react';
-interface ScheduleConfig {
-    time: {
-        exactTime: boolean;
-        start: string;
-        end: string;
-        mode: string;
-        interval: number;
-    };
-    period: {
-        once: string;
-        days: number;
-        dows: string;
-        dates: string;
-        weeks: number;
-        months: string | number;
-        years: number;
-        yearMonth: number;
-        yearDate: number;
-    };
-    valid: {
-        from: string;
-        to?: string;
-    };
-}
-interface ScheduleProps {
-    classes: Record<string, string>;
-    schedule: string | ScheduleConfig;
-    onChange: (schedule: string, desc?: string) => void;
-}
-declare const _default: React.JSXElementConstructor<Omit<ScheduleProps, "classes"> & import("@mui/styles").StyledComponentProps<"hr" | "scrollWindow" | "rowDiv" | "modeDiv" | "settingsDiv" | "inputTime" | "inputDate" | "inputEvery" | "inputRadio" | "inputGroup" | "inputGroupElement" | "inputDateDay" | "inputDateDayCheck" | "inputSmallCheck" | "rowOnce" | "rowDays" | "rowDows" | "rowDates" | "rowWeeks" | "rowMonths" | "rowMonthsDates" | "rowYears" | "rowDaysDows" | "rowDowsDows"> & object>;
+declare const _default: React.JSXElementConstructor<any>;
 export default _default;

package/Components/Schedule.js

@@ -30,7 +30,7 @@ const react_1 = __importStar(require("react"));
 const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const i18n_1 = __importDefault(require("../i18n"));
-const styles = (theme) => ({
+const styles = theme => ({
     hr: {
         border: 0,
         borderTop: '1px solid gray',

package/Components/SimpleCron/cronText.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const cron2text_1 = __importDefault(require("./cron2text"));
 const jquery_cron_locale_1 = __importDefault(require("./jquery.cron.locale"));
+// TODO: other languages
 function correctCasus(text /* , seconds */) {
     text = text.replace('Каждую(ый) минуту', 'Каждую минуту');
     text = text.replace('Каждую(ый) минут(у)', 'Каждую минуту');

package/Components/TabContainer.d.ts

@@ -5,13 +5,9 @@ interface TabContainerProps {
     className?: string;
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     tabIndex?: number;
-    classes: {
-        root: string;
-        overflowHidden: string;
-        container: string;
-    };
+    classes: Record<string, string>;
     children: React.ReactNode;
 }
 /** @type {typeof TabContainer} */
-declare const _export: React.JSXElementConstructor<Omit<TabContainerProps, "classes"> & import("@mui/styles").StyledComponentProps<"root" | "container" | "overflowHidden"> & object>;
+declare const _export: React.JSXElementConstructor<Omit<TabContainerProps, "classes"> & import("@mui/styles").StyledComponentProps<string> & object>;
 export default _export;

package/Components/TabContainer.js

@@ -1,32 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styles_1 = require("@mui/styles");
 const material_1 = require("@mui/material");
 const Utils_1 = __importDefault(require("./Utils"));
@@ -42,12 +19,9 @@ const styles = {
         height: '100%',
     },
 };
-class TabContainer extends react_1.Component {
-    render() {
-        const { classes } = this.props;
-        return react_1.default.createElement(material_1.Paper, { elevation: !Number.isNaN(this.props.elevation) ? this.props.elevation : 1, className: Utils_1.default.clsx(classes.root, { [classes.overflowHidden]: this.props.overflow !== 'visible' }, this.props.className), onKeyDown: this.props.onKeyDown, tabIndex: this.props.tabIndex },
-            react_1.default.createElement(material_1.Grid, { container: true, direction: "column", wrap: "nowrap", className: classes.container }, this.props.children));
-    }
+function TabContainer(props) {
+    return react_1.default.createElement(material_1.Paper, { elevation: !Number.isNaN(props.elevation) ? props.elevation : 1, className: Utils_1.default.clsx(props.classes.root, { [props.classes.overflowHidden]: props.overflow !== 'visible' }, props.className), onKeyDown: props.onKeyDown, tabIndex: props.tabIndex },
+        react_1.default.createElement(material_1.Grid, { container: true, direction: "column", wrap: "nowrap", className: props.classes.container }, props.children));
 }
 /** @type {typeof TabContainer} */
 const _export = (0, styles_1.withStyles)(styles)(TabContainer);

package/Components/TabContent.js

@@ -17,10 +17,7 @@ const styles = {
         overflow: 'auto',
     },
 };
-class TabContent extends react_1.default.Component {
-    render() {
-        const { classes } = this.props;
-        return react_1.default.createElement(material_1.Grid, { item: true, className: Utils_1.default.clsx(classes.root, this.props.overflow === 'auto' ? classes.overflowAuto : '') }, this.props.children);
-    }
+function TabContent(props) {
+    return react_1.default.createElement(material_1.Grid, { item: true, className: Utils_1.default.clsx(props.classes.root, props.overflow === 'auto' ? props.classes.overflowAuto : '') }, props.children);
 }
 exports.default = (0, styles_1.withStyles)(styles)(TabContent);

package/Components/TabHeader.d.ts

@@ -2,7 +2,5 @@ import React from 'react';
 interface TabHeaderProps {
     children: React.ReactNode;
 }
-declare class TabHeader extends React.Component<TabHeaderProps> {
-    render(): React.JSX.Element;
-}
+declare function TabHeader(props: TabHeaderProps): React.JSX.Element;
 export default TabHeader;

package/Components/TabHeader.js

@@ -5,9 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
-class TabHeader extends react_1.default.Component {
-    render() {
-        return react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" }, this.props.children);
-    }
+function TabHeader(props) {
+    return react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" }, props.children);
 }
 exports.default = TabHeader;

package/Components/TreeTable.js

@@ -241,63 +241,46 @@ class TreeTable extends react_1.Component {
             val = val[0];
         }
         if (col.lookup) {
-            return this.renderCellEditSelect(item, col, val);
+            return this.renderCellEditSelect(col, val);
         }
         if (col.editComponent) {
-            return this.renderCellEditCustom(item, col, val);
+            return this.renderCellEditCustom(col, val, item);
         }
         if (col.type === 'boolean' || (!col.type && typeof val === 'boolean')) {
-            return this.renderCellEditBoolean(item, col, val);
+            return this.renderCellEditBoolean(col, val);
         }
         if (col.type === 'color') {
-            return this.renderCellEditColor(item, col, val);
+            return this.renderCellEditColor(col, val);
         }
         if (col.type === 'oid') {
-            return this.renderCellEditObjectID(item, col, val);
+            return this.renderCellEditObjectID(col, val);
         }
         if (col.type === 'numeric') {
-            return this.renderCellEditNumber(item, col, val);
+            return this.renderCellEditNumber(col, val);
         }
-        return this.renderCellEditString(item, col, val);
+        return this.renderCellEditString(col, val);
     }
-    renderCellEditSelect(item, col, val) {
-        return react_1.default.createElement(material_1.Select, { variant: "standard", onChange: e => {
-                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                if (e.target.value === val) {
-                    delete editData[col.field];
-                }
-                else {
-                    editData[col.field] = e.target.value;
-                }
-                this.setState({ editData });
-            }, value: (this.state.editData && this.state.editData[col.field]) || val }, col.lookup && Object.keys(col.lookup)
+    onChange(col, oldValue, newValue) {
+        const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
+        if (newValue === oldValue) {
+            delete editData[col.field];
+        }
+        else {
+            editData[col.field] = newValue;
+        }
+        this.setState({ editData });
+    }
+    renderCellEditSelect(col, val) {
+        return react_1.default.createElement(material_1.Select, { variant: "standard", onChange: e => this.onChange(col, val, e.target.value), value: (this.state.editData && this.state.editData[col.field]) || val }, col.lookup && Object.keys(col.lookup)
             .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(item, 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 => {
-                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                if (e.target.value === val) {
-                    delete editData[col.field];
-                }
-                else {
-                    editData[col.field] = e.target.value;
-                }
-                this.setState({ editData });
-            } });
+    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) });
     }
-    renderCellEditNumber(item, 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 => {
-                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                if (e.target.value === val) {
-                    delete editData[col.field];
-                }
-                else {
-                    editData[col.field] = e.target.value;
-                }
-                this.setState({ editData });
-            } });
+    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) });
     }
-    renderCellEditCustom(item, col, val) {
+    renderCellEditCustom(col, val, item) {
         const EditComponent = col.editComponent;
         // use new value if exists
         if (this.state.editData && this.state.editData[col.field] !== undefined) {
@@ -305,28 +288,10 @@ 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) => {
-                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                if (newVal === val) {
-                    delete editData[col.field];
-                }
-                else {
-                    editData[col.field] = newVal;
-                }
-                this.setState({ editData });
-            } });
+        return react_1.default.createElement(EditComponent, { value: val, rowData: item, onChange: (newVal) => this.onChange(col, val, newVal) });
     }
-    renderCellEditBoolean(item, 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 => {
-                const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                if (e.target.checked === !!val) {
-                    delete editData[col.field];
-                }
-                else {
-                    editData[col.field] = e.target.checked;
-                }
-                this.setState({ editData });
-            }, inputProps: { 'aria-label': 'checkbox' } });
+    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: () => {
@@ -335,30 +300,12 @@ class TreeTable extends react_1.Component {
             }, open: this.state.showSelectColor },
             react_1.default.createElement(react_colorful_1.HexColorPicker, { color: this.state.selectIdValue, onChange: color => this.setState({ selectIdValue: color }, () => this.selectCallback && this.selectCallback(color)) }));
     }
-    renderCellEditColor(item, col, val) {
+    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 => {
-                    const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                    if (e.target.value === val) {
-                        delete editData[col.field];
-                    }
-                    else {
-                        editData[col.field] = e.target.value;
-                    }
-                    this.setState({ editData });
-                } }),
+            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: () => {
-                    this.selectCallback = newColor => {
-                        const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                        if (newColor === val) {
-                            delete editData[col.field];
-                        }
-                        else {
-                            editData[col.field] = newColor;
-                        }
-                        this.setState({ editData });
-                    };
+                    this.selectCallback = newColor => this.onChange(col, val, newColor);
                     this.setState({ showSelectColor: true, selectIdValue: val });
                 }, size: "large" },
                 react_1.default.createElement(icons_material_1.Colorize, null)));
@@ -373,29 +320,11 @@ class TreeTable extends react_1.Component {
         }
         return null;
     }
-    renderCellEditObjectID(item, col, val) {
+    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 => {
-                    const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                    if (e.target.value === val) {
-                        delete editData[col.field];
-                    }
-                    else {
-                        editData[col.field] = e.target.value;
-                    }
-                    this.setState({ editData });
-                } }),
+            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: () => {
-                    this.selectCallback = selected => {
-                        const editData = this.state.editData ? Object.assign({}, this.state.editData) : {};
-                        if (selected === val) {
-                            delete editData[col.field];
-                        }
-                        else {
-                            editData[col.field] = selected;
-                        }
-                        this.setState({ editData });
-                    };
+                    this.selectCallback = selected => this.onChange(col, val, selected);
                     this.setState({ showSelectId: true, selectIdValue: val });
                 }, size: "large" },
                 react_1.default.createElement(icons_material_1.ViewHeadline, null)));

package/Components/Utils.d.ts

@@ -1,20 +1,22 @@
 /**
- * Copyright 2018-2023 Denis Haev <dogafox@gmail.com>
+ * Copyright 2018-2024 Denis Haev <dogafox@gmail.com>
  *
  * MIT License
  *
  **/
 import React from 'react';
-import { ThemeName, ThemeType } from "../types";
+import { ThemeName, ThemeType } from '../types';
 interface GetObjectNameOptions {
     name?: ioBroker.StringOrTranslated;
     language?: ioBroker.Languages;
 }
-type SmartName = null | (ioBroker.StringOrTranslated & {
+type SmartName = null | false | string | ({
+    [lang in ioBroker.Languages]?: string;
+} & {
     /** Which kind of device it is */
     smartType?: string | null;
     /** Which value to set when the ON command is issued */
-    byOn?: string | null;
+    byON?: string | null;
 });
 declare namespace clsx {
     type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined;
@@ -262,10 +264,9 @@ declare class Utils {
     static generateFile(fileName: string, json: string): void;
     /**
      * Convert quality code into text
-     * @param {number} quality code
-     * @returns {array<string>} lines that decode quality
+     * @returns lines that decode quality
      */
-    static quality2text(quality: number): string[];
+    static quality2text(quality: ioBroker.STATE_QUALITY[keyof ioBroker.STATE_QUALITY]): string[];
     /**
      * Deep copy object
      */

package/Components/Utils.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 /**
- * Copyright 2018-2023 Denis Haev <dogafox@gmail.com>
+ * Copyright 2018-2024 Denis Haev <dogafox@gmail.com>
  *
  * MIT License
  *
@@ -262,7 +262,6 @@ class Utils {
             }
         }
         if (common) {
-            // @ts-ignore todo: after new types released
             settings.color = settings.color || common.color;
             settings.icon = settings.icon || common.icon;
             settings.name = settings.name || common.name;
@@ -294,7 +293,6 @@ class Utils {
             const s = obj.common.custom[NAMESPACE][options.user || 'admin'];
             if (s.useCommon) {
                 if (s.color !== undefined) {
-                    // @ts-ignore todo: after new types released
                     obj.common.color = s.color;
                     delete s.color;
                 }
@@ -563,7 +561,7 @@ class Utils {
             const m = now.match(/(\d{1,4})[-./](\d{1,2})[-./](\d{1,4})/);
             if (m) {
                 const a = [parseInt(m[1], 10), parseInt(m[2], 10), parseInt(m[3], 10)];
-                // we now have 3 numbers. Let's try to detect where is year, where is day and where is month
+                // We now have 3 numbers. Let's try to detect where is year, where is day and where is month
                 const year = a.find(y => y > 31);
                 if (year !== undefined) {
                     a.splice(a.indexOf(year), 1);
@@ -651,18 +649,14 @@ class Utils {
         if (!id) {
             if (!noCommon) {
                 if (!states.common) {
-                    // @ts-ignore
                     return states.smartName;
                 }
                 if (states && !states.common) {
-                    // @ts-ignore
                     return states.smartName;
                 }
-                // @ts-ignore
                 return states.common.smartName;
             }
             if (states && !states.common) {
-                // @ts-ignore
                 return states.smartName;
             }
             const obj = states;
@@ -670,7 +664,6 @@ class Utils {
                 obj.common.custom[instanceId].smartName : undefined;
         }
         if (!noCommon) {
-            // @ts-ignore
             return states[id].common.smartName;
         }
         const obj = states[id];
@@ -684,18 +677,14 @@ class Utils {
         var _a;
         if (!noCommon) {
             if (!obj.common) {
-                // @ts-ignore
                 return obj.smartName;
             }
             if (obj && !obj.common) {
-                // @ts-ignore
                 return obj.smartName;
             }
-            // @ts-ignore
             return obj.common.smartName;
         }
         if (obj && !obj.common) {
-            // @ts-ignore
             return obj.smartName;
         }
         return ((_a = obj === null || obj === void 0 ? void 0 : obj.common) === null || _a === void 0 ? void 0 : _a.custom) && obj.common.custom[instanceId] ?
@@ -724,7 +713,6 @@ class Utils {
             }
         }
         else {
-            // @ts-ignore
             obj.common.smartName = null;
         }
     }
@@ -783,7 +771,6 @@ class Utils {
             }
             else {
                 obj.common.smartName = obj.common.smartName || {};
-                // @ts-ignore
                 obj.common.smartName.byON = byON;
             }
         }
@@ -832,7 +819,7 @@ class Utils {
                             delete obj.common.custom[instanceId].uk;
                             delete obj.common.custom[instanceId]['zh-cn'];
                         }
-                        // @ts-ignore
+                        // @ts-expect-error
                     }
                     else if (obj.common.smartName && obj.common.smartName.byON !== undefined) {
                         delete obj.common.smartName.en;
@@ -848,7 +835,6 @@ class Utils {
                         delete obj.common.smartName['zh-cn'];
                     }
                     else {
-                        // @ts-ignore
                         obj.common.smartName = null;
                     }
                 }
@@ -865,7 +851,6 @@ class Utils {
             obj.common.custom[instanceId].smartName = false;
         }
         else {
-            // @ts-ignore
             obj.common.smartName = false;
         }
     }
@@ -1418,13 +1403,11 @@ class Utils {
     }
     /**
      * Convert quality code into text
-     * @param {number} quality code
-     * @returns {array<string>} lines that decode quality
+     * @returns lines that decode quality
      */
     static quality2text(quality) {
         // eslint-disable-next-line no-bitwise
         const custom = quality & 0xFFFF0000;
-        // @ts-ignore
         const text = QUALITY_BITS[quality];
         let result;
         if (text) {
@@ -1523,7 +1506,6 @@ class Utils {
      */
     static detectMimeType(base64) {
         const signature = Object.keys(SIGNATURES).find(s => base64.startsWith(s));
-        // @ts-ignore
         return signature ? SIGNATURES[signature] : null;
     }
     /**

package/Dialogs/ComplexCron.js

@@ -57,15 +57,15 @@ class DialogComplexCron extends react_1.default.Component {
                 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,
                 !!this.props.clearButton && react_1.default.createElement(material_1.Button
-                // @ts-expect-error
+                // @ts-expect-error grey is valid color
                 , { 
-                    // @ts-expect-error
+                    // @ts-expect-error grey is valid color
                     color: "grey", variant: "contained", onClick: () => this.handleClear(), startIcon: react_1.default.createElement(icons_material_1.Delete, null) }, this.props.clear || i18n_1.default.t('ra_Clear')),
                 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
-                // @ts-expect-error
+                // @ts-expect-error grey is valid color
                 , { 
-                    // @ts-expect-error
+                    // @ts-expect-error grey is valid color
                     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/Confirm.js

@@ -106,7 +106,7 @@ class DialogConfirm extends react_1.Component {
             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(), 
-                    // @ts-expect-error
+                    // @ts-expect-error grey is valid color
                     color: "grey", startIcon: react_1.default.createElement(icons_material_1.Close, null) }, this.props.cancel || i18n_1.default.t('ra_Cancel'))));
     }
 }

package/Dialogs/Cron.js

@@ -99,7 +99,7 @@ class DialogCron extends react_1.default.Component {
             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(), 
-                    // @ts-expect-error grey is allowed color
+                    // @ts-expect-error grey is valid color
                     color: "grey", startIcon: react_1.default.createElement(icons_material_1.Cancel, null) }, this.props.cancel || i18n_1.default.t('ra_Cancel'))));
     }
 }

package/Dialogs/SelectFile.js

@@ -113,9 +113,9 @@ class DialogSelectFile extends react_1.default.Component {
             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
-                // @ts-expect-error grey is allowed color
+                // @ts-expect-error grey is valid color
                 , { 
-                    // @ts-expect-error grey is allowed color
+                    // @ts-expect-error grey is valid color
                     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.js

@@ -146,7 +146,7 @@ class DialogSelectID extends react_1.Component {
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(material_1.Button, { id: `ar_dialog_selectid_ok_${this.props.dialogName || ''}`, 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, { id: `ar_dialog_selectid_cancel_${this.props.dialogName || ''}`, 
-                    // @ts-expect-error
+                    // @ts-expect-error grey is valid color
                     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/SimpleCron.js

@@ -54,7 +54,7 @@ class DialogSimpleCron extends react_1.default.Component {
             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(), 
-                    // @ts-expect-error grey is allowed color
+                    // @ts-expect-error grey is valid color
                     color: "grey", startIcon: react_1.default.createElement(icons_material_1.Cancel, null) }, this.props.cancel || i18n_1.default.t('ra_Cancel'))));
     }
 }

package/GenericApp.d.ts

@@ -7,7 +7,7 @@
 import React from 'react';
 import { AdminConnection } from '@iobroker/socket-client';
 import Router from './Components/Router';
-import { GenericAppProps, GenericAppState, GenericAppSettings, ThemeName, ThemeType, Theme, Width } from './types';
+import { GenericAppProps, GenericAppState, GenericAppSettings, ThemeName, ThemeType, IobTheme, Width } from './types';
 declare global {
     /** If config has been changed */
     var changed: boolean;
@@ -69,15 +69,15 @@ declare class GenericApp<TProps extends GenericAppProps = GenericAppProps, TStat
      * Get a theme
      * @param name Theme name
      */
-    createTheme(name?: ThemeName | null | undefined): Theme;
+    createTheme(name?: ThemeName | null | undefined): IobTheme;
     /**
      * Get the theme name
      */
-    getThemeName(currentTheme: Theme): ThemeName;
+    getThemeName(currentTheme: IobTheme): ThemeName;
     /**
      * Get the theme type
      */
-    getThemeType(currentTheme: Theme): ThemeType;
+    getThemeType(currentTheme: IobTheme): ThemeType;
     onThemeChanged(newThemeName: string): void;
     onToggleExpertMode(expertMode: boolean): void;
     /**

package/README.md

@@ -670,9 +670,13 @@ socket.getObjectViewCustom('custom', 'state', 'startKey', 'endKey')
 -->
 
 ## Changelog
-### 4.14.1 (2024-05-29)
+### 5.0.1 (2024-05-29)
+* (bluefox) Added better typing
+
+### 5.0.0 (2024-05-29)
 * (bluefox) Types are now exported
 * (bluefox) Translator renamed to Translate
+* (bluefox) Breaking: Theme renamed to IobTheme because of the naming conflict
 
 ### 4.13.24 (2024-05-25)
 * (bluefox) Updated packages

package/Theme.d.ts

@@ -1,6 +1,6 @@
-import { type Theme, type ThemeName } from './types';
+import { type IobTheme, type ThemeName } from './types';
 /**
  * The theme creation factory function.
  */
-declare const CustomTheme: (type: ThemeName) => Theme;
+declare const CustomTheme: (type: ThemeName) => IobTheme;
 export default CustomTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "4.14.1",
+  "version": "5.0.1",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",

package/types.d.ts

@@ -79,7 +79,7 @@ export interface GenericAppState {
     loaded: boolean;
     themeType: ThemeType;
     themeName: ThemeName;
-    theme: Theme;
+    theme: IobTheme;
     expertMode: boolean;
     selectedTab: string;
     selectedTabNum: number | undefined;
@@ -123,7 +123,7 @@ interface Palette extends MuiPalette {
     }
 }
 
-export interface Theme extends MuiTheme {
+export interface IobTheme extends MuiTheme {
     name: ThemeName;
     palette: Palette;
     toolbar: React.CSSProperties;