Release 5.0.5 -> Master

docs/CHANGELOG.md

@@ -3,6 +3,10 @@ id: changelog
 title: Changelog
 ---
 
+## 5.0.5 (Dec 6, 2018)
+- **Bugfix:** fix: draggable resizing col jumps to right ([1421](https://github.com/adazzle/react-data-grid/pull/1421))
+- **Bugfix:** Cell Tooltip - Focus Issues ([1422](https://github.com/adazzle/react-data-grid/pull/1422))
+
 ## 6.0.1 (Nov 30, 2018)
 - **Bugfix:** Fix formatter exports ([1409](https://github.com/adazzle/react-data-grid/pull/1409))
 

packages/react-data-grid/src/Cell.js

@@ -172,7 +172,7 @@ class Cell extends React.PureComponent {
     const extraClasses = joinClasses({
       'row-selected': this.props.isRowSelected,
       editing: this.isEditorEnabled(),
-      'cell-tooltip': this.props.tooltip ? true : false,
+      'has-tooltip': this.props.tooltip ? true : false,
       'rdg-child-cell': this.props.expandableOptions && this.props.expandableOptions.subRowDetails && this.props.expandableOptions.treeDepth > 0,
       'last-column': this.props.column.isLastColumn
     });
@@ -315,13 +315,20 @@ class Cell extends React.PureComponent {
     if (treeDepth > 0 && isExpandCell) {
       cellDeleter = <ChildRowDeleteButton treeDepth={treeDepth} cellHeight={this.props.height} siblingIndex={this.props.expandableOptions.subRowDetails.siblingIndex} numberSiblings={this.props.expandableOptions.subRowDetails.numberSiblings} onDeleteSubRow={this.onDeleteSubRow} isDeleteSubRowEnabled={isDeleteSubRowEnabled} />;
     }
+
+    const tooltip = this.props.tooltip && (<span className="cell-tooltip-text">{this.props.tooltip}</span>);
+    const classes = joinClasses('react-grid-Cell__value',
+      { 'cell-tooltip': this.props.tooltip ? true : false }
+    );
+
     return (
-      <div className="react-grid-Cell__value">
+      <div className={classes}>
         {cellDeleter}
         <div style={{ marginLeft, position: 'relative', top: '50%', transform: 'translateY(-50%)' }}>
           <span>{CellContent}</span>
           {this.props.cellControls}
         </div>
+        {tooltip}
       </div>
     );
   };
@@ -346,7 +353,6 @@ class Cell extends React.PureComponent {
     });
 
     const events = this.getEvents();
-    const tooltip = this.props.tooltip ? (<span className="cell-tooltip-text">{this.props.tooltip}</span>) : null;
 
     const cellExpander =  this.canExpand() && (
       <CellExpand expandableOptions={this.props.expandableOptions} onCellExpand={this.onCellExpand} />
@@ -363,7 +369,6 @@ class Cell extends React.PureComponent {
         {cellActionButtons}
         {cellExpander}
         {cellContent}
-        {tooltip}
       </div>
     );
   }

packages/react-data-grid/src/HeaderCell.js

@@ -33,6 +33,8 @@ class HeaderCell extends React.Component {
 
   state = { resizing: false };
 
+  headerCellRef = (node) => this.headerCell = node;
+
   onDragStart = (e) => {
     this.setState({ resizing: true });
     // need to set dummy data for FF
@@ -118,7 +120,7 @@ class HeaderCell extends React.Component {
       'react-grid-HeaderCell--frozen': isFrozen(column)
     }, this.props.className, column.cellClass);
     const cell = (
-      <div className={className} style={this.getStyle()}>
+      <div ref={this.headerCellRef} className={className} style={this.getStyle()}>
         {this.getCell()}
         {resizeHandle}
       </div>
@@ -129,8 +131,9 @@ class HeaderCell extends React.Component {
       return (
         <DraggableHeaderCell
           column={column}
-          onHeaderDrop={this.props.onHeaderDrop}>
-           {cell}
+          onHeaderDrop={this.props.onHeaderDrop}
+        >
+          {cell}
         </DraggableHeaderCell>
       );
     }

themes/react-data-grid-cell.css

@@ -27,6 +27,15 @@
   box-shadow: 2px 0 5px -2px rgba(136, 136, 136, .3) !important;
 }
 
+/* cell which have tooltips need to have a higher z-index on hover so that the tooltip appears above the other cells*/
+.react-grid-Cell.has-tooltip:hover {
+  z-index: 1;
+}
+
+.react-grid-Cell.react-grid-Cell--frozen.has-tooltip:hover  {
+  z-index: 3
+}
+
 .react-contextmenu--visible {
   z-index: 1000;
 }
@@ -82,16 +91,8 @@
   padding: 0;
 }
 
-.cell-tooltip {
-    position: relative;
-    display: inline-block;
-}
-
-.cell-tooltip:hover {
-  z-index: 101;
-}
-
 .cell-tooltip .cell-tooltip-text {
+    white-space: normal;
     visibility: hidden;
     width: 150px;
     background-color: black;
@@ -100,12 +101,11 @@
     border-radius: 6px;
     padding: 5px 0;
     position: absolute;
-    z-index: 1;
-    bottom: -150%;
+    top: 50%;
+    bottom: initial;
     left: 50%;
-    margin-left: -60px;
-    /* Fade in tooltip - takes 1 second to go from 0% to 100% opacity */
-    opacity: 1s;
+    margin-top: 15px;
+    margin-left: -75px
 }
 
 .cell-tooltip:hover .cell-tooltip-text {