rsuite 5.76.2 → 6.0.0-canary-20250103

package/cjs/internals/Overlay/Position.js

@@ -5,7 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _getContainer = _interopRequireDefault(require("dom-lib/getContainer"));
 var _ownerDocument = _interopRequireDefault(require("dom-lib/ownerDocument"));
@@ -18,39 +17,34 @@ var _isElement = _interopRequireDefault(require("../../DOMHelper/isElement"));
 var _positionUtils = _interopRequireDefault(require("./positionUtils"));
 var _utils = require("../utils");
 var _hooks = require("../hooks");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var usePosition = function usePosition(props, ref) {
-  var _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'right' : _props$placement,
-    _props$preventOverflo = props.preventOverflow,
-    preventOverflow = _props$preventOverflo === void 0 ? false : _props$preventOverflo,
-    _props$containerPaddi = props.containerPadding,
-    containerPadding = _props$containerPaddi === void 0 ? 0 : _props$containerPaddi,
-    container = props.container,
-    triggerTarget = props.triggerTarget,
-    followCursor = props.followCursor,
-    cursorPosition = props.cursorPosition;
-  var containerRef = (0, _react.useRef)(null);
-  var lastTargetRef = (0, _react.useRef)(null);
-  var overlayResizeObserver = (0, _react.useRef)();
-  var defaultPosition = {
+const usePosition = (props, ref) => {
+  const {
+    placement = 'right',
+    preventOverflow = false,
+    containerPadding = 0,
+    container,
+    triggerTarget,
+    followCursor,
+    cursorPosition
+  } = props;
+  const containerRef = (0, _react.useRef)(null);
+  const lastTargetRef = (0, _react.useRef)(null);
+  const overlayResizeObserver = (0, _react.useRef)();
+  const defaultPosition = {
     positionLeft: 0,
     positionTop: 0,
     arrowOffsetLeft: undefined,
     arrowOffsetTop: undefined
   };
-  var _useState = (0, _react.useState)(defaultPosition),
-    position = _useState[0],
-    setPosition = _useState[1];
-  var utils = (0, _react.useMemo)(function () {
-    return (0, _positionUtils.default)({
-      placement: placement,
-      preventOverflow: preventOverflow,
-      padding: containerPadding
-    });
-  }, [placement, preventOverflow, containerPadding]);
-  var updatePosition = (0, _react.useCallback)(
+  const [position, setPosition] = (0, _react.useState)(defaultPosition);
+  const utils = (0, _react.useMemo)(() => (0, _positionUtils.default)({
+    placement,
+    preventOverflow,
+    padding: containerPadding
+  }), [placement, preventOverflow, containerPadding]);
+  const updatePosition = (0, _react.useCallback)(
   /**
    * @param placementChanged  Whether the placement has changed
    * @param forceUpdateDOM Whether to update the DOM directly
@@ -63,7 +57,7 @@ var usePosition = function usePosition(props, ref) {
     if (!(triggerTarget !== null && triggerTarget !== void 0 && triggerTarget.current)) {
       return;
     }
-    var targetElement = (0, _utils.getDOMNode)(triggerTarget);
+    const targetElement = (0, _utils.getDOMNode)(triggerTarget);
     if (!(0, _isElement.default)(targetElement)) {
       throw new Error('`target` should return an HTMLElement');
     }
@@ -72,19 +66,19 @@ var usePosition = function usePosition(props, ref) {
     if (targetElement === lastTargetRef.current && !placementChanged) {
       return;
     }
-    var overlay = (0, _utils.getDOMNode)(ref.current);
-    var containerElement = (0, _getContainer.default)(typeof container === 'function' ? container() : container !== null && container !== void 0 ? container : null, (0, _ownerDocument.default)(ref.current).body);
-    var posi = utils.calcOverlayPosition(overlay, targetElement, containerElement, followCursor ? cursorPosition : undefined);
+    const overlay = (0, _utils.getDOMNode)(ref.current);
+    const containerElement = (0, _getContainer.default)(typeof container === 'function' ? container() : container !== null && container !== void 0 ? container : null, (0, _ownerDocument.default)(ref.current).body);
+    const posi = utils.calcOverlayPosition(overlay, targetElement, containerElement, followCursor ? cursorPosition : undefined);
     if (forceUpdateDOM && overlay) {
       var _overlay$className;
-      var preClassName = overlay === null || overlay === void 0 || (_overlay$className = overlay.className) === null || _overlay$className === void 0 || (_overlay$className = _overlay$className.match(/(placement-\S+)/)) === null || _overlay$className === void 0 ? void 0 : _overlay$className[0];
+      const preClassName = overlay === null || overlay === void 0 || (_overlay$className = overlay.className) === null || _overlay$className === void 0 || (_overlay$className = _overlay$className.match(/(placement-\S+)/)) === null || _overlay$className === void 0 ? void 0 : _overlay$className[0];
       (0, _removeClass.default)(overlay, preClassName);
       if (posi.positionClassName) {
         (0, _addClass.default)(overlay, posi.positionClassName);
       }
       (0, _addStyle.default)(overlay, {
-        left: posi.positionLeft + "px",
-        top: posi.positionTop + "px"
+        left: `${posi.positionLeft}px`,
+        top: `${posi.positionTop}px`
       });
     } else {
       setPosition(posi);
@@ -92,30 +86,24 @@ var usePosition = function usePosition(props, ref) {
     containerRef.current = containerElement;
     lastTargetRef.current = targetElement;
   }, [container, ref, triggerTarget, utils, followCursor, cursorPosition]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     updatePosition(false);
-    var overlay = (0, _utils.getDOMNode)(ref.current);
-    var containerScrollListener;
+    const overlay = (0, _utils.getDOMNode)(ref.current);
+    let containerScrollListener;
     if (containerRef.current && preventOverflow) {
       var _containerRef$current;
       // Update the overlay position when the container scroll bar is scrolling
-      containerScrollListener = (0, _on.default)(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.tagName) === 'BODY' ? window : containerRef.current, 'scroll', function () {
-        return updatePosition(true, true);
-      });
+      containerScrollListener = (0, _on.default)(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.tagName) === 'BODY' ? window : containerRef.current, 'scroll', () => updatePosition(true, true));
     }
 
     // Update the position when the window size changes
-    var resizeListener = (0, _on.default)(window, 'resize', function () {
-      return updatePosition(true, true);
-    });
+    const resizeListener = (0, _on.default)(window, 'resize', () => updatePosition(true, true));
     if (overlay) {
       // Update the position when the size of the overlay changes
-      overlayResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
-        return updatePosition(true, true);
-      });
+      overlayResizeObserver.current = new _resizeObserver.ResizeObserver(() => updatePosition(true, true));
       overlayResizeObserver.current.observe(overlay);
     }
-    return function () {
+    return () => {
       var _containerScrollListe, _overlayResizeObserve;
       lastTargetRef.current = null;
       (_containerScrollListe = containerScrollListener) === null || _containerScrollListe === void 0 || _containerScrollListe.off();
@@ -123,46 +111,44 @@ var usePosition = function usePosition(props, ref) {
       (_overlayResizeObserve = overlayResizeObserver.current) === null || _overlayResizeObserve === void 0 || _overlayResizeObserve.disconnect();
     };
   }, [preventOverflow, ref, updatePosition]);
-  (0, _hooks.useUpdateEffect)(function () {
-    return updatePosition();
-  }, [updatePosition, placement]);
+  (0, _hooks.useUpdateEffect)(() => updatePosition(), [updatePosition, placement]);
   return [position, updatePosition];
 };
 /**
  * The `Position` component calculates the position of the child element.
  * @private
  */
-var Position = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    followCursor = props.followCursor,
-    cursorPosition = props.cursorPosition;
-  var childRef = _react.default.useRef(null);
-  var _usePosition = usePosition(props, childRef),
-    position = _usePosition[0],
-    updatePosition = _usePosition[1];
-  var positionClassName = position.positionClassName,
-    arrowOffsetLeft = position.arrowOffsetLeft,
-    arrowOffsetTop = position.arrowOffsetTop,
-    positionLeft = position.positionLeft,
-    positionTop = position.positionTop;
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      get child() {
-        return childRef.current;
-      },
-      updatePosition: updatePosition
-    };
-  });
-  (0, _react.useEffect)(function () {
+const Position = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    followCursor,
+    cursorPosition
+  } = props;
+  const childRef = _react.default.useRef(null);
+  const [position, updatePosition] = usePosition(props, childRef);
+  const {
+    positionClassName,
+    arrowOffsetLeft,
+    arrowOffsetTop,
+    positionLeft,
+    positionTop
+  } = position;
+  (0, _react.useImperativeHandle)(ref, () => ({
+    get child() {
+      return childRef.current;
+    },
+    updatePosition
+  }));
+  (0, _react.useEffect)(() => {
     if (!followCursor || !cursorPosition) return;
     updatePosition();
   }, [followCursor, cursorPosition, updatePosition]);
   if (typeof children === 'function') {
-    var childProps = {
+    const childProps = {
       className: (0, _classnames.default)(className, positionClassName),
-      arrowOffsetLeft: arrowOffsetLeft,
-      arrowOffsetTop: arrowOffsetTop,
+      arrowOffsetLeft,
+      arrowOffsetTop,
       left: positionLeft,
       top: positionTop
     };
@@ -171,13 +157,4 @@ var Position = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return children;
 });
 Position.displayName = 'Position';
-Position.propTypes = {
-  className: _propTypes.default.string,
-  children: _propTypes.default.func.isRequired,
-  container: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.any]),
-  containerPadding: _propTypes.default.number,
-  placement: _propTypes.default.any,
-  preventOverflow: _propTypes.default.bool,
-  triggerTarget: _propTypes.default.any
-};
 var _default = exports.default = Position;

package/cjs/internals/Overlay/positionUtils.d.ts

@@ -1,4 +1,4 @@
-import { CursorPosition, TypeAttributes } from '../types';
+import { CursorPosition, Placement } from '../types';
 type Offset = {
     top: number;
     left: number;
@@ -13,7 +13,7 @@ export interface PositionType {
     positionClassName?: string;
 }
 export interface UtilProps {
-    placement: TypeAttributes.Placement;
+    placement: Placement;
     preventOverflow: boolean;
     padding: number;
 }

package/cjs/internals/Overlay/positionUtils.js

@@ -11,10 +11,10 @@ var _ownerDocument = _interopRequireDefault(require("dom-lib/ownerDocument"));
 var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
 var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
 var _scrollLeft = _interopRequireDefault(require("dom-lib/scrollLeft"));
-var _getPosition2 = _interopRequireDefault(require("dom-lib/getPosition"));
+var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));
 var _getStyle = _interopRequireDefault(require("dom-lib/getStyle"));
 var _nodeName = _interopRequireDefault(require("dom-lib/nodeName"));
-var AutoPlacement = exports.AutoPlacement = {
+const AutoPlacement = exports.AutoPlacement = {
   left: 'Start',
   right: 'End',
   top: 'Start',
@@ -25,42 +25,47 @@ var AutoPlacement = exports.AutoPlacement = {
  * @param containerNode
  */
 function getContainerDimensions(containerNode) {
-  var width;
-  var height;
-  var scrollX;
-  var scrollY;
+  let width;
+  let height;
+  let scrollX;
+  let scrollY;
   if (containerNode.tagName === 'BODY') {
     width = window.innerWidth;
     height = window.innerHeight;
     scrollY = (0, _scrollTop.default)((0, _ownerDocument.default)(containerNode).documentElement) || (0, _scrollTop.default)(containerNode);
     scrollX = (0, _scrollLeft.default)((0, _ownerDocument.default)(containerNode).documentElement) || (0, _scrollLeft.default)(containerNode);
   } else {
-    var _ref = (0, _getOffset.default)(containerNode);
-    width = _ref.width;
-    height = _ref.height;
+    ({
+      width,
+      height
+    } = (0, _getOffset.default)(containerNode));
     scrollY = (0, _scrollTop.default)(containerNode);
     scrollX = (0, _scrollLeft.default)(containerNode);
   }
   return {
-    width: width,
-    height: height,
-    scrollX: scrollX,
-    scrollY: scrollY
+    width,
+    height,
+    scrollX,
+    scrollY
   };
 }
-var _default = exports.default = function _default(props) {
-  var placement = props.placement,
-    preventOverflow = props.preventOverflow,
-    padding = props.padding;
+var _default = props => {
+  const {
+    placement,
+    preventOverflow,
+    padding
+  } = props;
   function getTopDelta(top, overlayHeight, container) {
     if (!preventOverflow) {
       return 0;
     }
-    var containerDimensions = getContainerDimensions(container);
-    var containerHeight = containerDimensions.height,
-      scrollY = containerDimensions.scrollY;
-    var topEdgeOffset = top - padding - scrollY;
-    var bottomEdgeOffset = top + padding + overlayHeight - scrollY;
+    const containerDimensions = getContainerDimensions(container);
+    const {
+      height: containerHeight,
+      scrollY
+    } = containerDimensions;
+    const topEdgeOffset = top - padding - scrollY;
+    const bottomEdgeOffset = top + padding + overlayHeight - scrollY;
     if (topEdgeOffset < 0) {
       return -topEdgeOffset;
     } else if (bottomEdgeOffset > containerHeight) {
@@ -72,11 +77,13 @@ var _default = exports.default = function _default(props) {
     if (!preventOverflow) {
       return 0;
     }
-    var containerDimensions = getContainerDimensions(container);
-    var scrollX = containerDimensions.scrollX,
-      containerWidth = containerDimensions.width;
-    var leftEdgeOffset = left - padding - scrollX;
-    var rightEdgeOffset = left + padding + overlayWidth - scrollX;
+    const containerDimensions = getContainerDimensions(container);
+    const {
+      scrollX,
+      width: containerWidth
+    } = containerDimensions;
+    const leftEdgeOffset = left - padding - scrollX;
+    const rightEdgeOffset = left + padding + overlayWidth - scrollX;
     if (leftEdgeOffset < 0) {
       return -leftEdgeOffset;
     } else if (rightEdgeOffset > containerWidth) {
@@ -88,9 +95,10 @@ var _default = exports.default = function _default(props) {
     if (!preventOverflow) {
       return top;
     }
-    var _getContainerDimensio = getContainerDimensions(container),
-      scrollY = _getContainerDimensio.scrollY,
-      containerHeight = _getContainerDimensio.height;
+    const {
+      scrollY,
+      height: containerHeight
+    } = getContainerDimensions(container);
 
     // 判断 overlay 底部是否溢出，设置 top
     if (overlayHeight + top > containerHeight + scrollY) {
@@ -104,9 +112,10 @@ var _default = exports.default = function _default(props) {
     if (!preventOverflow) {
       return left;
     }
-    var _getContainerDimensio2 = getContainerDimensions(container),
-      scrollX = _getContainerDimensio2.scrollX,
-      containerWidth = _getContainerDimensio2.width;
+    const {
+      scrollX,
+      width: containerWidth
+    } = getContainerDimensions(container);
     if (overlayWidth + left > containerWidth + scrollX) {
       return containerWidth - overlayWidth + scrollX;
     }
@@ -115,18 +124,20 @@ var _default = exports.default = function _default(props) {
     return Math.max(scrollX, left);
   }
   return {
-    getPosition: function getPosition(target, container) {
-      var offset = container.tagName === 'BODY' ? (0, _getOffset.default)(target) : (0, _getPosition2.default)(target, container, false);
+    getPosition(target, container) {
+      const offset = container.tagName === 'BODY' ? (0, _getOffset.default)(target) : (0, _getPosition.default)(target, container, false);
       return offset;
     },
-    getCursorOffsetPosition: function getCursorOffsetPosition(target, container, cursorPosition) {
-      var left = cursorPosition.left,
-        top = cursorPosition.top,
-        clientLeft = cursorPosition.clientLeft,
-        clientTop = cursorPosition.clientTop;
-      var offset = {
-        left: left,
-        top: top,
+    getCursorOffsetPosition(target, container, cursorPosition) {
+      const {
+        left,
+        top,
+        clientLeft,
+        clientTop
+      } = cursorPosition;
+      const offset = {
+        left,
+        top,
         width: 10,
         height: 10
       };
@@ -138,12 +149,12 @@ var _default = exports.default = function _default(props) {
       if (container.tagName === 'BODY') {
         return offset;
       }
-      var containerOffset = {
+      const containerOffset = {
         top: 0,
         left: 0
       };
       if ((0, _nodeName.default)(container) !== 'html') {
-        var nextParentOffset = (0, _getOffset.default)(container);
+        const nextParentOffset = (0, _getOffset.default)(container);
         if (nextParentOffset) {
           containerOffset.top = nextParentOffset.top;
           containerOffset.left = nextParentOffset.left;
@@ -155,94 +166,88 @@ var _default = exports.default = function _default(props) {
       offset.top = top - containerOffset.top;
       return offset;
     },
-    calcAutoPlacement: function calcAutoPlacement(targetOffset, container, overlay) {
-      var _getContainerDimensio3 = getContainerDimensions(container),
-        width = _getContainerDimensio3.width,
-        height = _getContainerDimensio3.height,
-        scrollX = _getContainerDimensio3.scrollX,
-        scrollY = _getContainerDimensio3.scrollY;
-      var left = targetOffset.left - scrollX - overlay.width;
-      var top = targetOffset.top - scrollY - overlay.height;
-      var right = width - targetOffset.left - targetOffset.width + scrollX - overlay.width;
-      var bottom = height - targetOffset.top - targetOffset.height + scrollY - overlay.height;
-      var horizontal = [{
+    calcAutoPlacement(targetOffset, container, overlay) {
+      const {
+        width,
+        height,
+        scrollX,
+        scrollY
+      } = getContainerDimensions(container);
+      const left = targetOffset.left - scrollX - overlay.width;
+      const top = targetOffset.top - scrollY - overlay.height;
+      const right = width - targetOffset.left - targetOffset.width + scrollX - overlay.width;
+      const bottom = height - targetOffset.top - targetOffset.height + scrollY - overlay.height;
+      const horizontal = [{
         key: 'left',
         value: left
       }, {
         key: 'right',
         value: right
       }];
-      var vertical = [{
+      const vertical = [{
         key: 'top',
         value: top
       }, {
         key: 'bottom',
         value: bottom
       }];
-      var AV = 'autoVertical';
-      var AH = 'autoHorizontal';
-      var direction;
-      var align;
+      const AV = 'autoVertical';
+      const AH = 'autoHorizontal';
+      let direction;
+      let align;
       if (placement.indexOf(AV) !== -1) {
-        direction = (0, _maxBy.default)(vertical, function (o) {
-          return o.value;
-        });
-        return placement === AV ? direction.key : "" + direction.key + placement.replace(AV, '');
+        direction = (0, _maxBy.default)(vertical, o => o.value);
+        return placement === AV ? direction.key : `${direction.key}${placement.replace(AV, '')}`;
       } else if (placement.indexOf(AH) !== -1) {
-        direction = (0, _maxBy.default)(horizontal, function (o) {
-          return o.value;
-        });
-        return placement === AH ? direction.key : "" + direction.key + placement.replace(AH, '');
+        direction = (0, _maxBy.default)(horizontal, o => o.value);
+        return placement === AH ? direction.key : `${direction.key}${placement.replace(AH, '')}`;
       }
 
       /**
        * Precedence Vertical
        * [...vertical, ...horizontal]
        */
-      direction = (0, _maxBy.default)([].concat(vertical, horizontal), function (o) {
-        return o.value;
-      });
+      direction = (0, _maxBy.default)([...vertical, ...horizontal], o => o.value);
       if (direction.key === 'left' || direction.key === 'right') {
-        align = (0, _minBy.default)(vertical, function (o) {
-          return o.value;
-        });
+        align = (0, _minBy.default)(vertical, o => o.value);
       } else {
-        align = (0, _minBy.default)(horizontal, function (o) {
-          return o.value;
-        });
+        align = (0, _minBy.default)(horizontal, o => o.value);
       }
-      return "" + direction.key + AutoPlacement[align.key];
+      return `${direction.key}${AutoPlacement[align.key]}`;
     },
     // Calculate the position of the overlay
-    calcOverlayPosition: function calcOverlayPosition(overlayNode, target, container, cursorPosition) {
-      var childOffset = cursorPosition ? this.getCursorOffsetPosition(target, container, cursorPosition) : this.getPosition(target, container);
-      var _ref2 = (0, _getOffset.default)(overlayNode),
-        overlayHeight = _ref2.height,
-        overlayWidth = _ref2.width;
-      var top = childOffset.top,
-        left = childOffset.left;
-      var nextPlacement = placement;
+    calcOverlayPosition(overlayNode, target, container, cursorPosition) {
+      const childOffset = cursorPosition ? this.getCursorOffsetPosition(target, container, cursorPosition) : this.getPosition(target, container);
+      const {
+        height: overlayHeight,
+        width: overlayWidth
+      } = (0, _getOffset.default)(overlayNode);
+      const {
+        top,
+        left
+      } = childOffset;
+      let nextPlacement = placement;
       if (placement && placement.indexOf('auto') >= 0) {
         nextPlacement = this.calcAutoPlacement(childOffset, container, {
           height: overlayHeight,
           width: overlayWidth
         });
       }
-      var positionLeft;
-      var positionTop;
-      var arrowOffsetLeft;
-      var arrowOffsetTop;
+      let positionLeft;
+      let positionTop;
+      let arrowOffsetLeft;
+      let arrowOffsetTop;
       if (nextPlacement === 'left' || nextPlacement === 'right') {
         positionTop = childOffset.top + (childOffset.height - overlayHeight) / 2;
-        var topDelta = getTopDelta(positionTop, overlayHeight, container);
+        const topDelta = getTopDelta(positionTop, overlayHeight, container);
         positionTop += topDelta;
-        arrowOffsetTop = 50 * (1 - 2 * topDelta / overlayHeight) + "%";
+        arrowOffsetTop = `${50 * (1 - 2 * topDelta / overlayHeight)}%`;
         arrowOffsetLeft = undefined;
       } else if (nextPlacement === 'top' || nextPlacement === 'bottom') {
         positionLeft = left + (childOffset.width - overlayWidth) / 2;
-        var leftDelta = getLeftDelta(positionLeft, overlayWidth, container);
+        const leftDelta = getLeftDelta(positionLeft, overlayWidth, container);
         positionLeft += leftDelta;
-        arrowOffsetLeft = 50 * (1 - 2 * leftDelta / overlayWidth) + "%";
+        arrowOffsetLeft = `${50 * (1 - 2 * leftDelta / overlayWidth)}%`;
         arrowOffsetTop = undefined;
       }
       if (nextPlacement === 'top' || nextPlacement === 'topStart' || nextPlacement === 'topEnd') {
@@ -263,15 +268,16 @@ var _default = exports.default = function _default(props) {
          * is less than the width of the container scrolling,
          * you need to recalculate the left value.
          */
-        var _getContainerDimensio4 = getContainerDimensions(container),
-          containerWidth = _getContainerDimensio4.width;
+        const {
+          width: containerWidth
+        } = getContainerDimensions(container);
         if (container.scrollWidth > containerWidth) {
           positionLeft = containerWidth + positionLeft - container.scrollWidth;
         }
       }
       if (nextPlacement === 'topStart' || nextPlacement === 'bottomStart') {
         if (document.dir === 'rtl') {
-          var nextLeft = left + (childOffset.width - overlayWidth);
+          const nextLeft = left + (childOffset.width - overlayWidth);
           positionLeft = nextLeft + getLeftDelta(nextLeft, overlayWidth, container);
         } else {
           positionLeft = left + getLeftDelta(left, overlayWidth, container);
@@ -281,24 +287,25 @@ var _default = exports.default = function _default(props) {
         if (document.dir === 'rtl') {
           positionLeft = left + getLeftDelta(left, overlayWidth, container);
         } else {
-          var _nextLeft = left + (childOffset.width - overlayWidth);
-          positionLeft = _nextLeft + getLeftDelta(_nextLeft, overlayWidth, container);
+          const nextLeft = left + (childOffset.width - overlayWidth);
+          positionLeft = nextLeft + getLeftDelta(nextLeft, overlayWidth, container);
         }
       }
       if (nextPlacement === 'leftStart' || nextPlacement === 'rightStart') {
         positionTop = top + getTopDelta(top, overlayHeight, container);
       }
       if (nextPlacement === 'leftEnd' || nextPlacement === 'rightEnd') {
-        var nextTop = top + (childOffset.height - overlayHeight);
+        const nextTop = top + (childOffset.height - overlayHeight);
         positionTop = nextTop + getTopDelta(nextTop, overlayHeight, container);
       }
       return {
-        positionLeft: positionLeft,
-        positionTop: positionTop,
-        arrowOffsetLeft: arrowOffsetLeft,
-        arrowOffsetTop: arrowOffsetTop,
-        positionClassName: "placement-" + (0, _kebabCase.default)(nextPlacement)
+        positionLeft,
+        positionTop,
+        arrowOffsetLeft,
+        arrowOffsetTop,
+        positionClassName: `placement-${(0, _kebabCase.default)(nextPlacement)}`
       };
     }
   };
-};
+};
+exports.default = _default;