@mezzanine-ui/react 1.0.0-canary.2 → 1.0.0-canary.4

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 };

package/Calendar/index.d.ts

@@ -3,9 +3,13 @@ export type { CalendarControlModifier, UseCalendarControlModifiersResult, } from
 export { useCalendarModeStack } from './useCalendarModeStack';
 export { useCalendarControls } from './useCalendarControls';
 export { CalendarContext, useCalendarContext, default as CalendarConfigProvider, } from './CalendarContext';
-export type { CalendarConfigs, CalendarConfigProviderProps, } from './CalendarContext';
+export type { CalendarLocale, CalendarConfigs, CalendarConfigProviderProps, } from './CalendarContext';
 export type { CalendarYearsProps } from './CalendarYears';
 export { default as CalendarYears } from './CalendarYears';
+export type { CalendarQuartersProps } from './CalendarQuarters';
+export { default as CalendarQuarters } from './CalendarQuarters';
+export type { CalendarHalfYearsProps } from './CalendarHalfYears';
+export { default as CalendarHalfYears } from './CalendarHalfYears';
 export type { CalendarWeeksProps } from './CalendarWeeks';
 export { default as CalendarWeeks } from './CalendarWeeks';
 export { default as CalendarMonths } from './CalendarMonths';
@@ -20,3 +24,6 @@ export type { CalendarCellProps } from './CalendarCell';
 export { default as CalendarCell } from './CalendarCell';
 export type { CalendarProps } from './Calendar';
 export { default } from './Calendar';
+export type { RangeCalendarProps } from './RangeCalendar';
+export { default as RangeCalendar } from './RangeCalendar';
+export { useRangeCalendarControls } from './useRangeCalendarControls';

package/Calendar/index.js

@@ -3,6 +3,8 @@ export { useCalendarModeStack } from './useCalendarModeStack.js';
 export { useCalendarControls } from './useCalendarControls.js';
 export { default as CalendarConfigProvider, CalendarContext, useCalendarContext } from './CalendarContext.js';
 export { default as CalendarYears } from './CalendarYears.js';
+export { default as CalendarQuarters } from './CalendarQuarters.js';
+export { default as CalendarHalfYears } from './CalendarHalfYears.js';
 export { default as CalendarWeeks } from './CalendarWeeks.js';
 export { default as CalendarMonths } from './CalendarMonths.js';
 export { default as CalendarDays } from './CalendarDays.js';
@@ -10,3 +12,5 @@ export { default as CalendarDayOfWeek } from './CalendarDayOfWeek.js';
 export { default as CalendarControls } from './CalendarControls.js';
 export { default as CalendarCell } from './CalendarCell.js';
 export { default } from './Calendar.js';
+export { default as RangeCalendar } from './RangeCalendar.js';
+export { useRangeCalendarControls } from './useRangeCalendarControls.js';

package/Calendar/useCalendarControlModifiers.d.ts

@@ -1,7 +1,7 @@
 import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
 export type CalendarControlModifier = (value: DateType) => DateType;
-export type UseCalendarControlModifiersResult = Record<CalendarMode, [
-    CalendarControlModifier,
-    CalendarControlModifier
-]>;
+export type UseCalendarControlModifiersResult = Record<CalendarMode, {
+    single: [CalendarControlModifier, CalendarControlModifier] | null;
+    double: [CalendarControlModifier, CalendarControlModifier];
+}>;
 export declare function useCalendarControlModifiers(): UseCalendarControlModifiersResult;

package/Calendar/useCalendarControlModifiers.js

@@ -1,18 +1,49 @@
 'use client';
-import { calendarYearModuler } from '@mezzanine-ui/core/calendar';
+import { calendarHalfYearYearsCount, calendarQuarterYearsCount, calendarYearModuler } from '@mezzanine-ui/core/calendar';
 import { useMemo } from 'react';
 import { useCalendarContext } from './CalendarContext.js';
 
 function useCalendarControlModifiers() {
     const { addYear, addMonth } = useCalendarContext();
     return useMemo(() => ({
-        year: [
-            (date) => addYear(date, -calendarYearModuler),
-            (date) => addYear(date, calendarYearModuler),
-        ],
-        month: [(date) => addYear(date, -1), (date) => addYear(date, 1)],
-        week: [(date) => addMonth(date, -1), (date) => addMonth(date, 1)],
-        day: [(date) => addMonth(date, -1), (date) => addMonth(date, 1)],
+        // day and week modes: single=month, double=year
+        day: {
+            single: [(date) => addMonth(date, -1), (date) => addMonth(date, 1)],
+            double: [(date) => addYear(date, -1), (date) => addYear(date, 1)],
+        },
+        week: {
+            single: [(date) => addMonth(date, -1), (date) => addMonth(date, 1)],
+            double: [(date) => addYear(date, -1), (date) => addYear(date, 1)],
+        },
+        // month mode: only double (year)
+        month: {
+            single: null,
+            double: [(date) => addYear(date, -1), (date) => addYear(date, 1)],
+        },
+        // year mode: only double (10 years)
+        year: {
+            single: null,
+            double: [
+                (date) => addYear(date, -calendarYearModuler),
+                (date) => addYear(date, calendarYearModuler),
+            ],
+        },
+        // quarter mode: only double (5 years)
+        quarter: {
+            single: null,
+            double: [
+                (date) => addYear(date, -calendarQuarterYearsCount),
+                (date) => addYear(date, calendarQuarterYearsCount),
+            ],
+        },
+        // half-year mode: only double (5 years)
+        'half-year': {
+            single: null,
+            double: [
+                (date) => addYear(date, -calendarHalfYearYearsCount),
+                (date) => addYear(date, calendarHalfYearYearsCount),
+            ],
+        },
     }), [addYear, addMonth]);
 }
 

package/Calendar/useCalendarControls.d.ts

@@ -4,6 +4,8 @@ export declare function useCalendarControls(referenceDateProp: DateType, mode?:
     onMonthControlClick: () => void;
     onNext: () => void;
     onPrev: () => void;
+    onDoubleNext: () => void;
+    onDoublePrev: () => void;
     onYearControlClick: () => void;
     popModeStack: () => void;
     referenceDate: string;

package/Calendar/useCalendarControls.js

@@ -11,11 +11,25 @@ function useCalendarControls(referenceDateProp, mode) {
     const { currentMode, pushModeStack, popModeStack } = useCalendarModeStack(mode || 'day');
     const modifierGroup = useCalendarControlModifiers();
     const onPrev = () => {
-        const [handleMinus] = modifierGroup[currentMode];
+        const modifiers = modifierGroup[currentMode].single;
+        if (!modifiers)
+            return;
+        const [handleMinus] = modifiers;
         setReferenceDate(handleMinus(referenceDate));
     };
     const onNext = () => {
-        const [, handleAdd] = modifierGroup[currentMode];
+        const modifiers = modifierGroup[currentMode].single;
+        if (!modifiers)
+            return;
+        const [, handleAdd] = modifiers;
+        setReferenceDate(handleAdd(referenceDate));
+    };
+    const onDoublePrev = () => {
+        const [handleMinus] = modifierGroup[currentMode].double;
+        setReferenceDate(handleMinus(referenceDate));
+    };
+    const onDoubleNext = () => {
+        const [, handleAdd] = modifierGroup[currentMode].double;
         setReferenceDate(handleAdd(referenceDate));
     };
     const onMonthControlClick = () => pushModeStack('month');
@@ -25,6 +39,8 @@ function useCalendarControls(referenceDateProp, mode) {
         onMonthControlClick,
         onNext,
         onPrev,
+        onDoubleNext,
+        onDoublePrev,
         onYearControlClick,
         popModeStack,
         referenceDate,

package/Calendar/useRangeCalendarControls.d.ts

@@ -0,0 +1,18 @@
+import { DateType, CalendarMode } from '@mezzanine-ui/core/calendar';
+export declare function useRangeCalendarControls(referenceDateProp: DateType, mode?: CalendarMode): {
+    currentMode: CalendarMode;
+    onMonthControlClick: () => void;
+    onFirstNext: () => void;
+    onFirstPrev: () => void;
+    onFirstDoubleNext: () => void;
+    onFirstDoublePrev: () => void;
+    onSecondNext: () => void;
+    onSecondPrev: () => void;
+    onSecondDoubleNext: () => void;
+    onSecondDoublePrev: () => void;
+    onYearControlClick: () => void;
+    popModeStack: () => void;
+    referenceDates: [string, string];
+    updateFirstReferenceDate: (date: DateType) => void;
+    updateSecondReferenceDate: (date: DateType) => void;
+};

package/Calendar/useRangeCalendarControls.js

@@ -0,0 +1,115 @@
+'use client';
+import { useState, useCallback, useMemo } from 'react';
+import { calendarHalfYearYearsCount, calendarQuarterYearsCount, calendarYearModuler } from '@mezzanine-ui/core/calendar';
+import { useCalendarContext } from './CalendarContext.js';
+import { useCalendarControlModifiers } from './useCalendarControlModifiers.js';
+import { useCalendarModeStack } from './useCalendarModeStack.js';
+
+function useRangeCalendarControls(referenceDateProp, mode) {
+    const { addMonth, addYear } = useCalendarContext();
+    const [firstReferenceDate, setFirstReferenceDate] = useState(referenceDateProp);
+    // Calculate the offset between two calendars based on mode
+    const getSecondCalendarDate = useCallback((firstDate) => {
+        const currentMode = mode || 'day';
+        switch (currentMode) {
+            case 'year':
+                return addYear(firstDate, calendarYearModuler);
+            case 'month':
+                return addYear(firstDate, 1);
+            case 'quarter':
+                return addYear(firstDate, calendarQuarterYearsCount);
+            case 'half-year':
+                return addYear(firstDate, calendarHalfYearYearsCount);
+            case 'week':
+            case 'day':
+            default:
+                return addMonth(firstDate, 1);
+        }
+    }, [addMonth, addYear, mode]);
+    const [secondReferenceDate, setSecondReferenceDate] = useState(() => getSecondCalendarDate(referenceDateProp));
+    /**
+     * @NOTE referenceDate sync off（為了避免自動跳轉）
+     */
+    // useEffect(() => {
+    //   setFirstReferenceDate(referenceDateProp);
+    //   setSecondReferenceDate(getSecondCalendarDate(referenceDateProp));
+    // }, [referenceDateProp, getSecondCalendarDate]);
+    const { currentMode, pushModeStack, popModeStack } = useCalendarModeStack(mode || 'day');
+    const modifierGroup = useCalendarControlModifiers();
+    // First calendar controls
+    const onFirstPrev = () => {
+        const modifiers = modifierGroup[currentMode].single;
+        if (!modifiers)
+            return;
+        const [handleMinus] = modifiers;
+        const newFirst = handleMinus(firstReferenceDate);
+        setFirstReferenceDate(newFirst);
+        setSecondReferenceDate(getSecondCalendarDate(newFirst));
+    };
+    const onFirstNext = () => {
+        const modifiers = modifierGroup[currentMode].single;
+        if (!modifiers)
+            return;
+        const [, handleAdd] = modifiers;
+        const newFirst = handleAdd(firstReferenceDate);
+        setFirstReferenceDate(newFirst);
+        setSecondReferenceDate(getSecondCalendarDate(newFirst));
+    };
+    const onFirstDoublePrev = () => {
+        const [handleMinus] = modifierGroup[currentMode].double;
+        const newFirst = handleMinus(firstReferenceDate);
+        setFirstReferenceDate(newFirst);
+        setSecondReferenceDate(getSecondCalendarDate(newFirst));
+    };
+    const onFirstDoubleNext = () => {
+        const [, handleAdd] = modifierGroup[currentMode].double;
+        const newFirst = handleAdd(firstReferenceDate);
+        setFirstReferenceDate(newFirst);
+        setSecondReferenceDate(getSecondCalendarDate(newFirst));
+    };
+    // Second calendar controls (same behavior as first)
+    const onSecondPrev = onFirstPrev;
+    const onSecondNext = onFirstNext;
+    const onSecondDoublePrev = onFirstDoublePrev;
+    const onSecondDoubleNext = onFirstDoubleNext;
+    const onMonthControlClick = () => {
+        setFirstReferenceDate(firstReferenceDate);
+        setSecondReferenceDate(addYear(firstReferenceDate, 1));
+        pushModeStack('month');
+    };
+    const onYearControlClick = () => {
+        setFirstReferenceDate(firstReferenceDate);
+        setSecondReferenceDate(addYear(firstReferenceDate, calendarYearModuler));
+        pushModeStack('year');
+    };
+    // Wrapper functions for updating reference dates
+    // These should be used when switching modes (e.g., from month picker back to day mode)
+    // They update the target calendar and maintain the offset between calendars
+    const updateFirstReferenceDate = useCallback((date) => {
+        setFirstReferenceDate(date);
+        setSecondReferenceDate(getSecondCalendarDate(date));
+    }, [getSecondCalendarDate]);
+    const updateSecondReferenceDate = useCallback((date) => {
+        setFirstReferenceDate(date);
+        setSecondReferenceDate(getSecondCalendarDate(date));
+    }, [getSecondCalendarDate]);
+    return {
+        currentMode,
+        onMonthControlClick,
+        onFirstNext,
+        onFirstPrev,
+        onFirstDoubleNext,
+        onFirstDoublePrev,
+        onSecondNext,
+        onSecondPrev,
+        onSecondDoubleNext,
+        onSecondDoublePrev,
+        onYearControlClick,
+        popModeStack,
+        referenceDates: useMemo(() => [firstReferenceDate, secondReferenceDate], [firstReferenceDate, secondReferenceDate]),
+        updateFirstReferenceDate,
+        updateSecondReferenceDate,
+    };
+}
+
+export { useRangeCalendarControls };

package/Checkbox/CheckAll.d.ts

@@ -1,13 +1,23 @@
-import { ReactElement, ReactNode } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { ReactElement } from 'react';
 import { CheckboxGroupProps } from './CheckboxGroup';
-export interface CheckAllProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    children?: ReactElement<CheckboxGroupProps>;
-    label?: ReactNode;
+export interface CheckAllProps {
+    /**
+     * The checkbox group to control.
+     */
+    children: ReactElement<CheckboxGroupProps>;
+    /**
+     * Whether the check all checkbox is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The label text for the check all checkbox.
+     */
+    label?: string;
 }
 /**
  * The react component for `mezzanine` check all.
- * Only support controlled.
+ * Wraps a CheckboxGroup and provides a "check all" checkbox that controls all checkboxes in the group.
  */
 declare const CheckAll: import("react").ForwardRefExoticComponent<CheckAllProps & import("react").RefAttributes<HTMLDivElement>>;
 export default CheckAll;

package/Checkbox/CheckAll.js

@@ -1,36 +1,50 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, Children, useMemo } from 'react';
-import { checkboxClasses } from '@mezzanine-ui/core/checkbox';
+import { forwardRef, useId, useMemo } from 'react';
 import Checkbox from './Checkbox.js';
-import cx from 'clsx';
+import { assignCheckboxGroupValuesToEvent } from './CheckboxGroup.js';
 
 /**
  * The react component for `mezzanine` check all.
- * Only support controlled.
+ * Wraps a CheckboxGroup and provides a "check all" checkbox that controls all checkboxes in the group.
  */
 const CheckAll = forwardRef(function CheckAll(props, ref) {
-    const { children, className, label, ...rest } = props;
-    const checkboxGroup = children && Children.only(children);
-    const { disabled, name, onChange, options, size, value } = (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.props) || {};
-    const enabledOptions = useMemo(() => options === null || options === void 0 ? void 0 : options.filter((option) => !option.disabled), [options]);
-    let allChecked = false;
-    let indeterminate = false;
-    if (enabledOptions && value) {
-        allChecked = enabledOptions.length === value.length;
-        indeterminate = enabledOptions.length > value.length && value.length > 0;
-    }
-    return (jsxs("div", { ...rest, ref: ref, className: cx(checkboxClasses.all, className), children: [jsx("div", { children: jsx(Checkbox, { checked: allChecked, disabled: disabled, indeterminate: indeterminate, inputProps: {
-                        name,
-                    }, onChange: (event) => {
-                        if (onChange) {
-                            if (!event.target.checked) {
-                                onChange([], event);
-                            }
-                            else if (enabledOptions) {
-                                onChange(enabledOptions.map((option) => option.value), event);
-                            }
-                        }
-                    }, size: size, children: label }) }), children] }));
+    const { children, disabled = false, label = 'Check All', } = props;
+    // Generate unique id for the check all checkbox
+    // This is important for accessibility
+    const checkAllId = useId();
+    const checkboxGroupProps = children.props;
+    const { options = [], value = [], onChange } = checkboxGroupProps;
+    // Calculate checked and indeterminate states
+    const { checked, indeterminate } = useMemo(() => {
+        const enabledOptions = options.filter((opt) => !opt.disabled);
+        const enabledValues = enabledOptions.map((opt) => opt.value);
+        const selectedEnabledValues = value.filter((v) => enabledValues.includes(v));
+        if (selectedEnabledValues.length === 0) {
+            return { checked: false, indeterminate: false };
+        }
+        if (selectedEnabledValues.length === enabledValues.length) {
+            return { checked: true, indeterminate: false };
+        }
+        return { checked: false, indeterminate: true };
+    }, [options, value]);
+    const handleCheckAllChange = (event) => {
+        var _a;
+        if (!onChange)
+            return;
+        const isChecked = event.target.checked;
+        const enabledOptions = options.filter((opt) => !opt.disabled);
+        const enabledValues = enabledOptions.map((opt) => opt.value);
+        const disabledOptions = options.filter((opt) => opt.disabled);
+        const disabledValues = disabledOptions.map((opt) => opt.value);
+        const selectedDisabledValues = value.filter((v) => disabledValues.includes(v));
+        const newValue = isChecked
+            ? [...enabledValues, ...selectedDisabledValues]
+            : selectedDisabledValues;
+        const syntheticEvent = assignCheckboxGroupValuesToEvent(event, newValue, (_a = checkboxGroupProps.name) !== null && _a !== void 0 ? _a : '');
+        onChange(syntheticEvent);
+    };
+    return (jsxs("div", { ref: ref, children: [jsx(Checkbox, { checked: checked, disabled: disabled, indeterminate: indeterminate, inputProps: { id: checkAllId }, label: label, name: checkboxGroupProps.name || checkAllId, onChange: handleCheckAllChange }), children] }));
 });
 
 export { CheckAll as default };