keyborg 2.4.0-canary.0 → 2.4.1

package/dist/index.js

@@ -1,20 +1,36 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License.
- */
-// IE11 compat, checks if WeakRef is supported
-const _canUseWeakRef = typeof WeakRef !== "undefined";
-/**
- * WeakRef wrapper around a HTMLElement that also supports IE11
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef}
- * @internal
- */
-
-class WeakRefInstance {
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  KEYBORG_FOCUSIN: () => KEYBORG_FOCUSIN,
+  createKeyborg: () => createKeyborg,
+  disposeKeyborg: () => disposeKeyborg,
+  getLastFocusedProgrammatically: () => getLastFocusedProgrammatically,
+  nativeFocus: () => nativeFocus,
+  version: () => version
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/WeakRefInstance.ts
+var _canUseWeakRef = typeof WeakRef !== "undefined";
+var WeakRefInstance = class {
   constructor(instance) {
     if (_canUseWeakRef && typeof instance === "object") {
       this._weakRef = new WeakRef(instance);
@@ -22,122 +38,89 @@ class WeakRefInstance {
       this._instance = instance;
     }
   }
-  /**
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef/deref}
+  /**
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef/deref}
    */
-
-
   deref() {
-    var _a, _b, _c;
-
+    var _a, _b;
     let instance;
-
     if (this._weakRef) {
-      instance = (_a = this._weakRef) === null || _a === void 0 ? void 0 : _a.deref();
-
+      instance = (_a = this._weakRef) == null ? void 0 : _a.deref();
       if (!instance) {
         delete this._weakRef;
       }
     } else {
       instance = this._instance;
-
-      if ((_c = (_b = instance) === null || _b === void 0 ? void 0 : _b.isDisposed) === null || _c === void 0 ? void 0 : _c.call(_b)) {
+      if ((_b = instance == null ? void 0 : instance.isDisposed) == null ? void 0 : _b.call(instance)) {
         delete this._instance;
       }
     }
-
     return instance;
   }
+};
 
-}
-
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License.
- */
-const KEYBORG_FOCUSIN = "keyborg:focusin";
-
+// src/FocusEvent.ts
+var KEYBORG_FOCUSIN = "keyborg:focusin";
 function canOverrideNativeFocus(win) {
   const HTMLElement = win.HTMLElement;
   const origFocus = HTMLElement.prototype.focus;
   let isCustomFocusCalled = false;
-
   HTMLElement.prototype.focus = function focus() {
     isCustomFocusCalled = true;
   };
-
   const btn = win.document.createElement("button");
   btn.focus();
   HTMLElement.prototype.focus = origFocus;
   return isCustomFocusCalled;
 }
-
-let _canOverrideNativeFocus = false;
-/**
- * Guarantees that the native `focus` will be used
- */
-
+var _canOverrideNativeFocus = false;
 function nativeFocus(element) {
   const focus = element.focus;
-
   if (focus.__keyborgNativeFocus) {
     focus.__keyborgNativeFocus.call(element);
   } else {
     element.focus();
   }
 }
-/**
- * Overrides the native `focus` and setups the keyborg focus event
- */
-
 function setupFocusEvent(win) {
   const kwin = win;
-
   if (!_canOverrideNativeFocus) {
     _canOverrideNativeFocus = canOverrideNativeFocus(kwin);
   }
-
   const origFocus = kwin.HTMLElement.prototype.focus;
-
   if (origFocus.__keyborgNativeFocus) {
-    // Already set up.
     return;
   }
-
   kwin.HTMLElement.prototype.focus = focus;
-
-  const focusOutShadowRootHandler = e => {
+  const focusOutShadowRootHandler = (e) => {
     const relatedTarget = e.relatedTarget;
-    const currentTarget = e.currentTarget; // cleanup polyfill event handlers once focus leaves the shadow root
-
+    const currentTarget = e.currentTarget;
     if (!currentTarget.contains(relatedTarget)) {
-      currentTarget.removeEventListener("focusin", focusInHandler);
-      currentTarget.removeEventListener("focusout", focusOutShadowRootHandler);
+      currentTarget.removeEventListener("focusin", focusInHandler, true);
+      currentTarget.removeEventListener(
+        "focusout",
+        focusOutShadowRootHandler,
+        true
+      );
     }
   };
-
-  const focusInHandler = e => {
+  const focusInHandler = (e) => {
     var _a;
-
-    let target = e.target;
-
+    const target = e.target;
     if (!target) {
       return;
     }
-
     if (target.shadowRoot) {
-      // https://bugs.chromium.org/p/chromium/issues/detail?id=1512028
-      // focusin events don't bubble up through an open shadow root once focus is inside
-      // once focus moves into a shadow root - we drop the same focusin handler there
-      // keyborg's custom event will still bubble up since it is composed
-      // event handlers should be cleaned up once focus leaves the shadow root
-      target.shadowRoot.addEventListener("focusin", focusInHandler);
-      target.shadowRoot.addEventListener("focusout", focusOutShadowRootHandler);
-      target = e.composedPath()[0];
+      target.shadowRoot.addEventListener("focusin", focusInHandler, true);
+      target.shadowRoot.addEventListener(
+        "focusout",
+        focusOutShadowRootHandler,
+        true
+      );
+      return;
     }
-
     const details = {
-      relatedTarget: e.relatedTarget || undefined
+      relatedTarget: e.relatedTarget || void 0
     };
     const event = new CustomEvent(KEYBORG_FOCUSIN, {
       cancelable: true,
@@ -145,113 +128,84 @@ function setupFocusEvent(win) {
       // Allows the event to bubble past an open shadow root
       composed: true,
       detail: details
-    }); // Tabster (and other users) can still use the legacy details field - keeping for backwards compat
-
+    });
     event.details = details;
-
     if (_canOverrideNativeFocus || data.lastFocusedProgrammatically) {
-      details.isFocusedProgrammatically = target === ((_a = data.lastFocusedProgrammatically) === null || _a === void 0 ? void 0 : _a.deref());
-      data.lastFocusedProgrammatically = undefined;
+      details.isFocusedProgrammatically = target === ((_a = data.lastFocusedProgrammatically) == null ? void 0 : _a.deref());
+      data.lastFocusedProgrammatically = void 0;
     }
-
     target.dispatchEvent(event);
   };
-
   const data = kwin.__keyborgData = {
     focusInHandler
   };
-  kwin.document.addEventListener("focusin", kwin.__keyborgData.focusInHandler, true);
-
+  kwin.document.addEventListener(
+    "focusin",
+    kwin.__keyborgData.focusInHandler,
+    true
+  );
   function focus() {
     const keyborgNativeFocusEvent = kwin.__keyborgData;
-
     if (keyborgNativeFocusEvent) {
-      keyborgNativeFocusEvent.lastFocusedProgrammatically = new WeakRefInstance(this);
-    } // eslint-disable-next-line prefer-rest-params
-
-
+      keyborgNativeFocusEvent.lastFocusedProgrammatically = new WeakRefInstance(
+        this
+      );
+    }
     return origFocus.apply(this, arguments);
   }
-
   focus.__keyborgNativeFocus = origFocus;
 }
-/**
- * Removes keyborg event listeners and custom focus override
- * @param win The window that stores keyborg focus events
- */
-
 function disposeFocusEvent(win) {
   const kwin = win;
   const proto = kwin.HTMLElement.prototype;
   const origFocus = proto.focus.__keyborgNativeFocus;
   const keyborgNativeFocusEvent = kwin.__keyborgData;
-
   if (keyborgNativeFocusEvent) {
-    kwin.document.removeEventListener("focusin", keyborgNativeFocusEvent.focusInHandler, true);
+    kwin.document.removeEventListener(
+      "focusin",
+      keyborgNativeFocusEvent.focusInHandler,
+      true
+    );
     delete kwin.__keyborgData;
   }
-
   if (origFocus) {
     proto.focus = origFocus;
   }
 }
-/**
- * @param win The window that stores keyborg focus events
- * @returns The last element focused with element.focus()
- */
-
 function getLastFocusedProgrammatically(win) {
   var _a;
-
   const keyborgNativeFocusEvent = win.__keyborgData;
-  return keyborgNativeFocusEvent ? ((_a = keyborgNativeFocusEvent.lastFocusedProgrammatically) === null || _a === void 0 ? void 0 : _a.deref()) || null : undefined;
+  return keyborgNativeFocusEvent ? ((_a = keyborgNativeFocusEvent.lastFocusedProgrammatically) == null ? void 0 : _a.deref()) || null : void 0;
 }
 
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License.
- */
-const _dismissTimeout = 500; // When a key from dismissKeys is pressed and the focus is not moved
-// during _dismissTimeout time, dismiss the keyboard navigation mode.
-
-let _lastId = 0;
-/**
- * Source of truth for all the keyborg core instances and the current keyboard navigation state
- */
-
-class KeyborgState {
+// src/Keyborg.ts
+var _dismissTimeout = 500;
+var _lastId = 0;
+var KeyborgState = class {
   constructor() {
     this.__keyborgCoreRefs = {};
     this._isNavigatingWithKeyboard = false;
   }
-
   add(keyborg) {
     const id = keyborg.id;
-
     if (!(id in this.__keyborgCoreRefs)) {
       this.__keyborgCoreRefs[id] = new WeakRefInstance(keyborg);
     }
   }
-
   remove(id) {
     delete this.__keyborgCoreRefs[id];
-
     if (Object.keys(this.__keyborgCoreRefs).length === 0) {
       this._isNavigatingWithKeyboard = false;
     }
   }
-
   setVal(isNavigatingWithKeyboard) {
     if (this._isNavigatingWithKeyboard === isNavigatingWithKeyboard) {
       return;
     }
-
     this._isNavigatingWithKeyboard = isNavigatingWithKeyboard;
-
     for (const id of Object.keys(this.__keyborgCoreRefs)) {
       const ref = this.__keyborgCoreRefs[id];
       const keyborg = ref.deref();
-
       if (keyborg) {
         keyborg.update(isNavigatingWithKeyboard);
       } else {
@@ -259,207 +213,154 @@ class KeyborgState {
       }
     }
   }
-
   getVal() {
     return this._isNavigatingWithKeyboard;
   }
-
-}
-
-const _state = /*#__PURE__*/new KeyborgState();
-/**
- * Manages a collection of Keyborg instances in a window/document and updates keyborg state
- */
-
-
-class KeyborgCore {
+};
+var _state = new KeyborgState();
+var KeyborgCore = class {
   constructor(win, props) {
-    this._onFocusIn = e => {
-      // When the focus is moved not programmatically and without keydown events,
-      // it is likely that the focus is moved by screen reader (as it might swallow
-      // the events when the screen reader shortcuts are used). The screen reader
-      // usage is keyboard navigation.
+    this._onFocusIn = (e) => {
       if (this._isMouseUsedTimer) {
-        // There was a mouse event recently.
         return;
       }
-
       if (_state.getVal()) {
         return;
       }
-
       const details = e.detail;
-
       if (!details.relatedTarget) {
         return;
       }
-
-      if (details.isFocusedProgrammatically || details.isFocusedProgrammatically === undefined) {
-        // The element is focused programmatically, or the programmatic focus detection
-        // is not working.
+      if (details.isFocusedProgrammatically || details.isFocusedProgrammatically === void 0) {
         return;
       }
-
       _state.setVal(true);
     };
-
-    this._onMouseDown = e => {
+    this._onMouseDown = (e) => {
       if (e.buttons === 0 || e.clientX === 0 && e.clientY === 0 && e.screenX === 0 && e.screenY === 0) {
-        // This is most likely an event triggered by the screen reader to perform
-        // an action on an element, do not dismiss the keyboard navigation mode.
         return;
       }
-
       const win = this._win;
-
       if (win) {
         if (this._isMouseUsedTimer) {
           win.clearTimeout(this._isMouseUsedTimer);
         }
-
         this._isMouseUsedTimer = win.setTimeout(() => {
           delete this._isMouseUsedTimer;
-        }, 1000); // Keeping the indication of the mouse usage for some time.
+        }, 1e3);
       }
-
       _state.setVal(false);
     };
-
-    this._onKeyDown = e => {
-      var _a, _b;
-
+    this._onKeyDown = (e) => {
       const isNavigatingWithKeyboard = _state.getVal();
-
-      const keyCode = e.keyCode;
-      const triggerKeys = this._triggerKeys;
-
-      if (!isNavigatingWithKeyboard && (!triggerKeys || triggerKeys.has(keyCode))) {
-        const activeElement = (_a = this._win) === null || _a === void 0 ? void 0 : _a.document.activeElement;
-
-        if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.contentEditable === "true")) {
-          // We're inside an input, textarea or contenteditable, it's not
-          // keyboard navigation, it is text editing scenario.
-          return;
+      if (isNavigatingWithKeyboard) {
+        if (this._shouldDismissKeyboardNavigation(e)) {
+          this._scheduleDismiss();
+        }
+      } else {
+        if (this._shouldTriggerKeyboardNavigation(e)) {
+          _state.setVal(true);
         }
-
-        _state.setVal(true);
-      } else if (isNavigatingWithKeyboard && ((_b = this._dismissKeys) === null || _b === void 0 ? void 0 : _b.has(keyCode))) {
-        this._scheduleDismiss();
       }
     };
-
     this.id = "c" + ++_lastId;
     this._win = win;
     const doc = win.document;
-
     if (props) {
       const triggerKeys = props.triggerKeys;
       const dismissKeys = props.dismissKeys;
-
-      if (triggerKeys === null || triggerKeys === void 0 ? void 0 : triggerKeys.length) {
+      if (triggerKeys == null ? void 0 : triggerKeys.length) {
         this._triggerKeys = new Set(triggerKeys);
       }
-
-      if (dismissKeys === null || dismissKeys === void 0 ? void 0 : dismissKeys.length) {
+      if (dismissKeys == null ? void 0 : dismissKeys.length) {
         this._dismissKeys = new Set(dismissKeys);
       }
     }
-
-    doc.addEventListener(KEYBORG_FOCUSIN, this._onFocusIn, true); // Capture!
-
-    doc.addEventListener("mousedown", this._onMouseDown, true); // Capture!
-
-    win.addEventListener("keydown", this._onKeyDown, true); // Capture!
-
+    doc.addEventListener(KEYBORG_FOCUSIN, this._onFocusIn, true);
+    doc.addEventListener("mousedown", this._onMouseDown, true);
+    win.addEventListener("keydown", this._onKeyDown, true);
     setupFocusEvent(win);
-
     _state.add(this);
   }
-
   dispose() {
     const win = this._win;
-
     if (win) {
       if (this._isMouseUsedTimer) {
         win.clearTimeout(this._isMouseUsedTimer);
-        this._isMouseUsedTimer = undefined;
+        this._isMouseUsedTimer = void 0;
       }
-
       if (this._dismissTimer) {
         win.clearTimeout(this._dismissTimer);
-        this._dismissTimer = undefined;
+        this._dismissTimer = void 0;
       }
-
       disposeFocusEvent(win);
       const doc = win.document;
-      doc.removeEventListener(KEYBORG_FOCUSIN, this._onFocusIn, true); // Capture!
-
-      doc.removeEventListener("mousedown", this._onMouseDown, true); // Capture!
-
-      win.removeEventListener("keydown", this._onKeyDown, true); // Capture!
-
+      doc.removeEventListener(KEYBORG_FOCUSIN, this._onFocusIn, true);
+      doc.removeEventListener("mousedown", this._onMouseDown, true);
+      win.removeEventListener("keydown", this._onKeyDown, true);
       delete this._win;
-
       _state.remove(this.id);
     }
   }
-
   isDisposed() {
     return !!this._win;
   }
-  /**
-   * Updates all keyborg instances with the keyboard navigation state
+  /**
+   * Updates all keyborg instances with the keyboard navigation state
    */
-
-
   update(isNavigatingWithKeyboard) {
     var _a, _b;
-
-    const keyborgs = (_b = (_a = this._win) === null || _a === void 0 ? void 0 : _a.__keyborg) === null || _b === void 0 ? void 0 : _b.refs;
-
+    const keyborgs = (_b = (_a = this._win) == null ? void 0 : _a.__keyborg) == null ? void 0 : _b.refs;
     if (keyborgs) {
       for (const id of Object.keys(keyborgs)) {
         Keyborg.update(keyborgs[id], isNavigatingWithKeyboard);
       }
     }
   }
-
+  /**
+   * @returns whether the keyboard event should trigger keyboard navigation mode
+   */
+  _shouldTriggerKeyboardNavigation(e) {
+    var _a;
+    if (e.key === "Tab") {
+      return true;
+    }
+    const activeElement = (_a = this._win) == null ? void 0 : _a.document.activeElement;
+    const isTriggerKey = !this._triggerKeys || this._triggerKeys.has(e.keyCode);
+    const isEditable = activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.isContentEditable);
+    return isTriggerKey && !isEditable;
+  }
+  /**
+   * @returns whether the keyboard event should dismiss keyboard navigation mode
+   */
+  _shouldDismissKeyboardNavigation(e) {
+    var _a;
+    return (_a = this._dismissKeys) == null ? void 0 : _a.has(e.keyCode);
+  }
   _scheduleDismiss() {
     const win = this._win;
-
     if (win) {
       if (this._dismissTimer) {
         win.clearTimeout(this._dismissTimer);
-        this._dismissTimer = undefined;
+        this._dismissTimer = void 0;
       }
-
       const was = win.document.activeElement;
       this._dismissTimer = win.setTimeout(() => {
-        this._dismissTimer = undefined;
+        this._dismissTimer = void 0;
         const cur = win.document.activeElement;
-
         if (was && cur && was === cur) {
-          // Esc was pressed, currently focused element hasn't changed.
-          // Just dismiss the keyboard navigation mode.
           _state.setVal(false);
         }
       }, _dismissTimeout);
     }
   }
-
-}
-/**
- * Used to determine the keyboard navigation state
- */
-
-
-class Keyborg {
+};
+var Keyborg = class _Keyborg {
   constructor(win, props) {
     this._cb = [];
     this._id = "k" + ++_lastId;
     this._win = win;
     const current = win.__keyborg;
-
     if (current) {
       this._core = current.core;
       current.refs[this._id] = this;
@@ -467,88 +368,68 @@ class Keyborg {
       this._core = new KeyborgCore(win, props);
       win.__keyborg = {
         core: this._core,
-        refs: {
-          [this._id]: this
-        }
+        refs: { [this._id]: this }
       };
     }
   }
-
   static create(win, props) {
-    return new Keyborg(win, props);
+    return new _Keyborg(win, props);
   }
-
   static dispose(instance) {
     instance.dispose();
   }
-  /**
-   * Updates all subscribed callbacks with the keyboard navigation state
+  /**
+   * Updates all subscribed callbacks with the keyboard navigation state
    */
-
-
   static update(instance, isNavigatingWithKeyboard) {
-    instance._cb.forEach(callback => callback(isNavigatingWithKeyboard));
+    instance._cb.forEach((callback) => callback(isNavigatingWithKeyboard));
   }
-
   dispose() {
     var _a;
-
-    const current = (_a = this._win) === null || _a === void 0 ? void 0 : _a.__keyborg;
-
-    if (current === null || current === void 0 ? void 0 : current.refs[this._id]) {
+    const current = (_a = this._win) == null ? void 0 : _a.__keyborg;
+    if (current == null ? void 0 : current.refs[this._id]) {
       delete current.refs[this._id];
-
       if (Object.keys(current.refs).length === 0) {
-        current.core.dispose(); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
+        current.core.dispose();
         delete this._win.__keyborg;
       }
-    } else if (process.env.NODE_ENV === 'development') {
-      console.error("Keyborg instance " + this._id + " is being disposed incorrectly.");
+    } else if (process.env.NODE_ENV !== "production") {
+      console.error(
+        `Keyborg instance ${this._id} is being disposed incorrectly.`
+      );
     }
-
     this._cb = [];
     delete this._core;
     delete this._win;
   }
-  /**
-   * @returns Whether the user is navigating with keyboard
+  /**
+   * @returns Whether the user is navigating with keyboard
    */
-
-
   isNavigatingWithKeyboard() {
     return _state.getVal();
   }
-  /**
-   * @param callback - Called when the keyboard navigation state changes
+  /**
+   * @param callback - Called when the keyboard navigation state changes
    */
-
-
   subscribe(callback) {
     this._cb.push(callback);
   }
-  /**
-   * @param callback - Registered with subscribe
+  /**
+   * @param callback - Registered with subscribe
    */
-
-
   unsubscribe(callback) {
     const index = this._cb.indexOf(callback);
-
     if (index >= 0) {
       this._cb.splice(index, 1);
     }
   }
-  /**
-   * Manually set the keyboard navigtion state
+  /**
+   * Manually set the keyboard navigtion state
    */
-
-
   setVal(isNavigatingWithKeyboard) {
     _state.setVal(isNavigatingWithKeyboard);
   }
-
-}
+};
 function createKeyborg(win, props) {
   return Keyborg.create(win, props);
 }
@@ -556,17 +437,19 @@ function disposeKeyborg(instance) {
   Keyborg.dispose(instance);
 }
 
-/*!
- * Copyright (c) Microsoft Corporation. All rights reserved.
- * Licensed under the MIT License.
+// src/index.ts
+var version = "2.4.1";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KEYBORG_FOCUSIN,
+  createKeyborg,
+  disposeKeyborg,
+  getLastFocusedProgrammatically,
+  nativeFocus,
+  version
+});
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
  */
-const version = "2.4.0-canary.0";
-
-exports.KEYBORG_FOCUSIN = KEYBORG_FOCUSIN;
-exports.Keyborg = Keyborg;
-exports.createKeyborg = createKeyborg;
-exports.disposeKeyborg = disposeKeyborg;
-exports.getLastFocusedProgrammatically = getLastFocusedProgrammatically;
-exports.nativeFocus = nativeFocus;
-exports.version = version;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map