@yamada-ui/calendar
Version:
Yamada UI calendar component
1,359 lines (1,347 loc) • 112 kB
JavaScript
"use client"
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/range-date-picker.tsx
var range_date_picker_exports = {};
__export(range_date_picker_exports, {
RangeDatePicker: () => RangeDatePicker,
RangeDatePickerField: () => RangeDatePickerField
});
module.exports = __toCommonJS(range_date_picker_exports);
var import_core9 = require("@yamada-ui/core");
var import_popover2 = require("@yamada-ui/popover");
var import_portal2 = require("@yamada-ui/portal");
var import_utils16 = require("@yamada-ui/utils");
// src/calendar.tsx
var import_core6 = require("@yamada-ui/core");
var import_utils11 = require("@yamada-ui/utils");
var import_react7 = require("react");
// src/month.tsx
var import_button2 = require("@yamada-ui/button");
var import_core3 = require("@yamada-ui/core");
var import_utils6 = require("@yamada-ui/utils");
var import_dayjs5 = __toESM(require("dayjs"));
var import_react4 = require("react");
// src/calendar-header.tsx
var import_button = require("@yamada-ui/button");
var import_core2 = require("@yamada-ui/core");
var import_icon = require("@yamada-ui/icon");
var import_utils4 = require("@yamada-ui/utils");
// src/use-calendar.ts
var import_core = require("@yamada-ui/core");
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
var import_utils2 = require("@yamada-ui/utils");
var import_dayjs2 = __toESM(require("dayjs"));
var import_react = require("react");
// src/calendar-utils.ts
var import_utils = require("@yamada-ui/utils");
var import_dayjs = __toESM(require("dayjs"));
var getFirstOfWeek = (date, firstDayOfWeek) => {
const value = new Date(date);
const day = value.getDay() || 7;
const sunday = firstDayOfWeek === "sunday";
const clampToFirstDay = sunday ? day : day - 1;
if (sunday && day !== 0 || day !== 1) value.setHours(-24 * clampToFirstDay);
return value;
};
var getLastOfWeek = (date, firstDayOfWeek) => {
const value = new Date(date);
const day = value.getDay();
const sunday = firstDayOfWeek === "sunday";
const clampToLastDay = 7 - (sunday ? day + 1 : day);
if (sunday && day !== 6 || day !== 0)
value.setDate(value.getDate() + clampToLastDay);
return value;
};
var getWeekdays = (locale, firstDayOfWeek, format = "dd") => {
let weekdays = [];
const date = getFirstOfWeek(/* @__PURE__ */ new Date(), firstDayOfWeek);
for (let i = 0; i < 7; i += 1) {
const weekday = (0, import_dayjs.default)(date).locale(locale).format(format);
weekdays = [...weekdays, weekday];
date.setDate(date.getDate() + 1);
}
return weekdays;
};
var getMonthDays = (date, firstDayOfWeek) => {
const currentMonth = date.getMonth();
const firstOfMonth = new Date(date.getFullYear(), currentMonth, 1);
const lastOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
const endDate = getLastOfWeek(lastOfMonth, firstDayOfWeek);
const firstDate = getFirstOfWeek(firstOfMonth, firstDayOfWeek);
const weeks = [];
while (firstDate <= endDate) {
const days = [];
for (let i = 0; i < 7; i += 1) {
days.push(new Date(firstDate));
firstDate.setDate(firstDate.getDate() + 1);
}
weeks.push(days);
}
return weeks;
};
var getRangeYears = (year) => {
const rounded = year - 6;
let rangeYears = [];
for (let i = 0; i < 12; i += 1) {
const rangeYear = rounded + i;
rangeYears = [...rangeYears, rangeYear];
}
return rangeYears;
};
var getRangeMonths = (locale, format) => {
const rounded = new Date(1993, 0, 1);
let rangeMonths = [];
for (let i = 0; i < 12; i += 1) {
const rangeMonth = (0, import_dayjs.default)(rounded).locale(locale).format(format);
rangeMonths = [...rangeMonths, rangeMonth];
rounded.setMonth(rounded.getMonth() + 1);
}
return rangeMonths;
};
var getFormattedLabel = (dateOrYear, locale, format) => {
if (dateOrYear == null || dateOrYear === -1) {
return "";
} else if (dateOrYear instanceof Date) {
return (0, import_dayjs.default)(dateOrYear).locale(locale).format(format);
} else {
return (0, import_dayjs.default)(new Date(dateOrYear, 1, 1)).locale(locale).format(format);
}
};
var isSameMonth = (date, comparison) => (date == null ? void 0 : date.getFullYear()) === (comparison == null ? void 0 : comparison.getFullYear()) && (date == null ? void 0 : date.getMonth()) === (comparison == null ? void 0 : comparison.getMonth());
var isSameDate = (date, comparison) => isSameMonth(date, comparison) && (date == null ? void 0 : date.getDate()) === (comparison == null ? void 0 : comparison.getDate());
var isInRange = (date, minDate, maxDate) => {
const hasMinDate = minDate instanceof Date;
const hasMaxDate = maxDate instanceof Date;
if (!hasMaxDate && !hasMinDate) return true;
const minInRange = hasMinDate ? isSomeAfterDate(date, minDate) : true;
const maxInRange = hasMaxDate ? isSomeBeforeDate(date, maxDate) : true;
return maxInRange && minInRange;
};
var isMonthInRange = ({
date,
maxDate,
minDate
}) => {
const hasMinDate = minDate instanceof Date;
const hasMaxDate = maxDate instanceof Date;
if (!hasMaxDate && !hasMinDate) return true;
const firstOfMonth = (0, import_dayjs.default)(date).startOf("month");
const lastOfMonth = (0, import_dayjs.default)(date).endOf("month");
const minInRange = hasMinDate ? lastOfMonth.isAfter(minDate) : true;
const maxInRange = hasMaxDate ? firstOfMonth.isBefore(maxDate) : true;
return maxInRange && minInRange;
};
var sortDates = (dates, type = "asc") => {
if (type === "asc") {
return dates.sort((a, b) => (0, import_dayjs.default)(a).isAfter(b, "day") ? 1 : -1);
} else {
return dates.sort((a, b) => (0, import_dayjs.default)(a).isBefore(b, "day") ? 1 : -1);
}
};
var isSomeAfterDate = (value, date) => (date instanceof Date || date instanceof import_dayjs.default) && ((0, import_dayjs.default)(value).isSame(date) || isAfterDate(value, date));
var isSomeBeforeDate = (value, date) => (date instanceof Date || date instanceof import_dayjs.default) && ((0, import_dayjs.default)(value).isSame(date) || isBeforeDate(value, date));
var isAfterDate = (value, date) => (date instanceof Date || date instanceof import_dayjs.default) && (0, import_dayjs.default)(date).isBefore(value, "day");
var isBeforeDate = (value, date) => (date instanceof Date || date instanceof import_dayjs.default) && (0, import_dayjs.default)(date).isAfter(value, "day");
var onShouldFocus = (refs, validateFunc, isFirst = true) => {
let targetValue;
let targetEl;
for (const value of refs.current.keys()) {
const selected = validateFunc(value);
if (selected) targetValue = value;
}
if (typeof targetValue === "number") {
const ref = refs.current.get(targetValue);
targetEl = ref == null ? void 0 : ref.current;
} else {
const values = [...refs.current.values()];
const firstRef = values[0];
const lastRef = values[values.length - 1];
targetEl = isFirst ? firstRef == null ? void 0 : firstRef.current : lastRef == null ? void 0 : lastRef.current;
}
if (targetEl) {
targetEl.focus();
targetEl.tabIndex = 0;
}
};
var getFocused = (refs) => {
for (const [value, ref] of refs.current.entries()) {
const focused = ref.current ? (0, import_utils.isActiveElement)(ref.current) : false;
if (focused) return value;
}
};
var getRangeFirstDay = (refs) => {
const days = [...refs.current.keys()];
return days[0];
};
var getRangeLastDay = (refs) => {
const days = [...refs.current.keys()];
return days[days.length - 1];
};
var disableAllTabIndex = (refs) => {
for (const ref of refs.current.values()) {
if (ref.current) ref.current.tabIndex = -1;
}
};
var isDisabledDate = ({
disableOutsideDays,
endDate,
excludeDate,
maxDate,
maxTrulySelectStartDate,
maybeEndDate,
maybeStartDate,
minDate,
minTrulySelectStartDate,
outside,
startDate,
value
}) => isAfterDate(value, maxDate) || isBeforeDate(value, minDate) || isAfterDate(value, maybeStartDate) && isBeforeDate(value, maxTrulySelectStartDate) && !endDate || isBeforeDate(value, maybeEndDate) && isAfterDate(value, minTrulySelectStartDate) && !startDate || !!(excludeDate == null ? void 0 : excludeDate(value)) || !!disableOutsideDays && !!outside;
// src/use-calendar.ts
var [CalendarProvider, useCalendarContext] = (0, import_utils2.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 } = (0, import_core.useI18n)();
const { theme } = (0, import_core.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] = (0, import_use_controllable_state.useControllableState)({
defaultValue: defaultType != null ? defaultType : "date",
value: typeProp
});
const setType = (0, import_utils2.useCallbackRef)(
(type2, year2, month2) => {
onChangeType(type2);
onChangeTypeProp == null ? void 0 : onChangeTypeProp(type2, year2, month2);
},
[]
);
const prevValueRef = (0, import_react.useRef)(void 0);
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
defaultValue: defaultValue != null ? defaultValue : enableMultiple || enableRange ? [] : void 0,
value: valueProp,
onChange: onChangeProp
});
const [hoveredValue, setHoveredValue] = (0, import_react.useState)(void 0);
const multi = (0, import_utils2.isArray)(value);
const range = enableRange && multi;
const resolvedValue = multi || range ? value.filter(Boolean) : [];
if (range) disableOutsideDays = false;
const [month, setMonth] = (0, import_use_controllable_state.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] = (0, import_react.useState)(defaultYear);
const [internalYear, setInternalYear] = (0, import_react.useState)(year);
const minYear = minDate instanceof Date ? minDate.getFullYear() : 1;
const maxYear = maxDate instanceof Date ? maxDate.getFullYear() : 1e4;
const rangeYears = getRangeYears(internalYear);
const nextMonth = (0, import_dayjs2.default)(month).add(amountOfMonths, "months").toDate();
const prevMonth = (0, import_dayjs2.default)(month).subtract(1, "months").toDate();
const yearRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
const monthRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
const dayRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
(0, import_utils2.useUpdateEffect)(() => {
if (!defaultMonth) return;
if (range && (0, import_utils2.isArray)(prevValueRef.current) && (0, import_utils2.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]);
(0, import_utils2.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]);
(0, import_utils2.useUpdateEffect)(() => {
if (!range) return;
if (value.length !== 1) setHoveredValue(void 0);
}, [range, value]);
(0, import_utils2.useUpdateEffect)(() => {
if (__selectType === "year") return;
setYear(month.getFullYear());
setInternalYear(month.getFullYear());
}, [month.getFullYear()]);
(0, import_utils2.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]);
(0, import_utils2.useUpdateEffect)(() => {
setValue(valueProp);
}, [valueProp]);
const getContainerProps = (0, import_react.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
};
};
// src/use-calendar-header.tsx
var import_utils3 = require("@yamada-ui/utils");
var import_dayjs3 = __toESM(require("dayjs"));
var import_react2 = require("react");
var useCalendarHeader = ({ index }) => {
var _a, _b;
const {
type,
amountOfMonths,
dayRefs,
maxDate,
maxYear,
minDate,
minYear,
month,
nextMonth,
nextRef,
paginateBy,
prevMonth,
prevRef,
rangeYears,
setInternalYear,
setMonth,
setType,
setYear,
typeRef,
year
} = useCalendarContext();
const minRangeYear = (_a = rangeYears[0]) != null ? _a : minYear;
const maxRangeYear = (_b = rangeYears[rangeYears.length - 1]) != null ? _b : maxYear;
const onChangeType = (0, import_react2.useCallback)(() => {
switch (type) {
case "month":
setType("year", year, month.getMonth());
break;
case "date":
setType("month", year, month.getMonth());
break;
default:
break;
}
}, [month, setType, type, year]);
const onPrev = (0, import_react2.useCallback)(() => {
switch (type) {
case "year":
setInternalYear((prev) => prev - 12);
break;
case "month":
setYear((prev) => prev - 1);
break;
default:
dayRefs.current.clear();
setMonth((prev) => (0, import_dayjs3.default)(prev).subtract(paginateBy, "months").toDate());
break;
}
}, [dayRefs, paginateBy, setInternalYear, setMonth, setYear, type]);
const onNext = (0, import_react2.useCallback)(() => {
switch (type) {
case "year":
setInternalYear((prev) => prev + 12);
break;
case "month":
setYear((prev) => prev + 1);
break;
default:
dayRefs.current.clear();
setMonth((prev) => (0, import_dayjs3.default)(prev).add(paginateBy, "months").toDate());
break;
}
}, [dayRefs, paginateBy, setInternalYear, setMonth, setYear, type]);
(0, import_utils3.assignRef)(typeRef, onChangeType);
(0, import_utils3.assignRef)(prevRef, onPrev);
(0, import_utils3.assignRef)(nextRef, onNext);
const onKeyDown = (0, import_react2.useCallback)(
(ev) => {
const actions = {
ArrowDown: onChangeType,
ArrowLeft: () => {
const isDisabled4 = (() => {
switch (type) {
case "year":
return minRangeYear <= minYear;
case "month":
return year <= minYear;
default:
return !isMonthInRange({ date: prevMonth, maxDate, minDate });
}
})();
if (!isDisabled4) onPrev();
},
ArrowRight: () => {
const isDisabled4 = (() => {
switch (type) {
case "year":
return maxYear <= maxRangeYear;
case "month":
return maxYear <= year;
default:
return !isMonthInRange({ date: nextMonth, maxDate, minDate });
}
})();
if (!isDisabled4) onNext();
}
};
const action = actions[ev.key];
if (!action) return;
ev.preventDefault();
ev.stopPropagation();
action(ev);
},
[
onChangeType,
onPrev,
type,
minRangeYear,
minYear,
year,
prevMonth,
maxDate,
minDate,
onNext,
maxYear,
maxRangeYear,
nextMonth
]
);
const getContainerProps = (0, import_react2.useCallback)(
(props = {}) => ({
...props,
onKeyDown: (0, import_utils3.handlerAll)(onKeyDown, props.onKeyDown)
}),
[onKeyDown]
);
const getControlProps = (0, import_react2.useCallback)(
({ operation, ...props }) => {
const isPrev = operation === "prev";
const ariaLabel = `Go to ${isPrev ? "previous" : "next"} ${type === "date" ? "month" : "year"}`;
const isHidden = (() => {
switch (type) {
case "year":
if (isPrev) {
return minRangeYear <= minYear;
} else {
return maxYear <= maxRangeYear;
}
case "month":
if (isPrev) {
return year <= minYear;
} else {
return maxYear <= year;
}
default:
if (typeof index !== "number") return;
if (isPrev) {
return index !== 0 || !isMonthInRange({ date: prevMonth, maxDate, minDate });
} else {
return index + 1 !== amountOfMonths || !isMonthInRange({ date: nextMonth, maxDate, minDate });
}
}
})();
return {
"aria-label": ariaLabel,
...props,
"aria-disabled": (0, import_utils3.ariaAttr)(isHidden),
"data-disabled": (0, import_utils3.dataAttr)(isHidden),
"data-hidden": (0, import_utils3.dataAttr)(isHidden),
tabIndex: -1,
onClick: (0, import_utils3.handlerAll)(isPrev ? onPrev : onNext, props.onClick)
};
},
[
amountOfMonths,
index,
maxDate,
maxRangeYear,
maxYear,
minDate,
minRangeYear,
minYear,
nextMonth,
onNext,
onPrev,
prevMonth,
type,
year
]
);
const getLabelProps = (0, import_react2.useCallback)(
(props = {}) => {
return {
as: type !== "year" ? "button" : "span",
pointerEvents: type !== "year" ? "auto" : "none",
...props,
"aria-live": type !== "year" ? "polite" : void 0,
tabIndex: !!index ? -1 : 0,
onClick: (0, import_utils3.handlerAll)(props.onClick, onChangeType)
};
},
[index, onChangeType, type]
);
return { getContainerProps, getControlProps, getLabelProps };
};
// src/calendar-header.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var CalendarHeader = ({
className,
index,
label,
controlProps,
labelProps,
nextProps,
prevProps,
...rest
}) => {
const { type, styles, withControls, withHeader, withLabel } = useCalendarContext();
const { getContainerProps, getControlProps, getLabelProps } = useCalendarHeader({ index });
const css = {
alignItems: "center",
display: "flex",
w: "100%",
...styles.header
};
const { icon: iconOrProps, ...computedLabelProps } = labelProps != null ? labelProps : {};
return withHeader ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_core2.ui.div,
{
className: (0, import_utils4.cx)("ui-calendar__header", className),
__css: css,
...getContainerProps(rest),
children: [
withControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
CalendarControlPrev,
{
...getControlProps({
operation: "prev",
...controlProps,
...prevProps
})
}
) : null,
withLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CalendarLabel, { ...getLabelProps({ ...computedLabelProps }), children: [
label,
type !== "year" ? (0, import_utils4.isValidElement)(iconOrProps) ? iconOrProps : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarLabelIcon, { ...iconOrProps }) : null
] }) : null,
withControls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
CalendarControlNext,
{
...getControlProps({
operation: "next",
...controlProps,
...nextProps
})
}
) : null
]
}
) : null;
};
CalendarHeader.displayName = "CalendarHeader";
CalendarHeader.__ui__ = "CalendarHeader";
var CalendarLabel = ({ className, ...rest }) => {
const { styles } = useCalendarContext();
const css = {
flex: 1,
fontSize: void 0,
fontWeight: "normal",
gap: 1,
h: "auto",
...styles.label
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_button.Button,
{
className: (0, import_utils4.cx)("ui-calendar__header__label", className),
variant: "ghost",
__css: css,
...rest
}
);
};
CalendarLabel.displayName = "CalendarLabel";
CalendarLabel.__ui__ = "CalendarLabel";
var CalendarLabelIcon = ({
className,
...rest
}) => {
const { styles } = useCalendarContext();
const css = {
...styles.labelIcon
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_icon.ChevronIcon,
{
className: (0, import_utils4.cx)("ui-calendar__header__label__icon", className),
__css: css,
...rest
}
);
};
CalendarLabelIcon.displayName = "CalendarLabelIcon";
CalendarLabelIcon.__ui__ = "CalendarLabelIcon";
var CalendarControlPrev = ({
className,
...rest
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
CalendarControl,
{
className: (0, import_utils4.cx)("ui-calendar__header__control--prev", className),
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, { __css: { transform: "rotate(90deg)" } }),
operation: "prev",
...rest
}
);
};
CalendarControlPrev.displayName = "CalendarControlPrev";
CalendarControlPrev.__ui__ = "CalendarControlPrev";
var CalendarControlNext = ({
className,
...rest
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
CalendarControl,
{
className: (0, import_utils4.cx)("ui-calendar__header__control--next", className),
icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronIcon, { __css: { transform: "rotate(-90deg)" } }),
operation: "next",
...rest
}
);
};
CalendarControlNext.displayName = "CalendarControlNext";
CalendarControlNext.__ui__ = "CalendarControlNext";
var CalendarControl = ({
className,
operation,
...rest
}) => {
const { styles } = useCalendarContext();
const css = {
h: "auto",
minW: "auto",
...styles.control,
...styles[operation]
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_button.IconButton,
{
className: (0, import_utils4.cx)("ui-calendar__header__control", className),
variant: "ghost",
__css: css,
...rest
}
);
};
CalendarControl.displayName = "CalendarControl";
CalendarControl.__ui__ = "CalendarControl";
// src/use-month.tsx
var import_utils5 = require("@yamada-ui/utils");
var import_dayjs4 = __toESM(require("dayjs"));
var import_react3 = require("react");
var useMonth = () => {
const {
amountOfMonths,
dateFormat,
dayRefs,
disableOutsideDays,
enableRange,
excludeDate,
hiddenOutsideDays,
holidays,
hoveredValue,
locale,
maxDate,
maxSelectValues,
minDate,
minSelectValues,
month,
nextMonth,
paginateBy,
prevMonth,
setHoveredValue,
setMonth,
setValue,
today,
value: selectedValue,
weekendDays
} = useCalendarContext();
const beforeMonth = (0, import_react3.useRef)(null);
const year = month.getFullYear();
const multi = (0, import_utils5.isArray)(selectedValue);
const range = enableRange && multi;
const rangeSelectedValue = range ? sortDates(selectedValue.filter(Boolean)) : [];
const max = multi && maxSelectValues === selectedValue.length;
const reversed = !!rangeSelectedValue[0] && isAfterDate(rangeSelectedValue[0], hoveredValue);
const startDate = range ? rangeSelectedValue[!reversed ? 0 : 1] : void 0;
const endDate = range ? rangeSelectedValue[!reversed ? 1 : 0] : void 0;
const maybeStartDate = startDate != null ? startDate : hoveredValue;
const maybeEndDate = endDate != null ? endDate : hoveredValue;
const shouldBetween = rangeSelectedValue.length >= 1 && !!maybeEndDate;
const shouldHovered = rangeSelectedValue.length === 1;
const hasAmountOfMonths = amountOfMonths >= 2;
const minSelectEndDate = (0, import_utils5.isNumber)(maxSelectValues) ? (0, import_dayjs4.default)(!reversed ? maybeStartDate : maybeEndDate).subtract(maxSelectValues - 1, "day").toDate() : void 0;
const maxSelectEndDate = (0, import_utils5.isNumber)(maxSelectValues) ? (0, import_dayjs4.default)(!reversed ? maybeStartDate : maybeEndDate).add(maxSelectValues - 1, "day").toDate() : void 0;
const minSelectStartDate = (0, import_utils5.isNumber)(minSelectValues) ? (0, import_dayjs4.default)(!reversed ? maybeStartDate : maybeEndDate).subtract(minSelectValues - 1, "day").toDate() : void 0;
const maxSelectStartDate = (0, import_utils5.isNumber)(minSelectValues) ? (0, import_dayjs4.default)(!reversed ? maybeStartDate : maybeEndDate).add(minSelectValues - 1, "day").toDate() : void 0;
const invalidRangeDates = (0, import_utils5.isNumber)(maxSelectValues) && Math.abs((0, import_dayjs4.default)(startDate).diff(endDate, "day")) >= maxSelectValues;
const minTrulySelectEndDate = shouldHovered || invalidRangeDates ? minSelectEndDate : void 0;
const maxTrulySelectEndDate = shouldHovered || invalidRangeDates ? maxSelectEndDate : void 0;
const minTrulySelectStartDate = shouldHovered || invalidRangeDates ? minSelectStartDate : void 0;
const maxTrulySelectStartDate = shouldHovered || invalidRangeDates ? maxSelectStartDate : void 0;
const onFocusPrev = (0, import_react3.useCallback)(
(targetIndex, targetMonth, targetDay) => {
var _a, _b;
const [firstIndex, , firstDay] = (_b = (_a = getRangeFirstDay(dayRefs)) == null ? void 0 : _a.split("-").map(Number)) != null ? _b : [];
if (firstIndex === targetDay && firstDay && targetDay < firstDay) {
if (!isMonthInRange({ date: prevMonth, maxDate, minDate })) return;
dayRefs.current.clear();
setMonth((prev) => {
beforeMonth.current = prev;
return (0, import_dayjs4.default)(prev).subtract(paginateBy, "months").toDate();
});
} else {
const ref = dayRefs.current.get(
`${targetIndex}-${targetMonth}-${targetDay}`
);
if (ref == null ? void 0 : ref.current) {
if (shouldHovered)
setHoveredValue((0, import_dayjs4.default)(ref.current.dataset.value).toDate());
ref.current.focus();
ref.current.tabIndex = 0;
}
}
},
[
shouldHovered,
dayRefs,
maxDate,
minDate,
paginateBy,
prevMonth,
setMonth,
setHoveredValue
]
);
const onFocusNext = (0, import_react3.useCallback)(
(targetIndex, targetMonth, targetDay) => {
var _a, _b;
const [lastIndex, , lastDay] = (_b = (_a = getRangeLastDay(dayRefs)) == null ? void 0 : _a.split("-").map(Number)) != null ? _b : [];
if (lastIndex === targetIndex && lastDay && lastDay < targetDay) {
if (!isMonthInRange({ date: nextMonth, maxDate, minDate })) return;
dayRefs.current.clear();
setMonth((prev) => {
beforeMonth.current = prev;
return (0, import_dayjs4.default)(prev).add(paginateBy, "months").toDate();
});
} else {
const ref = dayRefs.current.get(
`${targetIndex}-${targetMonth}-${targetDay}`
);
if (ref == null ? void 0 : ref.current) {
if (shouldHovered)
setHoveredValue((0, import_dayjs4.default)(ref.current.dataset.value).toDate());
ref.current.focus();
ref.current.tabIndex = 0;
}
}
},
[
shouldHovered,
dayRefs,
maxDate,
minDate,
nextMonth,
paginateBy,
setMonth,
setHoveredValue
]
);
const onKeyDown = (0, import_react3.useCallback)(
(ev) => {
var _a, _b, _c, _d, _e;
const [focusedIndex, focusedMonth, focusedDay] = ((_a = getFocused(dayRefs)) != null ? _a : "").split("-").map(Number);
const [firstIndex, firstMonth, firstDay] = (_c = (_b = getRangeFirstDay(dayRefs)) == null ? void 0 : _b.split("-").map(Number)) != null ? _c : [];
const [lastIndex, lastMonth, lastDay] = (_e = (_d = getRangeLastDay(dayRefs)) == null ? void 0 : _d.split("-").map(Number)) != null ? _e : [];
const actions = {
ArrowDown: () => {
if (!(0, import_utils5.isNumber)(focusedMonth)) return;
const lastOfMonthDay = (0, import_dayjs4.default)(new Date(year, focusedMonth)).endOf("month").date();
if (focusedDay && focusedDay + 7 <= lastOfMonthDay)
onFocusNext(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay + 7);
},
ArrowLeft: () => {
if (focusedIndex !== firstIndex) {
if (!(0, import_utils5.isNumber)(focusedMonth)) return;
const firstOfMonthDay = (0, import_dayjs4.default)(new Date(year, focusedMonth)).startOf("month").date();
if (focusedDay && firstOfMonthDay < focusedDay) {
onFocusNext(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay - 1);
} else {
const prevLastOfMonthDay = (0, import_dayjs4.default)(new Date(year, focusedMonth)).subtract(1, "month").endOf("month").date();
onFocusNext(
focusedIndex ? focusedIndex - 1 : -1,
focusedMonth - 1,
prevLastOfMonthDay
);
}
} else if ((0, import_utils5.isNumber)(focusedMonth) && (0, import_utils5.isNumber)(focusedDay)) {
onFocusPrev(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay - 1);
}
},
ArrowRight: () => {
if (focusedIndex !== lastIndex) {
if (!(0, import_utils5.isNumber)(focusedMonth)) return;
const lastOfMonthDay = (0, import_dayjs4.default)(new Date(year, focusedMonth)).endOf("month").date();
if (focusedDay && focusedDay < lastOfMonthDay) {
onFocusNext(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay + 1);
} else {
const nextFirstOfMonthDay = (0, import_dayjs4.default)(new Date(year, focusedMonth)).add(1, "month").startOf("month").date();
onFocusNext(
focusedIndex ? focusedIndex + 1 : -1,
focusedMonth + 1,
nextFirstOfMonthDay
);
}
} else if ((0, import_utils5.isNumber)(focusedMonth) && (0, import_utils5.isNumber)(focusedDay)) {
onFocusNext(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay + 1);
}
},
ArrowUp: () => {
if (!(0, import_utils5.isNumber)(focusedMonth)) return;
const firstOfMonthDay = (0, import_dayjs4.default)(new Date(year, focusedMonth)).startOf("month").date();
if (focusedDay && focusedDay - 7 >= firstOfMonthDay)
onFocusNext(focusedIndex != null ? focusedIndex : -1, focusedMonth, focusedDay - 7);
},
End: () => (0, import_utils5.isNumber)(lastMonth) && (0, import_utils5.isNumber)(lastDay) ? onFocusNext(lastIndex != null ? lastIndex : -1, lastMonth, lastDay) : void 0,
Home: () => (0, import_utils5.isNumber)(firstMonth) && (0, import_utils5.isNumber)(firstDay) ? onFocusPrev(firstIndex != null ? firstIndex : -1, firstMonth, firstDay) : void 0
};
const action = actions[ev.key];
if (!action) return;
ev.preventDefault();
ev.stopPropagation();
disableAllTabIndex(dayRefs);
action(ev);
},
[dayRefs, onFocusNext, onFocusPrev, year]
);
const onClick = (0, import_react3.useCallback)(
(ev, newValue) => {
ev.preventDefault();
ev.stopPropagation();
const el = (0, import_utils5.getEventRelatedTarget)(ev);
if (!el || (0, import_utils5.isDisabled)(el)) return;
setValue((prev) => {
if (!(0, import_utils5.isArray)(prev)) {
return newValue;
} else if (range) {
prev = prev.filter(Boolean);
const exceeded = prev.length >= 2;
if (!exceeded) {
const selected = prev.some((value) => isSameDate(value, newValue));
return selected ? [] : sortDates([...prev, newValue]);
} else {
return [newValue];
}
} else {
const selected = prev.some((value) => isSameDate(value, newValue));
if (!selected) {
return [...prev, newValue];
} else {
return prev.filter(
(value) => !isSameDate(value, newValue)
);
}
}
});
},
[setValue, range]
);
const onPointerEnter = (0, import_react3.useCallback)(
(value) => {
if (shouldHovered) setHoveredValue(value);
},
[shouldHovered, setHoveredValue]
);
(0, import_utils5.useUpdateEffect)(() => {
if (!(beforeMonth.current instanceof Date)) return;
onShouldFocus(dayRefs, () => false, beforeMonth.current < month);
beforeMonth.current = null;
}, [month.getMonth()]);
(0, import_utils5.useUnmountEffect)(() => {
dayRefs.current.clear();
});
const getGridProps = (0, import_react3.useCallback)(
({ month: month2, ...props }) => {
const label = getFormattedLabel(month2, locale, dateFormat);
return {
"aria-label": label,
"aria-multiselectable": (0, import_utils5.ariaAttr)(multi),
role: "grid",
...props,
onKeyDown: (0, import_utils5.handlerAll)(onKeyDown, props.onKeyDown)
};
},
[onKeyDown, multi, locale, dateFormat]
);
const getButtonProps = (0, import_react3.useCallback)(
({ index, month: month2, value, ...props }, ref = null) => {
const controlled = beforeMonth.current instanceof Date;
const holiday = holidays.some((holiday2) => isSameDate(holiday2, value));
const outside = !isSameMonth(month2, value);
const weekend = weekendDays.includes(value.getDay());
const hidden = hiddenOutsideDays && outside;
const selected = !multi ? isSameDate(selectedValue, value) : selectedValue.some(
(selectedValue2) => isSameDate(selectedValue2, value)
);
const trulySelected = selected && (!hasAmountOfMonths || !outside);
const selectedMonth = !multi ? isSameMonth(month2, selectedValue) : selectedValue.some(
(selectedValue2) => isSameMonth(month2, selectedValue2)
);
const _today = today && isSameDate(/* @__PURE__ */ new Date(), value);
const disabled = isDisabledDate({
disableOutsideDays,
endDate,
excludeDate,
maxDate: maxTrulySelectEndDate != null ? maxTrulySelectEndDate : maxDate,
maxTrulySelectStartDate,
maybeEndDate,
maybeStartDate,
minDate: minTrulySelectEndDate != null ? minTrulySelectEndDate : minDate,
minTrulySelectStartDate,
outside,
startDate,
value
});
const trulyDisabled = disabled || !selected && max;
const firstDate = value.getDate() === 1;
const shouldFocus = !selectedMonth && !outside && firstDate || selected;
const start = range && isSameDate(maybeStartDate, value) && !isSameDate(maybeEndDate, value);
const end = range && isSameDate(maybeEndDate, value) && !isSameDate(maybeStartDate, value);
const trulyStart = start && (!hasAmountOfMonths || !outside);
const trulyEnd = end && (!hasAmountOfMonths || !outside);
const between = shouldBetween && !isSameDate(maybeStartDate, maybeEndDate) && !hidden && isInRange(value, maybeStartDate, maybeEndDate);
const key = `${index}-${value.getMonth()}-${value.getDate()}`;
if (!outside) dayRefs.current.set(key, (0, import_react3.createRef)());
return {
ref: (0, import_utils5.mergeRefs)(ref, !outside ? dayRefs.current.get(key) : void 0),
between,
end,
hidden,
outside,
selected,
start,
weekend,
...props,
"aria-disabled": (0, import_utils5.ariaAttr)(trulyDisabled),
"aria-selected": (0, import_utils5.ariaAttr)(trulySelected),
"data-between": (0, import_utils5.dataAttr)(between),
"data-disabled": (0, import_utils5.dataAttr)(trulyDisabled),
"data-end": (0, import_utils5.dataAttr)(trulyEnd),
"data-holiday": (0, import_utils5.dataAttr)(holiday),
"data-outside": (0, import_utils5.dataAttr)(outside),
"data-selected": (0, import_utils5.dataAttr)(trulySelected),
"data-start": (0, import_utils5.dataAttr)(trulyStart),
"data-today": (0, import_utils5.dataAttr)(_today),
"data-value": value.getDate(),
"data-weekend": (0, import_utils5.dataAttr)(weekend),
tabIndex: !!index || controlled ? -1 : shouldFocus ? 0 : -1,
onClick: (0, import_utils5.handlerAll)((ev) => onClick(ev, value), props.onClick),
onPointerEnter: (0, import_utils5.handlerAll)(
() => onPointerEnter(value),
props.onPointerEnter
)
};
},
[
holidays,
weekendDays,
hiddenOutsideDays,
multi,
selectedValue,
hasAmountOfMonths,
today,
minDate,
maxDate,
minTrulySelectEndDate,
maxTrulySelectEndDate,
minTrulySelectStartDate,
maxTrulySelectStartDate,
startDate,
endDate,
excludeDate,
disableOutsideDays,
max,
range,
maybeStartDate,
maybeEndDate,
shouldBetween,
dayRefs,
onClick,
onPointerEnter
]
);
return { getButtonProps, getGridProps };
};
// src/month.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Month = ({
className,
controlProps,
dayProps,
headerProps,
labelProps,
nextProps,
prevProps,
tableProps,
weekdayProps,
...rest
}) => {
var _a, _b, _c, _d, _e, _f;
const {
amountOfMonths,
dateFormat,
firstDayOfWeek,
locale,
month: selectedMonth,
styles,
weekdayFormat,
withWeekdays
} = useCalendarContext();
const { getButtonProps, getGridProps } = useMonth();
const { component: customWeekday = Weekday, ...computedWeekdayProps } = weekdayProps != null ? weekdayProps : {};
const { component: customDay = Day, ...computedDayProps } = dayProps != null ? dayProps : {};
const {
tbody: tbodyProps,
td: tdProps,
th: thProps,
thead: theadProps,
tr: trProps,
...computedTableProps
} = tableProps != null ? tableProps : {};
const weekdays = (0, import_react4.useMemo)(
() => getWeekdays(locale, firstDayOfWeek, weekdayFormat),
[firstDayOfWeek, locale, weekdayFormat]
);
const w = (_a = rest.w) != null ? _a : rest.width;
const minW = (_b = rest.minW) != null ? _b : rest.minWidth;
const maxW = (_c = rest.maxW) != null ? _c : rest.maxWidth;
const h = (_d = rest.h) != null ? _d : rest.height;
const minH = (_e = rest.minH) != null ? _e : rest.minHeight;
const maxH = (_f = rest.maxH) != null ? _f : rest.maxHeight;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: Array(amountOfMonths).fill(0).map((_, index) => {
var _a2, _b2, _c2, _d2, _e2, _f2, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
const month = (0, import_dayjs5.default)(selectedMonth).add(index, "months").toDate();
const days = getMonthDays(month, firstDayOfWeek);
const formattedLabel = getFormattedLabel(month, locale, dateFormat);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_core3.ui.div,
{
__css: { ...styles.content },
...(0, import_utils6.filterUndefined)(rest),
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
CalendarHeader,
{
...{
...headerProps,
index,
label: formattedLabel,
controlProps,
labelProps,
nextProps,
prevProps
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_core3.ui.table,
{
className: (0, import_utils6.cx)("ui-calendar__month", className),
__css: {
h: (_c2 = (_a2 = styles.content) == null ? void 0 : _a2.h) != null ? _c2 : (_b2 = styles.content) == null ? void 0 : _b2.height,
maxH: (_f2 = (_d2 = styles.content) == null ? void 0 : _d2.maxH) != null ? _f2 : (_e2 = styles.content) == null ? void 0 : _e2.maxHeight,
maxW: (_i = (_g = styles.content) == null ? void 0 : _g.maxW) != null ? _i : (_h = styles.content) == null ? void 0 : _h.maxWidth,
minH: (_l = (_j = styles.content) == null ? void 0 : _j.minH) != null ? _l : (_k = styles.content) == null ? void 0 : _k.minHeight,
minW: (_o = (_m = styles.content) == null ? void 0 : _m.minW) != null ? _o : (_n = styles.content) == null ? void 0 : _n.minWidth,
w: (_r = (_p = styles.content) == null ? void 0 : _p.w) != null ? _r : (_q = styles.content) == null ? void 0 : _q.width,
...styles.date
},
...getGridProps({
month,
...(0, import_utils6.filterUndefined)({
h,
maxH,
maxW,
minH,
minW,
w,
...computedTableProps
})
}),
children: [
withWeekdays ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core3.ui.thead, { ...theadProps, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core3.ui.tr, { __css: { ...styles.row }, ...trProps, children: weekdays.map((weekday, index2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core3.ui.th,
{
__css: {
fontWeight: "normal",
...styles.cell
},
...thProps,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core3.ui.div,
{
className: "ui-calendar__month__weekday",
__css: {
display: "flex",
w: "100%",
...styles.weekday
},
...computedWeekdayProps,
children: customWeekday({ index: index2, weekday })
}
)
},
index2
)) }) }) : null,
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core3.ui.tbody, { ...tbodyProps, children: days.map((cells, row) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core3.ui.tr, { __css: { ...styles.row }, ...trProps, children: cells.map((date, col) => {
const {
between,
end,
hidden,
outside,
selected,
start,
weekend,
...props
} = getButtonProps({
...computedDayProps,
index,
month,
value: date
});
const day = customDay({
col,
date,
outside,
row,
selected,
weekday: weekdays[col],
weekend
});
const displayed = !(0, import_utils6.isNull)(day) && !(0, import_utils6.isUndefined)(day) && !(0, import_utils6.isBoolean)(day);
const css = {
display: hidden || !displayed ? "none" : "inline-flex",
fontSize: void 0,
fontWeight: "normal",
h: "auto",
minW: "auto",
p: 0,
_ripple: {
display: "block"
},
...styles.day
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core3.ui.td,
{
"data-between": (0, import_utils6.dataAttr)(between),
"data-end": (0, import_utils6.dataAttr)(end),
"data-start": (0, import_utils6.dataAttr)(start),
__css: { ...styles.cell },
...tdProps,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_button2.Button,
{
className: "ui-calendar__month__day",
variant: "unstyled",
__css: css,
...props,
children: day
}
)
},
col
);
}) }, row);
}) })
]
}
)