UNPKG

9.62 kBTypeScriptView Raw
1import { DOMAttributes, PressEvents, RefObject, FocusableElement, FocusEvents, HoverEvents, KeyboardEvents, MoveEvents, ScrollEvents, LongPressEvent } from "@react-types/shared";
2import React, { ReactElement, ReactNode, FocusEvent } from "react";
3export interface PressProps extends PressEvents {
4 /** Whether the target is in a controlled press state (e.g. an overlay it triggers is open). */
5 isPressed?: boolean;
6 /** Whether the press events should be disabled. */
7 isDisabled?: boolean;
8 /** Whether the target should not receive focus on press. */
9 preventFocusOnPress?: boolean;
10 /**
11 * Whether press events should be canceled when the pointer leaves the target while pressed.
12 * By default, this is `false`, which means if the pointer returns back over the target while
13 * still pressed, onPressStart will be fired again. If set to `true`, the press is canceled
14 * when the pointer leaves the target and onPressStart will not be fired if the pointer returns.
15 */
16 shouldCancelOnPointerExit?: boolean;
17 /** Whether text selection should be enabled on the pressable element. */
18 allowTextSelectionOnPress?: boolean;
19}
20export interface PressHookProps extends PressProps {
21 /** A ref to the target element. */
22 ref?: RefObject<Element | null>;
23}
24export interface PressResult {
25 /** Whether the target is currently pressed. */
26 isPressed: boolean;
27 /** Props to spread on the target element. */
28 pressProps: DOMAttributes;
29}
30/**
31 * Handles press interactions across mouse, touch, keyboard, and screen readers.
32 * It normalizes behavior across browsers and platforms, and handles many nuances
33 * of dealing with pointer and keyboard events.
34 */
35export function usePress(props: PressHookProps): PressResult;
36interface PressableProps extends PressProps {
37 children: ReactElement<DOMAttributes, string>;
38}
39export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<HTMLElement>>;
40interface PressResponderProps extends PressProps {
41 children: ReactNode;
42}
43export const PressResponder: React.ForwardRefExoticComponent<PressResponderProps & React.RefAttributes<FocusableElement>>;
44export function ClearPressResponder({ children }: {
45 children: ReactNode;
46}): React.JSX.Element;
47export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
48 /** Whether the focus events should be disabled. */
49 isDisabled?: boolean;
50}
51export interface FocusResult<Target = FocusableElement> {
52 /** Props to spread onto the target element. */
53 focusProps: DOMAttributes<Target>;
54}
55/**
56 * Handles focus events for the immediate target.
57 * Focus events on child elements will be ignored.
58 */
59export function useFocus<Target extends FocusableElement = FocusableElement>(props: FocusProps<Target>): FocusResult<Target>;
60export type Modality = 'keyboard' | 'pointer' | 'virtual';
61export type FocusVisibleHandler = (isFocusVisible: boolean) => void;
62export interface FocusVisibleProps {
63 /** Whether the element is a text input. */
64 isTextInput?: boolean;
65 /** Whether the element will be auto focused. */
66 autoFocus?: boolean;
67}
68export interface FocusVisibleResult {
69 /** Whether keyboard focus is visible globally. */
70 isFocusVisible: boolean;
71}
72/**
73 * EXPERIMENTAL
74 * Adds a window (i.e. iframe) to the list of windows that are being tracked for focus visible.
75 *
76 * Sometimes apps render portions of their tree into an iframe. In this case, we cannot accurately track if the focus
77 * is visible because we cannot see interactions inside the iframe. If you have this in your application's architecture,
78 * then this function will attach event listeners inside the iframe. You should call `addWindowFocusTracking` with an
79 * element from inside the window you wish to add. We'll retrieve the relevant elements based on that.
80 * Note, you do not need to call this for the default window, as we call it for you.
81 *
82 * When you are ready to stop listening, but you do not wish to unmount the iframe, you may call the cleanup function
83 * returned by `addWindowFocusTracking`. Otherwise, when you unmount the iframe, all listeners and state will be cleaned
84 * up automatically for you.
85 *
86 * @param element @default document.body - The element provided will be used to get the window to add.
87 * @returns A function to remove the event listeners and cleanup the state.
88 */
89export function addWindowFocusTracking(element?: HTMLElement | null): () => void;
90/**
91 * If true, keyboard focus is visible.
92 */
93export function isFocusVisible(): boolean;
94export function getInteractionModality(): Modality | null;
95export function setInteractionModality(modality: Modality): void;
96/**
97 * Keeps state of the current modality.
98 */
99export function useInteractionModality(): Modality | null;
100/**
101 * Manages focus visible state for the page, and subscribes individual components for updates.
102 */
103export function useFocusVisible(props?: FocusVisibleProps): FocusVisibleResult;
104/**
105 * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
106 */
107export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {
108 isTextInput?: boolean;
109}): void;
110export interface FocusWithinProps {
111 /** Whether the focus within events should be disabled. */
112 isDisabled?: boolean;
113 /** Handler that is called when the target element or a descendant receives focus. */
114 onFocusWithin?: (e: FocusEvent) => void;
115 /** Handler that is called when the target element and all descendants lose focus. */
116 onBlurWithin?: (e: FocusEvent) => void;
117 /** Handler that is called when the the focus within state changes. */
118 onFocusWithinChange?: (isFocusWithin: boolean) => void;
119}
120export interface FocusWithinResult {
121 /** Props to spread onto the target element. */
122 focusWithinProps: DOMAttributes;
123}
124/**
125 * Handles focus events for the target and its descendants.
126 */
127export function useFocusWithin(props: FocusWithinProps): FocusWithinResult;
128export interface HoverProps extends HoverEvents {
129 /** Whether the hover events should be disabled. */
130 isDisabled?: boolean;
131}
132export interface HoverResult {
133 /** Props to spread on the target element. */
134 hoverProps: DOMAttributes;
135 isHovered: boolean;
136}
137/**
138 * Handles pointer hover interactions for an element. Normalizes behavior
139 * across browsers and platforms, and ignores emulated mouse events on touch devices.
140 */
141export function useHover(props: HoverProps): HoverResult;
142export interface InteractOutsideProps {
143 ref: RefObject<Element | null>;
144 onInteractOutside?: (e: PointerEvent) => void;
145 onInteractOutsideStart?: (e: PointerEvent) => void;
146 /** Whether the interact outside events should be disabled. */
147 isDisabled?: boolean;
148}
149/**
150 * Example, used in components like Dialogs and Popovers so they can close
151 * when a user clicks outside them.
152 */
153export function useInteractOutside(props: InteractOutsideProps): void;
154export interface KeyboardProps extends KeyboardEvents {
155 /** Whether the keyboard events should be disabled. */
156 isDisabled?: boolean;
157}
158export interface KeyboardResult {
159 /** Props to spread onto the target element. */
160 keyboardProps: DOMAttributes;
161}
162/**
163 * Handles keyboard interactions for a focusable element.
164 */
165export function useKeyboard(props: KeyboardProps): KeyboardResult;
166export interface MoveResult {
167 /** Props to spread on the target element. */
168 moveProps: DOMAttributes;
169}
170/**
171 * Handles move interactions across mouse, touch, and keyboard, including dragging with
172 * the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and
173 * platforms, and ignores emulated mouse events on touch devices.
174 */
175export function useMove(props: MoveEvents): MoveResult;
176export interface ScrollWheelProps extends ScrollEvents {
177 /** Whether the scroll listener should be disabled. */
178 isDisabled?: boolean;
179}
180export function useScrollWheel(props: ScrollWheelProps, ref: RefObject<HTMLElement | null>): void;
181export interface LongPressProps {
182 /** Whether long press events should be disabled. */
183 isDisabled?: boolean;
184 /** Handler that is called when a long press interaction starts. */
185 onLongPressStart?: (e: LongPressEvent) => void;
186 /**
187 * Handler that is called when a long press interaction ends, either
188 * over the target or when the pointer leaves the target.
189 */
190 onLongPressEnd?: (e: LongPressEvent) => void;
191 /**
192 * Handler that is called when the threshold time is met while
193 * the press is over the target.
194 */
195 onLongPress?: (e: LongPressEvent) => void;
196 /**
197 * The amount of time in milliseconds to wait before triggering a long press.
198 * @default 500ms
199 */
200 threshold?: number;
201 /**
202 * A description for assistive techology users indicating that a long press
203 * action is available, e.g. "Long press to open menu".
204 */
205 accessibilityDescription?: string;
206}
207export interface LongPressResult {
208 /** Props to spread on the target element. */
209 longPressProps: DOMAttributes;
210}
211/**
212 * Handles long press interactions across mouse and touch devices. Supports a customizable time threshold,
213 * accessibility description, and normalizes behavior across browsers and devices.
214 */
215export function useLongPress(props: LongPressProps): LongPressResult;
216export type { PressEvent, PressEvents, MoveStartEvent, MoveMoveEvent, MoveEndEvent, MoveEvents, HoverEvent, HoverEvents, FocusEvents, KeyboardEvents } from '@react-types/shared';
217
218//# sourceMappingURL=types.d.ts.map