@mezzanine-ui/react 0.16.0 → 1.0.0-alpha.0

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,103 +1,16 @@
-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';
+'use client';
+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/index.d.ts

@@ -1,4 +1,7 @@
 export { useDateRangeCalendarControls } from './useDateRangeCalendarControls';
-export { UseDateRangePickerValueProps, useDateRangePickerValue, } from './useDateRangePickerValue';
-export { DateRangePickerCalendarProps, default as DateRangePickerCalendar, } from './DateRangePickerCalendar';
-export { DateRangePickerProps, default } from './DateRangePicker';
+export { useDateRangePickerValue } from './useDateRangePickerValue';
+export type { UseDateRangePickerValueProps } from './useDateRangePickerValue';
+export { default as DateRangePickerCalendar } from './DateRangePickerCalendar';
+export type { DateRangePickerCalendarProps } from './DateRangePickerCalendar';
+export type { DateRangePickerProps } from './DateRangePicker';
+export { default } from './DateRangePicker';

package/DateRangePicker/useDateRangeCalendarControls.js

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useState, useEffect } from 'react';
 import { calendarYearModuler } from '@mezzanine-ui/core/calendar';
 import { useCalendarControlModifiers } from '../Calendar/useCalendarControlModifiers.js';
@@ -16,7 +17,7 @@ function useDateRangeCalendarControls(referenceDate, mode) {
             return (target) => addYear(target, calendar ? -1 : 1);
         }
         return (target) => addMonth(target, calendar ? -1 : 1);
-    }, [addYear, addMonth, currentMode]);
+    }, [addYear, addMonth, mode]);
     const [referenceDates, setReferenceDates] = useState(() => {
         const adder = getAdder(0);
         return [referenceDate, adder(referenceDate)];
@@ -26,17 +27,19 @@ function useDateRangeCalendarControls(referenceDate, mode) {
             const adder = getAdder(0);
             return [referenceDate, adder(referenceDate)];
         });
-    }, [referenceDate]);
+    }, [referenceDate, getAdder]);
     const updateFirstReferenceDate = useCallback((date) => {
         const adder = getAdder(0);
         setReferenceDates([date, adder(date)]);
-    }, [addMonth]);
+    }, [getAdder]);
     const updateSecondReferenceDate = useCallback((date) => {
         const adder = getAdder(1);
         setReferenceDates([adder(date), date]);
-    }, [addMonth]);
+    }, [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;
@@ -49,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;
 };

package/DateRangePicker/useDateRangePickerValue.js

@@ -1,46 +1,115 @@
-import { useState, useMemo } from 'react';
-import { useRangePickerValue } from '../Picker/useRangePickerValue.js';
+'use client';
+import { useState, useCallback, useMemo } from 'react';
 import { useCalendarContext } from '../Calendar/CalendarContext.js';
 
-function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, mode, onChange: onChangeProp, value: valueProp, }) {
-    const { addDay } = useCalendarContext();
-    const { inputFromValue, inputToValue, onChange, onFromBlur, onFromKeyDown, onInputFromChange, onInputToChange, onToBlur, onToKeyDown, value, } = useRangePickerValue({
-        format,
-        formats,
-        value: valueProp,
-        inputFromRef,
-        inputToRef,
-    });
-    const [from, to] = value;
+function useDateRangePickerValue({ format, hasDisabledDateInRange, inputFromRef: _inputFromRef, inputToRef, mode, onChange: onChangeProp, value: valueProp, }) {
+    var _a, _b;
+    const { addDay, formatToString, isBefore, locale } = useCalendarContext();
+    const [internalFrom, setInternalFrom] = useState(valueProp === null || valueProp === void 0 ? void 0 : valueProp[0]);
+    const [internalTo, setInternalTo] = useState(valueProp === null || valueProp === void 0 ? void 0 : valueProp[1]);
+    // Track if user is currently selecting a new range
+    // When selecting, we use internal state; otherwise, we prefer valueProp
+    const [isSelecting, setIsSelecting] = useState(false);
+    const from = isSelecting ? internalFrom : ((_a = valueProp === null || valueProp === void 0 ? void 0 : valueProp[0]) !== null && _a !== void 0 ? _a : internalFrom);
+    const to = isSelecting ? internalTo : ((_b = valueProp === null || valueProp === void 0 ? void 0 : valueProp[1]) !== null && _b !== void 0 ? _b : internalTo);
+    const value = [from, to];
+    const formatDate = useCallback((date) => {
+        if (!date)
+            return '';
+        return formatToString(locale, date, format);
+    }, [formatToString, locale, format]);
+    const sortValues = useCallback((v1, v2) => {
+        return isBefore(v1, v2) ? [v1, v2] : [v2, v1];
+    }, [isBefore]);
+    const inputFromValue = formatDate(from);
+    const inputToValue = formatDate(to);
     const [hoverValue, setHoverValue] = useState(undefined);
-    const onSyncHoverValueInputFromChange = (event) => {
-        onInputFromChange(event);
+    const onInputFromChange = useCallback((formattedValue) => {
+        if (formattedValue) {
+            setIsSelecting(true);
+            if (to && isBefore(to, formattedValue)) {
+                setInternalFrom(to);
+                setInternalTo(formattedValue);
+                // Range is complete, trigger onChange (only in immediate mode)
+                onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([to, formattedValue]);
+            }
+            else {
+                setInternalFrom(formattedValue);
+                // If to is also set, range is complete (only trigger in immediate mode)
+                if (to) {
+                    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([formattedValue, to]);
+                }
+            }
+        }
+        else {
+            setInternalFrom(undefined);
+        }
         setHoverValue(undefined);
-    };
-    const onSyncHoverValueInputToChange = (event) => {
-        onInputToChange(event);
+    }, [to, isBefore, onChangeProp]);
+    const onInputToChange = useCallback((formattedValue) => {
+        if (formattedValue) {
+            setIsSelecting(true);
+            if (from && isBefore(formattedValue, from)) {
+                setInternalTo(from);
+                setInternalFrom(formattedValue);
+                // Range is complete, trigger onChange (only in immediate mode)
+                onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([formattedValue, from]);
+            }
+            else {
+                setInternalTo(formattedValue);
+                // If from is also set, range is complete (only trigger in immediate mode)
+                if (from) {
+                    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, formattedValue]);
+                }
+            }
+        }
+        else {
+            setInternalTo(undefined);
+        }
         setHoverValue(undefined);
-    };
-    const onCalendarChange = (val) => {
-        const firstVal = from || to;
-        const newValue = (from && to) || (!from && !to)
-            ? [val, undefined]
-            : [firstVal, val];
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const [sortedFrom, sortedTo] = onChange(newValue, {
-            from: (nextFrom) => nextFrom,
-            to: (nextTo) => {
-                if (!nextTo)
-                    return nextTo;
-                /** week mode should use the last day of the week (default is the first day) */
-                return mode === 'week' ? addDay(nextTo, 6) : nextTo;
-            },
-        });
-        if (sortedFrom && sortedTo) {
-            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([sortedFrom, sortedTo]);
+    }, [from, isBefore, onChangeProp]);
+    const onCalendarChange = useCallback((rangeValue) => {
+        var _a;
+        const [newFrom, newTo] = rangeValue;
+        setInternalFrom(newFrom);
+        if (newTo) {
+            const adjustedTo = mode === 'week' ? addDay(newTo, 6) : newTo;
+            setInternalTo(adjustedTo);
+            if (newFrom && adjustedTo) {
+                const [sortedFrom, sortedTo] = sortValues(newFrom, adjustedTo);
+                onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([sortedFrom, sortedTo]);
+            }
         }
-    };
-    /** Hover settings */
+        else {
+            setInternalTo(undefined);
+            setIsSelecting(true);
+            // 開始新的選取，則先清除值
+            if (from && to) {
+                onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
+            }
+            (_a = inputToRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        setHoverValue(undefined);
+    }, [mode, addDay, sortValues, onChangeProp, inputToRef, from, to]);
+    const onChange = useCallback((target) => {
+        // Reset selecting state when value is explicitly changed (e.g., cancel/close)
+        setIsSelecting(false);
+        if (!target) {
+            setInternalFrom(undefined);
+            setInternalTo(undefined);
+            return undefined;
+        }
+        const [newFrom, newTo] = target;
+        if (newFrom && newTo) {
+            const sorted = sortValues(newFrom, newTo);
+            setInternalFrom(sorted[0]);
+            setInternalTo(sorted[1]);
+            return sorted;
+        }
+        setInternalFrom(newFrom);
+        setInternalTo(newTo);
+        return target;
+    }, [sortValues]);
     const anchor1 = from || to;
     const anchor2 = from && to ? to : hoverValue;
     const calendarValue = useMemo(() => {
@@ -52,44 +121,54 @@ function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, mo
         }
         return undefined;
     }, [anchor1, anchor2]);
+    /**
+     * Check if date is in range, considering disabled dates
+     * Returns a function that can be used as isDateInRange handler
+     */
+    const checkIsInRange = useCallback((_date) => {
+        if (!anchor1 || !anchor2)
+            return false;
+        // Check if the range crosses any disabled dates
+        if (hasDisabledDateInRange === null || hasDisabledDateInRange === void 0 ? void 0 : hasDisabledDateInRange(anchor1, anchor2)) {
+            return false;
+        }
+        return true;
+    }, [anchor1, anchor2, hasDisabledDateInRange]);
     const onCalendarHover = !(from && to) && anchor1 ? setHoverValue : undefined;
-    const onSyncHoverValueClear = () => {
-        onChange(undefined);
+    const onClear = useCallback(() => {
+        setInternalFrom(undefined);
+        setInternalTo(undefined);
         setHoverValue(undefined);
+        setIsSelecting(false);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
-    };
-    const onFromKeyDownWithOnChange = (event) => {
-        onFromKeyDown(event);
-        if (event.key === 'Enter' && from && to) {
-            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, to]);
-        }
-        if (event.key === 'Escape') {
-            onChange(valueProp);
-        }
-    };
-    const onToKeyDownWithOnChange = (event) => {
-        onToKeyDown(event);
-        if (event.key === 'Enter' && from && to) {
-            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, to]);
-        }
-        if (event.key === 'Escape') {
-            onChange(valueProp);
-        }
-    };
+    }, [onChangeProp]);
+    const onFromFocus = useCallback(() => {
+        // Optional: add focus logic
+    }, []);
+    const onToFocus = useCallback(() => {
+        // Optional: add focus logic
+    }, []);
+    const onFromBlur = useCallback(() => {
+        // Optional: add blur logic
+    }, []);
+    const onToBlur = useCallback(() => {
+        // Optional: add blur logic
+    }, []);
     return {
         calendarValue,
+        checkIsInRange,
         inputFromValue,
         inputToValue,
         onCalendarChange,
         onCalendarHover,
         onChange,
-        onClear: onSyncHoverValueClear,
+        onClear,
         onFromBlur,
-        onFromKeyDown: onFromKeyDownWithOnChange,
-        onInputFromChange: onSyncHoverValueInputFromChange,
-        onInputToChange: onSyncHoverValueInputToChange,
+        onFromFocus,
+        onInputFromChange,
+        onInputToChange,
         onToBlur,
-        onToKeyDown: onToKeyDownWithOnChange,
+        onToFocus,
         value,
     };
 }

package/DateTimePicker/DateTimePicker.d.ts

@@ -1,27 +1,48 @@
 import { DateType } from '@mezzanine-ui/core/calendar';
-import { PickerTriggerProps } from '../Picker';
-import { DateTimePickerPanelProps } from './DateTimePickerPanel';
-export interface DateTimePickerProps extends Omit<DateTimePickerPanelProps, 'onConfirm' | 'referenceDate'>, Omit<PickerTriggerProps, 'anchor' | 'defaultValue' | 'inputRef' | 'onChange' | 'onClear' | 'onClick' | 'onIconClick' | 'onKeyDown' | 'open' | 'suffixActionIcon' | 'value'> {
+import { DatePickerCalendarProps } from '../DatePicker';
+import { PickerTriggerWithSeparatorProps } from '../Picker';
+import { TimePickerPanelProps } from '../TimePicker';
+type FocusedInput = 'left' | 'right' | null;
+export interface DateTimePickerProps extends Omit<DatePickerCalendarProps, 'anchor' | 'onChange' | 'open' | 'referenceDate' | 'value'>, Omit<TimePickerPanelProps, 'anchor' | 'onChange' | 'open' | 'popperProps' | 'value'>, Omit<PickerTriggerWithSeparatorProps, 'formatLeft' | 'formatRight' | 'inputLeftRef' | 'inputRightRef' | 'onBlurLeft' | 'onBlurRight' | 'onChangeLeft' | 'onChangeRight' | 'onFocusLeft' | 'onFocusRight' | 'onLeftComplete' | 'onRightComplete' | 'suffix' | 'valueLeft' | 'valueRight'> {
     /**
-     * Default value for time picker.
+     * Default value for date-time picker.
      */
     defaultValue?: DateType;
     /**
-     * The format for displaying time.
+     * The format for displaying date (left input).
      */
-    format?: string;
+    formatDate?: string;
     /**
-     * A function that fires when panel toggled. Receive open status in boolean format as props.
+     * The format for displaying time (right input).
      */
-    onPanelToggle?: (open: boolean) => void;
+    formatTime?: string;
+    /**
+     * Change handler. Takes your declared `DateType` as argument.
+     * Called when both date and time values are complete.
+     */
+    onChange?: (target?: DateType) => void;
+    /**
+     * A function that fires when panel toggled. Receive open status and focused input as props.
+     */
+    onPanelToggle?: (open: boolean, focusedInput: FocusedInput) => void;
+    /**
+     * Other props you may provide to the time picker panel's `Popper` component
+     */
+    popperPropsTime?: TimePickerPanelProps['popperProps'];
     /**
      * The reference date for getting calendars. Default to current time.
      */
     referenceDate?: DateType;
+    /**
+     * Current value of date-time picker.
+     */
+    value?: DateType;
 }
 /**
- * The react component for `mezzanine` time picker.
- * Notice that any component related to time-picker should be used along with `CalendarContext`.
+ * The react component for `mezzanine` date-time picker.
+ * This component features two separate inputs for date and time,
+ * with independent calendar and time panels shown based on focus.
+ * Notice that any component related to date-time picker should be used along with `CalendarContext`.
  */
 declare const DateTimePicker: import("react").ForwardRefExoticComponent<DateTimePickerProps & import("react").RefAttributes<HTMLDivElement>>;
 export default DateTimePicker;