@y14e/roving-tabindex 2.0.7 → 2.1.0

package/README.md

@@ -10,14 +10,14 @@ npm i @y14e/roving-tabindex
 
 ```ts
 // npm
-import { createRovingTabIndex } from '@y14e/roving-tabindex@2.0.7';
+import { createRovingTabIndex } from '@y14e/roving-tabindex@2.1.0';
 
 // CDNs
-import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@2.0.7';
+import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@2.1.0';
 // or
-import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@2.0.7/+esm';
+import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@2.1.0/+esm';
 // or
-import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@2.0.7';
+import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@2.1.0';
 ```
 
 ## 📦 APIs
@@ -40,6 +40,7 @@ const cleanup = createRovingTabIndex(container, options);
 interface RovingTabIndexOptions {
   direction?: 'horizontal' | 'vertical'; // default: both (undefined)
   navigationOnly?: boolean;              // default: false
+  noMemory?: boolean;                    // default: false
   selector?: string;
   typeahead?: boolean;                   // default: false
   wrap?: boolean;                        // default: false
@@ -50,6 +51,10 @@ interface RovingTabIndexOptions {
 
 If `true`, enables keyboard navigation without modifying `tabindex`. Useful for widgets like accordions where all items should remain tabbable while still supporting arrow key navigation.
 
+### `noMemory`
+
+If `true`, disables focus memory. Focus always starts from the first item.
+
 ### `typeahead`
 
 If `true`, enables character-based focus navigation. Typing a character moves focus to the next matching element.

package/dist/index.cjs

@@ -13,11 +13,10 @@ function addTokenToAttribute(element, attribute, token, options = {}) {
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
-    if (tokens.some((token2) => token2.toLowerCase() === lower)) {
-      return;
+    if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
+      tokens.push(token);
+      element.setAttribute(attribute, serialize(tokens));
     }
-    tokens.push(token);
-    element.setAttribute(attribute, serialize(tokens));
     return;
   }
   const set = new Set(tokens);
@@ -300,6 +299,7 @@ function createRovingTabIndex(container, options = {}) {
   let {
     direction,
     navigationOnly = false,
+    noMemory = false,
     selector,
     typeahead = false,
     wrap = false
@@ -312,6 +312,10 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid navigationOnly option. Fallback: false.");
     navigationOnly = false;
   }
+  if (typeof noMemory !== "boolean") {
+    console.warn("Invalid noMemory option. Fallback: false.");
+    noMemory = false;
+  }
   if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -326,7 +330,7 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, typeahead, wrap };
+  const settings = { navigationOnly, noMemory, typeahead, wrap };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
@@ -374,10 +378,15 @@ var RovingTabIndex = class {
   }
   #onFocusIn = (event) => {
     const { target } = event;
-    if (!(target instanceof Element) || !this.#focusables.has(target)) {
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const isFocusable2 = this.#focusables.has(target);
+    if (this.#options.noMemory && !isFocusable2) {
+      this.#update(null);
       return;
     }
-    this.#update(target);
+    isFocusable2 && this.#update(target);
   };
   #onKeyDown = (event) => {
     if (!event.composedPath().includes(this.#container)) {
@@ -527,7 +536,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 2.0.7
+ * @version 2.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -539,7 +548,7 @@ function getActiveElement() {
   (**
    * Attributes Utils
    *
-   * @version 1.1.0
+   * @version 1.1.1
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -552,7 +561,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.1
+   * @version 4.3.2
    * @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.7
+ * @version 2.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -12,6 +12,7 @@
 interface RovingTabIndexOptions {
     readonly direction?: 'horizontal' | 'vertical';
     readonly navigationOnly?: boolean;
+    readonly noMemory?: boolean;
     readonly selector?: string;
     readonly typeahead?: boolean;
     readonly wrap?: boolean;

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.7
+ * @version 2.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -12,6 +12,7 @@
 interface RovingTabIndexOptions {
     readonly direction?: 'horizontal' | 'vertical';
     readonly navigationOnly?: boolean;
+    readonly noMemory?: boolean;
     readonly selector?: string;
     readonly typeahead?: boolean;
     readonly wrap?: boolean;

package/dist/index.js

@@ -11,11 +11,10 @@ function addTokenToAttribute(element, attribute, token, options = {}) {
   const tokens = value ? parse(value).filter(Boolean) : [];
   if (caseInsensitive) {
     const lower = token.toLowerCase();
-    if (tokens.some((token2) => token2.toLowerCase() === lower)) {
-      return;
+    if (tokens.every((token2) => token2.toLowerCase() !== lower)) {
+      tokens.push(token);
+      element.setAttribute(attribute, serialize(tokens));
     }
-    tokens.push(token);
-    element.setAttribute(attribute, serialize(tokens));
     return;
   }
   const set = new Set(tokens);
@@ -298,6 +297,7 @@ function createRovingTabIndex(container, options = {}) {
   let {
     direction,
     navigationOnly = false,
+    noMemory = false,
     selector,
     typeahead = false,
     wrap = false
@@ -310,6 +310,10 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid navigationOnly option. Fallback: false.");
     navigationOnly = false;
   }
+  if (typeof noMemory !== "boolean") {
+    console.warn("Invalid noMemory option. Fallback: false.");
+    noMemory = false;
+  }
   if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -324,7 +328,7 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, typeahead, wrap };
+  const settings = { navigationOnly, noMemory, typeahead, wrap };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
@@ -372,10 +376,15 @@ var RovingTabIndex = class {
   }
   #onFocusIn = (event) => {
     const { target } = event;
-    if (!(target instanceof Element) || !this.#focusables.has(target)) {
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const isFocusable2 = this.#focusables.has(target);
+    if (this.#options.noMemory && !isFocusable2) {
+      this.#update(null);
       return;
     }
-    this.#update(target);
+    isFocusable2 && this.#update(target);
   };
   #onKeyDown = (event) => {
     if (!event.composedPath().includes(this.#container)) {
@@ -525,7 +534,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 2.0.7
+ * @version 2.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -537,7 +546,7 @@ function getActiveElement() {
   (**
    * Attributes Utils
    *
-   * @version 1.1.0
+   * @version 1.1.1
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -550,7 +559,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.1
+   * @version 4.3.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/roving-tabindex",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "Lightweight roving tabindex utility with fully focus management",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -48,9 +48,9 @@
   },
   "homepage": "https://github.com/y14e/roving-tabindex#readme",
   "devDependencies": {
-    "@y14e/attributes-utils": "^1.1.0",
+    "@y14e/attributes-utils": "^1.1.1",
     "bun-types": "latest",
-    "power-focusable": "^4.3.1",
+    "power-focusable": "^4.3.2",
     "tsup": "^8.0.0",
     "typescript": "^5.6.0"
   },