@refinitiv-ui/efx-grid 6.0.30 → 6.0.32

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.
Files changed (42) hide show
  1. package/lib/core/dist/core.js +310 -117
  2. package/lib/core/dist/core.min.js +1 -1
  3. package/lib/core/es6/grid/Core.js +53 -28
  4. package/lib/core/es6/grid/ILayoutGrid.js +3 -3
  5. package/lib/core/es6/grid/LayoutGrid.js +67 -23
  6. package/lib/core/es6/grid/VirtualizedLayoutGrid.js +92 -55
  7. package/lib/core/es6/grid/components/Scrollbar.js +19 -1
  8. package/lib/core/es6/grid/util/SelectionList.d.ts +6 -2
  9. package/lib/core/es6/grid/util/SelectionList.js +76 -7
  10. package/lib/filter-dialog/lib/filter-dialog.js +11 -8
  11. package/lib/filter-dialog/themes/base.less +7 -3
  12. package/lib/filter-dialog/themes/elemental/dark/es5/all-elements.js +1 -1
  13. package/lib/filter-dialog/themes/elemental/dark/filter-dialog.js +1 -1
  14. package/lib/filter-dialog/themes/elemental/light/es5/all-elements.js +1 -1
  15. package/lib/filter-dialog/themes/elemental/light/filter-dialog.js +1 -1
  16. package/lib/filter-dialog/themes/halo/dark/es5/all-elements.js +1 -1
  17. package/lib/filter-dialog/themes/halo/dark/filter-dialog.js +1 -1
  18. package/lib/filter-dialog/themes/halo/light/es5/all-elements.js +1 -1
  19. package/lib/filter-dialog/themes/halo/light/filter-dialog.js +1 -1
  20. package/lib/filter-dialog/themes/solar/charcoal/es5/all-elements.js +1 -1
  21. package/lib/filter-dialog/themes/solar/charcoal/filter-dialog.js +1 -1
  22. package/lib/filter-dialog/themes/solar/pearl/es5/all-elements.js +1 -1
  23. package/lib/filter-dialog/themes/solar/pearl/filter-dialog.js +1 -1
  24. package/lib/grid/index.js +1 -1
  25. package/lib/statistics-row/es6/StatisticsRow.d.ts +25 -25
  26. package/lib/statistics-row/es6/StatisticsRow.js +9 -4
  27. package/lib/tr-grid-column-selection/es6/ColumnSelection.d.ts +2 -0
  28. package/lib/tr-grid-column-selection/es6/ColumnSelection.js +14 -0
  29. package/lib/tr-grid-content-wrap/es6/ContentWrap.d.ts +4 -4
  30. package/lib/tr-grid-content-wrap/es6/ContentWrap.js +116 -70
  31. package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts +23 -1
  32. package/lib/tr-grid-row-dragging/es6/RowDragging.js +339 -40
  33. package/lib/tr-grid-util/es6/DragUI.d.ts +2 -0
  34. package/lib/tr-grid-util/es6/DragUI.js +39 -9
  35. package/lib/tr-grid-util/es6/Popup.d.ts +3 -1
  36. package/lib/tr-grid-util/es6/Popup.js +57 -23
  37. package/lib/types/es6/ContentWrap.d.ts +4 -4
  38. package/lib/types/es6/RealtimeGrid/ColumnDefinition.d.ts +2 -0
  39. package/lib/types/es6/RealtimeGrid/FieldDefinition.d.ts +4 -0
  40. package/lib/types/es6/RealtimeGrid/Grid.d.ts +1 -0
  41. package/lib/versions.json +6 -6
  42. package/package.json +1 -1
@@ -75,6 +75,10 @@ var RowDraggingPlugin = function (options) {
75
75
  t._onDragEnd = t._onDragEnd.bind(t);
76
76
  t._onThemeLoaded = t._onThemeLoaded.bind(t);
77
77
 
78
+ t._onJETDrop = t._onJETDrop.bind(t);
79
+ t._onJETDragOver = t._onJETDragOver.bind(t);
80
+ t._delayStart = t._delayStart.bind(t);
81
+
78
82
  t._hosts = [];
79
83
 
80
84
  t._guideline = document.createElement("div"); // Test IE mouse event, guildline close mouse event
@@ -198,6 +202,30 @@ RowDraggingPlugin.prototype._autoScroll = true;
198
202
  * @private
199
203
  */
200
204
  RowDraggingPlugin.prototype._dragUI = null;
205
+ /** @type {number}
206
+ * @private
207
+ */
208
+ RowDraggingPlugin.prototype._timerId = -1;
209
+ /** @type {boolean}
210
+ * @private
211
+ */
212
+ RowDraggingPlugin.prototype._jetDnD = false;
213
+ /** @type {Object}
214
+ * @private
215
+ */
216
+ RowDraggingPlugin.prototype._jetDragContent = null;
217
+ /** @type {boolean}
218
+ * @private
219
+ */
220
+ RowDraggingPlugin.prototype._jetContentHasRic = false;
221
+ /** @type {boolean}
222
+ * @private
223
+ */
224
+ RowDraggingPlugin.prototype._jetContentHasField = false;
225
+ /** @type {string}
226
+ * @private
227
+ */
228
+ RowDraggingPlugin.prototype._entryPoint = "";
201
229
 
202
230
  /** @private Applied theme color in row dragging and dragUI
203
231
  * @param {Object} host core grid instance
@@ -337,7 +365,11 @@ RowDraggingPlugin.prototype.config = function (options) {
337
365
 
338
366
  if (typeof extOptions["dragBoxRenderer"] === "function") {
339
367
  this._dragBoxRenderer = extOptions["dragBoxRenderer"];
340
- this._dragBox.className = "drag-box"; // set disable drag-box
368
+ var className = "drag-box";
369
+ if (ElfUtil.getElfVersion() < 3) {
370
+ className = "tr-dragbox content-dragging"; // Keep backward compatibility
371
+ }
372
+ this._dragBox.className = className;
341
373
  } else {
342
374
  this._dragBox.className = "drag-box-disabled"; // set disable drag-box
343
375
  }
@@ -389,38 +421,10 @@ RowDraggingPlugin.prototype.getConfigObject = function (out_obj) {
389
421
  };
390
422
 
391
423
  /** @public
392
- * @param {*} startRef
393
- * @param {boolean=} opt_suppressEvent
424
+ * @param {*=} startRef
394
425
  */
395
426
  RowDraggingPlugin.prototype.startDrag = function (startRef) {
396
- if (this._dragging || this._hosts.length <= 0) { return; }
397
- if (this._disabled) {
398
- return;
399
- }
400
-
401
- var pos;
402
- if (startRef) {
403
- if (startRef.type === "dragstart") {
404
- if(startRef["preventDefault"]) {
405
- Dom.preventDefault(startRef);
406
- }
407
- var host = this.getRelativeGrid(startRef);
408
- if (host) {
409
- pos = host.getRelativePosition(this._dragTarget);
410
- }
411
- } else {
412
- pos = this._hitTest(startRef);
413
- }
414
- } else {
415
- var target = this._dragTarget || this._hosts[0].getSection("content").getCell(0, 0);
416
- pos = this._hitTest(target);
417
- }
418
-
419
- if (_isInContentSection(pos)) {
420
- this._clearCache();
421
- this._pos = pos;
422
- this._onDragStart(startRef);
423
- }
427
+ this._startDrag(false, startRef); // Start without delay start
424
428
  };
425
429
  /** @public */
426
430
  RowDraggingPlugin.prototype.stopDrag = function () {
@@ -469,6 +473,114 @@ RowDraggingPlugin.prototype.disableUIs = function (disabled) {
469
473
  this._uiDisabled = disabled !== false;
470
474
  };
471
475
 
476
+ /** @public
477
+ * @param {boolean=} allowed
478
+ */
479
+ RowDraggingPlugin.prototype.allowDrag = function (allowed) {
480
+ if(this._pos) {// WARNING: Please note that this method is intent to be used by client, and not for internal use
481
+ this._pos["invalidTarget"] = (allowed === false);
482
+ }
483
+ };
484
+
485
+ /** @public
486
+ * @function
487
+ * @param {boolean=} allowed
488
+ */
489
+ RowDraggingPlugin.prototype.allowDrop = RowDraggingPlugin.prototype.allowDrag;
490
+
491
+ /** @public
492
+ * @param {*} content Element, Node, string, number, or everything else.
493
+ */
494
+ RowDraggingPlugin.prototype.setDragContent = function (content) {
495
+ this._dragUI.setContent(content);
496
+ };
497
+
498
+ /** @public
499
+ * @return {Element}
500
+ */
501
+ RowDraggingPlugin.prototype.getDragBox = function () {
502
+ return this._dragBox;
503
+ };
504
+
505
+ /** @public
506
+ * @return {string}
507
+ */
508
+ RowDraggingPlugin.prototype.getDragSource = function () {
509
+ return this._entryPoint;
510
+ };
511
+
512
+ /** @public
513
+ * @return {boolean}
514
+ */
515
+ RowDraggingPlugin.prototype.isDragging = function () {
516
+ return this._dragging;
517
+ };
518
+
519
+ /** @public
520
+ * @param {boolean=} disabled
521
+ */
522
+ RowDraggingPlugin.prototype.disableDragging = function (disabled) {
523
+ this._disabled = disabled !== false;
524
+ };
525
+
526
+ /** @public
527
+ * @param {boolean=} enabled
528
+ */
529
+ RowDraggingPlugin.prototype.enableJETDragAndDrop = function (enabled) {
530
+ var val = enabled !== false;
531
+ if(this._jetDnD === val) { return; }
532
+
533
+ this._jetDnD = val;
534
+
535
+ var jet = window["JET"];
536
+ if (jet) {
537
+ //If ContainerDescription is undefined, that means JET is not initalized. Mostlikely the app
538
+ //is running the local development mode without container. Disable dnd in this case
539
+ if (jet["ContainerDescription"] && (jet["ContainerDescription"]["name"] !== "EikonNowContainer")) {
540
+ if (this._jetDnD) {
541
+ jet["onDrop"](this._onJETDrop);
542
+ jet["onDragOver"](this._onJETDragOver);
543
+ jet["onDragLeave"](this.stopDrag);
544
+ } else {
545
+ jet["onDrop"](null);
546
+ jet["onDragOver"](null);
547
+ jet["onDragLeave"](null);
548
+ }
549
+ } else {
550
+ this._jetDnD = false;
551
+ }
552
+ }
553
+ };
554
+
555
+ /** @public
556
+ * @return {Object}
557
+ */
558
+ RowDraggingPlugin.prototype.getJETDragContent = function () {
559
+ return this._jetDragContent;
560
+ };
561
+
562
+ /** @public
563
+ * @param {Object} content
564
+ */
565
+ RowDraggingPlugin.prototype.setJETDragContent = function (content) {
566
+ this._jetDragContent = content;
567
+
568
+ var tr = window["tr"];
569
+ var grid = (tr) ? tr["grid"] : null;
570
+ var JetDragContent = (grid) ? grid["JetDragContent"] : null;
571
+ if (content && JetDragContent) {
572
+ var jetDragContentMgr = new JetDragContent(content);
573
+ var rics = jetDragContentMgr["getRicsToDrop"]();
574
+ var fields = jetDragContentMgr["getFieldsToDrop"]();
575
+
576
+ this._jetContentHasRic = (rics && rics.length > 0) ? true : false;
577
+ this._jetContentHasField = (fields && fields.length > 0) ? true : false;
578
+ } else {
579
+ this._jetContentHasRic = false;
580
+ this._jetContentHasField = false;
581
+ }
582
+ };
583
+
472
584
  /** @private
473
585
  * @param {*} e
474
586
  * @return {!Object}
@@ -503,25 +615,41 @@ RowDraggingPlugin.prototype._onMouseDown = function (e) {
503
615
  this._touchMode = true;
504
616
  }
505
617
  this._dragTarget = /** @type{Element} */(e.target);
618
+ this._setEntryPoint("grid");
506
619
  };
507
620
  /** @private
508
621
  * @param {*=} e
622
+ * @param {boolean=} fromJET
509
623
  */
510
- RowDraggingPlugin.prototype._onDragStart = function (e) {
624
+ RowDraggingPlugin.prototype._onDragStart = function (e, fromJET) {
511
625
  if (this._dragging) { return; }
512
626
  if (!this._pos) { return; }
513
627
 
514
- this._dispatch("dragStart", this._pos);
515
- if (this._isDragCancelled()) {
516
- return;
628
+ this._listenAbortActions(false); // Unlisen abort action
629
+
630
+ var useJetDragStart = false;
631
+ var jet = window["JET"];
632
+ if (fromJET) {
633
+ useJetDragStart = true;
634
+ } else {
635
+ this._dispatch("dragStart", /** @type{!Object} */(this._pos));
636
+ if(this._isDragCancelled()) {
637
+ return; // User does not allow this drag to happen
638
+ }
639
+ if (jet && this._jetDnD && this._jetDragContent) {
640
+ useJetDragStart = true;
641
+ jet["dragStart"](this._jetDragContent);
642
+ }
517
643
  }
518
644
 
519
645
  this._dragging = true;
520
646
  // Event listeners
521
647
  document.body.classList.add("tr-dragging"); // Prevent text selection
522
648
 
523
- window.addEventListener("mousemove", this._onMouseMove, false);
524
- window.addEventListener("touchmove", this._onMouseMove, false);
649
+ if (!useJetDragStart) { // WARNING: JET wrongly intercepts all mouse events without app's consent
650
+ window.addEventListener("mousemove", this._onMouseMove, false);
651
+ window.addEventListener("touchmove", this._onMouseMove, false);
652
+ }
525
653
  window.addEventListener("mouseup", this._onDragEnd, false);
526
654
  window.addEventListener("touchend", this._onDragEnd, false);
527
655
  window.addEventListener("touchcancel", this._onDragEnd, false);
@@ -601,12 +729,20 @@ RowDraggingPlugin.prototype._onMouseMove = function (e) {
601
729
 
602
730
  this._pos = this._hitTest(e); // A new object is created
603
731
 
604
- this._updateGuidePosition(e);
732
+ var dropable = true;
733
+ if(this._entryPoint === 'JET' && !this._jetContentHasRic) {
734
+ dropable = false;
735
+ }
736
+
737
+ if(dropable) {
738
+ this._updateGuidePosition(e);
739
+ }
740
+
605
741
  this._pos.dragBox = this._dragBox; // assign dragBox for user determine valid target
606
742
 
607
743
  // Dispatch drag event to let user determine valid drop target using allowDrag (allowDrop) method
608
744
  this._dispatch("drag", this._pos);
609
- if(!this._uiDisabled) {
745
+ if(!this._uiDisabled && dropable) {
610
746
  e.dragBoxIcon = this._pos.dragBoxIcon; // access event object instread of element for prevent element persistence
611
747
  var drop = this._dragUI.renderDragBox(e, this._startingGrid);
612
748
  if(!drop) { // can not be drop or not allow to drop or insertion
@@ -655,7 +791,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
655
791
  // WARNING: dropTarget is not correct for element in a shadow root
656
792
  destPos["dropTarget"] = e ? e.target : null;
657
793
 
658
- if (this._dataTransfer && _isInContentSection(this._pos)) {
794
+ if (!this._jetDnD && this._dataTransfer && _isInContentSection(this._pos)) {
659
795
  var destGrid = destPos["grid"] || srcGrid;
660
796
  var destRowIndex = destPos["rowIndex"];
661
797
 
@@ -668,10 +804,26 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
668
804
 
669
805
  this._moveRows(srcRowIndices, destRowIndex, srcGrid, destGrid, destPos);
670
806
  }
807
+
808
+ // Extend event property
809
+ var cellElement = destPos["cellElement"];
810
+ var isRight = 0;
811
+
812
+ if (e && cellElement) {
813
+ var rect = cellElement.getBoundingClientRect();
814
+ var offsetX = (e["clientX"] - rect["left"]) / destPos["zoomFactor"];
815
+ isRight = Math.round(offsetX / cellElement.offsetWidth);
816
+ }
817
+
818
+ destPos["colIndex"] += isRight;
819
+ destPos["currentPosition"] = destPos; // To support JET requirement
820
+ destPos["data"] = this._jetDragContent;
821
+ destPos["dropTarget"] = e.target;
671
822
  }
672
823
 
673
824
  this._dispatch("dragEnd", destPos || {}); // Always fire drag end for client to clean up its resource
674
825
  this._clearCache();
826
+ this._jetDragContent = null;
675
827
  };
676
828
  /** @private
677
829
  * @param {Array.<number>|string} srcRowRef
@@ -840,6 +992,153 @@ RowDraggingPlugin.prototype._onDragPulse = function () {
840
992
  }
841
993
  };
842
994
 
995
+ /** @public
996
+ * @param {Object} content
997
+ */
998
+ RowDraggingPlugin.prototype.setJETDragContent = function (content) {
999
+ this._jetDragContent = content;
1000
+
1001
+ var t = window["tr"];
1002
+ var g = (t) ? t["grid"] : null;
1003
+ var jdc = (g) ? g["JetDragContent"] : null;
1004
+ if (content && jdc) {
1005
+ var jetDragContentMgr = new jdc(content);
1006
+ var rics = jetDragContentMgr["getRicsToDrop"]();
1007
+ var fields = jetDragContentMgr["getFieldsToDrop"]();
1008
+
1009
+ this._jetContentHasRic = (rics && rics.length > 0) ? true : false;
1010
+ this._jetContentHasField = (fields && fields.length > 0) ? true : false;
1011
+ } else {
1012
+ this._jetContentHasRic = false;
1013
+ this._jetContentHasField = false;
1014
+ }
1015
+ };
1016
+ /** @private
1017
+ * @param {string} str
1018
+ */
1019
+ RowDraggingPlugin.prototype._setEntryPoint = function (str) {
1020
+ this._entryPoint = str;
1021
+ this.setDragContent(null); // Clear original content
1022
+ };
1023
+
1024
+ /** @private
1025
+ * @param {Object} e
1026
+ */
1027
+ RowDraggingPlugin.prototype._onMouseOut = function (e) {
1028
+ e = e ? e : window.event;
1029
+ var from = e.relatedTarget || e.toElement;
1030
+ if (!from || from.nodeName == "HTML") {
1031
+ // window.console.warn("Left window");
1032
+
1033
+ /*
1034
+ * TRGRID-1493
1035
+ * The DragStart is delayed using a timer (_timerId created by _delayStart )
1036
+ * The mouse may left the window before the drag start
1037
+ * In this case we should force the stopDrag to stop the drag on the source
1038
+ * Because the mouse up will not be handled by the source
1039
+ */
1040
+
1041
+ // cancel the timer - _onDragStart will not be called by the timer
1042
+ if(this._timerId >= 0) {
1043
+ clearTimeout(this._timerId);
1044
+ this._timerId = -1;
1045
+ }
1046
+
1047
+ this._onDragStart();
1048
+ this.stopDrag();
1049
+ }
1050
+ };
1051
+
1052
+ /** @private
1053
+ * @param {Object} e
1054
+ */
1055
+ RowDraggingPlugin.prototype._delayStart = function (e) {
1056
+ this._startingGrid.unlisten("mousemove", this._delayStart);
1057
+
1058
+ if (this._timerId < 0) {
1059
+ this._timerId = window.setTimeout(this._onDragStart, 200);
1060
+ }
1061
+ if (this._jetDnD) {
1062
+ document.addEventListener("mouseout", this._onMouseOut, false);
1063
+ }
1064
+ };
1065
+ /** @private
1066
+ * @param {boolean=} bool
1067
+ */
1068
+ RowDraggingPlugin.prototype._listenAbortActions = function (bool) {
1069
+ if (bool !== false) {
1070
+ window.addEventListener("mouseup", this._clearCache, false);
1071
+ } else {
1072
+ window.removeEventListener("mouseup", this._clearCache, false);
1073
+ }
1074
+ };
1075
+ /** @private
1076
+ * @param {boolean=} delayStart
1077
+ * @param {*=} startRef
1078
+ * @param {boolean=} fromJET
1079
+ */
1080
+ RowDraggingPlugin.prototype._startDrag = function (delayStart, startRef, fromJET) {
1081
+ if (this._dragging || this._hosts.length <= 0) { return; }
1082
+ if (this._disabled) { return; }
1083
+
1084
+ var pos;
1085
+ if (startRef) {
1086
+ if (startRef.type === "dragstart") {
1087
+ if (startRef["preventDefault"]) {
1088
+ Dom.preventDefault(startRef);
1089
+ }
1090
+ var host = this.getRelativeGrid(startRef);
1091
+ if (host) {
1092
+ pos = host.getRelativePosition(this._dragTarget);
1093
+ }
1094
+ } else {
1095
+ pos = this._hitTest(startRef);
1096
+ }
1097
+ } else {
1098
+ var target = this._dragTarget || this._hosts[0].getSection("content").getCell(0, 0);
1099
+ pos = this._hitTest(target);
1100
+ }
1101
+
1102
+ if (_isInContentSection(pos)) {
1103
+ this._clearCache();
1104
+ this._pos = pos;
1105
+ this._startingGrid = pos["grid"];
1106
+
1107
+ if (delayStart) {
1108
+ this._startingGrid.listen("mousemove", this._delayStart);
1109
+ this._listenAbortActions();
1110
+ } else { // Start immediately
1111
+ this._onDragStart(startRef, fromJET);
1112
+ }
1113
+ }
1114
+ };
1115
+ /** @private
1116
+ * @param {Object} clientPos
1117
+ */
1118
+ RowDraggingPlugin.prototype._onJETDragOver = function (clientPos) {
1119
+ if (!clientPos) { return; }
1120
+
1121
+ if (!this._dragging) {
1122
+ if (!clientPos["dropData"]) { return; }
1123
+ this._setEntryPoint("JET");
1124
+ this.setJETDragContent(clientPos["dropData"]); // WARNING: We have no way to distinguish between dropData from grid and other apps
1125
+ this._startDrag(false, clientPos["e"], true); // Event is suppressed
1126
+ } else {
1127
+ this._onDrag(clientPos["e"]);
1128
+ }
1129
+ };
1130
+ /** @private
1131
+ * @param {Object} jetObj
1132
+ */
1133
+ RowDraggingPlugin.prototype._onJETDrop = function (jetObj) {
1134
+ if (!this._dragging) { return; }
1135
+
1136
+ if (!this._jetDragContent) {
1137
+ this._jetDragContent = jetObj; // To maintain original client signature
1138
+ }
1139
+ this._onDragEnd(jetObj["mouse"]["srcEvent"]);
1140
+ };
1141
+
843
1142
 
844
1143
 
845
1144
  export default RowDraggingPlugin;
@@ -10,6 +10,8 @@ declare class DragUI {
10
10
 
11
11
  public onThemeLoaded(colors: any): void;
12
12
 
13
+ public setContent(content: any): void;
14
+
13
15
  }
14
16
 
15
17
  export default DragUI;
@@ -9,7 +9,9 @@ import ElfUtil from "./ElfUtil.js";
9
9
  var DragUI = function(options) {
10
10
  this._dragBox = options.dragBox;
11
11
  this._dragBoxIcon = options.dragBoxIcon;
12
-
12
+ this._dragBoxContent = document.createElement("div");
13
+ this._dragBoxContent.className = "drag-box-content";
14
+ this._dragBox.appendChild(this._dragBoxContent);
13
15
  };
14
16
 
15
17
  /** @type {string}
@@ -60,6 +62,10 @@ DragUI.applyThemeColor = function(grid) {
60
62
  */
61
63
  DragUI.prototype.onThemeLoaded = function(colors) {
62
64
  if(!DragUI._styles) {
65
+ var cursor = "grabbing";
66
+ if (ElfUtil.getElfVersion() < 3) {
67
+ cursor = "move";
68
+ }
63
69
  var styles = [ // Main Styles without theme
64
70
  ".tr-row-guideline", [ // Backward compatability of row dragging
65
71
  "position: absolute;",
@@ -104,6 +110,10 @@ DragUI.prototype.onThemeLoaded = function(colors) {
104
110
  "top: 0;",
105
111
  "position: absolute;"
106
112
  ],
113
+ ".drag-box-content", [
114
+ "overflow-x: clip;",
115
+ "text-overflow: ellipsis;"
116
+ ],
107
117
  ".drag-box-icon", [
108
118
  "top: -4px;",
109
119
  "left: 12px;",
@@ -128,7 +138,7 @@ DragUI.prototype.onThemeLoaded = function(colors) {
128
138
  "--grid-void-icon-color: #FFFFFF;"
129
139
  ],
130
140
  ".mouse-dragging .cell:hover", [ // for change mouse cursor when hover header while dragging
131
- "cursor: grabbing !important;"
141
+ "cursor: " + cursor + " !important;"
132
142
  ],
133
143
  ".tr-grid .column .cell.drag-indicator", [ // --grid-drag-indicator defualt is "none"
134
144
  "border-top: var(--grid-drag-indicator) !important;",
@@ -175,27 +185,31 @@ DragUI.prototype.renderDragBox = function (e, grid) {
175
185
  }
176
186
 
177
187
  var gridElem = grid.getElement();
188
+ var dragBoxHost = gridElem;
178
189
  var gridParent = grid.getParent().parentNode;
179
- var pn = this._dragBox.parentNode;
180
- if(!pn) {
181
- gridParent.appendChild(this._dragBox);
190
+ if (gridParent.nodeType === 11) {
191
+ dragBoxHost = gridParent;
182
192
  }
183
193
 
184
- var iconParent = this._dragBoxIcon.parentNode;
194
+ var parent = this._dragBox.parentNode;
195
+ if(!parent) {
196
+ dragBoxHost.appendChild(this._dragBox);
197
+ }
185
198
 
186
- var dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon;
199
+ var dragBoxIcon = e.dragBoxIcon || this._dragBox.dragBoxIcon; // The user-supplied icon
187
200
  this._dragBoxIcon.style.visibility = "visible";
201
+ parent = this._dragBoxIcon.parentNode;
188
202
  var drop = true;
189
203
  if(dragBoxIcon === "insertion") {
190
204
  drop = false;
191
205
  this._dragBoxIcon.icon = "add";
192
- if(!iconParent) {
206
+ if(!parent) {
193
207
  this._dragBox.appendChild(this._dragBoxIcon);
194
208
  }
195
209
  } else if (dragBoxIcon === "not-allowed" || dragBoxIcon === "no-drop" || dragBoxIcon === "void" ) {
196
210
  drop = false;
197
211
  this._dragBoxIcon.icon = "void";
198
- if(!iconParent) {
212
+ if(!parent) {
199
213
  this._dragBox.appendChild(this._dragBoxIcon);
200
214
  }
201
215
  } else {
@@ -213,5 +227,21 @@ DragUI.prototype.renderDragBox = function (e, grid) {
213
227
  return drop;
214
228
  };
215
229
 
230
+ /** @public
231
+ * @param {*} content Element, Node, string, number, or everything else.
232
+ */
233
+ DragUI.prototype.setContent = function(content) {
234
+ if (content && content["getElement"]) {
235
+ content = content["getElement"]();
236
+ }
237
+
238
+ var dragBoxContent = this._dragBoxContent;
239
+ var currentContent = dragBoxContent._content;
240
+ if (content !== currentContent) {
241
+ dragBoxContent._content = content;
242
+ Dom.setContent(dragBoxContent, content);
243
+ }
244
+ };
245
+
216
246
  export default DragUI;
217
247
  export {DragUI};
@@ -69,11 +69,13 @@ declare class Popup extends EventDispatcher {
69
69
 
70
70
  public disableAutoHiding(opt_disabled?: boolean|null): void;
71
71
 
72
+ public disableAutoRepositioning(opt_disabled?: boolean|null): void;
73
+
72
74
  public disableAutoClipping(opt_disabled?: boolean|null): void;
73
75
 
74
76
  public disableHideOnScroll(opt_disabled?: boolean|null): void;
75
77
 
76
- public updatePosition(): void;
78
+ public updatePosition(fallback?: boolean|null): void;
77
79
 
78
80
  public enableUIBlocking(bool?: boolean|null): boolean;
79
81