@dmsi/wedgekit-react 0.0.851 → 0.0.853

package/dist/components/DateInput.cjs

@@ -5912,17 +5912,6 @@ var DateInput = (_a) => {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   });
-  (0, import_react40.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);
@@ -6024,34 +6013,56 @@ var DateInput = (_a) => {
       })
     ),
     visible && !readOnly && (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime67.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_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime67.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_runtime67.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/DateInput.css

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

package/dist/components/DateInput.js

@@ -1,6 +1,6 @@
 import {
   DateInput
-} from "../chunk-ILHEM6BK.js";
+} from "../chunk-T7NSOCGM.js";
 import "../chunk-WJJB7IJZ.js";
 import "../chunk-Q4YDNW7N.js";
 import "../chunk-M7INAUAJ.js";

package/dist/components/DateRangeInput.cjs

@@ -4510,17 +4510,6 @@ var DateInput = (_a) => {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   });
-  (0, import_react20.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);
@@ -4622,34 +4611,56 @@ var DateInput = (_a) => {
       })
     ),
     visible && !readOnly && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.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_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.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_runtime24.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/DateRangeInput.css

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

package/dist/components/DateRangeInput.js

@@ -1,6 +1,6 @@
 import {
   CalendarRange
-} from "../chunk-ILHEM6BK.js";
+} from "../chunk-T7NSOCGM.js";
 import "../chunk-WJJB7IJZ.js";
 import "../chunk-Q4YDNW7N.js";
 import "../chunk-M7INAUAJ.js";

package/dist/components/MobileDataGrid/ColumnList.css

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

package/dist/components/MobileDataGrid/ColumnSelector/index.cjs

@@ -4963,17 +4963,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);
@@ -5075,34 +5064,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/MobileDataGrid/ColumnSelector/index.css

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

package/dist/components/MobileDataGrid/ColumnSelector/index.js

@@ -1,6 +1,6 @@
 import {
   ColumnSelector
-} from "../../../chunk-ILHEM6BK.js";
+} from "../../../chunk-T7NSOCGM.js";
 import "../../../chunk-WJJB7IJZ.js";
 import "../../../chunk-Q4YDNW7N.js";
 import "../../../chunk-M7INAUAJ.js";

package/dist/components/MobileDataGrid/MobileDataGridHeader.cjs

@@ -5270,17 +5270,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);
@@ -5382,34 +5371,56 @@ var DateInput = (_a) => {
       })
     ),
     visible && !readOnly && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.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_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.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_runtime28.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/MobileDataGrid/MobileDataGridHeader.css

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

package/dist/components/MobileDataGrid/MobileDataGridHeader.js

@@ -1,6 +1,6 @@
 import {
   MobileDataGridHeader
-} from "../../chunk-ILHEM6BK.js";
+} from "../../chunk-T7NSOCGM.js";
 import "../../chunk-WJJB7IJZ.js";
 import "../../chunk-Q4YDNW7N.js";
 import "../../chunk-M7INAUAJ.js";

package/dist/components/MobileDataGrid/index.cjs

@@ -5270,17 +5270,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);
@@ -5382,34 +5371,56 @@ var DateInput = (_a) => {
       })
     ),
     visible && !readOnly && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.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_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.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_runtime28.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/MobileDataGrid/index.css

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

package/dist/components/MobileDataGrid/index.js

@@ -1,6 +1,6 @@
 import {
   MobileDataGrid
-} from "../../chunk-ILHEM6BK.js";
+} from "../../chunk-T7NSOCGM.js";
 import "../../chunk-WJJB7IJZ.js";
 import "../../chunk-Q4YDNW7N.js";
 import "../../chunk-M7INAUAJ.js";