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

package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.d.ts

@@ -1,19 +1,17 @@
-import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { PickerSelectionState, PickerViewRenderer, TimeViewWithMeridiem, BaseClockProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
-export type DateTimeRangePickerTimeWrapperProps<TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TView>, 'value' | 'defaultValue' | 'onChange'>, 'views'>> = Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> & Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
-    view: TView;
-    onViewChange?: (view: TView) => void;
-    views: readonly TView[];
+export type DateTimeRangePickerTimeWrapperProps<TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>, 'views'>> = Omit<TComponentProps, 'views' | 'view' | 'onViewChange' | 'value' | 'defaultValue' | 'onChange'> & {
+    view: TimeViewWithMeridiem;
+    onViewChange?: (view: TimeViewWithMeridiem) => void;
+    views: readonly TimeViewWithMeridiem[];
     value?: PickerRangeValue;
     defaultValue?: PickerRangeValue;
-    onChange?: (value: PickerRangeValue, selectionState: PickerSelectionState, selectedView: TView) => void;
-    viewRenderer?: PickerViewRenderer<PickerRangeValue, TView, TComponentProps, any> | null;
-    openTo?: TView;
+    onChange?: (value: PickerRangeValue, selectionState: PickerSelectionState, selectedView: TimeViewWithMeridiem) => void;
+    viewRenderer?: PickerViewRenderer<PickerRangeValue, TComponentProps> | null;
+    openTo?: TimeViewWithMeridiem;
 };
 /**
  * @ignore - internal component.
  */
-declare function DateTimeRangePickerTimeWrapper<TView extends TimeViewWithMeridiem, TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TView>, 'value' | 'defaultValue' | 'onChange'>, 'views'>>(props: DateTimeRangePickerTimeWrapperProps<TView, TComponentProps>, ref: React.Ref<HTMLDivElement>): React.ReactNode;
+declare function DateTimeRangePickerTimeWrapper<TComponentProps extends DefaultizedProps<Omit<BaseClockProps<TimeViewWithMeridiem>, 'value' | 'defaultValue' | 'onChange'>, 'views'>>(props: DateTimeRangePickerTimeWrapperProps<TComponentProps>): import("react").ReactNode;
 export { DateTimeRangePickerTimeWrapper };

package/DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["rangePosition", "onRangePositionChange", "viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
+const _excluded = ["viewRenderer", "value", "onChange", "defaultValue", "onViewChange", "views", "className"];
 import { isInternalTimeView, useUtils } from '@mui/x-date-pickers/internals';
 import { isRangeValid } from "../internals/utils/date-utils.js";
 import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 /**
  * @ignore - internal component.
  */
-function DateTimeRangePickerTimeWrapper(props, ref) {
+function DateTimeRangePickerTimeWrapper(props) {
   const utils = useUtils();
   const {
-      rangePosition,
-      onRangePositionChange,
       viewRenderer,
       value,
       onChange,
@@ -20,6 +19,10 @@ function DateTimeRangePickerTimeWrapper(props, ref) {
       views
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    rangePosition,
+    onRangePositionChange
+  } = usePickerRangePositionContext();
   if (!viewRenderer) {
     return null;
   }
@@ -47,7 +50,6 @@ function DateTimeRangePickerTimeWrapper(props, ref) {
     onChange(newRange, isFullRangeSelected ? 'finish' : 'partial', selectedView);
   };
   return viewRenderer(_extends({}, other, {
-    ref,
     views,
     onViewChange,
     value: currentValue,

package/DateTimeRangePicker/DateTimeRangePickerToolbar.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { BaseToolbarProps, ExportedBaseToolbarProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
+import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/internals';
 import { DateTimeRangePickerToolbarClasses } from './dateTimeRangePickerToolbarClasses';
-type DateTimeRangeViews = Exclude<DateOrTimeViewWithMeridiem, 'year' | 'month'>;
-export interface DateTimeRangePickerToolbarProps extends BaseToolbarProps<PickerRangeValue, DateTimeRangeViews>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'>, ExportedDateTimeRangePickerToolbarProps {
+export interface DateTimeRangePickerToolbarProps extends BaseToolbarProps, ExportedDateTimeRangePickerToolbarProps {
     ampm?: boolean;
 }
 export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToolbarProps {

package/DateTimeRangePicker/DateTimeRangePickerToolbar.js

@@ -2,17 +2,18 @@
 
 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 = ["className", "classes", "classes", "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";
 import { calculateRangeChange } from "../internals/utils/date-range-manager.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -50,16 +51,8 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
   });
   const utils = useUtils();
   const {
-      value: [start, end],
-      rangePosition,
-      onRangePositionChange,
       className,
       classes: classesProp,
-      onViewChange,
-      onChange,
-      view,
-      isLandscape,
-      views,
       ampm,
       hidden,
       toolbarFormat,
@@ -69,14 +62,22 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
+    value,
+    setValue,
     disabled,
-    readOnly
+    readOnly,
+    view,
+    setView,
+    views
   } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
+  const {
+    rangePosition,
+    onRangePositionChange
+  } = usePickerRangePositionContext();
   const classes = useUtilityClasses(classesProp);
   const commonToolbarProps = {
-    isLandscape,
     views,
     ampm,
     disabled,
@@ -85,69 +86,84 @@ 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 wrappedSetValue = React.useCallback(newDate => {
     const {
       nextSelection,
       newRange
     } = calculateRangeChange({
       newDate,
       utils,
-      range: props.value,
+      range: value,
       rangePosition,
       allowRangeFlip: true
     });
     onRangePositionChange(nextSelection);
-    onChange(newRange);
-  }, [onChange, onRangePositionChange, props.value, rangePosition, utils]);
+    setValue(newRange, {
+      changeImportance: 'set'
+    });
+  }, [setValue, onRangePositionChange, value, rangePosition, utils]);
+  const startOverrides = React.useMemo(() => {
+    const handleStartRangeViewChange = newView => {
+      if (newView === 'year' || newView === 'month') {
+        return;
+      }
+      if (rangePosition !== 'start') {
+        onRangePositionChange('start');
+      }
+      setView(newView);
+    };
+    return {
+      value: value[0],
+      setValue: wrappedSetValue,
+      forceDesktopVariant: true,
+      setView: handleStartRangeViewChange,
+      view: rangePosition === 'start' ? view : null
+    };
+  }, [value, wrappedSetValue, rangePosition, view, onRangePositionChange, setView]);
+  const endOverrides = React.useMemo(() => {
+    const handleEndRangeViewChange = newView => {
+      if (newView === 'year' || newView === 'month') {
+        return;
+      }
+      if (rangePosition !== 'end') {
+        onRangePositionChange('end');
+      }
+      setView(newView);
+    };
+    return {
+      value: value[1],
+      setValue: wrappedSetValue,
+      forceDesktopVariant: true,
+      setView: handleEndRangeViewChange,
+      view: rangePosition === 'end' ? view : null
+    };
+  }, [value, wrappedSetValue, rangePosition, view, onRangePositionChange, setView]);
   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({
-        value: start,
-        onViewChange: handleStartRangeViewChange,
+    children: [/*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
+      value: startOverrides,
+      children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
         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({
-        value: end,
-        onViewChange: handleEndRangeViewChange,
+      }, commonToolbarProps))
+    }), /*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
+      value: endOverrides,
+      children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
         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 = {
@@ -166,16 +182,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    * @default `true` for Desktop, `false` for Mobile.
    */
   hidden: PropTypes.bool,
-  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.
    */
@@ -189,15 +195,6 @@ process.env.NODE_ENV !== "production" ? DateTimeRangePickerToolbar.propTypes = {
    * Toolbar value placeholder—it is displayed when the value is empty.
    * @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
+  toolbarPlaceholder: PropTypes.node
 } : void 0;
 export { DateTimeRangePickerToolbar };

package/DateTimeRangePicker/shared.d.ts

@@ -34,9 +34,9 @@ export interface BaseDateTimeRangePickerSlotProps extends DateRangeCalendarSlotP
      */
     toolbar?: ExportedDateTimeRangePickerToolbarProps;
 }
-export type DateTimeRangePickerRenderers<TView extends DateOrTimeViewWithMeridiem, TAdditionalProps extends {} = {}> = PickerViewRendererLookup<PickerRangeValue, TView, Omit<DateRangeViewRendererProps<'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
+export type DateTimeRangePickerRenderers<TView extends DateOrTimeViewWithMeridiem> = PickerViewRendererLookup<PickerRangeValue, TView, Omit<DateRangeViewRendererProps<'day'>, 'view' | 'slots' | 'slotProps'> & Omit<TimeViewRendererProps<TimeViewWithMeridiem, BaseClockProps<TimeViewWithMeridiem>>, 'view' | 'slots' | 'slotProps'> & {
     view: TView;
-}, TAdditionalProps>;
+}>;
 export interface BaseDateTimeRangePickerProps extends Omit<BasePickerInputProps<PickerRangeValue, DateTimeRangePickerView, DateTimeRangeValidationError>, 'orientation' | 'views' | 'openTo'>, ExportedDateRangeCalendarProps, ExportedValidateDateTimeRangeProps, DesktopOnlyTimePickerProps, Partial<Pick<UseViewsOptions<PickerRangeValue, DateTimeRangePickerViewExternal>, 'openTo' | 'views'>> {
     /**
      * Overridable component slots.

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -13,6 +13,8 @@ import { renderDateRangeViewCalendar } from "../dateRangeViewRenderers/index.js"
 import { MultiInputDateRangeField } from "../MultiInputDateRangeField/index.js";
 import { useDesktopRangePicker } from "../internals/hooks/useDesktopRangePicker/index.js";
 import { validateDateRange } from "../validation/index.js";
+const emptyActions = [];
+
 /**
  * Demos:
  *
@@ -32,6 +34,7 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
     day: renderDateRangeViewCalendar
   }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
+    closeOnSelect: defaultizedProps.closeOnSelect ?? true,
     viewRenderers,
     format: utils.formats.keyboardDate,
     calendars: defaultizedProps.calendars ?? 2,
@@ -46,7 +49,10 @@ const DesktopDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopDat
       }),
       toolbar: _extends({
         hidden: true
-      }, defaultizedProps.slotProps?.toolbar)
+      }, defaultizedProps.slotProps?.toolbar),
+      actionBar: ownerState => _extends({
+        actions: emptyActions
+      }, resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState))
     })
   });
   const {
@@ -78,8 +84,8 @@ DesktopDateRangePicker.propTypes = {
   calendars: PropTypes.oneOf([1, 2, 3]),
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default true
    */
   closeOnSelect: PropTypes.bool,
   /**

package/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts

@@ -1,9 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from '../internals/hooks/useDesktopRangePicker';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from '../DateRangePicker/shared';
-export interface DesktopDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots<'day'>, 'field'> {
+export interface DesktopDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots, 'field'> {
 }
-export interface DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
 export interface DesktopDateRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateRangePickerProps, DesktopRangeOnlyPickerProps {
     /**
@@ -21,4 +21,9 @@ export interface DesktopDateRangePickerProps<TEnableAccessibleFieldDOMStructure
      * @default {}
      */
     slotProps?: DesktopDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+    /**
+     * If `true`, the Picker will close after submitting the full date.
+     * @default true
+     */
+    closeOnSelect?: boolean;
 }

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["openTo", "rangePosition"];
+const _excluded = ["openTo"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isDatePickerView, isInternalTimeView, resolveDateTimeFormat, useUtils } from '@mui/x-date-pickers/internals';
@@ -22,15 +22,22 @@ import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/s
 import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
+const rendererInterceptor = function RendererInterceptor(props) {
   const {
-      openTo,
-      rangePosition
+    viewRenderers,
+    popperView,
+    rendererProps
+  } = props;
+  const {
+      openTo
     } = rendererProps,
     otherProps = _objectWithoutPropertiesLoose(rendererProps, _excluded);
+  const {
+    rangePosition
+  } = usePickerRangePositionContext();
   const finalProps = _extends({}, otherProps, {
-    rangePosition,
     focusedView: null,
     sx: [{
       [`&.${multiSectionDigitalClockClasses.root}`]: {
@@ -43,7 +50,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
   });
   const isTimeViewActive = isInternalTimeView(popperView);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [inViewRenderers.day?.(_extends({}, rendererProps, {
+    children: [viewRenderers.day?.(_extends({}, rendererProps, {
       availableRangePositions: [rangePosition],
       view: !isTimeViewActive ? popperView : 'day',
       views: rendererProps.views.filter(isDatePickerView),
@@ -59,7 +66,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
       view: isTimeViewActive ? popperView : 'hours',
       views: finalProps.views.filter(isInternalTimeView),
       openTo: isInternalTimeView(openTo) ? openTo : 'hours',
-      viewRenderer: inViewRenderers[isTimeViewActive ? popperView : 'hours'],
+      viewRenderer: viewRenderers[isTimeViewActive ? popperView : 'hours'],
       sx: [{
         gridColumn: 3
       }, ...finalProps.sx]
@@ -92,7 +99,6 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
   const views = !shouldHoursRendererContainMeridiemView ? defaultizedProps.views.filter(view => view !== 'meridiem') : defaultizedProps.views;
-  const actionBarActions = defaultizedProps.shouldRenderTimeInASingleColumn ? [] : ['accept'];
   const props = _extends({}, defaultizedProps, {
     views,
     viewRenderers,
@@ -113,10 +119,7 @@ const DesktopDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
       }, defaultizedProps.slotProps?.tabs),
       toolbar: _extends({
         hidden: true
-      }, defaultizedProps.slotProps?.toolbar),
-      actionBar: ownerState => _extends({
-        actions: actionBarActions
-      }, resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState))
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -154,8 +157,8 @@ DesktopDateTimeRangePicker.propTypes = {
   calendars: PropTypes.oneOf([1, 2, 3]),
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.types.d.ts

@@ -1,10 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from '../internals/hooks/useDesktopRangePicker';
 import { BaseDateTimeRangePickerProps, BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps } from '../DateTimeRangePicker/shared';
-import { DateTimeRangePickerView } from '../internals/models';
-export interface DesktopDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots<DateTimeRangePickerView>, 'field'> {
+export interface DesktopDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseDesktopRangePickerSlots, 'field'> {
 }
-export interface DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface DesktopDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
 export interface DesktopDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimeRangePickerProps, DesktopRangeOnlyPickerProps {
     /**

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -74,8 +74,8 @@ MobileDateRangePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/MobileDateRangePicker/MobileDateRangePicker.types.d.ts

@@ -1,9 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps } from '../internals/hooks/useMobileRangePicker';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from '../DateRangePicker/shared';
-export interface MobileDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseMobileRangePickerSlots<'day'>, 'field'> {
+export interface MobileDateRangePickerSlots extends BaseDateRangePickerSlots, MakeOptional<UseMobileRangePickerSlots, 'field'> {
 }
-export interface MobileDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<'day', TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface MobileDateRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
 export interface MobileDateRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateRangePickerProps, MobileRangeOnlyPickerProps {
     /**

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["view", "openTo", "rangePosition"];
+const _excluded = ["view", "openTo"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
@@ -20,16 +20,23 @@ import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/s
 import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
+const rendererInterceptor = function RendererInterceptor(props) {
+  const {
+    viewRenderers,
+    popperView,
+    rendererProps
+  } = props;
+  const {
+    rangePosition
+  } = usePickerRangePositionContext();
   const {
       view,
-      openTo,
-      rangePosition
+      openTo
     } = rendererProps,
     otherRendererProps = _objectWithoutPropertiesLoose(rendererProps, _excluded);
   const finalProps = _extends({}, otherRendererProps, {
-    rangePosition,
     focusedView: null,
     sx: [{
       width: DIALOG_WIDTH,
@@ -53,7 +60,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     }]
   });
   const isTimeView = isInternalTimeView(popperView);
-  const viewRenderer = inViewRenderers[popperView];
+  const viewRenderer = viewRenderers[popperView];
   if (!viewRenderer) {
     return null;
   }
@@ -148,8 +155,8 @@ MobileDateTimeRangePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.d.ts

@@ -1,10 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps } from '../internals/hooks/useMobileRangePicker';
 import { BaseDateTimeRangePickerProps, BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps } from '../DateTimeRangePicker/shared';
-import { DateTimeRangePickerView } from '../internals/models';
-export interface MobileDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseMobileRangePickerSlots<DateTimeRangePickerView>, 'field'> {
+export interface MobileDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseMobileRangePickerSlots, 'field'> {
 }
-export interface MobileDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface MobileDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
 export interface MobileDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimeRangePickerProps, MobileRangeOnlyPickerProps {
     /**

package/SingleInputDateRangeField/useSingleInputDateRangeField.d.ts

@@ -1,2 +1,2 @@
 import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
-export declare const useSingleInputDateRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps> & Required<Pick<UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "referenceDate" | "timezone" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | keyof import("@mui/x-date-pickers/internals").BaseDateValidationProps | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "dateSeparator">>;
+export declare const useSingleInputDateRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "onChange" | "onError" | "format" | "referenceDate" | "timezone" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | keyof import("@mui/x-date-pickers/internals").BaseDateValidationProps | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "dateSeparator">>;

package/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -1,25 +1,24 @@
 'use client';
 
-import * as React from 'react';
-import { useField, useDefaultizedDateField } from '@mui/x-date-pickers/internals';
+import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
 import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
-import { rangeValueManager, getRangeFieldValueManager } from "../internals/utils/valueManagers.js";
-import { validateDateRange } from "../validation/index.js";
-export const useSingleInputDateRangeField = inProps => {
-  const props = useDefaultizedDateField(inProps);
+import { useDateRangeManager } from "../managers/index.js";
+export const useSingleInputDateRangeField = props => {
+  const manager = useDateRangeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'date');
-  const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
-    dateSeparator: internalProps.dateSeparator
-  }), [internalProps.dateSeparator]);
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: rangeValueManager,
-    fieldValueManager,
-    validator: validateDateRange,
-    valueType: 'date'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.d.ts

@@ -1,2 +1,2 @@
 import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types';
-export declare const useSingleInputDateTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps> & Required<Pick<UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedDateTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "referenceDate" | "timezone" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | "ampm" | "disableFuture" | "maxDate" | "disablePast" | "minDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "minDateTime" | "maxDateTime" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "dateSeparator">>;
+export declare const useSingleInputDateTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "onChange" | "onError" | "format" | "referenceDate" | "timezone" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | "ampm" | "disableFuture" | "maxDate" | "disablePast" | "minDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minDateTime" | "maxDateTime" | "dateSeparator">>;