@dmsi/wedgekit-react 0.0.883 → 0.0.885

package/dist/{chunk-E7XBOMT4.js → chunk-4MF6JSE7.js}

@@ -49,6 +49,9 @@ import {
   useInfiniteScroll,
   useTableLayout
 } from "./chunk-KLH67DTH.js";
+import {
+  useMatchesMobile
+} from "./chunk-WVGXD7HT.js";
 import {
   findDocumentRoot
 } from "./chunk-VXWSAIB5.js";
@@ -92,7 +95,7 @@ import {
 } from "./chunk-ORMEWXMH.js";
 
 // src/components/DataGrid/utils.tsx
-import clsx6 from "clsx";
+import clsx7 from "clsx";
 
 // src/components/DataGrid/index.tsx
 import React3, {
@@ -1272,6 +1275,7 @@ var DataGrid_default = DataGrid;
 // src/components/DateInput.tsx
 import { useRef as useRef3, useEffect as useEffect3, useState as useState5, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
+import clsx6 from "clsx";
 
 // src/components/CalendarRange.tsx
 import clsx5 from "clsx";
@@ -1830,10 +1834,12 @@ var DateInput = (_a) => {
   const popoverRef = useRef3(null);
   const triggerRef = useRef3(null);
   const rootRef = useRef3(null);
+  const isMobile = useMatchesMobile();
   const [calendarPosition, setCalendarPosition] = useState5({
     top: 0,
     left: 0,
-    width: 0
+    width: 0,
+    openAbove: false
   });
   const [from, to] = [value, ""];
   useEffect3(() => {
@@ -1849,11 +1855,28 @@ var DateInput = (_a) => {
   const updatePosition = () => {
     if (rootRef.current) {
       const rect = rootRef.current.getBoundingClientRect();
-      setCalendarPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-        width: rect.width
-      });
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const calendarWidth = 340;
+      const calendarHeight = 400;
+      let viewportLeft = rect.left;
+      if (viewportLeft + calendarWidth > viewportWidth) {
+        viewportLeft = rect.right - calendarWidth;
+        if (viewportLeft < 0) {
+          viewportLeft = Math.max(0, (viewportWidth - calendarWidth) / 2);
+        }
+      }
+      const left = viewportLeft + window.scrollX;
+      const spaceBelow = viewportHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      const openAbove = spaceBelow < calendarHeight && spaceAbove > spaceBelow;
+      let top;
+      if (openAbove) {
+        top = rect.top + window.scrollY - calendarHeight - 4;
+      } else {
+        top = rect.bottom + window.scrollY + 4;
+      }
+      setCalendarPosition({ top, left, width: rect.width, openAbove });
     }
   };
   useEffect3(() => {
@@ -1936,7 +1959,10 @@ var DateInput = (_a) => {
       if (cursorPosition > 0 && value2[cursorPosition - 1] === sep) {
         event.preventDefault();
         const newValue = value2.slice(0, cursorPosition - 2) + value2.slice(cursorPosition);
-        const formattedValue = formatInputValueWithDashes(newValue, dateInDashes);
+        const formattedValue = formatInputValueWithDashes(
+          newValue,
+          dateInDashes
+        );
         setInputValue(formattedValue);
         requestAnimationFrame(() => {
           if (triggerRef.current) {
@@ -1987,25 +2013,58 @@ var DateInput = (_a) => {
         /* @__PURE__ */ jsx9(
           "div",
           {
-            className: "fixed inset-0 z-30",
+            className: clsx6(
+              "fixed inset-0 z-50",
+              isMobile && "overflow-y-auto bg-neutral-600/50"
+            ),
             onClick: () => setVisible(false),
             onMouseDown: (e) => {
-              e.preventDefault();
+              if (!isMobile) {
+                e.preventDefault();
+              }
             },
             onWheel: (e) => {
               var _a2;
-              const scrollableParent = (_a2 = document.scrollingElement) != null ? _a2 : document.documentElement;
-              scrollableParent.scrollTop += e.deltaY;
-              scrollableParent.scrollLeft += e.deltaX;
+              if (!isMobile) {
+                const scrollableParent = (_a2 = document.scrollingElement) != null ? _a2 : document.documentElement;
+                scrollableParent.scrollTop += e.deltaY;
+                scrollableParent.scrollLeft += e.deltaX;
+              }
             },
             onTouchMove: (e) => {
-              e.stopPropagation();
+              if (!isMobile) {
+                e.stopPropagation();
+              }
             },
-            style: { touchAction: "pan-y pan-x" },
-            "aria-hidden": "true"
+            style: { touchAction: isMobile ? "auto" : "pan-y pan-x" },
+            "aria-hidden": "true",
+            children: isMobile && /* @__PURE__ */ jsx9("div", { className: "min-h-full flex items-start justify-center py-4 px-2", children: /* @__PURE__ */ jsx9(
+              "div",
+              {
+                ref: (el) => {
+                  popoverRef.current = el;
+                },
+                className: "bg-white rounded-base shadow-4 max-w-full",
+                onClick: (e) => e.stopPropagation(),
+                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__ */ jsx9(
+        !isMobile && /* @__PURE__ */ jsx9(
           "div",
           {
             ref: (el) => {
@@ -2013,7 +2072,7 @@ var DateInput = (_a) => {
             },
             className: "absolute z-50 bg-white",
             style: {
-              top: `${calendarPosition.top + 4}px`,
+              top: `${calendarPosition.top}px`,
               left: `${calendarPosition.left}px`
             },
             children: /* @__PURE__ */ jsx9(
@@ -2293,7 +2352,7 @@ function MobileDataGrid(props) {
 // src/components/DataGrid/utils.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
 function getSortIcon(sort, nextSort = false) {
-  const iconClassName = clsx6(
+  const iconClassName = clsx7(
     "text-icon-on-action-primary-normal",
     nextSort && "hidden group-hover:block"
   );