import { MutableRefObject } from "react"; import { BaseKeyboardSearchOptions, SearchData } from "../../search/useKeyboardSearch"; import { MovementConfig } from "./types"; export declare type MovementHandler = React.KeyboardEventHandler; /** * A mutable ref object that must be applied to each DOM node within the * "focusable"/"searchable" list of elements so that custom focus behavior can * be triggered. * * @typeparam E the element type of each item within the focusable list. */ export declare type ItemRef = MutableRefObject; export declare type ItemRefList = readonly ItemRef[]; export interface BaseKeyboardMovementOptions extends Omit, "onChange">, MovementConfig { /** * Boolean if the event should trigger `event.stopPropagation()` when the * custom keyboard movement is triggered. This should generally be kept as * `false` or `undefined` by default, but enabled when creating more complex * 2-dimensional movement cases such as grids. */ stopPropagation?: boolean; /** * A required change event handler that will be called whenever a user types a * letter and it causes a new item to be "found". This should normally be * something that either updates the `aria-activedescendant` id to the new * found item's id or manually focus the item's DOM node. */ onChange?: (data: SearchData, itemRefs: ItemRefList) => void; } /** * The options for custom keyboard movement. * * @typeparam D the type of each item within the item list * @typeparam CE the type of the DOM element for the keyboard event handler. * @typeparam IE the type of the DOM element for the keyboard event handler. */ export interface KeyboardMovementOptions extends BaseKeyboardMovementOptions { /** * The currently focused index within the item list. This will need to be * updated due to the `onChange` callback being called for this hook to work * as it is fully "controlled" by a parent hook/component. */ focusedIndex: number; /** * A required change event handler that will be called whenever a user types a * letter and it causes a new item to be "found". This should normally be * something that either updates the `aria-activedescendant` id to the new * found item's id or manually focus the item's DOM node. */ onChange: (data: SearchData, itemRefs: ItemRefList) => void; } /** * Returns an ordered list with two items: * * - itemRefs * - onKeyDown event handler * * @typeparam CE The HTMLElement type of the container element that handles the * custom keyboard movement. * @typeparam IE The HTMLElement type of each item within the container element * that can be focusable. */ export declare type KeyboardMovementProviders = [ /** * A list of mutable ref objects that must be applied to each focusable item * within the list. This list will automatically be generated based on the * number of items provided to the `useKeyboardMovement` hook */ ItemRefList, /** * The keydown event handler to apply to a "container" element that has custom * keyboard focus. */ MovementHandler]; /** * This is a low-level hook for providing custom keyboard movement based on key * configurations. This normally shouldn't really be used externally since * you'll most likely want to use the "presets" of `useFocusMovement` and * `useActiveDescendantMovement` that implement the main movement types already * for you. * * The way this works is that it will general a list of mutable item refs that * should be applied to each DOM node for the corresponding `item` within the * `items` list. This list will change and regenerate itself each time the * `items` array changes so it'll always be in-sync with the DOM nodes. This * means that if you have some items that **should not be rendered**, they * should not be included within the items list. The main reason these item refs * are required is so that the `aria-acativedescendant` movement can scroll the * new "focused" element into view if needed while the "true" focus movement can * trigger a `ref.current.focus()` on the new item as needed. * * Finally, this will create a keydown event handler that will merge in the * optionally provided `onKeyDown` prop and check if the pressed key should * trigger a custom keyboard movement event. If it does, an `onChange` event * will be fired with the matching data and allows for custom movement with * `target.focus()` or updating the `aria-activedescendant` attribute as needed. * * @typeparam D The type of each data item within the items list. * @typeparam CE The HTMLElement type of the container element that handles the * custom keyboard movement. * @typeparam IE The HTMLElement type of each item within the container element * that can be focusable. */ export default function useKeyboardMovement({ onKeyDown, incrementKeys, decrementKeys, jumpToFirstKeys, jumpToLastKeys, stopPropagation, onChange, items, resetTime, findMatchIndex, focusedIndex, loopable, searchable, valueKey, getItemValue, }: KeyboardMovementOptions): KeyboardMovementProviders;