Merge branch 'master' into fix-memoization

mui · Dec 20, 2024 · a89d11a · a89d11a
2 parents 836f5ea + 38eabdb
commit a89d11a
Show file tree

Hide file tree

Showing 79 changed files with 461 additions and 677 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -30,6 +30,7 @@ const defaultAlias = {
   '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'),
   '@mui/x-tree-view-pro': resolveAliasPath('./packages/x-tree-view-pro/src'),
   '@mui/x-internals': resolveAliasPath('./packages/x-internals/src'),
+  '@mui/material-nextjs': '@mui/monorepo/packages/mui-material-nextjs/src',
   '@mui-internal/api-docs-builder': resolveAliasPath(
     './node_modules/@mui/monorepo/packages/api-docs-builder',
   ),

diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx
@@ -16,7 +16,6 @@ import {
   PickersLayoutRoot,
   PickersLayoutContentWrapper,
 } from '@mui/x-date-pickers/PickersLayout';
-import { DateView } from '@mui/x-date-pickers/models';
 import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
 import { usePickerActionsContext } from '@mui/x-date-pickers/hooks';
 
@@ -63,7 +62,7 @@ function RestaurantHeader() {
   );
 }
 
-function CustomLayout(props: PickersLayoutProps<Dayjs | null, DateView>) {
+function CustomLayout(props: PickersLayoutProps<Dayjs | null>) {
   const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);
 
   return (

diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -364,55 +364,62 @@ This change causes a few breaking changes:
    );
   ```
 
-- The component passed to the `layout` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook:
+- The component passed to the `layout` slot no longer receives the `disabled` and `readOnly` props, instead you can use the `usePickerContext` hook:
 
   ```diff
-  -console.log(props.disabled);
   +import { usePickerContext } from '@mui/x-date-pickers/hooks';
-  +const { disabled } = usePickerContext();
-  +console.log(disabled);
-  ```
 
-- The component passed to the `layout` slot no longer receives a `readOnly` prop, instead you can use the `usePickerContext` hook:
+  -const { disabled } = props;
+  +const { disabled } = usePickerContext();
 
-  ```diff
-  -console.log(props.readOnly);
-  +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+  -const { readOnly } = props;
   +const { readOnly } = usePickerContext();
-  +console.log(readOnly);
   ```
 
 - The component passed to the `layout` slot no longer receives an `isRtl` prop. If you need to access this information, you can use the `useRtl` hook from `@mui/system`:
 
   ```diff
   +import { useRtl } from '@mui/system/RtlProvider';
-   function CustomLayout(props) {
-  -  console.log(props.isRtl);
+
+  -  const { isRtl } = props;
   +  const isRtl = useRtl();
-  +  console.log(isRtl);
-   }
   ```
 
 - The component passed to the `layout` slot no longer receives the `orientation` and `isLandscape` props, instead you can use the `usePickerContext` hook:
 
   ```diff
-  -console.log(props.orientation);
   +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { orientation } = props;
   +const { orientation } = usePickerContext();
-  +console.log(orientation);
-  -console.log(props.isLandscape);
-  +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { isLandscape } = props;
   +const { orientation } = usePickerContext();
-  +console.log(orientation === 'landscape');
+  +const isLandscape = orientation === 'landscape';
   ```
 
 - The component passed to the `layout` slot no longer receives a `wrapperVariant` prop, instead you can use the `usePickerContext` hook:
 
   ```diff
-  -console.log(props.wrapperVariant);
   +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { wrapperVariant } = props;
   +const { variant } = usePickerContext();
-  +console.log(variant);
+  ```
+
+- The component passed to the `layout` slot no longer receives the `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook:
+
+  ```diff
+  +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { view } = props;
+  +const { view } = usePickerContext();
+
+  -const { views } = props;
+  +const { views } = usePickerContext();
+
+  -const { onViewChange } = props;
+  +const { onViewChange } = usePickerContext();
   ```
 
 - The component passed to the `layout` slot no longer receives the `onClear`, `onSetToday`, `onAccept`, `onCancel`, `onOpen`, `onClose` and `onDismiss` props, instead you can use the `usePickerActionsContext` or the `usePickerContext` hooks:
@@ -462,22 +469,48 @@ This change causes a few breaking changes:
 
 ### Slot: `toolbar`
 
-- The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook:
+- The component passed to the `toolbar` slot no longer receives the `disabled` and `readOnly` props, instead you can use the `usePickerContext` hook:
 
   ```diff
-  -console.log(props.disabled);
   +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { disabled } = props;
   +const { disabled } = usePickerContext();
-  +console.log(disabled);
+
+  -const { readOnly } = props;
+  +const { readOnly } = usePickerContext();
   ```
 
-- The component passed to the `toolbar` slot no longer receives a `readOnly` prop, instead you can use the `usePickerContext` hook:
+- The component passed to the `toolbar` slot no longer receives a `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook:
 
   ```diff
-  -console.log(props.readOnly);
   +import { usePickerContext } from '@mui/x-date-pickers/hooks';
-  +const { readOnly } = usePickerContext();
-  +console.log(readOnly);
+
+  -const { view } = props;
+  +const { view } = usePickerContext();
+
+  -const { views } = props;
+  +const { views } = usePickerContext();
+
+  -const { onViewChange } = props;
+  +const { onViewChange } = usePickerContext();
+  ```
+
+### Slot: `tabs`
+
+- The component passed to the `tabs` slot no longer receives a `view`, `views` and `onViewChange` props, instead you can use the `usePickerContext` hook:
+
+  ```diff
+  +import { usePickerContext } from '@mui/x-date-pickers/hooks';
+
+  -const { view } = props;
+  +const { view } = usePickerContext();
+
+  -const { views } = props;
+  +const { views } = usePickerContext();
+
+  -const { onViewChange } = props;
+  +const { onViewChange } = usePickerContext();
   ```
 
 ### Slot: `actionBar`

diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/docs/package.json b/docs/package.json
@@ -32,6 +32,7 @@
     "@mui/joy": "^5.0.0-beta.48",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.11",
+    "@mui/material-nextjs": "^5.16.8",
     "@mui/styles": "^5.16.11",
     "@mui/system": "^5.16.8",
     "@mui/utils": "^5.16.8",

diff --git a/docs/pages/x/api/date-pickers/date-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-picker-toolbar.json
@@ -1,24 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'"
-      },
-      "required": true
-    },
-    "views": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;'day'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'year'&gt;"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "sx": {

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
@@ -1,15 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": { "type": { "name": "enum", "description": "'day'" }, "required": true },
-    "views": {
-      "type": { "name": "arrayOf", "description": "Array&lt;'day'&gt;" },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "sx": {

diff --git a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json
@@ -1,17 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "dateIcon": { "type": { "name": "node" }, "default": "DateRange" },
     "hidden": {

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
@@ -1,17 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "views": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'&gt;"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "sx": {
@@ -23,13 +11,7 @@
     },
     "toolbarFormat": { "type": { "name": "string" } },
     "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" },
-    "toolbarTitle": { "type": { "name": "node" } },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
-      }
-    }
+    "toolbarTitle": { "type": { "name": "node" } }
   },
   "name": "DateTimePickerToolbar",
   "imports": [

diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-range-picker-tabs.json
@@ -1,17 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "dateIcon": { "type": { "name": "element" }, "default": "DateRangeIcon" },
     "hidden": {

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
@@ -1,24 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'"
-      },
-      "required": true
-    },
-    "views": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;'day'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'&gt;"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "sx": {

diff --git a/docs/pages/x/api/date-pickers/time-picker-toolbar.json b/docs/pages/x/api/date-pickers/time-picker-toolbar.json
@@ -1,24 +1,5 @@
 {
   "props": {
-    "onViewChange": {
-      "type": { "name": "func" },
-      "required": true,
-      "signature": { "type": "function(view: TView) => void", "describedArgs": ["view"] }
-    },
-    "view": {
-      "type": {
-        "name": "enum",
-        "description": "'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'"
-      },
-      "required": true
-    },
-    "views": {
-      "type": {
-        "name": "arrayOf",
-        "description": "Array&lt;'hours'<br>&#124;&nbsp;'meridiem'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'&gt;"
-      },
-      "required": true
-    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "hidden": { "type": { "name": "bool" }, "default": "`true` for Desktop, `false` for Mobile." },
     "sx": {

diff --git a/docs/src/modules/components/overview/CustomLayoutRangePicker.tsx b/docs/src/modules/components/overview/CustomLayoutRangePicker.tsx
@@ -55,7 +55,7 @@ const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
   { label: 'Reset', getValue: () => [null, null] },
 ];
 
-interface CustomLayoutProps extends PickersLayoutProps<DateRange<Dayjs>, 'day'> {
+interface CustomLayoutProps extends PickersLayoutProps<DateRange<Dayjs>> {
   layout: Layout;
 }
 

diff --git a/docs/src/modules/components/overview/mainDemo/Clock.tsx b/docs/src/modules/components/overview/mainDemo/Clock.tsx
@@ -10,7 +10,6 @@ import {
   PickersLayoutRoot,
   PickersLayoutContentWrapper,
 } from '@mui/x-date-pickers/PickersLayout';
-import { TimeView } from '@mui/x-date-pickers/models';
 
 const StyledLayout = styled(PickersLayoutRoot)({
   overflow: 'auto',
@@ -31,7 +30,7 @@ const StyledLayout = styled(PickersLayoutRoot)({
   },
 });
 
-function CustomLayout(props: PickersLayoutProps<Dayjs | null, TimeView>) {
+function CustomLayout(props: PickersLayoutProps<Dayjs | null>) {
   const { actionBar, content, toolbar, ownerState } = usePickerLayout(props);
   return (
     <StyledLayout ownerState={ownerState}>

diff --git a/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx b/docs/src/modules/components/overview/mainDemo/DateRangeWithShortcuts.tsx
@@ -55,7 +55,7 @@ const shortcutsItems: PickersShortcutsItem<DateRange<Dayjs>>[] = [
   { label: 'Reset', getValue: () => [null, null] },
 ];
 
-interface CustomLayoutProps extends PickersLayoutProps<DateRange<Dayjs>, 'day'> {
+interface CustomLayoutProps extends PickersLayoutProps<DateRange<Dayjs>> {
   isHorizontal?: boolean;
 }
 function CustomLayout(props: CustomLayoutProps) {

diff --git a/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx b/docs/src/modules/components/overview/mainDemo/DigitalClock.tsx
@@ -13,7 +13,6 @@ import {
   PickersLayoutContentWrapper,
 } from '@mui/x-date-pickers/PickersLayout';
 import { renderMultiSectionDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers';
-import { TimeView } from '@mui/x-date-pickers/models';
 
 const StyledLayout = styled(PickersLayoutRoot)({
   overflow: 'auto',
@@ -24,7 +23,7 @@ const StyledLayout = styled(PickersLayoutRoot)({
   },
 });
 
-function CustomLayout(props: PickersLayoutProps<Dayjs | null, TimeView>) {
+function CustomLayout(props: PickersLayoutProps<Dayjs | null>) {
   const { actionBar, content, ownerState } = usePickerLayout(props);
   return (
     <StyledLayout ownerState={ownerState}>