@fluid-topics/ft-floating-menu 1.2.17 → 1.2.19

package/build/ft-base-floating-menu.d.ts

@@ -6,6 +6,9 @@ import { FtBaseFloatingMenuProperties, FtHorizontalAlignment, FtVerticalAlignmen
 export declare class FloatingMenuCloseEvent extends CustomEvent<void> {
     constructor();
 }
+export declare class FtFloatingMenuSelectEvent extends CustomEvent<string> {
+    constructor(detail: string);
+}
 export declare class FtBaseFloatingMenu extends FtLitElement implements FtBaseFloatingMenuProperties {
     static elementDefinitions: ElementDefinitionsMap;
     private menuOpen;
@@ -34,6 +37,7 @@ export declare class FtBaseFloatingMenu extends FtLitElement implements FtBaseFl
     closeMenu(): void;
     private hideOptionsOnClickOutside;
     private onCloseEvent;
+    private onItemSelect;
     private onContentClick;
     disconnectedCallback(): void;
     protected contentAvailableCallback(props: PropertyValues): void;

package/build/ft-base-floating-menu.js

@@ -16,6 +16,11 @@ export class FloatingMenuCloseEvent extends CustomEvent {
         super("close-ft-floating-menu");
     }
 }
+export class FtFloatingMenuSelectEvent extends CustomEvent {
+    constructor(detail) {
+        super("select", { detail });
+    }
+}
 class FtBaseFloatingMenu extends FtLitElement {
     constructor() {
         super(...arguments);
@@ -70,7 +75,7 @@ class FtBaseFloatingMenu extends FtLitElement {
                     <div id="ft-floating-menu-options"
                          class="ft-floating-menu--options"
                          part="options"
-                         @select="${this.closeMenu}">
+                         @ft-floating-menu-item-select="${this.onItemSelect}">
                         <slot id="ft-floating-menu-content"
                               @click=${this.onContentClick}
                               @close-ft-floating-menu=${this.onCloseEvent}
@@ -93,6 +98,11 @@ class FtBaseFloatingMenu extends FtLitElement {
         e.stopPropagation();
         this.closeMenu();
     }
+    onItemSelect(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new FtFloatingMenuSelectEvent(e.detail));
+        this.closeMenu();
+    }
     onContentClick(e) {
         if (eventPathContainsMatchingElement(e, this.closeMenuMatchers, this)) {
             this.closeMenu();

package/build/ft-floating-menu-item.d.ts

@@ -1,7 +1,7 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtFloatingMenuItemProperties } from "./ft-floating-menu-item.properties";
 import { FtIconVariants } from "@fluid-topics/ft-icon";
-export declare class FtFloatingMenuItemSelect extends CustomEvent<string> {
+export declare class FtFloatingMenuItemSelectEvent extends CustomEvent<string> {
     constructor(value: string);
 }
 export declare class FtFloatingMenuItem extends FtLitElement implements FtFloatingMenuItemProperties {

package/build/ft-floating-menu-item.js

@@ -11,9 +11,9 @@ import { itemStyles } from "./ft-floating-menu-item.styles";
 import { FtIcon } from "@fluid-topics/ft-icon";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTypography } from "@fluid-topics/ft-typography";
-export class FtFloatingMenuItemSelect extends CustomEvent {
+export class FtFloatingMenuItemSelectEvent extends CustomEvent {
     constructor(value) {
-        super("select", { detail: value, bubbles: true, composed: true });
+        super("ft-floating-menu-item-select", { detail: value, bubbles: true, composed: true });
     }
 }
 class FtFloatingMenuItem extends FtLitElement {
@@ -39,12 +39,12 @@ class FtFloatingMenuItem extends FtLitElement {
         `;
     }
     onClick(event) {
-        this.dispatchEvent(new FtFloatingMenuItemSelect(this.value));
+        this.dispatchEvent(new FtFloatingMenuItemSelectEvent(this.value));
     }
     onKeyDown(event) {
         if (event.key == "Enter" || event.key == " ") {
             event.preventDefault();
-            this.dispatchEvent(new FtFloatingMenuItemSelect(this.value));
+            this.dispatchEvent(new FtFloatingMenuItemSelectEvent(this.value));
         }
     }
 }