refactor(select): Refactor select (#5113)

- remove native select
- don't hoist menu to body
- move adapter logic into foundation

BREAKING CHANGE: In MDCMenu and MDCMenuSurface, `hoistMenuToBody` adapter method removed.  In MDCSelect, HTML structure changed: the select anchor is now wrapped in a parent element, and the anchor's sibling is the select menu. Support for native select removed. Support added for select with no label. MDCSelectAdapter methods removed: `getValue`, `setValue`, `isMenuOpen`, `setSelectedIndex`, `checkValidity`, `setValid`, `toggleClassAtIndex`. MDCSelectAdapter methods added: `hasLabel`, `getSelectedMenuItem`, `setSelectedText`, `isSelectedTextFocused`, `get/setSelectedTextAttr`, `getAnchorElement`, `setMenuAnchorElement`, `setMenuAnchorCorner`, `setMenuWrapFocus`, `set/removeAttributeAtIndex`, `focusMenuItemAtIndex`, `getMenuItemValues`, `getMenuItemCount`, `getMenuItemCount`, `getMenuItemAttr`, `getMenuItemTextAtIndex`, `add/removeClassAtIndex`. MDCSelectFoundation `setValue` method removed; `getDisabled`, `handleMenuItemAction`, `getSelectedIndex`, `get/setRequired`, `init` added.

Author: bonniezhou

packages/mdc-menu-surface/README.md

@@ -113,7 +113,7 @@ menuSurface.setFixedPosition(true);
 #### Absolute Position
 
 The menu surface can use absolute positioning when being displayed. This requires that the element containing the
-menu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.
+menu has the `position: relative` style.
 
 ```html
 <div class="mdc-menu-surface">
@@ -123,7 +123,6 @@ menu (`body` if using `hoistMenuToBody()`) has the `position: relative` style.
 
 ```js
 // ...
-menuSurface.hoistMenuToBody(); // Not required if the menu-surface is already positioned on the body.
 menuSurface.setAbsolutePosition(100, 100);
 ```
 
@@ -174,8 +173,7 @@ Method Signature | Description
 `setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the foundation's `setAnchorMargin(Partial<MDCMenuDistance>)` method.
 `setFixedPosition(isFixed: boolean) => void` | Adds the `mdc-menu-surface--fixed` class to the `mdc-menu-surface` element. Proxies to the foundation's `setIsHoisted()` and `setFixedPosition()` methods.
 `setAbsolutePosition(x: number, y: number) => void` | Proxies to the foundation's `setAbsolutePosition(x, y)` method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.
-`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic. Should be used with conjunction with `hoistMenuToBody()`.
-`hoistMenuToBody() => void` | Removes the `menu-surface` element from the DOM and appends it to the `body` element. Should be used to overcome `overflow: hidden` issues.
+`setMenuSurfaceAnchorElement(element: Element) => void` | Changes the element used as an anchor for `menu-surface` positioning logic.
 `setIsHoisted() => void` | Proxies to the foundation's `setIsHoisted` method.
 `getDefaultFoundation() => MDCMenuSurfaceFoundation` | Returns the foundation.
 

packages/mdc-menu-surface/component.ts

@@ -92,15 +92,6 @@ export class MDCMenuSurface extends MDCComponent<MDCMenuSurfaceFoundation> {
     this.foundation_.setQuickOpen(quickOpen);
   }
 
-  /**
-   * Removes the menu-surface from it's current location and appends it to the
-   * body to overcome any overflow:hidden issues.
-   */
-  hoistMenuToBody() {
-    document.body.appendChild(this.root_);
-    this.setIsHoisted(true);
-  }
-
   /** Sets the foundation to use page offsets for an positioning when the menu is hoisted to the body. */
   setIsHoisted(isHoisted: boolean) {
     this.foundation_.setIsHoisted(isHoisted);

packages/mdc-menu/README.md

@@ -165,7 +165,6 @@ The menu can use absolutely positioned when being displayed.
 
 ```js
 // ...
-menu.hoistMenuToBody(); // Not required if the menu is already positioned on the body.
 menu.setAbsolutePosition(100, 100);
 ```
 
@@ -226,8 +225,7 @@ Method Signature | Description
 `setAnchorMargin(Partial<MDCMenuDistance>) => void` | Proxies to the menu surface's `setAnchorMargin(Partial<MDCMenuDistance>)` method.
 `setAbsolutePosition(x: number, y: number) => void` | Proxies to the menu surface's `setAbsolutePosition(x: number, y: number)` method.
 `setFixedPosition(isFixed: boolean) => void` | Proxies to the menu surface's `setFixedPosition(isFixed: boolean)` method.
-`setSelectedIndex(index: number) => void` | Sets the list item to the selected state at the specified index.
-`hoistMenuToBody() => void` | Proxies to the menu surface's `hoistMenuToBody()` method.
+`setSelectedIndex(index: number) => void | Sets the list item to the selected state at the specified index.
 `setIsHoisted(isHoisted: boolean) => void` | Proxies to the menu surface's `setIsHoisted(isHoisted: boolean)` method.
 `setAnchorElement(element: Element) => void` | Proxies to the menu surface's `setAnchorElement(element)` method.
 `getOptionByIndex(index: number) => Element \| null` | Returns the list item at the `index` specified.

packages/mdc-menu/component.ts

@@ -182,10 +182,6 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
     this.menuSurface_.setFixedPosition(isFixed);
   }
 
-  hoistMenuToBody() {
-    this.menuSurface_.hoistMenuToBody();
-  }
-
   setIsHoisted(isHoisted: boolean) {
     this.menuSurface_.setIsHoisted(isHoisted);
   }