@backstage/core-components 0.9.3 → 0.9.4-next.2

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @backstage/core-components
 
+## 0.9.4-next.2
+
+### Patch Changes
+
+- 52c02ac02b: Don't set the background color on an Avatar component that has a picture.
+- 3603014e0e: Add ARIA landmark( <main>), & label and a heading to OAuthRequestDialog. Removed nested interactive control (button).
+- 2025d7c123: Properly highlight `SidebarSubmenuItem` dropdown items on hover, use ellipsis styling on long labels in `SidebarSubmenu`, allow `icon` and `to` properties to be optional on `SidebarSubmenuItem`, and fix `SidebarPage` padding to be responsive to pinned state
+
+## 0.9.4-next.1
+
+### Patch Changes
+
+- 55f68c386a: Enabled select component to be enabled by keyboard
+- ba97b80421: Updated dependency `@types/react-syntax-highlighter` to `^15.0.0`.
+- 2bcb0a0e2b: Sidebar NAV now includes aria-label. Component AboutField now uses h2 variant instead of subtitle2 (font properties unchanged)
+- Updated dependencies
+  - @backstage/config@1.0.1-next.0
+  - @backstage/core-plugin-api@1.0.2-next.1
+
+## 0.9.4-next.0
+
+### Patch Changes
+
+- ac19f82936: Added ARIA landmark <main> to Page component and added ARIA landmark <nav> to DesktopSidebar and Sidebar components
+- c0055ece91: Announce external links to screen readers
+- cfc0f2e5bd: Added optional anchorOrigin alignment prop to AlertDisplay
+- f4380eb602: Add an aria-label to the support button to improve accessibility for screen readers
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.2-next.0
+
 ## 0.9.3
 
 ### Patch Changes

package/dist/index.d.ts

@@ -28,9 +28,16 @@ import { Overrides } from '@material-ui/core/styles/overrides';
  * @public
  * @remarks
  *
- * Shown as SnackBar at the top of the page
+ * Shown as SnackBar at the center top of the page by default. Configurable with props.
  */
-declare function AlertDisplay(_props: {}): JSX.Element | null;
+declare type AlertDisplayProps = {
+    anchorOrigin?: {
+        vertical: 'top' | 'bottom';
+        horizontal: 'left' | 'center' | 'right';
+    };
+};
+/** @public */
+declare function AlertDisplay(props: AlertDisplayProps): JSX.Element | null;
 
 /** @public */
 declare type AvatarClassKey = 'avatar';
@@ -1515,8 +1522,8 @@ declare type SidebarSubmenuItemDropdownItem = {
  */
 declare type SidebarSubmenuItemProps = {
     title: string;
-    to: string;
-    icon: IconComponent;
+    to?: string;
+    icon?: IconComponent;
     dropdownItems?: SidebarSubmenuItemDropdownItem[];
 };
 /**
@@ -1892,4 +1899,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, 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, IdentityProviders, InfoCard, InfoCardClassKey, InfoCardVariants, IntroCard, ItemCard, ItemCardGrid, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeader, ItemCardHeaderClassKey, ItemCardHeaderProps, Lifecycle, LifecycleClassKey, LinearGauge, Link, LinkProps, LogViewer, LogViewerClassKey, LogViewerProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, MobileSidebar, MobileSidebarProps, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ProxiedSignInPage, ProxiedSignInPageProps, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, SelectItem, SelectedItems, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarDividerClassKey, SidebarExpandButton, SidebarGroup, SidebarGroupProps, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarOptions, SidebarPage, SidebarPageClassKey, SidebarPageProps, SidebarPinStateContext, SidebarPinStateContextType, SidebarProps, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpaceClassKey, SidebarSpacer, SidebarSpacerClassKey, SidebarSubmenu, SidebarSubmenuItem, SidebarSubmenuItemDropdownItem, SidebarSubmenuItemProps, SidebarSubmenuProps, SignInPage, SignInPageClassKey, SignInProviderConfig, SimpleStepper, SimpleStepperFooterClassKey, SimpleStepperStep, SimpleStepperStepClassKey, StatusAborted, StatusClassKey, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, SubmenuOptions, SubvalueCell, SubvalueCellClassKey, SupportButton, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabBarClassKey, TabClassKey, TabIconClassKey, TabbedCard, TabbedCardClassKey, TabbedLayout, Table, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableProps, TableState, TableToolbarClassKey, Tabs, TabsClassKey, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useContent, useQueryParamState, useSupportConfig };
+export { AlertDisplay, AlertDisplayProps, Avatar, AvatarClassKey, AvatarProps, BackstageContentClassKey, BackstageOverrides, BoldHeaderClassKey, BottomLink, BottomLinkClassKey, BottomLinkProps, Breadcrumbs, BreadcrumbsClickableTextClassKey, BreadcrumbsStyledBoxClassKey, BrokenImageIcon, 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, IdentityProviders, InfoCard, InfoCardClassKey, InfoCardVariants, IntroCard, ItemCard, ItemCardGrid, ItemCardGridClassKey, ItemCardGridProps, ItemCardHeader, ItemCardHeaderClassKey, ItemCardHeaderProps, Lifecycle, LifecycleClassKey, LinearGauge, Link, LinkProps, LogViewer, LogViewerClassKey, LogViewerProps, LoginRequestListItemClassKey, MarkdownContent, MarkdownContentClassKey, MetadataTableCellClassKey, MetadataTableListClassKey, MetadataTableListItemClassKey, MetadataTableTitleCellClassKey, MicDropClassKey, MissingAnnotationEmptyState, MissingAnnotationEmptyStateClassKey, MobileSidebar, MobileSidebarProps, OAuthRequestDialog, OAuthRequestDialogClassKey, OpenedDropdownClassKey, OverflowTooltip, OverflowTooltipClassKey, Page, PageClassKey, PageWithHeader, Progress, ProxiedSignInPage, ProxiedSignInPageProps, ResponseErrorPanel, ResponseErrorPanelClassKey, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, SelectClassKey, SelectInputBaseClassKey, SelectItem, SelectedItems, Sidebar, SidebarClassKey, SidebarContext, SidebarContextType, SidebarDivider, SidebarDividerClassKey, SidebarExpandButton, SidebarGroup, SidebarGroupProps, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarOptions, SidebarPage, SidebarPageClassKey, SidebarPageProps, SidebarPinStateContext, SidebarPinStateContextType, SidebarProps, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpaceClassKey, SidebarSpacer, SidebarSpacerClassKey, SidebarSubmenu, SidebarSubmenuItem, SidebarSubmenuItemDropdownItem, SidebarSubmenuItemProps, SidebarSubmenuProps, SignInPage, SignInPageClassKey, SignInProviderConfig, SimpleStepper, SimpleStepperFooterClassKey, SimpleStepperStep, SimpleStepperStepClassKey, StatusAborted, StatusClassKey, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, StructuredMetadataTableListClassKey, StructuredMetadataTableNestedListClassKey, SubmenuOptions, SubvalueCell, SubvalueCellClassKey, SupportButton, SupportButtonClassKey, SupportConfig, SupportItem, SupportItemLink, Tab, TabBarClassKey, TabClassKey, TabIconClassKey, TabbedCard, TabbedCardClassKey, TabbedLayout, Table, TableClassKey, TableColumn, TableFilter, TableFiltersClassKey, TableHeaderClassKey, TableProps, TableState, TableToolbarClassKey, Tabs, TabsClassKey, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, WarningPanelClassKey, sidebarConfig, useContent, useQueryParamState, useSupportConfig };

package/dist/index.esm.js

@@ -71,6 +71,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import Chip from '@material-ui/core/Chip';
 import FormControl from '@material-ui/core/FormControl';
 import InputBase from '@material-ui/core/InputBase';
+import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import SvgIcon from '@material-ui/core/SvgIcon';
@@ -131,9 +132,10 @@ import { useForm } from 'react-hook-form';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import isEmpty from 'lodash/isEmpty';
 
-function AlertDisplay(_props) {
+function AlertDisplay(props) {
   const [messages, setMessages] = useState([]);
   const alertApi = useApi(alertApiRef);
+  const { anchorOrigin = { vertical: "top", horizontal: "center" } } = props;
   useEffect(() => {
     const subscription = alertApi.alert$().subscribe((message) => setMessages((msgs) => msgs.concat(message)));
     return () => {
@@ -149,7 +151,7 @@ function AlertDisplay(_props) {
   };
   return /* @__PURE__ */ React.createElement(Snackbar, {
     open: true,
-    anchorOrigin: { vertical: "top", horizontal: "center" }
+    anchorOrigin
   }, /* @__PURE__ */ React.createElement(Alert, {
     action: /* @__PURE__ */ React.createElement(IconButton, {
       color: "inherit",
@@ -178,7 +180,7 @@ function extractInitials(value) {
   return (_a = value.match(/\b\w/g)) == null ? void 0 : _a.join("").substring(0, 2);
 }
 
-const useStyles$R = makeStyles((theme) => createStyles({
+const useStyles$S = makeStyles((theme) => createStyles({
   avatar: {
     width: "4rem",
     height: "4rem",
@@ -190,18 +192,33 @@ const useStyles$R = makeStyles((theme) => createStyles({
 }), { name: "BackstageAvatar" });
 function Avatar(props) {
   const { displayName, picture, customStyles } = props;
-  const classes = useStyles$R();
+  const classes = useStyles$S();
+  let styles = { ...customStyles };
+  if (!picture) {
+    styles = {
+      backgroundColor: stringToColor(displayName || ""),
+      ...customStyles
+    };
+  }
   return /* @__PURE__ */ React.createElement(MaterialAvatar, {
     alt: displayName,
     src: picture,
     className: classes.avatar,
-    style: {
-      backgroundColor: stringToColor(displayName || picture || ""),
-      ...customStyles
-    }
+    style: styles
   }, displayName && extractInitials(displayName));
 }
 
+const useStyles$R = makeStyles({
+  visuallyHidden: {
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    overflow: "hidden",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    height: 1,
+    width: 1
+  }
+}, { name: "Link" });
 const isExternalUri = (uri) => /^([a-z+.-]+):/.test(uri);
 const getNodeText = (node) => {
   var _a;
@@ -217,6 +234,7 @@ const getNodeText = (node) => {
   return "";
 };
 const Link = React.forwardRef(({ onClick, noTrack, ...props }, ref) => {
+  const classes = useStyles$R();
   const analytics = useAnalytics();
   const to = String(props.to);
   const linkText = getNodeText(props.children) || to;
@@ -234,7 +252,9 @@ const Link = React.forwardRef(({ onClick, noTrack, ...props }, ref) => {
     onClick: handleClick,
     ...newWindow ? { target: "_blank", rel: "noopener" } : {},
     ...props
-  }) : /* @__PURE__ */ React.createElement(Link$1, {
+  }, props.children, /* @__PURE__ */ React.createElement("span", {
+    className: classes.visuallyHidden
+  }, ", Opens in a new window")) : /* @__PURE__ */ React.createElement(Link$1, {
     ref,
     component: Link$2,
     onClick: handleClick,
@@ -1702,7 +1722,6 @@ const LoginRequestListItem = ({ request, busy, setBusy }) => {
   };
   const IconComponent = request.provider.icon;
   return /* @__PURE__ */ React.createElement(ListItem, {
-    button: true,
     disabled: busy,
     classes: { root: classes.root }
   }, /* @__PURE__ */ React.createElement(ListItemAvatar, null, /* @__PURE__ */ React.createElement(IconComponent, {
@@ -1726,6 +1745,9 @@ const useStyles$A = makeStyles((theme) => ({
   title: {
     minWidth: 0
   },
+  titleHeading: {
+    fontSize: theme.typography.h6.fontSize
+  },
   contentList: {
     padding: 0
   },
@@ -1745,10 +1767,15 @@ function OAuthRequestDialog(_props) {
     open: Boolean(requests.length),
     fullWidth: true,
     maxWidth: "xs",
-    classes: { paper: classes.dialog }
-  }, /* @__PURE__ */ React.createElement(DialogTitle, {
-    classes: { root: classes.title }
-  }, "Login Required"), /* @__PURE__ */ React.createElement(DialogContent, {
+    classes: { paper: classes.dialog },
+    "aria-labelledby": "oauth-req-dialog-title"
+  }, /* @__PURE__ */ React.createElement("main", null, /* @__PURE__ */ React.createElement(DialogTitle, {
+    classes: { root: classes.title },
+    id: "oauth-req-dialog-title"
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    className: classes.titleHeading,
+    variant: "h1"
+  }, "Login Required")), /* @__PURE__ */ React.createElement(DialogContent, {
     dividers: true,
     classes: { root: classes.contentList }
   }, /* @__PURE__ */ React.createElement(List, null, requests.map((request) => /* @__PURE__ */ React.createElement(LoginRequestListItem, {
@@ -1756,7 +1783,7 @@ function OAuthRequestDialog(_props) {
     request,
     busy,
     setBusy
-  })))), /* @__PURE__ */ React.createElement(DialogActions, {
+  }))))), /* @__PURE__ */ React.createElement(DialogActions, {
     classes: { root: classes.actionButtons }
   }, /* @__PURE__ */ React.createElement(Button$1, {
     onClick: handleRejectAll
@@ -2249,6 +2276,16 @@ const useStyles$s = makeStyles((theme) => createStyles({
       color: theme.palette.text.primary
     }
   },
+  formLabel: {
+    transform: "initial",
+    fontWeight: "bold",
+    fontSize: 14,
+    fontFamily: theme.typography.fontFamily,
+    color: theme.palette.text.primary,
+    "&.Mui-focused": {
+      color: theme.palette.text.primary
+    }
+  },
   chips: {
     display: "flex",
     flexWrap: "wrap"
@@ -2311,13 +2348,13 @@ function SelectComponent(props) {
   };
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.root
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "button"
-  }, label), /* @__PURE__ */ React.createElement(ClickAwayListener, {
+  }, /* @__PURE__ */ React.createElement(ClickAwayListener, {
     onClickAway: handleClickAway
   }, /* @__PURE__ */ React.createElement(FormControl, {
     className: classes.formControl
-  }, /* @__PURE__ */ React.createElement(Select, {
+  }, /* @__PURE__ */ React.createElement(InputLabel, {
+    className: classes.formLabel
+  }, label), /* @__PURE__ */ React.createElement(Select, {
     value,
     native,
     disabled,
@@ -2328,6 +2365,8 @@ function SelectComponent(props) {
     onClick: handleClick,
     open: isOpen,
     input: /* @__PURE__ */ React.createElement(BootstrapInput, null),
+    label,
+    tabIndex: 0,
     renderValue: (s) => {
       var _a;
       return multiple && value.length !== 0 ? /* @__PURE__ */ React.createElement("div", {
@@ -2940,6 +2979,7 @@ function SupportButton(props) {
     "data-testid": "support-button"
   }, /* @__PURE__ */ React.createElement(HelpIcon, null)) : /* @__PURE__ */ React.createElement(Button$1, {
     "data-testid": "support-button",
+    "aria-label": "support",
     color: "primary",
     onClick: onClickHandler,
     startIcon: /* @__PURE__ */ React.createElement(HelpIcon, null)
@@ -3040,17 +3080,17 @@ const LocalStorage = {
 };
 
 const useStyles$n = makeStyles((theme) => ({
-  root: (props) => ({
+  root: {
     width: "100%",
     transition: "padding-left 0.1s ease-out",
     isolation: "isolate",
     [theme.breakpoints.up("sm")]: {
-      paddingLeft: () => props.isPinned ? props.sidebarConfig.drawerWidthOpen : props.sidebarConfig.drawerWidthClosed
+      paddingLeft: (props) => props.isPinned ? props.sidebarConfig.drawerWidthOpen : props.sidebarConfig.drawerWidthClosed
     },
     [theme.breakpoints.down("xs")]: {
-      paddingBottom: props.sidebarConfig.mobileSidebarHeight
+      paddingBottom: (props) => props.sidebarConfig.mobileSidebarHeight
     }
-  }),
+  },
   content: {
     zIndex: 0,
     isolation: "isolate",
@@ -3218,7 +3258,9 @@ const OverlayMenu = ({
   }, label), /* @__PURE__ */ React.createElement(IconButton, {
     onClick: onClose,
     classes: { root: classes.overlayHeaderClose }
-  }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement(Box, null, children));
+  }, /* @__PURE__ */ React.createElement(CloseIcon, null))), /* @__PURE__ */ React.createElement(Box, {
+    component: "nav"
+  }, children));
 };
 const MobileSidebarContext = createContext({
   selectedMenuItemIndex: -1,
@@ -3257,7 +3299,8 @@ const MobileSidebar = (props) => {
     onClose: () => setSelectedMenuItemIndex(-1)
   }, sidebarGroups[selectedMenuItemIndex] && sidebarGroups[selectedMenuItemIndex].props.children), /* @__PURE__ */ React.createElement(BottomNavigation, {
     className: classes.root,
-    "data-testid": "mobile-sidebar-root"
+    "data-testid": "mobile-sidebar-root",
+    component: "nav"
   }, sidebarGroups)));
 };
 
@@ -3360,8 +3403,9 @@ const DesktopSidebar = (props) => {
       toggleSidebarPinState();
     }
   };
-  return /* @__PURE__ */ React.createElement("div", {
-    style: {}
+  return /* @__PURE__ */ React.createElement("nav", {
+    style: {},
+    "aria-label": "sidebar nav"
   }, /* @__PURE__ */ React.createElement(A11ySkipSidebar, null), /* @__PURE__ */ React.createElement(SidebarContext.Provider, {
     value: { isOpen, setOpen }
   }, /* @__PURE__ */ React.createElement("div", {
@@ -3445,7 +3489,10 @@ const useStyles$j = makeStyles((theme) => ({
   label: {
     margin: 14,
     marginLeft: 7,
-    fontSize: 14
+    fontSize: 14,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    "text-overflow": "ellipsis"
   },
   dropdownArrow: {
     position: "absolute",
@@ -3458,17 +3505,20 @@ const useStyles$j = makeStyles((theme) => ({
   },
   dropdownItem: {
     width: "100%",
-    padding: "10px 0 10px 0"
+    padding: "10px 0 10px 0",
+    "&:hover": {
+      background: "#6f6f6f",
+      color: theme.palette.navigation.selectedColor
+    }
   },
   textContent: {
     color: theme.palette.navigation.color,
-    display: "flex",
-    justifyContent: "center",
-    [theme.breakpoints.down("xs")]: {
-      display: "block",
-      paddingLeft: theme.spacing(4)
-    },
-    fontSize: "14px"
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(1),
+    fontSize: "14px",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    "text-overflow": "ellipsis"
   }
 }), { name: "BackstageSidebarSubmenuItem" });
 const SidebarSubmenuItem = (props) => {
@@ -3478,7 +3528,7 @@ const SidebarSubmenuItem = (props) => {
   const closeSubmenu = () => {
     setIsHoveredOn(false);
   };
-  const toLocation = useResolvedPath(to);
+  const toLocation = useResolvedPath(to != null ? to : "");
   const currentLocation = useLocation();
   let isActive = isLocationMatch(currentLocation, toLocation);
   const [showDropDown, setShowDropDown] = useState(false);
@@ -3493,11 +3543,15 @@ const SidebarSubmenuItem = (props) => {
     });
     return /* @__PURE__ */ React.createElement("div", {
       className: classes.itemContainer
+    }, /* @__PURE__ */ React.createElement(Tooltip, {
+      title,
+      enterDelay: 500,
+      enterNextDelay: 500
     }, /* @__PURE__ */ React.createElement("button", {
       onClick: handleClickDropdown,
       onTouchStart: (e) => e.stopPropagation(),
       className: classNames(classes.item, isActive ? classes.selected : void 0)
-    }, /* @__PURE__ */ React.createElement(Icon, {
+    }, Icon && /* @__PURE__ */ React.createElement(Icon, {
       fontSize: "small"
     }), /* @__PURE__ */ React.createElement(Typography, {
       variant: "subtitle1",
@@ -3506,33 +3560,41 @@ const SidebarSubmenuItem = (props) => {
       className: classes.dropdownArrow
     }) : /* @__PURE__ */ React.createElement(ArrowDropDownIcon, {
       className: classes.dropdownArrow
-    })), dropdownItems && showDropDown && /* @__PURE__ */ React.createElement("div", {
+    }))), dropdownItems && showDropDown && /* @__PURE__ */ React.createElement("div", {
       className: classes.dropdown
-    }, dropdownItems.map((object, key) => /* @__PURE__ */ React.createElement(Link, {
+    }, dropdownItems.map((object, key) => /* @__PURE__ */ React.createElement(Tooltip, {
+      key,
+      title: object.title,
+      enterDelay: 500,
+      enterNextDelay: 500
+    }, /* @__PURE__ */ React.createElement(Link, {
       to: object.to,
       underline: "none",
       className: classes.dropdownItem,
       onClick: closeSubmenu,
-      onTouchStart: (e) => e.stopPropagation(),
-      key
+      onTouchStart: (e) => e.stopPropagation()
     }, /* @__PURE__ */ React.createElement(Typography, {
       className: classes.textContent
-    }, object.title)))));
+    }, object.title))))));
   }
   return /* @__PURE__ */ React.createElement("div", {
     className: classes.itemContainer
+  }, /* @__PURE__ */ React.createElement(Tooltip, {
+    title,
+    enterDelay: 500,
+    enterNextDelay: 500
   }, /* @__PURE__ */ React.createElement(Link, {
     to,
     underline: "none",
     className: classNames(classes.item, isActive ? classes.selected : void 0),
     onClick: closeSubmenu,
     onTouchStart: (e) => e.stopPropagation()
-  }, /* @__PURE__ */ React.createElement(Icon, {
+  }, Icon && /* @__PURE__ */ React.createElement(Icon, {
     fontSize: "small"
   }), /* @__PURE__ */ React.createElement(Typography, {
     variant: "subtitle1",
     className: classes.label
-  }, title)));
+  }, title))));
 };
 
 const useStyles$i = makeStyles((theme) => ({
@@ -5513,7 +5575,7 @@ function Page(props) {
       ...baseTheme,
       page: baseTheme.getPageTheme({ themeId })
     })
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("main", {
     className: classes.root
   }, children));
 }