1 | import { DOMAttributes, PressEvents, RefObject, FocusableElement, FocusEvents, HoverEvents, KeyboardEvents, MoveEvents, ScrollEvents, LongPressEvent } from "@react-types/shared";
|
2 | import React, { ReactElement, ReactNode, FocusEvent } from "react";
|
3 | export 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 | }
|
20 | export interface PressHookProps extends PressProps {
|
21 | /** A ref to the target element. */
|
22 | ref?: RefObject<Element | null>;
|
23 | }
|
24 | export 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 | */
|
35 | export function usePress(props: PressHookProps): PressResult;
|
36 | interface PressableProps extends PressProps {
|
37 | children: ReactElement<DOMAttributes, string>;
|
38 | }
|
39 | export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<HTMLElement>>;
|
40 | interface PressResponderProps extends PressProps {
|
41 | children: ReactNode;
|
42 | }
|
43 | export const PressResponder: React.ForwardRefExoticComponent<PressResponderProps & React.RefAttributes<FocusableElement>>;
|
44 | export function ClearPressResponder({ children }: {
|
45 | children: ReactNode;
|
46 | }): React.JSX.Element;
|
47 | export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
|
48 | /** Whether the focus events should be disabled. */
|
49 | isDisabled?: boolean;
|
50 | }
|
51 | export 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 | */
|
59 | export function useFocus<Target extends FocusableElement = FocusableElement>(props: FocusProps<Target>): FocusResult<Target>;
|
60 | export type Modality = 'keyboard' | 'pointer' | 'virtual';
|
61 | export type FocusVisibleHandler = (isFocusVisible: boolean) => void;
|
62 | export 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 | }
|
68 | export 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 | */
|
89 | export function addWindowFocusTracking(element?: HTMLElement | null): () => void;
|
90 | /**
|
91 | * If true, keyboard focus is visible.
|
92 | */
|
93 | export function isFocusVisible(): boolean;
|
94 | export function getInteractionModality(): Modality | null;
|
95 | export function setInteractionModality(modality: Modality): void;
|
96 | /**
|
97 | * Keeps state of the current modality.
|
98 | */
|
99 | export function useInteractionModality(): Modality | null;
|
100 | /**
|
101 | * Manages focus visible state for the page, and subscribes individual components for updates.
|
102 | */
|
103 | export function useFocusVisible(props?: FocusVisibleProps): FocusVisibleResult;
|
104 | /**
|
105 | * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
|
106 | */
|
107 | export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {
|
108 | isTextInput?: boolean;
|
109 | }): void;
|
110 | export 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 | }
|
120 | export 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 | */
|
127 | export function useFocusWithin(props: FocusWithinProps): FocusWithinResult;
|
128 | export interface HoverProps extends HoverEvents {
|
129 | /** Whether the hover events should be disabled. */
|
130 | isDisabled?: boolean;
|
131 | }
|
132 | export 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 | */
|
141 | export function useHover(props: HoverProps): HoverResult;
|
142 | export 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 | */
|
153 | export function useInteractOutside(props: InteractOutsideProps): void;
|
154 | export interface KeyboardProps extends KeyboardEvents {
|
155 | /** Whether the keyboard events should be disabled. */
|
156 | isDisabled?: boolean;
|
157 | }
|
158 | export interface KeyboardResult {
|
159 | /** Props to spread onto the target element. */
|
160 | keyboardProps: DOMAttributes;
|
161 | }
|
162 | /**
|
163 | * Handles keyboard interactions for a focusable element.
|
164 | */
|
165 | export function useKeyboard(props: KeyboardProps): KeyboardResult;
|
166 | export 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 | */
|
175 | export function useMove(props: MoveEvents): MoveResult;
|
176 | export interface ScrollWheelProps extends ScrollEvents {
|
177 | /** Whether the scroll listener should be disabled. */
|
178 | isDisabled?: boolean;
|
179 | }
|
180 | export function useScrollWheel(props: ScrollWheelProps, ref: RefObject<HTMLElement | null>): void;
|
181 | export 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 | }
|
207 | export 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 | */
|
215 | export function useLongPress(props: LongPressProps): LongPressResult;
|
216 | export type { PressEvent, PressEvents, MoveStartEvent, MoveMoveEvent, MoveEndEvent, MoveEvents, HoverEvent, HoverEvents, FocusEvents, KeyboardEvents } from '@react-types/shared';
|
217 |
|
218 | //# sourceMappingURL=types.d.ts.map
|