shineout 3.3.6-beta.2 → 3.3.6-beta.3

package/cjs/index.js

@@ -476,5 +476,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.3.6-beta.2'
+  version: '3.3.6-beta.3'
 };

package/dist/shineout.js

@@ -11968,7 +11968,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.3.6-beta.2');
+/* harmony default export */ var version = ('3.3.6-beta.3');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -26045,7 +26045,8 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
       backgroundColor: src.tooltipDangerBackgroundColor,
       color: src.tooltipDangerColor
     },
-    '&::before': {
+    // '&::before': {
+    '& $arrow': {
       'z-index': 1,
       position: 'absolute',
       content: '" "',
@@ -26060,19 +26061,13 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
     },
     '&[data-soui-position^="bottom"]': {
       marginTop: arrowGap - 2,
-      '&::before': {
-        top: '0',
-        left: '0',
-        right: '0',
-        margin: 'auto'
-      },
-      '&[dir=ltr]::before': {
+      '&[dir=ltr] $arrow': {
         transform: 'translate(0, -50%) rotate(-45deg)'
       },
-      '&[dir=rtl]::before': {
+      '&[dir=rtl] $arrow': {
         transform: 'translate(0, -50%) rotate(45deg)'
       },
-      '&::after': {
+      '& $arrow::after': {
         top: arrowGap * -1,
         left: '0',
         right: '0',
@@ -26084,105 +26079,105 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
     },
     '&[data-soui-position^="top"]': {
       marginTop: (arrowGap - 2) * -1,
-      '&::before': {
-        bottom: '0',
-        transform: 'translate(0, 50%) rotate(135deg)',
-        left: '0',
-        right: '0',
-        margin: 'auto'
-      },
-      '&[dir=ltr]::before': {
+      '&[dir=ltr] $arrow': {
         transform: 'translate(0, 50%) rotate(135deg)'
       },
-      '&[dir=rtl]::before': {
+      '&[dir=rtl] $arrow': {
         transform: 'translate(0, 50%) rotate(-135deg)'
-      },
-      '&::after': {
-        bottom: arrowGap * -1,
-        left: '0',
-        right: '0',
-        content: '" "',
-        display: 'block',
-        height: arrowGap,
-        position: 'absolute'
       }
+      // '&::before': {
+      //   bottom: '0',
+      //   transform: 'translate(0, 50%) rotate(135deg)',
+      //   left: '0',
+      //   right: '0',
+      //   margin: 'auto',
+      // },
+      // '&[dir=ltr]::before': {
+      //   transform: 'translate(0, 50%) rotate(135deg)',
+      // },
+      // '&[dir=rtl]::before': {
+      //   transform: 'translate(0, 50%) rotate(-135deg)',
+      // },
+      // '&::after': {
+      //   bottom: arrowGap * -1,
+      //   left: '0',
+      //   right: '0',
+      //   content: '" "',
+      //   display: 'block',
+      //   height: arrowGap,
+      //   position: 'absolute',
+      // },
     },
     '&[data-soui-position^="left"]': {
       marginLeft: (arrowGap - 2) * -1,
-      '&[dir=ltr]': {
-        marginLeft: (arrowGap - 2) * -1
-      },
-      '&[dir=rtl]': {
-        marginRight: (arrowGap - 2) * -1
-      },
-      '&::before': {
-        right: 0,
-        top: '0',
-        bottom: '0',
-        margin: 'auto'
-      },
-      '&[dir=ltr]::before': {
+      '&[dir=ltr] $arrow': {
         transform: 'translate(50%, 0) rotate(45deg)'
       },
-      '&[dir=rtl]::before': {
+      '&[dir=rtl] $arrow': {
         transform: 'translate(50%, 0) rotate(135deg)'
-      },
-      '&::after': {
-        left: arrowGap * -1,
-        top: '0',
-        bottom: '0',
-        content: '" "',
-        display: 'block',
-        width: arrowGap,
-        position: 'absolute'
       }
+
+      // '&[dir=ltr]': { marginLeft: (arrowGap - 2) * -1 },
+      // '&[dir=rtl]': { marginRight: (arrowGap - 2) * -1 },
+      // '&::before': {
+      //   right: 0,
+      //   top: '0',
+      //   bottom: '0',
+      //   margin: 'auto',
+      // },
+      // '&[dir=ltr]::before': {
+      //   transform: 'translate(50%, 0) rotate(45deg)',
+      // },
+      // '&[dir=rtl]::before': {
+      //   transform: 'translate(50%, 0) rotate(135deg)',
+      // },
+      // '&::after': {
+      //   left: arrowGap * -1,
+      //   top: '0',
+      //   bottom: '0',
+      //   content: '" "',
+      //   display: 'block',
+      //   width: arrowGap,
+      //   position: 'absolute',
+      // },
     },
     '&[data-soui-position^="right"]': {
       marginLeft: arrowGap - 2,
-      '&[dir=ltr]': {
-        marginLeft: arrowGap - 2
-      },
-      '&[dir=rtl]': {
-        marginRight: arrowGap - 2
-      },
-      '&::before': {
-        left: '0',
-        top: '0',
-        bottom: '0',
-        margin: 'auto'
-      },
-      '&[dir=ltr]::before': {
+      '&[dir=ltr] $arrow': {
         transform: 'translate(-50%, 0) rotate(-135deg)'
       },
-      '&[dir=rtl]::before': {
+      '&[dir=rtl] $arrow': {
         transform: 'translate(-50%, 0) rotate(-45deg)'
-      },
-      '&::after': {
-        left: arrowGap * -1,
-        top: '0',
-        bottom: '0',
-        content: '" "',
-        display: 'block',
-        width: arrowGap,
-        position: 'absolute'
       }
-    },
-    '&&[data-soui-position$="-left"]::before': {
-      left: tooltip_arrowMargin,
-      right: 'auto'
-    },
-    '&&[data-soui-position$="-right"]::before': {
-      right: tooltip_arrowMargin,
-      left: 'auto'
-    },
-    '&&[data-soui-position$="-top"]::before': {
-      top: tooltip_arrowMargin,
-      bottom: 'auto'
-    },
-    '&&[data-soui-position$="-bottom"]::before': {
-      bottom: tooltip_arrowMargin,
-      top: 'auto'
+
+      // '&[dir=ltr]': { marginLeft: arrowGap - 2 },
+      // '&[dir=rtl]': { marginRight: arrowGap - 2 },
+      // '&::before': {
+      //   left: '0',
+      //   top: '0',
+      //   bottom: '0',
+      //   margin: 'auto',
+      // },
+      // '&[dir=ltr]::before': {
+      //   transform: 'translate(-50%, 0) rotate(-135deg)',
+      // },
+      // '&[dir=rtl]::before': {
+      //   transform: 'translate(-50%, 0) rotate(-45deg)',
+      // },
+      // '&::after': {
+      //   left: arrowGap * -1,
+      //   top: '0',
+      //   bottom: '0',
+      //   content: '" "',
+      //   display: 'block',
+      //   width: arrowGap,
+      //   position: 'absolute',
+      // },
     }
+    // '&&[data-soui-position$="-left"]::before': { left: arrowMargin, right: 'auto' },
+    // '&&[data-soui-position$="-right"]::before': { right: arrowMargin, left: 'auto' },
+    // '&&[data-soui-position$="-top"]::before': { top: arrowMargin, bottom: 'auto' },
+    // '&&[data-soui-position$="-bottom"]::before': { bottom: arrowMargin, top: 'auto' },
   },
   wrapperOpen: {
     display: 'block',
@@ -26202,6 +26197,12 @@ var tooltipStyle = objectSpread2_default()(objectSpread2_default()({}, tooltip_a
   target: {
     display: 'inline-block'
   },
+  arrow: {
+    // before
+    '&::before': {
+      content: "''"
+    }
+  },
   content: {
     padding: "".concat(src.tooltipPaddingY, " ").concat(src.tooltipPaddingX),
     fontSize: src.tooltipFontSize
@@ -28308,6 +28309,10 @@ var usePositionStyle = function usePositionStyle(config) {
     _useState2 = slicedToArray_default()(_useState, 2),
     style = _useState2[0],
     setStyle = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
+    _useState4 = slicedToArray_default()(_useState3, 2),
+    arrayStyle = _useState4[0],
+    setArrayStyle = _useState4[1];
   var _React$useRef = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useRef({
       element: null,
       containerRect: {
@@ -28381,10 +28386,12 @@ 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;
@@ -28394,6 +28401,7 @@ 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
@@ -28410,14 +28418,25 @@ 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;
@@ -28426,6 +28445,9 @@ 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) {
         // 调节左右溢出
@@ -28434,16 +28456,26 @@ 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('-'),
@@ -28453,46 +28485,61 @@ 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;
-    console.log('======================');
-    console.log('rect: >>', rect);
-    console.log('======================');
     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);
+    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;
+      if (currentCSSZoom === 1 || !currentCSSZoom) return {
+        style: style,
+        arrayStyle: arrayStyle
+      };
       if (style.left && typeof style.left === 'number') {
         style.left = style.left * (1 / currentCSSZoom);
       }
@@ -28506,14 +28553,20 @@ var usePositionStyle = function usePositionStyle(config) {
         style.bottom = style.bottom * (1 / currentCSSZoom);
       }
     }
-    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);
@@ -28528,22 +28581,35 @@ 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 = use_persist_fn(function () {
-    var newStyle = getStyle();
+    var _getStyle = getStyle(),
+      newStyle = _getStyle.newStyle,
+      newArrayStyle = _getStyle.newArrayStyle;
     if (newStyle && !shallow_equal(style, newStyle)) {
       setStyle(newStyle);
+      setArrayStyle(newArrayStyle || {});
     }
   });
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(updateStyle, [show, position, absolute, updateKey, fixedWidth]);
-  return style;
+  return {
+    style: style,
+    arrayStyle: arrayStyle
+  };
 };
 /* harmony default export */ var use_position_style = ((/* unused pure expression or super */ null && (usePositionStyle)));
 // EXTERNAL MODULE: external {"root":"ReactDOM","commonjs2":"react-dom","commonjs":"react-dom","amd":"react-dom"}
@@ -29188,6 +29254,7 @@ var AbsoluteList = function AbsoluteList(props) {
     _props$zIndex = props.zIndex,
     zIndex = _props$zIndex === void 0 ? 1051 : _props$zIndex,
     focus = props.focus,
+    arrowRef = props.arrowRef,
     popupElRef = props.popupElRef,
     updateKey = props.updateKey,
     popupGap = props.popupGap,
@@ -29206,23 +29273,33 @@ var AbsoluteList = function AbsoluteList(props) {
       rendered: false
     }),
     context = _useRef.current;
-  var style = usePositionStyle({
-    getContainer: getRoot,
-    position: position,
-    absolute: !!absolute,
-    parentElRef: parentElRef,
-    show: focus,
-    fixedWidth: fixedWidth,
-    zIndex: zIndex,
-    scrollElRef: scrollElRef,
-    popupElRef: popupElRef,
-    updateKey: updateKey,
-    popupGap: popupGap,
-    adjust: adjust
-  });
+  var _usePositionStyle = usePositionStyle({
+      getContainer: getRoot,
+      position: position,
+      absolute: !!absolute,
+      parentElRef: parentElRef,
+      show: focus,
+      fixedWidth: fixedWidth,
+      zIndex: zIndex,
+      scrollElRef: scrollElRef,
+      popupElRef: popupElRef,
+      updateKey: updateKey,
+      popupGap: popupGap,
+      adjust: adjust
+    }),
+    style = _usePositionStyle.style,
+    arrayStyle = _usePositionStyle.arrayStyle;
   var childStyle = children.props.style;
   var newStyle = objectSpread2_default()(objectSpread2_default()({}, style), childStyle);
   if ( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().isValidElement(children) === false) return null;
+  if (arrowRef && arrayStyle && Object.keys(arrayStyle).length > 0) {
+    Object.keys(arrayStyle).forEach(function (key) {
+      if (arrowRef.current) {
+        // @ts-ignore
+        arrowRef.current.style[key] = arrayStyle[key];
+      }
+    });
+  }
   var styledChild = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(children, {
     style: newStyle
   });
@@ -29336,6 +29413,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();
@@ -29357,11 +29435,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;
@@ -29369,7 +29460,8 @@ var getPopoverPosition = function getPopoverPosition(target) {
 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';
 };
@@ -29411,6 +29503,7 @@ var usePopup = function usePopup(props) {
     removeChild = _useContext.removeChild;
   var targetRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var popupRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var arrowRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     bindChild(popupRef);
     return function () {
@@ -29442,11 +29535,12 @@ var usePopup = function usePopup(props) {
     setPositionState = _useState4[1];
   var position = isPositionControl ? props.position : positionState;
   var updatePosition = use_persist_fn(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);
   });
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (props.open) {
@@ -29575,6 +29669,7 @@ var usePopup = function usePopup(props) {
     position: position,
     targetRef: targetRef,
     popupRef: popupRef,
+    arrowRef: arrowRef,
     getTargetProps: getTargetProps,
     openPop: openPop,
     closePop: closePop,
@@ -58615,7 +58710,8 @@ var Tooltip = function Tooltip(props) {
     _props$type = props.type,
     type = _props$type === void 0 ? 'default' : _props$type,
     _props$position = props.position,
-    popsitionProps = _props$position === void 0 ? 'bottom' : _props$position;
+    popsitionProps = _props$position === void 0 ? 'auto' : _props$position;
+  var arrowStyleRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({});
   var tooltipClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$tooltip = jssStyle.tooltip) === null || _jssStyle$tooltip === void 0 ? void 0 : _jssStyle$tooltip.call(jssStyle);
   var config = useConfig();
   var childrenProps = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.isValidElement)(children) ? children === null || children === void 0 ? void 0 : children.props : {};
@@ -58632,7 +58728,8 @@ var Tooltip = function Tooltip(props) {
     position = _usePopup.position,
     getTargetProps = _usePopup.getTargetProps,
     targetRef = _usePopup.targetRef,
-    popupRef = _usePopup.popupRef;
+    popupRef = _usePopup.popupRef,
+    arrowRef = _usePopup.arrowRef;
   if (! /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_amd_react_.isValidElement)(children)) {
     console.error(new Error('Tooltip children expect a single ReactElement.'));
     return null;
@@ -58663,12 +58760,16 @@ var Tooltip = function Tooltip(props) {
       focus: open,
       parentElRef: targetRef,
       popupElRef: popupRef,
+      arrowRef: arrowRef,
       absolute: true,
+      adjust: popsitionProps === 'auto',
       position: position,
       fixedWidth: false,
-      popupGap: 0,
+      popupGap: 0
+      // arrowStyleRef={arrowStyleRef}
+      ,
       zIndex: zIndex,
-      children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({
+      children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", objectSpread2_default()(objectSpread2_default()({
         className: classnames_default()(className, tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.wrapper, open && (tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.wrapperOpen))
       }, getDataAttribute({
         type: type,
@@ -58677,11 +58778,17 @@ var Tooltip = function Tooltip(props) {
         ref: popupRef,
         onMouseLeave: events.onMouseLeave,
         dir: config.direction,
-        children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
+        children: [/*#__PURE__*/(0,jsx_runtime.jsx)("span", objectSpread2_default()({
+          ref: arrowRef,
+          style: arrowStyleRef.current,
+          className: tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.arrow
+        }, getDataAttribute({
+          role: 'arrow'
+        }))), /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
           style: style,
           className: classnames_default()(tooltipClasses === null || tooltipClasses === void 0 ? void 0 : tooltipClasses.content),
           children: tip
-        })
+        })]
       }))
     })]
   });
@@ -63773,7 +63880,7 @@ var upload_interface = __webpack_require__(8821);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.3.6-beta.2'
+  version: '3.3.6-beta.3'
 });
 }();
 /******/ 	return __webpack_exports__;