@react-aria/interactions 3.27.0 → 3.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/import.mjs +21 -15
- package/dist/main.js +45 -39
- package/dist/main.js.map +1 -1
- package/dist/module.js +21 -15
- package/dist/module.js.map +1 -1
- package/dist/types/src/index.d.ts +31 -0
- package/package.json +16 -15
- package/src/index.ts +31 -35
- package/dist/PressResponder.main.js +0 -61
- package/dist/PressResponder.main.js.map +0 -1
- package/dist/PressResponder.mjs +0 -51
- package/dist/PressResponder.module.js +0 -51
- package/dist/PressResponder.module.js.map +0 -1
- package/dist/Pressable.main.js +0 -69
- package/dist/Pressable.main.js.map +0 -1
- package/dist/Pressable.mjs +0 -60
- package/dist/Pressable.module.js +0 -60
- package/dist/Pressable.module.js.map +0 -1
- package/dist/context.main.js +0 -30
- package/dist/context.main.js.map +0 -1
- package/dist/context.mjs +0 -21
- package/dist/context.module.js +0 -21
- package/dist/context.module.js.map +0 -1
- package/dist/createEventHandler.main.js +0 -46
- package/dist/createEventHandler.main.js.map +0 -1
- package/dist/createEventHandler.mjs +0 -41
- package/dist/createEventHandler.module.js +0 -41
- package/dist/createEventHandler.module.js.map +0 -1
- package/dist/focusSafely.main.js +0 -40
- package/dist/focusSafely.main.js.map +0 -1
- package/dist/focusSafely.mjs +0 -35
- package/dist/focusSafely.module.js +0 -35
- package/dist/focusSafely.module.js.map +0 -1
- package/dist/textSelection.main.js +0 -77
- package/dist/textSelection.main.js.map +0 -1
- package/dist/textSelection.mjs +0 -71
- package/dist/textSelection.module.js +0 -71
- package/dist/textSelection.module.js.map +0 -1
- package/dist/types.d.ts +0 -255
- package/dist/types.d.ts.map +0 -1
- package/dist/useFocus.main.js +0 -65
- package/dist/useFocus.main.js.map +0 -1
- package/dist/useFocus.mjs +0 -60
- package/dist/useFocus.module.js +0 -60
- package/dist/useFocus.module.js.map +0 -1
- package/dist/useFocusVisible.main.js +0 -265
- package/dist/useFocusVisible.main.js.map +0 -1
- package/dist/useFocusVisible.mjs +0 -253
- package/dist/useFocusVisible.module.js +0 -253
- package/dist/useFocusVisible.module.js.map +0 -1
- package/dist/useFocusWithin.main.js +0 -105
- package/dist/useFocusWithin.main.js.map +0 -1
- package/dist/useFocusWithin.mjs +0 -100
- package/dist/useFocusWithin.module.js +0 -100
- package/dist/useFocusWithin.module.js.map +0 -1
- package/dist/useFocusable.main.js +0 -113
- package/dist/useFocusable.main.js.map +0 -1
- package/dist/useFocusable.mjs +0 -101
- package/dist/useFocusable.module.js +0 -101
- package/dist/useFocusable.module.js.map +0 -1
- package/dist/useHover.main.js +0 -159
- package/dist/useHover.main.js.map +0 -1
- package/dist/useHover.mjs +0 -154
- package/dist/useHover.module.js +0 -154
- package/dist/useHover.module.js.map +0 -1
- package/dist/useInteractOutside.main.js +0 -106
- package/dist/useInteractOutside.main.js.map +0 -1
- package/dist/useInteractOutside.mjs +0 -101
- package/dist/useInteractOutside.module.js +0 -101
- package/dist/useInteractOutside.module.js.map +0 -1
- package/dist/useKeyboard.main.js +0 -30
- package/dist/useKeyboard.main.js.map +0 -1
- package/dist/useKeyboard.mjs +0 -25
- package/dist/useKeyboard.module.js +0 -25
- package/dist/useKeyboard.module.js.map +0 -1
- package/dist/useLongPress.main.js +0 -86
- package/dist/useLongPress.main.js.map +0 -1
- package/dist/useLongPress.mjs +0 -81
- package/dist/useLongPress.module.js +0 -81
- package/dist/useLongPress.module.js.map +0 -1
- package/dist/useMove.main.js +0 -272
- package/dist/useMove.main.js.map +0 -1
- package/dist/useMove.mjs +0 -267
- package/dist/useMove.module.js +0 -267
- package/dist/useMove.module.js.map +0 -1
- package/dist/usePress.main.js +0 -763
- package/dist/usePress.main.js.map +0 -1
- package/dist/usePress.mjs +0 -758
- package/dist/usePress.module.js +0 -758
- package/dist/usePress.module.js.map +0 -1
- package/dist/useScrollWheel.main.js +0 -41
- package/dist/useScrollWheel.main.js.map +0 -1
- package/dist/useScrollWheel.mjs +0 -36
- package/dist/useScrollWheel.module.js +0 -36
- package/dist/useScrollWheel.module.js.map +0 -1
- package/dist/utils.main.js +0 -163
- package/dist/utils.main.js.map +0 -1
- package/dist/utils.mjs +0 -154
- package/dist/utils.module.js +0 -154
- package/dist/utils.module.js.map +0 -1
- package/src/PressResponder.tsx +0 -67
- package/src/Pressable.tsx +0 -97
- package/src/context.ts +0 -23
- package/src/createEventHandler.ts +0 -55
- package/src/focusSafely.ts +0 -45
- package/src/textSelection.ts +0 -101
- package/src/useFocus.ts +0 -87
- package/src/useFocusVisible.ts +0 -357
- package/src/useFocusWithin.ts +0 -132
- package/src/useFocusable.tsx +0 -191
- package/src/useHover.ts +0 -222
- package/src/useInteractOutside.ts +0 -142
- package/src/useKeyboard.ts +0 -36
- package/src/useLongPress.ts +0 -135
- package/src/useMove.ts +0 -259
- package/src/usePress.ts +0 -1093
- package/src/useScrollWheel.ts +0 -41
- package/src/utils.ts +0 -174
package/src/useScrollWheel.ts
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright 2021 Adobe. All rights reserved.
|
|
3
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
*
|
|
7
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
* governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
import {RefObject, ScrollEvents} from '@react-types/shared';
|
|
14
|
-
import {useCallback} from 'react';
|
|
15
|
-
import {useEvent} from '@react-aria/utils';
|
|
16
|
-
|
|
17
|
-
export interface ScrollWheelProps extends ScrollEvents {
|
|
18
|
-
/** Whether the scroll listener should be disabled. */
|
|
19
|
-
isDisabled?: boolean
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// scroll wheel needs to be added not passively so it's cancelable, small helper hook to remember that
|
|
23
|
-
export function useScrollWheel(props: ScrollWheelProps, ref: RefObject<HTMLElement | null>): void {
|
|
24
|
-
let {onScroll, isDisabled} = props;
|
|
25
|
-
let onScrollHandler = useCallback((e) => {
|
|
26
|
-
// If the ctrlKey is pressed, this is a zoom event, do nothing.
|
|
27
|
-
if (e.ctrlKey) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
// stop scrolling the page
|
|
32
|
-
e.preventDefault();
|
|
33
|
-
e.stopPropagation();
|
|
34
|
-
|
|
35
|
-
if (onScroll) {
|
|
36
|
-
onScroll({deltaX: e.deltaX, deltaY: e.deltaY});
|
|
37
|
-
}
|
|
38
|
-
}, [onScroll]);
|
|
39
|
-
|
|
40
|
-
useEvent(ref, 'wheel', isDisabled ? undefined : onScrollHandler);
|
|
41
|
-
}
|
package/src/utils.ts
DELETED
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
*
|
|
7
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
* governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
import {FocusableElement} from '@react-types/shared';
|
|
14
|
-
import {focusWithoutScrolling, getOwnerWindow, isFocusable, useLayoutEffect} from '@react-aria/utils';
|
|
15
|
-
import {FocusEvent as ReactFocusEvent, SyntheticEvent, useCallback, useRef} from 'react';
|
|
16
|
-
|
|
17
|
-
// Turn a native event into a React synthetic event.
|
|
18
|
-
export function createSyntheticEvent<E extends SyntheticEvent>(nativeEvent: Event): E {
|
|
19
|
-
let event = nativeEvent as any as E;
|
|
20
|
-
event.nativeEvent = nativeEvent;
|
|
21
|
-
event.isDefaultPrevented = () => event.defaultPrevented;
|
|
22
|
-
// cancelBubble is technically deprecated in the spec, but still supported in all browsers.
|
|
23
|
-
event.isPropagationStopped = () => (event as any).cancelBubble;
|
|
24
|
-
event.persist = () => {};
|
|
25
|
-
return event;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
export function setEventTarget(event: Event, target: Element): void {
|
|
29
|
-
Object.defineProperty(event, 'target', {value: target});
|
|
30
|
-
Object.defineProperty(event, 'currentTarget', {value: target});
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export function useSyntheticBlurEvent<Target extends Element = Element>(onBlur: (e: ReactFocusEvent<Target>) => void): (e: ReactFocusEvent<Target>) => void {
|
|
34
|
-
let stateRef = useRef({
|
|
35
|
-
isFocused: false,
|
|
36
|
-
observer: null as MutationObserver | null
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
// Clean up MutationObserver on unmount. See below.
|
|
40
|
-
|
|
41
|
-
useLayoutEffect(() => {
|
|
42
|
-
const state = stateRef.current;
|
|
43
|
-
return () => {
|
|
44
|
-
if (state.observer) {
|
|
45
|
-
state.observer.disconnect();
|
|
46
|
-
state.observer = null;
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
}, []);
|
|
50
|
-
|
|
51
|
-
// This function is called during a React onFocus event.
|
|
52
|
-
return useCallback((e: ReactFocusEvent<Target>) => {
|
|
53
|
-
// React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
|
|
54
|
-
// Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
|
|
55
|
-
// MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
|
|
56
|
-
// For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
|
|
57
|
-
if (
|
|
58
|
-
e.target instanceof HTMLButtonElement ||
|
|
59
|
-
e.target instanceof HTMLInputElement ||
|
|
60
|
-
e.target instanceof HTMLTextAreaElement ||
|
|
61
|
-
e.target instanceof HTMLSelectElement
|
|
62
|
-
) {
|
|
63
|
-
stateRef.current.isFocused = true;
|
|
64
|
-
|
|
65
|
-
let target = e.target;
|
|
66
|
-
let onBlurHandler: EventListenerOrEventListenerObject | null = (e) => {
|
|
67
|
-
stateRef.current.isFocused = false;
|
|
68
|
-
|
|
69
|
-
if (target.disabled) {
|
|
70
|
-
// For backward compatibility, dispatch a (fake) React synthetic event.
|
|
71
|
-
let event = createSyntheticEvent<ReactFocusEvent<Target>>(e);
|
|
72
|
-
onBlur?.(event);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
// We no longer need the MutationObserver once the target is blurred.
|
|
76
|
-
if (stateRef.current.observer) {
|
|
77
|
-
stateRef.current.observer.disconnect();
|
|
78
|
-
stateRef.current.observer = null;
|
|
79
|
-
}
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
target.addEventListener('focusout', onBlurHandler, {once: true});
|
|
83
|
-
|
|
84
|
-
stateRef.current.observer = new MutationObserver(() => {
|
|
85
|
-
if (stateRef.current.isFocused && target.disabled) {
|
|
86
|
-
stateRef.current.observer?.disconnect();
|
|
87
|
-
let relatedTargetEl = target === document.activeElement ? null : document.activeElement;
|
|
88
|
-
target.dispatchEvent(new FocusEvent('blur', {relatedTarget: relatedTargetEl}));
|
|
89
|
-
target.dispatchEvent(new FocusEvent('focusout', {bubbles: true, relatedTarget: relatedTargetEl}));
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
stateRef.current.observer.observe(target, {attributes: true, attributeFilter: ['disabled']});
|
|
94
|
-
}
|
|
95
|
-
}, [onBlur]);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
export let ignoreFocusEvent = false;
|
|
99
|
-
|
|
100
|
-
/**
|
|
101
|
-
* This function prevents the next focus event fired on `target`, without using `event.preventDefault()`.
|
|
102
|
-
* It works by waiting for the series of focus events to occur, and reverts focus back to where it was before.
|
|
103
|
-
* It also makes these events mostly non-observable by using a capturing listener on the window and stopping propagation.
|
|
104
|
-
*/
|
|
105
|
-
export function preventFocus(target: FocusableElement | null): (() => void) | undefined {
|
|
106
|
-
// The browser will focus the nearest focusable ancestor of our target.
|
|
107
|
-
while (target && !isFocusable(target)) {
|
|
108
|
-
target = target.parentElement;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
let window = getOwnerWindow(target);
|
|
112
|
-
let activeElement = window.document.activeElement as FocusableElement | null;
|
|
113
|
-
if (!activeElement || activeElement === target) {
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
ignoreFocusEvent = true;
|
|
118
|
-
let isRefocusing = false;
|
|
119
|
-
let onBlur = (e: FocusEvent) => {
|
|
120
|
-
if (e.target === activeElement || isRefocusing) {
|
|
121
|
-
e.stopImmediatePropagation();
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
let onFocusOut = (e: FocusEvent) => {
|
|
126
|
-
if (e.target === activeElement || isRefocusing) {
|
|
127
|
-
e.stopImmediatePropagation();
|
|
128
|
-
|
|
129
|
-
// If there was no focusable ancestor, we don't expect a focus event.
|
|
130
|
-
// Re-focus the original active element here.
|
|
131
|
-
if (!target && !isRefocusing) {
|
|
132
|
-
isRefocusing = true;
|
|
133
|
-
focusWithoutScrolling(activeElement);
|
|
134
|
-
cleanup();
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
};
|
|
138
|
-
|
|
139
|
-
let onFocus = (e: FocusEvent) => {
|
|
140
|
-
if (e.target === target || isRefocusing) {
|
|
141
|
-
e.stopImmediatePropagation();
|
|
142
|
-
}
|
|
143
|
-
};
|
|
144
|
-
|
|
145
|
-
let onFocusIn = (e: FocusEvent) => {
|
|
146
|
-
if (e.target === target || isRefocusing) {
|
|
147
|
-
e.stopImmediatePropagation();
|
|
148
|
-
|
|
149
|
-
if (!isRefocusing) {
|
|
150
|
-
isRefocusing = true;
|
|
151
|
-
focusWithoutScrolling(activeElement);
|
|
152
|
-
cleanup();
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
window.addEventListener('blur', onBlur, true);
|
|
158
|
-
window.addEventListener('focusout', onFocusOut, true);
|
|
159
|
-
window.addEventListener('focusin', onFocusIn, true);
|
|
160
|
-
window.addEventListener('focus', onFocus, true);
|
|
161
|
-
|
|
162
|
-
let cleanup = () => {
|
|
163
|
-
cancelAnimationFrame(raf);
|
|
164
|
-
window.removeEventListener('blur', onBlur, true);
|
|
165
|
-
window.removeEventListener('focusout', onFocusOut, true);
|
|
166
|
-
window.removeEventListener('focusin', onFocusIn, true);
|
|
167
|
-
window.removeEventListener('focus', onFocus, true);
|
|
168
|
-
ignoreFocusEvent = false;
|
|
169
|
-
isRefocusing = false;
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
let raf = requestAnimationFrame(cleanup);
|
|
173
|
-
return cleanup;
|
|
174
|
-
}
|