Remove withStyles

package.json

@@ -16,17 +16,14 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@craco/craco": "^7.1.0",
     "@devbookhq/splitter": "^1.4.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@iobroker/adapter-react-v5": "^5.0.5",
+    "@iobroker/adapter-react-v5": "^6.0.9",
     "@iobroker/type-detector": "^3.0.5",
-    "@iobroker/types": "^6.0.0",
+    "@iobroker/types": "^6.0.5",
     "@iobroker/vis-2-widgets-react-dev": "^1.0.6",
     "@iobroker/vis-2-widgets-testing": "^1.0.3",
     "@material-icons/svg": "^1.0.33",
     "@mui/icons-material": "^5.15.18",
-    "@mui/material": "5.14.14",
-    "@mui/styles": "5.14.14",
+    "@mui/material": "^5.15.20",
     "@mui/x-date-pickers": "^7.4.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@sentry/browser": "^8.4.0",
@@ -35,6 +32,7 @@
     "@types/jquery": "^3.5.30",
     "@types/mocha": "^10.0.6",
     "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-dom": "^18.3.0",
     "@types/uuid": "^9.0.8",
     "ace-builds": "^1.34.1",
     "chai": "^4.4.1",

packages/iobroker.vis-2/gulpfile.js

@@ -164,7 +164,7 @@ export default FiltersEditorDialog;
     fs.writeFileSync(`${__dirname}/runtime/package.json`, JSON.stringify(pack, null, 2));
     fs.writeFileSync(`${__dirname}/runtime/craco.config.js`, fs.readFileSync(`${__dirname}/src/craco.config.js`));
     fs.writeFileSync(`${__dirname}/runtime/modulefederation.config.js`, fs.readFileSync(`${__dirname}/src/modulefederation.config.js`));
-    fs.writeFileSync(`${__dirname}/runtime/src/Editor.jsx`, fs.readFileSync(`${__dirname}/src/src/Runtime.jsx`));
+    fs.writeFileSync(`${__dirname}/runtime/src/Editor.tsx`, fs.readFileSync(`${__dirname}/src/src/Runtime.tsx`));
     fs.writeFileSync(`${__dirname}/runtime/src/version.json`, fs.readFileSync(`${__dirname}/src/src/version.json`));
     fs.writeFileSync(`${__dirname}/runtime/tsconfig.json`, fs.readFileSync(`${__dirname}/src/tsconfig.json`));
     fs.writeFileSync(`${__dirname}/runtime/src/Store.tsx`, fs.readFileSync(`${__dirname}/src/src/Store.tsx`));

packages/iobroker.vis-2/package.json

@@ -25,24 +25,24 @@
     "vis-2"
   ],
   "dependencies": {
-    "@iobroker/adapter-core": "^3.1.4",
+    "@iobroker/adapter-core": "^3.1.6",
     "axios": "^1.7.2",
     "jsonwebtoken": "^9.0.2",
     "mime": "^3.0.0"
   },
   "devDependencies": {
     "@alcalzone/release-script": "^3.7.0",
-    "@alcalzone/release-script-plugin-iobroker": "^3.7.0",
+    "@alcalzone/release-script-plugin-iobroker": "^3.7.2",
     "@alcalzone/release-script-plugin-license": "^3.7.0",
     "@iobroker/vis-2-widgets-testing": "^1.0.3",
     "@tsconfig/node18": "^18.2.4",
-    "@types/mocha": "^10.0.6",
+    "@types/mocha": "^10.0.7",
     "chai": "^4.4.1",
     "gulp": "^4.0.2",
     "iobroker.web": "*",
-    "mocha": "^10.4.0",
-    "typescript": "^5.4.5",
-    "unzipper": "^0.11.6"
+    "mocha": "^10.5.1",
+    "typescript": "^5.5.2",
+    "unzipper": "^0.12.1"
   },
   "bugs": {
     "url": "https://github.com/iobroker/iobroker.vis/issues"

packages/iobroker.vis-2/src/src/Attributes/CSS.tsx

@@ -7,7 +7,7 @@ import {
 
 import { HelpOutline, Check as CheckIcon } from '@mui/icons-material';
 
-import { I18n } from '@iobroker/adapter-react-v5';
+import { I18n, type ThemeType } from '@iobroker/adapter-react-v5';
 
 import { readFile } from '@/Vis/visUtils';
 import { CustomAceEditor } from '@/Components/CustomAceEditor';
@@ -17,7 +17,7 @@ interface CSSProps {
     socket: any;
     saveCssFile: (directory: string, file: string, value: string) => void;
     adapterId: string;
-    themeType: string;
+    themeType: ThemeType;
     maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     editMode: boolean;
 }

packages/iobroker.vis-2/src/src/Attributes/View/Items.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
-import { background, theme as ViewTheme } from '@/Attributes/ViewData';
+
 import { type SelectChangeEvent, TextField } from '@mui/material';
+
 import { Close as CloseIcon } from '@mui/icons-material';
+
 import { I18n, Utils } from '@iobroker/adapter-react-v5';
+
+import { background, theme as ViewTheme } from '@/Attributes/ViewData';
 import { store } from '@/Store';
 import type { Project, View } from '@iobroker/types-vis-2';
 

packages/iobroker.vis-2/src/src/Attributes/Widget/TextDialog.tsx

@@ -1,13 +1,15 @@
 import React, { useEffect, useState } from 'react';
 
+import type { ThemeType } from '@iobroker/adapter-react-v5';
+
 import IODialog from '../../Components/IODialog';
 import CustomAceEditor from '../../Components/CustomAceEditor';
 
 interface TextDialogProps {
     onChange: (value: string) => void;
     onClose: () => void;
     open: boolean;
-    themeType: string;
+    themeType: ThemeType;
     type: string;
     value: string;
 }

packages/iobroker.vis-2/src/src/Attributes/Widget/WidgetCSS.tsx

@@ -6,13 +6,13 @@ import {
 
 import { Close } from '@mui/icons-material';
 
-import { I18n } from '@iobroker/adapter-react-v5';
+import { I18n, type ThemeType } from '@iobroker/adapter-react-v5';
 
 import type { Widget } from '@iobroker/types-vis-2';
 import CustomAceEditor from '../../Components/CustomAceEditor';
 
 interface WidgetCSSProps {
-    themeType: string;
+    themeType: ThemeType;
     editMode: boolean;
     onClose: () => void;
     onChange: (value: string) => void;

packages/iobroker.vis-2/src/src/Attributes/Widget/WidgetJS.tsx

@@ -6,13 +6,13 @@ import {
 
 import { Close } from '@mui/icons-material';
 
-import { I18n } from '@iobroker/adapter-react-v5';
+import { I18n, type ThemeType } from '@iobroker/adapter-react-v5';
 
 import type { Widget } from '@iobroker/types-vis-2';
 import CustomAceEditor from '../../Components/CustomAceEditor';
 
 interface WidgetJSProps {
-    themeType: string;
+    themeType: ThemeType;
     editMode: boolean;
     onClose: () => void;
     onChange: (value: string) => void;

packages/iobroker.vis-2/src/src/Attributes/index.tsx

@@ -17,8 +17,10 @@ import {
     UnfoldLess as UnfoldLessIcon, ListAlt as IconAttributes,
 } from '@mui/icons-material';
 
-import type { LegacyConnection } from '@iobroker/adapter-react-v5';
-import { I18n, Utils } from '@iobroker/adapter-react-v5';
+import {
+    I18n, Utils, type ThemeType,
+    type LegacyConnection,
+} from '@iobroker/adapter-react-v5';
 
 import type { EditorClass } from '@/Editor';
 import CSS from './CSS';
@@ -43,7 +45,7 @@ const tabs: Record<string, JSXElementConstructor<any> | ((props: Record<string,
 
 interface AttributesProps {
     classes: Record<string, string>;
-    themeType: string;
+    themeType: ThemeType;
     openedViews: string[];
     adapterName: string;
     instance: number;

packages/iobroker.vis-2/src/src/Components/UploadFile.tsx

@@ -6,14 +6,14 @@ import { CircularProgress } from '@mui/material';
 
 import { FolderZip } from '@mui/icons-material';
 
-import { I18n, Utils } from '@iobroker/adapter-react-v5';
+import { I18n, Utils, type ThemeType } from '@iobroker/adapter-react-v5';
 
 const IMAGE_TYPES = ['.png', '.jpg', '.svg', '.gif', '.apng', '.avif', '.webp'];
 
 interface UploadFileProps {
     onUpload: (fileName: string, fileData: string | ArrayBuffer) => void;
     disabled?: boolean;
-    themeType: string;
+    themeType: ThemeType;
     accept?: Record<string, string[]>; // {'application/zip': ['.zip'], 'application/json': ['.json']},
     instruction?: string;
     maxSize?: number;