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

package/legacy/YearPicker/YearPicker.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useControlled } from '@mui/material/utils';
 import clsx from 'clsx';
 import { PickersYear } from './PickersYear';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
@@ -66,7 +67,10 @@ export var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProp
       onChange = props.onChange,
       readOnly = props.readOnly,
       shouldDisableYear = props.shouldDisableYear,
-      disableHighlightToday = props.disableHighlightToday;
+      disableHighlightToday = props.disableHighlightToday,
+      onYearFocus = props.onYearFocus,
+      hasFocus = props.hasFocus,
+      onFocusedViewChange = props.onFocusedViewChange;
   var ownerState = props;
   var classes = useUtilityClasses(ownerState);
   var selectedDateOrToday = date != null ? date : now;
@@ -84,11 +88,30 @@ export var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProp
   var wrapperVariant = React.useContext(WrapperVariantContext);
   var selectedYearRef = React.useRef(null);
 
-  var _React$useState = React.useState(currentYear),
+  var _React$useState = React.useState(function () {
+    return currentYear || utils.getYear(now);
+  }),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedYear = _React$useState2[0],
       setFocusedYear = _React$useState2[1];
 
+  var _useControlled = useControlled({
+    name: 'YearPicker',
+    state: 'hasFocus',
+    controlled: hasFocus,
+    default: autoFocus
+  }),
+      _useControlled2 = _slicedToArray(_useControlled, 2),
+      internalHasFocus = _useControlled2[0],
+      setInternalHasFocus = _useControlled2[1];
+
+  var changeHasFocus = React.useCallback(function (newHasFocus) {
+    setInternalHasFocus(newHasFocus);
+
+    if (onFocusedViewChange) {
+      onFocusedViewChange(newHasFocus);
+    }
+  }, [setInternalHasFocus, onFocusedViewChange]);
   var isYearDisabled = React.useCallback(function (dateToValidate) {
     if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
       return true;
@@ -127,11 +150,17 @@ export var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProp
   var focusYear = React.useCallback(function (year) {
     if (!isYearDisabled(utils.setYear(selectedDateOrToday, year))) {
       setFocusedYear(year);
+      changeHasFocus(true);
+      onYearFocus == null ? void 0 : onYearFocus(year);
     }
-  }, [selectedDateOrToday, isYearDisabled, utils]);
+  }, [isYearDisabled, utils, selectedDateOrToday, changeHasFocus, onYearFocus]);
+  React.useEffect(function () {
+    setFocusedYear(function (prevFocusedYear) {
+      return currentYear !== null && prevFocusedYear !== currentYear ? currentYear : prevFocusedYear;
+    });
+  }, [currentYear]);
   var yearsInRow = wrapperVariant === 'desktop' ? 4 : 3;
-
-  var handleKeyDown = function handleKeyDown(event, year) {
+  var handleKeyDown = React.useCallback(function (event, year) {
     switch (event.key) {
       case 'ArrowUp':
         focusYear(year - yearsInRow);
@@ -156,8 +185,15 @@ export var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProp
       default:
         break;
     }
-  };
-
+  }, [focusYear, theme.direction, yearsInRow]);
+  var handleFocus = React.useCallback(function (event, year) {
+    focusYear(year);
+  }, [focusYear]);
+  var handleBlur = React.useCallback(function (event, year) {
+    if (focusedYear === year) {
+      changeHasFocus(false);
+    }
+  }, [focusedYear, changeHasFocus]);
   var nowYear = utils.getYear(now);
   return /*#__PURE__*/_jsx(YearPickerRoot, {
     ref: ref,
@@ -171,9 +207,12 @@ export var YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProp
         value: yearNumber,
         onClick: handleYearSelection,
         onKeyDown: handleKeyDown,
-        autoFocus: autoFocus && yearNumber === focusedYear,
+        autoFocus: internalHasFocus && yearNumber === focusedYear,
         ref: selected ? selectedYearRef : undefined,
         disabled: disabled || isYearDisabled(year),
+        tabIndex: yearNumber === focusedYear ? 0 : -1,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         "aria-current": nowYear === yearNumber ? 'date' : undefined,
         children: utils.format(year, 'year')
       }, utils.format(year, 'year'));
@@ -208,6 +247,7 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  hasFocus: PropTypes.bool,
 
   /**
    * Maximal selectable date. @DateIOType
@@ -220,6 +260,8 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
   minDate: PropTypes.any,
   onChange: PropTypes.func.isRequired,
   onFocusedDayChange: PropTypes.func,
+  onFocusedViewChange: PropTypes.func,
+  onYearFocus: PropTypes.func,
   readOnly: PropTypes.bool,
 
   /**

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-beta.7
+/** @license MUI v5.0.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/internals/components/CalendarOrClockPicker/CalendarOrClockPicker.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["autoFocus", "className", "parsedValue", "DateInputProps", "isMobileKeyboardViewOpen", "onDateChange", "onViewChange", "openTo", "orientation", "showToolbar", "toggleMobileKeyboardView", "ToolbarComponent", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
+var _excluded = ["autoFocus", "className", "parsedValue", "DateInputProps", "isMobileKeyboardViewOpen", "onDateChange", "onViewChange", "openTo", "orientation", "showToolbar", "toggleMobileKeyboardView", "ToolbarComponent", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views", "dateRangeIcon", "timeIcon", "hideTabs"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { useViews } from '../../hooks/useViews';
@@ -10,6 +10,7 @@ import { KeyboardDateInput } from '../KeyboardDateInput';
 import { useIsLandscape } from '../../hooks/useIsLandscape';
 import { WrapperVariantContext } from '../wrappers/WrapperVariantContext';
 import { PickerViewRoot } from '../PickerViewRoot';
+import { useFocusManagement } from './useFocusManagement';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MobileKeyboardInputView = styled('div')({
@@ -37,6 +38,8 @@ var isTimePickerView = function isTimePickerView(view) {
 };
 
 export function CalendarOrClockPicker(props) {
+  var _other$components, _other$componentsProp;
+
   var autoFocus = props.autoFocus,
       className = props.className,
       parsedValue = props.parsedValue,
@@ -56,11 +59,16 @@ export function CalendarOrClockPicker(props) {
       toolbarPlaceholder = props.toolbarPlaceholder,
       toolbarTitle = props.toolbarTitle,
       views = props.views,
+      dateRangeIcon = props.dateRangeIcon,
+      timeIcon = props.timeIcon,
+      hideTabs = props.hideTabs,
       other = _objectWithoutProperties(props, _excluded);
 
+  var TabsComponent = (_other$components = other.components) == null ? void 0 : _other$components.Tabs;
   var isLandscape = useIsLandscape(views, orientation);
   var wrapperVariant = React.useContext(WrapperVariantContext);
   var toShowToolbar = showToolbar != null ? showToolbar : wrapperVariant !== 'desktop';
+  var showTabs = !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
   var handleDateChange = React.useCallback(function (newDate, selectionState) {
     onDateChange(newDate, wrapperVariant, selectionState);
   }, [onDateChange, wrapperVariant]);
@@ -85,6 +93,13 @@ export function CalendarOrClockPicker(props) {
       setOpenView = _useViews.setOpenView,
       handleChangeAndOpenNext = _useViews.handleChangeAndOpenNext;
 
+  var _useFocusManagement = useFocusManagement({
+    autoFocus: autoFocus,
+    openView: openView
+  }),
+      focusedView = _useFocusManagement.focusedView,
+      setFocusedView = _useFocusManagement.setFocusedView;
+
   return /*#__PURE__*/_jsxs(PickerRoot, {
     ownerState: {
       isLandscape: isLandscape
@@ -101,7 +116,12 @@ export function CalendarOrClockPicker(props) {
       toolbarPlaceholder: toolbarPlaceholder,
       isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
       toggleMobileKeyboardView: toggleMobileKeyboardView
-    })), /*#__PURE__*/_jsx(PickerViewRoot, {
+    })), showTabs && !!TabsComponent && /*#__PURE__*/_jsx(TabsComponent, _extends({
+      dateRangeIcon: dateRangeIcon,
+      timeIcon: timeIcon,
+      view: openView,
+      onChange: setOpenView
+    }, (_other$componentsProp = other.componentsProps) == null ? void 0 : _other$componentsProp.tabs)), /*#__PURE__*/_jsx(PickerViewRoot, {
       children: isMobileKeyboardViewOpen ? /*#__PURE__*/_jsx(MobileKeyboardInputView, {
         children: /*#__PURE__*/_jsx(KeyboardDateInput, _extends({}, DateInputProps, {
           ignoreInvalidInputs: true,
@@ -116,7 +136,9 @@ export function CalendarOrClockPicker(props) {
           onChange: handleChangeAndOpenNext,
           view: openView // Unclear why the predicate `isDatePickerView` does not imply the casted type
           ,
-          views: views.filter(isDatePickerView)
+          views: views.filter(isDatePickerView),
+          focusedView: focusedView,
+          onFocusedViewChange: setFocusedView
         }, other)), isTimePickerView(openView) && /*#__PURE__*/_jsx(ClockPicker, _extends({}, other, {
           autoFocus: autoFocus,
           date: parsedValue,

package/legacy/internals/components/CalendarOrClockPicker/useFocusManagement.js

@@ -0,0 +1,27 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+export var useFocusManagement = function useFocusManagement(_ref) {
+  var autoFocus = _ref.autoFocus,
+      openView = _ref.openView;
+
+  var _React$useState = React.useState(autoFocus ? openView : null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      focusedView = _React$useState2[0],
+      setFocusedView = _React$useState2[1];
+
+  var setFocusedViewCallback = React.useCallback(function (view) {
+    return function (newHasFocus) {
+      if (newHasFocus) {
+        setFocusedView(view);
+      } else {
+        setFocusedView(function (prevFocusedView) {
+          return view === prevFocusedView ? null : prevFocusedView;
+        });
+      }
+    };
+  }, []);
+  return {
+    focusedView: focusedView,
+    setFocusedView: setFocusedViewCallback
+  };
+};

package/legacy/internals/components/PureDateInput.js

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

package/legacy/internals/hooks/useField/useField.js

@@ -1,7 +1,8 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["value", "defaultValue", "onChange", "onError", "format", "readOnly"];
+var _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -10,23 +11,33 @@ import { useUtils } from '../useUtils';
 import { cleanTrailingZeroInNumericSectionValue, getMonthsMatchingQuery, getSectionValueNumericBoundaries, getSectionVisibleValue, adjustDateSectionValue, adjustInvalidDateSectionValue, setSectionValue } from './useField.utils';
 export var useField = function useField(params) {
   var utils = useUtils();
+
+  if (!utils.formatTokenMap) {
+    throw new Error('This adapter is not compatible with the field components');
+  }
+
   var inputRef = React.useRef(null);
 
-  var _params$props = params.props,
-      valueProp = _params$props.value,
-      defaultValue = _params$props.defaultValue,
-      onChange = _params$props.onChange,
-      onError = _params$props.onError,
-      _params$props$format = _params$props.format,
-      format = _params$props$format === void 0 ? utils.formats.keyboardDate : _params$props$format,
-      _params$props$readOnl = _params$props.readOnly,
-      readOnly = _params$props$readOnl === void 0 ? false : _params$props$readOnl,
-      otherProps = _objectWithoutProperties(_params$props, _excluded),
+  var _params$internalProps = params.internalProps,
+      valueProp = _params$internalProps.value,
+      defaultValue = _params$internalProps.defaultValue,
+      onChange = _params$internalProps.onChange,
+      _params$internalProps2 = _params$internalProps.format,
+      format = _params$internalProps2 === void 0 ? utils.formats.keyboardDate : _params$internalProps2,
+      _params$internalProps3 = _params$internalProps.readOnly,
+      readOnly = _params$internalProps3 === void 0 ? false : _params$internalProps3,
+      _params$forwardedProp = params.forwardedProps,
+      onClick = _params$forwardedProp.onClick,
+      onKeyDown = _params$forwardedProp.onKeyDown,
+      onFocus = _params$forwardedProp.onFocus,
+      onBlur = _params$forwardedProp.onBlur,
+      otherForwardedProps = _objectWithoutProperties(_params$forwardedProp, _excluded),
       valueManager = params.valueManager,
       fieldValueManager = params.fieldValueManager,
       validator = params.validator;
 
   var firstDefaultValue = React.useRef(defaultValue);
+  var focusTimeoutRef = React.useRef(undefined);
   var valueParsed = React.useMemo(function () {
     var _ref, _firstDefaultValue$cu;
 
@@ -79,6 +90,12 @@ export var useField = function useField(params) {
   };
 
   var handleInputClick = useEventCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    onClick == null ? void 0 : onClick.apply(void 0, _toConsumableArray(args));
+
     if (state.sections.length === 0) {
       return;
     }
@@ -91,7 +108,33 @@ export var useField = function useField(params) {
     var sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
     updateSelectedSections(sectionIndex);
   });
+  var handleInputFocus = useEventCallback(function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    onFocus == null ? void 0 : onFocus.apply(void 0, _toConsumableArray(args));
+    focusTimeoutRef.current = setTimeout(function () {
+      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);
+      }
+    });
+  });
+  var handleInputBlur = useEventCallback(function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    onBlur == null ? void 0 : onBlur.apply(void 0, _toConsumableArray(args));
+    updateSelectedSections();
+  });
   var handleInputKeyDown = useEventCallback(function (event) {
+    onKeyDown == null ? void 0 : onKeyDown(event);
+
     if (!inputRef.current || state.sections.length === 0) {
       return;
     } // eslint-disable-next-line default-case
@@ -248,13 +291,6 @@ export var useField = function useField(params) {
         }
     }
   });
-  var handleInputFocus = useEventCallback(function () {
-    // TODO: Avoid applying focus when focus is caused by a click
-    updateSelectedSections(0, state.sections.length - 1);
-  });
-  var handleInputBlur = useEventCallback(function () {
-    return updateSelectedSections();
-  });
   useEnhancedEffect(function () {
     if (!inputRef.current || state.selectedSectionIndexes == null) {
       return;
@@ -282,26 +318,28 @@ export var useField = function useField(params) {
       });
     }
   }, [valueParsed]); // eslint-disable-line react-hooks/exhaustive-deps
-  // TODO: Support `isSameError`.
   // TODO: Make validation work with TDate instead of TInputDate
 
-  var validationError = useValidation(_extends({}, params.props, {
+  var validationError = useValidation(_extends({}, params.internalProps, {
     value: state.valueParsed
-  }), validator, function () {
-    return true;
-  });
+  }), validator, fieldValueManager.isSameError);
   var inputError = React.useMemo(function () {
     return fieldValueManager.hasError(validationError);
   }, [fieldValueManager, validationError]);
+  React.useEffect(function () {
+    return function () {
+      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: inputRef
   };
 };

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

@@ -1,39 +1,14 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 var getDateSectionNameFromFormat = function getDateSectionNameFromFormat(format) {
-  if (['MMMM', 'MM'].includes(format)) {
-    return 'month';
-  }
-
-  if (['y', 'yy', 'yyy', 'yyyy'].includes(format)) {
-    return 'year';
-  }
-
-  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';
-  }
+export var getDateSectionNameFromFormatToken = function getDateSectionNameFromFormatToken(utils, formatToken) {
+  var dateSectionName = utils.formatTokenMap[formatToken];
 
-  if (['a', 'aa', 'aaa'].includes(format)) {
-    return 'am-pm';
+  if (dateSectionName == null) {
+    throw new Error("getDatePartNameFromFormat doesn't understand the format ".concat(formatToken));
   }
 
-  throw new Error("getDatePartNameFromFormat don't understand the format ".concat(format));
+  return dateSectionName;
 };
 
 var getDeltaFromKeyCode = function getDeltaFromKeyCode(keyCode) {
@@ -55,12 +30,12 @@ var getDeltaFromKeyCode = function getDeltaFromKeyCode(keyCode) {
   }
 };
 
-export var adjustDateSectionValue = function adjustDateSectionValue(utils, date, datePartName, keyCode) {
+export var adjustDateSectionValue = function adjustDateSectionValue(utils, date, dateSectionName, keyCode) {
   var delta = getDeltaFromKeyCode(keyCode);
   var isStart = keyCode === 'Home';
   var isEnd = keyCode === 'End';
 
-  switch (datePartName) {
+  switch (dateSectionName) {
     case 'day':
       {
         if (isStart) {
@@ -299,24 +274,11 @@ var formatDateWithPlaceholder = function formatDateWithPlaceholder(utils, date,
 
 export var splitFormatIntoSections = function splitFormatIntoSections(utils, format, date) {
   var currentTokenValue = '';
-  var sections = []; // Copy pasted from the `getFormatHelperText` in the date-fns adapter
-  // Would need to be turned into an adapter method
-
-  var longFormatRegexp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
-  var locale = utils.locale || defaultLocale;
-  var cleanFormat = format.match(longFormatRegexp).map(function (token) {
-    var firstCharacter = token[0];
-
-    if (firstCharacter === 'p' || firstCharacter === 'P') {
-      var longFormatter = longFormatters[firstCharacter];
-      return longFormatter(token, locale.formatLong, {});
-    }
-
-    return token;
-  }).join('');
+  var sections = [];
+  var expandedFormat = utils.expandFormat(format);
 
-  for (var i = 0; i < cleanFormat.length; i += 1) {
-    var char = cleanFormat[i];
+  for (var i = 0; i < expandedFormat.length; i += 1) {
+    var char = expandedFormat[i];
 
     if (!char.match(/([A-zÀ-ú]+)/g)) {
       if (currentTokenValue === '') {
@@ -328,7 +290,7 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, for
           sections[sections.length - 1].separator += currentTokenValue;
           currentTokenValue = '';
         } else {
-          var dateSectionName = getDateSectionNameFromFormat(currentTokenValue);
+          var dateSectionName = getDateSectionNameFromFormatToken(utils, currentTokenValue);
           sections.push({
             formatValue: currentTokenValue,
             value: dateForCurrentToken,
@@ -344,13 +306,13 @@ export var splitFormatIntoSections = function splitFormatIntoSections(utils, for
       currentTokenValue += char;
     }
 
-    if (i === cleanFormat.length - 1) {
+    if (i === expandedFormat.length - 1) {
       var _dateForCurrentToken = formatDateWithPlaceholder(utils, date, currentTokenValue);
 
       if (_dateForCurrentToken === currentTokenValue) {
         sections[sections.length - 1].separator += currentTokenValue;
       } else {
-        var _dateSectionName = getDateSectionNameFromFormat(currentTokenValue);
+        var _dateSectionName = getDateSectionNameFromFormatToken(utils, currentTokenValue);
 
         sections.push({
           formatValue: currentTokenValue,

package/legacy/internals/hooks/validation/useDateValidation.js

@@ -59,11 +59,9 @@ export var useIsDayDisabled = function useIsDayDisabled(_ref2) {
     }) !== null;
   }, [adapter, shouldDisableDate, minDate, maxDate, disableFuture, disablePast]);
 };
-
-var isSameDateError = function isSameDateError(a, b) {
+export var isSameDateError = function isSameDateError(a, b) {
   return a === b;
 };
-
 export var useDateValidation = function useDateValidation(props) {
   return useValidation(props, validateDate, isSameDateError);
 };

package/legacy/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/legacy/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/modern/AdapterDateFns/index.js

@@ -1 +1,51 @@
-export { default as AdapterDateFns } from '@date-io/date-fns';
+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';
+const 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 class AdapterDateFns extends BaseAdapterDateFns {
+  constructor(...args) {
+    super(...args);
+    this.formatTokenMap = formatTokenMap;
+
+    this.expandFormat = format => {
+      const 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(token => {
+        const firstCharacter = token[0];
+
+        if (firstCharacter === 'p' || firstCharacter === 'P') {
+          const longFormatter = longFormatters[firstCharacter];
+          const locale = this.locale || defaultLocale;
+          return longFormatter(token, locale.formatLong, {});
+        }
+
+        return token;
+      }).join('');
+    };
+
+    this.getFormatHelperText = format => {
+      return this.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
+    };
+  }
+
+}

package/modern/AdapterDayjs/index.js

@@ -1 +1,43 @@
-export { default as AdapterDayjs } from '@date-io/dayjs';
+import BaseAdapterDayjs from '@date-io/dayjs';
+const 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 class AdapterDayjs extends BaseAdapterDayjs {
+  constructor(...args) {
+    super(...args);
+    this.formatTokenMap = formatTokenMap;
+
+    this.expandFormat = format => {
+      const localeFormats = this.rawDayJsInstance.Ls[this.locale || 'en']?.formats; // @see https://github.com/iamkun/dayjs/blob/dev/src/plugin/localizedFormat/index.js
+
+      const t = formatBis => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, a, b) => a || b.slice(1));
+
+      return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (_, a, b) => {
+        const B = b && b.toUpperCase();
+        return a || localeFormats[b] || t(localeFormats[B]);
+      });
+    };
+
+    this.getFormatHelperText = format => {
+      return this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
+    };
+  }
+
+}