@react-aria/dnd 3.0.0-alpha.5 → 3.0.0-alpha.8

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/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
  }
@@ -1 +1 @@
1
- {"mappings":"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","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"}
1
+ {"mappings":"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","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.5",
3
+ "version": "3.0.0-alpha.8",
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.6",
22
- "@react-aria/interactions": "^3.8.1",
23
- "@react-aria/live-announcer": "^3.0.3",
24
- "@react-aria/overlays": "^3.7.5",
25
- "@react-aria/utils": "^3.11.2",
26
- "@react-aria/visually-hidden": "^3.2.5",
27
- "@react-stately/dnd": "3.0.0-alpha.4",
28
- "@react-stately/selection": "^3.9.2",
29
- "@react-types/button": "^3.4.3",
30
- "@react-types/shared": "^3.11.1"
21
+ "@react-aria/i18n": "^3.3.9",
22
+ "@react-aria/interactions": "^3.8.4",
23
+ "@react-aria/live-announcer": "^3.0.6",
24
+ "@react-aria/overlays": "^3.8.2",
25
+ "@react-aria/utils": "^3.12.0",
26
+ "@react-aria/visually-hidden": "^3.2.8",
27
+ "@react-stately/dnd": "3.0.0-alpha.6",
28
+ "@react-stately/selection": "^3.9.4",
29
+ "@react-types/button": "^3.4.5",
30
+ "@react-types/shared": "^3.12.0"
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": "404d41859b7d6f56201d7fc01bd9f22ae3512937"
39
+ "gitHead": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
40
40
  }
@@ -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',
@@ -146,6 +156,7 @@ class DragSession {
146
156
  private mutationImmediate: NodeJS.Immediate;
147
157
  private restoreAriaHidden: () => void;
148
158
  private formatMessage: (key: string) => string;
159
+ private isVirtualClick: boolean;
149
160
 
150
161
  constructor(target: DragTarget, formatMessage: (key: string) => string) {
151
162
  this.dragTarget = target;
@@ -155,6 +166,7 @@ class DragSession {
155
166
  this.onFocus = this.onFocus.bind(this);
156
167
  this.onBlur = this.onBlur.bind(this);
157
168
  this.onClick = this.onClick.bind(this);
169
+ this.onPointerDown = this.onPointerDown.bind(this);
158
170
  this.cancelEvent = this.cancelEvent.bind(this);
159
171
  }
160
172
 
@@ -163,6 +175,7 @@ class DragSession {
163
175
  window.addEventListener('focus', this.onFocus, true);
164
176
  window.addEventListener('blur', this.onBlur, true);
165
177
  document.addEventListener('click', this.onClick, true);
178
+ document.addEventListener('pointerdown', this.onPointerDown, true);
166
179
 
167
180
  for (let event of CANCELED_EVENTS) {
168
181
  document.addEventListener(event, this.cancelEvent, true);
@@ -181,6 +194,7 @@ class DragSession {
181
194
  window.removeEventListener('focus', this.onFocus, true);
182
195
  window.removeEventListener('blur', this.onBlur, true);
183
196
  document.removeEventListener('click', this.onClick, true);
197
+ document.removeEventListener('pointerdown', this.onPointerDown, true);
184
198
 
185
199
  for (let event of CANCELED_EVENTS) {
186
200
  document.removeEventListener(event, this.cancelEvent, true);
@@ -266,25 +280,34 @@ class DragSession {
266
280
 
267
281
  onClick(e: MouseEvent) {
268
282
  this.cancelEvent(e);
283
+ if (e.detail === 0 || this.isVirtualClick) {
284
+ if (e.target === this.dragTarget.element) {
285
+ this.cancel();
286
+ return;
287
+ }
269
288
 
270
- if (e.detail !== 0) {
271
- return;
272
- }
273
-
274
- if (e.target === this.dragTarget.element) {
275
- this.cancel();
276
- return;
289
+ let dropTarget = this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
290
+ if (dropTarget) {
291
+ let item = dropItems.get(e.target as HTMLElement);
292
+ this.setCurrentDropTarget(dropTarget, item);
293
+ this.drop(item);
294
+ }
277
295
  }
296
+ }
278
297
 
279
- let dropTarget = this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
280
- if (dropTarget) {
281
- let item = dropItems.get(e.target as HTMLElement);
282
- this.setCurrentDropTarget(dropTarget, item);
283
- this.drop(item);
284
- }
298
+ onPointerDown(e: PointerEvent) {
299
+ // Android Talkback double tap has e.detail = 1 for onClick. Detect the virtual click in onPointerDown before onClick fires
300
+ // so we can properly perform cancel and drop operations.
301
+ this.cancelEvent(e);
302
+ this.isVirtualClick = isVirtualPointerEvent(e);
285
303
  }
286
304
 
287
305
  cancelEvent(e: Event) {
306
+ // Allow focusin and focusout on the drag target so focus ring works properly.
307
+ if ((e.type === 'focusin' || e.type === 'focusout') && e.target === this.dragTarget?.element) {
308
+ return;
309
+ }
310
+
288
311
  // Allow default for events that might cancel a click event
289
312
  if (!CLICK_EVENTS.includes(e.type)) {
290
313
  e.preventDefault();
@@ -440,6 +463,12 @@ class DragSession {
440
463
  });
441
464
  }
442
465
 
466
+ // Blur and re-focus the drop target so that the focus ring appears.
467
+ if (this.currentDropTarget) {
468
+ this.currentDropTarget.element.blur();
469
+ this.currentDropTarget.element.focus();
470
+ }
471
+
443
472
  this.setCurrentDropTarget(null);
444
473
  endDragging();
445
474
  }
@@ -517,3 +546,19 @@ function findValidDropTargets(options: DragTarget) {
517
546
  return true;
518
547
  });
519
548
  }
549
+
550
+ function isVirtualPointerEvent(event: PointerEvent) {
551
+ // If the pointer size is zero, then we assume it's from a screen reader.
552
+ // Android TalkBack double tap will sometimes return a event with width and height of 1
553
+ // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
554
+ // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
555
+ // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216
556
+ return (
557
+ (event.width === 0 && event.height === 0) ||
558
+ (event.width === 1 &&
559
+ event.height === 1 &&
560
+ event.pressure === 0 &&
561
+ event.detail === 0
562
+ )
563
+ );
564
+ }
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();
@@ -105,6 +106,10 @@ export function useDrag(options: DragOptions): DragResult {
105
106
  y = size.height / 2;
106
107
  }
107
108
 
109
+ // Rounding height to an even number prevents blurry preview seen on some screens
110
+ let height = 2 * Math.round(rect.height / 2);
111
+ node.style.height = `${height}px`;
112
+
108
113
  e.dataTransfer.setDragImage(node, x, y);
109
114
 
110
115
  // Remove the preview from the DOM after a frame so the browser has time to paint.
@@ -114,6 +119,15 @@ export function useDrag(options: DragOptions): DragResult {
114
119
  }
115
120
  }
116
121
 
122
+ // Enforce that drops are handled by useDrop.
123
+ addGlobalListener(window, 'drop', e => {
124
+ if (!DragManager.isValidDropTarget(e.target as Element)) {
125
+ e.preventDefault();
126
+ e.stopPropagation();
127
+ 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.');
128
+ }
129
+ }, {capture: true, once: true});
130
+
117
131
  if (typeof options.onDragStart === 'function') {
118
132
  options.onDragStart({
119
133
  type: 'dragstart',
@@ -160,6 +174,7 @@ export function useDrag(options: DragOptions): DragResult {
160
174
  }
161
175
 
162
176
  setDragging(false);
177
+ removeAllGlobalListeners();
163
178
  };
164
179
 
165
180
  let onPress = (e: PressEvent) => {
@@ -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
  }
@@ -48,11 +48,11 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
48
48
  });
49
49
 
50
50
  let item = state.collection.getItem(props.key);
51
- let numSelectedKeys = state.selectionManager.selectedKeys.size;
51
+ let numKeysForDrag = state.getKeysForDrag(props.key).size;
52
52
  let isSelected = state.selectionManager.isSelected(props.key);
53
53
  let message: string;
54
- if (isSelected && numSelectedKeys > 1) {
55
- message = formatMessage('dragSelectedItems', {count: numSelectedKeys});
54
+ if (isSelected && numKeysForDrag > 1) {
55
+ message = formatMessage('dragSelectedItems', {count: numKeysForDrag});
56
56
  } else {
57
57
  message = formatMessage('dragItem', {itemText: item?.textValue ?? ''});
58
58
  }