diff --git a/.storybook/preview.js b/.storybook/preview.js index fbc7f5d4bf4..6d407c3179a 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -10,6 +10,7 @@ import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; import { ThemeProvider } from '@ui5/webcomponents-react/lib/ThemeProvider'; import { Themes } from '@ui5/webcomponents-react/lib/Themes'; import '@ui5/webcomponents/dist/Assets'; +import '@ui5/webcomponents-react/dist/Assets'; import '@ui5/webcomponents/dist/features/InputElementsFormSupport'; import React, { useEffect } from 'react'; import 'react-app-polyfill/ie11'; diff --git a/package.json b/package.json index 0dac343a227..b1694a57d9a 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@rollup/plugin-node-resolve": "^7.1.3", "@rollup/plugin-replace": "^2.3.2", "@storybook/storybook-deployer": "^2.8.5", + "@testing-library/react": "^10.0.4", "@types/enzyme": "^3.10.5", "@types/jest": "^25.2.1", "@types/react": "^16.9.34", diff --git a/packages/main/package.json b/packages/main/package.json index eaae1c5aac5..cf4fde73068 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -37,7 +37,7 @@ "react-content-loader": "^5.0.4", "react-jss": "10.1.1", "react-table": "7.0.4", - "react-window": "^1.8.5" + "react-virtual": "2.1.7" }, "peerDependencies": { "@ui5/webcomponents": "1.0.0-rc.7", diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx index a4f026b3e44..551de1b404e 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx @@ -57,7 +57,7 @@ const columns = [ } ]; -const data = generateData(200); +const data = generateData(10_000); const dataTree = generateData(20, true); export const defaultTable = () => { @@ -72,7 +72,7 @@ export const defaultTable = () => { alternateRowColor={boolean('alternateRowColor', false)} sortable={boolean('sortable', true)} filterable={boolean('filterable', true)} - visibleRows={number('visibleRows', 5)} + visibleRows={number('visibleRows', 15)} minRows={number('minRows', 5)} groupable={boolean('groupable', true)} selectionMode={select( diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx index cad7e8a6af6..b7c41f1e8af 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx @@ -1,9 +1,9 @@ import { createPassThroughPropsTest } from '@shared/tests/utils'; +import { act, render } from '@testing-library/react'; import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable'; -import { AnalyticalTableScrollMode } from '@ui5/webcomponents-react/lib/AnalyticalTableScrollMode'; +import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior'; import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; import { ValueState } from '@ui5/webcomponents-react/lib/ValueState'; -import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior'; import { mount } from 'enzyme'; import React, { useRef } from 'react'; @@ -271,19 +271,29 @@ describe('AnalyticalTable', () => { let tableRef; const UsingTable = (props) => { tableRef = useRef(null); - return ; + return ( + + ); }; - mount(); + render(); // Check existence + type expect(typeof tableRef.current.scrollTo).toBe('function'); expect(typeof tableRef.current.scrollToItem).toBe('function'); // call functions - const tableInnerRef = tableRef.current.querySelector("div[class^='AnalyticalTable-table'] > div > div"); - tableRef.current.scrollToItem(2, AnalyticalTableScrollMode.end); - tableRef.current.scrollTo(2); + const tableInnerRef = tableRef.current.querySelector("div[class^='AnalyticalTable-table'] > div"); + act(() => { + tableRef.current.scrollToItem(1, 'start'); + }); + + expect(tableInnerRef.scrollTop).toBe(44); + + act(() => { + tableRef.current.scrollTo(2); + }); + expect(tableInnerRef.scrollTop).toBe(2); }); diff --git a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts index 3298fe7f1ac..7735dc5e139 100644 --- a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts +++ b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts @@ -2,27 +2,25 @@ import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVaria import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters'; const styles = { - tableContainer: { - width: '100%', - height: `calc(100% - ${CssSizeVariables.sapWcrAnalyticalTableRowHeight})`, - minHeight: '3rem' - }, table: { position: 'relative', width: '100%', maxWidth: '100%', - overflowX: 'auto' + overflowX: 'auto', + height: `calc(100% - ${CssSizeVariables.sapWcrAnalyticalTableRowHeight})`, + minHeight: '3rem', + fontFamily: ThemingParameters.sapFontFamily, + fontSize: ThemingParameters.sapFontSize, + fontWeight: 'normal' }, tableHeaderRow: { - boxShadow: 'none !important', height: CssSizeVariables.sapWcrAnalyticalTableRowHeight, - position: 'relative' + position: 'relative', + display: 'inline-flex' }, th: { backgroundColor: ThemingParameters.sapList_HeaderBackground, height: CssSizeVariables.sapWcrAnalyticalTableRowHeight, - fontFamily: ThemingParameters.sapFontFamily, - fontSize: ThemingParameters.sapFontSize, fontWeight: 'normal', color: ThemingParameters.sapList_HeaderTextColor, borderTop: `1px solid ${ThemingParameters.sapList_BorderColor}`, @@ -43,22 +41,27 @@ const styles = { position: 'relative', zIndex: 0, backgroundColor: ThemingParameters.sapList_Background, - overflowX: 'hidden !important', - overflowY: 'auto !important' + overflowX: 'hidden', + overflowY: 'auto' }, alternateRowColor: { backgroundColor: ThemingParameters.sapList_HeaderBackground }, emptyRow: {}, tr: { + position: 'absolute', + top: 0, + left: 0, + width: '100%', zIndex: 0, color: ThemingParameters.sapList_TextColor, + borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`, boxSizing: 'border-box', + display: 'flex', + height: CssSizeVariables.sapWcrAnalyticalTableRowHeight, '&[data-is-selected]': { - backgroundColor: `${ThemingParameters.sapList_SelectionBackgroundColor} !important`, - '& $tableCell': { - borderBottom: `1px solid ${ThemingParameters.sapList_SelectionBorderColor}` - } + borderBottom: `1px solid ${ThemingParameters.sapList_SelectionBorderColor}`, + backgroundColor: `${ThemingParameters.sapList_SelectionBackgroundColor} !important` }, '&[data-is-selected]:hover': { backgroundColor: `${ThemingParameters.sapList_Hover_SelectionBackground} !important` @@ -93,22 +96,18 @@ const styles = { selectionModeRowSelector: {}, tableCell: { height: CssSizeVariables.sapWcrAnalyticalTableRowHeight, - fontFamily: ThemingParameters.sapFontFamily, - fontSize: ThemingParameters.sapFontSize, - fontWeight: 'normal', - borderBottom: `1px solid ${ThemingParameters.sapList_BorderColor}`, boxSizing: 'border-box', borderRight: `1px solid ${ThemingParameters.sapList_BorderColor}`, - display: 'flex', + display: 'inline-flex', padding: '0 0.5rem', '&:first-child': { borderLeft: `1px solid ${ThemingParameters.sapList_BorderColor}` }, overflow: 'hidden', - position: 'relative', textOverflow: 'ellipsis', whiteSpace: 'nowrap', alignItems: 'center', + position: 'relative', '&:focus': { outlineOffset: '-2px', outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}` diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx index 6b99159a8dc..8d39e34e45a 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx @@ -155,9 +155,6 @@ export const ColumnHeader: FC = (props: ColumnHeaderProps) => if (dragOver) { modifiedStyles.borderLeft = `3px solid ${ThemingParameters.sapSelectedColor}`; } - if (column.id === '__ui5wcr__internal_highlight_column' || column.id === '__ui5wcr__internal_selection_column') { - modifiedStyles.padding = 0; - } return modifiedStyles; }, [dragOver, hasPopover]); 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 bacdef2c743..887e191c699 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -2,7 +2,7 @@ exports[`AnalyticalTable Alternate Row Color 1`] = `
-
-
-
- - Name - -
-
- - - - Sort Ascending - - - Sort Descending - - - -
+ + + + Sort Ascending + + + Sort Descending + + + + + +
-
- - Fra - -
-
- - 40 - -
-
- - MAR - -
-
- - 28 - -
-
-
-
- - bla - -
-
- - 20 - -
-
- - Nei - -
-
- - 50 - -
+ + Fra +
-
-
-
-
+ + 40 +
-
-
-
-
+ + MAR +
-
-
-
-
+ + 28 +
-
-
-
-
-`; - -exports[`AnalyticalTable Loading - Loader 1`] = ` -
-
- - Table Title - -
-
-
-
- Name + bla -
- - - - Sort Ascending - - - Sort Descending - - - - -
- Age + 20 -
- - - - Sort Ascending - - - Sort Descending - - - - -
- Friend Name + Nei -
- - - - Sort Ascending - - - Sort Descending - - - - -
- - Friend Age - + 50 -
- - - - Sort Ascending - - - Sort Descending - - - -
-
-
- - Fra - -
-
- - 40 - -
-
- - MAR - -
-
- - 28 - -
-
+ aria-colindex="1" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + />
-
- - bla - -
-
- - 20 - -
-
- - Nei - -
-
- - 50 - -
-
+ aria-colindex="2" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + />
-
-
-
-
-
+ aria-colindex="3" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + />
-
-
-
-
-
+ aria-colindex="4" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> +
+
-
-
-
-
-
+ aria-colindex="1" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> +
+
+
@@ -1040,9 +507,9 @@ exports[`AnalyticalTable Loading - Loader 1`] = `
`; -exports[`AnalyticalTable Loading - Placeholder 1`] = ` +exports[`AnalyticalTable Loading - Loader 1`] = `
-
-
-
- - Name - -
-
- - - - Sort Ascending - - - Sort Descending - - - -
- - - Loading... - - + + + Sort Ascending + + + Sort Descending + + + + -
-
-`; - -exports[`AnalyticalTable Tree Table 1`] = ` -
-
- - Table Title - -
-
+
+
-
-
+ class="Text-text-0 Text-noWrap-0" + title="Fra" + > + Fra +
-
-
- Name + 40 -
- - - - Sort Ascending - - - Sort Descending - -
- - -
- - - -
- Age + MAR -
- - - - Sort Ascending - - - Sort Descending - -
- - -
- - - -
- Friend Name + 28 -
- - - - Sort Ascending - - - Sort Descending - -
- - -
- - -
- - Friend Age - + bla -
- - - - Sort Ascending - - - Sort Descending - -
- - -
- - - -
-
-
-
-
-
-
- - - - - Fra - -
-
- - - 40 - -
-
- - - MAR - -
-
- - - 28 - -
+ + 20 +
-
-
-
-
- - - bla - -
-
- - - 20 - -
-
- - - Nei - -
-
- - - 50 - -
+ + Nei +
-
-
-
-
-
+ + 50 +
+
+
-
-
-
-
-
-
+ aria-colindex="1" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + />
-
-
-
-
-
-
+ aria-colindex="2" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> +
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -2207,9 +1014,9 @@ exports[`AnalyticalTable Tree Table 1`] = `
`; -exports[`AnalyticalTable custom row height 1`] = ` +exports[`AnalyticalTable Loading - Placeholder 1`] = `
-
-
-
- - Name - -
-
- - - - Sort Ascending - - - Sort Descending - - - -
+ + + + Sort Ascending + + + Sort Descending + + + +
-
-
- - Fra - -
-
- - 40 - -
-
- - MAR - -
-
- - 28 - -
-
-
-
- - bla - -
-
- - 20 - -
-
- - Nei - -
-
- - 50 - -
-
-
-
-
-
-
-
-
-
-
-
-
-
+ + Friend Age + +
-
-
-
-
-
+ class="TableColumnHeader-iconContainer-0" + />
+ + + + Sort Ascending + + + Sort Descending + + + + -
+ + + + Loading... + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
`; -exports[`AnalyticalTable render without data 1`] = ` +exports[`AnalyticalTable Tree Table 1`] = `
-
-
+
- - Name - -
-
- - - - Sort Ascending - - - Sort Descending - - - - +
+
-
- - Age - -
-
- - - - Sort Ascending - - - Sort Descending - - - -
+ + + + Sort Ascending + + + Sort Descending + +
+ + +
+ + +
- No Data +
+ + + Friend Age + + +
+
+ + + + Sort Ascending + + + Sort Descending + +
+ + +
+ + + -
-
-
-`; - -exports[`AnalyticalTable test Asc desc 1`] = ` -
-
- - Test - -
-
+
-
- - Name -
- - - - Sort Ascending - - - Sort Descending - - - - -
+ + + - Age + Fra -
- - - - Sort Ascending - - - Sort Descending - - - - -
+ - Friend Name + 40 -
- - - - Sort Ascending - - - Sort Descending - - - - -
+ - - Friend Age - + MAR -
+
+ + + 28 +
- - - - Sort Ascending - - - Sort Descending - - - - -
-
- - Fra - -
-
- - 40 - -
-
- - MAR - -
-
- - 28 - -
+ style="width: 100%; height: 100%; cursor: pointer;" + />
-
- - bla - -
-
- - 20 - -
-
- - Nei - -
-
- - 50 - -
+ + + bla +
-
-
-
-
+ + 20 +
-
-
-
-
+ + Nei +
-
-
-
-
+ + 50 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`; -exports[`AnalyticalTable test Asc desc 2`] = ` +exports[`AnalyticalTable custom row height 1`] = `
- Test + Table Title
-
-
-
- - Name - -
-
- - - - Sort Ascending - - - Sort Descending - - - -
+ + + + Sort Ascending + + + Sort Descending + + + + + +
-
- - Fra - -
-
- - 40 - -
-
- - MAR - -
-
- - 28 - -
-
-
-
- - bla - -
-
- - 20 - -
-
- - Nei - -
-
- - 50 - -
+ + Fra +
-
-
-
-
+ + 40 +
-
-
-
-
+ + MAR +
-
-
-
-
+ + 28 +
-
-
-
-
-`; - -exports[`AnalyticalTable test Asc desc 3`] = ` -
-
- - Test - -
-
-
-
- Name + bla -
- - - - Sort Ascending - - - Sort Descending - - - - -
- Age + 20 -
- - - - Sort Ascending - - - Sort Descending - - - - -
- Friend Name + Nei -
- - - - Sort Ascending - - - Sort Descending - - - - -
- - Friend Age - + 50 -
- - - - Sort Ascending - - - Sort Descending - - - -
-
-
- - Fra - -
-
- - 40 - -
-
- - MAR - -
-
- - 28 - -
-
+ aria-colindex="1" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + />
-
- - bla - -
-
- - 20 - -
-
- - Nei - -
-
- - 50 - -
-
+ aria-colindex="2" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + />
-
-
-
-
-
+ aria-colindex="3" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + />
-
-
-
-
-
+ aria-colindex="4" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> +
+
-
-
-
-
-
+ aria-colindex="1" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> +
+
+
@@ -4564,9 +2670,9 @@ exports[`AnalyticalTable test Asc desc 3`] = `
`; -exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` +exports[`AnalyticalTable render without data 1`] = `
- Test + Table Title
-
-
-
- - Age - -
-
- - - - Sort Ascending - - - Sort Descending - - - - -
+ Name +
- - Name - -
-
- - - - Sort Ascending - - - Sort Descending - - - - + + + + Sort Ascending + + + Sort Descending + + + + +
-
- - Friend Name - -
-
- - - - Sort Ascending - - - Sort Descending - - - -
+ + + + Sort Ascending + + + Sort Descending + + + +
-
-
- - Fra - -
-
- - 40 - -
-
- - MAR - -
-
- - 28 - -
-
-
-
- - bla - -
-
- - 20 - -
-
- - Nei - -
-
- - 50 - -
-
-
-
-
-
-
-
-
-
-
-
-
-
+ + Friend Age + +
-
-
-
-
-
+ class="TableColumnHeader-iconContainer-0" + />
+ + + + Sort Ascending + + + Sort Descending + + + + + +
+ No Data
`; -exports[`AnalyticalTable with highlight row 1`] = ` +exports[`AnalyticalTable test Asc desc 1`] = `
- Table Title + Test
-
-
-
- -
- -
-
+ Name + +
+ + + + Sort Ascending + + + Sort Descending + + +
+
+
+
-
- -
-
+ Age + +
+ + + + Sort Ascending + + + Sort Descending + + +
+
+
+
+ + Friend Name +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ - - Name + + Friend Age -
-
- - - - Sort Ascending - - - Sort Descending - - - -
+
+
- Age + Fra -
- - - - Sort Ascending - - - Sort Descending - - - - -
- Friend Name + 40 -
- - - - Sort Ascending - - - Sort Descending - - - - -
- - Friend Age - + MAR + +
+
+ + 28 -
- - - - Sort Ascending - - - Sort Descending - - - - - -
-
-
-
-
-
-
-
- - Fra - -
-
- - 40 - -
-
- - MAR - -
-
- - 28 - -
+ + bla +
-
-
-
-
-
-
-
- - bla - -
-
- - 20 - -
-
- - Nei - -
-
- - 50 - -
+ 20 +
-
-
-
-
-
-
+ + Nei +
-
-
-
-
-
-
+ + 50 +
+
+
-
-
-
-
-
-
-
+ aria-colindex="1" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -5732,9 +3449,9 @@ exports[`AnalyticalTable with highlight row 1`] = `
`; -exports[`AnalyticalTable without selection Column 1`] = ` +exports[`AnalyticalTable test Asc desc 2`] = `
- Table Title + Test
-
-
+ + Name +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ - - Name - -
-
- - - - Sort Ascending - - - Sort Descending - - - -
+
+
- Friend Name + Fra -
- - - - Sort Ascending - - - Sort Descending - - - - -
- - Friend Age - + 40 + +
+
+ + MAR + +
+
+ + 28 -
- - - - Sort Ascending - - - Sort Descending - - - - - -
-
- - Fra - -
-
- - 40 - -
-
- - MAR - -
-
- - 28 - -
+ + bla +
-
- - bla - -
-
- - 20 - -
-
- - Nei - -
-
- - 50 - -
+ + 20 +
-
-
-
-
+ + Nei +
-
-
-
-
+ + 50 +
+
+
-
+ aria-colindex="1" + class="AnalyticalTable-tableCell-0" + role="cell" + style="align-items: center; width: 150px;" + tabindex="-1" + /> +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`AnalyticalTable test Asc desc 3`] = ` +
+
+ + Test + +
+
+
+
+
+ + Name + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + Age + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + Friend Name + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + + Friend Age + + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+
+
+
+ + Fra + +
+
+ + 40 + +
+
+ + MAR + +
+
+ + 28 + +
+
+
+
+ + bla + +
+
+ + 20 + +
+
+ + Nei + +
+
+ + 50 + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`AnalyticalTable test drag and drop of a draggable column 1`] = ` +
+
+ + Test + +
+
+
+
+
+ + Age + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + Name + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + Friend Name + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + + Friend Age + + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+
+
+
+ + 40 + +
+
+ + Fra + +
+
+ + MAR + +
+
+ + 28 + +
+
+
+
+ + 20 + +
+
+ + bla + +
+
+ + Nei + +
+
+ + 50 + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`AnalyticalTable with highlight row 1`] = ` +
+
+ + Table Title + +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ + Name + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + Age + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + Friend Name + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + + Friend Age + + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+
+
+
+
+
+
+
+
+ + Fra + +
+
+ + 40 + +
+
+ + MAR + +
+
+ + 28 + +
+
+
+
+
+
+
+
+ + bla + +
+
+ + 20 + +
+
+ + Nei + +
+
+ + 50 + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`AnalyticalTable without selection Column 1`] = ` +
+
+ + Table Title + +
+
+
+
+
+ + Name + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + Age + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + Friend Name + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+ + + Friend Age + + +
+
+ + + + Sort Ascending + + + Sort Descending + + + + +
+
+
+
+
+ + Fra + +
+
+ + 40 + +
+
+ + MAR + +
+
+ + 28 + +
+
+
+
+ + bla + +
+
+ + 20 + +
+
+ + Nei + +
+
+ + 50 + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx index c46bde86a56..87e41500c25 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Cell.tsx @@ -7,7 +7,7 @@ export const Cell = ({ cell: { value = '', isGrouped }, row }) => { cellContent += ` (${row.subRows.length})`; } return ( - + {cellContent} ); diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx index 8391b898ccd..3620c5595f4 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx @@ -1,7 +1,5 @@ import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVariables'; import { Icon } from '@ui5/webcomponents-react/lib/Icon'; -import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; -import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior'; import React, { CSSProperties } from 'react'; const tableGroupExpandCollapseIcon = { @@ -28,20 +26,11 @@ const getPadding = (level) => { }; export const Expandable = (props) => { - const { - cell, - row, - column, - columns, - webComponentsReactProperties: { selectionMode, selectionBehavior } - } = props; + const { cell, row, column, columns } = props; - const tableColumns = - selectionMode === TableSelectionMode.NONE || selectionBehavior === TableSelectionBehavior.ROW_ONLY - ? columns - : columns.filter( - ({ id }) => id !== '__ui5wcr__internal_selection_column' && id !== '__ui5wcr__internal_highlight_column' - ); + const tableColumns = columns.filter( + ({ id }) => id !== '__ui5wcr__internal_selection_column' && id !== '__ui5wcr__internal_highlight_column' + ); const columnIndex = tableColumns.findIndex((col) => col.id === column.id); @@ -55,10 +44,6 @@ export const Expandable = (props) => { paddingLeft }; - if (column.id === '__ui5wcr__internal_selection_column' || column.id === '__ui5wcr__internal_highlight_column') { - return cell.render('Cell'); - } - return ( <> {columnIndex === 0 && row.canExpand ? ( @@ -69,7 +54,7 @@ export const Expandable = (props) => { /> ) : ( - + )} {cell.render('Cell')} diff --git a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx index 9eac57caaf6..b7b955f6a89 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx @@ -7,7 +7,7 @@ export /** const DefaultFilterComponent: FC = ({ column }) => { const handleChange = useCallback( (e) => { - column.setFilter(e.target.value); + column.setFilter(e.target.value || undefined); }, [column.setFilter] ); diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRTL.ts b/packages/main/src/components/AnalyticalTable/hooks/useRTL.ts deleted file mode 100644 index 131b83d29e0..00000000000 --- a/packages/main/src/components/AnalyticalTable/hooks/useRTL.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL'; -import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters'; - -const visibleColumns = (currentVisibleColumns) => { - if (getRTL()) { - return currentVisibleColumns.reverse(); - } - return currentVisibleColumns; -}; -const getHeaderProps = (props, { column, instance }) => { - if (!instance.state.isScrollable) { - return props; - } - const isRTL = getRTL(); - const lastColumnId = instance.visibleColumns[isRTL ? 0 : instance.visibleColumns.length - 1].id; - const isLastColumn = column.id === lastColumnId; - return [ - props, - { - style: { - paddingLeft: isRTL && isLastColumn ? ThemingParameters.sapScrollBar_Dimension : 0, - paddingRight: !isRTL && isLastColumn ? ThemingParameters.sapScrollBar_Dimension : 0 - } - } - ]; -}; - -const getCellProps = (props, { cell, instance }) => { - if (!instance.state.isScrollable) { - return props; - } - const isRTL = getRTL(); - const lastColumnId = instance.visibleColumns[isRTL ? 0 : instance.visibleColumns.length - 1].id; - const isLastColumn = cell.column.id === lastColumnId; - return [ - props, - { - style: { - left: - isRTL && !isLastColumn - ? `calc(${cell.column.totalLeft}px - ${ThemingParameters.sapScrollBar_Dimension})` - : `${cell.column.totalLeft}px`, - width: isLastColumn - ? `calc(${cell.column.totalWidth}px - ${ThemingParameters.sapScrollBar_Dimension})` - : `${cell.column.totalWidth}px` - } - } - ]; -}; - -export const useRTL = (hooks) => { - hooks.visibleColumns.push(visibleColumns); - hooks.getHeaderProps.push(getHeaderProps); - hooks.getCellProps.push(getCellProps); -}; -useRTL.plugiName = 'useRTL'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts new file mode 100644 index 00000000000..c45f9646636 --- /dev/null +++ b/packages/main/src/components/AnalyticalTable/hooks/useStyling.ts @@ -0,0 +1,169 @@ +import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters'; +import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior'; +import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; +import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign'; +import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign'; +import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL'; +import { CSSProperties } from 'react'; + +const getTableProps = (tableProps, { instance }) => { + const { classes } = instance.webComponentsReactProperties; + return [ + tableProps, + { + className: classes.table + } + ]; +}; + +const getHeaderGroupProps = (headerGroupProps, { instance }) => { + const { classes } = instance.webComponentsReactProperties; + return [ + headerGroupProps, + { + className: classes.tableHeaderRow + } + ]; +}; + +const getHeaderProps = (columnProps, { instance, column }) => { + const { classes } = instance.webComponentsReactProperties; + const isRTL = getRTL(); + const lastColumnId = instance.visibleColumns[instance.visibleColumns.length - 1].id; + const isLastColumn = column.id === lastColumnId; + const style: CSSProperties = { + width: column.width + }; + + if (instance.state.isScrollable && isLastColumn) { + style[isRTL ? 'paddingLeft' : 'paddingRight'] = ThemingParameters.sapScrollBar_Dimension; + } + + if (column.id === '__ui5wcr__internal_highlight_column' || column.id === '__ui5wcr__internal_selection_column') { + style.padding = 0; + } + + return [ + columnProps, + { + className: classes.th, + column, + style: style, + id: column.id + } + ]; +}; + +const ROW_SELECTION_ATTRIBUTE = 'data-is-selected'; + +const getRowProps = (rowProps, { instance, row }) => { + const { webComponentsReactProperties } = instance; + const { classes, selectionBehavior, selectionMode, alternateRowColor } = webComponentsReactProperties; + const isEmptyRow = row.original?.emptyRow; + let className = classes.tr; + + if (row.isGrouped) { + className += ` ${classes.tableGroupHeader}`; + } + + if (isEmptyRow) { + className += ` ${classes.emptyRow}`; + } + + if (alternateRowColor && row.index % 2 !== 0) { + className += ` ${classes.alternateRowColor}`; + } + + if (TableSelectionBehavior.ROW_SELECTOR === selectionBehavior) { + className += ` ${classes.selectionModeRowSelector}`; + } + + const newRowProps = { + className, + role: 'row', + 'aria-rowindex': row.index + }; + + if ([TableSelectionMode.SINGLE_SELECT, TableSelectionMode.MULTI_SELECT].includes(selectionMode) && !isEmptyRow) { + if (row.isSelected) { + newRowProps[ROW_SELECTION_ATTRIBUTE] = ''; + } + } + + return [rowProps, newRowProps]; +}; + +const getCellProps = (cellProps, { cell: { column }, instance }) => { + const columnIndex = instance.visibleColumns.findIndex(({ id }) => id === column.id); + const isLastColumn = instance.visibleColumns.length === columnIndex + 1; + const { classes } = instance.webComponentsReactProperties; + const style: CSSProperties = {}; + + switch (column.hAlign) { + case TextAlign.Begin: + style.justifyContent = 'flex-start'; + style.textAlign = 'start'; + break; + case TextAlign.Center: + style.justifyContent = 'center'; + style.textAlign = 'center'; + break; + case TextAlign.End: + style.justifyContent = 'flex-end'; + style.textAlign = 'end'; + break; + case TextAlign.Left: + style.justifyContent = 'left'; + style.textAlign = 'left'; + break; + case TextAlign.Right: + style.justifyContent = 'right'; + style.textAlign = 'right'; + break; + } + switch (column.vAlign) { + case VerticalAlign.Bottom: + style.alignItems = 'flex-end'; + break; + case VerticalAlign.Middle: + style.alignItems = 'center'; + break; + case VerticalAlign.Top: + style.alignItems = 'flex-start'; + break; + } + + let className = classes.tableCell; + if (column.className) { + className += ` ${column.className}`; + } + + if (column.id === '__ui5wcr__internal_highlight_column' || column.id === '__ui5wcr__internal_selection_column') { + style.padding = 0; + } + + if (isLastColumn && instance.state.isScrollable) { + style.width = `calc(${column.totalWidth}px - ${ThemingParameters.sapScrollBar_Dimension})`; + } else { + style.width = `${column.totalWidth}px`; + } + + return [ + cellProps, + { + className, + style, + tabIndex: -1, + 'aria-colindex': columnIndex + 1 // aria index is 1 based, not 0 + } + ]; +}; + +export const useStyling = (hooks) => { + hooks.getTableProps.push(getTableProps); + hooks.getHeaderGroupProps.push(getHeaderGroupProps); + hooks.getHeaderProps.push(getHeaderProps); + hooks.getRowProps.push(getRowProps); + hooks.getCellProps.push(getCellProps); +}; +useStyling.pluginName = 'useStyling'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts deleted file mode 100644 index e168dc8679a..00000000000 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign'; -import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign'; - -import { CSSProperties } from 'react'; - -const getCellProps = (cellProps, { cell: { column }, instance }) => { - const columnIndex = instance.visibleColumns.findIndex(({ id }) => id === column.id); - const { classes } = instance.webComponentsReactProperties; - const style: CSSProperties = {}; - - switch (column.hAlign) { - case TextAlign.Begin: - style.justifyContent = 'flex-start'; - style.textAlign = 'start'; - break; - case TextAlign.Center: - style.justifyContent = 'center'; - style.textAlign = 'center'; - break; - case TextAlign.End: - style.justifyContent = 'flex-end'; - style.textAlign = 'end'; - break; - case TextAlign.Left: - style.justifyContent = 'left'; - style.textAlign = 'left'; - break; - case TextAlign.Right: - style.justifyContent = 'right'; - style.textAlign = 'right'; - break; - } - switch (column.vAlign) { - case VerticalAlign.Bottom: - style.alignItems = 'flex-end'; - break; - case VerticalAlign.Middle: - style.alignItems = 'center'; - break; - case VerticalAlign.Top: - style.alignItems = 'flex-start'; - break; - } - - let className = classes.tableCell; - if (column.className) { - className += ` ${column.className}`; - } - - if (column.id === '__ui5wcr__internal_highlight_column' || column.id === '__ui5wcr__internal_selection_column') { - style.padding = 0; - } - - return [ - cellProps, - { - className, - style, - tabIndex: -1, - 'aria-colindex': columnIndex + 1 // aria index is 1 based, not 0 - } - ]; -}; - -export const useTableCellStyling = (hooks) => { - hooks.getCellProps.push(getCellProps); -}; -useTableCellStyling.pluginName = 'useTableCellStyling'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts deleted file mode 100644 index 3e52f1e2155..00000000000 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts +++ /dev/null @@ -1,14 +0,0 @@ -const getHeaderGroupProps = (headerGroupProps, { instance }) => { - const { classes } = instance.webComponentsReactProperties; - return [ - headerGroupProps, - { - className: classes.tableHeaderRow - } - ]; -}; - -export const useTableHeaderGroupStyling = (hooks) => { - hooks.getHeaderGroupProps.push(getHeaderGroupProps); -}; -useTableHeaderGroupStyling.pluginName = 'useTableHeaderGroupStyling'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts deleted file mode 100644 index 053ba88d565..00000000000 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts +++ /dev/null @@ -1,19 +0,0 @@ -const getHeaderProps = (columnProps, { instance, column }) => { - const { classes } = instance.webComponentsReactProperties; - return [ - columnProps, - { - className: classes.th, - column, - style: { - position: 'absolute' - }, - id: column.id - } - ]; -}; - -export const useTableHeaderStyling = (hooks) => { - hooks.getHeaderProps.push(getHeaderProps); -}; -useTableHeaderStyling.pluginName = 'useTableHeaderStyling'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts deleted file mode 100644 index 89267bde1cb..00000000000 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior'; -import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; - -const ROW_SELECTION_ATTRIBUTE = 'data-is-selected'; - -const getRowProps = (rowProps, { instance, row }) => { - const { webComponentsReactProperties } = instance; - const { classes, selectionBehavior, selectionMode } = webComponentsReactProperties; - const isEmptyRow = row.original?.emptyRow; - let className = classes.tr; - - if (row.isGrouped) { - className += ` ${classes.tableGroupHeader}`; - } - - if (isEmptyRow) { - className += ` ${classes.emptyRow}`; - } - - if (TableSelectionBehavior.ROW_SELECTOR === selectionBehavior) { - className += ` ${classes.selectionModeRowSelector}`; - } - - const newRowProps = { - className, - role: 'row' - }; - - if ([TableSelectionMode.SINGLE_SELECT, TableSelectionMode.MULTI_SELECT].includes(selectionMode) && !isEmptyRow) { - if (row.isSelected) { - newRowProps[ROW_SELECTION_ATTRIBUTE] = ''; - } - } - - return [rowProps, newRowProps]; -}; - -export const useTableRowStyling = (hooks) => { - hooks.getRowProps.push(getRowProps); -}; -useTableRowStyling.pluginName = 'useTableRowStyling'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableScrollHandles.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableScrollHandles.ts index f1245cf5643..289e7b4c882 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableScrollHandles.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableScrollHandles.ts @@ -1,25 +1,23 @@ import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef'; -import { RefObject, useRef } from 'react'; +import { RefObject, useEffect, useRef } from 'react'; import { AnalyticalTableDomRef } from '../../../interfaces/AnalyticalTableDomRef'; export const useTableScrollHandles = (ref) => { const analyticalTableRef: RefObject = useConsolidatedRef(ref); - const reactWindowRef = useRef(null); + const reactWindowRef = useRef({}); - if (analyticalTableRef.current) { - Object.assign(analyticalTableRef.current, { - scrollTo: (...args) => { - if (reactWindowRef.current) { - reactWindowRef.current.scrollTo(...args); + useEffect(() => { + if (analyticalTableRef.current) { + Object.assign(analyticalTableRef.current, { + scrollTo: (offset, align) => { + reactWindowRef.current.scrollToOffset(offset, { align }); + }, + scrollToItem: (index, align) => { + reactWindowRef.current.scrollToIndex(index, { align }); } - }, - scrollToItem: (...args) => { - if (reactWindowRef.current) { - reactWindowRef.current.scrollToItem(...args); - } - } - }); - } + }); + } + }, [analyticalTableRef.current, reactWindowRef.current.scrollToIndex, reactWindowRef.current.scrollToOffset]); return [analyticalTableRef, reactWindowRef]; }; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts deleted file mode 100644 index 99b9866c51a..00000000000 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts +++ /dev/null @@ -1,14 +0,0 @@ -const getTableProps = (tableProps, { instance }) => { - const { classes } = instance.webComponentsReactProperties; - return [ - tableProps, - { - className: classes.table - } - ]; -}; - -export const useTableStyling = (tableHooks) => { - tableHooks.getTableProps.push(getTableProps); -}; -useTableStyling.pluginName = 'useTableStyling'; diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index 3cb504b691f..21ed4095cdb 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -1,13 +1,14 @@ import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles'; -import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; +import { useDeprecateRenderMethods } from '@ui5/webcomponents-react-base/lib/hooks'; import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils'; -import { useDeprecateRenderMethods } from '@ui5/webcomponents-react-base/lib/hooks'; import { TableScaleWidthMode } from '@ui5/webcomponents-react/lib/TableScaleWidthMode'; import { TableSelectionBehavior } from '@ui5/webcomponents-react/lib/TableSelectionBehavior'; import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; +import debounce from 'lodash.debounce'; import React, { ComponentType, + CSSProperties, FC, forwardRef, ReactNode, @@ -17,12 +18,10 @@ import React, { useCallback, useEffect, useMemo, - useRef, - CSSProperties + useRef } from 'react'; import { PluginHook, - useAbsoluteLayout, useColumnOrder, useExpanded, useFilters, @@ -44,20 +43,14 @@ import { useDragAndDrop } from './hooks/useDragAndDrop'; import { useDynamicColumnWidths } from './hooks/useDynamicColumnWidths'; import { useRowHighlight } from './hooks/useRowHighlight'; import { useRowSelectionColumn } from './hooks/useRowSelectionColumn'; -import { useRTL } from './hooks/useRTL'; import { useSingleRowStateSelection } from './hooks/useSingleRowStateSelection'; -import { useTableCellStyling } from './hooks/useTableCellStyling'; -import { useTableHeaderGroupStyling } from './hooks/useTableHeaderGroupStyling'; -import { useTableHeaderStyling } from './hooks/useTableHeaderStyling'; -import { useTableRowStyling } from './hooks/useTableRowStyling'; +import { useStyling } from './hooks/useStyling'; import { useTableScrollHandles } from './hooks/useTableScrollHandles'; -import { useTableStyling } from './hooks/useTableStyling'; import { useToggleRowExpand } from './hooks/useToggleRowExpand'; import { stateReducer } from './tableReducer/stateReducer'; import { TitleBar } from './TitleBar'; import { orderByFn } from './util'; import { VirtualTableBody } from './virtualization/VirtualTableBody'; -import debounce from 'lodash.debounce'; export interface TableProps extends CommonProps { /** @@ -230,7 +223,6 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< }, ...reactTableOptions }, - useAbsoluteLayout, useFilters, useGroupBy, useColumnOrder, @@ -238,20 +230,14 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< useExpanded, useRowSelect, useResizeColumns, - useTableStyling, - useTableHeaderGroupStyling, - useTableHeaderStyling, - useTableRowStyling, useRowSelectionColumn, useSingleRowStateSelection, useRowHighlight, useDynamicColumnWidths, - useTableCellStyling, + useStyling, useToggleRowExpand, - ...tableHooks, - useRTL + ...tableHooks ); - // scroll bar detection useEffect(() => { const visibleRowCount = rows.length < visibleRows ? Math.max(rows.length, minRows) : visibleRows; @@ -285,8 +271,6 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< dispatch({ type: 'SET_SELECTED_ROWS', selectedIds: selectedRowIds }); }, [selectedRowIds, dispatch]); - const tableContainerClasses = StyleClassHelper.of(classes.tableContainer); - const calcRowHeight = parseInt( getComputedStyle(tableRef.current ?? document.body).getPropertyValue('--sapWcrAnalyticalTableRowHeight') || '44' ); @@ -343,7 +327,10 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< ]); const inlineStyle = useMemo(() => { - const tableStyles = {}; + const tableStyles = { + maxWidth: '100%', + overflowX: 'auto' + }; if (!!rowHeight) { tableStyles['--sapWcrAnalyticalTableRowHeight'] = `${rowHeight}px`; } @@ -357,7 +344,7 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< return { ...tableStyles, ...style, - visibility: 'hidden' as 'hidden' + visibility: 'hidden' } as CSSProperties; }, [tableState.tableClientWidth, style, rowHeight]); @@ -365,82 +352,77 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
{title && {title}} {extension &&
{extension}
} -
- { -
- {headerGroups.map((headerGroup) => { - let headerProps = {}; - if (headerGroup.getHeaderGroupProps) { - headerProps = headerGroup.getHeaderGroupProps(); - } - return ( +
+ {headerGroups.map((headerGroup) => { + let headerProps = {}; + if (headerGroup.getHeaderGroupProps) { + headerProps = headerGroup.getHeaderGroupProps(); + } + return ( + // eslint-disable-next-line react/jsx-key +
+ {headerGroup.headers.map((column, index) => ( // eslint-disable-next-line react/jsx-key -
- {headerGroup.headers.map((column, index) => ( - // eslint-disable-next-line react/jsx-key - - {column.render('Header')} - - ))} -
- ); - })} - {loading && busyIndicatorEnabled && props.data?.length > 0 && } - {loading && props.data?.length === 0 && ( - (col.isVisible ?? true) && !tableState.hiddenColumns.includes(col.accessor) - )} - rows={props.minRows} - style={noDataStyles} - rowHeight={internalRowHeight} - tableWidth={totalColumnsWidth} - /> - )} - {!loading && props.data?.length === 0 && ( - - )} - {props.data?.length > 0 && ( - + + {column.render('Header')} + + ))} +
+ ); + })} + {loading && busyIndicatorEnabled && props.data?.length > 0 && } + {loading && props.data?.length === 0 && ( + (col.isVisible ?? true) && !tableState.hiddenColumns.includes(col.accessor) )} -
- } + rows={props.minRows} + style={noDataStyles} + rowHeight={internalRowHeight} + tableWidth={totalColumnsWidth} + /> + )} + {!loading && props.data?.length === 0 && ( + + )} + {props.data?.length > 0 && ( + + )}
); diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx index 5f9d0f56c9c..8c384a512f4 100644 --- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx +++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx @@ -3,17 +3,27 @@ import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { GlobalStyleClasses } from '@ui5/webcomponents-react/lib/GlobalStyleClasses'; import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; -import React, { useCallback, useEffect, useMemo, useRef } from 'react'; -import { FixedSizeList } from 'react-window'; -import { VirtualTableRow } from './VirtualTableRow'; -import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL'; +import { Text } from '@ui5/webcomponents-react/lib/Text'; +import React, { MutableRefObject, useCallback, useRef } from 'react'; +import { useVirtual } from 'react-virtual'; interface VirtualTableBodyProps { + classes: Record; + prepareRow: (row: unknown) => void; + rows: any[]; + minRows: number; + selectionMode: TableSelectionMode; + reactWindowRef: MutableRefObject; + isTreeTable: boolean; + internalRowHeight: number; + tableBodyHeight: number; + visibleRows: number; + alternateRowColor: boolean; + overscanCount: number; + totalColumnsWidth: number; infiniteScroll: boolean; infiniteScrollThreshold: number; onLoadMore?: (e?: { detail: { rowCount: number } }) => void; - - [key: string]: any; } export const VirtualTableBody = (props: VirtualTableBodyProps) => { @@ -22,64 +32,51 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => { prepareRow, rows, minRows, - columns, selectionMode, reactWindowRef, isTreeTable, internalRowHeight, tableBodyHeight, visibleRows, - alternateRowColor, overscanCount, totalColumnsWidth, - selectedFlatRows, infiniteScroll, infiniteScrollThreshold, onLoadMore } = props; - const innerDivRef = useRef(); const firedInfiniteLoadEvents = useRef(new Set()); const itemCount = Math.max(minRows, rows.length); const overscan = overscanCount ? overscanCount : Math.floor(visibleRows / 2); - const tableData = useMemo(() => { - return { - rows, - additionalProps: { - alternateRowColor, - isTreeTable, - classes, - columns - } - }; - }, [rows, prepareRow, isTreeTable, classes, columns, selectedFlatRows, selectionMode]); - - const getItemKey = useCallback( - (index, data) => { - const row = data.rows[index]; - if (row) { - if (!row.getRowProps) { - prepareRow(row); - } - if (row.getRowProps) { - return row.getRowProps().key; - } - } - return index; - }, - [prepareRow] - ); + const parentRef = useRef(); + + const rowVirtualizer = useVirtual({ + size: itemCount, + parentRef, + estimateSize: React.useCallback(() => internalRowHeight, [internalRowHeight]), + overscan + }); + + reactWindowRef.current = { + scrollToOffset: rowVirtualizer.scrollToOffset, + scrollToIndex: rowVirtualizer.scrollToIndex + }; const classNames = StyleClassHelper.of(classes.tbody, GlobalStyleClasses.sapScrollBar); if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) { classNames.put(classes.selectable); } + const lastScrollTop = useRef(0); + const onScroll = useCallback( - ({ scrollDirection, scrollOffset }) => { - if (scrollDirection === 'forward' && infiniteScroll) { + (event) => { + const scrollOffset = event.target.scrollTop; + const isScrollingDown = lastScrollTop.current < scrollOffset; + if (isScrollingDown && infiniteScroll) { + lastScrollTop.current = scrollOffset; const currentTopRow = Math.floor(scrollOffset / internalRowHeight); if (rows.length - currentTopRow < infiniteScrollThreshold) { if (!firedInfiniteLoadEvents.current.has(rows.length)) { @@ -93,7 +90,15 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => { } } }, - [infiniteScroll, infiniteScrollThreshold, onLoadMore, rows.length, internalRowHeight, firedInfiniteLoadEvents] + [ + infiniteScroll, + infiniteScrollThreshold, + onLoadMore, + rows.length, + internalRowHeight, + firedInfiniteLoadEvents, + lastScrollTop + ] ); const currentlyFocusedCell = useRef(null); @@ -102,9 +107,11 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => { const firstCell: HTMLDivElement = e.target.querySelector( 'div[role="row"]:first-child div[role="cell"]:first-child' ); - firstCell.tabIndex = 0; - firstCell.focus(); - currentlyFocusedCell.current = firstCell; + if (firstCell) { + firstCell.tabIndex = 0; + firstCell.focus(); + currentlyFocusedCell.current = firstCell; + } }, [currentlyFocusedCell] ); @@ -165,33 +172,82 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => { [currentlyFocusedCell] ); - useEffect(() => { - if (innerDivRef.current) { - innerDivRef.current.tabIndex = 0; - innerDivRef.current.addEventListener('keydown', onKeyboardNavigation); - innerDivRef.current.addEventListener('focus', onTableFocus); - } - return () => { - innerDivRef.current.removeEventListener('keydown', onKeyboardNavigation); - }; - }, [onKeyboardNavigation, reactWindowRef, onTableFocus]); - return ( - - {VirtualTableRow} - +
+ {rowVirtualizer.virtualItems.map((virtualRow) => { + const row = rows[virtualRow.index]; + if (!row) { + return ( +
+ ); + } + prepareRow(row); + const rowProps = row.getRowProps(); + + return ( +
+ {row.cells.map((cell) => { + const cellProps = cell.getCellProps(); + if (row.original?.emptyRow) { + return
; + } + + let contentToRender; + if ( + cell.column.id == '__ui5wcr__internal_highlight_column' || + cell.column.id === '__ui5wcr__internal_selection_column' + ) { + contentToRender = 'Cell'; + } else if (isTreeTable) { + contentToRender = 'Expandable'; + } else if (cell.isGrouped) { + contentToRender = 'Grouped'; + } else if (cell.isAggregated) { + contentToRender = 'Aggregated'; + } else if (cell.isPlaceholder) { + contentToRender = 'RepeatedValue'; + } else { + contentToRender = 'Cell'; + } + + // eslint-disable-next-line react/jsx-key + return
{cell.render(contentToRender)}
; + })} +
+ ); + })} +
+
); }; diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableRow.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableRow.tsx deleted file mode 100644 index f28bf189acd..00000000000 --- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableRow.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; - -export const VirtualTableRow = (props) => { - const { style, index, data } = props; - const { additionalProps, rows } = data; - const { isTreeTable, classes, alternateRowColor } = additionalProps; - const row = rows[index]; - - if (!row) { - return null; - } - - const rowProps = row.getRowProps(); - - if (alternateRowColor && index % 2 !== 0) { - rowProps.className += ` ${classes.alternateRowColor}`; - } - - return ( -
- {row.cells.map((cell) => { - if (row.original?.emptyRow) return
; - let contentToRender = 'Cell'; - if (isTreeTable) { - contentToRender = 'Expandable'; - } else if (cell.isGrouped) { - contentToRender = 'Grouped'; - } else if (cell.isAggregated) { - contentToRender = 'Aggregated'; - } else if (cell.isPlaceholder || cell.column.isGrouped) { - contentToRender = 'RepeatedValue'; - } - return
{cell.render(contentToRender)}
; - })} -
- ); -}; diff --git a/packages/main/src/components/Text/index.tsx b/packages/main/src/components/Text/index.tsx index 4d952e3c912..cc0b6a8a4e1 100644 --- a/packages/main/src/components/Text/index.tsx +++ b/packages/main/src/components/Text/index.tsx @@ -1,7 +1,8 @@ +import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils'; +import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps'; -import React, { CSSProperties, FC, forwardRef, ReactNode, Ref } from 'react'; -import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles'; +import React, { CSSProperties, FC, forwardRef, ReactNode, Ref, useMemo } from 'react'; import { CommonProps } from '../../interfaces/CommonProps'; import { TextStyles } from './Text.jss'; @@ -36,10 +37,19 @@ const Text: FC = forwardRef((props: TextProps, ref: Ref { + if (width !== null && width !== undefined) { + deprecationNotice( + 'Text', + 'The prop `width` is deprecated and will be removed in the v0.10.0. Please use the `style` object instead.' + ); + } + return { + width, + ...style + }; + }, [style, width]); const passThroughProps = usePassThroughHtmlProps(props); diff --git a/yarn.lock b/yarn.lock index 2d2573f2597..580d129e481 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1290,6 +1290,14 @@ pirates "^4.0.0" source-map-support "^0.5.16" +"@babel/runtime-corejs3@^7.7.4": + version "7.9.6" + resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.9.6.tgz#67aded13fffbbc2cb93247388cf84d77a4be9a71" + integrity sha512-6toWAfaALQjt3KMZQc6fABqZwUDDuWzz+cAfPhqyEnzxvdWOAkjwPNxgF8xlmo7OWLsSjaKjsskpKHRLaMArOA== + dependencies: + core-js-pure "^3.0.0" + regenerator-runtime "^0.13.4" + "@babel/runtime-corejs3@^7.8.3": version "7.8.7" resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.8.7.tgz#8209d9dff2f33aa2616cb319c83fe159ffb07b8c" @@ -1298,7 +1306,7 @@ core-js-pure "^3.0.0" regenerator-runtime "^0.13.4" -"@babel/runtime@7.9.6", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@7.9.6", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6": version "7.9.6" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f" integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ== @@ -2807,6 +2815,11 @@ dependencies: "@types/node" ">= 8" +"@reach/observe-rect@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.1.0.tgz#4e967a93852b6004c3895d9ed8d4e5b41895afde" + integrity sha512-kE+jvoj/OyJV24C03VvLt5zclb9ArJi04wWXMMFwQvdZjdHoBlN4g0ZQFjyy/ejPF1Z/dpUD5dhRdBiUmIGZTA== + "@reach/router@^1.2.1": version "1.3.3" resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db" @@ -2895,6 +2908,11 @@ resolved "https://registry.yarnpkg.com/@scarf/scarf/-/scarf-0.1.5.tgz#fc4cc88294eca336eed9a91549180346de5e6946" integrity sha512-Fx6atDc7JM1r0WkPCDhNetVZNp+DO21q/HGlomAKBG+k8vb1B8fg8Yige4oCf1P9OWTZWm5tM5i3jlXhrSbNOg== +"@scarf/scarf@^1.0.0": + version "1.0.5" + resolved "https://registry.yarnpkg.com/@scarf/scarf/-/scarf-1.0.5.tgz#accee0bce88a9047672f7c8faf3cada59c996b81" + integrity sha512-9WKaGVpQH905Aqkk+BczFEeLQxS07rl04afFRPUG9IcSlOwmo5EVVuuNu0d4M9LMYucObvK0LoAe+5HfMW2QhQ== + "@sindresorhus/is@^0.14.0": version "0.14.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea" @@ -3572,6 +3590,25 @@ resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.0.7.tgz#0cd915785ec4190f08a3a6acc9b61fc38fb5f1a9" integrity sha512-8UT/J+xqCYfn3fKtOznAibsHpiuDshCb0fwgWxRazTT19Igp9ovoXMPhXyLD6m3CKQGTMHgqoxaFfMWaL40Rnw== +"@testing-library/dom@^7.2.2": + version "7.5.1" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.5.1.tgz#c3537e2b970576072ea4083e603463843c8a8d2b" + integrity sha512-c9iQWyFtdsqaVScIlOdgdG3HXWkYvGzin02nJ4LUnzNXKyxqeqq9KPIAAjnmfrSApbRc8mK1l6esiCeEredfRw== + dependencies: + "@babel/runtime" "^7.9.6" + aria-query "^4.0.2" + dom-accessibility-api "^0.4.3" + pretty-format "^26.0.1" + +"@testing-library/react@^10.0.4": + version "10.0.4" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.0.4.tgz#8e0e299cd91acc626d81ed8489fdc13df864c31d" + integrity sha512-2e1B5debfuiIGbvUuiSXybskuh7ZTVJDDvG/IxlzLOY9Co/mKFj9hIklAe2nGZYcOUxFaiqWrRZ9vCVGzJfRlQ== + dependencies: + "@babel/runtime" "^7.9.6" + "@testing-library/dom" "^7.2.2" + "@types/testing-library__react" "^10.0.1" + "@types/babel-types@*", "@types/babel-types@^7.0.0": version "7.0.7" resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.7.tgz#667eb1640e8039436028055737d2b9986ee336e3" @@ -3805,6 +3842,13 @@ dependencies: "@types/react" "*" +"@types/react-dom@*": + version "16.9.8" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423" + integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA== + dependencies: + "@types/react" "*" + "@types/react-dom@^16.9.6": version "16.9.6" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.6.tgz#9e7f83d90566521cc2083be2277c6712dcaf754c" @@ -3865,6 +3909,22 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== +"@types/testing-library__dom@*": + version "7.0.2" + resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-7.0.2.tgz#2906f8a0dce58b0746c6ab606f786bd06fe6940e" + integrity sha512-8yu1gSwUEAwzg2OlPNbGq+ixhmSviGurBu1+ivxRKq1eRcwdjkmlwtPvr9VhuxTq2fNHBWN2po6Iem3Xt5A6rg== + dependencies: + pretty-format "^25.1.0" + +"@types/testing-library__react@^10.0.1": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-10.0.1.tgz#92bb4a02394bf44428e35f1da2970ed77f803593" + integrity sha512-RbDwmActAckbujLZeVO/daSfdL1pnjVqas25UueOkAY5r7vriavWf0Zqg7ghXMHa8ycD/kLkv8QOj31LmSYwww== + dependencies: + "@types/react-dom" "*" + "@types/testing-library__dom" "*" + pretty-format "^25.1.0" + "@types/unist@^2.0.0", "@types/unist@^2.0.2": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e" @@ -4781,6 +4841,14 @@ argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" +aria-query@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.0.2.tgz#250687b4ccde1ab86d127da0432ae3552fc7b145" + integrity sha512-S1G1V790fTaigUSM/Gd0NngzEfiMy9uTUfMyHhKhVyy4cH5O/eTuR01ydhGL0z4Za1PXFTRGH3qL8VhUQuEO5w== + dependencies: + "@babel/runtime" "^7.7.4" + "@babel/runtime-corejs3" "^7.7.4" + arr-diff@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520" @@ -8007,6 +8075,11 @@ doctypes@^1.1.0: resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9" integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk= +dom-accessibility-api@^0.4.3: + version "0.4.3" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.4.3.tgz#93ca9002eb222fd5a343b6e5e6b9cf5929411c4c" + integrity sha512-JZ8iPuEHDQzq6q0k7PKMGbrIdsgBB7TRrtVOUm4nSMCExlg5qQG4KXWTH2k90yggjM4tTumRGwTKJSldMzKyLA== + dom-converter@^0.2: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -13790,7 +13863,7 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" -"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0: +memoize-one@^5.0.0: version "5.1.1" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== @@ -16047,22 +16120,22 @@ pretty-format@^24.9.0: ansi-styles "^3.2.0" react-is "^16.8.4" -pretty-format@^25.2.1, pretty-format@^25.2.6: - version "25.2.6" - resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.2.6.tgz#542a1c418d019bbf1cca2e3620443bc1323cb8d7" - integrity sha512-DEiWxLBaCHneffrIT4B+TpMvkV9RNvvJrd3lY9ew1CEQobDzEXmYT1mg0hJhljZty7kCc10z13ohOFAE8jrUDg== +pretty-format@^25.1.0, pretty-format@^25.5.0: + version "25.5.0" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a" + integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ== dependencies: - "@jest/types" "^25.2.6" + "@jest/types" "^25.5.0" ansi-regex "^5.0.0" ansi-styles "^4.0.0" react-is "^16.12.0" -pretty-format@^25.5.0: - version "25.5.0" - resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a" - integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ== +pretty-format@^25.2.1, pretty-format@^25.2.6: + version "25.2.6" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.2.6.tgz#542a1c418d019bbf1cca2e3620443bc1323cb8d7" + integrity sha512-DEiWxLBaCHneffrIT4B+TpMvkV9RNvvJrd3lY9ew1CEQobDzEXmYT1mg0hJhljZty7kCc10z13ohOFAE8jrUDg== dependencies: - "@jest/types" "^25.5.0" + "@jest/types" "^25.2.6" ansi-regex "^5.0.0" ansi-styles "^4.0.0" react-is "^16.12.0" @@ -16945,13 +17018,14 @@ react-transition-group@^2.2.1, react-transition-group@^2.5.0: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react-window@^1.8.5: - version "1.8.5" - resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1" - integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q== +react-virtual@2.1.7: + version "2.1.7" + resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.1.7.tgz#901bd4d1817cd3ee53224269b3557bff7021bf6b" + integrity sha512-lepQsBnNc6RtzvstxRbf+PQ7GneTVpfzYnv0gGXyO+eYUf0TrIWKFm06JuscW1J09WwYgR0EANn7wkxXUHwN8w== dependencies: - "@babel/runtime" "^7.0.0" - memoize-one ">=3.1.1 <6" + "@reach/observe-rect" "^1.1.0" + "@scarf/scarf" "^1.0.0" + ts-toolbelt "^6.4.2" react@^16.8.3, react@^16.8.6: version "16.13.0" @@ -19538,6 +19612,11 @@ ts-pnp@^1.1.2: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.6.tgz#389a24396d425a0d3162e96d2b4638900fdc289a" integrity sha512-CrG5GqAAzMT7144Cl+UIFP7mz/iIhiy+xQ6GGcnjTezhALT02uPMRw7tgDSESgB5MsfKt55+GPWw4ir1kVtMIQ== +ts-toolbelt@^6.4.2: + version "6.7.2" + resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-6.7.2.tgz#7ebf53ed19eb068647cf777bf2028df9362a93ac" + integrity sha512-JMZv+tepq6tZ5HFCanwI+9VYdXB0dVACFKeImeyFsLqxBFlGeC8AljSJvh1Z45ETRKmSP25Q+aEYInFKN2NOeg== + tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.11.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"