@mezzanine-ui/react 0.13.10 → 0.14.0

package/Checkbox/CheckboxGroup.d.ts

@@ -1,47 +1,47 @@
-import { CheckboxGroupOption, CheckboxSize } from '@mezzanine-ui/core/checkbox';
-import { ChangeEvent, ReactNode } from 'react';
-import { InputCheckGroupProps } from '../_internal/InputCheck';
-export interface CheckboxGroupProps extends Omit<InputCheckGroupProps, 'defaultValue' | 'onChange'> {
-    /**
-     * The checkboxes in radio group.
-     */
-    children?: ReactNode;
-    /**
-     * The default value of checkbox group.
-     */
-    defaultValue?: string[];
-    /**
-     * Whether the checkbox group is disabled.
-     * Control the disabled of checkboxes in group if disabled not passed to checkbox.
-     */
-    disabled?: boolean;
-    /**
-     * The name of checkbox group.
-     * Control the name of checkboxes in group if name not passed to checkbox.
-     */
-    name?: string;
-    /**
-     * The onChange of checkbox group.
-     * Will be passed to each checkboxes but composing both instead of overriding.
-     */
-    onChange?: (value: string[], event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * The options of checkbox group.
-     * Will be ignored if children passed.
-     */
-    options?: CheckboxGroupOption[];
-    /**
-     * The size of checkbox group.
-     * Control the size of checkboxes in group if size not passed to checkbox.
-     */
-    size?: CheckboxSize;
-    /**
-     * The value of checkbox group.
-     */
-    value?: string[];
-}
-/**
- * The react component for `mezzanine` checkbox group.
- */
-declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export default CheckboxGroup;
+import { CheckboxGroupOption, CheckboxSize } from '@mezzanine-ui/core/checkbox';
+import { ChangeEvent, ReactNode } from 'react';
+import { InputCheckGroupProps } from '../_internal/InputCheck';
+export interface CheckboxGroupProps extends Omit<InputCheckGroupProps, 'defaultValue' | 'onChange'> {
+    /**
+     * The checkboxes in radio group.
+     */
+    children?: ReactNode;
+    /**
+     * The default value of checkbox group.
+     */
+    defaultValue?: string[];
+    /**
+     * Whether the checkbox group is disabled.
+     * Control the disabled of checkboxes in group if disabled not passed to checkbox.
+     */
+    disabled?: boolean;
+    /**
+     * The name of checkbox group.
+     * Control the name of checkboxes in group if name not passed to checkbox.
+     */
+    name?: string;
+    /**
+     * The onChange of checkbox group.
+     * Will be passed to each checkboxes but composing both instead of overriding.
+     */
+    onChange?: (value: string[], event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The options of checkbox group.
+     * Will be ignored if children passed.
+     */
+    options?: CheckboxGroupOption[];
+    /**
+     * The size of checkbox group.
+     * Control the size of checkboxes in group if size not passed to checkbox.
+     */
+    size?: CheckboxSize;
+    /**
+     * The value of checkbox group.
+     */
+    value?: string[];
+}
+/**
+ * The react component for `mezzanine` checkbox group.
+ */
+declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CheckboxGroup;

package/Checkbox/CheckboxGroup.js

@@ -5,33 +5,33 @@ import { CheckboxGroupContext } from './CheckboxGroupContext.js';
 import Checkbox from './Checkbox.js';
 import InputCheckGroup from '../_internal/InputCheck/InputCheckGroup.js';
 
-const renderOption = ({ label: children, ...option }) => (createElement(Checkbox, { ...option, key: option.value }, children));
-/**
- * The react component for `mezzanine` checkbox group.
- */
-const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
-    const { children: childrenProp, defaultValue = [], disabled, name, options = [], onChange, size, value: valueProp, ...rest } = props;
-    const [value, setValue] = useControlValueState({
-        defaultValue,
-        value: valueProp,
-    });
-    const context = useMemo(() => ({
-        disabled,
-        name,
-        onChange(event) {
-            const { checked, value: targetValue } = event.target;
-            const newValue = checked ? [...value, targetValue] : value.filter((v) => v !== targetValue);
-            setValue(newValue);
-            if (onChange) {
-                onChange(newValue, event);
-            }
-        },
-        size,
-        value,
-    }), [disabled, name, value, size, onChange, setValue]);
-    const children = childrenProp || options.map(renderOption);
-    return (jsx(CheckboxGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, children: children }) }));
-});
+const renderOption = ({ label: children, ...option }) => (createElement(Checkbox, { ...option, key: option.value }, children));
+/**
+ * The react component for `mezzanine` checkbox group.
+ */
+const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
+    const { children: childrenProp, defaultValue = [], disabled, name, options = [], onChange, size, value: valueProp, ...rest } = props;
+    const [value, setValue] = useControlValueState({
+        defaultValue,
+        value: valueProp,
+    });
+    const context = useMemo(() => ({
+        disabled,
+        name,
+        onChange(event) {
+            const { checked, value: targetValue } = event.target;
+            const newValue = checked ? [...value, targetValue] : value.filter((v) => v !== targetValue);
+            setValue(newValue);
+            if (onChange) {
+                onChange(newValue, event);
+            }
+        },
+        size,
+        value,
+    }), [disabled, name, value, size, onChange, setValue]);
+    const children = childrenProp || options.map(renderOption);
+    return (jsx(CheckboxGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, children: children }) }));
+});
 var CheckboxGroup$1 = CheckboxGroup;
 
 export { CheckboxGroup$1 as default };

package/Checkbox/CheckboxGroupContext.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { CheckboxSize } from '@mezzanine-ui/core/checkbox';
-import { CheckboxGroupControlContextValue } from '../Form/useCheckboxControlValue';
-export interface CheckboxGroupContextValue extends CheckboxGroupControlContextValue {
-    disabled?: boolean;
-    name?: string;
-    size?: CheckboxSize;
-}
-export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | undefined>;
+/// <reference types="react" />
+import { CheckboxSize } from '@mezzanine-ui/core/checkbox';
+import { CheckboxGroupControlContextValue } from '../Form/useCheckboxControlValue';
+export interface CheckboxGroupContextValue extends CheckboxGroupControlContextValue {
+    disabled?: boolean;
+    name?: string;
+    size?: CheckboxSize;
+}
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | undefined>;

package/Checkbox/index.d.ts

@@ -1,4 +1,4 @@
-export type { CheckboxSize, CheckboxGroupOrientation, CheckboxGroupOption, } from '@mezzanine-ui/core/checkbox';
-export { CheckboxProps, default, } from './Checkbox';
-export { CheckboxGroupProps, default as CheckboxGroup, } from './CheckboxGroup';
-export { CheckAllProps, default as CheckAll, } from './CheckAll';
+export type { CheckboxSize, CheckboxGroupOrientation, CheckboxGroupOption, } from '@mezzanine-ui/core/checkbox';
+export { CheckboxProps, default, } from './Checkbox';
+export { CheckboxGroupProps, default as CheckboxGroup, } from './CheckboxGroup';
+export { CheckAllProps, default as CheckAll, } from './CheckAll';

package/ConfirmActions/ConfirmActions.d.ts

@@ -1,45 +1,45 @@
-import { ReactNode } from 'react';
-import { ButtonGroupProps, ButtonProps } from '../Button';
-export interface ConfirmActionsProps extends Omit<ButtonGroupProps, 'children'> {
-    /**
-     * Other props of cancel button.
-     */
-    cancelButtonProps?: ButtonProps;
-    /**
-     * Content of cancel button.
-     */
-    cancelText?: ReactNode;
-    /**
-     * Other props of confirm button.
-     */
-    confirmButtonProps?: ButtonProps;
-    /**
-     * Content of confirm button.
-     */
-    confirmText?: ReactNode;
-    /**
-     * Whether to hide cancel button.
-     */
-    hideCancelButton?: boolean;
-    /**
-     * Whether to hide confirm button.
-     */
-    hideConfirmButton?: boolean;
-    /**
-     * Indicate whether confirm button loading and cancel button disabled.
-     */
-    loading?: boolean;
-    /**
-     * Click handler for cancel button.
-     */
-    onCancel?: ButtonProps['onClick'];
-    /**
-     * Click handler for confirm button.
-     */
-    onConfirm?: ButtonProps['onClick'];
-}
-/**
- * The react component for `mezzanine` confirm actions.
- */
-declare const ConfirmActions: import("react").ForwardRefExoticComponent<ConfirmActionsProps & import("react").RefAttributes<HTMLDivElement>>;
-export default ConfirmActions;
+import { ReactNode } from 'react';
+import { ButtonGroupProps, ButtonProps } from '../Button';
+export interface ConfirmActionsProps extends Omit<ButtonGroupProps, 'children'> {
+    /**
+     * Other props of cancel button.
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * Content of cancel button.
+     */
+    cancelText?: ReactNode;
+    /**
+     * Other props of confirm button.
+     */
+    confirmButtonProps?: ButtonProps;
+    /**
+     * Content of confirm button.
+     */
+    confirmText?: ReactNode;
+    /**
+     * Whether to hide cancel button.
+     */
+    hideCancelButton?: boolean;
+    /**
+     * Whether to hide confirm button.
+     */
+    hideConfirmButton?: boolean;
+    /**
+     * Indicate whether confirm button loading and cancel button disabled.
+     */
+    loading?: boolean;
+    /**
+     * Click handler for cancel button.
+     */
+    onCancel?: ButtonProps['onClick'];
+    /**
+     * Click handler for confirm button.
+     */
+    onConfirm?: ButtonProps['onClick'];
+}
+/**
+ * The react component for `mezzanine` confirm actions.
+ */
+declare const ConfirmActions: import("react").ForwardRefExoticComponent<ConfirmActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ConfirmActions;

package/ConfirmActions/ConfirmActions.js

@@ -3,14 +3,14 @@ import { forwardRef } from 'react';
 import Button from '../Button/Button.js';
 import ButtonGroup from '../Button/ButtonGroup.js';
 
-/**
- * The react component for `mezzanine` confirm actions.
- */
-const ConfirmActions = forwardRef(function ConfirmActions(props, ref) {
-    const { cancelButtonProps, cancelText, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, loading, onCancel, onConfirm, ...rest } = props;
-    const { disabled: cancelButtonDisabled = loading, } = cancelButtonProps || {};
-    return (jsxs(ButtonGroup, { ...rest, ref: ref, children: [!hideCancelButton && (jsx(Button, { variant: "outlined", ...cancelButtonProps, disabled: cancelButtonDisabled, onClick: onCancel, children: cancelText })), !hideConfirmButton && (jsx(Button, { variant: "contained", ...confirmButtonProps, loading: loading, onClick: onConfirm, children: confirmText }))] }));
-});
+/**
+ * The react component for `mezzanine` confirm actions.
+ */
+const ConfirmActions = forwardRef(function ConfirmActions(props, ref) {
+    const { cancelButtonProps, cancelText, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, loading, onCancel, onConfirm, ...rest } = props;
+    const { disabled: cancelButtonDisabled = loading, } = cancelButtonProps || {};
+    return (jsxs(ButtonGroup, { ...rest, ref: ref, children: [!hideCancelButton && (jsx(Button, { variant: "outlined", ...cancelButtonProps, disabled: cancelButtonDisabled, onClick: onCancel, children: cancelText })), !hideConfirmButton && (jsx(Button, { variant: "contained", ...confirmButtonProps, loading: loading, onClick: onConfirm, children: confirmText }))] }));
+});
 var ConfirmActions$1 = ConfirmActions;
 
 export { ConfirmActions$1 as default };

package/ConfirmActions/index.d.ts

@@ -1 +1 @@
-export { ConfirmActionsProps, default, } from './ConfirmActions';
+export { ConfirmActionsProps, default, } from './ConfirmActions';

package/DatePicker/DatePicker.d.ts

@@ -1,32 +1,32 @@
-/// <reference types="react" />
-import { DateType } from '@mezzanine-ui/core/calendar';
-import { DatePickerCalendarProps } from './DatePickerCalendar';
-import { PickerTriggerProps } from '../Picker';
-export interface DatePickerProps extends Omit<DatePickerCalendarProps, 'anchor' | 'calendarRef' | 'onChange' | 'open' | 'referenceDate' | 'updateReferenceDate'>, Omit<PickerTriggerProps, 'defaultValue' | 'inputRef' | 'onChange' | 'onClear' | 'onClick' | 'onIconClick' | 'onKeyDown' | 'suffixActionIcon' | 'value'> {
-    /**
-     * Default value for date picker.
-     */
-    defaultValue?: 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 your declared `DateType` as argument.
-     */
-    onChange?: (target?: DateType) => void;
-    /**
-     * The reference date for getting calendars. Default to current time.
-     */
-    referenceDate?: DateType;
-}
-/**
- * The react component for `mezzanine` date picker.
- * Notice that any component related to date-picker should be used along with `CalendarContext`. <br />
- */
-declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
-export default DatePicker;
+/// <reference types="react" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { DatePickerCalendarProps } from './DatePickerCalendar';
+import { PickerTriggerProps } from '../Picker';
+export interface DatePickerProps extends Omit<DatePickerCalendarProps, 'anchor' | 'calendarRef' | 'onChange' | 'open' | 'referenceDate' | 'updateReferenceDate'>, Omit<PickerTriggerProps, 'defaultValue' | 'inputRef' | 'onChange' | 'onClear' | 'onClick' | 'onIconClick' | 'onKeyDown' | 'suffixActionIcon' | 'value'> {
+    /**
+     * Default value for date picker.
+     */
+    defaultValue?: 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 your declared `DateType` as argument.
+     */
+    onChange?: (target?: DateType) => void;
+    /**
+     * The reference date for getting calendars. Default to current time.
+     */
+    referenceDate?: DateType;
+}
+/**
+ * The react component for `mezzanine` date picker.
+ * Notice that any component related to date-picker should be used along with `CalendarContext`. <br />
+ */
+declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DatePicker;

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 };