@atlaskit/share 0.33.0 → 0.34.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/share
 
+## 0.34.3
+
+### Patch Changes
+
+- [`d506d312f89`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d506d312f89) - Updating ts Type to be string restricted for easier use. Tests updated to accommodate.
+
+## 0.34.2
+
+### Patch Changes
+
+- [`89aa3e3f314`](https://bitbucket.org/atlassian/atlassian-frontend/commits/89aa3e3f314) - Update dependency of dropdown menu to the lite mode version. Update all usages to cater to the new API. The padding within dropdown menu items is 8px more, which makes the menu look bigger.
+- [`12bfc09a21e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12bfc09a21e) - Fixing internal prop calls for testId and removing references to the old DropdownMenuStateless export when using the new default export.
+- Updated dependencies
+
+## 0.34.1
+
+### Patch Changes
+
+- [`00ded488f98`](https://bitbucket.org/atlassian/atlassian-frontend/commits/00ded488f98) - Update existing isDisabled prop to be used in renderCustomTriggerButton component callback
+
+## 0.34.0
+
+### Minor Changes
+
+- [`e0a9c170e0f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e0a9c170e0f) - [ux] Share now supports tabs for integrations
+
 ## 0.33.0
 
 ### Minor Changes

package/dist/cjs/clients/ShareServiceClient.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShareServiceClient = exports.DEFAULT_SHARE_SERVICE_URL = exports.SHARE_CONFIG_PATH = exports.DEFAULT_SHARE_PATH = void 0;
+exports.ShareServiceClient = exports.SHARE_CONFIG_PATH = exports.DEFAULT_SHARE_SERVICE_URL = exports.DEFAULT_SHARE_PATH = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/components/CopyLinkButton.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CopyLinkButton = exports.HiddenInput = exports.MessageContainer = exports.AUTO_DISMISS_MS = void 0;
+exports.default = exports.MessageContainer = exports.HiddenInput = exports.CopyLinkButton = exports.AUTO_DISMISS_MS = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/dist/cjs/components/ShareDialogContainer.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShareDialogContainer = exports.ShareDialogContainerInternal = exports.defaultConfig = void 0;
+exports.defaultConfig = exports.ShareDialogContainerInternal = exports.ShareDialogContainer = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -403,7 +403,6 @@ var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Component) {
           shareContentType = _this$props2.shareContentType,
           shareFormTitle = _this$props2.shareFormTitle,
           shareFormHelperMessage = _this$props2.shareFormHelperMessage,
-          contentPermissions = _this$props2.contentPermissions,
           shouldCloseOnEscapePress = _this$props2.shouldCloseOnEscapePress,
           showFlags = _this$props2.showFlags,
           enableSmartUserPicker = _this$props2.enableSmartUserPicker,
@@ -422,6 +421,7 @@ var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Component) {
           shareFieldsFooter = _this$props2.shareFieldsFooter,
           isCopyDisabled = _this$props2.isCopyDisabled,
           isPublicLink = _this$props2.isPublicLink,
+          integrationMode = _this$props2.integrationMode,
           shareIntegrations = _this$props2.shareIntegrations,
           shareAri = _this$props2.shareAri,
           tabIndex = _this$props2.tabIndex,
@@ -445,7 +445,6 @@ var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Component) {
         shareContentType: shareContentType,
         shareFormTitle: shareFormTitle,
         shareFormHelperMessage: shareFormHelperMessage,
-        contentPermissions: contentPermissions,
         copyLinkOrigin: this.getCopyLinkOriginTracing(),
         formShareOrigin: this.getFormShareOriginTracing(),
         shouldCloseOnEscapePress: shouldCloseOnEscapePress,
@@ -466,6 +465,7 @@ var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Component) {
         shareFieldsFooter: shareFieldsFooter,
         isCopyDisabled: isCopyDisabled,
         isPublicLink: isPublicLink,
+        integrationMode: integrationMode,
         shareIntegrations: shareIntegrations,
         shareAri: shareAri,
         tabIndex: tabIndex,

package/dist/cjs/components/ShareDialogWithTrigger.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShareDialogWithTrigger = exports.ShareDialogWithTriggerInternal = exports.defaultShareContentState = void 0;
+exports.defaultShareContentState = exports.ShareDialogWithTriggerInternal = exports.ShareDialogWithTrigger = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -326,6 +326,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
           triggerButtonTooltipPosition = _this$props6.triggerButtonTooltipPosition,
           triggerButtonAppearance = _this$props6.triggerButtonAppearance,
           triggerButtonStyle = _this$props6.triggerButtonStyle,
+          integrationMode = _this$props6.integrationMode,
           shareIntegrations = _this$props6.shareIntegrations,
           dialogZIndex = _this$props6.dialogZIndex,
           dialogPlacement = _this$props6.dialogPlacement;
@@ -336,6 +337,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
         var shareError = _this.state.shareError;
         button = renderCustomTriggerButton({
           error: shareError,
+          isDisabled: isDisabled,
           isSelected: isDialogOpen,
           onClick: _this.onTriggerClick
         }, triggerProps);
@@ -362,7 +364,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
       } // If there are any integrations, wrap the share button in a split button with integrations.
 
 
-      if (shareIntegrations !== null && shareIntegrations !== void 0 && shareIntegrations.length) {
+      if (integrationMode === 'split' && shareIntegrations !== null && shareIntegrations !== void 0 && shareIntegrations.length) {
         button = /*#__PURE__*/_react.default.createElement(_SplitButton.default, {
           shareButton: button,
           handleOpenSplitButton: _this.handleOpenSplitButton,
@@ -380,10 +382,10 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
       return button;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenSplitButton", function () {
-      _this.handleDialogOpen();
-
       _this.setState({
         isUsingSplitButton: true
+      }, function () {
+        return _this.handleCloseDialog();
       });
 
       _this.createAndFireEvent((0, _analytics.shareSplitButtonEvent)());
@@ -430,7 +432,6 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
           loadUserOptions = _this$props7.loadUserOptions,
           shareFormTitle = _this$props7.shareFormTitle,
           shareFormHelperMessage = _this$props7.shareFormHelperMessage,
-          contentPermissions = _this$props7.contentPermissions,
           bottomMessage = _this$props7.bottomMessage,
           submitButtonLabel = _this$props7.submitButtonLabel,
           product = _this$props7.product,
@@ -443,7 +444,9 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
           dialogZIndex = _this$props7.dialogZIndex,
           isPublicLink = _this$props7.isPublicLink,
           tabIndex = _this$props7.tabIndex,
-          copyTooltipText = _this$props7.copyTooltipText;
+          copyTooltipText = _this$props7.copyTooltipText,
+          integrationMode = _this$props7.integrationMode,
+          shareIntegrations = _this$props7.shareIntegrations;
       var style = typeof tabIndex !== 'undefined' && tabIndex >= 0 ? {
         outline: 'none'
       } : undefined; // for performance purposes, we may want to have a loadable content i.e. ShareForm
@@ -469,8 +472,8 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
             isSharing: isSharing,
             onSubmit: _this2.handleShareSubmit,
             title: shareFormTitle,
+            showTitle: integrationMode !== 'tabs' || !shareIntegrations || !shareIntegrations.length,
             helperMessage: shareFormHelperMessage,
-            contentPermissions: contentPermissions,
             shareError: shareError,
             onDismiss: _this2.handleFormDismiss,
             defaultValue: defaultValue,
@@ -486,7 +489,9 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
             fieldsFooter: shareFieldsFooter,
             selectPortalRef: _this2.selectPortalRef,
             isPublicLink: isPublicLink,
-            copyTooltipText: copyTooltipText
+            copyTooltipText: copyTooltipText,
+            integrationMode: integrationMode,
+            shareIntegrations: shareIntegrations
           })), bottomMessage ? /*#__PURE__*/_react.default.createElement(BottomMessageWrapper, null, bottomMessage) : null, customFooter && /*#__PURE__*/_react.default.createElement(CustomFooterWrapper, null, customFooter)));
         },
         isOpen: isDialogOpen,

package/dist/cjs/components/ShareForm.js

@@ -2,12 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShareForm = exports.FormFooter = exports.FormWrapper = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.ShareForm = exports.FormWrapper = exports.FormFooter = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -23,6 +23,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
@@ -37,6 +39,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
+var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactIntl = require("react-intl");
@@ -53,7 +57,13 @@ var _ShareHeader = require("./ShareHeader");
 
 var _UserPickerField = require("./UserPickerField");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _IntegrationForm = require("./IntegrationForm");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -63,7 +73,9 @@ var SubmitButtonWrapper = _styledComponents.default.div(_templateObject || (_tem
 
 var CenterAlignedIconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
 
-var FormWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])));
+var FormWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), function (props) {
+  return props.isMainShare ? (0, _constants.gridSize)() : (0, _constants.gridSize)() * 2;
+});
 
 exports.FormWrapper = FormWrapper;
 
@@ -73,6 +85,18 @@ exports.FormFooter = FormFooter;
 
 var FormField = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 12px;\n"])));
 
+var IntegrationWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+
+var IntegrationIconWrapper = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 5px;\n"])));
+
+var integrationTabText = function integrationTabText(integrationName) {
+  return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareInIntegrationButtonText, {
+    values: {
+      integrationName: integrationName
+    }
+  }));
+};
+
 var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(InternalForm, _React$PureComponent);
 
@@ -88,14 +112,64 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSubmitButton", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderShareForm", function () {
       var _this$props = _this.props,
-          formatMessage = _this$props.intl.formatMessage,
-          isSharing = _this$props.isSharing,
-          shareError = _this$props.shareError,
-          submitButtonLabel = _this$props.submitButtonLabel,
+          formProps = _this$props.formProps,
+          title = _this$props.title,
+          _this$props$showTitle = _this$props.showTitle,
+          showTitle = _this$props$showTitle === void 0 ? true : _this$props$showTitle,
+          loadOptions = _this$props.loadOptions,
+          onLinkCopy = _this$props.onLinkCopy,
+          copyLink = _this$props.copyLink,
+          defaultValue = _this$props.defaultValue,
+          config = _this$props.config,
+          isFetchingConfig = _this$props.isFetchingConfig,
+          product = _this$props.product,
+          onUserInputChange = _this$props.onUserInputChange,
+          enableSmartUserPicker = _this$props.enableSmartUserPicker,
+          loggedInAccountId = _this$props.loggedInAccountId,
+          cloudId = _this$props.cloudId,
+          onUserSelectionChange = _this$props.onUserSelectionChange,
+          fieldsFooter = _this$props.fieldsFooter,
+          selectPortalRef = _this$props.selectPortalRef,
           isDisabled = _this$props.isDisabled,
-          isPublicLink = _this$props.isPublicLink;
+          isPublicLink = _this$props.isPublicLink,
+          copyTooltipText = _this$props.copyTooltipText,
+          helperMessage = _this$props.helperMessage;
+      return /*#__PURE__*/_react.default.createElement("form", formProps, showTitle && /*#__PURE__*/_react.default.createElement(_ShareHeader.ShareHeader, {
+        title: title
+      }), /*#__PURE__*/_react.default.createElement(FormField, null, /*#__PURE__*/_react.default.createElement(_UserPickerField.UserPickerField, {
+        onInputChange: onUserInputChange,
+        onChange: onUserSelectionChange,
+        loadOptions: loadOptions,
+        defaultValue: defaultValue && defaultValue.users,
+        config: config,
+        isLoading: isFetchingConfig,
+        product: product,
+        enableSmartUserPicker: enableSmartUserPicker,
+        loggedInAccountId: loggedInAccountId,
+        cloudId: cloudId,
+        selectPortalRef: selectPortalRef,
+        isPublicLink: isPublicLink,
+        helperMessage: helperMessage
+      })), /*#__PURE__*/_react.default.createElement(FormField, null, /*#__PURE__*/_react.default.createElement(_CommentField.CommentField, {
+        defaultValue: defaultValue && defaultValue.comment
+      })), fieldsFooter, /*#__PURE__*/_react.default.createElement(FormFooter, null, /*#__PURE__*/_react.default.createElement(_CopyLinkButton.default, {
+        isDisabled: isDisabled,
+        onLinkCopy: onLinkCopy,
+        link: copyLink,
+        isPublicLink: isPublicLink,
+        copyTooltipText: copyTooltipText
+      }), _this.renderSubmitButton()));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSubmitButton", function () {
+      var _this$props2 = _this.props,
+          formatMessage = _this$props2.intl.formatMessage,
+          isSharing = _this$props2.isSharing,
+          shareError = _this$props2.shareError,
+          submitButtonLabel = _this$props2.submitButtonLabel,
+          isDisabled = _this$props2.isDisabled,
+          isPublicLink = _this$props2.isPublicLink;
       var shouldShowWarning = shareError && !isSharing;
       var buttonAppearance = !shouldShowWarning ? 'primary' : 'warning';
       var sendLabel = isPublicLink ? _i18n.messages.formSendPublic : _i18n.messages.formSend;
@@ -120,9 +194,9 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
   (0, _createClass2.default)(InternalForm, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props2 = this.props,
-          onDismiss = _this$props2.onDismiss,
-          getValues = _this$props2.getValues;
+      var _this$props3 = this.props,
+          onDismiss = _this$props3.onDismiss,
+          getValues = _this$props3.getValues;
 
       if (onDismiss) {
         onDismiss(getValues());
@@ -131,54 +205,42 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          formProps = _this$props3.formProps,
-          title = _this$props3.title,
-          contentPermissions = _this$props3.contentPermissions,
-          loadOptions = _this$props3.loadOptions,
-          onLinkCopy = _this$props3.onLinkCopy,
-          copyLink = _this$props3.copyLink,
-          defaultValue = _this$props3.defaultValue,
-          config = _this$props3.config,
-          isFetchingConfig = _this$props3.isFetchingConfig,
-          product = _this$props3.product,
-          onUserInputChange = _this$props3.onUserInputChange,
-          enableSmartUserPicker = _this$props3.enableSmartUserPicker,
-          loggedInAccountId = _this$props3.loggedInAccountId,
-          cloudId = _this$props3.cloudId,
-          onUserSelectionChange = _this$props3.onUserSelectionChange,
-          fieldsFooter = _this$props3.fieldsFooter,
-          selectPortalRef = _this$props3.selectPortalRef,
-          isDisabled = _this$props3.isDisabled,
-          isPublicLink = _this$props3.isPublicLink,
-          copyTooltipText = _this$props3.copyTooltipText,
-          helperMessage = _this$props3.helperMessage;
-      return /*#__PURE__*/_react.default.createElement(FormWrapper, null, /*#__PURE__*/_react.default.createElement("form", formProps, /*#__PURE__*/_react.default.createElement(_ShareHeader.ShareHeader, {
-        title: title,
-        contentPermissions: contentPermissions
-      }), /*#__PURE__*/_react.default.createElement(FormField, null, /*#__PURE__*/_react.default.createElement(_UserPickerField.UserPickerField, {
-        onInputChange: onUserInputChange,
-        onChange: onUserSelectionChange,
-        loadOptions: loadOptions,
-        defaultValue: defaultValue && defaultValue.users,
-        config: config,
-        isLoading: isFetchingConfig,
-        product: product,
-        helperMessage: helperMessage,
-        enableSmartUserPicker: enableSmartUserPicker,
-        loggedInAccountId: loggedInAccountId,
-        cloudId: cloudId,
-        selectPortalRef: selectPortalRef,
-        isPublicLink: isPublicLink
-      })), /*#__PURE__*/_react.default.createElement(FormField, null, /*#__PURE__*/_react.default.createElement(_CommentField.CommentField, {
-        defaultValue: defaultValue && defaultValue.comment
-      })), fieldsFooter, /*#__PURE__*/_react.default.createElement(FormFooter, null, /*#__PURE__*/_react.default.createElement(_CopyLinkButton.default, {
-        isDisabled: isDisabled,
-        onLinkCopy: onLinkCopy,
-        link: copyLink,
-        isPublicLink: isPublicLink,
-        copyTooltipText: copyTooltipText
-      }), this.renderSubmitButton())));
+      var _this$props4 = this.props,
+          title = _this$props4.title,
+          _this$props4$integrat = _this$props4.integrationMode,
+          integrationMode = _this$props4$integrat === void 0 ? 'off' : _this$props4$integrat,
+          shareIntegrations = _this$props4.shareIntegrations;
+
+      if (integrationMode === 'off' || !shareIntegrations || !shareIntegrations.length) {
+        return this.renderShareForm();
+      }
+
+      var firstIntegration = shareIntegrations[0];
+
+      if (integrationMode === 'tabs') {
+        return /*#__PURE__*/_react.default.createElement(_tabs.default, {
+          id: "ShareForm-Tabs-Integrations"
+        }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
+          key: "share-tab-default"
+        }, title || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.formTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
+          key: "share-tab-".concat(firstIntegration.type)
+        }, /*#__PURE__*/_react.default.createElement(IntegrationWrapper, null, /*#__PURE__*/_react.default.createElement(IntegrationIconWrapper, null, /*#__PURE__*/_react.default.createElement(firstIntegration.Icon, null)), integrationTabText(firstIntegration.type)))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, {
+          key: "share-tabPanel-default"
+        }, /*#__PURE__*/_react.default.createElement(FormWrapper, {
+          isMainShare: true
+        }, this.renderShareForm())), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, {
+          key: "share-tabPanel-integration"
+        }, /*#__PURE__*/_react.default.createElement(FormWrapper, {
+          isMainShare: false
+        }, /*#__PURE__*/_react.default.createElement(_IntegrationForm.IntegrationForm, {
+          Content: firstIntegration.Content,
+          onIntegrationClose: function onIntegrationClose() {
+            return null;
+          }
+        }))));
+      }
+
+      return this.renderShareForm();
     }
   }]);
   return InternalForm;

package/dist/cjs/components/ShareHeader.js

@@ -30,9 +30,8 @@ var FormHeaderTitle = _styledComponents.default.h1(_templateObject2 || (_templat
 exports.FormHeaderTitle = FormHeaderTitle;
 
 var ShareHeader = function ShareHeader(_ref) {
-  var title = _ref.title,
-      contentPermissions = _ref.contentPermissions;
-  return /*#__PURE__*/_react.default.createElement(HeaderWrapper, null, /*#__PURE__*/_react.default.createElement(FormHeaderTitle, null, title || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.formTitle)), contentPermissions);
+  var title = _ref.title;
+  return /*#__PURE__*/_react.default.createElement(HeaderWrapper, null, /*#__PURE__*/_react.default.createElement(FormHeaderTitle, null, title || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.formTitle)));
 };
 
 exports.ShareHeader = ShareHeader;

package/dist/cjs/components/SplitButton.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = SplitButton;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -19,7 +21,11 @@ var _reactIntl = require("react-intl");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _dropdownMenu = require("@atlaskit/dropdown-menu");
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
+
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -72,19 +78,26 @@ 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.DropdownMenuStateless, {
-    "data-testid": "split-button-dropdown",
-    triggerButtonProps: {
-      appearance: triggerButtonAppearance
+  return /*#__PURE__*/_react.default.createElement(DropdownMenuWrapper, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+    testId: "split-button-dropdown",
+    trigger: function trigger(_ref2) {
+      var triggerRef = _ref2.triggerRef,
+          providedProps = (0, _objectWithoutProperties2.default)(_ref2, ["triggerRef"]);
+      return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, providedProps, {
+        ref: triggerRef,
+        iconBefore: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+          label: ""
+        }),
+        appearance: triggerButtonAppearance
+      }));
     },
-    triggerType: "button",
-    position: "bottom right",
+    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, {
       key: integration.type,
-      "data-testid": "split-button-dropdownitem-".concat(integration.type)
+      testId: "split-button-dropdownitem-".concat(integration.type)
     }, /*#__PURE__*/_react.default.createElement(DropDownIntegrationButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_IntegrationButton.default, {
       textColor: _colors.N800,
       appearance: "subtle",
@@ -100,17 +113,17 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
 
 SplitButtonDropdown.displayName = 'SplitButtonDropdown';
 
-function SplitButton(_ref2) {
-  var shareButton = _ref2.shareButton,
-      handleOpenSplitButton = _ref2.handleOpenSplitButton,
-      handleCloseSplitButton = _ref2.handleCloseSplitButton,
-      isUsingSplitButton = _ref2.isUsingSplitButton,
-      shareIntegrations = _ref2.shareIntegrations,
-      onIntegrationClick = _ref2.onIntegrationClick,
-      triggerButtonAppearance = _ref2.triggerButtonAppearance,
-      dialogZIndex = _ref2.dialogZIndex,
-      dialogPlacement = _ref2.dialogPlacement,
-      createAndFireEvent = _ref2.createAndFireEvent;
+function SplitButton(_ref3) {
+  var shareButton = _ref3.shareButton,
+      handleOpenSplitButton = _ref3.handleOpenSplitButton,
+      handleCloseSplitButton = _ref3.handleCloseSplitButton,
+      isUsingSplitButton = _ref3.isUsingSplitButton,
+      shareIntegrations = _ref3.shareIntegrations,
+      onIntegrationClick = _ref3.onIntegrationClick,
+      triggerButtonAppearance = _ref3.triggerButtonAppearance,
+      dialogZIndex = _ref3.dialogZIndex,
+      dialogPlacement = _ref3.dialogPlacement,
+      createAndFireEvent = _ref3.createAndFireEvent;
   return /*#__PURE__*/_react.default.createElement(SplitButtonWrapper, {
     "data-testid": "split-button"
   }, shareButton, /*#__PURE__*/_react.default.createElement(SplitButtonDropdown, {

package/dist/cjs/components/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formShareSubmitted = exports.copyLinkButtonClicked = exports.shortUrlGenerated = exports.shortUrlRequested = exports.cancelShare = exports.shareTriggerButtonClicked = exports.errorEncountered = exports.shareIntegrationButtonEvent = exports.shareSplitButtonEvent = exports.screenEvent = exports.INTEGRATION_MODAL_SOURCE = exports.ANALYTICS_SOURCE = exports.CHANNEL_ID = void 0;
+exports.shortUrlRequested = exports.shortUrlGenerated = exports.shareTriggerButtonClicked = exports.shareSplitButtonEvent = exports.shareIntegrationButtonEvent = exports.screenEvent = exports.formShareSubmitted = exports.errorEncountered = exports.copyLinkButtonClicked = exports.cancelShare = exports.INTEGRATION_MODAL_SOURCE = exports.CHANNEL_ID = exports.ANALYTICS_SOURCE = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/components/localStorageUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setIsOnboardingDismissed = exports.getIsOnboardingDismissed = exports.setDefaultSlackWorkSpace = exports.getDefaultSlackWorkSpace = void 0;
+exports.setIsOnboardingDismissed = exports.setDefaultSlackWorkSpace = exports.getIsOnboardingDismissed = exports.getDefaultSlackWorkSpace = void 0;
 
 var getLocalStorageKey = function getLocalStorageKey(key) {
   try {

package/dist/cjs/components/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.InlineDialogContentWrapper = exports.MAX_PICKER_HEIGHT = void 0;
+exports.default = exports.MAX_PICKER_HEIGHT = exports.InlineDialogContentWrapper = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/dist/cjs/components/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowEmails = exports.optionDataToUsers = exports.getMenuPortalTargetCurrentHTML = exports.generateSelectZIndex = exports.zIndexAddition = void 0;
+exports.zIndexAddition = exports.optionDataToUsers = exports.getMenuPortalTargetCurrentHTML = exports.generateSelectZIndex = exports.allowEmails = void 0;
 
 var _theme = require("@atlaskit/theme");