@momentum-design/components 0.84.0 → 0.84.2

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

@@ -1,5 +1,6 @@
 import { CSSResult, PropertyValues } from 'lit';
 import Popover from '../popover/popover.component';
+import { PopoverPlacement } from '../popover/popover.types';
 /**
  * A popover menu component that displays a list of menu items in a floating container.
  * It's designed to work in conjunction with `mdc-menubar` and `mdc-menuitem` to create
@@ -21,10 +22,26 @@ import Popover from '../popover/popover.component';
  * @slot default - Contains the menu items to be displayed in the popover
  */
 declare class MenuPopover extends Popover {
+    /**
+     * The placement of the popover.
+     * - **top**
+     * - **top-start**
+     * - **top-end**
+     * - **bottom**
+     * - **bottom-start**
+     * - **bottom-end**
+     * - **left**
+     * - **left-start**
+     * - **left-end**
+     * - **right**
+     * - **right-start**
+     * - **right-end**
+     * @default bottom
+     */
+    placement: PopoverPlacement;
     constructor();
     /** @internal */
     get menuItems(): Array<HTMLElement>;
-    hidePopover: () => void;
     connectedCallback(): void;
     firstUpdated(changedProperties: PropertyValues): Promise<void>;
     /**

package/dist/components/menupopover/menupopover.component.js

@@ -1,10 +1,20 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
 import { KEYS } from '../../utils/keys';
 import { ROLE } from '../../utils/roles';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
 import { ORIENTATION } from '../menubar/menubar.constants';
 import Popover from '../popover/popover.component';
 import { COLOR } from '../popover/popover.constants';
-import { TAG_NAME as MENU_POPOVER } from './menupopover.constants';
+import { DEFAULTS, TAG_NAME as MENU_POPOVER } from './menupopover.constants';
 import styles from './menupopover.styles';
 import { isActiveMenuItem, isValidMenuItem, isValidPopover } from './menupopover.utils';
 import { popoverStack } from '../popover/popover.stack';
@@ -31,12 +41,23 @@ import { popoverStack } from '../popover/popover.stack';
 class MenuPopover extends Popover {
     constructor() {
         super();
-        this.hidePopover = () => {
-            setTimeout(() => {
-                this.visible = false;
-                this.isTriggerClicked = false;
-            }, this.closeDelay);
-        };
+        /**
+         * The placement of the popover.
+         * - **top**
+         * - **top-start**
+         * - **top-end**
+         * - **bottom**
+         * - **bottom-start**
+         * - **bottom-end**
+         * - **left**
+         * - **left-start**
+         * - **left-end**
+         * - **right**
+         * - **right-start**
+         * - **right-end**
+         * @default bottom
+         */
+        this.placement = DEFAULTS.PLACEMENT;
         /**
          * Handles outside click events to close the popover.
          * This method checks if the click occurred outside the popover and its trigger element.
@@ -247,4 +268,8 @@ class MenuPopover extends Popover {
     }
 }
 MenuPopover.styles = [...Popover.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], MenuPopover.prototype, "placement", void 0);
 export default MenuPopover;

package/dist/components/menupopover/menupopover.constants.d.ts

@@ -1,2 +1,5 @@
 declare const TAG_NAME: "mdc-menupopover";
-export { TAG_NAME };
+declare const DEFAULTS: {
+    PLACEMENT: "bottom-start";
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/menupopover/menupopover.constants.js

@@ -1,3 +1,7 @@
 import utils from '../../utils/tag-name';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 const TAG_NAME = utils.constructTagName('menupopover');
-export { TAG_NAME };
+const DEFAULTS = {
+    PLACEMENT: POPOVER_PLACEMENT.BOTTOM_START,
+};
+export { TAG_NAME, DEFAULTS };

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

@@ -215,6 +215,8 @@ declare class Popover extends Popover_base {
     /** @internal */
     private hoverTimer;
     /** @internal */
+    private isHovered;
+    /** @internal */
     protected isTriggerClicked: boolean;
     /** @internal */
     private openDelay;
@@ -264,6 +266,23 @@ declare class Popover extends Popover_base {
      * @param newValue - The new value of the visible property.
      */
     private isOpenUpdated;
+    /**
+     *  Handles mouse enter event on the trigger element.
+     *  This method sets the `isHovered` flag to true and shows the popover
+     */
+    private handleMouseEnter;
+    /**
+     *  Handles mouse leave event on the trigger element.
+     *  This method sets the `isHovered` flag to false and starts the close delay
+     *  timer to hide the popover.
+     */
+    private handleMouseLeave;
+    /**
+     *  Handles focus out event on the trigger element.
+     *  This method checks if the popover is not hovered and hides the popover.
+     *  If the popover is hovered, it will not hide the popover.
+     */
+    private handleFocusOut;
     /**
      * Starts the close delay timer.
      * If the popover is not interactive, it will close the popover after the delay.

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

@@ -229,6 +229,8 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         /** @internal */
         this.hoverTimer = null;
         /** @internal */
+        this.isHovered = false;
+        /** @internal */
         this.isTriggerClicked = false;
         /** @internal */
         this.openDelay = 0;
@@ -280,6 +282,33 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                 this.hidePopover();
             }
         };
+        /**
+         *  Handles mouse enter event on the trigger element.
+         *  This method sets the `isHovered` flag to true and shows the popover
+         */
+        this.handleMouseEnter = () => {
+            this.isHovered = true;
+            this.showPopover();
+        };
+        /**
+         *  Handles mouse leave event on the trigger element.
+         *  This method sets the `isHovered` flag to false and starts the close delay
+         *  timer to hide the popover.
+         */
+        this.handleMouseLeave = () => {
+            this.isHovered = false;
+            this.startCloseDelay();
+        };
+        /**
+         *  Handles focus out event on the trigger element.
+         *  This method checks if the popover is not hovered and hides the popover.
+         *  If the popover is hovered, it will not hide the popover.
+         */
+        this.handleFocusOut = () => {
+            if (!this.isHovered) {
+                this.hidePopover();
+            }
+        };
         /**
          * Starts the close delay timer.
          * If the popover is not interactive, it will close the popover after the delay.
@@ -318,12 +347,10 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          * Hides the popover.
          */
         this.hidePopover = () => {
-            if (popoverStack.peek() === this) {
-                setTimeout(() => {
-                    this.visible = false;
-                    this.isTriggerClicked = false;
-                }, this.closeDelay);
-            }
+            setTimeout(() => {
+                this.visible = false;
+                this.isTriggerClicked = false;
+            }, this.closeDelay);
         };
         /**
          * Toggles the popover visibility.
@@ -396,8 +423,8 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         }
         if (this.trigger.includes('mouseenter')) {
             const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
-            this.triggerElement.addEventListener('mouseenter', this.showPopover);
-            this.triggerElement.addEventListener('mouseleave', this.startCloseDelay);
+            this.triggerElement.addEventListener('mouseenter', this.handleMouseEnter);
+            this.triggerElement.addEventListener('mouseleave', this.handleMouseLeave);
             this.addEventListener('mouseenter', this.cancelCloseDelay);
             this.addEventListener('mouseleave', this.startCloseDelay);
             hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.addEventListener('mouseenter', this.showPopover);
@@ -405,7 +432,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
         if (this.trigger.includes('focusin')) {
             this.triggerElement.addEventListener('focusin', this.showPopover);
             if (!this.interactive) {
-                this.triggerElement.addEventListener('focusout', this.hidePopover);
+                this.triggerElement.addEventListener('focusout', this.handleFocusOut);
             }
         }
         this.addEventListener('focus-trap-exit', this.hidePopover);
@@ -418,12 +445,12 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             return;
         const hoverBridge = this.renderRoot.querySelector('.popover-hover-bridge');
         this.triggerElement.removeEventListener('click', this.togglePopoverVisible);
-        this.triggerElement.removeEventListener('mouseenter', this.showPopover);
-        this.triggerElement.removeEventListener('mouseleave', this.hidePopover);
+        this.triggerElement.removeEventListener('mouseenter', this.handleMouseEnter);
+        this.triggerElement.removeEventListener('mouseleave', this.handleMouseLeave);
         this.removeEventListener('mouseenter', this.cancelCloseDelay);
         this.removeEventListener('mouseleave', this.startCloseDelay);
         this.triggerElement.removeEventListener('focusin', this.showPopover);
-        this.triggerElement.removeEventListener('focusout', this.hidePopover);
+        this.triggerElement.removeEventListener('focusout', this.handleFocusOut);
         hoverBridge === null || hoverBridge === void 0 ? void 0 : hoverBridge.removeEventListener('mouseenter', this.showPopover);
         this.removeEventListener('focus-trap-exit', this.hidePopover);
     }

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

@@ -1,5 +1,6 @@
 import { CSSResult, PropertyValueMap } from 'lit';
 import Popover from '../popover/popover.component';
+import { PopoverPlacement } from '../popover/popover.types';
 /**
  * A toggletip is triggered by clicking a trigger element.
  *
@@ -48,6 +49,23 @@ declare class ToggleTip extends Popover {
       * Please refer to the `mdc-screenreaderannouncer` component for more details.
     */
     screenreaderAnnouncerIdentity?: string;
+    /**
+     * The placement of the popover.
+     * - **top**
+     * - **top-start**
+     * - **top-end**
+     * - **bottom**
+     * - **bottom-start**
+     * - **bottom-end**
+     * - **left**
+     * - **left-start**
+     * - **left-end**
+     * - **right**
+     * - **right-start**
+     * - **right-end**
+     * @default bottom
+     */
+    placement: PopoverPlacement;
     connectedCallback(): void;
     /**
      * @returns The text content of all the nodes in the default slot, joined by a space.

package/dist/components/toggletip/toggletip.component.js

@@ -54,13 +54,29 @@ class ToggleTip extends Popover {
         super(...arguments);
         /** @internal */
         this.currentAnnouncement = '';
+        /**
+         * The placement of the popover.
+         * - **top**
+         * - **top-start**
+         * - **top-end**
+         * - **bottom**
+         * - **bottom-start**
+         * - **bottom-end**
+         * - **left**
+         * - **left-start**
+         * - **left-end**
+         * - **right**
+         * - **right-start**
+         * - **right-end**
+         * @default bottom
+         */
+        this.placement = DEFAULTS.PLACEMENT;
     }
     connectedCallback() {
         var _a;
         super.connectedCallback();
         this.closeButton = (_a = this.closeButton) !== null && _a !== void 0 ? _a : DEFAULTS.CLOSE_BUTTON;
         this.closeButtonAriaLabel = DEFAULTS.CLOSE_BUTTON_ARIA_LABEL;
-        this.placement = DEFAULTS.PLACEMENT;
         this.trigger = DEFAULTS.CLICK;
         this.showArrow = DEFAULTS.SHOW_ARROW;
         this.interactive = true;
@@ -122,4 +138,8 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'screenreader-announcer-identity' }),
     __metadata("design:type", String)
 ], ToggleTip.prototype, "screenreaderAnnouncerIdentity", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ToggleTip.prototype, "placement", void 0);
 export default ToggleTip;