feat(itemSelection): add support for items getter (#27)

Sometimes, we need to retrieve the item list dynamically rather than
from a constant array we passed at constructor time.

This adds support for passing a function as the items array (`() =>
T[]`).

For example:

```ts
let items = [];
new ItemSelectionController(this, items);

// re-assign items. this wouldn't affect the controller previously. it
// will still see the original array
items = [a, b];

// instead, we can do this:
new ItemSelectionController(this, () => items);
```

src/controllers/itemSelection.ts

@@ -15,19 +15,23 @@ export class ItemSelectionController<T> {
    * @return {T[]}
    */
   public get selectedItems(): T[] {
-    return this.__items.filter((_item, idx) => this.__selectedIndices.has(idx));
+    return this.items.filter((_item, idx) => this.__selectedIndices.has(idx));
   }
 
   /**
    * Gets the current set of items
    * @return {T[]}
    */
   public get items(): T[] {
+    if (this.__itemsGetter) {
+      return this.__itemsGetter();
+    }
     return this.__items;
   }
 
   private __selectedIndices: Set<number> = new Set<number>();
   private __items: T[] = [];
+  private __itemsGetter?: () => T[];
   private __host: ReactiveControllerHost;
   private __options?: ItemSelectionOptions<T>;
 
@@ -38,11 +42,15 @@ export class ItemSelectionController<T> {
    */
   public constructor(
     host: ReactiveControllerHost,
-    items: T[],
+    items: T[] | (() => T[]),
     options?: ItemSelectionOptions<T>
   ) {
     this.__host = host;
-    this.__items = items;
+    if (typeof items === 'function') {
+      this.__itemsGetter = items;
+    } else {
+      this.__items = items;
+    }
 
     if (options) {
       this.__options = options;
@@ -99,15 +107,16 @@ export class ItemSelectionController<T> {
     }
 
     const [currentSelection] = [...this.__selectedIndices];
+    const items = this.items;
     let newIndex = 0;
 
     if (currentSelection !== undefined) {
       newIndex = currentSelection + offset;
 
       if (newIndex < 0) {
         newIndex = 0;
-      } else if (newIndex >= this.__items.length) {
-        newIndex = this.__items.length - 1;
+      } else if (newIndex >= items.length) {
+        newIndex = items.length - 1;
       }
     }
 
@@ -142,7 +151,9 @@ export class ItemSelectionController<T> {
       throw new Error('selectAll() cannot be used when in single-select mode');
     }
 
-    for (const item of this.__items) {
+    const items = this.items;
+
+    for (const item of items) {
       this.select(item);
     }
   }
@@ -185,7 +196,9 @@ export class ItemSelectionController<T> {
       throw new Error('Index cannot be below 0');
     }
 
-    if (idx >= this.__items.length) {
+    const items = this.items;
+
+    if (idx >= items.length) {
       throw new Error('Index cannot be greater than size of items array');
     }
 
@@ -213,7 +226,7 @@ export class ItemSelectionController<T> {
    * @return {void}
    */
   public toggle(item: T, selected?: boolean): void {
-    const idx = this.__items.indexOf(item);
+    const idx = this.items.indexOf(item);
 
     if (idx === -1) {
       throw new Error('Item was not in items array');

src/test/controllers/itemSelection_test.ts

@@ -408,4 +408,18 @@ suite('ItemSelectionController', () => {
       assert.equal(element.shadowRoot!.textContent, 'Selected: b');
     });
   });
+
+  suite('with items function', () => {
+    setup(async () => {
+      const itemsFn = (): string[] => items;
+      controller = new ItemSelectionController<string>(element, itemsFn);
+      element.controllers.push(controller as ReactiveController);
+      document.body.appendChild(element);
+    });
+
+    test('initialises to default selection', () => {
+      assert.is(controller.selectedItems.length, 0);
+      assert.is(controller.items, items);
+    });
+  });
 });