mui · atomiks · Dec 24, 2024 · Dec 24, 2024 · Dec 24, 2024 · Dec 27, 2024
@@ -87,9 +87,9 @@
     "@types/react-dom": "npm:[email protected]",
     "@types/unist": "^3.0.3",
     "chai": "^4.5.0",
-    "framer-motion": "^11.12.0",
     "fs-extra": "^11.2.0",
     "mdast-util-mdx-jsx": "^3.1.3",
+    "motion": "^11.15.0",
     "prettier": "^3.4.1",
     "rimraf": "^5.0.10",
     "serve": "^14.2.4",

diff --git a/docs/reference/generated/alert-dialog-backdrop.json b/docs/reference/generated/alert-dialog-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the element in the DOM while the alert dialog is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/alert-dialog-popup.json b/docs/reference/generated/alert-dialog-popup.json
@@ -14,11 +14,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the element in the DOM while the alert dialog is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/alert-dialog-portal.json b/docs/reference/generated/alert-dialog-portal.json
@@ -0,0 +1,17 @@
+{
+  "name": "AlertDialogPortal",
+  "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
+  "props": {
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "A parent element to render the portal element into."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/dialog-backdrop.json b/docs/reference/generated/dialog-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the dialog is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/dialog-popup.json b/docs/reference/generated/dialog-popup.json
@@ -14,11 +14,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the dialog is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/dialog-portal.json b/docs/reference/generated/dialog-portal.json
@@ -0,0 +1,17 @@
+{
+  "name": "DialogPortal",
+  "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
+  "props": {
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "A parent element to render the portal element into."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/menu-backdrop.json b/docs/reference/generated/menu-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the menu is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/portal.json → docs/reference/generated/menu-portal.json b/docs/reference/generated/portal.json → docs/reference/generated/menu-portal.json
@@ -1,10 +1,10 @@
 {
-  "name": "Portal",
+  "name": "MenuPortal",
   "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
   "props": {
     "container": {
       "type": "React.Ref | HTMLElement | null",
-      "description": "A parent element to render the portal into."
+      "description": "A parent element to render the portal element into."
     },
     "keepMounted": {
       "type": "boolean",

diff --git a/docs/reference/generated/menu-positioner.json b/docs/reference/generated/menu-positioner.json
@@ -53,11 +53,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the menu is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/popover-backdrop.json b/docs/reference/generated/popover-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the popover is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/popover-portal.json b/docs/reference/generated/popover-portal.json
@@ -0,0 +1,17 @@
+{
+  "name": "PopoverPortal",
+  "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
+  "props": {
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "A parent element to render the portal element into."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/popover-positioner.json b/docs/reference/generated/popover-positioner.json
@@ -55,11 +55,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the popover is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

@@ -15,6 +15,10 @@
       "type": "(open, event, reason) => void",
       "description": "Event handler called when the popover is opened or closed."
     },
+    "unmountRef": {
+      "type": "{ current: { unmount: func } }",
+      "description": "A ref to manually unmount the popover."
+    },
     "openOnHover": {
       "type": "boolean",
       "default": "false",

diff --git a/docs/reference/generated/preview-card-backdrop.json b/docs/reference/generated/preview-card-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the preview card is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/preview-card-portal.json b/docs/reference/generated/preview-card-portal.json
@@ -0,0 +1,17 @@
+{
+  "name": "PreviewCardPortal",
+  "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
+  "props": {
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "A parent element to render the portal element into."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/preview-card-positioner.json b/docs/reference/generated/preview-card-positioner.json
@@ -55,11 +55,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the preview card is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/select-backdrop.json b/docs/reference/generated/select-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the select menu is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/select-portal.json b/docs/reference/generated/select-portal.json
@@ -4,7 +4,7 @@
   "props": {
     "container": {
       "type": "React.Ref | HTMLElement | null",
-      "description": "A parent element to render the portal into."
+      "description": "A parent element to render the portal element into."
     }
   },
   "dataAttributes": {},

diff --git a/docs/reference/generated/tooltip-portal.json b/docs/reference/generated/tooltip-portal.json
@@ -0,0 +1,17 @@
+{
+  "name": "TooltipPortal",
+  "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
+  "props": {
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "A parent element to render the portal element into."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/tooltip-positioner.json b/docs/reference/generated/tooltip-positioner.json
@@ -55,11 +55,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the tooltip is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/src/app/(private)/experiments/anchor-positioning.tsx b/docs/src/app/(private)/experiments/anchor-positioning.tsx
@@ -49,6 +49,7 @@ export default function AnchorPositioning() {
     arrowPadding,
     trackAnchor,
     mounted: true,
+    keepMounted: true,
   });
 
   const handleInitialScroll = React.useCallback((node: HTMLDivElement | null) => {

diff --git a/docs/src/app/(private)/experiments/anchor-side-animations.tsx b/docs/src/app/(private)/experiments/anchor-side-animations.tsx
@@ -13,16 +13,20 @@ export default function AnchorSideAnimations() {
       </p>
       <Popover.Root>
         <Popover.Trigger>transition</Popover.Trigger>
-        <Popover.Positioner side="top">
-          <Popover.Popup className={classes.Popup} data-type="transition" />
-        </Popover.Positioner>
+        <Popover.Portal>
+          <Popover.Positioner side="top">
+            <Popover.Popup className={classes.Popup} data-type="transition" />
+          </Popover.Positioner>
+        </Popover.Portal>
       </Popover.Root>
 
       <Popover.Root>
         <Popover.Trigger>animation</Popover.Trigger>
-        <Popover.Positioner side="top">
-          <Popover.Popup className={classes.Popup} data-type="animation" />
-        </Popover.Positioner>
+        <Popover.Portal>
+          <Popover.Positioner side="top">
+            <Popover.Popup className={classes.Popup} data-type="animation" />
+          </Popover.Positioner>
+        </Popover.Portal>
       </Popover.Root>
     </div>
   );

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Collapsible } from '@base-ui-components/react/collapsible';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import c from './collapsible.module.css';
 
 export default function CollapsibleFramer() {