feat: add DatePicker styles to Labs (#1672)

* fix: date picker style types incorrect

* feat: wip styled DatePicker to match wip design

* feat: updated dependencies for MUI and MUI-X

* fix: added more styles for DatePicker

* feat: upgrade x-date-picker version

* feat: update DatePicker year styles

* feat: upgrade TypeScript

* fix: adjusted DatePicker styles

* fix: adjusted DatePicker popover alignment

* fix: added year and month styling for DatePicker

* fix: ci passes

* fix: tweaked month styles because of shorthand and fixed view ordering

* fix: story naming

* fix: month and year styling

* fix: year defocus styling

packages/babel-plugin-fully-specified/package.json

@@ -27,6 +27,6 @@
     "@okta/odyssey-typescript": "workspace:*",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.0.3",
-    "typescript": "^4.8.3"
+    "typescript": "^4.9.4"
   }
 }

packages/browserslist-config-odyssey/package.json

@@ -19,6 +19,6 @@
   "devDependencies": {
     "@okta/odyssey-lifecycle": "workspace:*",
     "@okta/odyssey-typescript": "workspace:*",
-    "typescript": "^4.8.3"
+    "typescript": "^4.9.4"
   }
 }

packages/odyssey-babel-preset/package.json

@@ -26,6 +26,6 @@
     "@okta/odyssey-lifecycle": "workspace:*",
     "@okta/odyssey-typescript": "workspace:*",
     "@types/babel__core": "^7.1.19",
-    "typescript": "^4.8.3"
+    "typescript": "^4.9.4"
   }
 }

packages/odyssey-react-labs/package.json

@@ -19,9 +19,9 @@
     "directory": "packages/odyssey-react-mui"
   },
   "dependencies": {
-    "@mui/material": "^5.10.16",
-    "@mui/x-date-pickers": "^5.0.4",
-    "@okta/odyssey-react-mui": "^0.16.1",
+    "@mui/material": "^5.11.6",
+    "@mui/x-date-pickers": "^5.0.15",
+    "@okta/odyssey-react-mui": "workspace:*",
     "date-fns": "^2.29.3"
   },
   "devDependencies": {
@@ -55,7 +55,7 @@
     "react-dom": "^17.0.2",
     "regenerator-runtime": "^0.13.7",
     "stylelint": "^14.13.0",
-    "typescript": "^4.8.3"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11",

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

@@ -10,24 +10,15 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import type {
-  ComponentsProps,
-  ComponentsOverrides,
-  ComponentsVariants,
-  Theme,
-} from "@mui/material/styles";
+// This has to be imported separately for theme types, so it's been separated out to make that clear.
+import "@mui/x-date-pickers/themeAugmentation";
+
+import { PickersComponentNameToClassKey } from "@mui/x-date-pickers/themeAugmentation";
 
 declare module "@mui/material/styles" {
-  interface Components {
-    MuiPickersDay?: {
-      defaultProps?: ComponentsProps["MuiStepContent"];
-      styleOverrides?: ComponentsOverrides<Theme>["MuiStepContent"];
-      variants?: ComponentsVariants["MuiStepContent"];
-    };
-    PrivatePickersYear?: {
-      defaultProps?: ComponentsProps["MuiStepContent"];
-      styleOverrides?: ComponentsOverrides<Theme>["MuiStepContent"];
-      variants?: ComponentsVariants["MuiStepContent"];
-    };
+  interface ComponentNameToClassKey extends PickersComponentNameToClassKey {
+    PrivatePickersYear:
+      | PickersComponentNameToClassKey["PrivatePickersYear"]
+      | "button";
   }
 }