Remove keepMounted prop in tests

mui · Dec 24, 2024 · 53db81e · 53db81e
1 parent 5c37994
commit 53db81e
Show file tree

Hide file tree

Showing 25 changed files with 82 additions and 100 deletions.
diff --git a/docs/reference/generated/menu-portal.json b/docs/reference/generated/menu-portal.json
@@ -9,7 +9,7 @@
     "keepMounted": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden.\nwhen the popup is closed."
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
     }
   },
   "dataAttributes": {},

diff --git a/docs/reference/generated/popover-portal.json b/docs/reference/generated/popover-portal.json
@@ -9,7 +9,7 @@
     "keepMounted": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden.\nwhen the popup is closed."
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
     }
   },
   "dataAttributes": {},

diff --git a/docs/reference/generated/preview-card-portal.json b/docs/reference/generated/preview-card-portal.json
@@ -9,7 +9,7 @@
     "keepMounted": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden.\nwhen the popup is closed."
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
     }
   },
   "dataAttributes": {},

diff --git a/docs/reference/generated/tooltip-portal.json b/docs/reference/generated/tooltip-portal.json
@@ -9,7 +9,7 @@
     "keepMounted": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden.\nwhen the popup is closed."
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
     }
   },
   "dataAttributes": {},

diff --git a/docs/src/app/(private)/experiments/dialog.tsx b/docs/src/app/(private)/experiments/dialog.tsx
@@ -74,16 +74,11 @@ function CssTransitionDialogDemo({ keepMounted, modal, dismissible }: DemoProps)
           Open with CSS transition
         </Dialog.Trigger>
 
-        <Dialog.Backdrop
-          keepMounted={keepMounted}
-          className={clsx(classes.backdrop, classes.withTransitions)}
-        />
-
-        <Dialog.Portal>
-          <Dialog.Popup
-            keepMounted={keepMounted}
-            className={clsx(classes.dialog, classes.withTransitions)}
-          >
+        <Dialog.Portal keepMounted={keepMounted}>
+          <Dialog.Backdrop
+            className={clsx(classes.backdrop, classes.withTransitions)}
+          />
+          <Dialog.Popup className={clsx(classes.dialog, classes.withTransitions)}>
             {renderContent(
               'Dialog with CSS transitions',
               NESTED_DIALOGS,
@@ -106,16 +101,11 @@ function CssAnimationDialogDemo({ keepMounted, modal, dismissible }: DemoProps)
           Open with CSS animation
         </Dialog.Trigger>
 
-        <Dialog.Backdrop
-          keepMounted={keepMounted}
-          className={clsx(classes.backdrop, classes.withAnimations)}
-        />
-
-        <Dialog.Portal>
-          <Dialog.Popup
-            keepMounted={keepMounted}
-            className={clsx(classes.dialog, classes.withAnimations)}
-          >
+        <Dialog.Portal keepMounted={keepMounted}>
+          <Dialog.Backdrop
+            className={clsx(classes.backdrop, classes.withAnimations)}
+          />
+          <Dialog.Popup className={clsx(classes.dialog, classes.withAnimations)}>
             {renderContent(
               'Dialog with CSS animations',
               NESTED_DIALOGS,
@@ -147,9 +137,8 @@ function ReactSpringDialogDemo({ keepMounted, modal, dismissible }: DemoProps) {
         />
 
         <ReactSpringTransition open={open}>
-          <Dialog.Portal>
+          <Dialog.Portal keepMounted={keepMounted}>
             <Dialog.Popup
-              keepMounted={keepMounted}
               className={`${classes.dialog} ${classes.withReactSpringTransition}`}
             >
               {renderContent(

diff --git a/docs/src/app/(private)/experiments/menu-rtl.tsx b/docs/src/app/(private)/experiments/menu-rtl.tsx
@@ -16,13 +16,8 @@ export default function RtlPopover() {
             <Popover.Trigger className={s.IconButton}>
               <BellIcon aria-label="Notifications" className={s.Icon} />
             </Popover.Trigger>
-            <Popover.Portal>
-              <Popover.Positioner
-                sideOffset={12}
-                dir={DIR}
-                side="inline-start"
-                keepMounted
-              >
+            <Popover.Portal keepMounted>
+              <Popover.Positioner sideOffset={12} dir={DIR} side="inline-start">
                 <Popover.Popup className={s.Popup}>
                   <Popover.Arrow className={s.Arrow}>
                     <ArrowSvg />
@@ -40,13 +35,8 @@ export default function RtlPopover() {
             <Popover.Trigger className={s.IconButton}>
               <BellIcon aria-label="Notifications" className={s.Icon} />
             </Popover.Trigger>
-            <Popover.Portal>
-              <Popover.Positioner
-                sideOffset={12}
-                dir={DIR}
-                side="inline-end"
-                keepMounted
-              >
+            <Popover.Portal keepMounted>
+              <Popover.Positioner sideOffset={12} dir={DIR} side="inline-end">
                 <Popover.Popup className={s.Popup}>
                   <Popover.Arrow className={s.Arrow}>
                     <ArrowSvg />

diff --git a/docs/src/app/(private)/experiments/popup-transform-origin.tsx b/docs/src/app/(private)/experiments/popup-transform-origin.tsx
@@ -9,9 +9,11 @@ function Popover({ side }: { side: Side }) {
       <PopoverPrimitive.Trigger className={styles.Trigger}>
         {side}
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Positioner side={side} sideOffset={20}>
-        <PopoverPrimitive.Popup className={styles.Popup} />
-      </PopoverPrimitive.Positioner>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Positioner side={side} sideOffset={20}>
+          <PopoverPrimitive.Popup className={styles.Popup} />
+        </PopoverPrimitive.Positioner>
+      </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>
   );
 }
@@ -22,11 +24,13 @@ function PopoverWithArrow({ side }: { side: Side }) {
       <PopoverPrimitive.Trigger className={styles.Trigger}>
         {side}
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Positioner side={side} sideOffset={20}>
-        <PopoverPrimitive.Popup className={styles.Popup}>
-          <PopoverPrimitive.Arrow className={styles.Arrow} />
-        </PopoverPrimitive.Popup>
-      </PopoverPrimitive.Positioner>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Positioner side={side} sideOffset={20}>
+          <PopoverPrimitive.Popup className={styles.Popup}>
+            <PopoverPrimitive.Arrow className={styles.Arrow} />
+          </PopoverPrimitive.Popup>
+        </PopoverPrimitive.Positioner>
+      </PopoverPrimitive.Portal>
     </PopoverPrimitive.Root>
   );
 }

diff --git a/docs/src/app/(private)/experiments/tooltip.tsx b/docs/src/app/(private)/experiments/tooltip.tsx
@@ -227,7 +227,7 @@ export default function TooltipTransitionExperiment() {
           <Tooltip.Root>
             <AnchorButton>Anchor</AnchorButton>
             <Tooltip.Portal keepMounted>
-              <Tooltip.Positioner sideOffset={7} keepMounted>
+              <Tooltip.Positioner sideOffset={7}>
                 <TooltipPopup data-type="css-animation-keep-mounted">
                   Tooltip
                 </TooltipPopup>
@@ -237,7 +237,7 @@ export default function TooltipTransitionExperiment() {
           <Tooltip.Root>
             <AnchorButton>Anchor</AnchorButton>
             <Tooltip.Portal keepMounted>
-              <Tooltip.Positioner sideOffset={7} keepMounted>
+              <Tooltip.Positioner sideOffset={7}>
                 <TooltipPopup data-type="css-animation-keep-mounted">
                   Tooltip
                 </TooltipPopup>
@@ -250,7 +250,7 @@ export default function TooltipTransitionExperiment() {
       <Tooltip.Root>
         <AnchorButton>Anchor</AnchorButton>
         <Tooltip.Portal keepMounted>
-          <Tooltip.Positioner sideOffset={7} keepMounted>
+          <Tooltip.Positioner sideOffset={7}>
             <TooltipPopup data-type="css-animation-keep-mounted">
               Tooltip
             </TooltipPopup>
@@ -264,7 +264,7 @@ export default function TooltipTransitionExperiment() {
           <Tooltip.Root>
             <AnchorButton>Anchor</AnchorButton>
             <Tooltip.Portal keepMounted>
-              <Tooltip.Positioner sideOffset={7} keepMounted>
+              <Tooltip.Positioner sideOffset={7}>
                 <TooltipPopup data-type="css-transition-keep-mounted">
                   Tooltip
                 </TooltipPopup>
@@ -274,7 +274,7 @@ export default function TooltipTransitionExperiment() {
           <Tooltip.Root>
             <AnchorButton>Anchor</AnchorButton>
             <Tooltip.Portal keepMounted>
-              <Tooltip.Positioner sideOffset={7} keepMounted>
+              <Tooltip.Positioner sideOffset={7}>
                 <TooltipPopup data-type="css-transition-keep-mounted">
                   Tooltip
                 </TooltipPopup>
@@ -287,7 +287,7 @@ export default function TooltipTransitionExperiment() {
       <Tooltip.Root>
         <AnchorButton>Anchor</AnchorButton>
         <Tooltip.Portal keepMounted>
-          <Tooltip.Positioner sideOffset={7} keepMounted>
+          <Tooltip.Positioner sideOffset={7}>
             <TooltipPopup data-type="css-transition-keep-mounted">
               Tooltip
             </TooltipPopup>
@@ -311,7 +311,7 @@ function FramerMotion() {
       <AnimatePresence>
         {isOpen && (
           <Tooltip.Portal keepMounted>
-            <Tooltip.Positioner keepMounted sideOffset={7}>
+            <Tooltip.Positioner sideOffset={7}>
               <TooltipPopup
                 data-type="framer-motion"
                 render={

diff --git a/packages/react/src/dialog/popup/DialogPopup.test.tsx b/packages/react/src/dialog/popup/DialogPopup.test.tsx
@@ -28,8 +28,8 @@ describe('<Dialog.Popup />', () => {
       it(`should ${!expectedIsMounted ? 'not ' : ''}keep the dialog mounted when keepMounted=${keepMounted}`, async () => {
         const { queryByRole } = await render(
           <Dialog.Root open={false} modal={false}>
-            <Dialog.Portal keepMounted>
-              <Dialog.Popup keepMounted={keepMounted} />
+            <Dialog.Portal keepMounted={keepMounted}>
+              <Dialog.Popup />
             </Dialog.Portal>
           </Dialog.Root>,
         );

diff --git a/packages/react/src/dialog/root/DialogRoot.test.tsx b/packages/react/src/dialog/root/DialogRoot.test.tsx
@@ -133,7 +133,6 @@ describe('<Dialog.Root />', () => {
                   className="animation-test-popup"
                   data-testid="popup"
                   onAnimationEnd={notifyAnimationFinished}
-                  keepMounted
                 />
               </Dialog.Portal>
             </Dialog.Root>
@@ -399,8 +398,8 @@ describe('<Dialog.Root />', () => {
       <Dialog.Root open modal={false}>
         {/* eslint-disable-next-line react/no-danger */}
         <style dangerouslySetInnerHTML={{ __html: css }} />
-        <Dialog.Portal>
-          <Dialog.Popup className="dialog" onTransitionEnd={notifyTransitionEnd} keepMounted />
+        <Dialog.Portal keepMounted>
+          <Dialog.Popup className="dialog" onTransitionEnd={notifyTransitionEnd} />
         </Dialog.Portal>
       </Dialog.Root>,
     );

diff --git a/packages/react/src/menu/checkbox-item/MenuCheckboxItem.test.tsx b/packages/react/src/menu/checkbox-item/MenuCheckboxItem.test.tsx
@@ -293,7 +293,7 @@ describe('<Menu.CheckboxItem />', () => {
         <Menu.Root modal={false}>
           <Menu.Trigger>Open</Menu.Trigger>
           <Menu.Portal keepMounted>
-            <Menu.Positioner keepMounted>
+            <Menu.Positioner>
               <Menu.Popup>
                 <Menu.CheckboxItem>Item</Menu.CheckboxItem>
               </Menu.Popup>

diff --git a/packages/react/src/menu/portal/MenuPortal.tsx b/packages/react/src/menu/portal/MenuPortal.tsx
@@ -34,7 +34,6 @@ namespace MenuPortal {
     children?: React.ReactNode;
     /**
      * Whether to keep the portal mounted in the DOM while the popup is hidden.
-     * when the popup is closed.
      * @default false
      */
     keepMounted?: boolean;
@@ -60,7 +59,6 @@ MenuPortal.propTypes /* remove-proptypes */ = {
   container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, refType]),
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
-   * when the popup is closed.
    * @default false
    */
   keepMounted: PropTypes.bool,

diff --git a/packages/react/src/menu/positioner/MenuPositioner.test.tsx b/packages/react/src/menu/positioner/MenuPositioner.test.tsx
@@ -248,7 +248,7 @@ describe('<Menu.Positioner />', () => {
         <Menu.Root modal={false}>
           <Menu.Trigger>Toggle</Menu.Trigger>
           <Menu.Portal keepMounted>
-            <Menu.Positioner keepMounted>
+            <Menu.Positioner>
               <Menu.Popup>
                 <Menu.Item>1</Menu.Item>
                 <Menu.Item>2</Menu.Item>
@@ -278,7 +278,7 @@ describe('<Menu.Positioner />', () => {
         <Menu.Root modal={false}>
           <Menu.Trigger>Toggle</Menu.Trigger>
           <Menu.Portal keepMounted={false}>
-            <Menu.Positioner keepMounted={false}>
+            <Menu.Positioner>
               <Menu.Popup>
                 <Menu.Item>1</Menu.Item>
                 <Menu.Item>2</Menu.Item>

diff --git a/packages/react/src/menu/positioner/useMenuPositioner.ts b/packages/react/src/menu/positioner/useMenuPositioner.ts
@@ -144,10 +144,6 @@ export namespace useMenuPositioner {
      * @default 5
      */
     collisionPadding?: Padding;
-    /**
-     * Whether the portal is kept mounted in the DOM while the popup is closed.
-     */
-    keepMounted: boolean;
     /**
      * Whether to maintain the menu in the viewport after
      * the anchor element is scrolled out of view.
@@ -164,6 +160,10 @@ export namespace useMenuPositioner {
   }
 
   export interface Parameters extends SharedParameters {
+    /**
+     * Whether the portal is kept mounted in the DOM while the popup is closed.
+     */
+    keepMounted: boolean;
     /**
      * Whether the Menu is mounted.
      */

diff --git a/packages/react/src/menu/radio-item/MenuRadioItem.test.tsx b/packages/react/src/menu/radio-item/MenuRadioItem.test.tsx
@@ -249,7 +249,7 @@ describe('<Menu.RadioItem />', () => {
         <Menu.Root modal={false}>
           <Menu.Trigger>Open</Menu.Trigger>
           <Menu.Portal keepMounted>
-            <Menu.Positioner keepMounted>
+            <Menu.Positioner>
               <Menu.Popup>
                 <Menu.RadioGroup defaultValue={0}>
                   <Menu.RadioItem value={1}>Item</Menu.RadioItem>

diff --git a/packages/react/src/menu/root/MenuRoot.test.tsx b/packages/react/src/menu/root/MenuRoot.test.tsx
@@ -597,8 +597,8 @@ describe('<Menu.Root />', () => {
           <input type="text" />
           <Menu.Root>
             <Menu.Trigger>Toggle</Menu.Trigger>
-            <Menu.Portal>
-              <Menu.Positioner keepMounted>
+            <Menu.Portal keepMounted>
+              <Menu.Positioner>
                 <Menu.Popup>
                   <Menu.Item>Close</Menu.Item>
                 </Menu.Popup>
@@ -804,7 +804,7 @@ describe('<Menu.Root />', () => {
             <button onClick={() => setOpen(false)}>Close</button>
             <Menu.Root open={open} modal={false}>
               <Menu.Portal keepMounted>
-                <Menu.Positioner keepMounted>
+                <Menu.Positioner>
                   <Menu.Popup
                     className="animation-test-popup"
                     onAnimationEnd={notifyAnimationFinished}

diff --git a/packages/react/src/popover/portal/PopoverPortal.tsx b/packages/react/src/popover/portal/PopoverPortal.tsx
@@ -34,7 +34,6 @@ namespace PopoverPortal {
     children?: React.ReactNode;
     /**
      * Whether to keep the portal mounted in the DOM while the popup is hidden.
-     * when the popup is closed.
      * @default false
      */
     keepMounted?: boolean;
@@ -60,7 +59,6 @@ PopoverPortal.propTypes /* remove-proptypes */ = {
   container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, refType]),
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
-   * when the popup is closed.
    * @default false
    */
   keepMounted: PropTypes.bool,

diff --git a/packages/react/src/popover/positioner/PopoverPositioner.test.tsx b/packages/react/src/popover/positioner/PopoverPositioner.test.tsx
@@ -10,15 +10,21 @@ describe('<Popover.Positioner />', () => {
   describeConformance(<Popover.Positioner />, () => ({
     refInstanceof: window.HTMLDivElement,
     render(node) {
-      return render(<Popover.Root open>{node}</Popover.Root>);
+      return render(
+        <Popover.Root open>
+          <Popover.Portal>{node}</Popover.Portal>
+        </Popover.Root>,
+      );
     },
   }));
 
   describe('prop: keepMounted', () => {
     it('has hidden attribute when closed', async () => {
       await render(
         <Popover.Root>
-          <Popover.Positioner keepMounted data-testid="positioner" />
+          <Popover.Portal keepMounted>
+            <Popover.Positioner data-testid="positioner" />
+          </Popover.Portal>
         </Popover.Root>,
       );
 
@@ -28,7 +34,9 @@ describe('<Popover.Positioner />', () => {
     it('does not have inert attribute when open', async () => {
       await render(
         <Popover.Root open>
-          <Popover.Positioner keepMounted data-testid="positioner" />
+          <Popover.Portal keepMounted>
+            <Popover.Positioner data-testid="positioner" />
+          </Popover.Portal>
         </Popover.Root>,
       );