@leonchabbey/norigin-spatial-navigation/dist/useFocusable.d.ts

React hooks based Spatial Navigation solution

import { RefObject } from 'react';
import { FocusDetails, KeyPressDetails, FocusableEventLayout } from './SpatialNavigation';
export declare type EnterPressHandler<P> = (props: P, details: KeyPressDetails) => void;
export declare type EnterReleaseHandler<P> = (props: P) => void;
export declare type ArrowPressHandler<P> = (direction: string, props: P, details: KeyPressDetails) => boolean;
export declare type FocusHandler<P> = (layout: FocusableEventLayout, props: P, details: FocusDetails) => void;
export declare type BlurHandler<P> = (layout: FocusableEventLayout, props: P, details: FocusDetails) => void;
export declare type UseFocusableConfig<P> = {
    focusable?: boolean;
    saveLastFocusedChild?: boolean;
    trackChildren?: boolean;
    autoRestoreFocus?: boolean;
    isFocusBoundary?: boolean;
    focusKey?: string;
    preferredChildFocusKey?: string;
    extraProps?: P;
    onEnterPress?: EnterPressHandler<P>;
    onEnterRelease?: EnterReleaseHandler<P>;
    onArrowPress?: ArrowPressHandler<P>;
    onFocus?: FocusHandler<P>;
    onBlur?: BlurHandler<P>;
};
export interface UseFocusableResult {
    ref: RefObject<any>;
    focusSelf: (focusDetails?: FocusDetails) => void;
    focused: boolean;
    hasFocusedChild: boolean;
    focusKey: string;
    setFocus: (focusKey: string, focusDetails?: FocusDetails) => void;
    navigateByDirection: (direction: string, focusDetails: FocusDetails) => void;
    pause: () => void;
    resume: () => void;
    updateAllLayouts: () => void;
    getCurrentFocusKey: () => string | null;
}
export declare const useFocusable: <P>({ focusable, saveLastFocusedChild, trackChildren, autoRestoreFocus, isFocusBoundary, focusKey: propFocusKey, preferredChildFocusKey, onEnterPress, onEnterRelease, onArrowPress, onFocus, onBlur, extraProps }?: UseFocusableConfig<P>) => UseFocusableResult;