rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/esm/internals/Box/utils.js

@@ -0,0 +1,114 @@
+'use client';
+import { getCssValue, getSizeStyle, getColorVar } from "../utils/index.js";
+
+// Mapping for padding properties to their CSS style equivalents
+const paddingStyleMap = {
+  p: 'padding',
+  pt: 'paddingTop',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  pr: 'paddingRight',
+  px: 'paddingInline',
+  py: 'paddingBlock'
+};
+
+// Mapping for margin properties to their CSS style equivalents
+const marginStyleMap = {
+  m: 'margin',
+  mt: 'marginTop',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  mr: 'marginRight',
+  mx: 'marginInline',
+  my: 'marginBlock'
+};
+
+// Mapping for size properties to their CSS style equivalents
+const sizeStyleMap = {
+  w: 'width',
+  h: 'height'
+};
+
+// Derive box property keys from style mappings
+const boxPropKeys = [...Object.keys(paddingStyleMap), ...Object.keys(marginStyleMap), ...Object.keys(sizeStyleMap), 'rounded', 'border', 'shadow', 'display', 'color', 'bg'];
+
+/**
+ * Extract box properties from props
+ * @param props Original props object
+ * @returns Object containing only box properties
+ */
+export const extractBoxProps = props => {
+  const boxProps = {};
+
+  // Extract only box related properties
+  boxPropKeys.forEach(key => {
+    if (key in props && props[key] !== undefined) {
+      boxProps[key] = props[key];
+    }
+  });
+  return boxProps;
+};
+
+/**
+ * Filter out layout properties from props
+ * @param props Original props object
+ * @returns New object without layout properties
+ */
+export const omitBoxProps = props => {
+  const filteredProps = {};
+
+  // Copy all properties except box related ones
+  Object.keys(props).forEach(key => {
+    if (!boxPropKeys.includes(key)) {
+      filteredProps[key] = props[key];
+    }
+  });
+  return filteredProps;
+};
+
+/**
+ * Converts layout properties to CSS variables with abbreviated names
+ * @param props Object containing layout properties
+ * @returns Object with CSS variables
+ */
+export const getBoxCSSVariables = props => {
+  const cssVars = {};
+
+  // Process padding properties
+  Object.keys(paddingStyleMap).forEach(propKey => {
+    if (props[propKey] !== undefined) {
+      cssVars[`--rs-box-${propKey}`] = getCssValue(props[propKey]);
+    }
+  });
+
+  // Process margin properties
+  Object.keys(marginStyleMap).forEach(propKey => {
+    if (props[propKey] !== undefined) {
+      cssVars[`--rs-box-${propKey}`] = getCssValue(props[propKey]);
+    }
+  });
+
+  // Process size properties
+  Object.keys(sizeStyleMap).forEach(propKey => {
+    if (props[propKey] !== undefined) {
+      cssVars[`--rs-box-${propKey}`] = getCssValue(props[propKey]);
+    }
+  });
+  if (props.border !== undefined) {
+    cssVars['--rs-box-border'] = getCssValue(props.border);
+  }
+  if (props.display !== undefined) {
+    cssVars['--rs-box-display'] = props.display;
+  }
+  if (props.color !== undefined) {
+    cssVars['--rs-box-color'] = getColorVar(props.color);
+  }
+  if (props.bg !== undefined) {
+    cssVars['--rs-box-bg'] = getColorVar(props.bg);
+  }
+  return {
+    ...cssVars,
+    ...getSizeStyle(props.rounded, 'box', 'rounded'),
+    ...getSizeStyle(props.shadow, 'box', 'shadow')
+  };
+};

package/esm/internals/CloseButton/CloseButton.js

@@ -4,7 +4,7 @@ import React from 'react';
 import Close from '@rsuite/icons/Close';
 import IconButton from "../../IconButton/index.js";
 import { forwardRef } from "../utils/index.js";
-import { useClassNames } from "../hooks/index.js";
+import { useStyles } from "../hooks/index.js";
 import { useCustom } from "../../CustomProvider/index.js";
 /**
  * Close button for components such as Message and Notification.
@@ -21,13 +21,13 @@ const CloseButton = forwardRef((props, ref) => {
     getLocale
   } = useCustom();
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
     closeLabel
   } = getLocale('CloseButton', overrideLocale);
-  const classes = merge(className, withClassPrefix());
+  const classes = merge(className, withPrefix());
   if (Component === IconButton) {
     return /*#__PURE__*/React.createElement(IconButton, _extends({
       icon: /*#__PURE__*/React.createElement(Close, null),

package/esm/internals/Menu/MenuItem.d.ts

@@ -17,7 +17,7 @@ export interface MenuitemRenderProps {
  * Headless ARIA `menuitem`
  * @private
  */
-declare function MenuItem(props: MenuItemProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function MenuItem(props: MenuItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace MenuItem {
     var displayName: string;
 }

package/esm/internals/Menu/MenuItem.js

@@ -1,8 +1,8 @@
 'use client';
 import { useCallback, useContext, useEffect, useRef } from 'react';
 import isNil from 'lodash/isNil';
-import { useUniqueId } from "../hooks/index.js";
 import MenuContext, { MenuActionTypes, MoveFocusTo } from "./MenuContext.js";
+import { useUniqueId } from "../hooks/index.js";
 /**
  * Headless ARIA `menuitem`
  * @private

package/esm/internals/Menu/Menubar.js

@@ -30,7 +30,10 @@ export default function Menubar(_ref) {
     if (isFocusEntering(event) &&
     // Skip if focus is moving to a focusable element within this menu
     !(event.target !== event.currentTarget && isFocusableElement(event.target))) {
-      if (activeItemIndex === null) {
+      const disabled = event.target.getAttribute('aria-disabled');
+
+      // Skip if the item is disabled
+      if (activeItemIndex === null && disabled !== 'true') {
         dispatch({
           type: MenuActionTypes.MoveFocus,
           to: MoveFocusTo.First

package/esm/internals/Menu/useRenderMenuItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function useRenderMenuItem(Component: React.ElementType): (props: any, OverrideComponent?: React.ElementType) => React.JSX.Element;

package/esm/{Dropdown/useRenderDropdownItem.js → internals/Menu/useRenderMenuItem.js}

@@ -1,6 +1,6 @@
 'use client';
 import React, { useCallback } from 'react';
-export function useRenderDropdownItem(Component) {
+export function useRenderMenuItem(Component) {
   return useCallback((props, OverrideComponent) => {
     if (Component === 'li') {
       if (OverrideComponent) {

package/esm/internals/Overlay/Modal.js

@@ -1,12 +1,12 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import classNames from 'classnames';
 import contains from 'dom-lib/contains';
 import on from 'dom-lib/on';
 import ModalManager from "./ModalManager.js";
 import Fade from "../../Animation/Fade.js";
-import OverlayContext from "./OverlayContext.js";
+import { OverlayProvider } from "./OverlayProvider.js";
 import { KEY_VALUES } from "../constants/index.js";
 import { usePortal, useWillUnmount, useEventCallback } from "../hooks/index.js";
 import { forwardRef, mergeRefs, createChainedFunction } from "../utils/index.js";
@@ -115,8 +115,8 @@ const Modal = forwardRef((props, ref) => {
     }
     handleFocusDialog();
   });
-  const documentKeyDownListener = useRef();
-  const documentFocusListener = useRef();
+  const documentKeyDownListener = useRef(null);
+  const documentFocusListener = useRef(null);
   const handleOpen = useEventCallback(() => {
     if (containerElement) {
       modal.add(containerElement, containerClassName);
@@ -161,11 +161,9 @@ const Modal = forwardRef((props, ref) => {
   const handleExited = useCallback(() => {
     setExited(true);
   }, []);
-  const contextValue = useMemo(() => ({
-    overlayContainer: () => {
-      return modal.dialog;
-    }
-  }), [modal.dialog]);
+  const overlayContainer = useCallback(() => {
+    return modal.dialog;
+  }, [modal.dialog]);
   if (!mountModal) {
     return null;
   }
@@ -208,8 +206,8 @@ const Modal = forwardRef((props, ref) => {
     onEntering: onEntering,
     onEntered: onEntered
   }), children) : children;
-  return /*#__PURE__*/React.createElement(OverlayContext.Provider, {
-    value: contextValue
+  return /*#__PURE__*/React.createElement(OverlayProvider, {
+    overlayContainer: overlayContainer
   }, /*#__PURE__*/React.createElement(Portal, null, backdrop && renderBackdrop(), /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: mergeRefs(modal.setDialogRef, ref),
     style: style,

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

@@ -1,22 +1,21 @@
 import React from 'react';
-import { PositionChildProps } from './Position';
 import type { Placement, AnimationEventProps } from '../types';
-import type { CursorPosition } from './types';
+import type { CursorPosition, PositionChildProps } from './types';
 export interface OverlayProps extends AnimationEventProps {
     container?: HTMLElement | (() => HTMLElement | null) | null;
     children: React.ReactElement | ((props: PositionChildProps & React.HTMLAttributes<HTMLElement>, ref: React.RefCallback<HTMLElement>) => React.ReactElement);
     childrenProps?: React.HTMLAttributes<HTMLElement>;
     className?: string;
+    cursorPosition?: CursorPosition | null;
     containerPadding?: number;
+    followCursor?: boolean;
+    open?: boolean;
     placement?: Placement;
     preventOverflow?: boolean;
-    open?: boolean;
     rootClose?: boolean;
-    transition?: React.ElementType;
     triggerTarget?: React.RefObject<any>;
+    transition?: React.ElementType;
     onClose?: React.ReactEventHandler;
-    followCursor?: boolean;
-    cursorPosition?: CursorPosition | null;
 }
 /**
  * Overlay is a powerful component that helps you create floating components.

package/esm/internals/Overlay/Overlay.js

@@ -1,12 +1,12 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useState, useRef, useCallback, useContext } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import classNames from 'classnames';
 import Fade from "../../Animation/Fade.js";
-import OverlayContext from "./OverlayContext.js";
-import Position from "./Position.js";
+import Position, { getPositionStyle } from "./Position.js";
+import { useOverlay } from "./OverlayProvider.js";
 import { useRootClose } from "../hooks/index.js";
-import { mergeRefs } from "../utils/index.js";
+import { mergeRefs, mergeStyles } from "../utils/index.js";
 /**
  * Overlay is a powerful component that helps you create floating components.
  * @private
@@ -14,7 +14,7 @@ import { mergeRefs } from "../utils/index.js";
 const Overlay = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     overlayContainer
-  } = useContext(OverlayContext);
+  } = useOverlay();
   const {
     container = overlayContainer,
     containerPadding,
@@ -66,29 +66,34 @@ const Overlay = /*#__PURE__*/React.forwardRef((props, ref) => {
     cursorPosition
   };
   const renderChildWithPosition = (transitionProps, transitionRef) => {
+    const {
+      className
+    } = transitionProps || {};
     return /*#__PURE__*/React.createElement(Position, _extends({}, positionProps, transitionProps, {
       ref: mergeRefs(ref, transitionRef)
-    }), (childProps, childRef) => {
-      // overlayTarget is the ref on the DOM of the Overlay.
-      if (typeof children === 'function') {
-        return children(Object.assign(childProps, childrenProps), mergeRefs(childRef, overlayTarget));
-      }
-
+    }), (positionChildProps, childRef) => {
       // Position will return coordinates and className
       const {
         left,
-        top,
-        className
-      } = childProps;
-      return /*#__PURE__*/React.cloneElement(children, {
+        top
+      } = positionChildProps;
+
+      // Components returned by function children need to control their own positioning information. For example: Picker
+      if (typeof children === 'function') {
+        return children({
+          className,
+          //dataAttributes,
+          ...positionChildProps,
+          ...childrenProps
+        }, mergeRefs(childRef, overlayTarget));
+      }
+      const childElement = children;
+      const childStyles = mergeStyles(getPositionStyle(left, top), childElement.props.style);
+      return /*#__PURE__*/React.cloneElement(childElement, {
         ...childrenProps,
-        ...children.props,
-        className: classNames(className, children.props.className),
-        style: {
-          left,
-          top,
-          ...children.props.style
-        },
+        ...childElement.props,
+        className: classNames(childElement.props.className, className),
+        style: childStyles,
         ref: mergeRefs(childRef, overlayTarget)
       });
     });

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface OverlayContextProps {
+    overlayContainer?: () => HTMLElement | null;
+}
+interface OverlayProviderProps extends OverlayContextProps {
+    children: React.ReactNode;
+}
+export declare const OverlayProvider: {
+    (props: OverlayProviderProps): React.JSX.Element;
+    displayName: string;
+};
+export declare const useOverlay: () => OverlayContextProps;
+export {};

package/esm/internals/Overlay/OverlayProvider.js

@@ -0,0 +1,16 @@
+'use client';
+import React, { useContext } from 'react';
+const OverlayContext = /*#__PURE__*/React.createContext({});
+export const OverlayProvider = props => {
+  const {
+    overlayContainer,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(OverlayContext.Provider, {
+    value: {
+      overlayContainer
+    }
+  }, children);
+};
+export const useOverlay = () => useContext(OverlayContext);
+OverlayProvider.displayName = 'OverlayProvider';

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

@@ -1,7 +1,7 @@
 /// <reference types="node" />
 import React from 'react';
 import type { AnimationEventProps, StandardProps, Placement } from '../types';
-import type { PositionChildProps } from './Position';
+import type { OverlayTriggerHandle, PositionChildProps } from './types';
 export type OverlayTriggerType = 'click' | 'hover' | 'focus' | 'active' | 'contextMenu' | 'none';
 export interface OverlayTriggerProps extends Omit<StandardProps, 'children'>, AnimationEventProps {
     /** Triggering events */
@@ -72,15 +72,6 @@ export declare enum OverlayCloseCause {
     ClickOutside = 0,
     ImperativeHandle = 1
 }
-export interface OverlayTriggerHandle {
-    root?: HTMLElement | null;
-    updatePosition: () => void;
-    open: (delay?: number) => void;
-    close: (delay?: number) => void;
-    getState: () => {
-        open?: boolean;
-    };
-}
 /**
  * OverlayTrigger is used to display floating elements on another component.
  * @private

package/esm/internals/Overlay/OverlayTrigger.js

@@ -1,12 +1,12 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useRef, useEffect, useImperativeHandle, useCallback, useContext, useState, useMemo, isValidElement, cloneElement } from 'react';
+import React, { useRef, useEffect, useImperativeHandle, useCallback, useState, useMemo, isValidElement, cloneElement } from 'react';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
 import isUndefined from 'lodash/isUndefined';
 import contains from 'dom-lib/contains';
-import OverlayContext from "./OverlayContext.js";
 import Overlay from "./Overlay.js";
+import { useOverlay } from "./OverlayProvider.js";
 import { usePortal, useControlled } from "../hooks/index.js";
 import { createChainedFunction, isOneOf } from "../utils/index.js";
 import { isFragment } from "../utils/ReactChildren.js";
@@ -60,7 +60,7 @@ const defaultTrigger = ['hover', 'focus'];
 const OverlayTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     overlayContainer
-  } = useContext(OverlayContext);
+  } = useOverlay();
   const {
     children,
     container = overlayContainer,
@@ -98,7 +98,7 @@ const OverlayTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     container
   });
   const triggerRef = useRef(null);
-  const overlayRef = useRef();
+  const overlayRef = useRef(null);
   const [open, setOpen] = useControlled(openProp, defaultOpen);
   const [cursorPosition, setCursorPosition] = useState(null);
 
@@ -357,10 +357,11 @@ const OverlayTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
         "aria-describedby": controlId
       }, triggerEvents), children);
     }
-    return /*#__PURE__*/cloneElement(children, {
+    const childElement = children;
+    return /*#__PURE__*/cloneElement(childElement, {
       ref: triggerRef,
       'aria-describedby': controlId,
-      ...mergeEvents(triggerEvents, children.props)
+      ...mergeEvents(triggerEvents, childElement.props)
     });
   }, [children, controlId, triggerEvents]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement, /*#__PURE__*/React.createElement(Portal, null, renderOverlay()));

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

@@ -1,16 +1,12 @@
 import React from 'react';
 import type { Placement } from '../types';
-import type { CursorPosition } from './types';
-export interface PositionChildProps {
-    className: string;
-    left?: number;
-    top?: number;
-    arrowOffsetLeft?: number;
-    arrowOffsetTop?: number;
-}
+import type { CursorPosition, PositionChildProps } from './types';
+export declare const getPositionStyle: (x?: number, y?: number) => {
+    "--rs-position-x": string | undefined;
+    "--rs-position-y": string | undefined;
+};
 export interface PositionProps {
-    children: (props: PositionChildProps, ref: React.RefObject<HTMLElement>) => React.ReactElement;
-    className?: string;
+    children: (props: PositionChildProps, ref: React.RefObject<HTMLElement | null>) => React.ReactElement;
     container?: HTMLElement | (() => HTMLElement | null) | null;
     containerPadding?: number;
     placement?: Placement;

package/esm/internals/Overlay/Position.js

@@ -1,17 +1,22 @@
 'use client';
 import React, { useState, useEffect, useRef, useMemo, useCallback, useImperativeHandle } from 'react';
-import classNames from 'classnames';
 import getContainer from 'dom-lib/getContainer';
 import ownerDocument from 'dom-lib/ownerDocument';
-import removeClass from 'dom-lib/removeClass';
 import on from 'dom-lib/on';
-import addClass from 'dom-lib/addClass';
 import addStyle from 'dom-lib/addStyle';
 import isElement from "../../DOMHelper/isElement.js";
 import positionUtils from "./positionUtils.js";
 import { ResizeObserver } from '@juggle/resize-observer';
-import { getDOMNode } from "../utils/index.js";
+import { getDOMNode, kebabPlace } from "../utils/index.js";
 import { useUpdateEffect } from "../hooks/index.js";
+const CSS_POSITION_X = '--rs-position-x';
+const CSS_POSITION_Y = '--rs-position-y';
+export const getPositionStyle = (x, y) => {
+  return {
+    [CSS_POSITION_X]: x !== undefined ? `${x}px` : undefined,
+    [CSS_POSITION_Y]: y !== undefined ? `${y}px` : undefined
+  };
+};
 const usePosition = (props, ref) => {
   const {
     placement = 'right',
@@ -24,8 +29,9 @@ const usePosition = (props, ref) => {
   } = props;
   const containerRef = useRef(null);
   const lastTargetRef = useRef(null);
-  const overlayResizeObserver = useRef();
+  const overlayResizeObserver = useRef(null);
   const defaultPosition = {
+    placement,
     positionLeft: 0,
     positionTop: 0,
     arrowOffsetLeft: undefined,
@@ -63,16 +69,10 @@ const usePosition = (props, ref) => {
     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;
-      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, getPositionStyle(posi.positionLeft, posi.positionTop));
+      if (posi.placement) {
+        overlay.dataset.placement = kebabPlace(posi.placement);
       }
-      addStyle(overlay, {
-        left: `${posi.positionLeft}px`,
-        top: `${posi.positionTop}px`
-      });
     } else {
       setPosition(posi);
     }
@@ -114,18 +114,17 @@ const usePosition = (props, ref) => {
 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
+    positionTop,
+    placement
   } = position;
   useImperativeHandle(ref, () => ({
     get child() {
@@ -139,7 +138,7 @@ const Position = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [followCursor, cursorPosition, updatePosition]);
   if (typeof children === 'function') {
     const childProps = {
-      className: classNames(className, positionClassName),
+      placement,
       arrowOffsetLeft,
       arrowOffsetTop,
       left: positionLeft,

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

@@ -1,3 +1,5 @@
 import Overlay from './Overlay';
 export type { OverlayProps } from './Overlay';
+export * from './types';
+export { Overlay };
 export default Overlay;

package/esm/internals/Overlay/index.js

@@ -1,3 +1,10 @@
 'use client';
 import Overlay from "./Overlay.js";
+
+// export types
+
+export * from "./types.js";
+
+// export components
+export { Overlay };
 export default Overlay;

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

@@ -1,29 +1,11 @@
-import type { Offset, Placement } from '../types';
-import type { CursorPosition } from './types';
-export interface PositionType {
-    positionLeft?: number;
-    positionTop?: number;
-    arrowOffsetLeft?: number;
-    arrowOffsetTop?: number;
-    positionClassName?: string;
-}
-export interface UtilProps {
-    placement: Placement;
-    preventOverflow: boolean;
-    padding: number;
-}
+import type { Offset } from '../types';
+import type { CursorPosition, UtilProps, PositionType } from './types';
 export declare const AutoPlacement: {
     left: string;
     right: string;
     top: string;
     bottom: string;
 };
-export interface Dimensions {
-    width: number;
-    height: number;
-    scrollX: number;
-    scrollY: number;
-}
 declare const _default: (props: UtilProps) => {
     getPosition(target: HTMLElement, container: HTMLElement): import("dom-lib/getOffset").Offset | DOMRect | null;
     getCursorOffsetPosition(target: HTMLElement, container: HTMLElement, cursorPosition: CursorPosition): Offset;

package/esm/internals/Overlay/positionUtils.js

@@ -1,7 +1,6 @@
 'use client';
 import maxBy from 'lodash/maxBy';
 import minBy from 'lodash/minBy';
-import kebabCase from 'lodash/kebabCase';
 import ownerDocument from 'dom-lib/ownerDocument';
 import getOffset from 'dom-lib/getOffset';
 import scrollTop from 'dom-lib/scrollTop';
@@ -15,6 +14,7 @@ export const AutoPlacement = {
   top: 'Start',
   bottom: 'End'
 };
+
 /**
  * Get the external dimensions of the container
  * @param containerNode
@@ -294,11 +294,11 @@ export default props => {
         positionTop = nextTop + getTopDelta(nextTop, overlayHeight, container);
       }
       return {
+        placement: nextPlacement,
         positionLeft,
         positionTop,
         arrowOffsetLeft,
-        arrowOffsetTop,
-        positionClassName: `placement-${kebabCase(nextPlacement)}`
+        arrowOffsetTop
       };
     }
   };