@mui/x-date-pickers 5.0.2 → 6.0.0-alpha.0

package/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.types.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/base';
+import IconButton from '@mui/material/IconButton';
+import SvgIcon from '@mui/material/SvgIcon';
+import { PickersArrowSwitcherClasses } from './pickersArrowSwitcherClasses';
+export interface ExportedPickersArrowSwitcherProps {
+    /**
+     * Overrideable components.
+     * @default {}
+     */
+    components?: Partial<PickersArrowSwitcherSlotsComponent>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    componentsProps?: Partial<PickersArrowSwitcherSlotsComponentsProps>;
+    classes?: Partial<PickersArrowSwitcherClasses>;
+}
+export interface PickersArrowSwitcherProps extends ExportedPickersArrowSwitcherProps, Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'as'> {
+    children?: React.ReactNode;
+    isPreviousDisabled: boolean;
+    isPreviousHidden?: boolean;
+    onGoToPrevious: () => void;
+    previousLabel: string;
+    isNextDisabled: boolean;
+    isNextHidden?: boolean;
+    onGoToNext: () => void;
+    nextLabel: string;
+}
+export declare type PickersArrowSwitcherOwnerState = PickersArrowSwitcherProps;
+export interface PickersArrowSwitcherComponentsPropsOverrides {
+}
+export interface PickersArrowSwitcherSlotsComponent {
+    /**
+     * Button allowing to switch to the left view.
+     * @default IconButton
+     */
+    PreviousIconButton: React.ElementType;
+    /**
+     * Button allowing to switch to the right view.
+     * @default IconButton
+     */
+    NextIconButton: React.ElementType;
+    /**
+     * Icon displayed in the left view switch button.
+     * @default ArrowLeft
+     */
+    LeftArrowIcon: React.ElementType;
+    /**
+     * Icon displayed in the right view switch button.
+     * @default ArrowRight
+     */
+    RightArrowIcon: React.ElementType;
+}
+export interface PickersArrowSwitcherButtonSlotOwnerState extends PickersArrowSwitcherOwnerState {
+    hidden?: boolean;
+}
+export interface PickersArrowSwitcherSlotsComponentsProps {
+    previousIconButton: SlotComponentProps<typeof IconButton, PickersArrowSwitcherComponentsPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
+    nextIconButton: SlotComponentProps<typeof IconButton, PickersArrowSwitcherComponentsPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
+    leftArrowIcon: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherComponentsPropsOverrides, undefined>;
+    rightArrowIcon: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherComponentsPropsOverrides, undefined>;
+}

package/internals/components/PickersArrowSwitcher/index.d.ts

@@ -0,0 +1,2 @@
+export { PickersArrowSwitcher } from './PickersArrowSwitcher';
+export type { PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, ExportedPickersArrowSwitcherProps, } from './PickersArrowSwitcher.types';

package/internals/components/PickersArrowSwitcher/index.js

@@ -0,0 +1 @@
+export { PickersArrowSwitcher } from './PickersArrowSwitcher';

package/internals/components/PickersPopper.d.ts

@@ -5,6 +5,7 @@ import { TrapFocusProps as MuiTrapFocusProps } from '@mui/material/Unstable_Trap
 import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions';
 import { PickersActionBarProps } from '../../PickersActionBar';
 import { PickersSlotsComponent } from './wrappers/WrapperProps';
+import { PickerStateWrapperProps } from '../hooks/usePickerState';
 import { PickersPopperClasses } from './pickersPopperClasses';
 export interface PickersPopperSlotsComponent extends PickersSlotsComponent {
 }
@@ -28,19 +29,14 @@ export interface ExportedPickerPopperProps {
      */
     TransitionComponent?: React.JSXElementConstructor<MuiTransitionProps>;
 }
-export interface PickerPopperProps extends ExportedPickerPopperProps, ExportedPickerPaperProps {
+export interface PickerPopperProps extends ExportedPickerPopperProps, ExportedPickerPaperProps, PickerStateWrapperProps {
     role: 'tooltip' | 'dialog';
     TrapFocusProps?: Partial<MuiTrapFocusProps>;
     anchorEl: MuiPopperProps['anchorEl'];
     open: MuiPopperProps['open'];
     containerRef?: React.Ref<HTMLDivElement>;
     children?: React.ReactNode;
-    onClose: () => void;
     onBlur?: () => void;
-    onClear: () => void;
-    onCancel: () => void;
-    onAccept: () => void;
-    onSetToday: () => void;
     components?: Partial<PickersPopperSlotsComponent>;
     componentsProps?: Partial<PickersPopperSlotsComponentsProps>;
     classes?: Partial<PickersPopperClasses>;

package/internals/components/PickersPopper.js

@@ -179,7 +179,7 @@ export function PickersPopper(inProps) {
     children,
     containerRef = null,
     onBlur,
-    onClose,
+    onDismiss,
     onClear,
     onAccept,
     onCancel,
@@ -197,7 +197,7 @@ export function PickersPopper(inProps) {
     function handleKeyDown(nativeEvent) {
       // IE11, Edge (prior to using Bink?) use 'Esc'
       if (open && (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc')) {
-        onClose();
+        onDismiss();
       }
     }
 
@@ -205,7 +205,7 @@ export function PickersPopper(inProps) {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [onClose, open]);
+  }, [onDismiss, open]);
   const lastFocusedElementRef = React.useRef(null);
   React.useEffect(() => {
     if (role === 'tooltip') {
@@ -224,7 +224,7 @@ export function PickersPopper(inProps) {
       });
     }
   }, [open, role]);
-  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur != null ? onBlur : onClose);
+  const [clickAwayRef, onPaperClick, onPaperTouchStart] = useClickAwayListener(open, onBlur != null ? onBlur : onDismiss);
   const paperRef = React.useRef(null);
   const handleRef = useForkRef(paperRef, containerRef);
   const handlePaperRef = useForkRef(handleRef, clickAwayRef);
@@ -241,7 +241,7 @@ export function PickersPopper(inProps) {
     if (event.key === 'Escape') {
       // stop the propagation to avoid closing parent modal
       event.stopPropagation();
-      onClose();
+      onDismiss();
     }
   };
 

package/internals/components/PickersToolbar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BaseToolbarProps } from '../models/props/baseToolbarProps';
 import { PickersToolbarClasses } from './pickersToolbarClasses';
-export interface PickersToolbarProps<TDate, TValue> extends Pick<BaseToolbarProps<TDate, TValue>, 'getMobileKeyboardInputViewButtonText' | 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView'> {
+export interface PickersToolbarProps<TDate, TValue> extends Pick<BaseToolbarProps<TDate, TValue>, 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView'> {
     className?: string;
     viewType?: 'calendar' | 'clock';
     isLandscape: boolean;

package/internals/components/PickersToolbar.js

@@ -74,7 +74,6 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
   const {
     children,
     className,
-    getMobileKeyboardInputViewButtonText,
     isLandscape,
     isMobileKeyboardViewOpen,
     landscapeDirection = 'column',
@@ -105,7 +104,7 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
         className: classes.penIconButton,
         ownerState: ownerState,
         color: "inherit",
-        "aria-label": getMobileKeyboardInputViewButtonText ? getMobileKeyboardInputViewButtonText(isMobileKeyboardViewOpen, viewType) : localeText.inputModeToggleButtonAriaLabel(isMobileKeyboardViewOpen, viewType),
+        "aria-label": localeText.inputModeToggleButtonAriaLabel(isMobileKeyboardViewOpen, viewType),
         children: isMobileKeyboardViewOpen ? getViewTypeIcon(viewType) : /*#__PURE__*/_jsx(Pen, {
           color: "inherit"
         })

package/internals/components/PickersToolbarText.d.ts

@@ -6,4 +6,4 @@ export interface PickersToolbarTextProps extends Omit<TypographyProps, 'classes'
     value: React.ReactNode;
     classes?: Partial<PickersToolbarTextClasses>;
 }
-export declare const PickersToolbarText: React.ForwardRefExoticComponent<Pick<PickersToolbarTextProps, "selected" | "p" | "slot" | "style" | "title" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "translate" | "className" | "classes" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "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" | "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" | "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" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping" | "value"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const PickersToolbarText: React.ForwardRefExoticComponent<Pick<PickersToolbarTextProps, "selected" | "aria-current" | "p" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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-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" | "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" | "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" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "value" | "classes" | "typography" | "sx" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { InternalDesktopWrapperProps } from './DesktopWrapper';
-export declare function DesktopTooltipWrapper(props: InternalDesktopWrapperProps): JSX.Element;
+export declare function DesktopTooltipWrapper<TDate>(props: InternalDesktopWrapperProps<TDate>): JSX.Element;

package/internals/components/wrappers/DesktopTooltipWrapper.js

@@ -4,6 +4,7 @@ import { useForkRef } from '@mui/material/utils';
 import { WrapperVariantContext } from './WrapperVariantContext';
 import { executeInTheNextEventLoopTick } from '../../utils/utils';
 import { PickersPopper } from '../PickersPopper';
+import { LocalizationProvider } from '../../../LocalizationProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function DesktopTooltipWrapper(props) {
@@ -21,7 +22,8 @@ export function DesktopTooltipWrapper(props) {
     onAccept,
     onSetToday,
     components,
-    componentsProps
+    componentsProps,
+    localeText
   } = props;
   const inputContainerRef = React.useRef(null);
   const popperRef = React.useRef(null);
@@ -39,28 +41,31 @@ export function DesktopTooltipWrapper(props) {
   };
 
   const inputComponentRef = useForkRef(DateInputProps.ref, inputContainerRef);
-  return /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {
-    value: "desktop",
-    children: [/*#__PURE__*/_jsx(KeyboardDateInputComponent, _extends({}, DateInputProps, {
-      ref: inputComponentRef,
-      onBlur: handleBlur
-    })), /*#__PURE__*/_jsx(PickersPopper, {
-      role: "tooltip",
-      open: open,
-      containerRef: popperRef,
-      anchorEl: inputContainerRef.current,
-      TransitionComponent: TransitionComponent,
-      PopperProps: PopperProps,
-      PaperProps: PaperProps,
-      onBlur: handleBlur,
-      onClose: onDismiss,
-      onClear: onClear,
-      onCancel: onCancel,
-      onAccept: onAccept,
-      onSetToday: onSetToday,
-      components: components,
-      componentsProps: componentsProps,
-      children: children
-    })]
+  return /*#__PURE__*/_jsx(LocalizationProvider, {
+    localeText: localeText,
+    children: /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {
+      value: "desktop",
+      children: [/*#__PURE__*/_jsx(KeyboardDateInputComponent, _extends({}, DateInputProps, {
+        ref: inputComponentRef,
+        onBlur: handleBlur
+      })), /*#__PURE__*/_jsx(PickersPopper, {
+        role: "tooltip",
+        open: open,
+        containerRef: popperRef,
+        anchorEl: inputContainerRef.current,
+        TransitionComponent: TransitionComponent,
+        PopperProps: PopperProps,
+        PaperProps: PaperProps,
+        onBlur: handleBlur,
+        onDismiss: onDismiss,
+        onClear: onClear,
+        onCancel: onCancel,
+        onAccept: onAccept,
+        onSetToday: onSetToday,
+        components: components,
+        componentsProps: componentsProps,
+        children: children
+      })]
+    })
   });
 }

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

@@ -3,14 +3,19 @@ import { ExportedPickerPopperProps, ExportedPickerPaperProps, PickersPopperSlots
 import { DateInputPropsLike } from './WrapperProps';
 import { PickerStateWrapperProps } from '../../hooks/usePickerState';
 import { DateInputSlotsComponent } from '../PureDateInput';
-export interface DesktopWrapperProps extends ExportedPickerPopperProps, ExportedPickerPaperProps {
+import { PickersInputLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
+export interface DesktopWrapperProps<TDate> extends ExportedPickerPopperProps, ExportedPickerPaperProps {
     children?: React.ReactNode;
+    /**
+     * Locale for components texts
+     */
+    localeText?: PickersInputLocaleText<TDate>;
 }
 export interface DesktopWrapperSlotsComponent extends PickersPopperSlotsComponent, DateInputSlotsComponent {
 }
 export interface DesktopWrapperSlotsComponentsProps extends PickersPopperSlotsComponentsProps {
 }
-export interface InternalDesktopWrapperProps extends DesktopWrapperProps, PickerStateWrapperProps {
+export interface InternalDesktopWrapperProps<TDate> extends DesktopWrapperProps<TDate>, PickerStateWrapperProps {
     DateInputProps: DateInputPropsLike & {
         ref?: React.Ref<HTMLDivElement>;
     };
@@ -28,4 +33,4 @@ export interface InternalDesktopWrapperProps extends DesktopWrapperProps, Picker
      */
     componentsProps?: Partial<DesktopWrapperSlotsComponentsProps>;
 }
-export declare function DesktopWrapper(props: InternalDesktopWrapperProps): JSX.Element;
+export declare function DesktopWrapper<TDate>(props: InternalDesktopWrapperProps<TDate>): JSX.Element;

package/internals/components/wrappers/DesktopWrapper.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useForkRef } from '@mui/material/utils';
 import { WrapperVariantContext } from './WrapperVariantContext';
 import { PickersPopper } from '../PickersPopper';
+import { LocalizationProvider } from '../../../LocalizationProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function DesktopWrapper(props) {
@@ -20,29 +21,33 @@ export function DesktopWrapper(props) {
     PaperProps,
     TransitionComponent,
     components,
-    componentsProps
+    componentsProps,
+    localeText
   } = props;
   const ownInputRef = React.useRef(null);
   const inputRef = useForkRef(DateInputProps.inputRef, ownInputRef);
-  return /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {
-    value: "desktop",
-    children: [/*#__PURE__*/_jsx(KeyboardDateInputComponent, _extends({}, DateInputProps, {
-      inputRef: inputRef
-    })), /*#__PURE__*/_jsx(PickersPopper, {
-      role: "dialog",
-      open: open,
-      anchorEl: ownInputRef.current,
-      TransitionComponent: TransitionComponent,
-      PopperProps: PopperProps,
-      PaperProps: PaperProps,
-      onClose: onDismiss,
-      onCancel: onCancel,
-      onClear: onClear,
-      onAccept: onAccept,
-      onSetToday: onSetToday,
-      components: components,
-      componentsProps: componentsProps,
-      children: children
-    })]
+  return /*#__PURE__*/_jsx(LocalizationProvider, {
+    localeText: localeText,
+    children: /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {
+      value: "desktop",
+      children: [/*#__PURE__*/_jsx(KeyboardDateInputComponent, _extends({}, DateInputProps, {
+        inputRef: inputRef
+      })), /*#__PURE__*/_jsx(PickersPopper, {
+        role: "dialog",
+        open: open,
+        anchorEl: ownInputRef.current,
+        TransitionComponent: TransitionComponent,
+        PopperProps: PopperProps,
+        PaperProps: PaperProps,
+        onDismiss: onDismiss,
+        onCancel: onCancel,
+        onClear: onClear,
+        onAccept: onAccept,
+        onSetToday: onSetToday,
+        components: components,
+        componentsProps: componentsProps,
+        children: children
+      })]
+    })
   });
 }

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

@@ -3,14 +3,19 @@ import { ExportedPickerModalProps, PickersModalDialogSlotsComponent, PickersModa
 import { DateInputPropsLike } from './WrapperProps';
 import { PickerStateWrapperProps } from '../../hooks/usePickerState';
 import { DateInputSlotsComponent } from '../PureDateInput';
-export interface MobileWrapperProps extends ExportedPickerModalProps {
+import { PickersInputLocaleText } from '../../../locales/utils/pickersLocaleTextApi';
+export interface MobileWrapperProps<TDate> extends ExportedPickerModalProps {
     children?: React.ReactNode;
+    /**
+     * Locale for components texts
+     */
+    localeText?: PickersInputLocaleText<TDate>;
 }
 export interface MobileWrapperSlotsComponent extends PickersModalDialogSlotsComponent, DateInputSlotsComponent {
 }
 export interface MobileWrapperSlotsComponentsProps extends PickersModalDialogSlotsComponentsProps {
 }
-export interface InternalMobileWrapperProps extends MobileWrapperProps, PickerStateWrapperProps {
+export interface InternalMobileWrapperProps<TDate> extends MobileWrapperProps<TDate>, PickerStateWrapperProps {
     DateInputProps: DateInputPropsLike & {
         ref?: React.Ref<HTMLDivElement>;
     };
@@ -18,4 +23,4 @@ export interface InternalMobileWrapperProps extends MobileWrapperProps, PickerSt
     components?: Partial<MobileWrapperSlotsComponent>;
     componentsProps?: Partial<MobileWrapperSlotsComponentsProps>;
 }
-export declare function MobileWrapper(props: InternalMobileWrapperProps): JSX.Element;
+export declare function MobileWrapper<TDate>(props: InternalMobileWrapperProps<TDate>): JSX.Element;

package/internals/components/wrappers/MobileWrapper.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "DateInputProps", "DialogProps", "onAccept", "onClear", "onDismiss", "onCancel", "onSetToday", "open", "PureDateInputComponent", "components", "componentsProps"];
+const _excluded = ["children", "DateInputProps", "DialogProps", "onAccept", "onClear", "onDismiss", "onCancel", "onSetToday", "open", "PureDateInputComponent", "components", "componentsProps", "localeText"];
 import * as React from 'react';
 import { WrapperVariantContext } from './WrapperVariantContext';
 import { PickersModalDialog } from '../PickersModalDialog';
+import { LocalizationProvider } from '../../../LocalizationProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function MobileWrapper(props) {
@@ -19,25 +20,29 @@ export function MobileWrapper(props) {
     open,
     PureDateInputComponent,
     components,
-    componentsProps
+    componentsProps,
+    localeText
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  return /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {
-    value: "mobile",
-    children: [/*#__PURE__*/_jsx(PureDateInputComponent, _extends({
-      components: components
-    }, other, DateInputProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
-      DialogProps: DialogProps,
-      onAccept: onAccept,
-      onClear: onClear,
-      onDismiss: onDismiss,
-      onCancel: onCancel,
-      onSetToday: onSetToday,
-      open: open,
-      components: components,
-      componentsProps: componentsProps,
-      children: children
-    })]
+  return /*#__PURE__*/_jsx(LocalizationProvider, {
+    localeText: localeText,
+    children: /*#__PURE__*/_jsxs(WrapperVariantContext.Provider, {
+      value: "mobile",
+      children: [/*#__PURE__*/_jsx(PureDateInputComponent, _extends({
+        components: components
+      }, other, DateInputProps)), /*#__PURE__*/_jsx(PickersModalDialog, {
+        DialogProps: DialogProps,
+        onAccept: onAccept,
+        onClear: onClear,
+        onDismiss: onDismiss,
+        onCancel: onCancel,
+        onSetToday: onSetToday,
+        open: open,
+        components: components,
+        componentsProps: componentsProps,
+        children: children
+      })]
+    })
   });
 }

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

@@ -64,7 +64,6 @@ export interface FieldValueManager<TValue, TDate, TSection extends FieldSection,
     isSameError: (error: TError, prevError: TError | null) => boolean;
 }
 export interface UseFieldState<TValue, TSections> {
-    valueStr: string;
     valueParsed: TValue;
     sections: TSections;
     selectedSectionIndexes: {

package/internals/hooks/useField/useField.js

@@ -50,7 +50,6 @@ export const useField = params => {
     return {
       sections,
       valueParsed,
-      valueStr: fieldValueManager.getValueStrFromSections(sections),
       selectedSectionIndexes: null
     };
   });
@@ -62,7 +61,6 @@ export const useField = params => {
     } = fieldValueManager.getValueFromSections(utils, state.sections, sections, format);
     setState(prevState => _extends({}, prevState, {
       sections,
-      valueStr: fieldValueManager.getValueStrFromSections(sections),
       valueParsed: newValueParsed
     }));
 
@@ -83,28 +81,29 @@ export const useField = params => {
 
   const handleInputClick = useEventCallback((...args) => {
     onClick == null ? void 0 : onClick(...args);
-
-    if (state.sections.length === 0) {
-      return;
-    }
-
     const nextSectionIndex = state.sections.findIndex(section => {
-      var _inputRef$current$sel, _inputRef$current;
+      var _selectionStart;
 
-      return section.start > ((_inputRef$current$sel = (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.selectionStart) != null ? _inputRef$current$sel : 0);
+      return section.start > ((_selectionStart = inputRef.current.selectionStart) != null ? _selectionStart : 0);
     });
     const sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
     updateSelectedSections(sectionIndex);
   });
   const handleInputFocus = useEventCallback((...args) => {
-    onFocus == null ? void 0 : onFocus(...args);
+    onFocus == null ? void 0 : onFocus(...args); // The ref is guaranteed to be resolved that this point.
+
+    const input = inputRef.current;
+    clearTimeout(focusTimeoutRef.current);
     focusTimeoutRef.current = setTimeout(() => {
-      var _inputRef$current$sel2, _inputRef$current2, _inputRef$current$sel3, _inputRef$current3;
+      // The ref changed, the component got remounted, the focus event is no longer relevant.
+      if (input !== inputRef.current) {
+        return;
+      }
 
-      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 {
+      if (Number(input.selectionEnd) - Number(input.selectionStart) === input.value.length) {
         updateSelectedSections(0, state.sections.length - 1);
+      } else {
+        handleInputClick();
       }
     });
   });
@@ -113,17 +112,14 @@ export const useField = params => {
     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
-
+    onKeyDown == null ? void 0 : onKeyDown(event); // eslint-disable-next-line default-case
 
     switch (true) {
       // Select all
       case event.key === 'a' && (event.ctrlKey || event.metaKey):
         {
+          // prevent default to make sure that the next line "select all" while updating
+          // the internal state at the same time.
           event.preventDefault();
           updateSelectedSections(0, state.sections.length - 1);
           return;
@@ -268,7 +264,7 @@ export const useField = params => {
     }
   });
   useEnhancedEffect(() => {
-    if (!inputRef.current || state.selectedSectionIndexes == null) {
+    if (state.selectedSectionIndexes == null) {
       return;
     }
 
@@ -287,7 +283,6 @@ export const useField = params => {
       const sections = fieldValueManager.getSectionsFromValue(utils, state.sections, valueParsed, format);
       setState(prevState => _extends({}, prevState, {
         valueParsed,
-        valueStr: fieldValueManager.getValueStrFromSections(sections),
         sections
       }));
     }
@@ -301,9 +296,10 @@ export const useField = params => {
   React.useEffect(() => {
     return () => window.clearTimeout(focusTimeoutRef.current);
   }, []);
+  const valueStr = React.useMemo(() => fieldValueManager.getValueStrFromSections(state.sections), [state.sections, fieldValueManager]);
   return {
     inputProps: _extends({}, otherForwardedProps, {
-      value: state.valueStr,
+      value: valueStr,
       onClick: handleInputClick,
       onFocus: handleInputFocus,
       onBlur: handleInputBlur,