@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

package/dist/esm/components/core/DateRangePicker.js

@@ -1,29 +1,27 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useMemo, useState, useRef, useEffect, useLayoutEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { startOfDay, startOfMonth, startOfWeek, endOfMonth, endOfWeek, eachDayOfInterval, subMonths, format, addMonths, isSameDay, isSameMonth, isToday, parseISO, isAfter, isBefore } from 'date-fns';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect } from 'react';
+import { isSameDay, format, isBefore } from 'date-fns';
+import { Calendar as Calendar$1, X } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
-import { ChevronLeft, ChevronRight, Calendar, X } from 'lucide-react';
+import { usePresentation } from '../../hooks/usePresentation.js';
+import { useFloatingPosition } from '../../hooks/useFloatingPosition.js';
+import { normalizeDate, useActiveDayFocusRef, makeIsDisabled, Calendar, PickerSurface, isBetween } from './internal/Calendar.js';
 
-var _excluded = ["value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "minDate", "maxDate", "className", "weekStartsOn", "portal", "displayFormat", "locale", "showClear", "closeOnSelect"];
+var _excluded = ["value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "minDate", "maxDate", "className", "weekStartsOn", "portal", "displayFormat", "locale", "showClear", "closeOnSelect", "presentation", "presets"];
 /*
-  Single-calendar DateRangePicker with hover-preview and space-aware popup positioning
-  - Enforces mandatory range selection until both start and end are chosen.
-  - Popup flips above/below and clamps horizontally to avoid clipping.
-  - Popup won't close while only a start date is selected (Clear cancels in-progress selection).
+  Single-calendar DateRangePicker.
+  - Popover: tap/click start then end; the second pick commits (and closes
+    with closeOnSelect). The popup won't close on outside click / Escape while
+    only a start date is picked; the trigger always toggles it.
+  - Sheet: a bottom Sheet with 44px days and swipe-to-change-month. Picks are
+    a draft until the sticky "Apply"; dismissing the sheet discards the draft.
+  - The days between start and the hovered / focused day are previewed, and
+    once both ends are picked the whole range is shown.
 */
-var normalizeDate = function normalizeDate(d) {
-  if (!d) return null;
-  if (typeof d === "string") {
-    try {
-      return parseISO(d);
-    } catch (e) {
-      return null;
-    }
-  }
-  return d instanceof Date ? d : null;
+var sortRange = function sortRange(a, b) {
+  return isBefore(b, a) ? [b, a] : [a, b];
 };
 var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref) {
   var value = _ref.value,
@@ -50,6 +48,9 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
     showClear = _ref$showClear === void 0 ? true : _ref$showClear,
     _ref$closeOnSelect = _ref.closeOnSelect,
     closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
+    _ref$presentation = _ref.presentation,
+    presentation = _ref$presentation === void 0 ? "auto" : _ref$presentation,
+    presets = _ref.presets,
     props = _objectWithoutProperties(_ref, _excluded);
   // Stable ids wiring label / helper / error to the trigger button.
   // A consumer `id` (spread onto the trigger via ...props) wins.
@@ -59,6 +60,8 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
   var valueId = "".concat(fieldId, "-value");
   var errorId = "".concat(fieldId, "-error");
   var helperId = "".concat(fieldId, "-helper");
+  var mode = usePresentation(presentation);
+  var isSheet = mode === "sheet";
   var start = useMemo(function () {
     return normalizeDate(value === null || value === void 0 ? void 0 : value.start);
   }, [value]);
@@ -82,37 +85,67 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
     _useState8 = _slicedToArray(_useState7, 2),
     localEnd = _useState8[0],
     setLocalEnd = _useState8[1];
-  // hover preview while picking second date
+  // preview end (hovered or keyboard-focused day) while picking the second date
   var _useState9 = useState(null),
     _useState0 = _slicedToArray(_useState9, 2),
-    hoverDate = _useState0[0],
-    setHoverDate = _useState0[1];
+    previewDate = _useState0[0],
+    setPreviewDate = _useState0[1];
+  // The last committed range: `value` when controlled, else the last pick.
+  // Closing mid-pick (or dismissing the sheet) restores the draft to it.
+  var _useState1 = useState({
+      start: start,
+      end: end
+    }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    committed = _useState10[0],
+    setCommitted = _useState10[1];
   // Re-sync local selection when the external value changes
   // (adjust-during-render pattern).
-  var _useState1 = useState(value),
-    _useState10 = _slicedToArray(_useState1, 2),
-    prevValue = _useState10[0],
-    setPrevValue = _useState10[1];
+  var _useState11 = useState(value),
+    _useState12 = _slicedToArray(_useState11, 2),
+    prevValue = _useState12[0],
+    setPrevValue = _useState12[1];
   if (value !== prevValue) {
     setPrevValue(value);
     setLocalStart(start);
     setLocalEnd(end);
+    setCommitted({
+      start: start,
+      end: end
+    });
     if (start) setCurrentMonth(start);
   }
   var datePickerRef = useRef(null);
   var popupRef = useRef(null);
-  var _useState11 = useState({}),
-    _useState12 = _slicedToArray(_useState11, 2),
-    popupStyle = _useState12[0],
-    setPopupStyle = _useState12[1];
-  // Outside click: only close if there is NOT an in-progress single-date selection
+  var triggerRef = useRef(null);
+  var gridRef = useRef(null);
+  var initialFocus = useActiveDayFocusRef(gridRef);
+  var _useFloatingPosition = useFloatingPosition({
+      placement: "bottom-start",
+      offset: 8,
+      open: isOpen && !isSheet
+    }),
+    refs = _useFloatingPosition.refs,
+    floatingStyles = _useFloatingPosition.floatingStyles,
+    isPositioned = _useFloatingPosition.isPositioned;
+  var setReference = refs.setReference,
+    setFloating = refs.setFloating;
+  var fieldRef = useCallback(function (node) {
+    datePickerRef.current = node;
+    setReference(node);
+  }, [setReference]);
+  var floatingRef = useCallback(function (node) {
+    popupRef.current = node;
+    setFloating(node);
+  }, [setFloating]);
+  var picking = Boolean(localStart && !localEnd);
+  // Popover only: outside click closes unless a start-only pick is in progress.
   useEffect(function () {
+    if (isSheet) return undefined;
     var handleClickOutside = function handleClickOutside(e) {
       if (datePickerRef.current && !datePickerRef.current.contains(e.target) && (!popupRef.current || !popupRef.current.contains(e.target))) {
         // If user has selected a start but no end, prevent closing to force range selection
-        if (localStart && !localEnd) {
-          return;
-        }
+        if (picking) return;
         setIsOpen(false);
       }
     };
@@ -120,305 +153,187 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
     return function () {
       return document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [localStart, localEnd]);
-  // Keyboard handling: Escape should not close when only start selected
+  }, [picking, isSheet]);
+  // Popover only: Escape closes unless a start-only pick is in progress
+  // (the sheet's focus trap handles Escape itself).
   useEffect(function () {
+    if (isSheet) return undefined;
     var handleKey = function handleKey(e) {
       if (!isOpen) return;
       if (e.key === "Escape") {
-        if (localStart && !localEnd) return; // ignore escape while selecting range
+        var _triggerRef$current;
+        if (picking) return; // ignore escape while selecting range
+        var hadFocusInside = popupRef.current && popupRef.current.contains(document.activeElement);
         setIsOpen(false);
+        if (hadFocusInside) (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
       }
     };
     document.addEventListener("keydown", handleKey);
     return function () {
       return document.removeEventListener("keydown", handleKey);
     };
-  }, [isOpen, localStart, localEnd]);
-  var min = minDate ? startOfDay(normalizeDate(minDate)) : null;
-  var max = maxDate ? startOfDay(normalizeDate(maxDate)) : null;
-  var isDisabled = function isDisabled(d) {
-    var dd = startOfDay(d);
-    if (min && isBefore(dd, min)) return true;
-    if (max && isAfter(dd, max)) return true;
-    return false;
+  }, [isOpen, picking, isSheet]);
+  var isDisabled = makeIsDisabled(minDate, maxDate);
+  // Close and drop any uncommitted draft (back to the controlled value).
+  var closeAndReset = function closeAndReset() {
+    setIsOpen(false);
+    setLocalStart(committed.start);
+    setLocalEnd(committed.end);
+    setPreviewDate(null);
   };
-  var monthStart = startOfMonth(currentMonth);
-  var monthGridStart = startOfWeek(monthStart, {
-    weekStartsOn: weekStartsOn
-  });
-  var monthEnd = endOfMonth(currentMonth);
-  var monthGridEnd = endOfWeek(monthEnd, {
-    weekStartsOn: weekStartsOn
-  });
-  var days = useMemo(function () {
-    return eachDayOfInterval({
-      start: monthGridStart,
-      end: monthGridEnd
+  var commit = function commit(s, e) {
+    onChange === null || onChange === void 0 || onChange({
+      start: s,
+      end: e
     });
-  }, [monthGridStart, monthGridEnd]);
-  // Compute whether a day is considered 'in range' for highlighting.
-  // If user has selected start and is hovering (no end yet) we preview using hoverDate.
-  var dayInRange = function dayInRange(d) {
-    var s = localStart ? startOfDay(localStart) : null;
-    var e = localEnd ? startOfDay(localEnd) : null;
-    var hover = hoverDate ? startOfDay(hoverDate) : null;
-    if (s && e) {
-      return isSameDay(d, s) || isSameDay(d, e) || isAfter(startOfDay(d), s) && isBefore(startOfDay(d), e);
-    }
-    if (s && !e && hover) {
-      var a = isBefore(hover, s) ? hover : s;
-      var b = isBefore(hover, s) ? s : hover;
-      return isSameDay(d, a) || isSameDay(d, b) || isAfter(startOfDay(d), a) && isBefore(startOfDay(d), b);
+    setCommitted({
+      start: s,
+      end: e
+    });
+    setPreviewDate(null);
+    if (closeOnSelect || isSheet) {
+      var _triggerRef$current2;
+      setIsOpen(false);
+      (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus();
     }
-    return false;
   };
   var handleDayClick = function handleDayClick(d) {
     if (isDisabled(d)) return;
-    // No start selected -> pick start
-    if (!localStart && !localEnd) {
-      setLocalStart(d);
-      setLocalEnd(null);
-      setHoverDate(null);
-      setCurrentMonth(d);
-      return;
-    }
     // Have start but no end -> pick end (swap if before)
-    if (localStart && !localEnd) {
-      if (isBefore(d, localStart)) {
-        var newStart = d;
-        var newEnd = localStart;
-        setLocalStart(newStart);
-        setLocalEnd(newEnd);
-        // commit only when both present
-        onChange === null || onChange === void 0 || onChange({
-          start: newStart,
-          end: newEnd
-        });
-      } else {
-        setLocalEnd(d);
-        onChange === null || onChange === void 0 || onChange({
-          start: localStart,
-          end: d
-        });
-      }
-      setHoverDate(null);
-      // Close the popup only after the second date is selected
-      if (closeOnSelect) setIsOpen(false);
-      return;
-    }
-    // Both present -> start a new selection with clicked date as start
-    if (localStart && localEnd) {
-      setLocalStart(d);
-      setLocalEnd(null);
-      setHoverDate(null);
-      setCurrentMonth(d);
+    if (picking) {
+      var _sortRange = sortRange(localStart, d),
+        _sortRange2 = _slicedToArray(_sortRange, 2),
+        s = _sortRange2[0],
+        e = _sortRange2[1];
+      setLocalStart(s);
+      setLocalEnd(e);
+      setPreviewDate(null);
+      // The sheet waits for "Apply"; the popover commits now.
+      if (!isSheet) commit(s, e);
       return;
     }
+    // No selection, or a full one -> start a new selection
+    setLocalStart(d);
+    setLocalEnd(null);
+    setPreviewDate(null);
+    setCurrentMonth(d);
+  };
+  var handlePreview = function handlePreview(d) {
+    if (d && !picking) return;
+    setPreviewDate(d);
+  };
+  var getDayState = function getDayState(d) {
+    var isEdge = Boolean(localStart && isSameDay(d, localStart) || localEnd && isSameDay(d, localEnd));
+    var inRange = false;
+    if (localStart && localEnd) inRange = isBetween(d, localStart, localEnd);else if (localStart && previewDate) inRange = isBetween(d, localStart, previewDate);
+    return {
+      selected: isEdge || inRange,
+      edge: isEdge,
+      inRange: inRange && !isEdge
+    };
   };
   var clearSelection = function clearSelection() {
     setLocalStart(null);
     setLocalEnd(null);
-    setHoverDate(null);
+    setPreviewDate(null);
+    setCommitted({
+      start: null,
+      end: null
+    });
     onChange === null || onChange === void 0 || onChange(null);
   };
+  var selectToday = function selectToday() {
+    var t = new Date();
+    setLocalStart(t);
+    setLocalEnd(t);
+    setCurrentMonth(t);
+    if (isSheet) return; // applied with "Apply"
+    commit(t, t);
+  };
+  var applyPreset = function applyPreset(preset) {
+    var _ref2 = preset.range || [],
+      _ref3 = _slicedToArray(_ref2, 2),
+      a = _ref3[0],
+      b = _ref3[1];
+    var s = normalizeDate(a);
+    var e = normalizeDate(b);
+    if (!s || !e) return;
+    var _sortRange3 = sortRange(s, e),
+      _sortRange4 = _slicedToArray(_sortRange3, 2),
+      ps = _sortRange4[0],
+      pe = _sortRange4[1];
+    setLocalStart(ps);
+    setLocalEnd(pe);
+    setCurrentMonth(ps);
+    setPreviewDate(null);
+    if (!isSheet) commit(ps, pe);
+  };
   // A disabled picker cannot be cleared (the old nested button could not be
   // clicked inside a disabled trigger either).
-  var showClearButton = Boolean(showClear && !disabled && (localStart || localEnd));
-  // Display placeholder until both start and end are selected (mandatory range)
-  var formatDisplay = function formatDisplay() {
-    if (!localStart || !localEnd) return placeholder;
-    return "".concat(format(localStart, displayFormat, {
+  var showClearButton = Boolean(showClear && !disabled && (committed.start || committed.end || localStart || localEnd));
+  var formatRange = function formatRange(s, e) {
+    return "".concat(format(s, displayFormat, {
       locale: locale
-    }), " \u2014 ").concat(format(localEnd, displayFormat, {
+    }), " \u2014 ").concat(format(e, displayFormat, {
       locale: locale
     }));
   };
-  var header = jsxs("div", {
-    className: "mb-2 flex items-center justify-between",
-    children: [jsx("button", {
+  // Display placeholder until both start and end are committed (mandatory range).
+  var triggerText = committed.start && committed.end ? formatRange(committed.start, committed.end) : placeholder;
+  var draftText = localStart && localEnd ? formatRange(localStart, localEnd) : placeholder;
+  var presetList = Array.isArray(presets) && presets.length > 0 ? presets : null;
+  var presetChips = presetList ? jsx("div", {
+    role: "group",
+    "aria-label": "Presets",
+    className: cn("flex gap-2", isSheet ? "-mx-1 mb-3 overflow-x-auto px-1 pb-1" : "mb-3 flex-wrap"),
+    children: presetList.map(function (preset) {
+      var _preset$range, _preset$range2;
+      var s = normalizeDate((_preset$range = preset.range) === null || _preset$range === void 0 ? void 0 : _preset$range[0]);
+      var e = normalizeDate((_preset$range2 = preset.range) === null || _preset$range2 === void 0 ? void 0 : _preset$range2[1]);
+      var active = Boolean(s && e && localStart && localEnd && isSameDay(s, localStart) && isSameDay(e, localEnd));
+      return jsx("button", {
+        type: "button",
+        "aria-pressed": active,
+        onClick: function onClick() {
+          return applyPreset(preset);
+        },
+        className: cn("shrink-0 rounded-full border px-3 text-xs font-medium transition-colors motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", isSheet ? "min-h-11 text-sm" : "py-1", active ? "border-primary-600 bg-primary-600 text-white" : "border-gray-300 hover:bg-gray-100"),
+        children: preset.label
+      }, preset.label);
+    })
+  }) : null;
+  var actionClass = isSheet ? "rounded-md px-3 py-2 text-sm hover:bg-gray-100" : "rounded-md px-2 py-1 text-xs hover:bg-gray-100";
+  var calendar = jsx(Calendar, {
+    month: currentMonth,
+    onMonthChange: setCurrentMonth,
+    weekStartsOn: weekStartsOn,
+    isDisabled: isDisabled,
+    getDayState: getDayState,
+    onSelect: handleDayClick,
+    onPreview: handlePreview,
+    preferredDate: localEnd || localStart,
+    size: mode,
+    swipe: isSheet,
+    autoFocus: !isSheet,
+    fullDateLabels: true,
+    multiSelectable: true,
+    locale: locale,
+    gridRef: gridRef
+  });
+  var sheetFooter = jsxs(Fragment, {
+    children: [showClear ? jsx("button", {
       type: "button",
-      className: "rounded-md p-1 hover:bg-gray-100",
-      onClick: function onClick() {
-        return setCurrentMonth(function (m) {
-          return subMonths(m, 1);
-        });
-      },
-      "aria-label": "Previous month",
-      children: jsx(ChevronLeft, {
-        className: "h-4 w-4"
-      })
-    }), jsx("h4", {
-      className: "text-sm font-medium",
-      children: format(currentMonth, "MMMM yyyy")
-    }), jsx("button", {
+      className: actionClass,
+      onClick: clearSelection,
+      children: "Clear"
+    }) : jsx("span", {}), jsx("button", {
       type: "button",
-      className: "rounded-md p-1 hover:bg-gray-100",
+      disabled: !localStart || !localEnd,
       onClick: function onClick() {
-        return setCurrentMonth(function (m) {
-          return addMonths(m, 1);
-        });
+        return commit(localStart, localEnd);
       },
-      "aria-label": "Next month",
-      children: jsx(ChevronRight, {
-        className: "h-4 w-4"
-      })
-    })]
-  });
-  // compute popup position so it's aware of viewport edges (top/bottom/left/right)
-  var computePopupPosition = function computePopupPosition() {
-    var margin = 8;
-    var trigger = datePickerRef.current;
-    var popup = popupRef.current;
-    if (!trigger || !popup) return;
-    var triggerRect = trigger.getBoundingClientRect();
-    // measure popup by temporarily making it visible if hidden
-    var popupRect = popup.getBoundingClientRect();
-    // If the popup is not yet fully measured (width/height 0), try to read offsetWidth/Height
-    if (popupRect.width === 0 || popupRect.height === 0) {
-      popupRect = {
-        width: popup.offsetWidth || 320,
-        height: popup.offsetHeight || 300
-      };
-    }
-    // Decide vertical placement
-    var spaceBelow = window.innerHeight - triggerRect.bottom;
-    var spaceAbove = triggerRect.top;
-    var placeBelow = spaceBelow >= popupRect.height + margin;
-    if (!placeBelow && spaceAbove >= popupRect.height + margin) placeBelow = false;
-    // If neither side has full space, pick the side with more space
-    if (!placeBelow && spaceBelow < popupRect.height + margin && spaceAbove < popupRect.height + margin) {
-      placeBelow = spaceBelow >= spaceAbove;
-    }
-    // compute top coordinate (fixed positioning)
-    var top;
-    if (placeBelow) {
-      top = Math.min(window.innerHeight - margin - popupRect.height, triggerRect.bottom + margin);
-    } else {
-      top = Math.max(margin, triggerRect.top - popupRect.height - margin);
-    }
-    // Decide horizontal placement (try align left to trigger)
-    var left = triggerRect.left;
-    // If overflowing right, shift left
-    if (left + popupRect.width > window.innerWidth - margin) {
-      left = Math.max(margin, window.innerWidth - margin - popupRect.width);
-    }
-    // If overflowing left, clamp
-    if (left < margin) left = margin;
-    var transformOrigin = placeBelow ? "top left" : "bottom left";
-    setPopupStyle({
-      position: "fixed",
-      top: "".concat(Math.round(top), "px"),
-      left: "".concat(Math.round(left), "px"),
-      zIndex: 9999,
-      transformOrigin: transformOrigin
-    });
-  };
-  // recompute on open, on resize/scroll, and when popup content changes (currentMonth)
-  useLayoutEffect(function () {
-    if (!isOpen) return;
-    // compute on next frame to ensure popup ref exists in DOM (especially with portal)
-    // Measuring the DOM and positioning the popup before paint is the
-    // intended use of a layout effect, so the setState inside is deliberate.
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    computePopupPosition();
-    var handleResize = function handleResize() {
-      return computePopupPosition();
-    };
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleResize, true); // capture scrolling in ancestors
-    return function () {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleResize, true);
-    };
-  }, [isOpen, currentMonth]);
-  var calendarPopup = jsxs("div", {
-    ref: popupRef,
-    className: "w-80 rounded-md border border-gray-300 bg-white p-4 shadow-lg",
-    role: "dialog",
-    "aria-modal": "false",
-    style: popupStyle,
-    children: [header, jsx("div", {
-      className: "mb-2 grid grid-cols-7 gap-1",
-      children: Array.from({
-        length: 7
-      }).map(function (_, i) {
-        var dayIndex = (i + weekStartsOn) % 7;
-        var label = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][dayIndex];
-        return jsx("div", {
-          className: "p-2 text-center text-xs font-medium text-primary-500",
-          children: label
-        }, label);
-      })
-    }), jsx("div", {
-      className: "grid grid-cols-7 gap-1",
-      role: "grid",
-      children: days.map(function (d) {
-        var isSelStart = localStart && isSameDay(d, localStart);
-        var isSelEnd = localEnd && isSameDay(d, localEnd);
-        var inRange = dayInRange(d);
-        var isCurrentMonth = isSameMonth(d, currentMonth);
-        var today = isToday(d);
-        var disabled = isDisabled(d);
-        return jsx("button", {
-          type: "button",
-          onClick: function onClick() {
-            return handleDayClick(d);
-          },
-          onMouseEnter: function onMouseEnter() {
-            // only set hover when picking end (start selected, end not)
-            if (localStart && !localEnd) setHoverDate(d);
-          },
-          onMouseLeave: function onMouseLeave() {
-            if (localStart && !localEnd) setHoverDate(null);
-          },
-          disabled: disabled,
-          className: cn("h-8 w-8 rounded-md text-sm transition-colors focus:outline-2 focus:outline-offset-1", {
-            "text-primary-400": !isCurrentMonth,
-            "bg-primary-600 text-white": isSelStart || isSelEnd,
-            "bg-primary-100 text-primary-600": today && !(isSelStart || isSelEnd),
-            "bg-primary-200": inRange && !(isSelStart || isSelEnd),
-            "hover:bg-gray-100": isCurrentMonth && !(isSelStart || isSelEnd) && !disabled,
-            "cursor-not-allowed opacity-50": disabled
-          }),
-          children: format(d, "d")
-        }, d.toISOString());
-      })
-    }), jsxs("div", {
-      className: "mt-3 flex items-center justify-between",
-      children: [jsxs("div", {
-        className: "flex gap-2",
-        children: [showClear && jsx("button", {
-          type: "button",
-          className: "rounded-md px-2 py-1 text-xs hover:bg-gray-100",
-          onClick: clearSelection,
-          children: "Clear"
-        }), jsx("button", {
-          type: "button",
-          className: "rounded-md px-2 py-1 text-xs hover:bg-gray-100",
-          onClick: function onClick() {
-            var t = new Date();
-            setLocalStart(t);
-            setLocalEnd(t);
-            onChange === null || onChange === void 0 || onChange({
-              start: t,
-              end: t
-            });
-            if (closeOnSelect) setIsOpen(false);
-          },
-          children: "Today"
-        })]
-      }), jsx("div", {
-        className: "flex items-center gap-2",
-        children: jsx("div", {
-          className: "text-xs text-primary-500",
-          children: !localStart || !localEnd ? placeholder : "".concat(format(localStart, displayFormat, {
-            locale: locale
-          }), " \u2014 ").concat(format(localEnd, displayFormat, {
-            locale: locale
-          }))
-        })
-      })]
+      className: "min-h-11 rounded-md bg-primary-600 px-5 text-sm font-medium text-white hover:bg-primary-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      children: "Apply"
     })]
   });
   return jsxs("div", {
@@ -433,9 +348,10 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         children: "*"
       })]
     }), jsxs("div", {
-      ref: datePickerRef,
+      ref: fieldRef,
       className: "relative",
       children: [jsxs("button", _objectSpread2(_objectSpread2({
+        ref: triggerRef,
         type: "button",
         id: fieldId,
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
@@ -443,15 +359,14 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !localStart || !localEnd,
+          "text-primary-500": !committed.start || !committed.end,
           "pr-16": showClearButton
         }, className),
         onClick: function onClick() {
-          // Prevent closing the popup when a start is selected but end isn't — force user to finish range
-          if (isOpen && localStart && !localEnd) return;
-          setIsOpen(function (v) {
-            return !v;
-          });
+          // The trigger always toggles, even mid-pick (DTUI-35): closing
+          // drops the uncommitted start, reopening starts from the last
+          // committed range.
+          if (isOpen) closeAndReset();else setIsOpen(true);
         },
         disabled: disabled,
         "aria-haspopup": "dialog",
@@ -460,16 +375,18 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         children: [jsx("span", {
           className: "truncate",
           id: valueId,
-          children: formatDisplay()
-        }), jsx(Calendar, {
+          children: triggerText
+        }), jsx(Calendar$1, {
           className: "h-4 w-4 shrink-0 text-primary-400",
           "aria-hidden": "true"
         })]
       })), showClearButton && jsx("button", {
         type: "button",
         onClick: function onClick(e) {
+          var _triggerRef$current3;
           e.stopPropagation();
           clearSelection();
+          (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.focus();
         },
         "aria-label": "Clear range",
         className: "absolute right-8 top-1/2 -translate-y-1/2 rounded p-1 focus:outline-none focus:ring-2 focus:ring-primary-500",
@@ -477,7 +394,42 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
           className: "h-4 w-4 text-primary-400",
           "aria-hidden": "true"
         })
-      }), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)]
+      }), jsxs(PickerSurface, {
+        mode: mode,
+        open: isOpen,
+        onClose: closeAndReset,
+        title: label || "Select date range",
+        portal: portal,
+        floatingRef: floatingRef,
+        floatingStyles: floatingStyles,
+        isPositioned: isPositioned,
+        initialFocus: initialFocus,
+        sheetFooter: sheetFooter,
+        children: [presetChips, calendar, isSheet ? jsx("p", {
+          className: "mt-3 text-center text-sm text-primary-500",
+          "aria-live": "polite",
+          children: draftText
+        }) : jsxs("div", {
+          className: "mt-3 flex items-center justify-between",
+          children: [jsxs("div", {
+            className: "flex gap-2",
+            children: [showClear && jsx("button", {
+              type: "button",
+              className: actionClass,
+              onClick: clearSelection,
+              children: "Clear"
+            }), jsx("button", {
+              type: "button",
+              className: actionClass,
+              onClick: selectToday,
+              children: "Today"
+            })]
+          }), jsx("div", {
+            className: "text-xs text-primary-500",
+            children: draftText
+          })]
+        })]
+      })]
     }), error ? jsx("p", {
       id: errorId,
       className: "mt-1 text-sm text-error-500",