@mui/x-date-pickers 8.0.0-alpha.6 → 8.0.0-alpha.7

package/DesktopDatePicker/DesktopDatePicker.js

@@ -16,6 +16,8 @@ import { DateField } from "../DateField/index.js";
 import { renderDateViewCalendar } from "../dateViewRenderers/index.js";
 import { resolveDateFormat } from "../internals/utils/date-utils.js";
 import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
+const emptyActions = [];
+
 /**
  * Demos:
  *
@@ -40,6 +42,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
+    closeOnSelect: defaultizedProps.closeOnSelect ?? true,
     viewRenderers,
     format: resolveDateFormat(utils, defaultizedProps, false),
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
@@ -53,7 +56,10 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
       }),
       toolbar: _extends({
         hidden: true
-      }, defaultizedProps.slotProps?.toolbar)
+      }, defaultizedProps.slotProps?.toolbar),
+      actionBar: ownerState => _extends({
+        actions: emptyActions
+      }, resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState))
     })
   });
   const {
@@ -86,8 +92,8 @@ DesktopDatePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default true
    */
   closeOnSelect: PropTypes.bool,
   /**

package/DesktopDatePicker/DesktopDatePicker.types.d.ts

@@ -22,4 +22,9 @@ export interface DesktopDatePickerProps<TEnableAccessibleFieldDOMStructure exten
      * @default 4
      */
     yearsPerRow?: 3 | 4;
+    /**
+     * If `true`, the Picker will close after submitting the full date.
+     * @default true
+     */
+    closeOnSelect?: boolean;
 }

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -27,7 +27,12 @@ import { isInternalTimeView } from "../internals/utils/time-utils.js";
 import { isDatePickerView } from "../internals/utils/date-utils.js";
 import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalization.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
+const rendererInterceptor = function RendererInterceptor(props) {
+  const {
+    viewRenderers,
+    popperView,
+    rendererProps
+  } = props;
   const {
       openTo,
       focusedView,
@@ -46,8 +51,10 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     }]
   });
   const isTimeViewActive = isInternalTimeView(popperView);
+  const dateView = isTimeViewActive ? 'day' : popperView;
+  const timeView = isTimeViewActive ? popperView : 'hours';
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [inViewRenderers[!isTimeViewActive ? popperView : 'day']?.(_extends({}, rendererProps, {
+    children: [viewRenderers[dateView]?.(_extends({}, rendererProps, {
       view: !isTimeViewActive ? popperView : 'day',
       focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
       views: rendererProps.views.filter(isDatePickerView),
@@ -60,7 +67,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
         sx: {
           gridColumn: 2
         }
-      }), inViewRenderers[isTimeViewActive ? popperView : 'hours']?.(_extends({}, finalProps, {
+      }), viewRenderers[timeView]?.(_extends({}, finalProps, {
         view: isTimeViewActive ? popperView : 'hours',
         focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
         openTo: isInternalTimeView(openTo) ? openTo : 'hours',
@@ -108,7 +115,6 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
   const views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(view => view !== 'meridiem') : resolvedViews;
-  const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
@@ -135,10 +141,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
       }, defaultizedProps.slotProps?.toolbar),
       tabs: _extends({
         hidden: true
-      }, defaultizedProps.slotProps?.tabs),
-      actionBar: ownerState => _extends({
-        actions: actionBarActions
-      }, resolveComponentProps(defaultizedProps.slotProps?.actionBar, ownerState))
+      }, defaultizedProps.slotProps?.tabs)
     })
   });
   const {
@@ -182,8 +185,8 @@ DesktopDateTimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -65,9 +65,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  isValid: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onSelectShortcut: PropTypes.func.isRequired,
   /**
    * The props used for each component slot.
    * @default {}
@@ -81,7 +78,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { DesktopDateTimePickerLayout };

package/DesktopTimePicker/DesktopTimePicker.js

@@ -46,7 +46,6 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
-  const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
   const views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(view => view !== 'meridiem') : resolvedViews;
@@ -71,10 +70,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
       toolbar: _extends({
         hidden: true,
         ampmInClock
-      }, defaultizedProps.slotProps?.toolbar),
-      actionBar: _extends({
-        actions: actionBarActions
-      }, defaultizedProps.slotProps?.actionBar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -117,8 +113,8 @@ DesktopTimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/MobileDatePicker/MobileDatePicker.js

@@ -83,8 +83,8 @@ MobileDatePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -103,8 +103,8 @@ MobileDateTimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/MobileTimePicker/MobileTimePicker.js

@@ -96,8 +96,8 @@ MobileTimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/PickersActionBar/PickersActionBar.d.ts

@@ -5,7 +5,9 @@ export interface PickersActionBarProps extends DialogActionsProps {
     /**
      * Ordered array of actions to display.
      * If empty, does not display that action bar.
-     * @default `['cancel', 'accept']` for mobile and `[]` for desktop
+     * @default
+     * - `[]` for Desktop Date Picker and Desktop Date Range Picker
+     * - `['cancel', 'accept']` for all other Pickers
      */
     actions?: PickersActionBarAction[];
 }
@@ -19,8 +21,9 @@ export interface PickersActionBarProps extends DialogActionsProps {
  *
  * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
  */
-declare function PickersActionBar(props: PickersActionBarProps): React.JSX.Element | null;
-declare namespace PickersActionBar {
+declare function PickersActionBarComponent(props: PickersActionBarProps): React.JSX.Element | null;
+declare namespace PickersActionBarComponent {
     var propTypes: any;
 }
+declare const PickersActionBar: React.MemoExoticComponent<typeof PickersActionBarComponent>;
 export { PickersActionBar };

package/PickersActionBar/PickersActionBar.js

@@ -27,7 +27,7 @@ const PickersActionBarRoot = styled(DialogActions, {
  *
  * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
  */
-function PickersActionBar(props) {
+function PickersActionBarComponent(props) {
   const {
       actions
     } = props,
@@ -72,7 +72,7 @@ function PickersActionBar(props) {
     children: buttons
   }));
 }
-process.env.NODE_ENV !== "production" ? PickersActionBar.propTypes = {
+process.env.NODE_ENV !== "production" ? PickersActionBarComponent.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -80,7 +80,9 @@ process.env.NODE_ENV !== "production" ? PickersActionBar.propTypes = {
   /**
    * Ordered array of actions to display.
    * If empty, does not display that action bar.
-   * @default `['cancel', 'accept']` for mobile and `[]` for desktop
+   * @default
+   * - `[]` for Desktop Date Picker and Desktop Date Range Picker
+   * - `['cancel', 'accept']` for all other Pickers
    */
   actions: PropTypes.arrayOf(PropTypes.oneOf(['accept', 'cancel', 'clear', 'today']).isRequired),
   /**
@@ -93,4 +95,5 @@ process.env.NODE_ENV !== "production" ? PickersActionBar.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
+const PickersActionBar = /*#__PURE__*/React.memo(PickersActionBarComponent);
 export { PickersActionBar };

package/PickersLayout/PickersLayout.js

@@ -150,9 +150,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  isValid: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onSelectShortcut: PropTypes.func.isRequired,
   /**
    * The props used for each component slot.
    * @default {}
@@ -166,7 +163,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export { PickersLayout };

package/PickersLayout/PickersLayout.types.d.ts

@@ -9,7 +9,6 @@ import { PickersShortcutsProps } from '../PickersShortcuts';
 import { ExportedPickersShortcutProps, PickersShortcuts } from '../PickersShortcuts/PickersShortcuts';
 import { PickerOwnerState } from '../models';
 import { PickerValidValue } from '../internals/models';
-import { UsePickerValueLayoutResponse } from '../internals/hooks/usePicker/usePickerValue.types';
 export interface ExportedPickersLayoutSlots<TValue extends PickerValidValue> {
     /**
      * Custom component for the action bar, it is placed below the picker views.
@@ -58,7 +57,7 @@ export interface PickersLayoutSlots<TValue extends PickerValidValue> extends Exp
      * Custom component for the toolbar.
      * It is placed above the picker views.
      */
-    toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue>>;
+    toolbar?: React.JSXElementConstructor<BaseToolbarProps>;
 }
 export interface PickersLayoutSlotProps<TValue extends PickerValidValue> extends ExportedPickersLayoutSlotProps<TValue> {
     /**
@@ -70,7 +69,7 @@ export interface PickersLayoutSlotProps<TValue extends PickerValidValue> extends
      */
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface PickersLayoutProps<TValue extends PickerValidValue> extends UsePickerValueLayoutResponse<TValue> {
+export interface PickersLayoutProps<TValue extends PickerValidValue> {
     className?: string;
     children?: React.ReactNode;
     /**

package/PickersLayout/usePickerLayout.js

@@ -1,6 +1,8 @@
 'use client';
 
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["ownerState"];
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
@@ -34,24 +36,14 @@ const usePickerLayout = props => {
     ownerState: pickerOwnerState
   } = usePickerPrivateContext();
   const {
-    variant,
-    orientation,
     view
   } = usePickerContext();
   const isRtl = useRtl();
   const {
-    value,
-    onChange,
-    onSelectShortcut,
-    isValid,
     children,
     slots,
     slotProps,
     classes: classesProp
-    // TODO: Remove this "as" hack. It get introduced to mark `value` prop in PickersLayoutProps as not required.
-    // The true type should be
-    // - For pickers value: PickerValidDate | null
-    // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
   const ownerState = React.useMemo(() => _extends({}, pickerOwnerState, {
     layoutDirection: isRtl ? 'rtl' : 'ltr'
@@ -60,15 +52,16 @@ const usePickerLayout = props => {
 
   // Action bar
   const ActionBar = slots?.actionBar ?? PickersActionBar;
-  const actionBarProps = useSlotProps({
-    elementType: ActionBar,
-    externalSlotProps: slotProps?.actionBar,
-    additionalProps: {
-      actions: variant === 'desktop' ? [] : ['cancel', 'accept']
-    },
-    className: classes.actionBar,
-    ownerState
-  });
+  const _useSlotProps = useSlotProps({
+      elementType: ActionBar,
+      externalSlotProps: slotProps?.actionBar,
+      additionalProps: {
+        actions: ['cancel', 'accept']
+      },
+      className: classes.actionBar,
+      ownerState
+    }),
+    actionBarProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
   const actionBar = /*#__PURE__*/_jsx(ActionBar, _extends({}, actionBarProps));
 
   // Toolbar
@@ -76,12 +69,6 @@ const usePickerLayout = props => {
   const toolbarProps = useSlotProps({
     elementType: Toolbar,
     externalSlotProps: slotProps?.toolbar,
-    additionalProps: {
-      isLandscape: orientation === 'landscape',
-      // Will be removed in a follow up PR?
-      onChange,
-      value
-    },
     className: classes.toolbar,
     ownerState
   });
@@ -101,12 +88,6 @@ const usePickerLayout = props => {
   const shortcutsProps = useSlotProps({
     elementType: Shortcuts,
     externalSlotProps: slotProps?.shortcuts,
-    additionalProps: {
-      isValid,
-      isLandscape: orientation === 'landscape',
-      // Will be removed in a follow up PR?
-      onChange: onSelectShortcut
-    },
     className: classes.shortcuts,
     ownerState
   });

package/PickersShortcuts/PickersShortcuts.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ListProps } from '@mui/material/List';
 import { PickerValidValue } from '../internals/models';
+import { PickerChangeImportance } from '../models/pickers';
 interface PickersShortcutsItemGetValueParams<TValue extends PickerValidValue> {
     isValid: (value: TValue) => boolean;
 }
@@ -14,7 +15,6 @@ export interface PickersShortcutsItem<TValue extends PickerValidValue> {
     id?: string;
 }
 export type PickersShortcutsItemContext = Omit<PickersShortcutsItem<PickerValidValue>, 'getValue'>;
-export type PickerShortcutChangeImportance = 'set' | 'accept';
 export interface ExportedPickersShortcutProps<TValue extends PickerValidValue> extends Omit<ListProps, 'onChange'> {
     /**
      * Ordered array of shortcuts to display.
@@ -28,12 +28,9 @@ export interface ExportedPickersShortcutProps<TValue extends PickerValidValue> e
      * - "set": fires `onChange` but do not fire `onAccept` and does not close the picker.
      * @default "accept"
      */
-    changeImportance?: PickerShortcutChangeImportance;
+    changeImportance?: PickerChangeImportance;
 }
 export interface PickersShortcutsProps<TValue extends PickerValidValue> extends ExportedPickersShortcutProps<TValue> {
-    isLandscape: boolean;
-    onChange: (newValue: TValue, changeImportance: PickerShortcutChangeImportance, shortcut: PickersShortcutsItemContext) => void;
-    isValid: (value: TValue) => boolean;
 }
 /**
  * Demos:

package/PickersShortcuts/PickersShortcuts.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
+const _excluded = ["items", "changeImportance"],
   _excluded2 = ["getValue"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
@@ -11,6 +11,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Chip from '@mui/material/Chip';
 import { VIEW_HEIGHT } from "../internals/constants/dimensions.js";
+import { useIsValidValue, usePickerActionsContext } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PickersShortcutsRoot = styled(List, {
   name: 'MuiPickersLayout',
@@ -30,11 +31,13 @@ const PickersShortcutsRoot = styled(List, {
 function PickersShortcuts(props) {
   const {
       items,
-      changeImportance = 'accept',
-      onChange,
-      isValid
+      changeImportance = 'accept'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    setValue
+  } = usePickerActionsContext();
+  const isValidValue = useIsValidValue();
   if (items == null || items.length === 0) {
     return null;
   }
@@ -44,14 +47,17 @@ function PickersShortcuts(props) {
       } = _ref,
       item = _objectWithoutPropertiesLoose(_ref, _excluded2);
     const newValue = getValue({
-      isValid
+      isValid: isValidValue
     });
     return _extends({}, item, {
       label: item.label,
       onClick: () => {
-        onChange(newValue, changeImportance, item);
+        setValue(newValue, {
+          changeImportance,
+          shortcut: item
+        });
       },
-      disabled: !isValid(newValue)
+      disabled: !isValidValue(newValue)
     });
   });
   return /*#__PURE__*/_jsx(PickersShortcutsRoot, _extends({
@@ -95,8 +101,6 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
    * @default false
    */
   disablePadding: PropTypes.bool,
-  isLandscape: PropTypes.bool.isRequired,
-  isValid: PropTypes.func.isRequired,
   /**
    * Ordered array of shortcuts to display.
    * If empty, does not display the shortcuts.
@@ -107,7 +111,6 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
     id: PropTypes.string,
     label: PropTypes.string.isRequired
   })),
-  onChange: PropTypes.func.isRequired,
   style: PropTypes.object,
   /**
    * The content of the subheader, normally `ListSubheader`.

package/PickersShortcuts/index.d.ts

@@ -1,2 +1,2 @@
 export { PickersShortcuts } from './PickersShortcuts';
-export type { PickersShortcutsProps, PickersShortcutsItem, PickersShortcutsItemContext, PickerShortcutChangeImportance, } from './PickersShortcuts';
+export type { PickersShortcutsProps, PickersShortcutsItem, PickersShortcutsItemContext, } from './PickersShortcuts';

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -213,6 +213,9 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
     muiFormControl.onFocus?.(event);
     onFocus?.(event);
   };
+  const handleHiddenInputFocus = event => {
+    handleInputFocus(event);
+  };
   const handleInputBlur = event => {
     muiFormControl.onBlur?.(event);
     onBlur?.(event);
@@ -288,6 +291,10 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       readOnly: readOnly,
       required: muiFormControl.required,
       disabled: muiFormControl.disabled
+      // Hidden input element cannot be focused, trigger the root focus instead
+      // This allows to maintain the ability to do `inputRef.current.focus()` to focus the field
+      ,
+      onFocus: handleHiddenInputFocus
     }, inputProps, {
       ref: handleInputRef
     }))]

package/PickersTextField/PickersTextField.js

@@ -125,7 +125,7 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       required: required,
       ownerState: ownerState
     }, other, {
-      children: [/*#__PURE__*/_jsx(InputLabel, _extends({
+      children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
         htmlFor: id,
         id: inputLabelId
       }, InputLabelProps, {

package/TimeField/useTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseTimeFieldProps } from './TimeField.types';
-export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(inProps: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps & Omit<UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps> & Required<Pick<UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>, keyof import("../internals/hooks/defaultizedFieldProps").UseDefaultizedTimeFieldBaseProps>>, "disabled" | "format" | "onChange" | "onError" | "defaultValue" | "value" | "readOnly" | "ampm" | "timezone" | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps | "dateSeparator">>;
+export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "onChange" | "onError" | "format" | "ampm" | "timezone" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps | "referenceDate" | "formatDensity" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/TimeField/useTimeField.js

@@ -1,22 +1,24 @@
 'use client';
 
-import { singleItemFieldValueManager, singleItemValueManager } from "../internals/utils/valueManagers.js";
-import { useField } from "../internals/hooks/useField/index.js";
-import { validateTime } from "../validation/index.js";
+import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
 import { useSplitFieldProps } from "../hooks/index.js";
-import { useDefaultizedTimeField } from "../internals/hooks/defaultizedFieldProps.js";
-export const useTimeField = inProps => {
-  const props = useDefaultizedTimeField(inProps);
+import { useTimeManager } from "../managers/index.js";
+export const useTimeField = props => {
+  const manager = useTimeManager(props);
   const {
     forwardedProps,
     internalProps
   } = useSplitFieldProps(props, 'time');
+  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
+    manager,
+    internalProps
+  });
   return useField({
     forwardedProps,
-    internalProps,
-    valueManager: singleItemValueManager,
-    fieldValueManager: singleItemFieldValueManager,
-    validator: validateTime,
-    valueType: 'time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType
   });
 };

package/TimePicker/TimePicker.js

@@ -69,8 +69,8 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: PropTypes.bool,
   /**

package/TimePicker/TimePickerToolbar.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { TimePickerToolbarClasses } from './timePickerToolbarClasses';
-import { PickerValue } from '../internals/models';
-export interface TimePickerToolbarProps extends BaseToolbarProps<PickerValue>, ExportedTimePickerToolbarProps {
+export interface TimePickerToolbarProps extends BaseToolbarProps, ExportedTimePickerToolbarProps {
     ampm?: boolean;
     ampmInClock?: boolean;
 }