@nascentdigital/funnel-ui 4.5.2 → 4.5.3

package/dist/server/panels/VisualPanel.d.ts

@@ -8,7 +8,7 @@ export declare namespace VisualPanel {
     type Props = BlockPanel.Props & {
         className?: string;
         panel: BlockLayout.Visual;
-        visual: Visual.Model;
+        visual?: Visual.Model;
         visualDecorator?: ReactNode;
         visualLoading?: Visual.Loading;
         aspect?: AspectRatio;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nascentdigital/funnel-ui",
   "description": "UI components for funnel",
-  "version": "4.5.2",
+  "version": "4.5.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -70,5 +70,5 @@
     "react-dom": "^19",
     "ts-jest": "^29.3.2"
   },
-  "gitHead": "5b63f9cd8843cc111b4458c71aa031a974455241"
+  "gitHead": "ef42bb5440cc23187aeefc29319875ed5402676f"
 }

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

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

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

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

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