@atlaskit/link-datasource 1.15.4 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 1.16.0
+
+### Minor Changes
+
+- [#42962](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42962) [`00b9a417c51`](https://bitbucket.org/atlassian/atlassian-frontend/commits/00b9a417c51) - Adds show more button to UI and functionality to fetch more data for datasource basic filters
+
 ## 1.15.4
 
 ### 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.15.4"
+  packageVersion: "1.16.0"
 };

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

@@ -38,28 +38,29 @@ var useFilterOptions = exports.useFilterOptions = function useFilterOptions(_ref
     var _ref3,
       pageCursor,
       searchString,
+      isNewSearch,
       isRequestLikeInitialSearch,
       initialResponseData,
       response,
-      isNewSearch,
       _args = arguments;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _ref3 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, pageCursor = _ref3.pageCursor, searchString = _ref3.searchString;
-          setStatus('loading');
+          isNewSearch = !pageCursor;
+          isNewSearch ? setStatus('loading') : setStatus('loadingMore');
           isRequestLikeInitialSearch = !pageCursor && !searchString;
           initialResponseData = initialData.current;
-          _context.prev = 4;
+          _context.prev = 5;
           if (!(isRequestLikeInitialSearch && initialResponseData)) {
-            _context.next = 9;
+            _context.next = 10;
             break;
           }
           _context.t0 = initialResponseData;
-          _context.next = 12;
+          _context.next = 13;
           break;
-        case 9:
-          _context.next = 11;
+        case 10:
+          _context.next = 12;
           return getFieldValues({
             cloudId: cloudId,
             jql: '',
@@ -67,18 +68,17 @@ var useFilterOptions = exports.useFilterOptions = function useFilterOptions(_ref
             searchString: searchString,
             pageCursor: pageCursor
           });
-        case 11:
-          _context.t0 = _context.sent;
         case 12:
+          _context.t0 = _context.sent;
+        case 13:
           response = _context.t0;
           if (!(response.errors && response.errors.length > 0)) {
-            _context.next = 16;
+            _context.next = 17;
             break;
           }
           setStatus('rejected');
           return _context.abrupt("return");
-        case 16:
-          isNewSearch = !pageCursor;
+        case 17:
           if (isNewSearch) {
             setFilterOptions((0, _transformers.mapFieldValuesToFilterOptions)(response));
             if (isRequestLikeInitialSearch) {
@@ -98,13 +98,13 @@ var useFilterOptions = exports.useFilterOptions = function useFilterOptions(_ref
           break;
         case 23:
           _context.prev = 23;
-          _context.t1 = _context["catch"](4);
+          _context.t1 = _context["catch"](5);
           setStatus('rejected');
         case 26:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[4, 23]]);
+    }, _callee, null, [[5, 23]]);
   })), [cloudId, filterOptions, filterType, getFieldValues]);
   return {
     filterOptions: filterOptions,

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

@@ -57,7 +57,8 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     filterOptions = _useFilterOptions.filterOptions,
     fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
     totalCount = _useFilterOptions.totalCount,
-    status = _useFilterOptions.status;
+    status = _useFilterOptions.status,
+    pageCursor = _useFilterOptions.pageCursor;
   var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (searchString) {
       fetchFilterOptions({
         searchString: searchString
@@ -96,6 +97,14 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       });
     }
   }, [fetchFilterOptions, searchTerm, status]);
+  var handleShowMore = (0, _react.useCallback)(function () {
+    if (pageCursor) {
+      fetchFilterOptions({
+        pageCursor: pageCursor,
+        searchString: searchTerm
+      });
+    }
+  }, [fetchFilterOptions, pageCursor, searchTerm]);
   (0, _react.useEffect)(function () {
     if (status === 'resolved') {
       var _pickerRef$current;
@@ -106,8 +115,11 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   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 shouldShowFooter = status === 'resolved' && filterOptionsLength > 0;
+  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 shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
   var options = isLoading || isError ? [] : filterOptions; // if not set to [], for eg: on loading, no loading UI will be shown
 
   return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
@@ -136,7 +148,10 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
         return /*#__PURE__*/_react.default.createElement(_menuList.default, (0, _extends2.default)({}, props, {
           isError: isError,
           isEmpty: isEmpty,
-          isLoading: isLoading
+          isLoading: isLoading,
+          isLoadingMore: isLoadingMore,
+          showMore: shouldDisplayShowMoreButton,
+          handleShowMore: handleShowMore
         }));
       },
       DropdownIndicator: _dropdownIndicator.default,

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

@@ -34,5 +34,10 @@ var asyncPopupSelectMessages = exports.asyncPopupSelectMessages = {
     id: 'linkDataSource.basic-filter.assignee.label',
     description: 'Label to be displayed for assignee filter dropdown button.',
     defaultMessage: 'Assignee'
+  },
+  showMoreMessage: {
+    id: 'linkDataSource.basic-filter.showMoreButton',
+    defaultMessage: 'Show more',
+    description: 'The text to show more options in dropdown'
   }
 };

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _messages = require("./messages");
+var ShowMoreButton = function ShowMoreButton(_ref) {
+  var onShowMore = _ref.onShowMore;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_button.default, {
+    onClick: onShowMore,
+    appearance: "link",
+    testId: "jlol-basic-filter-popup-select--show-more-button"
+  }, formatMessage(_messages.asyncPopupSelectMessages.showMoreMessage));
+};
+var _default = exports.default = ShowMoreButton;

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

@@ -7,18 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
 var _select = require("@atlaskit/select");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _showMoreButton = _interopRequireDefault(require("../async-popup-select/showMoreButton"));
 var _errorMessage = _interopRequireDefault(require("./errorMessage"));
 var _loadingMessage = _interopRequireDefault(require("./loadingMessage"));
 var _noOptionsMessage = _interopRequireDefault(require("./noOptionsMessage"));
-var _excluded = ["isLoading", "isError", "isEmpty", "children"];
+var _excluded = ["isLoading", "isLoadingMore", "isError", "isEmpty", "showMore", "handleShowMore", "children"];
 var CustomMenuList = function CustomMenuList(_ref) {
   var isLoading = _ref.isLoading,
+    isLoadingMore = _ref.isLoadingMore,
     isError = _ref.isError,
     isEmpty = _ref.isEmpty,
+    showMore = _ref.showMore,
+    handleShowMore = _ref.handleShowMore,
     children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var getChildComponent = function getChildComponent() {
+  var shouldDisplayShowMore = showMore && !isLoadingMore;
+  var isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
+  var InlineSpinner = function InlineSpinner() {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+      justifyContent: "center"
+    }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      size: "medium"
+    }));
+  };
+  var renderChildren = function renderChildren() {
     if (isLoading) {
       return /*#__PURE__*/_react.default.createElement(_loadingMessage.default, null);
     }
@@ -28,8 +43,10 @@ var CustomMenuList = function CustomMenuList(_ref) {
     if (isEmpty) {
       return /*#__PURE__*/_react.default.createElement(_noOptionsMessage.default, null);
     }
-    return children;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, shouldDisplayShowMore && /*#__PURE__*/_react.default.createElement(_showMoreButton.default, {
+      onShowMore: handleShowMore
+    }), isLoadingMoreData && /*#__PURE__*/_react.default.createElement(InlineSpinner, null));
   };
-  return /*#__PURE__*/_react.default.createElement(_select.components.MenuList, props, getChildComponent());
+  return /*#__PURE__*/_react.default.createElement(_select.components.MenuList, props, renderChildren());
 };
 var _default = exports.default = CustomMenuList;

package/dist/es2019/analytics/constants.js

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

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

@@ -17,7 +17,8 @@ export const useFilterOptions = ({
     pageCursor,
     searchString
   } = {}) => {
-    setStatus('loading');
+    const isNewSearch = !pageCursor;
+    isNewSearch ? setStatus('loading') : setStatus('loadingMore');
     const isRequestLikeInitialSearch = !pageCursor && !searchString;
     const {
       current: initialResponseData
@@ -34,7 +35,6 @@ export const useFilterOptions = ({
         setStatus('rejected');
         return;
       }
-      const isNewSearch = !pageCursor;
       if (isNewSearch) {
         setFilterOptions(mapFieldValuesToFilterOptions(response));
         if (isRequestLikeInitialSearch) {

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

@@ -31,7 +31,8 @@ const AsyncPopupSelect = ({
     filterOptions,
     fetchFilterOptions,
     totalCount,
-    status
+    status,
+    pageCursor
   } = useFilterOptions({
     filterType,
     cloudId
@@ -59,6 +60,14 @@ const AsyncPopupSelect = ({
       });
     }
   }, [fetchFilterOptions, searchTerm, status]);
+  const handleShowMore = useCallback(() => {
+    if (pageCursor) {
+      fetchFilterOptions({
+        pageCursor,
+        searchString: searchTerm
+      });
+    }
+  }, [fetchFilterOptions, pageCursor, searchTerm]);
   useEffect(() => {
     if (status === 'resolved') {
       var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2;
@@ -69,8 +78,11 @@ const AsyncPopupSelect = ({
   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 shouldShowFooter = status === 'resolved' && filterOptionsLength > 0;
+  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 shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
   const options = isLoading || isError ? [] : filterOptions; // if not set to [], for eg: on loading, no loading UI will be shown
 
   return /*#__PURE__*/React.createElement(PopupSelect, {
@@ -98,7 +110,10 @@ const AsyncPopupSelect = ({
       MenuList: props => /*#__PURE__*/React.createElement(CustomMenuList, _extends({}, props, {
         isError: isError,
         isEmpty: isEmpty,
-        isLoading: isLoading
+        isLoading: isLoading,
+        isLoadingMore: isLoadingMore,
+        showMore: shouldDisplayShowMoreButton,
+        handleShowMore: handleShowMore
       })),
       DropdownIndicator: CustomDropdownIndicator,
       LoadingIndicator: undefined,

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

@@ -28,5 +28,10 @@ export const asyncPopupSelectMessages = {
     id: 'linkDataSource.basic-filter.assignee.label',
     description: 'Label to be displayed for assignee filter dropdown button.',
     defaultMessage: 'Assignee'
+  },
+  showMoreMessage: {
+    id: 'linkDataSource.basic-filter.showMoreButton',
+    defaultMessage: 'Show more',
+    description: 'The text to show more options in dropdown'
   }
 };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import { asyncPopupSelectMessages } from './messages';
+const ShowMoreButton = ({
+  onShowMore
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(Button, {
+    onClick: onShowMore,
+    appearance: "link",
+    testId: "jlol-basic-filter-popup-select--show-more-button"
+  }, formatMessage(asyncPopupSelectMessages.showMoreMessage));
+};
+export default ShowMoreButton;

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

@@ -1,16 +1,29 @@
 import React from 'react';
+import { Flex } 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 CustomMenuList = ({
   isLoading,
+  isLoadingMore,
   isError,
   isEmpty,
+  showMore,
+  handleShowMore,
   children,
   ...props
 }) => {
-  const getChildComponent = () => {
+  const shouldDisplayShowMore = showMore && !isLoadingMore;
+  const isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
+  const InlineSpinner = () => /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "medium"
+  }));
+  const renderChildren = () => {
     if (isLoading) {
       return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, null);
     }
@@ -20,8 +33,10 @@ const CustomMenuList = ({
     if (isEmpty) {
       return /*#__PURE__*/React.createElement(CustomNoOptionsMessage, null);
     }
-    return children;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children, shouldDisplayShowMore && /*#__PURE__*/React.createElement(ShowMoreButton, {
+      onShowMore: handleShowMore
+    }), isLoadingMoreData && /*#__PURE__*/React.createElement(InlineSpinner, null));
   };
-  return /*#__PURE__*/React.createElement(components.MenuList, props, getChildComponent());
+  return /*#__PURE__*/React.createElement(components.MenuList, props, renderChildren());
 };
 export default CustomMenuList;

package/dist/esm/analytics/constants.js

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

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

@@ -31,28 +31,29 @@ export var useFilterOptions = function useFilterOptions(_ref) {
     var _ref3,
       pageCursor,
       searchString,
+      isNewSearch,
       isRequestLikeInitialSearch,
       initialResponseData,
       response,
-      isNewSearch,
       _args = arguments;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _ref3 = _args.length > 0 && _args[0] !== undefined ? _args[0] : {}, pageCursor = _ref3.pageCursor, searchString = _ref3.searchString;
-          setStatus('loading');
+          isNewSearch = !pageCursor;
+          isNewSearch ? setStatus('loading') : setStatus('loadingMore');
           isRequestLikeInitialSearch = !pageCursor && !searchString;
           initialResponseData = initialData.current;
-          _context.prev = 4;
+          _context.prev = 5;
           if (!(isRequestLikeInitialSearch && initialResponseData)) {
-            _context.next = 9;
+            _context.next = 10;
             break;
           }
           _context.t0 = initialResponseData;
-          _context.next = 12;
+          _context.next = 13;
           break;
-        case 9:
-          _context.next = 11;
+        case 10:
+          _context.next = 12;
           return getFieldValues({
             cloudId: cloudId,
             jql: '',
@@ -60,18 +61,17 @@ export var useFilterOptions = function useFilterOptions(_ref) {
             searchString: searchString,
             pageCursor: pageCursor
           });
-        case 11:
-          _context.t0 = _context.sent;
         case 12:
+          _context.t0 = _context.sent;
+        case 13:
           response = _context.t0;
           if (!(response.errors && response.errors.length > 0)) {
-            _context.next = 16;
+            _context.next = 17;
             break;
           }
           setStatus('rejected');
           return _context.abrupt("return");
-        case 16:
-          isNewSearch = !pageCursor;
+        case 17:
           if (isNewSearch) {
             setFilterOptions(mapFieldValuesToFilterOptions(response));
             if (isRequestLikeInitialSearch) {
@@ -91,13 +91,13 @@ export var useFilterOptions = function useFilterOptions(_ref) {
           break;
         case 23:
           _context.prev = 23;
-          _context.t1 = _context["catch"](4);
+          _context.t1 = _context["catch"](5);
           setStatus('rejected');
         case 26:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[4, 23]]);
+    }, _callee, null, [[5, 23]]);
   })), [cloudId, filterOptions, filterType, getFieldValues]);
   return {
     filterOptions: filterOptions,

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

@@ -47,7 +47,8 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     filterOptions = _useFilterOptions.filterOptions,
     fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
     totalCount = _useFilterOptions.totalCount,
-    status = _useFilterOptions.status;
+    status = _useFilterOptions.status,
+    pageCursor = _useFilterOptions.pageCursor;
   var _useDebouncedCallback = useDebouncedCallback(function (searchString) {
       fetchFilterOptions({
         searchString: searchString
@@ -86,6 +87,14 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
       });
     }
   }, [fetchFilterOptions, searchTerm, status]);
+  var handleShowMore = useCallback(function () {
+    if (pageCursor) {
+      fetchFilterOptions({
+        pageCursor: pageCursor,
+        searchString: searchTerm
+      });
+    }
+  }, [fetchFilterOptions, pageCursor, searchTerm]);
   useEffect(function () {
     if (status === 'resolved') {
       var _pickerRef$current;
@@ -96,8 +105,11 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
   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 shouldShowFooter = status === 'resolved' && filterOptionsLength > 0;
+  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 shouldDisplayShowMoreButton = status === 'resolved' && !!pageCursor && !areAllResultsLoaded;
   var options = isLoading || isError ? [] : filterOptions; // if not set to [], for eg: on loading, no loading UI will be shown
 
   return /*#__PURE__*/React.createElement(PopupSelect, {
@@ -126,7 +138,10 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
         return /*#__PURE__*/React.createElement(CustomMenuList, _extends({}, props, {
           isError: isError,
           isEmpty: isEmpty,
-          isLoading: isLoading
+          isLoading: isLoading,
+          isLoadingMore: isLoadingMore,
+          showMore: shouldDisplayShowMoreButton,
+          handleShowMore: handleShowMore
         }));
       },
       DropdownIndicator: CustomDropdownIndicator,

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

@@ -28,5 +28,10 @@ export var asyncPopupSelectMessages = {
     id: 'linkDataSource.basic-filter.assignee.label',
     description: 'Label to be displayed for assignee filter dropdown button.',
     defaultMessage: 'Assignee'
+  },
+  showMoreMessage: {
+    id: 'linkDataSource.basic-filter.showMoreButton',
+    defaultMessage: 'Show more',
+    description: 'The text to show more options in dropdown'
   }
 };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import { asyncPopupSelectMessages } from './messages';
+var ShowMoreButton = function ShowMoreButton(_ref) {
+  var onShowMore = _ref.onShowMore;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(Button, {
+    onClick: onShowMore,
+    appearance: "link",
+    testId: "jlol-basic-filter-popup-select--show-more-button"
+  }, formatMessage(asyncPopupSelectMessages.showMoreMessage));
+};
+export default ShowMoreButton;

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

@@ -1,17 +1,32 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "isError", "isEmpty", "children"];
+var _excluded = ["isLoading", "isLoadingMore", "isError", "isEmpty", "showMore", "handleShowMore", "children"];
 import React from 'react';
+import { Flex } 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 CustomMenuList = function CustomMenuList(_ref) {
   var isLoading = _ref.isLoading,
+    isLoadingMore = _ref.isLoadingMore,
     isError = _ref.isError,
     isEmpty = _ref.isEmpty,
+    showMore = _ref.showMore,
+    handleShowMore = _ref.handleShowMore,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
-  var getChildComponent = function getChildComponent() {
+  var shouldDisplayShowMore = showMore && !isLoadingMore;
+  var isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
+  var InlineSpinner = function InlineSpinner() {
+    return /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "center"
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "medium"
+    }));
+  };
+  var renderChildren = function renderChildren() {
     if (isLoading) {
       return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, null);
     }
@@ -21,8 +36,10 @@ var CustomMenuList = function CustomMenuList(_ref) {
     if (isEmpty) {
       return /*#__PURE__*/React.createElement(CustomNoOptionsMessage, null);
     }
-    return children;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children, shouldDisplayShowMore && /*#__PURE__*/React.createElement(ShowMoreButton, {
+      onShowMore: handleShowMore
+    }), isLoadingMoreData && /*#__PURE__*/React.createElement(InlineSpinner, null));
   };
-  return /*#__PURE__*/React.createElement(components.MenuList, props, getChildComponent());
+  return /*#__PURE__*/React.createElement(components.MenuList, props, renderChildren());
 };
 export default CustomMenuList;

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

@@ -12,7 +12,7 @@ export interface FilterOptionsState {
     fetchFilterOptions: (prop?: FetchFilterOptionsProps) => Promise<void>;
     totalCount: number;
     pageCursor?: string;
-    status: 'empty' | 'loading' | 'resolved' | 'rejected';
+    status: 'empty' | 'loading' | 'resolved' | 'rejected' | 'loadingMore';
 }
 export declare const useFilterOptions: ({ filterType, cloudId, }: FilterOptionsProps) => FilterOptionsState;
 export {};

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

@@ -29,4 +29,9 @@ export declare const asyncPopupSelectMessages: {
         description: string;
         defaultMessage: string;
     };
+    showMoreMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type ShowMoreButtonProps = {
+    onShowMore: () => void;
+};
+declare const ShowMoreButton: ({ onShowMore }: ShowMoreButtonProps) => JSX.Element;
+export default ShowMoreButton;

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

@@ -4,7 +4,10 @@ import { SelectOption } from '../../types';
 type CustomProps = {
     isError?: boolean;
     isLoading?: boolean;
+    isLoadingMore?: boolean;
     isEmpty?: boolean;
+    showMore?: boolean;
+    handleShowMore: () => void;
 };
-declare const CustomMenuList: ({ isLoading, isError, isEmpty, children, ...props }: MenuListComponentProps<SelectOption, true> & CustomProps) => JSX.Element;
+declare const CustomMenuList: ({ isLoading, isLoadingMore, isError, isEmpty, showMore, handleShowMore, children, ...props }: MenuListComponentProps<SelectOption, true> & CustomProps) => JSX.Element;
 export default CustomMenuList;

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

@@ -12,7 +12,7 @@ export interface FilterOptionsState {
     fetchFilterOptions: (prop?: FetchFilterOptionsProps) => Promise<void>;
     totalCount: number;
     pageCursor?: string;
-    status: 'empty' | 'loading' | 'resolved' | 'rejected';
+    status: 'empty' | 'loading' | 'resolved' | 'rejected' | 'loadingMore';
 }
 export declare const useFilterOptions: ({ filterType, cloudId, }: FilterOptionsProps) => FilterOptionsState;
 export {};

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

@@ -29,4 +29,9 @@ export declare const asyncPopupSelectMessages: {
         description: string;
         defaultMessage: string;
     };
+    showMoreMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type ShowMoreButtonProps = {
+    onShowMore: () => void;
+};
+declare const ShowMoreButton: ({ onShowMore }: ShowMoreButtonProps) => JSX.Element;
+export default ShowMoreButton;

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

@@ -4,7 +4,10 @@ import { SelectOption } from '../../types';
 type CustomProps = {
     isError?: boolean;
     isLoading?: boolean;
+    isLoadingMore?: boolean;
     isEmpty?: boolean;
+    showMore?: boolean;
+    handleShowMore: () => void;
 };
-declare const CustomMenuList: ({ isLoading, isError, isEmpty, children, ...props }: MenuListComponentProps<SelectOption, true> & CustomProps) => JSX.Element;
+declare const CustomMenuList: ({ isLoading, isLoadingMore, isError, isEmpty, showMore, handleShowMore, children, ...props }: MenuListComponentProps<SelectOption, true> & CustomProps) => JSX.Element;
 export default CustomMenuList;

package/package.json

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