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

package/DateRangePicker/DateRangePicker.js

@@ -1,12 +1,11 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { forwardRef, useCallback, useState, useRef, useEffect, useMemo } from 'react';
 import { getDefaultModeFormat } from '@mezzanine-ui/core/calendar';
 import { CalendarIcon } from '@mezzanine-ui/icons';
 import DateRangePickerCalendar from './DateRangePickerCalendar.js';
 import { useDateRangePickerValue } from './useDateRangePickerValue.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
 import { useCalendarContext } from '../Calendar/CalendarContext.js';
 import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
 import Icon from '../Icon/Icon.js';
@@ -14,19 +13,65 @@ import RangePickerTrigger from '../Picker/RangePickerTrigger.js';
 
 /**
  * The react component for `mezzanine` date range picker.
- * Notice that any component related to date-range-picker should be used along with `CalendarContext`. <br />
+ * Notice that any component related to date-range-picker should be used along with `CalendarContext`.
  */
 const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { defaultDateFormat, getNow, isBetween } = useCalendarContext();
-    const { calendarProps, className, clearable = true, defaultValue, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, isWeekDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, } = props;
-    const { onBlur: onFromBlurProp, onKeyDown: onFromKeyDownProp, onFocus: onFromFocusProp, ...restInputFromProps } = inputFromProps || {};
-    const { onBlur: onToBlurProp, onKeyDown: onToKeyDownProp, onFocus: onToFocusProp, ...restInputToProps } = inputToProps || {};
-    const formats = useMemo(() => [format, defaultDateFormat, getDefaultModeFormat(mode)], [defaultDateFormat, format, mode]);
+    const { addDay, getNow, isBefore, isBetween } = useCalendarContext();
+    const { actions: actionsProp, calendarProps, className, clearable = true, confirmMode = 'immediate', defaultValue, disabledMonthSwitch = false, disableOnDoubleNext, disableOnDoublePrev, disableOnNext, disableOnPrev, disabled = false, disabledYearSwitch = false, displayMonthLocale, displayWeekDayLocale, error = false, errorMessagesFrom, errorMessagesTo, fadeProps, firstCalendarRef, format: formatProp, fullWidth = false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, isHalfYearDisabled, isMonthDisabled, isQuarterDisabled, isWeekDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, popperProps, prefix, quickSelect, readOnly, referenceDate: referenceDateProp, renderAnnotations, required = false, secondCalendarRef, size, validateFrom, validateTo, value: valueProp, } = props;
+    const format = formatProp || getDefaultModeFormat(mode);
     function isBetweenRange(valueToCheck, t1, t2, granularity) {
         return (isBetween(valueToCheck, t1, t2, granularity) ||
             isBetween(valueToCheck, t2, t1, granularity));
     }
+    /** Check if there are disabled dates in the range */
+    const hasDisabledDateInRange = useCallback((start, end) => {
+        var _a, _b, _c, _d, _e, _f;
+        const [rangeStart, rangeEnd] = isBefore(start, end)
+            ? [start, end]
+            : [end, start];
+        let current = rangeStart;
+        while (isBefore(current, rangeEnd) || current === rangeEnd) {
+            let isDisabled = false;
+            switch (mode) {
+                case 'day':
+                    isDisabled = (_a = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(current)) !== null && _a !== void 0 ? _a : false;
+                    break;
+                case 'week':
+                    isDisabled = (_b = isWeekDisabled === null || isWeekDisabled === void 0 ? void 0 : isWeekDisabled(current)) !== null && _b !== void 0 ? _b : false;
+                    break;
+                case 'month':
+                    isDisabled = (_c = isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(current)) !== null && _c !== void 0 ? _c : false;
+                    break;
+                case 'year':
+                    isDisabled = (_d = isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(current)) !== null && _d !== void 0 ? _d : false;
+                    break;
+                case 'quarter':
+                    isDisabled = (_e = isQuarterDisabled === null || isQuarterDisabled === void 0 ? void 0 : isQuarterDisabled(current)) !== null && _e !== void 0 ? _e : false;
+                    break;
+                case 'half-year':
+                    isDisabled = (_f = isHalfYearDisabled === null || isHalfYearDisabled === void 0 ? void 0 : isHalfYearDisabled(current)) !== null && _f !== void 0 ? _f : false;
+                    break;
+            }
+            if (isDisabled) {
+                return true;
+            }
+            current = addDay(current, 1);
+            if (isBefore(rangeEnd, current)) {
+                break;
+            }
+        }
+        return false;
+    }, [
+        addDay,
+        isBefore,
+        mode,
+        isDateDisabled,
+        isWeekDisabled,
+        isMonthDisabled,
+        isYearDisabled,
+        isQuarterDisabled,
+        isHalfYearDisabled,
+    ]);
     /** Using internal reference date */
     const [referenceDate, updateReferenceDate] = useState(referenceDateProp || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[0]) || getNow());
     /** Calendar panel toggle */
@@ -35,35 +80,24 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
     const onCalendarToggle = useCallback((currentOpen) => {
         if (!preventOpen) {
             setOpen(currentOpen);
-            if (onCalendarToggleProp) {
-                onCalendarToggleProp(currentOpen);
-            }
+            onCalendarToggleProp === null || onCalendarToggleProp === void 0 ? void 0 : onCalendarToggleProp(currentOpen);
         }
     }, [onCalendarToggleProp, preventOpen]);
-    const onFromFocus = useCallback((event) => {
-        if (onFromFocusProp) {
-            onFromFocusProp(event);
-        }
-        onCalendarToggle(true);
-    }, [onCalendarToggle, onFromFocusProp]);
-    const onToFocus = useCallback((event) => {
-        if (onToFocusProp) {
-            onToFocusProp(event);
-        }
-        onCalendarToggle(true);
-    }, [onCalendarToggle, onToFocusProp]);
     /** Values and onChange */
     const inputToRef = useRef(null);
     const inputFromRef = useRef(null);
-    const { calendarValue, inputFromValue, inputToValue, onCalendarChange, onCalendarHover, onChange, onClear, onFromBlur, onFromKeyDown, onInputFromChange, onInputToChange, onToBlur, onToKeyDown, value: internalValue, } = useDateRangePickerValue({
+    // In manual mode, don't pass onChange to hook - we'll handle it via confirm button
+    const shouldTriggerOnChangeImmediately = confirmMode === 'immediate' && !actionsProp;
+    const { calendarValue, checkIsInRange, inputFromValue, inputToValue, onCalendarChange, onCalendarHover, onChange, onClear, onFromBlur, onFromFocus, onInputFromChange, onInputToChange, onToBlur, onToFocus, value: internalValue, } = useDateRangePickerValue({
         format,
-        formats,
-        value: valueProp,
+        hasDisabledDateInRange,
         inputFromRef,
         inputToRef,
         mode,
-        onChange: onChangeProp,
+        onChange: shouldTriggerOnChangeImmediately ? onChangeProp : undefined,
+        value: valueProp,
     });
+    // Update reference date when internal value changes
     useEffect(() => {
         const [from, to] = internalValue;
         if (from) {
@@ -76,112 +110,120 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
     /** Bind calendar open control to handlers */
     const onCalendarChangeWithCloseControl = useCallback((val) => {
         onCalendarChange(val);
-        const [from, to] = internalValue;
-        const hasFirstValue = (from && !to) || (to && !from);
-        if (hasFirstValue && val) {
+        // Close panel when range is complete (only if auto-close is enabled)
+        // Auto-close is disabled when actions are provided or in manual mode
+        if (val[0] && val[1] && shouldTriggerOnChangeImmediately) {
             onCalendarToggle(false);
         }
-    }, [internalValue, onCalendarChange, onCalendarToggle]);
-    const onFromKeyDownWithCloseControl = useCallback((event) => {
-        onFromKeyDown(event);
+    }, [onCalendarChange, onCalendarToggle, shouldTriggerOnChangeImmediately]);
+    /** Handle confirm action (for manual mode) */
+    const onConfirm = useCallback(() => {
         const [from, to] = internalValue;
-        if (event.key === 'Enter' && from && to) {
-            onCalendarToggle(false);
+        if (from && to) {
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, to]);
+            // Sync internal state and reset isSelecting
+            onChange([from, to]);
         }
-    }, [internalValue, onCalendarToggle, onFromKeyDown]);
-    const onToKeyDownWithCloseControl = useCallback((event) => {
-        onToKeyDown(event);
-        const [from, to] = internalValue;
-        if (event.key === 'Enter' && from && to) {
-            onCalendarToggle(false);
+        onCalendarToggle(false);
+    }, [internalValue, onChange, onChangeProp, onCalendarToggle]);
+    /** Handle cancel action (for manual mode) */
+    const onCancel = useCallback(() => {
+        onChange(valueProp);
+        onCalendarToggle(false);
+    }, [onChange, onCalendarToggle, valueProp]);
+    /** Auto-generated actions for manual mode */
+    const actions = useMemo(() => {
+        // In manual mode, auto-generate actions
+        if (confirmMode === 'manual') {
+            const [from, to] = internalValue;
+            const isRangeComplete = Boolean(from && to);
+            return {
+                primaryButtonProps: {
+                    children: 'Confirm',
+                    disabled: !isRangeComplete,
+                    onClick: onConfirm,
+                    ...actionsProp === null || actionsProp === void 0 ? void 0 : actionsProp.primaryButtonProps,
+                },
+                secondaryButtonProps: {
+                    children: 'Cancel',
+                    onClick: onCancel,
+                    ...actionsProp === null || actionsProp === void 0 ? void 0 : actionsProp.secondaryButtonProps,
+                },
+            };
         }
-    }, [internalValue, onCalendarToggle, onToKeyDown]);
+        if (actionsProp) {
+            return actionsProp;
+        }
+        return undefined;
+    }, [actionsProp, confirmMode, internalValue, onConfirm, onCancel]);
     /** Calendar cell in range checker */
     const getIsInRangeHandler = (granularity) => {
         const [anchor1, anchor2] = calendarValue || [];
-        return anchor1 && anchor2
-            ? (date) => isBetweenRange(date, anchor1, anchor2, granularity)
-            : undefined;
+        // If no range or disabled dates exist in range, return undefined
+        if (!anchor1 || !anchor2 || !checkIsInRange(anchor2)) {
+            return undefined;
+        }
+        return (date) => isBetweenRange(date, anchor1, anchor2, granularity);
     };
     /** Popper settings */
     const anchorRef = useRef(null);
     const calendarRef = useRef(null);
     const triggerComposedRef = useComposeRefs([anchorRef, ref]);
-    /** Resolve input props */
-    const onResolvedFromBlur = useCallback((event) => {
-        if (onFromBlurProp) {
-            onFromBlurProp(event);
-        }
-        onFromBlur(event);
-    }, [onFromBlur, onFromBlurProp]);
-    const onResolvedToBlur = useCallback((event) => {
-        if (onToBlurProp) {
-            onToBlurProp(event);
-        }
-        onToBlur(event);
-    }, [onToBlur, onToBlurProp]);
-    const onResolvedFromKeyDown = useCallback((event) => {
-        if (onFromKeyDownProp) {
-            onFromKeyDownProp(event);
-        }
-        onFromKeyDownWithCloseControl(event);
-    }, [onFromKeyDownProp, onFromKeyDownWithCloseControl]);
-    const onResolvedToKeyDown = useCallback((event) => {
-        if (onToKeyDownProp) {
-            onToKeyDownProp(event);
-        }
-        onToKeyDownWithCloseControl(event);
-    }, [onToKeyDownProp, onToKeyDownWithCloseControl]);
-    const resolvedInputFromProps = {
-        ...restInputFromProps,
-        onFocus: onFromFocus,
-        onKeyDown: onResolvedFromKeyDown,
-        onBlur: onResolvedFromBlur,
-        size: format.length + 2,
-    };
-    const resolvedInputToProps = {
-        ...restInputToProps,
-        onFocus: onToFocus,
-        onKeyDown: onResolvedToKeyDown,
-        onBlur: onResolvedToBlur,
-        size: format.length + 2,
-    };
+    /** Input focus handlers */
+    const onFromFocusHandler = useCallback((_event) => {
+        onFromFocus();
+        onCalendarToggle(true);
+    }, [onCalendarToggle, onFromFocus]);
+    const onToFocusHandler = useCallback((_event) => {
+        onToFocus();
+        onCalendarToggle(true);
+    }, [onCalendarToggle, onToFocus]);
     /** Blur, click away and key down close */
-    const onClose = () => {
+    const onClose = useCallback(() => {
         onChange(valueProp);
         onCalendarToggle(false);
-    };
-    const onChangeClose = () => {
+    }, [onChange, onCalendarToggle, valueProp]);
+    const onChangeClose = useCallback(() => {
+        // In manual mode, always restore to valueProp (don't auto-submit on click-away)
+        if (confirmMode === 'manual') {
+            onChange(valueProp);
+            onCalendarToggle(false);
+            return;
+        }
         const [from, to] = internalValue;
         if (from && to) {
-            const newValue = onChange([from, to]);
-            if (onChangeProp) {
-                onChangeProp(newValue);
-            }
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, to]);
         }
         else {
             onChange(valueProp);
         }
         onCalendarToggle(false);
-    };
+    }, [
+        confirmMode,
+        internalValue,
+        onChange,
+        onCalendarToggle,
+        onChangeProp,
+        valueProp,
+    ]);
     usePickerDocumentEventClose({
-        open,
         anchorRef,
-        popperRef: calendarRef,
         lastElementRefInFlow: inputToRef,
-        onClose,
         onChangeClose,
+        onClose,
+        open,
+        popperRef: calendarRef,
     });
-    /** Icon */
-    const onIconClick = (e) => {
+    /** Icon click handler */
+    const onIconClick = useCallback((e) => {
         e.stopPropagation();
         if (open) {
             onChange(valueProp);
         }
         onCalendarToggle(!open);
-    };
+    }, [onChange, onCalendarToggle, open, valueProp]);
     const suffixActionIcon = jsx(Icon, { icon: CalendarIcon, onClick: onIconClick });
-    return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: resolvedInputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: resolvedInputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClear, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, prefix: prefix, readOnly: readOnly, required: required, size: size, suffixActionIcon: suffixActionIcon }), jsx(DateRangePickerCalendar, { ref: calendarRef, open: open, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isDateInRange: getIsInRangeHandler('date'), isMonthDisabled: isMonthDisabled, isMonthInRange: getIsInRangeHandler('month'), isWeekDisabled: isWeekDisabled, isWeekInRange: getIsInRangeHandler('week'), isYearDisabled: isYearDisabled, isYearInRange: getIsInRangeHandler('year'), mode: mode, onChange: onCalendarChangeWithCloseControl, onDateHover: onCalendarHover, onWeekHover: onCalendarHover, onMonthHover: onCalendarHover, onYearHover: onCalendarHover, popperProps: popperProps, referenceDate: referenceDate, value: calendarValue })] }));
+    return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { className: className, clearable: clearable, disabled: disabled, error: error, errorMessagesFrom: errorMessagesFrom, errorMessagesTo: errorMessagesTo, format: format, fullWidth: fullWidth, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: inputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: inputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClear, onFromBlur: onFromBlur, onFromFocus: onFromFocusHandler, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, onToBlur: onToBlur, onToFocus: onToFocusHandler, prefix: prefix, readOnly: readOnly, ref: triggerComposedRef, required: required, size: size, suffixActionIcon: suffixActionIcon, validateFrom: validateFrom, validateTo: validateTo }), jsx(DateRangePickerCalendar, { actions: actions, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, fadeProps: fadeProps, firstCalendarRef: firstCalendarRef, isDateDisabled: isDateDisabled, isDateInRange: getIsInRangeHandler('date'), isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: getIsInRangeHandler('half-year'), isMonthDisabled: isMonthDisabled, isMonthInRange: getIsInRangeHandler('month'), isQuarterDisabled: isQuarterDisabled, isQuarterInRange: getIsInRangeHandler('quarter'), isWeekDisabled: isWeekDisabled, isWeekInRange: getIsInRangeHandler('week'), isYearDisabled: isYearDisabled, isYearInRange: getIsInRangeHandler('year'), mode: mode, onChange: onCalendarChangeWithCloseControl, onDateHover: onCalendarHover, onHalfYearHover: onCalendarHover, onMonthHover: onCalendarHover, onQuarterHover: onCalendarHover, onWeekHover: onCalendarHover, onYearHover: onCalendarHover, open: open, popperProps: popperProps, quickSelect: quickSelect, ref: calendarRef, referenceDate: referenceDate, renderAnnotations: renderAnnotations, secondCalendarRef: secondCalendarRef, value: calendarValue })] }));
 });
 
 export { DateRangePicker as default };

package/DateRangePicker/DateRangePickerCalendar.d.ts

@@ -1,26 +1,30 @@
-import { RefObject } from 'react';
-import { CalendarProps } from '../Calendar';
+import { DateType, CalendarMode } from '@mezzanine-ui/core/calendar';
+import { RangeCalendarProps } from '../Calendar';
 import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
-export interface DateRangePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'value' | 'onChange' | 'disabledMonthSwitch' | 'disabledYearSwitch' | 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'mode' | 'isDateInRange' | 'isDateDisabled' | 'isMonthDisabled' | 'isMonthInRange' | 'isWeekDisabled' | 'isWeekInRange' | 'isYearDisabled' | 'isYearInRange' | 'onDateHover' | 'onWeekHover' | 'onMonthHover' | 'onYearHover' | 'referenceDate'> {
+export interface DateRangePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<RangeCalendarProps, 'actions' | 'calendarProps' | 'disabledMonthSwitch' | 'disabledYearSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disableOnDoubleNext' | 'disableOnDoublePrev' | 'displayMonthLocale' | 'displayWeekDayLocale' | 'firstCalendarRef' | 'isDateDisabled' | 'isDateInRange' | 'isMonthDisabled' | 'isMonthInRange' | 'isWeekDisabled' | 'isWeekInRange' | 'isYearDisabled' | 'isYearInRange' | 'isQuarterDisabled' | 'isQuarterInRange' | 'isHalfYearDisabled' | 'isHalfYearInRange' | 'onDateHover' | 'onWeekHover' | 'onMonthHover' | 'onYearHover' | 'onQuarterHover' | 'onHalfYearHover' | 'quickSelect' | 'renderAnnotations' | 'secondCalendarRef' | 'value'> {
     /**
-     * Other props you may pass to calendar component.
+     * Use this prop to switch calendars.
+     * @default 'day'
      */
-    calendarProps?: Omit<CalendarProps, keyof DateRangePickerCalendarProps>;
+    mode?: CalendarMode;
     /**
-     * React Ref for the first(on the left side) calendar
+     * 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.
      */
-    firstCalendarRef?: RefObject<HTMLDivElement | null>;
+    onChange?: (value: [DateType, DateType | undefined]) => void;
     /**
      * Other props you may provide to `Popper` component
      */
     popperProps?: Omit<InputTriggerPopperProps, 'anchor' | 'children' | 'fadeProps' | 'open'>;
     /**
-     * React Ref for the second(on the right side) calendar
+     * The reference date for getting the calendar.
      */
-    secondCalendarRef?: RefObject<HTMLDivElement | null>;
+    referenceDate: DateType;
 }
 /**
  * The react component for `mezzanine` date range picker calendar.
+ * This is a wrapper around RangeCalendar with InputTriggerPopper for popup behavior.
  */
 declare const DateRangePickerCalendar: import("react").ForwardRefExoticComponent<DateRangePickerCalendarProps & import("react").RefAttributes<HTMLDivElement>>;
 export default DateRangePickerCalendar;

package/DateRangePicker/DateRangePickerCalendar.js

@@ -1,104 +1,16 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { dateRangePickerClasses } from '@mezzanine-ui/core/date-range-picker';
-import { forwardRef, useCallback, useState } from 'react';
-import { useDateRangeCalendarControls } from './useDateRangeCalendarControls.js';
-import { useCalendarContext } from '../Calendar/CalendarContext.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
-import Calendar from '../Calendar/Calendar.js';
-import cx from 'clsx';
+import RangeCalendar from '../Calendar/RangeCalendar.js';
 
 /**
  * The react component for `mezzanine` date range picker calendar.
+ * This is a wrapper around RangeCalendar with InputTriggerPopper for popup behavior.
  */
 const DateRangePickerCalendar = forwardRef(function DateRangePickerCalendar(props, ref) {
-    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, } = useCalendarContext();
-    const { anchor, calendarProps, disabledMonthSwitch, disableOnNext, disableOnPrev, disabledYearSwitch, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, firstCalendarRef, isDateDisabled, isDateInRange, isMonthDisabled, isMonthInRange, isWeekDisabled, isWeekInRange, isYearDisabled, isYearInRange, mode = 'day', onChange: onChangeProp, onDateHover, onMonthHover, onWeekHover, onYearHover, open, popperProps, referenceDate: referenceDateProp, secondCalendarRef, value, } = props;
-    const { className, ...restCalendarProps } = calendarProps || {};
-    const { currentMode, onMonthControlClick: onMonthControlClickFromHook, onFirstNext, onFirstPrev, onSecondNext, onSecondPrev, onYearControlClick: onYearControlClickFromHook, popModeStack, referenceDates, updateFirstReferenceDate, updateSecondReferenceDate, } = useDateRangeCalendarControls(referenceDateProp, mode);
-    const onChangeFactory = useCallback((calendar) => {
-        const targetDate = referenceDates[calendar];
-        const updateReferenceDate = calendar
-            ? updateSecondReferenceDate
-            : updateFirstReferenceDate;
-        if (currentMode === 'day' || currentMode === 'week') {
-            return (target) => {
-                updateReferenceDate(target);
-                popModeStack();
-                if (currentMode === mode && onChangeProp) {
-                    onChangeProp(target);
-                }
-            };
-        }
-        if (currentMode === 'month') {
-            return (target) => {
-                const result = currentMode === mode
-                    ? target
-                    : setMonth(targetDate, getMonth(target));
-                updateReferenceDate(result);
-                popModeStack();
-                if (currentMode === mode && onChangeProp) {
-                    onChangeProp(result);
-                }
-            };
-        }
-        if (currentMode === 'year') {
-            return (target) => {
-                const result = currentMode === mode
-                    ? target
-                    : setYear(targetDate, getYear(target));
-                updateReferenceDate(result);
-                popModeStack();
-                if (currentMode === mode && onChangeProp) {
-                    onChangeProp(result);
-                }
-            };
-        }
-    }, [
-        currentMode,
-        getMonth,
-        getYear,
-        mode,
-        onChangeProp,
-        popModeStack,
-        referenceDates,
-        setMonth,
-        setYear,
-        updateFirstReferenceDate,
-        updateSecondReferenceDate,
-    ]);
-    const [controlPanelOnLeft, setControlPanelOnLeft] = useState(true);
-    const onMonthControlClickFactory = useCallback((calendar) => {
-        if (calendar) {
-            return () => {
-                setControlPanelOnLeft(false);
-                onMonthControlClickFromHook();
-            };
-        }
-        return () => {
-            setControlPanelOnLeft(true);
-            onMonthControlClickFromHook();
-        };
-    }, [onMonthControlClickFromHook]);
-    const onYearControlClickFactory = useCallback((calendar) => {
-        if (calendar) {
-            return () => {
-                setControlPanelOnLeft(false);
-                onYearControlClickFromHook();
-            };
-        }
-        return () => {
-            setControlPanelOnLeft(true);
-            onYearControlClickFromHook();
-        };
-    }, [onYearControlClickFromHook]);
-    const isSettingFirstCalendar = currentMode !== mode && controlPanelOnLeft;
-    const isSettingSecondCalendar = currentMode !== mode && !controlPanelOnLeft;
-    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsxs("div", { className: dateRangePickerClasses.calendarGroup, children: [jsx(Calendar, { ...restCalendarProps, className: cx(dateRangePickerClasses.calendar, {
-                        [dateRangePickerClasses.calendarInactive]: isSettingSecondCalendar,
-                    }, className), disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, mode: controlPanelOnLeft ? currentMode : mode, onChange: onChangeFactory(0), onDateHover: currentMode === mode ? onDateHover : undefined, onMonthHover: currentMode === mode ? onMonthHover : undefined, onWeekHover: currentMode === mode ? onWeekHover : undefined, onYearHover: currentMode === mode ? onYearHover : undefined, onMonthControlClick: onMonthControlClickFactory(0), onNext: isSettingFirstCalendar ? onFirstNext : undefined, onPrev: onFirstPrev, onYearControlClick: onYearControlClickFactory(0), ref: firstCalendarRef, referenceDate: referenceDates[0], value: isSettingFirstCalendar ? referenceDates[0] : value }), jsx(Calendar, { ...restCalendarProps, className: cx(dateRangePickerClasses.calendar, {
-                        [dateRangePickerClasses.calendarInactive]: isSettingFirstCalendar,
-                    }, className), disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, mode: !controlPanelOnLeft ? currentMode : mode, onChange: onChangeFactory(1), onDateHover: currentMode === mode ? onDateHover : undefined, onMonthHover: currentMode === mode ? onMonthHover : undefined, onWeekHover: currentMode === mode ? onWeekHover : undefined, onYearHover: currentMode === mode ? onYearHover : undefined, onMonthControlClick: onMonthControlClickFactory(1), onNext: onSecondNext, onPrev: isSettingSecondCalendar ? onSecondPrev : undefined, onYearControlClick: onYearControlClickFactory(1), ref: secondCalendarRef, referenceDate: referenceDates[1], value: isSettingSecondCalendar ? referenceDates[1] : value })] }) }));
+    const { actions, anchor, calendarProps, disabledMonthSwitch, disableOnNext, disableOnPrev, disableOnDoubleNext, disableOnDoublePrev, disabledYearSwitch, displayMonthLocale, displayWeekDayLocale, fadeProps, firstCalendarRef, isDateDisabled, isDateInRange, isHalfYearDisabled, isHalfYearInRange, isMonthDisabled, isMonthInRange, isQuarterDisabled, isQuarterInRange, isWeekDisabled, isWeekInRange, isYearDisabled, isYearInRange, mode = 'day', onChange, onDateHover, onHalfYearHover, onMonthHover, onQuarterHover, onWeekHover, onYearHover, open, popperProps, quickSelect, referenceDate, renderAnnotations, secondCalendarRef, value, } = props;
+    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, fadeProps: fadeProps, open: open, children: jsx(RangeCalendar, { actions: actions, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, firstCalendarRef: firstCalendarRef, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: isHalfYearInRange, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, isQuarterDisabled: isQuarterDisabled, isQuarterInRange: isQuarterInRange, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, mode: mode, onChange: onChange, onDateHover: onDateHover, onHalfYearHover: onHalfYearHover, onMonthHover: onMonthHover, onQuarterHover: onQuarterHover, onWeekHover: onWeekHover, onYearHover: onYearHover, quickSelect: quickSelect, referenceDate: referenceDate, renderAnnotations: renderAnnotations, secondCalendarRef: secondCalendarRef, value: value }) }));
 });
 
 export { DateRangePickerCalendar as default };

package/DateRangePicker/useDateRangeCalendarControls.js

@@ -37,7 +37,9 @@ function useDateRangeCalendarControls(referenceDate, mode) {
         setReferenceDates([adder(date), date]);
     }, [getAdder]);
     const onPrevFactory = (target) => () => {
-        const [handleMinus] = modifierGroup[currentMode];
+        var _a;
+        const modifiers = modifierGroup[currentMode];
+        const [handleMinus] = (_a = modifiers.single) !== null && _a !== void 0 ? _a : modifiers.double;
         const newAnchor = handleMinus(referenceDates[target]);
         const newDates = [...referenceDates];
         newDates[target] = newAnchor;
@@ -50,7 +52,9 @@ function useDateRangeCalendarControls(referenceDate, mode) {
         setReferenceDates(newDates);
     };
     const onNextFactory = (target) => () => {
-        const [, handleAdd] = modifierGroup[currentMode];
+        var _a;
+        const modifiers = modifierGroup[currentMode];
+        const [, handleAdd] = (_a = modifiers.single) !== null && _a !== void 0 ? _a : modifiers.double;
         const newAnchor = handleAdd(referenceDates[target]);
         const newDates = [...referenceDates];
         newDates[target] = newAnchor;

package/DateRangePicker/useDateRangePickerValue.d.ts

@@ -1,28 +1,51 @@
 import { DateType } from '@mezzanine-ui/core/calendar';
 import { RangePickerPickingValue, RangePickerValue } from '@mezzanine-ui/core/picker';
-import { ChangeEventHandler, KeyboardEventHandler } from 'react';
-import { UseRangePickerValueProps } from '../Picker/useRangePickerValue';
+import { RefObject } from 'react';
 import { DateRangePickerCalendarProps } from './DateRangePickerCalendar';
-export interface UseDateRangePickerValueProps extends Omit<UseRangePickerValueProps, 'onChange'> {
+export interface UseDateRangePickerValueProps {
+    /**
+     * The format pattern for the inputs (e.g., "YYYY-MM-DD")
+     */
+    format: string;
+    /**
+     * Function to check if there are disabled dates in the range
+     */
+    hasDisabledDateInRange?: (start: DateType, end: DateType) => boolean;
+    /**
+     * Ref for the 'from' input element
+     */
+    inputFromRef: RefObject<HTMLInputElement | null>;
+    /**
+     * Ref for the 'to' input element
+     */
+    inputToRef: RefObject<HTMLInputElement | null>;
+    /**
+     * Calendar mode
+     */
     mode?: DateRangePickerCalendarProps['mode'];
+    /**
+     * Change handler called when range is complete
+     */
     onChange?: (value?: RangePickerValue) => void;
+    /**
+     * Controlled value
+     */
+    value?: RangePickerValue;
 }
-export declare function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, mode, onChange: onChangeProp, value: valueProp, }: UseDateRangePickerValueProps): {
+export declare function useDateRangePickerValue({ format, hasDisabledDateInRange, inputFromRef: _inputFromRef, inputToRef, mode, onChange: onChangeProp, value: valueProp, }: UseDateRangePickerValueProps): {
     calendarValue: string[] | undefined;
+    checkIsInRange: (_date: DateType) => boolean;
     inputFromValue: string;
     inputToValue: string;
-    onCalendarChange: (val?: DateType) => void;
+    onCalendarChange: (rangeValue: [DateType, DateType | undefined]) => void;
     onCalendarHover: import("react").Dispatch<import("react").SetStateAction<string | undefined>> | undefined;
-    onChange: (target?: RangePickerPickingValue, callback?: {
-        from: (date?: string) => string | undefined;
-        to: (date?: string) => string | undefined;
-    }) => RangePickerPickingValue | undefined;
+    onChange: (target?: RangePickerPickingValue) => RangePickerPickingValue | undefined;
     onClear: () => void;
-    onFromBlur: import("react").FocusEventHandler<HTMLInputElement>;
-    onFromKeyDown: KeyboardEventHandler<HTMLInputElement>;
-    onInputFromChange: ChangeEventHandler<HTMLInputElement>;
-    onInputToChange: ChangeEventHandler<HTMLInputElement>;
-    onToBlur: import("react").FocusEventHandler<HTMLInputElement>;
-    onToKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    onFromBlur: () => void;
+    onFromFocus: () => void;
+    onInputFromChange: (formattedValue: string) => void;
+    onInputToChange: (formattedValue: string) => void;
+    onToBlur: () => void;
+    onToFocus: () => void;
     value: RangePickerPickingValue;
 };