diff --git a/packages/plasma-hope/api/plasma-hope.api.md b/packages/plasma-hope/api/plasma-hope.api.md index f1a158b7ed..ea66d26066 100644 --- a/packages/plasma-hope/api/plasma-hope.api.md +++ b/packages/plasma-hope/api/plasma-hope.api.md @@ -554,7 +554,7 @@ export { DisabledProps } export const Dropdown: FC; // @public -export const DropdownItem: FC; +export const DropdownItem: React_2.ForwardRefExoticComponent>; // @public (undocumented) export interface DropdownItemProps extends DropdownNodeType, Omit, HTMLLIElement>, 'onClick' | 'ref'> { diff --git a/packages/plasma-hope/src/components/Dropdown/DropdownItem.tsx b/packages/plasma-hope/src/components/Dropdown/DropdownItem.tsx index a20b0e7162..61de5b8c17 100644 --- a/packages/plasma-hope/src/components/Dropdown/DropdownItem.tsx +++ b/packages/plasma-hope/src/components/Dropdown/DropdownItem.tsx @@ -1,5 +1,5 @@ -import React, { useRef, useCallback, useMemo } from 'react'; -import type { DetailedHTMLProps, HTMLAttributes, ReactNode, FC, SyntheticEvent } from 'react'; +import React, { useRef, useCallback, useMemo, forwardRef } from 'react'; +import type { DetailedHTMLProps, HTMLAttributes, ReactNode, SyntheticEvent } from 'react'; import styled, { css } from 'styled-components'; import { body1, @@ -9,6 +9,7 @@ import { surfaceLiquid03, applyDisabled, applyEllipsis, + useForkRef, } from '@salutejs/plasma-core'; import { IconChevronRight, IconDone } from '@salutejs/plasma-icons'; @@ -130,25 +131,30 @@ const StyledDot = styled.div` /** * Элемент выпадающего списка. */ -export const DropdownItem: FC = ({ - value, - label, - isActive, - isDisabled, - isHovered, - color, - contentLeft, - items = [], - role = 'menuitem', - index, - onClick: onClickExternal, - onHover, - onFocus, - ...rest -}) => { +export const DropdownItem = forwardRef((props, outerRef) => { + const { + value, + label, + isActive, + isDisabled, + isHovered, + color, + contentLeft, + items = [], + role = 'menuitem', + index, + onClick: onClickExternal, + onHover, + onFocus, + ...rest + } = props; + const ref = useRef(null); + const forkRef = useForkRef(outerRef, ref); const hasItems = Boolean(items.length); + const isActiveAsSingleOrNode = Boolean(isActive || items.filter((item) => item.isActive)?.length); + const contentRight = useMemo(() => { if (hasItems) { return ( @@ -187,7 +193,7 @@ export const DropdownItem: FC = ({ return ( = ({ {contentRight} ); -}; +}); diff --git a/website/plasma-web-docs/docs/components/Dropdown.mdx b/website/plasma-web-docs/docs/components/Dropdown.mdx index 1ae9b3856f..8415714660 100644 --- a/website/plasma-web-docs/docs/components/Dropdown.mdx +++ b/website/plasma-web-docs/docs/components/Dropdown.mdx @@ -267,10 +267,10 @@ export function App() { } ``` -## Позицирование +## Позиционирование Помимо стандартных способов расположения, можно также указать значение `auto`, которое будет автоматически определять нужное расположение. -Если необходимо автоматически использовать лишь определенные раположения, то нужно передать массив расположений. Например: +Если необходимо автоматически использовать лишь определенные расположения, то нужно передать массив расположений. Например: ```tsx live import React from 'react'; @@ -341,3 +341,44 @@ export function App() { :::caution Для обеспечения корректной работы навигации с помощью клавиатуры необходимо указать свойство `id`. ::: + + +## Ref для DropdownItem + +Достаточно указать свойство `ref` на компоненте. + +```tsx live +import React, { useState, useRef } from 'react'; +import { DropdownPopup, DropdownList, DropdownItem, Button } from '@salutejs/plasma-web'; +import { IconHeart } from '@salutejs/plasma-icons'; + +export function App() { + const [isOpen, setIsOpen] = useState(false); + const dropDownItemRef = useRef(null); + + return ( +
+ setIsOpen(is)} + disclosure={
+ ); +} +```