Merge branch 'master' into chore/export-constants-index

LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2014-2018 Google, Inc.
+Copyright (c) 2014-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

docs/integrating-into-frameworks.md

@@ -43,7 +43,7 @@ The simple approach can be outlined as follows:
    `mdcComponent.destroy()` to clean up the MDC Web component.
 
 This general approach will work for almost all basic use-cases. For an example of this approach,
-check out [this plunk](https://plnkr.co/edit/b4v160c186ErrPG5vNza?p=preview) which
+check out [this plunk](https://plnkr.co/edit/qZl2frDGBT6Ro7jEMbjP?p=preview) which
 shows how to wrap our text field within an angular v1 component, as well as our button (with a
 ripple) within an attribute directive.
 

packages/mdc-button/_mixins.scss

@@ -105,7 +105,7 @@
 
   .mdc-button--outlined {
     @include mdc-button--outlined_($query);
-    @include mdc-button-outline-width(2px, $query: $query);
+    @include mdc-button-outline-width($mdc-button-outlined-border-width, $query: $query);
     @include mdc-button-outline-color(primary, $query);
   }
 

packages/mdc-button/_variables.scss

@@ -24,5 +24,6 @@ $mdc-button-height: 36px !default;
 $mdc-button-horizontal-padding: 8px !default;
 $mdc-button-contained-horizontal-padding: 16px !default;
 $mdc-dense-button-height: 32px !default;
+$mdc-button-outlined-border-width: 1px !default;
 
 $mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;

packages/mdc-checkbox/component.ts

@@ -23,8 +23,11 @@
 
 import {getCorrectEventName} from '@material/animation/util';
 import {MDCComponent} from '@material/base/component';
-import {ponyfill} from '@material/dom/index';
-import {MDCRipple, MDCRippleAdapter, MDCRippleCapableSurface, MDCRippleFoundation} from '@material/ripple/index';
+import {matches} from '@material/dom/ponyfill';
+import {MDCRippleAdapter} from '@material/ripple/adapter';
+import {MDCRipple} from '@material/ripple/component';
+import {MDCRippleFoundation} from '@material/ripple/foundation';
+import {MDCRippleCapableSurface} from '@material/ripple/types';
 import {MDCCheckboxAdapter} from './adapter';
 import {MDCCheckboxFoundation} from './foundation';
 
@@ -123,7 +126,7 @@ export class MDCCheckbox extends MDCComponent<MDCCheckboxFoundation> implements
     const adapter: MDCRippleAdapter = {
       ...MDCRipple.createAdapter(this),
       deregisterInteractionHandler: (evtType, handler) => this.nativeControl_.removeEventListener(evtType, handler),
-      isSurfaceActive: () => ponyfill.matches(this.nativeControl_, ':active'),
+      isSurfaceActive: () => matches(this.nativeControl_, ':active'),
       isUnbounded: () => true,
       registerInteractionHandler: (evtType, handler) => this.nativeControl_.addEventListener(evtType, handler),
     };

packages/mdc-checkbox/constants.ts

@@ -31,6 +31,7 @@ export const cssClasses = {
   CHECKED: 'mdc-checkbox--checked',
   DISABLED: 'mdc-checkbox--disabled',
   INDETERMINATE: 'mdc-checkbox--indeterminate',
+  SELECTED: 'mdc-checkbox--selected',
   UPGRADED: 'mdc-checkbox--upgraded',
 };
 

packages/mdc-checkbox/foundation.ts

@@ -117,6 +117,14 @@ export class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
 
     this.updateAriaChecked_();
 
+    const {TRANSITION_STATE_UNCHECKED} = strings;
+    const {SELECTED} = cssClasses;
+    if (newState === TRANSITION_STATE_UNCHECKED) {
+      this.adapter_.removeClass(SELECTED);
+    } else {
+      this.adapter_.addClass(SELECTED);
+    }
+
     // Check to ensure that there isn't a previously existing animation class, in case for example
     // the user interacted with the checkbox before the animation was finished.
     if (this.currentAnimationClass_.length > 0) {

packages/mdc-chips/chip-set/component.ts

@@ -22,8 +22,9 @@
  */
 
 import {MDCComponent} from '@material/base/component';
-import {MDCChip, MDCChipFactory, MDCChipFoundation} from '../chip/index';
-import {MDCChipInteractionEvent, MDCChipRemovalEvent, MDCChipSelectionEvent} from '../chip/index';
+import {MDCChip, MDCChipFactory} from '../chip/component';
+import {MDCChipFoundation} from '../chip/foundation';
+import {MDCChipInteractionEvent, MDCChipRemovalEvent, MDCChipSelectionEvent} from '../chip/types';
 import {MDCChipSetAdapter} from './adapter';
 import {MDCChipSetFoundation} from './foundation';
 

packages/mdc-chips/chip/component.ts

@@ -23,13 +23,10 @@
 
 import {MDCComponent} from '@material/base/component';
 import {SpecificEventListener} from '@material/base/types';
-import {
-  MDCRipple,
-  MDCRippleAdapter,
-  MDCRippleCapableSurface,
-  MDCRippleFactory,
-  MDCRippleFoundation,
-} from '@material/ripple/index';
+import {MDCRippleAdapter} from '@material/ripple/adapter';
+import {MDCRipple, MDCRippleFactory} from '@material/ripple/component';
+import {MDCRippleFoundation} from '@material/ripple/foundation';
+import {MDCRippleCapableSurface} from '@material/ripple/types';
 import {MDCChipAdapter} from './adapter';
 import {strings} from './constants';
 import {MDCChipFoundation} from './foundation';

packages/mdc-dialog/package.json

@@ -28,7 +28,7 @@
     "@material/shape": "^1.1.1",
     "@material/theme": "^1.1.0",
     "@material/typography": "^1.0.0",
-    "focus-trap": "^4.0.2",
+    "focus-trap": "^5.0.0",
     "tslib": "^1.9.3"
   },
   "publishConfig": {

packages/mdc-drawer/package.json

@@ -27,7 +27,7 @@
     "@material/shape": "^1.1.1",
     "@material/theme": "^1.1.0",
     "@material/typography": "^1.0.0",
-    "focus-trap": "^4.0.2",
+    "focus-trap": "^5.0.0",
     "tslib": "^1.9.3"
   }
 }

packages/mdc-list/README.md

@@ -544,6 +544,7 @@ Method Signature | Description
 `setCheckedCheckboxOrRadioAtIndex(index: number, isChecked: boolean) => void` | Sets the checked status of checkbox or radio at given list item index.
 `notifyAction(index: number) => void` | Notifies user action on list item including keyboard and mouse actions.
 `isFocusInsideList() => boolean` | Returns true if the current focused element is inside list root.
+`isRootFocused() => boolean` | Returns true if root element is focused.
 
 ### `MDCListFoundation`
 

packages/mdc-list/_mixins.scss

@@ -409,6 +409,10 @@
     margin: 0;
     padding: 8px 0;
     list-style-type: none;
+
+    &:focus {
+      outline: none;
+    }
   }
 
   @include mdc-list-item-primary-text-ink-color(text-primary-on-background, $query);

packages/mdc-list/adapter.ts

@@ -70,6 +70,11 @@ export interface MDCListAdapter {
    */
   isCheckboxCheckedAtIndex(index: number): boolean;
 
+  /**
+   * @return true if root element is focused.
+   */
+  isRootFocused(): boolean;
+
   /**
    * Sets the checked status of checkbox or radio at given list item index.
    */

packages/mdc-list/component.ts

@@ -23,7 +23,7 @@
 
 import {MDCComponent} from '@material/base/component';
 import {SpecificEventListener} from '@material/base/types';
-import {ponyfill} from '@material/dom/index';
+import {closest, matches} from '@material/dom/ponyfill';
 import {MDCListAdapter} from './adapter';
 import {cssClasses, strings} from './constants';
 import {MDCListFoundation} from './foundation';
@@ -164,6 +164,7 @@ export class MDCList extends MDCComponent<MDCListFoundation> {
       isFocusInsideList: () => {
         return this.root_.contains(document.activeElement);
       },
+      isRootFocused: () => document.activeElement === this.root_,
       notifyAction: (index) => {
         this.emit<MDCListActionEventDetail>(strings.ACTION_EVENT, {index}, /** shouldBubble */ true);
       },
@@ -204,10 +205,10 @@ export class MDCList extends MDCComponent<MDCListFoundation> {
    */
   private getListItemIndex_(evt: Event) {
     const eventTarget = evt.target as Element;
-    const nearestParent = ponyfill.closest(eventTarget, `.${cssClasses.LIST_ITEM_CLASS}, .${cssClasses.ROOT}`);
+    const nearestParent = closest(eventTarget, `.${cssClasses.LIST_ITEM_CLASS}, .${cssClasses.ROOT}`);
 
     // Get the index of the element if it is a list item.
-    if (nearestParent && ponyfill.matches(nearestParent, `.${cssClasses.LIST_ITEM_CLASS}`)) {
+    if (nearestParent && matches(nearestParent, `.${cssClasses.LIST_ITEM_CLASS}`)) {
       return this.listElements.indexOf(nearestParent);
     }
 
@@ -237,10 +238,7 @@ export class MDCList extends MDCComponent<MDCListFoundation> {
   private handleKeydownEvent_(evt: KeyboardEvent) {
     const index = this.getListItemIndex_(evt);
     const target = evt.target as Element;
-
-    if (index >= 0) {
-      this.foundation_.handleKeydown(evt, target.classList.contains(cssClasses.LIST_ITEM_CLASS), index);
-    }
+    this.foundation_.handleKeydown(evt, target.classList.contains(cssClasses.LIST_ITEM_CLASS), index);
   }
 
   /**
@@ -251,7 +249,7 @@ export class MDCList extends MDCComponent<MDCListFoundation> {
     const target = evt.target as Element;
 
     // Toggle the checkbox only if it's not the target of the event, or the checkbox will have 2 change events.
-    const toggleCheckbox = !ponyfill.matches(target, strings.CHECKBOX_RADIO_SELECTOR);
+    const toggleCheckbox = !matches(target, strings.CHECKBOX_RADIO_SELECTOR);
     this.foundation_.handleClick(index, toggleCheckbox);
   }
 }

packages/mdc-list/foundation.ts

@@ -56,6 +56,7 @@ export class MDCListFoundation extends MDCFoundation<MDCListAdapter> {
       hasRadioAtIndex: () => false,
       isCheckboxCheckedAtIndex: () => false,
       isFocusInsideList: () => false,
+      isRootFocused: () => false,
       notifyAction: () => undefined,
       removeClassForElementIndex: () => undefined,
       setAttributeForElementIndex: () => undefined,
@@ -168,18 +169,29 @@ export class MDCListFoundation extends MDCFoundation<MDCListAdapter> {
    * Key handler for the list.
    */
   handleKeydown(evt: KeyboardEvent, isRootListItem: boolean, listItemIndex: number) {
-    const arrowLeft = evt.key === 'ArrowLeft' || evt.keyCode === 37;
-    const arrowUp = evt.key === 'ArrowUp' || evt.keyCode === 38;
-    const arrowRight = evt.key === 'ArrowRight' || evt.keyCode === 39;
-    const arrowDown = evt.key === 'ArrowDown' || evt.keyCode === 40;
+    const isArrowLeft = evt.key === 'ArrowLeft' || evt.keyCode === 37;
+    const isArrowUp = evt.key === 'ArrowUp' || evt.keyCode === 38;
+    const isArrowRight = evt.key === 'ArrowRight' || evt.keyCode === 39;
+    const isArrowDown = evt.key === 'ArrowDown' || evt.keyCode === 40;
     const isHome = evt.key === 'Home' || evt.keyCode === 36;
     const isEnd = evt.key === 'End' || evt.keyCode === 35;
     const isEnter = evt.key === 'Enter' || evt.keyCode === 13;
     const isSpace = evt.key === 'Space' || evt.keyCode === 32;
 
+    if (this.adapter_.isRootFocused()) {
+      if (isArrowUp || isEnd) {
+        evt.preventDefault();
+        this.focusLastElement();
+      } else if (isArrowDown || isHome) {
+        evt.preventDefault();
+        this.focusFirstElement();
+      }
+
+      return;
+    }
+
     let currentIndex = this.adapter_.getFocusedElementIndex();
-    let nextIndex = numbers.UNSET_INDEX;
-    if (currentIndex === numbers.UNSET_INDEX) {
+    if (currentIndex === -1) {
       currentIndex = listItemIndex;
       if (currentIndex < 0) {
         // If this event doesn't have a mdc-list-item ancestor from the
@@ -188,10 +200,11 @@ export class MDCListFoundation extends MDCFoundation<MDCListAdapter> {
       }
     }
 
-    if ((this.isVertical_ && arrowDown) || (!this.isVertical_ && arrowRight)) {
+    let nextIndex;
+    if ((this.isVertical_ && isArrowDown) || (!this.isVertical_ && isArrowRight)) {
       this.preventDefaultEvent_(evt);
       nextIndex = this.focusNextElement(currentIndex);
-    } else if ((this.isVertical_ && arrowUp) || (!this.isVertical_ && arrowLeft)) {
+    } else if ((this.isVertical_ && isArrowUp) || (!this.isVertical_ && isArrowLeft)) {
       this.preventDefaultEvent_(evt);
       nextIndex = this.focusPrevElement(currentIndex);
     } else if (isHome) {
@@ -219,7 +232,7 @@ export class MDCListFoundation extends MDCFoundation<MDCListAdapter> {
 
     this.focusedItemIndex_ = currentIndex;
 
-    if (nextIndex >= 0) {
+    if (nextIndex !== undefined) {
       this.setTabindexAtIndex_(nextIndex);
       this.focusedItemIndex_ = nextIndex;
     }