@atlaskit/link-datasource 1.26.2 → 1.27.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-datasource
 
+## 1.27.0
+
+### Minor Changes
+
+- [#89218](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89218) [`008bd3703560`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/008bd3703560) - Adds DisplayViewDropdown to Confluence Search modal as a common component.
+
+### Patch Changes
+
+- [#89986](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89986) [`73821c4958bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/73821c4958bb) - Add display view dropdown analytics events
+
+## 1.26.3
+
+### Patch Changes
+
+- [#88851](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88851) [`236a86f49825`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/236a86f49825) - The changes here extracts the popup dropdown component into the common folder to be used by mulitple datasource providers, along with adding feature flag for CLOL basic filter rollout.
+
 ## 1.26.2
 
 ### Patch Changes

package/dist/cjs/ui/common/modal/basic-search-input/index.js

@@ -5,24 +5,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BasicSearchInput = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _button = require("@atlaskit/button");
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _analytics = require("../../../../analytics");
 var _messages = require("./messages");
 /** @jsx jsx */
 
-var searchButtonStyles = (0, _react2.css)({
+var searchButtonStyles = (0, _react.css)({
   marginRight: "var(--ds-space-075, 6px)"
 });
-var formStyles = (0, _react2.css)({
+var formStyles = (0, _react.css)({
   flex: 1
 });
-var formWithMaxWidthStyles = (0, _react2.css)({
+var formWithMaxWidthStyles = (0, _react.css)({
   flex: 1,
   maxWidth: 250
 });
@@ -47,21 +45,14 @@ var BasicSearchInput = exports.BasicSearchInput = function BasicSearchInput(_ref
     e.preventDefault();
     handleSearchWithAnalytics();
   };
-  var showBasicFilters = (0, _react.useMemo)(function () {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.show-jlol-basic-filters')) {
-      return true;
-    }
-    return false;
-  }, []);
-  var isFullWidth = fullWidth || !showBasicFilters;
-  return (0, _react2.jsx)("form", {
-    css: isFullWidth ? formStyles : formWithMaxWidthStyles,
+  return (0, _react.jsx)("form", {
+    css: fullWidth ? formStyles : formWithMaxWidthStyles,
     onSubmit: handleFormSubmit
-  }, (0, _react2.jsx)(_textfield.default, {
-    elemAfterInput: (0, _react2.jsx)(_button.LoadingButton, {
+  }, (0, _react.jsx)(_textfield.default, {
+    elemAfterInput: (0, _react.jsx)(_button.LoadingButton, {
       appearance: "primary",
       css: searchButtonStyles,
-      iconBefore: (0, _react2.jsx)(_search.default, {
+      iconBefore: (0, _react.jsx)(_search.default, {
         label: formatMessage(_messages.basicSearchInputMessages.basicTextSearchLabel),
         size: "medium"
       }),

package/dist/cjs/ui/common/modal/count-view-smart-link/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmartLink = exports.SmartCardPlaceholder = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _colors = require("@atlaskit/theme/colors");
+var _link = _interopRequireDefault(require("../../../issue-like-table/render-type/link"));
+/** @jsx jsx */
+
+var placeholderSmartLinkStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-surface-raised, ".concat(_colors.N0, ")"),
+  borderRadius: "var(--ds-border-radius-200, 3px)",
+  boxShadow: '0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
+  color: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
+  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-025, 2px)")
+});
+var smartLinkContainerStyles = (0, _react.css)({
+  paddingLeft: "var(--ds-space-025, 2px)"
+});
+var SmartCardPlaceholder = exports.SmartCardPlaceholder = function SmartCardPlaceholder(_ref) {
+  var placeholderText = _ref.placeholderText;
+  return (0, _react.jsx)("div", {
+    css: smartLinkContainerStyles
+  }, (0, _react.jsx)("span", {
+    "data-testid": "datasource-modal--smart-card-placeholder",
+    css: placeholderSmartLinkStyles
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, placeholderText)));
+};
+var SmartLink = exports.SmartLink = function SmartLink(_ref2) {
+  var url = _ref2.url;
+  return (0, _react.jsx)("div", {
+    css: smartLinkContainerStyles
+  }, (0, _react.jsx)(_link.default, {
+    url: url
+  }));
+};

package/dist/cjs/ui/{jira-issues-modal/modal/jira-display-view-dropdown/jira-display-view-drop-down.js → common/modal/display-view-dropdown/display-view-drop-down.js}

@@ -5,13 +5,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JiraDisplayViewDropDown = void 0;
+exports.DisplayViewDropDown = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _table = _interopRequireDefault(require("@atlaskit/icon/glyph/table"));
 var _primitives = require("@atlaskit/primitives");
-var _messages = require("../messages");
+var _messages = require("./messages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsx jsx */
@@ -35,34 +35,50 @@ var InlineIcon = (0, _react.jsx)("svg", {
   d: "M4 9C2.89543 9 2 9.67155 2 10.5V13.5C2 14.3285 2.89543 15 4 15H20C21.1046 15 22 14.3285 22 13.5V10.5C22 9.67155 21.1046 9 20 9H4ZM4.22222 11.25C4.22222 10.5 4.22222 10.5 5 10.5H7C7.55556 10.5 7.55556 10.5 7.55556 11.25V13C7.55556 13.5 7.55556 13.5 7 13.5H5C4.22222 13.5 4.22222 13.5 4.22222 13V11.25ZM9 12C9 11.7929 9.2239 11.625 9.5 11.625H19.5C19.7761 11.625 20 11.7929 20 12C20 12.2071 19.7761 12.375 19.5 12.375H9.5C9.2239 12.375 9 12.2071 9 12Z",
   fill: 'currentColor'
 }));
-var JiraDisplayViewDropDown = exports.JiraDisplayViewDropDown = function JiraDisplayViewDropDown(_ref) {
+var DisplayViewDropDown = exports.DisplayViewDropDown = function DisplayViewDropDown(_ref) {
   var onViewModeChange = _ref.onViewModeChange,
     viewMode = _ref.viewMode;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var triggerText = viewMode === 'issue' ? formatMessage(_messages.modalMessages.tableViewModeLabel) : formatMessage(_messages.modalMessages.inlineLinkViewModeLabel);
+  // TODO: further refactoring in EDM-9573
+  // temporary fix. transition 'count' to 'inline', 'issue' to 'table'
+  var isJira = viewMode === 'issue' || viewMode === 'count';
+  var isTable = viewMode === 'table' || viewMode === 'issue';
+  var triggerText = isTable ? formatMessage(
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  isJira ? _messages.displayViewDropDownMessages.tableViewModeLabel : _messages.displayViewDropDownMessages.tableViewModeLabelDuplicate) : formatMessage(
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  isJira ? _messages.displayViewDropDownMessages.inlineLinkViewModeLabel : _messages.displayViewDropDownMessages.inlineLinkViewModeLabelDuplicate);
   return (0, _react.jsx)(_dropdownMenu.default, {
     trigger: triggerText,
-    testId: "jira-datasource-modal--view-drop-down"
+    testId: "datasource-modal--view-drop-down"
   }, (0, _react.jsx)(_primitives.Box, {
     xcss: dropDownItemGroupStyles
   }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, (0, _react.jsx)(_dropdownMenu.DropdownItem, {
     testId: "dropdown-item-table",
     onClick: function onClick() {
-      return onViewModeChange('issue');
+      return onViewModeChange(isJira ? 'issue' : 'table');
     },
-    isSelected: viewMode === 'issue',
-    description: formatMessage(_messages.modalMessages.tableViewModeDescription),
+    isSelected: isTable,
+    description: formatMessage(
+    // TODO EDM-9573, remove once EDM-9431 is merged
+    isJira ? _messages.displayViewDropDownMessages.tableViewModeDescription : _messages.displayViewDropDownMessages.tableViewModeDescriptionDuplicate),
     elemBefore: (0, _react.jsx)(_table.default, {
       label: "table icon"
     })
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.tableViewModeLabel)), (0, _react.jsx)(_dropdownMenu.DropdownItem, {
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  , isJira ? _messages.displayViewDropDownMessages.tableViewModeLabel : _messages.displayViewDropDownMessages.tableViewModeLabelDuplicate)), (0, _react.jsx)(_dropdownMenu.DropdownItem, {
     testId: "dropdown-item-inline-link",
     onClick: function onClick() {
-      return onViewModeChange('count');
+      return onViewModeChange(isJira ? 'count' : 'inline');
     },
-    isSelected: viewMode === 'count',
-    description: formatMessage(_messages.modalMessages.inlineLinkViewModeDescription),
+    isSelected: !isTable,
+    description: formatMessage(
+    // TODO EDM-9573, remove once EDM-9431 is merged
+    isJira ? _messages.displayViewDropDownMessages.inlineLinkViewModeDescription : _messages.displayViewDropDownMessages.inlineLinkViewModeDescriptionDuplicate),
     elemBefore: InlineIcon
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.inlineLinkViewModeLabel)))));
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  , isJira ? _messages.displayViewDropDownMessages.inlineLinkViewModeLabel : _messages.displayViewDropDownMessages.inlineLinkViewModeLabelDuplicate)))));
 };

package/dist/cjs/ui/common/modal/display-view-dropdown/messages.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.displayViewDropDownMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var displayViewDropDownMessages = exports.displayViewDropDownMessages = (0, _reactIntlNext.defineMessages)({
+  // TODO EDM-9573
+  // remove duplicate from end of key once EDM-9431 is merged
+  tableViewModeLabelDuplicate: {
+    id: 'linkDataSource.configmodal.tableViewModeLabel',
+    description: 'Display search results as a table',
+    defaultMessage: 'Table'
+  },
+  // remove duplicate from end of key once EDM-9431 is merged
+  tableViewModeDescriptionDuplicate: {
+    id: 'linkDataSource.configmodal.tableViewModeDescription',
+    description: 'Description for table view mode',
+    defaultMessage: 'Display search results as a table'
+  },
+  // remove duplicate from end of key once EDM-9431 is merged
+  inlineLinkViewModeLabelDuplicate: {
+    id: 'linkDataSource.configmodal.inlineLinkViewModeLabel',
+    description: 'Display the number of search results as an inline smart link',
+    defaultMessage: 'Inline link'
+  },
+  // remove duplicate from end of key once EDM-9431 is merged
+  inlineLinkViewModeDescriptionDuplicate: {
+    id: 'linkDataSource.configmodal.inlineLinkViewModeDescription',
+    description: 'Description for inline view mode',
+    defaultMessage: 'Display the number of search results or as an inline smart link'
+  },
+  // delete once EDM-9431 is merged
+  tableViewModeLabel: {
+    id: 'linkDataSource.jira-issues.configmodal.tableViewModeLabel',
+    description: 'Display Jira search results as a table',
+    defaultMessage: 'Table'
+  },
+  // delete once EDM-9431 is merged
+  tableViewModeDescription: {
+    id: 'linkDataSource.jira-issues.configmodal.tableViewModeDescription',
+    description: 'Description for table view mode',
+    defaultMessage: 'Display Jira search results as a table'
+  },
+  // delete once EDM-9431 is merged
+  inlineLinkViewModeLabel: {
+    id: 'linkDataSource.jira-issues.configmodal.inlineLinkViewModeLabel',
+    description: 'Display the number of search results as an inline smart link',
+    defaultMessage: 'Inline link'
+  },
+  // delete once EDM-9431 is merged
+  inlineLinkViewModeDescription: {
+    id: 'linkDataSource.jira-issues.configmodal.inlineLinkViewModeDescription',
+    description: 'Description for inline link view mode',
+    defaultMessage: 'Display the number of search results or as an inline smart link'
+  }
+});

package/dist/cjs/ui/common/modal/popup-select/index.js

@@ -0,0 +1,217 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterPopupSelect = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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 _select = require("@atlaskit/select");
+var _analytics = require("../../../../analytics");
+var _control = _interopRequireDefault(require("./control"));
+var _dropdownIndicator = _interopRequireDefault(require("./dropdownIndicator"));
+var _footer = _interopRequireDefault(require("./footer"));
+var _formatOptionLabel = _interopRequireDefault(require("./formatOptionLabel"));
+var _menuList = _interopRequireDefault(require("./menu-list"));
+var _messages = require("./messages");
+var _trigger = _interopRequireDefault(require("./trigger"));
+var _excluded = ["isOpen"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Needed to disable filtering from react-select
+var noFilterOptions = function noFilterOptions() {
+  return true;
+};
+var FilterPopupSelect = exports.FilterPopupSelect = function FilterPopupSelect(_ref) {
+  var filterName = _ref.filterName,
+    totalCount = _ref.totalCount,
+    status = _ref.status,
+    buttonLabel = _ref.buttonLabel,
+    _ref$showLoading = _ref.showLoading,
+    showLoading = _ref$showLoading === void 0 ? false : _ref$showLoading,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$showHydrating = _ref.showHydrating,
+    showHydrating = _ref$showHydrating === void 0 ? false : _ref$showHydrating,
+    _ref$shouldShowFooter = _ref.shouldShowFooter,
+    shouldShowFooter = _ref$shouldShowFooter === void 0 ? true : _ref$shouldShowFooter,
+    menuListProps = _ref.menuListProps,
+    options = _ref.options,
+    selectedOptions = _ref.selectedOptions,
+    onSelectionChange = _ref.onSelectionChange,
+    onInputChange = _ref.onInputChange,
+    onMenuClose = _ref.onMenuClose,
+    onMenuOpen = _ref.onMenuOpen;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    sortedOptions = _useState4[0],
+    setSortedOptions = _useState4[1];
+  var sortPaginatedResults = (0, _react.useRef)(false); // this is to track pagination for sorting purpose
+
+  var sortOptionsOnPopupOpen = (0, _react.useCallback)(function () {
+    if (selectedOptions.length === 0) {
+      return setSortedOptions(options);
+    }
+    var nonSelectedOptions = options.filter(function (option) {
+      return !selectedOptions.find(function (selectedOption) {
+        return selectedOption.value === option.value;
+      });
+    });
+    var newOptions = [].concat((0, _toConsumableArray2.default)(selectedOptions), (0, _toConsumableArray2.default)(nonSelectedOptions));
+    if (!(0, _isEqual.default)(newOptions, sortedOptions)) {
+      setSortedOptions(newOptions);
+    }
+  }, [selectedOptions, options, sortedOptions]);
+  var sortOptionsOnResolve = (0, _react.useCallback)(function () {
+    // 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(options);
+    }
+
+    // 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 = options.filter(function (option) {
+        return !sortedOptions.find(function (sortedOption) {
+          return sortedOption.value === option.value;
+        });
+      });
+      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;
+    }
+    sortPaginatedResults.current = false; // set to false to indicate pagination resolve action is completed from the sorting perspective
+    sortOptionsOnPopupOpen();
+  }, [options, searchTerm, sortOptionsOnPopupOpen, sortedOptions]);
+  var handleMenuOpen = (0, _react.useCallback)(function () {
+    if (status === 'resolved') {
+      sortOptionsOnPopupOpen();
+    }
+    fireEvent('ui.dropdown.opened.basicSearchDropdown', {
+      filterName: filterName,
+      selectionCount: selectedOptions.length
+    });
+    onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
+  }, [filterName, fireEvent, onMenuOpen, selectedOptions.length, sortOptionsOnPopupOpen, status]);
+  var handleMenuClose = (0, _react.useCallback)(function () {
+    /**
+     * Clearing the search is to ensure that the sortOptionsOnPopupOpen logic does not mess up.
+     * Without this, when the user opens, sortOptionsOnPopupOpen will inject the selected options to the list and the list count and values will be off
+     */
+    if (searchTerm) {
+      setSearchTerm('');
+    }
+    onMenuClose === null || onMenuClose === void 0 || onMenuClose();
+    fireEvent('ui.dropdown.closed.basicSearchDropdown', {
+      filterName: filterName,
+      selectionCount: selectedOptions.length
+    });
+  }, [filterName, fireEvent, onMenuClose, searchTerm, selectedOptions.length]);
+  var handleInputChange = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newSearchTerm, actionMeta) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
+              setSearchTerm(newSearchTerm);
+              onInputChange(newSearchTerm, actionMeta);
+            }
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [onInputChange, searchTerm]);
+  (0, _react.useEffect)(function () {
+    if (status === 'resolved') {
+      sortOptionsOnResolve();
+    }
+    // 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 (status === 'loadingMore') {
+      sortPaginatedResults.current = true;
+    }
+  }, [status]);
+  return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
+    isMulti: true,
+    maxMenuWidth: 300,
+    minMenuWidth: 300,
+    testId: "".concat(filterName, "-popup-select"),
+    inputId: "".concat(filterName, "-popup-select--input")
+    /*
+      this threshold controls the display of the search control (input field for search)
+      if this threshold is less than 0, when typing a search string that returns no results it will not remove the search control
+      if this threshold is 0 or higher, it will remove the search control when there are no results, the user will be unable to clear the search to see more results
+    */,
+    searchThreshold: -1,
+    inputValue: searchTerm,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    isLoading: showLoading,
+    placeholder: formatMessage(_messages.asyncPopupSelectMessages.selectPlaceholder),
+    menuListProps: menuListProps,
+    components: {
+      Option: _select.CheckboxOption,
+      Control: _control.default,
+      MenuList: _menuList.default,
+      DropdownIndicator: _dropdownIndicator.default,
+      LoadingIndicator: undefined,
+      // disables the three ... indicator in the searchbox when picker is loading
+      IndicatorSeparator: undefined // disables the | separator between search input and icon
+    },
+    options: sortedOptions,
+    value: selectedOptions,
+    filterOption: noFilterOptions,
+    formatOptionLabel: _formatOptionLabel.default,
+    onChange: onSelectionChange,
+    onInputChange: handleInputChange,
+    onOpen: handleMenuOpen,
+    onClose: handleMenuClose,
+    target: function target(_ref3) {
+      var isOpen = _ref3.isOpen,
+        triggerProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _extends2.default)({}, triggerProps, {
+        label: buttonLabel,
+        selectedOptions: selectedOptions,
+        isSelected: isOpen,
+        isDisabled: isDisabled,
+        isLoading: showHydrating,
+        testId: filterName
+      }));
+    },
+    footer: shouldShowFooter && /*#__PURE__*/_react.default.createElement(_footer.default, {
+      currentDisplayCount: options.length,
+      totalCount: totalCount
+    })
+  });
+};

package/dist/cjs/ui/{jira-issues-modal/basic-filters/ui → common/modal/popup-select}/menu-list/errorMessage.js

@@ -12,7 +12,7 @@ var _useDebounce = require("use-debounce");
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../../../../analytics");
-var _asyncPopupSelect = require("../async-popup-select");
+var _asyncPopupSelect = require("../../../../jira-issues-modal/basic-filters/ui/async-popup-select");
 var _messages = require("./messages");
 var _selectMessage = _interopRequireDefault(require("./selectMessage"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -30,7 +30,7 @@ var getErrorReasonType = function getErrorReasonType(errors) {
   return 'unknown';
 };
 var CustomErrorMessage = function CustomErrorMessage(_ref3) {
-  var filterType = _ref3.filterType,
+  var filterName = _ref3.filterName,
     errors = _ref3.errors;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
@@ -41,7 +41,7 @@ var CustomErrorMessage = function CustomErrorMessage(_ref3) {
    */
   var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function () {
       fireEvent('ui.error.shown.basicSearchDropdown', {
-        filterType: filterType,
+        filterName: filterName,
         reason: getErrorReasonType(errors)
       });
     }, _asyncPopupSelect.SEARCH_DEBOUNCE_MS),

package/dist/cjs/ui/{jira-issues-modal/basic-filters/ui → common/modal/popup-select}/menu-list/index.js

@@ -10,10 +10,10 @@ 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 _showMoreButton = _interopRequireDefault(require("./showMoreButton"));
 var _excluded = ["children"];
 var inlineSpinnerStyles = (0, _primitives.xcss)({
   paddingTop: 'space.075'
@@ -26,7 +26,7 @@ var CustomMenuList = function CustomMenuList(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _props$selectProps$me = props.selectProps.menuListProps,
-    filterType = _props$selectProps$me.filterType,
+    filterName = _props$selectProps$me.filterName,
     isLoading = _props$selectProps$me.isLoading,
     isLoadingMore = _props$selectProps$me.isLoadingMore,
     isError = _props$selectProps$me.isError,
@@ -50,19 +50,20 @@ var CustomMenuList = function CustomMenuList(_ref) {
     }
     if (isError) {
       return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
-        filterType: filterType,
+        filterName: filterName,
         errors: errors
       });
     }
     if (isEmpty) {
       return /*#__PURE__*/_react.default.createElement(_noOptionsMessage.default, {
-        filterType: filterType
+        filterName: filterName
       });
     }
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, shouldDisplayShowMore && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
       xcss: showMoreButtonBoxStyles
     }, /*#__PURE__*/_react.default.createElement(_showMoreButton.default, {
-      onShowMore: handleShowMore
+      onShowMore: handleShowMore,
+      filterName: filterName
     })), isLoadingMoreData && /*#__PURE__*/_react.default.createElement(InlineSpinner, null));
   };
   return /*#__PURE__*/_react.default.createElement(_select.components.MenuList, props, renderChildren());

package/dist/cjs/ui/{jira-issues-modal/basic-filters/ui → common/modal/popup-select}/menu-list/messages.js

@@ -20,5 +20,10 @@ var asyncPopupSelectMessages = exports.asyncPopupSelectMessages = (0, _reactIntl
     id: 'linkDataSource.basic-filter.error-message',
     defaultMessage: 'Something went wrong',
     description: 'The text for when an error occurs when loading options'
+  },
+  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 → common/modal/popup-select}/menu-list/noOptionsMessage.js

@@ -12,13 +12,13 @@ var _useDebounce = require("use-debounce");
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
 var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../../../../analytics");
-var _asyncPopupSelect = require("../async-popup-select");
+var _asyncPopupSelect = require("../../../../jira-issues-modal/basic-filters/ui/async-popup-select");
 var _messages = require("./messages");
 var _selectMessage = _interopRequireDefault(require("./selectMessage"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var CustomNoOptionsMessage = function CustomNoOptionsMessage(_ref) {
-  var filterType = _ref.filterType;
+  var filterName = _ref.filterName;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
 
@@ -30,7 +30,7 @@ var CustomNoOptionsMessage = function CustomNoOptionsMessage(_ref) {
    */
   var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function () {
       fireEvent('ui.emptyResult.shown.basicSearchDropdown', {
-        filterType: filterType
+        filterName: filterName
       });
     }, _asyncPopupSelect.SEARCH_DEBOUNCE_MS),
     _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),

package/dist/cjs/ui/common/modal/popup-select/menu-list/showMoreButton.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _analytics = require("../../../../../analytics");
+var _messages = require("./messages");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var ShowMoreButton = function ShowMoreButton(_ref) {
+  var onShowMore = _ref.onShowMore,
+    filterName = _ref.filterName;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var handleShowMore = (0, _react.useCallback)(function () {
+    fireEvent('ui.button.clicked.basicSearchDropdown', {
+      filterName: filterName,
+      type: 'showMore'
+    });
+    onShowMore();
+  }, [filterName, fireEvent, onShowMore]);
+  return /*#__PURE__*/_react.default.createElement(_button.default, {
+    onClick: handleShowMore,
+    appearance: "link",
+    testId: "jlol-basic-filter-popup-select--show-more-button"
+  }, formatMessage(_messages.asyncPopupSelectMessages.showMoreMessage));
+};
+var _default = exports.default = ShowMoreButton;

package/dist/cjs/ui/common/modal/popup-select/messages.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.asyncPopupSelectMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var asyncPopupSelectMessages = exports.asyncPopupSelectMessages = (0, _reactIntlNext.defineMessages)({
+  selectPlaceholder: {
+    id: 'linkDataSource.basic-filter.dropdown.select.placeholder',
+    description: 'Placeholder text to be displayed for the search input box.',
+    defaultMessage: 'Search'
+  },
+  paginationDetails: {
+    id: 'linkDataSource.basic-filter.footer.pagination-details',
+    description: 'Text to indicate page count and total count information.',
+    defaultMessage: '{currentDisplayCount} of {totalCount}'
+  }
+});