@atlaskit/share 3.4.0 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/share
 
+## 3.5.0
+
+### Minor Changes
+
+- [`76c73df383f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/76c73df383f) - Exposed CopyLinkButton from share component and made it generic.
+
+## 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

package/copy-link-button/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/share/copy-link-button",
+  "main": "../dist/cjs/components/CopyLinkButton.js",
+  "module": "../dist/esm/components/CopyLinkButton.js",
+  "module:es2019": "../dist/es2019/components/CopyLinkButton.js",
+  "types": "../dist/types/components/CopyLinkButton.d.ts"
+}

package/dist/cjs/components/CopyLinkButton.js

@@ -29,8 +29,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var _reactIntlNext = require("react-intl-next");
-
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 
 var _linkFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/link-filled"));
@@ -45,8 +43,6 @@ var _tokens = require("@atlaskit/tokens");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _i18n = require("../i18n");
-
 var _styled = require("./ShareFormWrapper/styled");
 
 var _styles = _interopRequireDefault(require("./styles"));
@@ -64,8 +60,8 @@ var AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
 exports.AUTO_DISMISS_MS = AUTO_DISMISS_MS;
 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 messageTextStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-indent: 6px;\n"])));
+var isSafari = navigator.userAgent.indexOf('Safari');
 
 var HiddenInput = /*#__PURE__*/_react.default.forwardRef( // we need a hidden input to reliably copy to clipboard across all browsers.
 function (props, ref) {
@@ -140,19 +136,20 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderTriggerButton", function (triggerProps) {
       var _this$props = _this.props,
-          formatMessage = _this$props.intl.formatMessage,
           isDisabled = _this$props.isDisabled,
-          isPublicLink = _this$props.isPublicLink;
+          copyLinkButtonText = _this$props.copyLinkButtonText,
+          children = _this$props.children,
+          iconBefore = _this$props.iconBefore;
       return (0, _react2.jsx)(_styles.default, (0, _extends2.default)({
-        "aria-label": formatMessage(isPublicLink ? _i18n.messages.copyPublicLinkButtonText : _i18n.messages.copyLinkButtonText),
+        "aria-label": copyLinkButtonText,
         isDisabled: isDisabled,
         appearance: "subtle-link",
-        iconBefore: (0, _react2.jsx)(_linkFilled.default, {
+        iconBefore: iconBefore || (0, _react2.jsx)(_linkFilled.default, {
           label: "",
           size: "medium"
         }),
         onClick: _this.handleClick
-      }, triggerProps), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, isPublicLink ? _i18n.messages.copyPublicLinkButtonText : _i18n.messages.copyLinkButtonText));
+      }, triggerProps), children || copyLinkButtonText);
     });
     return _this;
   }
@@ -169,12 +166,12 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
 
       var shouldShowCopiedMessage = this.state.shouldShowCopiedMessage;
       var _this$props2 = this.props,
-          formatMessage = _this$props2.intl.formatMessage,
-          copyTooltipText = _this$props2.copyTooltipText;
+          copyTooltipText = _this$props2.copyTooltipText,
+          copiedToClipboardText = _this$props2.copiedToClipboardText;
       return (0, _react2.jsx)(_react.default.Fragment, null, isSafari && (0, _react2.jsx)("div", {
         className: "assistive",
         "aria-live": "assertive"
-      }, shouldShowCopiedMessage && formatMessage(_i18n.messages.copiedToClipboardMessage)), (0, _react2.jsx)(HiddenInput, {
+      }, shouldShowCopiedMessage && copiedToClipboardText), (0, _react2.jsx)(HiddenInput, {
         ref: this.inputRef,
         text: this.props.link
       }), (0, _react2.jsx)(_popup.default, {
@@ -183,12 +180,12 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
           return (0, _react2.jsx)(_styled.InlineDialogContentWrapper, null, (0, _react2.jsx)("div", {
             css: messageContainerStyle,
             "data-testid": "message-container"
-          }, (0, _react2.jsx)(_checkCircle.default, {
+          }, (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_checkCircle.default, {
             label: "",
             primaryColor: (0, _tokens.token)('color.icon.success', _colors.G300)
-          }), (0, _react2.jsx)("span", {
+          }), (0, _react2.jsx)("div", {
             css: messageTextStyle
-          }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.copiedToClipboardMessage))));
+          }, copiedToClipboardText))));
         },
         isOpen: shouldShowCopiedMessage,
         onClose: this.handleDismissCopiedMessage,
@@ -206,7 +203,5 @@ var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
 }(_react.default.Component);
 
 exports.CopyLinkButton = CopyLinkButton;
-
-var _default = (0, _reactIntlNext.injectIntl)(CopyLinkButton);
-
+var _default = CopyLinkButton;
 exports.default = _default;

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

@@ -108,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({
@@ -175,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':
@@ -190,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
@@ -238,9 +255,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
             onDialogOpen();
           }
 
-          if (_this.containerRef.current) {
-            _this.containerRef.current.focus();
-          }
+          _this.focus();
         }
       });
     });
@@ -339,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,
@@ -443,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,
@@ -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,

package/dist/cjs/components/ShareForm.js

@@ -142,7 +142,8 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           isPublicLink = _this$props.isPublicLink,
           copyTooltipText = _this$props.copyTooltipText,
           helperMessage = _this$props.helperMessage,
-          orgId = _this$props.orgId;
+          orgId = _this$props.orgId,
+          formatMessage = _this$props.intl.formatMessage;
       return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
         data: {
           source: _analytics.ANALYTICS_SOURCE
@@ -177,8 +178,9 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         isDisabled: isDisabled,
         onLinkCopy: onLinkCopy,
         link: copyLink,
-        isPublicLink: isPublicLink,
-        copyTooltipText: copyTooltipText
+        copyTooltipText: copyTooltipText,
+        copyLinkButtonText: formatMessage(isPublicLink ? _i18n.messages.copyPublicLinkButtonText : _i18n.messages.copyLinkButtonText),
+        copiedToClipboardText: formatMessage(_i18n.messages.copiedToClipboardMessage)
       }), _this.renderSubmitButton())));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSubmitButton", function () {

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.4.0"
+    packageVersion: "3.5.0"
   }, attributes);
 };
 

package/dist/cjs/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "ADMIN_NOTIFIED", {
     return _types.ADMIN_NOTIFIED;
   }
 });
+Object.defineProperty(exports, "CopyLinkButton", {
+  enumerable: true,
+  get: function get() {
+    return _CopyLinkButton.CopyLinkButton;
+  }
+});
 Object.defineProperty(exports, "OBJECT_SHARED", {
   enumerable: true,
   get: function get() {
@@ -24,4 +30,6 @@ Object.defineProperty(exports, "ShareDialogContainer", {
 
 var _ShareDialogContainer = require("./components/ShareDialogContainer");
 
+var _CopyLinkButton = require("./components/CopyLinkButton");
+
 var _types = require("./types");

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.4.0"
+	"version": "3.5.0"
 }

package/dist/es2019/components/CopyLinkButton.js

@@ -4,7 +4,6 @@ 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 CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import LinkFilledIcon from '@atlaskit/icon/glyph/link-filled';
 import Popup from '@atlaskit/popup';
@@ -12,7 +11,6 @@ import { G300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
-import { messages } from '../i18n';
 import { InlineDialogContentWrapper } from './ShareFormWrapper/styled';
 import Button from './styles';
 const Z_INDEX = layers.modal();
@@ -23,10 +21,10 @@ export const messageContainerStyle = css`
   align-items: center;
   margin: -8px -16px;
 `;
-const isSafari = navigator.userAgent.indexOf('Safari');
 const messageTextStyle = css`
   text-indent: 6px;
 `;
+const isSafari = navigator.userAgent.indexOf('Safari');
 export const HiddenInput = /*#__PURE__*/React.forwardRef( // we need a hidden input to reliably copy to clipboard across all browsers.
 (props, ref) => jsx("input", {
   style: {
@@ -86,22 +84,21 @@ export class CopyLinkButton extends React.Component {
 
     _defineProperty(this, "renderTriggerButton", triggerProps => {
       const {
-        intl: {
-          formatMessage
-        },
         isDisabled,
-        isPublicLink
+        copyLinkButtonText,
+        children,
+        iconBefore
       } = this.props;
       return jsx(Button, _extends({
-        "aria-label": formatMessage(isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText),
+        "aria-label": copyLinkButtonText,
         isDisabled: isDisabled,
         appearance: "subtle-link",
-        iconBefore: jsx(LinkFilledIcon, {
+        iconBefore: iconBefore || jsx(LinkFilledIcon, {
           label: "",
           size: "medium"
         }),
         onClick: this.handleClick
-      }, triggerProps), jsx(FormattedMessage, isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText));
+      }, triggerProps), children || copyLinkButtonText);
     });
   }
 
@@ -114,15 +111,13 @@ export class CopyLinkButton extends React.Component {
       shouldShowCopiedMessage
     } = this.state;
     const {
-      intl: {
-        formatMessage
-      },
-      copyTooltipText
+      copyTooltipText,
+      copiedToClipboardText
     } = this.props;
     return jsx(React.Fragment, null, isSafari && jsx("div", {
       className: "assistive",
       "aria-live": "assertive"
-    }, shouldShowCopiedMessage && formatMessage(messages.copiedToClipboardMessage)), jsx(HiddenInput, {
+    }, shouldShowCopiedMessage && copiedToClipboardText), jsx(HiddenInput, {
       ref: this.inputRef,
       text: this.props.link
     }), jsx(Popup, {
@@ -130,12 +125,12 @@ export class CopyLinkButton extends React.Component {
       content: () => jsx(InlineDialogContentWrapper, null, jsx("div", {
         css: messageContainerStyle,
         "data-testid": "message-container"
-      }, jsx(CheckCircleIcon, {
+      }, jsx(React.Fragment, null, jsx(CheckCircleIcon, {
         label: "",
         primaryColor: token('color.icon.success', G300)
-      }), jsx("span", {
+      }), jsx("div", {
         css: messageTextStyle
-      }, jsx(FormattedMessage, messages.copiedToClipboardMessage)))),
+      }, copiedToClipboardText)))),
       isOpen: shouldShowCopiedMessage,
       onClose: this.handleDismissCopiedMessage,
       placement: "top-start",
@@ -147,4 +142,4 @@ export class CopyLinkButton extends React.Component {
   }
 
 }
-export default injectIntl(CopyLinkButton);
+export default CopyLinkButton;

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

@@ -52,7 +52,8 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
       isUsingSplitButton: false,
       showIntegrationForm: false,
       selectedIntegration: null,
-      tabIndex: 0
+      tabIndex: 0,
+      isLoading: false
     });
 
     _defineProperty(this, "closeAndResetDialog", () => {
@@ -128,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':
@@ -147,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.
@@ -194,9 +210,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
             onDialogOpen();
           }
 
-          if (this.containerRef.current) {
-            this.containerRef.current.focus();
-          }
+          this.focus();
         }
       });
     });
@@ -458,6 +472,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
         defaultValue: defaultValue,
         config: config,
         isFetchingConfig: isFetchingConfig,
+        setIsLoading: this.setIsLoading,
         submitButtonLabel: submitButtonLabel,
         product: product,
         enableSmartUserPicker: enableSmartUserPicker,

package/dist/es2019/components/ShareForm.js

@@ -98,7 +98,10 @@ class InternalForm extends React.PureComponent {
         isPublicLink,
         copyTooltipText,
         helperMessage,
-        orgId
+        orgId,
+        intl: {
+          formatMessage
+        }
       } = this.props;
       return jsx(AnalyticsContext, {
         data: {
@@ -134,8 +137,9 @@ class InternalForm extends React.PureComponent {
         isDisabled: isDisabled,
         onLinkCopy: onLinkCopy,
         link: copyLink,
-        isPublicLink: isPublicLink,
-        copyTooltipText: copyTooltipText
+        copyTooltipText: copyTooltipText,
+        copyLinkButtonText: formatMessage(isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText),
+        copiedToClipboardText: formatMessage(messages.copiedToClipboardMessage)
       }), this.renderSubmitButton())));
     });
 

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.4.0",
+  packageVersion: "3.5.0",
   ...attributes
 });
 

package/dist/es2019/index.js

@@ -1,3 +1,4 @@
 export { ShareDialogContainer } from './components/ShareDialogContainer';
+export { CopyLinkButton } from './components/CopyLinkButton';
 export { // Constants
 ADMIN_NOTIFIED, OBJECT_SHARED } from './types';

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.4.0"
+	"version": "3.5.0"
 }

package/dist/esm/components/CopyLinkButton.js

@@ -17,7 +17,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { FormattedMessage, injectIntl } from 'react-intl-next';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import LinkFilledIcon from '@atlaskit/icon/glyph/link-filled';
 import Popup from '@atlaskit/popup';
@@ -25,15 +24,14 @@ import { G300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
-import { messages } from '../i18n';
 import { InlineDialogContentWrapper } from './ShareFormWrapper/styled';
 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 messageContainerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: -8px -16px;\n"])));
-var isSafari = navigator.userAgent.indexOf('Safari');
 var messageTextStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-indent: 6px;\n"])));
+var isSafari = navigator.userAgent.indexOf('Safari');
 export var HiddenInput = /*#__PURE__*/React.forwardRef( // we need a hidden input to reliably copy to clipboard across all browsers.
 function (props, ref) {
   return jsx("input", {
@@ -110,19 +108,20 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderTriggerButton", function (triggerProps) {
       var _this$props = _this.props,
-          formatMessage = _this$props.intl.formatMessage,
           isDisabled = _this$props.isDisabled,
-          isPublicLink = _this$props.isPublicLink;
+          copyLinkButtonText = _this$props.copyLinkButtonText,
+          children = _this$props.children,
+          iconBefore = _this$props.iconBefore;
       return jsx(Button, _extends({
-        "aria-label": formatMessage(isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText),
+        "aria-label": copyLinkButtonText,
         isDisabled: isDisabled,
         appearance: "subtle-link",
-        iconBefore: jsx(LinkFilledIcon, {
+        iconBefore: iconBefore || jsx(LinkFilledIcon, {
           label: "",
           size: "medium"
         }),
         onClick: _this.handleClick
-      }, triggerProps), jsx(FormattedMessage, isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText));
+      }, triggerProps), children || copyLinkButtonText);
     });
 
     return _this;
@@ -140,12 +139,12 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
 
       var shouldShowCopiedMessage = this.state.shouldShowCopiedMessage;
       var _this$props2 = this.props,
-          formatMessage = _this$props2.intl.formatMessage,
-          copyTooltipText = _this$props2.copyTooltipText;
+          copyTooltipText = _this$props2.copyTooltipText,
+          copiedToClipboardText = _this$props2.copiedToClipboardText;
       return jsx(React.Fragment, null, isSafari && jsx("div", {
         className: "assistive",
         "aria-live": "assertive"
-      }, shouldShowCopiedMessage && formatMessage(messages.copiedToClipboardMessage)), jsx(HiddenInput, {
+      }, shouldShowCopiedMessage && copiedToClipboardText), jsx(HiddenInput, {
         ref: this.inputRef,
         text: this.props.link
       }), jsx(Popup, {
@@ -154,12 +153,12 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
           return jsx(InlineDialogContentWrapper, null, jsx("div", {
             css: messageContainerStyle,
             "data-testid": "message-container"
-          }, jsx(CheckCircleIcon, {
+          }, jsx(React.Fragment, null, jsx(CheckCircleIcon, {
             label: "",
             primaryColor: token('color.icon.success', G300)
-          }), jsx("span", {
+          }), jsx("div", {
             css: messageTextStyle
-          }, jsx(FormattedMessage, messages.copiedToClipboardMessage))));
+          }, copiedToClipboardText))));
         },
         isOpen: shouldShowCopiedMessage,
         onClose: this.handleDismissCopiedMessage,
@@ -176,4 +175,4 @@ export var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
 
   return CopyLinkButton;
 }(React.Component);
-export default injectIntl(CopyLinkButton);
+export default CopyLinkButton;

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));
 });

package/dist/esm/components/ShareDialogWithTrigger.js

@@ -78,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 () {
@@ -150,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':
@@ -165,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
@@ -214,9 +233,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
             onDialogOpen();
           }
 
-          if (_this.containerRef.current) {
-            _this.containerRef.current.focus();
-          }
+          _this.focus();
         }
       });
     });
@@ -321,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,
@@ -428,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,
@@ -489,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,

package/dist/esm/components/ShareForm.js

@@ -100,7 +100,8 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           isPublicLink = _this$props.isPublicLink,
           copyTooltipText = _this$props.copyTooltipText,
           helperMessage = _this$props.helperMessage,
-          orgId = _this$props.orgId;
+          orgId = _this$props.orgId,
+          formatMessage = _this$props.intl.formatMessage;
       return jsx(AnalyticsContext, {
         data: {
           source: ANALYTICS_SOURCE
@@ -135,8 +136,9 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         isDisabled: isDisabled,
         onLinkCopy: onLinkCopy,
         link: copyLink,
-        isPublicLink: isPublicLink,
-        copyTooltipText: copyTooltipText
+        copyTooltipText: copyTooltipText,
+        copyLinkButtonText: formatMessage(isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText),
+        copiedToClipboardText: formatMessage(messages.copiedToClipboardMessage)
       }), _this.renderSubmitButton())));
     });
 

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.4.0"
+    packageVersion: "3.5.0"
   }, attributes);
 };
 

package/dist/esm/index.js

@@ -1,3 +1,4 @@
 export { ShareDialogContainer } from './components/ShareDialogContainer';
+export { CopyLinkButton } from './components/CopyLinkButton';
 export { // Constants
 ADMIN_NOTIFIED, OBJECT_SHARED } from './types';

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "3.4.0"
+	"version": "3.5.0"
 }

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

@@ -1,7 +1,6 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { ReactElement } 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 messageContainerStyle: import("@emotion/react").SerializedStyles;
@@ -13,13 +12,16 @@ export declare type Props = {
     onLinkCopy?: (link: string) => void;
     link: string;
     isDisabled?: boolean;
-    isPublicLink?: boolean;
     copyTooltipText?: string;
+    children?: string | ReactElement;
+    copyLinkButtonText: string;
+    copiedToClipboardText: string;
+    iconBefore?: ReactElement;
 };
 export declare type State = {
     shouldShowCopiedMessage: boolean;
 };
-export declare class CopyLinkButton extends React.Component<Props & WrappedComponentProps, State> {
+export declare class CopyLinkButton extends React.Component<Props, State> {
     private autoDismiss;
     private inputRef;
     state: {
@@ -32,7 +34,4 @@ export declare class CopyLinkButton extends React.Component<Props & WrappedCompo
     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">>;
-};
-export default _default;
+export default CopyLinkButton;

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

@@ -24,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;

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { ShareDialogContainer } from './components/ShareDialogContainer';
+export { CopyLinkButton } from './components/CopyLinkButton';
 export { ADMIN_NOTIFIED, OBJECT_SHARED, } from './types';
 export type { Comment, Content, DialogContentState, DialogPlacement, Flag, FlagType, FormChildrenArgs, KeysOfType, MessageDescriptor, MetaData, OriginAnalyticAttributes, OriginTracing, OriginTracingFactory, OriginTracingForSubSequentEvents, OriginTracingWithIdGenerated, ProductId, ProductName, RenderCustomTriggerButton, ShareButtonStyle, ShareContentState, ShareError, ShareRequest, ShareResponse, ConfigResponse, TooltipPosition, User, UserWithEmail, UserWithId, ShareDialogContainerProps, } from './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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/share",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Fabric Share Element",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,16 +32,16 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/dropdown-menu": "^11.3.0",
+    "@atlaskit/dropdown-menu": "^11.4.0",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/popup": "^1.4.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/smart-user-picker": "^6.0.0",
     "@atlaskit/spinner": "^15.1.4",
-    "@atlaskit/tabs": "^13.2.3",
+    "@atlaskit/tabs": "^13.3.0",
     "@atlaskit/textarea": "^4.3.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
@@ -62,17 +62,17 @@
   "devDependencies": {
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/editor-test-helpers": "^17.1.0",
-    "@atlaskit/flag": "^14.6.0",
-    "@atlaskit/section-message": "^6.0.0",
-    "@atlaskit/select": "^15.5.0",
-    "@atlaskit/toggle": "^12.4.0",
+    "@atlaskit/flag": "^14.7.0",
+    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/select": "^15.7.0",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/util-data-test": "^17.5.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-react-intl": "^2.0.6",
     "react": "^16.8.0",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "keywords": [
     "ui",
@@ -104,7 +104,8 @@
   },
   "af:exports": {
     ".": "./src/index.ts",
-    "./clients": "./src/clients/index.ts"
+    "./clients": "./src/clients/index.ts",
+    "./copy-link-button": "./src/components/CopyLinkButton.tsx"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -9,11 +9,13 @@
 
 import type { Appearance } from '@atlaskit/button/types';
 import type { IconProps } from '@atlaskit/icon';
+import { jsx } from '@emotion/react';
 import type { LoadOptions } from '@atlaskit/smart-user-picker';
 import { OptionData } from '@atlaskit/smart-user-picker';
 import type { Placement } from '@atlaskit/popper';
 import { default as React_2 } from 'react';
-import type { TriggerProps } from '@atlaskit/popup';
+import { ReactElement } from 'react';
+import { TriggerProps } from '@atlaskit/popup';
 import type { Value } from '@atlaskit/smart-user-picker';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 
@@ -36,6 +38,20 @@ export declare type Content = {
   type: string;
 };
 
+export declare class CopyLinkButton extends React_2.Component<Props, State> {
+  private autoDismiss;
+  private inputRef;
+  state: {
+    shouldShowCopiedMessage: boolean;
+  };
+  componentWillUnmount(): void;
+  private clearAutoDismiss;
+  private handleClick;
+  private handleDismissCopiedMessage;
+  renderTriggerButton: (triggerProps: TriggerProps) => jsx.JSX.Element;
+  render(): jsx.JSX.Element;
+}
+
 export declare type DialogContentState = {
   users: OptionData[];
   comment: Comment_2;
@@ -130,6 +146,17 @@ export declare type ProductId =
 
 export declare type ProductName = 'jira' | 'confluence';
 
+declare type Props = {
+  onLinkCopy?: (link: string) => void;
+  link: string;
+  isDisabled?: boolean;
+  copyTooltipText?: string;
+  children?: string | ReactElement;
+  copyLinkButtonText: string;
+  copiedToClipboardText: string;
+  iconBefore?: ReactElement;
+};
+
 export declare type RenderCustomTriggerButton = (
   args: {
     error?: ShareError;
@@ -390,6 +417,10 @@ declare interface ShortenResponse {
   shortUrl: string;
 }
 
+declare type State = {
+  shouldShowCopiedMessage: boolean;
+};
+
 declare enum TabType {
   default = 0,
   Slack = 1,