@mezzanine-ui/react 1.0.0-canary.2 → 1.0.0-canary.4

package/DateRangePicker/useDateRangePickerValue.js

@@ -1,47 +1,115 @@
 'use client';
-import { useState, useMemo } from 'react';
-import { useRangePickerValue } from '../Picker/useRangePickerValue.js';
+import { useState, useCallback, useMemo } from 'react';
 import { useCalendarContext } from '../Calendar/CalendarContext.js';
 
-function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, mode, onChange: onChangeProp, value: valueProp, }) {
-    const { addDay } = useCalendarContext();
-    const { inputFromValue, inputToValue, onChange, onFromBlur, onFromKeyDown, onInputFromChange, onInputToChange, onToBlur, onToKeyDown, value, } = useRangePickerValue({
-        format,
-        formats,
-        value: valueProp,
-        inputFromRef,
-        inputToRef,
-    });
-    const [from, to] = value;
+function useDateRangePickerValue({ format, hasDisabledDateInRange, inputFromRef: _inputFromRef, inputToRef, mode, onChange: onChangeProp, value: valueProp, }) {
+    var _a, _b;
+    const { addDay, formatToString, isBefore, locale } = useCalendarContext();
+    const [internalFrom, setInternalFrom] = useState(valueProp === null || valueProp === void 0 ? void 0 : valueProp[0]);
+    const [internalTo, setInternalTo] = useState(valueProp === null || valueProp === void 0 ? void 0 : valueProp[1]);
+    // Track if user is currently selecting a new range
+    // When selecting, we use internal state; otherwise, we prefer valueProp
+    const [isSelecting, setIsSelecting] = useState(false);
+    const from = isSelecting ? internalFrom : ((_a = valueProp === null || valueProp === void 0 ? void 0 : valueProp[0]) !== null && _a !== void 0 ? _a : internalFrom);
+    const to = isSelecting ? internalTo : ((_b = valueProp === null || valueProp === void 0 ? void 0 : valueProp[1]) !== null && _b !== void 0 ? _b : internalTo);
+    const value = [from, to];
+    const formatDate = useCallback((date) => {
+        if (!date)
+            return '';
+        return formatToString(locale, date, format);
+    }, [formatToString, locale, format]);
+    const sortValues = useCallback((v1, v2) => {
+        return isBefore(v1, v2) ? [v1, v2] : [v2, v1];
+    }, [isBefore]);
+    const inputFromValue = formatDate(from);
+    const inputToValue = formatDate(to);
     const [hoverValue, setHoverValue] = useState(undefined);
-    const onSyncHoverValueInputFromChange = (event) => {
-        onInputFromChange(event);
+    const onInputFromChange = useCallback((formattedValue) => {
+        if (formattedValue) {
+            setIsSelecting(true);
+            if (to && isBefore(to, formattedValue)) {
+                setInternalFrom(to);
+                setInternalTo(formattedValue);
+                // Range is complete, trigger onChange (only in immediate mode)
+                onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([to, formattedValue]);
+            }
+            else {
+                setInternalFrom(formattedValue);
+                // If to is also set, range is complete (only trigger in immediate mode)
+                if (to) {
+                    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([formattedValue, to]);
+                }
+            }
+        }
+        else {
+            setInternalFrom(undefined);
+        }
         setHoverValue(undefined);
-    };
-    const onSyncHoverValueInputToChange = (event) => {
-        onInputToChange(event);
+    }, [to, isBefore, onChangeProp]);
+    const onInputToChange = useCallback((formattedValue) => {
+        if (formattedValue) {
+            setIsSelecting(true);
+            if (from && isBefore(formattedValue, from)) {
+                setInternalTo(from);
+                setInternalFrom(formattedValue);
+                // Range is complete, trigger onChange (only in immediate mode)
+                onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([formattedValue, from]);
+            }
+            else {
+                setInternalTo(formattedValue);
+                // If from is also set, range is complete (only trigger in immediate mode)
+                if (from) {
+                    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, formattedValue]);
+                }
+            }
+        }
+        else {
+            setInternalTo(undefined);
+        }
         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, {
-            from: (nextFrom) => nextFrom,
-            to: (nextTo) => {
-                if (!nextTo)
-                    return nextTo;
-                /** week mode should use the last day of the week (default is the first day) */
-                return mode === 'week' ? addDay(nextTo, 6) : nextTo;
-            },
-        });
-        if (sortedFrom && sortedTo) {
-            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([sortedFrom, sortedTo]);
+    }, [from, isBefore, onChangeProp]);
+    const onCalendarChange = useCallback((rangeValue) => {
+        var _a;
+        const [newFrom, newTo] = rangeValue;
+        setInternalFrom(newFrom);
+        if (newTo) {
+            const adjustedTo = mode === 'week' ? addDay(newTo, 6) : newTo;
+            setInternalTo(adjustedTo);
+            if (newFrom && adjustedTo) {
+                const [sortedFrom, sortedTo] = sortValues(newFrom, adjustedTo);
+                onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([sortedFrom, sortedTo]);
+            }
         }
-    };
-    /** Hover settings */
+        else {
+            setInternalTo(undefined);
+            setIsSelecting(true);
+            // 開始新的選取，則先清除值
+            if (from && to) {
+                onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
+            }
+            (_a = inputToRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        setHoverValue(undefined);
+    }, [mode, addDay, sortValues, onChangeProp, inputToRef, from, to]);
+    const onChange = useCallback((target) => {
+        // Reset selecting state when value is explicitly changed (e.g., cancel/close)
+        setIsSelecting(false);
+        if (!target) {
+            setInternalFrom(undefined);
+            setInternalTo(undefined);
+            return undefined;
+        }
+        const [newFrom, newTo] = target;
+        if (newFrom && newTo) {
+            const sorted = sortValues(newFrom, newTo);
+            setInternalFrom(sorted[0]);
+            setInternalTo(sorted[1]);
+            return sorted;
+        }
+        setInternalFrom(newFrom);
+        setInternalTo(newTo);
+        return target;
+    }, [sortValues]);
     const anchor1 = from || to;
     const anchor2 = from && to ? to : hoverValue;
     const calendarValue = useMemo(() => {
@@ -53,44 +121,54 @@ function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, mo
         }
         return undefined;
     }, [anchor1, anchor2]);
+    /**
+     * Check if date is in range, considering disabled dates
+     * Returns a function that can be used as isDateInRange handler
+     */
+    const checkIsInRange = useCallback((_date) => {
+        if (!anchor1 || !anchor2)
+            return false;
+        // Check if the range crosses any disabled dates
+        if (hasDisabledDateInRange === null || hasDisabledDateInRange === void 0 ? void 0 : hasDisabledDateInRange(anchor1, anchor2)) {
+            return false;
+        }
+        return true;
+    }, [anchor1, anchor2, hasDisabledDateInRange]);
     const onCalendarHover = !(from && to) && anchor1 ? setHoverValue : undefined;
-    const onSyncHoverValueClear = () => {
-        onChange(undefined);
+    const onClear = useCallback(() => {
+        setInternalFrom(undefined);
+        setInternalTo(undefined);
         setHoverValue(undefined);
+        setIsSelecting(false);
         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);
-        }
-    };
+    }, [onChangeProp]);
+    const onFromFocus = useCallback(() => {
+        // Optional: add focus logic
+    }, []);
+    const onToFocus = useCallback(() => {
+        // Optional: add focus logic
+    }, []);
+    const onFromBlur = useCallback(() => {
+        // Optional: add blur logic
+    }, []);
+    const onToBlur = useCallback(() => {
+        // Optional: add blur logic
+    }, []);
     return {
         calendarValue,
+        checkIsInRange,
         inputFromValue,
         inputToValue,
         onCalendarChange,
         onCalendarHover,
         onChange,
-        onClear: onSyncHoverValueClear,
+        onClear,
         onFromBlur,
-        onFromKeyDown: onFromKeyDownWithOnChange,
-        onInputFromChange: onSyncHoverValueInputFromChange,
-        onInputToChange: onSyncHoverValueInputToChange,
+        onFromFocus,
+        onInputFromChange,
+        onInputToChange,
         onToBlur,
-        onToKeyDown: onToKeyDownWithOnChange,
+        onToFocus,
         value,
     };
 }

package/DateTimePicker/DateTimePicker.d.ts

@@ -1,27 +1,48 @@
 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'> {
+import { DatePickerCalendarProps } from '../DatePicker';
+import { PickerTriggerWithSeparatorProps } from '../Picker';
+import { TimePickerPanelProps } from '../TimePicker';
+type FocusedInput = 'left' | 'right' | null;
+export interface DateTimePickerProps extends Omit<DatePickerCalendarProps, 'anchor' | 'onChange' | 'open' | 'referenceDate' | 'value'>, Omit<TimePickerPanelProps, 'anchor' | 'onChange' | 'open' | 'popperProps' | 'value'>, Omit<PickerTriggerWithSeparatorProps, 'formatLeft' | 'formatRight' | 'inputLeftRef' | 'inputRightRef' | 'onBlurLeft' | 'onBlurRight' | 'onChangeLeft' | 'onChangeRight' | 'onFocusLeft' | 'onFocusRight' | 'onLeftComplete' | 'onRightComplete' | 'suffix' | 'valueLeft' | 'valueRight'> {
     /**
-     * Default value for time picker.
+     * Default value for date-time picker.
      */
     defaultValue?: DateType;
     /**
-     * The format for displaying time.
+     * The format for displaying date (left input).
      */
-    format?: string;
+    formatDate?: string;
     /**
-     * A function that fires when panel toggled. Receive open status in boolean format as props.
+     * The format for displaying time (right input).
      */
-    onPanelToggle?: (open: boolean) => void;
+    formatTime?: string;
+    /**
+     * Change handler. Takes your declared `DateType` as argument.
+     * Called when both date and time values are complete.
+     */
+    onChange?: (target?: DateType) => void;
+    /**
+     * A function that fires when panel toggled. Receive open status and focused input as props.
+     */
+    onPanelToggle?: (open: boolean, focusedInput: FocusedInput) => void;
+    /**
+     * Other props you may provide to the time picker panel's `Popper` component
+     */
+    popperPropsTime?: TimePickerPanelProps['popperProps'];
     /**
      * The reference date for getting calendars. Default to current time.
      */
     referenceDate?: DateType;
+    /**
+     * Current value of date-time picker.
+     */
+    value?: DateType;
 }
 /**
- * The react component for `mezzanine` time picker.
- * Notice that any component related to time-picker should be used along with `CalendarContext`.
+ * The react component for `mezzanine` date-time picker.
+ * This component features two separate inputs for date and time,
+ * with independent calendar and time panels shown based on focus.
+ * Notice that any component related to date-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

@@ -1,122 +1,206 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ClockIcon } from '@mezzanine-ui/icons';
-import { forwardRef, useContext, useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { CalendarTimeIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import DateTimePickerPanel from './DateTimePickerPanel.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
+import TimePickerPanel from '../TimePicker/TimePickerPanel.js';
 import { useCalendarContext } from '../Calendar/CalendarContext.js';
-import { usePickerValue } from '../Picker/usePickerValue.js';
 import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
 import Icon from '../Icon/Icon.js';
-import PickerTrigger from '../Picker/PickerTrigger.js';
+import PickerTriggerWithSeparator from '../Picker/PickerTriggerWithSeparator.js';
+import DatePickerCalendar from '../DatePicker/DatePickerCalendar.js';
 
 /**
- * The react component for `mezzanine` time picker.
- * Notice that any component related to time-picker should be used along with `CalendarContext`.
+ * The react component for `mezzanine` date-time picker.
+ * This component features two separate inputs for date and time,
+ * with independent calendar and time panels shown based on focus.
+ * Notice that any component related to date-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, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = disabledFromFormControl, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, isDateDisabled, isMonthDisabled, isWeekDisabled, 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);
+    const { defaultDateFormat, defaultTimeFormat, formatToString, getNow, getHour, getMinute, getSecond, isValid, setHour, setMinute, setSecond, startOf, locale, } = useCalendarContext();
+    const { 
+    // Calendar props
+    calendarProps, calendarRef, disabledMonthSwitch = false, disableOnDoubleNext, disableOnDoublePrev, disableOnNext, disableOnPrev, disabledYearSwitch = false, displayMonthLocale, isDateDisabled, isHalfYearDisabled, isMonthDisabled, isQuarterDisabled, isWeekDisabled, isYearDisabled, mode = 'day', 
+    // Time panel props
+    hideHour, hideMinute, hideSecond, hourStep, minuteStep, secondStep, 
+    // DateTimePicker specific props
+    className, clearable = true, defaultValue, disabled = false, error = false, fadeProps, formatDate = defaultDateFormat, formatTime = hideSecond ? 'HH:mm' : defaultTimeFormat, fullWidth = false, onClear: onClearProp, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholderLeft = formatDate, placeholderRight = formatTime, popperProps, popperPropsTime, prefix, readOnly, referenceDate: referenceDateProp, required = false, size, value: valueProp, ...restTriggerProps } = props;
+    // Internal state
+    const [focusedInput, setFocusedInput] = useState(null);
+    const [dateValue, setDateValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : valueProp);
+    const [timeValue, setTimeValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : valueProp);
+    // Refs
+    const inputLeftRef = useRef(null);
+    const inputRightRef = useRef(null);
+    const anchorRef = useRef(null);
+    const calendarPanelRef = useRef(null);
+    const timePanelRef = useRef(null);
+    const triggerComposedRef = useComposeRefs([anchorRef, ref]);
+    // Reference date for calendar
+    const [referenceDate, setReferenceDate] = useState(startOf(referenceDateProp || defaultValue || getNow(), 'day'));
+    // Sync external value
+    useEffect(() => {
+        if (valueProp !== undefined) {
+            setDateValue(valueProp);
+            setTimeValue(valueProp);
+            if (valueProp) {
+                setReferenceDate(startOf(valueProp, 'day'));
             }
         }
-    }, [onPanelToggleProp, preventOpen]);
-    const onFocus = useCallback((event) => {
-        if (onFocusProp) {
-            onFocusProp(event);
+    }, [valueProp, startOf]);
+    // Open state based on focused input
+    const openCalendar = focusedInput === 'left' && !readOnly;
+    const openTimePanel = focusedInput === 'right' && !readOnly;
+    // Format values for display
+    const displayDateValue = useMemo(() => {
+        if (!dateValue)
+            return '';
+        return formatToString(locale, dateValue, formatDate) || '';
+    }, [dateValue, formatDate, formatToString, locale]);
+    const displayTimeValue = useMemo(() => {
+        if (!timeValue)
+            return '';
+        return formatToString(locale, timeValue, formatTime) || '';
+    }, [timeValue, formatTime, formatToString, locale]);
+    // Panel toggle handler
+    const onPanelToggle = useCallback((open, input) => {
+        if (onPanelToggleProp) {
+            onPanelToggleProp(open, input);
         }
-        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);
+    }, [onPanelToggleProp]);
+    // Focus handlers
+    const onFocusLeft = useCallback(() => {
+        if (!readOnly) {
+            setFocusedInput('left');
+            onPanelToggle(true, 'left');
         }
-        onPanelToggle(false);
-    }, [internalValue, onChangeProp, onPanelToggle]);
-    /** using internal reference date */
-    const [referenceDate, setReferenceDate] = useState(startOf(referenceDateProp || defaultValue || getNow(), 'hour'));
-    useEffect(() => {
-        if (internalValue) {
-            setReferenceDate(internalValue);
+    }, [onPanelToggle, readOnly]);
+    const onFocusRight = useCallback(() => {
+        if (!readOnly) {
+            setFocusedInput('right');
+            onPanelToggle(true, 'right');
         }
-    }, [internalValue]);
-    /** Bind input props */
-    const onResolvedKeyDown = useCallback((event) => {
-        if (onKeyDownProp) {
-            onKeyDownProp(event);
+    }, [onPanelToggle, readOnly]);
+    // Combine date and time into a single value
+    const combineDateTime = useCallback((date, time) => {
+        if (!date)
+            return undefined;
+        const timeSource = time || getNow();
+        const result = setHour(setMinute(setSecond(date, getSecond(timeSource)), getMinute(timeSource)), getHour(timeSource));
+        return result;
+    }, [getNow, getHour, getMinute, getSecond, setHour, setMinute, setSecond]);
+    // Close handler
+    const onClose = useCallback(() => {
+        setFocusedInput(null);
+        onPanelToggle(false, null);
+    }, [onPanelToggle]);
+    // Trigger onChange when both date and time are set
+    const notifyChange = useCallback((date, time) => {
+        if (!onChangeProp)
+            return;
+        if (date && time) {
+            const combined = combineDateTime(date, time);
+            onChangeProp(combined);
         }
-        onKeyDown(event);
-        if (event.key === 'Enter') {
-            onConfirm();
+    }, [combineDateTime, onChangeProp]);
+    // Handle left complete - auto focus right
+    const onLeftComplete = useCallback(() => {
+        if (timeValue) {
+            onClose();
         }
-    }, [onConfirm, onKeyDown, onKeyDownProp]);
-    const onResolvedBlur = useCallback((event) => {
-        if (onBlurProp) {
-            onBlurProp(event);
+        else {
+            setTimeout(() => {
+                var _a;
+                (_a = inputRightRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
         }
-        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]);
+    }, [timeValue, onClose]);
+    // Handle left complete - auto focus right
+    const onRightComplete = useCallback(() => {
+        if (dateValue) {
+            onClose();
+        }
+        else {
+            setTimeout(() => {
+                var _a;
+                (_a = inputLeftRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [dateValue, onClose]);
+    // Handle date change from input
+    const onChangeLeft = useCallback((isoValue) => {
+        if (!isoValue) {
+            setDateValue(undefined);
+            return;
+        }
+        if (isValid(isoValue)) {
+            setDateValue(isoValue);
+            setReferenceDate(startOf(isoValue, 'day'));
+            notifyChange(isoValue, timeValue);
+        }
+    }, [isValid, notifyChange, startOf, timeValue]);
+    const onChangeRight = useCallback((isoValue) => {
+        if (!isoValue) {
+            setTimeValue(undefined);
+            return;
+        }
+        if (isValid(isoValue)) {
+            setTimeValue(isoValue);
+            notifyChange(dateValue, isoValue);
+        }
+    }, [dateValue, isValid, notifyChange]);
+    const onCalendarChange = useCallback((target) => {
+        setDateValue(target);
+        setReferenceDate(startOf(target, 'day'));
+        notifyChange(target, timeValue);
+        onLeftComplete();
+    }, [notifyChange, startOf, timeValue, onLeftComplete]);
+    // Handle time change from panel
+    const onTimePanelChange = useCallback((target) => {
+        if (!target)
+            return;
+        setTimeValue(target);
+        notifyChange(dateValue, target);
+        onRightComplete();
+    }, [dateValue, notifyChange, onRightComplete]);
+    // Document event close for calendar
     usePickerDocumentEventClose({
-        open,
         anchorRef,
-        popperRef: panelRef,
-        lastElementRefInFlow: inputRef,
+        lastElementRefInFlow: inputLeftRef,
+        onChangeClose: onClose,
         onClose,
+        open: openCalendar,
+        popperRef: calendarPanelRef,
+    });
+    // Document event close for time panel
+    usePickerDocumentEventClose({
+        anchorRef,
+        lastElementRefInFlow: inputRightRef,
         onChangeClose: onClose,
+        onClose,
+        open: openTimePanel,
+        popperRef: timePanelRef,
     });
-    /** Bind on change to on clear */
-    const onClear = () => {
-        onChange(undefined);
+    const onClear = useCallback((evt) => {
+        setDateValue(undefined);
+        setTimeValue(undefined);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(undefined);
-    };
-    /** Icon */
-    const onIconClick = (e) => {
-        e.stopPropagation();
-        if (open) {
-            onChange(valueProp);
+        onClearProp === null || onClearProp === void 0 ? void 0 : onClearProp(evt);
+    }, [onChangeProp, onClearProp]);
+    const onCalendarIconClick = useCallback(() => {
+        var _a;
+        if (readOnly || disabled)
+            return;
+        if (focusedInput) {
+            setFocusedInput(null);
+            onPanelToggle(false, null);
+        }
+        else {
+            (_a = inputLeftRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        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, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, referenceDate: referenceDate, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue })] }));
+    }, [disabled, focusedInput, onPanelToggle, readOnly]);
+    const suffix = (jsx(Icon, { "aria-label": "Open calendar", icon: CalendarTimeIcon, onClick: onCalendarIconClick }));
+    return (jsxs(Fragment, { children: [jsx(PickerTriggerWithSeparator, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, formatLeft: formatDate, formatRight: formatTime, fullWidth: fullWidth, inputLeftRef: inputLeftRef, inputRightRef: inputRightRef, onBlurLeft: () => { }, onBlurRight: () => { }, onChangeLeft: onChangeLeft, onChangeRight: onChangeRight, onClear: onClear, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onLeftComplete: onLeftComplete, onRightComplete: onRightComplete, placeholderLeft: placeholderLeft, placeholderRight: placeholderRight, prefix: prefix, readOnly: readOnly, required: required, size: size, suffix: suffix, valueLeft: displayDateValue, valueRight: displayTimeValue }), jsx(DatePickerCalendar, { ref: calendarPanelRef, anchor: anchorRef, calendarProps: calendarProps, calendarRef: calendarRef, disabledMonthSwitch: disabledMonthSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isHalfYearDisabled: isHalfYearDisabled, isMonthDisabled: isMonthDisabled, isQuarterDisabled: isQuarterDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: openCalendar, popperProps: popperProps, referenceDate: referenceDate, value: dateValue }), jsx(TimePickerPanel, { ref: timePanelRef, anchor: anchorRef, fadeProps: fadeProps, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourStep: hourStep, minuteStep: minuteStep, onChange: onTimePanelChange, open: openTimePanel, popperProps: popperPropsTime, secondStep: secondStep, value: timeValue })] }));
 });
 
 export { DateTimePicker as default };

package/DateTimePicker/index.d.ts

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

package/DateTimePicker/index.js

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

package/Drawer/Drawer.js

@@ -5,14 +5,14 @@ import SlideFadeOverlay from '../_internal/SlideFadeOverlay/SlideFadeOverlay.js'
 import cx from 'clsx';
 
 const Drawer = forwardRef((props, ref) => {
-    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, hideBackdrop, invisibleBackdrop, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
+    const { className, children, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal, onBackdropClick, onClose, open, placement = 'left', ...rest } = props;
     const slideFadeDirection = useMemo(() => ({
         top: 'down',
         left: 'right',
         right: 'left',
         bottom: 'up',
     }), []);
-    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
+    return (jsx(SlideFadeOverlay, { className: drawerClasses.overlay, container: container, direction: slideFadeDirection[placement], disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsx("div", { ...rest, className: cx(drawerClasses.host, drawerClasses[placement], className), children: children }) }));
 });
 
 export { Drawer as default };