@dreamtree-org/twreact-ui 1.3.0 → 1.3.2

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

@@ -0,0 +1,436 @@
+'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, subMonths, format, addMonths, isSameDay, isSameMonth, isToday, isBefore, isAfter } from 'date-fns';
+import { cn } from '../../utils/cn.js';
+import { ChevronLeft, ChevronRight, X, Calendar } from 'lucide-react';
+
+var _excluded = ["value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "minDate", "maxDate", "className", "weekStartsOn", "portal", "displayFormat", "locale", "showClear", "closeOnSelect"];
+var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Select date..." : _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 || "datepicker-".concat(reactId);
+  var labelId = "".concat(fieldId, "-label");
+  var valueId = "".concat(fieldId, "-value");
+  var errorId = "".concat(fieldId, "-error");
+  var helperId = "".concat(fieldId, "-helper");
+  // 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;
+  }, [value]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(selected || new Date()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentMonth = _useState4[0],
+    setCurrentMonth = _useState4[1];
+  var datePickerRef = useRef(null);
+  var popupRef = useRef(null);
+  var gridButtonRefs = useRef([]);
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    popupStyle = _useState6[0],
+    setPopupStyle = _useState6[1];
+  useImperativeHandle(forwardedRef, function () {
+    return datePickerRef.current;
+  }, []);
+  // Keep currentMonth in sync with external value changes
+  var _useState7 = useState(selected),
+    _useState8 = _slicedToArray(_useState7, 2),
+    prevSelected = _useState8[0],
+    setPrevSelected = _useState8[1];
+  if (selected !== prevSelected) {
+    setPrevSelected(selected);
+    if (selected) setCurrentMonth(selected);
+  }
+  // Close on outside click
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      if (datePickerRef.current && !datePickerRef.current.contains(e.target) && popupRef.current && !popupRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      return document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  // Close on escape and keyboard navigation when open
+  useEffect(function () {
+    var handleKey = function handleKey(e) {
+      if (!isOpen) return;
+      if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    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;
+  };
+  var formatDisplayValue = function formatDisplayValue() {
+    if (!selected) return placeholder;
+    return format(selected, displayFormat, {
+      locale: locale
+    });
+  };
+  var handleDateSelect = function handleDateSelect(date) {
+    if (isDateDisabled(date)) return;
+    onChange === null || onChange === void 0 || onChange(date);
+    if (closeOnSelect) setIsOpen(false);
+  };
+  // keyboard navigation inside the calendar grid
+  var focusDayAtIndex = function focusDayAtIndex(index) {
+    var btn = gridButtonRefs.current[index];
+    if (btn && typeof btn.focus === "function") btn.focus();
+  };
+  var handleGridKeyDown = function handleGridKeyDown(e, idx) {
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", "Enter"].includes(e.key)) {
+      e.preventDefault();
+    }
+    switch (e.key) {
+      case "ArrowLeft":
+        focusDayAtIndex(Math.max(0, idx - 1));
+        break;
+      case "ArrowRight":
+        focusDayAtIndex(Math.min(days.length - 1, idx + 1));
+        break;
+      case "ArrowUp":
+        focusDayAtIndex(Math.max(0, idx - 7));
+        break;
+      case "ArrowDown":
+        focusDayAtIndex(Math.min(days.length - 1, idx + 7));
+        break;
+      case "PageUp":
+        setCurrentMonth(function (m) {
+          return subMonths(m, 1);
+        });
+        break;
+      case "PageDown":
+        setCurrentMonth(function (m) {
+          return addMonths(m, 1);
+        });
+        break;
+      case "Home":
+        focusDayAtIndex(Math.floor(idx / 7) * 7);
+        break;
+      case "End":
+        focusDayAtIndex(Math.min(days.length - 1, Math.floor(idx / 7) * 7 + 6));
+        break;
+      case "Enter":
+        if (!isDateDisabled(days[idx])) handleDateSelect(days[idx]);
+        break;
+    }
+  };
+  var openAndFocusSelected = function openAndFocusSelected() {
+    setIsOpen(true);
+    // focus after opening on next tick
+    setTimeout(function () {
+      var idx = selected ? days.findIndex(function (d) {
+        return isSameDay(d, selected);
+      }) : days.findIndex(function (d) {
+        return isToday(d);
+      });
+      if (idx >= 0) focusDayAtIndex(idx);
+    }, 0);
+  };
+  // 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);
+    };
+  }, [isOpen, currentMonth]);
+  var header = jsxs("div", {
+    className: "mb-4 flex items-center justify-between",
+    children: [jsx("button", {
+      type: "button",
+      className: "rounded-md p-1 hover:bg-gray-100",
+      onClick: function onClick() {
+        return setCurrentMonth(subMonths(currentMonth, 1));
+      },
+      "aria-label": "Previous month",
+      children: jsx(ChevronLeft, {
+        className: "h-4 w-4"
+      })
+    }), jsx("h3", {
+      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(addMonths(currentMonth, 1));
+      },
+      "aria-label": "Next month",
+      children: jsx(ChevronRight, {
+        className: "h-4 w-4"
+      })
+    })]
+  });
+  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: isSelected ? 0 : -1,
+          "aria-selected": isSelected,
+          onKeyDown: function onKeyDown(e) {
+            return handleGridKeyDown(e, idx);
+          },
+          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": 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()
+      })]
+    })]
+  });
+  return jsxs("div", {
+    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": !selected
+        }, className),
+        onClick: function onClick() {
+          return isOpen ? setIsOpen(false) : openAndFocusSelected();
+        },
+        disabled: disabled,
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen
+      }, props), {}, {
+        children: [jsx("span", {
+          className: "truncate",
+          id: valueId,
+          children: formatDisplayValue()
+        }), jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [showClear && selected && jsx("div", {
+            type: "button",
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              onChange === null || onChange === void 0 || onChange(null);
+            },
+            "aria-label": "Clear date",
+            className: "p-1",
+            children: jsx(X, {
+              className: "h-4 w-4 text-primary-400"
+            })
+          }), jsx(Calendar, {
+            className: "h-4 w-4 text-primary-400"
+          })]
+        })]
+      })), 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]
+  });
+});
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker as default };