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

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @backstage/core-components
 
+## 0.9.5-next.2
+
+### Patch Changes
+
+- ee2cd642c5: Updated dependency `rc-progress` to `3.3.3`.
+- 1cf9caecd6: fix Sidebar Contexts deprecation message
+
+## 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

package/dist/index.d.ts

@@ -1421,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';
@@ -1552,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
  *
@@ -1570,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.
@@ -1612,6 +1585,7 @@ declare type SidebarItemBaseProps = {
     icon: IconComponent;
     text?: string;
     hasNotifications?: boolean;
+    hasSubmenu?: boolean;
     disableHighlight?: boolean;
     className?: string;
 };
@@ -1678,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 `<SidebarOpenStateProvider>` + `useSidebarOpenState()` 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;
@@ -1900,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

@@ -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';
@@ -2360,6 +2361,7 @@ function SelectComponent(props) {
   }, /* @__PURE__ */ React.createElement(InputLabel, {
     className: classes.formLabel
   }, label), /* @__PURE__ */ React.createElement(Select, {
+    "aria-label": label,
     value,
     native,
     disabled,
@@ -3054,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
@@ -3084,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%",
@@ -3104,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
@@ -3130,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,
@@ -3151,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,
@@ -3193,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,
@@ -3293,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, {
@@ -3364,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;
@@ -3411,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,
@@ -3435,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, {
@@ -3662,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 });
@@ -3904,6 +3952,7 @@ const SidebarItemBase = forwardRef((props, ref) => {
     icon: Icon,
     text,
     hasNotifications = false,
+    hasSubmenu = false,
     disableHighlight = false,
     onClick,
     children,
@@ -3912,13 +3961,13 @@ const SidebarItemBase = forwardRef((props, ref) => {
   } = props;
   const { sidebarConfig } = useContext(SidebarConfigContext);
   const classes = useMemoStyles(sidebarConfig);
-  const { isOpen } = useContext(SidebarContext);
-  const divStyle = !isOpen && children ? { display: "flex", marginLeft: "24px" } : {};
+  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 && children ? /* @__PURE__ */ React.createElement(ArrowRightIcon, null) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  }), !isOpen && hasSubmenu ? /* @__PURE__ */ React.createElement(ArrowRightIcon, null) : /* @__PURE__ */ React.createElement(React.Fragment, null));
   const itemIcon = /* @__PURE__ */ React.createElement(Badge, {
     color: "secondary",
     variant: "dot",
@@ -3999,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));
@@ -4104,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;
@@ -4204,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
@@ -4278,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),
@@ -4823,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"
@@ -5577,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) => ({
@@ -6377,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