@mezzanine-ui/react 1.0.0-beta.4 → 1.0.0-beta.6

package/AutoComplete/AutoComplete.d.ts

@@ -148,6 +148,11 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * The z-index of the dropdown.
      */
     dropdownZIndex?: number | string;
+    /**
+     * Whether to enable portal for the dropdown.
+     * @default true
+     */
+    globalPortal?: boolean;
     /**
      * Callback fired when the dropdown list reaches the bottom.
      * Only fires when `menuMaxHeight` is set and the list is scrollable.

package/AutoComplete/AutoComplete.js

@@ -46,7 +46,7 @@ function isOptionSelected(option, value, isMultiple) {
  */
 const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { addable = false, asyncData = false, className, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, keepSearchTextOnBlur = false, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText, menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onSearchTextChange, onVisibilityChange, open: openProp, options: optionsProp, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', dropdownZIndex, onReachBottom, onLeaveBottom, } = props;
+    const { addable = false, asyncData = false, className, createSeparators = [',', '+', '\n'], defaultValue, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, emptyText, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, id, keepSearchTextOnBlur = false, inputPosition = 'outside', inputProps, inputRef, loading = false, loadingText, menuMaxHeight, mode = 'single', name, onClear: onClearProp, onChange: onChangeProp, onInsert, onSearch, onSearchTextChange, onVisibilityChange, open: openProp, options: optionsProp, placeholder = '', prefix, required = requiredFromFormControl || false, searchDebounceTime = 300, searchTextControlRef, size, trimOnCreate = true, value: valueProp, createActionText, createActionTextTemplate = '建立 "{text}"', dropdownZIndex, globalPortal = true, onReachBottom, onLeaveBottom, } = props;
     const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
     const isMultiple = mode === 'multiple';
     const isSingle = !isMultiple;
@@ -203,17 +203,33 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
                 // Don't let Dropdown's onBlur close the dropdown when controlled
                 // Only call onFocus(false) to update internal state
                 onFocus(false);
+                // Clear search text and insert text when blur if keepSearchTextOnBlur is false
+                if (!keepSearchTextOnBlur) {
+                    resetCreationInputs();
+                }
                 (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
                 return;
             }
             // For uncontrolled mode, let Dropdown handle it normally
             // Dropdown's inlineTriggerElement will handle the blur and close logic
+            // Clear search text and insert text when blur if keepSearchTextOnBlur is false
+            if (!keepSearchTextOnBlur) {
+                resetCreationInputs();
+            }
             (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(inputProps, e);
             return;
         }
         onFocus(false);
+        // Clear search text and insert text when blur if keepSearchTextOnBlur is false
+        if (!keepSearchTextOnBlur) {
+            resetCreationInputs();
+        }
         (_c = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _c === void 0 ? void 0 : _c.call(inputProps, e);
     };
+    const handleClear = useCallback((e) => {
+        onClear(e);
+        resetCreationInputs();
+    }, [onClear, resetCreationInputs]);
     const onClickSuffixActionIcon = () => {
         toggleOpen((prev) => !prev);
     };
@@ -408,13 +424,14 @@ const AutoComplete = forwardRef(function AutoComplete(props, ref) {
     return (jsx(SelectControlContext.Provider, { value: context, children: jsx("div", { ref: nodeRef, className: cx(autocompleteClasses.host, {
                 [autocompleteClasses.hostFullWidth]: fullWidth,
                 [autocompleteClasses.hostInsideClosed]: inputPosition === 'inside' && !open,
+                [autocompleteClasses.hostMode(mode)]: mode,
             }), children: jsx(Dropdown, { actionText: shouldShowCreateAction
                     ? (createActionText
                         ? createActionText(insertText)
                         : createActionTextTemplate.replace('{text}', insertText))
                     : undefined, activeIndex: activeIndex, disabled: isInputDisabled, emptyText: emptyText, followText: searchText, inputPosition: inputPosition, isMatchInputValue: true, listboxId: menuId, loadingText: loadingText, maxHeight: menuMaxHeight, mode: mode, onActionCustom: shouldShowCreateAction
                     ? handleActionCustom
-                    : undefined, onItemHover: setActiveIndex, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: open, options: dropdownOptionsForRender, placement: "bottom", sameWidth: true, showDropdownActions: shouldShowCreateAction, showActionShowTopBar: shouldShowCreateAction, status: dropdownStatus, type: "default", value: dropdownValue, zIndex: dropdownZIndex, onReachBottom: onReachBottom, onLeaveBottom: onLeaveBottom, children: jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, isForceClearable: true, disabled: isInputDisabled, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: wrappedOnChange, onClear: onClear, placeholder: getPlaceholder(), prefix: prefix, readOnly: false, required: required, type: error ? 'error' : 'default', inputProps: {
+                    : undefined, onItemHover: setActiveIndex, onSelect: handleDropdownSelect, onVisibilityChange: handleVisibilityChange, open: open, options: dropdownOptionsForRender, placement: "bottom", sameWidth: true, showDropdownActions: shouldShowCreateAction, showActionShowTopBar: shouldShowCreateAction, status: dropdownStatus, type: "default", value: dropdownValue, zIndex: dropdownZIndex, globalPortal: globalPortal, onReachBottom: onReachBottom, onLeaveBottom: onLeaveBottom, children: jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, isForceClearable: true, disabled: isInputDisabled, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: wrappedOnChange, onClear: handleClear, placeholder: getPlaceholder(), prefix: prefix, readOnly: false, required: required, type: error ? 'error' : 'default', inputProps: {
                         ...resolvedInputProps,
                         onClick: (e) => {
                             var _a;

package/Breadcrumb/BreadcrumbDropdown.js

@@ -16,7 +16,7 @@ const BreadcrumbDropdown = forwardRef(function BreadcrumbDropdown(props, ref) {
         setOpen(!open);
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsx("span", { className: cx(breadcrumbItemClasses.host, className), ref: ref, children: jsx(Dropdown, { onClose: () => setOpen(false), onOpen: () => handleClick(), options: options, placement: "bottom-start", ...rest, children: jsxs("button", { className: cx(breadcrumbItemClasses.trigger, open && breadcrumbItemClasses.expanded, current && breadcrumbItemClasses.current), type: "button", children: [name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })), jsx(Rotate, { in: open, children: jsx(Icon, { className: breadcrumbItemClasses.icon, icon: ChevronDownIcon, size: 14 }) })] }) }) }));
+    return (jsx("span", { className: cx(breadcrumbItemClasses.host, open && breadcrumbItemClasses.expanded, current && breadcrumbItemClasses.current, className), ref: ref, children: jsx(Dropdown, { onClose: () => setOpen(false), onOpen: () => handleClick(), options: options, placement: "bottom-start", ...rest, children: jsxs("button", { className: breadcrumbItemClasses.trigger, type: "button", children: [name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })), jsx(Rotate, { in: open, children: jsx(Icon, { className: breadcrumbItemClasses.icon, icon: ChevronDownIcon, size: 14 }) })] }) }) }));
 });
 
 export { BreadcrumbDropdown as default };

package/Breadcrumb/BreadcrumbItem.js

@@ -21,7 +21,7 @@ const BreadcrumbItem = forwardRef(function BreadcrumbItem(props, ref) {
     const handleClick = () => {
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsx("span", { ...rest, className: cx(breadcrumbItemClasses.host, className), ref: ref, children: jsx(TriggerComponent, { className: cx(breadcrumbItemClasses.trigger, current && breadcrumbItemClasses.current), href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })) }) }));
+    return (jsx("span", { ...rest, className: cx(breadcrumbItemClasses.host, current && breadcrumbItemClasses.current, className), ref: ref, children: jsx(TriggerComponent, { className: breadcrumbItemClasses.trigger, href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: name && (jsx(Typography, { variant: current ? 'caption-highlight' : 'caption', children: name })) }) }));
 });
 
 export { BreadcrumbItem as default };

package/Breadcrumb/BreadcrumbOverflowMenuItem.js

@@ -21,7 +21,7 @@ const BreadcrumbOverflowMenuItem = forwardRef(function BreadcrumbOverflowMenuIte
     const handleClick = () => {
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsx("span", { ...rest, className: cx(breadcrumbOverflowMenuItemClasses.host, className), ref: ref, children: jsx(TriggerComponent, { className: cx(breadcrumbOverflowMenuItemClasses.trigger), href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: jsx(Typography, { variant: 'label-primary', children: name }) }) }));
+    return (jsx("span", { ...rest, className: cx(breadcrumbOverflowMenuItemClasses.host, className), ref: ref, children: jsx(TriggerComponent, { className: breadcrumbOverflowMenuItemClasses.trigger, href: TriggerComponent === 'a' ? href : undefined, onClick: TriggerComponent === 'a' ? handleClick : undefined, rel: TriggerComponent === 'a' ? rel : undefined, target: TriggerComponent === 'a' ? target : undefined, children: jsx(Typography, { variant: 'label-primary', children: name }) }) }));
 });
 
 export { BreadcrumbOverflowMenuItem as default };

package/Calendar/Calendar.js

@@ -93,9 +93,7 @@ const Calendar = forwardRef(function Calendar(props, ref) {
                                     ? () => {
                                         onDoubleNext(mode);
                                     }
-                                    : undefined, onNext: 
-                                // Only day and week modes have single next/prev (for month navigation)
-                                onNext && (mode === 'day' || mode === 'week')
+                                    : undefined, onNext: onNext
                                     ? () => {
                                         onNext(mode);
                                     }
@@ -103,9 +101,7 @@ const Calendar = forwardRef(function Calendar(props, ref) {
                                     ? () => {
                                         onDoublePrev(mode);
                                     }
-                                    : undefined, onPrev: 
-                                // Only day and week modes have single next/prev (for month navigation)
-                                onPrev && (mode === 'day' || mode === 'week')
+                                    : undefined, onPrev: onPrev
                                     ? () => {
                                         onPrev(mode);
                                     }

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;