@nascentdigital/funnel-ui 4.4.18

package/dist/client/interaction/backdrop/BackdropContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackdropContext = void 0;
+const react_1 = require("react");
+// context
+exports.BackdropContext = (0, react_1.createContext)({});

package/dist/client/interaction/backdrop/BackdropEvent.d.ts

@@ -0,0 +1,64 @@
+import { Tagged } from 'type-fest';
+import { UILevel } from '../UILevel';
+export type BackdropEvent = BackdropEvent.Show | BackdropEvent.Hide | BackdropEvent.Click | BackdropEvent.FocusChange | BackdropEvent.Capture | BackdropEvent.Release;
+export declare namespace BackdropEvent {
+    export type Action = 'show' | 'hide' | 'click' | 'focusChange' | 'capture' | 'release';
+    export type Options = {
+        hideNav?: boolean;
+        level?: UILevel;
+    };
+    export type DependantId = Tagged<string, 'funnel.BackdropEvent.DependantId'>;
+    interface Base {
+        action: Action;
+    }
+    export interface Show extends Base {
+        action: 'show';
+        dependent: DependantId;
+        dependants: ReadonlyArray<DependantId>;
+        options: Options;
+    }
+    export namespace Show {
+        function guard(event: BackdropEvent): event is Show;
+        function create(dependants: ReadonlyArray<DependantId>, dependent: DependantId, options: Options): Show;
+    }
+    export interface Hide extends Base {
+        action: 'hide';
+    }
+    export namespace Hide {
+        function guard(event: BackdropEvent): event is Hide;
+        function create(): Hide;
+    }
+    export interface Click extends Base {
+        action: 'click';
+    }
+    export namespace Click {
+        function guard(event: BackdropEvent): event is Click;
+        function create(): Click;
+    }
+    export interface FocusChange extends Base {
+        action: 'focusChange';
+        dependent: DependantId;
+    }
+    export namespace FocusChange {
+        function guard(event: BackdropEvent): event is FocusChange;
+        function create(dependent: DependantId): FocusChange;
+    }
+    export interface Capture extends Base {
+        id: DependantId;
+        action: 'capture';
+        options: Options;
+    }
+    export namespace Capture {
+        function guard(event: BackdropEvent): event is Capture;
+        function create(id: DependantId, options: Options): Capture;
+    }
+    export interface Release extends Base {
+        id: DependantId;
+        action: 'release';
+    }
+    export namespace Release {
+        function guard(event: BackdropEvent): event is Release;
+        function create(id: DependantId): Release;
+    }
+    export {};
+}

package/dist/client/interaction/backdrop/BackdropEvent.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackdropEvent = void 0;
+// extension
+var BackdropEvent;
+(function (BackdropEvent) {
+    let Show;
+    (function (Show) {
+        function guard(event) {
+            return event.action === 'show';
+        }
+        Show.guard = guard;
+        function create(dependants, dependent, options) {
+            return {
+                action: 'show',
+                dependent,
+                dependants,
+                options
+            };
+        }
+        Show.create = create;
+    })(Show = BackdropEvent.Show || (BackdropEvent.Show = {}));
+    let Hide;
+    (function (Hide) {
+        function guard(event) {
+            return event.action === 'hide';
+        }
+        Hide.guard = guard;
+        function create() {
+            return {
+                action: 'hide'
+            };
+        }
+        Hide.create = create;
+    })(Hide = BackdropEvent.Hide || (BackdropEvent.Hide = {}));
+    let Click;
+    (function (Click) {
+        function guard(event) {
+            return event.action === 'click';
+        }
+        Click.guard = guard;
+        function create() {
+            return {
+                action: 'click'
+            };
+        }
+        Click.create = create;
+    })(Click = BackdropEvent.Click || (BackdropEvent.Click = {}));
+    let FocusChange;
+    (function (FocusChange) {
+        function guard(event) {
+            return event.action === 'focusChange';
+        }
+        FocusChange.guard = guard;
+        function create(dependent) {
+            return {
+                action: 'focusChange',
+                dependent
+            };
+        }
+        FocusChange.create = create;
+    })(FocusChange = BackdropEvent.FocusChange || (BackdropEvent.FocusChange = {}));
+    let Capture;
+    (function (Capture) {
+        function guard(event) {
+            return event.action === 'capture';
+        }
+        Capture.guard = guard;
+        function create(id, options) {
+            return {
+                id,
+                action: 'capture',
+                options
+            };
+        }
+        Capture.create = create;
+    })(Capture = BackdropEvent.Capture || (BackdropEvent.Capture = {}));
+    let Release;
+    (function (Release) {
+        function guard(event) {
+            return event.action === 'release';
+        }
+        Release.guard = guard;
+        function create(id) {
+            return {
+                id,
+                action: 'release'
+            };
+        }
+        Release.create = create;
+    })(Release = BackdropEvent.Release || (BackdropEvent.Release = {}));
+})(BackdropEvent || (exports.BackdropEvent = BackdropEvent = {}));

package/dist/client/interaction/backdrop/index.d.ts

@@ -0,0 +1,4 @@
+export * from './BackdropContainer';
+export * from './useBackdrop';
+export * from './useBackdropClick';
+export * from './useBackdropVisible';

package/dist/client/interaction/backdrop/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BackdropContainer"), exports);
+__exportStar(require("./useBackdrop"), exports);
+__exportStar(require("./useBackdropClick"), exports);
+__exportStar(require("./useBackdropVisible"), exports);

package/dist/client/interaction/backdrop/useBackdrop.d.ts

@@ -0,0 +1,13 @@
+import { Subject } from 'rxjs';
+import { BackdropEvent } from './BackdropEvent';
+export declare function useBackdrop(): BackdropProxy;
+export declare class BackdropProxy {
+    readonly id: BackdropEvent.DependantId;
+    private readonly _eventBus;
+    private _focused;
+    constructor(id: BackdropEvent.DependantId, _eventBus: Subject<BackdropEvent>);
+    get focused(): boolean;
+    set focused(value: boolean);
+    show(options?: BackdropEvent.Options): void;
+    hide(): void;
+}

package/dist/client/interaction/backdrop/useBackdrop.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackdropProxy = void 0;
+exports.useBackdrop = useBackdrop;
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const BackdropContext_1 = require("./BackdropContext");
+const BackdropEvent_1 = require("./BackdropEvent");
+// hook
+function useBackdrop() {
+    // bind context + state
+    const touch = (0, hooks_1.useTouch)();
+    const { eventBus } = (0, react_1.useContext)(BackdropContext_1.BackdropContext);
+    const id = (0, react_1.useId)();
+    const proxy = (0, react_1.useMemo)(() => new BackdropProxy(id, eventBus), [id, eventBus]);
+    // listen to determine if "this" backdrop is focused (meaning this reference to it)
+    (0, react_1.useEffect)(() => {
+        // subscribe to show/focusChange events
+        const subscription = eventBus
+            .subscribe(event => {
+            // handle backdrop being shown or focus changing
+            if (BackdropEvent_1.BackdropEvent.Show.guard(event) || BackdropEvent_1.BackdropEvent.FocusChange.guard(event)) {
+                proxy.focused = event.dependent === id;
+                touch();
+            }
+            // or if this backdrop is hidden
+            else if (BackdropEvent_1.BackdropEvent.Hide.guard(event)) {
+                proxy.focused = false;
+                touch();
+            }
+        });
+        // unmount
+        return () => subscription.unsubscribe();
+    }, [touch, eventBus, id, proxy]);
+    // return proxy
+    return proxy;
+}
+// proxy
+class BackdropProxy {
+    constructor(id, _eventBus) {
+        this.id = id;
+        this._eventBus = _eventBus;
+        this._focused = false;
+    }
+    get focused() {
+        return this._focused;
+    }
+    set focused(value) {
+        this._focused = value;
+    }
+    show(options) {
+        this._eventBus.next(BackdropEvent_1.BackdropEvent.Capture.create(this.id, options !== null && options !== void 0 ? options : {}));
+    }
+    hide() {
+        this._eventBus.next(BackdropEvent_1.BackdropEvent.Release.create(this.id));
+    }
+}
+exports.BackdropProxy = BackdropProxy;

package/dist/client/interaction/backdrop/useBackdropClick.d.ts

@@ -0,0 +1,2 @@
+import { Callback } from '@nascentdigital/funnel-core';
+export declare function useBackdropClick(onClick: Callback.Void): void;

package/dist/client/interaction/backdrop/useBackdropClick.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBackdropClick = useBackdropClick;
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const BackdropContext_1 = require("./BackdropContext");
+const BackdropEvent_1 = require("./BackdropEvent");
+// hook
+function useBackdropClick(onClick) {
+    // bind context
+    const { eventBus } = (0, react_1.useContext)(BackdropContext_1.BackdropContext);
+    // subscribe for click actions
+    (0, react_1.useEffect)(() => {
+        // subscribe
+        const subscription = eventBus
+            .pipe((0, rxjs_1.filter)(BackdropEvent_1.BackdropEvent.Click.guard))
+            .subscribe(() => onClick());
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [eventBus, onClick]);
+}

package/dist/client/interaction/backdrop/useBackdropVisible.d.ts

@@ -0,0 +1 @@
+export declare function useBackdropVisible(): boolean;

package/dist/client/interaction/backdrop/useBackdropVisible.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBackdropVisible = useBackdropVisible;
+const react_1 = require("react");
+const BackdropContext_1 = require("./BackdropContext");
+const BackdropEvent_1 = require("./BackdropEvent");
+// hook
+function useBackdropVisible() {
+    // bind props + state
+    const { eventBus } = (0, react_1.useContext)(BackdropContext_1.BackdropContext);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    // listen for events and update
+    (0, react_1.useEffect)(() => {
+        // listen on mount
+        const subscription = eventBus.subscribe(event => {
+            // handle show/focus as meaning we're visible
+            if (BackdropEvent_1.BackdropEvent.Show.guard(event) || BackdropEvent_1.BackdropEvent.FocusChange.guard(event)) {
+                setVisible(true);
+            }
+            // or handle hide as not visible
+            else if (BackdropEvent_1.BackdropEvent.Hide.guard(event)) {
+                setVisible(false);
+            }
+        });
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [eventBus]);
+    // return state
+    return visible;
+}

package/dist/client/interaction/focus/FocusArea.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { HTMLElements } from '../../../types';
+export declare function FocusArea<T extends FocusArea.Tag>({ as, children, order, ...props }: FocusArea.Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace FocusArea {
+    type Props<T extends Tag> = Omit<HTMLAttributes<HTMLElements.Standard[T]>, 'tabIndex' | 'onFocus'> & {
+        as: T;
+        order: number;
+    };
+    type Tag = HTMLElements.Standard.Container;
+}

package/dist/client/interaction/focus/FocusArea.js

@@ -0,0 +1,38 @@
+'use client';
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusArea = FocusArea;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const useFocusService_1 = require("./useFocusService");
+function FocusArea(_a) {
+    var { as, children, order } = _a, props = __rest(_a, ["as", "children", "order"]);
+    // bind hooks/context
+    const [ref, element] = (0, hooks_1.useRefElement)();
+    const focusService = (0, useFocusService_1.useFocusService)();
+    // register/unregister area
+    (0, react_1.useEffect)(() => {
+        // ignore until element is ready
+        if (!element) {
+            return;
+        }
+        // register with controller
+        focusService.bindArea(element, { order });
+        // unregister in unmount
+        return () => focusService.unbindArea(element);
+    }, [focusService, element, order]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_1.createElement)(as, Object.assign(Object.assign({}, props), { ref }), children) }));
+}

package/dist/client/interaction/focus/FocusContext.d.ts

@@ -0,0 +1,7 @@
+import type { FocusService } from './FocusService';
+export declare const FocusContext: import("react").Context<FocusContext.Data>;
+export declare namespace FocusContext {
+    type Data = {
+        focusService?: FocusService;
+    };
+}

package/dist/client/interaction/focus/FocusContext.js

@@ -0,0 +1,7 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusContext = void 0;
+const react_1 = require("react");
+// context
+exports.FocusContext = (0, react_1.createContext)({});

package/dist/client/interaction/focus/FocusController.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { HTMLElements } from '../../../types';
+export declare function FocusController<T extends FocusController.Tag>({ children, as, ...props }: FocusController.Props<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace FocusController {
+    type Props<T extends Tag> = Omit<HTMLAttributes<HTMLElements.Standard[T]>, 'tabIndex'> & {
+        as: T;
+    };
+    type Tag = HTMLElements.Standard.Container;
+}

package/dist/client/interaction/focus/FocusController.js

@@ -0,0 +1,40 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusController = FocusController;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const FocusContext_1 = require("./FocusContext");
+const FocusService_1 = require("./FocusService");
+function FocusController(_a) {
+    var { children, as } = _a, props = __rest(_a, ["children", "as"]);
+    // bind state/hooks
+    const [ref, rootElement] = (0, hooks_1.useRefElement)();
+    const [lastGuardRef, lastGuardElement] = (0, hooks_1.useRefElement)();
+    const focusService = (0, react_1.useMemo)(() => new FocusService_1.FocusService(), []);
+    const context = (0, react_1.useMemo)(() => ({ focusService }), [focusService]);
+    // bind service
+    (0, react_1.useEffect)(() => {
+        // ignore until element is ready
+        if (!rootElement || !lastGuardElement) {
+            return;
+        }
+        // initialize new service
+        focusService.initialize(rootElement, lastGuardElement);
+        // unregister in unmount
+        return () => focusService.finalize();
+    }, [focusService, rootElement, lastGuardElement]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(FocusContext_1.FocusContext.Provider, { value: context, children: (0, react_1.createElement)(as, Object.assign({ ref, tabIndex: '0' }, props), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (0, jsx_runtime_1.jsx)("div", { ref: lastGuardRef, className: "outline-none", "aria-hidden": true, tabIndex: 0 })] })) }));
+}

package/dist/client/interaction/focus/FocusService.d.ts

@@ -0,0 +1,20 @@
+export declare class FocusService {
+    private _rootElement?;
+    private _lastGuardElement?;
+    private readonly _areaNodes;
+    private _focusedAreaNode?;
+    constructor();
+    initialize(root: HTMLElement, lastGuard: HTMLElement): void;
+    finalize(): void;
+    bindArea(area: HTMLElement, { order }?: FocusService.AreaOptions): void;
+    unbindArea(area: HTMLElement): void;
+    private onRootFocus;
+    private onAreaFocus;
+    private onLastGuardFocus;
+    private focusOutside;
+}
+export declare namespace FocusService {
+    type AreaOptions = {
+        order?: number;
+    };
+}

package/dist/client/interaction/focus/FocusService.js

@@ -0,0 +1,204 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusService = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const LinkedList_1 = require("./LinkedList");
+class FocusService {
+    constructor() {
+        // instance variables
+        this._areaNodes = new LinkedList_1.SortedLinkedList();
+        // bind methods
+        this.onAreaFocus = this.onAreaFocus.bind(this);
+        this.onRootFocus = this.onRootFocus.bind(this);
+        this.onLastGuardFocus = this.onLastGuardFocus.bind(this);
+    }
+    initialize(root, lastGuard) {
+        // capture root and last guard
+        this._rootElement = root;
+        this._lastGuardElement = lastGuard;
+        // bind listeners
+        this._rootElement.addEventListener('focusin', this.onRootFocus);
+        this._lastGuardElement.addEventListener('focusin', this.onLastGuardFocus);
+    }
+    finalize() {
+        var _a, _b;
+        // clear listeners
+        (_a = this._rootElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('focusin', this.onRootFocus);
+        (_b = this._lastGuardElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusin', this.onLastGuardFocus);
+        // remove root
+        delete this._rootElement;
+        delete this._lastGuardElement;
+    }
+    bindArea(area, { order = 0 } = {}) {
+        // ensure area isn't already bound
+        let pointer = this._areaNodes.head;
+        while (pointer) {
+            if (pointer.area === area) {
+                console.warn('[FocusService.ts]: area is already bound');
+                return;
+            }
+            pointer = pointer.next;
+        }
+        // update the node links
+        this._areaNodes.insert(new AreaNode(area, order));
+        // initialize area
+        area.addEventListener('focusin', this.onAreaFocus);
+        area.tabIndex = 0;
+    }
+    unbindArea(area) {
+        // find element (or skip)
+        const { _areaNodes } = this;
+        const node = _areaNodes.find(node => node.area === area);
+        if (!node) {
+            console.warn('[FocusService]: area not found to unbind');
+            return;
+        }
+        // unregister listeners
+        area.removeEventListener('focusin', this.onAreaFocus);
+        // remove the element from list
+        _areaNodes.remove(node);
+    }
+    onRootFocus(e) {
+        var _a;
+        // skip events bubbled up from the children
+        if (e.target !== e.currentTarget) {
+            return;
+        }
+        // skip if not focused through keyboard
+        // TODO: handle mouse click focus
+        const element = e.target;
+        if (!element.matches(':focus-visible')) {
+            return;
+        }
+        // focus the first tab-able element
+        const focusedArea = (_a = this._areaNodes.head) === null || _a === void 0 ? void 0 : _a.focusNext(true);
+        if (focusedArea) {
+            this._focusedAreaNode = focusedArea;
+            return;
+        }
+        // else, focus outside the container
+        this.focusOutside('forward');
+    }
+    onAreaFocus(e) {
+        var _a, _b, _c;
+        // skip events bubbled up from the children
+        if (e.target !== e.currentTarget) {
+            return;
+        }
+        // skip if not focused through keyboard
+        // TODO: handle mouse click focus
+        const element = e.target;
+        if (!element.matches(':focus-visible')) {
+            return;
+        }
+        // determine tab direction
+        // if focused on the same area as current focused area node, it means moving backward
+        // otherwise, moving forward
+        const tabDirection = ((_a = this._focusedAreaNode) === null || _a === void 0 ? void 0 : _a.area) === e.target ? 'backward' : 'forward';
+        const focusedArea = tabDirection === 'forward' ?
+            (_b = this._focusedAreaNode) === null || _b === void 0 ? void 0 : _b.focusNext() :
+            (_c = this._focusedAreaNode) === null || _c === void 0 ? void 0 : _c.focusPrevious();
+        if (focusedArea) {
+            this._focusedAreaNode = focusedArea;
+            return;
+        }
+        this.focusOutside(tabDirection);
+    }
+    onLastGuardFocus(e) {
+        var _a;
+        // skip events bubbled up from the children
+        if (e.target !== e.currentTarget) {
+            return;
+        }
+        // if there is no focused area context, it means focus is moving backwards
+        // therefore, focus the first tab-able element from the back
+        if (!this._focusedAreaNode) {
+            const focusedAreaContext = (_a = this._areaNodes.tail) === null || _a === void 0 ? void 0 : _a.focusPrevious(true);
+            // set focusedAreaContext if found
+            if (focusedAreaContext) {
+                this._focusedAreaNode = focusedAreaContext;
+                return;
+            }
+            // otherwise, focusOutside
+            this.focusOutside('backward');
+            return;
+        }
+        const focusedArea = this._focusedAreaNode.focusNext();
+        if (focusedArea) {
+            this._focusedAreaNode = focusedArea;
+        }
+    }
+    focusOutside(tabDirection) {
+        // get all focusable elements
+        const focusableElements = Array.from(document.querySelectorAll(tabbableQuerySelector));
+        // if forward, focus the element after the last guard element
+        if (tabDirection === 'forward') {
+            const lastGuardElementIndex = focusableElements.findIndex(focusableElement => focusableElement === this._lastGuardElement);
+            const newElementIndex = lastGuardElementIndex + 1;
+            // focus if within boundary
+            if (lastGuardElementIndex > 0 && lastGuardElementIndex < focusableElements.length) {
+                focusableElements[newElementIndex].focus();
+            }
+            this._focusedAreaNode = undefined;
+            return;
+        }
+        // otherwise, focus on the element before the root element
+        const rootElementIndex = focusableElements.findIndex(focusableElement => focusableElement === this._rootElement);
+        const newElementIndex = rootElementIndex - 1;
+        // focus if within boundary
+        if (newElementIndex >= 0 && newElementIndex < focusableElements.length) {
+            focusableElements[newElementIndex].focus();
+        }
+        this._focusedAreaNode = undefined;
+        return;
+    }
+}
+exports.FocusService = FocusService;
+const tabbableQuerySelector = funnel_core_1.Browser.Element.tabbable.join(',');
+//  create AreaNode
+class AreaNode {
+    constructor(area, ordinal) {
+        this.area = area;
+        this.ordinal = ordinal;
+    }
+    focusNext(inclusive = false) {
+        // pointer
+        let current = inclusive ? this : this.next;
+        // traverse the list forward
+        while (current) {
+            const focusAbleElement = current.area.querySelector(tabbableQuerySelector);
+            // if focus-able element found, focus and return the area node
+            if (focusAbleElement) {
+                focusAbleElement.focus();
+                return current;
+            }
+            // otherwise, keep traversing
+            current = current.next;
+        }
+        return undefined;
+    }
+    focusPrevious(inclusive = false) {
+        // pointer
+        let current = inclusive ? this : this.prev;
+        // traverse the list backward
+        while (current) {
+            const focusAbleElements = Array.from(current.area.querySelectorAll(tabbableQuerySelector));
+            const focusAbleElement = focusAbleElements.pop();
+            // if focus-able element found, focus and return the area node
+            if (focusAbleElement) {
+                focusAbleElement.focus();
+                return current;
+            }
+            // otherwise, keep traversing
+            current = current.prev;
+        }
+        return undefined;
+    }
+    compareTo(that) {
+        return this.ordinal === that.ordinal
+            ? 0
+            : this.ordinal < that.ordinal
+                ? -1
+                : 1;
+    }
+}