@mohasinac/appkit 2.1.1 → 2.2.0

package/dist/react/hooks/useMessage.js

@@ -0,0 +1,45 @@
+"use client";
+/**
+ * useMessage
+ *
+ * Manages temporary success/error messages.
+ * Delegates to the global ToastProvider so calls to showSuccess/showError
+ * always produce a visible overlay toast — even if the component does not
+ * render the returned `message` value.
+ * The `message` local state is kept for components that still render it
+ * inline (e.g. reviews, settings views).
+ */
+import { useState, useCallback, useRef, useEffect } from "react";
+import { useToast } from "../../ui";
+export function useMessage() {
+    const { showToast } = useToast();
+    const [message, setMessage] = useState(null);
+    const timerRef = useRef(undefined);
+    // Clean up timer on unmount
+    useEffect(() => {
+        return () => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, []);
+    const showSuccess = useCallback((text) => {
+        showToast(text, "success");
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        setMessage({ type: "success", text });
+        timerRef.current = setTimeout(() => setMessage(null), 5000);
+    }, [showToast]);
+    const showError = useCallback((text) => {
+        showToast(text, "error");
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        setMessage({ type: "error", text });
+        timerRef.current = setTimeout(() => setMessage(null), 5000);
+    }, [showToast]);
+    const clearMessage = useCallback(() => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        setMessage(null);
+    }, []);
+    return { message, showSuccess, showError, clearMessage };
+}

package/dist/react/hooks/usePendingFilters.d.ts

@@ -0,0 +1,58 @@
+import type { useUrlTable } from "./useUrlTable";
+type UrlTable = ReturnType<typeof useUrlTable>;
+export interface UsePendingFiltersOptions {
+    /** The page's useUrlTable instance */
+    table: UrlTable;
+    /** URL param keys to manage (e.g. ['status', 'category', 'role']) */
+    keys: string[];
+}
+export interface UsePendingFiltersReturn {
+    /** Current uncommitted selections per key (string[] per key) */
+    pending: Record<string, string[]>;
+    /** Values currently in the URL (committed) per key */
+    applied: Record<string, string[]>;
+    /** true when pending differs from applied */
+    isDirty: boolean;
+    /** Total number of selected values across all pending keys */
+    pendingCount: number;
+    /** Total number of selected values in the URL (for badge display) */
+    appliedCount: number;
+    /** Update one key in pending state (does NOT write to URL) */
+    set: (key: string, values: string[]) => void;
+    /** Write all pending keys to the URL (resets page to 1) */
+    apply: () => void;
+    /** Discard pending, revert to applied (URL) state */
+    reset: () => void;
+    /** Clear all keys in both pending state and the URL */
+    clear: () => void;
+}
+/**
+ * usePendingFilters
+ *
+ * Manages local (uncommitted) filter state for a FilterDrawer or any deferred
+ * filter panel. Values are only written to the URL when `apply()` is called.
+ *
+ * Initialised from the current URL params on mount, so opening a drawer
+ * pre-fills any already-applied filters.
+ *
+ * @example
+ * ```ts
+ * const table   = useUrlTable({ defaults: { pageSize: '25' } });
+ * const filters = usePendingFilters({ table, keys: ['status', 'category'] });
+ *
+ * <FilterDrawer
+ *   onApply={() => { filters.apply(); setDrawerOpen(false); }}
+ *   onReset={() => filters.clear()}
+ *   activeCount={filters.appliedCount}
+ * >
+ *   <FilterFacetSection
+ *     title="Status"
+ *     options={STATUS_OPTIONS}
+ *     selected={filters.pending['status'] ?? []}
+ *     onChange={(v) => filters.set('status', v)}
+ *   />
+ * </FilterDrawer>
+ * ```
+ */
+export declare function usePendingFilters({ table, keys, }: UsePendingFiltersOptions): UsePendingFiltersReturn;
+export {};

package/dist/react/hooks/usePendingFilters.js

@@ -0,0 +1,79 @@
+"use client";
+import { useCallback, useMemo, useState } from "react";
+/**
+ * usePendingFilters
+ *
+ * Manages local (uncommitted) filter state for a FilterDrawer or any deferred
+ * filter panel. Values are only written to the URL when `apply()` is called.
+ *
+ * Initialised from the current URL params on mount, so opening a drawer
+ * pre-fills any already-applied filters.
+ *
+ * @example
+ * ```ts
+ * const table   = useUrlTable({ defaults: { pageSize: '25' } });
+ * const filters = usePendingFilters({ table, keys: ['status', 'category'] });
+ *
+ * <FilterDrawer
+ *   onApply={() => { filters.apply(); setDrawerOpen(false); }}
+ *   onReset={() => filters.clear()}
+ *   activeCount={filters.appliedCount}
+ * >
+ *   <FilterFacetSection
+ *     title="Status"
+ *     options={STATUS_OPTIONS}
+ *     selected={filters.pending['status'] ?? []}
+ *     onChange={(v) => filters.set('status', v)}
+ *   />
+ * </FilterDrawer>
+ * ```
+ */
+export function usePendingFilters({ table, keys, }) {
+    const parseValues = useCallback((key) => {
+        const raw = table.get(key);
+        return raw ? raw.split(",").filter(Boolean) : [];
+    }, [table]);
+    const [pending, setPending] = useState(() => Object.fromEntries(keys.map((k) => [k, parseValues(k)])));
+    const applied = useMemo(() => Object.fromEntries(keys.map((k) => [k, parseValues(k)])), [keys, parseValues]);
+    const pendingCount = useMemo(() => Object.values(pending).reduce((sum, arr) => sum + arr.length, 0), [pending]);
+    const appliedCount = useMemo(() => Object.values(applied).reduce((sum, arr) => sum + arr.length, 0), [applied]);
+    const isDirty = useMemo(() => {
+        return keys.some((k) => {
+            const p = (pending[k] ?? []).slice().sort();
+            const a = (applied[k] ?? []).slice().sort();
+            return p.length !== a.length || p.some((v, i) => v !== a[i]);
+        });
+    }, [keys, pending, applied]);
+    const set = useCallback((key, values) => {
+        setPending((prev) => ({ ...prev, [key]: values }));
+    }, []);
+    const apply = useCallback(() => {
+        const updates = { page: "1" };
+        for (const k of keys) {
+            updates[k] = (pending[k] ?? []).join(",");
+        }
+        table.setMany(updates);
+    }, [keys, pending, table]);
+    const reset = useCallback(() => {
+        setPending(Object.fromEntries(keys.map((k) => [k, parseValues(k)])));
+    }, [keys, parseValues]);
+    const clear = useCallback(() => {
+        const empty = Object.fromEntries(keys.map((k) => [k, []]));
+        setPending(empty);
+        const updates = { page: "1" };
+        for (const k of keys)
+            updates[k] = "";
+        table.setMany(updates);
+    }, [keys, table]);
+    return {
+        pending,
+        applied,
+        isDirty,
+        pendingCount,
+        appliedCount,
+        set,
+        apply,
+        reset,
+        clear,
+    };
+}

package/dist/react/hooks/usePendingTable.d.ts

@@ -0,0 +1,49 @@
+import type { useUrlTable } from "./useUrlTable";
+type UrlTable = ReturnType<typeof useUrlTable>;
+/**
+ * Minimal UrlTable-compatible interface consumed by *Filters components.
+ */
+export interface PendingTable {
+    get: (key: string) => string;
+    set: (key: string, value: string) => void;
+    setMany: (updates: Record<string, string>) => void;
+}
+export interface UsePendingTableReturn {
+    /** Drop-in UrlTable replacement that reads/writes to pending state */
+    pendingTable: PendingTable;
+    /** Count of applied (URL) filter values — use for the filter badge */
+    filterActiveCount: number;
+    /** Commit all pending changes to the URL (resets page to 1) */
+    onFilterApply: () => void;
+    /** Clear all filter keys from pending state and URL */
+    onFilterClear: () => void;
+    /**
+     * Revert pending state to the current URL values without clearing them.
+     * Call this when opening a filter drawer to ensure it shows the last
+     * committed state, even if the URL changed externally (e.g. a status tab).
+     */
+    onFilterReset: () => void;
+}
+/**
+ * usePendingTable
+ *
+ * A thin wrapper around `usePendingFilters` that exposes a `pendingTable`
+ * object matching the `UrlTable` interface (`get`, `set`, `setMany`).
+ *
+ * Drop this into any listing view to replace the per-filter `useState` +
+ * `handleFilterApply` + `handleFilterClear` boilerplate.
+ *
+ * @example
+ * ```tsx
+ * const { pendingTable, filterActiveCount, onFilterApply, onFilterClear } =
+ *   usePendingTable(table, ['status', 'category', 'minPrice', 'maxPrice']);
+ *
+ * // Pass pendingTable directly to any *Filters component:
+ * filterContent={<ProductFilters table={pendingTable} showStatus />}
+ * filterActiveCount={filterActiveCount}
+ * onFilterApply={onFilterApply}
+ * onFilterClear={onFilterClear}
+ * ```
+ */
+export declare function usePendingTable(table: UrlTable, keys: string[]): UsePendingTableReturn;
+export {};

package/dist/react/hooks/usePendingTable.js

@@ -0,0 +1,45 @@
+"use client";
+import { useMemo } from "react";
+import { usePendingFilters } from "./usePendingFilters";
+/**
+ * usePendingTable
+ *
+ * A thin wrapper around `usePendingFilters` that exposes a `pendingTable`
+ * object matching the `UrlTable` interface (`get`, `set`, `setMany`).
+ *
+ * Drop this into any listing view to replace the per-filter `useState` +
+ * `handleFilterApply` + `handleFilterClear` boilerplate.
+ *
+ * @example
+ * ```tsx
+ * const { pendingTable, filterActiveCount, onFilterApply, onFilterClear } =
+ *   usePendingTable(table, ['status', 'category', 'minPrice', 'maxPrice']);
+ *
+ * // Pass pendingTable directly to any *Filters component:
+ * filterContent={<ProductFilters table={pendingTable} showStatus />}
+ * filterActiveCount={filterActiveCount}
+ * onFilterApply={onFilterApply}
+ * onFilterClear={onFilterClear}
+ * ```
+ */
+export function usePendingTable(table, keys) {
+    const filters = usePendingFilters({ table, keys });
+    const pendingTable = useMemo(() => ({
+        get: (key) => filters.pending[key]?.[0] ?? "",
+        set: (key, value) => {
+            filters.set(key, value ? [value] : []);
+        },
+        setMany: (updates) => {
+            for (const [k, v] of Object.entries(updates)) {
+                filters.set(k, v ? [v] : []);
+            }
+        },
+    }), [filters.pending, filters.set]);
+    return {
+        pendingTable,
+        filterActiveCount: filters.appliedCount,
+        onFilterApply: filters.apply,
+        onFilterClear: filters.clear,
+        onFilterReset: filters.reset,
+    };
+}

package/dist/react/hooks/usePullToRefresh.d.ts

@@ -0,0 +1,38 @@
+import { RefObject } from "react";
+export interface UsePullToRefreshOptions {
+    /** Distance in px the user must pull before onRefresh triggers (default: 80) */
+    threshold?: number;
+}
+export interface UsePullToRefreshReturn {
+    /** Attach to the scrollable container element */
+    containerRef: RefObject<HTMLDivElement | null>;
+    /** `true` while the user is actively pulling */
+    isPulling: boolean;
+    /** Pull progress from 0 (not started) to 1 (threshold reached) */
+    progress: number;
+}
+/**
+ * usePullToRefresh Hook
+ *
+ * Attaches touch event listeners to `containerRef`.
+ * When the user overscrolls from the very top and pulls down past `threshold`,
+ * `onRefresh` is called. Progress (0–1) can be used to render a loading indicator.
+ *
+ * @param onRefresh - Async function called when pull threshold is reached
+ * @param options   - Configuration: `threshold` in px (default 80)
+ *
+ * @example
+ * ```tsx
+ * const { containerRef, isPulling, progress } = usePullToRefresh(async () => {
+ *   await refetchOrders();
+ * });
+ *
+ * return (
+ *   <div ref={containerRef} className="overflow-y-auto">
+ *     {isPulling && <PullIndicator progress={progress} />}
+ *     {…}
+ *   </div>
+ * );
+ * ```
+ */
+export declare function usePullToRefresh(onRefresh: () => Promise<void>, options?: UsePullToRefreshOptions): UsePullToRefreshReturn;

package/dist/react/hooks/usePullToRefresh.js

@@ -0,0 +1,82 @@
+"use client";
+import { useRef, useState, useCallback, useEffect } from "react";
+/**
+ * usePullToRefresh Hook
+ *
+ * Attaches touch event listeners to `containerRef`.
+ * When the user overscrolls from the very top and pulls down past `threshold`,
+ * `onRefresh` is called. Progress (0–1) can be used to render a loading indicator.
+ *
+ * @param onRefresh - Async function called when pull threshold is reached
+ * @param options   - Configuration: `threshold` in px (default 80)
+ *
+ * @example
+ * ```tsx
+ * const { containerRef, isPulling, progress } = usePullToRefresh(async () => {
+ *   await refetchOrders();
+ * });
+ *
+ * return (
+ *   <div ref={containerRef} className="overflow-y-auto">
+ *     {isPulling && <PullIndicator progress={progress} />}
+ *     {…}
+ *   </div>
+ * );
+ * ```
+ */
+export function usePullToRefresh(onRefresh, options = {}) {
+    const { threshold = 80 } = options;
+    const containerRef = useRef(null);
+    const [isPulling, setIsPulling] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const startYRef = useRef(null);
+    const thresholdReachedRef = useRef(false);
+    const onRefreshRef = useRef(onRefresh);
+    useEffect(() => {
+        onRefreshRef.current = onRefresh;
+    }, [onRefresh]);
+    const handleTouchStart = useCallback((e) => {
+        const el = containerRef.current;
+        if (!el || el.scrollTop > 0)
+            return;
+        startYRef.current = e.touches[0].clientY;
+        thresholdReachedRef.current = false;
+    }, []);
+    const handleTouchMove = useCallback((e) => {
+        if (startYRef.current === null)
+            return;
+        const delta = e.touches[0].clientY - startYRef.current;
+        if (delta <= 0) {
+            setProgress(0);
+            setIsPulling(false);
+            return;
+        }
+        const prog = Math.min(delta / threshold, 1);
+        setProgress(prog);
+        setIsPulling(true);
+        thresholdReachedRef.current = prog >= 1;
+    }, [threshold]);
+    const handleTouchEnd = useCallback(async () => {
+        setIsPulling(false);
+        setProgress(0);
+        startYRef.current = null;
+        if (thresholdReachedRef.current) {
+            thresholdReachedRef.current = false;
+            await onRefreshRef.current();
+        }
+    }, []);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        el.addEventListener("touchstart", handleTouchStart, { passive: true });
+        el.addEventListener("touchmove", handleTouchMove, { passive: true });
+        el.addEventListener("touchend", handleTouchEnd);
+        return () => {
+            el.removeEventListener("touchstart", handleTouchStart);
+            el.removeEventListener("touchmove", handleTouchMove);
+            el.removeEventListener("touchend", handleTouchEnd);
+        };
+    }, [handleTouchStart, handleTouchMove, handleTouchEnd]);
+    return { containerRef, isPulling, progress };
+}

package/dist/react/hooks/useRealtimeEvent.d.ts

@@ -0,0 +1,53 @@
+import { type IClientRealtimeProvider } from "../../contracts/client-realtime";
+export declare const RealtimeEventType: {
+    readonly AUTH: "auth";
+    readonly PAYMENT: "payment";
+    readonly CHAT: "chat";
+    readonly BID: "bid";
+    readonly BULK: "bulk";
+};
+export type RealtimeEventType = (typeof RealtimeEventType)[keyof typeof RealtimeEventType];
+export declare const RealtimeEventStatus: {
+    readonly IDLE: "idle";
+    readonly SUBSCRIBING: "subscribing";
+    readonly PENDING: "pending";
+    readonly SUCCESS: "success";
+    readonly FAILED: "failed";
+    readonly TIMEOUT: "timeout";
+};
+export type RealtimeEventStatus = (typeof RealtimeEventStatus)[keyof typeof RealtimeEventStatus];
+export declare const RTDBPayloadStatus: {
+    readonly PENDING: "pending";
+    readonly SUCCESS: "success";
+    readonly FAILED: "failed";
+    readonly ERROR: "error";
+};
+export interface RTDBEventPayload {
+    status: (typeof RTDBPayloadStatus)[keyof typeof RTDBPayloadStatus];
+    error?: string;
+    [key: string]: unknown;
+}
+export interface RealtimeEventMessages {
+    tokenFailure?: string;
+    connectionLost?: string;
+    timedOut?: string;
+    failure?: string;
+}
+export interface UseRealtimeEventConfig<TData = undefined> {
+    type: RealtimeEventType;
+    rtdbPath: string;
+    /** Optional provider override. Falls back to the globally registered provider. */
+    realtimeProvider?: IClientRealtimeProvider;
+    timeoutMs?: number;
+    extractData?: (raw: RTDBEventPayload) => TData | null;
+    messages?: RealtimeEventMessages;
+    onLogError?: (message: string, error: unknown) => void;
+}
+export interface UseRealtimeEventReturn<TData = undefined> {
+    status: RealtimeEventStatus;
+    error: string | null;
+    data: TData | null;
+    subscribe: (eventId: string, customToken: string) => void;
+    reset: () => void;
+}
+export declare function useRealtimeEvent<TData = undefined>(config: UseRealtimeEventConfig<TData>): UseRealtimeEventReturn<TData>;

package/dist/react/hooks/useRealtimeEvent.js

@@ -0,0 +1,124 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getClientRealtimeProvider, } from "../../contracts/client-realtime";
+export const RealtimeEventType = {
+    AUTH: "auth",
+    PAYMENT: "payment",
+    CHAT: "chat",
+    BID: "bid",
+    BULK: "bulk",
+};
+export const RealtimeEventStatus = {
+    IDLE: "idle",
+    SUBSCRIBING: "subscribing",
+    PENDING: "pending",
+    SUCCESS: "success",
+    FAILED: "failed",
+    TIMEOUT: "timeout",
+};
+export const RTDBPayloadStatus = {
+    PENDING: "pending",
+    SUCCESS: "success",
+    FAILED: "failed",
+    ERROR: "error",
+};
+const DEFAULT_TIMEOUT_MS = 3 * 60 * 1000;
+const DEFAULT_MESSAGES = {
+    tokenFailure: "Failed to initialize realtime tracking.",
+    connectionLost: "Realtime connection lost.",
+    timedOut: "Operation timed out.",
+    failure: "Operation failed.",
+};
+export function useRealtimeEvent(config) {
+    const configRef = useRef(config);
+    const [status, setStatus] = useState(RealtimeEventStatus.IDLE);
+    const [error, setError] = useState(null);
+    const [data, setData] = useState(null);
+    const unsubscribeRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const eventIdRef = useRef(null);
+    const cleanup = useCallback(() => {
+        if (unsubscribeRef.current) {
+            unsubscribeRef.current();
+            unsubscribeRef.current = null;
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        const provider = configRef.current.realtimeProvider ?? getClientRealtimeProvider();
+        provider.signOut().catch(() => {
+            // no-op
+        });
+    }, []);
+    const subscribe = useCallback((eventId, customToken) => {
+        const { type, rtdbPath, realtimeProvider, timeoutMs = DEFAULT_TIMEOUT_MS, extractData, messages, onLogError, } = configRef.current;
+        const provider = realtimeProvider ?? getClientRealtimeProvider();
+        const msg = {
+            ...DEFAULT_MESSAGES,
+            ...(messages ?? {}),
+        };
+        cleanup();
+        eventIdRef.current = eventId;
+        setStatus(RealtimeEventStatus.SUBSCRIBING);
+        setError(null);
+        setData(null);
+        (async () => {
+            try {
+                await provider.signInWithToken(customToken);
+            }
+            catch (authErr) {
+                onLogError?.(`useRealtimeEvent[${type}]: custom token sign-in failed`, authErr);
+                setError(msg.tokenFailure);
+                setStatus(RealtimeEventStatus.FAILED);
+                cleanup();
+                return;
+            }
+            if (eventIdRef.current !== eventId) {
+                cleanup();
+                return;
+            }
+            setStatus(RealtimeEventStatus.PENDING);
+            unsubscribeRef.current = provider.subscribe(`${rtdbPath}/${eventId}`, (snapshot) => {
+                if (!snapshot.exists())
+                    return;
+                const raw = snapshot.val();
+                if (!raw)
+                    return;
+                if (raw.status === RTDBPayloadStatus.SUCCESS) {
+                    cleanup();
+                    if (extractData)
+                        setData(extractData(raw));
+                    setStatus(RealtimeEventStatus.SUCCESS);
+                }
+                else if (raw.status === RTDBPayloadStatus.FAILED ||
+                    raw.status === RTDBPayloadStatus.ERROR) {
+                    cleanup();
+                    setError(raw.error ?? msg.failure);
+                    setStatus(RealtimeEventStatus.FAILED);
+                }
+            }, (rtdbErr) => {
+                onLogError?.(`useRealtimeEvent[${type}]: RTDB subscription error`, rtdbErr);
+                cleanup();
+                setError(msg.connectionLost);
+                setStatus(RealtimeEventStatus.FAILED);
+            });
+            timeoutRef.current = setTimeout(() => {
+                cleanup();
+                setStatus(RealtimeEventStatus.TIMEOUT);
+                setError(msg.timedOut);
+            }, timeoutMs);
+        })();
+    }, [cleanup]);
+    const reset = useCallback(() => {
+        cleanup();
+        eventIdRef.current = null;
+        setStatus(RealtimeEventStatus.IDLE);
+        setError(null);
+        setData(null);
+    }, [cleanup]);
+    useEffect(() => () => {
+        cleanup();
+    }, [cleanup]);
+    return { status, error, data, subscribe, reset };
+}

package/dist/react/hooks/useSwipe.d.ts

@@ -0,0 +1,55 @@
+import "client-only";
+import { RefObject } from "react";
+/**
+ * Swipe direction types
+ */
+export type SwipeDirection = "left" | "right" | "up" | "down";
+/**
+ * Configuration options for useSwipe hook
+ */
+export interface UseSwipeOptions {
+    /** Minimum distance in pixels to register as a swipe (default: 50) */
+    minSwipeDistance?: number;
+    /** Maximum time in ms for a swipe gesture (default: 300) */
+    maxSwipeTime?: number;
+    /** Threshold for swipe velocity (pixels/ms, default: 0.3) */
+    velocityThreshold?: number;
+    /** Callback when swipe is detected */
+    onSwipe?: (direction: SwipeDirection, distance: number, velocity: number) => void;
+    /** Callback for specific directions */
+    onSwipeLeft?: (distance: number, velocity: number) => void;
+    onSwipeRight?: (distance: number, velocity: number) => void;
+    onSwipeUp?: (distance: number, velocity: number) => void;
+    onSwipeDown?: (distance: number, velocity: number) => void;
+    /** Callback during swipe (for dragging effect) */
+    onSwiping?: (deltaX: number, deltaY: number) => void;
+    /** Callback when swipe starts */
+    onSwipeStart?: () => void;
+    /** Callback when swipe ends (regardless of direction detected) */
+    onSwipeEnd?: () => void;
+    /** Prevent default behavior during touch */
+    preventDefault?: boolean;
+}
+/**
+ * useSwipe Hook
+ *
+ * Detects swipe gestures on touch and mouse events.
+ * Works on both mobile (touch) and desktop (mouse drag).
+ *
+ * @param ref - Reference to the element to attach swipe handlers
+ * @param options - Configuration options for swipe detection
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ *
+ * useSwipe(ref, {
+ *   onSwipeLeft: () => console.log('Swiped left'),
+ *   onSwipeRight: () => console.log('Swiped right'),
+ *   minSwipeDistance: 100,
+ * });
+ *
+ * return <div ref={ref}>Swipe me!</div>;
+ * ```
+ */
+export declare function useSwipe<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, options?: UseSwipeOptions): void;