rsuite 5.76.2 → 6.0.0-canary-20250103

package/esm/internals/Overlay/Position.js

@@ -1,6 +1,5 @@
 'use client';
 import React, { useState, useEffect, useRef, useMemo, useCallback, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import getContainer from 'dom-lib/getContainer';
 import ownerDocument from 'dom-lib/ownerDocument';
@@ -13,37 +12,32 @@ import isElement from "../../DOMHelper/isElement.js";
 import positionUtils from "./positionUtils.js";
 import { getDOMNode } from "../utils/index.js";
 import { useUpdateEffect } from "../hooks/index.js";
-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 = useRef(null);
-  var lastTargetRef = useRef(null);
-  var overlayResizeObserver = useRef();
-  var defaultPosition = {
+const usePosition = (props, ref) => {
+  const {
+    placement = 'right',
+    preventOverflow = false,
+    containerPadding = 0,
+    container,
+    triggerTarget,
+    followCursor,
+    cursorPosition
+  } = props;
+  const containerRef = useRef(null);
+  const lastTargetRef = useRef(null);
+  const overlayResizeObserver = useRef();
+  const defaultPosition = {
     positionLeft: 0,
     positionTop: 0,
     arrowOffsetLeft: undefined,
     arrowOffsetTop: undefined
   };
-  var _useState = useState(defaultPosition),
-    position = _useState[0],
-    setPosition = _useState[1];
-  var utils = useMemo(function () {
-    return positionUtils({
-      placement: placement,
-      preventOverflow: preventOverflow,
-      padding: containerPadding
-    });
-  }, [placement, preventOverflow, containerPadding]);
-  var updatePosition = useCallback(
+  const [position, setPosition] = useState(defaultPosition);
+  const utils = useMemo(() => positionUtils({
+    placement,
+    preventOverflow,
+    padding: containerPadding
+  }), [placement, preventOverflow, containerPadding]);
+  const updatePosition = useCallback(
   /**
    * @param placementChanged  Whether the placement has changed
    * @param forceUpdateDOM Whether to update the DOM directly
@@ -56,7 +50,7 @@ var usePosition = function usePosition(props, ref) {
     if (!(triggerTarget !== null && triggerTarget !== void 0 && triggerTarget.current)) {
       return;
     }
-    var targetElement = getDOMNode(triggerTarget);
+    const targetElement = getDOMNode(triggerTarget);
     if (!isElement(targetElement)) {
       throw new Error('`target` should return an HTMLElement');
     }
@@ -65,19 +59,19 @@ var usePosition = function usePosition(props, ref) {
     if (targetElement === lastTargetRef.current && !placementChanged) {
       return;
     }
-    var overlay = getDOMNode(ref.current);
-    var containerElement = getContainer(typeof container === 'function' ? container() : container !== null && container !== void 0 ? container : null, ownerDocument(ref.current).body);
-    var posi = utils.calcOverlayPosition(overlay, targetElement, containerElement, followCursor ? cursorPosition : undefined);
+    const overlay = getDOMNode(ref.current);
+    const containerElement = getContainer(typeof container === 'function' ? container() : container !== null && container !== void 0 ? container : null, ownerDocument(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];
       removeClass(overlay, preClassName);
       if (posi.positionClassName) {
         addClass(overlay, posi.positionClassName);
       }
       addStyle(overlay, {
-        left: posi.positionLeft + "px",
-        top: posi.positionTop + "px"
+        left: `${posi.positionLeft}px`,
+        top: `${posi.positionTop}px`
       });
     } else {
       setPosition(posi);
@@ -85,30 +79,24 @@ var usePosition = function usePosition(props, ref) {
     containerRef.current = containerElement;
     lastTargetRef.current = targetElement;
   }, [container, ref, triggerTarget, utils, followCursor, cursorPosition]);
-  useEffect(function () {
+  useEffect(() => {
     updatePosition(false);
-    var overlay = getDOMNode(ref.current);
-    var containerScrollListener;
+    const overlay = getDOMNode(ref.current);
+    let containerScrollListener;
     if (containerRef.current && preventOverflow) {
       var _containerRef$current;
       // Update the overlay position when the container scroll bar is scrolling
-      containerScrollListener = on(((_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 = on(((_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 = on(window, 'resize', function () {
-      return updatePosition(true, true);
-    });
+    const resizeListener = on(window, 'resize', () => updatePosition(true, true));
     if (overlay) {
       // Update the position when the size of the overlay changes
-      overlayResizeObserver.current = new ResizeObserver(function () {
-        return updatePosition(true, true);
-      });
+      overlayResizeObserver.current = new 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();
@@ -116,46 +104,44 @@ var usePosition = function usePosition(props, ref) {
       (_overlayResizeObserve = overlayResizeObserver.current) === null || _overlayResizeObserve === void 0 || _overlayResizeObserve.disconnect();
     };
   }, [preventOverflow, ref, updatePosition]);
-  useUpdateEffect(function () {
-    return updatePosition();
-  }, [updatePosition, placement]);
+  useUpdateEffect(() => updatePosition(), [updatePosition, placement]);
   return [position, updatePosition];
 };
 /**
  * The `Position` component calculates the position of the child element.
  * @private
  */
-var Position = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    followCursor = props.followCursor,
-    cursorPosition = props.cursorPosition;
-  var childRef = React.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;
-  useImperativeHandle(ref, function () {
-    return {
-      get child() {
-        return childRef.current;
-      },
-      updatePosition: updatePosition
-    };
-  });
-  useEffect(function () {
+const Position = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    followCursor,
+    cursorPosition
+  } = props;
+  const childRef = React.useRef(null);
+  const [position, updatePosition] = usePosition(props, childRef);
+  const {
+    positionClassName,
+    arrowOffsetLeft,
+    arrowOffsetTop,
+    positionLeft,
+    positionTop
+  } = position;
+  useImperativeHandle(ref, () => ({
+    get child() {
+      return childRef.current;
+    },
+    updatePosition
+  }));
+  useEffect(() => {
     if (!followCursor || !cursorPosition) return;
     updatePosition();
   }, [followCursor, cursorPosition, updatePosition]);
   if (typeof children === 'function') {
-    var childProps = {
+    const childProps = {
       className: classNames(className, positionClassName),
-      arrowOffsetLeft: arrowOffsetLeft,
-      arrowOffsetTop: arrowOffsetTop,
+      arrowOffsetLeft,
+      arrowOffsetTop,
       left: positionLeft,
       top: positionTop
     };
@@ -164,13 +150,4 @@ var Position = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return children;
 });
 Position.displayName = 'Position';
-Position.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.func.isRequired,
-  container: PropTypes.oneOfType([PropTypes.func, PropTypes.any]),
-  containerPadding: PropTypes.number,
-  placement: PropTypes.any,
-  preventOverflow: PropTypes.bool,
-  triggerTarget: PropTypes.any
-};
 export default Position;

package/esm/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/esm/internals/Overlay/positionUtils.js

@@ -6,10 +6,10 @@ import ownerDocument from 'dom-lib/ownerDocument';
 import getOffset from 'dom-lib/getOffset';
 import scrollTop from 'dom-lib/scrollTop';
 import scrollLeft from 'dom-lib/scrollLeft';
-import _getPosition from 'dom-lib/getPosition';
+import getPosition from 'dom-lib/getPosition';
 import getStyle from 'dom-lib/getStyle';
 import nodeName from 'dom-lib/nodeName';
-export var AutoPlacement = {
+export const AutoPlacement = {
   left: 'Start',
   right: 'End',
   top: 'Start',
@@ -20,42 +20,47 @@ export var 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 = scrollTop(ownerDocument(containerNode).documentElement) || scrollTop(containerNode);
     scrollX = scrollLeft(ownerDocument(containerNode).documentElement) || scrollLeft(containerNode);
   } else {
-    var _ref = getOffset(containerNode);
-    width = _ref.width;
-    height = _ref.height;
+    ({
+      width,
+      height
+    } = getOffset(containerNode));
     scrollY = scrollTop(containerNode);
     scrollX = scrollLeft(containerNode);
   }
   return {
-    width: width,
-    height: height,
-    scrollX: scrollX,
-    scrollY: scrollY
+    width,
+    height,
+    scrollX,
+    scrollY
   };
 }
-export default (function (props) {
-  var placement = props.placement,
-    preventOverflow = props.preventOverflow,
-    padding = props.padding;
+export 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) {
@@ -67,11 +72,13 @@ export default (function (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) {
@@ -83,9 +90,10 @@ export default (function (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) {
@@ -99,9 +107,10 @@ export default (function (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;
     }
@@ -110,18 +119,20 @@ export default (function (props) {
     return Math.max(scrollX, left);
   }
   return {
-    getPosition: function getPosition(target, container) {
-      var offset = container.tagName === 'BODY' ? getOffset(target) : _getPosition(target, container, false);
+    getPosition(target, container) {
+      const offset = container.tagName === 'BODY' ? getOffset(target) : getPosition(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
       };
@@ -133,12 +144,12 @@ export default (function (props) {
       if (container.tagName === 'BODY') {
         return offset;
       }
-      var containerOffset = {
+      const containerOffset = {
         top: 0,
         left: 0
       };
       if (nodeName(container) !== 'html') {
-        var nextParentOffset = getOffset(container);
+        const nextParentOffset = getOffset(container);
         if (nextParentOffset) {
           containerOffset.top = nextParentOffset.top;
           containerOffset.left = nextParentOffset.left;
@@ -150,94 +161,88 @@ export default (function (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 = maxBy(vertical, function (o) {
-          return o.value;
-        });
-        return placement === AV ? direction.key : "" + direction.key + placement.replace(AV, '');
+        direction = maxBy(vertical, o => o.value);
+        return placement === AV ? direction.key : `${direction.key}${placement.replace(AV, '')}`;
       } else if (placement.indexOf(AH) !== -1) {
-        direction = maxBy(horizontal, function (o) {
-          return o.value;
-        });
-        return placement === AH ? direction.key : "" + direction.key + placement.replace(AH, '');
+        direction = maxBy(horizontal, o => o.value);
+        return placement === AH ? direction.key : `${direction.key}${placement.replace(AH, '')}`;
       }
 
       /**
        * Precedence Vertical
        * [...vertical, ...horizontal]
        */
-      direction = maxBy([].concat(vertical, horizontal), function (o) {
-        return o.value;
-      });
+      direction = maxBy([...vertical, ...horizontal], o => o.value);
       if (direction.key === 'left' || direction.key === 'right') {
-        align = minBy(vertical, function (o) {
-          return o.value;
-        });
+        align = minBy(vertical, o => o.value);
       } else {
-        align = minBy(horizontal, function (o) {
-          return o.value;
-        });
+        align = minBy(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 = getOffset(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
+      } = getOffset(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') {
@@ -258,15 +263,16 @@ export default (function (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);
@@ -276,24 +282,24 @@ export default (function (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-" + kebabCase(nextPlacement)
+        positionLeft,
+        positionTop,
+        arrowOffsetLeft,
+        arrowOffsetTop,
+        positionClassName: `placement-${kebabCase(nextPlacement)}`
       };
     }
   };
-});
+};