diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index b71d29e2a6..ec04b14bd3 100644 --- a/packages/core-components/api-report.md +++ b/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) => 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) => 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) // diff --git a/packages/core-components/src/layout/Sidebar/Bar.test.tsx b/packages/core-components/src/layout/Sidebar/Bar.test.tsx index 4d89008ea3..560f761531 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.test.tsx +++ b/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" > - - - + + - + diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 8cdb8f75aa..5871867ce2 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/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((props, ref) => { let hasSubmenu = false; let submenu: any; const componentType = ( - + <> - + ).type; Children.forEach(children, element => { if (!React.isValidElement(element)) return; diff --git a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx index 978987e028..7102d40f14 100644 --- a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx +++ b/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 = () => ( {}} text="Catalog"> - - - - - + + + + - - + ( }, ]} /> - + diff --git a/packages/core-components/src/layout/Sidebar/Submenu.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx similarity index 91% rename from packages/core-components/src/layout/Sidebar/Submenu.tsx rename to packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx index 7db0eab17d..9b8b9ca145 100644 --- a/packages/core-components/src/layout/Sidebar/Submenu.tsx +++ b/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) => { +}: PropsWithChildren) => { const { isOpen } = useContext(SidebarContext); const left = isOpen ? sidebarConfig.drawerWidthOpen diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx similarity index 97% rename from packages/core-components/src/layout/Sidebar/SidebarSubItem.tsx rename to packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index a4be6fdb29..969356541d 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubItem.tsx +++ b/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); diff --git a/packages/core-components/src/layout/Sidebar/index.ts b/packages/core-components/src/layout/Sidebar/index.ts index f8025e3295..60ca9cc93c 100644 --- a/packages/core-components/src/layout/Sidebar/index.ts +++ b/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';