@mui/x-date-pickers-pro 8.0.0-alpha.5 → 8.0.0-alpha.6

package/internals/hooks/useEnrichedRangePickerFieldProps.d.ts

@@ -6,7 +6,7 @@ import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { FieldRef, PickerOwnerState, FieldOwnerState } from '@mui/x-date-pickers/models';
 import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '@mui/x-date-pickers/hooks';
 import { PickersInputLocaleText } from '@mui/x-date-pickers/locales';
-import { UsePickerResponse, PickerVariant, DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps, PickerRangeValue, PickerValue } from '@mui/x-date-pickers/internals';
+import { UsePickerValueContextValue, PickerVariant, DateOrTimeViewWithMeridiem, BaseSingleInputFieldProps, PickerRangeValue, PickerValue } from '@mui/x-date-pickers/internals';
 import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
 import { RangePosition, FieldType, PickerRangeFieldSlotProps } from '../../models';
 import { UseRangePositionResponse } from './useRangePosition';
@@ -39,7 +39,7 @@ export interface RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure ex
     }>;
 }
 export type RangePickerPropsForFieldSlot<TIsSingleInput extends boolean, TEnableAccessibleFieldDOMStructure extends boolean, TError> = (TIsSingleInput extends true ? BaseSingleInputFieldProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure, TError> : never) | (TIsSingleInput extends false ? BaseMultiInputFieldProps<TEnableAccessibleFieldDOMStructure, TError> : never);
-export interface UseEnrichedRangePickerFieldPropsParams<TIsSingleInput extends boolean, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Pick<UsePickerResponse<PickerRangeValue, TView, any>, 'open' | 'actions'>, UseRangePositionResponse {
+export interface UseEnrichedRangePickerFieldPropsParams<TIsSingleInput extends boolean, TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError> extends Pick<UsePickerValueContextValue, 'open' | 'setOpen'>, UseRangePositionResponse {
     variant: PickerVariant;
     fieldType: FieldType;
     readOnly?: boolean;

package/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -10,7 +10,7 @@ import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
   variant,
   open,
-  actions,
+  setOpen,
   readOnly,
   labelId,
   disableOpenPicker,
@@ -54,14 +54,16 @@ const useMultiInputFieldSlotProps = ({
     event.stopPropagation();
     onRangePositionChange('start');
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen(event);
+      event.preventDefault();
+      setOpen(true);
     }
   };
   const openRangeEndSelection = event => {
     event.stopPropagation();
     onRangePositionChange('end');
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen(event);
+      event.preventDefault();
+      setOpen(true);
     }
   };
   const handleFocusStart = () => {
@@ -148,7 +150,7 @@ const useMultiInputFieldSlotProps = ({
 const useSingleInputFieldSlotProps = ({
   variant,
   open,
-  actions,
+  setOpen,
   readOnly,
   labelId,
   disableOpenPicker,
@@ -197,7 +199,8 @@ const useSingleInputFieldSlotProps = ({
   const openPicker = event => {
     event.stopPropagation();
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen(event);
+      event.preventDefault();
+      setOpen(true);
     }
   };
   const slots = _extends({}, fieldProps.slots, {

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -57,8 +57,6 @@ export const useMobileRangePicker = _ref => {
     fieldRef = endFieldRef;
   }
   const {
-    open,
-    actions,
     layoutProps,
     providerProps,
     renderCurrentView,
@@ -106,8 +104,9 @@ export const useMobileRangePicker = _ref => {
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
     variant: 'mobile',
     fieldType,
-    open,
-    actions,
+    // These direct access to `providerProps` will go away once the range fields handle the picker opening
+    open: providerProps.contextValue.open,
+    setOpen: providerProps.contextValue.setOpen,
     readOnly,
     labelId,
     disableOpenPicker,
@@ -156,8 +155,7 @@ export const useMobileRangePicker = _ref => {
     }, innerSlotProps?.mobilePaper)
   });
   const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
-      open: open,
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
       slots: slots,
       slotProps: slotProps,
       children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
@@ -165,7 +163,7 @@ export const useMobileRangePicker = _ref => {
         slotProps: slotPropsForLayout,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts

@@ -1,8 +1,8 @@
 import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { RangeOnlyPickerProps, RangePickerAdditionalViewProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from '../models/useRangePicker';
-export interface UseMobileRangePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends UseRangePickerSlots<TView>, PickersModalDialogSlots {
+export interface UseMobileRangePickerSlots extends UseRangePickerSlots, PickersModalDialogSlots {
 }
-export interface UseMobileRangePickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, PickersModalDialogSlotProps {
+export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickersModalDialogSlotProps {
 }
 export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {
 }
@@ -11,12 +11,12 @@ export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMerid
      * Overridable component slots.
      * @default {}
      */
-    slots: UseMobileRangePickerSlots<TView>;
+    slots: UseMobileRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseMobileRangePickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
 export interface MobileRangePickerAdditionalViewProps extends RangePickerAdditionalViewProps {
 }

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
 import { UseRangePositionProps } from '../useRangePosition';
-export interface UseStaticRangePickerSlots<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<PickerRangeValue, TView> {
+export interface UseStaticRangePickerSlots extends ExportedPickersLayoutSlots<PickerRangeValue> {
 }
-export interface UseStaticRangePickerSlotProps<TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<PickerRangeValue, TView> {
+export interface UseStaticRangePickerSlotProps extends ExportedPickersLayoutSlotProps<PickerRangeValue> {
     toolbar?: ExportedBaseToolbarProps;
 }
 export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps, UseRangePositionProps {
@@ -14,12 +14,12 @@ export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMerid
      * Overridable components.
      * @default {}
      */
-    slots?: UseStaticRangePickerSlots<TView>;
+    slots?: UseStaticRangePickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseStaticRangePickerSlotProps<TView>;
+    slotProps?: UseStaticRangePickerSlotProps;
 }
 export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNDU2NjQwMDAwMA==";
+  const releaseInfo = "MTczNTE2NDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/DateRangePicker/DateRangePickerToolbar.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "classes", "onViewChange", "view", "views"];
+const _excluded = ["value", "rangePosition", "onRangePositionChange", "toolbarFormat", "className", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -103,12 +103,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    */
   hidden: PropTypes.bool,
   onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -124,14 +118,6 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day'])).isRequired
+  value: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;
 export { DateRangePickerToolbar };

package/modern/DateTimeRangePicker/DateTimeRangePickerTabs.js

@@ -8,7 +8,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TimeIcon, DateRangeIcon, ArrowLeftIcon, ArrowRightIcon } from '@mui/x-date-pickers/icons';
 import { isDatePickerView, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
 import { getDateTimeRangePickerTabsUtilityClass } from "./dateTimeRangePickerTabsClasses.js";
@@ -69,9 +69,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   });
   const {
     dateIcon = /*#__PURE__*/_jsx(DateRangeIcon, {}),
-    onViewChange,
     timeIcon = /*#__PURE__*/_jsx(TimeIcon, {}),
-    view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     rangePosition,
     onRangePositionChange,
@@ -83,8 +81,12 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
   const {
     ownerState
   } = usePickerPrivateContext();
+  const {
+    view,
+    onViewChange
+  } = usePickerContext();
   const classes = useUtilityClasses(classesProp);
-  const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
+  const value = React.useMemo(() => view == null ? null : viewToTab(view, rangePosition), [view, rangePosition]);
   const isPreviousHidden = value === 'start-date';
   const isNextHidden = value === 'end-time';
   const tabLabel = React.useMemo(() => {
@@ -109,18 +111,26 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     }
   });
   const changeToPreviousTab = useEventCallback(() => {
-    const previousTab = tabOptions[tabOptions.indexOf(value) - 1];
+    const previousTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) - 1];
     onViewChange(tabToView(previousTab));
     handleRangePositionChange(previousTab);
   });
   const changeToNextTab = useEventCallback(() => {
-    const nextTab = tabOptions[tabOptions.indexOf(value) + 1];
+    const nextTab = value == null ? tabOptions[0] : tabOptions[tabOptions.indexOf(value) + 1];
     onViewChange(tabToView(nextTab));
     handleRangePositionChange(nextTab);
   });
   if (hidden) {
     return null;
   }
+  let startIcon;
+  if (view == null) {
+    startIcon = null;
+  } else if (isDatePickerView(view)) {
+    startIcon = dateIcon;
+  } else {
+    startIcon = timeIcon;
+  }
   return /*#__PURE__*/_jsxs(DateTimeRangePickerTabsRoot, {
     ownerState: ownerState,
     className: clsx(classes.root, className),
@@ -133,7 +143,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(inProps) {
     }) : /*#__PURE__*/_jsx(DateTimeRangePickerTabFiller, {
       className: classes.filler
     }), /*#__PURE__*/_jsx(DateTimeRangePickerTab, {
-      startIcon: isDatePickerView(view) ? dateIcon : timeIcon,
+      startIcon: startIcon,
       className: classes.tabButton,
       size: "large",
       children: tabLabel
@@ -168,12 +178,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    */
   hidden: PropTypes.bool,
   onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a tab is clicked.
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -183,10 +187,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerTabs.propTypes = {
    * Time tab icon.
    * @default TimeIcon
    */
-  timeIcon: PropTypes.element,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired
+  timeIcon: PropTypes.element
 } : void 0;
 export { DateTimeRangePickerTabs };

package/modern/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -2,13 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "classes", "onViewChange", "onChange", "classes", "view", "isLandscape", "views", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
+const _excluded = ["value", "rangePosition", "onRangePositionChange", "className", "classes", "onChange", "classes", "isLandscape", "ampm", "hidden", "toolbarFormat", "toolbarPlaceholder", "titleId", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { useUtils, useToolbarOwnerState, DateTimePickerToolbarForceDesktopVariant } from '@mui/x-date-pickers/internals';
+import { useUtils, useToolbarOwnerState, DateTimePickerToolbarOverrideContext } from '@mui/x-date-pickers/internals';
 import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
 import { getDateTimeRangePickerToolbarUtilityClass } from "./dateTimeRangePickerToolbarClasses.js";
@@ -55,11 +55,8 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       onRangePositionChange,
       className,
       classes: classesProp,
-      onViewChange,
       onChange,
-      view,
       isLandscape,
-      views,
       ampm,
       hidden,
       toolbarFormat,
@@ -70,7 +67,10 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     disabled,
-    readOnly
+    readOnly,
+    view,
+    onViewChange,
+    views
   } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
@@ -85,24 +85,6 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     toolbarFormat,
     toolbarPlaceholder
   };
-  const handleStartRangeViewChange = React.useCallback(newView => {
-    if (newView === 'year' || newView === 'month') {
-      return;
-    }
-    if (rangePosition !== 'start') {
-      onRangePositionChange('start');
-    }
-    onViewChange(newView);
-  }, [onRangePositionChange, onViewChange, rangePosition]);
-  const handleEndRangeViewChange = React.useCallback(newView => {
-    if (newView === 'year' || newView === 'month') {
-      return;
-    }
-    if (rangePosition !== 'end') {
-      onRangePositionChange('end');
-    }
-    onViewChange(newView);
-  }, [onRangePositionChange, onViewChange, rangePosition]);
   const handleOnChange = React.useCallback(newDate => {
     const {
       nextSelection,
@@ -117,37 +99,68 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     onRangePositionChange(nextSelection);
     onChange(newRange);
   }, [onChange, onRangePositionChange, props.value, rangePosition, utils]);
+  const startOverrides = React.useMemo(() => {
+    const handleStartRangeViewChange = newView => {
+      if (newView === 'year' || newView === 'month') {
+        return;
+      }
+      if (rangePosition !== 'start') {
+        onRangePositionChange('start');
+      }
+      onViewChange(newView);
+    };
+    return {
+      forceDesktopVariant: true,
+      onViewChange: handleStartRangeViewChange,
+      view: rangePosition === 'start' ? view : null
+    };
+  }, [rangePosition, view, onRangePositionChange, onViewChange]);
+  const endOverrides = React.useMemo(() => {
+    const handleEndRangeViewChange = newView => {
+      if (newView === 'year' || newView === 'month') {
+        return;
+      }
+      if (rangePosition !== 'end') {
+        onRangePositionChange('end');
+      }
+      onViewChange(newView);
+    };
+    return {
+      forceDesktopVariant: true,
+      onViewChange: handleEndRangeViewChange,
+      view: rangePosition === 'end' ? view : null
+    };
+  }, [rangePosition, view, onRangePositionChange, onViewChange]);
   if (hidden) {
     return null;
   }
-  return /*#__PURE__*/_jsx(DateTimeRangePickerToolbarRoot, _extends({
+  return /*#__PURE__*/_jsxs(DateTimeRangePickerToolbarRoot, _extends({
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     sx: sx
   }, other, {
-    children: /*#__PURE__*/_jsxs(DateTimePickerToolbarForceDesktopVariant.Provider, {
-      value: true,
-      children: [/*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
+    children: [/*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
+      value: startOverrides,
+      children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
         value: start,
-        onViewChange: handleStartRangeViewChange,
         toolbarTitle: translations.start,
         ownerState: ownerState,
-        view: rangePosition === 'start' ? view : undefined,
         className: classes.startToolbar,
         onChange: handleOnChange,
         titleId: titleId ? `${titleId}-start-toolbar` : undefined
-      }, commonToolbarProps)), /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
+      }, commonToolbarProps))
+    }), /*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
+      value: endOverrides,
+      children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
         value: end,
-        onViewChange: handleEndRangeViewChange,
         toolbarTitle: translations.end,
         ownerState: ownerState,
-        view: rangePosition === 'end' ? view : undefined,
         className: classes.endToolbar,
         onChange: handleOnChange,
         titleId: titleId ? `${titleId}-end-toolbar` : undefined
-      }, commonToolbarProps))]
-    })
+      }, commonToolbarProps))
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
@@ -169,12 +182,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
   isLandscape: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   onRangePositionChange: PropTypes.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -190,14 +197,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: PropTypes.node,
-  value: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Currently visible picker view.
-   */
-  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired,
-  /**
-   * Available views.
-   */
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'seconds']).isRequired).isRequired
+  value: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;
 export { DateTimeRangePickerToolbar };

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.5
+ * @mui/x-date-pickers-pro v8.0.0-alpha.6
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -59,8 +59,6 @@ export const useDesktopRangePicker = _ref => {
     fieldRef = endFieldRef;
   }
   const {
-    open,
-    actions,
     layoutProps,
     providerProps,
     renderCurrentView,
@@ -79,8 +77,8 @@ export const useDesktopRangePicker = _ref => {
     }
   }));
   React.useEffect(() => {
-    if (layoutProps.view) {
-      initialView.current = layoutProps.view;
+    if (providerProps.contextValue.view) {
+      initialView.current = providerProps.contextValue.view;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -89,7 +87,9 @@ export const useDesktopRangePicker = _ref => {
       if (fieldContainerRef.current?.contains(getActiveElement(document)) || popperRef.current?.contains(getActiveElement(document))) {
         return;
       }
-      actions.onDismiss();
+
+      // This direct access to `providerProps` will go away once the range fields stop having their views in a tooltip.
+      providerProps.privateContextValue.dismissViews();
     });
   };
   const Field = slots.field;
@@ -124,8 +124,9 @@ export const useDesktopRangePicker = _ref => {
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
     variant: 'desktop',
     fieldType,
-    open,
-    actions,
+    // These direct access to `providerProps` will go away once the range fields handle the picker opening
+    open: providerProps.contextValue.open,
+    setOpen: providerProps.contextValue.setOpen,
     readOnly,
     disableOpenPicker,
     label,
@@ -140,9 +141,9 @@ export const useDesktopRangePicker = _ref => {
     startFieldRef,
     endFieldRef,
     singleInputFieldRef,
-    currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined,
+    currentView: providerProps.contextValue.view !== props.openTo ? providerProps.contextValue.view : undefined,
     initialView: initialView.current ?? undefined,
-    onViewChange: layoutProps.onViewChange
+    onViewChange: providerProps.contextValue.onViewChange
   });
   const slotPropsForLayout = _extends({}, slotProps, {
     tabs: _extends({}, slotProps?.tabs, {
@@ -156,14 +157,12 @@ export const useDesktopRangePicker = _ref => {
   });
   const Layout = slots?.layout ?? PickersLayout;
   const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, _extends({
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, {
       role: "tooltip",
       placement: "bottom-start",
       containerRef: popperRef,
       anchorEl: anchorRef.current,
-      onBlur: handleBlur
-    }, actions, {
-      open: open,
+      onBlur: handleBlur,
       slots: slots,
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
@@ -173,7 +172,7 @@ export const useDesktopRangePicker = _ref => {
         slotProps: slotPropsForLayout,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

package/modern/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -10,7 +10,7 @@ import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
   variant,
   open,
-  actions,
+  setOpen,
   readOnly,
   labelId,
   disableOpenPicker,
@@ -54,14 +54,16 @@ const useMultiInputFieldSlotProps = ({
     event.stopPropagation();
     onRangePositionChange('start');
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen(event);
+      event.preventDefault();
+      setOpen(true);
     }
   };
   const openRangeEndSelection = event => {
     event.stopPropagation();
     onRangePositionChange('end');
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen(event);
+      event.preventDefault();
+      setOpen(true);
     }
   };
   const handleFocusStart = () => {
@@ -148,7 +150,7 @@ const useMultiInputFieldSlotProps = ({
 const useSingleInputFieldSlotProps = ({
   variant,
   open,
-  actions,
+  setOpen,
   readOnly,
   labelId,
   disableOpenPicker,
@@ -197,7 +199,8 @@ const useSingleInputFieldSlotProps = ({
   const openPicker = event => {
     event.stopPropagation();
     if (!readOnly && !disableOpenPicker) {
-      actions.onOpen(event);
+      event.preventDefault();
+      setOpen(true);
     }
   };
   const slots = _extends({}, fieldProps.slots, {

package/modern/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -57,8 +57,6 @@ export const useMobileRangePicker = _ref => {
     fieldRef = endFieldRef;
   }
   const {
-    open,
-    actions,
     layoutProps,
     providerProps,
     renderCurrentView,
@@ -106,8 +104,9 @@ export const useMobileRangePicker = _ref => {
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
     variant: 'mobile',
     fieldType,
-    open,
-    actions,
+    // These direct access to `providerProps` will go away once the range fields handle the picker opening
+    open: providerProps.contextValue.open,
+    setOpen: providerProps.contextValue.setOpen,
     readOnly,
     labelId,
     disableOpenPicker,
@@ -156,8 +155,7 @@ export const useMobileRangePicker = _ref => {
     }, innerSlotProps?.mobilePaper)
   });
   const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
-      open: open,
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
       slots: slots,
       slotProps: slotProps,
       children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
@@ -165,7 +163,7 @@ export const useMobileRangePicker = _ref => {
         slotProps: slotPropsForLayout,
         children: renderCurrentView()
       }))
-    }))]
+    })]
   }));
   return {
     renderPicker

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNDU2NjQwMDAwMA==";
+  const releaseInfo = "MTczNTE2NDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat