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

package/DatePicker/DatePicker.d.ts

@@ -1,13 +1,24 @@
 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'> {
+export interface DatePickerProps extends Omit<DatePickerCalendarProps, 'anchor' | 'calendarRef' | 'disableOnDoubleNext' | 'disableOnDoublePrev' | 'onChange' | 'open' | 'referenceDate' | 'updateReferenceDate'>, Omit<PickerTriggerProps, 'defaultValue' | 'format' | 'inputRef' | 'onChange' | 'onClear' | 'onClick' | 'onIconClick' | 'onKeyDown' | 'value'> {
     /**
      * Default value for date picker.
      */
     defaultValue?: DateType;
+    /**
+     * Disabled "double next" button on calendar controls
+     * @default false
+     */
+    disableOnDoubleNext?: boolean;
+    /**
+     * Disabled "double prev" button on calendar controls
+     * @default false
+     */
+    disableOnDoublePrev?: boolean;
     /**
      * The format for displaying date.
+     * The length of the format must match the length of the actual generated value. For example, "gggg-wo" may cause a length mismatch when the week of year is a single digit. It is recommended to use the system's default format instead.
      */
     format?: string;
     /**

package/DatePicker/DatePicker.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { forwardRef, useCallback, useState, useMemo, useRef, useEffect } from 'react';
 import { getDefaultModeFormat } from '@mezzanine-ui/core/calendar';
 import { CalendarIcon } from '@mezzanine-ui/icons';
 import DatePickerCalendar from './DatePickerCalendar.js';
@@ -9,18 +10,46 @@ 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 { 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, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, ...restTriggerProps } = props;
+    const { getNow } = useCalendarContext();
+    const { calendarProps, className, clearable = true, defaultValue, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disableOnDoubleNext, disableOnDoublePrev, disabledYearSwitch = false, disabled = false, displayMonthLocale, error = false, errorMessages, fadeProps, format: formatProp, fullWidth = false, inputProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, isQuarterDisabled, isHalfYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, placeholder, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = false, size, value: valueProp, ...restTriggerProps } = props;
+    const format = formatProp || getDefaultModeFormat(mode);
     const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
-    const formats = useMemo(() => [format, defaultDateFormat, getDefaultModeFormat(mode)], [defaultDateFormat, format, mode]);
+    /**
+     * Validate date value against disabled constraints based on mode.
+     * Returns true if valid, false if the date is disabled.
+     */
+    const validateDate = useCallback((isoDate) => {
+        switch (mode) {
+            case 'day':
+                return !(isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(isoDate));
+            case 'week':
+                return !(isWeekDisabled === null || isWeekDisabled === void 0 ? void 0 : isWeekDisabled(isoDate));
+            case 'month':
+                return !(isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(isoDate));
+            case 'quarter':
+                return !(isQuarterDisabled === null || isQuarterDisabled === void 0 ? void 0 : isQuarterDisabled(isoDate));
+            case 'year':
+                return !(isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(isoDate));
+            case 'half-year':
+                return !(isHalfYearDisabled === null || isHalfYearDisabled === void 0 ? void 0 : isHalfYearDisabled(isoDate));
+            default:
+                return true;
+        }
+    }, [
+        isDateDisabled,
+        isHalfYearDisabled,
+        isMonthDisabled,
+        isQuarterDisabled,
+        isWeekDisabled,
+        isYearDisabled,
+        mode,
+    ]);
     /** Calender display control */
     const [open, setOpen] = useState(false);
     const preventOpen = readOnly;
@@ -48,7 +77,6 @@ const DatePicker = forwardRef(function DatePicker(props, ref) {
     const { inputValue, onBlur, onChange, onInputChange, onKeyDown, value: internalValue, } = usePickerValue({
         defaultValue,
         format,
-        formats,
         inputRef,
         value: valueProp,
     });
@@ -123,8 +151,12 @@ const DatePicker = forwardRef(function DatePicker(props, ref) {
         }
         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, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: mode, onChange: onCalendarChange, open: open, popperProps: popperProps, referenceDate: referenceDate, value: internalValue })] }));
+    const suffixActionIcon = (jsx(Icon, { "aria-label": "Open calendar", icon: CalendarIcon, onClick: readOnly ? undefined : onIconClick }));
+    return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ...restTriggerProps, ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, errorMessages: errorMessages, format: format, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: (e) => {
+                    onInputChange(e);
+                    onCalendarChange(e.target.value);
+                    onCalendarToggle(true);
+                }, onClear: onClear, onFocus: () => onCalendarToggle(true), placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: size, suffix: suffixActionIcon, validate: validateDate, value: inputValue }), jsx(DatePickerCalendar, { ref: calendarRef, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isQuarterDisabled: isQuarterDisabled, isYearDisabled: isYearDisabled, isHalfYearDisabled: isHalfYearDisabled, mode: mode, onChange: onCalendarChange, open: open, popperProps: popperProps, referenceDate: referenceDate, value: internalValue })] }));
 });
 
 export { DatePicker as default };

package/DatePicker/DatePickerCalendar.d.ts

@@ -2,11 +2,11 @@ import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
 import { RefObject } from 'react';
 import { CalendarProps } from '../Calendar';
 import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
-export interface DatePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
+export interface DatePickerCalendarProps extends Pick<InputTriggerPopperProps, 'anchor' | 'fadeProps' | 'open'>, Pick<CalendarProps, 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disableOnDoubleNext' | 'disableOnDoublePrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isQuarterDisabled' | 'isHalfYearDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'onChange' | 'referenceDate'> {
     /**
      * Other calendar props you may provide to `Calendar`.
      */
-    calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onPrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
+    calendarProps?: Omit<CalendarProps, 'disableOnNext' | 'disableOnPrev' | 'disableOnDoubleNext' | 'disableOnDoublePrev' | 'displayMonthLocale' | 'isDateDisabled' | 'isMonthDisabled' | 'isQuarterDisabled' | 'isHalfYearDisabled' | 'isWeekDisabled' | 'isYearDisabled' | 'locale' | 'mode' | 'onChange' | 'onMonthControlClick' | 'onNext' | 'onDoubleNext' | 'onPrev' | 'onDoublePrev' | 'onYearControlClick' | 'referenceDate' | 'updateReferenceDate' | 'value'>;
     /**
      * React ref for calendar component.
      */
@@ -25,8 +25,5 @@ export interface DatePickerCalendarProps extends Pick<InputTriggerPopperProps, '
      */
     value?: DateType;
 }
-/**
- * The react component for `mezzanine` date picker calendar.
- */
 declare const DatePickerCalendar: import("react").ForwardRefExoticComponent<DatePickerCalendarProps & import("react").RefAttributes<HTMLDivElement>>;
 export default DatePickerCalendar;

package/DatePicker/DatePickerCalendar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { useCalendarContext } from '../Calendar/CalendarContext.js';
@@ -5,61 +6,60 @@ import { useCalendarControls } from '../Calendar/useCalendarControls.js';
 import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
 import Calendar from '../Calendar/Calendar.js';
 
-/**
- * The react component for `mezzanine` date picker calendar.
- */
 const DatePickerCalendar = forwardRef(function DatePickerCalendar(props, ref) {
-    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getYear, setMonth, setYear, } = useCalendarContext();
-    const { anchor, calendarProps, calendarRef, disabledMonthSwitch, disableOnNext, disableOnPrev, disabledYearSwitch, displayMonthLocale = displayMonthLocaleFromConfig, fadeProps, isDateDisabled, isMonthDisabled, isWeekDisabled, isYearDisabled, mode = 'day', onChange: onChangeProp, open, popperProps, referenceDate: referenceDateProp, value, } = props;
+    const { locale, getMonth, getYear, setMonth, setYear } = useCalendarContext();
+    const { anchor, calendarProps, calendarRef, disabledMonthSwitch, disableOnNext, disableOnPrev, disableOnDoubleNext, disableOnDoublePrev, disabledYearSwitch, displayMonthLocale = locale, fadeProps, isDateDisabled, isMonthDisabled, isQuarterDisabled, isHalfYearDisabled, isWeekDisabled, isYearDisabled, mode = 'day', onChange: onChangeProp, open, popperProps, referenceDate: referenceDateProp, value, } = props;
     const { className: calendarClassName, ...restCalendarProps } = calendarProps || {};
-    const { currentMode, onMonthControlClick, onNext, onPrev, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
-    const onChange = useMemo(() => {
-        if (currentMode === 'day' || currentMode === 'week') {
-            return (target) => {
-                updateReferenceDate(target);
-                popModeStack();
-                if (onChangeProp) {
-                    onChangeProp(target);
-                }
-            };
-        }
-        if (currentMode === 'month') {
-            return (target) => {
-                const result = currentMode === mode
-                    ? target
-                    : setMonth(referenceDate, getMonth(target));
-                updateReferenceDate(result);
-                popModeStack();
-                if (currentMode === mode && onChangeProp) {
-                    onChangeProp(result);
-                }
-            };
-        }
-        if (currentMode === 'year') {
+    const { currentMode, onMonthControlClick, onNext, onPrev, onDoublePrev, onDoubleNext, onYearControlClick, popModeStack, referenceDate, updateReferenceDate, } = useCalendarControls(referenceDateProp, mode);
+    // Helper to handle mode switching with optional value transformation
+    const createModeChangeHandler = useMemo(() => {
+        return (transformValue) => {
             return (target) => {
-                const result = currentMode === mode
-                    ? target
-                    : setYear(referenceDate, getYear(target));
+                const result = transformValue
+                    ? transformValue(target, referenceDate)
+                    : target;
                 updateReferenceDate(result);
                 popModeStack();
                 if (currentMode === mode && onChangeProp) {
                     onChangeProp(result);
                 }
             };
-        }
+        };
     }, [
         currentMode,
+        mode,
         referenceDate,
         updateReferenceDate,
         popModeStack,
-        mode,
         onChangeProp,
-        setMonth,
+    ]);
+    const onChange = useMemo(() => {
+        switch (currentMode) {
+            case 'day':
+            case 'week':
+                return createModeChangeHandler();
+            case 'month':
+                return createModeChangeHandler((target, reference) => currentMode === mode
+                    ? target
+                    : setMonth(reference, getMonth(target)));
+            case 'year':
+                return createModeChangeHandler((target, reference) => currentMode === mode ? target : setYear(reference, getYear(target)));
+            case 'quarter':
+            case 'half-year':
+                return createModeChangeHandler();
+            default:
+                return undefined;
+        }
+    }, [
+        currentMode,
+        mode,
+        createModeChangeHandler,
         getMonth,
-        setYear,
+        setMonth,
         getYear,
+        setYear,
     ]);
-    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(Calendar, { ...restCalendarProps, ref: calendarRef, className: calendarClassName, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onPrev: onPrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value }) }));
+    return (jsx(InputTriggerPopper, { ...popperProps, ref: ref, anchor: anchor, open: open, fadeProps: fadeProps, children: jsx(Calendar, { ...restCalendarProps, ref: calendarRef, className: calendarClassName, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, isDateDisabled: isDateDisabled, isMonthDisabled: isMonthDisabled, isQuarterDisabled: isQuarterDisabled, isHalfYearDisabled: isHalfYearDisabled, isWeekDisabled: isWeekDisabled, isYearDisabled: isYearDisabled, mode: currentMode, onChange: onChange, onMonthControlClick: onMonthControlClick, onNext: onNext, onDoubleNext: onDoubleNext, onPrev: onPrev, onDoublePrev: onDoublePrev, onYearControlClick: onYearControlClick, referenceDate: referenceDate, value: value }) }));
 });
 
 export { DatePickerCalendar as default };

package/DatePicker/index.d.ts

@@ -1,2 +1,4 @@
-export { DatePickerCalendarProps, default as DatePickerCalendar, } from './DatePickerCalendar';
-export { DatePickerProps, default } from './DatePicker';
+export { default as DatePickerCalendar } from './DatePickerCalendar';
+export type { DatePickerCalendarProps } from './DatePickerCalendar';
+export type { DatePickerProps } from './DatePicker';
+export { default } from './DatePicker';

package/DateRangePicker/DateRangePicker.d.ts

@@ -1,8 +1,24 @@
 import { DateType } from '@mezzanine-ui/core/calendar';
 import { RangePickerValue } from '@mezzanine-ui/core/picker';
+import { CalendarFooterActionsProps } from '../Calendar/CalendarFooterActions';
 import { DateRangePickerCalendarProps } from './DateRangePickerCalendar';
 import { RangePickerTriggerProps } from '../Picker';
-export interface DateRangePickerProps extends Pick<DateRangePickerCalendarProps, 'calendarProps' | 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'fadeProps' | 'mode' | 'popperProps' | 'isDateDisabled' | 'isWeekDisabled' | 'isMonthDisabled' | 'isYearDisabled'>, Pick<RangePickerTriggerProps, 'className' | 'clearable' | 'disabled' | 'error' | 'fullWidth' | 'inputFromPlaceholder' | 'inputFromProps' | 'inputToPlaceholder' | 'inputToProps' | 'prefix' | 'readOnly' | 'required' | 'size'> {
+export interface DateRangePickerProps extends Pick<DateRangePickerCalendarProps, 'calendarProps' | 'disabledMonthSwitch' | 'disableOnNext' | 'disableOnPrev' | 'disableOnDoubleNext' | 'disableOnDoublePrev' | 'disabledYearSwitch' | 'displayMonthLocale' | 'displayWeekDayLocale' | 'fadeProps' | 'firstCalendarRef' | 'isDateDisabled' | 'isWeekDisabled' | 'isMonthDisabled' | 'isYearDisabled' | 'isQuarterDisabled' | 'isHalfYearDisabled' | 'mode' | 'popperProps' | 'quickSelect' | 'renderAnnotations' | 'secondCalendarRef'>, Pick<RangePickerTriggerProps, 'className' | 'clearable' | 'disabled' | 'error' | 'errorMessagesFrom' | 'errorMessagesTo' | 'fullWidth' | 'inputFromPlaceholder' | 'inputFromProps' | 'inputToPlaceholder' | 'inputToProps' | 'prefix' | 'readOnly' | 'required' | 'size' | 'validateFrom' | 'validateTo'> {
+    /**
+     * Footer action buttons props.
+     * When provided, the calendar will NOT auto-close after range selection.
+     * This allows users to interact with the action buttons before confirming.
+     */
+    actions?: CalendarFooterActionsProps['actions'];
+    /**
+     * The confirm mode for date range selection.
+     * - `'immediate'` (default): onChange is triggered immediately after selecting both dates,
+     *   and calendar auto-closes (unless actions prop is provided).
+     * - `'manual'`: onChange is triggered only when user clicks the confirm button.
+     *   Default actions (Confirm/Cancel) will be auto-generated if not provided.
+     * @default 'immediate'
+     */
+    confirmMode?: 'immediate' | 'manual';
     /**
      * Default value for date range picker.
      */
@@ -31,7 +47,7 @@ export interface DateRangePickerProps extends Pick<DateRangePickerCalendarProps,
 }
 /**
  * The react component for `mezzanine` date range picker.
- * Notice that any component related to date-range-picker should be used along with `CalendarContext`. <br />
+ * Notice that any component related to date-range-picker should be used along with `CalendarContext`.
  */
 declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLDivElement>>;
 export default DateRangePicker;

package/DateRangePicker/DateRangePicker.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { forwardRef, useCallback, useState, useRef, useEffect, useMemo } from 'react';
 import { getDefaultModeFormat } from '@mezzanine-ui/core/calendar';
 import { CalendarIcon } from '@mezzanine-ui/icons';
 import DateRangePickerCalendar from './DateRangePickerCalendar.js';
@@ -9,23 +10,68 @@ import { useCalendarContext } from '../Calendar/CalendarContext.js';
 import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
 import Icon from '../Icon/Icon.js';
 import RangePickerTrigger from '../Picker/RangePickerTrigger.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
 
 /**
  * The react component for `mezzanine` date range picker.
- * Notice that any component related to date-range-picker should be used along with `CalendarContext`. <br />
+ * Notice that any component related to date-range-picker should be used along with `CalendarContext`.
  */
 const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { defaultDateFormat, getNow, isBetween } = useCalendarContext();
-    const { calendarProps, className, clearable = true, defaultValue, disabledMonthSwitch = false, disableOnNext, disableOnPrev, disabledYearSwitch = false, disabled = disabledFromFormControl || false, displayMonthLocale, error = severity === 'error' || false, fadeProps, format = defaultDateFormat, fullWidth = fullWidthFromFormControl || false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, isWeekDisabled, isMonthDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, popperProps, prefix, readOnly, referenceDate: referenceDateProp, required = requiredFromFormControl || false, size, value: valueProp, } = props;
-    const { onBlur: onFromBlurProp, onKeyDown: onFromKeyDownProp, onFocus: onFromFocusProp, ...restInputFromProps } = inputFromProps || {};
-    const { onBlur: onToBlurProp, onKeyDown: onToKeyDownProp, onFocus: onToFocusProp, ...restInputToProps } = inputToProps || {};
-    const formats = useMemo(() => [format, defaultDateFormat, getDefaultModeFormat(mode)], [defaultDateFormat, format, mode]);
+    const { addDay, getNow, isBefore, isBetween } = useCalendarContext();
+    const { actions: actionsProp, calendarProps, className, clearable = true, confirmMode = 'immediate', defaultValue, disabledMonthSwitch = false, disableOnDoubleNext, disableOnDoublePrev, disableOnNext, disableOnPrev, disabled = false, disabledYearSwitch = false, displayMonthLocale, displayWeekDayLocale, error = false, errorMessagesFrom, errorMessagesTo, fadeProps, firstCalendarRef, format: formatProp, fullWidth = false, inputFromPlaceholder, inputFromProps, inputToPlaceholder, inputToProps, isDateDisabled, isHalfYearDisabled, isMonthDisabled, isQuarterDisabled, isWeekDisabled, isYearDisabled, mode = 'day', onCalendarToggle: onCalendarToggleProp, onChange: onChangeProp, popperProps, prefix, quickSelect, readOnly, referenceDate: referenceDateProp, renderAnnotations, required = false, secondCalendarRef, size, validateFrom, validateTo, value: valueProp, } = props;
+    const format = formatProp || getDefaultModeFormat(mode);
     function isBetweenRange(valueToCheck, t1, t2, granularity) {
         return (isBetween(valueToCheck, t1, t2, granularity) ||
             isBetween(valueToCheck, t2, t1, granularity));
     }
+    /** Check if there are disabled dates in the range */
+    const hasDisabledDateInRange = useCallback((start, end) => {
+        var _a, _b, _c, _d, _e, _f;
+        const [rangeStart, rangeEnd] = isBefore(start, end)
+            ? [start, end]
+            : [end, start];
+        let current = rangeStart;
+        while (isBefore(current, rangeEnd) || current === rangeEnd) {
+            let isDisabled = false;
+            switch (mode) {
+                case 'day':
+                    isDisabled = (_a = isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(current)) !== null && _a !== void 0 ? _a : false;
+                    break;
+                case 'week':
+                    isDisabled = (_b = isWeekDisabled === null || isWeekDisabled === void 0 ? void 0 : isWeekDisabled(current)) !== null && _b !== void 0 ? _b : false;
+                    break;
+                case 'month':
+                    isDisabled = (_c = isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(current)) !== null && _c !== void 0 ? _c : false;
+                    break;
+                case 'year':
+                    isDisabled = (_d = isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(current)) !== null && _d !== void 0 ? _d : false;
+                    break;
+                case 'quarter':
+                    isDisabled = (_e = isQuarterDisabled === null || isQuarterDisabled === void 0 ? void 0 : isQuarterDisabled(current)) !== null && _e !== void 0 ? _e : false;
+                    break;
+                case 'half-year':
+                    isDisabled = (_f = isHalfYearDisabled === null || isHalfYearDisabled === void 0 ? void 0 : isHalfYearDisabled(current)) !== null && _f !== void 0 ? _f : false;
+                    break;
+            }
+            if (isDisabled) {
+                return true;
+            }
+            current = addDay(current, 1);
+            if (isBefore(rangeEnd, current)) {
+                break;
+            }
+        }
+        return false;
+    }, [
+        addDay,
+        isBefore,
+        mode,
+        isDateDisabled,
+        isWeekDisabled,
+        isMonthDisabled,
+        isYearDisabled,
+        isQuarterDisabled,
+        isHalfYearDisabled,
+    ]);
     /** Using internal reference date */
     const [referenceDate, updateReferenceDate] = useState(referenceDateProp || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue[0]) || getNow());
     /** Calendar panel toggle */
@@ -34,35 +80,24 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
     const onCalendarToggle = useCallback((currentOpen) => {
         if (!preventOpen) {
             setOpen(currentOpen);
-            if (onCalendarToggleProp) {
-                onCalendarToggleProp(currentOpen);
-            }
+            onCalendarToggleProp === null || onCalendarToggleProp === void 0 ? void 0 : onCalendarToggleProp(currentOpen);
         }
     }, [onCalendarToggleProp, preventOpen]);
-    const onFromFocus = useCallback((event) => {
-        if (onFromFocusProp) {
-            onFromFocusProp(event);
-        }
-        onCalendarToggle(true);
-    }, [onCalendarToggle, onFromFocusProp]);
-    const onToFocus = useCallback((event) => {
-        if (onToFocusProp) {
-            onToFocusProp(event);
-        }
-        onCalendarToggle(true);
-    }, [onCalendarToggle, onToFocusProp]);
     /** Values and onChange */
     const inputToRef = useRef(null);
     const inputFromRef = useRef(null);
-    const { calendarValue, inputFromValue, inputToValue, onCalendarChange, onCalendarHover, onChange, onClear, onFromBlur, onFromKeyDown, onInputFromChange, onInputToChange, onToBlur, onToKeyDown, value: internalValue, } = useDateRangePickerValue({
+    // In manual mode, don't pass onChange to hook - we'll handle it via confirm button
+    const shouldTriggerOnChangeImmediately = confirmMode === 'immediate' && !actionsProp;
+    const { calendarValue, checkIsInRange, inputFromValue, inputToValue, onCalendarChange, onCalendarHover, onChange, onClear, onFromBlur, onFromFocus, onInputFromChange, onInputToChange, onToBlur, onToFocus, value: internalValue, } = useDateRangePickerValue({
         format,
-        formats,
-        value: valueProp,
+        hasDisabledDateInRange,
         inputFromRef,
         inputToRef,
         mode,
-        onChange: onChangeProp,
+        onChange: shouldTriggerOnChangeImmediately ? onChangeProp : undefined,
+        value: valueProp,
     });
+    // Update reference date when internal value changes
     useEffect(() => {
         const [from, to] = internalValue;
         if (from) {
@@ -75,112 +110,120 @@ const DateRangePicker = forwardRef(function DateRangePicker(props, ref) {
     /** Bind calendar open control to handlers */
     const onCalendarChangeWithCloseControl = useCallback((val) => {
         onCalendarChange(val);
-        const [from, to] = internalValue;
-        const hasFirstValue = (from && !to) || (to && !from);
-        if (hasFirstValue && val) {
+        // Close panel when range is complete (only if auto-close is enabled)
+        // Auto-close is disabled when actions are provided or in manual mode
+        if (val[0] && val[1] && shouldTriggerOnChangeImmediately) {
             onCalendarToggle(false);
         }
-    }, [internalValue, onCalendarChange, onCalendarToggle]);
-    const onFromKeyDownWithCloseControl = useCallback((event) => {
-        onFromKeyDown(event);
+    }, [onCalendarChange, onCalendarToggle, shouldTriggerOnChangeImmediately]);
+    /** Handle confirm action (for manual mode) */
+    const onConfirm = useCallback(() => {
         const [from, to] = internalValue;
-        if (event.key === 'Enter' && from && to) {
-            onCalendarToggle(false);
+        if (from && to) {
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, to]);
+            // Sync internal state and reset isSelecting
+            onChange([from, to]);
         }
-    }, [internalValue, onCalendarToggle, onFromKeyDown]);
-    const onToKeyDownWithCloseControl = useCallback((event) => {
-        onToKeyDown(event);
-        const [from, to] = internalValue;
-        if (event.key === 'Enter' && from && to) {
-            onCalendarToggle(false);
+        onCalendarToggle(false);
+    }, [internalValue, onChange, onChangeProp, onCalendarToggle]);
+    /** Handle cancel action (for manual mode) */
+    const onCancel = useCallback(() => {
+        onChange(valueProp);
+        onCalendarToggle(false);
+    }, [onChange, onCalendarToggle, valueProp]);
+    /** Auto-generated actions for manual mode */
+    const actions = useMemo(() => {
+        // In manual mode, auto-generate actions
+        if (confirmMode === 'manual') {
+            const [from, to] = internalValue;
+            const isRangeComplete = Boolean(from && to);
+            return {
+                primaryButtonProps: {
+                    children: 'Confirm',
+                    disabled: !isRangeComplete,
+                    onClick: onConfirm,
+                    ...actionsProp === null || actionsProp === void 0 ? void 0 : actionsProp.primaryButtonProps,
+                },
+                secondaryButtonProps: {
+                    children: 'Cancel',
+                    onClick: onCancel,
+                    ...actionsProp === null || actionsProp === void 0 ? void 0 : actionsProp.secondaryButtonProps,
+                },
+            };
         }
-    }, [internalValue, onCalendarToggle, onToKeyDown]);
+        if (actionsProp) {
+            return actionsProp;
+        }
+        return undefined;
+    }, [actionsProp, confirmMode, internalValue, onConfirm, onCancel]);
     /** Calendar cell in range checker */
     const getIsInRangeHandler = (granularity) => {
         const [anchor1, anchor2] = calendarValue || [];
-        return anchor1 && anchor2
-            ? (date) => isBetweenRange(date, anchor1, anchor2, granularity)
-            : undefined;
+        // If no range or disabled dates exist in range, return undefined
+        if (!anchor1 || !anchor2 || !checkIsInRange(anchor2)) {
+            return undefined;
+        }
+        return (date) => isBetweenRange(date, anchor1, anchor2, granularity);
     };
     /** Popper settings */
     const anchorRef = useRef(null);
     const calendarRef = useRef(null);
     const triggerComposedRef = useComposeRefs([anchorRef, ref]);
-    /** Resolve input props */
-    const onResolvedFromBlur = useCallback((event) => {
-        if (onFromBlurProp) {
-            onFromBlurProp(event);
-        }
-        onFromBlur(event);
-    }, [onFromBlur, onFromBlurProp]);
-    const onResolvedToBlur = useCallback((event) => {
-        if (onToBlurProp) {
-            onToBlurProp(event);
-        }
-        onToBlur(event);
-    }, [onToBlur, onToBlurProp]);
-    const onResolvedFromKeyDown = useCallback((event) => {
-        if (onFromKeyDownProp) {
-            onFromKeyDownProp(event);
-        }
-        onFromKeyDownWithCloseControl(event);
-    }, [onFromKeyDownProp, onFromKeyDownWithCloseControl]);
-    const onResolvedToKeyDown = useCallback((event) => {
-        if (onToKeyDownProp) {
-            onToKeyDownProp(event);
-        }
-        onToKeyDownWithCloseControl(event);
-    }, [onToKeyDownProp, onToKeyDownWithCloseControl]);
-    const resolvedInputFromProps = {
-        ...restInputFromProps,
-        onFocus: onFromFocus,
-        onKeyDown: onResolvedFromKeyDown,
-        onBlur: onResolvedFromBlur,
-        size: format.length + 2,
-    };
-    const resolvedInputToProps = {
-        ...restInputToProps,
-        onFocus: onToFocus,
-        onKeyDown: onResolvedToKeyDown,
-        onBlur: onResolvedToBlur,
-        size: format.length + 2,
-    };
+    /** Input focus handlers */
+    const onFromFocusHandler = useCallback((_event) => {
+        onFromFocus();
+        onCalendarToggle(true);
+    }, [onCalendarToggle, onFromFocus]);
+    const onToFocusHandler = useCallback((_event) => {
+        onToFocus();
+        onCalendarToggle(true);
+    }, [onCalendarToggle, onToFocus]);
     /** Blur, click away and key down close */
-    const onClose = () => {
+    const onClose = useCallback(() => {
         onChange(valueProp);
         onCalendarToggle(false);
-    };
-    const onChangeClose = () => {
+    }, [onChange, onCalendarToggle, valueProp]);
+    const onChangeClose = useCallback(() => {
+        // In manual mode, always restore to valueProp (don't auto-submit on click-away)
+        if (confirmMode === 'manual') {
+            onChange(valueProp);
+            onCalendarToggle(false);
+            return;
+        }
         const [from, to] = internalValue;
         if (from && to) {
-            const newValue = onChange([from, to]);
-            if (onChangeProp) {
-                onChangeProp(newValue);
-            }
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([from, to]);
         }
         else {
             onChange(valueProp);
         }
         onCalendarToggle(false);
-    };
+    }, [
+        confirmMode,
+        internalValue,
+        onChange,
+        onCalendarToggle,
+        onChangeProp,
+        valueProp,
+    ]);
     usePickerDocumentEventClose({
-        open,
         anchorRef,
-        popperRef: calendarRef,
         lastElementRefInFlow: inputToRef,
-        onClose,
         onChangeClose,
+        onClose,
+        open,
+        popperRef: calendarRef,
     });
-    /** Icon */
-    const onIconClick = (e) => {
+    /** Icon click handler */
+    const onIconClick = useCallback((e) => {
         e.stopPropagation();
         if (open) {
             onChange(valueProp);
         }
         onCalendarToggle(!open);
-    };
+    }, [onChange, onCalendarToggle, open, valueProp]);
     const suffixActionIcon = jsx(Icon, { icon: CalendarIcon, onClick: onIconClick });
-    return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: resolvedInputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: resolvedInputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClear, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, prefix: prefix, readOnly: readOnly, required: required, size: size, suffixActionIcon: suffixActionIcon }), jsx(DateRangePickerCalendar, { ref: calendarRef, open: open, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disabledYearSwitch: disabledYearSwitch, displayMonthLocale: displayMonthLocale, fadeProps: fadeProps, isDateDisabled: isDateDisabled, isDateInRange: getIsInRangeHandler('date'), isMonthDisabled: isMonthDisabled, isMonthInRange: getIsInRangeHandler('month'), isWeekDisabled: isWeekDisabled, isWeekInRange: getIsInRangeHandler('week'), isYearDisabled: isYearDisabled, isYearInRange: getIsInRangeHandler('year'), mode: mode, onChange: onCalendarChangeWithCloseControl, onDateHover: onCalendarHover, onWeekHover: onCalendarHover, onMonthHover: onCalendarHover, onYearHover: onCalendarHover, popperProps: popperProps, referenceDate: referenceDate, value: calendarValue })] }));
+    return (jsxs(Fragment, { children: [jsx(RangePickerTrigger, { className: className, clearable: clearable, disabled: disabled, error: error, errorMessagesFrom: errorMessagesFrom, errorMessagesTo: errorMessagesTo, format: format, fullWidth: fullWidth, inputFromPlaceholder: inputFromPlaceholder, inputFromProps: inputFromProps, inputFromRef: inputFromRef, inputFromValue: inputFromValue, inputToPlaceholder: inputToPlaceholder, inputToProps: inputToProps, inputToRef: inputToRef, inputToValue: inputToValue, onClear: onClear, onFromBlur: onFromBlur, onFromFocus: onFromFocusHandler, onInputFromChange: onInputFromChange, onInputToChange: onInputToChange, onToBlur: onToBlur, onToFocus: onToFocusHandler, prefix: prefix, readOnly: readOnly, ref: triggerComposedRef, required: required, size: size, suffixActionIcon: suffixActionIcon, validateFrom: validateFrom, validateTo: validateTo }), jsx(DateRangePickerCalendar, { actions: actions, anchor: anchorRef, calendarProps: calendarProps, disabledMonthSwitch: disabledMonthSwitch, disabledYearSwitch: disabledYearSwitch, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, displayMonthLocale: displayMonthLocale, displayWeekDayLocale: displayWeekDayLocale, fadeProps: fadeProps, firstCalendarRef: firstCalendarRef, isDateDisabled: isDateDisabled, isDateInRange: getIsInRangeHandler('date'), isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: getIsInRangeHandler('half-year'), isMonthDisabled: isMonthDisabled, isMonthInRange: getIsInRangeHandler('month'), isQuarterDisabled: isQuarterDisabled, isQuarterInRange: getIsInRangeHandler('quarter'), isWeekDisabled: isWeekDisabled, isWeekInRange: getIsInRangeHandler('week'), isYearDisabled: isYearDisabled, isYearInRange: getIsInRangeHandler('year'), mode: mode, onChange: onCalendarChangeWithCloseControl, onDateHover: onCalendarHover, onHalfYearHover: onCalendarHover, onMonthHover: onCalendarHover, onQuarterHover: onCalendarHover, onWeekHover: onCalendarHover, onYearHover: onCalendarHover, open: open, popperProps: popperProps, quickSelect: quickSelect, ref: calendarRef, referenceDate: referenceDate, renderAnnotations: renderAnnotations, secondCalendarRef: secondCalendarRef, value: calendarValue })] }));
 });
 
 export { DateRangePicker as default };