feat(UIKIT-1663,MenuItem): Добавлен note (#1082)

packages/components/src/DropdownButton/DropdownButton.stories.tsx

@@ -70,6 +70,52 @@ export const StartIcon = () => {
   );
 };
 
+export const Note = () => {
+  const dropdownItems = (
+    <>
+      <MenuItem note="Перейти в профиль" onClick={() => console.log('v1')}>
+        Профиль
+      </MenuItem>
+      <MenuItem onClick={() => console.log('v3')}>Выход</MenuItem>
+    </>
+  );
+
+  return (
+    <DropdownButton
+      startIcon={<DialogOutlineMd />}
+      variant="light"
+      name="With icon"
+    >
+      {dropdownItems}
+    </DropdownButton>
+  );
+};
+
+export const DisableReason = () => {
+  const dropdownItems = (
+    <>
+      <MenuItem
+        disabledReason="Заблокировано"
+        disabled
+        onClick={() => console.log('v1')}
+      >
+        Профиль
+      </MenuItem>
+      <MenuItem onClick={() => console.log('v3')}>Выход</MenuItem>
+    </>
+  );
+
+  return (
+    <DropdownButton
+      startIcon={<DialogOutlineMd />}
+      variant="light"
+      name="With icon"
+    >
+      {dropdownItems}
+    </DropdownButton>
+  );
+};
+
 /** Для стилизации основной кнопки доступны ButtonProps */
 export const ButtonProps = () => (
   <Grid container rowSpacing={5}>

packages/components/src/MenuItem/MenuItem.stories.tsx

@@ -52,6 +52,28 @@ export const Example = () => {
   );
 };
 
+/**
+ * prop ```note``` выводит Tooltip на не заблокированном элементе меню
+ */
+export const Note = () => {
+  return (
+    <MenuList>
+      <MenuItem note="Перейти в профиль">
+        <ListItemIcon>
+          <ProfileOutlineMd />
+        </ListItemIcon>
+        Мой профиль
+      </MenuItem>
+      <MenuItem>
+        <ListItemIcon>
+          <ProfileOutlineMd />
+        </ListItemIcon>
+        Выход
+      </MenuItem>
+    </MenuList>
+  );
+};
+
 export const Selected = () => {
   return (
     <MenuList>

packages/components/src/MenuItem/MenuItem.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { renderWithTheme, screen, userEvents } from '@astral/tests';
+
+import { MenuItem } from './MenuItem';
+
+describe('MenuItem', () => {
+  it('Tooltip отображается если передан note и disabled=false', async () => {
+    const label = 'Мой профиль';
+
+    renderWithTheme(<MenuItem note="Перейти в профиль">{label}</MenuItem>);
+
+    const item = screen.getByText(label);
+
+    await userEvents.hover(item);
+
+    const tooltip = await screen.findByRole('tooltip');
+
+    expect(tooltip).toBeVisible();
+    expect(tooltip).toHaveTextContent('Перейти в профиль');
+  });
+
+  it('Tooltip отображается если передан disabledReason и disabled=true', async () => {
+    const label = 'Мой профиль';
+
+    renderWithTheme(
+      <MenuItem disabled disabledReason="Заблокировано">
+        {label}
+      </MenuItem>,
+    );
+
+    const item = screen.getByLabelText('Заблокировано');
+
+    await userEvents.hover(item);
+
+    const tooltip = await screen.findByRole('tooltip');
+
+    expect(tooltip).toBeVisible();
+    expect(tooltip).toHaveTextContent('Заблокировано');
+  });
+});

packages/components/src/MenuItem/MenuItem.tsx

@@ -18,6 +18,14 @@ export type MenuItemProps<TComponent extends ElementType = ElementType> =
      * Текст тултипа при заблокированном состоянии элемента меню
      */
     disabledReason?: string;
+    /**
+     * Текст тултипа при наведении на элемент меню
+     */
+    note?: string;
+    /**
+     * Позиционирование тултипа
+     * @default left
+     */
     tooltipPlacement?: TooltipProps['placement'];
     /**
      * Тип элемента
@@ -38,15 +46,16 @@ const InnerMenuItem = <TComponent extends ElementType>(
     disabled,
     component = 'div',
     title,
-    tooltipPlacement,
+    tooltipPlacement = 'left',
+    note,
     ...rest
   } = props;
 
   return (
     <li>
       <Tooltip
         key={title}
-        title={disabled && disabledReason}
+        title={disabled ? disabledReason : note}
         placement={tooltipPlacement}
         withoutContainer={!disabled}
       >