@atlaskit/link-datasource 0.31.2 → 0.31.3

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)");

package/dist/esm/ui/jira-issues-modal/modal/index.js

@@ -8,7 +8,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { B400, N0, N800 } from '@atlaskit/theme/colors';
+import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
 import { AccessRequired } from '../../common/error-state/access-required';
@@ -26,8 +26,9 @@ var dropdownContainerStyles = css({
 });
 var contentContainerStyles = css({
   display: 'grid',
-  height: '420px',
-  overflow: 'auto'
+  maxHeight: '420px',
+  overflow: 'auto',
+  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")"))
 });
 var placeholderSmartLinkStyles = css({
   backgroundColor: "var(--ds-surface-raised, ".concat(N0, ")"),
@@ -200,7 +201,9 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     setCurrentViewMode(selectedMode);
   };
   var issueLikeDataTableView = useMemo(function () {
-    return jsx(IssueLikeDataTableView, {
+    return jsx("div", {
+      css: contentContainerStyles
+    }, jsx(IssueLikeDataTableView, {
       testId: "jira-jql-datasource-table",
       status: status,
       columns: columns,
@@ -210,7 +213,7 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       onNextPage: onNextPage,
       onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: setVisibleColumnKeys
-    });
+    }));
   }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, responseItems, status, visibleColumnKeys]);
   var renderCountModeContent = useCallback(function () {
     var url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
@@ -247,9 +250,11 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
       return jsx(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
-      return jsx(EmptyState, {
+      return jsx("div", {
+        css: contentContainerStyles
+      }, jsx(EmptyState, {
         testId: "jira-jql-datasource-modal--empty-state"
-      });
+      }));
     }
     var firstIssueUrl = retrieveUrlForSmartCardRender();
     if (responseItems.length === 1 && firstIssueUrl) {
@@ -292,9 +297,7 @@ export var JiraIssuesConfigModal = function JiraIssuesConfigModal(props) {
     isSearching: status === 'loading',
     parameters: parameters,
     onSearch: onSearch
-  }), jsx("div", {
-    css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
+  }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
     "data-testid": "jira-jql-datasource-modal-total-issues-count",
     css: issueCountStyles
   }, jsx(FormattedNumber, {

package/dist/esm/ui/table-footer/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
 import { Fragment, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
@@ -13,10 +13,11 @@ import RefreshIcon from '@atlaskit/icon/glyph/refresh';
 import { N0, N40, N800, N90 } from '@atlaskit/theme/colors';
 import { footerMessages } from './messages';
 import { SyncInfo } from './sync-info';
-var FooterWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  padding: ", " 0;\n  position: sticky;\n  bottom: 0;\n  background: ", ";\n  border-top-style: solid;\n  border-top-color: ", ";\n  margin-top: -2px;\n  align-self: center;\n"])), "var(--ds-space-250, 20px)", "var(--ds-background-input, ".concat(N0, ")"), "var(--ds-background-neutral, ".concat(N40, ")"));
-var IssueCounterWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 10px;\n  display: flex;\n  align-self: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(N800, ")"));
-var SyncWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(N90, ")"));
-var SyncTextWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n"])));
+var FooterWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  box-sizing: border-box;\n  background: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-background-input, ".concat(N0, ")"));
+var TopBorderWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  padding: ", " 0;\n  border-top: 2px solid ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));
+var IssueCounterWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(N800, ")"));
+var SyncWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(N90, ")"));
+var SyncTextWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n"])));
 export var TableFooter = function TableFooter(_ref) {
   var issueCount = _ref.issueCount,
     onRefresh = _ref.onRefresh,
@@ -37,7 +38,9 @@ export var TableFooter = function TableFooter(_ref) {
   // ensure correct positioning since 'justify-content: space-between' is used).
   return onRefresh || showIssueCount ? jsx(FooterWrapper, {
     "data-testid": "table-footer"
-  }, jsx(IssueCounterWrapper, null, showIssueCount && jsx(Heading, {
+  }, jsx(TopBorderWrapper, null, jsx(IssueCounterWrapper, {
+    "data-testid": 'issue-count-wrapper'
+  }, showIssueCount && jsx(Heading, {
     testId: "issue-count",
     level: "h400"
   }, jsx(FormattedNumber, {
@@ -58,5 +61,5 @@ export var TableFooter = function TableFooter(_ref) {
     }),
     isDisabled: isLoading,
     testId: "refresh-button"
-  })))) : null;
+  }))))) : null;
 };

package/dist/esm/version.json

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

package/dist/types/ui/issue-like-table/column-picker/index.d.ts

@@ -1,3 +1,3 @@
 import { jsx } from '@emotion/react';
 import { ColumnPickerProps } from './types';
-export declare const ColumnPicker: ({ isDatasourceLoading, columns, selectedColumnKeys, onSelectedColumnKeysChange, onOpen, }: ColumnPickerProps) => jsx.JSX.Element;
+export declare const ColumnPicker: ({ columns, selectedColumnKeys, onSelectedColumnKeysChange, onOpen, }: ColumnPickerProps) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/column-picker/types.d.ts

@@ -1,6 +1,5 @@
 import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types';
 export type ColumnPickerProps = {
-    isDatasourceLoading: boolean;
     columns: DatasourceResponseSchemaProperty[];
     selectedColumnKeys: string[];
     onSelectedColumnKeysChange: (selectedColumnKeys: string[]) => void;

package/dist/types/ui/issue-like-table/drag-column-preview.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+export declare const DragColumnPreview: ({ title, rows, }: {
+    title: React.ReactNode;
+    rows: React.ReactNode[];
+}) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/draggable-table-heading.d.ts

@@ -1,13 +1,12 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-export declare const DraggableTableHeading: ({ children, id, index, tableId, dndPreviewHeight, maxWidth, onDragPreviewStart, onDragPreviewEnd, }: {
+export declare const DraggableTableHeading: ({ children, id, index, tableId, dndPreviewHeight, dragPreview, maxWidth, }: {
     children: ReactNode;
     id: string;
     index: number;
     tableId: Symbol;
     dndPreviewHeight: number;
+    dragPreview: React.ReactNode;
     maxWidth?: number | undefined;
-    onDragPreviewStart: () => void;
-    onDragPreviewEnd: () => void;
 }) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/index.d.ts

@@ -12,5 +12,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
     maxWidth?: number;
 }
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/types.d.ts

@@ -37,4 +37,9 @@ export interface IssueLikeDataTableViewProps {
      * @param visibleColumnKeys
      */
     onVisibleColumnKeysChange?: (visibleColumnKeys: string[]) => void;
+    /**
+     * If this number is set it will restrict (max-height) maximum size of the component AND make main container a scrollable container.
+     * It this number is undefined it will not restrict height and not make container scrollable.
+     */
+    scrollableContainerHeight?: number;
 }

package/dist/types-ts4.5/ui/issue-like-table/column-picker/index.d.ts

@@ -1,3 +1,3 @@
 import { jsx } from '@emotion/react';
 import { ColumnPickerProps } from './types';
-export declare const ColumnPicker: ({ isDatasourceLoading, columns, selectedColumnKeys, onSelectedColumnKeysChange, onOpen, }: ColumnPickerProps) => jsx.JSX.Element;
+export declare const ColumnPicker: ({ columns, selectedColumnKeys, onSelectedColumnKeysChange, onOpen, }: ColumnPickerProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/column-picker/types.d.ts

@@ -1,6 +1,5 @@
 import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types';
 export type ColumnPickerProps = {
-    isDatasourceLoading: boolean;
     columns: DatasourceResponseSchemaProperty[];
     selectedColumnKeys: string[];
     onSelectedColumnKeysChange: (selectedColumnKeys: string[]) => void;

package/dist/types-ts4.5/ui/issue-like-table/drag-column-preview.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+export declare const DragColumnPreview: ({ title, rows, }: {
+    title: React.ReactNode;
+    rows: React.ReactNode[];
+}) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/draggable-table-heading.d.ts

@@ -1,13 +1,12 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-export declare const DraggableTableHeading: ({ children, id, index, tableId, dndPreviewHeight, maxWidth, onDragPreviewStart, onDragPreviewEnd, }: {
+export declare const DraggableTableHeading: ({ children, id, index, tableId, dndPreviewHeight, dragPreview, maxWidth, }: {
     children: ReactNode;
     id: string;
     index: number;
     tableId: Symbol;
     dndPreviewHeight: number;
+    dragPreview: React.ReactNode;
     maxWidth?: number | undefined;
-    onDragPreviewStart: () => void;
-    onDragPreviewEnd: () => void;
 }) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/index.d.ts

@@ -12,5 +12,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
     maxWidth?: number;
 }
-export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
+export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, status, hasNextPage, scrollableContainerHeight, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/types.d.ts

@@ -37,4 +37,9 @@ export interface IssueLikeDataTableViewProps {
      * @param visibleColumnKeys
      */
     onVisibleColumnKeysChange?: (visibleColumnKeys: string[]) => void;
+    /**
+     * If this number is set it will restrict (max-height) maximum size of the component AND make main container a scrollable container.
+     * It this number is undefined it will not restrict height and not make container scrollable.
+     */
+    scrollableContainerHeight?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.31.2",
+  "version": "0.31.3",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -58,6 +58,7 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.0.0",
     "debounce-promise": "^3.1.2",
+    "react-dom": "^16.8.0",
     "react-error-boundary": "^3.1.3",
     "tiny-invariant": "^1.2.0"
   },
@@ -78,7 +79,6 @@
     "fetch-mock": "^8.0.0",
     "jest-fetch-mock": "^3.0.3",
     "json-ld-types": "3.8.0",
-    "react-dom": "^16.8.0",
     "typescript": "~4.9.5",
     "wait-for-expect": "^1.2.0"
   },