From 3456257eff739ba44f5b771780429ae7b238d7fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Tue, 30 Jul 2024 11:45:46 +0800
Subject: [PATCH] fix: popup align position (#50134)

* fix: popup align

* chore: adjust tooltip

* fix: var
---
 components/popover/style/index.ts  |  6 +++-
 components/style/placementArrow.ts | 49 ++++++++++++++++++++----------
 components/tooltip/style/index.ts  |  6 +++-
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/components/popover/style/index.ts b/components/popover/style/index.ts
index 69b273627b..216688e08b 100644
--- a/components/popover/style/index.ts
+++ b/components/popover/style/index.ts
@@ -88,7 +88,11 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
         textAlign: 'start',
         cursor: 'auto',
         userSelect: 'text',
-        transformOrigin: `var(--arrow-x, 50%) var(--arrow-y, 50%)`,
+
+        // When use `autoArrow`, origin will follow the arrow position
+        '--valid-offset-x': 'var(--arrow-offset-horizontal, var(--arrow-x))',
+        transformOrigin: [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(' '),
+
         '--antd-arrow-background-color': colorBgElevated,
         width: 'max-content',
         maxWidth: '100vw',
diff --git a/components/style/placementArrow.ts b/components/style/placementArrow.ts
index 38e830416b..ccf677747d 100644
--- a/components/style/placementArrow.ts
+++ b/components/style/placementArrow.ts
@@ -1,4 +1,5 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
 
 import type { AliasToken, TokenWithCommonCls } from '../theme/internal';
 import type { ArrowToken } from './roundedArrow';
@@ -95,17 +96,25 @@ export default function getArrowStyle<
           transform: 'translateX(-50%) translateY(100%) rotate(180deg)',
         },
 
-        [`&-placement-topLeft > ${componentCls}-arrow`]: {
-          left: {
-            _skip_check_: true,
-            value: arrowOffsetHorizontal,
+        '&-placement-topLeft': {
+          '--arrow-offset-horizontal': arrowOffsetHorizontal,
+
+          [`> ${componentCls}-arrow`]: {
+            left: {
+              _skip_check_: true,
+              value: arrowOffsetHorizontal,
+            },
           },
         },
 
-        [`&-placement-topRight > ${componentCls}-arrow`]: {
-          right: {
-            _skip_check_: true,
-            value: arrowOffsetHorizontal,
+        '&-placement-topRight': {
+          '--arrow-offset-horizontal': `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+
+          [`> ${componentCls}-arrow`]: {
+            right: {
+              _skip_check_: true,
+              value: arrowOffsetHorizontal,
+            },
           },
         },
       }),
@@ -129,17 +138,25 @@ export default function getArrowStyle<
           transform: `translateX(-50%) translateY(-100%)`,
         },
 
-        [`&-placement-bottomLeft > ${componentCls}-arrow`]: {
-          left: {
-            _skip_check_: true,
-            value: arrowOffsetHorizontal,
+        '&-placement-bottomLeft': {
+          '--arrow-offset-horizontal': arrowOffsetHorizontal,
+
+          [`> ${componentCls}-arrow`]: {
+            left: {
+              _skip_check_: true,
+              value: arrowOffsetHorizontal,
+            },
           },
         },
 
-        [`&-placement-bottomRight > ${componentCls}-arrow`]: {
-          right: {
-            _skip_check_: true,
-            value: arrowOffsetHorizontal,
+        '&-placement-bottomRight': {
+          '--arrow-offset-horizontal': `calc(100% - ${unit(arrowOffsetHorizontal)})`,
+
+          [`> ${componentCls}-arrow`]: {
+            right: {
+              _skip_check_: true,
+              value: arrowOffsetHorizontal,
+            },
           },
         },
       }),
diff --git a/components/tooltip/style/index.ts b/components/tooltip/style/index.ts
index 08eaed6995..fcd1a375fc 100644
--- a/components/tooltip/style/index.ts
+++ b/components/tooltip/style/index.ts
@@ -52,7 +52,11 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
         width: 'max-content',
         maxWidth: tooltipMaxWidth,
         visibility: 'visible',
-        transformOrigin: `var(--arrow-x, 50%) var(--arrow-y, 50%)`,
+
+        // When use `autoArrow`, origin will follow the arrow position
+        '--valid-offset-x': 'var(--arrow-offset-horizontal, var(--arrow-x))',
+        transformOrigin: [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(' '),
+
         '&-hidden': {
           display: 'none',
         },