@atlaskit/share 3.3.1 → 3.4.2

package/dist/es2019/components/ShareForm.js

@@ -1,8 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
@@ -20,11 +22,11 @@ import CopyLinkButton from './CopyLinkButton';
 import { IntegrationForm } from './IntegrationForm';
 import { ShareHeader } from './ShareHeader';
 import { UserPickerField } from './UserPickerField';
-const SubmitButtonWrapper = styled.div`
+const submitButtonWrapperStyles = css`
   display: flex;
   margin-left: auto;
 `;
-const CenterAlignedIconWrapper = styled.div`
+const centerAlignedIconWrapperStyles = css`
   display: flex;
   align-self: center;
   padding: 0 10px;
@@ -33,7 +35,7 @@ const CenterAlignedIconWrapper = styled.div`
     line-height: 1;
   }
 `;
-export const FormWrapper = styled.div`
+export const formWrapperStyles = css`
   margin-top: ${gridSize()}px;
   width: 100%;
 
@@ -42,24 +44,23 @@ export const FormWrapper = styled.div`
     margin-top: 0;
   }
 `;
-export const FormFooter = styled.div`
-  margin-bottom: ${gridSize}px;
+export const formFooterStyles = css`
   display: flex;
   justify-content: flex-start;
 `;
-const FormField = styled.div`
+const formFieldStyles = css`
   margin-bottom: 12px;
 `;
-const IntegrationWrapper = styled.div`
+const integrationWrapperStyles = css`
   display: flex;
   align-items: center;
 `;
-const IntegrationIconWrapper = styled.span`
+const integrationIconWrapperStyles = css`
   margin-bottom: -6px;
   margin-right: 5px;
 `;
 
-const integrationTabText = integrationName => /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
+const integrationTabText = integrationName => jsx(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
   values: {
     integrationName
   }
@@ -99,13 +100,15 @@ class InternalForm extends React.PureComponent {
         helperMessage,
         orgId
       } = this.props;
-      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,
@@ -120,9 +123,14 @@ class InternalForm extends 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,
@@ -151,18 +159,22 @@ class InternalForm extends React.PureComponent {
       const sendLabel = isPublicLink ? formPublicLabel : formSendLabel;
       const buttonLabel = shareError ? messages.formRetry : sendLabel;
       const 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(this, "renderMainTabTitle", () => {
@@ -176,13 +188,13 @@ class InternalForm extends React.PureComponent {
       }
 
       if (!product) {
-        return /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle);
+        return jsx(FormattedMessage, messages.formTitle);
       }
 
       const productShareType = product === 'jira' ? { ...messages.shareMainTabTextJira
       } : { ...messages.shareMainTabTextConfluence
       };
-      return /*#__PURE__*/React.createElement(FormattedMessage, productShareType);
+      return jsx(FormattedMessage, productShareType);
     });
 
     _defineProperty(this, "changeTab", tab => {
@@ -220,23 +232,31 @@ class InternalForm extends React.PureComponent {
     const 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-${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: () => handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog(),
         changeTab: this.changeTab
@@ -253,12 +273,12 @@ _defineProperty(InternalForm, "defaultProps", {
 });
 
 const InternalFormWithIntl = injectIntl(InternalForm);
-export const ShareForm = props => /*#__PURE__*/React.createElement(Form, {
+export const ShareForm = props => jsx(Form, {
   onSubmit: props.onSubmit
 }, ({
   formProps,
   getValues
-}) => /*#__PURE__*/React.createElement(InternalFormWithIntl, _extends({}, props, {
+}) => jsx(InternalFormWithIntl, _extends({}, props, {
   formProps: formProps,
   getValues: getValues
 })));

package/dist/es2019/components/ShareHeader.js

@@ -1,15 +1,16 @@
+/** @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';
-const HeaderWrapper = styled.div`
+const headerWrapperStyles = css`
   display: flex;
   justify-content: space-between;
 `;
-export const FormHeaderTitle = styled.h1`
-  ${h500};
+export const getFormHeaderTitleStyles = theme => css`
+  ${h500(theme)}
   line-height: ${gridSize() * 4}px;
   margin-right: ${gridSize() * 4}px;
   margin-top: ${gridSize() * 4}px;
@@ -23,4 +24,11 @@ export const FormHeaderTitle = styled.h1`
 `;
 export const ShareHeader = ({
   title
-}) => /*#__PURE__*/React.createElement(HeaderWrapper, null, /*#__PURE__*/React.createElement(FormHeaderTitle, null, title || /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle)));
+}) => {
+  const theme = useTheme();
+  return jsx("div", {
+    css: headerWrapperStyles
+  }, jsx("h1", {
+    css: getFormHeaderTitleStyles(theme)
+  }, title || jsx(FormattedMessage, messages.formTitle)));
+};

package/dist/es2019/components/SplitButton.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
@@ -11,7 +13,7 @@ import { token } from '@atlaskit/tokens';
 import { messages } from '../i18n';
 import { shareIntegrationButtonEvent } from './analytics/analytics';
 import IntegrationButton from './IntegrationButton';
-const SplitButtonWrapper = styled.div`
+const splitButtonWrapperStyles = css`
   display: flex;
   button {
     border-radius: ${borderRadius()}px 0 0 ${borderRadius()}px;
@@ -20,7 +22,7 @@ const SplitButtonWrapper = styled.div`
     border-radius: ${borderRadius()}px 0 0 ${borderRadius()}px;
   }
 `;
-const DropdownMenuWrapper = styled.div`
+const dropdownMenuWrapperStyles = css`
   margin-left: 1px;
   button {
     border-radius: 0 ${borderRadius()}px ${borderRadius()}px 0;
@@ -28,14 +30,15 @@ const DropdownMenuWrapper = styled.div`
   button:hover {
     border-radius: 0 ${borderRadius()}px ${borderRadius()}px 0;
   }
-`;
-const DropDownIntegrationButtonWrapper = styled.span`
+`; // span
+
+const dropDownIntegrationButtonWrapperStyles = css`
   button:hover {
     background: transparent;
   }
 `;
 
-const integrationButtonText = integrationName => /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.shareToIntegrationButtonText, {
+const integrationButtonText = integrationName => jsx(FormattedMessage, _extends({}, messages.shareToIntegrationButtonText, {
   values: {
     integrationName
   }
@@ -64,14 +67,16 @@ const 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: ({
       triggerRef,
       ...providedProps
-    }) => /*#__PURE__*/React.createElement(Button, _extends({}, providedProps, {
+    }) => jsx(Button, _extends({}, providedProps, {
       ref: triggerRef,
-      iconBefore: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      iconBefore: jsx(ChevronDownIcon, {
         label: ""
       }),
       appearance: triggerButtonAppearance
@@ -79,10 +84,12 @@ const SplitButtonDropdown = props => {
     placement: "bottom-end",
     isOpen: isUsingSplitButton,
     onOpenChange: onOpenChange
-  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, shareIntegrations.map(integration => /*#__PURE__*/React.createElement(DropdownItem, {
+  }, jsx(DropdownItemGroup, null, shareIntegrations.map(integration => jsx(DropdownItem, {
     key: integration.type,
     testId: `split-button-dropdownitem-${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: () => onIntegrationButtonClick(integration),
@@ -105,9 +112,10 @@ export default function SplitButton({
   dialogPlacement,
   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/es2019/components/analytics/analytics.js

@@ -2,7 +2,7 @@ import { isEmail, isTeam, isUser } from '@atlaskit/smart-user-picker';
 
 const buildAttributes = (attributes = {}) => ({
   packageName: "@atlaskit/share",
-  packageVersion: "3.3.1",
+  packageVersion: "3.4.2",
   ...attributes
 });
 

package/dist/es2019/version.json

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

package/dist/esm/components/CopyLinkButton.js

@@ -14,9 +14,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 CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import LinkFilledIcon from '@atlaskit/icon/glyph/link-filled';
 import Popup from '@atlaskit/popup';
@@ -30,12 +31,12 @@ import Button from './styles';
 var Z_INDEX = layers.modal();
 var AUTO_DISMISS_SECONDS = 8;
 export var AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
-export var MessageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: -8px -16px;\n"])));
+export var messageContainerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: -8px -16px;\n"])));
 var isSafari = navigator.userAgent.indexOf('Safari');
-var MessageSpan = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-indent: 6px;\n"])));
+var messageTextStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-indent: 6px;\n"])));
 export var HiddenInput = /*#__PURE__*/React.forwardRef( // we need a hidden input to reliably copy to clipboard across all browsers.
 function (props, ref) {
-  return /*#__PURE__*/React.createElement("input", {
+  return jsx("input", {
     style: {
       position: 'absolute',
       left: '-9999px'
@@ -112,16 +113,16 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
           formatMessage = _this$props.intl.formatMessage,
           isDisabled = _this$props.isDisabled,
           isPublicLink = _this$props.isPublicLink;
-      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));
     });
 
     return _this;
@@ -141,25 +142,30 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           formatMessage = _this$props2.intl.formatMessage,
           copyTooltipText = _this$props2.copyTooltipText;
-      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: function content() {
-          return /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(MessageContainer, null, /*#__PURE__*/React.createElement(CheckCircleIcon, {
+          return 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: function trigger(triggerProps) {
-          return copyTooltipText ? /*#__PURE__*/React.createElement(Tooltip, {
+          return copyTooltipText ? jsx(Tooltip, {
             content: copyTooltipText,
             position: "bottom-start"
           }, _this2.renderTriggerButton(triggerProps)) : _this2.renderTriggerButton(triggerProps);

package/dist/esm/components/IntegrationButton.js

@@ -4,15 +4,14 @@ var _excluded = ["text", "textColor", "IntegrationIcon"];
 
 var _templateObject, _templateObject2;
 
+/** @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';
-var IntegrationButtonCopyWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  justify-content: left;\n"])), function (props) {
-  return props.theme.textColor || token('color.text', N500);
-});
-var IntegrationIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 1px 8px 0 0;\n"])));
+var integrationButtonCopyWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: left;\n"])));
+var integrationIconWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 1px 8px 0 0;\n"])));
 
 var IntegrationButton = function IntegrationButton(props) {
   var text = props.text,
@@ -20,11 +19,14 @@ var IntegrationButton = function IntegrationButton(props) {
       IntegrationIcon = props.IntegrationIcon,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  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/esm/components/IntegrationForm.js

@@ -2,10 +2,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { h500 } from '@atlaskit/theme/typography';
-export var FormWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), h500());
+export var formWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), h500());
 export var IntegrationForm = function IntegrationForm(_ref) {
   var Content = _ref.Content,
       _ref$onIntegrationClo = _ref.onIntegrationClose,
@@ -16,7 +17,9 @@ export var IntegrationForm = function IntegrationForm(_ref) {
       changeTab = _ref$changeTab === void 0 ? function () {
     return undefined;
   } : _ref$changeTab;
-  return /*#__PURE__*/React.createElement(FormWrapper, null, Content && /*#__PURE__*/React.createElement(Content, {
+  return jsx("div", {
+    css: formWrapperStyle
+  }, Content && jsx(Content, {
     onClose: onIntegrationClose,
     changeTab: changeTab
   }));

package/dist/esm/components/LazyShareForm/LazyShareForm.js

@@ -14,6 +14,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,
@@ -44,6 +45,9 @@ function LazyShareForm(props) {
       showTitle = props.showTitle,
       orgId = props.orgId;
   var 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(function () {
+    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/esm/components/LazyShareForm/lazy.js

@@ -13,7 +13,11 @@ var LazyShareFormLazy = lazyForPaint(function () {
 
 var LoadingDialog = function LoadingDialog(_ref) {
   var shareFormTitle = _ref.shareFormTitle,
-      showTitle = _ref.showTitle;
+      showTitle = _ref.showTitle,
+      setIsLoading = _ref.setIsLoading;
+  React.useEffect(function () {
+    setIsLoading(true);
+  });
   return /*#__PURE__*/React.createElement(ShareFormWrapper, {
     shareFormTitle: shareFormTitle // if `showTitle` is passed, we use it. Otherwise, we will show title for loading dialog.
     ,
@@ -25,7 +29,8 @@ export default (function (props) {
   return /*#__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));
 });