@atlaskit/link-datasource 1.17.9 → 1.17.11

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/link-datasource
 
+## 1.17.11
+
+### Patch Changes
+
+- [#43451](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43451) [`50a08b74209`](https://bitbucket.org/atlassian/atlassian-frontend/commits/50a08b74209) - Add loading state for the basic filter trigger button
+- Updated dependencies
+
+## 1.17.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.17.9
 
 ### Patch Changes

package/dist/cjs/analytics/constants.js

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

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

@@ -196,6 +196,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     }
   }, [selectedOptions, selection]);
   var filterOptionsLength = filterOptions.length;
+  var isJQLHydrating = false;
   var isError = status === 'rejected';
   var isLoading = status === 'loading' || status === 'empty';
   var isLoadingMore = status === 'loadingMore';
@@ -257,7 +258,8 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
         filterType: filterType,
         selectedOptions: selectedOptions,
         isSelected: isOpen,
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        isLoading: isJQLHydrating
       }));
     },
     footer: shouldShowFooter && /*#__PURE__*/_react.default.createElement(_footer.default, {

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

@@ -5,14 +5,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.LoadingStateAnimationWrapper = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactIntlNext = require("react-intl-next");
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _primitives = require("@atlaskit/primitives");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _messages = require("./messages");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,23 +26,47 @@ var triggerButtonLabelStyles = (0, _primitives.xcss)({
 var badgeStyles = (0, _primitives.xcss)({
   marginLeft: 'space.050'
 });
+var LoadingStateAnimationWrapper = exports.LoadingStateAnimationWrapper = _styled.default.div({
+  position: 'relative',
+  animation: 'flickerAnimation 2s infinite',
+  '@keyframes flickerAnimation': {
+    '0%': {
+      opacity: 1
+    },
+    '50%': {
+      opacity: 0.5
+    },
+    '100%': {
+      opacity: 1
+    }
+  }
+});
 var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var filterType = _ref.filterType,
     isSelected = _ref.isSelected,
     isDisabled = _ref.isDisabled,
-    onClick = _ref.onClick,
+    isLoading = _ref.isLoading,
     selectedOptions = _ref.selectedOptions;
   var _ref2 = selectedOptions || [],
     _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
     firstOption = _ref3[0];
+  var testId = "jlol-basic-filter-".concat(filterType, "-trigger");
   var hasOptions = selectedOptions && selectedOptions.length > 0;
+  var showButtonLoading = !isDisabled && isLoading;
+  if (showButtonLoading) {
+    return /*#__PURE__*/_react.default.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      iconAfter: /*#__PURE__*/_react.default.createElement(_spinner.default, {
+        size: 'xsmall'
+      }),
+      testId: testId
+    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.asyncPopupSelectMessages["".concat(filterType, "Label")])));
+  }
   return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     ref: ref,
     appearance: "default",
     isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
-    onClick: onClick,
-    testId: "jlol-basic-filter-".concat(filterType, "-trigger"),
+    testId: testId,
     iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
       label: ""
     })

package/dist/es2019/analytics/constants.js

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

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

@@ -147,6 +147,7 @@ const AsyncPopupSelect = ({
     }
   }, [selectedOptions, selection]);
   const filterOptionsLength = filterOptions.length;
+  const isJQLHydrating = false;
   const isError = status === 'rejected';
   const isLoading = status === 'loading' || status === 'empty';
   const isLoadingMore = status === 'loadingMore';
@@ -208,7 +209,8 @@ const AsyncPopupSelect = ({
       filterType: filterType,
       selectedOptions: selectedOptions,
       isSelected: isOpen,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      isLoading: isJQLHydrating
     })),
     footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {
       currentDisplayCount: popupSelectOptions.length,

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

@@ -1,9 +1,11 @@
 import React, { forwardRef } from 'react';
+import styled from '@emotion/styled';
 import { FormattedMessage } from 'react-intl-next';
 import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { Box, Flex, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
 import { asyncPopupSelectMessages } from './messages';
 const triggerButtonLabelStyles = xcss({
   textOverflow: 'ellipsis',
@@ -13,22 +15,46 @@ const triggerButtonLabelStyles = xcss({
 const badgeStyles = xcss({
   marginLeft: 'space.050'
 });
+export const LoadingStateAnimationWrapper = styled.div({
+  position: 'relative',
+  animation: 'flickerAnimation 2s infinite',
+  '@keyframes flickerAnimation': {
+    '0%': {
+      opacity: 1
+    },
+    '50%': {
+      opacity: 0.5
+    },
+    '100%': {
+      opacity: 1
+    }
+  }
+});
 const PopupTrigger = /*#__PURE__*/forwardRef(({
   filterType,
   isSelected,
   isDisabled,
-  onClick,
+  isLoading,
   selectedOptions
 }, ref) => {
   const [firstOption] = selectedOptions || [];
+  const testId = `jlol-basic-filter-${filterType}-trigger`;
   const hasOptions = selectedOptions && selectedOptions.length > 0;
+  const showButtonLoading = !isDisabled && isLoading;
+  if (showButtonLoading) {
+    return /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
+      iconAfter: /*#__PURE__*/React.createElement(Spinner, {
+        size: 'xsmall'
+      }),
+      testId: testId
+    }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages[`${filterType}Label`])));
+  }
   return /*#__PURE__*/React.createElement(Button, {
     ref: ref,
     appearance: "default",
     isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
-    onClick: onClick,
-    testId: `jlol-basic-filter-${filterType}-trigger`,
+    testId: testId,
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: ""
     })

package/dist/esm/analytics/constants.js

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

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

@@ -186,6 +186,7 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
     }
   }, [selectedOptions, selection]);
   var filterOptionsLength = filterOptions.length;
+  var isJQLHydrating = false;
   var isError = status === 'rejected';
   var isLoading = status === 'loading' || status === 'empty';
   var isLoadingMore = status === 'loadingMore';
@@ -247,7 +248,8 @@ var AsyncPopupSelect = function AsyncPopupSelect(_ref) {
         filterType: filterType,
         selectedOptions: selectedOptions,
         isSelected: isOpen,
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        isLoading: isJQLHydrating
       }));
     },
     footer: shouldShowFooter && /*#__PURE__*/React.createElement(PopupFooter, {

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

@@ -1,10 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { forwardRef } from 'react';
+import styled from '@emotion/styled';
 import { FormattedMessage } from 'react-intl-next';
 import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { Box, Flex, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
 import { asyncPopupSelectMessages } from './messages';
 var triggerButtonLabelStyles = xcss({
   textOverflow: 'ellipsis',
@@ -14,23 +16,47 @@ var triggerButtonLabelStyles = xcss({
 var badgeStyles = xcss({
   marginLeft: 'space.050'
 });
+export var LoadingStateAnimationWrapper = styled.div({
+  position: 'relative',
+  animation: 'flickerAnimation 2s infinite',
+  '@keyframes flickerAnimation': {
+    '0%': {
+      opacity: 1
+    },
+    '50%': {
+      opacity: 0.5
+    },
+    '100%': {
+      opacity: 1
+    }
+  }
+});
 var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var filterType = _ref.filterType,
     isSelected = _ref.isSelected,
     isDisabled = _ref.isDisabled,
-    onClick = _ref.onClick,
+    isLoading = _ref.isLoading,
     selectedOptions = _ref.selectedOptions;
   var _ref2 = selectedOptions || [],
     _ref3 = _slicedToArray(_ref2, 1),
     firstOption = _ref3[0];
+  var testId = "jlol-basic-filter-".concat(filterType, "-trigger");
   var hasOptions = selectedOptions && selectedOptions.length > 0;
+  var showButtonLoading = !isDisabled && isLoading;
+  if (showButtonLoading) {
+    return /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
+      iconAfter: /*#__PURE__*/React.createElement(Spinner, {
+        size: 'xsmall'
+      }),
+      testId: testId
+    }, /*#__PURE__*/React.createElement(FormattedMessage, asyncPopupSelectMessages["".concat(filterType, "Label")])));
+  }
   return /*#__PURE__*/React.createElement(Button, {
     ref: ref,
     appearance: "default",
     isSelected: isSelected || hasOptions,
     isDisabled: isDisabled,
-    onClick: onClick,
-    testId: "jlol-basic-filter-".concat(filterType, "-trigger"),
+    testId: testId,
     iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
       label: ""
     })

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

@@ -5,7 +5,11 @@ export interface PopupTriggerProps {
     selectedOptions?: ReadonlyArray<SelectOption>;
     isSelected?: boolean;
     isDisabled?: boolean;
-    onClick?: () => void;
+    isLoading?: boolean;
 }
+export declare const LoadingStateAnimationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const PopupTrigger: React.ForwardRefExoticComponent<PopupTriggerProps & React.RefAttributes<HTMLElement>>;
 export default PopupTrigger;

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

@@ -5,7 +5,11 @@ export interface PopupTriggerProps {
     selectedOptions?: ReadonlyArray<SelectOption>;
     isSelected?: boolean;
     isDisabled?: boolean;
-    onClick?: () => void;
+    isLoading?: boolean;
 }
+export declare const LoadingStateAnimationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const PopupTrigger: React.ForwardRefExoticComponent<PopupTriggerProps & React.RefAttributes<HTMLElement>>;
 export default PopupTrigger;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.17.9",
+  "version": "1.17.11",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
     "@atlaskit/analytics-next": "^9.1.3",
     "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/badge": "^15.1.16",
-    "@atlaskit/button": "^16.16.0",
+    "@atlaskit/button": "^16.17.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/empty-state": "^7.5.0",
     "@atlaskit/form": "^9.0.0",
@@ -60,7 +60,7 @@
     "@atlaskit/smart-card": "^26.42.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/tag": "^12.0.0",
-    "@atlaskit/textfield": "5.6.8",
+    "@atlaskit/textfield": "6.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^18.0.0",