@mui/x-date-pickers 6.3.1 → 6.5.0

package/DateCalendar/DayCalendar.js

@@ -216,6 +216,7 @@ export function DayCalendar(inProps) {
   });
   const classes = useUtilityClasses(props);
   const theme = useTheme();
+  const isRTL = theme.direction === 'rtl';
   const {
     onFocusedDayChange,
     className,
@@ -290,13 +291,13 @@ export function DayCalendar(inProps) {
         break;
       case 'ArrowLeft':
         {
-          const newFocusedDayDefault = utils.addDays(day, theme.direction === 'ltr' ? -1 : 1);
-          const nextAvailableMonth = theme.direction === 'ltr' ? utils.getPreviousMonth(day) : utils.getNextMonth(day);
+          const newFocusedDayDefault = utils.addDays(day, isRTL ? 1 : -1);
+          const nextAvailableMonth = utils.addMonths(day, isRTL ? 1 : -1);
           const closestDayToFocus = findClosestEnabledDate({
             utils,
             date: newFocusedDayDefault,
-            minDate: theme.direction === 'ltr' ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
-            maxDate: theme.direction === 'ltr' ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
+            minDate: isRTL ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
+            maxDate: isRTL ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
             isDateDisabled
           });
           focusDay(closestDayToFocus || newFocusedDayDefault);
@@ -305,13 +306,13 @@ export function DayCalendar(inProps) {
         }
       case 'ArrowRight':
         {
-          const newFocusedDayDefault = utils.addDays(day, theme.direction === 'ltr' ? 1 : -1);
-          const nextAvailableMonth = theme.direction === 'ltr' ? utils.getNextMonth(day) : utils.getPreviousMonth(day);
+          const newFocusedDayDefault = utils.addDays(day, isRTL ? -1 : 1);
+          const nextAvailableMonth = utils.addMonths(day, isRTL ? -1 : 1);
           const closestDayToFocus = findClosestEnabledDate({
             utils,
             date: newFocusedDayDefault,
-            minDate: theme.direction === 'ltr' ? newFocusedDayDefault : utils.startOfMonth(nextAvailableMonth),
-            maxDate: theme.direction === 'ltr' ? utils.endOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            minDate: isRTL ? utils.startOfMonth(nextAvailableMonth) : newFocusedDayDefault,
+            maxDate: isRTL ? newFocusedDayDefault : utils.endOfMonth(nextAvailableMonth),
             isDateDisabled
           });
           focusDay(closestDayToFocus || newFocusedDayDefault);
@@ -327,11 +328,11 @@ export function DayCalendar(inProps) {
         event.preventDefault();
         break;
       case 'PageUp':
-        focusDay(utils.getNextMonth(day));
+        focusDay(utils.addMonths(day, 1));
         event.preventDefault();
         break;
       case 'PageDown':
-        focusDay(utils.getPreviousMonth(day));
+        focusDay(utils.addMonths(day, -1));
         event.preventDefault();
         break;
       default:

package/DateCalendar/PickersCalendarHeader.js

@@ -141,8 +141,8 @@ export function PickersCalendarHeader(inProps) {
       className: classes.switchViewIcon
     }),
     switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
-  const selectNextMonth = () => onMonthChange(utils.getNextMonth(month), 'left');
-  const selectPreviousMonth = () => onMonthChange(utils.getPreviousMonth(month), 'right');
+  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1), 'left');
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1), 'right');
   const isNextMonthDisabled = useNextMonthDisabled(month, {
     disableFuture,
     maxDate

package/DateCalendar/useCalendarState.d.ts

@@ -22,7 +22,7 @@ interface ChangeFocusedDayPayload<TDate> {
      */
     withoutMonthSwitchingAnimation?: boolean;
 }
-export declare const createCalendarStateReducer: <TDate extends unknown>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate>) => (state: CalendarState<TDate>, action: {
+export declare const createCalendarStateReducer: <TDate extends unknown>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate, any>) => (state: CalendarState<TDate>, action: {
     type: "finishMonthSwitchingAnimation";
 } | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload<TDate>>) => CalendarState<TDate>;
 interface CalendarStateInput<TDate> extends Pick<DateCalendarDefaultizedProps<TDate>, 'value' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {

package/DateField/DateField.types.d.ts

@@ -13,7 +13,7 @@ export interface UseDateFieldParams<TDate, TChildProps extends {}> {
 }
 export interface UseDateFieldProps<TDate> extends MakeOptional<UseFieldInternalProps<TDate | null, FieldSection, DateValidationError>, 'format'>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, BaseDateValidationProps<TDate> {
 }
-export type UseDateFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | 'format'>;
+export type UseDateFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateFieldProps<TDate>, keyof BaseDateValidationProps<any> | 'format'>;
 export type UseDateFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseDateFieldProps<TDate>> & UseDateFieldProps<TDate>;
 export interface DateFieldProps<TDate> extends UseDateFieldComponentProps<TDate, FieldsTextFieldProps>, SlotsAndSlotProps<DateFieldSlotsComponent, DateFieldSlotsComponentsProps<TDate>> {
 }

package/DateField/index.d.ts

@@ -1,3 +1,3 @@
 export { DateField } from './DateField';
 export { useDateField as unstable_useDateField } from './useDateField';
-export type { UseDateFieldProps, UseDateFieldComponentProps, DateFieldProps, } from './DateField.types';
+export type { UseDateFieldProps, UseDateFieldComponentProps, DateFieldProps, UseDateFieldDefaultizedProps, } from './DateField.types';

package/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps, UseDateFieldParams } from './DateField.types';
-export declare const useDateField: <TDate, TChildProps extends {}>({ props, inputRef, }: UseDateFieldParams<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<Omit<TChildProps, keyof UseDateFieldProps<TDate>>>;
+export declare const useDateField: <TDate, TChildProps extends {}>({ props: inProps, inputRef, }: UseDateFieldParams<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<Omit<TChildProps & Omit<UseDateFieldProps<TDate>, "format" | keyof import("../internals").BaseDateValidationProps<any>> & Required<Pick<UseDateFieldProps<TDate>, "format" | keyof import("../internals").BaseDateValidationProps<any>>>, keyof UseDateFieldProps<TDate>>>;

package/DateField/useDateField.js

@@ -1,11 +1,10 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDate } from '../internals/utils/validation/validateDate';
 import { applyDefaultDate } from '../internals/utils/date-utils';
 import { useUtils, useDefaultDates } from '../internals/hooks/useUtils';
+import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields';
 const useDefaultizedDateField = props => {
   var _props$disablePast, _props$disableFuture, _props$format;
   const utils = useUtils();
@@ -19,54 +18,18 @@ const useDefaultizedDateField = props => {
   });
 };
 export const useDateField = ({
-  props,
+  props: inProps,
   inputRef
 }) => {
-  const _useDefaultizedDateFi = useDefaultizedDateField(props),
-    {
-      value,
-      defaultValue,
-      format,
-      formatDensity,
-      shouldRespectLeadingZeros,
-      onChange,
-      readOnly,
-      onError,
-      shouldDisableDate,
-      shouldDisableMonth,
-      shouldDisableYear,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      selectedSections,
-      onSelectedSectionsChange,
-      unstableFieldRef
-    } = _useDefaultizedDateFi,
-    other = _objectWithoutPropertiesLoose(_useDefaultizedDateFi, _excluded);
+  const props = useDefaultizedDateField(inProps);
+  const {
+    forwardedProps,
+    internalProps
+  } = splitFieldInternalAndForwardedProps(props, 'date');
   return useField({
     inputRef,
-    forwardedProps: other,
-    internalProps: {
-      value,
-      defaultValue,
-      format,
-      formatDensity,
-      shouldRespectLeadingZeros,
-      onChange,
-      readOnly,
-      onError,
-      shouldDisableDate,
-      shouldDisableMonth,
-      shouldDisableYear,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      selectedSections,
-      onSelectedSectionsChange,
-      unstableFieldRef
-    },
+    forwardedProps,
+    internalProps,
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,
     validator: validateDate,

package/DatePicker/shared.d.ts

@@ -52,6 +52,6 @@ type UseDatePickerDefaultizedProps<TDate, Props extends BaseDatePickerProps<TDat
 export declare const getDatePickerFieldFormat: (utils: MuiPickersAdapter<any>, { format, views }: {
     format?: string | undefined;
     views: readonly DateView[];
-}) => any;
+}) => string | undefined;
 export declare function useDatePickerDefaultizedProps<TDate, Props extends BaseDatePickerProps<TDate>>(props: Props, name: string): UseDatePickerDefaultizedProps<TDate, Props>;
 export {};

package/DateTimeField/DateTimeField.types.d.ts

@@ -18,7 +18,7 @@ export interface UseDateTimeFieldProps<TDate> extends MakeOptional<UseFieldInter
      */
     ampm?: boolean;
 }
-export type UseDateTimeFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateTimeFieldProps<TDate>, keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps | 'format'>;
+export type UseDateTimeFieldDefaultizedProps<TDate> = DefaultizedProps<UseDateTimeFieldProps<TDate>, keyof BaseDateValidationProps<any> | keyof BaseTimeValidationProps | 'format'>;
 export type UseDateTimeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseDateTimeFieldProps<TDate>> & UseDateTimeFieldProps<TDate>;
 export interface DateTimeFieldProps<TDate> extends UseDateTimeFieldComponentProps<TDate, FieldsTextFieldProps> {
     /**

package/DateTimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { DateTimeField } from './DateTimeField';
 export { useDateTimeField as unstable_useDateTimeField } from './useDateTimeField';
-export type { UseDateTimeFieldProps, UseDateTimeFieldComponentProps, DateTimeFieldProps, } from './DateTimeField.types';
+export type { UseDateTimeFieldProps, UseDateTimeFieldComponentProps, DateTimeFieldProps, UseDateTimeFieldDefaultizedProps, } from './DateTimeField.types';

package/DateTimeField/useDateTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateTimeFieldProps, UseDateTimeFieldParams } from './DateTimeField.types';
-export declare const useDateTimeField: <TDate, TChildProps extends {}>({ props, inputRef, }: UseDateTimeFieldParams<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<Omit<TChildProps, keyof UseDateTimeFieldProps<TDate>>>;
+export declare const useDateTimeField: <TDate, TChildProps extends {}>({ props: inProps, inputRef, }: UseDateTimeFieldParams<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<Omit<TChildProps & Omit<UseDateTimeFieldProps<TDate>, "format" | "disableFuture" | "disablePast" | "maxDate" | "minDate"> & Required<Pick<UseDateTimeFieldProps<TDate>, "format" | "disableFuture" | "disablePast" | "maxDate" | "minDate">>, keyof UseDateTimeFieldProps<any>>>;

package/DateTimeField/useDateTimeField.js

@@ -1,11 +1,10 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { applyDefaultDate } from '../internals/utils/date-utils';
 import { useUtils, useDefaultDates } from '../internals/hooks/useUtils';
+import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields';
 const useDefaultizedDateTimeField = props => {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format, _props$minDateTime, _props$maxDateTime, _props$minDateTime2, _props$maxDateTime2;
   const utils = useUtils();
@@ -24,68 +23,18 @@ const useDefaultizedDateTimeField = props => {
   });
 };
 export const useDateTimeField = ({
-  props,
+  props: inProps,
   inputRef
 }) => {
-  const _useDefaultizedDateTi = useDefaultizedDateTimeField(props),
-    {
-      value,
-      defaultValue,
-      format,
-      formatDensity,
-      shouldRespectLeadingZeros,
-      onChange,
-      readOnly,
-      onError,
-      shouldDisableDate,
-      shouldDisableMonth,
-      shouldDisableYear,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      minTime,
-      maxTime,
-      minutesStep,
-      disableIgnoringDatePartForTimeValidation,
-      shouldDisableClock,
-      shouldDisableTime,
-      selectedSections,
-      onSelectedSectionsChange,
-      ampm,
-      unstableFieldRef
-    } = _useDefaultizedDateTi,
-    other = _objectWithoutPropertiesLoose(_useDefaultizedDateTi, _excluded);
+  const props = useDefaultizedDateTimeField(inProps);
+  const {
+    forwardedProps,
+    internalProps
+  } = splitFieldInternalAndForwardedProps(props, 'date-time');
   return useField({
     inputRef,
-    forwardedProps: other,
-    internalProps: {
-      value,
-      defaultValue,
-      format,
-      formatDensity,
-      shouldRespectLeadingZeros,
-      onChange,
-      readOnly,
-      onError,
-      shouldDisableDate,
-      shouldDisableMonth,
-      shouldDisableYear,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      minTime,
-      maxTime,
-      minutesStep,
-      shouldDisableClock,
-      shouldDisableTime,
-      disableIgnoringDatePartForTimeValidation,
-      selectedSections,
-      onSelectedSectionsChange,
-      ampm,
-      unstableFieldRef
-    },
+    forwardedProps,
+    internalProps,
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,
     validator: validateDateTime,

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -39,8 +39,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
       field: ownerState => {
         var _defaultizedProps$slo;
         return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref,
-          ampm: defaultizedProps.ampm
+          ref
         });
       },
       toolbar: _extends({

package/DesktopTimePicker/DesktopTimePicker.js

@@ -52,8 +52,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
       field: ownerState => {
         var _defaultizedProps$slo;
         return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref,
-          ampm: defaultizedProps.ampm
+          ref
         });
       },
       toolbar: _extends({

package/LocalizationProvider/LocalizationProvider.d.ts

@@ -13,13 +13,13 @@ export type MuiPickersAdapterContextNullableValue<TDate> = {
     [K in keyof MuiPickersAdapterContextValue<TDate>]: MuiPickersAdapterContextValue<TDate>[K] | null;
 };
 export declare const MuiPickersAdapterContext: React.Context<MuiPickersAdapterContextNullableValue<any> | null>;
-export interface LocalizationProviderProps<TDate> {
+export interface LocalizationProviderProps<TDate, TLocale> {
     children?: React.ReactNode;
     /**
      * Date library adapter class function.
      * @see See the localization provider {@link https://mui.com/x/react-date-pickers/getting-started/#setup-your-date-library-adapter date adapter setup section} for more details.
      */
-    dateAdapter?: new (...args: any) => MuiPickersAdapter<TDate>;
+    dateAdapter?: new (...args: any) => MuiPickersAdapter<TDate, TLocale>;
     /** Formats that are used for any child pickers */
     dateFormats?: Partial<AdapterFormats>;
     /**
@@ -29,18 +29,20 @@ export interface LocalizationProviderProps<TDate> {
      * ```
      */
     dateLibInstance?: any;
-    /** Locale for the date library you are using
+    /**
+     * Locale for the date library you are using
      */
-    adapterLocale?: string | object;
+    adapterLocale?: TLocale;
     /**
      * Locale for components texts
      */
     localeText?: PickersInputLocaleText<TDate>;
 }
+type LocalizationProviderComponent = (<TDate, TLocale>(props: LocalizationProviderProps<TDate, TLocale>) => JSX.Element) & {
+    propTypes?: any;
+};
 /**
  * @ignore - do not document.
  */
-export declare function LocalizationProvider<TDate>(inProps: LocalizationProviderProps<TDate>): JSX.Element;
-export declare namespace LocalizationProvider {
-    var propTypes: any;
-}
+export declare const LocalizationProvider: LocalizationProviderComponent;
+export {};

package/LocalizationProvider/LocalizationProvider.js

@@ -12,7 +12,7 @@ if (process.env.NODE_ENV !== 'production') {
 /**
  * @ignore - do not document.
  */
-export function LocalizationProvider(inProps) {
+export const LocalizationProvider = function LocalizationProvider(inProps) {
   var _React$useContext;
   const {
       localeText: inLocaleText
@@ -77,7 +77,7 @@ export function LocalizationProvider(inProps) {
     value: contextValue,
     children: children
   });
-}
+};
 process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -86,7 +86,7 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
   /**
    * Locale for the date library you are using
    */
-  adapterLocale: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  adapterLocale: PropTypes.any,
   children: PropTypes.node,
   /**
    * Date library adapter class function.

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -37,8 +37,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
       field: ownerState => {
         var _defaultizedProps$slo;
         return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref,
-          ampm: defaultizedProps.ampm
+          ref
         });
       },
       toolbar: _extends({

package/MobileTimePicker/MobileTimePicker.js

@@ -33,8 +33,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
       field: ownerState => {
         var _defaultizedProps$slo;
         return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref,
-          ampm: defaultizedProps.ampm
+          ref
         });
       },
       toolbar: _extends({

package/MonthCalendar/MonthCalendar.js

@@ -10,7 +10,7 @@ import { unstable_useControlled as useControlled, unstable_composeClasses as com
 import { PickersMonth } from './PickersMonth';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
 import { getMonthCalendarUtilityClass } from './monthCalendarClasses';
-import { applyDefaultDate } from '../internals/utils/date-utils';
+import { applyDefaultDate, getMonthsInYear } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -175,7 +175,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     className: clsx(classes.root, className),
     ownerState: ownerState
   }, other, {
-    children: utils.getMonthArray(selectedDateOrStartOfMonth).map(month => {
+    children: getMonthsInYear(utils, selectedDateOrStartOfMonth).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
       const isSelected = monthNumber === selectedMonth;

package/TimeField/index.d.ts

@@ -1,3 +1,3 @@
 export { TimeField } from './TimeField';
 export { useTimeField as unstable_useTimeField } from './useTimeField';
-export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, } from './TimeField.types';
+export type { UseTimeFieldProps, UseTimeFieldComponentProps, TimeFieldProps, UseTimeFieldDefaultizedProps, } from './TimeField.types';

package/TimeField/useTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseTimeFieldProps, UseTimeFieldParams } from './TimeField.types';
-export declare const useTimeField: <TDate, TChildProps extends {}>({ props, inputRef, }: UseTimeFieldParams<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<Omit<TChildProps, keyof UseTimeFieldProps<TDate>>>;
+export declare const useTimeField: <TDate, TChildProps extends {}>({ props: inProps, inputRef, }: UseTimeFieldParams<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<Omit<TChildProps & Omit<UseTimeFieldProps<TDate>, "format" | keyof import("../internals").BaseTimeValidationProps> & Required<Pick<UseTimeFieldProps<TDate>, "format" | keyof import("../internals").BaseTimeValidationProps>>, keyof UseTimeFieldProps<any>>>;

package/TimeField/useTimeField.js

@@ -1,10 +1,9 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
 import { validateTime } from '../internals/utils/validation/validateTime';
 import { useUtils } from '../internals/hooks/useUtils';
+import { splitFieldInternalAndForwardedProps } from '../internals/utils/fields';
 const useDefaultizedTimeField = props => {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format;
   const utils = useUtils();
@@ -17,58 +16,18 @@ const useDefaultizedTimeField = props => {
   });
 };
 export const useTimeField = ({
-  props,
+  props: inProps,
   inputRef
 }) => {
-  const _useDefaultizedTimeFi = useDefaultizedTimeField(props),
-    {
-      value,
-      defaultValue,
-      format,
-      formatDensity,
-      shouldRespectLeadingZeros,
-      onChange,
-      readOnly,
-      onError,
-      disableFuture,
-      disablePast,
-      minTime,
-      maxTime,
-      minutesStep,
-      shouldDisableClock,
-      shouldDisableTime,
-      disableIgnoringDatePartForTimeValidation,
-      selectedSections,
-      onSelectedSectionsChange,
-      ampm,
-      unstableFieldRef
-    } = _useDefaultizedTimeFi,
-    other = _objectWithoutPropertiesLoose(_useDefaultizedTimeFi, _excluded);
+  const props = useDefaultizedTimeField(inProps);
+  const {
+    forwardedProps,
+    internalProps
+  } = splitFieldInternalAndForwardedProps(props, 'time');
   return useField({
     inputRef,
-    forwardedProps: other,
-    internalProps: {
-      value,
-      defaultValue,
-      format,
-      formatDensity,
-      shouldRespectLeadingZeros,
-      onChange,
-      readOnly,
-      onError,
-      disableFuture,
-      disablePast,
-      minTime,
-      maxTime,
-      minutesStep,
-      shouldDisableClock,
-      shouldDisableTime,
-      disableIgnoringDatePartForTimeValidation,
-      selectedSections,
-      onSelectedSectionsChange,
-      ampm,
-      unstableFieldRef
-    },
+    forwardedProps,
+    internalProps,
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,
     validator: validateTime,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.3.1
+ * @mui/x-date-pickers v6.5.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/hooks/useField/useField.js

@@ -69,8 +69,16 @@ export const useField = params => {
       return;
     }
     const browserStartIndex = (_selectionStart = inputRef.current.selectionStart) != null ? _selectionStart : 0;
-    const nextSectionIndex = browserStartIndex <= state.sections[0].startInInput ? 1 // Special case if browser index is in invisible characters at the beginning.
-    : state.sections.findIndex(section => section.startInInput - section.startSeparator.length > browserStartIndex);
+    let nextSectionIndex;
+    if (browserStartIndex <= state.sections[0].startInInput) {
+      // Special case if browser index is in invisible characters at the beginning
+      nextSectionIndex = 1;
+    } else if (browserStartIndex >= state.sections[state.sections.length - 1].endInInput) {
+      // If the click is after the last character of the input, then we want to select the 1st section.
+      nextSectionIndex = 1;
+    } else {
+      nextSectionIndex = state.sections.findIndex(section => section.startInInput - section.startSeparator.length > browserStartIndex);
+    }
     const sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
     setSelectedSections(sectionIndex);
   };

package/internals/hooks/useField/useField.utils.d.ts

@@ -1,29 +1,29 @@
 import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldSectionWithoutPosition, FieldSectionValueBoundaries } from './useField.types';
 import { FieldSectionType, FieldValueType, FieldSection, MuiPickersAdapter, FieldSectionContentType } from '../../../models';
 import { PickersLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
-export declare const getDateSectionConfigFromFormatToken: <TDate>(utils: MuiPickersAdapter<TDate>, formatToken: string) => Pick<FieldSection, 'type' | 'contentType'> & {
+export declare const getDateSectionConfigFromFormatToken: <TDate>(utils: MuiPickersAdapter<TDate, any>, formatToken: string) => Pick<FieldSection, 'type' | 'contentType'> & {
     maxLength: number | undefined;
 };
-export declare const getDaysInWeekStr: <TDate>(utils: MuiPickersAdapter<TDate>, format: string) => string[];
-export declare const getLetterEditingOptions: <TDate>(utils: MuiPickersAdapter<TDate>, sectionType: FieldSectionType, format: string) => string[];
-export declare const cleanLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate>, valueStr: string, size: number) => string;
-export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate>, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, section: Pick<FieldSection, 'format' | 'type' | 'contentType' | 'hasLeadingZerosInFormat' | 'hasLeadingZerosInInput' | 'maxLength'>) => string;
-export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate>, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, activeDate: TDate | null) => string;
+export declare const getDaysInWeekStr: <TDate>(utils: MuiPickersAdapter<TDate, any>, format: string) => string[];
+export declare const getLetterEditingOptions: <TDate>(utils: MuiPickersAdapter<TDate, any>, sectionType: FieldSectionType, format: string) => string[];
+export declare const cleanLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueStr: string, size: number) => string;
+export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate, any>, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, section: Pick<FieldSection, 'format' | 'type' | 'contentType' | 'hasLeadingZerosInFormat' | 'hasLeadingZerosInInput' | 'maxLength'>) => string;
+export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, activeDate: TDate | null) => string;
 export declare const getSectionVisibleValue: (section: FieldSectionWithoutPosition, target: 'input-rtl' | 'input-ltr' | 'non-input') => string;
 export declare const cleanString: (dirtyString: string) => string;
 export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: FieldSectionWithoutPosition<TSection>[], isRTL: boolean) => TSection[];
-export declare const changeSectionValueFormat: <TDate>(utils: MuiPickersAdapter<TDate>, valueStr: string, currentFormat: string, newFormat: string) => string;
-export declare const doesSectionFormatHaveLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate>, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
-export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate>, localeText: PickersLocaleText<TDate>, format: string, date: TDate | null, formatDensity: 'dense' | 'spacious', shouldRespectLeadingZeros: boolean, isRTL: boolean) => FieldSectionWithoutPosition[];
+export declare const changeSectionValueFormat: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueStr: string, currentFormat: string, newFormat: string) => string;
+export declare const doesSectionFormatHaveLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate, any>, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
+export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, localeText: PickersLocaleText<TDate>, format: string, date: TDate | null, formatDensity: 'dense' | 'spacious', shouldRespectLeadingZeros: boolean, isRTL: boolean) => FieldSectionWithoutPosition[];
 /**
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.
  * To make sure that the parsing works, we are building a format and a date without any separator.
  */
-export declare const getDateFromDateSections: <TDate>(utils: MuiPickersAdapter<TDate>, sections: FieldSection[]) => TDate | null;
+export declare const getDateFromDateSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, sections: FieldSection[]) => TDate | null;
 export declare const createDateStrForInputFromSections: (sections: FieldSection[], isRTL: boolean) => string;
-export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDate>) => FieldSectionsValueBoundaries<TDate>;
+export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDate, any>) => FieldSectionsValueBoundaries<TDate>;
 export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
-export declare const mergeDateIntoReferenceDate: <TDate>(utils: MuiPickersAdapter<TDate>, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
+export declare const mergeDateIntoReferenceDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
 export declare const isAndroid: () => boolean;
-export declare const clampDaySectionIfPossible: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate>, sections: TSection[], sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>) => TSection[] | null;
+export declare const clampDaySectionIfPossible: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, sections: TSection[], sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>) => TSection[] | null;
 export declare const getSectionOrder: (sections: FieldSectionWithoutPosition[], isRTL: boolean) => SectionOrdering;

package/internals/hooks/useField/useField.utils.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { getMonthsInYear } from '../../utils/date-utils';
 export const getDateSectionConfigFromFormatToken = (utils, formatToken) => {
   const config = utils.formatTokenMap[formatToken];
   if (config == null) {
@@ -47,7 +48,7 @@ export const getLetterEditingOptions = (utils, sectionType, format) => {
   switch (sectionType) {
     case 'month':
       {
-        return utils.getMonthArray(utils.date()).map(month => utils.formatByString(month, format));
+        return getMonthsInYear(utils, utils.date()).map(month => utils.formatByString(month, format));
       }
     case 'weekDay':
       {
@@ -460,7 +461,7 @@ export const getSectionsBoundaries = utils => {
   const {
     maxDaysInMonth,
     longestMonth
-  } = utils.getMonthArray(today).reduce((acc, month) => {
+  } = getMonthsInYear(utils, today).reduce((acc, month) => {
     const daysInMonth = utils.getDaysInMonth(month);
     if (daysInMonth > acc.maxDaysInMonth) {
       return {