@mezzanine-ui/react 0.6.4

package/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,187 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useContext, useMemo, useState, useCallback, useRef, useEffect } 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';
+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 />
+ */
+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, defaultValue, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, 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]);
+    function isBetweenRange(valueToCheck, t1, t2, granularity) {
+        return isBetween(valueToCheck, t1, t2, granularity) || isBetween(valueToCheck, t2, t1, granularity);
+    }
+    /** Using internal reference date */
+    const [referenceDate, updateReferenceDate] = useState(referenceDateProp || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[0]) || getNow());
+    /** Calendar panel toggle */
+    const [open, setOpen] = useState(false);
+    const preventOpen = readOnly;
+    const onCalendarToggle = useCallback((currentOpen) => {
+        if (!preventOpen) {
+            setOpen(currentOpen);
+            if (onCalendarToggleProp) {
+                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({
+        format,
+        formats,
+        value: valueProp,
+        inputFromRef,
+        inputToRef,
+        onChange: onChangeProp,
+    });
+    useEffect(() => {
+        const [from, to] = internalValue;
+        if (from) {
+            updateReferenceDate(from);
+        }
+        else if (to) {
+            updateReferenceDate(to);
+        }
+    }, [internalValue]);
+    /** 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) {
+            onCalendarToggle(false);
+        }
+    }, [internalValue, onCalendarChange, onCalendarToggle]);
+    const onFromKeyDownWithCloseControl = useCallback((event) => {
+        onFromKeyDown(event);
+        const [from, to] = internalValue;
+        if (event.key === 'Enter' && from && to) {
+            onCalendarToggle(false);
+        }
+    }, [internalValue, onCalendarToggle, onFromKeyDown]);
+    const onToKeyDownWithCloseControl = useCallback((event) => {
+        onToKeyDown(event);
+        const [from, to] = internalValue;
+        if (event.key === 'Enter' && from && to) {
+            onCalendarToggle(false);
+        }
+    }, [internalValue, onCalendarToggle, onToKeyDown]);
+    /** Calendar cell in range checker */
+    const getIsInRangeHandler = (granularity) => {
+        const [anchor1, anchor2] = calendarValue || [];
+        return (anchor1 && anchor2
+            ? (date) => isBetweenRange(date, anchor1, anchor2, granularity)
+            : undefined);
+    };
+    /** 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,
+    };
+    /** Blur, click away and key down close */
+    const onClose = () => {
+        onChange(valueProp);
+        onCalendarToggle(false);
+    };
+    const onChangeClose = () => {
+        const [from, to] = internalValue;
+        if (from && to) {
+            const newValue = onChange([from, to]);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newValue);
+        }
+        else {
+            onChange(valueProp);
+        }
+        onCalendarToggle(false);
+    };
+    usePickerDocumentEventClose({
+        open,
+        anchorRef,
+        popperRef: calendarRef,
+        lastElementRefInFlow: inputToRef,
+        onClose,
+        onChangeClose,
+    });
+    /** Icon */
+    const onIconClick = (e) => {
+        e.stopPropagation();
+        if (open) {
+            onChange(valueProp);
+        }
+        onCalendarToggle(!open);
+    };
+    const suffixActionIcon = (jsx(Icon, { icon: CalendarIcon, onClick: onIconClick }, void 0));
+    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 }, void 0),
+            jsx(DateRangePickerCalendar, { ref: calendarRef, open: open, anchor: anchorRef, calendarProps: calendarProps, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isDateInRange: getIsInRangeHandler('date'), isMonthDisabled: isMonthDisabled, isMonthInRange: getIsInRangeHandler('month'), 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 }, void 0)] }, void 0));
+});
+
+export default DateRangePicker;

package/DateRangePicker/DateRangePickerCalendar.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from 'react';
+import { CalendarProps } from '../Calendar';
+import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
+export interface DateRangePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'value' | 'onChange' | 'displayMonthLocale' | 'mode' | 'isDateInRange' | 'isDateDisabled' | 'isMonthDisabled' | 'isMonthInRange' | 'isWeekInRange' | 'isYearDisabled' | 'isYearInRange' | 'onDateHover' | 'onWeekHover' | 'onMonthHover' | 'onYearHover' | 'referenceDate'> {
+    /**
+     * Other props you may pass to calendar component.
+     */
+    calendarProps?: Omit<CalendarProps, keyof DateRangePickerCalendarProps>;
+    /**
+     * React Ref for the first(on the left side) calendar
+     */
+    firstCalendarRef?: RefObject<HTMLDivElement>;
+    /**
+     * 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
+     */
+    secondCalendarRef?: RefObject<HTMLDivElement>;
+}
+/**
+ * The react component for `mezzanine` date range picker calendar.
+ */
+declare const DateRangePickerCalendar: import("react").ForwardRefExoticComponent<DateRangePickerCalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DateRangePickerCalendar;

package/DateRangePicker/DateRangePickerCalendar.js

@@ -0,0 +1,98 @@
+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 InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
+import Calendar from '../Calendar/Calendar.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` date range picker calendar.
+ */
+const DateRangePickerCalendar = forwardRef(function DateRangePickerCalendar(props, ref) {
+    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, } = useCalendarContext();
+    const { anchor, calendarProps, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, firstCalendarRef, isDateDisabled, isDateInRange, isMonthDisabled, isMonthInRange, 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, Object.assign({}, popperProps, { ref: ref, anchor: anchor, open: open, fadeProps: fadeProps }, { children: jsxs("div", Object.assign({ className: dateRangePickerClasses.calendarGroup }, { children: [jsx(Calendar, Object.assign({}, restCalendarProps, { className: cx(dateRangePickerClasses.calendar, {
+                        [dateRangePickerClasses.calendarInactive]: isSettingSecondCalendar,
+                    }, className), displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, 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 }), void 0),
+                jsx(Calendar, Object.assign({}, restCalendarProps, { className: cx(dateRangePickerClasses.calendar, {
+                        [dateRangePickerClasses.calendarInactive]: isSettingFirstCalendar,
+                    }, className), displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, 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 }), void 0)] }), void 0) }), void 0));
+});
+
+export default DateRangePickerCalendar;

package/DateRangePicker/index.d.ts

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

package/DateRangePicker/index.js

@@ -0,0 +1,4 @@
+export { useDateRangeCalendarControls } from './useDateRangeCalendarControls.js';
+export { useDateRangePickerValue } from './useDateRangePickerValue.js';
+export { default as DateRangePickerCalendar } from './DateRangePickerCalendar.js';
+export { default } from './DateRangePicker.js';

package/DateRangePicker/useDateRangeCalendarControls.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="moment" />
+import { DateType, CalendarMode } from '@mezzanine-ui/core/calendar';
+export declare function useDateRangeCalendarControls(referenceDate: DateType, mode: CalendarMode): {
+    currentMode: CalendarMode;
+    onFirstNext: () => void;
+    onFirstPrev: () => void;
+    onMonthControlClick: () => void;
+    onSecondNext: () => void;
+    onSecondPrev: () => void;
+    onYearControlClick: () => void;
+    popModeStack: () => void;
+    referenceDates: import("moment").Moment[];
+    updateFirstReferenceDate: (date: DateType) => void;
+    updateSecondReferenceDate: (date: DateType) => void;
+};

package/DateRangePicker/useDateRangeCalendarControls.js

@@ -0,0 +1,93 @@
+import { useCallback, useState, useEffect } from 'react';
+import { calendarYearModuler } from '@mezzanine-ui/core/calendar';
+import { useCalendarControlModifiers } from '../Calendar/useCalendarControlModifiers.js';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+import { useCalendarModeStack } from '../Calendar/useCalendarModeStack.js';
+
+function useDateRangeCalendarControls(referenceDate, mode) {
+    const { addMonth, addYear, } = useCalendarContext();
+    const modifierGroup = useCalendarControlModifiers();
+    const { currentMode, popModeStack, pushModeStack, } = useCalendarModeStack(mode);
+    const getAdder = useCallback((calendar) => {
+        if (mode === 'year') {
+            return (target) => addYear(target, calendar ? -calendarYearModuler : calendarYearModuler);
+        }
+        if (mode === 'month') {
+            return (target) => addYear(target, calendar ? -1 : 1);
+        }
+        return (target) => addMonth(target, calendar ? -1 : 1);
+    }, [addYear, addMonth, currentMode]);
+    const [referenceDates, setReferenceDates] = useState(() => {
+        const adder = getAdder(0);
+        return [
+            referenceDate,
+            adder(referenceDate),
+        ];
+    });
+    useEffect(() => {
+        setReferenceDates(() => {
+            const adder = getAdder(0);
+            return [
+                referenceDate,
+                adder(referenceDate),
+            ];
+        });
+    }, [referenceDate]);
+    const updateFirstReferenceDate = useCallback((date) => {
+        const adder = getAdder(0);
+        setReferenceDates([
+            date,
+            adder(date),
+        ]);
+    }, [addMonth]);
+    const updateSecondReferenceDate = useCallback((date) => {
+        const adder = getAdder(1);
+        setReferenceDates([
+            adder(date),
+            date,
+        ]);
+    }, [addMonth]);
+    const onPrevFactory = (target) => () => {
+        const [handleMinus] = modifierGroup[currentMode];
+        const newAnchor = handleMinus(referenceDates[target]);
+        const newDates = [...referenceDates];
+        newDates[target] = newAnchor;
+        if (currentMode === mode) {
+            const adder = getAdder(target);
+            const another = adder(newAnchor);
+            const anotherIndex = Math.abs(target - 1);
+            newDates[anotherIndex] = another;
+        }
+        setReferenceDates(newDates);
+    };
+    const onNextFactory = (target) => () => {
+        const [, handleAdd] = modifierGroup[currentMode];
+        const newAnchor = handleAdd(referenceDates[target]);
+        const newDates = [...referenceDates];
+        newDates[target] = newAnchor;
+        if (currentMode === mode) {
+            const adder = getAdder(target);
+            const another = adder(newAnchor);
+            const anotherIndex = Math.abs(target - 1);
+            newDates[anotherIndex] = another;
+        }
+        setReferenceDates(newDates);
+    };
+    const onMonthControlClick = () => pushModeStack('month');
+    const onYearControlClick = () => pushModeStack('year');
+    return {
+        currentMode,
+        onFirstNext: onNextFactory(0),
+        onFirstPrev: onPrevFactory(0),
+        onMonthControlClick,
+        onSecondNext: onNextFactory(1),
+        onSecondPrev: onPrevFactory(1),
+        onYearControlClick,
+        popModeStack,
+        referenceDates,
+        updateFirstReferenceDate,
+        updateSecondReferenceDate,
+    };
+}
+
+export { useDateRangeCalendarControls };

package/DateRangePicker/useDateRangePickerValue.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="moment" />
+/// <reference types="react" />
+import { RangePickerPickingValue, RangePickerValue } from '@mezzanine-ui/core/picker';
+import { UseRangePickerValueProps } from '../Picker/useRangePickerValue';
+export interface UseDateRangePickerValueProps extends Omit<UseRangePickerValueProps, 'onChange'> {
+    onChange?: (value?: RangePickerValue) => void;
+}
+export declare function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, onChange: onChangeProp, value: valueProp, }: UseDateRangePickerValueProps): {
+    calendarValue: import("moment").Moment[] | undefined;
+    inputFromValue: string;
+    inputToValue: string;
+    onCalendarChange: (val?: import("moment").Moment | undefined) => void;
+    onCalendarHover: import("react").Dispatch<import("react").SetStateAction<import("moment").Moment | undefined>> | undefined;
+    onChange: (target?: undefined[] | [import("moment").Moment, import("moment").Moment] | [import("moment").Moment] | [undefined, import("moment").Moment] | [import("moment").Moment, undefined] | undefined) => undefined[] | [import("moment").Moment, import("moment").Moment] | [import("moment").Moment] | [undefined, import("moment").Moment] | [import("moment").Moment, undefined] | undefined;
+    onClear: () => void;
+    onFromBlur: (event: import("react").FocusEvent<HTMLInputElement>) => void;
+    onFromKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
+    onInputFromChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onInputToChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onToBlur: (event: import("react").FocusEvent<HTMLInputElement>) => void;
+    onToKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
+    value: RangePickerPickingValue;
+};

package/DateRangePicker/useDateRangePickerValue.js

@@ -0,0 +1,87 @@
+import { useState, useMemo } from 'react';
+import { useRangePickerValue } from '../Picker/useRangePickerValue.js';
+
+function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, onChange: onChangeProp, value: valueProp, }) {
+    const { inputFromValue, inputToValue, onChange, onFromBlur, onFromKeyDown, onInputFromChange, onInputToChange, onToBlur, onToKeyDown, value, } = useRangePickerValue({
+        format,
+        formats,
+        value: valueProp,
+        inputFromRef,
+        inputToRef,
+    });
+    const [from, to] = value;
+    const [hoverValue, setHoverValue] = useState(undefined);
+    const onSyncHoverValueInputFromChange = (event) => {
+        onInputFromChange(event);
+        setHoverValue(undefined);
+    };
+    const onSyncHoverValueInputToChange = (event) => {
+        onInputToChange(event);
+        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);
+        if (sortedFrom && sortedTo) {
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([sortedFrom, sortedTo]);
+        }
+    };
+    /** Hover settings */
+    const anchor1 = from || to;
+    const anchor2 = from && to ? to : hoverValue;
+    const calendarValue = useMemo(() => {
+        if (anchor1 && anchor2) {
+            return [anchor1, anchor2];
+        }
+        if (anchor1) {
+            return [anchor1];
+        }
+        return undefined;
+    }, [anchor1, anchor2]);
+    const onCalendarHover = !(from && to) && anchor1 ? setHoverValue : undefined;
+    const onSyncHoverValueClear = () => {
+        onChange(undefined);
+        setHoverValue(undefined);
+        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);
+        }
+    };
+    return {
+        calendarValue,
+        inputFromValue,
+        inputToValue,
+        onCalendarChange,
+        onCalendarHover,
+        onChange,
+        onClear: onSyncHoverValueClear,
+        onFromBlur,
+        onFromKeyDown: onFromKeyDownWithOnChange,
+        onInputFromChange: onSyncHoverValueInputFromChange,
+        onInputToChange: onSyncHoverValueInputToChange,
+        onToBlur,
+        onToKeyDown: onToKeyDownWithOnChange,
+        value,
+    };
+}
+
+export { useDateRangePickerValue };

package/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+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'> {
+    /**
+     * Default value for time picker.
+     */
+    defaultValue?: DateType;
+    /**
+     * The format for displaying time.
+     */
+    format?: string;
+    /**
+     * A function that fires when panel toggled. Receive open status in boolean format as props.
+     */
+    onPanelToggle?: (open: boolean) => void;
+    /**
+     * The reference date for getting calendars. Default to current time.
+     */
+    referenceDate?: DateType;
+}
+/**
+ * The react component for `mezzanine` time picker.
+ * Notice that any component related to time-picker should be used along with `CalendarContext`.
+ */
+declare const DateTimePicker: import("react").ForwardRefExoticComponent<DateTimePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DateTimePicker;