feat(table): update select all on addition or removal of rows

packages/genesys-spark-components/src/components/stable/gux-table/example.html

@@ -438,11 +438,26 @@ <h2>Data table with sortable columns</h2>
 </gux-table>
 
 <h2>Object table with rows selection</h2>
+<ul>
+  <li>
+    Use the <strong>setChecked</strong> method on
+    <strong>gux-all-row-select</strong> to programatically manage the selected
+    state.
+  </li>
+  <li>
+    Use the <strong>setIndeterminate</strong> method to set the
+    indeterminate/unknown state on <strong>gux-all-row-select</strong>. Remember
+    to set it to false when the checkbox is checked or unchecked as it overrides
+    these states.
+  </li>
+</ul>
+<gux-button id="selectAll">Select all</gux-button>
+<gux-button id="deselecAll">Deselect all</gux-button>
 <gux-table object-table selectable-rows>
   <table slot="data">
     <thead>
       <tr data-row-id="head">
-        <th><gux-all-row-select></gux-all-row-select></th>
+        <th><gux-all-row-select id="allRowSelect"></gux-all-row-select></th>
         <th data-column-name="first-name">First name</th>
         <th data-column-name="last-name">Last name</th>
         <th data-column-name="age" data-cell-numeric>Age</th>
@@ -970,7 +985,21 @@ <h2>Data table with fixed columns</h2>
       }
 
 
-    })
+    });
+
+  const selectAll = document.getElementById('selectAll');
+  const deselectAll = document.getElementById('deselecAll');
+  const allRowSelect = document.getElementById('allRowSelect');
+
+  selectAll.addEventListener('click', () => {
+    allRowSelect.setIndeterminate(false);
+    allRowSelect.setChecked(true);
+  });
+
+  deselectAll.addEventListener('click', () => {
+    allRowSelect.setIndeterminate(false);
+    allRowSelect.setChecked(false);
+  });
   })()"
 >
   .not-used {

packages/genesys-spark-components/src/components/stable/gux-table/gux-all-row-select/gux-all-row-select.tsx

@@ -40,7 +40,7 @@ export class GuxAllRowSelect {
   onCheck(event: CustomEvent): void {
     event.stopPropagation();
     this.selected = this.inputElement.checked;
-    this.internalallrowselectchange.emit(this.inputElement.checked);
+    this.internalallrowselectchange.emit(this.selected);
   }
 
   @Method()
@@ -49,6 +49,12 @@ export class GuxAllRowSelect {
     this.inputElement.indeterminate = indeterminate;
   }
 
+  @Method()
+  async setChecked(checked: boolean): Promise<void> {
+    this.selected = checked;
+    this.internalallrowselectchange.emit(this.selected);
+  }
+
   async componentWillLoad(): Promise<void> {
     this.i18n = await buildI18nForComponent(
       this.root,

packages/genesys-spark-components/src/components/stable/gux-table/gux-all-row-select/readme.md

@@ -22,6 +22,22 @@
 
 ## Methods
 
+### `setChecked(checked: boolean) => Promise<void>`
+
+
+
+#### Parameters
+
+| Name      | Type      | Description |
+| --------- | --------- | ----------- |
+| `checked` | `boolean` |             |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `setIndeterminate(indeterminate?: boolean) => Promise<void>`
 
 

packages/genesys-spark-components/src/components/stable/gux-table/gux-all-row-select/tests/gux-all-row-select.spec.ts

@@ -11,4 +11,38 @@ describe('gux-all-row-select', () => {
 
     expect(page.rootInstance).toBeInstanceOf(GuxAllRowSelect);
   });
+
+  it('should handle the setIndeterminate method', async () => {
+    const html = '<gux-all-row-select></gux-all-row-select>';
+    const page = await newSpecPage({ components, html, language });
+
+    const component = page.rootInstance;
+    const inputElement = page.root.shadowRoot.querySelector('input');
+
+    expect(inputElement.indeterminate).toBe(undefined);
+
+    await component.setIndeterminate(true);
+    expect(inputElement.indeterminate).toBe(true);
+
+    await component.setIndeterminate(false);
+    expect(inputElement.indeterminate).toBe(false);
+  });
+
+  it('should handle the setChecked method', async () => {
+    const html = '<gux-all-row-select></gux-all-row-select>';
+    const page = await newSpecPage({ components, html, language });
+
+    const component = page.rootInstance;
+    const inputElement = page.root.shadowRoot.querySelector('input');
+
+    expect(inputElement.checked).toBe(false);
+
+    await component.setChecked(true);
+    await page.waitForChanges();
+    expect(inputElement.checked).toBe(true);
+
+    await component.setChecked(false);
+    await page.waitForChanges();
+    expect(inputElement.checked).toBe(false);
+  });
 });

packages/genesys-spark-components/src/components/stable/gux-table/gux-table.tsx

@@ -42,9 +42,10 @@ export class GuxTable {
   root: HTMLElement;
 
   private resizeObserver: ResizeObserver;
-  private slotObserver: MutationObserver = new MutationObserver(() =>
-    forceUpdate(this)
-  );
+  private slotObserver: MutationObserver = new MutationObserver(() => {
+    this.prepareSelectableRows();
+    forceUpdate(this);
+  });
   private i18n: GetI18nValue;
   private columnResizeState: GuxTableColumnResizeState | null;
   private tableId: string = randomHTMLId('gux-table');
@@ -267,11 +268,9 @@ export class GuxTable {
 
   // Handle a change in state of the select all checkbox
   private handleSelectAllRows(selected: boolean): void {
-    const selectAllCheckbox = this.selectAllCheckbox;
     const rowCheckboxes = this.rowCheckboxes;
 
     rowCheckboxes.forEach(rowBox => {
-      selectAllCheckbox.selected = selected;
       if (!rowBox.disabled) {
         rowBox.selected = selected;
         this.updateRowSelection(rowBox);