@backstage/core-components 0.7.5 → 0.7.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @backstage/core-components
 
+## 0.7.6
+
+### Patch Changes
+
+- e34f174fc5: Added `<SidebarSubmenu>` and `<SidebarSubmenuItem>` to enable building better sidebars. You can check out the storybook for more inspiration and how to get started.
+
+  Added two new theme props for styling the sidebar too, `navItem.hoverBackground` and `submenu.background`.
+
+- Updated dependencies
+  - @backstage/theme@0.2.14
+  - @backstage/core-plugin-api@0.2.2
+
 ## 0.7.5
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1225,8 +1225,67 @@ declare type SidebarClassKey = 'root' | 'drawer' | 'drawerOpen';
 declare type Props$3 = {
     openDelayMs?: number;
     closeDelayMs?: number;
+    disableExpandOnHover?: boolean;
 };
 declare function Sidebar(props: PropsWithChildren<Props$3>): JSX.Element;
+/**
+ * A button which allows you to expand the sidebar when clicked.
+ * Use optionally to replace sidebar's expand-on-hover feature with expand-on-click.
+ *
+ * @public
+ */
+declare const SidebarExpandButton: () => JSX.Element | null;
+
+/**
+ * Clickable item displayed when submenu item is clicked.
+ * title: Text content of item
+ * to: Path to navigate to when item is clicked
+ *
+ * @public
+ */
+declare type SidebarSubmenuItemDropdownItem = {
+    title: string;
+    to: string;
+};
+/**
+ * Holds submenu item content.
+ *
+ * title: Text content of submenu item
+ * to: Path to navigate to when item is clicked
+ * icon: Icon displayed on the left of text content
+ * dropdownItems: Optional array of dropdown items displayed when submenu item is clicked.
+ *
+ * @public
+ */
+declare type SidebarSubmenuItemProps = {
+    title: string;
+    to: string;
+    icon: IconComponent;
+    dropdownItems?: SidebarSubmenuItemDropdownItem[];
+};
+/**
+ * Item used inside a submenu within the sidebar.
+ *
+ * @public
+ */
+declare const SidebarSubmenuItem: (props: SidebarSubmenuItemProps) => JSX.Element;
+
+/**
+ * Holds a title for text Header of a sidebar submenu and children
+ * components to be rendered inside SidebarSubmenu
+ *
+ * @public
+ */
+declare type SidebarSubmenuProps = {
+    title?: string;
+    children: ReactNode;
+};
+/**
+ * Used inside SidebarItem to display an expandable Submenu
+ *
+ * @public
+ */
+declare const SidebarSubmenu: ({ title, children, }: PropsWithChildren<SidebarSubmenuProps>) => JSX.Element;
 
 declare type SidebarPageClassKey = 'root';
 declare type SidebarPinStateContextType = {
@@ -1241,17 +1300,28 @@ declare type SidebarItemBaseProps = {
     icon: IconComponent;
     text?: string;
     hasNotifications?: boolean;
-    children?: ReactNode;
+    disableHighlight?: boolean;
     className?: string;
 };
 declare type SidebarItemButtonProps = SidebarItemBaseProps & {
     onClick: (ev: React__default.MouseEvent) => void;
+    children?: ReactNode;
 };
 declare type SidebarItemLinkProps = SidebarItemBaseProps & {
     to: string;
     onClick?: (ev: React__default.MouseEvent) => void;
 } & NavLinkProps;
-declare type SidebarItemProps = SidebarItemButtonProps | SidebarItemLinkProps;
+declare type SidebarItemWithSubmenuProps = SidebarItemBaseProps & {
+    to?: string;
+    onClick?: (ev: React__default.MouseEvent) => void;
+    children: ReactNode;
+};
+/**
+ * SidebarItem with 'to' property will be a clickable link.
+ * SidebarItem with 'onClick' property and without 'to' property will be a clickable button.
+ * SidebarItem which wraps a SidebarSubmenu will be a clickable button which opens a submenu.
+ */
+declare type SidebarItemProps = SidebarItemLinkProps | SidebarItemButtonProps | SidebarItemWithSubmenuProps;
 declare const SidebarItem: React__default.ForwardRefExoticComponent<SidebarItemProps & React__default.RefAttributes<any>>;
 declare type SidebarSearchFieldProps = {
     onSearch: (input: string) => void;
@@ -1299,6 +1369,7 @@ declare const sidebarConfig: {
 declare const SIDEBAR_INTRO_LOCAL_STORAGE = "@backstage/core/sidebar-intro-dismissed";
 declare type SidebarContextType = {
     isOpen: boolean;
+    setOpen: (open: boolean) => void;
 };
 declare const SidebarContext: React.Context<SidebarContextType>;
 
@@ -1434,4 +1505,4 @@ declare type BackstageOverrides = Overrides & {
     [Name in keyof BackstageComponentsNameToClassKey]?: Partial<StyleRules<BackstageComponentsNameToClassKey[Name]>>;
 };
 
-export { AlertDisplay, Avatar, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLink, BottomLinkClassKey, BottomLinkProps, Breadcrumbs, BreadcrumbsClickableTextClassKey, BreadcrumbsStyledBoxClassKey, BrokenImageIcon, ActualButton as Button, ButtonProps, CardActionsTopRightClassKey, CardTab, CardTabClassKey, CatalogIcon, ChatIcon, ClosedDropdownClassKey, CodeSnippet, CodeSnippetProps, Content, ContentHeader, ContentHeaderClassKey, CopyTextButton, CopyTextButtonProps, CreateButton, CreateButtonProps, CustomProviderClassKey, DashboardIcon, DependencyGraph, DependencyGraphDefaultLabelClassKey, DependencyGraphDefaultNodeClassKey, DependencyGraphEdgeClassKey, DependencyGraphNodeClassKey, DependencyGraphProps, types_d as DependencyGraphTypes, DismissableBanner, DismissableBannerClassKey, DismissbleBannerClassKey, DocsIcon, EmailIcon, EmptyState, EmptyStateClassKey, EmptyStateImageClassKey, ErrorBoundary, ErrorBoundaryProps, ErrorPage, ErrorPageClassKey, ErrorPanel, ErrorPanelClassKey, ErrorPanelProps, FeatureCalloutCircleClassKey, FeatureCalloutCircular, FiltersContainerClassKey, Gauge, GaugeCard, GaugeCardClassKey, GaugeClassKey, GaugeProps, GaugePropsGetColor, GaugePropsGetColorOptions, GitHubIcon, GroupIcon, Header, HeaderClassKey, HeaderIconLinkRow, HeaderIconLinkRowClassKey, HeaderLabel, HeaderLabelClassKey, HeaderTabs, HeaderTabsClassKey, HelpIcon, HomepageTimer, HorizontalScrollGrid, HorizontalScrollGridClassKey, IconLinkVerticalClassKey, IconLinkVerticalProps, InfoCard, InfoCardClassKey, InfoCardVariants, IntroCard, ItemCard, ItemCardGrid, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeader, ItemCardHeaderClassKey, ItemCardHeaderProps, Lifecycle, LifecycleClassKey, LinearGauge, ActualLink as Link, LinkProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarPage, SidebarPageClassKey, SidebarPinStateContext, SidebarPinStateContextType, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpacer, SignInPage, SignInPageClassKey, SignInProviderConfig, SimpleStepper, SimpleStepperFooterClassKey, SimpleStepperStep, SimpleStepperStepClassKey, StatusAborted, StatusClassKey, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, SubvalueCell, SubvalueCellClassKey, SupportButton, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabBarClassKey, TabIconClassKey, TabbedCard, TabbedCardClassKey, TabbedLayout, Table, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableProps, TableState, TableToolbarClassKey, Tabs, TabsClassKey, TrendLine, UserIcon, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useQueryParamState, useSupportConfig };
+export { AlertDisplay, Avatar, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLink, BottomLinkClassKey, BottomLinkProps, Breadcrumbs, BreadcrumbsClickableTextClassKey, BreadcrumbsStyledBoxClassKey, BrokenImageIcon, ActualButton as Button, ButtonProps, CardActionsTopRightClassKey, CardTab, CardTabClassKey, CatalogIcon, ChatIcon, ClosedDropdownClassKey, CodeSnippet, CodeSnippetProps, Content, ContentHeader, ContentHeaderClassKey, CopyTextButton, CopyTextButtonProps, CreateButton, CreateButtonProps, CustomProviderClassKey, DashboardIcon, DependencyGraph, DependencyGraphDefaultLabelClassKey, DependencyGraphDefaultNodeClassKey, DependencyGraphEdgeClassKey, DependencyGraphNodeClassKey, DependencyGraphProps, types_d as DependencyGraphTypes, DismissableBanner, DismissableBannerClassKey, DismissbleBannerClassKey, DocsIcon, EmailIcon, EmptyState, EmptyStateClassKey, EmptyStateImageClassKey, ErrorBoundary, ErrorBoundaryProps, ErrorPage, ErrorPageClassKey, ErrorPanel, ErrorPanelClassKey, ErrorPanelProps, FeatureCalloutCircleClassKey, FeatureCalloutCircular, FiltersContainerClassKey, Gauge, GaugeCard, GaugeCardClassKey, GaugeClassKey, GaugeProps, GaugePropsGetColor, GaugePropsGetColorOptions, GitHubIcon, GroupIcon, Header, HeaderClassKey, HeaderIconLinkRow, HeaderIconLinkRowClassKey, HeaderLabel, HeaderLabelClassKey, HeaderTabs, HeaderTabsClassKey, HelpIcon, HomepageTimer, HorizontalScrollGrid, HorizontalScrollGridClassKey, IconLinkVerticalClassKey, IconLinkVerticalProps, InfoCard, InfoCardClassKey, InfoCardVariants, IntroCard, ItemCard, ItemCardGrid, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeader, ItemCardHeaderClassKey, ItemCardHeaderProps, Lifecycle, LifecycleClassKey, LinearGauge, ActualLink as Link, LinkProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarExpandButton, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarPage, SidebarPageClassKey, SidebarPinStateContext, SidebarPinStateContextType, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpacer, SidebarSubmenu, SidebarSubmenuItem, SidebarSubmenuItemDropdownItem, SidebarSubmenuItemProps, SidebarSubmenuProps, SignInPage, SignInPageClassKey, SignInProviderConfig, SimpleStepper, SimpleStepperFooterClassKey, SimpleStepperStep, SimpleStepperStepClassKey, StatusAborted, StatusClassKey, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, SubvalueCell, SubvalueCellClassKey, SupportButton, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabBarClassKey, TabIconClassKey, TabbedCard, TabbedCardClassKey, TabbedLayout, Table, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableProps, TableState, TableToolbarClassKey, Tabs, TabsClassKey, TrendLine, UserIcon, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useQueryParamState, useSupportConfig };