From 4551fb753076f8a3e39aad51a7856a1322ce9238 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 16 May 2025 16:45:30 +0100
Subject: [PATCH] Improve report + naming

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/upset-papayas-flash.md             |  5 +++
 packages/canon/report.api.md                  | 25 ++++++++++++++
 .../canon/src/components/Menu/Combobox.tsx    |  6 ++--
 packages/canon/src/components/Menu/types.ts   | 34 +++++++++----------
 4 files changed, 50 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/upset-papayas-flash.md

diff --git a/.changeset/upset-papayas-flash.md b/.changeset/upset-papayas-flash.md
new file mode 100644
index 0000000000..fae7347e0d
--- /dev/null
+++ b/.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.
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index cbbdd4db33..87d6e11f6e 100644
--- a/packages/canon/report.api.md
+++ b/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)
diff --git a/packages/canon/src/components/Menu/Combobox.tsx b/packages/canon/src/components/Menu/Combobox.tsx
index 8f2955f5e6..7d683c4718 100644
--- a/packages/canon/src/components/Menu/Combobox.tsx
+++ b/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,
diff --git a/packages/canon/src/components/Menu/types.ts b/packages/canon/src/components/Menu/types.ts
index 7bc4fa47aa..9071f9a921 100644
--- a/packages/canon/src/components/Menu/types.ts
+++ b/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;
-}