@atlaskit/link-datasource 1.17.1 → 1.17.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 1.17.3
+
+### Patch Changes
+
+- [#43122](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43122) [`5690dd4a0d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5690dd4a0d3) - When no onColumnResize is defined OR when columnCustomSizes in readonly more use max-width instead of width
+
+## 1.17.2
+
+### Patch Changes
+
+- [#43143](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43143) [`de7541cc6ab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/de7541cc6ab) - Reset filter selection when site selection changes and fixes a bug when selecting filter values.
+
 ## 1.17.1
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

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

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DraggableTableHeading = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -20,8 +21,8 @@ var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/close
 var _boxWithoutTerminal = require("@atlaskit/pragmatic-drag-and-drop-react-indicator/box-without-terminal");
 var _styled = require("./styled");
 var _index = require("./index");
-/** @jsx jsx */
-
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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; } /** @jsx jsx */
 var verticallyAlignedStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'center',
@@ -207,6 +208,9 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
 
   // Handling column resizing
   (0, _react.useEffect)(function () {
+    if (!onWidthChange) {
+      return;
+    }
     var resizeHandle = columnResizeHandleRef.current;
     (0, _tinyInvariant.default)(resizeHandle);
     var mainHeaderCell = mainHeaderCellRef.current;
@@ -265,18 +269,21 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
   return (0, _react2.jsx)(_styled.TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": "".concat(id, "-column-heading"),
-    style: {
-      width: width,
+    style: _objectSpread({
       cursor: 'grab'
-    }
-  }, (0, _react2.jsx)("div", {
+    }, onWidthChange ? {
+      width: width
+    } : {
+      maxWidth: width
+    })
+  }, onWidthChange ? (0, _react2.jsx)("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {
       height: "".concat(dndPreviewHeight, "px")
     },
     "data-testid": "column-resize-handle"
-  }), (0, _react2.jsx)("div", {
+  }) : null, (0, _react2.jsx)("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {

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

@@ -57,7 +57,6 @@ var scrollableContainerStyles = (0, _react2.css)({
   borderRadius: "var(--ds-border-radius-100, 3px)"
 });
 var tableStyles = (0, _react2.css)({
-  tableLayout: 'fixed',
   // These styles are needed to prevent thead bottom border from scrolling away.
   // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
   borderCollapse: 'separate',
@@ -372,6 +371,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       }
     }, _callee, null, [[3, 9]]);
   })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
+  var shouldUseWidth = onColumnResize || columnCustomSizes;
   return (0, _react2.jsx)("div", {
     /* There is required contentEditable={true} in editor-card-plugin
      * But this brakes how DND works. We set contentEditable={false} to allow DND to work
@@ -385,7 +385,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     } : undefined
   }, (0, _react2.jsx)(_styled2.Table, {
     css: tableStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    style: shouldUseWidth ? {
+      tableLayout: 'fixed'
+    } : {}
   }, (0, _react2.jsx)("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
     css: [noDefaultBorderStyles, tableHeadStyles]
@@ -433,8 +436,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       return (0, _react2.jsx)(_styled2.TableHeading, {
         key: key,
         "data-testid": "".concat(key, "-column-heading"),
-        style: {
+        style: shouldUseWidth ? {
           width: width
+        } : {
+          maxWidth: width
         }
       }, heading);
     }
@@ -459,8 +464,10 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       var cellKey = _ref13.key,
         content = _ref13.content,
         width = _ref13.width;
-      var loadingRowStyle = {
+      var loadingRowStyle = shouldUseWidth ? {
         width: width
+      } : {
+        maxWidth: width
       };
       // extra padding is required around skeleton loader to avoid vertical jumps when data loads
       if (key !== null && key !== void 0 && key.includes('loading')) {

package/dist/cjs/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.js

@@ -112,12 +112,20 @@ var useFilterOptions = exports.useFilterOptions = function useFilterOptions(_ref
       }
     }, _callee, null, [[5, 24]]);
   })), [cloudId, filterOptions, filterType, getFieldValues]);
+  var reset = (0, _react.useCallback)(function () {
+    setStatus('empty');
+    setFilterOptions([]);
+    setTotalCount(0);
+    setNextPageCursor(undefined);
+    initialData.current = undefined;
+  }, []);
   return {
     filterOptions: filterOptions,
     fetchFilterOptions: fetchFilterOptions,
     totalCount: totalCount,
     pageCursor: nextPageCursor,
     status: status,
+    reset: reset,
     errors: status === 'rejected' ? errors : []
   };
 };

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

@@ -13,6 +13,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _reactIntlNext = require("react-intl-next");
 var _useDebounce = require("use-debounce");
 var _select = require("@atlaskit/select");
@@ -38,6 +39,8 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     selection = _ref.selection,
     _ref$onSelectionChang = _ref.onSelectionChange,
     onSelectionChange = _ref$onSelectionChang === void 0 ? function () {} : _ref$onSelectionChang,
+    _ref$onReset = _ref.onReset,
+    resetSelection = _ref$onReset === void 0 ? function () {} : _ref$onReset,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
@@ -50,10 +53,13 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     selectedOptions = _useState4[0],
     setSelectedOptions = _useState4[1];
-  var _useState5 = (0, _react.useState)(selectedOptions),
+  var _useState5 = (0, _react.useState)([]),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     sortedOptions = _useState6[0],
     setSortedOptions = _useState6[1];
+  var currentSiteCloudId = (0, _react.useRef)(cloudId);
+  var sortPaginatedResults = (0, _react.useRef)(false); // this is to track pagination for sorting purpose
+
   var _useFilterOptions = (0, _useFilterOptions2.useFilterOptions)({
       filterType: filterType,
       cloudId: cloudId
@@ -63,6 +69,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     totalCount = _useFilterOptions.totalCount,
     status = _useFilterOptions.status,
     pageCursor = _useFilterOptions.pageCursor,
+    resetHook = _useFilterOptions.reset,
     errors = _useFilterOptions.errors;
   var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (searchString) {
       fetchFilterOptions({
@@ -90,14 +97,12 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [handleDebouncedFetchFilterOptions, searchTerm]);
-  var handleOptionSelection = function handleOptionSelection(newValue) {
-    setSelectedOptions(newValue);
+  var handleOptionSelection = (0, _react.useCallback)(function (newValue) {
     onSelectionChange(newValue);
-  };
+  }, [onSelectionChange]);
   var sortOptionsOnPopupOpen = (0, _react.useCallback)(function () {
     if (selectedOptions.length === 0) {
-      setSortedOptions(filterOptions);
-      return;
+      return setSortedOptions(filterOptions);
     }
     var nonSelectedOptions = filterOptions.filter(function (option) {
       return !selectedOptions.find(function (selectedOption) {
@@ -105,37 +110,41 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       });
     });
     var newOptions = [].concat((0, _toConsumableArray2.default)(selectedOptions), (0, _toConsumableArray2.default)(nonSelectedOptions));
-    setSortedOptions(newOptions);
-  }, [selectedOptions, filterOptions]);
+    if (!(0, _isEqual.default)(newOptions, sortedOptions)) {
+      setSortedOptions(newOptions);
+    }
+  }, [selectedOptions, filterOptions, sortedOptions]);
   var sortOptionsOnResolve = (0, _react.useCallback)(function () {
-    var newOptions = filterOptions.filter(function (option) {
-      return !sortedOptions.find(function (sortedOption) {
-        return sortedOption.value === option.value;
-      });
-    });
-    var shouldSetSortOptions = false;
-    if (sortedOptions.length !== filterOptions.length) {
-      shouldSetSortOptions = true;
-    } else {
-      sortedOptions.forEach(function (sortedOption) {
-        if (!filterOptions.some(function (filterOption) {
-          return filterOption.value === sortedOption.value;
-        })) {
-          shouldSetSortOptions = true;
-        }
-      });
+    // 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);
     }
-    if (shouldSetSortOptions) {
-      var sortedOptionsFiltered = sortedOptions.filter(function (sortedOption) {
-        return filterOptions.some(function (filterOption) {
-          return filterOption.value === sortedOption.value;
+
+    // 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) {
+        return !sortedOptions.find(function (sortedOption) {
+          return sortedOption.value === option.value;
         });
       });
-      setSortedOptions([].concat((0, _toConsumableArray2.default)(sortedOptionsFiltered), (0, _toConsumableArray2.default)(newOptions)));
+      if (newOptions.length > 0) {
+        setSortedOptions([].concat((0, _toConsumableArray2.default)(sortedOptions), (0, _toConsumableArray2.default)(newOptions)));
+      }
+      sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
+      return;
     }
-  }, [filterOptions, sortedOptions]);
+    sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
+    sortOptionsOnPopupOpen();
+  }, [filterOptions, searchTerm, sortOptionsOnPopupOpen, sortedOptions]);
   var handleShowMore = (0, _react.useCallback)(function () {
     if (pageCursor) {
+      sortPaginatedResults.current = true;
       fetchFilterOptions({
         pageCursor: pageCursor,
         searchString: searchTerm
@@ -156,15 +165,31 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     if (status === 'resolved') {
       sortOptionsOnResolve();
     }
-  }, [sortOptionsOnResolve, status]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status]); // we only want the sortOptionsOnResolve to run when there is a status change
+
+  (0, _react.useEffect)(function () {
+    if (currentSiteCloudId.current !== cloudId) {
+      currentSiteCloudId.current = cloudId;
+      setSortedOptions([]);
+      setSearchTerm('');
+      resetHook();
+      resetSelection();
+    }
+  }, [cloudId, resetHook, resetSelection]);
+  (0, _react.useEffect)(function () {
+    if (!(0, _isEqual.default)(selection, selectedOptions)) {
+      setSelectedOptions(selection);
+    }
+  }, [selectedOptions, selection]);
   var filterOptionsLength = filterOptions.length;
   var isError = status === 'rejected';
   var isLoading = status === 'loading' || status === 'empty';
   var isLoadingMore = status === 'loadingMore';
   var isEmpty = status === 'resolved' && filterOptionsLength === 0;
   var popupSelectOptions = isLoading || isError ? [] : sortedOptions; // if not set to [], then on loading, no loading UI will be shown
-  var areAllResultsLoaded = filterOptions.length === totalCount;
-  var shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptions.length > 0; // footer should not disappear when there is an inline spinner for loading more data
+  var areAllResultsLoaded = filterOptionsLength === totalCount;
+  var shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptionsLength > 0; // footer should not disappear when there is an inline spinner for loading more data
   var shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
   return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
     isMulti: true,
@@ -223,7 +248,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       }));
     },
     footer: shouldShowFooter && /*#__PURE__*/_react.default.createElement(_footer.default, {
-      currentDisplayCount: filterOptionsLength,
+      currentDisplayCount: popupSelectOptions.length,
       totalCount: totalCount
     })
   });

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _primitives = require("@atlaskit/primitives");
@@ -13,6 +14,8 @@ var _utils = require("../utils");
 var _asyncPopupSelect = _interopRequireDefault(require("./async-popup-select"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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 availableBasicFilterTypes = ['project', 'issuetype', 'status', 'assignee'];
 var basicFilterContainerStyles = (0, _primitives.xcss)({
   paddingLeft: "var(--ds-space-100, 8px)"
@@ -20,7 +23,7 @@ var basicFilterContainerStyles = (0, _primitives.xcss)({
 var BasicFilterContainer = function BasicFilterContainer(_ref) {
   var jql = _ref.jql,
     cloudId = _ref.cloudId;
-  var _useState = (0, _react.useState)([]),
+  var _useState = (0, _react.useState)({}),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selection = _useState2[0],
     setSelection = _useState2[1];
@@ -29,9 +32,15 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
       // hydrate hook call goes in here
     }
   }, [jql]);
-  var handleSelectionChange = (0, _react.useCallback)(function (options) {
-    setSelection(options);
-  }, [setSelection]);
+  var handleSelectionChange = (0, _react.useCallback)(function (options, filter) {
+    var updatedSelection = _objectSpread(_objectSpread({}, selection), {}, (0, _defineProperty2.default)({}, filter, options));
+    setSelection(updatedSelection);
+  }, [selection]);
+  var handleReset = (0, _react.useCallback)(function () {
+    if (Object.keys(selection).length > 0) {
+      setSelection({});
+    }
+  }, [selection]);
   return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
@@ -41,9 +50,12 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
       cloudId: cloudId,
       filterType: filter,
       key: filter,
-      selection: selection,
+      selection: selection[filter] || [],
       isDisabled: !cloudId,
-      onSelectionChange: handleSelectionChange
+      onSelectionChange: function onSelectionChange(options) {
+        return handleSelectionChange(options, filter);
+      },
+      onReset: handleReset
     });
   }));
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.isValidJql = void 0;
 var _jqlAst = require("@atlaskit/jql-ast");
 var isValidJql = exports.isValidJql = function isValidJql(jql) {
+  var _jast$errors;
   var jast = new _jqlAst.JastBuilder().build(jql);
-  return jast.errors.length === 0;
+  return (jast === null || jast === void 0 || (_jast$errors = jast.errors) === null || _jast$errors === void 0 ? void 0 : _jast$errors.length) === 0;
 };

package/dist/es2019/analytics/constants.js

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

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

@@ -192,6 +192,9 @@ export const DraggableTableHeading = ({
 
   // Handling column resizing
   useEffect(() => {
+    if (!onWidthChange) {
+      return;
+    }
     const resizeHandle = columnResizeHandleRef.current;
     invariant(resizeHandle);
     const mainHeaderCell = mainHeaderCellRef.current;
@@ -255,17 +258,21 @@ export const DraggableTableHeading = ({
     ref: mainHeaderCellRef,
     "data-testid": `${id}-column-heading`,
     style: {
-      width,
-      cursor: 'grab'
+      cursor: 'grab',
+      ...(onWidthChange ? {
+        width
+      } : {
+        maxWidth: width
+      })
     }
-  }, jsx("div", {
+  }, onWidthChange ? jsx("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {
       height: `${dndPreviewHeight}px`
     },
     "data-testid": "column-resize-handle"
-  }), jsx("div", {
+  }) : null, jsx("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {

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

@@ -58,7 +58,6 @@ const scrollableContainerStyles = css({
   borderRadius: "var(--ds-border-radius-100, 3px)"
 });
 const tableStyles = css({
-  tableLayout: 'fixed',
   // These styles are needed to prevent thead bottom border from scrolling away.
   // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
   borderCollapse: 'separate',
@@ -325,6 +324,7 @@ export const IssueLikeDataTableView = ({
       setHasFullSchema(false);
     }
   }, [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
+  const shouldUseWidth = onColumnResize || columnCustomSizes;
   return jsx("div", {
     /* There is required contentEditable={true} in editor-card-plugin
      * But this brakes how DND works. We set contentEditable={false} to allow DND to work
@@ -338,7 +338,10 @@ export const IssueLikeDataTableView = ({
     } : undefined
   }, jsx(Table, {
     css: tableStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    style: shouldUseWidth ? {
+      tableLayout: 'fixed'
+    } : {}
   }, jsx("thead", {
     "data-testid": testId && `${testId}--head`,
     css: [noDefaultBorderStyles, tableHeadStyles]
@@ -387,8 +390,10 @@ export const IssueLikeDataTableView = ({
       return jsx(TableHeading, {
         key: key,
         "data-testid": `${key}-column-heading`,
-        style: {
+        style: shouldUseWidth ? {
           width
+        } : {
+          maxWidth: width
         }
       }, heading);
     }
@@ -414,8 +419,10 @@ export const IssueLikeDataTableView = ({
     content,
     width
   }, cellIndex) => {
-    let loadingRowStyle = {
+    let loadingRowStyle = shouldUseWidth ? {
       width
+    } : {
+      maxWidth: width
     };
     // extra padding is required around skeleton loader to avoid vertical jumps when data loads
     if (key !== null && key !== void 0 && key.includes('loading')) {

package/dist/es2019/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.js

@@ -57,12 +57,20 @@ export const useFilterOptions = ({
       setStatus('rejected');
     }
   }, [cloudId, filterOptions, filterType, getFieldValues]);
+  const reset = useCallback(() => {
+    setStatus('empty');
+    setFilterOptions([]);
+    setTotalCount(0);
+    setNextPageCursor(undefined);
+    initialData.current = undefined;
+  }, []);
   return {
     filterOptions,
     fetchFilterOptions,
     totalCount,
     pageCursor: nextPageCursor,
     status,
+    reset,
     errors: status === 'rejected' ? errors : []
   };
 };

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import isEqual from 'lodash/isEqual';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
@@ -19,6 +20,7 @@ const AsyncPopupSelect = ({
   cloudId,
   selection,
   onSelectionChange = () => {},
+  onReset: resetSelection = () => {},
   isDisabled = false
 }) => {
   const {
@@ -26,13 +28,17 @@ const AsyncPopupSelect = ({
   } = useIntl();
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedOptions, setSelectedOptions] = useState(selection);
-  const [sortedOptions, setSortedOptions] = useState(selectedOptions);
+  const [sortedOptions, setSortedOptions] = useState([]);
+  const currentSiteCloudId = useRef(cloudId);
+  const sortPaginatedResults = useRef(false); // this is to track pagination for sorting purpose
+
   const {
     filterOptions,
     fetchFilterOptions,
     totalCount,
     status,
     pageCursor,
+    reset: resetHook,
     errors
   } = useFilterOptions({
     filterType,
@@ -49,38 +55,46 @@ const AsyncPopupSelect = ({
       handleDebouncedFetchFilterOptions(newSearchTerm);
     }
   }, [handleDebouncedFetchFilterOptions, searchTerm]);
-  const handleOptionSelection = newValue => {
-    setSelectedOptions(newValue);
+  const handleOptionSelection = useCallback(newValue => {
     onSelectionChange(newValue);
-  };
+  }, [onSelectionChange]);
   const sortOptionsOnPopupOpen = useCallback(() => {
     if (selectedOptions.length === 0) {
-      setSortedOptions(filterOptions);
-      return;
+      return setSortedOptions(filterOptions);
     }
     const nonSelectedOptions = filterOptions.filter(option => !selectedOptions.find(selectedOption => selectedOption.value === option.value));
     const newOptions = [...selectedOptions, ...nonSelectedOptions];
-    setSortedOptions(newOptions);
-  }, [selectedOptions, filterOptions]);
+    if (!isEqual(newOptions, sortedOptions)) {
+      setSortedOptions(newOptions);
+    }
+  }, [selectedOptions, filterOptions, sortedOptions]);
   const sortOptionsOnResolve = useCallback(() => {
-    const newOptions = filterOptions.filter(option => !sortedOptions.find(sortedOption => sortedOption.value === option.value));
-    let shouldSetSortOptions = false;
-    if (sortedOptions.length !== filterOptions.length) {
-      shouldSetSortOptions = true;
-    } else {
-      sortedOptions.forEach(sortedOption => {
-        if (!filterOptions.some(filterOption => filterOption.value === sortedOption.value)) {
-          shouldSetSortOptions = true;
-        }
-      });
+    // 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();
     }
-    if (shouldSetSortOptions) {
-      const sortedOptionsFiltered = sortedOptions.filter(sortedOption => filterOptions.some(filterOption => filterOption.value === sortedOption.value));
-      setSortedOptions([...sortedOptionsFiltered, ...newOptions]);
+
+    // 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);
     }
-  }, [filterOptions, sortedOptions]);
+
+    // 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));
+      if (newOptions.length > 0) {
+        setSortedOptions([...sortedOptions, ...newOptions]);
+      }
+      sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
+      return;
+    }
+    sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
+    sortOptionsOnPopupOpen();
+  }, [filterOptions, searchTerm, sortOptionsOnPopupOpen, sortedOptions]);
   const handleShowMore = useCallback(() => {
     if (pageCursor) {
+      sortPaginatedResults.current = true;
       fetchFilterOptions({
         pageCursor,
         searchString: searchTerm
@@ -101,15 +115,31 @@ const AsyncPopupSelect = ({
     if (status === 'resolved') {
       sortOptionsOnResolve();
     }
-  }, [sortOptionsOnResolve, status]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status]); // we only want the sortOptionsOnResolve to run when there is a status change
+
+  useEffect(() => {
+    if (currentSiteCloudId.current !== cloudId) {
+      currentSiteCloudId.current = cloudId;
+      setSortedOptions([]);
+      setSearchTerm('');
+      resetHook();
+      resetSelection();
+    }
+  }, [cloudId, resetHook, resetSelection]);
+  useEffect(() => {
+    if (!isEqual(selection, selectedOptions)) {
+      setSelectedOptions(selection);
+    }
+  }, [selectedOptions, selection]);
   const filterOptionsLength = filterOptions.length;
   const isError = status === 'rejected';
   const isLoading = status === 'loading' || status === 'empty';
   const isLoadingMore = status === 'loadingMore';
   const isEmpty = status === 'resolved' && filterOptionsLength === 0;
   const popupSelectOptions = isLoading || isError ? [] : sortedOptions; // if not set to [], then on loading, no loading UI will be shown
-  const areAllResultsLoaded = filterOptions.length === totalCount;
-  const shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptions.length > 0; // footer should not disappear when there is an inline spinner for loading more data
+  const areAllResultsLoaded = filterOptionsLength === totalCount;
+  const shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptionsLength > 0; // footer should not disappear when there is an inline spinner for loading more data
   const shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
   return /*#__PURE__*/React.createElement(PopupSelect, {
     isMulti: true,
@@ -165,7 +195,7 @@ const AsyncPopupSelect = ({
       isDisabled: isDisabled
     })),
     footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
-      currentDisplayCount: filterOptionsLength,
+      currentDisplayCount: popupSelectOptions.length,
       totalCount: totalCount
     })
   });

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

@@ -10,15 +10,24 @@ const BasicFilterContainer = ({
   jql,
   cloudId
 }) => {
-  const [selection, setSelection] = useState([]);
+  const [selection, setSelection] = useState({});
   useEffect(() => {
     if (isValidJql(jql)) {
       // hydrate hook call goes in here
     }
   }, [jql]);
-  const handleSelectionChange = useCallback(options => {
-    setSelection(options);
-  }, [setSelection]);
+  const handleSelectionChange = useCallback((options, filter) => {
+    const updatedSelection = {
+      ...selection,
+      [filter]: options
+    };
+    setSelection(updatedSelection);
+  }, [selection]);
+  const handleReset = useCallback(() => {
+    if (Object.keys(selection).length > 0) {
+      setSelection({});
+    }
+  }, [selection]);
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
@@ -27,9 +36,10 @@ const BasicFilterContainer = ({
     cloudId: cloudId,
     filterType: filter,
     key: filter,
-    selection: selection,
+    selection: selection[filter] || [],
     isDisabled: !cloudId,
-    onSelectionChange: handleSelectionChange
+    onSelectionChange: options => handleSelectionChange(options, filter),
+    onReset: handleReset
   })));
 };
 export default BasicFilterContainer;

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

@@ -1,5 +1,6 @@
 import { JastBuilder } from '@atlaskit/jql-ast';
 export const isValidJql = jql => {
+  var _jast$errors;
   const jast = new JastBuilder().build(jql);
-  return jast.errors.length === 0;
+  return (jast === null || jast === void 0 ? void 0 : (_jast$errors = jast.errors) === null || _jast$errors === void 0 ? void 0 : _jast$errors.length) === 0;
 };

package/dist/esm/analytics/constants.js

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

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

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { _defineProperty(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; }
 /** @jsx jsx */
 import { useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -199,6 +202,9 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
 
   // Handling column resizing
   useEffect(function () {
+    if (!onWidthChange) {
+      return;
+    }
     var resizeHandle = columnResizeHandleRef.current;
     invariant(resizeHandle);
     var mainHeaderCell = mainHeaderCellRef.current;
@@ -257,18 +263,21 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": "".concat(id, "-column-heading"),
-    style: {
-      width: width,
+    style: _objectSpread({
       cursor: 'grab'
-    }
-  }, jsx("div", {
+    }, onWidthChange ? {
+      width: width
+    } : {
+      maxWidth: width
+    })
+  }, onWidthChange ? jsx("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {
       height: "".concat(dndPreviewHeight, "px")
     },
     "data-testid": "column-resize-handle"
-  }), jsx("div", {
+  }) : null, jsx("div", {
     ref: dropTargetRef,
     css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {

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

@@ -50,7 +50,6 @@ var scrollableContainerStyles = css({
   borderRadius: "var(--ds-border-radius-100, 3px)"
 });
 var tableStyles = css({
-  tableLayout: 'fixed',
   // These styles are needed to prevent thead bottom border from scrolling away.
   // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
   borderCollapse: 'separate',
@@ -365,6 +364,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       }
     }, _callee, null, [[3, 9]]);
   })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
+  var shouldUseWidth = onColumnResize || columnCustomSizes;
   return jsx("div", {
     /* There is required contentEditable={true} in editor-card-plugin
      * But this brakes how DND works. We set contentEditable={false} to allow DND to work
@@ -378,7 +378,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
     } : undefined
   }, jsx(Table, {
     css: tableStyles,
-    "data-testid": testId
+    "data-testid": testId,
+    style: shouldUseWidth ? {
+      tableLayout: 'fixed'
+    } : {}
   }, jsx("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
     css: [noDefaultBorderStyles, tableHeadStyles]
@@ -426,8 +429,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       return jsx(TableHeading, {
         key: key,
         "data-testid": "".concat(key, "-column-heading"),
-        style: {
+        style: shouldUseWidth ? {
           width: width
+        } : {
+          maxWidth: width
         }
       }, heading);
     }
@@ -452,8 +457,10 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref) {
       var cellKey = _ref13.key,
         content = _ref13.content,
         width = _ref13.width;
-      var loadingRowStyle = {
+      var loadingRowStyle = shouldUseWidth ? {
         width: width
+      } : {
+        maxWidth: width
       };
       // extra padding is required around skeleton loader to avoid vertical jumps when data loads
       if (key !== null && key !== void 0 && key.includes('loading')) {

package/dist/esm/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.js

@@ -105,12 +105,20 @@ export var useFilterOptions = function useFilterOptions(_ref) {
       }
     }, _callee, null, [[5, 24]]);
   })), [cloudId, filterOptions, filterType, getFieldValues]);
+  var reset = useCallback(function () {
+    setStatus('empty');
+    setFilterOptions([]);
+    setTotalCount(0);
+    setNextPageCursor(undefined);
+    initialData.current = undefined;
+  }, []);
   return {
     filterOptions: filterOptions,
     fetchFilterOptions: fetchFilterOptions,
     totalCount: totalCount,
     pageCursor: nextPageCursor,
     status: status,
+    reset: reset,
     errors: status === 'rejected' ? errors : []
   };
 };

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

@@ -5,7 +5,8 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["isOpen"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import isEqual from 'lodash/isEqual';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
@@ -28,6 +29,8 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     selection = _ref.selection,
     _ref$onSelectionChang = _ref.onSelectionChange,
     onSelectionChange = _ref$onSelectionChang === void 0 ? function () {} : _ref$onSelectionChang,
+    _ref$onReset = _ref.onReset,
+    resetSelection = _ref$onReset === void 0 ? function () {} : _ref$onReset,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var _useIntl = useIntl(),
@@ -40,10 +43,13 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     selectedOptions = _useState4[0],
     setSelectedOptions = _useState4[1];
-  var _useState5 = useState(selectedOptions),
+  var _useState5 = useState([]),
     _useState6 = _slicedToArray(_useState5, 2),
     sortedOptions = _useState6[0],
     setSortedOptions = _useState6[1];
+  var currentSiteCloudId = useRef(cloudId);
+  var sortPaginatedResults = useRef(false); // this is to track pagination for sorting purpose
+
   var _useFilterOptions = useFilterOptions({
       filterType: filterType,
       cloudId: cloudId
@@ -53,6 +59,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     totalCount = _useFilterOptions.totalCount,
     status = _useFilterOptions.status,
     pageCursor = _useFilterOptions.pageCursor,
+    resetHook = _useFilterOptions.reset,
     errors = _useFilterOptions.errors;
   var _useDebouncedCallback = useDebouncedCallback(function (searchString) {
       fetchFilterOptions({
@@ -80,14 +87,12 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [handleDebouncedFetchFilterOptions, searchTerm]);
-  var handleOptionSelection = function handleOptionSelection(newValue) {
-    setSelectedOptions(newValue);
+  var handleOptionSelection = useCallback(function (newValue) {
     onSelectionChange(newValue);
-  };
+  }, [onSelectionChange]);
   var sortOptionsOnPopupOpen = useCallback(function () {
     if (selectedOptions.length === 0) {
-      setSortedOptions(filterOptions);
-      return;
+      return setSortedOptions(filterOptions);
     }
     var nonSelectedOptions = filterOptions.filter(function (option) {
       return !selectedOptions.find(function (selectedOption) {
@@ -95,37 +100,41 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       });
     });
     var newOptions = [].concat(_toConsumableArray(selectedOptions), _toConsumableArray(nonSelectedOptions));
-    setSortedOptions(newOptions);
-  }, [selectedOptions, filterOptions]);
+    if (!isEqual(newOptions, sortedOptions)) {
+      setSortedOptions(newOptions);
+    }
+  }, [selectedOptions, filterOptions, sortedOptions]);
   var sortOptionsOnResolve = useCallback(function () {
-    var newOptions = filterOptions.filter(function (option) {
-      return !sortedOptions.find(function (sortedOption) {
-        return sortedOption.value === option.value;
-      });
-    });
-    var shouldSetSortOptions = false;
-    if (sortedOptions.length !== filterOptions.length) {
-      shouldSetSortOptions = true;
-    } else {
-      sortedOptions.forEach(function (sortedOption) {
-        if (!filterOptions.some(function (filterOption) {
-          return filterOption.value === sortedOption.value;
-        })) {
-          shouldSetSortOptions = true;
-        }
-      });
+    // 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);
     }
-    if (shouldSetSortOptions) {
-      var sortedOptionsFiltered = sortedOptions.filter(function (sortedOption) {
-        return filterOptions.some(function (filterOption) {
-          return filterOption.value === sortedOption.value;
+
+    // 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) {
+        return !sortedOptions.find(function (sortedOption) {
+          return sortedOption.value === option.value;
         });
       });
-      setSortedOptions([].concat(_toConsumableArray(sortedOptionsFiltered), _toConsumableArray(newOptions)));
+      if (newOptions.length > 0) {
+        setSortedOptions([].concat(_toConsumableArray(sortedOptions), _toConsumableArray(newOptions)));
+      }
+      sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
+      return;
     }
-  }, [filterOptions, sortedOptions]);
+    sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
+    sortOptionsOnPopupOpen();
+  }, [filterOptions, searchTerm, sortOptionsOnPopupOpen, sortedOptions]);
   var handleShowMore = useCallback(function () {
     if (pageCursor) {
+      sortPaginatedResults.current = true;
       fetchFilterOptions({
         pageCursor: pageCursor,
         searchString: searchTerm
@@ -146,15 +155,31 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     if (status === 'resolved') {
       sortOptionsOnResolve();
     }
-  }, [sortOptionsOnResolve, status]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status]); // we only want the sortOptionsOnResolve to run when there is a status change
+
+  useEffect(function () {
+    if (currentSiteCloudId.current !== cloudId) {
+      currentSiteCloudId.current = cloudId;
+      setSortedOptions([]);
+      setSearchTerm('');
+      resetHook();
+      resetSelection();
+    }
+  }, [cloudId, resetHook, resetSelection]);
+  useEffect(function () {
+    if (!isEqual(selection, selectedOptions)) {
+      setSelectedOptions(selection);
+    }
+  }, [selectedOptions, selection]);
   var filterOptionsLength = filterOptions.length;
   var isError = status === 'rejected';
   var isLoading = status === 'loading' || status === 'empty';
   var isLoadingMore = status === 'loadingMore';
   var isEmpty = status === 'resolved' && filterOptionsLength === 0;
   var popupSelectOptions = isLoading || isError ? [] : sortedOptions; // if not set to [], then on loading, no loading UI will be shown
-  var areAllResultsLoaded = filterOptions.length === totalCount;
-  var shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptions.length > 0; // footer should not disappear when there is an inline spinner for loading more data
+  var areAllResultsLoaded = filterOptionsLength === totalCount;
+  var shouldShowFooter = (status === 'resolved' || isLoadingMore) && filterOptionsLength > 0; // footer should not disappear when there is an inline spinner for loading more data
   var shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
   return /*#__PURE__*/React.createElement(PopupSelect, {
     isMulti: true,
@@ -213,7 +238,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       }));
     },
     footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
-      currentDisplayCount: filterOptionsLength,
+      currentDisplayCount: popupSelectOptions.length,
       totalCount: totalCount
     })
   });

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

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { _defineProperty(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; }
 import React, { useCallback, useEffect, useState } from 'react';
 import { Flex, xcss } from '@atlaskit/primitives';
 import { isValidJql } from '../utils';
@@ -10,7 +13,7 @@ var basicFilterContainerStyles = xcss({
 var BasicFilterContainer = function BasicFilterContainer(_ref) {
   var jql = _ref.jql,
     cloudId = _ref.cloudId;
-  var _useState = useState([]),
+  var _useState = useState({}),
     _useState2 = _slicedToArray(_useState, 2),
     selection = _useState2[0],
     setSelection = _useState2[1];
@@ -19,9 +22,15 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
       // hydrate hook call goes in here
     }
   }, [jql]);
-  var handleSelectionChange = useCallback(function (options) {
-    setSelection(options);
-  }, [setSelection]);
+  var handleSelectionChange = useCallback(function (options, filter) {
+    var updatedSelection = _objectSpread(_objectSpread({}, selection), {}, _defineProperty({}, filter, options));
+    setSelection(updatedSelection);
+  }, [selection]);
+  var handleReset = useCallback(function () {
+    if (Object.keys(selection).length > 0) {
+      setSelection({});
+    }
+  }, [selection]);
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: basicFilterContainerStyles,
     gap: "space.100",
@@ -31,9 +40,12 @@ var BasicFilterContainer = function BasicFilterContainer(_ref) {
       cloudId: cloudId,
       filterType: filter,
       key: filter,
-      selection: selection,
+      selection: selection[filter] || [],
       isDisabled: !cloudId,
-      onSelectionChange: handleSelectionChange
+      onSelectionChange: function onSelectionChange(options) {
+        return handleSelectionChange(options, filter);
+      },
+      onReset: handleReset
     });
   }));
 };

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

@@ -1,5 +1,6 @@
 import { JastBuilder } from '@atlaskit/jql-ast';
 export var isValidJql = function isValidJql(jql) {
+  var _jast$errors;
   var jast = new JastBuilder().build(jql);
-  return jast.errors.length === 0;
+  return (jast === null || jast === void 0 || (_jast$errors = jast.errors) === null || _jast$errors === void 0 ? void 0 : _jast$errors.length) === 0;
 };

package/dist/types/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.d.ts

@@ -10,6 +10,7 @@ export interface FetchFilterOptionsProps {
 export interface FilterOptionsState {
     filterOptions: SelectOption[];
     fetchFilterOptions: (prop?: FetchFilterOptionsProps) => Promise<void>;
+    reset: () => void;
     totalCount: number;
     pageCursor?: string;
     status: 'empty' | 'loading' | 'resolved' | 'rejected' | 'loadingMore';

package/dist/types/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.d.ts

@@ -5,8 +5,9 @@ export interface AsyncPopupSelectProps {
     cloudId: string;
     selection: SelectOption[];
     onSelectionChange?: (selection: SelectOption[]) => void;
+    onReset?: () => void;
     isDisabled?: boolean;
 }
 export declare const SEARCH_DEBOUNCE_MS = 350;
-declare const AsyncPopupSelect: ({ filterType, cloudId, selection, onSelectionChange, isDisabled, }: AsyncPopupSelectProps) => JSX.Element;
+declare const AsyncPopupSelect: ({ filterType, cloudId, selection, onSelectionChange, onReset: resetSelection, isDisabled, }: AsyncPopupSelectProps) => JSX.Element;
 export default AsyncPopupSelect;

package/dist/types/ui/jira-issues-modal/basic-filters/ui/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface BasicFilterContainerProps {
+export interface BasicFilterContainerProps {
     jql: string;
     cloudId: string;
 }

package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/hooks/useFilterOptions.d.ts

@@ -10,6 +10,7 @@ export interface FetchFilterOptionsProps {
 export interface FilterOptionsState {
     filterOptions: SelectOption[];
     fetchFilterOptions: (prop?: FetchFilterOptionsProps) => Promise<void>;
+    reset: () => void;
     totalCount: number;
     pageCursor?: string;
     status: 'empty' | 'loading' | 'resolved' | 'rejected' | 'loadingMore';

package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.d.ts

@@ -5,8 +5,9 @@ export interface AsyncPopupSelectProps {
     cloudId: string;
     selection: SelectOption[];
     onSelectionChange?: (selection: SelectOption[]) => void;
+    onReset?: () => void;
     isDisabled?: boolean;
 }
 export declare const SEARCH_DEBOUNCE_MS = 350;
-declare const AsyncPopupSelect: ({ filterType, cloudId, selection, onSelectionChange, isDisabled, }: AsyncPopupSelectProps) => JSX.Element;
+declare const AsyncPopupSelect: ({ filterType, cloudId, selection, onSelectionChange, onReset: resetSelection, isDisabled, }: AsyncPopupSelectProps) => JSX.Element;
 export default AsyncPopupSelect;

package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface BasicFilterContainerProps {
+export interface BasicFilterContainerProps {
     jql: string;
     cloudId: string;
 }

package/examples-helpers/buildIssueLikeTable.tsx

@@ -22,6 +22,7 @@ mockDatasourceFetchRequests();
 
 interface Props {
   isReadonly?: boolean;
+  canResizeColumns?: boolean;
 }
 
 const TableViewWrapper = styled.div`
@@ -32,7 +33,7 @@ const TableViewWrapper = styled.div`
   height: 100%;
 `;
 
-const ExampleBody = ({ isReadonly }: Props) => {
+const ExampleBody = ({ isReadonly, canResizeColumns = true }: Props) => {
   const parameters = useMemo<JiraIssueDatasourceParameters>(
     () => ({
       cloudId: 'some-cloud-id',
@@ -90,7 +91,9 @@ const ExampleBody = ({ isReadonly }: Props) => {
           onVisibleColumnKeysChange={
             isReadonly ? undefined : setVisibleColumnKeys
           }
-          onColumnResize={isReadonly ? undefined : onColumnResize}
+          onColumnResize={
+            isReadonly || !canResizeColumns ? undefined : onColumnResize
+          }
           columnCustomSizes={columnCustomSizes}
         />
       ) : (
@@ -100,11 +103,17 @@ const ExampleBody = ({ isReadonly }: Props) => {
   );
 };
 
-export const ExampleIssueLikeTable = ({ isReadonly }: Props) => {
+export const ExampleIssueLikeTable = ({
+  isReadonly,
+  canResizeColumns,
+}: Props) => {
   return (
     <IntlProvider locale="en">
       <SmartCardProvider client={new SmartLinkClient()}>
-        <ExampleBody isReadonly={isReadonly} />
+        <ExampleBody
+          isReadonly={isReadonly}
+          canResizeColumns={canResizeColumns}
+        />
       </SmartCardProvider>
     </IntlProvider>
   );

package/package.json

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