@mui/lab to @mui/x-date-pickers transition

package.json

@@ -25,7 +25,8 @@
     "@mui/lab": "^5.0.0-alpha.67",
     "@mui/material": "^5.3.0",
     "@mui/styles": "^5.3.0",
-    "@mui/x-data-grid": "^5.3.0"
+    "@mui/x-data-grid": "^5.3.0",
+    "@mui/x-date-pickers": "^5.0.0-alpha.5"
   },
   "devDependencies": {
     "@babel/core": "^7.16.10",

src/components/DatePicker.tsx

@@ -1,10 +1,13 @@
-import MuiDatePicker, { DatePickerProps as MuiDatepickerProps } from '@mui/lab/DatePicker';
+import {
+  DatePicker as MuiDatePicker,
+  DatePickerProps as MuiDatepickerProps,
+} from '@mui/x-date-pickers/DatePicker';
 import Calendar from '../icons/Calendar';
 import TextField, { TextFieldProps } from './TextField';
 import { forwardRef, Ref } from 'react';
 
 export interface DatePickerProps<TDate>
-  extends Omit<MuiDatepickerProps<TDate>, 'renderInput' | 'InputProps'> {
+  extends Omit<MuiDatepickerProps<TDate, TDate>, 'renderInput' | 'InputProps'> {
   allowAllYears?: boolean;
   InputProps?: TextFieldProps;
 }

src/components/TimePicker.tsx

@@ -1,14 +1,18 @@
-import MuiTimePicker, { TimePickerProps as MuiTimePickerProps } from '@mui/lab/TimePicker';
+import {
+  TimePicker as MuiTimePicker,
+  TimePickerProps as MuiTimePickerProps,
+} from '@mui/x-date-pickers/TimePicker';
 import TextField, { TextFieldProps } from './TextField';
 import { forwardRef, Ref } from 'react';
 
-export interface TimePickerProps extends Omit<MuiTimePickerProps, 'renderInput' | 'InputProps'> {
+export interface TimePickerProps<TDate>
+  extends Omit<MuiTimePickerProps<TDate, TDate>, 'renderInput' | 'InputProps'> {
   InputProps?: TextFieldProps;
   'data-testid'?: string;
 }
 
 const TimePicker = (
-  { ampm = false, InputProps = {}, ...props }: TimePickerProps,
+  { ampm = false, InputProps = {}, ...props }: TimePickerProps<Date>,
   ref: Ref<HTMLInputElement>
 ): JSX.Element => {
   return (

src/index.ts

@@ -14,7 +14,7 @@ export { default as Collapse } from '@mui/material/Collapse';
 export { default as Container } from '@mui/material/Container';
 export { default as DataGrid } from './components/DataGrid';
 export { default as DatePicker } from './components/DatePicker';
-export { default as LocalizationProvider } from '@mui/lab/LocalizationProvider';
+export { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 export { default as Dialog } from './components/Dialog';
 export { default as Divider } from '@mui/material/Divider';
 export { default as Drawer } from '@mui/material/Drawer';

stories/Inputs/TimePicker.stories.tsx

@@ -87,8 +87,8 @@ Please install any of these date management libraries, @date-io adapter for it a
   },
 } as Meta;
 
-const Template: Story<TimePickerProps> = (args) => {
-  const [value, setValue] = useState<unknown>(new Date());
+const Template: Story<TimePickerProps<Date>> = (args) => {
+  const [value, setValue] = useState<Date | null>(new Date());
 
   return (
     <Box sx={{ width: '150px' }}>