@@ -1221,8 +1299,8 @@ exports[`Menu > sizes > renders medium 1`] = `
data-testid="testing"
>
@@ -1268,8 +1346,8 @@ exports[`Menu > sizes > renders small 1`] = `
data-testid="testing"
>
diff --git a/packages/ui/src/components/MenuV2/__tests__/index.test.tsx b/packages/ui/src/components/MenuV2/__tests__/index.test.tsx
index d11300ba2f..c2baef9fe0 100644
--- a/packages/ui/src/components/MenuV2/__tests__/index.test.tsx
+++ b/packages/ui/src/components/MenuV2/__tests__/index.test.tsx
@@ -101,6 +101,103 @@ describe('Menu', () => {
})
})
+ test('should hideOnClickItem', async () => {
+ renderWithTheme(
+ ,
+ )
+ const menuButton = screen.getByRole
('button')
+ // Open Menu
+ await userEvent.click(menuButton)
+ const dialog = screen.getByRole('dialog')
+
+ await waitFor(() => {
+ expect(dialog).toBeVisible()
+ })
+
+ const item = screen.getByRole('menuitem')
+ await userEvent.click(item)
+
+ await waitFor(() => {
+ expect(dialog).not.toBeVisible()
+ })
+ })
+
+ test('should search on simple childs', async () => {
+ const { asFragment } = renderWithTheme(
+ ,
+ )
+ const menuButton = screen.getByRole('button')
+ // Open Menu
+ await userEvent.click(menuButton)
+ const dialog = screen.getByRole('dialog')
+
+ await waitFor(() => {
+ expect(dialog).toBeVisible()
+ })
+
+ expect(asFragment()).toMatchSnapshot()
+
+ const searchInput = screen.getByRole('textbox')
+ await userEvent.type(searchInput, 'Disk')
+
+ const items = screen.getAllByRole('menuitem')
+ expect(items.length).toBe(1)
+ expect(items[0]).toHaveTextContent('Disk')
+ })
+
+ test('should search on simple complex childs', async () => {
+ const { asFragment } = renderWithTheme(
+ ,
+ )
+ const menuButton = screen.getByRole('button')
+ // Open Menu
+ await userEvent.click(menuButton)
+ const dialog = screen.getByRole('dialog')
+
+ await waitFor(() => {
+ expect(dialog).toBeVisible()
+ })
+
+ expect(asFragment()).toMatchSnapshot()
+
+ const searchInput = screen.getByRole('textbox')
+ await userEvent.type(searchInput, 'Disk')
+
+ const items = screen.getAllByRole('menuitem')
+ expect(items.length).toBe(1)
+ expect(items[0]).toHaveTextContent('Disk')
+ })
+
describe('placement', () => {
test('renders top', () =>
shouldMatchEmotionSnapshot(
diff --git a/packages/ui/src/components/MenuV2/Group.tsx b/packages/ui/src/components/MenuV2/components/Group.tsx
similarity index 94%
rename from packages/ui/src/components/MenuV2/Group.tsx
rename to packages/ui/src/components/MenuV2/components/Group.tsx
index 417b489b90..e3ad31512a 100644
--- a/packages/ui/src/components/MenuV2/Group.tsx
+++ b/packages/ui/src/components/MenuV2/components/Group.tsx
@@ -1,6 +1,6 @@
import styled from '@emotion/styled'
import type { ReactNode } from 'react'
-import { Text } from '../Text'
+import { Text } from '../../Text'
const Container = styled.span`
padding: ${({ theme }) => `${theme.space['0.5']} ${theme.space['1.5']}`};
diff --git a/packages/ui/src/components/MenuV2/Item.tsx b/packages/ui/src/components/MenuV2/components/Item.tsx
similarity index 84%
rename from packages/ui/src/components/MenuV2/Item.tsx
rename to packages/ui/src/components/MenuV2/components/Item.tsx
index c131264a1d..24b0cb9b3c 100644
--- a/packages/ui/src/components/MenuV2/Item.tsx
+++ b/packages/ui/src/components/MenuV2/components/Item.tsx
@@ -1,8 +1,9 @@
import type { Theme } from '@emotion/react'
import styled from '@emotion/styled'
-import type { MouseEventHandler, ReactNode, Ref } from 'react'
-import { forwardRef } from 'react'
-import { Tooltip } from '../Tooltip'
+import type { MouseEvent, MouseEventHandler, ReactNode, Ref } from 'react'
+import { forwardRef, useCallback } from 'react'
+import { Tooltip } from '../../Tooltip'
+import { useMenu } from '../MenuProvider'
type MenuItemSentiment = 'neutral' | 'primary' | 'danger'
@@ -130,6 +131,21 @@ const Item = forwardRef(
},
ref,
) => {
+ const { hideOnClickItem, setIsVisible } = useMenu()
+
+ const onClickHandle = useCallback(
+ (event: MouseEvent) => {
+ if (disabled) return undefined
+ onClick?.(event)
+ if (hideOnClickItem) {
+ setIsVisible(false)
+ }
+
+ return undefined
+ },
+ [disabled, hideOnClickItem, onClick, setIsVisible],
+ )
+
if (href && !disabled) {
return (
@@ -139,11 +155,7 @@ const Item = forwardRef(
borderless
href={href}
ref={ref as Ref}
- onClick={
- disabled
- ? undefined
- : (onClick as MouseEventHandler)
- }
+ onClick={onClickHandle}
role="menuitem"
disabled={disabled}
sentiment={sentiment}
@@ -165,7 +177,12 @@ const Item = forwardRef(
ref={ref as Ref}
role="menuitem"
disabled={disabled}
- onClick={onClick}
+ onClick={event => {
+ onClick?.(event)
+ if (hideOnClickItem) {
+ setIsVisible(false)
+ }
+ }}
borderless={borderless}
sentiment={sentiment}
className={className}
diff --git a/packages/ui/src/components/MenuV2/constants.ts b/packages/ui/src/components/MenuV2/constants.ts
new file mode 100644
index 0000000000..e0473ad9c0
--- /dev/null
+++ b/packages/ui/src/components/MenuV2/constants.ts
@@ -0,0 +1,5 @@
+export const SIZES = {
+ small: '180px',
+ medium: '280px',
+ large: '380px',
+}
diff --git a/packages/ui/src/components/MenuV2/helpers.ts b/packages/ui/src/components/MenuV2/helpers.ts
new file mode 100644
index 0000000000..778244b748
--- /dev/null
+++ b/packages/ui/src/components/MenuV2/helpers.ts
@@ -0,0 +1,30 @@
+import { Children, type ReactNode, isValidElement } from 'react'
+
+/**
+ * Search inside a children (React Element) recursively until a result is found
+ */
+export const searchChildren = (
+ children: ReactNode,
+ searchString: string,
+): ReactNode[] => {
+ const matches: ReactNode[] = []
+ const searchRegex = new RegExp(searchString, 'i')
+
+ Children.forEach(children, child => {
+ if (typeof child === 'string' && child.match(searchRegex)) {
+ matches.push(child)
+ } else if (isValidElement(child)) {
+ const childProps = child.props as { children: ReactNode }
+
+ // Recursively search the children of this element
+ const childMatches = searchChildren(childProps.children, searchString)
+
+ if (childMatches.length > 0) {
+ // If any matches are found within this child's children, push the entire child element
+ matches.push(child)
+ }
+ }
+ })
+
+ return matches
+}
diff --git a/packages/ui/src/components/MenuV2/index.tsx b/packages/ui/src/components/MenuV2/index.tsx
index 56c89c753a..1c7e7a6d17 100644
--- a/packages/ui/src/components/MenuV2/index.tsx
+++ b/packages/ui/src/components/MenuV2/index.tsx
@@ -1,209 +1,22 @@
-import styled from '@emotion/styled'
-import type {
- ButtonHTMLAttributes,
- ComponentProps,
- MouseEvent,
- ReactElement,
- ReactNode,
- Ref,
-} from 'react'
-import {
- cloneElement,
- forwardRef,
- isValidElement,
- useId,
- useImperativeHandle,
- useRef,
- useState,
-} from 'react'
-import { Popup } from '../Popup'
-import { Stack } from '../Stack'
-import { Group } from './Group'
-import Item from './Item'
-
-const SIZES = {
- small: '180px',
- medium: '280px',
- large: '380px',
-}
-
-export type DisclosureProps = { visible: boolean }
-
-type DisclosureElement =
- | ((
- disclosure: DisclosureProps,
- ) => ReactElement>)
- | (ReactElement> & {
- ref?: Ref
- })
-
-const StyledPopup = styled(Popup, {
- shouldForwardProp: prop => !['size'].includes(prop),
-})<{ size: keyof typeof SIZES }>`
- background-color: ${({ theme }) => theme.colors.other.elevation.background.raised};
- box-shadow: ${({ theme }) => `${theme.shadows.raised[0]}, ${theme.shadows.raised[1]}`};
- padding: 0;
-
- &[data-has-arrow='true'] {
- &::after {
- border-color: ${({ theme }) => theme.colors.other.elevation.background.raised}
- transparent transparent transparent;
- }
- }
-
- width: ${({ size }) => SIZES[size]};
- max-width: none;
- padding: ${({ theme }) => `${theme.space['0.25']} 0`};
-`
-
-const MenuList = styled(Stack)`
- overflow-y: auto;
- overflow-x: hidden;
- &:after,
- &:before {
- border: solid transparent;
- border-width: 9px;
- content: ' ';
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- }
-
- &:after {
- border-color: transparent;
- }
- &:before {
- border-color: transparent;
- }
- background-color: ${({ theme }) =>
- theme.colors.other.elevation.background.raised};
- color: ${({ theme }) => theme.colors.neutral.text};
- border-radius: ${({ theme }) => theme.radii.default};
- position: relative;
-`
-
-type ChildMenuProps = {
- toggle: () => void
-}
-
-type MenuProps = {
- id?: string
- ariaLabel?: string
- children?: ReactNode | (({ toggle }: ChildMenuProps) => ReactNode)
- className?: string
- disclosure: DisclosureElement
- hasArrow?: boolean
- visible?: boolean
- 'data-testid'?: string
- maxHeight?: string
- /**
- * @deprecated: use `size` instead
- */
- maxWidth?: string
- /**
- * By default, the portal target is children container or document.body if children is a function. You can override this
- * behavior by setting a portalTarget prop.
- */
- portalTarget?: HTMLElement
- size?: keyof typeof SIZES
- /**
- * The behavior of the menu when it is opened. If set to `click`, the menu will open when the user clicks on the disclosure.
- * If set to `hover`, the menu will open when the user hovers over the disclosure.
- */
- triggerMethod?: 'click' | 'hover'
-} & Pick<
- ComponentProps,
- 'placement' | 'dynamicDomRendering' | 'align'
->
-
-const FwdMenu = forwardRef(
+import type { Ref } from 'react'
+import { forwardRef } from 'react'
+import { Menu } from './MenuContent'
+import { MenuProvider } from './MenuProvider'
+import { Group } from './components/Group'
+import Item from './components/Item'
+import type { MenuProps } from './types'
+
+const Component = forwardRef(
(
- {
- id,
- ariaLabel = 'Menu',
- children,
- disclosure,
- hasArrow = false,
- placement = 'bottom',
- visible = false,
- className,
- 'data-testid': dataTestId,
- maxHeight,
- maxWidth,
- portalTarget = document.body,
- size = 'small',
- triggerMethod = 'click',
- dynamicDomRendering,
- align,
- }: MenuProps,
- ref: Ref,
- ) => {
- const [isVisible, setIsVisible] = useState(visible)
- const popupRef = useRef(null)
- const disclosureRef = useRef(null)
- const tempId = useId()
- const finalId = `menu-${id ?? tempId}`
-
- // if you need dialog inside your component, use function, otherwise component is fine
- const target = isValidElement>(
- disclosure,
- )
- ? disclosure
- : disclosure({ visible: isVisible })
- const innerRef = useRef(target as unknown as HTMLButtonElement)
- useImperativeHandle(ref, () => innerRef.current)
-
- const finalDisclosure = cloneElement(target, {
- onClick: (event: MouseEvent) => {
- target.props.onClick?.(event)
- setIsVisible(!isVisible)
- },
- 'aria-haspopup': 'dialog',
- 'aria-expanded': isVisible,
- // @ts-expect-error not sure how to fix this
- ref: disclosureRef,
- })
-
- return (
- setIsVisible(false)}
- tabIndex={-1}
- maxHeight={maxHeight ?? '480px'}
- maxWidth={maxWidth}
- size={size}
- text={
-
- {typeof children === 'function'
- ? children({ toggle: () => setIsVisible(!isVisible) })
- : children}
-
- }
- portalTarget={portalTarget}
- dynamicDomRendering={dynamicDomRendering}
- align={align}
- >
- {finalDisclosure}
-
- )
- },
+ { children, visible, hideOnClickItem, ...props }: MenuProps,
+ ref: Ref,
+ ) => (
+
+
+
+ ),
)
-/**
- * A menu is a widget that offers a list of choices to the user, such as a set of actions or functions.
- * A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a
- * sub menu, or by invoking a command, such as `Shift + F10` on Windows, that opens a context specific menu.
- * When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
- */
-export const MenuV2 = Object.assign(FwdMenu, { Item, Group })
+export const MenuV2 = Object.assign(Component, { Item, Group })
diff --git a/packages/ui/src/components/MenuV2/types.ts b/packages/ui/src/components/MenuV2/types.ts
new file mode 100644
index 0000000000..aa8fdcad7b
--- /dev/null
+++ b/packages/ui/src/components/MenuV2/types.ts
@@ -0,0 +1,65 @@
+import type {
+ ButtonHTMLAttributes,
+ ComponentProps,
+ ReactElement,
+ ReactNode,
+ Ref,
+} from 'react'
+import type { Popup } from '../Popup'
+import type { SIZES } from './constants'
+
+type ChildMenuProps = {
+ toggle: () => void
+}
+
+type DisclosureElement =
+ | ((
+ disclosure: DisclosureProps,
+ ) => ReactElement>)
+ | (ReactElement> & {
+ ref?: Ref
+ })
+
+export type DisclosureProps = { visible: boolean }
+
+export type MenuProps = {
+ id?: string
+ ariaLabel?: string
+ /*
+ * CHILDREN AS FUNCTION IS DEPRECATED: use `hideOnClickWithin` prop instead
+ */
+ children?: ReactNode | (({ toggle }: ChildMenuProps) => ReactNode)
+ className?: string
+ disclosure: DisclosureElement
+ hasArrow?: boolean
+ visible?: boolean
+ 'data-testid'?: string
+ maxHeight?: string
+ /**
+ * @deprecated: use `size` instead
+ */
+ maxWidth?: string
+ /**
+ * By default, the portal target is children container or document.body if children is a function. You can override this
+ * behavior by setting a portalTarget prop.
+ */
+ portalTarget?: HTMLElement
+ size?: keyof typeof SIZES
+ /**
+ * The behavior of the menu when it is opened. If set to `click`, the menu will open when the user clicks on the disclosure.
+ * If set to `hover`, the menu will open when the user hovers over the disclosure.
+ */
+ triggerMethod?: 'click' | 'hover'
+ /**
+ * If set to true, the menu will be searchable. This will add a search input at the top of the menu.
+ * This doesn't work when children is a function.
+ */
+ searchable?: boolean
+ /**
+ * When set to true the menu will automatically close when a `MenuV2.Item` is clicked.
+ */
+ hideOnClickItem?: boolean
+} & Pick<
+ ComponentProps,
+ 'placement' | 'dynamicDomRendering' | 'align'
+>
diff --git a/packages/ui/src/components/Tabs/TabMenuItem.tsx b/packages/ui/src/components/Tabs/TabMenuItem.tsx
index 938fbcb451..9ccdb69162 100644
--- a/packages/ui/src/components/Tabs/TabMenuItem.tsx
+++ b/packages/ui/src/components/Tabs/TabMenuItem.tsx
@@ -1,10 +1,10 @@
import styled from '@emotion/styled'
import type { ComponentProps } from 'react'
import { useMemo } from 'react'
-import Item from '../MenuV2/Item'
+import { MenuV2 } from '../MenuV2'
import { useTabsContext } from './TabsContext'
-const StyledMenuItem = styled(Item)`
+const StyledMenuItem = styled(MenuV2.Item)`
&[aria-selected='true'] {
color: ${({ theme }) => theme.colors.primary.text};
}
diff --git a/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
index cd5d25fe22..aafa6f9cdd 100644
--- a/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Tabs/__tests__/__snapshots__/index.test.tsx.snap
@@ -2435,31 +2435,33 @@ exports[`Tabs > renders correctly with Tabs with prop 1`] = `
role="dialog"
style="opacity: 1; animation: none;"
>
-
+
-
-
+
+
- Test 2
-
+
+
@@ -2984,399 +2986,401 @@ exports[`Tabs > renders correctly with Tabs with prop 1`] = `
role="dialog"
style="opacity: 1; animation: none;"
>
-
+
-
-
-
-
-
-
-
-
-