Merge remote-tracking branch 'origin/master' into move-selected-node-…

…to-page-view

docs/package.json

@@ -23,17 +23,17 @@
     "@date-io/date-fns-jalali": "^2.16.0",
     "@docsearch/react": "^3.3.3",
     "@emotion/cache": "^11.10.5",
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.10.6",
     "@emotion/server": "^11.10.0",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.9",
-    "@mui/material": "^5.11.9",
+    "@mui/material": "^5.11.10",
     "@mui/monorepo": "https://github.com/mui/material-ui.git",
     "@mui/styles": "^5.11.9",
     "@mui/utils": "^5.11.9",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/lodash": "^4.14.191",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^18.0.11",
     "@types/react-router-dom": "^5.3.3",
     "accept-language": "^3.0.18",
     "address": "^1.2.2",
@@ -83,7 +83,7 @@
     "stylis": "^4.1.3",
     "stylis-plugin-rtl": "npm:stylis-plugin-rtl@^2.1.1",
     "stylis-plugin-rtl-sc": "npm:stylis-plugin-rtl@^2.1.1",
-    "webpack-bundle-analyzer": "^4.7.0"
+    "webpack-bundle-analyzer": "^4.8.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-constant-elements": "^7.20.2",

package.json

@@ -47,13 +47,13 @@
     "@playwright/test": "^1.30.0",
     "@swc/helpers": "^0.4.14",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@types/gtag.js": "^0.0.12",
     "@types/jest": "^29.4.0",
-    "@types/node": "^18.13.0",
+    "@types/node": "^18.14.0",
     "@types/rimraf": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/parser": "^5.52.0",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "chalk": "^5.2.0",
     "eslint": "^8.34.0",
@@ -71,9 +71,9 @@
     "execa": "^7.0.0",
     "format-util": "^1.0.5",
     "globby": "^13.1.3",
-    "jest": "^29.4.2",
-    "jest-environment-jsdom": "^29.4.2",
-    "lerna": "^6.4.1",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
+    "lerna": "^6.5.1",
     "markdownlint-cli2": "^0.6.0",
     "prettier": "^2.8.4",
     "prettier-plugin-prisma": "^4.10.0",
@@ -88,7 +88,7 @@
     "dotenv-cli": "^7.0.0",
     "inquirer": "^9.1.4",
     "semver": "^7.3.8",
-    "yargs": "^17.6.2"
+    "yargs": "^17.7.0"
   },
   "engines": {
     "npm": "please-use-yarn",

packages/eslint-plugin-material-ui/package.json

@@ -8,8 +8,8 @@
     "emoji-regex": "^10.2.1"
   },
   "devDependencies": {
-    "@types/eslint": "^8.21.0",
-    "@typescript-eslint/parser": "^5.51.0"
+    "@types/eslint": "^8.21.1",
+    "@typescript-eslint/parser": "^5.52.0"
   },
   "scripts": {},
   "repository": {

packages/toolpad-app/package.json

@@ -38,29 +38,29 @@
     "@babel/code-frame": "^7.18.6",
     "@elastic/ecs-pino-format": "^1.3.0",
     "@emotion/cache": "^11.10.5",
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.10.6",
     "@emotion/server": "^11.10.0",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/styled": "^11.10.6",
     "@googleapis/drive": "^4.0.2",
     "@googleapis/sheets": "^4.0.1",
     "@mui/icons-material": "^5.11.9",
     "@mui/lab": "^5.0.0-alpha.120",
-    "@mui/material": "^5.11.9",
+    "@mui/material": "^5.11.10",
     "@mui/system": "^5.11.9",
     "@mui/toolpad-components": "^0.0.40",
     "@mui/toolpad-core": "^0.0.40",
     "@mui/types": "^7.2.3",
     "@mui/utils": "^5.11.9",
-    "@mui/x-data-grid-generator": "^5.17.23",
-    "@mui/x-data-grid-pro": "^5.17.23",
-    "@mui/x-date-pickers": "^5.0.18",
-    "@mui/x-date-pickers-pro": "^5.0.18",
+    "@mui/x-data-grid-generator": "^5.17.24",
+    "@mui/x-data-grid-pro": "^5.17.24",
+    "@mui/x-date-pickers": "^5.0.19",
+    "@mui/x-date-pickers-pro": "^5.0.19",
     "@next/bundle-analyzer": "^13.1.6",
     "@prisma/client": "^4.10.1",
-    "@sentry/nextjs": "^7.37.1",
+    "@sentry/nextjs": "^7.38.0",
     "@swc/wasm": "^1.3.35",
-    "@tanstack/react-query": "^4.24.4",
-    "@tanstack/react-query-devtools": "^4.24.4",
+    "@tanstack/react-query": "^4.24.9",
+    "@tanstack/react-query-devtools": "^4.24.9",
     "@types/cors": "^2.8.13",
     "abort-controller": "^3.0.0",
     "arg": "^5.0.2",
@@ -72,7 +72,7 @@
     "csstype": "^3.1.1",
     "cuid": "^3.0.0",
     "dayjs": "^1.11.7",
-    "esbuild": "0.17.7",
+    "esbuild": "0.17.8",
     "fastestsmallesttextencoderdecoder": "^1.0.22",
     "find-up": "^6.3.0",
     "formdata-polyfill": "^4.0.10",
@@ -99,7 +99,7 @@
     "prettier": "^2.8.4",
     "pretty-bytes": "^6.1.0",
     "prisma": "^4.10.1",
-    "quickjs-emscripten": "^0.21.1",
+    "quickjs-emscripten": "^0.21.2",
     "react": "^18.2.0",
     "react-devtools-inline": "^4.27.2",
     "react-dom": "^18.2.0",
@@ -109,7 +109,6 @@
     "react-is": "^18.2.0",
     "react-router-dom": "~6.3.0",
     "react-split-pane": "^0.1.92",
-    "remark-gfm": "^3.0.1",
     "serialize-javascript": "^6.0.1",
     "ses": "^0.18.1",
     "sucrase": "^3.29.0",
@@ -132,7 +131,7 @@
     "@types/pg": "^8.6.6",
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^18.0.11",
     "@types/react-inspector": "^4.0.2",
     "@types/serialize-javascript": "^5.0.2",
     "@types/whatwg-url": "^11.0.0",
@@ -144,7 +143,7 @@
     "formidable": "^2.1.1",
     "get-port": "^6.1.2",
     "glob": "^8.1.0",
-    "pino-pretty": "^9.2.0",
+    "pino-pretty": "^9.3.0",
     "react-transition-group": "^4.4.5",
     "typescript": "^4.9.5",
     "webpack": "^5.75.0"

packages/toolpad-app/src/canvas/getPageViewState.ts

@@ -94,6 +94,11 @@ export function getNodesViewInfo(rootElm: HTMLElement): {
           const parentId: NodeId = fiber.memoizedProps.parentId as NodeId;
           const nodeSlots = nodes[parentId]?.slots;
 
+          // If there are 2 slots for the same prop name, consider only the first one
+          if (nodeSlots && nodeSlots[slotNamePropValue]) {
+            return;
+          }
+
           const firstChildElm = devtoolsHook.renderers
             .get(rendererId)
             ?.findHostInstanceByFiber(fiber);

packages/toolpad-app/src/runtime/AppThemeProvider.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { createTheme, ThemeOptions, PaletteOptions, Theme, ThemeProvider } from '@mui/material';
+import { createTheme, ThemeOptions, PaletteOptions, ThemeProvider } from '@mui/material';
 import * as colors from '@mui/material/colors';
 import * as appDom from '../appDom';
 import { AppTheme } from '../types';
 
-export function createThemeOptions(toolpadTheme: AppTheme): ThemeOptions {
+export function createToolpadTheme(toolpadTheme: AppTheme = {}): ThemeOptions {
   const palette: PaletteOptions = {};
   const primary = toolpadTheme['palette.primary.main'];
   if (primary) {
@@ -21,14 +21,42 @@ export function createThemeOptions(toolpadTheme: AppTheme): ThemeOptions {
     palette.mode = mode;
   }
 
-  return { palette };
-}
+  const theme = createTheme();
+
+  return createTheme(theme, {
+    typography: {
+      h1: {
+        fontSize: `3.25rem`,
+        fontWeight: 800,
+      },
+
+      h2: {
+        fontSize: `2.25rem`,
+        fontWeight: 700,
+      },
+
+      h3: {
+        fontSize: `1.75rem`,
+        fontWeight: 700,
+      },
+
+      h4: {
+        fontSize: `1.5rem`,
+        fontWeight: 700,
+      },
+
+      h5: {
+        fontSize: `1.25rem`,
+        fontWeight: 700,
+      },
 
-export function createToolpadTheme(themeNode?: appDom.ThemeNode | null): Theme {
-  const options = themeNode?.theme
-    ? createThemeOptions(appDom.fromConstPropValues(themeNode.theme))
-    : {};
-  return createTheme(options);
+      h6: {
+        fontSize: `1.15rem`,
+        fontWeight: 700,
+      },
+    },
+    palette,
+  });
 }
 
 export interface ThemeProviderProps {
@@ -41,7 +69,10 @@ export default function AppThemeProvider({ dom, children }: ThemeProviderProps)
     const root = appDom.getApp(dom);
     const { themes = [] } = appDom.getChildNodes(dom, root);
     const themeNode = themes.length > 0 ? themes[0] : null;
-    return createToolpadTheme(themeNode);
+    const toolpadTheme: AppTheme = themeNode?.theme
+      ? appDom.fromConstPropValues(themeNode.theme)
+      : {};
+    return createToolpadTheme(toolpadTheme);
   }, [dom]);
 
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;