@mezzanine-ui/react 1.0.0-beta.3 → 1.0.0-beta.5

package/Calendar/CalendarCell.d.ts

@@ -1,3 +1,4 @@
+import { CalendarMode } from '@mezzanine-ui/core/calendar';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface CalendarCellProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
@@ -8,6 +9,11 @@ export interface CalendarCellProps extends NativeElementPropsWithoutKeyAndRef<'d
      * Apply disabled styles if true.
      */
     disabled?: boolean;
+    /**
+     * Calendar mode for applying mode specific styles.
+     * @default 'day'
+     */
+    mode?: CalendarMode;
     /**
      * Apply today styles if true.
      */
@@ -16,6 +22,22 @@ export interface CalendarCellProps extends NativeElementPropsWithoutKeyAndRef<'d
      * The role attribute for accessibility
      */
     role?: string;
+    /**
+     * Apply range start styles if true.
+     */
+    isRangeStart?: boolean;
+    /**
+     * Apply range end styles if true.
+     */
+    isRangeEnd?: boolean;
+    /**
+     * Apply weekend styles if true.
+     */
+    isWeekend?: boolean;
+    /**
+     * Apply annotation styles if true.
+     */
+    withAnnotation?: boolean;
 }
 /**
  * The react component for `mezzanine` calendar cell.

package/Calendar/CalendarCell.js

@@ -7,11 +7,15 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarCell(props) {
-    const { active, children, className, disabled, today, role, ...restCalendarCellProps } = props;
-    return (jsx("div", { role: role, className: cx(calendarClasses.cell, {
+    const { active, children, className, disabled, mode = 'day', today, role, isRangeStart, isRangeEnd, isWeekend, withAnnotation, ...restCalendarCellProps } = props;
+    return (jsx("div", { role: role, className: cx(calendarClasses.cell, calendarClasses.cellMode(mode), {
             [calendarClasses.cellToday]: today,
             [calendarClasses.cellActive]: active,
             [calendarClasses.cellDisabled]: disabled,
+            [calendarClasses.cellWithAnnotation]: withAnnotation,
+            [calendarClasses.cellWeekend]: isWeekend,
+            [calendarClasses.cellRangeStart]: isRangeStart,
+            [calendarClasses.cellRangeEnd]: isRangeEnd,
         }, className), ...restCalendarCellProps, children: jsx("span", { className: calendarClasses.cellInner, children: children }) }));
 }
 

package/Calendar/CalendarControls.js

@@ -10,7 +10,7 @@ import cx from 'clsx';
  */
 function CalendarControls(props) {
     const { children, className, disableOnNext, disableOnDoubleNext, disableOnPrev, disableOnDoublePrev, onPrev, onNext, onDoubleNext, onDoublePrev, ...restElementProps } = props;
-    return (jsxs("div", { ...restElementProps, className: cx(calendarClasses.controls, className), children: [jsxs("div", { className: cx(calendarClasses.controlsActions), children: [onDoublePrev && (jsx("button", { type: "button", "aria-disabled": disableOnDoublePrev, disabled: disableOnDoublePrev, onClick: onDoublePrev, "aria-label": "Go to previous year", title: "Previous Year", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: DoubleChevronLeftIcon, "aria-hidden": "true" }) })), onPrev && (jsx("button", { type: "button", "aria-disabled": disableOnPrev, disabled: disableOnPrev, onClick: onPrev, "aria-label": "Go to previous month", title: "Previous Month", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: ChevronLeftIcon, "aria-hidden": "true" }) }))] }), jsx("div", { className: cx(calendarClasses.controlsMain), children: children }), jsxs("div", { className: cx(calendarClasses.controlsActions), children: [onNext && (jsx("button", { type: "button", "aria-disabled": disableOnNext, disabled: disableOnNext, onClick: onNext, "aria-label": "Go to next month", title: "Next Month", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: ChevronRightIcon, "aria-hidden": "true" }) })), onDoubleNext && (jsx("button", { type: "button", "aria-disabled": disableOnDoubleNext, disabled: disableOnDoubleNext, onClick: onDoubleNext, "aria-label": "Go to next year", title: "Next Year", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: DoubleChevronRightIcon, "aria-hidden": "true" }) }))] })] }));
+    return (jsxs("div", { ...restElementProps, className: cx(calendarClasses.controls, className), children: [jsxs("div", { className: cx(calendarClasses.controlsActions), children: [onDoublePrev ? (jsx("button", { type: "button", "aria-disabled": disableOnDoublePrev, disabled: disableOnDoublePrev, onClick: onDoublePrev, "aria-label": "Go to previous year", title: "Previous Year", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: DoubleChevronLeftIcon, "aria-hidden": "true" }) })) : null, onPrev ? (jsx("button", { type: "button", "aria-disabled": disableOnPrev, disabled: disableOnPrev, onClick: onPrev, "aria-label": "Go to previous month", title: "Previous Month", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: ChevronLeftIcon, "aria-hidden": "true" }) })) : null, !onPrev && !onDoublePrev ? (jsx("div", { className: calendarClasses.controlsButton, style: { pointerEvents: 'none' } })) : null] }), jsx("div", { className: cx(calendarClasses.controlsMain), children: children }), jsxs("div", { className: cx(calendarClasses.controlsActions), children: [onNext ? (jsx("button", { type: "button", "aria-disabled": disableOnNext, disabled: disableOnNext, onClick: onNext, "aria-label": "Go to next month", title: "Next Month", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: ChevronRightIcon, "aria-hidden": "true" }) })) : null, onDoubleNext ? (jsx("button", { type: "button", "aria-disabled": disableOnDoubleNext, disabled: disableOnDoubleNext, onClick: onDoubleNext, "aria-label": "Go to next year", title: "Next Year", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: DoubleChevronRightIcon, "aria-hidden": "true" }) })) : null, !onNext && !onDoubleNext ? (jsx("div", { className: calendarClasses.controlsButton, style: { pointerEvents: 'none' } })) : null] })] }));
 }
 
 export { CalendarControls as default };

package/Calendar/CalendarDayOfWeek.js

@@ -10,10 +10,11 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarDayOfWeek(props) {
-    const { getWeekDayNames, locale } = useCalendarContext();
+    const { getWeekDayNames, getWeekends, locale } = useCalendarContext();
     const { displayWeekDayLocale = locale, className, ...restRowProps } = props;
     const weekDayNames = getWeekDayNames(displayWeekDayLocale);
-    return (jsx("div", { className: cx(calendarClasses.row, className), role: "row", "aria-label": "Days of the week", ...restRowProps, children: weekDayNames.map((name, idx) => (jsx(CalendarCell, { role: "columnheader", children: name }, `CALENDAR_DAY_OF_WEEK/${name}-${idx}`))) }));
+    const weekends = getWeekends(displayWeekDayLocale);
+    return (jsx("div", { className: cx(calendarClasses.row, className), role: "row", "aria-label": "Days of the week", ...restRowProps, children: weekDayNames.map((name, idx) => (jsx(CalendarCell, { role: "columnheader", isWeekend: weekends[idx], children: name }, `CALENDAR_DAY_OF_WEEK/${name}-${idx}`))) }));
 }
 
 export { CalendarDayOfWeek as default };

package/Calendar/CalendarDays.js

@@ -33,6 +33,10 @@ function CalendarDays(props) {
                             false;
                         const inactive = !disabled && (isPrevMonth || isNextMonth);
                         const inRange = !inactive && isDateInRange && isDateInRange(date);
+                        const inRangeStart = inRange && value ? isSameDate(date, value[0]) : false;
+                        const inRangeEnd = inRange && value
+                            ? isSameDate(date, value[value.length - 1])
+                            : false;
                         const active = !disabled && !inactive && value && isDateIncluded(date, value);
                         const onMouseEnter = onDateHover
                             ? () => {
@@ -62,7 +66,7 @@ function CalendarDays(props) {
                         ]
                             .filter(Boolean)
                             .join(', ');
-                        return (jsx(CalendarCell, { today: isSameDate(date, getNow()), active: active, disabled: isPrevMonth || isNextMonth, children: jsxs("button", { type: "button", "aria-disabled": disabled, disabled: disabled, "aria-label": ariaLabel, "aria-pressed": active, "aria-current": isToday ? 'date' : undefined, onMouseEnter: onMouseEnter, className: cx(calendarClasses.button, {
+                        return (jsx(CalendarCell, { mode: "day", today: isSameDate(date, getNow()), active: active, disabled: isPrevMonth || isNextMonth, withAnnotation: Boolean(renderAnnotations), isRangeStart: inRangeStart, isRangeEnd: inRangeEnd, children: jsxs("button", { type: "button", "aria-disabled": disabled, disabled: disabled, "aria-label": ariaLabel, "aria-pressed": active, "aria-current": isToday ? 'date' : undefined, onMouseEnter: onMouseEnter, className: cx(calendarClasses.button, {
                                     [calendarClasses.buttonInRange]: inRange,
                                     [calendarClasses.buttonActive]: active,
                                     [calendarClasses.buttonDisabled]: disabled,

package/Calendar/CalendarHalfYears.js

@@ -12,7 +12,7 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarHalfYears(props) {
-    const { getYear, getCurrentHalfYearFirstDate, isHalfYearIncluded, setYear, setMonth, } = useCalendarContext();
+    const { getNow, 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]);
@@ -22,7 +22,7 @@ function CalendarHalfYears(props) {
     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) => {
+                }), children: [jsx(CalendarCell, { disabled: true, mode: "half-year", children: year }), calendarHalfYears.map((halfYear) => {
                         const halfYearStartMonth = (halfYear - 1) * 6;
                         const halfYearDate = setMonth(setYear(getCurrentHalfYearFirstDate(referenceDate), year), halfYearStartMonth);
                         const disabled = isHalfYearDisabled && isHalfYearDisabled(halfYearDate);
@@ -30,6 +30,12 @@ function CalendarHalfYears(props) {
                             isHalfYearInRange &&
                             isHalfYearInRange(halfYearDate);
                         const active = !disabled && value && isHalfYearIncluded(halfYearDate, value);
+                        const isRangeStart = value && value.length > 0
+                            ? isHalfYearIncluded(halfYearDate, [value[0]])
+                            : false;
+                        const isRangeEnd = value && value.length > 0
+                            ? isHalfYearIncluded(halfYearDate, [value[value.length - 1]])
+                            : false;
                         const onClick = () => {
                             if (disabled)
                                 return;
@@ -50,11 +56,11 @@ function CalendarHalfYears(props) {
                         ]
                             .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));
+                        return (jsx(CalendarCell, { mode: "half-year", today: isHalfYearIncluded(halfYearDate, [getNow()]), active: active, isRangeStart: isRangeStart, isRangeEnd: isRangeEnd, children: 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));
         }) }));
 }

package/Calendar/CalendarMonths.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { calendarMonths, calendarClasses } from '@mezzanine-ui/core/calendar';
 import { useCalendarContext } from './CalendarContext.js';
+import CalendarCell from './CalendarCell.js';
 import cx from 'clsx';
 
 /**
@@ -10,7 +11,7 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarMonths(props) {
-    const { locale, getMonthShortNames, isMonthIncluded, getCurrentMonthFirstDate, setMonth, } = useCalendarContext();
+    const { locale, getNow, getMonth, getMonthShortNames, isInMonth, 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) => {
@@ -21,6 +22,12 @@ function CalendarMonths(props) {
                     (isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(monthDateType)) ||
                     false;
                 const inRange = isMonthInRange && isMonthInRange(monthDateType);
+                const isRangeStart = value && value.length > 0
+                    ? isMonthIncluded(monthDateType, [value[0]])
+                    : false;
+                const isRangeEnd = value && value.length > 0
+                    ? isMonthIncluded(monthDateType, [value[value.length - 1]])
+                    : false;
                 const onClick = onClickProp
                     ? () => {
                         onClickProp(monthDateType);
@@ -42,11 +49,11 @@ function CalendarMonths(props) {
                 ]
                     .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,
-                    }), onClick: onClick, onMouseEnter: onMouseEnter, children: monthNames[month] }, month));
+                return (jsx(CalendarCell, { mode: "month", today: isInMonth(monthDateType, getMonth(getNow())), active: active, isRangeStart: isRangeStart, isRangeEnd: isRangeEnd, children: 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,
+                        }), onClick: onClick, onMouseEnter: onMouseEnter, children: monthNames[month] }) }, month));
             }) }) }));
 }
 

package/Calendar/CalendarQuarters.js

@@ -10,7 +10,7 @@ import cx from 'clsx';
  * The react component for `mezzanine` calendar quarters.
  */
 function CalendarQuarters(props) {
-    const { getYear, getCurrentQuarterFirstDate, isQuarterIncluded, setYear, setMonth, } = useCalendarContext();
+    const { getNow, 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]);
@@ -20,12 +20,18 @@ function CalendarQuarters(props) {
     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) => {
+                }), children: [jsx(CalendarCell, { disabled: true, mode: "quarter", 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 isRangeStart = value && value.length > 0
+                            ? isQuarterIncluded(quarterDate, [value[0]])
+                            : false;
+                        const isRangeEnd = value && value.length > 0
+                            ? isQuarterIncluded(quarterDate, [value[value.length - 1]])
+                            : false;
                         const onClick = onClickProp
                             ? () => {
                                 onClickProp(quarterDate);
@@ -52,11 +58,11 @@ function CalendarQuarters(props) {
                         ]
                             .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));
+                        return (jsx(CalendarCell, { mode: "quarter", today: isQuarterIncluded(quarterDate, [getNow()]), active: active, isRangeStart: isRangeStart, isRangeEnd: isRangeEnd, children: 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));
         }) }));
 }

package/Calendar/CalendarWeeks.js

@@ -16,19 +16,32 @@ function CalendarWeeks(props) {
     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(() => {
+    // Pre-calculate all weeks data including dates and week first dates
+    const weeksData = useMemo(() => {
+        const thisMonth = getMonth(referenceDate);
         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);
+            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 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 weekFirstDate = getCurrentWeekFirstDate(dates[0], displayWeekDayLocale);
+            return {
+                week,
+                dates,
+                weekStartInPrevMonth,
+                weekStartInNextMonth,
+                weekFirstDate,
+            };
         });
     }, [
         daysGrid,
@@ -36,35 +49,52 @@ function CalendarWeeks(props) {
         referenceDate,
         setDate,
         setMonth,
+        setHour,
+        setMinute,
+        setSecond,
+        setMillisecond,
         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);
-                        });
+    // Pre-calculate last week dates for range end comparison
+    const lastWeekDatesMap = useMemo(() => {
+        if (!value || value.length === 0)
+            return null;
+        const rangeLastDate = value.length === 1
+            ? setDate(value[0], getDate(value[0]) + 6)
+            : value[value.length - 1];
+        const lastWeekFirstDate = getCurrentWeekFirstDate(rangeLastDate, displayWeekDayLocale);
+        const lastWeekDates = [];
+        for (let i = 0; i < 7; i++) {
+            lastWeekDates.push(setDate(setMonth(lastWeekFirstDate, getMonth(lastWeekFirstDate)), getDate(lastWeekFirstDate) + i));
+        }
+        return {
+            rangeLastDate,
+            lastWeekDates,
+        };
+    }, [
+        value,
+        setDate,
+        setMonth,
+        getDate,
+        getMonth,
+        getCurrentWeekFirstDate,
+        displayWeekDayLocale,
+    ]);
+    return (jsxs("div", { ...rest, className: cx(calendarClasses.board, className), children: [jsx("div", { className: calendarClasses.week, children: weeksData.map(({ weekFirstDate }, idx) => (jsx("div", { className: calendarClasses.weekRow, children: jsx(CalendarCell, { disabled: true, children: getWeek(weekFirstDate, displayWeekDayLocale) }) }, idx))) }), jsxs("div", { className: calendarClasses.daysGrid, children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }), weeksData.map(({ week, dates, weekStartInPrevMonth, weekStartInNextMonth }, index) => {
+                        var _a;
                         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 &&
+                        const weekIncluded = !disabled &&
                             !inactive &&
                             value &&
                             isWeekIncluded(dates[0], value, displayWeekDayLocale);
-                        const inRange = !disabled && !inactive && isWeekInRange && isWeekInRange(dates[0]);
+                        const rangeFirstDate = value && value.length > 0 ? value[0] : null;
+                        const rangeLastDate = (_a = lastWeekDatesMap === null || lastWeekDatesMap === void 0 ? void 0 : lastWeekDatesMap.rangeLastDate) !== null && _a !== void 0 ? _a : null;
+                        const inRange = !disabled && isWeekInRange && isWeekInRange(dates[0]);
                         const onMouseEnter = onWeekHover
                             ? () => {
                                 onWeekHover(getCurrentWeekFirstDate(dates[0], displayWeekDayLocale));
@@ -88,18 +118,41 @@ function CalendarWeeks(props) {
                         const ariaLabel = [
                             `Week ${weekNum}`,
                             `${startMonth} ${startDay} to ${endMonth} ${endDay}`,
-                            active && 'Selected',
+                            weekIncluded && '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}`));
+                            }), disabled: disabled, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-pressed": weekIncluded, onClick: onClick, onMouseEnter: onMouseEnter, children: week.map((dateNum, dateIndex) => {
+                                let cellActive = false;
+                                let isFirstWeekFirstDate = false;
+                                let isLastWeekLastDate = false;
+                                if (weekIncluded &&
+                                    rangeFirstDate &&
+                                    rangeLastDate &&
+                                    lastWeekDatesMap) {
+                                    const currentDate = dates[dateIndex];
+                                    isFirstWeekFirstDate =
+                                        isWeekIncluded(currentDate, [rangeFirstDate], displayWeekDayLocale) && isSameDate(currentDate, rangeFirstDate);
+                                    isLastWeekLastDate =
+                                        isWeekIncluded(currentDate, [rangeLastDate], displayWeekDayLocale) &&
+                                            isSameDate(currentDate, lastWeekDatesMap.lastWeekDates[6]);
+                                    cellActive = isFirstWeekFirstDate || isLastWeekLastDate;
+                                }
+                                return (jsx(CalendarCell, { mode: "week", today: isSameDate(dates[dateIndex], getNow()), disabled: disabled ||
+                                        !isInMonth(dates[dateIndex], getMonth(referenceDate)), active: cellActive, isRangeStart: isFirstWeekFirstDate, isRangeEnd: isLastWeekLastDate, children: jsx("div", { className: cx(calendarClasses.button, {
+                                            [calendarClasses.buttonInRange]: weekIncluded,
+                                            [calendarClasses.buttonActive]: cellActive,
+                                        }), style: {
+                                            width: '100%',
+                                            height: '100%',
+                                            pointerEvents: 'none',
+                                        }, children: dateNum }) }, `${getMonth(dates[dateIndex])}/${getDate(dates[dateIndex])}`));
+                            }) }, `CALENDAR_WEEKS/WEEK_OF/${index}`));
                     })] })] }));
 }
 

package/Calendar/CalendarYears.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { getCalendarYearRange, calendarYearsBase, calendarClasses } from '@mezzanine-ui/core/calendar';
 import { useMemo } from 'react';
+import CalendarCell from './CalendarCell.js';
 import { useCalendarContext } from './CalendarContext.js';
 import cx from 'clsx';
 
@@ -18,12 +19,14 @@ function CalendarYears(props) {
                 const thisYear = base + start;
                 const yearDateType = setYear(getCurrentYearFirstDate(getNow()), thisYear);
                 const disabled = isYearDisabled && isYearDisabled(yearDateType);
-                const inactive = !disabled && (base === 0 || base === 11);
-                const active = !disabled &&
-                    !inactive &&
-                    value &&
-                    isYearIncluded(yearDateType, value);
+                const active = !disabled && value && isYearIncluded(yearDateType, value);
                 const inRange = isYearInRange && isYearInRange(yearDateType);
+                const isRangeStart = value && value.length > 0
+                    ? isYearIncluded(yearDateType, [value[0]])
+                    : false;
+                const isRangeEnd = value && value.length > 0
+                    ? isYearIncluded(yearDateType, [value[value.length - 1]])
+                    : false;
                 const onClick = onClickProp
                     ? () => {
                         onClickProp(yearDateType);
@@ -39,16 +42,14 @@ function CalendarYears(props) {
                     `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,
-                        [calendarClasses.buttonInactive]: inactive,
-                    }), onClick: onClick, onMouseEnter: onMouseEnter, children: thisYear }, base + start));
+                return (jsx(CalendarCell, { mode: "year", today: getYear(getNow()) === thisYear, active: active, isRangeStart: isRangeStart, isRangeEnd: isRangeEnd, children: 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,
+                        }), onClick: onClick, onMouseEnter: onMouseEnter, children: thisYear }) }, base + start));
             }) }) }));
 }
 

package/Calendar/useCalendarControlModifiers.d.ts

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

package/Calendar/useCalendarControlModifiers.js

@@ -15,34 +15,34 @@ function useCalendarControlModifiers() {
             single: [(date) => addMonth(date, -1), (date) => addMonth(date, 1)],
             double: [(date) => addYear(date, -1), (date) => addYear(date, 1)],
         },
-        // month mode: only double (year)
+        // month mode: only single
         month: {
-            single: null,
-            double: [(date) => addYear(date, -1), (date) => addYear(date, 1)],
+            single: [(date) => addYear(date, -1), (date) => addYear(date, 1)],
+            double: null,
         },
-        // year mode: only double (10 years)
+        // year mode: only single
         year: {
-            single: null,
-            double: [
+            single: [
                 (date) => addYear(date, -calendarYearModuler),
                 (date) => addYear(date, calendarYearModuler),
             ],
+            double: null,
         },
-        // quarter mode: only double (5 years)
+        // quarter mode: only single
         quarter: {
-            single: null,
-            double: [
+            single: [
                 (date) => addYear(date, -calendarQuarterYearsCount),
                 (date) => addYear(date, calendarQuarterYearsCount),
             ],
+            double: null,
         },
-        // half-year mode: only double (5 years)
+        // half-year mode: only single
         'half-year': {
-            single: null,
-            double: [
+            single: [
                 (date) => addYear(date, -calendarHalfYearYearsCount),
                 (date) => addYear(date, calendarHalfYearYearsCount),
             ],
+            double: null,
         },
     }), [addYear, addMonth]);
 }

package/Calendar/useCalendarControls.d.ts

@@ -2,10 +2,10 @@ import { DateType, CalendarMode } from '@mezzanine-ui/core/calendar';
 export declare function useCalendarControls(referenceDateProp: DateType, mode?: CalendarMode): {
     currentMode: CalendarMode;
     onMonthControlClick: () => void;
-    onNext: () => void;
-    onPrev: () => void;
-    onDoubleNext: () => void;
-    onDoublePrev: () => void;
+    onNext: (() => void) | undefined;
+    onPrev: (() => void) | undefined;
+    onDoubleNext: (() => void) | undefined;
+    onDoublePrev: (() => void) | undefined;
     onYearControlClick: () => void;
     popModeStack: () => void;
     referenceDate: string;

package/Calendar/useCalendarControls.js

@@ -1,5 +1,5 @@
 'use client';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useCalendarControlModifiers } from './useCalendarControlModifiers.js';
 import { useCalendarModeStack } from './useCalendarModeStack.js';
 
@@ -10,30 +10,44 @@ function useCalendarControls(referenceDateProp, mode) {
     }, [referenceDateProp]);
     const { currentMode, pushModeStack, popModeStack } = useCalendarModeStack(mode || 'day');
     const modifierGroup = useCalendarControlModifiers();
-    const onPrev = () => {
+    const onPrev = useMemo(() => {
         const modifiers = modifierGroup[currentMode].single;
         if (!modifiers)
             return;
-        const [handleMinus] = modifiers;
-        setReferenceDate(handleMinus(referenceDate));
-    };
-    const onNext = () => {
+        return () => {
+            const [handleMinus] = modifiers;
+            setReferenceDate(handleMinus(referenceDate));
+        };
+    }, [currentMode, modifierGroup, referenceDate]);
+    const onNext = useMemo(() => {
         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');
-    const onYearControlClick = () => pushModeStack('year');
+        return () => {
+            const [, handleAdd] = modifiers;
+            setReferenceDate(handleAdd(referenceDate));
+        };
+    }, [currentMode, modifierGroup, referenceDate]);
+    const onDoublePrev = useMemo(() => {
+        const modifiers = modifierGroup[currentMode].double;
+        if (!modifiers)
+            return;
+        return () => {
+            const [handleMinus] = modifiers;
+            setReferenceDate(handleMinus(referenceDate));
+        };
+    }, [currentMode, modifierGroup, referenceDate]);
+    const onDoubleNext = useMemo(() => {
+        const modifiers = modifierGroup[currentMode].double;
+        if (!modifiers)
+            return;
+        return () => {
+            const [, handleAdd] = modifiers;
+            setReferenceDate(handleAdd(referenceDate));
+        };
+    }, [currentMode, modifierGroup, referenceDate]);
+    const onMonthControlClick = useCallback(() => pushModeStack('month'), [pushModeStack]);
+    const onYearControlClick = useCallback(() => pushModeStack('year'), [pushModeStack]);
     return {
         currentMode,
         onMonthControlClick,