feat(ripple): convert to ts (#4300)

Author: Matt Goo

package-lock.json

@@ -40,7 +40,7 @@ import * as menu from '@material/menu/index';
 import * as menuSurface from '@material/menu-surface/index';
 import * as notchedOutline from '@material/notched-outline/index';
 import * as radio from '@material/radio/index';
-import * as ripple from '@material/ripple/index';
+import * as ripple from '@material/ripple/index.ts';
 import * as select from '@material/select/index';
 import * as selectionControl from '@material/selection-control/index';
 import * as slider from '@material/slider/index';

packages/material-components-web/index.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+export type EventType = keyof GlobalEventHandlersEventMap;
+export type SpecificEventListener<K extends EventType> = (evt: GlobalEventHandlersEventMap[K]) => void;

packages/mdc-dom/events.ts

@@ -21,6 +21,7 @@
  * THE SOFTWARE.
  */
 
+import {EventType, SpecificEventListener} from './events';
 import * as ponyfill from './ponyfill';
 
-export {ponyfill};
+export {ponyfill, EventType, SpecificEventListener};

packages/mdc-dom/index.ts

@@ -26,10 +26,6 @@
  * This makes ponyfills safer than traditional polyfills, especially for libraries like MDC.
  */
 
-interface MsElement extends Element {
-  msMatchesSelector(selector: string): boolean;
-}
-
 function closest(element: Element, selector: string): Element | null {
   if (element.closest) {
     return element.closest(selector);
@@ -48,7 +44,7 @@ function closest(element: Element, selector: string): Element | null {
 function matches(element: Element, selector: string): boolean {
   const nativeMatches = element.matches
       || element.webkitMatchesSelector
-      || (element as MsElement).msMatchesSelector;
+      || element.msMatchesSelector;
   return nativeMatches.call(element, selector);
 }
 

packages/mdc-dom/ponyfill.ts

@@ -21,8 +21,6 @@
  * THE SOFTWARE.
  */
 
-/* eslint no-unused-vars: [2, {"args": "none"}] */
-
 /**
  * Adapter for MDC Ripple. Provides an interface for managing
  * - classes
@@ -42,75 +40,46 @@
  * for more details.
  * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
  *
- * @record
  */
-class MDCRippleAdapter {
-  /** @return {boolean} */
-  browserSupportsCssVars() {}
-
-  /** @return {boolean} */
-  isUnbounded() {}
-
-  /** @return {boolean} */
-  isSurfaceActive() {}
-
-  /** @return {boolean} */
-  isSurfaceDisabled() {}
-
-  /** @param {string} className */
-  addClass(className) {}
-
-  /** @param {string} className */
-  removeClass(className) {}
-
-  /** @param {!EventTarget} target */
-  containsEventTarget(target) {}
-
-  /**
-   * @param {string} evtType
-   * @param {!Function} handler
-   */
-  registerInteractionHandler(evtType, handler) {}
-
-  /**
-   * @param {string} evtType
-   * @param {!Function} handler
-   */
-  deregisterInteractionHandler(evtType, handler) {}
-
-  /**
-   * @param {string} evtType
-   * @param {!Function} handler
-   */
-  registerDocumentInteractionHandler(evtType, handler) {}
-
-  /**
-   * @param {string} evtType
-   * @param {!Function} handler
-   */
-  deregisterDocumentInteractionHandler(evtType, handler) {}
-
-  /**
-   * @param {!Function} handler
-   */
-  registerResizeHandler(handler) {}
-
-  /**
-   * @param {!Function} handler
-   */
-  deregisterResizeHandler(handler) {}
-
-  /**
-   * @param {string} varName
-   * @param {?number|string} value
-   */
-  updateCssVariable(varName, value) {}
-
-  /** @return {!ClientRect} */
-  computeBoundingRect() {}
-
-  /** @return {{x: number, y: number}} */
-  getWindowPageOffset() {}
+import {EventType, SpecificEventListener} from '@material/dom/index';
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface MDCRippleAdapter {
+  browserSupportsCssVars(): boolean;
+
+  isUnbounded(): boolean;
+
+  isSurfaceActive(): boolean;
+
+  isSurfaceDisabled(): boolean;
+
+  addClass(className: string): void;
+
+  removeClass(className: string): void;
+
+  containsEventTarget(target: EventTarget | null): boolean;
+
+  registerInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+
+  deregisterInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+
+  registerDocumentInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+
+  deregisterDocumentInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
+
+  registerResizeHandler(handler: SpecificEventListener<'resize'>): void;
+
+  deregisterResizeHandler(handler: SpecificEventListener<'resize'>): void;
+
+  updateCssVariable(varName: string, value: string|null): void;
+
+  computeBoundingRect(): ClientRect;
+
+  getWindowPageOffset(): Point;
 }
 
-export default MDCRippleAdapter;
+export {MDCRippleAdapter as default, Point};

packages/mdc-ripple/adapter.js renamed to packages/mdc-ripple/adapter.ts

@@ -25,27 +25,27 @@ const cssClasses = {
   // Ripple is a special case where the "root" component is really a "mixin" of sorts,
   // given that it's an 'upgrade' to an existing component. That being said it is the root
   // CSS class that all other CSS classes derive from.
-  ROOT: 'mdc-ripple-upgraded',
-  UNBOUNDED: 'mdc-ripple-upgraded--unbounded',
   BG_FOCUSED: 'mdc-ripple-upgraded--background-focused',
   FG_ACTIVATION: 'mdc-ripple-upgraded--foreground-activation',
   FG_DEACTIVATION: 'mdc-ripple-upgraded--foreground-deactivation',
+  ROOT: 'mdc-ripple-upgraded',
+  UNBOUNDED: 'mdc-ripple-upgraded--unbounded',
 };
 
 const strings = {
-  VAR_LEFT: '--mdc-ripple-left',
-  VAR_TOP: '--mdc-ripple-top',
-  VAR_FG_SIZE: '--mdc-ripple-fg-size',
   VAR_FG_SCALE: '--mdc-ripple-fg-scale',
-  VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
+  VAR_FG_SIZE: '--mdc-ripple-fg-size',
   VAR_FG_TRANSLATE_END: '--mdc-ripple-fg-translate-end',
+  VAR_FG_TRANSLATE_START: '--mdc-ripple-fg-translate-start',
+  VAR_LEFT: '--mdc-ripple-left',
+  VAR_TOP: '--mdc-ripple-top',
 };
 
 const numbers = {
-  PADDING: 10,
-  INITIAL_ORIGIN_SCALE: 0.6,
   DEACTIVATION_TIMEOUT_MS: 225, // Corresponds to $mdc-ripple-translate-duration (i.e. activation animation duration)
   FG_DEACTIVATION_MS: 150, // Corresponds to $mdc-ripple-fade-out-duration (i.e. deactivation animation duration)
+  INITIAL_ORIGIN_SCALE: 0.6,
+  PADDING: 10,
   TAP_DELAY_MS: 300, // Delay between touch and simulated mouse events on touch devices
 };