chore: undo pr3307 (#3756)

* chore: rollback pr3307

* chore(changeset): fix typo

.changeset/fair-worms-reflect.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/popover": patch
+"@nextui-org/tooltip": patch
+---
+
+rollback PR3307. rescheduled to v2.5.0.

apps/docs/components/marketing/hero/floating-components.tsx

@@ -110,7 +110,6 @@ export const FloatingComponents: React.FC<{}> = () => {
             content="Developers love Next.js"
             isOpen={!isTablet}
             placement="top"
-            shouldBlockScroll={false}
             style={{
               zIndex: 39,
             }}

packages/components/popover/package.json

@@ -56,7 +56,8 @@
     "@react-aria/utils": "3.24.1",
     "@react-stately/overlays": "3.6.7",
     "@react-types/button": "3.9.4",
-    "@react-types/overlays": "3.8.7"
+    "@react-types/overlays": "3.8.7",
+    "react-remove-scroll": "^2.5.6"
   },
   "devDependencies": {
     "@nextui-org/card": "workspace:*",

packages/components/popover/src/popover-content.tsx

@@ -3,6 +3,7 @@ import type {HTMLMotionProps} from "framer-motion";
 
 import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
 import {forwardRef} from "@nextui-org/system";
+import {RemoveScroll} from "react-remove-scroll";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {m, domAnimation, LazyMotion} from "framer-motion";
@@ -23,10 +24,12 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
 
   const {
     Component: OverlayComponent,
+    isOpen,
     placement,
     backdrop,
     motionProps,
     disableAnimation,
+    shouldBlockScroll,
     getPopoverProps,
     getDialogProps,
     getBackdropProps,
@@ -79,23 +82,27 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
-  const contents = 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>
+  const contents = (
+    <RemoveScroll 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>
   );
 
   return (

packages/components/popover/src/use-popover.ts

@@ -6,7 +6,7 @@ import {RefObject, Ref} from "react";
 import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
 import {OverlayTriggerState, useOverlayTriggerState} from "@react-stately/overlays";
 import {useFocusRing} from "@react-aria/focus";
-import {useOverlayTrigger, usePreventScroll} from "@react-aria/overlays";
+import {useOverlayTrigger} from "@react-aria/overlays";
 import {OverlayTriggerProps} from "@react-types/overlays";
 import {
   HTMLNextUIProps,
@@ -298,10 +298,6 @@ export function usePopover(originalProps: UsePopoverProps) {
     [slots, state.isOpen, classNames, underlayProps],
   );
 
-  usePreventScroll({
-    isDisabled: !(shouldBlockScroll && state.isOpen),
-  });
-
   return {
     state,
     Component,
@@ -316,6 +312,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     isOpen: state.isOpen,
     onClose: state.close,
     disableAnimation,
+    shouldBlockScroll,
     backdrop: originalProps.backdrop ?? "transparent",
     motionProps,
     getBackdropProps,

packages/components/tooltip/src/use-tooltip.ts

@@ -8,12 +8,7 @@ import {ReactNode, Ref, useId, useImperativeHandle} from "react";
 import {useTooltipTriggerState} from "@react-stately/tooltip";
 import {mergeProps} from "@react-aria/utils";
 import {useTooltip as useReactAriaTooltip, useTooltipTrigger} from "@react-aria/tooltip";
-import {
-  useOverlayPosition,
-  useOverlay,
-  AriaOverlayProps,
-  usePreventScroll,
-} from "@react-aria/overlays";
+import {useOverlayPosition, useOverlay, AriaOverlayProps} from "@react-aria/overlays";
 import {
   HTMLNextUIProps,
   mapPropsVariants,
@@ -87,11 +82,6 @@ interface Props extends Omit<HTMLNextUIProps, "content"> {
    * ```
    */
   classNames?: SlotsToClasses<"base" | "arrow" | "content">;
-  /**
-   * Whether to block scrolling outside the tooltip.
-   * @default true
-   */
-  shouldBlockScroll?: boolean;
 }
 
 export type UseTooltipProps = Props &
@@ -133,7 +123,6 @@ export function useTooltip(originalProps: UseTooltipProps) {
     onClose,
     motionProps,
     classNames,
-    shouldBlockScroll = true,
     ...otherProps
   } = props;
 
@@ -169,8 +158,6 @@ export function useTooltip(originalProps: UseTooltipProps) {
     createDOMRef(overlayRef),
   );
 
-  usePreventScroll({isDisabled: !(shouldBlockScroll && isOpen)});
-
   const {triggerProps, tooltipProps: triggerTooltipProps} = useTooltipTrigger(
     {
       isDisabled,

pnpm-lock.yaml

@@ -2038,6 +2038,9 @@ importers:
       '@react-types/overlays':
         specifier: 3.8.7
         version: 3.8.7(react@18.2.0)
+      react-remove-scroll:
+        specifier: ^2.5.6
+        version: 2.5.9(@types/react@18.2.8)(react@18.2.0)
     devDependencies:
       '@nextui-org/card':
         specifier: workspace:*