@nascentdigital/funnel-ui 4.4.18

package/dist/client/hooks/useResizeObserver.js

@@ -0,0 +1,179 @@
+'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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizeObserver = useResizeObserver;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const React = __importStar(require("react"));
+const react_1 = require("react");
+// hook
+function useResizeObserver(target, callback) {
+    // bind observer (no-op on server-side)
+    const resizeObserver = SharedResizeObserver.instance;
+    const storedCallback = React.useRef(callback);
+    // ensure we have the latest callback
+    storedCallback.current = callback;
+    // track updates
+    (0, react_1.useLayoutEffect)(() => {
+        // skip if there's no observer
+        if (!resizeObserver) {
+            return;
+        }
+        // skip if the element doesn't exist
+        const targetElement = target && 'current' in target
+            ? target.current
+            : target;
+        if (!targetElement) {
+            return;
+        }
+        // create callback
+        let didUnsubscribe = false;
+        function cb(entry, observer) {
+            // bail if already unbound
+            if (didUnsubscribe) {
+                return;
+            }
+            // invoke callback
+            storedCallback.current(entry, observer);
+        }
+        // mount observer
+        resizeObserver.subscribe(targetElement, cb);
+        // unmount observer
+        return () => {
+            didUnsubscribe = true;
+            resizeObserver.unsubscribe(targetElement, cb);
+        };
+    }, [target, resizeObserver, storedCallback]);
+    // return observer
+    return resizeObserver.observer;
+}
+class SharedResizeObserver {
+    static get instance() {
+        // create if required
+        if (!SharedResizeObserver._instance) {
+            SharedResizeObserver._instance = new SharedResizeObserver();
+        }
+        // throw if we don't have the instance
+        if (!SharedResizeObserver._instance) {
+            throw new funnel_core_1.IllegalStateError('Unable to instantiate SharedResizeObserver');
+        }
+        // return instance
+        return SharedResizeObserver._instance;
+    }
+    constructor() {
+        // bind callback
+        this.onResize = this.onResize.bind(this);
+        // initialize instance
+        this._observer = typeof window === 'undefined'
+            ? undefined
+            : new window.ResizeObserver(this.onResize);
+        this._callbacks = new Map();
+        this._callbackPending = false;
+        this._entries = [];
+    }
+    get observer() {
+        return this._observer;
+    }
+    subscribe(target, callback) {
+        var _a;
+        // skip if there's no observer
+        const observer = this._observer;
+        if (!observer) {
+            return;
+        }
+        // track target
+        observer.observe(target);
+        // get callback (or create new array)
+        const cbs = (_a = this._callbacks.get(target)) !== null && _a !== void 0 ? _a : [];
+        // add callback to list
+        cbs.push(callback);
+        // update array
+        this._callbacks.set(target, cbs);
+    }
+    unsubscribe(target, callback) {
+        var _a;
+        // skip if there's no observer
+        const observer = this._observer;
+        if (!observer) {
+            return;
+        }
+        // get callbacks and teardown if on last one
+        const cbs = (_a = this._callbacks.get(target)) !== null && _a !== void 0 ? _a : [];
+        if (cbs.length === 1) {
+            observer.unobserve(target);
+            this._callbacks.delete(target);
+        }
+        // or just remove one
+        else {
+            // find index of callback (remove it found
+            const cbIndex = cbs.indexOf(callback);
+            if (cbIndex >= 0) {
+                cbs.splice(cbIndex, 1);
+            }
+            // reset callback
+            this._callbacks.set(target, cbs);
+        }
+    }
+    onResize(entries, observer) {
+        // concat entries
+        this._entries = this._entries.concat(entries);
+        // start callback on animation frame (if not already requested)
+        if (!this._callbackPending) {
+            window.requestAnimationFrame(() => {
+                var _a;
+                // raise callbacks that match request (avoid duplicates by tracking triggered)
+                const triggered = new Set();
+                for (let i = 0; i < this._entries.length; ++i) {
+                    // skip if triggered
+                    const entry = this._entries[i];
+                    const target = entry.target;
+                    if (triggered.has(target)) {
+                        continue;
+                    }
+                    // or track callback
+                    triggered.add(target);
+                    // and then raise all callbacks (if any)
+                    (_a = this._callbacks.get(target)) === null || _a === void 0 ? void 0 : _a.forEach(callback => callback(entry, observer));
+                }
+                // clear entries
+                this._entries = [];
+                // track callback completion
+                this._callbackPending = false;
+            });
+        }
+        // track callback request
+        this._callbackPending = true;
+    }
+}

package/dist/client/hooks/useResponsiveValue.d.ts

@@ -0,0 +1,2 @@
+import { ResponsiveValue } from '@nascentdigital/funnel-core';
+export declare function useResponsiveValue<T>(value: ResponsiveValue<T>): T | undefined;

package/dist/client/hooks/useResponsiveValue.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveValue = useResponsiveValue;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const breakpoint_1 = require("./breakpoint");
+// hook
+function useResponsiveValue(value) {
+    // get current breakpoint
+    const breakpoint = (0, breakpoint_1.useCurrentBreakpoint)();
+    // exit it if no current breakpoint
+    if (!breakpoint) {
+        return undefined;
+    }
+    // resolve value for current breakpoint
+    return funnel_core_1.ResponsiveValue.resolve(value, breakpoint);
+}

package/dist/client/hooks/useRouter.d.ts

@@ -0,0 +1,20 @@
+import { Locale } from '@nascentdigital/funnel-core';
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import { ReadonlyURLSearchParams } from 'next/navigation';
+export declare function useRouter(): SiteRouter;
+export declare class SiteRouter {
+    private readonly nextRouter;
+    readonly pathname: string;
+    readonly queryParams: ReadonlyURLSearchParams;
+    readonly locale: Locale;
+    constructor(nextRouter: AppRouterInstance, pathname: string, queryParams: ReadonlyURLSearchParams, locale: Locale);
+    goBack(): void;
+    goForward(): void;
+    navigateTo(path: string): void;
+    setLocale({ locale }: SiteRouter.setLocaleArgs): void;
+}
+export declare namespace SiteRouter {
+    type setLocaleArgs = {
+        locale: Locale.Params;
+    };
+}

package/dist/client/hooks/useRouter.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteRouter = void 0;
+exports.useRouter = useRouter;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const navigation_1 = require("next/navigation");
+const react_1 = require("react");
+const usePathname_1 = require("./usePathname");
+// hook
+function useRouter() {
+    // bind hooks
+    const nextRouter = (0, navigation_1.useRouter)();
+    const pathname = (0, usePathname_1.usePathname)();
+    const queryParams = (0, navigation_1.useSearchParams)();
+    const { language, region } = (0, navigation_1.useParams)();
+    const locale = { language, region };
+    const router = (0, react_1.useMemo)(() => new SiteRouter(nextRouter, pathname, queryParams, locale), [nextRouter, pathname, queryParams, locale]);
+    // return router
+    return router;
+}
+// local router
+class SiteRouter {
+    constructor(nextRouter, pathname, queryParams, locale) {
+        this.nextRouter = nextRouter;
+        this.pathname = pathname;
+        this.queryParams = queryParams;
+        this.locale = locale;
+    }
+    goBack() {
+        this.nextRouter.back();
+    }
+    goForward() {
+        this.nextRouter.forward();
+    }
+    navigateTo(path) {
+        this.nextRouter.push(path, {});
+    }
+    setLocale({ locale }) {
+        const config = funnel_core_1.AppConfig.brandConfig().regionalization;
+        const baseUrl = new URL(window.location.href);
+        // get path
+        const { pagePath } = funnel_core_1.Regionalization.parseBrowserUrl(baseUrl, config, locale);
+        // get browser url
+        const url = funnel_core_1.Regionalization.serverUrlFor(locale, pagePath, baseUrl);
+        // navigate
+        window.location.href = url.href;
+    }
+}
+exports.SiteRouter = SiteRouter;

package/dist/client/hooks/useSafeLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useSafeLayoutEffect: typeof useEffect;

package/dist/client/hooks/useSafeLayoutEffect.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSafeLayoutEffect = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+// provide appropriate implementations (layout effects don't work on server-side)
+exports.useSafeLayoutEffect = funnel_core_1.Browser.available
+    ? react_1.useLayoutEffect
+    : react_1.useEffect;

package/dist/client/hooks/useTouch.d.ts

@@ -0,0 +1,2 @@
+import { Callback } from '@nascentdigital/funnel-core';
+export declare function useTouch(): Callback.Void;

package/dist/client/hooks/useTouch.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTouch = useTouch;
+const react_1 = require("react");
+// hook
+function useTouch() {
+    // bind state, memoize touch, and return it
+    const [_, setCount] = (0, react_1.useState)(0);
+    return (0, react_1.useCallback)(() => setCount(count => count + 1), []);
+}

package/dist/client/hooks/useViewportSize.d.ts

@@ -0,0 +1,7 @@
+import { Size } from '@nascentdigital/funnel-core';
+export declare function useViewportSize(options?: useViewportSize.Options): Size;
+export declare namespace useViewportSize {
+    type Options = {
+        debounceTime?: number;
+    };
+}

package/dist/client/hooks/useViewportSize.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useViewportSize = useViewportSize;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const rxjs_1 = require("rxjs");
+const useSafeLayoutEffect_1 = require("./useSafeLayoutEffect");
+const react_1 = require("react");
+const operators_1 = require("rxjs/operators");
+// hook
+function useViewportSize(options = {}) {
+    // bind state + props
+    const viewportObserver = SharedViewportObserver.instance;
+    const { debounceTime: updateDelay } = options;
+    const [size, setSize] = (0, react_1.useState)(viewportObserver.viewportSize);
+    // lifecycle
+    (0, useSafeLayoutEffect_1.useSafeLayoutEffect)(() => {
+        // bind observer
+        let observable = viewportObserver.viewportSize$;
+        if (updateDelay) {
+            observable = observable.pipe((0, operators_1.debounceTime)(updateDelay));
+        }
+        // listen for window changes
+        const subscription = observable.subscribe(newSize => setSize(newSize));
+        // cleanup
+        return () => subscription.unsubscribe();
+    }, [viewportObserver, updateDelay]);
+    // return layout
+    return size;
+}
+// class
+class SharedViewportObserver {
+    static get instance() {
+        // create if required
+        if (!SharedViewportObserver._instance) {
+            SharedViewportObserver._instance = new SharedViewportObserver();
+        }
+        // throw if we don't have the instance
+        if (!SharedViewportObserver._instance) {
+            throw new funnel_core_1.IllegalStateError('Unable to instantiate SharedViewportObserver');
+        }
+        // return instance
+        return SharedViewportObserver._instance;
+    }
+    constructor() {
+        // initialize instance variables
+        this._viewportSize$ = new rxjs_1.Subject();
+        // bind methods
+        this.onWindowResize = this.onWindowResize.bind(this);
+        // bind listener if in the browser
+        if (funnel_core_1.Browser.available) {
+            window.addEventListener('resize', this.onWindowResize);
+        }
+    }
+    get viewportSize() {
+        return funnel_core_1.Browser.available
+            ? { width: window.innerWidth, height: window.innerHeight }
+            : { width: 0, height: 0 };
+    }
+    get viewportSize$() {
+        return this._viewportSize$
+            .asObservable();
+    }
+    onWindowResize() {
+        this._viewportSize$.next(this.viewportSize);
+    }
+}

package/dist/client/hooks/useWindowScrolled.d.ts

@@ -0,0 +1,8 @@
+import { Duration } from '@nascentdigital/funnel-core';
+export declare function useWindowScrolled({ debounce, throttle }?: useWindowScrolled.Options): boolean;
+export declare namespace useWindowScrolled {
+    type Options = {
+        debounce?: Duration;
+        throttle?: Duration;
+    };
+}

package/dist/client/hooks/useWindowScrolled.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowScrolled = useWindowScrolled;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const useTouch_1 = require("./useTouch");
+// hook
+function useWindowScrolled({ debounce, throttle } = {}) {
+    // bind subject
+    const touch = (0, useTouch_1.useTouch)();
+    const scrolled$ = (0, react_1.useMemo)(() => new rxjs_1.Subject(), []);
+    const scrolledRef = (0, react_1.useRef)(false);
+    const scrolled = scrolledRef.current;
+    // reset ref on every render (doesn't affect current value above)
+    if (scrolled) {
+        scrolledRef.current = false;
+    }
+    // listener for window scrolling
+    (0, react_1.useEffect)(() => {
+        // handle scroll
+        const onScroll = () => {
+            scrolled$.next(true);
+        };
+        window.addEventListener('scroll', onScroll, true);
+        // unregister on unmount
+        return () => window.removeEventListener('scroll', onScroll);
+    }, [scrolled$]);
+    // debounce scrolling
+    (0, react_1.useEffect)(() => {
+        // get scroll subject and mutate if we are debouncing
+        let listener = scrolled$.asObservable();
+        if (debounce) {
+            listener = listener.pipe((0, rxjs_1.debounceTime)(funnel_core_1.Duration.toMilliseconds(debounce)));
+        }
+        // and/or mutate if we're throttling
+        if (throttle) {
+            listener = listener.pipe((0, rxjs_1.throttleTime)(funnel_core_1.Duration.toMilliseconds(throttle)));
+        }
+        // start listening
+        const subscription = listener.subscribe(() => {
+            // set value (like a latch)
+            scrolledRef.current = true;
+            // update
+            touch();
+        });
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [touch, scrolled$, debounce, throttle]);
+    // return scrolled status
+    return scrolled;
+}

package/dist/client/index.d.ts

@@ -0,0 +1,9 @@
+export * from './app';
+export * from './atomic';
+export * from './fields';
+export * from './forms';
+export * from './hooks';
+export * from './interaction';
+export * from './layouts';
+export * from './transitions';
+export * from './utils';

package/dist/client/index.js

@@ -0,0 +1,25 @@
+"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("./app"), exports);
+__exportStar(require("./atomic"), exports);
+__exportStar(require("./fields"), exports);
+__exportStar(require("./forms"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./interaction"), exports);
+__exportStar(require("./layouts"), exports);
+__exportStar(require("./transitions"), exports);
+__exportStar(require("./utils"), exports);

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

@@ -0,0 +1,48 @@
+import { Callback, Duration, Transform } from '@nascentdigital/funnel-core';
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+export declare function Carousel({ className, spacing, infinite, autoplay, autoplayInterval: autoplayIntervalRaw, disableClipping, renderIndicator, renderNavButton, renderPlayButton, onPageDrag, onPageChange, children }: Carousel.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Carousel {
+    export type State = 'initializing' | 'disabled' | 'ready' | 'dragging' | 'animating';
+    export type Props = {
+        className?: string;
+        spacing?: number;
+        infinite?: boolean;
+        autoplay?: boolean;
+        autoplayInterval?: Duration;
+        disableClipping?: boolean;
+        renderIndicator?: Transform<RenderIndicatorArgs, ReactNode>;
+        renderNavButton?: Transform<RenderNavButtonArgs, ReactNode>;
+        renderPlayButton?: Transform<RenderPlayButtonArgs, ReactNode>;
+        onPageDrag?: Callback<number | undefined>;
+        onPageChange?: Callback<number>;
+        children?: ReactElement[];
+    };
+    export type RenderIndicatorArgs = {
+        index: number;
+        active: boolean;
+        activating: boolean | undefined;
+        props: ButtonProps;
+    };
+    type ButtonProps = Partial<Omit<HTMLAttributes<HTMLButtonElement>, 'children'>> & {
+        ref?: Callback<HTMLButtonElement | null>;
+    };
+    export type RenderNavButtonArgs = RenderPrevButtonArgs | RenderNextButtonArgs;
+    type RenderNavButtonBaseArgs = {
+        enabling?: boolean;
+        enabled: boolean;
+        props: ButtonProps;
+    };
+    export type RenderPrevButtonArgs = RenderNavButtonBaseArgs & {
+        type: 'prev';
+        prevIndex?: number;
+    };
+    export type RenderNextButtonArgs = RenderNavButtonBaseArgs & {
+        type: 'next';
+        nextIndex?: number;
+    };
+    export type RenderPlayButtonArgs = {
+        props: ButtonProps;
+    };
+    export type CommonProps = Pick<Props, 'spacing' | 'infinite' | 'autoplay' | 'disableClipping'>;
+    export {};
+}