@react-aria/interactions 3.9.0 → 3.11.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 +63 -93
- package/dist/main.js.map +1 -1
- package/dist/module.js +44 -67
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +27 -26
- package/dist/types.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/DOMPropsContext.ts +6 -5
- package/src/DOMPropsResponder.tsx +1 -1
- package/src/PressResponder.tsx +2 -1
- package/src/Pressable.tsx +4 -3
- package/src/context.ts +2 -1
- package/src/index.ts +31 -12
- package/src/textSelection.ts +5 -5
- package/src/useDOMPropsResponder.ts +1 -1
- package/src/useFocus.ts +5 -5
- package/src/useFocusVisible.ts +3 -3
- package/src/useFocusWithin.ts +5 -4
- package/src/useHover.ts +7 -6
- package/src/useInteractOutside.ts +1 -1
- package/src/useKeyboard.ts +3 -4
- package/src/useLongPress.ts +5 -5
- package/src/useMove.ts +5 -5
- package/src/usePress.ts +81 -50
package/dist/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { DOMAttributes, PressEvents, FocusableElement, FocusEvents, HoverEvents, KeyboardEvents, MoveEvents, ScrollEvents, LongPressEvent } from "@react-types/shared";
|
|
2
|
+
import React, { RefObject, ReactElement, ReactNode, FocusEvent, SyntheticEvent } from "react";
|
|
3
3
|
export interface PressProps extends PressEvents {
|
|
4
4
|
/** Whether the target is in a controlled press state (e.g. an overlay it triggers is open). */
|
|
5
5
|
isPressed?: boolean;
|
|
@@ -19,13 +19,13 @@ export interface PressProps extends PressEvents {
|
|
|
19
19
|
}
|
|
20
20
|
export interface PressHookProps extends PressProps {
|
|
21
21
|
/** A ref to the target element. */
|
|
22
|
-
ref?: RefObject<
|
|
22
|
+
ref?: RefObject<Element>;
|
|
23
23
|
}
|
|
24
24
|
export interface PressResult {
|
|
25
25
|
/** Whether the target is currently pressed. */
|
|
26
26
|
isPressed: boolean;
|
|
27
27
|
/** Props to spread on the target element. */
|
|
28
|
-
pressProps:
|
|
28
|
+
pressProps: DOMAttributes;
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
31
31
|
* Handles press interactions across mouse, touch, keyboard, and screen readers.
|
|
@@ -34,35 +34,35 @@ export interface PressResult {
|
|
|
34
34
|
*/
|
|
35
35
|
export function usePress(props: PressHookProps): PressResult;
|
|
36
36
|
interface PressableProps extends PressProps {
|
|
37
|
-
children: ReactElement<
|
|
37
|
+
children: ReactElement<DOMAttributes, string>;
|
|
38
38
|
}
|
|
39
|
-
export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<
|
|
39
|
+
export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<Element>>;
|
|
40
40
|
interface PressResponderProps extends PressProps {
|
|
41
41
|
children: ReactNode;
|
|
42
42
|
}
|
|
43
|
-
export const PressResponder: React.ForwardRefExoticComponent<PressResponderProps & React.RefAttributes<
|
|
44
|
-
interface FocusProps extends FocusEvents {
|
|
43
|
+
export const PressResponder: React.ForwardRefExoticComponent<PressResponderProps & React.RefAttributes<FocusableElement>>;
|
|
44
|
+
export interface FocusProps extends FocusEvents {
|
|
45
45
|
/** Whether the focus events should be disabled. */
|
|
46
46
|
isDisabled?: boolean;
|
|
47
47
|
}
|
|
48
|
-
interface FocusResult {
|
|
48
|
+
export interface FocusResult {
|
|
49
49
|
/** Props to spread onto the target element. */
|
|
50
|
-
focusProps:
|
|
50
|
+
focusProps: DOMAttributes;
|
|
51
51
|
}
|
|
52
52
|
/**
|
|
53
53
|
* Handles focus events for the immediate target.
|
|
54
54
|
* Focus events on child elements will be ignored.
|
|
55
55
|
*/
|
|
56
56
|
export function useFocus(props: FocusProps): FocusResult;
|
|
57
|
-
type Modality = 'keyboard' | 'pointer' | 'virtual';
|
|
58
|
-
type FocusVisibleHandler = (isFocusVisible: boolean) => void;
|
|
57
|
+
export type Modality = 'keyboard' | 'pointer' | 'virtual';
|
|
58
|
+
export type FocusVisibleHandler = (isFocusVisible: boolean) => void;
|
|
59
59
|
interface FocusVisibleProps {
|
|
60
60
|
/** Whether the element is a text input. */
|
|
61
61
|
isTextInput?: boolean;
|
|
62
62
|
/** Whether the element will be auto focused. */
|
|
63
63
|
autoFocus?: boolean;
|
|
64
64
|
}
|
|
65
|
-
interface FocusVisibleResult {
|
|
65
|
+
export interface FocusVisibleResult {
|
|
66
66
|
/** Whether keyboard focus is visible globally. */
|
|
67
67
|
isFocusVisible: boolean;
|
|
68
68
|
}
|
|
@@ -86,7 +86,7 @@ export function useFocusVisible(props?: FocusVisibleProps): FocusVisibleResult;
|
|
|
86
86
|
export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {
|
|
87
87
|
isTextInput?: boolean;
|
|
88
88
|
}): void;
|
|
89
|
-
interface FocusWithinProps {
|
|
89
|
+
export interface FocusWithinProps {
|
|
90
90
|
/** Whether the focus within events should be disabled. */
|
|
91
91
|
isDisabled?: boolean;
|
|
92
92
|
/** Handler that is called when the target element or a descendant receives focus. */
|
|
@@ -96,9 +96,9 @@ interface FocusWithinProps {
|
|
|
96
96
|
/** Handler that is called when the the focus within state changes. */
|
|
97
97
|
onFocusWithinChange?: (isFocusWithin: boolean) => void;
|
|
98
98
|
}
|
|
99
|
-
interface FocusWithinResult {
|
|
99
|
+
export interface FocusWithinResult {
|
|
100
100
|
/** Props to spread onto the target element. */
|
|
101
|
-
focusWithinProps:
|
|
101
|
+
focusWithinProps: DOMAttributes;
|
|
102
102
|
}
|
|
103
103
|
/**
|
|
104
104
|
* Handles focus events for the target and its descendants.
|
|
@@ -108,9 +108,9 @@ export interface HoverProps extends HoverEvents {
|
|
|
108
108
|
/** Whether the hover events should be disabled. */
|
|
109
109
|
isDisabled?: boolean;
|
|
110
110
|
}
|
|
111
|
-
interface HoverResult {
|
|
111
|
+
export interface HoverResult {
|
|
112
112
|
/** Props to spread on the target element. */
|
|
113
|
-
hoverProps:
|
|
113
|
+
hoverProps: DOMAttributes;
|
|
114
114
|
isHovered: boolean;
|
|
115
115
|
}
|
|
116
116
|
/**
|
|
@@ -118,7 +118,7 @@ interface HoverResult {
|
|
|
118
118
|
* across browsers and platforms, and ignores emulated mouse events on touch devices.
|
|
119
119
|
*/
|
|
120
120
|
export function useHover(props: HoverProps): HoverResult;
|
|
121
|
-
interface InteractOutsideProps {
|
|
121
|
+
export interface InteractOutsideProps {
|
|
122
122
|
ref: RefObject<Element>;
|
|
123
123
|
onInteractOutside?: (e: SyntheticEvent) => void;
|
|
124
124
|
onInteractOutsideStart?: (e: SyntheticEvent) => void;
|
|
@@ -134,17 +134,17 @@ export interface KeyboardProps extends KeyboardEvents {
|
|
|
134
134
|
/** Whether the keyboard events should be disabled. */
|
|
135
135
|
isDisabled?: boolean;
|
|
136
136
|
}
|
|
137
|
-
interface KeyboardResult {
|
|
137
|
+
export interface KeyboardResult {
|
|
138
138
|
/** Props to spread onto the target element. */
|
|
139
|
-
keyboardProps:
|
|
139
|
+
keyboardProps: DOMAttributes;
|
|
140
140
|
}
|
|
141
141
|
/**
|
|
142
142
|
* Handles keyboard interactions for a focusable element.
|
|
143
143
|
*/
|
|
144
144
|
export function useKeyboard(props: KeyboardProps): KeyboardResult;
|
|
145
|
-
interface MoveResult {
|
|
145
|
+
export interface MoveResult {
|
|
146
146
|
/** Props to spread on the target element. */
|
|
147
|
-
moveProps:
|
|
147
|
+
moveProps: DOMAttributes;
|
|
148
148
|
}
|
|
149
149
|
/**
|
|
150
150
|
* Handles move interactions across mouse, touch, and keyboard, including dragging with
|
|
@@ -157,7 +157,7 @@ export interface ScrollWheelProps extends ScrollEvents {
|
|
|
157
157
|
isDisabled?: boolean;
|
|
158
158
|
}
|
|
159
159
|
export function useScrollWheel(props: ScrollWheelProps, ref: RefObject<HTMLElement>): void;
|
|
160
|
-
interface LongPressProps {
|
|
160
|
+
export interface LongPressProps {
|
|
161
161
|
/** Whether long press events should be disabled. */
|
|
162
162
|
isDisabled?: boolean;
|
|
163
163
|
/** Handler that is called when a long press interaction starts. */
|
|
@@ -183,14 +183,15 @@ interface LongPressProps {
|
|
|
183
183
|
*/
|
|
184
184
|
accessibilityDescription?: string;
|
|
185
185
|
}
|
|
186
|
-
interface LongPressResult {
|
|
186
|
+
export interface LongPressResult {
|
|
187
187
|
/** Props to spread on the target element. */
|
|
188
|
-
longPressProps:
|
|
188
|
+
longPressProps: DOMAttributes;
|
|
189
189
|
}
|
|
190
190
|
/**
|
|
191
191
|
* Handles long press interactions across mouse and touch devices. Supports a customizable time threshold,
|
|
192
192
|
* accessibility description, and normalizes behavior across browsers and devices.
|
|
193
193
|
*/
|
|
194
194
|
export function useLongPress(props: LongPressProps): LongPressResult;
|
|
195
|
+
export type { MoveEvents } from '@react-types/shared';
|
|
195
196
|
|
|
196
197
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;AGwBA,2BAA4B,SAAQ,WAAW;IAC7C,+FAA+F;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,yEAAyE;IACzE,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC;AAED,+BAAgC,SAAQ,UAAU;IAChD,mCAAmC;IACnC,GAAG,CAAC,EAAE,UAAU,
|
|
1
|
+
{"mappings":";;AGwBA,2BAA4B,SAAQ,WAAW;IAC7C,+FAA+F;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,yEAAyE;IACzE,yBAAyB,CAAC,EAAE,OAAO,CAAA;CACpC;AAED,+BAAgC,SAAQ,UAAU;IAChD,mCAAmC;IACnC,GAAG,CAAC,EAAE,UAAU,OAAO,CAAC,CAAA;CACzB;AAsBD;IACE,+CAA+C;IAC/C,SAAS,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,UAAU,EAAE,aAAa,CAAA;CAC1B;AAeD;;;;GAIG;AACH,yBAAyB,KAAK,EAAE,cAAc,GAAG,WAAW,CA+jB3D;AC1oBD,wBAAyB,SAAQ,UAAU;IACzC,QAAQ,EAAE,aAAa,aAAa,EAAE,MAAM,CAAC,CAAA;CAC9C;AAED,OAAO,MAAM,yFAUX,CAAC;ACbH,6BAA8B,SAAQ,UAAU;IAC9C,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,OAAO,MAAM,4GA8BX,CAAC;AC/BH,2BAA4B,SAAQ,WAAW;IAC7C,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;IACE,+CAA+C;IAC/C,UAAU,EAAE,aAAa,CAAA;CAC1B;AAED;;;GAGG;AACH,yBAAyB,KAAK,EAAE,UAAU,GAAG,WAAW,CA6CvD;AC3DD,uBAAuB,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAG1D,kCAAkC,CAAC,gBAAgB,OAAO,KAAK,IAAI,CAAC;AACpE;IACE,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;IACE,kDAAkD;IAClD,gBAAgB,OAAO,CAAA;CACxB;AA8HD;;GAEG;AACH,kCAAkC,OAAO,CAExC;AAED,0CAA0C,QAAQ,CAEjD;AAED,uCAAuC,QAAQ,EAAE,QAAQ,QAGxD;AAED;;GAEG;AACH,0CAA0C,QAAQ,CAgBjD;AAUD;;GAEG;AACH,gCAAgC,KAAK,GAAE,iBAAsB,GAAG,kBAAkB,CAQjF;AAED;;GAEG;AACH,wCAAwC,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAC,GAAG,IAAI,CAe/H;ACxND;IACE,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,qFAAqF;IACrF,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,sEAAsE;IACtE,mBAAmB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAA;CACvD;AAED;IACE,+CAA+C;IAC/C,gBAAgB,EAAE,aAAa,CAAA;CAChC;AAED;;GAEG;AACH,+BAA+B,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,CA2DzE;AC9ED,2BAA4B,SAAQ,WAAW;IAC7C,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;IACE,6CAA6C;IAC7C,UAAU,EAAE,aAAa,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAA;CACnB;AAoDD;;;GAGG;AACH,yBAAyB,KAAK,EAAE,UAAU,GAAG,WAAW,CAuHvD;AC1LD;IACE,GAAG,EAAE,UAAU,OAAO,CAAC,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,sBAAsB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;GAGG;AACH,mCAAmC,KAAK,EAAE,oBAAoB,QA0E7D;AE1FD,8BAA+B,SAAQ,cAAc;IACnD,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;IACE,+CAA+C;IAC/C,aAAa,EAAE,aAAa,CAAA;CAC7B;AAED;;GAEG;AACH,4BAA4B,KAAK,EAAE,aAAa,GAAG,cAAc,CAOhE;AClBD;IACE,6CAA6C;IAC7C,SAAS,EAAE,aAAa,CAAA;CACzB;AASD;;;;GAIG;AACH,wBAAwB,KAAK,EAAE,UAAU,GAAG,UAAU,CAkMrD;ACpND,iCAAkC,SAAQ,YAAY;IACpD,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAGD,+BAA+B,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,IAAI,CAkBzF;ACvBD;IACE,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC;AAED;IACE,6CAA6C;IAC7C,cAAc,EAAE,aAAa,CAAA;CAC9B;AAID;;;GAGG;AACH,6BAA6B,KAAK,EAAE,cAAc,GAAG,eAAe,CAwEnE;ACxFD,YAAY,EAAC,UAAU,EAAC,MAAM,qBAAqB,CAAC","sources":["packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/textSelection.ts","packages/@react-aria/interactions/src/packages/@react-aria/interactions/src/utils.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/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.11.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.13.
|
|
22
|
-
"@react-types/shared": "^3.
|
|
21
|
+
"@react-aria/utils": "^3.13.3",
|
|
22
|
+
"@react-types/shared": "^3.14.1"
|
|
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": "b03ef51e6317547dd0a840f151e59d039b1e1fd3"
|
|
31
31
|
}
|
package/src/DOMPropsContext.ts
CHANGED
|
@@ -10,16 +10,17 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
+
import {DOMAttributes} from '@react-types/shared';
|
|
13
14
|
import {mergeProps, useSyncRef} from '@react-aria/utils';
|
|
14
|
-
import React, {
|
|
15
|
+
import React, {MutableRefObject, RefObject, useContext} from 'react';
|
|
15
16
|
|
|
16
|
-
interface DOMPropsResponderProps extends
|
|
17
|
-
ref?: RefObject<
|
|
17
|
+
interface DOMPropsResponderProps extends DOMAttributes {
|
|
18
|
+
ref?: RefObject<Element>
|
|
18
19
|
}
|
|
19
20
|
|
|
20
|
-
interface IDOMPropsResponderContext extends
|
|
21
|
+
interface IDOMPropsResponderContext extends DOMAttributes {
|
|
21
22
|
register(): void,
|
|
22
|
-
ref?: MutableRefObject<
|
|
23
|
+
ref?: MutableRefObject<Element>
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
export const DOMPropsResponderContext = React.createContext<IDOMPropsResponderContext>(null);
|
|
@@ -18,7 +18,7 @@ interface DOMPropsResponderProps extends HoverProps {
|
|
|
18
18
|
children: ReactNode
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
export const DOMPropsResponder = React.forwardRef(({children, ...props}: DOMPropsResponderProps, ref: RefObject<
|
|
21
|
+
export const DOMPropsResponder = React.forwardRef(({children, ...props}: DOMPropsResponderProps, ref: RefObject<Element>) => {
|
|
22
22
|
let isRegistered = useRef(false);
|
|
23
23
|
let context = {
|
|
24
24
|
...props,
|
package/src/PressResponder.tsx
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
+
import {FocusableElement} from '@react-types/shared';
|
|
13
14
|
import {mergeProps, useSyncRef} from '@react-aria/utils';
|
|
14
15
|
import {PressProps} from './usePress';
|
|
15
16
|
import {PressResponderContext} from './context';
|
|
@@ -19,7 +20,7 @@ interface PressResponderProps extends PressProps {
|
|
|
19
20
|
children: ReactNode
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
export const PressResponder = React.forwardRef(({children, ...props}: PressResponderProps, ref: RefObject<
|
|
23
|
+
export const PressResponder = React.forwardRef(({children, ...props}: PressResponderProps, ref: RefObject<FocusableElement>) => {
|
|
23
24
|
let isRegistered = useRef(false);
|
|
24
25
|
let prevContext = useContext(PressResponderContext);
|
|
25
26
|
let context = mergeProps(prevContext || {}, {
|
package/src/Pressable.tsx
CHANGED
|
@@ -10,15 +10,16 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
+
import {DOMAttributes} from '@react-types/shared';
|
|
13
14
|
import {mergeProps} from '@react-aria/utils';
|
|
14
15
|
import {PressProps, usePress} from './usePress';
|
|
15
|
-
import React, {
|
|
16
|
+
import React, {ReactElement, RefObject, useRef} from 'react';
|
|
16
17
|
|
|
17
18
|
interface PressableProps extends PressProps {
|
|
18
|
-
children: ReactElement<
|
|
19
|
+
children: ReactElement<DOMAttributes, string>
|
|
19
20
|
}
|
|
20
21
|
|
|
21
|
-
export const Pressable = React.forwardRef(({children, ...props}: PressableProps, ref: RefObject<
|
|
22
|
+
export const Pressable = React.forwardRef(({children, ...props}: PressableProps, ref: RefObject<Element>) => {
|
|
22
23
|
let newRef = useRef();
|
|
23
24
|
ref = ref ?? newRef;
|
|
24
25
|
let {pressProps} = usePress({...props, ref});
|
package/src/context.ts
CHANGED
|
@@ -10,12 +10,13 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
+
import {FocusableElement} from '@react-types/shared';
|
|
13
14
|
import {PressProps} from './usePress';
|
|
14
15
|
import React, {MutableRefObject} from 'react';
|
|
15
16
|
|
|
16
17
|
interface IPressResponderContext extends PressProps {
|
|
17
18
|
register(): void,
|
|
18
|
-
ref?: MutableRefObject<
|
|
19
|
+
ref?: MutableRefObject<FocusableElement>
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
export const PressResponderContext = React.createContext<IPressResponderContext>(null);
|
package/src/index.ts
CHANGED
|
@@ -10,15 +10,34 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
export
|
|
14
|
-
export
|
|
15
|
-
export
|
|
16
|
-
export
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
export
|
|
13
|
+
export {Pressable} from './Pressable';
|
|
14
|
+
export {PressResponder} from './PressResponder';
|
|
15
|
+
export {useFocus} from './useFocus';
|
|
16
|
+
export {
|
|
17
|
+
isFocusVisible,
|
|
18
|
+
getInteractionModality,
|
|
19
|
+
setInteractionModality,
|
|
20
|
+
useInteractionModality,
|
|
21
|
+
useFocusVisible,
|
|
22
|
+
useFocusVisibleListener
|
|
23
|
+
} from './useFocusVisible';
|
|
24
|
+
export {useFocusWithin} from './useFocusWithin';
|
|
25
|
+
export {useHover} from './useHover';
|
|
26
|
+
export {useInteractOutside} from './useInteractOutside';
|
|
27
|
+
export {useKeyboard} from './useKeyboard';
|
|
28
|
+
export {useMove} from './useMove';
|
|
29
|
+
export {usePress} from './usePress';
|
|
30
|
+
export {useScrollWheel} from './useScrollWheel';
|
|
31
|
+
export {useLongPress} from './useLongPress';
|
|
32
|
+
|
|
33
|
+
export type {FocusProps, FocusResult} from './useFocus';
|
|
34
|
+
export type {FocusVisibleHandler, FocusVisibleResult, Modality} from './useFocusVisible';
|
|
35
|
+
export type {FocusWithinProps, FocusWithinResult} from './useFocusWithin';
|
|
36
|
+
export type {HoverProps, HoverResult} from './useHover';
|
|
37
|
+
export type {InteractOutsideProps} from './useInteractOutside';
|
|
38
|
+
export type {KeyboardProps, KeyboardResult} from './useKeyboard';
|
|
39
|
+
export type {PressProps, PressHookProps, PressResult} from './usePress';
|
|
40
|
+
export type {MoveEvents} from '@react-types/shared';
|
|
41
|
+
export type {MoveResult} from './useMove';
|
|
42
|
+
export type {LongPressProps, LongPressResult} from './useLongPress';
|
|
43
|
+
export type {ScrollWheelProps} from './useScrollWheel';
|
package/src/textSelection.ts
CHANGED
|
@@ -31,9 +31,9 @@ type State = 'default' | 'disabled' | 'restoring';
|
|
|
31
31
|
// rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
|
|
32
32
|
let state: State = 'default';
|
|
33
33
|
let savedUserSelect = '';
|
|
34
|
-
let modifiedElementMap = new WeakMap<
|
|
34
|
+
let modifiedElementMap = new WeakMap<Element, string>();
|
|
35
35
|
|
|
36
|
-
export function disableTextSelection(target?:
|
|
36
|
+
export function disableTextSelection(target?: Element) {
|
|
37
37
|
if (isIOS()) {
|
|
38
38
|
if (state === 'default') {
|
|
39
39
|
savedUserSelect = document.documentElement.style.webkitUserSelect;
|
|
@@ -41,7 +41,7 @@ export function disableTextSelection(target?: HTMLElement) {
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
state = 'disabled';
|
|
44
|
-
} else if (target) {
|
|
44
|
+
} else if (target instanceof HTMLElement || target instanceof SVGElement) {
|
|
45
45
|
// If not iOS, store the target's original user-select and change to user-select: none
|
|
46
46
|
// Ignore state since it doesn't apply for non iOS
|
|
47
47
|
modifiedElementMap.set(target, target.style.userSelect);
|
|
@@ -49,7 +49,7 @@ export function disableTextSelection(target?: HTMLElement) {
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
export function restoreTextSelection(target?:
|
|
52
|
+
export function restoreTextSelection(target?: Element) {
|
|
53
53
|
if (isIOS()) {
|
|
54
54
|
// If the state is already default, there's nothing to do.
|
|
55
55
|
// If it is restoring, then there's no need to queue a second restore.
|
|
@@ -76,7 +76,7 @@ export function restoreTextSelection(target?: HTMLElement) {
|
|
|
76
76
|
}
|
|
77
77
|
});
|
|
78
78
|
}, 300);
|
|
79
|
-
} else {
|
|
79
|
+
} else if (target instanceof HTMLElement || target instanceof SVGElement) {
|
|
80
80
|
// If not iOS, restore the target's original user-select if any
|
|
81
81
|
// Ignore state since it doesn't apply for non iOS
|
|
82
82
|
if (target && modifiedElementMap.has(target)) {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import {RefObject} from 'react';
|
|
14
14
|
import {useDOMPropsResponderContext} from './DOMPropsContext';
|
|
15
15
|
|
|
16
|
-
export function useDOMPropsResponder(domRef: RefObject<
|
|
16
|
+
export function useDOMPropsResponder(domRef: RefObject<Element>) {
|
|
17
17
|
|
|
18
18
|
let domProps = useDOMPropsResponderContext({ref: domRef}) || {};
|
|
19
19
|
|
package/src/useFocus.ts
CHANGED
|
@@ -15,18 +15,18 @@
|
|
|
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 {
|
|
19
|
-
import {
|
|
18
|
+
import {DOMAttributes, FocusEvents} from '@react-types/shared';
|
|
19
|
+
import {FocusEvent, useCallback} from 'react';
|
|
20
20
|
import {useSyntheticBlurEvent} from './utils';
|
|
21
21
|
|
|
22
|
-
interface FocusProps extends FocusEvents {
|
|
22
|
+
export interface FocusProps extends FocusEvents {
|
|
23
23
|
/** Whether the focus events should be disabled. */
|
|
24
24
|
isDisabled?: boolean
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
interface FocusResult {
|
|
27
|
+
export interface FocusResult {
|
|
28
28
|
/** Props to spread onto the target element. */
|
|
29
|
-
focusProps:
|
|
29
|
+
focusProps: DOMAttributes
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
/**
|
package/src/useFocusVisible.ts
CHANGED
|
@@ -19,10 +19,10 @@ import {isMac} from '@react-aria/utils';
|
|
|
19
19
|
import {isVirtualClick} from './utils';
|
|
20
20
|
import {useEffect, useState} from 'react';
|
|
21
21
|
|
|
22
|
-
type Modality = 'keyboard' | 'pointer' | 'virtual';
|
|
22
|
+
export type Modality = 'keyboard' | 'pointer' | 'virtual';
|
|
23
23
|
type HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent;
|
|
24
24
|
type Handler = (modality: Modality, e: HandlerEvent) => void;
|
|
25
|
-
type FocusVisibleHandler = (isFocusVisible: boolean) => void;
|
|
25
|
+
export type FocusVisibleHandler = (isFocusVisible: boolean) => void;
|
|
26
26
|
interface FocusVisibleProps {
|
|
27
27
|
/** Whether the element is a text input. */
|
|
28
28
|
isTextInput?: boolean,
|
|
@@ -30,7 +30,7 @@ interface FocusVisibleProps {
|
|
|
30
30
|
autoFocus?: boolean
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
interface FocusVisibleResult {
|
|
33
|
+
export interface FocusVisibleResult {
|
|
34
34
|
/** Whether keyboard focus is visible globally. */
|
|
35
35
|
isFocusVisible: boolean
|
|
36
36
|
}
|
package/src/useFocusWithin.ts
CHANGED
|
@@ -15,10 +15,11 @@
|
|
|
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 {
|
|
18
|
+
import {DOMAttributes} from '@react-types/shared';
|
|
19
|
+
import {FocusEvent, useCallback, useRef} from 'react';
|
|
19
20
|
import {useSyntheticBlurEvent} from './utils';
|
|
20
21
|
|
|
21
|
-
interface FocusWithinProps {
|
|
22
|
+
export interface FocusWithinProps {
|
|
22
23
|
/** Whether the focus within events should be disabled. */
|
|
23
24
|
isDisabled?: boolean,
|
|
24
25
|
/** Handler that is called when the target element or a descendant receives focus. */
|
|
@@ -29,9 +30,9 @@ interface FocusWithinProps {
|
|
|
29
30
|
onFocusWithinChange?: (isFocusWithin: boolean) => void
|
|
30
31
|
}
|
|
31
32
|
|
|
32
|
-
interface FocusWithinResult {
|
|
33
|
+
export interface FocusWithinResult {
|
|
33
34
|
/** Props to spread onto the target element. */
|
|
34
|
-
focusWithinProps:
|
|
35
|
+
focusWithinProps: DOMAttributes
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
/**
|
package/src/useHover.ts
CHANGED
|
@@ -15,17 +15,18 @@
|
|
|
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 {DOMAttributes} from '@react-types/shared';
|
|
18
19
|
import {HoverEvents} from '@react-types/shared';
|
|
19
|
-
import {
|
|
20
|
+
import {useEffect, useMemo, useRef, useState} from 'react';
|
|
20
21
|
|
|
21
22
|
export interface HoverProps extends HoverEvents {
|
|
22
23
|
/** Whether the hover events should be disabled. */
|
|
23
24
|
isDisabled?: boolean
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
interface HoverResult {
|
|
27
|
+
export interface HoverResult {
|
|
27
28
|
/** Props to spread on the target element. */
|
|
28
|
-
hoverProps:
|
|
29
|
+
hoverProps: DOMAttributes,
|
|
29
30
|
isHovered: boolean
|
|
30
31
|
}
|
|
31
32
|
|
|
@@ -152,7 +153,7 @@ export function useHover(props: HoverProps): HoverResult {
|
|
|
152
153
|
setHovered(false);
|
|
153
154
|
};
|
|
154
155
|
|
|
155
|
-
let hoverProps:
|
|
156
|
+
let hoverProps: DOMAttributes = {};
|
|
156
157
|
|
|
157
158
|
if (typeof PointerEvent !== 'undefined') {
|
|
158
159
|
hoverProps.onPointerEnter = (e) => {
|
|
@@ -164,7 +165,7 @@ export function useHover(props: HoverProps): HoverResult {
|
|
|
164
165
|
};
|
|
165
166
|
|
|
166
167
|
hoverProps.onPointerLeave = (e) => {
|
|
167
|
-
if (!isDisabled && e.currentTarget.contains(e.target as
|
|
168
|
+
if (!isDisabled && e.currentTarget.contains(e.target as Element)) {
|
|
168
169
|
triggerHoverEnd(e, e.pointerType);
|
|
169
170
|
}
|
|
170
171
|
};
|
|
@@ -182,7 +183,7 @@ export function useHover(props: HoverProps): HoverResult {
|
|
|
182
183
|
};
|
|
183
184
|
|
|
184
185
|
hoverProps.onMouseLeave = (e) => {
|
|
185
|
-
if (!isDisabled && e.currentTarget.contains(e.target as
|
|
186
|
+
if (!isDisabled && e.currentTarget.contains(e.target as Element)) {
|
|
186
187
|
triggerHoverEnd(e, 'mouse');
|
|
187
188
|
}
|
|
188
189
|
};
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
import {RefObject, SyntheticEvent, useEffect, useRef} from 'react';
|
|
19
19
|
|
|
20
|
-
interface InteractOutsideProps {
|
|
20
|
+
export interface InteractOutsideProps {
|
|
21
21
|
ref: RefObject<Element>,
|
|
22
22
|
onInteractOutside?: (e: SyntheticEvent) => void,
|
|
23
23
|
onInteractOutsideStart?: (e: SyntheticEvent) => void,
|
package/src/useKeyboard.ts
CHANGED
|
@@ -11,17 +11,16 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import {createEventHandler} from './createEventHandler';
|
|
14
|
-
import {
|
|
15
|
-
import {KeyboardEvents} from '@react-types/shared';
|
|
14
|
+
import {DOMAttributes, KeyboardEvents} from '@react-types/shared';
|
|
16
15
|
|
|
17
16
|
export interface KeyboardProps extends KeyboardEvents {
|
|
18
17
|
/** Whether the keyboard events should be disabled. */
|
|
19
18
|
isDisabled?: boolean
|
|
20
19
|
}
|
|
21
20
|
|
|
22
|
-
interface KeyboardResult {
|
|
21
|
+
export interface KeyboardResult {
|
|
23
22
|
/** Props to spread onto the target element. */
|
|
24
|
-
keyboardProps:
|
|
23
|
+
keyboardProps: DOMAttributes
|
|
25
24
|
}
|
|
26
25
|
|
|
27
26
|
/**
|
package/src/useLongPress.ts
CHANGED
|
@@ -10,12 +10,12 @@
|
|
|
10
10
|
* governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
import {
|
|
14
|
-
import {LongPressEvent} from '@react-types/shared';
|
|
13
|
+
import {DOMAttributes, LongPressEvent} from '@react-types/shared';
|
|
15
14
|
import {mergeProps, useDescription, useGlobalListeners} from '@react-aria/utils';
|
|
16
15
|
import {usePress} from './usePress';
|
|
16
|
+
import {useRef} from 'react';
|
|
17
17
|
|
|
18
|
-
interface LongPressProps {
|
|
18
|
+
export interface LongPressProps {
|
|
19
19
|
/** Whether long press events should be disabled. */
|
|
20
20
|
isDisabled?: boolean,
|
|
21
21
|
/** Handler that is called when a long press interaction starts. */
|
|
@@ -42,9 +42,9 @@ interface LongPressProps {
|
|
|
42
42
|
accessibilityDescription?: string
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
interface LongPressResult {
|
|
45
|
+
export interface LongPressResult {
|
|
46
46
|
/** Props to spread on the target element. */
|
|
47
|
-
longPressProps:
|
|
47
|
+
longPressProps: DOMAttributes
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
const DEFAULT_THRESHOLD = 500;
|
package/src/useMove.ts
CHANGED
|
@@ -11,13 +11,13 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import {disableTextSelection, restoreTextSelection} from './textSelection';
|
|
14
|
-
import {MoveEvents, PointerType} from '@react-types/shared';
|
|
15
|
-
import React, {
|
|
14
|
+
import {DOMAttributes, MoveEvents, PointerType} from '@react-types/shared';
|
|
15
|
+
import React, {useMemo, useRef} from 'react';
|
|
16
16
|
import {useGlobalListeners} from '@react-aria/utils';
|
|
17
17
|
|
|
18
|
-
interface MoveResult {
|
|
18
|
+
export interface MoveResult {
|
|
19
19
|
/** Props to spread on the target element. */
|
|
20
|
-
moveProps:
|
|
20
|
+
moveProps: DOMAttributes
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
interface EventBase {
|
|
@@ -44,7 +44,7 @@ export function useMove(props: MoveEvents): MoveResult {
|
|
|
44
44
|
let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
|
|
45
45
|
|
|
46
46
|
let moveProps = useMemo(() => {
|
|
47
|
-
let moveProps:
|
|
47
|
+
let moveProps: DOMAttributes = {};
|
|
48
48
|
|
|
49
49
|
let start = () => {
|
|
50
50
|
disableTextSelection();
|