@atlaskit/link-datasource 1.19.15 → 1.19.17

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 1.19.17
+
+### Patch Changes
+
+- [#58033](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58033) [`e833dd7a4e2f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e833dd7a4e2f) - [ux] Updated datasource tables to always have a background.
+
+## 1.19.16
+
+### Patch Changes
+
+- [#58204](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58204) [`f800efb5148e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f800efb5148e) - Design/Bug fixes for basic filters(after design review).
+
 ## 1.19.15
 
 ### 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.15"
+  packageVersion: "1.19.17"
 };

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

@@ -30,7 +30,7 @@ var tableBordersStyles = (0, _react2.css)({
   borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
   borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
   borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")")),
-  background: _issueLikeTable.scrollableContainerShadowsCssComponents.background,
+  backgroundImage: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundImage,
   backgroundRepeat: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundRepeat,
   backgroundSize: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundSize,
   backgroundAttachment: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundAttachment

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

@@ -23,6 +23,9 @@ var SkeletonComponent = function SkeletonComponent(_ref) {
 var tableBodyStyles = (0, _react.css)({
   borderBottom: 0
 });
+var tableStyles = (0, _react.css)({
+  background: "var(--ds-elevation-surface-current, #FFF)"
+});
 var padding = "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)");
 var cellStyles = (0, _react.css)({
   padding: padding,
@@ -112,6 +115,7 @@ var _default = exports.default = function _default(_ref4) {
       boxSizing: 'border-box'
     }
   }, (0, _react.jsx)("table", {
+    css: tableStyles,
     "data-testid": testId
   }, (0, _react.jsx)("thead", {
     style: {

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

@@ -78,65 +78,79 @@ var tableContainerStyles = (0, _react2.css)({
 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"),
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 70%\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    ".concat(shadowColor, ",\n    rgba(0, 0, 0, 0)\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColorLight, "\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColor, "\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    ".concat(shadowColorLight, ",\n    rgba(0, 0, 0, 0)\n  )"),
+  backgroundPosition: '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;
+  backgroundImage: shadows.map(function (_ref) {
+    var backgroundImage = _ref.backgroundImage;
+    return backgroundImage;
+  }).join(','),
+  backgroundPosition: shadows.map(function (_ref2) {
+    var backgroundPosition = _ref2.backgroundPosition;
+    return backgroundPosition;
   }).join(','),
   backgroundRepeat: 'no-repeat',
-  backgroundSize: shadows.map(function (_ref2) {
-    var size = _ref2.size;
+  backgroundSize: shadows.map(function (_ref3) {
+    var size = _ref3.size;
     return size;
   }).join(','),
-  backgroundAttachment: shadows.map(function (_ref3) {
-    var attachment = _ref3.attachment;
+  backgroundAttachment: shadows.map(function (_ref4) {
+    var attachment = _ref4.attachment;
     return attachment;
   }).join(',')
 };
 var scrollableContainerStyles = (0, _react2.css)({
   overflow: 'auto',
   boxSizing: 'border-box',
-  background: scrollableContainerShadowsCssComponents.background,
+  backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
   backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
   backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
   backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
@@ -196,23 +210,23 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-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 IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
+  var testId = _ref5.testId,
+    onNextPage = _ref5.onNextPage,
+    onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
+    items = _ref5.items,
+    columns = _ref5.columns,
+    _ref5$renderItem = _ref5.renderItem,
+    renderItem = _ref5$renderItem === void 0 ? _renderType.fallbackRenderType : _ref5$renderItem,
+    visibleColumnKeys = _ref5.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref5.onVisibleColumnKeysChange,
+    columnCustomSizes = _ref5.columnCustomSizes,
+    onColumnResize = _ref5.onColumnResize,
+    status = _ref5.status,
+    hasNextPage = _ref5.hasNextPage,
+    scrollableContainerHeight = _ref5.scrollableContainerHeight,
+    parentContainerRenderInstanceId = _ref5.parentContainerRenderInstanceId,
+    extensionKey = _ref5.extensionKey;
   var tableId = (0, _react.useMemo)(function () {
     return Symbol('unique-id');
   }, []);
@@ -247,8 +261,8 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   }, [parentContainerRenderInstanceId, status]);
   var visibleSortedColumns = (0, _react.useMemo)(function () {
     return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref5) {
-        var key = _ref5.key;
+      return orderedColumns.find(function (_ref6) {
+        var key = _ref6.key;
         return visibleKey === key;
       });
     }).filter(Boolean);
@@ -263,10 +277,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 (_ref6) {
-      var key = _ref6.key,
-        title = _ref6.title,
-        type = _ref6.type;
+    return visibleSortedColumns.map(function (_ref7) {
+      var key = _ref7.key,
+        title = _ref7.title,
+        type = _ref7.type;
       return {
         key: key,
         content: title,
@@ -308,9 +322,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       return;
     }
     return (0, _combine.combine)((0, _element.monitorForElements)({
-      onDragStart: function onDragStart(_ref7) {
-        var location = _ref7.location,
-          source = _ref7.source;
+      onDragStart: function onDragStart(_ref8) {
+        var location = _ref8.location,
+          source = _ref8.source;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         if (source.data.type === 'table-header') {
           var _containerRef$current;
@@ -326,9 +340,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           });
         }
       },
-      onDrag: function onDrag(_ref8) {
-        var location = _ref8.location,
-          source = _ref8.source;
+      onDrag: function onDrag(_ref9) {
+        var location = _ref9.location,
+          source = _ref9.source;
         if (source.data.type === 'table-header') {
           var _containerRef$current2;
           _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({
@@ -338,9 +352,9 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           });
         }
       },
-      onDrop: function onDrop(_ref9) {
-        var source = _ref9.source,
-          location = _ref9.location;
+      onDrop: function onDrop(_ref10) {
+        var source = _ref10.source,
+          location = _ref10.location;
         _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -375,10 +389,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 (_ref10) {
+        cells: visibleSortedColumns.map(function (_ref11) {
           var _newRowData$key;
-          var key = _ref10.key,
-            type = _ref10.type;
+          var key = _ref11.key,
+            type = _ref11.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) {
@@ -479,10 +493,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     css: [noDefaultBorderStyles, tableHeadStyles]
   }, (0, _react2.jsx)("tr", {
     ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref12, cellIndex) {
-    var key = _ref12.key,
-      content = _ref12.content,
-      width = _ref12.width;
+  }, headerColumns.map(function (_ref13, cellIndex) {
+    var key = _ref13.key,
+      content = _ref13.content,
+      width = _ref13.width;
     var heading = (0, _react2.jsx)(_tooltip.default, {
       content: content,
       tag: "span",
@@ -493,10 +507,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
-      var previewRows = tableRows.map(function (_ref13) {
-        var cells = _ref13.cells;
-        var cell = cells.find(function (_ref14) {
-          var cellKey = _ref14.key;
+      var previewRows = tableRows.map(function (_ref14) {
+        var cells = _ref14.cells;
+        var cell = cells.find(function (_ref15) {
+          var cellKey = _ref15.key;
           return cellKey === key;
         });
         if (cell) {
@@ -538,18 +552,18 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   })))), (0, _react2.jsx)("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref15) {
-    var key = _ref15.key,
-      cells = _ref15.cells,
-      ref = _ref15.ref;
+  }, rows.map(function (_ref16) {
+    var key = _ref16.key,
+      cells = _ref16.cells,
+      ref = _ref16.ref;
     return (0, _react2.jsx)("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref16, cellIndex) {
-      var cellKey = _ref16.key,
-        content = _ref16.content,
-        width = _ref16.width;
+    }, cells.map(function (_ref17, cellIndex) {
+      var cellKey = _ref17.key,
+        content = _ref17.content,
+        width = _ref17.width;
       var loadingRowStyle = shouldUseWidth ? {
         width: width
       } : {

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

@@ -117,17 +117,17 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     }
   }, [selectedOptions, filterOptions, sortedOptions]);
   var sortOptionsOnResolve = (0, _react.useCallback)(function () {
-    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
-    if (sortedOptions.length === 0) {
-      return sortOptionsOnPopupOpen();
-    }
-
     // when the user is searching, we want the search result to be displayed as it is, and the select component will take care of marking the selected items
     if (searchTerm) {
       sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
       return setSortedOptions(filterOptions);
     }
 
+    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
+    if (sortedOptions.length === 0) {
+      return sortOptionsOnPopupOpen();
+    }
+
     // this block handles the pagination, where on pagination, we will just append newOptions to the current list
     if (sortPaginatedResults.current) {
       var newOptions = filterOptions.filter(function (option) {

package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/menu-list/index.js

@@ -15,6 +15,9 @@ var _errorMessage = _interopRequireDefault(require("./errorMessage"));
 var _loadingMessage = _interopRequireDefault(require("./loadingMessage"));
 var _noOptionsMessage = _interopRequireDefault(require("./noOptionsMessage"));
 var _excluded = ["children"];
+var inlineSpinnerStyles = (0, _primitives.xcss)({
+  paddingTop: "var(--ds-space-075, 6px)"
+});
 var CustomMenuList = function CustomMenuList(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -31,7 +34,8 @@ var CustomMenuList = function CustomMenuList(_ref) {
   var isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
   var InlineSpinner = function InlineSpinner() {
     return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
-      justifyContent: "center"
+      justifyContent: "center",
+      xcss: inlineSpinnerStyles
     }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
       size: "medium"
     }));

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JiraSearchContainer = exports.DEFAULT_JQL_QUERY = exports.ALLOWED_ORDER_BY_KEYS = void 0;
+exports.JiraSearchContainer = exports.FILTER_SELECTION_DEBOUNCE_MS = exports.DEFAULT_JQL_QUERY = exports.ALLOWED_ORDER_BY_KEYS = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -18,7 +18,6 @@ var _primitives = require("@atlaskit/primitives");
 var _analytics = require("../../../analytics");
 var _basicFilters = require("../basic-filters");
 var _useHydrateJqlQuery2 = require("../basic-filters/hooks/useHydrateJqlQuery");
-var _asyncPopupSelect = require("../basic-filters/ui/async-popup-select");
 var _isQueryTooComplex = require("../basic-filters/utils/isQueryTooComplex");
 var _basicSearchInput = require("../basic-search-input");
 var _jqlEditor = require("../jql-editor");
@@ -40,7 +39,7 @@ var basicSearchInputContainerStyles = (0, _primitives.xcss)({
 });
 var DEFAULT_JQL_QUERY = exports.DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 var ALLOWED_ORDER_BY_KEYS = exports.ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
-var JiraSearchMethodSwitcher = _modeSwitcher.ModeSwitcher;
+var FILTER_SELECTION_DEBOUNCE_MS = exports.FILTER_SELECTION_DEBOUNCE_MS = 500;
 var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchContainer(props) {
   var isSearching = props.isSearching,
     parameters = props.parameters,
@@ -164,7 +163,7 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
         basicFilterSelections: filterSelections,
         isQueryComplex: isCurrentQueryComplex
       });
-    }, _asyncPopupSelect.SEARCH_DEBOUNCE_MS),
+    }, FILTER_SELECTION_DEBOUNCE_MS),
     _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
     debouncedBasicFilterSelectionChange = _useDebouncedCallback2[0];
   var handleBasicFilterSelectionChange = (0, _react.useCallback)(function (filterType, options) {
@@ -224,7 +223,7 @@ var JiraSearchContainer = exports.JiraSearchContainer = function JiraSearchConta
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: jql
-  }), (0, _react2.jsx)(JiraSearchMethodSwitcher, {
+  }), (0, _react2.jsx)(_modeSwitcher.ModeSwitcher, {
     onOptionValueChange: onSearchMethodChange,
     selectedOptionValue: currentSearchMethod,
     options: [{

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

@@ -65,7 +65,8 @@ var contentContainerStyles = (0, _react2.css)({
   maxHeight: '420px',
   overflow: 'auto',
   borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")")),
-  background: _issueLikeTable.scrollableContainerShadowsCssComponents.background,
+  backgroundImage: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundPosition,
   backgroundRepeat: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundRepeat,
   backgroundSize: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundSize,
   backgroundAttachment: _issueLikeTable.scrollableContainerShadowsCssComponents.backgroundAttachment

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

@@ -20,7 +20,7 @@ var modeSwitcherStyles = (0, _react2.css)({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
   lineHeight: "var(--ds-space-200, 16px)",
-  padding: "var(--ds-space-075, 6px)",
+  padding: "var(--ds-space-050, 4px)",
   '&:disabled': {
     opacity: '0.5'
   },

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.15"
+  packageVersion: "1.19.17"
 };

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

@@ -23,7 +23,7 @@ const tableBordersStyles = css({
   borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
   borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
   borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
-  background: scrollableContainerShadowsCssComponents.background,
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
   backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
   backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
   backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment

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

@@ -15,6 +15,9 @@ const SkeletonComponent = ({
 const tableBodyStyles = css({
   borderBottom: 0
 });
+const tableStyles = css({
+  background: "var(--ds-elevation-surface-current, #FFF)"
+});
 const padding = `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`;
 const cellStyles = css({
   padding,
@@ -105,6 +108,7 @@ export default (({
       boxSizing: 'border-box'
     }
   }, jsx("table", {
+    css: tableStyles,
     "data-testid": testId
   }, jsx("thead", {
     style: {

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

@@ -82,90 +82,101 @@ const tableContainerStyles = css({
 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: `
+  backgroundImage: `
   linear-gradient(
     90deg,
     ${"var(--ds-elevation-surface-current, #FFF)"} 30%,
     rgba(255, 255, 255, 0)
-  ) left center`,
+  )`,
+  backgroundPosition: 'left center',
   size: `40px 100%`,
   attachment: `local`
 };
 const topWhiteOverrideGradient = {
-  background: `
+  backgroundImage: `
   linear-gradient(
     0deg,
     rgba(255, 255, 255, 0),
     ${"var(--ds-elevation-surface-current, #FFF)"} 30%
-  ) top center`,
+  )`,
+  backgroundPosition: 'top center',
   size: `100% 100px`,
   attachment: `local`
 };
 const rightWhiteOverrideGradient = {
-  background: `
+  backgroundImage: `
   linear-gradient(
     90deg,
     rgba(255, 255, 255, 0),
     ${"var(--ds-elevation-surface-current, #FFF)"} 70%
-  ) right center`,
+  )`,
+  backgroundPosition: 'right center',
   size: `40px 100%`,
   attachment: `local`
 };
 const bottomWhiteOverride = {
-  background: `
+  backgroundImage: `
   linear-gradient(
     0deg,
     ${"var(--ds-elevation-surface-current, #FFF)"} 30%,
     rgba(255, 255, 255, 0)
-  ) bottom center`,
+  )`,
+  backgroundPosition: 'bottom center',
   size: `100% 40px`,
   attachment: `local`
 };
 const leftShadowGradient = {
-  background: `
+  backgroundImage: `
   linear-gradient(
     90deg,
     ${shadowColor},
     rgba(0, 0, 0, 0)
-  ) left center`,
+  )`,
+  backgroundPosition: 'left center',
   size: `14px 100%`,
   attachment: `scroll`
 };
 const topShadowGradient = {
-  background: `
+  backgroundImage: `
   linear-gradient(
     0deg,
     rgba(0, 0, 0, 0),
     ${shadowColorLight}
-  ) 0 52px`,
+  )`,
+  backgroundPosition: '0 52px',
   size: `100% 14px`,
   attachment: `scroll`
 };
 const rightShadowGradient = {
-  background: `
+  backgroundImage: `
   linear-gradient(
     90deg,
     rgba(0, 0, 0, 0),
     ${shadowColor}
-  ) right center`,
+  )`,
+  backgroundPosition: 'right center',
   size: `14px 100%`,
   attachment: `scroll`
 };
 const bottomShadowGradient = {
-  background: `
+  backgroundImage: `
   linear-gradient(
     0deg,
     ${shadowColorLight},
     rgba(0, 0, 0, 0)
-  ) bottom center`,
+  )`,
+  backgroundPosition: '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(','),
+  backgroundImage: shadows.map(({
+    backgroundImage
+  }) => backgroundImage).join(','),
+  backgroundPosition: shadows.map(({
+    backgroundPosition
+  }) => backgroundPosition).join(','),
   backgroundRepeat: 'no-repeat',
   backgroundSize: shadows.map(({
     size
@@ -177,7 +188,9 @@ export const scrollableContainerShadowsCssComponents = {
 const scrollableContainerStyles = css({
   overflow: 'auto',
   boxSizing: 'border-box',
-  background: scrollableContainerShadowsCssComponents.background,
+  backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
   backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
   backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
   backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment

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

@@ -73,17 +73,17 @@ const AsyncPopupSelect = ({
     }
   }, [selectedOptions, filterOptions, sortedOptions]);
   const sortOptionsOnResolve = useCallback(() => {
-    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
-    if (sortedOptions.length === 0) {
-      return sortOptionsOnPopupOpen();
-    }
-
     // when the user is searching, we want the search result to be displayed as it is, and the select component will take care of marking the selected items
     if (searchTerm) {
       sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
       return setSortedOptions(filterOptions);
     }
 
+    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
+    if (sortedOptions.length === 0) {
+      return sortOptionsOnPopupOpen();
+    }
+
     // this block handles the pagination, where on pagination, we will just append newOptions to the current list
     if (sortPaginatedResults.current) {
       const newOptions = filterOptions.filter(option => !sortedOptions.find(sortedOption => sortedOption.value === option.value));

package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/menu-list/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
-import { Flex } from '@atlaskit/primitives';
+import { Flex, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 import Spinner from '@atlaskit/spinner';
 import ShowMoreButton from '../async-popup-select/showMoreButton';
 import CustomErrorMessage from './errorMessage';
 import CustomDropdownLoadingMessage from './loadingMessage';
 import CustomNoOptionsMessage from './noOptionsMessage';
+const inlineSpinnerStyles = xcss({
+  paddingTop: "var(--ds-space-075, 6px)"
+});
 const CustomMenuList = ({
   children,
   ...props
@@ -23,7 +26,8 @@ const CustomMenuList = ({
   const shouldDisplayShowMore = showMore && !isLoadingMore;
   const isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
   const InlineSpinner = () => /*#__PURE__*/React.createElement(Flex, {
-    justifyContent: "center"
+    justifyContent: "center",
+    xcss: inlineSpinnerStyles
   }, /*#__PURE__*/React.createElement(Spinner, {
     size: "medium"
   }));

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

@@ -8,7 +8,6 @@ import { Flex, xcss } from '@atlaskit/primitives';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { BasicFilters } from '../basic-filters';
 import { useHydrateJqlQuery } from '../basic-filters/hooks/useHydrateJqlQuery';
-import { SEARCH_DEBOUNCE_MS } from '../basic-filters/ui/async-popup-select';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { BasicSearchInput } from '../basic-search-input';
 import { JiraJQLEditor } from '../jql-editor';
@@ -25,7 +24,7 @@ const basicSearchInputContainerStyles = xcss({
 });
 export const DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 export const ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
-const JiraSearchMethodSwitcher = ModeSwitcher;
+export const FILTER_SELECTION_DEBOUNCE_MS = 500;
 export const JiraSearchContainer = props => {
   const {
     isSearching,
@@ -129,7 +128,7 @@ export const JiraSearchContainer = props => {
       basicFilterSelections: filterSelections,
       isQueryComplex: isCurrentQueryComplex
     });
-  }, SEARCH_DEBOUNCE_MS);
+  }, FILTER_SELECTION_DEBOUNCE_MS);
   const handleBasicFilterSelectionChange = useCallback((filterType, options) => {
     const updatedSelection = {
       ...filterSelections,
@@ -192,7 +191,7 @@ export const JiraSearchContainer = props => {
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: jql
-  }), jsx(JiraSearchMethodSwitcher, {
+  }), jsx(ModeSwitcher, {
     onOptionValueChange: onSearchMethodChange,
     selectedOptionValue: currentSearchMethod,
     options: [{

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

@@ -49,7 +49,8 @@ const contentContainerStyles = css({
   maxHeight: '420px',
   overflow: 'auto',
   borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
-  background: scrollableContainerShadowsCssComponents.background,
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
   backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
   backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
   backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment

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

@@ -12,7 +12,7 @@ const modeSwitcherStyles = css({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
   lineHeight: "var(--ds-space-200, 16px)",
-  padding: "var(--ds-space-075, 6px)",
+  padding: "var(--ds-space-050, 4px)",
   '&:disabled': {
     opacity: '0.5'
   },

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.15"
+  packageVersion: "1.19.17"
 };

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

@@ -23,7 +23,7 @@ var tableBordersStyles = css({
   borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
   borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
   borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")")),
-  background: scrollableContainerShadowsCssComponents.background,
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
   backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
   backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
   backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment

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

@@ -16,6 +16,9 @@ var SkeletonComponent = function SkeletonComponent(_ref) {
 var tableBodyStyles = css({
   borderBottom: 0
 });
+var tableStyles = css({
+  background: "var(--ds-elevation-surface-current, #FFF)"
+});
 var padding = "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)");
 var cellStyles = css({
   padding: padding,
@@ -105,6 +108,7 @@ export default (function (_ref4) {
       boxSizing: 'border-box'
     }
   }, jsx("table", {
+    css: tableStyles,
     "data-testid": testId
   }, jsx("thead", {
     style: {

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

@@ -71,65 +71,79 @@ var tableContainerStyles = css({
 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"),
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 70%\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    ".concat(shadowColor, ",\n    rgba(0, 0, 0, 0)\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColorLight, "\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColor, "\n  )"),
+  backgroundPosition: '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"),
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    ".concat(shadowColorLight, ",\n    rgba(0, 0, 0, 0)\n  )"),
+  backgroundPosition: '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;
+  backgroundImage: shadows.map(function (_ref) {
+    var backgroundImage = _ref.backgroundImage;
+    return backgroundImage;
+  }).join(','),
+  backgroundPosition: shadows.map(function (_ref2) {
+    var backgroundPosition = _ref2.backgroundPosition;
+    return backgroundPosition;
   }).join(','),
   backgroundRepeat: 'no-repeat',
-  backgroundSize: shadows.map(function (_ref2) {
-    var size = _ref2.size;
+  backgroundSize: shadows.map(function (_ref3) {
+    var size = _ref3.size;
     return size;
   }).join(','),
-  backgroundAttachment: shadows.map(function (_ref3) {
-    var attachment = _ref3.attachment;
+  backgroundAttachment: shadows.map(function (_ref4) {
+    var attachment = _ref4.attachment;
     return attachment;
   }).join(',')
 };
 var scrollableContainerStyles = css({
   overflow: 'auto',
   boxSizing: 'border-box',
-  background: scrollableContainerShadowsCssComponents.background,
+  backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
   backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
   backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
   backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
@@ -189,23 +203,23 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-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;
+export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
+  var testId = _ref5.testId,
+    onNextPage = _ref5.onNextPage,
+    onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
+    items = _ref5.items,
+    columns = _ref5.columns,
+    _ref5$renderItem = _ref5.renderItem,
+    renderItem = _ref5$renderItem === void 0 ? fallbackRenderType : _ref5$renderItem,
+    visibleColumnKeys = _ref5.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref5.onVisibleColumnKeysChange,
+    columnCustomSizes = _ref5.columnCustomSizes,
+    onColumnResize = _ref5.onColumnResize,
+    status = _ref5.status,
+    hasNextPage = _ref5.hasNextPage,
+    scrollableContainerHeight = _ref5.scrollableContainerHeight,
+    parentContainerRenderInstanceId = _ref5.parentContainerRenderInstanceId,
+    extensionKey = _ref5.extensionKey;
   var tableId = useMemo(function () {
     return Symbol('unique-id');
   }, []);
@@ -240,8 +254,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
   }, [parentContainerRenderInstanceId, status]);
   var visibleSortedColumns = useMemo(function () {
     return visibleColumnKeys.map(function (visibleKey) {
-      return orderedColumns.find(function (_ref5) {
-        var key = _ref5.key;
+      return orderedColumns.find(function (_ref6) {
+        var key = _ref6.key;
         return visibleKey === key;
       });
     }).filter(Boolean);
@@ -256,10 +270,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
     return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
   }, [columnCustomSizes]);
   var headerColumns = useMemo(function () {
-    return visibleSortedColumns.map(function (_ref6) {
-      var key = _ref6.key,
-        title = _ref6.title,
-        type = _ref6.type;
+    return visibleSortedColumns.map(function (_ref7) {
+      var key = _ref7.key,
+        title = _ref7.title,
+        type = _ref7.type;
       return {
         key: key,
         content: title,
@@ -301,9 +315,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
       return;
     }
     return combine(monitorForElements({
-      onDragStart: function onDragStart(_ref7) {
-        var location = _ref7.location,
-          source = _ref7.source;
+      onDragStart: function onDragStart(_ref8) {
+        var location = _ref8.location,
+          source = _ref8.source;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         if (source.data.type === 'table-header') {
           var _containerRef$current;
@@ -319,9 +333,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
           });
         }
       },
-      onDrag: function onDrag(_ref8) {
-        var location = _ref8.location,
-          source = _ref8.source;
+      onDrag: function onDrag(_ref9) {
+        var location = _ref9.location,
+          source = _ref9.source;
         if (source.data.type === 'table-header') {
           var _containerRef$current2;
           autoScroller.updateInput({
@@ -331,9 +345,9 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
           });
         }
       },
-      onDrop: function onDrop(_ref9) {
-        var source = _ref9.source,
-          location = _ref9.location;
+      onDrop: function onDrop(_ref10) {
+        var source = _ref10.source,
+          location = _ref10.location;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -368,10 +382,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
     return items.map(function (newRowData, rowIndex) {
       return {
         key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
-        cells: visibleSortedColumns.map(function (_ref10) {
+        cells: visibleSortedColumns.map(function (_ref11) {
           var _newRowData$key;
-          var key = _ref10.key,
-            type = _ref10.type;
+          var key = _ref11.key,
+            type = _ref11.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) {
@@ -472,10 +486,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
     css: [noDefaultBorderStyles, tableHeadStyles]
   }, jsx("tr", {
     ref: tableHeaderRowRef
-  }, headerColumns.map(function (_ref12, cellIndex) {
-    var key = _ref12.key,
-      content = _ref12.content,
-      width = _ref12.width;
+  }, headerColumns.map(function (_ref13, cellIndex) {
+    var key = _ref13.key,
+      content = _ref13.content,
+      width = _ref13.width;
     var heading = jsx(Tooltip, {
       content: content,
       tag: "span",
@@ -486,10 +500,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
     }, content));
     if (onVisibleColumnKeysChange && hasData) {
       var _containerRef$current3;
-      var previewRows = tableRows.map(function (_ref13) {
-        var cells = _ref13.cells;
-        var cell = cells.find(function (_ref14) {
-          var cellKey = _ref14.key;
+      var previewRows = tableRows.map(function (_ref14) {
+        var cells = _ref14.cells;
+        var cell = cells.find(function (_ref15) {
+          var cellKey = _ref15.key;
           return cellKey === key;
         });
         if (cell) {
@@ -531,18 +545,18 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref4) {
   })))), jsx("tbody", {
     css: noDefaultBorderStyles,
     "data-testid": testId && "".concat(testId, "--body")
-  }, rows.map(function (_ref15) {
-    var key = _ref15.key,
-      cells = _ref15.cells,
-      ref = _ref15.ref;
+  }, rows.map(function (_ref16) {
+    var key = _ref16.key,
+      cells = _ref16.cells,
+      ref = _ref16.ref;
     return jsx("tr", {
       key: key,
       "data-testid": testId && "".concat(testId, "--row-").concat(key),
       ref: ref
-    }, cells.map(function (_ref16, cellIndex) {
-      var cellKey = _ref16.key,
-        content = _ref16.content,
-        width = _ref16.width;
+    }, cells.map(function (_ref17, cellIndex) {
+      var cellKey = _ref17.key,
+        content = _ref17.content,
+        width = _ref17.width;
       var loadingRowStyle = shouldUseWidth ? {
         width: width
       } : {

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

@@ -107,17 +107,17 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     }
   }, [selectedOptions, filterOptions, sortedOptions]);
   var sortOptionsOnResolve = useCallback(function () {
-    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
-    if (sortedOptions.length === 0) {
-      return sortOptionsOnPopupOpen();
-    }
-
     // when the user is searching, we want the search result to be displayed as it is, and the select component will take care of marking the selected items
     if (searchTerm) {
       sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
       return setSortedOptions(filterOptions);
     }
 
+    // sortedOptions is empty initially, this will take care of setting the initial value and bring the selected items to the top
+    if (sortedOptions.length === 0) {
+      return sortOptionsOnPopupOpen();
+    }
+
     // this block handles the pagination, where on pagination, we will just append newOptions to the current list
     if (sortPaginatedResults.current) {
       var newOptions = filterOptions.filter(function (option) {

package/dist/esm/ui/jira-issues-modal/basic-filters/ui/menu-list/index.js

@@ -1,13 +1,16 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
 import React from 'react';
-import { Flex } from '@atlaskit/primitives';
+import { Flex, xcss } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
 import Spinner from '@atlaskit/spinner';
 import ShowMoreButton from '../async-popup-select/showMoreButton';
 import CustomErrorMessage from './errorMessage';
 import CustomDropdownLoadingMessage from './loadingMessage';
 import CustomNoOptionsMessage from './noOptionsMessage';
+var inlineSpinnerStyles = xcss({
+  paddingTop: "var(--ds-space-075, 6px)"
+});
 var CustomMenuList = function CustomMenuList(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -24,7 +27,8 @@ var CustomMenuList = function CustomMenuList(_ref) {
   var isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
   var InlineSpinner = function InlineSpinner() {
     return /*#__PURE__*/React.createElement(Flex, {
-      justifyContent: "center"
+      justifyContent: "center",
+      xcss: inlineSpinnerStyles
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: "medium"
     }));

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

@@ -14,7 +14,6 @@ import { Flex, xcss } from '@atlaskit/primitives';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { BasicFilters } from '../basic-filters';
 import { useHydrateJqlQuery } from '../basic-filters/hooks/useHydrateJqlQuery';
-import { SEARCH_DEBOUNCE_MS } from '../basic-filters/ui/async-popup-select';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { BasicSearchInput } from '../basic-search-input';
 import { JiraJQLEditor } from '../jql-editor';
@@ -31,7 +30,7 @@ var basicSearchInputContainerStyles = xcss({
 });
 export var DEFAULT_JQL_QUERY = 'created >= -30d order by created DESC';
 export var ALLOWED_ORDER_BY_KEYS = ['key', 'summary', 'assignee', 'status', 'created'];
-var JiraSearchMethodSwitcher = ModeSwitcher;
+export var FILTER_SELECTION_DEBOUNCE_MS = 500;
 export var JiraSearchContainer = function JiraSearchContainer(props) {
   var isSearching = props.isSearching,
     parameters = props.parameters,
@@ -155,7 +154,7 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
         basicFilterSelections: filterSelections,
         isQueryComplex: isCurrentQueryComplex
       });
-    }, SEARCH_DEBOUNCE_MS),
+    }, FILTER_SELECTION_DEBOUNCE_MS),
     _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
     debouncedBasicFilterSelectionChange = _useDebouncedCallback2[0];
   var handleBasicFilterSelectionChange = useCallback(function (filterType, options) {
@@ -215,7 +214,7 @@ export var JiraSearchContainer = function JiraSearchContainer(props) {
     onChange: onQueryChange,
     onSearch: handleSearch,
     query: jql
-  }), jsx(JiraSearchMethodSwitcher, {
+  }), jsx(ModeSwitcher, {
     onOptionValueChange: onSearchMethodChange,
     selectedOptionValue: currentSearchMethod,
     options: [{

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

@@ -56,7 +56,8 @@ var contentContainerStyles = css({
   maxHeight: '420px',
   overflow: 'auto',
   borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")")),
-  background: scrollableContainerShadowsCssComponents.background,
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
   backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
   backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
   backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment

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

@@ -12,7 +12,7 @@ var modeSwitcherStyles = css({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
   lineHeight: "var(--ds-space-200, 16px)",
-  padding: "var(--ds-space-075, 6px)",
+  padding: "var(--ds-space-050, 4px)",
   '&:disabled': {
     opacity: '0.5'
   },

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

@@ -4,7 +4,8 @@ import { jsx } from '@emotion/react';
 import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types/datasource';
 import { IssueLikeDataTableViewProps } from './types';
 export declare const scrollableContainerShadowsCssComponents: {
-    background: string;
+    backgroundImage: string;
+    backgroundPosition: string;
     backgroundRepeat: string;
     backgroundSize: string;
     backgroundAttachment: string;

package/dist/types/ui/jira-issues-modal/jira-search-container/index.d.ts

@@ -4,6 +4,7 @@ import { SelectedOptionsMap } from '../basic-filters/types';
 import { JiraIssueDatasourceParameters, JiraIssueDatasourceParametersQuery } from '../types';
 export declare const DEFAULT_JQL_QUERY = "created >= -30d order by created DESC";
 export declare const ALLOWED_ORDER_BY_KEYS: string[];
+export declare const FILTER_SELECTION_DEBOUNCE_MS = 500;
 export interface SearchContainerProps {
     isSearching?: boolean;
     onSearch: (query: JiraIssueDatasourceParametersQuery, { searchMethod, basicFilterSelections, }: {

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

@@ -4,7 +4,8 @@ import { jsx } from '@emotion/react';
 import { DatasourceResponseSchemaProperty } from '@atlaskit/linking-types/datasource';
 import { IssueLikeDataTableViewProps } from './types';
 export declare const scrollableContainerShadowsCssComponents: {
-    background: string;
+    backgroundImage: string;
+    backgroundPosition: string;
     backgroundRepeat: string;
     backgroundSize: string;
     backgroundAttachment: string;

package/dist/types-ts4.5/ui/jira-issues-modal/jira-search-container/index.d.ts

@@ -4,6 +4,7 @@ import { SelectedOptionsMap } from '../basic-filters/types';
 import { JiraIssueDatasourceParameters, JiraIssueDatasourceParametersQuery } from '../types';
 export declare const DEFAULT_JQL_QUERY = "created >= -30d order by created DESC";
 export declare const ALLOWED_ORDER_BY_KEYS: string[];
+export declare const FILTER_SELECTION_DEBOUNCE_MS = 500;
 export interface SearchContainerProps {
     isSearching?: boolean;
     onSearch: (query: JiraIssueDatasourceParametersQuery, { searchMethod, basicFilterSelections, }: {

package/examples-helpers/hoverableContainer.tsx

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import React from 'react';
+
+import { jsx } from '@emotion/react';
+
+import { Box, xcss } from '@atlaskit/primitives';
+
+const containerStyles = xcss({
+  height: '100%',
+  backgroundColor: 'elevation.surface.overlay',
+  padding: 'space.400',
+  ':hover': {
+    backgroundColor: 'elevation.surface.overlay.hovered',
+  },
+});
+
+// To simulate Jira description's hover background wrapper
+export const HoverableContainer = ({
+  children,
+}: React.PropsWithChildren<{}>) => {
+  return (
+    <Box testId="examples-hoverable-container" xcss={containerStyles}>
+      {children}
+    </Box>
+  );
+};

package/package.json

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