@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.1-next.1

package/dist/utils/calculate-active-index.d.ts

@@ -0,0 +1,25 @@
+export declare enum Focus {
+    /** Focus the first non-disabled item. */
+    First = 0,
+    /** Focus the previous non-disabled item. */
+    Previous = 1,
+    /** Focus the next non-disabled item. */
+    Next = 2,
+    /** Focus the last non-disabled item. */
+    Last = 3,
+    /** Focus a specific item based on the `id` of the item. */
+    Specific = 4,
+    /** Focus no items at all. */
+    Nothing = 5
+}
+export declare function calculateActiveIndex<TItem>(action: {
+    focus: Focus.Specific;
+    id: string;
+} | {
+    focus: Exclude<Focus, Focus.Specific>;
+}, resolvers: {
+    resolveItems(): TItem[];
+    resolveActiveIndex(): number | null;
+    resolveId(item: TItem, index: number, items: TItem[]): string;
+    resolveDisabled(item: TItem, index: number, items: TItem[]): boolean;
+}): number | null;

package/dist/utils/calculate-active-index.js

@@ -0,0 +1,74 @@
+function assertNever(x) {
+    throw new Error("Unexpected object: " + x);
+}
+export var Focus;
+(function (Focus) {
+    /** Focus the first non-disabled item. */
+    Focus[Focus["First"] = 0] = "First";
+    /** Focus the previous non-disabled item. */
+    Focus[Focus["Previous"] = 1] = "Previous";
+    /** Focus the next non-disabled item. */
+    Focus[Focus["Next"] = 2] = "Next";
+    /** Focus the last non-disabled item. */
+    Focus[Focus["Last"] = 3] = "Last";
+    /** Focus a specific item based on the `id` of the item. */
+    Focus[Focus["Specific"] = 4] = "Specific";
+    /** Focus no items at all. */
+    Focus[Focus["Nothing"] = 5] = "Nothing";
+})(Focus || (Focus = {}));
+export function calculateActiveIndex(action, resolvers) {
+    const items = resolvers.resolveItems();
+    if (items.length <= 0)
+        return null;
+    const currentActiveIndex = resolvers.resolveActiveIndex();
+    let activeIndex = currentActiveIndex ?? -1;
+    switch (action.focus) {
+        case Focus.First: {
+            for (let i = 0; i < items.length; ++i) {
+                if (!resolvers.resolveDisabled(items[i], i, items)) {
+                    return i;
+                }
+            }
+            return currentActiveIndex;
+        }
+        case Focus.Previous: {
+            // If nothing is active, focus the last relevant item
+            if (activeIndex === -1)
+                activeIndex = items.length;
+            for (let i = activeIndex - 1; i >= 0; --i) {
+                if (!resolvers.resolveDisabled(items[i], i, items)) {
+                    return i;
+                }
+            }
+            return currentActiveIndex;
+        }
+        case Focus.Next: {
+            for (let i = activeIndex + 1; i < items.length; ++i) {
+                if (!resolvers.resolveDisabled(items[i], i, items)) {
+                    return i;
+                }
+            }
+            return currentActiveIndex;
+        }
+        case Focus.Last: {
+            for (let i = items.length - 1; i >= 0; --i) {
+                if (!resolvers.resolveDisabled(items[i], i, items)) {
+                    return i;
+                }
+            }
+            return currentActiveIndex;
+        }
+        case Focus.Specific: {
+            for (let i = 0; i < items.length; ++i) {
+                if (resolvers.resolveId(items[i], i, items) === action.id) {
+                    return i;
+                }
+            }
+            return currentActiveIndex;
+        }
+        case Focus.Nothing:
+            return null;
+        default:
+            assertNever(action);
+    }
+}

package/dist/utils/close.d.ts

@@ -0,0 +1,2 @@
+export declare const createCloseContext: (close: () => void) => () => void;
+export declare const getCloseContext: () => (() => void) | undefined;

package/dist/utils/close.js

@@ -0,0 +1,3 @@
+import { getContext, setContext } from "svelte";
+export const createCloseContext = (close) => setContext("Close", close);
+export const getCloseContext = () => getContext("Close");

package/dist/utils/default-map.d.ts

@@ -0,0 +1,5 @@
+export declare class DefaultMap<T = string, V = any> extends Map<T, V> {
+    private factory;
+    constructor(factory: (key: T) => V);
+    get(key: T): V;
+}

package/dist/utils/default-map.js

@@ -0,0 +1,15 @@
+export class DefaultMap extends Map {
+    factory;
+    constructor(factory) {
+        super();
+        this.factory = factory;
+    }
+    get(key) {
+        let value = super.get(key);
+        if (value === undefined) {
+            value = this.factory(key);
+            this.set(key, value);
+        }
+        return value;
+    }
+}

package/dist/utils/disposables.d.ts

@@ -1,4 +1,15 @@
-export type Disposables = ReturnType<typeof disposables>;
+import { microTask } from "./microTask.js";
+export type Disposables = {
+    addEventListener: <TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions) => () => void;
+    requestAnimationFrame: (...args: Parameters<typeof requestAnimationFrame>) => () => void;
+    nextFrame: (...args: Parameters<typeof requestAnimationFrame>) => () => void;
+    setTimeout: (...args: Parameters<typeof setTimeout>) => () => void;
+    microTask: (...args: Parameters<typeof microTask>) => () => void;
+    style: (node: HTMLElement, property: string, value: string) => () => void;
+    group: (cb: (d: Disposables) => void) => () => void;
+    add: (cb: () => void) => () => void;
+    dispose: () => void;
+};
 /**
  * Disposables are a way to manage event handlers and functions like
  * `setTimeout` and `requestAnimationFrame` that need to be cleaned up when they
@@ -11,14 +22,5 @@ export type Disposables = ReturnType<typeof disposables>;
  * `dispose` function on the collection itself that can be used to clean up all
  * pending disposables in that collection.
  */
-export declare function disposables(): {
-    addEventListener<TEventName extends keyof WindowEventMap>(element: HTMLElement | Window | Document, name: TEventName, listener: (event: WindowEventMap[TEventName]) => any, options?: boolean | AddEventListenerOptions): () => void;
-    requestAnimationFrame(callback: FrameRequestCallback): () => void;
-    nextFrame(callback: FrameRequestCallback): () => void;
-    setTimeout(callback: (args: void) => void, ms?: number | undefined): () => void;
-    microTask(cb: () => void): () => void;
-    style(node: HTMLElement, property: string, value: string): () => void;
-    group(cb: (d: typeof this) => void): () => void;
-    add(cb: () => void): () => void;
-    dispose(): void;
-};
+export declare function disposables(): Disposables;
+export { disposables as useDisposables };

package/dist/utils/disposables.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { microTask } from "./microTask.js";
 /**
  * Disposables are a way to manage event handlers and functions like
@@ -12,14 +13,15 @@ import { microTask } from "./microTask.js";
  * pending disposables in that collection.
  */
 export function disposables() {
-    let _disposables = [];
-    let api = {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const _disposables = [];
+    const api = {
         addEventListener(element, name, listener, options) {
             element.addEventListener(name, listener, options);
             return api.add(() => element.removeEventListener(name, listener, options));
         },
         requestAnimationFrame(...args) {
-            let raf = requestAnimationFrame(...args);
+            const raf = requestAnimationFrame(...args);
             return api.add(() => cancelAnimationFrame(raf));
         },
         nextFrame(...args) {
@@ -28,11 +30,11 @@ export function disposables() {
             });
         },
         setTimeout(...args) {
-            let timer = setTimeout(...args);
+            const timer = setTimeout(...args);
             return api.add(() => clearTimeout(timer));
         },
         microTask(...args) {
-            let task = { current: true };
+            const task = { current: true };
             microTask(() => {
                 if (task.current) {
                     args[0]();
@@ -43,14 +45,14 @@ export function disposables() {
             });
         },
         style(node, property, value) {
-            let previous = node.style.getPropertyValue(property);
+            const previous = node.style.getPropertyValue(property);
             Object.assign(node.style, { [property]: value });
             return this.add(() => {
                 Object.assign(node.style, { [property]: previous });
             });
         },
         group(cb) {
-            let d = disposables();
+            const d = disposables();
             cb(d);
             return this.add(() => d.dispose());
         },
@@ -60,19 +62,20 @@ export function disposables() {
                 _disposables.push(cb);
             }
             return () => {
-                let idx = _disposables.indexOf(cb);
+                const idx = _disposables.indexOf(cb);
                 if (idx >= 0) {
-                    for (let dispose of _disposables.splice(idx, 1)) {
+                    for (const dispose of _disposables.splice(idx, 1)) {
                         dispose();
                     }
                 }
             };
         },
         dispose() {
-            for (let dispose of _disposables.splice(0)) {
+            for (const dispose of _disposables.splice(0)) {
                 dispose();
             }
         },
     };
     return api;
 }
+export { disposables as useDisposables };

package/dist/utils/dom.d.ts

@@ -1,3 +1 @@
-/// <reference types="node" />
-export declare const getOwnerDocument: (el: Element | null | undefined) => Document;
 export declare const getOwnerWindow: (el: (Window & typeof global) | Element | null | undefined) => Window & typeof global;

package/dist/utils/dom.js

@@ -1,10 +1,8 @@
-export const getOwnerDocument = (el) => {
-    return el?.ownerDocument ?? document;
-};
+import { getOwnerDocument } from "./owner.js";
 export const getOwnerWindow = (el) => {
     if (el && "window" in el && el.window === el) {
         return el;
     }
     const doc = getOwnerDocument(el);
-    return doc.defaultView || window;
+    return doc?.defaultView || window;
 };

package/dist/utils/env.d.ts

@@ -0,0 +1,17 @@
+type RenderEnv = "client" | "server";
+type HandoffState = "pending" | "complete";
+declare class Env {
+    current: RenderEnv;
+    handoffState: HandoffState;
+    currentId: number;
+    set(env: RenderEnv): void;
+    reset(): void;
+    nextId(): number;
+    get isServer(): boolean;
+    get isClient(): boolean;
+    private detect;
+    handoff(): void;
+    get isHandoffComplete(): boolean;
+}
+export declare let env: Env;
+export {};

package/dist/utils/env.js

@@ -0,0 +1,39 @@
+class Env {
+    current = this.detect();
+    handoffState = "pending";
+    currentId = 0;
+    set(env) {
+        if (this.current === env)
+            return;
+        this.handoffState = "pending";
+        this.currentId = 0;
+        this.current = env;
+    }
+    reset() {
+        this.set(this.detect());
+    }
+    nextId() {
+        return ++this.currentId;
+    }
+    get isServer() {
+        return this.current === "server";
+    }
+    get isClient() {
+        return this.current === "client";
+    }
+    detect() {
+        if (typeof window === "undefined" || typeof document === "undefined") {
+            return "server";
+        }
+        return "client";
+    }
+    handoff() {
+        if (this.handoffState === "pending") {
+            this.handoffState = "complete";
+        }
+    }
+    get isHandoffComplete() {
+        return this.handoffState === "complete";
+    }
+}
+export let env = new Env();

package/dist/utils/focus-management.d.ts

@@ -0,0 +1,44 @@
+export declare enum Focus {
+    /** Focus the first non-disabled element */
+    First = 1,
+    /** Focus the previous non-disabled element */
+    Previous = 2,
+    /** Focus the next non-disabled element */
+    Next = 4,
+    /** Focus the last non-disabled element */
+    Last = 8,
+    /** Wrap tab around */
+    WrapAround = 16,
+    /** Prevent scrolling the focusable elements into view */
+    NoScroll = 32,
+    /** Focus the first focusable element with the `data-autofocus` attribute. */
+    AutoFocus = 64
+}
+export declare enum FocusResult {
+    /** Something went wrong while trying to focus. */
+    Error = 0,
+    /** When `Focus.WrapAround` is enabled, going from position `N` to `N+1` where `N` is the last index in the array, then we overflow. */
+    Overflow = 1,
+    /** Focus was successful. */
+    Success = 2,
+    /** When `Focus.WrapAround` is enabled, going from position `N` to `N-1` where `N` is the first index in the array, then we underflow. */
+    Underflow = 3
+}
+export declare function getFocusableElements(container?: HTMLElement | null): HTMLElement[];
+export declare function getAutoFocusableElements(container?: HTMLElement | null): HTMLElement[];
+export declare enum FocusableMode {
+    /** The element itself must be focusable. */
+    Strict = 0,
+    /** The element should be inside of a focusable element. */
+    Loose = 1
+}
+export declare function isFocusableElement(element: HTMLElement, mode?: FocusableMode): boolean;
+export declare function restoreFocusIfNecessary(element: HTMLElement | null): void;
+export declare function focusElement(element: HTMLElement | null): void;
+export declare function sortByDomNode<T>(nodes: T[], resolveKey?: (item: T) => HTMLElement | null | undefined): T[];
+export declare function focusFrom(current: HTMLElement | null, focus: Focus): FocusResult;
+export declare function focusIn(container: HTMLElement | HTMLElement[], focus: Focus, { sorted, relativeTo, skipElements, }?: Partial<{
+    sorted: boolean;
+    relativeTo: HTMLElement | null;
+    skipElements: HTMLElement[];
+}>): FocusResult;

package/dist/utils/focus-management.js

@@ -0,0 +1,242 @@
+import { disposables } from "./disposables.js";
+import { match } from "./match.js";
+import { getOwnerDocument } from "./owner.js";
+// Credit:
+//  - https://stackoverflow.com/a/30753870
+const focusableSelector = [
+    "[contentEditable=true]",
+    "[tabindex]",
+    "a[href]",
+    "area[href]",
+    "button:not([disabled])",
+    "iframe",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+]
+    .map(process.env.NODE_ENV === "test"
+    ? // TODO: Remove this once JSDOM fixes the issue where an element that is
+        // "hidden" can be the document.activeElement, because this is not possible
+        // in real browsers.
+        (selector) => `${selector}:not([tabindex='-1']):not([style*='display: none'])`
+    : (selector) => `${selector}:not([tabindex='-1'])`)
+    .join(",");
+const autoFocusableSelector = [
+    // In a perfect world this was just `autofocus`, but React doesn't pass `autofocus` to the DOM...
+    "[data-autofocus]",
+]
+    .map(process.env.NODE_ENV === "test"
+    ? // TODO: Remove this once JSDOM fixes the issue where an element that is
+        // "hidden" can be the document.activeElement, because this is not possible
+        // in real browsers.
+        (selector) => `${selector}:not([tabindex='-1']):not([style*='display: none'])`
+    : (selector) => `${selector}:not([tabindex='-1'])`)
+    .join(",");
+export var Focus;
+(function (Focus) {
+    /** Focus the first non-disabled element */
+    Focus[Focus["First"] = 1] = "First";
+    /** Focus the previous non-disabled element */
+    Focus[Focus["Previous"] = 2] = "Previous";
+    /** Focus the next non-disabled element */
+    Focus[Focus["Next"] = 4] = "Next";
+    /** Focus the last non-disabled element */
+    Focus[Focus["Last"] = 8] = "Last";
+    /** Wrap tab around */
+    Focus[Focus["WrapAround"] = 16] = "WrapAround";
+    /** Prevent scrolling the focusable elements into view */
+    Focus[Focus["NoScroll"] = 32] = "NoScroll";
+    /** Focus the first focusable element with the `data-autofocus` attribute. */
+    Focus[Focus["AutoFocus"] = 64] = "AutoFocus";
+})(Focus || (Focus = {}));
+export var FocusResult;
+(function (FocusResult) {
+    /** Something went wrong while trying to focus. */
+    FocusResult[FocusResult["Error"] = 0] = "Error";
+    /** When `Focus.WrapAround` is enabled, going from position `N` to `N+1` where `N` is the last index in the array, then we overflow. */
+    FocusResult[FocusResult["Overflow"] = 1] = "Overflow";
+    /** Focus was successful. */
+    FocusResult[FocusResult["Success"] = 2] = "Success";
+    /** When `Focus.WrapAround` is enabled, going from position `N` to `N-1` where `N` is the first index in the array, then we underflow. */
+    FocusResult[FocusResult["Underflow"] = 3] = "Underflow";
+})(FocusResult || (FocusResult = {}));
+var Direction;
+(function (Direction) {
+    Direction[Direction["Previous"] = -1] = "Previous";
+    Direction[Direction["Next"] = 1] = "Next";
+})(Direction || (Direction = {}));
+export function getFocusableElements(container = document.body) {
+    if (container == null)
+        return [];
+    return Array.from(container.querySelectorAll(focusableSelector)).sort(
+    // We want to move `tabIndex={0}` to the end of the list, this is what the browser does as well.
+    (a, z) => Math.sign((a.tabIndex || Number.MAX_SAFE_INTEGER) - (z.tabIndex || Number.MAX_SAFE_INTEGER)));
+}
+export function getAutoFocusableElements(container = document.body) {
+    if (container == null)
+        return [];
+    return Array.from(container.querySelectorAll(autoFocusableSelector)).sort(
+    // We want to move `tabIndex={0}` to the end of the list, this is what the browser does as well.
+    (a, z) => Math.sign((a.tabIndex || Number.MAX_SAFE_INTEGER) - (z.tabIndex || Number.MAX_SAFE_INTEGER)));
+}
+export var FocusableMode;
+(function (FocusableMode) {
+    /** The element itself must be focusable. */
+    FocusableMode[FocusableMode["Strict"] = 0] = "Strict";
+    /** The element should be inside of a focusable element. */
+    FocusableMode[FocusableMode["Loose"] = 1] = "Loose";
+})(FocusableMode || (FocusableMode = {}));
+export function isFocusableElement(element, mode = FocusableMode.Strict) {
+    if (element === getOwnerDocument(element)?.body)
+        return false;
+    return match(mode, {
+        [FocusableMode.Strict]() {
+            return element.matches(focusableSelector);
+        },
+        [FocusableMode.Loose]() {
+            let next = element;
+            while (next !== null) {
+                if (next.matches(focusableSelector))
+                    return true;
+                next = next.parentElement;
+            }
+            return false;
+        },
+    });
+}
+export function restoreFocusIfNecessary(element) {
+    const ownerDocument = getOwnerDocument(element);
+    disposables().nextFrame(() => {
+        if (ownerDocument && !isFocusableElement(ownerDocument.activeElement, FocusableMode.Strict)) {
+            focusElement(element);
+        }
+    });
+}
+// The method of triggering an action, this is used to determine how we should
+// restore focus after an action has been performed.
+var ActivationMethod;
+(function (ActivationMethod) {
+    /* If the action was triggered by a keyboard event. */
+    ActivationMethod[ActivationMethod["Keyboard"] = 0] = "Keyboard";
+    /* If the action was triggered by a mouse / pointer / ... event.*/
+    ActivationMethod[ActivationMethod["Mouse"] = 1] = "Mouse";
+})(ActivationMethod || (ActivationMethod = {}));
+// We want to be able to set and remove the `data-headlessui-mouse` attribute on the `html` element.
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+    document.addEventListener("keydown", (event) => {
+        if (event.metaKey || event.altKey || event.ctrlKey) {
+            return;
+        }
+        document.documentElement.dataset.headlessuiFocusVisible = "";
+    }, true);
+    document.addEventListener("click", (event) => {
+        // Event originated from an actual mouse click
+        if (event.detail === ActivationMethod.Mouse) {
+            delete document.documentElement.dataset.headlessuiFocusVisible;
+        }
+        // Event originated from a keyboard event that triggered the `click` event
+        else if (event.detail === ActivationMethod.Keyboard) {
+            document.documentElement.dataset.headlessuiFocusVisible = "";
+        }
+    }, true);
+}
+export function focusElement(element) {
+    element?.focus({ preventScroll: true });
+}
+// https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
+const selectableSelector = ["textarea", "input"].join(",");
+function isSelectableElement(element) {
+    return element?.matches?.(selectableSelector) ?? false;
+}
+export function sortByDomNode(nodes, resolveKey = (i) => i) {
+    return nodes.slice().sort((aItem, zItem) => {
+        const a = resolveKey(aItem);
+        const z = resolveKey(zItem);
+        if (!a || !z)
+            return 0;
+        const position = a.compareDocumentPosition(z);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+            return -1;
+        if (position & Node.DOCUMENT_POSITION_PRECEDING)
+            return 1;
+        return 0;
+    });
+}
+export function focusFrom(current, focus) {
+    return focusIn(getFocusableElements(), focus, { relativeTo: current });
+}
+export function focusIn(container, focus, { sorted = true, relativeTo = null, skipElements = [], } = {}) {
+    const ownerDocument = Array.isArray(container)
+        ? container.length > 0
+            ? container[0].ownerDocument
+            : document
+        : container.ownerDocument;
+    let elements = Array.isArray(container)
+        ? sorted
+            ? sortByDomNode(container)
+            : container
+        : focus & Focus.AutoFocus
+            ? getAutoFocusableElements(container)
+            : getFocusableElements(container);
+    if (skipElements.length > 0 && elements.length > 1) {
+        elements = elements.filter((element) => !skipElements.some((skipElement) => skipElement != null && "current" in skipElement
+            ? skipElement?.current === element // Handle MutableRefObject
+            : skipElement === element // Handle HTMLElement directly
+        ));
+    }
+    relativeTo = relativeTo ?? ownerDocument.activeElement;
+    const direction = (() => {
+        if (focus & (Focus.First | Focus.Next))
+            return Direction.Next;
+        if (focus & (Focus.Previous | Focus.Last))
+            return Direction.Previous;
+        throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
+    })();
+    const startIndex = (() => {
+        if (focus & Focus.First)
+            return 0;
+        if (focus & Focus.Previous)
+            return Math.max(0, elements.indexOf(relativeTo)) - 1;
+        if (focus & Focus.Next)
+            return Math.max(0, elements.indexOf(relativeTo)) + 1;
+        if (focus & Focus.Last)
+            return elements.length - 1;
+        throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
+    })();
+    const focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {};
+    let offset = 0;
+    const total = elements.length;
+    let next = undefined;
+    do {
+        // Guard against infinite loops
+        if (offset >= total || offset + total <= 0)
+            return FocusResult.Error;
+        let nextIdx = startIndex + offset;
+        if (focus & Focus.WrapAround) {
+            nextIdx = (nextIdx + total) % total;
+        }
+        else {
+            if (nextIdx < 0)
+                return FocusResult.Underflow;
+            if (nextIdx >= total)
+                return FocusResult.Overflow;
+        }
+        next = elements[nextIdx];
+        // Try the focus the next element, might not work if it is "hidden" to the user.
+        next?.focus(focusOptions);
+        // Try the next one in line
+        offset += direction;
+    } while (next !== ownerDocument.activeElement);
+    // By default if you <Tab> to a text input or a textarea, the browser will
+    // select all the text once the focus is inside these DOM Nodes. However,
+    // since we are manually moving focus this behavior is not happening. This
+    // code will make sure that the text gets selected as-if you did it manually.
+    // Note: We only do this when going forward / backward. Not for the
+    // Focus.First or Focus.Last actions. This is similar to the `autoFocus`
+    // behavior on an input where the input will get focus but won't be
+    // selected.
+    if (focus & (Focus.Next | Focus.Previous) && isSelectableElement(next)) {
+        next.select();
+    }
+    return FocusResult.Success;
+}

package/dist/utils/focusVisible.svelte.d.ts

@@ -4,7 +4,7 @@ export interface FocusVisibleProps {
     /** Whether the element is a text input. */
     isTextInput?: boolean;
     /** Whether the element will be auto focused. */
-    autoFocus?: boolean;
+    autofocus?: boolean;
 }
 export interface FocusVisibleResult {
     /** Whether keyboard focus is visible globally. */
@@ -13,7 +13,7 @@ export interface FocusVisibleResult {
 interface GlobalListenerData {
     focus: () => void;
 }
-export declare let hasSetupGlobalListeners: Map<Window, GlobalListenerData>;
+export declare const hasSetupGlobalListeners: Map<Window, GlobalListenerData>;
 /**
  * EXPERIMENTAL
  * Adds a window (i.e. iframe) to the list of windows that are being tracked for focus visible.
@@ -31,7 +31,7 @@ export declare let hasSetupGlobalListeners: Map<Window, GlobalListenerData>;
  * @param element @default document.body - The element provided will be used to get the window to add.
  * @returns A function to remove the event listeners and cleanup the state.
  */
-export declare function addWindowFocusTracking(element?: HTMLElement | null): () => void;
+export declare function addWindowFocusTracking(element?: HTMLElement): () => void;
 /**
  * If true, keyboard focus is visible.
  */