@vonage/vivid 4.1.0 → 4.2.0

package/custom-elements.json

@@ -9035,9 +9035,28 @@
               "kind": "method",
               "name": "#expandedChange"
             },
+            {
+              "kind": "field",
+              "name": "#handleMenuItemKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#syntheticClickEvents",
+              "privacy": "private",
+              "default": "new WeakSet<Event>()"
+            },
+            {
+              "kind": "method",
+              "name": "#emitSyntheticClick"
+            },
             {
               "kind": "field",
               "name": "updateSubmenu"
+            },
+            {
+              "kind": "field",
+              "name": "handleMenuItemKeyDown"
             }
           ],
           "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.1.0",
+	"version": "4.2.0",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/definition17.cjs

@@ -7,8 +7,8 @@ const repeat = require('./repeat.cjs');
 const slotted = require('./slotted.cjs');
 const children = require('./children.cjs');
 const icon = require('./icon.cjs');
-const keyCodes$1 = require('./key-codes2.cjs');
 const when = require('./when.cjs');
+const keyCodes$1 = require('./key-codes2.cjs');
 
 /**
  * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events

package/shared/definition17.js

@@ -5,8 +5,8 @@ import { R as RepeatDirective } from './repeat.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { c as children } from './children.js';
 import { I as Icon } from './icon.js';
-import { b as keyEnter$1, g as keySpace } from './key-codes2.js';
 import { w as when } from './when.js';
+import { b as keyEnter$1, g as keySpace } from './key-codes2.js';
 
 /**
  * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events

package/shared/definition29.cjs

@@ -2,6 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
+const keyCodes$1 = require('./key-codes2.cjs');
 const affix = require('./affix.cjs');
 const anchored = require('./anchored.cjs');
 const startEnd = require('./start-end.cjs');
@@ -744,8 +745,38 @@ class MenuItem extends MenuItem$1 {
     super();
     this.checkTrailing = false;
     this.#submenuArray = [];
+    this.#handleMenuItemKeyDown = (e) => {
+      if (e.defaultPrevented) {
+        return false;
+      }
+      switch (e.key) {
+        case keyCodes$1.keyEnter:
+        case keyCodes$1.keySpace:
+          this.invoke();
+          if (!this.disabled) {
+            this.#emitSyntheticClick();
+          }
+          return false;
+        case keyCodes$1.keyArrowRight:
+          this.expandAndFocus();
+          if (this.hasSubmenu) {
+            this.#emitSyntheticClick();
+          }
+          return false;
+        case keyCodes$1.keyArrowLeft:
+          if (this.expanded) {
+            this.expanded = false;
+            this.focus();
+            this.#emitSyntheticClick();
+            return false;
+          }
+      }
+      return true;
+    };
+    this.#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
     this.updateSubmenu = () => this.#updateSubmenu();
     this.addEventListener("expanded-change", this.#expandedChange);
+    this.handleMenuItemKeyDown = this.#handleMenuItemKeyDown;
   }
   #submenuArray;
   /**
@@ -773,6 +804,22 @@ class MenuItem extends MenuItem$1 {
       this.submenu.open = this.expanded;
     }
   }
+  #handleMenuItemKeyDown;
+  #syntheticClickEvents;
+  /**
+   * @internal
+   */
+  _isSyntheticClickEvent(event) {
+    return this.#syntheticClickEvents.has(event);
+  }
+  #emitSyntheticClick() {
+    const mouseEvent = new MouseEvent("click", {
+      bubbles: true,
+      composed: true
+    });
+    this.#syntheticClickEvents.add(mouseEvent);
+    this.dispatchEvent(mouseEvent);
+  }
 }
 __decorateClass([
   index.attr
@@ -833,6 +880,9 @@ const getClasses = ({
   ["has-meta", Boolean(metaSlottedContent?.length)]
 );
 function handleClick(x, { event }) {
+  if (x._isSyntheticClickEvent(event)) {
+    return true;
+  }
   x.handleMenuItemClick(event);
   return x.role === MenuItemRole.presentation;
 }

package/shared/definition29.js

@@ -1,5 +1,6 @@
 import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
+import { k as keyArrowLeft$1, a as keyArrowRight$1, g as keySpace$1, b as keyEnter$1 } from './key-codes2.js';
 import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import { b as anchored } from './anchored.js';
 import { S as StartEnd } from './start-end.js';
@@ -742,8 +743,38 @@ class MenuItem extends MenuItem$1 {
     super();
     this.checkTrailing = false;
     this.#submenuArray = [];
+    this.#handleMenuItemKeyDown = (e) => {
+      if (e.defaultPrevented) {
+        return false;
+      }
+      switch (e.key) {
+        case keyEnter$1:
+        case keySpace$1:
+          this.invoke();
+          if (!this.disabled) {
+            this.#emitSyntheticClick();
+          }
+          return false;
+        case keyArrowRight$1:
+          this.expandAndFocus();
+          if (this.hasSubmenu) {
+            this.#emitSyntheticClick();
+          }
+          return false;
+        case keyArrowLeft$1:
+          if (this.expanded) {
+            this.expanded = false;
+            this.focus();
+            this.#emitSyntheticClick();
+            return false;
+          }
+      }
+      return true;
+    };
+    this.#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
     this.updateSubmenu = () => this.#updateSubmenu();
     this.addEventListener("expanded-change", this.#expandedChange);
+    this.handleMenuItemKeyDown = this.#handleMenuItemKeyDown;
   }
   #submenuArray;
   /**
@@ -771,6 +802,22 @@ class MenuItem extends MenuItem$1 {
       this.submenu.open = this.expanded;
     }
   }
+  #handleMenuItemKeyDown;
+  #syntheticClickEvents;
+  /**
+   * @internal
+   */
+  _isSyntheticClickEvent(event) {
+    return this.#syntheticClickEvents.has(event);
+  }
+  #emitSyntheticClick() {
+    const mouseEvent = new MouseEvent("click", {
+      bubbles: true,
+      composed: true
+    });
+    this.#syntheticClickEvents.add(mouseEvent);
+    this.dispatchEvent(mouseEvent);
+  }
 }
 __decorateClass([
   attr
@@ -831,6 +878,9 @@ const getClasses = ({
   ["has-meta", Boolean(metaSlottedContent?.length)]
 );
 function handleClick(x, { event }) {
+  if (x._isSyntheticClickEvent(event)) {
+    return true;
+  }
   x.handleMenuItemClick(event);
   return x.role === MenuItemRole.presentation;
 }

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jul 2024 12:38:12 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {