@react-aria/interactions 3.10.0 → 3.12.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/main.js +130 -127
- package/dist/main.js.map +1 -1
- package/dist/module.js +131 -128
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/useFocusVisible.ts +1 -2
- package/src/usePress.ts +46 -34
- package/src/utils.ts +0 -20
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/textSelection.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/context.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/usePress.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/Pressable.tsx","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/PressResponder.tsx","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/utils.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useFocus.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useFocusVisible.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useFocusWithin.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useHover.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useInteractOutside.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/createEventHandler.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useKeyboard.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useMove.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useScrollWheel.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/useLongPress.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/index.ts","packages/@react-aria/interactions/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {Pressable} from './Pressable';\nexport {PressResponder} from './PressResponder';\nexport {useFocus} from './useFocus';\nexport {\n isFocusVisible,\n getInteractionModality,\n setInteractionModality,\n useInteractionModality,\n useFocusVisible,\n useFocusVisibleListener\n} from './useFocusVisible';\nexport {useFocusWithin} from './useFocusWithin';\nexport {useHover} from './useHover';\nexport {useInteractOutside} from './useInteractOutside';\nexport {useKeyboard} from './useKeyboard';\nexport {useMove} from './useMove';\nexport {usePress} from './usePress';\nexport {useScrollWheel} from './useScrollWheel';\nexport {useLongPress} from './useLongPress';\n\nexport type {FocusProps, FocusResult} from './useFocus';\nexport type {FocusVisibleHandler, FocusVisibleResult, Modality} from './useFocusVisible';\nexport type {FocusWithinProps, FocusWithinResult} from './useFocusWithin';\nexport type {HoverProps, HoverResult} from './useHover';\nexport type {InteractOutsideProps} from './useInteractOutside';\nexport type {KeyboardProps, KeyboardResult} from './useKeyboard';\nexport type {PressProps, PressHookProps, PressResult} from './usePress';\nexport type {MoveEvents} from '@react-types/shared';\nexport type {MoveResult} from './useMove';\nexport type {LongPressProps, LongPressResult} from './useLongPress';\nexport type {ScrollWheelProps} from './useScrollWheel';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/interactions",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.12.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@babel/runtime": "^7.6.2",
|
|
21
|
-
"@react-aria/utils": "^3.
|
|
22
|
-
"@react-types/shared": "^3.
|
|
21
|
+
"@react-aria/utils": "^3.14.0",
|
|
22
|
+
"@react-types/shared": "^3.15.0"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
|
|
@@ -27,5 +27,5 @@
|
|
|
27
27
|
"publishConfig": {
|
|
28
28
|
"access": "public"
|
|
29
29
|
},
|
|
30
|
-
"gitHead": "
|
|
30
|
+
"gitHead": "9202ef59e8c104dd06ffe33148445ef7932a5d1b"
|
|
31
31
|
}
|
package/src/useFocusVisible.ts
CHANGED
|
@@ -15,8 +15,7 @@
|
|
|
15
15
|
// NOTICE file in the root directory of this source tree.
|
|
16
16
|
// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
|
|
17
17
|
|
|
18
|
-
import {isMac} from '@react-aria/utils';
|
|
19
|
-
import {isVirtualClick} from './utils';
|
|
18
|
+
import {isMac, isVirtualClick} from '@react-aria/utils';
|
|
20
19
|
import {useEffect, useState} from 'react';
|
|
21
20
|
|
|
22
21
|
export type Modality = 'keyboard' | 'pointer' | 'virtual';
|
package/src/usePress.ts
CHANGED
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
import {disableTextSelection, restoreTextSelection} from './textSelection';
|
|
19
19
|
import {DOMAttributes, FocusableElement, PointerType, PressEvents} from '@react-types/shared';
|
|
20
|
-
import {focusWithoutScrolling, mergeProps, useGlobalListeners, useSyncRef} from '@react-aria/utils';
|
|
21
|
-
import {isVirtualClick} from './utils';
|
|
20
|
+
import {focusWithoutScrolling, isVirtualClick, isVirtualPointerEvent, mergeProps, useGlobalListeners, useSyncRef} from '@react-aria/utils';
|
|
22
21
|
import {PressResponderContext} from './context';
|
|
23
22
|
import {RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
|
|
24
23
|
|
|
@@ -228,8 +227,8 @@ export function usePress(props: PressHookProps): PressResult {
|
|
|
228
227
|
|
|
229
228
|
let pressProps: DOMAttributes = {
|
|
230
229
|
onKeyDown(e) {
|
|
231
|
-
if (isValidKeyboardEvent(e.nativeEvent) && e.currentTarget.contains(e.target as Element)) {
|
|
232
|
-
if (shouldPreventDefaultKeyboard(e.target as Element)) {
|
|
230
|
+
if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target as Element)) {
|
|
231
|
+
if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) {
|
|
233
232
|
e.preventDefault();
|
|
234
233
|
}
|
|
235
234
|
e.stopPropagation();
|
|
@@ -246,10 +245,15 @@ export function usePress(props: PressHookProps): PressResult {
|
|
|
246
245
|
// instead of the same element where the key down event occurred.
|
|
247
246
|
addGlobalListener(document, 'keyup', onKeyUp, false);
|
|
248
247
|
}
|
|
248
|
+
} else if (e.key === 'Enter' && isHTMLAnchorLink(e.currentTarget)) {
|
|
249
|
+
// If the target is a link, we won't have handled this above because we want the default
|
|
250
|
+
// browser behavior to open the link when pressing Enter. But we still need to prevent
|
|
251
|
+
// default so that elements above do not also handle it (e.g. table row).
|
|
252
|
+
e.stopPropagation();
|
|
249
253
|
}
|
|
250
254
|
},
|
|
251
255
|
onKeyUp(e) {
|
|
252
|
-
if (isValidKeyboardEvent(e.nativeEvent) && !e.repeat && e.currentTarget.contains(e.target as Element)) {
|
|
256
|
+
if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && !e.repeat && e.currentTarget.contains(e.target as Element)) {
|
|
253
257
|
triggerPressUp(createEvent(state.target, e), 'keyboard');
|
|
254
258
|
}
|
|
255
259
|
},
|
|
@@ -284,8 +288,8 @@ export function usePress(props: PressHookProps): PressResult {
|
|
|
284
288
|
};
|
|
285
289
|
|
|
286
290
|
let onKeyUp = (e: KeyboardEvent) => {
|
|
287
|
-
if (state.isPressed && isValidKeyboardEvent(e)) {
|
|
288
|
-
if (shouldPreventDefaultKeyboard(e.target as Element)) {
|
|
291
|
+
if (state.isPressed && isValidKeyboardEvent(e, state.target)) {
|
|
292
|
+
if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) {
|
|
289
293
|
e.preventDefault();
|
|
290
294
|
}
|
|
291
295
|
e.stopPropagation();
|
|
@@ -297,7 +301,7 @@ export function usePress(props: PressHookProps): PressResult {
|
|
|
297
301
|
|
|
298
302
|
// If the target is a link, trigger the click method to open the URL,
|
|
299
303
|
// but defer triggering pressEnd until onClick event handler.
|
|
300
|
-
if (state.target instanceof HTMLElement &&
|
|
304
|
+
if (state.target instanceof HTMLElement && state.target.contains(target) && (isHTMLAnchorLink(state.target) || state.target.getAttribute('role') === 'link')) {
|
|
301
305
|
state.target.click();
|
|
302
306
|
}
|
|
303
307
|
}
|
|
@@ -662,22 +666,21 @@ export function usePress(props: PressHookProps): PressResult {
|
|
|
662
666
|
};
|
|
663
667
|
}
|
|
664
668
|
|
|
665
|
-
function isHTMLAnchorLink(target:
|
|
669
|
+
function isHTMLAnchorLink(target: Element): boolean {
|
|
666
670
|
return target.tagName === 'A' && target.hasAttribute('href');
|
|
667
671
|
}
|
|
668
672
|
|
|
669
|
-
function isValidKeyboardEvent(event: KeyboardEvent): boolean {
|
|
670
|
-
const {key, code
|
|
671
|
-
const element =
|
|
672
|
-
const {tagName, isContentEditable} = element;
|
|
673
|
+
function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Element): boolean {
|
|
674
|
+
const {key, code} = event;
|
|
675
|
+
const element = currentTarget as HTMLElement;
|
|
673
676
|
const role = element.getAttribute('role');
|
|
674
677
|
// Accessibility for keyboards. Space and Enter only.
|
|
675
678
|
// "Spacebar" is for IE 11
|
|
676
679
|
return (
|
|
677
680
|
(key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') &&
|
|
678
|
-
(
|
|
679
|
-
|
|
680
|
-
isContentEditable
|
|
681
|
+
!((element instanceof HTMLInputElement && !isValidInputKey(element, key)) ||
|
|
682
|
+
element instanceof HTMLTextAreaElement ||
|
|
683
|
+
element.isContentEditable) &&
|
|
681
684
|
// A link with a valid href should be handled natively,
|
|
682
685
|
// unless it also has role='button' and was triggered using Space.
|
|
683
686
|
(!isHTMLAnchorLink(element) || (role === 'button' && key !== 'Enter')) &&
|
|
@@ -769,24 +772,33 @@ function shouldPreventDefault(target: Element) {
|
|
|
769
772
|
return !(target instanceof HTMLElement) || !target.draggable;
|
|
770
773
|
}
|
|
771
774
|
|
|
772
|
-
function shouldPreventDefaultKeyboard(target: Element) {
|
|
773
|
-
|
|
775
|
+
function shouldPreventDefaultKeyboard(target: Element, key: string) {
|
|
776
|
+
if (target instanceof HTMLInputElement) {
|
|
777
|
+
return !isValidInputKey(target, key);
|
|
778
|
+
}
|
|
779
|
+
|
|
780
|
+
if (target instanceof HTMLButtonElement) {
|
|
781
|
+
return target.type !== 'submit';
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
return true;
|
|
774
785
|
}
|
|
775
786
|
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
787
|
+
const nonTextInputTypes = new Set([
|
|
788
|
+
'checkbox',
|
|
789
|
+
'radio',
|
|
790
|
+
'range',
|
|
791
|
+
'color',
|
|
792
|
+
'file',
|
|
793
|
+
'image',
|
|
794
|
+
'button',
|
|
795
|
+
'submit',
|
|
796
|
+
'reset'
|
|
797
|
+
]);
|
|
798
|
+
|
|
799
|
+
function isValidInputKey(target: HTMLInputElement, key: string) {
|
|
800
|
+
// Only space should toggle checkboxes and radios, not enter.
|
|
801
|
+
return target.type === 'checkbox' || target.type === 'radio'
|
|
802
|
+
? key === ' '
|
|
803
|
+
: nonTextInputTypes.has(target.type);
|
|
792
804
|
}
|
package/src/utils.ts
CHANGED
|
@@ -13,26 +13,6 @@
|
|
|
13
13
|
import {FocusEvent as ReactFocusEvent, useCallback, useRef} from 'react';
|
|
14
14
|
import {useLayoutEffect} from '@react-aria/utils';
|
|
15
15
|
|
|
16
|
-
// Original licensing for the following method can be found in the
|
|
17
|
-
// NOTICE file in the root directory of this source tree.
|
|
18
|
-
// See https://github.com/facebook/react/blob/3c713d513195a53788b3f8bb4b70279d68b15bcc/packages/react-interactions/events/src/dom/shared/index.js#L74-L87
|
|
19
|
-
|
|
20
|
-
// Keyboards, Assistive Technologies, and element.click() all produce a "virtual"
|
|
21
|
-
// click event. This is a method of inferring such clicks. Every browser except
|
|
22
|
-
// IE 11 only sets a zero value of "detail" for click events that are "virtual".
|
|
23
|
-
// However, IE 11 uses a zero value for all click events. For IE 11 we rely on
|
|
24
|
-
// the quirk that it produces click events that are of type PointerEvent, and
|
|
25
|
-
// where only the "virtual" click lacks a pointerType field.
|
|
26
|
-
|
|
27
|
-
export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
|
|
28
|
-
// JAWS/NVDA with Firefox.
|
|
29
|
-
if ((event as any).mozInputSource === 0 && event.isTrusted) {
|
|
30
|
-
return true;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
return event.detail === 0 && !(event as PointerEvent).pointerType;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
16
|
export class SyntheticFocusEvent implements ReactFocusEvent {
|
|
37
17
|
nativeEvent: FocusEvent;
|
|
38
18
|
target: Element;
|