@yamada-ui/calendar
Version:
Yamada UI calendar component
746 lines (737 loc) • 24.1 kB
JavaScript
"use client"
;
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/month-list.tsx
var month_list_exports = {};
__export(month_list_exports, {
MonthList: () => MonthList
});
module.exports = __toCommonJS(month_list_exports);
var import_button2 = require("@yamada-ui/button");
var import_core3 = require("@yamada-ui/core");
var import_utils6 = require("@yamada-ui/utils");
// 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 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 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 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 disableAllTabIndex = (refs) => {
for (const ref of refs.current.values()) {
if (ref.current) ref.current.tabIndex = -1;
}
};
// 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 />"`
});
// 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 isDisabled2 = (() => {
switch (type) {
case "year":
return minRangeYear <= minYear;
case "month":
return year <= minYear;
default:
return !isMonthInRange({ date: prevMonth, maxDate, minDate });
}
})();
if (!isDisabled2) onPrev();
},
ArrowRight: () => {
const isDisabled2 = (() => {
switch (type) {
case "year":
return maxYear <= maxRangeYear;
case "month":
return maxYear <= year;
default:
return !isMonthInRange({ date: nextMonth, maxDate, minDate });
}
})();
if (!isDisabled2) 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-list.tsx
var import_utils5 = require("@yamada-ui/utils");
var import_react3 = require("react");
var useMonthList = () => {
const {
locale,
maxDate,
maxYear,
minDate,
minYear,
month,
monthFormat,
monthRefs,
setMonth,
setType,
setYear,
value: selectedValue,
year,
yearFormat,
__selectType
} = useCalendarContext();
const multi = (0, import_utils5.isArray)(selectedValue);
const beforeYear = (0, import_react3.useRef)(null);
const rangeMonths = getRangeMonths(locale, monthFormat);
const label = getFormattedLabel(year, locale, yearFormat);
const onFocusPrev = (0, import_react3.useCallback)(
(targetMonth) => {
if (targetMonth < 0) {
if (year <= minYear) return;
setYear((prev) => {
beforeYear.current = prev;
return prev - 1;
});
} else {
const ref = monthRefs.current.get(targetMonth);
if (ref == null ? void 0 : ref.current) {
ref.current.focus();
ref.current.tabIndex = 0;
}
}
},
[minYear, monthRefs, setYear, year]
);
const onFocusNext = (0, import_react3.useCallback)(
(targetMonth) => {
if (11 < targetMonth) {
if (maxYear <= year) return;
setYear((prev) => {
beforeYear.current = prev;
return prev + 1;
});
} else {
const ref = monthRefs.current.get(targetMonth);
if (ref == null ? void 0 : ref.current) {
ref.current.focus();
ref.current.tabIndex = 0;
}
}
},
[maxYear, monthRefs, setYear, year]
);
const onKeyDown = (0, import_react3.useCallback)(
(ev) => {
var _a;
const focusedMonth = (_a = getFocused(monthRefs)) != null ? _a : 0;
const actions = {
ArrowDown: () => focusedMonth + 3 <= 11 ? onFocusNext(focusedMonth + 3) : {},
ArrowLeft: () => onFocusPrev(focusedMonth - 1),
ArrowRight: () => onFocusNext(focusedMonth + 1),
ArrowUp: () => focusedMonth - 3 >= 0 ? onFocusPrev(focusedMonth - 3) : {},
End: () => onFocusNext(11),
Home: () => onFocusPrev(0)
};
const action = actions[ev.key];
if (!action) return;
ev.preventDefault();
ev.stopPropagation();
disableAllTabIndex(monthRefs);
action(ev);
},
[monthRefs, onFocusNext, onFocusPrev]
);
const onClick = (0, import_react3.useCallback)(
(ev, month2) => {
ev.preventDefault();
ev.stopPropagation();
if ((0, import_utils5.isDisabled)(ev.target)) return;
setMonth(new Date(year, month2, 1));
setType("date", year, month2);
},
[year, setMonth, setType]
);
const getIsSelectedYear = (0, import_react3.useCallback)(() => {
var _a;
if (__selectType === "date") {
return month.getFullYear() === year;
} else {
const selectedYear = !multi ? selectedValue == null ? void 0 : selectedValue.getFullYear() : (_a = selectedValue[0]) == null ? void 0 : _a.getFullYear();
return selectedYear === year;
}
}, [__selectType, multi, month, selectedValue, year]);
const getIsSelected = (0, import_react3.useCallback)(
(value) => {
var _a;
if (__selectType === "date") {
return month.getMonth() === value;
} else {
const month2 = !multi ? selectedValue == null ? void 0 : selectedValue.getMonth() : (_a = selectedValue[0]) == null ? void 0 : _a.getMonth();
return month2 === value;
}
},
[__selectType, multi, month, selectedValue]
);
(0, import_utils5.useUpdateEffect)(() => {
if (typeof beforeYear.current !== "number") return;
onShouldFocus(monthRefs, () => false, beforeYear.current < year);
beforeYear.current = null;
}, [year]);
(0, import_utils5.useUnmountEffect)(() => {
monthRefs.current.clear();
});
const getGridProps = (0, import_react3.useCallback)(
(props = {}) => ({
"aria-label": label,
role: "grid",
...props,
onKeyDown: (0, import_utils5.handlerAll)(onKeyDown, props.onKeyDown)
}),
[label, onKeyDown]
);
const getButtonProps = (0, import_react3.useCallback)(
({ value, ...props }, ref = null) => {
const controlled = typeof beforeYear.current === "number";
const selectedYear = getIsSelectedYear();
const selected = selectedYear && getIsSelected(value);
const disabled = !isMonthInRange({
date: new Date(year, value),
maxDate,
minDate
});
monthRefs.current.set(value, (0, import_react3.createRef)());
let tabIndex = -1;
if (controlled) {
tabIndex = -1;
} else if (!selectedYear && value === 0) {
tabIndex = 0;
} else if (selected) {
tabIndex = 0;
}
return {
ref: (0, import_utils5.mergeRefs)(ref, monthRefs.current.get(value)),
disabled,
...props,
"aria-disabled": (0, import_utils5.ariaAttr)(disabled),
"aria-selected": (0, import_utils5.ariaAttr)(selected),
"data-disabled": (0, import_utils5.dataAttr)(disabled),
"data-selected": (0, import_utils5.dataAttr)(selected),
"data-value": value,
tabIndex,
onClick: (0, import_utils5.handlerAll)(props.onClick, (ev) => onClick(ev, value))
};
},
[
getIsSelectedYear,
getIsSelected,
year,
minDate,
maxDate,
monthRefs,
onClick
]
);
return { label, rangeMonths, getButtonProps, getGridProps };
};
// src/month-list.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var MonthList = ({
className,
controlProps,
headerProps,
labelProps,
monthGridProps,
monthProps,
nextProps,
prevProps,
...rest
}) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
const { styles, year } = useCalendarContext();
const { label, rangeMonths, getButtonProps, getGridProps } = useMonthList();
const { component: customMonth, ...computedMonthProps } = monthProps != null ? monthProps : {};
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.jsxs)(import_core3.ui.div, { __css: { ...styles.content }, ...(0, import_utils6.filterUndefined)(rest), children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
CalendarHeader,
{
...{
...headerProps,
label,
controlProps,
labelProps,
nextProps,
prevProps
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core3.ui.div,
{
className: (0, import_utils6.cx)("ui-calendar__month-list", className),
__css: {
display: "grid",
h: (_i = (_g = styles.content) == null ? void 0 : _g.h) != null ? _i : (_h = styles.content) == null ? void 0 : _h.height,
maxH: (_l = (_j = styles.content) == null ? void 0 : _j.maxH) != null ? _l : (_k = styles.content) == null ? void 0 : _k.maxHeight,
maxW: (_o = (_m = styles.content) == null ? void 0 : _m.maxW) != null ? _o : (_n = styles.content) == null ? void 0 : _n.maxWidth,
minH: (_r = (_p = styles.content) == null ? void 0 : _p.minH) != null ? _r : (_q = styles.content) == null ? void 0 : _q.minHeight,
minW: (_u = (_s = styles.content) == null ? void 0 : _s.minW) != null ? _u : (_t = styles.content) == null ? void 0 : _t.minWidth,
w: (_x = (_v = styles.content) == null ? void 0 : _v.w) != null ? _x : (_w = styles.content) == null ? void 0 : _w.width,
...styles.month
},
...getGridProps({
...(0, import_utils6.filterUndefined)({ h, maxH, maxW, minH, minW, w }),
...monthGridProps
}),
children: rangeMonths.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_button2.Button,
{
className: "ui-calendar__month-list__button",
variant: "ghost",
__css: {
fontSize: void 0,
fontWeight: "normal",
h: "auto",
minW: "auto",
p: 0,
...styles.button
},
...getButtonProps({ ...computedMonthProps, value: index }),
children: customMonth ? customMonth({ index, month, year }) : month
},
index
))
}
)
] });
};
MonthList.displayName = "MonthList";
MonthList.__ui__ = "MonthList";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
MonthList
});
//# sourceMappingURL=month-list.js.map