@momentum-design/components 0.54.2 → 0.54.3

package/dist/components/popover/popover.component.d.ts

@@ -1,6 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
-import type { PopoverPlacement, PopoverTrigger, PopoverColor } from './popover.types';
+import { PopoverColor, PopoverPlacement, PopoverTrigger } from './popover.types';
 declare const Popover_base: import("../../utils/mixins/index.types").Constructor<HTMLElement & import("../../utils/mixins/FocusTrapMixin").FocusTrapClassInterface> & typeof Component;
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.

package/dist/components/popover/popover.component.js

@@ -7,16 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
 import { html, nothing } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
-import { computePosition, autoUpdate, offset, flip, shift, arrow, size } from '@floating-ui/dom';
-import styles from './popover.styles';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
-import { popoverStack } from './popover.stack';
-import { DEFAULTS, POPOVER_PLACEMENT, TRIGGER, COLOR } from './popover.constants';
+import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
 import { PopoverEventManager } from './popover.events';
+import { popoverStack } from './popover.stack';
+import styles from './popover.styles';
 import { PopoverUtils } from './popover.utils';
 /**
  * Popover component is a lightweight floating UI element that displays additional content when triggered.
@@ -536,6 +536,7 @@ class Popover extends FocusTrapMixin(Component) {
                         return;
                     Object.assign(popoverContent.style, {
                         maxHeight: `${availableHeight}px`,
+                        overflowY: 'auto',
                     });
                 },
                 padding: 50,

package/dist/components/popover/popover.styles.js

@@ -48,7 +48,6 @@ const styles = css `
   :host::part(popover-content) {
     position: relative;
     padding: 0.75rem;
-    overflow-y: auto;
     min-width: max-content;
     z-index: 9998;
     max-height: var(--mdc-popover-max-height);

package/dist/components/select/select.component.d.ts

@@ -35,7 +35,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
     /**
      * height attribute of the select field. If set,
      * then a scroll bar will be visible when there more options than the adjusted height.
-     * @default 'auto'
+     * @default auto
      */
     height: string;
     /** @internal */
@@ -50,6 +50,8 @@ declare class Select extends Select_base implements AssociatedFormControl {
     displayPopover: boolean;
     /** @internal */
     activeDescendant: string;
+    /** @internal */
+    popoverWidth: string;
     /**
      * @internal
      * The native select element

package/dist/components/select/select.component.js

@@ -50,7 +50,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         /**
          * height attribute of the select field. If set,
          * then a scroll bar will be visible when there more options than the adjusted height.
-         * @default 'auto'
+         * @default auto
          */
         this.height = 'auto';
         /** @internal */
@@ -61,6 +61,8 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         this.displayPopover = false;
         /** @internal */
         this.activeDescendant = '';
+        /** @internal */
+        this.popoverWidth = '100%';
     }
     connectedCallback() {
         super.connectedCallback();
@@ -233,6 +235,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
                 break;
             case KEYS.ESCAPE:
                 this.closePopover();
+                event.stopPropagation();
                 break;
             case KEYS.HOME:
                 this.setFocusAndTabIndex(0);
@@ -453,7 +456,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         placement="${POPOVER_PLACEMENT.BOTTOM_START}"
         @shown="${this.handlePopoverOpen}"
         @hidden="${this.handlePopoverClose}"
-        style="--mdc-popover-max-width: 100%; --mdc-popover-max-height: ${this.height};"
+        style="--mdc-popover-max-width: ${this.popoverWidth}; --mdc-popover-max-height: ${this.height};"
       >
         <slot @click="${this.handleOptionsClick}"></slot>
       </mdc-popover>
@@ -511,7 +514,7 @@ __decorate([
     __metadata("design:type", Object)
 ], Select.prototype, "readonly", void 0);
 __decorate([
-    property({ type: String, attribute: 'height' }),
+    property({ type: String }),
     __metadata("design:type", Object)
 ], Select.prototype, "height", void 0);
 __decorate([
@@ -538,6 +541,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], Select.prototype, "activeDescendant", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Select.prototype, "popoverWidth", void 0);
 __decorate([
     query('select'),
     __metadata("design:type", HTMLInputElement)