fix(menuV2): search text prop

packages/ui/src/components/MenuV2/__stories__/Searchable.stories.tsx

@@ -1,12 +1,39 @@
 import type { StoryFn } from '@storybook/react'
 import { DotsHorizontalIcon } from '@ultraviolet/icons'
+import type { ComponentProps, ReactNode } from 'react'
 import { MenuV2 } from '..'
 import { AvatarV2 } from '../../AvatarV2'
+import { Badge } from '../../Badge'
 import { Button } from '../../Button'
 import { Stack } from '../../Stack'
+import limitation from './SerarchableLimitations.md?raw'
 
-export const Searchable: StoryFn<typeof MenuV2> = () => (
+type ItemProps = {
+  sentiment?: ComponentProps<typeof MenuV2.Item>['sentiment']
+  active?: boolean
+  colors: [string, string]
+  children: ReactNode
+  searchText?: string
+}
+
+const Item = ({
+  sentiment,
+  active,
+  colors,
+  children,
+  searchText,
+}: ItemProps) => (
+  <MenuV2.Item sentiment={sentiment} active={active} searchText={searchText}>
+    <Stack direction="row" gap={1} alignItems="center">
+      <AvatarV2 variant="colors" colors={colors} shape="circle" size="xsmall" />
+      {children}
+    </Stack>
+  </MenuV2.Item>
+)
+
+export const Searchable: StoryFn<typeof MenuV2> = props => (
   <MenuV2
+    {...props}
     align="start"
     searchable
     hideOnClickItem
@@ -16,40 +43,22 @@ export const Searchable: StoryFn<typeof MenuV2> = () => (
       </Button>
     }
   >
+    <Item
+      colors={['#BF95F9', '#3D1862']}
+      active
+      searchText="default project"
+      sentiment="primary"
+    >
+      <Stack direction="row" gap={1} alignItems="center">
+        Default Project
+        <Badge sentiment="success" size="small">
+          NEW
+        </Badge>
+      </Stack>
+    </Item>
     <MenuV2.Group label="Projects" emptyState="No project">
-      <MenuV2.Item sentiment="primary" active>
-        <Stack direction="row" gap={1} alignItems="center">
-          <AvatarV2
-            variant="colors"
-            colors={['#BF95F9', '#3D1862']}
-            shape="circle"
-            size="xsmall"
-          />
-          Default Project
-        </Stack>
-      </MenuV2.Item>
-      <MenuV2.Item>
-        <Stack direction="row" gap={1} alignItems="center">
-          <AvatarV2
-            variant="colors"
-            colors={['#FFBFAB', '#822F15']}
-            shape="circle"
-            size="xsmall"
-          />
-          Project 1
-        </Stack>
-      </MenuV2.Item>
-      <MenuV2.Item>
-        <Stack direction="row" gap={1} alignItems="center">
-          <AvatarV2
-            variant="colors"
-            colors={['#FF9EC1', '#740D32']}
-            shape="circle"
-            size="xsmall"
-          />
-          Project 2
-        </Stack>
-      </MenuV2.Item>
+      <Item colors={['#FFBFAB', '#822F15']}>Project 1</Item>
+      <Item colors={['#FF9EC1', '#740D32']}>Project 2</Item>
     </MenuV2.Group>
   </MenuV2>
 )
@@ -61,3 +70,11 @@ Searchable.decorators = [
     </div>
   ),
 ]
+
+Searchable.parameters = {
+  docs: {
+    description: {
+      story: limitation,
+    },
+  },
+}

packages/ui/src/components/MenuV2/__stories__/SerarchableLimitations.md

@@ -0,0 +1,42 @@
+You can add `searchable` prop to the MenuV2 component to enable searching through the items.\n\n If `MenuV2.Item` has a complex children (not a string) you can specify `searchText` on `MenuV2.Item` prop to search through the item.
+
+---
+
+### Limitations
+
+As we use JSX to render the UI, there are some limitations that we need to be aware of when using `searchable`.
+
+You cannot use a middleware component within `<MenuV2>`, for example: 
+
+```tsx
+const Item = ({ name, active }: ItemProps) => (
+  <MenuV2.Item sentiment="primary" active={active}>
+    <Stack direction="row" gap={1} alignItems="center">
+      <AvatarV2 variant="colors" colors={[]} shape="circle" size="xsmall" />
+      {name}
+    </Stack>
+  </MenuV2.Item>
+)
+
+export const Searchable: StoryFn<typeof MenuV2> = () => (
+  <MenuV2
+    align="start"
+    searchable
+    hideOnClickItem
+    disclosure={
+      <Button sentiment="neutral" variant="ghost" size="small">
+        <DotsHorizontalIcon />
+      </Button>
+    }
+  >
+    <Item name="Default Project" active></Item>
+    <MenuV2.Group label="Projects" emptyState="No project">
+      <Item name="Project 1" active={false} />
+      <Item name="Project 2" active={false} />
+      <Item name="Project 3" active={false} />
+    </MenuV2.Group>
+  </MenuV2>
+)
+```
+
+This will not work with search system because the `MenuV2.Item` component is not a direct child of `<MenuV2>`. The search system expects all items to be direct children of `<MenuV2>`.

packages/ui/src/components/MenuV2/__tests__/__snapshots__/index.test.tsx.snap

@@ -812,8 +812,8 @@ exports[`Menu > placement > renders bottom 1`] = `
     data-testid="testing"
   >
     <div
-      aria-controls="menu-«r1n»"
-      aria-describedby="menu-«r1n»"
+      aria-controls="menu-«r20»"
+      aria-describedby="menu-«r20»"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -871,8 +871,8 @@ exports[`Menu > placement > renders left 1`] = `
     data-testid="testing"
   >
     <div
-      aria-controls="menu-«r1q»"
-      aria-describedby="menu-«r1q»"
+      aria-controls="menu-«r23»"
+      aria-describedby="menu-«r23»"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -930,8 +930,8 @@ exports[`Menu > placement > renders right 1`] = `
     data-testid="testing"
   >
     <div
-      aria-controls="menu-«r1t»"
-      aria-describedby="menu-«r1t»"
+      aria-controls="menu-«r26»"
+      aria-describedby="menu-«r26»"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -989,8 +989,8 @@ exports[`Menu > placement > renders top 1`] = `
     data-testid="testing"
   >
     <div
-      aria-controls="menu-«r1k»"
-      aria-describedby="menu-«r1k»"
+      aria-controls="menu-«r1t»"
+      aria-describedby="menu-«r1t»"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -1258,8 +1258,8 @@ exports[`Menu > renders with footer 1`] = `
     data-testid="testing"
   >
     <div
-      aria-controls="menu-«r1h»"
-      aria-describedby="menu-«r1h»"
+      aria-controls="menu-«r1q»"
+      aria-describedby="menu-«r1q»"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -1310,6 +1310,53 @@ exports[`Menu > renders with visible=false 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Menu > should search and find item using searchText 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  display: inherit;
+}
+
+.emotion-0[data-container-full-height="true"] {
+  height: 100%;
+}
+
+.emotion-0[data-container-full-width="true"] {
+  width: 100%;
+}
+
+.emotion-0 {
+  display: inherit;
+}
+
+.emotion-0[data-container-full-height="true"] {
+  height: 100%;
+}
+
+.emotion-0[data-container-full-width="true"] {
+  width: 100%;
+}
+
+<div
+    data-testid="testing"
+  >
+    <div
+      aria-controls="menu-menu"
+      aria-describedby="menu-menu"
+      class="emotion-0 emotion-1"
+      tabindex="-1"
+    >
+      <button
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        type="button"
+      >
+        Menu
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Menu > should search on simple childs 1`] = `
 <DocumentFragment>
   .emotion-0 {
@@ -1446,8 +1493,8 @@ exports[`Menu > sizes > renders large 1`] = `
     data-testid="testing"
   >
     <div
-      aria-controls="menu-«r26»"
-      aria-describedby="menu-«r26»"
+      aria-controls="menu-«r2f»"
+      aria-describedby="menu-«r2f»"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -1505,8 +1552,8 @@ exports[`Menu > sizes > renders medium 1`] = `
     data-testid="testing"
   >
     <div
-      aria-controls="menu-«r23»"
-      aria-describedby="menu-«r23»"
+      aria-controls="menu-«r2c»"
+      aria-describedby="menu-«r2c»"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >
@@ -1564,8 +1611,8 @@ exports[`Menu > sizes > renders small 1`] = `
     data-testid="testing"
   >
     <div
-      aria-controls="menu-«r20»"
-      aria-describedby="menu-«r20»"
+      aria-controls="menu-«r29»"
+      aria-describedby="menu-«r29»"
       class="emotion-0 emotion-1"
       tabindex="-1"
     >

packages/ui/src/components/MenuV2/__tests__/index.test.tsx

@@ -206,6 +206,45 @@ describe('Menu', () => {
     expect(items.length).toBe(1)
     expect(items[0]).toHaveTextContent('Disk')
   })
+
+  test('should search and find item using searchText', async () => {
+    const { asFragment } = renderWithTheme(
+      <MenuV2
+        id="menu"
+        searchable
+        disclosure={() => <button type="button">Menu</button>}
+      >
+        <MenuV2.Item searchText="Disk">
+          <div>
+            <div>Volume type</div>
+          </div>
+        </MenuV2.Item>
+        <MenuV2.Item>
+          <div>
+            <div>Memory type</div>
+          </div>
+        </MenuV2.Item>
+      </MenuV2>,
+    )
+    const menuButton = screen.getByRole<HTMLButtonElement>('button')
+    // Open Menu
+    await userEvent.click(menuButton)
+    const dialog = screen.getByRole('dialog')
+
+    await waitFor(() => {
+      expect(dialog).toBeVisible()
+    })
+
+    expect(asFragment()).toMatchSnapshot()
+
+    const searchInput = screen.getByRole<HTMLInputElement>('textbox')
+    await userEvent.type(searchInput, 'Disk')
+
+    const items = screen.getAllByRole<HTMLButtonElement>('menuitem')
+    expect(items.length).toBe(1)
+    expect(items[0]).toHaveTextContent('Volume type')
+  })
+
   test('renders with footer', () =>
     shouldMatchEmotionSnapshot(
       <MenuV2

packages/ui/src/components/MenuV2/components/Item.tsx

@@ -117,6 +117,10 @@ type ItemProps = {
   sentiment?: MenuItemSentiment
   active?: boolean
   'data-testid'?: string
+  /**
+   * If you children is complex and you want to specify the search text use this prop.
+   */
+  searchText?: string
 }
 
 const Item = forwardRef<HTMLElement, ItemProps>(
@@ -133,6 +137,7 @@ const Item = forwardRef<HTMLElement, ItemProps>(
       tooltip,
       active,
       className,
+      searchText,
       'data-testid': dataTestId,
     },
     ref,
@@ -154,7 +159,7 @@ const Item = forwardRef<HTMLElement, ItemProps>(
 
     if (href && !disabled) {
       return (
-        <Container borderless={borderless}>
+        <Container borderless={borderless} data-search-text={searchText}>
           <Tooltip text={tooltip}>
             <StyledLinkItem
               data-active={active}
@@ -178,7 +183,7 @@ const Item = forwardRef<HTMLElement, ItemProps>(
     }
 
     return (
-      <Container borderless={borderless}>
+      <Container borderless={borderless} data-search-text={searchText}>
         <Tooltip text={tooltip}>
           <StyledItem
             type="button"

packages/ui/src/components/MenuV2/helpers.ts

@@ -15,7 +15,17 @@ export const searchChildren = (
     }
 
     if (isValidElement(child)) {
-      const childProps = child.props as { children: ReactNode; label?: string }
+      const childProps = child.props as {
+        children: ReactNode
+        label?: string
+        searchText?: string
+      }
+
+      if (childProps?.searchText?.match(searchRegex)) {
+        return cloneElement(child, {
+          children: childProps.children,
+        } as { children: ReactNode })
+      }
 
       // This is the case where there is a Menu.Group we want to search the Menu.Item only
       if (childProps?.label) {