@mezzanine-ui/react 0.13.9 → 0.13.11

package/DatePicker/DatePicker.js

@@ -11,125 +11,125 @@ import Icon from '../Icon/Icon.js';
 import PickerTrigger from '../Picker/PickerTrigger.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 
-/**
- * The react component for `mezzanine` date picker.
- * Notice that any component related to date-picker should be used along with `CalendarContext`. <br />
- */
-const DatePicker = forwardRef(function DatePicker(props, ref) {
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { defaultDateFormat, getNow, } = useCalendarContext();
-    const { calendarProps, className, clearable = true, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
-    const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
-    const formats = useMemo(() => [
-        format,
-        defaultDateFormat,
-        getDefaultModeFormat(mode),
-    ], [defaultDateFormat, format, mode]);
-    /** Calender display control */
-    const [open, setOpen] = useState(false);
-    const preventOpen = readOnly;
-    const onCalendarToggle = useCallback((currentOpen) => {
-        if (!preventOpen) {
-            if (onCalendarToggleProp) {
-                onCalendarToggleProp(currentOpen);
-            }
-            setOpen(currentOpen);
-        }
-    }, [onCalendarToggleProp, preventOpen]);
-    const onFocus = useMemo(() => {
-        if (readOnly) {
-            return undefined;
-        }
-        return (event) => {
-            if (onFocusProp) {
-                onFocusProp(event);
-            }
-            onCalendarToggle(true);
-        };
-    }, [onCalendarToggle, onFocusProp, readOnly]);
-    /** Value and change handlers */
-    const inputRef = useRef(null);
-    const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
-        defaultValue,
-        format,
-        formats,
-        inputRef,
-        value: valueProp,
-    });
-    /** Bind close control to handlers */
-    const onCalendarChange = (val) => {
-        onChange(val);
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(val);
-        onCalendarToggle(false);
-    };
-    const onKeyDownWithCloseControl = useCallback((event) => {
-        onKeyDown(event);
-        if (onKeyDownProp) {
-            onKeyDownProp(event);
-        }
-        if (event.key === 'Enter') {
-            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(internalValue);
-            onCalendarToggle(false);
-        }
-    }, [internalValue, onCalendarToggle, onChangeProp, onKeyDown, onKeyDownProp]);
-    /** using internal reference date */
-    const [referenceDate, setReferenceDate] = useState(referenceDateProp || defaultValue || getNow());
-    useEffect(() => {
-        if (internalValue) {
-            setReferenceDate(internalValue);
-        }
-    }, [internalValue]);
-    /** Resolve input props */
-    const onResolvedBlur = useCallback((event) => {
-        if (onBlurProp) {
-            onBlurProp(event);
-        }
-        onBlur(event);
-    }, [onBlur, onBlurProp]);
-    const resolvedInputProps = {
-        ...restInputProp,
-        size: inputSize,
-        onFocus,
-        onKeyDown: onKeyDownWithCloseControl,
-        onBlur: onResolvedBlur,
-    };
-    /** Popper positioning */
-    const anchorRef = useRef(null);
-    const triggerComposedRef = useComposeRefs([ref, anchorRef]);
-    const calendarRef = useRef(null);
-    /** Clear handler */
-    const onClear = useCallback(() => {
-        onChange(undefined);
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
-    }, [onChange, onChangeProp]);
-    /** Blur, click away and key down close */
-    const onClose = () => {
-        onChange(valueProp);
-        onCalendarToggle(false);
-    };
-    const onChangeClose = () => {
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(internalValue);
-        onCalendarToggle(false);
-    };
-    usePickerDocumentEventClose({
-        open,
-        anchorRef,
-        popperRef: calendarRef,
-        lastElementRefInFlow: inputRef,
-        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(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: size, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DatePickerCalendar, { ref: calendarRef, anchor: anchorRef, calendarProps: calendarProps, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: open, popperProps: popperProps, referenceDate: referenceDate, value: internalValue })] }));
-});
+/**
+ * The react component for `mezzanine` date picker.
+ * Notice that any component related to date-picker should be used along with `CalendarContext`. <br />
+ */
+const DatePicker = forwardRef(function DatePicker(props, ref) {
+    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const { defaultDateFormat, getNow, } = useCalendarContext();
+    const { calendarProps, className, clearable = true, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
+    const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
+    const formats = useMemo(() => [
+        format,
+        defaultDateFormat,
+        getDefaultModeFormat(mode),
+    ], [defaultDateFormat, format, mode]);
+    /** Calender display control */
+    const [open, setOpen] = useState(false);
+    const preventOpen = readOnly;
+    const onCalendarToggle = useCallback((currentOpen) => {
+        if (!preventOpen) {
+            if (onCalendarToggleProp) {
+                onCalendarToggleProp(currentOpen);
+            }
+            setOpen(currentOpen);
+        }
+    }, [onCalendarToggleProp, preventOpen]);
+    const onFocus = useMemo(() => {
+        if (readOnly) {
+            return undefined;
+        }
+        return (event) => {
+            if (onFocusProp) {
+                onFocusProp(event);
+            }
+            onCalendarToggle(true);
+        };
+    }, [onCalendarToggle, onFocusProp, readOnly]);
+    /** Value and change handlers */
+    const inputRef = useRef(null);
+    const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
+        defaultValue,
+        format,
+        formats,
+        inputRef,
+        value: valueProp,
+    });
+    /** Bind close control to handlers */
+    const onCalendarChange = (val) => {
+        onChange(val);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(val);
+        onCalendarToggle(false);
+    };
+    const onKeyDownWithCloseControl = useCallback((event) => {
+        onKeyDown(event);
+        if (onKeyDownProp) {
+            onKeyDownProp(event);
+        }
+        if (event.key === 'Enter') {
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(internalValue);
+            onCalendarToggle(false);
+        }
+    }, [internalValue, onCalendarToggle, onChangeProp, onKeyDown, onKeyDownProp]);
+    /** using internal reference date */
+    const [referenceDate, setReferenceDate] = useState(referenceDateProp || defaultValue || getNow());
+    useEffect(() => {
+        if (internalValue) {
+            setReferenceDate(internalValue);
+        }
+    }, [internalValue]);
+    /** Resolve input props */
+    const onResolvedBlur = useCallback((event) => {
+        if (onBlurProp) {
+            onBlurProp(event);
+        }
+        onBlur(event);
+    }, [onBlur, onBlurProp]);
+    const resolvedInputProps = {
+        ...restInputProp,
+        size: inputSize,
+        onFocus,
+        onKeyDown: onKeyDownWithCloseControl,
+        onBlur: onResolvedBlur,
+    };
+    /** Popper positioning */
+    const anchorRef = useRef(null);
+    const triggerComposedRef = useComposeRefs([ref, anchorRef]);
+    const calendarRef = useRef(null);
+    /** Clear handler */
+    const onClear = useCallback(() => {
+        onChange(undefined);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
+    }, [onChange, onChangeProp]);
+    /** Blur, click away and key down close */
+    const onClose = () => {
+        onChange(valueProp);
+        onCalendarToggle(false);
+    };
+    const onChangeClose = () => {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(internalValue);
+        onCalendarToggle(false);
+    };
+    usePickerDocumentEventClose({
+        open,
+        anchorRef,
+        popperRef: calendarRef,
+        lastElementRefInFlow: inputRef,
+        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(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: size, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DatePickerCalendar, { ref: calendarRef, anchor: anchorRef, calendarProps: calendarProps, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: open, popperProps: popperProps, referenceDate: referenceDate, value: internalValue })] }));
+});
 var DatePicker$1 = DatePicker;
 
 export { DatePicker$1 as default };

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;