@atlaskit/link-datasource 0.31.2 → 0.31.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 0.31.3
+
+### Patch Changes
+
+- [`02d1ab1d57d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02d1ab1d57d) - Improve DnD Experience in Datasource Table view
+
 ## 0.31.2
 
 ### Patch Changes

package/dist/cjs/ui/datasource-table-view/datasourceTableView.js

@@ -16,13 +16,6 @@ var _emptyState = _interopRequireDefault(require("../issue-like-table/empty-stat
 var _tableFooter = require("../table-footer");
 /** @jsx jsx */
 
-var TableViewWrapperStyles = (0, _react2.css)({
-  display: 'grid',
-  position: 'relative',
-  padding: "var(--ds-space-200, 16px)",
-  paddingBottom: 0,
-  boxSizing: 'border-box'
-});
 var DatasourceTableView = function DatasourceTableView(_ref) {
   var datasourceId = _ref.datasourceId,
     parameters = _ref.parameters,
@@ -65,9 +58,8 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
       onRefresh: reset
     });
   }
-  return columns.length > 0 ? (0, _react2.jsx)("div", {
-    css: TableViewWrapperStyles
-  }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
+  var isDataReady = columns.length > 0;
+  return (0, _react2.jsx)("div", null, isDataReady ? (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -76,19 +68,15 @@ var DatasourceTableView = function DatasourceTableView(_ref) {
     status: status,
     columns: columns,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onVisibleColumnKeysChange: onVisibleColumnKeysChange
-  }), (0, _react2.jsx)(_tableFooter.TableFooter, {
-    issueCount: totalCount,
-    onRefresh: reset,
-    isLoading: status === 'loading'
-  })) : (0, _react2.jsx)("div", {
-    css: TableViewWrapperStyles
-  }, (0, _react2.jsx)(_emptyState.default, {
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    scrollableContainerHeight: 590
+  }) : (0, _react2.jsx)(_emptyState.default, {
     testId: "datasource-table-view-skeleton",
     isCompact: true
   }), (0, _react2.jsx)(_tableFooter.TableFooter, {
+    issueCount: isDataReady ? totalCount : undefined,
     onRefresh: reset,
-    isLoading: true
+    isLoading: !isDataReady || status === 'loading'
   }));
 };
 exports.DatasourceTableView = DatasourceTableView;

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

@@ -20,8 +20,7 @@ var _messages = require("./messages");
 var _excluded = ["isOpen"];
 /** @jsx jsx */
 var ColumnPicker = function ColumnPicker(_ref) {
-  var isDatasourceLoading = _ref.isDatasourceLoading,
-    columns = _ref.columns,
+  var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
     onOpen = _ref.onOpen;
@@ -127,8 +126,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
         })),
         spacing: "compact",
         appearance: "subtle",
-        testId: "column-picker-trigger-button",
-        isDisabled: isDatasourceLoading
+        testId: "column-picker-trigger-button"
       }));
     }
   });

package/dist/cjs/ui/issue-like-table/drag-column-preview.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragColumnPreview = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _styled2 = require("./styled");
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+var maxWidth = '200px';
+var firstLastChildOverride = "\n  &:first-of-type, &:last-of-type {\n    padding-left: ".concat("var(--ds-space-100, 8px)", ";\n    padding-right: ", "var(--ds-space-100, 8px)", ";\n  }\n");
+var TablePreviewHeading = (0, _styled.default)(_styled2.TableHeading)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  background: ", ";\n  color: ", ";\n  max-width: ", ";\n  ", "\n"])), "var(--ds-background-disabled, #091E4224)", "var(--ds-text-disabled, #091E424F)", maxWidth, firstLastChildOverride);
+var TablePreviewCell = _styled.default.td(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: ", ";\n  padding: ", " ", ";\n  ", "\n"])), maxWidth, "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstLastChildOverride);
+var tableStyles = (0, _react2.css)({
+  background: "var(--ds-surface, #FFF)",
+  borderCollapse: 'separate',
+  borderSpacing: 0,
+  fontSize: "var(--ds-font-size-200, 16px)",
+  maxWidth: maxWidth
+});
+var DragColumnPreview = function DragColumnPreview(_ref) {
+  var title = _ref.title,
+    rows = _ref.rows;
+  return (0, _react2.jsx)("table", {
+    css: tableStyles
+  }, (0, _react2.jsx)("thead", null, (0, _react2.jsx)("tr", null, (0, _react2.jsx)(TablePreviewHeading, null, title))), (0, _react2.jsx)("tbody", null, rows.map(function (data, i) {
+    return (0, _react2.jsx)("tr", {
+      key: i
+    }, (0, _react2.jsx)(TablePreviewCell, null, data));
+  }), (0, _react2.jsx)("tr", null, (0, _react2.jsx)(TablePreviewCell, null, "..."))));
+};
+exports.DragColumnPreview = DragColumnPreview;

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

@@ -8,18 +8,18 @@ exports.DraggableTableHeading = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/util/combine");
+var _offsetFromPointer = require("@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer");
+var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
 var _styled = require("./styled");
 /** @jsx jsx */
 
-var tableHeadingStyles = (0, _react2.css)({
-  cursor: 'grab'
-});
 var tableHeadingStatusStyles = {
   idle: (0, _react2.css)({
     ':hover': {
@@ -39,7 +39,14 @@ var verticallyAlignedStyles = (0, _react2.css)({
 var dragHandleStyles = (0, _react2.css)({
   position: 'relative',
   display: 'flex',
-  alignItems: 'center'
+  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',
@@ -50,20 +57,25 @@ var dropTargetStyles = (0, _react2.css)({
 var noPointerEventsStyles = (0, _react2.css)({
   pointerEvents: 'none'
 });
+var idleState = {
+  type: 'idle'
+};
+var draggingState = {
+  type: 'dragging'
+};
 var DraggableTableHeading = function DraggableTableHeading(_ref) {
   var children = _ref.children,
     id = _ref.id,
     index = _ref.index,
     tableId = _ref.tableId,
     dndPreviewHeight = _ref.dndPreviewHeight,
-    maxWidth = _ref.maxWidth,
-    onDragPreviewStart = _ref.onDragPreviewStart,
-    onDragPreviewEnd = _ref.onDragPreviewEnd;
+    dragPreview = _ref.dragPreview,
+    maxWidth = _ref.maxWidth;
   var ref = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)('idle'),
+  var _useState = (0, _react.useState)(idleState),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    status = _useState2[0],
-    setStatus = _useState2[1];
+    state = _useState2[0],
+    setState = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isDraggingAnyColumn = _useState4[0],
@@ -86,19 +98,38 @@ var DraggableTableHeading = function DraggableTableHeading(_ref) {
           tableId: tableId
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview() {
-        setStatus('preview');
-        onDragPreviewStart();
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
+          getOffset: (0, _offsetFromPointer.offsetFromPointer)({
+            x: '18px',
+            y: '18px'
+          }),
+          render: function render(_ref3) {
+            var container = _ref3.container;
+            // Cause a `react` re-render to create your portal synchronously
+            setState({
+              type: 'preview',
+              container: container
+            });
+            // In our cleanup function: cause a `react` re-render to create remove your portal
+            // Note: you can also remove the portal in `onDragStart`,
+            // which is when the cleanup function is called
+            return function () {
+              return setState(draggingState);
+            };
+          },
+          nativeSetDragImage: nativeSetDragImage
+        });
       },
       onDragStart: function onDragStart() {
-        setStatus('dragging');
-        onDragPreviewEnd();
+        setState(draggingState);
       },
       onDrop: function onDrop() {
-        setStatus('idle');
+        setState(idleState);
       }
     }));
-  }, [id, index, onDragPreviewEnd, onDragPreviewStart, tableId]);
+  }, [id, index, tableId]);
 
   // Here we handle drop target, that in our case is absolutely positioned div that covers full width and height
   // of this column (has height of whole table). It sits on top of everything, but has `pointerEvents: 'none'` by default
@@ -110,9 +141,9 @@ var DraggableTableHeading = function DraggableTableHeading(_ref) {
       getIsSticky: function getIsSticky() {
         return true;
       },
-      getData: function getData(_ref2) {
-        var input = _ref2.input,
-          element = _ref2.element;
+      getData: function getData(_ref4) {
+        var input = _ref4.input,
+          element = _ref4.element;
         var data = {
           id: id,
           index: index
@@ -143,8 +174,8 @@ var DraggableTableHeading = function DraggableTableHeading(_ref) {
   // During dragging anywhere we want to remove `pointerEvents: 'none'` from all the drop targets
   (0, _react.useEffect)(function () {
     return (0, _element.monitorForElements)({
-      canMonitor: function canMonitor(_ref3) {
-        var source = _ref3.source;
+      canMonitor: function canMonitor(_ref5) {
+        var source = _ref5.source;
         return source.data.type === 'table-header' && source.data.tableId === tableId;
       },
       onDragStart: function onDragStart() {
@@ -160,7 +191,7 @@ var DraggableTableHeading = function DraggableTableHeading(_ref) {
   }, [tableId]);
   return (0, _react2.jsx)(_styled.TableHeading, {
     ref: ref,
-    css: [tableHeadingStyles, tableHeadingStatusStyles[status]],
+    css: [tableHeadingStatusStyles[state.type]],
     "data-testid": "".concat(id, "-column-heading"),
     style: {
       maxWidth: maxWidth
@@ -177,10 +208,14 @@ var DraggableTableHeading = function DraggableTableHeading(_ref) {
   })), (0, _react2.jsx)("div", {
     css: verticallyAlignedStyles
   }, (0, _react2.jsx)("div", {
-    css: dragHandleStyles
+    css: dragHandleStyles,
+    className: "issue-like-table-drag-handle"
   }, (0, _react2.jsx)(_dragHandler.default, {
     label: "".concat(id, "-drag-icon"),
     size: "medium"
-  })), children));
+  })), 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);
 };
 exports.DraggableTableHeading = DraggableTableHeading;

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

@@ -13,6 +13,9 @@ var _priority = _interopRequireDefault(require("./priority"));
 var _type = _interopRequireDefault(require("./type"));
 /** @jsx jsx */
 
+var tableBodyStyles = (0, _react.css)({
+  borderBottom: 0
+});
 var baseColumns = [{
   key: 'type',
   width: 50
@@ -126,7 +129,9 @@ var _default = function _default(_ref3) {
       height: 13,
       borderRadius: 8
     }));
-  }))), (0, _react.jsx)("tbody", null, rows.map(function (row) {
+  }))), (0, _react.jsx)("tbody", {
+    css: tableBodyStyles
+  }, rows.map(function (row) {
     return (0, _react.jsx)("tr", {
       key: row.id
     }, columnsToRender.map(function (column) {

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

@@ -15,13 +15,16 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _linkingCommon = require("@atlaskit/linking-common");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
 var _reorderWithEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge");
 var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
 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 _columnPicker = require("./column-picker");
+var _dragColumnPreview = require("./drag-column-preview");
 var _draggableTableHeading = require("./draggable-table-heading");
 var _emptyState = _interopRequireDefault(require("./empty-state"));
 var _renderType = require("./render-type");
@@ -31,21 +34,35 @@ var _templateObject;
 /** @jsx jsx */
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableHeadStyles = (0, _react2.css)({
   background: "var(--ds-surface, #FFF)",
-  borderTop: '2px solid transparent'
+  position: 'sticky',
+  top: 0,
+  zIndex: 10
 });
-var ColumnPickerHeader = _styled.default.td(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  padding-block: ", ";\n  position: sticky;\n  right: 0px;\n  background-color: ", ";\n  &:last-child {\n    padding-right: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-surface, #FFF)", "var(--ds-space-100, 8px)");
+var ColumnPickerHeader = _styled.default.th(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  position: sticky;\n  right: calc(-1 * ", ");\n  background-color: ", ";\n  border-bottom: 2px solid ", "; /* It is required to have solid (not half-transparent) color because of this gradient business bellow */\n  background: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0) 0%,\n    ", " 10%\n  );\n  vertical-align: middle; /* Keeps dropdown button in the middle */\n  &:last-of-type {\n    padding-right: ", ";\n  }\n"])), tableSidePadding, "var(--ds-surface, #FFF)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"), "var(--ds-surface, #FFF)", tableSidePadding);
 var truncatedCellStyles = (0, _react2.css)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var tableDragPreviewStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-surface, #FFF)"
+var scrollableContainerStyles = (0, _react2.css)({
+  overflow: 'auto',
+  padding: "0 ".concat(tableSidePadding, " 0 ").concat(tableSidePadding),
+  boxSizing: 'border-box'
 });
-var containerDragPreviewStyles = (0, _react2.css)({
-  overflow: 'hidden'
+var tableStyles = (0, _react2.css)({
+  // These styles are needed to prevent thead bottom border from scrolling away.
+  // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
+  borderCollapse: 'separate',
+  borderSpacing: 0
+});
+
+// By default tbody and thead have border-bottom: 2px ...
+// This removes it, because for header we handle it via `th` styling and footer supply bottom border
+var noDefaultBorderStyles = (0, _react2.css)({
+  borderBottom: 0
 });
 function extractIndex(data) {
   var index = data.index;
@@ -73,7 +90,6 @@ var BASE_WIDTH = 8;
 function getColumnWidth(key, type) {
   var keyBasedWidth = {
     assignee: BASE_WIDTH * 22,
-    key: BASE_WIDTH * 10,
     labels: BASE_WIDTH * 22,
     priority: BASE_WIDTH * 8,
     status: BASE_WIDTH * 18,
@@ -103,7 +119,8 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     visibleColumnKeys = _ref2.visibleColumnKeys,
     onVisibleColumnKeysChange = _ref2.onVisibleColumnKeysChange,
     status = _ref2.status,
-    hasNextPage = _ref2.hasNextPage;
+    hasNextPage = _ref2.hasNextPage,
+    scrollableContainerHeight = _ref2.scrollableContainerHeight;
   var tableId = (0, _react.useMemo)(function () {
     return Symbol('unique-id');
   }, []);
@@ -113,20 +130,16 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     setLastRowElement = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isDragPreview = _useState4[0],
-    setIsDragPreview = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    hasFullSchema = _useState6[0],
-    setHasFullSchema = _useState6[1];
+    hasFullSchema = _useState4[0],
+    setHasFullSchema = _useState4[1];
   var isBottomOfTableVisibleRaw = (0, _useIsOnScreen.useIsOnScreen)(lastRowElement);
   var containerRef = (0, _react.useRef)(null);
-  var _useState7 = (0, _react.useState)(function () {
+  var _useState5 = (0, _react.useState)(function () {
       return orderColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys));
     }),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    orderedColumns = _useState8[0],
-    setOrderedColumns = _useState8[1];
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    orderedColumns = _useState6[0],
+    setOrderedColumns = _useState6[1];
   (0, _react.useEffect)(function () {
     setOrderedColumns(orderColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys)));
   }, [columns, visibleColumnKeys]);
@@ -161,17 +174,19 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
       })
     };
   }, [visibleSortedColumns]);
-  var headColumns = visibleSortedColumns.map(function (_ref5) {
-    var key = _ref5.key,
-      title = _ref5.title,
-      type = _ref5.type;
-    return {
-      key: key,
-      content: title,
-      shouldTruncate: true,
-      maxWidth: getColumnWidth(key, type)
-    };
-  });
+  var headColumns = (0, _react.useMemo)(function () {
+    return visibleSortedColumns.map(function (_ref5) {
+      var key = _ref5.key,
+        title = _ref5.title,
+        type = _ref5.type;
+      return {
+        key: key,
+        content: title,
+        shouldTruncate: true,
+        maxWidth: getColumnWidth(key, type)
+      };
+    });
+  }, [visibleSortedColumns]);
   (0, _react.useEffect)(function () {
     if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
       void onNextPage({
@@ -179,41 +194,43 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
       });
     }
   }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
-  var dndPreviewHeight = 0;
-  if (items.length > 0 && containerRef.current) {
-    var containerEl = containerRef.current;
-    (0, _tinyInvariant.default)(containerEl);
-    dndPreviewHeight = containerEl.offsetHeight;
-  }
+  var hasData = items.length > 0;
 
   // This variable contains initial Y mouse coordinate, so we can restrict
   // autoScroller in X axis only
   var initialAutoScrollerClientY = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
-    if (!onVisibleColumnKeysChange) {
+    if (!onVisibleColumnKeysChange || !hasData) {
       return;
     }
     return (0, _combine.combine)((0, _element.monitorForElements)({
       onDragStart: function onDragStart(_ref6) {
+        var _containerRef$current;
         var location = _ref6.location;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.start({
-          input: location.current.input,
+          input: _objectSpread(_objectSpread({}, location.current.input), {}, {
+            clientY:
+            // The goal is to have clientY the same and in the middle of the scrollable area
+            // Since clientY is taken from to of the viewport we need to plus that in order to get
+            // middle of the scrollable area in reference to the viewport
+            (initialAutoScrollerClientY.current || 0) + (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetHeight) || 0) / 2
+          }),
           behavior: 'container-only'
         });
       },
       onDrag: function onDrag(_ref7) {
+        var _containerRef$current2;
         var location = _ref7.location;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({
           input: _objectSpread(_objectSpread({}, location.current.input), {}, {
-            clientY: initialAutoScrollerClientY.current || 0
+            clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
           })
         });
       },
       onDrop: function onDrop(_ref8) {
         var source = _ref8.source,
           location = _ref8.location;
-        initialAutoScrollerClientY.current = null;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -243,7 +260,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         }
       }
     }));
-  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId]);
+  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
   var tableRows = (0, _react.useMemo)(function () {
     return items.map(function (newRowData, rowIndex) {
       return {
@@ -272,13 +289,9 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
       };
     });
   }, [identityColumnKey, renderItem, items, visibleSortedColumns]);
-  var rows = [].concat((0, _toConsumableArray2.default)(tableRows), (0, _toConsumableArray2.default)(status === 'loading' ? [loadingRow] : []));
-  var setIsDragPreviewOn = (0, _react.useCallback)(function () {
-    return setIsDragPreview(true);
-  }, [setIsDragPreview]);
-  var setIsDragPreviewOff = (0, _react.useCallback)(function () {
-    return setIsDragPreview(false);
-  }, [setIsDragPreview]);
+  var rows = (0, _react.useMemo)(function () {
+    return [].concat((0, _toConsumableArray2.default)(tableRows), (0, _toConsumableArray2.default)(status === 'loading' ? [loadingRow] : []));
+  }, [loadingRow, status, tableRows]);
   var onSelectedColumnKeysChange = (0, _react.useCallback)(function (newSelectedColumnKeys) {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -311,33 +324,49 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   })), [hasFullSchema, onLoadDatasourceDetails]);
   return (0, _react2.jsx)("div", {
     ref: containerRef,
-    css: isDragPreview ? containerDragPreviewStyles : null
+    css: scrollableContainerHeight ? scrollableContainerStyles : null,
+    style: scrollableContainerHeight ? {
+      maxHeight: "".concat(scrollableContainerHeight, "px")
+    } : undefined
   }, (0, _react2.jsx)(_styled2.Table, {
-    css: isDragPreview ? tableDragPreviewStyles : null,
+    css: tableStyles,
     "data-testid": testId
   }, (0, _react2.jsx)("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
-    css: tableHeadStyles
+    css: [noDefaultBorderStyles, tableHeadStyles]
   }, (0, _react2.jsx)("tr", null, headColumns.map(function (_ref11, cellIndex) {
     var key = _ref11.key,
       content = _ref11.content,
       maxWidth = _ref11.maxWidth;
-    var TruncatedContent = function TruncatedContent() {
-      return (0, _react2.jsx)("div", {
-        css: truncatedCellStyles
-      }, content);
-    };
-    if (onVisibleColumnKeysChange && status !== 'loading') {
+    if (onVisibleColumnKeysChange && hasData) {
+      var _containerRef$current3;
+      var previewRows = tableRows.map(function (_ref12) {
+        var cells = _ref12.cells;
+        var cell = cells.find(function (_ref13) {
+          var cellKey = _ref13.key;
+          return cellKey === key;
+        });
+        if (cell) {
+          return cell.content;
+        }
+      }).slice(0, 5);
+      var dragPreview = (0, _react2.jsx)(_dragColumnPreview.DragColumnPreview, {
+        title: (0, _react2.jsx)(_heading.default, {
+          level: "h400"
+        }, content),
+        rows: previewRows
+      });
       return (0, _react2.jsx)(_draggableTableHeading.DraggableTableHeading, {
         tableId: tableId,
         key: key,
         id: key,
         index: cellIndex,
         maxWidth: maxWidth,
-        dndPreviewHeight: dndPreviewHeight,
-        onDragPreviewStart: setIsDragPreviewOn,
-        onDragPreviewEnd: setIsDragPreviewOff
-      }, (0, _react2.jsx)(TruncatedContent, null));
+        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));
     } else {
       return (0, _react2.jsx)(_styled2.TableHeading, {
         key: key,
@@ -345,28 +374,30 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         style: {
           maxWidth: maxWidth
         }
-      }, (0, _react2.jsx)(TruncatedContent, null));
+      }, (0, _react2.jsx)(_heading.default, {
+        level: "h400"
+      }, content));
     }
-  }), onVisibleColumnKeysChange && (0, _react2.jsx)(ColumnPickerHeader, null, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
+  }), onVisibleColumnKeysChange && hasData && (0, _react2.jsx)(ColumnPickerHeader, null, (0, _react2.jsx)(_columnPicker.ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
-    isDatasourceLoading: status === 'loading',
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
     onOpen: handlePickerOpen
   })))), (0, _react2.jsx)("tbody", {
+    css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref12) {
-    var key = _ref12.key,
-      cells = _ref12.cells,
-      ref = _ref12.ref;
+  }, rows.map(function (_ref14) {
+    var key = _ref14.key,
+      cells = _ref14.cells,
+      ref = _ref14.ref;
     return (0, _react2.jsx)("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref13, cellIndex) {
-      var cellKey = _ref13.key,
-        content = _ref13.content,
-        maxWidth = _ref13.maxWidth;
+    }, cells.map(function (_ref15, cellIndex) {
+      var cellKey = _ref15.key,
+        content = _ref15.content,
+        maxWidth = _ref15.maxWidth;
       return (0, _react2.jsx)("td", {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),

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

@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.TableHeading = exports.Table = exports.EmptyStateTableHeading = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
+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  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)");
+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, ")"));
 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;