From e2f0daf8e3edf1c8255585ba29f33ef7879275d8 Mon Sep 17 00:00:00 2001
From: Valentine Nuikin <nuykin@raketa.im>
Date: Tue, 10 Sep 2019 16:05:38 +0300
Subject: [PATCH 1/2] table handleResizeDoubleClick fix

---
 packages/table/src/common/utils.ts            | 32 +++++++++----------
 .../table/src/headers/columnHeaderCell.tsx    | 11 +++++--
 packages/table/src/headers/header.tsx         |  3 +-
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/table/src/common/utils.ts b/packages/table/src/common/utils.ts
index e37f4fda60..05de754853 100644
--- a/packages/table/src/common/utils.ts
+++ b/packages/table/src/common/utils.ts
@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-const CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT = "bp-table-text-no-measure";
+// used to exclude icons from column header measure
+export const CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT = "bp-table-text-no-measure";
+// supposed width of the icons placeholder
+const EXCLUDED_ICON_PLACEHOLDER_WIDTH = 16;
 
 /**
  * Since Firefox doesn't provide a computed "font" property, we manually
@@ -350,23 +353,20 @@ export const Utils = {
  * exclude an element's text from the computation.
  */
 function measureTextContentWithExclusions(context: CanvasRenderingContext2D, element: Element): TextMetrics {
-    // We only expect one or zero excluded elements in this subtree
-    // We don't have a need for more than one, so we avoid that complexity altogether.
-    const elementToExclude = element.querySelector(`.${CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT}`);
-    let removedElementParent: Element | undefined;
-    let removedElementNextSibling: Node | undefined;
-
-    if (elementToExclude != null) {
-        removedElementParent = elementToExclude.parentElement;
-        removedElementNextSibling = elementToExclude.nextSibling;
-        removedElementParent.removeChild(elementToExclude);
+    const elementsToExclude = element.querySelectorAll(`.${CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT}`);
+    let excludedElementsWidth = 0;
+    if (elementsToExclude && elementsToExclude.length) {
+        elementsToExclude.forEach((e) => {
+            const excludedMetrics = context.measureText(e.textContent);
+            excludedElementsWidth += excludedMetrics.width - EXCLUDED_ICON_PLACEHOLDER_WIDTH;
+        });
     }
 
     const metrics = context.measureText(element.textContent);
+    const metricsWithExclusions = {
+        ...metrics,
+        width: metrics.width - excludedElementsWidth,
+    };
 
-    if (elementToExclude != null) {
-        removedElementParent.insertBefore(elementToExclude, removedElementNextSibling);
-    }
-
-    return metrics;
+    return metricsWithExclusions;
 }
diff --git a/packages/table/src/headers/columnHeaderCell.tsx b/packages/table/src/headers/columnHeaderCell.tsx
index 736e1b5c56..27a95eaaae 100644
--- a/packages/table/src/headers/columnHeaderCell.tsx
+++ b/packages/table/src/headers/columnHeaderCell.tsx
@@ -28,6 +28,7 @@ import {
 } from "@blueprintjs/core";
 
 import * as Classes from "../common/classes";
+import { CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT } from "../common/utils";
 import { columnInteractionBarContextTypes, IColumnInteractionBarContextTypes } from "../common/context";
 import { LoadableContent } from "../common/loadableContent";
 import { HeaderCell, IHeaderCellProps } from "./headerCell";
@@ -194,9 +195,13 @@ export class ColumnHeaderCell extends AbstractPureComponent<IColumnHeaderCellPro
             return undefined;
         }
 
-        const classes = classNames(Classes.TABLE_TH_MENU_CONTAINER, {
-            [Classes.TABLE_TH_MENU_OPEN]: this.state.isActive,
-        });
+        const classes = classNames(
+            Classes.TABLE_TH_MENU_CONTAINER,
+            CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT,
+            {
+                [Classes.TABLE_TH_MENU_OPEN]: this.state.isActive,
+            }
+        );
 
         return (
             <div className={classes}>
diff --git a/packages/table/src/headers/header.tsx b/packages/table/src/headers/header.tsx
index 8371666bfb..6bbb301079 100644
--- a/packages/table/src/headers/header.tsx
+++ b/packages/table/src/headers/header.tsx
@@ -21,6 +21,7 @@ import * as React from "react";
 import { Grid } from "../common";
 import { IFocusedCellCoordinates } from "../common/cell";
 import * as Classes from "../common/classes";
+import { CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT } from "../common/utils";
 import { DragEvents } from "../interactions/dragEvents";
 import { IClientCoordinates, ICoordinateData } from "../interactions/draggable";
 import { DragReorderable, IReorderableProps } from "../interactions/reorderable";
@@ -378,7 +379,7 @@ export class Header extends React.Component<IInternalHeaderProps, IHeaderState>
             : this.wrapInDragReorderable(
                   index,
                   <div className={Classes.TABLE_REORDER_HANDLE_TARGET}>
-                      <div className={Classes.TABLE_REORDER_HANDLE}>
+                      <div className={classNames(Classes.TABLE_REORDER_HANDLE, CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT)}>
                           <Icon icon="drag-handle-vertical" />
                       </div>
                   </div>,

From b2e2bbe505329f6dcf336dcca017c4e02c878ea7 Mon Sep 17 00:00:00 2001
From: Valentine Nuikin <nuykin@raketa.im>
Date: Tue, 10 Sep 2019 16:48:17 +0300
Subject: [PATCH 2/2] lint fix

---
 packages/table/src/headers/columnHeaderCell.tsx | 12 ++++--------
 packages/table/src/headers/header.tsx           |  4 +++-
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/table/src/headers/columnHeaderCell.tsx b/packages/table/src/headers/columnHeaderCell.tsx
index 27a95eaaae..eab5843585 100644
--- a/packages/table/src/headers/columnHeaderCell.tsx
+++ b/packages/table/src/headers/columnHeaderCell.tsx
@@ -28,9 +28,9 @@ import {
 } from "@blueprintjs/core";
 
 import * as Classes from "../common/classes";
-import { CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT } from "../common/utils";
 import { columnInteractionBarContextTypes, IColumnInteractionBarContextTypes } from "../common/context";
 import { LoadableContent } from "../common/loadableContent";
+import { CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT } from "../common/utils";
 import { HeaderCell, IHeaderCellProps } from "./headerCell";
 
 export interface IColumnNameProps {
@@ -195,13 +195,9 @@ export class ColumnHeaderCell extends AbstractPureComponent<IColumnHeaderCellPro
             return undefined;
         }
 
-        const classes = classNames(
-            Classes.TABLE_TH_MENU_CONTAINER,
-            CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT,
-            {
-                [Classes.TABLE_TH_MENU_OPEN]: this.state.isActive,
-            }
-        );
+        const classes = classNames(Classes.TABLE_TH_MENU_CONTAINER, CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT, {
+            [Classes.TABLE_TH_MENU_OPEN]: this.state.isActive,
+        });
 
         return (
             <div className={classes}>
diff --git a/packages/table/src/headers/header.tsx b/packages/table/src/headers/header.tsx
index 6bbb301079..679b6f5f0e 100644
--- a/packages/table/src/headers/header.tsx
+++ b/packages/table/src/headers/header.tsx
@@ -379,7 +379,9 @@ export class Header extends React.Component<IInternalHeaderProps, IHeaderState>
             : this.wrapInDragReorderable(
                   index,
                   <div className={Classes.TABLE_REORDER_HANDLE_TARGET}>
-                      <div className={classNames(Classes.TABLE_REORDER_HANDLE, CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT)}>
+                      <div
+                          className={classNames(Classes.TABLE_REORDER_HANDLE, CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT)}
+                      >
                           <Icon icon="drag-handle-vertical" />
                       </div>
                   </div>,