New tree component

.changeset/curvy-jeans-travel.md

@@ -0,0 +1,7 @@
+---
+'@sl-design-system/checkbox': patch
+---
+
+Various fixes:
+- Fix bug where clicking a checkbox in a tree-node will not check it
+- Fix `sl-change` event firing multiple times for a single click

.changeset/mean-kids-poke.md

@@ -0,0 +1,8 @@
+---
+'@sl-design-system/eslint-config': patch
+---
+
+Bump typescript-eslint version to fix false positive
+
+Updating to the latest version fixes a false positive error that
+was being thrown related to the `RovingTabindexController` having an `any` type.

.changeset/real-bugs-camp.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/grid': patch
+---
+
+Fix incorrect type import using absolute path

.changeset/shy-wombats-run.md

@@ -0,0 +1,9 @@
+---
+'@sl-design-system/shared': minor
+---
+
+Add new `focusToElement` method to `FocusGroupController`
+
+This allows you to focus on a specific element within a focus group. This is
+useful when you want to focus on a specific element within a focus group, but still
+maintain the roving tabindex behavior.

.changeset/tender-ways-reply.md

@@ -0,0 +1,12 @@
+---
+'@sl-design-system/data-source': patch
+'@sl-design-system/grid': patch
+'@sl-design-system/paginator': patch
+---
+
+Refactor existing data sources into list specific datasources, clearing
+the way to add `TreeDataSource` in the `@sl-design-system/tree` package.
+
+- The base `DataSource` class has support for sorting and filtering
+- Grouping and pagination has been moved to the `ListDataSource` class
+- `ArrayDataSource` and `FetchDataSource` have been renamed to `ArrayListDataSource` and `FetchListDataSource` respectively

.changeset/yellow-islands-attack.md

@@ -0,0 +1,7 @@
+---
+'@sl-design-system/tree': patch
+---
+
+New tree component:
+- Added a new `<sl-tree>` component
+- Added `abstract` `TreeModel`, `FlatTreeModel` and `NestedTreeModel` classes

packages/components/checkbox/src/checkbox.ts

@@ -192,8 +192,15 @@ export class Checkbox<T = unknown> extends ObserveAttributesMixin(FormControlMix
       return;
     }
 
-    if (event.target instanceof HTMLLabelElement) {
+    const label = event.composedPath().find((el): el is HTMLLabelElement => el instanceof HTMLLabelElement);
+    if (label?.parentElement === this) {
       this.input.click();
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      // Return early to prevent the checkbox from being toggled twice
+      return;
     }
 
     event.stopPropagation();

packages/components/data-source/index.ts

@@ -1,3 +1,4 @@
-export * from './src/array-data-source.js';
+export * from './src/array-list-data-source.js';
 export * from './src/data-source.js';
-export * from './src/fetch-data-source.js';
+export * from './src/fetch-list-data-source.js';
+export * from './src/list-data-source.js';

packages/components/data-source/src/array-data-source.spec.ts → packages/components/data-source/src/array-list-data-source.spec.ts

@@ -1,14 +1,14 @@
 import { expect } from '@open-wc/testing';
 import { spy } from 'sinon';
-import { ArrayDataSource } from './array-data-source.js';
+import { ArrayListDataSource } from './array-list-data-source.js';
 import { type Person, people } from './data-source.spec.js';
 
-describe('ArrayDataSource', () => {
-  let ds: ArrayDataSource<Person>;
+describe('ArrayListDataSource', () => {
+  let ds: ArrayListDataSource<Person>;
 
   describe('basics', () => {
     beforeEach(() => {
-      ds = new ArrayDataSource(people);
+      ds = new ArrayListDataSource(people);
     });
 
     it('should have items', () => {
@@ -47,7 +47,7 @@ describe('ArrayDataSource', () => {
 
   describe('filtering', () => {
     beforeEach(() => {
-      ds = new ArrayDataSource(people);
+      ds = new ArrayListDataSource(people);
     });
 
     it('should filter by path', () => {
@@ -121,7 +121,7 @@ describe('ArrayDataSource', () => {
 
   describe('sorting', () => {
     beforeEach(() => {
-      ds = new ArrayDataSource(people);
+      ds = new ArrayListDataSource(people);
     });
 
     it('should sort by path', () => {
@@ -172,7 +172,7 @@ describe('ArrayDataSource', () => {
 
   describe('pagination', () => {
     beforeEach(() => {
-      ds = new ArrayDataSource(people, { pagination: true });
+      ds = new ArrayListDataSource(people, { pagination: true });
       ds.setPage(1);
       ds.setPageSize(3);
       ds.update();

packages/components/data-source/src/array-data-source.ts → packages/components/data-source/src/array-list-data-source.ts

@@ -1,13 +1,10 @@
 import { type PathKeys, getStringByPath, getValueByPath } from '@sl-design-system/shared';
 import {
-  DataSource,
   type DataSourceFilterByFunction,
   type DataSourceFilterByPath,
-  type DataSourceOptions,
   type DataSourceSortFunction
 } from './data-source.js';
-
-export type ArrayDataSourceOptions = DataSourceOptions;
+import { ListDataSource, type ListDataSourceOptions } from './list-data-source.js';
 
 /**
  * A data source that can be used to filter, group by, sort,
@@ -16,7 +13,7 @@ export type ArrayDataSourceOptions = DataSourceOptions;
  * to load any additional data.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export class ArrayDataSource<T = any> extends DataSource<T> {
+export class ArrayListDataSource<T = any> extends ListDataSource<T> {
   /**
    * The array of items after filtering, sorting, grouping and
    * pagination has been applied.
@@ -30,16 +27,11 @@ export class ArrayDataSource<T = any> extends DataSource<T> {
     return this.#filteredItems;
   }
 
-  set items(items: T[]) {
-    this.#items = items;
-    this.update();
-  }
-
   get size(): number {
     return this.#items.length;
   }
 
-  constructor(items: T[], options: ArrayDataSourceOptions = {}) {
+  constructor(items: T[], options: ListDataSourceOptions = {}) {
     super(options);
     this.#filteredItems = [...items];
     this.#items = [...items];

packages/components/data-source/src/data-source.spec.ts

@@ -1,5 +1,4 @@
 import { expect } from '@open-wc/testing';
-import { spy } from 'sinon';
 import { DataSource } from './data-source.js';
 
 // eslint-disable-next-line mocha/no-exports
@@ -116,23 +115,6 @@ describe('DataSource', () => {
     expect(ds.filters).to.be.empty;
   });
 
-  it('should not group by by default', () => {
-    expect(ds.groupBy).to.be.undefined;
-  });
-
-  it('should group by after setting one', () => {
-    ds.setGroupBy('profession');
-
-    expect(ds.groupBy).to.deep.equal({ path: 'profession', sorter: undefined, direction: undefined });
-  });
-
-  it('should not group by after removing it', () => {
-    ds.setGroupBy('profession');
-    ds.removeGroupBy();
-
-    expect(ds.groupBy).to.be.undefined;
-  });
-
   it('should not sort by default', () => {
     expect(ds.sort).to.be.undefined;
   });
@@ -149,15 +131,4 @@ describe('DataSource', () => {
 
     expect(ds.sort).to.be.undefined;
   });
-
-  it('should reorder items', () => {
-    spy(ds, 'update');
-
-    expect(ds.items.map(({ id }) => id)).to.deep.equal([1, 2, 3, 4, 5]);
-
-    ds.reorder(people[0], people[4], 'before');
-
-    expect(ds.items.map(({ id }) => id)).to.deep.equal([2, 3, 4, 1, 5]);
-    expect(ds.update).to.have.been.calledOnce;
-  });
 });