@scripso-homepad/ui 0.4.38 → 0.4.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.38",
+  "version": "0.4.39",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/web/components/ConfirmModal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, type ReactNode } from 'react';
 
 import { Button } from '../../components/Button';
+import { useBackdropDismiss } from '../hooks/useBackdropDismiss';
 import { cn } from '../utils/cn';
 
 export type ConfirmModalProps = {
@@ -35,6 +36,8 @@ export function ConfirmModal({
   containerClassName,
   buttonClassName,
 }: ConfirmModalProps) {
+  const backdropDismiss = useBackdropDismiss(onCancel, closeOnBackdrop);
+
   useEffect(() => {
     if (!open) {
       return;
@@ -65,7 +68,8 @@ export function ConfirmModal({
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md bg-storm-gray-850/40"
-      onClick={closeOnBackdrop ? onCancel : undefined}
+      onPointerDown={backdropDismiss.onPointerDown}
+      onClick={backdropDismiss.onClick}
       role="presentation"
     >
       <div
@@ -77,9 +81,6 @@ export function ConfirmModal({
           'flex w-full max-w-md flex-col gap-8 rounded-3xl bg-white p-6 opacity-100 md:p-8',
           containerClassName,
         )}
-        onClick={(event) => {
-          event.stopPropagation();
-        }}
       >
         <header className="flex flex-col items-center gap-3 text-center">
           {icon ? (

package/src/web/components/Drawer.tsx

@@ -1,6 +1,7 @@
 import { X } from 'lucide-react';
 import { useEffect, useState, type ReactNode } from 'react';
 
+import { useBackdropDismiss } from '../hooks/useBackdropDismiss';
 import { cn } from '../utils/cn';
 
 import './drawer-scroll.css';
@@ -72,6 +73,7 @@ export function Drawer({
   const [isPresent, setIsPresent] = useState(open);
   const [isAnimatedIn, setIsAnimatedIn] = useState(false);
   const [isTransformSettled, setIsTransformSettled] = useState(open);
+  const backdropDismiss = useBackdropDismiss(onClose);
 
   useEffect(() => {
     if (open) {
@@ -151,7 +153,8 @@ export function Drawer({
           'absolute inset-0 z-0 cursor-pointer bg-storm-gray-850/40 backdrop-blur-[12px] transition-opacity duration-300 ease-in-out',
           isAnimatedIn ? 'opacity-100' : 'opacity-0',
         )}
-        onClick={onClose}
+        onPointerDown={backdropDismiss.onPointerDown}
+        onClick={backdropDismiss.onClick}
       />
 
       <aside

package/src/web/components/Modal.tsx

@@ -2,6 +2,7 @@ import { useEffect, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
 import { Button } from '../../components/Button';
+import { useBackdropDismiss } from '../hooks/useBackdropDismiss';
 import { cn } from '../utils/cn';
 import './drawer-scroll.css';
 
@@ -61,6 +62,8 @@ export function Modal({
   contentClassName,
   buttonClassName,
 }: ModalProps) {
+  const backdropDismiss = useBackdropDismiss(onCancel, closeOnBackdrop);
+
   useEffect(() => {
     if (!open) {
       return;
@@ -95,15 +98,8 @@ export function Modal({
   const modal = (
     <div
       className="fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40"
-      onClick={
-        closeOnBackdrop
-          ? (event) => {
-              if (event.target === event.currentTarget) {
-                onCancel();
-              }
-            }
-          : undefined
-      }
+      onPointerDown={backdropDismiss.onPointerDown}
+      onClick={backdropDismiss.onClick}
       role="presentation"
     >
       <div
@@ -115,9 +111,6 @@ export function Modal({
           'flex max-h-[min(90dvh,calc(100dvh-2rem))] w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6',
           containerClassName,
         )}
-        onClick={(event) => {
-          event.stopPropagation();
-        }}
       >
         <header className={cn('flex shrink-0', icon ? 'items-center gap-2.5' : undefined)}>
           {icon ? (

package/src/web/hooks/useBackdropDismiss.ts

@@ -0,0 +1,44 @@
+import { useCallback, useRef, type MouseEvent, type PointerEvent } from 'react';
+
+type BackdropDismissHandlers = {
+  onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+  onClick: (event: MouseEvent<HTMLElement>) => void;
+};
+
+/**
+ * Dismiss only on a true outside click: pointer must both press and release
+ * on the backdrop. Dragging from inside the dialog and releasing outside
+ * must not close.
+ */
+export function useBackdropDismiss(
+  onDismiss: () => void,
+  enabled = true,
+): BackdropDismissHandlers {
+  const pointerDownOnBackdropRef = useRef(false);
+
+  const onPointerDown = useCallback(
+    (event: PointerEvent<HTMLElement>) => {
+      pointerDownOnBackdropRef.current =
+        enabled && event.target === event.currentTarget;
+    },
+    [enabled],
+  );
+
+  const onClick = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      const shouldDismiss =
+        enabled &&
+        pointerDownOnBackdropRef.current &&
+        event.target === event.currentTarget;
+
+      pointerDownOnBackdropRef.current = false;
+
+      if (shouldDismiss) {
+        onDismiss();
+      }
+    },
+    [enabled, onDismiss],
+  );
+
+  return { onPointerDown, onClick };
+}

package/src/web/index.ts

@@ -128,6 +128,7 @@ export type { ConfirmModalProps } from './components/ConfirmModal';
 
 export { useMediaQuery } from './hooks/useMediaQuery';
 export { useOnClickOutside } from './hooks/useOnClickOutside';
+export { useBackdropDismiss } from './hooks/useBackdropDismiss';
 export { cn } from './utils/cn';
 
 export type {