refactor(select): make selects events use Event rather than subclassi…

…ng it

PiperOrigin-RevId: 553583222

select/internal/select.ts

@@ -17,7 +17,7 @@ import {DEFAULT_TYPEAHEAD_BUFFER_TIME, Menu} from '../../menu/internal/menu.js';
 import {CloseMenuEvent, isElementInSubtree, isSelectableKey} from '../../menu/internal/shared.js';
 import {TYPEAHEAD_RECORD} from '../../menu/internal/typeaheadController.js';
 
-import {getSelectedItems, RequestDeselectionEvent, RequestSelectionEvent, SelectOption, SelectOptionRecord} from './shared.js';
+import {createRequestDeselectionEvent, createRequestSelectionEvent, getSelectedItems, SelectOption, SelectOptionRecord} from './shared.js';
 
 const VALUE = Symbol('value');
 
@@ -488,7 +488,8 @@ export abstract class Select extends LitElement {
    * Handles updating selection when an option element requests selection via
    * property / attribute change.
    */
-  private handleRequestSelection(event: RequestSelectionEvent) {
+  private handleRequestSelection(
+      event: ReturnType<typeof createRequestSelectionEvent>) {
     const requestingOptionEl = event.target as SelectOption & HTMLElement;
 
     // No-op if this item is already selected.
@@ -504,7 +505,8 @@ export abstract class Select extends LitElement {
    * Handles updating selection when an option element requests deselection via
    * property / attribute change.
    */
-  private handleRequestDeselection(event: RequestDeselectionEvent) {
+  private handleRequestDeselection(
+      event: ReturnType<typeof createRequestDeselectionEvent>) {
     const requestingOptionEl = event.target as SelectOption & HTMLElement;
 
     // No-op if this item is not even in the list of tracked selected items.

select/internal/selectoption/select-option.ts

@@ -8,15 +8,14 @@ import {PropertyValues} from 'lit';
 import {property} from 'lit/decorators.js';
 
 import {ListItemRole, MenuItemEl} from '../../../menu/internal/menuitem/menu-item.js';
-import {RequestDeselectionEvent, RequestSelectionEvent, SelectOption} from '../shared.js';
+import {createRequestDeselectionEvent, createRequestSelectionEvent, SelectOption} from '../shared.js';
 
 /**
- * @fires close-menu {CloseMenuEvent} Closes the encapsulating menu on
- * @fires request-selection {RequestSelectionEvent} Requests the parent
- * md-select to select this element (and deselect others if single-selection)
- * when `selected` changed to `true`.
- * @fires request-deselection {RequestDeselectionEvent} Requests the parent
- * md-select to deselect this element when `selected` changed to `false`.
+ * @fires close-menu Closes the encapsulating menu on
+ * @fires request-selection Requests the parent md-select to select this element
+ * (and deselect others if single-selection) when `selected` changed to `true`.
+ * @fires request-deselection Requests the parent md-select to deselect this
+ * element when `selected` changed to `false`.
  */
 export class SelectOptionEl extends MenuItemEl implements SelectOption {
   /**
@@ -60,9 +59,9 @@ export class SelectOptionEl extends MenuItemEl implements SelectOption {
       // handled by md-select because it needs to coordinate the
       // single-selection behavior.
       if (this.selected) {
-        this.dispatchEvent(new RequestSelectionEvent());
+        this.dispatchEvent(createRequestSelectionEvent());
       } else {
-        this.dispatchEvent(new RequestDeselectionEvent());
+        this.dispatchEvent(createRequestDeselectionEvent());
       }
     }
   }

select/internal/shared.ts

@@ -35,7 +35,7 @@ export type SelectOptionRecord = [SelectOption, number];
 /**
  * Given a list of select options, this function will return an array of
  * SelectOptionRecords that are selected.
- * 
+ *
  * @return An array of SelectOptionRecords describing the options that are
  * selected.
  */
@@ -53,21 +53,23 @@ export function getSelectedItems(items: SelectOption[]) {
 }
 
 /**
- * An event fired by a SelectOption to request selection from md-select.
+ * Creates an event fired by a SelectOption to request selection from md-select.
  * Typically fired after `selected` changes from `false` to `true`.
  */
-export class RequestSelectionEvent extends Event {
-  constructor() {
-    super('request-selection', {bubbles: true, composed: true});
-  }
+export function createRequestSelectionEvent() {
+  return new Event('request-selection', {
+    bubbles: true,
+    composed: true,
+  });
 }
 
 /**
- * An event fired by a SelectOption to request deselection from md-select.
- * Typically fired after `selected` changes from `true` to `false`.
+ * Creates an event fired by a SelectOption to request deselection from
+ * md-select. Typically fired after `selected` changes from `true` to `false`.
  */
-export class RequestDeselectionEvent extends Event {
-  constructor() {
-    super('request-deselection', {bubbles: true, composed: true});
-  }
+export function createRequestDeselectionEvent() {
+  return new Event('request-deselection', {
+    bubbles: true,
+    composed: true,
+  });
 }