@dmsi/wedgekit-react 0.0.852 → 0.0.853

package/dist/components/DataGrid/TableBody/LoadingCell.cjs

@@ -4927,17 +4927,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);
@@ -5039,34 +5028,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/DataGrid/TableBody/LoadingCell.css

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

package/dist/components/DataGrid/TableBody/LoadingCell.js

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

package/dist/components/DataGrid/TableBody/TableBodyRow.cjs

@@ -4854,17 +4854,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);
@@ -4966,34 +4955,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/DataGrid/TableBody/TableBodyRow.css

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

package/dist/components/DataGrid/TableBody/TableBodyRow.js

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

package/dist/components/DataGrid/TableBody/index.cjs

@@ -4666,17 +4666,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);
@@ -4778,34 +4767,56 @@ var DateInput = (_a) => {
       })
     ),
     visible && !readOnly && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.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_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.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_runtime22.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/DataGrid/TableBody/index.css

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

package/dist/components/DataGrid/TableBody/index.js

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

package/dist/components/DataGrid/index.cjs

@@ -3798,17 +3798,6 @@ var DateInput = (_a) => {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   });
-  (0, import_react16.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);
@@ -3910,34 +3899,56 @@ var DateInput = (_a) => {
       })
     ),
     visible && !readOnly && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.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_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.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_runtime17.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/DataGrid/index.css

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

package/dist/components/DataGrid/index.js

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

package/dist/components/DataGrid/utils.cjs

@@ -4946,17 +4946,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);
@@ -5058,34 +5047,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/DataGrid/utils.css

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

package/dist/components/DataGrid/utils.js

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