Merge remote-tracking branch 'upstream/master' into bump-internal-pac…

…kages

docs/data/charts/bars/HorizontalBars.js

@@ -23,7 +23,7 @@ const dataset = [
     paris: 52,
     newYork: 78,
     seoul: 28,
-    month: 'Fev',
+    month: 'Feb',
   },
   {
     london: 47,

docs/data/charts/bars/HorizontalBars.tsx

@@ -23,7 +23,7 @@ const dataset = [
     paris: 52,
     newYork: 78,
     seoul: 28,
-    month: 'Fev',
+    month: 'Feb',
   },
   {
     london: 47,

docs/data/date-pickers/base-concepts/base-concepts.md

@@ -117,7 +117,9 @@ Make sure to provide an `aria-labelledby` prop to `popper` and/or `mobilePaper`
 
 ## TypeScript
 
-In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types.
+### Theme augmentation
+
+To benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types.
 Internally, it uses module augmentation to extend the default theme structure.
 
 ```tsx
@@ -146,6 +148,24 @@ You don't have to import the theme augmentation from both `@mui/x-date-pickers`
 Importing it from `@mui/x-date-pickers-pro` is enough.
 :::
 
+### Typing of the date
+
+The Date and Time Pickers components are compatible with several date libraries
+that use different formats to represent their dates
+(`Date` object for `date-fns`, `daysjs.Dayjs` object for `days-js`, etc.).
+To correctly type all the props that are date-related, the adapters override a global type named `PickerValidDate`
+to allow the usage of their own date format.
+This allows TypeScript to throw an error if you try to pass `value={new Date()}` to a component using `AdapterDayjs` for instance.
+
+If you run into TypeScript errors such as `DesktopDatePickerProps<Date> error Type 'Date' does not satisfy the constraint 'never'`,
+it is probably because you are not importing the adapter in the same TypeScript project as the rest of your codebase.
+You can fix it by manually importing the adapter in some file of your project as follows:
+
+```ts
+// Replace `AdapterDayjs` with the adapter you are using.
+import type {} from '@mui/x-date-pickers/AdapterDayjs';
+```
+
 ## Testing caveats
 
 ### Responsive components

docs/data/migration/migration-pickers-v6/migration-pickers-v6.md

@@ -264,7 +264,7 @@ The deprecated `defaultCalendarMonth` prop has been removed in favor of the more
 The new `referenceDate` prop is not limited to the default month.
 It will also impact year, day, and time.
 
-Learn more on this prop on [the `DateCalendar` documentation](/x/react-date-pickers/date-calendar/#choose-the-initial-year-month) or [the `referenceDate` documentation](/x/react-date-pickers/base-concepts/#reference-date-when-no-value-is-defined) pages.
+See [Date Calendar—Choose the initial year / month](/x/react-date-pickers/date-calendar/#choose-the-initial-year-month) or [Base concepts—Reference date when no value is defined](/x/react-date-pickers/base-concepts/#reference-date-when-no-value-is-defined) for more details.
 :::
 
 ```diff
@@ -290,6 +290,15 @@ The string argument of the `dayOfWeekFormatter` prop has been replaced in favor
  />
 ```
 
+### Strict typing of the date-related props
+
+All the date-related props are now strictly typed to only accept the date format supported by your adapter
+(`Date` object for `date-fns`, `daysjs.Dayjs` object for `days-js`, etc.).
+
+:::info
+See [Base concepts—Typing of the date](/x/react-date-pickers/base-concepts/#typing-of-the-date) for more details.
+:::
+
 ## Field components
 
 ### Update the format of `selectedSections`
@@ -428,7 +437,10 @@ then you can look at the page to see all the examples improved and updated to us
 
 The headless field hooks (e.g.: `useDateField`) now return a new prop called `enableAccessibleFieldDOMStructure`.
 This is used to know if the current UI expected is built using the accessible DOM structure or not.
-Learn more about this new [accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure).
+
+:::info
+See [Fields—Accessible DOM structure](/x/react-date-pickers/fields/#accessible-dom-structure) for more details.
+:::
 
 When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove `enableAccessibleFieldDOMStructure` before it is passed to the DOM:
 
@@ -517,7 +529,10 @@ The `dayPickerClasses` variable has been renamed `dayCalendarClasses` to be cons
 
 The `dateLibInstance` prop of `LocalizationProvider` does not work with `AdapterDayjs` anymore.
 This prop was used to set the pickers in UTC mode before the implementation of a proper timezone support in the components.
-You can learn more about the new approach on the [dedicated doc page](https://mui.com/x/react-date-pickers/timezone/).
+
+:::info
+See [Timezone](/x/react-date-pickers/timezone/) for more details.
+:::
 
 ```diff
  // When a `value` or a `defaultValue` is provided

docs/package.json

@@ -28,14 +28,14 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/icons-material": "^5.15.19",
+    "@mui/icons-material": "^5.15.20",
     "@mui/joy": "5.0.0-beta.32",
     "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.19",
+    "@mui/material": "^5.15.20",
     "@mui/material-nextjs": "^5.15.11",
-    "@mui/styles": "^5.15.19",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/styles": "^5.15.20",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@mui/x-charts": "workspace:*",
     "@mui/x-data-grid": "workspace:*",
     "@mui/x-data-grid-generator": "workspace:*",

package.json

@@ -86,17 +86,16 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
-    "@mui/icons-material": "^5.15.19",
+    "@mui/icons-material": "^5.15.20",
     "@mui/internal-markdown": "^1.0.5",
     "@mui/internal-test-utils": "^1.0.1",
-    "@mui/material": "^5.15.19",
+    "@mui/material": "^5.15.20",
     "@mui/monorepo": "github:mui/material-ui#22c5206a9e8191b2f81131d6978a0958e55b7032",
-    "@mui/utils": "^5.15.14",
+    "@mui/utils": "^5.15.20",
     "@next/eslint-plugin-next": "14.2.3",
     "@octokit/plugin-retry": "^6.0.1",
     "@octokit/rest": "^20.1.1",
     "@playwright/test": "^1.44.1",
-    "@testing-library/react": "^15.0.7",
     "@types/babel__traverse": "^7.20.6",
     "@types/babel__core": "^7.20.5",
     "@types/chai": "^4.3.16",
@@ -185,7 +184,7 @@
     "stream-browserify": "^3.0.0",
     "string-replace-loader": "^3.1.0",
     "terser-webpack-plugin": "^5.3.10",
-    "tsx": "^4.15.2",
+    "tsx": "^4.15.5",
     "typescript": "^5.4.5",
     "unist-util-visit": "^2.0.3",
     "util": "^0.12.5",

packages/x-charts-pro/package.json

@@ -41,8 +41,8 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@mui/x-charts": "workspace:*",
     "@mui/x-license": "workspace:*",
     "@react-spring/rafz": "^9.7.3",

packages/x-charts/package.json

@@ -41,8 +41,8 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@react-spring/rafz": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "clsx": "^2.1.1",

packages/x-data-grid-premium/package.json

@@ -44,8 +44,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@mui/x-data-grid": "workspace:*",
     "@mui/x-data-grid-pro": "workspace:*",
     "@mui/x-license": "workspace:*",

packages/x-data-grid-pro/package.json

@@ -44,8 +44,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@mui/x-data-grid": "workspace:*",
     "@mui/x-license": "workspace:*",
     "@types/format-util": "^1.0.4",

packages/x-data-grid/package.json

@@ -48,8 +48,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.7",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8"

packages/x-date-pickers-pro/package.json

@@ -44,8 +44,8 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@mui/x-date-pickers": "workspace:*",
     "@mui/x-license": "workspace:*",
     "clsx": "^2.1.1",

packages/x-date-pickers/package.json

@@ -47,8 +47,8 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.15",
-    "@mui/utils": "^5.15.14",
+    "@mui/system": "^5.15.20",
+    "@mui/utils": "^5.15.20",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",

packages/x-date-pickers/src/MobileTimePicker/tests/timezone.MobileTimePicker.test.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { screen } from '@mui/internal-test-utils';
+import { describeAdapters } from 'test/utils/pickers';
+import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
+import { expect } from 'chai';
+
+describe('<MobileTimePicker /> - Timezone', () => {
+  describeAdapters('Timezone prop', MobileTimePicker, ({ adapter, render }) => {
+    if (!adapter.isTimezoneCompatible) {
+      return;
+    }
+
+    it('should use the timezone prop for the value displayed in the toolbar', () => {
+      render(
+        <MobileTimePicker
+          timezone="America/New_York"
+          value={adapter.date('2022-04-17T15:30', 'default')}
+          open
+        />,
+      );
+
+      expect(screen.getByMuiTest('hours')).to.have.text('11');
+    });
+  });
+});

packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx

@@ -74,7 +74,6 @@ const usePickerLayout = <
   const classes = useUtilityClasses(props);
 
   // Action bar
-
   const ActionBar = slots?.actionBar ?? PickersActionBar;
   const actionBarProps = useSlotProps({
     elementType: ActionBar,
@@ -93,7 +92,6 @@ const usePickerLayout = <
   const actionBar = <ActionBar {...actionBarProps} />;
 
   // Toolbar
-
   const Toolbar = slots?.toolbar;
   const toolbarProps = useSlotProps({
     elementType: Toolbar!,
@@ -114,19 +112,16 @@ const usePickerLayout = <
   const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? <Toolbar {...toolbarProps} /> : null;
 
   // Content
-
   const content = children;
 
   // Tabs
-
   const Tabs = slots?.tabs;
   const tabs =
     view && Tabs ? (
       <Tabs view={view} onViewChange={onViewChange} className={classes.tabs} {...slotProps?.tabs} />
     ) : null;
 
   // Shortcuts
-
   const Shortcuts = slots?.shortcuts ?? PickersShortcuts;
   const shortcutsProps = useSlotProps({
     elementType: Shortcuts!,
@@ -144,7 +139,6 @@ const usePickerLayout = <
       wrapperVariant,
     },
   });
-
   const shortcuts = view && !!Shortcuts ? <Shortcuts {...shortcutsProps} /> : null;
 
   return {