import React, { MouseEvent, ReactNode } from 'react'; /** * This provider adds the following: * - Keyboard navigation + events (↑ / ↓ / ENTER) to children with a specified container (`childContainerRef`) * - Focus redirection when clicking child elements * - Pointer blocking when navigating with arrow keys (to ensure that only one active state is visible at any given time) * - ARIA attributes to define a `combobox` header input that controls a separate `listbox` * * Requirements: * - All child items must have `data-index` attributes defined with their index in the list. This is to help with * interoperability with virtual lists (whilst preventing costly re-renders) * - You have to supply `childCount` which is the total number of list items. Again, this is specifically for virtual * list support. * - All child items have to use the supplied context functions (`onChildClick` etc) to ensure consistent behaviour * when clicking and hovering over items, as well as preventing unwanted focus. * - All elements (including the pointer overlay) must be defined and passed to this Provider. */ /** * @todo We should look to either create an dynamic pointer overlay in future, or create a custom list item component * with more control over dynamically applying (and removing) hover states. */ interface CommandListContextValue { level: number; onChildClick: () => void; onChildMouseDown: (event: MouseEvent) => void; onChildMouseEnter: (index: number) => () => void; setVirtualListScrollToIndex: (scrollToIndex: (index: number, options?: Record) => void) => void; } interface CommandListProviderProps { ariaChildrenLabel: string; ariaHeaderLabel: string; ariaMultiselectable?: boolean; autoFocus?: boolean; children?: ReactNode; childContainerElement: HTMLDivElement | null; childCount: number; containerElement: HTMLDivElement | null; headerInputElement: HTMLInputElement | null; id: string; initialSelectedIndex?: number; level: number; pointerOverlayElement: HTMLDivElement | null; virtualList?: boolean; } /** * @internal */ export declare function CommandListProvider({ ariaChildrenLabel, ariaHeaderLabel, ariaMultiselectable, autoFocus, children, childContainerElement, childCount, containerElement, id, initialSelectedIndex, level, headerInputElement, pointerOverlayElement, virtualList, }: CommandListProviderProps): React.JSX.Element; export declare function useCommandList(): CommandListContextValue; export {}; //# sourceMappingURL=index.d.ts.map