@xsolla/xui-date-picker 0.184.0 → 0.185.0

package/web/index.js

@@ -36,7 +36,18 @@ __export(index_exports, {
   CalendarHeader: () => import_xui_calendar2.CalendarHeader,
   DatePicker: () => DatePicker,
   DualCalendar: () => import_xui_calendar2.DualCalendar,
-  formatDate: () => formatDate
+  buildSegmentedValue: () => buildSegmentedValue,
+  clampDatePart: () => clampDatePart,
+  datePartsFromDate: () => datePartsFromDate,
+  datePartsToDate: () => datePartsToDate,
+  daysInMonth: () => daysInMonth,
+  formatDate: () => formatDate,
+  getDateSegments: () => getDateSegments,
+  isDatePartsComplete: () => isDatePartsComplete,
+  isSegmentComplete: () => isSegmentComplete,
+  parseDateFormat: () => parseDateFormat,
+  stepDatePart: () => stepDatePart,
+  stepDateSegment: () => stepDateSegment
 });
 module.exports = __toCommonJS(index_exports);
 var import_xui_calendar2 = require("@xsolla/xui-calendar");
@@ -301,9 +312,257 @@ var isNative = false;
 
 // src/DatePicker.tsx
 var import_xui_input = require("@xsolla/xui-input");
-var import_date_fns = require("date-fns");
+var import_date_fns2 = require("date-fns");
 var import_xui_calendar = require("@xsolla/xui-calendar");
+
+// src/utils.ts
+var import_date_fns = require("date-fns");
+var locales = __toESM(require("date-fns/locale"));
+var defaultLocale = "enUS";
+function formatDate(date, formatStr, locale = defaultLocale) {
+  const localeObj = locales[locale] || locales[defaultLocale];
+  return (0, import_date_fns.format)(date, formatStr, {
+    locale: localeObj
+  });
+}
+var SEGMENT_WIDTH = {
+  day: 2,
+  month: 2,
+  year: 4
+};
+var SEGMENT_TOKEN = {
+  day: "dd",
+  month: "mm",
+  year: "yyyy"
+};
+function parseDateFormat(format2) {
+  const tokens = [];
+  let i = 0;
+  while (i < format2.length) {
+    const c = format2[i];
+    if (c === "d" || c === "M" || c === "y") {
+      while (i < format2.length && format2[i] === c) i++;
+      tokens.push({
+        kind: "segment",
+        type: c === "d" ? "day" : c === "M" ? "month" : "year"
+      });
+    } else {
+      let text = "";
+      while (i < format2.length && !"dMy".includes(format2[i])) {
+        text += format2[i];
+        i++;
+      }
+      tokens.push({ kind: "literal", text });
+    }
+  }
+  return tokens;
+}
+var EMPTY_PARTS = { day: null, month: null, year: null };
+function datePartsFromDate(date) {
+  if (!date) return { ...EMPTY_PARTS };
+  return {
+    day: date.getDate(),
+    month: date.getMonth() + 1,
+    year: date.getFullYear()
+  };
+}
+function datePartsToDate(parts) {
+  const { day, month, year } = parts;
+  if (day == null || month == null || year == null) return null;
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+function isDatePartsComplete(parts) {
+  return parts.day != null && parts.month != null && parts.year != null;
+}
+function clampDatePart(type, value, parts) {
+  if (type === "month") return Math.min(12, Math.max(1, value));
+  if (type === "year") return Math.max(1, value);
+  const year = parts.year ?? (/* @__PURE__ */ new Date()).getFullYear();
+  const monthIndex = (parts.month ?? (/* @__PURE__ */ new Date()).getMonth() + 1) - 1;
+  return Math.min(daysInMonth(year, monthIndex), Math.max(1, value));
+}
+function stepDatePart(type, current, delta, parts) {
+  if (type === "month") return ((current - 1 + delta) % 12 + 12) % 12 + 1;
+  if (type === "year") return Math.max(1, current + delta);
+  const year = parts.year ?? (/* @__PURE__ */ new Date()).getFullYear();
+  const monthIndex = (parts.month ?? (/* @__PURE__ */ new Date()).getMonth() + 1) - 1;
+  const dim = daysInMonth(year, monthIndex);
+  return ((current - 1 + delta) % dim + dim) % dim + 1;
+}
+function buildSegmentedValue(format2, parts, active) {
+  const tokens = parseDateFormat(format2);
+  let text = "";
+  const ranges = [];
+  for (const token of tokens) {
+    if (token.kind === "literal") {
+      text += token.text;
+      continue;
+    }
+    const { type } = token;
+    const width = SEGMENT_WIDTH[type];
+    const value = parts[type];
+    let rendered;
+    let filled;
+    if (active && active.type === type && active.buffer.length > 0) {
+      rendered = active.buffer;
+      filled = false;
+    } else if (value != null) {
+      rendered = String(value).padStart(width, "0");
+      filled = true;
+    } else {
+      rendered = SEGMENT_TOKEN[type];
+      filled = false;
+    }
+    const start = text.length;
+    text += rendered;
+    ranges.push({ type, start, end: text.length, filled });
+  }
+  return { text, ranges };
+}
+function isSegmentComplete(type, buffer) {
+  const width = SEGMENT_WIDTH[type];
+  if (buffer.length >= width) return true;
+  if (buffer.length === 1 && type !== "year") {
+    const first = Number(buffer);
+    return type === "month" ? first > 1 : first > 3;
+  }
+  return false;
+}
+function daysInMonth(year, monthIndex) {
+  return new Date(year, monthIndex + 1, 0).getDate();
+}
+function getDateSegments(format2, value) {
+  const segments = [];
+  let fi = 0;
+  let vi = 0;
+  while (fi < format2.length && vi < value.length) {
+    const fc = format2[fi];
+    if (fc === "d" || fc === "M" || fc === "y") {
+      while (fi < format2.length && format2[fi] === fc) fi++;
+      const start = vi;
+      while (vi < value.length && value[vi] >= "0" && value[vi] <= "9") vi++;
+      if (vi > start) {
+        segments.push({
+          type: fc === "d" ? "day" : fc === "M" ? "month" : "year",
+          start,
+          end: vi
+        });
+      }
+    } else {
+      fi++;
+      vi++;
+    }
+  }
+  return segments;
+}
+function stepDateSegment(date, type, delta) {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const day = date.getDate();
+  if (type === "year") {
+    const nextYear = year + delta;
+    return new Date(
+      nextYear,
+      month,
+      Math.min(day, daysInMonth(nextYear, month))
+    );
+  }
+  if (type === "month") {
+    const nextMonth = ((month + delta) % 12 + 12) % 12;
+    return new Date(
+      year,
+      nextMonth,
+      Math.min(day, daysInMonth(year, nextMonth))
+    );
+  }
+  const dim = daysInMonth(year, month);
+  const nextDay = ((day - 1 + delta) % dim + dim) % dim + 1;
+  return new Date(year, month, nextDay);
+}
+
+// src/DatePicker.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var PLACEMENT_OFFSET = 4;
+var DEFAULT_DATE_FORMAT = "MM/dd/yyyy";
+var RANGE_SEPARATOR = /\s*[-–—]\s*/;
+var RANGE_DISPLAY_SEP = " - ";
+var CalendarFieldIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "100%",
+    height: "100%",
+    style: { fill: "currentColor", stroke: "none" },
+    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        fillOpacity: 0.6,
+        d: "M8 4H16V2H18V4H21.5C21.7761 4 22 4.22386 22 4.5V19.5C22 19.7761 21.7761 20 21.5 20H2.5C2.22386 20 2 19.7761 2 19.5V4.5C2 4.22386 2.22386 4 2.5 4H6V2H8V4ZM4 18H20V10H4V18ZM4 8H20V6H4V8Z"
+      }
+    )
+  }
+);
+var FALLBACK_PANEL_SIZE = { width: 320, height: 360 };
+var resolveAutoPlacement = (container, panel, viewport, offset) => {
+  const spaceBelow = viewport.height - container.bottom;
+  const spaceAbove = container.top;
+  const spaceRight = viewport.width - container.right;
+  const spaceLeft = container.left;
+  const neededVertical = panel.height + offset;
+  const neededHorizontal = panel.width + offset;
+  if (spaceBelow >= neededVertical) return "bottom";
+  if (spaceAbove >= neededVertical) return "top";
+  if (spaceLeft >= neededHorizontal) return "left";
+  if (spaceRight >= neededHorizontal) return "right";
+  const gaps = [
+    { side: "bottom", space: spaceBelow },
+    { side: "top", space: spaceAbove },
+    { side: "left", space: spaceLeft },
+    { side: "right", space: spaceRight }
+  ];
+  return gaps.reduce(
+    (best, current) => current.space > best.space ? current : best
+  ).side;
+};
+var parsePlacement = (placement) => {
+  const [side, align] = placement.split("-");
+  return { side, align: align ?? null };
+};
+var alignFromDropdownPosition = (dropdownPosition) => dropdownPosition === "right" ? "end" : "start";
+var resolveForcedLayout = (placement, dropdownPosition) => {
+  const { side, align } = parsePlacement(placement);
+  if (align) return { side, align };
+  if (side === "top" || side === "bottom")
+    return { side, align: alignFromDropdownPosition(dropdownPosition) };
+  return { side, align: "start" };
+};
+var resolveAlignForSide = (side, container, panel, viewport, preferred) => {
+  if (preferred === "center") return "center";
+  const isVerticalSide = side === "left" || side === "right";
+  const fits = (align) => {
+    if (isVerticalSide) {
+      return align === "start" ? container.top + panel.height <= viewport.height : container.bottom - panel.height >= 0;
+    }
+    return align === "start" ? container.left + panel.width <= viewport.width : container.right - panel.width >= 0;
+  };
+  if (fits(preferred)) return preferred;
+  const opposite = preferred === "start" ? "end" : "start";
+  return fits(opposite) ? opposite : preferred;
+};
+var getPlacementStyle = (side, align, offset) => {
+  if (side === "top" || side === "bottom") {
+    const vertical2 = side === "bottom" ? { top: "100%", bottom: "auto", marginTop: offset, marginBottom: 0 } : { top: "auto", bottom: "100%", marginTop: 0, marginBottom: offset };
+    const horizontal2 = align === "center" ? { left: "50%", right: "auto", transform: "translateX(-50%)" } : align === "end" ? { left: "auto", right: 0 } : { left: 0, right: "auto" };
+    return { marginLeft: 0, marginRight: 0, ...vertical2, ...horizontal2 };
+  }
+  const horizontal = side === "right" ? { left: "100%", right: "auto", marginLeft: offset, marginRight: 0 } : { left: "auto", right: "100%", marginLeft: 0, marginRight: offset };
+  const vertical = align === "center" ? { top: "50%", bottom: "auto", transform: "translateY(-50%)" } : align === "end" ? { top: "auto", bottom: 0 } : { top: 0, bottom: "auto" };
+  return { marginTop: 0, marginBottom: 0, ...horizontal, ...vertical };
+};
 var DatePicker = (0, import_react3.forwardRef)(
   ({
     onChange,
@@ -314,63 +573,126 @@ var DatePicker = (0, import_react3.forwardRef)(
     startDate,
     endDate,
     selectedDate,
+    minDate,
+    maxDate,
     placeholder,
+    dateFormat = DEFAULT_DATE_FORMAT,
     backgroundColor,
     testID,
     chips,
     activeChip,
     onChipSelect,
+    showChipLabel = true,
     dropdownPosition = "left",
+    placement,
     themeMode,
     themeProductContext,
     overlayThemeMode,
     overlayThemeProductContext,
+    iconRight = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CalendarFieldIcon, {}),
+    iconLeft,
+    error,
+    errorMessage,
+    readOnly,
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    onClick: onClickProp,
+    onKeyDown: onKeyDownProp,
+    onPaste: onPasteProp,
     ...rest
   }, ref) => {
+    const editable = !readOnly && !rest.disabled;
     const isDual = variant === "dual";
     const isRange = isDual || selectsRange;
+    const propGroups = (0, import_react3.useCallback)(
+      () => isRange ? [datePartsFromDate(startDate), datePartsFromDate(endDate)] : [datePartsFromDate(selectedDate)],
+      [isRange, startDate, endDate, selectedDate]
+    );
     const [open, setOpen] = (0, import_react3.useState)(false);
-    const [inputValue, setInputValue] = (0, import_react3.useState)("");
+    const [groups, setGroups] = (0, import_react3.useState)(propGroups);
+    const [edit, setEdit] = (0, import_react3.useState)(null);
+    const [focused, setFocused] = (0, import_react3.useState)(false);
+    const [activeSegment, setActiveSegment] = (0, import_react3.useState)(null);
     const [internalChip, setInternalChip] = (0, import_react3.useState)(null);
+    const [parseError, setParseError] = (0, import_react3.useState)(null);
+    const [layout, setLayout] = (0, import_react3.useState)(
+      () => placement ? resolveForcedLayout(placement, dropdownPosition) : { side: "bottom", align: alignFromDropdownPosition(dropdownPosition) }
+    );
     const containerRef = (0, import_react3.useRef)(null);
+    const calendarRef = (0, import_react3.useRef)(null);
+    const inputRef = (0, import_react3.useRef)(null);
     const chipSelectionRef = (0, import_react3.useRef)(false);
+    const suppressReopenRef = (0, import_react3.useRef)(false);
     const activeChipValue = activeChip !== void 0 ? activeChip : internalChip;
-    const formatDateForDisplay = (date) => {
-      if (!date) return "";
-      try {
-        return (0, import_date_fns.format)(date, "MM/dd/yyyy");
-      } catch {
-        return "";
+    const chipLabel = showChipLabel && activeChipValue && chips ? chips.find((c) => c.value === activeChipValue)?.label : void 0;
+    const isWithinBounds = (date) => {
+      const day = new Date(
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate()
+      ).getTime();
+      if (minDate) {
+        const min = new Date(
+          minDate.getFullYear(),
+          minDate.getMonth(),
+          minDate.getDate()
+        ).getTime();
+        if (day < min) return false;
       }
-    };
-    const getDisplayValue = (0, import_react3.useCallback)(() => {
-      if (activeChipValue && chips) {
-        const chip = chips.find((c) => c.value === activeChipValue);
-        if (chip) return chip.label;
+      if (maxDate) {
+        const max = new Date(
+          maxDate.getFullYear(),
+          maxDate.getMonth(),
+          maxDate.getDate()
+        ).getTime();
+        if (day > max) return false;
       }
-      if (isRange) {
-        if (startDate && endDate) {
-          return `${formatDateForDisplay(startDate)} - ${formatDateForDisplay(endDate)}`;
-        } else if (startDate) {
-          return formatDateForDisplay(startDate);
-        }
-        return "";
-      } else {
-        return formatDateForDisplay(selectedDate);
+      return true;
+    };
+    const composeField = () => {
+      const build = (group) => buildSegmentedValue(
+        dateFormat,
+        groups[group] ?? { day: null, month: null, year: null },
+        edit && edit.group === group ? { type: edit.type, buffer: edit.buffer } : void 0
+      );
+      if (!isRange) {
+        const { text: text2, ranges } = build(0);
+        return { text: text2, segments: ranges.map((r) => ({ ...r, group: 0 })) };
       }
-    }, [isRange, startDate, endDate, selectedDate, activeChipValue, chips]);
-    (0, import_react3.useEffect)(() => {
-      setInputValue(getDisplayValue());
-    }, [getDisplayValue]);
-    const handleInputChange = (text) => {
-      setInputValue(text);
+      const a = build(0);
+      const b = build(1);
+      const text = `${a.text}${RANGE_DISPLAY_SEP}${b.text}`;
+      const offset = a.text.length + RANGE_DISPLAY_SEP.length;
+      return {
+        text,
+        segments: [
+          ...a.ranges.map((r) => ({ ...r, group: 0 })),
+          ...b.ranges.map((r) => ({
+            ...r,
+            group: 1,
+            start: r.start + offset,
+            end: r.end + offset
+          }))
+        ]
+      };
     };
-    const handleChipSelect = (value) => {
-      chipSelectionRef.current = true;
-      setInternalChip(value);
-      onChipSelect?.(value);
+    const composed = composeField();
+    const hasAnyFilled = groups.some(
+      (g) => g.day != null || g.month != null || g.year != null
+    );
+    const showMask = hasAnyFilled || focused && isWeb;
+    const inputValue = chipLabel ?? (showMask ? composed.text : "");
+    const orderedSegments = () => composeField().segments;
+    const firstSegmentKey = () => {
+      const first = orderedSegments()[0];
+      return first ? { group: first.group, type: first.type } : null;
     };
-    const handleDateChange = (date) => {
+    const segmentKeyAtCaret = (caret) => {
+      const segments = orderedSegments();
+      const seg = segments.find((s) => caret >= s.start && caret <= s.end) ?? segments.find((s) => caret < s.start) ?? segments[segments.length - 1];
+      return seg ? { group: seg.group, type: seg.type } : null;
+    };
+    const applySelection = (date, closeOnComplete = true) => {
       if (!chipSelectionRef.current) {
         setInternalChip(null);
         onChipSelect?.(null);
@@ -378,13 +700,278 @@ var DatePicker = (0, import_react3.forwardRef)(
       chipSelectionRef.current = false;
       if (!isRange) {
         onChange?.(date);
-        setOpen(false);
+        if (closeOnComplete) setOpen(false);
       } else {
         const range = date;
         onChange?.(range);
-        if (range[0] && range[1]) setOpen(false);
+        if (closeOnComplete && range[0] && range[1]) setOpen(false);
+      }
+    };
+    const emit = (next) => {
+      if (!isRange) {
+        const date = datePartsToDate(next[0]);
+        if (date && isWithinBounds(date)) applySelection(date, false);
+        return;
+      }
+      const start = datePartsToDate(next[0]);
+      const end = datePartsToDate(next[1]);
+      if (start && !isWithinBounds(start)) return;
+      if (end && !isWithinBounds(end)) return;
+      if (start && end && start.getTime() > end.getTime()) {
+        setParseError("End date must be after start date");
+        return;
+      }
+      if (start || end) applySelection([start, end], false);
+    };
+    const commitPart = (group, type, rawValue) => {
+      const clamped = clampDatePart(type, rawValue, groups[group]);
+      const next = groups.map((g, i) => {
+        if (i !== group) return g;
+        const updated = { ...g, [type]: clamped };
+        if (type !== "day" && updated.day != null) {
+          updated.day = clampDatePart("day", updated.day, updated);
+        }
+        return updated;
+      });
+      const assembled = datePartsToDate(next[group]);
+      if (assembled && !isWithinBounds(assembled)) {
+        setParseError("Date must be within the allowed range");
+        return null;
+      }
+      setParseError(null);
+      setGroups(next);
+      emit(next);
+      return clamped;
+    };
+    const commitBuffer = () => {
+      if (!edit) return;
+      commitPart(edit.group, edit.type, Number(edit.buffer));
+      setEdit(null);
+    };
+    const defaultPart = (type) => {
+      const now = /* @__PURE__ */ new Date();
+      if (type === "day") return now.getDate();
+      if (type === "month") return now.getMonth() + 1;
+      return now.getFullYear();
+    };
+    const advance = (active) => {
+      const segments = orderedSegments();
+      const index2 = segments.findIndex(
+        (s) => s.group === active.group && s.type === active.type
+      );
+      const next = segments[index2 + 1];
+      setActiveSegment(next ? { group: next.group, type: next.type } : active);
+    };
+    const handleDigit = (digit) => {
+      const active = activeSegment ?? firstSegmentKey();
+      if (!active) return;
+      const sameActive = edit && edit.group === active.group && edit.type === active.type;
+      const buffer = (sameActive ? edit.buffer : "") + digit;
+      if (isSegmentComplete(active.type, buffer)) {
+        const committed = commitPart(active.group, active.type, Number(buffer));
+        setEdit(null);
+        if (committed !== null) advance(active);
+      } else {
+        setEdit({ group: active.group, type: active.type, buffer });
+      }
+    };
+    const handleArrowStep = (e, delta) => {
+      e.preventDefault();
+      const active = activeSegment ?? firstSegmentKey();
+      if (!active) return;
+      const parts = groups[active.group];
+      const current = parts[active.type];
+      const value = current == null ? defaultPart(active.type) : stepDatePart(active.type, current, delta, parts);
+      commitPart(active.group, active.type, value);
+      setEdit(null);
+      if (!activeSegment) setActiveSegment(active);
+    };
+    const handleArrowMove = (e, direction) => {
+      const segments = orderedSegments();
+      if (!segments.length) return;
+      const active = activeSegment ?? firstSegmentKey();
+      if (!active) return;
+      let index2 = segments.findIndex(
+        (s) => s.group === active.group && s.type === active.type
+      );
+      if (index2 === -1) index2 = direction > 0 ? -1 : segments.length;
+      const next = index2 + direction;
+      if (next < 0 || next >= segments.length) return;
+      e.preventDefault();
+      if (edit) {
+        commitPart(edit.group, edit.type, Number(edit.buffer));
+        setEdit(null);
+      }
+      const target = segments[next];
+      setActiveSegment({ group: target.group, type: target.type });
+    };
+    const handleBackspace = (e) => {
+      e.preventDefault();
+      const active = activeSegment ?? firstSegmentKey();
+      if (!active) return;
+      const sameActive = edit && edit.group === active.group && edit.type === active.type;
+      if (sameActive && edit.buffer.length > 0) {
+        const buffer = edit.buffer.slice(0, -1);
+        setEdit(buffer ? { ...edit, buffer } : null);
+        return;
+      }
+      const next = groups.map(
+        (g, i) => i === active.group ? { ...g, [active.type]: null } : g
+      );
+      setGroups(next);
+      setEdit(null);
+      setParseError(null);
+      emit(next);
+      const segments = orderedSegments();
+      const index2 = segments.findIndex(
+        (s) => s.group === active.group && s.type === active.type
+      );
+      const prev = segments[index2 - 1];
+      if (prev) setActiveSegment({ group: prev.group, type: prev.type });
+    };
+    const handleKeyDown = (e) => {
+      onKeyDownProp?.(e);
+      if (e.defaultPrevented) return;
+      if (e.key === "Escape") {
+        setOpen(false);
+        return;
+      }
+      if (!isWeb || !editable) return;
+      if (e.key === "Enter") {
+        commitBuffer();
+        setOpen(false);
+        return;
+      }
+      if (e.key === "ArrowUp") return handleArrowStep(e, 1);
+      if (e.key === "ArrowDown") return handleArrowStep(e, -1);
+      if (e.key === "ArrowLeft") return handleArrowMove(e, -1);
+      if (e.key === "ArrowRight") return handleArrowMove(e, 1);
+      if (e.key === "Backspace") return handleBackspace(e);
+      if (/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+        handleDigit(e.key);
+        return;
+      }
+      if (e.key.length === 1 && !e.metaKey && !e.ctrlKey) e.preventDefault();
+    };
+    const handleFieldFocus = (e) => {
+      onFocusProp?.(e);
+      if (suppressReopenRef.current) {
+        suppressReopenRef.current = false;
+        return;
+      }
+      setFocused(true);
+      setOpen(true);
+      if (isWeb && editable) setActiveSegment(firstSegmentKey());
+    };
+    const handleFieldClick = (e) => {
+      onClickProp?.(e);
+      if (!isWeb || !editable || !hasAnyFilled) return;
+      const input = inputRef.current;
+      if (!input) return;
+      const key = segmentKeyAtCaret(input.selectionStart ?? 0);
+      if (key) setActiveSegment(key);
+    };
+    const handleFieldBlur = (e) => {
+      onBlurProp?.(e);
+      setFocused(false);
+      setActiveSegment(null);
+      if (!editable) return;
+      let next = groups;
+      if (edit) {
+        const clamped = clampDatePart(
+          edit.type,
+          Number(edit.buffer),
+          groups[edit.group]
+        );
+        next = groups.map(
+          (g, i) => i === edit.group ? { ...g, [edit.type]: clamped } : g
+        );
+      }
+      const props = propGroups();
+      next = next.map((g, i) => isDatePartsComplete(g) ? g : props[i]);
+      setEdit(null);
+      setParseError(null);
+      setGroups(next);
+      emit(next);
+    };
+    const parseOne = (token) => {
+      const trimmed = token.trim();
+      if (!trimmed) return null;
+      const parsed = (0, import_date_fns2.parse)(trimmed, dateFormat, /* @__PURE__ */ new Date());
+      return (0, import_date_fns2.isValid)(parsed) ? parsed : null;
+    };
+    const handlePaste = (e) => {
+      onPasteProp?.(e);
+      if (e.defaultPrevented) return;
+      if (!isWeb || !editable) return;
+      const text = e.clipboardData?.getData("text") ?? "";
+      if (!text.trim()) return;
+      e.preventDefault();
+      let next;
+      if (isRange) {
+        const [startText, endText] = text.split(RANGE_SEPARATOR);
+        const start = parseOne(startText ?? "");
+        const end = parseOne(endText ?? "");
+        if (!start) {
+          setParseError(
+            `Enter a valid date range (${dateFormat} - ${dateFormat})`
+          );
+          return;
+        }
+        next = [datePartsFromDate(start), datePartsFromDate(end)];
+      } else {
+        const date = parseOne(text);
+        if (!date) {
+          setParseError(`Enter a valid date (${dateFormat})`);
+          return;
+        }
+        next = [datePartsFromDate(date)];
+      }
+      const outOfBounds = next.map(datePartsToDate).some((d) => d instanceof Date && !isWithinBounds(d));
+      if (outOfBounds) {
+        setParseError("Date must be within the allowed range");
+        return;
       }
+      setParseError(null);
+      setEdit(null);
+      setGroups(next);
+      emit(next);
+    };
+    const handleChipSelect = (value) => {
+      chipSelectionRef.current = true;
+      setInternalChip(value);
+      onChipSelect?.(value);
     };
+    const handleDateChange = (date) => applySelection(date);
+    const propKey = `${selectedDate?.getTime() ?? ""}|${startDate?.getTime() ?? ""}|${endDate?.getTime() ?? ""}|${isRange}`;
+    (0, import_react3.useEffect)(() => {
+      if (focused) return;
+      setGroups(propGroups());
+      setEdit(null);
+      setParseError(null);
+    }, [propKey]);
+    (0, import_react3.useEffect)(() => {
+      if (!isWeb || !activeSegment) return;
+      const input = inputRef.current;
+      if (!input) return;
+      const segment = composeField().segments.find(
+        (s) => s.group === activeSegment.group && s.type === activeSegment.type
+      );
+      if (!segment) return;
+      let rafId = 0;
+      let attempts = 0;
+      const apply = () => {
+        if (document.activeElement !== input) return;
+        if (input.value === inputValue) {
+          input.setSelectionRange(segment.start, segment.end);
+        } else if (attempts++ < 5) {
+          rafId = window.requestAnimationFrame(apply);
+        }
+      };
+      rafId = window.requestAnimationFrame(apply);
+      return () => window.cancelAnimationFrame(rafId);
+    }, [activeSegment, inputValue]);
     (0, import_react3.useEffect)(() => {
       if (isNative) return;
       const handleClickOutside = (event) => {
@@ -395,16 +982,86 @@ var DatePicker = (0, import_react3.forwardRef)(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
+    (0, import_react3.useEffect)(() => {
+      if (!open || !isWeb) return;
+      const handleEscape = (event) => {
+        if (event.key !== "Escape") return;
+        setOpen(false);
+        const input = inputRef.current;
+        if (input && document.activeElement !== input) {
+          suppressReopenRef.current = true;
+          input.focus?.();
+        }
+      };
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [open]);
+    (0, import_react3.useEffect)(() => {
+      if (!open || !isWeb) return;
+      if (placement) {
+        const next = resolveForcedLayout(placement, dropdownPosition);
+        setLayout(
+          (prev) => prev.side === next.side && prev.align === next.align ? prev : next
+        );
+        return;
+      }
+      const compute = () => {
+        const container = containerRef.current;
+        if (!container) return;
+        const containerRect = container.getBoundingClientRect();
+        const panelRect = calendarRef.current ? calendarRef.current.getBoundingClientRect() : FALLBACK_PANEL_SIZE;
+        const panel = { width: panelRect.width, height: panelRect.height };
+        const viewport = {
+          width: window.innerWidth,
+          height: window.innerHeight
+        };
+        const side = resolveAutoPlacement(
+          containerRect,
+          panel,
+          viewport,
+          PLACEMENT_OFFSET
+        );
+        const preferred = side === "top" || side === "bottom" ? alignFromDropdownPosition(dropdownPosition) : "start";
+        const align = resolveAlignForSide(
+          side,
+          containerRect,
+          panel,
+          viewport,
+          preferred
+        );
+        setLayout(
+          (prev) => prev.side === side && prev.align === align ? prev : { side, align }
+        );
+      };
+      const rafId = window.requestAnimationFrame(compute);
+      const handleResize = () => compute();
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.cancelAnimationFrame(rafId);
+        window.removeEventListener("resize", handleResize);
+      };
+    }, [open, placement, dropdownPosition]);
     const overlayThemeProps = {
       themeMode: overlayThemeMode ?? themeMode,
       themeProductContext: overlayThemeProductContext ?? themeProductContext
     };
+    const activeParts = activeSegment ? groups[activeSegment.group] : null;
+    const editingAnchor = activeParts && activeParts.month != null && activeParts.year != null ? new Date(activeParts.year, activeParts.month - 1, 1) : null;
+    const viewAnchor = editingAnchor ?? selectedDate ?? startDate ?? endDate ?? null;
+    const viewMonth = (0, import_react3.useMemo)(
+      () => viewAnchor ? new Date(viewAnchor.getFullYear(), viewAnchor.getMonth(), 1) : void 0,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [viewAnchor?.getFullYear(), viewAnchor?.getMonth()]
+    );
     const renderCalendar = () => isDual ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_xui_calendar.DualCalendar,
       {
         locale,
         startDate,
         endDate,
+        minDate,
+        maxDate,
+        month: viewMonth,
         onChange: handleDateChange,
         chips,
         activeChip: activeChipValue,
@@ -419,6 +1076,9 @@ var DatePicker = (0, import_react3.forwardRef)(
         startDate,
         endDate,
         selectedDate,
+        minDate,
+        maxDate,
+        month: viewMonth,
         onChange: handleDateChange,
         selectsRange,
         chips,
@@ -438,16 +1098,26 @@ var DatePicker = (0, import_react3.forwardRef)(
         },
         position: "relative",
         width: "100%",
+        ...isWeb ? { onClick: () => setOpen(true) } : {},
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_xui_input.Input,
             {
               ...rest,
+              ref: inputRef,
               size,
-              placeholder: placeholder || (isRange ? "MM/DD/YYYY - MM/DD/YYYY" : "MM/DD/YYYY"),
+              placeholder: placeholder || (isRange ? "Enter a date range" : "Choose a date"),
               value: inputValue,
-              onChangeText: handleInputChange,
-              onFocus: () => setOpen(true),
+              readOnly,
+              onFocus: handleFieldFocus,
+              onBlur: handleFieldBlur,
+              onKeyDown: handleKeyDown,
+              onClick: handleFieldClick,
+              onPaste: handlePaste,
+              iconRight,
+              iconLeft,
+              error: error || !!parseError,
+              errorMessage: parseError ?? errorMessage,
               backgroundColor,
               testID,
               themeMode,
@@ -457,12 +1127,18 @@ var DatePicker = (0, import_react3.forwardRef)(
           open && (isWeb ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             Box,
             {
+              ref: calendarRef,
+              role: "dialog",
+              "aria-modal": true,
+              "aria-label": isRange ? "Choose a date range" : "Choose a date",
+              onClick: (e) => e.stopPropagation(),
               position: "absolute",
-              top: "100%",
-              left: dropdownPosition === "left" ? 0 : "auto",
-              right: dropdownPosition === "right" ? 0 : "auto",
-              marginTop: 4,
               zIndex: 1e3,
+              style: getPlacementStyle(
+                layout.side,
+                layout.align,
+                PLACEMENT_OFFSET
+              ),
               children: renderCalendar()
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { marginTop: 4, children: renderCalendar() }))
@@ -472,17 +1148,6 @@ var DatePicker = (0, import_react3.forwardRef)(
   }
 );
 DatePicker.displayName = "DatePicker";
-
-// src/utils.ts
-var import_date_fns2 = require("date-fns");
-var locales = __toESM(require("date-fns/locale"));
-var defaultLocale = "enUS";
-function formatDate(date, formatStr, locale = defaultLocale) {
-  const localeObj = locales[locale] || locales[defaultLocale];
-  return (0, import_date_fns2.format)(date, formatStr, {
-    locale: localeObj
-  });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Calendar,
@@ -491,6 +1156,17 @@ function formatDate(date, formatStr, locale = defaultLocale) {
   CalendarHeader,
   DatePicker,
   DualCalendar,
-  formatDate
+  buildSegmentedValue,
+  clampDatePart,
+  datePartsFromDate,
+  datePartsToDate,
+  daysInMonth,
+  formatDate,
+  getDateSegments,
+  isDatePartsComplete,
+  isSegmentComplete,
+  parseDateFormat,
+  stepDatePart,
+  stepDateSegment
 });
 //# sourceMappingURL=index.js.map