diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index c434aac3c98..049721360ab 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -26,7 +26,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` class="AnalyticalTable--th-" >
({ }, condensed: { - width: '2.75rem', + width: '3rem', '& $footerItemsSeparator': { marginLeft: '0.5rem', marginRight: '0.5rem' diff --git a/packages/main/src/components/SideNavigation/SideNavigation.test.tsx b/packages/main/src/components/SideNavigation/SideNavigation.test.tsx index 8ea8fbbc9b1..d1a0baa0e46 100644 --- a/packages/main/src/components/SideNavigation/SideNavigation.test.tsx +++ b/packages/main/src/components/SideNavigation/SideNavigation.test.tsx @@ -11,8 +11,8 @@ describe('SideNavigation', () => { openState={SideNavigationOpenState.Expandend} selectedId={'sales-leads'} footerItems={[ - , - + , + ]} > @@ -36,8 +36,8 @@ describe('SideNavigation', () => { selectedId={'sales-leads'} noIcons footerItems={[ - , - + , + ]} > @@ -60,8 +60,8 @@ describe('SideNavigation', () => { openState={SideNavigationOpenState.Condensed} selectedId={'sales-leads'} footerItems={[ - , - + , + ]} > @@ -83,8 +83,8 @@ describe('SideNavigation', () => { openState={SideNavigationOpenState.Collapsed} selectedId={'sales-leads'} footerItems={[ - , - + , + ]} > diff --git a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap index acb4306a43c..0efc0ee4507 100644 --- a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap +++ b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap @@ -52,72 +52,15 @@ exports[`SideNavigation Collapsed 1`] = ` selected="true" type="Active" > -
+ -
- - - - Sales - - - My Opportunities - - - My Leads - - - My CPQS - - - -
+
+ -
+ -
- - - - Sales - - - My Opportunities - - - My Leads - - - My CPQS - - - -
+
+ Sales - + > + + Sales - + > + + void; + onItemClick?: (event: Event) => void; + /* + * Flag whether to show icons or not. Will only take effect in openState: Expanded + */ noIcons?: boolean; } @@ -25,7 +29,18 @@ const useStyles = createUseStyles = forwardRef((props: SideNavigationProps, ref: Ref) => { - const { children, openState, footerItems, selectedId, onItemSelect, noIcons, style, className, tooltip } = props; + const { + children, + openState, + footerItems, + selectedId, + onItemSelect, + onItemClick, + noIcons, + style, + className, + tooltip + } = props; const classes = useStyles(); @@ -59,29 +74,27 @@ const SideNavigation: FC = forwardRef((props: SideNavigatio const onListItemSelected = useCallback( (e) => { const listItem = e.getParameter('item'); + onItemClick( + Event.of(null, e, { + selectedItem: listItem, + selectedId: listItem.dataset.id + }) + ); if (lastFiredSelection === listItem.dataset.id) { return; } - - if (listItem.dataset.id === lastParent) { - lastParent = ''; - return; - } - - if (listItem.dataset.parentId) { - lastParent = listItem.dataset.parentId; - } - setInternalSelectedId(listItem.dataset.id); + onItemSelect( Event.of(null, e, { - selectedItem: listItem + selectedItem: listItem, + selectedId: listItem.dataset.id }) ); lastFiredSelection = listItem.dataset.id; }, - [onItemSelect, setInternalSelectedId] + [onItemSelect, onItemClick, setInternalSelectedId] ); return ( @@ -91,7 +104,8 @@ const SideNavigation: FC = forwardRef((props: SideNavigatio cloneElement(child, { openState: openState, selectedId: internalSelectedId, - noIcons + noIcons, + onListItemSelected }) )} @@ -104,7 +118,8 @@ const SideNavigation: FC = forwardRef((props: SideNavigatio openState: openState, key: index, selectedId: internalSelectedId, - noIcons + noIcons, + onListItemSelected }) )} @@ -118,7 +133,9 @@ SideNavigation.displayName = 'SideNavigation'; SideNavigation.defaultProps = { openState: SideNavigationOpenState.Expanded, footerItems: [], - selectedId: null + selectedId: null, + onItemClick: () => {}, + onItemSelect: () => {} }; export { SideNavigation }; diff --git a/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.jss.ts b/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.jss.ts index 9b33882418d..8588a764492 100644 --- a/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.jss.ts +++ b/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.jss.ts @@ -24,7 +24,8 @@ export const sideNavigationListItemStyles = ({ parameters }: JSSTheme) => ({ '--sapUiContentNonInteractiveIconColor': parameters.sapUiContentIconColor, width: '1.125rem', height: '1.125rem', - padding: '0.8125rem' + padding: '0.9375rem', + pointerEvents: 'none' }, text: {}, diff --git a/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx b/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx index c154a189861..e6d51db3096 100644 --- a/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx +++ b/packages/main/src/components/SideNavigationListItem/SideNavigationListItem.test.tsx @@ -1,9 +1,7 @@ import { mountThemedComponent } from '@shared/tests/utils'; -import { SideNavigation } from '@ui5/webcomponents-react/lib/SideNavigation'; +import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import { SideNavigationListItem } from '@ui5/webcomponents-react/lib/SideNavigationListItem'; -import { SideNavigationOpenState } from '@ui5/webcomponents-react/lib/SideNavigationOpenState'; import React from 'react'; -import { ContentDensity } from '../..'; describe('SideNavigationListItem', () => { test('Basic', () => { diff --git a/packages/main/src/components/SideNavigationListItem/index.tsx b/packages/main/src/components/SideNavigationListItem/index.tsx index 6a093c86ac4..b638425b41e 100644 --- a/packages/main/src/components/SideNavigationListItem/index.tsx +++ b/packages/main/src/components/SideNavigationListItem/index.tsx @@ -8,6 +8,8 @@ import { PopoverVerticalAlign } from '@ui5/webcomponents-react/lib/PopoverVertic import { SideNavigationOpenState } from '@ui5/webcomponents-react/lib/SideNavigationOpenState'; import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem'; import { Text } from '@ui5/webcomponents-react/lib/Text'; +import '@ui5/webcomponents/dist/icons/navigation-down-arrow.js'; +import '@ui5/webcomponents/dist/icons/navigation-right-arrow.js'; import React, { Children, cloneElement, @@ -18,14 +20,15 @@ import React, { Ref, useCallback, useEffect, + useMemo, + useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; import { createUseStyles, useTheme } from 'react-jss'; import { CommonProps } from '../../interfaces/CommonProps'; import { JSSTheme } from '../../interfaces/JSSTheme'; import { sideNavigationListItemStyles } from './SideNavigationListItem.jss'; -import '@ui5/webcomponents/dist/icons/navigation-down-arrow.js'; -import '@ui5/webcomponents/dist/icons/navigation-right-arrow.js'; export interface SideNavigationListItemProps extends CommonProps { icon?: string; @@ -91,76 +94,97 @@ const SideNavigationListItem: FC = forwardRef( childCount > 0 && !!validChildren.find((child: any) => child.props.id === props['selectedId']); + const customListItemCommonProps = { + ref, + className: listItemClasses.valueOf(), + tooltip, + slot, + style, + 'data-id': id, + 'data-has-children': childCount > 0, + 'data-is-child': props['isChild'] + }; + + const popoverRef = useRef(); + + const displayedIcon = useMemo(() => { + return ; + }, [classes.icon, icon]); + + const handleOpenPopover = useCallback( + (e) => { + // @ts-ignore + popoverRef.current.openBy(e.target); + }, + [popoverRef.current] + ); + + if (isOpenStateExpanded) { + return ( + <> + + {icon && !noIcons && displayedIcon} + {!icon && !noIcons && } + {text} + {childCount > 0 && ( + + + + )} + + {isExpanded && + validChildren.map((child: any, index: number) => { + const style = child.props.style || {}; + if (index !== childCount - 1) { + style['--ui5-listitem-border-bottom'] = 'none'; + } + + return cloneElement(child, { + icon: null, + style, + openState: props['openState'], + selectedId: props['selectedId'], + noIcons, + isChild: true + }); + })} + + ); + } + return ( <> - 0} - data-is-child={props['isChild']} - > - {(isOpenStateExpanded || childCount === 0) && icon && !noIcons && ( - - )} - {!isOpenStateExpanded && icon && childCount > 0 && !noIcons && ( - } - > - - - {text} - - {validChildren.map((child: any, index) => { - return ( - - {child.props.text} + + {childCount > 0 ? ( + + {displayedIcon} +
+ {createPortal( + + + + {text} - ); - })} - - - )} - {!isOpenStateExpanded && icon && childCount > 0 &&
} - {!icon && !noIcons && } - {isOpenStateExpanded && {text}} - {isOpenStateExpanded && childCount > 0 && ( - + {validChildren.map((child: any, index) => ( + + {child.props.text} + + ))} + + , + document.body + )} + + ) : ( + displayedIcon )} - {isOpenStateExpanded && - isExpanded && - validChildren.map((child: any, index: number) => { - const style = child.props.style || {}; - if (index !== childCount - 1) { - style['--ui5-listitem-border-bottom'] = 'none'; - } - - return cloneElement(child, { - icon: null, - style, - openState: props['openState'], - selectedId: props['selectedId'], - noIcons, - isChild: true - }); - })} ); } diff --git a/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap b/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap index 87c17944641..2602becaaae 100644 --- a/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap +++ b/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap @@ -3,7 +3,7 @@ exports[`VariantManagement Render without crashing 1`] = ` Array [
{ + return { + display: 'inline-block', + ...openByStyle + }; + }, [openByStyle]); return ( <>