@react-aria/dnd 3.6.1-nightly.4623 → 3.6.1
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/DragManager.main.js +68 -68
- package/dist/DragManager.mjs +68 -68
- package/dist/DragManager.module.js +68 -68
- package/dist/DragPreview.main.js +1 -1
- package/dist/DragPreview.mjs +1 -1
- package/dist/DragPreview.module.js +1 -1
- package/dist/ListDropTargetDelegate.main.js +31 -31
- package/dist/ListDropTargetDelegate.mjs +31 -31
- package/dist/ListDropTargetDelegate.module.js +31 -31
- package/dist/constants.main.js +10 -10
- package/dist/constants.mjs +10 -10
- package/dist/constants.module.js +10 -10
- package/dist/useClipboard.main.js +1 -1
- package/dist/useClipboard.mjs +1 -1
- package/dist/useClipboard.module.js +1 -1
- package/dist/useDrag.main.js +38 -38
- package/dist/useDrag.mjs +38 -38
- package/dist/useDrag.module.js +38 -38
- package/dist/useDraggableItem.main.js +17 -17
- package/dist/useDraggableItem.mjs +17 -17
- package/dist/useDraggableItem.module.js +17 -17
- package/dist/useDrop.main.js +30 -30
- package/dist/useDrop.mjs +30 -30
- package/dist/useDrop.module.js +30 -30
- package/dist/useDropIndicator.main.js +17 -17
- package/dist/useDropIndicator.mjs +17 -17
- package/dist/useDropIndicator.module.js +17 -17
- package/dist/useDroppableCollection.main.js +83 -83
- package/dist/useDroppableCollection.mjs +83 -83
- package/dist/useDroppableCollection.module.js +83 -83
- package/dist/useDroppableItem.main.js +2 -2
- package/dist/useDroppableItem.mjs +2 -2
- package/dist/useDroppableItem.module.js +2 -2
- package/dist/useVirtualDrop.main.js +5 -5
- package/dist/useVirtualDrop.mjs +5 -5
- package/dist/useVirtualDrop.module.js +5 -5
- package/dist/utils.main.js +20 -20
- package/dist/utils.mjs +20 -20
- package/dist/utils.module.js +20 -20
- package/package.json +11 -11
package/dist/DragManager.main.js
CHANGED
|
@@ -50,11 +50,11 @@ function $28e10663603f5ea1$export$aef80212ac99c003(item) {
|
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
52
|
function $28e10663603f5ea1$export$549dbcf8649bf3b2(target, stringFormatter) {
|
|
53
|
-
if ($28e10663603f5ea1$var$dragSession) throw new Error(
|
|
53
|
+
if ($28e10663603f5ea1$var$dragSession) throw new Error('Cannot begin dragging while already dragging');
|
|
54
54
|
$28e10663603f5ea1$var$dragSession = new $28e10663603f5ea1$var$DragSession(target, stringFormatter);
|
|
55
55
|
requestAnimationFrame(()=>{
|
|
56
56
|
$28e10663603f5ea1$var$dragSession.setup();
|
|
57
|
-
if ((0, $4620ae0dc40f0031$exports.getDragModality)() ===
|
|
57
|
+
if ((0, $4620ae0dc40f0031$exports.getDragModality)() === 'keyboard') $28e10663603f5ea1$var$dragSession.next();
|
|
58
58
|
});
|
|
59
59
|
for (let cb of $28e10663603f5ea1$var$subscriptions)cb();
|
|
60
60
|
}
|
|
@@ -83,56 +83,56 @@ function $28e10663603f5ea1$export$7454aff2e161f241(element) {
|
|
|
83
83
|
return false;
|
|
84
84
|
}
|
|
85
85
|
const $28e10663603f5ea1$var$CANCELED_EVENTS = [
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
86
|
+
'pointerdown',
|
|
87
|
+
'pointermove',
|
|
88
|
+
'pointerenter',
|
|
89
|
+
'pointerleave',
|
|
90
|
+
'pointerover',
|
|
91
|
+
'pointerout',
|
|
92
|
+
'pointerup',
|
|
93
|
+
'mousedown',
|
|
94
|
+
'mousemove',
|
|
95
|
+
'mouseenter',
|
|
96
|
+
'mouseleave',
|
|
97
|
+
'mouseover',
|
|
98
|
+
'mouseout',
|
|
99
|
+
'mouseup',
|
|
100
|
+
'touchstart',
|
|
101
|
+
'touchmove',
|
|
102
|
+
'touchend',
|
|
103
|
+
'focusin',
|
|
104
|
+
'focusout'
|
|
105
105
|
];
|
|
106
106
|
const $28e10663603f5ea1$var$CLICK_EVENTS = [
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
107
|
+
'pointerup',
|
|
108
|
+
'mouseup',
|
|
109
|
+
'touchend'
|
|
110
110
|
];
|
|
111
111
|
const $28e10663603f5ea1$var$MESSAGES = {
|
|
112
|
-
keyboard:
|
|
113
|
-
touch:
|
|
114
|
-
virtual:
|
|
112
|
+
keyboard: 'dragStartedKeyboard',
|
|
113
|
+
touch: 'dragStartedTouch',
|
|
114
|
+
virtual: 'dragStartedVirtual'
|
|
115
115
|
};
|
|
116
116
|
class $28e10663603f5ea1$var$DragSession {
|
|
117
117
|
setup() {
|
|
118
|
-
document.addEventListener(
|
|
119
|
-
document.addEventListener(
|
|
120
|
-
window.addEventListener(
|
|
121
|
-
window.addEventListener(
|
|
122
|
-
document.addEventListener(
|
|
123
|
-
document.addEventListener(
|
|
118
|
+
document.addEventListener('keydown', this.onKeyDown, true);
|
|
119
|
+
document.addEventListener('keyup', this.onKeyUp, true);
|
|
120
|
+
window.addEventListener('focus', this.onFocus, true);
|
|
121
|
+
window.addEventListener('blur', this.onBlur, true);
|
|
122
|
+
document.addEventListener('click', this.onClick, true);
|
|
123
|
+
document.addEventListener('pointerdown', this.onPointerDown, true);
|
|
124
124
|
for (let event of $28e10663603f5ea1$var$CANCELED_EVENTS)document.addEventListener(event, this.cancelEvent, true);
|
|
125
125
|
this.mutationObserver = new MutationObserver(()=>this.updateValidDropTargets());
|
|
126
126
|
this.updateValidDropTargets();
|
|
127
127
|
(0, $hMqHl$reactarialiveannouncer.announce)(this.stringFormatter.format($28e10663603f5ea1$var$MESSAGES[(0, $4620ae0dc40f0031$exports.getDragModality)()]));
|
|
128
128
|
}
|
|
129
129
|
teardown() {
|
|
130
|
-
document.removeEventListener(
|
|
131
|
-
document.removeEventListener(
|
|
132
|
-
window.removeEventListener(
|
|
133
|
-
window.removeEventListener(
|
|
134
|
-
document.removeEventListener(
|
|
135
|
-
document.removeEventListener(
|
|
130
|
+
document.removeEventListener('keydown', this.onKeyDown, true);
|
|
131
|
+
document.removeEventListener('keyup', this.onKeyUp, true);
|
|
132
|
+
window.removeEventListener('focus', this.onFocus, true);
|
|
133
|
+
window.removeEventListener('blur', this.onBlur, true);
|
|
134
|
+
document.removeEventListener('click', this.onClick, true);
|
|
135
|
+
document.removeEventListener('pointerdown', this.onPointerDown, true);
|
|
136
136
|
for (let event of $28e10663603f5ea1$var$CANCELED_EVENTS)document.removeEventListener(event, this.cancelEvent, true);
|
|
137
137
|
this.mutationObserver.disconnect();
|
|
138
138
|
this.restoreAriaHidden();
|
|
@@ -140,19 +140,19 @@ class $28e10663603f5ea1$var$DragSession {
|
|
|
140
140
|
onKeyDown(e) {
|
|
141
141
|
var _this_currentDropTarget;
|
|
142
142
|
this.cancelEvent(e);
|
|
143
|
-
if (e.key ===
|
|
143
|
+
if (e.key === 'Escape') {
|
|
144
144
|
this.cancel();
|
|
145
145
|
return;
|
|
146
146
|
}
|
|
147
|
-
if (e.key ===
|
|
147
|
+
if (e.key === 'Tab' && !(e.metaKey || e.altKey || e.ctrlKey)) {
|
|
148
148
|
if (e.shiftKey) this.previous();
|
|
149
149
|
else this.next();
|
|
150
150
|
}
|
|
151
|
-
if (typeof ((_this_currentDropTarget = this.currentDropTarget) === null || _this_currentDropTarget === void 0 ? void 0 : _this_currentDropTarget.onKeyDown) ===
|
|
151
|
+
if (typeof ((_this_currentDropTarget = this.currentDropTarget) === null || _this_currentDropTarget === void 0 ? void 0 : _this_currentDropTarget.onKeyDown) === 'function') this.currentDropTarget.onKeyDown(e, this.dragTarget);
|
|
152
152
|
}
|
|
153
153
|
onKeyUp(e) {
|
|
154
154
|
this.cancelEvent(e);
|
|
155
|
-
if (e.key ===
|
|
155
|
+
if (e.key === 'Enter') {
|
|
156
156
|
if (e.altKey) this.activate();
|
|
157
157
|
else this.drop();
|
|
158
158
|
}
|
|
@@ -204,7 +204,7 @@ class $28e10663603f5ea1$var$DragSession {
|
|
|
204
204
|
cancelEvent(e) {
|
|
205
205
|
var _this_dragTarget;
|
|
206
206
|
// Allow focusin and focusout on the drag target so focus ring works properly.
|
|
207
|
-
if ((e.type ===
|
|
207
|
+
if ((e.type === 'focusin' || e.type === 'focusout') && e.target === ((_this_dragTarget = this.dragTarget) === null || _this_dragTarget === void 0 ? void 0 : _this_dragTarget.element)) return;
|
|
208
208
|
// Allow default for events that might cancel a click event
|
|
209
209
|
if (!$28e10663603f5ea1$var$CLICK_EVENTS.includes(e.type)) e.preventDefault();
|
|
210
210
|
e.stopPropagation();
|
|
@@ -229,7 +229,7 @@ class $28e10663603f5ea1$var$DragSession {
|
|
|
229
229
|
let validDropItems = [
|
|
230
230
|
...$28e10663603f5ea1$var$dropItems.values()
|
|
231
231
|
].filter((item)=>{
|
|
232
|
-
if (typeof item.getDropOperation ===
|
|
232
|
+
if (typeof item.getDropOperation === 'function') return item.getDropOperation(types, this.dragTarget.allowedDropOperations) !== 'cancel';
|
|
233
233
|
return true;
|
|
234
234
|
});
|
|
235
235
|
// Filter out drop targets that contain valid items. We don't want to stop hiding elements
|
|
@@ -244,7 +244,7 @@ class $28e10663603f5ea1$var$DragSession {
|
|
|
244
244
|
subtree: true,
|
|
245
245
|
attributes: true,
|
|
246
246
|
attributeFilter: [
|
|
247
|
-
|
|
247
|
+
'aria-hidden'
|
|
248
248
|
]
|
|
249
249
|
});
|
|
250
250
|
}
|
|
@@ -305,20 +305,20 @@ class $28e10663603f5ea1$var$DragSession {
|
|
|
305
305
|
}
|
|
306
306
|
setCurrentDropTarget(dropTarget, item) {
|
|
307
307
|
if (dropTarget !== this.currentDropTarget) {
|
|
308
|
-
if (this.currentDropTarget && typeof this.currentDropTarget.onDropExit ===
|
|
308
|
+
if (this.currentDropTarget && typeof this.currentDropTarget.onDropExit === 'function') {
|
|
309
309
|
let rect = this.currentDropTarget.element.getBoundingClientRect();
|
|
310
310
|
this.currentDropTarget.onDropExit({
|
|
311
|
-
type:
|
|
311
|
+
type: 'dropexit',
|
|
312
312
|
x: rect.left + rect.width / 2,
|
|
313
313
|
y: rect.top + rect.height / 2
|
|
314
314
|
});
|
|
315
315
|
}
|
|
316
316
|
this.currentDropTarget = dropTarget;
|
|
317
317
|
if (dropTarget) {
|
|
318
|
-
if (typeof dropTarget.onDropEnter ===
|
|
318
|
+
if (typeof dropTarget.onDropEnter === 'function') {
|
|
319
319
|
let rect = dropTarget.element.getBoundingClientRect();
|
|
320
320
|
dropTarget.onDropEnter({
|
|
321
|
-
type:
|
|
321
|
+
type: 'dropenter',
|
|
322
322
|
x: rect.left + rect.width / 2,
|
|
323
323
|
y: rect.top + rect.height / 2
|
|
324
324
|
}, this.dragTarget);
|
|
@@ -327,13 +327,13 @@ class $28e10663603f5ea1$var$DragSession {
|
|
|
327
327
|
}
|
|
328
328
|
}
|
|
329
329
|
if (item !== this.currentDropItem) {
|
|
330
|
-
if (item && typeof this.currentDropTarget.onDropTargetEnter ===
|
|
330
|
+
if (item && typeof this.currentDropTarget.onDropTargetEnter === 'function') this.currentDropTarget.onDropTargetEnter(item === null || item === void 0 ? void 0 : item.target);
|
|
331
331
|
item === null || item === void 0 ? void 0 : item.element.focus();
|
|
332
332
|
this.currentDropItem = item;
|
|
333
333
|
// Announce first drop target after drag start announcement finishes.
|
|
334
334
|
// Otherwise, it will never get announced because drag start announcement is assertive.
|
|
335
335
|
if (!this.initialFocused) {
|
|
336
|
-
(0, $hMqHl$reactarialiveannouncer.announce)(item === null || item === void 0 ? void 0 : item.element.getAttribute(
|
|
336
|
+
(0, $hMqHl$reactarialiveannouncer.announce)(item === null || item === void 0 ? void 0 : item.element.getAttribute('aria-label'), 'polite');
|
|
337
337
|
this.initialFocused = true;
|
|
338
338
|
}
|
|
339
339
|
}
|
|
@@ -341,14 +341,14 @@ class $28e10663603f5ea1$var$DragSession {
|
|
|
341
341
|
end() {
|
|
342
342
|
this.teardown();
|
|
343
343
|
$28e10663603f5ea1$var$endDragging();
|
|
344
|
-
if (typeof this.dragTarget.onDragEnd ===
|
|
345
|
-
let target = this.currentDropTarget && this.dropOperation !==
|
|
344
|
+
if (typeof this.dragTarget.onDragEnd === 'function') {
|
|
345
|
+
let target = this.currentDropTarget && this.dropOperation !== 'cancel' ? this.currentDropTarget : this.dragTarget;
|
|
346
346
|
let rect = target.element.getBoundingClientRect();
|
|
347
347
|
this.dragTarget.onDragEnd({
|
|
348
|
-
type:
|
|
348
|
+
type: 'dragend',
|
|
349
349
|
x: rect.x + rect.width / 2,
|
|
350
350
|
y: rect.y + rect.height / 2,
|
|
351
|
-
dropOperation: this.dropOperation ||
|
|
351
|
+
dropOperation: this.dropOperation || 'cancel'
|
|
352
352
|
});
|
|
353
353
|
}
|
|
354
354
|
// Blur and re-focus the drop target so that the focus ring appears.
|
|
@@ -356,8 +356,8 @@ class $28e10663603f5ea1$var$DragSession {
|
|
|
356
356
|
// Since we cancel all focus events in drag sessions, refire blur to make sure state gets updated so drag target doesn't think it's still focused
|
|
357
357
|
// i.e. When you from one list to another during a drag session, we need the blur to fire on the first list after the drag.
|
|
358
358
|
if (!this.dragTarget.element.contains(this.currentDropTarget.element)) {
|
|
359
|
-
this.dragTarget.element.dispatchEvent(new FocusEvent(
|
|
360
|
-
this.dragTarget.element.dispatchEvent(new FocusEvent(
|
|
359
|
+
this.dragTarget.element.dispatchEvent(new FocusEvent('blur'));
|
|
360
|
+
this.dragTarget.element.dispatchEvent(new FocusEvent('focusout', {
|
|
361
361
|
bubbles: true
|
|
362
362
|
}));
|
|
363
363
|
}
|
|
@@ -373,30 +373,30 @@ class $28e10663603f5ea1$var$DragSession {
|
|
|
373
373
|
this.setCurrentDropTarget(null);
|
|
374
374
|
this.end();
|
|
375
375
|
if (!this.dragTarget.element.closest('[aria-hidden="true"]')) this.dragTarget.element.focus();
|
|
376
|
-
(0, $hMqHl$reactarialiveannouncer.announce)(this.stringFormatter.format(
|
|
376
|
+
(0, $hMqHl$reactarialiveannouncer.announce)(this.stringFormatter.format('dropCanceled'));
|
|
377
377
|
}
|
|
378
378
|
drop(item) {
|
|
379
379
|
if (!this.currentDropTarget) {
|
|
380
380
|
this.cancel();
|
|
381
381
|
return;
|
|
382
382
|
}
|
|
383
|
-
if (typeof (item === null || item === void 0 ? void 0 : item.getDropOperation) ===
|
|
383
|
+
if (typeof (item === null || item === void 0 ? void 0 : item.getDropOperation) === 'function') {
|
|
384
384
|
let types = (0, $4620ae0dc40f0031$exports.getTypes)(this.dragTarget.items);
|
|
385
385
|
this.dropOperation = item.getDropOperation(types, this.dragTarget.allowedDropOperations);
|
|
386
|
-
} else if (typeof this.currentDropTarget.getDropOperation ===
|
|
386
|
+
} else if (typeof this.currentDropTarget.getDropOperation === 'function') {
|
|
387
387
|
let types = (0, $4620ae0dc40f0031$exports.getTypes)(this.dragTarget.items);
|
|
388
388
|
this.dropOperation = this.currentDropTarget.getDropOperation(types, this.dragTarget.allowedDropOperations);
|
|
389
389
|
} else // TODO: show menu ??
|
|
390
390
|
this.dropOperation = this.dragTarget.allowedDropOperations[0];
|
|
391
|
-
if (typeof this.currentDropTarget.onDrop ===
|
|
391
|
+
if (typeof this.currentDropTarget.onDrop === 'function') {
|
|
392
392
|
let items = this.dragTarget.items.map((item)=>({
|
|
393
|
-
kind:
|
|
393
|
+
kind: 'text',
|
|
394
394
|
types: new Set(Object.keys(item)),
|
|
395
395
|
getText: (type)=>Promise.resolve(item[type])
|
|
396
396
|
}));
|
|
397
397
|
let rect = this.currentDropTarget.element.getBoundingClientRect();
|
|
398
398
|
this.currentDropTarget.onDrop({
|
|
399
|
-
type:
|
|
399
|
+
type: 'drop',
|
|
400
400
|
x: rect.left + rect.width / 2,
|
|
401
401
|
y: rect.top + rect.height / 2,
|
|
402
402
|
items: items,
|
|
@@ -404,13 +404,13 @@ class $28e10663603f5ea1$var$DragSession {
|
|
|
404
404
|
}, item === null || item === void 0 ? void 0 : item.target);
|
|
405
405
|
}
|
|
406
406
|
this.end();
|
|
407
|
-
(0, $hMqHl$reactarialiveannouncer.announce)(this.stringFormatter.format(
|
|
407
|
+
(0, $hMqHl$reactarialiveannouncer.announce)(this.stringFormatter.format('dropComplete'));
|
|
408
408
|
}
|
|
409
409
|
activate() {
|
|
410
|
-
if (this.currentDropTarget && typeof this.currentDropTarget.onDropActivate ===
|
|
410
|
+
if (this.currentDropTarget && typeof this.currentDropTarget.onDropActivate === 'function') {
|
|
411
411
|
let rect = this.currentDropTarget.element.getBoundingClientRect();
|
|
412
412
|
this.currentDropTarget.onDropActivate({
|
|
413
|
-
type:
|
|
413
|
+
type: 'dropactivate',
|
|
414
414
|
x: rect.left + rect.width / 2,
|
|
415
415
|
y: rect.top + rect.height / 2
|
|
416
416
|
});
|
|
@@ -435,7 +435,7 @@ function $28e10663603f5ea1$var$findValidDropTargets(options) {
|
|
|
435
435
|
...$28e10663603f5ea1$var$dropTargets.values()
|
|
436
436
|
].filter((target)=>{
|
|
437
437
|
if (target.element.closest('[aria-hidden="true"]')) return false;
|
|
438
|
-
if (typeof target.getDropOperation ===
|
|
438
|
+
if (typeof target.getDropOperation === 'function') return target.getDropOperation(types, options.allowedDropOperations) !== 'cancel';
|
|
439
439
|
return true;
|
|
440
440
|
});
|
|
441
441
|
}
|
package/dist/DragManager.mjs
CHANGED
|
@@ -40,11 +40,11 @@ function $67560de7c78cb232$export$aef80212ac99c003(item) {
|
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
42
|
function $67560de7c78cb232$export$549dbcf8649bf3b2(target, stringFormatter) {
|
|
43
|
-
if ($67560de7c78cb232$var$dragSession) throw new Error(
|
|
43
|
+
if ($67560de7c78cb232$var$dragSession) throw new Error('Cannot begin dragging while already dragging');
|
|
44
44
|
$67560de7c78cb232$var$dragSession = new $67560de7c78cb232$var$DragSession(target, stringFormatter);
|
|
45
45
|
requestAnimationFrame(()=>{
|
|
46
46
|
$67560de7c78cb232$var$dragSession.setup();
|
|
47
|
-
if ((0, $7252cd45fc48c07c$export$1fb2158d224b542c)() ===
|
|
47
|
+
if ((0, $7252cd45fc48c07c$export$1fb2158d224b542c)() === 'keyboard') $67560de7c78cb232$var$dragSession.next();
|
|
48
48
|
});
|
|
49
49
|
for (let cb of $67560de7c78cb232$var$subscriptions)cb();
|
|
50
50
|
}
|
|
@@ -73,56 +73,56 @@ function $67560de7c78cb232$export$7454aff2e161f241(element) {
|
|
|
73
73
|
return false;
|
|
74
74
|
}
|
|
75
75
|
const $67560de7c78cb232$var$CANCELED_EVENTS = [
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
76
|
+
'pointerdown',
|
|
77
|
+
'pointermove',
|
|
78
|
+
'pointerenter',
|
|
79
|
+
'pointerleave',
|
|
80
|
+
'pointerover',
|
|
81
|
+
'pointerout',
|
|
82
|
+
'pointerup',
|
|
83
|
+
'mousedown',
|
|
84
|
+
'mousemove',
|
|
85
|
+
'mouseenter',
|
|
86
|
+
'mouseleave',
|
|
87
|
+
'mouseover',
|
|
88
|
+
'mouseout',
|
|
89
|
+
'mouseup',
|
|
90
|
+
'touchstart',
|
|
91
|
+
'touchmove',
|
|
92
|
+
'touchend',
|
|
93
|
+
'focusin',
|
|
94
|
+
'focusout'
|
|
95
95
|
];
|
|
96
96
|
const $67560de7c78cb232$var$CLICK_EVENTS = [
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
97
|
+
'pointerup',
|
|
98
|
+
'mouseup',
|
|
99
|
+
'touchend'
|
|
100
100
|
];
|
|
101
101
|
const $67560de7c78cb232$var$MESSAGES = {
|
|
102
|
-
keyboard:
|
|
103
|
-
touch:
|
|
104
|
-
virtual:
|
|
102
|
+
keyboard: 'dragStartedKeyboard',
|
|
103
|
+
touch: 'dragStartedTouch',
|
|
104
|
+
virtual: 'dragStartedVirtual'
|
|
105
105
|
};
|
|
106
106
|
class $67560de7c78cb232$var$DragSession {
|
|
107
107
|
setup() {
|
|
108
|
-
document.addEventListener(
|
|
109
|
-
document.addEventListener(
|
|
110
|
-
window.addEventListener(
|
|
111
|
-
window.addEventListener(
|
|
112
|
-
document.addEventListener(
|
|
113
|
-
document.addEventListener(
|
|
108
|
+
document.addEventListener('keydown', this.onKeyDown, true);
|
|
109
|
+
document.addEventListener('keyup', this.onKeyUp, true);
|
|
110
|
+
window.addEventListener('focus', this.onFocus, true);
|
|
111
|
+
window.addEventListener('blur', this.onBlur, true);
|
|
112
|
+
document.addEventListener('click', this.onClick, true);
|
|
113
|
+
document.addEventListener('pointerdown', this.onPointerDown, true);
|
|
114
114
|
for (let event of $67560de7c78cb232$var$CANCELED_EVENTS)document.addEventListener(event, this.cancelEvent, true);
|
|
115
115
|
this.mutationObserver = new MutationObserver(()=>this.updateValidDropTargets());
|
|
116
116
|
this.updateValidDropTargets();
|
|
117
117
|
(0, $irqIb$announce)(this.stringFormatter.format($67560de7c78cb232$var$MESSAGES[(0, $7252cd45fc48c07c$export$1fb2158d224b542c)()]));
|
|
118
118
|
}
|
|
119
119
|
teardown() {
|
|
120
|
-
document.removeEventListener(
|
|
121
|
-
document.removeEventListener(
|
|
122
|
-
window.removeEventListener(
|
|
123
|
-
window.removeEventListener(
|
|
124
|
-
document.removeEventListener(
|
|
125
|
-
document.removeEventListener(
|
|
120
|
+
document.removeEventListener('keydown', this.onKeyDown, true);
|
|
121
|
+
document.removeEventListener('keyup', this.onKeyUp, true);
|
|
122
|
+
window.removeEventListener('focus', this.onFocus, true);
|
|
123
|
+
window.removeEventListener('blur', this.onBlur, true);
|
|
124
|
+
document.removeEventListener('click', this.onClick, true);
|
|
125
|
+
document.removeEventListener('pointerdown', this.onPointerDown, true);
|
|
126
126
|
for (let event of $67560de7c78cb232$var$CANCELED_EVENTS)document.removeEventListener(event, this.cancelEvent, true);
|
|
127
127
|
this.mutationObserver.disconnect();
|
|
128
128
|
this.restoreAriaHidden();
|
|
@@ -130,19 +130,19 @@ class $67560de7c78cb232$var$DragSession {
|
|
|
130
130
|
onKeyDown(e) {
|
|
131
131
|
var _this_currentDropTarget;
|
|
132
132
|
this.cancelEvent(e);
|
|
133
|
-
if (e.key ===
|
|
133
|
+
if (e.key === 'Escape') {
|
|
134
134
|
this.cancel();
|
|
135
135
|
return;
|
|
136
136
|
}
|
|
137
|
-
if (e.key ===
|
|
137
|
+
if (e.key === 'Tab' && !(e.metaKey || e.altKey || e.ctrlKey)) {
|
|
138
138
|
if (e.shiftKey) this.previous();
|
|
139
139
|
else this.next();
|
|
140
140
|
}
|
|
141
|
-
if (typeof ((_this_currentDropTarget = this.currentDropTarget) === null || _this_currentDropTarget === void 0 ? void 0 : _this_currentDropTarget.onKeyDown) ===
|
|
141
|
+
if (typeof ((_this_currentDropTarget = this.currentDropTarget) === null || _this_currentDropTarget === void 0 ? void 0 : _this_currentDropTarget.onKeyDown) === 'function') this.currentDropTarget.onKeyDown(e, this.dragTarget);
|
|
142
142
|
}
|
|
143
143
|
onKeyUp(e) {
|
|
144
144
|
this.cancelEvent(e);
|
|
145
|
-
if (e.key ===
|
|
145
|
+
if (e.key === 'Enter') {
|
|
146
146
|
if (e.altKey) this.activate();
|
|
147
147
|
else this.drop();
|
|
148
148
|
}
|
|
@@ -194,7 +194,7 @@ class $67560de7c78cb232$var$DragSession {
|
|
|
194
194
|
cancelEvent(e) {
|
|
195
195
|
var _this_dragTarget;
|
|
196
196
|
// Allow focusin and focusout on the drag target so focus ring works properly.
|
|
197
|
-
if ((e.type ===
|
|
197
|
+
if ((e.type === 'focusin' || e.type === 'focusout') && e.target === ((_this_dragTarget = this.dragTarget) === null || _this_dragTarget === void 0 ? void 0 : _this_dragTarget.element)) return;
|
|
198
198
|
// Allow default for events that might cancel a click event
|
|
199
199
|
if (!$67560de7c78cb232$var$CLICK_EVENTS.includes(e.type)) e.preventDefault();
|
|
200
200
|
e.stopPropagation();
|
|
@@ -219,7 +219,7 @@ class $67560de7c78cb232$var$DragSession {
|
|
|
219
219
|
let validDropItems = [
|
|
220
220
|
...$67560de7c78cb232$var$dropItems.values()
|
|
221
221
|
].filter((item)=>{
|
|
222
|
-
if (typeof item.getDropOperation ===
|
|
222
|
+
if (typeof item.getDropOperation === 'function') return item.getDropOperation(types, this.dragTarget.allowedDropOperations) !== 'cancel';
|
|
223
223
|
return true;
|
|
224
224
|
});
|
|
225
225
|
// Filter out drop targets that contain valid items. We don't want to stop hiding elements
|
|
@@ -234,7 +234,7 @@ class $67560de7c78cb232$var$DragSession {
|
|
|
234
234
|
subtree: true,
|
|
235
235
|
attributes: true,
|
|
236
236
|
attributeFilter: [
|
|
237
|
-
|
|
237
|
+
'aria-hidden'
|
|
238
238
|
]
|
|
239
239
|
});
|
|
240
240
|
}
|
|
@@ -295,20 +295,20 @@ class $67560de7c78cb232$var$DragSession {
|
|
|
295
295
|
}
|
|
296
296
|
setCurrentDropTarget(dropTarget, item) {
|
|
297
297
|
if (dropTarget !== this.currentDropTarget) {
|
|
298
|
-
if (this.currentDropTarget && typeof this.currentDropTarget.onDropExit ===
|
|
298
|
+
if (this.currentDropTarget && typeof this.currentDropTarget.onDropExit === 'function') {
|
|
299
299
|
let rect = this.currentDropTarget.element.getBoundingClientRect();
|
|
300
300
|
this.currentDropTarget.onDropExit({
|
|
301
|
-
type:
|
|
301
|
+
type: 'dropexit',
|
|
302
302
|
x: rect.left + rect.width / 2,
|
|
303
303
|
y: rect.top + rect.height / 2
|
|
304
304
|
});
|
|
305
305
|
}
|
|
306
306
|
this.currentDropTarget = dropTarget;
|
|
307
307
|
if (dropTarget) {
|
|
308
|
-
if (typeof dropTarget.onDropEnter ===
|
|
308
|
+
if (typeof dropTarget.onDropEnter === 'function') {
|
|
309
309
|
let rect = dropTarget.element.getBoundingClientRect();
|
|
310
310
|
dropTarget.onDropEnter({
|
|
311
|
-
type:
|
|
311
|
+
type: 'dropenter',
|
|
312
312
|
x: rect.left + rect.width / 2,
|
|
313
313
|
y: rect.top + rect.height / 2
|
|
314
314
|
}, this.dragTarget);
|
|
@@ -317,13 +317,13 @@ class $67560de7c78cb232$var$DragSession {
|
|
|
317
317
|
}
|
|
318
318
|
}
|
|
319
319
|
if (item !== this.currentDropItem) {
|
|
320
|
-
if (item && typeof this.currentDropTarget.onDropTargetEnter ===
|
|
320
|
+
if (item && typeof this.currentDropTarget.onDropTargetEnter === 'function') this.currentDropTarget.onDropTargetEnter(item === null || item === void 0 ? void 0 : item.target);
|
|
321
321
|
item === null || item === void 0 ? void 0 : item.element.focus();
|
|
322
322
|
this.currentDropItem = item;
|
|
323
323
|
// Announce first drop target after drag start announcement finishes.
|
|
324
324
|
// Otherwise, it will never get announced because drag start announcement is assertive.
|
|
325
325
|
if (!this.initialFocused) {
|
|
326
|
-
(0, $irqIb$announce)(item === null || item === void 0 ? void 0 : item.element.getAttribute(
|
|
326
|
+
(0, $irqIb$announce)(item === null || item === void 0 ? void 0 : item.element.getAttribute('aria-label'), 'polite');
|
|
327
327
|
this.initialFocused = true;
|
|
328
328
|
}
|
|
329
329
|
}
|
|
@@ -331,14 +331,14 @@ class $67560de7c78cb232$var$DragSession {
|
|
|
331
331
|
end() {
|
|
332
332
|
this.teardown();
|
|
333
333
|
$67560de7c78cb232$var$endDragging();
|
|
334
|
-
if (typeof this.dragTarget.onDragEnd ===
|
|
335
|
-
let target = this.currentDropTarget && this.dropOperation !==
|
|
334
|
+
if (typeof this.dragTarget.onDragEnd === 'function') {
|
|
335
|
+
let target = this.currentDropTarget && this.dropOperation !== 'cancel' ? this.currentDropTarget : this.dragTarget;
|
|
336
336
|
let rect = target.element.getBoundingClientRect();
|
|
337
337
|
this.dragTarget.onDragEnd({
|
|
338
|
-
type:
|
|
338
|
+
type: 'dragend',
|
|
339
339
|
x: rect.x + rect.width / 2,
|
|
340
340
|
y: rect.y + rect.height / 2,
|
|
341
|
-
dropOperation: this.dropOperation ||
|
|
341
|
+
dropOperation: this.dropOperation || 'cancel'
|
|
342
342
|
});
|
|
343
343
|
}
|
|
344
344
|
// Blur and re-focus the drop target so that the focus ring appears.
|
|
@@ -346,8 +346,8 @@ class $67560de7c78cb232$var$DragSession {
|
|
|
346
346
|
// Since we cancel all focus events in drag sessions, refire blur to make sure state gets updated so drag target doesn't think it's still focused
|
|
347
347
|
// i.e. When you from one list to another during a drag session, we need the blur to fire on the first list after the drag.
|
|
348
348
|
if (!this.dragTarget.element.contains(this.currentDropTarget.element)) {
|
|
349
|
-
this.dragTarget.element.dispatchEvent(new FocusEvent(
|
|
350
|
-
this.dragTarget.element.dispatchEvent(new FocusEvent(
|
|
349
|
+
this.dragTarget.element.dispatchEvent(new FocusEvent('blur'));
|
|
350
|
+
this.dragTarget.element.dispatchEvent(new FocusEvent('focusout', {
|
|
351
351
|
bubbles: true
|
|
352
352
|
}));
|
|
353
353
|
}
|
|
@@ -363,30 +363,30 @@ class $67560de7c78cb232$var$DragSession {
|
|
|
363
363
|
this.setCurrentDropTarget(null);
|
|
364
364
|
this.end();
|
|
365
365
|
if (!this.dragTarget.element.closest('[aria-hidden="true"]')) this.dragTarget.element.focus();
|
|
366
|
-
(0, $irqIb$announce)(this.stringFormatter.format(
|
|
366
|
+
(0, $irqIb$announce)(this.stringFormatter.format('dropCanceled'));
|
|
367
367
|
}
|
|
368
368
|
drop(item) {
|
|
369
369
|
if (!this.currentDropTarget) {
|
|
370
370
|
this.cancel();
|
|
371
371
|
return;
|
|
372
372
|
}
|
|
373
|
-
if (typeof (item === null || item === void 0 ? void 0 : item.getDropOperation) ===
|
|
373
|
+
if (typeof (item === null || item === void 0 ? void 0 : item.getDropOperation) === 'function') {
|
|
374
374
|
let types = (0, $7252cd45fc48c07c$export$e1d41611756c6326)(this.dragTarget.items);
|
|
375
375
|
this.dropOperation = item.getDropOperation(types, this.dragTarget.allowedDropOperations);
|
|
376
|
-
} else if (typeof this.currentDropTarget.getDropOperation ===
|
|
376
|
+
} else if (typeof this.currentDropTarget.getDropOperation === 'function') {
|
|
377
377
|
let types = (0, $7252cd45fc48c07c$export$e1d41611756c6326)(this.dragTarget.items);
|
|
378
378
|
this.dropOperation = this.currentDropTarget.getDropOperation(types, this.dragTarget.allowedDropOperations);
|
|
379
379
|
} else // TODO: show menu ??
|
|
380
380
|
this.dropOperation = this.dragTarget.allowedDropOperations[0];
|
|
381
|
-
if (typeof this.currentDropTarget.onDrop ===
|
|
381
|
+
if (typeof this.currentDropTarget.onDrop === 'function') {
|
|
382
382
|
let items = this.dragTarget.items.map((item)=>({
|
|
383
|
-
kind:
|
|
383
|
+
kind: 'text',
|
|
384
384
|
types: new Set(Object.keys(item)),
|
|
385
385
|
getText: (type)=>Promise.resolve(item[type])
|
|
386
386
|
}));
|
|
387
387
|
let rect = this.currentDropTarget.element.getBoundingClientRect();
|
|
388
388
|
this.currentDropTarget.onDrop({
|
|
389
|
-
type:
|
|
389
|
+
type: 'drop',
|
|
390
390
|
x: rect.left + rect.width / 2,
|
|
391
391
|
y: rect.top + rect.height / 2,
|
|
392
392
|
items: items,
|
|
@@ -394,13 +394,13 @@ class $67560de7c78cb232$var$DragSession {
|
|
|
394
394
|
}, item === null || item === void 0 ? void 0 : item.target);
|
|
395
395
|
}
|
|
396
396
|
this.end();
|
|
397
|
-
(0, $irqIb$announce)(this.stringFormatter.format(
|
|
397
|
+
(0, $irqIb$announce)(this.stringFormatter.format('dropComplete'));
|
|
398
398
|
}
|
|
399
399
|
activate() {
|
|
400
|
-
if (this.currentDropTarget && typeof this.currentDropTarget.onDropActivate ===
|
|
400
|
+
if (this.currentDropTarget && typeof this.currentDropTarget.onDropActivate === 'function') {
|
|
401
401
|
let rect = this.currentDropTarget.element.getBoundingClientRect();
|
|
402
402
|
this.currentDropTarget.onDropActivate({
|
|
403
|
-
type:
|
|
403
|
+
type: 'dropactivate',
|
|
404
404
|
x: rect.left + rect.width / 2,
|
|
405
405
|
y: rect.top + rect.height / 2
|
|
406
406
|
});
|
|
@@ -425,7 +425,7 @@ function $67560de7c78cb232$var$findValidDropTargets(options) {
|
|
|
425
425
|
...$67560de7c78cb232$var$dropTargets.values()
|
|
426
426
|
].filter((target)=>{
|
|
427
427
|
if (target.element.closest('[aria-hidden="true"]')) return false;
|
|
428
|
-
if (typeof target.getDropOperation ===
|
|
428
|
+
if (typeof target.getDropOperation === 'function') return target.getDropOperation(types, options.allowedDropOperations) !== 'cancel';
|
|
429
429
|
return true;
|
|
430
430
|
});
|
|
431
431
|
}
|