feat: upgrading DatePicker version

packages/odyssey-react-mui/package.json

@@ -66,7 +66,7 @@
     "@mui/lab": "^5.0.0-alpha.117",
     "@mui/material": "^5.12.3",
     "@mui/utils": "^5.11.2",
-    "@mui/x-date-pickers": "^5.0.15",
+    "@mui/x-date-pickers": "^6.11.0",
     "@okta/odyssey-design-tokens": "workspace:*",
     "date-fns": "^2.30.0",
     "i18next": "^22.4.15",

packages/odyssey-react-mui/src/labs/DatePicker.tsx

@@ -10,39 +10,72 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputBase } from "@mui/material";
 import {
   DatePicker as MuiDatePicker,
   DatePickerProps as MuiDatePickerProps,
 } from "@mui/x-date-pickers";
-import { useCallback } from "react";
+import { InputAdornment } from "@mui/material";
+import { Button } from "../Button";
+import { ArrowLeftIcon, ArrowRightIcon, CalendarIcon, ChevronDownIcon } from "../icons.generated";
+import { TextField } from "../TextField";
+import { forwardRef, memo, useCallback, useState } from "react";
 
-export type DatePickerProps<TInputDate, TDate> = {
-  label: MuiDatePickerProps<TInputDate, TDate>["label"];
-  onChange: MuiDatePickerProps<TInputDate, TDate>["onChange"];
-  value: MuiDatePickerProps<TInputDate, TDate>["value"];
+export type DatePickerProps<Date> = {
+  label: string;
+  onChange: MuiDatePickerProps<Date>["onChange"];
+  value: MuiDatePickerProps<Date>["value"];
 };
+const DatePicker = forwardRef<HTMLInputElement, DatePickerProps<Date>>(
+  (
+    {
+      label,
+      onChange,
+      value = null,
+    }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
 
-export const DatePicker = <TInputDate, TDate>({
-  label,
-  onChange,
-  value = null,
-}: DatePickerProps<TInputDate, TDate>) => {
-  const renderInput = useCallback(({ InputProps, ...props }) => {
-    const combinedProps = {
-      ...InputProps,
-      ...props,
-    };
+    const renderFieldComponent = useCallback(({ label, onChange, value }) => {
+      return (
+        <TextField
+          endAdornment={
+            <InputAdornment position="end">
+              <Button
+                ariaLabel="Calendar"
+                label=""
+                size="small"
+                startIcon={<CalendarIcon />}
+                variant="floating"
+                onClick={() => setIsOpen(true)}
+              />
+            </InputAdornment>
+          }
+          hint="MM/DD/YYYY"
+          label={label}
+          onChange={onChange}
+          ref={ref}
+          value={value}
+        />
+      );
+    }, [label, onChange, value]);
 
-    return <InputBase {...combinedProps} />;
-  }, []);
+    return (
+      <MuiDatePicker
+        label={label}
+        onChange={onChange}
+        onClose={() => setIsOpen(false)}
+        open={isOpen}
+        value={value}
+        slots={{
+          field: renderFieldComponent,
+          leftArrowIcon: () => <ArrowLeftIcon />,
+          rightArrowIcon: () => <ArrowRightIcon />,
+          switchViewIcon: () => <ChevronDownIcon />,
+        }}
+      />
+    );
+  });
 
-  return (
-    <MuiDatePicker
-      label={label}
-      onChange={onChange}
-      renderInput={renderInput}
-      value={value}
-    />
-  );
-};
+const MemoizedDatePicker = memo(DatePicker);
+MemoizedDatePicker.displayName = "DatePicker";
+
+export { MemoizedDatePicker as DatePicker };

packages/odyssey-react-mui/src/labs/DatePicker.types.ts

@@ -18,7 +18,7 @@ import { PickersComponentNameToClassKey } from "@mui/x-date-pickers/themeAugment
 declare module "@mui/material/styles" {
   interface ComponentNameToClassKey extends PickersComponentNameToClassKey {
     PrivatePickersYear:
-      | PickersComponentNameToClassKey["PrivatePickersYear"]
-      | "button";
+    | PickersComponentNameToClassKey["MuiPickersYear"]
+    | "button";
   }
 }

packages/odyssey-react-mui/src/labs/datePickerTheme.tsx

@@ -11,12 +11,6 @@
  */
 
 import { CSSInterpolation } from "@mui/material/styles";
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  CalendarIcon,
-  ChevronDownIcon,
-} from "../icons.generated";
 import { createOdysseyMuiTheme } from "../theme";
 import { ThemeOptions } from "@mui/material";
 import * as Tokens from "@okta/odyssey-design-tokens";
@@ -125,9 +119,9 @@ const yearCheckStyles: StateStyles = {
 
 export const datePickerTheme: ThemeOptions = {
   components: {
-    MuiCalendarPicker: {
+    MuiDateCalendar: {
       styleOverrides: {
-        root: ({ theme }) => ({
+        root: ({ theme }: any) => ({
           borderColor: theme.palette.divider,
           borderStyle: theme.mixins.borderStyle,
           borderWidth: theme.mixins.borderWidth,
@@ -138,32 +132,18 @@ export const datePickerTheme: ThemeOptions = {
         }),
       },
     },
-    MuiCalendarOrClockPicker: {
+    MuiPickersLayout: {
       styleOverrides: {
-        root: () => ({
+        contentWrapper: () => ({
           "& > div": {
             width: `${(296 / 16) * (16 / 14)}rem`,
           },
         }),
       },
-      defaultProps: {
-        components: {
-          LeftArrowIcon: ArrowLeftIcon,
-          RightArrowIcon: ArrowRightIcon,
-          SwitchViewIcon: ChevronDownIcon,
-        },
-      },
-    },
-    MuiDesktopDatePicker: {
-      defaultProps: {
-        components: {
-          OpenPickerIcon: CalendarIcon,
-        },
-      },
     },
-    MuiDayPicker: {
+    MuiDayCalendar: {
       styleOverrides: {
-        header: ({ theme }) => ({
+        header: ({ theme }: any) => ({
           gap: theme.spacing(1),
           justifyContent: "space-between",
           paddingLeft: theme.spacing(popupSpacingValue),
@@ -172,7 +152,7 @@ export const datePickerTheme: ThemeOptions = {
         slideTransition: () => ({
           minHeight: `${(214 / 16) * (16 / 14)}rem`,
         }),
-        weekContainer: ({ theme }) => ({
+        weekContainer: ({ theme }: any) => ({
           gap: theme.spacing(1),
           justifyContent: "space-between",
           marginBottom: theme.spacing(1),
@@ -185,7 +165,7 @@ export const datePickerTheme: ThemeOptions = {
             marginBottom: 0,
           },
         }),
-        weekDayLabel: ({ theme }) => ({
+        weekDayLabel: ({ theme }: any) => ({
           color: theme.palette.grey[900],
           flexBasis: theme.spacing(6),
           flexShrink: 0,
@@ -201,14 +181,16 @@ export const datePickerTheme: ThemeOptions = {
     },
     MuiDatePicker: {
       defaultProps: {
-        PopperProps: {
-          popperOptions: {
-            placement: "auto-start",
+        slotProps: {
+          popper: {
+            popperOptions: {
+              placement: "auto-start",
+            },
           },
         },
         showDaysOutsideCurrentMonth: true,
         views: ["year", "day"],
-      },
+      }
     },
     MuiPickersCalendarHeader: {
       styleOverrides: {
@@ -275,20 +257,17 @@ export const datePickerTheme: ThemeOptions = {
     MuiPickersPopper: {
       styleOverrides: {
         paper: ({ theme }) => ({
-          boxShadow: `0 ${(1 / 16) * (16 / 14)}rem ${
-            (4 / 16) * (16 / 14)
-          }rem rgba(29, 29, 33, 0.08), 0 ${(4 / 16) * (16 / 14)}rem ${
-            (10 / 16) * (16 / 14)
-          }rem rgba(29, 29, 33, 0.08), 0 ${(8 / 16) * (16 / 14)}rem ${
-            (30 / 16) * (16 / 14)
-          }rem rgba(29, 29, 33, 0.1)`,
+          boxShadow: `0 ${(1 / 16) * (16 / 14)}rem ${(4 / 16) * (16 / 14)
+            }rem rgba(29, 29, 33, 0.08), 0 ${(4 / 16) * (16 / 14)}rem ${(10 / 16) * (16 / 14)
+            }rem rgba(29, 29, 33, 0.08), 0 ${(8 / 16) * (16 / 14)}rem ${(30 / 16) * (16 / 14)
+            }rem rgba(29, 29, 33, 0.1)`,
           marginTop: theme.spacing(1),
         }),
       },
     },
-    MuiYearPicker: {
+    MuiYearCalendar: {
       styleOverrides: {
-        root: ({ theme }) => ({
+        root: ({ theme }: any) => ({
           alignItems: "flex-start",
           flexDirection: "column",
           flexWrap: "nowrap",
@@ -300,7 +279,7 @@ export const datePickerTheme: ThemeOptions = {
         }),
       },
     },
-    PrivatePickersYear: {
+    MuiPickersYear: {
       styleOverrides: {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error TEMP. Arrays are valid styles return values for Emotion.
@@ -330,7 +309,7 @@ export const datePickerTheme: ThemeOptions = {
         root: () => ({
           width: "100%",
         }),
-        selected: ({ theme }) => ({
+        selected: ({ theme }: any) => ({
           "&, &:focus": yearStyles.selected({ theme }),
           "&:hover": yearStyles.hoverSelected({ theme }),
           "&::after": yearCheckStyles.default({ theme }),

packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx

@@ -23,7 +23,7 @@ import {
 
 import { MuiThemeDecorator } from "../../../../.storybook/components";
 
-const storybookMeta: Meta<DatePickerProps<unknown, unknown>> = {
+const storybookMeta: Meta<DatePickerProps<Date>> = {
   title: "Labs Components/DatePicker",
   component: DatePicker,
   argTypes: {
@@ -45,13 +45,13 @@ const storybookMeta: Meta<DatePickerProps<unknown, unknown>> = {
 
 export default storybookMeta;
 
-export const DatePickerStandard: StoryObj<DatePickerProps<unknown, unknown>> = {
+export const DatePickerStandard: StoryObj<DatePickerProps<Date>> = {
   render: function C(props) {
-    const [value, setValue] = useState<unknown>("09/05/1977");
+    const [value, setValue] = useState<Date | null | undefined>();
     const datePickerProps = useMemo(
       () => ({
         ...props,
-        onChange: (newValue: unknown) => setValue(newValue),
+        onChange: (newValue: Date | null) => setValue(newValue),
         value,
       }),
       [props, value]