Rework multiple selection with activatable rows in grid

.changeset/moody-islands-call.md

@@ -0,0 +1,9 @@
+---
+'@sl-design-system/grid': minor
+---
+
+Add `activeRow` property to grid with accompanying event
+
+This changes adds a new `activeRow` property to the `<sl-grid>` component. This allows users to specify which row should be marked as active. The active row is marked using the `active` DOM part. It is styled similarly to a selected row. In order to enable the ability to activate a row, you need to add the `activatable-row` attribute to the `<sl-grid>` component. When the active row changes, an `sl-grid-active-row-change` event is dispatched.
+
+You can combine the `activatable-row` feature with `selects="multiple"` feature to allow users to both activate and select a row.

packages/components/grid/src/grid.scss

@@ -48,7 +48,7 @@
   border: none;
 }
 
-:host([selects$='-row']) {
+:host(:where([activatable-row], [selects$='-row'])) {
   [part~='row'] {
     --_bg-color: transparent;
     --_bg-mix-color: var(--sl-color-background-input-interactive);

packages/components/grid/src/grid.spec.ts

@@ -1,14 +1,17 @@
 import { setupIgnoreWindowResizeObserverLoopErrors } from '@lit-labs/virtualizer/support/resize-observer-errors.js';
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
+import { type SinonSpy, spy } from 'sinon';
 import '../register.js';
-import { type Grid } from './grid.js';
+import { type Grid, type SlActiveRowChangeEvent } from './grid.js';
 import { waitForGridToRenderData } from './utils.js';
 
 setupIgnoreWindowResizeObserverLoopErrors(beforeEach, afterEach, { suppressErrorLogging: true });
 
+type Person = { firstName: string; lastName: string };
+
 describe('sl-grid', () => {
-  let el: Grid;
+  let el: Grid<Person>;
 
   describe('defaults', () => {
     beforeEach(async () => {
@@ -52,4 +55,286 @@ describe('sl-grid', () => {
       ]);
     });
   });
+
+  describe('activatable row', () => {
+    beforeEach(async () => {
+      el = await fixture(html`
+        <sl-grid
+          activatable-row
+          .items=${[
+            { firstName: 'John', lastName: 'Doe' },
+            { firstName: 'Jane', lastName: 'Smith' }
+          ]}
+        >
+          <sl-grid-column path="firstName"></sl-grid-column>
+          <sl-grid-column path="lastName"></sl-grid-column>
+        </sl-grid>
+      `);
+
+      await waitForGridToRenderData(el);
+    });
+
+    it('should not have an active row by default', () => {
+      const activeRow = el.renderRoot.querySelector('[part~="active"]');
+
+      expect(activeRow).to.be.null;
+      expect(el.activeRow).to.be.undefined;
+    });
+
+    it('should toggle the "active" part of the row when clicked', async () => {
+      const firstRow = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr');
+
+      firstRow?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(firstRow?.part.contains('active')).to.be.true;
+      expect(el.activeRow).to.equal(el.items?.at(0));
+
+      firstRow?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(firstRow?.part.contains('active')).to.be.false;
+      expect(el.activeRow).to.be.undefined;
+    });
+
+    it('should remove the "active" part when another row is clicked', async () => {
+      const [firstRow, secondRow] = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr');
+
+      firstRow?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(firstRow?.part.contains('active')).to.be.true;
+      expect(el.activeRow).to.equal(el.items?.at(0));
+
+      secondRow?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(firstRow?.part.contains('active')).to.be.false;
+      expect(secondRow?.part.contains('active')).to.be.true;
+      expect(el.activeRow).to.equal(el.items?.at(1));
+    });
+
+    it('should emit an sl-grid-active-row-change event when the active row changes', async () => {
+      const onActiveRowChange = spy() as SinonSpy<[SlActiveRowChangeEvent], void>;
+
+      el.addEventListener('sl-grid-active-row-change', onActiveRowChange);
+
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(onActiveRowChange).to.have.been.calledOnce;
+      expect(onActiveRowChange.firstCall.args[0].detail.item).to.equal(el.items?.at(0));
+    });
+
+    it('should set the activeRow property to the clicked row item', async () => {
+      el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(el.activeRow).to.equal(el.items?.at(0));
+    });
+
+    it('should add the "active" part to the active row', async () => {
+      el.activeRow = el.items!.at(1);
+      await el.updateComplete;
+
+      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:last-of-type');
+      expect(row?.part.contains('active')).to.be.true;
+    });
+  });
+
+  describe('selects multiple', () => {
+    beforeEach(async () => {
+      el = await fixture(html`
+        <sl-grid
+          .items=${[
+            { firstName: 'John', lastName: 'Doe' },
+            { firstName: 'Jane', lastName: 'Smith' }
+          ]}
+          selects="multiple"
+        >
+          <sl-grid-selection-column></sl-grid-selection-column>
+          <sl-grid-column path="firstName"></sl-grid-column>
+          <sl-grid-column path="lastName"></sl-grid-column>
+        </sl-grid>
+      `);
+
+      await waitForGridToRenderData(el);
+    });
+
+    it('should toggle the "selected" part of the row when clicking in the selection column', async () => {
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td[part~="selection"]')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
+      expect(row?.part.contains('selected')).to.be.true;
+    });
+
+    it('should not toggle the "selected" part of the row when clicking anywhere in the row', async () => {
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const selectedRow = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr[part~="selected"]');
+      expect(selectedRow).to.be.null;
+    });
+
+    it('should support multiple selection by clicking different rows', async () => {
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td[part~="selection"]')?.click();
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:last-of-type td[part~="selection"]')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const rows = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr[part~="selected"]');
+      expect(rows).to.have.lengthOf(2);
+    });
+
+    it('should emit an sl-grid-selection-change event when the selection changes', () => {
+      const onSelectionChange = spy();
+
+      el.addEventListener('sl-grid-selection-change', onSelectionChange);
+
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td[part~="selection"]')?.click();
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:last-of-type td[part~="selection"]')?.click();
+
+      expect(onSelectionChange).to.have.been.calledTwice;
+    });
+
+    it('should call toggle() on the data source when a row is selected', () => {
+      const toggleSpy = spy(el.dataSource!, 'toggle');
+
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td[part~="selection"]')?.click();
+
+      expect(toggleSpy).to.have.been.calledOnce;
+      expect(toggleSpy.firstCall.args[0]).to.have.property('data', el.items?.at(0));
+    });
+  });
+
+  describe('activatable row with selects multiple', () => {
+    beforeEach(async () => {
+      el = await fixture(html`
+        <sl-grid
+          activatable-row
+          .items=${[
+            { firstName: 'John', lastName: 'Doe' },
+            { firstName: 'Jane', lastName: 'Smith' }
+          ]}
+          selects="multiple"
+        >
+          <sl-grid-selection-column></sl-grid-selection-column>
+          <sl-grid-column path="firstName"></sl-grid-column>
+          <sl-grid-column path="lastName"></sl-grid-column>
+        </sl-grid>
+      `);
+
+      await waitForGridToRenderData(el);
+    });
+
+    it('should emit an sl-grid-active-row-change event a row is selected', async () => {
+      const onActiveRowChange = spy() as SinonSpy<[SlActiveRowChangeEvent], void>;
+
+      el.addEventListener('sl-grid-active-row-change', onActiveRowChange);
+
+      // Click the first row, last column to activate the row
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      // Now click the selection column to select the row
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td[part~="selection"]')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(onActiveRowChange).to.have.been.calledTwice;
+      expect(onActiveRowChange.lastCall.args[0].detail.item).to.be.undefined;
+    });
+
+    it('should emit an sl-grid-selection-change event when a row is activated', async () => {
+      const onSelectionChange = spy();
+
+      el.addEventListener('sl-grid-selection-change', onSelectionChange);
+
+      // Click the first row, first column to select the row
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:first-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      // Now click the last row, last column to activate the row
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:last-of-type td:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(onSelectionChange).to.have.been.calledTwice;
+    });
+  });
+
+  describe('selects multiple row', () => {
+    beforeEach(async () => {
+      el = await fixture(html`
+        <sl-grid
+          .items=${[
+            { firstName: 'John', lastName: 'Doe' },
+            { firstName: 'Jane', lastName: 'Smith' }
+          ]}
+          selects="multiple-row"
+        >
+          <sl-grid-selection-column></sl-grid-selection-column>
+          <sl-grid-column path="firstName"></sl-grid-column>
+          <sl-grid-column path="lastName"></sl-grid-column>
+        </sl-grid>
+      `);
+
+      await waitForGridToRenderData(el);
+    });
+
+    it('should toggle the "selected" part of the row when clicking in the selection column', async () => {
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td[part~="selection"]')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      let row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
+      expect(row?.part.contains('selected')).to.be.true;
+
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td[part~="selection"]')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
+      expect(row?.part.contains('selected')).to.be.false;
+    });
+
+    it('should toggle the "selected" part of the row when clicking anywhere in the row', async () => {
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      let row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
+      expect(row?.part.contains('selected')).to.be.true;
+
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      row = el.renderRoot.querySelector<HTMLTableRowElement>('tbody tr:first-of-type');
+      expect(row?.part.contains('selected')).to.be.false;
+    });
+
+    it('should support multiple selection by clicking different rows', async () => {
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')?.click();
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:last-of-type td:last-of-type')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      const rows = el.renderRoot.querySelectorAll<HTMLTableRowElement>('tbody tr[part~="selected"]');
+      expect(rows).to.have.lengthOf(2);
+    });
+
+    it('should emit an sl-grid-selection-change event when the selection changes', () => {
+      const onSelectionChange = spy();
+
+      el.addEventListener('sl-grid-selection-change', onSelectionChange);
+
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')?.click();
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:last-of-type td:last-of-type')?.click();
+
+      expect(onSelectionChange).to.have.been.calledTwice;
+    });
+
+    it('should call toggle() on the data source when a row is selected', () => {
+      const toggleSpy = spy(el.dataSource!, 'toggle');
+
+      el.renderRoot.querySelector<HTMLTableCellElement>('tbody tr:first-of-type td:last-of-type')?.click();
+
+      expect(toggleSpy).to.have.been.calledOnce;
+      expect(toggleSpy.firstCall.args[0]).to.have.property('data', el.items?.at(0));
+    });
+  });
 });