add isPointNotInRect

src/material/BottomSheet.tsx

@@ -13,6 +13,7 @@ import {
   animateSlideInFromRight,
   animateSlideOutToRight,
 } from "~platform/anim";
+import { isPointNotInRect } from "~platform/dom";
 
 export type BottomSheetProps = {
   open?: boolean;
@@ -120,12 +121,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     event.stopPropagation();
     if (event.target !== event.currentTarget) return;
     const rect = event.currentTarget.getBoundingClientRect();
-    const isNotInDialog =
+    if (isPointNotInRect(rect, event.clientX, event.clientY)) {
-      event.clientY < rect.top ||
-      event.clientY > rect.bottom ||
-      event.clientX < rect.left ||
-      event.clientX > rect.right;
-    if (isNotInDialog) {
       props.onClose?.("backdrop");
     }
   };

src/platform/StackedRouter.tsx

@@ -19,6 +19,7 @@ import { animateSlideInFromRight, animateSlideOutToRight } from "./anim";
 import { ANIM_CURVE_DECELERATION, ANIM_CURVE_STD } from "~material/theme";
 import { makeEventListener } from "@solid-primitives/event-listener";
 import { useWindowSize } from "@solid-primitives/resize-observer";
+import { isPointNotInRect } from "./dom";
 
 export type StackedRouterProps = Omit<RouterProps, "url">;
 
@@ -173,12 +174,7 @@ function onDialogClick(
 ) {
   if (event.target !== event.currentTarget) return;
   const rect = event.currentTarget.getBoundingClientRect();
-  const isNotInDialog =
+  if (isPointNotInRect(rect, event.clientX, event.clientY)) {
-    event.clientY < rect.top ||
-    event.clientY > rect.bottom ||
-    event.clientX < rect.left ||
-    event.clientX > rect.right;
-  if (isNotInDialog) {
     onClose();
   }
 }

src/platform/dom.ts

@@ -0,0 +1,5 @@
+export function isPointNotInRect(rect: DOMRect, ptX: number, ptY: number) {
+  return (
+    ptY < rect.top || ptY > rect.bottom || ptX < rect.left || ptX > rect.right
+  );
+}