fix(mui): migrate date pickers to x-date-pickers

Author: victoria-dos

packages/common/babel.config.js

@@ -72,8 +72,8 @@ const createSuirCJSTransform = (env = 'commonjs') => [
 const createMuiTransform = (env) => [
   'transform-imports',
   {
-    '@mui/lab': {
-      transform: (importName) => (env ? `@mui/lab/${env}/${importName}` : `@mui/lab/${importName}`),
+    '@mui/x-date-pickers': {
+      transform: (importName) => (env ? `@mui/x-date-pickers/${env}/${importName}` : `@mui/x-date-pickers/${importName}`),
       preventFullImport: false,
       skipDefaultConversion: false
     },

packages/mui-component-mapper/demo/index.js

@@ -6,11 +6,11 @@ import Grid from '@mui/material/Grid';
 import { componentMapper, FormTemplate } from '../src';
 import { createTheme } from '@mui/material/styles';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import Typography from '@mui/material/Typography';
 import demoSchema from '../../../shared/demoschema';
 import fieldArraySchema from './demo-schemas/field-array-schema';
-import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 
 import Button from '@mui/material/Button';
 import wizardSchema from './demo-schemas/wizard-schema';

packages/mui-component-mapper/package.json

@@ -42,7 +42,7 @@
     "@data-driven-forms/common": "*",
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@mui/lab": "^5.0.0-alpha.53",
+    "@mui/x-date-pickers": "^5.0.0-beta.0",
     "clsx": "^1.0.4",
     "date-fns": "^2.16.1",
     "lodash": "^4.17.21"

packages/mui-component-mapper/src/date-picker/date-picker.d.ts

@@ -1,13 +1,11 @@
-import { DatePickerProps as MuiDatePickerProps } from "@mui/lab/DatePicker";
+import { DatePickerProps as MuiDatePickerProps } from "@mui/x-date-pickers/DatePicker";
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
 import { GridProps } from "@mui/material";
-interface InternalDatePickerProps extends MuiDatePickerProps {
+type InternalDatePickerProps<TInputDate, TDate> = MuiDatePickerProps<TInputDate, TDate> & {
   FormFieldGridProps: GridProps;
-  DatePickerProps: MuiDatePickerProps;
 }
 
-export type DatePickerProps = InternalDatePickerProps & UseFieldApiComponentConfig;
-
-declare const DatePicker: React.ComponentType<DatePickerProps>;
+export type DatePickerProps<TInputDate, TDate> = InternalDatePickerProps<TInputDate, TDate> & UseFieldApiComponentConfig;
+declare const DatePicker: React.ComponentType<DatePickerProps<any, any>>;
 
 export default DatePicker;

packages/mui-component-mapper/src/date-picker/date-picker.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { DatePicker as MUIDatePicker } from '@mui/lab';
+import { DatePicker as MUIDatePicker } from '@mui/x-date-pickers';
 
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';

packages/mui-component-mapper/src/tests/form-fields.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormRenderer, componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
-import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

packages/mui-component-mapper/src/time-picker/time-picker.d.ts

@@ -1,8 +1,8 @@
 import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
-import { TimePickerProps as MuiTimePickerProps } from '@mui/lab';
+import { TimePickerProps as MuiTimePickerProps } from '@mui/x-date-pickers';
 import { ReactNode } from "react";
 import { GridProps } from "@mui/material";
-interface InternalTimePickerProps extends MuiTimePickerProps {
+interface InternalTimePickerProps extends MuiTimePickerProps<unknown, unknown> {
   isReadOnly?: boolean;
   isDisabled?: boolean;
   isRequired?: boolean;

packages/mui-component-mapper/src/time-picker/time-picker.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TimePicker as MUITimePicker } from '@mui/lab';
+import { TimePicker as MUITimePicker } from '@mui/x-date-pickers';
 
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';

packages/react-renderer-demo/src/examples/components/conditions/is-function.js

@@ -6,8 +6,8 @@ import DatePicker from '@data-driven-forms/mui-component-mapper/date-picker';
 import PlainText from '@data-driven-forms/mui-component-mapper/plain-text';
 import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
 
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
-import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/x-date-pickers/LocalizationProvider';
+import AdapterDateFns from '@mui/x-date-pickers/AdapterDateFns';
 
 const calculateAge = (birthday) => {
   let ageDifMs = Date.now() - birthday;

packages/react-renderer-demo/src/stackblitz-templates/mui-templates.js

@@ -14,8 +14,8 @@ import { render } from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer/form-renderer';
 import FormTemplate from '@data-driven-forms/mui-component-mapper/form-template';
 import componentMapper from '@data-driven-forms/mui-component-mapper/component-mapper';
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
-import AdapterDateFns from '@mui/lab/AdapterDateFns';
+import LocalizationProvider from '@mui/x-date-pickers/LocalizationProvider';
+import AdapterDateFns from '@mui/x-date-pickers/AdapterDateFns';
 
 import schema from './schema'
 
@@ -73,7 +73,7 @@ export const dependencies = {
   '@data-driven-forms/mui-component-mapper': 'latest',
   '@data-driven-forms/common': 'latest',
   '@mui/icons-material': 'latest',
-  '@mui/lab': 'latest',
+  '@mui/x-date-pickers': 'latest',
   '@mui/material': 'latest',
   '@mui/styles': 'latest',
   'prop-types': 'latest',