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

package/node/PickersLayout/PickersLayout.js

@@ -152,7 +152,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
   isLandscape: _propTypes.default.bool.isRequired,
   /**
    * `true` if the application is in right-to-left direction.
@@ -173,7 +172,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
-  readOnly: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/node/PickersLayout/usePickerLayout.js

@@ -14,13 +14,13 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _PickersActionBar = require("../PickersActionBar");
 var _pickersLayoutClasses = require("./pickersLayoutClasses");
 var _PickersShortcuts = require("../PickersShortcuts");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
     isLandscape
   } = ownerState;
   const slots = {
@@ -35,6 +35,9 @@ const useUtilityClasses = ownerState => {
   return (0, _composeClasses.default)(slots, _pickersLayoutClasses.getPickersLayoutUtilityClass, classes);
 };
 const usePickerLayout = props => {
+  const {
+    ownerState: pickersOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const {
     wrapperVariant,
     onAccept,
@@ -49,17 +52,20 @@ const usePickerLayout = props => {
     onSelectShortcut,
     isValid,
     isLandscape,
-    disabled,
-    readOnly,
     children,
     slots,
-    slotProps
+    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: TDate | null
-    // - For range pickers value: [TDate | null, TDate | null]
+    // - For pickers value: PickerValidDate | null
+    // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
-  const classes = useUtilityClasses(props);
+  const ownerState = (0, _extends2.default)({}, pickersOwnerState, {
+    wrapperVariant,
+    isLandscape
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   // Action bar
   const ActionBar = slots?.actionBar ?? _PickersActionBar.PickersActionBar;
@@ -74,9 +80,7 @@ const usePickerLayout = props => {
       actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
-    ownerState: (0, _extends2.default)({}, props, {
-      wrapperVariant
-    })
+    ownerState
   });
   const actionBar = /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionBar, (0, _extends2.default)({}, actionBarProps));
 
@@ -91,14 +95,10 @@ const usePickerLayout = props => {
       value,
       view,
       onViewChange,
-      views,
-      disabled,
-      readOnly
+      views
     },
     className: classes.toolbar,
-    ownerState: (0, _extends2.default)({}, props, {
-      wrapperVariant
-    })
+    ownerState
   });
   const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, toolbarProps)) : null;
 
@@ -124,12 +124,7 @@ const usePickerLayout = props => {
       onChange: onSelectShortcut
     },
     className: classes.shortcuts,
-    ownerState: {
-      isValid,
-      isLandscape,
-      onChange: onSelectShortcut,
-      wrapperVariant
-    }
+    ownerState
   });
   const shortcuts = view && !!Shortcuts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Shortcuts, (0, _extends2.default)({}, shortcutsProps)) : null;
   return {

package/node/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -22,7 +22,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _pickersInputBaseClasses = require("./pickersInputBaseClasses");
 var _PickersSectionList = require("../../PickersSectionList");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur"];
 const round = value => Math.round(value * 1e5) / 1e5;
 const PickersInputBaseRoot = exports.PickersInputBaseRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersInputBase',
@@ -202,7 +202,9 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       readOnly,
       inputProps,
       inputRef,
-      sectionListRef
+      sectionListRef,
+      onFocus,
+      onBlur
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootRef = React.useRef(null);
@@ -214,13 +216,12 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
   }
   const handleInputFocus = event => {
-    // Fix a bug with IE11 where the focus/blur events are triggered
-    // while the component is disabled.
-    if (muiFormControl.disabled) {
-      event.stopPropagation();
-      return;
-    }
     muiFormControl.onFocus?.(event);
+    onFocus?.(event);
+  };
+  const handleInputBlur = event => {
+    muiFormControl.onBlur?.(event);
+    onBlur?.(event);
   };
   React.useEffect(() => {
     if (muiFormControl) {
@@ -262,7 +263,7 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       tabIndex: tabIndex,
       className: classes.sectionsContainer,
       onFocus: handleInputFocus,
-      onBlur: muiFormControl.onBlur,
+      onBlur: handleInputBlur,
       onInput: onInput,
       onPaste: onPaste,
       onKeyDown: onKeyDown,

package/node/PickersTextField/PickersTextField.js

@@ -112,8 +112,6 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
     className: (0, _clsx.default)(classes.root, className),
     ref: handleRootRef,
     focused: focused,
-    onFocus: onFocus,
-    onBlur: onBlur,
     disabled: disabled,
     variant: variant,
     error: error,
@@ -135,6 +133,8 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       onKeyUp: onKeyUp,
       onInput: onInput,
       onPaste: onPaste,
+      onFocus: onFocus,
+      onBlur: onBlur,
       endAdornment: endAdornment,
       startAdornment: startAdornment,
       tabIndex: tabIndex,

package/node/StaticDatePicker/StaticDatePicker.js

@@ -71,9 +71,9 @@ StaticDatePicker.propTypes = {
   className: _propTypes.default.string,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {TDate} date The date of the day of week provided by the adapter.
+   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
@@ -82,7 +82,8 @@ StaticDatePicker.propTypes = {
    */
   defaultValue: _propTypes.default.object,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -175,8 +176,7 @@ StaticDatePicker.propTypes = {
   onError: _propTypes.default.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: _propTypes.default.func,
   /**
@@ -187,8 +187,7 @@ StaticDatePicker.propTypes = {
   onViewChange: _propTypes.default.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: _propTypes.default.func,
   /**
@@ -201,6 +200,11 @@ StaticDatePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -223,22 +227,19 @@ StaticDatePicker.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: _propTypes.default.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: _propTypes.default.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: _propTypes.default.func,

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -91,9 +91,9 @@ StaticDateTimePicker.propTypes = {
   className: _propTypes.default.string,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {TDate} date The date of the day of week provided by the adapter.
+   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
@@ -102,7 +102,8 @@ StaticDateTimePicker.propTypes = {
    */
   defaultValue: _propTypes.default.object,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -223,8 +224,7 @@ StaticDateTimePicker.propTypes = {
   onError: _propTypes.default.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: _propTypes.default.func,
   /**
@@ -235,8 +235,7 @@ StaticDateTimePicker.propTypes = {
   onViewChange: _propTypes.default.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: _propTypes.default.func,
   /**
@@ -249,6 +248,11 @@ StaticDateTimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -271,30 +275,26 @@ StaticDateTimePicker.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: _propTypes.default.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: _propTypes.default.func,
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: _propTypes.default.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: _propTypes.default.func,

package/node/StaticTimePicker/StaticTimePicker.js

@@ -87,7 +87,8 @@ StaticTimePicker.propTypes = {
    */
   defaultValue: _propTypes.default.object,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -179,6 +180,11 @@ StaticTimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -192,8 +198,7 @@ StaticTimePicker.propTypes = {
   referenceDate: _propTypes.default.object,
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */

package/node/TimeClock/Clock.js

@@ -14,7 +14,7 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
 var _ClockPointer = require("./ClockPointer");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _shared = require("./shared");
 var _clockClasses = require("./clockClasses");
@@ -194,7 +194,7 @@ function Clock(inProps) {
   } = props;
   const ownerState = props;
   const utils = (0, _useUtils.useUtils)();
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const isMoving = React.useRef(false);
   const classes = useUtilityClasses(ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
@@ -230,6 +230,7 @@ function Clock(inProps) {
       setTime(event, 'finish');
       isMoving.current = false;
     }
+    event.preventDefault();
   };
   const handleMouseMove = event => {
     // event.buttons & PRIMARY_MOUSE_BUTTON
@@ -324,7 +325,7 @@ function Clock(inProps) {
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockWrapper, {
         "aria-activedescendant": selectedId,
-        "aria-label": translations.clockLabelText(type, value, utils, value == null ? null : utils.format(value, 'fullTime')),
+        "aria-label": translations.clockLabelText(type, value == null ? null : utils.format(value, 'fullTime')),
         ref: listboxRef,
         role: "listbox",
         onKeyDown: handleKeyDown,

package/node/TimeClock/TimeClock.js

@@ -14,7 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _PickersArrowSwitcher = require("../internals/components/PickersArrowSwitcher");
 var _timeUtils = require("../internals/utils/time-utils");
@@ -114,6 +114,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });
@@ -124,7 +125,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
     props,
     timezone
   });
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const now = (0, _useUtils.useNow)(timezone);
   const {
     view,
@@ -352,7 +353,8 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   defaultValue: _propTypes.default.object,
   /**
-   * If `true`, the picker views and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -419,7 +421,8 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   openTo: _propTypes.default.oneOf(['hours', 'minutes', 'seconds']),
   /**
-   * If `true`, the picker views and text field are read-only.
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
    * @default false
    */
   readOnly: _propTypes.default.bool,
@@ -430,8 +433,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   referenceDate: _propTypes.default.object,
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */

package/node/TimeField/TimeField.js

@@ -44,7 +44,7 @@ const TimeField = exports.TimeField = /*#__PURE__*/React.forwardRef(function Tim
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? _PickersTextField.PickersTextField : _TextField.default);
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
   const textFieldProps = (0, _useSlotProps.default)({
     elementType: TextField,
     externalSlotProps: slotProps?.textField,
@@ -101,6 +101,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   defaultValue: _propTypes.default.object,
   /**
    * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -120,7 +121,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
   /**
@@ -240,8 +241,8 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   onSelectedSectionsChange: _propTypes.default.func,
   /**
-   * It prevents the user from changing the value of the field
-   * (not from interacting with the field).
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
    * @default false
    */
   readOnly: _propTypes.default.bool,
@@ -268,8 +269,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number]),
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */

package/node/TimePicker/TimePicker.js

@@ -92,7 +92,8 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   desktopModeMediaQuery: _propTypes.default.string,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -117,7 +118,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -225,6 +226,11 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -248,8 +254,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number]),
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */

package/node/TimePicker/TimePickerToolbar.js

@@ -19,13 +19,14 @@ var _PickersToolbarText = require("../internals/components/PickersToolbarText");
 var _PickersToolbarButton = require("../internals/components/PickersToolbarButton");
 var _PickersToolbar = require("../internals/components/PickersToolbar");
 var _utils = require("../internals/utils/utils");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _timePickerToolbarClasses = require("./timePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "disabled", "readOnly", "className"];
+const _excluded = ["ampm", "ampmInClock", "value", "isLandscape", "onChange", "view", "onViewChange", "views", "className"];
 const useUtilityClasses = ownerState => {
   const {
     isLandscape,
@@ -135,14 +136,16 @@ function TimePickerToolbar(inProps) {
       view,
       onViewChange,
       views,
-      disabled,
-      readOnly,
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const isRtl = (0, _RtlProvider.useRtl)();
+  const {
+    disabled,
+    readOnly
+  } = (0, _hooks.usePickerContext)();
   const showAmPmControl = Boolean(ampm && !ampmInClock && views.includes('hours'));
   const {
     meridiemMode,
@@ -223,7 +226,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -237,7 +239,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: _propTypes.default.func.isRequired,
-  readOnly: _propTypes.default.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */