feat: support ref (#435)

* feat: support ref

* test: fix test case

Author: MadCcc

src/Menu.tsx

@@ -27,6 +27,7 @@ import { PathRegisterContext, PathUserContext } from './context/PathContext';
 import useKeyRecords, { OVERFLOW_KEY } from './hooks/useKeyRecords';
 import { IdContext } from './context/IdContext';
 import PrivateContext from './context/PrivateContext';
+import { composeRef } from 'rc-util/lib/ref';
 
 /**
  * Menu modify after refactor:
@@ -145,7 +146,7 @@ interface LegacyMenuProps extends MenuProps {
   openAnimation?: string;
 }
 
-const Menu: React.FC<MenuProps> = props => {
+const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) => {
   const {
     prefixCls = 'rc-menu',
     style,
@@ -223,6 +224,7 @@ const Menu: React.FC<MenuProps> = props => {
   const [mounted, setMounted] = React.useState(false);
 
   const containerRef = React.useRef<HTMLUListElement>();
+  const mergedRef = composeRef(containerRef, ref);
 
   const uuid = useUUID(id);
 
@@ -488,7 +490,7 @@ const Menu: React.FC<MenuProps> = props => {
   const container = (
     <Overflow
       id={id}
-      ref={containerRef as any}
+      ref={mergedRef as any}
       prefixCls={`${prefixCls}-overflow`}
       component="ul"
       itemComponent={MenuItem}
@@ -591,6 +593,6 @@ const Menu: React.FC<MenuProps> = props => {
       </IdContext.Provider>
     </PrivateContext.Provider>
   );
-};
+});
 
 export default Menu;

tests/Menu.spec.js

@@ -647,5 +647,17 @@ describe('Menu', () => {
       jest.useRealTimers();
     });
   });
+
+  it('should support ref', () => {
+    const menuRef = React.createRef();
+
+    mount(
+      <Menu ref={menuRef}>
+        <MenuItem key="light">Light</MenuItem>
+      </Menu>,
+    );
+
+    expect(menuRef.current).toBeTruthy();
+  });
 });
 /* eslint-enable */

tests/SubMenu.spec.js

@@ -366,7 +366,7 @@ describe('SubMenu', () => {
     );
 
     const wrapper = mount(<App show />);
-    expect(wrapper.find('Menu ul').prop('style')).toEqual({
+    expect(wrapper.find('.rc-menu').first().prop('style')).toEqual({
       backgroundColor: 'black',
     });
   });