@atlaskit/link-datasource 0.31.2 → 0.32.0

package/dist/esm/ui/common/error-state/no-results.js

@@ -1,7 +1,9 @@
 /** @jsx jsx */
+import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { loadingErrorMessages } from './messages';
 var noResultsContainerStyles = css({
   display: 'grid',
@@ -20,6 +22,11 @@ var noResultsMessageStyles = css({
 });
 export var NoResults = function NoResults(_ref) {
   var onRefresh = _ref.onRefresh;
+  var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  useEffect(function () {
+    fireEvent('ui.emptyResult.shown.datasource', {});
+  }, [fireEvent]);
   return jsx("div", {
     css: noResultsContainerStyles,
     "data-testid": "jira-jql-datasource-modal--no-results"

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -8,13 +8,6 @@ import { NoResults } from '../common/error-state/no-results';
 import { IssueLikeDataTableView } from '../issue-like-table';
 import EmptyState from '../issue-like-table/empty-state';
 import { TableFooter } from '../table-footer';
-var TableViewWrapperStyles = css({
-  display: 'grid',
-  position: 'relative',
-  padding: "var(--ds-space-200, 16px)",
-  paddingBottom: 0,
-  boxSizing: 'border-box'
-});
 export var DatasourceTableView = function DatasourceTableView(_ref) {
   var datasourceId = _ref.datasourceId,
     parameters = _ref.parameters,
@@ -57,9 +50,8 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
       onRefresh: reset
     });
   }
-  return columns.length > 0 ? jsx("div", {
-    css: TableViewWrapperStyles
-  }, jsx(IssueLikeDataTableView, {
+  var isDataReady = columns.length > 0;
+  return jsx("div", null, isDataReady ? jsx(IssueLikeDataTableView, {
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -68,18 +60,14 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
     status: status,
     columns: columns,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onVisibleColumnKeysChange: onVisibleColumnKeysChange
-  }), jsx(TableFooter, {
-    issueCount: totalCount,
-    onRefresh: reset,
-    isLoading: status === 'loading'
-  })) : jsx("div", {
-    css: TableViewWrapperStyles
-  }, jsx(EmptyState, {
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    scrollableContainerHeight: 590
+  }) : jsx(EmptyState, {
     testId: "datasource-table-view-skeleton",
     isCompact: true
   }), jsx(TableFooter, {
+    issueCount: isDataReady ? totalCount : undefined,
     onRefresh: reset,
-    isLoading: true
+    isLoading: !isDataReady || status === 'loading'
   }));
 };

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

@@ -13,8 +13,7 @@ import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
 import { columnPickerMessages } from './messages';
 export 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;
@@ -120,8 +119,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
         })),
         spacing: "compact",
         appearance: "subtle",
-        testId: "column-picker-trigger-button",
-        isDisabled: isDatasourceLoading
+        testId: "column-picker-trigger-button"
       }));
     }
   });

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

@@ -0,0 +1,29 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import styled from '@emotion/styled';
+import { TableHeading } from './styled';
+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 = styled(TableHeading)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.td(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 = css({
+  background: "var(--ds-surface, #FFF)",
+  borderCollapse: 'separate',
+  borderSpacing: 0,
+  fontSize: "var(--ds-font-size-200, 16px)",
+  maxWidth: maxWidth
+});
+export var DragColumnPreview = function DragColumnPreview(_ref) {
+  var title = _ref.title,
+    rows = _ref.rows;
+  return jsx("table", {
+    css: tableStyles
+  }, jsx("thead", null, jsx("tr", null, jsx(TablePreviewHeading, null, title))), jsx("tbody", null, rows.map(function (data, i) {
+    return jsx("tr", {
+      key: i
+    }, jsx(TablePreviewCell, null, data));
+  }), jsx("tr", null, jsx(TablePreviewCell, null, "..."))));
+};

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

@@ -2,16 +2,16 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 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';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { TableHeading } from './styled';
-var tableHeadingStyles = css({
-  cursor: 'grab'
-});
 var tableHeadingStatusStyles = {
   idle: css({
     ':hover': {
@@ -31,7 +31,14 @@ var verticallyAlignedStyles = css({
 var dragHandleStyles = css({
   position: 'relative',
   display: 'flex',
-  alignItems: 'center'
+  alignItems: 'center',
+  overflow: 'hidden',
+  width: 0,
+  transition: 'width 0.5s'
+});
+var dragHandleSpacerStyles = css({
+  width: 24,
+  transition: 'width 0.5s'
 });
 var dropTargetStyles = css({
   position: 'absolute',
@@ -42,20 +49,25 @@ var dropTargetStyles = css({
 var noPointerEventsStyles = css({
   pointerEvents: 'none'
 });
+var idleState = {
+  type: 'idle'
+};
+var draggingState = {
+  type: 'dragging'
+};
 export 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 = useRef(null);
-  var _useState = useState('idle'),
+  var _useState = useState(idleState),
     _useState2 = _slicedToArray(_useState, 2),
-    status = _useState2[0],
-    setStatus = _useState2[1];
+    state = _useState2[0],
+    setState = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isDraggingAnyColumn = _useState4[0],
@@ -78,19 +90,38 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
           tableId: tableId
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview() {
-        setStatus('preview');
-        onDragPreviewStart();
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        setCustomNativeDragPreview({
+          getOffset: 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
@@ -102,9 +133,9 @@ export 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
@@ -135,8 +166,8 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   // During dragging anywhere we want to remove `pointerEvents: 'none'` from all the drop targets
   useEffect(function () {
     return 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() {
@@ -152,7 +183,7 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   }, [tableId]);
   return jsx(TableHeading, {
     ref: ref,
-    css: [tableHeadingStyles, tableHeadingStatusStyles[status]],
+    css: [tableHeadingStatusStyles[state.type]],
     "data-testid": "".concat(id, "-column-heading"),
     style: {
       maxWidth: maxWidth
@@ -169,9 +200,13 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   })), jsx("div", {
     css: verticallyAlignedStyles
   }, jsx("div", {
-    css: dragHandleStyles
+    css: dragHandleStyles,
+    className: "issue-like-table-drag-handle"
   }, jsx(DragHandlerIcon, {
     label: "".concat(id, "-drag-icon"),
     size: "medium"
-  })), children));
+  })), children, jsx("div", {
+    css: dragHandleSpacerStyles,
+    className: "issue-like-table-drag-handle-spacer"
+  })), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
 };

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

@@ -5,6 +5,9 @@ import UserType from '../render-type/user';
 import { EmptyStateTableHeading } from '../styled';
 import Priority from './priority';
 import Type from './type';
+var tableBodyStyles = css({
+  borderBottom: 0
+});
 var baseColumns = [{
   key: 'type',
   width: 50
@@ -118,7 +121,9 @@ export default (function (_ref3) {
       height: 13,
       borderRadius: 8
     }));
-  }))), jsx("tbody", null, rows.map(function (row) {
+  }))), jsx("tbody", {
+    css: tableBodyStyles
+  }, rows.map(function (row) {
     return jsx("tr", {
       key: row.id
     }, columnsToRender.map(function (column) {

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

@@ -12,33 +12,50 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import styled from '@emotion/styled';
 import invariant from 'tiny-invariant';
+import Heading from '@atlaskit/heading';
 import { Skeleton } from '@atlaskit/linking-common';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 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 { ColumnPicker } from './column-picker';
+import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { fallbackRenderType } from './render-type';
 import { Table, TableHeading } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
+var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableHeadStyles = css({
   background: "var(--ds-surface, #FFF)",
-  borderTop: '2px solid transparent'
+  position: 'sticky',
+  top: 0,
+  zIndex: 10
 });
-var ColumnPickerHeader = styled.td(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N40, ")"), "var(--ds-surface, #FFF)", tableSidePadding);
 var truncatedCellStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var tableDragPreviewStyles = css({
-  backgroundColor: "var(--ds-surface, #FFF)"
+var scrollableContainerStyles = css({
+  overflow: 'auto',
+  padding: "0 ".concat(tableSidePadding, " 0 ").concat(tableSidePadding),
+  boxSizing: 'border-box'
 });
-var containerDragPreviewStyles = css({
-  overflow: 'hidden'
+var tableStyles = 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 = css({
+  borderBottom: 0
 });
 function extractIndex(data) {
   var index = data.index;
@@ -66,7 +83,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,
@@ -96,7 +112,8 @@ export 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 = useMemo(function () {
     return Symbol('unique-id');
   }, []);
@@ -106,20 +123,16 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
     setLastRowElement = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isDragPreview = _useState4[0],
-    setIsDragPreview = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasFullSchema = _useState6[0],
-    setHasFullSchema = _useState6[1];
+    hasFullSchema = _useState4[0],
+    setHasFullSchema = _useState4[1];
   var isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
   var containerRef = useRef(null);
-  var _useState7 = useState(function () {
+  var _useState5 = useState(function () {
       return orderColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys));
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    orderedColumns = _useState8[0],
-    setOrderedColumns = _useState8[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    orderedColumns = _useState6[0],
+    setOrderedColumns = _useState6[1];
   useEffect(function () {
     setOrderedColumns(orderColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
   }, [columns, visibleColumnKeys]);
@@ -154,17 +167,19 @@ export 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 = 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]);
   useEffect(function () {
     if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
       void onNextPage({
@@ -172,41 +187,43 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
       });
     }
   }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
-  var dndPreviewHeight = 0;
-  if (items.length > 0 && containerRef.current) {
-    var containerEl = containerRef.current;
-    invariant(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 = useRef();
   useEffect(function () {
-    if (!onVisibleColumnKeysChange) {
+    if (!onVisibleColumnKeysChange || !hasData) {
       return;
     }
     return combine(monitorForElements({
       onDragStart: function onDragStart(_ref6) {
+        var _containerRef$current;
         var location = _ref6.location;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         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;
         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;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -236,7 +253,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         }
       }
     }));
-  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId]);
+  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
   var tableRows = useMemo(function () {
     return items.map(function (newRowData, rowIndex) {
       return {
@@ -265,13 +282,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
       };
     });
   }, [identityColumnKey, renderItem, items, visibleSortedColumns]);
-  var rows = [].concat(_toConsumableArray(tableRows), _toConsumableArray(status === 'loading' ? [loadingRow] : []));
-  var setIsDragPreviewOn = useCallback(function () {
-    return setIsDragPreview(true);
-  }, [setIsDragPreview]);
-  var setIsDragPreviewOff = useCallback(function () {
-    return setIsDragPreview(false);
-  }, [setIsDragPreview]);
+  var rows = useMemo(function () {
+    return [].concat(_toConsumableArray(tableRows), _toConsumableArray(status === 'loading' ? [loadingRow] : []));
+  }, [loadingRow, status, tableRows]);
   var onSelectedColumnKeysChange = useCallback(function (newSelectedColumnKeys) {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -304,33 +317,49 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
   })), [hasFullSchema, onLoadDatasourceDetails]);
   return jsx("div", {
     ref: containerRef,
-    css: isDragPreview ? containerDragPreviewStyles : null
+    css: scrollableContainerHeight ? scrollableContainerStyles : null,
+    style: scrollableContainerHeight ? {
+      maxHeight: "".concat(scrollableContainerHeight, "px")
+    } : undefined
   }, jsx(Table, {
-    css: isDragPreview ? tableDragPreviewStyles : null,
+    css: tableStyles,
     "data-testid": testId
   }, jsx("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
-    css: tableHeadStyles
+    css: [noDefaultBorderStyles, tableHeadStyles]
   }, jsx("tr", null, headColumns.map(function (_ref11, cellIndex) {
     var key = _ref11.key,
       content = _ref11.content,
       maxWidth = _ref11.maxWidth;
-    var TruncatedContent = function TruncatedContent() {
-      return 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 = jsx(DragColumnPreview, {
+        title: jsx(Heading, {
+          level: "h400"
+        }, content),
+        rows: previewRows
+      });
       return jsx(DraggableTableHeading, {
         tableId: tableId,
         key: key,
         id: key,
         index: cellIndex,
         maxWidth: maxWidth,
-        dndPreviewHeight: dndPreviewHeight,
-        onDragPreviewStart: setIsDragPreviewOn,
-        onDragPreviewEnd: setIsDragPreviewOff
-      }, jsx(TruncatedContent, null));
+        dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
+        dragPreview: dragPreview
+      }, jsx(Heading, {
+        level: "h400"
+      }, content));
     } else {
       return jsx(TableHeading, {
         key: key,
@@ -338,28 +367,30 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
         style: {
           maxWidth: maxWidth
         }
-      }, jsx(TruncatedContent, null));
+      }, jsx(Heading, {
+        level: "h400"
+      }, content));
     }
-  }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
+  }), onVisibleColumnKeysChange && hasData && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
-    isDatasourceLoading: status === 'loading',
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
     onOpen: handlePickerOpen
   })))), 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 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 jsx("td", {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),

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

@@ -1,6 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 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  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)");
+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 EmptyStateTableHeading = styled(TableHeading)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &:first-child {\n    padding-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)");