refactor(popover): use usePreventScroll instead of react-remove-scroll (#3307)

* refactor(popover): use `usePreventScroll` instead of `react-remove-scroll`

* chore: lint

* refactor(popover): use `usePreventScroll` instead of `react-remove-scroll`

* chore: lint

* fix(tooltip): `shouldBlockScroll` prop

* chore(storybook): revert

* chore(changeset): update changeset

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

.changeset/real-cows-lie.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/popover": patch
+---
+
+Use `usePreventScroll` instead of `react-remove-scroll`; Add `shouldBlockScroll` prop to `Tooltip` (#3474).

packages/components/popover/package.json

@@ -34,19 +34,19 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
+    "@nextui-org/system": ">=2.0.0",
     "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "framer-motion": ">=10.17.0",
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "dependencies": {
     "@nextui-org/aria-utils": "workspace:*",
-    "@nextui-org/framer-utils": "workspace:*",
-    "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/button": "workspace:*",
-    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
     "@react-aria/dialog": "3.5.14",
     "@react-aria/focus": "3.17.1",
@@ -55,16 +55,15 @@
     "@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-remove-scroll": "^2.5.6"
+    "@react-types/overlays": "3.8.7"
   },
   "devDependencies": {
-    "@nextui-org/theme": "workspace:*",
-    "@nextui-org/system": "workspace:*",
-    "@nextui-org/input": "workspace:*",
     "@nextui-org/card": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "@nextui-org/input": "workspace:*",
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
     "clean-package": "2.2.0",
+    "framer-motion": "^11.0.22",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

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

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

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

@@ -6,7 +6,7 @@ import {RefObject, Ref, useEffect} from "react";
 import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
 import {OverlayTriggerState, useOverlayTriggerState} from "@react-stately/overlays";
 import {useFocusRing} from "@react-aria/focus";
-import {ariaHideOutside, useOverlayTrigger} from "@react-aria/overlays";
+import {ariaHideOutside, useOverlayTrigger, usePreventScroll} from "@react-aria/overlays";
 import {OverlayTriggerProps} from "@react-types/overlays";
 import {
   HTMLNextUIProps,
@@ -305,6 +305,10 @@ export function usePopover(originalProps: UsePopoverProps) {
     }
   }, [state.isOpen, domRef]);
 
+  usePreventScroll({
+    isDisabled: !(shouldBlockScroll && state.isOpen),
+  });
+
   return {
     state,
     Component,
@@ -319,7 +323,6 @@ 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,7 +8,12 @@ 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} from "@react-aria/overlays";
+import {
+  useOverlayPosition,
+  useOverlay,
+  AriaOverlayProps,
+  usePreventScroll,
+} from "@react-aria/overlays";
 import {
   HTMLNextUIProps,
   mapPropsVariants,
@@ -82,6 +87,11 @@ 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 &
@@ -123,6 +133,7 @@ export function useTooltip(originalProps: UseTooltipProps) {
     onClose,
     motionProps,
     classNames,
+    shouldBlockScroll = true,
     ...otherProps
   } = props;
 
@@ -158,6 +169,8 @@ export function useTooltip(originalProps: UseTooltipProps) {
     createDOMRef(overlayRef),
   );
 
+  usePreventScroll({isDisabled: !(shouldBlockScroll && isOpen)});
+
   const {triggerProps, tooltipProps: triggerTooltipProps} = useTooltipTrigger(
     {
       isDisabled,