wcs-core 7.3.0 → 7.4.0

package/dist/collection/components/form-field/form-field.e2e.playwright.js

@@ -0,0 +1,104 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Form field component', () => {
+    test.describe('Global', () => {
+        test.describe('Accessibility', () => {
+            test('Should put form-field label to aria-label of the spied element when non empty', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-input/>
+                    </wcs-form-field>
+                `);
+                // When
+                const input = page.locator('wcs-input').locator('input');
+                // Then
+                await expect(input).toHaveAttribute('aria-label', 'Label form field');
+            });
+            test('Should not put form-field label to aria-label of the spied element when empty', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label></wcs-label>
+                        <wcs-input/>
+                    </wcs-form-field>
+                `);
+                // When
+                const input = page.locator('wcs-input').locator('input');
+                // Then
+                await expect(input).not.toHaveAttribute('aria-label');
+            });
+            test('Should not concatenate form-field label with form control (switch, checkbox label when form-field label is empty', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label></wcs-label>
+                        <wcs-switch>Label switch</wcs-switch>
+                    </wcs-form-field>
+                `);
+                // When
+                const switchInput = page.locator('wcs-switch').locator('input');
+                // Then
+                await expect(switchInput).toHaveAttribute('aria-label', 'Label switch');
+            });
+        });
+    });
+    test.describe('With switch', () => {
+        test.describe('Accessibility', () => {
+            test('Should concatenate form-field label with switch label', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-switch>Label switch</wcs-switch>
+                    </wcs-form-field>
+                `);
+                // When
+                const switchInput = page.locator('wcs-switch').locator('input');
+                // Then
+                await expect(switchInput).toHaveAttribute('aria-label', 'Label form field Label switch');
+            });
+        });
+    });
+    test.describe('With checkbox', () => {
+        test.describe('Accessibility', () => {
+            test('Should concatenate form-field label with checkbox label', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-checkbox>Label checkbox</wcs-checkbox>
+                    </wcs-form-field>
+                `);
+                // When
+                const checkboxInput = page.locator('wcs-checkbox').locator('input');
+                // Then
+                await expect(checkboxInput).toHaveAttribute('aria-label', 'Label form field Label checkbox');
+            });
+        });
+    });
+    test.describe('With radio-group', () => {
+        test.describe('Accessibility', () => {
+            test('Should set aria-label on radio-group element', async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-radio-group>
+                            <wcs-radio name="SA" label="SNCF" value="1"></wcs-radio>
+                            <wcs-radio name="SA" label="SNCF Réseau" value="2"></wcs-radio>
+                            <wcs-radio name="SA" label="SNCF Voyageurs" value="3"></wcs-radio>
+                        </wcs-radio-group>
+                    </wcs-form-field>
+                `);
+                // When
+                const radioGroup = page.locator('wcs-radio-group');
+                // Then
+                await expect(radioGroup).toHaveAttribute('aria-label', 'Label form field');
+            });
+        });
+    });
+});
+//# sourceMappingURL=form-field.e2e.playwright.js.map

package/dist/collection/components/form-field/form-field.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Form field component', () => {\n    test.describe('Global', () => {\n        test.describe('Accessibility', () => {\n            test('Should put form-field label to aria-label of the spied element when non empty', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-input/>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const input = page.locator('wcs-input').locator('input');\n\n                // Then\n                await expect(input).toHaveAttribute('aria-label', 'Label form field');\n            });\n\n            test('Should not put form-field label to aria-label of the spied element when empty', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label></wcs-label>\n                        <wcs-input/>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const input = page.locator('wcs-input').locator('input');\n\n                // Then\n                await expect(input).not.toHaveAttribute('aria-label');\n            });\n\n            test('Should not concatenate form-field label with form control (switch, checkbox label when form-field label is empty', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label></wcs-label>\n                        <wcs-switch>Label switch</wcs-switch>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const switchInput = page.locator('wcs-switch').locator('input');\n\n                // Then\n                await expect(switchInput).toHaveAttribute('aria-label', 'Label switch');\n            });\n        });\n    });\n\n    test.describe('With switch', () => {\n        test.describe('Accessibility', () => {\n            test('Should concatenate form-field label with switch label', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-switch>Label switch</wcs-switch>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const switchInput = page.locator('wcs-switch').locator('input');\n\n                // Then\n                await expect(switchInput).toHaveAttribute('aria-label', 'Label form field Label switch');\n            });\n        });\n    });\n\n    test.describe('With checkbox', () => {\n        test.describe('Accessibility', () => {\n            test('Should concatenate form-field label with checkbox label', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-checkbox>Label checkbox</wcs-checkbox>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const checkboxInput = page.locator('wcs-checkbox').locator('input');\n\n                // Then\n                await expect(checkboxInput).toHaveAttribute('aria-label', 'Label form field Label checkbox');\n            });\n        });\n    });\n\n    test.describe('With radio-group', () => {\n        test.describe('Accessibility', () => {\n            test('Should set aria-label on radio-group element', async ({ page }: { page: E2EPage }) => {\n                // Given\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-radio-group>\n                            <wcs-radio name=\"SA\" label=\"SNCF\" value=\"1\"></wcs-radio>\n                            <wcs-radio name=\"SA\" label=\"SNCF Réseau\" value=\"2\"></wcs-radio>\n                            <wcs-radio name=\"SA\" label=\"SNCF Voyageurs\" value=\"3\"></wcs-radio>\n                        </wcs-radio-group>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const radioGroup = page.locator('wcs-radio-group');\n\n                // Then\n                await expect(radioGroup).toHaveAttribute('aria-label', 'Label form field');\n            });\n        });\n    });\n});\n"]}

package/dist/collection/components/galactic-menu/galactic-menu.js

@@ -120,7 +120,7 @@ export class Galactic {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

package/dist/collection/components/grid/grid.e2e.playwright.js

@@ -0,0 +1,153 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Grid component', () => {
+    test.describe('Events', () => {
+        test.describe('simple', () => {
+            test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }) => {
+                // Given
+                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];
+                await setWcsContent(page, `
+                    <wcs-grid id="simpleGrid" selection-config="single" sort="">
+                        <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    </wcs-grid>
+                `);
+                const simpleGrid = page.locator('#simpleGrid');
+                await simpleGrid.evaluate((el, d) => el.data = d, data);
+                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');
+                // When
+                const gridRadioFirstRow = simpleGrid.locator('table tbody tr:first-child td .grid-radio');
+                await gridRadioFirstRow.click();
+                await page.waitForChanges();
+                // Then
+                expect(selectionSpy).toHaveReceivedEventTimes(1);
+                const detail = selectionSpy.events[0].detail;
+                expect(detail.selectedRows[0].data).toEqual(data[0]);
+                expect(detail.selectedRows[0].selected).toBe(true);
+                expect(detail.changedRow.selected).toBe(true);
+                expect(detail.changedRow.data).toEqual(data[0]);
+            });
+        });
+        test.describe('multiple', () => {
+            test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }) => {
+                // Given
+                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];
+                await setWcsContent(page, `
+                    <wcs-grid id="simpleGrid" selection-config="multiple" sort="">
+                        <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    </wcs-grid>
+                `);
+                const simpleGrid = page.locator('#simpleGrid');
+                await simpleGrid.evaluate((el, d) => el.data = d, data);
+                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');
+                // When
+                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');
+                await wcsCheckboxFirstRow.click();
+                await page.waitForChanges();
+                // Then
+                expect(selectionSpy).toHaveReceivedEventTimes(1);
+                const detail = selectionSpy.events[0].detail;
+                expect(detail.selectedRows[0].data).toEqual(data[0]);
+                expect(detail.selectedRows[0].selected).toBe(true);
+                expect(detail.changedRow.selected).toBe(true);
+                expect(detail.changedRow.data).toEqual(data[0]);
+            });
+            test('should emit a wcsGridSelectionChange event when a row is unselected', async ({ page }) => {
+                // Given
+                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];
+                await setWcsContent(page, `
+                    <wcs-grid id="simpleGrid" selection-config="multiple" sort="">
+                        <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    </wcs-grid>
+                `);
+                const simpleGrid = page.locator('#simpleGrid');
+                await simpleGrid.evaluate((el, d) => el.data = d, data);
+                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');
+                await wcsCheckboxFirstRow.click(); // Row is selected
+                await page.waitForChanges();
+                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');
+                // When
+                await wcsCheckboxFirstRow.click(); // Row is unselected
+                await page.waitForChanges();
+                // Then
+                expect(selectionSpy).toHaveReceivedEventTimes(1);
+                const detail = selectionSpy.events[0].detail;
+                expect(detail.selectedRows).toEqual([]);
+                expect(detail.changedRow.selected).toBe(false);
+                expect(detail.changedRow.data).toEqual(data[0]);
+            });
+            test('should emit a wcsGridSelectionChange event when a new row is selected while another are already selected', async ({ page }) => {
+                // Given
+                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];
+                await setWcsContent(page, `
+                    <wcs-grid id="simpleGrid" selection-config="multiple" sort="">
+                        <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    </wcs-grid>
+                `);
+                const simpleGrid = page.locator('#simpleGrid');
+                await simpleGrid.evaluate((el, d) => el.data = d, data);
+                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');
+                await wcsCheckboxFirstRow.click();
+                await page.waitForChanges();
+                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');
+                // When
+                const wcsCheckboxLastChild = simpleGrid.locator('table tbody tr:last-child td wcs-checkbox');
+                await wcsCheckboxLastChild.click();
+                await page.waitForChanges();
+                // Then
+                expect(selectionSpy).toHaveReceivedEventTimes(1);
+                const detail = selectionSpy.events[0].detail;
+                expect(detail.selectedRows.length).toBe(2);
+                expect(detail.selectedRows[0].data).toEqual(data[0]);
+                expect(detail.selectedRows[1].data).toEqual(data[data.length - 1]);
+                expect(detail.changedRow.selected).toBe(true);
+                expect(detail.changedRow.data).toEqual(data[data.length - 1]);
+            });
+            test('should emit a wcsGridSelectionChange event when all rows are selected', async ({ page }) => {
+                // Given
+                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];
+                await setWcsContent(page, `
+                    <wcs-grid id="simpleGrid" selection-config="multiple" sort="">
+                        <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                    </wcs-grid>
+                `);
+                const simpleGrid = page.locator('#simpleGrid');
+                await simpleGrid.evaluate((el, d) => el.data = d, data);
+                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');
+                // When
+                const wcsCheckboxAll = simpleGrid.locator('table thead th:first-child wcs-checkbox');
+                await wcsCheckboxAll.click();
+                await page.waitForChanges();
+                // Then
+                expect(selectionSpy).toHaveReceivedEventTimes(1);
+                const detail = selectionSpy.events[0].detail;
+                expect(detail.selectedRows.length).toBe(data.length);
+                expect(detail.changedRow).toBe('allCheckbox');
+            });
+        });
+    });
+    test.describe('Sort', () => {
+        test('should well sort with pagination', async ({ page }) => {
+            const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Zoe' }];
+            await setWcsContent(page, `
+                <wcs-grid id="simpleGrid" selection-config="multiple">
+                    <wcs-grid-column path="first_name" name="First Name" sort sort-order="desc"></wcs-grid-column>
+                    <wcs-grid-pagination available-page-sizes="2"></wcs-grid-pagination>
+                </wcs-grid>
+            `);
+            const simpleGrid = page.locator('#simpleGrid');
+            await simpleGrid.evaluate((el, d) => el.data = d, data);
+            // First page should contain 2 elements (page-size = 2) sorted descending by first_name
+            // Data order before sort: John, Doe, Jane, Zoe
+            // After descending sort: Zoe, John, Jane, Doe
+            // Page 1 should show Zoe, John
+            const firstRowFirstCell = simpleGrid.locator('table tbody tr:first-child td:last-child');
+            const secondRowFirstCell = simpleGrid.locator('table tbody tr:nth-child(2) td:last-child');
+            await expect(async () => {
+                await expect(firstRowFirstCell).toHaveText('Zoe');
+                await expect(secondRowFirstCell).toHaveText('John');
+            }).toPass();
+        });
+    });
+});
+//# sourceMappingURL=grid.e2e.playwright.js.map

package/dist/collection/components/grid/grid.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/grid/grid.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Grid component', () => {\n    test.describe('Events', () => {\n        test.describe('simple', () => {\n            test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n                await setWcsContent(page, `\n                    <wcs-grid id=\"simpleGrid\" selection-config=\"single\" sort=\"\">\n                        <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n                    </wcs-grid>\n                `);\n\n                const simpleGrid = page.locator('#simpleGrid');\n                await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n                // When\n                const gridRadioFirstRow = simpleGrid.locator('table tbody tr:first-child td .grid-radio');\n                await gridRadioFirstRow.click();\n                await page.waitForChanges();\n\n                // Then\n                expect(selectionSpy).toHaveReceivedEventTimes(1);\n                const detail = selectionSpy.events[0].detail;\n                expect(detail.selectedRows[0].data).toEqual(data[0]);\n                expect(detail.selectedRows[0].selected).toBe(true);\n                expect(detail.changedRow.selected).toBe(true);\n                expect(detail.changedRow.data).toEqual(data[0]);\n            });\n        });\n\n        test.describe('multiple', () => {\n            test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n                await setWcsContent(page, `\n                    <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n                        <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n                    </wcs-grid>\n                `);\n\n                const simpleGrid = page.locator('#simpleGrid');\n                await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n                // When\n                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n                await wcsCheckboxFirstRow.click();\n                await page.waitForChanges();\n\n                // Then\n                expect(selectionSpy).toHaveReceivedEventTimes(1);\n                const detail = selectionSpy.events[0].detail;\n                expect(detail.selectedRows[0].data).toEqual(data[0]);\n                expect(detail.selectedRows[0].selected).toBe(true);\n                expect(detail.changedRow.selected).toBe(true);\n                expect(detail.changedRow.data).toEqual(data[0]);\n            });\n\n            test('should emit a wcsGridSelectionChange event when a row is unselected', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n                await setWcsContent(page, `\n                    <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n                        <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n                    </wcs-grid>\n                `);\n\n                const simpleGrid = page.locator('#simpleGrid');\n                await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n                await wcsCheckboxFirstRow.click(); // Row is selected\n                await page.waitForChanges();\n\n                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n                // When\n                await wcsCheckboxFirstRow.click(); // Row is unselected\n                await page.waitForChanges();\n\n                // Then\n                expect(selectionSpy).toHaveReceivedEventTimes(1);\n                const detail = selectionSpy.events[0].detail;\n                expect(detail.selectedRows).toEqual([]);\n                expect(detail.changedRow.selected).toBe(false);\n                expect(detail.changedRow.data).toEqual(data[0]);\n            });\n\n            test('should emit a wcsGridSelectionChange event when a new row is selected while another are already selected', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n                await setWcsContent(page, `\n                    <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n                        <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n                    </wcs-grid>\n                `);\n\n                const simpleGrid = page.locator('#simpleGrid');\n                await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n                const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n                await wcsCheckboxFirstRow.click();\n                await page.waitForChanges();\n\n                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n                // When\n                const wcsCheckboxLastChild = simpleGrid.locator('table tbody tr:last-child td wcs-checkbox');\n                await wcsCheckboxLastChild.click();\n                await page.waitForChanges();\n\n                // Then\n                expect(selectionSpy).toHaveReceivedEventTimes(1);\n                const detail = selectionSpy.events[0].detail;\n                expect(detail.selectedRows.length).toBe(2);\n                expect(detail.selectedRows[0].data).toEqual(data[0]);\n                expect(detail.selectedRows[1].data).toEqual(data[data.length - 1]);\n                expect(detail.changedRow.selected).toBe(true);\n                expect(detail.changedRow.data).toEqual(data[data.length - 1]);\n            });\n\n            test('should emit a wcsGridSelectionChange event when all rows are selected', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n                await setWcsContent(page, `\n                    <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n                        <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n                    </wcs-grid>\n                `);\n\n                const simpleGrid = page.locator('#simpleGrid');\n                await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n                const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n                // When\n                const wcsCheckboxAll = simpleGrid.locator('table thead th:first-child wcs-checkbox');\n                await wcsCheckboxAll.click();\n                await page.waitForChanges();\n\n                // Then\n                expect(selectionSpy).toHaveReceivedEventTimes(1);\n                const detail = selectionSpy.events[0].detail;\n                expect(detail.selectedRows.length).toBe(data.length);\n                expect(detail.changedRow).toBe('allCheckbox');\n            });\n        });\n    });\n\n    test.describe('Sort', () => {\n        test('should well sort with pagination', async ({ page }: { page: E2EPage }) => {\n            const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Zoe' }];\n            await setWcsContent(page, `\n                <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\">\n                    <wcs-grid-column path=\"first_name\" name=\"First Name\" sort sort-order=\"desc\"></wcs-grid-column>\n                    <wcs-grid-pagination available-page-sizes=\"2\"></wcs-grid-pagination>\n                </wcs-grid>\n            `);\n\n            const simpleGrid = page.locator('#simpleGrid');\n            await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n            // First page should contain 2 elements (page-size = 2) sorted descending by first_name\n            // Data order before sort: John, Doe, Jane, Zoe\n            // After descending sort: Zoe, John, Jane, Doe\n            // Page 1 should show Zoe, John\n\n            const firstRowFirstCell = simpleGrid.locator('table tbody tr:first-child td:last-child');\n            const secondRowFirstCell = simpleGrid.locator('table tbody tr:nth-child(2) td:last-child');\n\n            await expect(async () => {\n                await expect(firstRowFirstCell).toHaveText('Zoe');\n                await expect(secondRowFirstCell).toHaveText('John');\n            }).toPass();\n        });\n    });\n});\n"]}

package/dist/collection/components/grid/grid.js

@@ -77,6 +77,7 @@ export class Grid {
     onDataChange(newValue) {
         this.updateGridRows(newValue);
         this.refreshSort(false);
+        this.updatePageIndex();
     }
     onSelectedItemsPropertyChange(newValue) {
         this.updateSelectionWithValues(newValue);
@@ -282,7 +283,6 @@ export class Grid {
                 rows.push(row);
             }
             this.rows = rows;
-            this.updatePageIndex();
         }
     }
     componentDidLoad() {
@@ -295,6 +295,7 @@ export class Grid {
             this.updateSelectionWithValues(this.selectedItems);
         }
         this.refreshSort(true);
+        this.updatePageIndex();
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, GRID_INHERITED_ATTRS));
@@ -505,12 +506,12 @@ export class Grid {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '98d13e7497ec9d9ecd3e149b3f6986e16bc5cc2a' }, h("table", Object.assign({ key: 'a44825cf71ff284a5204e9d922c0eba2c2ca23f4', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '336578d350ae8082a19fa6798af35f2fdd015ff9' }, h("tr", { key: 'fdb38402ea5c58dd77dad7df2ef97d54c521123c', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (h(Host, { key: '1e9b1d5dc405c67428750276de3e38e8e163d20e' }, h("table", Object.assign({ key: '42e610c403c108f36c2f5e4eb276b9e1c6349b8c', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '365bf4de9329c94c5c891040b14ca844c6e8fd99' }, h("tr", { key: '9d1e4c4cf0418f585679a055edbb88ca08493d3d', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
-                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '2d68b72fac0251dab9f519cf84c25c96262c193b', name: "grid-column" }))), h("tbody", { key: '4156e796ac5a81170b5dba011159f8e6bb7a7e60' }, this.loading
+                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '4c1ed31eeaf61d0f94a156cc97b393abafdfb6e3', name: "grid-column" }))), h("tbody", { key: '5758c76c248e9e54759bd008310047a5c670339a' }, this.loading
             ? h("tr", { "aria-busy": "true" }, h("td", { colSpan: this.totalColumnCount(), class: "loading" }, h("wcs-spinner", null)))
-            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: 'c683eb883707ffbd1fed22d86ececb595f70c2c0', name: "grid-pagination" })));
+            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: '170e79b086e8235ae736c8cc54512b0e3bb0e7ab', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.
@@ -820,7 +821,7 @@ export class Grid {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",