[pickers] Add AdapterDateFnsJalaliV3 adapter

babel.config.js

@@ -91,9 +91,20 @@ module.exports = function getBabelConfig(api) {
       {
         test: /date-fns/i,
         replacer: 'date-fns-v3',
-        ignoreFilenames: 'AdapterDateFns.ts',
+        // This option is provided by the `patches/[email protected]` patch
+        filenameIncludes: 'src/AdapterDateFnsV3/',
       },
     ]);
+    plugins.push([
+      'babel-plugin-replace-imports',
+      {
+        test: /date-fns-jalali/i,
+        replacer: 'date-fns-jalali-v3',
+        // This option is provided by the `patches/[email protected]` patch
+        filenameIncludes: 'src/AdapterDateFnsJalaliV3/',
+      },
+      'replace-date-fns-jalali-imports',
+    ]);
   }
 
   if (process.env.NODE_ENV === 'production') {

codecov.yml

@@ -8,7 +8,9 @@ coverage:
         target: 100%
         paths:
           - 'packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts'
+          - 'packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts'
           - 'packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts'
+          - 'packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.ts'
           - 'packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts'
           - 'packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts'
           - 'packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts'

docs/data/date-pickers/calendar-systems/calendar-systems.md

@@ -15,10 +15,26 @@ packageName: '@mui/x-date-pickers'
 You can use either the `AdapterDateFnsJalali` adapter, which is based on [date-fns-jalali](https://www.npmjs.com/package/date-fns-jalali),
 or the `AdapterMomentJalaali` adapter, which is based on [moment-jalaali](https://www.npmjs.com/package/moment-jalaali).
 
-The following demo shows how to use the date-fns plugin:
+The following demo shows how to use the `date-fns-jalali` adapter:
 
 {{"demo": "AdapterJalali.js"}}
 
+:::info
+Both `date-fns-jalali` major versions (v2.x and v3.x) are supported.
+
+A single adapter cannot work for both `date-fns-jalali` v2.x and v3.x, because the way functions are exported has been changed in v3.x.
+
+To use `date-fns-jalali` v3.x, you will have to import the adapter from `@mui/x-date-pickers/AdapterDateFnsJalaliV3` instead of `@mui/x-date-pickers/AdapterDateFnsJalali`.
+
+```tsx
+// with date-fns-jalali v2.x
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
+// with date-fns-jalali v3.x
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+```
+
+:::
+
 ## Hijri
 
 :::error

package.json

@@ -129,6 +129,7 @@
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
     "danger": "^11.3.1",
+    "date-fns-jalali-v3": "npm:[email protected]",
     "date-fns-v3": "npm:[email protected]",
     "enzyme": "^3.11.0",
     "eslint": "^8.57.0",

packages/x-date-pickers/package.json

@@ -59,7 +59,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14",
     "date-fns": "^2.25.0 || ^3.2.0",
-    "date-fns-jalali": "^2.13.0-0",
+    "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
     "dayjs": "^1.10.7",
     "luxon": "^3.0.2",
     "moment": "^2.29.4",

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

@@ -207,6 +207,14 @@ export class AdapterDateFnsJalali implements MuiPickersAdapter<Date, DateFnsLoca
   public escapedCharacters = { start: "'", end: "'" };
 
   constructor({ locale, formats }: AdapterOptions<DateFnsLocale, never> = {}) {
+    if (typeof addDays !== 'function') {
+      throw new Error(
+        [
+          'MUI: The `date-fns-jalali` package v3.x is not compatible with this adapter.',
+          'Please, install v2.x of the package or use the `AdapterDateFnsJalaliV3` instead.',
+        ].join('\n'),
+      );
+    }
     this.locale = locale;
     this.formats = { ...defaultFormats, ...formats };
   }

packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx

@@ -0,0 +1,86 @@
+import { expect } from 'chai';
+import { DateTimeField } from '@mui/x-date-pickers';
+import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
+import {
+  createPickerRenderer,
+  expectFieldValueV7,
+  describeJalaliAdapter,
+  buildFieldInteractions,
+} from 'test/utils/pickers';
+import { enUS, faIR } from 'date-fns-jalali/locale';
+import { AdapterFormats } from '@mui/x-date-pickers/models';
+
+describe('<AdapterDateFnsJalaliV3 />', () => {
+  describeJalaliAdapter(AdapterDateFnsJalali, {});
+
+  describe('Adapter localization', () => {
+    it('Formatting', () => {
+      const adapter = new AdapterDateFnsJalali();
+
+      const expectDate = (format: keyof AdapterFormats, expectedWithFaIR: string) => {
+        const date = adapter.date('2020-02-01T23:44:00.000Z')!;
+
+        expect(adapter.format(date, format)).to.equal(expectedWithFaIR);
+      };
+
+      expectDate('fullDate', '12-ام بهمن 1398');
+      expectDate('keyboardDate', '1398/11/12');
+      expectDate('keyboardDateTime', '1398/11/12 11:44 ب.ظ.');
+      expectDate('keyboardDateTime12h', '1398/11/12 11:44 ب.ظ.');
+      expectDate('keyboardDateTime24h', '1398/11/12 23:44');
+    });
+  });
+
+  describe('Picker localization', () => {
+    const testDate = '2018-05-15T09:35:00';
+    const localizedTexts = {
+      enUS: {
+        placeholder: 'MM/DD/YYYY hh:mm aa',
+        value: '02/25/1397 09:35 AM',
+      },
+      faIR: {
+        placeholder: 'YYYY/MM/DD hh:mm aa',
+        value: '1397/02/25 09:35 ق.ظ.',
+      },
+    };
+
+    Object.keys(localizedTexts).forEach((localeKey) => {
+      const localeObject = {
+        faIR,
+        enUS,
+      }[localeKey];
+
+      describe(`test with the "${localeKey}" locale`, () => {
+        const { render, adapter, clock } = createPickerRenderer({
+          clock: 'fake',
+          adapterName: 'date-fns-jalali',
+          locale: localeObject,
+        });
+
+        const { renderWithProps } = buildFieldInteractions({
+          render,
+          clock,
+          Component: DateTimeField,
+        });
+
+        it('should have correct placeholder', () => {
+          const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });
+
+          expectFieldValueV7(
+            v7Response.getSectionsContainer(),
+            localizedTexts[localeKey].placeholder,
+          );
+        });
+
+        it('should have well formatted value', () => {
+          const v7Response = renderWithProps({
+            enableAccessibleFieldDOMStructure: true,
+            value: adapter.date(testDate),
+          });
+
+          expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
+        });
+      });
+    });
+  });
+});