@mezzanine-ui/react 0.13.10 → 0.13.12

package/DatePicker/DatePickerCalendar.d.ts

@@ -1,32 +1,32 @@
-import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
-import { RefObject } from 'react';
-import { CalendarProps } from '../Calendar';
-import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
-export interface DatePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
-    /**
-     * Other calendar props you may provide to `Calendar`.
-     */
-    calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onPrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
-    /**
-     * React ref for calendar component.
-     */
-    calendarRef?: RefObject<HTMLDivElement>;
-    /**
-     * The desired mode of calendar.<br />
-     * The `onChange` function will only fired if the calendar mode meets this prop.
-     */
-    mode?: CalendarMode;
-    /**
-     * Other props you may provide to `Popper` component
-     */
-    popperProps?: Omit<InputTriggerPopperProps, 'anchor' | 'children' | 'fadeProps' | 'open'>;
-    /**
-     * The calendar cell will be marked as active if it matches the same date of given value.
-     */
-    value?: DateType;
-}
-/**
- * The react component for `mezzanine` date picker calendar.
- */
-declare const DatePickerCalendar: import("react").ForwardRefExoticComponent<DatePickerCalendarProps & import("react").RefAttributes<HTMLDivElement>>;
-export default DatePickerCalendar;
+import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
+import { RefObject } from 'react';
+import { CalendarProps } from '../Calendar';
+import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
+export interface DatePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
+    /**
+     * Other calendar props you may provide to `Calendar`.
+     */
+    calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onPrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
+    /**
+     * React ref for calendar component.
+     */
+    calendarRef?: RefObject<HTMLDivElement>;
+    /**
+     * The desired mode of calendar.<br />
+     * The `onChange` function will only fired if the calendar mode meets this prop.
+     */
+    mode?: CalendarMode;
+    /**
+     * Other props you may provide to `Popper` component
+     */
+    popperProps?: Omit<InputTriggerPopperProps, 'anchor' | 'children' | 'fadeProps' | 'open'>;
+    /**
+     * The calendar cell will be marked as active if it matches the same date of given value.
+     */
+    value?: DateType;
+}
+/**
+ * The react component for `mezzanine` date picker calendar.
+ */
+declare const DatePickerCalendar: import("react").ForwardRefExoticComponent<DatePickerCalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DatePickerCalendar;

package/DatePicker/DatePickerCalendar.js

@@ -5,58 +5,58 @@ import { useCalendarControls } from '../Calendar/useCalendarControls.js';
 import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
 import Calendar from '../Calendar/Calendar.js';
 
-/**
- * The react component for `mezzanine` date picker calendar.
- */
-const DatePickerCalendar = forwardRef(function DatePickerCalendar(props, ref) {
-    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, } = useCalendarContext();
-    const { anchor, calendarProps, calendarRef, disableOnNext, disableOnPrev, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onChange: onChangeProp, open, popperProps, referenceDate: referenceDateProp, value, } = props;
-    const { className: calendarClassName, ...restCalendarProps } = calendarProps || {};
-    const { currentMode, onMonthControlClick, onNext, onPrev, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
-    const onChange = useMemo(() => {
-        if (currentMode === 'day' || currentMode === 'week') {
-            return (target) => {
-                updateReferenceDate(target);
-                popModeStack();
-                if (onChangeProp) {
-                    onChangeProp(target);
-                }
-            };
-        }
-        if (currentMode === 'month') {
-            return (target) => {
-                const result = currentMode === mode ? target : setMonth(referenceDate, getMonth(target));
-                updateReferenceDate(result);
-                popModeStack();
-                if (currentMode === mode && onChangeProp) {
-                    onChangeProp(result);
-                }
-            };
-        }
-        if (currentMode === 'year') {
-            return (target) => {
-                const result = currentMode === mode ? target : setYear(referenceDate, getYear(target));
-                updateReferenceDate(result);
-                popModeStack();
-                if (currentMode === mode && onChangeProp) {
-                    onChangeProp(result);
-                }
-            };
-        }
-    }, [
-        currentMode,
-        referenceDate,
-        updateReferenceDate,
-        popModeStack,
-        mode,
-        onChangeProp,
-        setMonth,
-        getMonth,
-        setYear,
-        getYear,
-    ]);
-    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(Calendar, { ...restCalendarProps, ref: calendarRef, className: calendarClassName, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value }) }));
-});
+/**
+ * The react component for `mezzanine` date picker calendar.
+ */
+const DatePickerCalendar = forwardRef(function DatePickerCalendar(props, ref) {
+    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, } = useCalendarContext();
+    const { anchor, calendarProps, calendarRef, disableOnNext, disableOnPrev, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onChange: onChangeProp, open, popperProps, referenceDate: referenceDateProp, value, } = props;
+    const { className: calendarClassName, ...restCalendarProps } = calendarProps || {};
+    const { currentMode, onMonthControlClick, onNext, onPrev, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
+    const onChange = useMemo(() => {
+        if (currentMode === 'day' || currentMode === 'week') {
+            return (target) => {
+                updateReferenceDate(target);
+                popModeStack();
+                if (onChangeProp) {
+                    onChangeProp(target);
+                }
+            };
+        }
+        if (currentMode === 'month') {
+            return (target) => {
+                const result = currentMode === mode ? target : setMonth(referenceDate, getMonth(target));
+                updateReferenceDate(result);
+                popModeStack();
+                if (currentMode === mode && onChangeProp) {
+                    onChangeProp(result);
+                }
+            };
+        }
+        if (currentMode === 'year') {
+            return (target) => {
+                const result = currentMode === mode ? target : setYear(referenceDate, getYear(target));
+                updateReferenceDate(result);
+                popModeStack();
+                if (currentMode === mode && onChangeProp) {
+                    onChangeProp(result);
+                }
+            };
+        }
+    }, [
+        currentMode,
+        referenceDate,
+        updateReferenceDate,
+        popModeStack,
+        mode,
+        onChangeProp,
+        setMonth,
+        getMonth,
+        setYear,
+        getYear,
+    ]);
+    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(Calendar, { ...restCalendarProps, ref: calendarRef, className: calendarClassName, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value }) }));
+});
 var DatePickerCalendar$1 = DatePickerCalendar;
 
 export { DatePickerCalendar$1 as default };

package/DatePicker/index.d.ts

@@ -1,2 +1,2 @@
-export { DatePickerCalendarProps, default as DatePickerCalendar, } from './DatePickerCalendar';
-export { DatePickerProps, default, } from './DatePicker';
+export { DatePickerCalendarProps, default as DatePickerCalendar, } from './DatePickerCalendar';
+export { DatePickerProps, default, } from './DatePicker';

package/DateRangePicker/DateRangePicker.d.ts

@@ -1,38 +1,38 @@
-/// <reference types="react" />
-import { DateType } from '@mezzanine-ui/core/calendar';
-import { RangePickerValue } from '@mezzanine-ui/core/picker';
-import { DateRangePickerCalendarProps } from './DateRangePickerCalendar';
-import { RangePickerTriggerProps } from '../Picker';
-export interface DateRangePickerProps extends Pick<DateRangePickerCalendarProps, 'calendarProps' | 'displayMonthLocale' | 'fadeProps' | 'mode' | 'popperProps' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled'>, Pick<RangePickerTriggerProps, 'className' | 'clearable' | 'disabled' | 'error' | 'fullWidth' | 'inputFromPlaceholder' | 'inputFromProps' | 'inputToPlaceholder' | 'inputToProps' | 'prefix' | 'readOnly' | 'required' | 'size'> {
-    /**
-     * Default value for date range picker.
-     */
-    defaultValue?: [DateType, DateType];
-    /**
-     * The format for displaying date.
-     */
-    format?: string;
-    /**
-     * A function that fires when calendar toggle. Receive open status in boolean format as props.
-     */
-    onCalendarToggle?: (open: boolean) => void;
-    /**
-     * Change handler. Takes an array of your declared `DateType` which represents from and to in order.
-     */
-    onChange?: (target?: RangePickerValue) => void;
-    /**
-     * The reference date for getting calendars. Default to current time.
-     */
-    referenceDate?: DateRangePickerCalendarProps['referenceDate'];
-    /**
-     * Value of the range picker.
-     * It is an array of your declared `DateType` which represents from and to in order.
-     */
-    value?: RangePickerValue;
-}
-/**
- * The react component for `mezzanine` date range picker.
- * Notice that any component related to date-range-picker should be used along with `CalendarContext`. <br />
- */
-declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;
-export default DateRangePicker;
+/// <reference types="react" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { RangePickerValue } from '@mezzanine-ui/core/picker';
+import { DateRangePickerCalendarProps } from './DateRangePickerCalendar';
+import { RangePickerTriggerProps } from '../Picker';
+export interface DateRangePickerProps extends Pick<DateRangePickerCalendarProps, 'calendarProps' | 'displayMonthLocale' | 'fadeProps' | 'mode' | 'popperProps' | 'isDateDisabled' | 'isMonthDisabled' | 'isYearDisabled'>, Pick<RangePickerTriggerProps, 'className' | 'clearable' | 'disabled' | 'error' | 'fullWidth' | 'inputFromPlaceholder' | 'inputFromProps' | 'inputToPlaceholder' | 'inputToProps' | 'prefix' | 'readOnly' | 'required' | 'size'> {
+    /**
+     * Default value for date range picker.
+     */
+    defaultValue?: [DateType, DateType];
+    /**
+     * The format for displaying date.
+     */
+    format?: string;
+    /**
+     * A function that fires when calendar toggle. Receive open status in boolean format as props.
+     */
+    onCalendarToggle?: (open: boolean) => void;
+    /**
+     * Change handler. Takes an array of your declared `DateType` which represents from and to in order.
+     */
+    onChange?: (target?: RangePickerValue) => void;
+    /**
+     * The reference date for getting calendars. Default to current time.
+     */
+    referenceDate?: DateRangePickerCalendarProps['referenceDate'];
+    /**
+     * Value of the range picker.
+     * It is an array of your declared `DateType` which represents from and to in order.
+     */
+    value?: RangePickerValue;
+}
+/**
+ * The react component for `mezzanine` date range picker.
+ * Notice that any component related to date-range-picker should be used along with `CalendarContext`. <br />
+ */
+declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DateRangePicker;

package/DateRangePicker/DateRangePicker.js

@@ -11,179 +11,179 @@ import Icon from '../Icon/Icon.js';
 import RangePickerTrigger from '../Picker/RangePickerTrigger.js';
 import { FormControlContext } from '../Form/FormControlContext.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 = true, 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]);
-            if (onChangeProp) {
-                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 }));
-    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, 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 })] }));
-});
+/**
+ * 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 = true, 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]);
+            if (onChangeProp) {
+                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 }));
+    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, 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 })] }));
+});
 var DateRangePicker$1 = DateRangePicker;
 
 export { DateRangePicker$1 as default };