rsuite 6.0.0-canary-20250507 → 6.0.0-canary-2025062016

package/esm/Tree/hooks/useFlattenTree.js

@@ -23,10 +23,7 @@ function useFlattenTree(data, options) {
   const forceUpdate = useForceUpdate();
   const flattenedNodes = useRef({});
   const seenValues = useRef(new Set());
-  const updateTreeNodeCheckState = useCallback(function (value) {
-    if (value === void 0) {
-      value = [];
-    }
+  const updateTreeNodeCheckState = useCallback((value = []) => {
     // Reset values to false
     Object.keys(flattenedNodes.current).forEach(refKey => {
       const node = flattenedNodes.current[refKey];
@@ -42,10 +39,7 @@ function useFlattenTree(data, options) {
       });
     });
   }, [cascade, uncheckableItemValues, valueKey]);
-  const flattenTreeData = useCallback(function (treeData, parent, layer) {
-    if (layer === void 0) {
-      layer = 1;
-    }
+  const flattenTreeData = useCallback((treeData, parent, layer = 1) => {
     if (!Array.isArray(treeData) || treeData.length === 0) {
       return [];
     }

package/esm/Tree/hooks/useVirtualizedTreeData.js

@@ -10,13 +10,7 @@ import { useItemDataKeys } from "../../internals/Tree/TreeProvider.js";
 /**
  * Determines whether a node should be shown based on the expanded state of its parent nodes.
  */
-function shouldShowNodeByParentExpanded(expandItemValues, parentKeys) {
-  if (expandItemValues === void 0) {
-    expandItemValues = [];
-  }
-  if (parentKeys === void 0) {
-    parentKeys = [];
-  }
+function shouldShowNodeByParentExpanded(expandItemValues = [], parentKeys = []) {
   const intersectionKeys = intersection(expandItemValues, parentKeys);
   if (intersectionKeys.length === parentKeys.length) {
     return true;

package/esm/Tree/utils/flattenTree.js

@@ -13,10 +13,7 @@ export let WalkTreeStrategy = /*#__PURE__*/function (WalkTreeStrategy) {
 /**
  * Flattens a tree structure into an array.
  */
-export function flattenTree(rootNodes, getChildren, walkStrategy) {
-  if (walkStrategy === void 0) {
-    walkStrategy = WalkTreeStrategy.BFS;
-  }
+export function flattenTree(rootNodes, getChildren, walkStrategy = WalkTreeStrategy.BFS) {
   const result = [];
   if (walkStrategy === WalkTreeStrategy.BFS) {
     walkTreeBfs(rootNodes, getChildren, node => result.push(node));
@@ -58,10 +55,7 @@ export function walkTreeDfs(rootNodes, getChildren, callback) {
  * @deprecated This function is considered unsafe because it mutates the `tree` argument in-place.
  *             Use the `flattenTree` function instead.
  */
-export function UNSAFE_flattenTree(tree, childrenKey, executor) {
-  if (childrenKey === void 0) {
-    childrenKey = 'children';
-  }
+export function UNSAFE_flattenTree(tree, childrenKey = 'children', executor) {
   const flattenData = [];
   const traverse = (data, parent) => {
     if (!Array.isArray(data)) {

package/esm/Tree/utils/getExpandItemValues.js

@@ -2,13 +2,12 @@
 /**
  * Returns an array of expanded item values.
  */
-export function getExpandItemValues(_ref) {
-  let {
-    node,
-    isExpand,
-    expandItemValues,
-    valueKey
-  } = _ref;
+export function getExpandItemValues({
+  node,
+  isExpand,
+  expandItemValues,
+  valueKey
+}) {
   const newExpandItemValues = new Set(expandItemValues);
   if (isExpand) {
     newExpandItemValues.add(node[valueKey]);

package/esm/Tree/utils/indentTreeNode.js

@@ -1,8 +1,5 @@
 'use client';
-export function indentTreeNode(rtl, layer, absolute) {
-  if (absolute === void 0) {
-    absolute = false;
-  }
+export function indentTreeNode(rtl, layer, absolute = false) {
   // layer start from 1
   const offset = layer * 26;
   if (absolute) {

package/esm/Uploader/UploadFileItem.js

@@ -12,10 +12,7 @@ import { previewFile } from "./utils/previewFile.js";
  * Format display file size
  * @param size
  */
-export const formatSize = function (size) {
-  if (size === void 0) {
-    size = 0;
-  }
+export const formatSize = (size = 0) => {
   const K = 1024;
   const M = 1024 * 1024;
   const G = 1024 * 1024 * 1024;

package/esm/Uploader/Uploader.js

@@ -59,10 +59,7 @@ function fileListReducer(files, action) {
       throw new Error();
   }
 }
-const useFileList = function (defaultFileList) {
-  if (defaultFileList === void 0) {
-    defaultFileList = [];
-  }
+const useFileList = (defaultFileList = []) => {
   const fileListRef = useRef(defaultFileList.map(createFile));
   const fileListUpdateCallback = useRef(null);
   const [fileList, dispatch] = useReducer(fileListReducer, fileListRef.current);

package/esm/global.d.ts

@@ -1,7 +1 @@
 declare const __DEV__: boolean;
-
-declare namespace Chai {
-  interface Assertion {
-    toHaveError(expectedMessage?: string): Assertion;
-  }
-}

package/esm/index.d.ts

@@ -20,6 +20,7 @@ export * from './Badge';
 export * from './toaster';
 export * from './useToaster';
 export * from './Progress';
+export * from './ProgressCircle';
 export * from './Avatar';
 export * from './AvatarGroup';
 export * from './Image';
@@ -56,6 +57,7 @@ export * from './RadioGroup';
 export * from './RadioTile';
 export * from './RadioTileGroup';
 export * from './SelectPicker';
+export * from './SegmentedControl';
 export * from './CheckPicker';
 export * from './InputPicker';
 export * from './TagPicker';
@@ -112,6 +114,7 @@ export * from './CustomProvider';
 export * from './useMediaQuery';
 export * from './useBreakpointValue';
 export * from './useFormControl';
+export * from './useDialog';
 export * from './VisuallyHidden';
 export * from './Tabs';
 export * from './Accordion';

package/esm/index.js

@@ -32,6 +32,7 @@ export * from "./Badge/index.js";
 export * from "./toaster/index.js";
 export * from "./useToaster/index.js";
 export * from "./Progress/index.js";
+export * from "./ProgressCircle/index.js";
 
 // Media
 // --------------------------------------------------------
@@ -80,6 +81,7 @@ export * from "./RadioGroup/index.js";
 export * from "./RadioTile/index.js";
 export * from "./RadioTileGroup/index.js";
 export * from "./SelectPicker/index.js";
+export * from "./SegmentedControl/index.js";
 export * from "./CheckPicker/index.js";
 export * from "./InputPicker/index.js";
 export * from "./TagPicker/index.js";
@@ -148,6 +150,7 @@ export * from "./CustomProvider/index.js";
 export * from "./useMediaQuery/index.js";
 export * from "./useBreakpointValue/index.js";
 export * from "./useFormControl/index.js";
+export * from "./useDialog/index.js";
 
 // Disclosure
 // --------------------------------------------------------

package/esm/internals/InputBase/InputBase.js

@@ -5,7 +5,7 @@ import Plaintext from "../Plaintext/index.js";
 import Box from "../Box/index.js";
 import { forwardRef, mergeRefs, createChainedFunction } from "../utils/index.js";
 import { useFormGroup } from "../../FormGroup/index.js";
-import { InputGroupContext } from "../../InputGroup/InputGroup.js";
+import { InputGroupContext } from "../../InputGroup/index.js";
 import { KEY_VALUES } from "../constants/index.js";
 import { useStyles } from "../hooks/index.js";
 /**

package/esm/internals/Menu/Menu.js

@@ -24,19 +24,18 @@ function getMenuItemTarget(event) {
  * Headless ARIA `menu`
  * @private
  */
-function Menu(_ref) {
+function Menu({
+  disabled,
+  children,
+  openMenuOn = defaultOpenMenuOn,
+  defaultOpen = false,
+  open: openProp,
+  menuButtonText,
+  renderMenuButton,
+  renderMenuPopup,
+  onToggleMenu
+}) {
   var _items$activeItemInde;
-  let {
-    disabled,
-    children,
-    openMenuOn = defaultOpenMenuOn,
-    defaultOpen = false,
-    open: openProp,
-    menuButtonText,
-    renderMenuButton,
-    renderMenuPopup,
-    onToggleMenu
-  } = _ref;
   const buttonElementRef = useRef(null);
   const menuElementRef = useRef(null);
   const parentMenu = useContext(MenuContext);
@@ -71,10 +70,7 @@ function Menu(_ref) {
     onToggleMenu === null || onToggleMenu === void 0 || onToggleMenu(true, event);
     grabFocus();
   }, [dispatch, onToggleMenu, grabFocus]);
-  const closeMenu = useCallback(function (event, returnFocusToButton) {
-    if (returnFocusToButton === void 0) {
-      returnFocusToButton = true;
-    }
+  const closeMenu = useCallback((event, returnFocusToButton = true) => {
     dispatch({
       type: MenuActionTypes.CloseMenu
     });

package/esm/internals/Menu/Menubar.js

@@ -10,13 +10,12 @@ import { isFocusEntering, isFocusLeaving, isFocusableElement } from "../utils/in
 /**
  * @private
  */
-export default function Menubar(_ref) {
+export default function Menubar({
+  vertical = false,
+  children,
+  onActivateItem
+}) {
   var _items$activeItemInde3;
-  let {
-    vertical = false,
-    children,
-    onActivateItem
-  } = _ref;
   const menubar = useMenu({
     role: 'menubar'
   });

package/esm/internals/Overlay/OverlayTrigger.js

@@ -10,18 +10,11 @@ import { useOverlay } from "./OverlayProvider.js";
 import { usePortal, useControlled } from "../hooks/index.js";
 import { createChainedFunction, isOneOf } from "../utils/index.js";
 import { isFragment } from "../utils/index.js";
-function mergeEvents(events, props) {
-  if (events === void 0) {
-    events = {};
-  }
-  if (props === void 0) {
-    props = {};
-  }
+function mergeEvents(events = {}, props = {}) {
   const nextEvents = {};
   Object.keys(events).forEach(eventName => {
     if (events[eventName]) {
-      var _props;
-      nextEvents[eventName] = createChainedFunction(events[eventName], (_props = props) === null || _props === void 0 ? void 0 : _props[eventName]);
+      nextEvents[eventName] = createChainedFunction(events[eventName], props === null || props === void 0 ? void 0 : props[eventName]);
     }
   });
   return nextEvents;

package/esm/internals/Overlay/Position.js

@@ -5,7 +5,7 @@ import ownerDocument from 'dom-lib/ownerDocument';
 import on from 'dom-lib/on';
 import addStyle from 'dom-lib/addStyle';
 import isElement from "../../DOMHelper/isElement.js";
-import positionUtils from "./positionUtils.js";
+import { calcPosition } from "./utils/position.js";
 import { ResizeObserver } from '@juggle/resize-observer';
 import { getDOMNode, kebabPlace } from "../utils/index.js";
 import { useUpdateEffect } from "../hooks/index.js";
@@ -38,7 +38,7 @@ const usePosition = (props, ref) => {
     arrowOffsetTop: undefined
   };
   const [position, setPosition] = useState(defaultPosition);
-  const utils = useMemo(() => positionUtils({
+  const utils = useMemo(() => calcPosition({
     placement,
     preventOverflow,
     padding: containerPadding
@@ -49,10 +49,7 @@ const usePosition = (props, ref) => {
    * @param forceUpdateDOM Whether to update the DOM directly
    * @returns void
    */
-  function (placementChanged, forceUpdateDOM) {
-    if (placementChanged === void 0) {
-      placementChanged = true;
-    }
+  (placementChanged = true, forceUpdateDOM) => {
     if (!(triggerTarget !== null && triggerTarget !== void 0 && triggerTarget.current)) {
       return;
     }

package/esm/internals/Overlay/types.d.ts

@@ -12,7 +12,7 @@ export interface PositionType {
     arrowOffsetLeft?: number;
     arrowOffsetTop?: number;
 }
-export interface UtilProps {
+export interface PositionOptions {
     placement: Placement;
     preventOverflow: boolean;
     padding: number;

package/esm/internals/Overlay/utils/position.d.ts

@@ -0,0 +1,24 @@
+import type { Offset, Placement } from '../../types';
+import type { CursorPosition, PositionOptions, PositionType } from '../types';
+export declare const AutoPlacement: {
+    readonly left: "Start";
+    readonly right: "End";
+    readonly top: "Start";
+    readonly bottom: "End";
+};
+export declare function calcPosition(options: PositionOptions): {
+    getPosition(target: HTMLElement, container: HTMLElement): import("dom-lib/getOffset").Offset | DOMRect | null;
+    getCursorOffsetPosition(target: HTMLElement, container: HTMLElement, cursorPosition: CursorPosition): Offset;
+    /**
+     * Calculate the optimal auto placement position
+     * @param targetOffset Target element offset
+     * @param container Container element
+     * @param overlay Overlay dimensions
+     * @returns Calculated optimal placement position
+     */
+    calcAutoPlacement(targetOffset: Offset, container: HTMLElement, overlay: {
+        width: number;
+        height: number;
+    }): Placement;
+    calcOverlayPosition(overlayNode: HTMLElement, target: HTMLElement, container: HTMLElement, cursorPosition?: CursorPosition | null): PositionType;
+};

package/esm/internals/Overlay/{positionUtils.js → utils/position.js}

@@ -15,11 +15,26 @@ export const AutoPlacement = {
   bottom: 'End'
 };
 
+// Cache for memoization
+const dimensionsCache = new Map();
+
+// Cache expiry time (milliseconds)
+const CACHE_EXPIRY = 100;
+
 /**
- * Get the external dimensions of the container
- * @param containerNode
+ * Get the external dimensions of the container with memoization for performance
+ * @param containerNode Container element
+ * @returns Container dimensions information
  */
 function getContainerDimensions(containerNode) {
+  // Check cache
+  const cached = dimensionsCache.get(containerNode);
+  const now = Date.now();
+  if (cached && now - cached.timestamp < CACHE_EXPIRY) {
+    return cached.dimensions;
+  }
+
+  // Calculate new dimensions
   let width;
   let height;
   let scrollX;
@@ -37,19 +52,28 @@ function getContainerDimensions(containerNode) {
     scrollY = scrollTop(containerNode);
     scrollX = scrollLeft(containerNode);
   }
-  return {
+  const dimensions = {
     width,
     height,
     scrollX,
     scrollY
   };
+
+  // Update cache
+  dimensionsCache.set(containerNode, {
+    dimensions,
+    timestamp: now
+  });
+  return dimensions;
 }
-export default props => {
+export function calcPosition(options) {
   const {
     placement,
     preventOverflow,
     padding
-  } = props;
+  } = options;
+  // Ensure placement is a valid type
+  const currentPlacement = placement;
   function getTopDelta(top, overlayHeight, container) {
     if (!preventOverflow) {
       return 0;
@@ -95,12 +119,12 @@ export default props => {
       height: containerHeight
     } = getContainerDimensions(container);
 
-    // 判断 overlay 底部是否溢出，设置 top
+    // Check if the bottom of the overlay overflows, set top
     if (overlayHeight + top > containerHeight + scrollY) {
       return containerHeight - overlayHeight + scrollY;
     }
 
-    // top 的最小值不能少于纵向滚动条 y 的值
+    // The minimum value of top should not be less than the vertical scroll bar y value
     return Math.max(scrollY, top);
   }
   function getPositionLeft(container, overlayWidth, left) {
@@ -115,7 +139,7 @@ export default props => {
       return containerWidth - overlayWidth + scrollX;
     }
 
-    // left 的最小值不能少于横向滚动条 x 的值
+    // The minimum value of left should not be less than the horizontal scroll bar x value
     return Math.max(scrollX, left);
   }
   return {
@@ -161,57 +185,86 @@ export default props => {
       offset.top = top - containerOffset.top;
       return offset;
     },
+    /**
+     * Calculate the optimal auto placement position
+     * @param targetOffset Target element offset
+     * @param container Container element
+     * @param overlay Overlay dimensions
+     * @returns Calculated optimal placement position
+     */
     calcAutoPlacement(targetOffset, container, overlay) {
+      // Get container dimensions and scroll position
       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;
+
+      // Calculate available space in each direction
+      const availableSpace = {
+        left: targetOffset.left - scrollX - overlay.width,
+        top: targetOffset.top - scrollY - overlay.height,
+        right: width - targetOffset.left - targetOffset.width + scrollX - overlay.width,
+        bottom: height - targetOffset.top - targetOffset.height + scrollY - overlay.height
+      };
+
+      // Group available space into horizontal and vertical directions
       const horizontal = [{
         key: 'left',
-        value: left
+        value: availableSpace.left
       }, {
         key: 'right',
-        value: right
+        value: availableSpace.right
       }];
       const vertical = [{
         key: 'top',
-        value: top
+        value: availableSpace.top
       }, {
         key: 'bottom',
-        value: bottom
+        value: availableSpace.bottom
       }];
+
+      // Constants for auto placement
       const AV = 'autoVertical';
       const AH = 'autoHorizontal';
-      let direction;
-      let align;
-      if (placement.indexOf(AV) !== -1) {
-        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, o => o.value);
-        return placement === AH ? direction.key : `${direction.key}${placement.replace(AH, '')}`;
+
+      // Handle specific auto vertical placement
+      if (currentPlacement.indexOf(AV) !== -1) {
+        const bestDirection = maxBy(vertical, o => o.value);
+        if (!bestDirection) return 'bottom'; // Default value
+        return currentPlacement === AV ? bestDirection.key : `${bestDirection.key}${currentPlacement.replace(AV, '')}`;
       }
 
-      /**
-       * Precedence Vertical
-       * [...vertical, ...horizontal]
-       */
-      direction = maxBy([...vertical, ...horizontal], o => o.value);
-      if (direction.key === 'left' || direction.key === 'right') {
-        align = minBy(vertical, o => o.value);
-      } else {
-        align = minBy(horizontal, o => o.value);
+      // Handle specific auto horizontal placement
+      if (currentPlacement.indexOf(AH) !== -1) {
+        const bestDirection = maxBy(horizontal, o => o.value);
+        if (!bestDirection) return 'right'; // Default value
+        return currentPlacement === AH ? bestDirection.key : `${bestDirection.key}${currentPlacement.replace(AH, '')}`;
       }
-      return `${direction.key}${AutoPlacement[align.key]}`;
+
+      // By default, vertical direction takes precedence
+      // Find the direction with the most space to use as main direction
+      const bestDirection = maxBy([...vertical, ...horizontal], o => o.value);
+      if (!bestDirection) return 'bottom'; // 默认值
+
+      // Determine alignment based on main direction
+      const isHorizontal = bestDirection.key === 'left' || bestDirection.key === 'right';
+      const bestAlign = isHorizontal ? minBy(vertical, o => o.value) // If main direction is horizontal, align vertically
+      : minBy(horizontal, o => o.value); // If main direction is vertical, align horizontally
+
+      if (!bestAlign) return bestDirection.key; // If no alignment, return main direction
+
+      // Return final placement position
+      return `${bestDirection.key}${AutoPlacement[bestAlign.key]}`;
     },
     // Calculate the position of the overlay
     calcOverlayPosition(overlayNode, target, container, cursorPosition) {
+      // Cache commonly used values to avoid repeated calculations
+      const ARROW_OFFSET_FACTOR = 50; // Arrow offset calculation factor
+      const isRTL = document.dir === 'rtl';
+
+      // Get target element offset
       const childOffset = cursorPosition ? this.getCursorOffsetPosition(target, container, cursorPosition) : this.getPosition(target, container);
       const {
         height: overlayHeight,
@@ -221,45 +274,70 @@ export default props => {
         top,
         left
       } = childOffset;
-      let nextPlacement = placement;
-      if (placement && placement.indexOf('auto') >= 0) {
+
+      // Determine placement position
+      let nextPlacement = currentPlacement;
+      if (currentPlacement && currentPlacement.indexOf('auto') >= 0) {
         nextPlacement = this.calcAutoPlacement(childOffset, container, {
           height: overlayHeight,
           width: overlayWidth
         });
       }
+
+      // Initialize position and arrow offset values
       let positionLeft;
       let positionTop;
       let arrowOffsetLeft;
       let arrowOffsetTop;
+
+      // Handle basic left/right positions
       if (nextPlacement === 'left' || nextPlacement === 'right') {
+        // Vertical centering
         positionTop = childOffset.top + (childOffset.height - overlayHeight) / 2;
         const topDelta = getTopDelta(positionTop, overlayHeight, container);
         positionTop += topDelta;
-        arrowOffsetTop = `${50 * (1 - 2 * topDelta / overlayHeight)}%`;
+        arrowOffsetTop = `${ARROW_OFFSET_FACTOR * (1 - 2 * topDelta / overlayHeight)}%`;
         arrowOffsetLeft = undefined;
-      } else if (nextPlacement === 'top' || nextPlacement === 'bottom') {
+      }
+      // Handle basic top/bottom positions
+      else if (nextPlacement === 'top' || nextPlacement === 'bottom') {
+        // Horizontal centering
         positionLeft = left + (childOffset.width - overlayWidth) / 2;
         const leftDelta = getLeftDelta(positionLeft, overlayWidth, container);
         positionLeft += leftDelta;
-        arrowOffsetLeft = `${50 * (1 - 2 * leftDelta / overlayWidth)}%`;
+        arrowOffsetLeft = `${ARROW_OFFSET_FACTOR * (1 - 2 * leftDelta / overlayWidth)}%`;
         arrowOffsetTop = undefined;
       }
-      if (nextPlacement === 'top' || nextPlacement === 'topStart' || nextPlacement === 'topEnd') {
+
+      // Helper function: Check if placement matches specified prefix
+      const matchesPlacement = prefix => {
+        return nextPlacement === prefix || nextPlacement === `${prefix}Start` || nextPlacement === `${prefix}End`;
+      };
+
+      // Handle top position series
+      if (matchesPlacement('top')) {
         positionTop = getPositionTop(container, overlayHeight, childOffset.top - overlayHeight);
       }
-      if (nextPlacement === 'bottom' || nextPlacement === 'bottomStart' || nextPlacement === 'bottomEnd') {
+
+      // Handle bottom position series
+      if (matchesPlacement('bottom')) {
         positionTop = getPositionTop(container, overlayHeight, childOffset.top + childOffset.height);
       }
-      if (nextPlacement === 'left' || nextPlacement === 'leftStart' || nextPlacement === 'leftEnd') {
+
+      // Handle left position series
+      if (matchesPlacement('left')) {
         positionLeft = getPositionLeft(container, overlayWidth, childOffset.left - overlayWidth);
       }
-      if (nextPlacement === 'right' || nextPlacement === 'rightStart' || nextPlacement === 'rightEnd') {
+
+      // Handle right position series
+      if (matchesPlacement('right')) {
         positionLeft = getPositionLeft(container, overlayWidth, childOffset.left + childOffset.width);
       }
-      if (document.dir === 'rtl' && (nextPlacement === 'left' || nextPlacement === 'leftStart' || nextPlacement === 'leftEnd' || nextPlacement === 'right' || nextPlacement === 'rightStart' || nextPlacement === 'rightEnd')) {
+
+      // Handle horizontal position adjustment in RTL mode
+      if (isRTL && (matchesPlacement('left') || matchesPlacement('right'))) {
         /**
-         * When laying out in rtl, if the width of the container
+         * When laying out in RTL, if the width of the container
          * is less than the width of the container scrolling,
          * you need to recalculate the left value.
          */
@@ -270,25 +348,33 @@ export default props => {
           positionLeft = containerWidth + positionLeft - container.scrollWidth;
         }
       }
+
+      // Handle Start variant positions
       if (nextPlacement === 'topStart' || nextPlacement === 'bottomStart') {
-        if (document.dir === 'rtl') {
+        if (isRTL) {
           const nextLeft = left + (childOffset.width - overlayWidth);
           positionLeft = nextLeft + getLeftDelta(nextLeft, overlayWidth, container);
         } else {
           positionLeft = left + getLeftDelta(left, overlayWidth, container);
         }
       }
+
+      // Handle End variant positions
       if (nextPlacement === 'topEnd' || nextPlacement === 'bottomEnd') {
-        if (document.dir === 'rtl') {
+        if (isRTL) {
           positionLeft = left + getLeftDelta(left, overlayWidth, container);
         } else {
           const nextLeft = left + (childOffset.width - overlayWidth);
           positionLeft = nextLeft + getLeftDelta(nextLeft, overlayWidth, container);
         }
       }
+
+      // Handle leftStart and rightStart
       if (nextPlacement === 'leftStart' || nextPlacement === 'rightStart') {
         positionTop = top + getTopDelta(top, overlayHeight, container);
       }
+
+      // Handle leftEnd and rightEnd
       if (nextPlacement === 'leftEnd' || nextPlacement === 'rightEnd') {
         const nextTop = top + (childOffset.height - overlayHeight);
         positionTop = nextTop + getTopDelta(nextTop, overlayHeight, container);
@@ -302,4 +388,4 @@ export default props => {
       };
     }
   };
-};
+}