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

package/{node → esm}/internals/hooks/useEnrichedRangePickerField.js

@@ -1,20 +1,12 @@
-"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.useEnrichedRangePickerField = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _hooks = require("@mui/x-date-pickers/hooks");
-var _internals = require("@mui/x-date-pickers/internals");
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["clearable", "onClear"];
+import * as React from 'react';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { onSpaceOrEnter } from '@mui/x-date-pickers/internals';
 const useMultiInputFieldSlotProps = ({
   contextValue,
   variant,
@@ -34,9 +26,9 @@ const useMultiInputFieldSlotProps = ({
   startFieldRef,
   endFieldRef
 }) => {
-  const translations = (0, _hooks.usePickerTranslations)();
-  const handleStartFieldRef = (0, _useForkRef.default)(fieldProps.unstableStartFieldRef, startFieldRef);
-  const handleEndFieldRef = (0, _useForkRef.default)(fieldProps.unstableEndFieldRef, endFieldRef);
+  const translations = usePickerTranslations();
+  const handleStartFieldRef = useForkRef(fieldProps.unstableStartFieldRef, startFieldRef);
+  const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
     if (!contextValue.open || variant === 'mobile') {
@@ -51,6 +43,7 @@ const useMultiInputFieldSlotProps = ({
     }
 
     // bring back focus to the field
+    // currentView is present on DateTimeRangePicker
     currentFieldRef.current.setSelectedSections(
     // use the current view or `0` when the range position has just been swapped
     previousRangePosition.current === rangePosition ? currentView : 0);
@@ -88,20 +81,20 @@ const useMultiInputFieldSlotProps = ({
       }
     }
   };
-  const slots = (0, _extends2.default)({
+  const slots = _extends({
     textField: pickerSlots?.textField,
     root: pickerSlots?.fieldRoot,
     separator: pickerSlots?.fieldSeparator
   }, fieldProps.slots);
-  const slotProps = (0, _extends2.default)({}, fieldProps.slotProps, {
+  const slotProps = _extends({}, fieldProps.slotProps, {
     textField: ownerState => {
-      const resolvedComponentProps = (0, _resolveComponentProps.default)(pickerSlotProps?.textField, ownerState);
+      const resolvedComponentProps = resolveComponentProps(pickerSlotProps?.textField, ownerState);
       let textFieldProps;
       let InputProps;
       if (ownerState.position === 'start') {
-        textFieldProps = (0, _extends2.default)({
+        textFieldProps = _extends({
           label: inLocaleText?.start ?? translations.start,
-          onKeyDown: (0, _internals.onSpaceOrEnter)(openRangeStartSelection),
+          onKeyDown: onSpaceOrEnter(openRangeStartSelection),
           onFocus: handleFocusStart,
           focused: contextValue.open ? rangePosition === 'start' : undefined
         }, !readOnly && !contextValue.disabled && {
@@ -110,14 +103,14 @@ const useMultiInputFieldSlotProps = ({
           readOnly: true
         });
         if (anchorRef) {
-          InputProps = (0, _extends2.default)({}, resolvedComponentProps?.InputProps, {
+          InputProps = _extends({}, resolvedComponentProps?.InputProps, {
             ref: anchorRef
           });
         }
       } else {
-        textFieldProps = (0, _extends2.default)({
+        textFieldProps = _extends({
           label: inLocaleText?.end ?? translations.end,
-          onKeyDown: (0, _internals.onSpaceOrEnter)(openRangeEndSelection),
+          onKeyDown: onSpaceOrEnter(openRangeEndSelection),
           onFocus: handleFocusEnd,
           focused: contextValue.open ? rangePosition === 'end' : undefined
         }, !readOnly && !contextValue.disabled && {
@@ -127,9 +120,9 @@ const useMultiInputFieldSlotProps = ({
         });
         InputProps = resolvedComponentProps?.InputProps;
       }
-      return (0, _extends2.default)({}, labelId != null && {
+      return _extends({}, labelId != null && {
         id: `${labelId}-${ownerState.position}`
-      }, textFieldProps, (0, _resolveComponentProps.default)(pickerSlotProps?.textField, ownerState), {
+      }, textFieldProps, resolveComponentProps(pickerSlotProps?.textField, ownerState), {
         InputProps
       });
     },
@@ -137,15 +130,15 @@ const useMultiInputFieldSlotProps = ({
       const rootProps = {
         onBlur
       };
-      return (0, _extends2.default)({}, rootProps, (0, _resolveComponentProps.default)(pickerSlotProps?.fieldRoot, ownerState));
+      return _extends({}, rootProps, resolveComponentProps(pickerSlotProps?.fieldRoot, ownerState));
     },
     separator: pickerSlotProps?.fieldSeparator
   });
 
   /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */
   const _ref = fieldProps,
-    restFieldProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
-  const enrichedFieldProps = (0, _extends2.default)({}, restFieldProps, {
+    restFieldProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const enrichedFieldProps = _extends({}, restFieldProps, {
     unstableStartFieldRef: handleStartFieldRef,
     unstableEndFieldRef: handleEndFieldRef,
     slots,
@@ -170,7 +163,7 @@ const useSingleInputFieldSlotProps = ({
   fieldProps,
   currentView
 }) => {
-  const handleFieldRef = (0, _useForkRef.default)(fieldProps.unstableFieldRef, singleInputFieldRef);
+  const handleFieldRef = useForkRef(fieldProps.unstableFieldRef, singleInputFieldRef);
   React.useEffect(() => {
     if (!contextValue.open || !singleInputFieldRef.current || variant === 'mobile') {
       return;
@@ -197,7 +190,7 @@ const useSingleInputFieldSlotProps = ({
       setRangePosition(domRangePosition);
     }
   };
-  const handleSelectedSectionsChange = (0, _useEventCallback.default)(selectedSection => {
+  const handleSelectedSectionsChange = useEventCallback(selectedSection => {
     setTimeout(updateRangePosition);
     fieldPrivateContextValue.onSelectedSectionsChange?.(selectedSection);
   });
@@ -208,9 +201,9 @@ const useSingleInputFieldSlotProps = ({
       contextValue.setOpen(true);
     }
   };
-  const enrichedFieldProps = (0, _extends2.default)({}, fieldProps, {
+  const enrichedFieldProps = _extends({}, fieldProps, {
     unstableFieldRef: handleFieldRef,
-    onKeyDown: (0, _internals.onSpaceOrEnter)(openPicker, fieldProps.onKeyDown),
+    onKeyDown: onSpaceOrEnter(openPicker, fieldProps.onKeyDown),
     onBlur,
     focused: contextValue.open ? true : undefined
   }, labelId != null && {
@@ -227,7 +220,7 @@ const useSingleInputFieldSlotProps = ({
     }
   };
 };
-const useEnrichedRangePickerField = params => {
+export const useEnrichedRangePickerField = params => {
   /* eslint-disable react-hooks/rules-of-hooks */
   if (process.env.NODE_ENV !== 'production') {
     const fieldTypeRef = React.useRef(params.fieldType);
@@ -240,5 +233,4 @@ const useEnrichedRangePickerField = params => {
   }
   return useSingleInputFieldSlotProps(params);
   /* eslint-enable react-hooks/rules-of-hooks */
-};
-exports.useEnrichedRangePickerField = useEnrichedRangePickerField;
+};

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

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

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

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

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+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/esm/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -0,0 +1,140 @@
+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, 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 => {
+  let {
+      props
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
+  useLicenseVerifier('x-date-pickers-pro', releaseInfo);
+  const {
+    slots,
+    slotProps: innerSlotProps,
+    label,
+    inputRef,
+    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 {
+    providerProps,
+    renderCurrentView,
+    ownerState
+  } = usePicker(_extends({}, pickerParams, {
+    props,
+    variant: 'mobile',
+    autoFocusView: true,
+    fieldRef,
+    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 Field = slots.field;
+  const _useSlotProps = useSlotProps({
+      elementType: Field,
+      externalSlotProps: innerSlotProps?.field,
+      additionalProps: {
+        // Internal props
+        readOnly: readOnly ?? true
+      },
+      ownerState
+    }),
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
+  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,
+    localeText,
+    pickerSlots: slots,
+    pickerSlotProps: innerSlotProps,
+    fieldProps,
+    startFieldRef,
+    endFieldRef,
+    singleInputFieldRef
+  }, rangePositionResponse));
+  const Layout = slots?.layout ?? PickersLayout;
+  const finalLocaleText = _extends({}, contextTranslations, localeText);
+  let labelledById = pickerParams.valueType === 'date-time' ? `${labelId}-start-toolbar ${labelId}-end-toolbar` : labelId;
+  if (isToolbarHidden) {
+    const labels = [];
+    if (fieldType === 'multi-input') {
+      if (finalLocaleText.start) {
+        labels.push(`${labelId}-start-label`);
+      }
+      if (finalLocaleText.end) {
+        labels.push(`${labelId}-end-label`);
+      }
+    } else if (label != null) {
+      labels.push(`${labelId}-label`);
+    }
+    labelledById = labels.length > 0 ? labels.join(' ') : undefined;
+  }
+  const slotProps = _extends({}, innerSlotProps, {
+    toolbar: _extends({}, innerSlotProps?.toolbar, {
+      titleId: labelId
+    }),
+    mobilePaper: _extends({
+      'aria-labelledby': labelledById
+    }, innerSlotProps?.mobilePaper)
+  });
+  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, {
+      slots: slots,
+      slotProps: slotProps,
+      inputRef: inputRef,
+      children: /*#__PURE__*/_jsxs(PickerRangePositionContext.Provider, {
+        value: rangePositionResponse,
+        children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldResponse.fieldProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
+          slots: slots,
+          slotProps: slotProps,
+          children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+            slots: slots,
+            slotProps: slotProps,
+            children: renderCurrentView()
+          }))
+        })]
+      })
+    })
+  }));
+  return {
+    renderPicker
+  };
+};

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

@@ -0,0 +1,18 @@
+import { PickersModalDialogSlots, PickersModalDialogSlotProps, UsePickerViewsProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+import { RangeOnlyPickerProps, UseRangePickerParams, UseRangePickerProps, UseRangePickerSlotProps, UseRangePickerSlots } from "../models/useRangePicker.js";
+export interface UseMobileRangePickerSlots extends UseRangePickerSlots, PickersModalDialogSlots {}
+export interface UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends UseRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, PickersModalDialogSlotProps {}
+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> {}

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

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

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

@@ -0,0 +1,5 @@
+/**
+ * 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;

package/esm/internals/hooks/useNullablePickerRangePositionContext.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { PickerRangePositionContext } from "../../hooks/usePickerRangePositionContext.js";
+
+/**
+ * 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);
+}

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

@@ -0,0 +1,27 @@
+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/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;
+}
+export interface UseRangePositionResponse {
+  rangePosition: RangePosition;
+  setRangePosition: (newPosition: RangePosition) => void;
+}
+export declare const useRangePosition: (props: UseRangePositionProps, singleInputFieldRef?: React.RefObject<FieldRef<PickerRangeValue> | null>) => UseRangePositionResponse;

package/{node → esm}/internals/hooks/useRangePosition.js

@@ -1,14 +1,7 @@
-"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, singleInputFieldRef) => {
-  const [rangePosition, setRangePosition] = (0, _useControlled.default)({
+import useControlled from '@mui/utils/useControlled';
+import useEventCallback from '@mui/utils/useEventCallback';
+export const useRangePosition = (props, singleInputFieldRef) => {
+  const [rangePosition, setRangePosition] = useControlled({
     name: 'useRangePosition',
     state: 'rangePosition',
     controlled: props.rangePosition,
@@ -23,9 +16,14 @@ const useRangePosition = (props, singleInputFieldRef) => {
     }
     const sections = singleInputFieldRef.current.getSections();
     const targetActiveSectionIndex = newRangePosition === 'start' ? 0 : sections.length / 2;
+    const activeSectionIndex = singleInputFieldRef.current.getActiveSectionIndex();
+    // if the active section is already within the target range, we don't need to update it.
+    if (activeSectionIndex && activeSectionIndex >= targetActiveSectionIndex && activeSectionIndex < targetActiveSectionIndex + sections.length / 2) {
+      return;
+    }
     singleInputFieldRef.current.setSelectedSections(targetActiveSectionIndex);
   };
-  const handleRangePositionChange = (0, _useEventCallback.default)(newRangePosition => {
+  const handleRangePositionChange = useEventCallback(newRangePosition => {
     setRangePosition(newRangePosition);
     props.onRangePositionChange?.(newRangePosition);
     syncRangePositionWithSingleInputField(newRangePosition);
@@ -34,5 +32,4 @@ const useRangePosition = (props, singleInputFieldRef) => {
     rangePosition,
     setRangePosition: handleRangePositionChange
   };
-};
-exports.useRangePosition = useRangePosition;
+};

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

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

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

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

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+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,
+  ...pickerParams
+}: UseStaticRangePickerParams<TView, TExternalProps>) => {
+  renderPicker: () => React.JSX.Element;
+};

package/esm/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -0,0 +1,64 @@
+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 clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
+import { usePicker, DIALOG_WIDTH, PickerProvider, mergeSx } from '@mui/x-date-pickers/internals';
+import { useRangePosition } from "../useRangePosition.js";
+import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickerStaticLayout = styled(PickersLayout)(({
+  theme
+}) => ({
+  overflow: 'hidden',
+  minWidth: DIALOG_WIDTH,
+  backgroundColor: (theme.vars || theme).palette.background.paper
+}));
+
+/**
+ * Hook managing all the range static pickers:
+ * - StaticDateRangePicker
+ */
+export const useStaticRangePicker = _ref => {
+  let {
+      props
+    } = _ref,
+    pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    localeText,
+    slots,
+    slotProps,
+    displayStaticWrapperAs,
+    autoFocus
+  } = props;
+  const rangePositionResponse = useRangePosition(props);
+  const {
+    providerProps,
+    renderCurrentView
+  } = usePicker(_extends({}, pickerParams, {
+    props,
+    autoFocusView: autoFocus ?? false,
+    fieldRef: undefined,
+    localeText,
+    variant: displayStaticWrapperAs
+  }));
+  const Layout = slots?.layout ?? PickerStaticLayout;
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerRangePositionContext.Provider, {
+    value: rangePositionResponse,
+    children: /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+        slots: slots,
+        slotProps: slotProps,
+        sx: mergeSx(providerProps.contextValue.rootSx, slotProps?.layout?.sx),
+        className: clsx(providerProps.contextValue.rootClassName, slotProps?.layout?.className),
+        ref: providerProps.contextValue.rootRef,
+        children: renderCurrentView()
+      }))
+    }))
+  });
+  return {
+    renderPicker
+  };
+};

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

@@ -0,0 +1,23 @@
+import { BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, DateOrTimeViewWithMeridiem, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '@mui/x-date-pickers/PickersLayout';
+import { UseRangePositionProps } from "../useRangePosition.js";
+export interface UseStaticRangePickerSlots extends ExportedPickersLayoutSlots<PickerRangeValue> {}
+export interface UseStaticRangePickerSlotProps extends ExportedPickersLayoutSlotProps<PickerRangeValue> {
+  toolbar?: ExportedBaseToolbarProps;
+}
+export interface StaticRangeOnlyPickerProps extends StaticOnlyPickerProps, UseRangePositionProps {}
+export interface UseStaticRangePickerProps<TView extends DateOrTimeViewWithMeridiem, TError, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends BasePickerProps<PickerRangeValue, TView, TError, TExternalProps>, StaticRangeOnlyPickerProps {
+  /**
+   * Overridable components.
+   * @default {}
+   */
+  slots?: UseStaticRangePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: UseStaticRangePickerSlotProps;
+}
+export interface UseStaticRangePickerParams<TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticRangePickerProps<TView, any, TExternalProps>> extends Pick<UsePickerParams<PickerRangeValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'ref'> {
+  props: TExternalProps;
+}

package/esm/internals/hooks/useStaticRangePicker/useStaticRangePicker.types.js

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

package/esm/internals/models/dateRange.d.ts

@@ -0,0 +1,16 @@
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+/**
+ * Props used to validate a day value in range pickers.
+ */
+export interface DayRangeValidationProps {
+  /**
+   * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   *
+   * @param {PickerValidDate} day The date to test.
+   * @param {string} position The date to test, 'start' or 'end'.
+   * @returns {boolean} Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate?: (day: PickerValidDate, position: 'start' | 'end') => boolean;
+}

package/esm/internals/models/dateRange.js

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

package/esm/internals/models/dateTimeRange.d.ts

@@ -0,0 +1,3 @@
+import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
+export type DateTimeRangePickerView = Exclude<DateOrTimeViewWithMeridiem, 'month' | 'year'>;
+export type DateTimeRangePickerViewExternal = Exclude<DateTimeRangePickerView, 'meridiem'>;

package/esm/internals/models/dateTimeRange.js

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

package/esm/internals/models/fields.d.ts

@@ -0,0 +1,22 @@
+import { SlotComponentProps } from '@mui/utils';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
+import type { MultiInputFieldRefs, MultiInputFieldSlotRootProps, RangePosition } from '../../models';
+/**
+ * Props the multi input field can receive when used inside a picker.
+ * Only contains what the MUI components are passing to the field, not what users can pass using the `props.slotProps.field`.
+ */
+export interface BaseMultiInputFieldProps extends Pick<UseFieldInternalProps<PickerRangeValue, boolean, unknown>, 'readOnly' | 'autoFocus'>, MultiInputFieldRefs {
+  slots?: {
+    root?: React.ElementType;
+    separator?: React.ElementType;
+    textField?: React.ElementType;
+  };
+  slotProps?: {
+    root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, FieldOwnerState>;
+    textField?: SlotComponentProps<typeof PickersTextField, {}, FieldOwnerState & {
+      position?: RangePosition;
+    }>;
+  };
+}

package/esm/internals/models/fields.js

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

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

@@ -0,0 +1,3 @@
+export * from "./dateRange.js";
+export * from "./dateTimeRange.js";
+export * from "./rangePickerProps.js";

package/esm/internals/models/index.js

@@ -0,0 +1,3 @@
+export * from "./dateRange.js";
+export * from "./dateTimeRange.js";
+export * from "./rangePickerProps.js";

package/esm/internals/models/managers.d.ts

@@ -0,0 +1,3 @@
+import { PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { PickerManager } from '@mui/x-date-pickers/models';
+export type PickerAnyRangeManager = PickerManager<PickerRangeValue, any, any, any, any>;

package/esm/internals/models/managers.js

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

package/esm/internals/models/rangePickerProps.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * Props common to all range non-static pickers.
+ * These props are handled by the headless wrappers.
+ */
+export interface BaseRangeNonStaticPickerProps {
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label?: React.ReactNode;
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * Name attribute used by the `input` element in the Field.
+   * Ignored if the field has several inputs.
+   */
+  name?: string;
+}

package/esm/internals/models/rangePickerProps.js

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