@mezzanine-ui/react 0.16.0 → 1.0.0-alpha.0

package/Calendar/CalendarQuarters.d.ts

@@ -0,0 +1,37 @@
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CalendarQuartersProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
+    /**
+     * Provide if you have a custom disabling logic.
+     * The method takes the date object as its parameter.
+     */
+    isQuarterDisabled?: (date: DateType) => boolean;
+    /**
+     * Provide if you have a custom logic for checking if the quarter is in range.
+     * The method takes the date object as its parameter.
+     */
+    isQuarterInRange?: (date: DateType) => boolean;
+    /**
+     * Click handler for the button of each quarter.
+     * The method takes the date object as its parameter.
+     */
+    onClick?: (target: DateType) => void;
+    /**
+     * Mouse enter handler for the button of each quarter.
+     * The method takes the date object as its parameter.
+     */
+    onQuarterHover?: (target: DateType) => void;
+    /**
+     * The reference date for getting the quarters range and computing the date object.
+     */
+    referenceDate: DateType;
+    /**
+     * The quarter will be marked as active if it matches the same quarter of any value in the array.
+     */
+    value?: DateType[];
+}
+/**
+ * The react component for `mezzanine` calendar quarters.
+ */
+declare function CalendarQuarters(props: CalendarQuartersProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarQuarters;

package/Calendar/CalendarQuarters.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getYearRange, calendarQuarterYearsCount, calendarQuarters, calendarClasses } from '@mezzanine-ui/core/calendar';
+import { useMemo } from 'react';
+import { useCalendarContext } from './CalendarContext.js';
+import CalendarCell from './CalendarCell.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar quarters.
+ */
+function CalendarQuarters(props) {
+    const { getYear, getCurrentQuarterFirstDate, isQuarterIncluded, setYear, setMonth, } = useCalendarContext();
+    const { className, isQuarterDisabled, isQuarterInRange, onClick: onClickProp, onQuarterHover, referenceDate, value, ...rest } = props;
+    const currentYear = getYear(referenceDate);
+    const [start] = useMemo(() => getYearRange(currentYear, calendarQuarterYearsCount), [currentYear]);
+    const years = useMemo(() => {
+        return Array.from({ length: calendarQuarterYearsCount }, (_, i) => start + i);
+    }, [start]);
+    return (jsx("div", { className: cx(calendarClasses.board, className), ...rest, children: years.map((year, yearIndex) => {
+            return (jsxs("div", { className: cx(calendarClasses.row, {
+                    [calendarClasses.rowWithBorder]: yearIndex > 0,
+                }), children: [jsx(CalendarCell, { disabled: true, children: year }), calendarQuarters.map((quarter) => {
+                        const quarterStartMonth = (quarter - 1) * 3;
+                        const quarterDate = setMonth(setYear(getCurrentQuarterFirstDate(getCurrentQuarterFirstDate(referenceDate)), year), quarterStartMonth);
+                        const active = value && isQuarterIncluded(quarterDate, value);
+                        const disabled = isQuarterDisabled && isQuarterDisabled(quarterDate);
+                        const inRange = isQuarterInRange && isQuarterInRange(quarterDate);
+                        const onClick = onClickProp
+                            ? () => {
+                                onClickProp(quarterDate);
+                            }
+                            : undefined;
+                        const onMouseEnter = onQuarterHover
+                            ? () => {
+                                onQuarterHover(quarterDate);
+                            }
+                            : undefined;
+                        // Accessible quarter label for screen readers
+                        const quarterMonths = [
+                            ['January', 'February', 'March'],
+                            ['April', 'May', 'June'],
+                            ['July', 'August', 'September'],
+                            ['October', 'November', 'December'],
+                        ];
+                        const monthNames = quarterMonths[quarter - 1].join(', ');
+                        const ariaLabel = [
+                            `Quarter ${quarter}, ${year}`,
+                            `${monthNames}`,
+                            active && 'Selected',
+                            disabled && 'Not available',
+                        ]
+                            .filter(Boolean)
+                            .join(', ');
+                        return (jsxs("button", { type: "button", disabled: disabled, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-pressed": active, className: cx(calendarClasses.button, {
+                                [calendarClasses.buttonActive]: active,
+                                [calendarClasses.buttonInRange]: inRange,
+                                [calendarClasses.buttonDisabled]: disabled,
+                            }), onClick: onClick, onMouseEnter: onMouseEnter, children: ["Q", quarter] }, quarter));
+                    })] }, year));
+        }) }));
+}
+
+export { CalendarQuarters as default };

package/Calendar/CalendarQuickSelect.d.ts

@@ -0,0 +1,21 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CalendarQuickSelectProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
+    /**
+     * The id of active quick select button.
+     */
+    activeId?: string;
+    /**
+     * The options for quick select buttons.
+     */
+    options: {
+        id: string;
+        name: string;
+        disabled?: boolean;
+        onClick: VoidFunction;
+    }[];
+}
+/**
+ * The react component for `mezzanine` calendar quick select.
+ */
+declare function CalendarQuickSelect(props: CalendarQuickSelectProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarQuickSelect;

package/Calendar/CalendarQuickSelect.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { calendarClasses } from '@mezzanine-ui/core/calendar';
+import { CheckedIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar quick select.
+ */
+function CalendarQuickSelect(props) {
+    const { className, activeId, options, ...restElementProps } = props;
+    return (jsx("div", { ...restElementProps, className: cx(calendarClasses.quickSelect, className), children: options.map(({ id, name, disabled, onClick }) => (jsxs("button", { type: "button", disabled: disabled, "aria-disabled": disabled, className: cx(calendarClasses.quickSelectButton, id === activeId && calendarClasses.quickSelectButtonActive), onClick: onClick, children: [jsx("span", { children: name }), id === activeId && jsx(Icon, { icon: CheckedIcon, size: 16 })] }, id))) }));
+}
+
+export { CalendarQuickSelect as default };

package/Calendar/CalendarWeeks.d.ts

@@ -25,7 +25,7 @@ export interface CalendarWeeksProps extends Pick<CalendarDayOfWeekProps, 'displa
      */
     onWeekHover?: (firstDateOfWeek: DateType) => void;
     /**
-     * The refernce date for getting the dates of calendar.
+     * The reference date for getting the dates of calendar.
      */
     referenceDate: DateType;
     /**

package/Calendar/CalendarWeeks.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { calendarClasses } from '@mezzanine-ui/core/calendar';
 import { useMemo } from 'react';
@@ -12,50 +13,94 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarWeeks(props) {
-    const { displayWeekDayLocale: displayWeekDayLocaleFromConfig, getCalendarGrid, getDate, getMonth, getNow, isInMonth, isSameDate, isWeekIncluded, setDate, setMonth, } = useCalendarContext();
-    const { className, displayWeekDayLocale = displayWeekDayLocaleFromConfig, isYearDisabled, isMonthDisabled, isWeekDisabled, isWeekInRange, onClick: onClickProp, onWeekHover, referenceDate, value, ...rest } = props;
-    const daysGrid = useMemo(() => getCalendarGrid(referenceDate), [getCalendarGrid, referenceDate]);
-    return (jsxs("div", { ...rest, className: cx(calendarClasses.board, className), children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }), daysGrid.map((week, index) => {
-                const dates = [];
-                const weekStartInPrevMonth = index === 0 && week[0] > 7;
-                const weekStartInNextMonth = index > 3 && week[0] <= 14;
-                week.forEach((dateNum) => {
-                    const isPrevMonth = index === 0 && dateNum > 7;
-                    const isNextMonth = index > 3 && dateNum <= 14;
-                    const thisMonth = getMonth(referenceDate);
-                    // eslint-disable-next-line no-nested-ternary
-                    const month = isPrevMonth
-                        ? thisMonth - 1
-                        : isNextMonth
-                            ? thisMonth + 1
-                            : thisMonth;
-                    const date = setDate(setMonth(referenceDate, month), dateNum);
-                    dates.push(date);
-                });
-                const disabled = (isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(dates[0])) ||
-                    (isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(dates[0])) ||
-                    (isWeekDisabled === null || isWeekDisabled === void 0 ? void 0 : isWeekDisabled(dates[0])) ||
-                    false;
-                const inactive = !disabled && (weekStartInPrevMonth || weekStartInNextMonth);
-                const active = !disabled && !inactive && value && isWeekIncluded(dates[0], value);
-                const inRange = !disabled && !inactive && isWeekInRange && isWeekInRange(dates[0]);
-                const onMouseEnter = onWeekHover
-                    ? () => {
-                        onWeekHover(dates[0]);
-                    }
-                    : undefined;
-                const onClick = onClickProp
-                    ? () => {
-                        onClickProp(dates[0]);
-                    }
-                    : undefined;
-                return (jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.row, {
-                        [calendarClasses.buttonActive]: active,
-                        [calendarClasses.buttonInRange]: inRange,
-                        [calendarClasses.buttonDisabled]: disabled,
-                    }), disabled: disabled, "aria-disabled": disabled, onClick: onClick, onMouseEnter: onMouseEnter, children: week.map((dateNum, dateIndex) => (jsx(CalendarCell, { today: isSameDate(dates[dateIndex], getNow()), disabled: disabled ||
-                            !isInMonth(dates[dateIndex], getMonth(referenceDate)), active: active, children: dateNum }, `${getMonth(dates[dateIndex])}/${getDate(dates[dateIndex])}`))) }, `CALENDAR_WEEKS/WEEK_OF/${index}`));
-            })] }));
+    const { locale, getCalendarGrid, getWeek, getDate, getMonth, getNow, isInMonth, isSameDate, isWeekIncluded, setDate, setMonth, setHour, setMinute, setSecond, setMillisecond, getCurrentWeekFirstDate, } = useCalendarContext();
+    const { className, displayWeekDayLocale = locale, isYearDisabled, isMonthDisabled, isWeekDisabled, isWeekInRange, onClick: onClickProp, onWeekHover, referenceDate, value, ...rest } = props;
+    const daysGrid = useMemo(() => getCalendarGrid(referenceDate, displayWeekDayLocale), [getCalendarGrid, referenceDate, displayWeekDayLocale]);
+    const weekFirstDates = useMemo(() => {
+        return daysGrid.map((week, index) => {
+            const dateNum = week[0];
+            const isPrevMonth = index === 0 && dateNum > 7;
+            const isNextMonth = index > 3 && dateNum <= 14;
+            const thisMonth = getMonth(referenceDate);
+            const month = isPrevMonth
+                ? thisMonth - 1
+                : isNextMonth
+                    ? thisMonth + 1
+                    : thisMonth;
+            const weekFirstDate = setDate(setMonth(referenceDate, month), dateNum);
+            return getCurrentWeekFirstDate(weekFirstDate, displayWeekDayLocale);
+        });
+    }, [
+        daysGrid,
+        getMonth,
+        referenceDate,
+        setDate,
+        setMonth,
+        getCurrentWeekFirstDate,
+        displayWeekDayLocale,
+    ]);
+    return (jsxs("div", { ...rest, className: cx(calendarClasses.board, className), children: [jsx("div", { className: calendarClasses.week, children: weekFirstDates.map((firstDate, idx) => (jsx("div", { className: calendarClasses.weekRow, children: jsx(CalendarCell, { disabled: true, children: getWeek(firstDate, displayWeekDayLocale) }) }, idx))) }), jsxs("div", { className: calendarClasses.daysGrid, children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }), daysGrid.map((week, index) => {
+                        const dates = [];
+                        const weekStartInPrevMonth = index === 0 && week[0] > 7;
+                        const weekStartInNextMonth = index > 3 && week[0] <= 14;
+                        week.forEach((dateNum) => {
+                            const isPrevMonth = index === 0 && dateNum > 7;
+                            const isNextMonth = index > 3 && dateNum <= 14;
+                            const thisMonth = getMonth(referenceDate);
+                            const month = isPrevMonth
+                                ? thisMonth - 1
+                                : isNextMonth
+                                    ? thisMonth + 1
+                                    : thisMonth;
+                            const date = setMillisecond(setSecond(setMinute(setHour(setDate(setMonth(referenceDate, month), dateNum), 0), 0), 0), 0);
+                            dates.push(date);
+                        });
+                        const disabled = (isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(dates[0])) ||
+                            (isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(dates[0])) ||
+                            (isWeekDisabled === null || isWeekDisabled === void 0 ? void 0 : isWeekDisabled(dates[0])) ||
+                            false;
+                        const inactive = !disabled && (weekStartInPrevMonth || weekStartInNextMonth);
+                        const active = !disabled &&
+                            !inactive &&
+                            value &&
+                            isWeekIncluded(dates[0], value, displayWeekDayLocale);
+                        const inRange = !disabled && !inactive && isWeekInRange && isWeekInRange(dates[0]);
+                        const onMouseEnter = onWeekHover
+                            ? () => {
+                                onWeekHover(getCurrentWeekFirstDate(dates[0], displayWeekDayLocale));
+                            }
+                            : undefined;
+                        const onClick = onClickProp
+                            ? () => {
+                                onClickProp(getCurrentWeekFirstDate(dates[0], displayWeekDayLocale));
+                            }
+                            : undefined;
+                        // Accessible week label for screen readers
+                        const firstDate = new Date(dates[0]);
+                        const lastDate = new Date(dates[dates.length - 1]);
+                        const weekNum = getWeek(dates[0], displayWeekDayLocale);
+                        const startMonth = firstDate.toLocaleDateString(displayWeekDayLocale, { month: 'short' });
+                        const endMonth = lastDate.toLocaleDateString(displayWeekDayLocale, {
+                            month: 'short',
+                        });
+                        const startDay = firstDate.getDate();
+                        const endDay = lastDate.getDate();
+                        const ariaLabel = [
+                            `Week ${weekNum}`,
+                            `${startMonth} ${startDay} to ${endMonth} ${endDay}`,
+                            active && 'Selected',
+                            disabled && 'Not available',
+                            inactive && 'Outside current month',
+                        ]
+                            .filter(Boolean)
+                            .join(', ');
+                        return (jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.row, {
+                                [calendarClasses.buttonActive]: active,
+                                [calendarClasses.buttonInRange]: inRange,
+                                [calendarClasses.buttonDisabled]: disabled,
+                            }), disabled: disabled, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-pressed": active, onClick: onClick, onMouseEnter: onMouseEnter, children: week.map((dateNum, dateIndex) => (jsx(CalendarCell, { today: isSameDate(dates[dateIndex], getNow()), disabled: disabled ||
+                                    !isInMonth(dates[dateIndex], getMonth(referenceDate)), active: active, children: dateNum }, `${getMonth(dates[dateIndex])}/${getDate(dates[dateIndex])}`))) }, `CALENDAR_WEEKS/WEEK_OF/${index}`));
+                    })] })] }));
 }
 
 export { CalendarWeeks as default };

package/Calendar/CalendarYears.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { getCalendarYearRange, calendarYearsBase, calendarClasses } from '@mezzanine-ui/core/calendar';
 import { useMemo } from 'react';
@@ -10,12 +11,12 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarYears(props) {
-    const { getNow, getYear, isYearIncluded, setYear } = useCalendarContext();
+    const { getNow, getYear, isYearIncluded, setYear, getCurrentYearFirstDate } = useCalendarContext();
     const { className, isYearDisabled, isYearInRange, onClick: onClickProp, onYearHover, referenceDate, value, ...rest } = props;
     const [start] = useMemo(() => getCalendarYearRange(getYear(referenceDate)), [getYear, referenceDate]);
     return (jsx("div", { className: cx(calendarClasses.board, className), ...rest, children: jsx("div", { className: calendarClasses.twelveGrid, children: calendarYearsBase.map((base) => {
                 const thisYear = base + start;
-                const yearDateType = setYear(getNow(), thisYear);
+                const yearDateType = setYear(getCurrentYearFirstDate(getNow()), thisYear);
                 const disabled = isYearDisabled && isYearDisabled(yearDateType);
                 const inactive = !disabled && (base === 0 || base === 11);
                 const active = !disabled &&
@@ -33,7 +34,16 @@ function CalendarYears(props) {
                         onYearHover(yearDateType);
                     }
                     : undefined;
-                return (jsx("button", { type: "button", "aria-disabled": disabled, disabled: disabled, className: cx(calendarClasses.button, {
+                // Accessible year label for screen readers
+                const ariaLabel = [
+                    `Year ${thisYear}`,
+                    active && 'Selected',
+                    disabled && 'Not available',
+                    inactive && 'Outside range',
+                ]
+                    .filter(Boolean)
+                    .join(', ');
+                return (jsx("button", { type: "button", "aria-disabled": disabled, disabled: disabled, "aria-label": ariaLabel, "aria-pressed": active, className: cx(calendarClasses.button, {
                         [calendarClasses.buttonActive]: active,
                         [calendarClasses.buttonInRange]: inRange,
                         [calendarClasses.buttonDisabled]: disabled,

package/Calendar/RangeCalendar.d.ts

@@ -0,0 +1,59 @@
+import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
+import { RefObject } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { CalendarProps } from './Calendar';
+import { CalendarFooterActionsProps } from './CalendarFooterActions';
+import { CalendarQuickSelectProps } from './CalendarQuickSelect';
+export interface RangeCalendarProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange' | 'children'>, Pick<CalendarProps, 'renderAnnotations' | 'isDateDisabled' | 'isDateInRange' | 'onDateHover' | 'displayWeekDayLocale' | 'isMonthDisabled' | 'isMonthInRange' | 'onMonthHover' | 'displayMonthLocale' | 'isWeekDisabled' | 'isWeekInRange' | 'onWeekHover' | 'isYearDisabled' | 'isYearInRange' | 'onYearHover' | 'isQuarterDisabled' | 'isQuarterInRange' | 'onQuarterHover' | 'isHalfYearDisabled' | 'isHalfYearInRange' | 'onHalfYearHover' | 'disabledMonthSwitch' | 'disabledYearSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disableOnDoubleNext' | 'disableOnDoublePrev'> {
+    /**
+     * Footer action buttons props
+     */
+    actions?: CalendarFooterActionsProps['actions'];
+    /**
+     * Other props you may provide to each `Calendar`
+     */
+    calendarProps?: Omit<CalendarProps, 'mode' | 'value' | 'onChange' | 'referenceDate' | 'renderAnnotations' | 'onNext' | 'onPrev' | 'onDoubleNext' | 'onDoublePrev' | 'onMonthControlClick' | 'onYearControlClick'>;
+    /**
+     * React Ref for the first (left) calendar
+     */
+    firstCalendarRef?: RefObject<HTMLDivElement | null>;
+    /**
+     * Use this prop to switch calendars.
+     * @default 'day'
+     */
+    mode?: CalendarMode;
+    /**
+     * Click handler for every cell on calendars.
+     * When completing a range (second click), returns normalized [start, end].
+     * When starting a new range (first click), returns the clicked date.
+     * The normalization ensures start is beginning of period and end is end of period based on mode.
+     */
+    onChange?: (value: [DateType, DateType | undefined]) => void;
+    /**
+     * Quick select options for range calendar.
+     * Provide options for users to quickly select specific date ranges.
+     */
+    quickSelect?: Pick<CalendarQuickSelectProps, 'activeId' | 'options'>;
+    /**
+     * The reference date for getting the calendar.
+     * **The type of `referenceDate` should be the same as your declared `DateType`.**
+     */
+    referenceDate: DateType;
+    /**
+     * React Ref for the second (right) calendar
+     */
+    secondCalendarRef?: RefObject<HTMLDivElement | null>;
+    /**
+     * The displaying cells will be marked as active
+     * if the single value of it matches any date object in the array.
+     * **The type of `value` should be the same as your declared `DateType`.**
+     */
+    value?: DateType | DateType[];
+}
+/**
+ * The react component for `mezzanine` range calendar.
+ * Displays two calendars side by side for range selection.
+ * Notice that any component related to calendar should be used along with `CalendarContext`.
+ */
+declare const RangeCalendar: import("react").ForwardRefExoticComponent<RangeCalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default RangeCalendar;

package/Calendar/RangeCalendar.js

@@ -0,0 +1,232 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { calendarClasses } from '@mezzanine-ui/core/calendar';
+import castArray from 'lodash/castArray';
+import { forwardRef, useCallback } from 'react';
+import Calendar from './Calendar.js';
+import { useCalendarContext } from './CalendarContext.js';
+import { useRangeCalendarControls } from './useRangeCalendarControls.js';
+import CalendarFooterActions from './CalendarFooterActions.js';
+import CalendarQuickSelect from './CalendarQuickSelect.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` range calendar.
+ * Displays two calendars side by side for range selection.
+ * Notice that any component related to calendar should be used along with `CalendarContext`.
+ */
+const RangeCalendar = forwardRef(function RangeCalendar(props, ref) {
+    const { locale, getMonth, getYear, setMonth, setYear, getCurrentWeekFirstDate, getCurrentMonthFirstDate, getCurrentYearFirstDate, getCurrentQuarterFirstDate, getCurrentHalfYearFirstDate, addSecond, addDay, addMonth, addYear, setHour, setMinute, setSecond, setMillisecond, isBefore, } = useCalendarContext();
+    const { actions, renderAnnotations, calendarProps, className, disabledMonthSwitch, disabledYearSwitch, disableOnNext, disableOnPrev, disableOnDoubleNext, disableOnDoublePrev, displayMonthLocale = locale, displayWeekDayLocale = locale, firstCalendarRef, isDateDisabled, isDateInRange, isMonthDisabled, isMonthInRange, isWeekDisabled, isWeekInRange, isYearDisabled, isYearInRange, isQuarterDisabled, isQuarterInRange, isHalfYearDisabled, isHalfYearInRange, mode = 'day', onChange: onChangeProp, onDateHover, onMonthHover, onWeekHover, onYearHover, onQuarterHover, onHalfYearHover, quickSelect, referenceDate: referenceDateProp, secondCalendarRef, value: valueProp, ...restProps } = props;
+    const value = valueProp ? castArray(valueProp) : undefined;
+    const { currentMode, onMonthControlClick, onFirstPrev, onFirstDoublePrev, onSecondNext, onSecondDoubleNext, onYearControlClick, popModeStack, referenceDates, updateFirstReferenceDate, updateSecondReferenceDate, } = useRangeCalendarControls(referenceDateProp, mode);
+    const normalizeRangeStart = useCallback((date) => {
+        switch (mode) {
+            case 'day':
+                return setMillisecond(setSecond(setMinute(setHour(date, 0), 0), 0), 0);
+            case 'week':
+                return getCurrentWeekFirstDate(date, displayWeekDayLocale);
+            case 'month':
+                return getCurrentMonthFirstDate(date);
+            case 'year':
+                return getCurrentYearFirstDate(date);
+            case 'quarter':
+                return getCurrentQuarterFirstDate(date);
+            case 'half-year':
+                return getCurrentHalfYearFirstDate(date);
+            default:
+                return date;
+        }
+    }, [
+        displayWeekDayLocale,
+        mode,
+        getCurrentWeekFirstDate,
+        getCurrentMonthFirstDate,
+        getCurrentYearFirstDate,
+        getCurrentQuarterFirstDate,
+        getCurrentHalfYearFirstDate,
+        setHour,
+        setMinute,
+        setSecond,
+        setMillisecond,
+    ]);
+    const normalizeRangeEnd = useCallback((date) => {
+        switch (mode) {
+            case 'day':
+                return setMillisecond(setSecond(setMinute(setHour(date, 23), 59), 59), 999);
+            case 'week': {
+                const weekStart = getCurrentWeekFirstDate(date, displayWeekDayLocale);
+                const weekEnd = addSecond(addDay(weekStart, 7), -1);
+                return setMillisecond(setSecond(setMinute(setHour(weekEnd, 23), 59), 59), 999);
+            }
+            case 'month': {
+                const nextMonth = addSecond(addMonth(getCurrentMonthFirstDate(date), 1), -1);
+                return setMillisecond(setSecond(setMinute(setHour(nextMonth, 23), 59), 59), 999);
+            }
+            case 'year': {
+                const nextYear = addSecond(addYear(getCurrentYearFirstDate(date), 1), -1);
+                return setMillisecond(setSecond(setMinute(setHour(nextYear, 23), 59), 59), 999);
+            }
+            case 'quarter': {
+                const nextQuarter = addSecond(addMonth(getCurrentQuarterFirstDate(date), 3), -1);
+                return setMillisecond(setSecond(setMinute(setHour(nextQuarter, 23), 59), 59), 999);
+            }
+            case 'half-year': {
+                const nextHalfYear = addSecond(addMonth(getCurrentHalfYearFirstDate(date), 6), -1);
+                return setMillisecond(setSecond(setMinute(setHour(nextHalfYear, 23), 59), 59), 999);
+            }
+            default:
+                return date;
+        }
+    }, [
+        displayWeekDayLocale,
+        mode,
+        getCurrentWeekFirstDate,
+        getCurrentMonthFirstDate,
+        getCurrentYearFirstDate,
+        getCurrentQuarterFirstDate,
+        getCurrentHalfYearFirstDate,
+        addSecond,
+        addDay,
+        addMonth,
+        addYear,
+        setHour,
+        setMinute,
+        setSecond,
+        setMillisecond,
+    ]);
+    const hasDisabledDateInRange = useCallback((start, end) => {
+        var _a, _b, _c, _d, _e, _f;
+        const [rangeStart, rangeEnd] = isBefore(start, end)
+            ? [start, end]
+            : [end, start];
+        let current = rangeStart;
+        while (isBefore(current, rangeEnd) || current === rangeEnd) {
+            // Check disabled based on current mode
+            let isDisabled = false;
+            switch (mode) {
+                case 'day':
+                    isDisabled = (_a = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(current)) !== null && _a !== void 0 ? _a : false;
+                    break;
+                case 'week':
+                    isDisabled = (_b = isWeekDisabled === null || isWeekDisabled === void 0 ? void 0 : isWeekDisabled(current)) !== null && _b !== void 0 ? _b : false;
+                    break;
+                case 'month':
+                    isDisabled = (_c = isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(current)) !== null && _c !== void 0 ? _c : false;
+                    break;
+                case 'year':
+                    isDisabled = (_d = isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(current)) !== null && _d !== void 0 ? _d : false;
+                    break;
+                case 'quarter':
+                    isDisabled = (_e = isQuarterDisabled === null || isQuarterDisabled === void 0 ? void 0 : isQuarterDisabled(current)) !== null && _e !== void 0 ? _e : false;
+                    break;
+                case 'half-year':
+                    isDisabled = (_f = isHalfYearDisabled === null || isHalfYearDisabled === void 0 ? void 0 : isHalfYearDisabled(current)) !== null && _f !== void 0 ? _f : false;
+                    break;
+            }
+            if (isDisabled) {
+                return true;
+            }
+            current = addDay(current, 1);
+            // Break if we've passed the end date (safety check)
+            if (isBefore(rangeEnd, current)) {
+                break;
+            }
+        }
+        return false;
+    }, [
+        mode,
+        isBefore,
+        addDay,
+        isDateDisabled,
+        isWeekDisabled,
+        isMonthDisabled,
+        isYearDisabled,
+        isQuarterDisabled,
+        isHalfYearDisabled,
+    ]);
+    const handleRangeSelection = useCallback((target) => {
+        if (!onChangeProp)
+            return;
+        const [existingStart, existingEnd] = value || [];
+        if (!existingStart || (existingStart && existingEnd)) {
+            // 未選取起始日期，或已完成區間選取，重新開始選取
+            onChangeProp([target, undefined]);
+        }
+        else {
+            const rawStart = existingStart;
+            const rawEnd = target;
+            // 檢查是否有不可選日期
+            if (hasDisabledDateInRange(rawStart, rawEnd)) {
+                onChangeProp([target, undefined]);
+                return;
+            }
+            const isEndBeforeStart = isBefore(rawEnd, rawStart);
+            const [start, end] = isEndBeforeStart
+                ? [rawEnd, rawStart]
+                : [rawStart, rawEnd];
+            const normalizedStart = normalizeRangeStart(start);
+            const normalizedEnd = normalizeRangeEnd(end);
+            onChangeProp([normalizedStart, normalizedEnd]);
+        }
+    }, [
+        value,
+        onChangeProp,
+        isBefore,
+        normalizeRangeStart,
+        normalizeRangeEnd,
+        hasDisabledDateInRange,
+    ]);
+    const getTargetValue = useCallback((target, targetDate) => {
+        if (currentMode === mode) {
+            return target;
+        }
+        if (currentMode === 'month') {
+            return setMonth(targetDate, getMonth(target));
+        }
+        if (currentMode === 'year') {
+            return setYear(targetDate, getYear(target));
+        }
+        return target;
+    }, [currentMode, mode, getMonth, getYear, setMonth, setYear]);
+    const onChangeFactory = useCallback((calendar) => {
+        const targetDate = referenceDates[calendar];
+        const updateReferenceDate = calendar
+            ? updateSecondReferenceDate
+            : updateFirstReferenceDate;
+        return (target) => {
+            if (currentMode === mode) {
+                const resultValue = getTargetValue(target, targetDate);
+                handleRangeSelection(resultValue);
+            }
+            else {
+                const resultValue = getTargetValue(target, targetDate);
+                updateReferenceDate(resultValue);
+                popModeStack();
+            }
+        };
+    }, [
+        currentMode,
+        mode,
+        referenceDates,
+        updateFirstReferenceDate,
+        updateSecondReferenceDate,
+        popModeStack,
+        getTargetValue,
+        handleRangeSelection,
+    ]);
+    return (jsxs("div", { ...restProps, ref: ref, role: "application", "aria-label": `Range calendar, ${mode} view`, className: cx(calendarClasses.host, className), children: [quickSelect && (jsx(CalendarQuickSelect, { activeId: quickSelect.activeId, options: quickSelect.options })), jsxs("div", { className: calendarClasses.mainWithFooter, children: [jsxs("div", { style: { display: 'inline-flex', flexFlow: 'row' }, children: [jsx(Calendar, { ...calendarProps, renderAnnotations: renderAnnotations, className: cx(calendarClasses.noShadowHost, calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.className), ref: firstCalendarRef, mode: currentMode, value: value, onChange: onChangeFactory(0), referenceDate: referenceDates[0], onPrev: onFirstPrev, onDoublePrev: onFirstDoublePrev, onMonthControlClick: onMonthControlClick, onYearControlClick: onYearControlClick, disabledFooterControl: true, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnPrev: disableOnPrev, disableOnDoublePrev: disableOnDoublePrev, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onDateHover: onDateHover, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, onMonthHover: onMonthHover, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, onWeekHover: onWeekHover, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, onYearHover: onYearHover, isQuarterDisabled: isQuarterDisabled, isQuarterInRange: isQuarterInRange, onQuarterHover: onQuarterHover, isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: isHalfYearInRange, onHalfYearHover: onHalfYearHover }), jsx(Calendar, { ...calendarProps, renderAnnotations: renderAnnotations, className: cx(calendarClasses.noShadowHost, calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.className), ref: secondCalendarRef, mode: currentMode, value: value, onChange: onChangeFactory(1), referenceDate: referenceDates[1], onNext: onSecondNext, onDoubleNext: onSecondDoubleNext, onMonthControlClick: onMonthControlClick, onYearControlClick: onYearControlClick, disabledFooterControl: true, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnNext: disableOnNext, disableOnDoubleNext: disableOnDoubleNext, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onDateHover: onDateHover, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, onMonthHover: onMonthHover, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, onWeekHover: onWeekHover, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, onYearHover: onYearHover, isQuarterDisabled: isQuarterDisabled, isQuarterInRange: isQuarterInRange, onQuarterHover: onQuarterHover, isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: isHalfYearInRange, onHalfYearHover: onHalfYearHover })] }), actions && (jsx(CalendarFooterActions, { actions: {
+                            secondaryButtonProps: {
+                                children: 'Cancel',
+                                disabled: false,
+                                ...actions === null || actions === void 0 ? void 0 : actions.secondaryButtonProps,
+                            },
+                            primaryButtonProps: {
+                                children: 'Ok',
+                                disabled: false,
+                                ...actions === null || actions === void 0 ? void 0 : actions.primaryButtonProps,
+                            },
+                        } }))] })] }));
+});
+
+export { RangeCalendar as default };