@mui/x-date-pickers-pro 7.0.0-alpha.8 → 7.0.0-beta.0

package/DateRangeCalendar/DateRangeCalendar.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone"],
+const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -12,7 +12,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
 import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { applyDefaultDate, DAY_MARGIN, DayCalendar, useDefaultReduceAnimations, PickersArrowSwitcher, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, PickersArrowSwitcher, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internals/utils/date-utils';
@@ -21,6 +21,7 @@ import { DateRangePickerDay, dateRangePickerDayClasses as dayClasses } from '../
 import { rangeValueManager } from '../internals/utils/valueManagers';
 import { useDragRange } from './useDragRange';
 import { useRangePosition } from '../internals/hooks/useRangePosition';
+import { DAY_RANGE_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
@@ -49,7 +50,6 @@ const DateRangeCalendarArrowSwitcher = styled(PickersArrowSwitcher)({
   alignItems: 'center',
   justifyContent: 'space-between'
 });
-const DAY_RANGE_SIZE = 40;
 const weeksContainerHeight = (DAY_RANGE_SIZE + DAY_MARGIN * 2) * 6;
 const warnInvalidCurrentMonthCalendarPosition = buildWarning(['The `currentMonthCalendarPosition` prop must be an integer between `1` and the amount of calendars rendered.', 'For example if you have 2 calendars rendered, it should be equal to either 1 or 2.']);
 const DayCalendarForRange = styled(DayCalendar)(({
@@ -75,7 +75,7 @@ const DayCalendarForRange = styled(DayCalendar)(({
   }
 }));
 function useDateRangeCalendarDefaultizedProps(props, name) {
-  var _themeProps$renderLoa, _themeProps$reduceAni, _props$loading, _props$disablePast, _props$disableFuture, _themeProps$calendars, _themeProps$disableDr;
+  var _themeProps$renderLoa, _themeProps$reduceAni, _props$loading, _props$disablePast, _props$disableFuture, _themeProps$openTo, _themeProps$views, _themeProps$calendars, _themeProps$disableDr, _themeProps$available;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
   const defaultReduceAnimations = useDefaultReduceAnimations();
@@ -91,10 +91,13 @@ function useDateRangeCalendarDefaultizedProps(props, name) {
     loading: (_props$loading = props.loading) != null ? _props$loading : false,
     disablePast: (_props$disablePast = props.disablePast) != null ? _props$disablePast : false,
     disableFuture: (_props$disableFuture = props.disableFuture) != null ? _props$disableFuture : false,
+    openTo: (_themeProps$openTo = themeProps.openTo) != null ? _themeProps$openTo : 'day',
+    views: (_themeProps$views = themeProps.views) != null ? _themeProps$views : ['day'],
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
     calendars: (_themeProps$calendars = themeProps.calendars) != null ? _themeProps$calendars : 2,
-    disableDragEditing: (_themeProps$disableDr = themeProps.disableDragEditing) != null ? _themeProps$disableDr : false
+    disableDragEditing: (_themeProps$disableDr = themeProps.disableDragEditing) != null ? _themeProps$disableDr : false,
+    availableRangePositions: (_themeProps$available = themeProps.availableRangePositions) != null ? _themeProps$available : ['start', 'end']
   });
 }
 const useUtilityClasses = ownerState => {
@@ -157,7 +160,12 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       fixedWeekNumber,
       disableDragEditing,
       displayWeekNumber,
-      timezone: timezoneProp
+      timezone: timezoneProp,
+      availableRangePositions,
+      views,
+      view: inView,
+      openTo,
+      onViewChange
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
@@ -172,6 +180,17 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     onChange,
     valueManager: rangeValueManager
   });
+  const {
+    setValueAndGoToNextView,
+    view
+  } = useViews({
+    view: inView,
+    views,
+    openTo,
+    onChange: handleValueChange,
+    onViewChange,
+    autoFocus
+  });
   const utils = useUtils();
   const localeText = useLocaleText();
   const now = useNow(timezone);
@@ -197,11 +216,15 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       utils,
       range: value,
       rangePosition,
-      allowRangeFlip
+      allowRangeFlip,
+      shouldMergeDateAndTime: true
     });
-    onRangePositionChange(nextSelection);
+    const isNextSectionAvailable = availableRangePositions.includes(nextSelection);
+    if (isNextSectionAvailable) {
+      onRangePositionChange(nextSelection);
+    }
     const isFullRangeSelected = rangePosition === 'end' && isRangeValid(utils, newRange);
-    handleValueChange(newRange, isFullRangeSelected ? 'finish' : 'partial');
+    setValueAndGoToNextView(newRange, isFullRangeSelected || !isNextSectionAvailable ? 'finish' : 'partial', view);
   });
   const handleDrop = useEventCallback(newDate => {
     handleSelectedDayChange(newDate, undefined, true);
@@ -498,6 +521,14 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
+  /**
+   * Range positions available for selection.
+   * This list is checked against when checking if a next range position can be selected.
+   *
+   * Used on Date Time Range pickers with current `rangePosition` to force a `finish` selection after just one range position selection.
+   * @default ['start', 'end']
+   */
+  availableRangePositions: PropTypes.arrayOf(PropTypes.oneOf(['end', 'start']).isRequired),
   /**
    * The number of calendars to render.
    * @default 2
@@ -568,6 +599,10 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @default undefined
    */
   fixedWeekNumber: PropTypes.number,
+  /**
+   * Controlled focused view.
+   */
+  focusedView: PropTypes.oneOf(['day']),
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.
@@ -584,11 +619,20 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   minDate: PropTypes.any,
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {DateRange<TDate>} value The new value.
-   * @param {PickerSelectionState | undefined} selectionState Indicates if the date range selection is complete.
+   * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
+   * @template TView The view type. Will be one of date or time views.
+   * @param {TValue} value The new value.
+   * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: PropTypes.func,
+  /**
+   * Callback fired on focused view change.
+   * @template TView
+   * @param {TView} view The new view to focus or not.
+   * @param {boolean} hasFocus `true` if the view should be focused.
+   */
+  onFocusedViewChange: PropTypes.func,
   /**
    * Callback fired on month change.
    * @template TDate
@@ -600,6 +644,18 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * @param {RangePosition} rangePosition The new range position.
    */
   onRangePositionChange: PropTypes.func,
+  /**
+   * Callback fired on view change.
+   * @template TView
+   * @param {TView} view The new view.
+   */
+  onViewChange: PropTypes.func,
+  /**
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
+   */
+  openTo: PropTypes.oneOf(['day']),
   /**
    * The position in the currently edited date range.
    * Used when the component position is controlled.
@@ -674,6 +730,16 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
+   */
+  view: PropTypes.oneOf(['day']),
+  /**
+   * Available views.
+   */
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day']))
 } : void 0;
 export { DateRangeCalendar };

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -4,7 +4,7 @@ import { SlotComponentProps } from '@mui/base/utils';
 import { Theme } from '@mui/material/styles';
 import { TimezoneProps } from '@mui/x-date-pickers/models';
 import { PickersCalendarHeader, PickersCalendarHeaderProps, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, PickerSelectionState, DayCalendarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
+import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, DayCalendarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
 import { DayRangeValidationProps } from '../internals/models';
 import { DateRange } from '../models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
@@ -32,7 +32,7 @@ export interface DateRangeCalendarSlotProps<TDate> extends PickersArrowSwitcherS
         selected: boolean;
     }>;
 }
-export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalendarProps<TDate>, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate>, TimezoneProps, Pick<ExportedUseViewsOptions<'day'>, 'autoFocus'> {
+export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalendarProps<TDate>, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate>, TimezoneProps {
     /**
      * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
      * @default false
@@ -59,11 +59,6 @@ export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalend
      * @param {TDate} month The new month.
      */
     onMonthChange?: (month: TDate) => void;
-    /**
-     * The number of calendars to render.
-     * @default 2
-     */
-    calendars?: 1 | 2 | 3;
     /**
      * Position the current month is rendered in.
      * @default 1
@@ -75,7 +70,7 @@ export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalend
      */
     disableDragEditing?: boolean;
 }
-export interface DateRangeCalendarProps<TDate> extends ExportedDateRangeCalendarProps<TDate>, UseRangePositionProps {
+export interface DateRangeCalendarProps<TDate> extends ExportedDateRangeCalendarProps<TDate>, UseRangePositionProps, ExportedUseViewsOptions<'day'> {
     /**
      * The selected value.
      * Used when the component is controlled.
@@ -92,12 +87,10 @@ export interface DateRangeCalendarProps<TDate> extends ExportedDateRangeCalendar
      */
     referenceDate?: TDate;
     /**
-     * Callback fired when the value changes.
-     * @template TDate
-     * @param {DateRange<TDate>} value The new value.
-     * @param {PickerSelectionState | undefined} selectionState Indicates if the date range selection is complete.
+     * The number of calendars to render.
+     * @default 2
      */
-    onChange?: (value: DateRange<TDate>, selectionState?: PickerSelectionState) => void;
+    calendars?: 1 | 2 | 3;
     className?: string;
     classes?: Partial<DateRangeCalendarClasses>;
     /**
@@ -114,8 +107,16 @@ export interface DateRangeCalendarProps<TDate> extends ExportedDateRangeCalendar
      * @default {}
      */
     slotProps?: DateRangeCalendarSlotProps<TDate>;
+    /**
+     * Range positions available for selection.
+     * This list is checked against when checking if a next range position can be selected.
+     *
+     * Used on Date Time Range pickers with current `rangePosition` to force a `finish` selection after just one range position selection.
+     * @default ['start', 'end']
+     */
+    availableRangePositions?: DateRangePosition[];
 }
 export interface DateRangeCalendarOwnerState<TDate> extends DateRangeCalendarProps<TDate> {
     isDragging: boolean;
 }
-export type DateRangeCalendarDefaultizedProps<TDate> = DefaultizedProps<DateRangeCalendarProps<TDate>, 'reduceAnimations' | 'calendars' | 'disableDragEditing' | keyof BaseDateValidationProps<TDate>>;
+export type DateRangeCalendarDefaultizedProps<TDate> = DefaultizedProps<DateRangeCalendarProps<TDate>, 'views' | 'openTo' | 'reduceAnimations' | 'calendars' | 'disableDragEditing' | 'availableRangePositions' | keyof BaseDateValidationProps<TDate>>;

package/DateRangePicker/DateRangePicker.js

@@ -59,9 +59,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default 2
    */
   calendars: PropTypes.oneOf([1, 2, 3]),
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/DateRangePicker/DateRangePickerToolbar.js

@@ -94,9 +94,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   classes: PropTypes.object,
-  /**
-   * className applied to the root component.
-   */
   className: PropTypes.string,
   disabled: PropTypes.bool,
   /**

package/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { DateTimeRangePickerProps } from './DateTimeRangePicker.types';
+type DateTimeRangePickerComponent = (<TDate>(props: DateTimeRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+    propTypes?: any;
+};
+declare const DateTimeRangePicker: DateTimeRangePickerComponent;
+export { DateTimeRangePicker };