@dmsi/wedgekit-react 0.0.851 → 0.0.853

package/dist/{chunk-ILHEM6BK.js → chunk-T7NSOCGM.js}

@@ -1741,7 +1741,7 @@ function CalendarPane({
 var CalendarRange_default = CalendarRange;
 
 // src/components/DateInput.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DateInput = (_a) => {
   var _b = _a, {
     id,
@@ -1823,17 +1823,6 @@ var DateInput = (_a) => {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   });
-  useEffect3(() => {
-    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);
@@ -1935,34 +1924,56 @@ var DateInput = (_a) => {
       })
     ),
     visible && !readOnly && createPortal(
-      /* @__PURE__ */ jsx9(
-        "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__ */ jsx9(
-            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__ */ jsxs7(Fragment, { children: [
+        /* @__PURE__ */ jsx9(
+          "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__ */ jsx9(
+          "div",
+          {
+            ref: (el) => {
+              popoverRef.current = el;
+            },
+            className: "absolute z-50 bg-white",
+            style: {
+              top: `${calendarPosition.top + 4}px`,
+              left: `${calendarPosition.left}px`
+            },
+            children: /* @__PURE__ */ jsx9(
+              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/CalendarRange.cjs

@@ -4502,17 +4502,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);
@@ -4614,34 +4603,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/CalendarRange.css

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

package/dist/components/CalendarRange.js

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

package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.cjs

@@ -4935,17 +4935,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);
@@ -5047,34 +5036,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/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.css

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

package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.js

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

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

@@ -4857,17 +4857,6 @@ var DateInput = (_a) => {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   });
-  (0, import_react19.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);
@@ -4969,34 +4958,56 @@ var DateInput = (_a) => {
       })
     ),
     visible && !readOnly && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.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_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.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_runtime23.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/ColumnSelectorHeaderCell/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/ColumnSelectorHeaderCell/index.js

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

package/dist/components/DataGrid/PinnedColumns.cjs

@@ -4702,17 +4702,6 @@ var DateInput = (_a) => {
       document.removeEventListener("keydown", handleKeyDown2);
     };
   });
-  (0, import_react18.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);
@@ -4814,34 +4803,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/PinnedColumns.css

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

package/dist/components/DataGrid/PinnedColumns.js

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