Merge branch 'main' into fix/eng-569

heroui-inc · Mar 31, 2024 · d4f8895 · d4f8895
2 parents d65576f + 8761168
commit d4f8895
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 40 deletions.
diff --git a/.changeset/spicy-coats-exist.md b/.changeset/spicy-coats-exist.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/modal": patch
+"@nextui-org/popover": patch
+---
+
+Fixed lazy motion forwardRef issue
diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
@@ -1,7 +1,7 @@
 import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
-import {cloneElement, isValidElement, ReactNode, useMemo} from "react";
+import {cloneElement, isValidElement, ReactNode, useMemo, useCallback, ReactElement} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
@@ -90,27 +90,42 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
+  const RemoveScrollWrapper = useCallback(
+    ({children}: {children: ReactElement}) => {
+      return (
+        <RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
+          {children}
+        </RemoveScroll>
+      );
+    },
+    [shouldBlockScroll, isOpen],
+  );
+
+  const contents = disableAnimation ? (
+    <RemoveScrollWrapper>
+      <div className={slots.wrapper({class: classNames?.wrapper})}>{content}</div>
+    </RemoveScrollWrapper>
+  ) : (
+    <LazyMotion features={domAnimation}>
+      <RemoveScrollWrapper>
+        <m.div
+          animate="enter"
+          className={slots.wrapper({class: classNames?.wrapper})}
+          exit="exit"
+          initial="exit"
+          variants={scaleInOut}
+          {...motionProps}
+        >
+          {content}
+        </m.div>
+      </RemoveScrollWrapper>
+    </LazyMotion>
+  );
+
   return (
     <div tabIndex={-1}>
       {backdropContent}
-      <RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
-        {disableAnimation ? (
-          <div className={slots.wrapper({class: classNames?.wrapper})}>{content}</div>
-        ) : (
-          <LazyMotion features={domAnimation}>
-            <m.div
-              animate="enter"
-              className={slots.wrapper({class: classNames?.wrapper})}
-              exit="exit"
-              initial="exit"
-              variants={scaleInOut}
-              {...motionProps}
-            >
-              {content}
-            </m.div>
-          </LazyMotion>
-        )}
-      </RemoveScroll>
+      {contents}
     </div>
   );
 });

diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
@@ -1,7 +1,7 @@
 import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
-import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
+import {DOMAttributes, ReactNode, useMemo, useRef, useCallback, ReactElement} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
@@ -81,29 +81,42 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
+  const RemoveScrollWrapper = useCallback(
+    ({children}: {children: ReactElement}) => {
+      return (
+        <RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
+          {children}
+        </RemoveScroll>
+      );
+    },
+    [shouldBlockScroll, isOpen],
+  );
+
+  const contents = disableAnimation ? (
+    <RemoveScrollWrapper>{content}</RemoveScrollWrapper>
+  ) : (
+    <LazyMotion features={domAnimation}>
+      <RemoveScrollWrapper>
+        <m.div
+          animate="enter"
+          exit="exit"
+          initial="initial"
+          style={{
+            ...getTransformOrigins(placement === "center" ? "top" : placement),
+          }}
+          variants={TRANSITION_VARIANTS.scaleSpringOpacity}
+          {...motionProps}
+        >
+          {content}
+        </m.div>
+      </RemoveScrollWrapper>
+    </LazyMotion>
+  );
+
   return (
     <div {...getPopoverProps()}>
       {backdropContent}
-      <RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
-        {disableAnimation ? (
-          content
-        ) : (
-          <LazyMotion features={domAnimation}>
-            <m.div
-              animate="enter"
-              exit="exit"
-              initial="initial"
-              style={{
-                ...getTransformOrigins(placement === "center" ? "top" : placement),
-              }}
-              variants={TRANSITION_VARIANTS.scaleSpringOpacity}
-              {...motionProps}
-            >
-              {content}
-            </m.div>
-          </LazyMotion>
-        )}
-      </RemoveScroll>
+      {contents}
     </div>
   );
 });