@material/web 1.0.0 → 1.0.2-nightly.3d8c7ac.0

package/menu/internal/controllers/surfacePositionController.js

@@ -34,7 +34,9 @@ export class SurfacePositionController {
         };
         // Previous values stored for change detection. Open change detection is
         // calculated separately so initialize it here.
-        this.lastValues = { isOpen: false };
+        this.lastValues = {
+            isOpen: false,
+        };
         this.host.addController(this);
     }
     /**
@@ -56,6 +58,22 @@ export class SurfacePositionController {
         if (!surfaceEl || !anchorEl) {
             return;
         }
+        // Store these before we potentially resize the window with the next set of
+        // lines
+        const windowInnerWidth = window.innerWidth;
+        const windowInnerHeight = window.innerHeight;
+        const div = document.createElement('div');
+        div.style.opacity = '0';
+        div.style.position = 'fixed';
+        div.style.display = 'block';
+        div.style.inset = '0';
+        document.body.appendChild(div);
+        const scrollbarTestRect = div.getBoundingClientRect();
+        div.remove();
+        // Calculate the widths of the scrollbars in the inline and block directions
+        // to account for window-relative calculations.
+        const blockScrollbarHeight = window.innerHeight - scrollbarTestRect.bottom;
+        const inlineScrollbarWidth = window.innerWidth - scrollbarTestRect.right;
         // Paint the surface transparently so that we can get the position and the
         // rect info of the surface.
         this.surfaceStylesInternal = {
@@ -65,46 +83,61 @@ export class SurfacePositionController {
         // Wait for it to be visible.
         this.host.requestUpdate();
         await this.host.updateComplete;
-        const surfaceRect = surfaceEl.getSurfacePositionClientRect ?
-            surfaceEl.getSurfacePositionClientRect() :
-            surfaceEl.getBoundingClientRect();
-        const anchorRect = anchorEl.getSurfacePositionClientRect ?
-            anchorEl.getSurfacePositionClientRect() :
-            anchorEl.getBoundingClientRect();
+        // Safari has a bug that makes popovers render incorrectly if the node is
+        // made visible + Animation Frame before calling showPopover().
+        // https://bugs.webkit.org/show_bug.cgi?id=264069
+        // also the cast is required due to differing TS types in Google and OSS.
+        if (surfaceEl.popover &&
+            surfaceEl.isConnected) {
+            surfaceEl.showPopover();
+        }
+        const surfaceRect = surfaceEl.getSurfacePositionClientRect
+            ? surfaceEl.getSurfacePositionClientRect()
+            : surfaceEl.getBoundingClientRect();
+        const anchorRect = anchorEl.getSurfacePositionClientRect
+            ? anchorEl.getSurfacePositionClientRect()
+            : anchorEl.getBoundingClientRect();
         const [surfaceBlock, surfaceInline] = surfaceCorner.split('-');
         const [anchorBlock, anchorInline] = anchorCorner.split('-');
         // LTR depends on the direction of the SURFACE not the anchor.
         const isLTR = getComputedStyle(surfaceEl).direction === 'ltr';
         /*
-         * A diagram that helps describe some of the variables used in the following
-         * calculations.
+         * For more on inline and block dimensions, see MDN article:
+         * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
          *
-         * ┌───── inline/blockTopLayerOffset
-         * │       │
-         * │     ┌─▼───┐                  Window
-         * │    ┌┼─────┴────────────────────────┐
-         * │    ││                              │
-         * └──► ││  ┌──inline/blockAnchorOffset │
-         *      ││  │     │                     │
-         *      └┤  │  ┌──▼───┐                 │
-         *       │  │ ┌┼──────┤                 │
-         *       │  └─►│Anchor│                 │
-         *       │    └┴──────┘                 │
-         *       │                              │
-         *       │     ┌────────────────────────┼────┐
-         *       │     │ Surface                │    │
-         *       │     │                        │    │
-         *       │     │                        │    │
-         *       │     │                        │    │
-         *       │     │                        │    │
-         *       │     │                        │    │
-         *       └─────┼────────────────────────┘    ├┐
-         *             │ inline/blockOOBCorrection   ││
-         *             │                         │   ││
-         *             │                         ├──►││
-         *             │                         │   ││
-         *             └────────────────────────┐▼───┼┘
-         *                                      └────┘
+         * ┌───── inline/blockDocumentOffset  inlineScrollbarWidth
+         * │       │                                    │
+         * │     ┌─▼─────┐                              │Document
+         * │    ┌┼───────┴──────────────────────────────┼────────┐
+         * │    ││                                      │        │
+         * └──► ││ ┌───── inline/blockWindowOffset      │        │
+         *      ││ │       │                            ▼        │
+         *      ││ │     ┌─▼───┐                 Window┌┐        │
+         *      └┤ │    ┌┼─────┴───────────────────────┼│        │
+         *       │ │    ││                             ││        │
+         *       │ └──► ││  ┌──inline/blockAnchorOffset││        │
+         *       │      ││  │     │                    ││        │
+         *       │      └┤  │  ┌──▼───┐                ││        │
+         *       │       │  │ ┌┼──────┤                ││        │
+         *       │       │  └─►│Anchor│                ││        │
+         *       │       │    └┴──────┘                ││        │
+         *       │       │                             ││        │
+         *       │       │     ┌───────────────────────┼┼────┐   │
+         *       │       │     │ Surface               ││    │   │
+         *       │       │     │                       ││    │   │
+         *       │       │     │                       ││    │   │
+         *       │       │     │                       ││    │   │
+         *       │       │     │                       ││    │   │
+         *       │      ┌┼─────┼───────────────────────┼│    │   │
+         *       │   ┌─►┴──────┼────────────────────────┘    ├┐  │
+         *       │   │         │ inline/blockOOBCorrection   ││  │
+         *       │   │         │                         │   ││  │
+         *       │   │         │                         ├──►├│  │
+         *       │   │         │                         │   ││  │
+         *       │   │         └────────────────────────┐▼───┼┘  │
+         *       │  blockScrollbarHeight                └────┘   │
+         *       │                                               │
+         *       └───────────────────────────────────────────────┘
          */
         // Calculate the block positioning properties
         let { blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty } = this.calculateBlock({
@@ -113,7 +146,9 @@ export class SurfacePositionController {
             anchorBlock,
             surfaceBlock,
             yOffset,
-            positioning
+            positioning,
+            windowInnerHeight,
+            blockScrollbarHeight,
         });
         // If the surface should be out of bounds in the block direction, flip the
         // surface and anchor corner block values and recalculate
@@ -126,12 +161,13 @@ export class SurfacePositionController {
                 anchorBlock: flippedAnchorBlock,
                 surfaceBlock: flippedSurfaceBlock,
                 yOffset,
-                positioning
+                positioning,
+                windowInnerHeight,
+                blockScrollbarHeight,
             });
             // In the case that the flipped verion would require less out of bounds
             // correcting, use the flipped corner block values
-            if (blockOutOfBoundsCorrection >
-                flippedBlock.blockOutOfBoundsCorrection) {
+            if (blockOutOfBoundsCorrection > flippedBlock.blockOutOfBoundsCorrection) {
                 blockInset = flippedBlock.blockInset;
                 blockOutOfBoundsCorrection = flippedBlock.blockOutOfBoundsCorrection;
                 surfaceBlockProperty = flippedBlock.surfaceBlockProperty;
@@ -146,6 +182,8 @@ export class SurfacePositionController {
             xOffset,
             positioning,
             isLTR,
+            windowInnerWidth,
+            inlineScrollbarWidth,
         });
         // If the surface should be out of bounds in the inline direction, flip the
         // surface and anchor corner inline values and recalculate
@@ -160,6 +198,8 @@ export class SurfacePositionController {
                 xOffset,
                 positioning,
                 isLTR,
+                windowInnerWidth,
+                inlineScrollbarWidth,
             });
             // In the case that the flipped verion would require less out of bounds
             // correcting, use the flipped corner inline values
@@ -187,13 +227,11 @@ export class SurfacePositionController {
         if (repositionStrategy === 'resize') {
             // Add a height property to the styles if there is block height correction
             if (blockOutOfBoundsCorrection) {
-                this.surfaceStylesInternal['height'] =
-                    `${surfaceRect.height - blockOutOfBoundsCorrection}px`;
+                this.surfaceStylesInternal['height'] = `${surfaceRect.height - blockOutOfBoundsCorrection}px`;
             }
             // Add a width property to the styles if there is block height correction
             if (inlineOutOfBoundsCorrection) {
-                this.surfaceStylesInternal['width'] =
-                    `${surfaceRect.width - inlineOutOfBoundsCorrection}px`;
+                this.surfaceStylesInternal['width'] = `${surfaceRect.width - inlineOutOfBoundsCorrection}px`;
             }
         }
         this.host.requestUpdate();
@@ -203,10 +241,11 @@ export class SurfacePositionController {
      * for the surface in the block direction.
      */
     calculateBlock(config) {
-        const { surfaceRect, anchorRect, anchorBlock, surfaceBlock, yOffset, positioning, } = config;
+        const { surfaceRect, anchorRect, anchorBlock, surfaceBlock, yOffset, positioning, windowInnerHeight, blockScrollbarHeight, } = config;
         // We use number booleans to multiply values rather than `if` / ternary
         // statements because it _heavily_ cuts down on nesting and readability
-        const relativeToWindow = positioning === 'fixed' ? 1 : 0;
+        const relativeToWindow = positioning === 'fixed' || positioning === 'document' ? 1 : 0;
+        const relativeToDocument = positioning === 'document' ? 1 : 0;
         const isSurfaceBlockStart = surfaceBlock === 'start' ? 1 : 0;
         const isSurfaceBlockEnd = surfaceBlock === 'end' ? 1 : 0;
         const isOneBlockEnd = anchorBlock !== surfaceBlock ? 1 : 0;
@@ -214,13 +253,19 @@ export class SurfacePositionController {
         const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset;
         // The absolute block position of the anchor relative to window
         const blockTopLayerOffset = isSurfaceBlockStart * anchorRect.top +
-            isSurfaceBlockEnd * (window.innerHeight - anchorRect.bottom);
+            isSurfaceBlockEnd *
+                (windowInnerHeight - anchorRect.bottom - blockScrollbarHeight);
+        const blockDocumentOffset = isSurfaceBlockStart * window.scrollY - isSurfaceBlockEnd * window.scrollY;
         // If the surface's block would be out of bounds of the window, move it back
         // in
-        const blockOutOfBoundsCorrection = Math.abs(Math.min(0, window.innerHeight - blockTopLayerOffset - blockAnchorOffset -
+        const blockOutOfBoundsCorrection = Math.abs(Math.min(0, windowInnerHeight -
+            blockTopLayerOffset -
+            blockAnchorOffset -
             surfaceRect.height));
         // The block logical value of the surface
-        const blockInset = relativeToWindow * blockTopLayerOffset + blockAnchorOffset;
+        const blockInset = relativeToWindow * blockTopLayerOffset +
+            relativeToDocument * blockDocumentOffset +
+            blockAnchorOffset;
         const surfaceBlockProperty = surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end';
         return { blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty };
     }
@@ -229,10 +274,11 @@ export class SurfacePositionController {
      * for the surface in the inline direction.
      */
     calculateInline(config) {
-        const { isLTR: isLTRBool, surfaceInline, anchorInline, anchorRect, surfaceRect, xOffset, positioning, } = config;
+        const { isLTR: isLTRBool, surfaceInline, anchorInline, anchorRect, surfaceRect, xOffset, positioning, windowInnerWidth, inlineScrollbarWidth, } = config;
         // We use number booleans to multiply values rather than `if` / ternary
         // statements because it _heavily_ cuts down on nesting and readability
-        const relativeToWindow = positioning === 'fixed' ? 1 : 0;
+        const relativeToWindow = positioning === 'fixed' || positioning === 'document' ? 1 : 0;
+        const relativeToDocument = positioning === 'document' ? 1 : 0;
         const isLTR = isLTRBool ? 1 : 0;
         const isRTL = isLTRBool ? 0 : 1;
         const isSurfaceInlineStart = surfaceInline === 'start' ? 1 : 0;
@@ -242,19 +288,44 @@ export class SurfacePositionController {
         const inlineAnchorOffset = isOneInlineEnd * anchorRect.width + xOffset;
         // The inline position of the anchor relative to window in LTR
         const inlineTopLayerOffsetLTR = isSurfaceInlineStart * anchorRect.left +
-            isSurfaceInlineEnd * (window.innerWidth - anchorRect.right);
+            isSurfaceInlineEnd *
+                (windowInnerWidth - anchorRect.right - inlineScrollbarWidth);
         // The inline position of the anchor relative to window in RTL
-        const inlineTopLayerOffsetRTL = isSurfaceInlineStart * (window.innerWidth - anchorRect.right) +
+        const inlineTopLayerOffsetRTL = isSurfaceInlineStart *
+            (windowInnerWidth - anchorRect.right - inlineScrollbarWidth) +
             isSurfaceInlineEnd * anchorRect.left;
         // The inline position of the anchor relative to window
         const inlineTopLayerOffset = isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL;
+        // The inline position of the anchor relative to window in LTR
+        const inlineDocumentOffsetLTR = isSurfaceInlineStart * window.scrollX -
+            isSurfaceInlineEnd * window.scrollX;
+        // The inline position of the anchor relative to window in RTL
+        const inlineDocumentOffsetRTL = isSurfaceInlineEnd * window.scrollX -
+            isSurfaceInlineStart * window.scrollX;
+        // The inline position of the anchor relative to window
+        const inlineDocumentOffset = isLTR * inlineDocumentOffsetLTR + isRTL * inlineDocumentOffsetRTL;
         // If the surface's inline would be out of bounds of the window, move it
         // back in
-        const inlineOutOfBoundsCorrection = Math.abs(Math.min(0, window.innerWidth - inlineTopLayerOffset - inlineAnchorOffset -
+        const inlineOutOfBoundsCorrection = Math.abs(Math.min(0, windowInnerWidth -
+            inlineTopLayerOffset -
+            inlineAnchorOffset -
             surfaceRect.width));
         // The inline logical value of the surface
-        const inlineInset = relativeToWindow * inlineTopLayerOffset + inlineAnchorOffset;
-        const surfaceInlineProperty = surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end';
+        const inlineInset = relativeToWindow * inlineTopLayerOffset +
+            inlineAnchorOffset +
+            relativeToDocument * inlineDocumentOffset;
+        let surfaceInlineProperty = surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end';
+        // There are cases where the element is RTL but the root of the page is not.
+        // In these cases we want to not use logical properties.
+        if (positioning === 'document' || positioning === 'fixed') {
+            if ((surfaceInline === 'start' && isLTRBool) ||
+                (surfaceInline === 'end' && !isLTRBool)) {
+                surfaceInlineProperty = 'left';
+            }
+            else {
+                surfaceInlineProperty = 'right';
+            }
+        }
         return {
             inlineInset,
             inlineOutOfBoundsCorrection,
@@ -277,7 +348,7 @@ export class SurfacePositionController {
         let hasChanged = false;
         for (const [key, value] of Object.entries(props)) {
             // tslint:disable-next-line
-            hasChanged = hasChanged || (value !== this.lastValues[key]);
+            hasChanged = hasChanged || value !== this.lastValues[key];
             if (hasChanged)
                 break;
         }
@@ -311,6 +382,13 @@ export class SurfacePositionController {
             'display': 'none',
         };
         this.host.requestUpdate();
+        const surfaceEl = this.getProperties().surfaceEl;
+        // The following type casts are required due to differing TS types in Google
+        // and open source.
+        if (surfaceEl?.popover &&
+            surfaceEl?.isConnected) {
+            surfaceEl.hidePopover();
+        }
     }
 }
 //# sourceMappingURL=surfacePositionController.js.map

package/menu/internal/controllers/surfacePositionController.js.map

@@ -1 +1 @@
-{"version":3,"file":"surfacePositionController.js","sourceRoot":"","sources":["surfacePositionController.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 {ReactiveController, ReactiveControllerHost} from 'lit';\nimport {StyleInfo} from 'lit/directives/style-map.js';\n\n/**\n * An enum of supported Menu corners\n */\n// tslint:disable-next-line:enforce-name-casing We are mimicking enum style\nexport const Corner = {\n  END_START: 'end-start',\n  END_END: 'end-end',\n  START_START: 'start-start',\n  START_END: 'start-end',\n} as const;\n\n/**\n * A corner of a box in the standard logical property style of <block>_<inline>\n */\nexport type Corner = typeof Corner[keyof typeof Corner];\n\n/**\n * An interface that provides a method to customize the rect from which to\n * calculate the anchor positioning. Useful for when you want a surface to\n * anchor to an element in your shadow DOM rather than the host element.\n */\nexport interface SurfacePositionTarget extends HTMLElement {\n  getSurfacePositionClientRect?: () => DOMRect;\n}\n\n/**\n * The configurable options for the surface position controller.\n */\nexport interface SurfacePositionControllerProperties {\n  /**\n   * The corner of the anchor to align the surface's position.\n   */\n  anchorCorner: Corner;\n  /**\n   * The corner of the surface to align to the given anchor corner.\n   */\n  surfaceCorner: Corner;\n  /**\n   * The HTMLElement reference of the surface to be positioned.\n   */\n  surfaceEl: SurfacePositionTarget|null;\n  /**\n   * The HTMLElement reference of the anchor to align to.\n   */\n  anchorEl: SurfacePositionTarget|null;\n  /**\n   * Whether the positioning algorithim should calculate relative to the parent\n   * of the anchor element (absolute) or relative to the window (fixed).\n   *\n   * Examples for `position = 'fixed'`:\n   *\n   * - If there is no `position:relative` in the given parent tree and the\n   *   surface is `position:absolute`\n   * - If the surface is `position:fixed`\n   * - If the surface is in the \"top layer\"\n   * - The anchor and the surface do not share a common `position:relative`\n   *   ancestor\n   */\n  positioning: 'absolute'|'fixed';\n  /**\n   * Whether or not the surface should be \"open\" and visible\n   */\n  isOpen: boolean;\n  /**\n   * The number of pixels in which to offset from the inline axis relative to\n   * logical property.\n   *\n   * Positive is right in LTR and left in RTL.\n   */\n  xOffset: number;\n  /**\n   * The number of pixes in which to offset the block axis.\n   *\n   * Positive is down and negative is up.\n   */\n  yOffset: number;\n  /**\n   * The strategy to follow when repositioning the menu to stay inside the\n   * viewport. \"move\" will simply move the surface to stay in the viewport.\n   * \"resize\" will attempt to resize the surface.\n   *\n   * Both strategies will still attempt to flip the anchor and surface corners.\n   */\n  repositionStrategy: 'move'|'resize';\n  /**\n   * A function to call after the surface has been positioned.\n   */\n  onOpen: () => void;\n  /**\n   * A function to call before the surface should be closed. (A good time to\n   * perform animations while the surface is still visible)\n   */\n  beforeClose: () => Promise<void>;\n  /**\n   * A function to call after the surface has been closed.\n   */\n  onClose: () => void;\n}\n\n/**\n * Given a surface, an anchor, corners, and some options, this surface will\n * calculate the position of a surface to align the two given corners and keep\n * the surface inside the window viewport. It also provides a StyleInfo map that\n * can be applied to the surface to handle visiblility and position.\n */\nexport class SurfacePositionController implements ReactiveController {\n  // The current styles to apply to the surface.\n  private surfaceStylesInternal: StyleInfo = {\n    'display': 'none',\n  };\n  // Previous values stored for change detection. Open change detection is\n  // calculated separately so initialize it here.\n  private lastValues: SurfacePositionControllerProperties = {isOpen: false} as\n      SurfacePositionControllerProperties;\n\n  /**\n   * @param host The host to connect the controller to.\n   * @param getProperties A function that returns the properties for the\n   * controller.\n   */\n  constructor(\n      private readonly host: ReactiveControllerHost,\n      private readonly getProperties: () => SurfacePositionControllerProperties,\n  ) {\n    this.host.addController(this);\n  }\n\n  /**\n   * The StyleInfo map to apply to the surface via Lit's stylemap\n   */\n  get surfaceStyles() {\n    return this.surfaceStylesInternal;\n  }\n\n  /**\n   * Calculates the surface's new position required so that the surface's\n   * `surfaceCorner` aligns to the anchor's `anchorCorner` while keeping the\n   * surface inside the window viewport. This positioning also respects RTL by\n   * checking `getComputedStyle()` on the surface element.\n   */\n  async position() {\n    const {\n      surfaceEl,\n      anchorEl,\n      anchorCorner: anchorCornerRaw,\n      surfaceCorner: surfaceCornerRaw,\n      positioning,\n      xOffset,\n      yOffset,\n      repositionStrategy,\n    } = this.getProperties();\n    const anchorCorner = anchorCornerRaw.toLowerCase().trim();\n    const surfaceCorner = surfaceCornerRaw.toLowerCase().trim();\n\n    if (!surfaceEl || !anchorEl) {\n      return;\n    }\n\n    // Paint the surface transparently so that we can get the position and the\n    // rect info of the surface.\n    this.surfaceStylesInternal = {\n      'display': 'block',\n      'opacity': '0',\n    };\n\n    // Wait for it to be visible.\n    this.host.requestUpdate();\n    await this.host.updateComplete;\n\n    const surfaceRect = surfaceEl.getSurfacePositionClientRect ?\n        surfaceEl.getSurfacePositionClientRect() :\n        surfaceEl.getBoundingClientRect();\n    const anchorRect = anchorEl.getSurfacePositionClientRect ?\n        anchorEl.getSurfacePositionClientRect() :\n        anchorEl.getBoundingClientRect();\n    const [surfaceBlock, surfaceInline] =\n        surfaceCorner.split('-') as Array<'start'|'end'>;\n    const [anchorBlock, anchorInline] =\n        anchorCorner.split('-') as Array<'start'|'end'>;\n\n    // LTR depends on the direction of the SURFACE not the anchor.\n    const isLTR =\n        getComputedStyle(surfaceEl as HTMLElement).direction === 'ltr';\n\n    /*\n     * A diagram that helps describe some of the variables used in the following\n     * calculations.\n     *\n     * ┌───── inline/blockTopLayerOffset\n     * │       │\n     * │     ┌─▼───┐                  Window\n     * │    ┌┼─────┴────────────────────────┐\n     * │    ││                              │\n     * └──► ││  ┌──inline/blockAnchorOffset │\n     *      ││  │     │                     │\n     *      └┤  │  ┌──▼───┐                 │\n     *       │  │ ┌┼──────┤                 │\n     *       │  └─►│Anchor│                 │\n     *       │    └┴──────┘                 │\n     *       │                              │\n     *       │     ┌────────────────────────┼────┐\n     *       │     │ Surface                │    │\n     *       │     │                        │    │\n     *       │     │                        │    │\n     *       │     │                        │    │\n     *       │     │                        │    │\n     *       │     │                        │    │\n     *       └─────┼────────────────────────┘    ├┐\n     *             │ inline/blockOOBCorrection   ││\n     *             │                         │   ││\n     *             │                         ├──►││\n     *             │                         │   ││\n     *             └────────────────────────┐▼───┼┘\n     *                                      └────┘\n     */\n\n    // Calculate the block positioning properties\n    let {blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty} =\n        this.calculateBlock({\n          surfaceRect,\n          anchorRect,\n          anchorBlock,\n          surfaceBlock,\n          yOffset,\n          positioning\n        });\n\n    // If the surface should be out of bounds in the block direction, flip the\n    // surface and anchor corner block values and recalculate\n    if (blockOutOfBoundsCorrection) {\n      const flippedSurfaceBlock = surfaceBlock === 'start' ? 'end' : 'start';\n      const flippedAnchorBlock = anchorBlock === 'start' ? 'end' : 'start';\n\n      const flippedBlock = this.calculateBlock({\n        surfaceRect,\n        anchorRect,\n        anchorBlock: flippedAnchorBlock,\n        surfaceBlock: flippedSurfaceBlock,\n        yOffset,\n        positioning\n      });\n\n      // In the case that the flipped verion would require less out of bounds\n      // correcting, use the flipped corner block values\n      if (blockOutOfBoundsCorrection >\n          flippedBlock.blockOutOfBoundsCorrection) {\n        blockInset = flippedBlock.blockInset;\n        blockOutOfBoundsCorrection = flippedBlock.blockOutOfBoundsCorrection;\n        surfaceBlockProperty = flippedBlock.surfaceBlockProperty;\n      }\n    }\n\n    // Calculate the inline positioning properties\n    let {inlineInset, inlineOutOfBoundsCorrection, surfaceInlineProperty} =\n        this.calculateInline({\n          surfaceRect,\n          anchorRect,\n          anchorInline,\n          surfaceInline,\n          xOffset,\n          positioning,\n          isLTR,\n        });\n\n    // If the surface should be out of bounds in the inline direction, flip the\n    // surface and anchor corner inline values and recalculate\n    if (inlineOutOfBoundsCorrection) {\n      const flippedSurfaceInline = surfaceInline === 'start' ? 'end' : 'start';\n      const flippedAnchorInline = anchorInline === 'start' ? 'end' : 'start';\n\n      const flippedInline = this.calculateInline({\n        surfaceRect,\n        anchorRect,\n        anchorInline: flippedAnchorInline,\n        surfaceInline: flippedSurfaceInline,\n        xOffset,\n        positioning,\n        isLTR,\n      });\n\n      // In the case that the flipped verion would require less out of bounds\n      // correcting, use the flipped corner inline values\n      if (Math.abs(inlineOutOfBoundsCorrection) >\n          Math.abs(flippedInline.inlineOutOfBoundsCorrection)) {\n        inlineInset = flippedInline.inlineInset;\n        inlineOutOfBoundsCorrection = flippedInline.inlineOutOfBoundsCorrection;\n        surfaceInlineProperty = flippedInline.surfaceInlineProperty;\n      }\n    }\n\n    // If we are simply repositioning the surface back inside the viewport,\n    // subtract the out of bounds correction values from the positioning.\n    if (repositionStrategy === 'move') {\n      blockInset = blockInset - blockOutOfBoundsCorrection;\n      inlineInset = inlineInset - inlineOutOfBoundsCorrection;\n    }\n\n    this.surfaceStylesInternal = {\n      'display': 'block',\n      'opacity': '1',\n      [surfaceBlockProperty]: `${blockInset}px`,\n      [surfaceInlineProperty]: `${inlineInset}px`,\n    };\n\n    // In the case that we are resizing the surface to stay inside the viewport\n    // we need to set height and width on the surface.\n    if (repositionStrategy === 'resize') {\n      // Add a height property to the styles if there is block height correction\n      if (blockOutOfBoundsCorrection) {\n        this.surfaceStylesInternal['height'] =\n            `${surfaceRect.height - blockOutOfBoundsCorrection}px`;\n      }\n\n      // Add a width property to the styles if there is block height correction\n      if (inlineOutOfBoundsCorrection) {\n        this.surfaceStylesInternal['width'] =\n            `${surfaceRect.width - inlineOutOfBoundsCorrection}px`;\n      }\n    }\n\n    this.host.requestUpdate();\n  }\n\n  /**\n   * Calculates the css property, the inset, and the out of bounds correction\n   * for the surface in the block direction.\n   */\n  private calculateBlock(config: {\n    surfaceRect: DOMRect,\n    anchorRect: DOMRect,\n    anchorBlock: 'start'|'end',\n    surfaceBlock: 'start'|'end',\n    yOffset: number,\n    positioning: 'absolute'|'fixed',\n  }) {\n    const {\n      surfaceRect,\n      anchorRect,\n      anchorBlock,\n      surfaceBlock,\n      yOffset,\n      positioning,\n    } = config;\n    // We use number booleans to multiply values rather than `if` / ternary\n    // statements because it _heavily_ cuts down on nesting and readability\n    const relativeToWindow = positioning === 'fixed' ? 1 : 0;\n    const isSurfaceBlockStart = surfaceBlock === 'start' ? 1 : 0;\n    const isSurfaceBlockEnd = surfaceBlock === 'end' ? 1 : 0;\n    const isOneBlockEnd = anchorBlock !== surfaceBlock ? 1 : 0;\n\n    // Whether or not to apply the height of the anchor\n    const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset;\n    // The absolute block position of the anchor relative to window\n    const blockTopLayerOffset = isSurfaceBlockStart * anchorRect.top +\n        isSurfaceBlockEnd * (window.innerHeight - anchorRect.bottom);\n    // If the surface's block would be out of bounds of the window, move it back\n    // in\n    const blockOutOfBoundsCorrection = Math.abs(Math.min(\n        0,\n        window.innerHeight - blockTopLayerOffset - blockAnchorOffset -\n            surfaceRect.height));\n\n\n    // The block logical value of the surface\n    const blockInset =\n        relativeToWindow * blockTopLayerOffset + blockAnchorOffset;\n\n    const surfaceBlockProperty =\n        surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end';\n\n    return {blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty};\n  }\n\n  /**\n   * Calculates the css property, the inset, and the out of bounds correction\n   * for the surface in the inline direction.\n   */\n  private calculateInline(config: {\n    isLTR: boolean,\n    surfaceInline: 'start'|'end',\n    anchorInline: 'start'|'end',\n    anchorRect: DOMRect,\n    surfaceRect: DOMRect,\n    xOffset: number,\n    positioning: 'absolute'|'fixed',\n  }) {\n    const {\n      isLTR: isLTRBool,\n      surfaceInline,\n      anchorInline,\n      anchorRect,\n      surfaceRect,\n      xOffset,\n      positioning,\n    } = config;\n    // We use number booleans to multiply values rather than `if` / ternary\n    // statements because it _heavily_ cuts down on nesting and readability\n    const relativeToWindow = positioning === 'fixed' ? 1 : 0;\n    const isLTR = isLTRBool ? 1 : 0;\n    const isRTL = isLTRBool ? 0 : 1;\n    const isSurfaceInlineStart = surfaceInline === 'start' ? 1 : 0;\n    const isSurfaceInlineEnd = surfaceInline === 'end' ? 1 : 0;\n    const isOneInlineEnd = anchorInline !== surfaceInline ? 1 : 0;\n\n    // Whether or not to apply the width of the anchor\n    const inlineAnchorOffset = isOneInlineEnd * anchorRect.width + xOffset;\n    // The inline position of the anchor relative to window in LTR\n    const inlineTopLayerOffsetLTR = isSurfaceInlineStart * anchorRect.left +\n        isSurfaceInlineEnd * (window.innerWidth - anchorRect.right);\n    // The inline position of the anchor relative to window in RTL\n    const inlineTopLayerOffsetRTL =\n        isSurfaceInlineStart * (window.innerWidth - anchorRect.right) +\n        isSurfaceInlineEnd * anchorRect.left;\n    // The inline position of the anchor relative to window\n    const inlineTopLayerOffset =\n        isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL;\n\n    // If the surface's inline would be out of bounds of the window, move it\n    // back in\n    const inlineOutOfBoundsCorrection = Math.abs(Math.min(\n        0,\n        window.innerWidth - inlineTopLayerOffset - inlineAnchorOffset -\n            surfaceRect.width));\n\n\n    // The inline logical value of the surface\n    const inlineInset =\n        relativeToWindow * inlineTopLayerOffset + inlineAnchorOffset;\n\n    const surfaceInlineProperty =\n        surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end';\n\n    return {\n      inlineInset,\n      inlineOutOfBoundsCorrection,\n      surfaceInlineProperty,\n    };\n  }\n\n  hostUpdate() {\n    this.onUpdate();\n  }\n\n  hostUpdated() {\n    this.onUpdate();\n  }\n\n  /**\n   * Checks whether the properties passed into the controller have changed since\n   * the last positioning. If so, it will reposition if the surface is open or\n   * close it if the surface should close.\n   */\n  private async onUpdate() {\n    const props = this.getProperties();\n    let hasChanged = false;\n    for (const [key, value] of Object.entries(props)) {\n      // tslint:disable-next-line\n      hasChanged = hasChanged || (value !== (this.lastValues as any)[key]);\n      if (hasChanged) break;\n    }\n\n    const openChanged = this.lastValues.isOpen !== props.isOpen;\n    const hasAnchor = !!props.anchorEl;\n    const hasSurface = !!props.surfaceEl;\n\n    if (hasChanged && hasAnchor && hasSurface) {\n      // Only update isOpen, because if it's closed, we do not want to waste\n      // time on a useless reposition calculation. So save the other \"dirty\"\n      // values until next time it opens.\n      this.lastValues.isOpen = props.isOpen;\n\n      if (props.isOpen) {\n        // We are going to do a reposition, so save the prop values for future\n        // dirty checking.\n        this.lastValues = props;\n\n        await this.position();\n        props.onOpen();\n      } else if (openChanged) {\n        await props.beforeClose();\n        this.close();\n        props.onClose();\n      }\n    }\n  }\n\n  /**\n   * Hides the surface.\n   */\n  private close() {\n    this.surfaceStylesInternal = {\n      'display': 'none',\n    };\n    this.host.requestUpdate();\n  }\n}\n"]}
+{"version":3,"file":"surfacePositionController.js","sourceRoot":"","sources":["surfacePositionController.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 {ReactiveController, ReactiveControllerHost} from 'lit';\nimport {StyleInfo} from 'lit/directives/style-map.js';\n\n/**\n * Declare popoverAPI functions and properties. See\n * https://developer.mozilla.org/en-US/docs/Web/API/Popover_API\n * Without this, closure will rename these functions. Can remove once these\n * functions make it into the typescript lib.\n */\ndeclare global {\n  interface HTMLElement {\n    showPopover(): void;\n    hidePopover(): void;\n    togglePopover(force: boolean): void;\n    popover: string | null;\n  }\n}\n\n/**\n * An enum of supported Menu corners\n */\n// tslint:disable-next-line:enforce-name-casing We are mimicking enum style\nexport const Corner = {\n  END_START: 'end-start',\n  END_END: 'end-end',\n  START_START: 'start-start',\n  START_END: 'start-end',\n} as const;\n\n/**\n * A corner of a box in the standard logical property style of <block>_<inline>\n */\nexport type Corner = (typeof Corner)[keyof typeof Corner];\n\n/**\n * An interface that provides a method to customize the rect from which to\n * calculate the anchor positioning. Useful for when you want a surface to\n * anchor to an element in your shadow DOM rather than the host element.\n */\nexport interface SurfacePositionTarget extends HTMLElement {\n  getSurfacePositionClientRect?: () => DOMRect;\n}\n\n/**\n * The configurable options for the surface position controller.\n */\nexport interface SurfacePositionControllerProperties {\n  /**\n   * The corner of the anchor to align the surface's position.\n   */\n  anchorCorner: Corner;\n  /**\n   * The corner of the surface to align to the given anchor corner.\n   */\n  surfaceCorner: Corner;\n  /**\n   * The HTMLElement reference of the surface to be positioned.\n   */\n  surfaceEl: SurfacePositionTarget | null;\n  /**\n   * The HTMLElement reference of the anchor to align to.\n   */\n  anchorEl: SurfacePositionTarget | null;\n  /**\n   * Whether the positioning algorithim should calculate relative to the parent\n   * of the anchor element (absolute) or relative to the window (fixed).\n   *\n   * Examples for `position = 'fixed'`:\n   *\n   * - If there is no `position:relative` in the given parent tree and the\n   *   surface is `position:absolute`\n   * - If the surface is `position:fixed`\n   * - If the surface is in the \"top layer\"\n   * - The anchor and the surface do not share a common `position:relative`\n   *   ancestor\n   */\n  positioning: 'absolute' | 'fixed' | 'document';\n  /**\n   * Whether or not the surface should be \"open\" and visible\n   */\n  isOpen: boolean;\n  /**\n   * The number of pixels in which to offset from the inline axis relative to\n   * logical property.\n   *\n   * Positive is right in LTR and left in RTL.\n   */\n  xOffset: number;\n  /**\n   * The number of pixes in which to offset the block axis.\n   *\n   * Positive is down and negative is up.\n   */\n  yOffset: number;\n  /**\n   * The strategy to follow when repositioning the menu to stay inside the\n   * viewport. \"move\" will simply move the surface to stay in the viewport.\n   * \"resize\" will attempt to resize the surface.\n   *\n   * Both strategies will still attempt to flip the anchor and surface corners.\n   */\n  repositionStrategy: 'move' | 'resize';\n  /**\n   * A function to call after the surface has been positioned.\n   */\n  onOpen: () => void;\n  /**\n   * A function to call before the surface should be closed. (A good time to\n   * perform animations while the surface is still visible)\n   */\n  beforeClose: () => Promise<void>;\n  /**\n   * A function to call after the surface has been closed.\n   */\n  onClose: () => void;\n}\n\n/**\n * Given a surface, an anchor, corners, and some options, this surface will\n * calculate the position of a surface to align the two given corners and keep\n * the surface inside the window viewport. It also provides a StyleInfo map that\n * can be applied to the surface to handle visiblility and position.\n */\nexport class SurfacePositionController implements ReactiveController {\n  // The current styles to apply to the surface.\n  private surfaceStylesInternal: StyleInfo = {\n    'display': 'none',\n  };\n  // Previous values stored for change detection. Open change detection is\n  // calculated separately so initialize it here.\n  private lastValues: SurfacePositionControllerProperties = {\n    isOpen: false,\n  } as SurfacePositionControllerProperties;\n\n  /**\n   * @param host The host to connect the controller to.\n   * @param getProperties A function that returns the properties for the\n   * controller.\n   */\n  constructor(\n    private readonly host: ReactiveControllerHost,\n    private readonly getProperties: () => SurfacePositionControllerProperties,\n  ) {\n    this.host.addController(this);\n  }\n\n  /**\n   * The StyleInfo map to apply to the surface via Lit's stylemap\n   */\n  get surfaceStyles() {\n    return this.surfaceStylesInternal;\n  }\n\n  /**\n   * Calculates the surface's new position required so that the surface's\n   * `surfaceCorner` aligns to the anchor's `anchorCorner` while keeping the\n   * surface inside the window viewport. This positioning also respects RTL by\n   * checking `getComputedStyle()` on the surface element.\n   */\n  async position() {\n    const {\n      surfaceEl,\n      anchorEl,\n      anchorCorner: anchorCornerRaw,\n      surfaceCorner: surfaceCornerRaw,\n      positioning,\n      xOffset,\n      yOffset,\n      repositionStrategy,\n    } = this.getProperties();\n    const anchorCorner = anchorCornerRaw.toLowerCase().trim();\n    const surfaceCorner = surfaceCornerRaw.toLowerCase().trim();\n\n    if (!surfaceEl || !anchorEl) {\n      return;\n    }\n\n    // Store these before we potentially resize the window with the next set of\n    // lines\n    const windowInnerWidth = window.innerWidth;\n    const windowInnerHeight = window.innerHeight;\n\n    const div = document.createElement('div');\n    div.style.opacity = '0';\n    div.style.position = 'fixed';\n    div.style.display = 'block';\n    div.style.inset = '0';\n    document.body.appendChild(div);\n    const scrollbarTestRect = div.getBoundingClientRect();\n    div.remove();\n\n    // Calculate the widths of the scrollbars in the inline and block directions\n    // to account for window-relative calculations.\n    const blockScrollbarHeight = window.innerHeight - scrollbarTestRect.bottom;\n    const inlineScrollbarWidth = window.innerWidth - scrollbarTestRect.right;\n\n    // Paint the surface transparently so that we can get the position and the\n    // rect info of the surface.\n    this.surfaceStylesInternal = {\n      'display': 'block',\n      'opacity': '0',\n    };\n\n    // Wait for it to be visible.\n    this.host.requestUpdate();\n    await this.host.updateComplete;\n\n    // Safari has a bug that makes popovers render incorrectly if the node is\n    // made visible + Animation Frame before calling showPopover().\n    // https://bugs.webkit.org/show_bug.cgi?id=264069\n    // also the cast is required due to differing TS types in Google and OSS.\n    if (\n      (surfaceEl as unknown as {popover: string}).popover &&\n      surfaceEl.isConnected\n    ) {\n      (surfaceEl as unknown as {showPopover: () => void}).showPopover();\n    }\n\n    const surfaceRect = surfaceEl.getSurfacePositionClientRect\n      ? surfaceEl.getSurfacePositionClientRect()\n      : surfaceEl.getBoundingClientRect();\n    const anchorRect = anchorEl.getSurfacePositionClientRect\n      ? anchorEl.getSurfacePositionClientRect()\n      : anchorEl.getBoundingClientRect();\n    const [surfaceBlock, surfaceInline] = surfaceCorner.split('-') as Array<\n      'start' | 'end'\n    >;\n    const [anchorBlock, anchorInline] = anchorCorner.split('-') as Array<\n      'start' | 'end'\n    >;\n\n    // LTR depends on the direction of the SURFACE not the anchor.\n    const isLTR =\n      getComputedStyle(surfaceEl as HTMLElement).direction === 'ltr';\n\n    /*\n     * For more on inline and block dimensions, see MDN article:\n     * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values\n     *\n     * ┌───── inline/blockDocumentOffset  inlineScrollbarWidth\n     * │       │                                    │\n     * │     ┌─▼─────┐                              │Document\n     * │    ┌┼───────┴──────────────────────────────┼────────┐\n     * │    ││                                      │        │\n     * └──► ││ ┌───── inline/blockWindowOffset      │        │\n     *      ││ │       │                            ▼        │\n     *      ││ │     ┌─▼───┐                 Window┌┐        │\n     *      └┤ │    ┌┼─────┴───────────────────────┼│        │\n     *       │ │    ││                             ││        │\n     *       │ └──► ││  ┌──inline/blockAnchorOffset││        │\n     *       │      ││  │     │                    ││        │\n     *       │      └┤  │  ┌──▼───┐                ││        │\n     *       │       │  │ ┌┼──────┤                ││        │\n     *       │       │  └─►│Anchor│                ││        │\n     *       │       │    └┴──────┘                ││        │\n     *       │       │                             ││        │\n     *       │       │     ┌───────────────────────┼┼────┐   │\n     *       │       │     │ Surface               ││    │   │\n     *       │       │     │                       ││    │   │\n     *       │       │     │                       ││    │   │\n     *       │       │     │                       ││    │   │\n     *       │       │     │                       ││    │   │\n     *       │      ┌┼─────┼───────────────────────┼│    │   │\n     *       │   ┌─►┴──────┼────────────────────────┘    ├┐  │\n     *       │   │         │ inline/blockOOBCorrection   ││  │\n     *       │   │         │                         │   ││  │\n     *       │   │         │                         ├──►├│  │\n     *       │   │         │                         │   ││  │\n     *       │   │         └────────────────────────┐▼───┼┘  │\n     *       │  blockScrollbarHeight                └────┘   │\n     *       │                                               │\n     *       └───────────────────────────────────────────────┘\n     */\n\n    // Calculate the block positioning properties\n    let {blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty} =\n      this.calculateBlock({\n        surfaceRect,\n        anchorRect,\n        anchorBlock,\n        surfaceBlock,\n        yOffset,\n        positioning,\n        windowInnerHeight,\n        blockScrollbarHeight,\n      });\n\n    // If the surface should be out of bounds in the block direction, flip the\n    // surface and anchor corner block values and recalculate\n    if (blockOutOfBoundsCorrection) {\n      const flippedSurfaceBlock = surfaceBlock === 'start' ? 'end' : 'start';\n      const flippedAnchorBlock = anchorBlock === 'start' ? 'end' : 'start';\n\n      const flippedBlock = this.calculateBlock({\n        surfaceRect,\n        anchorRect,\n        anchorBlock: flippedAnchorBlock,\n        surfaceBlock: flippedSurfaceBlock,\n        yOffset,\n        positioning,\n        windowInnerHeight,\n        blockScrollbarHeight,\n      });\n\n      // In the case that the flipped verion would require less out of bounds\n      // correcting, use the flipped corner block values\n      if (\n        blockOutOfBoundsCorrection > flippedBlock.blockOutOfBoundsCorrection\n      ) {\n        blockInset = flippedBlock.blockInset;\n        blockOutOfBoundsCorrection = flippedBlock.blockOutOfBoundsCorrection;\n        surfaceBlockProperty = flippedBlock.surfaceBlockProperty;\n      }\n    }\n\n    // Calculate the inline positioning properties\n    let {inlineInset, inlineOutOfBoundsCorrection, surfaceInlineProperty} =\n      this.calculateInline({\n        surfaceRect,\n        anchorRect,\n        anchorInline,\n        surfaceInline,\n        xOffset,\n        positioning,\n        isLTR,\n        windowInnerWidth,\n        inlineScrollbarWidth,\n      });\n\n    // If the surface should be out of bounds in the inline direction, flip the\n    // surface and anchor corner inline values and recalculate\n    if (inlineOutOfBoundsCorrection) {\n      const flippedSurfaceInline = surfaceInline === 'start' ? 'end' : 'start';\n      const flippedAnchorInline = anchorInline === 'start' ? 'end' : 'start';\n\n      const flippedInline = this.calculateInline({\n        surfaceRect,\n        anchorRect,\n        anchorInline: flippedAnchorInline,\n        surfaceInline: flippedSurfaceInline,\n        xOffset,\n        positioning,\n        isLTR,\n        windowInnerWidth,\n        inlineScrollbarWidth,\n      });\n\n      // In the case that the flipped verion would require less out of bounds\n      // correcting, use the flipped corner inline values\n      if (\n        Math.abs(inlineOutOfBoundsCorrection) >\n        Math.abs(flippedInline.inlineOutOfBoundsCorrection)\n      ) {\n        inlineInset = flippedInline.inlineInset;\n        inlineOutOfBoundsCorrection = flippedInline.inlineOutOfBoundsCorrection;\n        surfaceInlineProperty = flippedInline.surfaceInlineProperty;\n      }\n    }\n\n    // If we are simply repositioning the surface back inside the viewport,\n    // subtract the out of bounds correction values from the positioning.\n    if (repositionStrategy === 'move') {\n      blockInset = blockInset - blockOutOfBoundsCorrection;\n      inlineInset = inlineInset - inlineOutOfBoundsCorrection;\n    }\n\n    this.surfaceStylesInternal = {\n      'display': 'block',\n      'opacity': '1',\n      [surfaceBlockProperty]: `${blockInset}px`,\n      [surfaceInlineProperty]: `${inlineInset}px`,\n    };\n\n    // In the case that we are resizing the surface to stay inside the viewport\n    // we need to set height and width on the surface.\n    if (repositionStrategy === 'resize') {\n      // Add a height property to the styles if there is block height correction\n      if (blockOutOfBoundsCorrection) {\n        this.surfaceStylesInternal['height'] = `${\n          surfaceRect.height - blockOutOfBoundsCorrection\n        }px`;\n      }\n\n      // Add a width property to the styles if there is block height correction\n      if (inlineOutOfBoundsCorrection) {\n        this.surfaceStylesInternal['width'] = `${\n          surfaceRect.width - inlineOutOfBoundsCorrection\n        }px`;\n      }\n    }\n\n    this.host.requestUpdate();\n  }\n\n  /**\n   * Calculates the css property, the inset, and the out of bounds correction\n   * for the surface in the block direction.\n   */\n  private calculateBlock(config: {\n    surfaceRect: DOMRect;\n    anchorRect: DOMRect;\n    anchorBlock: 'start' | 'end';\n    surfaceBlock: 'start' | 'end';\n    yOffset: number;\n    positioning: 'absolute' | 'fixed' | 'document';\n    windowInnerHeight: number;\n    blockScrollbarHeight: number;\n  }) {\n    const {\n      surfaceRect,\n      anchorRect,\n      anchorBlock,\n      surfaceBlock,\n      yOffset,\n      positioning,\n      windowInnerHeight,\n      blockScrollbarHeight,\n    } = config;\n    // We use number booleans to multiply values rather than `if` / ternary\n    // statements because it _heavily_ cuts down on nesting and readability\n    const relativeToWindow =\n      positioning === 'fixed' || positioning === 'document' ? 1 : 0;\n    const relativeToDocument = positioning === 'document' ? 1 : 0;\n    const isSurfaceBlockStart = surfaceBlock === 'start' ? 1 : 0;\n    const isSurfaceBlockEnd = surfaceBlock === 'end' ? 1 : 0;\n    const isOneBlockEnd = anchorBlock !== surfaceBlock ? 1 : 0;\n\n    // Whether or not to apply the height of the anchor\n    const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset;\n    // The absolute block position of the anchor relative to window\n    const blockTopLayerOffset =\n      isSurfaceBlockStart * anchorRect.top +\n      isSurfaceBlockEnd *\n        (windowInnerHeight - anchorRect.bottom - blockScrollbarHeight);\n    const blockDocumentOffset =\n      isSurfaceBlockStart * window.scrollY - isSurfaceBlockEnd * window.scrollY;\n\n    // If the surface's block would be out of bounds of the window, move it back\n    // in\n    const blockOutOfBoundsCorrection = Math.abs(\n      Math.min(\n        0,\n        windowInnerHeight -\n          blockTopLayerOffset -\n          blockAnchorOffset -\n          surfaceRect.height,\n      ),\n    );\n\n    // The block logical value of the surface\n    const blockInset =\n      relativeToWindow * blockTopLayerOffset +\n      relativeToDocument * blockDocumentOffset +\n      blockAnchorOffset;\n\n    const surfaceBlockProperty =\n      surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end';\n\n    return {blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty};\n  }\n\n  /**\n   * Calculates the css property, the inset, and the out of bounds correction\n   * for the surface in the inline direction.\n   */\n  private calculateInline(config: {\n    isLTR: boolean;\n    surfaceInline: 'start' | 'end';\n    anchorInline: 'start' | 'end';\n    anchorRect: DOMRect;\n    surfaceRect: DOMRect;\n    xOffset: number;\n    positioning: 'absolute' | 'fixed' | 'document';\n    windowInnerWidth: number;\n    inlineScrollbarWidth: number;\n  }) {\n    const {\n      isLTR: isLTRBool,\n      surfaceInline,\n      anchorInline,\n      anchorRect,\n      surfaceRect,\n      xOffset,\n      positioning,\n      windowInnerWidth,\n      inlineScrollbarWidth,\n    } = config;\n    // We use number booleans to multiply values rather than `if` / ternary\n    // statements because it _heavily_ cuts down on nesting and readability\n    const relativeToWindow =\n      positioning === 'fixed' || positioning === 'document' ? 1 : 0;\n    const relativeToDocument = positioning === 'document' ? 1 : 0;\n    const isLTR = isLTRBool ? 1 : 0;\n    const isRTL = isLTRBool ? 0 : 1;\n    const isSurfaceInlineStart = surfaceInline === 'start' ? 1 : 0;\n    const isSurfaceInlineEnd = surfaceInline === 'end' ? 1 : 0;\n    const isOneInlineEnd = anchorInline !== surfaceInline ? 1 : 0;\n\n    // Whether or not to apply the width of the anchor\n    const inlineAnchorOffset = isOneInlineEnd * anchorRect.width + xOffset;\n    // The inline position of the anchor relative to window in LTR\n    const inlineTopLayerOffsetLTR =\n      isSurfaceInlineStart * anchorRect.left +\n      isSurfaceInlineEnd *\n        (windowInnerWidth - anchorRect.right - inlineScrollbarWidth);\n    // The inline position of the anchor relative to window in RTL\n    const inlineTopLayerOffsetRTL =\n      isSurfaceInlineStart *\n        (windowInnerWidth - anchorRect.right - inlineScrollbarWidth) +\n      isSurfaceInlineEnd * anchorRect.left;\n    // The inline position of the anchor relative to window\n    const inlineTopLayerOffset =\n      isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL;\n\n    // The inline position of the anchor relative to window in LTR\n    const inlineDocumentOffsetLTR =\n      isSurfaceInlineStart * window.scrollX -\n      isSurfaceInlineEnd * window.scrollX;\n    // The inline position of the anchor relative to window in RTL\n    const inlineDocumentOffsetRTL =\n      isSurfaceInlineEnd * window.scrollX -\n      isSurfaceInlineStart * window.scrollX;\n    // The inline position of the anchor relative to window\n    const inlineDocumentOffset =\n      isLTR * inlineDocumentOffsetLTR + isRTL * inlineDocumentOffsetRTL;\n\n    // If the surface's inline would be out of bounds of the window, move it\n    // back in\n    const inlineOutOfBoundsCorrection = Math.abs(\n      Math.min(\n        0,\n        windowInnerWidth -\n          inlineTopLayerOffset -\n          inlineAnchorOffset -\n          surfaceRect.width,\n      ),\n    );\n\n    // The inline logical value of the surface\n    const inlineInset =\n      relativeToWindow * inlineTopLayerOffset +\n      inlineAnchorOffset +\n      relativeToDocument * inlineDocumentOffset;\n\n    let surfaceInlineProperty =\n      surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end';\n\n    // There are cases where the element is RTL but the root of the page is not.\n    // In these cases we want to not use logical properties.\n    if (positioning === 'document' || positioning === 'fixed') {\n      if (\n        (surfaceInline === 'start' && isLTRBool) ||\n        (surfaceInline === 'end' && !isLTRBool)\n      ) {\n        surfaceInlineProperty = 'left';\n      } else {\n        surfaceInlineProperty = 'right';\n      }\n    }\n\n    return {\n      inlineInset,\n      inlineOutOfBoundsCorrection,\n      surfaceInlineProperty,\n    };\n  }\n\n  hostUpdate() {\n    this.onUpdate();\n  }\n\n  hostUpdated() {\n    this.onUpdate();\n  }\n\n  /**\n   * Checks whether the properties passed into the controller have changed since\n   * the last positioning. If so, it will reposition if the surface is open or\n   * close it if the surface should close.\n   */\n  private async onUpdate() {\n    const props = this.getProperties();\n    let hasChanged = false;\n    for (const [key, value] of Object.entries(props)) {\n      // tslint:disable-next-line\n      hasChanged = hasChanged || value !== (this.lastValues as any)[key];\n      if (hasChanged) break;\n    }\n\n    const openChanged = this.lastValues.isOpen !== props.isOpen;\n    const hasAnchor = !!props.anchorEl;\n    const hasSurface = !!props.surfaceEl;\n\n    if (hasChanged && hasAnchor && hasSurface) {\n      // Only update isOpen, because if it's closed, we do not want to waste\n      // time on a useless reposition calculation. So save the other \"dirty\"\n      // values until next time it opens.\n      this.lastValues.isOpen = props.isOpen;\n\n      if (props.isOpen) {\n        // We are going to do a reposition, so save the prop values for future\n        // dirty checking.\n        this.lastValues = props;\n\n        await this.position();\n        props.onOpen();\n      } else if (openChanged) {\n        await props.beforeClose();\n        this.close();\n        props.onClose();\n      }\n    }\n  }\n\n  /**\n   * Hides the surface.\n   */\n  private close() {\n    this.surfaceStylesInternal = {\n      'display': 'none',\n    };\n    this.host.requestUpdate();\n    const surfaceEl = this.getProperties().surfaceEl;\n\n    // The following type casts are required due to differing TS types in Google\n    // and open source.\n    if (\n      (surfaceEl as unknown as {popover?: string})?.popover &&\n      surfaceEl?.isConnected\n    ) {\n      (surfaceEl as unknown as {hidePopover: () => void}).hidePopover();\n    }\n  }\n}\n"]}

package/menu/internal/controllers/typeaheadController.js

@@ -112,17 +112,22 @@ export class TypeaheadController {
         // We don't want to typeahead if the _beginning_ of the typeahead is a menu
         // navigation, or a selection. We will handle "Space" only if it's in the
         // middle of a typeahead
-        if (event.code === 'Space' || event.code === 'Enter' ||
-            event.code.startsWith('Arrow') || event.code === 'Escape') {
+        if (event.code === 'Space' ||
+            event.code === 'Enter' ||
+            event.code.startsWith('Arrow') ||
+            event.code === 'Escape') {
             return;
         }
         this.isTypingAhead = true;
         // Generates the record array data structure which is the index, the element
         // and a normalized header.
-        this.typeaheadRecords = this.items.map((el, index) => [index, el, el.typeaheadText.trim().toLowerCase()]);
+        this.typeaheadRecords = this.items.map((el, index) => [
+            index,
+            el,
+            el.typeaheadText.trim().toLowerCase(),
+        ]);
         this.lastActiveRecord =
-            this.typeaheadRecords.find(record => (record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0)) ??
-                null;
+            this.typeaheadRecords.find((record) => record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0) ?? null;
         if (this.lastActiveRecord) {
             this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;
         }
@@ -170,7 +175,8 @@ export class TypeaheadController {
         clearTimeout(this.cancelTypeaheadTimeout);
         // Stop typingahead if one of the navigation or selection keys (except for
         // Space) are pressed
-        if (event.code === 'Enter' || event.code.startsWith('Arrow') ||
+        if (event.code === 'Enter' ||
+            event.code.startsWith('Arrow') ||
             event.code === 'Escape') {
             this.endTypeahead();
             if (this.lastActiveRecord) {
@@ -183,12 +189,11 @@ export class TypeaheadController {
             event.preventDefault();
         }
         // Start up a new keystroke buffer timeout
-        this.cancelTypeaheadTimeout =
-            setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);
+        this.cancelTypeaheadTimeout = setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);
         this.typaheadBuffer += event.key.toLowerCase();
-        const lastActiveIndex = this.lastActiveRecord ?
-            this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX] :
-            -1;
+        const lastActiveIndex = this.lastActiveRecord
+            ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX]
+            : -1;
         const numRecords = this.typeaheadRecords.length;
         /**
          * Sorting function that will resort the items starting with the given index
@@ -213,12 +218,12 @@ export class TypeaheadController {
          * 5: [2, <reference>, 'banana']
          */
         const rebaseIndexOnActive = (record) => {
-            return (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %
-                numRecords;
+            return ((record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %
+                numRecords);
         };
         // records filtered and sorted / rebased around the last active index
         const matchingRecords = this.typeaheadRecords
-            .filter(record => !record[TYPEAHEAD_RECORD.ITEM].disabled &&
+            .filter((record) => !record[TYPEAHEAD_RECORD.ITEM].disabled &&
             record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer))
             .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));
         // Just leave if there's nothing that matches. Native select will just

package/menu/internal/controllers/typeaheadController.js.map

@@ -1 +1 @@
-{"version":3,"file":"typeaheadController.js","sourceRoot":"","sources":["typeaheadController.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 {MenuItem} from './menuItemController.js';\n\n/**\n * The options that are passed to the typeahead controller.\n */\nexport interface TypeaheadControllerProperties {\n  /**\n   * A function that returns an array of menu items to be searched.\n   * @return An array of menu items to be searched by typing.\n   */\n  getItems: () => MenuItem[];\n  /**\n   * The maximum time between each keystroke to keep the current type buffer\n   * alive.\n   */\n  typeaheadBufferTime: number;\n  /**\n   * Whether or not the typeahead should listen for keystrokes or not.\n   */\n  active: boolean;\n}\n\n/**\n * Data structure tuple that helps with indexing.\n *\n * [index, item, normalized header text]\n */\ntype TypeaheadRecord = [number, MenuItem, string];\n/**\n * Indicies to access the TypeaheadRecord tuple type.\n */\nexport const TYPEAHEAD_RECORD = {\n  INDEX: 0,\n  ITEM: 1,\n  TEXT: 2,\n} as const;\n\n/**\n * This controller listens to `keydown` events and searches the header text of\n * an array of `MenuItem`s with the corresponding entered keys within the buffer\n * time and activates the item.\n *\n * @example\n * ```ts\n * const typeaheadController = new TypeaheadController(() => ({\n *   typeaheadBufferTime: 50,\n *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))\n * }));\n * html`\n *   <div\n *       @keydown=${typeaheadController.onKeydown}\n *       tabindex=\"0\"\n *       class=\"activeItemText\">\n *     <!-- focusable element that will receive keydown events -->\n *     Apple\n *   </div>\n *   <div>\n *     <md-menu-item active header=\"Apple\"></md-menu-item>\n *     <md-menu-item header=\"Apricot\"></md-menu-item>\n *     <md-menu-item header=\"Banana\"></md-menu-item>\n *     <md-menu-item header=\"Olive\"></md-menu-item>\n *     <md-menu-item header=\"Orange\"></md-menu-item>\n *   </div>\n * `;\n * ```\n */\nexport class TypeaheadController {\n  /**\n   * Array of tuples that helps with indexing.\n   */\n  private typeaheadRecords: TypeaheadRecord[] = [];\n  /**\n   * Currently-typed text since last buffer timeout\n   */\n  private typaheadBuffer = '';\n  /**\n   * The timeout id from the current buffer's setTimeout\n   */\n  private cancelTypeaheadTimeout = 0;\n  /**\n   * If we are currently \"typing\"\n   */\n  isTypingAhead = false;\n  /**\n   * The record of the last active item.\n   */\n  lastActiveRecord: TypeaheadRecord|null = null;\n\n  /**\n   * @param getProperties A function that returns the options of the typeahead\n   * controller:\n   *\n   * {\n   *   getItems: A function that returns an array of menu items to be searched.\n   *   typeaheadBufferTime: The maximum time between each keystroke to keep the\n   *       current type buffer alive.\n   * }\n   */\n  constructor(\n      private readonly getProperties: () => TypeaheadControllerProperties,\n  ) {}\n\n  private get items() {\n    return this.getProperties().getItems();\n  }\n\n  private get active() {\n    return this.getProperties().active;\n  }\n\n  /**\n   * Apply this listener to the element that will receive `keydown` events that\n   * should trigger this controller.\n   *\n   * @param event The native browser `KeyboardEvent` from the `keydown` event.\n   */\n  readonly onKeydown = (event: KeyboardEvent) => {\n    if (this.isTypingAhead) {\n      this.typeahead(event);\n    } else {\n      this.beginTypeahead(event);\n    }\n  };\n\n  /**\n   * Sets up typingahead\n   */\n  private beginTypeahead(event: KeyboardEvent) {\n    if (!this.active) {\n      return;\n    }\n\n    // We don't want to typeahead if the _beginning_ of the typeahead is a menu\n    // navigation, or a selection. We will handle \"Space\" only if it's in the\n    // middle of a typeahead\n    if (event.code === 'Space' || event.code === 'Enter' ||\n        event.code.startsWith('Arrow') || event.code === 'Escape') {\n      return;\n    }\n\n    this.isTypingAhead = true;\n    // Generates the record array data structure which is the index, the element\n    // and a normalized header.\n    this.typeaheadRecords = this.items.map(\n        (el, index) => [index, el, el.typeaheadText.trim().toLowerCase()]);\n    this.lastActiveRecord =\n        this.typeaheadRecords.find(\n            record => (record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0)) ??\n        null;\n    if (this.lastActiveRecord) {\n      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n    }\n    this.typeahead(event);\n  }\n\n  /**\n   * Performs the typeahead. Based on the normalized items and the current text\n   * buffer, finds the _next_ item with matching text and activates it.\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive, Orange, Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Olive\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive (active), Orange, Cucumber\n   * buffer: 'o'\n   * user types: l\n   *\n   * activates Olive\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive (active), Orange, Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Orange\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive, Orange (active), Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Olive\n   */\n  private typeahead(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n    clearTimeout(this.cancelTypeaheadTimeout);\n    // Stop typingahead if one of the navigation or selection keys (except for\n    // Space) are pressed\n    if (event.code === 'Enter' || event.code.startsWith('Arrow') ||\n        event.code === 'Escape') {\n      this.endTypeahead();\n      if (this.lastActiveRecord) {\n        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n      }\n      return;\n    }\n\n    // If Space is pressed, prevent it from selecting and closing the menu\n    if (event.code === 'Space') {\n      event.preventDefault();\n    }\n\n    // Start up a new keystroke buffer timeout\n    this.cancelTypeaheadTimeout =\n        setTimeout(this.endTypeahead, this.getProperties().typeaheadBufferTime);\n\n    this.typaheadBuffer += event.key.toLowerCase();\n\n    const lastActiveIndex = this.lastActiveRecord ?\n        this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX] :\n        -1;\n    const numRecords = this.typeaheadRecords.length;\n\n    /**\n     * Sorting function that will resort the items starting with the given index\n     *\n     * @example\n     *\n     * this.typeaheadRecords =\n     * 0: [0, <reference>, 'apple']\n     * 1: [1, <reference>, 'apricot']\n     * 2: [2, <reference>, 'banana']\n     * 3: [3, <reference>, 'olive'] <-- lastActiveIndex\n     * 4: [4, <reference>, 'orange']\n     * 5: [5, <reference>, 'strawberry']\n     *\n     * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)\n     *                                       - rebaseIndexOnActive(b)) ===\n     * 0: [3, <reference>, 'olive'] <-- lastActiveIndex\n     * 1: [4, <reference>, 'orange']\n     * 2: [5, <reference>, 'strawberry']\n     * 3: [0, <reference>, 'apple']\n     * 4: [1, <reference>, 'apricot']\n     * 5: [2, <reference>, 'banana']\n     */\n    const rebaseIndexOnActive = (record: TypeaheadRecord) => {\n      return (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %\n          numRecords;\n    };\n\n    // records filtered and sorted / rebased around the last active index\n    const matchingRecords =\n        this.typeaheadRecords\n            .filter(\n                record => !record[TYPEAHEAD_RECORD.ITEM].disabled &&\n                    record[TYPEAHEAD_RECORD.TEXT].startsWith(\n                        this.typaheadBuffer))\n            .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));\n\n    // Just leave if there's nothing that matches. Native select will just\n    // choose the first thing that starts with the next letter in the alphabet\n    // but that's out of scope and hard to localize\n    if (matchingRecords.length === 0) {\n      clearTimeout(this.cancelTypeaheadTimeout);\n      if (this.lastActiveRecord) {\n        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n      }\n      this.endTypeahead();\n      return;\n    }\n\n    const isNewQuery = this.typaheadBuffer.length === 1;\n    let nextRecord: TypeaheadRecord;\n\n    // This is likely the case that someone is trying to \"tab\" through different\n    // entries that start with the same letter\n    if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {\n      nextRecord = matchingRecords[1] ?? matchingRecords[0];\n    } else {\n      nextRecord = matchingRecords[0];\n    }\n\n    if (this.lastActiveRecord) {\n      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n    }\n\n    this.lastActiveRecord = nextRecord;\n    nextRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = 0;\n    nextRecord[TYPEAHEAD_RECORD.ITEM].focus();\n    return;\n  }\n\n  /**\n   * Ends the current typeahead and clears the buffer.\n   */\n  private readonly endTypeahead = () => {\n    this.isTypingAhead = false;\n    this.typaheadBuffer = '';\n    this.typeaheadRecords = [];\n  };\n}\n"]}
+{"version":3,"file":"typeaheadController.js","sourceRoot":"","sources":["typeaheadController.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 {MenuItem} from './menuItemController.js';\n\n/**\n * The options that are passed to the typeahead controller.\n */\nexport interface TypeaheadControllerProperties {\n  /**\n   * A function that returns an array of menu items to be searched.\n   * @return An array of menu items to be searched by typing.\n   */\n  getItems: () => MenuItem[];\n  /**\n   * The maximum time between each keystroke to keep the current type buffer\n   * alive.\n   */\n  typeaheadBufferTime: number;\n  /**\n   * Whether or not the typeahead should listen for keystrokes or not.\n   */\n  active: boolean;\n}\n\n/**\n * Data structure tuple that helps with indexing.\n *\n * [index, item, normalized header text]\n */\ntype TypeaheadRecord = [number, MenuItem, string];\n/**\n * Indicies to access the TypeaheadRecord tuple type.\n */\nexport const TYPEAHEAD_RECORD = {\n  INDEX: 0,\n  ITEM: 1,\n  TEXT: 2,\n} as const;\n\n/**\n * This controller listens to `keydown` events and searches the header text of\n * an array of `MenuItem`s with the corresponding entered keys within the buffer\n * time and activates the item.\n *\n * @example\n * ```ts\n * const typeaheadController = new TypeaheadController(() => ({\n *   typeaheadBufferTime: 50,\n *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))\n * }));\n * html`\n *   <div\n *       @keydown=${typeaheadController.onKeydown}\n *       tabindex=\"0\"\n *       class=\"activeItemText\">\n *     <!-- focusable element that will receive keydown events -->\n *     Apple\n *   </div>\n *   <div>\n *     <md-menu-item active header=\"Apple\"></md-menu-item>\n *     <md-menu-item header=\"Apricot\"></md-menu-item>\n *     <md-menu-item header=\"Banana\"></md-menu-item>\n *     <md-menu-item header=\"Olive\"></md-menu-item>\n *     <md-menu-item header=\"Orange\"></md-menu-item>\n *   </div>\n * `;\n * ```\n */\nexport class TypeaheadController {\n  /**\n   * Array of tuples that helps with indexing.\n   */\n  private typeaheadRecords: TypeaheadRecord[] = [];\n  /**\n   * Currently-typed text since last buffer timeout\n   */\n  private typaheadBuffer = '';\n  /**\n   * The timeout id from the current buffer's setTimeout\n   */\n  private cancelTypeaheadTimeout = 0;\n  /**\n   * If we are currently \"typing\"\n   */\n  isTypingAhead = false;\n  /**\n   * The record of the last active item.\n   */\n  lastActiveRecord: TypeaheadRecord | null = null;\n\n  /**\n   * @param getProperties A function that returns the options of the typeahead\n   * controller:\n   *\n   * {\n   *   getItems: A function that returns an array of menu items to be searched.\n   *   typeaheadBufferTime: The maximum time between each keystroke to keep the\n   *       current type buffer alive.\n   * }\n   */\n  constructor(\n    private readonly getProperties: () => TypeaheadControllerProperties,\n  ) {}\n\n  private get items() {\n    return this.getProperties().getItems();\n  }\n\n  private get active() {\n    return this.getProperties().active;\n  }\n\n  /**\n   * Apply this listener to the element that will receive `keydown` events that\n   * should trigger this controller.\n   *\n   * @param event The native browser `KeyboardEvent` from the `keydown` event.\n   */\n  readonly onKeydown = (event: KeyboardEvent) => {\n    if (this.isTypingAhead) {\n      this.typeahead(event);\n    } else {\n      this.beginTypeahead(event);\n    }\n  };\n\n  /**\n   * Sets up typingahead\n   */\n  private beginTypeahead(event: KeyboardEvent) {\n    if (!this.active) {\n      return;\n    }\n\n    // We don't want to typeahead if the _beginning_ of the typeahead is a menu\n    // navigation, or a selection. We will handle \"Space\" only if it's in the\n    // middle of a typeahead\n    if (\n      event.code === 'Space' ||\n      event.code === 'Enter' ||\n      event.code.startsWith('Arrow') ||\n      event.code === 'Escape'\n    ) {\n      return;\n    }\n\n    this.isTypingAhead = true;\n    // Generates the record array data structure which is the index, the element\n    // and a normalized header.\n    this.typeaheadRecords = this.items.map((el, index) => [\n      index,\n      el,\n      el.typeaheadText.trim().toLowerCase(),\n    ]);\n    this.lastActiveRecord =\n      this.typeaheadRecords.find(\n        (record) => record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0,\n      ) ?? null;\n    if (this.lastActiveRecord) {\n      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n    }\n    this.typeahead(event);\n  }\n\n  /**\n   * Performs the typeahead. Based on the normalized items and the current text\n   * buffer, finds the _next_ item with matching text and activates it.\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive, Orange, Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Olive\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive (active), Orange, Cucumber\n   * buffer: 'o'\n   * user types: l\n   *\n   * activates Olive\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive (active), Orange, Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Orange\n   *\n   * @example\n   *\n   * items: Apple, Banana, Olive, Orange (active), Cucumber\n   * buffer: ''\n   * user types: o\n   *\n   * activates Olive\n   */\n  private typeahead(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n    clearTimeout(this.cancelTypeaheadTimeout);\n    // Stop typingahead if one of the navigation or selection keys (except for\n    // Space) are pressed\n    if (\n      event.code === 'Enter' ||\n      event.code.startsWith('Arrow') ||\n      event.code === 'Escape'\n    ) {\n      this.endTypeahead();\n      if (this.lastActiveRecord) {\n        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n      }\n      return;\n    }\n\n    // If Space is pressed, prevent it from selecting and closing the menu\n    if (event.code === 'Space') {\n      event.preventDefault();\n    }\n\n    // Start up a new keystroke buffer timeout\n    this.cancelTypeaheadTimeout = setTimeout(\n      this.endTypeahead,\n      this.getProperties().typeaheadBufferTime,\n    );\n\n    this.typaheadBuffer += event.key.toLowerCase();\n\n    const lastActiveIndex = this.lastActiveRecord\n      ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX]\n      : -1;\n    const numRecords = this.typeaheadRecords.length;\n\n    /**\n     * Sorting function that will resort the items starting with the given index\n     *\n     * @example\n     *\n     * this.typeaheadRecords =\n     * 0: [0, <reference>, 'apple']\n     * 1: [1, <reference>, 'apricot']\n     * 2: [2, <reference>, 'banana']\n     * 3: [3, <reference>, 'olive'] <-- lastActiveIndex\n     * 4: [4, <reference>, 'orange']\n     * 5: [5, <reference>, 'strawberry']\n     *\n     * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)\n     *                                       - rebaseIndexOnActive(b)) ===\n     * 0: [3, <reference>, 'olive'] <-- lastActiveIndex\n     * 1: [4, <reference>, 'orange']\n     * 2: [5, <reference>, 'strawberry']\n     * 3: [0, <reference>, 'apple']\n     * 4: [1, <reference>, 'apricot']\n     * 5: [2, <reference>, 'banana']\n     */\n    const rebaseIndexOnActive = (record: TypeaheadRecord) => {\n      return (\n        (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %\n        numRecords\n      );\n    };\n\n    // records filtered and sorted / rebased around the last active index\n    const matchingRecords = this.typeaheadRecords\n      .filter(\n        (record) =>\n          !record[TYPEAHEAD_RECORD.ITEM].disabled &&\n          record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer),\n      )\n      .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b));\n\n    // Just leave if there's nothing that matches. Native select will just\n    // choose the first thing that starts with the next letter in the alphabet\n    // but that's out of scope and hard to localize\n    if (matchingRecords.length === 0) {\n      clearTimeout(this.cancelTypeaheadTimeout);\n      if (this.lastActiveRecord) {\n        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n      }\n      this.endTypeahead();\n      return;\n    }\n\n    const isNewQuery = this.typaheadBuffer.length === 1;\n    let nextRecord: TypeaheadRecord;\n\n    // This is likely the case that someone is trying to \"tab\" through different\n    // entries that start with the same letter\n    if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {\n      nextRecord = matchingRecords[1] ?? matchingRecords[0];\n    } else {\n      nextRecord = matchingRecords[0];\n    }\n\n    if (this.lastActiveRecord) {\n      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1;\n    }\n\n    this.lastActiveRecord = nextRecord;\n    nextRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = 0;\n    nextRecord[TYPEAHEAD_RECORD.ITEM].focus();\n    return;\n  }\n\n  /**\n   * Ends the current typeahead and clears the buffer.\n   */\n  private readonly endTypeahead = () => {\n    this.isTypingAhead = false;\n    this.typaheadBuffer = '';\n    this.typeaheadRecords = [];\n  };\n}\n"]}

package/menu/internal/menu-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, 4px)}.menu{border-radius:var(--md-menu-container-shape, 4px);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit}.item-padding{padding-block:8px}.has-overflow .items{overflow:visible}.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}/*# sourceMappingURL=menu-styles.css.map */
+export const styles = css `:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, 4px)}.menu{border-radius:var(--md-menu-container-shape, 4px);display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit}.item-padding{padding-block:8px}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=menu-styles.css.map */
 `;
 //# sourceMappingURL=menu-styles.css.js.map