Upgrade material-components-web to v2.0

.gitignore

@@ -3,3 +3,5 @@ node_modules/
 yarn-error.log
 reports/
 dist/
+.idea/
+yarn.lock

components/list/List.vue

@@ -76,6 +76,8 @@ export default {
       this.mdcList.singleSelection = this.singleSelection
       this.mdcList.wrapFocus = this.wrapFocus
       this.mdcList.vertical = this.vertical
+    } else {
+      this.$el.setAttribute('tabindex', '0')
     }
   },
   beforeDestroy () {

components/menu/Menu.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :tabindex="mdcMenu ? (mdcMenu.open ? 0 : -1) : (open ? 0 : -1)"
+    :tabindex="tabIndex"
     class="mdc-menu mdc-menu-surface"
     @MDCMenu:selected="onSelect"
   >
@@ -10,6 +10,7 @@
 
 <script>
 import { Corner, MDCMenu } from '@material/menu'
+import { DefaultFocusState } from '@material/menu/constants'
 
 import { baseComponentMixin, themeClassMixin } from '../base'
 
@@ -34,11 +35,15 @@ export default {
     },
     absolutePositionX: {
       type: Number,
-      default: -1
+      default: null
     },
     absolutePositionY: {
       type: Number,
-      default: -1
+      default: null
+    },
+    hoistToBody: {
+      type: Boolean,
+      default: false
     },
     fixed: {
       type: Boolean,
@@ -47,6 +52,10 @@ export default {
     wrapFocus: {
       type: Boolean,
       default: true
+    },
+    defaultFocusState: {
+      type: [Number, String],
+      default: null
     }
   },
   data () {
@@ -63,6 +72,32 @@ export default {
       set (value) {
         this.$emit('change', value)
       }
+    },
+    focusState () {
+      if (!this.defaultFocusState) return null
+
+      const upperCaseFocusState = String(this.defaultFocusState).toUpperCase()
+      if (isNaN(this.defaultFocusState) &&
+        DefaultFocusState.hasOwnProperty(upperCaseFocusState)
+      ) {
+        return DefaultFocusState[upperCaseFocusState]
+      }
+
+      const numberFocusState = Number(this.defaultFocusState)
+      if (!isNaN(this.defaultFocusState) &&
+        DefaultFocusState.hasOwnProperty(numberFocusState)
+      ) {
+        return numberFocusState
+      }
+
+      return null
+    },
+    tabIndex () {
+      if (this.$slots.default[0].componentOptions.tag.toLowerCase() === 'm-list') {
+        return -1
+      }
+
+      return this.mdcMenu ? (this.mdcMenu.open ? 0 : -1) : (this.open ? 0 : -1)
     }
   },
   watch: {
@@ -72,6 +107,11 @@ export default {
     quickOpen () {
       this.mdcMenu.quickOpen = this.quickOpen
     },
+    hoistToBody () {
+      if (this.hoistToBody) {
+        this.mdcMenu.hoistMenuToBody()
+      }
+    },
     fixed () {
       this.mdcMenu.setFixedPosition(this.fixed)
     },
@@ -83,18 +123,23 @@ export default {
       }
     },
     absolutePositionX () {
-      if (this.absolutePositionX > -1 && this.absolutePositionY > -1) {
+      if (this.absolutePositionX !== null) {
         this.mdcMenu.setAbsolutePosition(this.absolutePositionX, this.absolutePositionY)
       }
     },
     absolutePositionY () {
-      if (this.absolutePositionX > -1 && this.absolutePositionY > -1) {
+      if (this.absolutePositionY !== null) {
         this.mdcMenu.setAbsolutePosition(this.absolutePositionX, this.absolutePositionY)
       }
     },
     wrapFocus () {
       this.mdcMenu.wrapFocus = this.wrapFocus
     },
+    defaultFocusState () {
+      if (this.focusState !== null) {
+        this.mdcMenu.setDefaultFocusState(this.focusState)
+      }
+    },
     'mdcMenu.open' () {
       this.model = this.mdcMenu.open
     }
@@ -107,14 +152,21 @@ export default {
       subtree: true
     })
     this.mdcMenu = MDCMenu.attachTo(this.$el)
+    if (this.hoistToBody) {
+      this.mdcMenu.hoistMenuToBody()
+    }
     this.mdcMenu.setFixedPosition(this.fixed)
     if (this.anchorCorner !== '') {
       this.mdcMenu.setAnchorCorner(Corner[this.anchorCorner.toUpperCase()])
     }
-    if (this.absolutePositionX > -1 && this.absolutePositionY > -1) {
+    if (this.absolutePositionX !== null || this.absolutePositionY !== null) {
       this.mdcMenu.setAbsolutePosition(this.absolutePositionX, this.absolutePositionY)
     }
     this.mdcMenu.wrapFocus = this.wrapFocus
+
+    if (this.focusState !== null) {
+      this.mdcMenu.setDefaultFocusState(this.focusState)
+    }
   },
   beforeDestroy () {
     this.slotObserver.disconnect()

components/menu/README.md

@@ -30,8 +30,15 @@ data() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| quickOpen | Boolean | false | deactivates menu animation |
-| open | Boolean | false | open the menu (could be v-modeled) |
+| quickOpen | Boolean | false | Deactivates menu animation. |
+| open | Boolean | false | Open the menu (could be v-modeled). |
+| anchorCorner | String | `TOP_START` | Sets the corner that the menu surface will be anchored to. Can be one of the following: `TOP_LEFT`, `TOP_RIGHT`, `BOTTOM_LEFT`, `BOTTOM_RIGHT`, `TOP_START`, `TOP_END`, `BOTTOM_START`, `BOTTOM_END` |
+| absolutePositionX | Number | null | Sets the absolute x position of the menu. Should only be used when the menu is hoisted or using fixed positioning. |
+| absolutePositionY | Number | null | Sets the absolute y position of the menu. Should only be used when the menu is hoisted or using fixed positioning. |
+| hoistToBody | Boolean | false | Removes the menu-surface element from the DOM and appends it to the body element. Should be used to overcome overflow: hidden issues. |
+| fixed | Boolean | false | Sets whether the menu surface is using fixed positioning. |
+| wrapFocus| Boolean| true | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa. |
+| defaultFocusState | [Number, String] | null | Sets default focus state where the menu should focus every time when menu is opened. Focuses the list root (`LIST_ROOT`) element by default. Can be one of the following: `NONE`, `LIST_ROOT`, `FIRST_ITEM`, `LAST_ITEM` |
 
 ### Events
 

package.json

@@ -31,7 +31,7 @@
     "test:updateSnapshot": "yarn test --updateSnapshot"
   },
   "dependencies": {
-    "material-components-web": "^1.1.0"
+    "material-components-web": "^2.0.0"
   },
   "peerDependencies": {
     "vue": "^2.6.10",