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

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

@@ -1,26 +1,35 @@
-import { PickersPopperSlots, PickersPopperSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from '../models/useRangePicker';
-export interface UseDesktopRangePickerSlots extends UseRangePickerSlots, PickersPopperSlots {
+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 UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickersPopperSlotProps {
+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;
+  /**
+   * 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> {
-    /**
-     * Overridable component slots.
-     * @default {}
-     */
-    slots: UseDesktopRangePickerSlots;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     */
-    slotProps?: UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
-}
-export interface UseDesktopRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, 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 {}
+   */
+  slots: UseDesktopRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseDesktopRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
+export interface UseDesktopRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {}

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.types.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -1,2 +1,2 @@
-export { useMobileRangePicker } from './useMobileRangePicker';
-export type { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps, UseMobileRangePickerProps, } from './useMobileRangePicker.types';
+export { useMobileRangePicker } from "./useMobileRangePicker.js";
+export type { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps, UseMobileRangePickerProps } from './useMobileRangePicker.types';

package/internals/hooks/useMobileRangePicker/index.js

@@ -1 +1,12 @@
-export { useMobileRangePicker } from "./useMobileRangePicker.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useMobileRangePicker", {
+  enumerable: true,
+  get: function () {
+    return _useMobileRangePicker.useMobileRangePicker;
+  }
+});
+var _useMobileRangePicker = require("./useMobileRangePicker");

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

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { UseMobileRangePickerParams, UseMobileRangePickerProps } from './useMobileRangePicker.types';
-export declare const useMobileRangePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, ...pickerParams }: UseMobileRangePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
-    renderPicker: () => React.JSX.Element;
-};
+import { UseMobileRangePickerParams, UseMobileRangePickerProps } from "./useMobileRangePicker.types.js";
+export declare const useMobileRangePicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({
+  props,
+  ...pickerParams
+}: UseMobileRangePickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+  renderPicker: () => React.JSX.Element;
+};

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -1,104 +1,69 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props"];
-import * as React from 'react';
-import useSlotProps from '@mui/utils/useSlotProps';
-import { useLicenseVerifier } from '@mui/x-license';
-import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, PickersModalDialog, PickerProvider, PickerFieldUIContextProvider } from '@mui/x-date-pickers/internals';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
-import useId from '@mui/utils/useId';
-import { useEnrichedRangePickerField } from "../useEnrichedRangePickerField.js";
-import { getReleaseInfo } from "../../utils/releaseInfo.js";
-import { useRangePosition } from "../useRangePosition.js";
-import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = getReleaseInfo();
-export const useMobileRangePicker = _ref => {
+"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.useMobileRangePicker = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
+var _xLicense = require("@mui/x-license");
+var _PickersLayout = require("@mui/x-date-pickers/PickersLayout");
+var _internals = require("@mui/x-date-pickers/internals");
+var _hooks = require("@mui/x-date-pickers/hooks");
+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"];
+const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
+const useMobileRangePicker = _ref => {
   let {
       props
     } = _ref,
-    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
-  useLicenseVerifier('x-date-pickers-pro', releaseInfo);
+    pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
   const {
     slots,
     slotProps: innerSlotProps,
-    className,
-    sx,
     label,
     inputRef,
-    name,
-    readOnly,
-    disableOpenPicker,
     localeText
   } = props;
-  const startFieldRef = React.useRef(null);
-  const endFieldRef = React.useRef(null);
-  const singleInputFieldRef = React.useRef(null);
-  const fieldType = slots.field.fieldType ?? 'multi-input';
-  const rangePositionResponse = useRangePosition(props, fieldType === 'single-input' ? singleInputFieldRef : undefined);
-  const labelId = useId();
-  const contextTranslations = usePickerTranslations();
-  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 rangePositionResponse = (0, _useRangePosition.useRangePosition)(props);
+  const contextTranslations = (0, _hooks.usePickerTranslations)();
   const {
     providerProps,
     renderCurrentView,
     ownerState
-  } = usePicker(_extends({}, pickerParams, {
+  } = (0, _internals.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
     variant: 'mobile',
     autoFocusView: true,
-    fieldRef,
+    viewContainerRole: 'dialog',
     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';
+  const labelId = providerProps.privateContextValue.labelId;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const Field = slots.field;
-  const fieldProps = useSlotProps({
-    elementType: Field,
-    externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({
-      // Internal props
-      readOnly: readOnly ?? true,
-      // Forwarded props
-      className,
-      sx
-    }, fieldType === 'single-input' && !!inputRef && {
-      inputRef
-    }, fieldType === 'single-input' && {
-      name
+  const _useSlotProps = (0, _useSlotProps2.default)({
+      elementType: Field,
+      externalSlotProps: innerSlotProps?.field,
+      additionalProps: (0, _extends2.default)({}, fieldType === 'single-input' && isToolbarHidden && {
+        id: labelId
+      }),
+      ownerState
     }),
-    ownerState
-  });
-  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
-  const enrichedFieldResponse = useEnrichedRangePickerField(_extends({
-    variant: 'mobile',
-    fieldType,
-    // These direct access to `providerProps` will go away once the range fields handle the picker opening
-    contextValue: providerProps.contextValue,
-    fieldPrivateContextValue: providerProps.fieldPrivateContextValue,
-    readOnly,
-    labelId,
-    disableOpenPicker,
-    label,
-    localeText,
-    pickerSlots: slots,
-    pickerSlotProps: innerSlotProps,
-    fieldProps,
-    startFieldRef,
-    endFieldRef,
-    singleInputFieldRef
-  }, rangePositionResponse));
-  const Layout = slots?.layout ?? PickersLayout;
-  const finalLocaleText = _extends({}, contextTranslations, localeText);
+    fieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
+  const Layout = slots?.layout ?? _PickersLayout.PickersLayout;
+  const finalLocaleText = (0, _extends2.default)({}, contextTranslations, localeText);
   let labelledById = pickerParams.valueType === 'date-time' ? `${labelId}-start-toolbar ${labelId}-end-toolbar` : labelId;
   if (isToolbarHidden) {
     const labels = [];
@@ -114,26 +79,31 @@ export const useMobileRangePicker = _ref => {
     }
     labelledById = labels.length > 0 ? labels.join(' ') : undefined;
   }
-  const slotProps = _extends({}, innerSlotProps, {
-    toolbar: _extends({}, innerSlotProps?.toolbar, {
+  const slotProps = (0, _extends2.default)({}, innerSlotProps, {
+    toolbar: (0, _extends2.default)({}, innerSlotProps?.toolbar, {
       titleId: labelId
     }),
-    mobilePaper: _extends({
+    mobilePaper: (0, _extends2.default)({
       'aria-labelledby': labelledById
     }, innerSlotProps?.mobilePaper)
+  }, fieldType === 'multi-input' && {
+    textField: slotOwnerState => {
+      return (0, _extends2.default)({}, (0, _resolveComponentProps.default)(innerSlotProps?.textField, slotOwnerState), {
+        id: `${labelId}-${slotOwnerState.position}`
+      });
+    }
   });
-  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-    // This override will go away once the range fields handle the picker opening
-    fieldPrivateContextValue: _extends({}, providerProps.fieldPrivateContextValue, enrichedFieldResponse.fieldPrivateContextValue),
-    children: /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
+  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerProvider, (0, _extends2.default)({}, providerProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
-      children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
+      inputRef: inputRef,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_usePickerRangePositionContext.PickerRangePositionContext.Provider, {
         value: rangePositionResponse,
-        children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldResponse.fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersModalDialog, {
           slots: slots,
           slotProps: slotProps,
-          children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
             slots: slots,
             slotProps: slotProps,
             children: renderCurrentView()
@@ -145,4 +115,5 @@ export const useMobileRangePicker = _ref => {
   return {
     renderPicker
   };
-};
+};
+exports.useMobileRangePicker = useMobileRangePicker;

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

@@ -1,22 +1,31 @@
-import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from '../models/useRangePicker';
-export interface UseMobileRangePickerSlots extends UseRangePickerSlots, PickersModalDialogSlots {
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickerFieldSlotProps, PickerOwnerState } from '@mui/x-date-pickers/models';
+import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue, PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlotProps, ExportedPickersLayoutSlots, PickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
+import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps } from "../models/useRangePicker.js";
+export interface UseMobileRangePickerSlots extends PickersModalDialogSlots, ExportedPickersLayoutSlots<PickerRangeValue>, PickerFieldUISlotsFromContext {
+  /**
+   * Component used to enter the date with the keyboard.
+   */
+  field: React.ElementType;
 }
-export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickersModalDialogSlotProps {
+export interface ExportedUseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<PickerRangeValue>, PickerFieldUISlotPropsFromContext {
+  field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerRangeValue, TEnableAccessibleFieldDOMStructure> & {
+    dateSeparator?: string;
+  }, {}, PickerOwnerState>;
 }
-export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {
-}
-export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<any, TView, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
-    /**
-     * Overridable component slots.
-     * @default {}
-     */
-    slots: UseMobileRangePickerSlots;
-    /**
-     * The props used for each component slot.
-     * @default {}
-     */
-    slotProps?: UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
-}
-export interface UseMobileRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {
+export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerRangeValue>, 'toolbar'> {}
+export interface MobileRangeOnlyPickerProps extends RangeOnlyPickerProps {}
+export interface UseMobileRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerProps<PickerRangeValue, TView, TError, any>> extends UseRangePickerProps<TView, TError, TExternalProps> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: UseMobileRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
+export interface UseMobileRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseMobileRangePickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends UseRangePickerParams<TView, TExternalProps> {}

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.types.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/hooks/useNullablePickerRangePositionContext.d.ts

@@ -2,4 +2,4 @@
  * Returns information about the range position of the picker that wraps the current component.
  * If no picker wraps the current component, returns `null`.
  */
-export declare function useNullablePickerRangePositionContext(): import("./useRangePosition").UseRangePositionResponse | null;
+export declare function useNullablePickerRangePositionContext(): import("./useRangePosition").UseRangePositionResponse | null;

package/internals/hooks/useNullablePickerRangePositionContext.js

@@ -1,10 +1,16 @@
-import * as React from 'react';
-import { PickerRangePositionContext } from "../../hooks/usePickerRangePositionContext.js";
+"use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNullablePickerRangePositionContext = useNullablePickerRangePositionContext;
+var React = _interopRequireWildcard(require("react"));
+var _usePickerRangePositionContext = require("../../hooks/usePickerRangePositionContext");
 /**
  * Returns information about the range position of the picker that wraps the current component.
  * If no picker wraps the current component, returns `null`.
  */
-export function useNullablePickerRangePositionContext() {
-  return React.useContext(PickerRangePositionContext);
+function useNullablePickerRangePositionContext() {
+  return React.useContext(_usePickerRangePositionContext.PickerRangePositionContext);
 }

package/internals/hooks/useRangePosition.d.ts

@@ -1,27 +1,24 @@
-import * as React from 'react';
-import { FieldRef } from '@mui/x-date-pickers/models';
-import { PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { RangePosition } from '../../models';
+import { RangePosition } from "../../models/index.js";
 export interface UseRangePositionProps {
-    /**
-     * The position in the currently edited date range.
-     * Used when the component position is controlled.
-     */
-    rangePosition?: RangePosition;
-    /**
-     * The initial position in the edited date range.
-     * Used when the component is not controlled.
-     * @default 'start'
-     */
-    defaultRangePosition?: RangePosition;
-    /**
-     * Callback fired when the range position changes.
-     * @param {RangePosition} rangePosition The new range position.
-     */
-    onRangePositionChange?: (rangePosition: RangePosition) => void;
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition?: RangePosition;
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition?: RangePosition;
+  /**
+   * Callback fired when the range position changes.
+   * @param {RangePosition} rangePosition The new range position.
+   */
+  onRangePositionChange?: (rangePosition: RangePosition) => void;
 }
 export interface UseRangePositionResponse {
-    rangePosition: RangePosition;
-    setRangePosition: (newPosition: RangePosition) => void;
+  rangePosition: RangePosition;
+  setRangePosition: (newPosition: RangePosition) => void;
 }
-export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<PickerRangeValue> | null>) => UseRangePositionResponse;
+export declare const useRangePosition: (props: UseRangePositionProps) => UseRangePositionResponse;

package/internals/hooks/useRangePosition.js

@@ -1,30 +1,26 @@
-import useControlled from '@mui/utils/useControlled';
-import useEventCallback from '@mui/utils/useEventCallback';
-export const useRangePosition = (props, singleInputFieldRef) => {
-  const [rangePosition, setRangePosition] = useControlled({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRangePosition = void 0;
+var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+const useRangePosition = props => {
+  const [rangePosition, setRangePosition] = (0, _useControlled.default)({
     name: 'useRangePosition',
     state: 'rangePosition',
     controlled: props.rangePosition,
     default: props.defaultRangePosition ?? 'start'
   });
-
-  // When using a single input field,
-  // we want to select the 1st section of the edited date when updating the range position.
-  const syncRangePositionWithSingleInputField = newRangePosition => {
-    if (singleInputFieldRef?.current == null) {
-      return;
-    }
-    const sections = singleInputFieldRef.current.getSections();
-    const targetActiveSectionIndex = newRangePosition === 'start' ? 0 : sections.length / 2;
-    singleInputFieldRef.current.setSelectedSections(targetActiveSectionIndex);
-  };
-  const handleRangePositionChange = useEventCallback(newRangePosition => {
+  const handleRangePositionChange = (0, _useEventCallback.default)(newRangePosition => {
     setRangePosition(newRangePosition);
     props.onRangePositionChange?.(newRangePosition);
-    syncRangePositionWithSingleInputField(newRangePosition);
   });
   return {
     rangePosition,
     setRangePosition: handleRangePositionChange
   };
-};
+};
+exports.useRangePosition = useRangePosition;

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

@@ -1,2 +1,2 @@
-export { useStaticRangePicker } from './useStaticRangePicker';
-export type { UseStaticRangePickerSlots, UseStaticRangePickerSlotProps, StaticRangeOnlyPickerProps, } from './useStaticRangePicker.types';
+export { useStaticRangePicker } from "./useStaticRangePicker.js";
+export type { UseStaticRangePickerSlots, UseStaticRangePickerSlotProps, StaticRangeOnlyPickerProps } from './useStaticRangePicker.types';

package/internals/hooks/useStaticRangePicker/index.js

@@ -1 +1,12 @@
-export { useStaticRangePicker } from "./useStaticRangePicker.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useStaticRangePicker", {
+  enumerable: true,
+  get: function () {
+    return _useStaticRangePicker.useStaticRangePicker;
+  }
+});
+var _useStaticRangePicker = require("./useStaticRangePicker");

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

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
-import { UseStaticRangePickerParams, UseStaticRangePickerProps } from './useStaticRangePicker.types';
+import { UseStaticRangePickerParams, UseStaticRangePickerProps } from "./useStaticRangePicker.types.js";
 /**
  * Hook managing all the range static pickers:
  * - StaticDateRangePicker
  */
-export declare const useStaticRangePicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>>({ props, ref, ...pickerParams }: UseStaticRangePickerParams<TView, TExternalProps>) => {
-    renderPicker: () => React.JSX.Element;
-};
+export declare const useStaticRangePicker: <TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>>({
+  props,
+  ...pickerParams
+}: UseStaticRangePickerParams<TView, TExternalProps>) => {
+  renderPicker: () => React.JSX.Element;
+};