@mui/x-date-pickers-pro 8.0.0-alpha.12 → 8.0.0-alpha.14

package/hooks/useMultiInputRangeField/useMultiInputRangeField.js

@@ -1,17 +1,15 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useMultiInputRangeField = useMultiInputRangeField;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _internals = require("@mui/x-date-pickers/internals");
 var _validation = require("@mui/x-date-pickers/validation");
-var _useMultiInputRangeFieldTextFieldProps = require("./useMultiInputRangeFieldTextFieldProps");
+var _useTextFieldProps = require("./useTextFieldProps");
 var _useMultiInputRangeFieldSelectedSections = require("./useMultiInputRangeFieldSelectedSections");
+var _useMultiInputRangeFieldRootProps = require("./useMultiInputRangeFieldRootProps");
 /**
  * Basic example:
  *
@@ -24,36 +22,38 @@ var _useMultiInputRangeFieldSelectedSections = require("./useMultiInputRangeFiel
  * function MultiInputField(props) {
  *   const manager = useDateRangeManager();
  *   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
- *   const { startDate, endDate } = useMultiInputRangeField({
+ *   const response = useMultiInputRangeField({
  *     manager,
  *     internalProps,
- *     startForwardedProps: forwardedProps,
- *     endForwardedProps: forwardedProps,
+ *     startTextFieldProps: {},
+ *     endTextFieldProps: {},
+ *     rootProps: forwardedProps,
  *   });
  *
  *   return (
- *     <Box {...forwardedProps}>
- *       <PickersTextField {...startDate} />
+ *     <Box {...response.root}>
+ *       <PickersTextField {...response.startTextField} />
  *       <span>{' – '}</span>
- *       <PickersTextField {...endDate} />
+ *       <PickersTextField {...response.endTextField} />
  *     </Box>
  *   );
  * }
  * ```
  *
- * @param {UseMultiInputRangeFieldParameters<TManager, TForwardedProps>} parameters The parameters of the hook.
+ * @param {UseMultiInputRangeFieldParameters<TManager, TTextFieldProps>} parameters The parameters of the hook.
  * @param {TManager} parameters.manager The manager of the field.
  * @param {PickerManagerFieldInternalProps<TManager>} parameters.internalProps The internal props of the field.
- * @param {TForwardedProps} parameters.startForwardedProps The forwarded props of the start field.
- * @param {TForwardedProps} parameters.endForwardedProps The forwarded props of the end field.
- * @returns {UseMultiInputRangeFieldReturnValue<TManager, TForwardedProps>} The props to pass to the start and the end components.
+ * @param {TTextFieldProps} parameters.startForwardedProps The forwarded props of the start field.
+ * @param {TTextFieldProps} parameters.endForwardedProps The forwarded props of the end field.
+ * @returns {UseMultiInputRangeFieldReturnValue<TManager, TTextFieldProps>} The props to pass to the start and the end components.
  */
 function useMultiInputRangeField(parameters) {
   const {
     manager,
     internalProps,
-    startForwardedProps,
-    endForwardedProps
+    rootProps,
+    startTextFieldProps,
+    endTextFieldProps
   } = parameters;
   const internalPropsWithDefaults = (0, _internals.useFieldInternalPropsWithDefaults)({
     manager,
@@ -90,34 +90,20 @@ function useMultiInputRangeField(parameters) {
     onChange,
     valueManager: manager.internal_valueManager
   });
-  const {
-    validationError,
-    getValidationErrorForNewValue
-  } = (0, _validation.useValidation)({
+  const validation = (0, _validation.useValidation)({
     props: internalPropsWithDefaults,
     value,
     timezone,
     validator: manager.validator,
     onError: internalPropsWithDefaults.onError
   });
-  const buildChangeHandler = index => {
-    return (newSingleValue, rawContext) => {
-      const newRange = index === 0 ? [newSingleValue, value[1]] : [value[0], newSingleValue];
-      const context = (0, _extends2.default)({}, rawContext, {
-        validationError: getValidationErrorForNewValue(newRange)
-      });
-      handleValueChange(newRange, context);
-    };
-  };
-  const handleStartDateChange = (0, _useEventCallback.default)(buildChangeHandler(0));
-  const handleEndDateChange = (0, _useEventCallback.default)(buildChangeHandler(1));
   const selectedSectionsResponse = (0, _useMultiInputRangeFieldSelectedSections.useMultiInputRangeFieldSelectedSections)({
     selectedSections,
     onSelectedSectionsChange,
     unstableStartFieldRef,
     unstableEndFieldRef
   });
-  const sharedProps = {
+  const sharedInternalProps = {
     disabled,
     readOnly,
     timezone,
@@ -126,30 +112,33 @@ function useMultiInputRangeField(parameters) {
     shouldRespectLeadingZeros,
     enableAccessibleFieldDOMStructure
   };
-  const startDateProps = (0, _useMultiInputRangeFieldTextFieldProps.useMultiInputRangeFieldTextFieldProps)({
+  const rootResponse = (0, _useMultiInputRangeFieldRootProps.useMultiInputRangeFieldRootProps)(rootProps);
+  const startTextFieldResponse = (0, _useTextFieldProps.useTextFieldProps)({
     valueType: manager.valueType,
-    fieldProps: (0, _extends2.default)({
-      error: !!validationError[0]
-    }, startForwardedProps, selectedSectionsResponse.start, sharedProps, {
-      value: valueProp === undefined ? undefined : valueProp[0],
-      defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
-      onChange: handleStartDateChange,
-      autoFocus // Do not add on end field.
-    })
+    position: 'start',
+    value,
+    onChange: handleValueChange,
+    autoFocus,
+    validation,
+    forwardedProps: startTextFieldProps,
+    selectedSectionProps: selectedSectionsResponse.start,
+    sharedInternalProps
   });
-  const endDateProps = (0, _useMultiInputRangeFieldTextFieldProps.useMultiInputRangeFieldTextFieldProps)({
+  const endTextFieldResponse = (0, _useTextFieldProps.useTextFieldProps)({
     valueType: manager.valueType,
-    fieldProps: (0, _extends2.default)({
-      error: !!validationError[1]
-    }, endForwardedProps, selectedSectionsResponse.end, sharedProps, {
-      value: valueProp === undefined ? undefined : valueProp[1],
-      defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
-      onChange: handleEndDateChange
-    })
+    position: 'end',
+    value,
+    onChange: handleValueChange,
+    autoFocus,
+    validation,
+    forwardedProps: endTextFieldProps,
+    selectedSectionProps: selectedSectionsResponse.end,
+    sharedInternalProps
   });
   return {
-    startDate: startDateProps,
-    endDate: endDateProps,
+    root: rootResponse,
+    startTextField: startTextFieldResponse,
+    endTextField: endTextFieldResponse,
     enableAccessibleFieldDOMStructure
   };
 }

package/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @ignore - internal hook.
+ */
+export declare function useMultiInputRangeFieldRootProps<TForwardedProps extends {
+  [key: string]: any;
+}>(forwardedProps: TForwardedProps): UseMultiInputRangeFieldRootPropsReturnValue<TForwardedProps>;
+export type UseMultiInputRangeFieldRootPropsReturnValue<TForwardedProps extends {
+  [key: string]: any;
+}> = Omit<TForwardedProps, 'onBlur'> & {
+  onBlur: () => void;
+};

package/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultiInputRangeFieldRootProps = useMultiInputRangeFieldRootProps;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _internals = require("@mui/x-date-pickers/internals");
+/**
+ * @ignore - internal hook.
+ */
+function useMultiInputRangeFieldRootProps(forwardedProps) {
+  const pickerContext = (0, _internals.useNullablePickerContext)();
+  const privatePickerContext = (0, _internals.usePickerPrivateContext)();
+  const handleBlur = (0, _useEventCallback.default)(() => {
+    if (!pickerContext || privatePickerContext.viewContainerRole !== 'tooltip') {
+      return;
+    }
+    (0, _internals.executeInTheNextEventLoopTick)(() => {
+      if (privatePickerContext.rootRefObject.current?.contains((0, _internals.getActiveElement)(document)) || pickerContext.popupRef.current?.contains((0, _internals.getActiveElement)(document))) {
+        return;
+      }
+      privatePickerContext.dismissViews();
+    });
+  });
+  return (0, _extends2.default)({}, forwardedProps, {
+    onBlur: handleBlur
+  });
+}

package/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.d.ts

@@ -3,7 +3,7 @@ import { PickerRangeValue, PickerValue, UseFieldInternalProps } from '@mui/x-dat
 import { FieldRef, FieldSelectedSections } from '@mui/x-date-pickers/models';
 import { MultiInputFieldRefs } from "../../models/index.js";
 interface UseMultiInputRangeFieldSelectedSectionsParameters extends Pick<UseFieldInternalProps<PickerRangeValue, any, any>, 'selectedSections' | 'onSelectedSectionsChange'>, MultiInputFieldRefs {}
-interface UseMultiInputFieldSelectedSectionsResponseItem {
+export interface UseMultiInputFieldSelectedSectionsResponseItem {
   unstableFieldRef?: React.Ref<FieldRef<PickerValue>>;
   selectedSections: FieldSelectedSections;
   onSelectedSectionsChange: (newSelectedSections: FieldSelectedSections) => void;
@@ -12,5 +12,8 @@ interface UseMultiInputFieldSelectedSectionsResponse {
   start: UseMultiInputFieldSelectedSectionsResponseItem;
   end: UseMultiInputFieldSelectedSectionsResponseItem;
 }
+/**
+ * @ignore - internal hook.
+ */
 export declare const useMultiInputRangeFieldSelectedSections: (parameters: UseMultiInputRangeFieldSelectedSectionsParameters) => UseMultiInputFieldSelectedSectionsResponse;
 export {};

package/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -10,6 +9,9 @@ exports.useMultiInputRangeFieldSelectedSections = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+/**
+ * @ignore - internal hook.
+ */
 const useMultiInputRangeFieldSelectedSections = parameters => {
   const unstableEndFieldRef = React.useRef(null);
   const handleUnstableEndFieldRef = (0, _useForkRef.default)(parameters.unstableEndFieldRef, unstableEndFieldRef);

package/hooks/useMultiInputRangeField/useTextFieldProps.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { UseValidationReturnValue } from '@mui/x-date-pickers/validation';
+import { PickerValueType } from '@mui/x-date-pickers/models';
+import { FieldChangeHandler, PickerManagerEnableAccessibleFieldDOMStructure, PickerManagerError, PickerRangeValue, PickerValue, RangePosition, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { PickerAnyRangeManager } from "../../internals/models/managers.js";
+import { UseMultiInputFieldSelectedSectionsResponseItem } from "./useMultiInputRangeFieldSelectedSections.js";
+import type { UseMultiInputRangeFieldTextFieldProps } from './useMultiInputRangeField';
+/**
+ * @ignore - internal hook.
+ */
+export declare function useTextFieldProps<TManager extends PickerAnyRangeManager, TForwardedProps extends UseTextFieldBaseForwardedProps>(parameters: UseTextFieldPropsParameters<TManager, TForwardedProps>): UseMultiInputRangeFieldTextFieldProps<PickerManagerEnableAccessibleFieldDOMStructure<TManager>, TForwardedProps>;
+interface UseTextFieldPropsParameters<TManager extends PickerAnyRangeManager, TForwardedProps extends UseTextFieldBaseForwardedProps> {
+  valueType: PickerValueType;
+  value: PickerRangeValue;
+  onChange: FieldChangeHandler<PickerRangeValue, PickerManagerError<TManager>>;
+  autoFocus: boolean | undefined;
+  forwardedProps: TForwardedProps;
+  sharedInternalProps: UseTextFieldSharedInternalProps<TManager>;
+  selectedSectionProps: UseMultiInputFieldSelectedSectionsResponseItem;
+  position: RangePosition;
+  validation: UseValidationReturnValue<PickerRangeValue, PickerManagerError<TManager>>;
+}
+export interface UseTextFieldBaseForwardedProps {
+  onKeyDown?: React.KeyboardEventHandler;
+  onClick?: React.MouseEventHandler;
+  onFocus?: React.FocusEventHandler;
+  [key: string]: any;
+}
+interface UseTextFieldSharedInternalProps<TManager extends PickerAnyRangeManager> extends Pick<UseFieldInternalProps<PickerValue, PickerManagerEnableAccessibleFieldDOMStructure<TManager>, PickerManagerError<TManager>>, 'enableAccessibleFieldDOMStructure' | 'disabled' | 'readOnly' | 'timezone' | 'format' | 'formatDensity' | 'shouldRespectLeadingZeros'> {}
+export {};

package/hooks/useMultiInputRangeField/useTextFieldProps.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTextFieldProps = useTextFieldProps;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+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"];
+/**
+ * @ignore - internal hook.
+ */
+function useTextFieldProps(parameters) {
+  const pickerContext = (0, _internals.useNullablePickerContext)();
+  const fieldPrivateContext = (0, _internals.useNullableFieldPrivateContext)();
+  const pickerPrivateContext = (0, _internals.usePickerPrivateContext)();
+  const rangePositionContext = (0, _useNullablePickerRangePositionContext.useNullablePickerRangePositionContext)();
+  const rangePosition = rangePositionContext?.rangePosition ?? 'start';
+  const setRangePosition = rangePositionContext?.setRangePosition;
+  const previousRangePosition = React.useRef(rangePosition);
+  const {
+    forwardedProps,
+    sharedInternalProps,
+    selectedSectionProps,
+    valueType,
+    position,
+    value,
+    onChange,
+    autoFocus,
+    validation
+  } = parameters;
+  let useManager;
+  switch (valueType) {
+    case 'date':
+      {
+        useManager = _managers.useDateManager;
+        break;
+      }
+    case 'time':
+      {
+        useManager = _managers.useTimeManager;
+        break;
+      }
+    case 'date-time':
+      {
+        useManager = _managers.useDateTimeManager;
+        break;
+      }
+    default:
+      {
+        throw new Error(`Unknown valueType: ${valueType}`);
+      }
+  }
+  const manager = useManager({
+    enableAccessibleFieldDOMStructure: sharedInternalProps.enableAccessibleFieldDOMStructure
+  });
+  const openPickerIfPossible = event => {
+    if (!pickerContext) {
+      return;
+    }
+    setRangePosition?.(position);
+    if (pickerContext.triggerStatus === 'enabled') {
+      event.preventDefault();
+      pickerContext.setOpen(true);
+    }
+  };
+  const handleKeyDown = (0, _useEventCallback.default)(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      openPickerIfPossible(event);
+    }
+  });
+
+  // Registering `onClick` listener on the root element as well to correctly handle cases where user is clicking on `label`
+  // which has `pointer-events: none` and due to DOM structure the `input` does not catch the click event
+  const handleClick = (0, _useEventCallback.default)(event => {
+    openPickerIfPossible(event);
+  });
+  const handleFocus = (0, _useEventCallback.default)(event => {
+    forwardedProps.onFocus?.(event);
+    if (pickerContext?.open) {
+      setRangePosition?.(position);
+      if (previousRangePosition.current !== position && pickerContext.initialView) {
+        pickerContext.setView?.(pickerContext.initialView);
+      }
+    }
+  });
+  const handleChange = (0, _useEventCallback.default)((newSingleValue, rawContext) => {
+    const newRange = position === 'start' ? [newSingleValue, value[1]] : [value[0], newSingleValue];
+    const context = (0, _extends2.default)({}, rawContext, {
+      validationError: validation.getValidationErrorForNewValue(newRange)
+    });
+    onChange(newRange, context);
+  });
+  const allProps = (0, _extends2.default)({
+    value: position === 'start' ? value[0] : value[1],
+    error: position === 'start' ? !!validation.validationError[0] : !!validation.validationError[1],
+    id: `${pickerPrivateContext.labelId}-${position}`,
+    autoFocus: position === 'start' ? autoFocus : undefined
+  }, forwardedProps, sharedInternalProps, selectedSectionProps, {
+    onClick: handleClick,
+    onFocus: handleFocus,
+    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: () => ''
+    }),
+    fieldResponse = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  React.useEffect(() => {
+    if (!pickerContext?.open || pickerContext?.variant === 'mobile') {
+      return;
+    }
+    fieldPrivateContext?.fieldRef.current?.focusField();
+    if (!fieldPrivateContext?.fieldRef.current || pickerContext.view === pickerContext.initialView) {
+      // could happen when the user is switching between the inputs
+      previousRangePosition.current = rangePosition;
+      return;
+    }
+
+    // bring back focus to the field
+    // currentView is present on DateTimeRangePicker
+    fieldPrivateContext?.fieldRef.current.setSelectedSections(
+    // use the current view or `0` when the range position has just been swapped
+    previousRangePosition.current === rangePosition ? pickerContext.view : 0);
+    previousRangePosition.current = rangePosition;
+  }, [rangePosition, pickerContext?.open, pickerContext?.variant, pickerContext?.initialView, pickerContext?.view, fieldPrivateContext?.fieldRef]);
+  return fieldResponse;
+}

package/index.js

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

package/internals/hooks/models/index.d.ts

@@ -1 +1 @@
-export type { UseRangePickerSlots, UseRangePickerSlotProps, RangeOnlyPickerProps, UseRangePickerProps, UseRangePickerParams } from './useRangePicker';
+export type { RangeOnlyPickerProps, UseRangePickerProps, UseRangePickerParams } from './useRangePicker';

package/internals/hooks/models/useRangePicker.d.ts

@@ -1,15 +1,8 @@
-import { UsePickerParams, BasePickerProps, ExportedBaseToolbarProps, UsePickerViewsProps, UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps, DateOrTimeViewWithMeridiem, ExportedBaseTabsProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
+import { UsePickerParameters, BasePickerProps, UsePickerProps, UsePickerNonStaticProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { BaseRangeNonStaticPickerProps } from "../../models/index.js";
 import { UseRangePositionProps } from "../useRangePosition.js";
-import { RangePickerFieldSlots, RangePickerFieldSlotProps } from "../useEnrichedRangePickerField.js";
-export interface UseRangePickerSlots extends ExportedPickersLayoutSlots<PickerRangeValue>, RangePickerFieldSlots {}
-export interface UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedPickersLayoutSlotProps<PickerRangeValue>, RangePickerFieldSlotProps<TEnableAccessibleFieldDOMStructure> {
-  tabs?: ExportedBaseTabsProps;
-  toolbar?: ExportedBaseToolbarProps;
-}
-export interface RangeOnlyPickerProps extends UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {}
-export interface UseRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends RangeOnlyPickerProps, BasePickerProps<PickerRangeValue, TView, TError, TExternalProps> {}
-export interface UseRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
+export interface RangeOnlyPickerProps extends UsePickerNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {}
+export interface UseRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>> extends RangeOnlyPickerProps, BasePickerProps<PickerRangeValue, TView, TError, TExternalProps> {}
+export interface UseRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParameters<PickerRangeValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
   props: TExternalProps;
 }

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -13,10 +13,10 @@ var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _xLicense = require("@mui/x-license");
 var _PickersLayout = require("@mui/x-date-pickers/PickersLayout");
 var _internals = require("@mui/x-date-pickers/internals");
-var _useEnrichedRangePickerField = require("../useEnrichedRangePickerField");
 var _releaseInfo = require("../../utils/releaseInfo");
 var _useRangePosition = require("../useRangePosition");
 var _usePickerRangePositionContext = require("../../../hooks/usePickerRangePositionContext");
+var _dateFieldsUtils = require("../../utils/date-fields-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["props"],
   _excluded2 = ["ownerState"];
@@ -31,27 +31,11 @@ const useDesktopRangePicker = _ref => {
     slots,
     slotProps,
     inputRef,
-    readOnly,
-    autoFocus,
-    disableOpenPicker,
     localeText
   } = props;
-  const fieldContainerRef = React.useRef(null);
-  const popperRef = React.useRef(null);
-  const startFieldRef = React.useRef(null);
-  const endFieldRef = React.useRef(null);
-  const singleInputFieldRef = React.useRef(null);
-  const initialView = React.useRef(props.openTo ?? null);
-  const fieldType = slots.field.fieldType ?? 'multi-input';
-  const rangePositionResponse = (0, _useRangePosition.useRangePosition)(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
-  let fieldRef;
-  if (fieldType === 'single-input') {
-    fieldRef = singleInputFieldRef;
-  } else if (rangePositionResponse.rangePosition === 'start') {
-    fieldRef = startFieldRef;
-  } else {
-    fieldRef = endFieldRef;
-  }
+  const fieldType = (0, _dateFieldsUtils.getRangeFieldType)(slots.field);
+  const viewContainerRole = fieldType === 'single-input' ? 'dialog' : 'tooltip';
+  const rangePositionResponse = (0, _useRangePosition.useRangePosition)(props);
   const {
     providerProps,
     renderCurrentView,
@@ -59,77 +43,26 @@ const useDesktopRangePicker = _ref => {
   } = (0, _internals.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
     variant: 'desktop',
-    autoFocusView: false,
-    fieldRef,
+    autoFocusView: viewContainerRole === 'dialog',
+    viewContainerRole,
     localeText
   }));
-
-  // Temporary hack to hide the opening button on the range pickers until we have migrate them to the new opening logic.
-  providerProps.contextValue.triggerStatus = 'hidden';
-  React.useEffect(() => {
-    if (providerProps.contextValue.view) {
-      initialView.current = providerProps.contextValue.view;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const handleBlur = () => {
-    (0, _internals.executeInTheNextEventLoopTick)(() => {
-      if (fieldContainerRef.current?.contains((0, _internals.getActiveElement)(document)) || popperRef.current?.contains((0, _internals.getActiveElement)(document))) {
-        return;
-      }
-
-      // 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;
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Field,
       externalSlotProps: slotProps?.field,
-      additionalProps: {
-        // Internal props
-        readOnly,
-        autoFocus: autoFocus && !props.open,
-        // Forwarded props
-        ref: fieldContainerRef
-      },
       ownerState
     }),
     fieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
-  const enrichedFieldResponse = (0, _useEnrichedRangePickerField.useEnrichedRangePickerField)((0, _extends2.default)({
-    variant: 'desktop',
-    fieldType,
-    // These direct access to `providerProps` will go away once the range fields handle the picker opening
-    contextValue: providerProps.contextValue,
-    fieldPrivateContextValue: providerProps.fieldPrivateContextValue,
-    readOnly,
-    disableOpenPicker,
-    localeText,
-    onBlur: handleBlur,
-    pickerSlotProps: slotProps,
-    pickerSlots: slots,
-    fieldProps,
-    anchorRef: providerProps.contextValue.triggerRef,
-    startFieldRef,
-    endFieldRef,
-    singleInputFieldRef,
-    currentView: providerProps.contextValue.view !== props.openTo ? providerProps.contextValue.view : undefined,
-    initialView: initialView.current ?? undefined
-  }, rangePositionResponse));
   const Layout = slots?.layout ?? _PickersLayout.PickersLayout;
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    // This override will go away once the range fields handle the picker opening
-    fieldPrivateContextValue: (0, _extends2.default)({}, providerProps.fieldPrivateContextValue, enrichedFieldResponse.fieldPrivateContextValue),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
       inputRef: inputRef,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_usePickerRangePositionContext.PickerRangePositionContext.Provider, {
         value: rangePositionResponse,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, enrichedFieldResponse.fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerPopper, {
-          role: "tooltip",
-          containerRef: popperRef,
-          onBlur: handleBlur,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerPopper, {
           slots: slots,
           slotProps: slotProps,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {

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

@@ -1,14 +1,26 @@
-import { PickerPopperSlots, PickerPopperSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from "../models/useRangePicker.js";
-export interface UseDesktopRangePickerSlots extends UseRangePickerSlots, PickerPopperSlots {}
-export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickerPopperSlotProps {}
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/models';
+import { PickerPopperSlots, PickerPopperSlotProps, UsePickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlotProps, ExportedPickersLayoutSlots } from '@mui/x-date-pickers/PickersLayout';
+import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps } from "../models/useRangePicker.js";
+export interface UseDesktopRangePickerSlots extends PickerPopperSlots, ExportedPickersLayoutSlots<PickerRangeValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
+}
+export interface UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerRangeValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & {
+    dateSeparator?: string;
+  }, {}, PickerOwnerState>;
+}
 export interface DesktopRangeOnlyPickerProps extends RangeOnlyPickerProps {
   /**
    * If `true`, the start `input` element is focused during the first mount.
    */
   autoFocus?: boolean;
 }
-export interface UseDesktopRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
+export interface UseDesktopRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
   /**
    * Overridable component slots.
    * @default {}