@atlaskit/share 4.17.0 → 4.18.1

package/dist/cjs/i18n/pt_BR.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': 'Convidar para o Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Compartilhar página',
   'fabric.elements.share.main.tab.text.jira': 'Compartilhar item',
+  'fabric.elements.share.popup.label': 'Compartilhar',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blog compartilhado}board {Quadro compartilhado}calendar {Calendário compartilhado}draft {Rascunho compartilhado}filter {Filtro compartilhado}issue {Item compartilhado}summary {Resumo compartilhado}list {Lista compartilhada}timeline {Cronograma compartilhado}form {Formulário compartilhado}media {Mídia compartilhada}page {Página compartilhada}project {Projeto compartilhado}pullrequest {Pull request compartilhada}question {Pergunta compartilhada}report {Relatório compartilhado}repository {Repositório compartilhado}request {Solicitação compartilhada}roadmap {Cronograma compartilhado}site {Site compartilhado}space {Espaço compartilhado}other {Link compartilhado}}',
   'fabric.elements.share.to.integration.button': 'Compartilhar em {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Ícone de compartilhamento',

package/dist/cjs/i18n/ru.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': 'Пригласить в Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Поделиться страницей',
   'fabric.elements.share.main.tab.text.jira': 'Поделиться задачей',
+  'fabric.elements.share.popup.label': 'Поделиться',
   'fabric.elements.share.success.message': '{object, select,blogpost {Доступ к записи в блоге предоставлен}board {Доступ к доске предоставлен}calendar {Доступ к календарю предоставлен}draft {Доступ к черновику предоставлен}filter {Доступ к фильтру предоставлен}issue {Доступ к задаче предоставлен}summary {Доступ к теме предоставлен}list {Доступ к списку предоставлен}timeline {Доступ к хронологии предоставлен}form {Доступ к форме предоставлен}media {Доступ к медиафайлу предоставлен}page {Доступ к странице предоставлен}project {Доступ к проекту предоставлен}pullrequest {Доступ к запросу pull предоставлен}question {Доступ к вопросу предоставлен}report {Доступ к отчету предоставлен}repository {Доступ к репозиторию предоставлен}request {Доступ к запросу предоставлен}roadmap {Доступ к хронологии предоставлен}site {Доступ к сайту предоставлен}space {Доступ к разделу предоставлен}other {Доступ к ссылке предоставлен}}',
   'fabric.elements.share.to.integration.button': 'Поделиться в {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Значок «Поделиться»',

package/dist/cjs/i18n/sv.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': 'Bjud in till Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Dela sida',
   'fabric.elements.share.main.tab.text.jira': 'Dela ärende',
+  'fabric.elements.share.popup.label': 'Dela',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blogginlägg har delats}board {Tavla har delats}calendar {Kalender har delats}draft {Utkast har delats}filter {Filter har delats}issue {Ärende har delats}summary {Sammanfattning har delats}list {Lista har delats}timeline {Tidslinje har delats}form {Formulär har delats}media {Media har delats}page {Sida har delats}project {Projekt har delats}pullrequest {Pull request har delats}question {Fråga har delats}report {Rapport har delats}repository {Lagringsplats har delats}request {Förfrågan har delats}roadmap {Tidslinje har delats}site {Webbplats har delats}space {Utrymme har delats}other {Länk har delats}}',
   'fabric.elements.share.to.integration.button': 'Dela till {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Dela-ikon',

package/dist/cjs/i18n/th.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': 'เชิญไปยัง Jira',
   'fabric.elements.share.main.tab.text.confluence': 'แชร์หน้าข้อมูล',
   'fabric.elements.share.main.tab.text.jira': 'แชร์ปัญหา',
+  'fabric.elements.share.popup.label': 'แชร์',
   'fabric.elements.share.success.message': '{object, select,blogpost {แชร์โพสต์บล็อกแล้ว}board {แชร์บอร์ดแล้ว}calendar {แชร์ปฏิทินแล้ว}draft {แชร์แบบร่างแล้ว}filter {แชร์ตัวกรองแล้ว}issue {แชร์ปัญหาแล้ว}summary {แชร์สรุปแล้ว}list {แชร์รายการแล้ว}timeline {แชร์เส้นเวลา (ไทม์ไลน์) แล้ว}form {แชร์แบบฟอร์มแล้ว}media {แชร์สื่อแล้ว}page {แชร์หน้าข้อมูลแล้ว}project {แชร์โปรเจกต์แล้ว}pullrequest {แชร์ Pull Request แล้ว}question {แชร์คำถามแล้ว}report {แชร์รายงานแล้ว}repository {แชร์คลังรายการแล้ว}request {แชร์คำขอแล้ว}roadmap {แชร์เส้นเวลา (ไทม์ไลน์) แล้ว}site {แชร์เว็บไซต์แล้ว}space {แชร์พื้นที่แล้ว}other {แชร์ลิงก์แล้ว}}',
   'fabric.elements.share.to.integration.button': 'แชร์ไปยัง {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'แชร์ไอคอน',

package/dist/cjs/i18n/tr.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': "Jira'ya davet et",
   'fabric.elements.share.main.tab.text.confluence': 'Sayfayı paylaşın',
   'fabric.elements.share.main.tab.text.jira': 'Konuyu paylaşın',
+  'fabric.elements.share.popup.label': 'Paylaş',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blog gönderisi paylaşıldı}board {Pano paylaşıldı}calendar {Takvim paylaşıldı}draft {Taslak paylaşıldı}filter {Filtre paylaşıldı}issue {Konu paylaşıldı}summary {Özet paylaşıldı}list {Liste paylaşıldı}timeline {Zaman Çizelgesi paylaşıldı}form {Form paylaşıldı}media {Medya paylaşıldı}page {Sayfa paylaşıldı}project {Proje paylaşıldı}pullrequest {Çekme İsteği paylaşıldı}question {Soru paylaşıldı}report {Rapor paylaşıldı}repository {Depo paylaşıldı}request {Talep paylaşıldı}roadmap {Zaman Çizelgesi paylaşıldı}site {Site paylaşıldı}space {Alan paylaşıldı}other {Bağlantı paylaşıldı}}',
   'fabric.elements.share.to.integration.button': '{integrationName} üzerinden paylaş',
   'fabric.elements.share.trigger.button.icon.label': 'Paylaşma simgesi',

package/dist/cjs/i18n/uk.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': 'Запросити до Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Поділитися сторінкою',
   'fabric.elements.share.main.tab.text.jira': 'Поділитися завданням',
+  'fabric.elements.share.popup.label': 'Поділитися',
   'fabric.elements.share.success.message': '{object, select,blogpost {Надано доступ до допису в блозі}board {Надано доступ до дошки}calendar {Надано доступ до календаря}draft {Надано доступ до чернетки}filter {Надано доступ до фільтра}issue {Надано доступ до завдання}summary {Надано доступ до підсумку}list {Надано доступ до списку}timeline {Надано доступ до шкали}form {Надано доступ до форми}media {Надано доступ до медіафайлу}page {Надано доступ до сторінки}project {Надано доступ до проєкту}pullrequest {Надано доступ до запиту на внесення змін}question {Надано доступ до запитання}report {Надано доступ до звіту}repository {Надано доступ до репозиторію}request {Надано доступ до запиту}roadmap {Надано доступ до часової шкали}site {Надано доступ до сайту}space {Надано доступ до розділу}other {Надано доступ до посилання}}',
   'fabric.elements.share.to.integration.button': 'Надіслати в {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Надіслати піктограму',

package/dist/cjs/i18n/vi.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': 'Mời tham gia Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Chia sẻ trang',
   'fabric.elements.share.main.tab.text.jira': 'Chia sẻ vấn đề',
+  'fabric.elements.share.popup.label': 'Chia sẻ',
   'fabric.elements.share.success.message': '{object, select,blogpost {Đã chia sẻ bài đăng trên blog}board {Đã chia sẻ bảng thông tin}calendar {Đã chia sẻ lịch}draft {Đã chia sẻ bản nháp}filter {Đã chia sẻ bộ lọc}issue {Đã chia sẻ vấn đề}summary {Đã chia sẻ bản tóm tắt}list {Đã chia sẻ danh sách}timeline {Đã chia sẻ lịch trình}form {Đã chia sẻ biểu mẫu}media {Đã chia sẻ phương tiện}page {Đã chia sẻ trang}project {Đã chia sẻ dự án}pullrequest {Đã chia sẻ Pull request}question {Đã chia sẻ câu hỏi}report {Đã chia sẻ báo cáo}repository {Đã chia sẻ kho}request {Đã chia sẻ yêu cầu}roadmap {Đã chia sẻ lịch trình}site {Đã chia sẻ trang web}space {Đã chia sẻ không gian}other {Đã chia sẻ liên kết}}',
   'fabric.elements.share.to.integration.button': 'Chia sẻ với {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Biểu tượng chia sẻ',

package/dist/cjs/i18n/zh.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': '邀请加入 Jira',
   'fabric.elements.share.main.tab.text.confluence': '分享页面',
   'fabric.elements.share.main.tab.text.jira': '共享事务',
+  'fabric.elements.share.popup.label': '共享',
   'fabric.elements.share.success.message': '{object, select,blogpost {博客文章已共享}board {面板已共享}calendar {日历已共享}draft {草稿已共享}filter {筛选器已共享}issue {事务已共享}summary {摘要已共享}list {列表已共享}timeline {时间线已共享}form {表单已共享}media {媒体已共享}page {页面已共享}project {项目已共享}pullrequest {拉取请求已共享}question {问题已共享}report {报告已共享}repository {存储库已共享}request {请求已共享}roadmap {时间线已共享}site {站点已共享}space {空间已共享}other {链接已共享}}',
   'fabric.elements.share.to.integration.button': '分享到 {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': '共享图标',

package/dist/cjs/i18n/zh_TW.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': '邀請加入 Jira',
   'fabric.elements.share.main.tab.text.confluence': '分享頁面',
   'fabric.elements.share.main.tab.text.jira': '共用議題',
+  'fabric.elements.share.popup.label': '分享',
   'fabric.elements.share.success.message': '{object, select,blogpost {已分享部落格貼文}board {已分享看板}calendar {已分享行事曆}draft {已分享草稿}filter {已分享篩選條件}issue {已分享議題}summary {已分享摘要}list {已分享列表}timeline {已分享時間表}form {已分享表單}media {已分享媒體}page {已分享頁面}project {已分享專案}pullrequest {已分享提取要求}question {已分享問題}report {已分享報告}repository {已分享存放庫}request {已分享要求}roadmap {已分享時間軸}site {已分享網站}space {已分享空間}other {已分享連結}}',
   'fabric.elements.share.to.integration.button': '與 {integrationName} 分享',
   'fabric.elements.share.trigger.button.icon.label': '分享圖示',

package/dist/cjs/i18n.js

@@ -248,5 +248,15 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.elements.share.popup.label',
     defaultMessage: 'Share',
     description: 'Label of the popup that contains share menu used by assistive technologies'
+  },
+  slackMenuItemText: {
+    id: 'fabric.elements.share.menu.slack.label',
+    defaultMessage: 'Slack',
+    description: 'Text for the slack menu in share'
+  },
+  emailMenuItemText: {
+    id: 'fabric.elements.share.menu.email.label',
+    defaultMessage: 'Email',
+    description: 'Text for the email menu in share'
   }
 });

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

@@ -38,12 +38,14 @@ function LazyShareForm(props) {
     copyTooltipText,
     shareIntegrations,
     integrationMode,
+    isMenuItemSelected,
     // actions
     onLinkCopy,
     onDismiss,
     onSubmit,
     onDialogClose,
     onTabChange,
+    onMenuItemChange,
     // ref
     selectPortalRef,
     // props from states of parent:
@@ -75,6 +77,8 @@ function LazyShareForm(props) {
     // form title will be determined by `title` and `showTitle` prop passed to `ShareForm`,
     // so we don't need to show title via ShareFormWrapper
     ,
+    integrationMode: integrationMode,
+    isMenuItemSelected: isMenuItemSelected,
     shouldShowTitle: false
   }, showIntegrationForm && selectedIntegration !== null ? jsx(AnalyticsContext, {
     data: {
@@ -112,6 +116,7 @@ function LazyShareForm(props) {
     onUserSelectionChange: onUserSelectionChange,
     handleCloseDialog: onDialogClose,
     onTabChange: onTabChange,
+    onMenuItemChange: onMenuItemChange,
     isBrowseUsersDisabled: isBrowseUsersDisabled,
     userPickerOptions: userPickerOptions
   }) : jsx("p", null, jsx(FormattedMessage, messages.formNoPermissions))));

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

@@ -11,13 +11,17 @@ const LazyShareFormLazy = lazyForPaint(() => import( /* webpackChunkName: "@atla
 const LoadingDialog = ({
   shareFormTitle,
   showTitle,
-  setIsLoading
+  setIsLoading,
+  integrationMode,
+  isMenuItemSelected
 }) => {
   React.useEffect(() => {
     setIsLoading(true);
   });
   return jsx(ShareFormWrapper, {
-    shareFormTitle: shareFormTitle
+    shareFormTitle: shareFormTitle,
+    integrationMode: integrationMode,
+    isMenuItemSelected: isMenuItemSelected
     // if `showTitle` is passed, we use it. Otherwise, we will show title for loading dialog.
     ,
     shouldShowTitle: typeof showTitle === 'boolean' ? showTitle : true
@@ -35,6 +39,8 @@ export default (props => jsx(LazySuspense, {
   fallback: jsx(LoadingDialog, {
     shareFormTitle: props.shareFormTitle,
     showTitle: props.showTitle,
-    setIsLoading: props.setIsLoading
+    setIsLoading: props.setIsLoading,
+    integrationMode: props.integrationMode,
+    isMenuItemSelected: props.isMenuItemSelected
   })
 }, jsx(LazyShareFormLazy, props)));

package/dist/es2019/components/ShareDialogWithTrigger.js

@@ -11,7 +11,7 @@ import { layers } from '@atlaskit/theme/constants';
 import Aktooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { OBJECT_SHARED } from '../types';
-import { cancelShare, CHANNEL_ID, copyLinkButtonClicked, formShareSubmitted, screenEvent, shareSplitButtonEvent, shareTabClicked, shareTriggerButtonClicked
+import { cancelShare, CHANNEL_ID, copyLinkButtonClicked, formShareSubmitted, screenEvent, shareMenuItemClicked, shareSplitButtonEvent, shareTabClicked, shareTriggerButtonClicked
 // type TabSubjectIdType,
 } from './analytics/analytics';
 // eslint-disable-next-line no-duplicate-imports
@@ -54,6 +54,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
       showIntegrationForm: false,
       selectedIntegration: null,
       tabIndex: 0,
+      isMenuItemSelected: false,
       isLoading: false
     });
     _defineProperty(this, "closeAndResetDialog", () => {
@@ -63,7 +64,8 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
         shareError: undefined,
         isDialogOpen: false,
         showIntegrationForm: false,
-        selectedIntegration: null
+        selectedIntegration: null,
+        isMenuItemSelected: false
       });
       const {
         onUserSelectionChange,
@@ -101,6 +103,16 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
         tabIndex: index
       });
     });
+    _defineProperty(this, "onMenuItemChange", menuType => {
+      let subjectId = menuType === 'Slack' ? 'shareToSlackMenuItem' : 'shareMenuItem';
+      const {
+        shareContentType
+      } = this.props;
+      this.createAndFireEvent(shareMenuItemClicked(subjectId, shareContentType));
+      this.setState({
+        isMenuItemSelected: true
+      });
+    });
     _defineProperty(this, "getFlags", () => {
       const {
         intl: {
@@ -224,7 +236,8 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
         isDialogOpen: false,
         showIntegrationForm: false,
         selectedIntegration: null,
-        tabIndex: 0
+        tabIndex: 0,
+        isMenuItemSelected: false
       });
     });
     _defineProperty(this, "handleShareSubmit", data => {
@@ -279,6 +292,15 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
         defaultValue: data
       });
     });
+    _defineProperty(this, "calculatePopupOffset", ({
+      isMenuItemSelected,
+      dialogPlacement
+    }) => {
+      if (isMenuItemSelected && dialogPlacement === 'bottom-end') {
+        return [-0.1, 8];
+      }
+      return [0, 8];
+    });
     _defineProperty(this, "handleCopyLink", () => {
       const {
         copyLinkOrigin,
@@ -441,7 +463,8 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
       shareError,
       defaultValue,
       showIntegrationForm,
-      selectedIntegration
+      selectedIntegration,
+      isMenuItemSelected
     } = this.state;
     const {
       copyLink,
@@ -511,14 +534,16 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
         isPublicLink: isPublicLink,
         copyTooltipText: copyTooltipText,
         integrationMode: integrationMode,
-        shareIntegrations: shareIntegrations
+        shareIntegrations: shareIntegrations,
+        isMenuItemSelected: isMenuItemSelected
         // actions
         ,
         onLinkCopy: this.handleCopyLink,
         onSubmit: this.handleShareSubmit,
         onDismiss: this.handleFormDismiss,
         onDialogClose: this.handleCloseDialog,
-        onTabChange: this.onTabChange
+        onTabChange: this.onTabChange,
+        onMenuItemChange: this.onMenuItemChange
         //ref
         ,
         selectPortalRef: this.selectPortalRef,
@@ -532,6 +557,12 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
       zIndex: dialogZIndex,
       label: this.props.intl.formatMessage(messages.sharePopupLabel),
       role: "dialog"
+      // TODO: remove after https://hello.atlassian.net/wiki/x/SoEGzQ experiment is finished
+      ,
+      offset: this.calculatePopupOffset({
+        isMenuItemSelected,
+        dialogPlacement
+      })
     }), jsx(Portal, {
       zIndex: generateSelectZIndex(dialogZIndex)
     }, jsx("div", {

package/dist/es2019/components/ShareForm.js

@@ -7,7 +7,10 @@ import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import Form, { RequiredAsterisk } from '@atlaskit/form';
+import EmailIcon from '@atlaskit/icon/glyph/email';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { MenuGroup } from '@atlaskit/menu';
+import { Box, xcss } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { N300, R400 } from '@atlaskit/theme/colors';
 import { fontSizeSmall } from '@atlaskit/theme/constants';
@@ -19,6 +22,7 @@ import { CommentField } from './CommentField';
 import CopyLinkButton from './CopyLinkButton';
 import { IntegrationForm } from './IntegrationForm';
 import { ShareHeader } from './ShareHeader';
+import { ShareMenuItem } from './ShareMenuItem';
 import { UserPickerField } from './UserPickerField';
 const submitButtonWrapperStyles = css({
   display: 'flex',
@@ -59,6 +63,14 @@ const requiredFieldInfoStyles = css({
   color: `var(--ds-text-subtle, ${N300})`,
   fontSize: `${fontSizeSmall()}px`
 });
+const menuGroupContainerStyles = xcss({
+  color: 'color.text',
+  borderRadius: 'border.radius',
+  backgroundColor: 'elevation.surface.overlay',
+  alignItems: 'flex-start',
+  width: '150px',
+  margin: `${"var(--ds-space-negative-100, -8px)"} ${"var(--ds-space-negative-300, -24px)"}`
+});
 const integrationTabText = integrationName => jsx(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
   values: {
     integrationName
@@ -69,7 +81,8 @@ class InternalForm extends React.PureComponent {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
-      selectedTab: TabType.default
+      selectedTab: TabType.default,
+      selectedMenuItem: 'none'
     });
     _defineProperty(this, "renderShareForm", () => {
       const {
@@ -211,6 +224,13 @@ class InternalForm extends React.PureComponent {
       });
       (_this$props$onTabChan = (_this$props = this.props).onTabChange) === null || _this$props$onTabChan === void 0 ? void 0 : _this$props$onTabChan.call(_this$props, tab);
     });
+    _defineProperty(this, "changeMenuItem", menuItem => {
+      var _this$props$onMenuIte, _this$props2;
+      this.setState({
+        selectedMenuItem: menuItem
+      });
+      (_this$props$onMenuIte = (_this$props2 = this.props).onMenuItemChange) === null || _this$props$onMenuIte === void 0 ? void 0 : _this$props$onMenuIte.call(_this$props2, menuItem);
+    });
   }
   componentWillUnmount() {
     const {
@@ -227,10 +247,38 @@ class InternalForm extends React.PureComponent {
       shareIntegrations,
       handleCloseDialog
     } = this.props;
+    const {
+      selectedMenuItem
+    } = this.state;
     if (integrationMode === 'off' || !shareIntegrations || !shareIntegrations.length) {
       return this.renderShareForm();
     }
     const firstIntegration = shareIntegrations[0];
+    if (selectedMenuItem === 'default') {
+      return this.renderShareForm();
+    }
+    if (selectedMenuItem === 'Slack') {
+      return jsx(IntegrationForm, {
+        Content: firstIntegration.Content,
+        onIntegrationClose: () => handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog()
+      });
+    }
+    if (integrationMode === 'menu') {
+      return jsx(Box, {
+        xcss: menuGroupContainerStyles
+      }, jsx(MenuGroup, null, jsx(ShareMenuItem, {
+        iconName: jsx(firstIntegration.Icon, null),
+        labelId: messages.slackMenuItemText,
+        onClickHandler: () => this.changeMenuItem('Slack')
+      }), jsx(ShareMenuItem, {
+        iconName: jsx(EmailIcon, {
+          label: "",
+          size: "medium"
+        }),
+        labelId: messages.emailMenuItemText,
+        onClickHandler: () => this.changeMenuItem('default')
+      })));
+    }
     if (integrationMode === 'tabs') {
       return jsx(Tabs, {
         id: "ShareForm-Tabs-Integrations",

package/dist/es2019/components/ShareFormWrapper/ShareFormWrapper.js

@@ -7,14 +7,19 @@ const ShareFormWrapper = ({
   shareFormTitle,
   shouldShowTitle,
   children = null,
-  footer = null
+  footer = null,
+  integrationMode = 'off',
+  isMenuItemSelected = false
 }) => {
   const {
     formatMessage
   } = useIntl();
   return /*#__PURE__*/React.createElement(InlineDialogContentWrapper, {
     label: formatMessage(messages.formTitle)
-  }, /*#__PURE__*/React.createElement(InlineDialogFormWrapper, null, shouldShowTitle && /*#__PURE__*/React.createElement(ShareHeader, {
+  }, /*#__PURE__*/React.createElement(InlineDialogFormWrapper, {
+    integrationMode: integrationMode,
+    isMenuItemSelected: isMenuItemSelected
+  }, shouldShowTitle && /*#__PURE__*/React.createElement(ShareHeader, {
     title: shareFormTitle
   }), children), footer);
 };

package/dist/es2019/components/ShareFormWrapper/styled.js

@@ -1,13 +1,37 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
-export const InlineDialogFormWrapper = ({
-  children
-}) => jsx("div", {
-  css: {
-    width: `${8 * 44}px`
+import { menuWrapperWidth } from '../ShareMenuItem';
+
+/**
+ * Set fixed width considering full form width and full menu width in order
+ * to prevent dialog form from bouncing when isLoading prop is set to true.
+ * Since loading container has 100% width, it adjusts accordingly.
+ */
+const calculateFormWrapperWidth = ({
+  integrationMode,
+  isMenuItemSelected
+}) => {
+  const formWidth = `${8 * 44}px`;
+  if (!isMenuItemSelected && integrationMode === 'menu') {
+    return menuWrapperWidth;
   }
-}, children);
+  return formWidth;
+};
+export const InlineDialogFormWrapper = ({
+  children,
+  integrationMode,
+  isMenuItemSelected
+}) => {
+  return jsx("div", {
+    css: {
+      width: calculateFormWrapperWidth({
+        integrationMode,
+        isMenuItemSelected
+      })
+    }
+  }, children);
+};
 
 /**
  * Apply the same styling, as previous @atlaskit/inline-dialog had,
@@ -18,9 +42,11 @@ export const InlineDialogFormWrapper = ({
 export const InlineDialogContentWrapper = ({
   children,
   label
-}) => jsx("div", {
-  css: {
-    padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-300, 24px)"}`
-  },
-  "aria-label": label
-}, children);
+}) => {
+  return jsx("div", {
+    css: {
+      padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-300, 24px)"}`
+    },
+    "aria-label": label
+  }, children);
+};

package/dist/es2019/components/ShareMenuItem.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ButtonItem } from '@atlaskit/menu';
+import { Box, xcss } from '@atlaskit/primitives';
+const iconContainerStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 'size.200',
+  width: 'size.200',
+  borderRadius: 'border.radius'
+});
+export const ShareMenuItem = ({
+  iconName,
+  labelId,
+  onClickHandler
+}) => /*#__PURE__*/React.createElement(ButtonItem, {
+  iconBefore: /*#__PURE__*/React.createElement(IconContainer, {
+    icon: iconName
+  }),
+  onClick: onClickHandler
+}, /*#__PURE__*/React.createElement(FormattedMessage, labelId));
+export const IconContainer = ({
+  icon
+}) => /*#__PURE__*/React.createElement(Box, {
+  xcss: iconContainerStyles
+}, icon);
+export const menuWrapperWidth = '102px';

package/dist/es2019/components/analytics/analytics.js

@@ -1,7 +1,7 @@
 import { isEmail, isExternalUser, isTeam, isUser } from '@atlaskit/smart-user-picker';
 const buildAttributes = (attributes = {}) => ({
   packageName: "@atlaskit/share",
-  packageVersion: "4.17.0",
+  packageVersion: "4.18.1",
   ...attributes
 });
 const createEvent = (eventType, source, action, actionSubject, actionSubjectId, attributes = {}) => ({
@@ -39,6 +39,9 @@ export const shareTriggerButtonClicked = () => createEvent('ui', ANALYTICS_SOURC
 export const shareTabClicked = (subjectId, shareContentType) => createEvent('ui', ANALYTICS_SOURCE, 'clicked', 'tab', subjectId || 'shareTab', {
   shareContentType
 });
+export const shareMenuItemClicked = (subjectId, shareContentType) => createEvent('ui', ANALYTICS_SOURCE, 'clicked', 'menuItem', subjectId || 'shareMenuItem', {
+  shareContentType
+});
 export const cancelShare = start => createEvent('ui', ANALYTICS_SOURCE, 'pressed', 'keyboardShortcut', 'cancelShare', {
   source: ANALYTICS_SOURCE,
   duration: duration(start)

package/dist/es2019/i18n/cs.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': 'Pozvat do Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Sdílet stránku',
   'fabric.elements.share.main.tab.text.jira': 'Sdílet požadavek',
+  'fabric.elements.share.popup.label': 'Sdílet',
   'fabric.elements.share.success.message': '{object, select,blogpost {Příspěvek na blogu byl sdílen}board {Board byl sdílen}calendar {Kalendář byl sdílen}draft {Koncept byl sdílen}filter {Filtr byl sdílen}issue {Požadavek byl sdílen}summary {Souhrn byl sdílen}list {Seznam byl sdílen}timeline {Časová osa byla sdílena}form {Formulář byl sdílen}media {Multimédia byla sdílena}page {Stránka byla sdílena}project {Projekt byl sdílen}pullrequest {Pull request byl sdílen}question {Otázka byla sdílena}report {Sestava byla sdílena}repository {Repozitář byl sdílen}request {Žádost byla sdílena}roadmap {Časová osa byla sdílena}site {Web byl sdílen}space {Prostor byl sdílen}other {Odkaz byl sdílen}}',
   'fabric.elements.share.to.integration.button': 'Sdílet ve službě {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Ikona sdílení',

package/dist/es2019/i18n/da.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': 'Inviter til Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Del side',
   'fabric.elements.share.main.tab.text.jira': 'Del sag',
+  'fabric.elements.share.popup.label': 'Del',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blogindlæg delt}board {Tavle delt}calendar {Kalender delt}draft {Udkast delt}filter {Filter delt}issue {Sag delt}summary {Oversigt delt}list {Liste delt}timeline {Tidslinje delt}form {Formular delt}media {Medier delt}page {Side delt}project {Projekt delt}pullrequest {Pullanmodning delt}question {Spørgsmål delt}report {Rapport delt}repository {Lager delt}request {Anmodning delt}roadmap {Tidslinje delt}site {Websted delt}space {Område delt}other {Link delt}}',
   'fabric.elements.share.to.integration.button': 'Del med {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Del ikon',

package/dist/es2019/i18n/de.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': 'Zu Jira einladen',
   'fabric.elements.share.main.tab.text.confluence': 'Seite teilen',
   'fabric.elements.share.main.tab.text.jira': 'Vorgang teilen',
+  'fabric.elements.share.popup.label': 'Teilen',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blogpost geteilt}board {Board geteilt}calendar {Kalender geteilt}draft {Entwurf geteilt}filter {Filter geteilt}issue {Vorgang geteilt}summary {Zusammenfassung geteilt}list {Liste geteilt}timeline {Zeitleiste geteilt}form {Formular geteilt}media {Medien geteilt}page {Seite geteilt}project {Projekt geteilt}pullrequest {Pull-Anfrage geteilt}question {Frage geteilt}report {Bericht geteilt}repository {Repository geteilt}request {Anfrage geteilt}roadmap {Zeitleiste geteilt}site {Site geteilt}space {Bereich geteilt}other {Link geteilt}}',
   'fabric.elements.share.to.integration.button': 'Mit {integrationName} teilen',
   'fabric.elements.share.trigger.button.icon.label': 'Teilen-Symbol',

package/dist/es2019/i18n/en.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': 'Invite to Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Share page',
   'fabric.elements.share.main.tab.text.jira': 'Share issue',
+  'fabric.elements.share.popup.label': 'Share',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blog post shared}board {Board shared}calendar {Calendar shared}draft {Draft shared}filter {Filter shared}issue {Issue shared}summary {Summary shared}list {List shared}timeline {Timeline shared}form {Form shared}media {Media shared}page {Page shared}project {Project shared}pullrequest {Pull Request shared}question {Question shared}report {Report shared}repository {Repository shared}request {Request shared}roadmap {Timeline shared}site {Site shared}space {Space shared}other {Link Shared}}',
   'fabric.elements.share.to.integration.button': 'Share to {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Share icon',

package/dist/es2019/i18n/en_GB.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': 'Invite to Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Share page',
   'fabric.elements.share.main.tab.text.jira': 'Share issue',
+  'fabric.elements.share.popup.label': 'Share',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blog post shared}board {Board shared}calendar {Calendar shared}draft {Draft shared}filter {Filter shared}issue {Issue shared}summary {Summary shared}list {List shared}timeline {Timeline shared}form {Form shared}media {Media shared}page {Page shared}project {Project shared}pullrequest {Pull Request shared}question {Question shared}report {Report shared}repository {Repository shared}request {Request shared}roadmap {Timeline shared}site {Site shared}space {Space shared}other {Link Shared}}',
   'fabric.elements.share.to.integration.button': 'Share to {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Share icon',

package/dist/es2019/i18n/en_ZZ.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': '⁣⁢Invite to Jira؜⁠⁡⁠‌؜⁠⁠‍‍⁡⁣⁤',
   'fabric.elements.share.main.tab.text.confluence': '⁣⁢Share page‌‍‌‍⁠⁡؜‌⁣⁤',
   'fabric.elements.share.main.tab.text.jira': '⁣⁢Share issue؜‍‍؜‍⁡⁠⁠؜‍⁣⁤',
+  'fabric.elements.share.popup.label': '⁣⁢Share‍‌⁡‌‌‌‍‍⁣⁤',
   'fabric.elements.share.success.message': '⁣⁢{object, select,blogpost {Blog post shared}board {Board shared}calendar {Calendar shared}draft {Draft shared}filter {Filter shared}issue {Issue shared}summary {Summary shared}list {List shared}timeline {Timeline shared}form {Form shared}media {Media shared}page {Page shared}project {Project shared}pullrequest {Pull Request shared}question {Question shared}report {Report shared}repository {Repository shared}request {Request shared}roadmap {Timeline shared}site {Site shared}space {Space shared}other {Link Shared}}؜‌⁠‍؜⁣⁤',
   'fabric.elements.share.to.integration.button': '⁣⁢Share to {integrationName}‌⁡‌⁠⁡⁡⁡⁠‍‍؜‌⁡⁣⁤',
   'fabric.elements.share.trigger.button.icon.label': '⁣⁢Share icon‌‍؜‍‍؜‌⁡⁣⁤',

package/dist/es2019/i18n/es.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': 'Invitar a Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Compartir página',
   'fabric.elements.share.main.tab.text.jira': 'Compartir incidencia',
+  'fabric.elements.share.popup.label': 'Compartir',
   'fabric.elements.share.success.message': '{object, select,blogpost {Entrada de blog compartida}board {Tablero compartido}calendar {Calendario compartido}draft {Borrador compartido}filter {Filtro compartido}issue {Incidencia compartida}summary {Resumen compartido}list {Lista compartida}timeline {Cronograma compartido}form {Formulario compartido}media {Recursos multimedia compartidos}page {Página compartida}project {Proyecto compartido}pullrequest {Solicitud de incorporación de cambios compartida}question {Pregunta compartida}report {Informe compartido}repository {Repositorio compartido}request {Solicitud compartida}roadmap {Cronograma compartido}site {Sitio compartido}space {Espacio compartido}other {Enlace compartido}}',
   'fabric.elements.share.to.integration.button': 'Compartir en {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Icono de compartir',

package/dist/es2019/i18n/fi.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': 'Kutsu Jiraan',
   'fabric.elements.share.main.tab.text.confluence': 'Jaa sivu',
   'fabric.elements.share.main.tab.text.jira': 'Jaa asia',
+  'fabric.elements.share.popup.label': 'Jaa',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blogijulkaisu jaettu}board {Taulu jaettu}calendar {Kalenteri jaettu}draft {Luonnos jaettu}filter {Suodatin jaettu}issue {Asia jaettu}summary {Yhteenveto jaettu}list {Luettelo jaettu}timeline {Aikajana jaettu}form {Lomake jaettu}media {Media jaettu}page {Sivu jaettu}project {Projekti jaettu}pullrequest {Pull-pyyntö jaettu}question {Kysymys jaettu}report {Raportti jaettu}repository {Säilö jaettu}request {Pyyntö jaettu}roadmap {Aikajana jaettu}site {Sivusto jaettu}space {Työtila jaettu}other {Linkki jaettu}}',
   'fabric.elements.share.to.integration.button': 'Jaa kohteeseen {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Jaa kuvake',

package/dist/es2019/i18n/fr.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': 'Inviter à rejoindre Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Partager la page',
   'fabric.elements.share.main.tab.text.jira': 'Partager le ticket',
+  'fabric.elements.share.popup.label': 'Partager',
   'fabric.elements.share.success.message': '{object, select,blogpost {Billet de blog partagé}board {Tableau partagé}calendar {Calendrier partagé}draft {Brouillon partagé}filter {Filtre partagé}issue {Ticket partagé}summary {Résumé partagé}list {Liste partagée}timeline {Chronologie partagée}form {Formulaire partagé}media {Média partagé}page {Page partagée}project {Projet partagé}pullrequest {Pull request partagée}question {Question partagée}report {Rapport partagé}repository {Dépôt partagé}request {Demande partagée}roadmap {Chronologie partagée}site {Site partagé}space {Espace partagé}other {Lien partagé}}',
   'fabric.elements.share.to.integration.button': 'Partager avec {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Icône de partage',

package/dist/es2019/i18n/hu.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': 'Meghívás a Jirába',
   'fabric.elements.share.main.tab.text.confluence': 'Oldal megosztása',
   'fabric.elements.share.main.tab.text.jira': 'Ügy megosztása',
+  'fabric.elements.share.popup.label': 'Megosztás',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blogposzt megosztva}board {Tábla megosztva}calendar {Naptár megosztva}draft {Piszkozat megosztva}filter {Szűrő megosztva}issue {Ügy megosztva}summary {Összefoglaló megosztva}list {Lista megosztva}timeline {Idővonal megosztva}form {Űrlap megosztva}media {Média megosztva}page {Oldal megosztva}project {Projekt megosztva}pullrequest {Pull-kérelem megosztva}question {Kérdés megosztva}report {Jelentés megosztva}repository {Adattár megosztva}request {Kérelem megosztva}roadmap {Idővonal megosztva}site {Webhely megosztva}space {Munkatér megosztva}other {Link megosztva}}',
   'fabric.elements.share.to.integration.button': 'Megosztás itt: {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Ikon megosztása',

package/dist/es2019/i18n/it.js

@@ -47,6 +47,7 @@ export default {
   'fabric.elements.share.invite.to.jira': 'Invita in Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Condividi pagina',
   'fabric.elements.share.main.tab.text.jira': 'Condividi ticket',
+  'fabric.elements.share.popup.label': 'Condividi',
   'fabric.elements.share.success.message': '{object, select,blogpost {Post del blog condiviso}board {Board condivisa}calendar {Calendario condiviso}draft {Bozza condivisa}filter {Filtro condiviso}issue {Ticket condiviso}summary {Riepilogo condiviso}list {Elenco condiviso}timeline {Timeline condivisa}form {Modulo condiviso}media {Elemento multimediale condiviso}page {Pagina condiviso}project {Progetto condiviso}pullrequest {Pull request condivisa}question {Domanda condivisa}report {Report condiviso}repository {Repository condiviso}request {Richiesta condivisa}roadmap {Timeline condivisa}site {Sito condiviso}space {Spazio condiviso}other {Link condiviso}}',
   'fabric.elements.share.to.integration.button': 'Condividi in {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Icona Condividi',