From 9b36161330d40a8ddc466f5d9367b84e9d829f06 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Mon, 3 Aug 2020 15:37:58 +0200 Subject: [PATCH] fix: use createPortal for all internal popovers (#636) --- .../ActionSheet/ActionSheet.stories.mdx | 67 + .../ActionSheet/ActionSheet.test.tsx | 61 +- .../__snapshots__/ActionSheet.test.tsx.snap | 79 +- .../components/ActionSheet/demo.stories.tsx | 50 - .../main/src/components/ActionSheet/index.tsx | 20 +- .../AnalyticalTable/AnalyticalTable.test.tsx | 27 +- .../ColumnHeader/ColumnHeaderModal.tsx | 6 +- .../AnalyticalTable.test.tsx.snap | 3540 +++++------------ .../__snapshots__/FilterBar.test.tsx.snap | 36 - .../ObjectPage/ObjectPageAnchorBar.tsx | 26 +- .../__snapshots__/ObjectPage.test.tsx.snap | 110 - .../VariantManagement.test.tsx.snap | 72 - .../components/VariantManagement/index.tsx | 46 +- 13 files changed, 1248 insertions(+), 2892 deletions(-) create mode 100644 packages/main/src/components/ActionSheet/ActionSheet.stories.mdx delete mode 100644 packages/main/src/components/ActionSheet/demo.stories.tsx diff --git a/packages/main/src/components/ActionSheet/ActionSheet.stories.mdx b/packages/main/src/components/ActionSheet/ActionSheet.stories.mdx new file mode 100644 index 00000000000..8b1e2734bc9 --- /dev/null +++ b/packages/main/src/components/ActionSheet/ActionSheet.stories.mdx @@ -0,0 +1,67 @@ +import { Meta, Title, Description, Story, Preview, Props } from '@storybook/addon-docs/blocks'; +import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes'; +import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet'; +import { Button } from '@ui5/webcomponents-react/lib/Button'; +import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType'; +import { PopoverHorizontalAlign } from '@ui5/webcomponents-react/lib/PopoverHorizontalAlign'; +import { PopoverVerticalAlign } from '@ui5/webcomponents-react/lib/PopoverVerticalAlign'; +import { useCallback, useRef } from 'react'; + + + + +<Subtitle /> +<Description /> + +<Preview> + <Story name="Default"> + {(args) => { + const actionSheetRef = useRef(); + const onButtonClick = useCallback( + (e) => { + actionSheetRef.current.open(e.target); + }, + [actionSheetRef] + ); + return ( + <> + <Button onClick={onButtonClick}>Open ActionSheet</Button> + <ActionSheet ref={actionSheetRef} {...args}> + <Button icon="add">Accept</Button> + <Button>Reject</Button> + <Button>This is my super long text!</Button> + </ActionSheet> + </> + ); + }} + </Story> +</Preview> + +<Props story="Default" components={{ ActionSheet }} /> diff --git a/packages/main/src/components/ActionSheet/ActionSheet.test.tsx b/packages/main/src/components/ActionSheet/ActionSheet.test.tsx index 5ecd0c63dd1..3168479cd7b 100644 --- a/packages/main/src/components/ActionSheet/ActionSheet.test.tsx +++ b/packages/main/src/components/ActionSheet/ActionSheet.test.tsx @@ -1,52 +1,40 @@ +import { cleanStaticAreaAfterEachTest, fireEvent, render, screen } from '@shared/tests'; import { createPassThroughPropsTest } from '@shared/tests/utils'; -import { mount } from 'enzyme'; import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet'; import { Button } from '@ui5/webcomponents-react/lib/Button'; import { Label } from '@ui5/webcomponents-react/lib/Label'; import React, { createRef, RefObject } from 'react'; -import sinon from 'sinon'; import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef'; describe('ActionSheet', () => { + cleanStaticAreaAfterEachTest(); + test('Render without Crashing', () => { - const button = <Button />; - const wrapper = mount( - <ActionSheet openBy={button} className="myCustomClass"> - <Button icon={'add'}>Accept</Button> + const ref = createRef(); + const wrapper = render( + <ActionSheet className="myCustomClass" ref={ref}> + <Button>Accept</Button> <Button>Reject</Button> <Button>This is my super long text!</Button> </ActionSheet> ); - expect(wrapper.render()).toMatchSnapshot(); + + expect(wrapper.container.parentElement).toMatchSnapshot(); }); test('Button Click handler', () => { - const callback = sinon.spy(); - const button = <Button />; - const wrapper = mount( - <ActionSheet openBy={button} className="myCustomClass"> - <Button icon={'add'} onClick={callback}> - Accept - </Button> + const callback = jest.fn(); + render( + <ActionSheet className="myCustomClass"> + <Button onClick={callback}>Accept</Button> <Button>Reject</Button> <Button>This is my super long text!</Button> </ActionSheet> ); - wrapper - .find('ui5-button') - .first() - .instance() - // @ts-ignore - .fireEvent('click'); - wrapper.update(); - wrapper - .find('ui5-responsive-popover ui5-button') - .first() - .instance() - // @ts-ignore - .fireEvent('click'); - expect(callback.called).toBe(true); + fireEvent.click(screen.getByText('Accept')); + + expect(callback).toBeCalled(); }); test('Test Legacy Ref', () => { @@ -55,10 +43,9 @@ describe('ActionSheet', () => { const ref = (el) => { legacyRef = el; }; - const button = <Button />; - mount( - <ActionSheet ref={ref} openBy={button}> - <Button icon={'add'}>Accept</Button> + render( + <ActionSheet ref={ref}> + <Button>Accept</Button> <Button>Reject</Button> <Button>This is my super long text!</Button> </ActionSheet> @@ -68,19 +55,17 @@ describe('ActionSheet', () => { test('Ref object', () => { const ref: RefObject<Ui5PopoverDomRef> = createRef(); - const button = <Button />; - mount(<ActionSheet ref={ref} openBy={button} />); + render(<ActionSheet ref={ref} />); expect((ref.current as any).tagName).toEqual('UI5-RESPONSIVE-POPOVER'); }); test('does not crash with other component', () => { - const button = <Button />; - const wrapper = mount( - <ActionSheet openBy={button}> + const { container } = render( + <ActionSheet> <Label>I should not crash</Label> </ActionSheet> ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.parentElement).toMatchSnapshot(); }); createPassThroughPropsTest(ActionSheet); diff --git a/packages/main/src/components/ActionSheet/__snapshots__/ActionSheet.test.tsx.snap b/packages/main/src/components/ActionSheet/__snapshots__/ActionSheet.test.tsx.snap index 370e4501625..0bf5c27ac6f 100644 --- a/packages/main/src/components/ActionSheet/__snapshots__/ActionSheet.test.tsx.snap +++ b/packages/main/src/components/ActionSheet/__snapshots__/ActionSheet.test.tsx.snap @@ -1,46 +1,51 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ActionSheet Render without Crashing 1`] = ` -<ui5-responsive-popover - class="ActionSheet-actionSheet-0 myCustomClass" - horizontal-align="Center" - placement-type="Right" - vertical-align="Center" -> - <ui5-button - data-is-action-sheet-button="" - design="Transparent" - icon="add" +<body> + <div /> + <ui5-responsive-popover + class="ActionSheet-actionSheet myCustomClass" + horizontal-align="Center" + placement-type="Right" + vertical-align="Center" > - Accept - </ui5-button> - <ui5-button - data-is-action-sheet-button="" - design="Transparent" - > - Reject - </ui5-button> - <ui5-button - data-is-action-sheet-button="" - design="Transparent" - > - This is my super long text! - </ui5-button> -</ui5-responsive-popover> + <ui5-button + data-is-action-sheet-button="" + design="Transparent" + > + Accept + </ui5-button> + <ui5-button + data-is-action-sheet-button="" + design="Transparent" + > + Reject + </ui5-button> + <ui5-button + data-is-action-sheet-button="" + design="Transparent" + > + This is my super long text! + </ui5-button> + </ui5-responsive-popover> +</body> `; exports[`ActionSheet does not crash with other component 1`] = ` -<ui5-responsive-popover - class="ActionSheet-actionSheet-0" - horizontal-align="Center" - placement-type="Right" - vertical-align="Center" -> - <ui5-label - data-is-action-sheet-button="" - design="Transparent" +<body> + <div /> + <ui5-responsive-popover + class="ActionSheet-actionSheet" + horizontal-align="Center" + placement-type="Right" + vertical-align="Center" > - I should not crash - </ui5-label> -</ui5-responsive-popover> + <ui5-label + data-is-action-sheet-button="" + design="Transparent" + > + I should not crash + </ui5-label> + </ui5-responsive-popover> +</body> `; diff --git a/packages/main/src/components/ActionSheet/demo.stories.tsx b/packages/main/src/components/ActionSheet/demo.stories.tsx deleted file mode 100644 index 7f739775a9c..00000000000 --- a/packages/main/src/components/ActionSheet/demo.stories.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet'; -import { Button } from '@ui5/webcomponents-react/lib/Button'; -import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType'; -import React, { useCallback, useRef } from 'react'; -import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes'; - -export default { - title: 'Components / ActionSheet', - component: ActionSheet, - argTypes: { - ...createSelectArgTypes({ placementType: PlacementType }), - children: { - type: null - }, - footer: { - type: null - }, - header: { - type: null - }, - ref: { - type: null - } - }, - args: { - placement: PlacementType.Bottom - } -}; - -export const defaultStory = (props) => { - const actionSheetRef = useRef(); - const onButtonClick = useCallback( - (e) => { - actionSheetRef.current.open(e.target); - }, - [actionSheetRef] - ); - return ( - <> - <Button onClick={onButtonClick}>Open ActionSheet</Button> - <ActionSheet ref={actionSheetRef} placementType={props.placement}> - <Button icon="add">Accept</Button> - <Button>Reject</Button> - <Button>This is my super long text!</Button> - </ActionSheet> - </> - ); -}; - -defaultStory.storyName = 'Default'; diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx index 58f20085c6d..251590f9652 100644 --- a/packages/main/src/components/ActionSheet/index.tsx +++ b/packages/main/src/components/ActionSheet/index.tsx @@ -4,16 +4,15 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHe import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; -import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType'; import { ResponsivePopover } from '@ui5/webcomponents-react/lib/ResponsivePopover'; import React, { Children, cloneElement, FC, forwardRef, ReactElement, RefObject } from 'react'; +import { createPortal } from 'react-dom'; import { Ui5ResponsivePopoverDomRef } from '../../interfaces/Ui5ResponsivePopoverDomRef'; import { ButtonPropTypes } from '../../webComponents/Button'; import { ResponsivePopoverPropTypes } from '../../webComponents/ResponsivePopover'; import styles from './ActionSheet.jss'; -export interface ActionSheetPropTypes extends ResponsivePopoverPropTypes { - placement?: PlacementType; +export interface ActionSheetPropTypes extends Omit<ResponsivePopoverPropTypes, 'children'> { children?: ReactElement<ButtonPropTypes> | ReactElement<ButtonPropTypes>[]; } @@ -56,10 +55,7 @@ const ActionSheet: FC<ActionSheetPropTypes> = forwardRef( const classes = useStyles(); - const actionSheetClasses = StyleClassHelper.of(classes.actionSheet); - if (className) { - actionSheetClasses.put(className); - } + const actionSheetClasses = StyleClassHelper.of(classes.actionSheet).putIfPresent(className); const popoverRef: RefObject<Ui5ResponsivePopoverDomRef> = useConsolidatedRef(ref); @@ -86,12 +82,12 @@ const ActionSheet: FC<ActionSheetPropTypes> = forwardRef( 'onBeforeOpen' ]); - return ( + return createPortal( <ResponsivePopover ref={popoverRef} style={style} slot={slot} - className={actionSheetClasses.valueOf()} + className={actionSheetClasses.className} allowTargetOverlap={allowTargetOverlap} headerText={headerText} horizontalAlign={horizontalAlign} @@ -109,14 +105,12 @@ const ActionSheet: FC<ActionSheetPropTypes> = forwardRef( {...passThroughProps} > {Children.map(children, renderActionSheetButton)} - </ResponsivePopover> + </ResponsivePopover>, + document.body ); } ); -ActionSheet.defaultProps = { - placement: PlacementType.Bottom -}; ActionSheet.displayName = 'ActionSheet'; export { ActionSheet }; diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx index 510e5be23cb..939aea68036 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx @@ -1,5 +1,5 @@ import { createPassThroughPropsTest } from '@shared/tests/utils'; -import { act, render } from '@testing-library/react'; +import { act, render, screen, fireEvent, cleanStaticAreaAfterEachTest, waitFor } from '@shared/tests'; import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable'; import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior'; import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; @@ -142,24 +142,25 @@ const dataTree = [ ]; describe('AnalyticalTable', () => { - test('test Asc desc', () => { - const wrapper = mount(<AnalyticalTable data={data} title={'Test'} columns={columns} />); + cleanStaticAreaAfterEachTest(); - expect(wrapper.render()).toMatchSnapshot(); + beforeEach(() => { + window = Object.assign(window, { innerWidth: 1440 }); + }); - // test asc function inside the popover element - let component = wrapper.find('ui5-li').at(1).instance(); - // @ts-ignore - component.click(); + test('test Asc desc', async () => { + const { asFragment } = render(<AnalyticalTable data={data} title={'Test'} columns={columns} />); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); + + fireEvent.click(screen.getAllByText('Sort Ascending')[0], { bubbles: false }); + + expect(asFragment()).toMatchSnapshot(); // test desc function inside the popover element - component = wrapper.find('ui5-li').at(0).instance(); - // @ts-ignore - component.click(); + fireEvent.click(screen.getAllByText('Sort Descending')[0], { bubbles: false }); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment()).toMatchSnapshot(); }); test('Tree Table', () => { diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx index 0acb5bcd8e1..5b5ecb61592 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx @@ -19,6 +19,7 @@ import { Popover } from '@ui5/webcomponents-react/lib/Popover'; import { PopoverHorizontalAlign } from '@ui5/webcomponents-react/lib/PopoverHorizontalAlign'; import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem'; import React, { CSSProperties, forwardRef, RefObject, useCallback } from 'react'; +import { createPortal } from 'react-dom'; import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef'; import { stopPropagation } from '../../../internal/stopPropagation'; import { ColumnType } from '../types/ColumnType'; @@ -109,7 +110,7 @@ export const ColumnHeaderModal = forwardRef((props: ColumnHeaderModalProperties, const isSortedAscending = column.isSorted && column.isSortedDesc === false; const isSortedDescending = column.isSorted && column.isSortedDesc === true; - return ( + return createPortal( <Popover noArrow horizontalAlign={PopoverHorizontalAlign.Left} @@ -158,7 +159,8 @@ export const ColumnHeaderModal = forwardRef((props: ColumnHeaderModalProperties, </StandardListItem> )} </List> - </Popover> + </Popover>, + document.body ); }); ColumnHeaderModal.displayName = 'ColumnHeaderModal'; 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 eaa3f8b60b4..3f72b35ce36 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -45,35 +45,6 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -103,35 +74,6 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -161,35 +103,6 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -220,35 +133,6 @@ exports[`AnalyticalTable Alternate Row Color 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -548,35 +432,6 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -606,35 +461,6 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -664,35 +490,6 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -723,35 +520,6 @@ exports[`AnalyticalTable Loading - Loader 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -1051,35 +819,6 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -1109,35 +848,6 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -1167,35 +877,6 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -1226,35 +907,6 @@ exports[`AnalyticalTable Loading - Placeholder 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -1565,48 +1217,6 @@ exports[`AnalyticalTable Tree Table 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - <div - class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0" - style="padding: 0px 1rem;" - > - <ui5-icon - name="filter" - style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;" - /> - <ui5-input - type="Text" - value-state="None" - /> - </div> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -1636,48 +1246,6 @@ exports[`AnalyticalTable Tree Table 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - <div - class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0" - style="padding: 0px 1rem;" - > - <ui5-icon - name="filter" - style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;" - /> - <ui5-input - type="Text" - value-state="None" - /> - </div> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -1707,48 +1275,6 @@ exports[`AnalyticalTable Tree Table 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - <div - class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0" - style="padding: 0px 1rem;" - > - <ui5-icon - name="filter" - style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;" - /> - <ui5-input - type="Text" - value-state="None" - /> - </div> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -1779,48 +1305,6 @@ exports[`AnalyticalTable Tree Table 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - <div - class="FlexBox-flexBox-0 FlexBox-flexBoxDirectionRow-0 FlexBox-justifyContentStart-0 FlexBox-alignItemsCenter-0 FlexBox-flexWrapNoWrap-0" - style="padding: 0px 1rem;" - > - <ui5-icon - name="filter" - style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;" - /> - <ui5-input - type="Text" - value-state="None" - /> - </div> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -2191,35 +1675,6 @@ exports[`AnalyticalTable custom row height 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -2249,35 +1704,6 @@ exports[`AnalyticalTable custom row height 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -2307,35 +1733,6 @@ exports[`AnalyticalTable custom row height 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -2366,35 +1763,6 @@ exports[`AnalyticalTable custom row height 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -2694,35 +2062,6 @@ exports[`AnalyticalTable render without data 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -2752,35 +2091,6 @@ exports[`AnalyticalTable render without data 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -2810,35 +2120,6 @@ exports[`AnalyticalTable render without data 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -2869,35 +2150,6 @@ exports[`AnalyticalTable render without data 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -2918,1512 +2170,1170 @@ exports[`AnalyticalTable render without data 1`] = ` `; exports[`AnalyticalTable test Asc desc 1`] = ` -<div - style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;" -> +<DocumentFragment> <div - style="min-height: 1.5rem; display: flex; align-items: center;" + style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;" > - <ui5-title - level="H2" + <div + style="min-height: 1.5rem; display: flex; align-items: center;" > - Test - </ui5-title> - </div> - <div - aria-colcount="4" - aria-rowcount="5" - class="AnalyticalTable-table-0 sapScrollBar" - data-per-page="15" - role="grid" - > - <header - class="AnalyticalTable-tableHeaderRow-0" - role="rowgroup" + <ui5-title + level="H2" + > + Test + </ui5-title> + </div> + <div + aria-colcount="4" + aria-rowcount="5" + class="AnalyticalTable-table sapScrollBar" + data-per-page="15" + role="grid" > - <div - class="AnalyticalTable-th-0" - data-column-id="name" - draggable="true" - id="name" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" + <header + class="AnalyticalTable-tableHeaderRow" + role="rowgroup" > <div - class="TableColumnHeader-header-0" + class="AnalyticalTable-th" + data-column-id="name" + draggable="true" + id="name" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - title="Name" - > - Name - </span> <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" + class="TableColumnHeader-header" + > + <span + class="Text-text Text-noWrap TableColumnHeader-text" + title="Name" > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 150px;" - /> - <div - class="AnalyticalTable-th-0" - data-column-id="age" - draggable="true" - id="age" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" - > + Name + </span> + <div + class="TableColumnHeader-iconContainer" + /> + </div> + </div> <div - class="TableColumnHeader-header-0" + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 150px;" + /> + <div + class="AnalyticalTable-th" + data-column-id="age" + draggable="true" + id="age" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - title="Age" - > - Age - </span> <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" + class="TableColumnHeader-header" + > + <span + class="Text-text Text-noWrap TableColumnHeader-text" + title="Age" > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 300px;" - /> - <div - class="AnalyticalTable-th-0" - data-column-id="friend.name" - draggable="true" - id="friend.name" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" - > + Age + </span> + <div + class="TableColumnHeader-iconContainer" + /> + </div> + </div> <div - class="TableColumnHeader-header-0" + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 300px;" + /> + <div + class="AnalyticalTable-th" + data-column-id="friend.name" + draggable="true" + id="friend.name" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - title="Friend Name" - > - Friend Name - </span> <div - class="TableColumnHeader-iconContainer-0" - /> + class="TableColumnHeader-header" + > + <span + class="Text-text Text-noWrap TableColumnHeader-text" + title="Friend Name" + > + Friend Name + </span> + <div + class="TableColumnHeader-iconContainer" + /> + </div> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" + <div + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 450px;" + /> + <div + class="AnalyticalTable-th" + data-column-id="friend.age" + draggable="true" + id="friend.age" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" + <div + class="TableColumnHeader-header" + > + <span + class="Text-text Text-noWrap TableColumnHeader-text" > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 450px;" - /> + <span> + Friend Age + </span> + </span> + <div + class="TableColumnHeader-iconContainer" + /> + </div> + </div> + <div + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 597px;" + /> + </header> <div - class="AnalyticalTable-th-0" - data-column-id="friend.age" - draggable="true" - id="friend.age" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" + class="AnalyticalTable-tbody sapScrollBar" + style="height: 220px; width: 600px;" > <div - class="TableColumnHeader-header-0" + style="height: 220px; width: 600px; position: relative;" + tabindex="0" > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - > - <span> - Friend Age - </span> - </span> <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 597px;" - /> - </header> - <div - class="AnalyticalTable-tbody-0 sapScrollBar" - style="height: 220px; width: 600px;" - > - <div - style="height: 220px; width: 600px; position: relative;" - tabindex="0" - > - <div - aria-rowindex="0" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(0px);" - > + aria-rowindex="0" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(0px);" + > + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="Fra" + > + Fra + </span> + </div> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="40" + > + 40 + </span> + </div> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="MAR" + > + MAR + </span> + </div> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="28" + > + 28 + </span> + </div> + </div> <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + aria-rowindex="1" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(44px);" > - <span - class="Text-text-0 Text-noWrap-0" - title="Fra" - > - Fra - </span> + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="bla" + > + bla + </span> + </div> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="20" + > + 20 + </span> + </div> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="Nei" + > + Nei + </span> + </div> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="50" + > + 50 + </span> + </div> </div> <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + aria-rowindex="2" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(88px);" > - <span - class="Text-text-0 Text-noWrap-0" - title="40" - > - 40 - </span> + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> </div> <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + aria-rowindex="3" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(132px);" > - <span - class="Text-text-0 Text-noWrap-0" - title="MAR" - > - MAR - </span> + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> </div> <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + aria-rowindex="4" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(176px);" > - <span - class="Text-text-0 Text-noWrap-0" - title="28" - > - 28 - </span> + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> </div> </div> + </div> + </div> + </div> +</DocumentFragment> +`; + +exports[`AnalyticalTable test Asc desc 2`] = ` +<DocumentFragment> + <div + style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;" + > + <div + style="min-height: 1.5rem; display: flex; align-items: center;" + > + <ui5-title + level="H2" + > + Test + </ui5-title> + </div> + <div + aria-colcount="4" + aria-rowcount="5" + class="AnalyticalTable-table sapScrollBar" + data-per-page="15" + role="grid" + > + <header + class="AnalyticalTable-tableHeaderRow" + role="rowgroup" + > <div - aria-rowindex="1" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(44px);" + class="AnalyticalTable-th" + data-column-id="name" + draggable="true" + id="name" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" > <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + class="TableColumnHeader-header" > <span - class="Text-text-0 Text-noWrap-0" - title="bla" + class="Text-text Text-noWrap TableColumnHeader-text" + title="Name" > - bla + Name </span> + <div + class="TableColumnHeader-iconContainer" + /> </div> + </div> + <div + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 150px;" + /> + <div + class="AnalyticalTable-th" + data-column-id="age" + draggable="true" + id="age" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" + > <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + class="TableColumnHeader-header" > <span - class="Text-text-0 Text-noWrap-0" - title="20" + class="Text-text Text-noWrap TableColumnHeader-text" + title="Age" > - 20 + Age </span> + <div + class="TableColumnHeader-iconContainer" + /> </div> + </div> + <div + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 300px;" + /> + <div + class="AnalyticalTable-th" + data-column-id="friend.name" + draggable="true" + id="friend.name" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" + > <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + class="TableColumnHeader-header" > <span - class="Text-text-0 Text-noWrap-0" - title="Nei" + class="Text-text Text-noWrap TableColumnHeader-text" + title="Friend Name" > - Nei + Friend Name </span> + <div + class="TableColumnHeader-iconContainer" + /> </div> + </div> + <div + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 450px;" + /> + <div + class="AnalyticalTable-th" + data-column-id="friend.age" + draggable="true" + id="friend.age" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" + > <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + class="TableColumnHeader-header" > <span - class="Text-text-0 Text-noWrap-0" - title="50" + class="Text-text Text-noWrap TableColumnHeader-text" > - 50 + <span> + Friend Age + </span> </span> + <div + class="TableColumnHeader-iconContainer" + /> </div> </div> <div - aria-rowindex="2" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(88px);" + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 597px;" + /> + </header> + <div + class="AnalyticalTable-tbody sapScrollBar" + style="height: 220px; width: 600px;" + > + <div + style="height: 220px; width: 600px; position: relative;" + tabindex="0" > <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> + aria-rowindex="0" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(0px);" + > + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="Fra" + > + Fra + </span> + </div> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="40" + > + 40 + </span> + </div> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="MAR" + > + MAR + </span> + </div> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="28" + > + 28 + </span> + </div> + </div> <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> + aria-rowindex="1" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(44px);" + > + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="bla" + > + bla + </span> + </div> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="20" + > + 20 + </span> + </div> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="Nei" + > + Nei + </span> + </div> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="50" + > + 50 + </span> + </div> + </div> <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> + aria-rowindex="2" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(88px);" + > + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + </div> <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - </div> - <div - aria-rowindex="3" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(132px);" - > + aria-rowindex="3" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(132px);" + > + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + </div> <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - </div> - <div - aria-rowindex="4" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(176px);" - > - <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - </div> - </div> - </div> - </div> -</div> -`; - -exports[`AnalyticalTable test Asc desc 2`] = ` -<div - style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;" -> - <div - style="min-height: 1.5rem; display: flex; align-items: center;" - > - <ui5-title - level="H2" - > - Test - </ui5-title> - </div> - <div - aria-colcount="4" - aria-rowcount="5" - class="AnalyticalTable-table-0 sapScrollBar" - data-per-page="15" - role="grid" - > - <header - class="AnalyticalTable-tableHeaderRow-0" - role="rowgroup" - > - <div - class="AnalyticalTable-th-0" - data-column-id="name" - draggable="true" - id="name" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" - > - <div - class="TableColumnHeader-header-0" - > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - title="Name" - > - Name - </span> - <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 150px;" - /> - <div - class="AnalyticalTable-th-0" - data-column-id="age" - draggable="true" - id="age" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" - > - <div - class="TableColumnHeader-header-0" - > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - title="Age" - > - Age - </span> - <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 300px;" - /> - <div - class="AnalyticalTable-th-0" - data-column-id="friend.name" - draggable="true" - id="friend.name" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" - > - <div - class="TableColumnHeader-header-0" - > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - title="Friend Name" - > - Friend Name - </span> - <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 450px;" - /> - <div - class="AnalyticalTable-th-0" - data-column-id="friend.age" - draggable="true" - id="friend.age" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" - > - <div - class="TableColumnHeader-header-0" - > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - > - <span> - Friend Age - </span> - </span> - <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 597px;" - /> - </header> - <div - class="AnalyticalTable-tbody-0 sapScrollBar" - style="height: 220px; width: 600px;" - > - <div - style="height: 220px; width: 600px; position: relative;" - tabindex="0" - > - <div - aria-rowindex="0" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(0px);" - > - <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="Fra" - > - Fra - </span> - </div> - <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="40" - > - 40 - </span> - </div> - <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="MAR" - > - MAR - </span> - </div> - <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="28" - > - 28 - </span> - </div> - </div> - <div - aria-rowindex="1" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(44px);" - > - <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="bla" - > - bla - </span> - </div> - <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="20" - > - 20 - </span> - </div> - <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="Nei" - > - Nei - </span> - </div> - <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="50" - > - 50 - </span> - </div> - </div> - <div - aria-rowindex="2" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(88px);" - > - <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - </div> - <div - aria-rowindex="3" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(132px);" - > - <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - </div> - <div - aria-rowindex="4" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(176px);" - > - <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - </div> - </div> - </div> - </div> -</div> -`; - -exports[`AnalyticalTable test Asc desc 3`] = ` -<div - style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;" -> - <div - style="min-height: 1.5rem; display: flex; align-items: center;" - > - <ui5-title - level="H2" - > - Test - </ui5-title> - </div> - <div - aria-colcount="4" - aria-rowcount="5" - class="AnalyticalTable-table-0 sapScrollBar" - data-per-page="15" - role="grid" - > - <header - class="AnalyticalTable-tableHeaderRow-0" - role="rowgroup" - > - <div - class="AnalyticalTable-th-0" - data-column-id="name" - draggable="true" - id="name" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" - > - <div - class="TableColumnHeader-header-0" - > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - title="Name" - > - Name - </span> - <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 150px;" - /> - <div - class="AnalyticalTable-th-0" - data-column-id="age" - draggable="true" - id="age" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" - > - <div - class="TableColumnHeader-header-0" - > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - title="Age" - > - Age - </span> - <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 300px;" - /> - <div - class="AnalyticalTable-th-0" - data-column-id="friend.name" - draggable="true" - id="friend.name" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" - > - <div - class="TableColumnHeader-header-0" - > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - title="Friend Name" + aria-rowindex="4" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(176px);" > - Friend Name - </span> - <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 450px;" - /> - <div - class="AnalyticalTable-th-0" - data-column-id="friend.age" - draggable="true" - id="friend.age" - role="columnheader" - style="position: relative; width: 150px; cursor: pointer;" - > - <div - class="TableColumnHeader-header-0" - > - <span - class="Text-text-0 Text-noWrap-0 TableColumnHeader-text-0" - > - <span> - Friend Age - </span> - </span> - <div - class="TableColumnHeader-iconContainer-0" - /> - </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> - </div> - <div - class="TableColumnHeader-resizer-0" - data-resizer="true" - draggable="false" - role="separator" - style="left: 597px;" - /> - </header> - <div - class="AnalyticalTable-tbody-0 sapScrollBar" - style="height: 220px; width: 600px;" - > - <div - style="height: 220px; width: 600px; position: relative;" - tabindex="0" - > - <div - aria-rowindex="0" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(0px);" - > - <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="Fra" - > - Fra - </span> - </div> - <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="40" - > - 40 - </span> - </div> - <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="MAR" - > - MAR - </span> - </div> - <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - > - <span - class="Text-text-0 Text-noWrap-0" - title="28" - > - 28 - </span> + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> </div> </div> + </div> + </div> + </div> +</DocumentFragment> +`; + +exports[`AnalyticalTable test Asc desc 3`] = ` +<DocumentFragment> + <div + style="max-width: 100%; overflow-x: auto; display: flex; flex-direction: column; visibility: hidden;" + > + <div + style="min-height: 1.5rem; display: flex; align-items: center;" + > + <ui5-title + level="H2" + > + Test + </ui5-title> + </div> + <div + aria-colcount="4" + aria-rowcount="5" + class="AnalyticalTable-table sapScrollBar" + data-per-page="15" + role="grid" + > + <header + class="AnalyticalTable-tableHeaderRow" + role="rowgroup" + > <div - aria-rowindex="1" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(44px);" + class="AnalyticalTable-th" + data-column-id="name" + draggable="true" + id="name" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" > <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + class="TableColumnHeader-header" > <span - class="Text-text-0 Text-noWrap-0" - title="bla" + class="Text-text Text-noWrap TableColumnHeader-text" + title="Name" > - bla + Name </span> + <div + class="TableColumnHeader-iconContainer" + /> </div> + </div> + <div + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 150px;" + /> + <div + class="AnalyticalTable-th" + data-column-id="age" + draggable="true" + id="age" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" + > <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + class="TableColumnHeader-header" > <span - class="Text-text-0 Text-noWrap-0" - title="20" + class="Text-text Text-noWrap TableColumnHeader-text" + title="Age" > - 20 + Age </span> + <div + class="TableColumnHeader-iconContainer" + /> </div> + </div> + <div + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 300px;" + /> + <div + class="AnalyticalTable-th" + data-column-id="friend.name" + draggable="true" + id="friend.name" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" + > <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + class="TableColumnHeader-header" > <span - class="Text-text-0 Text-noWrap-0" - title="Nei" + class="Text-text Text-noWrap TableColumnHeader-text" + title="Friend Name" > - Nei + Friend Name </span> + <div + class="TableColumnHeader-iconContainer" + /> </div> + </div> + <div + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 450px;" + /> + <div + class="AnalyticalTable-th" + data-column-id="friend.age" + draggable="true" + id="friend.age" + role="columnheader" + style="position: relative; width: 150px; cursor: pointer;" + > <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" + class="TableColumnHeader-header" > <span - class="Text-text-0 Text-noWrap-0" - title="50" + class="Text-text Text-noWrap TableColumnHeader-text" > - 50 + <span> + Friend Age + </span> </span> + <div + class="TableColumnHeader-iconContainer" + /> </div> </div> <div - aria-rowindex="2" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(88px);" - > - <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - </div> + class="TableColumnHeader-resizer" + data-resizer="true" + draggable="false" + role="separator" + style="left: 597px;" + /> + </header> + <div + class="AnalyticalTable-tbody sapScrollBar" + style="height: 220px; width: 600px;" + > <div - aria-rowindex="3" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(132px);" + style="height: 220px; width: 600px; position: relative;" + tabindex="0" > <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> - </div> - <div - aria-rowindex="4" - class="AnalyticalTable-tr-0" - role="row" - style="height: 44px; transform: translateY(176px);" - > + aria-rowindex="0" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(0px);" + > + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="Fra" + > + Fra + </span> + </div> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="40" + > + 40 + </span> + </div> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="MAR" + > + MAR + </span> + </div> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="28" + > + 28 + </span> + </div> + </div> <div - aria-colindex="1" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> + aria-rowindex="1" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(44px);" + > + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="bla" + > + bla + </span> + </div> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="20" + > + 20 + </span> + </div> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="Nei" + > + Nei + </span> + </div> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + > + <span + class="Text-text Text-noWrap" + title="50" + > + 50 + </span> + </div> + </div> <div - aria-colindex="2" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> + aria-rowindex="2" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(88px);" + > + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + </div> <div - aria-colindex="3" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> + aria-rowindex="3" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(132px);" + > + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + </div> <div - aria-colindex="4" - class="AnalyticalTable-tableCell-0" - role="cell" - style="align-items: center; width: 150px;" - tabindex="-1" - /> + aria-rowindex="4" + class="AnalyticalTable-tr" + role="row" + style="height: 44px; transform: translateY(176px);" + > + <div + aria-colindex="1" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="2" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="3" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + <div + aria-colindex="4" + class="AnalyticalTable-tableCell" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> + </div> </div> </div> </div> </div> -</div> +</DocumentFragment> `; exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` @@ -4471,35 +3381,6 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -4529,35 +3410,6 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -4587,35 +3439,6 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -4646,35 +3469,6 @@ exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -5016,35 +3810,6 @@ exports[`AnalyticalTable with highlight row 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -5074,35 +3839,6 @@ exports[`AnalyticalTable with highlight row 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -5132,35 +3868,6 @@ exports[`AnalyticalTable with highlight row 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -5191,35 +3898,6 @@ exports[`AnalyticalTable with highlight row 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -5603,35 +4281,6 @@ exports[`AnalyticalTable without selection Column 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -5661,35 +4310,6 @@ exports[`AnalyticalTable without selection Column 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -5719,35 +4339,6 @@ exports[`AnalyticalTable without selection Column 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" @@ -5778,35 +4369,6 @@ exports[`AnalyticalTable without selection Column 1`] = ` class="TableColumnHeader-iconContainer-0" /> </div> - <ui5-popover - horizontal-align="Left" - no-arrow="true" - placement-type="Bottom" - style="font-weight: normal;" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - > - <ui5-li - data-sort="asc" - icon="sort-ascending" - info-state="None" - type="Active" - > - Sort Ascending - </ui5-li> - <ui5-li - data-sort="desc" - icon="sort-descending" - info-state="None" - type="Active" - > - Sort Descending - </ui5-li> - </ui5-list> - </ui5-popover> </div> <div class="TableColumnHeader-resizer-0" diff --git a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap index 29425d7b356..ca3a9743121 100644 --- a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap +++ b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap @@ -158,42 +158,6 @@ exports[`FilterBar Render without crashing - w/ filter dialog 1`] = ` design="Transparent" icon="navigation-down-arrow" /> - <ui5-responsive-popover - header-text="Variants" - horizontal-align="Center" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-button - class="VariantManagement-footer-0" - design="Emphasized" - slot="footer" - > - Cancel - </ui5-button> - <ui5-list - mode="SingleSelect" - separators="All" - > - <ui5-li - data-key="1" - info-state="None" - selected="true" - style="width: 300px;" - type="Active" - > - Variant 1 - </ui5-li> - <ui5-li - data-key="2" - info-state="None" - style="width: 300px;" - type="Active" - > - Variant 2 - </ui5-li> - </ui5-list> - </ui5-responsive-popover> </div> </div> <div> diff --git a/packages/main/src/components/ObjectPage/ObjectPageAnchorBar.tsx b/packages/main/src/components/ObjectPage/ObjectPageAnchorBar.tsx index 023a6f3443b..fe3c35a4bd7 100644 --- a/packages/main/src/components/ObjectPage/ObjectPageAnchorBar.tsx +++ b/packages/main/src/components/ObjectPage/ObjectPageAnchorBar.tsx @@ -17,6 +17,7 @@ import { stopPropagation } from '../../internal/stopPropagation'; import { StandardListItem } from '../../webComponents/StandardListItem'; import { ObjectPageAnchorButton } from './ObjectPageAnchorButton'; import { safeGetChildrenArray } from './ObjectPageUtils'; +import { createPortal } from 'react-dom'; addCustomCSS( 'ui5-button', @@ -195,17 +196,20 @@ const ObjectPageAnchorBar = forwardRef((props: Props, ref: RefObject<HTMLElement data-ui5wcr-object-page-header-action="" /> )} - <Popover placementType={PlacementType.Bottom} noArrow ref={popoverRef} onAfterClose={stopPropagation}> - <List onItemClick={onSubSectionClick}> - {popoverContent?.props?.children - .filter((item) => item.props && item.props.isSubSection) - .map((item) => ( - <StandardListItem key={item.props.id} data-key={item.props.id}> - {item.props.title} - </StandardListItem> - ))} - </List> - </Popover> + {createPortal( + <Popover placementType={PlacementType.Bottom} noArrow ref={popoverRef} onAfterClose={stopPropagation}> + <List onItemClick={onSubSectionClick}> + {popoverContent?.props?.children + .filter((item) => item.props && item.props.isSubSection) + .map((item) => ( + <StandardListItem key={item.props.id} data-key={item.props.id}> + {item.props.title} + </StandardListItem> + ))} + </List> + </Popover>, + document.body + )} </section> ); }); diff --git a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap index 23ccf0eb827..b7390fc52f6 100644 --- a/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap +++ b/packages/main/src/components/ObjectPage/__snapshots__/ObjectPage.test.tsx.snap @@ -144,17 +144,6 @@ exports[`ObjectPage IconTabBar Mode 1`] = ` design="Default" icon="slim-arrow-down" /> - <ui5-popover - horizontal-align="Center" - no-arrow="true" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - /> - </ui5-popover> </section> <section data-component-name="ObjectPageSection" @@ -265,17 +254,6 @@ exports[`ObjectPage Just Some Sections 1`] = ` text="" /> </ui5-tabcontainer> - <ui5-popover - horizontal-align="Center" - no-arrow="true" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - /> - </ui5-popover> </section> <section data-component-name="ObjectPageSection" @@ -447,17 +425,6 @@ exports[`ObjectPage Key Infos 1`] = ` text="" /> </ui5-tabcontainer> - <ui5-popover - horizontal-align="Center" - no-arrow="true" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - /> - </ui5-popover> </section> <section data-component-name="ObjectPageSection" @@ -587,17 +554,6 @@ exports[`ObjectPage No Header 1`] = ` text="" /> </ui5-tabcontainer> - <ui5-popover - horizontal-align="Center" - no-arrow="true" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - /> - </ui5-popover> </section> <section data-component-name="ObjectPageSection" @@ -713,17 +669,6 @@ exports[`ObjectPage Not crashing with 0 sections 1`] = ` tab-layout="Standard" tabs-placement="Top" /> - <ui5-popover - horizontal-align="Center" - no-arrow="true" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - /> - </ui5-popover> </section> </div> `; @@ -801,17 +746,6 @@ exports[`ObjectPage Not crashing with 1 section - Default Mode 1`] = ` text="" /> </ui5-tabcontainer> - <ui5-popover - horizontal-align="Center" - no-arrow="true" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - /> - </ui5-popover> </section> <section data-component-name="ObjectPageSection" @@ -912,17 +846,6 @@ exports[`ObjectPage Not crashing with 1 section - IconTabBar Mode 1`] = ` text="" /> </ui5-tabcontainer> - <ui5-popover - horizontal-align="Center" - no-arrow="true" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - /> - </ui5-popover> </section> <section data-component-name="ObjectPageSection" @@ -1076,17 +999,6 @@ exports[`ObjectPage Only Sections 1`] = ` text="Test 3" /> </ui5-tabcontainer> - <ui5-popover - horizontal-align="Center" - no-arrow="true" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - /> - </ui5-popover> </section> <section data-component-name="ObjectPageSection" @@ -1251,17 +1163,6 @@ exports[`ObjectPage Set selected section id 1`] = ` text="" /> </ui5-tabcontainer> - <ui5-popover - horizontal-align="Center" - no-arrow="true" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - /> - </ui5-popover> </section> <section data-component-name="ObjectPageSection" @@ -1433,17 +1334,6 @@ exports[`ObjectPage With Subsections 1`] = ` design="Default" icon="slim-arrow-down" /> - <ui5-popover - horizontal-align="Center" - no-arrow="true" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-list - mode="None" - separators="All" - /> - </ui5-popover> </section> <section data-component-name="ObjectPageSection" 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 b4858252441..1e76c8ee938 100644 --- a/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap +++ b/packages/main/src/components/VariantManagement/__snapshots__/VariantManagement.test.tsx.snap @@ -15,42 +15,6 @@ exports[`VariantManagement Render without crashing - disabled 1`] = ` disabled="true" icon="navigation-down-arrow" /> - <ui5-responsive-popover - header-text="Variants" - horizontal-align="Center" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-button - class="VariantManagement-footer-0" - design="Emphasized" - slot="footer" - > - Cancel - </ui5-button> - <ui5-list - mode="SingleSelect" - separators="All" - > - <ui5-li - data-key="1" - info-state="None" - selected="true" - style="width: 300px;" - type="Active" - > - Variant 1 - </ui5-li> - <ui5-li - data-key="2" - info-state="None" - style="width: 300px;" - type="Active" - > - Variant 2 - </ui5-li> - </ui5-list> - </ui5-responsive-popover> </div> `; @@ -68,42 +32,6 @@ exports[`VariantManagement Render without crashing 1`] = ` design="Transparent" icon="navigation-down-arrow" /> - <ui5-responsive-popover - header-text="Variants" - horizontal-align="Center" - placement-type="Bottom" - vertical-align="Center" - > - <ui5-button - class="VariantManagement-footer-0" - design="Emphasized" - slot="footer" - > - Cancel - </ui5-button> - <ui5-list - mode="SingleSelect" - separators="All" - > - <ui5-li - data-key="1" - info-state="None" - selected="true" - style="width: 300px;" - type="Active" - > - Variant 1 - </ui5-li> - <ui5-li - data-key="2" - info-state="None" - style="width: 300px;" - type="Active" - > - Variant 2 - </ui5-li> - </ui5-list> - </ui5-responsive-popover> </div> `; diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx index 64e1f19fa9e..b7e033a235f 100644 --- a/packages/main/src/components/VariantManagement/index.tsx +++ b/packages/main/src/components/VariantManagement/index.tsx @@ -17,6 +17,7 @@ import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem' import { Title } from '@ui5/webcomponents-react/lib/Title'; import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel'; import React, { FC, forwardRef, Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; import { CommonProps } from '../../interfaces/CommonProps'; import { Ui5ResponsivePopoverDomRef } from '../../interfaces/Ui5ResponsivePopoverDomRef'; import { stopPropagation } from '../../internal/stopPropagation'; @@ -166,27 +167,30 @@ const VariantManagement: FC<VariantManagementPropTypes> = forwardRef( icon="navigation-down-arrow" disabled={disabled} /> - <ResponsivePopover - ref={popoverRef} - headerText={popupTitle} - placementType={placement} - footer={footerButtons} - onAfterClose={stopPropagation} - > - <List onItemClick={handleVariantItemSelect} mode={ListMode.SingleSelect}> - {variantItems.map((item) => ( - <StandardListItem - style={{ width: '300px' }} - data-key={item.key} - type={ListItemTypes.Active} - key={item.key} - selected={selectedKey === item.key} - > - {item.label} - </StandardListItem> - ))} - </List> - </ResponsivePopover> + {createPortal( + <ResponsivePopover + ref={popoverRef} + headerText={popupTitle} + placementType={placement} + footer={footerButtons} + onAfterClose={stopPropagation} + > + <List onItemClick={handleVariantItemSelect} mode={ListMode.SingleSelect}> + {variantItems.map((item) => ( + <StandardListItem + style={{ width: '300px' }} + data-key={item.key} + type={ListItemTypes.Active} + key={item.key} + selected={selectedKey === item.key} + > + {item.label} + </StandardListItem> + ))} + </List> + </ResponsivePopover>, + document.body + )} </div> ); }