@@ -6,7 +6,7 @@ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
6
6
import { composeRef } from 'rc-util/lib/ref' ;
7
7
import * as React from 'react' ;
8
8
import type { TriggerProps } from '../' ;
9
- import type { AlignType , ArrowType } from '../interface' ;
9
+ import type { AlignType , ArrowPos , ArrowTypeOuter } from '../interface' ;
10
10
import Arrow from './Arrow' ;
11
11
import Mask from './Mask' ;
12
12
import PopupContent from './PopupContent' ;
@@ -26,7 +26,8 @@ export interface PopupProps {
26
26
27
27
// Arrow
28
28
align ?: AlignType ;
29
- arrow ?: ArrowType ;
29
+ arrow ?: ArrowTypeOuter ;
30
+ arrowPos : ArrowPos ;
30
31
31
32
// Open
32
33
open : boolean ;
@@ -81,6 +82,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
81
82
82
83
// Arrow
83
84
arrow,
85
+ arrowPos,
84
86
align,
85
87
86
88
// Motion
@@ -206,14 +208,18 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
206
208
< div
207
209
ref = { composeRef ( resizeObserverRef , ref , motionRef ) }
208
210
className = { cls }
209
- style = { {
210
- ...offsetStyle ,
211
- ...miscStyle ,
212
- ...motionStyle ,
213
- boxSizing : 'border-box' ,
214
- zIndex,
215
- ...style ,
216
- } }
211
+ style = {
212
+ {
213
+ '--arrow-x' : `${ arrowPos . x || 0 } px` ,
214
+ '--arrow-y' : `${ arrowPos . y || 0 } px` ,
215
+ ...offsetStyle ,
216
+ ...miscStyle ,
217
+ ...motionStyle ,
218
+ boxSizing : 'border-box' ,
219
+ zIndex,
220
+ ...style ,
221
+ } as React . CSSProperties
222
+ }
217
223
onMouseEnter = { onMouseEnter }
218
224
onMouseLeave = { onMouseLeave }
219
225
onClick = { onClick }
@@ -222,6 +228,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
222
228
< Arrow
223
229
prefixCls = { prefixCls }
224
230
arrow = { arrow }
231
+ arrowPos = { arrowPos }
225
232
align = { align }
226
233
/>
227
234
) }
0 commit comments