refactor(modal): inline BodyScrollOptions

qwikifiers · Oct 25, 2023 · f50b16f · f50b16f
1 parent e9c57a4
commit f50b16f
Showing 1 changed file with 3 additions and 9 deletions.
diff --git 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);
     });
   });