@dmsi/wedgekit-react 0.0.28 → 0.0.30

package/dist/components/DateInput.cjs

@@ -774,11 +774,20 @@ function CalendarRange({
 }) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const parseDate = (d) => {
-    if (!d) return void 0;
-    if (typeof d === "number")
-      return import_polyfill.Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
-    if (typeof d === "string") return import_polyfill.Temporal.PlainDate.from(d);
-    return void 0;
+    if (!d) {
+      return void 0;
+    }
+    try {
+      if (typeof d === "number") {
+        return import_polyfill.Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
+      }
+      if (typeof d === "string") {
+        return import_polyfill.Temporal.PlainDate.from(d);
+      }
+      return void 0;
+    } catch (error) {
+      return import_polyfill.Temporal.Now.plainDateISO();
+    }
   };
   const fromDate = parseDate(from);
   const toDate = parseDate(to);
@@ -789,6 +798,20 @@ function CalendarRange({
   const [selecting, setSelecting] = (0, import_react2.useState)("from");
   const [pendingFrom, setPendingFrom] = (0, import_react2.useState)(void 0);
   const [hoveredDate, setHoveredDate] = (0, import_react2.useState)(void 0);
+  (0, import_react2.useEffect)(() => {
+    if (fromDate) {
+      setBaseMonth(fromDate.with({ day: 1 }));
+    } else if (toDate) {
+      setBaseMonth(toDate.with({ day: 1 }));
+    }
+  }, [from, to]);
+  (0, import_react2.useEffect)(() => {
+    if (fromDate && toDate) {
+      setSelecting("from");
+      setPendingFrom(void 0);
+      setHoveredDate(void 0);
+    }
+  }, [from, to]);
   function getMonthData(monthOffset) {
     const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });
     const days = monthDate.daysInMonth;
@@ -1002,6 +1025,117 @@ function findDocumentRoot(element) {
   return window.document.body;
 }
 
+// src/utils/date.ts
+function parseInputDate(input) {
+  const match = input.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (!match) {
+    return null;
+  }
+  const [, month, day, year] = match;
+  const paddedMonth = month.padStart(2, "0");
+  const paddedDay = day.padStart(2, "0");
+  return `${year}-${paddedMonth}-${paddedDay}`;
+}
+function isValidDate(dateString) {
+  const date = new Date(dateString);
+  return date instanceof Date && !isNaN(date.getTime()) && dateString === date.toISOString().split("T")[0];
+}
+function formatInputValue(value) {
+  const digits = value.replace(/\D/g, "");
+  if (digits.length < 2) {
+    return digits;
+  }
+  if (digits.length >= 4) {
+    return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
+  }
+  return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+}
+function isDigit(character) {
+  return /\d/.test(character);
+}
+function isSlash(character) {
+  return character === "/";
+}
+function countDigitsUpToCursor(value, cursorPosition) {
+  let digitCount = 0;
+  for (let i = 0; i < cursorPosition && i < value.length; i++) {
+    if (!isDigit(value[i])) {
+      continue;
+    }
+    digitCount++;
+  }
+  return digitCount;
+}
+function findPositionAfterDigitCount(formattedValue, targetDigitCount) {
+  let currentDigitCount = 0;
+  for (let i = 0; i < formattedValue.length; i++) {
+    if (!isDigit(formattedValue[i])) {
+      continue;
+    }
+    currentDigitCount++;
+    if (currentDigitCount !== targetDigitCount) {
+      continue;
+    }
+    const positionAfterDigit = i + 1;
+    const nextCharacter = formattedValue[positionAfterDigit];
+    if (nextCharacter && isSlash(nextCharacter)) {
+      return positionAfterDigit + 1;
+    }
+    return positionAfterDigit;
+  }
+  return formattedValue.length;
+}
+function calculateCursorPosition(originalValue, formattedValue, originalPosition) {
+  const targetDigitCount = countDigitsUpToCursor(originalValue, originalPosition);
+  const newPosition = findPositionAfterDigitCount(formattedValue, targetDigitCount);
+  return Math.min(newPosition, formattedValue.length);
+}
+function parseDateParts(dateString) {
+  const [yearStr, monthStr, dayStr] = dateString.split("-");
+  if (!yearStr || !monthStr || !dayStr) {
+    return null;
+  }
+  const year = parseInt(yearStr, 10);
+  const month = parseInt(monthStr, 10);
+  const day = parseInt(dayStr, 10);
+  if (isNaN(year) || isNaN(month) || isNaN(day)) {
+    return null;
+  }
+  return { year, month, day };
+}
+function isValidDateRange(month, day) {
+  if (month < 1 || month > 12) {
+    return false;
+  }
+  if (day < 1 || day > 31) {
+    return false;
+  }
+  return true;
+}
+function formatDatePartsToDisplay(year, month, day) {
+  const paddedMonth = month.toString().padStart(2, "0");
+  const paddedDay = day.toString().padStart(2, "0");
+  return `${paddedMonth}/${paddedDay}/${year}`;
+}
+function formatDate(date) {
+  if (!date) {
+    return "";
+  }
+  try {
+    const dateParts = parseDateParts(date);
+    if (!dateParts) {
+      return "";
+    }
+    const { year, month, day } = dateParts;
+    if (!isValidDateRange(month, day)) {
+      return "";
+    }
+    return formatDatePartsToDisplay(year, month, day);
+  } catch (error) {
+    return "";
+  }
+}
+
 // src/components/DateInput.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var DateInput = (_a) => {
@@ -1023,6 +1157,8 @@ var DateInput = (_a) => {
     "label"
   ]);
   const [visible, setVisible] = (0, import_react3.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react3.useState)("");
+  const [isTyping, setIsTyping] = (0, import_react3.useState)(false);
   const popoverRef = (0, import_react3.useRef)(null);
   const triggerRef = (0, import_react3.useRef)(null);
   const [calendarPosition, setCalendarPosition] = (0, import_react3.useState)({
@@ -1031,17 +1167,23 @@ var DateInput = (_a) => {
     width: 0
   });
   const [from, to] = [value, ""];
+  (0, import_react3.useEffect)(() => {
+    if (!isTyping) {
+      setInputValue(formatDisplayValue(from));
+    }
+  }, [from, isTyping]);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible]);
   const updatePosition = () => {
     if (triggerRef.current) {
-      requestAnimationFrame(() => {
-        if (triggerRef.current) {
-          const rect = triggerRef.current.getBoundingClientRect();
-          setCalendarPosition({
-            top: rect.bottom + window.scrollY,
-            left: rect.left + window.scrollX,
-            width: rect.width
-          });
-        }
+      const rect = triggerRef.current.getBoundingClientRect();
+      setCalendarPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width
       });
     }
   };
@@ -1058,16 +1200,16 @@ var DateInput = (_a) => {
     };
   }, []);
   (0, import_react3.useEffect)(() => {
-    const handleKeyDown = (event) => {
+    const handleKeyDown2 = (event) => {
       var _a2;
       if (event.key === "Escape" && popoverRef.current) {
         setVisible(false);
         (_a2 = triggerRef.current) == null ? void 0 : _a2.blur();
       }
     };
-    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown2);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown2);
     };
   });
   (0, import_react3.useEffect)(() => {
@@ -1084,21 +1226,69 @@ var DateInput = (_a) => {
   function handleDateChange(fromValue) {
     onChange(fromValue);
     setVisible(false);
+    setIsTyping(false);
   }
   const handleFocus = () => {
     if (readOnly) return;
     setVisible(true);
-    updatePosition();
   };
-  function formatDisplayValue(from2) {
-    if (!from2) return "";
-    return formatDate(from2 != null ? from2 : "");
-  }
-  function formatDate(date) {
-    if (!date) return "";
-    const [y, m, d] = date.split("-");
-    return `${m}/${d}/${y}`;
-  }
+  const handleClick = () => {
+    handleFocus();
+  };
+  const handleInputChange = (event) => {
+    if (readOnly) return;
+    const rawValue = event.target.value;
+    const cursorPosition = event.target.selectionStart || 0;
+    setIsTyping(true);
+    const formattedValue = formatInputValue(rawValue);
+    setInputValue(formattedValue);
+    requestAnimationFrame(() => {
+      if (triggerRef.current) {
+        const newPosition = calculateCursorPosition(rawValue, formattedValue, cursorPosition);
+        triggerRef.current.setSelectionRange(newPosition, newPosition);
+      }
+    });
+    const parsedDate = parseInputDate(formattedValue);
+    if (parsedDate && isValidDate(parsedDate)) {
+      onChange(parsedDate);
+    }
+  };
+  const handleBlur = () => {
+    setIsTyping(false);
+    const parsedDate = parseInputDate(inputValue);
+    if (!parsedDate || !isValidDate(parsedDate)) {
+      setInputValue(formatDisplayValue(from));
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Backspace") {
+      const input = event.target;
+      const cursorPosition = input.selectionStart || 0;
+      const value2 = input.value;
+      if (cursorPosition > 0 && value2[cursorPosition - 1] === "/") {
+        event.preventDefault();
+        const newValue = value2.slice(0, cursorPosition - 2) + value2.slice(cursorPosition);
+        const formattedValue = formatInputValue(newValue);
+        setInputValue(formattedValue);
+        requestAnimationFrame(() => {
+          if (triggerRef.current) {
+            const newPosition = Math.max(0, cursorPosition - 2);
+            triggerRef.current.setSelectionRange(newPosition, newPosition);
+          }
+        });
+        setIsTyping(true);
+        return;
+      }
+    }
+    if (event.key === "Enter") {
+      const parsedDate = parseInputDate(inputValue);
+      if (parsedDate && isValidDate(parsedDate)) {
+        onChange(parsedDate);
+        setVisible(false);
+        setIsTyping(false);
+      }
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       InputBase,
@@ -1108,14 +1298,16 @@ var DateInput = (_a) => {
           triggerRef.current = el;
         }
       }, props), {
-        value: formatDisplayValue(from),
+        value: inputValue,
         placeholder,
         disabled,
         readOnly,
         after: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "calendar_month" }),
         onFocus: handleFocus,
-        onChange: () => {
-        },
+        onClick: handleClick,
+        onChange: handleInputChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
         label
       })
     ),
@@ -1151,6 +1343,15 @@ var DateInput = (_a) => {
   ] });
 };
 DateInput.displayName = "DateInput";
+function formatDisplayValue(from) {
+  if (!from) {
+    return "";
+  }
+  if (!isValidDate(from)) {
+    return "";
+  }
+  return formatDate(from);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DateInput

package/dist/components/DateInput.js

@@ -1,3 +1,10 @@
+import {
+  calculateCursorPosition,
+  formatDate,
+  formatInputValue,
+  isValidDate,
+  parseInputDate
+} from "../chunk-KHQX42T7.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";
@@ -7,7 +14,7 @@ import {
 import "../chunk-S5K22XTH.js";
 import {
   CalendarRange
-} from "../chunk-OUSNH76S.js";
+} from "../chunk-PCCJ7L3N.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -19,7 +26,7 @@ import {
 } from "../chunk-ORMEWXMH.js";
 
 // src/components/DateInput.tsx
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DateInput = (_a) => {
@@ -41,6 +48,8 @@ var DateInput = (_a) => {
     "label"
   ]);
   const [visible, setVisible] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
   const popoverRef = useRef(null);
   const triggerRef = useRef(null);
   const [calendarPosition, setCalendarPosition] = useState({
@@ -49,17 +58,23 @@ var DateInput = (_a) => {
     width: 0
   });
   const [from, to] = [value, ""];
+  useEffect(() => {
+    if (!isTyping) {
+      setInputValue(formatDisplayValue(from));
+    }
+  }, [from, isTyping]);
+  useLayoutEffect(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible]);
   const updatePosition = () => {
     if (triggerRef.current) {
-      requestAnimationFrame(() => {
-        if (triggerRef.current) {
-          const rect = triggerRef.current.getBoundingClientRect();
-          setCalendarPosition({
-            top: rect.bottom + window.scrollY,
-            left: rect.left + window.scrollX,
-            width: rect.width
-          });
-        }
+      const rect = triggerRef.current.getBoundingClientRect();
+      setCalendarPosition({
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        width: rect.width
       });
     }
   };
@@ -76,16 +91,16 @@ var DateInput = (_a) => {
     };
   }, []);
   useEffect(() => {
-    const handleKeyDown = (event) => {
+    const handleKeyDown2 = (event) => {
       var _a2;
       if (event.key === "Escape" && popoverRef.current) {
         setVisible(false);
         (_a2 = triggerRef.current) == null ? void 0 : _a2.blur();
       }
     };
-    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown2);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown2);
     };
   });
   useEffect(() => {
@@ -102,21 +117,69 @@ var DateInput = (_a) => {
   function handleDateChange(fromValue) {
     onChange(fromValue);
     setVisible(false);
+    setIsTyping(false);
   }
   const handleFocus = () => {
     if (readOnly) return;
     setVisible(true);
-    updatePosition();
   };
-  function formatDisplayValue(from2) {
-    if (!from2) return "";
-    return formatDate(from2 != null ? from2 : "");
-  }
-  function formatDate(date) {
-    if (!date) return "";
-    const [y, m, d] = date.split("-");
-    return `${m}/${d}/${y}`;
-  }
+  const handleClick = () => {
+    handleFocus();
+  };
+  const handleInputChange = (event) => {
+    if (readOnly) return;
+    const rawValue = event.target.value;
+    const cursorPosition = event.target.selectionStart || 0;
+    setIsTyping(true);
+    const formattedValue = formatInputValue(rawValue);
+    setInputValue(formattedValue);
+    requestAnimationFrame(() => {
+      if (triggerRef.current) {
+        const newPosition = calculateCursorPosition(rawValue, formattedValue, cursorPosition);
+        triggerRef.current.setSelectionRange(newPosition, newPosition);
+      }
+    });
+    const parsedDate = parseInputDate(formattedValue);
+    if (parsedDate && isValidDate(parsedDate)) {
+      onChange(parsedDate);
+    }
+  };
+  const handleBlur = () => {
+    setIsTyping(false);
+    const parsedDate = parseInputDate(inputValue);
+    if (!parsedDate || !isValidDate(parsedDate)) {
+      setInputValue(formatDisplayValue(from));
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Backspace") {
+      const input = event.target;
+      const cursorPosition = input.selectionStart || 0;
+      const value2 = input.value;
+      if (cursorPosition > 0 && value2[cursorPosition - 1] === "/") {
+        event.preventDefault();
+        const newValue = value2.slice(0, cursorPosition - 2) + value2.slice(cursorPosition);
+        const formattedValue = formatInputValue(newValue);
+        setInputValue(formattedValue);
+        requestAnimationFrame(() => {
+          if (triggerRef.current) {
+            const newPosition = Math.max(0, cursorPosition - 2);
+            triggerRef.current.setSelectionRange(newPosition, newPosition);
+          }
+        });
+        setIsTyping(true);
+        return;
+      }
+    }
+    if (event.key === "Enter") {
+      const parsedDate = parseInputDate(inputValue);
+      if (parsedDate && isValidDate(parsedDate)) {
+        onChange(parsedDate);
+        setVisible(false);
+        setIsTyping(false);
+      }
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsx(
       InputBase,
@@ -126,14 +189,16 @@ var DateInput = (_a) => {
           triggerRef.current = el;
         }
       }, props), {
-        value: formatDisplayValue(from),
+        value: inputValue,
         placeholder,
         disabled,
         readOnly,
         after: /* @__PURE__ */ jsx(Icon, { name: "calendar_month" }),
         onFocus: handleFocus,
-        onChange: () => {
-        },
+        onClick: handleClick,
+        onChange: handleInputChange,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
         label
       })
     ),
@@ -169,6 +234,15 @@ var DateInput = (_a) => {
   ] });
 };
 DateInput.displayName = "DateInput";
+function formatDisplayValue(from) {
+  if (!from) {
+    return "";
+  }
+  if (!isValidDate(from)) {
+    return "";
+  }
+  return formatDate(from);
+}
 export {
   DateInput
 };