Modify SidebarContextType to reduce api surface + update api-report

Signed-off-by: hiba-aldalaty <hibaaldalaty@gmail.com>

packages/core-components/api-report.md

@@ -838,8 +838,7 @@ export const SidebarContext: Context<SidebarContextType>;
 // @public (undocumented)
 export type SidebarContextType = {
   isOpen: boolean;
-  handleOpen: () => any;
-  handleClose: () => any;
+  setOpen: (open: boolean) => void;
 };
 
 // Warning: (ae-missing-release-tag) "SidebarDivider" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -2109,6 +2108,18 @@ export type StructuredMetadataTableListClassKey = 'root';
 // @public (undocumented)
 export type StructuredMetadataTableNestedListClassKey = 'root';
 
+// @public
+export const Submenu: ({
+  title,
+  children,
+}: PropsWithChildren<SubmenuProps>) => JSX.Element;
+
+// @public
+export type SubmenuProps = {
+  title?: string;
+  children: ReactNode;
+};
+
 // Warning: (ae-forgotten-export) The symbol "SubvalueCellProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "SubvalueCell" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -148,6 +148,14 @@ export function Sidebar(props: PropsWithChildren<Props>) {
 
   const isOpen = (state === State.Open && !isSmallScreen) || isPinned;
 
+  const setOpen = (open: boolean) => {
+    if (open) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+  };
+
   return (
     <div
       className={classes.root}
@@ -160,8 +168,7 @@ export function Sidebar(props: PropsWithChildren<Props>) {
       <SidebarContext.Provider
         value={{
           isOpen,
-          handleOpen,
-          handleClose,
+          setOpen,
         }}
       >
         <div
@@ -184,18 +191,14 @@ export function Sidebar(props: PropsWithChildren<Props>) {
  */
 export const SidebarExpandButton = () => {
   const classes = useStyles();
-  const { isOpen, handleOpen, handleClose } = useContext(SidebarContext);
+  const { isOpen, setOpen } = useContext(SidebarContext);
   const { isPinned } = useContext(SidebarPinStateContext);
   const isSmallScreen = useMediaQuery<BackstageTheme>(theme =>
     theme.breakpoints.down('md'),
   );
 
   const handleClick = () => {
-    if (isOpen) {
-      handleClose();
-    } else {
-      handleOpen();
-    }
+    setOpen(!isOpen);
   };
 
   if (isPinned || isSmallScreen) {

packages/core-components/src/layout/Sidebar/Submenu.tsx

@@ -67,10 +67,22 @@ const useStyles = (props: { left: number }) =>
     },
   }));
 
-type SubmenuProps = {
+/**
+ * Holds a title for text Header of a Submenu and children
+ * components to be rendered inside Submenu
+ *
+ * @public
+ */
+export type SubmenuProps = {
   title?: string;
   children: ReactNode;
 };
+
+/**
+ * Used inside SidebarItem to display an expandable Submenu
+ *
+ * @public
+ */
 export const Submenu = ({
   title,
   children,

packages/core-components/src/layout/Sidebar/config.ts

@@ -59,14 +59,12 @@ export const SIDEBAR_INTRO_LOCAL_STORAGE =
 
 export type SidebarContextType = {
   isOpen: boolean;
-  handleOpen: () => any;
-  handleClose: () => any;
+  setOpen: (open: boolean) => void;
 };
 
 export const SidebarContext = createContext<SidebarContextType>({
   isOpen: false,
-  handleOpen: () => {},
-  handleClose: () => {},
+  setOpen: _open => {},
 });
 
 export type ItemWithSubmenuContextType = {

packages/core-components/src/layout/Sidebar/index.ts

@@ -16,6 +16,8 @@
 
 export { Sidebar, SidebarExpandButton } from './Bar';
 export { SidebarSubItem } from './SidebarSubItem';
+export { Submenu } from './Submenu';
+export type { SubmenuProps } from './Submenu';
 export type { SidebarSubItemProps, DropDownItem } from './SidebarSubItem';
 export type { SidebarClassKey } from './Bar';
 export { SidebarPage, SidebarPinStateContext } from './Page';

plugins/shortcuts/src/ShortcutItem.test.tsx

@@ -37,9 +37,7 @@ describe('ShortcutItem', () => {
 
   it('displays the shortcut', async () => {
     await renderInTestApp(
-      <SidebarContext.Provider
-        value={{ isOpen: true, handleOpen: () => {}, handleClose: () => {} }}
-      >
+      <SidebarContext.Provider value={{ isOpen: true, setOpen: _open => {} }}>
         <ShortcutItem api={api} shortcut={shortcut} />
       </SidebarContext.Provider>,
     );

plugins/shortcuts/src/Shortcuts.test.tsx

@@ -30,9 +30,7 @@ const apis = ApiRegistry.from([
 describe('Shortcuts', () => {
   it('displays an add button', async () => {
     await renderInTestApp(
-      <SidebarContext.Provider
-        value={{ isOpen: true, handleOpen: () => {}, handleClose: () => {} }}
-      >
+      <SidebarContext.Provider value={{ isOpen: true, setOpen: _open => {} }}>
         <ApiProvider apis={apis}>
           <Shortcuts />
         </ApiProvider>