@backstage/ui 0.13.1 → 0.14.0-next.0

package/dist/index.d.ts

@@ -1288,8 +1288,9 @@ declare module 'react-aria-components' {
     }
 }
 /**
- * A component that renders a plugin header with icon, title, custom actions,
- * and navigation tabs.
+ * Renders a plugin header with icon, title, custom actions, and optional tabs.
+ * Always participates in the background context system so descendants (e.g. buttons)
+ * get the correct `data-on-bg` styling inside the toolbar and tabs.
  *
  * @public
  */
@@ -1306,7 +1307,6 @@ declare const PluginHeaderDefinition: {
     readonly classNames: {
         readonly root: "bui-PluginHeader";
         readonly toolbar: "bui-PluginHeaderToolbar";
-        readonly toolbarWrapper: "bui-PluginHeaderToolbarWrapper";
         readonly toolbarContent: "bui-PluginHeaderToolbarContent";
         readonly toolbarControls: "bui-PluginHeaderToolbarControls";
         readonly toolbarIcon: "bui-PluginHeaderToolbarIcon";
@@ -1324,6 +1324,32 @@ declare const PluginHeaderDefinition: {
     };
 };
 
+/**
+ * Represents a single navigation tab in the header.
+ *
+ * @public
+ */
+interface HeaderNavTab {
+    id: string;
+    label: string;
+    href: string;
+}
+/**
+ * Represents a group of navigation tabs rendered as a dropdown menu.
+ *
+ * @public
+ */
+interface HeaderNavTabGroup {
+    id: string;
+    label: string;
+    items: HeaderNavTab[];
+}
+/**
+ * A navigation tab item — either a flat link or a dropdown group.
+ *
+ * @public
+ */
+type HeaderNavTabItem = HeaderNavTab | HeaderNavTabGroup;
 /**
  * Own props for the Header component.
  *
@@ -1332,7 +1358,8 @@ declare const PluginHeaderDefinition: {
 interface HeaderOwnProps {
     title?: string;
     customActions?: React.ReactNode;
-    tabs?: HeaderTab[];
+    tabs?: HeaderNavTabItem[];
+    activeTabId?: string;
     breadcrumbs?: HeaderBreadcrumb[];
     className?: string;
 }
@@ -1399,6 +1426,7 @@ declare const HeaderDefinition: {
         readonly title: {};
         readonly customActions: {};
         readonly tabs: {};
+        readonly activeTabId: {};
         readonly breadcrumbs: {};
         readonly className: {};
     };
@@ -1422,11 +1450,57 @@ declare const HeaderPageDefinition: {
         readonly title: {};
         readonly customActions: {};
         readonly tabs: {};
+        readonly activeTabId: {};
         readonly breadcrumbs: {};
         readonly className: {};
     };
 };
 
+/** @public */
+declare const HeaderNavDefinition: {
+    readonly styles: {
+        readonly [key: string]: string;
+    };
+    readonly classNames: {
+        readonly root: "bui-HeaderNav";
+        readonly list: "bui-HeaderNavList";
+        readonly active: "bui-HeaderNavActive";
+        readonly hovered: "bui-HeaderNavHovered";
+    };
+    readonly analytics: true;
+    readonly propDefs: {
+        readonly noTrack: {};
+        readonly tabs: {};
+        readonly activeTabId: {};
+        readonly children: {};
+        readonly className: {};
+    };
+};
+/** @public */
+declare const HeaderNavItemDefinition: {
+    readonly styles: {
+        readonly [key: string]: string;
+    };
+    readonly classNames: {
+        readonly root: "bui-HeaderNavItem";
+    };
+    readonly propDefs: {
+        readonly className: {};
+    };
+};
+/** @public */
+declare const HeaderNavGroupDefinition: {
+    readonly styles: {
+        readonly [key: string]: string;
+    };
+    readonly classNames: {
+        readonly root: "bui-HeaderNavGroup";
+    };
+    readonly propDefs: {
+        readonly className: {};
+    };
+};
+
 /** @public */
 type ButtonIconOwnProps = {
     size?: Responsive<'small' | 'medium'>;
@@ -3300,5 +3374,5 @@ declare function useAnalytics(): AnalyticsTracker;
  */
 declare function getNodeText(node: ReactNode | ((...args: any[]) => ReactNode)): string | undefined;
 
-export { Accordion, AccordionDefinition, AccordionGroup, AccordionGroupDefinition, AccordionPanel, AccordionPanelDefinition, AccordionTrigger, AccordionTriggerDefinition, Alert, AlertDefinition, Avatar, AvatarDefinition, BUIProvider, BgProvider, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardBodyDefinition, CardDefinition, CardFooter, CardFooterDefinition, CardHeader, CardHeaderDefinition, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogBodyDefinition, DialogDefinition, DialogFooter, DialogFooterDefinition, DialogHeader, DialogHeaderDefinition, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, FullPage, FullPageDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, List, ListDefinition, ListRow, ListRowDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, PasswordField, PasswordFieldDefinition, PluginHeader, PluginHeaderDefinition, Popover, PopoverDefinition, Radio, RadioDefinition, RadioGroup, RadioGroupDefinition, Row, SearchAutocomplete, SearchAutocompleteDefinition, SearchAutocompleteItem, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, getNodeText, useAnalytics, useBgConsumer, useBgProvider, useBreakpoint, useTable };
-export type { AccordionGroupOwnProps, AccordionGroupProps, AccordionOwnProps, AccordionPanelOwnProps, AccordionPanelProps, AccordionProps, AccordionTriggerOwnProps, AccordionTriggerProps, AlertOwnProps, AlertProps, AlignItems, AnalyticsEventAttributes, AnalyticsTracker, AvatarOwnProps, AvatarProps, BUIProviderProps, BgContextValue, BgProviderProps, Border, BorderRadius, BoxOwnProps, BoxProps, BoxUtilityProps, Breakpoint, ButtonIconOwnProps, ButtonIconProps, ButtonLinkOwnProps, ButtonLinkProps, ButtonOwnProps, ButtonProps, CardBaseProps, CardBodyOwnProps, CardBodyProps, CardButtonVariant, CardFooterOwnProps, CardFooterProps, CardHeaderOwnProps, CardHeaderProps, CardLinkVariant, CardOwnProps, CardProps, CardStaticVariant, CellOwnProps, CellProfileOwnProps, CellProfileProps, CellProps, CellTextOwnProps, CellTextProps, CheckboxOwnProps, CheckboxProps, ColumnConfig, ColumnOwnProps, ColumnProps, Columns, ContainerBg, ContainerOwnProps, ContainerProps, CursorParams, CursorResponse, DialogBodyOwnProps, DialogBodyProps, DialogFooterOwnProps, DialogFooterProps, DialogHeaderOwnProps, DialogHeaderProps, DialogOwnProps, DialogProps, DialogTriggerProps, Display, FieldLabelOwnProps, FieldLabelProps, FilterState, FlexDirection, FlexOwnProps, FlexProps, FlexWrap, FullPageOwnProps, FullPageProps, GridItemOwnProps, GridItemProps, GridOwnProps, GridProps, HeaderBreadcrumb, HeaderOwnProps, HeaderPageBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkOwnProps, LinkProps, ListOwnProps, ListProps, ListRowOwnProps, ListRowProps, MarginProps, MenuAutocompleteListBoxOwnProps, MenuAutocompleteListBoxProps, MenuAutocompleteOwnProps, MenuAutocompleteProps, MenuItemOwnProps, MenuItemProps, MenuListBoxItemOwnProps, MenuListBoxItemProps, MenuListBoxOwnProps, MenuListBoxProps, MenuOwnProps, MenuPopoverOwnProps, MenuProps, MenuSectionOwnProps, MenuSectionProps, MenuSeparatorOwnProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PaddingProps, PagePagination, PageSizeOption, PaginationOptions, PasswordFieldOwnProps, PasswordFieldProps, PluginHeaderOwnProps, PluginHeaderProps, PopoverOwnProps, PopoverProps, ProviderBg, QueryOptions, RadioGroupOwnProps, RadioGroupProps, RadioOwnProps, RadioProps, Responsive, RowConfig, RowOwnProps, RowProps, RowRenderFn, SearchAutocompleteItemOwnProps, SearchAutocompleteItemProps, SearchAutocompleteOwnProps, SearchAutocompleteProps, SearchFieldOwnProps, SearchFieldProps, SearchState, SelectOwnProps, SelectProps, SkeletonOwnProps, SkeletonProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, SwitchOwnProps, SwitchProps, TabListOwnProps, TabListProps, TabMatchStrategy, TabOwnProps, TabPanelOwnProps, TabPanelProps, TabProps, TableBodyOwnProps, TableBodyProps, TableHeaderOwnProps, TableHeaderProps, TableItem, TablePaginationOwnProps, TablePaginationProps, TablePaginationType, TableProps, TableRootOwnProps, TableRootProps, TableSelection, TabsOwnProps, TabsProps, TagGroupOwnProps, TagGroupProps, TagOwnProps, TagProps, TextColorStatus, TextColors, TextFieldOwnProps, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupOwnProps, ToggleButtonGroupProps, ToggleButtonOwnProps, ToggleButtonProps, TooltipOwnProps, TooltipProps, UseAnalyticsFn, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VirtualizedProp, VisuallyHiddenOwnProps, VisuallyHiddenProps };
+export { Accordion, AccordionDefinition, AccordionGroup, AccordionGroupDefinition, AccordionPanel, AccordionPanelDefinition, AccordionTrigger, AccordionTriggerDefinition, Alert, AlertDefinition, Avatar, AvatarDefinition, BUIProvider, BgProvider, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardBodyDefinition, CardDefinition, CardFooter, CardFooterDefinition, CardHeader, CardHeaderDefinition, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogBodyDefinition, DialogDefinition, DialogFooter, DialogFooterDefinition, DialogHeader, DialogHeaderDefinition, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, FullPage, FullPageDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, List, ListDefinition, ListRow, ListRowDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, PasswordField, PasswordFieldDefinition, PluginHeader, PluginHeaderDefinition, Popover, PopoverDefinition, Radio, RadioDefinition, RadioGroup, RadioGroupDefinition, Row, SearchAutocomplete, SearchAutocompleteDefinition, SearchAutocompleteItem, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, getNodeText, useAnalytics, useBgConsumer, useBgProvider, useBreakpoint, useTable };
+export type { AccordionGroupOwnProps, AccordionGroupProps, AccordionOwnProps, AccordionPanelOwnProps, AccordionPanelProps, AccordionProps, AccordionTriggerOwnProps, AccordionTriggerProps, AlertOwnProps, AlertProps, AlignItems, AnalyticsEventAttributes, AnalyticsTracker, AvatarOwnProps, AvatarProps, BUIProviderProps, BgContextValue, BgProviderProps, Border, BorderRadius, BoxOwnProps, BoxProps, BoxUtilityProps, Breakpoint, ButtonIconOwnProps, ButtonIconProps, ButtonLinkOwnProps, ButtonLinkProps, ButtonOwnProps, ButtonProps, CardBaseProps, CardBodyOwnProps, CardBodyProps, CardButtonVariant, CardFooterOwnProps, CardFooterProps, CardHeaderOwnProps, CardHeaderProps, CardLinkVariant, CardOwnProps, CardProps, CardStaticVariant, CellOwnProps, CellProfileOwnProps, CellProfileProps, CellProps, CellTextOwnProps, CellTextProps, CheckboxOwnProps, CheckboxProps, ColumnConfig, ColumnOwnProps, ColumnProps, Columns, ContainerBg, ContainerOwnProps, ContainerProps, CursorParams, CursorResponse, DialogBodyOwnProps, DialogBodyProps, DialogFooterOwnProps, DialogFooterProps, DialogHeaderOwnProps, DialogHeaderProps, DialogOwnProps, DialogProps, DialogTriggerProps, Display, FieldLabelOwnProps, FieldLabelProps, FilterState, FlexDirection, FlexOwnProps, FlexProps, FlexWrap, FullPageOwnProps, FullPageProps, GridItemOwnProps, GridItemProps, GridOwnProps, GridProps, HeaderBreadcrumb, HeaderNavTab, HeaderNavTabGroup, HeaderNavTabItem, HeaderOwnProps, HeaderPageBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkOwnProps, LinkProps, ListOwnProps, ListProps, ListRowOwnProps, ListRowProps, MarginProps, MenuAutocompleteListBoxOwnProps, MenuAutocompleteListBoxProps, MenuAutocompleteOwnProps, MenuAutocompleteProps, MenuItemOwnProps, MenuItemProps, MenuListBoxItemOwnProps, MenuListBoxItemProps, MenuListBoxOwnProps, MenuListBoxProps, MenuOwnProps, MenuPopoverOwnProps, MenuProps, MenuSectionOwnProps, MenuSectionProps, MenuSeparatorOwnProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PaddingProps, PagePagination, PageSizeOption, PaginationOptions, PasswordFieldOwnProps, PasswordFieldProps, PluginHeaderOwnProps, PluginHeaderProps, PopoverOwnProps, PopoverProps, ProviderBg, QueryOptions, RadioGroupOwnProps, RadioGroupProps, RadioOwnProps, RadioProps, Responsive, RowConfig, RowOwnProps, RowProps, RowRenderFn, SearchAutocompleteItemOwnProps, SearchAutocompleteItemProps, SearchAutocompleteOwnProps, SearchAutocompleteProps, SearchFieldOwnProps, SearchFieldProps, SearchState, SelectOwnProps, SelectProps, SkeletonOwnProps, SkeletonProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, SwitchOwnProps, SwitchProps, TabListOwnProps, TabListProps, TabMatchStrategy, TabOwnProps, TabPanelOwnProps, TabPanelProps, TabProps, TableBodyOwnProps, TableBodyProps, TableHeaderOwnProps, TableHeaderProps, TableItem, TablePaginationOwnProps, TablePaginationProps, TablePaginationType, TableProps, TableRootOwnProps, TableRootProps, TableSelection, TabsOwnProps, TabsProps, TagGroupOwnProps, TagGroupProps, TagOwnProps, TagProps, TextColorStatus, TextColors, TextFieldOwnProps, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupOwnProps, ToggleButtonGroupProps, ToggleButtonOwnProps, ToggleButtonProps, TooltipOwnProps, TooltipProps, UseAnalyticsFn, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VirtualizedProp, VisuallyHiddenOwnProps, VisuallyHiddenProps };

package/dist/index.esm.js

@@ -26,6 +26,7 @@ export { PluginHeader } from './components/PluginHeader/PluginHeader.esm.js';
 export { PluginHeaderDefinition } from './components/PluginHeader/definition.esm.js';
 export { Header, HeaderPage } from './components/Header/Header.esm.js';
 export { HeaderDefinition, HeaderPageDefinition } from './components/Header/definition.esm.js';
+export { HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition } from './components/Header/HeaderNavDefinition.esm.js';
 export { ButtonIcon } from './components/ButtonIcon/ButtonIcon.esm.js';
 export { ButtonIconDefinition } from './components/ButtonIcon/definition.esm.js';
 export { ButtonLink } from './components/ButtonLink/ButtonLink.esm.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.13.1",
+  "version": "0.14.0-next.0",
   "backstage": {
     "role": "web-library"
   },
@@ -50,15 +50,20 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/version-bridge": "^1.0.12",
+    "@backstage/version-bridge": "1.0.12",
+    "@react-aria/interactions": "^3.27.1",
+    "@react-stately/layout": "^4.6.0",
+    "@react-stately/overlays": "^3.6.23",
     "@remixicon/react": "^4.6.0",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
+    "react-aria": "^3.47.0",
     "react-aria-components": "^1.14.0",
+    "react-stately": "^3.45.0",
     "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.36.0",
+    "@backstage/cli": "0.36.1-next.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/use-sync-external-store": "^0.0.6",
@@ -71,9 +76,9 @@
     "storybook": "^10.3.0-alpha.1"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-router-dom": "^6.30.2"
   },
   "peerDependenciesMeta": {