add header tab change event

Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

.changeset/twenty-pumas-brush.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Adds onTabSelectionChange to ui header component.

packages/ui/report.api.md

@@ -29,7 +29,7 @@ import { Table as Table_2 } from '@tanstack/react-table';
 import type { TabListProps as TabListProps_2 } from 'react-aria-components';
 import type { TabPanelProps as TabPanelProps_2 } from 'react-aria-components';
 import { TabProps } from 'react-aria-components';
-import type { TabsProps as TabsProps_2 } from 'react-aria-components';
+import { TabsProps as TabsProps_2 } from 'react-aria-components';
 import { TdHTMLAttributes } from 'react';
 import type { TextFieldProps as TextFieldProps_2 } from 'react-aria-components';
 import { ThHTMLAttributes } from 'react';
@@ -1040,6 +1040,8 @@ export interface HeaderProps {
   // (undocumented)
   menuItems?: HeaderMenuItem[];
   // (undocumented)
+  onTabSelectionChange?: TabsProps_2['onSelectionChange'];
+  // (undocumented)
   tabs?: HeaderTab[];
   // (undocumented)
   title?: string;

packages/ui/src/components/Header/Header.tsx

@@ -50,7 +50,7 @@ export const Header = (props: HeaderProps) => {
       />
       {tabs && (
         <div className={classNames.tabsWrapper}>
-          <Tabs>
+          <Tabs onSelectionChange={props.onTabSelectionChange}>
             <TabList>
               {tabs?.map(tab => (
                 <Tab key={tab.id} id={tab.id} href={tab.href}>

packages/ui/src/components/Header/types.ts

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { TabsProps } from 'react-aria-components';
+
 /**
  * Props for the main Header component.
  *
@@ -26,6 +28,7 @@ export interface HeaderProps {
   customActions?: React.ReactNode;
   menuItems?: HeaderMenuItem[];
   tabs?: HeaderTab[];
+  onTabSelectionChange?: TabsProps['onSelectionChange'];
 }
 
 /**