feat: support id prop (#421)

* featL support id prop

* test: add test

* 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

@@ -6,7 +6,8 @@ import pickAttrs from 'rc-util/lib/pickAttrs';
 import * as React from 'react';
 import type { DrawerContextProps } from './context';
 import DrawerContext from './context';
-import DrawerPanel, { DrawerPanelEvents } from './DrawerPanel';
+import type { DrawerPanelEvents } from './DrawerPanel';
+import DrawerPanel from './DrawerPanel';
 import { parseWidthHeight } from './util';
 
 const sentinelStyle: React.CSSProperties = {
@@ -39,6 +40,7 @@ export interface DrawerPopupProps extends DrawerPanelEvents {
 
   // Drawer
   placement?: Placement;
+  id?: string;
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
@@ -81,6 +83,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
 
     // Drawer
     className,
+    id,
     style,
     motion,
     width,
@@ -292,6 +295,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
             {...pickAttrs(props, { data: true })}
           >
             <DrawerPanel
+              id={id}
               containerRef={motionRef}
               prefixCls={prefixCls}
               className={className}

tests/index.spec.tsx

@@ -384,4 +384,15 @@ describe('rc-drawer-menu', () => {
     fireEvent.mouseLeave(baseElement.querySelector('.rc-drawer-content'));
     expect(leave).toHaveBeenCalled();
   });
+
+  it('pass id & className props to Panel', () => {
+    const { unmount } = render(<Drawer className='customer-className' id="customer-id" open/>);
+    expect(
+      document.querySelector('.rc-drawer-content')
+    ).toHaveClass('customer-className');
+    expect(
+      document.querySelector('.rc-drawer-content')
+    ).toHaveAttribute('id', 'customer-id');
+    unmount();
+  });
 });