@mui/x-date-pickers-pro 8.0.0-beta.0 → 8.0.0-beta.1

package/esm/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,25 +1,11 @@
 'use client';
 
-import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
-import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { useField } from '@mui/x-date-pickers/internals';
 import { useDateTimeRangeManager } from "../managers/index.js";
 export const useSingleInputDateTimeRangeField = props => {
   const manager = useDateTimeRangeManager(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = useSplitFieldProps(props, 'date-time');
-  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
-    manager,
-    internalProps
-  });
   return useField({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
+    manager,
+    props
   });
 };

package/esm/SingleInputTimeRangeField/useSingleInputTimeRangeField.d.ts

@@ -1,2 +1,2 @@
 import { UseSingleInputTimeRangeFieldProps } from "./SingleInputTimeRangeField.types.js";
-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" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | "timezone" | "enableAccessibleFieldDOMStructure" | "formatDensity" | "selectedSections" | "onSelectedSectionsChange" | "referenceDate" | "shouldRespectLeadingZeros" | "unstableFieldRef" | "ampm" | keyof import("@mui/x-date-pickers/internals").BaseTimeValidationProps | keyof import("@mui/x-date-pickers/internals").TimeValidationProps | "unstableStartFieldRef" | "unstableEndFieldRef" | "dateSeparator">>;
+export declare const useSingleInputTimeRangeField: <TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseSingleInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TProps) => import("@mui/x-date-pickers/internals").UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/esm/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,25 +1,11 @@
 'use client';
 
-import { useField, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
-import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+import { useField } from '@mui/x-date-pickers/internals';
 import { useTimeRangeManager } from "../managers/index.js";
 export const useSingleInputTimeRangeField = props => {
   const manager = useTimeRangeManager(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = useSplitFieldProps(props, 'time');
-  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
-    manager,
-    internalProps
-  });
   return useField({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
+    manager,
+    props
   });
 };

package/esm/TimeRangePicker/TimeRangePicker.js

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeProps } from '@mui/material/styles';
 import refType from '@mui/utils/refType';
+import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '@mui/x-date-pickers/internals';
 import { DesktopTimeRangePicker } from "../DesktopTimeRangePicker/index.js";
 import { MobileTimeRangePicker } from "../MobileTimeRangePicker/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ const TimeRangePicker = /*#__PURE__*/React.forwardRef(function TimeRangePicker(i
     name: 'MuiTimeRangePicker'
   });
   const {
-      desktopModeMediaQuery = '@media (pointer: fine)'
+      desktopModeMediaQuery = DEFAULT_DESKTOP_MODE_MEDIA_QUERY
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -102,6 +103,7 @@ process.env.NODE_ENV !== "production" ? TimeRangePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/esm/hooks/useMultiInputRangeField/useMultiInputRangeField.d.ts

@@ -1,4 +1,4 @@
-import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps, UseFieldResponse } from '@mui/x-date-pickers/internals';
+import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps, UseFieldReturnValue } from '@mui/x-date-pickers/internals';
 import { UseTextFieldBaseForwardedProps } from "./useTextFieldProps.js";
 import { PickerAnyRangeManager } from "../../internals/models/managers.js";
 import { UseMultiInputRangeFieldRootPropsReturnValue } from "./useMultiInputRangeFieldRootProps.js";
@@ -63,7 +63,7 @@ interface UseMultiInputRangeFieldReturnValue<TManager extends PickerAnyRangeMana
   endTextField: UseMultiInputRangeFieldTextFieldProps<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TTextFieldProps>;
   enableAccessibleFieldDOMStructure: PickerManagerEnableAccessibleFieldDOMStructure<TManager>;
 }
-export type UseMultiInputRangeFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseTextFieldBaseForwardedProps> = Omit<UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps & {
+export type UseMultiInputRangeFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseTextFieldBaseForwardedProps> = Omit<UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TForwardedProps & {
   onKeyDown: React.KeyboardEventHandler;
   onClick: React.MouseEventHandler;
   onFocus: React.FocusEventHandler;

package/esm/hooks/useMultiInputRangeField/useTextFieldProps.js

@@ -4,8 +4,7 @@ const _excluded = ["clearable", "onClear", "openPickerAriaLabel"];
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useDateManager, useDateTimeManager, useTimeManager } from '@mui/x-date-pickers/managers';
-import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
-import { useField, useFieldInternalPropsWithDefaults, useNullableFieldPrivateContext, useNullablePickerContext, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
+import { useField, useNullableFieldPrivateContext, useNullablePickerContext, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
 import { useNullablePickerRangePositionContext } from "../../internals/hooks/useNullablePickerRangePositionContext.js";
 /**
  * @ignore - internal hook.
@@ -102,21 +101,10 @@ export function useTextFieldProps(parameters) {
     onKeyDown: handleKeyDown,
     onChange: handleChange
   });
-  const splittedProps = useSplitFieldProps(allProps, valueType);
-  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
-    manager,
-    internalProps: splittedProps.internalProps,
-    skipContextFieldRefAssignment: rangePosition !== position
-  });
   const _ref = useField({
-      forwardedProps: splittedProps.forwardedProps,
-      internalProps: internalPropsWithDefaults,
-      valueManager: manager.internal_valueManager,
-      fieldValueManager: manager.internal_fieldValueManager,
-      validator: manager.validator,
-      valueType: manager.valueType,
-      // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-      getOpenPickerButtonAriaLabel: () => ''
+      manager,
+      props: allProps,
+      skipContextFieldRefAssignment: rangePosition !== position
     }),
     fieldResponse = _objectWithoutPropertiesLoose(_ref, _excluded);
   React.useEffect(() => {

package/esm/index.js

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

package/esm/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTc0MjI0ODgwMDAwMA==";
+  const releaseInfo = "MTc0MjUxNTIwMDAwMA==";
   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/esm/managers/useDateRangeManager.js

@@ -32,10 +32,10 @@ export function useDateRangeManager(parameters = {}) {
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
-function useOpenPickerButtonAriaLabel() {
+function useOpenPickerButtonAriaLabel(value) {
   const utils = useUtils();
   const translations = usePickerTranslations();
-  return React.useCallback(value => {
+  return React.useMemo(() => {
     return translations.openRangePickerDialogue(formatRange(utils, value, 'fullDate'));
-  }, [translations, utils]);
+  }, [value, translations, utils]);
 }

package/esm/managers/useDateTimeRangeManager.js

@@ -32,10 +32,10 @@ export function useDateTimeRangeManager(parameters = {}) {
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
-function useOpenPickerButtonAriaLabel() {
+function useOpenPickerButtonAriaLabel(value) {
   const utils = useUtils();
   const translations = usePickerTranslations();
-  return React.useCallback(value => {
+  return React.useMemo(() => {
     return translations.openRangePickerDialogue(formatRange(utils, value, 'fullDate'));
-  }, [translations, utils]);
+  }, [value, translations, utils]);
 }

package/esm/managers/useTimeRangeManager.js

@@ -32,12 +32,12 @@ export function useTimeRangeManager(parameters = {}) {
   }), [enableAccessibleFieldDOMStructure, dateSeparator, ampm]);
 }
 function createUseOpenPickerButtonAriaLabel(ampm) {
-  return function useOpenPickerButtonAriaLabel() {
+  return function useOpenPickerButtonAriaLabel(value) {
     const utils = useUtils();
     const translations = usePickerTranslations();
-    return React.useCallback(value => {
+    return React.useMemo(() => {
       const formatKey = ampm ?? utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
       return translations.openRangePickerDialogue(formatRange(utils, value, formatKey));
-    }, [translations, utils]);
+    }, [value, translations, utils]);
   };
 }

package/hooks/useMultiInputRangeField/useMultiInputRangeField.d.ts

@@ -1,4 +1,4 @@
-import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps, UseFieldResponse } from '@mui/x-date-pickers/internals';
+import { PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerFieldInternalProps, UseFieldReturnValue } from '@mui/x-date-pickers/internals';
 import { UseTextFieldBaseForwardedProps } from "./useTextFieldProps.js";
 import { PickerAnyRangeManager } from "../../internals/models/managers.js";
 import { UseMultiInputRangeFieldRootPropsReturnValue } from "./useMultiInputRangeFieldRootProps.js";
@@ -63,7 +63,7 @@ interface UseMultiInputRangeFieldReturnValue<TManager extends PickerAnyRangeMana
   endTextField: UseMultiInputRangeFieldTextFieldProps<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TTextFieldProps>;
   enableAccessibleFieldDOMStructure: PickerManagerEnableAccessibleFieldDOMStructure<TManager>;
 }
-export type UseMultiInputRangeFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseTextFieldBaseForwardedProps> = Omit<UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps & {
+export type UseMultiInputRangeFieldTextFieldProps<TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseTextFieldBaseForwardedProps> = Omit<UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TForwardedProps & {
   onKeyDown: React.KeyboardEventHandler;
   onClick: React.MouseEventHandler;
   onFocus: React.FocusEventHandler;

package/hooks/useMultiInputRangeField/useTextFieldProps.js

@@ -11,7 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _managers = require("@mui/x-date-pickers/managers");
-var _hooks = require("@mui/x-date-pickers/hooks");
 var _internals = require("@mui/x-date-pickers/internals");
 var _useNullablePickerRangePositionContext = require("../../internals/hooks/useNullablePickerRangePositionContext");
 const _excluded = ["clearable", "onClear", "openPickerAriaLabel"];
@@ -110,21 +109,10 @@ function useTextFieldProps(parameters) {
     onKeyDown: handleKeyDown,
     onChange: handleChange
   });
-  const splittedProps = (0, _hooks.useSplitFieldProps)(allProps, valueType);
-  const internalPropsWithDefaults = (0, _internals.useFieldInternalPropsWithDefaults)({
-    manager,
-    internalProps: splittedProps.internalProps,
-    skipContextFieldRefAssignment: rangePosition !== position
-  });
   const _ref = (0, _internals.useField)({
-      forwardedProps: splittedProps.forwardedProps,
-      internalProps: internalPropsWithDefaults,
-      valueManager: manager.internal_valueManager,
-      fieldValueManager: manager.internal_fieldValueManager,
-      validator: manager.validator,
-      valueType: manager.valueType,
-      // TODO v8: Add a real aria label before moving the opening logic to the field on range pickers.
-      getOpenPickerButtonAriaLabel: () => ''
+      manager,
+      props: allProps,
+      skipContextFieldRefAssignment: rangePosition !== position
     }),
     fieldResponse = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   React.useEffect(() => {

package/index.js

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

package/internals/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTc0MjI0ODgwMDAwMA==";
+  const releaseInfo = "MTc0MjUxNTIwMDAwMA==";
   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/managers/useDateRangeManager.js

@@ -39,10 +39,10 @@ function useDateRangeManager(parameters = {}) {
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
-function useOpenPickerButtonAriaLabel() {
+function useOpenPickerButtonAriaLabel(value) {
   const utils = (0, _internals.useUtils)();
   const translations = (0, _hooks.usePickerTranslations)();
-  return React.useCallback(value => {
+  return React.useMemo(() => {
     return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, 'fullDate'));
-  }, [translations, utils]);
+  }, [value, translations, utils]);
 }

package/managers/useDateTimeRangeManager.js

@@ -39,10 +39,10 @@ function useDateTimeRangeManager(parameters = {}) {
     internal_useOpenPickerButtonAriaLabel: useOpenPickerButtonAriaLabel
   }), [enableAccessibleFieldDOMStructure, dateSeparator]);
 }
-function useOpenPickerButtonAriaLabel() {
+function useOpenPickerButtonAriaLabel(value) {
   const utils = (0, _internals.useUtils)();
   const translations = (0, _hooks.usePickerTranslations)();
-  return React.useCallback(value => {
+  return React.useMemo(() => {
     return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, 'fullDate'));
-  }, [translations, utils]);
+  }, [value, translations, utils]);
 }

package/managers/useTimeRangeManager.js

@@ -39,12 +39,12 @@ function useTimeRangeManager(parameters = {}) {
   }), [enableAccessibleFieldDOMStructure, dateSeparator, ampm]);
 }
 function createUseOpenPickerButtonAriaLabel(ampm) {
-  return function useOpenPickerButtonAriaLabel() {
+  return function useOpenPickerButtonAriaLabel(value) {
     const utils = (0, _internals.useUtils)();
     const translations = (0, _hooks.usePickerTranslations)();
-    return React.useCallback(value => {
+    return React.useMemo(() => {
       const formatKey = ampm ?? utils.is12HourCycleInCurrentLocale() ? 'fullTime12h' : 'fullTime24h';
       return translations.openRangePickerDialogue((0, _dateUtils.formatRange)(utils, value, formatKey));
-    }, [translations, utils]);
+    }, [value, translations, utils]);
   };
 }

package/modern/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -5,7 +5,7 @@ import { Theme } from '@mui/material/styles';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { PickerOwnerState, PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models';
 import { PickersCalendarHeader, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { PickerDayOwnerState } from '@mui/x-date-pickers/DateCalendar';
+import { PickerDayOwnerState } from '@mui/x-date-pickers/PickersDay';
 import { BaseDateValidationProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, ExportedUseViewsOptions, PickerRangeValue, FormProps } from '@mui/x-date-pickers/internals';
 import { RangePosition } from "../models/index.js";
 import { DateRangeCalendarClasses } from "./dateRangeCalendarClasses.js";

package/modern/DateRangePicker/DateRangePicker.js

@@ -7,6 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeProps } from '@mui/material/styles';
+import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '@mui/x-date-pickers/internals';
 import { refType } from '@mui/utils';
 import { DesktopDateRangePicker } from "../DesktopDateRangePicker/index.js";
 import { MobileDateRangePicker } from "../MobileDateRangePicker/index.js";
@@ -27,7 +28,7 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef(function DateRangePicker(i
     name: 'MuiDateRangePicker'
   });
   const {
-      desktopModeMediaQuery = '@media (pointer: fine)'
+      desktopModeMediaQuery = DEFAULT_DESKTOP_MODE_MEDIA_QUERY
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -124,6 +125,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   disableHighlightToday: PropTypes.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/modern/DateRangePickerDay/DateRangePickerDay.d.ts

@@ -1,45 +1,5 @@
 import * as React from 'react';
-import { PickersDayProps } from '@mui/x-date-pickers/PickersDay';
-import { DateRangePickerDayClasses } from "./dateRangePickerDayClasses.js";
-export interface DateRangePickerDayProps extends Omit<PickersDayProps, 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown'> {
-  /**
-   * Set to `true` if the `day` is in a highlighted date range.
-   */
-  isHighlighting: boolean;
-  /**
-   * Set to `true` if the `day` is the end of a highlighted date range.
-   */
-  isEndOfHighlighting: boolean;
-  /**
-   * Set to `true` if the `day` is the start of a highlighted date range.
-   */
-  isStartOfHighlighting: boolean;
-  /**
-   * Set to `true` if the `day` is in a preview date range.
-   */
-  isPreviewing: boolean;
-  /**
-   * Set to `true` if the `day` is the end of a previewing date range.
-   */
-  isEndOfPreviewing: boolean;
-  /**
-   * Set to `true` if the `day` is the start of a previewing date range.
-   */
-  isStartOfPreviewing: boolean;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<DateRangePickerDayClasses>;
-  /**
-   * Indicates if the day should be visually selected.
-   */
-  isVisuallySelected?: boolean;
-  /**
-   * If `true`, the day can be dragged to change the current date range.
-   * @default false
-   */
-  draggable?: boolean;
-}
+import { DateRangePickerDayProps } from "./DateRangePickerDay.types.js";
 type DateRangePickerDayComponent = (props: DateRangePickerDayProps & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element;
 /**
  * Demos: