21 files changed, 74 insertions, 117 deletions

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 9df1667a..8985ca36 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -94,6 +94,8 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     // We use the `react-jsx` runtime, so there is no need to import `React`.
     'react/react-in-jsx-scope': 'off',
+    // `defaultProps` are deprecated in React 18.
+    'react/require-default-props': 'off',
   },
   overrides: [
     {
diff --git a/package.json b/package.json
index 25981a96..8ec20d25 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@types/eslint": "^8.56.10",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
diff --git a/subprojects/docs/package.json b/subprojects/docs/package.json
index 9e9412c7..cb78c726 100644
--- a/subprojects/docs/package.json
+++ b/subprojects/docs/package.json
@@ -66,7 +66,7 @@
     "@docusaurus/types": "^3.4.0",
     "@types/babel__core": "^7.20.5",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/unist": "^3.0.2"
diff --git a/subprojects/docs/src/components/Features/index.tsx b/subprojects/docs/src/components/Features/index.tsx
index 621e3953..873d0d30 100644
--- a/subprojects/docs/src/components/Features/index.tsx
+++ b/subprojects/docs/src/components/Features/index.tsx
@@ -50,11 +50,6 @@ function Feature({
   );
 }
 
-Feature.defaultProps = {
-  offset: undefined,
-  even: false,
-};
-
 export default function Features() {
   return (
     <div className="container">
diff --git a/subprojects/docs/src/pages/index.tsx b/subprojects/docs/src/pages/index.tsx
index cb0bfeb8..ff0da38b 100644
--- a/subprojects/docs/src/pages/index.tsx
+++ b/subprojects/docs/src/pages/index.tsx
@@ -98,13 +98,6 @@ function Publication({
   );
 }
 
-Publication.defaultProps = {
-  doi: undefined,
-  pdf: undefined,
-  video: undefined,
-  children: undefined,
-};
-
 function Publications() {
   return (
     <div className="row">
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index d2774f34..acff57db 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -51,7 +51,7 @@
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "@mui/system": "^5.16.0",
-    "@mui/x-data-grid": "^7.8.0",
+    "@mui/x-data-grid": "^7.9.0",
     "ansi-styles": "^6.2.1",
     "csstype": "^3.1.3",
     "d3": "^7.9.0",
@@ -88,7 +88,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/micromatch": "^4.0.9",
     "@types/ms": "^0.7.34",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.10",
     "@types/pnpapi": "^0.0.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
diff --git a/subprojects/frontend/src/DirectionalSplitPane.tsx b/subprojects/frontend/src/DirectionalSplitPane.tsx
index 110bb202..22959e14 100644
--- a/subprojects/frontend/src/DirectionalSplitPane.tsx
+++ b/subprojects/frontend/src/DirectionalSplitPane.tsx
@@ -151,8 +151,3 @@ export default function DirectionalSplitPane({
     </Stack>
   );
 }
-
-DirectionalSplitPane.defaultProps = {
-  primaryOnly: false,
-  secondaryOnly: false,
-};
diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx
index 7c759c36..0c265709 100644
--- a/subprojects/frontend/src/PaneButtons.tsx
+++ b/subprojects/frontend/src/PaneButtons.tsx
@@ -92,7 +92,7 @@ function PaneButtons({
   return (
     <PaneButtonGroup
       size={hideLabel ? 'small' : 'medium'}
-      hideLabel={hideLabel ?? PaneButtons.defaultProps.hideLabel}
+      hideLabel={hideLabel ?? false}
     >
       <ToggleButton
         value="code"
@@ -140,8 +140,4 @@ function PaneButtons({
   );
 }
 
-PaneButtons.defaultProps = {
-  hideLabel: false,
-};
-
 export default observer(PaneButtons);
diff --git a/subprojects/frontend/src/RootStoreProvider.tsx b/subprojects/frontend/src/RootStoreProvider.tsx
index 7cb89af1..40114340 100644
--- a/subprojects/frontend/src/RootStoreProvider.tsx
+++ b/subprojects/frontend/src/RootStoreProvider.tsx
@@ -29,7 +29,3 @@ export default function RootStoreProvider({
     <StoreContext.Provider value={rootStore}>{children}</StoreContext.Provider>
   );
 }
-
-RootStoreProvider.defaultProps = {
-  children: undefined,
-};
diff --git a/subprojects/frontend/src/Tooltip.tsx b/subprojects/frontend/src/Tooltip.tsx
new file mode 100644
index 00000000..b793f1d2
--- /dev/null
+++ b/subprojects/frontend/src/Tooltip.tsx
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import MuiTooltip, { TooltipProps } from '@mui/material/Tooltip';
+
+export default function Tooltip({
+  children,
+  ...props
+}: TooltipProps): JSX.Element {
+  return (
+    <MuiTooltip {...props}>
+      <span className="RefineryTooltip-Container">{children}</span>
+    </MuiTooltip>
+  );
+}
diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx
index 606aabea..8504779f 100644
--- a/subprojects/frontend/src/editor/AnimatedButton.tsx
+++ b/subprojects/frontend/src/editor/AnimatedButton.tsx
@@ -99,12 +99,3 @@ export default function AnimatedButton({
     </AnimatedButtonBase>
   );
 }
-
-AnimatedButton.defaultProps = {
-  'aria-label': undefined,
-  onClick: undefined,
-  disabled: false,
-  startIcon: undefined,
-  sx: undefined,
-  children: undefined,
-};
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index 50cd51dc..0bb5f542 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -22,9 +22,11 @@ import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import Tooltip from '@mui/material/Tooltip';
+import MuiTooltip from '@mui/material/Tooltip';
 import { observer } from 'mobx-react-lite';
 
+import Tooltip from '../Tooltip';
+
 import ConnectButton from './ConnectButton';
 import type EditorStore from './EditorStore';
 
@@ -99,7 +101,7 @@ export default observer(function EditorButtons({
         </IconButton>
       </Tooltip>
       <ToggleButtonGroup size="small" className="rounded" sx={{ mx: 1 }}>
-        <Tooltip title="Line numbers">
+        <MuiTooltip title="Line numbers">
           <ToggleButton
             selected={editorStore?.showLineNumbers ?? false}
             disabled={editorStore === undefined}
@@ -108,8 +110,8 @@ export default observer(function EditorButtons({
           >
             <FormatListNumberedIcon fontSize="small" />
           </ToggleButton>
-        </Tooltip>
-        <Tooltip title="Color identifiers">
+        </MuiTooltip>
+        <MuiTooltip title="Color identifiers">
           <ToggleButton
             selected={editorStore?.colorIdentifiers ?? false}
             disabled={editorStore === undefined}
@@ -118,8 +120,8 @@ export default observer(function EditorButtons({
           >
             <LooksIcon fontSize="small" />
           </ToggleButton>
-        </Tooltip>
-        <Tooltip title="Find and replace">
+        </MuiTooltip>
+        <MuiTooltip title="Find and replace">
           <ToggleButton
             selected={editorStore?.searchPanel?.state ?? false}
             disabled={editorStore === undefined}
@@ -132,8 +134,8 @@ export default observer(function EditorButtons({
           >
             <SearchIcon fontSize="small" />
           </ToggleButton>
-        </Tooltip>
-        <Tooltip title="Diagnostics panel">
+        </MuiTooltip>
+        <MuiTooltip title="Diagnostics panel">
           <ToggleButton
             selected={editorStore?.lintPanel?.state ?? false}
             disabled={editorStore === undefined}
@@ -146,7 +148,7 @@ export default observer(function EditorButtons({
           >
             {getLintIcon(editorStore?.delayedErrors?.highestDiagnosticLevel)}
           </ToggleButton>
-        </Tooltip>
+        </MuiTooltip>
       </ToggleButtonGroup>
       <Tooltip title="Automatic format">
         <IconButton
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index b6b1655a..930cbfdb 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -75,7 +75,7 @@ const GenerateButton = observer(function GenerateButton({
   if (errorCount > 0) {
     diagnostics.push(`${errorCount} error${errorCount === 1 ? '' : 's'}`);
   }
-  if (!(hideWarnings ?? false) && warningCount > 0) {
+  if (!hideWarnings && warningCount > 0) {
     diagnostics.push(`${warningCount} warning${warningCount === 1 ? '' : 's'}`);
   }
   const summary = diagnostics.join(' and ');
@@ -111,8 +111,4 @@ const GenerateButton = observer(function GenerateButton({
   );
 });
 
-GenerateButton.defaultProps = {
-  hideWarnings: false,
-};
-
 export default GenerateButton;
diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
index 0980ea20..385942e1 100644
--- a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
+++ b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
@@ -38,10 +38,8 @@ function DotGraphVisualizer({
   animateThreshold?: number;
   setSvgContainer?: (container: HTMLElement | undefined) => void;
 }): JSX.Element {
-  const transitionTimeOrDefault =
-    transitionTime ?? DotGraphVisualizer.defaultProps.transitionTime;
-  const animateThresholdOrDefault =
-    animateThreshold ?? DotGraphVisualizer.defaultProps.animateThreshold;
+  const transitionTimeOrDefault = transitionTime ?? 250;
+  const animateThresholdOrDefault = animateThreshold ?? 100;
   const disposerRef = useRef<IReactionDisposer | undefined>();
   const graphvizRef = useRef<
     Graphviz<BaseType, unknown, null, undefined> | undefined
@@ -163,11 +161,4 @@ function DotGraphVisualizer({
   );
 }
 
-DotGraphVisualizer.defaultProps = {
-  fitZoom: undefined,
-  transitionTime: 250,
-  animateThreshold: 100,
-  setSvgContainer: undefined,
-};
-
 export default observer(DotGraphVisualizer);
diff --git a/subprojects/frontend/src/graph/RelationName.tsx b/subprojects/frontend/src/graph/RelationName.tsx
index e651cb87..5ae08a20 100644
--- a/subprojects/frontend/src/graph/RelationName.tsx
+++ b/subprojects/frontend/src/graph/RelationName.tsx
@@ -49,7 +49,7 @@ function RelationName({
   abbreviate?: boolean;
 }): JSX.Element {
   const { name, simpleName } = metadata;
-  if (abbreviate ?? RelationName.defaultProps.abbreviate) {
+  if (abbreviate) {
     return <FormattedName name={simpleName} metadata={metadata} />;
   }
   if (name.endsWith(simpleName)) {
@@ -65,8 +65,4 @@ function RelationName({
   return <FormattedName name={name} metadata={metadata} />;
 }
 
-RelationName.defaultProps = {
-  abbreviate: false,
-};
-
 export default observer(RelationName);
diff --git a/subprojects/frontend/src/graph/SlideInDialog.tsx b/subprojects/frontend/src/graph/SlideInDialog.tsx
index d9060fb0..318b0c0f 100644
--- a/subprojects/frontend/src/graph/SlideInDialog.tsx
+++ b/subprojects/frontend/src/graph/SlideInDialog.tsx
@@ -77,7 +77,7 @@ export default function SlideInDialog({
 
   return (
     <SlideInDialogRoot
-      dialog={dialog ?? SlideInDialog.defaultProps.dialog}
+      dialog={dialog ?? false}
       aria-labelledby={dialog ? titleId : undefined}
     >
       {dialog && (
@@ -102,8 +102,3 @@ export default function SlideInDialog({
     </SlideInDialogRoot>
   );
 }
-
-SlideInDialog.defaultProps = {
-  dialog: false,
-  children: undefined,
-};
diff --git a/subprojects/frontend/src/graph/SlideInPanel.tsx b/subprojects/frontend/src/graph/SlideInPanel.tsx
index 47bbe0a6..13fdce17 100644
--- a/subprojects/frontend/src/graph/SlideInPanel.tsx
+++ b/subprojects/frontend/src/graph/SlideInPanel.tsx
@@ -96,7 +96,3 @@ export default function SlideInPanel({
     </SlideInPanelRoot>
   );
 }
-
-SlideInPanel.defaultProps = {
-  children: undefined,
-};
diff --git a/subprojects/frontend/src/graph/VisibilityPanel.tsx b/subprojects/frontend/src/graph/VisibilityPanel.tsx
index 619113ef..1cd58769 100644
--- a/subprojects/frontend/src/graph/VisibilityPanel.tsx
+++ b/subprojects/frontend/src/graph/VisibilityPanel.tsx
@@ -16,11 +16,12 @@ import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
-import Tooltip from '@mui/material/Tooltip';
 import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 
+import Tooltip from '../Tooltip';
+
 import type GraphStore from './GraphStore';
 import { isVisibilityAllowed } from './GraphStore';
 import RelationName from './RelationName';
diff --git a/subprojects/frontend/src/graph/ZoomCanvas.tsx b/subprojects/frontend/src/graph/ZoomCanvas.tsx
index 07e44a12..57e754f5 100644
--- a/subprojects/frontend/src/graph/ZoomCanvas.tsx
+++ b/subprojects/frontend/src/graph/ZoomCanvas.tsx
@@ -55,9 +55,8 @@ export default function ZoomCanvas({
   fitPadding?: number;
   transitionTime?: number;
 }): JSX.Element {
-  const fitPaddingOrDefault = fitPadding ?? ZoomCanvas.defaultProps.fitPadding;
-  const transitionTimeOrDefault =
-    transitionTime ?? ZoomCanvas.defaultProps.transitionTime;
+  const fitPaddingOrDefault = fitPadding ?? 8;
+  const transitionTimeOrDefault = transitionTime ?? 250;
 
   const canvasRef = useRef<HTMLDivElement | undefined>();
   const elementRef = useRef<HTMLDivElement | undefined>();
@@ -235,9 +234,3 @@ export default function ZoomCanvas({
     </Box>
   );
 }
-
-ZoomCanvas.defaultProps = {
-  children: undefined,
-  fitPadding: 8,
-  transitionTime: 250,
-};
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 1d70dbaf..b8d5ba8d 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -385,10 +385,6 @@ function ThemeAndContrastThemeProvider({
   );
 }
 
-ThemeAndContrastThemeProvider.defaultProps = {
-  children: undefined,
-};
-
 export function ContrastThemeProvider({
   children,
 }: {
@@ -405,10 +401,6 @@ export function ContrastThemeProvider({
   );
 }
 
-ContrastThemeProvider.defaultProps = {
-  children: undefined,
-};
-
 const ThemeProvider = observer(function ThemeProvider({
   children,
 }: {
@@ -428,8 +420,4 @@ const ThemeProvider = observer(function ThemeProvider({
   );
 });
 
-ThemeProvider.defaultProps = {
-  children: undefined,
-};
-
 export default ThemeProvider;
diff --git a/yarn.lock b/yarn.lock
index 018cfc0c..3b871571 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3264,7 +3264,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^5.15.20, @mui/system@npm:^5.16.0":
+"@mui/system@npm:^5.16.0":
   version: 5.16.0
   resolution: "@mui/system@npm:5.16.0"
   dependencies:
@@ -3304,7 +3304,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^5.15.14, @mui/utils@npm:^5.15.20, @mui/utils@npm:^5.16.0":
+"@mui/utils@npm:^5.15.14, @mui/utils@npm:^5.16.0":
   version: 5.16.0
   resolution: "@mui/utils@npm:5.16.0"
   dependencies:
@@ -3322,13 +3322,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/x-data-grid@npm:^7.8.0":
-  version: 7.8.0
-  resolution: "@mui/x-data-grid@npm:7.8.0"
+"@mui/x-data-grid@npm:^7.9.0":
+  version: 7.9.0
+  resolution: "@mui/x-data-grid@npm:7.9.0"
   dependencies:
     "@babel/runtime": "npm:^7.24.7"
-    "@mui/system": "npm:^5.15.20"
-    "@mui/utils": "npm:^5.15.20"
+    "@mui/system": "npm:^5.16.0"
+    "@mui/utils": "npm:^5.16.0"
+    "@mui/x-internals": "npm:7.9.0"
     clsx: "npm:^2.1.1"
     prop-types: "npm:^15.8.1"
     reselect: "npm:^4.1.8"
@@ -3336,7 +3337,19 @@ __metadata:
     "@mui/material": ^5.15.14
     react: ^17.0.0 || ^18.0.0
     react-dom: ^17.0.0 || ^18.0.0
-  checksum: 10c0/d3e1c4d07363e5e1f90aa7e66a46f3d1c8b788b14e90997c035519d8419ca44258a1950dc97db395b61ebc699d5c028f879b6c066bc3186c2b3dc49f7d17b519
+  checksum: 10c0/11d72b15768fd94056d2df628ae29cf03405d6c50ddbef0bf2b972277bcb8ad90a1f98c2ac6a2b9cc51fe1d98f99ebd99114836454f747d5bbd5eae36bcb2aa6
+  languageName: node
+  linkType: hard
+
+"@mui/x-internals@npm:7.9.0":
+  version: 7.9.0
+  resolution: "@mui/x-internals@npm:7.9.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.24.7"
+    "@mui/utils": "npm:^5.16.0"
+  peerDependencies:
+    react: ^17.0.0 || ^18.0.0
+  checksum: 10c0/a36013673272c7418d73f54941a3c57090e5ef9faf65bbaa0884bd04578021b63a7bb6dce75ce2c76abb7ff7557b3c002eb6e601f2055fed1494effb96d571b2
   languageName: node
   linkType: hard
 
@@ -3454,7 +3467,7 @@ __metadata:
     "@swc/core": "npm:^1.6.7"
     "@types/babel__core": "npm:^7.20.5"
     "@types/mdast": "npm:^4.0.4"
-    "@types/node": "npm:^20.14.9"
+    "@types/node": "npm:^20.14.10"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
     "@types/unist": "npm:^3.0.2"
@@ -3504,7 +3517,7 @@ __metadata:
     "@mui/icons-material": "npm:^5.16.0"
     "@mui/material": "npm:^5.16.0"
     "@mui/system": "npm:^5.16.0"
-    "@mui/x-data-grid": "npm:^7.8.0"
+    "@mui/x-data-grid": "npm:^7.9.0"
     "@types/d3": "npm:^7.4.3"
     "@types/d3-color": "npm:^3.1.3"
     "@types/d3-graphviz": "npm:^2.6.10"
@@ -3515,7 +3528,7 @@ __metadata:
     "@types/lodash-es": "npm:^4.17.12"
     "@types/micromatch": "npm:^4.0.9"
     "@types/ms": "npm:^0.7.34"
-    "@types/node": "npm:^20.14.9"
+    "@types/node": "npm:^20.14.10"
     "@types/pnpapi": "npm:^0.0.5"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
@@ -3559,7 +3572,7 @@ __metadata:
   resolution: "@refinery/root@workspace:."
   dependencies:
     "@types/eslint": "npm:^8.56.10"
-    "@types/node": "npm:^20.14.9"
+    "@types/node": "npm:^20.14.10"
     "@types/react": "npm:^18.3.3"
     "@typescript-eslint/eslint-plugin": "npm:^7.15.0"
     "@typescript-eslint/parser": "npm:^7.15.0"
@@ -4837,12 +4850,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:^20.14.9":
-  version: 20.14.9
-  resolution: "@types/node@npm:20.14.9"
+"@types/node@npm:*, @types/node@npm:^20.14.10":
+  version: 20.14.10
+  resolution: "@types/node@npm:20.14.10"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 10c0/911ffa444dc032897f4a23ed580c67903bd38ea1c5ec99b1d00fa10b83537a3adddef8e1f29710cbdd8e556a61407ed008e06537d834e48caf449ce59f87d387
+  checksum: 10c0/0b06cff14365c2d0085dc16cc8cbea5c40ec09cfc1fea966be9eeecf35562760bfde8f88e86de6edfaf394501236e229d9c1084fad04fb4dec472ae245d8ae69
   languageName: node
   linkType: hard