chore: bump trigger (#240)

* chore: update package configuration and dependencies

* chore: migrate from rc-util to @rc-component packages

* chore: update import paths

* refactor: update Dropdown motion name

* chore: adjust motion name

* chore: bump deps

* test: fix test case

---------

Co-authored-by: 二货机器人 <[email protected]>

Author: aojunhao123

.gitignore

@@ -28,6 +28,7 @@ es
 coverage
 yarn.lock
 package-lock.json
+.vscode
 
 # dumi
 .dumi/tmp

docs/examples/arrow.jsx

@@ -1,7 +1,7 @@
-import Menu, { Item as MenuItem, Divider } from 'rc-menu';
-import '../../assets/index.less';
+import Dropdown from '@rc-component/dropdown';
+import Menu, { Divider, Item as MenuItem } from '@rc-component/menu';
 import React from 'react';
-import Dropdown from 'rc-dropdown';
+import '../../assets/index.less';
 
 function onSelect({ key }) {
   console.log(`${key} selected`);

docs/examples/context-menu.jsx

@@ -1,15 +1,15 @@
-import Menu, { Item as MenuItem } from 'rc-menu'
-import '../../assets/index.less'
-import React from 'react'
-import Dropdown from 'rc-dropdown'
+import Dropdown from '@rc-component/dropdown';
+import Menu, { Item as MenuItem } from '@rc-component/menu';
+import React from 'react';
+import '../../assets/index.less';
 
 function ContextMenu() {
   const menu = (
     <Menu style={{ width: 140 }}>
       <MenuItem key="1">one</MenuItem>
       <MenuItem key="2">two</MenuItem>
     </Menu>
-  )
+  );
 
   return (
     <Dropdown
@@ -29,7 +29,7 @@ function ContextMenu() {
         Right click me!
       </div>
     </Dropdown>
-  )
+  );
 }
 
-export default ContextMenu
+export default ContextMenu;

docs/examples/dropdown-menu-width.jsx

@@ -1,29 +1,29 @@
-import Menu, { Item as MenuItem } from 'rc-menu'
-import '../../assets/index.less'
-import React, { PureComponent } from 'react'
-import Dropdown from 'rc-dropdown'
+import Dropdown from '@rc-component/dropdown';
+import Menu, { Item as MenuItem } from '@rc-component/menu';
+import React, { PureComponent } from 'react';
+import '../../assets/index.less';
 
 class Example extends PureComponent {
-  state = { longList: false }
+  state = { longList: false };
 
   short = () => {
-    this.setState({ longList: false })
-  }
+    this.setState({ longList: false });
+  };
 
   long = () => {
-    this.setState({ longList: true })
-  }
+    this.setState({ longList: true });
+  };
 
   render() {
     const menuItems = [
       <MenuItem key="1">1st item</MenuItem>,
       <MenuItem key="2">2nd item</MenuItem>,
-    ]
+    ];
 
     if (this.state.longList) {
-      menuItems.push(<MenuItem key="3">3rd LONG SUPER LONG item</MenuItem>)
+      menuItems.push(<MenuItem key="3">3rd LONG SUPER LONG item</MenuItem>);
     }
-    const menu = <Menu>{menuItems}</Menu>
+    const menu = <Menu>{menuItems}</Menu>;
     return (
       <div>
         <Dropdown overlay={menu}>
@@ -32,8 +32,8 @@ class Example extends PureComponent {
         <button onClick={this.long}>Long List</button>
         <button onClick={this.short}>Short List</button>
       </div>
-    )
+    );
   }
 }
 
-export default Example
+export default Example;

docs/examples/multiple.jsx

@@ -1,32 +1,32 @@
-import Menu, { Item as MenuItem, Divider } from 'rc-menu'
-import '../../assets/index.less'
-import React, { Component } from 'react'
-import Dropdown from 'rc-dropdown'
+import Dropdown from '@rc-component/dropdown';
+import Menu, { Divider, Item as MenuItem } from '@rc-component/menu';
+import React, { Component } from 'react';
+import '../../assets/index.less';
 
 class Test extends Component {
   state = {
     visible: false,
-  }
+  };
 
-  onVisibleChange = visible => {
-    console.log('visible', visible)
+  onVisibleChange = (visible) => {
+    console.log('visible', visible);
     this.setState({
       visible,
-    })
-  }
+    });
+  };
 
-  selected = []
+  selected = [];
 
   saveSelected = ({ selectedKeys }) => {
-    this.selected = selectedKeys
-  }
+    this.selected = selectedKeys;
+  };
 
   confirm = () => {
-    console.log(this.selected)
+    console.log(this.selected);
     this.setState({
       visible: false,
-    })
-  }
+    });
+  };
 
   render() {
     const menu = (
@@ -52,7 +52,7 @@ class Test extends Component {
           </button>
         </MenuItem>
       </Menu>
-    )
+    );
 
     return (
       <Dropdown
@@ -65,8 +65,8 @@ class Test extends Component {
       >
         <button>open</button>
       </Dropdown>
-    )
+    );
   }
 }
 
-export default Test
+export default Test;

docs/examples/overlay-callback.jsx

@@ -1,14 +1,14 @@
-import Menu, { Item as MenuItem, Divider } from 'rc-menu'
-import '../../assets/index.less'
-import React from 'react'
-import Dropdown from 'rc-dropdown'
+import Dropdown from '@rc-component/dropdown';
+import Menu, { Divider, Item as MenuItem } from '@rc-component/menu';
+import React from 'react';
+import '../../assets/index.less';
 
 function onSelect({ key }) {
-  console.log(`${key} selected`)
+  console.log(`${key} selected`);
 }
 
 function onVisibleChange(visible) {
-  console.log(visible)
+  console.log(visible);
 }
 
 const menuCallback = () => (
@@ -18,7 +18,7 @@ const menuCallback = () => (
     <Divider />
     <MenuItem key="2">two</MenuItem>
   </Menu>
-)
+);
 
 export default function OverlayCallback() {
   return (
@@ -35,5 +35,5 @@ export default function OverlayCallback() {
         </Dropdown>
       </div>
     </div>
-  )
+  );
 }

docs/examples/simple.jsx

@@ -1,15 +1,15 @@
 /* eslint-disable no-console,react/button-has-type */
-import Menu, { Item as MenuItem, Divider } from 'rc-menu'
-import '../../assets/index.less'
-import React from 'react'
-import Dropdown from 'rc-dropdown'
+import Dropdown from '@rc-component/dropdown';
+import Menu, { Divider, Item as MenuItem } from '@rc-component/menu';
+import React from 'react';
+import '../../assets/index.less';
 
 function onSelect({ key }) {
-  console.log(`${key} selected`)
+  console.log(`${key} selected`);
 }
 
 function onVisibleChange(visible) {
-  console.log(visible)
+  console.log(visible);
 }
 
 const menu = (
@@ -19,7 +19,7 @@ const menu = (
     <Divider />
     <MenuItem key="2">two</MenuItem>
   </Menu>
-)
+);
 
 export default function Simple() {
   return (
@@ -37,5 +37,5 @@ export default function Simple() {
         </Dropdown>
       </div>
     </div>
-  )
+  );
 }

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rc-dropdown",
-  "version": "4.2.1",
+  "name": "@rc-component/dropdown",
+  "version": "1.0.0",
   "description": "dropdown ui component for react",
   "keywords": [
     "react",
@@ -33,7 +33,7 @@
     "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
     "now-build": "npm run build",
     "prepare": "husky install && dumi setup",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prepublishOnly": "npm run compile && rc-np",
     "start": "dumi dev",
     "test": "rc-test"
   },
@@ -44,13 +44,14 @@
     ]
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
-    "@rc-component/trigger": "^2.0.0",
-    "classnames": "^2.2.6",
-    "rc-util": "^5.44.1"
+    "@rc-component/trigger": "^3.0.0",
+    "@rc-component/util": "^1.2.1",
+    "classnames": "^2.2.6"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^1.0.0",
+    "@rc-component/father-plugin": "^2.0.2",
+    "@rc-component/np": "^1.0.3",
+    "@rc-component/resize-observer": "^1.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/classnames": "^2.2.6",
@@ -69,10 +70,8 @@
     "jquery": "^3.3.1",
     "less": "^4.1.1",
     "lint-staged": "^13.2.1",
-    "np": "^6.0.0",
     "prettier": "^2.8.7",
-    "rc-menu": "^9.5.2",
-    "rc-resize-observer": "^1.4.0",
+    "@rc-component/menu": "^1.0.0",
     "rc-test": "^7.0.14",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/Dropdown.tsx

@@ -6,8 +6,8 @@ import type {
   AnimationType,
   BuildInPlacements,
 } from '@rc-component/trigger/lib/interface';
+import { composeRef, getNodeRef, supportRef } from '@rc-component/util/lib/ref';
 import classNames from 'classnames';
-import { composeRef, getNodeRef, supportRef } from 'rc-util/lib/ref';
 import React from 'react';
 import useAccessibility from './hooks/useAccessibility';
 import Overlay from './Overlay';
@@ -71,6 +71,9 @@ function Dropdown(props: DropdownProps, ref) {
 
   const [triggerVisible, setTriggerVisible] = React.useState<boolean>();
   const mergedVisible = 'visible' in props ? visible : triggerVisible;
+  const mergedMotionName = animation
+    ? `${prefixCls}-${animation}`
+    : transitionName;
 
   const triggerRef = React.useRef(null);
   const overlayRef = React.useRef(null);
@@ -162,8 +165,7 @@ function Dropdown(props: DropdownProps, ref) {
       hideAction={triggerHideAction}
       popupPlacement={placement}
       popupAlign={align}
-      popupTransitionName={transitionName}
-      popupAnimation={animation}
+      popupMotion={{ motionName: mergedMotionName }}
       popupVisible={mergedVisible}
       stretch={getMinOverlayWidthMatchTrigger() ? 'minWidth' : ''}
       popup={getMenuElementOrLambda()}

src/Overlay.tsx

@@ -1,4 +1,4 @@
-import { composeRef, getNodeRef, supportRef } from 'rc-util/lib/ref';
+import { composeRef, getNodeRef, supportRef } from '@rc-component/util/lib/ref';
 import React, { forwardRef, useMemo } from 'react';
 import type { DropdownProps } from './Dropdown';