@johly/bits-ui 2.18.1

package/dist/internal/grace-area.svelte.js

@@ -0,0 +1,208 @@
+import { executeCallbacks, getDocument, getWindow, } from "svelte-toolbelt";
+import { on } from "svelte/events";
+import { watch } from "runed";
+import { boxAutoReset } from "./box-auto-reset.svelte.js";
+import { isElement, isHTMLElement } from "./is.js";
+export class GraceArea {
+    #opts;
+    #enabled;
+    #isPointerInTransit;
+    #pointerGraceArea = $state(null);
+    constructor(opts) {
+        this.#opts = opts;
+        this.#enabled = $derived(this.#opts.enabled());
+        this.#isPointerInTransit = boxAutoReset(false, {
+            afterMs: opts.transitTimeout ?? 300,
+            onChange: (value) => {
+                if (!this.#enabled)
+                    return;
+                this.#opts.setIsPointerInTransit?.(value);
+            },
+            getWindow: () => getWindow(this.#opts.triggerNode()),
+        });
+        watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
+            if (!triggerNode || !contentNode || !enabled)
+                return;
+            const handleTriggerLeave = (e) => {
+                this.#createGraceArea(e, contentNode);
+            };
+            const handleContentLeave = (e) => {
+                this.#createGraceArea(e, triggerNode);
+            };
+            return executeCallbacks(on(triggerNode, "pointerleave", handleTriggerLeave), on(contentNode, "pointerleave", handleContentLeave));
+        });
+        watch(() => this.#pointerGraceArea, () => {
+            const handleTrackPointerGrace = (e) => {
+                if (!this.#pointerGraceArea)
+                    return;
+                const target = e.target;
+                if (!isElement(target))
+                    return;
+                const pointerPosition = { x: e.clientX, y: e.clientY };
+                const hasEnteredTarget = opts.triggerNode()?.contains(target) ||
+                    opts.contentNode()?.contains(target);
+                const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, this.#pointerGraceArea);
+                if (hasEnteredTarget) {
+                    this.#removeGraceArea();
+                }
+                else if (isPointerOutsideGraceArea) {
+                    this.#removeGraceArea();
+                    opts.onPointerExit();
+                }
+            };
+            const doc = getDocument(opts.triggerNode() ?? opts.contentNode());
+            if (!doc)
+                return;
+            return on(doc, "pointermove", handleTrackPointerGrace);
+        });
+    }
+    #removeGraceArea() {
+        this.#pointerGraceArea = null;
+        this.#isPointerInTransit.current = false;
+    }
+    #createGraceArea(e, hoverTarget) {
+        const currentTarget = e.currentTarget;
+        if (!isHTMLElement(currentTarget))
+            return;
+        const exitPoint = { x: e.clientX, y: e.clientY };
+        const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+        const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
+        const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
+        const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
+        this.#pointerGraceArea = graceArea;
+        this.#isPointerInTransit.current = true;
+    }
+}
+function getExitSideFromRect(point, rect) {
+    const top = Math.abs(rect.top - point.y);
+    const bottom = Math.abs(rect.bottom - point.y);
+    const right = Math.abs(rect.right - point.x);
+    const left = Math.abs(rect.left - point.x);
+    switch (Math.min(top, bottom, right, left)) {
+        case left:
+            return "left";
+        case right:
+            return "right";
+        case top:
+            return "top";
+        case bottom:
+            return "bottom";
+        default:
+            throw new Error("unreachable");
+    }
+}
+function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
+    // we extend the tip of the exit point to make it easier to navigate without
+    // a minor jitter triggering a pointer exit
+    const tipPadding = padding * 1.5;
+    switch (exitSide) {
+        case "top":
+            return [
+                { x: exitPoint.x - padding, y: exitPoint.y + padding },
+                { x: exitPoint.x, y: exitPoint.y - tipPadding },
+                { x: exitPoint.x + padding, y: exitPoint.y + padding },
+            ];
+        case "bottom":
+            return [
+                { x: exitPoint.x - padding, y: exitPoint.y - padding },
+                { x: exitPoint.x, y: exitPoint.y + tipPadding },
+                { x: exitPoint.x + padding, y: exitPoint.y - padding },
+            ];
+        case "left":
+            return [
+                { x: exitPoint.x + padding, y: exitPoint.y - padding },
+                { x: exitPoint.x - tipPadding, y: exitPoint.y },
+                { x: exitPoint.x + padding, y: exitPoint.y + padding },
+            ];
+        case "right":
+            return [
+                { x: exitPoint.x - padding, y: exitPoint.y - padding },
+                { x: exitPoint.x + tipPadding, y: exitPoint.y },
+                { x: exitPoint.x - padding, y: exitPoint.y + padding },
+            ];
+    }
+}
+function getPointsFromRect(rect) {
+    const { top, right, bottom, left } = rect;
+    return [
+        { x: left, y: top },
+        { x: right, y: top },
+        { x: right, y: bottom },
+        { x: left, y: bottom },
+    ];
+}
+// Determine if a point is inside of a polygon.
+// Based on https://github.com/substack/point-in-polygon
+function isPointInPolygon(point, polygon) {
+    const { x, y } = point;
+    let inside = false;
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+        const xi = polygon[i].x;
+        const yi = polygon[i].y;
+        const xj = polygon[j].x;
+        const yj = polygon[j].y;
+        // prettier-ignore
+        const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
+        if (intersect)
+            inside = !inside;
+    }
+    return inside;
+}
+// Returns a new array of points representing the convex hull of the given set of points.
+// https://www.nayuki.io/page/convex-hull-algorithm
+function getHull(points) {
+    const newPoints = points.slice();
+    newPoints.sort((a, b) => {
+        if (a.x < b.x)
+            return -1;
+        else if (a.x > b.x)
+            return +1;
+        else if (a.y < b.y)
+            return -1;
+        else if (a.y > b.y)
+            return +1;
+        else
+            return 0;
+    });
+    return getHullPresorted(newPoints);
+}
+// Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time.
+function getHullPresorted(points) {
+    if (points.length <= 1)
+        return points.slice();
+    const upperHull = [];
+    for (let i = 0; i < points.length; i++) {
+        const p = points[i];
+        while (upperHull.length >= 2) {
+            const q = upperHull[upperHull.length - 1];
+            const r = upperHull[upperHull.length - 2];
+            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
+                upperHull.pop();
+            else
+                break;
+        }
+        upperHull.push(p);
+    }
+    upperHull.pop();
+    const lowerHull = [];
+    for (let i = points.length - 1; i >= 0; i--) {
+        const p = points[i];
+        while (lowerHull.length >= 2) {
+            const q = lowerHull[lowerHull.length - 1];
+            const r = lowerHull[lowerHull.length - 2];
+            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
+                lowerHull.pop();
+            else
+                break;
+        }
+        lowerHull.push(p);
+    }
+    lowerHull.pop();
+    if (upperHull.length === 1 &&
+        lowerHull.length === 1 &&
+        upperHull[0].x === lowerHull[0].x &&
+        upperHull[0].y === lowerHull[0].y)
+        return upperHull;
+    else
+        return upperHull.concat(lowerHull);
+}

package/dist/internal/is.d.ts

@@ -0,0 +1,25 @@
+import type { FocusableTarget } from "./focus.js";
+export declare const isBrowser: boolean;
+export declare const isIOS: boolean | "";
+export declare function isFunction(value: unknown): value is (...args: unknown[]) => unknown;
+export declare function isHTMLElement(element: unknown): element is HTMLElement;
+export declare function isElement(element: unknown): element is Element;
+export declare function isElementOrSVGElement(element: unknown): element is Element | SVGElement;
+export declare function isNumberString(value: string): boolean;
+export declare function isNull(value: unknown): value is null;
+export declare function isTouch(e: PointerEvent): boolean;
+export declare function isFocusVisible(element: Element): boolean;
+export declare function isNotNull<T>(value: T | null): value is T;
+/**
+ * Determines if the provided object is a valid `HTMLInputElement` with
+ * a `select` method available.
+ */
+export declare function isSelectableInput(element: unknown): element is FocusableTarget & {
+    select: () => void;
+};
+/**
+ * Given a node, determine if it is hidden by walking up the
+ * DOM tree until we hit the `stopAt` node (exclusive), if provided)
+ * otherwise we stop at the document root.
+ */
+export declare function isElementHidden(node: HTMLElement, stopAt?: HTMLElement): boolean;

package/dist/internal/is.js

@@ -0,0 +1,62 @@
+export const isBrowser = typeof document !== "undefined";
+export const isIOS = getIsIOS();
+function getIsIOS() {
+    return (isBrowser &&
+        window?.navigator?.userAgent &&
+        (/iP(ad|hone|od)/.test(window.navigator.userAgent) ||
+            // The new iPad Pro Gen3 does not identify itself as iPad, but as Macintosh.
+            (window?.navigator?.maxTouchPoints > 2 &&
+                /iPad|Macintosh/.test(window?.navigator.userAgent))));
+}
+export function isFunction(value) {
+    return typeof value === "function";
+}
+export function isHTMLElement(element) {
+    return element instanceof HTMLElement;
+}
+export function isElement(element) {
+    return element instanceof Element;
+}
+export function isElementOrSVGElement(element) {
+    return element instanceof Element || element instanceof SVGElement;
+}
+export function isNumberString(value) {
+    return !Number.isNaN(Number(value)) && !Number.isNaN(Number.parseFloat(value));
+}
+export function isNull(value) {
+    return value === null;
+}
+export function isTouch(e) {
+    return e.pointerType === "touch";
+}
+export function isFocusVisible(element) {
+    return element.matches(":focus-visible");
+}
+export function isNotNull(value) {
+    return value !== null;
+}
+/**
+ * Determines if the provided object is a valid `HTMLInputElement` with
+ * a `select` method available.
+ */
+export function isSelectableInput(element) {
+    return element instanceof HTMLInputElement && "select" in element;
+}
+/**
+ * Given a node, determine if it is hidden by walking up the
+ * DOM tree until we hit the `stopAt` node (exclusive), if provided)
+ * otherwise we stop at the document root.
+ */
+export function isElementHidden(node, stopAt) {
+    if (getComputedStyle(node).visibility === "hidden")
+        return true;
+    while (node) {
+        // we stop at `upTo` (excluding it)
+        if (stopAt !== undefined && node === stopAt)
+            return false;
+        if (getComputedStyle(node).display === "none")
+            return true;
+        node = node.parentElement;
+    }
+    return false;
+}

package/dist/internal/kbd-constants.d.ts

@@ -0,0 +1,42 @@
+export declare const ALT = "Alt";
+export declare const ARROW_DOWN = "ArrowDown";
+export declare const ARROW_LEFT = "ArrowLeft";
+export declare const ARROW_RIGHT = "ArrowRight";
+export declare const ARROW_UP = "ArrowUp";
+export declare const BACKSPACE = "Backspace";
+export declare const CAPS_LOCK = "CapsLock";
+export declare const CONTROL = "Control";
+export declare const DELETE = "Delete";
+export declare const END = "End";
+export declare const ENTER = "Enter";
+export declare const ESCAPE = "Escape";
+export declare const F1 = "F1";
+export declare const F10 = "F10";
+export declare const F11 = "F11";
+export declare const F12 = "F12";
+export declare const F2 = "F2";
+export declare const F3 = "F3";
+export declare const F4 = "F4";
+export declare const F5 = "F5";
+export declare const F6 = "F6";
+export declare const F7 = "F7";
+export declare const F8 = "F8";
+export declare const F9 = "F9";
+export declare const HOME = "Home";
+export declare const META = "Meta";
+export declare const PAGE_DOWN = "PageDown";
+export declare const PAGE_UP = "PageUp";
+export declare const SHIFT = "Shift";
+export declare const SPACE = " ";
+export declare const TAB = "Tab";
+export declare const CTRL = "Control";
+export declare const ASTERISK = "*";
+export declare const a = "a";
+export declare const P = "P";
+export declare const A = "A";
+export declare const p = "p";
+export declare const n = "n";
+export declare const j = "j";
+export declare const k = "k";
+export declare const h = "h";
+export declare const l = "l";

package/dist/internal/kbd-constants.js

@@ -0,0 +1,42 @@
+export const ALT = "Alt";
+export const ARROW_DOWN = "ArrowDown";
+export const ARROW_LEFT = "ArrowLeft";
+export const ARROW_RIGHT = "ArrowRight";
+export const ARROW_UP = "ArrowUp";
+export const BACKSPACE = "Backspace";
+export const CAPS_LOCK = "CapsLock";
+export const CONTROL = "Control";
+export const DELETE = "Delete";
+export const END = "End";
+export const ENTER = "Enter";
+export const ESCAPE = "Escape";
+export const F1 = "F1";
+export const F10 = "F10";
+export const F11 = "F11";
+export const F12 = "F12";
+export const F2 = "F2";
+export const F3 = "F3";
+export const F4 = "F4";
+export const F5 = "F5";
+export const F6 = "F6";
+export const F7 = "F7";
+export const F8 = "F8";
+export const F9 = "F9";
+export const HOME = "Home";
+export const META = "Meta";
+export const PAGE_DOWN = "PageDown";
+export const PAGE_UP = "PageUp";
+export const SHIFT = "Shift";
+export const SPACE = " ";
+export const TAB = "Tab";
+export const CTRL = "Control";
+export const ASTERISK = "*";
+export const a = "a";
+export const P = "P";
+export const A = "A";
+export const p = "p";
+export const n = "n";
+export const j = "j";
+export const k = "k";
+export const h = "h";
+export const l = "l";

package/dist/internal/kbd.d.ts

@@ -0,0 +1 @@
+export * as kbd from "./kbd-constants.js";

package/dist/internal/kbd.js

@@ -0,0 +1 @@
+export * as kbd from "./kbd-constants.js";

package/dist/internal/locale.d.ts

@@ -0,0 +1,6 @@
+import type { Direction } from "../shared/index.js";
+/**
+ * Detects the text direction in the element.
+ * @returns {Direction} The text direction ('ltr' for left-to-right or 'rtl' for right-to-left).
+ */
+export declare function getElemDirection(elem: HTMLElement): Direction;

package/dist/internal/locale.js

@@ -0,0 +1,9 @@
+/**
+ * Detects the text direction in the element.
+ * @returns {Direction} The text direction ('ltr' for left-to-right or 'rtl' for right-to-left).
+ */
+export function getElemDirection(elem) {
+    const style = window.getComputedStyle(elem);
+    const direction = style.getPropertyValue("direction");
+    return direction;
+}

package/dist/internal/math.d.ts

@@ -0,0 +1 @@
+export declare function linearScale(domain: [number, number], range: [number, number], clamp?: boolean): (x: number) => number;

package/dist/internal/math.js

@@ -0,0 +1,15 @@
+export function linearScale(domain, range, clamp = true) {
+    const [d0, d1] = domain;
+    const [r0, r1] = range;
+    const slope = (r1 - r0) / (d1 - d0);
+    return (x) => {
+        const result = r0 + slope * (x - d0);
+        if (!clamp)
+            return result;
+        if (result > Math.max(r0, r1))
+            return Math.max(r0, r1);
+        if (result < Math.min(r0, r1))
+            return Math.min(r0, r1);
+        return result;
+    };
+}

package/dist/internal/noop.d.ts

@@ -0,0 +1,4 @@
+/**
+ * A no operation function (does nothing)
+ */
+export declare function noop(): void;

package/dist/internal/noop.js

@@ -0,0 +1,4 @@
+/**
+ * A no operation function (does nothing)
+ */
+export function noop() { }

package/dist/internal/presence-manager.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type ReadableBoxedValues } from "svelte-toolbelt";
+import type { TransitionState } from "./attrs.js";
+interface PresenceManagerOpts extends ReadableBoxedValues<{
+    open: boolean;
+    ref: HTMLElement | null;
+}> {
+    onComplete?: () => void;
+    enabled?: boolean;
+    shouldSkipExitAnimation?: () => boolean;
+}
+export declare class PresenceManager {
+    #private;
+    constructor(opts: PresenceManagerOpts);
+    get shouldRender(): boolean;
+    get transitionStatus(): TransitionState;
+}
+export {};

package/dist/internal/presence-manager.svelte.js

@@ -0,0 +1,75 @@
+import { watch } from "runed";
+import { onDestroyEffect } from "svelte-toolbelt";
+import { AnimationsComplete } from "./animations-complete.js";
+export class PresenceManager {
+    #opts;
+    #enabled;
+    #afterAnimations;
+    #shouldRender = $state(false);
+    #transitionStatus = $state(undefined);
+    #hasMounted = false;
+    #transitionFrame = null;
+    constructor(opts) {
+        this.#opts = opts;
+        this.#shouldRender = opts.open.current;
+        this.#enabled = opts.enabled ?? true;
+        this.#afterAnimations = new AnimationsComplete({
+            ref: this.#opts.ref,
+            afterTick: this.#opts.open,
+        });
+        onDestroyEffect(() => this.#clearTransitionFrame());
+        watch(() => this.#opts.open.current, (isOpen) => {
+            if (!this.#hasMounted) {
+                this.#hasMounted = true;
+                return;
+            }
+            this.#clearTransitionFrame();
+            if (!isOpen && this.#opts.shouldSkipExitAnimation?.()) {
+                this.#shouldRender = false;
+                this.#transitionStatus = undefined;
+                this.#opts.onComplete?.();
+                return;
+            }
+            if (isOpen)
+                this.#shouldRender = true;
+            this.#transitionStatus = isOpen ? "starting" : "ending";
+            if (isOpen) {
+                this.#transitionFrame = window.requestAnimationFrame(() => {
+                    this.#transitionFrame = null;
+                    if (this.#opts.open.current) {
+                        this.#transitionStatus = undefined;
+                    }
+                });
+            }
+            if (!this.#enabled) {
+                if (!isOpen) {
+                    this.#shouldRender = false;
+                }
+                this.#transitionStatus = undefined;
+                this.#opts.onComplete?.();
+                return;
+            }
+            this.#afterAnimations.run(() => {
+                if (isOpen === this.#opts.open.current) {
+                    if (!this.#opts.open.current) {
+                        this.#shouldRender = false;
+                    }
+                    this.#transitionStatus = undefined;
+                    this.#opts.onComplete?.();
+                }
+            });
+        });
+    }
+    get shouldRender() {
+        return this.#shouldRender;
+    }
+    get transitionStatus() {
+        return this.#transitionStatus;
+    }
+    #clearTransitionFrame() {
+        if (this.#transitionFrame === null)
+            return;
+        window.cancelAnimationFrame(this.#transitionFrame);
+        this.#transitionFrame = null;
+    }
+}

package/dist/internal/roving-focus-group.d.ts

@@ -0,0 +1,44 @@
+import { type Box, type ReadableBox } from "svelte-toolbelt";
+import type { Orientation } from "../shared/index.js";
+type RovingFocusGroupOptions = ({
+    /**
+     * The selector used to find the focusable candidates.
+     */
+    candidateAttr: string;
+    candidateSelector?: undefined;
+} | {
+    /**
+     * Custom candidate selector
+     */
+    candidateSelector: string;
+    candidateAttr?: undefined;
+}) & {
+    /**
+     * The id of the root node
+     */
+    rootNode: Box<HTMLElement | null>;
+    /**
+     * Whether to loop through the candidates when reaching the end.
+     */
+    loop: ReadableBox<boolean>;
+    /**
+     * The orientation of the roving focus group. Used
+     * to determine how keyboard navigation should work.
+     */
+    orientation: ReadableBox<Orientation>;
+    /**
+     * A callback function called when a candidate is focused.
+     */
+    onCandidateFocus?: (node: HTMLElement) => void;
+};
+export declare class RovingFocusGroup {
+    #private;
+    constructor(opts: RovingFocusGroupOptions);
+    getCandidateNodes(): HTMLElement[];
+    focusFirstCandidate(): void;
+    handleKeydown(node: HTMLElement | null | undefined, e: KeyboardEvent, both?: boolean): HTMLElement | undefined;
+    getTabIndex(node: HTMLElement | null | undefined): 0 | -1;
+    setCurrentTabStopId(id: string): void;
+    focusCurrentTabStop(): void;
+}
+export {};

package/dist/internal/roving-focus-group.js

@@ -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();
+    }
+}