@mui/x-date-pickers 7.0.0-alpha.4 → 7.0.0-alpha.5

package/hooks/useClearableField.js

@@ -1,24 +1,27 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ownerState"];
+const _excluded = ["clearable", "onClear", "InputProps", "sx", "slots", "slotProps"],
+  _excluded2 = ["ownerState"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
 import MuiIconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import { ClearIcon } from '../icons';
-import { useLocaleText } from '../internals';
+import { useLocaleText } from '../internals/hooks/useUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const useClearableField = ({
-  clearable,
-  fieldProps: forwardedFieldProps,
-  InputProps: ForwardedInputProps,
-  onClear,
-  slots,
-  slotProps
-}) => {
+export const useClearableField = props => {
   var _slots$clearButton, _slots$clearIcon;
   const localeText = useLocaleText();
+  const {
+      clearable,
+      onClear,
+      InputProps,
+      sx,
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const IconButton = (_slots$clearButton = slots == null ? void 0 : slots.clearButton) != null ? _slots$clearButton : MuiIconButton;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps = useSlotProps({
@@ -30,30 +33,30 @@ export const useClearableField = ({
         title: localeText.fieldClearLabel
       }
     }),
-    iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+    iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const EndClearIcon = (_slots$clearIcon = slots == null ? void 0 : slots.clearIcon) != null ? _slots$clearIcon : ClearIcon;
   const endClearIconProps = useSlotProps({
     elementType: EndClearIcon,
     externalSlotProps: slotProps == null ? void 0 : slotProps.clearIcon,
     ownerState: {}
   });
-  const InputProps = _extends({}, ForwardedInputProps, {
-    endAdornment: clearable ? /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(InputAdornment, {
-        position: "end",
-        sx: {
-          marginRight: ForwardedInputProps != null && ForwardedInputProps.endAdornment ? -1 : -1.5
-        },
-        children: /*#__PURE__*/_jsx(IconButton, _extends({}, iconButtonProps, {
-          onClick: onClear,
-          children: /*#__PURE__*/_jsx(EndClearIcon, _extends({
-            fontSize: "small"
-          }, endClearIconProps))
-        }))
-      }), ForwardedInputProps == null ? void 0 : ForwardedInputProps.endAdornment]
-    }) : ForwardedInputProps == null ? void 0 : ForwardedInputProps.endAdornment
-  });
-  const fieldProps = _extends({}, forwardedFieldProps, {
+  return _extends({}, other, {
+    InputProps: _extends({}, InputProps, {
+      endAdornment: clearable ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(InputAdornment, {
+          position: "end",
+          sx: {
+            marginRight: InputProps != null && InputProps.endAdornment ? -1 : -1.5
+          },
+          children: /*#__PURE__*/_jsx(IconButton, _extends({}, iconButtonProps, {
+            onClick: onClear,
+            children: /*#__PURE__*/_jsx(EndClearIcon, _extends({
+              fontSize: "small"
+            }, endClearIconProps))
+          }))
+        }), InputProps == null ? void 0 : InputProps.endAdornment]
+      }) : InputProps == null ? void 0 : InputProps.endAdornment
+    }),
     sx: [{
       '& .clearButton': {
         opacity: 1
@@ -68,10 +71,6 @@ export const useClearableField = ({
           }
         }
       }
-    }, ...(Array.isArray(forwardedFieldProps.sx) ? forwardedFieldProps.sx : [forwardedFieldProps.sx])]
+    }, ...(Array.isArray(sx) ? sx : [sx])]
   });
-  return {
-    InputProps,
-    fieldProps
-  };
 };

package/index.js

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

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

@@ -8,12 +8,12 @@ export interface ExportedPickersArrowSwitcherProps {
      * Overridable component slots.
      * @default {}
      */
-    slots?: PickersArrowSwitcherSlotsComponent;
+    slots?: PickersArrowSwitcherSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PickersArrowSwitcherSlotsComponentsProps;
+    slotProps?: PickersArrowSwitcherSlotProps;
     classes?: Partial<PickersArrowSwitcherClasses>;
     /**
      * Format used to display the date.
@@ -33,9 +33,9 @@ export interface PickersArrowSwitcherProps extends ExportedPickersArrowSwitcherP
     nextLabel: string;
 }
 export type PickersArrowSwitcherOwnerState = PickersArrowSwitcherProps;
-export interface PickersArrowSwitcherComponentsPropsOverrides {
+export interface PickersArrowSwitcherSlotPropsOverrides {
 }
-export interface PickersArrowSwitcherSlotsComponent {
+export interface PickersArrowSwitcherSlots {
     /**
      * Button allowing to switch to the left view.
      * @default IconButton
@@ -60,9 +60,9 @@ export interface PickersArrowSwitcherSlotsComponent {
 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>;
+export interface PickersArrowSwitcherSlotProps {
+    previousIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
+    nextIconButton?: SlotComponentProps<typeof IconButton, PickersArrowSwitcherSlotPropsOverrides, PickersArrowSwitcherButtonSlotOwnerState>;
+    leftArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, undefined>;
+    rightArrowIcon?: SlotComponentProps<typeof SvgIcon, PickersArrowSwitcherSlotPropsOverrides, undefined>;
 }

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

@@ -1,2 +1,4 @@
 export { PickersArrowSwitcher } from './PickersArrowSwitcher';
-export type { PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, ExportedPickersArrowSwitcherProps, } from './PickersArrowSwitcher.types';
+export type { PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, ExportedPickersArrowSwitcherProps, } from './PickersArrowSwitcher.types';
+export { pickersArrowSwitcherClasses, getPickersArrowSwitcherUtilityClass, } from './pickersArrowSwitcherClasses';
+export type { PickersArrowSwitcherClassKey, PickersArrowSwitcherClasses, } from './pickersArrowSwitcherClasses';

package/internals/components/PickersArrowSwitcher/index.js

@@ -1 +1,2 @@
-export { PickersArrowSwitcher } from './PickersArrowSwitcher';
+export { PickersArrowSwitcher } from './PickersArrowSwitcher';
+export { pickersArrowSwitcherClasses, getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';

package/internals/components/PickersModalDialog.d.ts

@@ -3,7 +3,7 @@ import { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
 import { PaperProps as MuiPaperProps } from '@mui/material/Paper/Paper';
 import { TransitionProps as MuiTransitionProps } from '@mui/material/transitions/transition';
 import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue.types';
-export interface PickersModalDialogSlotsComponent {
+export interface PickersModalDialogSlots {
     /**
      * Custom component for the dialog inside which the views are rendered on mobile.
      * @default PickersModalDialogRoot
@@ -20,7 +20,7 @@ export interface PickersModalDialogSlotsComponent {
      */
     mobileTransition?: React.JSXElementConstructor<MuiTransitionProps>;
 }
-export interface PickersModalDialogSlotsComponentsProps {
+export interface PickersModalDialogSlotProps {
     /**
      * Props passed down to the [`Dialog`](https://mui.com/material-ui/api/dialog/) component.
      */
@@ -39,12 +39,12 @@ export interface PickersModalDialogProps extends UsePickerValueActions {
      * Overridable component slots.
      * @default {}
      */
-    slots?: PickersModalDialogSlotsComponent;
+    slots?: PickersModalDialogSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: PickersModalDialogSlotsComponentsProps;
+    slotProps?: PickersModalDialogSlotProps;
     open: boolean;
 }
 export declare function PickersModalDialog(props: React.PropsWithChildren<PickersModalDialogProps>): React.JSX.Element;

package/internals/components/PickersPopper.d.ts

@@ -9,7 +9,7 @@ import { UsePickerValueActions } from '../hooks/usePicker/usePickerValue.types';
 interface PickersPopperOwnerState extends PickerPopperProps {
     placement: PopperPlacementType;
 }
-export interface PickersPopperSlotsComponent {
+export interface PickersPopperSlots {
     /**
      * Custom component for the paper rendered inside the desktop picker's Popper.
      * @default PickersPopperPaper
@@ -31,7 +31,7 @@ export interface PickersPopperSlotsComponent {
      */
     popper?: React.ElementType<MuiPopperProps>;
 }
-export interface PickersPopperSlotsComponentsProps {
+export interface PickersPopperSlotProps {
     /**
      * Props passed down to the desktop [Paper](https://mui.com/material-ui/api/paper/) component.
      */
@@ -57,8 +57,8 @@ export interface PickerPopperProps extends UsePickerValueActions {
     containerRef?: React.Ref<HTMLDivElement>;
     children?: React.ReactNode;
     onBlur?: () => void;
-    slots?: PickersPopperSlotsComponent;
-    slotProps?: PickersPopperSlotsComponentsProps;
+    slots?: PickersPopperSlots;
+    slotProps?: PickersPopperSlotProps;
     classes?: Partial<PickersPopperClasses>;
     shouldRestoreFocus?: () => boolean;
     reduceAnimations?: boolean;

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

@@ -1,2 +1,2 @@
 export { useDesktopPicker } from './useDesktopPicker';
-export type { UseDesktopPickerSlotsComponent, UseDesktopPickerSlotsComponentsProps, ExportedUseDesktopPickerSlotsComponentsProps, DesktopOnlyPickerProps, } from './useDesktopPicker.types';
+export type { UseDesktopPickerSlots, UseDesktopPickerSlotProps, ExportedUseDesktopPickerSlotProps, DesktopOnlyPickerProps, } from './useDesktopPicker.types';

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -37,6 +37,7 @@ export const useDesktopPicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -104,6 +105,7 @@ export const useDesktopPicker = _ref => {
       formatDensity,
       timezone,
       label,
+      name,
       autoFocus: autoFocus && !props.open,
       focused: open ? true : undefined
     }),

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

@@ -4,15 +4,15 @@ import { InputAdornmentProps } from '@mui/material/InputAdornment';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { SlotComponentProps } from '@mui/base/utils';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
-import { PickersPopperSlotsComponent, PickersPopperSlotsComponentsProps } from '../../components/PickersPopper';
+import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper';
 import { UsePickerParams, UsePickerProps } from '../usePicker';
 import { BaseSingleInputFieldProps, FieldSection, MuiPickersAdapter } from '../../../models';
-import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps, PickersLayoutSlotsComponentsProps } from '../../../PickersLayout/PickersLayout.types';
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../useField';
-export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlotsComponent, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView>, FieldSlotsComponents {
+import { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../../../hooks/useClearableField';
+export interface UseDesktopPickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<TDate | null, TDate, TView>, UseClearableFieldSlots {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -38,9 +38,9 @@ export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeV
      */
     openPickerIcon: React.ElementType;
 }
-export interface UseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {
+export interface UseDesktopPickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedUseDesktopPickerSlotProps<TDate, TView>, Pick<PickersLayoutSlotProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
-export interface ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, FieldSlotsComponentsProps {
+export interface ExportedUseDesktopPickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<TDate | null, TDate, TView>, UseClearableFieldSlotProps {
     field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, TDate, any, FieldSection, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
     inputAdornment?: Partial<InputAdornmentProps>;
@@ -58,12 +58,12 @@ export interface UseDesktopPickerProps<TDate, TView extends DateOrTimeViewWithMe
      * Overridable component slots.
      * @default {}
      */
-    slots: UseDesktopPickerSlotsComponent<TDate, TView>;
+    slots: UseDesktopPickerSlots<TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseDesktopPickerSlotsComponentsProps<TDate, TView>;
+    slotProps?: UseDesktopPickerSlotProps<TDate, TView>;
 }
 export interface UseDesktopPickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseDesktopPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;

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

@@ -1,3 +1,3 @@
 export { useField } from './useField';
-export type { FieldValueManager, UseFieldInternalProps, UseFieldForwardedProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext, FieldRef, FieldSlotsComponents, FieldSlotsComponentsProps, } from './useField.types';
+export type { FieldValueManager, UseFieldInternalProps, UseFieldForwardedProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext, FieldRef, } from './useField.types';
 export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, } from './useField.utils';

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", "onPaste", "error", "clearable", "onClear", "disabled"];
+const _excluded = ["inputRef", "onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear", "disabled"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -28,7 +28,6 @@ export const useField = params => {
     timezone
   } = useFieldState(params);
   const {
-      inputRef: inputRefProp,
       internalProps,
       internalProps: {
         readOnly = false,
@@ -36,6 +35,7 @@ export const useField = params => {
         minutesStep
       },
       forwardedProps: {
+        inputRef: inputRefProp,
         onClick,
         onKeyDown,
         onFocus,
@@ -433,7 +433,7 @@ export const useField = params => {
     onMouseUp: handleInputMouseUp,
     onClear: handleClearValue,
     error: inputError,
-    ref: handleRef,
+    inputRef: handleRef,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   });
 };

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

@@ -1,12 +1,8 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/base/utils';
-import IconButton from '@mui/material/IconButton';
-import { ClearIcon } from '../../../icons';
 import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, FieldValueType, PickersTimezone } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
 import { InferError, Validator } from '../useValidation';
 export interface UseFieldParams<TValue, TDate, TSection extends FieldSection, TForwardedProps extends UseFieldForwardedProps, TInternalProps extends UseFieldInternalProps<any, any, any, any>> {
-    inputRef?: React.Ref<HTMLInputElement>;
     forwardedProps: TForwardedProps;
     internalProps: TInternalProps;
     valueManager: PickerValueManager<TValue, TDate, InferError<TInternalProps>>;
@@ -130,6 +126,7 @@ export interface FieldRef<TSection extends FieldSection> {
     setSelectedSections: (selectedSections: FieldSelectedSections) => void;
 }
 export interface UseFieldForwardedProps {
+    inputRef?: React.Ref<HTMLInputElement>;
     onKeyDown?: React.KeyboardEventHandler;
     onMouseUp?: React.MouseEventHandler;
     onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
@@ -141,8 +138,8 @@ export interface UseFieldForwardedProps {
     clearable?: boolean;
     disabled?: boolean;
 }
-export type UseFieldResponse<TForwardedProps extends UseFieldForwardedProps> = Omit<TForwardedProps, keyof UseFieldForwardedProps> & Required<UseFieldForwardedProps> & Pick<React.HTMLAttributes<HTMLInputElement>, 'autoCorrect' | 'inputMode' | 'placeholder'> & {
-    ref: React.Ref<HTMLInputElement>;
+export type UseFieldResponse<TForwardedProps extends UseFieldForwardedProps> = Omit<TForwardedProps, keyof UseFieldForwardedProps> & Required<UseFieldForwardedProps> & Pick<React.InputHTMLAttributes<HTMLInputElement>, 'autoCorrect' | 'inputMode' | 'placeholder'> & {
+    inputRef: React.Ref<HTMLInputElement>;
     value: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
     error: boolean;
@@ -200,9 +197,8 @@ export type FieldSelectedSectionsIndexes = {
     endIndex: number;
     /**
      * If `true`, the selectors at the very beginning and very end of the input will be selected.
-     * @default false
      */
-    shouldSelectBoundarySelectors?: boolean;
+    shouldSelectBoundarySelectors: boolean;
 };
 export interface FieldValueManager<TValue, TDate, TSection extends FieldSection> {
     /**
@@ -318,20 +314,4 @@ export type SectionOrdering = {
      */
     endIndex: number;
 };
-export interface FieldSlotsComponents {
-    /**
-     * Icon to display inside the clear button.
-     * @default ClearIcon
-     */
-    clearIcon?: React.ElementType;
-    /**
-     * Button to clear the value.
-     * @default IconButton
-     */
-    clearButton?: React.ElementType;
-}
-export interface FieldSlotsComponentsProps {
-    clearIcon?: SlotComponentProps<typeof ClearIcon, {}, {}>;
-    clearButton?: SlotComponentProps<typeof IconButton, {}, {}>;
-}
 export {};

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

@@ -192,7 +192,7 @@ export const addPositionPropertiesToSections = (sections, isRTL) => {
 
     // The ...InInput values consider the unicode characters but do include them in their indexes
     const cleanedValue = cleanString(renderedValue);
-    const startInInput = positionInInput + renderedValue.indexOf(cleanedValue[0]) + section.startSeparator.length;
+    const startInInput = positionInInput + (cleanedValue === '' ? 0 : renderedValue.indexOf(cleanedValue[0])) + section.startSeparator.length;
     const endInInput = startInInput + cleanedValue.length;
     newSections.push(_extends({}, section, {
       start: position,
@@ -425,6 +425,21 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
     }
   }
   commitToken(currentTokenValue);
+  if (sections.length === 0 && startSeparator.length > 0) {
+    sections.push({
+      type: 'empty',
+      contentType: 'letter',
+      maxLength: null,
+      format: '',
+      value: '',
+      placeholder: '',
+      hasLeadingZerosInFormat: false,
+      hasLeadingZerosInInput: false,
+      startSeparator,
+      endSeparator: '',
+      modified: false
+    });
+  }
   return sections.map(section => {
     const cleanSeparator = separator => {
       let cleanedSeparator = separator;
@@ -566,6 +581,10 @@ export const getSectionsBoundaries = (utils, timezone) => {
     meridiem: () => ({
       minimum: 0,
       maximum: 0
+    }),
+    empty: () => ({
+      minimum: 0,
+      maximum: 0
     })
   };
 };
@@ -573,7 +592,7 @@ let warnedOnceInvalidSection = false;
 export const validateSections = (sections, valueType) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!warnedOnceInvalidSection) {
-      const supportedSections = [];
+      const supportedSections = ['empty'];
       if (['date', 'date-time'].includes(valueType)) {
         supportedSections.push('weekDay', 'day', 'month', 'year');
       }
@@ -582,7 +601,7 @@ export const validateSections = (sections, valueType) => {
       }
       const invalidSection = sections.find(section => !supportedSections.includes(section.type));
       if (invalidSection) {
-        console.warn(`MUI: The field component you are using is not compatible with the "${invalidSection.type} date section.`, `The supported date sections are ["${supportedSections.join('", "')}"]\`.`);
+        console.warn(`MUI: The field component you are using is not compatible with the "${invalidSection.type}" date section.`, `The supported date sections are ["${supportedSections.join('", "')}"]\`.`);
         warnedOnceInvalidSection = true;
       }
     }
@@ -649,7 +668,8 @@ const reliableSectionModificationOrder = {
   hours: 5,
   minutes: 6,
   seconds: 7,
-  meridiem: 8
+  meridiem: 8,
+  empty: 9
 };
 export const mergeDateIntoReferenceDate = (utils, timezone, dateToTransferFrom, sections, referenceDate, shouldLimitToEditedSections) =>
 // cloning sections before sort to avoid mutating it

package/internals/hooks/useField/useFieldState.js

@@ -94,17 +94,21 @@ export const useFieldState = params => {
     if (typeof selectedSections === 'number') {
       return {
         startIndex: selectedSections,
-        endIndex: selectedSections
+        endIndex: selectedSections,
+        shouldSelectBoundarySelectors: state.sections[selectedSections].type === 'empty'
       };
     }
     if (typeof selectedSections === 'string') {
       const selectedSectionIndex = state.sections.findIndex(section => section.type === selectedSections);
       return {
         startIndex: selectedSectionIndex,
-        endIndex: selectedSectionIndex
+        endIndex: selectedSectionIndex,
+        shouldSelectBoundarySelectors: state.sections[selectedSectionIndex].type === 'empty'
       };
     }
-    return selectedSections;
+    return _extends({}, selectedSections, {
+      shouldSelectBoundarySelectors: selectedSections.startIndex === selectedSections.endIndex && state.sections[selectedSections.startIndex].type === 'empty'
+    });
   }, [selectedSections, state.sections]);
   const publishValue = ({
     value,

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

@@ -1,2 +1,2 @@
 export { useMobilePicker } from './useMobilePicker';
-export type { UseMobilePickerSlotsComponent, UseMobilePickerSlotsComponentsProps, ExportedUseMobilePickerSlotsComponentsProps, MobileOnlyPickerProps, } from './useMobilePicker.types';
+export type { UseMobilePickerSlots, UseMobilePickerSlotProps, ExportedUseMobilePickerSlotProps, MobileOnlyPickerProps, } from './useMobilePicker.types';

package/internals/hooks/useMobilePicker/useMobilePicker.js

@@ -34,6 +34,7 @@ export const useMobilePicker = _ref => {
     format,
     formatDensity,
     timezone,
+    name,
     label,
     inputRef,
     readOnly,
@@ -74,7 +75,8 @@ export const useMobilePicker = _ref => {
       format,
       formatDensity,
       timezone,
-      label
+      label,
+      name
     }),
     ownerState: props
   });

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

@@ -2,14 +2,14 @@ import * as React from 'react';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { SlotComponentProps } from '@mui/base/utils';
 import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
-import { PickersModalDialogSlotsComponent, PickersModalDialogSlotsComponentsProps } from '../../components/PickersModalDialog';
+import { PickersModalDialogSlots, PickersModalDialogSlotProps } from '../../components/PickersModalDialog';
 import { UsePickerParams, UsePickerProps } from '../usePicker';
 import { BaseSingleInputFieldProps, FieldSection, MuiPickersAdapter } from '../../../models';
-import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps, PickersLayoutSlotsComponentsProps } from '../../../PickersLayout/PickersLayout.types';
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types';
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-export interface UseMobilePickerSlotsComponent<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlotsComponent, ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView> {
+export interface UseMobilePickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlots, ExportedPickersLayoutSlots<TDate | null, TDate, TView> {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -21,11 +21,11 @@ export interface UseMobilePickerSlotsComponent<TDate, TView extends DateOrTimeVi
      */
     textField?: React.ElementType<TextFieldProps>;
 }
-export interface ExportedUseMobilePickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
+export interface ExportedUseMobilePickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersModalDialogSlotProps, ExportedPickersLayoutSlotProps<TDate | null, TDate, TView> {
     field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, TDate, any, FieldSection, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
 }
-export interface UseMobilePickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedUseMobilePickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {
+export interface UseMobilePickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedUseMobilePickerSlotProps<TDate, TView>, Pick<PickersLayoutSlotProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
 export interface MobileOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, FieldSection>, UsePickerViewsNonStaticProps {
 }
@@ -34,12 +34,12 @@ export interface UseMobilePickerProps<TDate, TView extends DateOrTimeViewWithMer
      * Overridable component slots.
      * @default {}
      */
-    slots: UseMobilePickerSlotsComponent<TDate, TView>;
+    slots: UseMobilePickerSlots<TDate, TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseMobilePickerSlotsComponentsProps<TDate, TView>;
+    slotProps?: UseMobilePickerSlotProps<TDate, TView>;
 }
 export interface UseMobilePickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseMobilePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;

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

@@ -1,2 +1,2 @@
 export { useStaticPicker } from './useStaticPicker';
-export type { UseStaticPickerSlotsComponent, UseStaticPickerSlotsComponentsProps, StaticOnlyPickerProps, } from './useStaticPicker.types';
+export type { UseStaticPickerSlots, UseStaticPickerSlotProps, StaticOnlyPickerProps, } from './useStaticPicker.types';

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '../../../PickersLayout/PickersLayout.types';
+import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps } from '../../../PickersLayout/PickersLayout.types';
 import { BasePickerProps } from '../../models/props/basePickerProps';
 import { UsePickerParams } from '../usePicker';
 import { UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { FieldSection } from '../../../models';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-export interface UseStaticPickerSlotsComponent<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView> {
+export interface UseStaticPickerSlots<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlots<TDate | null, TDate, TView> {
 }
-export interface UseStaticPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
+export interface UseStaticPickerSlotProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotProps<TDate | null, TDate, TView> {
 }
 export interface StaticOnlyPickerProps {
     /**
@@ -31,12 +31,12 @@ export interface UseStaticPickerProps<TDate, TView extends DateOrTimeViewWithMer
      * Overridable component slots.
      * @default {}
      */
-    slots?: UseStaticPickerSlotsComponent<TDate | null, TView>;
+    slots?: UseStaticPickerSlots<TDate | null, TView>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseStaticPickerSlotsComponentsProps<TDate, TView>;
+    slotProps?: UseStaticPickerSlotProps<TDate, TView>;
 }
 export interface UseStaticPickerParams<TDate, TView extends DateOrTimeViewWithMeridiem, TExternalProps extends UseStaticPickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<TDate | null, TDate, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator'> {
     props: TExternalProps;