@sanity/default-layout
Version:
The default layout components for Sanity
51 lines • 2.57 kB
TypeScript
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<string, any>) => 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