@mezzanine-ui/react 0.16.0 → 1.0.0-beta.0

package/DateRangePicker/useDateRangePickerValue.d.ts

@@ -1,28 +1,51 @@
 import { DateType } from '@mezzanine-ui/core/calendar';
 import { RangePickerPickingValue, RangePickerValue } from '@mezzanine-ui/core/picker';
-import { ChangeEventHandler, KeyboardEventHandler } from 'react';
-import { UseRangePickerValueProps } from '../Picker/useRangePickerValue';
+import { RefObject } from 'react';
 import { DateRangePickerCalendarProps } from './DateRangePickerCalendar';
-export interface UseDateRangePickerValueProps extends Omit<UseRangePickerValueProps, 'onChange'> {
+export interface UseDateRangePickerValueProps {
+    /**
+     * The format pattern for the inputs (e.g., "YYYY-MM-DD")
+     */
+    format: string;
+    /**
+     * Function to check if there are disabled dates in the range
+     */
+    hasDisabledDateInRange?: (start: DateType, end: DateType) => boolean;
+    /**
+     * Ref for the 'from' input element
+     */
+    inputFromRef: RefObject<HTMLInputElement | null>;
+    /**
+     * Ref for the 'to' input element
+     */
+    inputToRef: RefObject<HTMLInputElement | null>;
+    /**
+     * Calendar mode
+     */
     mode?: DateRangePickerCalendarProps['mode'];
+    /**
+     * Change handler called when range is complete
+     */
     onChange?: (value?: RangePickerValue) => void;
+    /**
+     * Controlled value
+     */
+    value?: RangePickerValue;
 }
-export declare function useDateRangePickerValue({ format, formats, inputFromRef, inputToRef, mode, onChange: onChangeProp, value: valueProp, }: UseDateRangePickerValueProps): {
+export declare function useDateRangePickerValue({ format, hasDisabledDateInRange, inputFromRef: _inputFromRef, inputToRef, mode, onChange: onChangeProp, value: valueProp, }: UseDateRangePickerValueProps): {
     calendarValue: string[] | undefined;
+    checkIsInRange: (_date: DateType) => boolean;
     inputFromValue: string;
     inputToValue: string;
-    onCalendarChange: (val?: DateType) => void;
+    onCalendarChange: (rangeValue: [DateType, DateType | undefined]) => void;
     onCalendarHover: import("react").Dispatch<import("react").SetStateAction<string | undefined>> | undefined;
-    onChange: (target?: RangePickerPickingValue, callback?: {
-        from: (date?: string) => string | undefined;
-        to: (date?: string) => string | undefined;
-    }) => RangePickerPickingValue | undefined;
+    onChange: (target?: RangePickerPickingValue) => RangePickerPickingValue | undefined;
     onClear: () => void;
-    onFromBlur: import("react").FocusEventHandler<HTMLInputElement>;
-    onFromKeyDown: KeyboardEventHandler<HTMLInputElement>;
-    onInputFromChange: ChangeEventHandler<HTMLInputElement>;
-    onInputToChange: ChangeEventHandler<HTMLInputElement>;
-    onToBlur: import("react").FocusEventHandler<HTMLInputElement>;
-    onToKeyDown: KeyboardEventHandler<HTMLInputElement>;
+    onFromBlur: () => void;
+    onFromFocus: () => void;
+    onInputFromChange: (formattedValue: string) => void;
+    onInputToChange: (formattedValue: string) => void;
+    onToBlur: () => void;
+    onToFocus: () => void;
     value: RangePickerPickingValue;
 };

package/DateRangePicker/useDateRangePickerValue.js

@@ -1,46 +1,115 @@
-import { useState, useMemo } from 'react';
-import { useRangePickerValue } from '../Picker/useRangePickerValue.js';
+'use client';
+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(() => {
@@ -52,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;