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

This reverts commit 47a9c38.

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.ts';
+import * as ripple from '@material/ripple/index';
 import * as select from '@material/select/index';
 import * as selectionControl from '@material/selection-control/index.ts';
 import * as slider from '@material/slider/index';

packages/material-components-web/index.js

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

packages/mdc-dom/events.ts

@@ -26,6 +26,10 @@
  * 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);
@@ -44,7 +48,7 @@ function closest(element: Element, selector: string): Element | null {
 function matches(element: Element, selector: string): boolean {
   const nativeMatches = element.matches
       || element.webkitMatchesSelector
-      || element.msMatchesSelector;
+      || (element as MsElement).msMatchesSelector;
   return nativeMatches.call(element, selector);
 }
 

packages/mdc-dom/index.ts

@@ -21,6 +21,8 @@
  * THE SOFTWARE.
  */
 
+/* eslint no-unused-vars: [2, {"args": "none"}] */
+
 /**
  * Adapter for MDC Ripple. Provides an interface for managing
  * - classes
@@ -40,46 +42,75 @@
  * for more details.
  * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
  *
+ * @record
  */
-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;
+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() {}
 }
 
-export {MDCRippleAdapter as default, Point};
+export default MDCRippleAdapter;

packages/mdc-dom/ponyfill.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_FG_SCALE: '--mdc-ripple-fg-scale',
-  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',
+  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_TRANSLATE_END: '--mdc-ripple-fg-translate-end',
 };
 
 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
 };