fix: use Rect for logic (#906)

* fix: use Rect for logic

* test: update snapshot

* chore: clean up

* chore: fix build

Author: zombieJ

assets/index.less

@@ -37,6 +37,12 @@
   &-invalid {
     box-shadow: 0 0 2px red;
   }
+
+  &-panels {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
   &-panel {
     display: inline-block;
     vertical-align: top;

src/PickerInput/Popup/index.tsx

@@ -8,7 +8,6 @@ import type {
   ValueDate,
 } from '../../interface';
 import { toArray } from '../../utils/miscUtil';
-import { getRealPlacement, getoffsetUnit } from '../../utils/uiUtil';
 import PickerContext from '../context';
 import Footer, { type FooterProps } from './Footer';
 import PopupPanel, { type PopupPanelProps } from './PopupPanel';
@@ -32,8 +31,7 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
   onPresetSubmit: (presetValue: PresetValue) => void;
 
   // Range
-  activeOffset?: number;
-  placement?: string;
+  activeInfo?: [activeInputLeft: number, activeInputRight: number, selectorWidth: number];
   // Direction
   direction?: 'ltr' | 'rtl';
 
@@ -59,8 +57,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     // Range
     range,
     multiple,
-    activeOffset = 0,
-    placement,
+    activeInfo = [0, 0, 0],
 
     // Presets
     presets,
@@ -96,28 +93,43 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   // ======================== Offset ========================
   const [containerWidth, setContainerWidth] = React.useState<number>(0);
   const [containerOffset, setContainerOffset] = React.useState<number>(0);
+  const [arrowOffset, setArrowOffset] = React.useState<number>(0);
 
   const onResize: ResizeObserverProps['onResize'] = (info) => {
-    if (info.offsetWidth) {
-      setContainerWidth(info.offsetWidth);
+    if (info.width) {
+      setContainerWidth(info.width);
     }
   };
 
+  const [activeInputLeft, activeInputRight, selectorWidth] = activeInfo;
+
   React.useEffect(() => {
     // `activeOffset` is always align with the active input element
     // So we need only check container contains the `activeOffset`
-    if (range) {
+    if (range && wrapperRef.current) {
       // Offset in case container has border radius
       const arrowWidth = arrowRef.current?.offsetWidth || 0;
 
-      const maxOffset = containerWidth - arrowWidth;
-      if (activeOffset <= maxOffset) {
-        setContainerOffset(0);
+      // Arrow Offset
+      const wrapperRect = wrapperRef.current.getBoundingClientRect();
+      const nextArrowOffset = rtl
+        ? activeInputRight - arrowWidth
+        : activeInputLeft - wrapperRect.left;
+      setArrowOffset(nextArrowOffset);
+
+      // Container Offset
+      if (containerWidth < selectorWidth) {
+        const offset = rtl
+          ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth)
+          : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth;
+
+        const safeOffset = Math.max(0, offset);
+        setContainerOffset(safeOffset);
       } else {
-        setContainerOffset(activeOffset + arrowWidth - containerWidth);
+        setContainerOffset(0);
       }
     }
-  }, [containerWidth, activeOffset, range]);
+  }, [rtl, containerWidth, activeInputLeft, activeInputRight, selectorWidth, range]);
 
   // ======================== Custom ========================
   function filterEmpty<T>(list: T[]) {
@@ -213,19 +225,13 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   );
 
   if (range) {
-    const realPlacement = getRealPlacement(placement, rtl);
-    const offsetUnit = getoffsetUnit(realPlacement, rtl);
     renderNode = (
       <div
         onMouseDown={onPanelMouseDown}
         ref={wrapperRef}
         className={classNames(`${prefixCls}-range-wrapper`, `${prefixCls}-${picker}-range-wrapper`)}
       >
-        <div
-          ref={arrowRef}
-          className={`${prefixCls}-range-arrow`}
-          style={{ [offsetUnit]: activeOffset }}
-        />
+        <div ref={arrowRef} className={`${prefixCls}-range-arrow`} style={{ left: arrowOffset }} />
 
         {/* Watch for container size */}
         <ResizeObserver onResize={onResize}>{renderNode}</ResizeObserver>

src/PickerInput/RangePicker.tsx

@@ -160,7 +160,6 @@ function RangePicker<DateType extends object = any>(
     prefixCls,
     styles,
     classNames,
-    placement,
 
     // Value
     defaultValue,
@@ -473,7 +472,10 @@ function RangePicker<DateType extends object = any>(
   // ==                       Panels                       ==
   // ========================================================
   // Save the offset with active bar position
-  const [activeOffset, setActiveOffset] = React.useState(0);
+  // const [activeOffset, setActiveOffset] = React.useState(0);
+  const [activeInfo, setActiveInfo] = React.useState<
+    [activeInputLeft: number, activeInputRight: number, selectorWidth: number]
+  >([0, 0, 0]);
 
   // ======================= Presets ========================
   const presetList = usePresets(presets, ranges);
@@ -574,8 +576,7 @@ function RangePicker<DateType extends object = any>(
       // Range
       range
       multiplePanel={multiplePanel}
-      activeOffset={activeOffset}
-      placement={placement}
+      activeInfo={activeInfo}
       // Disabled
       disabledDate={mergedDisabledDate}
       // Focus
@@ -796,7 +797,7 @@ function RangePicker<DateType extends object = any>(
           invalid={submitInvalidates}
           onInvalid={onSelectorInvalid}
           // Offset
-          onActiveOffset={setActiveOffset}
+          onActiveInfo={setActiveInfo}
         />
       </PickerTrigger>
     </PickerContext.Provider>

src/PickerInput/Selector/RangeSelector.tsx

@@ -8,7 +8,6 @@ import useInputProps from './hooks/useInputProps';
 import useRootProps from './hooks/useRootProps';
 import Icon, { ClearIcon } from './Icon';
 import Input, { type InputRef } from './Input';
-import { getoffsetUnit, getRealPlacement } from '../../utils/uiUtil';
 
 export type SelectorIdType =
   | string
@@ -42,7 +41,9 @@ export interface RangeSelectorProps<DateType = any> extends SelectorProps<DateTy
    * Trigger when the active bar offset position changed.
    * This is used for popup panel offset.
    */
-  onActiveOffset: (offset: number) => void;
+  onActiveInfo: (
+    info: [activeInputLeft: number, activeInputRight: number, selectorWidth: number],
+  ) => void;
 }
 
 function RangeSelector<DateType extends object = any>(
@@ -102,7 +103,7 @@ function RangeSelector<DateType extends object = any>(
     onOpenChange,
 
     // Offset
-    onActiveOffset,
+    onActiveInfo,
     placement,
 
     // Native
@@ -173,9 +174,6 @@ function RangeSelector<DateType extends object = any>(
   });
 
   // ====================== ActiveBar =======================
-  const realPlacement = getRealPlacement(placement, rtl);
-  const offsetUnit = getoffsetUnit(realPlacement, rtl);
-  const placementRight = realPlacement?.toLowerCase().endsWith('right');
   const [activeBarStyle, setActiveBarStyle] = React.useState<React.CSSProperties>({
     position: 'absolute',
     width: 0,
@@ -184,15 +182,16 @@ function RangeSelector<DateType extends object = any>(
   const syncActiveOffset = useEvent(() => {
     const input = getInput(activeIndex);
     if (input) {
-      const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement;
-      const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0;
-      const activeOffset = placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft;
-      setActiveBarStyle(({ insetInlineStart, insetInlineEnd, ...rest }) => ({
-        ...rest,
-        width: offsetWidth,
-        [offsetUnit]: activeOffset
+      const inputRect = input.nativeElement.getBoundingClientRect();
+      const parentRect = rootRef.current.getBoundingClientRect();
+
+      const rectOffset = inputRect.left - parentRect.left;
+      setActiveBarStyle((ori) => ({
+        ...ori,
+        width: inputRect.width,
+        left: rectOffset,
       }));
-      onActiveOffset(activeOffset);
+      onActiveInfo([inputRect.left, inputRect.right, parentRect.width]);
     }
   });