feat(list): Added options list to M3 list

PiperOrigin-RevId: 467850791
material-components · Aug 16, 2022 · 74704d7 · 74704d7
1 parent 8720a77
commit 74704d7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/list/lib/list.ts b/list/lib/list.ts
@@ -10,7 +10,6 @@ import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators';
 import {ifDefined} from 'lit/directives/if-defined';
 
-import {ListItemInteractionEvent} from './listitem/constants';
 import {ListItem} from './listitem/list-item';
 
 const NAVIGATABLE_KEYS = {
@@ -58,7 +57,7 @@ export class List extends LitElement {
           aria-label="${ifDefined(this.ariaLabel)}"
           tabindex=${this.listTabIndex}
           role=${this.role}
-          @list-item-interaction=${this.handleItemInteraction}
+          @action=${this.handleAction}
           @keydown=${this.handleKeydown}
           >
         <slot></slot>
@@ -108,11 +107,7 @@ export class List extends LitElement {
     this.activeListItem?.activate();
   }
 
-  handleItemInteraction(event: ListItemInteractionEvent) {
-    if (event.detail.state.isSelected) {
-      // TODO: manage selection state.
-    }
-  }
+  protected handleAction(event: CustomEvent) {}
 
   activateFirstItem() {
     this.activeListItem = this.getFirstItem();

diff --git a/list/lib/listitem/list-item.ts b/list/lib/listitem/list-item.ts
@@ -15,13 +15,18 @@ import {ARIARole} from '@material/web/types/aria';
 import {html, TemplateResult} from 'lit';
 import {property, query, state} from 'lit/decorators';
 import {ClassInfo, classMap} from 'lit/directives/class-map';
+import {ifDefined} from 'lit/directives/if-defined';
 
 /** @soyCompatible */
 export class ListItem extends ActionElement {
   @ariaProperty  // tslint:disable-line:no-new-decorators
   @property({type: String, attribute: 'data-role', noAccessor: true})
   role: ARIARole = 'listitem';
 
+  @ariaProperty  // tslint:disable-line:no-new-decorators
+  @property({type: String, attribute: 'data-aria-selected', noAccessor: true})
+  override ariaSelected!: 'true'|'false';
+
   @property({type: String}) supportingText = '';
   @property({type: String}) multiLineSupportingText = '';
   @property({type: String}) trailingSupportingText = '';
@@ -38,6 +43,7 @@ export class ListItem extends ActionElement {
       <li
           tabindex=${this.itemTabIndex}
           role=${this.role}
+          aria-selected=${ifDefined(this.ariaSelected || undefined)}
           data-query-md3-list-item
           class="md3-list-item ${classMap(this.getRenderClasses())}"
           @pointerdown=${this.handlePointerDown}
@@ -202,6 +208,7 @@ export class ListItem extends ActionElement {
 
     e.preventDefault();
     // TODO(b/240124486): Replace with beginPress provided by action element.
+    super.endPress({cancelled: false, actionData: {item: this}});
     this.ripple.endPress();
   }
 

diff --git a/list/lib/listitem/option-list-item.ts b/list/lib/listitem/option-list-item.ts
@@ -11,11 +11,4 @@ import {ListItem} from './list-item';
 /** @soyCompatible */
 export class OptionListItem extends ListItem {
   override role: ARIARole = 'option';
-
-  override handleClick(e: MouseEvent) {
-    this.dispatchEvent(new CustomEvent(
-        'list-item-interaction',
-        {detail: {state: {isSelected: false}}, bubbles: true, composed: true}));
-    super.handleClick(e);
-  }
 }
diff --git a/list/lib/option-list.ts b/list/lib/option-list.ts
@@ -5,10 +5,27 @@
  */
 
 import {ARIARole} from '@material/web/types/aria';
+import {property} from 'lit/decorators';
 
 import {List} from './list';
+import {OptionListItem} from './listitem/option-list-item';
 
 /** @soyCompatible */
 export class OptionList extends List {
   override role: ARIARole = 'listbox';
+  override items: OptionListItem[] = [];
+
+  @property({type: String}) override listItemTagName = 'md-option-list-item';
+
+  override handleAction(event: CustomEvent) {
+    const selectedItem: OptionListItem = event.detail.item;
+
+    for (const item of this.items) {
+      if (item === selectedItem) {
+        item.ariaSelected = 'true';
+      } else {
+        item.ariaSelected = 'false';
+      }
+    }
+  }
 }