@mui/x-date-pickers 5.0.0-beta.7 → 5.0.0

package/internals/components/PickersModalDialog.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
 import { PickersActionBarProps } from '../../PickersActionBar';
 import { PickerStateWrapperProps } from '../hooks/usePickerState';
-export interface PickersModalDialogSlotsComponent {
-    ActionBar: React.ElementType<PickersActionBarProps>;
+import { PickersSlotsComponent } from './wrappers/WrapperProps';
+export interface PickersModalDialogSlotsComponent extends Omit<PickersSlotsComponent, 'PaperContent'> {
 }
 export interface PickersModalDialogSlotsComponentsProps {
     actionBar: Omit<PickersActionBarProps, 'onAccept' | 'onClear' | 'onCancel' | 'onSetToday'>;

package/internals/components/PureDateInput.d.ts

@@ -5,6 +5,10 @@ import { InputAdornmentProps } from '@mui/material/InputAdornment';
 import { MuiPickersAdapter } from '../models';
 export declare type MuiTextFieldProps = MuiTextFieldPropsType | Omit<MuiTextFieldPropsType, 'variant'>;
 export interface DateInputSlotsComponent {
+    /**
+     * Icon displayed in the open picker button.
+     * @default Calendar or Clock
+     */
     OpenPickerIcon: React.ElementType;
 }
 export interface DateInputProps<TInputDate, TDate> {

package/internals/components/PureDateInput.js

@@ -43,7 +43,7 @@ export const PureDateInput = /*#__PURE__*/React.forwardRef(function PureDateInpu
       'aria-label': getOpenDialogAriaText(rawValue, utils),
       value: inputValue
     }, !props.readOnly && {
-      onClick: onOpen
+      onMouseDown: onOpen
     }, {
       onKeyDown: onSpaceOrEnter(onOpen)
     })

package/internals/components/wrappers/WrapperProps.d.ts

@@ -6,7 +6,15 @@ export interface DateInputPropsLike extends Omit<DateInputProps<any, any>, 'rend
     validationError?: any;
 }
 export interface PickersSlotsComponent {
+    /**
+     * The action bar placed bellow picker views.
+     * @default PickersActionBar
+     */
     ActionBar: React.ElementType<PickersActionBarProps>;
+    /**
+     * The content of the Paper wrapping views.
+     * @default React.Fragment
+     */
     PaperContent: React.ElementType<{
         children: React.ReactNode;
     }>;

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

@@ -1,3 +1,3 @@
 export { useField } from './useField';
-export type { FieldValueManager, FieldSection, UseFieldProps, UseFieldParams, UseFieldResponse, } from './useField.interfaces';
+export type { FieldValueManager, FieldSection, UseFieldInternalProps, UseFieldParams, UseFieldResponse, } from './useField.interfaces';
 export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrFromSections, } from './useField.utils';

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

@@ -1,2 +1,2 @@
-import { FieldSection, UseFieldParams, UseFieldProps, UseFieldResponse } from './useField.interfaces';
-export declare const useField: <TInputValue, TValue, TDate, TSection extends FieldSection, TProps extends UseFieldProps<any, any, any>>(params: UseFieldParams<TInputValue, TValue, TDate, TSection, TProps>) => UseFieldResponse<TProps>;
+import { FieldSection, UseFieldParams, UseFieldResponse, UseFieldForwardedProps, UseFieldInternalProps } from './useField.interfaces';
+export declare const useField: <TInputValue, TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>>(params: UseFieldParams<TInputValue, TValue, TDate, TSection, TForwardedProps, TInternalProps>) => UseFieldResponse<TForwardedProps>;

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { MuiPickersAdapter } from '../../models';
+import { MuiDateSectionName, MuiPickerFieldAdapter } from '../../models';
 import { PickerStateValueManager } from '../usePickerState';
 import { InferError, Validator } from '../validation/useValidation';
-export declare type DateSectionName = 'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'am-pm';
-export interface UseFieldParams<TInputValue, TValue, TDate, TSection extends FieldSection, TProps extends UseFieldProps<any, any, any>> {
-    props: TProps;
+export interface UseFieldParams<TInputValue, TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any>> {
+    forwardedProps: TForwardedProps;
+    internalProps: TInternalProps;
     valueManager: PickerStateValueManager<TInputValue, TValue, TDate>;
-    fieldValueManager: FieldValueManager<TValue, TDate, TSection, InferError<TProps>>;
-    validator: Validator<TDate, UseFieldValidationProps<TInputValue, TProps>>;
+    fieldValueManager: FieldValueManager<TValue, TDate, TSection, InferError<TInternalProps>>;
+    validator: Validator<TDate, UseFieldValidationProps<TInputValue, TInternalProps>>;
 }
-export interface UseFieldProps<TInputValue, TValue, TError> {
+export interface UseFieldInternalProps<TInputValue, TValue, TError> {
     value?: TInputValue;
     onChange?: (value: TValue) => void;
     onError?: (error: TError, value: TInputValue) => void;
@@ -25,31 +25,34 @@ export interface UseFieldProps<TInputValue, TValue, TError> {
      */
     readOnly?: boolean;
 }
-export interface UseFieldResponse<TProps> {
-    inputProps: Omit<TProps, keyof UseFieldProps<any, any, any>> & {
-        value: string;
-        onClick: React.MouseEventHandler<HTMLInputElement>;
-        onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
-        onFocus: () => void;
-        onBlur: () => void;
-        error: boolean;
-    };
+export interface UseFieldForwardedProps {
+    onKeyDown?: React.KeyboardEventHandler;
+    onClick?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export interface UseFieldResponse<TForwardedProps extends UseFieldForwardedProps> {
+    inputProps: UseFieldResponseInputProps<TForwardedProps>;
     inputRef: React.RefObject<HTMLInputElement>;
 }
+export declare type UseFieldResponseInputProps<TForwardedProps extends UseFieldForwardedProps> = Omit<TForwardedProps, keyof UseFieldForwardedProps> & NonNullable<UseFieldForwardedProps> & {
+    value: string;
+    error: boolean;
+};
 export interface FieldSection {
     start: number;
     end: number;
     value: string;
     emptyValue: string;
     separator: string | null;
-    dateSectionName: DateSectionName;
+    dateSectionName: MuiDateSectionName;
     formatValue: string;
     query: string | null;
 }
 export interface FieldValueManager<TValue, TDate, TSection extends FieldSection, TError> {
-    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, prevSections: TSection[] | null, value: TValue, format: string) => TSection[];
+    getSectionsFromValue: (utils: MuiPickerFieldAdapter<TDate>, prevSections: TSection[] | null, value: TValue, format: string) => TSection[];
     getValueStrFromSections: (sections: TSection[]) => string;
-    getValueFromSections: (utils: MuiPickersAdapter<TDate>, prevSections: TSection[], sections: TSection[], format: string) => {
+    getValueFromSections: (utils: MuiPickerFieldAdapter<TDate>, prevSections: TSection[], sections: TSection[], format: string) => {
         value: TValue;
         shouldPublish: boolean;
     };
@@ -58,6 +61,7 @@ export interface FieldValueManager<TValue, TDate, TSection extends FieldSection,
         update: (newActiveDate: TDate | null) => TValue;
     };
     hasError: (error: TError) => boolean;
+    isSameError: (error: TError, prevError: TError | null) => boolean;
 }
 export interface UseFieldState<TValue, TSections> {
     valueStr: string;
@@ -68,7 +72,7 @@ export interface UseFieldState<TValue, TSections> {
         end: number;
     } | null;
 }
-export declare type UseFieldValidationProps<TInputValue, TProps extends UseFieldProps<any, any, any>> = Omit<TProps, 'value' | 'defaultValue'> & {
+export declare type UseFieldValidationProps<TInputValue, TInternalProps extends UseFieldInternalProps<any, any, any>> = Omit<TInternalProps, 'value' | 'defaultValue'> & {
     value: TInputValue;
 };
 export declare type AvailableAdjustKeyCode = 'ArrowUp' | 'ArrowDown' | 'PageUp' | 'PageDown' | 'Home' | 'End';

package/internals/hooks/useField/useField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value", "defaultValue", "onChange", "onError", "format", "readOnly"];
+const _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -9,23 +9,35 @@ import { useUtils } from '../useUtils';
 import { cleanTrailingZeroInNumericSectionValue, getMonthsMatchingQuery, getSectionValueNumericBoundaries, getSectionVisibleValue, adjustDateSectionValue, adjustInvalidDateSectionValue, setSectionValue } from './useField.utils';
 export const useField = params => {
   const utils = useUtils();
+
+  if (!utils.formatTokenMap) {
+    throw new Error('This adapter is not compatible with the field components');
+  }
+
   const inputRef = React.useRef(null);
 
   const {
-    props: {
+    internalProps: {
       value: valueProp,
       defaultValue,
       onChange,
       format = utils.formats.keyboardDate,
       readOnly = false
     },
+    forwardedProps: {
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur
+    },
     valueManager,
     fieldValueManager,
     validator
   } = params,
-        otherProps = _objectWithoutPropertiesLoose(params.props, _excluded);
+        otherForwardedProps = _objectWithoutPropertiesLoose(params.forwardedProps, _excluded);
 
   const firstDefaultValue = React.useRef(defaultValue);
+  const focusTimeoutRef = React.useRef(undefined);
   const valueParsed = React.useMemo(() => {
     var _ref, _firstDefaultValue$cu;
 
@@ -69,7 +81,9 @@ export const useField = params => {
     }));
   };
 
-  const handleInputClick = useEventCallback(() => {
+  const handleInputClick = useEventCallback((...args) => {
+    onClick == null ? void 0 : onClick(...args);
+
     if (state.sections.length === 0) {
       return;
     }
@@ -82,7 +96,25 @@ export const useField = params => {
     const sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
     updateSelectedSections(sectionIndex);
   });
+  const handleInputFocus = useEventCallback((...args) => {
+    onFocus == null ? void 0 : onFocus(...args);
+    focusTimeoutRef.current = setTimeout(() => {
+      var _inputRef$current$sel2, _inputRef$current2, _inputRef$current$sel3, _inputRef$current3;
+
+      if (((_inputRef$current$sel2 = (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.selectionEnd) != null ? _inputRef$current$sel2 : 0) - ((_inputRef$current$sel3 = (_inputRef$current3 = inputRef.current) == null ? void 0 : _inputRef$current3.selectionStart) != null ? _inputRef$current$sel3 : 0) === 0) {
+        handleInputClick();
+      } else {
+        updateSelectedSections(0, state.sections.length - 1);
+      }
+    });
+  });
+  const handleInputBlur = useEventCallback((...args) => {
+    onBlur == null ? void 0 : onBlur(...args);
+    updateSelectedSections();
+  });
   const handleInputKeyDown = useEventCallback(event => {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+
     if (!inputRef.current || state.sections.length === 0) {
       return;
     } // eslint-disable-next-line default-case
@@ -235,11 +267,6 @@ export const useField = params => {
         }
     }
   });
-  const handleInputFocus = useEventCallback(() => {
-    // TODO: Avoid applying focus when focus is caused by a click
-    updateSelectedSections(0, state.sections.length - 1);
-  });
-  const handleInputBlur = useEventCallback(() => updateSelectedSections());
   useEnhancedEffect(() => {
     if (!inputRef.current || state.selectedSectionIndexes == null) {
       return;
@@ -265,22 +292,24 @@ export const useField = params => {
       }));
     }
   }, [valueParsed]); // eslint-disable-line react-hooks/exhaustive-deps
-  // TODO: Support `isSameError`.
   // TODO: Make validation work with TDate instead of TInputDate
 
-  const validationError = useValidation(_extends({}, params.props, {
+  const validationError = useValidation(_extends({}, params.internalProps, {
     value: state.valueParsed
-  }), validator, () => true);
+  }), validator, fieldValueManager.isSameError);
   const inputError = React.useMemo(() => fieldValueManager.hasError(validationError), [fieldValueManager, validationError]);
+  React.useEffect(() => {
+    return () => window.clearTimeout(focusTimeoutRef.current);
+  }, []);
   return {
-    inputProps: _extends({
+    inputProps: _extends({}, otherForwardedProps, {
       value: state.valueStr,
       onClick: handleInputClick,
-      onKeyDown: handleInputKeyDown,
       onFocus: handleInputFocus,
       onBlur: handleInputBlur,
+      onKeyDown: handleInputKeyDown,
       error: inputError
-    }, otherProps),
+    }),
     inputRef
   };
 };

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

@@ -1,15 +1,15 @@
-import { FieldSection, DateSectionName, AvailableAdjustKeyCode } from './useField.interfaces';
-import { MuiPickersAdapter } from '../../models';
-export declare const getDateSectionNameFromFormat: (format: string) => DateSectionName;
-export declare const adjustDateSectionValue: <TDate>(utils: MuiPickersAdapter<TDate>, date: TDate, datePartName: DateSectionName, keyCode: AvailableAdjustKeyCode) => TDate;
-export declare const adjustInvalidDateSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate>, section: TSection, keyCode: AvailableAdjustKeyCode) => string;
+import { FieldSection, AvailableAdjustKeyCode } from './useField.interfaces';
+import { MuiPickerFieldAdapter, MuiDateSectionName } from '../../models';
+export declare const getDateSectionNameFromFormatToken: <TDate>(utils: MuiPickerFieldAdapter<TDate>, formatToken: string) => MuiDateSectionName;
+export declare const adjustDateSectionValue: <TDate>(utils: MuiPickerFieldAdapter<TDate>, date: TDate, dateSectionName: MuiDateSectionName, keyCode: AvailableAdjustKeyCode) => TDate;
+export declare const adjustInvalidDateSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickerFieldAdapter<TDate>, section: TSection, keyCode: AvailableAdjustKeyCode) => string;
 export declare const getSectionVisibleValue: (section: Omit<FieldSection, 'start' | 'end'>) => string;
 export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: Omit<TSection, "end" | "start">[]) => TSection[];
-export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate>, format: string, date: TDate | null) => Omit<FieldSection, "end" | "start">[];
+export declare const splitFormatIntoSections: <TDate>(utils: MuiPickerFieldAdapter<TDate>, format: string, date: TDate | null) => Omit<FieldSection, "end" | "start">[];
 export declare const createDateStrFromSections: (sections: FieldSection[]) => string;
 export declare const setSectionValue: <TSection extends FieldSection>(sections: TSection[], sectionIndex: number, sectionNewValue: string, sectionNewQuery?: string | null) => TSection[];
-export declare const getMonthsMatchingQuery: <TDate>(utils: MuiPickersAdapter<TDate>, format: string, query: string) => string[];
-export declare const getSectionValueNumericBoundaries: <TDate>(utils: MuiPickersAdapter<TDate>, date: TDate, dateSectionName: DateSectionName) => {
+export declare const getMonthsMatchingQuery: <TDate>(utils: MuiPickerFieldAdapter<TDate>, format: string, query: string) => string[];
+export declare const getSectionValueNumericBoundaries: <TDate>(utils: MuiPickerFieldAdapter<TDate>, date: TDate, dateSectionName: MuiDateSectionName) => {
     minimum: number;
     maximum: number;
 };

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

@@ -1,38 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import defaultLocale from 'date-fns/locale/en-US'; // @ts-ignore
-
-import longFormatters from 'date-fns/_lib/format/longFormatters';
 // TODO: Improve and test with different calendars (move to date-io ?)
-export const getDateSectionNameFromFormat = format => {
-  if (['MMMM', 'MM'].includes(format)) {
-    return 'month';
-  }
+export const getDateSectionNameFromFormatToken = (utils, formatToken) => {
+  const dateSectionName = utils.formatTokenMap[formatToken];
 
-  if (['y', 'yy', 'yyy', 'yyyy'].includes(format)) {
-    return 'year';
+  if (dateSectionName == null) {
+    throw new Error(`getDatePartNameFromFormat doesn't understand the format ${formatToken}`);
   }
 
-  if (['dd'].includes(format)) {
-    return 'day';
-  }
-
-  if (['h', 'H', 'hh', 'HH'].includes(format)) {
-    return 'hour';
-  }
-
-  if (['mm'].includes(format)) {
-    return 'minute';
-  }
-
-  if (['ss'].includes(format)) {
-    return 'second';
-  }
-
-  if (['a', 'aa', 'aaa'].includes(format)) {
-    return 'am-pm';
-  }
-
-  throw new Error(`getDatePartNameFromFormat don't understand the format ${format}`);
+  return dateSectionName;
 };
 
 const getDeltaFromKeyCode = keyCode => {
@@ -54,12 +29,12 @@ const getDeltaFromKeyCode = keyCode => {
   }
 };
 
-export const adjustDateSectionValue = (utils, date, datePartName, keyCode) => {
+export const adjustDateSectionValue = (utils, date, dateSectionName, keyCode) => {
   const delta = getDeltaFromKeyCode(keyCode);
   const isStart = keyCode === 'Home';
   const isEnd = keyCode === 'End';
 
-  switch (datePartName) {
+  switch (dateSectionName) {
     case 'day':
       {
         if (isStart) {
@@ -295,24 +270,11 @@ const formatDateWithPlaceholder = (utils, date, format) => {
 
 export const splitFormatIntoSections = (utils, format, date) => {
   let currentTokenValue = '';
-  const sections = []; // Copy pasted from the `getFormatHelperText` in the date-fns adapter
-  // Would need to be turned into an adapter method
-
-  const longFormatRegexp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
-  const locale = utils.locale || defaultLocale;
-  const cleanFormat = format.match(longFormatRegexp).map(token => {
-    const firstCharacter = token[0];
-
-    if (firstCharacter === 'p' || firstCharacter === 'P') {
-      const longFormatter = longFormatters[firstCharacter];
-      return longFormatter(token, locale.formatLong, {});
-    }
-
-    return token;
-  }).join('');
+  const sections = [];
+  const expandedFormat = utils.expandFormat(format);
 
-  for (let i = 0; i < cleanFormat.length; i += 1) {
-    const char = cleanFormat[i];
+  for (let i = 0; i < expandedFormat.length; i += 1) {
+    const char = expandedFormat[i];
 
     if (!char.match(/([A-zÀ-ú]+)/g)) {
       if (currentTokenValue === '') {
@@ -324,7 +286,7 @@ export const splitFormatIntoSections = (utils, format, date) => {
           sections[sections.length - 1].separator += currentTokenValue;
           currentTokenValue = '';
         } else {
-          const dateSectionName = getDateSectionNameFromFormat(currentTokenValue);
+          const dateSectionName = getDateSectionNameFromFormatToken(utils, currentTokenValue);
           sections.push({
             formatValue: currentTokenValue,
             value: dateForCurrentToken,
@@ -340,13 +302,13 @@ export const splitFormatIntoSections = (utils, format, date) => {
       currentTokenValue += char;
     }
 
-    if (i === cleanFormat.length - 1) {
+    if (i === expandedFormat.length - 1) {
       const dateForCurrentToken = formatDateWithPlaceholder(utils, date, currentTokenValue);
 
       if (dateForCurrentToken === currentTokenValue) {
         sections[sections.length - 1].separator += currentTokenValue;
       } else {
-        const dateSectionName = getDateSectionNameFromFormat(currentTokenValue);
+        const dateSectionName = getDateSectionNameFromFormatToken(utils, currentTokenValue);
         sections.push({
           formatValue: currentTokenValue,
           value: dateForCurrentToken,

package/internals/hooks/validation/useDateValidation.d.ts

@@ -7,4 +7,5 @@ export interface DateValidationProps<TInputDate, TDate> extends ValidationProps<
 export declare type DateValidationError = 'invalidDate' | 'shouldDisableDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | null;
 export declare const validateDate: Validator<any, DateValidationProps<any, any>>;
 export declare const useIsDayDisabled: <TDate>({ shouldDisableDate, minDate, maxDate, disableFuture, disablePast, }: DayValidationProps<TDate> & Required<BaseDateValidationProps<TDate>>) => (day: TDate | null) => boolean;
+export declare const isSameDateError: (a: DateValidationError, b: DateValidationError) => boolean;
 export declare const useDateValidation: <TInputDate, TDate>(props: DateValidationProps<TInputDate, TDate>) => DateValidationError;

package/internals/hooks/validation/useDateValidation.js

@@ -59,7 +59,5 @@ export const useIsDayDisabled = ({
     }
   }) !== null, [adapter, shouldDisableDate, minDate, maxDate, disableFuture, disablePast]);
 };
-
-const isSameDateError = (a, b) => a === b;
-
+export const isSameDateError = (a, b) => a === b;
 export const useDateValidation = props => useValidation(props, validateDate, isSameDateError);

package/internals/index.d.ts

@@ -14,8 +14,6 @@ export type { DateInputPropsLike } from './components/wrappers/WrapperProps';
 export { WrapperVariantContext } from './components/wrappers/WrapperVariantContext';
 export type { WrapperVariant } from './components/wrappers/WrapperVariantContext';
 export { DAY_MARGIN } from './constants/dimensions';
-export { useField, createDateStrFromSections, addPositionPropertiesToSections, splitFormatIntoSections, } from './hooks/useField';
-export type { UseFieldProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldSection, } from './hooks/useField';
 export { useMaskedInput } from './hooks/useMaskedInput';
 export { usePickerState } from './hooks/usePickerState';
 export type { PickerStateProps, PickerStatePickerProps } from './hooks/usePickerState';

package/internals/index.js

@@ -7,7 +7,6 @@ export { PickersToolbar, pickersToolbarClasses } from './components/PickersToolb
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { WrapperVariantContext } from './components/wrappers/WrapperVariantContext';
 export { DAY_MARGIN } from './constants/dimensions';
-export { useField, createDateStrFromSections, addPositionPropertiesToSections, splitFormatIntoSections } from './hooks/useField';
 export { useMaskedInput } from './hooks/useMaskedInput';
 export { usePickerState } from './hooks/usePickerState';
 export { useDefaultDates, useUtils, useLocaleText } from './hooks/useUtils';

package/internals/models/muiPickersAdapter.d.ts

@@ -1,2 +1,10 @@
 import { IUtils } from '@date-io/core/IUtils';
 export declare type MuiPickersAdapter<TDate> = IUtils<TDate>;
+export declare type MuiDateSectionName = 'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'am-pm';
+export declare type MuiFormatTokenMap = {
+    [formatToken: string]: MuiDateSectionName;
+};
+export interface MuiPickerFieldAdapter<TDate> extends MuiPickersAdapter<TDate> {
+    formatTokenMap: MuiFormatTokenMap;
+    expandFormat: (format: string) => string;
+}

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

@@ -15,7 +15,6 @@ export interface BaseToolbarProps<TDate, TValue> extends ExportedCalendarPickerP
      * @returns {string} The arial label
      */
     getMobileKeyboardInputViewButtonText?: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') => string;
-    hideTabs?: boolean;
     isLandscape: boolean;
     onChange: PickerOnChangeFn<TDate>;
     openView: CalendarOrClockPickerView;

package/internals-fields/index.d.ts

@@ -0,0 +1,2 @@
+export { useField, createDateStrFromSections, addPositionPropertiesToSections, splitFormatIntoSections, } from '../internals/hooks/useField';
+export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldValueManager, FieldSection, } from '../internals/hooks/useField';

package/internals-fields/index.js

@@ -0,0 +1,3 @@
+// We don't add those exports to the regular `@mui/x-date-pickers/internals`,
+// Because they rely on date-fns, which is not used by all applications.
+export { useField, createDateStrFromSections, addPositionPropertiesToSections, splitFormatIntoSections } from '../internals/hooks/useField';

package/internals-fields/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/internals-fields/index.js",
+  "types": "./index.d.ts"
+}

package/legacy/AdapterDateFns/index.js

@@ -1 +1,76 @@
-export { default as AdapterDateFns } from '@date-io/date-fns';
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import BaseAdapterDateFns from '@date-io/date-fns';
+import defaultLocale from 'date-fns/locale/en-US'; // @ts-ignore
+
+import longFormatters from 'date-fns/_lib/format/longFormatters';
+var formatTokenMap = {
+  y: 'year',
+  yy: 'year',
+  yyy: 'year',
+  yyyy: 'year',
+  MMMM: 'month',
+  MM: 'month',
+  DD: 'day',
+  d: 'day',
+  dd: 'day',
+  H: 'hour',
+  HH: 'hour',
+  h: 'hour',
+  hh: 'hour',
+  mm: 'minute',
+  ss: 'second',
+  a: 'am-pm',
+  aa: 'am-pm',
+  aaa: 'am-pm'
+};
+export var AdapterDateFns = /*#__PURE__*/function (_BaseAdapterDateFns) {
+  _inherits(AdapterDateFns, _BaseAdapterDateFns);
+
+  var _super = _createSuper(AdapterDateFns);
+
+  function AdapterDateFns() {
+    var _this;
+
+    _classCallCheck(this, AdapterDateFns);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.formatTokenMap = formatTokenMap;
+
+    _this.expandFormat = function (format) {
+      var longFormatRegexp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g; // @see https://github.com/date-fns/date-fns/blob/master/src/format/index.js#L31
+
+      return format.match(longFormatRegexp).map(function (token) {
+        var firstCharacter = token[0];
+
+        if (firstCharacter === 'p' || firstCharacter === 'P') {
+          var longFormatter = longFormatters[firstCharacter];
+          var locale = _this.locale || defaultLocale;
+          return longFormatter(token, locale.formatLong, {});
+        }
+
+        return token;
+      }).join('');
+    };
+
+    _this.getFormatHelperText = function (format) {
+      return _this.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
+    };
+
+    return _this;
+  }
+
+  return _createClass(AdapterDateFns);
+}(BaseAdapterDateFns);

package/legacy/AdapterDayjs/index.js

@@ -1 +1,74 @@
-export { default as AdapterDayjs } from '@date-io/dayjs';
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import BaseAdapterDayjs from '@date-io/dayjs';
+var formatTokenMap = {
+  YY: 'year',
+  YYYY: 'year',
+  M: 'month',
+  MM: 'month',
+  MMM: 'month',
+  MMMM: 'month',
+  D: 'day',
+  DD: 'day',
+  H: 'hour',
+  HH: 'hour',
+  h: 'hour',
+  hh: 'hour',
+  m: 'minute',
+  mm: 'minute',
+  s: 'second',
+  ss: 'second',
+  A: 'am-pm',
+  a: 'am-pm'
+};
+export var AdapterDayjs = /*#__PURE__*/function (_BaseAdapterDayjs) {
+  _inherits(AdapterDayjs, _BaseAdapterDayjs);
+
+  var _super = _createSuper(AdapterDayjs);
+
+  function AdapterDayjs() {
+    var _this;
+
+    _classCallCheck(this, AdapterDayjs);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.formatTokenMap = formatTokenMap;
+
+    _this.expandFormat = function (format) {
+      var _this$rawDayJsInstanc;
+
+      var localeFormats = (_this$rawDayJsInstanc = _this.rawDayJsInstance.Ls[_this.locale || 'en']) == null ? void 0 : _this$rawDayJsInstanc.formats; // @see https://github.com/iamkun/dayjs/blob/dev/src/plugin/localizedFormat/index.js
+
+      var t = function t(formatBis) {
+        return formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, function (_, a, b) {
+          return a || b.slice(1);
+        });
+      };
+
+      return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, function (_, a, b) {
+        var B = b && b.toUpperCase();
+        return a || localeFormats[b] || t(localeFormats[B]);
+      });
+    };
+
+    _this.getFormatHelperText = function (format) {
+      return _this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
+    };
+
+    return _this;
+  }
+
+  return _createClass(AdapterDayjs);
+}(BaseAdapterDayjs);