@scripso-homepad/ui 0.4.38 → 0.4.39

package/dist/web/index.cjs

@@ -31201,6 +31201,26 @@ var styles3 = reactNative.StyleSheet.create({
     flexShrink: 0
   }
 });
+function useBackdropDismiss(onDismiss, enabled = true) {
+  const pointerDownOnBackdropRef = react.useRef(false);
+  const onPointerDown = react.useCallback(
+    (event) => {
+      pointerDownOnBackdropRef.current = enabled && event.target === event.currentTarget;
+    },
+    [enabled]
+  );
+  const onClick = react.useCallback(
+    (event) => {
+      const shouldDismiss = enabled && pointerDownOnBackdropRef.current && event.target === event.currentTarget;
+      pointerDownOnBackdropRef.current = false;
+      if (shouldDismiss) {
+        onDismiss();
+      }
+    },
+    [enabled, onDismiss]
+  );
+  return { onPointerDown, onClick };
+}
 var footerAlignClasses = {
   left: "justify-start",
   center: "justify-center",
@@ -31229,6 +31249,7 @@ function Modal({
   contentClassName,
   buttonClassName
 }) {
+  const backdropDismiss = useBackdropDismiss(onCancel, closeOnBackdrop);
   react.useEffect(() => {
     if (!open) {
       return;
@@ -31257,11 +31278,8 @@ function 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();
-        }
-      } : void 0,
+      onPointerDown: backdropDismiss.onPointerDown,
+      onClick: backdropDismiss.onClick,
       role: "presentation",
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -31274,9 +31292,6 @@ 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();
-          },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("flex shrink-0", icon ? "items-center gap-2.5" : void 0), children: [
               icon ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -31396,6 +31411,7 @@ function Drawer({
   const [isPresent, setIsPresent] = react.useState(open);
   const [isAnimatedIn, setIsAnimatedIn] = react.useState(false);
   const [isTransformSettled, setIsTransformSettled] = react.useState(open);
+  const backdropDismiss = useBackdropDismiss(onClose);
   react.useEffect(() => {
     if (open) {
       setIsPresent(true);
@@ -31462,7 +31478,8 @@ 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
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -31798,6 +31815,7 @@ function ConfirmModal({
   containerClassName,
   buttonClassName
 }) {
+  const backdropDismiss = useBackdropDismiss(onCancel, closeOnBackdrop);
   react.useEffect(() => {
     if (!open) {
       return;
@@ -31823,7 +31841,8 @@ function ConfirmModal({
     "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 : void 0,
+      onPointerDown: backdropDismiss.onPointerDown,
+      onClick: backdropDismiss.onClick,
       role: "presentation",
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -31836,9 +31855,6 @@ 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();
-          },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-col items-center gap-3 text-center", children: [
               icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-14 items-center justify-center rounded-2xl bg-storm-gray-50 text-storm-gray-500", children: icon }) : null,
@@ -32007,6 +32023,7 @@ exports.getVisiblePageNumbers = getVisiblePageNumbers;
 exports.isNavItemActive = isNavItemActive;
 exports.runMutationWithToast = runMutationWithToast;
 exports.tableRowDisabledCellClassName = tableRowDisabledCellClassName;
+exports.useBackdropDismiss = useBackdropDismiss;
 exports.useMediaQuery = useMediaQuery;
 exports.useOnClickOutside = useOnClickOutside;
 //# sourceMappingURL=index.cjs.map