@atlaskit/share 3.3.1 → 3.4.2

package/dist/cjs/components/ShareHeader.js

@@ -5,15 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShareHeader = exports.FormHeaderTitle = void 0;
+exports.getFormHeaderTitleStyles = exports.ShareHeader = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 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 _constants = require("@atlaskit/theme/constants");
 
@@ -23,15 +23,22 @@ var _i18n = require("../i18n");
 
 var _templateObject, _templateObject2;
 
-var HeaderWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var headerWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
 
-var FormHeaderTitle = _styledComponents.default.h1(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _typography.h500, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4);
+var getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _typography.h500)(theme), (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4);
+};
 
-exports.FormHeaderTitle = FormHeaderTitle;
+exports.getFormHeaderTitleStyles = getFormHeaderTitleStyles;
 
 var ShareHeader = function ShareHeader(_ref) {
   var title = _ref.title;
-  return /*#__PURE__*/_react.default.createElement(HeaderWrapper, null, /*#__PURE__*/_react.default.createElement(FormHeaderTitle, null, title || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.formTitle)));
+  var theme = (0, _react2.useTheme)();
+  return (0, _react2.jsx)("div", {
+    css: headerWrapperStyles
+  }, (0, _react2.jsx)("h1", {
+    css: getFormHeaderTitleStyles(theme)
+  }, title || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.formTitle)));
 };
 
 exports.ShareHeader = ShareHeader;

package/dist/cjs/components/SplitButton.js

@@ -17,9 +17,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(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 _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
@@ -47,14 +47,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var SplitButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)());
-
-var DropdownMenuWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)());
+var splitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)());
+var dropdownMenuWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)()); // span
 
-var DropDownIntegrationButtonWrapper = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  button:hover {\n    background: transparent;\n  }\n"])));
+var dropDownIntegrationButtonWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  button:hover {\n    background: transparent;\n  }\n"])));
 
 var integrationButtonText = function integrationButtonText(integrationName) {
-  return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareToIntegrationButtonText, {
+  return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareToIntegrationButtonText, {
     values: {
       integrationName: integrationName
     }
@@ -82,14 +81,16 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
     onIntegrationClick(integration);
     createAndFireEvent((0, _analytics.shareIntegrationButtonEvent)(integration.type));
   }, [createAndFireEvent, onIntegrationClick]);
-  return /*#__PURE__*/_react.default.createElement(DropdownMenuWrapper, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+  return (0, _react2.jsx)("div", {
+    css: dropdownMenuWrapperStyles
+  }, (0, _react2.jsx)(_dropdownMenu.default, {
     testId: "split-button-dropdown",
     trigger: function trigger(_ref2) {
       var triggerRef = _ref2.triggerRef,
           providedProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, providedProps, {
+      return (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, providedProps, {
         ref: triggerRef,
-        iconBefore: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+        iconBefore: (0, _react2.jsx)(_chevronDown.default, {
           label: ""
         }),
         appearance: triggerButtonAppearance
@@ -98,11 +99,13 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
     placement: "bottom-end",
     isOpen: isUsingSplitButton,
     onOpenChange: onOpenChange
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, shareIntegrations.map(function (integration) {
-    return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+  }, (0, _react2.jsx)(_dropdownMenu.DropdownItemGroup, null, shareIntegrations.map(function (integration) {
+    return (0, _react2.jsx)(_dropdownMenu.DropdownItem, {
       key: integration.type,
       testId: "split-button-dropdownitem-".concat(integration.type)
-    }, /*#__PURE__*/_react.default.createElement(DropDownIntegrationButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_IntegrationButton.default, {
+    }, (0, _react2.jsx)("span", {
+      css: dropDownIntegrationButtonWrapperStyles
+    }, (0, _react2.jsx)(_IntegrationButton.default, {
       textColor: (0, _tokens.token)('color.text', _colors.N800),
       appearance: "subtle",
       onClick: function onClick() {
@@ -128,9 +131,10 @@ function SplitButton(_ref3) {
       dialogZIndex = _ref3.dialogZIndex,
       dialogPlacement = _ref3.dialogPlacement,
       createAndFireEvent = _ref3.createAndFireEvent;
-  return /*#__PURE__*/_react.default.createElement(SplitButtonWrapper, {
+  return (0, _react2.jsx)("div", {
+    css: splitButtonWrapperStyles,
     "data-testid": "split-button"
-  }, shareButton, /*#__PURE__*/_react.default.createElement(SplitButtonDropdown, {
+  }, shareButton, (0, _react2.jsx)(SplitButtonDropdown, {
     shareIntegrations: shareIntegrations,
     triggerButtonAppearance: triggerButtonAppearance,
     isUsingSplitButton: isUsingSplitButton,

package/dist/cjs/components/analytics/analytics.js

@@ -19,7 +19,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/cjs/version.json

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

package/dist/es2019/components/CopyLinkButton.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @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 CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import LinkFilledIcon from '@atlaskit/icon/glyph/link-filled';
 import Popup from '@atlaskit/popup';
@@ -16,17 +18,17 @@ import Button from './styles';
 const Z_INDEX = layers.modal();
 const AUTO_DISMISS_SECONDS = 8;
 export const AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
-export const MessageContainer = styled.div`
+export const messageContainerStyle = css`
   display: flex;
   align-items: center;
   margin: -8px -16px;
 `;
 const isSafari = navigator.userAgent.indexOf('Safari');
-const MessageSpan = styled.span`
+const messageTextStyle = css`
   text-indent: 6px;
 `;
 export const HiddenInput = /*#__PURE__*/React.forwardRef( // we need a hidden input to reliably copy to clipboard across all browsers.
-(props, ref) => /*#__PURE__*/React.createElement("input", {
+(props, ref) => jsx("input", {
   style: {
     position: 'absolute',
     left: '-9999px'
@@ -90,16 +92,16 @@ export class CopyLinkButton extends React.Component {
         isDisabled,
         isPublicLink
       } = this.props;
-      return /*#__PURE__*/React.createElement(Button, _extends({
+      return jsx(Button, _extends({
         "aria-label": formatMessage(isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText),
         isDisabled: isDisabled,
         appearance: "subtle-link",
-        iconBefore: /*#__PURE__*/React.createElement(LinkFilledIcon, {
+        iconBefore: jsx(LinkFilledIcon, {
           label: "",
           size: "medium"
         }),
         onClick: this.handleClick
-      }, triggerProps), /*#__PURE__*/React.createElement(FormattedMessage, isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText));
+      }, triggerProps), jsx(FormattedMessage, isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText));
     });
   }
 
@@ -117,22 +119,27 @@ export class CopyLinkButton extends React.Component {
       },
       copyTooltipText
     } = this.props;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isSafari && /*#__PURE__*/React.createElement("div", {
+    return jsx(React.Fragment, null, isSafari && jsx("div", {
       className: "assistive",
       "aria-live": "assertive"
-    }, shouldShowCopiedMessage && formatMessage(messages.copiedToClipboardMessage)), /*#__PURE__*/React.createElement(HiddenInput, {
+    }, shouldShowCopiedMessage && formatMessage(messages.copiedToClipboardMessage)), jsx(HiddenInput, {
       ref: this.inputRef,
       text: this.props.link
-    }), /*#__PURE__*/React.createElement(Popup, {
+    }), jsx(Popup, {
       zIndex: Z_INDEX,
-      content: () => /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(CheckCircleIcon, {
+      content: () => jsx(InlineDialogContentWrapper, null, jsx("div", {
+        css: messageContainerStyle,
+        "data-testid": "message-container"
+      }, jsx(CheckCircleIcon, {
         label: "",
         primaryColor: token('color.icon.success', G300)
-      }), /*#__PURE__*/React.createElement(MessageSpan, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.copiedToClipboardMessage)))),
+      }), jsx("span", {
+        css: messageTextStyle
+      }, jsx(FormattedMessage, messages.copiedToClipboardMessage)))),
       isOpen: shouldShowCopiedMessage,
       onClose: this.handleDismissCopiedMessage,
       placement: "top-start",
-      trigger: triggerProps => copyTooltipText ? /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: triggerProps => copyTooltipText ? jsx(Tooltip, {
         content: copyTooltipText,
         position: "bottom-start"
       }, this.renderTriggerButton(triggerProps)) : this.renderTriggerButton(triggerProps)

package/dist/es2019/components/IntegrationButton.js

@@ -1,14 +1,14 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N500 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-const IntegrationButtonCopyWrapper = styled.span`
-  color: ${props => props.theme.textColor || token('color.text', N500)};
+const integrationButtonCopyWrapperStyle = css`
   display: flex;
   justify-content: left;
 `;
-const IntegrationIconWrapper = styled.span`
+const integrationIconWrapperStyle = css`
   margin: 1px 8px 0 0;
 `;
 
@@ -19,11 +19,14 @@ const IntegrationButton = props => {
     IntegrationIcon,
     ...restProps
   } = props;
-  return /*#__PURE__*/React.createElement(Button, restProps, /*#__PURE__*/React.createElement(IntegrationButtonCopyWrapper, {
-    theme: {
-      textColor: textColor
+  return jsx(Button, restProps, jsx("span", {
+    css: integrationButtonCopyWrapperStyle,
+    style: {
+      color: textColor || token('color.text', N500)
     }
-  }, /*#__PURE__*/React.createElement(IntegrationIconWrapper, null, /*#__PURE__*/React.createElement(IntegrationIcon, null)), /*#__PURE__*/React.createElement("span", null, text)));
+  }, jsx("span", {
+    css: integrationIconWrapperStyle
+  }, jsx(IntegrationIcon, null)), jsx("span", null, text)));
 };
 
 IntegrationButton.displayName = 'IntegrationButton';

package/dist/es2019/components/IntegrationForm.js

@@ -1,7 +1,8 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { h500 } from '@atlaskit/theme/typography';
-export const FormWrapper = styled.div`
+export const formWrapperStyle = css`
   [class^='FormHeader__FormHeaderWrapper'] {
     h1:first-child {
       ${h500()}
@@ -33,7 +34,9 @@ export const IntegrationForm = ({
   Content,
   onIntegrationClose = () => undefined,
   changeTab = () => undefined
-}) => /*#__PURE__*/React.createElement(FormWrapper, null, Content && /*#__PURE__*/React.createElement(Content, {
+}) => jsx("div", {
+  css: formWrapperStyle
+}, Content && jsx(Content, {
   onClose: onIntegrationClose,
   changeTab: changeTab
 }));

package/dist/es2019/components/LazyShareForm/LazyShareForm.js

@@ -15,6 +15,7 @@ function LazyShareForm(props) {
     copyLink,
     config,
     isFetchingConfig,
+    setIsLoading,
     loadOptions,
     shareFormTitle,
     shareFormHelperMessage,
@@ -49,6 +50,9 @@ function LazyShareForm(props) {
     orgId
   } = props;
   const footer = /*#__PURE__*/React.createElement("div", null, bottomMessage ? /*#__PURE__*/React.createElement(BottomMessageWrapper, null, bottomMessage) : null, customFooter && selectedIntegration === null && /*#__PURE__*/React.createElement(CustomFooterWrapper, null, customFooter));
+  React.useEffect(() => {
+    setIsLoading(false);
+  });
   return /*#__PURE__*/React.createElement(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/es2019/components/LazyShareForm/lazy.js

@@ -11,16 +11,23 @@ const LazyShareFormLazy = lazyForPaint(() => import(
 
 const LoadingDialog = ({
   shareFormTitle,
-  showTitle
-}) => /*#__PURE__*/React.createElement(ShareFormWrapper, {
-  shareFormTitle: shareFormTitle // if `showTitle` is passed, we use it. Otherwise, we will show title for loading dialog.
-  ,
-  shouldShowTitle: typeof showTitle === 'boolean' ? showTitle : true
-}, /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, null)));
+  showTitle,
+  setIsLoading
+}) => {
+  React.useEffect(() => {
+    setIsLoading(true);
+  });
+  return /*#__PURE__*/React.createElement(ShareFormWrapper, {
+    shareFormTitle: shareFormTitle // if `showTitle` is passed, we use it. Otherwise, we will show title for loading dialog.
+    ,
+    shouldShowTitle: typeof showTitle === 'boolean' ? showTitle : true
+  }, /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, null)));
+};
 
 export default (props => /*#__PURE__*/React.createElement(LazySuspense, {
   fallback: /*#__PURE__*/React.createElement(LoadingDialog, {
     shareFormTitle: props.shareFormTitle,
-    showTitle: props.showTitle
+    showTitle: props.showTitle,
+    setIsLoading: props.setIsLoading
   })
 }, /*#__PURE__*/React.createElement(LazyShareFormLazy, props)));

package/dist/es2019/components/ShareDialogWithTrigger.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @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';
@@ -20,7 +22,7 @@ import LazyShareFormLazy from './LazyShareForm/lazy';
 import ShareButton from './ShareButton';
 import SplitButton from './SplitButton';
 import { generateSelectZIndex, resolveShareFooter } from './utils';
-const ShareButtonWrapper = styled.div`
+const shareButtonWrapperStyles = css`
   display: inline-flex;
   outline: none;
 `;
@@ -50,7 +52,8 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
       isUsingSplitButton: false,
       showIntegrationForm: false,
       selectedIntegration: null,
-      tabIndex: 0
+      tabIndex: 0,
+      isLoading: false
     });
 
     _defineProperty(this, "closeAndResetDialog", () => {
@@ -126,14 +129,32 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
       }];
     });
 
+    _defineProperty(this, "setIsLoading", isLoading => {
+      this.setState({
+        isLoading
+      });
+    });
+
+    _defineProperty(this, "focus", () => {
+      if (this.containerRef.current) {
+        this.containerRef.current.focus();
+      }
+    });
+
     _defineProperty(this, "handleKeyDown", event => {
       const {
+        isLoading,
         isDialogOpen
       } = this.state;
       const {
         shouldCloseOnEscapePress
       } = this.props;
 
+      if (isLoading) {
+        event.stopPropagation();
+        this.focus();
+      }
+
       if (isDialogOpen) {
         switch (event.key) {
           case 'Esc':
@@ -145,10 +166,7 @@ export class ShareDialogWithTriggerInternal extends 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
             // the right events.
@@ -192,9 +210,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
             onDialogOpen();
           }
 
-          if (this.containerRef.current) {
-            this.containerRef.current.focus();
-          }
+          this.focus();
         }
       });
     });
@@ -326,12 +342,12 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
           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,
@@ -341,7 +357,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
 
 
       if (triggerButtonStyle === 'icon-only') {
-        button = /*#__PURE__*/React.createElement(Aktooltip, {
+        button = jsx(Aktooltip, {
           content: !isUsingSplitButton ? triggerButtonTooltipText || formatMessage(messages.shareTriggerButtonTooltipText) : null,
           position: triggerButtonTooltipPosition,
           hideTooltipOnClick: true
@@ -350,7 +366,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
 
 
       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,
@@ -432,14 +448,15 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
     } : undefined;
     const 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, {
-      content: () => /*#__PURE__*/React.createElement("div", {
+    }, jsx(Popup, {
+      content: () => jsx("div", {
         ref: this.containerRef
-      }, /*#__PURE__*/React.createElement(LazyShareFormLazy, {
+      }, jsx(LazyShareFormLazy, {
         Content: selectedIntegration && selectedIntegration.Content,
         selectedIntegration: selectedIntegration,
         copyLink: copyLink,
@@ -455,6 +472,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
         defaultValue: defaultValue,
         config: config,
         isFetchingConfig: isFetchingConfig,
+        setIsLoading: this.setIsLoading,
         submitButtonLabel: submitButtonLabel,
         product: product,
         enableSmartUserPicker: enableSmartUserPicker,
@@ -481,9 +499,9 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
       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
     })));
   }