fix: pass id to panel

Author: MuxinFeng

src/DrawerPanel.tsx

@@ -17,6 +17,7 @@ export interface DrawerPanelEvents {
 export interface DrawerPanelProps extends DrawerPanelEvents {
   prefixCls: string;
   className?: string;
+  id?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
   containerRef?: React.Ref<HTMLDivElement>;
@@ -29,6 +30,7 @@ const DrawerPanel = (props: DrawerPanelProps) => {
     style,
     children,
     containerRef,
+    id,
     onMouseEnter,
     onMouseOver,
     onMouseLeave,
@@ -51,6 +53,7 @@ const DrawerPanel = (props: DrawerPanelProps) => {
   return (
     <>
       <div
+        id={id}
         className={classNames(`${prefixCls}-content`, className)}
         style={{
           ...style,

src/DrawerPopup.tsx

@@ -295,6 +295,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
             {...pickAttrs(props, { data: true })}
           >
             <DrawerPanel
+              id={id}
               containerRef={motionRef}
               prefixCls={prefixCls}
               className={className}
@@ -321,7 +322,6 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
   return (
     <DrawerContext.Provider value={mergedContext}>
       <div
-        id={id}
         className={classNames(
           prefixCls,
           `${prefixCls}-${placement}`,

tests/index.spec.tsx

@@ -385,11 +385,14 @@ describe('rc-drawer-menu', () => {
     expect(leave).toHaveBeenCalled();
   });
 
-  it('pass id props to Drawer', () => {
-    const { unmount } = render(<Drawer prefixCls='customer-prefixCls' id="muxin" open/>);
+  it('pass id & className props to Panel', () => {
+    const { unmount } = render(<Drawer className='customer-className' id="customer-id" open/>);
     expect(
-      document.querySelector('.customer-prefixCls')
-    ).toHaveAttribute('id', 'muxin');
+      document.querySelector('.rc-drawer-content')
+    ).toHaveClass('customer-className');
+    expect(
+      document.querySelector('.rc-drawer-content')
+    ).toHaveAttribute('id', 'customer-id');
     unmount();
   });
 });