Merge branch 'fix/toolpad-docs-dialog' of github.com:bharatkashyap/ma…

…terial-ui into fix/toolpad-docs-dialog
bharatkashyap · Nov 26, 2024 · b149725 · b149725
2 parents 0d530ad + b854eef
commit b149725
Show file tree

Hide file tree

Showing 42 changed files with 1,064 additions and 525 deletions.
diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
@@ -23,7 +23,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "0.0.26",
+    "@pigment-css/nextjs-plugin": "0.0.27",
     "@types/node": "^20.17.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
@@ -27,14 +27,14 @@
   "devDependencies": {
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
-    "@pigment-css/vite-plugin": "0.0.26",
+    "@pigment-css/vite-plugin": "0.0.27",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/webfontloader": "^1.6.38",
     "@vitejs/plugin-react": "^4.3.3",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.4.10",
+    "vite": "5.4.11",
     "vite-plugin-node-polyfills": "0.22.0",
     "vite-plugin-pages": "^0.32.3"
   },

diff --git a/docs/data/material/components/accordion/AccordionTransition.js b/docs/data/material/components/accordion/AccordionTransition.js
@@ -1,7 +1,9 @@
 import * as React from 'react';
-import Accordion from '@mui/material/Accordion';
+import Accordion, { accordionClasses } from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionDetails, {
+  accordionDetailsClasses,
+} from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Fade from '@mui/material/Fade';
@@ -23,18 +25,18 @@ export default function AccordionTransition() {
         sx={[
           expanded
             ? {
-                '& .MuiAccordion-region': {
+                [`& .${accordionClasses.region}`]: {
                   height: 'auto',
                 },
-                '& .MuiAccordionDetails-root': {
+                [`& .${accordionDetailsClasses.root}`]: {
                   display: 'block',
                 },
               }
             : {
-                '& .MuiAccordion-region': {
+                [`& .${accordionClasses.region}`]: {
                   height: 0,
                 },
-                '& .MuiAccordionDetails-root': {
+                [`& .${accordionDetailsClasses.root}`]: {
                   display: 'none',
                 },
               },

diff --git a/docs/data/material/components/accordion/AccordionTransition.tsx b/docs/data/material/components/accordion/AccordionTransition.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react';
-import Accordion, { AccordionSlots } from '@mui/material/Accordion';
+import Accordion, {
+  AccordionSlots,
+  accordionClasses,
+} from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionDetails, {
+  accordionDetailsClasses,
+} from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Fade from '@mui/material/Fade';
@@ -23,18 +28,18 @@ export default function AccordionTransition() {
         sx={[
           expanded
             ? {
-                '& .MuiAccordion-region': {
+                [`& .${accordionClasses.region}`]: {
                   height: 'auto',
                 },
-                '& .MuiAccordionDetails-root': {
+                [`& .${accordionDetailsClasses.root}`]: {
                   display: 'block',
                 },
               }
             : {
-                '& .MuiAccordion-region': {
+                [`& .${accordionClasses.region}`]: {
                   height: 0,
                 },
-                '& .MuiAccordionDetails-root': {
+                [`& .${accordionDetailsClasses.root}`]: {
                   display: 'none',
                 },
               },

diff --git a/docs/data/material/components/accordion/CustomizedAccordions.js b/docs/data/material/components/accordion/CustomizedAccordions.js
@@ -2,7 +2,9 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import MuiAccordion from '@mui/material/Accordion';
-import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import MuiAccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/material/AccordionSummary';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
 
@@ -26,10 +28,11 @@ const AccordionSummary = styled((props) => (
 ))(({ theme }) => ({
   backgroundColor: 'rgba(0, 0, 0, .03)',
   flexDirection: 'row-reverse',
-  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
-    transform: 'rotate(90deg)',
-  },
-  '& .MuiAccordionSummary-content': {
+  [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]:
+    {
+      transform: 'rotate(90deg)',
+    },
+  [`& .${accordionSummaryClasses.content}`]: {
     marginLeft: theme.spacing(1),
   },
   ...theme.applyStyles('dark', {

diff --git a/docs/data/material/components/accordion/CustomizedAccordions.tsx b/docs/data/material/components/accordion/CustomizedAccordions.tsx
@@ -4,6 +4,7 @@ import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
 import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
 import MuiAccordionSummary, {
   AccordionSummaryProps,
+  accordionSummaryClasses,
 } from '@mui/material/AccordionSummary';
 import MuiAccordionDetails from '@mui/material/AccordionDetails';
 import Typography from '@mui/material/Typography';
@@ -28,10 +29,11 @@ const AccordionSummary = styled((props: AccordionSummaryProps) => (
 ))(({ theme }) => ({
   backgroundColor: 'rgba(0, 0, 0, .03)',
   flexDirection: 'row-reverse',
-  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
-    transform: 'rotate(90deg)',
-  },
-  '& .MuiAccordionSummary-content': {
+  [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]:
+    {
+      transform: 'rotate(90deg)',
+    },
+  [`& .${accordionSummaryClasses.content}`]: {
     marginLeft: theme.spacing(1),
   },
   ...theme.applyStyles('dark', {

diff --git a/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.js b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.js
@@ -97,9 +97,9 @@ function DeleteDialogTrigger({ name }) {
         setIsDeleting(true);
         await mockApiDelete();
         dialogs.alert(
-          <p>
+          <React.Fragment>
             Deleted project <code>{name}</code>.
-          </p>,
+          </React.Fragment>,
         );
       } finally {
         setIsDeleting(false);

diff --git a/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx b/docs/data/material/components/dialogs/ToolpadDialogsNoSnap.tsx
@@ -76,9 +76,9 @@ function DeleteDialogTrigger({ name }: { name: string }) {
         setIsDeleting(true);
         await mockApiDelete();
         dialogs.alert(
-          <p>
+          <React.Fragment>
             Deleted project <code>{name}</code>.
-          </p>,
+          </React.Fragment>,
         );
       } finally {
         setIsDeleting(false);

diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md
@@ -172,73 +172,42 @@ Follow the [Modal accessibility section](/material-ui/react-modal/#accessibility
 
 ### useDialogs
 
-You can create and manipulate dialogs imperatively with the [`useDialogs()`](https://mui.com/toolpad/core/react-use-dialogs/) API in `@toolpad/core`. This hook handles
+You can create and manipulate dialogs imperatively with the [`useDialogs()`](https://mui.com/toolpad/core/react-use-dialogs/) API in `@toolpad/core`. This hook handles:
 
 - state management for opening and closing dialogs
 - passing data to dialogs and receiving results back from them
 - stacking multiple dialogs
-- themed, asynchronous versions of `window.alert()`, `window.confirm()` and `window.prompt()`
+- themed, asynchronous versions of `window.alert()`, `window.confirm()`, and `window.prompt()`
 
 ```tsx
-import * as React from 'react';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import Typography from '@mui/material/Typography';
-import LoadingButton from '@mui/lab/LoadingButton';
 import { DialogsProvider, useDialogs } from '@toolpad/core/useDialogs';
 
-function DeleteButton() {
+export default function DeleteButton() {
   const dialogs = useDialogs();
-  const [isDeleting, setIsDeleting] = React.useState(false);
-
   const handleDelete = async () => {
     const confirmed = await dialogs.open(({ open, onClose }) => (
       <Dialog open={open} onClose={() => onClose(false)}>
-        <DialogContent>
-          <Typography>
-            Are you sure you want to delete this item? You will not be able to undo
-            this action.
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => onClose(false)}>Cancel</Button>
-          <Button
-            variant="contained"
-            color="error"
-            onClick={() => {
-              onClose(true);
-            }}
-          >
-            Delete
-          </Button>
-        </DialogActions>
+        Are you sure you want to delete this item?
+        <button type="button" onClick={() => onClose(false)}>
+          Cancel
+        </button>
+        <button type="button" onClick={() => onClose(true)}>
+          Delete
+        </button>
       </Dialog>
     ));
 
     if (confirmed) {
-      try {
-        setIsDeleting(true);
-        await new Promise((resolve) => {
-          setTimeout(resolve, 1000);
-        });
-        await dialogs.alert('Successfully deleted!');
-      } finally {
-        setIsDeleting(false);
-      }
+      await dialogs.alert('Successfully deleted!');
     }
   };
 
   return (
-    <LoadingButton
-      loading={isDeleting}
-      variant="contained"
-      color="error"
-      onClick={handleDelete}
-    >
-      Delete
-    </LoadingButton>
+    <DialogsProvider>
+      <button type="button" onClick={handleDelete}>
+        Delete
+      </button>
+    </DialogsProvider>
   );
 }
 ```

diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
@@ -376,8 +376,10 @@ const DialogDetails = React.memo(function DialogDetails(props) {
             <Tooltip
               placement="right"
               title={copied1 ? t('copied') : t('clickToCopy')}
-              TransitionProps={{
-                onExited: () => setCopied1(false),
+              slotProps={{
+                transition: {
+                  onExited: () => setCopied1(false),
+                },
               }}
             >
               <Title component="span" variant="inherit" onClick={handleClick(1)}>
@@ -388,7 +390,9 @@ const DialogDetails = React.memo(function DialogDetails(props) {
           <Tooltip
             placement="top"
             title={copied2 ? t('copied') : t('clickToCopy')}
-            TransitionProps={{ onExited: () => setCopied2(false) }}
+            slotProps={{
+              transition: { onExited: () => setCopied2(false) },
+            }}
           >
             <Markdown
               copyButtonHidden

diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md
@@ -141,7 +141,7 @@ The Snackbar component is composed of a root `<div>` that houses interior elemen
 </div>
 ```
 
-## Toolpad (Beta)
+## Experimental APIs - Toolpad
 
 ### useNotifications
 

diff --git a/docs/data/material/components/tooltips/AnchorElTooltips.js b/docs/data/material/components/tooltips/AnchorElTooltips.js
@@ -23,16 +23,18 @@ export default function AnchorElTooltips() {
       title="Add"
       placement="top"
       arrow
-      PopperProps={{
-        popperRef,
-        anchorEl: {
-          getBoundingClientRect: () => {
-            return new DOMRect(
-              positionRef.current.x,
-              areaRef.current.getBoundingClientRect().y,
-              0,
-              0,
-            );
+      slotProps={{
+        popper: {
+          popperRef,
+          anchorEl: {
+            getBoundingClientRect: () => {
+              return new DOMRect(
+                positionRef.current.x,
+                areaRef.current.getBoundingClientRect().y,
+                0,
+                0,
+              );
+            },
           },
         },
       }}

diff --git a/docs/data/material/components/tooltips/AnchorElTooltips.tsx b/docs/data/material/components/tooltips/AnchorElTooltips.tsx
@@ -24,16 +24,18 @@ export default function AnchorElTooltips() {
       title="Add"
       placement="top"
       arrow
-      PopperProps={{
-        popperRef,
-        anchorEl: {
-          getBoundingClientRect: () => {
-            return new DOMRect(
-              positionRef.current.x,
-              areaRef.current!.getBoundingClientRect().y,
-              0,
-              0,
-            );
+      slotProps={{
+        popper: {
+          popperRef,
+          anchorEl: {
+            getBoundingClientRect: () => {
+              return new DOMRect(
+                positionRef.current.x,
+                areaRef.current!.getBoundingClientRect().y,
+                0,
+                0,
+              );
+            },
           },
         },
       }}

diff --git a/docs/data/material/components/tooltips/TransitionsTooltips.js b/docs/data/material/components/tooltips/TransitionsTooltips.js
@@ -11,13 +11,22 @@ export default function TransitionsTooltips() {
         <Button>Grow</Button>
       </Tooltip>
       <Tooltip
-        TransitionComponent={Fade}
-        TransitionProps={{ timeout: 600 }}
         title="Add"
+        slots={{
+          transition: Fade,
+        }}
+        slotProps={{
+          transition: { timeout: 600 },
+        }}
       >
         <Button>Fade</Button>
       </Tooltip>
-      <Tooltip TransitionComponent={Zoom} title="Add">
+      <Tooltip
+        title="Add"
+        slots={{
+          transition: Zoom,
+        }}
+      >
         <Button>Zoom</Button>
       </Tooltip>
     </div>
-Original file line number
+Diff line change
@@ Expand Up @@
     </div>
     ```
-    ## Toolpad (Beta)
+    ## Experimental APIs - Toolpad
     ### useNotifications
@@ Expand Down @@