@atlaskit/link-datasource 0.33.2 → 0.33.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 0.33.3
+
+### Patch Changes
+
+- [`60170e1d0cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60170e1d0cd) - Fixes to table view header: Remove drag handles, add tooltip, fix padding in editor context
+
 ## 0.33.2
 
 ### Patch Changes

package/dist/cjs/ui/issue-like-table/draggable-table-heading.js

@@ -10,7 +10,6 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _dragHandler = _interopRequireDefault(require("@atlaskit/icon/glyph/drag-handler"));
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
 var _boxWithoutTerminal = require("@atlaskit/pragmatic-drag-and-drop-react-indicator/box-without-terminal");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
@@ -36,18 +35,6 @@ var verticallyAlignedStyles = (0, _react2.css)({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-var dragHandleStyles = (0, _react2.css)({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  overflow: 'hidden',
-  width: 0,
-  transition: 'width 0.5s'
-});
-var dragHandleSpacerStyles = (0, _react2.css)({
-  width: 24,
-  transition: 'width 0.5s'
-});
 var dropTargetStyles = (0, _react2.css)({
   position: 'absolute',
   top: 0,
@@ -207,15 +194,6 @@ var DraggableTableHeading = function DraggableTableHeading(_ref) {
     edge: closestEdge
   })), (0, _react2.jsx)("div", {
     css: verticallyAlignedStyles
-  }, (0, _react2.jsx)("div", {
-    css: dragHandleStyles,
-    className: "issue-like-table-drag-handle"
-  }, (0, _react2.jsx)(_dragHandler.default, {
-    label: "".concat(id, "-drag-icon"),
-    size: "medium"
-  })), children, (0, _react2.jsx)("div", {
-    css: dragHandleSpacerStyles,
-    className: "issue-like-table-drag-handle-spacer"
-  })), state.type === 'preview' ? /*#__PURE__*/_reactDom.default.createPortal(dragPreview, state.container) : null);
+  }, children), state.type === 'preview' ? /*#__PURE__*/_reactDom.default.createPortal(dragPreview, state.container) : null);
 };
 exports.DraggableTableHeading = DraggableTableHeading;

package/dist/cjs/ui/issue-like-table/index.js

@@ -23,6 +23,7 @@ var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragma
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
 var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _columnPicker = require("./column-picker");
 var _dragColumnPreview = require("./drag-column-preview");
 var _draggableTableHeading = require("./draggable-table-heading");
@@ -338,6 +339,14 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     var key = _ref11.key,
       content = _ref11.content,
       maxWidth = _ref11.maxWidth;
+    var heading = (0, _react2.jsx)(_tooltip.default, {
+      content: content,
+      tag: "span",
+      testId: 'datasource-header-content'
+    }, (0, _react2.jsx)(_heading.default, {
+      level: "h400",
+      as: 'span'
+    }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
       var previewRows = tableRows.map(function (_ref12) {
@@ -351,9 +360,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         }
       }).slice(0, 5);
       var dragPreview = (0, _react2.jsx)(_dragColumnPreview.DragColumnPreview, {
-        title: (0, _react2.jsx)(_heading.default, {
-          level: "h400"
-        }, content),
+        title: heading,
         rows: previewRows
       });
       return (0, _react2.jsx)(_draggableTableHeading.DraggableTableHeading, {
@@ -364,9 +371,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         maxWidth: maxWidth,
         dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
         dragPreview: dragPreview
-      }, (0, _react2.jsx)(_heading.default, {
-        level: "h400"
-      }, content));
+      }, heading);
     } else {
       return (0, _react2.jsx)(_styled2.TableHeading, {
         key: key,
@@ -374,9 +379,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         style: {
           maxWidth: maxWidth
         }
-      }, (0, _react2.jsx)(_heading.default, {
-        level: "h400"
-      }, content));
+      }, heading);
     }
   }), onVisibleColumnKeysChange && hasData && (0, _react2.jsx)(ColumnPickerHeader, null, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],

package/dist/cjs/ui/issue-like-table/styled.js

@@ -11,7 +11,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2, _templateObject3;
 var Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
 exports.Table = Table;
-var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: grab;\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  .ProseMirror & h5,\n  & h5 {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 24px; /* Is needed to keep overall height consistent with or without drag handle icon present */\n  }\n\n  &:hover .issue-like-table-drag-handle {\n    width: 24px;\n  }\n  &:hover .issue-like-table-drag-handle-spacer {\n    width: 0px;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"));
+var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: grab;\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"), "var(--ds-font-lineHeight-300, 24px)");
 exports.TableHeading = TableHeading;
 var EmptyStateTableHeading = (0, _styled.default)(TableHeading)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &:first-child {\n    padding-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)");
 exports.EmptyStateTableHeading = EmptyStateTableHeading;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.33.2",
+	"version": "0.33.3",
 	"sideEffects": false
 }

package/dist/es2019/ui/issue-like-table/draggable-table-heading.js

@@ -3,7 +3,6 @@ import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import invariant from 'tiny-invariant';
-import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-indicator/box-without-terminal';
 import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
@@ -27,18 +26,6 @@ const verticallyAlignedStyles = css({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-const dragHandleStyles = css({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  overflow: 'hidden',
-  width: 0,
-  transition: 'width 0.5s'
-});
-const dragHandleSpacerStyles = css({
-  width: 24,
-  transition: 'width 0.5s'
-});
 const dropTargetStyles = css({
   position: 'absolute',
   top: 0,
@@ -192,14 +179,5 @@ export const DraggableTableHeading = ({
     edge: closestEdge
   })), jsx("div", {
     css: verticallyAlignedStyles
-  }, jsx("div", {
-    css: dragHandleStyles,
-    className: "issue-like-table-drag-handle"
-  }, jsx(DragHandlerIcon, {
-    label: `${id}-drag-icon`,
-    size: "medium"
-  })), children, jsx("div", {
-    css: dragHandleSpacerStyles,
-    className: "issue-like-table-drag-handle-spacer"
-  })), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
+  }, children), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
 };

package/dist/es2019/ui/issue-like-table/index.js

@@ -11,6 +11,7 @@ import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { N40 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -299,6 +300,14 @@ export const IssueLikeDataTableView = ({
     content,
     maxWidth
   }, cellIndex) => {
+    const heading = jsx(Tooltip, {
+      content: content,
+      tag: "span",
+      testId: 'datasource-header-content'
+    }, jsx(Heading, {
+      level: "h400",
+      as: 'span'
+    }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
       const previewRows = tableRows.map(({
@@ -312,9 +321,7 @@ export const IssueLikeDataTableView = ({
         }
       }).slice(0, 5);
       const dragPreview = jsx(DragColumnPreview, {
-        title: jsx(Heading, {
-          level: "h400"
-        }, content),
+        title: heading,
         rows: previewRows
       });
       return jsx(DraggableTableHeading, {
@@ -325,9 +332,7 @@ export const IssueLikeDataTableView = ({
         maxWidth: maxWidth,
         dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
         dragPreview: dragPreview
-      }, jsx(Heading, {
-        level: "h400"
-      }, content));
+      }, heading);
     } else {
       return jsx(TableHeading, {
         key: key,
@@ -335,9 +340,7 @@ export const IssueLikeDataTableView = ({
         style: {
           maxWidth
         }
-      }, jsx(Heading, {
-        level: "h400"
-      }, content));
+      }, heading);
     }
   }), onVisibleColumnKeysChange && hasData && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],

package/dist/es2019/ui/issue-like-table/styled.js

@@ -9,20 +9,12 @@ export const TableHeading = styled.th`
   padding-block: ${"var(--ds-space-100, 8px)"};
   line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
   border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
-  .ProseMirror & h5,
-  & h5 {
+  & [data-testid='datasource-header-content--container'] {
     margin-top: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    line-height: 24px; /* Is needed to keep overall height consistent with or without drag handle icon present */
-  }
-
-  &:hover .issue-like-table-drag-handle {
-    width: 24px;
-  }
-  &:hover .issue-like-table-drag-handle-spacer {
-    width: 0px;
+    line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
   }
 `;
 export const EmptyStateTableHeading = styled(TableHeading)`

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.33.2",
+	"version": "0.33.3",
 	"sideEffects": false
 }

package/dist/esm/ui/issue-like-table/draggable-table-heading.js

@@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import invariant from 'tiny-invariant';
-import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-indicator/box-without-terminal';
 import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
@@ -28,18 +27,6 @@ var verticallyAlignedStyles = css({
   alignItems: 'center',
   whiteSpace: 'nowrap'
 });
-var dragHandleStyles = css({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  overflow: 'hidden',
-  width: 0,
-  transition: 'width 0.5s'
-});
-var dragHandleSpacerStyles = css({
-  width: 24,
-  transition: 'width 0.5s'
-});
 var dropTargetStyles = css({
   position: 'absolute',
   top: 0,
@@ -199,14 +186,5 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     edge: closestEdge
   })), jsx("div", {
     css: verticallyAlignedStyles
-  }, jsx("div", {
-    css: dragHandleStyles,
-    className: "issue-like-table-drag-handle"
-  }, jsx(DragHandlerIcon, {
-    label: "".concat(id, "-drag-icon"),
-    size: "medium"
-  })), children, jsx("div", {
-    css: dragHandleSpacerStyles,
-    className: "issue-like-table-drag-handle-spacer"
-  })), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
+  }, children), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
 };

package/dist/esm/ui/issue-like-table/index.js

@@ -20,6 +20,7 @@ import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { N40 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -331,6 +332,14 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     var key = _ref11.key,
       content = _ref11.content,
       maxWidth = _ref11.maxWidth;
+    var heading = jsx(Tooltip, {
+      content: content,
+      tag: "span",
+      testId: 'datasource-header-content'
+    }, jsx(Heading, {
+      level: "h400",
+      as: 'span'
+    }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
       var previewRows = tableRows.map(function (_ref12) {
@@ -344,9 +353,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         }
       }).slice(0, 5);
       var dragPreview = jsx(DragColumnPreview, {
-        title: jsx(Heading, {
-          level: "h400"
-        }, content),
+        title: heading,
         rows: previewRows
       });
       return jsx(DraggableTableHeading, {
@@ -357,9 +364,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         maxWidth: maxWidth,
         dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
         dragPreview: dragPreview
-      }, jsx(Heading, {
-        level: "h400"
-      }, content));
+      }, heading);
     } else {
       return jsx(TableHeading, {
         key: key,
@@ -367,9 +372,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         style: {
           maxWidth: maxWidth
         }
-      }, jsx(Heading, {
-        level: "h400"
-      }, content));
+      }, heading);
     }
   }), onVisibleColumnKeysChange && hasData && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],

package/dist/esm/ui/issue-like-table/styled.js

@@ -3,5 +3,5 @@ var _templateObject, _templateObject2, _templateObject3;
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
 export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
-export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: grab;\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  .ProseMirror & h5,\n  & h5 {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 24px; /* Is needed to keep overall height consistent with or without drag handle icon present */\n  }\n\n  &:hover .issue-like-table-drag-handle {\n    width: 24px;\n  }\n  &:hover .issue-like-table-drag-handle-spacer {\n    width: 0px;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));
+export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: grab;\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"), "var(--ds-font-lineHeight-300, 24px)");
 export var EmptyStateTableHeading = styled(TableHeading)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &:first-child {\n    padding-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)");

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.33.2",
+	"version": "0.33.3",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.33.2",
+  "version": "0.33.3",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"