@teselagen/ui 0.3.34 → 0.3.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.3.34",
+  "version": "0.3.36",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -16,7 +16,6 @@
     "@blueprintjs/datetime": "3.23.19",
     "@blueprintjs/icons": "3.33.0",
     "@blueprintjs/select": "3.18.11",
-    "@teselagen/react-table": "^6.10.11",
     "axios": "^0.21.1",
     "bluebird": "3.7.2",
     "buffer": "5.7.1",

package/src/DataTable/SortableColumns.js

@@ -28,18 +28,25 @@ class SortableColumns extends Component {
     );
   };
 
-  onSortEnd = ({ oldIndex, newIndex }) => {
+  onSortEnd = (...args) => {
+    const { oldIndex, newIndex } = args[0];
+    document.body.classList.remove("drag-active");
     this.props.moveColumn({
       oldIndex,
       newIndex
     });
   };
 
+  onSortStart = () => {
+    document.body.classList.add("drag-active");
+  };
+
   render() {
     return (
       <SortableCustomTheadComponent
         {...this.props}
         lockAxis="x"
+        onSortStart={this.onSortStart}
         axis="x"
         distance={10}
         helperClass="above-dialog"

package/src/DataTable/index.js

@@ -3228,6 +3228,7 @@ class DataTable extends React.Component {
             ${description} ${isUnique ? "<br>Must be unique" : ""}</div>`
         })}
         data-test={columnTitleTextified}
+        data-path={path}
         data-copy-text={columnTitleTextified}
         className={classNames("tg-react-table-column-header", {
           "sort-active": sortUp || sortDown

package/src/DataTable/style.css

@@ -229,8 +229,13 @@
 
 .tg-filter-menu-button.tg-active-filter,
 .tg-sort-arrow-container .bp3-icon.active,
-.tg-react-table-column-header:hover .tg-sort-arrow-container .bp3-icon,
-.tg-react-table-column-header:hover .tg-filter-menu-button,
+body:not(.drag-active)
+  .tg-react-table-column-header:hover
+  .tg-sort-arrow-container
+  .bp3-icon,
+body:not(.drag-active)
+  .tg-react-table-column-header:hover
+  .tg-filter-menu-button,
 .tg-filter-menu-button.tg-active-filter,
 .tg-react-table-column-header .bp3-popover-open .tg-filter-menu-button {
   display: block !important;
@@ -472,6 +477,7 @@
 }
 
 .ReactTable .rt-thead .rt-th {
+  transition-property: unset;
   padding: 0;
 }
 

package/src/autoTooltip.js

@@ -142,7 +142,7 @@ let clearMe;
           dataAvoid,
           dataAvoidBackup
         };
-        if (dataTip) {
+        if (dataTip && !document.body.classList.contains("drag-active")) {
           if (dataTipStop) break;
 
           inner(dataTip, el, opts);
@@ -151,6 +151,7 @@ let clearMe;
           isEllipsized &&
           el.offsetWidth < el.scrollWidth - 4 && //the -4 is adding a teeny bit of tolerance to fix issues with the column headers getting tooltips even when fully visible
           !el.classList.contains("no-data-tip") &&
+          !document.body.classList.contains("drag-active") &&
           el.textContent &&
           el.textContent?.trim?.().length !== 0
         ) {

package/style.css

@@ -9318,8 +9318,13 @@ button:not(:disabled):active {
 
 .tg-filter-menu-button.tg-active-filter,
 .tg-sort-arrow-container .bp3-icon.active,
-.tg-react-table-column-header:hover .tg-sort-arrow-container .bp3-icon,
-.tg-react-table-column-header:hover .tg-filter-menu-button,
+body:not(.drag-active)
+  .tg-react-table-column-header:hover
+  .tg-sort-arrow-container
+  .bp3-icon,
+body:not(.drag-active)
+  .tg-react-table-column-header:hover
+  .tg-filter-menu-button,
 .tg-filter-menu-button.tg-active-filter,
 .tg-react-table-column-header .bp3-popover-open .tg-filter-menu-button {
   display: block !important;
@@ -9561,6 +9566,7 @@ button:not(:disabled):active {
 }
 
 .ReactTable .rt-thead .rt-th {
+  transition-property: unset;
   padding: 0;
 }