fix(modal): proper deps installed, and tidying code

Author: thejackshelton

package.json

@@ -61,7 +61,6 @@
     "@storybook/test-runner": "0.13.0",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/cypress": "9.0.0",
-    "@types/body-scroll-lock": "3.1.1",
     "@types/eslint": "^8.44.2",
     "@types/estree-jsx": "^1.0.3",
     "@types/node": "^20.5.7",
@@ -139,9 +138,7 @@
   ],
   "dependencies": {
     "@fontsource-variable/inter": "5.0.8",
-    "body-scroll-lock-upgrade": "1.1.0",
     "canvas-confetti": "1.9.2",
-    "install": "0.13.0",
     "shiki": "0.14.5",
     "tslib": "^2.6.2"
   },

packages/kit-headless/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@qwik-ui/utils": "workspace:*",
     "@floating-ui/dom": "^1.0.10",
-    "body-scroll-lock": "^4.0.0-beta.0",
+    "body-scroll-lock-upgrade": "1.1.0",
     "country-list-json": "^1.1.0",
     "focus-trap": "^7.5.3",
     "libphonenumber-js": "^1.10.43"

packages/kit-headless/src/components/modal/modal-behavior.ts

@@ -1,4 +1,3 @@
-import { QwikMouseEvent } from '@builder.io/qwik';
 import { FocusTrap, createFocusTrap } from 'focus-trap';
 
 export type WidthState = {
@@ -54,7 +53,7 @@ export async function closeModal(modal: HTMLDialogElement) {
  */
 export function wasModalBackdropClicked(
   modal: HTMLDialogElement | undefined,
-  clickEvent: QwikMouseEvent,
+  clickEvent: MouseEvent,
 ): boolean {
   if (!modal) {
     return false;

packages/kit-headless/src/components/modal/modal.tsx

@@ -2,7 +2,6 @@ import {
   $,
   QRL,
   QwikIntrinsicElements,
-  QwikMouseEvent,
   Signal,
   Slot,
   component$,
@@ -24,7 +23,6 @@ import {
 import { disableBodyScroll } from 'body-scroll-lock-upgrade';
 
 import styles from './modal.css?inline';
-import { isServer } from '@builder.io/qwik/build';
 
 export type ModalProps = Omit<QwikIntrinsicElements['dialog'], 'open'> & {
   onShow$?: QRL<() => void>;
@@ -37,7 +35,6 @@ export type ModalProps = Omit<QwikIntrinsicElements['dialog'], 'open'> & {
 export const Modal = component$((props: ModalProps) => {
   useStyles$(styles);
   const modalRefSig = useSignal<HTMLDialogElement>();
-  const scrollPositionSig = useSignal<number>(0);
 
   const { 'bind:show': showSig } = props;
 
@@ -76,15 +73,7 @@ export const Modal = component$((props: ModalProps) => {
     });
   });
 
-  useTask$(({ track }) => {
-    track(() => scrollPositionSig.value);
-
-    if (isServer) return;
-
-    document.documentElement.scrollTop = scrollPositionSig.value;
-  });
-
-  const closeOnBackdropClick$ = $((event: QwikMouseEvent) => {
+  const closeOnBackdropClick$ = $((event: MouseEvent) => {
     if (props.alert === true || props.closeOnBackdropClick === false) {
       return;
     }