@sheinx/hooks 3.3.6-beta.1 → 3.3.6-beta.3

package/cjs/common/use-position-style/index.d.ts

@@ -16,6 +16,9 @@ export interface PositionStyleConfig {
     updateKey?: number | string;
     adjust?: boolean;
 }
-export declare const usePositionStyle: (config: PositionStyleConfig) => React.CSSProperties;
+export declare const usePositionStyle: (config: PositionStyleConfig) => {
+    style: React.CSSProperties;
+    arrayStyle: React.CSSProperties;
+};
 export default usePositionStyle;
 //# sourceMappingURL=index.d.ts.map

package/cjs/common/use-position-style/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB,wBAsO3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;;CAmS3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/cjs/common/use-position-style/index.js

@@ -49,6 +49,10 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
     _useState2 = _slicedToArray(_useState, 2),
     style = _useState2[0],
     setStyle = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    arrayStyle = _useState4[0],
+    setArrayStyle = _useState4[1];
   var _React$useRef = _react.default.useRef({
       element: null,
       containerRect: {
@@ -122,10 +126,12 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
     };
   };
   var getAbsolutePositionStyle = function getAbsolutePositionStyle(rect, position) {
+    var _popupElRef$current;
     var style = {
       position: 'absolute',
       zIndex: zIndex
     };
+    var arrayStyle = {};
     if (fixedWidth) {
       var widthKey = fixedWidth === 'min' ? 'minWidth' : 'width';
       style[widthKey] = rect.width;
@@ -135,6 +141,7 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
     var containerRect = rootContainer.getBoundingClientRect();
     var bodyRect = (document.documentElement || document.body).getBoundingClientRect();
     var containerScrollBarWidth = rootContainer.offsetWidth - rootContainer.clientWidth;
+    var targetRect = (_popupElRef$current = popupElRef.current) === null || _popupElRef$current === void 0 ? void 0 : _popupElRef$current.getBoundingClientRect();
     var containerScroll = {
       left: rootContainer.scrollLeft,
       top: rootContainer.scrollTop
@@ -151,14 +158,25 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
       if (h === 'left') {
         style.left = rect.left - containerRect.left + containerScroll.left;
         style.transform = '';
+        arrayStyle.left = "8px";
         if (adjust) {
           overRight = rect.left + context.popUpWidth - bodyRect.right + containerScrollBarWidth;
+          if (style.left < 0 && targetRect) {
+            style.left = 'auto';
+          }
         }
       } else if (h === 'right') {
         style.right = containerRect.right - rect.right + containerScrollBarWidth - containerScroll.left;
         style.left = 'auto';
         style.transform = '';
-        if (adjust) overLeft = bodyRect.left - (rect.right - context.popUpWidth);
+        arrayStyle.right = "8px";
+        if (adjust) {
+          overLeft = bodyRect.left - (rect.right - context.popUpWidth);
+          if (style.right < 0 && targetRect) {
+            style.left = bodyRect.width - targetRect.width;
+            style.right = 'auto';
+          }
+        }
       } else {
         // 居中对齐
         style.left = rect.left + rect.width / 2 - containerRect.left + containerScroll.left;
@@ -167,6 +185,9 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
           overRight = rect.left + rect.width / 2 + context.popUpWidth / 2 - bodyRect.width + containerScrollBarWidth;
           overLeft = bodyRect.left - (rect.left + rect.width / 2 - context.popUpWidth / 2);
         }
+        if (targetRect) {
+          arrayStyle.left = "".concat(targetRect.width / 2 - 5.9, "px");
+        }
       }
       if (adjust) {
         // 调节左右溢出
@@ -175,16 +196,26 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
           style.left -= overRight;
           // 扣除触发器距离页面右侧的距离，以保证从右侧弹出的窗口最右边对齐触发器最右边
           style.left -= toRightDistance;
+          if (targetRect) {
+            arrayStyle.left = "".concat((targetRect === null || targetRect === void 0 ? void 0 : targetRect.width) - context.parentRect.width / 2 - 5.9, "px");
+          }
         }
         if (overLeft > 0) {
           style.left += overLeft;
+          arrayStyle.left = "".concat(rect.width / 2 - 5.9, "px");
         }
       }
       if (v === 'bottom') {
         style.top = rect.bottom - containerRect.top + containerScroll.top + popupGap;
+        if (targetRect) {
+          arrayStyle.top = "".concat(0, "px");
+        }
       } else {
         style.top = rect.top - containerRect.top + containerScroll.top - popupGap;
         style.transform += 'translateY(-100%)';
+        if (targetRect) {
+          arrayStyle.top = "".concat(targetRect.height - 5.9 - 4, "px");
+        }
       }
     } else if (horizontalPosition.includes(targetPosition)) {
       var _targetPosition$split3 = targetPosition.split('-'),
@@ -194,45 +225,88 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
       if (_v === 'top') {
         style.top = rect.top - containerRect.top + containerScroll.top;
         style.transform = '';
+        arrayStyle.top = "8px";
       } else if (_v === 'bottom') {
         style.top = rect.bottom - containerRect.top + containerScroll.top;
+        arrayStyle.bottom = "8px";
         style.transform = 'translateY(-100%)';
       } else {
         // 居中对齐
         style.top = rect.top - containerRect.top + containerScroll.top + rect.height / 2;
+        if (targetRect) {
+          arrayStyle.top = "".concat(targetRect.height / 2 - 5.9 / 2, "px");
+        }
         style.transform = 'translateY(-50%)';
       }
       if (_h === 'right') {
         style.left = rect.right - containerRect.left + containerScroll.left + popupGap;
       } else {
         style.left = rect.left - containerRect.left + containerScroll.left - popupGap;
+        arrayStyle.right = "0px";
         style.transform += ' translateX(-100%)';
       }
     } else if (position === 'cover') {
       style.top = rect.top - containerRect.top + containerScroll.top;
       style.left = rect.left - containerRect.left + containerScroll.left;
     }
-    return style;
+    return {
+      style: style,
+      arrayStyle: arrayStyle
+    };
   };
   var getAbsoluteStyle = function getAbsoluteStyle(position) {
-    if (!parentElRef.current) return hideStyle;
+    if (!parentElRef.current) return {
+      style: hideStyle
+    };
     var rect = context.parentRect;
     if (scrollElRef !== null && scrollElRef !== void 0 && scrollElRef.current) {
       var _scrollElRef$current;
       var visibleRect = ((_scrollElRef$current = scrollElRef.current) === null || _scrollElRef$current === void 0 ? void 0 : _scrollElRef$current.getBoundingClientRect()) || {};
       if (rect.bottom < visibleRect.top || rect.top > visibleRect.bottom || rect.right < visibleRect.left || rect.left > visibleRect.right) {
-        return hideStyle;
+        return {
+          style: hideStyle
+        };
       }
     }
-    var style = getAbsolutePositionStyle(rect, position);
-    return style;
+    var _getAbsolutePositionS = getAbsolutePositionStyle(rect, position),
+      style = _getAbsolutePositionS.style,
+      arrayStyle = _getAbsolutePositionS.arrayStyle;
+
+    // TODO: 如果是版本大于chrome128，需要根据currentCSSZoom处理chrome的bug
+    if (!(0, _utils.isChromeLowerThan)(128)) {
+      // @ts-ignore currentCSSZoom
+      var currentCSSZoom = document.body.currentCSSZoom;
+      if (currentCSSZoom === 1 || !currentCSSZoom) return {
+        style: style,
+        arrayStyle: arrayStyle
+      };
+      if (style.left && typeof style.left === 'number') {
+        style.left = style.left * (1 / currentCSSZoom);
+      }
+      if (style.top && typeof style.top === 'number') {
+        style.top = style.top * (1 / currentCSSZoom);
+      }
+      if (style.right && typeof style.right === 'number') {
+        style.right = style.right * (1 / currentCSSZoom);
+      }
+      if (style.bottom && typeof style.bottom === 'number') {
+        style.bottom = style.bottom * (1 / currentCSSZoom);
+      }
+    }
+    return {
+      style: style,
+      arrayStyle: arrayStyle
+    };
   };
   var getStyle = function getStyle() {
     var newStyle = {};
+    var newArrayStyle = {};
     var _ref2 = config || {},
       position = _ref2.position,
       absolute = _ref2.absolute;
-    if (!position || !show || !parentElRef.current) return style;
+    if (!position || !show || !parentElRef.current) return {
+      newStyle: style
+    };
     context.parentRect = parentElRef.current.getBoundingClientRect();
     if (adjust) {
       var popupInfo = getPopUpInfo(context.parentRect);
@@ -247,21 +321,34 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
         fixedWidth: fixedWidth
       });
     } else {
-      newStyle = getAbsoluteStyle(realPosition);
+      var _ref3 = getAbsoluteStyle(realPosition),
+        nextStyle = _ref3.style,
+        nextArrayStyle = _ref3.arrayStyle;
+      newStyle = nextStyle;
+      newArrayStyle = nextArrayStyle;
     }
     // for animation
     if (realPosition.indexOf('top') === 0) {
       newStyle.transformOrigin = 'center bottom';
     }
-    return newStyle;
+    return {
+      newStyle: newStyle,
+      newArrayStyle: newArrayStyle
+    };
   };
   var updateStyle = (0, _usePersistFn.default)(function () {
-    var newStyle = getStyle();
+    var _getStyle = getStyle(),
+      newStyle = _getStyle.newStyle,
+      newArrayStyle = _getStyle.newArrayStyle;
     if (newStyle && !(0, _shallowEqual.default)(style, newStyle)) {
       setStyle(newStyle);
+      setArrayStyle(newArrayStyle || {});
     }
   });
   (0, _react.useEffect)(updateStyle, [show, position, absolute, updateKey, fixedWidth]);
-  return style;
+  return {
+    style: style,
+    arrayStyle: arrayStyle
+  };
 };
 var _default = exports.default = usePositionStyle;

package/cjs/components/use-datepicker/use-date.d.ts

@@ -12,7 +12,7 @@ declare const useDate: (props: UseDateProps) => {
         isToday: (date: Date) => boolean;
         isDisabled: (date: Date) => boolean;
         isActive: (date: Date) => boolean;
-        isInRange: (date: Date) => false | "start" | "end" | "start-end" | "in";
+        isInRange: (date: Date) => false | "end" | "start" | "start-end" | "in";
         isCurrentMonth: (date: Date) => boolean;
         handleDayClick: (date: Date) => void;
         getDayStr: (date: Date) => number;

package/cjs/components/use-datepicker/use-month.d.ts

@@ -9,7 +9,7 @@ declare const useMonth: (props: UseMonthProps) => {
         isNow: (date: Date) => boolean;
         isDisabled: (date: Date) => boolean;
         isActive: (date: Date) => boolean;
-        isInRange: (date: Date) => false | "start" | "end" | "start-end" | "in";
+        isInRange: (date: Date) => false | "end" | "start" | "start-end" | "in";
         handleMonthClick: (date: Date) => void;
         getMonthStr: (date: Date) => number;
     };

package/cjs/components/use-datepicker/use-quarter.d.ts

@@ -9,7 +9,7 @@ declare const useQuarter: (props: UseMonthProps) => {
         isNow: (date: Date) => boolean;
         isDisabled: (date: Date) => boolean;
         isActive: (date: Date) => boolean;
-        isInRange: (date: Date) => false | "start" | "end" | "start-end" | "in";
+        isInRange: (date: Date) => false | "end" | "start" | "start-end" | "in";
         handleQuarterClick: (date: Date) => void;
         getQuarterStr: (date: Date) => number;
     };

package/cjs/components/use-datepicker/use-year.d.ts

@@ -11,7 +11,7 @@ declare const useYear: (props: UseYearProps) => {
         isNow: (date: Date) => boolean;
         isDisabled: (date: Date) => boolean;
         isActive: (date: Date) => boolean;
-        isInRange: (date: Date) => false | "start" | "end" | "start-end" | "in";
+        isInRange: (date: Date) => false | "end" | "start" | "start-end" | "in";
         handleYearClick: (date: Date) => void;
         getYearStr: (date: Date) => number;
     };

package/cjs/components/use-input/use-input-format.d.ts

@@ -5,7 +5,7 @@ declare const useInputFormat: (props: InputFormatProps) => {
     onBlur: (e: React.FocusEvent) => void;
     onFocus: (e: React.FocusEvent) => void;
     value: string | undefined;
-    type: "search" | "color" | "button" | "time" | "image" | "text" | "reset" | "submit" | "email" | "url" | "range" | "tel" | (string & {}) | "hidden" | "checkbox" | "date" | "datetime-local" | "file" | "month" | "password" | "radio" | "week" | undefined;
+    type: "search" | "color" | "button" | "time" | "image" | "text" | "reset" | "submit" | "email" | "url" | "range" | "tel" | (string & {}) | "checkbox" | "radio" | "hidden" | "date" | "datetime-local" | "file" | "month" | "password" | "week" | undefined;
 };
 export default useInputFormat;
 //# sourceMappingURL=use-input-format.d.ts.map

package/cjs/components/use-input/use-input-number.d.ts

@@ -7,7 +7,7 @@ declare const useNumberFormat: (props: InputNumberProps) => {
     onBlur: (e: React.FocusEvent<Element, Element>) => void;
     onFocus: (e: React.FocusEvent<Element, Element>) => void;
     value: string | undefined;
-    type: "search" | "color" | "button" | "time" | "image" | "text" | "reset" | "submit" | "email" | "url" | "range" | "tel" | (string & {}) | "hidden" | "checkbox" | "date" | "datetime-local" | "file" | "month" | "password" | "radio" | "week" | undefined;
+    type: "search" | "color" | "button" | "time" | "image" | "text" | "reset" | "submit" | "email" | "url" | "range" | "tel" | (string & {}) | "checkbox" | "radio" | "hidden" | "date" | "datetime-local" | "file" | "month" | "password" | "week" | undefined;
 };
 export default useNumberFormat;
 //# sourceMappingURL=use-input-number.d.ts.map

package/cjs/components/use-popup/use-popup.d.ts

@@ -5,6 +5,7 @@ declare const usePopup: (props: BasePopupProps) => {
     position: PositionType;
     targetRef: React.MutableRefObject<HTMLDivElement | null>;
     popupRef: React.MutableRefObject<HTMLDivElement | null>;
+    arrowRef: React.MutableRefObject<HTMLSpanElement | null>;
     getTargetProps: () => {
         onMouseEnter: (e: {
             target: EventTarget | null;

package/cjs/components/use-popup/use-popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-popup.d.ts","sourceRoot":"","sources":["use-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMhE,QAAA,MAAM,QAAQ,UAAW,cAAc;;;;;;0BAoHK;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;0BAM9B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;qBA5B7B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;;;;;;;;;;;;;;;;;;;;;2BA6ElD,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;6BAGxC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;CAqBpE,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"use-popup.d.ts","sourceRoot":"","sources":["use-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMhE,QAAA,MAAM,QAAQ,UAAW,cAAc;;;;;;;0BA2HK;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;0BAM9B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;qBA5B7B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;;;;;;;;;;;;;;;;;;;;;2BA6ElD,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;6BAGxC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;CAsBpE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/cjs/components/use-popup/use-popup.js

@@ -37,6 +37,7 @@ var usePopup = function usePopup(props) {
     removeChild = _useContext.removeChild;
   var targetRef = (0, _react.useRef)(null);
   var popupRef = (0, _react.useRef)(null);
+  var arrowRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     bindChild(popupRef);
     return function () {
@@ -68,11 +69,12 @@ var usePopup = function usePopup(props) {
     setPositionState = _useState4[1];
   var position = isPositionControl ? props.position : positionState;
   var updatePosition = (0, _usePersistFn.default)(function () {
-    if (isPositionControl) return;
-    if (props.position === 'auto' || !props.position) {
-      var newPosition = (0, _position.getPosition)(targetRef.current, props.priorityDirection, autoMode);
+    // if (isPositionControl) return;
+    // if (props.position === 'auto' || !props.position) {
+    setTimeout(function () {
+      var newPosition = (0, _position.getPosition)(targetRef.current, props.priorityDirection, autoMode, popupRef.current || undefined);
       if (newPosition !== position) setPositionState(newPosition);
-    }
+    }, 10);
   });
   (0, _react.useEffect)(function () {
     if (props.open) {
@@ -201,6 +203,7 @@ var usePopup = function usePopup(props) {
     position: position,
     targetRef: targetRef,
     popupRef: popupRef,
+    arrowRef: arrowRef,
     getTargetProps: getTargetProps,
     openPop: openPop,
     closePop: closePop,

package/cjs/utils/position.d.ts

@@ -1,2 +1,2 @@
-export declare const getPosition: (target: HTMLElement | null, priorityDirection: "vertical" | "horizontal" | "auto" | undefined, mode: 'popover' | 'menu' | 'list') => "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom";
+export declare const getPosition: (target: HTMLElement | null, priorityDirection: "vertical" | "horizontal" | "auto" | undefined, mode: 'popover' | 'menu' | 'list', popup?: HTMLElement) => "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom";
 //# sourceMappingURL=position.d.ts.map

package/cjs/utils/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["position.ts"],"names":[],"mappings":"AAgFA,eAAO,MAAM,WAAW,WACd,WAAW,GAAG,IAAI,2EAEpB,SAAS,GAAG,MAAM,GAAG,MAAM,gKAKlC,CAAC"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["position.ts"],"names":[],"mappings":"AAiGA,eAAO,MAAM,WAAW,WACd,WAAW,GAAG,IAAI,2EAEpB,SAAS,GAAG,MAAM,GAAG,MAAM,UACzB,WAAW,gKAKpB,CAAC"}

package/cjs/utils/position.js

@@ -41,6 +41,7 @@ var getMenuPosition = function getMenuPosition(target) {
 };
 var getPopoverPosition = function getPopoverPosition(target) {
   var priorityDirection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'vertical';
+  var popup = arguments.length > 2 ? arguments[2] : undefined;
   var position = 'bottom-left';
   if (!target) return position;
   var rect = target.getBoundingClientRect();
@@ -62,11 +63,24 @@ var getPopoverPosition = function getPopoverPosition(target) {
       position += '-top';
     }
   } else {
+    var popupRect = popup === null || popup === void 0 ? void 0 : popup.getBoundingClientRect();
     if (verticalPoint > windowHeight / 2) position = 'top';else position = 'bottom';
-    if (horizontalPoint > windowWidth * 0.6) {
-      position += '-right';
-    } else if (horizontalPoint < windowWidth * 0.4) {
-      position += '-left';
+
+    // 如果渲染了弹出内容，则根据弹出内容宽度计算是否自动调整位置
+    if (popupRect) {
+      if ((popupRect === null || popupRect === void 0 ? void 0 : popupRect.width) / 2 > rect.left) {
+        position += '-left';
+      }
+      if ((popupRect === null || popupRect === void 0 ? void 0 : popupRect.width) / 2 > windowWidth - rect.right) {
+        position += '-right';
+      }
+    } else {
+      // 兜底计算
+      if (horizontalPoint > windowWidth * 0.6) {
+        position += '-right';
+      } else if (horizontalPoint < windowWidth * 0.4) {
+        position += '-left';
+      }
     }
   }
   return position;
@@ -74,7 +88,8 @@ var getPopoverPosition = function getPopoverPosition(target) {
 var getPosition = exports.getPosition = function getPosition(target) {
   var priorityDirection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'vertical';
   var mode = arguments.length > 2 ? arguments[2] : undefined;
-  if (mode === 'popover') return getPopoverPosition(target, priorityDirection);
+  var popup = arguments.length > 3 ? arguments[3] : undefined;
+  if (mode === 'popover') return getPopoverPosition(target, priorityDirection, popup);
   if (mode === 'menu') return getMenuPosition(target, priorityDirection);
   return 'bottom-left';
 };

package/esm/common/use-position-style/index.d.ts

@@ -16,6 +16,9 @@ export interface PositionStyleConfig {
     updateKey?: number | string;
     adjust?: boolean;
 }
-export declare const usePositionStyle: (config: PositionStyleConfig) => React.CSSProperties;
+export declare const usePositionStyle: (config: PositionStyleConfig) => {
+    style: React.CSSProperties;
+    arrayStyle: React.CSSProperties;
+};
 export default usePositionStyle;
 //# sourceMappingURL=index.d.ts.map

package/esm/common/use-position-style/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB,wBAsO3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,KAAK,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AACpE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAQD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;;CAmS3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/esm/common/use-position-style/index.js

@@ -9,7 +9,7 @@ import React, { useEffect, useState } from 'react';
 import { getPositionStyle } from "./get-position-style";
 import shallowEqual from "../../utils/shallow-equal";
 import usePersistFn from "../use-persist-fn";
-import { docSize } from "../../utils";
+import { docSize, isChromeLowerThan } from "../../utils";
 var horizontalPosition = ['left-bottom', 'left-top', 'right-bottom', 'right-top', 'left', 'right'];
 var verticalPosition = ['bottom-left', 'bottom-right', 'top-left', 'top-right', 'bottom', 'top'];
 var hideStyle = {
@@ -39,6 +39,10 @@ export var usePositionStyle = function usePositionStyle(config) {
     _useState2 = _slicedToArray(_useState, 2),
     style = _useState2[0],
     setStyle = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    arrayStyle = _useState4[0],
+    setArrayStyle = _useState4[1];
   var _React$useRef = React.useRef({
       element: null,
       containerRect: {
@@ -112,10 +116,12 @@ export var usePositionStyle = function usePositionStyle(config) {
     };
   };
   var getAbsolutePositionStyle = function getAbsolutePositionStyle(rect, position) {
+    var _popupElRef$current;
     var style = {
       position: 'absolute',
       zIndex: zIndex
     };
+    var arrayStyle = {};
     if (fixedWidth) {
       var widthKey = fixedWidth === 'min' ? 'minWidth' : 'width';
       style[widthKey] = rect.width;
@@ -125,6 +131,7 @@ export var usePositionStyle = function usePositionStyle(config) {
     var containerRect = rootContainer.getBoundingClientRect();
     var bodyRect = (document.documentElement || document.body).getBoundingClientRect();
     var containerScrollBarWidth = rootContainer.offsetWidth - rootContainer.clientWidth;
+    var targetRect = (_popupElRef$current = popupElRef.current) === null || _popupElRef$current === void 0 ? void 0 : _popupElRef$current.getBoundingClientRect();
     var containerScroll = {
       left: rootContainer.scrollLeft,
       top: rootContainer.scrollTop
@@ -141,14 +148,25 @@ export var usePositionStyle = function usePositionStyle(config) {
       if (h === 'left') {
         style.left = rect.left - containerRect.left + containerScroll.left;
         style.transform = '';
+        arrayStyle.left = "8px";
         if (adjust) {
           overRight = rect.left + context.popUpWidth - bodyRect.right + containerScrollBarWidth;
+          if (style.left < 0 && targetRect) {
+            style.left = 'auto';
+          }
         }
       } else if (h === 'right') {
         style.right = containerRect.right - rect.right + containerScrollBarWidth - containerScroll.left;
         style.left = 'auto';
         style.transform = '';
-        if (adjust) overLeft = bodyRect.left - (rect.right - context.popUpWidth);
+        arrayStyle.right = "8px";
+        if (adjust) {
+          overLeft = bodyRect.left - (rect.right - context.popUpWidth);
+          if (style.right < 0 && targetRect) {
+            style.left = bodyRect.width - targetRect.width;
+            style.right = 'auto';
+          }
+        }
       } else {
         // 居中对齐
         style.left = rect.left + rect.width / 2 - containerRect.left + containerScroll.left;
@@ -157,6 +175,9 @@ export var usePositionStyle = function usePositionStyle(config) {
           overRight = rect.left + rect.width / 2 + context.popUpWidth / 2 - bodyRect.width + containerScrollBarWidth;
           overLeft = bodyRect.left - (rect.left + rect.width / 2 - context.popUpWidth / 2);
         }
+        if (targetRect) {
+          arrayStyle.left = "".concat(targetRect.width / 2 - 5.9, "px");
+        }
       }
       if (adjust) {
         // 调节左右溢出
@@ -165,16 +186,26 @@ export var usePositionStyle = function usePositionStyle(config) {
           style.left -= overRight;
           // 扣除触发器距离页面右侧的距离，以保证从右侧弹出的窗口最右边对齐触发器最右边
           style.left -= toRightDistance;
+          if (targetRect) {
+            arrayStyle.left = "".concat((targetRect === null || targetRect === void 0 ? void 0 : targetRect.width) - context.parentRect.width / 2 - 5.9, "px");
+          }
         }
         if (overLeft > 0) {
           style.left += overLeft;
+          arrayStyle.left = "".concat(rect.width / 2 - 5.9, "px");
         }
       }
       if (v === 'bottom') {
         style.top = rect.bottom - containerRect.top + containerScroll.top + popupGap;
+        if (targetRect) {
+          arrayStyle.top = "".concat(0, "px");
+        }
       } else {
         style.top = rect.top - containerRect.top + containerScroll.top - popupGap;
         style.transform += 'translateY(-100%)';
+        if (targetRect) {
+          arrayStyle.top = "".concat(targetRect.height - 5.9 - 4, "px");
+        }
       }
     } else if (horizontalPosition.includes(targetPosition)) {
       var _targetPosition$split3 = targetPosition.split('-'),
@@ -184,45 +215,88 @@ export var usePositionStyle = function usePositionStyle(config) {
       if (_v === 'top') {
         style.top = rect.top - containerRect.top + containerScroll.top;
         style.transform = '';
+        arrayStyle.top = "8px";
       } else if (_v === 'bottom') {
         style.top = rect.bottom - containerRect.top + containerScroll.top;
+        arrayStyle.bottom = "8px";
         style.transform = 'translateY(-100%)';
       } else {
         // 居中对齐
         style.top = rect.top - containerRect.top + containerScroll.top + rect.height / 2;
+        if (targetRect) {
+          arrayStyle.top = "".concat(targetRect.height / 2 - 5.9 / 2, "px");
+        }
         style.transform = 'translateY(-50%)';
       }
       if (_h === 'right') {
         style.left = rect.right - containerRect.left + containerScroll.left + popupGap;
       } else {
         style.left = rect.left - containerRect.left + containerScroll.left - popupGap;
+        arrayStyle.right = "0px";
         style.transform += ' translateX(-100%)';
       }
     } else if (position === 'cover') {
       style.top = rect.top - containerRect.top + containerScroll.top;
       style.left = rect.left - containerRect.left + containerScroll.left;
     }
-    return style;
+    return {
+      style: style,
+      arrayStyle: arrayStyle
+    };
   };
   var getAbsoluteStyle = function getAbsoluteStyle(position) {
-    if (!parentElRef.current) return hideStyle;
+    if (!parentElRef.current) return {
+      style: hideStyle
+    };
     var rect = context.parentRect;
     if (scrollElRef !== null && scrollElRef !== void 0 && scrollElRef.current) {
       var _scrollElRef$current;
       var visibleRect = ((_scrollElRef$current = scrollElRef.current) === null || _scrollElRef$current === void 0 ? void 0 : _scrollElRef$current.getBoundingClientRect()) || {};
       if (rect.bottom < visibleRect.top || rect.top > visibleRect.bottom || rect.right < visibleRect.left || rect.left > visibleRect.right) {
-        return hideStyle;
+        return {
+          style: hideStyle
+        };
+      }
+    }
+    var _getAbsolutePositionS = getAbsolutePositionStyle(rect, position),
+      style = _getAbsolutePositionS.style,
+      arrayStyle = _getAbsolutePositionS.arrayStyle;
+
+    // TODO: 如果是版本大于chrome128，需要根据currentCSSZoom处理chrome的bug
+    if (!isChromeLowerThan(128)) {
+      // @ts-ignore currentCSSZoom
+      var currentCSSZoom = document.body.currentCSSZoom;
+      if (currentCSSZoom === 1 || !currentCSSZoom) return {
+        style: style,
+        arrayStyle: arrayStyle
+      };
+      if (style.left && typeof style.left === 'number') {
+        style.left = style.left * (1 / currentCSSZoom);
+      }
+      if (style.top && typeof style.top === 'number') {
+        style.top = style.top * (1 / currentCSSZoom);
+      }
+      if (style.right && typeof style.right === 'number') {
+        style.right = style.right * (1 / currentCSSZoom);
+      }
+      if (style.bottom && typeof style.bottom === 'number') {
+        style.bottom = style.bottom * (1 / currentCSSZoom);
       }
     }
-    var style = getAbsolutePositionStyle(rect, position);
-    return style;
+    return {
+      style: style,
+      arrayStyle: arrayStyle
+    };
   };
   var getStyle = function getStyle() {
     var newStyle = {};
+    var newArrayStyle = {};
     var _ref2 = config || {},
       position = _ref2.position,
       absolute = _ref2.absolute;
-    if (!position || !show || !parentElRef.current) return style;
+    if (!position || !show || !parentElRef.current) return {
+      newStyle: style
+    };
     context.parentRect = parentElRef.current.getBoundingClientRect();
     if (adjust) {
       var popupInfo = getPopUpInfo(context.parentRect);
@@ -237,21 +311,34 @@ export var usePositionStyle = function usePositionStyle(config) {
         fixedWidth: fixedWidth
       });
     } else {
-      newStyle = getAbsoluteStyle(realPosition);
+      var _ref3 = getAbsoluteStyle(realPosition),
+        nextStyle = _ref3.style,
+        nextArrayStyle = _ref3.arrayStyle;
+      newStyle = nextStyle;
+      newArrayStyle = nextArrayStyle;
     }
     // for animation
     if (realPosition.indexOf('top') === 0) {
       newStyle.transformOrigin = 'center bottom';
     }
-    return newStyle;
+    return {
+      newStyle: newStyle,
+      newArrayStyle: newArrayStyle
+    };
   };
   var updateStyle = usePersistFn(function () {
-    var newStyle = getStyle();
+    var _getStyle = getStyle(),
+      newStyle = _getStyle.newStyle,
+      newArrayStyle = _getStyle.newArrayStyle;
     if (newStyle && !shallowEqual(style, newStyle)) {
       setStyle(newStyle);
+      setArrayStyle(newArrayStyle || {});
     }
   });
   useEffect(updateStyle, [show, position, absolute, updateKey, fixedWidth]);
-  return style;
+  return {
+    style: style,
+    arrayStyle: arrayStyle
+  };
 };
 export default usePositionStyle;

package/esm/components/use-datepicker/use-date.d.ts

@@ -12,7 +12,7 @@ declare const useDate: (props: UseDateProps) => {
         isToday: (date: Date) => boolean;
         isDisabled: (date: Date) => boolean;
         isActive: (date: Date) => boolean;
-        isInRange: (date: Date) => false | "start" | "end" | "start-end" | "in";
+        isInRange: (date: Date) => false | "end" | "start" | "start-end" | "in";
         isCurrentMonth: (date: Date) => boolean;
         handleDayClick: (date: Date) => void;
         getDayStr: (date: Date) => number;

package/esm/components/use-datepicker/use-month.d.ts

@@ -9,7 +9,7 @@ declare const useMonth: (props: UseMonthProps) => {
         isNow: (date: Date) => boolean;
         isDisabled: (date: Date) => boolean;
         isActive: (date: Date) => boolean;
-        isInRange: (date: Date) => false | "start" | "end" | "start-end" | "in";
+        isInRange: (date: Date) => false | "end" | "start" | "start-end" | "in";
         handleMonthClick: (date: Date) => void;
         getMonthStr: (date: Date) => number;
     };

package/esm/components/use-datepicker/use-quarter.d.ts

@@ -9,7 +9,7 @@ declare const useQuarter: (props: UseMonthProps) => {
         isNow: (date: Date) => boolean;
         isDisabled: (date: Date) => boolean;
         isActive: (date: Date) => boolean;
-        isInRange: (date: Date) => false | "start" | "end" | "start-end" | "in";
+        isInRange: (date: Date) => false | "end" | "start" | "start-end" | "in";
         handleQuarterClick: (date: Date) => void;
         getQuarterStr: (date: Date) => number;
     };

package/esm/components/use-datepicker/use-year.d.ts

@@ -11,7 +11,7 @@ declare const useYear: (props: UseYearProps) => {
         isNow: (date: Date) => boolean;
         isDisabled: (date: Date) => boolean;
         isActive: (date: Date) => boolean;
-        isInRange: (date: Date) => false | "start" | "end" | "start-end" | "in";
+        isInRange: (date: Date) => false | "end" | "start" | "start-end" | "in";
         handleYearClick: (date: Date) => void;
         getYearStr: (date: Date) => number;
     };

package/esm/components/use-input/use-input-format.d.ts

@@ -5,7 +5,7 @@ declare const useInputFormat: (props: InputFormatProps) => {
     onBlur: (e: React.FocusEvent) => void;
     onFocus: (e: React.FocusEvent) => void;
     value: string | undefined;
-    type: "search" | "color" | "button" | "time" | "image" | "text" | "reset" | "submit" | "email" | "url" | "range" | "tel" | (string & {}) | "hidden" | "checkbox" | "date" | "datetime-local" | "file" | "month" | "password" | "radio" | "week" | undefined;
+    type: "search" | "color" | "button" | "time" | "image" | "text" | "reset" | "submit" | "email" | "url" | "range" | "tel" | (string & {}) | "checkbox" | "radio" | "hidden" | "date" | "datetime-local" | "file" | "month" | "password" | "week" | undefined;
 };
 export default useInputFormat;
 //# sourceMappingURL=use-input-format.d.ts.map

package/esm/components/use-input/use-input-number.d.ts

@@ -7,7 +7,7 @@ declare const useNumberFormat: (props: InputNumberProps) => {
     onBlur: (e: React.FocusEvent<Element, Element>) => void;
     onFocus: (e: React.FocusEvent<Element, Element>) => void;
     value: string | undefined;
-    type: "search" | "color" | "button" | "time" | "image" | "text" | "reset" | "submit" | "email" | "url" | "range" | "tel" | (string & {}) | "hidden" | "checkbox" | "date" | "datetime-local" | "file" | "month" | "password" | "radio" | "week" | undefined;
+    type: "search" | "color" | "button" | "time" | "image" | "text" | "reset" | "submit" | "email" | "url" | "range" | "tel" | (string & {}) | "checkbox" | "radio" | "hidden" | "date" | "datetime-local" | "file" | "month" | "password" | "week" | undefined;
 };
 export default useNumberFormat;
 //# sourceMappingURL=use-input-number.d.ts.map

package/esm/components/use-popup/use-popup.d.ts

@@ -5,6 +5,7 @@ declare const usePopup: (props: BasePopupProps) => {
     position: PositionType;
     targetRef: React.MutableRefObject<HTMLDivElement | null>;
     popupRef: React.MutableRefObject<HTMLDivElement | null>;
+    arrowRef: React.MutableRefObject<HTMLSpanElement | null>;
     getTargetProps: () => {
         onMouseEnter: (e: {
             target: EventTarget | null;

package/esm/components/use-popup/use-popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-popup.d.ts","sourceRoot":"","sources":["use-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMhE,QAAA,MAAM,QAAQ,UAAW,cAAc;;;;;;0BAoHK;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;0BAM9B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;qBA5B7B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;;;;;;;;;;;;;;;;;;;;;2BA6ElD,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;6BAGxC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;CAqBpE,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"use-popup.d.ts","sourceRoot":"","sources":["use-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMhE,QAAA,MAAM,QAAQ,UAAW,cAAc;;;;;;;0BA2HK;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;0BAM9B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;qBA5B7B;YAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;SAAE;;;;;;;;;;;;;;;;;;;;;;;;;2BA6ElD,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;6BAGxC,MAAM,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC;;CAsBpE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/components/use-popup/use-popup.js

@@ -30,6 +30,7 @@ var usePopup = function usePopup(props) {
     removeChild = _useContext.removeChild;
   var targetRef = useRef(null);
   var popupRef = useRef(null);
+  var arrowRef = useRef(null);
   useEffect(function () {
     bindChild(popupRef);
     return function () {
@@ -61,11 +62,12 @@ var usePopup = function usePopup(props) {
     setPositionState = _useState4[1];
   var position = isPositionControl ? props.position : positionState;
   var updatePosition = usePersistFn(function () {
-    if (isPositionControl) return;
-    if (props.position === 'auto' || !props.position) {
-      var newPosition = getPosition(targetRef.current, props.priorityDirection, autoMode);
+    // if (isPositionControl) return;
+    // if (props.position === 'auto' || !props.position) {
+    setTimeout(function () {
+      var newPosition = getPosition(targetRef.current, props.priorityDirection, autoMode, popupRef.current || undefined);
       if (newPosition !== position) setPositionState(newPosition);
-    }
+    }, 10);
   });
   useEffect(function () {
     if (props.open) {
@@ -194,6 +196,7 @@ var usePopup = function usePopup(props) {
     position: position,
     targetRef: targetRef,
     popupRef: popupRef,
+    arrowRef: arrowRef,
     getTargetProps: getTargetProps,
     openPop: openPop,
     closePop: closePop,

package/esm/utils/position.d.ts

@@ -1,2 +1,2 @@
-export declare const getPosition: (target: HTMLElement | null, priorityDirection: "vertical" | "horizontal" | "auto" | undefined, mode: 'popover' | 'menu' | 'list') => "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom";
+export declare const getPosition: (target: HTMLElement | null, priorityDirection: "vertical" | "horizontal" | "auto" | undefined, mode: 'popover' | 'menu' | 'list', popup?: HTMLElement) => "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom" | "right-top" | "right-bottom";
 //# sourceMappingURL=position.d.ts.map

package/esm/utils/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["position.ts"],"names":[],"mappings":"AAgFA,eAAO,MAAM,WAAW,WACd,WAAW,GAAG,IAAI,2EAEpB,SAAS,GAAG,MAAM,GAAG,MAAM,gKAKlC,CAAC"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["position.ts"],"names":[],"mappings":"AAiGA,eAAO,MAAM,WAAW,WACd,WAAW,GAAG,IAAI,2EAEpB,SAAS,GAAG,MAAM,GAAG,MAAM,UACzB,WAAW,gKAKpB,CAAC"}

package/esm/utils/position.js

@@ -35,6 +35,7 @@ var getMenuPosition = function getMenuPosition(target) {
 };
 var getPopoverPosition = function getPopoverPosition(target) {
   var priorityDirection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'vertical';
+  var popup = arguments.length > 2 ? arguments[2] : undefined;
   var position = 'bottom-left';
   if (!target) return position;
   var rect = target.getBoundingClientRect();
@@ -56,11 +57,24 @@ var getPopoverPosition = function getPopoverPosition(target) {
       position += '-top';
     }
   } else {
+    var popupRect = popup === null || popup === void 0 ? void 0 : popup.getBoundingClientRect();
     if (verticalPoint > windowHeight / 2) position = 'top';else position = 'bottom';
-    if (horizontalPoint > windowWidth * 0.6) {
-      position += '-right';
-    } else if (horizontalPoint < windowWidth * 0.4) {
-      position += '-left';
+
+    // 如果渲染了弹出内容，则根据弹出内容宽度计算是否自动调整位置
+    if (popupRect) {
+      if ((popupRect === null || popupRect === void 0 ? void 0 : popupRect.width) / 2 > rect.left) {
+        position += '-left';
+      }
+      if ((popupRect === null || popupRect === void 0 ? void 0 : popupRect.width) / 2 > windowWidth - rect.right) {
+        position += '-right';
+      }
+    } else {
+      // 兜底计算
+      if (horizontalPoint > windowWidth * 0.6) {
+        position += '-right';
+      } else if (horizontalPoint < windowWidth * 0.4) {
+        position += '-left';
+      }
     }
   }
   return position;
@@ -68,7 +82,8 @@ var getPopoverPosition = function getPopoverPosition(target) {
 export var getPosition = function getPosition(target) {
   var priorityDirection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'vertical';
   var mode = arguments.length > 2 ? arguments[2] : undefined;
-  if (mode === 'popover') return getPopoverPosition(target, priorityDirection);
+  var popup = arguments.length > 3 ? arguments[3] : undefined;
+  if (mode === 'popover') return getPopoverPosition(target, priorityDirection, popup);
   if (mode === 'menu') return getMenuPosition(target, priorityDirection);
   return 'bottom-left';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/hooks",
-  "version": "3.3.6-beta.1",
+  "version": "3.3.6-beta.3",
   "description": "",
   "keywords": [],
   "license": "MIT",