Rename Submenu -> SidebarSubmenu, SidebarSubItem -> SidebarSubmenuItem

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

packages/core-components/api-report.md

@@ -1988,21 +1988,33 @@ export const SidebarSpacer: React_2.ComponentType<
 >;
 
 // @public
-export const SidebarSubItem: ({
+export const SidebarSubmenu: ({
+  title,
+  children,
+}: PropsWithChildren<SidebarSubmenuProps>) => JSX.Element;
+
+// @public
+export const SidebarSubmenuItem: ({
   title,
   to,
   icon: Icon,
   dropdownItems,
-}: SidebarSubItemProps) => JSX.Element;
+}: SidebarSubmenuItemProps) => JSX.Element;
 
 // @public
-export type SidebarSubItemProps = {
+export type SidebarSubmenuItemProps = {
   title: string;
   to: string;
   icon: IconComponent;
   dropdownItems?: DropDownItem[];
 };
 
+// @public
+export type SidebarSubmenuProps = {
+  title?: string;
+  children: ReactNode;
+};
+
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "SignInPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -2108,18 +2120,6 @@ 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.test.tsx

@@ -24,8 +24,8 @@ import { CatalogSidebarLogo } from './icons/CatalogSidebarLogo';
 import { MiscIcon } from './icons/MiscIcon';
 import { Sidebar, SidebarExpandButton } from './Bar';
 import { SidebarItem, SidebarSearchField } from './Items';
-import { SidebarSubItem } from './SidebarSubItem';
-import { Submenu } from './Submenu';
+import { SidebarSubmenuItem } from './SidebarSubmenuItem';
+import { SidebarSubmenu } from './SidebarSubmenu';
 import { SidebarPinStateContext } from '.';
 
 async function renderScalableSidebar() {
@@ -40,9 +40,9 @@ async function renderScalableSidebar() {
           onClick={() => {}}
           text="Catalog"
         >
-          <Submenu title="Catalog">
-            <SidebarSubItem title="Tools" to="/1" icon={BuildRoundedIcon} />
-            <SidebarSubItem
+          <SidebarSubmenu title="Catalog">
+            <SidebarSubmenuItem title="Tools" to="/1" icon={BuildRoundedIcon} />
+            <SidebarSubmenuItem
               title="Misc"
               to="/6"
               icon={MiscIcon}
@@ -57,7 +57,7 @@ async function renderScalableSidebar() {
                 },
               ]}
             />
-          </Submenu>
+          </SidebarSubmenu>
         </SidebarItem>
         <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
         <SidebarExpandButton />

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

@@ -44,7 +44,7 @@ import {
   SidebarContext,
   ItemWithSubmenuContext,
 } from './config';
-import { Submenu } from './Submenu';
+import { SidebarSubmenu } from './SidebarSubmenu';
 
 export type SidebarItemClassKey =
   | 'root'
@@ -410,9 +410,9 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
   let hasSubmenu = false;
   let submenu: any;
   const componentType = (
-    <Submenu>
+    <SidebarSubmenu>
       <></>
-    </Submenu>
+    </SidebarSubmenu>
   ).type;
   Children.forEach(children, element => {
     if (!React.isValidElement(element)) return;

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

@@ -31,12 +31,12 @@ import {
   SidebarSearchField,
   SidebarSpace,
 } from '.';
-import { SidebarSubItem } from './SidebarSubItem';
+import { SidebarSubmenuItem } from './SidebarSubmenuItem';
 import { CatalogSidebarLogo } from './icons/CatalogSidebarLogo';
 import { APIsIcon } from './icons/APIsIcon';
 import { ServicesIcon } from './icons/ServicesIcon';
 import { MiscIcon } from './icons/MiscIcon';
-import { Submenu } from './Submenu';
+import { SidebarSubmenu } from './SidebarSubmenu';
 
 export default {
   title: 'Layout/Sidebar',
@@ -73,17 +73,17 @@ export const SampleScalableSidebar = () => (
       <SidebarSearchField onSearch={handleSearch} to="/search" />
       <SidebarDivider />
       <SidebarItem icon={CatalogSidebarLogo} onClick={() => {}} text="Catalog">
-        <Submenu title="Catalog">
-          <SidebarSubItem title="Tools" to="/1" icon={BuildRoundedIcon} />
-          <SidebarSubItem title="APIs" to="/2" icon={APIsIcon} />
-          <SidebarSubItem title="Services" to="/3" icon={ServicesIcon} />
-          <SidebarSubItem
+        <SidebarSubmenu title="Catalog">
+          <SidebarSubmenuItem title="Tools" to="/1" icon={BuildRoundedIcon} />
+          <SidebarSubmenuItem title="APIs" to="/2" icon={APIsIcon} />
+          <SidebarSubmenuItem title="Services" to="/3" icon={ServicesIcon} />
+          <SidebarSubmenuItem
             title="Libraries"
             to="/4"
             icon={LibraryBooksOutlinedIcon}
           />
-          <SidebarSubItem title="Websites" to="/5" icon={WebOutlinedIcon} />
-          <SidebarSubItem
+          <SidebarSubmenuItem title="Websites" to="/5" icon={WebOutlinedIcon} />
+          <SidebarSubmenuItem
             title="Misc"
             to="/6"
             icon={MiscIcon}
@@ -98,7 +98,7 @@ export const SampleScalableSidebar = () => (
               },
             ]}
           />
-        </Submenu>
+        </SidebarSubmenu>
       </SidebarItem>
       <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
       <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />

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

@@ -68,12 +68,12 @@ const useStyles = (props: { left: number }) =>
   }));
 
 /**
- * Holds a title for text Header of a Submenu and children
- * components to be rendered inside Submenu
+ * Holds a title for text Header of a sidebar submenu and children
+ * components to be rendered inside SidebarSubmenu
  *
  * @public
  */
-export type SubmenuProps = {
+export type SidebarSubmenuProps = {
   title?: string;
   children: ReactNode;
 };
@@ -83,10 +83,10 @@ export type SubmenuProps = {
  *
  * @public
  */
-export const Submenu = ({
+export const SidebarSubmenu = ({
   title,
   children,
-}: PropsWithChildren<SubmenuProps>) => {
+}: PropsWithChildren<SidebarSubmenuProps>) => {
   const { isOpen } = useContext(SidebarContext);
   const left = isOpen
     ? sidebarConfig.drawerWidthOpen

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

@@ -101,7 +101,7 @@ export type DropDownItem = {
  *
  * @public
  */
-export type SidebarSubItemProps = {
+export type SidebarSubmenuItemProps = {
   title: string;
   to: string;
   icon: IconComponent;
@@ -113,12 +113,12 @@ export type SidebarSubItemProps = {
  *
  * @public
  */
-export const SidebarSubItem = ({
+export const SidebarSubmenuItem = ({
   title,
   to,
   icon: Icon,
   dropdownItems,
-}: SidebarSubItemProps) => {
+}: SidebarSubmenuItemProps) => {
   const classes = useStyles();
   const { pathname: locationPathname } = useLocation();
   const { pathname: toPathname } = useResolvedPath(to);

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

@@ -15,10 +15,13 @@
  */
 
 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 { SidebarSubmenuItem } from './SidebarSubmenuItem';
+export { SidebarSubmenu } from './SidebarSubmenu';
+export type { SidebarSubmenuProps } from './SidebarSubmenu';
+export type {
+  SidebarSubmenuItemProps,
+  DropDownItem,
+} from './SidebarSubmenuItem';
 export type { SidebarClassKey } from './Bar';
 export { SidebarPage, SidebarPinStateContext } from './Page';
 export type { SidebarPinStateContextType, SidebarPageClassKey } from './Page';