refactor: Remove all coupling code (#218)

* chore: bump rc-trigger

* refactor: clean up content

* test: test fix

Author: zombieJ

assets/index.less

@@ -28,7 +28,7 @@
     display: none;
   }
 
-  &-menu {
+  .rc-menu {
     outline: none;
     position: relative;
     list-style-type: none;

package.json

@@ -55,16 +55,17 @@
     "rc-menu": "^9.5.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
+    "regenerator-runtime": "^0.13.9",
     "typescript": "^4.0.2"
   },
   "peerDependencies": {
     "react": ">=16.11.0",
     "react-dom": ">=16.11.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.10.1",
+    "@babel/runtime": "^7.18.3",
     "classnames": "^2.2.6",
-    "rc-trigger": "^5.0.4",
+    "rc-trigger": "^5.3.1",
     "rc-util": "^5.17.0"
   }
 }

src/Dropdown.tsx

@@ -10,7 +10,6 @@ import type {
 } from 'rc-trigger/lib/interface';
 import Placements from './placements';
 import useAccessibility from './hooks/useAccessibility';
-import { composeRef, supportRef } from 'rc-util/lib/ref';
 
 export interface DropdownProps
   extends Pick<
@@ -70,14 +69,10 @@ function Dropdown(props: DropdownProps, ref) {
   const triggerRef = React.useRef(null);
   React.useImperativeHandle(ref, () => triggerRef.current);
 
-  const menuRef = React.useRef(null);
-  const menuClassName = `${prefixCls}-menu`;
-
   useAccessibility({
     visible: mergedVisible,
     setTriggerVisible,
     triggerRef,
-    menuRef,
     onVisibleChange: props.onVisibleChange,
     autoFocus,
   });
@@ -95,15 +90,12 @@ function Dropdown(props: DropdownProps, ref) {
 
   const onClick = (e) => {
     const { onOverlayClick } = props;
-    const overlayProps = getOverlayElement().props;
     setTriggerVisible(false);
 
+    console.log('!!!!!!!!!!!!', onOverlayClick);
     if (onOverlayClick) {
       onOverlayClick(e);
     }
-    if (overlayProps.onClick) {
-      overlayProps.onClick(e);
-    }
   };
 
   const onVisibleChange = (newVisible: boolean) => {
@@ -116,23 +108,11 @@ function Dropdown(props: DropdownProps, ref) {
 
   const getMenuElement = () => {
     const overlayElement = getOverlayElement();
-    // @ts-ignore
-    const composedMenuRef = composeRef(menuRef, overlayElement.ref);
-
-    const extraOverlayProps = {
-      prefixCls: menuClassName,
-      ['data-dropdown-inject']: true,
-      onClick,
-      ref: supportRef(overlayElement) ? composedMenuRef : undefined,
-    };
-    if (typeof overlayElement.type === 'string') {
-      delete extraOverlayProps.prefixCls;
-      delete extraOverlayProps['data-dropdown-inject'];
-    }
+
     return (
       <>
         {arrow && <div className={`${prefixCls}-arrow`} />}
-        {React.cloneElement(overlayElement, extraOverlayProps)}
+        {overlayElement}
       </>
     );
   };
@@ -199,6 +179,7 @@ function Dropdown(props: DropdownProps, ref) {
       stretch={getMinOverlayWidthMatchTrigger() ? 'minWidth' : ''}
       popup={getMenuElementOrLambda()}
       onPopupVisibleChange={onVisibleChange}
+      onPopupClick={onClick}
       getPopupContainer={getPopupContainer}
     >
       {renderChildren()}

src/hooks/useAccessibility.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import raf from 'rc-util/lib/raf';
+import { getFocusNodeList } from 'rc-util/lib/Dom/focus';
 
 const { ESC, TAB } = KeyCode;
 
 interface UseAccessibilityProps {
   visible: boolean;
   setTriggerVisible: (visible: boolean) => void;
   triggerRef: React.RefObject<any>;
-  menuRef: React.RefObject<HTMLUListElement>;
   onVisibleChange?: (visible: boolean) => void;
   autoFocus?: boolean;
 }
@@ -17,7 +17,6 @@ export default function useAccessibility({
   visible,
   setTriggerVisible,
   triggerRef,
-  menuRef,
   onVisibleChange,
   autoFocus,
 }: UseAccessibilityProps) {
@@ -34,23 +33,35 @@ export default function useAccessibility({
   };
 
   const focusMenu = () => {
-    menuRef.current?.focus?.();
-    focusMenuRef.current = true;
+    const elements = getFocusNodeList(triggerRef.current?.popupRef?.current?.getElement?.());
+    const firstElement = elements[0];
+
+    if (firstElement?.focus) {
+      firstElement.focus();
+      focusMenuRef.current = true;
+      return true;
+    }
+    return false;
   };
 
   const handleKeyDown = (event) => {
     switch (event.keyCode) {
       case ESC:
         handleCloseMenuAndReturnFocus();
         break;
-      case TAB:
-        if (!focusMenuRef.current && menuRef.current?.focus) {
+      case TAB: {
+        let focusResult: boolean = false;
+        if (!focusMenuRef.current) {
+          focusResult = focusMenu();
+        }
+
+        if (focusResult) {
           event.preventDefault();
-          focusMenu();
         } else {
           handleCloseMenuAndReturnFocus();
         }
         break;
+      }
     }
   };
 

tests/__snapshots__/basic.test.js.snap

@@ -13,15 +13,14 @@ Array [
       style="opacity: 0;"
     >
       <ul
-        class="rc-dropdown-menu rc-dropdown-menu-root rc-dropdown-menu-vertical"
-        data-dropdown-inject="true"
+        class="rc-menu rc-menu-root rc-menu-vertical"
         data-menu-list="true"
         role="menu"
         style="width: 140px;"
         tabindex="0"
       >
         <li
-          class="rc-dropdown-menu-item"
+          class="rc-menu-item"
           data-menu-id="rc-menu-uuid-test-1"
           role="menuitem"
           tabindex="-1"
@@ -33,10 +32,10 @@ Array [
           </span>
         </li>
         <li
-          class="rc-dropdown-menu-item-divider"
+          class="rc-menu-item-divider"
         />
         <li
-          class="rc-dropdown-menu-item"
+          class="rc-menu-item"
           data-menu-id="rc-menu-uuid-test-2"
           role="menuitem"
           tabindex="-1"

tests/basic.test.js

@@ -66,15 +66,12 @@ describe('dropdown', () => {
 
   it('simply works', async () => {
     let clicked;
-    let overlayClicked;
 
     function onClick({ key }) {
       clicked = key;
     }
 
-    function onOverlayClick({ key }) {
-      overlayClicked = key;
-    }
+    const onOverlayClick = jest.fn();
 
     const menu = (
       <Menu style={{ width: 140 }} onClick={onClick}>
@@ -100,7 +97,7 @@ describe('dropdown', () => {
 
     dropdown.find('.my-menuitem').simulate('click');
     expect(clicked).toBe('1');
-    expect(overlayClicked).toBe('1');
+    expect(onOverlayClick).toHaveBeenCalled();
     expect(getPopupDomNode(dropdown).classList.contains('rc-dropdown-hidden')).toBe(true);
   });
 

tests/setup.js

@@ -4,6 +4,8 @@ global.requestAnimationFrame =
     return setTimeout(cb, 0);
   };
 
+require('regenerator-runtime/runtime');
+
 const Enzyme = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');