@mui/x-date-pickers 6.0.2 → 6.0.4

package/internals/index.d.ts

@@ -22,11 +22,11 @@ export type { PickersPopperClassKey, PickersPopperClasses, } from './components/
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH } from './constants/dimensions';
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
-export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections, getSectionOrder, } from './hooks/useField';
-export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, UseFieldForwardedProps, FieldValueManager, FieldSection, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
+export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, } from './hooks/useField';
+export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, UseFieldForwardedProps, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { usePicker } from './hooks/usePicker';
-export type { UsePickerResponse, UsePickerParams } from './hooks/usePicker';
+export type { UsePickerResponse, UsePickerParams, UsePickerProps } from './hooks/usePicker';
 export type { UsePickerValueNonStaticProps, PickerValueManager, PickerSelectionState, } from './hooks/usePicker/usePickerValue';
 export type { UsePickerViewsNonStaticProps, PickerViewRendererLookup, UsePickerViewsProps, } from './hooks/usePicker/usePickerViews';
 export { useStaticPicker } from './hooks/useStaticPicker';
@@ -39,18 +39,14 @@ export type { ValidationCommonProps, ValidationProps, Validator, InferError, } f
 export { validateDate } from './hooks/validation/useDateValidation';
 export { validateTime } from './hooks/validation/useTimeValidation';
 export { validateDateTime } from './hooks/validation/useDateTimeValidation';
-export type { DateValidationError } from './hooks/validation/useDateValidation';
-export type { TimeValidationError } from './hooks/validation/useTimeValidation';
-export type { DateTimeValidationError } from './hooks/validation/useDateTimeValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
 export type { BaseFieldProps, FieldsTextFieldProps } from './models/fields';
 export type { BasePickerProps, BasePickerInputProps, BaseNonStaticPickerProps, } from './models/props/basePickerProps';
 export type { BaseToolbarProps, ExportedBaseToolbarProps } from './models/props/toolbar';
 export type { MuiPickersAdapter } from './models/muiPickersAdapter';
 export type { DefaultizedProps, MakeOptional } from './models/helpers';
-export type { DateOrTimeView, DateView, TimeView } from './models/views';
 export type { WrapperVariant } from './models/common';
-export { applyDefaultDate, replaceInvalidDateByNull } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
 export { extractValidationProps } from './utils/validation';

package/internals/index.js

@@ -9,7 +9,7 @@ export { pickersArrowSwitcherClasses } from './components/PickersArrowSwitcher/p
 export { pickersPopperClasses } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { DAY_MARGIN, DIALOG_WIDTH } from './constants/dimensions';
-export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, splitFormatIntoSections, getSectionOrder } from './hooks/useField';
+export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections } from './hooks/useField';
 export { usePicker } from './hooks/usePicker';
 export { useStaticPicker } from './hooks/useStaticPicker';
 export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText, useNow } from './hooks/useUtils';
@@ -18,7 +18,7 @@ export { validateDate } from './hooks/validation/useDateValidation';
 export { validateTime } from './hooks/validation/useTimeValidation';
 export { validateDateTime } from './hooks/validation/useDateTimeValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';
-export { applyDefaultDate, replaceInvalidDateByNull } from './utils/date-utils';
+export { applyDefaultDate, replaceInvalidDateByNull, areDatesEqual } from './utils/date-utils';
 export { executeInTheNextEventLoopTick, getActiveElement, onSpaceOrEnter, DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './utils/utils';
 export { defaultReduceAnimations } from './utils/defaultReduceAnimations';
 export { extractValidationProps } from './utils/validation';

package/internals/models/fields.d.ts

@@ -1,30 +1,12 @@
 import * as React from 'react';
 import { TextFieldProps } from '@mui/material/TextField';
 import type { UseFieldInternalProps } from '../hooks/useField';
-export interface BaseFieldProps<TValue, TError> extends Omit<UseFieldInternalProps<TValue, TError>, 'format'> {
+import type { FieldSection } from '../../models';
+export interface BaseFieldProps<TValue, TSection extends FieldSection, TError> extends Omit<UseFieldInternalProps<TValue, TSection, TError>, 'format'> {
     className?: string;
     format?: string;
     disabled?: boolean;
-    inputRef?: React.Ref<HTMLInputElement>;
     ref?: React.Ref<HTMLDivElement>;
 }
-/**
- * Props the single input field can receive when used inside a picker.
- * Only contains what the MUI component are passing to the field, not what users can pass using the `props.slotProps.field`.
- */
-export interface BaseSingleInputFieldProps<TValue, TError> extends BaseFieldProps<TValue, TError> {
-    label?: React.ReactNode;
-    id?: string;
-    InputProps?: {
-        ref?: React.Ref<any>;
-        endAdornment?: React.ReactNode;
-        startAdornment?: React.ReactNode;
-    };
-    inputProps?: {
-        'aria-label'?: string;
-    };
-    slots?: {};
-    slotProps?: {};
-}
 export interface FieldsTextFieldProps extends Omit<TextFieldProps, 'autoComplete' | 'error' | 'maxRows' | 'minRows' | 'multiline' | 'placeholder' | 'rows' | 'select' | 'SelectProps' | 'type'> {
 }

package/internals/models/index.d.ts

@@ -1,3 +1,2 @@
-export * from './views';
 export * from './fields';
 export * from './muiPickersAdapter';

package/internals/models/index.js

@@ -1,3 +1,2 @@
-export * from './views';
 export * from './fields';
 export * from './muiPickersAdapter';

package/internals/models/muiPickersAdapter.d.ts

@@ -1,5 +1,6 @@
 // Do not remove the `.d.ts` file extension, it allows to keep the `@ts-expect-error` below after the build.
 import { IUtils } from '@date-io/core/IUtils';
+import { FieldSectionType } from '../../models';
 
 // TODO: Maybe we should add the same constraint.
 // @ts-ignore TDate in our codebase does not have the `ExtendableDateType` constraint.
@@ -18,16 +19,6 @@ export type MuiPickersAdapter<TDate> = IUtils<TDate> & {
   getWeekNumber: (date: TDate) => number;
 };
 
-export type FieldSectionType =
-  | 'year'
-  | 'month'
-  | 'day'
-  | 'weekDay'
-  | 'hours'
-  | 'minutes'
-  | 'seconds'
-  | 'meridiem';
-
 export type FieldFormatTokenMap = {
   [formatToken: string]:
     | FieldSectionType

package/internals/models/props/basePickerProps.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import { UsePickerBaseProps } from '../../hooks/usePicker';
-import { DateOrTimeView } from '../views';
+import { DateOrTimeView } from '../../../models';
 import { PickersInputComponentLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
 import type { UsePickerViewsProps } from '../../hooks/usePicker/usePickerViews';
 import { MakeOptional } from '../helpers';
@@ -41,10 +41,10 @@ export interface BaseNonStaticPickerProps {
     format?: string;
 }
 /**
- * Props common to all non-static pickers with a single input.
+ * Props common to all non-range non-static pickers.
  * These props are handled by the headless wrappers.
  */
-export interface BaseSingleInputNonStaticPickerProps {
+export interface BaseNonRangeNonStaticPickerProps {
     /**
      * The label content.
      */

package/internals/models/props/tabs.d.ts

@@ -1,4 +1,4 @@
-import { DateOrTimeView } from '../views';
+import { DateOrTimeView } from '../../../models';
 export interface BaseTabsProps<TView extends DateOrTimeView> {
     /**
      * Currently visible picker view.

package/internals/models/props/toolbar.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DateOrTimeView } from '../views';
+import { DateOrTimeView } from '../../../models';
 export interface BaseToolbarProps<TValue, TView extends DateOrTimeView> extends ExportedBaseToolbarProps {
     isLandscape: boolean;
     onChange: (newValue: TValue) => void;

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

@@ -12,4 +12,5 @@ export declare const findClosestEnabledDate: <TDate>({ date, disableFuture, disa
 export declare const clamp: <TDate>(utils: MuiPickersAdapter<TDate>, value: TDate, minDate: TDate, maxDate: TDate) => TDate;
 export declare const replaceInvalidDateByNull: <TDate>(utils: MuiPickersAdapter<TDate>, value: TDate | null) => NonNullable<TDate> | null;
 export declare const applyDefaultDate: <TDate>(utils: MuiPickersAdapter<TDate>, value: TDate | null | undefined, defaultValue: TDate) => TDate;
+export declare const areDatesEqual: <TDate>(utils: MuiPickersAdapter<TDate>, a: TDate, b: TDate) => boolean;
 export {};

package/internals/utils/date-utils.js

@@ -63,4 +63,10 @@ export const applyDefaultDate = (utils, value, defaultValue) => {
     return defaultValue;
   }
   return value;
+};
+export const areDatesEqual = (utils, a, b) => {
+  if (!utils.isValid(a) && a != null && !utils.isValid(b) && b != null) {
+    return true;
+  }
+  return utils.isEqual(a, b);
 };

package/internals/utils/time-utils.d.ts

@@ -1,4 +1,5 @@
-import { DateOrTimeView, MuiPickersAdapter } from '../models';
+import { MuiPickersAdapter } from '../models';
+import { DateOrTimeView } from '../../models';
 export declare const isTimeView: (view: DateOrTimeView) => boolean;
 type Meridiem = 'am' | 'pm' | null;
 export declare const getMeridiem: <TDate>(date: TDate | null, utils: MuiPickersAdapter<TDate>) => Meridiem;

package/internals/utils/utils.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 export declare function arrayIncludes<T>(array: T[] | readonly T[], itemOrItems: T | T[]): boolean;
-export declare const onSpaceOrEnter: (innerFn: (ev: React.MouseEvent<any> | React.KeyboardEvent<any>) => void, onFocus?: ((event: React.KeyboardEvent<any>) => void) | undefined) => (event: React.KeyboardEvent) => void;
+export declare const onSpaceOrEnter: (innerFn: (ev: React.MouseEvent<any> | React.KeyboardEvent<any>) => void, externalEvent?: ((event: React.KeyboardEvent<any>) => void) | undefined) => (event: React.KeyboardEvent) => void;
 export declare const executeInTheNextEventLoopTick: (fn: () => void) => void;
 export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;
 export declare const DEFAULT_DESKTOP_MODE_MEDIA_QUERY = "@media (pointer: fine)";

package/internals/utils/utils.js

@@ -5,7 +5,7 @@ export function arrayIncludes(array, itemOrItems) {
   }
   return array.indexOf(itemOrItems) !== -1;
 }
-export const onSpaceOrEnter = (innerFn, onFocus) => event => {
+export const onSpaceOrEnter = (innerFn, externalEvent) => event => {
   if (event.key === 'Enter' || event.key === ' ') {
     innerFn(event);
 
@@ -13,8 +13,8 @@ export const onSpaceOrEnter = (innerFn, onFocus) => event => {
     event.preventDefault();
     event.stopPropagation();
   }
-  if (onFocus) {
-    onFocus(event);
+  if (externalEvent) {
+    externalEvent(event);
   }
 };
 export const executeInTheNextEventLoopTick = fn => {

package/internals/utils/validation.d.ts

@@ -4,4 +4,4 @@
  */
 export declare const extractValidationProps: <Props extends {
     [key: string]: any;
-}>(props: Props) => Pick<Props, "minDate" | "maxDate" | "disableFuture" | "disablePast" | "minTime" | "maxTime" | "shouldDisableTime" | "shouldDisableClock" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minDateTime" | "maxDateTime" | "minuteStep">;
+}>(props: Props) => Pick<Props, "disableFuture" | "disablePast" | "shouldDisableDate" | "shouldDisableMonth" | "shouldDisableYear" | "minDate" | "maxDate" | "minTime" | "maxTime" | "shouldDisableTime" | "shouldDisableClock" | "minDateTime" | "maxDateTime" | "minuteStep">;

package/internals/utils/valueManagers.d.ts

@@ -1,8 +1,6 @@
 import type { PickerValueManager } from '../hooks/usePicker';
-import type { DateValidationError } from '../hooks/validation/useDateValidation';
-import type { TimeValidationError } from '../hooks/validation/useTimeValidation';
-import type { DateTimeValidationError } from '../hooks/validation/useDateTimeValidation';
-import type { FieldSection, FieldValueManager } from '../hooks/useField';
+import { DateValidationError, TimeValidationError, DateTimeValidationError, FieldSection } from '../../models';
+import type { FieldValueManager } from '../hooks/useField';
 export type SingleItemPickerValueManager<TValue = any, TDate = any, TError extends DateValidationError | TimeValidationError | DateTimeValidationError = any> = PickerValueManager<TValue, TDate, TError>;
 export declare const singleItemValueManager: SingleItemPickerValueManager;
 export declare const singleItemFieldValueManager: FieldValueManager<any, any, FieldSection, DateValidationError | TimeValidationError | DateTimeValidationError>;

package/internals/utils/valueManagers.js

@@ -1,33 +1,32 @@
-import { replaceInvalidDateByNull } from './date-utils';
-import { addPositionPropertiesToSections, createDateStrForInputFromSections, splitFormatIntoSections, getSectionOrder } from '../hooks/useField/useField.utils';
+import { areDatesEqual, replaceInvalidDateByNull } from './date-utils';
+import { addPositionPropertiesToSections, createDateStrForInputFromSections } from '../hooks/useField/useField.utils';
 export const singleItemValueManager = {
   emptyValue: null,
   getTodayValue: utils => utils.date(),
   cleanValue: replaceInvalidDateByNull,
-  areValuesEqual: (utils, a, b) => utils.isEqual(a, b),
+  areValuesEqual: areDatesEqual,
   isSameError: (a, b) => a === b,
   defaultErrorState: null
 };
 export const singleItemFieldValueManager = {
   updateReferenceValue: (utils, value, prevReferenceValue) => value == null || !utils.isValid(value) ? prevReferenceValue : value,
-  getSectionsFromValue: (utils, localeText, prevSections, date, format) => {
+  getSectionsFromValue: (utils, date, prevSections, isRTL, getSectionsFromDate) => {
     const shouldReUsePrevDateSections = !utils.isValid(date) && !!prevSections;
     if (shouldReUsePrevDateSections) {
       return prevSections;
     }
-    return addPositionPropertiesToSections(splitFormatIntoSections(utils, localeText, format, date));
+    return addPositionPropertiesToSections(getSectionsFromDate(date), isRTL);
   },
-  getValueStrFromSections: sections => createDateStrForInputFromSections(sections),
-  getActiveDateSections: sections => sections,
+  getValueStrFromSections: createDateStrForInputFromSections,
   getActiveDateManager: (utils, state) => ({
-    activeDate: state.value,
-    referenceActiveDate: state.referenceValue,
-    getNewValueFromNewActiveDate: newActiveDate => ({
+    date: state.value,
+    referenceDate: state.referenceValue,
+    getSections: sections => sections,
+    getNewValuesFromNewActiveDate: newActiveDate => ({
       value: newActiveDate,
       referenceValue: newActiveDate == null || !utils.isValid(newActiveDate) ? state.referenceValue : newActiveDate
     })
   }),
   parseValueStr: (valueStr, referenceValue, parseDate) => parseDate(valueStr.trim(), referenceValue),
-  hasError: error => error != null,
-  getSectionOrder: (utils, localeText, format, isRTL) => getSectionOrder(splitFormatIntoSections(utils, localeText, format, null), isRTL)
+  hasError: error => error != null
 };

package/internals/utils/views.d.ts

@@ -1,4 +1,4 @@
-import { DateOrTimeView, DateView } from '../models/views';
+import { DateOrTimeView, DateView } from '../../models';
 export declare const isYearOnlyView: (views: readonly DateView[]) => views is readonly "year"[];
 export declare const isYearAndMonthViews: (views: readonly DateView[]) => views is readonly ("month" | "year")[];
 export declare const applyDefaultViewProps: <TView extends DateOrTimeView>({ openTo, defaultOpenTo, views, defaultViews, }: {

package/legacy/AdapterDateFns/index.js

@@ -150,6 +150,7 @@ export var AdapterDateFns = /*#__PURE__*/function (_BaseAdapterDateFns) {
         return token;
       }).join('');
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
     };

package/legacy/AdapterDateFnsJalali/index.js

@@ -38,6 +38,74 @@ var formatTokenMap = {
   // Day of the month
   d: 'day',
   dd: 'day',
+  do: 'day',
+  // Day of the week
+  E: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  EE: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  EEE: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  EEEE: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  EEEEE: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  i: 'weekDay',
+  ii: 'weekDay',
+  iii: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  iiii: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  e: 'weekDay',
+  ee: 'weekDay',
+  eee: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  eeee: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  eeeee: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  eeeeee: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  c: 'weekDay',
+  cc: 'weekDay',
+  ccc: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  cccc: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  ccccc: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
+  cccccc: {
+    sectionType: 'weekDay',
+    contentType: 'letter'
+  },
   // Meridiem
   a: 'meridiem',
   aa: 'meridiem',
@@ -82,6 +150,7 @@ export var AdapterDateFnsJalali = /*#__PURE__*/function (_BaseAdapterDateFnsJa)
         return token;
       }).join('');
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
     };

package/legacy/AdapterDayjs/index.js

@@ -87,6 +87,10 @@ export var AdapterDayjs = /*#__PURE__*/function (_BaseAdapterDayjs) {
       /* istanbul ignore next */
       return /A|a/.test(_this.getLocaleFormats().LT || '');
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     _this.expandFormat = function (format) {
       var localeFormats = _this.getLocaleFormats();
 
@@ -101,6 +105,7 @@ export var AdapterDayjs = /*#__PURE__*/function (_BaseAdapterDayjs) {
         return a || localeFormats[b] || t(localeFormats[B]);
       });
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
     };

package/legacy/AdapterLuxon/index.js

@@ -98,13 +98,23 @@ export var AdapterLuxon = /*#__PURE__*/function (_BaseAdapterLuxon) {
       if (!DateTime.expandFormat) {
         throw Error('Your luxon version does not support `expandFormat`. Consider upgrading it to v3.0.2');
       }
+      // Extract escaped section to avoid entending them
+      var longFormatRegexp = /''|'(''|[^'])+('|$)|[^']*/g;
+      return format.match(longFormatRegexp).map(function (token) {
+        var firstCharacter = token[0];
+        if (firstCharacter === "'") {
+          return token;
+        }
+        return DateTime.expandFormat(token, {
+          locale: _this.locale
+        });
+      }).join('')
       // The returned format can contain `yyyyy` which means year between 4 and 6 digits.
       // This value is supported by luxon parser but not luxon formatter.
       // To avoid conflicts, we replace it by 4 digits which is enough for most use-cases.
-      return DateTime.expandFormat(format, {
-        locale: _this.locale
-      }).replace('yyyyy', 'yyyy');
+      .replace('yyyyy', 'yyyy');
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/(a)/g, '(a|p)m').toLocaleLowerCase();
     };

package/legacy/AdapterMoment/index.js

@@ -78,6 +78,10 @@ export var AdapterMoment = /*#__PURE__*/function (_BaseAdapterMoment) {
       start: '[',
       end: ']'
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     _this.expandFormat = function (format) {
       // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
       var localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
@@ -92,6 +96,7 @@ export var AdapterMoment = /*#__PURE__*/function (_BaseAdapterMoment) {
     _this.getCurrentLocaleCode = function () {
       return _this.locale || defaultMoment.locale();
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
     };

package/legacy/AdapterMomentHijri/index.js

@@ -62,6 +62,10 @@ export var AdapterMomentHijri = /*#__PURE__*/function (_BaseAdapterMomentHij) {
       start: '[',
       end: ']'
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     _this.expandFormat = function (format) {
       // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
       var localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
@@ -73,6 +77,7 @@ export var AdapterMomentHijri = /*#__PURE__*/function (_BaseAdapterMomentHij) {
         return token;
       }).join('').replace('dd', 'iDD'); // Fix for https://github.com/dmtrKovalenko/date-io/pull/632
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/a/gi, '(a|p)m').replace('iY', 'Y').replace('iM', 'M').replace('iD', 'D').toLocaleLowerCase();
     };

package/legacy/AdapterMomentJalaali/index.js

@@ -59,6 +59,10 @@ export var AdapterMomentJalaali = /*#__PURE__*/function (_BaseAdapterMomentJal)
       start: '[',
       end: ']'
     };
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
     _this.expandFormat = function (format) {
       // @see https://github.com/moment/moment/blob/develop/src/lib/format/format.js#L6
       var localFormattingTokens = /(\[[^[]*\])|(\\)?(LTS|LT|LL?L?L?|l{1,4})|./g;
@@ -70,6 +74,7 @@ export var AdapterMomentJalaali = /*#__PURE__*/function (_BaseAdapterMomentJal)
         return token;
       }).join('').replace('dd', 'jDD'); // Fix for https://github.com/dmtrKovalenko/date-io/pull/632;
     };
+    // Redefined here just to show how it can be written using expandFormat
     _this.getFormatHelperText = function (format) {
       return _this.expandFormat(format).replace(/a/gi, '(a|p)m').replace('jY', 'Y').replace('jM', 'M').replace('jD', 'D').toLocaleLowerCase();
     };

package/legacy/DateField/DateField.js

@@ -263,6 +263,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/legacy/DateField/useDateField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"];
+var _excluded = ["value", "defaultValue", "format", "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/hooks/validation/useDateValidation';
@@ -37,6 +37,7 @@ export var useDateField = function useDateField(_ref) {
     disablePast = _useDefaultizedDateFi.disablePast,
     selectedSections = _useDefaultizedDateFi.selectedSections,
     onSelectedSectionsChange = _useDefaultizedDateFi.onSelectedSectionsChange,
+    unstableFieldRef = _useDefaultizedDateFi.unstableFieldRef,
     other = _objectWithoutProperties(_useDefaultizedDateFi, _excluded);
   return useField({
     inputRef: inputRef,
@@ -56,7 +57,8 @@ export var useDateField = function useDateField(_ref) {
       disableFuture: disableFuture,
       disablePast: disablePast,
       selectedSections: selectedSections,
-      onSelectedSectionsChange: onSelectedSectionsChange
+      onSelectedSectionsChange: onSelectedSectionsChange,
+      unstableFieldRef: unstableFieldRef
     },
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,

package/legacy/DateTimeField/DateTimeField.js

@@ -311,6 +311,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/legacy/DateTimeField/useDateTimeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm"];
+var _excluded = ["value", "defaultValue", "format", "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/hooks/validation/useDateTimeValidation';
@@ -51,6 +51,7 @@ export var useDateTimeField = function useDateTimeField(_ref) {
     selectedSections = _useDefaultizedDateTi.selectedSections,
     onSelectedSectionsChange = _useDefaultizedDateTi.onSelectedSectionsChange,
     ampm = _useDefaultizedDateTi.ampm,
+    unstableFieldRef = _useDefaultizedDateTi.unstableFieldRef,
     other = _objectWithoutProperties(_useDefaultizedDateTi, _excluded);
   return useField({
     inputRef: inputRef,
@@ -77,7 +78,8 @@ export var useDateTimeField = function useDateTimeField(_ref) {
       disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
       selectedSections: selectedSections,
       onSelectedSectionsChange: onSelectedSectionsChange,
-      ampm: ampm
+      ampm: ampm,
+      unstableFieldRef: unstableFieldRef
     },
     valueManager: singleItemValueManager,
     fieldValueManager: singleItemFieldValueManager,

package/legacy/PickersDay/PickersDay.js

@@ -36,16 +36,16 @@ var styleArg = function styleArg(_ref) {
     height: DAY_SIZE,
     borderRadius: '50%',
     padding: 0,
-    // background required here to prevent collides with the other days when animating with transition group
-    backgroundColor: (theme.vars || theme).palette.background.paper,
+    // explicitly setting to `transparent` to avoid potentially getting impacted by change from the overridden component
+    backgroundColor: 'transparent',
     color: (theme.vars || theme).palette.text.primary,
     '@media (pointer: fine)': {
       '&:hover': {
-        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
       }
     },
     '&:focus': _defineProperty({
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.activeChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.primary.mainChannel, " / ").concat(theme.vars.palette.action.focusOpacity, ")") : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
     }, "&.".concat(pickersDayClasses.selected), {
       willChange: 'background-color',
       backgroundColor: (theme.vars || theme).palette.primary.dark

package/legacy/TimeField/TimeField.js

@@ -274,6 +274,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.