feat(menu-surface): Convert JS to TypeScript

packages/material-components-web/index.js

@@ -37,7 +37,7 @@ import * as linearProgress from '@material/linear-progress/index';
 import * as lineRipple from '@material/line-ripple/index';
 import * as list from '@material/list/index';
 import * as menu from '@material/menu/index';
-import * as menuSurface from '@material/menu-surface/index';
+import * as menuSurface from '@material/menu-surface/index.ts';
 import * as notchedOutline from '@material/notched-outline/index';
 import * as radio from '@material/radio/index';
 import * as ripple from '@material/ripple/index';

packages/mdc-menu-surface/README.md

@@ -152,8 +152,8 @@ Mixin | Description
 
 Constant Name | Description
 --- | ---
-`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.js](./constants.js).
-`AnchorMargin` | Margin values representing the distance from anchor point that the menu surface should be shown. See [foundation.js](./foundation.js).
+`Corner` | Enum for representing an element corner for positioning the menu-surface. See [constants.js](constants.ts).
+`AnchorMargin` | Margin values representing the distance from anchor point that the menu surface should be shown. See [foundation.js](foundation.ts).
 
 ## `MDCMenuSurface` Properties and Methods
 
@@ -216,7 +216,7 @@ Method Signature | Description
 
 Method Signature | Description
 --- | ---
-`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.js](./constants.js)
+`setAnchorCorner(corner: Corner) => void` | Sets the corner that the menu surface will be anchored to. See [constants.js](constants.ts)
 `setAnchorMargin(margin: AnchorMargin) => void` | Sets the distance from the anchor point that the menu surface should be shown.
 `setIsHoisted(isHoisted: boolean) => void` | Sets whether the menu surface has been hoisted to the body so that the offsets are calculated relative to the page and not the anchor.
 `setFixedPosition(isFixed: boolean) => void` | Sets whether the menu surface is using fixed positioning.

packages/mdc-menu-surface/adapter.ts

@@ -0,0 +1,131 @@
+/**
+ * @license
+ * Copyright 2018 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.
+ */
+
+/**
+ * Adapter for MDCMenuSurface. Provides an interface for managing
+ * - classes
+ * - dom
+ * - focus
+ * - position
+ * - dimensions
+ * - event handlers
+ *
+ * Additionally, provides type information for the adapter to the Closure
+ * compiler.
+ *
+ * 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.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
+ */
+interface MDCMenuSurfaceAdapter {
+  addClass(className: string): void;
+  removeClass(className: string): void;
+  hasClass(className: string): boolean;
+  hasAnchor(): boolean;
+
+  isElementInContainer(el: Element): boolean;
+  isFocused(): boolean;
+  isFirstElementFocused(): boolean;
+  isLastElementFocused(): boolean;
+  isRtl(): boolean;
+
+  getInnerDimensions(): MDCMenuSurfaceSize;
+  getAnchorDimensions(): MDCMenuSurfaceRect;
+  getWindowDimensions(): MDCMenuSurfaceSize;
+  getBodyDimensions(): MDCMenuSurfaceSize;
+  getWindowScroll(): MDCMenuSurfacePoint;
+  setPosition(position: MDCMenuSurfacePositionInput): void;
+  setMaxHeight(height: string): void;
+  setTransformOrigin(origin: string): void;
+
+  /** Saves the element that was focused before the menu surface was opened. */
+  saveFocus(): void;
+
+  /** Restores focus to the element that was focused before the menu surface was opened. */
+  restoreFocus(): void;
+
+  /** Focuses the first focusable element in the menu-surface. */
+  focusFirstElement(): void;
+
+  /** Focuses the first focusable element in the menu-surface. */
+  focusLastElement(): void;
+
+  /** Emits an event when the menu surface is closed. */
+  notifyClose(): void;
+
+  /** Emits an event when the menu surface is opened. */
+  notifyOpen(): void;
+}
+
+// TODO(acdvorak): Should properties be readonly?
+
+interface MDCMenuSurfacePositionInput {
+  /*readonly*/ top?: number | string;
+  /*readonly*/ right?: number | string;
+  /*readonly*/ bottom?: number | string;
+  /*readonly*/ left?: number | string;
+
+  // TODO(acdvorak): Remove this and find a better way than for...in with hasOwnProperty().
+  [key: string]: number | string;
+}
+
+interface MDCMenuSurfacePositionOutput {
+  /*readonly*/ top: number;
+  /*readonly*/ right: number;
+  /*readonly*/ bottom: number;
+  /*readonly*/ left: number;
+
+  // TODO(acdvorak): Remove this and find a better way than for...in with hasOwnProperty().
+  [key: string]: number;
+}
+
+interface MDCMenuSurfaceRect {
+  /*readonly*/ top: number;
+  /*readonly*/ right: number;
+  /*readonly*/ bottom: number;
+  /*readonly*/ left: number;
+  /*readonly*/ width: number;
+  /*readonly*/ height: number;
+  /*readonly*/ x?: number;
+  /*readonly*/ y?: number;
+}
+
+interface MDCMenuSurfaceSize {
+  /*readonly*/ width: number;
+  /*readonly*/ height: number;
+}
+
+interface MDCMenuSurfacePoint {
+  /*readonly*/ x: number;
+  /*readonly*/ y: number;
+}
+
+// TODO(acdvorak): Export with {} syntax in other component PRs
+export {
+  MDCMenuSurfaceAdapter,
+  MDCMenuSurfacePoint,
+  MDCMenuSurfacePositionInput,
+  MDCMenuSurfacePositionOutput,
+  MDCMenuSurfaceSize,
+};

packages/mdc-menu-surface/constants.js → packages/mdc-menu-surface/constants.ts

@@ -21,7 +21,8 @@
  * THE SOFTWARE.
  */
 
-/** @enum {string} */
+// tslint:disable:object-literal-sort-keys no-bitwise
+
 const cssClasses = {
   ANCHOR: 'mdc-menu-surface--anchor',
   ANIMATING_CLOSED: 'mdc-menu-surface--animating-closed',
@@ -31,55 +32,55 @@ const cssClasses = {
   ROOT: 'mdc-menu-surface',
 };
 
-/** @enum {string} */
 const strings = {
-  CLOSED_EVENT: 'MDCMenuSurface:closed',
   OPENED_EVENT: 'MDCMenuSurface:opened',
-  FOCUSABLE_ELEMENTS: 'button:not(:disabled), [href]:not([aria-disabled="true"]), input:not(:disabled), ' +
-  'select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"])',
+  CLOSED_EVENT: 'MDCMenuSurface:closed',
+  FOCUSABLE_ELEMENTS: [
+    'button:not(:disabled)', '[href]:not([aria-disabled="true"])', 'input:not(:disabled)',
+    'select:not(:disabled)', 'textarea:not(:disabled)', '[tabindex]:not([tabindex="-1"]):not([aria-disabled="true"])',
+  ].join(', '),
 };
 
-/** @enum {number} */
 const numbers = {
-  // Total duration of menu-surface open animation.
+  /** Total duration of menu-surface open animation. */
   TRANSITION_OPEN_DURATION: 120,
-  // Total duration of menu-surface close animation.
+
+  /** Total duration of menu-surface close animation. */
   TRANSITION_CLOSE_DURATION: 75,
-  // Margin left to the edge of the viewport when menu-surface is at maximum possible height.
+
+  /** Margin left to the edge of the viewport when menu-surface is at maximum possible height. */
   MARGIN_TO_EDGE: 32,
-  // Ratio of anchor width to menu-surface width for switching from corner positioning to center positioning.
+
+  /** Ratio of anchor width to menu-surface width for switching from corner positioning to center positioning. */
   ANCHOR_TO_MENU_SURFACE_WIDTH_RATIO: 0.67,
 };
 
 /**
  * Enum for bits in the {@see Corner) bitmap.
- * @enum {number}
  */
-const CornerBit = {
-  BOTTOM: 1,
-  CENTER: 2,
-  RIGHT: 4,
-  FLIP_RTL: 8,
-};
+enum CornerBit {
+  BOTTOM = 1,
+  CENTER = 2,
+  RIGHT = 4,
+  FLIP_RTL = 8,
+}
 
 /**
  * Enum for representing an element corner for positioning the menu-surface.
  *
  * The START constants map to LEFT if element directionality is left
  * to right and RIGHT if the directionality is right to left.
  * Likewise END maps to RIGHT or LEFT depending on the directionality.
- *
- * @enum {number}
  */
-const Corner = {
-  TOP_LEFT: 0,
-  TOP_RIGHT: CornerBit.RIGHT,
-  BOTTOM_LEFT: CornerBit.BOTTOM,
-  BOTTOM_RIGHT: CornerBit.BOTTOM | CornerBit.RIGHT,
-  TOP_START: CornerBit.FLIP_RTL,
-  TOP_END: CornerBit.FLIP_RTL | CornerBit.RIGHT,
-  BOTTOM_START: CornerBit.BOTTOM | CornerBit.FLIP_RTL,
-  BOTTOM_END: CornerBit.BOTTOM | CornerBit.RIGHT | CornerBit.FLIP_RTL,
-};
+enum Corner {
+  TOP_LEFT = 0,
+  TOP_RIGHT = CornerBit.RIGHT,
+  BOTTOM_LEFT = CornerBit.BOTTOM,
+  BOTTOM_RIGHT = CornerBit.BOTTOM | CornerBit.RIGHT,
+  TOP_START = CornerBit.FLIP_RTL,
+  TOP_END = CornerBit.FLIP_RTL | CornerBit.RIGHT,
+  BOTTOM_START = CornerBit.BOTTOM | CornerBit.FLIP_RTL,
+  BOTTOM_END = CornerBit.BOTTOM | CornerBit.RIGHT | CornerBit.FLIP_RTL,
+}
 
 export {cssClasses, strings, numbers, CornerBit, Corner};