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

package/Calendar/CalendarFooterActions.d.ts

@@ -0,0 +1,13 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { ButtonProps } from '../Button';
+export interface CalendarFooterActionsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
+    actions: {
+        secondaryButtonProps: ButtonProps;
+        primaryButtonProps: ButtonProps;
+    };
+}
+/**
+ * The react component for `mezzanine` calendar footer actions.
+ */
+declare function CalendarFooterActions(props: CalendarFooterActionsProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarFooterActions;

package/Calendar/CalendarFooterActions.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { calendarClasses } from '@mezzanine-ui/core/calendar';
+import Button from '../Button/Button.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar footer actions.
+ */
+function CalendarFooterActions(props) {
+    const { actions, className, ...restElementProps } = props;
+    return (jsxs("div", { ...restElementProps, className: cx(calendarClasses.footerActions, className), children: [jsx(Button, { variant: "base-tertiary", size: "minor", ...actions.secondaryButtonProps }), jsx(Button, { variant: "base-primary", size: "minor", ...actions.primaryButtonProps })] }));
+}
+
+export { CalendarFooterActions as default };

package/Calendar/CalendarFooterControl.d.ts

@@ -0,0 +1,16 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CalendarFooterControlProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
+    /**
+     * The name of children content.
+     */
+    children?: string;
+    /**
+     * The onClick handler for button
+     */
+    onClick?: VoidFunction;
+}
+/**
+ * The react component for `mezzanine` calendar footer control.
+ */
+declare function CalendarFooterControl(props: CalendarFooterControlProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarFooterControl;

package/Calendar/CalendarFooterControl.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { calendarClasses } from '@mezzanine-ui/core/calendar';
+import Button from '../Button/Button.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar footer control.
+ */
+function CalendarFooterControl(props) {
+    const { children, className, onClick, ...restElementProps } = props;
+    return (jsx("div", { ...restElementProps, className: cx(calendarClasses.footerControl, className), children: jsx(Button, { variant: "base-ghost", size: "minor", onClick: onClick, children: children }) }));
+}
+
+export { CalendarFooterControl as default };

package/Calendar/CalendarHalfYears.d.ts

@@ -0,0 +1,39 @@
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CalendarHalfYearsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
+    /**
+     * Provide if you have a custom disabling logic.
+     * The method takes the date object as its parameter.
+     */
+    isHalfYearDisabled?: (date: DateType) => boolean;
+    /**
+     * Provide if you have a custom logic for checking if the half-year is in range.
+     * The method takes the date object as its parameter.
+     */
+    isHalfYearInRange?: (date: DateType) => boolean;
+    /**
+     * Click handler for the button of each half-year.
+     * The method takes the date object as its parameter.
+     */
+    onClick?: (target: DateType) => void;
+    /**
+     * Mouse enter handler for the button of each half-year.
+     * The method takes the date object as its parameter.
+     */
+    onHalfYearHover?: (target: DateType) => void;
+    /**
+     * The reference date for getting the half-years range and computing the date object.
+     */
+    referenceDate: DateType;
+    /**
+     * The half-year will be marked as active if it matches the same half-year of any value in the array.
+     */
+    value?: DateType[];
+}
+/**
+ * The react component for `mezzanine` calendar half-years.
+ * This component displays half-years for 5 years.
+ * You may use it to compose your own calendar.
+ */
+declare function CalendarHalfYears(props: CalendarHalfYearsProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarHalfYears;

package/Calendar/CalendarHalfYears.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getYearRange, calendarHalfYearYearsCount, calendarHalfYears, 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 half-years.
+ * This component displays half-years for 5 years.
+ * You may use it to compose your own calendar.
+ */
+function CalendarHalfYears(props) {
+    const { getYear, getCurrentHalfYearFirstDate, isHalfYearIncluded, setYear, setMonth, } = useCalendarContext();
+    const { className, isHalfYearDisabled, isHalfYearInRange, onClick: onClickProp, onHalfYearHover, referenceDate, value, ...rest } = props;
+    const currentYear = getYear(referenceDate);
+    const [start] = useMemo(() => getYearRange(currentYear, calendarHalfYearYearsCount), [currentYear]);
+    const years = useMemo(() => {
+        return Array.from({ length: calendarHalfYearYearsCount }, (_, 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 }), calendarHalfYears.map((halfYear) => {
+                        const halfYearStartMonth = (halfYear - 1) * 6;
+                        const halfYearDate = setMonth(setYear(getCurrentHalfYearFirstDate(referenceDate), year), halfYearStartMonth);
+                        const disabled = isHalfYearDisabled && isHalfYearDisabled(halfYearDate);
+                        const inRange = !disabled &&
+                            isHalfYearInRange &&
+                            isHalfYearInRange(halfYearDate);
+                        const active = !disabled && value && isHalfYearIncluded(halfYearDate, value);
+                        const onClick = () => {
+                            if (disabled)
+                                return;
+                            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(halfYearDate);
+                        };
+                        const onMouseEnter = () => {
+                            if (disabled)
+                                return;
+                            onHalfYearHover === null || onHalfYearHover === void 0 ? void 0 : onHalfYearHover(halfYearDate);
+                        };
+                        // Accessible half-year label for screen readers
+                        const halfYearMonths = halfYear === 1 ? 'January to June' : 'July to December';
+                        const ariaLabel = [
+                            `Half ${halfYear}, ${year}`,
+                            halfYearMonths,
+                            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.buttonDisabled]: disabled,
+                                [calendarClasses.buttonInRange]: inRange,
+                                [calendarClasses.buttonActive]: active,
+                            }), onClick: onClick, onMouseEnter: onMouseEnter, children: ["H", halfYear] }, halfYear));
+                    })] }, year));
+        }) }));
+}
+
+export { CalendarHalfYears as default };

package/Calendar/CalendarMonths.js

@@ -10,11 +10,11 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarMonths(props) {
-    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonthShortNames, isMonthIncluded, setMonth, } = useCalendarContext();
-    const { className, displayMonthLocale = displayMonthLocaleFromConfig, isMonthDisabled, isMonthInRange, isYearDisabled, onClick: onClickProp, onMonthHover, referenceDate, value, ...rest } = props;
+    const { locale, getMonthShortNames, isMonthIncluded, getCurrentMonthFirstDate, setMonth, } = useCalendarContext();
+    const { className, displayMonthLocale = locale, isMonthDisabled, isMonthInRange, isYearDisabled, onClick: onClickProp, onMonthHover, referenceDate, value, ...rest } = props;
     const monthNames = getMonthShortNames(displayMonthLocale);
     return (jsx("div", { className: cx(calendarClasses.board, className), ...rest, children: jsx("div", { className: calendarClasses.twelveGrid, children: calendarMonths.map((month) => {
-                const monthDateType = setMonth(referenceDate, month);
+                const monthDateType = setMonth(getCurrentMonthFirstDate(referenceDate), month);
                 const active = value && isMonthIncluded(monthDateType, value);
                 /** @NOTE Current month should be disabled when current year is disabled */
                 const disabled = (isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(monthDateType)) ||
@@ -31,7 +31,18 @@ function CalendarMonths(props) {
                         onMonthHover(monthDateType);
                     }
                     : undefined;
-                return (jsx("button", { type: "button", "aria-disabled": disabled, disabled: disabled, className: cx(calendarClasses.button, {
+                // Accessible month label for screen readers
+                const monthDate = new Date(monthDateType);
+                const fullMonthName = monthDate.toLocaleDateString(displayMonthLocale, { month: 'long' });
+                const year = monthDate.getFullYear();
+                const ariaLabel = [
+                    `${fullMonthName} ${year}`,
+                    active && 'Selected',
+                    disabled && 'Not available',
+                ]
+                    .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/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

@@ -13,49 +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);
-                    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

@@ -11,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 &&
@@ -34,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;