@patternfly/pfe-core 2.0.0 → 2.1.0

package/controllers/roving-tabindex-controller.d.ts

@@ -43,6 +43,13 @@ export declare class RovingTabindexController implements ReactiveController {
     /**
      * from array of HTML items, and sets active items
      */
-    initItems(items: HTMLElement[]): void;
+    initItems(items: HTMLElement[], itemsContainer?: HTMLElement): void;
+    /**
+     * adds event listners to items container
+     */
     hostConnected(): void;
+    /**
+     * removes event listners from items container
+     */
+    hostDisconnected(): void;
 }

package/controllers/roving-tabindex-controller.js

@@ -1,4 +1,4 @@
-var _RovingTabindexController_instances, _RovingTabindexController_activeItem, _RovingTabindexController_items, _RovingTabindexController_focusableItems_get, _RovingTabindexController_activeIndex_get, _RovingTabindexController_itemIndex_get, _RovingTabindexController_onKeydown;
+var _RovingTabindexController_instances, _RovingTabindexController_activeItem, _RovingTabindexController_itemsContainer, _RovingTabindexController_items, _RovingTabindexController_focusableItems_get, _RovingTabindexController_activeIndex_get, _RovingTabindexController_itemIndex_get, _RovingTabindexController_onKeydown;
 import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 const isFocusableElement = (el) => !!el &&
     !el.hasAttribute('disabled') &&
@@ -47,8 +47,75 @@ export class RovingTabindexController {
         _RovingTabindexController_instances.add(this);
         /** active focusable element */
         _RovingTabindexController_activeItem.set(this, void 0);
+        /** closest ancestor containing items */
+        _RovingTabindexController_itemsContainer.set(this, void 0);
         /** array of all focusable elements */
         _RovingTabindexController_items.set(this, []);
+        /**
+         * handles keyboard navigation
+         */
+        _RovingTabindexController_onKeydown.set(this, (event) => {
+            if (event.ctrlKey || event.altKey || event.metaKey || __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).length < 1) {
+                return;
+            }
+            const item = this.activeItem;
+            let shouldPreventDefault = false;
+            const horizontalOnly = !item ? false
+                : item.tagName === 'SELECT' ||
+                    item.getAttribute('role') === 'spinbutton';
+            switch (event.key) {
+                case 'ArrowLeft':
+                    this.focusOnItem(this.prevItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'ArrowRight':
+                    this.focusOnItem(this.nextItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'ArrowUp':
+                    if (horizontalOnly) {
+                        return;
+                    }
+                    this.focusOnItem(this.prevItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'ArrowDown':
+                    if (horizontalOnly) {
+                        return;
+                    }
+                    this.focusOnItem(this.nextItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'Home':
+                    this.focusOnItem(this.firstItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'PageUp':
+                    if (horizontalOnly) {
+                        return;
+                    }
+                    this.focusOnItem(this.firstItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'End':
+                    this.focusOnItem(this.lastItem);
+                    shouldPreventDefault = true;
+                    break;
+                case 'PageDown':
+                    if (horizontalOnly) {
+                        return;
+                    }
+                    this.focusOnItem(this.lastItem);
+                    shouldPreventDefault = true;
+                    break;
+                default:
+                    break;
+            }
+            if (shouldPreventDefault) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        });
         this.host.addController(this);
     }
     /**
@@ -81,7 +148,7 @@ export class RovingTabindexController {
     /**
      * from array of HTML items, and sets active items
      */
-    initItems(items) {
+    initItems(items, itemsContainer = this.host) {
         __classPrivateFieldSet(this, _RovingTabindexController_items, items ?? [], "f");
         const focusableItems = __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get);
         const [focusableItem] = focusableItems;
@@ -89,78 +156,33 @@ export class RovingTabindexController {
         for (const item of focusableItems) {
             item.tabIndex = __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f") === item ? 0 : -1;
         }
+        /**
+         * removes listener on previous contained and applies it to new container
+         */
+        if (!__classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f") || itemsContainer !== __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f")) {
+            __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f")?.removeEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_onKeydown, "f"));
+            __classPrivateFieldSet(this, _RovingTabindexController_itemsContainer, itemsContainer, "f");
+            this.hostConnected();
+        }
     }
+    /**
+     * adds event listners to items container
+     */
     hostConnected() {
-        this.host.addEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_instances, "m", _RovingTabindexController_onKeydown).bind(this));
+        __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f")?.addEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_onKeydown, "f"));
+    }
+    /**
+     * removes event listners from items container
+     */
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _RovingTabindexController_itemsContainer, "f")?.removeEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_onKeydown, "f"));
     }
 }
-_RovingTabindexController_activeItem = new WeakMap(), _RovingTabindexController_items = new WeakMap(), _RovingTabindexController_instances = new WeakSet(), _RovingTabindexController_focusableItems_get = function _RovingTabindexController_focusableItems_get() {
+_RovingTabindexController_activeItem = new WeakMap(), _RovingTabindexController_itemsContainer = new WeakMap(), _RovingTabindexController_items = new WeakMap(), _RovingTabindexController_onKeydown = new WeakMap(), _RovingTabindexController_instances = new WeakSet(), _RovingTabindexController_focusableItems_get = function _RovingTabindexController_focusableItems_get() {
     return __classPrivateFieldGet(this, _RovingTabindexController_items, "f").filter(isFocusableElement);
 }, _RovingTabindexController_activeIndex_get = function _RovingTabindexController_activeIndex_get() {
     return !!__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get) && !!this.activeItem ? __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).indexOf(this.activeItem) : -1;
 }, _RovingTabindexController_itemIndex_get = function _RovingTabindexController_itemIndex_get() {
     return this.activeItem ? __classPrivateFieldGet(this, _RovingTabindexController_items, "f").indexOf(this.activeItem) : -1;
-}, _RovingTabindexController_onKeydown = function _RovingTabindexController_onKeydown(event) {
-    if (event.ctrlKey || event.altKey || event.metaKey || __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).length < 1) {
-        return;
-    }
-    const item = this.activeItem;
-    let shouldPreventDefault = false;
-    const horizontalOnly = !item ? false
-        : item.tagName === 'SELECT' ||
-            item.getAttribute('aria-expanded') === 'true' ||
-            item.getAttribute('role') === 'spinbutton';
-    switch (event.key) {
-        case 'ArrowLeft':
-            this.focusOnItem(this.prevItem);
-            shouldPreventDefault = true;
-            break;
-        case 'ArrowRight':
-            this.focusOnItem(this.nextItem);
-            shouldPreventDefault = true;
-            break;
-        case 'ArrowUp':
-            if (horizontalOnly) {
-                return;
-            }
-            this.focusOnItem(this.prevItem);
-            shouldPreventDefault = true;
-            break;
-        case 'ArrowDown':
-            if (horizontalOnly) {
-                return;
-            }
-            this.focusOnItem(this.nextItem);
-            shouldPreventDefault = true;
-            break;
-        case 'Home':
-            this.focusOnItem(this.firstItem);
-            shouldPreventDefault = true;
-            break;
-        case 'PageUp':
-            if (horizontalOnly) {
-                return;
-            }
-            this.focusOnItem(this.firstItem);
-            shouldPreventDefault = true;
-            break;
-        case 'End':
-            this.focusOnItem(this.lastItem);
-            shouldPreventDefault = true;
-            break;
-        case 'PageDown':
-            if (horizontalOnly) {
-                return;
-            }
-            this.focusOnItem(this.lastItem);
-            shouldPreventDefault = true;
-            break;
-        default:
-            break;
-    }
-    if (shouldPreventDefault) {
-        event.stopPropagation();
-        event.preventDefault();
-    }
 };
 //# sourceMappingURL=roving-tabindex-controller.js.map

package/controllers/roving-tabindex-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"roving-tabindex-controller.js","sourceRoot":"","sources":["roving-tabindex-controller.ts"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB,GAAG,CAAC,EAAW,EAAqB,EAAE,CAC5D,CAAC,CAAC,EAAE;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;IAC5B,CAAC,EAAE,CAAC,UAAU;IACd,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AAE7B;;;;GAIG;AACH,MAAM,OAAO,wBAAwB;IA4BnC;;OAEG;IACH,IAAI,UAAU;QACZ,OAAO,uBAAA,IAAI,4CAAY,CAAC;IAC1B,CAAC;IAED;;OAEG;IACH,IAAI,SAAS;QACX,OAAO,uBAAA,IAAI,yFAAgB,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC;IAED;;OAEG;IACH,IAAI,QAAQ;QACV,OAAO,uBAAA,IAAI,yFAAgB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC;IAED;;OAEG;IACH,IAAI,QAAQ;QACV,OAAO,CACH,uBAAA,IAAI,sFAAa,GAAG,uBAAA,IAAI,yFAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,uBAAA,IAAI,yFAAgB,CAAC,uBAAA,IAAI,sFAAa,GAAG,CAAC,CAAC;YACnG,CAAC,CAAC,IAAI,CAAC,SAAS,CACjB,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,IAAI,QAAQ;QACV,OAAO,CACH,uBAAA,IAAI,sFAAa,GAAG,CAAC,CAAC,CAAC,CAAC,uBAAA,IAAI,yFAAgB,CAAC,uBAAA,IAAI,sFAAa,GAAG,CAAC,CAAC;YACrE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAChB,CAAC;IACJ,CAAC;IAED,YAAmB,IAA0C;QAA1C,SAAI,GAAJ,IAAI,CAAsC;;QApE7D,+BAA+B;QAC/B,uDAA0B;QAE1B,sCAAsC;QACtC,0CAAwB,EAAE,EAAC;QAiEzB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAyED;;OAEG;IACH,gBAAgB,CAAC,IAAkB;QACjC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,CAAC,uBAAA,IAAI,4CAAY,IAAI,IAAI,KAAK,uBAAA,IAAI,4CAAY,EAAE;gBACnD,uBAAA,IAAI,4CAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;aAChC;YACD,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YAClB,uBAAA,IAAI,wCAAe,IAAI,MAAA,CAAC;SACzB;IACH,CAAC;IAED;;OAEG;IACH,WAAW,CAAC,IAAkB;QAC5B,IAAI,CAAC,gBAAgB,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;QAC9C,uBAAA,IAAI,4CAAY,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,WAAW,CAAC,KAAoB;QAC9B,MAAM,QAAQ,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,uBAAA,IAAI,oFAAW,CAAC,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,uBAAA,IAAI,oFAAW,CAAC,CAAC,CAAC;QACvF,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,uBAAA,IAAI,yFAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IAC5C,CAAC;IAED;;OAEG;IACH,SAAS,CAAC,KAAoB;QAC5B,uBAAA,IAAI,mCAAU,KAAK,IAAI,EAAE,MAAA,CAAC;QAC1B,MAAM,cAAc,GAAG,uBAAA,IAAI,yFAAgB,CAAC;QAC5C,MAAM,CAAC,aAAa,CAAC,GAAG,cAAc,CAAC;QACvC,uBAAA,IAAI,wCAAe,aAAa,MAAA,CAAC;QACjC,KAAK,MAAM,IAAI,IAAI,cAAc,EAAE;YACjC,IAAI,CAAC,QAAQ,GAAG,uBAAA,IAAI,4CAAY,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACpD;IACH,CAAC;IAED,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,gFAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACpE,CAAC;CACF;;IAnLG,OAAO,uBAAA,IAAI,uCAAO,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAChD,CAAC;IAMC,OAAO,CAAC,CAAC,uBAAA,IAAI,yFAAgB,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,uBAAA,IAAI,yFAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1G,CAAC;IAMC,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,uBAAA,IAAI,uCAAO,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrE,CAAC,qFAkDU,KAAoB;IAC7B,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,IAAI,uBAAA,IAAI,yFAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;QACrF,OAAO;KACR;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;IAC7B,IAAI,oBAAoB,GAAG,KAAK,CAAC;IACjC,MAAM,cAAc,GAChB,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;QACf,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,QAAQ;YACzB,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;YAC7C,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,YAAY,CAAC;IAE/C,QAAQ,KAAK,CAAC,GAAG,EAAE;QACjB,KAAK,WAAW;YACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAChC,oBAAoB,GAAG,IAAI,CAAC;YAC5B,MAAM;QACR,KAAK,YAAY;YACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAChC,oBAAoB,GAAG,IAAI,CAAC;YAC5B,MAAM;QACR,KAAK,SAAS;YACZ,IAAI,cAAc,EAAE;gBAClB,OAAO;aACR;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAChC,oBAAoB,GAAG,IAAI,CAAC;YAC5B,MAAM;QACR,KAAK,WAAW;YACd,IAAI,cAAc,EAAE;gBAClB,OAAO;aACR;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAChC,oBAAoB,GAAG,IAAI,CAAC;YAC5B,MAAM;QACR,KAAK,MAAM;YACT,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACjC,oBAAoB,GAAG,IAAI,CAAC;YAC5B,MAAM;QACR,KAAK,QAAQ;YACX,IAAI,cAAc,EAAE;gBAClB,OAAO;aACR;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACjC,oBAAoB,GAAG,IAAI,CAAC;YAC5B,MAAM;QACR,KAAK,KAAK;YACR,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAChC,oBAAoB,GAAG,IAAI,CAAC;YAC5B,MAAM;QACR,KAAK,UAAU;YACb,IAAI,cAAc,EAAE;gBAClB,OAAO;aACR;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAChC,oBAAoB,GAAG,IAAI,CAAC;YAC5B,MAAM;QACR;YACE,MAAM;KACT;IAED,IAAI,oBAAoB,EAAE;QACxB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;AACH,CAAC","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nconst isFocusableElement = (el: Element): el is HTMLElement =>\n  !!el &&\n  !el.hasAttribute('disabled') &&\n  !el.ariaHidden &&\n  !el.hasAttribute('hidden');\n\n/**\n * Implements roving tabindex, as described in WAI-ARIA practices, [Managing Focus Within\n * Components Using a Roving\n * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex)\n */\nexport class RovingTabindexController implements ReactiveController {\n  /** active focusable element */\n  #activeItem?: HTMLElement;\n\n  /** array of all focusable elements */\n  #items: HTMLElement[] = [];\n\n  /**\n   * finds focusable items from a group of items\n   */\n  get #focusableItems(): HTMLElement[] {\n    return this.#items.filter(isFocusableElement);\n  }\n\n  /**\n   * index of active item in array of focusable items\n   */\n  get #activeIndex(): number {\n    return !!this.#focusableItems && !!this.activeItem ? this.#focusableItems.indexOf(this.activeItem) : -1;\n  }\n\n  /**\n   * index of active item in array of items\n   */\n  get #itemIndex(): number {\n    return this.activeItem ? this.#items.indexOf(this.activeItem) : -1;\n  }\n\n  /**\n   * active item of array of items\n   */\n  get activeItem(): HTMLElement | undefined {\n    return this.#activeItem;\n  }\n\n  /**\n   * first item in array of focusable items\n   */\n  get firstItem(): HTMLElement | undefined {\n    return this.#focusableItems[0];\n  }\n\n  /**\n   * last item in array of focusable items\n   */\n  get lastItem(): HTMLElement | undefined {\n    return this.#focusableItems.at(-1);\n  }\n\n  /**\n   * next item  after active item in array of focusable items\n   */\n  get nextItem(): HTMLElement | undefined {\n    return (\n        this.#activeIndex < this.#focusableItems.length - 1 ? this.#focusableItems[this.#activeIndex + 1]\n      : this.firstItem\n    );\n  }\n\n  /**\n   * previous item  after active item in array of focusable items\n   */\n  get prevItem(): HTMLElement | undefined {\n    return (\n        this.#activeIndex > 0 ? this.#focusableItems[this.#activeIndex - 1]\n      : this.lastItem\n    );\n  }\n\n  constructor(public host: ReactiveControllerHost & HTMLElement) {\n    this.host.addController(this);\n  }\n\n  /**\n   * handles keyboard navigation\n   */\n  #onKeydown(event: KeyboardEvent):void {\n    if (event.ctrlKey || event.altKey || event.metaKey || this.#focusableItems.length < 1) {\n      return;\n    }\n\n    const item = this.activeItem;\n    let shouldPreventDefault = false;\n    const horizontalOnly =\n        !item ? false\n      : item.tagName === 'SELECT' ||\n        item.getAttribute('aria-expanded') === 'true' ||\n        item.getAttribute('role') === 'spinbutton';\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        this.focusOnItem(this.prevItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowRight':\n        this.focusOnItem(this.nextItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowUp':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.prevItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowDown':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.nextItem);\n        shouldPreventDefault = true;\n        break;\n      case 'Home':\n        this.focusOnItem(this.firstItem);\n        shouldPreventDefault = true;\n        break;\n      case 'PageUp':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.firstItem);\n        shouldPreventDefault = true;\n        break;\n      case 'End':\n        this.focusOnItem(this.lastItem);\n        shouldPreventDefault = true;\n        break;\n      case 'PageDown':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.lastItem);\n        shouldPreventDefault = true;\n        break;\n      default:\n        break;\n    }\n\n    if (shouldPreventDefault) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * sets tabindex of item based on whether or not it is active\n   */\n  updateActiveItem(item?: HTMLElement):void {\n    if (item) {\n      if (!!this.#activeItem && item !== this.#activeItem) {\n        this.#activeItem.tabIndex = -1;\n      }\n      item.tabIndex = 0;\n      this.#activeItem = item;\n    }\n  }\n\n  /**\n   * focuses on an item and sets it as active\n   */\n  focusOnItem(item?: HTMLElement):void {\n    this.updateActiveItem(item || this.firstItem);\n    this.#activeItem?.focus();\n  }\n\n  /**\n   * Focuses next focusable item\n   */\n  updateItems(items: HTMLElement[]) {\n    const sequence = [...items.slice(this.#itemIndex), ...items.slice(0, this.#itemIndex)];\n    const first = sequence.find(item => this.#focusableItems.includes(item));\n    this.focusOnItem(first || this.firstItem);\n  }\n\n  /**\n   * from array of HTML items, and sets active items\n   */\n  initItems(items: HTMLElement[]) {\n    this.#items = items ?? [];\n    const focusableItems = this.#focusableItems;\n    const [focusableItem] = focusableItems;\n    this.#activeItem = focusableItem;\n    for (const item of focusableItems) {\n      item.tabIndex = this.#activeItem === item ? 0 : -1;\n    }\n  }\n\n  hostConnected() {\n    this.host.addEventListener('keydown', this.#onKeydown.bind(this));\n  }\n}\n"]}
+{"version":3,"file":"roving-tabindex-controller.js","sourceRoot":"","sources":["roving-tabindex-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nconst isFocusableElement = (el: Element): el is HTMLElement =>\n  !!el &&\n  !el.hasAttribute('disabled') &&\n  !el.ariaHidden &&\n  !el.hasAttribute('hidden');\n\n/**\n * Implements roving tabindex, as described in WAI-ARIA practices, [Managing Focus Within\n * Components Using a Roving\n * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex)\n */\nexport class RovingTabindexController implements ReactiveController {\n  /** active focusable element */\n  #activeItem?: HTMLElement;\n\n  /** closest ancestor containing items */\n  #itemsContainer?: HTMLElement;\n\n  /** array of all focusable elements */\n  #items: HTMLElement[] = [];\n\n  /**\n   * finds focusable items from a group of items\n   */\n  get #focusableItems(): HTMLElement[] {\n    return this.#items.filter(isFocusableElement);\n  }\n\n  /**\n   * index of active item in array of focusable items\n   */\n  get #activeIndex(): number {\n    return !!this.#focusableItems && !!this.activeItem ? this.#focusableItems.indexOf(this.activeItem) : -1;\n  }\n\n  /**\n   * index of active item in array of items\n   */\n  get #itemIndex(): number {\n    return this.activeItem ? this.#items.indexOf(this.activeItem) : -1;\n  }\n\n  /**\n   * active item of array of items\n   */\n  get activeItem(): HTMLElement | undefined {\n    return this.#activeItem;\n  }\n\n  /**\n   * first item in array of focusable items\n   */\n  get firstItem(): HTMLElement | undefined {\n    return this.#focusableItems[0];\n  }\n\n  /**\n   * last item in array of focusable items\n   */\n  get lastItem(): HTMLElement | undefined {\n    return this.#focusableItems.at(-1);\n  }\n\n  /**\n   * next item  after active item in array of focusable items\n   */\n  get nextItem(): HTMLElement | undefined {\n    return (\n        this.#activeIndex < this.#focusableItems.length - 1 ? this.#focusableItems[this.#activeIndex + 1]\n      : this.firstItem\n    );\n  }\n\n  /**\n   * previous item  after active item in array of focusable items\n   */\n  get prevItem(): HTMLElement | undefined {\n    return (\n        this.#activeIndex > 0 ? this.#focusableItems[this.#activeIndex - 1]\n      : this.lastItem\n    );\n  }\n\n  constructor(public host: ReactiveControllerHost & HTMLElement) {\n    this.host.addController(this);\n  }\n\n  /**\n   * handles keyboard navigation\n   */\n  #onKeydown = (event: KeyboardEvent) => {\n    if (event.ctrlKey || event.altKey || event.metaKey || this.#focusableItems.length < 1) {\n      return;\n    }\n\n    const item = this.activeItem;\n    let shouldPreventDefault = false;\n    const horizontalOnly =\n        !item ? false\n      : item.tagName === 'SELECT' ||\n        item.getAttribute('role') === 'spinbutton';\n\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        this.focusOnItem(this.prevItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowRight':\n        this.focusOnItem(this.nextItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowUp':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.prevItem);\n        shouldPreventDefault = true;\n        break;\n      case 'ArrowDown':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.nextItem);\n        shouldPreventDefault = true;\n        break;\n      case 'Home':\n        this.focusOnItem(this.firstItem);\n        shouldPreventDefault = true;\n        break;\n      case 'PageUp':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.firstItem);\n        shouldPreventDefault = true;\n        break;\n      case 'End':\n        this.focusOnItem(this.lastItem);\n        shouldPreventDefault = true;\n        break;\n      case 'PageDown':\n        if (horizontalOnly) {\n          return;\n        }\n        this.focusOnItem(this.lastItem);\n        shouldPreventDefault = true;\n        break;\n      default:\n        break;\n    }\n\n    if (shouldPreventDefault) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  };\n\n  /**\n   * sets tabindex of item based on whether or not it is active\n   */\n  updateActiveItem(item?: HTMLElement):void {\n    if (item) {\n      if (!!this.#activeItem && item !== this.#activeItem) {\n        this.#activeItem.tabIndex = -1;\n      }\n      item.tabIndex = 0;\n      this.#activeItem = item;\n    }\n  }\n\n  /**\n   * focuses on an item and sets it as active\n   */\n  focusOnItem(item?: HTMLElement):void {\n    this.updateActiveItem(item || this.firstItem);\n    this.#activeItem?.focus();\n  }\n\n  /**\n   * Focuses next focusable item\n   */\n  updateItems(items: HTMLElement[]) {\n    const sequence = [...items.slice(this.#itemIndex), ...items.slice(0, this.#itemIndex)];\n    const first = sequence.find(item => this.#focusableItems.includes(item));\n    this.focusOnItem(first || this.firstItem);\n  }\n\n  /**\n   * from array of HTML items, and sets active items\n   */\n  initItems(items: HTMLElement[], itemsContainer: HTMLElement = this.host) {\n    this.#items = items ?? [];\n    const focusableItems = this.#focusableItems;\n    const [focusableItem] = focusableItems;\n    this.#activeItem = focusableItem;\n    for (const item of focusableItems) {\n      item.tabIndex = this.#activeItem === item ? 0 : -1;\n    }\n    /**\n     * removes listener on previous contained and applies it to new container\n     */\n    if (!this.#itemsContainer || itemsContainer !== this.#itemsContainer) {\n      this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);\n      this.#itemsContainer = itemsContainer;\n      this.hostConnected();\n    }\n  }\n\n  /**\n   * adds event listners to items container\n   */\n  hostConnected() {\n    this.#itemsContainer?.addEventListener('keydown', this.#onKeydown);\n  }\n\n  /**\n   * removes event listners from items container\n   */\n  hostDisconnected() {\n    this.#itemsContainer?.removeEventListener('keydown', this.#onKeydown);\n  }\n}\n"]}

package/custom-elements.json

@@ -4163,6 +4163,13 @@
                   "type": {
                     "text": "HTMLElement[]"
                   }
+                },
+                {
+                  "name": "itemsContainer",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement"
+                  }
                 }
               ],
               "description": "from array of HTML items, and sets active items"
@@ -4174,7 +4181,18 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "description": "adds event listners to items container"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "removes event listners from items container"
             }
           ]
         }
@@ -4260,13 +4278,23 @@
               "parameters": [
                 {
                   "name": "items"
+                },
+                {
+                  "name": "itemsContainer",
+                  "default": "this.host"
                 }
               ],
               "description": "from array of HTML items, and sets active items"
             },
             {
               "kind": "method",
-              "name": "hostConnected"
+              "name": "hostConnected",
+              "description": "adds event listners to items container"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "description": "removes event listners from items container"
             },
             {
               "kind": "field",
@@ -4305,6 +4333,15 @@
               },
               "description": "active focusable element"
             },
+            {
+              "kind": "field",
+              "name": "#itemsContainer",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "description": "closest ancestor containing items"
+            },
             {
               "kind": "field",
               "name": "#items",
@@ -4383,21 +4420,9 @@
               "description": "previous item  after active item in array of focusable items"
             },
             {
-              "kind": "method",
+              "kind": "field",
               "name": "#onKeydown",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
+              "privacy": "private",
               "description": "handles keyboard navigation"
             },
             {
@@ -4460,13 +4485,26 @@
                   "type": {
                     "text": "HTMLElement[]"
                   }
+                },
+                {
+                  "name": "itemsContainer",
+                  "default": "this.host",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
                 }
               ],
               "description": "from array of HTML items, and sets active items"
             },
             {
               "kind": "method",
-              "name": "hostConnected"
+              "name": "hostConnected",
+              "description": "adds event listners to items container"
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "description": "removes event listners from items container"
             },
             {
               "kind": "field",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/pfe-core",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "description": "PatternFly Elements Core Library",
   "customElements": "custom-elements.json",