@atlaskit/link-datasource 1.19.7 → 1.19.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.19.8
+
+### Patch Changes
+
+- [#55010](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/55010) [`2b36c74cc7ac`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b36c74cc7ac) - Adds inner box shadow to datasource table scroll container
+
 ## 1.19.7
 
 ### 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.19.7"
+  packageVersion: "1.19.8"
 };

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

@@ -32,6 +32,7 @@ var _en = _interopRequireDefault(require("../../../i18n/en"));
 var _cmdbService = require("../../../services/cmdbService.utils");
 var _accessRequired = require("../../../ui/common/error-state/access-required");
 var _modalLoadingError = require("../../common/error-state/modal-loading-error");
+var _issueLikeTable = require("../../issue-like-table");
 var _searchContainer = require("../search-container");
 var _loadingState = require("../search-container/loading-state");
 var _messages = require("./messages");
@@ -43,7 +44,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var modalBodyWrapperStyles = (0, _react2.css)({
   display: 'grid',
   height: '420px',
-  overflow: 'auto'
+  overflow: 'auto',
+  background: _issueLikeTable.scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundAttachment
 });
 var modalBodyErrorWrapperStyles = (0, _react2.css)({
   alignItems: 'center'

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

@@ -23,16 +23,17 @@ var SkeletonComponent = function SkeletonComponent(_ref) {
 var tableBodyStyles = (0, _react.css)({
   borderBottom: 0
 });
+var padding = "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)");
 var cellStyles = (0, _react.css)({
-  paddingBlock: "var(--ds-space-100, 12px)",
+  padding: padding,
   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)"
+    paddingLeft: "var(--ds-space-100, 8px)"
   },
   '&:last-child': {
     borderRight: 0,
-    paddingRight: "var(--ds-space-100, 4px)"
+    paddingRight: "var(--ds-space-100, 8px)"
   }
 });
 var baseColumns = [{
@@ -122,7 +123,8 @@ var _default = exports.default = function _default(_ref4) {
     return (0, _react.jsx)(_styled.TableHeading, {
       key: key,
       style: {
-        width: width
+        width: width,
+        padding: padding
       }
     }, (0, _react.jsx)(_linkingCommon.Skeleton, {
       appearance: "darkGray",

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getOrderedColumns = exports.IssueLikeDataTableView = exports.EmptyState = exports.COLUMN_MIN_WIDTH = void 0;
+exports.scrollableContainerShadowsCssComponents = exports.getOrderedColumns = exports.IssueLikeDataTableView = exports.EmptyState = exports.COLUMN_MIN_WIDTH = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -39,12 +39,12 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableHeadStyles = (0, _react2.css)({
-  background: "var(--ds-surface, #FFF)",
+  background: "var(--ds-elevation-surface-current, #FFF)",
   position: 'sticky',
   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 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 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-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", tableSidePadding);
 var truncatedCellStyles = (0, _react2.css)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -52,19 +52,94 @@ var truncatedCellStyles = (0, _react2.css)({
   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)"
+    paddingLeft: "var(--ds-space-100, 8px)"
   },
   '&:last-child': {
     borderRight: 0,
-    paddingRight: "var(--ds-space-100, 4px)"
+    paddingRight: "var(--ds-space-100, 8px)"
   }
 });
 var tableContainerStyles = (0, _react2.css)({
-  borderRadius: 'inherit'
+  borderRadius: 'inherit',
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0
 });
+
+/**
+ * Following section deals with slight gradient shadows that we add
+ * on all four sides when there is more content in that direction.
+ *
+ * We do that by applying two gradients to the background -
+ * one is "static" ('local') and other is "sticky" ('scroll'). \
+ * "Static" one makes a white color gradient, that when window is at the end of scrollable area goes on top
+ * of "sticky" (gray) one, dominating and hence disabling sticky one.
+ */
+
+var shadowColor = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))";
+var shadowColorLight = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))";
+var leftWhiteOverrideGradient = {
+  background: "\n  linear-gradient(\n    90deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  ) left center"),
+  size: "40px 100%",
+  attachment: "local"
+};
+var topWhiteOverrideGradient = {
+  background: "\n  linear-gradient(\n    0deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%\n  ) top center"),
+  size: "100% 100px",
+  attachment: "local"
+};
+var rightWhiteOverrideGradient = {
+  background: "\n  linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 70%\n  ) right center"),
+  size: "40px 100%",
+  attachment: "local"
+};
+var bottomWhiteOverride = {
+  background: "\n  linear-gradient(\n    0deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  ) bottom center"),
+  size: "100% 40px",
+  attachment: "local"
+};
+var leftShadowGradient = {
+  background: "\n  linear-gradient(\n    90deg,\n    ".concat(shadowColor, ",\n    rgba(0, 0, 0, 0)\n  ) left center"),
+  size: "14px 100%",
+  attachment: "scroll"
+};
+var topShadowGradient = {
+  background: "\n  linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColorLight, "\n  ) 0 52px"),
+  size: "100% 14px",
+  attachment: "scroll"
+};
+var rightShadowGradient = {
+  background: "\n  linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColor, "\n  ) right center"),
+  size: "14px 100%",
+  attachment: "scroll"
+};
+var bottomShadowGradient = {
+  background: "\n  linear-gradient(\n    0deg,\n    ".concat(shadowColorLight, ",\n    rgba(0, 0, 0, 0)\n  ) bottom center"),
+  size: "100% 10px",
+  attachment: "scroll"
+};
+var shadows = [leftWhiteOverrideGradient, leftShadowGradient, rightWhiteOverrideGradient, rightShadowGradient, topWhiteOverrideGradient, topShadowGradient, bottomWhiteOverride, bottomShadowGradient];
+var scrollableContainerShadowsCssComponents = exports.scrollableContainerShadowsCssComponents = {
+  background: shadows.map(function (_ref) {
+    var background = _ref.background;
+    return background;
+  }).join(','),
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: shadows.map(function (_ref2) {
+    var size = _ref2.size;
+    return size;
+  }).join(','),
+  backgroundAttachment: shadows.map(function (_ref3) {
+    var attachment = _ref3.attachment;
+    return attachment;
+  }).join(',')
+};
 var scrollableContainerStyles = (0, _react2.css)({
   overflow: 'auto',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  background: scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
 });
 var tableStyles = (0, _react2.css)({
   // These styles are needed to prevent thead bottom border from scrolling away.
@@ -100,11 +175,11 @@ var BASE_WIDTH = 8;
 var DEFAULT_WIDTH = BASE_WIDTH * 22;
 var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = BASE_WIDTH * 3;
 var keyBasedWidthMap = {
-  priority: BASE_WIDTH * 4,
+  priority: BASE_WIDTH * 5,
   status: BASE_WIDTH * 18,
   summary: BASE_WIDTH * 45,
   description: BASE_WIDTH * 31.25,
-  type: BASE_WIDTH * 4,
+  type: BASE_WIDTH * 5,
   key: BASE_WIDTH * 13
 };
 function getDefaultColumnWidth(key, type) {
@@ -116,28 +191,28 @@ function getDefaultColumnWidth(key, type) {
     case 'date':
       return BASE_WIDTH * 14;
     case 'icon':
-      return BASE_WIDTH * 4;
+      return BASE_WIDTH * 5;
     default:
       return DEFAULT_WIDTH;
   }
 }
-var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
-  var testId = _ref.testId,
-    onNextPage = _ref.onNextPage,
-    onLoadDatasourceDetails = _ref.onLoadDatasourceDetails,
-    items = _ref.items,
-    columns = _ref.columns,
-    _ref$renderItem = _ref.renderItem,
-    renderItem = _ref$renderItem === void 0 ? _renderType.fallbackRenderType : _ref$renderItem,
-    visibleColumnKeys = _ref.visibleColumnKeys,
-    onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange,
-    columnCustomSizes = _ref.columnCustomSizes,
-    onColumnResize = _ref.onColumnResize,
-    status = _ref.status,
-    hasNextPage = _ref.hasNextPage,
-    scrollableContainerHeight = _ref.scrollableContainerHeight,
-    parentContainerRenderInstanceId = _ref.parentContainerRenderInstanceId,
-    extensionKey = _ref.extensionKey;
+var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
+  var testId = _ref4.testId,
+    onNextPage = _ref4.onNextPage,
+    onLoadDatasourceDetails = _ref4.onLoadDatasourceDetails,
+    items = _ref4.items,
+    columns = _ref4.columns,
+    _ref4$renderItem = _ref4.renderItem,
+    renderItem = _ref4$renderItem === void 0 ? _renderType.fallbackRenderType : _ref4$renderItem,
+    visibleColumnKeys = _ref4.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref4.onVisibleColumnKeysChange,
+    columnCustomSizes = _ref4.columnCustomSizes,
+    onColumnResize = _ref4.onColumnResize,
+    status = _ref4.status,
+    hasNextPage = _ref4.hasNextPage,
+    scrollableContainerHeight = _ref4.scrollableContainerHeight,
+    parentContainerRenderInstanceId = _ref4.parentContainerRenderInstanceId,
+    extensionKey = _ref4.extensionKey;
   var tableId = (0, _react.useMemo)(function () {
     return Symbol('unique-id');
   }, []);
@@ -172,8 +247,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   }, [parentContainerRenderInstanceId, status]);
   var visibleSortedColumns = (0, _react.useMemo)(function () {
     return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref2) {
-        var key = _ref2.key;
+      return orderedColumns.find(function (_ref5) {
+        var key = _ref5.key;
         return visibleKey === key;
       });
     }).filter(Boolean);
@@ -188,10 +263,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
   }, [columnCustomSizes]);
   var headerColumns = (0, _react.useMemo)(function () {
-    return visibleSortedColumns.map(function (_ref3) {
-      var key = _ref3.key,
-        title = _ref3.title,
-        type = _ref3.type;
+    return visibleSortedColumns.map(function (_ref6) {
+      var key = _ref6.key,
+        title = _ref6.title,
+        type = _ref6.type;
       return {
         key: key,
         content: title,
@@ -233,9 +308,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       return;
     }
     return (0, _combine.combine)((0, _element.monitorForElements)({
-      onDragStart: function onDragStart(_ref4) {
-        var location = _ref4.location,
-          source = _ref4.source;
+      onDragStart: function onDragStart(_ref7) {
+        var location = _ref7.location,
+          source = _ref7.source;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         if (source.data.type === 'table-header') {
           var _containerRef$current;
@@ -251,9 +326,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           });
         }
       },
-      onDrag: function onDrag(_ref5) {
-        var location = _ref5.location,
-          source = _ref5.source;
+      onDrag: function onDrag(_ref8) {
+        var location = _ref8.location,
+          source = _ref8.source;
         if (source.data.type === 'table-header') {
           var _containerRef$current2;
           _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({
@@ -263,9 +338,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           });
         }
       },
-      onDrop: function onDrop(_ref6) {
-        var source = _ref6.source,
-          location = _ref6.location;
+      onDrop: function onDrop(_ref9) {
+        var source = _ref9.source,
+          location = _ref9.location;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -300,10 +375,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     return items.map(function (newRowData, rowIndex) {
       return {
         key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
-        cells: visibleSortedColumns.map(function (_ref7) {
+        cells: visibleSortedColumns.map(function (_ref10) {
           var _newRowData$key;
-          var key = _ref7.key,
-            type = _ref7.type;
+          var key = _ref10.key,
+            type = _ref10.type;
           var value = ((_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data) || newRowData[key];
           var values = Array.isArray(value) ? value : [value];
           var content = values.map(function (value) {
@@ -404,10 +479,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     css: [noDefaultBorderStyles, tableHeadStyles]
   }, (0, _react2.jsx)("tr", {
     ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref9, cellIndex) {
-    var key = _ref9.key,
-      content = _ref9.content,
-      width = _ref9.width;
+  }, headerColumns.map(function (_ref12, cellIndex) {
+    var key = _ref12.key,
+      content = _ref12.content,
+      width = _ref12.width;
     var heading = (0, _react2.jsx)(_tooltip.default, {
       content: content,
       tag: "span",
@@ -418,10 +493,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
-      var previewRows = tableRows.map(function (_ref10) {
-        var cells = _ref10.cells;
-        var cell = cells.find(function (_ref11) {
-          var cellKey = _ref11.key;
+      var previewRows = tableRows.map(function (_ref13) {
+        var cells = _ref13.cells;
+        var cell = cells.find(function (_ref14) {
+          var cellKey = _ref14.key;
           return cellKey === key;
         });
         if (cell) {
@@ -463,18 +538,18 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   })))), (0, _react2.jsx)("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref12) {
-    var key = _ref12.key,
-      cells = _ref12.cells,
-      ref = _ref12.ref;
+  }, rows.map(function (_ref15) {
+    var key = _ref15.key,
+      cells = _ref15.cells,
+      ref = _ref15.ref;
     return (0, _react2.jsx)("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref13, cellIndex) {
-      var cellKey = _ref13.key,
-        content = _ref13.content,
-        width = _ref13.width;
+    }, cells.map(function (_ref16, cellIndex) {
+      var cellKey = _ref16.key,
+        content = _ref16.content,
+        width = _ref16.width;
       var loadingRowStyle = shouldUseWidth ? {
         width: width
       } : {
@@ -483,7 +558,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       // extra padding is required around skeleton loader to avoid vertical jumps when data loads
       if (key !== null && key !== void 0 && key.includes('loading')) {
         loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
-          paddingBlock: "var(--ds-space-100, 12px)"
+          paddingBlock: "var(--ds-space-100, 8px)"
         });
       }
       return (0, _react2.jsx)("td", {

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

@@ -12,4 +12,6 @@ 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-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)");
+var lineHeight = "var(--ds-font-lineHeight-300, 24px)";
+var verticalPadding = "var(--ds-space-025, 2px)";
+var TableHeading = exports.TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  line-height: ", ";\n  padding: ", " ", ";\n  border-right: 0.5px solid ", ";\n  border-bottom: 2px solid ", ";\n  height: calc(", " * 2 + ", " * 2);\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    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-background-input-hovered, #F7F8F9)");

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

@@ -62,7 +62,11 @@ var contentContainerStyles = (0, _react2.css)({
   display: 'grid',
   maxHeight: '420px',
   overflow: 'auto',
-  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"))
+  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")")),
+  background: _issueLikeTable.scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundAttachment
 });
 var placeholderSmartLinkStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-surface-raised, ".concat(_colors.N0, ")"),

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

@@ -21,8 +21,8 @@ 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  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 FooterWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", ";\n  box-sizing: border-box;\n  border-radius: inherit;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  background: ", ";\n  border-top: 2px solid ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-background-input, ".concat(_colors.N0, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"));
+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"])), "var(--ds-space-250, 20px)");
 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, ")"));
 var SyncTextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 5px;\n  font-size: 12px;\n"])));

package/dist/es2019/analytics/constants.js

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

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

@@ -21,6 +21,7 @@ import i18nEN from '../../../i18n/en';
 import { PermissionError } from '../../../services/cmdbService.utils';
 import { AccessRequired } from '../../../ui/common/error-state/access-required';
 import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
+import { scrollableContainerShadowsCssComponents } from '../../issue-like-table';
 import { AssetsSearchContainer } from '../search-container';
 import { AssetsSearchContainerLoading } from '../search-container/loading-state';
 import { modalMessages } from './messages';
@@ -28,7 +29,11 @@ import { RenderAssetsContent } from './render-assets-content';
 const modalBodyWrapperStyles = css({
   display: 'grid',
   height: '420px',
-  overflow: 'auto'
+  overflow: 'auto',
+  background: scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
 });
 const modalBodyErrorWrapperStyles = css({
   alignItems: 'center'

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

@@ -15,16 +15,17 @@ const SkeletonComponent = ({
 const tableBodyStyles = css({
   borderBottom: 0
 });
+const padding = `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`;
 const cellStyles = css({
-  paddingBlock: "var(--ds-space-100, 12px)",
+  padding,
   borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
   borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
   '&:first-child': {
-    paddingLeft: `${"var(--ds-space-100, 4px)"}`
+    paddingLeft: `${"var(--ds-space-100, 8px)"}`
   },
   '&:last-child': {
     borderRight: 0,
-    paddingRight: `${"var(--ds-space-100, 4px)"}`
+    paddingRight: `${"var(--ds-space-100, 8px)"}`
   }
 });
 const baseColumns = [{
@@ -115,7 +116,8 @@ export default (({
   }) => jsx(TableHeading, {
     key: key,
     style: {
-      width
+      width,
+      padding
     }
   }, jsx(Skeleton, {
     appearance: "darkGray",

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

@@ -23,7 +23,7 @@ import { Table, TableHeading } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
 const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableHeadStyles = css({
-  background: "var(--ds-surface, #FFF)",
+  background: "var(--ds-elevation-surface-current, #FFF)",
   position: 'sticky',
   top: 0,
   zIndex: stickyTableHeadersIndex
@@ -33,7 +33,7 @@ const ColumnPickerHeader = styled.th`
   z-index: 10;
   position: sticky;
   right: calc(-1 * ${tableSidePadding});
-  background-color: ${"var(--ds-surface, #FFF)"};
+  background-color: ${"var(--ds-elevation-surface-current, #FFF)"};
   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)"};
@@ -41,7 +41,7 @@ const ColumnPickerHeader = styled.th`
   background: linear-gradient(
     90deg,
     rgba(255, 255, 255, 0) 0%,
-    ${"var(--ds-surface, #FFF)"} 10%
+    ${"var(--ds-elevation-surface-current, #FFF)"} 10%
   );
   vertical-align: middle; /* Keeps dropdown button in the middle */
   &:last-of-type {
@@ -56,19 +56,131 @@ const truncatedCellStyles = css({
   borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
   borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
   '&:first-child': {
-    paddingLeft: `${"var(--ds-space-100, 4px)"}`
+    paddingLeft: `${"var(--ds-space-100, 8px)"}`
   },
   '&:last-child': {
     borderRight: 0,
-    paddingRight: `${"var(--ds-space-100, 4px)"}`
+    paddingRight: `${"var(--ds-space-100, 8px)"}`
   }
 });
 const tableContainerStyles = css({
-  borderRadius: 'inherit'
+  borderRadius: 'inherit',
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0
 });
+
+/**
+ * Following section deals with slight gradient shadows that we add
+ * on all four sides when there is more content in that direction.
+ *
+ * We do that by applying two gradients to the background -
+ * one is "static" ('local') and other is "sticky" ('scroll'). \
+ * "Static" one makes a white color gradient, that when window is at the end of scrollable area goes on top
+ * of "sticky" (gray) one, dominating and hence disabling sticky one.
+ */
+
+const shadowColor = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))";
+const shadowColorLight = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))";
+const leftWhiteOverrideGradient = {
+  background: `
+  linear-gradient(
+    90deg,
+    ${"var(--ds-elevation-surface-current, #FFF)"} 30%,
+    rgba(255, 255, 255, 0)
+  ) left center`,
+  size: `40px 100%`,
+  attachment: `local`
+};
+const topWhiteOverrideGradient = {
+  background: `
+  linear-gradient(
+    0deg,
+    rgba(255, 255, 255, 0),
+    ${"var(--ds-elevation-surface-current, #FFF)"} 30%
+  ) top center`,
+  size: `100% 100px`,
+  attachment: `local`
+};
+const rightWhiteOverrideGradient = {
+  background: `
+  linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0),
+    ${"var(--ds-elevation-surface-current, #FFF)"} 70%
+  ) right center`,
+  size: `40px 100%`,
+  attachment: `local`
+};
+const bottomWhiteOverride = {
+  background: `
+  linear-gradient(
+    0deg,
+    ${"var(--ds-elevation-surface-current, #FFF)"} 30%,
+    rgba(255, 255, 255, 0)
+  ) bottom center`,
+  size: `100% 40px`,
+  attachment: `local`
+};
+const leftShadowGradient = {
+  background: `
+  linear-gradient(
+    90deg,
+    ${shadowColor},
+    rgba(0, 0, 0, 0)
+  ) left center`,
+  size: `14px 100%`,
+  attachment: `scroll`
+};
+const topShadowGradient = {
+  background: `
+  linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0),
+    ${shadowColorLight}
+  ) 0 52px`,
+  size: `100% 14px`,
+  attachment: `scroll`
+};
+const rightShadowGradient = {
+  background: `
+  linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0),
+    ${shadowColor}
+  ) right center`,
+  size: `14px 100%`,
+  attachment: `scroll`
+};
+const bottomShadowGradient = {
+  background: `
+  linear-gradient(
+    0deg,
+    ${shadowColorLight},
+    rgba(0, 0, 0, 0)
+  ) bottom center`,
+  size: `100% 10px`,
+  attachment: `scroll`
+};
+const shadows = [leftWhiteOverrideGradient, leftShadowGradient, rightWhiteOverrideGradient, rightShadowGradient, topWhiteOverrideGradient, topShadowGradient, bottomWhiteOverride, bottomShadowGradient];
+export const scrollableContainerShadowsCssComponents = {
+  background: shadows.map(({
+    background
+  }) => background).join(','),
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: shadows.map(({
+    size
+  }) => size).join(','),
+  backgroundAttachment: shadows.map(({
+    attachment
+  }) => attachment).join(',')
+};
 const scrollableContainerStyles = css({
   overflow: 'auto',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  background: scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
 });
 const tableStyles = css({
   // These styles are needed to prevent thead bottom border from scrolling away.
@@ -102,11 +214,11 @@ const BASE_WIDTH = 8;
 const DEFAULT_WIDTH = BASE_WIDTH * 22;
 export const COLUMN_MIN_WIDTH = BASE_WIDTH * 3;
 const keyBasedWidthMap = {
-  priority: BASE_WIDTH * 4,
+  priority: BASE_WIDTH * 5,
   status: BASE_WIDTH * 18,
   summary: BASE_WIDTH * 45,
   description: BASE_WIDTH * 31.25,
-  type: BASE_WIDTH * 4,
+  type: BASE_WIDTH * 5,
   key: BASE_WIDTH * 13
 };
 function getDefaultColumnWidth(key, type) {
@@ -118,7 +230,7 @@ function getDefaultColumnWidth(key, type) {
     case 'date':
       return BASE_WIDTH * 14;
     case 'icon':
-      return BASE_WIDTH * 4;
+      return BASE_WIDTH * 5;
     default:
       return DEFAULT_WIDTH;
   }
@@ -442,7 +554,7 @@ export const IssueLikeDataTableView = ({
     if (key !== null && key !== void 0 && key.includes('loading')) {
       loadingRowStyle = {
         ...loadingRowStyle,
-        paddingBlock: "var(--ds-space-100, 12px)"
+        paddingBlock: "var(--ds-space-100, 8px)"
       };
     }
     return jsx("td", {

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

@@ -5,12 +5,15 @@ export const FieldTextFontSize = '14px';
 export const Table = styled.table`
   width: 100%;
 `;
+const lineHeight = "var(--ds-font-lineHeight-300, 24px)";
+const verticalPadding = "var(--ds-space-025, 2px)";
 export const TableHeading = styled.th`
   position: relative;
-  line-height: ${"var(--ds-font-lineHeight-300, 16px)"};
+  line-height: ${lineHeight};
+  padding: ${verticalPadding} ${"var(--ds-space-050, 4px)"};
   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);
+  height: calc(${lineHeight} * 2 + ${verticalPadding} * 2);
   vertical-align: bottom;
 
   &.has-column-picker:nth-last-of-type(2) {
@@ -18,7 +21,7 @@ export const TableHeading = styled.th`
   }
 
   &:first-child {
-    padding-left: ${"var(--ds-space-100, 4px)"};
+    padding-left: ${"var(--ds-space-050, 4px)"};
   }
 
   &:last-child {
@@ -27,13 +30,12 @@ export const TableHeading = styled.th`
 
   & [data-testid='datasource-header-content--container'] {
     width: 100%;
-    padding: ${"var(--ds-space-100, 4px)"} ${"var(--ds-space-050, 2px)"};
+    padding: ${verticalPadding} ${"var(--ds-space-050, 4px)"};
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     white-space: normal;
     overflow: hidden;
-    max-height: 2.5rem;
     word-wrap: break-word;
 
     &:hover {

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

@@ -22,7 +22,7 @@ import { AccessRequired } from '../../common/error-state/access-required';
 import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
 import { NoInstancesView } from '../../common/error-state/no-instances';
 import { NoResults } from '../../common/error-state/no-results';
-import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
+import { EmptyState, IssueLikeDataTableView, scrollableContainerShadowsCssComponents } from '../../issue-like-table';
 import LinkRenderType from '../../issue-like-table/render-type/link';
 import { availableBasicFilterTypes } from '../basic-filters/ui';
 import { InitialStateView } from '../initial-state-view';
@@ -46,7 +46,11 @@ const contentContainerStyles = css({
   display: 'grid',
   maxHeight: '420px',
   overflow: 'auto',
-  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`
+  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
+  background: scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
 });
 const placeholderSmartLinkStyles = css({
   backgroundColor: `var(--ds-surface-raised, ${N0})`,

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

@@ -15,14 +15,16 @@ const FooterWrapper = styled.div`
   padding: 0 ${"var(--ds-space-200, 16px)"};
   box-sizing: border-box;
   border-radius: inherit;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   background: ${`var(--ds-background-input, ${N0})`};
+  border-top: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
 `;
 const TopBorderWrapper = styled.div`
   display: flex;
   box-sizing: border-box;
   justify-content: space-between;
   padding: ${"var(--ds-space-250, 20px)"} 0;
-  border-top: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
 `;
 const ItemCounterWrapper = styled.div`
   display: flex;

package/dist/esm/analytics/constants.js

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

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

@@ -27,6 +27,7 @@ import i18nEN from '../../../i18n/en';
 import { PermissionError } from '../../../services/cmdbService.utils';
 import { AccessRequired } from '../../../ui/common/error-state/access-required';
 import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
+import { scrollableContainerShadowsCssComponents } from '../../issue-like-table';
 import { AssetsSearchContainer } from '../search-container';
 import { AssetsSearchContainerLoading } from '../search-container/loading-state';
 import { modalMessages } from './messages';
@@ -34,7 +35,11 @@ import { RenderAssetsContent } from './render-assets-content';
 var modalBodyWrapperStyles = css({
   display: 'grid',
   height: '420px',
-  overflow: 'auto'
+  overflow: 'auto',
+  background: scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
 });
 var modalBodyErrorWrapperStyles = css({
   alignItems: 'center'

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

@@ -16,16 +16,17 @@ var SkeletonComponent = function SkeletonComponent(_ref) {
 var tableBodyStyles = css({
   borderBottom: 0
 });
+var padding = "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)");
 var cellStyles = css({
-  paddingBlock: "var(--ds-space-100, 12px)",
+  padding: padding,
   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)"
+    paddingLeft: "var(--ds-space-100, 8px)"
   },
   '&:last-child': {
     borderRight: 0,
-    paddingRight: "var(--ds-space-100, 4px)"
+    paddingRight: "var(--ds-space-100, 8px)"
   }
 });
 var baseColumns = [{
@@ -115,7 +116,8 @@ export default (function (_ref4) {
     return jsx(TableHeading, {
       key: key,
       style: {
-        width: width
+        width: width,
+        padding: padding
       }
     }, jsx(Skeleton, {
       appearance: "darkGray",

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

@@ -32,12 +32,12 @@ import { Table, TableHeading } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
 var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableHeadStyles = css({
-  background: "var(--ds-surface, #FFF)",
+  background: "var(--ds-elevation-surface-current, #FFF)",
   position: 'sticky',
   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 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 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-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", tableSidePadding);
 var truncatedCellStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -45,19 +45,94 @@ var truncatedCellStyles = css({
   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)"
+    paddingLeft: "var(--ds-space-100, 8px)"
   },
   '&:last-child': {
     borderRight: 0,
-    paddingRight: "var(--ds-space-100, 4px)"
+    paddingRight: "var(--ds-space-100, 8px)"
   }
 });
 var tableContainerStyles = css({
-  borderRadius: 'inherit'
+  borderRadius: 'inherit',
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0
 });
+
+/**
+ * Following section deals with slight gradient shadows that we add
+ * on all four sides when there is more content in that direction.
+ *
+ * We do that by applying two gradients to the background -
+ * one is "static" ('local') and other is "sticky" ('scroll'). \
+ * "Static" one makes a white color gradient, that when window is at the end of scrollable area goes on top
+ * of "sticky" (gray) one, dominating and hence disabling sticky one.
+ */
+
+var shadowColor = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))";
+var shadowColorLight = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))";
+var leftWhiteOverrideGradient = {
+  background: "\n  linear-gradient(\n    90deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  ) left center"),
+  size: "40px 100%",
+  attachment: "local"
+};
+var topWhiteOverrideGradient = {
+  background: "\n  linear-gradient(\n    0deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%\n  ) top center"),
+  size: "100% 100px",
+  attachment: "local"
+};
+var rightWhiteOverrideGradient = {
+  background: "\n  linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 70%\n  ) right center"),
+  size: "40px 100%",
+  attachment: "local"
+};
+var bottomWhiteOverride = {
+  background: "\n  linear-gradient(\n    0deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  ) bottom center"),
+  size: "100% 40px",
+  attachment: "local"
+};
+var leftShadowGradient = {
+  background: "\n  linear-gradient(\n    90deg,\n    ".concat(shadowColor, ",\n    rgba(0, 0, 0, 0)\n  ) left center"),
+  size: "14px 100%",
+  attachment: "scroll"
+};
+var topShadowGradient = {
+  background: "\n  linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColorLight, "\n  ) 0 52px"),
+  size: "100% 14px",
+  attachment: "scroll"
+};
+var rightShadowGradient = {
+  background: "\n  linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColor, "\n  ) right center"),
+  size: "14px 100%",
+  attachment: "scroll"
+};
+var bottomShadowGradient = {
+  background: "\n  linear-gradient(\n    0deg,\n    ".concat(shadowColorLight, ",\n    rgba(0, 0, 0, 0)\n  ) bottom center"),
+  size: "100% 10px",
+  attachment: "scroll"
+};
+var shadows = [leftWhiteOverrideGradient, leftShadowGradient, rightWhiteOverrideGradient, rightShadowGradient, topWhiteOverrideGradient, topShadowGradient, bottomWhiteOverride, bottomShadowGradient];
+export var scrollableContainerShadowsCssComponents = {
+  background: shadows.map(function (_ref) {
+    var background = _ref.background;
+    return background;
+  }).join(','),
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: shadows.map(function (_ref2) {
+    var size = _ref2.size;
+    return size;
+  }).join(','),
+  backgroundAttachment: shadows.map(function (_ref3) {
+    var attachment = _ref3.attachment;
+    return attachment;
+  }).join(',')
+};
 var scrollableContainerStyles = css({
   overflow: 'auto',
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  background: scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
 });
 var tableStyles = css({
   // These styles are needed to prevent thead bottom border from scrolling away.
@@ -93,11 +168,11 @@ var BASE_WIDTH = 8;
 var DEFAULT_WIDTH = BASE_WIDTH * 22;
 export var COLUMN_MIN_WIDTH = BASE_WIDTH * 3;
 var keyBasedWidthMap = {
-  priority: BASE_WIDTH * 4,
+  priority: BASE_WIDTH * 5,
   status: BASE_WIDTH * 18,
   summary: BASE_WIDTH * 45,
   description: BASE_WIDTH * 31.25,
-  type: BASE_WIDTH * 4,
+  type: BASE_WIDTH * 5,
   key: BASE_WIDTH * 13
 };
 function getDefaultColumnWidth(key, type) {
@@ -109,28 +184,28 @@ function getDefaultColumnWidth(key, type) {
     case 'date':
       return BASE_WIDTH * 14;
     case 'icon':
-      return BASE_WIDTH * 4;
+      return BASE_WIDTH * 5;
     default:
       return DEFAULT_WIDTH;
   }
 }
-export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
-  var testId = _ref.testId,
-    onNextPage = _ref.onNextPage,
-    onLoadDatasourceDetails = _ref.onLoadDatasourceDetails,
-    items = _ref.items,
-    columns = _ref.columns,
-    _ref$renderItem = _ref.renderItem,
-    renderItem = _ref$renderItem === void 0 ? fallbackRenderType : _ref$renderItem,
-    visibleColumnKeys = _ref.visibleColumnKeys,
-    onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange,
-    columnCustomSizes = _ref.columnCustomSizes,
-    onColumnResize = _ref.onColumnResize,
-    status = _ref.status,
-    hasNextPage = _ref.hasNextPage,
-    scrollableContainerHeight = _ref.scrollableContainerHeight,
-    parentContainerRenderInstanceId = _ref.parentContainerRenderInstanceId,
-    extensionKey = _ref.extensionKey;
+export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
+  var testId = _ref4.testId,
+    onNextPage = _ref4.onNextPage,
+    onLoadDatasourceDetails = _ref4.onLoadDatasourceDetails,
+    items = _ref4.items,
+    columns = _ref4.columns,
+    _ref4$renderItem = _ref4.renderItem,
+    renderItem = _ref4$renderItem === void 0 ? fallbackRenderType : _ref4$renderItem,
+    visibleColumnKeys = _ref4.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref4.onVisibleColumnKeysChange,
+    columnCustomSizes = _ref4.columnCustomSizes,
+    onColumnResize = _ref4.onColumnResize,
+    status = _ref4.status,
+    hasNextPage = _ref4.hasNextPage,
+    scrollableContainerHeight = _ref4.scrollableContainerHeight,
+    parentContainerRenderInstanceId = _ref4.parentContainerRenderInstanceId,
+    extensionKey = _ref4.extensionKey;
   var tableId = useMemo(function () {
     return Symbol('unique-id');
   }, []);
@@ -165,8 +240,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
   }, [parentContainerRenderInstanceId, status]);
   var visibleSortedColumns = useMemo(function () {
     return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref2) {
-        var key = _ref2.key;
+      return orderedColumns.find(function (_ref5) {
+        var key = _ref5.key;
         return visibleKey === key;
       });
     }).filter(Boolean);
@@ -181,10 +256,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
   }, [columnCustomSizes]);
   var headerColumns = useMemo(function () {
-    return visibleSortedColumns.map(function (_ref3) {
-      var key = _ref3.key,
-        title = _ref3.title,
-        type = _ref3.type;
+    return visibleSortedColumns.map(function (_ref6) {
+      var key = _ref6.key,
+        title = _ref6.title,
+        type = _ref6.type;
       return {
         key: key,
         content: title,
@@ -226,9 +301,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       return;
     }
     return combine(monitorForElements({
-      onDragStart: function onDragStart(_ref4) {
-        var location = _ref4.location,
-          source = _ref4.source;
+      onDragStart: function onDragStart(_ref7) {
+        var location = _ref7.location,
+          source = _ref7.source;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         if (source.data.type === 'table-header') {
           var _containerRef$current;
@@ -244,9 +319,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
           });
         }
       },
-      onDrag: function onDrag(_ref5) {
-        var location = _ref5.location,
-          source = _ref5.source;
+      onDrag: function onDrag(_ref8) {
+        var location = _ref8.location,
+          source = _ref8.source;
         if (source.data.type === 'table-header') {
           var _containerRef$current2;
           autoScroller.updateInput({
@@ -256,9 +331,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
           });
         }
       },
-      onDrop: function onDrop(_ref6) {
-        var source = _ref6.source,
-          location = _ref6.location;
+      onDrop: function onDrop(_ref9) {
+        var source = _ref9.source,
+          location = _ref9.location;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -293,10 +368,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     return items.map(function (newRowData, rowIndex) {
       return {
         key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
-        cells: visibleSortedColumns.map(function (_ref7) {
+        cells: visibleSortedColumns.map(function (_ref10) {
           var _newRowData$key;
-          var key = _ref7.key,
-            type = _ref7.type;
+          var key = _ref10.key,
+            type = _ref10.type;
           var value = ((_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data) || newRowData[key];
           var values = Array.isArray(value) ? value : [value];
           var content = values.map(function (value) {
@@ -397,10 +472,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     css: [noDefaultBorderStyles, tableHeadStyles]
   }, jsx("tr", {
     ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref9, cellIndex) {
-    var key = _ref9.key,
-      content = _ref9.content,
-      width = _ref9.width;
+  }, headerColumns.map(function (_ref12, cellIndex) {
+    var key = _ref12.key,
+      content = _ref12.content,
+      width = _ref12.width;
     var heading = jsx(Tooltip, {
       content: content,
       tag: "span",
@@ -411,10 +486,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
-      var previewRows = tableRows.map(function (_ref10) {
-        var cells = _ref10.cells;
-        var cell = cells.find(function (_ref11) {
-          var cellKey = _ref11.key;
+      var previewRows = tableRows.map(function (_ref13) {
+        var cells = _ref13.cells;
+        var cell = cells.find(function (_ref14) {
+          var cellKey = _ref14.key;
           return cellKey === key;
         });
         if (cell) {
@@ -456,18 +531,18 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
   })))), 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 (_ref15) {
+    var key = _ref15.key,
+      cells = _ref15.cells,
+      ref = _ref15.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,
-        width = _ref13.width;
+    }, cells.map(function (_ref16, cellIndex) {
+      var cellKey = _ref16.key,
+        content = _ref16.content,
+        width = _ref16.width;
       var loadingRowStyle = shouldUseWidth ? {
         width: width
       } : {
@@ -476,7 +551,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       // extra padding is required around skeleton loader to avoid vertical jumps when data loads
       if (key !== null && key !== void 0 && key.includes('loading')) {
         loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
-          paddingBlock: "var(--ds-space-100, 12px)"
+          paddingBlock: "var(--ds-space-100, 8px)"
         });
       }
       return jsx("td", {

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

@@ -5,4 +5,6 @@ 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-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)");
+var lineHeight = "var(--ds-font-lineHeight-300, 24px)";
+var verticalPadding = "var(--ds-space-025, 2px)";
+export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  line-height: ", ";\n  padding: ", " ", ";\n  border-right: 0.5px solid ", ";\n  border-bottom: 2px solid ", ";\n  height: calc(", " * 2 + ", " * 2);\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    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-border, ".concat(N40, ")"), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-background-input-hovered, #F7F8F9)");

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

@@ -29,7 +29,7 @@ import { AccessRequired } from '../../common/error-state/access-required';
 import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
 import { NoInstancesView } from '../../common/error-state/no-instances';
 import { NoResults } from '../../common/error-state/no-results';
-import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
+import { EmptyState, IssueLikeDataTableView, scrollableContainerShadowsCssComponents } from '../../issue-like-table';
 import LinkRenderType from '../../issue-like-table/render-type/link';
 import { availableBasicFilterTypes } from '../basic-filters/ui';
 import { InitialStateView } from '../initial-state-view';
@@ -53,7 +53,11 @@ var contentContainerStyles = css({
   display: 'grid',
   maxHeight: '420px',
   overflow: 'auto',
-  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")"))
+  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")")),
+  background: scrollableContainerShadowsCssComponents.background,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
 });
 var placeholderSmartLinkStyles = css({
   backgroundColor: "var(--ds-surface-raised, ".concat(N0, ")"),

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

@@ -14,8 +14,8 @@ 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  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 FooterWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  box-sizing: border-box;\n  border-radius: inherit;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  background: ", ";\n  border-top: 2px solid ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-background-input, ".concat(N0, ")"), "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));
+var TopBorderWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  padding: ", " 0;\n"])), "var(--ds-space-250, 20px)");
 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, ")"));
 var SyncTextWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n  font-size: 12px;\n"])));

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

@@ -3,6 +3,12 @@ import { Ref } from 'react';
 import { jsx } from '@emotion/react';
 import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types/datasource';
 import { IssueLikeDataTableViewProps } from './types';
+export declare const scrollableContainerShadowsCssComponents: {
+    background: string;
+    backgroundRepeat: string;
+    backgroundSize: string;
+    backgroundAttachment: string;
+};
 export interface RowType {
     cells: Array<RowCellType>;
     key?: string;

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

@@ -3,6 +3,12 @@ import { Ref } from 'react';
 import { jsx } from '@emotion/react';
 import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types/datasource';
 import { IssueLikeDataTableViewProps } from './types';
+export declare const scrollableContainerShadowsCssComponents: {
+    background: string;
+    backgroundRepeat: string;
+    backgroundSize: string;
+    backgroundAttachment: string;
+};
 export interface RowType {
     cells: Array<RowCellType>;
     key?: string;

package/package.json

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