@atlaskit/link-datasource 1.17.6 → 1.17.8

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/link-datasource
 
+## 1.17.8
+
+### Patch Changes
+
+- [#43419](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43419) [`27726a80705`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27726a80705) - [ux] Updated borders and added grid lines in datasource tables.
+
+## 1.17.7
+
+### Patch Changes
+
+- [#43413](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43413) [`73c1cebfd62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/73c1cebfd62) - Move all logic to onOpen when opening the filter dropdown.
+- Updated dependencies
+
 ## 1.17.6
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

@@ -7,5 +7,5 @@ exports.packageMetaData = exports.EVENT_CHANNEL = void 0;
 var EVENT_CHANNEL = exports.EVENT_CHANNEL = 'media';
 var packageMetaData = exports.packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.17.6"
+  packageVersion: "1.17.8"
 };

package/dist/cjs/ui/assets-modal/modal/render-assets-content/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RenderAssetsContent = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _accessRequired = require("../../../common/error-state/access-required");
 var _modalLoadingError = require("../../../common/error-state/modal-loading-error");
 var _noResults = require("../../../common/error-state/no-results");
@@ -18,6 +19,11 @@ var emptyStateOverrideStyles = (0, _react2.css)({
   height: '420px',
   overflow: 'hidden'
 });
+var tableBordersStyles = (0, _react2.css)({
+  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)"
+});
 var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsContent(props) {
   var status = props.status,
     responseItems = props.responseItems,
@@ -32,7 +38,9 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
     isFetchingInitialData = props.isFetchingInitialData;
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var issueLikeDataTableView = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
+    return (0, _react2.jsx)("div", {
+      css: tableBordersStyles
+    }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
       testId: "asset-datasource-table",
       status: status,
       columns: columns,
@@ -43,12 +51,12 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
       onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
       parentContainerRenderInstanceId: modalRenderInstanceId
-    });
+    }));
   }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
   if (isFetchingInitialData) {
     // Placing this check first as it's a priority before all others
     return (0, _react2.jsx)("div", {
-      css: emptyStateOverrideStyles
+      css: [tableBordersStyles, emptyStateOverrideStyles]
     }, (0, _react2.jsx)(_issueLikeTable.EmptyState, {
       testId: "assets-aql-datasource-modal--loading-state"
     }));

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

@@ -24,6 +24,9 @@ var _emptyState = _interopRequireDefault(require("../issue-like-table/empty-stat
 var _tableFooter = require("../table-footer");
 /** @jsx jsx */
 
+var containerStyles = (0, _react2.css)({
+  borderRadius: 'inherit'
+});
 var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAnalytics(_ref) {
   var datasourceId = _ref.datasourceId,
     parameters = _ref.parameters,
@@ -128,6 +131,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
   return (
     // datasource-table classname is to exclude all children from being commentable - exclude list is in CFE
     (0, _react2.jsx)("div", {
+      css: containerStyles,
       className: "datasource-table"
     }, hasColumns ? (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
       testId: 'datasource-table-view',

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

@@ -268,6 +268,7 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
   }, [id, index, onWidthChange, state, tableId, width]);
   return (0, _react2.jsx)(_styled.TableHeading, {
     ref: mainHeaderCellRef,
+    className: "has-column-picker",
     "data-testid": "".concat(id, "-column-heading"),
     style: _objectSpread({
       cursor: 'grab'

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("@emotion/react");
 var _linkingCommon = require("@atlaskit/linking-common");
+var _colors = require("@atlaskit/theme/colors");
 var _styled = require("../styled");
 /** @jsx jsx */
 
@@ -19,14 +20,19 @@ var SkeletonComponent = function SkeletonComponent(_ref) {
     width: width
   });
 };
-var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableBodyStyles = (0, _react.css)({
   borderBottom: 0
 });
 var cellStyles = (0, _react.css)({
   paddingBlock: "var(--ds-space-100, 12px)",
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  '&:first-child': {
+    paddingLeft: "var(--ds-space-100, 4px)"
+  },
   '&:last-child': {
-    paddingRight: "var(--ds-space-100, 8px)"
+    borderRight: 0,
+    paddingRight: "var(--ds-space-100, 4px)"
   }
 });
 var baseColumns = [{
@@ -99,10 +105,9 @@ var _default = exports.default = function _default(_ref4) {
   return (0, _react.jsx)("div", {
     style: {
       // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
-      // the isCompact prop is applied to non-modal empty states which require additional padding
       // this maxHeight comes from scrollableContainerHeight
       maxHeight: _styled.ScrollableContainerHeight,
-      padding: isCompact ? "0 ".concat(tableSidePadding, " 0 ").concat(tableSidePadding) : '0',
+      padding: 0,
       boxSizing: 'border-box'
     }
   }, (0, _react.jsx)("table", {

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

@@ -44,17 +44,27 @@ var tableHeadStyles = (0, _react2.css)({
   top: 0,
   zIndex: _zindex.stickyTableHeadersIndex
 });
-var ColumnPickerHeader = _styled.default.th(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 56px;\n  z-index: 10;\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  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n"])), tableSidePadding, "var(--ds-surface, #FFF)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"), "var(--ds-surface, #FFF)", tableSidePadding);
+var ColumnPickerHeader = _styled.default.th(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 56px;\n  z-index: 10;\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 below */\n\n  padding-right: ", ";\n\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  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n"])), tableSidePadding, "var(--ds-surface, #FFF)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-surface, #FFF)", tableSidePadding);
 var truncatedCellStyles = (0, _react2.css)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  '&:first-child': {
+    paddingLeft: "var(--ds-space-100, 4px)"
+  },
+  '&:last-child': {
+    borderRight: 0,
+    paddingRight: "var(--ds-space-100, 4px)"
+  }
+});
+var tableContainerStyles = (0, _react2.css)({
+  borderRadius: 'inherit'
 });
 var scrollableContainerStyles = (0, _react2.css)({
   overflow: 'auto',
-  padding: "0 ".concat(tableSidePadding, " 0 ").concat(tableSidePadding),
-  boxSizing: 'border-box',
-  borderRadius: "var(--ds-border-radius-100, 3px)"
+  boxSizing: 'border-box'
 });
 var tableStyles = (0, _react2.css)({
   // These styles are needed to prevent thead bottom border from scrolling away.
@@ -379,7 +389,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
      */
     contentEditable: false,
     ref: containerRef,
-    css: scrollableContainerHeight ? scrollableContainerStyles : null,
+    css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles],
     style: scrollableContainerHeight ? {
       maxHeight: "".concat(scrollableContainerHeight, "px")
     } : undefined
@@ -435,6 +445,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     } else {
       return (0, _react2.jsx)(_styled2.TableHeading, {
         key: key,
+        className: !!onVisibleColumnKeysChange ? 'has-column-picker' : '',
         "data-testid": "".concat(key, "-column-heading"),
         style: shouldUseWidth ? {
           width: width

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

@@ -12,4 +12,4 @@ var _templateObject, _templateObject2;
 var ScrollableContainerHeight = exports.ScrollableContainerHeight = 590;
 var FieldTextFontSize = exports.FieldTextFontSize = '14px';
 var Table = exports.Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
-var TableHeading = exports.TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  height: calc(52px - ", " * 2 - 2px);\n  vertical-align: bottom;\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    max-height: 2.5rem;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"), "var(--ds-space-050, 4px)", "var(--ds-space-100, 4px)", "var(--ds-space-050, 2px)", "var(--ds-background-input-hovered, #F7F8F9)");
+var TableHeading = exports.TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  line-height: ", ";\n  border-right: 0.5px solid ", ";\n  border-bottom: 2px solid ", ";\n  height: calc(52px - ", " * 2 - 2px);\n  vertical-align: bottom;\n\n  &.has-column-picker:nth-last-of-type(2) {\n    border-right: 0;\n  }\n\n  &:first-child {\n    padding-left: ", ";\n  }\n\n  &:last-child {\n    border-right: 0;\n  }\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    max-height: 2.5rem;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), "var(--ds-font-lineHeight-300, 16px)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-space-050, 4px)", "var(--ds-space-100, 4px)", "var(--ds-space-100, 4px)", "var(--ds-space-050, 2px)", "var(--ds-background-input-hovered, #F7F8F9)");

package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -154,7 +154,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       });
     }
   }, [fetchFilterOptions, pageCursor, searchTerm]);
-  var handleOpenPopup = (0, _react.useCallback)(function () {
+  var handleMenuOpen = (0, _react.useCallback)(function () {
     if (status === 'empty' || status === 'rejected') {
       // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
       fetchFilterOptions({
@@ -163,13 +163,11 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     } else if (status === 'resolved') {
       sortOptionsOnPopupOpen();
     }
-  }, [fetchFilterOptions, searchTerm, sortOptionsOnPopupOpen, status]);
-  var handleMenuOpen = (0, _react.useCallback)(function () {
     fireEvent('ui.dropdown.opened.basicSearchDropdown', {
       filterType: filterType,
       selectionCount: selectedOptions.length
     });
-  }, [filterType, fireEvent, selectedOptions.length]);
+  }, [fetchFilterOptions, filterType, fireEvent, searchTerm, selectedOptions.length, sortOptionsOnPopupOpen, status]);
   (0, _react.useEffect)(function () {
     if (status === 'resolved') {
       sortOptionsOnResolve();
@@ -252,7 +250,6 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
         filterType: filterType,
         selectedOptions: selectedOptions,
         isSelected: isOpen,
-        onClick: handleOpenPopup,
         isDisabled: isDisabled
       }));
     },

package/dist/cjs/ui/jira-issues-modal/jira-search-container/index.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var inputContainerStyles = (0, _react2.css)({
   alignItems: 'baseline',
   display: 'flex',
-  minHeight: '60px'
+  minHeight: '72px'
 });
 var basicSearchInputContainerStyles = (0, _primitives.xcss)({
   flexGrow: 1

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

@@ -51,6 +51,11 @@ var dropdownContainerStyles = (0, _react2.css)({
   minHeight: '40px' // to prevent vertical shifting when site selector pops in
 });
 
+var tableContainerStyles = (0, _react2.css)({
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"))
+});
 var contentContainerStyles = (0, _react2.css)({
   display: 'grid',
   maxHeight: '420px',
@@ -432,7 +437,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
   }, [visibleColumnKeys]);
   var issueLikeDataTableView = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)("div", {
-      css: contentContainerStyles
+      css: [tableContainerStyles, contentContainerStyles]
     }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
       testId: "jira-jql-datasource-table",
       status: status,
@@ -486,7 +491,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
       return (0, _react2.jsx)("div", {
-        css: contentContainerStyles
+        css: [contentContainerStyles, !!jql && tableContainerStyles]
       }, !!jql ? (0, _react2.jsx)(_issueLikeTable.EmptyState, {
         testId: "jira-jql-datasource-modal--empty-state"
       }) : (0, _react2.jsx)(_initialStateView.InitialStateView, {

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

@@ -21,7 +21,7 @@ var _messages = require("./messages");
 var _syncInfo = require("./sync-info");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
-var FooterWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", ";\n  box-sizing: border-box;\n  background: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-background-input, ".concat(_colors.N0, ")"));
+var FooterWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", ";\n  box-sizing: border-box;\n  border-radius: inherit;\n  background: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-background-input, ".concat(_colors.N0, ")"));
 var TopBorderWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N40, ")"));
 var ItemCounterWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n"])));
 var SyncWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(_colors.N90, ")"));

package/dist/es2019/analytics/constants.js

@@ -1,5 +1,5 @@
 export const EVENT_CHANNEL = 'media';
 export const packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.17.6"
+  packageVersion: "1.17.8"
 };

package/dist/es2019/ui/assets-modal/modal/render-assets-content/index.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
+import { N40 } from '@atlaskit/theme/colors';
 import { AccessRequired } from '../../../common/error-state/access-required';
 import { ModalLoadingError } from '../../../common/error-state/modal-loading-error';
 import { NoResults } from '../../../common/error-state/no-results';
@@ -11,6 +12,11 @@ const emptyStateOverrideStyles = css({
   height: '420px',
   overflow: 'hidden'
 });
+const tableBordersStyles = css({
+  border: `1px solid ${`var(--ds-border, ${N40})`}`,
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)"
+});
 export const RenderAssetsContent = props => {
   const {
     status,
@@ -26,7 +32,9 @@ export const RenderAssetsContent = props => {
     isFetchingInitialData
   } = props;
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
-  const issueLikeDataTableView = useMemo(() => jsx(IssueLikeDataTableView, {
+  const issueLikeDataTableView = useMemo(() => jsx("div", {
+    css: tableBordersStyles
+  }, jsx(IssueLikeDataTableView, {
     testId: "asset-datasource-table",
     status: status,
     columns: columns,
@@ -37,11 +45,11 @@ export const RenderAssetsContent = props => {
     onLoadDatasourceDetails: loadDatasourceDetails,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     parentContainerRenderInstanceId: modalRenderInstanceId
-  }), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
+  })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
   if (isFetchingInitialData) {
     // Placing this check first as it's a priority before all others
     return jsx("div", {
-      css: emptyStateOverrideStyles
+      css: [tableBordersStyles, emptyStateOverrideStyles]
     }, jsx(EmptyState, {
       testId: "assets-aql-datasource-modal--loading-state"
     }));

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useRef } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
@@ -16,6 +16,9 @@ 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';
+const containerStyles = css({
+  borderRadius: 'inherit'
+});
 const DatasourceTableViewWithoutAnalytics = ({
   datasourceId,
   parameters,
@@ -123,6 +126,7 @@ const DatasourceTableViewWithoutAnalytics = ({
   return (
     // datasource-table classname is to exclude all children from being commentable - exclude list is in CFE
     jsx("div", {
+      css: containerStyles,
       className: "datasource-table"
     }, hasColumns ? jsx(IssueLikeDataTableView, {
       testId: 'datasource-table-view',

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

@@ -256,6 +256,7 @@ export const DraggableTableHeading = ({
   }, [id, index, onWidthChange, state, tableId, width]);
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
+    className: "has-column-picker",
     "data-testid": `${id}-column-heading`,
     style: {
       cursor: 'grab',

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Skeleton } from '@atlaskit/linking-common';
+import { N40 } from '@atlaskit/theme/colors';
 import { ScrollableContainerHeight, TableHeading } from '../styled';
 const SkeletonComponent = ({
   width,
@@ -11,14 +12,19 @@ const SkeletonComponent = ({
   height: 14,
   width: width
 });
-const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableBodyStyles = css({
   borderBottom: 0
 });
 const cellStyles = css({
   paddingBlock: "var(--ds-space-100, 12px)",
+  borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+  borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+  '&:first-child': {
+    paddingLeft: `${"var(--ds-space-100, 4px)"}`
+  },
   '&:last-child': {
-    paddingRight: "var(--ds-space-100, 8px)"
+    borderRight: 0,
+    paddingRight: `${"var(--ds-space-100, 4px)"}`
   }
 });
 const baseColumns = [{
@@ -92,10 +98,9 @@ export default (({
   return jsx("div", {
     style: {
       // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
-      // the isCompact prop is applied to non-modal empty states which require additional padding
       // this maxHeight comes from scrollableContainerHeight
       maxHeight: ScrollableContainerHeight,
-      padding: isCompact ? `0 ${tableSidePadding} 0 ${tableSidePadding}` : '0',
+      padding: 0,
       boxSizing: 'border-box'
     }
   }, jsx("table", {

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

@@ -34,7 +34,10 @@ const ColumnPickerHeader = styled.th`
   position: sticky;
   right: calc(-1 * ${tableSidePadding});
   background-color: ${"var(--ds-surface, #FFF)"};
-  border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}; /* It is required to have solid (not half-transparent) color because of this gradient business bellow */
+  border-bottom: 2px solid ${`var(--ds-border, ${N40})`}; /* It is required to have solid (not half-transparent) color because of this gradient business below */
+
+  padding-right: ${"var(--ds-space-100, 4px)"};
+
   background: linear-gradient(
     90deg,
     rgba(255, 255, 255, 0) 0%,
@@ -49,13 +52,23 @@ const ColumnPickerHeader = styled.th`
 const truncatedCellStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+  borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+  '&:first-child': {
+    paddingLeft: `${"var(--ds-space-100, 4px)"}`
+  },
+  '&:last-child': {
+    borderRight: 0,
+    paddingRight: `${"var(--ds-space-100, 4px)"}`
+  }
+});
+const tableContainerStyles = css({
+  borderRadius: 'inherit'
 });
 const scrollableContainerStyles = css({
   overflow: 'auto',
-  padding: `0 ${tableSidePadding} 0 ${tableSidePadding}`,
-  boxSizing: 'border-box',
-  borderRadius: "var(--ds-border-radius-100, 3px)"
+  boxSizing: 'border-box'
 });
 const tableStyles = css({
   // These styles are needed to prevent thead bottom border from scrolling away.
@@ -332,7 +345,7 @@ export const IssueLikeDataTableView = ({
      */
     contentEditable: false,
     ref: containerRef,
-    css: scrollableContainerHeight ? scrollableContainerStyles : null,
+    css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles],
     style: scrollableContainerHeight ? {
       maxHeight: `${scrollableContainerHeight}px`
     } : undefined
@@ -389,6 +402,7 @@ export const IssueLikeDataTableView = ({
     } else {
       return jsx(TableHeading, {
         key: key,
+        className: !!onVisibleColumnKeysChange ? 'has-column-picker' : '',
         "data-testid": `${key}-column-heading`,
         style: shouldUseWidth ? {
           width

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

@@ -8,10 +8,23 @@ export const Table = styled.table`
 export const TableHeading = styled.th`
   position: relative;
   line-height: ${"var(--ds-font-lineHeight-300, 16px)"};
-  border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
+  border-right: 0.5px solid ${`var(--ds-border, ${N40})`};
+  border-bottom: 2px solid ${`var(--ds-border, ${N40})`};
   height: calc(52px - ${"var(--ds-space-050, 4px)"} * 2 - 2px);
   vertical-align: bottom;
 
+  &.has-column-picker:nth-last-of-type(2) {
+    border-right: 0;
+  }
+
+  &:first-child {
+    padding-left: ${"var(--ds-space-100, 4px)"};
+  }
+
+  &:last-child {
+    border-right: 0;
+  }
+
   & [data-testid='datasource-header-content--container'] {
     width: 100%;
     padding: ${"var(--ds-space-100, 4px)"} ${"var(--ds-space-050, 2px)"};

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -105,7 +105,7 @@ const AsyncPopupSelect = ({
       });
     }
   }, [fetchFilterOptions, pageCursor, searchTerm]);
-  const handleOpenPopup = useCallback(() => {
+  const handleMenuOpen = useCallback(() => {
     if (status === 'empty' || status === 'rejected') {
       // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
       fetchFilterOptions({
@@ -114,13 +114,11 @@ const AsyncPopupSelect = ({
     } else if (status === 'resolved') {
       sortOptionsOnPopupOpen();
     }
-  }, [fetchFilterOptions, searchTerm, sortOptionsOnPopupOpen, status]);
-  const handleMenuOpen = useCallback(() => {
     fireEvent('ui.dropdown.opened.basicSearchDropdown', {
       filterType,
       selectionCount: selectedOptions.length
     });
-  }, [filterType, fireEvent, selectedOptions.length]);
+  }, [fetchFilterOptions, filterType, fireEvent, searchTerm, selectedOptions.length, sortOptionsOnPopupOpen, status]);
   useEffect(() => {
     if (status === 'resolved') {
       sortOptionsOnResolve();
@@ -203,7 +201,6 @@ const AsyncPopupSelect = ({
       filterType: filterType,
       selectedOptions: selectedOptions,
       isSelected: isOpen,
-      onClick: handleOpenPopup,
       isDisabled: isDisabled
     })),
     footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {

package/dist/es2019/ui/jira-issues-modal/jira-search-container/index.js

@@ -15,7 +15,7 @@ import { modeSwitcherMessages } from './messages';
 const inputContainerStyles = css({
   alignItems: 'baseline',
   display: 'flex',
-  minHeight: '60px'
+  minHeight: '72px'
 });
 const basicSearchInputContainerStyles = xcss({
   flexGrow: 1

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

@@ -35,6 +35,11 @@ const dropdownContainerStyles = css({
   minHeight: '40px' // to prevent vertical shifting when site selector pops in
 });
 
+const tableContainerStyles = css({
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  border: `1px solid ${`var(--ds-border, ${N40})`}`
+});
 const contentContainerStyles = css({
   display: 'grid',
   maxHeight: '420px',
@@ -377,7 +382,7 @@ export const PlainJiraIssuesConfigModal = props => {
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [visibleColumnKeys]);
   const issueLikeDataTableView = useMemo(() => jsx("div", {
-    css: contentContainerStyles
+    css: [tableContainerStyles, contentContainerStyles]
   }, jsx(IssueLikeDataTableView, {
     testId: "jira-jql-datasource-table",
     status: status,
@@ -430,7 +435,7 @@ export const PlainJiraIssuesConfigModal = props => {
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
       return jsx("div", {
-        css: contentContainerStyles
+        css: [contentContainerStyles, !!jql && tableContainerStyles]
       }, !!jql ? jsx(EmptyState, {
         testId: `jira-jql-datasource-modal--empty-state`
       }) : jsx(InitialStateView, {

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

@@ -14,6 +14,7 @@ import { SyncInfo } from './sync-info';
 const FooterWrapper = styled.div`
   padding: 0 ${"var(--ds-space-200, 16px)"};
   box-sizing: border-box;
+  border-radius: inherit;
   background: ${`var(--ds-background-input, ${N0})`};
 `;
 const TopBorderWrapper = styled.div`

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.17.6"
+  packageVersion: "1.17.8"
 };

package/dist/esm/ui/assets-modal/modal/render-assets-content/index.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
+import { N40 } from '@atlaskit/theme/colors';
 import { AccessRequired } from '../../../common/error-state/access-required';
 import { ModalLoadingError } from '../../../common/error-state/modal-loading-error';
 import { NoResults } from '../../../common/error-state/no-results';
@@ -11,6 +12,11 @@ var emptyStateOverrideStyles = css({
   height: '420px',
   overflow: 'hidden'
 });
+var tableBordersStyles = css({
+  border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)"
+});
 export var RenderAssetsContent = function RenderAssetsContent(props) {
   var status = props.status,
     responseItems = props.responseItems,
@@ -25,7 +31,9 @@ export var RenderAssetsContent = function RenderAssetsContent(props) {
     isFetchingInitialData = props.isFetchingInitialData;
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   var issueLikeDataTableView = useMemo(function () {
-    return jsx(IssueLikeDataTableView, {
+    return jsx("div", {
+      css: tableBordersStyles
+    }, jsx(IssueLikeDataTableView, {
       testId: "asset-datasource-table",
       status: status,
       columns: columns,
@@ -36,12 +44,12 @@ export var RenderAssetsContent = function RenderAssetsContent(props) {
       onLoadDatasourceDetails: loadDatasourceDetails,
       onVisibleColumnKeysChange: onVisibleColumnKeysChange,
       parentContainerRenderInstanceId: modalRenderInstanceId
-    });
+    }));
   }, [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
   if (isFetchingInitialData) {
     // Placing this check first as it's a priority before all others
     return jsx("div", {
-      css: emptyStateOverrideStyles
+      css: [tableBordersStyles, emptyStateOverrideStyles]
     }, jsx(EmptyState, {
       testId: "assets-aql-datasource-modal--loading-state"
     }));

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useRef } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
@@ -16,6 +16,9 @@ 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 containerStyles = css({
+  borderRadius: 'inherit'
+});
 var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAnalytics(_ref) {
   var datasourceId = _ref.datasourceId,
     parameters = _ref.parameters,
@@ -120,6 +123,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
   return (
     // datasource-table classname is to exclude all children from being commentable - exclude list is in CFE
     jsx("div", {
+      css: containerStyles,
       className: "datasource-table"
     }, hasColumns ? jsx(IssueLikeDataTableView, {
       testId: 'datasource-table-view',

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

@@ -262,6 +262,7 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   }, [id, index, onWidthChange, state, tableId, width]);
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
+    className: "has-column-picker",
     "data-testid": "".concat(id, "-column-heading"),
     style: _objectSpread({
       cursor: 'grab'

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Skeleton } from '@atlaskit/linking-common';
+import { N40 } from '@atlaskit/theme/colors';
 import { ScrollableContainerHeight, TableHeading } from '../styled';
 var SkeletonComponent = function SkeletonComponent(_ref) {
   var width = _ref.width,
@@ -12,14 +13,19 @@ var SkeletonComponent = function SkeletonComponent(_ref) {
     width: width
   });
 };
-var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableBodyStyles = css({
   borderBottom: 0
 });
 var cellStyles = css({
   paddingBlock: "var(--ds-space-100, 12px)",
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  '&:first-child': {
+    paddingLeft: "var(--ds-space-100, 4px)"
+  },
   '&:last-child': {
-    paddingRight: "var(--ds-space-100, 8px)"
+    borderRight: 0,
+    paddingRight: "var(--ds-space-100, 4px)"
   }
 });
 var baseColumns = [{
@@ -92,10 +98,9 @@ export default (function (_ref4) {
   return jsx("div", {
     style: {
       // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
-      // the isCompact prop is applied to non-modal empty states which require additional padding
       // this maxHeight comes from scrollableContainerHeight
       maxHeight: ScrollableContainerHeight,
-      padding: isCompact ? "0 ".concat(tableSidePadding, " 0 ").concat(tableSidePadding) : '0',
+      padding: 0,
       boxSizing: 'border-box'
     }
   }, jsx("table", {

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

@@ -37,17 +37,27 @@ var tableHeadStyles = css({
   top: 0,
   zIndex: stickyTableHeadersIndex
 });
-var ColumnPickerHeader = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 56px;\n  z-index: 10;\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  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n"])), tableSidePadding, "var(--ds-surface, #FFF)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"), "var(--ds-surface, #FFF)", tableSidePadding);
+var ColumnPickerHeader = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 56px;\n  z-index: 10;\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 below */\n\n  padding-right: ", ";\n\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  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n"])), tableSidePadding, "var(--ds-surface, #FFF)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-surface, #FFF)", tableSidePadding);
 var truncatedCellStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  whiteSpace: 'nowrap',
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  '&:first-child': {
+    paddingLeft: "var(--ds-space-100, 4px)"
+  },
+  '&:last-child': {
+    borderRight: 0,
+    paddingRight: "var(--ds-space-100, 4px)"
+  }
+});
+var tableContainerStyles = css({
+  borderRadius: 'inherit'
 });
 var scrollableContainerStyles = css({
   overflow: 'auto',
-  padding: "0 ".concat(tableSidePadding, " 0 ").concat(tableSidePadding),
-  boxSizing: 'border-box',
-  borderRadius: "var(--ds-border-radius-100, 3px)"
+  boxSizing: 'border-box'
 });
 var tableStyles = css({
   // These styles are needed to prevent thead bottom border from scrolling away.
@@ -372,7 +382,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
      */
     contentEditable: false,
     ref: containerRef,
-    css: scrollableContainerHeight ? scrollableContainerStyles : null,
+    css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles],
     style: scrollableContainerHeight ? {
       maxHeight: "".concat(scrollableContainerHeight, "px")
     } : undefined
@@ -428,6 +438,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     } else {
       return jsx(TableHeading, {
         key: key,
+        className: !!onVisibleColumnKeysChange ? 'has-column-picker' : '',
         "data-testid": "".concat(key, "-column-heading"),
         style: shouldUseWidth ? {
           width: width

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

@@ -5,4 +5,4 @@ import { N40 } from '@atlaskit/theme/colors';
 export var ScrollableContainerHeight = 590;
 export var FieldTextFontSize = '14px';
 export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
-export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  height: calc(52px - ", " * 2 - 2px);\n  vertical-align: bottom;\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    max-height: 2.5rem;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"), "var(--ds-space-050, 4px)", "var(--ds-space-100, 4px)", "var(--ds-space-050, 2px)", "var(--ds-background-input-hovered, #F7F8F9)");
+export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  line-height: ", ";\n  border-right: 0.5px solid ", ";\n  border-bottom: 2px solid ", ";\n  height: calc(52px - ", " * 2 - 2px);\n  vertical-align: bottom;\n\n  &.has-column-picker:nth-last-of-type(2) {\n    border-right: 0;\n  }\n\n  &:first-child {\n    padding-left: ", ";\n  }\n\n  &:last-child {\n    border-right: 0;\n  }\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    max-height: 2.5rem;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), "var(--ds-font-lineHeight-300, 16px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-050, 4px)", "var(--ds-space-100, 4px)", "var(--ds-space-100, 4px)", "var(--ds-space-050, 2px)", "var(--ds-background-input-hovered, #F7F8F9)");

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js

@@ -144,7 +144,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       });
     }
   }, [fetchFilterOptions, pageCursor, searchTerm]);
-  var handleOpenPopup = useCallback(function () {
+  var handleMenuOpen = useCallback(function () {
     if (status === 'empty' || status === 'rejected') {
       // if user searches and gets status as rejected, we want the dropdown to try load the request with searchString when the user reopens the dropdown
       fetchFilterOptions({
@@ -153,13 +153,11 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     } else if (status === 'resolved') {
       sortOptionsOnPopupOpen();
     }
-  }, [fetchFilterOptions, searchTerm, sortOptionsOnPopupOpen, status]);
-  var handleMenuOpen = useCallback(function () {
     fireEvent('ui.dropdown.opened.basicSearchDropdown', {
       filterType: filterType,
       selectionCount: selectedOptions.length
     });
-  }, [filterType, fireEvent, selectedOptions.length]);
+  }, [fetchFilterOptions, filterType, fireEvent, searchTerm, selectedOptions.length, sortOptionsOnPopupOpen, status]);
   useEffect(function () {
     if (status === 'resolved') {
       sortOptionsOnResolve();
@@ -242,7 +240,6 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
         filterType: filterType,
         selectedOptions: selectedOptions,
         isSelected: isOpen,
-        onClick: handleOpenPopup,
         isDisabled: isDisabled
       }));
     },

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

@@ -16,7 +16,7 @@ import { modeSwitcherMessages } from './messages';
 var inputContainerStyles = css({
   alignItems: 'baseline',
   display: 'flex',
-  minHeight: '60px'
+  minHeight: '72px'
 });
 var basicSearchInputContainerStyles = xcss({
   flexGrow: 1

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

@@ -42,6 +42,11 @@ var dropdownContainerStyles = css({
   minHeight: '40px' // to prevent vertical shifting when site selector pops in
 });
 
+var tableContainerStyles = css({
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")"))
+});
 var contentContainerStyles = css({
   display: 'grid',
   maxHeight: '420px',
@@ -423,7 +428,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
   }, [visibleColumnKeys]);
   var issueLikeDataTableView = useMemo(function () {
     return jsx("div", {
-      css: contentContainerStyles
+      css: [tableContainerStyles, contentContainerStyles]
     }, jsx(IssueLikeDataTableView, {
       testId: "jira-jql-datasource-table",
       status: status,
@@ -477,7 +482,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
       return jsx("div", {
-        css: contentContainerStyles
+        css: [contentContainerStyles, !!jql && tableContainerStyles]
       }, !!jql ? jsx(EmptyState, {
         testId: "jira-jql-datasource-modal--empty-state"
       }) : jsx(InitialStateView, {

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

@@ -14,7 +14,7 @@ import LinkUrl from '@atlaskit/smart-card/link-url';
 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  padding: 0 ", ";\n  box-sizing: border-box;\n  background: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-background-input, ".concat(N0, ")"));
+var FooterWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  box-sizing: border-box;\n  border-radius: inherit;\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 ItemCounterWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n"])));
 var SyncWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(N90, ")"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.17.6",
+  "version": "1.17.8",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
     "@atlaskit/empty-state": "^7.5.0",
     "@atlaskit/form": "^9.0.0",
     "@atlaskit/heading": "^1.4.0",
-    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/image": "^1.1.0",
     "@atlaskit/intl-messages-provider": "^1.0.0",