@dreamtree-org/twreact-ui 1.3.11 → 2.0.1

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

@@ -1,14 +1,15 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useId, useMemo, useState, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { parseISO, startOfMonth, startOfWeek, endOfMonth, endOfWeek, eachDayOfInterval, startOfDay, isSameDay, subMonths, format, addMonths, isSameMonth, isToday, isBefore, isAfter, addDays } from 'date-fns';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useId, useMemo, useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
+import { isSameDay, format } from 'date-fns';
+import { Calendar as Calendar$1, X } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
-import { TOUCH_TARGET } from '../../utils/touchTarget.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 } 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"];
 var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -34,6 +35,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     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,
     props = _objectWithoutProperties(_ref, _excluded);
   // Stable ids wiring label / helper / error to the trigger button.
   // A consumer `id` (spread onto the trigger via ...props) wins.
@@ -43,17 +46,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var valueId = "".concat(fieldId, "-value");
   var errorId = "".concat(fieldId, "-error");
   var helperId = "".concat(fieldId, "-helper");
+  var mode = usePresentation(presentation);
+  var isSheet = mode === "sheet";
   // Normalize incoming value (accept Date or ISO string)
   var selected = useMemo(function () {
-    if (!value) return null;
-    if (typeof value === "string") {
-      try {
-        return parseISO(value);
-      } catch (e) {
-        return null;
-      }
-    }
-    return value instanceof Date ? value : null;
+    return normalizeDate(value);
   }, [value]);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -66,32 +63,41 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var datePickerRef = useRef(null);
   var popupRef = useRef(null);
   var triggerRef = useRef(null);
-  var gridButtonRefs = useRef([]);
-  // Roving tabindex: the day the user moved to with the keyboard (or focused).
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    focusedDate = _useState6[0],
-    setFocusedDate = _useState6[1];
-  // Set when a keyboard action / open should move DOM focus to the active day.
-  var pendingFocusRef = useRef(false);
-  var _useState7 = useState({}),
-    _useState8 = _slicedToArray(_useState7, 2),
-    popupStyle = _useState8[0],
-    setPopupStyle = _useState8[1];
+  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]);
   useImperativeHandle(forwardedRef, function () {
     return datePickerRef.current;
   }, []);
   // Keep currentMonth in sync with external value changes
-  var _useState9 = useState(selected),
-    _useState0 = _slicedToArray(_useState9, 2),
-    prevSelected = _useState0[0],
-    setPrevSelected = _useState0[1];
+  var _useState5 = useState(selected),
+    _useState6 = _slicedToArray(_useState5, 2),
+    prevSelected = _useState6[0],
+    setPrevSelected = _useState6[1];
   if (selected !== prevSelected) {
     setPrevSelected(selected);
     if (selected) setCurrentMonth(selected);
   }
-  // Close on outside click
+  // Popover only: close on outside click (the sheet has its own backdrop).
   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)) {
         setIsOpen(false);
@@ -101,9 +107,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     return function () {
       return document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
-  // Close on escape and keyboard navigation when open
+  }, [isSheet]);
+  // Popover only: Escape closes and returns focus to the field (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") {
@@ -117,290 +125,68 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     return function () {
       return document.removeEventListener("keydown", handleKey);
     };
-  }, [isOpen]);
-  // compute calendar grid (includes previous/next month's tail days for proper alignment)
-  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
-    });
-  }, [monthGridStart, monthGridEnd]);
-  // normalize min/max to startOfDay for consistent comparisons
-  var min = minDate ? startOfDay(typeof minDate === "string" ? parseISO(minDate) : minDate) : null;
-  var max = maxDate ? startOfDay(typeof maxDate === "string" ? parseISO(maxDate) : maxDate) : null;
-  var isDateDisabled = function isDateDisabled(date) {
-    var d = startOfDay(date);
-    if (min && isBefore(d, min)) return true;
-    if (max && isAfter(d, max)) return true;
-    return false;
-  };
+  }, [isOpen, isSheet]);
+  var isDateDisabled = makeIsDisabled(minDate, maxDate);
   var formatDisplayValue = function formatDisplayValue() {
     if (!selected) return placeholder;
     return format(selected, displayFormat, {
       locale: locale
     });
   };
+  var close = function close() {
+    var _triggerRef$current2;
+    setIsOpen(false);
+    // The focused day unmounts with the popup; keep focus on the field.
+    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus();
+  };
   var handleDateSelect = function handleDateSelect(date) {
     if (isDateDisabled(date)) return;
     onChange === null || onChange === void 0 || onChange(date);
-    if (closeOnSelect) {
-      var _triggerRef$current2;
-      setIsOpen(false);
-      // The focused day unmounts with the popup; keep focus on the field.
-      (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus();
-    }
-  };
-  // Roving tabindex target: exactly one enabled day in the grid is tabbable.
-  // Priority: keyboard-focused day ?? selected ?? today (if shown & enabled)
-  // ?? first enabled day of the visible month ?? first enabled grid day.
-  var isUsable = function isUsable(d) {
-    return d && isSameMonth(d, currentMonth) && !isDateDisabled(d);
-  };
-  var activeDate = null;
-  if (isUsable(focusedDate)) activeDate = focusedDate;else if (isUsable(selected)) activeDate = selected;else if (isUsable(new Date())) activeDate = new Date();else activeDate = days.find(function (d) {
-    return isUsable(d);
-  }) || days.find(function (d) {
-    return !isDateDisabled(d);
-  }) || null;
-  var activeIndex = activeDate ? days.findIndex(function (d) {
-    return isSameDay(d, activeDate);
-  }) : -1;
-  // Move DOM focus to the active day after a keyboard action / open.
-  useEffect(function () {
-    if (!isOpen || !pendingFocusRef.current) return;
-    pendingFocusRef.current = false;
-    var btn = gridButtonRefs.current[activeIndex];
-    if (btn && typeof btn.focus === "function") btn.focus();
-  });
-  var moveFocusTo = function moveFocusTo(date) {
-    if (!date || isDateDisabled(date)) return;
-    if (!isSameMonth(date, currentMonth)) setCurrentMonth(date);
-    setFocusedDate(date);
-    pendingFocusRef.current = true;
-  };
-  var handleGridKeyDown = function handleGridKeyDown(e, idx) {
-    var day = days[idx];
-    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", "Enter"].includes(e.key)) {
-      e.preventDefault();
-    }
-    switch (e.key) {
-      case "ArrowLeft":
-        moveFocusTo(addDays(day, -1));
-        break;
-      case "ArrowRight":
-        moveFocusTo(addDays(day, 1));
-        break;
-      case "ArrowUp":
-        moveFocusTo(addDays(day, -7));
-        break;
-      case "ArrowDown":
-        moveFocusTo(addDays(day, 7));
-        break;
-      case "PageUp":
-        moveFocusTo(subMonths(day, 1));
-        break;
-      case "PageDown":
-        moveFocusTo(addMonths(day, 1));
-        break;
-      case "Home":
-        moveFocusTo(days[Math.floor(idx / 7) * 7]);
-        break;
-      case "End":
-        moveFocusTo(days[Math.min(days.length - 1, Math.floor(idx / 7) * 7 + 6)]);
-        break;
-      case "Enter":
-        if (!isDateDisabled(day)) handleDateSelect(day);
-        break;
-    }
+    if (closeOnSelect) close();
   };
-  var openAndFocusSelected = function openAndFocusSelected() {
-    setFocusedDate(null);
-    setIsOpen(true);
-    // the active-day effect moves focus once the grid has rendered
-    pendingFocusRef.current = true;
+  var selectToday = function selectToday() {
+    var t = new Date();
+    onChange === null || onChange === void 0 || onChange(t);
+    setCurrentMonth(t);
+    if (closeOnSelect) close();
   };
-  // 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 || 240,
-        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;
-    // 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);
+  var getDayState = function getDayState(d) {
+    var isSel = Boolean(selected && isSameDay(d, selected));
+    return {
+      selected: isSel,
+      edge: isSel
     };
-  }, [isOpen, currentMonth]);
-  var header = jsxs("div", {
-    className: "mb-4 flex items-center justify-between",
-    children: [jsx("button", {
+  };
+  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 actions = jsxs("div", {
+    className: "flex gap-2",
+    children: [showClear && jsx("button", {
       type: "button",
-      className: cn("inline-flex items-center justify-center rounded-md p-1 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET),
+      className: actionClass,
       onClick: function onClick() {
-        return setCurrentMonth(subMonths(currentMonth, 1));
+        onChange === null || onChange === void 0 || onChange(null);
       },
-      "aria-label": "Previous month",
-      children: jsx(ChevronLeft, {
-        className: "h-4 w-4"
-      })
-    }), jsx("h3", {
-      className: "text-sm font-medium",
-      children: format(currentMonth, "MMMM yyyy")
+      children: "Clear"
     }), jsx("button", {
       type: "button",
-      className: cn("inline-flex items-center justify-center rounded-md p-1 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET),
-      onClick: function onClick() {
-        return setCurrentMonth(addMonths(currentMonth, 1));
-      },
-      "aria-label": "Next month",
-      children: jsx(ChevronRight, {
-        className: "h-4 w-4"
-      })
+      className: actionClass,
+      onClick: selectToday,
+      children: "Today"
     })]
   });
-  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 (day, idx) {
-        var isSelected = selected && isSameDay(day, selected);
-        var isCurrentMonth = isSameMonth(day, currentMonth);
-        var isTodayDate = isToday(day);
-        var isDisabled = isDateDisabled(day);
-        return jsx("button", {
-          type: "button",
-          ref: function ref(el) {
-            return gridButtonRefs.current[idx] = el;
-          },
-          role: "gridcell",
-          tabIndex: idx === activeIndex ? 0 : -1,
-          "aria-selected": Boolean(isSelected),
-          onKeyDown: function onKeyDown(e) {
-            return handleGridKeyDown(e, idx);
-          },
-          onFocus: function onFocus() {
-            if (!focusedDate || !isSameDay(focusedDate, day)) setFocusedDate(day);
-          },
-          className: cn("h-8 w-8 rounded-md text-sm transition-colors motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-1", {
-            "text-primary-400": !isCurrentMonth,
-            "bg-primary-600 text-white": isSelected,
-            "bg-primary-100 text-primary-600": isTodayDate && !isSelected,
-            "hover:bg-gray-100": isCurrentMonth && !isSelected && !isDisabled,
-            "cursor-not-allowed opacity-50": isDisabled
-          }),
-          onClick: function onClick() {
-            return !isDisabled && handleDateSelect(day);
-          },
-          disabled: isDisabled,
-          children: format(day, "d")
-        }, day.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: function onClick() {
-            onChange === null || onChange === void 0 || onChange(null);
-          },
-          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();
-            onChange === null || onChange === void 0 || onChange(t);
-            setCurrentMonth(t);
-            if (closeOnSelect) setIsOpen(false);
-          },
-          children: "Today"
-        })]
-      }), jsx("div", {
-        className: "text-xs text-primary-500",
-        children: formatDisplayValue()
-      })]
-    })]
+  var calendar = jsx(Calendar, {
+    month: currentMonth,
+    onMonthChange: setCurrentMonth,
+    weekStartsOn: weekStartsOn,
+    isDisabled: isDateDisabled,
+    getDayState: getDayState,
+    onSelect: handleDateSelect,
+    preferredDate: selected,
+    size: mode,
+    swipe: isSheet,
+    autoFocus: !isSheet,
+    locale: locale,
+    gridRef: gridRef
   });
   return jsxs("div", {
     className: "w-full",
@@ -413,7 +199,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         children: "*"
       })]
     }), jsxs("div", {
-      ref: datePickerRef,
+      ref: fieldRef,
       className: "relative",
       children: [jsxs("button", _objectSpread2(_objectSpread2({
         ref: triggerRef,
@@ -429,7 +215,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           "pr-16": showClear && selected
         }, className),
         onClick: function onClick() {
-          return isOpen ? setIsOpen(false) : openAndFocusSelected();
+          return setIsOpen(function (open) {
+            return !open;
+          });
         },
         disabled: disabled,
         "aria-haspopup": "dialog",
@@ -439,7 +227,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           className: "truncate",
           id: valueId,
           children: formatDisplayValue()
-        }), jsx(Calendar, {
+        }), jsx(Calendar$1, {
           className: "h-4 w-4 shrink-0 text-primary-400",
           "aria-hidden": "true"
         })]
@@ -458,7 +246,32 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           className: "h-4 w-4",
           "aria-hidden": "true"
         })
-      }), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)]
+      }), jsxs(PickerSurface, {
+        mode: mode,
+        open: isOpen,
+        onClose: function onClose() {
+          return setIsOpen(false);
+        },
+        title: label || "Select date",
+        portal: portal,
+        floatingRef: floatingRef,
+        floatingStyles: floatingStyles,
+        isPositioned: isPositioned,
+        initialFocus: initialFocus,
+        sheetFooter: jsxs(Fragment, {
+          children: [actions, jsx("div", {
+            className: "text-sm text-primary-500",
+            children: formatDisplayValue()
+          })]
+        }),
+        children: [calendar, !isSheet && jsxs("div", {
+          className: "mt-3 flex items-center justify-between",
+          children: [actions, jsx("div", {
+            className: "text-xs text-primary-500",
+            children: formatDisplayValue()
+          })]
+        })]
+      })]
     }), error ? jsx("p", {
       id: errorId,
       className: "mt-1 text-sm text-error-500",