From 91ea8e83433aa79c9f7df2eb69e3e4f8cfafcc1a Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Fri, 30 Dec 2022 15:00:40 +0100
Subject: [PATCH] theme: initial mui v5 types + workaround

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 packages/theme/package.json    |  7 ++++-
 packages/theme/src/index.ts    |  1 +
 packages/theme/src/v5/index.ts | 17 +++++++++++
 packages/theme/src/v5/types.ts | 53 ++++++++++++++++++++++++++++++++++
 4 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 packages/theme/src/v5/index.ts
 create mode 100644 packages/theme/src/v5/types.ts

diff --git a/packages/theme/package.json b/packages/theme/package.json
index fbc767fb2f..99d9929525 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -32,7 +32,12 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.2"
+    "@material-ui/core": "^4.12.2",
+    "@mui/material": "^5.11.2"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.13.1 || ^17.0.0",
+    "react": "^16.13.1 || ^17.0.0"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0",
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index 33b5c9a697..5a07f66536 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -21,6 +21,7 @@
  */
 
 export * from './v4';
+export * from './v5';
 export type {
   BackstagePaletteAdditions,
   PageTheme,
diff --git a/packages/theme/src/v5/index.ts b/packages/theme/src/v5/index.ts
new file mode 100644
index 0000000000..db229eae34
--- /dev/null
+++ b/packages/theme/src/v5/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './types';
diff --git a/packages/theme/src/v5/types.ts b/packages/theme/src/v5/types.ts
new file mode 100644
index 0000000000..d1ffdf2e80
--- /dev/null
+++ b/packages/theme/src/v5/types.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  BackstagePaletteAdditions,
+  PageTheme,
+  PageThemeSelector,
+} from '../types';
+
+declare module '@mui/material/styles/createPalette' {
+  interface Palette extends BackstagePaletteAdditions {}
+
+  interface PaletteOptions extends BackstagePaletteAdditions {}
+}
+
+declare module '@mui/material/styles/createTheme' {
+  interface Theme {
+    pageTheme: PageTheme;
+    getPageTheme: (selector: PageThemeSelector) => PageTheme;
+  }
+
+  interface ThemeOptions {
+    pageTheme: PageTheme;
+    getPageTheme: (selector: PageThemeSelector) => PageTheme;
+  }
+}
+
+// This is a workaround for missing methods in React 17 that MUI v5 depends on
+// See https://github.com/mui/material-ui/issues/35287
+declare global {
+  namespace React {
+    type React = typeof import('react');
+
+    interface DOMAttributes<T extends React.SyntheticEvent> {
+      onResize?: React.EventHandler<T> | undefined;
+      onResizeCapture?: React.EventHandler<T> | undefined;
+      nonce?: string | undefined;
+    }
+  }
+}