UNPKG

8.17 kBTypeScriptView Raw
1import { DOMAttributes, PressEvents, FocusableElement, FocusEvents, HoverEvents, KeyboardEvents, MoveEvents, ScrollEvents, LongPressEvent } from "@react-types/shared";
2import React, { RefObject, ReactElement, ReactNode, FocusEvent, SyntheticEvent } 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>;
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<Element>>;
40interface PressResponderProps extends PressProps {
41 children: ReactNode;
42}
43export const PressResponder: React.ForwardRefExoticComponent<PressResponderProps & React.RefAttributes<FocusableElement>>;
44export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
45 /** Whether the focus events should be disabled. */
46 isDisabled?: boolean;
47}
48export interface FocusResult<Target = FocusableElement> {
49 /** Props to spread onto the target element. */
50 focusProps: DOMAttributes<Target>;
51}
52/**
53 * Handles focus events for the immediate target.
54 * Focus events on child elements will be ignored.
55 */
56export function useFocus<Target extends FocusableElement = FocusableElement>(props: FocusProps<Target>): FocusResult<Target>;
57export type Modality = 'keyboard' | 'pointer' | 'virtual';
58export type FocusVisibleHandler = (isFocusVisible: boolean) => void;
59export interface FocusVisibleProps {
60 /** Whether the element is a text input. */
61 isTextInput?: boolean;
62 /** Whether the element will be auto focused. */
63 autoFocus?: boolean;
64}
65export interface FocusVisibleResult {
66 /** Whether keyboard focus is visible globally. */
67 isFocusVisible: boolean;
68}
69/**
70 * If true, keyboard focus is visible.
71 */
72export function isFocusVisible(): boolean;
73export function getInteractionModality(): Modality;
74export function setInteractionModality(modality: Modality): void;
75/**
76 * Keeps state of the current modality.
77 */
78export function useInteractionModality(): Modality;
79/**
80 * Manages focus visible state for the page, and subscribes individual components for updates.
81 */
82export function useFocusVisible(props?: FocusVisibleProps): FocusVisibleResult;
83/**
84 * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
85 */
86export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {
87 isTextInput?: boolean;
88}): void;
89export interface FocusWithinProps {
90 /** Whether the focus within events should be disabled. */
91 isDisabled?: boolean;
92 /** Handler that is called when the target element or a descendant receives focus. */
93 onFocusWithin?: (e: FocusEvent) => void;
94 /** Handler that is called when the target element and all descendants lose focus. */
95 onBlurWithin?: (e: FocusEvent) => void;
96 /** Handler that is called when the the focus within state changes. */
97 onFocusWithinChange?: (isFocusWithin: boolean) => void;
98}
99export interface FocusWithinResult {
100 /** Props to spread onto the target element. */
101 focusWithinProps: DOMAttributes;
102}
103/**
104 * Handles focus events for the target and its descendants.
105 */
106export function useFocusWithin(props: FocusWithinProps): FocusWithinResult;
107export interface HoverProps extends HoverEvents {
108 /** Whether the hover events should be disabled. */
109 isDisabled?: boolean;
110}
111export interface HoverResult {
112 /** Props to spread on the target element. */
113 hoverProps: DOMAttributes;
114 isHovered: boolean;
115}
116/**
117 * Handles pointer hover interactions for an element. Normalizes behavior
118 * across browsers and platforms, and ignores emulated mouse events on touch devices.
119 */
120export function useHover(props: HoverProps): HoverResult;
121export interface InteractOutsideProps {
122 ref: RefObject<Element>;
123 onInteractOutside?: (e: SyntheticEvent) => void;
124 onInteractOutsideStart?: (e: SyntheticEvent) => void;
125 /** Whether the interact outside events should be disabled. */
126 isDisabled?: boolean;
127}
128/**
129 * Example, used in components like Dialogs and Popovers so they can close
130 * when a user clicks outside them.
131 */
132export function useInteractOutside(props: InteractOutsideProps): void;
133export interface KeyboardProps extends KeyboardEvents {
134 /** Whether the keyboard events should be disabled. */
135 isDisabled?: boolean;
136}
137export interface KeyboardResult {
138 /** Props to spread onto the target element. */
139 keyboardProps: DOMAttributes;
140}
141/**
142 * Handles keyboard interactions for a focusable element.
143 */
144export function useKeyboard(props: KeyboardProps): KeyboardResult;
145export interface MoveResult {
146 /** Props to spread on the target element. */
147 moveProps: DOMAttributes;
148}
149/**
150 * Handles move interactions across mouse, touch, and keyboard, including dragging with
151 * the mouse or touch, and using the arrow keys. Normalizes behavior across browsers and
152 * platforms, and ignores emulated mouse events on touch devices.
153 */
154export function useMove(props: MoveEvents): MoveResult;
155export interface ScrollWheelProps extends ScrollEvents {
156 /** Whether the scroll listener should be disabled. */
157 isDisabled?: boolean;
158}
159export function useScrollWheel(props: ScrollWheelProps, ref: RefObject<HTMLElement>): void;
160export interface LongPressProps {
161 /** Whether long press events should be disabled. */
162 isDisabled?: boolean;
163 /** Handler that is called when a long press interaction starts. */
164 onLongPressStart?: (e: LongPressEvent) => void;
165 /**
166 * Handler that is called when a long press interaction ends, either
167 * over the target or when the pointer leaves the target.
168 */
169 onLongPressEnd?: (e: LongPressEvent) => void;
170 /**
171 * Handler that is called when the threshold time is met while
172 * the press is over the target.
173 */
174 onLongPress?: (e: LongPressEvent) => void;
175 /**
176 * The amount of time in milliseconds to wait before triggering a long press.
177 * @default 500ms
178 */
179 threshold?: number;
180 /**
181 * A description for assistive techology users indicating that a long press
182 * action is available, e.g. "Long press to open menu".
183 */
184 accessibilityDescription?: string;
185}
186export interface LongPressResult {
187 /** Props to spread on the target element. */
188 longPressProps: DOMAttributes;
189}
190/**
191 * Handles long press interactions across mouse and touch devices. Supports a customizable time threshold,
192 * accessibility description, and normalizes behavior across browsers and devices.
193 */
194export function useLongPress(props: LongPressProps): LongPressResult;
195export type { MoveEvents } from '@react-types/shared';
196
197//# sourceMappingURL=types.d.ts.map