chore: add css var for calc (#577)

* chore: add css var for calc

* chore: fix ts

Author: zombieJ

src/UniqueProvider/UniqueBody.tsx

@@ -3,7 +3,7 @@ import useOffsetStyle from '../hooks/useOffsetStyle';
 import classNames from 'classnames';
 import CSSMotion from '@rc-component/motion';
 import type { CSSMotionProps } from '@rc-component/motion';
-import type { AlignType } from '../interface';
+import type { AlignType, ArrowPos } from '../interface';
 
 export interface UniqueBodyProps {
   prefixCls: string; // ${prefixCls}-unique-body
@@ -15,6 +15,7 @@ export interface UniqueBodyProps {
   offsetB: number;
   offsetX: number;
   offsetY: number;
+  arrowPos?: ArrowPos;
   popupSize?: { width: number; height: number };
   motion?: CSSMotionProps;
   uniqueBgClassName?: string;
@@ -32,6 +33,7 @@ const UniqueBody = (props: UniqueBodyProps) => {
     offsetB,
     offsetX,
     offsetY,
+    arrowPos,
     popupSize,
     motion,
     uniqueBgClassName,
@@ -84,11 +86,13 @@ const UniqueBody = (props: UniqueBodyProps) => {
           <div
             className={cls}
             style={{
+              '--arrow-x': `${arrowPos?.x || 0}px`,
+              '--arrow-y': `${arrowPos?.y || 0}px`,
               ...offsetStyle,
               ...sizeStyle,
               ...motionStyle,
               ...uniqueBgStyle,
-            }}
+            } as React.CSSProperties}
           />
         );
       }}

src/UniqueProvider/index.tsx

@@ -214,6 +214,10 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
               offsetB={offsetB}
               offsetX={offsetX}
               offsetY={offsetY}
+              arrowPos={{
+                x: arrowX,
+                y: arrowY,
+              }}
               popupSize={popupSize}
               motion={options.popupMotion}
               uniqueBgClassName={classNames(

tests/unique.test.tsx

@@ -236,6 +236,7 @@ describe('Trigger.Unique', () => {
               },
             },
           }}
+          arrow
         >
           <div className="target">click me</div>
         </Trigger>
@@ -246,5 +247,11 @@ describe('Trigger.Unique', () => {
     expect(document.querySelector('.rc-trigger-popup-unique-body')).toHaveClass(
       'bamboo',
     );
+
+    // Check that arrow position CSS variables are set
+    const uniqueBody = document.querySelector('.rc-trigger-popup-unique-body');
+    const computedStyle = getComputedStyle(uniqueBody);
+    expect(computedStyle.getPropertyValue('--arrow-x')).not.toBe('');
+    expect(computedStyle.getPropertyValue('--arrow-y')).not.toBe('');
   });
 });