@y14e/path-bar 1.0.0 → 1.0.1

package/README.md

@@ -10,16 +10,16 @@ npm i @y14e/path-bar
 
 ```ts
 // npm
-import PathBar from '@y14e/path-bar@1.0.0';
+import PathBar from '@y14e/path-bar@1.0.1';
 // with middleware
-import PathBar, { flip, offset, shift } from '@y14e/path-bar@1.0.0';
+import PathBar, { flip, offset, shift } from '@y14e/path-bar@1.0.1';
 
 // CDNs
-import PathBar from 'https://esm.sh/@y14e/path-bar@1.0.0';
+import PathBar from 'https://esm.sh/@y14e/path-bar@1.0.1';
 // or
-import PathBar from 'https://cdn.jsdelivr.net/npm/@y14e/path-bar@1.0.0/+esm';
+import PathBar from 'https://cdn.jsdelivr.net/npm/@y14e/path-bar@1.0.1/+esm';
 // or
-import PathBar from 'https://esm.unpkg.com/@y14e/path-bar@1.0.0';
+import PathBar from 'https://esm.unpkg.com/@y14e/path-bar@1.0.1';
 ```
 
 ## Usage

package/dist/index.cjs

@@ -2380,6 +2380,7 @@ function createRovingTabIndex(container, options = {}) {
     navigationOnly = false,
     noMemory = false,
     noStart = false,
+    noStopPropagation = false,
     selector,
     typeahead = false,
     wrap = false
@@ -2400,6 +2401,10 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid noStart option. Fallback: false.");
     noStart = false;
   }
+  if (typeof noStopPropagation !== "boolean") {
+    console.warn("Invalid noStopPropagation option. Fallback: false.");
+    noStopPropagation = false;
+  }
   if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -2414,7 +2419,14 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    noStopPropagation,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
@@ -2480,7 +2492,7 @@ var RovingTabIndex = class {
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
     }
-    const { direction, typeahead, wrap } = this.#options;
+    const { direction, noStopPropagation, typeahead, wrap } = this.#options;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
@@ -2502,7 +2514,7 @@ var RovingTabIndex = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
+    !noStopPropagation && event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -2897,6 +2909,7 @@ var Menu = class _Menu {
       direction: "vertical",
       noMemory: true,
       noStart: !!this.#triggerElement,
+      noStopPropagation: true,
       selector: `${item}:not(:scope ${list} *, [data-menu-disabled])`,
       typeahead: true,
       wrap: true
@@ -3600,6 +3613,7 @@ function createRovingTabIndex2(container, options = {}) {
     navigationOnly = false,
     noMemory = false,
     noStart = false,
+    noStopPropagation = false,
     selector,
     typeahead = false,
     wrap = false
@@ -3620,6 +3634,10 @@ function createRovingTabIndex2(container, options = {}) {
     console.warn("Invalid noStart option. Fallback: false.");
     noStart = false;
   }
+  if (typeof noStopPropagation !== "boolean") {
+    console.warn("Invalid noStopPropagation option. Fallback: false.");
+    noStopPropagation = false;
+  }
   if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -3634,7 +3652,14 @@ function createRovingTabIndex2(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    noStopPropagation,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex2(container, settings);
@@ -3700,7 +3725,7 @@ var RovingTabIndex2 = class {
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
     }
-    const { direction, typeahead, wrap } = this.#options;
+    const { direction, noStopPropagation, typeahead, wrap } = this.#options;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
@@ -3722,7 +3747,7 @@ var RovingTabIndex2 = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
+    !noStopPropagation && event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -4180,6 +4205,7 @@ var PathBar = class _PathBar {
   #rootElement;
   #defaults = {
     animation: { duration: 300 },
+    delay: 200,
     popover: {
       arrow: true,
       middleware: [flip2(), offset2(), shift2()],
@@ -4234,11 +4260,11 @@ var PathBar = class _PathBar {
       console.warn("Missing item elements");
       return;
     }
-    this.#linkElements = [
-      ...this.#listElement.querySelectorAll(
-        `${selector.list} > * > a`
-      )
-    ];
+    this.#linkElements = [];
+    this.#itemElements.forEach((item) => {
+      const link = item.querySelector("a");
+      link && this.#linkElements.push(link);
+    });
     if (!this.#linkElements.length) {
       console.warn("Missing <a> elements");
       return;
@@ -4276,18 +4302,21 @@ var PathBar = class _PathBar {
     });
     this.#linkElements.forEach((link) => {
       link.addEventListener("keydown", this.#onKeyDown, { signal });
-      const menuRoot = link.nextElementSibling;
-      if (!(menuRoot instanceof HTMLElement)) {
+      const root = link.closest(this.#settings.selector.item);
+      if (!(root instanceof HTMLElement)) {
+        return;
+      }
+      const { animation, delay, popover, selector } = this.#settings;
+      if (!root.querySelector(selector.menu.trigger)) {
         return;
       }
-      const { animation, popover, selector } = this.#settings;
-      const menuInstance = new Menu(
-        menuRoot,
-        { animation, popover: { menu: popover }, selector: selector.menu },
+      const menu = new Menu(
+        root,
+        { animation, delay, popover: { menu: popover }, selector: selector.menu },
         { externalTrigger: link, isMenubar: true }
       );
-      this.#bindings.set(link, createBinding(link, menuInstance));
-      this.#menus.push(menuInstance);
+      this.#bindings.set(link, createBinding(link, menu));
+      this.#menus.push(menu);
     });
     this.#cleanupRovingTabIndex = createRovingTabIndex2(this.#listElement, {
       direction: "horizontal",
@@ -4384,7 +4413,7 @@ function createBinding(link, menu) {
  * Breadcrumb-style path bar implementation in TypeScript.
  * Supports keyboard navigation, integrated menus, and seamless menu traversal.
  *
- * @version 1.0.0
+ * @version 1.0.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4398,7 +4427,7 @@ function createBinding(link, menu) {
    * WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript.
    * Supports checkbox item, radio item, and infinitely nested menus.
    *
-   * @version 1.7.1
+   * @version 1.7.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4473,7 +4502,7 @@ function createBinding(link, menu) {
      * Lightweight roving tabindex utility with fully focus management.
      * Designed for accessible menus, tabs, toolbars, and composite widgets.
      *
-     * @version 2.2.0
+     * @version 2.2.1
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4513,7 +4542,7 @@ function createBinding(link, menu) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.2.0
+   * @version 2.2.1
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -6,7 +6,7 @@ export { flip, offset, shift } from '@y14e/menu';
  * Breadcrumb-style path bar implementation in TypeScript.
  * Supports keyboard navigation, integrated menus, and seamless menu traversal.
  *
- * @version 1.0.0
+ * @version 1.0.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -17,6 +17,7 @@ interface PathBarOptions {
     readonly animation?: {
         readonly duration?: number;
     };
+    readonly delay?: number;
     readonly popover?: PathBarPopoverOptions;
     readonly selector?: {
         readonly item?: string;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { flip, offset, shift } from '@y14e/menu';
  * Breadcrumb-style path bar implementation in TypeScript.
  * Supports keyboard navigation, integrated menus, and seamless menu traversal.
  *
- * @version 1.0.0
+ * @version 1.0.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -17,6 +17,7 @@ interface PathBarOptions {
     readonly animation?: {
         readonly duration?: number;
     };
+    readonly delay?: number;
     readonly popover?: PathBarPopoverOptions;
     readonly selector?: {
         readonly item?: string;

package/dist/index.js

@@ -2376,6 +2376,7 @@ function createRovingTabIndex(container, options = {}) {
     navigationOnly = false,
     noMemory = false,
     noStart = false,
+    noStopPropagation = false,
     selector,
     typeahead = false,
     wrap = false
@@ -2396,6 +2397,10 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid noStart option. Fallback: false.");
     noStart = false;
   }
+  if (typeof noStopPropagation !== "boolean") {
+    console.warn("Invalid noStopPropagation option. Fallback: false.");
+    noStopPropagation = false;
+  }
   if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -2410,7 +2415,14 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    noStopPropagation,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
@@ -2476,7 +2488,7 @@ var RovingTabIndex = class {
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
     }
-    const { direction, typeahead, wrap } = this.#options;
+    const { direction, noStopPropagation, typeahead, wrap } = this.#options;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
@@ -2498,7 +2510,7 @@ var RovingTabIndex = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
+    !noStopPropagation && event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -2893,6 +2905,7 @@ var Menu = class _Menu {
       direction: "vertical",
       noMemory: true,
       noStart: !!this.#triggerElement,
+      noStopPropagation: true,
       selector: `${item}:not(:scope ${list} *, [data-menu-disabled])`,
       typeahead: true,
       wrap: true
@@ -3596,6 +3609,7 @@ function createRovingTabIndex2(container, options = {}) {
     navigationOnly = false,
     noMemory = false,
     noStart = false,
+    noStopPropagation = false,
     selector,
     typeahead = false,
     wrap = false
@@ -3616,6 +3630,10 @@ function createRovingTabIndex2(container, options = {}) {
     console.warn("Invalid noStart option. Fallback: false.");
     noStart = false;
   }
+  if (typeof noStopPropagation !== "boolean") {
+    console.warn("Invalid noStopPropagation option. Fallback: false.");
+    noStopPropagation = false;
+  }
   if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -3630,7 +3648,14 @@ function createRovingTabIndex2(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, noStart, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    noStopPropagation,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex2(container, settings);
@@ -3696,7 +3721,7 @@ var RovingTabIndex2 = class {
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
     }
-    const { direction, typeahead, wrap } = this.#options;
+    const { direction, noStopPropagation, typeahead, wrap } = this.#options;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
@@ -3718,7 +3743,7 @@ var RovingTabIndex2 = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
+    !noStopPropagation && event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -4176,6 +4201,7 @@ var PathBar = class _PathBar {
   #rootElement;
   #defaults = {
     animation: { duration: 300 },
+    delay: 200,
     popover: {
       arrow: true,
       middleware: [flip2(), offset2(), shift2()],
@@ -4230,11 +4256,11 @@ var PathBar = class _PathBar {
       console.warn("Missing item elements");
       return;
     }
-    this.#linkElements = [
-      ...this.#listElement.querySelectorAll(
-        `${selector.list} > * > a`
-      )
-    ];
+    this.#linkElements = [];
+    this.#itemElements.forEach((item) => {
+      const link = item.querySelector("a");
+      link && this.#linkElements.push(link);
+    });
     if (!this.#linkElements.length) {
       console.warn("Missing <a> elements");
       return;
@@ -4272,18 +4298,21 @@ var PathBar = class _PathBar {
     });
     this.#linkElements.forEach((link) => {
       link.addEventListener("keydown", this.#onKeyDown, { signal });
-      const menuRoot = link.nextElementSibling;
-      if (!(menuRoot instanceof HTMLElement)) {
+      const root = link.closest(this.#settings.selector.item);
+      if (!(root instanceof HTMLElement)) {
+        return;
+      }
+      const { animation, delay, popover, selector } = this.#settings;
+      if (!root.querySelector(selector.menu.trigger)) {
         return;
       }
-      const { animation, popover, selector } = this.#settings;
-      const menuInstance = new Menu(
-        menuRoot,
-        { animation, popover: { menu: popover }, selector: selector.menu },
+      const menu = new Menu(
+        root,
+        { animation, delay, popover: { menu: popover }, selector: selector.menu },
         { externalTrigger: link, isMenubar: true }
       );
-      this.#bindings.set(link, createBinding(link, menuInstance));
-      this.#menus.push(menuInstance);
+      this.#bindings.set(link, createBinding(link, menu));
+      this.#menus.push(menu);
     });
     this.#cleanupRovingTabIndex = createRovingTabIndex2(this.#listElement, {
       direction: "horizontal",
@@ -4380,7 +4409,7 @@ function createBinding(link, menu) {
  * Breadcrumb-style path bar implementation in TypeScript.
  * Supports keyboard navigation, integrated menus, and seamless menu traversal.
  *
- * @version 1.0.0
+ * @version 1.0.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4394,7 +4423,7 @@ function createBinding(link, menu) {
    * WAI-ARIA compliant menu (menu button) pattern implementation in TypeScript.
    * Supports checkbox item, radio item, and infinitely nested menus.
    *
-   * @version 1.7.1
+   * @version 1.7.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4469,7 +4498,7 @@ function createBinding(link, menu) {
      * Lightweight roving tabindex utility with fully focus management.
      * Designed for accessible menus, tabs, toolbars, and composite widgets.
      *
-     * @version 2.2.0
+     * @version 2.2.1
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane
@@ -4509,7 +4538,7 @@ function createBinding(link, menu) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 2.2.0
+   * @version 2.2.1
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/path-bar",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -44,8 +44,8 @@
   "devDependencies": {
     "@floating-ui/dom": "^1.7.6",
     "@y14e/attributes-utils": "^1.1.1",
-    "@y14e/menu": "^1.7.1",
-    "@y14e/roving-tabindex": "^2.2.0",
+    "@y14e/menu": "^1.7.2",
+    "@y14e/roving-tabindex": "^2.2.1",
     "bun-types": "latest",
     "power-focusable": "^4.3.2",
     "tsup": "^8.0.0",