plasma-web: Pass ref to DropdownItem

packages/plasma-hope/api/plasma-hope.api.md

@@ -554,7 +554,7 @@ export { DisabledProps }
 export const Dropdown: FC<DropdownProps>;
 
 // @public
-export const DropdownItem: FC<DropdownItemProps>;
+export const DropdownItem: React_2.ForwardRefExoticComponent<DropdownItemProps & React_2.RefAttributes<HTMLLIElement>>;
 
 // @public (undocumented)
 export interface DropdownItemProps extends DropdownNodeType, Omit<DetailedHTMLProps<HTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'onClick' | 'ref'> {

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<DropdownItemProps> = ({
-    value,
-    label,
-    isActive,
-    isDisabled,
-    isHovered,
-    color,
-    contentLeft,
-    items = [],
-    role = 'menuitem',
-    index,
-    onClick: onClickExternal,
-    onHover,
-    onFocus,
-    ...rest
-}) => {
+export const DropdownItem = forwardRef<HTMLLIElement, DropdownItemProps>((props, outerRef) => {
+    const {
+        value,
+        label,
+        isActive,
+        isDisabled,
+        isHovered,
+        color,
+        contentLeft,
+        items = [],
+        role = 'menuitem',
+        index,
+        onClick: onClickExternal,
+        onHover,
+        onFocus,
+        ...rest
+    } = props;
+
     const ref = useRef<HTMLLIElement>(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<DropdownItemProps> = ({
     return (
         <StyledDropdownItem
             {...rest}
-            ref={ref}
+            ref={forkRef}
             $withAssistive={Boolean(onHover)}
             $hover={isHovered}
             $disabled={isDisabled}
@@ -205,4 +211,4 @@ export const DropdownItem: FC<DropdownItemProps> = ({
             {contentRight}
         </StyledDropdownItem>
     );
-};
+});

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<HTMLLIElement | null>(null);
+
+    return (
+        <div style={{ height:"350px", display: 'block' }}>
+            <DropdownPopup
+                isOpen={isOpen}
+                trigger="click"
+                placement="bottom"
+                onToggle={(is) => setIsOpen(is)}
+                disclosure={<Button text="Меню" />}
+            >
+                <DropdownList>
+                    <DropdownItem value={100001} label="Новости" />
+                    <DropdownItem value={100002} label="Каталог" color="var(--plasma-colors-accent)" />
+                    <DropdownItem
+                        value={100003}
+                        label="О нас"
+                        color="var(--plasma-colors-critical)"
+                        contentLeft={<IconHeart color="inherit" />}
+                        ref={dropDownItemRef}
+                    />
+                    <DropdownItem value={100004} label="Недоступно" isDisabled />
+                </DropdownList>
+            </DropdownPopup>
+        </div>
+    );
+}
+```