feat(select): match menu width to select and introduce clamp-menu-width

fixes #5112
fixes #5133

upon opening the select, the menu with calculate the width of the select and set the min-width of the corresponding menu to match. If the user has an item with a really long headline, then clap-menu-width will clamp the max-width of the menu to that of the select.

PiperOrigin-RevId: 587862332

select/demo/demo.ts

@@ -45,6 +45,7 @@ const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
         ],
       }),
     }),
+    new Knob('clampMenuWidth', {ui: boolInput(), defaultValue: false}),
     new Knob('error', {ui: boolInput(), defaultValue: false}),
 
     new Knob('md-select Slots', {ui: title()}),

select/demo/stories.ts

@@ -23,6 +23,7 @@ export interface StoryKnobs {
   errorText: string;
   supportingText: string;
   error: boolean;
+  clampMenuWidth: boolean;
   menuPositioning: 'absolute' | 'fixed' | 'popover' | undefined;
 
   'md-select Slots': void;
@@ -42,6 +43,7 @@ const selects: MaterialStoryInit<StoryKnobs> = {
           .disabled=${knobs.disabled}
           .errorText=${knobs.errorText}
           .supportingText=${knobs.supportingText}
+          .clampMenuWidth=${knobs.clampMenuWidth}
           .menuPositioning=${knobs.menuPositioning!}
           .typeaheadDelay=${knobs.typeaheadDelay}
           .error=${knobs.error}>
@@ -57,6 +59,7 @@ const selects: MaterialStoryInit<StoryKnobs> = {
           .disabled=${knobs.disabled}
           .errorText=${knobs.errorText}
           .supportingText=${knobs.supportingText}
+          .clampMenuWidth=${knobs.clampMenuWidth}
           .menuPositioning=${knobs.menuPositioning!}
           .typeaheadDelay=${knobs.typeaheadDelay}
           .error=${knobs.error}>

select/internal/_shared.scss

@@ -69,6 +69,11 @@
     display: flex;
   }
 
+  md-menu {
+    min-width: var(--__menu-min-width, inherit);
+    max-width: var(--__menu-max-width, inherit);
+  }
+
   md-menu ::slotted(:not[disabled]) {
     cursor: pointer;
   }

select/internal/select.ts

@@ -9,6 +9,7 @@ import '../../menu/menu.js';
 import {html, isServer, LitElement, nothing, PropertyValues} from 'lit';
 import {property, query, queryAssignedElements, state} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
+import {styleMap} from 'lit/directives/style-map.js';
 import {html as staticHtml, StaticValue} from 'lit/static-html.js';
 
 import {Field} from '../../field/internal/field.js';
@@ -128,6 +129,12 @@ export abstract class Select extends selectBaseClass {
   @property({attribute: 'menu-positioning'})
   menuPositioning: 'absolute' | 'fixed' | 'popover' = 'popover';
 
+  /**
+   * Clamps the menu-width to the width of the select.
+   */
+  @property({type: Boolean, attribute: 'clamp-menu-width'})
+  clampMenuWidth = false;
+
   /**
    * The max time between the keystrokes of the typeahead select / menu behavior
    * before it clears the typeahead buffer.
@@ -240,6 +247,10 @@ export abstract class Select extends selectBaseClass {
   @query('#label') private readonly labelEl!: HTMLElement;
   @queryAssignedElements({slot: 'leading-icon', flatten: true})
   private readonly leadingIcons!: Element[];
+  // Have to keep track of previous open because it's state and private and thus
+  // cannot be tracked in PropertyValues<this> map.
+  private prevOpen = this.open;
+  private selectWidth = 0;
 
   constructor() {
     super();
@@ -316,6 +327,17 @@ export abstract class Select extends selectBaseClass {
       this.initUserSelection();
     }
 
+    // We have just opened the menu.
+    // We are only able to check for the select's rect in `update()` instead of
+    // having to wait for `updated()` because the menu can never be open on
+    // first render since it is not settable and Lit SSR does not support click
+    // events which would open the menu.
+    if (this.prevOpen !== this.open && this.open) {
+      const selectRect = this.getBoundingClientRect();
+      this.selectWidth = selectRect.width;
+    }
+
+    this.prevOpen = this.open;
     super.update(changed);
   }
 
@@ -445,6 +467,12 @@ export abstract class Select extends selectBaseClass {
       part="menu"
       exportparts="focus-ring: menu-focus-ring"
       anchor="field"
+      style=${styleMap({
+        '--__menu-min-width': `${this.selectWidth}px`,
+        '--__menu-max-width': this.clampMenuWidth
+          ? `${this.selectWidth}px`
+          : undefined,
+      })}
       .open=${this.open}
       .quick=${this.quick}
       .positioning=${this.menuPositioning}

testing/tokens.ts

@@ -143,7 +143,10 @@ function getUsedTokensFromRule(
     // Check them explicitly as well for properties like border-radius.
     for (const property of [...rule.style, ...CSS_SHORTHAND_PROPERTIES]) {
       const value = rule.style.getPropertyValue(property);
-      for (const match of value.matchAll(/--_[\w-]+/g)) {
+      // match css custom properties of --_ but not --__ as --_ are tokens and
+      // --__ are private custom properties used for our convenience not to be
+      // exposed to users.
+      for (const match of value.matchAll(/--_(?!_)[\w-]+/g)) {
         used.add(match[0]);
       }
     }