@atlaskit/share 3.3.1 → 3.4.2

package/dist/esm/components/ShareDialogWithTrigger.js

@@ -18,9 +18,10 @@ 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; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import ShareIcon from '@atlaskit/icon/glyph/share';
 import Popup from '@atlaskit/popup';
@@ -38,7 +39,7 @@ import LazyShareFormLazy from './LazyShareForm/lazy';
 import ShareButton from './ShareButton';
 import SplitButton from './SplitButton';
 import { generateSelectZIndex, resolveShareFooter } from './utils';
-var ShareButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  outline: none;\n"])));
+var shareButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  outline: none;\n"])));
 export var defaultShareContentState = {
   users: [],
   comment: {
@@ -77,7 +78,8 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
       isUsingSplitButton: false,
       showIntegrationForm: false,
       selectedIntegration: null,
-      tabIndex: 0
+      tabIndex: 0,
+      isLoading: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "closeAndResetDialog", function () {
@@ -149,10 +151,30 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
       }];
     });
 
+    _defineProperty(_assertThisInitialized(_this), "setIsLoading", function (isLoading) {
+      _this.setState({
+        isLoading: isLoading
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "focus", function () {
+      if (_this.containerRef.current) {
+        _this.containerRef.current.focus();
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_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':
@@ -164,9 +186,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
               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
@@ -213,9 +233,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
             onDialogOpen();
           }
 
-          if (_this.containerRef.current) {
-            _this.containerRef.current.focus();
-          }
+          _this.focus();
         }
       });
     });
@@ -320,9 +338,9 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
     });
 
     _defineProperty(_assertThisInitialized(_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,
@@ -348,12 +366,12 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
           onClick: _this.onTriggerClick
         }, triggerProps);
       } else {
-        button = /*#__PURE__*/React.createElement(ShareButton, _extends({
+        button = jsx(ShareButton, _extends({
           appearance: triggerButtonAppearance,
-          text: triggerButtonStyle !== 'icon-only' ? /*#__PURE__*/React.createElement(FormattedMessage, messages.shareTriggerButtonText) : null,
+          text: triggerButtonStyle !== 'icon-only' ? jsx(FormattedMessage, messages.shareTriggerButtonText) : null,
           "aria-label": formatMessage(messages.shareTriggerButtonText),
           onClick: _this.onTriggerClick,
-          iconBefore: triggerButtonStyle !== 'text-only' ? /*#__PURE__*/React.createElement(ShareButtonIcon, {
+          iconBefore: triggerButtonStyle !== 'text-only' ? jsx(ShareButtonIcon, {
             label: ""
           }) : undefined,
           isSelected: isDialogOpen,
@@ -363,7 +381,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
 
 
       if (triggerButtonStyle === 'icon-only') {
-        button = /*#__PURE__*/React.createElement(Aktooltip, {
+        button = jsx(Aktooltip, {
           content: !isUsingSplitButton ? triggerButtonTooltipText || formatMessage(messages.shareTriggerButtonTooltipText) : null,
           position: triggerButtonTooltipPosition,
           hideTooltipOnClick: true
@@ -372,7 +390,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
 
 
       if (integrationMode === 'split' && shareIntegrations !== null && shareIntegrations !== void 0 && shareIntegrations.length) {
-        button = /*#__PURE__*/React.createElement(SplitButton, {
+        button = jsx(SplitButton, {
           shareButton: button,
           handleOpenSplitButton: _this.handleOpenSplitButton,
           handleCloseSplitButton: _this.handleCloseSplitButton,
@@ -427,13 +445,13 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
     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,
@@ -463,15 +481,16 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
       } : undefined;
       var footer = resolveShareFooter(integrationMode, this.state.tabIndex, customFooter); // for performance purposes, we may want to have a loadable content i.e. ShareForm
 
-      return /*#__PURE__*/React.createElement(ShareButtonWrapper, {
+      return jsx("div", {
+        css: shareButtonWrapperStyles,
         tabIndex: tabIndex,
         onKeyDown: this.handleKeyDown,
         style: style
-      }, /*#__PURE__*/React.createElement(Popup, {
+      }, jsx(Popup, {
         content: function content() {
-          return /*#__PURE__*/React.createElement("div", {
+          return jsx("div", {
             ref: _this2.containerRef
-          }, /*#__PURE__*/React.createElement(LazyShareFormLazy, {
+          }, jsx(LazyShareFormLazy, {
             Content: selectedIntegration && selectedIntegration.Content,
             selectedIntegration: selectedIntegration,
             copyLink: copyLink,
@@ -487,6 +506,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
             defaultValue: defaultValue,
             config: config,
             isFetchingConfig: isFetchingConfig,
+            setIsLoading: _this2.setIsLoading,
             submitButtonLabel: submitButtonLabel,
             product: product,
             enableSmartUserPicker: enableSmartUserPicker,
@@ -514,9 +534,9 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
         placement: dialogPlacement,
         trigger: this.renderShareTriggerButton,
         zIndex: dialogZIndex
-      }), /*#__PURE__*/React.createElement(Portal, {
+      }), jsx(Portal, {
         zIndex: generateSelectZIndex(dialogZIndex)
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         ref: this.selectPortalRef
       })));
     }

package/dist/esm/components/ShareForm.js

@@ -18,9 +18,10 @@ 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; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import Form from '@atlaskit/form';
@@ -38,16 +39,16 @@ import CopyLinkButton from './CopyLinkButton';
 import { IntegrationForm } from './IntegrationForm';
 import { ShareHeader } from './ShareHeader';
 import { UserPickerField } from './UserPickerField';
-var SubmitButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n"])));
-var CenterAlignedIconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
-export var FormWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), gridSize());
-export var FormFooter = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n  display: flex;\n  justify-content: flex-start;\n"])), gridSize);
-var FormField = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: 12px;\n"])));
-var IntegrationWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var IntegrationIconWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: -6px;\n  margin-right: 5px;\n"])));
+var submitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n"])));
+var centerAlignedIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
+export var formWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), gridSize());
+export var formFooterStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n"])));
+var formFieldStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: 12px;\n"])));
+var integrationWrapperStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var integrationIconWrapperStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: -6px;\n  margin-right: 5px;\n"])));
 
 var integrationTabText = function integrationTabText(integrationName) {
-  return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
+  return jsx(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
     values: {
       integrationName: integrationName
     }
@@ -100,13 +101,15 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           copyTooltipText = _this$props.copyTooltipText,
           helperMessage = _this$props.helperMessage,
           orgId = _this$props.orgId;
-      return /*#__PURE__*/React.createElement(AnalyticsContext, {
+      return jsx(AnalyticsContext, {
         data: {
           source: ANALYTICS_SOURCE
         }
-      }, /*#__PURE__*/React.createElement("form", formProps, showTitle && /*#__PURE__*/React.createElement(ShareHeader, {
+      }, jsx("form", formProps, showTitle && jsx(ShareHeader, {
         title: title
-      }), /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(UserPickerField, {
+      }), jsx("div", {
+        css: formFieldStyles
+      }, jsx(UserPickerField, {
         onInputChange: onUserInputChange,
         onChange: onUserSelectionChange,
         loadOptions: loadOptions,
@@ -121,9 +124,14 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         isPublicLink: isPublicLink,
         helperMessage: helperMessage,
         orgId: orgId
-      })), /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(CommentField, {
+      })), jsx("div", {
+        css: formFieldStyles
+      }, jsx(CommentField, {
         defaultValue: defaultValue && defaultValue.comment
-      })), fieldsFooter, /*#__PURE__*/React.createElement(FormFooter, null, /*#__PURE__*/React.createElement(CopyLinkButton, {
+      })), fieldsFooter, jsx("div", {
+        css: formFooterStyles,
+        "data-testid": "form-footer"
+      }, jsx(CopyLinkButton, {
         isDisabled: isDisabled,
         onLinkCopy: onLinkCopy,
         link: copyLink,
@@ -149,18 +157,22 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       var sendLabel = isPublicLink ? formPublicLabel : formSendLabel;
       var buttonLabel = shareError ? messages.formRetry : sendLabel;
       var ButtonLabelWrapper = buttonAppearance === 'warning' ? 'strong' : React.Fragment;
-      return /*#__PURE__*/React.createElement(SubmitButtonWrapper, null, /*#__PURE__*/React.createElement(CenterAlignedIconWrapper, null, shouldShowWarning && /*#__PURE__*/React.createElement(Tooltip, {
-        content: /*#__PURE__*/React.createElement(FormattedMessage, messages.shareFailureMessage),
+      return jsx("div", {
+        css: submitButtonWrapperStyles
+      }, jsx("div", {
+        css: centerAlignedIconWrapperStyles
+      }, shouldShowWarning && jsx(Tooltip, {
+        content: jsx(FormattedMessage, messages.shareFailureMessage),
         position: "top"
-      }, /*#__PURE__*/React.createElement(ErrorIcon, {
+      }, jsx(ErrorIcon, {
         label: formatMessage(messages.shareFailureIconLabel),
         primaryColor: token('color.icon.danger', R400)
-      }))), /*#__PURE__*/React.createElement(Button, {
+      }))), jsx(Button, {
         appearance: buttonAppearance,
         type: "submit",
         isLoading: isSharing,
         isDisabled: isDisabled
-      }, /*#__PURE__*/React.createElement(ButtonLabelWrapper, null, submitButtonLabel || /*#__PURE__*/React.createElement(FormattedMessage, buttonLabel))));
+      }, jsx(ButtonLabelWrapper, null, submitButtonLabel || jsx(FormattedMessage, buttonLabel))));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderMainTabTitle", function () {
@@ -173,11 +185,11 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (!product) {
-        return /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle);
+        return jsx(FormattedMessage, messages.formTitle);
       }
 
       var productShareType = product === 'jira' ? _objectSpread({}, messages.shareMainTabTextJira) : _objectSpread({}, messages.shareMainTabTextConfluence);
-      return /*#__PURE__*/React.createElement(FormattedMessage, productShareType);
+      return jsx(FormattedMessage, productShareType);
     });
 
     _defineProperty(_assertThisInitialized(_this), "changeTab", function (tab) {
@@ -220,23 +232,31 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       var firstIntegration = shareIntegrations[0];
 
       if (integrationMode === 'tabs') {
-        return /*#__PURE__*/React.createElement(Tabs, {
+        return jsx(Tabs, {
           id: "ShareForm-Tabs-Integrations",
           onChange: this.changeTab,
           selected: this.state.selectedTab
-        }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
+        }, jsx(TabList, null, jsx(Tab, {
           key: "share-tab-default"
-        }, this.renderMainTabTitle()), /*#__PURE__*/React.createElement(Tab, {
+        }, this.renderMainTabTitle()), jsx(Tab, {
           key: "share-tab-".concat(firstIntegration.type)
-        }, /*#__PURE__*/React.createElement(IntegrationWrapper, null, /*#__PURE__*/React.createElement(IntegrationIconWrapper, null, /*#__PURE__*/React.createElement(firstIntegration.Icon, null)), integrationTabText(firstIntegration.type)))), /*#__PURE__*/React.createElement(TabPanel, {
+        }, jsx("div", {
+          css: integrationWrapperStyles
+        }, jsx("span", {
+          css: integrationIconWrapperStyles
+        }, jsx(firstIntegration.Icon, null)), integrationTabText(firstIntegration.type)))), jsx(TabPanel, {
           key: "share-tabPanel-default"
-        }, /*#__PURE__*/React.createElement(FormWrapper, null, this.renderShareForm())), /*#__PURE__*/React.createElement(TabPanel, {
+        }, jsx("div", {
+          css: formWrapperStyles
+        }, this.renderShareForm())), jsx(TabPanel, {
           key: "share-tabPanel-integration"
-        }, /*#__PURE__*/React.createElement(AnalyticsContext, {
+        }, jsx(AnalyticsContext, {
           data: {
             source: INTEGRATION_MODAL_SOURCE
           }
-        }, /*#__PURE__*/React.createElement(FormWrapper, null, /*#__PURE__*/React.createElement(IntegrationForm, {
+        }, jsx("div", {
+          css: formWrapperStyles
+        }, jsx(IntegrationForm, {
           Content: firstIntegration.Content,
           onIntegrationClose: function onIntegrationClose() {
             return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
@@ -258,12 +278,12 @@ _defineProperty(InternalForm, "defaultProps", {
 
 var InternalFormWithIntl = injectIntl(InternalForm);
 export var ShareForm = function ShareForm(props) {
-  return /*#__PURE__*/React.createElement(Form, {
+  return jsx(Form, {
     onSubmit: props.onSubmit
   }, function (_ref) {
     var formProps = _ref.formProps,
         getValues = _ref.getValues;
-    return /*#__PURE__*/React.createElement(InternalFormWithIntl, _extends({}, props, {
+    return jsx(InternalFormWithIntl, _extends({}, props, {
       formProps: formProps,
       getValues: getValues
     }));

package/dist/esm/components/ShareHeader.js

@@ -2,15 +2,23 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx, useTheme } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h500 } from '@atlaskit/theme/typography';
 import { messages } from '../i18n';
-var HeaderWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
-export var FormHeaderTitle = styled.h1(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  line-height: ", "px;\n  margin-right: ", "px;\n  margin-top: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), h500, gridSize() * 4, gridSize() * 4, gridSize() * 4);
+var headerWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+export var getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  line-height: ", "px;\n  margin-right: ", "px;\n  margin-top: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), h500(theme), gridSize() * 4, gridSize() * 4, gridSize() * 4);
+};
 export var ShareHeader = function ShareHeader(_ref) {
   var title = _ref.title;
-  return /*#__PURE__*/React.createElement(HeaderWrapper, null, /*#__PURE__*/React.createElement(FormHeaderTitle, null, title || /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle)));
+  var theme = useTheme();
+  return jsx("div", {
+    css: headerWrapperStyles
+  }, jsx("h1", {
+    css: getFormHeaderTitleStyles(theme)
+  }, title || jsx(FormattedMessage, messages.formTitle)));
 };

package/dist/esm/components/SplitButton.js

@@ -5,9 +5,10 @@ var _excluded = ["triggerRef"];
 
 var _templateObject, _templateObject2, _templateObject3;
 
+/** @jsx jsx */
 import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import styled from 'styled-components';
 import Button from '@atlaskit/button/standard-button';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -17,12 +18,13 @@ import { token } from '@atlaskit/tokens';
 import { messages } from '../i18n';
 import { shareIntegrationButtonEvent } from './analytics/analytics';
 import IntegrationButton from './IntegrationButton';
-var SplitButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  button {\n    border-radius: ", "px 0 0 ", "px;\n  }\n  button:hover {\n    border-radius: ", "px 0 0 ", "px;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
-var DropdownMenuWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 1px;\n  button {\n    border-radius: 0 ", "px ", "px 0;\n  }\n  button:hover {\n    border-radius: 0 ", "px ", "px 0;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
-var DropDownIntegrationButtonWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  button:hover {\n    background: transparent;\n  }\n"])));
+var splitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  button {\n    border-radius: ", "px 0 0 ", "px;\n  }\n  button:hover {\n    border-radius: ", "px 0 0 ", "px;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
+var dropdownMenuWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 1px;\n  button {\n    border-radius: 0 ", "px ", "px 0;\n  }\n  button:hover {\n    border-radius: 0 ", "px ", "px 0;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius()); // span
+
+var dropDownIntegrationButtonWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  button:hover {\n    background: transparent;\n  }\n"])));
 
 var integrationButtonText = function integrationButtonText(integrationName) {
-  return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.shareToIntegrationButtonText, {
+  return jsx(FormattedMessage, _extends({}, messages.shareToIntegrationButtonText, {
     values: {
       integrationName: integrationName
     }
@@ -50,15 +52,17 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
     onIntegrationClick(integration);
     createAndFireEvent(shareIntegrationButtonEvent(integration.type));
   }, [createAndFireEvent, onIntegrationClick]);
-  return /*#__PURE__*/React.createElement(DropdownMenuWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+  return jsx("div", {
+    css: dropdownMenuWrapperStyles
+  }, jsx(DropdownMenu, {
     testId: "split-button-dropdown",
     trigger: function trigger(_ref2) {
       var triggerRef = _ref2.triggerRef,
           providedProps = _objectWithoutProperties(_ref2, _excluded);
 
-      return /*#__PURE__*/React.createElement(Button, _extends({}, providedProps, {
+      return jsx(Button, _extends({}, providedProps, {
         ref: triggerRef,
-        iconBefore: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        iconBefore: jsx(ChevronDownIcon, {
           label: ""
         }),
         appearance: triggerButtonAppearance
@@ -67,11 +71,13 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
     placement: "bottom-end",
     isOpen: isUsingSplitButton,
     onOpenChange: onOpenChange
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, shareIntegrations.map(function (integration) {
-    return /*#__PURE__*/React.createElement(DropdownItem, {
+  }, jsx(DropdownItemGroup, null, shareIntegrations.map(function (integration) {
+    return jsx(DropdownItem, {
       key: integration.type,
       testId: "split-button-dropdownitem-".concat(integration.type)
-    }, /*#__PURE__*/React.createElement(DropDownIntegrationButtonWrapper, null, /*#__PURE__*/React.createElement(IntegrationButton, {
+    }, jsx("span", {
+      css: dropDownIntegrationButtonWrapperStyles
+    }, jsx(IntegrationButton, {
       textColor: token('color.text', N800),
       appearance: "subtle",
       onClick: function onClick() {
@@ -96,9 +102,10 @@ export default function SplitButton(_ref3) {
       dialogZIndex = _ref3.dialogZIndex,
       dialogPlacement = _ref3.dialogPlacement,
       createAndFireEvent = _ref3.createAndFireEvent;
-  return /*#__PURE__*/React.createElement(SplitButtonWrapper, {
+  return jsx("div", {
+    css: splitButtonWrapperStyles,
     "data-testid": "split-button"
-  }, shareButton, /*#__PURE__*/React.createElement(SplitButtonDropdown, {
+  }, shareButton, jsx(SplitButtonDropdown, {
     shareIntegrations: shareIntegrations,
     triggerButtonAppearance: triggerButtonAppearance,
     isUsingSplitButton: isUsingSplitButton,

package/dist/esm/components/analytics/analytics.js

@@ -10,7 +10,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "3.3.1"
+    packageVersion: "3.4.2"
   }, attributes);
 };
 

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.3.1"
+	"version": "3.4.2"
 }

package/dist/types/components/CopyLinkButton.d.ts

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { TriggerProps } from '@atlaskit/popup';
 export declare const AUTO_DISMISS_MS: number;
-export declare const MessageContainer: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const messageContainerStyle: import("@emotion/react").SerializedStyles;
 declare type InputProps = {
     text: string;
 };
@@ -27,8 +29,8 @@ export declare class CopyLinkButton extends React.Component<Props & WrappedCompo
     private clearAutoDismiss;
     private handleClick;
     private handleDismissCopiedMessage;
-    renderTriggerButton: (triggerProps: TriggerProps) => JSX.Element;
-    render(): JSX.Element;
+    renderTriggerButton: (triggerProps: TriggerProps) => jsx.JSX.Element;
+    render(): jsx.JSX.Element;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;

package/dist/types/components/IntegrationButton.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { CustomThemeButtonProps } from '@atlaskit/button/types';
 declare type Props = CustomThemeButtonProps & {

package/dist/types/components/IntegrationForm.d.ts

@@ -1,9 +1,11 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { IntegrationContentProps } from '../types';
-export declare const FormWrapper: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const formWrapperStyle: import("@emotion/react").SerializedStyles;
 export declare type IntegrationFormProps = {
     Content: React.ComponentType<IntegrationContentProps> | null;
     onIntegrationClose?: () => void;
     changeTab?: (index: number) => void;
 };
-export declare const IntegrationForm: ({ Content, onIntegrationClose, changeTab, }: IntegrationFormProps) => JSX.Element;
+export declare const IntegrationForm: ({ Content, onIntegrationClose, changeTab, }: IntegrationFormProps) => jsx.JSX.Element;

package/dist/types/components/LazyShareForm/LazyShareForm.d.ts

@@ -10,6 +10,7 @@ export declare type LazyShareFormProps = Pick<ShareDialogWithTriggerProps, 'copy
     loadOptions?: LoadOptions;
     selectPortalRef: any;
     showTitle: boolean;
+    setIsLoading: (isLoading: boolean) => void;
 };
 /**
  * A Share form content which is lazy-loaded.

package/dist/types/components/ShareDialogWithTrigger.d.ts

@@ -1,4 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { TriggerProps } from '@atlaskit/popup';
@@ -22,6 +24,8 @@ export declare class ShareDialogWithTriggerInternal extends React.PureComponent<
     private createAndFireEvent;
     private onTabChange;
     private getFlags;
+    private setIsLoading;
+    private focus;
     private handleKeyDown;
     private handleDialogOpen;
     private onTriggerClick;
@@ -33,7 +37,7 @@ export declare class ShareDialogWithTriggerInternal extends React.PureComponent<
     renderShareTriggerButton: (triggerProps: TriggerProps) => React.ReactNode;
     handleOpenSplitButton: () => void;
     handleCloseSplitButton: () => void;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }
 export declare const ShareDialogWithTrigger: React.ComponentType<ShareDialogWithTriggerProps>;
 export {};

package/dist/types/components/ShareForm.d.ts

@@ -1,8 +1,9 @@
+/** @jsx jsx */
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl-next';
 import { FormChildrenArgs, ShareData, ShareFormProps, TabType } from '../types';
-export declare const FormWrapper: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
-export declare const FormFooter: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, any, React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const formWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const formFooterStyles: import("@emotion/react").SerializedStyles;
 export declare type State = {
     selectedTab: TabType;
 };

package/dist/types/components/ShareHeader.d.ts

@@ -1,6 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
+import { Theme } from '@emotion/react';
 export declare type Props = {
     title?: React.ReactNode;
 };
-export declare const FormHeaderTitle: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined), any, React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & (import("@atlaskit/theme").ThemeProps | undefined)>;
+export declare const getFormHeaderTitleStyles: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const ShareHeader: React.StatelessComponent<Props>;

package/dist/types/components/SplitButton.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { AnalyticsEventPayload } from '@atlaskit/analytics-next';
 import { Appearance } from '@atlaskit/button/types';

package/dist/types/types/ShareDialogWithTrigger.d.ts

@@ -32,6 +32,7 @@ export declare type ShareDialogWithTriggerProps = Pick<ShareDialogContainerProps
     submitButtonLabel?: React.ReactNode;
 };
 export declare type ShareDialogWithTriggerStates = {
+    isLoading: boolean;
     isDialogOpen: boolean;
     isSharing: boolean;
     shareError?: ShareError;