@mui/x-date-pickers 6.0.0-beta.3 → 6.0.0-beta.4

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-beta.4
+
+_Feb 16, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Improve grid performance by reducing rerenders (#7857) @cherniavskii
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-beta.4` / `@mui/x-data-grid-pro@v6.0.0-beta.4` / `@mui/x-data-grid-premium@v6.0.0-beta.4`
+
+#### Changes
+
+- [DataGrid] Add interface for `singleSelect` column (#7685) @m4theushw
+- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7733) @Vivek-Prajapatii
+- [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7857) @cherniavskii
+- [DataGridPro] Change cursor when dragging a column (#7725) @sai6855
+- [DataGridPremium] Fix `leafField` to have correct focus value (#7950) @MBilalShafi
+
+### `@mui/x-date-pickers@v6.0.0-beta.4` / `@mui/x-date-pickers-pro@v6.0.0-beta.4`
+
+#### Changes
+
+- [DateRangePicker] Fix slide transition by avoiding useless component re-rendering (#7874) @LukasTy
+- [fields] Support Backspace key on `Android` (#7842) @flaviendelangle
+- [fields] Support escaped characters on `Luxon` (#7888) @flaviendelangle
+- [pickers] Prepare new pickers for custom fields (#7806) @flaviendelangle
+
+### `@mui/x-codemod@v6.0.0-beta.4`
+
+#### Changes
+
+- [codemod] Fix import path (#7952) @LukasTy
+
+### Docs
+
+- [docs] Add an info callout specifying the current state of desktop time view (#7933) @LukasTy
+- [docs] Add missing param in `useGridApiEventHandler` examples (#7939) @flaviendelangle
+- [docs] Fix markdown table alignments (#7898) @oliviertassinari
+- [docs] Improve `DataGrid` migration guide (#7861) @MBilalShafi
+- [docs] Update `LocalizationProvider` `dateAdapter` with a link to the doc (#7872) @LukasTy
+
+### Core
+
+- [core] Run editing field tests on all major adapters (#7868) @flaviendelangle
+
 ## 6.0.0-beta.3
 
 _Feb 9, 2023_
@@ -2132,6 +2179,30 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.24
+
+_Feb 16, 2023_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Hungarian (hu-HU) locale
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.24` / `@mui/x-data-grid-pro@v5.17.24` / `@mui/x-data-grid-premium@v5.17.24`
+
+#### Changes
+
+- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7897) @Vivek-Prajapatii
+- [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7945) @cherniavskii
+- [DataGridPro] Change cursor when dragging a column (#7878) @sai6855
+- [DataGridPremium] Fix `leafField` to have correct focus value (#7959) @MBilalShafi
+
+### `@mui/x-date-pickers@v5.0.19` / `@mui/x-date-pickers-pro@v5.0.19`
+
+#### Changes
+
+- [l10n] Add Hungarian (hu-HU) locale (#7796) @noherczeg
+
 ## 5.17.23
 
 _Feb 9, 2023_

package/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
-import { UseDateFieldParams } from './DateField.types';
-export declare const useDateField: <TDate, TChildProps extends {}>({ props, inputRef, }: UseDateFieldParams<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<TChildProps>;
+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>>>;

package/DateTimeField/useDateTimeField.d.ts

@@ -1,2 +1,2 @@
-import { UseDateTimeFieldParams } from './DateTimeField.types';
-export declare const useDateTimeField: <TDate, TChildProps extends {}>({ props, inputRef, }: UseDateTimeFieldParams<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<TChildProps>;
+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>>>;

package/LocalizationProvider/LocalizationProvider.d.ts

@@ -16,7 +16,10 @@ export type MuiPickersAdapterContextNullableValue<TDate> = {
 export declare const MuiPickersAdapterContext: React.Context<MuiPickersAdapterContextNullableValue<any> | null>;
 export interface LocalizationProviderProps<TDate> {
     children?: React.ReactNode;
-    /** DateIO adapter class function */
+    /**
+     * Date library adapter class function.
+     * @see See the localization provider {@link https://next.mui.com/x/react-date-pickers/getting-started/#code-setup code setup section} for more details.
+     */
     dateAdapter?: new (...args: any) => MuiPickersAdapter<TDate>;
     /** Formats that are used for any child pickers */
     dateFormats?: Partial<DateIOFormats>;

package/LocalizationProvider/LocalizationProvider.js

@@ -89,7 +89,8 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
   adapterLocale: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   children: PropTypes.node,
   /**
-   * DateIO adapter class function
+   * Date library adapter class function.
+   * @see See the localization provider {@link https://next.mui.com/x/react-date-pickers/getting-started/#code-setup code setup section} for more details.
    */
   dateAdapter: PropTypes.func,
   /**

package/TimeField/useTimeField.d.ts

@@ -1,2 +1,2 @@
-import { UseTimeFieldParams } from './TimeField.types';
-export declare const useTimeField: <TDate, TChildProps extends {}>({ props, inputRef, }: UseTimeFieldParams<TDate, TChildProps>) => import("../internals/hooks/useField").UseFieldResponse<TChildProps>;
+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>>>;

package/index.d.ts

@@ -6,6 +6,7 @@ export * from './DateField';
 export * from './TimeField';
 export * from './DateTimeField';
 export type { FieldSection, FieldSelectedSections } from './internals/hooks/useField';
+export type { BaseSingleInputFieldProps } from './internals/models/fields';
 export * from './DateCalendar';
 export * from './MonthCalendar';
 export * from './YearCalendar';

package/index.js

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

package/internals/components/PickersToolbarText.d.ts

@@ -8,4 +8,4 @@ export interface PickersToolbarTextProps extends Omit<TypographyProps, 'classes'
     selected?: boolean;
     value: React.ReactNode;
 }
-export declare const PickersToolbarText: React.ForwardRefExoticComponent<Pick<PickersToolbarTextProps, "hidden" | "color" | "left" | "right" | "bottom" | "top" | "style" | "flex" | "alignContent" | "alignItems" | "alignSelf" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "translate" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "padding" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "selected" | "value" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "sx" | "classes" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const PickersToolbarText: React.ForwardRefExoticComponent<Omit<PickersToolbarTextProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,8 +1,8 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ownerState"];
 import * as React from 'react';
-import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
+import { useSlotProps } from '@mui/base/utils';
 import MuiInputAdornment from '@mui/material/InputAdornment';
 import IconButton from '@mui/material/IconButton';
 import useForkRef from '@mui/utils/useForkRef';
@@ -27,7 +27,7 @@ export const useDesktopPicker = ({
   getOpenDialogAriaText,
   validator
 }) => {
-  var _slots$inputAdornment, _slots$openPickerButt, _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$layout;
+  var _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$inputAdornment, _slots$openPickerButt, _slots$layout;
   const {
     slots,
     slotProps: innerSlotProps,
@@ -45,6 +45,7 @@ export const useDesktopPicker = ({
   const internalInputRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const labelId = useId();
+  const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
   const {
     open,
     actions,
@@ -62,21 +63,6 @@ export const useDesktopPicker = ({
     additionalViewProps: {},
     wrapperVariant: 'desktop'
   });
-  const Field = slots.field;
-  const fieldProps = useSlotProps({
-    elementType: Field,
-    externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
-    additionalProps: _extends({}, pickerFieldProps, {
-      readOnly,
-      disabled,
-      className,
-      sx,
-      format,
-      label,
-      autoFocus: autoFocus && !props.open
-    }),
-    ownerState: props
-  });
   const InputAdornment = (_slots$inputAdornment = slots.inputAdornment) != null ? _slots$inputAdornment : MuiInputAdornment;
   const inputAdornmentProps = useSlotProps({
     elementType: InputAdornment,
@@ -100,29 +86,38 @@ export const useDesktopPicker = ({
     }),
     openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
   const OpenPickerIcon = slots.openPickerIcon;
+  const Field = slots.field;
+  const fieldProps = useSlotProps({
+    elementType: Field,
+    externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
+    additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
+      id: labelId
+    }, {
+      readOnly,
+      disabled,
+      className,
+      sx,
+      format,
+      label,
+      autoFocus: autoFocus && !props.open
+    }),
+    ownerState: props
+  });
+
+  // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
+  if (hasUIView) {
+    fieldProps.InputProps = _extends({}, fieldProps.InputProps, {
+      ref: containerRef,
+      [`${inputAdornmentProps.position}Adornment`]: /*#__PURE__*/_jsx(InputAdornment, _extends({}, inputAdornmentProps, {
+        children: /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
+          children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.openPickerIcon))
+        }))
+      }))
+    });
+  }
   const slotsForField = _extends({
     textField: slots.textField
   }, fieldProps.slots);
-  const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
-  const slotPropsForField = _extends({}, fieldProps.slotProps, {
-    textField: ownerState => {
-      var _fieldProps$slotProps;
-      const externalInputProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.textField, ownerState);
-      const inputPropsPassedByField = resolveComponentProps((_fieldProps$slotProps = fieldProps.slotProps) == null ? void 0 : _fieldProps$slotProps.textField, ownerState);
-      return _extends({}, isToolbarHidden && {
-        id: labelId
-      }, inputPropsPassedByField, externalInputProps, {
-        InputProps: _extends({
-          ref: containerRef,
-          [`${inputAdornmentProps.position}Adornment`]: hasUIView ? /*#__PURE__*/_jsx(InputAdornment, _extends({}, inputAdornmentProps, {
-            children: /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
-              children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.openPickerIcon))
-            }))
-          })) : undefined
-        }, inputPropsPassedByField == null ? void 0 : inputPropsPassedByField.InputProps, externalInputProps == null ? void 0 : externalInputProps.InputProps)
-      });
-    }
-  });
   const Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
   const handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);
   let labelledById = labelId;
@@ -147,7 +142,7 @@ export const useDesktopPicker = ({
       value: "desktop",
       children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
         slots: slotsForField,
-        slotProps: slotPropsForField,
+        slotProps: slotProps,
         inputRef: handleInputRef
       })), /*#__PURE__*/_jsx(PickersPopper, _extends({
         role: "dialog",

package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -7,7 +7,7 @@ import { DateOrTimeView, MuiPickersAdapter } from '../../models';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseSingleInputNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersPopperSlotsComponent, PickersPopperSlotsComponentsProps } from '../../components/PickersPopper';
 import { UsePickerParams, UsePickerProps } from '../usePicker';
-import { BaseFieldProps } from '../../models/fields';
+import { BaseSingleInputFieldProps } from '../../models/fields';
 import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps, PickersLayoutSlotsComponentsProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
@@ -16,7 +16,7 @@ export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeV
     /**
      * Component used to enter the date with the keyboard.
      */
-    Field: React.ElementType<BaseFieldProps<TDate | null, any>>;
+    Field: React.ElementType<BaseSingleInputFieldProps<TDate | null, any>>;
     /**
      * Form control with an input to render the value inside the default field.
      * Receives the same props as `@mui/material/TextField`.
@@ -41,7 +41,7 @@ export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeV
 export interface UseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
 export interface ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseFieldProps<TDate | null, unknown>>, {}, UsePickerProps<TDate | null, any, any, any, any>>;
+    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, unknown>>, {}, UsePickerProps<TDate | null, any, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
     inputAdornment?: Partial<InputAdornmentProps>;
     openPickerButton?: SlotComponentProps<typeof IconButton, {}, UseDesktopPickerProps<TDate, any, any, any>>;

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 = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp"];
+const _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -44,7 +44,8 @@ export const useField = params => {
         onKeyDown,
         onFocus,
         onBlur,
-        onMouseUp
+        onMouseUp,
+        onPaste
       },
       fieldValueManager,
       valueManager,
@@ -98,6 +99,7 @@ export const useField = params => {
     setSelectedSections(null);
   });
   const handleInputPaste = useEventCallback(event => {
+    onPaste == null ? void 0 : onPaste(event);
     if (readOnly) {
       event.preventDefault();
       return;
@@ -289,6 +291,17 @@ export const useField = params => {
     return () => window.clearTimeout(focusTimeoutRef.current);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // If `state.tempValueStrAndroid` is still defined when running `useEffect`,
+  // Then `onChange` has only been called once, which means the user pressed `Backspace` to reset the section.
+  // This causes a small flickering on Android,
+  // But we can't use `useEnhancedEffect` which is always called before the second `onChange` call and then would cause false positives.
+  React.useEffect(() => {
+    if (state.tempValueStrAndroid != null && selectedSectionIndexes != null) {
+      resetCharacterQuery();
+      clearActiveSection();
+    }
+  }, [state.tempValueStrAndroid]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const valueStr = React.useMemo(() => {
     var _state$tempValueStrAn;
     return (_state$tempValueStrAn = state.tempValueStrAndroid) != null ? _state$tempValueStrAn : fieldValueManager.getValueStrFromSections(state.sections);

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

@@ -67,6 +67,7 @@ export interface UseFieldInternalProps<TValue, TError> {
 export interface UseFieldForwardedProps {
     onKeyDown?: React.KeyboardEventHandler;
     onMouseUp?: React.MouseEventHandler;
+    onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
     onClick?: () => void;
     onFocus?: () => void;
     onBlur?: () => void;

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

@@ -253,8 +253,8 @@ export const getSectionVisibleValue = (section, willBeRenderedInInput) => {
   // If you press `1`, on the first section, the new value is also `1/dd/yyyy`,
   // So the browser will not fire the input `onChange`.
   // Adding the ltr mark is not a problem because it's only for digit (which are always ltr)
-  // The \u2068 and \u2069 are cleaned, but not the \u200e to notice that an update with same digit occures
-  if (willBeRenderedInInput && section.contentType === 'digit' && !section.hasTrailingZeroes) {
+  // The \u2068 and \u2069 are cleaned, but not the \u200e to notice that an update with same digit occurs
+  if (willBeRenderedInInput && section.contentType === 'digit' && !section.hasTrailingZeroes && value.length === 1) {
     return `\u2068${value}\u200e\u2069`;
   }
   if (willBeRenderedInInput) {
@@ -364,7 +364,7 @@ export const doesSectionHaveTrailingZeros = (utils, contentType, dateSectionName
   }
   return changeSectionValueFormat(utils, '1', format, format).length > 1;
 };
-const getEscapedPartsFromExpandedFormat = (utils, expandedFormat) => {
+const getEscapedPartsFromFormat = (utils, format) => {
   const escapedParts = [];
   const {
     start: startChar,
@@ -373,7 +373,7 @@ const getEscapedPartsFromExpandedFormat = (utils, expandedFormat) => {
   const regExp = new RegExp(`(\\${startChar}[^\\${endChar}]*\\${endChar})+`, 'g');
   let match = null;
   // eslint-disable-next-line no-cond-assign
-  while (match = regExp.exec(expandedFormat)) {
+  while (match = regExp.exec(format)) {
     escapedParts.push({
       start: match.index,
       end: regExp.lastIndex - 1
@@ -382,50 +382,63 @@ const getEscapedPartsFromExpandedFormat = (utils, expandedFormat) => {
   return escapedParts;
 };
 export const splitFormatIntoSections = (utils, localeText, format, date) => {
-  const expandedFormat = utils.expandFormat(format);
-  const escapedParts = getEscapedPartsFromExpandedFormat(utils, expandedFormat);
-  let currentTokenValue = '';
   let startSeparator = '';
   const sections = [];
-  const commitCurrentToken = () => {
-    if (currentTokenValue === '') {
-      return;
+  const commitToken = token => {
+    if (token === '') {
+      return null;
     }
-    const sectionConfig = getDateSectionConfigFromFormatToken(utils, currentTokenValue);
-    const sectionValue = date == null ? '' : utils.formatByString(date, currentTokenValue);
-    const hasTrailingZeroes = doesSectionHaveTrailingZeros(utils, sectionConfig.contentType, sectionConfig.dateSectionName, currentTokenValue);
+    const expandedToken = utils.expandFormat(token);
+    if (expandedToken !== token) {
+      return expandedToken;
+    }
+    const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
+    const sectionValue = date == null ? '' : utils.formatByString(date, token);
+    const hasTrailingZeroes = doesSectionHaveTrailingZeros(utils, sectionConfig.contentType, sectionConfig.dateSectionName, token);
     sections.push(_extends({}, sectionConfig, {
-      formatValue: currentTokenValue,
+      formatValue: token,
       value: sectionValue,
-      placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, currentTokenValue),
+      placeholder: getSectionPlaceholder(utils, localeText, sectionConfig, token),
       hasTrailingZeroes,
       startSeparator: sections.length === 0 ? startSeparator : '',
       endSeparator: '',
       edited: false
     }));
-    currentTokenValue = '';
+    return null;
   };
-  for (let i = 0; i < expandedFormat.length; i += 1) {
-    const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
-    const char = expandedFormat[i];
-    const isEscapedChar = escapedPartOfCurrentChar != null;
-    if (!isEscapedChar && char.match(/([A-Za-z]+)/)) {
-      currentTokenValue += char;
-    } else {
-      // If we are on the opening or closing character of an escaped part of the format,
-      // Then we ignore this character.
-      const isEscapeBoundary = isEscapedChar && (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.start) === i || (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.end) === i;
-      if (!isEscapeBoundary) {
-        commitCurrentToken();
-        if (sections.length === 0) {
-          startSeparator += char;
-        } else {
-          sections[sections.length - 1].endSeparator += char;
+  const splitFormat = token => {
+    const escapedParts = getEscapedPartsFromFormat(utils, token);
+    let currentTokenValue = '';
+    for (let i = 0; i < token.length; i += 1) {
+      const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
+      const char = token[i];
+      const isEscapedChar = escapedPartOfCurrentChar != null;
+      if (!isEscapedChar && char.match(/([A-Za-z]+)/)) {
+        currentTokenValue += char;
+      } else {
+        // If we are on the opening or closing character of an escaped part of the format,
+        // Then we ignore this character.
+        const isEscapeBoundary = isEscapedChar && (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.start) === i || (escapedPartOfCurrentChar == null ? void 0 : escapedPartOfCurrentChar.end) === i;
+        if (!isEscapeBoundary) {
+          const expandedToken = commitToken(currentTokenValue);
+          if (expandedToken != null) {
+            splitFormat(expandedToken);
+          }
+          currentTokenValue = '';
+          if (sections.length === 0) {
+            startSeparator += char;
+          } else {
+            sections[sections.length - 1].endSeparator += char;
+          }
         }
       }
     }
-  }
-  commitCurrentToken();
+    const expandedToken = commitToken(currentTokenValue);
+    if (expandedToken != null) {
+      splitFormat(expandedToken);
+    }
+  };
+  splitFormat(format);
   const cleanSections = sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;

package/internals/hooks/useField/useFieldState.js

@@ -137,7 +137,8 @@ export const useFieldState = params => {
       return publishValue(newValue, newSections);
     }
     return setState(prevState => _extends({}, prevState, {
-      sections: newSections
+      sections: newSections,
+      tempValueStrAndroid: null
     }, newValue));
   };
   const updateValueFromValueStr = valueStr => {

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
+import { useSlotProps } from '@mui/base/utils';
 import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
 import { PickersModalDialog } from '../../components/PickersModalDialog';
@@ -40,6 +40,7 @@ export const useMobilePicker = ({
   const utils = useUtils();
   const internalInputRef = React.useRef(null);
   const labelId = useId();
+  const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
   const {
     open,
     actions,
@@ -59,7 +60,12 @@ export const useMobilePicker = ({
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
-    additionalProps: _extends({}, pickerFieldProps, {
+    additionalProps: _extends({}, pickerFieldProps, isToolbarHidden && {
+      id: labelId
+    }, !(disabled || readOnly) && {
+      onClick: actions.onOpen,
+      onKeyDown: onSpaceOrEnter(actions.onOpen)
+    }, {
       readOnly: readOnly != null ? readOnly : true,
       disabled,
       className,
@@ -69,29 +75,14 @@ export const useMobilePicker = ({
     }),
     ownerState: props
   });
+
+  // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
+  fieldProps.inputProps = _extends({}, fieldProps.inputProps, {
+    'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils)
+  });
   const slotsForField = _extends({
     textField: slots.textField
   }, fieldProps.slots);
-  const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null ? void 0 : (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
-  const slotPropsForField = _extends({}, fieldProps.slotProps, {
-    textField: ownerState => {
-      var _fieldProps$slotProps;
-      const externalInputProps = resolveComponentProps(innerSlotProps == null ? void 0 : innerSlotProps.textField, ownerState);
-      const inputPropsPassedByField = resolveComponentProps((_fieldProps$slotProps = fieldProps.slotProps) == null ? void 0 : _fieldProps$slotProps.textField, ownerState);
-      return _extends({}, isToolbarHidden && {
-        id: labelId
-      }, inputPropsPassedByField, externalInputProps, {
-        disabled
-      }, !(disabled || readOnly) && {
-        onClick: actions.onOpen,
-        onKeyDown: onSpaceOrEnter(actions.onOpen)
-      }, {
-        inputProps: _extends({
-          'aria-label': getOpenDialogAriaText(pickerFieldProps.value, utils)
-        }, inputPropsPassedByField == null ? void 0 : inputPropsPassedByField.inputProps, externalInputProps == null ? void 0 : externalInputProps.inputProps)
-      });
-    }
-  });
   const Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
   const handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);
   let labelledById = labelId;
@@ -116,7 +107,7 @@ export const useMobilePicker = ({
       value: "mobile",
       children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
         slots: slotsForField,
-        slotProps: slotPropsForField,
+        slotProps: slotProps,
         inputRef: handleInputRef
       })), /*#__PURE__*/_jsx(PickersModalDialog, _extends({}, actions, {
         open: open,

package/internals/hooks/useMobilePicker/useMobilePicker.types.d.ts

@@ -5,7 +5,7 @@ import { DateOrTimeView, MuiPickersAdapter } from '../../models';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseSingleInputNonStaticPickerProps } from '../../models/props/basePickerProps';
 import { PickersModalDialogSlotsComponent, PickersModalDialogSlotsComponentsProps } from '../../components/PickersModalDialog';
 import { UsePickerParams, UsePickerProps } from '../usePicker';
-import { BaseFieldProps } from '../../models/fields';
+import { BaseSingleInputFieldProps } from '../../models/fields';
 import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps, PickersLayoutSlotsComponentsProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
@@ -14,7 +14,7 @@ export interface UseMobilePickerSlotsComponent<TDate, TView extends DateOrTimeVi
     /**
      * Component used to enter the date with the keyboard.
      */
-    Field: React.ElementType<BaseFieldProps<TDate | null, any>>;
+    Field: React.ElementType<BaseSingleInputFieldProps<TDate | null, any>>;
     /**
      * Form control with an input to render the value inside the default field.
      * Receives the same props as `@mui/material/TextField`.
@@ -23,7 +23,7 @@ export interface UseMobilePickerSlotsComponent<TDate, TView extends DateOrTimeVi
     TextField?: React.ElementType<TextFieldProps>;
 }
 export interface ExportedUseMobilePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseFieldProps<TDate | null, unknown>>, {}, UsePickerProps<TDate | null, any, any, any, any>>;
+    field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, unknown>>, {}, UsePickerProps<TDate | null, any, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
 }
 export interface UseMobilePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends ExportedUseMobilePickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {

package/internals/index.d.ts

@@ -24,7 +24,7 @@ export { WrapperVariantContext } from './components/wrappers/WrapperVariantConte
 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, FieldValueManager, FieldSection, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
+export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, UseFieldForwardedProps, FieldValueManager, FieldSection, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { usePicker } from './hooks/usePicker';
 export type { UsePickerResponse, UsePickerParams } from './hooks/usePicker';