@atlaskit/share 3.3.1 → 3.4.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/share
 
+## 3.4.2
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 3.4.1
+
+### Patch Changes
+
+- [`620f202bc02`](https://bitbucket.org/atlassian/atlassian-frontend/commits/620f202bc02) - Prevent event propagation in Share loading state
+
+## 3.4.0
+
+### Minor Changes
+
+- [`e5aa0ac9b74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e5aa0ac9b74) - [ux] ED-15329 migrates @atlaskit/share to emotion -- fixes a spacing bug with bottom margin on share button.
+
 ## 3.3.1
 
 ### Patch Changes

package/dist/cjs/components/CopyLinkButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MessageContainer = exports.HiddenInput = exports.CopyLinkButton = exports.AUTO_DISMISS_MS = void 0;
+exports.messageContainerStyle = exports.default = exports.HiddenInput = exports.CopyLinkButton = exports.AUTO_DISMISS_MS = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -27,9 +27,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 
@@ -62,17 +62,14 @@ var Z_INDEX = _constants.layers.modal();
 var AUTO_DISMISS_SECONDS = 8;
 var AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
 exports.AUTO_DISMISS_MS = AUTO_DISMISS_MS;
-
-var MessageContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: -8px -16px;\n"])));
-
-exports.MessageContainer = MessageContainer;
+var messageContainerStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: -8px -16px;\n"])));
+exports.messageContainerStyle = messageContainerStyle;
 var isSafari = navigator.userAgent.indexOf('Safari');
-
-var MessageSpan = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-indent: 6px;\n"])));
+var messageTextStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-indent: 6px;\n"])));
 
 var HiddenInput = /*#__PURE__*/_react.default.forwardRef( // we need a hidden input to reliably copy to clipboard across all browsers.
 function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement("input", {
+  return (0, _react2.jsx)("input", {
     style: {
       position: 'absolute',
       left: '-9999px'
@@ -146,16 +143,16 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
           formatMessage = _this$props.intl.formatMessage,
           isDisabled = _this$props.isDisabled,
           isPublicLink = _this$props.isPublicLink;
-      return /*#__PURE__*/_react.default.createElement(_styles.default, (0, _extends2.default)({
+      return (0, _react2.jsx)(_styles.default, (0, _extends2.default)({
         "aria-label": formatMessage(isPublicLink ? _i18n.messages.copyPublicLinkButtonText : _i18n.messages.copyLinkButtonText),
         isDisabled: isDisabled,
         appearance: "subtle-link",
-        iconBefore: /*#__PURE__*/_react.default.createElement(_linkFilled.default, {
+        iconBefore: (0, _react2.jsx)(_linkFilled.default, {
           label: "",
           size: "medium"
         }),
         onClick: _this.handleClick
-      }, triggerProps), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, isPublicLink ? _i18n.messages.copyPublicLinkButtonText : _i18n.messages.copyLinkButtonText));
+      }, triggerProps), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, isPublicLink ? _i18n.messages.copyPublicLinkButtonText : _i18n.messages.copyLinkButtonText));
     });
     return _this;
   }
@@ -174,25 +171,30 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           formatMessage = _this$props2.intl.formatMessage,
           copyTooltipText = _this$props2.copyTooltipText;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isSafari && /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)(_react.default.Fragment, null, isSafari && (0, _react2.jsx)("div", {
         className: "assistive",
         "aria-live": "assertive"
-      }, shouldShowCopiedMessage && formatMessage(_i18n.messages.copiedToClipboardMessage)), /*#__PURE__*/_react.default.createElement(HiddenInput, {
+      }, shouldShowCopiedMessage && formatMessage(_i18n.messages.copiedToClipboardMessage)), (0, _react2.jsx)(HiddenInput, {
         ref: this.inputRef,
         text: this.props.link
-      }), /*#__PURE__*/_react.default.createElement(_popup.default, {
+      }), (0, _react2.jsx)(_popup.default, {
         zIndex: Z_INDEX,
         content: function content() {
-          return /*#__PURE__*/_react.default.createElement(_styled.InlineDialogContentWrapper, null, /*#__PURE__*/_react.default.createElement(MessageContainer, null, /*#__PURE__*/_react.default.createElement(_checkCircle.default, {
+          return (0, _react2.jsx)(_styled.InlineDialogContentWrapper, null, (0, _react2.jsx)("div", {
+            css: messageContainerStyle,
+            "data-testid": "message-container"
+          }, (0, _react2.jsx)(_checkCircle.default, {
             label: "",
             primaryColor: (0, _tokens.token)('color.icon.success', _colors.G300)
-          }), /*#__PURE__*/_react.default.createElement(MessageSpan, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.copiedToClipboardMessage))));
+          }), (0, _react2.jsx)("span", {
+            css: messageTextStyle
+          }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.copiedToClipboardMessage))));
         },
         isOpen: shouldShowCopiedMessage,
         onClose: this.handleDismissCopiedMessage,
         placement: "top-start",
         trigger: function trigger(triggerProps) {
-          return copyTooltipText ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+          return copyTooltipText ? (0, _react2.jsx)(_tooltip.default, {
             content: copyTooltipText,
             position: "bottom-start"
           }, _this2.renderTriggerButton(triggerProps)) : _this2.renderTriggerButton(triggerProps);

package/dist/cjs/components/IntegrationButton.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
@@ -25,22 +25,22 @@ var _excluded = ["text", "textColor", "IntegrationIcon"];
 
 var _templateObject, _templateObject2;
 
-var IntegrationButtonCopyWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  display: flex;\n  justify-content: left;\n"])), function (props) {
-  return props.theme.textColor || (0, _tokens.token)('color.text', _colors.N500);
-});
-
-var IntegrationIconWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px 8px 0 0;\n"])));
+var integrationButtonCopyWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: left;\n"])));
+var integrationIconWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px 8px 0 0;\n"])));
 
 var IntegrationButton = function IntegrationButton(props) {
   var text = props.text,
       textColor = props.textColor,
       IntegrationIcon = props.IntegrationIcon,
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, restProps, /*#__PURE__*/_react.default.createElement(IntegrationButtonCopyWrapper, {
-    theme: {
-      textColor: textColor
+  return (0, _react2.jsx)(_customThemeButton.default, restProps, (0, _react2.jsx)("span", {
+    css: integrationButtonCopyWrapperStyle,
+    style: {
+      color: textColor || (0, _tokens.token)('color.text', _colors.N500)
     }
-  }, /*#__PURE__*/_react.default.createElement(IntegrationIconWrapper, null, /*#__PURE__*/_react.default.createElement(IntegrationIcon, null)), /*#__PURE__*/_react.default.createElement("span", null, text)));
+  }, (0, _react2.jsx)("span", {
+    css: integrationIconWrapperStyle
+  }, (0, _react2.jsx)(IntegrationIcon, null)), (0, _react2.jsx)("span", null, text)));
 };
 
 IntegrationButton.displayName = 'IntegrationButton';

package/dist/cjs/components/IntegrationForm.js

@@ -5,21 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IntegrationForm = exports.FormWrapper = void 0;
+exports.formWrapperStyle = exports.IntegrationForm = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _typography = require("@atlaskit/theme/typography");
 
 var _templateObject;
 
-var FormWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [class^='FormHeader__FormHeaderWrapper'] {\n    h1:first-child {\n      ", "\n\n      > span {\n        /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n        font-size: inherit !important;\n        line-height: inherit !important;\n        letter-spacing: inherit !important;\n      }\n    }\n  }\n\n  [class^='FormSection__FormSectionWrapper'] {\n    margin-top: 0px;\n  }\n\n  [class^='FormFooter__FormFooterWrapper'] {\n    justify-content: space-between;\n    margin-top: 12px;\n    margin-bottom: 24px;\n  }\n\n  [class^='Field__FieldWrapper']:not(:first-child) {\n    margin-top: 12px;\n  }\n"])), (0, _typography.h500)());
-
-exports.FormWrapper = FormWrapper;
+var formWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [class^='FormHeader__FormHeaderWrapper'] {\n    h1:first-child {\n      ", "\n\n      > span {\n        /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n        font-size: inherit !important;\n        line-height: inherit !important;\n        letter-spacing: inherit !important;\n      }\n    }\n  }\n\n  [class^='FormSection__FormSectionWrapper'] {\n    margin-top: 0px;\n  }\n\n  [class^='FormFooter__FormFooterWrapper'] {\n    justify-content: space-between;\n    margin-top: 12px;\n    margin-bottom: 24px;\n  }\n\n  [class^='Field__FieldWrapper']:not(:first-child) {\n    margin-top: 12px;\n  }\n"])), (0, _typography.h500)());
+exports.formWrapperStyle = formWrapperStyle;
 
 var IntegrationForm = function IntegrationForm(_ref) {
   var Content = _ref.Content,
@@ -31,7 +30,9 @@ var IntegrationForm = function IntegrationForm(_ref) {
       changeTab = _ref$changeTab === void 0 ? function () {
     return undefined;
   } : _ref$changeTab;
-  return /*#__PURE__*/_react.default.createElement(FormWrapper, null, Content && /*#__PURE__*/_react.default.createElement(Content, {
+  return (0, _react2.jsx)("div", {
+    css: formWrapperStyle
+  }, Content && (0, _react2.jsx)(Content, {
     onClose: onIntegrationClose,
     changeTab: changeTab
   }));

package/dist/cjs/components/LazyShareForm/LazyShareForm.js

@@ -29,6 +29,7 @@ function LazyShareForm(props) {
   var copyLink = props.copyLink,
       config = props.config,
       isFetchingConfig = props.isFetchingConfig,
+      setIsLoading = props.setIsLoading,
       loadOptions = props.loadOptions,
       shareFormTitle = props.shareFormTitle,
       shareFormHelperMessage = props.shareFormHelperMessage,
@@ -61,6 +62,10 @@ function LazyShareForm(props) {
 
   var footer = /*#__PURE__*/_react.default.createElement("div", null, bottomMessage ? /*#__PURE__*/_react.default.createElement(_styled.BottomMessageWrapper, null, bottomMessage) : null, customFooter && selectedIntegration === null && /*#__PURE__*/_react.default.createElement(_styled.CustomFooterWrapper, null, customFooter));
 
+  _react.default.useEffect(function () {
+    setIsLoading(false);
+  });
+
   return /*#__PURE__*/_react.default.createElement(_ShareFormWrapper.ShareFormWrapper, {
     footer: footer // form title will be determined by `title` and `showTitle` prop passed to `ShareForm`,
     // so we don't need to show title via ShareFormWrapper

package/dist/cjs/components/LazyShareForm/lazy.js

@@ -33,7 +33,13 @@ var LazyShareFormLazy = (0, _reactLooselyLazy.lazyForPaint)(function () {
 
 var LoadingDialog = function LoadingDialog(_ref) {
   var shareFormTitle = _ref.shareFormTitle,
-      showTitle = _ref.showTitle;
+      showTitle = _ref.showTitle,
+      setIsLoading = _ref.setIsLoading;
+
+  _react.default.useEffect(function () {
+    setIsLoading(true);
+  });
+
   return /*#__PURE__*/_react.default.createElement(_ShareFormWrapper.ShareFormWrapper, {
     shareFormTitle: shareFormTitle // if `showTitle` is passed, we use it. Otherwise, we will show title for loading dialog.
     ,
@@ -45,7 +51,8 @@ var _default = function _default(props) {
   return /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
     fallback: /*#__PURE__*/_react.default.createElement(LoadingDialog, {
       shareFormTitle: props.shareFormTitle,
-      showTitle: props.showTitle
+      showTitle: props.showTitle,
+      setIsLoading: props.setIsLoading
     })
   }, /*#__PURE__*/_react.default.createElement(LazyShareFormLazy, props));
 };

package/dist/cjs/components/ShareDialogWithTrigger.js

@@ -27,9 +27,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -71,8 +71,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var ShareButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  outline: none;\n"])));
-
+var shareButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  outline: none;\n"])));
 var defaultShareContentState = {
   users: [],
   comment: {
@@ -109,7 +108,8 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
       isUsingSplitButton: false,
       showIntegrationForm: false,
       selectedIntegration: null,
-      tabIndex: 0
+      tabIndex: 0,
+      isLoading: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeAndResetDialog", function () {
       _this.setState({
@@ -176,10 +176,28 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
         type: _types.OBJECT_SHARED
       }];
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setIsLoading", function (isLoading) {
+      _this.setState({
+        isLoading: isLoading
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focus", function () {
+      if (_this.containerRef.current) {
+        _this.containerRef.current.focus();
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
-      var isDialogOpen = _this.state.isDialogOpen;
+      var _this$state = _this.state,
+          isLoading = _this$state.isLoading,
+          isDialogOpen = _this$state.isDialogOpen;
       var shouldCloseOnEscapePress = _this.props.shouldCloseOnEscapePress;
 
+      if (isLoading) {
+        event.stopPropagation();
+
+        _this.focus();
+      }
+
       if (isDialogOpen) {
         switch (event.key) {
           case 'Esc':
@@ -191,9 +209,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
               event.stopPropagation(); // put the focus back onto the share dialog so that
               // the user can press the escape key again to close the dialog
 
-              if (_this.containerRef.current) {
-                _this.containerRef.current.focus();
-              }
+              _this.focus();
 
               return;
             } // The dialog will auto-close in @atlaskit/popup, we just need to fire
@@ -239,9 +255,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
             onDialogOpen();
           }
 
-          if (_this.containerRef.current) {
-            _this.containerRef.current.focus();
-          }
+          _this.focus();
         }
       });
     });
@@ -340,9 +354,9 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderShareTriggerButton", function (triggerProps) {
-      var _this$state = _this.state,
-          isDialogOpen = _this$state.isDialogOpen,
-          isUsingSplitButton = _this$state.isUsingSplitButton;
+      var _this$state2 = _this.state,
+          isDialogOpen = _this$state2.isDialogOpen,
+          isUsingSplitButton = _this$state2.isUsingSplitButton;
       var _this$props6 = _this.props,
           formatMessage = _this$props6.intl.formatMessage,
           isDisabled = _this$props6.isDisabled,
@@ -368,12 +382,12 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
           onClick: _this.onTriggerClick
         }, triggerProps);
       } else {
-        button = /*#__PURE__*/_react.default.createElement(_ShareButton.default, (0, _extends2.default)({
+        button = (0, _react2.jsx)(_ShareButton.default, (0, _extends2.default)({
           appearance: triggerButtonAppearance,
-          text: triggerButtonStyle !== 'icon-only' ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.shareTriggerButtonText) : null,
+          text: triggerButtonStyle !== 'icon-only' ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.shareTriggerButtonText) : null,
           "aria-label": formatMessage(_i18n.messages.shareTriggerButtonText),
           onClick: _this.onTriggerClick,
-          iconBefore: triggerButtonStyle !== 'text-only' ? /*#__PURE__*/_react.default.createElement(ShareButtonIcon, {
+          iconBefore: triggerButtonStyle !== 'text-only' ? (0, _react2.jsx)(ShareButtonIcon, {
             label: ""
           }) : undefined,
           isSelected: isDialogOpen,
@@ -383,7 +397,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
 
 
       if (triggerButtonStyle === 'icon-only') {
-        button = /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        button = (0, _react2.jsx)(_tooltip.default, {
           content: !isUsingSplitButton ? triggerButtonTooltipText || formatMessage(_i18n.messages.shareTriggerButtonTooltipText) : null,
           position: triggerButtonTooltipPosition,
           hideTooltipOnClick: true
@@ -392,7 +406,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
 
 
       if (integrationMode === 'split' && shareIntegrations !== null && shareIntegrations !== void 0 && shareIntegrations.length) {
-        button = /*#__PURE__*/_react.default.createElement(_SplitButton.default, {
+        button = (0, _react2.jsx)(_SplitButton.default, {
           shareButton: button,
           handleOpenSplitButton: _this.handleOpenSplitButton,
           handleCloseSplitButton: _this.handleCloseSplitButton,
@@ -444,13 +458,13 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
     value: function render() {
       var _this2 = this;
 
-      var _this$state2 = this.state,
-          isDialogOpen = _this$state2.isDialogOpen,
-          isSharing = _this$state2.isSharing,
-          shareError = _this$state2.shareError,
-          defaultValue = _this$state2.defaultValue,
-          showIntegrationForm = _this$state2.showIntegrationForm,
-          selectedIntegration = _this$state2.selectedIntegration;
+      var _this$state3 = this.state,
+          isDialogOpen = _this$state3.isDialogOpen,
+          isSharing = _this$state3.isSharing,
+          shareError = _this$state3.shareError,
+          defaultValue = _this$state3.defaultValue,
+          showIntegrationForm = _this$state3.showIntegrationForm,
+          selectedIntegration = _this$state3.selectedIntegration;
       var _this$props7 = this.props,
           copyLink = _this$props7.copyLink,
           dialogPlacement = _this$props7.dialogPlacement,
@@ -480,15 +494,16 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
       } : undefined;
       var footer = (0, _utils.resolveShareFooter)(integrationMode, this.state.tabIndex, customFooter); // for performance purposes, we may want to have a loadable content i.e. ShareForm
 
-      return /*#__PURE__*/_react.default.createElement(ShareButtonWrapper, {
+      return (0, _react2.jsx)("div", {
+        css: shareButtonWrapperStyles,
         tabIndex: tabIndex,
         onKeyDown: this.handleKeyDown,
         style: style
-      }, /*#__PURE__*/_react.default.createElement(_popup.default, {
+      }, (0, _react2.jsx)(_popup.default, {
         content: function content() {
-          return /*#__PURE__*/_react.default.createElement("div", {
+          return (0, _react2.jsx)("div", {
             ref: _this2.containerRef
-          }, /*#__PURE__*/_react.default.createElement(_lazy.default, {
+          }, (0, _react2.jsx)(_lazy.default, {
             Content: selectedIntegration && selectedIntegration.Content,
             selectedIntegration: selectedIntegration,
             copyLink: copyLink,
@@ -504,6 +519,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
             defaultValue: defaultValue,
             config: config,
             isFetchingConfig: isFetchingConfig,
+            setIsLoading: _this2.setIsLoading,
             submitButtonLabel: submitButtonLabel,
             product: product,
             enableSmartUserPicker: enableSmartUserPicker,
@@ -531,9 +547,9 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
         placement: dialogPlacement,
         trigger: this.renderShareTriggerButton,
         zIndex: dialogZIndex
-      }), /*#__PURE__*/_react.default.createElement(_portal.default, {
+      }), (0, _react2.jsx)(_portal.default, {
         zIndex: (0, _utils.generateSelectZIndex)(dialogZIndex)
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         ref: this.selectPortalRef
       })));
     }

package/dist/cjs/components/ShareForm.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShareForm = exports.FormWrapper = exports.FormFooter = void 0;
+exports.formWrapperStyles = exports.formFooterStyles = exports.ShareForm = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -29,9 +29,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -81,26 +81,18 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var SubmitButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
-
-var CenterAlignedIconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
-
-var FormWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), (0, _constants.gridSize)());
-
-exports.FormWrapper = FormWrapper;
-
-var FormFooter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n  display: flex;\n  justify-content: flex-start;\n"])), _constants.gridSize);
-
-exports.FormFooter = FormFooter;
-
-var FormField = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 12px;\n"])));
-
-var IntegrationWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
-
-var IntegrationIconWrapper = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: -6px;\n  margin-right: 5px;\n"])));
+var submitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
+var centerAlignedIconWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
+var formWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), (0, _constants.gridSize)());
+exports.formWrapperStyles = formWrapperStyles;
+var formFooterStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n"])));
+exports.formFooterStyles = formFooterStyles;
+var formFieldStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 12px;\n"])));
+var integrationWrapperStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+var integrationIconWrapperStyles = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: -6px;\n  margin-right: 5px;\n"])));
 
 var integrationTabText = function integrationTabText(integrationName) {
-  return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareInIntegrationButtonText, {
+  return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareInIntegrationButtonText, {
     values: {
       integrationName: integrationName
     }
@@ -151,13 +143,15 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           copyTooltipText = _this$props.copyTooltipText,
           helperMessage = _this$props.helperMessage,
           orgId = _this$props.orgId;
-      return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+      return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
         data: {
           source: _analytics.ANALYTICS_SOURCE
         }
-      }, /*#__PURE__*/_react.default.createElement("form", formProps, showTitle && /*#__PURE__*/_react.default.createElement(_ShareHeader.ShareHeader, {
+      }, (0, _react2.jsx)("form", formProps, showTitle && (0, _react2.jsx)(_ShareHeader.ShareHeader, {
         title: title
-      }), /*#__PURE__*/_react.default.createElement(FormField, null, /*#__PURE__*/_react.default.createElement(_UserPickerField.UserPickerField, {
+      }), (0, _react2.jsx)("div", {
+        css: formFieldStyles
+      }, (0, _react2.jsx)(_UserPickerField.UserPickerField, {
         onInputChange: onUserInputChange,
         onChange: onUserSelectionChange,
         loadOptions: loadOptions,
@@ -172,9 +166,14 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         isPublicLink: isPublicLink,
         helperMessage: helperMessage,
         orgId: orgId
-      })), /*#__PURE__*/_react.default.createElement(FormField, null, /*#__PURE__*/_react.default.createElement(_CommentField.CommentField, {
+      })), (0, _react2.jsx)("div", {
+        css: formFieldStyles
+      }, (0, _react2.jsx)(_CommentField.CommentField, {
         defaultValue: defaultValue && defaultValue.comment
-      })), fieldsFooter, /*#__PURE__*/_react.default.createElement(FormFooter, null, /*#__PURE__*/_react.default.createElement(_CopyLinkButton.default, {
+      })), fieldsFooter, (0, _react2.jsx)("div", {
+        css: formFooterStyles,
+        "data-testid": "form-footer"
+      }, (0, _react2.jsx)(_CopyLinkButton.default, {
         isDisabled: isDisabled,
         onLinkCopy: onLinkCopy,
         link: copyLink,
@@ -199,18 +198,22 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       var sendLabel = isPublicLink ? formPublicLabel : formSendLabel;
       var buttonLabel = shareError ? _i18n.messages.formRetry : sendLabel;
       var ButtonLabelWrapper = buttonAppearance === 'warning' ? 'strong' : _react.default.Fragment;
-      return /*#__PURE__*/_react.default.createElement(SubmitButtonWrapper, null, /*#__PURE__*/_react.default.createElement(CenterAlignedIconWrapper, null, shouldShowWarning && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-        content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.shareFailureMessage),
+      return (0, _react2.jsx)("div", {
+        css: submitButtonWrapperStyles
+      }, (0, _react2.jsx)("div", {
+        css: centerAlignedIconWrapperStyles
+      }, shouldShowWarning && (0, _react2.jsx)(_tooltip.default, {
+        content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.shareFailureMessage),
         position: "top"
-      }, /*#__PURE__*/_react.default.createElement(_error.default, {
+      }, (0, _react2.jsx)(_error.default, {
         label: formatMessage(_i18n.messages.shareFailureIconLabel),
         primaryColor: (0, _tokens.token)('color.icon.danger', _colors.R400)
-      }))), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }))), (0, _react2.jsx)(_customThemeButton.default, {
         appearance: buttonAppearance,
         type: "submit",
         isLoading: isSharing,
         isDisabled: isDisabled
-      }, /*#__PURE__*/_react.default.createElement(ButtonLabelWrapper, null, submitButtonLabel || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, buttonLabel))));
+      }, (0, _react2.jsx)(ButtonLabelWrapper, null, submitButtonLabel || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, buttonLabel))));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMainTabTitle", function () {
       var _this$props3 = _this.props,
@@ -222,11 +225,11 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (!product) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.formTitle);
+        return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.formTitle);
       }
 
       var productShareType = product === 'jira' ? _objectSpread({}, _i18n.messages.shareMainTabTextJira) : _objectSpread({}, _i18n.messages.shareMainTabTextConfluence);
-      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, productShareType);
+      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, productShareType);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeTab", function (tab) {
       var _this$props$onTabChan, _this$props4;
@@ -267,23 +270,31 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       var firstIntegration = shareIntegrations[0];
 
       if (integrationMode === 'tabs') {
-        return /*#__PURE__*/_react.default.createElement(_tabs.default, {
+        return (0, _react2.jsx)(_tabs.default, {
           id: "ShareForm-Tabs-Integrations",
           onChange: this.changeTab,
           selected: this.state.selectedTab
-        }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
+        }, (0, _react2.jsx)(_tabs.TabList, null, (0, _react2.jsx)(_tabs.Tab, {
           key: "share-tab-default"
-        }, this.renderMainTabTitle()), /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
+        }, this.renderMainTabTitle()), (0, _react2.jsx)(_tabs.Tab, {
           key: "share-tab-".concat(firstIntegration.type)
-        }, /*#__PURE__*/_react.default.createElement(IntegrationWrapper, null, /*#__PURE__*/_react.default.createElement(IntegrationIconWrapper, null, /*#__PURE__*/_react.default.createElement(firstIntegration.Icon, null)), integrationTabText(firstIntegration.type)))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, {
+        }, (0, _react2.jsx)("div", {
+          css: integrationWrapperStyles
+        }, (0, _react2.jsx)("span", {
+          css: integrationIconWrapperStyles
+        }, (0, _react2.jsx)(firstIntegration.Icon, null)), integrationTabText(firstIntegration.type)))), (0, _react2.jsx)(_tabs.TabPanel, {
           key: "share-tabPanel-default"
-        }, /*#__PURE__*/_react.default.createElement(FormWrapper, null, this.renderShareForm())), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, {
+        }, (0, _react2.jsx)("div", {
+          css: formWrapperStyles
+        }, this.renderShareForm())), (0, _react2.jsx)(_tabs.TabPanel, {
           key: "share-tabPanel-integration"
-        }, /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+        }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
           data: {
             source: _analytics.INTEGRATION_MODAL_SOURCE
           }
-        }, /*#__PURE__*/_react.default.createElement(FormWrapper, null, /*#__PURE__*/_react.default.createElement(_IntegrationForm.IntegrationForm, {
+        }, (0, _react2.jsx)("div", {
+          css: formWrapperStyles
+        }, (0, _react2.jsx)(_IntegrationForm.IntegrationForm, {
           Content: firstIntegration.Content,
           onIntegrationClose: function onIntegrationClose() {
             return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
@@ -304,12 +315,12 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
 var InternalFormWithIntl = (0, _reactIntlNext.injectIntl)(InternalForm);
 
 var ShareForm = function ShareForm(props) {
-  return /*#__PURE__*/_react.default.createElement(_form.default, {
+  return (0, _react2.jsx)(_form.default, {
     onSubmit: props.onSubmit
   }, function (_ref) {
     var formProps = _ref.formProps,
         getValues = _ref.getValues;
-    return /*#__PURE__*/_react.default.createElement(InternalFormWithIntl, (0, _extends2.default)({}, props, {
+    return (0, _react2.jsx)(InternalFormWithIntl, (0, _extends2.default)({}, props, {
       formProps: formProps,
       getValues: getValues
     }));