@mezzanine-ui/react 0.13.10 → 0.13.12

package/DateRangePicker/useDateRangePickerValue.js

@@ -1,87 +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,
-    };
+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

@@ -1,28 +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;
+/// <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;

package/DateTimePicker/DateTimePicker.js

@@ -10,113 +10,113 @@ import Icon from '../Icon/Icon.js';
 import PickerTrigger from '../Picker/PickerTrigger.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 
-/**
- * The react component for `mezzanine` time picker.
- * Notice that any component related to time-picker should be used along with `CalendarContext`.
- */
-const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { defaultDateFormat, defaultTimeFormat, getNow, startOf, } = useCalendarContext();
-    const defaultFormat = `${defaultDateFormat} ${defaultTimeFormat}`;
-    const { calendarProps, className, clearable = true, confirmText, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
-    const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
-    const formats = useMemo(() => [format, defaultFormat], [defaultFormat, format]);
-    /** Panel open control */
-    const [open, setOpen] = useState(false);
-    const preventOpen = readOnly;
-    const onPanelToggle = useCallback((nextOpen) => {
-        if (!preventOpen) {
-            setOpen(nextOpen);
-            if (onPanelToggleProp) {
-                onPanelToggleProp(nextOpen);
-            }
-        }
-    }, [onPanelToggleProp, preventOpen]);
-    const onFocus = useCallback((event) => {
-        if (onFocusProp) {
-            onFocusProp(event);
-        }
-        onPanelToggle(true);
-    }, [onFocusProp, onPanelToggle]);
-    /** Controlling input value and bind change handler */
-    const inputRef = useRef(null);
-    const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
-        defaultValue,
-        format,
-        formats,
-        inputRef,
-        value: valueProp,
-    });
-    /** Panel confirm handler */
-    const onConfirm = useCallback(() => {
-        if (onChangeProp) {
-            onChangeProp(internalValue);
-        }
-        onPanelToggle(false);
-    }, [internalValue, onChangeProp, onPanelToggle]);
-    /** using internal reference date */
-    const [referenceDate, setReferenceDate] = useState(startOf(referenceDateProp || defaultValue || getNow(), 'hour'));
-    useEffect(() => {
-        if (internalValue) {
-            setReferenceDate(internalValue);
-        }
-    }, [internalValue]);
-    /** Bind input props */
-    const onResolvedKeyDown = useCallback((event) => {
-        if (onKeyDownProp) {
-            onKeyDownProp(event);
-        }
-        onKeyDown(event);
-        if (event.key === 'Enter') {
-            onConfirm();
-        }
-    }, [onConfirm, onKeyDown, onKeyDownProp]);
-    const onResolvedBlur = useCallback((event) => {
-        if (onBlurProp) {
-            onBlurProp(event);
-        }
-        onBlur(event);
-    }, [onBlur, onBlurProp]);
-    const resolvedInputProps = {
-        ...restInputProp,
-        size: inputSize,
-        onFocus,
-        onKeyDown: onResolvedKeyDown,
-        onBlur: onResolvedBlur,
-    };
-    /** Popper positioning */
-    const anchorRef = useRef(null);
-    const panelRef = useRef(null);
-    const triggerComposedRef = useComposeRefs([anchorRef, ref]);
-    /** Blur, click away and key down close */
-    const onClose = useCallback(() => {
-        onChange(valueProp);
-        onPanelToggle(false);
-    }, [onChange, onPanelToggle, valueProp]);
-    usePickerDocumentEventClose({
-        open,
-        anchorRef,
-        popperRef: panelRef,
-        lastElementRefInFlow: inputRef,
-        onClose,
-        onChangeClose: onClose,
-    });
-    /** Bind on change to on clear */
-    const onClear = () => {
-        onChange(undefined);
-        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
-    };
-    /** Icon */
-    const onIconClick = (e) => {
-        e.stopPropagation();
-        if (open) {
-            onChange(valueProp);
-        }
-        onPanelToggle(!open);
-    };
-    const suffixActionIcon = (jsx(Icon, { icon: ClockIcon, onClick: onIconClick }));
-    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { 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: sizeProp, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DateTimePickerPanel, { ref: panelRef, anchor: anchorRef, calendarProps: calendarProps, confirmText: confirmText, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, referenceDate: referenceDate, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue })] }));
-});
+/**
+ * The react component for `mezzanine` time picker.
+ * Notice that any component related to time-picker should be used along with `CalendarContext`.
+ */
+const DateTimePicker = forwardRef(function DateTimePicker(props, ref) {
+    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const { defaultDateFormat, defaultTimeFormat, getNow, startOf, } = useCalendarContext();
+    const defaultFormat = `${defaultDateFormat} ${defaultTimeFormat}`;
+    const { calendarProps, className, clearable = true, confirmText, defaultValue, disableOnNext, disableOnPrev, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
+    const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
+    const formats = useMemo(() => [format, defaultFormat], [defaultFormat, format]);
+    /** Panel open control */
+    const [open, setOpen] = useState(false);
+    const preventOpen = readOnly;
+    const onPanelToggle = useCallback((nextOpen) => {
+        if (!preventOpen) {
+            setOpen(nextOpen);
+            if (onPanelToggleProp) {
+                onPanelToggleProp(nextOpen);
+            }
+        }
+    }, [onPanelToggleProp, preventOpen]);
+    const onFocus = useCallback((event) => {
+        if (onFocusProp) {
+            onFocusProp(event);
+        }
+        onPanelToggle(true);
+    }, [onFocusProp, onPanelToggle]);
+    /** Controlling input value and bind change handler */
+    const inputRef = useRef(null);
+    const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
+        defaultValue,
+        format,
+        formats,
+        inputRef,
+        value: valueProp,
+    });
+    /** Panel confirm handler */
+    const onConfirm = useCallback(() => {
+        if (onChangeProp) {
+            onChangeProp(internalValue);
+        }
+        onPanelToggle(false);
+    }, [internalValue, onChangeProp, onPanelToggle]);
+    /** using internal reference date */
+    const [referenceDate, setReferenceDate] = useState(startOf(referenceDateProp || defaultValue || getNow(), 'hour'));
+    useEffect(() => {
+        if (internalValue) {
+            setReferenceDate(internalValue);
+        }
+    }, [internalValue]);
+    /** Bind input props */
+    const onResolvedKeyDown = useCallback((event) => {
+        if (onKeyDownProp) {
+            onKeyDownProp(event);
+        }
+        onKeyDown(event);
+        if (event.key === 'Enter') {
+            onConfirm();
+        }
+    }, [onConfirm, onKeyDown, onKeyDownProp]);
+    const onResolvedBlur = useCallback((event) => {
+        if (onBlurProp) {
+            onBlurProp(event);
+        }
+        onBlur(event);
+    }, [onBlur, onBlurProp]);
+    const resolvedInputProps = {
+        ...restInputProp,
+        size: inputSize,
+        onFocus,
+        onKeyDown: onResolvedKeyDown,
+        onBlur: onResolvedBlur,
+    };
+    /** Popper positioning */
+    const anchorRef = useRef(null);
+    const panelRef = useRef(null);
+    const triggerComposedRef = useComposeRefs([anchorRef, ref]);
+    /** Blur, click away and key down close */
+    const onClose = useCallback(() => {
+        onChange(valueProp);
+        onPanelToggle(false);
+    }, [onChange, onPanelToggle, valueProp]);
+    usePickerDocumentEventClose({
+        open,
+        anchorRef,
+        popperRef: panelRef,
+        lastElementRefInFlow: inputRef,
+        onClose,
+        onChangeClose: onClose,
+    });
+    /** Bind on change to on clear */
+    const onClear = () => {
+        onChange(undefined);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
+    };
+    /** Icon */
+    const onIconClick = (e) => {
+        e.stopPropagation();
+        if (open) {
+            onChange(valueProp);
+        }
+        onPanelToggle(!open);
+    };
+    const suffixActionIcon = (jsx(Icon, { icon: ClockIcon, onClick: onIconClick }));
+    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { 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: sizeProp, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(DateTimePickerPanel, { ref: panelRef, anchor: anchorRef, calendarProps: calendarProps, confirmText: confirmText, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, referenceDate: referenceDate, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue })] }));
+});
 var DateTimePicker$1 = DateTimePicker;
 
 export { DateTimePicker$1 as default };

package/DateTimePicker/DateTimePickerPanel.d.ts

@@ -1,29 +1,29 @@
-/// <reference types="react" />
-import { DateType } from '@mezzanine-ui/core/calendar';
-import { TimePanelProps } from '../TimePanel';
-import { CalendarProps } from '../Calendar';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
-export interface DateTimePickerPanelProps extends Omit<TimePanelProps, Exclude<keyof NativeElementPropsWithoutKeyAndRef<'div'>, 'className' | 'style' | 'id'> | 'withoutAction' | 'onChange' | 'value' | 'withoutAction'>, 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'>;
-    /**
-     * Change Handler. Receive `DateType` as props.
-     */
-    onChange?: (value?: DateType) => void;
-    /**
-     * Other props you may provide to `Popper` component
-     */
-    popperProps?: Omit<InputTriggerPopperProps, 'anchor' | 'children' | 'fadeProps' | 'open'>;
-    /**
-     * Display value of the panel.
-     */
-    value?: DateType;
-}
-/**
- * The react component for `mezzanine` time picker panel.
- */
-declare const DateTimePickerPanel: import("react").ForwardRefExoticComponent<DateTimePickerPanelProps & import("react").RefAttributes<HTMLDivElement>>;
-export default DateTimePickerPanel;
+/// <reference types="react" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { TimePanelProps } from '../TimePanel';
+import { CalendarProps } from '../Calendar';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
+export interface DateTimePickerPanelProps extends Omit<TimePanelProps, Exclude<keyof NativeElementPropsWithoutKeyAndRef<'div'>, 'className' | 'style' | 'id'> | 'withoutAction' | 'onChange' | 'value' | 'withoutAction'>, 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'>;
+    /**
+     * Change Handler. Receive `DateType` as props.
+     */
+    onChange?: (value?: DateType) => void;
+    /**
+     * Other props you may provide to `Popper` component
+     */
+    popperProps?: Omit<InputTriggerPopperProps, 'anchor' | 'children' | 'fadeProps' | 'open'>;
+    /**
+     * Display value of the panel.
+     */
+    value?: DateType;
+}
+/**
+ * The react component for `mezzanine` time picker panel.
+ */
+declare const DateTimePickerPanel: import("react").ForwardRefExoticComponent<DateTimePickerPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DateTimePickerPanel;

package/DateTimePicker/DateTimePickerPanel.js

@@ -9,42 +9,42 @@ import TimePanel from '../TimePanel/TimePanel.js';
 import TimePanelAction from '../TimePanel/TimePanelAction.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` time picker panel.
- */
-const DateTimePickerPanel = forwardRef(function TimePickerPanel(props, ref) {
-    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, setHour, setMinute, setSecond, getHour, getMinute, getSecond, } = useCalendarContext();
-    const { anchor, calendarProps, className, confirmText, disableOnNext, disableOnPrev, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onConfirm, open, popperProps, referenceDate: referenceDateProp, secondPrefix, secondStep, value, ...restHostProps } = props;
-    const mode = 'day';
-    const { currentMode, onMonthControlClick, onNext, onPrev, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
-    const onCalendarChange = (target) => {
-        if (currentMode === 'day' || currentMode === 'week') {
-            updateReferenceDate(target);
-            popModeStack();
-            if (currentMode === mode && onChangeProp) {
-                onChangeProp(target);
-            }
-        }
-        if (currentMode === 'month') {
-            const result = setMonth(referenceDate, getMonth(target));
-            updateReferenceDate(result);
-            popModeStack();
-        }
-        if (currentMode === 'year') {
-            const result = setYear(referenceDate, getYear(target));
-            updateReferenceDate(result);
-            popModeStack();
-        }
-    };
-    const onTimePanelChange = (target) => {
-        const result = setHour(setMinute(setSecond(referenceDate, getSecond(target)), getMinute(target)), getHour(target));
-        updateReferenceDate(result);
-        if (currentMode === mode && onChangeProp) {
-            onChangeProp(result);
-        }
-    };
-    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsxs("div", { ...restHostProps, className: cx(dateTimePickerClasses.panel, className), children: [jsxs("div", { className: dateTimePickerClasses.panelSelectors, children: [jsx(Calendar, { ...calendarProps, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onCalendarChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value, className: dateTimePickerClasses.panelCalendar }), jsx(TimePanel, { hideHour: hideHour, hourStep: hourStep, hideMinute: hideMinute, minuteStep: minuteStep, hideSecond: hideSecond, secondStep: secondStep, hourPrefix: hourPrefix, minutePrefix: minutePrefix, secondPrefix: secondPrefix, onChange: onTimePanelChange, value: value, withoutAction: true })] }), jsx(TimePanelAction, { onConfirm: onConfirm, confirmText: confirmText })] }) }));
-});
+/**
+ * The react component for `mezzanine` time picker panel.
+ */
+const DateTimePickerPanel = forwardRef(function TimePickerPanel(props, ref) {
+    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, setHour, setMinute, setSecond, getHour, getMinute, getSecond, } = useCalendarContext();
+    const { anchor, calendarProps, className, confirmText, disableOnNext, disableOnPrev, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, isDateDisabled, isMonthDisabled, isYearDisabled, minutePrefix, minuteStep, onChange: onChangeProp, onConfirm, open, popperProps, referenceDate: referenceDateProp, secondPrefix, secondStep, value, ...restHostProps } = props;
+    const mode = 'day';
+    const { currentMode, onMonthControlClick, onNext, onPrev, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
+    const onCalendarChange = (target) => {
+        if (currentMode === 'day' || currentMode === 'week') {
+            updateReferenceDate(target);
+            popModeStack();
+            if (currentMode === mode && onChangeProp) {
+                onChangeProp(target);
+            }
+        }
+        if (currentMode === 'month') {
+            const result = setMonth(referenceDate, getMonth(target));
+            updateReferenceDate(result);
+            popModeStack();
+        }
+        if (currentMode === 'year') {
+            const result = setYear(referenceDate, getYear(target));
+            updateReferenceDate(result);
+            popModeStack();
+        }
+    };
+    const onTimePanelChange = (target) => {
+        const result = setHour(setMinute(setSecond(referenceDate, getSecond(target)), getMinute(target)), getHour(target));
+        updateReferenceDate(result);
+        if (currentMode === mode && onChangeProp) {
+            onChangeProp(result);
+        }
+    };
+    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsxs("div", { ...restHostProps, className: cx(dateTimePickerClasses.panel, className), children: [jsxs("div", { className: dateTimePickerClasses.panelSelectors, children: [jsx(Calendar, { ...calendarProps, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onCalendarChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value, className: dateTimePickerClasses.panelCalendar }), jsx(TimePanel, { hideHour: hideHour, hourStep: hourStep, hideMinute: hideMinute, minuteStep: minuteStep, hideSecond: hideSecond, secondStep: secondStep, hourPrefix: hourPrefix, minutePrefix: minutePrefix, secondPrefix: secondPrefix, onChange: onTimePanelChange, value: value, withoutAction: true })] }), jsx(TimePanelAction, { onConfirm: onConfirm, confirmText: confirmText })] }) }));
+});
 var DateTimePickerPanel$1 = DateTimePickerPanel;
 
 export { DateTimePickerPanel$1 as default };

package/DateTimePicker/index.d.ts

@@ -1,2 +1,2 @@
-export { DateTimePickerPanelProps, default as DateTimePickerPanel, } from './DateTimePickerPanel';
-export { DateTimePickerProps, default, } from './DateTimePicker';
+export { DateTimePickerPanelProps, default as DateTimePickerPanel, } from './DateTimePickerPanel';
+export { DateTimePickerProps, default, } from './DateTimePicker';

package/Drawer/Drawer.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import { DrawerPlacement } from '@mezzanine-ui/core/drawer';
-import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface DrawerProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
-    /**
-     * Whether the drawer placement.
-     * @default 'left'
-     */
-    placement?: DrawerPlacement;
-}
-declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Drawer;
+/// <reference types="react" />
+import { DrawerPlacement } from '@mezzanine-ui/core/drawer';
+import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface DrawerProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * Whether the drawer placement.
+     * @default 'left'
+     */
+    placement?: DrawerPlacement;
+}
+declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Drawer;