Remove keepMounted prop in tests

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

Hide file tree

Showing 34 changed files with 113 additions and 123 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/docs/src/app/(public)/(content)/react/components/dialog/demos/hero/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/components/dialog/demos/hero/css-modules/index.tsx
@@ -6,7 +6,7 @@ export default function ExampleDialog() {
   return (
     <Dialog.Root>
       <Dialog.Trigger className={styles.Button}>View notifications</Dialog.Trigger>
-      <Dialog.Portal>
+      <Dialog.Portal keepMounted>
         <Dialog.Backdrop className={styles.Backdrop} />
         <Dialog.Popup className={styles.Popup}>
           <Dialog.Title className={styles.Title}>Notifications</Dialog.Title>

diff --git a/packages/react/src/alert-dialog/popup/AlertDialogPopup.test.tsx b/packages/react/src/alert-dialog/popup/AlertDialogPopup.test.tsx
@@ -13,8 +13,10 @@ describe('<AlertDialog.Popup />', () => {
     render: (node) => {
       return render(
         <AlertDialog.Root open>
-          <AlertDialog.Backdrop />
-          <AlertDialog.Portal>{node}</AlertDialog.Portal>
+          <AlertDialog.Portal>
+            <AlertDialog.Backdrop />
+            {node}
+          </AlertDialog.Portal>
         </AlertDialog.Root>,
       );
     },

diff --git a/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx b/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx
@@ -101,10 +101,6 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
     customStyleHookMapping,
   });
 
-  if (!mounted) {
-    return null;
-  }
-
   return (
     <React.Fragment>
       {mounted && modal && <InternalBackdrop />}

diff --git a/packages/react/src/alert-dialog/portal/AlertDialogPortal.tsx b/packages/react/src/alert-dialog/portal/AlertDialogPortal.tsx
@@ -23,8 +23,8 @@ function AlertDialogPortal(props: AlertDialogPortal.Props) {
   }
 
   return (
-    <AlertDialogPortalContext.Provider value>
-      <FloatingPortal root={container}>{children}</FloatingPortal>;
+    <AlertDialogPortalContext.Provider value={keepMounted}>
+      <FloatingPortal root={container}>{children}</FloatingPortal>
     </AlertDialogPortalContext.Provider>
   );
 }

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/popup/DialogPopup.tsx b/packages/react/src/dialog/popup/DialogPopup.tsx
@@ -97,10 +97,6 @@ const DialogPopup = React.forwardRef(function DialogPopup(
     customStyleHookMapping,
   });
 
-  if (!mounted) {
-    return null;
-  }
-
   return (
     <React.Fragment>
       {mounted && modal && <InternalBackdrop />}

diff --git a/packages/react/src/dialog/portal/DialogPortal.tsx b/packages/react/src/dialog/portal/DialogPortal.tsx
@@ -23,8 +23,8 @@ function DialogPortal(props: DialogPortal.Props) {
   }
 
   return (
-    <DialogPortalContext.Provider value>
-      <FloatingPortal root={container}>{children}</FloatingPortal>;
+    <DialogPortalContext.Provider value={keepMounted}>
+      <FloatingPortal root={container}>{children}</FloatingPortal>
     </DialogPortalContext.Provider>
   );
 }

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
@@ -24,7 +24,7 @@ function MenuPortal(props: MenuPortal.Props) {
 
   return (
     <MenuPortalContext.Provider value={keepMounted}>
-      <FloatingPortal root={container}>{children}</FloatingPortal>;
+      <FloatingPortal root={container}>{children}</FloatingPortal>
     </MenuPortalContext.Provider>
   );
 }
@@ -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
@@ -38,7 +38,9 @@ describe('<Menu.Positioner />', () => {
     render: (node) => {
       return render(
         <FloatingTree>
-          <MenuRootContext.Provider value={testRootContext}>{node}</MenuRootContext.Provider>
+          <MenuRootContext.Provider value={testRootContext}>
+            <Menu.Portal>{node}</Menu.Portal>
+          </MenuRootContext.Provider>
         </FloatingTree>,
       );
     },
@@ -248,7 +250,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 +280,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>