diff --git a/.changeset/twenty-pumas-brush.md b/.changeset/twenty-pumas-brush.md new file mode 100644 index 0000000000..6306fe0607 --- /dev/null +++ b/.changeset/twenty-pumas-brush.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Adds onTabSelectionChange to ui header component. diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 7ef69560d1..6f6fc41fdb 100644 --- a/packages/ui/report.api.md +++ b/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; diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx index e6aae08eeb..4f85d9096d 100644 --- a/packages/ui/src/components/Header/Header.tsx +++ b/packages/ui/src/components/Header/Header.tsx @@ -50,7 +50,7 @@ export const Header = (props: HeaderProps) => { /> {tabs && (
- + {tabs?.map(tab => ( diff --git a/packages/ui/src/components/Header/types.ts b/packages/ui/src/components/Header/types.ts index e1156c9a55..cf76929389 100644 --- a/packages/ui/src/components/Header/types.ts +++ b/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']; } /**