` element.
+The `SubmenuTrigger` accepts exactly two children: the first child should be the `MenuItem` which triggers opening
+of the submenu, and second child should be one of the menu containers containing the submenu.
-
-### Menu.Item
+### Menu
-An individual interactive item in the menu. Renders a `
` element.
+`Menu` is a container component that contains a list of menu items or sections.
+
+
+
+### MenuListBox
+
+`MenuListBox` is a container component that contains a list of menu items or sections.
+
+
+
+### MenuAutocomplete
+
+`MenuAutocomplete` is a container component that contains a list of menu items or sections.
+
+
+
+### MenuAutocompleteListbox
+
+`MenuAutocompleteListbox` is a container component that contains a list of menu items or sections.
+
+
+
+### MenuItem
+
+`MenuItem` is an individual interactive item in the menu.
+### MenuListBoxItem
+
+`MenuListBoxItem` is an individual interactive item in the menu list box.
+
+
+
+### MenuSection
+
+`MenuSection` is a component that renders a section in the menu.
+
+
+
+### MenuSeparator
+
+`MenuSeparator` is a component that renders a horizontal line to separate menu items.
+
+
+
## Examples
-### Open on hover
-
-To create a menu that opens on hover, add the `openOnHover` prop to the Root part.
-You can additionally configure how quickly the menu opens on hover using the `delay` prop.
-
-
}
- code={menuHoverSnippet}
-/>
-
### Nested navigation
-You can nest menus to create a more complex navigation structure.
+You can nest menus to create a more complex navigation structure. It is important to use the `placement` prop to ensure
+the submenu is displayed in the correct position. The best practice is to use the `right top` placement for the submenu.
}
- code={menuSubmenuSnippet}
+ preview={
}
+ code={submenu}
+/>
+
+### With icons
+
+You can use the `iconStart` prop to add an icon to the menu item.
+
+
}
+ code={icons}
+/>
+
+### With links
+
+You can use the `href` prop to add a link to the menu item. This is using our router provider under the hood
+to work for both internal and external links.
+
+
}
+ code={links}
+/>
+
+### With sections
+
+You can use the `MenuSection` component to add a section to the menu.
+
+
}
+ code={sections}
+/>
+
+### With separators
+
+You can use the `MenuSeparator` component to add a separator to the menu.
+
+
}
+ code={separators}
+/>
+
+### With autocomplete
+
+You can use the `MenuAutocomplete` component to add a autocomplete to the menu.
+
+
}
+ code={autocomplete}
+/>
+
+### With list box
+
+You can use the `MenuListBox` component to add a list box to the menu.
+
+
}
+ code={autocompleteListbox}
+/>
+
+### With list box with multiple selection
+
+You can use the `MenuListBox` component to add a list box to the menu. You can also use the `selectionMode` prop to
+allow multiple selection.
+
+
}
+ code={autocompleteListboxMultiple}
/>
diff --git a/docs-ui/src/content/components/menu.props.ts b/docs-ui/src/content/components/menu.props.ts
index 2d60987ecf..46b0c11c39 100644
--- a/docs-ui/src/content/components/menu.props.ts
+++ b/docs-ui/src/content/components/menu.props.ts
@@ -1,242 +1,332 @@
import {
classNamePropDefs,
stylePropDefs,
- renderPropDefs,
type PropDef,
} from '@/utils/propDefs';
-export const menuRootPropDefs: Record
= {
- defaultOpen: {
+const placementValues = [
+ 'bottom',
+ 'bottom left',
+ 'bottom right',
+ 'bottom start',
+ 'bottom end',
+ 'top',
+ 'top left',
+ 'top right',
+ 'top start',
+ 'top end',
+ 'left',
+ 'left top',
+ 'left bottom',
+ 'start',
+ 'start top',
+ 'start bottom',
+ 'right',
+ 'right top',
+ 'right bottom',
+ 'end',
+ 'end top',
+ 'end bottom',
+];
+
+export const menuTriggerPropDefs: Record = {
+ isOpen: {
type: 'boolean',
- default: 'false',
},
- open: {
+ defaultOpen: {
type: 'boolean',
},
onOpenChange: {
type: 'enum',
- values: ['(open, event) => void'],
- },
- closeParentOnEsc: {
- type: 'boolean',
- default: 'true',
- },
- modal: {
- type: 'boolean',
- default: 'true',
- },
- onOpenChangeComplete: {
- type: 'enum',
- values: ['(open) => void'],
- },
- disabled: {
- type: 'boolean',
- default: 'false',
- },
- openOnHover: {
- type: 'boolean',
+ values: ['(isOpen: boolean) => void'],
},
+};
+
+export const submenuTriggerPropDefs: Record = {
delay: {
type: 'number',
- default: '100',
+ default: '200',
},
- loop: {
- type: 'boolean',
- default: 'true',
- },
- orientation: {
+};
+
+export const menuPropDefs: Record = {
+ disabledKeys: {
type: 'enum',
- values: ['horizontal', 'vertical'],
- default: 'vertical',
+ values: ['Iterable'],
+ },
+ selectionMode: {
+ type: 'enum',
+ values: ['none', 'single', 'multiple'],
+ },
+ selectedKeys: {
+ type: 'enum',
+ values: ['all', 'Iterable'],
+ },
+ defaultSelectedKeys: {
+ type: 'enum',
+ values: ['all', 'Iterable'],
+ },
+ placement: {
+ type: 'enum',
+ values: placementValues,
},
...classNamePropDefs,
...stylePropDefs,
};
-export const menuTriggerPropDefs: Record = {
- ...renderPropDefs,
+export const menuListBoxPropDefs: Record = {
+ disabledKeys: {
+ type: 'enum',
+ values: ['Iterable'],
+ },
+ selectionMode: {
+ type: 'enum',
+ values: ['none', 'single', 'multiple'],
+ },
+ selectedKeys: {
+ type: 'enum',
+ values: ['all', 'Iterable'],
+ },
+ defaultSelectedKeys: {
+ type: 'enum',
+ values: ['all', 'Iterable'],
+ },
+ placement: {
+ type: 'enum',
+ values: placementValues,
+ },
...classNamePropDefs,
...stylePropDefs,
};
-export const menuPositionerPropDefs: Record = {
- align: {
+export const menuAutocompletePropDefs: Record = {
+ placement: {
type: 'enum',
- values: ['start', 'center', 'end'],
- default: 'center',
+ values: placementValues,
},
- alignOffset: {
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
+
+export const menuAutocompleteListboxPropDefs: Record = {
+ placement: {
type: 'enum',
- values: ['number', '(data) => number'],
- default: '0',
- },
- side: {
- type: 'enum',
- values: ['bottom', 'inline-end', 'inline-start', 'left', 'right', 'top'],
- default: 'bottom',
- },
- sideOffset: {
- type: 'enum',
- values: ['number', '(data) => number'],
- default: '0',
- },
- arrowPadding: {
- type: 'number',
- default: '5',
- },
- anchor: {
- type: 'enum',
- values: [
- 'React.Ref',
- 'Element',
- 'VirtualElement',
- '(() => Element | VirtualElement | null)',
- 'null',
- ],
- },
- collisionBoundary: {
- type: 'enum',
- values: ['clipping-ancestors', 'Element', 'Element[]', 'Rect'],
- default: 'clipping-ancestors',
- },
- collisionPadding: {
- type: 'enum',
- values: ['number', 'Rect'],
- default: '5',
- },
- sticky: {
- type: 'boolean',
- default: 'false',
- },
- positionMethod: {
- type: 'enum',
- values: ['absolute', 'fixed'],
- default: 'absolute',
- },
- trackAnchor: {
- type: 'boolean',
- default: 'true',
+ values: placementValues,
},
...classNamePropDefs,
...stylePropDefs,
};
export const menuItemPropDefs: Record = {
- label: {
+ id: {
+ type: 'enum',
+ values: ['Key'],
+ },
+ value: {
type: 'string',
},
- onClick: {
+ textValue: {
+ type: 'string',
+ },
+ isDisabled: {
+ type: 'boolean',
+ },
+ href: {
+ type: 'string',
+ },
+ onAction: {
type: 'enum',
values: ['(event) => void'],
},
- closeOnClick: {
- type: 'boolean',
- default: 'true',
- },
- disabled: {
- type: 'boolean',
- default: 'false',
- },
...classNamePropDefs,
...stylePropDefs,
};
-export const menuUsageSnippet = `import { Menu } from '@backstage/ui';
+export const menuListBoxItemPropDefs: Record = {
+ id: {
+ type: 'enum',
+ values: ['Key'],
+ },
+ value: {
+ type: 'string',
+ },
+ textValue: {
+ type: 'string',
+ },
+ isDisabled: {
+ type: 'boolean',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
-
-
-
-
-
-
-
- `;
+export const menuSectionPropDefs: Record = {
+ title: {
+ type: 'string',
+ },
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
-export const menuDefaultSnippet = `
- (
-
- Menu
-
- )}
- />
-
-
-
- Settings
- Invite new members
- Download app
- Log out
-
-
-
- `;
+export const menuSeparatorPropDefs: Record = {
+ ...classNamePropDefs,
+ ...stylePropDefs,
+};
-export const menuTriggerSnippet = `
- (
-
- Menu
-
- )}
- />
-
-
-
- Settings
- Invite new members
- Download app
- Log out
-
-
-
- `;
+
+ Menu
+
+ Apple
+ Banana
+ Blueberry
+
+ Vegetables
+
+ Carrot
+ Tomato
+ Potato
+
+
+
+ `;
-export const menuSubmenuSnippet = ` (
-
+ Menu
+
+ {options.map(option => (
+ {option.label}
+ ))}
+
+ `;
+
+export const submenu = `
+ Menu
+
+ Edit
+ Duplicate
+
+ Submenu
+
+ Edit
+ Duplicate
+ Rename
+ Share
+ Move
+
+
+
+ `;
+
+export const icons = `
+ Menu
+
+
+ `;
+
+export const sections = `
+ Menu
+
+
+
+
+
+
+ `;
+
+export const separators = `
+ Menu
+
+ Edit
+ Duplicate
+ Rename
+ Share
+ Move
+
+ `;
+
+export const links = `
+ Menu
+
+ Internal link
+
+ External link
+
+ Email link
+
+ `;
+
+export const autocomplete = `
+ Menu
+
+ Create new file...
+ Create new folder...
+ Assign to...
+ Assign to me
+ Change status...
+ Change priority...
+ Add label...
+ Remove label...
+
+ `;
+
+export const autocompleteListbox = `const [selected, setSelected] = useState(
+ new Set(['blueberry']),
+);
+
+
+ Selected: {Array.from(selected).join(', ')}
+
+ Menu
+
- Menu
-
- )}
-/>
-
-
-
- Settings
- Invite new members
- Download app
- Log out
-
- Submenu
-
-
-
- Submenu Item 1
- Submenu Item 2
- Submenu Item 3
-
-
-
-
-
-
- `;
+ {options.map(option => (
+
+ {option.label}
+
+ ))}
+
+
+ `;
+
+export const autocompleteListboxMultiple = `const [selected, setSelected] = useState(
+ new Set(['blueberry', 'cherry']),
+);
+
+
+ Selected: {Array.from(selected).join(', ')}
+
+ Menu
+
+ {options.map(option => (
+
+ {option.label}
+
+ ))}
+
+
+ `;
diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css
index 5d4011ff6d..a9635723ee 100644
--- a/packages/ui/css/styles.css
+++ b/packages/ui/css/styles.css
@@ -9688,184 +9688,245 @@
}
}
-.bui-MenuPositioner {
- z-index: 100;
- outline: 0;
-}
-
-.bui-MenuPopup {
- background-color: var(--bui-bg-surface-1);
+.bui-MenuPopover {
border: 1px solid var(--bui-border);
+ border-radius: var(--bui-radius-2);
+ background: var(--bui-bg-surface-1);
color: var(--bui-fg-primary);
- transform-origin: var(--transform-origin);
- max-width: min(var(--available-width), 340px);
- max-height: min(var(--available-height), 500px);
- padding-bottom: var(--bui-space-1);
- border-radius: .375rem;
outline: none;
flex-direction: column;
- transition: transform .15s, opacity .15s;
+ min-height: 0;
+ transition: transform .2s, opacity .2s;
display: flex;
- position: relative;
- overflow: auto;
+ overflow: hidden;
- &[data-starting-style], &[data-ending-style] {
+ &[data-entering], &[data-exiting] {
+ transform: var(--origin);
opacity: 0;
- transform: scale(.9);
}
+
+ &[data-placement="top"] {
+ --origin: translateY(8px);
+ }
+
+ &[data-placement="bottom"] {
+ --origin: translateY(-8px);
+ }
+
+ &[data-placement="right"] {
+ --origin: translateX(-8px);
+ }
+
+ &[data-placement="left"] {
+ --origin: translateX(8px);
+ }
+}
+
+.bui-MenuContent {
+ max-height: inherit;
+ box-sizing: border-box;
+ padding: var(--bui-space-1);
+ outline: none;
+ min-width: 150px;
+ overflow: auto;
+}
+
+.bui-MenuPopover .bui-ScrollAreaRoot {
+ flex-direction: column;
+ flex: 1;
+ height: 100%;
+ min-height: 0;
+ display: flex;
+}
+
+.bui-MenuPopover .bui-ScrollAreaScrollbar {
+ margin-inline: var(--bui-space-1_5);
}
.bui-MenuItem {
- user-select: none;
- align-items: center;
- gap: var(--bui-space-2);
- height: 32px;
- color: var(--bui-fg-primary);
- border-radius: var(--bui-radius-2);
- margin-inline: var(--bui-space-1);
+ height: 2rem;
padding-inline: var(--bui-space-2);
+ border-radius: var(--bui-radius-2);
+ cursor: default;
+ color: var(--bui-fg-primary);
font-size: var(--bui-font-size-3);
- cursor: pointer;
- outline: 0;
- flex-shrink: 0;
- text-decoration: none;
+ justify-content: space-between;
+ align-items: center;
+ gap: var(--bui-space-6);
+ outline: none;
display: flex;
- &:first-child {
- margin-top: var(--bui-space-1);
+ &[data-focused], &[data-open] {
+ background: var(--bui-bg-surface-2);
+ color: var(--bui-fg-primary);
}
- &[data-highlighted] {
- background-color: var(--bui-gray-3);
+ &[data-color="danger"] {
+ color: var(--bui-fg-danger);
+ }
+
+ &[data-color="danger"][data-focused] {
+ background: var(--bui-bg-danger);
+ color: var(--bui-fg-danger);
+ }
+
+ &[data-has-submenu] {
+ & > .bui-MenuItemArrow {
+ display: block;
+ }
}
}
-.bui-MenuSubmenuTrigger {
- user-select: none;
+.bui-MenuItemListBox {
+ height: 2rem;
+ padding-inline: var(--bui-space-2);
+ border-radius: var(--bui-radius-2);
+ cursor: default;
+ color: var(--bui-fg-primary);
+ font-size: var(--bui-font-size-3);
justify-content: space-between;
align-items: center;
- gap: var(--bui-space-2);
- height: 32px;
- color: var(--bui-fg-primary);
- border-radius: var(--bui-radius-2);
- margin-inline: var(--bui-space-1);
- padding-inline: var(--bui-space-2);
- font-size: var(--bui-font-size-3);
- cursor: pointer;
- outline: 0;
- flex-shrink: 0;
- text-decoration: none;
+ gap: var(--bui-space-6);
+ outline: none;
display: flex;
- & .bui-Icon {
- color: var(--bui-fg-secondary);
+ &:hover {
+ background: var(--bui-bg-surface-2);
+ color: var(--bui-fg-primary);
}
- &:first-child {
- margin-top: var(--bui-space-1);
- }
-
- &[data-popup-open], &[data-highlighted] {
- background-color: var(--bui-gray-3);
-
- & .bui-Icon {
+ &[data-selected] .bui-MenuItemListBoxCheck {
+ & > svg {
+ opacity: 1;
color: var(--bui-fg-primary);
}
}
}
-.bui-MenuSeparator {
- background-color: var(--color-gray-200);
- height: 1px;
- margin: .375rem 1rem;
+.bui-MenuItemListBoxCheck {
+ justify-content: center;
+ align-items: center;
+ width: 1rem;
+ height: 1rem;
+ display: flex;
+
+ & > svg {
+ opacity: 0;
+ width: 1rem;
+ height: 1rem;
+ }
}
-.bui-SubmenuComboboxSearch {
- padding-inline: var(--bui-space-3);
+.bui-MenuItemContent {
+ align-items: center;
+ gap: var(--bui-space-2);
+ display: flex;
+
+ & > svg {
+ width: 1rem;
+ height: 1rem;
+ }
+}
+
+.bui-MenuItemArrow {
+ width: 1rem;
+ height: 1rem;
+ display: none;
+
+ & > svg {
+ width: 1rem;
+ height: 1rem;
+ }
+}
+
+.bui-MenuSection {
+ &:first-child .bui-MenuSectionHeader {
+ padding-top: 0;
+ }
+}
+
+.bui-MenuSectionHeader {
+ height: 2rem;
+ padding-top: var(--bui-space-3);
+ padding-left: var(--bui-space-2);
+ color: var(--bui-fg-primary);
+ font-size: var(--bui-font-size-1);
+ letter-spacing: .05rem;
+ text-transform: uppercase;
+ align-items: center;
+ font-weight: bold;
+ display: flex;
+}
+
+.bui-MenuSeparator {
+ background: var(--bui-border);
+ height: 1px;
+ margin-inline: var(--bui-space-1_5);
+ margin-block: var(--bui-space-1);
+}
+
+.bui-MenuSearchField {
+ font-family: var(--bui-font-regular);
+ flex-shrink: 0;
+ width: 100%;
+ position: relative;
+
+ &[data-empty] {
+ & .bui-MenuSearchFieldClear {
+ display: none;
+ }
+ }
+}
+
+.bui-MenuSearchFieldInput {
+ padding: 0 var(--bui-space-3);
border: none;
border-bottom: 1px solid var(--bui-border);
background-color: var(--bui-bg-surface-1);
+ font-size: var(--bui-font-size-3);
+ font-family: var(--bui-font-regular);
+ font-weight: var(--bui-font-weight-regular);
+ color: var(--bui-fg-primary);
width: 100%;
- height: 32px;
- color: var(--bui-fg-primary);
- line-height: 140%;
- font-size: var(--bui-font-size-3);
- z-index: 1;
+ height: 2rem;
+ cursor: inherit;
outline: none;
- position: sticky;
- top: 0;
-
- &::placeholder {
- color: var(--bui-fg-secondary);
- }
-
- &:disabled {
- opacity: .6;
- cursor: not-allowed;
- }
-}
-
-.bui-SubmenuComboboxItems {
- padding-top: var(--bui-space-2);
- outline: none;
- flex-direction: column;
- display: flex;
- overflow-y: auto;
-}
-
-.bui-SubmenuComboboxNoResults {
- padding-inline: var(--bui-space-3);
- padding-top: var(--bui-space-2);
- padding-bottom: var(--bui-space-4);
- color: var(--bui-fg-secondary);
- font-size: var(--bui-font-size-3);
-}
-
-.bui-SubmenuComboboxItem {
- user-select: none;
- justify-content: space-between;
align-items: center;
- gap: var(--bui-space-2);
- height: 32px;
- color: var(--bui-fg-primary);
- border-radius: var(--bui-radius-2);
- margin-inline: var(--bui-space-1);
- padding-inline: var(--bui-space-2);
- font-size: var(--bui-font-size-3);
- cursor: pointer;
- outline: 0;
- flex-shrink: 0;
- text-decoration: none;
display: flex;
- &[data-highlighted] {
- background-color: var(--bui-gray-3);
- }
-
- &[data-disabled] {
- opacity: .5;
- cursor: not-allowed;
+ &::-webkit-search-cancel-button, &::-webkit-search-decoration {
+ -webkit-appearance: none;
}
}
-.bui-SubmenuComboboxItemCheckbox {
- width: 16px;
- height: 16px;
- color: var(--bui-fg-primary);
- border-radius: var(--bui-radius-2);
- border: 1px solid var(--bui-border);
- background: var(--bui-bg-surface-1);
- flex-shrink: 0;
+.bui-MenuSearchFieldClear {
+ right: var(--bui-space-2);
+ cursor: pointer;
+ color: var(--bui-fg-secondary);
+ background-color: #0000;
+ border: none;
justify-content: center;
align-items: center;
+ margin: 0;
+ padding: 0;
+ transition: color .2s ease-in-out;
display: flex;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+
+ & > svg {
+ width: 1rem;
+ height: 1rem;
+ }
}
-.bui-SubmenuComboboxItemLabel {
- text-overflow: ellipsis;
- white-space: nowrap;
- flex: 1;
- overflow: hidden;
+.bui-MenuEmptyState {
+ padding: var(--bui-space-1);
+ color: var(--bui-fg-secondary);
+ font-size: var(--bui-font-size-3);
+ font-family: var(--bui-font-regular);
+ font-weight: var(--bui-font-weight-regular);
}
.bui-Popover {
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index c099a31e05..b5c61edc9c 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -15,7 +15,13 @@ import type { ElementType } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { LinkProps as LinkProps_2 } from 'react-aria-components';
-import { Menu as Menu_2 } from '@base-ui-components/react/menu';
+import type { ListBoxItemProps } from 'react-aria-components';
+import type { ListBoxProps } from 'react-aria-components';
+import type { MenuItemProps as MenuItemProps_2 } from 'react-aria-components';
+import type { MenuProps as MenuProps_2 } from 'react-aria-components';
+import type { MenuSectionProps as MenuSectionProps_2 } from 'react-aria-components';
+import type { MenuTriggerProps as MenuTriggerProps_2 } from 'react-aria-components';
+import type { PopoverProps } from 'react-aria-components';
import type { RadioGroupProps as RadioGroupProps_2 } from 'react-aria-components';
import type { RadioProps as RadioProps_2 } from 'react-aria-components';
import { ReactElement } from 'react';
@@ -26,6 +32,8 @@ import { RowProps } from 'react-aria-components';
import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area';
import type { SearchFieldProps as SearchFieldProps_2 } from 'react-aria-components';
import type { SelectProps as SelectProps_2 } from 'react-aria-components';
+import type { SeparatorProps } from 'react-aria-components';
+import type { SubmenuTriggerProps as SubmenuTriggerProps_2 } from 'react-aria-components';
import type { SwitchProps as SwitchProps_2 } from 'react-aria-components';
import { TableBodyProps } from 'react-aria-components';
import { TableHeaderProps } from 'react-aria-components';
@@ -497,21 +505,21 @@ export const componentDefinitions: {
};
readonly Menu: {
readonly classNames: {
- readonly trigger: 'bui-MenuTrigger';
- readonly backdrop: 'bui-MenuBackdrop';
- readonly positioner: 'bui-MenuPositioner';
- readonly popup: 'bui-MenuPopup';
- readonly arrow: 'bui-MenuArrow';
+ readonly root: 'bui-Menu';
+ readonly popover: 'bui-MenuPopover';
+ readonly content: 'bui-MenuContent';
+ readonly section: 'bui-MenuSection';
+ readonly sectionHeader: 'bui-MenuSectionHeader';
readonly item: 'bui-MenuItem';
- readonly group: 'bui-MenuGroup';
- readonly groupLabel: 'bui-MenuGroupLabel';
- readonly radioGroup: 'bui-MenuRadioGroup';
- readonly radioItem: 'bui-MenuRadioItem';
- readonly radioItemIndicator: 'bui-MenuRadioItemIndicator';
- readonly checkboxItem: 'bui-MenuCheckboxItem';
- readonly checkboxItemIndicator: 'bui-MenuCheckboxItemIndicator';
- readonly submenuTrigger: 'bui-MenuSubmenuTrigger';
+ readonly itemListBox: 'bui-MenuItemListBox';
+ readonly itemListBoxCheck: 'bui-MenuItemListBoxCheck';
+ readonly itemContent: 'bui-MenuItemContent';
+ readonly itemArrow: 'bui-MenuItemArrow';
readonly separator: 'bui-MenuSeparator';
+ readonly searchField: 'bui-MenuSearchField';
+ readonly searchFieldInput: 'bui-MenuSearchFieldInput';
+ readonly searchFieldClear: 'bui-MenuSearchFieldClear';
+ readonly emptyState: 'bui-MenuEmptyState';
};
};
readonly Popover: {
@@ -976,16 +984,6 @@ export interface GridProps extends SpaceProps {
// @public
export const Header: (props: HeaderProps) => JSX_2.Element;
-// @public
-export interface HeaderMenuItem {
- // (undocumented)
- label: string;
- // (undocumented)
- onClick?: () => void;
- // (undocumented)
- value: string;
-}
-
// @public
export const HeaderPage: (props: HeaderPageProps) => JSX_2.Element;
@@ -1004,8 +1002,6 @@ export interface HeaderPageProps {
// (undocumented)
customActions?: React.ReactNode;
// (undocumented)
- menuItems?: HeaderMenuItem[];
- // (undocumented)
tabs?: HeaderTab[];
// (undocumented)
title?: string;
@@ -1018,8 +1014,6 @@ export interface HeaderProps {
// (undocumented)
icon?: React.ReactNode;
// (undocumented)
- menuItems?: HeaderMenuItem[];
- // (undocumented)
onTabSelectionChange?: TabsProps_2['onSelectionChange'];
// (undocumented)
tabs?: HeaderTab[];
@@ -1247,52 +1241,107 @@ export const marginPropDefs: (spacingValues: string[]) => {
export type MarginProps = GetPropDefTypes;
// @public (undocumented)
-export const Menu: MenuComponent;
+export const Menu: (props: MenuProps) => JSX_2.Element;
// @public (undocumented)
-export type MenuComboboxOption = {
- label: string;
- value: string;
- disabled?: boolean;
-};
+export const MenuAutocomplete: (
+ props: MenuAutocompleteProps,
+) => JSX_2.Element;
// @public (undocumented)
-export interface MenuComboboxProps extends ComponentProps<'div'> {
+export const MenuAutocompleteListbox: (
+ props: MenuAutocompleteListBoxProps,
+) => JSX_2.Element;
+
+// @public (undocumented)
+export interface MenuAutocompleteListBoxProps
+ extends ListBoxProps,
+ Omit, 'children'> {
// (undocumented)
- closeParentOnEsc?: boolean;
+ placeholder?: string;
// (undocumented)
- multiselect?: boolean;
- // (undocumented)
- onValueChange?: (value: string[]) => void;
- // (undocumented)
- options: MenuComboboxOption[];
- // (undocumented)
- value?: string[];
+ placement?: PopoverProps['placement'];
}
// @public (undocumented)
-export type MenuComponent = {
- Root: typeof Menu_2.Root;
- Trigger: typeof Menu_2.Trigger;
- Portal: typeof Menu_2.Portal;
- Backdrop: typeof Menu_2.Backdrop;
- Positioner: typeof Menu_2.Positioner;
- Popup: typeof Menu_2.Popup;
- Arrow: typeof Menu_2.Arrow;
- Item: typeof Menu_2.Item;
- Group: typeof Menu_2.Group;
- GroupLabel: typeof Menu_2.GroupLabel;
- RadioGroup: typeof Menu_2.RadioGroup;
- RadioItem: typeof Menu_2.RadioItem;
- RadioItemIndicator: typeof Menu_2.RadioItemIndicator;
- CheckboxItem: typeof Menu_2.CheckboxItem;
- CheckboxItemIndicator: typeof Menu_2.CheckboxItemIndicator;
- SubmenuTrigger: typeof Menu_2.SubmenuTrigger;
- Separator: typeof Menu_2.Separator;
- Combobox: ForwardRefExoticComponent<
- MenuComboboxProps & RefAttributes
- >;
-};
+export interface MenuAutocompleteProps
+ extends MenuProps_2,
+ Omit, 'children'> {
+ // (undocumented)
+ placeholder?: string;
+ // (undocumented)
+ placement?: PopoverProps['placement'];
+}
+
+// @public (undocumented)
+export const MenuItem: (props: MenuItemProps) => JSX_2.Element;
+
+// @public (undocumented)
+export interface MenuItemProps
+ extends MenuItemProps_2,
+ Omit {
+ // (undocumented)
+ children: React.ReactNode;
+ // (undocumented)
+ color?: 'primary' | 'danger';
+ // (undocumented)
+ iconStart?: React.ReactNode;
+}
+
+// @public (undocumented)
+export const MenuListBox: (props: MenuListBoxProps) => JSX_2.Element;
+
+// @public (undocumented)
+export const MenuListBoxItem: (props: MenuListBoxItemProps) => JSX_2.Element;
+
+// @public (undocumented)
+export interface MenuListBoxItemProps
+ extends ListBoxItemProps,
+ Omit {
+ // (undocumented)
+ children: React.ReactNode;
+}
+
+// @public (undocumented)
+export interface MenuListBoxProps
+ extends ListBoxProps,
+ Omit, 'children'> {
+ // (undocumented)
+ placement?: PopoverProps['placement'];
+}
+
+// @public (undocumented)
+export interface MenuProps
+ extends MenuProps_2,
+ Omit, 'children'> {
+ // (undocumented)
+ placement?: PopoverProps['placement'];
+}
+
+// @public (undocumented)
+export const MenuSection: (props: MenuSectionProps) => JSX_2.Element;
+
+// @public (undocumented)
+export interface MenuSectionProps
+ extends MenuSectionProps_2,
+ Omit, 'children'> {
+ // (undocumented)
+ children: React.ReactNode;
+ // (undocumented)
+ title: string;
+}
+
+// @public (undocumented)
+export const MenuSeparator: (props: MenuSeparatorProps) => JSX_2.Element;
+
+// @public (undocumented)
+export interface MenuSeparatorProps extends SeparatorProps {}
+
+// @public (undocumented)
+export const MenuTrigger: (props: MenuTriggerProps) => JSX_2.Element;
+
+// @public (undocumented)
+export interface MenuTriggerProps extends MenuTriggerProps_2 {}
// @public (undocumented)
export type NonStylingPropDef = {
@@ -1563,6 +1612,12 @@ export type StylingPropDef = {
parseValue?: (value: string) => string | undefined;
};
+// @public (undocumented)
+export const SubmenuTrigger: (props: SubmenuTriggerProps) => JSX_2.Element;
+
+// @public (undocumented)
+export interface SubmenuTriggerProps extends SubmenuTriggerProps_2 {}
+
// @public (undocumented)
export const Switch: ForwardRefExoticComponent<
SwitchProps & RefAttributes
diff --git a/packages/ui/src/components/Header/Header.stories.tsx b/packages/ui/src/components/Header/Header.stories.tsx
index 1674e5e0be..9386ea5001 100644
--- a/packages/ui/src/components/Header/Header.stories.tsx
+++ b/packages/ui/src/components/Header/Header.stories.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -16,17 +16,23 @@
import type { Meta, StoryObj, StoryFn } from '@storybook/react';
import { Header } from './Header';
-import { HeaderMenuItem, HeaderTab } from './types';
-import { Button } from '../Button';
-import { HeaderPage } from '../HeaderPage';
+import type { HeaderTab } from './types';
+import {
+ Button,
+ HeaderPage,
+ Container,
+ Text,
+ ButtonIcon,
+ MenuTrigger,
+ Menu,
+ MenuItem,
+} from '../../';
import { MemoryRouter } from 'react-router-dom';
-import { Container } from '../Container';
-import { Text } from '../Text';
-import { ButtonIcon } from '../ButtonIcon';
import {
RiHeartLine,
RiEmotionHappyLine,
RiCloudy2Line,
+ RiMore2Line,
} from '@remixicon/react';
import { HeaderPageBreadcrumb } from '../HeaderPage/types';
@@ -87,14 +93,23 @@ const tabs2: HeaderTab[] = [
},
];
-const menuItems: HeaderMenuItem[] = [
+const menuItems = [
{
label: 'Settings',
value: 'settings',
+ href: '/settings',
},
{
label: 'Invite new members',
value: 'invite-new-members',
+ href: '/invite-new-members',
+ },
+ {
+ label: 'Logout',
+ value: 'logout',
+ onClick: () => {
+ alert('logout');
+ },
},
];
@@ -190,13 +205,6 @@ export const WithTabs: Story = {
decorators: [withRouter],
};
-export const WithOptions: Story = {
- args: {
- menuItems,
- },
- decorators: [withRouter],
-};
-
export const WithCustomActions: Story = {
args: {},
decorators: [withRouter],
@@ -208,29 +216,33 @@ export const WithCustomActions: Story = {
+
+ {menuItems.map(option => (
+
+ {option.label}
+
+ ))}
+
+
}
/>
),
};
-export const WithAllOptions: Story = {
- args: {
- title: 'My plugin',
- titleLink: '/',
- menuItems,
- },
- decorators: [withRouter],
- render: WithCustomActions.render,
-};
-
export const WithAllOptionsAndTabs: Story = {
args: {
- ...WithAllOptions.args,
+ ...WithCustomActions.args,
tabs,
},
decorators: [withRouter],
- render: WithAllOptions.render,
+ render: WithCustomActions.render,
};
export const WithHeaderPage: Story = {
@@ -252,7 +264,6 @@ export const WithHeaderPage: Story = {
/>
Custom action}
breadcrumbs={breadcrumbs}
@@ -262,16 +273,12 @@ export const WithHeaderPage: Story = {
};
export const WithLayout: Story = {
- args: {
- menuItems,
- },
decorators: layoutDecorator,
render: args => (
<>
Custom action}
breadcrumbs={breadcrumbs}
@@ -281,21 +288,17 @@ export const WithLayout: Story = {
};
export const WithLayoutNoTabs: Story = {
- args: {
- menuItems,
- },
decorators: layoutDecorator,
render: args => (
<>
-
diff --git a/packages/ui/src/components/Header/Header.styles.css b/packages/ui/src/components/Header/Header.styles.css
index d0a9012ecc..69c0065394 100644
--- a/packages/ui/src/components/Header/Header.styles.css
+++ b/packages/ui/src/components/Header/Header.styles.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index 01856aa3ce..4d17bfa705 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -32,15 +32,8 @@ declare module 'react-aria-components' {
* @public
*/
export const Header = (props: HeaderProps) => {
- const {
- tabs,
- icon,
- title,
- titleLink,
- menuItems,
- customActions,
- onTabSelectionChange,
- } = props;
+ const { tabs, icon, title, titleLink, customActions, onTabSelectionChange } =
+ props;
const { classNames } = useStyles('Header');
@@ -52,7 +45,6 @@ export const Header = (props: HeaderProps) => {
icon={icon}
title={title}
titleLink={titleLink}
- menuItems={menuItems}
customActions={customActions}
hasTabs={hasTabs}
/>
diff --git a/packages/ui/src/components/Header/HeaderToolbar.tsx b/packages/ui/src/components/Header/HeaderToolbar.tsx
index 6daa24efa1..6892d04682 100644
--- a/packages/ui/src/components/Header/HeaderToolbar.tsx
+++ b/packages/ui/src/components/Header/HeaderToolbar.tsx
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * Copyright 2025 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -17,10 +17,8 @@
import { Link, RouterProvider } from 'react-aria-components';
import { useStyles } from '../../hooks/useStyles';
import { useRef } from 'react';
-import { RiMore2Line, RiShapesLine } from '@remixicon/react';
+import { RiShapesLine } from '@remixicon/react';
import type { HeaderToolbarProps } from './types';
-import { ButtonIcon } from '../ButtonIcon';
-import { Menu } from '../Menu';
import { Text } from '../Text';
import { useNavigate, useHref } from 'react-router-dom';
@@ -30,7 +28,7 @@ import { useNavigate, useHref } from 'react-router-dom';
* @internal
*/
export const HeaderToolbar = (props: HeaderToolbarProps) => {
- const { icon, title, titleLink, menuItems, customActions, hasTabs } = props;
+ const { icon, title, titleLink, customActions, hasTabs } = props;
const { classNames } = useStyles('Header');
let navigate = useNavigate();
@@ -63,34 +61,6 @@ export const HeaderToolbar = (props: HeaderToolbarProps) => {