From 51c1137f8bd628327551e37217515957ddd00122 Mon Sep 17 00:00:00 2001
From: Emil Kowalski <e@emilkowal.ski>
Date: Tue, 7 May 2024 12:39:53 +0200
Subject: [PATCH] Add prop to not add body styles, update readme

---
 README.md                 |  4 ++++
 src/index.tsx             | 29 +++++++++++++++++------------
 src/use-position-fixed.ts |  6 ++++--
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index f77ae33..2d716b4 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,10 @@ Additional props:
 
 `disablePreventScroll`: When `true` scroll prevention mechanism will be disabled. Scroll prevention ensures that page will not scroll on mobile when opening drawer. However this mechanism gets confused when drawer has an input with autofocus and therefore opens simulataneosly with touch keyboard. Defaults to `true`. `modal` set to `false` also disables it.
 
+`noBodyStyles`: When `true` the `body` doesn't get any styles assigned from Vaul.
+
+`setBackgroundColorOnScale`: When `false` we don't change body's background color when the drawer is open. `true` by default.
+
 `[data-vaul-no-drag]`: When interacting with an element with this data attribute, the drawer won't be dragged.
 
 ### Trigger
diff --git a/src/index.tsx b/src/index.tsx
index 88fdd23..1667a26 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -40,6 +40,7 @@ type DialogProps = {
   children?: React.ReactNode;
   open?: boolean;
   closeThreshold?: number;
+  noBodyStyles?: boolean;
   onOpenChange?: (open: boolean) => void;
   shouldScaleBackground?: boolean;
   setBackgroundColorOnScale?: boolean;
@@ -77,6 +78,7 @@ function Root({
   fixed,
   modal = true,
   onClose,
+  noBodyStyles,
   direction = 'bottom',
   preventScrollRestoration = true,
   disablePreventScroll = false,
@@ -137,6 +139,7 @@ function Root({
     nested,
     hasBeenOpened,
     preventScrollRestoration,
+	noBodyStyles
   });
 
   function getScale() {
@@ -614,18 +617,20 @@ function Root({
 
     if (open) {
       if (setBackgroundColorOnScale) {
-        // setting original styles initially
-        set(document.body, {
-          background: document.body.style.backgroundColor || document.body.style.background,
-        });
-        // setting body styles, with cache ignored, so that we can get correct original styles in reset
-        set(
-          document.body,
-          {
-            background: 'black',
-          },
-          true,
-        );
+        if (!noBodyStyles) {
+          // setting original styles initially
+          set(document.body, {
+            background: document.body.style.backgroundColor || document.body.style.background,
+          });
+          // setting body styles, with cache ignored, so that we can get correct original styles in reset
+          set(
+            document.body,
+            {
+              background: 'black',
+            },
+            true,
+          );
+        }
       }
 
       set(wrapper, {
diff --git a/src/use-position-fixed.ts b/src/use-position-fixed.ts
index 18b22a9..1c81a2b 100644
--- a/src/use-position-fixed.ts
+++ b/src/use-position-fixed.ts
@@ -8,19 +8,21 @@ export function usePositionFixed({
   nested,
   hasBeenOpened,
   preventScrollRestoration,
+  noBodyStyles,
 }: {
   isOpen: boolean;
   modal: boolean;
   nested: boolean;
   hasBeenOpened: boolean;
   preventScrollRestoration: boolean;
+  noBodyStyles: boolean;
 }) {
   const [activeUrl, setActiveUrl] = React.useState(() => (typeof window !== 'undefined' ? window.location.href : ''));
   const scrollPos = React.useRef(0);
 
   const setPositionFixed = React.useCallback(() => {
     // If previousBodyPosition is already set, don't set it again.
-    if (previousBodyPosition === null && isOpen) {
+    if (previousBodyPosition === null && isOpen && !noBodyStyles) {
       previousBodyPosition = {
         position: document.body.style.position,
         top: document.body.style.top,
@@ -56,7 +58,7 @@ export function usePositionFixed({
   }, [isOpen]);
 
   const restorePositionSetting = React.useCallback(() => {
-    if (previousBodyPosition !== null) {
+    if (previousBodyPosition !== null && !noBodyStyles) {
       // Convert the position from "px" to Int
       const y = -parseInt(document.body.style.top, 10);
       const x = -parseInt(document.body.style.left, 10);