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

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -18,10 +18,8 @@ var _valueManagers = require("../internals/utils/valueManagers");
 var _DateTimeField = require("../DateTimeField");
 var _shared = require("../DateTimePicker/shared");
 var _dateViewRenderers = require("../dateViewRenderers/dateViewRenderers");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
-var _icons = require("../icons");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
 var _timeViewRenderers = require("../timeViewRenderers");
@@ -31,10 +29,14 @@ var _DesktopDateTimePickerLayout = require("./DesktopDateTimePickerLayout");
 var _dimensions = require("../internals/constants/dimensions");
 var _timeUtils = require("../internals/utils/time-utils");
 var _dateUtils = require("../internals/utils/date-utils");
-var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["openTo", "focusedView", "timeViewsCount"];
-const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
+const rendererInterceptor = function RendererInterceptor(props) {
+  const {
+    viewRenderers,
+    popperView,
+    rendererProps
+  } = props;
   const {
       openTo,
       focusedView,
@@ -53,8 +55,10 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
     }]
   });
   const isTimeViewActive = (0, _timeUtils.isInternalTimeView)(popperView);
+  const dateView = isTimeViewActive ? 'day' : popperView;
+  const timeView = isTimeViewActive ? popperView : 'hours';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [inViewRenderers[!isTimeViewActive ? popperView : 'day']?.((0, _extends2.default)({}, rendererProps, {
+    children: [viewRenderers[dateView]?.((0, _extends2.default)({}, rendererProps, {
       view: !isTimeViewActive ? popperView : 'day',
       focusedView: focusedView && (0, _dateUtils.isDatePickerView)(focusedView) ? focusedView : null,
       views: rendererProps.views.filter(_dateUtils.isDatePickerView),
@@ -67,7 +71,7 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
         sx: {
           gridColumn: 2
         }
-      }), inViewRenderers[isTimeViewActive ? popperView : 'hours']?.((0, _extends2.default)({}, finalProps, {
+      }), viewRenderers[timeView]?.((0, _extends2.default)({}, finalProps, {
         view: isTimeViewActive ? popperView : 'hours',
         focusedView: focusedView && (0, _timeUtils.isInternalTimeView)(focusedView) ? focusedView : null,
         openTo: (0, _timeUtils.isInternalTimeView)(openTo) ? openTo : 'hours',
@@ -90,7 +94,6 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
  * - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/)
  */
 const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date time pickers
@@ -115,7 +118,6 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === _timeViewRenderers.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 = (0, _extends2.default)({}, defaultizedProps, {
@@ -129,8 +131,7 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
     shouldRenderTimeInASingleColumn,
     slots: (0, _extends2.default)({
       field: _DateTimeField.DateTimeField,
-      layout: _DesktopDateTimePickerLayout.DesktopDateTimePickerLayout,
-      openPickerIcon: _icons.CalendarIcon
+      layout: _DesktopDateTimePickerLayout.DesktopDateTimePickerLayout
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
       field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
@@ -142,10 +143,7 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
       }, defaultizedProps.slotProps?.toolbar),
       tabs: (0, _extends2.default)({
         hidden: true
-      }, defaultizedProps.slotProps?.tabs),
-      actionBar: ownerState => (0, _extends2.default)({
-        actions: actionBarActions
-      }, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.actionBar, ownerState))
+      }, defaultizedProps.slotProps?.tabs)
     })
   });
   const {
@@ -154,12 +152,6 @@ const DesktopDateTimePicker = exports.DesktopDateTimePicker = /*#__PURE__*/React
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
-      utils,
-      formatKey: 'fullDate',
-      contextTranslation: translations.openDatePickerDialogue,
-      propsTranslation: props.localeText?.openDatePickerDialogue
-    }),
     validator: _validation.validateDateTime,
     rendererInterceptor
   });
@@ -189,8 +181,8 @@ DesktopDateTimePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.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.default.bool,
   /**

package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

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

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -15,15 +15,12 @@ var _utils = require("@mui/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
-var _icons = require("../icons");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _timeUtils = require("../internals/utils/time-utils");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
-var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -35,7 +32,6 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/)
  */
 const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all time pickers
@@ -53,7 +49,6 @@ const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forward
     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 === _timeViewRenderers.renderMultiSectionDigitalClockTimeView.name;
   const views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(view => view !== 'meridiem') : resolvedViews;
@@ -68,8 +63,7 @@ const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forward
     // Allows for easy view lifecycle management
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
     slots: (0, _extends2.default)({
-      field: _TimeField.TimeField,
-      openPickerIcon: _icons.ClockIcon
+      field: _TimeField.TimeField
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
       field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
@@ -78,10 +72,7 @@ const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forward
       toolbar: (0, _extends2.default)({
         hidden: true,
         ampmInClock
-      }, defaultizedProps.slotProps?.toolbar),
-      actionBar: (0, _extends2.default)({
-        actions: actionBarActions
-      }, defaultizedProps.slotProps?.actionBar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -90,12 +81,6 @@ const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forward
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
-      utils,
-      formatKey: 'fullTime',
-      contextTranslation: translations.openTimePickerDialogue,
-      propsTranslation: props.localeText?.openTimePickerDialogue
-    }),
     validator: _validation.validateTime
   });
   return renderPicker();
@@ -124,8 +109,8 @@ DesktopTimePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.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.default.bool,
   /**

package/node/MobileDatePicker/MobileDatePicker.js

@@ -14,14 +14,12 @@ var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveC
 var _utils = require("@mui/utils");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _shared = require("../DatePicker/shared");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _DateField = require("../DateField");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _dateUtils = require("../internals/utils/date-utils");
-var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -33,7 +31,6 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/)
  */
 const MobileDatePicker = exports.MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date pickers
@@ -66,12 +63,6 @@ const MobileDatePicker = exports.MobileDatePicker = /*#__PURE__*/React.forwardRe
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
-      utils,
-      formatKey: 'fullDate',
-      contextTranslation: translations.openDatePickerDialogue,
-      propsTranslation: props.localeText?.openDatePickerDialogue
-    }),
     validator: _validation.validateDate
   });
   return renderPicker();
@@ -90,8 +81,8 @@ MobileDatePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.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.default.bool,
   /**

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -15,14 +15,12 @@ var _utils = require("@mui/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _DateTimeField = require("../DateTimeField");
 var _shared = require("../DateTimePicker/shared");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
-var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -34,7 +32,6 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)
  */
 const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date time pickers
@@ -76,12 +73,6 @@ const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.f
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
-      utils,
-      formatKey: 'fullDate',
-      contextTranslation: translations.openDatePickerDialogue,
-      propsTranslation: props.localeText?.openDatePickerDialogue
-    }),
     validator: _validation.validateDateTime
   });
   return renderPicker();
@@ -110,8 +101,8 @@ MobileDateTimePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.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.default.bool,
   /**

package/node/MobileTimePicker/MobileTimePicker.js

@@ -15,13 +15,11 @@ var _utils = require("@mui/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _timeUtils = require("../internals/utils/time-utils");
-var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -33,7 +31,6 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
  */
 const MobileTimePicker = exports.MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all time pickers
@@ -69,12 +66,6 @@ const MobileTimePicker = exports.MobileTimePicker = /*#__PURE__*/React.forwardRe
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
-      utils,
-      formatKey: 'fullTime',
-      contextTranslation: translations.openTimePickerDialogue,
-      propsTranslation: props.localeText?.openTimePickerDialogue
-    }),
     validator: _validation.validateTime
   });
   return renderPicker();
@@ -103,8 +94,8 @@ MobileTimePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.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.default.bool,
   /**

package/node/PickersActionBar/PickersActionBar.js

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickersActionBar = PickersActionBar;
+exports.PickersActionBar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -34,7 +34,7 @@ const PickersActionBarRoot = (0, _styles.styled)(_DialogActions.default, {
  *
  * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
  */
-function PickersActionBar(props) {
+function PickersActionBarComponent(props) {
   const {
       actions
     } = props,
@@ -79,7 +79,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"  |
@@ -87,7 +87,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.default.arrayOf(_propTypes.default.oneOf(['accept', 'cancel', 'clear', 'today']).isRequired),
   /**
@@ -99,4 +101,5 @@ process.env.NODE_ENV !== "production" ? PickersActionBar.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
-} : void 0;
+} : void 0;
+const PickersActionBar = exports.PickersActionBar = /*#__PURE__*/React.memo(PickersActionBarComponent);

package/node/PickersLayout/PickersLayout.js

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

package/node/PickersLayout/usePickerLayout.js

@@ -1,15 +1,16 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _PickersActionBar = require("../PickersActionBar");
@@ -18,6 +19,7 @@ var _PickersShortcuts = require("../PickersShortcuts");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ownerState"];
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
@@ -41,24 +43,14 @@ const usePickerLayout = props => {
     ownerState: pickerOwnerState
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const {
-    variant,
-    orientation,
     view
   } = (0, _hooks.usePickerContext)();
   const isRtl = (0, _RtlProvider.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(() => (0, _extends2.default)({}, pickerOwnerState, {
     layoutDirection: isRtl ? 'rtl' : 'ltr'
@@ -67,28 +59,23 @@ const usePickerLayout = props => {
 
   // Action bar
   const ActionBar = slots?.actionBar ?? _PickersActionBar.PickersActionBar;
-  const actionBarProps = (0, _useSlotProps.default)({
-    elementType: ActionBar,
-    externalSlotProps: slotProps?.actionBar,
-    additionalProps: {
-      actions: variant === 'desktop' ? [] : ['cancel', 'accept']
-    },
-    className: classes.actionBar,
-    ownerState
-  });
+  const _useSlotProps = (0, _useSlotProps2.default)({
+      elementType: ActionBar,
+      externalSlotProps: slotProps?.actionBar,
+      additionalProps: {
+        actions: ['cancel', 'accept']
+      },
+      className: classes.actionBar,
+      ownerState
+    }),
+    actionBarProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
   const actionBar = /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionBar, (0, _extends2.default)({}, actionBarProps));
 
   // Toolbar
   const Toolbar = slots?.toolbar;
-  const toolbarProps = (0, _useSlotProps.default)({
+  const toolbarProps = (0, _useSlotProps2.default)({
     elementType: Toolbar,
     externalSlotProps: slotProps?.toolbar,
-    additionalProps: {
-      isLandscape: orientation === 'landscape',
-      // Will be removed in a follow up PR?
-      onChange,
-      value
-    },
     className: classes.toolbar,
     ownerState
   });
@@ -105,15 +92,9 @@ const usePickerLayout = props => {
 
   // Shortcuts
   const Shortcuts = slots?.shortcuts ?? _PickersShortcuts.PickersShortcuts;
-  const shortcutsProps = (0, _useSlotProps.default)({
+  const shortcutsProps = (0, _useSlotProps2.default)({
     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/node/PickersShortcuts/PickersShortcuts.js

@@ -16,8 +16,9 @@ var _List = _interopRequireDefault(require("@mui/material/List"));
 var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _dimensions = require("../internals/constants/dimensions");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["items", "changeImportance", "isLandscape", "onChange", "isValid"],
+const _excluded = ["items", "changeImportance"],
   _excluded2 = ["getValue"];
 const PickersShortcutsRoot = (0, _styles.styled)(_List.default, {
   name: 'MuiPickersLayout',
@@ -37,11 +38,13 @@ const PickersShortcutsRoot = (0, _styles.styled)(_List.default, {
 function PickersShortcuts(props) {
   const {
       items,
-      changeImportance = 'accept',
-      onChange,
-      isValid
+      changeImportance = 'accept'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    setValue
+  } = (0, _hooks.usePickerActionsContext)();
+  const isValidValue = (0, _hooks.useIsValidValue)();
   if (items == null || items.length === 0) {
     return null;
   }
@@ -51,14 +54,17 @@ function PickersShortcuts(props) {
       } = _ref,
       item = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
     const newValue = getValue({
-      isValid
+      isValid: isValidValue
     });
     return (0, _extends2.default)({}, item, {
       label: item.label,
       onClick: () => {
-        onChange(newValue, changeImportance, item);
+        setValue(newValue, {
+          changeImportance,
+          shortcut: item
+        });
       },
-      disabled: !isValid(newValue)
+      disabled: !isValidValue(newValue)
     });
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersShortcutsRoot, (0, _extends2.default)({
@@ -102,8 +108,6 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
    * @default false
    */
   disablePadding: _propTypes.default.bool,
-  isLandscape: _propTypes.default.bool.isRequired,
-  isValid: _propTypes.default.func.isRequired,
   /**
    * Ordered array of shortcuts to display.
    * If empty, does not display the shortcuts.
@@ -114,7 +118,6 @@ process.env.NODE_ENV !== "production" ? PickersShortcuts.propTypes = {
     id: _propTypes.default.string,
     label: _propTypes.default.string.isRequired
   })),
-  onChange: _propTypes.default.func.isRequired,
   style: _propTypes.default.object,
   /**
    * The content of the subheader, normally `ListSubheader`.

package/node/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -221,6 +221,9 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
     muiFormControl.onFocus?.(event);
     onFocus?.(event);
   };
+  const handleHiddenInputFocus = event => {
+    handleInputFocus(event);
+  };
   const handleInputBlur = event => {
     muiFormControl.onBlur?.(event);
     onBlur?.(event);
@@ -296,6 +299,10 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       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/node/PickersTextField/PickersTextField.js

@@ -132,7 +132,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       required: required,
       ownerState: ownerState
     }, other, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
+      children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
         htmlFor: id,
         id: inputLabelId
       }, InputLabelProps, {