chore(release): 4.1.2

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [4.1.2](https://github.com/NickDJM/accessible-menu/compare/v4.1.1...v4.1.2) (2024-08-01)
+
+
+### Bug Fixes
+
+* add requestAnimationFrame to focus and blur to make transitioning more consistent ([#338](https://github.com/NickDJM/accessible-menu/issues/338)) ([6add377](https://github.com/NickDJM/accessible-menu/commit/6add37733b08ac26018cbbfd1a40e04407751054)), closes [#337](https://github.com/NickDJM/accessible-menu/issues/337)
+
 ### [4.1.1](https://github.com/NickDJM/accessible-menu/compare/v4.1.0...v4.1.1) (2024-08-01)
 
 

dist/accessible-menu.es.js

@@ -1,6 +1,6 @@
-var j = Object.defineProperty;
-var q = (r, t, e) => t in r ? j(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var u = (r, t, e) => q(r, typeof t != "symbol" ? t + "" : t, e);
+var N = Object.defineProperty;
+var j = (r, t, e) => t in r ? N(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var u = (r, t, e) => j(r, typeof t != "symbol" ? t + "" : t, e);
 function v(r, t) {
   typeof r == "string" ? t.classList.add(r) : t.classList.add(...r);
 }
@@ -615,7 +615,9 @@ class L {
    * @public
    */
   focus() {
-    this.elements.parentMenu.shouldFocus && this.dom.link.focus();
+    this.elements.parentMenu.shouldFocus && requestAnimationFrame(() => {
+      this.dom.link.focus();
+    });
   }
   /**
    * Blurs the menu item's link if the parent menu's
@@ -624,7 +626,9 @@ class L {
    * @public
    */
   blur() {
-    this.elements.parentMenu.shouldFocus && this.dom.link.blur();
+    this.elements.parentMenu.shouldFocus && requestAnimationFrame(() => {
+      this.dom.link.blur();
+    });
   }
 }
 function g(r) {
@@ -2640,7 +2644,7 @@ class $ extends I {
     enterDelay: E = -1,
     leaveDelay: T = -1,
     optionalKeySupport: O = !1,
-    initialize: N = !0
+    initialize: q = !0
   }) {
     super({
       menuElement: e,
@@ -2726,7 +2730,7 @@ class $ extends I {
     u(this, "_optionalSupport", !1);
     this._optionalSupport = O, this._selectors.menuItems = s, this._selectors.submenuItems = i, this._selectors.submenuToggles = o, this._selectors.submenus = h, this._selectors.submenuSubtoggles = m, this._selectors.menuLinks = [
       .../* @__PURE__ */ new Set([n, o])
-    ].join(","), N && this.initialize();
+    ].join(","), q && this.initialize();
   }
   /**
    * Initializes the menu.

dist/disclosure-menu.es.js

@@ -615,7 +615,9 @@ class L {
    * @public
    */
   focus() {
-    this.elements.parentMenu.shouldFocus && this.dom.link.focus();
+    this.elements.parentMenu.shouldFocus && requestAnimationFrame(() => {
+      this.dom.link.focus();
+    });
   }
   /**
    * Blurs the menu item's link if the parent menu's
@@ -624,7 +626,9 @@ class L {
    * @public
    */
   blur() {
-    this.elements.parentMenu.shouldFocus && this.dom.link.blur();
+    this.elements.parentMenu.shouldFocus && requestAnimationFrame(() => {
+      this.dom.link.blur();
+    });
   }
 }
 function y(n) {
@@ -1859,8 +1863,8 @@ class O extends b {
     hoverDelay: w = 250,
     enterDelay: S = -1,
     leaveDelay: $ = -1,
-    optionalKeySupport: j = !1,
-    initialize: F = !0
+    optionalKeySupport: F = !1,
+    initialize: j = !0
   }) {
     super({
       menuElement: t,
@@ -1922,7 +1926,7 @@ class O extends b {
      * @type {boolean}
      */
     r(this, "_optionalSupport", !1);
-    this._optionalSupport = j, F && this.initialize();
+    this._optionalSupport = F, j && this.initialize();
   }
   /**
    * Initializes the menu.

dist/menubar.es.js

@@ -1,6 +1,6 @@
-var x = Object.defineProperty;
-var F = (n, e, t) => e in n ? x(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var o = (n, e, t) => F(n, typeof e != "symbol" ? e + "" : e, t);
+var F = Object.defineProperty;
+var x = (n, e, t) => e in n ? F(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var o = (n, e, t) => x(n, typeof e != "symbol" ? e + "" : e, t);
 function d(n, e) {
   typeof n == "string" ? e.classList.add(n) : e.classList.add(...n);
 }
@@ -615,7 +615,9 @@ class D {
    * @public
    */
   focus() {
-    this.elements.parentMenu.shouldFocus && this.dom.link.focus();
+    this.elements.parentMenu.shouldFocus && requestAnimationFrame(() => {
+      this.dom.link.focus();
+    });
   }
   /**
    * Blurs the menu item's link if the parent menu's
@@ -624,7 +626,9 @@ class D {
    * @public
    */
   blur() {
-    this.elements.parentMenu.shouldFocus && this.dom.link.blur();
+    this.elements.parentMenu.shouldFocus && requestAnimationFrame(() => {
+      this.dom.link.blur();
+    });
   }
 }
 function _(n) {

dist/top-link-disclosure-menu.es.js

@@ -1,6 +1,6 @@
-var V = Object.defineProperty;
-var q = (n, e, t) => e in n ? V(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var o = (n, e, t) => q(n, typeof e != "symbol" ? e + "" : e, t);
+var K = Object.defineProperty;
+var V = (n, e, t) => e in n ? K(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var o = (n, e, t) => V(n, typeof e != "symbol" ? e + "" : e, t);
 function d(n, e) {
   typeof n == "string" ? e.classList.add(n) : e.classList.add(...n);
 }
@@ -615,7 +615,9 @@ class A {
    * @public
    */
   focus() {
-    this.elements.parentMenu.shouldFocus && this.dom.link.focus();
+    this.elements.parentMenu.shouldFocus && requestAnimationFrame(() => {
+      this.dom.link.focus();
+    });
   }
   /**
    * Blurs the menu item's link if the parent menu's
@@ -624,7 +626,9 @@ class A {
    * @public
    */
   blur() {
-    this.elements.parentMenu.shouldFocus && this.dom.link.blur();
+    this.elements.parentMenu.shouldFocus && requestAnimationFrame(() => {
+      this.dom.link.blur();
+    });
   }
 }
 function b(n) {
@@ -1877,7 +1881,7 @@ class O extends T {
     enterDelay: $ = -1,
     leaveDelay: j = -1,
     optionalKeySupport: F = !1,
-    initialize: K = !0
+    initialize: q = !0
   }) {
     super({
       menuElement: t,
@@ -1963,7 +1967,7 @@ class O extends T {
     o(this, "_optionalSupport", !1);
     this._optionalSupport = F, this._selectors.menuItems = s, this._selectors.submenuItems = r, this._selectors.submenuToggles = l, this._selectors.submenus = h, this._selectors.submenuSubtoggles = c, this._selectors.menuLinks = [
       .../* @__PURE__ */ new Set([i, l])
-    ].join(","), K && this.initialize();
+    ].join(","), q && this.initialize();
   }
   /**
    * Initializes the menu.

dist/treeview.es.js

@@ -1,6 +1,6 @@
 var x = Object.defineProperty;
-var j = (n, e, t) => e in n ? x(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var r = (n, e, t) => j(n, typeof e != "symbol" ? e + "" : e, t);
+var F = (n, e, t) => e in n ? x(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var r = (n, e, t) => F(n, typeof e != "symbol" ? e + "" : e, t);
 function g(n, e) {
   typeof n == "string" ? e.classList.add(n) : e.classList.add(...n);
 }
@@ -124,7 +124,7 @@ function _(n) {
     };
   }
 }
-function F(n) {
+function j(n) {
   try {
     if (typeof n != "object") {
       const t = typeof n;
@@ -615,7 +615,9 @@ class k {
    * @public
    */
   focus() {
-    this.elements.parentMenu.shouldFocus && this.dom.link.focus();
+    this.elements.parentMenu.shouldFocus && requestAnimationFrame(() => {
+      this.dom.link.focus();
+    });
   }
   /**
    * Blurs the menu item's link if the parent menu's
@@ -624,7 +626,9 @@ class k {
    * @public
    */
   blur() {
-    this.elements.parentMenu.shouldFocus && this.dom.link.blur();
+    this.elements.parentMenu.shouldFocus && requestAnimationFrame(() => {
+      this.dom.link.blur();
+    });
   }
 }
 function C(n) {
@@ -1192,7 +1196,7 @@ class M {
     e < -1 ? (this._currentChild = -1, t(this)) : e >= this.elements.menuItems.length ? (this._currentChild = this.elements.menuItems.length - 1, t(this)) : this.focusChild !== e && (this._currentChild = e, t(this));
   }
   set focusState(e) {
-    F({ value: e }), this._focusState !== e && (this._focusState = e), this.elements.submenuToggles.length > 0 && (e === "self" || e === "none") && this.elements.submenuToggles.forEach((t) => {
+    j({ value: e }), this._focusState !== e && (this._focusState = e), this.elements.submenuToggles.length > 0 && (e === "self" || e === "none") && this.elements.submenuToggles.forEach((t) => {
       t.elements.controlledMenu.focusState = "none";
     }), this.elements.parentMenu && (e === "self" || e === "child") && (this.elements.parentMenu.focusState = "child");
   }
@@ -1706,7 +1710,7 @@ class M {
     });
   }
 }
-class N extends k {
+class q extends k {
   /**
    * Constructs a new `TreeviewItem`.
    *
@@ -1769,7 +1773,7 @@ class N extends k {
     super.blur(), this.dom.link.tabIndex = -1;
   }
 }
-class q extends L {
+class N extends L {
   /**
    * Constructs a new `TreeviewToggle`.
    *
@@ -1907,15 +1911,15 @@ class A extends M {
      *
      * @type {typeof TreeviewItem}
      */
-    r(this, "_MenuItemType", N);
+    r(this, "_MenuItemType", q);
     /**
      * The class to use when generating submenu toggles.
      *
      * @protected
      *
      * @type {typeof TreeviewToggle}
      */
-    r(this, "_MenuToggleType", q);
+    r(this, "_MenuToggleType", N);
     $ && this.initialize();
   }
   /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "accessible-menu",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "description": "A JavaScript library to help you generate WCAG accessible menus in the DOM.",
   "type": "module",
   "sponsor": {