fix: Don't import * from focus-trap to avoid default export confusion (…

…#4485)

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "build": "npm run clean && mkdirp build && webpack --progress --colors",
-    "build:esmodules": "tsc --project ./tsconfig.json --module esnext",
+    "build:esmodules": "tsc --project ./tsconfig.json --module esnext --importHelpers",
     "build:demos": "npm run clean && mkdirp build && webpack --config=demos/webpack.config.js --progress --colors",
     "build:min": "mkdirp build && cross-env MDC_ENV=production webpack -p --progress --colors",
     "changelog": "standard-changelog -i CHANGELOG.md -k packages/material-components-web/package.json",

packages/mdc-dialog/component.ts

@@ -25,7 +25,7 @@ import {MDCComponent} from '@material/base/component';
 import {SpecificEventListener} from '@material/base/types';
 import {closest, matches} from '@material/dom/ponyfill';
 import {MDCRipple} from '@material/ripple/component';
-import * as FocusTrapLib from 'focus-trap';
+import {FocusTrap} from 'focus-trap';
 import {MDCDialogAdapter} from './adapter';
 import {MDCDialogFoundation} from './foundation';
 import {MDCDialogCloseEventDetail} from './types';
@@ -74,7 +74,7 @@ export class MDCDialog extends MDCComponent<MDCDialogFoundation> {
   private defaultButton_!: HTMLElement | null; // assigned in initialize()
   private initialFocusEl_?: HTMLElement; // assigned in initialize()
 
-  private focusTrap_!: FocusTrapLib.FocusTrap; // assigned in initialSyncWithDOM()
+  private focusTrap_!: FocusTrap; // assigned in initialSyncWithDOM()
   private focusTrapFactory_?: MDCDialogFocusTrapFactory; // assigned in initialize()
 
   private handleInteraction_!: SpecificEventListener<'click' | 'keydown'>; // assigned in initialSyncWithDOM()

packages/mdc-dialog/util.ts

@@ -21,18 +21,18 @@
  * THE SOFTWARE.
  */
 
-import * as createFocusTrap from 'focus-trap';
+import {default as createFocusTrap, FocusTarget, FocusTrap, Options} from 'focus-trap';
 
 export type MDCDialogFocusTrapFactory = (
     element: HTMLElement | string,
-    userOptions?: createFocusTrap.Options,
-) => createFocusTrap.FocusTrap;
+    userOptions?: Options,
+) => FocusTrap;
 
 export function createFocusTrapInstance(
     surfaceEl: HTMLElement,
     focusTrapFactory: MDCDialogFocusTrapFactory = createFocusTrap as unknown as MDCDialogFocusTrapFactory,
-    initialFocusEl?: createFocusTrap.FocusTarget,
-): createFocusTrap.FocusTrap {
+    initialFocusEl?: FocusTarget,
+): FocusTrap {
   return focusTrapFactory(surfaceEl, {
     clickOutsideDeactivates: true, // Allow handling of scrim clicks.
     escapeDeactivates: false, // Foundation handles ESC key.

packages/mdc-drawer/component.ts

@@ -25,7 +25,7 @@ import {MDCComponent} from '@material/base/component';
 import {SpecificEventListener} from '@material/base/types';
 import {MDCList, MDCListFactory} from '@material/list/component';
 import {MDCListFoundation} from '@material/list/foundation';
-import * as createFocusTrap from 'focus-trap';
+import {default as createFocusTrap, FocusTrap} from 'focus-trap';
 import {MDCDrawerAdapter} from './adapter';
 import {MDCDismissibleDrawerFoundation} from './dismissible/foundation';
 import {MDCModalDrawerFoundation} from './modal/foundation';
@@ -61,7 +61,7 @@ export class MDCDrawer extends MDCComponent<MDCDismissibleDrawerFoundation> {
   private scrim_!: HTMLElement | null; // assigned in initialSyncWithDOM()
   private list_?: MDCList; // assigned in initialize()
 
-  private focusTrap_?: createFocusTrap.FocusTrap; // assigned in initialSyncWithDOM()
+  private focusTrap_?: FocusTrap; // assigned in initialSyncWithDOM()
   private focusTrapFactory_!: MDCDrawerFocusTrapFactory; // assigned in initialize()
 
   private handleScrimClick_?: SpecificEventListener<'click'>; // initialized in initialSyncWithDOM()

packages/mdc-drawer/util.ts

@@ -21,17 +21,17 @@
  * THE SOFTWARE.
  */
 
-import * as createFocusTrap from 'focus-trap';
+import {default as createFocusTrap, FocusTrap, Options} from 'focus-trap';
 
 export type MDCDrawerFocusTrapFactory = (
     element: HTMLElement | string,
-    userOptions?: createFocusTrap.Options,
-) => createFocusTrap.FocusTrap;
+    userOptions?: Options,
+) => FocusTrap;
 
 export function createFocusTrapInstance(
     surfaceEl: HTMLElement,
     focusTrapFactory: MDCDrawerFocusTrapFactory = createFocusTrap as unknown as MDCDrawerFocusTrapFactory,
-): createFocusTrap.FocusTrap {
+): FocusTrap {
   return focusTrapFactory(surfaceEl, {
     clickOutsideDeactivates: true, // Allow handling of scrim clicks.
     escapeDeactivates: false, // Foundation handles ESC key.

scripts/lint-mdc.ts

@@ -36,7 +36,7 @@ import * as babelParser from '@babel/parser';
 import babelTraverse from '@babel/traverse';
 import {NodePath} from '@babel/traverse';
 import * as babelTypes from '@babel/types';
-import * as colors from 'colors/safe';
+import colors from 'colors/safe';
 import * as fs from 'fs';
 import * as glob from 'glob';
 import * as path from 'path';

tsconfig.json

@@ -3,8 +3,8 @@
     "declaration": true,
     "downlevelIteration": true,
     "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
     "experimentalDecorators": true,
-    "importHelpers": true,
     "lib": ["es5", "es6", "dom"],
     "moduleResolution": "node",
     "newLine": "lf",