@atlaskit/share 5.0.0 → 6.0.0

package/dist/esm/components/ShareFormNext.js

@@ -0,0 +1,463 @@
+/* ShareFormNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import "./ShareFormNext.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import Button from '@atlaskit/button/new';
+import { cx } from '@atlaskit/css';
+import Form, { RequiredAsterisk } from '@atlaskit/form';
+import EmailIcon from '@atlaskit/icon/core/migration/email';
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { MenuGroup } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
+import { N300, R400 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { messages } from '../i18n';
+import { TabType } from '../types';
+import { ANALYTICS_SOURCE, INTEGRATION_MODAL_SOURCE } from './analytics/analytics';
+import { CommentField } from './CommentField';
+import CopyLinkButton from './CopyLinkButton';
+import { IntegrationForm } from './IntegrationForm';
+import { ShareHeader } from './ShareHeader';
+import { ShareMenuItem } from './ShareMenuItem';
+import { UserPickerField } from './UserPickerField';
+var styles = {
+  submitButtonWrapperStyles: "_1e0c1txw _18u01wug",
+  centerAlignedIconWrapperStyles: "_1rjcze3t _18zrutpp _1e0c1txw _1wpz1h6o",
+  formWrapperStyles: "_19pku2gc _1bsb1osq",
+  formFooterStyles: "_1e0c1txw _1bah1y6m",
+  formFieldStyles: "_otyrutpp",
+  integrationWrapperStyles: "_1e0c1txw _4cvr1h6o",
+  integrationIconWrapperStyles: "_otyr196n _2hwx1b66",
+  requiredFieldInfoStyles: "_11c81vlj _otyrpxbi _syaz1n3s",
+  menuGroupContainerStyles: "_2rkoglpi _1moux0bf _195g10v4 _syaz1fxt _4cvr1y6m _1bsb1w81"
+};
+var integrationTabText = function integrationTabText(integrationName) {
+  return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
+    values: {
+      integrationName: integrationName
+    }
+  }));
+};
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
+  function InternalForm() {
+    var _this;
+    _classCallCheck(this, InternalForm);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, InternalForm, [].concat(args));
+    _defineProperty(_this, "state", {
+      selectedTab: TabType.default,
+      selectedMenuItem: 'none'
+    });
+    _defineProperty(_this, "renderShareForm", function () {
+      var _this$props = _this.props,
+        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,
+        copyTooltipText = _this$props.copyTooltipText,
+        helperMessage = _this$props.helperMessage,
+        orgId = _this$props.orgId,
+        isBrowseUsersDisabled = _this$props.isBrowseUsersDisabled,
+        formatMessage = _this$props.intl.formatMessage,
+        shareError = _this$props.shareError,
+        userPickerOptions = _this$props.userPickerOptions,
+        productAttributes = _this$props.productAttributes;
+      return /*#__PURE__*/React.createElement(AnalyticsContext, {
+        data: {
+          source: ANALYTICS_SOURCE
+        }
+      }, /*#__PURE__*/React.createElement("form", formProps, showTitle && /*#__PURE__*/React.createElement(ShareHeader, {
+        title: title
+      }), /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(styles.requiredFieldInfoStyles)
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.requiredFieldSummary), /*#__PURE__*/React.createElement(RequiredAsterisk, null)), /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(styles.formFieldStyles)
+      }, /*#__PURE__*/React.createElement(UserPickerField, {
+        onInputChange: onUserInputChange,
+        onChange: onUserSelectionChange,
+        loadOptions: loadOptions,
+        defaultValue: defaultValue && defaultValue.users,
+        config: config,
+        isLoading: isFetchingConfig,
+        product: product || 'confluence',
+        enableSmartUserPicker: enableSmartUserPicker,
+        loggedInAccountId: loggedInAccountId,
+        cloudId: cloudId,
+        selectPortalRef: selectPortalRef,
+        isPublicLink: isPublicLink,
+        helperMessage: helperMessage,
+        orgId: orgId,
+        isBrowseUsersDisabled: isBrowseUsersDisabled,
+        shareError: shareError,
+        userPickerOptions: userPickerOptions,
+        productAttributes: productAttributes
+      })), /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(styles.formFieldStyles)
+      }, /*#__PURE__*/React.createElement(CommentField, {
+        defaultValue: defaultValue && defaultValue.comment
+      })), fieldsFooter, /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(styles.formFooterStyles),
+        testId: "form-footer"
+      }, /*#__PURE__*/React.createElement(CopyLinkButton, {
+        isDisabled: isDisabled,
+        onLinkCopy: onLinkCopy,
+        link: copyLink,
+        copyTooltipText: copyTooltipText,
+        copyLinkButtonText: formatMessage(isPublicLink ? messages.copyPublicLinkButtonText : messages.copyLinkButtonText),
+        copiedToClipboardText: formatMessage(messages.copiedToClipboardMessage)
+      }), _this.renderSubmitButton())));
+    });
+    _defineProperty(_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,
+        integrationMode = _this$props2.integrationMode,
+        isSubmitShareDisabled = _this$props2.isSubmitShareDisabled;
+      var isRetryableError = !!(shareError !== null && shareError !== void 0 && shareError.retryable);
+      var isNonRetryableError = shareError && !shareError.retryable;
+      var shouldShowWarning = isRetryableError && !isSharing;
+      var buttonAppearance = !shouldShowWarning ? 'primary' : 'warning';
+      var tabMode = integrationMode === 'tabs';
+      var formPublicLabel = tabMode ? messages.formSharePublic : messages.formSendPublic;
+      var formSendLabel = messages.formShare;
+      var sendLabel = isPublicLink ? formPublicLabel : formSendLabel;
+      var buttonLabel = isRetryableError ? messages.formRetry : sendLabel;
+      var buttonDisabled = isDisabled || isNonRetryableError || isSubmitShareDisabled && fg('plans_outgoing_mail_fix');
+      var ButtonLabelWrapper = buttonAppearance === 'warning' ? 'strong' : React.Fragment;
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(styles.submitButtonWrapperStyles)
+      }, /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(styles.centerAlignedIconWrapperStyles)
+      }, shouldShowWarning && /*#__PURE__*/React.createElement(Tooltip, {
+        content: /*#__PURE__*/React.createElement(FormattedMessage, messages.shareFailureMessage),
+        position: "top"
+      }, /*#__PURE__*/React.createElement(ErrorIcon, {
+        spacing: "spacious",
+        label: formatMessage(messages.shareFailureIconLabel),
+        color: "var(--ds-icon-danger, ".concat(R400, ")")
+      }))), /*#__PURE__*/React.createElement(Button, {
+        appearance: buttonAppearance,
+        type: "submit",
+        isLoading: isSharing,
+        isDisabled: buttonDisabled
+      }, /*#__PURE__*/React.createElement(ButtonLabelWrapper, null, submitButtonLabel || /*#__PURE__*/React.createElement(FormattedMessage, buttonLabel))));
+    });
+    _defineProperty(_this, "renderMainTabTitle", function () {
+      var _this$props3 = _this.props,
+        title = _this$props3.title,
+        product = _this$props3.product;
+      if (title) {
+        return title;
+      }
+      if (!product) {
+        return /*#__PURE__*/React.createElement(FormattedMessage, messages.formTitle);
+      }
+      var productShareType = product === 'jira' ? _objectSpread({}, messages.shareMainTabTextJira) : _objectSpread({}, messages.shareMainTabTextConfluence);
+      return /*#__PURE__*/React.createElement(FormattedMessage, productShareType);
+    });
+    _defineProperty(_this, "changeTab", function (tab) {
+      var _this$props$onTabChan, _this$props4;
+      _this.setState({
+        selectedTab: tab
+      });
+      (_this$props$onTabChan = (_this$props4 = _this.props).onTabChange) === null || _this$props$onTabChan === void 0 || _this$props$onTabChan.call(_this$props4, tab);
+    });
+    _defineProperty(_this, "changeMenuItem", function (menuItem) {
+      var _this$props$onMenuIte, _this$props5;
+      _this.setState({
+        selectedMenuItem: menuItem
+      });
+      (_this$props$onMenuIte = (_this$props5 = _this.props).onMenuItemChange) === null || _this$props$onMenuIte === void 0 || _this$props$onMenuIte.call(_this$props5, menuItem);
+    });
+    return _this;
+  }
+  _inherits(InternalForm, _React$PureComponent);
+  return _createClass(InternalForm, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$props6 = this.props,
+        onDismiss = _this$props6.onDismiss,
+        getValues = _this$props6.getValues;
+      if (onDismiss) {
+        onDismiss(getValues());
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props7 = this.props,
+        _this$props7$integrat = _this$props7.integrationMode,
+        integrationMode = _this$props7$integrat === void 0 ? 'off' : _this$props7$integrat,
+        shareIntegrations = _this$props7.shareIntegrations,
+        additionalTabs = _this$props7.additionalTabs,
+        builtInTabContentWidth = _this$props7.builtInTabContentWidth,
+        handleCloseDialog = _this$props7.handleCloseDialog;
+      var selectedMenuItem = this.state.selectedMenuItem;
+      if (fg('plans_outgoing_mail_fix')) {
+        var hasShareIntegrations = shareIntegrations && shareIntegrations.length;
+        var hasAdditionalTabs = additionalTabs && additionalTabs.length;
+        if (integrationMode === 'off' || !hasShareIntegrations && !hasAdditionalTabs) {
+          return this.renderShareForm();
+        }
+        if (selectedMenuItem === 'default') {
+          return this.renderShareForm();
+        }
+        if (hasShareIntegrations) {
+          var _firstIntegration = shareIntegrations[0];
+          if (selectedMenuItem === 'Slack') {
+            return /*#__PURE__*/React.createElement(IntegrationForm, {
+              Content: _firstIntegration.Content,
+              onIntegrationClose: function onIntegrationClose() {
+                return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+              }
+            });
+          }
+          if (integrationMode === 'menu') {
+            return /*#__PURE__*/React.createElement(Box, {
+              xcss: cx(styles.menuGroupContainerStyles),
+              backgroundColor: "elevation.surface.overlay"
+            }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ShareMenuItem, {
+              iconName: /*#__PURE__*/React.createElement(_firstIntegration.Icon, null),
+              labelId: messages.slackMenuItemText,
+              onClickHandler: function onClickHandler() {
+                return _this2.changeMenuItem('Slack');
+              }
+            }), /*#__PURE__*/React.createElement(ShareMenuItem, {
+              iconName: /*#__PURE__*/React.createElement(EmailIcon, {
+                color: "currentColor",
+                label: "",
+                LEGACY_size: "medium",
+                spacing: "spacious"
+              }),
+              labelId: messages.emailMenuItemText,
+              onClickHandler: function onClickHandler() {
+                return _this2.changeMenuItem('default');
+              }
+            })));
+          }
+        }
+        if (integrationMode === 'tabs') {
+          var DEFAULT_TAB_CONTENT_WIDTH = 304;
+          return /*#__PURE__*/React.createElement(Tabs, {
+            id: "ShareForm-Tabs-Integrations",
+            onChange: this.changeTab,
+            selected: this.state.selectedTab
+          }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
+            key: "share-tab-default"
+          }, this.renderMainTabTitle()), shareIntegrations === null || shareIntegrations === void 0 ? void 0 : shareIntegrations.map(function (integration) {
+            return /*#__PURE__*/React.createElement(Tab, {
+              key: "share-tab-".concat(integration.type)
+            }, /*#__PURE__*/React.createElement(Box, {
+              xcss: cx(styles.integrationWrapperStyles)
+            }, /*#__PURE__*/React.createElement(Box, {
+              as: "span",
+              xcss: cx(styles.integrationIconWrapperStyles)
+            }, /*#__PURE__*/React.createElement(integration.Icon, null)), integrationTabText(integration.type)));
+          }), fg('smart_links_for_plans_platform') && (additionalTabs === null || additionalTabs === void 0 ? void 0 : additionalTabs.map(function (tab) {
+            return /*#__PURE__*/React.createElement(Tab, {
+              key: "share-tab-".concat(tab.label)
+            }, tab.label);
+          }))), /*#__PURE__*/React.createElement(TabPanel, {
+            key: "share-tabPanel-default"
+          }, /*#__PURE__*/React.createElement(Box, {
+            xcss: cx(styles.formWrapperStyles)
+          }, /*#__PURE__*/React.createElement("div", {
+            style: {
+              width: "".concat(builtInTabContentWidth || DEFAULT_TAB_CONTENT_WIDTH, "px")
+            }
+          }, this.renderShareForm()))), shareIntegrations === null || shareIntegrations === void 0 ? void 0 : shareIntegrations.map(function (integration) {
+            return /*#__PURE__*/React.createElement(TabPanel, {
+              key: "share-tabPanel-integration"
+            }, /*#__PURE__*/React.createElement(AnalyticsContext, {
+              data: {
+                source: INTEGRATION_MODAL_SOURCE
+              }
+            }, /*#__PURE__*/React.createElement(Box, {
+              xcss: cx(styles.formWrapperStyles)
+            }, /*#__PURE__*/React.createElement("div", {
+              style: {
+                width: "".concat(builtInTabContentWidth || DEFAULT_TAB_CONTENT_WIDTH, "px")
+              }
+            }, /*#__PURE__*/React.createElement(IntegrationForm, {
+              Content: integration.Content,
+              onIntegrationClose: function onIntegrationClose() {
+                return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+              },
+              changeTab: _this2.changeTab
+            })))));
+          }), fg('smart_links_for_plans_platform') && (additionalTabs === null || additionalTabs === void 0 ? void 0 : additionalTabs.map(function (tab) {
+            return /*#__PURE__*/React.createElement(TabPanel, {
+              key: "share-tabPanel-".concat(tab.label)
+            }, /*#__PURE__*/React.createElement(Box, {
+              xcss: cx(styles.formWrapperStyles)
+            }, /*#__PURE__*/React.createElement(IntegrationForm, {
+              Content: tab.Content,
+              onIntegrationClose: function onIntegrationClose() {
+                return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+              },
+              changeTab: _this2.changeTab
+            })));
+          })));
+        }
+      }
+      if (integrationMode === 'off' || !shareIntegrations || !shareIntegrations.length) {
+        return this.renderShareForm();
+      }
+      var firstIntegration = shareIntegrations[0];
+      if (selectedMenuItem === 'default') {
+        return this.renderShareForm();
+      }
+      if (selectedMenuItem === 'Slack') {
+        return /*#__PURE__*/React.createElement(IntegrationForm, {
+          Content: firstIntegration.Content,
+          onIntegrationClose: function onIntegrationClose() {
+            return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+          }
+        });
+      }
+      if (integrationMode === 'menu') {
+        return /*#__PURE__*/React.createElement(Box, {
+          xcss: cx(styles.menuGroupContainerStyles),
+          backgroundColor: "elevation.surface.overlay"
+        }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ShareMenuItem, {
+          iconName: /*#__PURE__*/React.createElement(firstIntegration.Icon, null),
+          labelId: messages.slackMenuItemText,
+          onClickHandler: function onClickHandler() {
+            return _this2.changeMenuItem('Slack');
+          }
+        }), /*#__PURE__*/React.createElement(ShareMenuItem, {
+          iconName: /*#__PURE__*/React.createElement(EmailIcon, {
+            color: "currentColor",
+            label: "",
+            LEGACY_size: "medium",
+            spacing: "spacious"
+          }),
+          labelId: messages.emailMenuItemText,
+          onClickHandler: function onClickHandler() {
+            return _this2.changeMenuItem('default');
+          }
+        })));
+      }
+      if (integrationMode === 'tabs') {
+        var _DEFAULT_TAB_CONTENT_WIDTH = 304;
+        return /*#__PURE__*/React.createElement(Tabs, {
+          id: "ShareForm-Tabs-Integrations",
+          onChange: this.changeTab,
+          selected: this.state.selectedTab
+        }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
+          key: "share-tab-default"
+        }, this.renderMainTabTitle()), /*#__PURE__*/React.createElement(Tab, {
+          key: "share-tab-".concat(firstIntegration.type)
+        }, /*#__PURE__*/React.createElement(Box, {
+          xcss: cx(styles.integrationWrapperStyles)
+        }, /*#__PURE__*/React.createElement(Box, {
+          as: "span",
+          xcss: cx(styles.integrationIconWrapperStyles)
+        }, /*#__PURE__*/React.createElement(firstIntegration.Icon, null)), integrationTabText(firstIntegration.type))), fg('smart_links_for_plans_platform') && (additionalTabs === null || additionalTabs === void 0 ? void 0 : additionalTabs.map(function (tab) {
+          return /*#__PURE__*/React.createElement(Tab, {
+            key: "share-tab-".concat(tab.label)
+          }, tab.label);
+        }))), /*#__PURE__*/React.createElement(TabPanel, {
+          key: "share-tabPanel-default"
+        }, /*#__PURE__*/React.createElement(Box, {
+          xcss: cx(styles.formWrapperStyles)
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: "".concat(builtInTabContentWidth || _DEFAULT_TAB_CONTENT_WIDTH, "px")
+          }
+        }, this.renderShareForm()))), /*#__PURE__*/React.createElement(TabPanel, {
+          key: "share-tabPanel-integration"
+        }, /*#__PURE__*/React.createElement(AnalyticsContext, {
+          data: {
+            source: INTEGRATION_MODAL_SOURCE
+          }
+        }, /*#__PURE__*/React.createElement(Box, {
+          xcss: cx(styles.formWrapperStyles)
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: "".concat(builtInTabContentWidth || _DEFAULT_TAB_CONTENT_WIDTH, "px")
+          }
+        }, /*#__PURE__*/React.createElement(IntegrationForm, {
+          Content: firstIntegration.Content,
+          onIntegrationClose: function onIntegrationClose() {
+            return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+          },
+          changeTab: this.changeTab
+        }))))), fg('smart_links_for_plans_platform') && (additionalTabs === null || additionalTabs === void 0 ? void 0 : additionalTabs.map(function (tab) {
+          return /*#__PURE__*/React.createElement(TabPanel, {
+            key: "share-tabPanel-".concat(tab.label)
+          }, /*#__PURE__*/React.createElement(Box, {
+            xcss: cx(styles.formWrapperStyles)
+          }, /*#__PURE__*/React.createElement(IntegrationForm, {
+            Content: tab.Content,
+            onIntegrationClose: function onIntegrationClose() {
+              return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+            },
+            changeTab: _this2.changeTab
+          })));
+        })));
+      }
+      return this.renderShareForm();
+    }
+  }]);
+}(React.PureComponent);
+_defineProperty(InternalForm, "defaultProps", {
+  onSubmit: function onSubmit() {}
+});
+var InternalFormWithIntl = injectIntl(InternalForm);
+export var ShareForm = function ShareForm(props) {
+  return /*#__PURE__*/React.createElement(Form, {
+    onSubmit: props.onSubmit
+  }, function (_ref) {
+    var formProps = _ref.formProps,
+      getValues = _ref.getValues;
+    return /*#__PURE__*/React.createElement(InternalFormWithIntl, _extends({}, props, {
+      formProps: formProps,
+      getValues: getValues
+    }));
+  });
+};
+ShareForm.defaultProps = {
+  isSharing: false,
+  product: 'confluence',
+  onSubmit: function onSubmit() {}
+};

package/dist/esm/components/ShareFormWrapper/ShareFormWrapper.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../../i18n';
 import { ShareHeader } from '../ShareHeader';
+import { InlineDialogContentWrapper as InlineDialogContentWrapperCompiled, InlineDialogFormWrapper as InlineDialogFormWrapperCompiled } from './compiled';
 import { InlineDialogContentWrapper, InlineDialogFormWrapper } from './styled';
 var ShareFormWrapper = function ShareFormWrapper(_ref) {
   var shareFormTitle = _ref.shareFormTitle,
@@ -16,9 +18,11 @@ var ShareFormWrapper = function ShareFormWrapper(_ref) {
     isMenuItemSelected = _ref$isMenuItemSelect === void 0 ? false : _ref$isMenuItemSelect;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/React.createElement(InlineDialogContentWrapper, {
+  var ContentWrapper = fg('share-compiled-migration') ? InlineDialogContentWrapperCompiled : InlineDialogContentWrapper;
+  var FormWrapper = fg('share-compiled-migration') ? InlineDialogFormWrapperCompiled : InlineDialogFormWrapper;
+  return /*#__PURE__*/React.createElement(ContentWrapper, {
     label: formatMessage(messages.formTitle)
-  }, /*#__PURE__*/React.createElement(InlineDialogFormWrapper, {
+  }, /*#__PURE__*/React.createElement(FormWrapper, {
     integrationMode: integrationMode,
     isMenuItemSelected: isMenuItemSelected
   }, shouldShowTitle && /*#__PURE__*/React.createElement(ShareHeader, {

package/dist/esm/components/ShareFormWrapper/compiled.compiled.css

@@ -0,0 +1,7 @@
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._1bsb1j89{width:22pc}
+._1bsb1wug{width:auto}
+._1bsbpk3t{width:102px}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}

package/dist/esm/components/ShareFormWrapper/compiled.js

@@ -0,0 +1,41 @@
+/* compiled.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./compiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  menuNotSelectedAndMenuIntegration: "_1bsbpk3t",
+  tabsIntegration: "_1bsb1wug",
+  default: "_1bsb1j89",
+  inlineDialogContentWrapper: "_ca0qpxbi _u5f31ejb _n3tdpxbi _19bv1ejb"
+};
+export var InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref) {
+  var children = _ref.children,
+    integrationMode = _ref.integrationMode,
+    isMenuItemSelected = _ref.isMenuItemSelected;
+  if (!isMenuItemSelected && integrationMode === 'menu') {
+    return /*#__PURE__*/React.createElement(Box, {
+      xcss: cx(styles.menuNotSelectedAndMenuIntegration)
+    }, children);
+  }
+  if (fg('smart_links_for_plans_platform')) {
+    if (integrationMode === 'tabs') {
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(styles.tabsIntegration)
+      }, children);
+    }
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.default)
+  }, children);
+};
+export var InlineDialogContentWrapper = function InlineDialogContentWrapper(_ref2) {
+  var children = _ref2.children,
+    label = _ref2.label;
+  return /*#__PURE__*/React.createElement(Box, {
+    "aria-label": label,
+    xcss: styles.inlineDialogContentWrapper
+  }, children);
+};

package/dist/esm/components/SplitButton.js

@@ -14,6 +14,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { SplitButton as AKSplitButton, IconButton } from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N800 } from '@atlaskit/theme/colors';
 import { messages } from '../i18n';
 import { shareIntegrationButtonEvent } from './analytics/analytics';
@@ -30,6 +31,15 @@ var integrationButtonText = function integrationButtonText(integrationName) {
     }
   }));
 };
+var IntegrationButtonWrapper = function IntegrationButtonWrapper(_ref) {
+  var children = _ref.children;
+  return (
+    // The css has no discernible effect on the button, so it is not included in the migration
+    fg('share-compiled-migration') ? jsx("span", null, children) : jsx("span", {
+      css: dropDownIntegrationButtonWrapperStyles
+    }, children)
+  );
+};
 var SplitButtonDropdown = function SplitButtonDropdown(props) {
   var triggerButtonAppearance = props.triggerButtonAppearance,
     isUsingSplitButton = props.isUsingSplitButton,
@@ -38,8 +48,8 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
     shareIntegrations = props.shareIntegrations,
     onIntegrationClick = props.onIntegrationClick,
     createAndFireEvent = props.createAndFireEvent;
-  var onOpenChange = useCallback(function (_ref) {
-    var isOpen = _ref.isOpen;
+  var onOpenChange = useCallback(function (_ref2) {
+    var isOpen = _ref2.isOpen;
     if (isOpen) {
       handleOpenSplitButton();
     } else {
@@ -52,9 +62,9 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
   }, [createAndFireEvent, onIntegrationClick]);
   return jsx(DropdownMenu, {
     testId: "split-button-dropdown",
-    trigger: function trigger(_ref2) {
-      var triggerRef = _ref2.triggerRef,
-        providedProps = _objectWithoutProperties(_ref2, _excluded);
+    trigger: function trigger(_ref3) {
+      var triggerRef = _ref3.triggerRef,
+        providedProps = _objectWithoutProperties(_ref3, _excluded);
       return jsx(IconButton, _extends({
         label: ""
       }, providedProps, {
@@ -70,9 +80,7 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
     return jsx(DropdownItem, {
       key: integration.type,
       testId: "split-button-dropdownitem-".concat(integration.type)
-    }, jsx("span", {
-      css: dropDownIntegrationButtonWrapperStyles
-    }, jsx(IntegrationButton, {
+    }, jsx(IntegrationButtonWrapper, null, jsx(IntegrationButton, {
       textColor: "var(--ds-text, ".concat(N800, ")"),
       appearance: "subtle",
       onClick: function onClick() {
@@ -85,15 +93,15 @@ var SplitButtonDropdown = function SplitButtonDropdown(props) {
   })));
 };
 SplitButtonDropdown.displayName = 'SplitButtonDropdown';
-export default 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,
-    createAndFireEvent = _ref3.createAndFireEvent;
+export default function SplitButton(_ref4) {
+  var shareButton = _ref4.shareButton,
+    handleOpenSplitButton = _ref4.handleOpenSplitButton,
+    handleCloseSplitButton = _ref4.handleCloseSplitButton,
+    isUsingSplitButton = _ref4.isUsingSplitButton,
+    shareIntegrations = _ref4.shareIntegrations,
+    onIntegrationClick = _ref4.onIntegrationClick,
+    triggerButtonAppearance = _ref4.triggerButtonAppearance,
+    createAndFireEvent = _ref4.createAndFireEvent;
   return jsx(AKSplitButton, {
     "data-testid": "split-button",
     appearance: triggerButtonAppearance

package/dist/esm/components/UserPickerField.js

@@ -293,7 +293,9 @@ export var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
           }, /*#__PURE__*/React.createElement(FormattedMessage, getPlaceHolderMessage(product, allowEmail, isBrowseUsersDisabled))),
           menuPortalTarget: menuPortalTarget,
           inputId: fieldProps.id
-        })), helperMessage && !wasValidationOrShareError && /*#__PURE__*/React.createElement(HelperMessage, null, helperMessage), !fieldValid && fieldValidationError === REQUIRED && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(FormattedMessage, requiredMessage)), shareError && shareError.errorCode && /*#__PURE__*/React.createElement(ErrorMessage, null, shareError.message, "\xA0", shareError.helpUrl && /*#__PURE__*/React.createElement(Link, {
+        })), helperMessage && !wasValidationOrShareError && /*#__PURE__*/React.createElement(HelperMessage, {
+          testId: "user-picker"
+        }, helperMessage), !fieldValid && fieldValidationError === REQUIRED && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(FormattedMessage, requiredMessage)), shareError && shareError.errorCode && /*#__PURE__*/React.createElement(ErrorMessage, null, shareError.message, "\xA0", shareError.helpUrl && /*#__PURE__*/React.createElement(Link, {
           target: "_blank",
           href: shareError.helpUrl,
           rel: "help"

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

@@ -6,7 +6,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "5.0.0"
+    packageVersion: "6.0.0"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

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

@@ -25,7 +25,7 @@ export type Props = {
 export type State = {
     shouldShowCopiedMessage: boolean;
 };
-export declare class CopyLinkButton extends React.Component<Props, State> {
+export declare class CopyLinkButtonInner extends React.Component<Props, State> {
     private autoDismiss;
     private inputRef;
     state: {
@@ -38,4 +38,5 @@ export declare class CopyLinkButton extends React.Component<Props, State> {
     renderTriggerButton: (triggerProps: TriggerProps) => jsx.JSX.Element;
     render(): jsx.JSX.Element;
 }
+export declare const CopyLinkButton: (props: Props) => jsx.JSX.Element;
 export default CopyLinkButton;