@nascentdigital/funnel-ui 4.4.18

package/dist/client/interaction/paginator/Paginator.js

@@ -0,0 +1,67 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Paginator = Paginator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Loader_1 = require("../Loader");
+// component
+function Paginator({ manualLoad = false, loadOffset, query, pageSize, pageOffset, queryId, onQuery, ItemElement, emptyElement }) {
+    // bind state
+    const [wasReset, setReset] = (0, react_1.useState)(false);
+    const [state, setState] = (0, react_1.useState)('ready');
+    const [items, setItems] = (0, react_1.useState)([]);
+    const [page, setPage] = (0, react_1.useState)(pageOffset !== null && pageOffset !== void 0 ? pageOffset : 1);
+    const latestQueryId = (0, react_1.useRef)(queryId);
+    // helpers
+    const onLoadMore = (0, react_1.useCallback)(async () => {
+        // try to load next page
+        try {
+            // update state
+            setState('loading');
+            // load next page
+            const { items: newItems, hasMore } = await onQuery(Object.assign(Object.assign({}, query), { pageSize, page }));
+            // update state
+            setState(hasMore ? 'ready' : 'complete');
+            setPage(page => page + 1);
+            setItems(items => ([...items, ...newItems]));
+        }
+        // handle error
+        catch (e) {
+            console.error('[Paginator] failed to fetch items', e);
+            // change state to error
+            setState('error');
+        }
+    }, [onQuery, page, pageSize, query]);
+    // reset state if new query
+    (0, react_1.useEffect)(() => {
+        // reset if query id is different
+        if (latestQueryId.current !== queryId) {
+            console.debug('[Paginator] resetting state');
+            // reset state
+            setState('ready');
+            setItems([]);
+            setPage(pageOffset !== null && pageOffset !== void 0 ? pageOffset : 1);
+            // signal reset
+            setReset(true);
+            // update latest query id
+            latestQueryId.current = queryId;
+        }
+    }, [queryId, pageOffset, state]);
+    // load more on reset
+    (0, react_1.useEffect)(() => {
+        // only load on reset
+        if (wasReset) {
+            setReset(false);
+            onLoadMore().catch(e => console.error('[Paginator] failed to fetch after reset', e));
+        }
+    }, [onLoadMore, wasReset]);
+    console.debug('[Paginator] rendering with state', state);
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [items.length === 0 && state === 'complete' && emptyElement, items.map((item, index) => (0, jsx_runtime_1.jsx)(ItemElement, { item: item }, index)), state !== 'complete' &&
+                (0, jsx_runtime_1.jsx)(Loader_1.Loader, { className: "nd-Paginator-loader", state: state, action: state === 'error'
+                        ? 'Retry'
+                        : state === 'ready'
+                            ? 'Load more'
+                            : 'Loading...', triggerOffset: loadOffset, manual: manualLoad, onLoad: onLoadMore })] }));
+}

package/dist/client/interaction/paginator/index.d.ts

@@ -0,0 +1 @@
+export * from './Paginator';

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Paginator"), exports);

package/dist/client/layouts/MasonaryLayout.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactElement } from 'react';
+export declare function MasonryLayout({ className, children, ...props }: MasonryLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace MasonryLayout {
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+        children: ReadonlyArray<ReactElement>;
+    };
+}

package/dist/client/layouts/MasonaryLayout.js

@@ -0,0 +1,53 @@
+'use client';
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MasonryLayout = MasonryLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../hooks");
+// component
+function MasonryLayout(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    // bind current breakpoint
+    const breakpoint = (0, hooks_1.useCurrentBreakpoint)();
+    const columns = createColumns({ breakpoint, children });
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, classnames_1.default)(className, 'nd-MasonryLayout'), children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)("div", { className: "nd-MasonryLayout-column", children: column }, `column_${index}`))) })));
+}
+function createColumns({ breakpoint, children }) {
+    // determine number of columns
+    let columns;
+    switch (breakpoint) {
+        case 'xs':
+            columns = [[]];
+            break;
+        case 'sm':
+            columns = [[], []];
+            break;
+        default:
+            columns = [[], [], []];
+            break;
+    }
+    // layout children into columns
+    const columnCount = columns.length;
+    children.forEach((child, index) => {
+        var _a;
+        columns[index % columnCount].push((0, jsx_runtime_1.jsx)("div", { className: "nd-MasonryLayout-brick", children: child }, (_a = child.key) !== null && _a !== void 0 ? _a : index));
+    });
+    // return columns
+    return columns;
+}

package/dist/client/layouts/index.d.ts

@@ -0,0 +1 @@
+export * from './MasonaryLayout';

package/dist/client/layouts/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MasonaryLayout"), exports);

package/dist/client/refs.d.ts

@@ -0,0 +1,2 @@
+import { AppPreview, Carousel, EmbeddedVideo, Form, LazyVideo, MasonryLayout, Paginator } from './index';
+export { AppPreview, Carousel, EmbeddedVideo, Form, LazyVideo, MasonryLayout, Paginator };

package/dist/client/refs.js

@@ -0,0 +1,13 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Paginator = exports.MasonryLayout = exports.LazyVideo = exports.Form = exports.EmbeddedVideo = exports.Carousel = exports.AppPreview = void 0;
+// imports
+const index_1 = require("./index");
+Object.defineProperty(exports, "AppPreview", { enumerable: true, get: function () { return index_1.AppPreview; } });
+Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return index_1.Carousel; } });
+Object.defineProperty(exports, "EmbeddedVideo", { enumerable: true, get: function () { return index_1.EmbeddedVideo; } });
+Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return index_1.Form; } });
+Object.defineProperty(exports, "LazyVideo", { enumerable: true, get: function () { return index_1.LazyVideo; } });
+Object.defineProperty(exports, "MasonryLayout", { enumerable: true, get: function () { return index_1.MasonryLayout; } });
+Object.defineProperty(exports, "Paginator", { enumerable: true, get: function () { return index_1.Paginator; } });

package/dist/client/transitions/Revelator.d.ts

@@ -0,0 +1,42 @@
+import { Insets } from '@nascentdigital/funnel-core';
+/**
+ * A headless client component that observes content and applies transition effects when they are within viewport.
+ *
+ * @param targetSelector - the selector matching target on which the `revealClass` is applied (default is `.reveal`).
+ * @param revealClass - the class that is added to a target element when it appears in the viewport (default is `revealed`).
+ * @param insets - a dead zone within the viewport that must be passed before an item is revealed (default is `-100px 0px`).
+ * @param threshold - The amount/percentage of the target that must be within the "live" viewport before being revealed (default is `some`).
+ */
+export declare function Revelator({ targetSelector, revealClass, insets: insetsRaw, threshold }: Revelator.Props): import("react/jsx-runtime").JSX.Element[];
+export declare namespace Revelator {
+    type Props = {
+        /**
+         * The selector matching target on which the `revealClass` is applied (default is `.reveal`).
+         */
+        targetSelector?: string;
+        /**
+         * The CSS classname that is added to a target element when it appears in the viewport (default is `revealed`).
+         */
+        revealClass?: string;
+        /**
+         * A dead zone within the viewport that must be passed before an item is revealed (default is -100px from top/bottom).
+         */
+        insets?: Partial<Insets>;
+        /**
+         * The amount/percentage of the target that must be within the "live" viewport before being revealed (default is `some`).
+         */
+        threshold?: Threshold;
+    };
+    type Threshold = 'all' | 'some' | number;
+}
+export declare function RevelatorTrigger({ id, target, revealClass, once, threshold, insets }: RevelatorTrigger.Props): null;
+export declare namespace RevelatorTrigger {
+    type Props = {
+        id: string;
+        target: HTMLElement;
+        revealClass: string;
+        once: boolean;
+        insets: Insets;
+        threshold: Revelator.Threshold;
+    };
+}

package/dist/client/transitions/Revelator.js

@@ -0,0 +1,60 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Revelator = Revelator;
+exports.RevelatorTrigger = RevelatorTrigger;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const hooks_1 = require("../hooks");
+/**
+ * A headless client component that observes content and applies transition effects when they are within viewport.
+ *
+ * @param targetSelector - the selector matching target on which the `revealClass` is applied (default is `.reveal`).
+ * @param revealClass - the class that is added to a target element when it appears in the viewport (default is `revealed`).
+ * @param insets - a dead zone within the viewport that must be passed before an item is revealed (default is `-100px 0px`).
+ * @param threshold - The amount/percentage of the target that must be within the "live" viewport before being revealed (default is `some`).
+ */
+function Revelator({ targetSelector = '.reveal', revealClass = 'revealed', insets: insetsRaw = {}, threshold = 'some' }) {
+    // track targets
+    const matches = (0, hooks_1.useFindElements)(targetSelector);
+    const insets = Object.assign({ top: -100, bottom: -100, left: 0, right: 0 }, insetsRaw);
+    // render triggers (if any)
+    return matches.map(({ id, element }) => (0, jsx_runtime_1.jsx)(RevelatorTrigger, { id: id, target: element, revealClass: revealClass, insets: insets, threshold: threshold, once: true }, id));
+}
+// helper
+function RevelatorTrigger({ id, target, revealClass, once, threshold, insets }) {
+    // bind when in view
+    const targetRef = (0, react_2.useRef)(target);
+    const inView = (0, react_1.useInView)(targetRef, {
+        margin: funnel_core_1.Insets.asText(insets),
+        amount: threshold,
+        once
+    });
+    const initializedRef = (0, react_2.useRef)(false);
+    // animate on entry
+    (0, react_2.useLayoutEffect)(() => {
+        // use DOM to calculate for initial render (avoids false negatives)
+        let revealed = inView;
+        if (!initializedRef.current) {
+            // mark as initialized
+            initializedRef.current = true;
+            // TODO: add insets
+            // check client is in viewport
+            const elementRect = funnel_core_1.Rect.fromRect(target.getBoundingClientRect());
+            const viewportRect = new funnel_core_1.Rect(0, 0, window.innerWidth || document.documentElement.clientWidth, window.innerHeight || document.documentElement.clientHeight);
+            revealed = viewportRect.overlaps(elementRect);
+        }
+        // add class
+        if (revealed) {
+            target.classList.add(revealClass);
+        }
+        // or remove it if not once
+        else if (!once) {
+            target.classList.remove(revealClass);
+        }
+    }, [target, inView, revealClass, once]);
+    // render
+    return null;
+}

package/dist/client/transitions/SideScroll.d.ts

@@ -0,0 +1,14 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { ReactNode, RefObject } from 'react';
+export declare function SideScroll({ scrollerRef, className, pageTrigger, onPageChangeAction, onScrollingChangeAction, children }: SideScroll.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace SideScroll {
+    type Props = {
+        className?: string;
+        scrollerRef?: RefObject<HTMLElement | null>;
+        pageTrigger?: PageTrigger;
+        onPageChangeAction?: Callback<number>;
+        onScrollingChangeAction?: Callback<boolean>;
+        children: ReactNode[];
+    };
+    type PageTrigger = 'start' | 'center' | 'end';
+}

package/dist/client/transitions/SideScroll.js

@@ -0,0 +1,51 @@
+'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.SideScroll = SideScroll;
+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");
+// component
+function SideScroll({ scrollerRef, className, pageTrigger = 'center', onPageChangeAction = funnel_core_1.Fn.NoOp, onScrollingChangeAction = funnel_core_1.Fn.NoOp, children }) {
+    // bind props + hooks
+    const childCount = react_2.Children.count(children);
+    const ref = (0, react_2.useRef)(null);
+    const { scrollYProgress, scrollY } = (0, react_1.useScroll)({ container: scrollerRef, target: ref });
+    const x = (0, react_1.useTransform)(scrollYProgress, [0, 1], ['0%', `-${(childCount * 100) - 100}%`]);
+    const page = (0, react_1.useTransform)(scrollYProgress, progress => {
+        switch (pageTrigger) {
+            case 'start':
+                return Math.ceil(progress * (childCount - 1));
+            case 'end':
+                return Math.floor(progress * (childCount - 1));
+            default:
+                return Math.round(progress * (childCount - 1));
+        }
+    });
+    const scrolling = (0, react_1.useTransform)(scrollYProgress, progress => progress > 0 && progress < 1);
+    // bind initial changes
+    (0, react_2.useEffect)(() => {
+        onPageChangeAction(page.get());
+        onScrollingChangeAction(scrolling.get());
+    }, [page, onPageChangeAction, scrolling, onScrollingChangeAction]);
+    // track changes
+    (0, react_1.useMotionValueEvent)(page, 'change', update => {
+        onPageChangeAction(update);
+    });
+    (0, react_1.useMotionValueEvent)(scrolling, 'change', update => {
+        onScrollingChangeAction(update);
+    });
+    // render simple wrapper if there's less than 2 children
+    if (childCount < 2) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, children: children }));
+    }
+    // or render side scrolling container
+    else {
+        return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { ref: ref, className: (0, classnames_1.default)(className, ''), style: { height: `${childCount * 100}lvh` }, children: (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)('max-h-lvh h-lvh sticky top-0 flex overflow-visible', '[&>*]:h-lvh [&>*]:min-h-lvh [&>*]:w-full [&>*]:min-w-full'), style: { x }, children: children }) }));
+    }
+}

package/dist/client/transitions/StyleInViewport.d.ts

@@ -0,0 +1,20 @@
+import React, { HTMLElementType, ReactNode, RefObject } from 'react';
+import { useInViewport } from '../hooks';
+export declare function StyleInViewport({ scrollerRef, as, className, inClassName, outClassName, once, threshold, padding, children }: StyleInViewport.Props): React.DetailedReactHTMLElement<{
+    id: string;
+    ref: React.RefObject<HTMLDivElement | null>;
+    className: string;
+}, HTMLDivElement>;
+export declare namespace StyleInViewport {
+    type Props = {
+        scrollerRef?: RefObject<HTMLElement | null>;
+        as?: HTMLElementType;
+        className?: string;
+        inClassName?: string;
+        outClassName?: string;
+        children: ReactNode;
+        once?: boolean;
+        threshold?: useInViewport.Threshold;
+        padding?: useInViewport.Padding;
+    };
+}

package/dist/client/transitions/StyleInViewport.js

@@ -0,0 +1,66 @@
+'use client';
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleInViewport = StyleInViewport;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../hooks");
+// component
+function StyleInViewport({ scrollerRef, as = 'div', className, inClassName = '', outClassName = '', once = false, threshold = 'some', padding, children }) {
+    // bind hooks
+    const containerId = (0, react_1.useId)();
+    const containerRef = (0, react_1.useRef)(null);
+    const [visible] = (0, hooks_1.useInViewport)({
+        scrollerRef,
+        targetRef: containerRef,
+        targetId: containerId,
+        once,
+        threshold,
+        padding
+    });
+    // render
+    return react_1.default.createElement(as, {
+        id: containerId,
+        ref: containerRef,
+        className: (0, classnames_1.default)(className, {
+            [inClassName]: visible,
+            [outClassName]: !visible
+        })
+    }, children);
+}