@dmsi/wedgekit-react 0.0.884 → 0.0.886

package/dist/components/DateInput.cjs

@@ -64,6 +64,7 @@ __export(DateInput_exports, {
 module.exports = __toCommonJS(DateInput_exports);
 var import_react43 = require("react");
 var import_react_dom4 = require("react-dom");
+var import_clsx44 = __toESM(require("clsx"), 1);
 
 // src/components/Input.tsx
 var import_react = require("react");
@@ -5920,10 +5921,12 @@ var DateInput = (_a) => {
   const popoverRef = (0, import_react43.useRef)(null);
   const triggerRef = (0, import_react43.useRef)(null);
   const rootRef = (0, import_react43.useRef)(null);
+  const isMobile = useMatchesMobile();
   const [calendarPosition, setCalendarPosition] = (0, import_react43.useState)({
     top: 0,
     left: 0,
-    width: 0
+    width: 0,
+    openAbove: false
   });
   const [from, to] = [value, ""];
   (0, import_react43.useEffect)(() => {
@@ -5939,11 +5942,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 });
     }
   };
   (0, import_react43.useEffect)(() => {
@@ -6026,7 +6046,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) {
@@ -6077,25 +6100,58 @@ var DateInput = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           "div",
           {
-            className: "fixed inset-0 z-30",
+            className: (0, import_clsx44.default)(
+              "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__ */ (0, import_jsx_runtime69.jsx)("div", { className: "min-h-full flex items-start justify-center py-4 px-2", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              "div",
+              {
+                ref: (el) => {
+                  popoverRef.current = el;
+                },
+                className: "bg-white rounded-base shadow-4 max-w-full",
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime69.jsx)(
+        !isMobile && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           "div",
           {
             ref: (el) => {
@@ -6103,7 +6159,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__ */ (0, import_jsx_runtime69.jsx)(

package/dist/components/DateInput.css

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

package/dist/components/DateInput.js

@@ -1,9 +1,9 @@
 import {
   DateInput
-} from "../chunk-E7XBOMT4.js";
+} from "../chunk-ZXP2GIWZ.js";
+import "../chunk-M7INAUAJ.js";
 import "../chunk-4DPSNQCM.js";
 import "../chunk-Q4YDNW7N.js";
-import "../chunk-M7INAUAJ.js";
 import "../chunk-KOKA2IJC.js";
 import "../chunk-MBZ55T2D.js";
 import "../chunk-2IKT6IHB.js";
@@ -15,8 +15,8 @@ import "../chunk-3N34VVYD.js";
 import "../chunk-B4AE3DCA.js";
 import "../chunk-FP3Y5JJN.js";
 import "../chunk-5IFPG6TS.js";
-import "../chunk-6EYMKEJ6.js";
 import "../chunk-AJ5M6MVX.js";
+import "../chunk-6EYMKEJ6.js";
 import "../chunk-YV5FS7NV.js";
 import "../chunk-Z2HPSFEQ.js";
 import "../chunk-AT4AWD6B.js";