@material/web 1.0.0 → 1.0.2-nightly.6a1fb38.0

package/menu/internal/menu.js

@@ -4,18 +4,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import '../../focus/md-focus-ring.js';
 import '../../elevation/elevation.js';
-import { html, isServer, LitElement } from 'lit';
+import '../../focus/md-focus-ring.js';
+import { LitElement, html, isServer, nothing } from 'lit';
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { polyfillElementInternalsAria, setupHostAria } from '../../internal/aria/aria.js';
-import { createAnimationSignal, EASING } from '../../internal/motion/animation.js';
-import { ListController, NavigableKeys } from '../../list/internal/list-controller.js';
-import { getActiveItem, getFirstActivatableItem, getLastActivatableItem } from '../../list/internal/list-navigation-helpers.js';
-import { FocusState, isClosableKey, isElementInSubtree } from './controllers/shared.js';
-import { Corner, SurfacePositionController } from './controllers/surfacePositionController.js';
+import { polyfillARIAMixin, polyfillElementInternalsAria, } from '../../internal/aria/aria.js';
+import { EASING, createAnimationSignal } from '../../internal/motion/animation.js';
+import { ListController, NavigableKeys, } from '../../list/internal/list-controller.js';
+import { getActiveItem, getFirstActivatableItem, getLastActivatableItem, } from '../../list/internal/list-navigation-helpers.js';
+import { FocusState, isClosableKey, isElementInSubtree, } from './controllers/shared.js';
+import { Corner, SurfacePositionController, } from './controllers/surfacePositionController.js';
 import { TypeaheadController } from './controllers/typeaheadController.js';
 export { Corner } from './controllers/surfacePositionController.js';
 /**
@@ -50,10 +50,10 @@ function getFocusedElement(activeDoc = document) {
     return activeEl;
 }
 /**
- * @fires opening Fired before the opening animation begins
- * @fires opened Fired once the menu is open, after any animations
- * @fires closing Fired before the closing animation begins
- * @fires closed Fired once the menu is closed, after any animations
+ * @fires opening {Event} Fired before the opening animation begins
+ * @fires opened {Event} Fired once the menu is open, after any animations
+ * @fires closing {Event} Fired before the closing animation begins
+ * @fires closed {Event} Fired once the menu is closed, after any animations
  */
 export class Menu extends LitElement {
     /**
@@ -61,8 +61,8 @@ export class Menu extends LitElement {
      * helpful for calculating some animation calculations.
      */
     get openDirection() {
-        const menuCornerBlock = this.menuCorner.split('_')[0];
-        return menuCornerBlock === 'START' ? 'DOWN' : 'UP';
+        const menuCornerBlock = this.menuCorner.split('-')[0];
+        return menuCornerBlock === 'start' ? 'DOWN' : 'UP';
     }
     /**
      * The element which the menu should align to. If `anchor` is set to a
@@ -71,8 +71,7 @@ export class Menu extends LitElement {
      */
     get anchorElement() {
         if (this.anchor) {
-            return this.getRootNode()
-                .querySelector(`#${this.anchor}`);
+            return this.getRootNode().querySelector(`#${this.anchor}`);
         }
         return this.currentAnchorElement;
     }
@@ -92,9 +91,12 @@ export class Menu extends LitElement {
         this.anchor = '';
         /**
          * Whether the positioning algorithim should calculate relative to the parent
-         * of the anchor element (absolute) or relative to the window (fixed).
+         * of the anchor element (`absolute`), relative to the window (`fixed`), or
+         * relative to the document (`document`). `popover` will use the popover API
+         * to render the menu in the top-layer. If your browser does not support the
+         * popover API, it will fall back to `fixed`.
          *
-         * Examples for `position = 'fixed'`:
+         * __Examples for `position = 'fixed'`:__
          *
          * - If there is no `position:relative` in the given parent tree and the
          *   surface is `position:absolute`
@@ -103,12 +105,27 @@ export class Menu extends LitElement {
          * - The anchor and the surface do not share a common `position:relative`
          *   ancestor
          *
-         * When using positioning = fixed, in most cases, the menu should position
+         * When using `positioning=fixed`, in most cases, the menu should position
          * itself above most other `position:absolute` or `position:fixed` elements
          * when placed inside of them. e.g. using a menu inside of an `md-dialog`.
          *
          * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
          * the window instead.
+         *
+         * __Examples for `position = 'document'`:__
+         *
+         * - There is no parent that creates a relative positioning context e.g.
+         *   `position: relative`, `position: absolute`, `transform: translate(x, y)`,
+         *   etc.
+         * - You put the effort into hoisting the menu to the top of the DOM like the
+         *   end of the `<body>` to render over everything or in a top-layer.
+         * - You are reusing a single `md-menu` element that dynamically renders
+         *   content.
+         *
+         * __Examples for `position = 'popover'`:__
+         *
+         * - Your browser supports `popover`.
+         * - Most cases. Once popover is in browsers, this will become the default.
          */
         this.positioning = 'absolute';
         /**
@@ -116,7 +133,8 @@ export class Menu extends LitElement {
          */
         this.quick = false;
         /**
-         * Displays overflow content like a submenu.
+         * Displays overflow content like a submenu. Not required in most cases when
+         * using `positioning="popover"`.
          *
          * __NOTE__: This may cause adverse effects if you set
          * `md-menu {max-height:...}`
@@ -204,14 +222,17 @@ export class Menu extends LitElement {
          * The event path of the last window pointerdown event.
          */
         this.pointerPath = [];
-        this.isPointerDown = false;
+        /**
+         * Whether or not the menu is repositoining due to window / document resize
+         */
+        this.isRepositioning = false;
         this.openCloseAnimationSignal = createAnimationSignal();
         this.listController = new ListController({
             isItem: (maybeItem) => {
                 return maybeItem.hasAttribute('md-menu-item');
             },
             getPossibleItems: () => this.slotItems,
-            isRtl: () => (getComputedStyle(this).direction === 'rtl'),
+            isRtl: () => getComputedStyle(this).direction === 'rtl',
             deactivateItem: (item) => {
                 item.selected = false;
                 item.tabIndex = -1;
@@ -229,7 +250,9 @@ export class Menu extends LitElement {
                 // key so it can close the menu instead of navigate the list.
                 // Therefore we need to include all keys but left/right arrow close
                 // key
-                const arrowOpen = isRtl ? NavigableKeys.ArrowLeft : NavigableKeys.ArrowRight;
+                const arrowOpen = isRtl
+                    ? NavigableKeys.ArrowLeft
+                    : NavigableKeys.ArrowRight;
                 if (key === arrowOpen) {
                     return true;
                 }
@@ -247,11 +270,13 @@ export class Menu extends LitElement {
             return {
                 getItems: () => this.items,
                 typeaheadBufferTime: this.typeaheadDelay,
-                active: this.typeaheadActive
+                active: this.typeaheadActive,
             };
         });
         this.currentAnchorElement = null;
-        this.internals = polyfillElementInternalsAria(this, this /* needed for closure */.attachInternals());
+        this.internals = polyfillElementInternalsAria(this, 
+        // Cast needed for closure
+        this.attachInternals());
         /**
          * Handles positioning the surface and aligning it to the anchor as well as
          * keeping it in the viewport.
@@ -262,7 +287,7 @@ export class Menu extends LitElement {
                 surfaceCorner: this.menuCorner,
                 surfaceEl: this.surfaceEl,
                 anchorEl: this.anchorElement,
-                positioning: this.positioning,
+                positioning: this.positioning === 'popover' ? 'document' : this.positioning,
                 isOpen: this.open,
                 xOffset: this.xOffset,
                 yOffset: this.yOffset,
@@ -271,28 +296,44 @@ export class Menu extends LitElement {
                 onClose: this.onClosed,
                 // We can't resize components that have overflow like menus with
                 // submenus because the overflow-y will show menu items / content
-                // outside the bounds of the menu. (to be fixed w/ popover API)
-                repositionStrategy: this.hasOverflow ? 'move' : 'resize',
+                // outside the bounds of the menu. Popover API fixes this because each
+                // submenu is hoisted to the top-layer and are not considered overflow
+                // content.
+                repositionStrategy: this.hasOverflow && this.positioning !== 'popover'
+                    ? 'move'
+                    : 'resize',
             };
         });
+        this.onWindowResize = () => {
+            if (this.isRepositioning ||
+                (this.positioning !== 'document' &&
+                    this.positioning !== 'fixed' &&
+                    this.positioning !== 'popover')) {
+                return;
+            }
+            this.isRepositioning = true;
+            this.reposition();
+            this.isRepositioning = false;
+        };
         this.handleFocusout = async (event) => {
-            if (this.stayOpenOnFocusout || !this.open) {
+            const anchorEl = this.anchorElement;
+            // Do not close if we focused out by clicking on the anchor element. We
+            // can't assume anchor buttons can be the related target because of iOS does
+            // not focus buttons.
+            if (this.stayOpenOnFocusout ||
+                !this.open ||
+                this.pointerPath.includes(anchorEl)) {
                 return;
             }
             if (event.relatedTarget) {
                 // Don't close the menu if we are switching focus between menu,
-                // md-menu-item, and md-list
-                if (isElementInSubtree(event.relatedTarget, this)) {
-                    return;
-                }
-                const anchorEl = this.anchorElement;
-                const wasAnchorClickFocused = isElementInSubtree(event.relatedTarget, anchorEl) &&
-                    this.isPointerDown;
-                if (wasAnchorClickFocused) {
+                // md-menu-item, and md-list or if the anchor was click focused.
+                if (isElementInSubtree(event.relatedTarget, this) ||
+                    isElementInSubtree(event.relatedTarget, anchorEl)) {
                     return;
                 }
             }
-            else if (this.isPointerDown && this.pointerPath.includes(this)) {
+            else if (this.pointerPath.includes(this)) {
                 // If menu tabindex == -1 and the user clicks on the menu or a divider, we
                 // want to keep the menu open.
                 return;
@@ -322,7 +363,7 @@ export class Menu extends LitElement {
                 this.dispatchEvent(new Event('opening'));
             }
             else {
-                animationAborted = !!await this.animateOpen();
+                animationAborted = !!(await this.animateOpen());
             }
             // This must come after the opening animation or else it may focus one of
             // the items before the animation has begun and causes the list to slide
@@ -378,25 +419,27 @@ export class Menu extends LitElement {
             }
         };
         this.onWindowPointerdown = (event) => {
-            this.isPointerDown = true;
             this.pointerPath = event.composedPath();
         };
-        this.onWindowPointerup = () => {
-            this.isPointerDown = false;
-        };
-        this.onWindowClick = (event) => {
+        /**
+         * We cannot listen to window click because Safari on iOS will not bubble a
+         * click event on window if the item clicked is not a "clickable" item such as
+         * <body>
+         */
+        this.onDocumentClick = (event) => {
             if (!this.open) {
                 return;
             }
             const path = event.composedPath();
-            if (!this.stayOpenOnOutsideClick && !path.includes(this) &&
+            if (!this.stayOpenOnOutsideClick &&
+                !path.includes(this) &&
                 !path.includes(this.anchorElement)) {
                 this.open = false;
             }
         };
         if (!isServer) {
             this.internals.role = 'menu';
-            this.addEventListener('keydown', this.listController.handleKeydown);
+            this.addEventListener('keydown', this.handleKeydown);
             // Capture so that we can grab the event before it reaches the menu item
             // istelf. Specifically useful for the case where typeahead encounters a
             // space and we don't want the menu item to close the menu.
@@ -421,6 +464,34 @@ export class Menu extends LitElement {
         }
         this.setAttribute('aria-hidden', 'true');
     }
+    update(changed) {
+        if (changed.has('open')) {
+            if (this.open) {
+                this.setUpGlobalEventListeners();
+            }
+            else {
+                this.cleanUpGlobalEventListeners();
+            }
+        }
+        // Firefox does not support popover. Fall-back to using fixed.
+        if (changed.has('positioning') &&
+            this.positioning === 'popover' &&
+            // type required for Google JS conformance
+            !this.showPopover) {
+            this.positioning = 'fixed';
+        }
+        super.update(changed);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.open) {
+            this.setUpGlobalEventListeners();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanUpGlobalEventListeners();
+    }
     render() {
         return this.renderSurface();
     }
@@ -429,31 +500,30 @@ export class Menu extends LitElement {
      */
     renderSurface() {
         return html `
-       <div
-          class="menu ${classMap(this.getSurfaceClasses())}"
-          style=${styleMap(this.menuPositionController.surfaceStyles)}>
+      <div
+        class="menu ${classMap(this.getSurfaceClasses())}"
+        style=${styleMap(this.menuPositionController.surfaceStyles)}
+        popover=${this.positioning === 'popover' ? 'manual' : nothing}>
         ${this.renderElevation()}
         <div class="items">
-          <div class="item-padding">
-            ${this.renderMenuItems()}
-          </div>
+          <div class="item-padding"> ${this.renderMenuItems()} </div>
         </div>
-       </div>
-     `;
+      </div>
+    `;
     }
     /**
      * Renders the menu items' slot
      */
     renderMenuItems() {
         return html `<slot
-        @close-menu=${this.onCloseMenu}
-        @deactivate-items=${this.onDeactivateItems}
-        @request-activation=${this.onRequestActivation}
-        @deactivate-typeahead=${this.handleDeactivateTypeahead}
-        @activate-typeahead=${this.handleActivateTypeahead}
-        @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
-        @close-on-focusout=${this.handleCloseOnFocusout}
-        @slotchange=${this.listController.onSlotchange}></slot>`;
+      @close-menu=${this.onCloseMenu}
+      @deactivate-items=${this.onDeactivateItems}
+      @request-activation=${this.onRequestActivation}
+      @deactivate-typeahead=${this.handleDeactivateTypeahead}
+      @activate-typeahead=${this.handleActivateTypeahead}
+      @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
+      @close-on-focusout=${this.handleCloseOnFocusout}
+      @slotchange=${this.listController.onSlotchange}></slot>`;
     }
     /**
      * Renders the elevation component.
@@ -469,7 +539,8 @@ export class Menu extends LitElement {
         };
     }
     captureKeydown(event) {
-        if (event.target === this && !event.defaultPrevented &&
+        if (event.target === this &&
+            !event.defaultPrevented &&
             isClosableKey(event.code)) {
             event.preventDefault();
             this.close();
@@ -513,7 +584,7 @@ export class Menu extends LitElement {
         // height animation
         const upPositionCorrectionAnimation = slotEl.animate([
             { transform: openingUpwards ? `translateY(-${height}px)` : '' },
-            { transform: '' }
+            { transform: '' },
         ], { duration: FULL_DURATION, easing: EASING.EMPHASIZED });
         const surfaceOpacityAnimation = surfaceEl.animate([{ opacity: 0 }, { opacity: 1 }], SURFACE_OPACITY_DURATION);
         const childrenAnimations = [];
@@ -589,7 +660,7 @@ export class Menu extends LitElement {
         const SURFACE_OPACITY_DELAY = FULL_DURATION - SURFACE_OPACITY_DURATION;
         const ITEM_OPACITY_DURATION = 50;
         const ITEM_OPACITY_INITIAL_DELAY = 50;
-        const END_HEIGHT_PERCENTAGE = .35;
+        const END_HEIGHT_PERCENTAGE = 0.35;
         // We want to fit every child fade-out animation within the full duration of
         // the animation.
         const DELAY_BETWEEN_ITEMS = (FULL_DURATION - ITEM_OPACITY_INITIAL_DELAY - ITEM_OPACITY_DURATION) /
@@ -597,7 +668,7 @@ export class Menu extends LitElement {
         // The mock has the animation shrink to 35%
         const surfaceHeightAnimation = surfaceEl.animate([
             { height: `${height}px` },
-            { height: `${height * END_HEIGHT_PERCENTAGE}px` }
+            { height: `${height * END_HEIGHT_PERCENTAGE}px` },
         ], {
             duration: FULL_DURATION,
             easing: EASING.EMPHASIZED_ACCELERATE,
@@ -606,11 +677,12 @@ export class Menu extends LitElement {
         // always in view, so we need to translate it upwards the opposite direction
         // of the height animation
         const downPositionCorrectionAnimation = slotEl.animate([
-            { transform: '' }, {
-                transform: closingDownwards ?
-                    `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)` :
-                    ''
-            }
+            { transform: '' },
+            {
+                transform: closingDownwards
+                    ? `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)`
+                    : '',
+            },
         ], { duration: FULL_DURATION, easing: EASING.EMPHASIZED_ACCELERATE });
         const surfaceOpacityAnimation = surfaceEl.animate([{ opacity: 1 }, { opacity: 0 }], { duration: SURFACE_OPACITY_DURATION, delay: SURFACE_OPACITY_DELAY });
         const childrenAnimations = [];
@@ -651,21 +723,26 @@ export class Menu extends LitElement {
         });
         return animationEnded;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        if (!isServer) {
-            window.addEventListener('click', this.onWindowClick, { capture: true });
-            window.addEventListener('pointerdown', this.onWindowPointerdown);
-            window.addEventListener('pointerup', this.onWindowPointerup);
-        }
+    handleKeydown(event) {
+        // At any key event, the pointer interaction is done so we need to clear our
+        // cached pointerpath. This handles the case where the user clicks on the
+        // anchor, and then hits shift+tab
+        this.pointerPath = [];
+        this.listController.handleKeydown(event);
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (!isServer) {
-            window.removeEventListener('click', this.onWindowClick, { capture: true });
-            window.removeEventListener('pointerdown', this.onWindowPointerdown);
-            window.removeEventListener('pointerup', this.onWindowPointerup);
-        }
+    setUpGlobalEventListeners() {
+        document.addEventListener('click', this.onDocumentClick, { capture: true });
+        window.addEventListener('pointerdown', this.onWindowPointerdown);
+        document.addEventListener('resize', this.onWindowResize, { passive: true });
+        window.addEventListener('resize', this.onWindowResize, { passive: true });
+    }
+    cleanUpGlobalEventListeners() {
+        document.removeEventListener('click', this.onDocumentClick, {
+            capture: true,
+        });
+        window.removeEventListener('pointerdown', this.onWindowPointerdown);
+        document.removeEventListener('resize', this.onWindowResize);
+        window.removeEventListener('resize', this.onWindowResize);
     }
     onCloseMenu() {
         this.close();
@@ -701,7 +778,7 @@ export class Menu extends LitElement {
     close() {
         this.open = false;
         const maybeSubmenu = this.slotItems;
-        maybeSubmenu.forEach(item => {
+        maybeSubmenu.forEach((item) => {
             item.close?.();
         });
     }
@@ -726,10 +803,20 @@ export class Menu extends LitElement {
     activatePreviousItem() {
         return this.listController.activatePreviousItem() ?? null;
     }
+    /**
+     * Repositions the menu if it is open.
+     *
+     * Useful for the case where document or window-positioned menus have their
+     * anchors moved while open.
+     */
+    reposition() {
+        if (this.open) {
+            this.menuPositionController.position();
+        }
+    }
 }
 (() => {
-    // We want to manage tabindex ourselves.
-    setupHostAria(Menu, { focusable: false });
+    polyfillARIAMixin(Menu);
 })();
 __decorate([
     query('.menu')