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

package/DateTimeRangePicker/DateTimeRangePickerToolbar.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", "className", "classes", "onChange", "classes", "isLandscape", "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';
@@ -13,6 +13,7 @@ import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hoo
 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,13 +51,8 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
   });
   const utils = useUtils();
   const {
-      value: [start, end],
-      rangePosition,
-      onRangePositionChange,
       className,
       classes: classesProp,
-      onChange,
-      isLandscape,
       ampm,
       hidden,
       toolbarFormat,
@@ -66,17 +62,22 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
+    value,
+    setValue,
     disabled,
     readOnly,
     view,
-    onViewChange,
+    setView,
     views
   } = usePickerContext();
   const translations = usePickerTranslations();
   const ownerState = useToolbarOwnerState();
+  const {
+    rangePosition,
+    onRangePositionChange
+  } = usePickerRangePositionContext();
   const classes = useUtilityClasses(classesProp);
   const commonToolbarProps = {
-    isLandscape,
     views,
     ampm,
     disabled,
@@ -85,20 +86,22 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     toolbarFormat,
     toolbarPlaceholder
   };
-  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') {
@@ -107,14 +110,16 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       if (rangePosition !== 'start') {
         onRangePositionChange('start');
       }
-      onViewChange(newView);
+      setView(newView);
     };
     return {
+      value: value[0],
+      setValue: wrappedSetValue,
       forceDesktopVariant: true,
-      onViewChange: handleStartRangeViewChange,
+      setView: handleStartRangeViewChange,
       view: rangePosition === 'start' ? view : null
     };
-  }, [rangePosition, view, onRangePositionChange, onViewChange]);
+  }, [value, wrappedSetValue, rangePosition, view, onRangePositionChange, setView]);
   const endOverrides = React.useMemo(() => {
     const handleEndRangeViewChange = newView => {
       if (newView === 'year' || newView === 'month') {
@@ -123,14 +128,16 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
       if (rangePosition !== 'end') {
         onRangePositionChange('end');
       }
-      onViewChange(newView);
+      setView(newView);
     };
     return {
+      value: value[1],
+      setValue: wrappedSetValue,
       forceDesktopVariant: true,
-      onViewChange: handleEndRangeViewChange,
+      setView: handleEndRangeViewChange,
       view: rangePosition === 'end' ? view : null
     };
-  }, [rangePosition, view, onRangePositionChange, onViewChange]);
+  }, [value, wrappedSetValue, rangePosition, view, onRangePositionChange, setView]);
   if (hidden) {
     return null;
   }
@@ -143,21 +150,17 @@ const DateTimeRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateTi
     children: [/*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
       value: startOverrides,
       children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarStart, _extends({
-        value: start,
         toolbarTitle: translations.start,
         ownerState: ownerState,
         className: classes.startToolbar,
-        onChange: handleOnChange,
         titleId: titleId ? `${titleId}-start-toolbar` : undefined
       }, commonToolbarProps))
     }), /*#__PURE__*/_jsx(DateTimePickerToolbarOverrideContext.Provider, {
       value: endOverrides,
       children: /*#__PURE__*/_jsx(DateTimeRangePickerToolbarEnd, _extends({
-        value: end,
         toolbarTitle: translations.end,
         ownerState: ownerState,
         className: classes.endToolbar,
-        onChange: handleOnChange,
         titleId: titleId ? `${titleId}-end-toolbar` : undefined
       }, commonToolbarProps))
     })]
@@ -179,10 +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,
-  rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -196,7 +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
+  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

@@ -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/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/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/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">>;

package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,25 +1,24 @@
 'use client';
 
-import * as React from 'react';
-import { useField, useDefaultizedDateTimeField } 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 { validateDateTimeRange } from "../validation/index.js";
-export const useSingleInputDateTimeRangeField = inProps => {
-  const props = useDefaultizedDateTimeField(inProps);
+import { useDateTimeRangeManager } from "../managers/index.js";
+export const useSingleInputDateTimeRangeField = props => {
+  const manager = useDateTimeRangeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'date-time');
-  const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
-    dateSeparator: internalProps.dateSeparator
-  }), [internalProps.dateSeparator]);
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: rangeValueManager,
-    fieldValueManager,
-    validator: validateDateTimeRange,
-    valueType: 'date-time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts

@@ -1,2 +1,2 @@
 import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types';
-export declare const useSingleInputTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("@mui/x-date-pickers/internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("@mui/x-date-pickers/internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "referenceDate" | "timezone" | "formatDensity" | "enableAccessibleFieldDOMStructure" | "selectedSections" | "onSelectedSectionsChange" | "shouldRespectLeadingZeros" | "unstableFieldRef" | "ampm" | keyof import("@mui/x-date-pickers/internals").BaseTimeValidationProps | keyof import("@mui/x-date-pickers/internals").TimeValidationProps | "dateSeparator">>;
+export declare const useSingleInputTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseSingleInputTimeRangeFieldProps<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" | keyof import("@mui/x-date-pickers/internals").BaseTimeValidationProps | keyof import("@mui/x-date-pickers/internals").TimeValidationProps | "dateSeparator">>;

package/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,25 +1,24 @@
 'use client';
 
-import * as React from 'react';
-import { useField, useDefaultizedTimeField } 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 { validateTimeRange } from "../validation/index.js";
-export const useSingleInputTimeRangeField = inProps => {
-  const props = useDefaultizedTimeField(inProps);
+import { useTimeRangeManager } from "../managers/index.js";
+export const useSingleInputTimeRangeField = props => {
+  const manager = useTimeRangeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'time');
-  const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
-    dateSeparator: internalProps.dateSeparator
-  }), [internalProps.dateSeparator]);
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: rangeValueManager,
-    fieldValueManager,
-    validator: validateTimeRange,
-    valueType: 'time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/dateRangeViewRenderers/dateRangeViewRenderers.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { DateRangeCalendarProps } from '../DateRangeCalendar';
-export interface DateRangeViewRendererProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<DateRangeCalendarProps, 'views'> {
+export interface DateRangeViewRendererProps<TView extends DateOrTimeViewWithMeridiem> extends Omit<DateRangeCalendarProps, 'views' | 'onRangePositionChange' | 'rangePosition' | 'defaultRangePosition'> {
     views: readonly TView[];
 }
 /**
  * We don't pass all the props down to `DateRangeCalendar`,
  * because otherwise some unwanted props would be passed to the HTML element.
  */
-export declare const renderDateRangeViewCalendar: ({ value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, reduceAnimations, onMonthChange, rangePosition, defaultRangePosition, onRangePositionChange, calendars, currentMonthCalendarPosition, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, disableAutoMonthSwitching, sx, autoFocus, fixedWeekNumber, disableDragEditing, displayWeekNumber, timezone, availableRangePositions, views, view, onViewChange, }: DateRangeViewRendererProps<"day">) => React.JSX.Element;
+export declare const renderDateRangeViewCalendar: ({ value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, reduceAnimations, onMonthChange, calendars, currentMonthCalendarPosition, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, disableAutoMonthSwitching, sx, autoFocus, fixedWeekNumber, disableDragEditing, displayWeekNumber, timezone, availableRangePositions, views, view, onViewChange, }: DateRangeViewRendererProps<"day">) => React.JSX.Element;

package/dateRangeViewRenderers/dateRangeViewRenderers.js

@@ -19,9 +19,6 @@ export const renderDateRangeViewCalendar = ({
   shouldDisableDate,
   reduceAnimations,
   onMonthChange,
-  rangePosition,
-  defaultRangePosition,
-  onRangePositionChange,
   calendars,
   currentMonthCalendarPosition,
   slots,
@@ -58,9 +55,6 @@ export const renderDateRangeViewCalendar = ({
   shouldDisableDate: shouldDisableDate,
   reduceAnimations: reduceAnimations,
   onMonthChange: onMonthChange,
-  rangePosition: rangePosition,
-  defaultRangePosition: defaultRangePosition,
-  onRangePositionChange: onRangePositionChange,
   calendars: calendars,
   currentMonthCalendarPosition: currentMonthCalendarPosition,
   slots: slots,

package/hooks/index.d.ts

@@ -0,0 +1 @@
+export { usePickerRangePositionContext } from './usePickerRangePositionContext';

package/hooks/index.js

@@ -0,0 +1 @@
+export { usePickerRangePositionContext } from "./usePickerRangePositionContext.js";

package/hooks/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/hooks/index.js",
+  "types": "./index.d.ts"
+}

package/hooks/usePickerRangePositionContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
+export declare const PickerRangePositionContext: React.Context<UseRangePositionResponse | null>;
+/**
+ * Returns information about the range position of the picker that wraps the current component.
+ */
+export declare function usePickerRangePositionContext(): UseRangePositionResponse;

package/hooks/usePickerRangePositionContext.js

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+export const PickerRangePositionContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Returns information about the range position of the picker that wraps the current component.
+ */
+export function usePickerRangePositionContext() {
+  const value = React.useContext(PickerRangePositionContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerRangePositionContext` can only be called in components that are used inside a picker component'].join('\n'));
+  }
+  return value;
+}

package/index.d.ts

@@ -17,4 +17,6 @@ export * from './DesktopDateTimeRangePicker';
 export * from './MobileDateTimeRangePicker';
 export * from './dateRangeViewRenderers';
 export * from './models';
+export * from './hooks';
 export * from './validation';
+export * from './managers';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v8.0.0-alpha.6
+ * @mui/x-date-pickers-pro v8.0.0-alpha.7
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -32,4 +32,6 @@ export * from "./MobileDateTimeRangePicker/index.js";
 // View renderers
 export * from "./dateRangeViewRenderers/index.js";
 export * from "./models/index.js";
-export * from "./validation/index.js";
+export * from "./hooks/index.js";
+export * from "./validation/index.js";
+export * from "./managers/index.js";