diff --git a/src/components/DropdownMenu/DropdownMenuItem.tsx b/src/components/DropdownMenu/DropdownMenuItem.tsx index 41f84eb79e..e9a4d4a04d 100644 --- a/src/components/DropdownMenu/DropdownMenuItem.tsx +++ b/src/components/DropdownMenu/DropdownMenuItem.tsx @@ -1,15 +1,15 @@ import React from 'react'; -import {ChevronRight} from '@gravity-ui/icons'; +import {ChevronLeft, ChevronRight} from '@gravity-ui/icons'; import {Icon} from '../Icon'; import {Menu} from '../Menu'; -import type {PopupProps} from '../Popup'; +import type {PopupPlacement, PopupProps} from '../Popup'; +import {useDirection} from '../theme'; import {cnDropdownMenu} from './DropdownMenu.classname'; import {DropdownMenuContext} from './DropdownMenuContext'; import {DropdownMenuPopup} from './DropdownMenuPopup'; -import {subMenuPlacement} from './constants'; import {useSubmenu} from './hooks/useSubmenu'; import type {DropdownMenuListItem} from './types'; @@ -32,6 +32,7 @@ export const DropdownMenuItem = ({ }: DropdownMenuItemProps) => { const {toggle, data} = React.useContext(DropdownMenuContext); const menuItemRef = React.useRef(null); + const direction = useDirection(); const {hasSubmenu, isSubmenuOpen, closeSubmenu, openSubmenu} = useSubmenu({ items: subMenuItems, @@ -92,10 +93,23 @@ export const DropdownMenuItem = ({ }; }, [props.extraProps, closeSubmenu, hasSubmenu, openSubmenu]); - const iconEnd = hasSubmenu ? ( - - ) : ( - props.iconEnd + const subMenuPlacement = React.useMemo( + () => (direction === 'rtl' ? ['left-start', 'right-start'] : ['right-start', 'left-start']), + [direction], + ); + + const iconEnd = React.useMemo( + () => + hasSubmenu ? ( + + ) : ( + props.iconEnd + ), + [hasSubmenu, direction, props.iconEnd], ); return ( diff --git a/src/components/DropdownMenu/constants.ts b/src/components/DropdownMenu/constants.ts index 2a4c773236..0f99827616 100644 --- a/src/components/DropdownMenu/constants.ts +++ b/src/components/DropdownMenu/constants.ts @@ -1,7 +1,3 @@ -import type {PopperPlacement} from '../../hooks/private'; - import type {DropdownMenuListItem} from './types'; -export const subMenuPlacement: PopperPlacement = ['right-start', 'left-start']; - export const dropdownMenuSeparator: DropdownMenuListItem = {text: '', action: () => {}, path: []};