@react-aria/dnd 3.0.0-alpha.4 → 3.0.0-alpha.7
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 +434 -397
- package/dist/main.js.map +1 -1
- package/dist/module.js +428 -391
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +2 -2
- package/dist/types.d.ts.map +1 -1
- package/package.json +12 -12
- package/src/DragManager.ts +21 -0
- package/src/useDrag.ts +12 -1
- package/src/useDraggableItem.ts +2 -2
package/dist/types.d.ts
CHANGED
|
@@ -53,10 +53,10 @@ interface DropIndicatorAria {
|
|
|
53
53
|
dropIndicatorProps: HTMLAttributes<HTMLElement>;
|
|
54
54
|
}
|
|
55
55
|
export function useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DropIndicatorAria;
|
|
56
|
-
interface DraggableItemProps {
|
|
56
|
+
export interface DraggableItemProps {
|
|
57
57
|
key: Key;
|
|
58
58
|
}
|
|
59
|
-
interface DraggableItemResult {
|
|
59
|
+
export interface DraggableItemResult {
|
|
60
60
|
dragProps: HTMLAttributes<HTMLElement>;
|
|
61
61
|
dragButtonProps: AriaButtonProps;
|
|
62
62
|
}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;AGyBA;IACE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,QAAQ,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,OAAO,CAAC;IACnD,wBAAwB,CAAC,EAAE,MAAM,aAAa,EAAE,CAAA;CACjD;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,OAAO,CAAA;CACpB;AAiBD,wBAAwB,OAAO,EAAE,WAAW,GAAG,UAAU,
|
|
1
|
+
{"mappings":";;;;AGyBA;IACE,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,QAAQ,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,OAAO,CAAC;IACnD,wBAAwB,CAAC,EAAE,MAAM,aAAa,EAAE,CAAA;CACjD;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,OAAO,CAAA;CACpB;AAiBD,wBAAwB,OAAO,EAAE,WAAW,GAAG,UAAU,CAyKxD;AE5MD;IACE,GAAG,EAAE,UAAU,WAAW,CAAC,CAAC;IAC5B,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAU,EAAE,iBAAiB,EAAE,aAAa,EAAE,KAAK,aAAa,CAAC;IAC5F,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAU,EAAE,iBAAiB,EAAE,aAAa,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,CAAC;IAC1H,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAGxC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;CAChC;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,YAAY,EAAE,OAAO,CAAA;CACtB;AAID,wBAAwB,OAAO,EAAE,WAAW,GAAG,UAAU,CAsMxD;AEvND,oCAAqC,SAAQ,wBAAwB;IACnE,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,sBAAsB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,UAAU,GAAG,IAAI,CAAA;CACpE;AAED;IACE,eAAe,EAAE,eAAe,WAAW,CAAC,CAAA;CAC7C;AAWD,uCAAuC,KAAK,EAAE,0BAA0B,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,yBAAyB,CAkfjK;ACxgBD;IACE,MAAM,EAAE,UAAU,CAAA;CACnB;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAA;CACvC;AAED,iCAAiC,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,mBAAmB,CAuCjJ;AC3CD;IACE,MAAM,EAAE,UAAU,CAAA;CACnB;AAED;IACE,kBAAkB,EAAE,eAAe,WAAW,CAAC,CAAA;CAChD;AAED,iCAAiC,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,iBAAiB,CAsD3I;ACjED;IACE,GAAG,EAAE,GAAG,CAAA;CACT;AAED;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,eAAe,EAAE,eAAe,CAAA;CACjC;AAED,iCAAiC,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,wBAAwB,GAAG,mBAAmB,CAqChH;AChDD;IACE,QAAQ,CAAC,EAAE,MAAM,QAAQ,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;CACtC;AAED;IACE,cAAc,EAAE,eAAe,WAAW,CAAC,CAAA;CAC5C;AA6BD,6BAA6B,OAAO,EAAE,cAAc,GAAG,eAAe,CAkFrE","sources":["packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/constants.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/utils.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragManager.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrag.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useVirtualDrop.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrop.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useAutoScroll.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableCollection.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDropIndicator.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDraggableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useClipboard.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/index.ts","packages/@react-aria/dnd/src/index.ts"],"sourcesContent":[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 * from './useDrag';\nexport * from './useDrop';\nexport * from './useDroppableCollection';\nexport * from './useDroppableItem';\nexport * from './useDropIndicator';\nexport * from './useDraggableItem';\nexport * from './useClipboard';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/dnd",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.7",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@babel/runtime": "^7.6.2",
|
|
21
|
-
"@react-aria/i18n": "^3.3.
|
|
22
|
-
"@react-aria/interactions": "^3.8.
|
|
23
|
-
"@react-aria/live-announcer": "^3.0.
|
|
24
|
-
"@react-aria/overlays": "^3.
|
|
25
|
-
"@react-aria/utils": "^3.11.
|
|
26
|
-
"@react-aria/visually-hidden": "^3.2.
|
|
27
|
-
"@react-stately/dnd": "3.0.0-alpha.
|
|
28
|
-
"@react-stately/selection": "^3.9.
|
|
29
|
-
"@react-types/button": "^3.4.
|
|
30
|
-
"@react-types/shared": "^3.11.
|
|
21
|
+
"@react-aria/i18n": "^3.3.8",
|
|
22
|
+
"@react-aria/interactions": "^3.8.3",
|
|
23
|
+
"@react-aria/live-announcer": "^3.0.5",
|
|
24
|
+
"@react-aria/overlays": "^3.8.1",
|
|
25
|
+
"@react-aria/utils": "^3.11.3",
|
|
26
|
+
"@react-aria/visually-hidden": "^3.2.7",
|
|
27
|
+
"@react-stately/dnd": "3.0.0-alpha.5",
|
|
28
|
+
"@react-stately/selection": "^3.9.3",
|
|
29
|
+
"@react-types/button": "^3.4.4",
|
|
30
|
+
"@react-types/shared": "^3.11.2"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"react": "^16.8.0 || ^17.0.0-rc.1",
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "e7708349a637642a30d33a11ca4a75ad5829eaa3"
|
|
40
40
|
}
|
package/src/DragManager.ts
CHANGED
|
@@ -101,6 +101,16 @@ function endDragging() {
|
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
+
export function isValidDropTarget(element: Element): boolean {
|
|
105
|
+
for (let target of dropTargets.keys()) {
|
|
106
|
+
if (target.contains(element)) {
|
|
107
|
+
return true;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
return false;
|
|
112
|
+
}
|
|
113
|
+
|
|
104
114
|
const CANCELED_EVENTS = [
|
|
105
115
|
'pointerdown',
|
|
106
116
|
'pointermove',
|
|
@@ -285,6 +295,11 @@ class DragSession {
|
|
|
285
295
|
}
|
|
286
296
|
|
|
287
297
|
cancelEvent(e: Event) {
|
|
298
|
+
// Allow focusin and focusout on the drag target so focus ring works properly.
|
|
299
|
+
if ((e.type === 'focusin' || e.type === 'focusout') && e.target === this.dragTarget?.element) {
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
|
|
288
303
|
// Allow default for events that might cancel a click event
|
|
289
304
|
if (!CLICK_EVENTS.includes(e.type)) {
|
|
290
305
|
e.preventDefault();
|
|
@@ -440,6 +455,12 @@ class DragSession {
|
|
|
440
455
|
});
|
|
441
456
|
}
|
|
442
457
|
|
|
458
|
+
// Blur and re-focus the drop target so that the focus ring appears.
|
|
459
|
+
if (this.currentDropTarget) {
|
|
460
|
+
this.currentDropTarget.element.blur();
|
|
461
|
+
this.currentDropTarget.element.focus();
|
|
462
|
+
}
|
|
463
|
+
|
|
443
464
|
this.setCurrentDropTarget(null);
|
|
444
465
|
endDragging();
|
|
445
466
|
}
|
package/src/useDrag.ts
CHANGED
|
@@ -18,7 +18,7 @@ import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './c
|
|
|
18
18
|
// @ts-ignore
|
|
19
19
|
import intlMessages from '../intl/*.json';
|
|
20
20
|
import ReactDOM from 'react-dom';
|
|
21
|
-
import {useDescription} from '@react-aria/utils';
|
|
21
|
+
import {useDescription, useGlobalListeners} from '@react-aria/utils';
|
|
22
22
|
import {useDragModality} from './utils';
|
|
23
23
|
import {useMessageFormatter} from '@react-aria/i18n';
|
|
24
24
|
import {writeToDataTransfer} from './utils';
|
|
@@ -62,6 +62,7 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
62
62
|
}).current;
|
|
63
63
|
state.options = options;
|
|
64
64
|
let [isDragging, setDragging] = useState(false);
|
|
65
|
+
let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
|
|
65
66
|
|
|
66
67
|
let onDragStart = (e: DragEvent) => {
|
|
67
68
|
let items = options.getItems();
|
|
@@ -114,6 +115,15 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
114
115
|
}
|
|
115
116
|
}
|
|
116
117
|
|
|
118
|
+
// Enforce that drops are handled by useDrop.
|
|
119
|
+
addGlobalListener(window, 'drop', e => {
|
|
120
|
+
if (!DragManager.isValidDropTarget(e.target as Element)) {
|
|
121
|
+
e.preventDefault();
|
|
122
|
+
e.stopPropagation();
|
|
123
|
+
throw new Error('Drags initiated from the React Aria useDrag hook may only be dropped on a target created with useDrop. This ensures that a keyboard and screen reader accessible alternative is available.');
|
|
124
|
+
}
|
|
125
|
+
}, {capture: true, once: true});
|
|
126
|
+
|
|
117
127
|
if (typeof options.onDragStart === 'function') {
|
|
118
128
|
options.onDragStart({
|
|
119
129
|
type: 'dragstart',
|
|
@@ -160,6 +170,7 @@ export function useDrag(options: DragOptions): DragResult {
|
|
|
160
170
|
}
|
|
161
171
|
|
|
162
172
|
setDragging(false);
|
|
173
|
+
removeAllGlobalListeners();
|
|
163
174
|
};
|
|
164
175
|
|
|
165
176
|
let onPress = (e: PressEvent) => {
|
package/src/useDraggableItem.ts
CHANGED
|
@@ -18,11 +18,11 @@ import intlMessages from '../intl/*.json';
|
|
|
18
18
|
import {useDrag} from './useDrag';
|
|
19
19
|
import {useMessageFormatter} from '@react-aria/i18n';
|
|
20
20
|
|
|
21
|
-
interface DraggableItemProps {
|
|
21
|
+
export interface DraggableItemProps {
|
|
22
22
|
key: Key
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
interface DraggableItemResult {
|
|
25
|
+
export interface DraggableItemResult {
|
|
26
26
|
dragProps: HTMLAttributes<HTMLElement>,
|
|
27
27
|
dragButtonProps: AriaButtonProps
|
|
28
28
|
}
|