@material/web 1.0.0-pre.0 → 1.0.0-pre.2

package/menu/lib/shared.js

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * The event that closes any parent menus. It is recommended to subclass and
+ * dispatch this event rather than creating your own `close-menu` event.
+ */
+export class CloseMenuEvent extends Event {
+    constructor(initiator, reason) {
+        super('close-menu', { bubbles: true, composed: true });
+        this.initiator = initiator;
+        this.reason = reason;
+        this.itemPath = [initiator];
+    }
+}
+/**
+ * The default close menu event used by md-menu. To create your own `close-menu`
+ * event, you should subclass the `CloseMenuEvent` instead.
+ */
+// tslint:disable-next-line
+export const DefaultCloseMenuEvent = (CloseMenuEvent);
+/**
+ * The event that requests the parent md-menu to deactivate all other items.
+ */
+export class DeactivateItemsEvent extends Event {
+    constructor() {
+        super('deactivate-items', { bubbles: true, composed: true });
+    }
+}
+/**
+ * Keys that are used to navigate menus.
+ */
+export const NAVIGABLE_KEY = {
+    UP: 'ArrowUp',
+    DOWN: 'ArrowDown',
+    RIGHT: 'ArrowRight',
+    LEFT: 'ArrowLeft',
+};
+/**
+ * Keys that are used for selection in menus.
+ */
+export const SELECTION_KEY = {
+    SPACE: 'Space',
+    ENTER: 'Enter',
+};
+/**
+ * Default close `Reason` kind values.
+ */
+export const CLOSE_REASON = {
+    CLICK_SELECTION: 'CLICK_SELECTION',
+    KEYDOWN: 'KEYDOWN',
+};
+/**
+ * Keys that can close menus.
+ */
+export const KEYDOWN_CLOSE_KEYS = {
+    ESCAPE: 'Escape',
+    SPACE: SELECTION_KEY.SPACE,
+    ENTER: SELECTION_KEY.ENTER,
+};
+/**
+ * Determines whether the given key code is a key code that should close the
+ * menu.
+ *
+ * @param code The KeyboardEvent code to check.
+ * @return Whether or not the key code is in the predetermined list to close the
+ * menu.
+ */
+export function isClosableKey(code) {
+    return Object.values(KEYDOWN_CLOSE_KEYS).some(value => (value === code));
+}
+/**
+ * Determines whether the given key code is a key code that should select a menu
+ * item.
+ *
+ * @param code They KeyboardEvent code to check.
+ * @return Whether or not the key code is in the predetermined list to select a
+ * menu item.
+ */
+export function isSelectableKey(code) {
+    return Object.values(SELECTION_KEY).some(value => (value === code));
+}
+//# sourceMappingURL=shared.js.map

package/menu/lib/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA4DH;;;GAGG;AACH,MAAM,OAAO,cAAkD,SAAQ,KAAK;IAE1E,YAAmB,SAAmB,EAAW,MAAS;QACxD,KAAK,CAAC,YAAY,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;QADpC,cAAS,GAAT,SAAS,CAAU;QAAW,WAAM,GAAN,MAAM,CAAG;QAExD,IAAI,CAAC,QAAQ,GAAG,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC;CACF;AAED;;;GAGG;AACH,2BAA2B;AAC3B,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAA,cAA8B,CAAA,CAAC;AAEpE;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,KAAK;IAC7C;QACE,KAAK,CAAC,kBAAkB,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;IAC7D,CAAC;CACF;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,EAAE,EAAE,SAAS;IACb,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,WAAW;CACT,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACN,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,eAAe,EAAE,iBAAiB;IAClC,OAAO,EAAE,SAAS;CACV,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,aAAa,CAAC,KAAK;IAC1B,KAAK,EAAE,aAAa,CAAC,KAAK;CAClB,CAAC;AAIX;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,IAAY;IAExC,OAAO,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC;AAC3E,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAAC,IAAY;IAE1C,OAAO,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC;AACtE,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ListItem} from '../../list/lib/listitem/list-item.js';\n\n/**\n * Interface specific to menu item and not list item.\n */\ninterface MenuItemSelf {\n  /**\n   * The visible headline text of the item.\n   */\n  headline: string;\n  /**\n   * Whether or not the item is in the selected visual state (focuses on\n   * selection).\n   */\n  active: boolean;\n  /**\n   * If it is a sub-menu-item, a method that can close the submenu.\n   */\n  close?: () => void;\n}\n\n/**\n * The interface of every menu item interactive with a menu. All menu items\n * should implement this interface to be compatible with md-menu. Additionally\n * they should have both the `md-menu-item` and `md-list-item` attributes set.\n */\nexport type MenuItem = MenuItemSelf&ListItem;\n\n/**\n * The reason the `close-menu` event was dispatched.\n */\nexport interface Reason {\n  kind: string;\n}\n\n/**\n * The click selection reason for the `close-menu` event. The menu was closed\n * because an item was selected via user click.\n */\nexport interface ClickReason extends Reason {\n  kind: typeof CLOSE_REASON.CLICK_SELECTION;\n}\n\n/**\n * The keydown reason for the `close-menu` event. The menu was closed\n * because a specific key was pressed. The default closing keys for\n * `md-menu-item` are, Space, Enter or Escape.\n */\nexport interface KeydownReason extends Reason {\n  kind: typeof CLOSE_REASON.KEYDOWN;\n  key: string;\n}\n\n/**\n * The default menu closing reasons for the material md-menu package.\n */\nexport type DefaultReasons = ClickReason|KeydownReason;\n\n/**\n * The event that closes any parent menus. It is recommended to subclass and\n * dispatch this event rather than creating your own `close-menu` event.\n */\nexport class CloseMenuEvent<T extends Reason = DefaultReasons> extends Event {\n  readonly itemPath: MenuItem[];\n  constructor(public initiator: MenuItem, readonly reason: T) {\n    super('close-menu', {bubbles: true, composed: true});\n    this.itemPath = [initiator];\n  }\n}\n\n/**\n * The default close menu event used by md-menu. To create your own `close-menu`\n * event, you should subclass the `CloseMenuEvent` instead.\n */\n// tslint:disable-next-line\nexport const DefaultCloseMenuEvent = CloseMenuEvent<DefaultReasons>;\n\n/**\n * The event that requests the parent md-menu to deactivate all other items.\n */\nexport class DeactivateItemsEvent extends Event {\n  constructor() {\n    super('deactivate-items', {bubbles: true, composed: true});\n  }\n}\n\n/**\n * Keys that are used to navigate menus.\n */\nexport const NAVIGABLE_KEY = {\n  UP: 'ArrowUp',\n  DOWN: 'ArrowDown',\n  RIGHT: 'ArrowRight',\n  LEFT: 'ArrowLeft',\n} as const;\n\n/**\n * Keys that are used for selection in menus.\n */\nexport const SELECTION_KEY = {\n  SPACE: 'Space',\n  ENTER: 'Enter',\n} as const;\n\n/**\n * Default close `Reason` kind values.\n */\nexport const CLOSE_REASON = {\n  CLICK_SELECTION: 'CLICK_SELECTION',\n  KEYDOWN: 'KEYDOWN',\n} as const;\n\n/**\n * Keys that can close menus.\n */\nexport const KEYDOWN_CLOSE_KEYS = {\n  ESCAPE: 'Escape',\n  SPACE: SELECTION_KEY.SPACE,\n  ENTER: SELECTION_KEY.ENTER,\n} as const;\n\ntype Values<T> = T[keyof T];\n\n/**\n * Determines whether the given key code is a key code that should close the\n * menu.\n *\n * @param code The KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to close the\n * menu.\n */\nexport function isClosableKey(code: string):\n    code is Values<typeof KEYDOWN_CLOSE_KEYS> {\n  return Object.values(KEYDOWN_CLOSE_KEYS).some(value => (value === code));\n}\n\n/**\n * Determines whether the given key code is a key code that should select a menu\n * item.\n *\n * @param code They KeyboardEvent code to check.\n * @return Whether or not the key code is in the predetermined list to select a\n * menu item.\n */\nexport function isSelectableKey(code: string):\n    code is Values<typeof SELECTION_KEY> {\n  return Object.values(SELECTION_KEY).some(value => (value === code));\n}\n"]}

package/menu/lib/submenuitem/harness.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItemHarness } from '../../../list/lib/listitem/harness.js';
+/**
+ * Test harness for menu item.
+ */
+export declare class MenuItemHarness extends ListItemHarness {
+}

package/menu/lib/submenuitem/harness.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ListItemHarness } from '../../../list/lib/listitem/harness.js';
+/**
+ * Test harness for menu item.
+ */
+export class MenuItemHarness extends ListItemHarness {
+}
+//# sourceMappingURL=harness.js.map

package/menu/lib/submenuitem/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,eAAe,EAAC,MAAM,uCAAuC,CAAC;AAEtE;;GAEG;AACH,MAAM,OAAO,eAAgB,SAAQ,eAAe;CAAG","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ListItemHarness} from '../../../list/lib/listitem/harness.js';\n\n/**\n * Test harness for menu item.\n */\nexport class MenuItemHarness extends ListItemHarness {}\n"]}

package/menu/lib/submenuitem/sub-menu-item.d.ts

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ARIARole } from '../../../types/aria.js';
+import { Corner, Menu } from '../menu.js';
+import { MenuItemEl } from '../menuitem/menu-item.js';
+import { CloseMenuEvent } from '../shared.js';
+/**
+ * @fires deactivate-items {DeactivateItemsEvent} Requests the parent menu to
+ *     deselect other items when a submenu opens
+ */
+export declare class SubMenuItem extends MenuItemEl {
+    role: ARIARole;
+    /**
+     * The anchorCorner to set on the submenu.
+     */
+    anchorCorner: Corner;
+    /**
+     * The menuCorner to set on the submenu.
+     */
+    menuCorner: Corner;
+    /**
+     * The delay between pointerenter and submenu opening.
+     */
+    hoverOpenDelay: number;
+    /**
+     * The delay between ponterleave and the submenu closing.
+     */
+    hoverCloseDelay: number;
+    protected menus: Menu[];
+    protected keepOpenOnClick: boolean;
+    protected previousOpenTimeout: number;
+    protected previousCloseTimeout: number;
+    protected submenuOpen: boolean;
+    protected get submenuEl(): Menu | undefined;
+    /**
+     * Starts the default 400ms countdown to open the submenu.
+     */
+    protected onPointerenter: () => void;
+    /**
+     * Starts the default 400ms countdown to close the submenu.
+     */
+    protected onPointerleave: () => void;
+    protected onClick(): void;
+    /**
+     * On item keydown handles opening the submenu.
+     */
+    protected onKeydown(e: KeyboardEvent): void;
+    /**
+     * Render the submenu at the end
+     */
+    protected renderEnd(): import("lit-html").TemplateResult<1>;
+    /**
+     * Renders the slot for the submenu.
+     */
+    protected renderSubMenu(): import("lit-html").TemplateResult<1>;
+    protected onCloseSubmenu(e: CloseMenuEvent): void;
+    protected onSubMenuKeydown(e: KeyboardEvent): Promise<void>;
+    /**
+     * Shows the submenu.
+     *
+     * @param onOpened A function to call after the menu is opened.
+     */
+    show(onOpened?: () => void): void;
+    /**
+     * Closes the submenu.
+     *
+     * @param onClosed A function to call after the menu is closed.
+     */
+    close(onClosed?: () => void): void;
+    /**
+     * Determines whether the given KeyboardEvent code is one that should open
+     * the submenu. This is RTL-aware. By default, left, right, space, or enter.
+     *
+     * @param code The native KeyboardEvent code.
+     * @return Whether or not the key code should open the submenu.
+     */
+    protected isSubmenuOpenKey(code: string): boolean;
+    /**
+     * Determines whether the given KeyboardEvent code is one that should close
+     * the submenu. This is RTL-aware. By default right, left, or escape.
+     *
+     * @param code The native KeyboardEvent code.
+     * @return Whether or not the key code should close the submenu.
+     */
+    protected isSubmenuCloseKey(code: string): boolean;
+}

package/menu/lib/submenuitem/sub-menu-item.js

@@ -0,0 +1,266 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { html } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { List } from '../../../list/lib/list.js';
+import { MenuItemEl } from '../menuitem/menu-item.js';
+import { CLOSE_REASON, DeactivateItemsEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY } from '../shared.js';
+function stopPropagation(e) {
+    e.stopPropagation();
+}
+/**
+ * @fires deactivate-items {DeactivateItemsEvent} Requests the parent menu to
+ *     deselect other items when a submenu opens
+ */
+export class SubMenuItem extends MenuItemEl {
+    constructor() {
+        super(...arguments);
+        this.role = 'menuitem';
+        /**
+         * The anchorCorner to set on the submenu.
+         */
+        this.anchorCorner = 'START_END';
+        /**
+         * The menuCorner to set on the submenu.
+         */
+        this.menuCorner = 'START_START';
+        /**
+         * The delay between pointerenter and submenu opening.
+         */
+        this.hoverOpenDelay = 400;
+        /**
+         * The delay between ponterleave and the submenu closing.
+         */
+        this.hoverCloseDelay = 400;
+        this.keepOpenOnClick = true;
+        this.previousOpenTimeout = 0;
+        this.previousCloseTimeout = 0;
+        this.submenuOpen = false;
+        /**
+         * Starts the default 400ms countdown to open the submenu.
+         */
+        this.onPointerenter = () => {
+            clearTimeout(this.previousOpenTimeout);
+            clearTimeout(this.previousCloseTimeout);
+            if (this.submenuEl?.open)
+                return;
+            // Open synchronously if delay is 0. (screenshot tests infra
+            // would never resolve otherwise)
+            if (!this.hoverOpenDelay) {
+                this.show();
+            }
+            else {
+                this.previousOpenTimeout = setTimeout(() => {
+                    this.show();
+                }, this.hoverOpenDelay);
+            }
+        };
+        /**
+         * Starts the default 400ms countdown to close the submenu.
+         */
+        this.onPointerleave = () => {
+            clearTimeout(this.previousCloseTimeout);
+            clearTimeout(this.previousOpenTimeout);
+            // Close synchronously if delay is 0. (screenshot tests infra
+            // would never resolve otherwise)
+            if (!this.hoverCloseDelay) {
+                this.close();
+            }
+            else {
+                this.previousCloseTimeout = setTimeout(() => {
+                    this.close();
+                }, this.hoverCloseDelay);
+            }
+        };
+    }
+    get submenuEl() {
+        return this.menus[0];
+    }
+    onClick() {
+        this.show();
+    }
+    /**
+     * On item keydown handles opening the submenu.
+     */
+    onKeydown(e) {
+        const shouldOpenSubmenu = this.isSubmenuOpenKey(e.code);
+        if (e.code === SELECTION_KEY.SPACE) {
+            // prevent space from scrolling. Only open the submenu.
+            e.preventDefault();
+        }
+        if (!shouldOpenSubmenu) {
+            super.onKeydown(e);
+            return;
+        }
+        const submenu = this.submenuEl;
+        if (!submenu)
+            return;
+        const submenuItems = submenu.items;
+        const firstActivatableItem = List.getFirstActivatableItem(submenuItems);
+        if (firstActivatableItem) {
+            this.show(() => {
+                firstActivatableItem.active = true;
+            });
+            return;
+        }
+    }
+    /**
+     * Render the submenu at the end
+     */
+    renderEnd() {
+        return html `${super.renderEnd()}${this.renderSubMenu()}`;
+    }
+    /**
+     * Renders the slot for the submenu.
+     */
+    renderSubMenu() {
+        return html `<span class="submenu"><slot
+        name="submenu"
+        @pointerdown=${stopPropagation}
+        @click=${stopPropagation}
+        @keydown=${this.onSubMenuKeydown}
+        @close-menu=${this.onCloseSubmenu}
+    ></slot></span>`;
+    }
+    onCloseSubmenu(e) {
+        e.itemPath.push(this);
+        // Escape should only close one menu not all of the menus unlike space or
+        // click selection which should close all menus.
+        if (e.reason.kind === CLOSE_REASON.KEYDOWN &&
+            e.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {
+            e.stopPropagation();
+            this.active = true;
+            // It might already be active so manually focus
+            this.listItemRoot.focus();
+            return;
+        }
+        this.active = false;
+    }
+    async onSubMenuKeydown(e) {
+        // Stop propagation so that we don't accidentally close every parent menu.
+        // Additionally, we want to isolate things like the typeahead keydowns
+        // from bubbling up to the parent menu and confounding things.
+        e.stopPropagation();
+        const shouldClose = this.isSubmenuCloseKey(e.code);
+        if (!shouldClose)
+            return;
+        this.close(() => {
+            List.deactivateActiveItem(this.submenuEl.items);
+            this.listItemRoot.focus();
+            this.active = true;
+        });
+    }
+    /**
+     * Shows the submenu.
+     *
+     * @param onOpened A function to call after the menu is opened.
+     */
+    show(onOpened = () => { }) {
+        const menu = this.submenuEl;
+        if (!menu)
+            return;
+        menu.quick = true;
+        // Submenus are in overflow when not fixed. Can remove once we have native
+        // popup support
+        menu.hasOverflow = true;
+        menu.anchorCorner = this.anchorCorner;
+        menu.menuCorner = this.menuCorner;
+        menu.anchor = this;
+        // We manually set focus with `active` on keyboard navigation. And we
+        // want to focus the root on hover, so the user can pick up navigation with
+        // keyboard after hover.
+        menu.defaultFocus = 'LIST_ROOT';
+        menu.skipRestoreFocus = true;
+        // Menu could already be opened because of mouse interaction
+        const menuAlreadyOpen = menu.open;
+        menu.show();
+        // Deactivate other items. This can be the case if the user has tabbed
+        // around the menu and then mouses over an md-sub-menu.
+        this.dispatchEvent(new DeactivateItemsEvent());
+        this.active = true;
+        // This is the case of mouse hovering when already opened via keyboard or
+        // vice versa
+        if (menuAlreadyOpen) {
+            onOpened();
+        }
+        else {
+            menu.addEventListener('opened', onOpened, { once: true });
+        }
+    }
+    /**
+     * Closes the submenu.
+     *
+     * @param onClosed A function to call after the menu is closed.
+     */
+    close(onClosed = () => { }) {
+        const menu = this.submenuEl;
+        if (!menu || !menu.open)
+            return;
+        menu.quick = true;
+        menu.close();
+        this.active = false;
+        menu.addEventListener('closed', onClosed, { once: true });
+    }
+    /**
+     * Determines whether the given KeyboardEvent code is one that should open
+     * the submenu. This is RTL-aware. By default, left, right, space, or enter.
+     *
+     * @param code The native KeyboardEvent code.
+     * @return Whether or not the key code should open the submenu.
+     */
+    isSubmenuOpenKey(code) {
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const arrowEnterKey = isRtl ? NAVIGABLE_KEY.LEFT : NAVIGABLE_KEY.RIGHT;
+        switch (code) {
+            case arrowEnterKey:
+            case SELECTION_KEY.SPACE:
+            case SELECTION_KEY.ENTER:
+                return true;
+            default:
+                return false;
+        }
+    }
+    /**
+     * Determines whether the given KeyboardEvent code is one that should close
+     * the submenu. This is RTL-aware. By default right, left, or escape.
+     *
+     * @param code The native KeyboardEvent code.
+     * @return Whether or not the key code should close the submenu.
+     */
+    isSubmenuCloseKey(code) {
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const arrowEnterKey = isRtl ? NAVIGABLE_KEY.RIGHT : NAVIGABLE_KEY.LEFT;
+        switch (code) {
+            case arrowEnterKey:
+            case KEYDOWN_CLOSE_KEYS.ESCAPE:
+                return true;
+            default:
+                return false;
+        }
+    }
+}
+__decorate([
+    property({ attribute: 'anchor-corner' }),
+    __metadata("design:type", String)
+], SubMenuItem.prototype, "anchorCorner", void 0);
+__decorate([
+    property({ attribute: 'menu-corner' }),
+    __metadata("design:type", String)
+], SubMenuItem.prototype, "menuCorner", void 0);
+__decorate([
+    property({ type: Number, attribute: 'hover-open-delay' }),
+    __metadata("design:type", Object)
+], SubMenuItem.prototype, "hoverOpenDelay", void 0);
+__decorate([
+    property({ type: Number, attribute: 'hover-close-delay' }),
+    __metadata("design:type", Object)
+], SubMenuItem.prototype, "hoverCloseDelay", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'submenu' }),
+    __metadata("design:type", Array)
+], SubMenuItem.prototype, "menus", void 0);
+//# sourceMappingURL=sub-menu-item.js.map

package/menu/lib/submenuitem/sub-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sub-menu-item.js","sourceRoot":"","sources":["sub-menu-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {List} from '../../../list/lib/list.js';\nimport {ARIARole} from '../../../types/aria.js';\nimport {Corner, Menu} from '../menu.js';\nimport {MenuItemEl} from '../menuitem/menu-item.js';\nimport {CLOSE_REASON, CloseMenuEvent, DeactivateItemsEvent, KEYDOWN_CLOSE_KEYS, NAVIGABLE_KEY, SELECTION_KEY} from '../shared.js';\n\nfunction stopPropagation(e: Event) {\n  e.stopPropagation();\n}\n\n/**\n * @fires deactivate-items {DeactivateItemsEvent} Requests the parent menu to\n *     deselect other items when a submenu opens\n */\nexport class SubMenuItem extends MenuItemEl {\n  override role: ARIARole = 'menuitem';\n  /**\n   * The anchorCorner to set on the submenu.\n   */\n  @property({attribute: 'anchor-corner'}) anchorCorner: Corner = 'START_END';\n  /**\n   * The menuCorner to set on the submenu.\n   */\n  @property({attribute: 'menu-corner'}) menuCorner: Corner = 'START_START';\n  /**\n   * The delay between pointerenter and submenu opening.\n   */\n  @property({type: Number, attribute: 'hover-open-delay'}) hoverOpenDelay = 400;\n  /**\n   * The delay between ponterleave and the submenu closing.\n   */\n  @property({type: Number, attribute: 'hover-close-delay'})\n  hoverCloseDelay = 400;\n\n  @queryAssignedElements({slot: 'submenu'}) protected menus!: Menu[];\n\n  protected override keepOpenOnClick = true;\n  protected previousOpenTimeout = 0;\n  protected previousCloseTimeout = 0;\n  protected submenuOpen = false;\n\n  protected get submenuEl(): Menu|undefined {\n    return this.menus[0];\n  }\n\n  /**\n   * Starts the default 400ms countdown to open the submenu.\n   */\n  protected override onPointerenter = () => {\n    clearTimeout(this.previousOpenTimeout);\n    clearTimeout(this.previousCloseTimeout);\n    if (this.submenuEl?.open) return;\n\n    // Open synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverOpenDelay) {\n      this.show();\n    } else {\n      this.previousOpenTimeout = setTimeout(() => {\n        this.show();\n      }, this.hoverOpenDelay);\n    }\n  };\n\n  /**\n   * Starts the default 400ms countdown to close the submenu.\n   */\n  protected override onPointerleave = () => {\n    clearTimeout(this.previousCloseTimeout);\n    clearTimeout(this.previousOpenTimeout);\n\n    // Close synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverCloseDelay) {\n      this.close();\n    } else {\n      this.previousCloseTimeout = setTimeout(() => {\n        this.close();\n      }, this.hoverCloseDelay);\n    }\n  };\n\n  protected override onClick() {\n    this.show();\n  }\n\n  /**\n   * On item keydown handles opening the submenu.\n   */\n  protected override onKeydown(e: KeyboardEvent) {\n    const shouldOpenSubmenu = this.isSubmenuOpenKey(e.code);\n\n    if (e.code === SELECTION_KEY.SPACE) {\n      // prevent space from scrolling. Only open the submenu.\n      e.preventDefault();\n    }\n\n    if (!shouldOpenSubmenu) {\n      super.onKeydown(e);\n      return;\n    }\n\n    const submenu = this.submenuEl;\n    if (!submenu) return;\n\n    const submenuItems = submenu.items;\n    const firstActivatableItem = List.getFirstActivatableItem(submenuItems);\n\n    if (firstActivatableItem) {\n      this.show(() => {\n        firstActivatableItem.active = true;\n      });\n\n      return;\n    }\n  }\n\n  /**\n   * Render the submenu at the end\n   */\n  protected override renderEnd() {\n    return html`${super.renderEnd()}${this.renderSubMenu()}`;\n  }\n\n  /**\n   * Renders the slot for the submenu.\n   */\n  protected renderSubMenu() {\n    return html`<span class=\"submenu\"><slot\n        name=\"submenu\"\n        @pointerdown=${stopPropagation}\n        @click=${stopPropagation}\n        @keydown=${this.onSubMenuKeydown}\n        @close-menu=${this.onCloseSubmenu}\n    ></slot></span>`;\n  }\n\n  protected onCloseSubmenu(e: CloseMenuEvent) {\n    e.itemPath.push(this);\n    // Escape should only close one menu not all of the menus unlike space or\n    // click selection which should close all menus.\n    if (e.reason.kind === CLOSE_REASON.KEYDOWN &&\n        e.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE) {\n      e.stopPropagation();\n      this.active = true;\n      // It might already be active so manually focus\n      this.listItemRoot.focus();\n      return;\n    }\n    this.active = false;\n  }\n\n  protected async onSubMenuKeydown(e: KeyboardEvent) {\n    // Stop propagation so that we don't accidentally close every parent menu.\n    // Additionally, we want to isolate things like the typeahead keydowns\n    // from bubbling up to the parent menu and confounding things.\n    e.stopPropagation();\n    const shouldClose = this.isSubmenuCloseKey(e.code);\n\n    if (!shouldClose) return;\n\n    this.close(() => {\n      List.deactivateActiveItem(this.submenuEl!.items);\n      this.listItemRoot.focus();\n      this.active = true;\n    });\n  }\n\n  /**\n   * Shows the submenu.\n   *\n   * @param onOpened A function to call after the menu is opened.\n   */\n  show(onOpened = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu) return;\n\n    menu.quick = true;\n    // Submenus are in overflow when not fixed. Can remove once we have native\n    // popup support\n    menu.hasOverflow = true;\n    menu.anchorCorner = this.anchorCorner;\n    menu.menuCorner = this.menuCorner;\n    menu.anchor = this;\n    // We manually set focus with `active` on keyboard navigation. And we\n    // want to focus the root on hover, so the user can pick up navigation with\n    // keyboard after hover.\n    menu.defaultFocus = 'LIST_ROOT';\n    menu.skipRestoreFocus = true;\n\n    // Menu could already be opened because of mouse interaction\n    const menuAlreadyOpen = menu.open;\n    menu.show();\n\n    // Deactivate other items. This can be the case if the user has tabbed\n    // around the menu and then mouses over an md-sub-menu.\n    this.dispatchEvent(new DeactivateItemsEvent());\n    this.active = true;\n\n    // This is the case of mouse hovering when already opened via keyboard or\n    // vice versa\n    if (menuAlreadyOpen) {\n      onOpened();\n    } else {\n      menu.addEventListener('opened', onOpened, {once: true});\n    }\n  }\n\n  /**\n   * Closes the submenu.\n   *\n   * @param onClosed A function to call after the menu is closed.\n   */\n  close(onClosed = () => {}) {\n    const menu = this.submenuEl;\n    if (!menu || !menu.open) return;\n\n    menu.quick = true;\n    menu.close();\n    this.active = false;\n    menu.addEventListener('closed', onClosed, {once: true});\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should open\n   * the submenu. This is RTL-aware. By default, left, right, space, or enter.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should open the submenu.\n   */\n  protected isSubmenuOpenKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.LEFT : NAVIGABLE_KEY.RIGHT;\n    switch (code) {\n      case arrowEnterKey:\n      case SELECTION_KEY.SPACE:\n      case SELECTION_KEY.ENTER:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should close\n   * the submenu. This is RTL-aware. By default right, left, or escape.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should close the submenu.\n   */\n  protected isSubmenuCloseKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.RIGHT : NAVIGABLE_KEY.LEFT;\n    switch (code) {\n      case arrowEnterKey:\n      case KEYDOWN_CLOSE_KEYS.ESCAPE:\n        return true;\n      default:\n        return false;\n    }\n  }\n}\n"]}

package/menu/lib/surfacePositionController.d.ts

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { StyleInfo } from 'lit/directives/style-map.js';
+/**
+ * A corner of a box in the standard logical property style of <block>_<inline>
+ */
+export declare type Corner = 'END_START' | 'END_END' | 'START_START' | 'START_END';
+/**
+ * The configurable options for the surface position controller.
+ */
+export interface SurfacePositionControllerProperties {
+    /**
+     * The corner of the anchor to align the surface's position.
+     */
+    anchorCorner: Corner;
+    /**
+     * The corner of the surface to align to the given anchor corner.
+     */
+    surfaceCorner: Corner;
+    /**
+     * The HTMLElement reference of the surface to be positioned.
+     */
+    surfaceEl: HTMLElement | null;
+    /**
+     * The HTMLElement reference of the anchor to align to.
+     */
+    anchorEl: HTMLElement | null;
+    /**
+     * Whether or not the calculation should be relative to the top layer rather
+     * than relative to the parent of the anchor.
+     *
+     * Examples for `isTopLayer:true`:
+     *
+     * - If there is no `position:relative` in the given parent tree and the
+     *   surface is `position:absolute`
+     * - If the surface is `position:fixed`
+     * - If the surface is in the "top layer"
+     * - The anchor and the surface do not share a common `position:relative`
+     *   ancestor
+     */
+    isTopLayer: boolean;
+    /**
+     * Whether or not the surface should be "open" and visible
+     */
+    isOpen: boolean;
+    /**
+     * The number of pixels in which to offset from the inline axis relative to
+     * logical property.
+     *
+     * Positive is right in LTR and left in RTL.
+     */
+    xOffset: number;
+    /**
+     * The number of pixes in which to offset the block axis.
+     *
+     * Positive is down and negative is up.
+     */
+    yOffset: number;
+    /**
+     * A function to call after the surface has been positioned.
+     */
+    onOpen: () => void;
+    /**
+     * A function to call before the surface should be closed. (A good time to
+     * perform animations while the surface is still visible)
+     */
+    beforeClose: () => Promise<void>;
+    /**
+     * A function to call after the surface has been closed.
+     */
+    onClose: () => void;
+}
+/**
+ * Given a surface, an anchor, corners, and some options, this surface will
+ * calculate the position of a surface to align the two given corners and keep
+ * the surface inside the window viewport. It also provides a StyleInfo map that
+ * can be applied to the surface to handle visiblility and position.
+ */
+export declare class SurfacePositionController implements ReactiveController {
+    private readonly host;
+    private readonly getProperties;
+    private surfaceStylesInternal;
+    private lastValues;
+    /**
+     * @param host The host to connect the controller to.
+     * @param getProperties A function that returns the properties for the
+     * controller.
+     */
+    constructor(host: ReactiveControllerHost, getProperties: () => SurfacePositionControllerProperties);
+    /**
+     * The StyleInfo map to apply to the surface via Lit's stylemap
+     */
+    get surfaceStyles(): StyleInfo;
+    /**
+     * Calculates the surface's new position required so that the surface's
+     * `surfaceCorner` aligns to the anchor's `anchorCorner` while keeping the
+     * surface inside the window viewport. This positioning also respects RTL by
+     * checking `getComputedStyle()` on the surface element.
+     */
+    position(): Promise<void>;
+    hostUpdate(): void;
+    hostUpdated(): void;
+    /**
+     * Checks whether the properties passed into the controller have changed since
+     * the last positioning. If so, it will reposition if the surface is open or
+     * close it if the surface should close.
+     */
+    private onUpdate;
+    /**
+     * Hides the surface.
+     */
+    private close;
+}