From f50b16ff82fa647a28693a404806288394df0861 Mon Sep 17 00:00:00 2001
From: Gregor Woiwode <gregor.woiwode@gmail.com>
Date: Tue, 24 Oct 2023 09:34:25 +0200
Subject: [PATCH] refactor(modal): inline BodyScrollOptions

---
 packages/kit-headless/src/components/modal/modal.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/kit-headless/src/components/modal/modal.tsx b/packages/kit-headless/src/components/modal/modal.tsx
index 6078b29ad..db7312806 100644
--- a/packages/kit-headless/src/components/modal/modal.tsx
+++ b/packages/kit-headless/src/components/modal/modal.tsx
@@ -10,19 +10,18 @@ import {
   useStyles$,
   useTask$,
 } from '@builder.io/qwik';
+
 import {
   activateFocusTrap,
   closeModal,
   deactivateFocusTrap,
-  keepModalInPlaceWhileScrollbarReappears as keepModalInPlaceWhenScrollbarReappears,
-  lockScroll,
   overrideNativeDialogEscapeBehaviorWith,
   showModal,
   trapFocus,
   wasModalBackdropClicked,
 } from './modal-behavior';
 
-import { disableBodyScroll, type BodyScrollOptions } from 'body-scroll-lock';
+import { disableBodyScroll } from 'body-scroll-lock';
 
 import styles from './modal.css?inline';
 
@@ -38,10 +37,6 @@ export const Modal = component$((props: ModalProps) => {
   useStyles$(styles);
   const modalRefSig = useSignal<HTMLDialogElement>();
 
-  const scrollOptions: BodyScrollOptions = {
-    reserveScrollBarGap: true,
-  };
-
   const { 'bind:show': showSig } = props;
 
   useTask$(async function toggleModal({ track, cleanup }) {
@@ -60,7 +55,7 @@ export const Modal = component$((props: ModalProps) => {
 
     if (isOpen) {
       showModal(modal);
-      disableBodyScroll(modal, scrollOptions);
+      disableBodyScroll(modal, { reserveScrollBarGap: true });
       props.onShow$?.();
       activateFocusTrap(focusTrap);
     } else {
@@ -70,7 +65,6 @@ export const Modal = component$((props: ModalProps) => {
 
     cleanup(() => {
       deactivateFocusTrap(focusTrap);
-      keepModalInPlaceWhenScrollbarReappears(scrollbar, modalRefSig.value);
     });
   });