@dreamtree-org/twreact-ui 1.2.1 → 1.3.1

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

@@ -0,0 +1,494 @@
+'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 { cn } from '../../utils/cn.js';
+import { ChevronLeft, ChevronRight, Calendar, X } from 'lucide-react';
+
+var _excluded = ["value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "minDate", "maxDate", "className", "weekStartsOn", "portal", "displayFormat", "locale", "showClear", "closeOnSelect"];
+/*
+  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).
+*/
+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 DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Select date range..." : _ref$placeholder,
+    label = _ref.label,
+    error = _ref.error,
+    helperText = _ref.helperText,
+    disabled = _ref.disabled,
+    required = _ref.required,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    className = _ref.className,
+    _ref$weekStartsOn = _ref.weekStartsOn,
+    weekStartsOn = _ref$weekStartsOn === void 0 ? 0 : _ref$weekStartsOn,
+    _ref$portal = _ref.portal,
+    portal = _ref$portal === void 0 ? false : _ref$portal,
+    _ref$displayFormat = _ref.displayFormat,
+    displayFormat = _ref$displayFormat === void 0 ? "MMM dd, yyyy" : _ref$displayFormat,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? undefined : _ref$locale,
+    _ref$showClear = _ref.showClear,
+    showClear = _ref$showClear === void 0 ? true : _ref$showClear,
+    _ref$closeOnSelect = _ref.closeOnSelect,
+    closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Stable ids wiring label / helper / error to the trigger button.
+  // A consumer `id` (spread onto the trigger via ...props) wins.
+  var reactId = useId();
+  var fieldId = props.id || "daterangepicker-".concat(reactId);
+  var labelId = "".concat(fieldId, "-label");
+  var valueId = "".concat(fieldId, "-value");
+  var errorId = "".concat(fieldId, "-error");
+  var helperId = "".concat(fieldId, "-helper");
+  var start = useMemo(function () {
+    return normalizeDate(value === null || value === void 0 ? void 0 : value.start);
+  }, [value]);
+  var end = useMemo(function () {
+    return normalizeDate(value === null || value === void 0 ? void 0 : value.end);
+  }, [value]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(start || new Date()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentMonth = _useState4[0],
+    setCurrentMonth = _useState4[1];
+  // local selection state so user can pick start then end before commit
+  var _useState5 = useState(start),
+    _useState6 = _slicedToArray(_useState5, 2),
+    localStart = _useState6[0],
+    setLocalStart = _useState6[1];
+  var _useState7 = useState(end),
+    _useState8 = _slicedToArray(_useState7, 2),
+    localEnd = _useState8[0],
+    setLocalEnd = _useState8[1];
+  // hover preview while picking second date
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    hoverDate = _useState0[0],
+    setHoverDate = _useState0[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];
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setLocalStart(start);
+    setLocalEnd(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
+  useEffect(function () {
+    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;
+        }
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      return document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [localStart, localEnd]);
+  // Keyboard handling: Escape should not close when only start selected
+  useEffect(function () {
+    var handleKey = function handleKey(e) {
+      if (!isOpen) return;
+      if (e.key === "Escape") {
+        if (localStart && !localEnd) return; // ignore escape while selecting range
+        setIsOpen(false);
+      }
+    };
+    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;
+  };
+  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]);
+  // 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);
+    }
+    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);
+      return;
+    }
+  };
+  var clearSelection = function clearSelection() {
+    setLocalStart(null);
+    setLocalEnd(null);
+    setHoverDate(null);
+    onChange === null || onChange === void 0 || onChange(null);
+  };
+  // 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, {
+      locale: locale
+    }), " \u2014 ").concat(format(localEnd, displayFormat, {
+      locale: locale
+    }));
+  };
+  var header = jsxs("div", {
+    className: "mb-2 flex items-center justify-between",
+    children: [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", {
+      type: "button",
+      className: "rounded-md p-1 hover:bg-gray-100",
+      onClick: function onClick() {
+        return setCurrentMonth(function (m) {
+          return addMonths(m, 1);
+        });
+      },
+      "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
+          }))
+        })
+      })]
+    })]
+  });
+  return jsxs("div", {
+    ref: ref,
+    className: "w-full",
+    children: [label && jsxs("label", {
+      id: labelId,
+      htmlFor: fieldId,
+      className: "block text-sm font-medium mb-1",
+      children: [label, required && jsx("span", {
+        className: "text-error-500 ml-1",
+        children: "*"
+      })]
+    }), jsxs("div", {
+      ref: datePickerRef,
+      className: "relative",
+      children: [jsxs("button", _objectSpread2(_objectSpread2({
+        type: "button",
+        id: fieldId,
+        "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
+        "aria-describedby": error ? errorId : helperText ? helperId : undefined,
+        "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,
+          "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;
+          });
+        },
+        disabled: disabled,
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen
+      }, props), {}, {
+        children: [jsx("span", {
+          className: "truncate",
+          id: valueId,
+          children: formatDisplay()
+        }), jsx(Calendar, {
+          className: "h-4 w-4 shrink-0 text-primary-400",
+          "aria-hidden": "true"
+        })]
+      })), showClearButton && jsx("button", {
+        type: "button",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          clearSelection();
+        },
+        "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",
+        children: jsx(X, {
+          className: "h-4 w-4 text-primary-400",
+          "aria-hidden": "true"
+        })
+      }), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)]
+    }), error ? jsx("p", {
+      id: errorId,
+      className: "mt-1 text-sm text-error-500",
+      children: error
+    }) : helperText ? jsx("p", {
+      id: helperId,
+      className: "mt-1 text-sm text-muted",
+      children: helperText
+    }) : null]
+  });
+});
+DateRangePicker.displayName = "DateRangePicker";
+
+export { DateRangePicker as default };