feat: select row when clicking row

packages/table/src/TableCheckboxCell.ts

@@ -52,6 +52,10 @@ export class TableCheckboxCell extends SpectrumElement {
     @property({ type: Boolean, reflect: true, attribute: 'selects-single' })
     public selectsSingle = false;
 
+    public override click(): void {
+        this.checkbox.click();
+    }
+
     protected override render(): TemplateResult {
         return html`
             <sp-checkbox

packages/table/src/TableRow.ts

@@ -42,6 +42,9 @@ export class TableRow extends SpectrumElement {
     @property({ reflect: true })
     public role = 'row';
 
+    @property({ type: Boolean })
+    public selectable = false;
+
     @property({ type: Boolean, reflect: true })
     public selected = false;
 
@@ -60,21 +63,55 @@ export class TableRow extends SpectrumElement {
         }
     }
 
+    protected handleSlotchange({
+        target,
+    }: Event & { target: HTMLSlotElement }): void {
+        const assignedElements = target.assignedElements();
+        this.selectable = !!assignedElements.find(
+            (el) => el.localName === 'sp-table-checkbox-cell'
+        );
+    }
+
     protected manageSelected(): void {
         const [checkboxCell] = this.checkboxCells;
         if (!checkboxCell) return;
         checkboxCell.checked = this.selected;
     }
 
+    protected handleClick(event: Event): void {
+        if (
+            event
+                .composedPath()
+                .find(
+                    (node) => (node as HTMLElement).localName === 'sp-checkbox'
+                )
+        ) {
+            return;
+        }
+        const [checkboxCell] = this.checkboxCells;
+        if (!checkboxCell) return;
+        checkboxCell.click();
+    }
+
     protected override render(): TemplateResult {
         return html`
-            <slot @change=${this.handleChange}></slot>
+            <slot
+                @change=${this.handleChange}
+                @slotchange=${this.handleSlotchange}
+            ></slot>
         `;
     }
 
     protected override willUpdate(changed: PropertyValues<this>): void {
         if (changed.has('selected')) {
             this.manageSelected();
         }
+        if (changed.has('selectable')) {
+            if (this.selectable) {
+                this.addEventListener('click', this.handleClick);
+            } else {
+                this.removeEventListener('click', this.handleClick);
+            }
+        }
     }
 }

packages/table/test/table-selects.test.ts

@@ -170,6 +170,12 @@ describe('Table Selects', () => {
         expect(rowThreeCheckbox.checkbox.checked).to.be.true;
         expect(rowTwoCheckbox.checkbox.checked).to.be.false;
         expect(el.selected.length).to.equal(1);
+
+        rowTwo.click();
+        await elementUpdated(el);
+
+        expect(rowTwoCheckbox.checked).to.be.true;
+        expect(el.selected).to.deep.equal(['row2']);
     });
 
     it('surfaces [selects="multiple"] selection', async () => {

packages/table/test/virtualized-table-selects.test.ts

@@ -209,6 +209,11 @@ describe('Virtualized Table Selects', () => {
         await elementUpdated(el);
 
         expect(el.selected).to.deep.equal(['2']);
+
+        rowTwo.click();
+        await elementUpdated(el);
+
+        expect(el.selected).to.deep.equal(['1']);
     });
 
     it('surfaces [selects="multiple"] selection on Virtualized Table', async () => {