@dmsi/wedgekit-react 0.0.851 → 0.0.853

package/dist/components/index.cjs

@@ -4997,17 +4997,6 @@ var DateInput = (_a) => {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   });
-  (0, import_react21.useEffect)(() => {
-    const handleClickOutside = (event) => {
-      if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
-        setVisible(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
   function handleDateChange(fromValue) {
     onChange(fromValue);
     setVisible(false);
@@ -5109,34 +5098,56 @@ var DateInput = (_a) => {
       })
     ),
     visible && !readOnly && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-        "div",
-        {
-          ref: (el) => {
-            popoverRef.current = el;
-          },
-          className: "absolute z-40 bg-white",
-          style: {
-            top: `${calendarPosition.top + 4}px`,
-            left: `${calendarPosition.left}px`,
-            minWidth: `${calendarPosition.width}px`
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            CalendarRange,
-            {
-              id: id ? `${id}-calendar` : void 0,
-              testid: testid ? `${testid}-calendar` : void 0,
-              from,
-              to: to || from,
-              onChange: handleDateChange,
-              cardStyle: true,
-              mode: "single",
-              disableRange: true,
-              isDateAvailable
-            }
-          )
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "div",
+          {
+            className: "fixed inset-0 z-30",
+            onClick: () => setVisible(false),
+            onMouseDown: (e) => {
+              e.preventDefault();
+            },
+            onWheel: (e) => {
+              var _a2;
+              const scrollableParent = (_a2 = document.scrollingElement) != null ? _a2 : document.documentElement;
+              scrollableParent.scrollTop += e.deltaY;
+              scrollableParent.scrollLeft += e.deltaX;
+            },
+            onTouchMove: (e) => {
+              e.stopPropagation();
+            },
+            style: { touchAction: "pan-y pan-x" },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "div",
+          {
+            ref: (el) => {
+              popoverRef.current = el;
+            },
+            className: "absolute z-50 bg-white",
+            style: {
+              top: `${calendarPosition.top + 4}px`,
+              left: `${calendarPosition.left}px`
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              CalendarRange,
+              {
+                id: id ? `${id}-calendar` : void 0,
+                testid: testid ? `${testid}-calendar` : void 0,
+                from,
+                to: to || from,
+                onChange: handleDateChange,
+                cardStyle: true,
+                mode: "single",
+                disableRange: true,
+                isDateAvailable
+              }
+            )
+          }
+        )
+      ] }),
       findDocumentRoot(popoverRef.current)
     )
   ] });

package/dist/components/index.css

@@ -599,6 +599,9 @@
   .z-20 {
     z-index: 20;
   }
+  .z-30 {
+    z-index: 30;
+  }
   .z-40 {
     z-index: 40;
   }

package/dist/components/index.js

@@ -2,7 +2,7 @@ import {
   DataGrid,
   DateInput,
   MobileDataGrid
-} from "../chunk-ILHEM6BK.js";
+} from "../chunk-T7NSOCGM.js";
 import "../chunk-WJJB7IJZ.js";
 import "../chunk-Q4YDNW7N.js";
 import "../chunk-M7INAUAJ.js";

package/dist/index.css

@@ -577,6 +577,9 @@
   .z-20 {
     z-index: 20;
   }
+  .z-30 {
+    z-index: 30;
+  }
   .z-40 {
     z-index: 40;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.851",
+  "version": "0.0.853",
   "type": "module",
   "scripts": {
     "build": "tsup",