@blocklet/payment-react/lib/hooks/keyboard.d.ts

Reusable react components for payment kit v2

import { KeyboardEvent, RefObject } from 'react';
type TabNavigationOptions<T> = {
    /** whether to include custom option as the last item */
    includeCustom?: boolean;
    /** the value or index of the current selected item */
    currentValue?: T | number;
    /** whether the current selected item is custom */
    isCustomSelected?: boolean;
    /** a function to compare values, used to determine the current selected item */
    compareValue?: (item: T, value: any) => boolean;
    /** whether to allow Tab key navigation */
    enabled?: boolean;
    /** a selector to find navigable elements */
    selector?: string;
    /** an element container reference, limiting the query DOM range to improve performance */
    containerRef?: RefObject<HTMLElement | null>;
    /** the type of the current value, can be 'index' or 'value' */
    valueType?: 'index' | 'value';
};
/**
 * Tab key navigation hook - implement Tab key circular navigation between a set of options
 *
 * @param items an array of options, can be a simple type (string, number) array or an object array
 * @param onSelect callback when an item is selected
 * @param options configuration options
 * @returns an object containing the event handler and control functions
 *
 * @example
 * // simple string array
 * const { handleKeyDown } = useTabNavigation(['10', '20', '50'], handleSelect);
 *
 * // object array
 * const { handleKeyDown } = useTabNavigation(
 *   [{id: 1, name: 'A'}, {id: 2, name: 'B'}],
 *   handleSelect,
 *   { compareValue: (item, value) => item.id === value.id }
 * );
 */
export declare const useTabNavigation: <T>(items: T[], onSelect: (item: T | "custom", index: number) => void, options?: TabNavigationOptions<T>) => {
    handleKeyDown: (e: KeyboardEvent) => void;
    resetTabNavigation: () => void;
    isTabNavigationActive: boolean;
};
export {};