@expcat/tigercat-react 0.0.1

package/dist/chunk-XS5JP2KO.mjs

@@ -0,0 +1,491 @@
+import { useState, useRef, useEffect } from 'react';
+import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, isSameDay, normalizeDate, isToday, getDatePickerDayCellClasses, datePickerFooterClasses, datePickerFooterButtonClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/DatePicker.tsx
+var Icon = ({ path, className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: icon20ViewBox,
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
+  }
+);
+var isRangeDatePicker = (props) => props.range === true;
+var DatePicker = (props) => {
+  const {
+    size = "md",
+    disabled = false,
+    readonly = false,
+    required = false,
+    clearable = true,
+    format = "yyyy-MM-dd"
+  } = props;
+  const isRangeMode = isRangeDatePicker(props);
+  const placeholder = props.placeholder ?? (isRangeMode ? "Select date range" : "Select date");
+  const divProps = (({
+    value: _value,
+    defaultValue: _defaultValue,
+    range: _range,
+    locale: _locale,
+    labels: _labels,
+    size: _size,
+    format: _format,
+    placeholder: _placeholder,
+    disabled: _disabled,
+    readonly: _readonly,
+    required: _required,
+    minDate: _minDate,
+    maxDate: _maxDate,
+    clearable: _clearable,
+    name: _name,
+    id: _id,
+    onChange: _onChange,
+    onClear: _onClear,
+    className: _className,
+    ...rest
+  }) => rest)(props);
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeDateIso, setActiveDateIso] = useState(null);
+  const [internalValue, setInternalValue] = useState(() => {
+    if (isRangeMode) return null;
+    return parseDate(props.defaultValue ?? null);
+  });
+  const [internalRangeValue, setInternalRangeValue] = useState(() => {
+    if (!isRangeMode) return [null, null];
+    const tuple = props.defaultValue ?? null;
+    if (!tuple) return [null, null];
+    const start = Array.isArray(tuple) ? parseDate(tuple[0]) : null;
+    const end = Array.isArray(tuple) ? parseDate(tuple[1]) : null;
+    return [start, end];
+  });
+  const calendarRef = useRef(null);
+  const inputWrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const pendingFocusIsoRef = useRef(null);
+  const restoreFocusRef = useRef(null);
+  const isControlled = props.value !== void 0;
+  const selectedDate = (() => {
+    if (isRangeMode) return null;
+    const current = isControlled ? props.value : internalValue;
+    return parseDate(current ?? null);
+  })();
+  const selectedRange = (() => {
+    if (!isRangeMode) return [null, null];
+    const tuple = isControlled ? props.value : internalRangeValue;
+    if (!tuple) return [null, null];
+    const start = Array.isArray(tuple) ? parseDate(tuple[0]) : null;
+    const end = Array.isArray(tuple) ? parseDate(tuple[1]) : null;
+    return [start, end];
+  })();
+  const minDateParsed = parseDate(props.minDate ?? null);
+  const maxDateParsed = parseDate(props.maxDate ?? null);
+  const [viewingMonth, setViewingMonth] = useState(
+    (selectedDate ?? selectedRange[0])?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth()
+  );
+  const [viewingYear, setViewingYear] = useState(
+    (selectedDate ?? selectedRange[0])?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()
+  );
+  const displayValue = (() => {
+    if (!isRangeMode) {
+      return selectedDate ? formatDate(selectedDate, format) : "";
+    }
+    const [start, end] = selectedRange;
+    const startText = start ? formatDate(start, format) : "";
+    const endText = end ? formatDate(end, format) : "";
+    if (!startText && !endText) return "";
+    if (startText && endText) return `${startText} - ${endText}`;
+    return startText ? `${startText} - ` : ` - ${endText}`;
+  })();
+  const showClearButton = (() => {
+    if (!clearable || disabled || readonly) return false;
+    if (!isRangeMode) return selectedDate !== null;
+    return selectedRange[0] !== null || selectedRange[1] !== null;
+  })();
+  const calendarDays = getCalendarDays(viewingYear, viewingMonth);
+  const dayNames = getShortDayNames(props.locale);
+  const labels = getDatePickerLabels(props.locale, props.labels);
+  const toggleCalendar = () => {
+    if (!disabled && !readonly) {
+      setIsOpen(!isOpen);
+      if (!isOpen) {
+        restoreFocusRef.current = document.activeElement ?? null;
+        const baseDate = selectedDate ?? selectedRange[0];
+        if (baseDate) {
+          setViewingMonth(baseDate.getMonth());
+          setViewingYear(baseDate.getFullYear());
+        }
+      }
+    }
+  };
+  const closeCalendar = () => {
+    setIsOpen(false);
+  };
+  const getFirstEnabledIsoInView = () => {
+    for (const date of calendarDays) {
+      if (!date) continue;
+      const iso = formatDate(date, "yyyy-MM-dd");
+      const isDisabled = isDateDisabled(date);
+      if (!isDisabled) return iso;
+    }
+    return null;
+  };
+  const getPreferredFocusIso = () => {
+    const focusDate = isRangeMode ? selectedRange[0] ?? selectedRange[1] : selectedDate;
+    if (focusDate) {
+      return formatDate(focusDate, "yyyy-MM-dd");
+    }
+    const today = normalizeDate(/* @__PURE__ */ new Date());
+    if (isDateInRange(today, minDateParsed, maxDateParsed)) {
+      return formatDate(today, "yyyy-MM-dd");
+    }
+    return getFirstEnabledIsoInView();
+  };
+  const focusDateButtonByIso = (iso) => {
+    const button = calendarRef.current?.querySelector(
+      `button[data-date="${iso}"]`
+    );
+    if (!button || button.disabled) return false;
+    button.focus();
+    setActiveDateIso(iso);
+    return true;
+  };
+  const restoreFocus = () => {
+    const target = restoreFocusRef.current ?? inputRef.current;
+    if (!target) return;
+    if (typeof target.focus === "function") {
+      target.focus();
+    }
+  };
+  const addDays = (date, days) => {
+    const next = new Date(date);
+    next.setDate(next.getDate() + days);
+    return next;
+  };
+  const moveFocus = (deltaDays) => {
+    const activeEl = document.activeElement;
+    const currentIso = activeEl?.getAttribute("data-date") ?? activeDateIso ?? null;
+    const baseIso = currentIso ?? getPreferredFocusIso();
+    if (!baseIso) return;
+    const baseDate = parseDate(baseIso);
+    if (!baseDate) return;
+    let candidate = addDays(baseDate, deltaDays);
+    for (let attempts = 0; attempts < 42; attempts++) {
+      const iso = formatDate(candidate, "yyyy-MM-dd");
+      const el = calendarRef.current?.querySelector(
+        `button[data-date="${iso}"]`
+      );
+      if (el && !el.disabled) {
+        el.focus();
+        setActiveDateIso(iso);
+        return;
+      }
+      if (!el) {
+        pendingFocusIsoRef.current = iso;
+        setViewingYear(candidate.getFullYear());
+        setViewingMonth(candidate.getMonth());
+        setActiveDateIso(iso);
+        return;
+      }
+      candidate = addDays(candidate, deltaDays);
+    }
+  };
+  const handleCalendarKeyDown = (event) => {
+    if (!isOpen) return;
+    switch (event.key) {
+      case "Escape": {
+        event.preventDefault();
+        closeCalendar();
+        return;
+      }
+      case "ArrowRight": {
+        event.preventDefault();
+        moveFocus(1);
+        return;
+      }
+      case "ArrowLeft": {
+        event.preventDefault();
+        moveFocus(-1);
+        return;
+      }
+      case "ArrowDown": {
+        event.preventDefault();
+        moveFocus(7);
+        return;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        moveFocus(-7);
+        return;
+      }
+      case "Enter":
+      case " ": {
+        const activeEl = document.activeElement;
+        if (activeEl?.tagName === "BUTTON" && activeEl.dataset.date) {
+          event.preventDefault();
+          if (!activeEl.disabled) activeEl.click();
+        }
+        return;
+      }
+    }
+  };
+  const setRangeValue = (next) => {
+    if (!isControlled) {
+      setInternalRangeValue(next);
+    }
+    props.onChange?.(next);
+  };
+  const selectDate = (date) => {
+    if (!date) return;
+    const normalizedDate = normalizeDate(date);
+    if (!isDateInRange(normalizedDate, minDateParsed, maxDateParsed)) {
+      return;
+    }
+    if (!isRangeMode) {
+      if (!isControlled) {
+        setInternalValue(normalizedDate);
+      }
+      props.onChange?.(normalizedDate);
+      closeCalendar();
+      return;
+    }
+    const [start, end] = selectedRange;
+    if (!start || start && end) {
+      setRangeValue([normalizedDate, null]);
+      return;
+    }
+    if (normalizedDate < start) {
+      setRangeValue([start, start]);
+    } else {
+      setRangeValue([start, normalizedDate]);
+    }
+  };
+  const setToday = () => {
+    selectDate(/* @__PURE__ */ new Date());
+  };
+  const clearDate = (event) => {
+    event.stopPropagation();
+    if (!isRangeMode) {
+      if (!isControlled) {
+        setInternalValue(null);
+      }
+      props.onChange?.(null);
+    } else {
+      setRangeValue([null, null]);
+    }
+    props.onClear?.();
+  };
+  const previousMonth = () => {
+    if (viewingMonth === 0) {
+      setViewingMonth(11);
+      setViewingYear(viewingYear - 1);
+    } else {
+      setViewingMonth(viewingMonth - 1);
+    }
+  };
+  const nextMonth = () => {
+    if (viewingMonth === 11) {
+      setViewingMonth(0);
+      setViewingYear(viewingYear + 1);
+    } else {
+      setViewingMonth(viewingMonth + 1);
+    }
+  };
+  const isDateDisabled = (date) => {
+    if (!date) return true;
+    return !isDateInRange(date, minDateParsed, maxDateParsed);
+  };
+  const isCurrentMonth = (date) => {
+    if (!date) return false;
+    return date.getMonth() === viewingMonth;
+  };
+  const handleInputClick = () => {
+    toggleCalendar();
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (calendarRef.current && inputWrapperRef.current && !calendarRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
+        closeCalendar();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("click", handleClickOutside);
+      return () => {
+        document.removeEventListener("click", handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (isOpen) {
+      restoreFocusRef.current = document.activeElement ?? null;
+      const preferred = pendingFocusIsoRef.current ?? getPreferredFocusIso();
+      pendingFocusIsoRef.current = null;
+      setTimeout(() => {
+        if (preferred && focusDateButtonByIso(preferred)) return;
+        const fallback = getFirstEnabledIsoInView();
+        if (fallback) focusDateButtonByIso(fallback);
+      }, 0);
+      return;
+    }
+    setTimeout(() => {
+      restoreFocus();
+    }, 0);
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const pending = pendingFocusIsoRef.current;
+    if (!pending) return;
+    pendingFocusIsoRef.current = null;
+    setTimeout(() => {
+      if (focusDateButtonByIso(pending)) return;
+      const fallback = getFirstEnabledIsoInView();
+      if (fallback) focusDateButtonByIso(fallback);
+    }, 0);
+  }, [isOpen, viewingMonth, viewingYear]);
+  const inputClasses = getDatePickerInputClasses(size, disabled || readonly);
+  const iconButtonClasses = getDatePickerIconButtonClasses(size);
+  return /* @__PURE__ */ jsxs("div", { className: classNames(datePickerBaseClasses, props.className), ...divProps, children: [
+    /* @__PURE__ */ jsxs("div", { ref: inputWrapperRef, className: datePickerInputWrapperClasses, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          className: inputClasses,
+          value: displayValue,
+          placeholder,
+          disabled,
+          readOnly: true,
+          required,
+          name: props.name,
+          id: props.id,
+          onClick: handleInputClick,
+          "aria-label": placeholder || "Select date"
+        }
+      ),
+      showClearButton && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: datePickerClearButtonClasses,
+          onClick: clearDate,
+          "aria-label": labels.clearDate,
+          children: /* @__PURE__ */ jsx(Icon, { path: CloseIconPath, className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: iconButtonClasses,
+          disabled: disabled || readonly,
+          onClick: toggleCalendar,
+          "aria-label": labels.toggleCalendar,
+          children: /* @__PURE__ */ jsx(Icon, { path: CalendarIconPath, className: "w-5 h-5" })
+        }
+      )
+    ] }),
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: calendarRef,
+        className: datePickerCalendarClasses,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": labels.calendar,
+        onKeyDown: handleCalendarKeyDown,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: datePickerCalendarHeaderClasses, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: datePickerNavButtonClasses,
+                onClick: previousMonth,
+                "aria-label": labels.previousMonth,
+                children: /* @__PURE__ */ jsx(Icon, { path: ChevronLeftIconPath, className: "w-5 h-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: datePickerMonthYearClasses, children: formatMonthYear(viewingYear, viewingMonth, props.locale) }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: datePickerNavButtonClasses,
+                onClick: nextMonth,
+                "aria-label": labels.nextMonth,
+                children: /* @__PURE__ */ jsx(Icon, { path: ChevronRightIconPath, className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: datePickerCalendarGridClasses, role: "row", children: dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: datePickerDayNameClasses, role: "columnheader", children: day }, day)) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: datePickerCalendarGridClasses,
+              role: "grid",
+              "aria-rowcount": 6,
+              "aria-colcount": 7,
+              children: calendarDays.map((date, index) => {
+                if (!date) return null;
+                const [rangeStart, rangeEnd] = selectedRange;
+                const isRangeStart = isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
+                const isRangeEnd = isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
+                const isInRange = isRangeMode && rangeStart && rangeEnd && normalizeDate(date) >= normalizeDate(rangeStart) && normalizeDate(date) <= normalizeDate(rangeEnd);
+                const isSelected = !isRangeMode ? selectedDate ? isSameDay(date, selectedDate) : false : isRangeStart || isRangeEnd;
+                const isCurrentMonthDay = isCurrentMonth(date);
+                const isTodayDay = isToday(date);
+                const isSelectingRangeEnd = isRangeMode && Boolean(rangeStart) && !rangeEnd;
+                const isBeforeRangeStart = isSelectingRangeEnd && rangeStart && normalizeDate(date) < normalizeDate(rangeStart);
+                const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
+                const iso = formatDate(date, "yyyy-MM-dd");
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: getDatePickerDayCellClasses(
+                      isCurrentMonthDay,
+                      isSelected,
+                      isTodayDay,
+                      isDisabled,
+                      Boolean(isInRange),
+                      Boolean(isRangeStart),
+                      Boolean(isRangeEnd)
+                    ),
+                    disabled: isDisabled,
+                    onClick: () => selectDate(date),
+                    role: "gridcell",
+                    "data-date": iso,
+                    onFocus: () => setActiveDateIso(iso),
+                    tabIndex: activeDateIso === iso && !isDisabled ? 0 : -1,
+                    "aria-label": iso,
+                    "aria-selected": isSelected,
+                    "aria-current": isTodayDay ? "date" : void 0,
+                    children: date.getDate()
+                  },
+                  index
+                );
+              })
+            }
+          ),
+          isRangeMode && /* @__PURE__ */ jsxs("div", { className: datePickerFooterClasses, children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: datePickerFooterButtonClasses, onClick: setToday, children: labels.today }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: datePickerFooterButtonClasses,
+                onClick: closeCalendar,
+                children: labels.ok
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+export { DatePicker };