@atlaskit/share 4.17.0 → 4.18.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/share
 
+## 4.18.1
+
+### Patch Changes
+
+-   Updated dependencies
+
+## 4.18.0
+
+### Minor Changes
+
+-   [#102882](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102882)
+    [`c5fa2a2f1c67`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c5fa2a2f1c67) -
+    [ux] add a menu dropdown to the share button
+
 ## 4.17.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -33,6 +33,9 @@
         {
             "path": "../../../design-system/icon/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/menu/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/popper/afm-cc/tsconfig.json"
         },
@@ -42,6 +45,9 @@
         {
             "path": "../../../design-system/portal/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../smart-experiences/smart-user-picker/afm-cc/tsconfig.json"
         },

package/dist/cjs/components/LazyShareForm/LazyShareForm.js

@@ -46,11 +46,13 @@ function LazyShareForm(props) {
     copyTooltipText = props.copyTooltipText,
     shareIntegrations = props.shareIntegrations,
     integrationMode = props.integrationMode,
+    isMenuItemSelected = props.isMenuItemSelected,
     onLinkCopy = props.onLinkCopy,
     onDismiss = props.onDismiss,
     onSubmit = props.onSubmit,
     onDialogClose = props.onDialogClose,
     onTabChange = props.onTabChange,
+    onMenuItemChange = props.onMenuItemChange,
     selectPortalRef = props.selectPortalRef,
     showIntegrationForm = props.showIntegrationForm,
     selectedIntegration = props.selectedIntegration,
@@ -79,6 +81,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 ? (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
     data: {
@@ -116,6 +120,7 @@ function LazyShareForm(props) {
     onUserSelectionChange: onUserSelectionChange,
     handleCloseDialog: onDialogClose,
     onTabChange: onTabChange,
+    onMenuItemChange: onMenuItemChange,
     isBrowseUsersDisabled: isBrowseUsersDisabled,
     userPickerOptions: userPickerOptions
   }) : (0, _react2.jsx)("p", null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.formNoPermissions))));

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

@@ -24,12 +24,16 @@ var LazyShareFormLazy = (0, _reactLooselyLazy.lazyForPaint)(function () {
 var LoadingDialog = function LoadingDialog(_ref) {
   var shareFormTitle = _ref.shareFormTitle,
     showTitle = _ref.showTitle,
-    setIsLoading = _ref.setIsLoading;
+    setIsLoading = _ref.setIsLoading,
+    integrationMode = _ref.integrationMode,
+    isMenuItemSelected = _ref.isMenuItemSelected;
   _react.default.useEffect(function () {
     setIsLoading(true);
   });
   return (0, _react2.jsx)(_ShareFormWrapper.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
@@ -48,7 +52,9 @@ var _default = exports.default = function _default(props) {
     fallback: (0, _react2.jsx)(LoadingDialog, {
       shareFormTitle: props.shareFormTitle,
       showTitle: props.showTitle,
-      setIsLoading: props.setIsLoading
+      setIsLoading: props.setIsLoading,
+      integrationMode: props.integrationMode,
+      isMenuItemSelected: props.isMenuItemSelected
     })
   }, (0, _react2.jsx)(LazyShareFormLazy, props));
 };

package/dist/cjs/components/ShareDialogWithTrigger.js

@@ -75,6 +75,7 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
       showIntegrationForm: false,
       selectedIntegration: null,
       tabIndex: 0,
+      isMenuItemSelected: false,
       isLoading: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeAndResetDialog", function () {
@@ -84,7 +85,8 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
         shareError: undefined,
         isDialogOpen: false,
         showIntegrationForm: false,
-        selectedIntegration: null
+        selectedIntegration: null,
+        isMenuItemSelected: false
       });
       var _this$props = _this.props,
         onUserSelectionChange = _this$props.onUserSelectionChange,
@@ -118,6 +120,14 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
         tabIndex: index
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuItemChange", function (menuType) {
+      var subjectId = menuType === 'Slack' ? 'shareToSlackMenuItem' : 'shareMenuItem';
+      var shareContentType = _this.props.shareContentType;
+      _this.createAndFireEvent((0, _analytics.shareMenuItemClicked)(subjectId, shareContentType));
+      _this.setState({
+        isMenuItemSelected: true
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFlags", function () {
       var formatMessage = _this.props.intl.formatMessage;
 
@@ -230,7 +240,8 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
         isDialogOpen: false,
         showIntegrationForm: false,
         selectedIntegration: null,
-        tabIndex: 0
+        tabIndex: 0,
+        isMenuItemSelected: false
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleShareSubmit", function (data) {
@@ -304,6 +315,14 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
         };
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calculatePopupOffset", function (_ref3) {
+      var isMenuItemSelected = _ref3.isMenuItemSelected,
+        dialogPlacement = _ref3.dialogPlacement;
+      if (isMenuItemSelected && dialogPlacement === 'bottom-end') {
+        return [-0.1, 8];
+      }
+      return [0, 8];
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCopyLink", function () {
       var _this$props5 = _this.props,
         copyLinkOrigin = _this$props5.copyLinkOrigin,
@@ -498,7 +517,8 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
         shareError = _this$state3.shareError,
         defaultValue = _this$state3.defaultValue,
         showIntegrationForm = _this$state3.showIntegrationForm,
-        selectedIntegration = _this$state3.selectedIntegration;
+        selectedIntegration = _this$state3.selectedIntegration,
+        isMenuItemSelected = _this$state3.isMenuItemSelected;
       var _this$props7 = this.props,
         copyLink = _this$props7.copyLink,
         dialogPlacement = _this$props7.dialogPlacement,
@@ -567,14 +587,16 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
             isPublicLink: isPublicLink,
             copyTooltipText: copyTooltipText,
             integrationMode: integrationMode,
-            shareIntegrations: shareIntegrations
+            shareIntegrations: shareIntegrations,
+            isMenuItemSelected: isMenuItemSelected
             // actions
             ,
             onLinkCopy: _this2.handleCopyLink,
             onSubmit: _this2.handleShareSubmit,
             onDismiss: _this2.handleFormDismiss,
             onDialogClose: _this2.handleCloseDialog,
-            onTabChange: _this2.onTabChange
+            onTabChange: _this2.onTabChange,
+            onMenuItemChange: _this2.onMenuItemChange
             //ref
             ,
             selectPortalRef: _this2.selectPortalRef,
@@ -589,6 +611,12 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
         zIndex: dialogZIndex,
         label: this.props.intl.formatMessage(_i18n.messages.sharePopupLabel),
         role: "dialog"
+        // TODO: remove after https://hello.atlassian.net/wiki/x/SoEGzQ experiment is finished
+        ,
+        offset: this.calculatePopupOffset({
+          isMenuItemSelected: isMenuItemSelected,
+          dialogPlacement: dialogPlacement
+        })
       }), (0, _react2.jsx)(_portal.default, {
         zIndex: (0, _utils.generateSelectZIndex)(dialogZIndex)
       }, (0, _react2.jsx)("div", {

package/dist/cjs/components/ShareForm.js

@@ -20,7 +20,10 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
+var _email = _interopRequireDefault(require("@atlaskit/icon/glyph/email"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _menu = require("@atlaskit/menu");
+var _primitives = require("@atlaskit/primitives");
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -32,6 +35,7 @@ var _CommentField = require("./CommentField");
 var _CopyLinkButton = _interopRequireDefault(require("./CopyLinkButton"));
 var _IntegrationForm = require("./IntegrationForm");
 var _ShareHeader = require("./ShareHeader");
+var _ShareMenuItem = require("./ShareMenuItem");
 var _UserPickerField = require("./UserPickerField");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -78,6 +82,14 @@ var requiredFieldInfoStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   fontSize: "".concat((0, _constants.fontSizeSmall)(), "px")
 });
+var menuGroupContainerStyles = (0, _primitives.xcss)({
+  color: 'color.text',
+  borderRadius: 'border.radius',
+  backgroundColor: 'elevation.surface.overlay',
+  alignItems: 'flex-start',
+  width: '150px',
+  margin: "var(--ds-space-negative-100, -8px)".concat(" ", "var(--ds-space-negative-300, -24px)")
+});
 var integrationTabText = function integrationTabText(integrationName) {
   return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareInIntegrationButtonText, {
     values: {
@@ -97,7 +109,8 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      selectedTab: _types.TabType.default
+      selectedTab: _types.TabType.default,
+      selectedMenuItem: 'none'
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderShareForm", function () {
       var _this$props = _this.props,
@@ -229,14 +242,21 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
       });
       (_this$props$onTabChan = (_this$props4 = _this.props).onTabChange) === null || _this$props$onTabChan === void 0 || _this$props$onTabChan.call(_this$props4, tab);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
   }
   (0, _createClass2.default)(InternalForm, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props5 = this.props,
-        onDismiss = _this$props5.onDismiss,
-        getValues = _this$props5.getValues;
+      var _this$props6 = this.props,
+        onDismiss = _this$props6.onDismiss,
+        getValues = _this$props6.getValues;
       if (onDismiss) {
         onDismiss(getValues());
       }
@@ -244,15 +264,48 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props6 = this.props,
-        _this$props6$integrat = _this$props6.integrationMode,
-        integrationMode = _this$props6$integrat === void 0 ? 'off' : _this$props6$integrat,
-        shareIntegrations = _this$props6.shareIntegrations,
-        handleCloseDialog = _this$props6.handleCloseDialog;
+      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,
+        handleCloseDialog = _this$props7.handleCloseDialog;
+      var selectedMenuItem = this.state.selectedMenuItem;
       if (integrationMode === 'off' || !shareIntegrations || !shareIntegrations.length) {
         return this.renderShareForm();
       }
       var firstIntegration = shareIntegrations[0];
+      if (selectedMenuItem === 'default') {
+        return this.renderShareForm();
+      }
+      if (selectedMenuItem === 'Slack') {
+        return (0, _react2.jsx)(_IntegrationForm.IntegrationForm, {
+          Content: firstIntegration.Content,
+          onIntegrationClose: function onIntegrationClose() {
+            return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+          }
+        });
+      }
+      if (integrationMode === 'menu') {
+        return (0, _react2.jsx)(_primitives.Box, {
+          xcss: menuGroupContainerStyles
+        }, (0, _react2.jsx)(_menu.MenuGroup, null, (0, _react2.jsx)(_ShareMenuItem.ShareMenuItem, {
+          iconName: (0, _react2.jsx)(firstIntegration.Icon, null),
+          labelId: _i18n.messages.slackMenuItemText,
+          onClickHandler: function onClickHandler() {
+            return _this2.changeMenuItem('Slack');
+          }
+        }), (0, _react2.jsx)(_ShareMenuItem.ShareMenuItem, {
+          iconName: (0, _react2.jsx)(_email.default, {
+            label: "",
+            size: "medium"
+          }),
+          labelId: _i18n.messages.emailMenuItemText,
+          onClickHandler: function onClickHandler() {
+            return _this2.changeMenuItem('default');
+          }
+        })));
+      }
       if (integrationMode === 'tabs') {
         return (0, _react2.jsx)(_tabs.default, {
           id: "ShareForm-Tabs-Integrations",

package/dist/cjs/components/ShareFormWrapper/ShareFormWrapper.js

@@ -16,12 +16,19 @@ var ShareFormWrapper = function ShareFormWrapper(_ref) {
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children,
     _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer;
+    footer = _ref$footer === void 0 ? null : _ref$footer,
+    _ref$integrationMode = _ref.integrationMode,
+    integrationMode = _ref$integrationMode === void 0 ? 'off' : _ref$integrationMode,
+    _ref$isMenuItemSelect = _ref.isMenuItemSelected,
+    isMenuItemSelected = _ref$isMenuItemSelect === void 0 ? false : _ref$isMenuItemSelect;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_styled.InlineDialogContentWrapper, {
     label: formatMessage(_i18n.messages.formTitle)
-  }, /*#__PURE__*/_react.default.createElement(_styled.InlineDialogFormWrapper, null, shouldShowTitle && /*#__PURE__*/_react.default.createElement(_ShareHeader.ShareHeader, {
+  }, /*#__PURE__*/_react.default.createElement(_styled.InlineDialogFormWrapper, {
+    integrationMode: integrationMode,
+    isMenuItemSelected: isMenuItemSelected
+  }, shouldShowTitle && /*#__PURE__*/_react.default.createElement(_ShareHeader.ShareHeader, {
     title: shareFormTitle
   }), children), footer);
 };

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

@@ -5,13 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InlineDialogFormWrapper = exports.InlineDialogContentWrapper = void 0;
 var _react = require("@emotion/react");
+var _ShareMenuItem = require("../ShareMenuItem");
 /** @jsx jsx */
 
-var InlineDialogFormWrapper = exports.InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref) {
-  var children = _ref.children;
+/**
+ * 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.
+ */
+var calculateFormWrapperWidth = function calculateFormWrapperWidth(_ref) {
+  var integrationMode = _ref.integrationMode,
+    isMenuItemSelected = _ref.isMenuItemSelected;
+  var formWidth = "".concat(8 * 44, "px");
+  if (!isMenuItemSelected && integrationMode === 'menu') {
+    return _ShareMenuItem.menuWrapperWidth;
+  }
+  return formWidth;
+};
+var InlineDialogFormWrapper = exports.InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref2) {
+  var children = _ref2.children,
+    integrationMode = _ref2.integrationMode,
+    isMenuItemSelected = _ref2.isMenuItemSelected;
   return (0, _react.jsx)("div", {
     css: {
-      width: "".concat(8 * 44, "px")
+      width: calculateFormWrapperWidth({
+        integrationMode: integrationMode,
+        isMenuItemSelected: isMenuItemSelected
+      })
     }
   }, children);
 };
@@ -22,9 +42,9 @@ var InlineDialogFormWrapper = exports.InlineDialogFormWrapper = function InlineD
  *
  * packages/design-system/inline-dialog/src/InlineDialog/styled.ts:20:3
  */
-var InlineDialogContentWrapper = exports.InlineDialogContentWrapper = function InlineDialogContentWrapper(_ref2) {
-  var children = _ref2.children,
-    label = _ref2.label;
+var InlineDialogContentWrapper = exports.InlineDialogContentWrapper = function InlineDialogContentWrapper(_ref3) {
+  var children = _ref3.children,
+    label = _ref3.label;
   return (0, _react.jsx)("div", {
     css: {
       padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-300, 24px)")

package/dist/cjs/components/ShareMenuItem.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.menuWrapperWidth = exports.ShareMenuItem = exports.IconContainer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _menu = require("@atlaskit/menu");
+var _primitives = require("@atlaskit/primitives");
+var iconContainerStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: 'size.200',
+  width: 'size.200',
+  borderRadius: 'border.radius'
+});
+var ShareMenuItem = exports.ShareMenuItem = function ShareMenuItem(_ref) {
+  var iconName = _ref.iconName,
+    labelId = _ref.labelId,
+    onClickHandler = _ref.onClickHandler;
+  return /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(IconContainer, {
+      icon: iconName
+    }),
+    onClick: onClickHandler
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, labelId));
+};
+var IconContainer = exports.IconContainer = function IconContainer(_ref2) {
+  var icon = _ref2.icon;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: iconContainerStyles
+  }, icon);
+};
+var menuWrapperWidth = exports.menuWrapperWidth = '102px';

package/dist/cjs/components/analytics/analytics.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shortUrlRequested = exports.shortUrlGenerated = exports.shareTriggerButtonClicked = exports.shareTabClicked = 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;
+exports.shortUrlRequested = exports.shortUrlGenerated = exports.shareTriggerButtonClicked = exports.shareTabClicked = exports.shareSplitButtonEvent = exports.shareMenuItemClicked = 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"));
 var _smartUserPicker = require("@atlaskit/smart-user-picker");
 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; }
@@ -13,7 +13,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "4.17.0"
+    packageVersion: "4.18.1"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {
@@ -70,6 +70,11 @@ var shareTabClicked = exports.shareTabClicked = function shareTabClicked(subject
     shareContentType: shareContentType
   });
 };
+var shareMenuItemClicked = exports.shareMenuItemClicked = function shareMenuItemClicked(subjectId, shareContentType) {
+  return createEvent('ui', ANALYTICS_SOURCE, 'clicked', 'menuItem', subjectId || 'shareMenuItem', {
+    shareContentType: shareContentType
+  });
+};
 var cancelShare = exports.cancelShare = function cancelShare(start) {
   return createEvent('ui', ANALYTICS_SOURCE, 'pressed', 'keyboardShortcut', 'cancelShare', {
     source: ANALYTICS_SOURCE,

package/dist/cjs/i18n/cs.js

@@ -53,6 +53,7 @@ var _default = exports.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/cjs/i18n/da.js

@@ -53,6 +53,7 @@ var _default = exports.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/cjs/i18n/de.js

@@ -53,6 +53,7 @@ var _default = exports.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/cjs/i18n/en.js

@@ -53,6 +53,7 @@ var _default = exports.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/cjs/i18n/en_GB.js

@@ -53,6 +53,7 @@ var _default = exports.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/cjs/i18n/en_ZZ.js

@@ -53,6 +53,7 @@ var _default = exports.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/cjs/i18n/es.js

@@ -53,6 +53,7 @@ var _default = exports.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/cjs/i18n/fi.js

@@ -53,6 +53,7 @@ var _default = exports.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/cjs/i18n/fr.js

@@ -53,6 +53,7 @@ var _default = exports.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/cjs/i18n/hu.js

@@ -53,6 +53,7 @@ var _default = exports.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/cjs/i18n/it.js

@@ -53,6 +53,7 @@ var _default = exports.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',

package/dist/cjs/i18n/ja.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/ko.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 {공유한 요청}timeline {공유한 타임라인}site {공유한 사이트}space {공유한 스페이스}other {공유한 링크}}',
   'fabric.elements.share.to.integration.button': '{integrationName}에 공유',
   'fabric.elements.share.trigger.button.icon.label': '공유 아이콘',

package/dist/cjs/i18n/nb.js

@@ -53,6 +53,7 @@ var _default = exports.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 sak',
+  'fabric.elements.share.popup.label': 'Del',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blogginnlegg er delt}board {Tavle er delt}calendar {Kalender er delt}draft {Utkast er delt}filter {Filter er delt}issue {Sak er delt}summary {Sammendrag er delt}list {Liste er delt}timeline {Tidslinje er delt}form {Skjema er delt}media {Medier er delt}page {Side er delt}project {Prosjekt er delt}pullrequest {Pull-forespørsel er delt}question {Spørsmål er delt}report {Rapport er delt}repository {Repositorium er delt}request {Forespørsel er delt}roadmap {Veikart er delt}site {Nettsted er delt}space {Område er delt}other {Kobling er delt}}',
   'fabric.elements.share.to.integration.button': 'Del til {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Dele-ikon',

package/dist/cjs/i18n/nl.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': 'Uitnodigen voor Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Pagina delen',
   'fabric.elements.share.main.tab.text.jira': 'Issue delen',
+  'fabric.elements.share.popup.label': 'Delen',
   'fabric.elements.share.success.message': '{object, select,blogpost {Blogpost gedeeld}board {Bord gedeeld}calendar {Agenda gedeeld}draft {Concept gedeeld}filter {Filter gedeeld}issue {Issue gedeeld}summary {Samenvatting gedeeld}list {Lijst gedeeld}timeline {Tijdlijn gedeeld}form {Formulier gedeeld}media {Media gedeeld}page {Pagina gedeeld}project {Project gedeeld}pullrequest {Pull-request gedeeld}question {Vraag gedeeld}report {Rapport gedeeld}repository {Repository gedeeld}request {Aanvraag gedeeld}roadmap {Tijdlijn gedeeld}site {Site gedeeld}space {Space gedeeld}other {Link gedeeld}}',
   'fabric.elements.share.to.integration.button': 'Delen met {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': "Pictogram 'Delen'",

package/dist/cjs/i18n/pl.js

@@ -53,6 +53,7 @@ var _default = exports.default = {
   'fabric.elements.share.invite.to.jira': 'Zaproś do systemu Jira',
   'fabric.elements.share.main.tab.text.confluence': 'Udostępnij stronę',
   'fabric.elements.share.main.tab.text.jira': 'Udostępnij zgłoszenie',
+  'fabric.elements.share.popup.label': 'Udostępnij',
   'fabric.elements.share.success.message': '{object, select,blogpost {Udostępniono wpis na blogu}board {Udostępniono tablicę}calendar {Udostępniono kalendarz}draft {Udostępniono wersję roboczą}filter {Udostępniono filtr}issue {Udostępniono zgłoszenie}summary {Udostępniono podsumowanie}list {Udostępniono listę}timeline {Udostępniono oś czasu}form {Udostępniono formularz}media {Udostępniono multimedia}page {Udostępniono stronę}project {Udostępniono projekt}pullrequest {Udostępniono pull request}question {Udostępniono pytanie}report {Udostępniono raport}repository {Udostępniono repozytorium}request {Udostępniono wniosek}roadmap {Udostępniono oś czasu}site {Udostępniono witrynę}space {Udostępniono przestrzeń}other {Udostępniono łącze}}',
   'fabric.elements.share.to.integration.button': 'Udostępnij w {integrationName}',
   'fabric.elements.share.trigger.button.icon.label': 'Ikona udostępniania',