fix: use Rect for logic

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,7 @@ import type {
   ValueDate,
 } from '../../interface';
 import { toArray } from '../../utils/miscUtil';
-import { getRealPlacement, getoffsetUnit } from '../../utils/uiUtil';
+import { getRealPlacement, getOffsetUnit } from '../../utils/uiUtil';
 import PickerContext from '../context';
 import Footer, { type FooterProps } from './Footer';
 import PopupPanel, { type PopupPanelProps } from './PopupPanel';
@@ -32,7 +32,7 @@ export interface PopupProps<DateType extends object = any, PresetValue = DateTyp
   onPresetSubmit: (presetValue: PresetValue) => void;
 
   // Range
-  activeOffset?: number;
+  activeInfo?: [activeInputLeft: number, activeInputRight: number, selectorWidth: number];
   placement?: string;
   // Direction
   direction?: 'ltr' | 'rtl';
@@ -59,7 +59,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     // Range
     range,
     multiple,
-    activeOffset = 0,
+    activeInfo = [0, 0, 0],
     placement,
 
     // Presets
@@ -96,28 +96,46 @@ 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);
     }
   };
 
+  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) {
+        if (rtl) {
+          const offset = wrapperRect.right - (activeInputRight - arrowWidth + containerWidth);
+          const safeOffset = Math.max(0, offset);
+          setContainerOffset(safeOffset);
+        } else {
+          const offset = 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 +231,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

@@ -473,7 +473,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,7 +577,7 @@ function RangePicker<DateType extends object = any>(
       // Range
       range
       multiplePanel={multiplePanel}
-      activeOffset={activeOffset}
+      activeInfo={activeInfo}
       placement={placement}
       // Disabled
       disabledDate={mergedDisabledDate}
@@ -796,7 +799,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,7 @@ 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';
+// import { getOffsetUnit, getRealPlacement } from '../../utils/uiUtil';
 
 export type SelectorIdType =
   | string
@@ -42,7 +42,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 +104,7 @@ function RangeSelector<DateType extends object = any>(
     onOpenChange,
 
     // Offset
-    onActiveOffset,
+    onActiveInfo,
     placement,
 
     // Native
@@ -173,9 +175,9 @@ function RangeSelector<DateType extends object = any>(
   });
 
   // ====================== ActiveBar =======================
-  const realPlacement = getRealPlacement(placement, rtl);
-  const offsetUnit = getoffsetUnit(realPlacement, rtl);
-  const placementRight = realPlacement?.toLowerCase().endsWith('right');
+  // 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 +186,26 @@ 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,
+      const { offsetWidth, 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
+      // }));
+      // onActiveOffset(activeOffset);
+
+      const inputRect = input.nativeElement.getBoundingClientRect();
+      const parentRect = rootRef.current.getBoundingClientRect();
+
+      const rectOffset = inputRect.left - parentRect.left;
+      setActiveBarStyle((ori) => ({
+        ...ori,
         width: offsetWidth,
-        [offsetUnit]: activeOffset
+        left: rectOffset,
       }));
-      onActiveOffset(activeOffset);
+      onActiveInfo([inputRect.left, inputRect.right, parentRect.width]);
     }
   });
 

src/utils/uiUtil.ts

@@ -195,12 +195,12 @@ export function getRealPlacement(placement: string, rtl: boolean) {
   return rtl ? 'bottomRight' : 'bottomLeft';
 }
 
-export function getoffsetUnit(placement: string, rtl: boolean) {
+export function getOffsetUnit(placement: string, rtl: boolean) {
   const realPlacement = getRealPlacement(placement, rtl);
   const placementRight = realPlacement?.toLowerCase().endsWith('right');
   let offsetUnit = placementRight ? 'insetInlineEnd' : 'insetInlineStart';
   if (rtl) {
-    offsetUnit = ['insetInlineStart', 'insetInlineEnd'].find(unit => unit !== offsetUnit);
+    offsetUnit = ['insetInlineStart', 'insetInlineEnd'].find((unit) => unit !== offsetUnit);
   }
   return offsetUnit;
-}
+}