UNPKG

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