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

package/esm/hooks/useMultiInputRangeField/useMultiInputRangeField.js

@@ -0,0 +1,140 @@
+'use client';
+
+import { useControlledValue, useFieldInternalPropsWithDefaults } from '@mui/x-date-pickers/internals';
+import { useValidation } from '@mui/x-date-pickers/validation';
+import { useTextFieldProps } from "./useTextFieldProps.js";
+import { useMultiInputRangeFieldSelectedSections } from "./useMultiInputRangeFieldSelectedSections.js";
+import { useMultiInputRangeFieldRootProps } from "./useMultiInputRangeFieldRootProps.js";
+
+/**
+ * Basic example:
+ *
+ * ```tsx
+ * import Box from '@mui/material/Box';
+ * import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
+ * import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+ * import { useDateRangeManager } from '@mui/x-date-pickers-pro/managers';
+ *
+ * function MultiInputField(props) {
+ *   const manager = useDateRangeManager();
+ *   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
+ *   const response = useMultiInputRangeField({
+ *     manager,
+ *     internalProps,
+ *     startTextFieldProps: {},
+ *     endTextFieldProps: {},
+ *     rootProps: forwardedProps,
+ *   });
+ *
+ *   return (
+ *     <Box {...response.root}>
+ *       <PickersTextField {...response.startTextField} />
+ *       <span>{' – '}</span>
+ *       <PickersTextField {...response.endTextField} />
+ *     </Box>
+ *   );
+ * }
+ * ```
+ *
+ * @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 {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.
+ */
+export function useMultiInputRangeField(parameters) {
+  const {
+    manager,
+    internalProps,
+    rootProps,
+    startTextFieldProps,
+    endTextFieldProps
+  } = parameters;
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
+  const {
+    value: valueProp,
+    defaultValue,
+    format,
+    formatDensity,
+    shouldRespectLeadingZeros,
+    onChange,
+    disabled,
+    readOnly,
+    selectedSections,
+    onSelectedSectionsChange,
+    timezone: timezoneProp,
+    enableAccessibleFieldDOMStructure,
+    autoFocus,
+    referenceDate,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  } = internalPropsWithDefaults;
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValue({
+    name: 'useMultiInputRangeField',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    referenceDate,
+    onChange,
+    valueManager: manager.internal_valueManager
+  });
+  const validation = useValidation({
+    props: internalPropsWithDefaults,
+    value,
+    timezone,
+    validator: manager.validator,
+    onError: internalPropsWithDefaults.onError
+  });
+  const selectedSectionsResponse = useMultiInputRangeFieldSelectedSections({
+    selectedSections,
+    onSelectedSectionsChange,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
+  const sharedInternalProps = {
+    disabled,
+    readOnly,
+    timezone,
+    format,
+    formatDensity,
+    shouldRespectLeadingZeros,
+    enableAccessibleFieldDOMStructure
+  };
+  const rootResponse = useMultiInputRangeFieldRootProps(rootProps);
+  const startTextFieldResponse = useTextFieldProps({
+    valueType: manager.valueType,
+    position: 'start',
+    value,
+    onChange: handleValueChange,
+    autoFocus,
+    validation,
+    forwardedProps: startTextFieldProps,
+    selectedSectionProps: selectedSectionsResponse.start,
+    sharedInternalProps
+  });
+  const endTextFieldResponse = useTextFieldProps({
+    valueType: manager.valueType,
+    position: 'end',
+    value,
+    onChange: handleValueChange,
+    autoFocus,
+    validation,
+    forwardedProps: endTextFieldProps,
+    selectedSectionProps: selectedSectionsResponse.end,
+    sharedInternalProps
+  });
+  return {
+    root: rootResponse,
+    startTextField: startTextFieldResponse,
+    endTextField: endTextFieldResponse,
+    enableAccessibleFieldDOMStructure
+  };
+}

package/esm/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/esm/hooks/useMultiInputRangeField/useMultiInputRangeFieldRootProps.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import useEventCallback from '@mui/utils/useEventCallback';
+import { executeInTheNextEventLoopTick, getActiveElement, useNullablePickerContext, usePickerPrivateContext } from '@mui/x-date-pickers/internals';
+
+/**
+ * @ignore - internal hook.
+ */
+export function useMultiInputRangeFieldRootProps(forwardedProps) {
+  const pickerContext = useNullablePickerContext();
+  const privatePickerContext = usePickerPrivateContext();
+  const handleBlur = useEventCallback(() => {
+    if (!pickerContext || privatePickerContext.viewContainerRole !== 'tooltip') {
+      return;
+    }
+    executeInTheNextEventLoopTick(() => {
+      if (privatePickerContext.rootRefObject.current?.contains(getActiveElement(document)) || pickerContext.popupRef.current?.contains(getActiveElement(document))) {
+        return;
+      }
+      privatePickerContext.dismissViews();
+    });
+  });
+  return _extends({}, forwardedProps, {
+    onBlur: handleBlur
+  });
+}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { PickerRangeValue, PickerValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+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 {}
+export interface UseMultiInputFieldSelectedSectionsResponseItem {
+  unstableFieldRef?: React.Ref<FieldRef<PickerValue>>;
+  selectedSections: FieldSelectedSections;
+  onSelectedSectionsChange: (newSelectedSections: FieldSelectedSections) => void;
+}
+interface UseMultiInputFieldSelectedSectionsResponse {
+  start: UseMultiInputFieldSelectedSectionsResponseItem;
+  end: UseMultiInputFieldSelectedSectionsResponseItem;
+}
+/**
+ * @ignore - internal hook.
+ */
+export declare const useMultiInputRangeFieldSelectedSections: (parameters: UseMultiInputRangeFieldSelectedSectionsParameters) => UseMultiInputFieldSelectedSectionsResponse;
+export {};

package/{node → esm}/hooks/useMultiInputRangeField/useMultiInputRangeFieldSelectedSections.js

@@ -1,18 +1,12 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useMultiInputRangeFieldSelectedSections = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-const useMultiInputRangeFieldSelectedSections = parameters => {
+import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
+import useEventCallback from '@mui/utils/useEventCallback';
+/**
+ * @ignore - internal hook.
+ */
+export const useMultiInputRangeFieldSelectedSections = parameters => {
   const unstableEndFieldRef = React.useRef(null);
-  const handleUnstableEndFieldRef = (0, _useForkRef.default)(parameters.unstableEndFieldRef, unstableEndFieldRef);
+  const handleUnstableEndFieldRef = useForkRef(parameters.unstableEndFieldRef, unstableEndFieldRef);
   const [startSelectedSection, setStartSelectedSection] = React.useState(parameters.selectedSections ?? null);
   const [endSelectedSection, setEndSelectedSection] = React.useState(null);
   const getActiveField = () => {
@@ -21,13 +15,13 @@ const useMultiInputRangeFieldSelectedSections = parameters => {
     }
     return 'start';
   };
-  const handleStartSelectedSectionChange = (0, _useEventCallback.default)(newSelectedSections => {
+  const handleStartSelectedSectionChange = useEventCallback(newSelectedSections => {
     setStartSelectedSection(newSelectedSections);
     if (getActiveField() === 'start') {
       parameters.onSelectedSectionsChange?.(newSelectedSections);
     }
   });
-  const handleEndSelectedSectionChange = (0, _useEventCallback.default)(newSelectedSections => {
+  const handleEndSelectedSectionChange = useEventCallback(newSelectedSections => {
     setEndSelectedSection(newSelectedSections);
     if (getActiveField() === 'end') {
       parameters.onSelectedSectionsChange?.(newSelectedSections);
@@ -46,5 +40,4 @@ const useMultiInputRangeFieldSelectedSections = parameters => {
       onSelectedSectionsChange: handleEndSelectedSectionChange
     }
   };
-};
-exports.useMultiInputRangeFieldSelectedSections = useMultiInputRangeFieldSelectedSections;
+};

package/esm/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/esm/hooks/useMultiInputRangeField/useTextFieldProps.js

@@ -0,0 +1,141 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 { useNullablePickerRangePositionContext } from "../../internals/hooks/useNullablePickerRangePositionContext.js";
+/**
+ * @ignore - internal hook.
+ */
+export function useTextFieldProps(parameters) {
+  const pickerContext = useNullablePickerContext();
+  const fieldPrivateContext = useNullableFieldPrivateContext();
+  const pickerPrivateContext = usePickerPrivateContext();
+  const rangePositionContext = 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 = useDateManager;
+        break;
+      }
+    case 'time':
+      {
+        useManager = useTimeManager;
+        break;
+      }
+    case 'date-time':
+      {
+        useManager = 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 = useEventCallback(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 = useEventCallback(event => {
+    openPickerIfPossible(event);
+  });
+  const handleFocus = useEventCallback(event => {
+    forwardedProps.onFocus?.(event);
+    if (pickerContext?.open) {
+      setRangePosition?.(position);
+      if (previousRangePosition.current !== position && pickerContext.initialView) {
+        pickerContext.setView?.(pickerContext.initialView);
+      }
+    }
+  });
+  const handleChange = useEventCallback((newSingleValue, rawContext) => {
+    const newRange = position === 'start' ? [newSingleValue, value[1]] : [value[0], newSingleValue];
+    const context = _extends({}, rawContext, {
+      validationError: validation.getValidationErrorForNewValue(newRange)
+    });
+    onChange(newRange, context);
+  });
+  const allProps = _extends({
+    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 = 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: () => ''
+    }),
+    fieldResponse = _objectWithoutPropertiesLoose(_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/esm/hooks/usePickerRangePositionContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { UseRangePositionResponse } from "../internals/hooks/useRangePosition.js";
+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/esm/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/esm/index.d.ts

@@ -0,0 +1,25 @@
+export * from '@mui/x-date-pickers';
+export * from "./DateRangePickerDay/index.js";
+export * from "./MultiInputDateRangeField/index.js";
+export * from "./MultiInputTimeRangeField/index.js";
+export * from "./MultiInputDateTimeRangeField/index.js";
+export * from "./SingleInputDateRangeField/index.js";
+export * from "./SingleInputTimeRangeField/index.js";
+export * from "./SingleInputDateTimeRangeField/index.js";
+export * from "./DateRangeCalendar/index.js";
+export * from "./PickersRangeCalendarHeader/index.js";
+export * from "./DateRangePicker/index.js";
+export * from "./DesktopDateRangePicker/index.js";
+export * from "./MobileDateRangePicker/index.js";
+export * from "./StaticDateRangePicker/index.js";
+export * from "./TimeRangePicker/index.js";
+export * from "./DesktopTimeRangePicker/index.js";
+export * from "./MobileTimeRangePicker/index.js";
+export * from "./DateTimeRangePicker/index.js";
+export * from "./DesktopDateTimeRangePicker/index.js";
+export * from "./MobileDateTimeRangePicker/index.js";
+export * from "./dateRangeViewRenderers/index.js";
+export * from "./models/index.js";
+export * from "./hooks/index.js";
+export * from "./validation/index.js";
+export * from "./managers/index.js";

package/esm/index.js

@@ -0,0 +1,40 @@
+/**
+ * @mui/x-date-pickers-pro v8.0.0-beta.0
+ *
+ * @license MUI X Commercial
+ * This source code is licensed under the commercial license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from '@mui/x-date-pickers';
+export * from "./DateRangePickerDay/index.js";
+
+// Fields
+export * from "./MultiInputDateRangeField/index.js";
+export * from "./MultiInputTimeRangeField/index.js";
+export * from "./MultiInputDateTimeRangeField/index.js";
+export * from "./SingleInputDateRangeField/index.js";
+export * from "./SingleInputTimeRangeField/index.js";
+export * from "./SingleInputDateTimeRangeField/index.js";
+
+// Calendars
+export * from "./DateRangeCalendar/index.js";
+export * from "./PickersRangeCalendarHeader/index.js";
+
+// New pickers
+export * from "./DateRangePicker/index.js";
+export * from "./DesktopDateRangePicker/index.js";
+export * from "./MobileDateRangePicker/index.js";
+export * from "./StaticDateRangePicker/index.js";
+export * from "./TimeRangePicker/index.js";
+export * from "./DesktopTimeRangePicker/index.js";
+export * from "./MobileTimeRangePicker/index.js";
+export * from "./DateTimeRangePicker/index.js";
+export * from "./DesktopDateTimeRangePicker/index.js";
+export * from "./MobileDateTimeRangePicker/index.js";
+
+// View renderers
+export * from "./dateRangeViewRenderers/index.js";
+export * from "./models/index.js";
+export * from "./hooks/index.js";
+export * from "./validation/index.js";
+export * from "./managers/index.js";

package/esm/internals/constants/dimensions.d.ts

@@ -0,0 +1,3 @@
+export { DAY_MARGIN } from '@mui/x-date-pickers/internals';
+export declare const DAY_RANGE_SIZE = 40;
+export declare const RANGE_VIEW_HEIGHT: number;

package/esm/internals/constants/dimensions.js

@@ -0,0 +1,5 @@
+import { DAY_MARGIN, VIEW_HEIGHT } from '@mui/x-date-pickers/internals';
+export { DAY_MARGIN } from '@mui/x-date-pickers/internals';
+export const DAY_RANGE_SIZE = 40;
+// adding the extra height of the range day element height difference (40px vs 36px)
+export const RANGE_VIEW_HEIGHT = VIEW_HEIGHT + 6 * 2 * DAY_MARGIN;

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

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

package/esm/internals/hooks/models/index.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+import { UsePickerParameters, BasePickerProps, UsePickerProps, UsePickerNonStaticProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { BaseRangeNonStaticPickerProps } from "../../models/index.js";
+import { UseRangePositionProps } from "../useRangePosition.js";
+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/esm/internals/hooks/models/useRangePicker.js

@@ -0,0 +1 @@
+export {};

package/esm/internals/hooks/useDesktopRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { useDesktopRangePicker } from "./useDesktopRangePicker.js";
+export type { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps, UseDesktopRangePickerProps } from './useDesktopRangePicker.types';

package/esm/internals/hooks/useDesktopRangePicker/index.js

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

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

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

package/esm/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["props"],
+  _excluded2 = ["ownerState"];
+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, PickerPopper, PickerProvider, PickerFieldUIContextProvider } from '@mui/x-date-pickers/internals';
+import { getReleaseInfo } from "../../utils/releaseInfo.js";
+import { useRangePosition } from "../useRangePosition.js";
+import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
+import { getRangeFieldType } from "../../utils/date-fields-utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const releaseInfo = getReleaseInfo();
+export const useDesktopRangePicker = _ref => {
+  let {
+      props
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useLicenseVerifier('x-date-pickers-pro', releaseInfo);
+  const {
+    slots,
+    slotProps,
+    inputRef,
+    localeText
+  } = props;
+  const fieldType = getRangeFieldType(slots.field);
+  const viewContainerRole = fieldType === 'single-input' ? 'dialog' : 'tooltip';
+  const rangePositionResponse = useRangePosition(props);
+  const {
+    providerProps,
+    renderCurrentView,
+    ownerState
+  } = usePicker(_extends({}, pickerParams, {
+    props,
+    variant: 'desktop',
+    autoFocusView: viewContainerRole === 'dialog',
+    viewContainerRole,
+    localeText
+  }));
+  const Field = slots.field;
+  const _useSlotProps = useSlotProps({
+      elementType: Field,
+      externalSlotProps: slotProps?.field,
+      ownerState
+    }),
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  const Layout = slots?.layout ?? PickersLayout;
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    children: /*#__PURE__*/_jsx(PickerFieldUIContextProvider, {
+      slots: slots,
+      slotProps: slotProps,
+      inputRef: inputRef,
+      children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
+        value: rangePositionResponse,
+        children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps)), /*#__PURE__*/_jsx(PickerPopper, {
+          slots: slots,
+          slotProps: slotProps,
+          children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+            slots: slots,
+            slotProps: slotProps,
+            children: renderCurrentView()
+          }))
+        })]
+      })
+    })
+  }));
+  return {
+    renderPicker
+  };
+};