Export SubmenuItemProps and DropdownItemProps in index & remove hasDropDown boolean- fix ae-forgotten-export warnings in api-report

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

packages/core-components/api-report.md

@@ -301,6 +301,12 @@ export type DismissbleBannerClassKey = DismissableBannerClassKey;
 // @public (undocumented)
 export function DocsIcon(props: IconComponentProps): JSX.Element;
 
+// @public
+export type DropDownItem = {
+  title: string;
+  to: string;
+};
+
 // @public (undocumented)
 export function EmailIcon(props: IconComponentProps): JSX.Element;
 
@@ -2087,17 +2093,22 @@ export type StructuredMetadataTableListClassKey = 'root';
 // @public (undocumented)
 export type StructuredMetadataTableNestedListClassKey = 'root';
 
-// Warning: (ae-forgotten-export) The symbol "SubmenuItemProps" needs to be exported by the entry point index.d.ts
-//
 // @public
 export const SubmenuItem: ({
   title,
   to,
-  hasDropDown,
   icon: Icon,
   dropdownItems,
 }: SubmenuItemProps) => JSX.Element;
 
+// @public
+export type SubmenuItemProps = {
+  title: string;
+  to: string;
+  icon: IconComponent;
+  dropdownItems?: DropDownItem[];
+};
+
 // 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

@@ -42,7 +42,6 @@ async function renderScalableSidebar() {
           title="Misc"
           to="/6"
           icon={MiscIcon}
-          hasDropDown
           dropdownItems={[
             {
               title: 'dropdown item 1',

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

@@ -192,7 +192,7 @@ const ItemWithSubmenu = ({
   // Menu item is active if any of its children have active paths
   Children.forEach(children, element => {
     if (!React.isValidElement(element)) return;
-    if (element.props.hasDropDown && element.props.dropdownItems) {
+    if (element.props.dropdownItems) {
       element.props.dropdownItems.map((item: { to: string }) =>
         toPathnames.push(item.to),
       );

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

@@ -83,7 +83,6 @@ export const SampleScalableSidebar = () => (
         title="Misc"
         to="/6"
         icon={MiscIcon}
-        hasDropDown
         dropdownItems={[
           {
             title: 'Lorem Ipsum',

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

@@ -79,14 +79,30 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
 }));
 
-type DropDownItem = {
+/**
+ * Clickable item displayed when submenu item is clicked.
+ * title: Text content of item
+ * to: Path to navigate to when item is clicked
+ *
+ * @public
+ */
+export type DropDownItem = {
   title: string;
   to: string;
 };
-type SubmenuItemProps = {
+/**
+ * Holds submenu item content.
+ *
+ * title: Text content of submenu item
+ * to: Path to navigate to when item is clicked
+ * icon: Icon displayed on the left of text content
+ * dropdownItems: Optional array of dropdown items displayed when submenu item is clicked.
+ *
+ * @public
+ */
+export type SubmenuItemProps = {
   title: string;
   to: string;
-  hasDropDown?: boolean;
   icon: IconComponent;
   dropdownItems?: DropDownItem[];
 };
@@ -99,7 +115,6 @@ type SubmenuItemProps = {
 export const SubmenuItem = ({
   title,
   to,
-  hasDropDown = false,
   icon: Icon,
   dropdownItems,
 }: SubmenuItemProps) => {
@@ -117,7 +132,7 @@ export const SubmenuItem = ({
   const handleClickDropdown = () => {
     setShowDropDown(!showDropDown);
   };
-  if (hasDropDown && dropdownItems !== undefined) {
+  if (dropdownItems !== undefined) {
     dropdownItems.some(item => {
       const resolvedPath = resolvePath(item.to);
       isActive = locationPathname === resolvedPath.pathname;
@@ -142,7 +157,7 @@ export const SubmenuItem = ({
             <ArrowDropDownIcon className={classes.dropdownArrow} />
           )}
         </button>
-        {hasDropDown && showDropDown && (
+        {dropdownItems && showDropDown && (
           <div className={classes.dropdown}>
             {dropdownItems.map((object, key) => (
               <Link

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

@@ -16,6 +16,7 @@
 
 export { Sidebar, SidebarExpandButton } from './Bar';
 export { SubmenuItem } from './SubmenuItem';
+export type { SubmenuItemProps, DropDownItem } from './SubmenuItem';
 export type { SidebarClassKey } from './Bar';
 export { SidebarPage, SidebarPinStateContext } from './Page';
 export type { SidebarPinStateContextType, SidebarPageClassKey } from './Page';