@y14e/roving-tabindex 2.0.3 → 2.0.5

package/README.md

@@ -10,14 +10,14 @@ npm i @y14e/roving-tabindex
 
 ```ts
 // npm
-import { createRovingTabIndex } from '@y14e/roving-tabindex@2.0.3';
+import { createRovingTabIndex } from '@y14e/roving-tabindex@2.0.5';
 
 // CDNs
-import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@2.0.3';
+import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@2.0.5';
 // or
-import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@2.0.3/+esm';
+import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@2.0.5/+esm';
 // or
-import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@2.0.3';
+import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@2.0.5';
 ```
 
 ## 📦 APIs

package/dist/index.cjs

@@ -312,7 +312,7 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid navigationOnly option. Fallback: false.");
     navigationOnly = false;
   }
-  if (typeof selector !== "undefined" && typeof selector !== "string") {
+  if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
     );
@@ -327,10 +327,10 @@ function createRovingTabIndex(container, options = {}) {
     wrap = false;
   }
   const settings = { navigationOnly, typeahead, wrap };
-  if (direction !== void 0) {
+  if (direction) {
     Object.assign(settings, { direction });
   }
-  if (selector !== void 0) {
+  if (selector) {
     Object.assign(settings, { selector });
   }
   const roving = new RovingTabIndex(container, settings);
@@ -365,12 +365,24 @@ var RovingTabIndex = class {
   #initialize() {
     this.#update(document.activeElement);
     this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    document.addEventListener("focusin", this.#onFocusIn, {
+      capture: true,
+      signal
+    });
     document.addEventListener("keydown", this.#onKeyDown, {
       capture: true,
-      signal: this.#controller.signal
+      signal
     });
     this.#container.setAttribute("data-roving-tabindex-initialized", "");
   }
+  #onFocusIn = (event) => {
+    const { target } = event;
+    if (!(target instanceof Element) || !this.#focusables.has(target)) {
+      return;
+    }
+    this.#update(target);
+  };
   #onKeyDown = (event) => {
     if (!event.composedPath().includes(this.#container)) {
       return;
@@ -435,7 +447,6 @@ var RovingTabIndex = class {
     if (!focusable) {
       return;
     }
-    this.#update(focusable);
     focusElement(focusable);
   };
   #update(active) {
@@ -522,7 +533,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 2.0.3
+ * @version 2.0.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -3,7 +3,7 @@
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 2.0.3
+ * @version 2.0.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.ts

@@ -3,7 +3,7 @@
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 2.0.3
+ * @version 2.0.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -310,7 +310,7 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid navigationOnly option. Fallback: false.");
     navigationOnly = false;
   }
-  if (typeof selector !== "undefined" && typeof selector !== "string") {
+  if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
     );
@@ -325,10 +325,10 @@ function createRovingTabIndex(container, options = {}) {
     wrap = false;
   }
   const settings = { navigationOnly, typeahead, wrap };
-  if (direction !== void 0) {
+  if (direction) {
     Object.assign(settings, { direction });
   }
-  if (selector !== void 0) {
+  if (selector) {
     Object.assign(settings, { selector });
   }
   const roving = new RovingTabIndex(container, settings);
@@ -363,12 +363,24 @@ var RovingTabIndex = class {
   #initialize() {
     this.#update(document.activeElement);
     this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    document.addEventListener("focusin", this.#onFocusIn, {
+      capture: true,
+      signal
+    });
     document.addEventListener("keydown", this.#onKeyDown, {
       capture: true,
-      signal: this.#controller.signal
+      signal
     });
     this.#container.setAttribute("data-roving-tabindex-initialized", "");
   }
+  #onFocusIn = (event) => {
+    const { target } = event;
+    if (!(target instanceof Element) || !this.#focusables.has(target)) {
+      return;
+    }
+    this.#update(target);
+  };
   #onKeyDown = (event) => {
     if (!event.composedPath().includes(this.#container)) {
       return;
@@ -433,7 +445,6 @@ var RovingTabIndex = class {
     if (!focusable) {
       return;
     }
-    this.#update(focusable);
     focusElement(focusable);
   };
   #update(active) {
@@ -520,7 +531,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 2.0.3
+ * @version 2.0.5
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/roving-tabindex",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "Lightweight roving tabindex utility with fully focus management",
   "type": "module",
   "main": "./dist/index.cjs",