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

package/node/internals/components/PickerProvider.js

@@ -4,12 +4,15 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickerPrivateContext = exports.PickerContext = void 0;
+exports.PickerPrivateContext = exports.PickerActionsContext = void 0;
 exports.PickerProvider = PickerProvider;
 var React = _interopRequireWildcard(require("react"));
 var _LocalizationProvider = require("../../LocalizationProvider");
+var _useIsValidValue = require("../../hooks/useIsValidValue");
+var _useFieldInternalPropsWithDefaults = require("../hooks/useField/useFieldInternalPropsWithDefaults");
+var _usePickerContext = require("../../hooks/usePickerContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const PickerContext = exports.PickerContext = /*#__PURE__*/React.createContext(null);
+const PickerActionsContext = exports.PickerActionsContext = /*#__PURE__*/React.createContext(null);
 const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.createContext({
   ownerState: {
     isPickerDisabled: false,
@@ -18,7 +21,10 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
     isPickerOpen: false,
     pickerVariant: 'desktop',
     pickerOrientation: 'portrait'
-  }
+  },
+  dismissViews: () => {},
+  hasUIView: true,
+  doesTheCurrentViewHasAnUI: () => true
 });
 
 /**
@@ -31,17 +37,29 @@ const PickerPrivateContext = exports.PickerPrivateContext = /*#__PURE__*/React.c
 function PickerProvider(props) {
   const {
     contextValue,
+    actionsContextValue,
     privateContextValue,
+    fieldPrivateContextValue,
+    isValidContextValue,
     localeText,
     children
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_usePickerContext.PickerContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPrivateContext.Provider, {
-      value: privateContextValue,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
-        localeText: localeText,
-        children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerActionsContext.Provider, {
+      value: actionsContextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerPrivateContext.Provider, {
+        value: privateContextValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useFieldInternalPropsWithDefaults.PickerFieldPrivateContext.Provider, {
+          value: fieldPrivateContextValue,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useIsValidValue.IsValidValueContext.Provider, {
+            value: isValidContextValue,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
+              localeText: localeText,
+              children: children
+            })
+          })
+        })
       })
     })
   });

package/node/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -18,8 +18,9 @@ var _useSlotProps3 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _icons = require("../../../icons");
 var _pickersArrowSwitcherClasses = require("./pickersArrowSwitcherClasses");
+var _usePickerPrivateContext = require("../../hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId"],
+const _excluded = ["children", "className", "slots", "slotProps", "isNextDisabled", "isNextHidden", "onGoToNext", "nextLabel", "isPreviousDisabled", "isPreviousHidden", "onGoToPrevious", "previousLabel", "labelId", "classes"],
   _excluded2 = ["ownerState"],
   _excluded3 = ["ownerState"];
 const PickersArrowSwitcherRoot = (0, _styles.styled)('div', {
@@ -45,17 +46,14 @@ const PickersArrowSwitcherButton = (0, _styles.styled)(_IconButton.default, {
 })({
   variants: [{
     props: {
-      hidden: true
+      isButtonHidden: true
     },
     style: {
       visibility: 'hidden'
     }
   }]
 });
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     spacer: ['spacer'],
@@ -86,11 +84,14 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       isPreviousHidden,
       onGoToPrevious,
       previousLabel,
-      labelId
+      labelId,
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const classes = useUtilityClasses(classesProp);
   const nextProps = {
     isDisabled: isNextDisabled,
     isHidden: isNextHidden,
@@ -116,7 +117,7 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       onClick: previousProps.goTo
     },
     ownerState: (0, _extends2.default)({}, ownerState, {
-      hidden: previousProps.isHidden
+      isButtonHidden: previousProps.isHidden ?? false
     }),
     className: (0, _clsx.default)(classes.button, classes.previousIconButton)
   });
@@ -133,7 +134,7 @@ const PickersArrowSwitcher = exports.PickersArrowSwitcher = /*#__PURE__*/React.f
       onClick: nextProps.goTo
     },
     ownerState: (0, _extends2.default)({}, ownerState, {
-      hidden: nextProps.isHidden
+      isButtonHidden: nextProps.isHidden ?? false
     }),
     className: (0, _clsx.default)(classes.button, classes.nextIconButton)
   });

package/node/internals/components/PickersModalDialog.js

@@ -13,6 +13,8 @@ var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
 var _Dialog = _interopRequireWildcard(require("@mui/material/Dialog"));
 var _styles = require("@mui/material/styles");
 var _dimensions = require("../constants/dimensions");
+var _hooks = require("../../hooks");
+var _usePickerPrivateContext = require("../hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const PickersModalDialogRoot = (0, _styles.styled)(_Dialog.default)({
   [`& .${_Dialog.dialogClasses.container}`]: {
@@ -31,16 +33,20 @@ const PickersModalDialogContent = (0, _styles.styled)(_DialogContent.default)({
 function PickersModalDialog(props) {
   const {
     children,
-    onDismiss,
-    open,
     slots,
     slotProps
   } = props;
+  const {
+    open
+  } = (0, _hooks.usePickerContext)();
+  const {
+    dismissViews
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const Dialog = slots?.dialog ?? PickersModalDialogRoot;
   const Transition = slots?.mobileTransition ?? _Fade.default;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog, (0, _extends2.default)({
     open: open,
-    onClose: onDismiss
+    onClose: dismissViews
   }, slotProps?.dialog, {
     TransitionComponent: Transition,
     TransitionProps: slotProps?.mobileTransition,

package/node/internals/components/PickersToolbar.js

@@ -13,13 +13,12 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _createStyled = require("@mui/system/createStyled");
 var _pickersToolbarClasses = require("./pickersToolbarClasses");
+var _useToolbarOwnerState = require("../hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "toolbarTitle", "hidden", "titleId", "isLandscape", "classes", "landscapeDirection"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["children", "className", "classes", "toolbarTitle", "hidden", "titleId", "classes", "landscapeDirection"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     content: ['content']
@@ -40,7 +39,7 @@ const PickersToolbarRoot = (0, _styles.styled)('div', {
   padding: theme.spacing(2, 3),
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       height: 'auto',
@@ -54,7 +53,8 @@ const PickersToolbarRoot = (0, _styles.styled)('div', {
 const PickersToolbarContent = (0, _styles.styled)('div', {
   name: 'MuiPickersToolbar',
   slot: 'Content',
-  overridesResolver: (props, styles) => styles.content
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'landscapeDirection'
 })({
   display: 'flex',
   flexWrap: 'wrap',
@@ -65,7 +65,7 @@ const PickersToolbarContent = (0, _styles.styled)('div', {
   flexDirection: 'row',
   variants: [{
     props: {
-      isLandscape: true
+      pickerOrientation: 'landscape'
     },
     style: {
       justifyContent: 'flex-start',
@@ -74,7 +74,7 @@ const PickersToolbarContent = (0, _styles.styled)('div', {
     }
   }, {
     props: {
-      isLandscape: true,
+      pickerOrientation: 'landscape',
       landscapeDirection: 'row'
     },
     style: {
@@ -90,13 +90,15 @@ const PickersToolbar = exports.PickersToolbar = /*#__PURE__*/React.forwardRef(fu
   const {
       children,
       className,
+      classes: classesProp,
       toolbarTitle,
       hidden,
-      titleId
+      titleId,
+      landscapeDirection
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
+  const classes = useUtilityClasses(classesProp);
   if (hidden) {
     return null;
   }
@@ -113,6 +115,7 @@ const PickersToolbar = exports.PickersToolbar = /*#__PURE__*/React.forwardRef(fu
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersToolbarContent, {
       className: classes.content,
       ownerState: ownerState,
+      landscapeDirection: landscapeDirection,
       children: children
     })]
   }));

package/node/internals/components/PickersToolbarButton.js

@@ -16,11 +16,8 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _PickersToolbarText = require("./PickersToolbarText");
 var _pickersToolbarClasses = require("./pickersToolbarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["align", "className", "selected", "typographyClassName", "value", "variant", "width"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["align", "className", "classes", "selected", "typographyClassName", "value", "variant", "width"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -43,6 +40,7 @@ const PickersToolbarButton = exports.PickersToolbarButton = /*#__PURE__*/React.f
   const {
       align,
       className,
+      classes: classesProp,
       selected,
       typographyClassName,
       value,
@@ -50,7 +48,7 @@ const PickersToolbarButton = exports.PickersToolbarButton = /*#__PURE__*/React.f
       width
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersToolbarButtonRoot, (0, _extends2.default)({
     variant: "text",
     ref: ref,

package/node/internals/components/PickersToolbarText.js

@@ -15,29 +15,23 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _pickersToolbarTextClasses = require("./pickersToolbarTextClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "selected", "value"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected
-  } = ownerState;
+const _excluded = ["className", "classes", "selected", "value"];
+const useUtilityClasses = classes => {
   const slots = {
-    root: ['root', selected && 'selected']
+    root: ['root']
   };
   return (0, _composeClasses.default)(slots, _pickersToolbarTextClasses.getPickersToolbarTextUtilityClass, classes);
 };
 const PickersToolbarTextRoot = (0, _styles.styled)(_Typography.default, {
   name: 'MuiPickersToolbarText',
   slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root, {
-    [`&.${_pickersToolbarTextClasses.pickersToolbarTextClasses.selected}`]: styles.selected
-  }]
+  overridesResolver: (_, styles) => [styles.root]
 })(({
   theme
 }) => ({
   transition: theme.transitions.create('color'),
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${_pickersToolbarTextClasses.pickersToolbarTextClasses.selected}`]: {
+  [`&[data-selected]`]: {
     color: (theme.vars || theme).palette.text.primary
   }
 }));
@@ -48,14 +42,18 @@ const PickersToolbarText = exports.PickersToolbarText = /*#__PURE__*/React.forwa
   });
   const {
       className,
+      classes: classesProp,
+      selected,
       value
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersToolbarTextRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     component: "span"
+  }, selected && {
+    'data-selected': true
   }, other, {
     children: value
   }));

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

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

package/node/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -9,19 +9,17 @@ exports.useDesktopPicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _useSlotProps3 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
-var _PickersPopper = require("../../components/PickersPopper");
+var _PickerPopper = require("../../components/PickerPopper/PickerPopper");
 var _usePicker = require("../usePicker");
 var _PickersLayout = require("../../../PickersLayout");
 var _PickerProvider = require("../../components/PickerProvider");
+var _PickerFieldUI = require("../../components/PickerFieldUI");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["props", "getOpenDialogAriaText"],
-  _excluded2 = ["ownerState"],
-  _excluded3 = ["ownerState"];
+const _excluded = ["props"],
+  _excluded2 = ["ownerState"];
 /**
  * Hook managing all the single-date desktop pickers:
  * - DesktopDatePicker
@@ -30,130 +28,48 @@ const _excluded = ["props", "getOpenDialogAriaText"],
  */
 const useDesktopPicker = _ref => {
   let {
-      props,
-      getOpenDialogAriaText
+      props
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_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 = (0, _useId.default)();
   const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const {
-    open,
-    actions,
-    hasUIView,
-    layoutProps,
     providerProps,
     renderCurrentView,
-    shouldRestoreFocus,
-    fieldProps: pickerFieldProps,
     ownerState
   } = (0, _usePicker.usePicker)((0, _extends2.default)({}, pickerParams, {
     props,
     fieldRef,
     localeText,
     autoFocusView: true,
-    additionalViewProps: {},
     variant: 'desktop'
   }));
-  const InputAdornment = slots.inputAdornment ?? _InputAdornment.default;
-  const _useSlotProps = (0, _useSlotProps3.default)({
-      elementType: InputAdornment,
-      externalSlotProps: innerSlotProps?.inputAdornment,
-      additionalProps: {
-        position: 'end'
-      },
-      ownerState
-    }),
-    inputAdornmentProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
-  const OpenPickerButton = slots.openPickerButton ?? _IconButton.default;
-  const _useSlotProps2 = (0, _useSlotProps3.default)({
-      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 = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps2, _excluded3);
-  const OpenPickerIcon = slots.openPickerIcon;
-  const openPickerIconProps = (0, _useSlotProps3.default)({
-    elementType: OpenPickerIcon,
-    externalSlotProps: innerSlotProps?.openPickerIcon,
-    ownerState
-  });
   const Field = slots.field;
-  const fieldProps = (0, _useSlotProps3.default)({
-    elementType: Field,
-    externalSlotProps: innerSlotProps?.field,
-    additionalProps: (0, _extends2.default)({
-      // 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
+  const _useSlotProps = (0, _useSlotProps2.default)({
+      elementType: Field,
+      externalSlotProps: innerSlotProps?.field,
+      additionalProps: (0, _extends2.default)({
+        // Internal props
+        readOnly,
+        autoFocus: autoFocus && !props.open,
+        // Forwarded props
+        focused: providerProps.contextValue.open ? true : undefined
+      }, isToolbarHidden && {
+        id: labelId
+      }),
+      ownerState
     }),
-    ownerState
-  });
-
-  // TODO: Move to `useSlotProps` when https://github.com/mui/material-ui/pull/35088 will be merged
-  if (hasUIView) {
-    fieldProps.InputProps = (0, _extends2.default)({}, fieldProps.InputProps, {
-      ref: containerRef
-    }, !props.disableOpenPicker && {
-      [`${inputAdornmentProps.position}Adornment`]: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputAdornment, (0, _extends2.default)({}, inputAdornmentProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerButton, (0, _extends2.default)({}, openPickerButtonProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OpenPickerIcon, (0, _extends2.default)({}, openPickerIconProps))
-        }))
-      }))
-    });
-  }
-  const slotsForField = (0, _extends2.default)({
-    textField: slots.textField,
-    clearIcon: slots.clearIcon,
-    clearButton: slots.clearButton
-  }, fieldProps.slots);
+    fieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
   const Layout = slots.layout ?? _PickersLayout.PickersLayout;
   let labelledById = labelId;
   if (isToolbarHidden) {
@@ -171,28 +87,27 @@ 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 = (0, _useForkRef.default)(fieldRef, fieldProps.unstableFieldRef);
-  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
-      slots: slotsForField,
-      slotProps: slotProps,
-      unstableFieldRef: handleFieldRef
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersPopper.PickersPopper, (0, _extends2.default)({
-      role: "dialog",
-      placement: "bottom-start",
-      anchorEl: containerRef.current
-    }, actions, {
-      open: open,
+  const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerProvider.PickerProvider, (0, _extends2.default)({}, providerProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickerFieldUI.PickerFieldUIContextProvider, {
       slots: slots,
       slotProps: slotProps,
-      shouldRestoreFocus: shouldRestoreFocus,
-      reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, layoutProps, slotProps?.layout, {
+      inputRef: inputRef,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Field, (0, _extends2.default)({}, fieldProps, {
+        unstableFieldRef: handleFieldRef
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerPopper.PickerPopper, {
+        role: "dialog",
         slots: slots,
         slotProps: slotProps,
-        children: renderCurrentView()
-      }))
-    }))]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
+          slots: slots,
+          slotProps: slotProps,
+          children: renderCurrentView()
+        }))
+      })]
+    })
   }));
   return {
     renderPicker

package/node/internals/hooks/useField/buildSectionsFromFormat.js

@@ -120,7 +120,7 @@ const createSection = ({
   const sectionConfig = (0, _useField.getDateSectionConfigFromFormatToken)(utils, token);
   const hasLeadingZerosInFormat = (0, _useField.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/node/internals/hooks/useField/index.js

@@ -21,5 +21,12 @@ Object.defineProperty(exports, "useField", {
     return _useField.useField;
   }
 });
+Object.defineProperty(exports, "useFieldInternalPropsWithDefaults", {
+  enumerable: true,
+  get: function () {
+    return _useFieldInternalPropsWithDefaults.useFieldInternalPropsWithDefaults;
+  }
+});
 var _useField = require("./useField");
-var _useField2 = require("./useField.utils");
+var _useField2 = require("./useField.utils");
+var _useFieldInternalPropsWithDefaults = require("./useFieldInternalPropsWithDefaults");

package/node/internals/hooks/useField/useField.js

@@ -27,7 +27,8 @@ const useField = params => {
       minutesStep,
       enableAccessibleFieldDOMStructure = true,
       disabled = false,
-      readOnly = false
+      readOnly = false,
+      autoFocus = false
     },
     forwardedProps: {
       onKeyDown,
@@ -37,7 +38,8 @@ const useField = params => {
     },
     fieldValueManager,
     valueManager,
-    validator
+    validator,
+    getOpenPickerButtonAriaLabel: getOpenDialogAriaText
   } = params;
   const isRtl = (0, _RtlProvider.useRtl)();
   const stateResponse = (0, _useFieldState.useFieldState)(params);
@@ -149,6 +151,11 @@ 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 = (0, _useField.adjustSectionValue)(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
@@ -224,9 +231,15 @@ const useField = params => {
     error: inputError,
     clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   };
+  const localizationContext = (0, _useUtils.useLocalizationContext)();
+  const openPickerAriaLabel = React.useMemo(() => getOpenDialogAriaText((0, _extends2.default)({}, localizationContext, {
+    value: state.value
+  })), [getOpenDialogAriaText, state.value, localizationContext]);
   const commonAdditionalProps = {
     disabled,
-    readOnly
+    readOnly,
+    autoFocus,
+    openPickerAriaLabel
   };
   return (0, _extends2.default)({}, params.forwardedProps, commonForwardedProps, commonAdditionalProps, returnedValue);
 };

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

@@ -383,7 +383,7 @@ const getSectionsBoundaries = (utils, localizedDigits, timezone) => {
       currentDate
     }) => ({
       minimum: 1,
-      maximum: currentDate != null && utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth,
+      maximum: utils.isValid(currentDate) ? utils.getDaysInMonth(currentDate) : maxDaysInMonth,
       longestMonth: longestMonth
     }),
     weekDay: ({
@@ -534,7 +534,7 @@ const mergeDateIntoReferenceDate = (utils, dateToTransferFrom, sections, referen
 exports.mergeDateIntoReferenceDate = mergeDateIntoReferenceDate;
 const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 
-// TODO v8: Remove if we drop the v6 TextField approach.
+// TODO v9: Remove
 exports.isAndroid = isAndroid;
 const getSectionOrder = (sections, shouldApplyRTL) => {
   const neighbors = {};