feat(select): Convert JS to TypeScript

packages/mdc-list/index.ts

@@ -135,7 +135,7 @@ class MDCList extends MDCComponent<MDCListFoundation> {
         }
       },
       focusItemAtIndex: (index) => {
-        const element = this.listElements[index] as HTMLElement | null;
+        const element = this.listElements[index] as HTMLElement | undefined;
         if (element) {
           element.focus();
         }

packages/mdc-select/foundation.ts

@@ -24,8 +24,8 @@
 import {MDCFoundation} from '@material/base/foundation';
 import {MDCSelectAdapter} from './adapter';
 import {cssClasses, numbers, strings} from './constants';
-import {MDCSelectHelperTextFoundation} from './helper-text/index';
-import {MDCSelectIconFoundation} from './icon/index';
+import {MDCSelectHelperTextFoundation} from './helper-text/foundation';
+import {MDCSelectIconFoundation} from './icon/foundation';
 import {FoundationMapType} from './types';
 
 class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {

packages/mdc-select/helper-text/index.ts

@@ -41,7 +41,7 @@ class MDCSelectHelperText extends MDCComponent<MDCSelectHelperTextFoundation> {
       hasClass: (className) => this.root_.classList.contains(className),
       setAttr: (attr, value) => this.root_.setAttribute(attr, value),
       removeAttr: (attr) => this.root_.removeAttribute(attr),
-      setContent: (content) => this.root_.textContent = content,
+      setContent: (content) => { this.root_.textContent = content; },
     });
     // tslint:enable:object-literal-sort-keys
   }

packages/mdc-select/icon/README.md

@@ -114,8 +114,8 @@ Method Signature | Description
 `setAttr(attr: string, value: string) => void` | Sets an attribute with a given value on the icon element.
 `removeAttr(attr: string) => void` | Removes an attribute from the icon element.
 `setContent(content: string) => void` | Sets the text content of the icon element.
-`registerInteractionHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener for a given event.
-`deregisterInteractionHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener for a given event.
+`registerInteractionHandler(evtType: string, handler: EventListener) => void` | Registers an event listener for a given event.
+`deregisterInteractionHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener for a given event.
 `notifyIconAction() => void` | Emits a custom event "MDCSelect:icon" denoting a user has clicked the icon, which bubbles to the top-level select element.
 
 ### `MDCSelectIconFoundation`

packages/mdc-select/icon/foundation.ts

@@ -22,11 +22,13 @@
  */
 
 import {MDCFoundation} from '@material/base/foundation';
-import {EventType} from '@material/base/index';
+import {SpecificEventListener} from '@material/base/types';
 import {MDCSelectIconAdapter} from './adapter';
 import {strings} from './constants';
 
-const CLICK_KEYDOWN_EVENTS: EventType[] = ['click', 'keydown'];
+type InteractionEventType = 'click' | 'keydown';
+
+const INTERACTION_EVENTS: InteractionEventType[] = ['click', 'keydown'];
 
 class MDCSelectIconFoundation extends MDCFoundation<MDCSelectIconAdapter> {
   static get strings() {
@@ -51,7 +53,9 @@ class MDCSelectIconFoundation extends MDCFoundation<MDCSelectIconAdapter> {
   }
 
   private savedTabIndex_: string | null = null;
-  private readonly interactionHandler_!: EventListener; // assigned in initialSyncWithDOM()
+
+  // assigned in initialSyncWithDOM()
+  private readonly interactionHandler_!: SpecificEventListener<InteractionEventType>;
 
   constructor(adapter?: Partial<MDCSelectIconAdapter>) {
     super({...MDCSelectIconFoundation.defaultAdapter, ...adapter});
@@ -62,13 +66,13 @@ class MDCSelectIconFoundation extends MDCFoundation<MDCSelectIconAdapter> {
   init() {
     this.savedTabIndex_ = this.adapter_.getAttr('tabindex');
 
-    CLICK_KEYDOWN_EVENTS.forEach((evtType) => {
+    INTERACTION_EVENTS.forEach((evtType) => {
       this.adapter_.registerInteractionHandler(evtType, this.interactionHandler_);
     });
   }
 
   destroy() {
-    CLICK_KEYDOWN_EVENTS.forEach((evtType) => {
+    INTERACTION_EVENTS.forEach((evtType) => {
       this.adapter_.deregisterInteractionHandler(evtType, this.interactionHandler_);
     });
   }
@@ -95,7 +99,7 @@ class MDCSelectIconFoundation extends MDCFoundation<MDCSelectIconAdapter> {
     this.adapter_.setContent(content);
   }
 
-  handleInteraction(evt: Event) {
+  handleInteraction(evt: MouseEvent | KeyboardEvent) {
     const isEnterKey = (evt as KeyboardEvent).key === 'Enter' || (evt as KeyboardEvent).keyCode === 13;
     if (evt.type === 'click' || isEnterKey) {
       this.adapter_.notifyIconAction();

packages/mdc-select/icon/index.ts

@@ -39,7 +39,7 @@ class MDCSelectIcon extends MDCComponent<MDCSelectIconFoundation> {
       getAttr: (attr) => this.root_.getAttribute(attr),
       setAttr: (attr, value) => this.root_.setAttribute(attr, value),
       removeAttr: (attr) => this.root_.removeAttribute(attr),
-      setContent: (content) => this.root_.textContent = content,
+      setContent: (content) => { this.root_.textContent = content; },
       registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
       deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
       notifyIconAction: () => this.emit(

packages/mdc-select/index.ts

@@ -61,7 +61,7 @@ class MDCSelect extends MDCComponent<MDCSelectFoundation> implements RippleCapab
   private selectedText_!: HTMLElement | null;
 
   private hiddenInput_!: HTMLInputElement | null;
-  private leadingIcon_!: MDCSelectIcon | null;
+  private leadingIcon_?: MDCSelectIcon;
   private helperText_!: MDCSelectHelperText | null;
   private menuElement_!: Element | null;
   private ripple!: MDCRipple | null;
@@ -78,103 +78,6 @@ class MDCSelect extends MDCComponent<MDCSelectFoundation> implements RippleCapab
   private handleMenuSelected_!: CustomEventListener<MenuItemEvent>; // assigned in initialize()
   private validationObserver_!: MutationObserver; // assigned in initialize()
 
-  get value(): string {
-    return this.foundation_.getValue();
-  }
-
-  set value(value: string) {
-    this.foundation_.setValue(value);
-  }
-
-  get selectedIndex(): number {
-    let selectedIndex = -1;
-    if (this.menuElement_ && this.menu_) {
-      const selectedEl = this.menuElement_.querySelector(strings.SELECTED_ITEM_SELECTOR)!;
-      selectedIndex = this.menu_.items.indexOf(selectedEl);
-    } else if (this.nativeControl_) {
-      selectedIndex = this.nativeControl_.selectedIndex;
-    }
-    return selectedIndex;
-  }
-
-  set selectedIndex(selectedIndex: number) {
-    this.foundation_.setSelectedIndex(selectedIndex);
-  }
-
-  get disabled(): boolean {
-    return this.root_.classList.contains(cssClasses.DISABLED) ||
-        (this.nativeControl_ ? this.nativeControl_.disabled : false);
-  }
-
-  set disabled(disabled: boolean) {
-    this.foundation_.setDisabled(disabled);
-  }
-
-  set leadingIconAriaLabel(label: string) {
-    this.foundation_.setLeadingIconAriaLabel(label);
-  }
-
-  /**
-   * Sets the text content of the leading icon.
-   */
-  set leadingIconContent(content: string) {
-    this.foundation_.setLeadingIconContent(content);
-  }
-
-  /**
-   * Sets the text content of the helper text.
-   */
-  set helperTextContent(content: string) {
-    this.foundation_.setHelperTextContent(content);
-  }
-
-  /**
-   * Sets the current invalid state of the select.
-   */
-  set valid(isValid: boolean) {
-    this.foundation_.setValid(isValid);
-  }
-
-  /**
-   * Checks if the select is in a valid state.
-   */
-  get valid(): boolean {
-    return this.foundation_.isValid();
-  }
-
-  /**
-   * Sets the control to the required state.
-   */
-  set required(isRequired: boolean) {
-    if (this.nativeControl_) {
-      this.nativeControl_.required = isRequired;
-    } else {
-      if (isRequired) {
-        this.selectedText_!.setAttribute('aria-required', isRequired.toString());
-      } else {
-        this.selectedText_!.removeAttribute('aria-required');
-      }
-    }
-  }
-
-  /**
-   * Returns whether the select is required.
-   */
-  get required(): boolean {
-    if (this.nativeControl_) {
-      return this.nativeControl_.required;
-    } else {
-      return this.selectedText_!.getAttribute('aria-required') === 'true';
-    }
-  }
-
-  /**
-   * Recomputes the outline SVG path for the outline element.
-   */
-  layout() {
-    this.foundation_.layout();
-  }
-
   initialize(
       labelFactory: LabelFactory = (el) => new MDCFloatingLabel(el),
       lineRippleFactory: LineRippleFactory = (el) => new MDCLineRipple(el),
@@ -336,14 +239,111 @@ class MDCSelect extends MDCComponent<MDCSelectFoundation> implements RippleCapab
     super.destroy();
   }
 
+  get value(): string {
+    return this.foundation_.getValue();
+  }
+
+  set value(value: string) {
+    this.foundation_.setValue(value);
+  }
+
+  get selectedIndex(): number {
+    let selectedIndex = -1;
+    if (this.menuElement_ && this.menu_) {
+      const selectedEl = this.menuElement_.querySelector(strings.SELECTED_ITEM_SELECTOR)!;
+      selectedIndex = this.menu_.items.indexOf(selectedEl);
+    } else if (this.nativeControl_) {
+      selectedIndex = this.nativeControl_.selectedIndex;
+    }
+    return selectedIndex;
+  }
+
+  set selectedIndex(selectedIndex: number) {
+    this.foundation_.setSelectedIndex(selectedIndex);
+  }
+
+  get disabled(): boolean {
+    return this.root_.classList.contains(cssClasses.DISABLED) ||
+      (this.nativeControl_ ? this.nativeControl_.disabled : false);
+  }
+
+  set disabled(disabled: boolean) {
+    this.foundation_.setDisabled(disabled);
+  }
+
+  set leadingIconAriaLabel(label: string) {
+    this.foundation_.setLeadingIconAriaLabel(label);
+  }
+
+  /**
+   * Sets the text content of the leading icon.
+   */
+  set leadingIconContent(content: string) {
+    this.foundation_.setLeadingIconContent(content);
+  }
+
+  /**
+   * Sets the text content of the helper text.
+   */
+  set helperTextContent(content: string) {
+    this.foundation_.setHelperTextContent(content);
+  }
+
+  /**
+   * Sets the current invalid state of the select.
+   */
+  set valid(isValid: boolean) {
+    this.foundation_.setValid(isValid);
+  }
+
+  /**
+   * Checks if the select is in a valid state.
+   */
+  get valid(): boolean {
+    return this.foundation_.isValid();
+  }
+
+  /**
+   * Sets the control to the required state.
+   */
+  set required(isRequired: boolean) {
+    if (this.nativeControl_) {
+      this.nativeControl_.required = isRequired;
+    } else {
+      if (isRequired) {
+        this.selectedText_!.setAttribute('aria-required', isRequired.toString());
+      } else {
+        this.selectedText_!.removeAttribute('aria-required');
+      }
+    }
+  }
+
+  /**
+   * Returns whether the select is required.
+   */
+  get required(): boolean {
+    if (this.nativeControl_) {
+      return this.nativeControl_.required;
+    } else {
+      return this.selectedText_!.getAttribute('aria-required') === 'true';
+    }
+  }
+
+  /**
+   * Recomputes the outline SVG path for the outline element.
+   */
+  layout() {
+    this.foundation_.layout();
+  }
+
   getDefaultFoundation(): MDCSelectFoundation {
     return new MDCSelectFoundation({
-          ...(this.nativeControl_ ? this.getNativeSelectAdapterMethods_() : this.getEnhancedSelectAdapterMethods_()),
-          ...this.getCommonAdapterMethods_(),
-          ...this.getOutlineAdapterMethods_(),
-          ...this.getLabelAdapterMethods_(),
-        },
-        this.getFoundationMap_(),
+        ...(this.nativeControl_ ? this.getNativeSelectAdapterMethods_() : this.getEnhancedSelectAdapterMethods_()),
+        ...this.getCommonAdapterMethods_(),
+        ...this.getOutlineAdapterMethods_(),
+        ...this.getLabelAdapterMethods_(),
+      },
+      this.getFoundationMap_(),
     );
   }