arrowtab 0.0.2 → 0.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Sean Nicholas 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,20 @@
 # ArrowTab
 
-**ArrowTab** allows you to navigate a webpage using the arrow keys, automatically selecting the nearest focusable element. This enables fast and efficient keyboard-only navigation across the page.
+**ArrowTab** allows you to **navigate** a webpage **using the arrow keys**, automatically selecting the nearest focusable element. This enables fast and efficient keyboard-only navigation across the page.
 
 ArrowTab is particularly **useful for business applications**, where power users need to prioritize **high productivity**.
 
-Instead of hitting `Tab` a thousand times, you can simply use the arrow keys to indicate the direction and jump to the next input, button, or link you want to select.
+Instead of hitting `Tab` repeatedly, you can simply use the arrow keys to indicate the direction and jump to the next input, button, or link you want to select.
 
-## Setup
+ArrowTab's default settings work well, but they are not always a plug-and-play solution. It helps if you **build your app with ArrowTab in mind**. For example, aligning your focusable elements into a grid and considering the placement of your navigation. The idea is to integrate ArrowTab into your app from the beginning, not to add it as an afterthought.
+
+## Input Behavior Changes
+
+ArrowTab slightly modifies the behavior of some input elements to enhance keyboard navigation. For example, number inputs will not change their value when using the up and down arrow keys; instead, the focus will move to the element above or below.
+
+To revert to the native behavior, press `Shift` + `Arrow Key`.
+
+## Installation
 
 pnpm:
 
@@ -28,8 +36,107 @@ npm install arrowtab
 
 ## Usage
 
-```js
+Vanilla JS:
+
+```ts
 import { initArrowTab } from 'arrowtab'
 
 initArrowTab()
 ```
+
+React:
+
+```tsx
+'use client'
+
+import { useEffect } from 'react'
+import { initArrowTab } from 'arrowtab'
+
+export const ArrowTab = () => {
+  useEffect(() => {
+    const { cleanup } = initArrowTab()
+
+    return () => {
+      cleanup()
+    }
+  }, [])
+
+  return null
+}
+```
+
+### Cleanup
+
+If you want to remove the ArrowTab event listener, you can call the `cleanup` function. This is useful if you use ArrowTab in a `useEffect` hook.
+
+```ts
+const { cleanup } = initArrowTab()
+
+cleanup()
+```
+
+## Options
+
+You can pass options to the `initArrowTab` function. For example:
+
+```ts
+initArrowTab({ debug: true })
+```
+
+### debug
+
+default: `false`
+
+If debug is set to `true`, ArrowTab will log debug information to the console. It also enables the visual debug mode. To activate the visual debug mode, press `Ctrl` + `Arrow Key`. For example, `Ctrl` + `Arrow Down` will highlight all the focusable elements.
+
+Here is an example:
+
+<div style="padding:10px; background:white; border-radius:4px; margin-bottom:1rem">
+  <img src="docs/images/visual-debug-mode.jpg" alt="Visual debug mode example">
+</div>
+
+Blue indicates the current element. Green indicates focusable elements that are within reach, and red indicates those that are not within reach.
+
+The numbers represent the order of the focusable elements. The numbers in parentheses represent the order of the focusable elements that are within reach. Lower numbers are closer to the current element.
+
+If you click on a focusable element, debug information will be logged to the console.
+
+To deactivate the visual debug mode, press `Esc`.
+
+## data-arrowtab
+
+You can control the behavior of ArrowTab by adding a `data-arrowtab` attribute to any element. Separate the keywords with a space. For example: `<div data-arrowtab="disable-left disable-right">`
+
+Here are the available keywords:
+
+### disable, disable-${key}
+
+Sometimes your components are listening to arrow keys themselves. In that case, you can disable ArrowTab for that element by adding the `disable` attribute.
+
+If you only want to disable a specific key, then use: `disable-left`, `disable-right`, `disable-up`, `disable-down`.
+
+## Development
+
+```sh
+pnpm dev
+```
+
+A demo page will open in your browser at `http://localhost:8080`.
+
+If you want to use the library in your app, you can use the following code:
+
+```ts
+import { initArrowTab } from 'http://localhost:8080/dist/index.js'
+
+initArrowTab()
+```
+
+Or as a script tag:
+
+```html
+<script type="module">
+  import { initArrowTab } from 'http://localhost:8080/dist/index.js'
+
+  initArrowTab()
+</script>
+```

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { initArrowTab } from './lib/initArrowTab.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { initArrowTab } from './lib/initArrowTab.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.test.js

@@ -0,0 +1,6 @@
+import { expect, test } from 'vitest';
+import { initArrowTab } from './index.js';
+test('initArrowTab to exist', () => {
+    expect(initArrowTab).toBeDefined();
+});
+//# sourceMappingURL=index.test.js.map

package/dist/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAEzC,IAAI,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACjC,MAAM,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE,CAAA;AACpC,CAAC,CAAC,CAAA"}

package/dist/lib/debugMode.d.ts

@@ -0,0 +1,8 @@
+export declare const activateDebugMode: ({ focusableElements, }: {
+    focusableElements: {
+        element: Element;
+        withinReach: boolean;
+    }[];
+}) => void;
+export declare const deactivateDebugMode: () => void;
+export declare const isInDebugMode: () => boolean;

package/dist/lib/debugMode.js

@@ -0,0 +1,68 @@
+let inDebugMode = false;
+export const activateDebugMode = ({ focusableElements, }) => {
+    inDebugMode = true;
+    if (document.activeElement) {
+        addDebugElementToDom({
+            element: document.activeElement,
+            withinReach: false,
+            content: '',
+            color: 'rgb(33 150 243 / 80%)',
+        });
+    }
+    let counter = focusableElements.length;
+    let withinReachCounter = focusableElements.filter((focusable) => focusable.withinReach).length;
+    for (const focusable of [...focusableElements].reverse()) {
+        addDebugElementToDom({
+            ...focusable,
+            content: `<div>${counter--} ${focusable.withinReach ? `(${withinReachCounter--})` : ''}</div>`,
+            color: focusable.withinReach
+                ? 'rgba(76 175 80 / 80%)'
+                : 'rgb(244 67 54 / 80%)',
+        });
+    }
+};
+export const deactivateDebugMode = () => {
+    document.querySelectorAll('[data-arrowtab="debug"]').forEach((div) => {
+        div.remove();
+    });
+    inDebugMode = false;
+    return;
+};
+export const isInDebugMode = () => inDebugMode;
+const addDebugElementToDom = (focusable) => {
+    if (!(focusable.element instanceof HTMLElement))
+        return;
+    const div = document.createElement('div');
+    const rect = focusable.element.getBoundingClientRect();
+    const scrollX = document.documentElement.scrollLeft;
+    const scrollY = document.documentElement.scrollTop;
+    div.style.position = 'absolute';
+    div.style.top = `${rect.top + scrollY}px`;
+    div.style.left = `${rect.left + scrollX}px`;
+    let width = Math.max(rect.width, 10);
+    let height = Math.max(rect.height, 10);
+    div.style.width = `${width}px`;
+    div.style.height = `${height}px`;
+    div.style.color = 'white';
+    div.style.backgroundColor = focusable.color;
+    div.style.zIndex = '100000';
+    div.style.display = 'flex';
+    div.style.alignItems = 'center';
+    div.style.justifyContent = 'center';
+    div.style.cursor = 'pointer';
+    div.style.borderRadius = '4px';
+    div.innerHTML = focusable.content;
+    div.dataset.arrowtab = 'debug';
+    // Move the click event to the focusable element
+    div.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log({
+            focusable,
+            rect,
+            debugElement: div,
+        });
+    });
+    document.body.appendChild(div);
+};
+//# sourceMappingURL=debugMode.js.map

package/dist/lib/debugMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debugMode.js","sourceRoot":"","sources":["../../src/lib/debugMode.ts"],"names":[],"mappings":"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"}

package/dist/lib/distances.d.ts

@@ -0,0 +1,13 @@
+export declare const getEuclideanDistance: ({ xDistance, yDistance, }: {
+    xDistance: number;
+    yDistance: number;
+}) => number;
+export declare const manhattan: ({ xDistance, yDistance, }: {
+    xDistance: number;
+    yDistance: number;
+}) => number;
+export declare const manhattanWeighted: ({ xDistance, yDistance, event, }: {
+    xDistance: number;
+    yDistance: number;
+    event: KeyboardEvent;
+}) => number | undefined;

package/dist/lib/distances.js

@@ -0,0 +1,15 @@
+export const getEuclideanDistance = ({ xDistance, yDistance, }) => {
+    return Math.sqrt(xDistance ** 2 + yDistance ** 2);
+};
+export const manhattan = ({ xDistance, yDistance, }) => {
+    return Math.abs(xDistance) + Math.abs(yDistance);
+};
+export const manhattanWeighted = ({ xDistance, yDistance, event, }) => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        return Math.abs(xDistance) + Math.abs(yDistance) * 0.1;
+    }
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        return Math.abs(xDistance) * 0.1 + Math.abs(yDistance);
+    }
+};
+//# sourceMappingURL=distances.js.map

package/dist/lib/distances.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"distances.js","sourceRoot":"","sources":["../../src/lib/distances.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,SAAS,EACT,SAAS,GAIV,EAAE,EAAE;IACH,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,CAAA;AACnD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,SAAS,EACT,SAAS,GAIV,EAAE,EAAE;IACH,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;AAClD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,SAAS,EACT,SAAS,EACT,KAAK,GAKN,EAAE,EAAE;IACH,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;QACzD,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,GAAG,CAAA;IACxD,CAAC;IACD,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;QAC5D,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;IACxD,CAAC;AACH,CAAC,CAAA"}

package/dist/lib/getAngle.d.ts

@@ -0,0 +1,4 @@
+export declare const getAngle: ({ activeElement, element, }: {
+    activeElement: Element;
+    element: Element;
+}) => number;

package/dist/lib/getAngle.js

@@ -0,0 +1,15 @@
+import { getXyDistance } from './getXyDistance.js';
+export const getAngle = ({ activeElement, element, }) => {
+    const { xDistance, yDistance } = getXyDistance({
+        activeElement,
+        element,
+    });
+    let angle = Math.acos(yDistance / Math.sqrt(xDistance ** 2 + yDistance ** 2)) *
+        (180 / Math.PI);
+    const direction = xDistance > 0 ? 'right' : 'left';
+    if (direction === 'right') {
+        angle = 360 - angle;
+    }
+    return angle;
+};
+//# sourceMappingURL=getAngle.js.map

package/dist/lib/getAngle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getAngle.js","sourceRoot":"","sources":["../../src/lib/getAngle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,aAAa,EACb,OAAO,GAIR,EAAE,EAAE;IACH,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC;QAC7C,aAAa;QACb,OAAO;KACR,CAAC,CAAA;IAEF,IAAI,KAAK,GACP,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,CAAC;QACjE,CAAC,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IACjB,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAA;IAClD,IAAI,SAAS,KAAK,OAAO,EAAE,CAAC;QAC1B,KAAK,GAAG,GAAG,GAAG,KAAK,CAAA;IACrB,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/dist/lib/getFocusable.js

@@ -0,0 +1,29 @@
+export const getFocusable = () => {
+    // Selectors from https://zellwk.com/blog/keyboard-focusable-elements/
+    const allFocusable = document.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex^="-"])');
+    const focusable = Array.from(allFocusable).filter((element) => {
+        if ('disabled' in element && element.disabled)
+            return false;
+        let currentElement = element;
+        while (currentElement) {
+            if ('hidden' in currentElement && currentElement.hidden)
+                return false;
+            if (currentElement.getAttribute('aria-hidden') === 'true')
+                return false;
+            const style = window.getComputedStyle(currentElement);
+            if (style.display === 'none' ||
+                style.visibility === 'hidden' ||
+                style.opacity === '0') {
+                return false;
+            }
+            const rect = currentElement.getBoundingClientRect();
+            if (rect.width === 0 && rect.height === 0) {
+                return false;
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return true;
+    });
+    return focusable;
+};
+//# sourceMappingURL=getFocusable.js.map

package/dist/lib/getFocusable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFocusable.js","sourceRoot":"","sources":["../../src/lib/getFocusable.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,sEAAsE;IACtE,MAAM,YAAY,GAAG,QAAQ,CAAC,gBAAgB,CAC5C,oFAAoF,CACrF,CAAA;IACD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE;QAC5D,IAAI,UAAU,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ;YAAE,OAAO,KAAK,CAAA;QAE3D,IAAI,cAAc,GAAmB,OAAO,CAAA;QAC5C,OAAO,cAAc,EAAE,CAAC;YACtB,IAAI,QAAQ,IAAI,cAAc,IAAI,cAAc,CAAC,MAAM;gBAAE,OAAO,KAAK,CAAA;YACrE,IAAI,cAAc,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,MAAM;gBAAE,OAAO,KAAK,CAAA;YAEvE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAA;YACrD,IACE,KAAK,CAAC,OAAO,KAAK,MAAM;gBACxB,KAAK,CAAC,UAAU,KAAK,QAAQ;gBAC7B,KAAK,CAAC,OAAO,KAAK,GAAG,EACrB,CAAC;gBACD,OAAO,KAAK,CAAA;YACd,CAAC;YAED,MAAM,IAAI,GAAG,cAAc,CAAC,qBAAqB,EAAE,CAAA;YACnD,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC1C,OAAO,KAAK,CAAA;YACd,CAAC;YACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAA;QAC/C,CAAC;QAED,OAAO,IAAI,CAAA;IACb,CAAC,CAAC,CAAA;IACF,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA"}

package/dist/lib/getXyDistance.d.ts

@@ -0,0 +1,7 @@
+export declare const getXyDistance: ({ activeElement, element, }: {
+    activeElement: Element;
+    element: Element;
+}) => {
+    xDistance: number;
+    yDistance: number;
+};

package/dist/lib/getXyDistance.js

@@ -0,0 +1,12 @@
+import { getMiddle } from './positions.js';
+export const getXyDistance = ({ activeElement, element, }) => {
+    const activePosition = getMiddle(activeElement);
+    const position = getMiddle(element);
+    const xDistance = position.x - activePosition.x;
+    const yDistance = position.y - activePosition.y;
+    return {
+        xDistance,
+        yDistance,
+    };
+};
+//# sourceMappingURL=getXyDistance.js.map

package/dist/lib/getXyDistance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getXyDistance.js","sourceRoot":"","sources":["../../src/lib/getXyDistance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,aAAa,EACb,OAAO,GAIR,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,SAAS,CAAC,aAAa,CAAC,CAAA;IAC/C,MAAM,QAAQ,GAAG,SAAS,CAAC,OAAO,CAAC,CAAA;IAEnC,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAA;IAC/C,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAA;IAE/C,OAAO;QACL,SAAS;QACT,SAAS;KACV,CAAA;AACH,CAAC,CAAA"}

package/dist/lib/hasDisabledKeys.d.ts

@@ -0,0 +1,4 @@
+export declare const hasDisabledKeys: ({ event, activeElement, }: {
+    event: KeyboardEvent;
+    activeElement: Element;
+}) => boolean;

package/dist/lib/hasDisabledKeys.js

@@ -0,0 +1,26 @@
+export const hasDisabledKeys = ({ event, activeElement, }) => {
+    const checkElement = (element) => {
+        const data = element.getAttribute('data-arrowtab');
+        if (data) {
+            const keywords = data.split(' ');
+            if (keywords.includes('disable')) {
+                return true;
+            }
+            const direction = event.key.toLowerCase().replace('arrow', '');
+            console.log({ direction, keywords });
+            if (keywords.includes(`disable-${direction}`)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    let currentElement = activeElement;
+    while (currentElement) {
+        if (checkElement(currentElement)) {
+            return true;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return false;
+};
+//# sourceMappingURL=hasDisabledKeys.js.map

package/dist/lib/hasDisabledKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasDisabledKeys.js","sourceRoot":"","sources":["../../src/lib/hasDisabledKeys.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,KAAK,EACL,aAAa,GAId,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,CAAC,OAAgB,EAAW,EAAE;QACjD,MAAM,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAA;QAElD,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAChC,IAAI,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;gBACjC,OAAO,IAAI,CAAA;YACb,CAAC;YAED,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;YAC9D,OAAO,CAAC,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAA;YACpC,IAAI,QAAQ,CAAC,QAAQ,CAAC,WAAW,SAAS,EAAE,CAAC,EAAE,CAAC;gBAC9C,OAAO,IAAI,CAAA;YACb,CAAC;QACH,CAAC;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,IAAI,cAAc,GAAmB,aAAa,CAAA;IAClD,OAAO,cAAc,EAAE,CAAC;QACtB,IAAI,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;YACjC,OAAO,IAAI,CAAA;QACb,CAAC;QACD,cAAc,GAAG,cAAc,CAAC,aAAa,CAAA;IAC/C,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/dist/lib/hasTextSelection.d.ts

@@ -0,0 +1,4 @@
+export declare const hasTextSelection: ({ activeElement, event, }: {
+    activeElement: Element;
+    event: KeyboardEvent;
+}) => boolean;

package/dist/lib/hasTextSelection.js

@@ -0,0 +1,53 @@
+import { sumBy } from './sumBy.js';
+export const hasTextSelection = ({ activeElement, event, }) => {
+    if (activeElement instanceof HTMLInputElement ||
+        activeElement instanceof HTMLTextAreaElement) {
+        const selectionStart = activeElement.selectionStart;
+        const selectionEnd = activeElement.selectionEnd;
+        if (event.key === 'ArrowLeft' &&
+            selectionStart !== undefined &&
+            selectionStart !== null &&
+            selectionStart !== 0) {
+            return true;
+        }
+        if (event.key === 'ArrowRight' &&
+            selectionStart !== undefined &&
+            selectionStart !== null &&
+            selectionStart !== activeElement.value?.length) {
+            return true;
+        }
+        if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
+            selectionStart !== undefined &&
+            selectionEnd !== undefined &&
+            selectionStart !== null &&
+            selectionEnd !== null &&
+            selectionStart !== selectionEnd) {
+            return true;
+        }
+        if (event.key === 'ArrowUp' &&
+            selectionStart !== undefined &&
+            selectionStart !== null &&
+            activeElement instanceof HTMLTextAreaElement) {
+            const rows = activeElement.value?.split('\n');
+            const start = selectionStart;
+            const firstRow = rows.at(0);
+            if (firstRow && start > firstRow.length) {
+                return true;
+            }
+        }
+        if (event.key === 'ArrowDown' &&
+            selectionStart !== undefined &&
+            selectionStart !== null &&
+            activeElement instanceof HTMLTextAreaElement) {
+            const rows = activeElement.value?.split('\n');
+            const withoutLastRow = rows.slice(0, -1);
+            const lengthUntilLastRow = sumBy(withoutLastRow, (row) => row.length);
+            const start = selectionStart;
+            if (start <= lengthUntilLastRow + 1) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+//# sourceMappingURL=hasTextSelection.js.map

package/dist/lib/hasTextSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasTextSelection.js","sourceRoot":"","sources":["../../src/lib/hasTextSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAElC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,aAAa,EACb,KAAK,GAIN,EAAE,EAAE;IACH,IACE,aAAa,YAAY,gBAAgB;QACzC,aAAa,YAAY,mBAAmB,EAC5C,CAAC;QACD,MAAM,cAAc,GAAG,aAAa,CAAC,cAAc,CAAA;QACnD,MAAM,YAAY,GAAG,aAAa,CAAC,YAAY,CAAA;QAE/C,IACE,KAAK,CAAC,GAAG,KAAK,WAAW;YACzB,cAAc,KAAK,SAAS;YAC5B,cAAc,KAAK,IAAI;YACvB,cAAc,KAAK,CAAC,EACpB,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC;QAED,IACE,KAAK,CAAC,GAAG,KAAK,YAAY;YAC1B,cAAc,KAAK,SAAS;YAC5B,cAAc,KAAK,IAAI;YACvB,cAAc,KAAK,aAAa,CAAC,KAAK,EAAE,MAAM,EAC9C,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC;QAED,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC;YACzD,cAAc,KAAK,SAAS;YAC5B,YAAY,KAAK,SAAS;YAC1B,cAAc,KAAK,IAAI;YACvB,YAAY,KAAK,IAAI;YACrB,cAAc,KAAK,YAAY,EAC/B,CAAC;YACD,OAAO,IAAI,CAAA;QACb,CAAC;QAED,IACE,KAAK,CAAC,GAAG,KAAK,SAAS;YACvB,cAAc,KAAK,SAAS;YAC5B,cAAc,KAAK,IAAI;YACvB,aAAa,YAAY,mBAAmB,EAC5C,CAAC;YACD,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;YAC7C,MAAM,KAAK,GAAG,cAAc,CAAA;YAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;YAC3B,IAAI,QAAQ,IAAI,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACxC,OAAO,IAAI,CAAA;YACb,CAAC;QACH,CAAC;QAED,IACE,KAAK,CAAC,GAAG,KAAK,WAAW;YACzB,cAAc,KAAK,SAAS;YAC5B,cAAc,KAAK,IAAI;YACvB,aAAa,YAAY,mBAAmB,EAC5C,CAAC;YACD,MAAM,IAAI,GAAG,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;YACxC,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;YAErE,MAAM,KAAK,GAAG,cAAc,CAAA;YAC5B,IAAI,KAAK,IAAI,kBAAkB,GAAG,CAAC,EAAE,CAAC;gBACpC,OAAO,IAAI,CAAA;YACb,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/dist/lib/initArrowTab.d.ts

@@ -0,0 +1,5 @@
+export declare const initArrowTab: ({ debug }?: {
+    debug?: boolean;
+}) => {
+    cleanup: () => void;
+};

package/dist/lib/initArrowTab.js

@@ -0,0 +1,102 @@
+import { activateDebugMode, deactivateDebugMode, isInDebugMode, } from './debugMode.js';
+import { getFocusable } from './getFocusable.js';
+import { hasDisabledKeys } from './hasDisabledKeys.js';
+import { hasTextSelection } from './hasTextSelection.js';
+import { preventNativeArrowKeyPresses } from './preventNativeArrowKeyPresses.js';
+import { getByGrid } from './strategies.js';
+// TODO: Options
+// modifierKey: 'ctrlKey',
+// onlyWithModifierKey: false, // TODO: Better name
+// strategy: arrowTab.XWalkEuclidean,
+// selector: undefined,
+// elementFilter: () => boolean,
+// getElementPosition: (element) => { x: number, y: number },
+// eventTriggerName: 'keydown' | 'keyup',
+// earlyReturn: (event) => boolean, // TODO: Better name
+// TODO: Check if tab focuses the same elements as arrowTab
+// TODO: select, details, summary, iframe
+// TODO: Investigate links that don't show focus outline sometimes
+export const initArrowTab = ({ debug = false } = {}) => {
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape' && isInDebugMode()) {
+            deactivateDebugMode();
+            return;
+        }
+        if (event.key !== 'ArrowLeft' &&
+            event.key !== 'ArrowRight' &&
+            event.key !== 'ArrowUp' &&
+            event.key !== 'ArrowDown') {
+            return;
+        }
+        // TODO: Use modifierKey
+        if (event.shiftKey) {
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!activeElement) {
+            if (debug) {
+                console.log('no active element');
+            }
+            return;
+        }
+        if (hasDisabledKeys({ event, activeElement })) {
+            if (debug) {
+                console.log('arrow keys are disabled');
+            }
+            return;
+        }
+        preventNativeArrowKeyPresses({ event, activeElement });
+        const nothingHasFocus = activeElement === document.body;
+        if (nothingHasFocus) {
+            if (debug) {
+                console.log('nothing has focus. using first focusable');
+            }
+            const firstFocusable = getFocusable()?.[0];
+            if (firstFocusable instanceof HTMLElement) {
+                firstFocusable.focus();
+                return;
+            }
+        }
+        if (hasTextSelection({ activeElement, event })) {
+            if (debug) {
+                console.log('element has text selection');
+            }
+            return;
+        }
+        const allFocusable = getFocusable();
+        const withoutActiveElement = allFocusable.filter((element) => element !== activeElement);
+        const sorted = getByGrid({
+            focusableElements: withoutActiveElement,
+            activeElement,
+            event,
+        });
+        const withinReach = sorted.filter(({ withinReach }) => withinReach);
+        if (debug && event.ctrlKey) {
+            if (isInDebugMode()) {
+                deactivateDebugMode();
+            }
+            activateDebugMode({ focusableElements: sorted });
+            return;
+        }
+        let nearest = withinReach.at(0);
+        if (debug) {
+            console.log('found nearest element to select', nearest);
+        }
+        if (!nearest) {
+            return;
+        }
+        if (nearest.element instanceof HTMLElement) {
+            if (debug) {
+                console.log('focusing element', nearest);
+            }
+            nearest.element.focus();
+        }
+    };
+    document.addEventListener('keydown', onKeyDown, { capture: true });
+    return {
+        cleanup: () => {
+            document.removeEventListener('keydown', onKeyDown, { capture: true });
+        },
+    };
+};
+//# sourceMappingURL=initArrowTab.js.map

package/dist/lib/initArrowTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initArrowTab.js","sourceRoot":"","sources":["../../src/lib/initArrowTab.ts"],"names":[],"mappings":"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"}

package/dist/lib/positions.js

@@ -0,0 +1,16 @@
+export const getMiddle = (element) => {
+    const { x, y, width, height } = element.getBoundingClientRect();
+    const scrollX = document.documentElement.scrollLeft;
+    const scrollY = document.documentElement.scrollTop;
+    return {
+        x: x + width / 2 + scrollX,
+        y: y + height / 2 + scrollY,
+    };
+};
+export const getTopLeft = (element) => {
+    const { x, y } = element.getBoundingClientRect();
+    const scrollX = document.documentElement.scrollLeft;
+    const scrollY = document.documentElement.scrollTop;
+    return { x: x + scrollX, y: y + scrollY };
+};
+//# sourceMappingURL=positions.js.map

package/dist/lib/positions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"positions.js","sourceRoot":"","sources":["../../src/lib/positions.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,OAAgB,EAAE,EAAE;IAC5C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAA;IAC/D,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAA;IACnD,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;IAClD,OAAO;QACL,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,OAAO;QAC1B,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,OAAO;KAC5B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAgB,EAAE,EAAE;IAC7C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAA;IAChD,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAA;IACnD,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAA;IAClD,OAAO,EAAE,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,CAAA;AAC3C,CAAC,CAAA"}

package/dist/lib/preventNativeArrowKeyPresses.d.ts

@@ -0,0 +1,4 @@
+export declare const preventNativeArrowKeyPresses: ({ event, activeElement, }: {
+    event: KeyboardEvent;
+    activeElement: Element;
+}) => void;