@bigbinary/neeto-atoms 1.0.37 → 1.0.38

package/dist/{DatePicker-CCN3b1oz.js → DatePicker-IrQUHqdL.js}

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useState, useCallback, useEffect } from 'react';
+import { forwardRef, useId, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
 import { g as getDefaultOptions$1, t as toDate, c as constructFrom, m as millisecondsInHour, b as millisecondsInMinute, d as millisecondsInSecond, e as getWeekYear, s as startOfWeek, f as startOfISOWeek, h as getWeek, i as getISOWeek, j as addDays, k as getTimezoneOffsetInMilliseconds, l as enUS, n as longFormatters, o as isProtectedWeekYearToken, w as warnOrThrowProtectedError, p as isProtectedDayOfYearToken, q as format, C as Calendar$1 } from './Calendar-CjOBwDbx.js';
 import { Popover, PopoverAnchor, PopoverContent } from './primitives/Popover.js';
 import { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from './primitives/Field.js';
 import { c as cn } from './utils-BJnb9o5c.js';
+import { i as isFixedWidthFormat, c as buildRangeMaskTemplate, b as buildMaskTemplate, d as dateToTimeValue, T as TimePickerPanel, a as applyMask } from './TimePickerPanel-CgEbjExH.js';
 import { Button } from './primitives/Button.js';
-import { d as dateToTimeValue, T as TimePickerPanel } from './TimePickerPanel-DAhz3B2d.js';
 import { c as createLucideIcon } from './createLucideIcon-C8ycilSN.js';
 import { X } from './x-_o2T3n6D.js';
 
@@ -2714,6 +2714,16 @@ const applyTimeToDate = (date, time) => {
   return result;
 };
 const getDisplayFormat = (dateFormat, timeFormat, showTime) => showTime ? `${dateFormat} ${timeFormat}` : dateFormat;
+const isDatePartComplete = (part, maskEnabled, singleDateLen) => maskEnabled ? part.length >= singleDateLen : part.length > 0;
+const parseRangeText = (text, displayFormat, maskEnabled, singleDateLen) => {
+  const parts = text.split(" - ");
+  if (parts.length !== 2) return null;
+  if (!isDatePartComplete(parts[0], maskEnabled, singleDateLen) || !isDatePartComplete(parts[1], maskEnabled, singleDateLen))
+    return null;
+  const from = parseDate(parts[0], displayFormat);
+  const to = parseDate(parts[1], displayFormat);
+  return from && to ? [from, to] : null;
+};
 
 const TIMEZONE_OPTIONS = [
   { label: "Local", value: "" },
@@ -2809,6 +2819,8 @@ const DatePicker = forwardRef(
     const errorId = `error_${generatedId}`;
     const helpTextId = `helpText_${generatedId}`;
     const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const cursorPosRef = useRef(null);
     const popoverContentId = useRef(
       `datepicker-popover-${generatedId}`
     ).current;
@@ -2829,7 +2841,13 @@ const DatePicker = forwardRef(
     });
     const displayFormat = getDisplayFormat(dateFormat, timeFormat, showTime);
     const sizeConfig = SIZE_CONFIG[size];
-    const defaultPlaceholder = showTime ? `${dateFormat.toUpperCase()} ${timeFormat}` : dateFormat.toUpperCase();
+    const maskEnabled = isFixedWidthFormat(displayFormat);
+    const maskTemplate = useMemo(
+      () => maskEnabled ? type === "range" ? buildRangeMaskTemplate(displayFormat) : buildMaskTemplate(displayFormat) : null,
+      [displayFormat, type, maskEnabled]
+    );
+    const singlePlaceholder = showTime ? `${dateFormat.toUpperCase()} ${timeFormat}` : dateFormat.toUpperCase();
+    const defaultPlaceholder = type === "range" ? `${singlePlaceholder} - ${singlePlaceholder}` : singlePlaceholder;
     const getDisplayText = useCallback(() => {
       if (type === "range") {
         const rangeValue = currentValue;
@@ -2954,32 +2972,79 @@ const DatePicker = forwardRef(
       e.preventDefault();
       commitValue(null);
     };
+    useLayoutEffect(() => {
+      if (cursorPosRef.current !== null && inputRef.current && document.activeElement === inputRef.current) {
+        inputRef.current.setSelectionRange(
+          cursorPosRef.current,
+          cursorPosRef.current
+        );
+        cursorPosRef.current = null;
+      }
+    });
+    const singleDateLen = useMemo(
+      () => buildMaskTemplate(displayFormat).pattern.length,
+      [displayFormat]
+    );
+    const parseAndApplyRange = (text) => {
+      const parts = text.split(" - ");
+      if (!isDatePartComplete(parts[0] ?? "", maskEnabled, singleDateLen))
+        return;
+      const from = parseDate(parts[0], displayFormat);
+      if (from) setCalendarMonth(from);
+      const range = parseRangeText(
+        text,
+        displayFormat,
+        maskEnabled,
+        singleDateLen
+      );
+      if (range) setInternalValue(range);
+    };
     const handleInputChange = (e) => {
-      const text = e.target.value;
+      let text = e.target.value;
+      if (maskTemplate) {
+        const masked = applyMask(
+          text,
+          maskTemplate,
+          inputText,
+          e.target.selectionStart
+        );
+        text = masked.text;
+        cursorPosRef.current = masked.cursorPosition;
+      }
       setInputText(text);
-      if (type === "range") return;
+      if (type === "range") {
+        parseAndApplyRange(text);
+        return;
+      }
+      const isComplete = maskTemplate ? text.length >= maskTemplate.pattern.length : true;
+      if (!isComplete) return;
       const parsed = parseDate(text, displayFormat);
-      if (parsed) {
-        setCalendarMonth(parsed);
-        if (showTime || needConfirm) {
-          setPendingDate(parsed);
-          setPendingTime(dateToTimeValue(parsed));
-        } else {
-          setInternalValue(parsed);
-        }
+      if (!parsed) return;
+      setCalendarMonth(parsed);
+      if (showTime || needConfirm) {
+        setPendingDate(parsed);
+        setPendingTime(dateToTimeValue(parsed));
+      } else {
+        setInternalValue(parsed);
       }
     };
     const handleInputKeyDown = (e) => {
-      if (e.key === "Enter" && type !== "range") {
+      if (e.key === "Escape") return closePopover();
+      if (e.key !== "Enter") return;
+      if (type === "range") {
+        const range = parseRangeText(
+          inputText,
+          displayFormat,
+          maskEnabled,
+          singleDateLen
+        );
+        if (range) commitValue(range);
+      } else {
         const parsed = parseDate(inputText, displayFormat);
-        if (parsed) {
-          commitValue(parsed);
-        }
-        setOpen(false);
-        onOpenChange?.(false);
-      } else if (e.key === "Escape") {
-        closePopover();
+        if (parsed) commitValue(parsed);
       }
+      setOpen(false);
+      onOpenChange?.(false);
     };
     const handleInputFocus = () => {
       if (!open) openPopover();
@@ -3024,6 +3089,7 @@ const DatePicker = forwardRef(
             /* @__PURE__ */ jsx(
               "input",
               {
+                ref: inputRef,
                 type: "text",
                 disabled,
                 "aria-label": label || "Pick a date",
@@ -3091,6 +3157,7 @@ const DatePicker = forwardRef(
                   mode: "range",
                   numberOfMonths: 2,
                   captionLayout: "dropdown",
+                  className: "[&_[data-outside][data-selected=true]]:!bg-transparent [&_[data-outside][data-selected=true]]:after:!bg-transparent [&_[data-outside]_button]:!bg-transparent [&_[data-outside]_button]:!text-muted-foreground",
                   month: calendarMonth,
                   onMonthChange: setCalendarMonth,
                   selected: currentValue ? {
@@ -3163,4 +3230,4 @@ const DatePicker = forwardRef(
 DatePicker.displayName = "DatePicker";
 
 export { DatePicker as D };
-//# sourceMappingURL=DatePicker-CCN3b1oz.js.map
+//# sourceMappingURL=DatePicker-IrQUHqdL.js.map