@nascentdigital/funnel-ui 4.4.18

package/dist/client/interaction/focus/LinkedList.d.ts

@@ -0,0 +1,18 @@
+import { Transform } from '@nascentdigital/funnel-core';
+export declare class SortedLinkedList<T extends SortedLinkedList.Node<T>> {
+    constructor(list?: SortedLinkedList<T>);
+    private _head?;
+    get head(): T | undefined;
+    private _tail?;
+    get tail(): T | undefined;
+    find(matches: Transform<T, boolean>): T | undefined;
+    insert(node: T): void;
+    remove(node: T): void;
+}
+export declare namespace SortedLinkedList {
+    interface Node<T> {
+        prev?: Node<T>;
+        next?: Node<T>;
+        compareTo(that: Node<T>): number;
+    }
+}

package/dist/client/interaction/focus/LinkedList.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortedLinkedList = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+// class
+class SortedLinkedList {
+    constructor(list) {
+        // initialize instance variables
+        this._head = list === null || list === void 0 ? void 0 : list._head;
+        this._tail = list === null || list === void 0 ? void 0 : list._tail;
+    }
+    get head() {
+        return this._head;
+    }
+    get tail() {
+        return this._tail;
+    }
+    find(matches) {
+        // find the closest match
+        let node = this._head;
+        while (node && !matches(node)) {
+            node = node.next;
+        }
+        // return result
+        return node;
+    }
+    insert(node) {
+        // blow up if node is already connected
+        if (node.prev || node.next) {
+            throw new funnel_core_1.InvalidOperationError('Cannot connect node that is already bound to a list - call remove() first');
+        }
+        // find insertion target (node that comes AFTER the new node)
+        const { _head, _tail } = this;
+        let target = _head;
+        while (target && node.compareTo(target) > 0) {
+            target = target.next;
+        }
+        // handle case if we're at an extremity
+        if (!target) {
+            // make root if there's no head
+            if (!_head) {
+                this._head = node;
+                this._tail = node;
+            }
+            // or make the new tail
+            else if (_tail) {
+                _tail.next = node;
+                node.prev = _tail;
+                this._tail = node;
+            }
+            // or fail if the list is broken
+            else {
+                throw new funnel_core_1.IllegalStateError('[LinkedList.ts] list is broken');
+            }
+        }
+        // add before the first node if this is the new root
+        else if (!target.prev) {
+            target.prev = node;
+            node.next = target;
+            this._head = node;
+        }
+        // or add in between the list
+        else {
+            target.prev.next = node;
+            node.prev = target.prev;
+            target.prev = node;
+            node.next = target;
+        }
+    }
+    remove(node) {
+        var _a, _b;
+        const { _head, _tail } = this;
+        // blow up if the list is empty
+        if (!_head || !_tail) {
+            throw new funnel_core_1.InvalidOperationError('Cannot delete node from an empty list - call insert() first');
+        }
+        // handle if there is only one item in the list
+        if (_head === _tail) {
+            if (node === _head) {
+                delete this._head;
+                delete this._tail;
+            }
+            return;
+        }
+        // find deletion target
+        let target = this._head;
+        // traverse the list
+        while (target) {
+            if (target === node) {
+                break;
+            }
+            target = target.next;
+        }
+        if (!target) {
+            console.warn('[LinkedList]: Unable to find the node');
+            return;
+        }
+        // handle case if we're at an extremity
+        if (target === _head) {
+            this._head = (_a = this.head) === null || _a === void 0 ? void 0 : _a.next;
+            // if head is a node set the previous to undefined
+            if (this._head) {
+                delete this._head.prev;
+            }
+            return;
+        }
+        if (target === _tail) {
+            this._tail = (_b = this.tail) === null || _b === void 0 ? void 0 : _b.prev;
+            delete this._tail.next;
+            return;
+        }
+        // or remove from in between the list
+        if (!target.prev || !target.next) {
+            throw new funnel_core_1.IllegalStateError('Node is not in between the list');
+        }
+        target.prev.next = target.next;
+        target.next.prev = target.prev;
+        delete target.next;
+        delete target.prev;
+    }
+}
+exports.SortedLinkedList = SortedLinkedList;

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

@@ -0,0 +1,2 @@
+export * from './FocusController';
+export * from './FocusArea';

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

@@ -0,0 +1,18 @@
+"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("./FocusController"), exports);
+__exportStar(require("./FocusArea"), exports);

package/dist/client/interaction/focus/useFocusService.d.ts

@@ -0,0 +1,2 @@
+import { FocusService } from './FocusService';
+export declare function useFocusService(): FocusService;

package/dist/client/interaction/focus/useFocusService.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusService = useFocusService;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const FocusContext_1 = require("./FocusContext");
+function useFocusService() {
+    const focusContext = (0, react_1.useContext)(FocusContext_1.FocusContext);
+    // throw if trying to access focus service outside the focus context
+    if (!focusContext.focusService) {
+        throw new funnel_core_1.IllegalStateError('[useFocusService] FocusService must be accessed within focus context');
+    }
+    return focusContext.focusService;
+}

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

@@ -0,0 +1,12 @@
+export * from './Carousel';
+export * from './ClickObserver';
+export * from './InfiniteScroller';
+export * from './Loader';
+export * from './Marquee';
+export * from './Popup';
+export * from './Tooltip';
+export * from './UILevel';
+export * from './backdrop';
+export * from './focus';
+export * from './modal/index';
+export * from './paginator/index';

package/dist/client/interaction/index.js

@@ -0,0 +1,28 @@
+"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("./Carousel"), exports);
+__exportStar(require("./ClickObserver"), exports);
+__exportStar(require("./InfiniteScroller"), exports);
+__exportStar(require("./Loader"), exports);
+__exportStar(require("./Marquee"), exports);
+__exportStar(require("./Popup"), exports);
+__exportStar(require("./Tooltip"), exports);
+__exportStar(require("./UILevel"), exports);
+__exportStar(require("./backdrop"), exports);
+__exportStar(require("./focus"), exports);
+__exportStar(require("./modal/index"), exports);
+__exportStar(require("./paginator/index"), exports);

package/dist/client/interaction/modal/Modal.d.ts

@@ -0,0 +1,29 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Variant } from 'framer-motion';
+import { PropsWithChildren } from 'react';
+import { BackdropEvent } from '../backdrop/BackdropEvent';
+import { UILevel } from '../UILevel';
+export declare function Modal({ className, level, animation, open, onOpened: onOpenedRaw, onActiveChanged: onActiveChangedRaw, onClose, onClosed: onClosedRaw, disableDismiss, children }: Modal.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Modal {
+    type Id = BackdropEvent.DependantId;
+    type Props = PropsWithChildren & {
+        className?: string;
+        level?: UILevel;
+        animation?: Animation;
+        open?: boolean;
+        onOpened?: Callback.Void;
+        onActiveChanged?: Callback<boolean>;
+        onClose?: Callback.Void;
+        onClosed?: Callback.Void;
+        disableDismiss?: boolean;
+    };
+    type Animation = {
+        initial: Variant;
+        open: Variant;
+        close: Variant;
+    };
+    namespace Animation {
+        type Variant = keyof Animation;
+        const slideUp: Animation;
+    }
+}

package/dist/client/interaction/modal/Modal.js

@@ -0,0 +1,136 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = Modal;
+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 backdrop_1 = require("../backdrop");
+const ClickObserver_1 = require("../ClickObserver");
+const ModalContext_1 = require("./ModalContext");
+const ModalEvent_1 = require("./ModalEvent");
+// component
+function Modal({ className, level = 'l1', animation = Modal.Animation.slideUp, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onActiveChanged: onActiveChangedRaw = funnel_core_1.Fn.NoOp, onClose = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, disableDismiss = false, children }) {
+    // bind context
+    const [active, setActive] = (0, react_1.useState)(false);
+    const { eventBus } = (0, react_1.useContext)(ModalContext_1.ModalContext);
+    const backdrop = (0, backdrop_1.useBackdrop)();
+    const openRef = (0, react_1.useRef)(false);
+    const onOpenedRef = (0, react_1.useRef)(onOpenedRaw);
+    onOpenedRef.current = onOpenedRaw;
+    const onActiveChangedRef = (0, react_1.useRef)(onActiveChangedRaw);
+    onActiveChangedRef.current = onActiveChangedRaw;
+    const onClosedRef = (0, react_1.useRef)(onClosedRaw);
+    onClosedRef.current = onClosedRaw;
+    // show/hide based on open change
+    (0, react_1.useEffect)(() => {
+        // raise open event
+        const { id } = backdrop;
+        if (open) {
+            // update ref
+            openRef.current = true;
+            // raise event
+            eventBus.next(ModalEvent_1.ModalEvent.Open.create(id, disableDismiss));
+            // raise backdrop event
+            backdrop.show({ level });
+            // activate
+            setActive(true);
+        }
+        // raise or close event (if it was actually opened)
+        else if (openRef.current) {
+            // deactivate
+            setActive(false);
+            // update ref
+            openRef.current = false;
+            // raise event
+            eventBus.next({
+                id,
+                action: 'close'
+            });
+            // raise backdrop event
+            backdrop.hide();
+        }
+    }, [eventBus, backdrop, level, open, disableDismiss]);
+    // listen to activations or dismiss
+    (0, react_1.useEffect)(() => {
+        // listen for events
+        const subscription = eventBus
+            // filter only relevant events
+            .pipe((0, rxjs_1.filter)(({ id, action }) => id === backdrop.id
+            && (action === 'activate' || action === 'deactivate' || action === 'dismiss')))
+            .subscribe(({ action }) => {
+            // close on dismiss
+            if (action === 'dismiss') {
+                onClose();
+            }
+            // or activate/deactivate
+            else {
+                setActive(action === 'activate');
+            }
+        });
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [eventBus, backdrop, onClose]);
+    // raise activated event
+    (0, react_1.useEffect)(() => {
+        onActiveChangedRef.current(active);
+    }, [active]);
+    // skip for SSR
+    if (!funnel_core_1.Browser.available) {
+        return null;
+    }
+    // helpers
+    const onAnimationComplete = (definition) => {
+        if (definition === 'open') {
+            onOpenedRef.current();
+        }
+        else if (definition === 'close') {
+            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, { mode: "wait", children: open &&
+                (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { id: backdrop.id, className: (0, classnames_1.default)('Modal-wrap', {
+                        'Modal-l1': level === 'l1',
+                        'Modal-l2': level === 'l2',
+                        'Modal-l3': level === 'l3',
+                    }), variants: animation, initial: "initial", animate: "open", exit: "close", onAnimationComplete: definition => onAnimationComplete(definition), children: (0, jsx_runtime_1.jsx)(ClickObserver_1.ClickObserver, { disabled: disableDismiss, onClickOutside: onClose, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'Modal-root'), children: children }) }) }, backdrop.id) }), document.body) }));
+}
+// extension
+(function (Modal) {
+    let Animation;
+    (function (Animation) {
+        // slide up
+        Animation.slideUp = {
+            initial: {
+                opacity: 0,
+                y: 100
+            },
+            open: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                    ease: 'easeIn',
+                    duration: 0.3,
+                    when: 'beforeChildren'
+                }
+            },
+            close: {
+                opacity: 0,
+                y: 50,
+                transition: {
+                    ease: 'easeOut',
+                    duration: 0.15,
+                    bounce: 0,
+                    when: 'afterChildren'
+                }
+            }
+        };
+    })(Animation = Modal.Animation || (Modal.Animation = {}));
+})(Modal || (exports.Modal = Modal = {}));

package/dist/client/interaction/modal/ModalContainer.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export declare function ModalContainer({ children }: ModalContainer.Props): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare namespace ModalContainer {
+    type Props = PropsWithChildren;
+}

package/dist/client/interaction/modal/ModalContainer.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContainer = ModalContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const react_hotkeys_hook_1 = require("react-hotkeys-hook");
+const rxjs_1 = require("rxjs");
+const ModalContext_1 = require("./ModalContext");
+const ModalEvent_1 = require("./ModalEvent");
+// component
+function ModalContainer({ children }) {
+    // bind context
+    const [modal, setModal] = (0, react_1.useState)();
+    const context = (0, react_1.useMemo)(() => ({
+        eventBus: new rxjs_1.Subject()
+    }), []);
+    const modalsRef = (0, react_1.useRef)([]);
+    // update modal state based on show/hide
+    (0, react_1.useEffect)(() => {
+        // subscribe to open/close events
+        const { eventBus } = context;
+        const subscription = eventBus
+            .pipe((0, rxjs_1.filter)(({ action }) => action === 'open' || action === 'close'))
+            .subscribe(event => {
+            // handle open
+            const { id: modalId, action } = event;
+            const modals = modalsRef.current;
+            if (ModalEvent_1.ModalEvent.Open.guard(event)) {
+                // deactivate current modal (if any)
+                const activeModal = getActiveModal(modals);
+                if (activeModal) {
+                    eventBus.next(ModalEvent_1.ModalEvent.Deactivate.create(activeModal.id));
+                }
+                // track new modal
+                const config = {
+                    id: modalId,
+                    dismissible: !event.disableDismiss
+                };
+                modals.push(config);
+                // activate modal
+                setModal(config);
+            }
+            // handle close
+            else if (action === 'close') {
+                // find modal (fail if it's not tracked)
+                const modalIndex = modals.findIndex(({ id }) => id === modalId);
+                if (modalIndex < 0) {
+                    return;
+                }
+                // untrack modal
+                modals.splice(modalIndex, 1);
+                // reactivate previous modal (if any)
+                const activeModal = getActiveModal(modals);
+                if (activeModal) {
+                    // update state
+                    setModal(activeModal);
+                    // reactivate
+                    eventBus.next(ModalEvent_1.ModalEvent.Activate.create(activeModal.id));
+                }
+                // or unlock ui
+                else {
+                    setModal(undefined);
+                }
+            }
+        });
+        // unmount
+        return () => subscription.unsubscribe();
+    }, [context]);
+    // handle lock/unlock of ui
+    (0, react_1.useEffect)(() => {
+        // handle ui lock
+        let unlock = undefined;
+        if (modal) {
+            unlock = funnel_core_1.Browser.lockFocus(`#${CSS.escape(modal.id)}`);
+        }
+        // unlock on unmount (if locked)
+        return () => unlock && unlock();
+    }, [modal]);
+    // close on escape
+    (0, react_hotkeys_hook_1.useHotkeys)('esc', () => {
+        // ignore if not dismissible
+        if (!modal || !modal.dismissible) {
+            return;
+        }
+        // send dismiss event (modal should dismiss via 'close' event)
+        context.eventBus.next(ModalEvent_1.ModalEvent.Dismiss.create(modal.id));
+    }, {
+        enabled: (modal === null || modal === void 0 ? void 0 : modal.dismissible) === true,
+        enableOnFormTags: ['input', 'textarea']
+    }, [modal]);
+    // skip for SSR
+    if (!funnel_core_1.Browser.available) {
+        return children;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(ModalContext_1.ModalContext.Provider, { value: context, children: children }));
+}
+function getActiveModal(modals) {
+    const modalCount = modals.length;
+    return modalCount > 0
+        ? modals[modalCount - 1]
+        : undefined;
+}

package/dist/client/interaction/modal/ModalContext.d.ts

@@ -0,0 +1,8 @@
+import { Subject } from 'rxjs';
+import { ModalEvent } from './ModalEvent';
+export declare const ModalContext: import("react").Context<ModalContext.Data>;
+export declare namespace ModalContext {
+    type Data = {
+        eventBus: Subject<ModalEvent>;
+    };
+}

package/dist/client/interaction/modal/ModalContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalContext = void 0;
+const react_1 = require("react");
+// context
+exports.ModalContext = (0, react_1.createContext)({});

package/dist/client/interaction/modal/ModalEvent.d.ts

@@ -0,0 +1,39 @@
+import { Modal } from './Modal';
+export type ModalEvent = ModalEvent.Open | ModalEvent.Activate | ModalEvent.Deactivate | ModalEvent.Dismiss | ModalEvent.Close;
+export declare namespace ModalEvent {
+    export type Action = 'open' | 'activate' | 'deactivate' | 'dismiss' | 'close';
+    interface Base {
+        id: Modal.Id;
+        action: ModalEvent.Action;
+    }
+    export interface Open extends Base {
+        action: 'open';
+        disableDismiss: boolean;
+    }
+    export namespace Open {
+        function guard(event: ModalEvent): event is Open;
+        function create(id: Modal.Id, disableDismiss?: boolean): Open;
+    }
+    export interface Activate extends Base {
+        action: 'activate';
+    }
+    export namespace Activate {
+        function create(id: Modal.Id): Activate;
+    }
+    export interface Deactivate extends Base {
+        action: 'deactivate';
+    }
+    export namespace Deactivate {
+        function create(id: Modal.Id): Deactivate;
+    }
+    export interface Dismiss extends Base {
+        action: 'dismiss';
+    }
+    export namespace Dismiss {
+        function create(id: Modal.Id): Dismiss;
+    }
+    export interface Close extends Base {
+        action: 'close';
+    }
+    export {};
+}

package/dist/client/interaction/modal/ModalEvent.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalEvent = void 0;
+// extension
+var ModalEvent;
+(function (ModalEvent) {
+    let Open;
+    (function (Open) {
+        // helpers
+        function guard(event) {
+            return event.action === 'open';
+        }
+        Open.guard = guard;
+        function create(id, disableDismiss = false) {
+            return {
+                id,
+                action: 'open',
+                disableDismiss
+            };
+        }
+        Open.create = create;
+    })(Open = ModalEvent.Open || (ModalEvent.Open = {}));
+    let Activate;
+    (function (Activate) {
+        function create(id) {
+            return {
+                id,
+                action: 'activate'
+            };
+        }
+        Activate.create = create;
+    })(Activate = ModalEvent.Activate || (ModalEvent.Activate = {}));
+    let Deactivate;
+    (function (Deactivate) {
+        function create(id) {
+            return {
+                id,
+                action: 'deactivate'
+            };
+        }
+        Deactivate.create = create;
+    })(Deactivate = ModalEvent.Deactivate || (ModalEvent.Deactivate = {}));
+    let Dismiss;
+    (function (Dismiss) {
+        function create(id) {
+            return {
+                id,
+                action: 'dismiss'
+            };
+        }
+        Dismiss.create = create;
+    })(Dismiss = ModalEvent.Dismiss || (ModalEvent.Dismiss = {}));
+})(ModalEvent || (exports.ModalEvent = ModalEvent = {}));

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

@@ -0,0 +1,2 @@
+export * from './Modal';
+export * from './ModalContainer';

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

@@ -0,0 +1,18 @@
+"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("./Modal"), exports);
+__exportStar(require("./ModalContainer"), exports);

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

@@ -0,0 +1,33 @@
+import { Transform } from '@nascentdigital/funnel-core';
+import { JSXElementConstructor, ReactNode } from 'react';
+export declare function Paginator<TArgs, TResult extends Paginator.Page>({ manualLoad, loadOffset, query, pageSize, pageOffset, queryId, onQuery, ItemElement, emptyElement }: Paginator.Props<TArgs, TResult>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Paginator {
+    type State = 'ready' | 'loading' | 'complete' | 'error';
+    type QueryFn<TArgs, TResult extends Page> = Transform.Async<TArgs & Pagination, TResult>;
+    type Pagination = {
+        page: number;
+        pageSize: number;
+    };
+    type Page<TItem = any> = {
+        items: TItem[];
+        hasMore: boolean;
+    };
+    type PageItem<TResult extends Page> = TResult['items'][number];
+    type RenderFn<TResult> = Transform<TResult, ReactNode>;
+    type ItemElement<TItem> = JSXElementConstructor<ItemProps<TItem>>;
+    type ItemProps<TItem> = {
+        className?: string;
+        item: TItem;
+    };
+    type Props<TArgs, TResult extends Page> = {
+        manualLoad?: boolean;
+        loadOffset?: number;
+        pageSize: number;
+        pageOffset?: number;
+        query: TArgs;
+        queryId?: string;
+        onQuery: QueryFn<TArgs, TResult>;
+        ItemElement: ItemElement<PageItem<TResult>>;
+        emptyElement?: ReactNode;
+    };
+}