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

package/Checkbox/typings.d.ts

@@ -0,0 +1,37 @@
+import { CheckboxMode } from '@mezzanine-ui/core/checkbox';
+import { JSXElementConstructor } from 'react';
+export type CheckboxComponent = 'label' | JSXElementConstructor<any>;
+export interface CheckboxPropsBase {
+    /**
+     * Whether the checkbox is checked.
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is checked by default.
+     * Only used for uncontrolled.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The description text displayed below the label.
+     */
+    description?: string;
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the checkbox is in indeterminate state.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * The label text displayed beside the checkbox.
+     */
+    label?: string;
+    /**
+     * The mode of checkbox.
+     * @default 'main'
+     */
+    mode?: CheckboxMode;
+}

package/ClearActions/ClearActions.d.ts

@@ -0,0 +1,41 @@
+import { ClearActionsEmbeddedVariant, ClearActionsStandardVariant } from '@mezzanine-ui/core/clear-actions';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+type ClearActionsCommonProps = Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'onClick' | 'type'> & {
+    /**
+     * Called when user clicks or activates the button (via mouse or keyboard).
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+type ClearActionsStandardProps = ClearActionsCommonProps & {
+    /**
+     * Clear Actions Contextual type.
+     * @default 'standard'
+     */
+    type?: 'standard';
+    /**
+     * Visual variant for standard type.
+     */
+    variant?: ClearActionsStandardVariant;
+};
+type ClearActionsEmbeddedProps = ClearActionsCommonProps & {
+    /**
+     * Clear Actions Contextual type.
+     */
+    type: 'embedded';
+    /**
+     * Visual variant for embedded type.
+     */
+    variant?: ClearActionsEmbeddedVariant;
+};
+type ClearActionsClearableProps = ClearActionsCommonProps & {
+    /**
+     * Clear Actions Contextual type.
+     */
+    type: 'clearable';
+};
+export type ClearActionsProps = ClearActionsEmbeddedProps | ClearActionsStandardProps | ClearActionsClearableProps;
+/**
+ * Mezzanine clear actions button.
+ */
+declare const ClearActions: import("react").ForwardRefExoticComponent<ClearActionsProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default ClearActions;

package/ClearActions/ClearActions.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DangerousFilledIcon, CloseIcon } from '@mezzanine-ui/icons';
+import { clearActionsClasses } from '@mezzanine-ui/core/clear-actions';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * Mezzanine clear actions button.
+ */
+const ClearActions = forwardRef(function ClearActions(props, ref) {
+    const { className, onClick, type = 'standard', ...rest } = props;
+    const variant = 'variant' in props ? props.variant : undefined;
+    const resolvedVariant = type === 'clearable'
+        ? 'default'
+        : variant !== null && variant !== void 0 ? variant : (type === 'standard' ? 'base' : 'contrast');
+    return (jsx("button", { ...rest, ref: ref, "aria-label": "Close", className: cx(clearActionsClasses.host, clearActionsClasses.type(type), clearActionsClasses.variant(resolvedVariant), className), onClick: onClick, type: "button", children: type === 'clearable'
+            ? jsx(Icon, { className: clearActionsClasses.icon, icon: DangerousFilledIcon })
+            : jsx(Icon, { className: clearActionsClasses.icon, icon: CloseIcon }) }));
+});
+
+export { ClearActions as default };

package/ClearActions/index.d.ts

@@ -0,0 +1,3 @@
+import ClearActions from './ClearActions';
+export type { ClearActionsProps } from './ClearActions';
+export default ClearActions;

package/ClearActions/index.js

@@ -0,0 +1,5 @@
+import ClearActions from './ClearActions.js';
+
+
+
+export { ClearActions as default };

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,11 +1,10 @@
 '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';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
 import { useCalendarContext } from '../Calendar/CalendarContext.js';
 import { usePickerValue } from '../Picker/usePickerValue.js';
 import { usePickerDocumentEventClose } from '../Picker/usePickerDocumentEventClose.js';
@@ -17,11 +16,40 @@ import PickerTrigger from '../Picker/PickerTrigger.js';
  * 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;
@@ -49,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,
     });
@@ -124,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

@@ -6,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/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;