@mui/x-date-pickers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/internals/components/PickersToolbar.js

@@ -1,17 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
+const _excluded = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "classes", "landscapeDirection"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
+import { useToolbarOwnerState } from "../hooks/useToolbarOwnerState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     content: ['content']
@@ -32,7 +31,7 @@ const PickersToolbarRoot = styled('div', {
   padding: theme.spacing(2, 3),
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       height: 'auto',
@@ -46,7 +45,8 @@ const PickersToolbarRoot = styled('div', {
 const PickersToolbarContent = styled('div', {
   name: 'MuiPickersToolbar',
   slot: 'Content',
-  overridesResolver: (props, styles) => styles.content
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'landscapeDirection'
 })({
   display: 'flex',
   flexWrap: 'wrap',
@@ -57,7 +57,7 @@ const PickersToolbarContent = styled('div', {
   flexDirection: 'row',
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       justifyContent: 'flex-start',
@@ -66,7 +66,7 @@ const PickersToolbarContent = styled('div', {
     }
   }, {
     props: {
-      isLandscape: true,
+      pickerOrientation: 'landscape',
       landscapeDirection: 'row'
     },
     style: {
@@ -82,13 +82,15 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
   const {
       children,
       className,
+      classes: classesProp,
       toolbarTitle,
       hidden,
-      titleId
+      titleId,
+      landscapeDirection
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = useToolbarOwnerState();
+  const classes = useUtilityClasses(classesProp);
   if (hidden) {
     return null;
   }
@@ -105,6 +107,7 @@ export const PickersToolbar = /*#__PURE__*/React.forwardRef(function PickersTool
     }), /*#__PURE__*/_jsx(PickersToolbarContent, {
       className: classes.content,
       ownerState: ownerState,
+      landscapeDirection: landscapeDirection,
       children: children
     })]
   }));

package/internals/components/PickersToolbarButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant", "width"];
+const _excluded = ["align", "className", "classes", "selected", "typographyClassName", "value", "variant", "width"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Button from '@mui/material/Button';
@@ -9,10 +9,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { PickersToolbarText } from "./PickersToolbarText.js";
 import { getPickersToolbarUtilityClass } from "./pickersToolbarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -35,6 +32,7 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
   const {
       align,
       className,
+      classes: classesProp,
       selected,
       typographyClassName,
       value,
@@ -42,7 +40,7 @@ export const PickersToolbarButton = /*#__PURE__*/React.forwardRef(function Picke
       width
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(PickersToolbarButtonRoot, _extends({
     variant: "text",
     ref: ref,

package/internals/components/PickersToolbarText.js

@@ -1,35 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "selected", "value"];
+const _excluded = ["className", "classes", "selected", "value"];
 import * as React from 'react';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getPickersToolbarTextUtilityClass, pickersToolbarTextClasses } from "./pickersToolbarTextClasses.js";
+import { getPickersToolbarTextUtilityClass } from "./pickersToolbarTextClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
-    root: ['root', selected && 'selected']
+    root: ['root']
   };
   return composeClasses(slots, getPickersToolbarTextUtilityClass, classes);
 };
 const PickersToolbarTextRoot = styled(Typography, {
   name: 'MuiPickersToolbarText',
   slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root, {
-    [`&.${pickersToolbarTextClasses.selected}`]: styles.selected
-  }]
+  overridesResolver: (_, styles) => [styles.root]
 })(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${pickersToolbarTextClasses.selected}`]: {
+  [`&[data-selected]`]: {
     color: (theme.vars || theme).palette.text.primary
   }
 }));
@@ -40,14 +34,18 @@ export const PickersToolbarText = /*#__PURE__*/React.forwardRef(function Pickers
   });
   const {
       className,
+      classes: classesProp,
+      selected,
       value
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/_jsx(PickersToolbarTextRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
     component: "span"
+  }, selected && {
+    'data-selected': true
   }, other, {
     children: value
   }));

package/internals/hooks/date-helpers-hooks.js

@@ -27,11 +27,12 @@ export function usePreviousMonthDisabled(month, {
 }
 export function useMeridiemMode(date, ampm, onChange, selectionState) {
   const utils = useUtils();
-  const meridiemMode = getMeridiem(date, utils);
+  const cleanDate = React.useMemo(() => !utils.isValid(date) ? null : date, [utils, date]);
+  const meridiemMode = getMeridiem(cleanDate, utils);
   const handleMeridiemChange = React.useCallback(mode => {
-    const timeWithMeridiem = date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils);
+    const timeWithMeridiem = cleanDate == null ? null : convertToMeridiem(cleanDate, mode, Boolean(ampm), utils);
     onChange(timeWithMeridiem, selectionState ?? 'partial');
-  }, [ampm, date, onChange, selectionState, utils]);
+  }, [ampm, cleanDate, onChange, selectionState, utils]);
   return {
     meridiemMode,
     handleMeridiemChange

package/internals/hooks/useClockReferenceDate.d.ts

@@ -1,6 +1,7 @@
 import { MuiPickersAdapter, PickersTimezone, PickerValidDate } from '../../models';
+import { PickerValue } from '../models';
 export declare const useClockReferenceDate: <TProps extends {}>({ value, referenceDate: referenceDateProp, utils, props, timezone, }: {
-    value: PickerValidDate;
+    value: PickerValue;
     referenceDate: PickerValidDate | undefined;
     utils: MuiPickersAdapter;
     props: TProps;

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

@@ -7,6 +7,6 @@ import { DateOrTimeViewWithMeridiem } from '../../models';
  * - DesktopDateTimePicker
  * - DesktopTimePicker
  */
-export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, getOpenDialogAriaText, ...pickerParams }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
+export declare const useDesktopPicker: <TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>>({ props, ...pickerParams }: UseDesktopPickerParams<TView, TEnableAccessibleFieldDOMStructure, TExternalProps>) => {
     renderPicker: () => React.JSX.Element;
 };

package/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -1,18 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["props", "getOpenDialogAriaText"],
-  _excluded2 = ["ownerState"],
-  _excluded3 = ["ownerState"];
+const _excluded = ["props"],
+  _excluded2 = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import MuiInputAdornment from '@mui/material/InputAdornment';
-import IconButton from '@mui/material/IconButton';
 import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
-import { PickersPopper } from "../../components/PickersPopper.js";
+import { PickerPopper } from "../../components/PickerPopper/PickerPopper.js";
 import { usePicker } from "../usePicker/index.js";
 import { PickersLayout } from "../../../PickersLayout/index.js";
 import { PickerProvider } from "../../components/PickerProvider.js";
+import { PickerFieldUIContextProvider } from "../../components/PickerFieldUI.js";
 
 /**
  * Hook managing all the single-date desktop pickers:
@@ -23,130 +21,48 @@ import { PickerProvider } from "../../components/PickerProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const useDesktopPicker = _ref => {
   let {
-      props,
-      getOpenDialogAriaText
+      props
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     slots,
     slotProps: innerSlotProps,
-    className,
-    sx,
-    format,
-    formatDensity,
-    enableAccessibleFieldDOMStructure,
-    selectedSections,
-    onSelectedSectionsChange,
-    timezone,
-    name,
     label,
     inputRef,
     readOnly,
-    disabled,
     autoFocus,
-    localeText,
-    reduceAnimations
+    localeText
   } = props;
-  const containerRef = React.useRef(null);
   const fieldRef = React.useRef(null);
   const labelId = useId();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    open,
-    actions,
-    hasUIView,
-    layoutProps,
     providerProps,
     renderCurrentView,
-    shouldRestoreFocus,
-    fieldProps: pickerFieldProps,
     ownerState
   } = usePicker(_extends({}, pickerParams, {
     props,
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'desktop'
   }));
-  const InputAdornment = slots.inputAdornment ?? MuiInputAdornment;
+  const Field = slots.field;
   const _useSlotProps = useSlotProps({
-      elementType: InputAdornment,
-      externalSlotProps: innerSlotProps?.inputAdornment,
-      additionalProps: {
-        position: 'end'
-      },
+      elementType: Field,
+      externalSlotProps: innerSlotProps?.field,
+      additionalProps: _extends({
+        // Internal props
+        readOnly,
+        autoFocus: autoFocus && !props.open,
+        // Forwarded props
+        focused: providerProps.contextValue.open ? true : undefined
+      }, isToolbarHidden && {
+        id: labelId
+      }),
       ownerState
     }),
-    inputAdornmentProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
-  const OpenPickerButton = slots.openPickerButton ?? IconButton;
-  const _useSlotProps2 = useSlotProps({
-      elementType: OpenPickerButton,
-      externalSlotProps: innerSlotProps?.openPickerButton,
-      additionalProps: {
-        disabled: disabled || readOnly,
-        onClick: open ? actions.onClose : actions.onOpen,
-        'aria-label': getOpenDialogAriaText(pickerFieldProps.value),
-        edge: inputAdornmentProps.position
-      },
-      ownerState
-    }),
-    openPickerButtonProps = _objectWithoutPropertiesLoose(_useSlotProps2, _excluded3);
-  const OpenPickerIcon = slots.openPickerIcon;
-  const openPickerIconProps = useSlotProps({
-    elementType: OpenPickerIcon,
-    externalSlotProps: innerSlotProps?.openPickerIcon,
-    ownerState
-  });
-  const Field = slots.field;
-  const fieldProps = useSlotProps({
-    elementType: Field,
-    externalSlotProps: innerSlotProps?.field,
-    additionalProps: _extends({
-      // Internal props
-      readOnly,
-      disabled,
-      format,
-      formatDensity,
-      enableAccessibleFieldDOMStructure,
-      selectedSections,
-      onSelectedSectionsChange,
-      timezone,
-      autoFocus: autoFocus && !props.open
-    }, pickerFieldProps, {
-      // onChange and value
-
-      // Forwarded props
-      className,
-      sx,
-      label,
-      name,
-      focused: open ? true : undefined
-    }, isToolbarHidden && {
-      id: labelId
-    }, !!inputRef && {
-      inputRef
-    }),
-    ownerState
-  });
-
-  // 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
-    }, !props.disableOpenPicker && {
-      [`${inputAdornmentProps.position}Adornment`]: /*#__PURE__*/_jsx(InputAdornment, _extends({}, inputAdornmentProps, {
-        children: /*#__PURE__*/_jsx(OpenPickerButton, _extends({}, openPickerButtonProps, {
-          children: /*#__PURE__*/_jsx(OpenPickerIcon, _extends({}, openPickerIconProps))
-        }))
-      }))
-    });
-  }
-  const slotsForField = _extends({
-    textField: slots.textField,
-    clearIcon: slots.clearIcon,
-    clearButton: slots.clearButton
-  }, fieldProps.slots);
+    fieldProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
   const Layout = slots.layout ?? PickersLayout;
   let labelledById = labelId;
   if (isToolbarHidden) {
@@ -164,28 +80,27 @@ export const useDesktopPicker = _ref => {
       'aria-labelledby': labelledById
     }, innerSlotProps?.popper)
   });
+
+  // TODO: This `as any` will go away once the field ref is handled by the context.
   const handleFieldRef = useForkRef(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/_jsxs(PickerProvider, _extends({}, providerProps, {
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-      slots: slotsForField,
-      slotProps: slotProps,
-      unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/_jsx(PickersPopper, _extends({
-      role: "dialog",
-      placement: "bottom-start",
-      anchorEl: containerRef.current
-    }, actions, {
-      open: open,
+  const renderPicker = () => /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
+    children: /*#__PURE__*/_jsxs(PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
-      shouldRestoreFocus: shouldRestoreFocus,
-      reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+      inputRef: inputRef,
+      children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
+        unstableFieldRef: handleFieldRef
+      })), /*#__PURE__*/_jsx(PickerPopper, {
+        role: "dialog",
         slots: slots,
         slotProps: slotProps,
-        children: renderCurrentView()
-      }))
-    }))]
+        children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+          slots: slots,
+          slotProps: slotProps,
+          children: renderCurrentView()
+        }))
+      })]
+    })
   }));
   return {
     renderPicker

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

@@ -1,19 +1,16 @@
 import * as React from 'react';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-import { InputAdornmentProps } from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
-import { SlotComponentProps } from '@mui/utils';
 import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BaseNonStaticPickerProps, BasePickerProps, BaseNonRangeNonStaticPickerProps } from '../../models/props/basePickerProps';
-import { PickersPopperSlots, PickersPopperSlotProps } from '../../components/PickersPopper';
+import { BasePickerProps } from '../../models/props/basePickerProps';
+import { PickerPopperSlots, PickerPopperSlotProps } from '../../components/PickerPopper/PickerPopper';
 import { UsePickerParams } from '../usePicker';
-import { FieldSection, PickerFieldSlotProps, PickerOwnerState, PickerValidDate } from '../../../models';
+import { PickerFieldSlotProps, PickerOwnerState } from '../../../models';
 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 { UseClearableFieldSlots, UseClearableFieldSlotProps } from '../../../hooks/useClearableField';
-export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValidDate | null, TView>, UseClearableFieldSlots {
+import { UsePickerViewsProps } from '../usePicker/usePickerViews';
+import { DateOrTimeViewWithMeridiem, PickerValue } from '../../models';
+import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from '../../components/PickerFieldUI';
+import { UsePickerProviderNonStaticProps } from '../usePicker/usePickerProvider';
+export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -23,50 +20,31 @@ export interface UseDesktopPickerSlots<TView extends DateOrTimeViewWithMeridiem>
      * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
      */
     textField?: React.ElementType;
-    /**
-     * Component displayed on the start or end input adornment used to open the picker on desktop.
-     * @default InputAdornment
-     */
-    inputAdornment?: React.ElementType<InputAdornmentProps>;
-    /**
-     * Button to open the picker on desktop.
-     * @default IconButton
-     */
-    openPickerButton?: React.ElementType<IconButtonProps>;
-    /**
-     * Icon displayed in the open picker button on desktop.
-     */
-    openPickerIcon: React.ElementType;
 }
-export interface UseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValidDate | null, TView>, 'toolbar'> {
+export interface ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends PickerPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValue>, PickerFieldUISlotPropsFromContext {
+    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValue, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
 }
-export interface ExportedUseDesktopPickerSlotProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean> extends PickersPopperSlotProps, ExportedPickersLayoutSlotProps<PickerValidDate | null, TView>, UseClearableFieldSlotProps {
-    field?: SlotComponentPropsFromProps<PickerFieldSlotProps<PickerValidDate | null, FieldSection, TEnableAccessibleFieldDOMStructure>, {}, PickerOwnerState>;
-    textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
-    inputAdornment?: SlotComponentPropsFromProps<InputAdornmentProps, {}, PickerOwnerState>;
-    openPickerButton?: SlotComponentProps<typeof IconButton, {}, PickerOwnerState>;
-    openPickerIcon?: SlotComponentPropsFromProps<Record<string, any>, {}, PickerOwnerState>;
+export interface UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends ExportedUseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>, Pick<PickersLayoutSlotProps<PickerValue>, 'toolbar'> {
 }
-export interface DesktopOnlyPickerProps extends BaseNonStaticPickerProps, BaseNonRangeNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps {
+export interface DesktopOnlyPickerProps extends UsePickerValueNonStaticProps, UsePickerProviderNonStaticProps {
     /**
      * If `true`, the `input` element is focused during the first mount.
      * @default false
      */
     autoFocus?: boolean;
 }
-export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<PickerValidDate | null, TView, any, {}>> extends BasePickerProps<PickerValidDate | null, TView, TError, TExternalProps, {}>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
+export interface UseDesktopPickerProps<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TError, TExternalProps extends UsePickerViewsProps<PickerValue, TView, any>> extends BasePickerProps<PickerValue, any, TError, TExternalProps>, MakeRequired<DesktopOnlyPickerProps, 'format'> {
     /**
      * Overridable component slots.
      * @default {}
      */
-    slots: UseDesktopPickerSlots<TView>;
+    slots: UseDesktopPickerSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: UseDesktopPickerSlotProps<TView, TEnableAccessibleFieldDOMStructure>;
+    slotProps?: UseDesktopPickerSlotProps<TEnableAccessibleFieldDOMStructure>;
 }
-export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValidDate | null, TView, FieldSection, TExternalProps, {}>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'> {
+export interface UseDesktopPickerParams<TView extends DateOrTimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure extends boolean, TExternalProps extends UseDesktopPickerProps<TView, TEnableAccessibleFieldDOMStructure, any, TExternalProps>> extends Pick<UsePickerParams<PickerValue, TView, TExternalProps>, 'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor' | 'ref'> {
     props: TExternalProps;
-    getOpenDialogAriaText: (date: PickerValidDate | null) => string;
 }

package/internals/hooks/useField/buildSectionsFromFormat.js

@@ -113,7 +113,7 @@ const createSection = ({
   const sectionConfig = getDateSectionConfigFromFormatToken(utils, token);
   const hasLeadingZerosInFormat = doesSectionFormatHaveLeadingZeros(utils, sectionConfig.contentType, sectionConfig.type, token);
   const hasLeadingZerosInInput = shouldRespectLeadingZeros ? hasLeadingZerosInFormat : sectionConfig.contentType === 'digit';
-  const isValidDate = date != null && utils.isValid(date);
+  const isValidDate = utils.isValid(date);
   let sectionValue = isValidDate ? utils.formatByString(date, token) : '';
   let maxLength = null;
   if (hasLeadingZerosInInput) {

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

@@ -1,3 +1,5 @@
 export { useField } from './useField';
 export type { FieldValueManager, UseFieldInternalProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext, } from './useField.types';
 export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections, } from './useField.utils';
+export { useFieldInternalPropsWithDefaults } from './useFieldInternalPropsWithDefaults';
+export type { PickerFieldPrivateContextValue } from './useFieldInternalPropsWithDefaults';

package/internals/hooks/useField/index.js

@@ -1,2 +1,3 @@
 export { useField } from "./useField.js";
-export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { createDateStrForV7HiddenInputFromSections, createDateStrForV6InputFromSections } from "./useField.utils.js";
+export { useFieldInternalPropsWithDefaults } from "./useFieldInternalPropsWithDefaults.js";

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

@@ -1,5 +1,5 @@
 import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps, UseFieldForwardedProps } from './useField.types';
-import { FieldSection } from '../../../models';
-export declare const useField: <TValue, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, TEnableAccessibleFieldDOMStructure, any> & {
+import { PickerValidValue } from '../../models';
+export declare const useField: <TValue extends PickerValidValue, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<TValue, TEnableAccessibleFieldDOMStructure, any> & {
     minutesStep?: number;
-}>(params: UseFieldParams<TValue, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;
+}>(params: UseFieldParams<TValue, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;

package/internals/hooks/useField/useField.js

@@ -4,7 +4,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useRtl } from '@mui/system/RtlProvider';
 import { useValidation } from "../../../validation/index.js";
-import { useUtils } from "../useUtils.js";
+import { useLocalizationContext, useUtils } from "../useUtils.js";
 import { adjustSectionValue, getSectionOrder } from "./useField.utils.js";
 import { useFieldState } from "./useFieldState.js";
 import { useFieldCharacterEditing } from "./useFieldCharacterEditing.js";
@@ -19,7 +19,8 @@ export const useField = params => {
       minutesStep,
       enableAccessibleFieldDOMStructure = true,
       disabled = false,
-      readOnly = false
+      readOnly = false,
+      autoFocus = false
     },
     forwardedProps: {
       onKeyDown,
@@ -29,7 +30,8 @@ export const useField = params => {
     },
     fieldValueManager,
     valueManager,
-    validator
+    validator,
+    getOpenPickerButtonAriaLabel: getOpenDialogAriaText
   } = params;
   const isRtl = useRtl();
   const stateResponse = useFieldState(params);
@@ -141,6 +143,11 @@ export const useField = params => {
           if (readOnly || activeSectionIndex == null) {
             break;
           }
+
+          // if all sections are selected, mark the currently editing one as selected
+          if (parsedSelectedSections === 'all') {
+            setSelectedSections(activeSectionIndex);
+          }
           const activeSection = state.sections[activeSectionIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
           const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
@@ -216,9 +223,15 @@ export const useField = params => {
     error: inputError,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   };
+  const localizationContext = useLocalizationContext();
+  const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText(_extends({}, localizationContext, {
+    value: state.value
+  })), [getOpenDialogAriaText, state.value, localizationContext]);
   const commonAdditionalProps = {
     disabled,
-    readOnly
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
   };
   return _extends({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
 };