fix: align dropdown docs and open class handling

Author: afc163

.gitignore

@@ -36,3 +36,4 @@ pnpm-lock.yaml
 .dumi/tmp-test
 .dumi/tmp-production
 .docs
+docs-dist

README.md

@@ -73,7 +73,7 @@ Additional props are passed to the underlying [`@rc-component/trigger`](https://
 | --- | --- | --- | --- |
 | alignPoint | Align popup to the click point | boolean | false |
 | animation | Popup animation name | string | - |
-| defaultVisible | Initial visible state | boolean | - |
+| arrow | Whether to show dropdown arrow | boolean | false |
 | getPopupContainer | Container where dropdown is rendered | `(node: HTMLElement) => HTMLElement` | `() => document.body` |
 | minOverlayWidthMatchTrigger | Whether overlay width should be at least trigger width | boolean | `true` unless `alignPoint` is set |
 | openClassName | Class name added to trigger when dropdown is open | string | `${prefixCls}-open` |
@@ -85,7 +85,7 @@ Additional props are passed to the underlying [`@rc-component/trigger`](https://
 | transitionName | Popup transition class name | string | - |
 | trigger | Trigger action | `ActionType \| ActionType[]` | `['hover']` |
 | visible | Controlled visible state | boolean | - |
-| onOverlayClick | Callback when overlay is clicked | `(event: React.MouseEvent) => void` | - |
+| onOverlayClick | Callback when overlay is clicked | `(event: Event) => void` | - |
 | onVisibleChange | Callback when visibility changes | `(visible: boolean) => void` | - |
 
 ## Development

README.zh-CN.md

@@ -28,7 +28,7 @@
 
 ## 特性
 
-- Built on `@rc-component/trigger`.
+- 基于 `@rc-component/trigger` 构建。
 - 支持悬停、单击、上下文菜单和自定义触发操作。
 - 接受 React 元素或渲染函数作为下拉覆盖。
 - 支持对齐点行为和触发宽度匹配。
@@ -72,20 +72,20 @@ npm start
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | alignPoint | 将弹层窗口与点击点对齐 | boolean | false |
-| 动画片 | 弹层动画名称 | string | - |
-| defaultVisible | 初始可见状态 | boolean | - |
+| animation | 弹层动画名称 | string | - |
+| arrow | 是否显示下拉箭头 | boolean | false |
 | getPopupContainer | 呈现下拉列表的容器 | `(node: HTMLElement) => HTMLElement` | `() => document.body` |
 | minOverlayWidthMatchTrigger | 覆盖宽度是否至少应为触发宽度 | boolean | `true` 除非设置了 `alignPoint` |
-| openClassName | 打开下拉菜单时添加到触发器的className称 | string | `${prefixCls}-open` |
-| overlay | Dropdown overlay | `React.ReactElement \| (() => React.ReactElement)` | - |
-| overlayClassName | 附加覆盖className称 | string | - |
+| openClassName | 打开下拉菜单时添加到触发器的类名 | string | `${prefixCls}-open` |
+| overlay | 下拉菜单内容 | `React.ReactElement \| (() => React.ReactElement)` | - |
+| overlayClassName | 附加弹层类名 | string | - |
 | overlayStyle | 叠加样式 | `React.CSSProperties` | - |
-| placement | Dropdown placement | string | `bottomLeft` |
-| prefixCls | 组件className前缀 | string | `rc-dropdown` |
-| transitionName | 弹层过渡className称 | string | - |
-| 扳机 | 触发动作 | `ActionType \| ActionType[]` | `['hover']` |
-| 可见的 | 受控可见状态 | boolean | - |
-| onOverlayClick | 点击覆盖时的回调 | `(event: React.MouseEvent) => void` | - |
+| placement | 下拉菜单位置 | string | `bottomLeft` |
+| prefixCls | 组件类名前缀 | string | `rc-dropdown` |
+| transitionName | 弹层过渡类名 | string | - |
+| trigger | 触发动作 | `ActionType \| ActionType[]` | `['hover']` |
+| visible | 受控可见状态 | boolean | - |
+| onOverlayClick | 点击下拉菜单内容时的回调 | `(event: Event) => void` | - |
 | onVisibleChange | 可见性变化时的回调 | `(visible: boolean) => void` | - |
 
 ## 本地开发

src/Dropdown.tsx

@@ -146,6 +146,14 @@ const Dropdown = React.forwardRef<TriggerRef, DropdownProps>((props, ref) => {
     className: childClassName,
     ref: composeRef(childRef, elementChild && getNodeRef(elementChild)),
   };
+  const fallbackChild = elementChild
+    ? React.cloneElement(
+        elementChild as React.ReactElement<React.HTMLAttributes<HTMLElement>>,
+        {
+          className: childClassName,
+        },
+      )
+    : child;
 
   const childrenNode =
     elementChild && supportRef(elementChild) ? (
@@ -156,8 +164,8 @@ const Dropdown = React.forwardRef<TriggerRef, DropdownProps>((props, ref) => {
         triggerChildProps,
       )
     ) : (
-      <span className={childClassName} ref={childRef}>
-        {child}
+      <span className={!elementChild ? childClassName : undefined} ref={childRef}>
+        {fallbackChild}
       </span>
     );
 

tests/basic.test.tsx

@@ -286,6 +286,19 @@ describe('dropdown', () => {
     ).toBeFalsy();
   });
 
+  it('should pass openClassName to child without ref support', () => {
+    const LegacyButton = (props: HTMLAttributes<HTMLButtonElement>) => (
+      <button {...props}>open</button>
+    );
+    const { container } = render(
+      <Dropdown overlay={<div style={{ width: 50 }}>Test</div>} visible>
+        <LegacyButton className="my-button" />
+      </Dropdown>,
+    );
+
+    expect(container.querySelector('.my-button')).toHaveClass('rc-dropdown-open');
+  });
+
   it('overlay callback', async () => {
     const overlay = <div style={{ width: 50 }}>Test</div>;
     const { container, baseElement } = render(