Improve report + naming

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/upset-papayas-flash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Update Menu component in Canon to make the UI more condensed. We are also adding a new Combobox option for nested navigation.

packages/canon/report.api.md

@@ -7,6 +7,7 @@ import { Avatar as Avatar_2 } from '@base-ui-components/react/avatar';
 import { Breakpoint as Breakpoint_2 } from '@backstage/canon';
 import { ChangeEvent } from 'react';
 import { Collapsible as Collapsible_2 } from '@base-ui-components/react/collapsible';
+import { ComponentProps } from 'react';
 import { Context } from 'react';
 import type { CSSProperties } from 'react';
 import { FC } from 'react';
@@ -891,6 +892,27 @@ export type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
 // @public (undocumented)
 export const Menu: MenuComponent;
 
+// @public (undocumented)
+export type MenuComboboxOption = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+
+// @public (undocumented)
+export interface MenuComboboxProps extends ComponentProps<'div'> {
+  // (undocumented)
+  closeParentOnEsc?: boolean;
+  // (undocumented)
+  multiselect?: boolean;
+  // (undocumented)
+  onValueChange?: (value: string[]) => void;
+  // (undocumented)
+  options: MenuComboboxOption[];
+  // (undocumented)
+  value?: string[];
+}
+
 // @public (undocumented)
 export type MenuComponent = {
   Root: typeof Menu_2.Root;
@@ -910,6 +932,9 @@ export type MenuComponent = {
   CheckboxItemIndicator: typeof Menu_2.CheckboxItemIndicator;
   SubmenuTrigger: typeof Menu_2.SubmenuTrigger;
   Separator: typeof Menu_2.Separator;
+  Combobox: ForwardRefExoticComponent<
+    MenuComboboxProps & RefAttributes<HTMLDivElement>
+  >;
 };
 
 // @public (undocumented)

packages/canon/src/components/Menu/Combobox.tsx

@@ -26,7 +26,7 @@ import {
   useEffect,
 } from 'react';
 import clsx from 'clsx';
-import { ComboboxOption, ComboboxProps } from './types';
+import { MenuComboboxOption, MenuComboboxProps } from './types';
 import { Icon } from '@backstage/canon';
 
 const getListboxItemId = (listboxId: string, optionValue: string): string =>
@@ -42,7 +42,7 @@ function ComboboxItem({
   onItemSelect,
   listboxId,
 }: {
-  option: ComboboxOption;
+  option: MenuComboboxOption;
   optionIndex: number;
   value?: string[];
   activeOptionIndex: number;
@@ -85,7 +85,7 @@ function ComboboxItem({
 }
 
 /** @public */
-export const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
+export const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(
   (props, ref) => {
     const {
       options,

packages/canon/src/components/Menu/types.ts

@@ -21,6 +21,22 @@ import {
   ComponentProps,
 } from 'react';
 
+/** @public */
+export type MenuComboboxOption = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+
+/** @public */
+export interface MenuComboboxProps extends ComponentProps<'div'> {
+  options: MenuComboboxOption[];
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+  multiselect?: boolean;
+  closeParentOnEsc?: boolean;
+}
+
 /** @public */
 export type MenuComponent = {
   Root: typeof MenuPrimitive.Root;
@@ -41,22 +57,6 @@ export type MenuComponent = {
   SubmenuTrigger: typeof MenuPrimitive.SubmenuTrigger;
   Separator: typeof MenuPrimitive.Separator;
   Combobox: ForwardRefExoticComponent<
-    ComboboxProps & RefAttributes<HTMLDivElement>
+    MenuComboboxProps & RefAttributes<HTMLDivElement>
   >;
 };
-
-/** @public */
-export type ComboboxOption = {
-  label: string;
-  value: string;
-  disabled?: boolean;
-};
-
-/** @public */
-export interface ComboboxProps extends ComponentProps<'div'> {
-  options: ComboboxOption[];
-  value?: string[];
-  onValueChange?: (value: string[]) => void;
-  multiselect?: boolean;
-  closeParentOnEsc?: boolean;
-}