chore: Remove Object.assign from TS files (#4389)

Refs #4225

This PR improves consistency across TS files:

* Replaces `Object.assign()` with `{...spread}` operator
* Changes foundation constructor arg types to `Partial<MDCFooAdapter>`
* Uses `ponyfill.matches()` from `mdc-dom` instead of `getMatchesProperty()` from `mdc-ripple`
    - `getMatchesProperty()` still exists to avoid breaking backward compatibility, but it is no longer used in TS
* Standardizes naming: `evt`, `evtType`, and `<K extends EventType>`
* Always import `/index` (e.g., `@material/foo/index` instead of `@material/foo`)

packages/mdc-base/component.ts

@@ -51,6 +51,7 @@ class MDCComponent<FoundationType extends MDCFoundation> {
     this.initialSyncWithDOM();
   }
 
+  /* istanbul ignore next: method param only exists for typing purposes; it does not need to be unit tested */
   // tslint:disable-next-line:no-any a component can pass in anything it needs to initialize
   initialize(..._args: any[]) {
     // Subclasses can override this to do any additional setup work that would be considered part of a

packages/mdc-checkbox/foundation.ts

@@ -58,8 +58,8 @@ class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
   private animEndLatchTimer_ = 0;
   private enableAnimationEndHandler_ = false;
 
-  constructor(adapter: MDCCheckboxAdapter) {
-    super(Object.assign(MDCCheckboxFoundation.defaultAdapter, adapter));
+  constructor(adapter?: Partial<MDCCheckboxAdapter>) {
+    super({...MDCCheckboxFoundation.defaultAdapter, ...adapter});
   }
 
   init() {

packages/mdc-checkbox/index.ts

@@ -24,11 +24,11 @@
 import {getCorrectEventName} from '@material/animation/index';
 import {MDCComponent} from '@material/base/component';
 import {EventType, SpecificEventListener} from '@material/base/index';
-import {MDCRipple, MDCRippleFoundation, RippleCapableSurface, util} from '@material/ripple/index';
+import {ponyfill} from '@material/dom/index';
+import {MDCRipple, MDCRippleFoundation, RippleCapableSurface} from '@material/ripple/index';
 import {MDCSelectionControl} from '@material/selection-control/index';
 import {MDCCheckboxFoundation} from './foundation';
 
-const {getMatchesProperty} = util;
 const CB_PROTO_PROPS = ['checked', 'indeterminate'];
 
 class MDCCheckbox extends MDCComponent<MDCCheckboxFoundation> implements MDCSelectionControl, RippleCapableSurface {
@@ -87,18 +87,15 @@ class MDCCheckbox extends MDCComponent<MDCCheckboxFoundation> implements MDCSele
   }
 
   private initRipple_(): MDCRipple {
-    const MATCHES = getMatchesProperty(HTMLElement.prototype);
-    const adapter = Object.assign(MDCRipple.createAdapter(this), {
-      deregisterInteractionHandler:
-        <K extends EventType>(type: K, handler: SpecificEventListener<K>) =>
-          this.nativeCb_.removeEventListener(type, handler),
-      isSurfaceActive: () => this.nativeCb_[MATCHES as 'matches'](':active'),
+    const foundation = new MDCRippleFoundation({
+      ...MDCRipple.createAdapter(this),
+      deregisterInteractionHandler: <K extends EventType>(evtType: K, handler: SpecificEventListener<K>) =>
+          this.nativeCb_.removeEventListener(evtType, handler),
+      isSurfaceActive: () => ponyfill.matches(this.nativeCb_, ':active'),
       isUnbounded: () => true,
-      registerInteractionHandler:
-        <K extends EventType>(type: K, handler: SpecificEventListener<K>) =>
-          this.nativeCb_.addEventListener(type, handler),
+      registerInteractionHandler: <K extends EventType>(evtType: K, handler: SpecificEventListener<K>) =>
+          this.nativeCb_.addEventListener(evtType, handler),
     });
-    const foundation = new MDCRippleFoundation(adapter);
     return new MDCRipple(this.root_, foundation);
   }
 

packages/mdc-checkbox/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@material/animation": "^0.41.0",
     "@material/base": "^0.41.0",
+    "@material/dom": "^0.41.0",
     "@material/ripple": "^0.44.0",
     "@material/rtl": "^0.42.0",
     "@material/selection-control": "^0.44.0",

packages/mdc-chips/chip-set/foundation.ts

@@ -47,8 +47,8 @@ class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {
    */
   private selectedChipIds_: string[] = [];
 
-  constructor(adapter: MDCChipSetAdapter) {
-    super(Object.assign(MDCChipSetFoundation.defaultAdapter, adapter));
+  constructor(adapter?: Partial<MDCChipSetAdapter>) {
+    super({...MDCChipSetFoundation.defaultAdapter, ...adapter});
   }
 
   /**

packages/mdc-chips/chip/foundation.ts

@@ -68,8 +68,8 @@ class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
    */
   private shouldRemoveOnTrailingIconClick_ = true;
 
-  constructor(adapter: MDCChipAdapter) {
-    super(Object.assign(MDCChipFoundation.defaultAdapter, adapter));
+  constructor(adapter?: Partial<MDCChipAdapter>) {
+    super({...MDCChipFoundation.defaultAdapter, ...adapter});
   }
 
   isSelected() {
@@ -103,7 +103,7 @@ class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
       // The checkmark's width is initially set to 0, so use the checkmark's height as a proxy since the checkmark
       // should always be square.
       const width = rootRect.width + checkmarkRect.height;
-      return Object.assign({}, rootRect, {width});
+      return {...rootRect, width};
     } else {
       return rootRect;
     }
@@ -172,7 +172,6 @@ class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
   /**
    * Handles an interaction event on the trailing icon element. This is used to
    * prevent the ripple from activating on interaction with the trailing icon.
-   * @param {!Event} evt
    */
   handleTrailingIconInteraction(evt: MouseEvent | KeyboardEvent) {
     const isEnter = (evt as KeyboardEvent).key === 'Enter' || (evt as KeyboardEvent).keyCode === 13;

packages/mdc-chips/chip/index.ts

@@ -95,10 +95,10 @@ class MDCChip extends MDCComponent<MDCChipFoundation> implements RippleCapableSu
     this.trailingIcon_ = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR);
     this.checkmark_ = this.root_.querySelector(strings.CHECKMARK_SELECTOR);
 
-    const adapter = Object.assign(MDCRipple.createAdapter(this), {
+    this.ripple_ = rippleFactory(this.root_, new MDCRippleFoundation({
+      ...MDCRipple.createAdapter(this),
       computeBoundingRect: () => this.foundation_.getDimensions(),
-    });
-    this.ripple_ = rippleFactory(this.root_, new MDCRippleFoundation(adapter));
+    }));
   }
 
   initialSyncWithDOM() {

packages/mdc-dialog/adapter.ts

@@ -38,7 +38,7 @@ interface MDCDialogAdapter {
 
   isContentScrollable(): boolean;
   areButtonsStacked(): boolean;
-  getActionFromEvent(event: Event): string | null;
+  getActionFromEvent(evt: Event): string | null;
 
   trapFocus(): void;
   releaseFocus(): void;

packages/mdc-dialog/foundation.ts

@@ -69,8 +69,8 @@ class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {
   private autoStackButtons_ = true;
   private areButtonsStacked_ = false;
 
-  constructor(adapter: MDCDialogAdapter) {
-    super(Object.assign(MDCDialogFoundation.defaultAdapter, adapter));
+  constructor(adapter?: Partial<MDCDialogAdapter>) {
+    super({...MDCDialogFoundation.defaultAdapter, ...adapter});
   }
 
   init() {

packages/mdc-dialog/index.ts

@@ -110,11 +110,11 @@ class MDCDialog extends MDCComponent<MDCDialogFoundation> {
 
     const LAYOUT_EVENTS = ['resize', 'orientationchange'];
     this.handleOpening_ = () => {
-      LAYOUT_EVENTS.forEach((type) => window.addEventListener(type, this.handleLayout_));
+      LAYOUT_EVENTS.forEach((evtType) => window.addEventListener(evtType, this.handleLayout_));
       document.addEventListener('keydown', this.handleDocumentKeydown_);
     };
     this.handleClosing_ = () => {
-      LAYOUT_EVENTS.forEach((type) => window.removeEventListener(type, this.handleLayout_));
+      LAYOUT_EVENTS.forEach((evtType) => window.removeEventListener(evtType, this.handleLayout_));
       document.removeEventListener('keydown', this.handleDocumentKeydown_);
     };
 
@@ -154,11 +154,11 @@ class MDCDialog extends MDCComponent<MDCDialogFoundation> {
       areButtonsStacked: () => util.areTopsMisaligned(this.buttons_),
       clickDefaultButton: () => this.defaultButton_ && this.defaultButton_.click(),
       eventTargetMatches: (target, selector) => target ? matches(target as Element, selector) : false,
-      getActionFromEvent: (event: Event) => {
-        if (!event.target) {
+      getActionFromEvent: (evt: Event) => {
+        if (!evt.target) {
           return '';
         }
-        const element = closest(event.target as Element, `[${strings.ACTION_ATTRIBUTE}]`);
+        const element = closest(evt.target as Element, `[${strings.ACTION_ATTRIBUTE}]`);
         return element && element.getAttribute(strings.ACTION_ATTRIBUTE);
       },
       hasClass: (className) => this.root_.classList.contains(className),

packages/mdc-floating-label/adapter.ts

@@ -21,7 +21,7 @@
  * THE SOFTWARE.
  */
 
-import {EventType, SpecificEventListener} from '@material/base';
+import {EventType, SpecificEventListener} from '@material/base/index';
 
 /**
  * Defines the shape of the adapter expected by the foundation.
@@ -49,12 +49,12 @@ interface MDCFloatingLabelAdapter {
   /**
    * Registers an event listener on the root element for a given event.
    */
-  registerInteractionHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
+  registerInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
 
   /**
    * Deregisters an event listener on the root element for a given event.
    */
-  deregisterInteractionHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
+  deregisterInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
 }
 
 export {MDCFloatingLabelAdapter as default, MDCFloatingLabelAdapter};

packages/mdc-floating-label/foundation.ts

@@ -21,8 +21,8 @@
  * THE SOFTWARE.
  */
 
-import {SpecificEventListener} from '@material/base';
 import {MDCFoundation} from '@material/base/foundation';
+import {SpecificEventListener} from '@material/base/index';
 import {MDCFloatingLabelAdapter} from './adapter';
 import {cssClasses} from './constants';
 
@@ -48,7 +48,7 @@ class MDCFloatingLabelFoundation extends MDCFoundation<MDCFloatingLabelAdapter>
 
   private readonly shakeAnimationEndHandler_: SpecificEventListener<'animationend'>;
 
-  constructor(adapter: Partial<MDCFloatingLabelAdapter> = {}) {
+  constructor(adapter?: Partial<MDCFloatingLabelAdapter>) {
     super({...MDCFloatingLabelFoundation.defaultAdapter, ...adapter});
 
     this.shakeAnimationEndHandler_ = () => this.handleShakeAnimationEnd_();

packages/mdc-form-field/adapter.ts

@@ -21,11 +21,10 @@
  * THE SOFTWARE.
  */
 
+import {EventType, SpecificEventListener} from '@material/base/index';
+
 /**
- * Adapter for MDC Form Field. Provides an interface for managing
- * - event handlers
- * - ripple activation
- *
+ * Defines the shape of the adapter expected by the foundation.
  * Implement this adapter for your framework of choice to delegate updates to
  * the component in your framework of choice. See architecture documentation
  * for more details.
@@ -34,12 +33,8 @@
 interface MDCFormFieldAdapter {
   activateInputRipple(): void;
   deactivateInputRipple(): void;
-  deregisterInteractionHandler<K extends keyof GlobalEventHandlersEventMap>(
-    type: K, handler: (evt: GlobalEventHandlersEventMap[K],
-  ) => void): void;
-  registerInteractionHandler<K extends keyof GlobalEventHandlersEventMap>(
-    type: K, handler: (evt: GlobalEventHandlersEventMap[K],
-  ) => void): void;
+  deregisterInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+  registerInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
 }
 
 export {MDCFormFieldAdapter as default, MDCFormFieldAdapter};

packages/mdc-form-field/foundation.ts

@@ -43,12 +43,11 @@ class MDCFormFieldFoundation extends MDCFoundation<MDCFormFieldAdapter> {
     };
   }
 
-  private clickHandler_: () => void;
+  private readonly clickHandler_: () => void;
 
-  constructor(adapter: MDCFormFieldAdapter) {
-    super(Object.assign(MDCFormFieldFoundation.defaultAdapter, adapter));
+  constructor(adapter?: Partial<MDCFormFieldAdapter>) {
+    super({...MDCFormFieldFoundation.defaultAdapter, ...adapter});
 
-    /** @private {!EventListener} */
     this.clickHandler_ = () => this.handleClick_();
   }
 

packages/mdc-form-field/index.ts

@@ -57,8 +57,16 @@ class MDCFormField extends MDCComponent<MDCFormFieldFoundation> {
           this.input_.ripple.deactivate();
         }
       },
-      deregisterInteractionHandler: (type, handler) => this.label_ && this.label_.removeEventListener(type, handler),
-      registerInteractionHandler: (type, handler) => this.label_ && this.label_.addEventListener(type, handler),
+      deregisterInteractionHandler: (evtType, handler) => {
+        if (this.label_) {
+          this.label_.removeEventListener(evtType, handler);
+        }
+      },
+      registerInteractionHandler: (evtType, handler) => {
+        if (this.label_) {
+          this.label_.addEventListener(evtType, handler);
+        }
+      },
     });
   }
 }

packages/mdc-grid-list/foundation.ts

@@ -44,8 +44,10 @@ class MDCGridListFoundation extends MDCFoundation<MDCGridListAdapter> {
   private readonly resizeHandler_: EventListener;
   private resizeFrame_ = 0;
 
-  constructor(adapter: MDCGridListAdapter) {
-    super(Object.assign(MDCGridListFoundation.defaultAdapter, adapter));
+  /* istanbul ignore next: optional argument is not a branch statement */
+  constructor(adapter?: Partial<MDCGridListAdapter>) {
+    super({...MDCGridListFoundation.defaultAdapter, ...adapter});
+
     this.resizeHandler_ = this.alignCenter.bind(this);
   }
 

packages/mdc-icon-button/foundation.ts

@@ -44,8 +44,8 @@ class MDCIconButtonToggleFoundation extends MDCFoundation<MDCIconButtonToggleAda
     };
   }
 
-  constructor(adapter: MDCIconButtonToggleAdapter) {
-    super(Object.assign(MDCIconButtonToggleFoundation.defaultAdapter, adapter));
+  constructor(adapter?: Partial<MDCIconButtonToggleAdapter>) {
+    super({...MDCIconButtonToggleFoundation.defaultAdapter, ...adapter});
   }
 
   init() {

packages/mdc-line-ripple/adapter.ts

@@ -51,12 +51,12 @@ interface MDCLineRippleAdapter {
   /**
    * Registers an event listener on the line ripple element for a given event.
    */
-  registerEventHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
+  registerEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
 
   /**
    * Deregisters an event listener on the line ripple element for a given event.
    */
-  deregisterEventHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
+  deregisterEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
 }
 
 export {MDCLineRippleAdapter as default, MDCLineRippleAdapter};

packages/mdc-line-ripple/foundation.ts

@@ -21,8 +21,8 @@
  * THE SOFTWARE.
  */
 
-import {SpecificEventListener} from '@material/base';
 import {MDCFoundation} from '@material/base/foundation';
+import {SpecificEventListener} from '@material/base/index';
 import {MDCLineRippleAdapter} from './adapter';
 import {cssClasses} from './constants';
 
@@ -49,7 +49,7 @@ class MDCLineRippleFoundation extends MDCFoundation<MDCLineRippleAdapter> {
 
   private readonly transitionEndHandler_: SpecificEventListener<'transitionend'>;
 
-  constructor(adapter: Partial<MDCLineRippleAdapter> = {}) {
+  constructor(adapter?: Partial<MDCLineRippleAdapter>) {
     super({...MDCLineRippleFoundation.defaultAdapter, ...adapter});
 
     this.transitionEndHandler_ = (evt) => this.handleTransitionEnd(evt);

packages/mdc-list/foundation.ts

@@ -69,8 +69,8 @@ class MDCListFoundation extends MDCFoundation<MDCListAdapter> {
   private isCheckboxList_ = false;
   private isRadioList_ = false;
 
-  constructor(adapter: MDCListAdapter) {
-    super(Object.assign(MDCListFoundation.defaultAdapter, adapter));
+  constructor(adapter?: Partial<MDCListAdapter>) {
+    super({...MDCListFoundation.defaultAdapter, ...adapter});
   }
 
   layout() {

packages/mdc-list/index.ts

@@ -23,7 +23,7 @@
 
 import {MDCComponent} from '@material/base/component';
 import {SpecificEventListener} from '@material/base/index';
-import * as ponyfill from '@material/dom/ponyfill';
+import {ponyfill} from '@material/dom/index';
 import {cssClasses, strings} from './constants';
 import {MDCListFoundation} from './foundation';
 import {ListActionEventDetail, ListIndex} from './types';

packages/mdc-menu-surface/foundation.ts

@@ -105,8 +105,8 @@ class MDCMenuSurfaceFoundation extends MDCFoundation<MDCMenuSurfaceAdapter> {
   private dimensions_!: MenuDimensions; // assigned in open()
   private measurements_!: AutoLayoutMeasurements; // assigned in open()
 
-  constructor(adapter: MDCMenuSurfaceAdapter) {
-    super(Object.assign(MDCMenuSurfaceFoundation.defaultAdapter, adapter));
+  constructor(adapter?: Partial<MDCMenuSurfaceAdapter>) {
+    super({...MDCMenuSurfaceFoundation.defaultAdapter, ...adapter});
   }
 
   init() {

packages/mdc-menu-surface/index.ts

@@ -132,7 +132,9 @@ class MDCMenuSurface extends MDCComponent<MDCMenuSurfaceFoundation> {
     this.setIsHoisted(true);
   }
 
-  /** @param corner Default anchor corner alignment of top-left surface corner. */
+  /**
+   * @param corner Default anchor corner alignment of top-left surface corner.
+   */
   setAnchorCorner(corner: Corner) {
     this.foundation_.setAnchorCorner(corner);
   }

packages/mdc-menu/foundation.ts

@@ -58,8 +58,8 @@ class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
     // tslint:enable:object-literal-sort-keys
   }
 
-  constructor(adapter: MDCMenuAdapter) {
-    super(Object.assign(MDCMenuFoundation.defaultAdapter, adapter));
+  constructor(adapter?: Partial<MDCMenuAdapter>) {
+    super({...MDCMenuFoundation.defaultAdapter, ...adapter});
   }
 
   destroy() {

packages/mdc-notched-outline/foundation.ts

@@ -52,7 +52,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation<MDCNotchedOutlineAdapter
     // tslint:enable:object-literal-sort-keys
   }
 
-  constructor(adapter: Partial<MDCNotchedOutlineAdapter> = {}) {
+  constructor(adapter?: Partial<MDCNotchedOutlineAdapter>) {
     super({...MDCNotchedOutlineFoundation.defaultAdapter, ...adapter});
   }