[pickers] Remove the form props from the layout and the toolbar slots (…

…#15492)
mui · Nov 19, 2024 · c73f6af · c73f6af
1 parent a4481b6
commit c73f6af
Show file tree

Hide file tree

Showing 24 changed files with 53 additions and 152 deletions.
diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -254,6 +254,48 @@ const theme = createTheme({
 });
 ```
 
+## Slots breaking changes
+
+### Slot: `layout`
+
+- The component passed to the `layout` slot no longer receives a `disabled` prop, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.disabled);
+  +import { usePickersContext } from '@mui/x-date-pickers/hooks';
+  +const { disabled } = usePickersContext();
+  +console.log(disabled);
+  ```
+
+- The component passed to the `layout` slot no longer receives a `readOnly` prop, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.readOnly);
+  +import { usePickersContext } from '@mui/x-date-pickers/hooks';
+  +const { readOnly } = usePickersContext();
+  +console.log(readOnly);
+  ```
+
+### Slot: `toolbar`
+
+- The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.disabled);
+  +import { usePickersContext } from '@mui/x-date-pickers/hooks';
+  +const { disabled } = usePickersContext();
+  +console.log(disabled);
+  ```
+
+- The component passed to the `toolbar` slot no longer receives a `readOnly` prop, instead you can use the `usePickersContext` hook:
+
+  ```diff
+  -console.log(props.readOnly);
+  +import { usePickersContext } from '@mui/x-date-pickers/hooks';
+  +const { readOnly } = usePickersContext();
+  +console.log(readOnly);
+  ```
+
 ## Renamed variables
 
 The following variables were renamed to have a coherent `Picker` / `Pickers` prefix:

diff --git a/docs/pages/x/api/date-pickers/date-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-picker-toolbar.json
@@ -20,9 +20,7 @@
       "required": true
     },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "disabled": { "type": { "name": "bool" }, "default": "false" },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
-    "readOnly": { "type": { "name": "bool" }, "default": "false" },
     "sx": {
       "type": {
         "name": "union",

diff --git a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json
@@ -11,9 +11,7 @@
       "required": true
     },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "disabled": { "type": { "name": "bool" }, "default": "false" },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
-    "readOnly": { "type": { "name": "bool" }, "default": "false" },
     "sx": {
       "type": {
         "name": "union",

diff --git a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json
@@ -13,9 +13,7 @@
       "required": true
     },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "disabled": { "type": { "name": "bool" }, "default": "false" },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
-    "readOnly": { "type": { "name": "bool" }, "default": "false" },
     "sx": {
       "type": {
         "name": "union",

diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-range-picker-toolbar.json
@@ -20,9 +20,7 @@
       "required": true
     },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "disabled": { "type": { "name": "bool" }, "default": "false" },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
-    "readOnly": { "type": { "name": "bool" }, "default": "false" },
     "sx": {
       "type": {
         "name": "union",

diff --git a/docs/pages/x/api/date-pickers/pickers-layout.json b/docs/pages/x/api/date-pickers/pickers-layout.json
@@ -2,11 +2,9 @@
   "props": {
     "isRtl": { "type": { "name": "bool" }, "required": true },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "disabled": { "type": { "name": "bool" }, "default": "false" },
     "orientation": {
       "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
     },
-    "readOnly": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },

diff --git a/docs/pages/x/api/date-pickers/time-picker-toolbar.json b/docs/pages/x/api/date-pickers/time-picker-toolbar.json
@@ -20,9 +20,7 @@
       "required": true
     },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
-    "disabled": { "type": { "name": "bool" }, "default": "false" },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
-    "readOnly": { "type": { "name": "bool" }, "default": "false" },
     "sx": {
       "type": {
         "name": "union",

diff --git a/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json b/docs/translations/api-docs/date-pickers/date-picker-toolbar/date-picker-toolbar.json
@@ -2,17 +2,11 @@
   "componentDescription": "",
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
-    "disabled": {
-      "description": "If <code>true</code>, the component is disabled. When disabled, the value cannot be changed and no interaction is possible."
-    },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
     "onViewChange": {
       "description": "Callback called when a toolbar is clicked",
       "typeDescriptions": { "view": "The view to open" }
     },
-    "readOnly": {
-      "description": "If <code>true</code>, the component is read-only. When read-only, the value cannot be changed but the user can interact with the interface."
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },

diff --git a/...anslations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json b/...anslations/api-docs/date-pickers/date-range-picker-toolbar/date-range-picker-toolbar.json
@@ -2,17 +2,11 @@
   "componentDescription": "",
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
-    "disabled": {
-      "description": "If <code>true</code>, the component is disabled. When disabled, the value cannot be changed and no interaction is possible."
-    },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
     "onViewChange": {
       "description": "Callback called when a toolbar is clicked",
       "typeDescriptions": { "view": "The view to open" }
     },
-    "readOnly": {
-      "description": "If <code>true</code>, the component is read-only. When read-only, the value cannot be changed but the user can interact with the interface."
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },

diff --git a/...translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json b/...translations/api-docs/date-pickers/date-time-picker-toolbar/date-time-picker-toolbar.json
@@ -2,17 +2,11 @@
   "componentDescription": "",
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
-    "disabled": {
-      "description": "If <code>true</code>, the component is disabled. When disabled, the value cannot be changed and no interaction is possible."
-    },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
     "onViewChange": {
       "description": "Callback called when a toolbar is clicked",
       "typeDescriptions": { "view": "The view to open" }
     },
-    "readOnly": {
-      "description": "If <code>true</code>, the component is read-only. When read-only, the value cannot be changed but the user can interact with the interface."
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },

diff --git a/.../api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json b/.../api-docs/date-pickers/date-time-range-picker-toolbar/date-time-range-picker-toolbar.json
@@ -2,17 +2,11 @@
   "componentDescription": "",
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
-    "disabled": {
-      "description": "If <code>true</code>, the component is disabled. When disabled, the value cannot be changed and no interaction is possible."
-    },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
     "onViewChange": {
       "description": "Callback called when a toolbar is clicked",
       "typeDescriptions": { "view": "The view to open" }
     },
-    "readOnly": {
-      "description": "If <code>true</code>, the component is read-only. When read-only, the value cannot be changed but the user can interact with the interface."
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },

diff --git a/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json b/docs/translations/api-docs/date-pickers/pickers-layout/pickers-layout.json
@@ -2,16 +2,10 @@
   "componentDescription": "",
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
-    "disabled": {
-      "description": "If <code>true</code>, the component is disabled. When disabled, the value cannot be changed and no interaction is possible."
-    },
     "isRtl": {
       "description": "<code>true</code> if the application is in right-to-left direction."
     },
     "orientation": { "description": "Force rendering in particular orientation." },
-    "readOnly": {
-      "description": "If <code>true</code>, the component is read-only. When read-only, the value cannot be changed but the user can interact with the interface."
-    },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." },
     "sx": {

diff --git a/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json b/docs/translations/api-docs/date-pickers/time-picker-toolbar/time-picker-toolbar.json
@@ -2,17 +2,11 @@
   "componentDescription": "",
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
-    "disabled": {
-      "description": "If <code>true</code>, the component is disabled. When disabled, the value cannot be changed and no interaction is possible."
-    },
     "hidden": { "description": "If <code>true</code>, show the toolbar even in desktop mode." },
     "onViewChange": {
       "description": "Callback called when a toolbar is clicked",
       "typeDescriptions": { "view": "The view to open" }
     },
-    "readOnly": {
-      "description": "If <code>true</code>, the component is read-only. When read-only, the value cannot be changed but the user can interact with the interface."
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },

diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -142,12 +142,6 @@ DateRangePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -161,12 +155,6 @@ DateRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
-  /**
-   * 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.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -12,7 +12,7 @@ import {
   PickerVariant,
   PickerRangeValue,
 } from '@mui/x-date-pickers/internals';
-import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
+import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import {
   DateTimePickerToolbarProps,
@@ -135,8 +135,6 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     isLandscape,
     views,
     ampm,
-    disabled,
-    readOnly,
     hidden,
     toolbarFormat,
     toolbarPlaceholder,
@@ -145,6 +143,8 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
     ...other
   } = props;
 
+  const { disabled, readOnly } = usePickerContext();
+
   const commonToolbarProps = {
     isLandscape,
     views,
@@ -253,12 +253,6 @@ DateTimeRangePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -274,12 +268,6 @@ DateTimeRangePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).isRequired,
-  /**
-   * 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.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

diff --git a/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx b/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx
@@ -136,12 +136,6 @@ DatePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -155,12 +149,6 @@ DatePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
-  /**
-   * 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.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -24,6 +24,7 @@ import { formatMeridiem } from '../internals/utils/date-utils';
 import { pickersToolbarTextClasses } from '../internals/components/pickersToolbarTextClasses';
 import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { PickerValidDate } from '../models';
+import { usePickerContext } from '../hooks/usePickerContext';
 
 export interface ExportedDateTimePickerToolbarProps extends ExportedBaseToolbarProps {
   /**
@@ -243,15 +244,14 @@ function DateTimePickerToolbar(inProps: DateTimePickerToolbarProps) {
     toolbarFormat,
     toolbarPlaceholder = '––',
     views,
-    disabled,
-    readOnly,
     toolbarVariant = 'mobile',
     toolbarTitle: inToolbarTitle,
     className,
     ...other
   } = props;
 
   const isRtl = useRtl();
+  const { disabled, readOnly } = usePickerContext();
   const ownerState: DateTimePickerToolbarOwnerState = { ...props, isRtl };
   const utils = useUtils();
   const { meridiemMode, handleMeridiemChange } = useMeridiemMode(value, ampm, onChange);
@@ -412,12 +412,6 @@ DateTimePickerToolbar.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   /**
    * If `true`, show the toolbar even in desktop mode.
    * @default `true` for Desktop, `false` for Mobile.
@@ -431,12 +425,6 @@ DateTimePickerToolbar.propTypes = {
    * @param {TView} view The view to open
    */
   onViewChange: PropTypes.func.isRequired,
-  /**
-   * 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.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx
@@ -68,12 +68,6 @@ DesktopDateTimePickerLayout.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: PropTypes.bool,
   isLandscape: PropTypes.bool.isRequired,
   /**
    * `true` if the application is in right-to-left direction.
@@ -94,12 +88,6 @@ DesktopDateTimePickerLayout.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.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.bool,
   /**
    * The props used for each component slot.
    * @default {}