Merge remote-tracking branch 'origin/feat/typescript' into feat/types…

…cript--auto-init

CHANGELOG.md

@@ -36,8 +36,8 @@
 
 * **text-field:** Helper text must now be nested within `mdc-text-field-helper-line` element. Wrappers must account for the new `character-counter` sub-component. See the Text Field documentation for examples and more information.
 * **menu:** Replaced menu's foundation methods `handleClick` and `handleSelection` with `handleItemAction` to handle list item action (i.e., list's custom event `MDCList:action`)
-* **list:** Introduced new adapter method `getAttributeForElementIndex` to determine if target list item has `href` attribute and removed `followHref` adapter API.
-* **chips:** Adds 3 new chips adapter methods: hasLeadingIcon, getRootBoundingClientRect, and getCheckmarkBoundingClientRect. Also adds a new foundation method: getDimensions.
+* **list:** Removed adapter method `followHref` and used native anchor element behaviour to follow href on <kbd>Enter</kbd> & click. Components that use MDC List should use its new custom event.
+* **chips:** Adds 3 new chips adapter methods: `hasLeadingIcon`, `getRootBoundingClientRect`, and `getCheckmarkBoundingClientRect`. Also adds a new foundation method: `getDimensions`.
 
 
 
@@ -76,8 +76,8 @@
 
 * **list:** Introduced new adapter `isFocusInsideList` for MDC List for improved accessibility.
 * **snackbar:** Snackbar's DOM and APIs have changed to match the latest design guidelines. See the Snackbar documentation for more information.
-* **button:** We recommend placing each button's text label within a mdc-button__label element. This does not immediately break existing MDC Button usage, but updating is recommended to future-proof against potential upcoming changes.
-* **tab:** MDCTabBar#getIndexOfTab(tab: MDCTab): boolean is now MDCTabBar#getIndexOfTabByID(id: string): boolean
+* **button:** We recommend placing each button's text label within a `mdc-button__label` element. This does not immediately break existing MDC Button usage, but updating is recommended to future-proof against potential upcoming changes.
+* **tab:** `MDCTabBar#getIndexOfTab(tab: MDCTab): number` is now `MDCTabBar#getIndexOfTabById(id: string): number`
 
 
 
@@ -134,8 +134,8 @@
 ### BREAKING CHANGES
 
 * **notched-outline:** The notched outline has been changed from using an SVG for the outline to using 3 div elements. This approach resolves initial rendering issues as well as inconsistencies between the different types of outlines. Please refer to the [Readme](./packages/mdc-notched-outline/README.md) or the [screenshot test pages](./test/screenshot/spec/mdc-textfield/classes) for details and examples.
-* **checkbox:** The component is now responsible for calling MDCCheckboxFoundation#handleChange when the checked and indeterminate properties change.
-* **list:** Replaced toggleCheckbox adapter method with setCheckedCheckboxOrRadioAtIndex and added 3 more new adapter methods for improved accessibility.
+* **checkbox:** The component is now responsible for calling `MDCCheckboxFoundation#handleChange` when the checked and indeterminate properties change.
+* **list:** Replaced toggleCheckbox adapter method with `setCheckedCheckboxOrRadioAtIndex` and added 3 more new adapter methods for improved accessibility.
 * **fab:** Fab now has 2 separate mixins - `mdc-fab-shape-radius` for regular / mini Fab variants & `mdc-fab-extended-shape-radius` for Extended FAB variant.
 
 

docs/framework-wrappers.md

@@ -6,7 +6,7 @@ Material Components for the web are architected to be adaptable to various major
   - [Material Web Components](https://github.com/material-components/material-components-web-components): MDC Web integration for Web Components (using [vanilla components](./integrating-into-frameworks.md#the-simple-approach-wrapping-mdc-web-vanilla-components))
   - Additional third-party integrations
     - [Preact Material Components](https://github.com/prateekbh/preact-material-components)
-    - [RMWC: React Material Web Components](https://github.com/jamesmfriedman/rmwc)
+    - [RMWC: React Material Web Components](https://github.com/jamesmfriedman/rmwc) (using [foundations/adapters](./integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters).)
     - [Angular MDC](https://github.com/trimox/angular-mdc-web)
     - [Blox Material](https://blox.src.zone/material): Angular Integration Library.
     - [Vue MDC Adapter](https://github.com/stasson/vue-mdc-adapter): MDC Web Integration for Vue.js (using [foundations/adapters](./integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters).)

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-button/_mixins.scss

@@ -171,16 +171,18 @@
 }
 
 @mixin mdc-button-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-button-height, $radius), $rtl-reflexive);
-  }
+  @include mdc-shape-radius(
+    mdc-shape-resolve-percentage-radius($mdc-button-height, $radius),
+    $rtl-reflexive,
+    $query: $query
+  );
 
   &.mdc-button--dense {
-    @include mdc-feature-targets($feat-structure) {
-      @include mdc-shape-radius(mdc-shape-resolve-percentage-radius($mdc-dense-button-height, $radius), $rtl-reflexive);
-    }
+    @include mdc-shape-radius(
+      mdc-shape-resolve-percentage-radius($mdc-dense-button-height, $radius),
+      $rtl-reflexive,
+      $query: $query
+    );
   }
 }
 

packages/mdc-card/_mixins.scss

@@ -291,11 +291,7 @@
 }
 
 @mixin mdc-card-shape-radius($radius, $rtl-reflexive: false, $query: mdc-feature-all()) {
-  $feat-structure: mdc-feature-create-target($query, structure);
-
-  @include mdc-feature-targets($feat-structure) {
-    @include mdc-shape-radius($radius, $rtl-reflexive);
-  }
+  @include mdc-shape-radius($radius, $rtl-reflexive, $query: $query);
 }
 
 @mixin mdc-card-media-aspect-ratio($x, $y, $query: mdc-feature-all()) {

packages/mdc-card/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@material/elevation": "^0.44.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/ripple": "^0.44.0",
     "@material/rtl": "^0.42.0",
     "@material/shape": "^0.43.0",

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,8 @@
   "dependencies": {
     "@material/animation": "^0.41.0",
     "@material/base": "^0.41.0",
+    "@material/dom": "^0.41.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/ripple": "^0.44.0",
     "@material/rtl": "^0.42.0",
     "@material/selection-control": "^0.44.0",

packages/mdc-chips/_mixins.scss

@@ -22,6 +22,7 @@
 
 @import "@material/elevation/mixins";
 @import "@material/ripple/mixins";
+@import "@material/rtl/mixins";
 @import "@material/theme/functions";
 @import "@material/theme/mixins";
 @import "@material/shape/mixins";
@@ -174,7 +175,10 @@
   $left: $mdc-chip-leading-icon-margin-left) {
   &.mdc-chip--selected .mdc-chip__checkmark,
   .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
-    margin: $top $right $bottom $left;
+    @include mdc-rtl-reflexive-property(margin, $left, $right);
+
+    margin-top: $top;
+    margin-bottom: $bottom;
   }
 }
 

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-elevation/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@material/animation": "^0.41.0",
+    "@material/feature-targeting": "^0.44.0",
     "@material/theme": "^0.43.0"
   }
 }

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);
+        }
+      },
     });
   }
 }