@backstage/core-components 0.9.4-next.2 → 0.9.5-next.1

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @backstage/core-components
 
+## 0.9.5-next.1
+
+### Patch Changes
+
+- feb4e8de07: Fix EntityPage tab scrolling overflow bug on Firefox
+- 8f7b1835df: Updated dependency `msw` to `^0.41.0`.
+- bff65e6958: The `SidebarPinStateContext` and `SidebarContext` have been deprecated and will be removed in a future release. Instead, use `<SidebarPinStateProvider>` + `useSidebarPinState()` and/or `<SidebarOpenStateProvider>` + `useSidebarOpenState()`.
+
+  This was done to ensure that sidebar state can be shared successfully across components exported by different packages, regardless of what version of this package is resolved and installed for each individual package.
+
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.3-next.0
+
+## 0.9.5-next.0
+
+### Patch Changes
+
+- 65840b17be: Fix issue where right arrow icon was incorrectly added to side bar items without a sub-menu
+- 6968b65ba1: Updated dependency `@react-hookz/web` to `^14.0.0`.
+- 96d1e01641: Accessibility updates:
+
+  - Added `aria-label` to the `Select` component
+  - Changed heading level used in the header of `Table` component
+
+## 0.9.4
+
+### Patch Changes
+
+- ac19f82936: Added ARIA landmark <main> to Page component and added ARIA landmark <nav> to DesktopSidebar and Sidebar components
+- 55f68c386a: Enabled select component to be enabled by keyboard
+- c0055ece91: Announce external links to screen readers
+- e210c0cab8: Add ability to customize `Read More` destination with `readMoreUrl` prop for `MissingAnnotationEmptyState` component.
+- 52c02ac02b: Don't set the background color on an Avatar component that has a picture.
+- cfc0f2e5bd: Added optional anchorOrigin alignment prop to AlertDisplay
+- f4380eb602: Add an aria-label to the support button to improve accessibility for screen readers
+- ba97b80421: Updated dependency `@types/react-syntax-highlighter` to `^15.0.0`.
+- e462112be5: Updated dependency `rc-progress` to `3.3.2`.
+- 2bcb0a0e2b: Sidebar NAV now includes aria-label. Component AboutField now uses h2 variant instead of subtitle2 (font properties unchanged)
+- c7f32b53a4: Fixed multiple scrolls appearing on Page when added InfoCard with external bottom link
+- 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
+- 2295b4ab2b: Add controls to Storybook stories
+- 521293b22e: Added a chevron Indicator when the sidebar is collapsed and has a sub-menu
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.2
+  - @backstage/config@1.0.1
+
 ## 0.9.4-next.2
 
 ### Patch Changes

package/dist/index.d.ts

@@ -553,6 +553,7 @@ declare type EmptyStateImageClassKey = 'generalImg';
 
 declare type Props$g = {
     annotation: string;
+    readMoreUrl?: string;
 };
 declare type MissingAnnotationEmptyStateClassKey = 'code';
 declare function MissingAnnotationEmptyState(props: Props$g): JSX.Element;
@@ -1420,17 +1421,6 @@ declare const sidebarConfig: {
     mobileSidebarHeight: number;
 };
 declare const SIDEBAR_INTRO_LOCAL_STORAGE = "@backstage/core/sidebar-intro-dismissed";
-/**
- * Types for the `SidebarContext`
- */
-declare type SidebarContextType = {
-    isOpen: boolean;
-    setOpen: (open: boolean) => void;
-};
-/**
- * Context whether the `Sidebar` is open
- */
-declare const SidebarContext: React.Context<SidebarContextType>;
 
 /** @public */
 declare type SidebarClassKey = 'drawer' | 'drawerOpen';
@@ -1551,16 +1541,6 @@ declare type SidebarSubmenuProps = {
 declare const SidebarSubmenu: (props: SidebarSubmenuProps) => JSX.Element;
 
 declare type SidebarPageClassKey = 'root';
-/**
- * Type of `SidebarPinStateContext`
- *
- * @public
- */
-declare type SidebarPinStateContextType = {
-    isPinned: boolean;
-    toggleSidebarPinState: () => any;
-    isMobile?: boolean;
-};
 /**
  * Props for SidebarPage
  *
@@ -1569,12 +1549,6 @@ declare type SidebarPinStateContextType = {
 declare type SidebarPageProps = {
     children?: React__default.ReactNode;
 };
-/**
- * Contains the state on how the `Sidebar` is rendered
- *
- * @public
- */
-declare const SidebarPinStateContext: React__default.Context<SidebarPinStateContextType>;
 declare function SidebarPage(props: SidebarPageProps): JSX.Element;
 /**
  * This hook provides a react ref to the main content.
@@ -1611,6 +1585,7 @@ declare type SidebarItemBaseProps = {
     icon: IconComponent;
     text?: string;
     hasNotifications?: boolean;
+    hasSubmenu?: boolean;
     disableHighlight?: boolean;
     className?: string;
 };
@@ -1677,6 +1652,114 @@ declare type IntroCardProps = {
 declare function IntroCard(props: IntroCardProps): JSX.Element;
 declare function SidebarIntro(_props: {}): JSX.Element | null;
 
+/**
+ * Types for the `SidebarContext`
+ *
+ * @public @deprecated
+ * Use `SidebarOpenState` instead.
+ */
+declare type SidebarContextType = {
+    isOpen: boolean;
+    setOpen: (open: boolean) => void;
+};
+/**
+ * The open state of the sidebar.
+ *
+ * @public
+ */
+declare type SidebarOpenState = {
+    /**
+     * Whether or not the sidebar is open and full-width. When `false`, the
+     * sidebar is "closed" and typically only shows icons with no text.
+     */
+    isOpen: boolean;
+    /**
+     * A function to set whether or not the sidebar is open. Pass `true` to open
+     * the sidebar. Pass `false` to close it.
+     */
+    setOpen: (open: boolean) => void;
+};
+/**
+ * Context whether the `Sidebar` is open
+ *
+ * @public @deprecated
+ * Use `<SidebarContextProvider>` + `useSidebar()` instead.
+ */
+declare const LegacySidebarContext: React__default.Context<SidebarContextType>;
+/**
+ * Provides context for reading and updating sidebar state.
+ *
+ * @public
+ */
+declare const SidebarOpenStateProvider: ({ children, value, }: {
+    children: ReactNode;
+    value: SidebarOpenState;
+}) => JSX.Element;
+/**
+ * Hook to read and update the sidebar's open state, which controls whether or
+ * not the sidebar is open and full-width, or closed and only displaying icons.
+ *
+ * @public
+ */
+declare const useSidebarOpenState: () => SidebarOpenState;
+
+/**
+ * Type of `SidebarPinStateContext`
+ *
+ * @public @deprecated
+ * Use `SidebarPinState` instead.
+ */
+declare type SidebarPinStateContextType = {
+    isPinned: boolean;
+    toggleSidebarPinState: () => any;
+    isMobile?: boolean;
+};
+/**
+ * The pin state of the sidebar.
+ *
+ * @public
+ */
+declare type SidebarPinState = {
+    /**
+     * Whether or not the sidebar is pinned to the `open` state. When `isPinned`
+     * is `false`, the sidebar opens and closes on hover. When `true`, the
+     * sidebar is permanently opened, regardless of user interaction.
+     */
+    isPinned: boolean;
+    /**
+     * A function to toggle the pin state of the sidebar.
+     */
+    toggleSidebarPinState: () => any;
+    /**
+     * Whether or not the sidebar is or should be rendered in a mobile-optimized
+     * way.
+     */
+    isMobile?: boolean;
+};
+/**
+ * Contains the state on how the `Sidebar` is rendered
+ *
+ * @public @deprecated
+ * Use `<SidebarPinStateContextProvider>` + `useSidebarPinState()` instead.
+ */
+declare const LegacySidebarPinStateContext: React__default.Context<SidebarPinStateContextType>;
+/**
+ * Provides state for how the `Sidebar` is rendered
+ *
+ * @public
+ */
+declare const SidebarPinStateProvider: ({ children, value, }: {
+    children: ReactNode;
+    value: SidebarPinStateContextType;
+}) => JSX.Element;
+/**
+ * Hook to read and update sidebar pin state, which controls whether or not the
+ * sidebar is pinned open.
+ *
+ * @public
+ */
+declare const useSidebarPinState: () => SidebarPinState;
+
 declare type SignInProviderConfig = {
     id: string;
     title: string;
@@ -1899,4 +1982,4 @@ declare type BackstageOverrides = Overrides & {
     [Name in keyof BackstageComponentsNameToClassKey]?: Partial<StyleRules<BackstageComponentsNameToClassKey[Name]>>;
 };
 
-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 };
+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, LegacySidebarContext as SidebarContext, SidebarContextType, SidebarDivider, SidebarDividerClassKey, SidebarExpandButton, SidebarGroup, SidebarGroupProps, SidebarIntro, SidebarIntroClassKey, SidebarItem, SidebarItemClassKey, SidebarOpenState, SidebarOpenStateProvider, SidebarOptions, SidebarPage, SidebarPageClassKey, SidebarPageProps, SidebarPinState, LegacySidebarPinStateContext as SidebarPinStateContext, SidebarPinStateContextType, SidebarPinStateProvider, 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, useSidebarOpenState, useSidebarPinState, useSupportConfig };

package/dist/index.esm.js

@@ -8,6 +8,7 @@ import pluralize from 'pluralize';
 import { makeStyles, createStyles, useTheme, darken, lighten, withStyles, styled, ThemeProvider } from '@material-ui/core/styles';
 import MaterialAvatar from '@material-ui/core/Avatar';
 import Button$1 from '@material-ui/core/Button';
+import classNames from 'classnames';
 import Link$1 from '@material-ui/core/Link';
 import { Link as Link$2, useSearchParams, useLocation, useResolvedPath, resolvePath } from 'react-router-dom';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -27,7 +28,6 @@ import makeStyles$1 from '@material-ui/core/styles/makeStyles';
 import * as d3Shape from 'd3-shape';
 import isFinite from 'lodash/isFinite';
 import useObservable from 'react-use/lib/useObservable';
-import classNames from 'classnames';
 import SnackbarContent from '@material-ui/core/SnackbarContent';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
@@ -91,6 +91,7 @@ import qs from 'qs';
 import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
 import { Helmet } from 'react-helmet';
 import { useLocation as useLocation$1, useNavigate, useParams, useRoutes, matchRoutes } from 'react-router';
+import { createVersionedContext, createVersionedValueMap } from '@backstage/version-bridge';
 import BottomNavigation from '@material-ui/core/BottomNavigation';
 import Drawer from '@material-ui/core/Drawer';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -217,6 +218,9 @@ const useStyles$R = makeStyles({
     whiteSpace: "nowrap",
     height: 1,
     width: 1
+  },
+  externalLink: {
+    position: "relative"
   }
 }, { name: "Link" });
 const isExternalUri = (uri) => /^([a-z+.-]+):/.test(uri);
@@ -251,7 +255,8 @@ const Link = React.forwardRef(({ onClick, noTrack, ...props }, ref) => {
     href: to,
     onClick: handleClick,
     ...newWindow ? { target: "_blank", rel: "noopener" } : {},
-    ...props
+    ...props,
+    className: classNames(classes.externalLink, props.className)
   }, props.children, /* @__PURE__ */ React.createElement("span", {
     className: classes.visuallyHidden
   }, ", Opens in a new window")) : /* @__PURE__ */ React.createElement(Link$1, {
@@ -946,7 +951,8 @@ const useStyles$J = makeStyles((theme) => ({
   }
 }), { name: "BackstageMissingAnnotationEmptyState" });
 function MissingAnnotationEmptyState(props) {
-  const { annotation } = props;
+  const { annotation, readMoreUrl } = props;
+  const url = readMoreUrl || "https://backstage.io/docs/features/software-catalog/well-known-annotations";
   const classes = useStyles$J();
   const description = /* @__PURE__ */ React.createElement(React.Fragment, null, "The ", /* @__PURE__ */ React.createElement("code", null, annotation), " annotation is missing. You need to add the annotation to your component if you want to enable this tool.");
   return /* @__PURE__ */ React.createElement(EmptyState, {
@@ -966,7 +972,7 @@ function MissingAnnotationEmptyState(props) {
     })), /* @__PURE__ */ React.createElement(Button$1, {
       color: "primary",
       component: Link,
-      to: "https://backstage.io/docs/features/software-catalog/well-known-annotations"
+      to: url
     }, "Read more"))
   });
 }
@@ -2355,6 +2361,7 @@ function SelectComponent(props) {
   }, /* @__PURE__ */ React.createElement(InputLabel, {
     className: classes.formLabel
   }, label), /* @__PURE__ */ React.createElement(Select, {
+    "aria-label": label,
     value,
     native,
     disabled,
@@ -3049,11 +3056,6 @@ const makeSidebarSubmenuConfig = (customSubmenuConfig) => ({
   ...customSubmenuConfig
 });
 const SIDEBAR_INTRO_LOCAL_STORAGE = "@backstage/core/sidebar-intro-dismissed";
-const SidebarContext = createContext({
-  isOpen: false,
-  setOpen: () => {
-  }
-});
 const SidebarConfigContext = createContext({
   sidebarConfig,
   submenuConfig
@@ -3079,6 +3081,35 @@ const LocalStorage = {
   }
 };
 
+const defaultSidebarPinStateContext = {
+  isPinned: true,
+  toggleSidebarPinState: () => {
+  },
+  isMobile: false
+};
+const LegacySidebarPinStateContext = createContext(defaultSidebarPinStateContext);
+const VersionedSidebarPinStateContext = createVersionedContext("sidebar-pin-state-context");
+const SidebarPinStateProvider = ({
+  children,
+  value
+}) => /* @__PURE__ */ React.createElement(LegacySidebarPinStateContext.Provider, {
+  value
+}, /* @__PURE__ */ React.createElement(VersionedSidebarPinStateContext.Provider, {
+  value: createVersionedValueMap({ 1: value })
+}, children));
+const useSidebarPinState = () => {
+  const versionedPinStateContext = useContext(VersionedSidebarPinStateContext);
+  const legacyPinStateContext = useContext(LegacySidebarPinStateContext);
+  if (versionedPinStateContext === void 0) {
+    return legacyPinStateContext || defaultSidebarPinStateContext;
+  }
+  const pinStateContext = versionedPinStateContext.atVersion(1);
+  if (pinStateContext === void 0) {
+    throw new Error("No context found for version 1.");
+  }
+  return pinStateContext;
+};
+
 const useStyles$n = makeStyles((theme) => ({
   root: {
     width: "100%",
@@ -3099,12 +3130,6 @@ const useStyles$n = makeStyles((theme) => ({
     }
   }
 }), { name: "BackstageSidebarPage" });
-const SidebarPinStateContext = createContext({
-  isPinned: true,
-  toggleSidebarPinState: () => {
-  },
-  isMobile: false
-});
 const PageContext = createContext({
   content: {
     contentRef: void 0
@@ -3125,7 +3150,7 @@ function SidebarPage(props) {
   const isMobile = useMediaQuery((theme) => theme.breakpoints.down("xs"), { noSsr: true });
   const toggleSidebarPinState = () => setIsPinned(!isPinned);
   const classes = useStyles$n({ isPinned, sidebarConfig });
-  return /* @__PURE__ */ React.createElement(SidebarPinStateContext.Provider, {
+  return /* @__PURE__ */ React.createElement(SidebarPinStateProvider, {
     value: {
       isPinned,
       toggleSidebarPinState,
@@ -3146,6 +3171,34 @@ function useContent() {
   return { focusContent, contentRef: content == null ? void 0 : content.contentRef };
 }
 
+const defaultSidebarOpenStateContext = {
+  isOpen: false,
+  setOpen: () => {
+  }
+};
+const LegacySidebarContext = createContext(defaultSidebarOpenStateContext);
+const VersionedSidebarContext = createVersionedContext("sidebar-open-state-context");
+const SidebarOpenStateProvider = ({
+  children,
+  value
+}) => /* @__PURE__ */ React.createElement(LegacySidebarContext.Provider, {
+  value
+}, /* @__PURE__ */ React.createElement(VersionedSidebarContext.Provider, {
+  value: createVersionedValueMap({ 1: value })
+}, children));
+const useSidebarOpenState = () => {
+  const versionedOpenStateContext = useContext(VersionedSidebarContext);
+  const legacyOpenStateContext = useContext(LegacySidebarContext);
+  if (versionedOpenStateContext === void 0) {
+    return legacyOpenStateContext || defaultSidebarOpenStateContext;
+  }
+  const openStateContext = versionedOpenStateContext.atVersion(1);
+  if (openStateContext === void 0) {
+    throw new Error("No context found for version 1.");
+  }
+  return openStateContext;
+};
+
 const useStyles$m = makeStyles((theme) => ({
   root: {
     flexGrow: 0,
@@ -3188,7 +3241,7 @@ const MobileSidebarGroup = (props) => {
 };
 const SidebarGroup = (props) => {
   const { children, to, label, icon, value } = props;
-  const { isMobile } = useContext(SidebarPinStateContext);
+  const { isMobile } = useSidebarPinState();
   return isMobile ? /* @__PURE__ */ React.createElement(MobileSidebarGroup, {
     to,
     label,
@@ -3288,7 +3341,7 @@ const MobileSidebar = (props) => {
     sidebarGroups = sortSidebarGroupsForPriority(sidebarGroups);
   }
   const shouldShowGroupChildren = selectedMenuItemIndex >= 0 && !sidebarGroups[selectedMenuItemIndex].props.to;
-  return /* @__PURE__ */ React.createElement(SidebarContext.Provider, {
+  return /* @__PURE__ */ React.createElement(SidebarOpenStateProvider, {
     value: { isOpen: true, setOpen: () => {
     } }
   }, /* @__PURE__ */ React.createElement(MobileSidebarContext.Provider, {
@@ -3359,7 +3412,7 @@ const DesktopSidebar = (props) => {
   const isSmallScreen = useMediaQuery((theme) => theme.breakpoints.down("md"), { noSsr: true });
   const [state, setState] = useState(0 /* Closed */);
   const hoverTimerRef = useRef();
-  const { isPinned, toggleSidebarPinState } = useContext(SidebarPinStateContext);
+  const { isPinned, toggleSidebarPinState } = useSidebarPinState();
   const handleOpen = () => {
     if (isPinned || disableExpandOnHover) {
       return;
@@ -3406,7 +3459,7 @@ const DesktopSidebar = (props) => {
   return /* @__PURE__ */ React.createElement("nav", {
     style: {},
     "aria-label": "sidebar nav"
-  }, /* @__PURE__ */ React.createElement(A11ySkipSidebar, null), /* @__PURE__ */ React.createElement(SidebarContext.Provider, {
+  }, /* @__PURE__ */ React.createElement(A11ySkipSidebar, null), /* @__PURE__ */ React.createElement(SidebarOpenStateProvider, {
     value: { isOpen, setOpen }
   }, /* @__PURE__ */ React.createElement("div", {
     className: classes.root,
@@ -3430,7 +3483,7 @@ const Sidebar = (props) => {
   const sidebarConfig = makeSidebarConfig((_a = props.sidebarOptions) != null ? _a : {});
   const submenuConfig = makeSidebarSubmenuConfig((_b = props.submenuOptions) != null ? _b : {});
   const { children, disableExpandOnHover, openDelayMs, closeDelayMs } = props;
-  const { isMobile } = useContext(SidebarPinStateContext);
+  const { isMobile } = useSidebarPinState();
   return isMobile ? /* @__PURE__ */ React.createElement(MobileSidebar, null, children) : /* @__PURE__ */ React.createElement(SidebarConfigContext.Provider, {
     value: { sidebarConfig, submenuConfig }
   }, /* @__PURE__ */ React.createElement(DesktopSidebar, {
@@ -3657,7 +3710,7 @@ const useStyles$i = makeStyles((theme) => ({
   }
 }), { name: "BackstageSidebarSubmenu" });
 const SidebarSubmenu = (props) => {
-  const { isOpen } = useContext(SidebarContext);
+  const { isOpen } = useSidebarOpenState();
   const { sidebarConfig, submenuConfig } = useContext(SidebarConfigContext);
   const left = isOpen ? sidebarConfig.drawerWidthOpen : sidebarConfig.drawerWidthClosed;
   const classes = useStyles$i({ left, submenuConfig });
@@ -3899,6 +3952,7 @@ const SidebarItemBase = forwardRef((props, ref) => {
     icon: Icon,
     text,
     hasNotifications = false,
+    hasSubmenu = false,
     disableHighlight = false,
     onClick,
     children,
@@ -3907,16 +3961,20 @@ const SidebarItemBase = forwardRef((props, ref) => {
   } = props;
   const { sidebarConfig } = useContext(SidebarConfigContext);
   const classes = useMemoStyles(sidebarConfig);
-  const { isOpen } = useContext(SidebarContext);
+  const { isOpen } = useSidebarOpenState();
+  const divStyle = !isOpen && hasSubmenu ? { display: "flex", marginLeft: "24px" } : {};
+  const displayItemIcon = /* @__PURE__ */ React.createElement("div", {
+    style: divStyle
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    fontSize: "small"
+  }), !isOpen && hasSubmenu ? /* @__PURE__ */ React.createElement(ArrowRightIcon, null) : /* @__PURE__ */ React.createElement(React.Fragment, null));
   const itemIcon = /* @__PURE__ */ React.createElement(Badge, {
     color: "secondary",
     variant: "dot",
     overlap: "circular",
     invisible: !hasNotifications,
     className: classNames({ [classes.closedItemIcon]: !isOpen })
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    fontSize: "small"
-  }));
+  }, displayItemIcon);
   const openContent = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     "data-testid": "login-button",
     className: classes.iconContainer
@@ -3990,6 +4048,7 @@ const SidebarItemWithSubmenu = ({
     onMouseEnter: handleMouseEnter,
     className: classNames(isHoveredOn && classes.highlighted)
   }, /* @__PURE__ */ React.createElement(SidebarItemBase, {
+    hasSubmenu: true,
     className: isActive ? classes.selected : "",
     ...props
   }, arrowIcon()), isHoveredOn && children));
@@ -4095,7 +4154,7 @@ const SidebarScrollWrapper = styled("div")(({ theme }) => {
 const SidebarExpandButton = () => {
   const { sidebarConfig } = useContext(SidebarConfigContext);
   const classes = useMemoStyles(sidebarConfig);
-  const { isOpen, setOpen } = useContext(SidebarContext);
+  const { isOpen, setOpen } = useSidebarOpenState();
   const isSmallScreen = useMediaQuery((theme) => theme.breakpoints.down("md"), { noSsr: true });
   if (isSmallScreen) {
     return null;
@@ -4195,7 +4254,7 @@ const starredIntroText = `Fun fact! As you explore all the awesome plugins in Ba
 Keep an eye out for the little star icon (\u2B50) next to the plugin name and give it a click!`;
 const recentlyViewedIntroText = "And your recently viewed plugins will pop up here!";
 function SidebarIntro(_props) {
-  const { isOpen } = useContext(SidebarContext);
+  const { isOpen } = useSidebarOpenState();
   const defaultValue = {
     starredItemsDismissed: false,
     recentlyViewedItemsDismissed: false
@@ -4269,7 +4328,8 @@ const useStyles$d = makeStyles((theme) => ({
   tabsWrapper: {
     gridArea: "pageSubheader",
     backgroundColor: theme.palette.background.paper,
-    paddingLeft: theme.spacing(3)
+    paddingLeft: theme.spacing(3),
+    minWidth: 0
   },
   defaultTab: {
     padding: theme.spacing(3, 3),
@@ -4814,7 +4874,7 @@ function Table(props) {
     icons: tableIcons,
     title: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, {
       variant: "h5",
-      component: "h3"
+      component: "h2"
     }, title), subtitle && /* @__PURE__ */ React.createElement(Typography, {
       color: "textSecondary",
       variant: "body1"
@@ -5568,7 +5628,7 @@ const useStyles$1 = makeStyles(() => ({
 }), { name: "BackstagePage" });
 function Page(props) {
   const { themeId, children } = props;
-  const { isMobile } = useContext(SidebarPinStateContext);
+  const { isMobile } = useSidebarPinState();
   const classes = useStyles$1({ isMobile });
   return /* @__PURE__ */ React.createElement(ThemeProvider, {
     theme: (baseTheme) => ({
@@ -6368,5 +6428,5 @@ function CardTab(props) {
   });
 }
 
-export { AlertDisplay, Avatar, BottomLink, Breadcrumbs, BrokenImageIcon, Button, CardTab, CatalogIcon, ChatIcon, CodeSnippet, Content, ContentHeader, CopyTextButton, CreateButton, DashboardIcon, DependencyGraph, types as DependencyGraphTypes, DismissableBanner, DocsIcon, EmailIcon, EmptyState, ErrorBoundary, ErrorPage, ErrorPanel, FeatureCalloutCircular, Gauge, GaugeCard, GitHubIcon, GroupIcon, Header, HeaderIconLinkRow, HeaderLabel, HeaderTabs, HelpIcon, HomepageTimer, HorizontalScrollGrid, InfoCard, IntroCard, ItemCard, ItemCardGrid, ItemCardHeader, Lifecycle, LinearGauge, Link, LogViewer, MarkdownContent, MissingAnnotationEmptyState, MobileSidebar, OAuthRequestDialog, OverflowTooltip, Page, PageWithHeader, Progress, ProxiedSignInPage, ResponseErrorPanel, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, Sidebar, SidebarContext, SidebarDivider, SidebarExpandButton, SidebarGroup, SidebarIntro, SidebarItem, SidebarPage, SidebarPinStateContext, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpacer, SidebarSubmenu, SidebarSubmenuItem, SignInPage, SimpleStepper, SimpleStepperStep, StatusAborted, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, SubvalueCell, SupportButton, TabbedCard, TabbedLayout, Table, Tabs, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, sidebarConfig, useContent, useQueryParamState, useSupportConfig };
+export { AlertDisplay, Avatar, BottomLink, Breadcrumbs, BrokenImageIcon, Button, CardTab, CatalogIcon, ChatIcon, CodeSnippet, Content, ContentHeader, CopyTextButton, CreateButton, DashboardIcon, DependencyGraph, types as DependencyGraphTypes, DismissableBanner, DocsIcon, EmailIcon, EmptyState, ErrorBoundary, ErrorPage, ErrorPanel, FeatureCalloutCircular, Gauge, GaugeCard, GitHubIcon, GroupIcon, Header, HeaderIconLinkRow, HeaderLabel, HeaderTabs, HelpIcon, HomepageTimer, HorizontalScrollGrid, InfoCard, IntroCard, ItemCard, ItemCardGrid, ItemCardHeader, Lifecycle, LinearGauge, Link, LogViewer, MarkdownContent, MissingAnnotationEmptyState, MobileSidebar, OAuthRequestDialog, OverflowTooltip, Page, PageWithHeader, Progress, ProxiedSignInPage, ResponseErrorPanel, RoutedTabs, SIDEBAR_INTRO_LOCAL_STORAGE, SelectComponent as Select, Sidebar, LegacySidebarContext as SidebarContext, SidebarDivider, SidebarExpandButton, SidebarGroup, SidebarIntro, SidebarItem, SidebarOpenStateProvider, SidebarPage, LegacySidebarPinStateContext as SidebarPinStateContext, SidebarPinStateProvider, SidebarScrollWrapper, SidebarSearchField, SidebarSpace, SidebarSpacer, SidebarSubmenu, SidebarSubmenuItem, SignInPage, SimpleStepper, SimpleStepperStep, StatusAborted, StatusError, StatusOK, StatusPending, StatusRunning, StatusWarning, StructuredMetadataTable, SubvalueCell, SupportButton, TabbedCard, TabbedLayout, Table, Tabs, TrendLine, UserIcon, UserIdentity, WarningIcon, WarningPanel, sidebarConfig, useContent, useQueryParamState, useSidebarOpenState, useSidebarPinState, useSupportConfig };
 //# sourceMappingURL=index.esm.js.map