feat(chips): add single select filter chip set

PiperOrigin-RevId: 538842612

Author: asyncliz

chips/demo/demo.ts

@@ -17,6 +17,7 @@ const collection =
       new Knob('label', {defaultValue: '', ui: textInput()}),
       new Knob('elevated', {defaultValue: false, ui: boolInput()}),
       new Knob('disabled', {defaultValue: false, ui: boolInput()}),
+      new Knob('singleSelect', {defaultValue: false, ui: boolInput()}),
       new Knob('scrolling', {defaultValue: false, ui: boolInput()}),
     ]);
 

chips/demo/stories.ts

@@ -20,6 +20,7 @@ export interface StoryKnobs {
   label: string;
   elevated: boolean;
   disabled: boolean;
+  singleSelect: boolean;
   scrolling: boolean;
 }
 
@@ -89,10 +90,10 @@ const links: MaterialStoryInit<StoryKnobs> = {
 const filters: MaterialStoryInit<StoryKnobs> = {
   name: 'Filter chips',
   styles,
-  render({label, elevated, disabled, scrolling}) {
+  render({label, elevated, disabled, scrolling, singleSelect}) {
     const classes = {scrolling};
     return html`
-      <md-chip-set class=${classMap(classes)}>
+      <md-chip-set class=${classMap(classes)} ?single-select=${singleSelect}>
         <md-filter-chip
           label=${label || 'Filter chip'}
           ?disabled=${disabled}

chips/lib/chip-set.ts

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html, isServer, LitElement} from 'lit';
-import {queryAssignedElements} from 'lit/decorators.js';
+import {html, isServer, LitElement, PropertyValues} from 'lit';
+import {property, queryAssignedElements} from 'lit/decorators.js';
 
 import {Chip} from './chip.js';
 
@@ -15,9 +15,11 @@ import {Chip} from './chip.js';
 export class ChipSet extends LitElement {
   get chips() {
     return this.childElements.filter(
-        (child): child is MaybeMultiActionChip => child instanceof Chip);
+        (child): child is Chip => child instanceof Chip);
   }
 
+  @property({type: Boolean, attribute: 'single-select'}) singleSelect = false;
+
   @queryAssignedElements({flatten: true})
   private readonly childElements!: HTMLElement[];
 
@@ -26,6 +28,23 @@ export class ChipSet extends LitElement {
     if (!isServer) {
       this.addEventListener('focusin', this.updateTabIndices.bind(this));
       this.addEventListener('keydown', this.handleKeyDown.bind(this));
+      this.addEventListener('selected', this.handleSelected.bind(this));
+    }
+  }
+
+  protected override updated(changed: PropertyValues<this>) {
+    if (changed.has('singleSelect') && this.singleSelect) {
+      let hasSelectedChip = false;
+      for (const chip of this.chips as MaybeSelectableChip[]) {
+        if (chip.selected === true) {
+          if (!hasSelectedChip) {
+            hasSelectedChip = true;
+            continue;
+          }
+
+          chip.selected = false;
+        }
+      }
     }
   }
 
@@ -48,7 +67,7 @@ export class ChipSet extends LitElement {
     // Prevent default interactions, such as scrolling.
     event.preventDefault();
 
-    const {chips} = this;
+    const {chips} = this as {chips: MaybeMultiActionChip[]};
     // Don't try to select another chip if there aren't any.
     if (chips.length < 2) {
       return;
@@ -122,8 +141,26 @@ export class ChipSet extends LitElement {
       chips[0]?.removeAttribute('tabindex');
     }
   }
+
+  private handleSelected(event: Event) {
+    if (!this.singleSelect) {
+      return;
+    }
+
+    if ((event.target as MaybeSelectableChip).selected === true) {
+      for (const chip of this.chips as MaybeSelectableChip[]) {
+        if (chip !== event.target && chip.selected) {
+          chip.selected = false;
+        }
+      }
+    }
+  }
 }
 
 interface MaybeMultiActionChip extends Chip {
   focus(options?: FocusOptions&{trailing?: boolean}): void;
 }
+
+interface MaybeSelectableChip extends Chip {
+  selected?: boolean;
+}

chips/lib/filter-chip.ts

@@ -41,11 +41,10 @@ export class FilterChip extends MultiActionChip {
     });
   }
 
-  protected override updated(changedProperties: PropertyValues<FilterChip>) {
-    if (changedProperties.has('selected') &&
-        changedProperties.get('selected') !== undefined) {
+  protected override updated(changed: PropertyValues<this>) {
+    if (changed.has('selected') && changed.get('selected') !== undefined) {
       // Dispatch when `selected` changes, except for the first update.
-      this.dispatchEvent(new Event('change', {bubbles: true}));
+      this.dispatchEvent(new Event('selected', {bubbles: true}));
     }
   }
 

chips/lib/input-chip.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html, nothing} from 'lit';
+import {html, nothing, PropertyValues} from 'lit';
 import {property, query} from 'lit/decorators.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
@@ -52,6 +52,15 @@ export class InputChip extends MultiActionChip {
   @query('.trailing.action')
   protected readonly trailingAction!: HTMLElement|null;
 
+  protected override update(changed: PropertyValues<this>) {
+    if (changed.has('selected') && changed.get('selected') !== undefined) {
+      // Dispatch when `selected` changes, except for the first update.
+      this.dispatchEvent(new Event('selected', {bubbles: true}));
+    }
+
+    super.update(changed);
+  }
+
   protected override getContainerClasses() {
     return {
       ...super.getContainerClasses(),