@mui/x-date-pickers-pro 6.0.3 → 6.1.0

package/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.d.ts

@@ -1,4 +1,4 @@
 import type { UseMultiInputDateTimeRangeFieldDefaultizedProps, UseMultiInputDateTimeRangeFieldParams, UseMultiInputDateTimeRangeFieldProps } from '../../../MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types';
 import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
 export declare const useDefaultizedDateTimeRangeFieldProps: <TDate, AdditionalProps extends {}>(props: UseMultiInputDateTimeRangeFieldProps<TDate>) => UseMultiInputDateTimeRangeFieldDefaultizedProps<TDate, AdditionalProps>;
-export declare const useMultiInputDateTimeRangeField: <TDate, TTextFieldProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputDateTimeRangeFieldParams<TDate, TTextFieldProps>) => UseMultiInputRangeFieldResponse<TTextFieldProps>;
+export declare const useMultiInputDateTimeRangeField: <TDate, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputDateTimeRangeFieldParams<TDate, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TTextFieldSlotProps>;

package/internal/hooks/useMultiInputRangeField/useMultiInputRangeField.types.d.ts

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { FieldRef } from '@mui/x-date-pickers/models';
 import { UseFieldResponse } from '@mui/x-date-pickers/internals';
 import { RangeFieldSection } from '../../models/fields';
-export interface UseMultiInputRangeFieldParams<TSharedProps extends {}, TTextFieldProps extends {}> {
+export interface UseMultiInputRangeFieldParams<TSharedProps extends {}, TTextFieldSlotProps extends {}> {
     sharedProps: TSharedProps;
-    startTextFieldProps: TTextFieldProps;
+    startTextFieldProps: TTextFieldSlotProps;
     startInputRef?: React.Ref<HTMLInputElement>;
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
-    endTextFieldProps: TTextFieldProps;
+    endTextFieldProps: TTextFieldSlotProps;
     endInputRef?: React.Ref<HTMLInputElement>;
     unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
 }

package/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.d.ts

@@ -1,4 +1,4 @@
 import type { UseMultiInputTimeRangeFieldDefaultizedProps, UseMultiInputTimeRangeFieldParams, UseMultiInputTimeRangeFieldProps } from '../../../MultiInputTimeRangeField/MultiInputTimeRangeField.types';
 import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
 export declare const useDefaultizedTimeRangeFieldProps: <TDate, AdditionalProps extends {}>(props: UseMultiInputTimeRangeFieldProps<TDate>) => UseMultiInputTimeRangeFieldDefaultizedProps<TDate, AdditionalProps>;
-export declare const useMultiInputTimeRangeField: <TDate, TTextFieldProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputTimeRangeFieldParams<TDate, TTextFieldProps>) => UseMultiInputRangeFieldResponse<TTextFieldProps>;
+export declare const useMultiInputTimeRangeField: <TDate, TTextFieldSlotProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputTimeRangeFieldParams<TDate, TTextFieldSlotProps>) => UseMultiInputRangeFieldResponse<TTextFieldSlotProps>;

package/internal/hooks/useRangePosition.d.ts

@@ -1,4 +1,7 @@
+import * as React from 'react';
+import { FieldRef } from '@mui/x-date-pickers/models';
 import { RangePosition } from '../models/range';
+import { RangeFieldSection } from '../models/fields';
 export interface UseRangePositionProps {
     /**
      * The position in the currently edited date range.
@@ -20,5 +23,6 @@ export interface UseRangePositionProps {
 export interface UseRangePositionResponse {
     rangePosition: RangePosition;
     onRangePositionChange: (newPosition: RangePosition) => void;
+    singleInputFieldRef: React.MutableRefObject<FieldRef<RangeFieldSection> | undefined>;
 }
 export declare const useRangePosition: (props: UseRangePositionProps) => UseRangePositionResponse;

package/internal/hooks/useRangePosition.js

@@ -1,20 +1,35 @@
+import * as React from 'react';
 import useControlled from '@mui/utils/useControlled';
 import useEventCallback from '@mui/utils/useEventCallback';
 export const useRangePosition = props => {
   var _props$defaultRangePo;
+  const singleInputFieldRef = React.useRef();
   const [rangePosition, setRangePosition] = useControlled({
     name: 'useRangePosition',
     state: 'rangePosition',
     controlled: props.rangePosition,
     default: (_props$defaultRangePo = props.defaultRangePosition) != null ? _props$defaultRangePo : '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 => {
     var _props$onRangePositio;
     setRangePosition(newRangePosition);
     (_props$onRangePositio = props.onRangePositionChange) == null ? void 0 : _props$onRangePositio.call(props, newRangePosition);
+    syncRangePositionWithSingleInputField(newRangePosition);
   });
   return {
     rangePosition,
-    onRangePositionChange: handleRangePositionChange
+    onRangePositionChange: handleRangePositionChange,
+    singleInputFieldRef
   };
 };

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DateOrTimeView } from '@mui/x-date-pickers/internals';
+import { DateOrTimeView } from '@mui/x-date-pickers/models';
 import { UseStaticRangePickerParams, UseStaticRangePickerProps } from './useStaticRangePicker.types';
 /**
  * Hook managing all the range static pickers:

package/internal/hooks/useStaticRangePicker/useStaticRangePicker.types.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '@mui/x-date-pickers/PickersLayout/PickersLayout.types';
-import { DateOrTimeView, BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
+import { BasePickerProps, UsePickerParams, ExportedBaseToolbarProps, StaticOnlyPickerProps, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
+import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '@mui/x-date-pickers/PickersLayout';
+import { DateOrTimeView } from '@mui/x-date-pickers/models';
 import { DateRange } from '../../models/range';
 import { UseRangePositionProps } from '../useRangePosition';
 import { RangeFieldSection } from '../../models/fields';

package/internal/hooks/validation/useDateRangeValidation.d.ts

@@ -1,4 +1,5 @@
-import { Validator, DateValidationError, BaseDateValidationProps } from '@mui/x-date-pickers/internals';
+import { Validator, BaseDateValidationProps } from '@mui/x-date-pickers/internals';
+import { DateValidationError } from '@mui/x-date-pickers/models';
 import { DateRange, DayRangeValidationProps } from '../../models';
 export interface DateRangeComponentValidationProps<TDate> extends DayRangeValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {
 }

package/internal/hooks/validation/useDateTimeRangeValidation.d.ts

@@ -1,4 +1,5 @@
-import { Validator, DateTimeValidationError, BaseDateValidationProps, TimeValidationProps, ValidationProps } from '@mui/x-date-pickers/internals';
+import { Validator, BaseDateValidationProps, TimeValidationProps, ValidationProps } from '@mui/x-date-pickers/internals';
+import { DateTimeValidationError } from '@mui/x-date-pickers/models';
 import { DayRangeValidationProps } from '../../models/dateRange';
 import { DateRange } from '../../models/range';
 export interface DateTimeRangeComponentValidationProps<TDate> extends DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {

package/internal/hooks/validation/useTimeRangeValidation.d.ts

@@ -1,4 +1,5 @@
-import { Validator, TimeValidationError, BaseTimeValidationProps, ValidationProps } from '@mui/x-date-pickers/internals';
+import { Validator, BaseTimeValidationProps, ValidationProps } from '@mui/x-date-pickers/internals';
+import { TimeValidationError } from '@mui/x-date-pickers/models';
 import { DateRange } from '../../models/range';
 export interface TimeRangeComponentValidationProps extends Required<BaseTimeValidationProps> {
 }

package/internal/models/fields.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
-import { BaseFieldProps, FieldSection } from '@mui/x-date-pickers/internals';
+import { BaseFieldProps } from '@mui/x-date-pickers/internals';
+import { FieldSection } from '@mui/x-date-pickers/models';
 export interface RangeFieldSection extends FieldSection {
     dateName: 'start' | 'end';
 }
@@ -28,7 +29,11 @@ export interface MultiInputFieldSlotRootProps {
  * Only contains what the MUI component are passing to the field, not what users can pass using the `props.slotProps.field`.
  */
 export interface BaseMultiInputFieldProps<TValue, TSection extends FieldSection, TError> extends BaseFieldProps<TValue, TSection, TError> {
-    slots?: {};
+    slots?: {
+        root?: React.ElementType;
+        separator?: React.ElementType;
+        textField?: React.ElementType;
+    };
     slotProps?: {
         root?: SlotComponentProps<React.ElementType<MultiInputFieldSlotRootProps>, {}, Record<string, any>>;
         textField?: SlotComponentProps<React.ElementType<MultiInputFieldSlotTextFieldProps>, {}, {

package/internal/models/index.d.ts

@@ -3,3 +3,4 @@ export * from './range';
 export * from './dateTimeRange';
 export * from './timeRange';
 export * from './fields';
+export * from './rangePickerProps';

package/internal/models/index.js

@@ -2,4 +2,5 @@ export * from './dateRange';
 export * from './range';
 export * from './dateTimeRange';
 export * from './timeRange';
-export * from './fields';
+export * from './fields';
+export * from './rangePickerProps';

package/internal/models/rangePickerProps.d.ts

@@ -0,0 +1,17 @@
+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>;
+}

package/internal/models/rangePickerProps.js

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

package/internal/utils/date-range-manager.d.ts

@@ -1,4 +1,4 @@
-import { MuiPickersAdapter } from '@mui/x-date-pickers/internals';
+import { MuiPickersAdapter } from '@mui/x-date-pickers/models';
 import { DateRange, RangePosition } from '../models/range';
 interface CalculateRangeChangeOptions<TDate> {
     utils: MuiPickersAdapter<TDate>;

package/internal/utils/date-utils.d.ts

@@ -1,4 +1,4 @@
-import { MuiPickersAdapter } from '@mui/x-date-pickers/internals';
+import { MuiPickersAdapter } from '@mui/x-date-pickers/models';
 import { DateRange, NonEmptyDateRange } from '../models/range';
 export declare const isRangeValid: <TDate>(utils: MuiPickersAdapter<TDate>, range: DateRange<TDate> | null) => range is NonEmptyDateRange<TDate>;
 export declare const isWithinRange: <TDate>(utils: MuiPickersAdapter<TDate>, day: TDate, range: DateRange<TDate> | null) => boolean;

package/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3OTUyNjAwMDAwMA==";
+  const releaseInfo = "MTY4MTA3NDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/internal/utils/valueManagers.d.ts

@@ -6,4 +6,4 @@ import type { DateTimeRangeValidationError } from '../hooks/validation/useDateTi
 import { RangeFieldSection } from '../models/fields';
 export type RangePickerValueManager<TValue = [any, any], TDate = any, TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<TValue, TDate, TError>;
 export declare const rangeValueManager: RangePickerValueManager;
-export declare const rangeFieldValueManager: FieldValueManager<DateRange<any>, any, RangeFieldSection, DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError>;
+export declare const rangeFieldValueManager: FieldValueManager<DateRange<any>, any, RangeFieldSection>;

package/internal/utils/valueManagers.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { replaceInvalidDateByNull, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, areDatesEqual } from '@mui/x-date-pickers/internals';
+import { replaceInvalidDateByNull, addPositionPropertiesToSections, createDateStrForInputFromSections, areDatesEqual } from '@mui/x-date-pickers/internals';
 import { splitDateRangeSections, removeLastSeparator } from './date-fields-utils';
 export const rangeValueManager = {
   emptyValue: [null, null],
@@ -7,6 +7,7 @@ export const rangeValueManager = {
   cleanValue: (utils, value) => value.map(date => replaceInvalidDateByNull(utils, date)),
   areValuesEqual: (utils, a, b) => areDatesEqual(utils, a[0], b[0]) && areDatesEqual(utils, a[1], b[1]),
   isSameError: (a, b) => b !== null && a[1] === b[1] && a[0] === b[0],
+  hasError: error => error[0] != null || error[1] != null,
   defaultErrorState: [null, null]
 };
 export const rangeFieldValueManager = {
@@ -24,17 +25,17 @@ export const rangeFieldValueManager = {
     }
     return [prevReferenceValue[1], value[1]];
   },
-  getSectionsFromValue: (utils, localeText, prevSections, [start, end], format) => {
-    const prevDateRangeSections = prevSections == null ? {
+  getSectionsFromValue: (utils, [start, end], fallbackSections, isRTL, getSectionsFromDate) => {
+    const separatedFallbackSections = fallbackSections == null ? {
       startDate: null,
       endDate: null
-    } : splitDateRangeSections(prevSections);
-    const getSections = (newDate, prevDateSections, position) => {
-      const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!prevDateSections;
+    } : splitDateRangeSections(fallbackSections);
+    const getSections = (newDate, fallbackDateSections, position) => {
+      const shouldReUsePrevDateSections = !utils.isValid(newDate) && !!fallbackDateSections;
       if (shouldReUsePrevDateSections) {
-        return prevDateSections;
+        return fallbackDateSections;
       }
-      const sections = splitFormatIntoSections(utils, localeText, format, newDate);
+      const sections = getSectionsFromDate(newDate);
       return sections.map((section, sectionIndex) => {
         if (sectionIndex === sections.length - 1 && position === 'start') {
           return _extends({}, section, {
@@ -47,16 +48,11 @@ export const rangeFieldValueManager = {
         });
       });
     };
-    return addPositionPropertiesToSections([...getSections(start, prevDateRangeSections.startDate, 'start'), ...getSections(end, prevDateRangeSections.endDate, 'end')]);
+    return addPositionPropertiesToSections([...getSections(start, separatedFallbackSections.startDate, 'start'), ...getSections(end, separatedFallbackSections.endDate, 'end')], isRTL);
   },
-  getValueStrFromSections: sections => {
+  getValueStrFromSections: (sections, isRTL) => {
     const dateRangeSections = splitDateRangeSections(sections);
-    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate]);
-  },
-  getActiveDateSections: (sections, activeSection) => {
-    const index = activeSection.dateName === 'start' ? 0 : 1;
-    const dateRangeSections = splitDateRangeSections(sections);
-    return index === 0 ? removeLastSeparator(dateRangeSections.startDate) : dateRangeSections.endDate;
+    return createDateStrForInputFromSections([...dateRangeSections.startDate, ...dateRangeSections.endDate], isRTL);
   },
   parseValueStr: (valueStr, referenceValue, parseDate) => {
     // TODO: Improve because it would not work if the date format has `–` as a separator.
@@ -72,13 +68,19 @@ export const rangeFieldValueManager = {
     const index = activeSection.dateName === 'start' ? 0 : 1;
     const updateDateInRange = (newDate, prevDateRange) => index === 0 ? [newDate, prevDateRange[1]] : [prevDateRange[0], newDate];
     return {
-      activeDate: state.value[index],
-      referenceActiveDate: state.referenceValue[index],
-      getNewValueFromNewActiveDate: newActiveDate => ({
+      date: state.value[index],
+      referenceDate: state.referenceValue[index],
+      getSections: sections => {
+        const dateRangeSections = splitDateRangeSections(sections);
+        if (index === 0) {
+          return removeLastSeparator(dateRangeSections.startDate);
+        }
+        return dateRangeSections.endDate;
+      },
+      getNewValuesFromNewActiveDate: newActiveDate => ({
         value: updateDateInRange(newActiveDate, state.value),
         referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : updateDateInRange(newActiveDate, state.referenceValue)
       })
     };
-  },
-  hasError: error => error[0] != null || error[1] != null
+  }
 };

package/legacy/DateRangePicker/DateRangePicker.js

@@ -146,6 +146,18 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label: PropTypes.node,
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -154,6 +154,18 @@ DesktopDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label: PropTypes.node,
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -159,6 +159,18 @@ MobileDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label: PropTypes.node,
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.

package/legacy/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -289,6 +289,16 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool,
   /**
    * The selected value.
    * Used when the component is controlled.

package/legacy/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -355,6 +355,16 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool,
   /**
    * The selected value.
    * Used when the component is controlled.

package/legacy/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -321,6 +321,16 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool,
   /**
    * The selected value.
    * Used when the component is controlled.

package/legacy/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps", "components", "componentsProps"],
-  _excluded2 = ["ref", "onPaste", "inputMode", "readOnly"];
+var _excluded = ["slots", "slotProps", "components", "componentsProps", "InputProps", "inputProps"],
+  _excluded2 = ["inputRef"],
+  _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
@@ -19,24 +20,32 @@ var SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleInp
     slotProps = themeProps.slotProps,
     components = themeProps.components,
     componentsProps = themeProps.componentsProps,
+    InputProps = themeProps.InputProps,
+    inputProps = themeProps.inputProps,
     other = _objectWithoutProperties(themeProps, _excluded);
   var ownerState = themeProps;
   var TextField = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : MuiTextField;
-  var textFieldProps = useSlotProps({
-    elementType: TextField,
-    externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
-    externalForwardedProps: other,
-    ownerState: ownerState
-  });
+  var _useSlotProps = useSlotProps({
+      elementType: TextField,
+      externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
+      externalForwardedProps: other,
+      ownerState: ownerState
+    }),
+    externalInputRef = _useSlotProps.inputRef,
+    textFieldProps = _objectWithoutProperties(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
   var _useSingleInputDateRa = useSingleInputDateRangeField({
       props: textFieldProps,
-      inputRef: textFieldProps.inputRef
+      inputRef: externalInputRef
     }),
     inputRef = _useSingleInputDateRa.ref,
     onPaste = _useSingleInputDateRa.onPaste,
     inputMode = _useSingleInputDateRa.inputMode,
     readOnly = _useSingleInputDateRa.readOnly,
-    fieldProps = _objectWithoutProperties(_useSingleInputDateRa, _excluded2);
+    fieldProps = _objectWithoutProperties(_useSingleInputDateRa, _excluded3);
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
@@ -48,6 +57,7 @@ var SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleInp
     })
   }));
 });
+SingleInputDateRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/legacy/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps", "components", "componentsProps"],
-  _excluded2 = ["ref", "onPaste", "inputMode", "readOnly"];
+var _excluded = ["slots", "slotProps", "components", "componentsProps", "InputProps", "inputProps"],
+  _excluded2 = ["inputRef"],
+  _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import TextField from '@mui/material/TextField';
+import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { useSingleInputDateTimeRangeField } from './useSingleInputDateTimeRangeField';
@@ -19,25 +20,33 @@ var SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Singl
     slotProps = themeProps.slotProps,
     components = themeProps.components,
     componentsProps = themeProps.componentsProps,
+    InputProps = themeProps.InputProps,
+    inputProps = themeProps.inputProps,
     other = _objectWithoutProperties(themeProps, _excluded);
   var ownerState = themeProps;
-  var Input = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : TextField;
-  var inputProps = useSlotProps({
-    elementType: Input,
-    externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
-    externalForwardedProps: other,
-    ownerState: ownerState
-  });
+  var TextField = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : MuiTextField;
+  var _useSlotProps = useSlotProps({
+      elementType: TextField,
+      externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
+      externalForwardedProps: other,
+      ownerState: ownerState
+    }),
+    externalInputRef = _useSlotProps.inputRef,
+    textFieldProps = _objectWithoutProperties(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
   var _useSingleInputDateTi = useSingleInputDateTimeRangeField({
-      props: inputProps,
-      inputRef: inputProps.inputRef
+      props: textFieldProps,
+      inputRef: externalInputRef
     }),
     inputRef = _useSingleInputDateTi.ref,
     onPaste = _useSingleInputDateTi.onPaste,
     inputMode = _useSingleInputDateTi.inputMode,
     readOnly = _useSingleInputDateTi.readOnly,
-    fieldProps = _objectWithoutProperties(_useSingleInputDateTi, _excluded2);
-  return /*#__PURE__*/_jsx(Input, _extends({
+    fieldProps = _objectWithoutProperties(_useSingleInputDateTi, _excluded3);
+  return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
     inputProps: _extends({}, fieldProps.inputProps, {
@@ -48,6 +57,7 @@ var SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Singl
     })
   }));
 });
+SingleInputDateTimeRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/legacy/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["slots", "slotProps", "components", "componentsProps"],
-  _excluded2 = ["ref", "onPaste", "inputMode", "readOnly"];
+var _excluded = ["slots", "slotProps", "components", "componentsProps", "InputProps", "inputProps"],
+  _excluded2 = ["inputRef"],
+  _excluded3 = ["ref", "onPaste", "inputMode", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import TextField from '@mui/material/TextField';
+import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { useSingleInputTimeRangeField } from './useSingleInputTimeRangeField';
@@ -19,25 +20,33 @@ var SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInp
     slotProps = themeProps.slotProps,
     components = themeProps.components,
     componentsProps = themeProps.componentsProps,
+    InputProps = themeProps.InputProps,
+    inputProps = themeProps.inputProps,
     other = _objectWithoutProperties(themeProps, _excluded);
   var ownerState = themeProps;
-  var Input = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : TextField;
-  var inputProps = useSlotProps({
-    elementType: Input,
-    externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
-    externalForwardedProps: other,
-    ownerState: ownerState
-  });
+  var TextField = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : MuiTextField;
+  var _useSlotProps = useSlotProps({
+      elementType: TextField,
+      externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
+      externalForwardedProps: other,
+      ownerState: ownerState
+    }),
+    externalInputRef = _useSlotProps.inputRef,
+    textFieldProps = _objectWithoutProperties(_useSlotProps, _excluded2);
+
+  // TODO: Remove when mui/material-ui#35088 will be merged
+  textFieldProps.inputProps = _extends({}, textFieldProps.inputProps, inputProps);
+  textFieldProps.InputProps = _extends({}, textFieldProps.InputProps, InputProps);
   var _useSingleInputTimeRa = useSingleInputTimeRangeField({
-      props: inputProps,
-      inputRef: inputProps.inputRef
+      props: textFieldProps,
+      inputRef: externalInputRef
     }),
     inputRef = _useSingleInputTimeRa.ref,
     onPaste = _useSingleInputTimeRa.onPaste,
     inputMode = _useSingleInputTimeRa.inputMode,
     readOnly = _useSingleInputTimeRa.readOnly,
-    fieldProps = _objectWithoutProperties(_useSingleInputTimeRa, _excluded2);
-  return /*#__PURE__*/_jsx(Input, _extends({
+    fieldProps = _objectWithoutProperties(_useSingleInputTimeRa, _excluded3);
+  return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
     inputProps: _extends({}, fieldProps.inputProps, {
@@ -48,6 +57,7 @@ var SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInp
     })
   }));
 });
+SingleInputTimeRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.0.3
+ * @mui/x-date-pickers-pro v6.1.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the