diff --git a/.dumirc.ts b/.dumirc.ts
index bd80941..d8e2b76 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -1,23 +1,12 @@
 import { defineConfig } from 'dumi';
-import path from 'path';
 
 export default defineConfig({
-  alias: {
-    'rc-trigger$': path.resolve('src'),
-    'rc-trigger/es': path.resolve('src'),
-  },
   mfsu: false,
   favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
   themeConfig: {
-    name: 'Trigger',
+    name: 'cssinjs-util',
     logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   },
-  styles: [
-    `
-      .dumi-default-previewer-demo {
-        position: relative;
-        min-height: 300px;
-      }
-    `,
-  ]
 });
+
+
diff --git a/.fatherrc.js b/.fatherrc.js
index 4ddbafd..96268ae 100644
--- a/.fatherrc.js
+++ b/.fatherrc.js
@@ -2,4 +2,4 @@ import { defineConfig } from 'father';
 
 export default defineConfig({
   plugins: ['@rc-component/father-plugin'],
-});
\ No newline at end of file
+});
diff --git a/.gitignore b/.gitignore
index 65899cf..009d7ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,8 @@
+~*
 .storybook
 *.iml
 *.log
-.idea
+.idea/
 .ipr
 .iws
 *~
@@ -13,28 +14,31 @@
 Thumbs.db
 .project
 .*proj
-.svn
+.svn/
 *.swp
 *.swo
 *.pyc
 *.pyo
+.build
 node_modules
 .cache
-*.css
+assets/**/*.css
 build
 lib
 es
-coverage
+dist
 yarn.lock
 package-lock.json
+coverage/
+.doc
 
-# dumi
+# umi
 .umi
 .umi-production
 .umi-test
-.docs
-
+.env.local
 
 # dumi
 .dumi/tmp
-.dumi/tmp-production
\ No newline at end of file
+.dumi/tmp-production
+.dumi/tmp-test
diff --git a/HISTORY.md b/HISTORY.md
index 7ee63c8..ab24a71 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -1,58 +1,2 @@
 # History
 ----
-
-## 4.1.0 / 2020-05-08
-
-- upgrade rc-animate to `3.x`
-
-## 2.5.0 / 2018-06-05
-
-- support `alignPoint`
-
-## 2.1.0 / 2017-10-16
-
-- add action `contextMenu`
-
-## 2.0.0 / 2017-09-25
-
-- support React 16
-
-## 1.11.0 / 2017-06-07
-
-- add es
-
-## 1.9.0 / 2017-02-27
-
-- add getDocument prop
-
-## 1.8.2 / 2017-02-24
-
-- change default container to absolute to fix scrollbar change problem
-
-## 1.7.0 / 2016-07-18
-
-- use getContainerRenderMixin from 'rc-util'
-
-## 1.6.0 / 2016-05-26
-
-- support popup as function
-
-## 1.5.0 / 2016-05-26
-
-- add forcePopupAlign method
-
-## 1.4.0 / 2016-04-06
-
-- support onPopupAlign
-
-## 1.3.0 / 2016-03-25
-
-- support mask/maskTransitionName/zIndex
-
-## 1.2.0 / 2016-03-01
-
-- add showAction/hideAction
-
-## 1.1.0 / 2016-01-06
-
-- add root trigger node as parameter of getPopupContainer
diff --git a/README.md b/README.md
index e479e56..26eeed6 100644
--- a/README.md
+++ b/README.md
@@ -1,258 +1,30 @@
-# @rc-component/trigger
-
-React Trigger Component
-
-[![NPM version][npm-image]][npm-url]
-[![npm download][download-image]][download-url]
-[![build status][github-actions-image]][github-actions-url]
-[![Test coverage][codecov-image]][codecov-url]
-[![bundle size][bundlephobia-image]][bundlephobia-url]
-[![dumi][dumi-image]][dumi-url]
-
-[npm-image]: http://img.shields.io/npm/v/rc-checkbox.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-checkbox
-[github-actions-image]: https://github.com/react-component/checkbox/workflows/CI/badge.svg
-[github-actions-url]: https://github.com/react-component/checkbox/actions
-[codecov-image]: https://img.shields.io/codecov/c/github/react-component/checkbox/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/react-component/checkbox/branch/master
-[david-url]: https://david-dm.org/react-component/checkbox
-[david-image]: https://david-dm.org/react-component/checkbox/status.svg?style=flat-square
-[david-dev-url]: https://david-dm.org/react-component/checkbox?type=dev
-[david-dev-image]: https://david-dm.org/react-component/checkbox/dev-status.svg?style=flat-square
-[download-image]: https://img.shields.io/npm/dm/rc-checkbox.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-checkbox
-[bundlephobia-url]: https://bundlephobia.com/result?p=rc-checkbox
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-checkbox
-[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
-[dumi-url]: https://github.com/umijs/dumi
+# @ant-design/cssinjs-util
+A cssinjs util library to support Ant Design (antd) and its ecosystem libraries.
 
 ## Install
-
-[![@rc-component/trigger](https://nodei.co/npm/@rc-component/trigger.png)](https://npmjs.org/package/@rc-component/trigger)
-
-## Usage
-
-Include the default [styling](https://github.com/react-component/trigger/blob/master/assets/index.less#L4:L11) and then:
-
-```js
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Trigger from '@rc-component/trigger';
-
-ReactDOM.render((
-  <Trigger
-    action={['click']}
-    popup={<span>popup</span>}
-    popupAlign={{
-      points: ['tl', 'bl'],
-      offset: [0, 3]
-    }}
-  >
-    <a href='#'>hover</a>
-  </Trigger>
-), container);
+``` bash
+npm i @ant-design/cssinjs-util --save
 ```
 
-## Compatibility
-
-| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
-| --- | --- | --- | --- | --- |
-| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+## Usage
 
 ## Example
-
-http://localhost:9001
+http://localhost:8000
 
 ## Development
-
-```
+``` bash
 npm install
 npm start
 ```
 
 ## API
 
-### props
-
-<table class="table table-bordered table-striped">
-    <thead>
-    <tr>
-        <th style="width: 100px;">name</th>
-        <th style="width: 50px;">type</th>
-        <th style="width: 50px;">default</th>
-        <th>description</th>
-    </tr>
-    </thead>
-    <tbody>
-        <tr>
-          <td>alignPoint</td>
-          <td>bool</td>
-          <td>false</td>
-          <td>Popup will align with mouse position (support action of 'click', 'hover' and 'contextMenu')</td>
-        </tr>
-        <tr>
-          <td>popupClassName</td>
-          <td>string</td>
-          <td></td>
-          <td>additional className added to popup</td>
-        </tr>
-        <tr>
-          <td>forceRender</td>
-          <td>boolean</td>
-          <td>false</td>
-          <td>whether render popup before first show</td>
-        </tr>
-        <tr>
-          <td>destroyPopupOnHide</td>
-          <td>boolean</td>
-          <td>false</td>
-          <td>whether destroy popup when hide</td>
-        </tr>
-        <tr>
-          <td>getPopupClassNameFromAlign</td>
-          <td>getPopupClassNameFromAlign(align: Object):String</td>
-          <td></td>
-          <td>additional className added to popup according to align</td>
-        </tr>
-        <tr>
-          <td>action</td>
-          <td>string[]</td>
-          <td>['hover']</td>
-          <td>which actions cause popup shown. enum of 'hover','click','focus','contextMenu'</td>
-        </tr>
-        <tr>
-          <td>mouseEnterDelay</td>
-          <td>number</td>
-          <td>0</td>
-          <td>delay time to show when mouse enter. unit: s.</td>
-        </tr>
-        <tr>
-          <td>mouseLeaveDelay</td>
-          <td>number</td>
-          <td>0.1</td>
-          <td>delay time to hide when mouse leave. unit: s.</td>
-        </tr>
-        <tr>
-          <td>popupStyle</td>
-          <td>Object</td>
-          <td></td>
-          <td>additional style of popup</td>
-        </tr>
-        <tr>
-          <td>prefixCls</td>
-          <td>String</td>
-          <td>rc-trigger-popup</td>
-          <td>prefix class name</td>
-        </tr>
-        <tr>
-          <td>popupTransitionName</td>
-          <td>String|Object</td>
-          <td></td>
-          <td>https://github.com/react-component/animate</td>
-        </tr>
-        <tr>
-          <td>maskTransitionName</td>
-          <td>String|Object</td>
-          <td></td>
-          <td>https://github.com/react-component/animate</td>
-        </tr>
-        <tr>
-          <td>onPopupVisibleChange</td>
-          <td>Function</td>
-          <td></td>
-          <td>call when popup visible is changed</td>
-        </tr>
-        <tr>
-          <td>mask</td>
-          <td>boolean</td>
-          <td>false</td>
-          <td>whether to support mask</td>
-        </tr>
-        <tr>
-          <td>maskClosable</td>
-          <td>boolean</td>
-          <td>true</td>
-          <td>whether to support click mask to hide</td>
-        </tr>
-        <tr>
-          <td>popupVisible</td>
-          <td>boolean</td>
-          <td></td>
-          <td>whether popup is visible</td>
-        </tr>
-        <tr>
-          <td>zIndex</td>
-          <td>number</td>
-          <td></td>
-          <td>popup's zIndex</td>
-        </tr>
-        <tr>
-          <td>defaultPopupVisible</td>
-          <td>boolean</td>
-          <td></td>
-          <td>whether popup is visible initially</td>
-        </tr>
-        <tr>
-          <td>popupAlign</td>
-          <td>Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)</td>
-          <td></td>
-          <td>popup 's align config</td>
-        </tr>
-        <tr>
-          <td>onPopupAlign</td>
-          <td>function(popupDomNode, align)</td>
-          <td></td>
-          <td>callback when popup node is aligned</td>
-        </tr>
-        <tr>
-          <td>popup</td>
-          <td>React.Element | function() => React.Element</td>
-          <td></td>
-          <td>popup content</td>
-        </tr>
-        <tr>
-          <td>getPopupContainer</td>
-          <td>getPopupContainer(): HTMLElement</td>
-          <td></td>
-          <td>function returning html node which will act as popup container</td>
-        </tr>
-        <tr>
-          <td>getDocument</td>
-          <td>getDocument(): HTMLElement</td>
-          <td></td>
-          <td>function returning document node which will be attached click event to close trigger</td>
-        </tr>
-        <tr>
-          <td>popupPlacement</td>
-          <td>string</td>
-          <td></td>
-          <td>use preset popup align config from builtinPlacements, can be merged by popupAlign prop</td>
-        </tr>
-        <tr>
-          <td>builtinPlacements</td>
-          <td>object</td>
-          <td></td>
-          <td>builtin placement align map. used by placement prop</td>
-        </tr>
-        <tr>
-          <td>stretch</td>
-          <td>string</td>
-          <td></td>
-          <td>Let popup div stretch with trigger element. enums of 'width', 'minWidth', 'height', 'minHeight'. (You can also mixed with 'height minWidth')</td>
-        </tr>
-    </tbody>
-</table>
-
-
 ## Test Case
-
 ```
 npm test
 npm run coverage
 ```
-
 open coverage/ dir
 
 ## License
-
-rc-trigger is released under the MIT license.
+cssinjs-util is released under the MIT license.
diff --git a/assets/.gitkeep b/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/assets/index.less b/assets/index.less
deleted file mode 100644
index e13a125..0000000
--- a/assets/index.less
+++ /dev/null
@@ -1,79 +0,0 @@
-@triggerPrefixCls: rc-trigger-popup;
-
-.@{triggerPrefixCls} {
-  position: absolute;
-  top: -9999px;
-  left: -9999px;
-  z-index: 1050;
-
-  &-hidden {
-    display: none;
-  }
-
-  .effect() {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-  }
-
-  &-zoom-enter,
-  &-zoom-appear {
-    opacity: 0;
-    animation-play-state: paused;
-    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
-    .effect();
-  }
-
-  &-zoom-leave {
-    .effect();
-    animation-play-state: paused;
-    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
-  }
-
-  &-zoom-enter&-zoom-enter-active,
-  &-zoom-appear&-zoom-appear-active {
-    animation-name: rcTriggerZoomIn;
-    animation-play-state: running;
-  }
-
-  &-zoom-leave&-zoom-leave-active {
-    animation-name: rcTriggerZoomOut;
-    animation-play-state: running;
-  }
-
-  &-arrow {
-    z-index: 1;
-    width: 0px;
-    height: 0px;
-    background: #000;
-    border-radius: 100vw;
-    box-shadow: 0 0 0 3px black;
-  }
-
-  @keyframes rcTriggerZoomIn {
-    0% {
-      transform: scale(0, 0);
-      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
-      opacity: 0;
-    }
-    100% {
-      transform: scale(1, 1);
-      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
-      opacity: 1;
-    }
-  }
-  @keyframes rcTriggerZoomOut {
-    0% {
-      transform: scale(1, 1);
-      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(0, 0);
-      transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
-      opacity: 0;
-    }
-  }
-}
-
-@import './index/Mask';
-@import './index/Mobile';
diff --git a/assets/index/Mask.less b/assets/index/Mask.less
deleted file mode 100644
index 81692e6..0000000
--- a/assets/index/Mask.less
+++ /dev/null
@@ -1,63 +0,0 @@
-.@{triggerPrefixCls} {
-  &-mask {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-color: rgb(55, 55, 55);
-    background-color: rgba(55, 55, 55, 0.6);
-    height: 100%;
-    filter: alpha(opacity=50);
-    z-index: 1050;
-
-    &-hidden {
-      display: none;
-    }
-  }
-
-  .fade-effect() {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
-  }
-
-  &-fade-enter,&-fade-appear {
-    opacity: 0;
-    .fade-effect();
-    animation-play-state: paused;
-  }
-
-  &-fade-leave {
-    .fade-effect();
-    animation-play-state: paused;
-  }
-
-  &-fade-enter&-fade-enter-active,&-fade-appear&-fade-appear-active  {
-    animation-name: rcTriggerMaskFadeIn;
-    animation-play-state: running;
-  }
-
-  &-fade-leave&-fade-leave-active {
-    animation-name: rcDialogFadeOut;
-    animation-play-state: running;
-  }
-
-  @keyframes rcTriggerMaskFadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes rcDialogFadeOut {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-}
diff --git a/assets/index/Mobile.less b/assets/index/Mobile.less
deleted file mode 100644
index 3c302ca..0000000
--- a/assets/index/Mobile.less
+++ /dev/null
@@ -1,25 +0,0 @@
-.@{triggerPrefixCls} {
-  &-mobile {
-    transition: all 0.3s;
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: auto;
-
-    &-fade {
-      &-appear,
-      &-enter {
-        &-start {
-          transform: translateY(100%);
-        }
-      }
-
-      &-leave {
-        &-active {
-          transform: translateY(100%);
-        }
-      }
-    }
-  }
-}
diff --git a/docs/demos/.gitkeep b/docs/demos/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/docs/demos/body-overflow.md b/docs/demos/body-overflow.md
deleted file mode 100644
index 6f6f9c4..0000000
--- a/docs/demos/body-overflow.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Body Overflow
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/body-overflow.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/case.md b/docs/demos/case.md
deleted file mode 100644
index 053a1bc..0000000
--- a/docs/demos/case.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Case
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/case.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/click-nested.md b/docs/demos/click-nested.md
deleted file mode 100644
index c67236d..0000000
--- a/docs/demos/click-nested.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Click Nested
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/click-nested.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/clip.md b/docs/demos/clip.md
deleted file mode 100644
index e2798ee..0000000
--- a/docs/demos/clip.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Clip
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/clip.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/container.md b/docs/demos/container.md
deleted file mode 100644
index a4860cb..0000000
--- a/docs/demos/container.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Container
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/container.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/inside.md b/docs/demos/inside.md
deleted file mode 100644
index a9853c3..0000000
--- a/docs/demos/inside.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Inside
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/inside.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/large-popup.md b/docs/demos/large-popup.md
deleted file mode 100644
index 048c77a..0000000
--- a/docs/demos/large-popup.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Large Popup
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/large-popup.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/nested.md b/docs/demos/nested.md
deleted file mode 100644
index 5daf43b..0000000
--- a/docs/demos/nested.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Nested
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/nested.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/point.md b/docs/demos/point.md
deleted file mode 100644
index 073a89b..0000000
--- a/docs/demos/point.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Point
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/point.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/shadow.md b/docs/demos/shadow.md
deleted file mode 100644
index 379812b..0000000
--- a/docs/demos/shadow.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Shadow
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/shadow.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/simple.md b/docs/demos/simple.md
deleted file mode 100644
index dbb7c35..0000000
--- a/docs/demos/simple.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Simple
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/simple.tsx"></code>
\ No newline at end of file
diff --git a/docs/demos/static-scroll.md b/docs/demos/static-scroll.md
deleted file mode 100644
index 14a1846..0000000
--- a/docs/demos/static-scroll.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Static Scroll
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/static-scroll.tsx"></code>
diff --git a/docs/demos/visible-fallback.md b/docs/demos/visible-fallback.md
deleted file mode 100644
index cb5a8f2..0000000
--- a/docs/demos/visible-fallback.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Visible Fallback
-nav:
-  title: Demo
-  path: /demo
----
-
-<code src="../examples/visible-fallback.tsx"></code>
\ No newline at end of file
diff --git a/docs/examples/.gitkeep b/docs/examples/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/docs/examples/body-overflow.tsx b/docs/examples/body-overflow.tsx
deleted file mode 100644
index 744e86a..0000000
--- a/docs/examples/body-overflow.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
-import React from 'react';
-import { createPortal } from 'react-dom';
-import '../../assets/index.less';
-
-const PortalDemo = () => {
-  return createPortal(
-    <div
-      style={{
-        position: 'fixed',
-        top: 0,
-        right: 0,
-        background: 'red',
-        zIndex: 999,
-      }}
-    >
-      PortalNode
-    </div>,
-    document.body,
-  );
-};
-
-export default () => {
-  const [open, setOpen] = React.useState(false);
-  const [open1, setOpen1] = React.useState(false);
-  const [open2, setOpen2] = React.useState(false);
-  const [open3, setOpen3] = React.useState(false);
-  return (
-    <React.StrictMode>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-        body {
-          overflow-x: hidden;
-        }
-      `,
-        }}
-      />
-
-      <Trigger
-        arrow
-        // forceRender
-        // action="click"
-        popupVisible={open}
-        onPopupVisibleChange={(next) => {
-          console.log('Visible Change:', next);
-          setOpen(next);
-        }}
-        popupTransitionName="rc-trigger-popup-zoom"
-        popup={
-          <div
-            style={{
-              background: 'yellow',
-              border: '1px solid blue',
-              width: 200,
-              height: 60,
-              opacity: 0.9,
-            }}
-          >
-            <button
-              onClick={() => {
-                setOpen(false);
-              }}
-            >
-              Close
-            </button>
-
-            <PortalDemo />
-          </div>
-        }
-        // popupVisible
-        popupStyle={{ boxShadow: '0 0 5px red' }}
-        popupAlign={{
-          points: ['tc', 'bc'],
-          overflow: {
-            shiftX: 50,
-            adjustY: true,
-          },
-          htmlRegion: 'scroll',
-        }}
-      >
-        <button
-          disabled
-          style={{
-            // background: 'green',
-            // color: '#FFF',
-            paddingBlock: 30,
-            paddingInline: 70,
-            opacity: 0.9,
-            transform: 'scale(0.6)',
-            display: 'inline-block',
-          }}
-        >
-          Button Target
-        </button>
-      </Trigger>
-
-      <Trigger
-        arrow
-        action="click"
-        popupVisible={open1}
-        onPopupVisibleChange={(next) => {
-          console.log('Visible Change:', next);
-          setOpen1(next);
-        }}
-        popupTransitionName="rc-trigger-popup-zoom"
-        popup={
-          <div
-            style={{
-              background: 'yellow',
-              border: '1px solid blue',
-              width: 200,
-              height: 60,
-              opacity: 0.9,
-            }}
-          >
-            <button
-              onClick={() => {
-                setOpen1(false);
-              }}
-            >
-              Close
-            </button>
-          </div>
-        }
-        // popupVisible
-        popupStyle={{ boxShadow: '0 0 5px red' }}
-        popupAlign={{
-          points: ['tc', 'bc'],
-          overflow: {
-            shiftX: 50,
-            adjustY: true,
-          },
-          htmlRegion: 'scroll',
-        }}
-      >
-        <span
-          style={{
-            background: 'green',
-            color: '#FFF',
-            paddingBlock: 30,
-            paddingInline: 70,
-            opacity: 0.9,
-            transform: 'scale(0.6)',
-            display: 'inline-block',
-          }}
-        >
-          Target Click
-        </span>
-      </Trigger>
-
-      <Trigger
-        arrow
-        action="contextMenu"
-        popupVisible={open2}
-        onPopupVisibleChange={(next) => {
-          console.log('Visible Change:', next);
-          setOpen2(next);
-        }}
-        popupTransitionName="rc-trigger-popup-zoom"
-        popup={
-          <div
-            style={{
-              background: 'yellow',
-              border: '1px solid blue',
-              width: 200,
-              height: 60,
-              opacity: 0.9,
-            }}
-          >
-            Target ContextMenu1
-          </div>
-        }
-        popupStyle={{ boxShadow: '0 0 5px red' }}
-        popupAlign={{
-          points: ['tc', 'bc'],
-          overflow: {
-            shiftX: 50,
-            adjustY: true,
-          },
-          htmlRegion: 'scroll',
-        }}
-      >
-        <span
-          style={{
-            background: 'blue',
-            color: '#FFF',
-            paddingBlock: 30,
-            paddingInline: 70,
-            opacity: 0.9,
-            transform: 'scale(0.6)',
-            display: 'inline-block',
-          }}
-        >
-          Target ContextMenu1
-        </span>
-      </Trigger>
-
-      <Trigger
-        arrow
-        action="contextMenu"
-        popupVisible={open3}
-        onPopupVisibleChange={(next) => {
-          console.log('Visible Change:', next);
-          setOpen3(next);
-        }}
-        popupTransitionName="rc-trigger-popup-zoom"
-        popup={
-          <div
-            style={{
-              background: 'yellow',
-              border: '1px solid blue',
-              width: 200,
-              height: 60,
-              opacity: 0.9,
-            }}
-          >
-            Target ContextMenu2
-          </div>
-        }
-        popupStyle={{ boxShadow: '0 0 5px red' }}
-        popupAlign={{
-          points: ['tc', 'bc'],
-          overflow: {
-            shiftX: 50,
-            adjustY: true,
-          },
-          htmlRegion: 'scroll',
-        }}
-      >
-        <span
-          style={{
-            background: 'blue',
-            color: '#FFF',
-            paddingBlock: 30,
-            paddingInline: 70,
-            opacity: 0.9,
-            transform: 'scale(0.6)',
-            display: 'inline-block',
-          }}
-        >
-          Target ContextMenu2
-        </span>
-      </Trigger>
-    </React.StrictMode>
-  );
-};
diff --git a/docs/examples/case.less b/docs/examples/case.less
deleted file mode 100644
index a1012d6..0000000
--- a/docs/examples/case.less
+++ /dev/null
@@ -1,109 +0,0 @@
-// .rc-trigger-popup-placement-right {
-//   border-width: 10px!important;
-// }
-
-// ======================= Popup =======================
-.case-motion {
-  transform-origin: 50% 50%;
-
-  animation-duration: 0.3s;
-  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
-  animation-fill-mode: both;
-
-  &::after {
-    content: 'Animating...';
-    position: absolute;
-    bottom: -3em;
-  }
-
-  &-appear,
-  &-enter {
-    animation-play-state: paused;
-
-    &-active {
-      animation-name: case-zoom-in;
-      animation-play-state: running;
-    }
-  }
-
-  &-leave {
-    animation-play-state: paused;
-
-    &-active {
-      animation-name: case-zoom-out;
-      animation-play-state: running;
-    }
-  }
-}
-
-@keyframes case-zoom-in {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes case-zoom-out {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(1.2);
-  }
-}
-
-// ======================= Mask =======================
-.mask-motion {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.3);
-
-  &-appear,
-  &-enter {
-    animation-play-state: paused;
-    opacity: 0;
-
-    &-active {
-      animation-name: mask-zoom-in;
-      animation-play-state: running;
-    }
-  }
-
-  &-leave {
-    animation-play-state: paused;
-
-    &-active {
-      animation-name: mask-zoom-out;
-      animation-play-state: running;
-    }
-  }
-}
-
-@keyframes mask-zoom-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes mask-zoom-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
diff --git a/docs/examples/case.tsx b/docs/examples/case.tsx
deleted file mode 100644
index 2d24a8e..0000000
--- a/docs/examples/case.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-/* eslint no-console:0 */
-
-import React from 'react';
-import type { CSSMotionProps } from 'rc-motion';
-import type { BuildInPlacements } from 'rc-trigger';
-import Trigger from 'rc-trigger';
-import './case.less';
-
-const builtinPlacements: BuildInPlacements = {
-  left: {
-    points: ['cr', 'cl'],
-  },
-  right: {
-    points: ['cl', 'cr'],
-  },
-  top: {
-    points: ['bc', 'tc'],
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-  },
-  topRight: {
-    points: ['br', 'tr'],
-  },
-  bottomRight: {
-    points: ['tr', 'br'],
-  },
-  bottomLeft: {
-    points: ['tl', 'bl'],
-  },
-};
-
-const Motion: CSSMotionProps = {
-  motionName: 'case-motion',
-};
-
-const MaskMotion: CSSMotionProps = {
-  motionName: 'mask-motion',
-};
-
-function useControl<T>(valuePropName: string, defaultValue: T): [T, any] {
-  const [value, setValue] = React.useState<T>(defaultValue);
-
-  return [
-    value,
-    {
-      value,
-      checked: value,
-      onChange({ target }) {
-        setValue(target[valuePropName]);
-      },
-    },
-  ];
-}
-
-const LabelItem: React.FC<{
-  title: React.ReactNode;
-  children: React.ReactElement;
-  [prop: string]: any;
-}> = ({ title, children, ...rest }) => {
-  const { type } = children;
-
-  const style = {
-    display: 'inline-flex',
-    padding: '0 8px',
-    alignItems: 'center',
-  };
-
-  const spacing = <span style={{ width: 4 }} />;
-
-  if (type === 'input' && children.props.type === 'checkbox') {
-    return (
-      <label style={style}>
-        {React.cloneElement(children, rest)}
-        {spacing}
-        {title}
-      </label>
-    );
-  }
-
-  return (
-    <label style={style}>
-      {title}
-      {spacing}
-      {React.cloneElement(children, rest)}
-    </label>
-  );
-};
-
-const Demo = () => {
-  const [hover, hoverProps] = useControl('checked', true);
-  const [focus, focusProps] = useControl('checked', false);
-  const [click, clickProps] = useControl('checked', false);
-  const [contextMenu, contextMenuProps] = useControl('checked', false);
-
-  const [placement, placementProps] = useControl('value', 'right');
-  const [stretch, stretchProps] = useControl('value', '');
-  const [motion, motionProps] = useControl('checked', true);
-  const [destroyPopupOnHide, destroyPopupOnHideProps] = useControl(
-    'checked',
-    false,
-  );
-  const [mask, maskProps] = useControl('checked', false);
-  const [maskClosable, maskClosableProps] = useControl('checked', true);
-  const [forceRender, forceRenderProps] = useControl('checked', false);
-  const [offsetX, offsetXProps] = useControl<number>('value', 0);
-  const [offsetY, offsetYProps] = useControl<number>('value', 0);
-
-  const actions = {
-    hover,
-    focus,
-    click,
-    contextMenu,
-  };
-
-  return (
-    <React.StrictMode>
-      <div>
-        <div style={{ margin: '10px 20px' }}>
-          <strong>Actions: </strong>
-          <LabelItem title="Hover" {...hoverProps}>
-            <input type="checkbox" />
-          </LabelItem>
-          <LabelItem title="Focus" {...focusProps}>
-            <input type="checkbox" />
-          </LabelItem>
-          <LabelItem title="Click" {...clickProps}>
-            <input type="checkbox" />
-          </LabelItem>
-          <LabelItem title="ContextMenu" {...contextMenuProps}>
-            <input type="checkbox" />
-          </LabelItem>
-
-          <hr />
-
-          <LabelItem title="Stretch" {...stretchProps}>
-            <select>
-              <option value="">--NONE--</option>
-              <option value="width">width</option>
-              <option value="minWidth">minWidth</option>
-              <option value="height">height</option>
-              <option value="minHeight">minHeight</option>
-            </select>
-          </LabelItem>
-
-          <LabelItem title="Placement" {...placementProps}>
-            <select>
-              <option>right</option>
-              <option>left</option>
-              <option>top</option>
-              <option>bottom</option>
-              <option>topLeft</option>
-              <option>topRight</option>
-              <option>bottomRight</option>
-              <option>bottomLeft</option>
-            </select>
-          </LabelItem>
-
-          <LabelItem title="Motion" {...motionProps}>
-            <input type="checkbox" />
-          </LabelItem>
-
-          <LabelItem title="Destroy Popup On Hide" {...destroyPopupOnHideProps}>
-            <input type="checkbox" />
-          </LabelItem>
-
-          <LabelItem title="Mask" {...maskProps}>
-            <input type="checkbox" />
-          </LabelItem>
-
-          <LabelItem title="Mask Closable" {...maskClosableProps}>
-            <input type="checkbox" />
-          </LabelItem>
-
-          <LabelItem title="Force Render" {...forceRenderProps}>
-            <input type="checkbox" />
-          </LabelItem>
-
-          <LabelItem title="OffsetX" {...offsetXProps}>
-            <input />
-          </LabelItem>
-
-          <LabelItem title="OffsetY" {...offsetYProps}>
-            <input />
-          </LabelItem>
-        </div>
-
-        <div style={{ margin: 120, position: 'relative' }}>
-          <Trigger
-            popupAlign={{
-              offset: [offsetX, offsetY],
-              overflow: {
-                adjustX: 1,
-                adjustY: 1,
-              },
-            }}
-            popupPlacement={placement}
-            destroyPopupOnHide={destroyPopupOnHide}
-            mask={mask}
-            maskMotion={motion ? MaskMotion : null}
-            maskClosable={maskClosable}
-            stretch={stretch}
-            action={Object.keys(actions).filter((action) => actions[action])}
-            builtinPlacements={builtinPlacements}
-            forceRender={forceRender}
-            popupStyle={{
-              border: '1px solid red',
-              padding: 10,
-              background: 'white',
-              boxSizing: 'border-box',
-            }}
-            popup={<div>i am a popup</div>}
-            popupMotion={motion ? Motion : null}
-            onPopupAlign={() => {
-              console.warn('Aligned!');
-            }}
-          >
-            <div
-              style={{
-                margin: 20,
-                display: 'inline-block',
-                background: 'rgba(255, 0, 0, 0.05)',
-              }}
-              tabIndex={0}
-              role="button"
-            >
-              <p>This is a example of trigger usage.</p>
-              <p>You can adjust the value above</p>
-              <p>which will also change the behaviour of popup.</p>
-            </div>
-          </Trigger>
-        </div>
-      </div>
-    </React.StrictMode>
-  );
-};
-
-export default Demo;
diff --git a/docs/examples/click-nested.tsx b/docs/examples/click-nested.tsx
deleted file mode 100644
index 11c7e43..0000000
--- a/docs/examples/click-nested.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/* eslint no-console:0 */
-
-import Trigger from 'rc-trigger';
-import React from 'react';
-import '../../assets/index.less';
-
-const builtinPlacements = {
-  left: {
-    points: ['cr', 'cl'],
-  },
-  right: {
-    points: ['cl', 'cr'],
-  },
-  top: {
-    points: ['bc', 'tc'],
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-  },
-  topRight: {
-    points: ['br', 'tr'],
-  },
-  bottomRight: {
-    points: ['tr', 'br'],
-  },
-  bottomLeft: {
-    points: ['tl', 'bl'],
-  },
-};
-
-const popupBorderStyle = {
-  border: '1px solid red',
-  padding: 10,
-  background: 'rgba(255, 0, 0, 0.1)',
-};
-
-const NestPopup = ({ open, setOpen }) => {
-  return (
-    <Trigger
-      popupPlacement="right"
-      action={['click']}
-      builtinPlacements={builtinPlacements}
-      popup={<div style={popupBorderStyle}>i am a click popup</div>}
-      popupVisible={open}
-      onPopupVisibleChange={setOpen}
-    >
-      <div style={popupBorderStyle}>
-        i am a click popup{' '}
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            e.preventDefault();
-          }}
-        >
-          I am preventPop
-        </button>
-      </div>
-    </Trigger>
-  );
-};
-
-NestPopup.displayName = '🐞 NestPopup';
-
-const Test = () => {
-  const [open1, setOpen1] = React.useState(false);
-  const [open2, setOpen2] = React.useState(false);
-
-  return (
-    <div style={{ margin: 200 }}>
-      <div>
-        <Trigger
-          popupPlacement="right"
-          action={['click']}
-          builtinPlacements={builtinPlacements}
-          popupVisible={open1}
-          onPopupVisibleChange={setOpen1}
-          popup={
-            // Level 2
-            <NestPopup open={open2} setOpen={setOpen2} />
-          }
-          fresh
-        >
-          <span>Click Me</span>
-        </Trigger>
-      </div>
-    </div>
-  );
-};
-
-export default Test;
diff --git a/docs/examples/clip.tsx b/docs/examples/clip.tsx
deleted file mode 100644
index 5f096b4..0000000
--- a/docs/examples/clip.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
-import React from 'react';
-import '../../assets/index.less';
-
-const builtinPlacements = {
-  top: {
-    points: ['bc', 'tc'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    offset: [0, 0],
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    offset: [0, 0],
-  },
-};
-
-const popupPlacement = 'top';
-
-export default () => {
-  const [scale, setScale] = React.useState('1');
-
-  return (
-    <React.StrictMode>
-      <div>
-        <div
-          style={{
-            position: 'fixed',
-            top: 0,
-            right: 0,
-          }}
-        >
-          <input
-            type="number"
-            value={scale}
-            onChange={(e) => setScale(e.target.value)}
-          />
-        </div>
-
-        <div
-          style={{
-            height: 500,
-            width: 500,
-            boxSizing: 'border-box',
-            background: 'rgba(255,0,0,0.1)',
-            border: '50px solid rgba(0,0,255,0.1)',
-            overflow: 'clip',
-            overflowClipMargin: 50,
-            // overflow: 'hidden',
-            position: 'relative',
-          }}
-        >
-          <Trigger
-            arrow
-            action="click"
-            popupVisible
-            popup={
-              <div
-                style={{
-                  background: 'yellow',
-                  border: '1px solid blue',
-                  width: 100,
-                  height: 100,
-                  opacity: 0.9,
-                  boxSizing: 'border-box',
-                }}
-              >
-                Popup
-              </div>
-            }
-            getPopupContainer={(n) => n.parentNode as any}
-            popupStyle={{ boxShadow: '0 0 5px red' }}
-            popupPlacement={popupPlacement}
-            builtinPlacements={builtinPlacements}
-            stretch="minWidth"
-          >
-            <span
-              style={{
-                background: 'green',
-                color: '#FFF',
-                opacity: 0.9,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: 100,
-                height: 100,
-                position: 'absolute',
-                left: 0,
-                top: 80,
-              }}
-            >
-              Target
-            </span>
-          </Trigger>
-        </div>
-      </div>
-
-      {/* <div style={{ height: '100vh' }} /> */}
-    </React.StrictMode>
-  );
-};
diff --git a/docs/examples/container.tsx b/docs/examples/container.tsx
deleted file mode 100644
index 3a00aa0..0000000
--- a/docs/examples/container.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
-import React from 'react';
-import '../../assets/index.less';
-
-const builtinPlacements = {
-  topLeft: {
-    points: ['bl', 'tl'],
-    overflow: {
-      shiftX: 50,
-      adjustY: true,
-    },
-    offset: [0, 0],
-    targetOffset: [10, 0],
-  },
-  bottomLeft: {
-    points: ['tl', 'bl'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-  },
-  top: {
-    points: ['bc', 'tc'],
-    overflow: {
-      shiftX: 50,
-      adjustY: true,
-    },
-    offset: [0, -10],
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    overflow: {
-      shiftX: true,
-      adjustY: true,
-    },
-    offset: [0, 10],
-    htmlRegion: 'scroll' as const,
-  },
-  left: {
-    points: ['cr', 'cl'],
-    overflow: {
-      adjustX: true,
-      shiftY: true,
-    },
-    offset: [-10, 0],
-  },
-  right: {
-    points: ['cl', 'cr'],
-    overflow: {
-      adjustX: true,
-      shiftY: 24,
-    },
-    offset: [10, 0],
-  },
-};
-
-const popupPlacement = 'top';
-
-export default () => {
-  console.log('Demo Render!');
-
-  const [visible, setVisible] = React.useState(false);
-  const [scale, setScale] = React.useState('1');
-  const [targetVisible, setTargetVisible] = React.useState(true);
-
-  const rootRef = React.useRef<HTMLDivElement>();
-  const popHolderRef = React.useRef<HTMLDivElement>();
-  const scrollRef = React.useRef<HTMLDivElement>();
-
-  React.useEffect(() => {
-    scrollRef.current.scrollLeft = window.innerWidth;
-    scrollRef.current.scrollTop = window.innerHeight / 2;
-  }, []);
-
-  return (
-    <React.StrictMode>
-      <div
-        id="demo-root"
-        ref={rootRef}
-        style={{ background: 'rgba(0, 0, 255, 0.1)', padding: 16 }}
-      >
-        <div
-          style={{
-            position: 'fixed',
-            left: 0,
-            top: 0,
-            zIndex: 9999,
-          }}
-        >
-          <input
-            type="number"
-            value={scale}
-            onChange={(e) => setScale(e.target.value)}
-          />
-          <button
-            type="button"
-            onClick={() => {
-              setTargetVisible((v) => !v);
-            }}
-          >
-            Target Visible: ({String(targetVisible)})
-          </button>
-          <button
-            onClick={() => {
-              setVisible(true);
-            }}
-          >
-            Trigger Visible
-          </button>
-        </div>
-        <div
-          id="demo-holder"
-          ref={popHolderRef}
-          style={{
-            position: 'relative',
-            width: 0,
-            height: 0,
-            zIndex: 999,
-            // Transform
-            transform: `scale(${scale})`,
-            transformOrigin: 'top left',
-          }}
-        />
-        <div
-          ref={scrollRef}
-          style={{
-            border: '1px solid red',
-            padding: 10,
-            height: '100vh',
-            background: '#FFF',
-            position: 'relative',
-            overflow: 'auto',
-          }}
-        >
-          <div
-            style={{
-              height: '200vh',
-              paddingTop: `100vh`,
-              width: 'calc(300vw)',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'start',
-            }}
-          >
-            <Trigger
-              arrow={{ content: 'Arrow' }}
-              // forceRender
-              action="click"
-              popup={
-                <div
-                  style={{
-                    background: 'yellow',
-                    border: '1px solid blue',
-                    width: 200,
-                    height: 60,
-                    opacity: 0.9,
-                  }}
-                >
-                  Popup
-                </div>
-              }
-              popupTransitionName="rc-trigger-popup-zoom"
-              popupStyle={{ boxShadow: '0 0 5px red' }}
-              popupVisible={visible}
-              onPopupVisibleChange={(nextVisible) => {
-                setVisible(nextVisible);
-              }}
-              // getPopupContainer={() => popHolderRef.current}
-              popupPlacement={popupPlacement}
-              builtinPlacements={builtinPlacements}
-              stretch="minWidth"
-              onPopupAlign={(domNode, align) => {
-                console.log('onPopupAlign:', domNode, align);
-              }}
-            >
-              <span
-                style={{
-                  background: 'green',
-                  color: '#FFF',
-                  paddingBlock: 30,
-                  paddingInline: 70,
-                  opacity: 0.9,
-                  transform: 'scale(0.6)',
-                  display: targetVisible ? 'inline-block' : 'none',
-                }}
-              >
-                Target
-              </span>
-            </Trigger>
-          </div>
-        </div>
-      </div>
-
-      {/* <div style={{ height: '100vh' }} /> */}
-    </React.StrictMode>
-  );
-};
diff --git a/docs/examples/inside.tsx b/docs/examples/inside.tsx
deleted file mode 100644
index 42c19d4..0000000
--- a/docs/examples/inside.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-/* eslint no-console:0 */
-import React from 'react';
-import '../../assets/index.less';
-import Trigger, { type BuildInPlacements } from '../../src';
-
-const experimentalConfig = {
-  _experimental: {
-    dynamicInset: true,
-  },
-};
-
-export const builtinPlacements: BuildInPlacements = {
-  top: {
-    points: ['bc', 'tc'],
-    overflow: {
-      shiftX: 0,
-      adjustY: true,
-    },
-    offset: [0, 0],
-    ...experimentalConfig,
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-    overflow: {
-      adjustX: true,
-      adjustY: false,
-      shiftY: true,
-    },
-    offset: [0, -20],
-    ...experimentalConfig,
-  },
-  topRight: {
-    points: ['br', 'tr'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    offset: [0, 0],
-    ...experimentalConfig,
-  },
-  left: {
-    points: ['cr', 'cl'],
-    overflow: {
-      adjustX: true,
-      shiftY: true,
-    },
-    offset: [0, 0],
-    ...experimentalConfig,
-  },
-  leftTop: {
-    points: ['tr', 'tl'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    offset: [0, 0],
-    ...experimentalConfig,
-  },
-  leftBottom: {
-    points: ['br', 'bl'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    offset: [0, 0],
-    ...experimentalConfig,
-  },
-  right: {
-    points: ['cl', 'cr'],
-    overflow: {
-      adjustX: true,
-      shiftY: true,
-    },
-    offset: [0, 0],
-    ...experimentalConfig,
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    overflow: {
-      shiftX: 50,
-      adjustY: true,
-    },
-    offset: [0, 0],
-    ...experimentalConfig,
-  },
-  bottomLeft: {
-    points: ['tl', 'bl'],
-    overflow: {
-      shiftX: 50,
-      adjustY: true,
-      shiftY: true,
-    },
-    offset: [0, 20],
-    ...experimentalConfig,
-  },
-};
-
-const popupPlacement = 'bottomLeft';
-
-export default () => {
-  const [popupHeight, setPopupHeight] = React.useState(60);
-
-  const containerRef = React.useRef<HTMLDivElement>();
-
-  React.useEffect(() => {
-    containerRef.current.scrollLeft = document.defaultView.innerWidth;
-    containerRef.current.scrollTop = document.defaultView.innerHeight;
-  }, []);
-
-  return (
-    <>
-      <div style={{ position: 'fixed', top: 0, left: 0 }}>
-        <button
-          onClick={() => {
-            setPopupHeight(popupHeight === 60 ? 200 : 60);
-          }}
-        >
-          Popup Height: {popupHeight}
-        </button>
-      </div>
-      <div
-        style={{
-          position: 'absolute',
-          inset: 64,
-          overflow: `auto`,
-          border: '1px solid red',
-        }}
-        ref={containerRef}
-      >
-        <div
-          style={{
-            width: `300vw`,
-            height: `300vh`,
-            // width: 500,
-            // height: 500,
-            background: `rgba(0, 0, 255, 0.1)`,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <Trigger
-            arrow
-            popup={
-              <div
-                style={{
-                  background: 'yellow',
-                  border: '1px solid blue',
-                  width: 200,
-                  height: popupHeight,
-                  opacity: 0.9,
-                }}
-              >
-                Popup
-              </div>
-            }
-            popupVisible
-            getPopupContainer={() => containerRef.current}
-            popupPlacement={popupPlacement}
-            builtinPlacements={builtinPlacements}
-          >
-            <span
-              style={{
-                display: 'inline-block',
-                background: 'green',
-                color: '#FFF',
-                paddingBlock: 30,
-                paddingInline: 70,
-                opacity: 0.9,
-                transform: 'scale(0.6)',
-              }}
-            >
-              Target
-            </span>
-          </Trigger>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/docs/examples/large-popup.tsx b/docs/examples/large-popup.tsx
deleted file mode 100644
index 8d402d3..0000000
--- a/docs/examples/large-popup.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
-import React from 'react';
-import '../../assets/index.less';
-
-const builtinPlacements = {
-  top: {
-    points: ['bc', 'tc'],
-    overflow: {
-      shiftY: true,
-      adjustY: true,
-    },
-    offset: [0, -10],
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    overflow: {
-      shiftY: true,
-      adjustY: true,
-    },
-    offset: [0, 10],
-    htmlRegion: 'scroll' as const,
-  },
-};
-
-export default () => {
-  const containerRef = React.useRef<HTMLDivElement>();
-
-  React.useEffect(() => {
-    console.clear();
-    containerRef.current.scrollTop = document.defaultView.innerHeight * 0.75;
-  }, []);
-
-  return (
-    <React.StrictMode>
-      <div
-        id="demo-root"
-        style={{ background: 'rgba(0, 0, 255, 0.1)', padding: 16 }}
-      >
-        <div
-          ref={containerRef}
-          style={{
-            border: '1px solid red',
-            padding: 10,
-            height: '100vh',
-            background: '#FFF',
-            position: 'relative',
-            overflow: 'auto',
-          }}
-        >
-          <div
-            style={{
-              height: '200vh',
-              paddingTop: `100vh`,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'start',
-            }}
-          >
-            <Trigger
-              arrow
-              // forceRender
-              action="click"
-              popup={
-                <div
-                  style={{
-                    background: 'yellow',
-                    border: '1px solid blue',
-                    width: 200,
-                    height: '75vh',
-                    opacity: 0.9,
-                  }}
-                >
-                  Popup 75vh
-                </div>
-              }
-              popupStyle={{ boxShadow: '0 0 5px red' }}
-              popupVisible
-              popupPlacement="top"
-              builtinPlacements={builtinPlacements}
-            >
-              <span
-                style={{
-                  background: 'green',
-                  color: '#FFF',
-                  paddingBlock: 30,
-                  paddingInline: 70,
-                  opacity: 0.9,
-                  transform: 'scale(0.6)',
-                  display: 'inline-block',
-                }}
-              >
-                Target
-              </span>
-            </Trigger>
-          </div>
-        </div>
-      </div>
-
-      {/* <div style={{ height: '100vh' }} /> */}
-    </React.StrictMode>
-  );
-};
diff --git a/docs/examples/nested.tsx b/docs/examples/nested.tsx
deleted file mode 100644
index 3412438..0000000
--- a/docs/examples/nested.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-/* eslint no-console:0 */
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Trigger from 'rc-trigger';
-import '../../assets/index.less';
-
-const builtinPlacements = {
-  left: {
-    points: ['cr', 'cl'],
-  },
-  right: {
-    points: ['cl', 'cr'],
-  },
-  top: {
-    points: ['bc', 'tc'],
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-  },
-  topRight: {
-    points: ['br', 'tr'],
-  },
-  bottomRight: {
-    points: ['tr', 'br'],
-  },
-  bottomLeft: {
-    points: ['tl', 'bl'],
-  },
-};
-
-const popupBorderStyle = {
-  border: '1px solid red',
-  padding: 10,
-};
-
-const OuterContent = ({ getContainer }) => {
-  return ReactDOM.createPortal(
-    <div>
-      I am outer content
-      <button
-        onMouseDown={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        Stop Pop
-      </button>
-    </div>,
-    getContainer(),
-  );
-};
-
-const Test = () => {
-  const containerRef = React.useRef();
-  const outerDivRef = React.useRef();
-
-  const innerTrigger = (
-    <div style={popupBorderStyle}>
-      <div ref={containerRef} />
-      <Trigger
-        popupPlacement="bottom"
-        action={['click']}
-        builtinPlacements={builtinPlacements}
-        getPopupContainer={() => containerRef.current}
-        popup={<div style={popupBorderStyle}>I am inner Trigger Popup</div>}
-      >
-        <span href="#" style={{ margin: 20 }}>
-          clickToShowInnerTrigger
-        </span>
-      </Trigger>
-    </div>
-  );
-  return (
-    <div style={{ margin: 200 }}>
-      <div>
-        <Trigger
-          popupPlacement="left"
-          action={['click']}
-          builtinPlacements={builtinPlacements}
-          popup={
-            <div style={popupBorderStyle}>
-              i am a click popup
-              <OuterContent getContainer={() => outerDivRef.current} />
-            </div>
-          }
-        >
-          <span>
-            <Trigger
-              popupPlacement="bottom"
-              action={['hover']}
-              builtinPlacements={builtinPlacements}
-              popup={<div style={popupBorderStyle}>i am a hover popup</div>}
-            >
-              <span href="#" style={{ margin: 20 }}>
-                trigger
-              </span>
-            </Trigger>
-          </span>
-        </Trigger>
-      </div>
-      <div style={{ margin: 50 }}>
-        <Trigger
-          popupPlacement="right"
-          action={['hover']}
-          builtinPlacements={builtinPlacements}
-          popup={innerTrigger}
-        >
-          <span href="#" style={{ margin: 20 }}>
-            trigger
-          </span>
-        </Trigger>
-      </div>
-
-      <div
-        ref={outerDivRef}
-        style={{
-          position: 'fixed',
-          right: 0,
-          bottom: 0,
-          width: 200,
-          height: 200,
-          background: 'red',
-        }}
-      />
-    </div>
-  );
-};
-
-export default Test;
diff --git a/docs/examples/point.less b/docs/examples/point.less
deleted file mode 100644
index 4adc341..0000000
--- a/docs/examples/point.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.point-popup {
-  pointer-events: none;
-}
\ No newline at end of file
diff --git a/docs/examples/point.tsx b/docs/examples/point.tsx
deleted file mode 100644
index 228fb18..0000000
--- a/docs/examples/point.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/* eslint no-console:0 */
-
-import React from 'react';
-import Trigger from 'rc-trigger';
-import '../../assets/index.less';
-import './point.less';
-
-const builtinPlacements = {
-  topLeft: {
-    points: ['tl', 'tl'],
-  },
-};
-
-const innerTrigger = (
-  <div style={{ padding: 20, background: 'rgba(0, 255, 0, 0.3)' }}>This is popup</div>
-);
-
-class Test extends React.Component {
-  state = {
-    action: 'click',
-    mouseEnterDelay: 0,
-  };
-
-  onActionChange = ({ target: { value } }) => {
-    this.setState({ action: value });
-  };
-
-  onDelayChange = ({ target: { value } }) => {
-    this.setState({ mouseEnterDelay: Number(value) || 0 });
-  };
-
-  render() {
-    const { action, mouseEnterDelay } = this.state;
-
-    return (
-      <div>
-        <label>
-          Trigger type:{' '}
-          <select value={action} onChange={this.onActionChange}>
-            <option>click</option>
-            <option>hover</option>
-            <option>contextMenu</option>
-          </select>
-        </label>{' '}
-        {action === 'hover' && (
-          <label>
-            Mouse enter delay:{' '}
-            <input type="text" value={mouseEnterDelay} onChange={this.onDelayChange} />
-          </label>
-        )}
-        <div style={{ margin: 50 }}>
-          <Trigger
-            popupPlacement="topLeft"
-            action={[action]}
-            popupAlign={{
-              overflow: {
-                adjustX: 1,
-                adjustY: 1,
-              },
-            }}
-            mouseEnterDelay={mouseEnterDelay}
-            popupClassName="point-popup"
-            builtinPlacements={builtinPlacements}
-            popup={innerTrigger}
-            alignPoint
-          >
-            <div
-              style={{
-                border: '1px solid red',
-                padding: '100px 0',
-                textAlign: 'center',
-              }}
-            >
-              Interactive region
-            </div>
-          </Trigger>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Test;
diff --git a/docs/examples/shadow.tsx b/docs/examples/shadow.tsx
deleted file mode 100644
index 6a1f5a2..0000000
--- a/docs/examples/shadow.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import '../../assets/index.less';
-
-const Demo = () => {
-  return (
-    <React.StrictMode>
-      <Trigger
-        arrow
-        // forceRender
-        action="click"
-        popup={
-          <div
-            style={{
-              background: 'yellow',
-              border: '1px solid blue',
-              width: 200,
-              height: 60,
-              opacity: 0.9,
-            }}
-          >
-            Popup
-          </div>
-        }
-        popupStyle={{ boxShadow: '0 0 5px red', position: 'absolute' }}
-        getPopupContainer={(item) => item.parentElement!}
-        popupAlign={{
-          points: ['bc', 'tc'],
-          overflow: {
-            shiftX: 50,
-            adjustY: true,
-          },
-          offset: [0, -10],
-        }}
-        stretch="minWidth"
-        autoDestroy
-      >
-        <span
-          style={{
-            background: 'green',
-            color: '#FFF',
-            paddingBlock: 30,
-            paddingInline: 70,
-            opacity: 0.9,
-            display: 'inline-block',
-            marginLeft: 500,
-            marginTop: 200,
-          }}
-        >
-          Target
-        </span>
-      </Trigger>
-    </React.StrictMode>
-  );
-};
-
-export default () => {
-  React.useEffect(() => {
-    const host = document.createElement('div');
-    document.body.appendChild(host);
-    host.style.background = 'rgba(255,0,0,0.1)';
-    const shadowRoot = host.attachShadow({
-      mode: 'open',
-      delegatesFocus: false,
-    });
-    const container = document.createElement('div');
-    shadowRoot.appendChild(container);
-
-    createRoot(container).render(<Demo />);
-  }, []);
-
-  return null;
-};
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
deleted file mode 100644
index 31b5388..0000000
--- a/docs/examples/simple.tsx
+++ /dev/null
@@ -1,409 +0,0 @@
-/* eslint no-console:0 */
-
-import Trigger from 'rc-trigger';
-import React from 'react';
-import '../../assets/index.less';
-
-const builtinPlacements = {
-  left: {
-    points: ['cr', 'cl'],
-    offset: [-10, 0],
-  },
-  right: {
-    points: ['cl', 'cr'],
-    offset: [10, 0],
-  },
-  top: {
-    points: ['bc', 'tc'],
-    offset: [0, -10],
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    offset: [0, 10],
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-    offset: [0, -10],
-  },
-  topRight: {
-    points: ['br', 'tr'],
-    offset: [0, -10],
-  },
-  bottomRight: {
-    points: ['tr', 'br'],
-    offset: [0, 10],
-  },
-  bottomLeft: {
-    points: ['tl', 'bl'],
-    offset: [0, 10],
-  },
-};
-
-function getPopupContainer(trigger) {
-  return trigger.parentNode;
-}
-
-const InnerTarget = (props) => (
-  <div
-    style={{
-      margin: 20,
-      display: 'inline-block',
-      background: 'rgba(255, 0, 0, 0.05)',
-    }}
-    tabIndex={0}
-    role="button"
-    {...props}
-  >
-    <p>This is a example of trigger usage.</p>
-    <p>You can adjust the value above</p>
-    <p>which will also change the behaviour of popup.</p>
-  </div>
-);
-
-const RefTarget = React.forwardRef((props, ref) => {
-  React.useImperativeHandle(ref, () => ({}));
-
-  return <InnerTarget {...props} />;
-});
-
-interface TestState {
-  mask: boolean;
-  maskClosable: boolean;
-  placement: string;
-  trigger: {
-    click?: boolean;
-    focus?: boolean;
-    hover?: boolean;
-    contextMenu?: boolean;
-  };
-  offsetX: number;
-  offsetY: number;
-  stretch: string;
-  transitionName: string;
-  destroyed?: boolean;
-  destroyPopupOnHide?: boolean;
-  autoDestroy?: boolean;
-  mobile?: boolean;
-}
-
-class Test extends React.Component<any, TestState> {
-  state: TestState = {
-    mask: true,
-    maskClosable: true,
-    placement: 'bottom',
-    trigger: {
-      click: true,
-    },
-    offsetX: undefined,
-    offsetY: undefined,
-    stretch: 'minWidth',
-    transitionName: 'rc-trigger-popup-zoom',
-  };
-
-  onPlacementChange = (e) => {
-    this.setState({
-      placement: e.target.value,
-    });
-  };
-
-  onStretch = (e) => {
-    this.setState({
-      stretch: e.target.value,
-    });
-  };
-
-  onTransitionChange = (e) => {
-    this.setState({
-      transitionName: e.target.checked ? e.target.value : '',
-    });
-  };
-
-  onTriggerChange = ({ target: { checked, value } }) => {
-    this.setState(({ trigger }) => {
-      const clone = { ...trigger };
-
-      if (checked) {
-        clone[value] = 1;
-      } else {
-        delete clone[value];
-      }
-
-      return {
-        trigger: clone,
-      };
-    });
-  };
-
-  onOffsetXChange = (e) => {
-    const targetValue = e.target.value;
-    this.setState({
-      offsetX: targetValue || undefined,
-    });
-  };
-
-  onOffsetYChange = (e) => {
-    const targetValue = e.target.value;
-    this.setState({
-      offsetY: targetValue || undefined,
-    });
-  };
-
-  onVisibleChange = (visible) => {
-    console.log('tooltip', visible);
-  };
-
-  onMask = (e) => {
-    this.setState({
-      mask: e.target.checked,
-    });
-  };
-
-  onMaskClosable = (e) => {
-    this.setState({
-      maskClosable: e.target.checked,
-    });
-  };
-
-  getPopupAlign = () => {
-    const { offsetX, offsetY } = this.state;
-    return {
-      offset: [offsetX, offsetY],
-      overflow: {
-        adjustX: 1,
-        adjustY: 1,
-      },
-    };
-  };
-
-  destroy = () => {
-    this.setState({
-      destroyed: true,
-    });
-  };
-
-  destroyPopupOnHide = (e) => {
-    this.setState({
-      destroyPopupOnHide: e.target.checked,
-    });
-  };
-
-  autoDestroy = (e) => {
-    this.setState({
-      autoDestroy: e.target.checked,
-    });
-  };
-
-  render() {
-    const { state } = this;
-    const { trigger } = state;
-    if (state.destroyed) {
-      return null;
-    }
-    return (
-      <div>
-        <div style={{ margin: '10px 20px' }}>
-          <label>
-            placement:
-            <select value={state.placement} onChange={this.onPlacementChange}>
-              <option>right</option>
-              <option>left</option>
-              <option>top</option>
-              <option>bottom</option>
-              <option>topLeft</option>
-              <option>topRight</option>
-              <option>bottomRight</option>
-              <option>bottomLeft</option>
-            </select>
-          </label>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <label>
-            Stretch:
-            <select value={state.stretch} onChange={this.onStretch}>
-              <option value="">--NONE--</option>
-              <option value="width">width</option>
-              <option value="minWidth">minWidth</option>
-              <option value="height">height</option>
-              <option value="minHeight">minHeight</option>
-            </select>
-          </label>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <label>
-            <input
-              value="rc-trigger-popup-zoom"
-              type="checkbox"
-              onChange={this.onTransitionChange}
-              checked={state.transitionName === 'rc-trigger-popup-zoom'}
-            />
-            transitionName
-          </label>
-          &nbsp;&nbsp;&nbsp;&nbsp; trigger:
-          <label>
-            <input
-              value="hover"
-              checked={!!trigger.hover}
-              type="checkbox"
-              onChange={this.onTriggerChange}
-            />
-            hover
-          </label>
-          <label>
-            <input
-              value="focus"
-              checked={!!trigger.focus}
-              type="checkbox"
-              onChange={this.onTriggerChange}
-            />
-            focus
-          </label>
-          <label>
-            <input
-              value="click"
-              checked={!!trigger.click}
-              type="checkbox"
-              onChange={this.onTriggerChange}
-            />
-            click
-          </label>
-          <label>
-            <input
-              value="contextMenu"
-              checked={!!trigger.contextMenu}
-              type="checkbox"
-              onChange={this.onTriggerChange}
-            />
-            contextMenu
-          </label>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <label>
-            <input
-              checked={!!this.state.destroyPopupOnHide}
-              type="checkbox"
-              onChange={this.destroyPopupOnHide}
-            />
-            destroyPopupOnHide
-          </label>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <label>
-            <input
-              checked={!!this.state.autoDestroy}
-              type="checkbox"
-              onChange={this.autoDestroy}
-            />
-            autoDestroy
-          </label>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <label>
-            <input
-              checked={!!this.state.mask}
-              type="checkbox"
-              onChange={this.onMask}
-            />
-            mask
-          </label>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <label>
-            <input
-              checked={!!this.state.maskClosable}
-              type="checkbox"
-              onChange={this.onMaskClosable}
-            />
-            maskClosable
-          </label>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <label>
-            <input
-              checked={!!this.state.mobile}
-              type="checkbox"
-              onChange={() => {
-                this.setState(({ mobile }) => ({
-                  mobile: !mobile,
-                }));
-              }}
-            />
-            mobile
-          </label>
-          <br />
-          <label>
-            offsetX:
-            <input
-              type="text"
-              onChange={this.onOffsetXChange}
-              style={{ width: 50 }}
-            />
-          </label>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <label>
-            offsetY:
-            <input
-              type="text"
-              onChange={this.onOffsetYChange}
-              style={{ width: 50 }}
-            />
-          </label>
-          &nbsp;&nbsp;&nbsp;&nbsp;
-          <button type="button" onClick={this.destroy}>
-            destroy
-          </button>
-        </div>
-        <div style={{ margin: 120, position: 'relative' }}>
-          <Trigger
-            getPopupContainer={getPopupContainer}
-            popupAlign={this.getPopupAlign()}
-            popupPlacement={state.placement}
-            destroyPopupOnHide={this.state.destroyPopupOnHide}
-            autoDestroy={this.state.autoDestroy}
-            // zIndex={40}
-            mask={this.state.mask}
-            maskClosable={this.state.maskClosable}
-            stretch={this.state.stretch}
-            maskAnimation="fade"
-            // mouseEnterDelay={0.1}
-            // mouseLeaveDelay={0.1}
-            action={Object.keys(state.trigger)}
-            builtinPlacements={builtinPlacements}
-            arrow
-            popupStyle={{
-              border: '1px solid red',
-              padding: 10,
-              background: 'white',
-              boxSizing: 'border-box',
-            }}
-            popup={<div>i am a popup</div>}
-            popupTransitionName={state.transitionName}
-            mobile={
-              state.mobile
-                ? {
-                    popupMotion: {
-                      motionName: 'rc-trigger-popup-mobile-fade',
-                    },
-                    popupClassName: 'rc-trigger-popup-mobile',
-                    popupStyle: {
-                      padding: 16,
-                      borderTop: '1px solid red',
-                      background: '#FFF',
-                      textAlign: 'center',
-                    },
-                    popupRender: (node) => (
-                      <>
-                        <div>
-                          <input
-                            style={{ width: '100%' }}
-                            placeholder="additional content"
-                          />
-                        </div>
-                        {node}
-                      </>
-                    ),
-                  }
-                : null
-            }
-          >
-            <RefTarget />
-          </Trigger>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Test;
diff --git a/docs/examples/static-scroll.tsx b/docs/examples/static-scroll.tsx
deleted file mode 100644
index 1f0e6e2..0000000
--- a/docs/examples/static-scroll.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/* eslint no-console:0 */
-import Trigger from 'rc-trigger';
-import React from 'react';
-import '../../assets/index.less';
-import { builtinPlacements } from './inside';
-
-export default () => {
-  return (
-    <React.StrictMode>
-      <div
-        style={{
-          background: 'rgba(0, 0, 255, 0.1)',
-          margin: `64px`,
-          height: 200,
-          overflow: 'auto',
-          // Must have for test
-          position: 'static',
-        }}
-      >
-        <Trigger
-          arrow
-          popup={
-            <div
-              style={{
-                background: 'yellow',
-                border: '1px solid blue',
-                width: 200,
-                height: 60,
-                opacity: 0.9,
-              }}
-            >
-              Popup
-            </div>
-          }
-          popupStyle={{ boxShadow: '0 0 5px red' }}
-          popupVisible
-          builtinPlacements={builtinPlacements}
-          popupPlacement="top"
-          stretch="minWidth"
-          getPopupContainer={(e) => e.parentElement!}
-        >
-          <span
-            style={{
-              background: 'green',
-              color: '#FFF',
-              paddingBlock: 30,
-              paddingInline: 70,
-              opacity: 0.9,
-              transform: 'scale(0.6)',
-              display: 'inline-block',
-            }}
-          >
-            Target
-          </span>
-        </Trigger>
-        {new Array(20).fill(null).map((_, index) => (
-          <h1 key={index} style={{ width: '200vw' }}>
-            Placeholder Line {index}
-          </h1>
-        ))}
-      </div>
-    </React.StrictMode>
-  );
-};
diff --git a/docs/examples/visible-fallback.tsx b/docs/examples/visible-fallback.tsx
deleted file mode 100644
index 3e0881f..0000000
--- a/docs/examples/visible-fallback.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-/* eslint no-console:0 */
-import type { AlignType, TriggerRef } from 'rc-trigger';
-import Trigger from 'rc-trigger';
-import React from 'react';
-import '../../assets/index.less';
-
-const builtinPlacements: Record<string, AlignType> = {
-  top: {
-    points: ['bc', 'tc'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    offset: [0, 0],
-    htmlRegion: 'visibleFirst',
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    offset: [0, 0],
-    htmlRegion: 'visibleFirst',
-  },
-};
-
-export default () => {
-  const [enoughTop, setEnoughTop] = React.useState(true);
-
-  const triggerRef = React.useRef<TriggerRef>();
-
-  React.useEffect(() => {
-    triggerRef.current?.forceAlign();
-  }, [enoughTop]);
-
-  return (
-    <React.StrictMode>
-      <p>`visibleFirst` should not show in hidden region if still scrollable</p>
-
-      <label>
-        <input
-          type="checkbox"
-          checked={enoughTop}
-          onChange={() => setEnoughTop((v) => !v)}
-        />
-        Enough Top (Placement: bottom)
-      </label>
-
-      <div
-        style={{
-          position: 'absolute',
-          left: '50%',
-          top: `calc(100vh - 100px - 90px - 50px)`,
-          transform: 'translateX(-50%)',
-          boxShadow: '0 0 1px blue',
-          overflow: 'hidden',
-          width: 500,
-          height: 1000,
-        }}
-      >
-        <Trigger
-          arrow
-          action="click"
-          popupVisible
-          ref={triggerRef}
-          popup={
-            <div
-              style={{
-                background: 'yellow',
-                border: '1px solid blue',
-                width: 300,
-                height: 100,
-                opacity: 0.9,
-                boxSizing: 'border-box',
-              }}
-            >
-              Should Always place bottom
-            </div>
-          }
-          getPopupContainer={(n) => n.parentNode as any}
-          popupStyle={{ boxShadow: '0 0 5px red' }}
-          popupPlacement={enoughTop ? 'bottom' : 'top'}
-          builtinPlacements={builtinPlacements}
-          stretch="minWidth"
-        >
-          <span
-            style={{
-              background: 'green',
-              color: '#FFF',
-              opacity: 0.9,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: 100,
-              height: 100,
-              position: 'absolute',
-              left: '50%',
-              top: enoughTop ? 200 : 90,
-              transform: 'translateX(-50%)',
-            }}
-          >
-            Target
-          </span>
-        </Trigger>
-      </div>
-    </React.StrictMode>
-  );
-};
diff --git a/docs/index.md b/docs/index.md
index 2782d1c..1f6b8fa 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,7 +1,7 @@
 ---
 hero:
-  title: rc-trigger
-  description: React Trigger Component
+  title: cssinjs-util
+  description: A cssinjs util library to support Ant Design (antd) and its ecosystem libraries.
 ---
 
 <embed src="../README.md"></embed>
\ No newline at end of file
diff --git a/index.js b/index.js
index 274f820..fd4d7e5 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1 @@
-// export this package's api
-import Trigger from './src/';
-export default Trigger;
+module.exports = require('./src/');
diff --git a/now.json b/now.json
deleted file mode 100644
index 76d28fa..0000000
--- a/now.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "version": 2,
-  "name": "rc-trigger",
-  "builds": [
-    {
-      "src": "package.json",
-      "use": "@now/static-build",
-      "config": { "distDir": ".doc" }
-    }
-  ]
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index 7d14086..d705a2d 100644
--- a/package.json
+++ b/package.json
@@ -1,47 +1,42 @@
 {
-  "name": "@rc-component/trigger",
-  "version": "2.2.0",
-  "description": "base abstract trigger component for react",
-  "engines": {
-    "node": ">=8.x"
-  },
+  "name": "@ant-design/cssinjs-util",
+  "version": "1.0.0",
+  "description": "A cssinjs util library to support Ant Design (antd) and its ecosystem libraries.",
   "keywords": [
     "react",
-    "react-component",
-    "react-trigger",
-    "trigger"
+    "cssinjs",
+    "cssinjs-util",
+    "antd",
+    "ant-design"
   ],
-  "homepage": "https://github.com/react-component/trigger",
+  "homepage": "https://github.com/ant-design/cssinjs-util",
   "author": "",
   "repository": {
     "type": "git",
-    "url": "https://github.com/react-component/trigger.git"
+    "url": "https://github.com/ant-design/cssinjs-util.git"
   },
   "bugs": {
-    "url": "https://github.com/react-component/trigger/issues"
+    "url": "https://github.com/ant-design/cssinjs-util/issues"
   },
   "files": [
     "es",
     "lib",
-    "assets/**/*.css",
-    "assets/**/*.less"
+    "dist"
   ],
   "license": "MIT",
   "main": "./lib/index",
   "module": "./es/index",
   "scripts": {
     "start": "dumi dev",
-    "build": "dumi build",
-    "compile": "father build && lessc assets/index.less assets/index.css",
+    "compile": "father build",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
     "test": "rc-test",
-    "coverage": "rc-test --coverage",
-    "now-build": "npm run build"
+    "coverage": "rc-test --coverage"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^1.0.0",
     "@testing-library/jest-dom": "^6.1.4",
+    "@rc-component/father-plugin": "^1.0.1",
     "@testing-library/react": "^15.0.4",
     "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.2",
@@ -63,10 +58,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@rc-component/portal": "^1.1.0",
+    "@ant-design/cssinjs": "^1.21.0",
     "classnames": "^2.3.2",
-    "rc-motion": "^2.0.0",
-    "rc-resize-observer": "^1.3.1",
     "rc-util": "^5.38.0"
   },
   "peerDependencies": {
diff --git a/src/Popup/Arrow.tsx b/src/Popup/Arrow.tsx
deleted file mode 100644
index c61c49e..0000000
--- a/src/Popup/Arrow.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import classNames from 'classnames';
-import * as React from 'react';
-import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
-
-export interface ArrowProps {
-  prefixCls: string;
-  align: AlignType;
-  arrow: ArrowTypeOuter;
-  arrowPos: ArrowPos;
-}
-
-export default function Arrow(props: ArrowProps) {
-  const { prefixCls, align, arrow, arrowPos } = props;
-
-  const { className, content } = arrow || {};
-  const { x = 0, y = 0 } = arrowPos;
-
-  const arrowRef = React.useRef<HTMLDivElement>();
-
-  // Skip if no align
-  if (!align || !align.points) {
-    return null;
-  }
-
-  const alignStyle: React.CSSProperties = {
-    position: 'absolute',
-  };
-
-  // Skip if no need to align
-  if (align.autoArrow !== false) {
-    const popupPoints = align.points[0];
-    const targetPoints = align.points[1];
-    const popupTB = popupPoints[0];
-    const popupLR = popupPoints[1];
-    const targetTB = targetPoints[0];
-    const targetLR = targetPoints[1];
-
-    // Top & Bottom
-    if (popupTB === targetTB || !['t', 'b'].includes(popupTB)) {
-      alignStyle.top = y;
-    } else if (popupTB === 't') {
-      alignStyle.top = 0;
-    } else {
-      alignStyle.bottom = 0;
-    }
-
-    // Left & Right
-    if (popupLR === targetLR || !['l', 'r'].includes(popupLR)) {
-      alignStyle.left = x;
-    } else if (popupLR === 'l') {
-      alignStyle.left = 0;
-    } else {
-      alignStyle.right = 0;
-    }
-  }
-
-  return (
-    <div
-      ref={arrowRef}
-      className={classNames(`${prefixCls}-arrow`, className)}
-      style={alignStyle}
-    >
-      {content}
-    </div>
-  );
-}
diff --git a/src/Popup/Mask.tsx b/src/Popup/Mask.tsx
deleted file mode 100644
index 86429ee..0000000
--- a/src/Popup/Mask.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import classNames from 'classnames';
-import type { CSSMotionProps } from 'rc-motion';
-import CSSMotion from 'rc-motion';
-import * as React from 'react';
-
-export interface MaskProps {
-  prefixCls: string;
-  open?: boolean;
-  zIndex?: number;
-  mask?: boolean;
-
-  // Motion
-  motion?: CSSMotionProps;
-}
-
-export default function Mask(props: MaskProps) {
-  const {
-    prefixCls,
-    open,
-    zIndex,
-
-    mask,
-    motion,
-  } = props;
-
-  if (!mask) {
-    return null;
-  }
-
-  return (
-    <CSSMotion {...motion} motionAppear visible={open} removeOnLeave>
-      {({ className }) => (
-        <div
-          style={{ zIndex }}
-          className={classNames(`${prefixCls}-mask`, className)}
-        />
-      )}
-    </CSSMotion>
-  );
-}
diff --git a/src/Popup/PopupContent.tsx b/src/Popup/PopupContent.tsx
deleted file mode 100644
index eb96dff..0000000
--- a/src/Popup/PopupContent.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-export interface PopupContentProps {
-  children?: React.ReactNode;
-  cache?: boolean;
-}
-
-const PopupContent = React.memo(
-  ({ children }: PopupContentProps) => children as React.ReactElement,
-  (_, next) => next.cache,
-);
-
-if (process.env.NODE_ENV !== 'production') {
-  PopupContent.displayName = 'PopupContent';
-}
-
-export default PopupContent;
diff --git a/src/Popup/index.tsx b/src/Popup/index.tsx
deleted file mode 100644
index e5d64d4..0000000
--- a/src/Popup/index.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import classNames from 'classnames';
-import type { CSSMotionProps } from 'rc-motion';
-import CSSMotion from 'rc-motion';
-import ResizeObserver from 'rc-resize-observer';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import { composeRef } from 'rc-util/lib/ref';
-import * as React from 'react';
-import type { TriggerProps } from '../';
-import type { AlignType, ArrowPos, ArrowTypeOuter } from '../interface';
-import Arrow from './Arrow';
-import Mask from './Mask';
-import PopupContent from './PopupContent';
-
-export interface PopupProps {
-  prefixCls: string;
-  className?: string;
-  style?: React.CSSProperties;
-  popup?: TriggerProps['popup'];
-  target: HTMLElement;
-  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-  onPointerEnter?: React.MouseEventHandler<HTMLDivElement>;
-  zIndex?: number;
-
-  mask?: boolean;
-  onVisibleChanged: (visible: boolean) => void;
-
-  // Arrow
-  align?: AlignType;
-  arrow?: ArrowTypeOuter;
-  arrowPos: ArrowPos;
-
-  // Open
-  open: boolean;
-  /** Tell Portal that should keep in screen. e.g. should wait all motion end */
-  keepDom: boolean;
-  fresh?: boolean;
-
-  // Click
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-
-  // Motion
-  motion?: CSSMotionProps;
-  maskMotion?: CSSMotionProps;
-
-  // Portal
-  forceRender?: boolean;
-  getPopupContainer?: TriggerProps['getPopupContainer'];
-  autoDestroy?: boolean;
-  portal: React.ComponentType<any>;
-
-  // Align
-  ready: boolean;
-  offsetX: number;
-  offsetY: number;
-  offsetR: number;
-  offsetB: number;
-  onAlign: VoidFunction;
-  onPrepare: () => Promise<void>;
-
-  // stretch
-  stretch?: string;
-  targetWidth?: number;
-  targetHeight?: number;
-}
-
-const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
-  const {
-    popup,
-    className,
-    prefixCls,
-    style,
-    target,
-
-    onVisibleChanged,
-
-    // Open
-    open,
-    keepDom,
-    fresh,
-
-    // Click
-    onClick,
-
-    // Mask
-    mask,
-
-    // Arrow
-    arrow,
-    arrowPos,
-    align,
-
-    // Motion
-    motion,
-    maskMotion,
-
-    // Portal
-    forceRender,
-    getPopupContainer,
-    autoDestroy,
-    portal: Portal,
-
-    zIndex,
-
-    onMouseEnter,
-    onMouseLeave,
-    onPointerEnter,
-
-    ready,
-    offsetX,
-    offsetY,
-    offsetR,
-    offsetB,
-    onAlign,
-    onPrepare,
-
-    stretch,
-    targetWidth,
-    targetHeight,
-  } = props;
-
-  const childNode = typeof popup === 'function' ? popup() : popup;
-
-  // We can not remove holder only when motion finished.
-  const isNodeVisible = open || keepDom;
-
-  // ======================= Container ========================
-  const getPopupContainerNeedParams = getPopupContainer?.length > 0;
-
-  const [show, setShow] = React.useState(
-    !getPopupContainer || !getPopupContainerNeedParams,
-  );
-
-  // Delay to show since `getPopupContainer` need target element
-  useLayoutEffect(() => {
-    if (!show && getPopupContainerNeedParams && target) {
-      setShow(true);
-    }
-  }, [show, getPopupContainerNeedParams, target]);
-
-  // ========================= Render =========================
-  if (!show) {
-    return null;
-  }
-
-  // >>>>> Offset
-  const AUTO = 'auto' as const;
-
-  const offsetStyle: React.CSSProperties = {
-    left: '-1000vw',
-    top: '-1000vh',
-    right: AUTO,
-    bottom: AUTO,
-  };
-
-  // Set align style
-  if (ready || !open) {
-    const { points } = align;
-    const dynamicInset =
-      align.dynamicInset || (align as any)._experimental?.dynamicInset;
-    const alignRight = dynamicInset && points[0][1] === 'r';
-    const alignBottom = dynamicInset && points[0][0] === 'b';
-
-    if (alignRight) {
-      offsetStyle.right = offsetR;
-      offsetStyle.left = AUTO;
-    } else {
-      offsetStyle.left = offsetX;
-      offsetStyle.right = AUTO;
-    }
-
-    if (alignBottom) {
-      offsetStyle.bottom = offsetB;
-      offsetStyle.top = AUTO;
-    } else {
-      offsetStyle.top = offsetY;
-      offsetStyle.bottom = AUTO;
-    }
-  }
-
-  // >>>>> Misc
-  const miscStyle: React.CSSProperties = {};
-  if (stretch) {
-    if (stretch.includes('height') && targetHeight) {
-      miscStyle.height = targetHeight;
-    } else if (stretch.includes('minHeight') && targetHeight) {
-      miscStyle.minHeight = targetHeight;
-    }
-    if (stretch.includes('width') && targetWidth) {
-      miscStyle.width = targetWidth;
-    } else if (stretch.includes('minWidth') && targetWidth) {
-      miscStyle.minWidth = targetWidth;
-    }
-  }
-
-  if (!open) {
-    miscStyle.pointerEvents = 'none';
-  }
-
-  return (
-    <Portal
-      open={forceRender || isNodeVisible}
-      getContainer={getPopupContainer && (() => getPopupContainer(target))}
-      autoDestroy={autoDestroy}
-    >
-      <Mask
-        prefixCls={prefixCls}
-        open={open}
-        zIndex={zIndex}
-        mask={mask}
-        motion={maskMotion}
-      />
-      <ResizeObserver onResize={onAlign} disabled={!open}>
-        {(resizeObserverRef) => {
-          return (
-            <CSSMotion
-              motionAppear
-              motionEnter
-              motionLeave
-              removeOnLeave={false}
-              forceRender={forceRender}
-              leavedClassName={`${prefixCls}-hidden`}
-              {...motion}
-              onAppearPrepare={onPrepare}
-              onEnterPrepare={onPrepare}
-              visible={open}
-              onVisibleChanged={(nextVisible) => {
-                motion?.onVisibleChanged?.(nextVisible);
-                onVisibleChanged(nextVisible);
-              }}
-            >
-              {(
-                { className: motionClassName, style: motionStyle },
-                motionRef,
-              ) => {
-                const cls = classNames(prefixCls, motionClassName, className);
-
-                return (
-                  <div
-                    ref={composeRef(resizeObserverRef, ref, motionRef)}
-                    className={cls}
-                    style={
-                      {
-                        '--arrow-x': `${arrowPos.x || 0}px`,
-                        '--arrow-y': `${arrowPos.y || 0}px`,
-                        ...offsetStyle,
-                        ...miscStyle,
-                        ...motionStyle,
-                        boxSizing: 'border-box',
-                        zIndex,
-                        ...style,
-                      } as React.CSSProperties
-                    }
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                    onPointerEnter={onPointerEnter}
-                    onClick={onClick}
-                  >
-                    {arrow && (
-                      <Arrow
-                        prefixCls={prefixCls}
-                        arrow={arrow}
-                        arrowPos={arrowPos}
-                        align={align}
-                      />
-                    )}
-                    <PopupContent cache={!open && !fresh}>
-                      {childNode}
-                    </PopupContent>
-                  </div>
-                );
-              }}
-            </CSSMotion>
-          );
-        }}
-      </ResizeObserver>
-    </Portal>
-  );
-});
-
-if (process.env.NODE_ENV !== 'production') {
-  Popup.displayName = 'Popup';
-}
-
-export default Popup;
diff --git a/src/TriggerWrapper.tsx b/src/TriggerWrapper.tsx
deleted file mode 100644
index 48d27cf..0000000
--- a/src/TriggerWrapper.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { fillRef, supportRef, useComposeRef } from 'rc-util/lib/ref';
-import * as React from 'react';
-import type { TriggerProps } from '.';
-
-export interface TriggerWrapperProps {
-  getTriggerDOMNode?: TriggerProps['getTriggerDOMNode'];
-  children: React.ReactElement;
-}
-
-const TriggerWrapper = React.forwardRef<HTMLElement, TriggerWrapperProps>(
-  (props, ref) => {
-    const { children, getTriggerDOMNode } = props;
-
-    const canUseRef = supportRef(children);
-
-    // When use `getTriggerDOMNode`, we should do additional work to get the real dom
-    const setRef = React.useCallback(
-      (node) => {
-        fillRef(ref, getTriggerDOMNode ? getTriggerDOMNode(node) : node);
-      },
-      [getTriggerDOMNode],
-    );
-
-    const mergedRef = useComposeRef(setRef, (children as any).ref);
-
-    return canUseRef
-      ? React.cloneElement(children, {
-          ref: mergedRef,
-        })
-      : children;
-  },
-);
-
-if (process.env.NODE_ENV !== 'production') {
-  TriggerWrapper.displayName = 'TriggerWrapper';
-}
-
-export default TriggerWrapper;
diff --git a/src/context.ts b/src/context.ts
deleted file mode 100644
index 429b350..0000000
--- a/src/context.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export interface TriggerContextProps {
-  registerSubPopup: (id: string, node: HTMLElement) => void;
-}
-
-const TriggerContext = React.createContext<TriggerContextProps | null>(null);
-
-export default TriggerContext;
diff --git a/src/hooks/useAction.ts b/src/hooks/useAction.ts
deleted file mode 100644
index 99d78bb..0000000
--- a/src/hooks/useAction.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react';
-import type { ActionType } from '../interface';
-
-type ActionTypes = ActionType | ActionType[];
-
-function toArray<T>(val?: T | T[]) {
-  return val ? (Array.isArray(val) ? val : [val]) : [];
-}
-
-export default function useAction(
-  mobile: boolean,
-  action: ActionTypes,
-  showAction?: ActionTypes,
-  hideAction?: ActionTypes,
-): [showAction: Set<ActionType>, hideAction: Set<ActionType>] {
-  return React.useMemo(() => {
-    const mergedShowAction = toArray(showAction ?? action);
-    const mergedHideAction = toArray(hideAction ?? action);
-
-    const showActionSet = new Set(mergedShowAction);
-    const hideActionSet = new Set(mergedHideAction);
-
-    if (mobile) {
-      if (showActionSet.has('hover')) {
-        showActionSet.delete('hover');
-        showActionSet.add('click');
-      }
-
-      if (hideActionSet.has('hover')) {
-        hideActionSet.delete('hover');
-        hideActionSet.add('click');
-      }
-    }
-
-    return [showActionSet, hideActionSet];
-  }, [mobile, action, showAction, hideAction]);
-}
diff --git a/src/hooks/useAlign.ts b/src/hooks/useAlign.ts
deleted file mode 100644
index 6c15a09..0000000
--- a/src/hooks/useAlign.ts
+++ /dev/null
@@ -1,746 +0,0 @@
-import { isDOM } from 'rc-util/lib/Dom/findDOMNode';
-import isVisible from 'rc-util/lib/Dom/isVisible';
-import useEvent from 'rc-util/lib/hooks/useEvent';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import * as React from 'react';
-import type { TriggerProps } from '..';
-import type {
-  AlignPointLeftRight,
-  AlignPointTopBottom,
-  AlignType,
-  OffsetType,
-} from '../interface';
-import { collectScroller, getVisibleArea, getWin, toNum } from '../util';
-
-type Rect = Record<'x' | 'y' | 'width' | 'height', number>;
-
-type Points = [topBottom: AlignPointTopBottom, leftRight: AlignPointLeftRight];
-
-function getUnitOffset(size: number, offset: OffsetType = 0) {
-  const offsetStr = `${offset}`;
-  const cells = offsetStr.match(/^(.*)\%$/);
-  if (cells) {
-    return size * (parseFloat(cells[1]) / 100);
-  }
-  return parseFloat(offsetStr);
-}
-
-function getNumberOffset(
-  rect: { width: number; height: number },
-  offset?: OffsetType[],
-) {
-  const [offsetX, offsetY] = offset || [];
-
-  return [
-    getUnitOffset(rect.width, offsetX),
-    getUnitOffset(rect.height, offsetY),
-  ];
-}
-
-function splitPoints(points: string = ''): Points {
-  return [points[0] as any, points[1] as any];
-}
-
-function getAlignPoint(rect: Rect, points: Points) {
-  const topBottom = points[0];
-  const leftRight = points[1];
-
-  let x: number;
-  let y: number;
-
-  // Top & Bottom
-  if (topBottom === 't') {
-    y = rect.y;
-  } else if (topBottom === 'b') {
-    y = rect.y + rect.height;
-  } else {
-    y = rect.y + rect.height / 2;
-  }
-
-  // Left & Right
-  if (leftRight === 'l') {
-    x = rect.x;
-  } else if (leftRight === 'r') {
-    x = rect.x + rect.width;
-  } else {
-    x = rect.x + rect.width / 2;
-  }
-
-  return { x, y };
-}
-
-function reversePoints(points: Points, index: number): string {
-  const reverseMap = {
-    t: 'b',
-    b: 't',
-    l: 'r',
-    r: 'l',
-  };
-
-  return points
-    .map((point, i) => {
-      if (i === index) {
-        return reverseMap[point] || 'c';
-      }
-      return point;
-    })
-    .join('');
-}
-
-export default function useAlign(
-  open: boolean,
-  popupEle: HTMLElement,
-  target: HTMLElement | [x: number, y: number],
-  placement: string,
-  builtinPlacements: any,
-  popupAlign?: AlignType,
-  onPopupAlign?: TriggerProps['onPopupAlign'],
-): [
-  ready: boolean,
-  offsetX: number,
-  offsetY: number,
-  offsetR: number,
-  offsetB: number,
-  arrowX: number,
-  arrowY: number,
-  scaleX: number,
-  scaleY: number,
-  align: AlignType,
-  onAlign: VoidFunction,
-] {
-  const [offsetInfo, setOffsetInfo] = React.useState<{
-    ready: boolean;
-    offsetX: number;
-    offsetY: number;
-    offsetR: number;
-    offsetB: number;
-    arrowX: number;
-    arrowY: number;
-    scaleX: number;
-    scaleY: number;
-    align: AlignType;
-  }>({
-    ready: false,
-    offsetX: 0,
-    offsetY: 0,
-    offsetR: 0,
-    offsetB: 0,
-    arrowX: 0,
-    arrowY: 0,
-    scaleX: 1,
-    scaleY: 1,
-    align: builtinPlacements[placement] || {},
-  });
-  const alignCountRef = React.useRef(0);
-
-  const scrollerList = React.useMemo(() => {
-    if (!popupEle) {
-      return [];
-    }
-
-    return collectScroller(popupEle);
-  }, [popupEle]);
-
-  // ========================= Flip ==========================
-  // We will memo flip info.
-  // If size change to make flip, it will memo the flip info and use it in next align.
-  const prevFlipRef = React.useRef<{
-    tb?: boolean;
-    bt?: boolean;
-    lr?: boolean;
-    rl?: boolean;
-  }>({});
-
-  const resetFlipCache = () => {
-    prevFlipRef.current = {};
-  };
-
-  if (!open) {
-    resetFlipCache();
-  }
-
-  // ========================= Align =========================
-  const onAlign = useEvent(() => {
-    if (popupEle && target && open) {
-      const popupElement = popupEle;
-
-      const doc = popupElement.ownerDocument;
-      const win = getWin(popupElement);
-
-      const {
-        width,
-        height,
-        position: popupPosition,
-      } = win.getComputedStyle(popupElement);
-
-      const originLeft = popupElement.style.left;
-      const originTop = popupElement.style.top;
-      const originRight = popupElement.style.right;
-      const originBottom = popupElement.style.bottom;
-      const originOverflow = popupElement.style.overflow;
-
-      // Placement
-      const placementInfo: AlignType = {
-        ...builtinPlacements[placement],
-        ...popupAlign,
-      };
-
-      // placeholder element
-      const placeholderElement = doc.createElement('div');
-      popupElement.parentElement?.appendChild(placeholderElement);
-      placeholderElement.style.left = `${popupElement.offsetLeft}px`;
-      placeholderElement.style.top = `${popupElement.offsetTop}px`;
-      placeholderElement.style.position = popupPosition;
-      placeholderElement.style.height = `${popupElement.offsetHeight}px`;
-      placeholderElement.style.width = `${popupElement.offsetWidth}px`;
-
-      // Reset first
-      popupElement.style.left = '0';
-      popupElement.style.top = '0';
-      popupElement.style.right = 'auto';
-      popupElement.style.bottom = 'auto';
-      popupElement.style.overflow = 'hidden';
-
-      // Calculate align style, we should consider `transform` case
-      let targetRect: Rect;
-      if (Array.isArray(target)) {
-        targetRect = {
-          x: target[0],
-          y: target[1],
-          width: 0,
-          height: 0,
-        };
-      } else {
-        const rect = target.getBoundingClientRect();
-        targetRect = {
-          x: rect.x,
-          y: rect.y,
-          width: rect.width,
-          height: rect.height,
-        };
-      }
-      const popupRect = popupElement.getBoundingClientRect();
-      const {
-        clientWidth,
-        clientHeight,
-        scrollWidth,
-        scrollHeight,
-        scrollTop,
-        scrollLeft,
-      } = doc.documentElement;
-
-      const popupHeight = popupRect.height;
-      const popupWidth = popupRect.width;
-
-      const targetHeight = targetRect.height;
-      const targetWidth = targetRect.width;
-
-      // Get bounding of visible area
-      const visibleRegion = {
-        left: 0,
-        top: 0,
-        right: clientWidth,
-        bottom: clientHeight,
-      };
-
-      const scrollRegion = {
-        left: -scrollLeft,
-        top: -scrollTop,
-        right: scrollWidth - scrollLeft,
-        bottom: scrollHeight - scrollTop,
-      };
-
-      let { htmlRegion } = placementInfo;
-      const VISIBLE = 'visible' as const;
-      const VISIBLE_FIRST = 'visibleFirst' as const;
-      if (htmlRegion !== 'scroll' && htmlRegion !== VISIBLE_FIRST) {
-        htmlRegion = VISIBLE;
-      }
-      const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
-
-      const scrollRegionArea = getVisibleArea(scrollRegion, scrollerList);
-      const visibleRegionArea = getVisibleArea(visibleRegion, scrollerList);
-
-      const visibleArea =
-        htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
-
-      // When set to `visibleFirst`,
-      // the check `adjust` logic will use `visibleRegion` for check first.
-      const adjustCheckVisibleArea = isVisibleFirst
-        ? visibleRegionArea
-        : visibleArea;
-
-      // Record right & bottom align data
-      popupElement.style.left = 'auto';
-      popupElement.style.top = 'auto';
-      popupElement.style.right = '0';
-      popupElement.style.bottom = '0';
-
-      const popupMirrorRect = popupElement.getBoundingClientRect();
-
-      // Reset back
-      popupElement.style.left = originLeft;
-      popupElement.style.top = originTop;
-      popupElement.style.right = originRight;
-      popupElement.style.bottom = originBottom;
-      popupElement.style.overflow = originOverflow;
-
-      popupElement.parentElement?.removeChild(placeholderElement);
-
-      // Calculate scale
-      const scaleX = toNum(
-        Math.round((popupWidth / parseFloat(width)) * 1000) / 1000,
-      );
-      const scaleY = toNum(
-        Math.round((popupHeight / parseFloat(height)) * 1000) / 1000,
-      );
-
-      // No need to align since it's not visible in view
-      if (
-        scaleX === 0 ||
-        scaleY === 0 ||
-        (isDOM(target) && !isVisible(target))
-      ) {
-        return;
-      }
-
-      // Offset
-      const { offset, targetOffset } = placementInfo;
-      let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
-      const [targetOffsetX, targetOffsetY] = getNumberOffset(
-        targetRect,
-        targetOffset,
-      );
-
-      targetRect.x -= targetOffsetX;
-      targetRect.y -= targetOffsetY;
-
-      // Points
-      const [popupPoint, targetPoint] = placementInfo.points || [];
-      const targetPoints = splitPoints(targetPoint);
-      const popupPoints = splitPoints(popupPoint);
-
-      const targetAlignPoint = getAlignPoint(targetRect, targetPoints);
-      const popupAlignPoint = getAlignPoint(popupRect, popupPoints);
-
-      // Real align info may not same as origin one
-      const nextAlignInfo = {
-        ...placementInfo,
-      };
-
-      // Next Offset
-      let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
-      let nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
-
-      // ============== Intersection ===============
-      // Get area by position. Used for check if flip area is better
-      function getIntersectionVisibleArea(
-        offsetX: number,
-        offsetY: number,
-        area = visibleArea,
-      ) {
-        const l = popupRect.x + offsetX;
-        const t = popupRect.y + offsetY;
-
-        const r = l + popupWidth;
-        const b = t + popupHeight;
-
-        const visibleL = Math.max(l, area.left);
-        const visibleT = Math.max(t, area.top);
-        const visibleR = Math.min(r, area.right);
-        const visibleB = Math.min(b, area.bottom);
-
-        return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
-      }
-
-      const originIntersectionVisibleArea = getIntersectionVisibleArea(
-        nextOffsetX,
-        nextOffsetY,
-      );
-
-      // As `visibleFirst`, we prepare this for check
-      const originIntersectionRecommendArea = getIntersectionVisibleArea(
-        nextOffsetX,
-        nextOffsetY,
-        visibleRegionArea,
-      );
-
-      // ========================== Overflow ===========================
-      const targetAlignPointTL = getAlignPoint(targetRect, ['t', 'l']);
-      const popupAlignPointTL = getAlignPoint(popupRect, ['t', 'l']);
-      const targetAlignPointBR = getAlignPoint(targetRect, ['b', 'r']);
-      const popupAlignPointBR = getAlignPoint(popupRect, ['b', 'r']);
-
-      const overflow = placementInfo.overflow || {};
-      const { adjustX, adjustY, shiftX, shiftY } = overflow;
-
-      const supportAdjust = (val: boolean | number) => {
-        if (typeof val === 'boolean') {
-          return val;
-        }
-        return val >= 0;
-      };
-
-      // Prepare position
-      let nextPopupY: number;
-      let nextPopupBottom: number;
-      let nextPopupX: number;
-      let nextPopupRight: number;
-
-      function syncNextPopupPosition() {
-        nextPopupY = popupRect.y + nextOffsetY;
-        nextPopupBottom = nextPopupY + popupHeight;
-        nextPopupX = popupRect.x + nextOffsetX;
-        nextPopupRight = nextPopupX + popupWidth;
-      }
-      syncNextPopupPosition();
-
-      // >>>>>>>>>> Top & Bottom
-      const needAdjustY = supportAdjust(adjustY);
-
-      const sameTB = popupPoints[0] === targetPoints[0];
-
-      // Bottom to Top
-      if (
-        needAdjustY &&
-        popupPoints[0] === 't' &&
-        (nextPopupBottom > adjustCheckVisibleArea.bottom ||
-          prevFlipRef.current.bt)
-      ) {
-        let tmpNextOffsetY: number = nextOffsetY;
-
-        if (sameTB) {
-          tmpNextOffsetY -= popupHeight - targetHeight;
-        } else {
-          tmpNextOffsetY =
-            targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
-        }
-
-        const newVisibleArea = getIntersectionVisibleArea(
-          nextOffsetX,
-          tmpNextOffsetY,
-        );
-        const newVisibleRecommendArea = getIntersectionVisibleArea(
-          nextOffsetX,
-          tmpNextOffsetY,
-          visibleRegionArea,
-        );
-
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea ||
-          (newVisibleArea === originIntersectionVisibleArea &&
-            (!isVisibleFirst ||
-              // Choose recommend one
-              newVisibleRecommendArea >= originIntersectionRecommendArea))
-        ) {
-          prevFlipRef.current.bt = true;
-          nextOffsetY = tmpNextOffsetY;
-          popupOffsetY = -popupOffsetY;
-
-          nextAlignInfo.points = [
-            reversePoints(popupPoints, 0),
-            reversePoints(targetPoints, 0),
-          ];
-        } else {
-          prevFlipRef.current.bt = false;
-        }
-      }
-
-      // Top to Bottom
-      if (
-        needAdjustY &&
-        popupPoints[0] === 'b' &&
-        (nextPopupY < adjustCheckVisibleArea.top || prevFlipRef.current.tb)
-      ) {
-        let tmpNextOffsetY: number = nextOffsetY;
-
-        if (sameTB) {
-          tmpNextOffsetY += popupHeight - targetHeight;
-        } else {
-          tmpNextOffsetY =
-            targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
-        }
-
-        const newVisibleArea = getIntersectionVisibleArea(
-          nextOffsetX,
-          tmpNextOffsetY,
-        );
-        const newVisibleRecommendArea = getIntersectionVisibleArea(
-          nextOffsetX,
-          tmpNextOffsetY,
-          visibleRegionArea,
-        );
-
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea ||
-          (newVisibleArea === originIntersectionVisibleArea &&
-            (!isVisibleFirst ||
-              // Choose recommend one
-              newVisibleRecommendArea >= originIntersectionRecommendArea))
-        ) {
-          prevFlipRef.current.tb = true;
-          nextOffsetY = tmpNextOffsetY;
-          popupOffsetY = -popupOffsetY;
-
-          nextAlignInfo.points = [
-            reversePoints(popupPoints, 0),
-            reversePoints(targetPoints, 0),
-          ];
-        } else {
-          prevFlipRef.current.tb = false;
-        }
-      }
-
-      // >>>>>>>>>> Left & Right
-      const needAdjustX = supportAdjust(adjustX);
-
-      // >>>>> Flip
-      const sameLR = popupPoints[1] === targetPoints[1];
-
-      // Right to Left
-      if (
-        needAdjustX &&
-        popupPoints[1] === 'l' &&
-        (nextPopupRight > adjustCheckVisibleArea.right ||
-          prevFlipRef.current.rl)
-      ) {
-        let tmpNextOffsetX: number = nextOffsetX;
-
-        if (sameLR) {
-          tmpNextOffsetX -= popupWidth - targetWidth;
-        } else {
-          tmpNextOffsetX =
-            targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
-        }
-
-        const newVisibleArea = getIntersectionVisibleArea(
-          tmpNextOffsetX,
-          nextOffsetY,
-        );
-        const newVisibleRecommendArea = getIntersectionVisibleArea(
-          tmpNextOffsetX,
-          nextOffsetY,
-          visibleRegionArea,
-        );
-
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea ||
-          (newVisibleArea === originIntersectionVisibleArea &&
-            (!isVisibleFirst ||
-              // Choose recommend one
-              newVisibleRecommendArea >= originIntersectionRecommendArea))
-        ) {
-          prevFlipRef.current.rl = true;
-          nextOffsetX = tmpNextOffsetX;
-          popupOffsetX = -popupOffsetX;
-
-          nextAlignInfo.points = [
-            reversePoints(popupPoints, 1),
-            reversePoints(targetPoints, 1),
-          ];
-        } else {
-          prevFlipRef.current.rl = false;
-        }
-      }
-
-      // Left to Right
-      if (
-        needAdjustX &&
-        popupPoints[1] === 'r' &&
-        (nextPopupX < adjustCheckVisibleArea.left || prevFlipRef.current.lr)
-      ) {
-        let tmpNextOffsetX: number = nextOffsetX;
-
-        if (sameLR) {
-          tmpNextOffsetX += popupWidth - targetWidth;
-        } else {
-          tmpNextOffsetX =
-            targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
-        }
-
-        const newVisibleArea = getIntersectionVisibleArea(
-          tmpNextOffsetX,
-          nextOffsetY,
-        );
-        const newVisibleRecommendArea = getIntersectionVisibleArea(
-          tmpNextOffsetX,
-          nextOffsetY,
-          visibleRegionArea,
-        );
-
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea ||
-          (newVisibleArea === originIntersectionVisibleArea &&
-            (!isVisibleFirst ||
-              // Choose recommend one
-              newVisibleRecommendArea >= originIntersectionRecommendArea))
-        ) {
-          prevFlipRef.current.lr = true;
-          nextOffsetX = tmpNextOffsetX;
-          popupOffsetX = -popupOffsetX;
-
-          nextAlignInfo.points = [
-            reversePoints(popupPoints, 1),
-            reversePoints(targetPoints, 1),
-          ];
-        } else {
-          prevFlipRef.current.lr = false;
-        }
-      }
-
-      // ============================ Shift ============================
-      syncNextPopupPosition();
-
-      const numShiftX = shiftX === true ? 0 : shiftX;
-      if (typeof numShiftX === 'number') {
-        // Left
-        if (nextPopupX < visibleRegionArea.left) {
-          nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
-
-          if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) {
-            nextOffsetX +=
-              targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
-          }
-        }
-
-        // Right
-        if (nextPopupRight > visibleRegionArea.right) {
-          nextOffsetX -=
-            nextPopupRight - visibleRegionArea.right - popupOffsetX;
-
-          if (targetRect.x > visibleRegionArea.right - numShiftX) {
-            nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
-          }
-        }
-      }
-
-      const numShiftY = shiftY === true ? 0 : shiftY;
-      if (typeof numShiftY === 'number') {
-        // Top
-        if (nextPopupY < visibleRegionArea.top) {
-          nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
-
-          // When target if far away from visible area
-          // Stop shift
-          if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
-            nextOffsetY +=
-              targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
-          }
-        }
-
-        // Bottom
-        if (nextPopupBottom > visibleRegionArea.bottom) {
-          nextOffsetY -=
-            nextPopupBottom - visibleRegionArea.bottom - popupOffsetY;
-
-          if (targetRect.y > visibleRegionArea.bottom - numShiftY) {
-            nextOffsetY += targetRect.y - visibleRegionArea.bottom + numShiftY;
-          }
-        }
-      }
-
-      // ============================ Arrow ============================
-      // Arrow center align
-      const popupLeft = popupRect.x + nextOffsetX;
-      const popupRight = popupLeft + popupWidth;
-      const popupTop = popupRect.y + nextOffsetY;
-      const popupBottom = popupTop + popupHeight;
-
-      const targetLeft = targetRect.x;
-      const targetRight = targetLeft + targetWidth;
-      const targetTop = targetRect.y;
-      const targetBottom = targetTop + targetHeight;
-
-      const maxLeft = Math.max(popupLeft, targetLeft);
-      const minRight = Math.min(popupRight, targetRight);
-
-      const xCenter = (maxLeft + minRight) / 2;
-      const nextArrowX = xCenter - popupLeft;
-
-      const maxTop = Math.max(popupTop, targetTop);
-      const minBottom = Math.min(popupBottom, targetBottom);
-
-      const yCenter = (maxTop + minBottom) / 2;
-      const nextArrowY = yCenter - popupTop;
-
-      onPopupAlign?.(popupEle, nextAlignInfo);
-
-      // Additional calculate right & bottom position
-      let offsetX4Right =
-        popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
-      let offsetY4Bottom =
-        popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
-
-      if (scaleX === 1) {
-        nextOffsetX = Math.round(nextOffsetX);
-        offsetX4Right = Math.round(offsetX4Right);
-      }
-
-      if (scaleY === 1) {
-        nextOffsetY = Math.round(nextOffsetY);
-        offsetY4Bottom = Math.round(offsetY4Bottom);
-      }
-
-      const nextOffsetInfo = {
-        ready: true,
-        offsetX: nextOffsetX / scaleX,
-        offsetY: nextOffsetY / scaleY,
-        offsetR: offsetX4Right / scaleX,
-        offsetB: offsetY4Bottom / scaleY,
-        arrowX: nextArrowX / scaleX,
-        arrowY: nextArrowY / scaleY,
-        scaleX,
-        scaleY,
-        align: nextAlignInfo,
-      };
-
-      setOffsetInfo(nextOffsetInfo);
-    }
-  });
-
-  const triggerAlign = () => {
-    alignCountRef.current += 1;
-    const id = alignCountRef.current;
-
-    // Merge all align requirement into one frame
-    Promise.resolve().then(() => {
-      if (alignCountRef.current === id) {
-        onAlign();
-      }
-    });
-  };
-
-  // Reset ready status when placement & open changed
-  const resetReady = () => {
-    setOffsetInfo((ori) => ({
-      ...ori,
-      ready: false,
-    }));
-  };
-
-  useLayoutEffect(resetReady, [placement]);
-
-  useLayoutEffect(() => {
-    if (!open) {
-      resetReady();
-    }
-  }, [open]);
-
-  return [
-    offsetInfo.ready,
-    offsetInfo.offsetX,
-    offsetInfo.offsetY,
-    offsetInfo.offsetR,
-    offsetInfo.offsetB,
-    offsetInfo.arrowX,
-    offsetInfo.arrowY,
-    offsetInfo.scaleX,
-    offsetInfo.scaleY,
-    offsetInfo.align,
-    triggerAlign,
-  ];
-}
diff --git a/src/hooks/useWatch.ts b/src/hooks/useWatch.ts
deleted file mode 100644
index eba0fd8..0000000
--- a/src/hooks/useWatch.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import { collectScroller, getWin } from '../util';
-
-export default function useWatch(
-  open: boolean,
-  target: HTMLElement,
-  popup: HTMLElement,
-  onAlign: VoidFunction,
-  onScroll: VoidFunction,
-) {
-  useLayoutEffect(() => {
-    if (open && target && popup) {
-      const targetElement = target;
-      const popupElement = popup;
-      const targetScrollList = collectScroller(targetElement);
-      const popupScrollList = collectScroller(popupElement);
-
-      const win = getWin(popupElement);
-
-      const mergedList = new Set([
-        win,
-        ...targetScrollList,
-        ...popupScrollList,
-      ]);
-
-      function notifyScroll() {
-        onAlign();
-        onScroll();
-      }
-
-      mergedList.forEach((scroller) => {
-        scroller.addEventListener('scroll', notifyScroll, { passive: true });
-      });
-
-      win.addEventListener('resize', notifyScroll, { passive: true });
-
-      // First time always do align
-      onAlign();
-
-      return () => {
-        mergedList.forEach((scroller) => {
-          scroller.removeEventListener('scroll', notifyScroll);
-          win.removeEventListener('resize', notifyScroll);
-        });
-      };
-    }
-  }, [open, target, popup]);
-}
diff --git a/src/hooks/useWinClick.ts b/src/hooks/useWinClick.ts
deleted file mode 100644
index f33f05b..0000000
--- a/src/hooks/useWinClick.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { getShadowRoot } from 'rc-util/lib/Dom/shadow';
-import { warning } from 'rc-util/lib/warning';
-import * as React from 'react';
-import { getWin } from '../util';
-
-export default function useWinClick(
-  open: boolean,
-  clickToHide: boolean,
-  targetEle: HTMLElement,
-  popupEle: HTMLElement,
-  mask: boolean,
-  maskClosable: boolean,
-  inPopupOrChild: (target: EventTarget) => boolean,
-  triggerOpen: (open: boolean) => void,
-) {
-  const openRef = React.useRef(open);
-  openRef.current = open;
-
-  // Click to hide is special action since click popup element should not hide
-  React.useEffect(() => {
-    if (clickToHide && popupEle && (!mask || maskClosable)) {
-      const onTriggerClose = ({ target }: MouseEvent) => {
-        if (openRef.current && !inPopupOrChild(target)) {
-          triggerOpen(false);
-        }
-      };
-
-      const win = getWin(popupEle);
-
-      win.addEventListener('mousedown', onTriggerClose, true);
-      win.addEventListener('contextmenu', onTriggerClose, true);
-
-      // shadow root
-      const targetShadowRoot = getShadowRoot(targetEle);
-      if (targetShadowRoot) {
-        targetShadowRoot.addEventListener('mousedown', onTriggerClose, true);
-        targetShadowRoot.addEventListener('contextmenu', onTriggerClose, true);
-      }
-
-      // Warning if target and popup not in same root
-      if (process.env.NODE_ENV !== 'production') {
-        const targetRoot = targetEle?.getRootNode?.();
-        const popupRoot = popupEle.getRootNode?.();
-
-        warning(
-          targetRoot === popupRoot,
-          `trigger element and popup element should in same shadow root.`,
-        );
-      }
-
-      return () => {
-        win.removeEventListener('mousedown', onTriggerClose, true);
-        win.removeEventListener('contextmenu', onTriggerClose, true);
-
-        if (targetShadowRoot) {
-          targetShadowRoot.removeEventListener(
-            'mousedown',
-            onTriggerClose,
-            true,
-          );
-          targetShadowRoot.removeEventListener(
-            'contextmenu',
-            onTriggerClose,
-            true,
-          );
-        }
-      };
-    }
-  }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
-}
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..b672922
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1 @@
+console.log('Hello world!');
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 4a7b990..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,763 +0,0 @@
-import Portal from '@rc-component/portal';
-import classNames from 'classnames';
-import type { CSSMotionProps } from 'rc-motion';
-import ResizeObserver from 'rc-resize-observer';
-import { isDOM } from 'rc-util/lib/Dom/findDOMNode';
-import { getShadowRoot } from 'rc-util/lib/Dom/shadow';
-import useEvent from 'rc-util/lib/hooks/useEvent';
-import useId from 'rc-util/lib/hooks/useId';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import isMobile from 'rc-util/lib/isMobile';
-import * as React from 'react';
-import Popup from './Popup';
-import TriggerWrapper from './TriggerWrapper';
-import type { TriggerContextProps } from './context';
-import TriggerContext from './context';
-import useAction from './hooks/useAction';
-import useAlign from './hooks/useAlign';
-import useWatch from './hooks/useWatch';
-import useWinClick from './hooks/useWinClick';
-import type {
-  ActionType,
-  AlignType,
-  AnimationType,
-  ArrowPos,
-  ArrowTypeOuter,
-  BuildInPlacements,
-  TransitionNameType,
-} from './interface';
-import { getAlignPopupClassName, getMotion } from './util';
-
-export type {
-  ActionType,
-  AlignType,
-  ArrowTypeOuter as ArrowType,
-  BuildInPlacements,
-};
-
-export interface TriggerRef {
-  nativeElement: HTMLElement;
-  popupElement: HTMLDivElement;
-  forceAlign: VoidFunction;
-}
-
-// Removed Props List
-// Seems this can be auto
-// getDocument?: (element?: HTMLElement) => Document;
-
-// New version will not wrap popup with `rc-trigger-popup-content` when multiple children
-
-export interface TriggerProps {
-  children: React.ReactElement;
-  action?: ActionType | ActionType[];
-  showAction?: ActionType[];
-  hideAction?: ActionType[];
-
-  prefixCls?: string;
-
-  zIndex?: number;
-
-  onPopupAlign?: (element: HTMLElement, align: AlignType) => void;
-
-  stretch?: string;
-
-  // ==================== Open =====================
-  popupVisible?: boolean;
-  defaultPopupVisible?: boolean;
-  onPopupVisibleChange?: (visible: boolean) => void;
-  afterPopupVisibleChange?: (visible: boolean) => void;
-
-  // =================== Portal ====================
-  getPopupContainer?: (node: HTMLElement) => HTMLElement;
-  forceRender?: boolean;
-  autoDestroy?: boolean;
-
-  /** @deprecated Please use `autoDestroy` instead */
-  destroyPopupOnHide?: boolean;
-
-  // ==================== Mask =====================
-  mask?: boolean;
-  maskClosable?: boolean;
-
-  // =================== Motion ====================
-  /** Set popup motion. You can ref `rc-motion` for more info. */
-  popupMotion?: CSSMotionProps;
-  /** Set mask motion. You can ref `rc-motion` for more info. */
-  maskMotion?: CSSMotionProps;
-
-  /** @deprecated Please us `popupMotion` instead. */
-  popupTransitionName?: TransitionNameType;
-  /** @deprecated Please us `popupMotion` instead. */
-  popupAnimation?: AnimationType;
-  /** @deprecated Please us `maskMotion` instead. */
-  maskTransitionName?: TransitionNameType;
-  /** @deprecated Please us `maskMotion` instead. */
-  maskAnimation?: AnimationType;
-
-  // ==================== Delay ====================
-  mouseEnterDelay?: number;
-  mouseLeaveDelay?: number;
-
-  focusDelay?: number;
-  blurDelay?: number;
-
-  // ==================== Popup ====================
-  popup: React.ReactNode | (() => React.ReactNode);
-  popupPlacement?: string;
-  builtinPlacements?: BuildInPlacements;
-  popupAlign?: AlignType;
-  popupClassName?: string;
-  popupStyle?: React.CSSProperties;
-  getPopupClassNameFromAlign?: (align: AlignType) => string;
-  onPopupClick?: React.MouseEventHandler<HTMLDivElement>;
-
-  alignPoint?: boolean; // Maybe we can support user pass position in the future
-
-  /**
-   * Trigger will memo content when close.
-   * This may affect the case if want to keep content update.
-   * Set `fresh` to `false` will always keep update.
-   */
-  fresh?: boolean;
-
-  // ==================== Arrow ====================
-  arrow?: boolean | ArrowTypeOuter;
-
-  // ================= Deprecated ==================
-  /** @deprecated Add `className` on `children`. Please add `className` directly instead. */
-  className?: string;
-
-  // =================== Private ===================
-  /**
-   * @private Get trigger DOM node.
-   * Used for some component is function component which can not access by `findDOMNode`
-   */
-  getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
-
-  // // ========================== Mobile ==========================
-  // /** @private Bump fixed position at bottom in mobile.
-  //  * This is internal usage currently, do not use in your prod */
-  // mobile?: MobileConfig;
-}
-
-export function generateTrigger(
-  PortalComponent: React.ComponentType<any> = Portal,
-) {
-  const Trigger = React.forwardRef<TriggerRef, TriggerProps>((props, ref) => {
-    const {
-      prefixCls = 'rc-trigger-popup',
-      children,
-
-      // Action
-      action = 'hover',
-      showAction,
-      hideAction,
-
-      // Open
-      popupVisible,
-      defaultPopupVisible,
-      onPopupVisibleChange,
-      afterPopupVisibleChange,
-
-      // Delay
-      mouseEnterDelay,
-      mouseLeaveDelay = 0.1,
-
-      focusDelay,
-      blurDelay,
-
-      // Mask
-      mask,
-      maskClosable = true,
-
-      // Portal
-      getPopupContainer,
-      forceRender,
-      autoDestroy,
-      destroyPopupOnHide,
-
-      // Popup
-      popup,
-      popupClassName,
-      popupStyle,
-
-      popupPlacement,
-      builtinPlacements = {},
-      popupAlign,
-      zIndex,
-      stretch,
-      getPopupClassNameFromAlign,
-      fresh,
-
-      alignPoint,
-
-      onPopupClick,
-      onPopupAlign,
-
-      // Arrow
-      arrow,
-
-      // Motion
-      popupMotion,
-      maskMotion,
-      popupTransitionName,
-      popupAnimation,
-      maskTransitionName,
-      maskAnimation,
-
-      // Deprecated
-      className,
-
-      // Private
-      getTriggerDOMNode,
-
-      ...restProps
-    } = props;
-
-    const mergedAutoDestroy = autoDestroy || destroyPopupOnHide || false;
-
-    // =========================== Mobile ===========================
-    const [mobile, setMobile] = React.useState(false);
-    useLayoutEffect(() => {
-      setMobile(isMobile());
-    }, []);
-
-    // ========================== Context ===========================
-    const subPopupElements = React.useRef<Record<string, HTMLElement>>({});
-
-    const parentContext = React.useContext(TriggerContext);
-    const context = React.useMemo<TriggerContextProps>(() => {
-      return {
-        registerSubPopup: (id, subPopupEle) => {
-          subPopupElements.current[id] = subPopupEle;
-
-          parentContext?.registerSubPopup(id, subPopupEle);
-        },
-      };
-    }, [parentContext]);
-
-    // =========================== Popup ============================
-    const id = useId();
-    const [popupEle, setPopupEle] = React.useState<HTMLDivElement>(null);
-
-    // Used for forwardRef popup. Not use internal
-    const externalPopupRef = React.useRef<HTMLDivElement>(null);
-
-    const setPopupRef = useEvent((node: HTMLDivElement) => {
-      externalPopupRef.current = node;
-
-      if (isDOM(node) && popupEle !== node) {
-        setPopupEle(node);
-      }
-
-      parentContext?.registerSubPopup(id, node);
-    });
-
-    // =========================== Target ===========================
-    // Use state to control here since `useRef` update not trigger render
-    const [targetEle, setTargetEle] = React.useState<HTMLElement>(null);
-
-    // Used for forwardRef target. Not use internal
-    const externalForwardRef = React.useRef<HTMLElement>(null);
-
-    const setTargetRef = useEvent((node: HTMLElement) => {
-      if (isDOM(node) && targetEle !== node) {
-        setTargetEle(node);
-        externalForwardRef.current = node;
-      }
-    });
-
-    // ========================== Children ==========================
-    const child = React.Children.only(children) as React.ReactElement;
-    const originChildProps = child?.props || {};
-    const cloneProps: typeof originChildProps = {};
-
-    const inPopupOrChild = useEvent((ele: any) => {
-      const childDOM = targetEle;
-
-      return (
-        childDOM?.contains(ele) ||
-        getShadowRoot(childDOM)?.host === ele ||
-        ele === childDOM ||
-        popupEle?.contains(ele) ||
-        getShadowRoot(popupEle)?.host === ele ||
-        ele === popupEle ||
-        Object.values(subPopupElements.current).some(
-          (subPopupEle) => subPopupEle?.contains(ele) || ele === subPopupEle,
-        )
-      );
-    });
-
-    // =========================== Motion ===========================
-    const mergePopupMotion = getMotion(
-      prefixCls,
-      popupMotion,
-      popupAnimation,
-      popupTransitionName,
-    );
-
-    const mergeMaskMotion = getMotion(
-      prefixCls,
-      maskMotion,
-      maskAnimation,
-      maskTransitionName,
-    );
-
-    // ============================ Open ============================
-    const [internalOpen, setInternalOpen] = React.useState(
-      defaultPopupVisible || false,
-    );
-
-    // Render still use props as first priority
-    const mergedOpen = popupVisible ?? internalOpen;
-
-    // We use effect sync here in case `popupVisible` back to `undefined`
-    const setMergedOpen = useEvent((nextOpen: boolean) => {
-      if (popupVisible === undefined) {
-        setInternalOpen(nextOpen);
-      }
-    });
-
-    useLayoutEffect(() => {
-      setInternalOpen(popupVisible || false);
-    }, [popupVisible]);
-
-    const openRef = React.useRef(mergedOpen);
-    openRef.current = mergedOpen;
-
-    const lastTriggerRef = React.useRef<boolean[]>([]);
-    lastTriggerRef.current = [];
-
-    const internalTriggerOpen = useEvent((nextOpen: boolean) => {
-      setMergedOpen(nextOpen);
-
-      // Enter or Pointer will both trigger open state change
-      // We only need take one to avoid duplicated change event trigger
-      // Use `lastTriggerRef` to record last open type
-      if (
-        (lastTriggerRef.current[lastTriggerRef.current.length - 1] ??
-          mergedOpen) !== nextOpen
-      ) {
-        lastTriggerRef.current.push(nextOpen);
-        onPopupVisibleChange?.(nextOpen);
-      }
-    });
-
-    // Trigger for delay
-    const delayRef = React.useRef<any>();
-
-    const clearDelay = () => {
-      clearTimeout(delayRef.current);
-    };
-
-    const triggerOpen = (nextOpen: boolean, delay = 0) => {
-      clearDelay();
-
-      if (delay === 0) {
-        internalTriggerOpen(nextOpen);
-      } else {
-        delayRef.current = setTimeout(() => {
-          internalTriggerOpen(nextOpen);
-        }, delay * 1000);
-      }
-    };
-
-    React.useEffect(() => clearDelay, []);
-
-    // ========================== Motion ============================
-    const [inMotion, setInMotion] = React.useState(false);
-
-    useLayoutEffect(
-      (firstMount) => {
-        if (!firstMount || mergedOpen) {
-          setInMotion(true);
-        }
-      },
-      [mergedOpen],
-    );
-
-    const [motionPrepareResolve, setMotionPrepareResolve] =
-      React.useState<VoidFunction>(null);
-
-    // =========================== Align ============================
-    const [mousePos, setMousePos] = React.useState<[x: number, y: number]>([
-      0, 0,
-    ]);
-
-    const setMousePosByEvent = (
-      event: Pick<React.MouseEvent, 'clientX' | 'clientY'>,
-    ) => {
-      setMousePos([event.clientX, event.clientY]);
-    };
-
-    const [
-      ready,
-      offsetX,
-      offsetY,
-      offsetR,
-      offsetB,
-      arrowX,
-      arrowY,
-      scaleX,
-      scaleY,
-      alignInfo,
-      onAlign,
-    ] = useAlign(
-      mergedOpen,
-      popupEle,
-      alignPoint ? mousePos : targetEle,
-      popupPlacement,
-      builtinPlacements,
-      popupAlign,
-      onPopupAlign,
-    );
-
-    const [showActions, hideActions] = useAction(
-      mobile,
-      action,
-      showAction,
-      hideAction,
-    );
-
-    const clickToShow = showActions.has('click');
-    const clickToHide =
-      hideActions.has('click') || hideActions.has('contextMenu');
-
-    const triggerAlign = useEvent(() => {
-      if (!inMotion) {
-        onAlign();
-      }
-    });
-
-    const onScroll = () => {
-      if (openRef.current && alignPoint && clickToHide) {
-        triggerOpen(false);
-      }
-    };
-
-    useWatch(mergedOpen, targetEle, popupEle, triggerAlign, onScroll);
-
-    useLayoutEffect(() => {
-      triggerAlign();
-    }, [mousePos, popupPlacement]);
-
-    // When no builtinPlacements and popupAlign changed
-    useLayoutEffect(() => {
-      if (mergedOpen && !builtinPlacements?.[popupPlacement]) {
-        triggerAlign();
-      }
-    }, [JSON.stringify(popupAlign)]);
-
-    const alignedClassName = React.useMemo(() => {
-      const baseClassName = getAlignPopupClassName(
-        builtinPlacements,
-        prefixCls,
-        alignInfo,
-        alignPoint,
-      );
-
-      return classNames(baseClassName, getPopupClassNameFromAlign?.(alignInfo));
-    }, [
-      alignInfo,
-      getPopupClassNameFromAlign,
-      builtinPlacements,
-      prefixCls,
-      alignPoint,
-    ]);
-
-    // ============================ Refs ============================
-    React.useImperativeHandle(ref, () => ({
-      nativeElement: externalForwardRef.current,
-      popupElement: externalPopupRef.current,
-      forceAlign: triggerAlign,
-    }));
-
-    // ========================== Stretch ===========================
-    const [targetWidth, setTargetWidth] = React.useState(0);
-    const [targetHeight, setTargetHeight] = React.useState(0);
-
-    const syncTargetSize = () => {
-      if (stretch && targetEle) {
-        const rect = targetEle.getBoundingClientRect();
-        setTargetWidth(rect.width);
-        setTargetHeight(rect.height);
-      }
-    };
-
-    const onTargetResize = () => {
-      syncTargetSize();
-      triggerAlign();
-    };
-
-    // ========================== Motion ============================
-    const onVisibleChanged = (visible: boolean) => {
-      setInMotion(false);
-      onAlign();
-      afterPopupVisibleChange?.(visible);
-    };
-
-    // We will trigger align when motion is in prepare
-    const onPrepare = () =>
-      new Promise<void>((resolve) => {
-        syncTargetSize();
-        setMotionPrepareResolve(() => resolve);
-      });
-
-    useLayoutEffect(() => {
-      if (motionPrepareResolve) {
-        onAlign();
-        motionPrepareResolve();
-        setMotionPrepareResolve(null);
-      }
-    }, [motionPrepareResolve]);
-
-    // =========================== Action ===========================
-    /**
-     * Util wrapper for trigger action
-     */
-    function wrapperAction<Event extends React.SyntheticEvent>(
-      eventName: string,
-      nextOpen: boolean,
-      delay?: number,
-      preEvent?: (event: Event) => void,
-    ) {
-      cloneProps[eventName] = (event: any, ...args: any[]) => {
-        preEvent?.(event);
-        triggerOpen(nextOpen, delay);
-
-        // Pass to origin
-        originChildProps[eventName]?.(event, ...args);
-      };
-    }
-
-    // ======================= Action: Click ========================
-    if (clickToShow || clickToHide) {
-      cloneProps.onClick = (
-        event: React.MouseEvent<HTMLElement>,
-        ...args: any[]
-      ) => {
-        if (openRef.current && clickToHide) {
-          triggerOpen(false);
-        } else if (!openRef.current && clickToShow) {
-          setMousePosByEvent(event);
-          triggerOpen(true);
-        }
-
-        // Pass to origin
-        originChildProps.onClick?.(event, ...args);
-      };
-    }
-
-    // Click to hide is special action since click popup element should not hide
-    useWinClick(
-      mergedOpen,
-      clickToHide,
-      targetEle,
-      popupEle,
-      mask,
-      maskClosable,
-      inPopupOrChild,
-      triggerOpen,
-    );
-
-    // ======================= Action: Hover ========================
-    const hoverToShow = showActions.has('hover');
-    const hoverToHide = hideActions.has('hover');
-
-    let onPopupMouseEnter: React.MouseEventHandler<HTMLDivElement>;
-    let onPopupMouseLeave: VoidFunction;
-
-    if (hoverToShow) {
-      // Compatible with old browser which not support pointer event
-      wrapperAction<React.MouseEvent>(
-        'onMouseEnter',
-        true,
-        mouseEnterDelay,
-        (event) => {
-          setMousePosByEvent(event);
-        },
-      );
-      wrapperAction<React.PointerEvent>(
-        'onPointerEnter',
-        true,
-        mouseEnterDelay,
-        (event) => {
-          setMousePosByEvent(event);
-        },
-      );
-      onPopupMouseEnter = (event) => {
-        // Only trigger re-open when popup is visible
-        if (
-          (mergedOpen || inMotion) &&
-          popupEle?.contains(event.target as HTMLElement)
-        ) {
-          triggerOpen(true, mouseEnterDelay);
-        }
-      };
-
-      // Align Point
-      if (alignPoint) {
-        cloneProps.onMouseMove = (event: React.MouseEvent) => {
-          // setMousePosByEvent(event);
-          originChildProps.onMouseMove?.(event);
-        };
-      }
-    }
-
-    if (hoverToHide) {
-      wrapperAction('onMouseLeave', false, mouseLeaveDelay);
-      wrapperAction('onPointerLeave', false, mouseLeaveDelay);
-      onPopupMouseLeave = () => {
-        triggerOpen(false, mouseLeaveDelay);
-      };
-    }
-
-    // ======================= Action: Focus ========================
-    if (showActions.has('focus')) {
-      wrapperAction('onFocus', true, focusDelay);
-    }
-
-    if (hideActions.has('focus')) {
-      wrapperAction('onBlur', false, blurDelay);
-    }
-
-    // ==================== Action: ContextMenu =====================
-    if (showActions.has('contextMenu')) {
-      cloneProps.onContextMenu = (event: React.MouseEvent, ...args: any[]) => {
-        if (openRef.current && hideActions.has('contextMenu')) {
-          triggerOpen(false);
-        } else {
-          setMousePosByEvent(event);
-          triggerOpen(true);
-        }
-
-        event.preventDefault();
-
-        // Pass to origin
-        originChildProps.onContextMenu?.(event, ...args);
-      };
-    }
-
-    // ========================= ClassName ==========================
-    if (className) {
-      cloneProps.className = classNames(originChildProps.className, className);
-    }
-
-    // =========================== Render ===========================
-    const mergedChildrenProps = {
-      ...originChildProps,
-      ...cloneProps,
-    };
-
-    // Pass props into cloneProps for nest usage
-    const passedProps: Record<string, any> = {};
-    const passedEventList = [
-      'onContextMenu',
-      'onClick',
-      'onMouseDown',
-      'onTouchStart',
-      'onMouseEnter',
-      'onMouseLeave',
-      'onFocus',
-      'onBlur',
-    ];
-
-    passedEventList.forEach((eventName) => {
-      if (restProps[eventName]) {
-        passedProps[eventName] = (...args: any[]) => {
-          mergedChildrenProps[eventName]?.(...args);
-          restProps[eventName](...args);
-        };
-      }
-    });
-
-    // Child Node
-    const triggerNode = React.cloneElement(child, {
-      ...mergedChildrenProps,
-      ...passedProps,
-    });
-
-    const arrowPos: ArrowPos = {
-      x: arrowX,
-      y: arrowY,
-    };
-
-    const innerArrow: ArrowTypeOuter = arrow
-      ? {
-          // true and Object likely
-          ...(arrow !== true ? arrow : {}),
-        }
-      : null;
-
-    // Render
-    return (
-      <>
-        <ResizeObserver
-          disabled={!mergedOpen}
-          ref={setTargetRef}
-          onResize={onTargetResize}
-        >
-          <TriggerWrapper getTriggerDOMNode={getTriggerDOMNode}>
-            {triggerNode}
-          </TriggerWrapper>
-        </ResizeObserver>
-        <TriggerContext.Provider value={context}>
-          <Popup
-            portal={PortalComponent}
-            ref={setPopupRef}
-            prefixCls={prefixCls}
-            popup={popup}
-            className={classNames(popupClassName, alignedClassName)}
-            style={popupStyle}
-            target={targetEle}
-            onMouseEnter={onPopupMouseEnter}
-            onMouseLeave={onPopupMouseLeave}
-            // https://github.com/ant-design/ant-design/issues/43924
-            onPointerEnter={onPopupMouseEnter}
-            zIndex={zIndex}
-            // Open
-            open={mergedOpen}
-            keepDom={inMotion}
-            fresh={fresh}
-            // Click
-            onClick={onPopupClick}
-            // Mask
-            mask={mask}
-            // Motion
-            motion={mergePopupMotion}
-            maskMotion={mergeMaskMotion}
-            onVisibleChanged={onVisibleChanged}
-            onPrepare={onPrepare}
-            // Portal
-            forceRender={forceRender}
-            autoDestroy={mergedAutoDestroy}
-            getPopupContainer={getPopupContainer}
-            // Arrow
-            align={alignInfo}
-            arrow={innerArrow}
-            arrowPos={arrowPos}
-            // Align
-            ready={ready}
-            offsetX={offsetX}
-            offsetY={offsetY}
-            offsetR={offsetR}
-            offsetB={offsetB}
-            onAlign={triggerAlign}
-            // Stretch
-            stretch={stretch}
-            targetWidth={targetWidth / scaleX}
-            targetHeight={targetHeight / scaleY}
-          />
-        </TriggerContext.Provider>
-      </>
-    );
-  });
-
-  if (process.env.NODE_ENV !== 'production') {
-    Trigger.displayName = 'Trigger';
-  }
-
-  return Trigger;
-}
-
-export default generateTrigger(Portal);
diff --git a/src/interface.ts b/src/interface.ts
deleted file mode 100644
index ddb27ee..0000000
--- a/src/interface.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import type { CSSMotionProps } from 'rc-motion';
-
-export type Placement =
-  | 'top'
-  | 'left'
-  | 'right'
-  | 'bottom'
-  | 'topLeft'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'leftTop'
-  | 'leftBottom'
-  | 'rightTop'
-  | 'rightBottom';
-
-export type AlignPointTopBottom = 't' | 'b' | 'c';
-export type AlignPointLeftRight = 'l' | 'r' | 'c';
-
-/** Two char of 't' 'b' 'c' 'l' 'r'. Example: 'lt' */
-export type AlignPoint = `${AlignPointTopBottom}${AlignPointLeftRight}`;
-
-export type OffsetType = number | `${number}%`;
-
-export interface AlignType {
-  /**
-   * move point of source node to align with point of target node.
-   * Such as ['tr','cc'], align top right point of source node with center point of target node.
-   * Point can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right) */
-  points?: (string | AlignPoint)[];
-
-  /**
-   * @private Do not use in your production code
-   */
-  _experimental?: Record<string, any>;
-
-  /**
-   * offset source node by offset[0] in x and offset[1] in y.
-   * If offset contains percentage string value, it is relative to sourceNode region.
-   */
-  offset?: OffsetType[];
-  /**
-   * offset target node by offset[0] in x and offset[1] in y.
-   * If targetOffset contains percentage string value, it is relative to targetNode region.
-   */
-  targetOffset?: OffsetType[];
-  /**
-   * If adjustX field is true, will adjust source node in x direction if source node is invisible.
-   * If adjustY field is true, will adjust source node in y direction if source node is invisible.
-   */
-  overflow?: {
-    adjustX?: boolean | number;
-    adjustY?: boolean | number;
-    shiftX?: boolean | number;
-    shiftY?: boolean | number;
-  };
-  /** Auto adjust arrow position */
-  autoArrow?: boolean;
-  /**
-   * Config visible region check of html node. Default `visible`:
-   *  - `visible`:
-   *    The visible region of user browser window.
-   *    Use `clientHeight` for check.
-   *    If `visible` region not satisfy, fallback to `scroll`.
-   *  - `scroll`:
-   *    The whole region of the html scroll area.
-   *    Use `scrollHeight` for check.
-   *  - `visibleFirst`:
-   *    Similar to `visible`, but if `visible` region not satisfy, fallback to `scroll`.
-   */
-  htmlRegion?: 'visible' | 'scroll' | 'visibleFirst';
-
-  /**
-   * Auto chose position with `top` or `bottom` by the align result
-   */
-  dynamicInset?: boolean;
-  /**
-   * Whether use css right instead of left to position
-   */
-  useCssRight?: boolean;
-  /**
-   * Whether use css bottom instead of top to position
-   */
-  useCssBottom?: boolean;
-  /**
-   * Whether use css transform instead of left/top/right/bottom to position if browser supports.
-   * Defaults to false.
-   */
-  useCssTransform?: boolean;
-  ignoreShake?: boolean;
-}
-
-export interface ArrowTypeOuter {
-  className?: string;
-  content?: React.ReactNode;
-}
-
-export type ArrowPos = {
-  x?: number;
-  y?: number;
-};
-
-export type BuildInPlacements = Record<string, AlignType>;
-
-export type StretchType = string;
-
-export type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
-
-export type AnimationType = string;
-
-export type TransitionNameType = string;
-
-export interface Point {
-  pageX: number;
-  pageY: number;
-}
-
-export interface CommonEventHandler {
-  remove: () => void;
-}
-
-export interface MobileConfig {
-  /** Set popup motion. You can ref `rc-motion` for more info. */
-  popupMotion?: CSSMotionProps;
-  popupClassName?: string;
-  popupStyle?: React.CSSProperties;
-  popupRender?: (originNode: React.ReactNode) => React.ReactNode;
-}
diff --git a/src/interface/.gitkeep b/src/interface/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/mock.tsx b/src/mock.tsx
deleted file mode 100644
index d5d088a..0000000
--- a/src/mock.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { generateTrigger } from './index';
-
-interface MockPortalProps {
-  open?: boolean;
-  autoDestroy?: boolean;
-  children: React.ReactElement;
-  getContainer?: () => HTMLElement;
-}
-
-const MockPortal: React.FC<MockPortalProps> = ({
-  open,
-  autoDestroy,
-  children,
-  getContainer,
-}) => {
-  const [visible, setVisible] = React.useState(open);
-
-  React.useEffect(() => {
-    getContainer?.();
-  });
-
-  React.useEffect(() => {
-    if (open) {
-      setVisible(true);
-    } else if (autoDestroy) {
-      setVisible(false);
-    }
-  }, [open, autoDestroy]);
-
-  return visible ? children : null;
-};
-
-export default generateTrigger(MockPortal);
diff --git a/src/util.ts b/src/util.ts
deleted file mode 100644
index 5170d86..0000000
--- a/src/util.ts
+++ /dev/null
@@ -1,222 +0,0 @@
-import type { CSSMotionProps } from 'rc-motion';
-import type {
-  AlignType,
-  AnimationType,
-  BuildInPlacements,
-  TransitionNameType,
-} from './interface';
-
-function isPointsEq(
-  a1: string[] = [],
-  a2: string[] = [],
-  isAlignPoint: boolean,
-): boolean {
-  if (isAlignPoint) {
-    return a1[0] === a2[0];
-  }
-  return a1[0] === a2[0] && a1[1] === a2[1];
-}
-
-export function getAlignPopupClassName(
-  builtinPlacements: BuildInPlacements,
-  prefixCls: string,
-  align: AlignType,
-  isAlignPoint: boolean,
-): string {
-  const { points } = align;
-
-  const placements = Object.keys(builtinPlacements);
-
-  for (let i = 0; i < placements.length; i += 1) {
-    const placement = placements[i];
-    if (
-      isPointsEq(builtinPlacements[placement]?.points, points, isAlignPoint)
-    ) {
-      return `${prefixCls}-placement-${placement}`;
-    }
-  }
-
-  return '';
-}
-
-/** @deprecated We should not use this if we can refactor all deps */
-export function getMotion(
-  prefixCls: string,
-  motion: CSSMotionProps,
-  animation: AnimationType,
-  transitionName: TransitionNameType,
-): CSSMotionProps {
-  if (motion) {
-    return motion;
-  }
-
-  if (animation) {
-    return {
-      motionName: `${prefixCls}-${animation}`,
-    };
-  }
-
-  if (transitionName) {
-    return {
-      motionName: transitionName,
-    };
-  }
-
-  return null;
-}
-
-export function getWin(ele: HTMLElement) {
-  return ele.ownerDocument.defaultView;
-}
-
-/**
- * Get all the scrollable parent elements of the element
- * @param ele       The element to be detected
- * @param areaOnly  Only return the parent which will cut visible area
- */
-export function collectScroller(ele: HTMLElement) {
-  const scrollerList: HTMLElement[] = [];
-  let current = ele?.parentElement;
-
-  const scrollStyle = ['hidden', 'scroll', 'clip', 'auto'];
-
-  while (current) {
-    const { overflowX, overflowY, overflow } =
-      getWin(current).getComputedStyle(current);
-    if ([overflowX, overflowY, overflow].some((o) => scrollStyle.includes(o))) {
-      scrollerList.push(current);
-    }
-
-    current = current.parentElement;
-  }
-
-  return scrollerList;
-}
-
-export function toNum(num: number, defaultValue = 1) {
-  return Number.isNaN(num) ? defaultValue : num;
-}
-
-function getPxValue(val: string) {
-  return toNum(parseFloat(val), 0);
-}
-
-export interface VisibleArea {
-  left: number;
-  top: number;
-  right: number;
-  bottom: number;
-}
-
-/**
- *
- *
- *  **************************************
- *  *              Border                *
- *  *     **************************     *
- *  *     *                  *     *     *
- *  *  B  *                  *  S  *  B  *
- *  *  o  *                  *  c  *  o  *
- *  *  r  *      Content     *  r  *  r  *
- *  *  d  *                  *  o  *  d  *
- *  *  e  *                  *  l  *  e  *
- *  *  r  ********************  l  *  r  *
- *  *     *        Scroll          *     *
- *  *     **************************     *
- *  *              Border                *
- *  **************************************
- *
- */
-/**
- * Get visible area of element
- */
-export function getVisibleArea(
-  initArea: VisibleArea,
-  scrollerList?: HTMLElement[],
-) {
-  const visibleArea = { ...initArea };
-
-  (scrollerList || []).forEach((ele) => {
-    if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) {
-      return;
-    }
-
-    // Skip if static position which will not affect visible area
-    const {
-      overflow,
-      overflowClipMargin,
-      borderTopWidth,
-      borderBottomWidth,
-      borderLeftWidth,
-      borderRightWidth,
-    } = getWin(ele).getComputedStyle(ele);
-
-    const eleRect = ele.getBoundingClientRect();
-    const {
-      offsetHeight: eleOutHeight,
-      clientHeight: eleInnerHeight,
-      offsetWidth: eleOutWidth,
-      clientWidth: eleInnerWidth,
-    } = ele;
-
-    const borderTopNum = getPxValue(borderTopWidth);
-    const borderBottomNum = getPxValue(borderBottomWidth);
-    const borderLeftNum = getPxValue(borderLeftWidth);
-    const borderRightNum = getPxValue(borderRightWidth);
-
-    const scaleX = toNum(
-      Math.round((eleRect.width / eleOutWidth) * 1000) / 1000,
-    );
-    const scaleY = toNum(
-      Math.round((eleRect.height / eleOutHeight) * 1000) / 1000,
-    );
-
-    // Original visible area
-    const eleScrollWidth =
-      (eleOutWidth - eleInnerWidth - borderLeftNum - borderRightNum) * scaleX;
-    const eleScrollHeight =
-      (eleOutHeight - eleInnerHeight - borderTopNum - borderBottomNum) * scaleY;
-
-    // Cut border size
-    const scaledBorderTopWidth = borderTopNum * scaleY;
-    const scaledBorderBottomWidth = borderBottomNum * scaleY;
-    const scaledBorderLeftWidth = borderLeftNum * scaleX;
-    const scaledBorderRightWidth = borderRightNum * scaleX;
-
-    // Clip margin
-    let clipMarginWidth = 0;
-    let clipMarginHeight = 0;
-    if (overflow === 'clip') {
-      const clipNum = getPxValue(overflowClipMargin);
-      clipMarginWidth = clipNum * scaleX;
-      clipMarginHeight = clipNum * scaleY;
-    }
-
-    // Region
-    const eleLeft = eleRect.x + scaledBorderLeftWidth - clipMarginWidth;
-    const eleTop = eleRect.y + scaledBorderTopWidth - clipMarginHeight;
-
-    const eleRight =
-      eleLeft +
-      eleRect.width +
-      2 * clipMarginWidth -
-      scaledBorderLeftWidth -
-      scaledBorderRightWidth -
-      eleScrollWidth;
-
-    const eleBottom =
-      eleTop +
-      eleRect.height +
-      2 * clipMarginHeight -
-      scaledBorderTopWidth -
-      scaledBorderBottomWidth -
-      eleScrollHeight;
-
-    visibleArea.left = Math.max(visibleArea.left, eleLeft);
-    visibleArea.top = Math.max(visibleArea.top, eleTop);
-    visibleArea.right = Math.min(visibleArea.right, eleRight);
-    visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
-  });
-
-  return visibleArea;
-}
diff --git a/tests/.gitkeep b/tests/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/tests/__snapshots__/.gitkeep b/tests/__snapshots__/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/tests/__snapshots__/mobile.test.tsx.snap b/tests/__snapshots__/mobile.test.tsx.snap
deleted file mode 100644
index 32c0894..0000000
--- a/tests/__snapshots__/mobile.test.tsx.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Trigger.Mobile popupRender 1`] = `
-<div
-  class="rc-trigger-popup"
->
-  <div>
-    Light
-  </div>
-  <strong
-    class="x-content"
-  />
-</div>
-`;
diff --git a/tests/align.test.tsx b/tests/align.test.tsx
deleted file mode 100644
index 9366cc7..0000000
--- a/tests/align.test.tsx
+++ /dev/null
@@ -1,297 +0,0 @@
-import { act, cleanup, fireEvent, render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import React from 'react';
-import type { TriggerProps, TriggerRef } from '../src';
-import Trigger from '../src';
-import { awaitFakeTimer } from './util';
-
-import { _rs } from 'rc-resize-observer';
-
-export const triggerResize = (target: Element) => {
-  act(() => {
-    _rs([{ target } as ResizeObserverEntry]);
-  });
-};
-
-describe('Trigger.Align', () => {
-  let targetVisible = true;
-
-  let rectX = 100;
-  let rectY = 100;
-  let rectWidth = 100;
-  let rectHeight = 100;
-
-  beforeAll(() => {
-    spyElementPrototypes(HTMLDivElement, {
-      getBoundingClientRect: () => ({
-        x: rectX,
-        y: rectY,
-        width: rectWidth,
-        height: rectHeight,
-        right: 200,
-        bottom: 200,
-      }),
-    });
-
-    spyElementPrototypes(HTMLElement, {
-      offsetParent: {
-        get: () => (targetVisible ? document.body : null),
-      },
-    });
-    spyElementPrototypes(SVGElement, {
-      offsetParent: {
-        get: () => (targetVisible ? document.body : null),
-      },
-    });
-  });
-
-  beforeEach(() => {
-    targetVisible = true;
-
-    rectX = 100;
-    rectY = 100;
-    rectWidth = 100;
-    rectHeight = 100;
-
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
-
-  it('not show', async () => {
-    const onAlign = jest.fn();
-
-    const Demo = (props: Partial<TriggerProps>) => {
-      const scrollRef = React.useRef<HTMLDivElement>(null);
-
-      return (
-        <>
-          <div
-            className="scroll"
-            ref={scrollRef}
-            // Jest can not get calculated style in jsdom. So we need to set it manually
-            style={{ overflowX: 'hidden', overflowY: 'hidden' }}
-          />
-          <Trigger
-            onPopupAlign={onAlign}
-            popupAlign={{
-              points: ['bl', 'tl'],
-            }}
-            popup={<strong>trigger</strong>}
-            getPopupContainer={() => scrollRef.current!}
-            {...props}
-          >
-            <div />
-          </Trigger>
-        </>
-      );
-    };
-
-    const { rerender, container } = render(<Demo />);
-    const scrollDiv = container.querySelector('.scroll')!;
-
-    const mockAddEvent = jest.spyOn(scrollDiv, 'addEventListener');
-
-    expect(mockAddEvent).not.toHaveBeenCalled();
-
-    // Visible
-    rerender(<Demo popupVisible />);
-    expect(mockAddEvent).toHaveBeenCalled();
-
-    // Scroll
-    onAlign.mockReset();
-    fireEvent.scroll(scrollDiv);
-
-    await awaitFakeTimer();
-    expect(onAlign).toHaveBeenCalled();
-  });
-
-  it('resize align', async () => {
-    const onAlign = jest.fn();
-
-    const { container } = render(
-      <Trigger
-        onPopupAlign={onAlign}
-        popupVisible
-        popupAlign={{
-          points: ['bl', 'tl'],
-        }}
-        popup={<strong>trigger</strong>}
-      >
-        <span className="target" />
-      </Trigger>,
-    );
-
-    await Promise.resolve();
-    onAlign.mockReset();
-
-    // Resize
-    const target = container.querySelector('.target')!;
-    triggerResize(target);
-
-    await awaitFakeTimer();
-    expect(onAlign).toHaveBeenCalled();
-  });
-
-  it('placement is higher than popupAlign', async () => {
-    render(
-      <Trigger
-        popupVisible
-        popup={<span className="bamboo" />}
-        builtinPlacements={{
-          top: {},
-        }}
-        popupPlacement="top"
-        popupAlign={{}}
-      >
-        <span />
-      </Trigger>,
-    );
-
-    await awaitFakeTimer();
-
-    expect(
-      document.querySelector('.rc-trigger-popup-placement-top'),
-    ).toBeTruthy();
-  });
-
-  it('invisible should not align', async () => {
-    const onPopupAlign = jest.fn();
-    const triggerRef = React.createRef<TriggerRef>();
-
-    render(
-      <Trigger
-        popupVisible
-        popup={<span className="bamboo" />}
-        popupAlign={{}}
-        onPopupAlign={onPopupAlign}
-        ref={triggerRef}
-      >
-        <span />
-      </Trigger>,
-    );
-
-    await awaitFakeTimer();
-
-    expect(onPopupAlign).toHaveBeenCalled();
-    onPopupAlign.mockReset();
-
-    for (let i = 0; i < 10; i += 1) {
-      triggerRef.current!.forceAlign();
-
-      await awaitFakeTimer();
-      expect(onPopupAlign).toHaveBeenCalled();
-      onPopupAlign.mockReset();
-    }
-
-    // Make invisible
-    targetVisible = false;
-
-    triggerRef.current!.forceAlign();
-    await awaitFakeTimer();
-    expect(onPopupAlign).not.toHaveBeenCalled();
-  });
-
-  it('align should merge into placement', async () => {
-    render(
-      <Trigger
-        popupVisible
-        popup={<span className="bamboo" />}
-        builtinPlacements={{
-          top: {
-            targetOffset: [0, 0],
-          },
-        }}
-        popupPlacement="top"
-        popupAlign={{
-          targetOffset: [-903, -1128],
-        }}
-      >
-        <svg />
-      </Trigger>,
-    );
-
-    await awaitFakeTimer();
-
-    expect(
-      document.querySelector('.rc-trigger-popup-placement-top'),
-    ).toHaveStyle({
-      left: `753px`,
-      top: `978px`,
-    });
-  });
-
-  it('targetOffset support ptg', async () => {
-    render(
-      <Trigger
-        popupVisible
-        popup={<span className="bamboo" />}
-        popupAlign={{
-          targetOffset: ['50%', '-50%'],
-        }}
-      >
-        <div />
-      </Trigger>,
-    );
-
-    await awaitFakeTimer();
-
-    // Correct this if I miss understand the value calculation
-    // from https://github.com/yiminghe/dom-align/blob/master/src/getElFuturePos.js
-    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
-      left: `-50px`,
-      top: `50px`,
-    });
-  });
-
-  it('support dynamicInset', async () => {
-    render(
-      <Trigger
-        popupVisible
-        popup={<span className="bamboo" />}
-        popupAlign={{
-          points: ['bc', 'tc'],
-          _experimental: {
-            dynamicInset: true,
-          },
-        }}
-      >
-        <div />
-      </Trigger>,
-    );
-
-    await awaitFakeTimer();
-
-    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
-      bottom: `100px`,
-    });
-  });
-
-  it('round when decimal precision', async () => {
-    rectX = 22.6;
-    rectY = 33.4;
-    rectWidth = 33.7;
-    rectHeight = 55.9;
-
-    render(
-      <Trigger
-        popupVisible
-        popup={<span className="bamboo" />}
-        popupAlign={{
-          points: ['tl', 'bl'],
-        }}
-      >
-        <div />
-      </Trigger>,
-    );
-
-    await awaitFakeTimer();
-
-    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
-      top: `56px`,
-    });
-  });
-});
diff --git a/tests/arrow.test.jsx b/tests/arrow.test.jsx
deleted file mode 100644
index 80be36a..0000000
--- a/tests/arrow.test.jsx
+++ /dev/null
@@ -1,212 +0,0 @@
-/* eslint-disable max-classes-per-file */
-
-import { act, cleanup, render } from '@testing-library/react';
-import {
-  spyElementPrototype,
-  spyElementPrototypes,
-} from 'rc-util/lib/test/domHook';
-import Trigger from '../src';
-
-describe('Trigger.Arrow', () => {
-  beforeAll(() => {
-    spyElementPrototypes(HTMLElement, {
-      offsetParent: {
-        get: () => document.body,
-      },
-    });
-  });
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
-
-  async function awaitFakeTimer() {
-    for (let i = 0; i < 10; i += 1) {
-      await act(async () => {
-        jest.advanceTimersByTime(100);
-        await Promise.resolve();
-      });
-    }
-  }
-
-  it('not show', () => {
-    render(
-      <Trigger popupVisible popup={<strong>trigger</strong>} arrow>
-        <div />
-      </Trigger>,
-    );
-  });
-
-  describe('direction', () => {
-    let divSpy;
-    let windowSpy;
-
-    beforeAll(() => {
-      divSpy = spyElementPrototype(
-        HTMLDivElement,
-        'getBoundingClientRect',
-        () => ({
-          x: 200,
-          y: 200,
-          width: 100,
-          height: 50,
-        }),
-      );
-
-      windowSpy = spyElementPrototypes(Window, {
-        clientWidth: {
-          get: () => 1000,
-        },
-        clientHeight: {
-          get: () => 1000,
-        },
-      });
-    });
-
-    afterAll(() => {
-      divSpy.mockRestore();
-      windowSpy.mockRestore();
-    });
-
-    function test(name, align, style) {
-      it(name, async () => {
-        render(
-          <Trigger
-            popupVisible
-            popupAlign={align}
-            popup={<strong>trigger</strong>}
-            arrow
-          >
-            <div />
-          </Trigger>,
-        );
-
-        await awaitFakeTimer();
-
-        expect(document.querySelector('.rc-trigger-popup-arrow')).toHaveStyle(
-          style,
-        );
-      });
-    }
-
-    // Top
-    test(
-      'top',
-      {
-        points: ['bl', 'tl'],
-      },
-      {
-        bottom: 0,
-      },
-    );
-
-    // Bottom
-    test(
-      'bottom',
-      {
-        points: ['tc', 'bc'],
-      },
-      {
-        top: 0,
-      },
-    );
-
-    // Left
-    test(
-      'left',
-      {
-        points: ['cr', 'cl'],
-      },
-      {
-        right: 0,
-      },
-    );
-
-    // Right
-    test(
-      'right',
-      {
-        points: ['cl', 'cr'],
-      },
-      {
-        left: 0,
-      },
-    );
-
-    it('not aligned', async () => {
-      render(
-        <Trigger
-          popupVisible
-          popupAlign={{
-            points: ['cl', 'cr'],
-            autoArrow: false,
-          }}
-          popup={<strong>trigger</strong>}
-          arrow
-        >
-          <div />
-        </Trigger>,
-      );
-
-      await awaitFakeTimer();
-
-      // Not have other align style
-      const { style } = document.querySelector('.rc-trigger-popup-arrow');
-      expect(style.position).toBeTruthy();
-      expect(style.left).toBeFalsy();
-      expect(style.right).toBeFalsy();
-      expect(style.top).toBeFalsy();
-      expect(style.bottom).toBeFalsy();
-    });
-
-    it('arrow classname', async () => {
-      render(
-        <Trigger
-          popupVisible
-          popupAlign={{
-            points: ['cl', 'cr'],
-            autoArrow: false,
-          }}
-          popup={<strong>trigger</strong>}
-          arrow={{
-            className: 'abc',
-          }}
-        >
-          <div />
-        </Trigger>,
-      );
-
-      await awaitFakeTimer();
-
-      const arrowDom = document.querySelector('.rc-trigger-popup-arrow');
-      expect(arrowDom.classList.contains('abc')).toBeTruthy();
-    });
-  });
-
-  it('content', async () => {
-    render(
-      <Trigger
-        popupVisible
-        popupAlign={{
-          points: ['cl', 'cr'],
-          autoArrow: false,
-        }}
-        popup={<strong>trigger</strong>}
-        arrow={{
-          content: <span className="my-content" />,
-        }}
-      >
-        <div />
-      </Trigger>,
-    );
-
-    await awaitFakeTimer();
-
-    expect(document.querySelector('.my-content')).toBeTruthy();
-  });
-});
diff --git a/tests/basic.test.jsx b/tests/basic.test.jsx
deleted file mode 100644
index aa4e87d..0000000
--- a/tests/basic.test.jsx
+++ /dev/null
@@ -1,1201 +0,0 @@
-/* eslint-disable max-classes-per-file */
-
-import { act, cleanup, fireEvent, render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import React, { StrictMode, createRef } from 'react';
-import ReactDOM from 'react-dom';
-import Trigger from '../src';
-import { awaitFakeTimer, placementAlignMap } from './util';
-
-describe('Trigger.Basic', () => {
-  beforeAll(() => {
-    spyElementPrototypes(HTMLElement, {
-      offsetParent: {
-        get: () => document.body,
-      },
-    });
-  });
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
-
-  function trigger(dom, selector, method = 'click') {
-    fireEvent[method](dom.querySelector(selector));
-    act(() => jest.runAllTimers());
-  }
-
-  function isPopupHidden() {
-    return document
-      .querySelector('.rc-trigger-popup')
-      .className.includes('-hidden');
-  }
-  function isPopupClassHidden(name) {
-    return document.querySelector(name).className.includes('-hidden');
-  }
-  function isPopupAllHidden() {
-    const popupArr = document.querySelectorAll('.rc-trigger-popup');
-
-    return Array.from(popupArr).every((item) =>
-      item.className.includes('-hidden'),
-    );
-  }
-  describe('getPopupContainer', () => {
-    it('defaults to document.body', () => {
-      const { container } = render(
-        <Trigger
-          action={['click']}
-          popupAlign={placementAlignMap.left}
-          popup={<strong className="x-content">tooltip2</strong>}
-        >
-          <div className="target">click</div>
-        </Trigger>,
-      );
-
-      trigger(container, '.target');
-
-      const popupDomNode = document.querySelector('.rc-trigger-popup');
-      expect(popupDomNode.parentNode.parentNode).toBeInstanceOf(
-        HTMLBodyElement,
-      );
-    });
-
-    it('can change', () => {
-      function getPopupContainer(node) {
-        return node.parentNode;
-      }
-
-      const { container } = render(
-        <div className="holder">
-          <Trigger
-            action={['click']}
-            getPopupContainer={getPopupContainer}
-            popupAlign={placementAlignMap.left}
-            popup={<strong className="x-content">tooltip2</strong>}
-          >
-            <div className="target">click</div>
-          </Trigger>
-        </div>,
-        document.createElement('div'),
-      );
-
-      trigger(container, '.target');
-
-      const popupDomNode = document.querySelector('.rc-trigger-popup');
-      expect(popupDomNode.parentNode).toBe(container.querySelector('.holder'));
-    });
-  });
-
-  describe('action', () => {
-    it('click works', () => {
-      const { container } = render(
-        <Trigger
-          action={['click']}
-          popupAlign={placementAlignMap.left}
-          popup={<strong className="x-content">tooltip2</strong>}
-        >
-          <div className="target">click</div>
-        </Trigger>,
-      );
-
-      trigger(container, '.target');
-      expect(document.querySelector('.x-content').textContent).toBe('tooltip2');
-
-      trigger(container, '.target');
-      expect(isPopupHidden).toBeTruthy();
-    });
-
-    it('click works with function', () => {
-      const popup = function renderPopup() {
-        return <strong className="x-content">tooltip3</strong>;
-      };
-      const { container } = render(
-        <Trigger
-          action={['click']}
-          popupAlign={placementAlignMap.left}
-          popup={popup}
-        >
-          <div className="target">click</div>
-        </Trigger>,
-      );
-
-      trigger(container, '.target');
-      expect(document.querySelector('.x-content').textContent).toBe('tooltip3');
-
-      trigger(container, '.target');
-      expect(isPopupHidden()).toBeTruthy();
-    });
-
-    describe('hover works', () => {
-      it('mouse event', () => {
-        const { container } = render(
-          <Trigger
-            action={['hover']}
-            popupAlign={placementAlignMap.left}
-            popup={<strong>trigger</strong>}
-          >
-            <div className="target">click</div>
-          </Trigger>,
-        );
-
-        trigger(container, '.target', 'mouseEnter');
-        expect(isPopupHidden()).toBeFalsy();
-
-        trigger(container, '.target', 'mouseLeave');
-        expect(isPopupHidden()).toBeTruthy();
-      });
-
-      it('pointer event', () => {
-        const { container } = render(
-          <Trigger
-            action={['hover']}
-            popupAlign={placementAlignMap.left}
-            popup={<strong>trigger</strong>}
-          >
-            <div className="target">click</div>
-          </Trigger>,
-        );
-
-        trigger(container, '.target', 'pointerEnter');
-        expect(isPopupHidden()).toBeFalsy();
-
-        trigger(container, '.target', 'pointerLeave');
-        expect(isPopupHidden()).toBeTruthy();
-
-        // Enter again but move in popup
-        trigger(container, '.target', 'pointerEnter');
-        expect(isPopupHidden()).toBeFalsy();
-
-        fireEvent.pointerLeave(container.querySelector('.target'));
-        trigger(document, '.rc-trigger-popup', 'pointerEnter');
-        expect(isPopupHidden()).toBeFalsy();
-      });
-    });
-
-    it('contextMenu works', () => {
-      const triggerRef = createRef();
-      const { container } = render(
-        <Trigger
-          ref={triggerRef}
-          action={['contextMenu']}
-          popupAlign={placementAlignMap.left}
-          popup={<strong>trigger</strong>}
-        >
-          <div className="target">contextMenu</div>
-        </Trigger>,
-      );
-
-      trigger(container, '.target', 'contextMenu');
-      expect(isPopupHidden()).toBeFalsy();
-
-      fireEvent.click(document.querySelector('.target'));
-
-      expect(isPopupHidden()).toBeTruthy();
-    });
-    it('contextMenu all close', () => {
-      const triggerRef1 = createRef();
-      const triggerRef2 = createRef();
-      const { container } = render(
-        <>
-          <Trigger
-            ref={triggerRef1}
-            popupClassName="trigger-popup1"
-            action={['contextMenu']}
-            popupAlign={placementAlignMap.left}
-            popup={<strong>trigger1</strong>}
-          >
-            <div className="target1">contextMenu 1</div>
-          </Trigger>
-          <Trigger
-            ref={triggerRef2}
-            action={['contextMenu']}
-            popupClassName="trigger-popup2"
-            popupAlign={placementAlignMap.right}
-            popup={<strong>trigger2</strong>}
-          >
-            <div className="target2">contextMenu 2</div>
-          </Trigger>
-        </>,
-      );
-
-      trigger(container, '.target1', 'contextMenu');
-      trigger(container, '.target2', 'contextMenu');
-      expect(isPopupClassHidden('.trigger-popup1')).toBeTruthy();
-      expect(isPopupClassHidden('.trigger-popup2')).toBeFalsy();
-
-      trigger(container, '.target1', 'contextMenu');
-      expect(isPopupClassHidden('.trigger-popup1')).toBeFalsy();
-      expect(isPopupClassHidden('.trigger-popup2')).toBeTruthy();
-
-      fireEvent.mouseDown(document.body);
-      expect(isPopupAllHidden()).toBeTruthy();
-    });
-    describe('afterPopupVisibleChange can be triggered', () => {
-      it('uncontrolled', async () => {
-        let triggered = 0;
-        const { container } = render(
-          <Trigger
-            action={['click']}
-            popupAlign={placementAlignMap.left}
-            afterPopupVisibleChange={() => {
-              triggered = 1;
-            }}
-            popup={<strong>trigger</strong>}
-          >
-            <div className="target">click</div>
-          </Trigger>,
-        );
-
-        trigger(container, '.target');
-
-        await awaitFakeTimer();
-
-        expect(triggered).toBe(1);
-      });
-
-      it('controlled', async () => {
-        let triggered = 0;
-
-        const Demo = () => {
-          const [visible, setVisible] = React.useState(false);
-
-          return (
-            <>
-              <button onClick={() => setVisible((v) => !v)} />
-              <Trigger
-                popupVisible={visible}
-                popupAlign={placementAlignMap.left}
-                afterPopupVisibleChange={() => {
-                  triggered += 1;
-                }}
-                popup={<strong>trigger</strong>}
-              >
-                <div className="target">click</div>
-              </Trigger>
-            </>
-          );
-        };
-
-        const { container } = render(<Demo />);
-
-        fireEvent.click(container.querySelector('button'));
-        await awaitFakeTimer();
-        expect(triggered).toBe(1);
-
-        fireEvent.click(container.querySelector('button'));
-        await awaitFakeTimer();
-        expect(triggered).toBe(2);
-      });
-    });
-
-    it('nested action works', () => {
-      class Test extends React.Component {
-        clickTriggerRef = React.createRef();
-
-        hoverTriggerRef = React.createRef();
-
-        render() {
-          return (
-            <Trigger
-              action={['click']}
-              popupAlign={placementAlignMap.left}
-              ref={this.clickTriggerRef}
-              popup={<strong className="click-trigger">click trigger</strong>}
-            >
-              <Trigger
-                action={['hover']}
-                popupAlign={placementAlignMap.left}
-                ref={this.hoverTriggerRef}
-                popup={<strong className="hover-trigger">hover trigger</strong>}
-              >
-                <div className="target">trigger</div>
-              </Trigger>
-            </Trigger>
-          );
-        }
-      }
-
-      const { container } = render(<Test />);
-
-      trigger(container, '.target', 'mouseEnter');
-      trigger(container, '.target');
-
-      const clickPopupDomNode =
-        document.querySelector('.click-trigger').parentElement;
-      const hoverPopupDomNode =
-        document.querySelector('.hover-trigger').parentElement;
-      expect(clickPopupDomNode).toBeTruthy();
-      expect(hoverPopupDomNode).toBeTruthy();
-
-      trigger(container, '.target', 'mouseLeave');
-      expect(hoverPopupDomNode.className.includes('-hidden')).toBeTruthy();
-      expect(clickPopupDomNode.className.includes('-hidden')).toBeFalsy();
-
-      fireEvent.click(container.querySelector('.target'));
-      act(() => jest.runAllTimers());
-      expect(hoverPopupDomNode.className.includes('-hidden')).toBeTruthy();
-      expect(clickPopupDomNode.className.includes('-hidden')).toBeTruthy();
-    });
-  });
-
-  // Placement & Align can not test in jsdom. This should test in `dom-align`
-
-  describe('forceRender', () => {
-    it("doesn't render at first time when forceRender=false", () => {
-      render(
-        <Trigger popup={<span>Hello!</span>}>
-          <span>Hey!</span>
-        </Trigger>,
-      );
-
-      expect(document.querySelector('.rc-trigger-popup')).toBeFalsy();
-    });
-
-    it('render at first time when forceRender=true', () => {
-      render(
-        <Trigger forceRender popup={<span>Hello!</span>}>
-          <span>Hey!</span>
-        </Trigger>,
-      );
-      expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-    });
-  });
-
-  describe('destroyPopupOnHide', () => {
-    it('defaults to false', () => {
-      const { container } = render(
-        <Trigger
-          action={['click']}
-          popupAlign={placementAlignMap.topRight}
-          popup={<strong>trigger</strong>}
-        >
-          <div className="target">click</div>
-        </Trigger>,
-      );
-
-      trigger(container, '.target');
-      expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-
-      trigger(container, '.target');
-      expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
-    });
-
-    it('set true will destroy tooltip on hide', () => {
-      const { container } = render(
-        <Trigger
-          action={['click']}
-          destroyPopupOnHide
-          popupAlign={placementAlignMap.topRight}
-          popup={<strong>trigger</strong>}
-        >
-          <div className="target">click</div>
-        </Trigger>,
-      );
-
-      trigger(container, '.target');
-      expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-
-      trigger(container, '.target');
-      expect(document.querySelector('.rc-trigger-popup')).toBeFalsy();
-    });
-  });
-
-  describe('support autoDestroy', () => {
-    it('defaults to false', () => {
-      const { container } = render(
-        <Trigger
-          action={['click']}
-          popupAlign={placementAlignMap.topRight}
-          popup={<strong>trigger</strong>}
-        >
-          <div className="target">click</div>
-        </Trigger>,
-      );
-
-      trigger(container, '.target');
-      expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-
-      trigger(container, '.target');
-      expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
-    });
-
-    it('set true will destroy portal on hide', () => {
-      const { container } = render(
-        <Trigger
-          action={['click']}
-          autoDestroy
-          popupAlign={placementAlignMap.topRight}
-          popup={<strong>trigger</strong>}
-        >
-          <div className="target">click</div>
-        </Trigger>,
-      );
-
-      trigger(container, '.target');
-      expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-      trigger(container, '.target');
-      expect(document.querySelector('.rc-trigger-popup')).toBeFalsy();
-    });
-  });
-
-  describe('github issues', () => {
-    // https://github.com/ant-design/ant-design/issues/9114
-    it('click in popup of popup', () => {
-      const builtinPlacements = {
-        right: {
-          points: ['cl', 'cr'],
-        },
-      };
-      let innerVisible = null;
-      function onInnerPopupVisibleChange(value) {
-        innerVisible = value;
-      }
-      const innerTrigger = (
-        <div style={{ background: 'rgba(255, 0, 0, 0.3)' }}>
-          <Trigger
-            onPopupVisibleChange={onInnerPopupVisibleChange}
-            popupPlacement="right"
-            action={['click']}
-            builtinPlacements={builtinPlacements}
-            popup={
-              <div
-                id="issue_9114_popup"
-                style={{ background: 'rgba(0, 255, 0, 0.3)' }}
-              >
-                Final Popup
-              </div>
-            }
-          >
-            <div id="issue_9114_trigger">another trigger in popup</div>
-          </Trigger>
-        </div>
-      );
-
-      let visible = null;
-      function onPopupVisibleChange(value) {
-        visible = value;
-      }
-      const { container } = render(
-        <Trigger
-          onPopupVisibleChange={onPopupVisibleChange}
-          popupPlacement="right"
-          action={['click']}
-          builtinPlacements={builtinPlacements}
-          popup={innerTrigger}
-        >
-          <span style={{ margin: 20 }} className="target">
-            basic trigger
-          </span>
-        </Trigger>,
-      );
-
-      // Basic click
-      trigger(container, '.target');
-      expect(visible).toBeTruthy();
-      expect(innerVisible).toBeFalsy();
-
-      fireEvent.click(document.querySelector('#issue_9114_trigger'));
-      expect(visible).toBeTruthy();
-      expect(innerVisible).toBeTruthy();
-
-      fireEvent.click(document.querySelector('#issue_9114_popup'));
-      expect(visible).toBeTruthy();
-      expect(innerVisible).toBeTruthy();
-    });
-  });
-
-  describe('stretch', () => {
-    const createTrigger = (stretch, restProps) =>
-      render(
-        <Trigger
-          action={['click']}
-          popupAlign={placementAlignMap.left}
-          popup={<strong className="x-content">tooltip2</strong>}
-          stretch={stretch}
-          {...restProps}
-        >
-          <div className="target">
-            click me to show trigger
-            <br />
-            react component trigger
-          </div>
-        </Trigger>,
-      );
-
-    const width = 1128;
-    const height = 903;
-    let domSpy;
-    let rect = {};
-    let rectCalled = false;
-
-    beforeAll(() => {
-      domSpy = spyElementPrototypes(HTMLElement, {
-        offsetWidth: {
-          get: () => width,
-        },
-        offsetHeight: {
-          get: () => height,
-        },
-        getBoundingClientRect() {
-          rectCalled = true;
-          return rect;
-        },
-      });
-    });
-
-    beforeEach(() => {
-      rectCalled = false;
-    });
-
-    afterAll(() => {
-      domSpy.mockRestore();
-    });
-
-    [null, { width, height }].forEach((mockRect) => {
-      ['width', 'height', 'min-width', 'min-height'].forEach((prop) => {
-        it(`${
-          mockRect ? 'offset' : 'getBoundingClientRect'
-        }: ${prop}`, async () => {
-          const onPopupAlign = jest.fn();
-
-          const { container } = createTrigger(prop, {
-            onPopupAlign,
-          });
-          rect = mockRect || {};
-
-          expect(rectCalled).toBeFalsy();
-          expect(onPopupAlign).not.toHaveBeenCalled();
-
-          // Click will trigger `onPrepare` which need measure target size
-          fireEvent.click(container.querySelector('.target'));
-          expect(rectCalled).toBeTruthy();
-
-          // Flush for motion
-          await act(async () => {
-            jest.advanceTimersByTime(100);
-            await Promise.resolve();
-          });
-          expect(onPopupAlign).toHaveBeenCalled();
-
-          expect(
-            document.querySelector('.rc-trigger-popup').style,
-          ).toHaveProperty(prop);
-        });
-      });
-    });
-  });
-
-  it('className should be undefined by default', () => {
-    const { container } = render(
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={<strong className="x-content">tooltip2</strong>}
-      >
-        <div>click</div>
-      </Trigger>,
-    );
-    expect(container.querySelector('div')).not.toHaveAttribute('class');
-  });
-
-  it('support className', () => {
-    const { container } = render(
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={<strong className="x-content">tooltip2</strong>}
-        className="className-in-trigger"
-      >
-        <div className="target">click</div>
-      </Trigger>,
-    );
-
-    expect(container.querySelector('div')).toHaveClass(
-      'target className-in-trigger',
-    );
-  });
-
-  it('support className in nested Trigger', () => {
-    const { container } = render(
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={<strong className="x-content">tooltip2</strong>}
-        className="className-in-trigger-2"
-      >
-        <Trigger
-          action={['click']}
-          popupAlign={placementAlignMap.left}
-          popup={<strong className="x-content">tooltip2</strong>}
-          className="className-in-trigger-1"
-        >
-          <div className="target">click</div>
-        </Trigger>
-      </Trigger>,
-    );
-
-    expect(container.querySelector('div').className).toBe(
-      'target className-in-trigger-1 className-in-trigger-2',
-    );
-  });
-
-  it('support function component', () => {
-    const NoRef = React.forwardRef((props, ref) => {
-      React.useImperativeHandle(ref, () => null);
-      return (
-        <div className="target" {...props}>
-          click
-        </div>
-      );
-    });
-
-    const triggerRef = createRef();
-    const { container } = render(
-      <Trigger
-        ref={triggerRef}
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={<strong className="x-content">tooltip2</strong>}
-      >
-        <NoRef />
-      </Trigger>,
-    );
-
-    trigger(container, '.target');
-    expect(isPopupHidden()).toBeFalsy();
-
-    fireEvent.click(container.querySelector('.target'));
-    act(() => jest.runAllTimers());
-    expect(isPopupHidden()).toBeTruthy();
-  });
-
-  it('Popup with mouseDown prevent', () => {
-    const { container } = render(
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={
-          <div>
-            <button
-              type="button"
-              onMouseDown={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-            >
-              Prevent
-            </button>
-          </div>
-        }
-      >
-        <h1>233</h1>
-      </Trigger>,
-    );
-
-    fireEvent.click(container.querySelector('h1'));
-    expect(isPopupHidden()).toBeFalsy();
-
-    fireEvent.click(document.querySelector('button'));
-
-    expect(isPopupHidden()).toBeFalsy();
-  });
-
-  // https://github.com/ant-design/ant-design/issues/21770
-  it('support popupStyle, such as zIndex', () => {
-    const style = { color: 'red', zIndex: 9999, top: 100, opacity: 0.93 };
-    render(
-      <Trigger
-        popupVisible
-        popupStyle={style}
-        popup={<strong className="x-content">tooltip2</strong>}
-      >
-        <div className="target">click</div>
-      </Trigger>,
-    );
-
-    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
-      ...style,
-      top: '100px',
-    });
-  });
-
-  describe('getContainer', () => {
-    it('not trigger when dom not ready', () => {
-      const getPopupContainer = jest.fn((node) => {
-        expect(node).toBeTruthy();
-        return node.parentElement;
-      });
-
-      function Demo() {
-        return (
-          <Trigger
-            popupVisible
-            getPopupContainer={getPopupContainer}
-            popup={<strong className="x-content">tooltip2</strong>}
-          >
-            <div className="target">click</div>
-          </Trigger>
-        );
-      }
-
-      render(<Demo />);
-
-      expect(getPopupContainer).toHaveBeenCalled();
-    });
-
-    it('not trigger when dom no need', () => {
-      const getPopupContainer = jest.fn(() => document.body);
-
-      let effectCalled = false;
-
-      function Demo() {
-        const popupRef = React.useRef();
-
-        React.useLayoutEffect(() => {
-          effectCalled = true;
-          expect(popupRef.current).toBeTruthy();
-        }, []);
-
-        return (
-          <Trigger
-            popupVisible
-            getPopupContainer={getPopupContainer}
-            popup={<strong ref={popupRef}>tooltip2</strong>}
-          >
-            <div className="target">click</div>
-          </Trigger>
-        );
-      }
-
-      render(<Demo />);
-      expect(effectCalled).toBeTruthy();
-    });
-  });
-
-  // https://github.com/ant-design/ant-design/issues/30116
-  // This conflict with above test for always click to hide
-  it.skip('createPortal should also work with stopPropagation', () => {
-    const root = document.createElement('div');
-    document.body.appendChild(root);
-
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-
-    const OuterContent = ({ container }) => {
-      return ReactDOM.createPortal(
-        <button
-          onMouseDown={(e) => {
-            e.stopPropagation();
-          }}
-        >
-          Stop Pop
-        </button>,
-        container,
-      );
-    };
-
-    const Demo = () => {
-      return (
-        <Trigger
-          action={['click']}
-          popup={
-            <strong className="x-content">
-              tooltip2
-              <OuterContent container={div} />
-            </strong>
-          }
-        >
-          <div className="target">click</div>
-        </Trigger>
-      );
-    };
-
-    const { container } = render(<Demo />, { container: root });
-
-    fireEvent.click(container.querySelector('.target'));
-    expect(isPopupHidden()).toBeFalsy();
-
-    // Click should not close
-    fireEvent.mouseDown(document.querySelector('button'));
-
-    // Mock document mouse click event
-    act(() => {
-      const mouseEvent = new MouseEvent('mousedown');
-      document.dispatchEvent(mouseEvent);
-    });
-
-    expect(isPopupHidden()).toBeFalsy();
-
-    document.body.removeChild(div);
-    document.body.removeChild(root);
-  });
-
-  it('nested Trigger should not force render when ancestor Trigger render', () => {
-    let isUpdate = false;
-    let isChildUpdate = false;
-    let isGrandsonUpdate = false;
-
-    const Grandson = () => {
-      if (isUpdate) {
-        isGrandsonUpdate = true;
-      }
-
-      return null;
-    };
-
-    const Child = React.memo(() => {
-      if (isUpdate) {
-        isChildUpdate = true;
-      }
-
-      return (
-        <Trigger
-          action={['click']}
-          popupAlign={placementAlignMap.left}
-          forceRender
-          popup={() => (
-            <strong className="x-content">
-              <Grandson />
-            </strong>
-          )}
-        >
-          <div className="target">click</div>
-        </Trigger>
-      );
-    });
-
-    class App extends React.Component {
-      render() {
-        return (
-          <Trigger
-            action={['click']}
-            popupAlign={placementAlignMap.left}
-            popup={<strong className="x-content">tooltip2</strong>}
-            className="className-in-trigger-2"
-          >
-            <div className="target">
-              <Child />
-            </div>
-          </Trigger>
-        );
-      }
-    }
-
-    const appRef = createRef();
-    render(<App ref={appRef} />);
-
-    isUpdate = true;
-
-    act(() => appRef.current.setState({}));
-
-    expect(isChildUpdate).toBeFalsy();
-    expect(isGrandsonUpdate).toBeFalsy();
-  });
-
-  it('should work in StrictMode with autoDestroy', () => {
-    const { container } = render(
-      <Trigger action={['click']} autoDestroy={true}>
-        <div className="target">click</div>
-      </Trigger>,
-      { wrapper: StrictMode },
-    );
-
-    // click to show
-    trigger(container, '.target');
-    expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-    // click to hide
-    trigger(container, '.target');
-    expect(document.querySelector('.rc-trigger-popup')).toBeFalsy();
-    // click to show
-    trigger(container, '.target');
-    expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-  });
-
-  it('onPopupClick', () => {
-    const onPopupClick = jest.fn();
-
-    render(
-      <Trigger
-        popupVisible
-        popup={<strong>trigger</strong>}
-        onPopupClick={onPopupClick}
-      >
-        <div />
-      </Trigger>,
-    );
-
-    fireEvent.click(document.querySelector('strong'));
-
-    expect(onPopupClick).toHaveBeenCalled();
-  });
-
-  it('find real dom node if children not support `forwardRef`', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const Node = () => <p />;
-
-    render(
-      <Trigger popup={<p>trigger</p>}>
-        <Node />
-      </Trigger>,
-    );
-
-    expect(errorSpy).not.toHaveBeenCalled();
-    errorSpy.mockRestore();
-  });
-
-  it('should trigger align when popupAlign had updated', async () => {
-    const onPopupAlign = jest.fn();
-
-    const App = () => {
-      const [placementAlign, setPlacementAlign] = React.useState(
-        placementAlignMap.leftTop,
-      );
-      const [open, setOpen] = React.useState(true);
-      return (
-        <>
-          <Trigger
-            popupVisible={open}
-            popupAlign={placementAlign}
-            onPopupAlign={onPopupAlign}
-            popup={<strong className="x-content">tooltip2</strong>}
-          >
-            <div>
-              <div
-                id="btn"
-                onClick={() => {
-                  setPlacementAlign((prev) =>
-                    prev === placementAlignMap.left
-                      ? placementAlignMap.leftTop
-                      : placementAlignMap.left,
-                  );
-                }}
-              >
-                click
-              </div>
-              <div
-                id="close"
-                onClick={() => {
-                  setOpen(false);
-                }}
-              >
-                close
-              </div>
-            </div>
-          </Trigger>
-        </>
-      );
-    };
-    render(<App />);
-
-    // CSSMotion will trigger `onPrepare` even when motion not support
-    // Which means align will trigger twice on `prepare` & `visibleChanged`
-    await awaitFakeTimer();
-    expect(onPopupAlign).toHaveBeenCalledTimes(2);
-    fireEvent.click(document.querySelector('#btn'));
-
-    await awaitFakeTimer();
-    expect(onPopupAlign).toHaveBeenCalledTimes(3);
-
-    fireEvent.click(document.querySelector('#close'));
-    await awaitFakeTimer();
-    fireEvent.click(document.querySelector('#btn'));
-    await awaitFakeTimer();
-    expect(onPopupAlign).toHaveBeenCalledTimes(3);
-  });
-
-  it('popupVisible switch `undefined` and `false` should work', async () => {
-    const Demo = (props) => (
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.topRight}
-        popup={<strong>trigger</strong>}
-        {...props}
-      >
-        <div className="target">click</div>
-      </Trigger>
-    );
-
-    const { container, rerender } = render(<Demo />);
-
-    trigger(container, '.target');
-    expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-
-    // Back to false
-    rerender(<Demo popupVisible={false} />);
-    await awaitFakeTimer();
-    expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
-
-    // Back to undefined
-    rerender(<Demo popupVisible={undefined} />);
-    await awaitFakeTimer();
-    expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
-  });
-
-  describe('click window to hide', () => {
-    it('should hide', async () => {
-      const onPopupVisibleChange = jest.fn();
-
-      const { container } = render(
-        <Trigger
-          onPopupVisibleChange={onPopupVisibleChange}
-          action="click"
-          popup={<strong>trigger</strong>}
-        >
-          <div className="target" />
-        </Trigger>,
-      );
-
-      fireEvent.click(container.querySelector('.target'));
-      await awaitFakeTimer();
-      expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
-      onPopupVisibleChange.mockReset();
-
-      // Click outside to close
-      fireEvent.mouseDown(document.body);
-      fireEvent.click(document.body);
-      await awaitFakeTimer();
-      expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
-    });
-
-    it('should not hide when mouseDown inside but mouseUp outside', async () => {
-      const onPopupVisibleChange = jest.fn();
-
-      const { container } = render(
-        <Trigger
-          onPopupVisibleChange={onPopupVisibleChange}
-          action="click"
-          popup={<strong>trigger</strong>}
-        >
-          <div className="target" />
-        </Trigger>,
-      );
-
-      fireEvent.click(container.querySelector('.target'));
-      await awaitFakeTimer();
-      expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
-      onPopupVisibleChange.mockReset();
-
-      // Click outside to close
-      fireEvent.mouseDown(document.querySelector('strong'));
-      fireEvent.click(document.body);
-      await awaitFakeTimer();
-      expect(onPopupVisibleChange).not.toHaveBeenCalled();
-    });
-
-    // https://github.com/ant-design/ant-design/issues/42526
-    it('not hide when click button', async () => {
-      const Demo = () => {
-        const [open, setOpen] = React.useState(false);
-        return (
-          <>
-            <button
-              onClick={() => {
-                setOpen(true);
-              }}
-            />
-            <Trigger
-              onPopupVisibleChange={setOpen}
-              action="click"
-              popupVisible={open}
-              popup={<strong>trigger</strong>}
-            >
-              <div className="target" />
-            </Trigger>
-          </>
-        );
-      };
-
-      const { container } = render(<Demo />);
-
-      fireEvent.click(container.querySelector('button'));
-      fireEvent.click(window);
-      await awaitFakeTimer();
-      expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-      expect(document.querySelector('.rc-trigger-popup-hidden')).toBeFalsy();
-    });
-
-    it('should hide when click outside stopPropagation button', async () => {
-      const Demo = () => {
-        return (
-          <>
-            <button
-              onMouseDown={(e) => e.stopPropagation()}
-              onClick={(e) => e.stopPropagation()}
-            />
-            <Trigger action="click" popup={<strong>trigger</strong>}>
-              <div className="target" />
-            </Trigger>
-          </>
-        );
-      };
-
-      const { container } = render(<Demo />);
-
-      fireEvent.click(container.querySelector('.target'));
-      await awaitFakeTimer();
-      expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-
-      fireEvent.mouseDown(container.querySelector('button'));
-      fireEvent.mouseUp(container.querySelector('button'));
-      fireEvent.click(container.querySelector('button'));
-      expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
-    });
-  });
-
-  it('not trigger open when hover hidden popup node', () => {
-    const onPopupVisibleChange = jest.fn();
-
-    const { container } = render(
-      <Trigger
-        onPopupVisibleChange={onPopupVisibleChange}
-        action="hover"
-        popup={<strong className="popup">trigger</strong>}
-        getPopupContainer={() => container}
-      >
-        <div className="target" />
-      </Trigger>,
-    );
-
-    trigger(container, '.target', 'mouseEnter');
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
-    onPopupVisibleChange.mockReset();
-
-    trigger(container, '.target', 'mouseLeave');
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
-    onPopupVisibleChange.mockReset();
-
-    trigger(container, '.popup', 'mouseEnter');
-    expect(onPopupVisibleChange).not.toHaveBeenCalled();
-  });
-
-  // https://gith(ub.com/ant-design/ant-design/issues/44830
-  it('fresh should work', () => {
-    const Demo = () => {
-      const [open, setOpen] = React.useState(true);
-
-      return (
-        <Trigger
-          popupVisible={open}
-          onPopupVisibleChange={setOpen}
-          popup={<strong className="x-content">{String(open)}</strong>}
-          action={['click']}
-          popupAlign={placementAlignMap.left}
-          fresh
-        >
-          <div className="target">click</div>
-        </Trigger>
-      );
-    };
-
-    const { container } = render(<Demo />);
-    expect(document.querySelector('.x-content').textContent).toBe('true');
-
-    trigger(container, '.target');
-    expect(document.querySelector('.x-content').textContent).toBe('false');
-  });
-});
diff --git a/tests/flip-visibleFirst.test.tsx b/tests/flip-visibleFirst.test.tsx
deleted file mode 100644
index e9ef989..0000000
--- a/tests/flip-visibleFirst.test.tsx
+++ /dev/null
@@ -1,309 +0,0 @@
-/* eslint-disable @typescript-eslint/no-invalid-this */
-import { act, cleanup, render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import * as React from 'react';
-import type { AlignType, TriggerProps, TriggerRef } from '../src';
-import Trigger from '../src';
-
-const flush = async () => {
-  for (let i = 0; i < 10; i += 1) {
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    await act(async () => {
-      await Promise.resolve();
-    });
-  }
-};
-
-const builtinPlacements: Record<string, AlignType> = {
-  top: {
-    points: ['bc', 'tc'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    htmlRegion: 'visibleFirst',
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    htmlRegion: 'visibleFirst',
-  },
-  left: {
-    points: ['cr', 'cl'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    htmlRegion: 'visibleFirst',
-  },
-  right: {
-    points: ['cl', 'cr'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-    htmlRegion: 'visibleFirst',
-  },
-};
-
-describe('Trigger.VisibleFirst', () => {
-  let containerRect = {
-    x: 0,
-    y: 0,
-    width: 100,
-    height: 100,
-  };
-
-  let targetRect = {
-    x: 0,
-    y: 0,
-    width: 1,
-    height: 1,
-  };
-
-  let popupRect = {
-    x: 0,
-    y: 0,
-    width: 100,
-    height: 100,
-  };
-
-  let scrollLeft = 0;
-  let scrollTop = 0;
-
-  beforeEach(() => {
-    scrollLeft = 0;
-    scrollTop = 0;
-
-    containerRect = {
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    };
-    targetRect = {
-      x: 250,
-      y: 250,
-      width: 1,
-      height: 1,
-    };
-    popupRect = {
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    };
-    jest.useFakeTimers();
-  });
-
-  beforeAll(() => {
-    function getBoundingClientRect(ele: HTMLElement) {
-      if (ele.classList.contains('container')) {
-        return containerRect;
-      }
-      if (ele.classList.contains('target')) {
-        return targetRect;
-      }
-      if (ele.classList.contains('rc-trigger-popup')) {
-        return popupRect;
-      }
-    }
-
-    spyElementPrototypes(HTMLElement, {
-      clientWidth: {
-        get() {
-          return getBoundingClientRect(this).width;
-        },
-      },
-      clientHeight: {
-        get() {
-          return getBoundingClientRect(this).height;
-        },
-      },
-      offsetWidth: {
-        get() {
-          return getBoundingClientRect(this).width;
-        },
-      },
-      offsetHeight: {
-        get() {
-          return getBoundingClientRect(this).height;
-        },
-      },
-      getBoundingClientRect() {
-        return getBoundingClientRect(this);
-      },
-    });
-
-    spyElementPrototypes(HTMLElement, {
-      offsetParent: {
-        get: () => document.body,
-      },
-    });
-
-    spyElementPrototypes(HTMLHtmlElement, {
-      clientWidth: {
-        get: () => 500,
-      },
-      clientHeight: {
-        get: () => 500,
-      },
-      scrollWidth: {
-        get: () => 1000,
-      },
-      scrollHeight: {
-        get: () => 1000,
-      },
-      scrollLeft: {
-        get: () => scrollLeft,
-      },
-      scrollTop: {
-        get: () => scrollTop,
-      },
-    });
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
-
-  /**
-   * +----------- Window -----------+--+
-   * |                    |H100     |  |
-   * |  +---- Container ----+       |  |
-   * |  |            |      |       +--+
-   * |  |       W100 |H200  |       |  |
-   * |  |    +--------+     |       |  |  Scroll is higher than target
-   * |  |    | Target |H100 |       |  |  `visibleFirst` 下如果上面的空间不足，但是滚动空间够
-   * |  |    +--------+     +       |  |  则仍然是在下方展示
-   * |  |    |        |     |H100   |  |
-   * +--+    +        |     +-------+--+
-   *    |    |  Popup |H300 |
-   *    |    |        |     |
-   *    |    |        |     |
-   *    |    +--------+     |
-   *    +-------------------+
-   */
-  const placementList = [
-    {
-      name: 'bottom',
-      scroll: { y: 100, height: 1000, x: 0, width: 500 },
-      target: { y: 300 - 1 },
-      popup: { height: 300 },
-
-      adjustPlacement: 'top',
-      adjustTarget: { y: 400 },
-    },
-
-    {
-      name: 'top',
-      scrollTop: 500,
-      scroll: { y: -700, height: 1000, x: 0, width: 500 },
-      target: { y: 0 },
-      popup: { height: 300 },
-
-      adjustPlacement: 'bottom',
-      adjustTarget: { y: -100 },
-    },
-
-    {
-      name: 'right',
-      scroll: { x: 100, width: 1000, y: 0, height: 500 },
-      target: { x: 300 - 1 },
-      popup: { width: 300 },
-
-      adjustPlacement: 'left',
-      adjustTarget: { x: 400 },
-    },
-
-    {
-      name: 'left',
-      scrollLeft: 500,
-      scroll: { x: -700, width: 1000, y: 0, height: 500 },
-      target: { x: 0 },
-      popup: { width: 300 },
-
-      adjustPlacement: 'right',
-      adjustTarget: { x: -100 },
-    },
-  ];
-
-  placementList.forEach(
-    ({
-      name,
-      scroll,
-      target,
-      popup,
-      adjustPlacement,
-      adjustTarget,
-      scrollTop: st,
-      scrollLeft: sl,
-    }) => {
-      it(`keep show in ${name}`, async () => {
-        containerRect = {
-          ...containerRect,
-          ...scroll,
-        };
-        targetRect = {
-          ...targetRect,
-          ...target,
-        };
-        popupRect = {
-          ...popupRect,
-          ...popup,
-        };
-
-        if (st !== undefined) {
-          scrollTop = st;
-        }
-        if (sl !== undefined) {
-          scrollLeft = sl;
-        }
-
-        const triggerRef = React.createRef<TriggerRef>();
-
-        const Demo = (props: Partial<TriggerProps>) => (
-          <div className="container" style={{ overflow: 'hidden' }}>
-            <Trigger
-              popupVisible
-              popup={<div className="popup" />}
-              builtinPlacements={builtinPlacements}
-              getPopupContainer={(e) => e.parentElement}
-              ref={triggerRef}
-              {...props}
-            >
-              <span className="target" />
-            </Trigger>
-          </div>
-        );
-
-        const { container, rerender } = render(
-          <Demo popupPlacement={adjustPlacement} />,
-        );
-
-        await flush();
-        expect(container.querySelector(`.rc-trigger-popup`)).toHaveClass(
-          `rc-trigger-popup-placement-${name}`,
-        );
-
-        // Adjust to fit
-        targetRect = {
-          ...targetRect,
-          ...adjustTarget,
-        };
-        rerender(<Demo popupPlacement={name} />);
-        await flush();
-        expect(container.querySelector(`.rc-trigger-popup`)).toHaveClass(
-          `rc-trigger-popup-placement-${adjustPlacement}`,
-        );
-      });
-    },
-  );
-});
diff --git a/tests/flip.test.tsx b/tests/flip.test.tsx
deleted file mode 100644
index fa98fae..0000000
--- a/tests/flip.test.tsx
+++ /dev/null
@@ -1,547 +0,0 @@
-import { act, cleanup, render } from '@testing-library/react';
-import { _rs } from 'rc-resize-observer';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import * as React from 'react';
-import type { AlignType, TriggerProps } from '../src';
-import Trigger from '../src';
-import { getVisibleArea } from '../src/util';
-
-const flush = async () => {
-  for (let i = 0; i < 10; i += 1) {
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    await act(async () => {
-      await Promise.resolve();
-    });
-  }
-};
-
-const builtinPlacements: Record<string, AlignType> = {
-  top: {
-    points: ['bc', 'tc'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-  },
-  left: {
-    points: ['cr', 'cl'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-  },
-  right: {
-    points: ['cl', 'cr'],
-    overflow: {
-      adjustX: true,
-      adjustY: true,
-    },
-  },
-};
-
-describe('Trigger.Align', () => {
-  let eleRect = {
-    width: 100,
-    height: 100,
-  };
-
-  let spanRect = {
-    x: 0,
-    y: 0,
-    width: 1,
-    height: 1,
-  };
-
-  let popupRect = {
-    x: 0,
-    y: 0,
-    width: 100,
-    height: 100,
-  };
-
-  beforeAll(() => {
-    spyElementPrototypes(HTMLElement, {
-      clientWidth: {
-        get: () => eleRect.width,
-      },
-      clientHeight: {
-        get: () => eleRect.height,
-      },
-      offsetWidth: {
-        get: () => eleRect.width,
-      },
-      offsetHeight: {
-        get: () => eleRect.height,
-      },
-    });
-
-    spyElementPrototypes(HTMLDivElement, {
-      getBoundingClientRect() {
-        return popupRect;
-      },
-    });
-
-    spyElementPrototypes(HTMLSpanElement, {
-      getBoundingClientRect() {
-        return spanRect;
-      },
-    });
-
-    spyElementPrototypes(HTMLElement, {
-      offsetParent: {
-        get: () => document.body,
-      },
-    });
-  });
-
-  beforeEach(() => {
-    eleRect = {
-      width: 100,
-      height: 100,
-    };
-    spanRect = {
-      x: 0,
-      y: 0,
-      width: 1,
-      height: 1,
-    };
-    popupRect = {
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    };
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
-
-  describe('not flip if cant', () => {
-    const list = [
-      {
-        placement: 'right',
-        x: 10,
-        className: '.rc-trigger-popup-placement-right',
-      },
-      {
-        placement: 'left',
-        x: 90,
-        className: '.rc-trigger-popup-placement-left',
-      },
-      {
-        placement: 'top',
-        y: 90,
-        className: '.rc-trigger-popup-placement-top',
-      },
-      {
-        placement: 'bottom',
-        y: 10,
-        className: '.rc-trigger-popup-placement-bottom',
-      },
-    ];
-
-    list.forEach(({ placement, x = 0, y = 0, className }) => {
-      it(placement, async () => {
-        spanRect.x = x;
-        spanRect.y = y;
-
-        render(
-          <Trigger
-            popupVisible
-            popupPlacement={placement}
-            builtinPlacements={builtinPlacements}
-            popup={<strong>trigger</strong>}
-          >
-            <span className="target" />
-          </Trigger>,
-        );
-
-        await flush();
-
-        expect(document.querySelector(className)).toBeTruthy();
-      });
-    });
-  });
-
-  describe('flip if can', () => {
-    const list = [
-      {
-        placement: 'right',
-        x: 90,
-        className: '.rc-trigger-popup-placement-left',
-      },
-      {
-        placement: 'left',
-        x: 10,
-        className: '.rc-trigger-popup-placement-right',
-      },
-      {
-        placement: 'top',
-        y: 10,
-        className: '.rc-trigger-popup-placement-bottom',
-      },
-      {
-        placement: 'bottom',
-        y: 90,
-        className: '.rc-trigger-popup-placement-top',
-      },
-    ];
-
-    list.forEach(({ placement, x = 0, y = 0, className }) => {
-      it(placement, async () => {
-        spanRect.x = x;
-        spanRect.y = y;
-
-        render(
-          <Trigger
-            popupVisible
-            popupPlacement={placement}
-            builtinPlacements={builtinPlacements}
-            popup={<strong>trigger</strong>}
-          >
-            <span className="target" />
-          </Trigger>,
-        );
-
-        await flush();
-
-        expect(document.querySelector(className)).toBeTruthy();
-      });
-    });
-  });
-
-  // `getPopupContainer` sometime makes the popup 0/0 not start at left top.
-  // We need cal the real visible position
-  /*
-
-  *******************
-  *          Target *
-  *          *************
-  *          *   Popup   *
-  *          *************
-  *                 *
-  *******************
-
-  To:
-
-  *******************
-  *          Target *
-  *   ************* *
-  *   *   Popup   * *
-  *   ************* *
-  *                 *
-  *******************
-
-  */
-  it('popup start position not at left top', async () => {
-    spanRect.x = 99;
-    spanRect.y = 0;
-
-    popupRect = {
-      x: 100,
-      y: 1,
-      width: 100,
-      height: 100,
-    };
-
-    render(
-      <Trigger
-        popupVisible
-        popupPlacement="topLeft"
-        builtinPlacements={{
-          topLeft: {
-            points: ['tl', 'bl'],
-            overflow: {
-              adjustX: true,
-              adjustY: true,
-            },
-          },
-          topRight: {
-            points: ['tr', 'br'],
-            overflow: {
-              adjustX: true,
-              adjustY: true,
-            },
-          },
-        }}
-        popup={<strong>trigger</strong>}
-      >
-        <span className="target" />
-      </Trigger>,
-    );
-
-    await flush();
-
-    // Flip
-    expect(
-      document.querySelector('.rc-trigger-popup-placement-topRight'),
-    ).toBeTruthy();
-
-    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
-      left: `-100px`, // (left: 100) - (offset: 100) = 0
-      top: `0px`,
-    });
-  });
-
-  it('overflowClipMargin support', async () => {
-    const initArea = {
-      left: 0,
-      right: 500,
-      top: 0,
-      bottom: 500,
-    };
-
-    // Affected area
-    const affectEle = document.createElement('div');
-    document.body.appendChild(affectEle);
-
-    affectEle.style.position = 'absolute';
-    affectEle.style.overflow = 'clip';
-    affectEle.style.overflowClipMargin = '50px';
-
-    const oriGetComputedStyle = window.getComputedStyle;
-    window.getComputedStyle = (ele: HTMLElement) => {
-      const retObj = oriGetComputedStyle(ele);
-      if (ele.style.overflowClipMargin) {
-        retObj.overflowClipMargin = ele.style.overflowClipMargin;
-      }
-      return retObj;
-    };
-
-    Object.defineProperties(affectEle, {
-      offsetHeight: {
-        get: () => 300,
-      },
-      offsetWidth: {
-        get: () => 300,
-      },
-      clientHeight: {
-        get: () => 300,
-      },
-      clientWidth: {
-        get: () => 300,
-      },
-    });
-    affectEle.getBoundingClientRect = () =>
-      ({
-        x: 100,
-        y: 100,
-        width: 300,
-        height: 300,
-      } as any);
-
-    const visibleArea = getVisibleArea(initArea, [affectEle]);
-    expect(visibleArea).toEqual({
-      left: 50,
-      right: 450,
-      top: 50,
-      bottom: 450,
-    });
-
-    window.getComputedStyle = oriGetComputedStyle;
-  });
-
-  // e.g. adjustY + shiftX may make popup out but push back in screen
-  // which should keep flip
-  /*
-
-  *************      Screen
-  *   Popup   ********************
-  *************                  *
-     * Target *                  *
-     **********                  *
-              *                  *
-              ********************
-
-  To:
-
-                    Screen
-              ********************
-     **********                  *
-     * Target *                  *
-     ******************          *
-          *   Popup   *          *
-          ************************
-
-  */
-  it('out of screen should keep flip', async () => {
-    spanRect.x = -200;
-    spanRect.y = 0;
-
-    popupRect = {
-      x: 0,
-      y: 0,
-      width: 200,
-      height: 200,
-    };
-
-    render(
-      <Trigger
-        popupVisible
-        popupPlacement="top"
-        builtinPlacements={{
-          top: {
-            points: ['bc', 'tc'],
-            overflow: {
-              shiftX: true,
-              adjustY: true,
-            },
-          },
-          bottom: {
-            points: ['tc', 'bc'],
-            overflow: {
-              shiftX: true,
-              adjustY: true,
-            },
-          },
-        }}
-        popup={<strong>trigger</strong>}
-      >
-        <span className="target" />
-      </Trigger>,
-    );
-
-    await flush();
-
-    expect(
-      document.querySelector('.rc-trigger-popup-placement-bottom'),
-    ).toBeTruthy();
-  });
-
-  // https://github.com/ant-design/ant-design/issues/41728
-  describe('save prev flip position', () => {
-    const flipList: {
-      name: string;
-      placement: string;
-      x?: number;
-      y?: number;
-      className: string;
-
-      // Move target position should back to origin placement which is visible
-      backX?: number;
-      backY?: number;
-      backClassName: string;
-    }[] = [
-      {
-        name: 'top2bottom',
-        placement: 'top',
-        y: 20,
-        className: '.rc-trigger-popup-placement-bottom',
-        backY: 95,
-        backClassName: '.rc-trigger-popup-placement-top',
-      },
-      {
-        name: 'bottom2top',
-        placement: 'bottom',
-        y: 80,
-        className: '.rc-trigger-popup-placement-top',
-        backY: 5,
-        backClassName: '.rc-trigger-popup-placement-bottom',
-      },
-      {
-        name: 'left2right',
-        placement: 'left',
-        x: 20,
-        className: '.rc-trigger-popup-placement-right',
-        backX: 95,
-        backClassName: '.rc-trigger-popup-placement-left',
-      },
-      {
-        name: 'right2left',
-        placement: 'right',
-        x: 80,
-        className: '.rc-trigger-popup-placement-left',
-        backX: 5,
-        backClassName: '.rc-trigger-popup-placement-right',
-      },
-    ];
-
-    flipList.forEach(
-      ({
-        name,
-        placement,
-        x = 0,
-        y = 0,
-        backX = 0,
-        backY = 0,
-        className,
-        backClassName,
-      }) => {
-        it(name, async () => {
-          spanRect.x = x;
-          spanRect.y = y;
-          popupRect.width = 30;
-          popupRect.height = 30;
-
-          const onPopupAlign = jest.fn();
-
-          const Demo = ({ popupPlacement }: Partial<TriggerProps>) => (
-            <Trigger
-              popupVisible
-              popupPlacement={popupPlacement}
-              builtinPlacements={builtinPlacements}
-              popup={<strong>trigger</strong>}
-              onPopupAlign={onPopupAlign}
-            >
-              <span className="target" />
-            </Trigger>
-          );
-
-          render(<Demo popupPlacement={placement} />);
-
-          await flush();
-
-          expect(document.querySelector(className)).toBeTruthy();
-          expect(onPopupAlign).toHaveBeenCalled();
-          onPopupAlign.mockReset();
-
-          // Change size to small than target position
-          popupRect.width = 10;
-          popupRect.height = 10;
-
-          act(() => {
-            _rs([
-              {
-                target: document.querySelector('.rc-trigger-popup'),
-              } as ResizeObserverEntry,
-            ]);
-          });
-          await flush();
-
-          expect(document.querySelector(className)).toBeTruthy();
-          expect(onPopupAlign).toHaveBeenCalled();
-          onPopupAlign.mockReset();
-
-          // Change target position to back of origin placement
-          spanRect.x = backX;
-          spanRect.y = backY;
-
-          act(() => {
-            _rs([
-              {
-                target: document.querySelector('.target'),
-              } as ResizeObserverEntry,
-            ]);
-          });
-          await flush();
-
-          expect(document.querySelector(backClassName)).toBeTruthy();
-          expect(onPopupAlign).toHaveBeenCalled();
-        });
-      },
-    );
-  });
-});
diff --git a/tests/flipShift.test.tsx b/tests/flipShift.test.tsx
deleted file mode 100644
index ed4b317..0000000
--- a/tests/flipShift.test.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import { act, cleanup, render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import React from 'react';
-import Trigger from '../src';
-
-/*
-                        ***********
-    ******************  *         *
-    *   Placement    *  *  Popup  *
-    *   **********   *  *         *
-    *   * Target *   *  *         *
-    *   **********   *  ***********
-    *                *
-    *                *
-    ******************
-
-When `placement` is `top`. It will find should flip to bottom:
-
-    ******************
-    *                *
-    *   **********   *
-    *   * Target *   *
-    *   **********   *  *********** top: 200
-    *   Placement    *  *         *
-    *                *  *  Popup  *
-    ******************  *         *
-                        *         *
-                        ***********
-
-When `placement` is `bottom`. It will find should shift to show in viewport:
-
-    ******************
-    *                *
-    *   **********   *  *********** top: 100
-    *   * Target *   *  *         *
-    *   **********   *  *  Popup  *
-    *   Placement    *  *         *
-    *                *  *         *
-    ******************  ***********
-
-*/
-
-const builtinPlacements = {
-  top: {
-    points: ['bc', 'tc'],
-    overflow: {
-      adjustY: true,
-      shiftY: true,
-    },
-  },
-  topShift: {
-    points: ['bc', 'tc'],
-    overflow: {
-      shiftX: true,
-    },
-    htmlRegion: 'visibleFirst' as const,
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    overflow: {
-      adjustY: true,
-      shiftY: true,
-    },
-  },
-  left: {
-    points: ['cr', 'cl'],
-    overflow: {
-      adjustX: true,
-      shiftX: true,
-    },
-  },
-  right: {
-    points: ['cl', 'cr'],
-    overflow: {
-      adjustX: true,
-      shiftX: true,
-    },
-  },
-};
-
-describe('Trigger.Flip+Shift', () => {
-  let spanRect = { x: 0, y: 0, width: 0, height: 0 };
-
-  beforeEach(() => {
-    spanRect = {
-      x: 0,
-      y: 100,
-      width: 100,
-      height: 100,
-    };
-
-    document.documentElement.scrollLeft = 0;
-  });
-
-  beforeAll(() => {
-    jest
-      .spyOn(document.documentElement, 'scrollWidth', 'get')
-      .mockReturnValue(1000);
-
-    // Viewport size
-    spyElementPrototypes(HTMLElement, {
-      clientWidth: {
-        get: () => 400,
-      },
-      clientHeight: {
-        get: () => 400,
-      },
-    });
-
-    // Popup size
-    spyElementPrototypes(HTMLDivElement, {
-      getBoundingClientRect() {
-        return {
-          x: 0,
-          y: 0,
-          width: 100,
-          height: 300,
-        };
-      },
-    });
-    spyElementPrototypes(HTMLSpanElement, {
-      getBoundingClientRect() {
-        return spanRect;
-      },
-    });
-    spyElementPrototypes(HTMLElement, {
-      offsetParent: {
-        get: () => document.body,
-      },
-    });
-  });
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
-
-  it('both work', async () => {
-    render(
-      <Trigger
-        popupVisible
-        popupPlacement="top"
-        builtinPlacements={builtinPlacements}
-        popup={<strong>trigger</strong>}
-      >
-        <span className="target" />
-      </Trigger>,
-    );
-
-    await act(async () => {
-      await Promise.resolve();
-    });
-
-    expect(
-      document.querySelector('.rc-trigger-popup-placement-bottom'),
-    ).toBeTruthy();
-
-    expect(
-      document.querySelector('.rc-trigger-popup-placement-bottom'),
-    ).toHaveStyle({
-      top: '100px',
-    });
-  });
-
-  it('top with visibleFirst region', async () => {
-    spanRect.x = -1000;
-    document.documentElement.scrollLeft = 500;
-
-    render(
-      <Trigger
-        popupVisible
-        popupPlacement="topShift"
-        builtinPlacements={builtinPlacements}
-        popup={<strong>trigger</strong>}
-      >
-        <span className="target" />
-      </Trigger>,
-    );
-
-    await act(async () => {
-      await Promise.resolve();
-    });
-
-    // Just need check left < 0
-    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
-      left: '-900px',
-    });
-  });
-
-  // https://github.com/ant-design/ant-design/issues/44096
-  // Note: Safe to modify `top` style compare if refactor
-  it('flip not shake by offset with shift', async () => {
-    spanRect.y = -1000;
-
-    render(
-      <Trigger
-        popupVisible
-        popupAlign={{
-          points: ['tl', 'bl'],
-          overflow: {
-            adjustY: true,
-            shiftY: true,
-          },
-          offset: [0, 33],
-        }}
-        popup={<strong>trigger</strong>}
-      >
-        <span className="target" />
-      </Trigger>,
-    );
-
-    await act(async () => {
-      await Promise.resolve();
-    });
-
-    // Just need check left < 0
-    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
-      top: '-867px',
-    });
-  });
-});
diff --git a/tests/mask.test.jsx b/tests/mask.test.jsx
deleted file mode 100644
index f4e9e12..0000000
--- a/tests/mask.test.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import Trigger from '../src';
-import CSSMotion from 'rc-motion';
-import { placementAlignMap } from './util';
-
-describe('Trigger.Mask', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  it('mask should support motion', () => {
-    const cssMotionSpy = jest.spyOn(CSSMotion, 'render');
-    const { container } = render(
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={<strong className="x-content" />}
-        mask
-        maskTransitionName="bamboo"
-      >
-        <div className="target">click</div>
-      </Trigger>,
-    );
-
-    const target = container.querySelector('.target');
-    fireEvent.click(target);
-
-    expect(cssMotionSpy).toHaveBeenCalledWith(
-      expect.objectContaining({ motionName: 'bamboo' }),
-      null,
-    );
-  });
-});
diff --git a/tests/mobile.test.tsx b/tests/mobile.test.tsx
deleted file mode 100644
index b7abaed..0000000
--- a/tests/mobile.test.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { act, fireEvent, render } from '@testing-library/react';
-import isMobile from 'rc-util/lib/isMobile';
-import React from 'react';
-import Trigger from '../src';
-import { placementAlignMap } from './util';
-
-jest.mock('rc-util/lib/isMobile');
-
-describe('Trigger.Mobile', () => {
-  beforeAll(() => {
-    (isMobile as any).mockImplementation(() => true);
-  });
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.clearAllTimers();
-    jest.useRealTimers();
-  });
-
-  function flush() {
-    act(() => {
-      jest.runAllTimers();
-    });
-  }
-
-  it('auto change hover to click', () => {
-    render(
-      <Trigger
-        popupAlign={placementAlignMap.left}
-        popup={<strong>trigger</strong>}
-      >
-        <div className="target" />
-      </Trigger>,
-    );
-
-    flush();
-    expect(document.querySelector('.rc-trigger-popup')).toBeFalsy();
-
-    // Hover not work
-    fireEvent.mouseEnter(document.querySelector('.target'));
-    flush();
-    expect(document.querySelector('.rc-trigger-popup')).toBeFalsy();
-
-    // Click work
-    fireEvent.click(document.querySelector('.target'));
-    flush();
-    expect(document.querySelector('.rc-trigger-popup')).toBeTruthy();
-  });
-
-  // ====================================================================================
-  // ZombieJ: back when we plan to support mobile
-
-  function getTrigger(props?: any) {
-    return (
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={<strong className="x-content" />}
-        mask
-        maskClosable
-        mobile={{}}
-        {...props}
-      >
-        <div className="target">click</div>
-      </Trigger>
-    );
-  }
-
-  it.skip('mobile config', () => {
-    const { container } = render(
-      getTrigger({
-        mobile: {
-          popupClassName: 'mobile-popup',
-          popupStyle: { background: 'red' },
-        },
-      }),
-    );
-
-    fireEvent.click(container.querySelector('.target'));
-
-    expect(document.querySelector('.rc-trigger-popup')).toHaveClass(
-      'mobile-popup',
-    );
-
-    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
-      background: 'red',
-    });
-  });
-
-  it.skip('popupRender', () => {
-    const { container } = render(
-      getTrigger({
-        mobile: {
-          popupRender: (node) => (
-            <>
-              <div>Light</div>
-              {node}
-            </>
-          ),
-        },
-      }),
-    );
-
-    fireEvent.click(container.querySelector('.target'));
-    expect(document.querySelector('.rc-trigger-popup')).toMatchSnapshot();
-  });
-
-  it.skip('click inside not close', () => {
-    const triggerRef = React.createRef<any>();
-    const { container } = render(getTrigger({ ref: triggerRef }));
-    fireEvent.click(container.querySelector('.target'));
-    expect(triggerRef.current.state.popupVisible).toBeTruthy();
-    fireEvent.click(document.querySelector('.x-content'));
-    expect(triggerRef.current.state.popupVisible).toBeTruthy();
-
-    // Document click
-    act(() => {
-      fireEvent.mouseDown(document);
-    });
-    expect(triggerRef.current.state.popupVisible).toBeFalsy();
-  });
-
-  it.skip('legacy array children', () => {
-    const { container } = render(
-      getTrigger({
-        popup: [<div key={0}>Light</div>, <div key={1}>Bamboo</div>],
-      }),
-    );
-    fireEvent.click(container.querySelector('.target'));
-    expect(document.querySelectorAll('.rc-trigger-popup-content')).toHaveLength(
-      1,
-    );
-  });
-});
diff --git a/tests/motion.test.jsx b/tests/motion.test.jsx
deleted file mode 100644
index 0dd3928..0000000
--- a/tests/motion.test.jsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { act, cleanup, fireEvent, render } from '@testing-library/react';
-import Trigger from '../src';
-import { placementAlignMap } from './util';
-
-describe('Trigger.Motion', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
-
-  async function awaitFakeTimer() {
-    for (let i = 0; i < 10; i += 1) {
-      await act(async () => {
-        jest.advanceTimersByTime(100);
-        await Promise.resolve();
-      });
-    }
-  }
-
-  it('popup should support motion', async () => {
-    const { container } = render(
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={<strong className="x-content" />}
-        popupMotion={{
-          motionName: 'bamboo',
-        }}
-      >
-        <div className="target">click</div>
-      </Trigger>,
-    );
-    const target = container.querySelector('.target');
-
-    fireEvent.click(target);
-
-    expect(document.querySelector('.rc-trigger-popup')).toHaveClass(
-      'bamboo-appear',
-    );
-
-    expect(
-      document.querySelector('.rc-trigger-popup').style.pointerEvents,
-    ).toEqual('');
-  });
-
-  it('use correct leave motion', async () => {
-    // const cssMotionSpy = jest.spyOn(CSSMotion, 'render');
-
-    const renderDemo = (props) => (
-      <Trigger
-        action={['click']}
-        popupAlign={placementAlignMap.left}
-        popup={<strong className="x-content" />}
-        popupMotion={{
-          motionName: 'bamboo',
-          leavedClassName: 'light',
-          motionDeadline: 300,
-        }}
-        {...props}
-      >
-        <div className="target">click</div>
-      </Trigger>
-    );
-
-    const { rerender } = render(renderDemo({ popupVisible: true }));
-    await awaitFakeTimer();
-
-    rerender(renderDemo({ popupVisible: false }));
-    await awaitFakeTimer();
-
-    expect(document.querySelector('.rc-trigger-popup')).toHaveClass('light');
-  });
-
-  it('not lock on appear', () => {
-    const genTrigger = (props) => (
-      <Trigger
-        popup={<strong className="x-content" />}
-        popupMotion={{
-          motionName: 'bamboo',
-        }}
-        popupVisible
-        {...props}
-      >
-        <span />
-      </Trigger>
-    );
-
-    const { rerender } = render(genTrigger());
-
-    expect(document.querySelector('.rc-trigger-popup')).not.toHaveStyle({
-      pointerEvents: 'none',
-    });
-
-    rerender(genTrigger({ popupVisible: false }));
-    expect(document.querySelector('.rc-trigger-popup')).toHaveStyle({
-      pointerEvents: 'none',
-    });
-  });
-
-  it('no update when close', () => {
-    const genTrigger = ({ children, ...props }) => (
-      <Trigger
-        popup={children}
-        popupMotion={{
-          motionName: 'bamboo',
-        }}
-        popupVisible
-        {...props}
-      >
-        <span />
-      </Trigger>
-    );
-
-    const { rerender } = render(
-      genTrigger({
-        children: <div className="bamboo" />,
-      }),
-    );
-
-    expect(document.querySelector('.bamboo')).toBeTruthy();
-
-    // rerender when open
-    rerender(
-      genTrigger({
-        children: <div className="little" />,
-      }),
-    );
-    expect(document.querySelector('.little')).toBeTruthy();
-
-    // rerender when close
-    rerender(
-      genTrigger({
-        popupVisible: false,
-        children: <div className="light" />,
-      }),
-    );
-    expect(document.querySelector('.little')).toBeTruthy();
-  });
-});
diff --git a/tests/point.test.jsx b/tests/point.test.jsx
deleted file mode 100644
index 30c2a35..0000000
--- a/tests/point.test.jsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import { act, cleanup, fireEvent, render } from '@testing-library/react';
-import React from 'react';
-import Trigger from '../src';
-import { getMouseEvent } from './util';
-
-/**
- * dom-align internal default position is `-999`.
- * We do not need to simulate full position, check offset only.
- */
-describe('Trigger.Point', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
-
-  class Demo extends React.Component {
-    popup = (<div className="point-popup">POPUP</div>);
-
-    render() {
-      return (
-        <div
-          className="scroll"
-          // Jest can not get calculated style in jsdom. So we need to set it manually
-          style={{ overflowX: 'hidden', overflowY: 'hidden' }}
-        >
-          <Trigger
-            ref={this.props.triggerRef}
-            popup={this.popup}
-            popupAlign={{ points: ['tl'] }}
-            alignPoint
-            {...this.props}
-          >
-            <div className="point-region" />
-          </Trigger>
-        </div>
-      );
-    }
-  }
-
-  async function trigger(container, eventName, data) {
-    const pointRegion = container.querySelector('.point-region');
-    fireEvent(pointRegion, getMouseEvent(eventName, data));
-
-    // React scheduler will not hold when useEffect. We need repeat to tell that times go
-    for (let i = 0; i < 10; i += 1) {
-      await act(async () => {
-        jest.runAllTimers();
-        await Promise.resolve();
-      });
-    }
-  }
-
-  it('onClick', async () => {
-    const { container } = render(<Demo action={['click']} />);
-    await trigger(container, 'click', { clientX: 11, clientY: 28 });
-
-    const popup = document.querySelector('.rc-trigger-popup');
-    expect(popup).toHaveStyle({ left: '11px', top: '28px' });
-  });
-
-  it('hover', async () => {
-    const { container } = render(<Demo action={['hover']} />);
-    await trigger(container, 'mouseenter', { clientX: 10, clientY: 20 });
-    await trigger(container, 'mouseover', { clientX: 9, clientY: 3 });
-
-    const popup = document.querySelector('.rc-trigger-popup');
-    expect(popup).toHaveStyle({ left: '9px', top: '3px' });
-  });
-
-  describe('contextMenu', () => {
-    it('basic', async () => {
-      const { container } = render(
-        <Demo action={['contextMenu']} hideAction={['click']} />,
-      );
-      await trigger(container, 'contextmenu', { clientX: 10, clientY: 20 });
-
-      const popup = document.querySelector('.rc-trigger-popup');
-      expect(popup.style).toEqual(
-        expect.objectContaining({ left: '10px', top: '20px' }),
-      );
-
-      // Not trigger point update when close
-      const clickEvent = {};
-      const pagePropDefine = {
-        get: () => {
-          throw new Error('should not read when close');
-        },
-      };
-      Object.defineProperties(clickEvent, {
-        clientX: pagePropDefine,
-        clientY: pagePropDefine,
-      });
-      fireEvent(
-        container.querySelector('.point-region'),
-        getMouseEvent('click', clickEvent),
-      );
-
-      expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
-    });
-
-    // https://github.com/ant-design/ant-design/issues/17043
-    it('not prevent default', (done) => {
-      (async function () {
-        const { container } = render(
-          <Demo showAction={['contextMenu']} hideAction={['click']} />,
-        );
-        await trigger(container, 'contextmenu', { clientX: 10, clientY: 20 });
-
-        const popup = document.querySelector('.rc-trigger-popup');
-        expect(popup).toHaveStyle({ left: '10px', top: '20px' });
-
-        // Click to close
-        fireEvent(
-          document.querySelector('.rc-trigger-popup > *'),
-          getMouseEvent('click', {
-            preventDefault() {
-              done.fail();
-            },
-          }),
-        );
-
-        done();
-      })();
-    });
-
-    it('should hide popup when set alignPoint after scrolling', async () => {
-      const { container } = render(<Demo action={['contextMenu']} />);
-      await trigger(container, 'contextmenu', { clientX: 10, clientY: 20 });
-
-      const popup = document.querySelector('.rc-trigger-popup');
-      expect(popup.style).toEqual(
-        expect.objectContaining({ left: '10px', top: '20px' }),
-      );
-
-      const scrollDiv = container.querySelector('.scroll');
-      fireEvent.scroll(scrollDiv);
-
-      expect(document.querySelector('.rc-trigger-popup-hidden')).toBeTruthy();
-    });
-  });
-
-  describe('placement', () => {
-    function testPlacement(name, builtinPlacements, afterAll) {
-      it(name, async () => {
-        const { container } = render(
-          <Demo
-            action={['click']}
-            builtinPlacements={builtinPlacements}
-            popupPlacement="right"
-          />,
-        );
-        await trigger(container, 'click', { clientX: 10, clientY: 20 });
-
-        const popup = document.querySelector('.rc-trigger-popup');
-        expect(popup.style).toEqual(
-          expect.objectContaining({ left: '10px', top: '20px' }),
-        );
-
-        if (afterAll) {
-          afterAll(document.body);
-        }
-      });
-    }
-
-    testPlacement('not hit', {
-      right: {
-        // This should not hit
-        points: ['cl'],
-      },
-    });
-
-    testPlacement(
-      'hit builtin',
-      {
-        left: {
-          points: ['tl'],
-        },
-      },
-      (wrapper) => {
-        expect(wrapper.querySelector('div.rc-trigger-popup')).toHaveClass(
-          'rc-trigger-popup-placement-left',
-        );
-      },
-    );
-  });
-});
diff --git a/tests/portal.test.jsx b/tests/portal.test.jsx
deleted file mode 100644
index 699dc06..0000000
--- a/tests/portal.test.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/* eslint-disable max-classes-per-file */
-
-import { act, cleanup, fireEvent, render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Trigger from '../src';
-import { placementAlignMap } from './util';
-
-describe('Trigger.Portal', () => {
-  beforeAll(() => {
-    spyElementPrototypes(HTMLElement, {
-      offsetParent: {
-        get: () => document.body,
-      },
-    });
-  });
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
-
-  it('no trigger with portal element', () => {
-    const PortalBox = () => {
-      return ReactDOM.createPortal(
-        <div className="portal-box" />,
-        document.body,
-      );
-    };
-
-    const onPopupVisibleChange = jest.fn();
-
-    const { container } = render(
-      <div className="holder">
-        <Trigger
-          action={['hover']}
-          popupAlign={placementAlignMap.left}
-          onPopupVisibleChange={onPopupVisibleChange}
-          popup={
-            <strong className="x-content">
-              tooltip2
-              <PortalBox />
-            </strong>
-          }
-        >
-          <div className="target">hover</div>
-        </Trigger>
-      </div>,
-    );
-
-    // Show the popup
-    fireEvent.mouseEnter(container.querySelector('.target'));
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
-    fireEvent.mouseLeave(container.querySelector('.target'));
-
-    // Mouse enter popup
-    fireEvent.mouseEnter(document.querySelector('.x-content'));
-    fireEvent.mouseLeave(document.querySelector('.x-content'));
-
-    // To Portal
-    fireEvent.mouseEnter(document.querySelector('.portal-box'));
-    act(() => {
-      jest.runAllTimers();
-    });
-
-    expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
-  });
-});
diff --git a/tests/ref.test.tsx b/tests/ref.test.tsx
deleted file mode 100644
index 2d0179e..0000000
--- a/tests/ref.test.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/* eslint-disable max-classes-per-file */
-
-import { cleanup, render } from '@testing-library/react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import React from 'react';
-import Trigger, { type TriggerRef } from '../src';
-
-describe('Trigger.Ref', () => {
-  beforeAll(() => {
-    spyElementPrototypes(HTMLElement, {
-      offsetParent: {
-        get: () => document.body,
-      },
-    });
-  });
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    jest.useRealTimers();
-  });
-
-  it('support nativeElement', () => {
-    const triggerRef = React.createRef<TriggerRef>();
-
-    const { container } = render(
-      <Trigger ref={triggerRef} popup={<div />}>
-        <button />
-      </Trigger>,
-    );
-
-    expect(triggerRef.current.nativeElement).toBe(
-      container.querySelector('button'),
-    );
-  });
-
-  it('support popupElement', () => {
-    const triggerRef = React.createRef<TriggerRef>();
-
-    render(
-      <Trigger ref={triggerRef} popupVisible popup={<div />}>
-        <button />
-      </Trigger>,
-    );
-
-    expect(triggerRef.current.popupElement).toBe(
-      document.querySelector('.rc-trigger-popup'),
-    );
-  });
-});
diff --git a/tests/setup.js b/tests/setup.js
index a78e9dc..e69de29 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -1,3 +0,0 @@
-// jsdom add motion events to test CSSMotion
-window.AnimationEvent = window.AnimationEvent || (() => {});
-window.TransitionEvent = window.TransitionEvent || (() => {});
diff --git a/tests/shadow.test.tsx b/tests/shadow.test.tsx
deleted file mode 100644
index 9cf4b06..0000000
--- a/tests/shadow.test.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { act, fireEvent } from '@testing-library/react';
-import { resetWarned } from 'rc-util/lib/warning';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import Trigger from '../src';
-import { awaitFakeTimer } from './util';
-
-describe('Trigger.Shadow', () => {
-  beforeEach(() => {
-    resetWarned();
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  const Demo: React.FC = (props?: any) => (
-    <>
-      <Trigger
-        action={['click']}
-        popup={<span className="bamboo" />}
-        builtinPlacements={{
-          top: {},
-        }}
-        popupPlacement="top"
-        {...props}
-      >
-        <p className="target" />
-      </Trigger>
-
-      {/* Placeholder element which not related with Trigger */}
-      <div className="little" />
-    </>
-  );
-
-  const renderShadow = (props?: any) => {
-    const noRelatedSpan = document.createElement('span');
-    document.body.appendChild(noRelatedSpan);
-
-    const host = document.createElement('div');
-    document.body.appendChild(host);
-
-    const shadowRoot = host.attachShadow({
-      mode: 'open',
-      delegatesFocus: false,
-    });
-    const container = document.createElement('div');
-    shadowRoot.appendChild(container);
-
-    act(() => {
-      createRoot(container).render(<Demo {...props} />);
-    });
-
-    return shadowRoot;
-  };
-
-  it('popup not in the same shadow', async () => {
-    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const shadowRoot = renderShadow();
-
-    await awaitFakeTimer();
-
-    fireEvent.click(shadowRoot.querySelector('.target'));
-
-    await awaitFakeTimer();
-
-    expect(errSpy).toHaveBeenCalledWith(
-      `Warning: trigger element and popup element should in same shadow root.`,
-    );
-    errSpy.mockRestore();
-  });
-
-  it('click in shadow should not close popup', async () => {
-    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    const shadowRoot = renderShadow({
-      getPopupContainer: (item: HTMLElement) => item.parentElement,
-      autoDestroy: true,
-    });
-
-    await awaitFakeTimer();
-
-    // Click to show
-    fireEvent.click(shadowRoot.querySelector('.target'));
-    await awaitFakeTimer();
-    expect(shadowRoot.querySelector('.bamboo')).toBeTruthy();
-
-    // Click outside to hide
-    fireEvent.mouseDown(document.body.firstChild);
-    await awaitFakeTimer();
-    expect(shadowRoot.querySelector('.bamboo')).toBeFalsy();
-
-    // Click to show again
-    fireEvent.click(shadowRoot.querySelector('.target'));
-    await awaitFakeTimer();
-    expect(shadowRoot.querySelector('.bamboo')).toBeTruthy();
-
-    // Click in side shadow to hide
-    fireEvent.mouseDown(shadowRoot.querySelector('.little'));
-    await awaitFakeTimer();
-    expect(shadowRoot.querySelector('.bamboo')).toBeFalsy();
-
-    expect(errSpy).not.toHaveBeenCalled();
-    errSpy.mockRestore();
-  });
-});
diff --git a/tests/util.test.jsx b/tests/util.test.jsx
deleted file mode 100644
index efa899d..0000000
--- a/tests/util.test.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { getMotion } from '../src/util';
-// import MockTrigger from '../src/mock';
-
-/**
- * dom-align internal default position is `-999`.
- * We do not need to simulate full position, check offset only.
- */
-describe('Trigger.Util', () => {
-  describe('getMotion', () => {
-    const prefixCls = 'test';
-    const motion = {
-      motionName: 'motion',
-    };
-    const transitionName = 'transition';
-    const animation = 'animation';
-
-    it('motion is first', () => {
-      expect(getMotion(prefixCls, motion, animation, transitionName)).toEqual({
-        motionName: 'motion',
-      });
-    });
-
-    it('animation is second', () => {
-      expect(getMotion(prefixCls, null, animation, transitionName)).toEqual({
-        motionName: 'test-animation',
-      });
-    });
-
-    it('transition is last', () => {
-      expect(getMotion(prefixCls, null, null, transitionName)).toEqual({
-        motionName: 'transition',
-      });
-    });
-  });
-
-  // describe('mock', () => {
-  //   it('close', () => {
-  //     const { container } = render(
-  //       <MockTrigger
-  //         action={['click']}
-  //         popupAlign={{ points: ['cr', 'cl'] }}
-  //         popup={<div>bamboo</div>}
-  //       >
-  //         <div>light</div>
-  //       </MockTrigger>,
-  //     );
-
-  //     expect(container.innerHTML).toEqual('<div>light</div>');
-  //   });
-
-  //   it('open', () => {
-  //     const { container } = render(
-  //       <MockTrigger
-  //         action={['click']}
-  //         popupAlign={{ points: ['cr', 'cl'] }}
-  //         popup={<div>bamboo</div>}
-  //         popupVisible
-  //       >
-  //         <div>light</div>
-  //       </MockTrigger>,
-  //     );
-
-  //     expect(container.innerHTML).toEqual(
-  //       '<div>light</div><div><div class="rc-trigger-popup" style="opacity: 0;"><div>bamboo</div></div></div>',
-  //     );
-  //   });
-  // });
-});
diff --git a/tests/util.tsx b/tests/util.tsx
deleted file mode 100644
index c06684f..0000000
--- a/tests/util.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { act } from "@testing-library/react";
-
-const autoAdjustOverflow = {
-  adjustX: 1,
-  adjustY: 1,
-};
-
-const targetOffsetG = [0, 0];
-
-export const placementAlignMap = {
-  left: {
-    points: ['cr', 'cl'],
-    overflow: autoAdjustOverflow,
-    offset: [-3, 0],
-    targetOffsetG,
-  },
-  right: {
-    points: ['cl', 'cr'],
-    overflow: autoAdjustOverflow,
-    offset: [3, 0],
-    targetOffsetG,
-  },
-  top: {
-    points: ['bc', 'tc'],
-    overflow: autoAdjustOverflow,
-    offset: [0, -3],
-    targetOffsetG,
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    overflow: autoAdjustOverflow,
-    offset: [0, 3],
-    targetOffsetG,
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-    overflow: autoAdjustOverflow,
-    offset: [0, -3],
-    targetOffsetG,
-  },
-  topRight: {
-    points: ['br', 'tr'],
-    overflow: autoAdjustOverflow,
-    offset: [0, -3],
-    targetOffsetG,
-  },
-  bottomRight: {
-    points: ['tr', 'br'],
-    overflow: autoAdjustOverflow,
-    offset: [0, 3],
-    targetOffsetG,
-  },
-  bottomLeft: {
-    points: ['tl', 'bl'],
-    overflow: autoAdjustOverflow,
-    offset: [0, 3],
-    targetOffsetG,
-  },
-};
-
-// https://github.com/testing-library/react-testing-library/issues/268
-export class FakeMouseEvent extends MouseEvent {
-  constructor(type, values) {
-    const {
-      pageX,
-      pageY,
-      offsetX,
-      offsetY,
-      x,
-      y,
-      preventDefault,
-      ...mouseValues
-    } = values;
-    super(type, mouseValues);
-
-    Object.assign(this, {
-      offsetX: offsetX || 0,
-      offsetY: offsetY || 0,
-      pageX: pageX || 0,
-      pageY: pageY || 0,
-      x: x || 0,
-      y: y || 0,
-      ...(preventDefault ? { preventDefault } : {}),
-    });
-  }
-}
-
-export function getMouseEvent(type: string, values = {}): FakeMouseEvent {
-  values = {
-    bubbles: true,
-    cancelable: true,
-    ...values,
-  };
-  return new FakeMouseEvent(type, values);
-}
-
-
-export async function awaitFakeTimer() {
-  for (let i = 0; i < 10; i += 1) {
-    await act(async () => {
-      jest.advanceTimersByTime(100);
-      await Promise.resolve();
-    });
-  }
-}
diff --git a/tsconfig.json b/tsconfig.json
index 74b428a..e8b898e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,8 +10,7 @@
     "allowSyntheticDefaultImports": true,
     "paths": {
       "@/*": ["src/*"],
-      "@@/*": [".dumi/tmp/*"],
-      "rc-trigger": ["src/index.tsx"]
+      "@@/*": [".dumi/tmp/*"]
     }
   }
 }