diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 68044840b3..628d0d9a63 100644 --- a/packages/core-components/api-report.md +++ b/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) // diff --git a/packages/core-components/src/layout/Sidebar/Bar.test.tsx b/packages/core-components/src/layout/Sidebar/Bar.test.tsx index 2039210c2d..32f286e22a 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.test.tsx +++ b/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', diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index dd34514f0b..3c4fc6ffd0 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/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), ); diff --git a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx index c95460553c..68ed5b0368 100644 --- a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx +++ b/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', diff --git a/packages/core-components/src/layout/Sidebar/SubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SubmenuItem.tsx index c8a2dcd14d..ef0026f961 100644 --- a/packages/core-components/src/layout/Sidebar/SubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SubmenuItem.tsx @@ -79,14 +79,30 @@ const useStyles = makeStyles(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 = ({ )} - {hasDropDown && showDropDown && ( + {dropdownItems && showDropDown && (
{dropdownItems.map((object, key) => (