@nascentdigital/funnel-ui 4.4.18

package/dist/client/interaction/Carousel.js

@@ -0,0 +1,498 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Carousel = Carousel;
+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("motion/react");
+const react_2 = require("react");
+const react_hotkeys_hook_1 = require("react-hotkeys-hook");
+const rxjs_1 = require("rxjs");
+const app_1 = require("../app");
+const hooks_1 = require("../hooks");
+// component
+function Carousel({ className, spacing = 0, infinite = false, autoplay = false, autoplayInterval: autoplayIntervalRaw, disableClipping = false, renderIndicator, renderNavButton, renderPlayButton, onPageDrag = funnel_core_1.Fn.NoOp, onPageChange = funnel_core_1.Fn.NoOp, children = [] }) {
+    var _a;
+    // bind props + state + hooks
+    const [state, setState] = (0, react_2.useState)('initializing');
+    const [interacting, setInteracting] = (0, react_2.useState)(false);
+    const [play, setPlay] = (0, react_2.useState)(autoplay && infinite);
+    const [activeIndex, setActiveIndex] = (0, react_2.useState)(0);
+    const [dragIndex, setDragIndex] = (0, react_2.useState)();
+    const [containerRef, container] = (0, hooks_1.useRefElement)();
+    const [pagerRef, pager] = (0, hooks_1.useRefElement)();
+    const [indicatorsRef, indicators] = (0, hooks_1.useRefElement)();
+    const [playButtonRef, playButton] = (0, hooks_1.useRefElement)();
+    const deferredNavigationRef = (0, react_2.useRef)(undefined);
+    const pageDragRef = (0, react_2.useRef)(dragIndex);
+    const pageChangeRef = (0, react_2.useRef)(activeIndex);
+    const pagerSize = (0, hooks_1.useElementSize)(pager);
+    const pagerWidth = (_a = pagerSize === null || pagerSize === void 0 ? void 0 : pagerSize.width) !== null && _a !== void 0 ? _a : 0;
+    const pagerTranslate = (0, react_1.useMotionValue)(0);
+    const { hasKeyboardFocus, keyboardFocusElement } = (0, hooks_1.useKeyboardFocus)(container);
+    const uiLock = (0, hooks_1.useUILock)(container);
+    const playButtonFocused = !!playButton && keyboardFocusElement === playButton;
+    const childCount = children.length;
+    const appConfig = (0, app_1.useAppConfig)();
+    const autoplayInterval = (0, react_2.useMemo)(() => { var _a; return funnel_core_1.Duration.toMilliseconds((_a = autoplayIntervalRaw !== null && autoplayIntervalRaw !== void 0 ? autoplayIntervalRaw : appConfig.ui.carouselInterval) !== null && _a !== void 0 ? _a : '1s'); }, [autoplayIntervalRaw, appConfig]);
+    const reduceMotion = (0, react_1.useReducedMotion)();
+    const specs = (0, react_2.useMemo)(() => getCarouselSpecs({ spacing, infinite, children, activeIndex: activeIndex, pagerWidth }), [spacing, infinite, children, activeIndex, pagerWidth]);
+    const animateTo = (0, react_2.useCallback)(async (target) => onAnimateTo({
+        target, childCount, offset: activeIndex, spacing, infinite, pagerWidth, pagerTranslate, specs, setState, setActiveIndex, setDragIndex
+    }), [childCount, activeIndex, spacing, infinite, pagerWidth, pagerTranslate, specs]);
+    const goPrev = (0, react_2.useCallback)(async () => {
+        // stop autoplay (if running)
+        setPlay(false);
+        // set deferral if not ready
+        if (state !== 'ready') {
+            deferredNavigationRef.current = 'prev';
+        }
+        // or action immediately
+        else {
+            await animateTo('prev');
+        }
+    }, [state, animateTo]);
+    const goNext = (0, react_2.useCallback)(async () => {
+        // stop autoplay (if running)
+        setPlay(false);
+        // set deferral if not ready
+        if (state !== 'ready') {
+            deferredNavigationRef.current = 'next';
+        }
+        // or action immediately
+        else {
+            await animateTo('next');
+        }
+    }, [state, animateTo]);
+    const { pages, pagerTranslation, prevIndex, nextIndex } = specs;
+    const canAutoplay = autoplay && !uiLock.isLocked && reduceMotion !== true;
+    // constants
+    const carouselId = 'nd-Carousel-item';
+    // mount
+    (0, react_2.useEffect)(() => {
+        // disable if there are not enough children
+        if (childCount < 2) {
+            setState('disabled');
+        }
+        // or mark ready if the pager is bound (otherwise, ignore)
+        else if (pager) {
+            setState('ready');
+        }
+    }, [pager, childCount]);
+    // fix translation on layout change
+    (0, react_2.useEffect)(() => {
+        pagerTranslate.set(pagerTranslation);
+    }, [pagerTranslate, pagerTranslation]);
+    // autoplay
+    (0, react_2.useEffect)(() => {
+        // skip if not ready OR interacting
+        if (!infinite || !canAutoplay || !play || interacting || (hasKeyboardFocus && !playButtonFocused) || state !== 'ready') {
+            return;
+        }
+        // queue up page flip
+        const subscription = (0, rxjs_1.timer)(autoplayInterval)
+            .subscribe(() => animateTo('next').catch(console.error));
+        // cancel if unmounted
+        return () => subscription.unsubscribe();
+    }, [state, infinite, canAutoplay, play, autoplayInterval, interacting, hasKeyboardFocus, playButtonFocused, animateTo]);
+    // fix: safari had keyboard focus on container when clicking on play/pause
+    (0, react_2.useEffect)(() => {
+        if (container && keyboardFocusElement === container) {
+            keyboardFocusElement.blur();
+        }
+    }, [container, keyboardFocusElement]);
+    // handle deferred navigation
+    (0, react_2.useEffect)(() => {
+        const navigation = deferredNavigationRef.current;
+        if (state === 'ready' && navigation) {
+            // clear direction
+            deferredNavigationRef.current = undefined;
+            // animate
+            animateTo(navigation).catch(console.error);
+        }
+    }, [state, animateTo]);
+    // disable interaction/nav of offscreen pages
+    (0, react_2.useEffect)(() => {
+        // skip if we're no ready OR  only have a single page (or less)
+        if (!pager || pages.length < 2) {
+            return;
+        }
+        // get active page element
+        const activePageElement = funnel_core_1.Browser.getElement(`.Carousel-pageActive`, pager);
+        if (!activePageElement) {
+            console.warn(`[Carousel/disablePages] unable to find active page element ".Carousel-pageActive"`);
+            return;
+        }
+        // disable tabbing from other slides
+        const restore = funnel_core_1.Browser.modifyElements({
+            container: pager,
+            targets: funnel_core_1.Selector.tabbable,
+            onModify: elements => elements.forEach(modifier => {
+                // only disable if not within active page
+                if (!activePageElement.contains(modifier.element)) {
+                    modifier.setAttribute('tabindex', '-1');
+                }
+            }),
+            restoreKey: 'carouselDisabled'
+        });
+        // restore on unmount
+        return () => restore();
+    }, [pager, pages]);
+    // raise page drag callback
+    (0, react_2.useEffect)(() => {
+        // skip if page drag already notified current index (don't double up)
+        const pageIndex = pageDragRef.current;
+        if (pageIndex !== dragIndex) {
+            // track change
+            pageDragRef.current = dragIndex;
+            // raise change (if there's an index)
+            onPageDrag(dragIndex);
+        }
+    }, [onPageDrag, dragIndex]);
+    // raise page change callback
+    (0, react_2.useEffect)(() => {
+        // skip if page change already notified current index (don't double up)
+        const pageIndex = pageChangeRef.current;
+        if (pageIndex !== activeIndex) {
+            // track change
+            pageChangeRef.current = activeIndex;
+            // raise change
+            onPageChange(activeIndex);
+        }
+    }, [onPageChange, activeIndex]);
+    // setup hotkeys (for navigation)
+    const hotkeysRef = (0, react_hotkeys_hook_1.useHotkeys)('left, right', async (e, handler) => {
+        var _a;
+        // ignore if still animating
+        if (state !== 'ready') {
+            return;
+        }
+        // skip if not ready (not really possible)
+        const source = e.target;
+        const { keys } = handler;
+        if (!source || !container || !pager || !indicators || !keys) {
+            return;
+        }
+        // skip if not on slide or indicators
+        else if (!pager.contains(source) && !indicators.contains(source)) {
+            return;
+        }
+        // determine the indicator to focus on
+        const key = keys.join('');
+        const nextOffset = funnel_core_1.ArrayUtils.circularIndex(indicators.children, key === 'arrowleft'
+            ? activeIndex - 2
+            : activeIndex + 2);
+        // focus on indicator button
+        const nextButton = (_a = indicators.children.item(nextOffset)) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+        if (nextButton) {
+            nextButton.disabled = false;
+            nextButton.focus();
+        }
+        // move slide
+        switch (key) {
+            case 'arrowleft':
+                await goPrev();
+                break;
+            case 'arrowright':
+                await goNext();
+                break;
+        }
+    }, { enabled: !!container }, [container, pager, indicators, goPrev, goNext, activeIndex]);
+    hotkeysRef.current = container;
+    // render nothing if there are no children
+    if (childCount === 0 || !children) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'Carousel-empty'), children: "No content" }));
+    }
+    // or render single child if there's nothing else
+    else if (childCount === 1) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'Carousel-single'), children: children }));
+    }
+    const onDragStart = () => {
+        // stop autoplay (if running)
+        setPlay(false);
+        // mark as dragging
+        setState('dragging');
+    };
+    const onDrag = async (e, info) => {
+        var _a, _b;
+        // determine paging outcome based on distance/direction
+        const distance = Math.abs(info.offset.x);
+        const percent = distance / pagerWidth;
+        const target = percent < 0.25
+            ? 'current'
+            : info.offset.x > 0
+                ? prevIndex !== undefined ? 'prev' : 'current'
+                : nextIndex !== undefined ? 'next' : 'current';
+        // track drag
+        setDragIndex(target === 'current'
+            ? activeIndex
+            : target === 'prev'
+                ? (_a = specs.prevIndex) !== null && _a !== void 0 ? _a : activeIndex
+                : (_b = specs.nextIndex) !== null && _b !== void 0 ? _b : activeIndex);
+    };
+    const onDragEnd = async (e, info) => {
+        // determine paging outcome based on distance/direction
+        const distance = Math.abs(info.offset.x);
+        const percent = distance / pagerWidth;
+        const target = percent < 0.25
+            ? 'current'
+            : info.offset.x > 0
+                ? prevIndex !== undefined ? 'prev' : 'current'
+                : nextIndex !== undefined ? 'next' : 'current';
+        // start paging
+        await animateTo(target);
+        // clear drag
+        setDragIndex(undefined);
+    };
+    const blurIfNotKeyboard = (e) => {
+        // drop focus (don't hold on) if it's NOT from the keyboard
+        if (!('pointerType' in e.nativeEvent) || e.nativeEvent.pointerType) {
+            // drop focus
+            const button = e.target;
+            button.blur();
+            // indicate that it was blurred
+            return true;
+        }
+        // or we actually got a keyboard event
+        return false;
+    };
+    const onJump = (e, index) => {
+        // stop autoplay (if running)
+        setPlay(false);
+        // jump to next element if moving via keyboard (but skip if the event isn't from the keyboard)
+        if (!blurIfNotKeyboard(e) && hasKeyboardFocus && indicators) {
+            // helper
+            const updateFocus = (indicatorIndex) => {
+                var _a, _b;
+                (_b = (_a = indicators.children.item(indicatorIndex)) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
+            };
+            // determine next index (need to go backward if next is offset)
+            let nextIndex = funnel_core_1.ArrayUtils.circularIndex(indicators.children, index + 1);
+            if (nextIndex === activeIndex) {
+                nextIndex = funnel_core_1.ArrayUtils.circularIndex(indicators.children, index - 1);
+            }
+            // force wait for move if we conflict (probably only 2 items)
+            if (nextIndex === activeIndex) {
+                setTimeout(() => updateFocus(nextIndex), 300);
+            }
+            // or do it immediately
+            else {
+                updateFocus(nextIndex);
+            }
+        }
+        // update offset
+        setActiveIndex(index);
+    };
+    const onPrev = async (e) => {
+        // ensure only keyboard events trap focus
+        blurIfNotKeyboard(e);
+        // try to navigate backwards (might deffer)
+        await goPrev();
+    };
+    const onNext = async (e) => {
+        // ensure only keyboard events trap focus
+        blurIfNotKeyboard(e);
+        // try to navigate forwards (might deffer)
+        await goNext();
+    };
+    const onTogglePlay = (e) => {
+        // drop keyboard focus
+        blurIfNotKeyboard(e);
+        // toggle play
+        setPlay(!play);
+    };
+    // otherwise, render carousel
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, classnames_1.default)(className, 'Carousel-root outline-none', {
+            'Carousel-dragging': state === 'dragging',
+            'Carousel-animating': state === 'animating'
+        }), tabIndex: -1, "aria-roledescription": "carousel", children: [(0, jsx_runtime_1.jsxs)("div", { ref: pagerRef, className: (0, classnames_1.default)('Carousel-pager', {
+                    'invisible': !pager,
+                    'overflow-visible': disableClipping,
+                    'overflow-hidden': !disableClipping,
+                    'pointer-events-none': state !== 'ready' && state !== 'dragging'
+                }), onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), onPointerDown: () => setPlay(false), children: [(0, jsx_runtime_1.jsx)(react_1.motion.ol, { className: "Carousel-pages", style: { x: pagerTranslate }, drag: "x", dragMomentum: false, onDragStart: onDragStart, onDragEnd: onDragEnd, onDrag: onDrag, "aria-atomic": "false", "aria-live": canAutoplay && play && !interacting ? 'off' : 'polite', children: pages.map(({ id, order, page, index, active, virtual }) => (0, jsx_runtime_1.jsx)("li", Object.assign({ id: `${carouselId}-${id}`, className: (0, classnames_1.default)('Carousel-page', {
+                                'Carousel-pageActive': active,
+                                'Carousel-pagePrev': index === prevIndex,
+                                'Carousel-pageNext': index === nextIndex,
+                                'Carousel-pageDragActive': dragIndex !== undefined && dragIndex === index,
+                                'Carousel-pageDragPrev': dragIndex !== undefined && (dragIndex - 1) === index,
+                                'Carousel-pageDragNext': dragIndex !== undefined && (dragIndex + 1) === index,
+                                'Carousel-pageHidden': state !== 'animating' &&
+                                    ((!active && index !== prevIndex && index !== nextIndex && dragIndex === undefined)
+                                        || (dragIndex !== undefined && dragIndex !== index && (dragIndex - 1) !== index && (dragIndex + 1) !== index))
+                            }), style: { margin: `0 ${spacing}px`, order } }, (!virtual && {
+                            role: 'tabpanel',
+                            'aria-label': `${index + 1} of ${childCount}`,
+                            'aria-labelledby': `${carouselId}_${index}_ref`
+                        }), { children: page }), id)) }), (0, jsx_runtime_1.jsx)("div", { className: "Carousel-pagesAlt", children: children.map((page, index) => (0, jsx_runtime_1.jsx)("div", { className: "Carousel-page", children: page }, index)) })] }), (0, jsx_runtime_1.jsxs)("nav", { className: "Carousel-controls", children: [renderNavButton
+                        ?
+                            renderNavButton({
+                                type: 'prev',
+                                enabling: dragIndex === undefined
+                                    ? undefined
+                                    : infinite || dragIndex > 0,
+                                enabled: prevIndex !== undefined,
+                                props: {
+                                    className: 'Carousel-prev',
+                                    onClick: onPrev,
+                                    onPointerEnter: () => setInteracting(true),
+                                    onPointerLeave: () => setInteracting(false),
+                                    'aria-label': prevIndex === undefined ? 'No previous slide' : `Move to slide ${prevIndex + 1} of ${childCount}`,
+                                    'aria-disabled': prevIndex === undefined
+                                }
+                            })
+                        :
+                            (0, jsx_runtime_1.jsx)("button", { className: "Carousel-prev", disabled: prevIndex === undefined, onClick: onPrev, onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), "aria-label": prevIndex === undefined ? 'No previous slide' : `Move to slide ${prevIndex + 1} of ${childCount}`, "aria-disabled": prevIndex === undefined, children: "Prev" }), renderNavButton
+                        ?
+                            renderNavButton({
+                                type: 'next',
+                                enabling: dragIndex === undefined
+                                    ? undefined
+                                    : infinite || dragIndex < childCount - 1,
+                                enabled: nextIndex !== undefined,
+                                props: {
+                                    className: 'Carousel-next',
+                                    onClick: onNext,
+                                    onPointerEnter: () => setInteracting(true),
+                                    onPointerLeave: () => setInteracting(false),
+                                    'aria-label': nextIndex === undefined ? 'No next slide' : `Move to slide ${nextIndex + 1} of ${childCount}`,
+                                    'aria-disabled': nextIndex === undefined
+                                }
+                            })
+                        :
+                            (0, jsx_runtime_1.jsx)("button", { className: "Carousel-next", disabled: nextIndex === undefined, onClick: onNext, onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), "aria-label": nextIndex === undefined ? 'No next slide' : `Move to slide ${nextIndex + 1} of ${childCount}`, "aria-disabled": nextIndex === undefined, children: "Next" }), canAutoplay && infinite &&
+                        (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderPlayButton
+                                ?
+                                    renderPlayButton({
+                                        props: {
+                                            ref: playButtonRef,
+                                            className: 'Carousel-play',
+                                            onClick: onTogglePlay,
+                                            'aria-label': play ? 'Stop slide rotation' : 'Start slide rotation'
+                                        }
+                                    })
+                                :
+                                    (0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, className: "Carousel-play", onClick: onTogglePlay, "aria-label": play ? 'Stop slide rotation' : 'Start slide rotation', children: play ? 'Pause' : 'Play' }) })] }), (0, jsx_runtime_1.jsx)("nav", { className: "Carousel-indicatorsWrap", children: (0, jsx_runtime_1.jsx)("ol", { ref: indicatorsRef, className: "Carousel-indicators", onPointerEnter: () => setInteracting(true), onPointerLeave: () => setInteracting(false), role: "tablist", "aria-label": "Choose slide to display", children: children.map((_, index) => (0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)('Carousel-indicator', {
+                            'Carousel-indicatorActive': index === activeIndex
+                        }), children: renderIndicator
+                            ?
+                                renderIndicator({
+                                    index,
+                                    active: index === activeIndex,
+                                    activating: dragIndex === undefined
+                                        ? undefined
+                                        : index === dragIndex,
+                                    props: {
+                                        id: `${carouselId}_${index}_ref`,
+                                        className: 'Carousel-indicatorBtn',
+                                        onClick: e => onJump(e, index),
+                                        role: 'tab',
+                                        'aria-label': play ? 'Stop slide rotation' : 'Start slide rotation',
+                                        'aria-controls': `${carouselId}_${activeIndex}`,
+                                        'aria-selected': index === activeIndex
+                                    }
+                                })
+                            :
+                                (0, jsx_runtime_1.jsx)("button", { id: `${carouselId}_${index}_ref`, className: "Carousel-indicatorBtn", disabled: index === activeIndex, onClick: e => onJump(e, index), role: "tab", "aria-label": `Slide ${index + 1}`, "aria-controls": `${carouselId}_${activeIndex}`, "aria-selected": index === activeIndex, children: index + 1 }) }, index)) }) })] }));
+}
+function getCarouselSpecs({ spacing, infinite, children, activeIndex, pagerWidth }) {
+    // setup for pager with boundaries (bookended)
+    const childCount = children.length;
+    if (!infinite) {
+        const lastOffset = childCount - 1;
+        return {
+            pages: children.map((page, index) => ({
+                id: `${index}`,
+                page,
+                index,
+                order: index,
+                active: index === activeIndex,
+                virtual: false
+            })),
+            pagerTranslation: -(activeIndex * (pagerWidth + spacing * 2)) - spacing,
+            prevIndex: activeIndex > 0 ? activeIndex - 1 : undefined,
+            nextIndex: activeIndex < lastOffset ? activeIndex + 1 : undefined
+        };
+    }
+    // or infinite scroll, should add enough to have 5 if not enough elements provided
+    else {
+        // minimum children must be 5 (2 in front / behind) OR double up to make sure we have clean repeats on virtual elements
+        const pageCount = childCount < 5 ? Math.max(childCount * 2, 6) : 5;
+        // visible page is always in 2nd position
+        const activePagePosition = 2;
+        // render pages
+        return {
+            pages: funnel_core_1.ArrayUtils.series(pageCount - 1).map(pageIndex => {
+                // determine mapping (lead with previous 2 pages, so current is at the center)
+                const index = funnel_core_1.ArrayUtils.circularIndex(children, pageIndex);
+                const iteration = Math.floor(pageIndex / childCount);
+                const virtualIndex = funnel_core_1.ArrayUtils.circularIndex(pageCount, activePagePosition + pageIndex - activeIndex);
+                const virtual = pageIndex >= childCount;
+                // create page
+                return {
+                    id: `${index}${iteration > 0 ? `_${iteration}` : ''}`,
+                    page: children[index],
+                    index,
+                    order: virtualIndex,
+                    active: virtualIndex === activePagePosition,
+                    virtual
+                };
+            }),
+            pagerTranslation: -(pagerWidth * 2 + spacing * 5),
+            prevIndex: funnel_core_1.ArrayUtils.circularIndex(children, activeIndex - 1),
+            nextIndex: funnel_core_1.ArrayUtils.circularIndex(children, activeIndex + 1)
+        };
+    }
+}
+async function onAnimateTo({ target, childCount, offset, spacing, infinite, pagerWidth, pagerTranslate, specs, setState, setActiveIndex, setDragIndex }) {
+    // ignore if target is invalid
+    if (!infinite && ((target === 'prev' && offset === 0)
+        || (target === 'next' && offset >= childCount - 1))) {
+        return;
+    }
+    // determine positioning
+    const { pagerTranslation, prevIndex, nextIndex } = specs;
+    const spacingAdjustment = target === 'prev'
+        ? spacing * 2
+        : target === 'next'
+            ? -spacing * 2
+            : 0;
+    const translation = (target === 'current' ? 0 : target === 'prev' ? pagerWidth : -pagerWidth)
+        + pagerTranslation
+        + spacingAdjustment;
+    // track drag
+    setDragIndex(target === 'current'
+        ? offset
+        : target === 'prev'
+            ? prevIndex !== null && prevIndex !== void 0 ? prevIndex : offset
+            : nextIndex !== null && nextIndex !== void 0 ? nextIndex : offset);
+    // start animation
+    const controls = (0, react_1.animate)(pagerTranslate, translation);
+    // mark as animating
+    setState('animating');
+    // wait for animation to end
+    await controls
+        .then(() => {
+        // then switch up offset (if moved)
+        if (target !== 'current') {
+            // and reset position back to center (only if infinite)
+            if (infinite) {
+                pagerTranslate.set(pagerTranslation);
+            }
+            // switch offset (officially)
+            setActiveIndex(target === 'prev'
+                ? prevIndex !== null && prevIndex !== void 0 ? prevIndex : offset
+                : nextIndex !== null && nextIndex !== void 0 ? nextIndex : offset);
+        }
+    })
+        // mark ready after animation
+        .finally(() => {
+        // reset drag
+        setDragIndex(undefined);
+        // reset state
+        setState('ready');
+    });
+}

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

@@ -0,0 +1,19 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import React, { ReactNode } from 'react';
+import { HTMLElements } from '../../types';
+export declare function ClickObserver({ className, tag, trigger, disabled, children, onClickInside, onClickOutside }: ClickObserver.Props): React.ReactElement<{
+    className: string | undefined;
+    ref: React.RefObject<HTMLDivElement | null>;
+}, string | React.JSXElementConstructor<any>>;
+export declare namespace ClickObserver {
+    type Props = {
+        className?: string;
+        tag?: keyof HTMLElements;
+        trigger?: Trigger;
+        disabled?: boolean;
+        children?: ReactNode;
+        onClickInside?: Callback<MouseEvent>;
+        onClickOutside?: Callback<MouseEvent>;
+    };
+    type Trigger = Extract<keyof GlobalEventHandlersEventMap, 'click' | 'mousedown' | 'mouseup' | 'pointerdown' | 'pointerup'>;
+}

package/dist/client/interaction/ClickObserver.js

@@ -0,0 +1,76 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClickObserver = ClickObserver;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = __importStar(require("react"));
+// component
+function ClickObserver({ className, tag = 'div', trigger = 'click', disabled = false, children, onClickInside = funnel_core_1.Fn.NoOp, onClickOutside = funnel_core_1.Fn.NoOp }) {
+    // bind refs
+    const containerRef = (0, react_1.useRef)(null);
+    // lifecycle
+    (0, react_1.useEffect)(() => {
+        // skip if disabled
+        if (disabled) {
+            return;
+        }
+        // helper (needs to be a constant so we can unregister)
+        const onWindowClick = (e) => {
+            // ignore if container isn't bound (shouldn't happen)
+            const container = containerRef.current;
+            if (!container) {
+                return;
+            }
+            // handle inside click
+            if (container.contains(e.target)) {
+                onClickInside(e);
+            }
+            // or outside click
+            else {
+                onClickOutside(e);
+            }
+        };
+        // constants
+        const listenerOptions = { capture: true };
+        window.addEventListener(trigger, onWindowClick, listenerOptions);
+        // unbind listener on unmount
+        return () => window.removeEventListener(trigger, onWindowClick, listenerOptions);
+    }, [trigger, disabled, onClickInside, onClickOutside]);
+    // render
+    return react_1.default.createElement(tag, {
+        className,
+        ref: containerRef
+    }, children);
+}

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

@@ -0,0 +1,9 @@
+import type { Callback, PixelSize } from '@nascentdigital/funnel-core';
+import { HTMLAttributes } from 'react';
+export declare function InfiniteScroller({ children, offset, onLoadMore, ...containerProps }: InfiniteScroller.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace InfiniteScroller {
+    type Props = HTMLAttributes<HTMLDivElement> & {
+        onLoadMore: Callback.Void;
+        offset?: PixelSize;
+    };
+}

package/dist/client/interaction/InfiniteScroller.js

@@ -0,0 +1,47 @@
+"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.InfiniteScroller = InfiniteScroller;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// component
+function InfiniteScroller(_a) {
+    var { children, offset = '300px', onLoadMore } = _a, containerProps = __rest(_a, ["children", "offset", "onLoadMore"]);
+    // observer
+    const observer = (0, react_1.useRef)(null);
+    // setup observer with element at end of container
+    const endOfContainerRef = (0, react_1.useCallback)((endOfContainerNode) => {
+        // disconnect old observer if any
+        if (observer.current) {
+            observer.current.disconnect();
+        }
+        // if there is a node, observe it
+        if (endOfContainerNode) {
+            // create new observer
+            observer.current = new IntersectionObserver(entries => {
+                if (entries[0].isIntersecting) {
+                    onLoadMore();
+                }
+            }, {
+                root: endOfContainerNode.parentElement,
+                // add bottom padding for buffer (call onLoadMore before end is fully in view)
+                rootMargin: `0px 0px ${offset} 0px`,
+                threshold: 0
+            });
+            // observe end of container node
+            observer.current.observe(endOfContainerNode);
+        }
+    }, [offset, onLoadMore]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, containerProps, { children: [children, (0, jsx_runtime_1.jsx)("div", { ref: endOfContainerRef })] })));
+}

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

@@ -0,0 +1,14 @@
+import { Callback } from '@nascentdigital/funnel-core';
+export declare function Loader({ className, state, title, action: actionLabel, triggerOffset, manual, onLoad }: Loader.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Loader {
+    type State = 'ready' | 'loading' | 'error' | 'complete';
+    type Props = {
+        className?: string;
+        state?: State;
+        title?: string;
+        action?: string;
+        manual?: boolean;
+        triggerOffset?: number;
+        onLoad?: Callback.Void;
+    };
+}