Add preventScrollRestoration option for scroll resortation (#202)

* Add preventScrollRestoration

* Prettied

* Prettied

* Added documentation for preventScrollRestoration

Author: shkumbinhasani

README.md

@@ -60,6 +60,8 @@ Additional props:
 
 `modal`: When `false`it allows to interact with elements outside of the drawer without closing it. Defaults to`true`.
 
+`preventScrollRestoration`: When `true` it prevents scroll restoration when the drawer is closed after a navigation happens inside of it. Defaults to `true`.
+
 ### Trigger
 
 The button that opens the dialog. [Props](https://www.radix-ui.com/docs/primitives/components/dialog#trigger).

pnpm-lock.yaml

@@ -49,6 +49,7 @@ type DialogProps = {
   modal?: boolean;
   nested?: boolean;
   onClose?: () => void;
+  preventScrollRestoration?: boolean;
 } & (WithFadeFromProps | WithoutFadeFromProps);
 
 function Root({
@@ -69,6 +70,7 @@ function Root({
   fixed,
   modal = true,
   onClose,
+  preventScrollRestoration = true,
 }: DialogProps) {
   const [isOpen = false, setIsOpen] = React.useState<boolean>(false);
   const [hasBeenOpened, setHasBeenOpened] = React.useState<boolean>(false);
@@ -124,6 +126,7 @@ function Root({
     modal,
     nested,
     hasBeenOpened,
+    preventScrollRestoration,
   });
 
   function getScale() {

src/index.tsx

@@ -7,11 +7,13 @@ export function usePositionFixed({
   modal,
   nested,
   hasBeenOpened,
+  preventScrollRestoration,
 }: {
   isOpen: boolean;
   modal: boolean;
   nested: boolean;
   hasBeenOpened: boolean;
+  preventScrollRestoration: boolean;
 }) {
   const [activeUrl, setActiveUrl] = React.useState(typeof window !== 'undefined' ? window.location.href : '');
   const scrollPos = React.useRef(0);
@@ -64,7 +66,7 @@ export function usePositionFixed({
       document.body.style.right = 'unset';
 
       requestAnimationFrame(() => {
-        if (activeUrl !== window.location.href) {
+        if (preventScrollRestoration && activeUrl !== window.location.href) {
           setActiveUrl(window.location.href);
           return;
         }

src/use-position-fixed.ts

@@ -33,10 +33,10 @@ export function useSnapPoints({
 
   const shouldFade =
     (snapPoints &&
-        snapPoints.length > 0 &&
-        (fadeFromIndex || fadeFromIndex === 0) &&
-        !Number.isNaN(fadeFromIndex) &&
-        snapPoints[fadeFromIndex] === activeSnapPoint) ||
+      snapPoints.length > 0 &&
+      (fadeFromIndex || fadeFromIndex === 0) &&
+      !Number.isNaN(fadeFromIndex) &&
+      snapPoints[fadeFromIndex] === activeSnapPoint) ||
     !snapPoints;
 
   const activeSnapPointIndex = React.useMemo(

src/use-snap-points.ts

@@ -24,4 +24,4 @@
     "typescript": "5.2.2",
     "vaul": "workspace:^"
   }
-}
+}

test/package.json

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

test/postcss.config.js

@@ -1,4 +1,4 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
@@ -10,11 +10,10 @@ const config: Config = {
     extend: {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
     },
   },
   plugins: [],
-}
-export default config
+};
+export default config;