@nascentdigital/funnel-ui 4.5.2 → 4.5.4

package/dist/client/interaction/Tooltip.js

@@ -1,122 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = Tooltip;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const classnames_1 = __importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-const rxjs_1 = require("rxjs");
-const hooks_1 = require("../hooks");
-const ClickObserver_1 = require("./ClickObserver");
-const Popup_1 = require("./Popup");
-// component
-function Tooltip({ delay = 200, scroller, content, children, anchorClassName, popupClassName, onClose = funnel_core_1.Fn.NoOp, placement = 'bottom', anchorOffset = 0, viewportPadding = 0, disabled = false }) {
-    // bind state + hooks
-    const id = (0, react_1.useId)();
-    const [hoverState, setHoverState] = (0, react_1.useState)('inactive');
-    const [tapState, setTapState] = (0, react_1.useState)('inactive');
-    const [anchorRef, anchorElement] = (0, hooks_1.useRefElement)();
-    const [contentRef, contentElement] = (0, hooks_1.useRefElement)();
-    const scrollerRef = (0, hooks_1.useElementSelector)(scroller);
-    const scrollOffsetRef = (0, react_1.useRef)(undefined);
-    // only pass scroller ref if a scroller element was provided in props
-    const { scrollY } = (0, hooks_1.useElementScrolled)(scroller ? scrollerRef : undefined);
-    // set open if either hover state or tap state are active and not disabled
-    const open = (0, react_1.useMemo)(() => {
-        return (hoverState === 'active' || tapState === 'active') && !disabled;
-    }, [hoverState, tapState, disabled]);
-    // state for: hover [inactive, waiting, active] (mouse focus),  tap [inactive, active] (pointer down)
-    // hooks for: window resize, scroll, on-window-click -> dismiss / deactivate anything
-    // helpers
-    const onOpen = (0, react_1.useCallback)(() => {
-        var _a;
-        // when tooltip is opened, set initial scroll offset
-        scrollOffsetRef.current = (_a = scrollY === null || scrollY === void 0 ? void 0 : scrollY.offset) !== null && _a !== void 0 ? _a : 0;
-    }, [scrollOffsetRef, scrollY]);
-    // wire on mouse enter
-    const onPointerEnter = (0, react_1.useCallback)((e) => {
-        // ignore event if it's not a mouse event
-        if (e.pointerType !== 'mouse') {
-            return;
-        }
-        // set hover state to waiting
-        setHoverState('waiting');
-        // delay opening popup
-        (0, rxjs_1.timer)(delay).subscribe(() => setHoverState(prevState => {
-            // if current state is still waiting, set to active and call onOpen
-            if (prevState === 'waiting') {
-                onOpen();
-                return 'active';
-            }
-            // if prevState is not waiting, set to inactive
-            else {
-                return 'inactive';
-            }
-        }));
-    }, [onOpen, delay]);
-    // wire on mouse leave
-    const onPointerLeave = (0, react_1.useCallback)((e) => {
-        // ignore event if it's not a mouse event
-        if (e.pointerType !== 'mouse') {
-            return;
-        }
-        // update hover state
-        setHoverState('inactive');
-        onClose();
-    }, [onClose]);
-    // wire tap on mobile
-    const onClick = (0, react_1.useCallback)((e) => {
-        // ignore mouse click - only hover should be triggered when mouse is present
-        if ('pointerType' in e && e.pointerType === 'mouse') {
-            return;
-        }
-        // update tap state and call onOpen
-        setTapState('active');
-        onOpen();
-    }, [onOpen]);
-    // dismiss popup
-    const dismiss = (0, react_1.useCallback)(() => {
-        // update hover and tap state to inactive
-        setHoverState('inactive');
-        setTapState('inactive');
-        onClose();
-    }, [onClose]);
-    // listen for scroll changes
-    (0, react_1.useEffect)(() => {
-        // if tooltip is open and scroll offset has changed, dismiss tooltip
-        const hasScrolled = scrollOffsetRef.current !== undefined && (scrollY === null || scrollY === void 0 ? void 0 : scrollY.offset) !== undefined
-            && scrollOffsetRef.current !== (scrollY === null || scrollY === void 0 ? void 0 : scrollY.offset);
-        if (open && hasScrolled) {
-            dismiss();
-        }
-    }, [open, scrollY, dismiss]);
-    // bind hover and click listeners
-    (0, react_1.useEffect)(() => {
-        anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.addEventListener('pointerenter', onPointerEnter);
-        anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.addEventListener('pointerleave', onPointerLeave);
-        anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.addEventListener('click', onClick);
-        // unbind listeners
-        return () => {
-            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.removeEventListener('pointerenter', onPointerEnter);
-            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.removeEventListener('pointerleave', onPointerLeave);
-            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.removeEventListener('click', onClick);
-        };
-    }, [anchorElement, onPointerEnter, onPointerLeave, onClick]);
-    const anchorRect = (0, Popup_1.getAnchorRect)(anchorElement);
-    const popupFrame = !!anchorRect && !!contentElement
-        ? Popup_1.Popup.getFrame({
-            anchorRect,
-            contentElement,
-            placement,
-            anchorOffset,
-            viewportPadding
-        }) : {};
-    // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: anchorClassName, ref: anchorRef, children: children }), funnel_core_1.Browser.available && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && !!anchorElement &&
-                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { id: id, className: "fixed inset-0 z-popup pointer-events-none", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { ease: 'circIn', duration: 0.2 }, children: (0, jsx_runtime_1.jsx)(ClickObserver_1.ClickObserver, { disabled: !open, onClickOutside: dismiss, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, style: popupFrame, className: (0, classnames_1.default)(popupClassName, 'absolute pointer-events-auto'), children: content }) }) }, id) }), document.body)] }));
-}

package/dist/client/interaction/UILevel.d.ts

@@ -1 +0,0 @@
-export type UILevel = 'l1' | 'l2' | 'l3';

package/dist/client/interaction/UILevel.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,5 +0,0 @@
-import { PropsWithChildren } from 'react';
-export declare function BackdropContainer({ children }: BackdropContainer.Props): import("react/jsx-runtime").JSX.Element;
-export declare namespace BackdropContainer {
-    type Props = PropsWithChildren;
-}

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

@@ -1,114 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BackdropContainer = BackdropContainer;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const classnames_1 = __importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-const rxjs_1 = require("rxjs");
-const BackdropContext_1 = require("./BackdropContext");
-const BackdropEvent_1 = require("./BackdropEvent");
-// component
-function BackdropContainer({ children }) {
-    var _a, _b;
-    // bind context
-    const [dependantId, setDependantId] = (0, react_1.useState)();
-    const dependantsRef = (0, react_1.useRef)([]);
-    const dependants = dependantsRef.current;
-    const context = (0, react_1.useMemo)(() => ({
-        eventBus: new rxjs_1.Subject()
-    }), []);
-    const { eventBus } = context;
-    const backdropOptions = (_b = (_a = dependants.find(ctx => ctx.id === dependantId)) === null || _a === void 0 ? void 0 : _a.options) !== null && _b !== void 0 ? _b : {};
-    // listen to events from dependants
-    (0, react_1.useEffect)(() => {
-        // subscribe to events, proxying changes to backdrop
-        const subscription = eventBus
-            .pipe((0, rxjs_1.filter)(e => BackdropEvent_1.BackdropEvent.Capture.guard(e) || BackdropEvent_1.BackdropEvent.Release.guard(e)))
-            .subscribe(event => {
-            // handle capture
-            const dependants = dependantsRef.current;
-            const { id } = event;
-            if (BackdropEvent_1.BackdropEvent.Capture.guard(event)) {
-                // exit if dependant already exists in list
-                if (dependants.some(ctx => ctx.id === id)) {
-                    return;
-                }
-                // add new dependant
-                dependants.push({
-                    id,
-                    options: event.options
-                });
-                // set dependant to first in active list
-                setDependantId(id);
-                // raise event
-                eventBus.next(BackdropEvent_1.BackdropEvent.Show.create(dependants.map(ctx => ctx.id), id, event.options));
-            }
-            // handle release
-            else if (BackdropEvent_1.BackdropEvent.Release.guard(event)) {
-                // determine index (or exit if not found)
-                const dependantIndex = dependants.findIndex(ctx => ctx.id === id);
-                if (dependantIndex < 0) {
-                    return;
-                }
-                // remove dependant from list
-                dependants.splice(dependantIndex, 1);
-                // reactivate previous dependant (if any)
-                const dependantCount = dependants.length;
-                const nextDependant = dependantCount > 0
-                    ? dependants[dependantCount - 1]
-                    : undefined;
-                if (nextDependant) {
-                    eventBus.next(BackdropEvent_1.BackdropEvent.FocusChange.create(nextDependant.id));
-                    setDependantId(nextDependant.id);
-                }
-                // or unlock ui
-                else {
-                    eventBus.next(BackdropEvent_1.BackdropEvent.Hide.create());
-                    setDependantId(undefined);
-                }
-            }
-        });
-        // unmount
-        return () => subscription.unsubscribe();
-    }, [eventBus]);
-    // handle lock/unlock of ui
-    (0, react_1.useEffect)(() => {
-        // handle ui lock if we have a dependant
-        let unlock = undefined;
-        if (dependantId) {
-            unlock = funnel_core_1.Browser.lockFocus(`#${CSS.escape(dependantId)}`);
-        }
-        // unlock previous (if any)
-        return () => unlock && unlock();
-    }, [dependantId]);
-    // handle click
-    const onClick = () => {
-        // raise click event if we're open
-        if (dependantId) {
-            eventBus.next(BackdropEvent_1.BackdropEvent.Click.create());
-        }
-    };
-    // render
-    const { hideNav = false, level = 'l1' } = backdropOptions;
-    return ((0, jsx_runtime_1.jsxs)(BackdropContext_1.BackdropContext.Provider, { value: context, children: [children, funnel_core_1.Browser.available && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", children: dependantId &&
-                    (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: (0, classnames_1.default)('Backdrop-root', {
-                            'Backdrop-l1': !hideNav && level === 'l1',
-                            'Backdrop-l2': hideNav || level === 'l2',
-                            'Backdrop-l3': !hideNav && level === 'l3'
-                        }), variants: animationVariants, initial: "invisible", animate: "visible", exit: "invisible", onClick: onClick }, "backdrop") }), document.body)] }));
-}
-// animations
-const animationVariants = {
-    invisible: {
-        opacity: 0
-    },
-    visible: {
-        opacity: 1
-    }
-};

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

@@ -1,8 +0,0 @@
-import { Subject } from 'rxjs';
-import { BackdropEvent } from './BackdropEvent';
-export declare const BackdropContext: import("react").Context<BackdropContext.Data>;
-export declare namespace BackdropContext {
-    type Data = {
-        eventBus: Subject<BackdropEvent>;
-    };
-}

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

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

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

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