@nascentdigital/funnel-ui 4.5.2 → 4.5.3

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

@@ -1,92 +0,0 @@
-"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

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

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

@@ -1,20 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-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

@@ -1,58 +0,0 @@
-"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

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

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

@@ -1,21 +0,0 @@
-"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

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

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

@@ -1,30 +0,0 @@
-"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

@@ -1,10 +0,0 @@
-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

@@ -1,38 +0,0 @@
-'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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-'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

@@ -1,9 +0,0 @@
-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

@@ -1,40 +0,0 @@
-"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

@@ -1,20 +0,0 @@
-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

@@ -1,204 +0,0 @@
-"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;
-    }
-}

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

@@ -1,18 +0,0 @@
-import { Transform } from '@nascentdigital/funnel-core';
-export declare class SortedLinkedList<T extends SortedLinkedList.Node<T>> {
-    constructor(list?: SortedLinkedList<T>);
-    private _head?;
-    get head(): T | undefined;
-    private _tail?;
-    get tail(): T | undefined;
-    find(matches: Transform<T, boolean>): T | undefined;
-    insert(node: T): void;
-    remove(node: T): void;
-}
-export declare namespace SortedLinkedList {
-    interface Node<T> {
-        prev?: Node<T>;
-        next?: Node<T>;
-        compareTo(that: Node<T>): number;
-    }
-}