Skip to content

Commit 610f793

Browse files
Lukas742Lukas742
committed
Merge branch 'main' into feat/at-f2-nav
2 parents 6e797f9 + 0fd1c99 commit 610f793

File tree

8 files changed

+111
-41
lines changed

8 files changed

+111
-41
lines changed

‎.github/workflows/main.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ jobs:
2020
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
2121

2222
- name: REUSE Compliance Check
23-
uses: fsfe/reuse-action@43bd643263f2a557a37e023e538ab9f83dce92a6 # v1.1.1
23+
uses: fsfe/reuse-action@bb774aa972c2a89ff34781233d275075cbddf542 # v5.0.0
2424

2525
check-bundle-size:
2626
if: ${{ github.base_ref == 'main' }} # only for PRs targeting main branch

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx‎

Lines changed: 78 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -163,24 +163,93 @@ describe('AnalyticalTable', () => {
163163
cy.findByText('Name').click();
164164
cy.get('[ui5-popover]').should('be.visible');
165165
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
166-
cy.get('@onSortSpy').should('have.been.calledWithMatch', {
167-
detail: { column: { id: 'name' }, sortDirection: 'asc' },
168-
});
166+
cy.get('@onSortSpy')
167+
.its('lastCall')
168+
.should('have.been.calledWithMatch', {
169+
detail: { column: { id: 'name' }, sortDirection: 'asc' },
170+
});
169171
cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', 'C');
170172

171173
cy.findByText('Name').click();
172174
cy.get('[ui5-list]').clickUi5ListItemByText('Clear Sorting');
173-
cy.get('@onSortSpy').should('have.been.calledWithMatch', {
174-
detail: { column: { id: 'name' }, sortDirection: 'clear' },
175-
});
175+
cy.get('@onSortSpy')
176+
.its('lastCall')
177+
.should('have.been.calledWithMatch', {
178+
detail: { column: { id: 'name' }, sortDirection: 'clear' },
179+
});
176180
cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', 'X');
177181

178182
cy.findByText('Name').click();
179183
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Descending');
180-
cy.get('@onSortSpy').should('have.been.calledWithMatch', {
181-
detail: { column: { id: 'name' }, sortDirection: 'desc' },
182-
});
184+
cy.get('@onSortSpy')
185+
.its('lastCall')
186+
.should('have.been.calledWithMatch', {
187+
detail: { column: { id: 'name' }, sortDirection: 'desc' },
188+
});
189+
cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', 'B');
190+
191+
cy.log('subRows sorting');
192+
const treeData = [
193+
{
194+
category: 'Number',
195+
subRows: [{ category: '2' }, { category: '1' }, { category: '3' }],
196+
},
197+
{
198+
category: 'Alphabet',
199+
subRows: [{ category: 'B' }, { category: 'A' }, { category: 'C' }],
200+
},
201+
];
202+
const treeColumns: AnalyticalTableColumnDefinition[] = [{ Header: 'Category', accessor: 'category' }];
203+
cy.mount(<AnalyticalTable data={treeData} columns={treeColumns} sortable isTreeTable onSort={sort} />);
204+
// expand rows
205+
cy.get('[ui5-button]').click({ multiple: true });
206+
cy.findByText('Category').click();
207+
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
208+
cy.get('@onSortSpy')
209+
.its('lastCall')
210+
.should('have.been.calledWithMatch', {
211+
detail: { column: { id: 'category' }, sortDirection: 'asc' },
212+
});
213+
cy.get('[aria-rowindex="1"] > [aria-colindex="1"]').should('text', 'Alphabet');
214+
cy.get('[aria-rowindex="2"] > [aria-colindex="1"]').should('text', 'A');
183215
cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', 'B');
216+
cy.get('[aria-rowindex="4"] > [aria-colindex="1"]').should('text', 'C');
217+
cy.get('[aria-rowindex="5"] > [aria-colindex="1"]').should('text', 'Number');
218+
cy.get('[aria-rowindex="6"] > [aria-colindex="1"]').should('text', '1');
219+
cy.get('[aria-rowindex="7"] > [aria-colindex="1"]').should('text', '2');
220+
cy.get('[aria-rowindex="8"] > [aria-colindex="1"]').should('text', '3');
221+
222+
cy.findByText('Category').click();
223+
cy.get('[ui5-list]').clickUi5ListItemByText('Sort Descending');
224+
cy.get('@onSortSpy')
225+
.its('lastCall')
226+
.should('have.been.calledWithMatch', {
227+
detail: { column: { id: 'category' }, sortDirection: 'desc' },
228+
});
229+
cy.get('[aria-rowindex="1"] > [aria-colindex="1"]').should('text', 'Number');
230+
cy.get('[aria-rowindex="2"] > [aria-colindex="1"]').should('text', '3');
231+
cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', '2');
232+
cy.get('[aria-rowindex="4"] > [aria-colindex="1"]').should('text', '1');
233+
cy.get('[aria-rowindex="5"] > [aria-colindex="1"]').should('text', 'Alphabet');
234+
cy.get('[aria-rowindex="6"] > [aria-colindex="1"]').should('text', 'C');
235+
cy.get('[aria-rowindex="7"] > [aria-colindex="1"]').should('text', 'B');
236+
cy.get('[aria-rowindex="8"] > [aria-colindex="1"]').should('text', 'A');
237+
238+
cy.findByText('Category').click();
239+
cy.get('[ui5-list]').clickUi5ListItemByText('Clear Sorting');
240+
cy.get('@onSortSpy')
241+
.its('lastCall')
242+
.should('have.been.calledWithMatch', {
243+
detail: { column: { id: 'category' }, sortDirection: 'clear' },
244+
});
245+
cy.get('[aria-rowindex="1"] > [aria-colindex="1"]').should('text', 'Number');
246+
cy.get('[aria-rowindex="2"] > [aria-colindex="1"]').should('text', '2');
247+
cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', '1');
248+
cy.get('[aria-rowindex="4"] > [aria-colindex="1"]').should('text', '3');
249+
cy.get('[aria-rowindex="5"] > [aria-colindex="1"]').should('text', 'Alphabet');
250+
cy.get('[aria-rowindex="6"] > [aria-colindex="1"]').should('text', 'B');
251+
cy.get('[aria-rowindex="7"] > [aria-colindex="1"]').should('text', 'A');
252+
cy.get('[aria-rowindex="8"] > [aria-colindex="1"]').should('text', 'C');
184253
});
185254

186255
it('row count modes', () => {

‎packages/main/src/components/AnalyticalTable/hooks/useColumnsDeps.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type { ReactTableHooks, TableInstance } from '../types/index.js';
2+
3+
const columnsDeps = (deps, { instance }: { instance: TableInstance }) => {
4+
const { webComponentsReactProperties, state } = instance;
5+
const { selectionMode, selectionBehavior, withRowHighlight, highlightField, withNavigationHighlight, isTreeTable } =
6+
webComponentsReactProperties;
7+
8+
// required as subRows aren't updated when sorting is cleared
9+
const updateOnSortClear = isTreeTable ? state.sortBy.length === 0 : false;
10+
return [
11+
...deps,
12+
selectionMode,
13+
selectionBehavior,
14+
withRowHighlight,
15+
highlightField,
16+
withNavigationHighlight,
17+
updateOnSortClear,
18+
];
19+
};
20+
21+
const visibleColumnsDeps = (deps, { instance }: { instance: TableInstance }) => {
22+
const { webComponentsReactProperties } = instance;
23+
const { selectionMode, selectionBehavior, withRowHighlight, withNavigationHighlight } = webComponentsReactProperties;
24+
return [...deps, selectionMode, selectionBehavior, withRowHighlight, withNavigationHighlight];
25+
};
26+
27+
export const useColumnsDeps = (hooks: ReactTableHooks) => {
28+
hooks.columnsDeps.push(columnsDeps);
29+
hooks.visibleColumnsDeps.push(visibleColumnsDeps);
30+
};

‎packages/main/src/components/AnalyticalTable/hooks/useRowHighlight.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,6 @@ const Cell = (instance: TableInstance) => {
3131
/*
3232
* TABLE HOOKS
3333
*/
34-
const columnsDeps = (deps, { instance: { webComponentsReactProperties } }: { instance: TableInstance }) => {
35-
return [...deps, webComponentsReactProperties.withRowHighlight, webComponentsReactProperties.highlightField];
36-
};
37-
const visibleColumnsDeps = (deps, { instance }: { instance: TableInstance }) => [
38-
...deps,
39-
instance.webComponentsReactProperties.withRowHighlight,
40-
];
4134
const visibleColumns = (
4235
currentVisibleColumns,
4336
{ instance: { webComponentsReactProperties } }: { instance: TableInstance },
@@ -77,8 +70,6 @@ const columns = (currentColumns, { instance }: { instance: TableInstance }) => {
7770

7871
export const useRowHighlight = (hooks: ReactTableHooks) => {
7972
hooks.columns.push(columns);
80-
hooks.columnsDeps.push(columnsDeps);
81-
hooks.visibleColumnsDeps.push(visibleColumnsDeps);
8273
hooks.visibleColumns.push(visibleColumns);
8374
};
8475

‎packages/main/src/components/AnalyticalTable/hooks/useRowNavigationIndicator.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,6 @@ const Cell = (instance) => {
2727
/*
2828
* TABLE HOOKS
2929
*/
30-
const columnsDeps = (deps, { instance: { webComponentsReactProperties } }: { instance: TableInstance }) => {
31-
return [...deps, webComponentsReactProperties.withNavigationHighlight];
32-
};
33-
const visibleColumnsDeps = (deps, { instance }: { instance: TableInstance }) => [
34-
...deps,
35-
instance.webComponentsReactProperties.withNavigationHighlight,
36-
];
3730
const visibleColumns = (
3831
currentVisibleColumns,
3932
{ instance: { webComponentsReactProperties } }: { instance: TableInstance },
@@ -72,7 +65,5 @@ const columns = (currentColumns, { instance }: { instance: TableInstance }) => {
7265

7366
export const useRowNavigationIndicators = (hooks: ReactTableHooks) => {
7467
hooks.columns.push(columns);
75-
hooks.columnsDeps.push(columnsDeps);
76-
hooks.visibleColumnsDeps.push(visibleColumnsDeps);
7768
hooks.visibleColumns.push(visibleColumns);
7869
};

‎packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -131,16 +131,6 @@ const headerProps = (props, { instance }: { instance: TableInstance }) => {
131131
return props;
132132
};
133133

134-
const columnDeps = (deps, { instance: { webComponentsReactProperties } }: { instance: TableInstance }) => {
135-
return [...deps, webComponentsReactProperties.selectionMode, webComponentsReactProperties.selectionBehavior];
136-
};
137-
138-
const visibleColumnsDeps = (deps, { instance }: { instance: TableInstance }) => [
139-
...deps,
140-
instance.webComponentsReactProperties.selectionMode,
141-
instance.webComponentsReactProperties.selectionBehavior,
142-
];
143-
144134
const visibleColumns = (
145135
currentVisibleColumns,
146136
{ instance: { webComponentsReactProperties } }: { instance: TableInstance },
@@ -219,8 +209,6 @@ export const useRowSelectionColumn = (hooks: ReactTableHooks) => {
219209
hooks.getToggleRowSelectedProps.push(setToggleRowSelectedProps);
220210
hooks.getToggleAllRowsSelectedProps.push(setToggleAllRowsSelectedProps);
221211
hooks.columns.push(columns);
222-
hooks.columnsDeps.push(columnDeps);
223-
hooks.visibleColumnsDeps.push(visibleColumnsDeps);
224212
hooks.visibleColumns.push(visibleColumns);
225213
};
226214
useRowSelectionColumn.pluginName = 'useRowSelectionColumn';

‎packages/main/src/components/AnalyticalTable/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import { TablePlaceholder } from './defaults/LoadingComponent/TablePlaceholder.j
6262
import { DefaultNoDataComponent } from './defaults/NoDataComponent/index.js';
6363
import { useA11y } from './hooks/useA11y.js';
6464
import { useAutoResize } from './hooks/useAutoResize.js';
65+
import { useColumnsDeps } from './hooks/useColumnsDeps.js';
6566
import { useColumnDragAndDrop } from './hooks/useDragAndDrop.js';
6667
import { useDynamicColumnWidths } from './hooks/useDynamicColumnWidths.js';
6768
import { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
@@ -268,6 +269,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
268269
useExpanded,
269270
useRowSelect,
270271
useResizeColumns,
272+
useColumnsDeps,
271273
useResizeColumnsConfig,
272274
useRowSelectionColumn,
273275
useAutoResize,

‎packages/main/src/i18n/messagebundle.properties‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -383,4 +383,3 @@ SELECTED_ITEMS=Selected Items {0}
383383

384384
#XACT: Screen reader announcement for table cell that includes interactive element/s. The placeholder is the name of the element (e.g. "Input").
385385
INCLUDES_X=Includes {0}
386-

0 commit comments

Comments
 (0)