@mui/x-date-pickers-pro 8.0.0-alpha.1 → 8.0.0-alpha.10

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["view", "openTo", "rangePosition"];
+const _excluded = ["view", "openTo"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
@@ -20,16 +20,23 @@ import { useDateTimeRangePickerDefaultizedProps } from "../DateTimeRangePicker/s
 import { MultiInputDateTimeRangeField } from "../MultiInputDateTimeRangeField/index.js";
 import { DateTimeRangePickerTimeWrapper } from "../DateTimeRangePicker/DateTimeRangePickerTimeWrapper.js";
 import { RANGE_VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { usePickerRangePositionContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
+const rendererInterceptor = function RendererInterceptor(props) {
+  const {
+    viewRenderers,
+    popperView,
+    rendererProps
+  } = props;
+  const {
+    rangePosition
+  } = usePickerRangePositionContext();
   const {
       view,
-      openTo,
-      rangePosition
+      openTo
     } = rendererProps,
     otherRendererProps = _objectWithoutPropertiesLoose(rendererProps, _excluded);
   const finalProps = _extends({}, otherRendererProps, {
-    rangePosition,
     focusedView: null,
     sx: [{
       width: DIALOG_WIDTH,
@@ -53,7 +60,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     }]
   });
   const isTimeView = isInternalTimeView(popperView);
-  const viewRenderer = inViewRenderers[popperView];
+  const viewRenderer = viewRenderers[popperView];
   if (!viewRenderer) {
     return null;
   }
@@ -107,21 +114,19 @@ const MobileDateTimeRangePicker = /*#__PURE__*/React.forwardRef(function MobileD
       field: MultiInputDateTimeRangeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps)),
       tabs: _extends({
         hidden: false
       }, defaultizedProps.slotProps?.tabs),
       toolbar: _extends({
-        hidden: false,
-        toolbarVariant: 'mobile'
+        hidden: false
       }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
     renderPicker
   } = useMobileRangePicker({
+    ref,
     props,
     valueManager: rangeValueManager,
     valueType: 'date-time',
@@ -149,8 +154,8 @@ MobileDateTimeRangePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**
@@ -243,12 +248,10 @@ MobileDateTimeRangePicker.propTypes = {
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
    * Pass a ref to the `input` element.
-   * Ignored if the field has several inputs.
    */
   inputRef: refType,
   /**
    * The label content.
-   * Ignored if the field has several inputs.
    */
   label: PropTypes.node,
   /**
@@ -297,7 +300,6 @@ MobileDateTimeRangePicker.propTypes = {
   minutesStep: PropTypes.number,
   /**
    * Name attribute used by the `input` element in the Field.
-   * Ignored if the field has several inputs.
    */
   name: PropTypes.string,
   /**

package/MobileDateTimeRangePicker/MobileDateTimeRangePicker.types.d.ts

@@ -1,10 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps } from '../internals/hooks/useMobileRangePicker';
 import { BaseDateTimeRangePickerProps, BaseDateTimeRangePickerSlots, BaseDateTimeRangePickerSlotProps } from '../DateTimeRangePicker/shared';
-import { DateTimeRangePickerView } from '../internals/models';
-export interface MobileDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseMobileRangePickerSlots<DateTimeRangePickerView>, 'field'> {
+export interface MobileDateTimeRangePickerSlots extends BaseDateTimeRangePickerSlots, MakeOptional<UseMobileRangePickerSlots, 'field'> {
 }
-export interface MobileDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<DateTimeRangePickerView, TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
+export interface MobileDateTimeRangePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseDateTimeRangePickerSlotProps, Omit<UseMobileRangePickerSlotProps<TEnableAccessibleFieldDOMStructure>, 'tabs' | 'toolbar'> {
 }
 export interface MobileDateTimeRangePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseDateTimeRangePickerProps, MobileRangeOnlyPickerProps {
     /**

package/MultiInputDateRangeField/MultiInputDateRangeField.d.ts

@@ -1,8 +1,13 @@
 import * as React from 'react';
-import { MultiInputDateRangeFieldProps } from './MultiInputDateRangeField.types';
-import { MultiInputRangeFieldClasses } from '../models';
-export declare const multiInputDateRangeFieldClasses: MultiInputRangeFieldClasses;
-export declare const getMultiInputDateRangeFieldUtilityClass: (slot: string) => string;
+import { UseDateRangeManagerReturnValue } from '../managers';
+import { MultiInputRangeFieldProps } from '../internals/utils/createMultiInputRangeField';
+import { MultiInputDateRangeFieldClasses } from './multiInputDateRangeFieldClasses';
+export interface MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MultiInputRangeFieldProps<UseDateRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>> {
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<MultiInputDateRangeFieldClasses>;
+}
 type MultiInputDateRangeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: MultiInputDateRangeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,51 +1,11 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
-import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import Stack from '@mui/material/Stack';
-import MuiTextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import { styled, useThemeProps } from '@mui/material/styles';
-import useSlotProps from '@mui/utils/useSlotProps';
-import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
-import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
-import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
-import { useMultiInputDateRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const multiInputDateRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateRangeField', ['root', 'separator']);
-export const getMultiInputDateRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateRangeField', slot);
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root'],
-    separator: ['separator']
-  };
-  return composeClasses(slots, getMultiInputDateRangeFieldUtilityClass, classes);
-};
-const MultiInputDateRangeFieldRoot = styled(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
-  ref: ref,
-  spacing: 2,
-  direction: "row",
-  alignItems: "center"
-}, props))), {
-  name: 'MuiMultiInputDateRangeField',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})({});
-const MultiInputDateRangeFieldSeparator = styled(Typography, {
-  name: 'MuiMultiInputDateRangeField',
-  slot: 'Separator',
-  overridesResolver: (props, styles) => styles.separator
-})({
-  lineHeight: '1.4375em' // 23px
-});
+import { useDateRangeManager } from "../managers/index.js";
+import {
+// The alias is needed to have the doc gen working.
+createMultiInputRangeField as createMultiInputDateRangeField } from "../internals/utils/createMultiInputRangeField/index.js";
+import { getMultiInputDateRangeFieldUtilityClass } from "./multiInputDateRangeFieldClasses.js";
 /**
  * Demos:
  *
@@ -56,85 +16,19 @@ const MultiInputDateRangeFieldSeparator = styled(Typography, {
  *
  * - [MultiInputDateRangeField API](https://mui.com/x/api/multi-input-date-range-field/)
  */
-const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInputDateRangeField(inProps, ref) {
-  const themeProps = useThemeProps({
-    props: inProps,
-    name: 'MuiMultiInputDateRangeField'
-  });
-  const {
-    internalProps,
-    forwardedProps
-  } = useSplitFieldProps(themeProps, 'date');
-  const {
-      slots,
-      slotProps,
-      unstableStartFieldRef,
-      unstableEndFieldRef,
-      className
-    } = forwardedProps,
-    otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
-  const Root = slots?.root ?? MultiInputDateRangeFieldRoot;
-  const rootProps = useSlotProps({
-    elementType: Root,
-    externalSlotProps: slotProps?.root,
-    externalForwardedProps: otherForwardedProps,
-    additionalProps: {
-      ref
-    },
-    ownerState,
-    className: clsx(className, classes.root)
-  });
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
-  const startTextFieldProps = useSlotProps({
-    elementType: TextField,
-    externalSlotProps: slotProps?.textField,
-    ownerState: _extends({}, ownerState, {
-      position: 'start'
-    })
-  });
-  const endTextFieldProps = useSlotProps({
-    elementType: TextField,
-    externalSlotProps: slotProps?.textField,
-    ownerState: _extends({}, ownerState, {
-      position: 'end'
-    })
-  });
-  const Separator = slots?.separator ?? MultiInputDateRangeFieldSeparator;
-  const separatorProps = useSlotProps({
-    elementType: Separator,
-    externalSlotProps: slotProps?.separator,
-    additionalProps: {
-      children: ` ${internalProps.dateSeparator ?? '–'} `
-    },
-    ownerState,
-    className: classes.separator
-  });
-  const fieldResponse = useMultiInputDateRangeField({
-    sharedProps: internalProps,
-    startTextFieldProps,
-    endTextFieldProps,
-    unstableStartFieldRef,
-    unstableEndFieldRef
-  });
-  const startDateProps = convertFieldResponseIntoMuiTextFieldProps(fieldResponse.startDate);
-  const endDateProps = convertFieldResponseIntoMuiTextFieldProps(fieldResponse.endDate);
-  return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
-    children: [/*#__PURE__*/_jsx(TextField, _extends({
-      fullWidth: true
-    }, startDateProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
-      fullWidth: true
-    }, endDateProps))]
-  }));
+const MultiInputDateRangeField = createMultiInputDateRangeField({
+  name: 'MuiMultiInputDateRangeField',
+  getUtilityClass: getMultiInputDateRangeFieldUtilityClass,
+  useManager: useDateRangeManager
 });
-process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
+MultiInputDateRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * If `true`, the `input` element is focused during the first mount.
+   * @default false
    */
   autoFocus: PropTypes.bool,
   /**
@@ -258,10 +152,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    */
   shouldDisableDate: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
@@ -317,5 +211,5 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * Used when the component is controlled.
    */
   value: PropTypes.arrayOf(PropTypes.object)
-} : void 0;
+};
 export { MultiInputDateRangeField };

package/MultiInputDateRangeField/index.d.ts

@@ -1,3 +1,5 @@
-export { MultiInputDateRangeField, getMultiInputDateRangeFieldUtilityClass, multiInputDateRangeFieldClasses, } from './MultiInputDateRangeField';
-export { useMultiInputDateRangeField as unstable_useMultiInputDateRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField';
-export type { UseMultiInputDateRangeFieldProps, UseMultiInputDateRangeFieldComponentProps, MultiInputDateRangeFieldProps, } from './MultiInputDateRangeField.types';
+export { MultiInputDateRangeField } from './MultiInputDateRangeField';
+export type { MultiInputDateRangeFieldProps } from './MultiInputDateRangeField';
+export { multiInputDateRangeFieldClasses, getMultiInputDateRangeFieldUtilityClass, } from './multiInputDateRangeFieldClasses';
+export type { MultiInputDateRangeFieldClassKey, MultiInputDateRangeFieldClasses, } from './multiInputDateRangeFieldClasses';
+export type { MultiInputRangeFieldSlots as MultiInputDateRangeFieldSlots, MultiInputRangeFieldSlotProps as MultiInputDateRangeFieldSlotProps, } from '../internals/utils/createMultiInputRangeField';

package/MultiInputDateRangeField/index.js

@@ -1,2 +1,2 @@
-export { MultiInputDateRangeField, getMultiInputDateRangeFieldUtilityClass, multiInputDateRangeFieldClasses } from "./MultiInputDateRangeField.js";
-export { useMultiInputDateRangeField as unstable_useMultiInputDateRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js";
+export { MultiInputDateRangeField } from "./MultiInputDateRangeField.js";
+export { multiInputDateRangeFieldClasses, getMultiInputDateRangeFieldUtilityClass } from "./multiInputDateRangeFieldClasses.js";

package/MultiInputDateRangeField/multiInputDateRangeFieldClasses.d.ts

@@ -0,0 +1,6 @@
+import { MultiInputRangeFieldClasses } from '../internals/utils/createMultiInputRangeField';
+export interface MultiInputDateRangeFieldClasses extends MultiInputRangeFieldClasses {
+}
+export type MultiInputDateRangeFieldClassKey = keyof MultiInputRangeFieldClasses;
+export declare const multiInputDateRangeFieldClasses: MultiInputRangeFieldClasses;
+export declare const getMultiInputDateRangeFieldUtilityClass: (slot: string) => string;

package/MultiInputDateRangeField/multiInputDateRangeFieldClasses.js

@@ -0,0 +1,4 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export const multiInputDateRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateRangeField', ['root', 'separator']);
+export const getMultiInputDateRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateRangeField', slot);

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.d.ts

@@ -1,8 +1,13 @@
 import * as React from 'react';
-import { MultiInputDateTimeRangeFieldProps } from './MultiInputDateTimeRangeField.types';
-import { MultiInputRangeFieldClasses } from '../models';
-export declare const multiInputDateTimeRangeFieldClasses: MultiInputRangeFieldClasses;
-export declare const getMultiInputDateTimeRangeFieldUtilityClass: (slot: string) => string;
+import { UseDateTimeRangeManagerReturnValue } from '../managers';
+import { MultiInputRangeFieldProps } from '../internals/utils/createMultiInputRangeField';
+import { MultiInputDateTimeRangeFieldClasses } from './multiInputDateTimeRangeFieldClasses';
+export interface MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MultiInputRangeFieldProps<UseDateTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>> {
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<MultiInputDateTimeRangeFieldClasses>;
+}
 type MultiInputDateTimeRangeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: MultiInputDateTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,51 +1,11 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
-import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import Stack from '@mui/material/Stack';
-import MuiTextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import { styled, useThemeProps } from '@mui/material/styles';
-import useSlotProps from '@mui/utils/useSlotProps';
-import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
-import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
-import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
-import { useMultiInputDateTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const multiInputDateTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateTimeRangeField', ['root', 'separator']);
-export const getMultiInputDateTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateTimeRangeField', slot);
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root'],
-    separator: ['separator']
-  };
-  return composeClasses(slots, getMultiInputDateTimeRangeFieldUtilityClass, classes);
-};
-const MultiInputDateTimeRangeFieldRoot = styled(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
-  ref: ref,
-  spacing: 2,
-  direction: "row",
-  alignItems: "center"
-}, props))), {
-  name: 'MuiMultiInputDateTimeRangeField',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})({});
-const MultiInputDateTimeRangeFieldSeparator = styled(Typography, {
-  name: 'MuiMultiInputDateTimeRangeField',
-  slot: 'Separator',
-  overridesResolver: (props, styles) => styles.separator
-})({
-  lineHeight: '1.4375em' // 23px
-});
+import { useDateTimeRangeManager } from "../managers/index.js";
+import {
+// The alias is needed to have the doc gen working.
+createMultiInputRangeField as createMultiInputDateTimeRangeField } from "../internals/utils/createMultiInputRangeField/index.js";
+import { getMultiInputDateTimeRangeFieldUtilityClass } from "./multiInputDateTimeRangeFieldClasses.js";
 /**
  * Demos:
  *
@@ -56,79 +16,12 @@ const MultiInputDateTimeRangeFieldSeparator = styled(Typography, {
  *
  * - [MultiInputDateTimeRangeField API](https://mui.com/x/api/multi-input-date-time-range-field/)
  */
-const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInputDateTimeRangeField(inProps, ref) {
-  const themeProps = useThemeProps({
-    props: inProps,
-    name: 'MuiMultiInputDateTimeRangeField'
-  });
-  const {
-    internalProps,
-    forwardedProps
-  } = useSplitFieldProps(themeProps, 'date-time');
-  const {
-      slots,
-      slotProps,
-      unstableStartFieldRef,
-      unstableEndFieldRef,
-      className
-    } = forwardedProps,
-    otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
-  const ownerState = themeProps;
-  const classes = useUtilityClasses(ownerState);
-  const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
-  const rootProps = useSlotProps({
-    elementType: Root,
-    externalSlotProps: slotProps?.root,
-    externalForwardedProps: otherForwardedProps,
-    additionalProps: {
-      ref
-    },
-    ownerState,
-    className: clsx(className, classes.root)
-  });
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
-  const startTextFieldProps = useSlotProps({
-    elementType: TextField,
-    externalSlotProps: slotProps?.textField,
-    ownerState: _extends({}, ownerState, {
-      position: 'start'
-    })
-  });
-  const endTextFieldProps = useSlotProps({
-    elementType: TextField,
-    externalSlotProps: slotProps?.textField,
-    ownerState: _extends({}, ownerState, {
-      position: 'end'
-    })
-  });
-  const Separator = slots?.separator ?? MultiInputDateTimeRangeFieldSeparator;
-  const separatorProps = useSlotProps({
-    elementType: Separator,
-    externalSlotProps: slotProps?.separator,
-    additionalProps: {
-      children: ` ${internalProps.dateSeparator ?? '–'} `
-    },
-    ownerState,
-    className: classes.separator
-  });
-  const fieldResponse = useMultiInputDateTimeRangeField({
-    sharedProps: internalProps,
-    startTextFieldProps,
-    endTextFieldProps,
-    unstableStartFieldRef,
-    unstableEndFieldRef
-  });
-  const startDateProps = convertFieldResponseIntoMuiTextFieldProps(fieldResponse.startDate);
-  const endDateProps = convertFieldResponseIntoMuiTextFieldProps(fieldResponse.endDate);
-  return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
-    children: [/*#__PURE__*/_jsx(TextField, _extends({
-      fullWidth: true
-    }, startDateProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
-      fullWidth: true
-    }, endDateProps))]
-  }));
+const MultiInputDateTimeRangeField = createMultiInputDateTimeRangeField({
+  name: 'MuiMultiInputDateTimeRangeField',
+  getUtilityClass: getMultiInputDateTimeRangeFieldUtilityClass,
+  useManager: useDateTimeRangeManager
 });
-process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes = {
+MultiInputDateTimeRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -140,6 +33,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   ampm: PropTypes.bool,
   /**
    * If `true`, the `input` element is focused during the first mount.
+   * @default false
    */
   autoFocus: PropTypes.bool,
   /**
@@ -298,10 +192,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    */
   shouldDisableTime: PropTypes.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
@@ -357,5 +251,5 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * Used when the component is controlled.
    */
   value: PropTypes.arrayOf(PropTypes.object)
-} : void 0;
+};
 export { MultiInputDateTimeRangeField };

package/MultiInputDateTimeRangeField/index.d.ts

@@ -1,3 +1,5 @@
-export { MultiInputDateTimeRangeField, getMultiInputDateTimeRangeFieldUtilityClass, multiInputDateTimeRangeFieldClasses, } from './MultiInputDateTimeRangeField';
-export { useMultiInputDateTimeRangeField as unstable_useMultiInputDateTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField';
-export type { UseMultiInputDateTimeRangeFieldProps, UseMultiInputDateTimeRangeFieldComponentProps, MultiInputDateTimeRangeFieldProps, } from './MultiInputDateTimeRangeField.types';
+export { MultiInputDateTimeRangeField } from './MultiInputDateTimeRangeField';
+export type { MultiInputDateTimeRangeFieldProps } from './MultiInputDateTimeRangeField';
+export { multiInputDateTimeRangeFieldClasses, getMultiInputDateTimeRangeFieldUtilityClass, } from './multiInputDateTimeRangeFieldClasses';
+export type { MultiInputDateTimeRangeFieldClassKey, MultiInputDateTimeRangeFieldClasses, } from './multiInputDateTimeRangeFieldClasses';
+export type { MultiInputRangeFieldSlots as MultiInputDateTimeRangeFieldSlots, MultiInputRangeFieldSlotProps as MultiInputDateTimeRangeFieldSlotProps, } from '../internals/utils/createMultiInputRangeField';

package/MultiInputDateTimeRangeField/index.js

@@ -1,2 +1,2 @@
-export { MultiInputDateTimeRangeField, getMultiInputDateTimeRangeFieldUtilityClass, multiInputDateTimeRangeFieldClasses } from "./MultiInputDateTimeRangeField.js";
-export { useMultiInputDateTimeRangeField as unstable_useMultiInputDateTimeRangeField } from "../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js";
+export { MultiInputDateTimeRangeField } from "./MultiInputDateTimeRangeField.js";
+export { multiInputDateTimeRangeFieldClasses, getMultiInputDateTimeRangeFieldUtilityClass } from "./multiInputDateTimeRangeFieldClasses.js";

package/MultiInputDateTimeRangeField/multiInputDateTimeRangeFieldClasses.d.ts

@@ -0,0 +1,6 @@
+import { MultiInputRangeFieldClasses } from '../internals/utils/createMultiInputRangeField';
+export interface MultiInputDateTimeRangeFieldClasses extends MultiInputRangeFieldClasses {
+}
+export type MultiInputDateTimeRangeFieldClassKey = keyof MultiInputRangeFieldClasses;
+export declare const multiInputDateTimeRangeFieldClasses: MultiInputRangeFieldClasses;
+export declare const getMultiInputDateTimeRangeFieldUtilityClass: (slot: string) => string;

package/MultiInputDateTimeRangeField/multiInputDateTimeRangeFieldClasses.js

@@ -0,0 +1,4 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export const multiInputDateTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateTimeRangeField', ['root', 'separator']);
+export const getMultiInputDateTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateTimeRangeField', slot);

package/MultiInputTimeRangeField/MultiInputTimeRangeField.d.ts

@@ -1,8 +1,13 @@
 import * as React from 'react';
-import { MultiInputTimeRangeFieldProps } from './MultiInputTimeRangeField.types';
-import { MultiInputRangeFieldClasses } from '../models';
-export declare const multiInputTimeRangeFieldClasses: MultiInputRangeFieldClasses;
-export declare const getMultiInputTimeRangeFieldUtilityClass: (slot: string) => string;
+import { UseTimeRangeManagerReturnValue } from '../managers';
+import { MultiInputRangeFieldProps } from '../internals/utils/createMultiInputRangeField';
+import { MultiInputTimeRangeFieldClasses } from './multiInputTimeRangeFieldClasses';
+export interface MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MultiInputRangeFieldProps<UseTimeRangeManagerReturnValue<TEnableAccessibleFieldDOMStructure>> {
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<MultiInputTimeRangeFieldClasses>;
+}
 type MultiInputTimeRangeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: MultiInputTimeRangeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };