@atlaskit/link-datasource 1.13.2 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/link-datasource
 
+## 1.14.0
+
+### Minor Changes
+
+- [#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
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.13.2
 
 ### 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.13.2"
+  packageVersion: "1.14.0"
 };

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

@@ -12,14 +12,15 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactIntlNext = require("react-intl-next");
+var _useDebounce = require("use-debounce");
 var _select = require("@atlaskit/select");
 var _useFilterOptions2 = require("../../hooks/useFilterOptions");
 var _control = _interopRequireDefault(require("./control"));
 var _dropdownIndicator = _interopRequireDefault(require("./dropdownIndicator"));
 var _footer = _interopRequireDefault(require("./footer"));
 var _formatOptionLabel = _interopRequireDefault(require("./formatOptionLabel"));
+var _loadingMessage = _interopRequireDefault(require("./loadingMessage"));
 var _messages = require("./messages");
 var _trigger = _interopRequireDefault(require("./trigger"));
 var _excluded = ["isOpen"];
@@ -57,9 +58,13 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
     totalCount = _useFilterOptions.totalCount,
     status = _useFilterOptions.status;
-  var handleDebouncedFetchFilterOptions = (0, _react.useMemo)(function () {
-    return (0, _debounce.default)(fetchFilterOptions, SEARCH_DEBOUNCE_MS);
-  }, [fetchFilterOptions]);
+  var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (searchString) {
+      fetchFilterOptions({
+        searchString: searchString
+      });
+    }, SEARCH_DEBOUNCE_MS),
+    _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
+    handleDebouncedFetchFilterOptions = _useDebouncedCallback2[0];
   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) {
@@ -67,9 +72,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
           case 0:
             if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
               setSearchTerm(newSearchTerm);
-              handleDebouncedFetchFilterOptions({
-                searchString: newSearchTerm
-              });
+              handleDebouncedFetchFilterOptions(newSearchTerm);
             }
           case 1:
           case "end":
@@ -129,15 +132,18 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isLoading: isLoading,
+    loadingMessage: _loadingMessage.default,
     placeholder: formatMessage(_messages.asyncPopupSelectMessages.selectPlaceholder),
     components: {
       /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
       Option: _select.CheckboxOption,
       Control: _control.default,
+      DropdownIndicator: _dropdownIndicator.default,
       LoadingIndicator: undefined,
       // disables the three ... indicator in the searchbox when picker is loading
-      DropdownIndicator: _dropdownIndicator.default
+      IndicatorSeparator: undefined // disables the | separator between search input and icon
     },
+
     options: options,
     value: selectedOptions,
     filterOption: noFilterOptions,

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

@@ -0,0 +1,31 @@
+"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 _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _primitives = require("@atlaskit/primitives");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _messages = require("./messages");
+var boxStyles = (0, _primitives.xcss)({
+  height: "var(--ds-space-800, 64px)",
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+var CustomDropdownLoadingMessage = function CustomDropdownLoadingMessage() {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+    testId: "jlol-basic-filter-popup-select--loading-message"
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: boxStyles,
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    size: "large"
+  })), /*#__PURE__*/_react.default.createElement(_heading.default, {
+    level: "h400"
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.asyncPopupSelectMessages.loadingMessage)));
+};
+var _default = exports.default = CustomDropdownLoadingMessage;

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'
+  },
+  loadingMessage: {
+    id: 'linkDataSource.basic-filter.loading-message',
+    defaultMessage: 'Loading...',
+    description: 'The text for when options are being loaded in dropdown'
   }
 };

package/dist/es2019/analytics/constants.js

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

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

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import debounce from 'lodash/debounce';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
+import { useDebouncedCallback } from 'use-debounce';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
 import { useFilterOptions } from '../../hooks/useFilterOptions';
 import CustomControl from './control';
 import CustomDropdownIndicator from './dropdownIndicator';
 import PopupFooter from './footer';
 import formatOptionLabel from './formatOptionLabel';
+import CustomDropdownLoadingMessage from './loadingMessage';
 import { asyncPopupSelectMessages } from './messages';
 import PopupTrigger from './trigger';
 // Needed to disable filtering from react-select
@@ -35,13 +36,15 @@ const AsyncPopupSelect = ({
     filterType,
     cloudId
   });
-  const handleDebouncedFetchFilterOptions = useMemo(() => debounce(fetchFilterOptions, SEARCH_DEBOUNCE_MS), [fetchFilterOptions]);
+  const [handleDebouncedFetchFilterOptions] = useDebouncedCallback(searchString => {
+    fetchFilterOptions({
+      searchString
+    });
+  }, SEARCH_DEBOUNCE_MS);
   const handleInputChange = useCallback(async (newSearchTerm, actionMeta) => {
     if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
       setSearchTerm(newSearchTerm);
-      handleDebouncedFetchFilterOptions({
-        searchString: newSearchTerm
-      });
+      handleDebouncedFetchFilterOptions(newSearchTerm);
     }
   }, [handleDebouncedFetchFilterOptions, searchTerm]);
   const handleOptionSelection = newValue => {
@@ -81,15 +84,18 @@ const AsyncPopupSelect = ({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isLoading: isLoading,
+    loadingMessage: CustomDropdownLoadingMessage,
     placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
     components: {
       /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
       Option: CheckboxOption,
       Control: CustomControl,
+      DropdownIndicator: CustomDropdownIndicator,
       LoadingIndicator: undefined,
       // disables the three ... indicator in the searchbox when picker is loading
-      DropdownIndicator: CustomDropdownIndicator
+      IndicatorSeparator: undefined // disables the | separator between search input and icon
     },
+
     options: options,
     value: selectedOptions,
     filterOption: noFilterOptions,

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import { Flex, Stack, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+import { asyncPopupSelectMessages } from './messages';
+const boxStyles = xcss({
+  height: "var(--ds-space-800, 64px)",
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+const CustomDropdownLoadingMessage = () => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    testId: "jlol-basic-filter-popup-select--loading-message"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: boxStyles,
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large"
+  })), /*#__PURE__*/React.createElement(Heading, {
+    level: "h400"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages.loadingMessage)));
+};
+export default CustomDropdownLoadingMessage;

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'
+  },
+  loadingMessage: {
+    id: 'linkDataSource.basic-filter.loading-message',
+    defaultMessage: 'Loading...',
+    description: 'The text for when options are being loaded in dropdown'
   }
 };

package/dist/esm/analytics/constants.js

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

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

@@ -4,15 +4,16 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["isOpen"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import debounce from 'lodash/debounce';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
+import { useDebouncedCallback } from 'use-debounce';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
 import { useFilterOptions } from '../../hooks/useFilterOptions';
 import CustomControl from './control';
 import CustomDropdownIndicator from './dropdownIndicator';
 import PopupFooter from './footer';
 import formatOptionLabel from './formatOptionLabel';
+import CustomDropdownLoadingMessage from './loadingMessage';
 import { asyncPopupSelectMessages } from './messages';
 import PopupTrigger from './trigger';
 // Needed to disable filtering from react-select
@@ -47,9 +48,13 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     fetchFilterOptions = _useFilterOptions.fetchFilterOptions,
     totalCount = _useFilterOptions.totalCount,
     status = _useFilterOptions.status;
-  var handleDebouncedFetchFilterOptions = useMemo(function () {
-    return debounce(fetchFilterOptions, SEARCH_DEBOUNCE_MS);
-  }, [fetchFilterOptions]);
+  var _useDebouncedCallback = useDebouncedCallback(function (searchString) {
+      fetchFilterOptions({
+        searchString: searchString
+      });
+    }, SEARCH_DEBOUNCE_MS),
+    _useDebouncedCallback2 = _slicedToArray(_useDebouncedCallback, 1),
+    handleDebouncedFetchFilterOptions = _useDebouncedCallback2[0];
   var handleInputChange = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(newSearchTerm, actionMeta) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -57,9 +62,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
           case 0:
             if (actionMeta.action === 'input-change' && newSearchTerm !== searchTerm) {
               setSearchTerm(newSearchTerm);
-              handleDebouncedFetchFilterOptions({
-                searchString: newSearchTerm
-              });
+              handleDebouncedFetchFilterOptions(newSearchTerm);
             }
           case 1:
           case "end":
@@ -119,15 +122,18 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isLoading: isLoading,
+    loadingMessage: CustomDropdownLoadingMessage,
     placeholder: formatMessage(asyncPopupSelectMessages.selectPlaceholder),
     components: {
       /* @ts-expect-error - This component has stricter OptionType, hence a temp setup untill its made generic */
       Option: CheckboxOption,
       Control: CustomControl,
+      DropdownIndicator: CustomDropdownIndicator,
       LoadingIndicator: undefined,
       // disables the three ... indicator in the searchbox when picker is loading
-      DropdownIndicator: CustomDropdownIndicator
+      IndicatorSeparator: undefined // disables the | separator between search input and icon
     },
+
     options: options,
     value: selectedOptions,
     filterOption: noFilterOptions,

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import { Flex, Stack, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+import { asyncPopupSelectMessages } from './messages';
+var boxStyles = xcss({
+  height: "var(--ds-space-800, 64px)",
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+var CustomDropdownLoadingMessage = function CustomDropdownLoadingMessage() {
+  return /*#__PURE__*/React.createElement(Stack, {
+    testId: "jlol-basic-filter-popup-select--loading-message"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: boxStyles,
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large"
+  })), /*#__PURE__*/React.createElement(Heading, {
+    level: "h400"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages.loadingMessage)));
+};
+export default CustomDropdownLoadingMessage;

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'
+  },
+  loadingMessage: {
+    id: 'linkDataSource.basic-filter.loading-message',
+    defaultMessage: 'Loading...',
+    description: 'The text for when options are being loaded in dropdown'
   }
 };

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CustomDropdownLoadingMessage: () => JSX.Element;
+export default CustomDropdownLoadingMessage;

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;
     };
+    loadingMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CustomDropdownLoadingMessage: () => JSX.Element;
+export default CustomDropdownLoadingMessage;

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;
     };
+    loadingMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.13.2",
+  "version": "1.14.0",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/button": "^16.13.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/empty-state": "^7.5.0",
-    "@atlaskit/form": "^8.11.0",
+    "@atlaskit/form": "^9.0.0",
     "@atlaskit/heading": "^1.4.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-object": "^6.3.0",
@@ -56,7 +56,7 @@
     "@atlaskit/pragmatic-drag-and-drop-react-indicator": "^0.17.0",
     "@atlaskit/primitives": "^1.9.0",
     "@atlaskit/select": "^16.7.0",
-    "@atlaskit/smart-card": "^26.41.0",
+    "@atlaskit/smart-card": "^26.42.0",
     "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/tag": "^11.6.0",
     "@atlaskit/textfield": "5.6.8",
@@ -72,6 +72,7 @@
     "lodash": "^4.17.21",
     "react-dom": "^16.8.0",
     "tiny-invariant": "^1.2.0",
+    "use-debounce": "^3.4.0",
     "uuid": "^3.1.0"
   },
   "peerDependencies": {