INIT

2026-02-17 14:10:16 -06:00
parent 2bca5834c5
commit cf73cd3b4c
11246 changed files with 1690552 additions and 0 deletions
@@ -0,0 +1,97 @@
+import { box } from "svelte-toolbelt";
+import { getElemDirection } from "./locale.js";
+import { getDirectionalKeys } from "./get-directional-keys.js";
+import { kbd } from "./kbd.js";
+import { BROWSER } from "esm-env";
+import { isHTMLElement } from "./is.js";
+export class RovingFocusGroup {
+    #opts;
+    #currentTabStopId = box(null);
+    constructor(opts) {
+        this.#opts = opts;
+    }
+    getCandidateNodes() {
+        if (!BROWSER || !this.#opts.rootNode.current)
+            return [];
+        if (this.#opts.candidateSelector) {
+            const candidates = Array.from(this.#opts.rootNode.current.querySelectorAll(this.#opts.candidateSelector));
+            return candidates;
+        }
+        else if (this.#opts.candidateAttr) {
+            const candidates = Array.from(this.#opts.rootNode.current.querySelectorAll(`[${this.#opts.candidateAttr}]:not([data-disabled])`));
+            return candidates;
+        }
+        return [];
+    }
+    focusFirstCandidate() {
+        const items = this.getCandidateNodes();
+        if (!items.length)
+            return;
+        items[0]?.focus();
+    }
+    handleKeydown(node, e, both = false) {
+        const rootNode = this.#opts.rootNode.current;
+        if (!rootNode || !node)
+            return;
+        const items = this.getCandidateNodes();
+        if (!items.length)
+            return;
+        const currentIndex = items.indexOf(node);
+        const dir = getElemDirection(rootNode);
+        const { nextKey, prevKey } = getDirectionalKeys(dir, this.#opts.orientation.current);
+        const loop = this.#opts.loop.current;
+        const keyToIndex = {
+            [nextKey]: currentIndex + 1,
+            [prevKey]: currentIndex - 1,
+            [kbd.HOME]: 0,
+            [kbd.END]: items.length - 1,
+        };
+        if (both) {
+            const altNextKey = nextKey === kbd.ARROW_DOWN ? kbd.ARROW_RIGHT : kbd.ARROW_DOWN;
+            const altPrevKey = prevKey === kbd.ARROW_UP ? kbd.ARROW_LEFT : kbd.ARROW_UP;
+            keyToIndex[altNextKey] = currentIndex + 1;
+            keyToIndex[altPrevKey] = currentIndex - 1;
+        }
+        let itemIndex = keyToIndex[e.key];
+        if (itemIndex === undefined)
+            return;
+        e.preventDefault();
+        if (itemIndex < 0 && loop) {
+            itemIndex = items.length - 1;
+        }
+        else if (itemIndex === items.length && loop) {
+            itemIndex = 0;
+        }
+        const itemToFocus = items[itemIndex];
+        if (!itemToFocus)
+            return;
+        itemToFocus.focus();
+        this.#currentTabStopId.current = itemToFocus.id;
+        this.#opts.onCandidateFocus?.(itemToFocus);
+        return itemToFocus;
+    }
+    getTabIndex(node) {
+        const items = this.getCandidateNodes();
+        const anyActive = this.#currentTabStopId.current !== null;
+        if (node && !anyActive && items[0] === node) {
+            this.#currentTabStopId.current = node.id;
+            return 0;
+        }
+        else if (node?.id === this.#currentTabStopId.current) {
+            return 0;
+        }
+        return -1;
+    }
+    setCurrentTabStopId(id) {
+        this.#currentTabStopId.current = id;
+    }
+    focusCurrentTabStop() {
+        const currentTabStopId = this.#currentTabStopId.current;
+        if (!currentTabStopId)
+            return;
+        const currentTabStop = this.#opts.rootNode.current?.querySelector(`#${currentTabStopId}`);
+        if (!currentTabStop || !isHTMLElement(currentTabStop))
+            return;
+        currentTabStop.focus();
+    }
+}