@nascentdigital/funnel-ui 4.4.18

package/dist/client/interaction/Loader.js

@@ -0,0 +1,74 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = Loader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+// component
+function Loader({ className, state = 'ready', title, action: actionLabel, triggerOffset, manual = false, onLoad = funnel_core_1.Fn.NoOp }) {
+    // bind context + hooks
+    const { stateClassName, action } = (0, react_1.useMemo)(() => getContext({ state, actionLabel, manual, onLoad }), [state, actionLabel, manual, onLoad]);
+    const spinnerId = (0, react_1.useId)();
+    const spinnerRef = (0, react_1.useRef)(null);
+    const [inView] = (0, hooks_1.useInViewport)({
+        targetId: spinnerId,
+        targetRef: spinnerRef,
+        padding: triggerOffset !== undefined
+            ? `${triggerOffset !== null && triggerOffset !== void 0 ? triggerOffset : 0}px 0px ${triggerOffset}px 0px`
+            : undefined
+    });
+    const onLoadRef = (0, react_1.useRef)(onLoad);
+    onLoadRef.current = onLoad;
+    // autoload
+    (0, react_1.useEffect)(() => {
+        // ignore if not in view OR if not ready OR if manual
+        if (manual || state !== 'ready' || !inView) {
+            return;
+        }
+        // trigger load
+        onLoadRef.current();
+    }, [inView, state, manual]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'nd-Loader', stateClassName), children: [(title || action) &&
+                (0, jsx_runtime_1.jsxs)("div", { children: [title &&
+                            (0, jsx_runtime_1.jsx)("span", { children: title }), action] }), (0, jsx_runtime_1.jsx)("span", { id: spinnerId, ref: spinnerRef, className: "nd-Loader-spinner" })] }));
+}
+function getContext({ state, actionLabel, manual, onLoad }) {
+    const createAction = ({ actionClassName = '', disabled = false } = {}) => {
+        // fail if there's no action label
+        if (!actionLabel) {
+            console.warn(`[Loader] cannot create "action" button - no action label provided for state: "${state}"`);
+            return null;
+        }
+        // render
+        return ((0, jsx_runtime_1.jsx)("button", { className: (0, classnames_1.default)('nd-Loader-action', actionClassName), disabled: disabled, onClick: onLoad, children: (0, jsx_runtime_1.jsx)("span", { className: "nd-Loader-actionLabel", children: actionLabel }) }));
+    };
+    // determine action (if any)
+    let stateClassName;
+    let action;
+    switch (state) {
+        case 'ready':
+            stateClassName = 'nd-Loader-ready';
+            action = manual && createAction();
+            break;
+        case 'loading':
+            stateClassName = 'nd-Loader-loading';
+            action = manual && actionLabel && createAction({ disabled: true });
+            break;
+        case 'error':
+            stateClassName = 'nd-Loader-error';
+            action = actionLabel && createAction();
+            break;
+        case 'complete':
+            stateClassName = 'nd-Loader-complete';
+            break;
+    }
+    // return context
+    return { stateClassName, action };
+}

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

@@ -0,0 +1,5 @@
+import { MarqueeProps } from 'react-fast-marquee';
+export declare function Marquee({ className, ...props }: Marquee.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Marquee {
+    type Props = MarqueeProps & {};
+}

package/dist/client/interaction/Marquee.js

@@ -0,0 +1,26 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Marquee = Marquee;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_fast_marquee_1 = __importDefault(require("react-fast-marquee"));
+// component
+function Marquee(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(react_fast_marquee_1.default, Object.assign({ className: (0, classnames_1.default)('nd-Marquee', className) }, props)));
+}

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

@@ -0,0 +1,36 @@
+import { Callback, Frame, Rect } from '@nascentdigital/funnel-core';
+import { Variants } from 'framer-motion';
+import { HTMLAttributes } from 'react';
+import { ClickObserver } from './ClickObserver';
+import { UILevel } from './UILevel';
+export declare function Popup({ className, style, anchor, level, placement, anchorOffset, viewportPadding, animation, dismissTrigger, disableBackground, disabled, bubbleCloseEvent, open, onOpened: onOpenedRaw, onClose, onClosed: onClosedRaw, children, ...props }: Popup.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Popup {
+    type Props = HTMLAttributes<HTMLDivElement> & {
+        anchor?: Rect | Element | string | null | undefined;
+        level?: UILevel;
+        placement?: Placement;
+        anchorOffset?: number;
+        viewportPadding?: number;
+        animation?: Animation;
+        dismissTrigger?: ClickObserver.Trigger | 'none';
+        disableBackground?: boolean;
+        disabled?: boolean;
+        bubbleCloseEvent?: boolean;
+        open?: boolean;
+        onOpened?: Callback.Void;
+        onClose?: Callback.Void;
+        onClosed?: Callback.Void;
+    };
+    type Placement = 'top-start' | 'top' | 'top-end' | 'top-match' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-match' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end';
+    type Animation = 'in' | 'out' | 'in-out';
+    type GetFrameArgs = {
+        anchorRect: Rect;
+        contentElement: HTMLDivElement;
+        placement: Popup.Placement;
+        anchorOffset: number;
+        viewportPadding: number;
+    };
+    function getFrame({ anchorRect, contentElement, placement, anchorOffset, viewportPadding }: GetFrameArgs): Partial<Frame>;
+}
+export declare const animations: Variants;
+export declare function getAnchorRect(anchor: Rect | Element | string | null | undefined): Rect | null;

package/dist/client/interaction/Popup.js

@@ -0,0 +1,244 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.animations = void 0;
+exports.Popup = Popup;
+exports.getAnchorRect = getAnchorRect;
+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 react_hotkeys_hook_1 = require("react-hotkeys-hook");
+const hooks_1 = require("../hooks");
+const ClickObserver_1 = require("./ClickObserver");
+// component
+function Popup(_a) {
+    var { className, style = {}, anchor, level = 'l1', placement = 'bottom', anchorOffset = 0, viewportPadding = 0, animation = 'in-out', dismissTrigger, disableBackground = false, disabled = false, bubbleCloseEvent = false, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, children } = _a, props = __rest(_a, ["className", "style", "anchor", "level", "placement", "anchorOffset", "viewportPadding", "animation", "dismissTrigger", "disableBackground", "disabled", "bubbleCloseEvent", "open", "onOpened", "onClose", "onClosed", "children"]);
+    // bind context
+    const [active, setActive] = (0, react_1.useState)(false);
+    const openedRef = (0, react_1.useRef)(false);
+    const contentRef = (0, react_1.useRef)(null);
+    const id = (0, react_1.useId)();
+    const anchorRect = getAnchorRect(anchor);
+    const onOpenedRef = (0, react_1.useRef)(onOpenedRaw);
+    onOpenedRef.current = onOpenedRaw;
+    const onClosedRef = (0, react_1.useRef)(onClosedRaw);
+    onClosedRef.current = onClosedRaw;
+    const closeCallback = (0, react_1.useCallback)(() => {
+        if (openedRef.current) {
+            onClose();
+        }
+    }, [onClose]);
+    // re-render on window size change
+    (0, hooks_1.useViewportSize)();
+    // close on escape
+    (0, react_hotkeys_hook_1.useHotkeys)('esc', closeCallback);
+    // show/hide based on open change
+    (0, react_1.useEffect)(() => {
+        // raise event on open/close
+        let unlock = undefined;
+        if (open) {
+            // update ref
+            openedRef.current = true;
+            // activate
+            setActive(true);
+            // lock keyboard
+            unlock = funnel_core_1.Browser.lockFocus(`#${CSS.escape(id)}`);
+        }
+        // raise event on close (if it was actually opened)
+        else if (openedRef.current) {
+            // deactivate
+            setActive(false);
+            // update ref
+            openedRef.current = false;
+        }
+        // on unmount
+        return () => {
+            // unlock (if locked)
+            if (unlock) {
+                unlock();
+            }
+        };
+    }, [open, id]);
+    // skip for SSR
+    if (!funnel_core_1.Browser.available) {
+        return null;
+    }
+    // compute popup rect (if visible + ready)
+    const contentElement = contentRef.current;
+    const popupFrame = active && !!anchorRect && !!contentElement
+        ? Popup.getFrame({
+            anchorRect,
+            contentElement,
+            placement,
+            anchorOffset,
+            viewportPadding
+        })
+        : {};
+    // helpers
+    const onClickOutside = (e) => {
+        // consume click
+        if (!bubbleCloseEvent) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        // close
+        onClose();
+    };
+    const onAnimationComplete = (definition) => {
+        if (definition === 'visible') {
+            onOpenedRef.current();
+        }
+        else if (definition === 'exit') {
+            onClosedRef.current();
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && !!anchorRect &&
+                (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('Popup-wrap', {
+                        'Popup-disableBg': disableBackground,
+                        'Popup-disabled': disabled,
+                        'Popup-l1': level === 'l1',
+                        'Popup-l2': level === 'l2',
+                        'Popup-l3': level === 'l3'
+                    }), variants: exports.animations, initial: animation !== 'out' ? 'hidden' : 'visible', animate: "visible", exit: animation !== 'in' ? 'exit' : 'visible', onAnimationComplete: definition => onAnimationComplete(definition), children: (0, jsx_runtime_1.jsx)(ClickObserver_1.ClickObserver, { trigger: dismissTrigger === 'none' ? 'click' : dismissTrigger, disabled: !open || dismissTrigger === 'none', onClickOutside: onClickOutside, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: contentRef, style: Object.assign(Object.assign({}, style), popupFrame), className: (0, classnames_1.default)(className, 'Popup-root'), children: children })) }) }, id) }), document.body) }));
+}
+// extension
+(function (Popup) {
+    // helpers
+    function getFrame({ anchorRect, contentElement, placement, anchorOffset, viewportPadding }) {
+        // get geometries
+        const viewportRect = new funnel_core_1.Rect(viewportPadding, viewportPadding, window.innerWidth - viewportPadding * 2, window.innerHeight - viewportPadding * 2);
+        const contentWidth = contentElement.offsetWidth;
+        const contentHeight = contentElement.offsetHeight;
+        // horizontal layout if left/right
+        const popupFrame = {};
+        const [primary, secondary] = placement.split('-');
+        if (primary === 'left' || primary === 'right') {
+            // determine space to left/right
+            const spaceLeft = Math.max(0, anchorRect.left - viewportRect.left - anchorOffset);
+            const spaceRight = Math.max(0, viewportRect.right - anchorRect.right - anchorOffset);
+            // place left if it fits or it fits better than on the right
+            if ((primary === 'left' && (spaceLeft >= contentWidth || spaceLeft > spaceRight))
+                || (primary === 'right' && spaceRight < contentWidth && spaceRight < spaceLeft)) {
+                popupFrame.right = viewportRect.right - anchorRect.left + anchorOffset;
+            }
+            // or place right
+            else {
+                popupFrame.left = anchorRect.right + anchorOffset;
+            }
+            // top-align on start
+            if (secondary === 'start') {
+                popupFrame.top = anchorRect.top;
+            }
+            // bottom-align on end
+            else if (secondary === 'end') {
+                popupFrame.bottom = viewportRect.bottom - anchorRect.bottom;
+            }
+            // or center against anchor
+            else {
+                // set top bounds so it's centered
+                popupFrame.top = Math.max(anchorRect.top + (anchorRect.height - contentHeight) / 2, viewportRect.top);
+                // offset if the bottom is bleeding over
+                if (popupFrame.top + contentHeight > viewportRect.bottom) {
+                    popupFrame.top -= popupFrame.top + contentHeight - viewportRect.bottom;
+                }
+            }
+        }
+        // or standard vertical layout
+        else {
+            // determine space to top/bottom
+            const spaceTop = Math.max(0, anchorRect.top - viewportRect.top - anchorOffset);
+            const spaceBottom = Math.max(0, viewportRect.bottom - anchorRect.bottom - anchorOffset);
+            // place above if it fits or it fits better than on the right
+            if ((primary === 'top' && (spaceTop >= contentHeight || spaceBottom < spaceTop))
+                || (primary === 'bottom' && spaceBottom < contentHeight && spaceBottom < spaceTop)) {
+                popupFrame.bottom = viewportRect.bottom - anchorRect.top + anchorOffset;
+            }
+            // or place below
+            else {
+                popupFrame.top = anchorRect.bottom + anchorOffset;
+            }
+            // left-align on start
+            if (secondary === 'start') {
+                popupFrame.left = anchorRect.left;
+            }
+            // right-align on end
+            else if (secondary === 'end') {
+                popupFrame.right = viewportRect.right - anchorRect.right;
+            }
+            // match width
+            else if (secondary === 'match') {
+                popupFrame.left = anchorRect.left;
+                popupFrame.width = anchorRect.width;
+            }
+            // or center against anchor
+            else {
+                // set left bounds so it's centered
+                popupFrame.left = Math.max(anchorRect.left + (anchorRect.width - contentWidth) / 2, viewportRect.left);
+                // offset if the right is bleeding over
+                if (popupFrame.left + contentWidth > viewportRect.right) {
+                    popupFrame.left -= popupFrame.left + contentWidth - viewportRect.right;
+                }
+            }
+        }
+        // return position insets
+        return popupFrame;
+    }
+    Popup.getFrame = getFrame;
+})(Popup || (exports.Popup = Popup = {}));
+// helpers
+exports.animations = {
+    hidden: {
+        opacity: 0
+    },
+    visible: {
+        opacity: 1,
+        transition: {
+            ease: 'easeOut',
+            duration: 0.5,
+            when: 'beforeChildren'
+        }
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            ease: 'easeIn',
+            duration: 0.15,
+            bounce: 0,
+            when: 'afterChildren'
+        }
+    }
+};
+function getAnchorRect(anchor) {
+    // skip if there's no anchor or if we're SSR
+    if (!anchor || !funnel_core_1.Browser.available) {
+        return null;
+    }
+    // or skip if we already have a rect
+    else if (anchor instanceof funnel_core_1.Rect) {
+        return anchor;
+    }
+    // try to coerce anchor into an element (or fail)
+    const anchorElement = typeof anchor === 'string'
+        ? document.querySelector(anchor)
+        : anchor;
+    return anchorElement
+        ? funnel_core_1.Rect.fromInsets(anchorElement.getBoundingClientRect())
+        : null;
+}

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

@@ -0,0 +1,16 @@
+import { ReactNode, RefObject } from 'react';
+import { Popup } from './Popup';
+export declare function Tooltip({ delay, scroller, content, children, anchorClassName, popupClassName, onClose, placement, anchorOffset, viewportPadding, disabled }: DelayedPopup.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace DelayedPopup {
+    type Props = Pick<Popup.Props, 'anchorOffset' | 'viewportPadding' | 'placement' | 'onClose'> & {
+        delay?: number;
+        scroller?: string | RefObject<HTMLElement | null>;
+        content: ReactNode;
+        children: ReactNode;
+        anchorClassName?: string;
+        popupClassName?: string;
+        disabled?: boolean;
+    };
+    type HoverState = 'inactive' | 'waiting' | 'active';
+    type TapState = 'inactive' | 'active';
+}

package/dist/client/interaction/Tooltip.js

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

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

package/dist/client/interaction/UILevel.js

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

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

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

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

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