@atlaskit/link-datasource 1.13.2 → 1.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/analytics/constants.js +1 -1
  3. package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js +16 -8
  4. package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.js +21 -0
  5. package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js +10 -0
  6. package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.js +24 -0
  7. package/dist/cjs/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.js +30 -0
  8. package/dist/es2019/analytics/constants.js +1 -1
  9. package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js +15 -7
  10. package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.js +14 -0
  11. package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js +10 -0
  12. package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.js +17 -0
  13. package/dist/es2019/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.js +24 -0
  14. package/dist/esm/analytics/constants.js +1 -1
  15. package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/index.js +17 -9
  16. package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.js +14 -0
  17. package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.js +10 -0
  18. package/dist/esm/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.js +17 -0
  19. package/dist/esm/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.js +23 -0
  20. package/dist/types/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.d.ts +3 -0
  21. package/dist/types/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.d.ts +10 -0
  22. package/dist/types/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.d.ts +3 -0
  23. package/dist/types/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.d.ts +8 -0
  24. package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/async-popup-select/loadingMessage.d.ts +3 -0
  25. package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/async-popup-select/messages.d.ts +10 -0
  26. package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/async-popup-select/noOptionsMessage.d.ts +3 -0
  27. package/dist/types-ts4.5/ui/jira-issues-modal/basic-filters/ui/custom-select-message/index.d.ts +8 -0
  28. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/link-datasource
2
2
 
3
+ ## 1.14.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#42835](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42835) [`685b3b60d34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/685b3b60d34) - Add empty state UI for basic filter dropdown.
8
+
9
+ ## 1.14.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#42756](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42756) [`89ed621ec92`](https://bitbucket.org/atlassian/atlassian-frontend/commits/89ed621ec92) - Add loading message UI for basic filter dropdown
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
3
19
  ## 1.13.2
4
20
 
5
21
  ### Patch Changes
@@ -7,5 +7,5 @@ exports.packageMetaData = exports.EVENT_CHANNEL = void 0;
7
7
  var EVENT_CHANNEL = exports.EVENT_CHANNEL = 'media';
8
8
  var packageMetaData = exports.packageMetaData = {
9
9
  packageName: "@atlaskit/link-datasource",
10
- packageVersion: "1.13.2"
10
+ packageVersion: "1.14.1"
11
11
  };
@@ -12,15 +12,17 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
12
12
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
13
13
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
14
14
  var _react = _interopRequireWildcard(require("react"));
15
- var _debounce = _interopRequireDefault(require("lodash/debounce"));
16
15
  var _reactIntlNext = require("react-intl-next");
16
+ var _useDebounce = require("use-debounce");
17
17
  var _select = require("@atlaskit/select");
18
18
  var _useFilterOptions2 = require("../../hooks/useFilterOptions");
19
19
  var _control = _interopRequireDefault(require("./control"));
20
20
  var _dropdownIndicator = _interopRequireDefault(require("./dropdownIndicator"));
21
21
  var _footer = _interopRequireDefault(require("./footer"));
22
22
  var _formatOptionLabel = _interopRequireDefault(require("./formatOptionLabel"));
23
+ var _loadingMessage = _interopRequireDefault(require("./loadingMessage"));
23
24
  var _messages = require("./messages");
25
+ var _noOptionsMessage = _interopRequireDefault(require("./noOptionsMessage"));
24
26
  var _trigger = _interopRequireDefault(require("./trigger"));
25
27
  var _excluded = ["isOpen"];
26
28
  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); }
@@ -57,9 +59,13 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
57
59
  fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
58
60
  totalCount = _useFilterOptions.totalCount,
59
61
  status = _useFilterOptions.status;
60
- var handleDebouncedFetchFilterOptions = (0, _react.useMemo)(function () {
61
- return (0, _debounce.default)(fetchFilterOptions, SEARCH_DEBOUNCE_MS);
62
- }, [fetchFilterOptions]);
62
+ var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (searchString) {
63
+ fetchFilterOptions({
64
+ searchString: searchString
65
+ });
66
+ }, SEARCH_DEBOUNCE_MS),
67
+ _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
68
+ handleDebouncedFetchFilterOptions = _useDebouncedCallback2[0];
63
69
  var handleInputChange = (0, _react.useCallback)( /*#__PURE__*/function () {
64
70
  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(newSearchTerm, actionMeta) {
65
71
  return _regenerator.default.wrap(function _callee$(_context) {
@@ -67,9 +73,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
67
73
  case 0:
68
74
  if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
69
75
  setSearchTerm(newSearchTerm);
70
- handleDebouncedFetchFilterOptions({
71
- searchString: newSearchTerm
72
- });
76
+ handleDebouncedFetchFilterOptions(newSearchTerm);
73
77
  }
74
78
  case 1:
75
79
  case "end":
@@ -129,15 +133,19 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
129
133
  closeMenuOnSelect: false,
130
134
  hideSelectedOptions: false,
131
135
  isLoading: isLoading,
136
+ loadingMessage: _loadingMessage.default,
137
+ noOptionsMessage: _noOptionsMessage.default,
132
138
  placeholder: formatMessage(_messages.asyncPopupSelectMessages.selectPlaceholder),
133
139
  components: {
134
140
  /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
135
141
  Option: _select.CheckboxOption,
136
142
  Control: _control.default,
143
+ DropdownIndicator: _dropdownIndicator.default,
137
144
  LoadingIndicator: undefined,
138
145
  // disables the three ... indicator in the searchbox when picker is loading
139
- DropdownIndicator: _dropdownIndicator.default
146
+ IndicatorSeparator: undefined // disables the | separator between search input and icon
140
147
  },
148
+
141
149
  options: options,
142
150
  value: selectedOptions,
143
151
  filterOption: noFilterOptions,
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
10
+ var _customSelectMessage = _interopRequireDefault(require("../custom-select-message"));
11
+ var _messages = require("./messages");
12
+ var CustomDropdownLoadingMessage = function CustomDropdownLoadingMessage() {
13
+ return /*#__PURE__*/_react.default.createElement(_customSelectMessage.default, {
14
+ icon: /*#__PURE__*/_react.default.createElement(_spinner.default, {
15
+ size: "large"
16
+ }),
17
+ message: _messages.asyncPopupSelectMessages.loadingMessage,
18
+ testId: "jlol-basic-filter-popup-select--loading-message"
19
+ });
20
+ };
21
+ var _default = exports.default = CustomDropdownLoadingMessage;
@@ -34,5 +34,15 @@ var asyncPopupSelectMessages = exports.asyncPopupSelectMessages = {
34
34
  id: 'linkDataSource.basic-filter.assignee.label',
35
35
  description: 'Label to be displayed for assignee filter dropdown button.',
36
36
  defaultMessage: 'Assignee'
37
+ },
38
+ loadingMessage: {
39
+ id: 'linkDataSource.basic-filter.loading-message',
40
+ defaultMessage: 'Loading...',
41
+ description: 'The text for when options are being loaded in dropdown'
42
+ },
43
+ noOptionsMessage: {
44
+ id: 'linkDataSource.basic-filter.no-options-message',
45
+ defaultMessage: 'No matches found',
46
+ description: 'The text for when no matches are found in dropdown'
37
47
  }
38
48
  };
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
10
+ var _colors = require("@atlaskit/theme/colors");
11
+ var _customSelectMessage = _interopRequireDefault(require("../custom-select-message"));
12
+ var _messages = require("./messages");
13
+ var CustomNoOptionsMessage = function CustomNoOptionsMessage() {
14
+ return /*#__PURE__*/_react.default.createElement(_customSelectMessage.default, {
15
+ icon: /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
16
+ primaryColor: "var(--ds-icon, ".concat(_colors.N500, ")"),
17
+ size: "xlarge",
18
+ label: ""
19
+ }),
20
+ message: _messages.asyncPopupSelectMessages.noOptionsMessage,
21
+ testId: "jlol-basic-filter-popup-select--no-options-message"
22
+ });
23
+ };
24
+ var _default = exports.default = CustomNoOptionsMessage;
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _reactIntlNext = require("react-intl-next");
10
+ var _heading = _interopRequireDefault(require("@atlaskit/heading"));
11
+ var _primitives = require("@atlaskit/primitives");
12
+ var boxStyles = (0, _primitives.xcss)({
13
+ height: "var(--ds-space-800, 64px)",
14
+ marginBottom: "var(--ds-space-200, 16px)"
15
+ });
16
+ var CustomSelectMessage = function CustomSelectMessage(_ref) {
17
+ var icon = _ref.icon,
18
+ message = _ref.message,
19
+ testId = _ref.testId;
20
+ return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
21
+ testId: testId
22
+ }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
23
+ xcss: boxStyles,
24
+ alignItems: "center",
25
+ justifyContent: "center"
26
+ }, icon), /*#__PURE__*/_react.default.createElement(_heading.default, {
27
+ level: "h400"
28
+ }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, message)));
29
+ };
30
+ var _default = exports.default = CustomSelectMessage;
@@ -1,5 +1,5 @@
1
1
  export const EVENT_CHANNEL = 'media';
2
2
  export const packageMetaData = {
3
3
  packageName: "@atlaskit/link-datasource",
4
- packageVersion: "1.13.2"
4
+ packageVersion: "1.14.1"
5
5
  };
@@ -1,14 +1,16 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
- import debounce from 'lodash/debounce';
2
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
4
3
  import { useIntl } from 'react-intl-next';
4
+ import { useDebouncedCallback } from 'use-debounce';
5
5
  import { CheckboxOption, PopupSelect } from '@atlaskit/select';
6
6
  import { useFilterOptions } from '../../hooks/useFilterOptions';
7
7
  import CustomControl from './control';
8
8
  import CustomDropdownIndicator from './dropdownIndicator';
9
9
  import PopupFooter from './footer';
10
10
  import formatOptionLabel from './formatOptionLabel';
11
+ import CustomDropdownLoadingMessage from './loadingMessage';
11
12
  import { asyncPopupSelectMessages } from './messages';
13
+ import CustomNoOptionsMessage from './noOptionsMessage';
12
14
  import PopupTrigger from './trigger';
13
15
  // Needed to disable filtering from react-select
14
16
  const noFilterOptions = () => true;
@@ -35,13 +37,15 @@ const AsyncPopupSelect = ({
35
37
  filterType,
36
38
  cloudId
37
39
  });
38
- const handleDebouncedFetchFilterOptions = useMemo(() => debounce(fetchFilterOptions, SEARCH_DEBOUNCE_MS), [fetchFilterOptions]);
40
+ const [handleDebouncedFetchFilterOptions] = useDebouncedCallback(searchString => {
41
+ fetchFilterOptions({
42
+ searchString
43
+ });
44
+ }, SEARCH_DEBOUNCE_MS);
39
45
  const handleInputChange = useCallback(async (newSearchTerm, actionMeta) => {
40
46
  if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
41
47
  setSearchTerm(newSearchTerm);
42
- handleDebouncedFetchFilterOptions({
43
- searchString: newSearchTerm
44
- });
48
+ handleDebouncedFetchFilterOptions(newSearchTerm);
45
49
  }
46
50
  }, [handleDebouncedFetchFilterOptions, searchTerm]);
47
51
  const handleOptionSelection = newValue => {
@@ -81,15 +85,19 @@ const AsyncPopupSelect = ({
81
85
  closeMenuOnSelect: false,
82
86
  hideSelectedOptions: false,
83
87
  isLoading: isLoading,
88
+ loadingMessage: CustomDropdownLoadingMessage,
89
+ noOptionsMessage: CustomNoOptionsMessage,
84
90
  placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
85
91
  components: {
86
92
  /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
87
93
  Option: CheckboxOption,
88
94
  Control: CustomControl,
95
+ DropdownIndicator: CustomDropdownIndicator,
89
96
  LoadingIndicator: undefined,
90
97
  // disables the three ... indicator in the searchbox when picker is loading
91
- DropdownIndicator: CustomDropdownIndicator
98
+ IndicatorSeparator: undefined // disables the | separator between search input and icon
92
99
  },
100
+
93
101
  options: options,
94
102
  value: selectedOptions,
95
103
  filterOption: noFilterOptions,
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import Spinner from '@atlaskit/spinner';
3
+ import CustomSelectMessage from '../custom-select-message';
4
+ import { asyncPopupSelectMessages } from './messages';
5
+ const CustomDropdownLoadingMessage = () => {
6
+ return /*#__PURE__*/React.createElement(CustomSelectMessage, {
7
+ icon: /*#__PURE__*/React.createElement(Spinner, {
8
+ size: "large"
9
+ }),
10
+ message: asyncPopupSelectMessages.loadingMessage,
11
+ testId: "jlol-basic-filter-popup-select--loading-message"
12
+ });
13
+ };
14
+ export default CustomDropdownLoadingMessage;
@@ -28,5 +28,15 @@ export const asyncPopupSelectMessages = {
28
28
  id: 'linkDataSource.basic-filter.assignee.label',
29
29
  description: 'Label to be displayed for assignee filter dropdown button.',
30
30
  defaultMessage: 'Assignee'
31
+ },
32
+ loadingMessage: {
33
+ id: 'linkDataSource.basic-filter.loading-message',
34
+ defaultMessage: 'Loading...',
35
+ description: 'The text for when options are being loaded in dropdown'
36
+ },
37
+ noOptionsMessage: {
38
+ id: 'linkDataSource.basic-filter.no-options-message',
39
+ defaultMessage: 'No matches found',
40
+ description: 'The text for when no matches are found in dropdown'
31
41
  }
32
42
  };
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
3
+ import { N500 } from '@atlaskit/theme/colors';
4
+ import CustomSelectMessage from '../custom-select-message';
5
+ import { asyncPopupSelectMessages } from './messages';
6
+ const CustomNoOptionsMessage = () => {
7
+ return /*#__PURE__*/React.createElement(CustomSelectMessage, {
8
+ icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
9
+ primaryColor: `var(--ds-icon, ${N500})`,
10
+ size: "xlarge",
11
+ label: ""
12
+ }),
13
+ message: asyncPopupSelectMessages.noOptionsMessage,
14
+ testId: "jlol-basic-filter-popup-select--no-options-message"
15
+ });
16
+ };
17
+ export default CustomNoOptionsMessage;
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { FormattedMessage } from 'react-intl-next';
3
+ import Heading from '@atlaskit/heading';
4
+ import { Flex, Stack, xcss } from '@atlaskit/primitives';
5
+ const boxStyles = xcss({
6
+ height: "var(--ds-space-800, 64px)",
7
+ marginBottom: "var(--ds-space-200, 16px)"
8
+ });
9
+ const CustomSelectMessage = ({
10
+ icon,
11
+ message,
12
+ testId
13
+ }) => {
14
+ return /*#__PURE__*/React.createElement(Stack, {
15
+ testId: testId
16
+ }, /*#__PURE__*/React.createElement(Flex, {
17
+ xcss: boxStyles,
18
+ alignItems: "center",
19
+ justifyContent: "center"
20
+ }, icon), /*#__PURE__*/React.createElement(Heading, {
21
+ level: "h400"
22
+ }, /*#__PURE__*/React.createElement(FormattedMessage, message)));
23
+ };
24
+ export default CustomSelectMessage;
@@ -1,5 +1,5 @@
1
1
  export var EVENT_CHANNEL = 'media';
2
2
  export var packageMetaData = {
3
3
  packageName: "@atlaskit/link-datasource",
4
- packageVersion: "1.13.2"
4
+ packageVersion: "1.14.1"
5
5
  };
@@ -4,16 +4,18 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
4
4
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
5
  var _excluded = ["isOpen"];
6
6
  import _regeneratorRuntime from "@babel/runtime/regenerator";
7
- import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
8
- import debounce from 'lodash/debounce';
7
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
9
8
  import { useIntl } from 'react-intl-next';
9
+ import { useDebouncedCallback } from 'use-debounce';
10
10
  import { CheckboxOption, PopupSelect } from '@atlaskit/select';
11
11
  import { useFilterOptions } from '../../hooks/useFilterOptions';
12
12
  import CustomControl from './control';
13
13
  import CustomDropdownIndicator from './dropdownIndicator';
14
14
  import PopupFooter from './footer';
15
15
  import formatOptionLabel from './formatOptionLabel';
16
+ import CustomDropdownLoadingMessage from './loadingMessage';
16
17
  import { asyncPopupSelectMessages } from './messages';
18
+ import CustomNoOptionsMessage from './noOptionsMessage';
17
19
  import PopupTrigger from './trigger';
18
20
  // Needed to disable filtering from react-select
19
21
  var noFilterOptions = function noFilterOptions() {
@@ -47,9 +49,13 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
47
49
  fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
48
50
  totalCount = _useFilterOptions.totalCount,
49
51
  status = _useFilterOptions.status;
50
- var handleDebouncedFetchFilterOptions = useMemo(function () {
51
- return debounce(fetchFilterOptions, SEARCH_DEBOUNCE_MS);
52
- }, [fetchFilterOptions]);
52
+ var _useDebouncedCallback = useDebouncedCallback(function (searchString) {
53
+ fetchFilterOptions({
54
+ searchString: searchString
55
+ });
56
+ }, SEARCH_DEBOUNCE_MS),
57
+ _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
58
+ handleDebouncedFetchFilterOptions = _useDebouncedCallback2[0];
53
59
  var handleInputChange = useCallback( /*#__PURE__*/function () {
54
60
  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(newSearchTerm, actionMeta) {
55
61
  return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -57,9 +63,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
57
63
  case 0:
58
64
  if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
59
65
  setSearchTerm(newSearchTerm);
60
- handleDebouncedFetchFilterOptions({
61
- searchString: newSearchTerm
62
- });
66
+ handleDebouncedFetchFilterOptions(newSearchTerm);
63
67
  }
64
68
  case 1:
65
69
  case "end":
@@ -119,15 +123,19 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
119
123
  closeMenuOnSelect: false,
120
124
  hideSelectedOptions: false,
121
125
  isLoading: isLoading,
126
+ loadingMessage: CustomDropdownLoadingMessage,
127
+ noOptionsMessage: CustomNoOptionsMessage,
122
128
  placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
123
129
  components: {
124
130
  /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
125
131
  Option: CheckboxOption,
126
132
  Control: CustomControl,
133
+ DropdownIndicator: CustomDropdownIndicator,
127
134
  LoadingIndicator: undefined,
128
135
  // disables the three ... indicator in the searchbox when picker is loading
129
- DropdownIndicator: CustomDropdownIndicator
136
+ IndicatorSeparator: undefined // disables the | separator between search input and icon
130
137
  },
138
+
131
139
  options: options,
132
140
  value: selectedOptions,
133
141
  filterOption: noFilterOptions,
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import Spinner from '@atlaskit/spinner';
3
+ import CustomSelectMessage from '../custom-select-message';
4
+ import { asyncPopupSelectMessages } from './messages';
5
+ var CustomDropdownLoadingMessage = function CustomDropdownLoadingMessage() {
6
+ return /*#__PURE__*/React.createElement(CustomSelectMessage, {
7
+ icon: /*#__PURE__*/React.createElement(Spinner, {
8
+ size: "large"
9
+ }),
10
+ message: asyncPopupSelectMessages.loadingMessage,
11
+ testId: "jlol-basic-filter-popup-select--loading-message"
12
+ });
13
+ };
14
+ export default CustomDropdownLoadingMessage;
@@ -28,5 +28,15 @@ export var asyncPopupSelectMessages = {
28
28
  id: 'linkDataSource.basic-filter.assignee.label',
29
29
  description: 'Label to be displayed for assignee filter dropdown button.',
30
30
  defaultMessage: 'Assignee'
31
+ },
32
+ loadingMessage: {
33
+ id: 'linkDataSource.basic-filter.loading-message',
34
+ defaultMessage: 'Loading...',
35
+ description: 'The text for when options are being loaded in dropdown'
36
+ },
37
+ noOptionsMessage: {
38
+ id: 'linkDataSource.basic-filter.no-options-message',
39
+ defaultMessage: 'No matches found',
40
+ description: 'The text for when no matches are found in dropdown'
31
41
  }
32
42
  };
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
3
+ import { N500 } from '@atlaskit/theme/colors';
4
+ import CustomSelectMessage from '../custom-select-message';
5
+ import { asyncPopupSelectMessages } from './messages';
6
+ var CustomNoOptionsMessage = function CustomNoOptionsMessage() {
7
+ return /*#__PURE__*/React.createElement(CustomSelectMessage, {
8
+ icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
9
+ primaryColor: "var(--ds-icon, ".concat(N500, ")"),
10
+ size: "xlarge",
11
+ label: ""
12
+ }),
13
+ message: asyncPopupSelectMessages.noOptionsMessage,
14
+ testId: "jlol-basic-filter-popup-select--no-options-message"
15
+ });
16
+ };
17
+ export default CustomNoOptionsMessage;
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import { FormattedMessage } from 'react-intl-next';
3
+ import Heading from '@atlaskit/heading';
4
+ import { Flex, Stack, xcss } from '@atlaskit/primitives';
5
+ var boxStyles = xcss({
6
+ height: "var(--ds-space-800, 64px)",
7
+ marginBottom: "var(--ds-space-200, 16px)"
8
+ });
9
+ var CustomSelectMessage = function CustomSelectMessage(_ref) {
10
+ var icon = _ref.icon,
11
+ message = _ref.message,
12
+ testId = _ref.testId;
13
+ return /*#__PURE__*/React.createElement(Stack, {
14
+ testId: testId
15
+ }, /*#__PURE__*/React.createElement(Flex, {
16
+ xcss: boxStyles,
17
+ alignItems: "center",
18
+ justifyContent: "center"
19
+ }, icon), /*#__PURE__*/React.createElement(Heading, {
20
+ level: "h400"
21
+ }, /*#__PURE__*/React.createElement(FormattedMessage, message)));
22
+ };
23
+ export default CustomSelectMessage;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const CustomDropdownLoadingMessage: () => JSX.Element;
3
+ export default CustomDropdownLoadingMessage;
@@ -29,4 +29,14 @@ export declare const asyncPopupSelectMessages: {
29
29
  description: string;
30
30
  defaultMessage: string;
31
31
  };
32
+ loadingMessage: {
33
+ id: string;
34
+ defaultMessage: string;
35
+ description: string;
36
+ };
37
+ noOptionsMessage: {
38
+ id: string;
39
+ defaultMessage: string;
40
+ description: string;
41
+ };
32
42
  };
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const CustomNoOptionsMessage: () => JSX.Element;
3
+ export default CustomNoOptionsMessage;
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ interface CustomSelectMessageProps {
3
+ icon: React.ReactNode;
4
+ message: object;
5
+ testId: string;
6
+ }
7
+ declare const CustomSelectMessage: ({ icon, message, testId, }: CustomSelectMessageProps) => JSX.Element;
8
+ export default CustomSelectMessage;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const CustomDropdownLoadingMessage: () => JSX.Element;
3
+ export default CustomDropdownLoadingMessage;
@@ -29,4 +29,14 @@ export declare const asyncPopupSelectMessages: {
29
29
  description: string;
30
30
  defaultMessage: string;
31
31
  };
32
+ loadingMessage: {
33
+ id: string;
34
+ defaultMessage: string;
35
+ description: string;
36
+ };
37
+ noOptionsMessage: {
38
+ id: string;
39
+ defaultMessage: string;
40
+ description: string;
41
+ };
32
42
  };
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const CustomNoOptionsMessage: () => JSX.Element;
3
+ export default CustomNoOptionsMessage;
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ interface CustomSelectMessageProps {
3
+ icon: React.ReactNode;
4
+ message: object;
5
+ testId: string;
6
+ }
7
+ declare const CustomSelectMessage: ({ icon, message, testId, }: CustomSelectMessageProps) => JSX.Element;
8
+ export default CustomSelectMessage;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-datasource",
3
- "version": "1.13.2",
3
+ "version": "1.14.1",
4
4
  "description": "UI Components to support linking platform dataset feature",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
36
36
  "@atlaskit/button": "^16.13.0",
37
37
  "@atlaskit/editor-prosemirror": "1.1.0",
38
38
  "@atlaskit/empty-state": "^7.5.0",
39
- "@atlaskit/form": "^8.11.0",
39
+ "@atlaskit/form": "^9.0.0",
40
40
  "@atlaskit/heading": "^1.4.0",
41
41
  "@atlaskit/icon": "^21.12.0",
42
42
  "@atlaskit/icon-object": "^6.3.0",
@@ -56,7 +56,7 @@
56
56
  "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.17.0",
57
57
  "@atlaskit/primitives": "^1.9.0",
58
58
  "@atlaskit/select": "^16.7.0",
59
- "@atlaskit/smart-card": "^26.41.0",
59
+ "@atlaskit/smart-card": "^26.42.0",
60
60
  "@atlaskit/spinner": "^15.6.0",
61
61
  "@atlaskit/tag": "^11.6.0",
62
62
  "@atlaskit/textfield": "5.6.8",
@@ -72,6 +72,7 @@
72
72
  "lodash": "^4.17.21",
73
73
  "react-dom": "^16.8.0",
74
74
  "tiny-invariant": "^1.2.0",
75
+ "use-debounce": "^3.4.0",
75
76
  "uuid": "^3.1.0"
76
77
  },
77
78
  "peerDependencies": {