@yamada-ui/calendar/dist/chunk-UMK6LUR5.mjs

Yamada UI calendar component

"use client"
import {
  getRangeYears,
  isSameDate,
  onShouldFocus
} from "./chunk-BPJGE3HG.mjs";

// src/use-calendar.ts
import { useI18n, useTheme } from "@yamada-ui/core";
import { useControllableState } from "@yamada-ui/use-controllable-state";
import {
  createContext,
  isArray,
  useCallbackRef,
  useUpdateEffect
} from "@yamada-ui/utils";
import dayjs from "dayjs";
import { useCallback, useRef, useState } from "react";
var [CalendarProvider, useCalendarContext] = createContext({
  name: "CalendarContext",
  errorMessage: `useCalendarContext returned is 'undefined'. Seems you forgot to wrap the components in "<Calendar />"`
});
var useCalendar = ({
  type: typeProp,
  amountOfMonths = 1,
  dateFormat = "MMMM YYYY",
  defaultMonth,
  defaultType,
  defaultValue,
  disableOutsideDays = false,
  enableMultiple = false,
  enableRange = false,
  excludeDate,
  firstDayOfWeek = "monday",
  hiddenOutsideDays = false,
  holidays = [],
  locale,
  maxDate,
  maxSelectValues,
  minDate,
  minSelectValues,
  month: monthProp,
  monthFormat = "MMM",
  nextRef,
  paginateBy = amountOfMonths,
  prevRef,
  today = false,
  typeRef,
  value: valueProp,
  weekdayFormat = "dd",
  weekendDays = [0, 6],
  withControls = true,
  withHeader = true,
  withLabel = true,
  withWeekdays = true,
  yearFormat = "YYYY",
  onChange: onChangeProp,
  onChangeMonth: onChangeMonthProp,
  onChangeType: onChangeTypeProp,
  __selectType = "date",
  ...rest
}) => {
  var _a, _b, _c;
  const { locale: defaultLocale } = useI18n();
  const { theme } = useTheme();
  locale != null ? locale : locale = (_c = (_b = (_a = theme.__config) == null ? void 0 : _a.date) == null ? void 0 : _b.locale) != null ? _c : defaultLocale;
  const [type, onChangeType] = useControllableState({
    defaultValue: defaultType != null ? defaultType : "date",
    value: typeProp
  });
  const setType = useCallbackRef(
    (type2, year2, month2) => {
      onChangeType(type2);
      onChangeTypeProp == null ? void 0 : onChangeTypeProp(type2, year2, month2);
    },
    []
  );
  const prevValueRef = useRef(void 0);
  const [value, setValue] = useControllableState({
    defaultValue: defaultValue != null ? defaultValue : enableMultiple || enableRange ? [] : void 0,
    value: valueProp,
    onChange: onChangeProp
  });
  const [hoveredValue, setHoveredValue] = useState(void 0);
  const multi = isArray(value);
  const range = enableRange && multi;
  const resolvedValue = multi || range ? value.filter(Boolean) : [];
  if (range) disableOutsideDays = false;
  const [month, setMonth] = useControllableState({
    defaultValue: () => {
      if (!multi && value) {
        defaultMonth != null ? defaultMonth : defaultMonth = new Date(new Date(value).setDate(1));
      } else if ((multi || range) && resolvedValue.length) {
        defaultMonth != null ? defaultMonth : defaultMonth = new Date(new Date(resolvedValue.at(-1)).setDate(1));
      } else {
        defaultMonth != null ? defaultMonth : defaultMonth = new Date((/* @__PURE__ */ new Date()).setDate(1));
      }
      return defaultMonth;
    },
    value: monthProp,
    onChange: onChangeMonthProp,
    onUpdate: (prev, next) => !isSameDate(prev, next)
  });
  const defaultYear = month.getFullYear();
  const [year, setYear] = useState(defaultYear);
  const [internalYear, setInternalYear] = useState(year);
  const minYear = minDate instanceof Date ? minDate.getFullYear() : 1;
  const maxYear = maxDate instanceof Date ? maxDate.getFullYear() : 1e4;
  const rangeYears = getRangeYears(internalYear);
  const nextMonth = dayjs(month).add(amountOfMonths, "months").toDate();
  const prevMonth = dayjs(month).subtract(1, "months").toDate();
  const yearRefs = useRef(/* @__PURE__ */ new Map());
  const monthRefs = useRef(/* @__PURE__ */ new Map());
  const dayRefs = useRef(/* @__PURE__ */ new Map());
  useUpdateEffect(() => {
    if (!defaultMonth) return;
    if (range && isArray(prevValueRef.current) && isArray(valueProp)) {
      const prevValue = prevValueRef.current.filter(Boolean);
      const nextValue = valueProp.filter(Boolean);
      if (prevValue.length === 1) {
        const reverse = !isSameDate(prevValue[0], nextValue[0]);
        if (!reverse) {
          if (nextValue[1])
            defaultMonth = new Date(new Date(nextValue[1]).setDate(1));
        } else {
          if (nextValue[0])
            defaultMonth = new Date(new Date(nextValue[0]).setDate(1));
        }
      }
    }
    setMonth(defaultMonth);
    setYear(defaultMonth.getFullYear());
    setInternalYear(defaultMonth.getFullYear());
    prevValueRef.current = valueProp;
  }, [valueProp]);
  useUpdateEffect(() => {
    if (!value || amountOfMonths > 1) return;
    if (multi || range) return;
    const year2 = value.getFullYear();
    if (type === "year") {
      setYear(year2);
      setInternalYear((prev) => {
        const contain = rangeYears.includes(year2);
        if (contain) {
          return prev;
        } else {
          return year2;
        }
      });
    } else {
      setMonth(value);
    }
  }, [value, amountOfMonths]);
  useUpdateEffect(() => {
    if (!range) return;
    if (value.length !== 1) setHoveredValue(void 0);
  }, [range, value]);
  useUpdateEffect(() => {
    if (__selectType === "year") return;
    setYear(month.getFullYear());
    setInternalYear(month.getFullYear());
  }, [month.getFullYear()]);
  useUpdateEffect(() => {
    switch (type) {
      case "year":
        onShouldFocus(yearRefs, (i) => year === rangeYears[i]);
        break;
      case "month":
        onShouldFocus(
          monthRefs,
          (value2) => month.getFullYear() === year && month.getMonth() === value2
        );
        break;
      default:
        onShouldFocus(dayRefs, (key) => {
          const [, month2, date] = key.split("-").map(Number);
          if (!multi) {
            return (value == null ? void 0 : value.getMonth()) === month2 && (value == null ? void 0 : value.getDate()) === date;
          } else {
            return value.some(
              (value2) => (value2 == null ? void 0 : value2.getMonth()) === month2 && (value2 == null ? void 0 : value2.getDate()) === date
            );
          }
        });
        break;
    }
  }, [type]);
  useUpdateEffect(() => {
    setValue(valueProp);
  }, [valueProp]);
  const getContainerProps = useCallback(
    (props = {}, ref = null) => ({
      ...rest,
      ...props,
      ref
    }),
    [rest]
  );
  return {
    type,
    amountOfMonths,
    dateFormat,
    dayRefs,
    disableOutsideDays,
    enableRange,
    excludeDate,
    firstDayOfWeek,
    hiddenOutsideDays,
    holidays,
    hoveredValue,
    internalYear,
    locale,
    maxDate,
    maxSelectValues,
    maxYear,
    minDate,
    minSelectValues,
    minYear,
    month,
    monthFormat,
    monthRefs,
    nextMonth,
    nextRef,
    paginateBy,
    prevMonth,
    prevRef,
    rangeYears,
    setHoveredValue,
    setInternalYear,
    setMonth,
    setType,
    setValue,
    setYear,
    today,
    typeRef,
    value,
    weekdayFormat,
    weekendDays,
    withControls,
    withHeader,
    withLabel,
    withWeekdays,
    year,
    yearFormat,
    yearRefs,
    getContainerProps,
    __selectType
  };
};

export {
  CalendarProvider,
  useCalendarContext,
  useCalendar
};
//# sourceMappingURL=chunk-UMK6LUR5.mjs.map