[Drawer] Add missing JoyDrawer in theme components (#39074)

Co-authored-by: siriwatknp <[email protected]>
mui · Sep 26, 2023 · 59d4e52 · 59d4e52
1 parent 5a1e257
commit 59d4e52
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/packages/mui-joy/src/Drawer/DrawerProps.ts b/packages/mui-joy/src/Drawer/DrawerProps.ts
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { OverridableStringUnion, OverrideProps } from '@mui/types';
 import { ColorPaletteProp, VariantProp, ApplyColorInversion } from '../styles/types';
-import { ModalOwnProps } from '../Modal';
+import { ModalOwnProps } from '../Modal/ModalProps';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export type DrawerSlot = 'root' | 'label' | 'action' | 'startDecorator' | 'endDecorator';
+export type DrawerSlot = 'root' | 'backdrop' | 'content';
 
 export interface DrawerSlots {
   /**

diff --git a/packages/mui-joy/src/styles/components.d.ts b/packages/mui-joy/src/styles/components.d.ts
@@ -101,6 +101,7 @@ import {
   DialogTitleOwnerState,
   DialogTitleSlot,
 } from '../DialogTitle/DialogTitleProps';
+import { DrawerProps, DrawerOwnerState, DrawerSlot } from '../Drawer/DrawerProps';
 import {
   ScopedCssBaselineProps,
   ScopedCssBaselineOwnerState,
@@ -349,6 +350,10 @@ export interface Components<Theme = unknown> {
     defaultProps?: Partial<DialogTitleProps>;
     styleOverrides?: StyleOverrides<DialogTitleSlot, DialogTitleOwnerState, Theme>;
   };
+  JoyDrawer?: {
+    defaultProps?: Partial<DrawerProps>;
+    styleOverrides?: StyleOverrides<DrawerSlot, DrawerOwnerState, Theme>;
+  };
   JoyScopedCssBaseline?: {
     defaultProps?: Partial<ScopedCssBaselineProps>;
     styleOverrides?: StyleOverrides<ScopedCssBaselineSlot, ScopedCssBaselineOwnerState, Theme>;

diff --git a/packages/mui-joy/src/styles/extendTheme.spec.ts b/packages/mui-joy/src/styles/extendTheme.spec.ts
@@ -27,6 +27,7 @@ import { DialogActionsOwnerState } from '@mui/joy/DialogActions';
 import { DialogContentOwnerState } from '@mui/joy/DialogContent';
 import { DialogTitleOwnerState } from '@mui/joy/DialogTitle';
 import { DividerOwnerState } from '@mui/joy/Divider';
+import { DrawerOwnerState } from '@mui/joy/Drawer';
 import { FormControlOwnerState } from '@mui/joy/FormControl';
 import { FormHelperTextOwnerState } from '@mui/joy/FormHelperText';
 import { FormLabelOwnerState } from '@mui/joy/FormLabel';
@@ -634,6 +635,26 @@ extendTheme({
         },
       },
     },
+    JoyDrawer: {
+      defaultProps: {
+        variant: 'plain',
+        color: 'neutral',
+      },
+      styleOverrides: {
+        root: ({ ownerState }) => {
+          expectType<DrawerOwnerState & Record<string, unknown>, typeof ownerState>(ownerState);
+          return {};
+        },
+        backdrop: ({ ownerState }) => {
+          expectType<DrawerOwnerState & Record<string, unknown>, typeof ownerState>(ownerState);
+          return {};
+        },
+        content: ({ ownerState }) => {
+          expectType<DrawerOwnerState & Record<string, unknown>, typeof ownerState>(ownerState);
+          return {};
+        },
+      },
+    },
     JoyFormControl: {
       styleOverrides: {
         root: ({ ownerState }) => {