[pickers] Support date-fns v4 (#14673)

Signed-off-by: Lukas Tyla <[email protected]>
Co-authored-by: Flavien DELANGLE <[email protected]>

babel.config.js

@@ -104,14 +104,14 @@ module.exports = function getBabelConfig(api) {
 
   if (process.env.NODE_ENV === 'test') {
     plugins.push(['@babel/plugin-transform-export-namespace-from']);
-    // We replace `date-fns` imports with an aliased `date-fns@v3` version installed as `date-fns-v3` for tests.
+    // We replace `date-fns` imports with an aliased `date-fns@v4` version installed as `date-fns-v4` for tests.
     // The plugin is patched to only run on `AdapterDateFnsV3.ts`.
-    // TODO: remove when we upgrade to date-fns v3 by default.
+    // TODO: remove when we upgrade to date-fns v4 by default.
     plugins.push([
       'babel-plugin-replace-imports',
       {
         test: /date-fns/i,
-        replacer: 'date-fns-v3',
+        replacer: 'date-fns-v4',
         // This option is provided by the `patches/[email protected]` patch
         filenameIncludes: 'src/AdapterDateFnsV3/',
       },

docs/data/date-pickers/adapters-locale/adapters-locale.md

@@ -41,21 +41,21 @@ import 'dayjs/locale/de';
 For `date-fns`, import the locale and pass it to `LocalizationProvider`:
 
 :::info
-Both `date-fns` major versions (v2.x and v3.x) are supported.
+We support `date-fns` package v2.x, v3.x, and v4.x major versions.
 
-A single adapter cannot work for both `date-fns` v2.x and v3.x, because the way functions are exported has been changed in v3.x.
+A single adapter cannot work for all `date-fns` versions, because the way functions are exported has been changed in v3.x.
 
-To use `date-fns` v3.x, you will have to import the adapter from `@mui/x-date-pickers/AdapterDateFnsV3` instead of `@mui/x-date-pickers/AdapterDateFns`.
+To use `date-fns` v3.x or v4.x, you need to import the adapter from `@mui/x-date-pickers/AdapterDateFnsV3` instead of `@mui/x-date-pickers/AdapterDateFns`.
 :::
 
 ```tsx
 // with date-fns v2.x
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-// with date-fns v3.x
+// with date-fns v3.x or v4.x
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 // with date-fns v2.x
 import de from 'date-fns/locale/de';
-// with date-fns v3.x
+// with date-fns v3.x or v4.x
 import { de } from 'date-fns/locale/de';
 
 <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={de}>

docs/src/modules/components/PickersRenderingInstructions.js

@@ -27,7 +27,7 @@ export default function PickersRenderingInstructions() {
     `import { ${adapterName} } from '${componentPackage}/${adapterName}'`,
     ...(libraryUsed === 'date-fns'
       ? [
-          '// If you are using date-fns v3.x, please import the v3 adapter',
+          '// If you are using date-fns v3.x or v4.x, please import the v3 adapter',
           `import { ${adapterName} } from '${componentPackage}/AdapterDateFnsV3'`,
         ]
       : []),

package.json

@@ -136,7 +136,7 @@
     "cross-env": "^7.0.3",
     "danger": "^12.3.3",
     "date-fns-jalali-v3": "npm:[email protected]",
-    "date-fns-v3": "npm:date-fns@3.6.0",
+    "date-fns-v4": "npm:date-fns@4.1.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",

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

@@ -56,7 +56,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "date-fns": "^2.25.0 || ^3.2.0",
+    "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
     "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
     "dayjs": "^1.10.7",
     "luxon": "^3.0.2",

packages/x-date-pickers/package.json

@@ -58,7 +58,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "date-fns": "^2.25.0 || ^3.2.0",
+    "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
     "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
     "dayjs": "^1.10.7",
     "luxon": "^3.0.2",

packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts

@@ -90,7 +90,7 @@ export class AdapterDateFns
       if (typeof addDays !== 'function') {
         throw new Error(
           [
-            'MUI: The `date-fns` package v3.x is not compatible with this adapter.',
+            'MUI: This adapter is only compatible with `date-fns` v2.x package versions.',
             'Please, install v2.x of the package or use the `AdapterDateFnsV3` instead.',
           ].join('\n'),
         );

packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts

@@ -93,7 +93,7 @@ export class AdapterDateFns
         throw new Error(
           [
             `MUI: The \`date-fns\` package v2.x is not compatible with this adapter.`,
-            'Please, install v3.x of the package or use the `AdapterDateFns` instead.',
+            'Please, install v3.x or v4.x of the package or use the `AdapterDateFns` instead.',
           ].join('\n'),
         );
       }