@atlaskit/share 4.16.13 → 4.18.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/share
 
+## 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
+
+-   [#99095](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99095)
+    [`ffdabd2f2891`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ffdabd2f2891) -
+    Allow custom placeholder, required & label messages for the user picker
+
 ## 4.16.13
 
 ### Patch 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/UserPickerField.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UserPickerFieldComponent = exports.UserPickerField = exports.REQUIRED = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -59,7 +60,7 @@ var getNoOptionsMessage = function getNoOptionsMessage(isPublicLink, allowEmail,
     })) : null;
   };
 };
-var getPlaceHolderMessageDescriptor = function getPlaceHolderMessageDescriptor() {
+var getPlaceHolderMessageDescriptorDefault = function getPlaceHolderMessageDescriptorDefault() {
   var product = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'confluence';
   var allowEmail = arguments.length > 1 ? arguments[1] : undefined;
   var isBrowseUsersDisabled = arguments.length > 2 ? arguments[2] : undefined;
@@ -81,7 +82,7 @@ var getPlaceHolderMessageDescriptor = function getPlaceHolderMessageDescriptor()
   };
   return placeholderMessage[product];
 };
-var getLabelMessageDescriptor = function getLabelMessageDescriptor() {
+var getLabelMessageDescriptorDefault = function getLabelMessageDescriptorDefault() {
   var product = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'confluence';
   var allowEmail = arguments.length > 1 ? arguments[1] : undefined;
   var isBrowseUsersDisabled = arguments.length > 2 ? arguments[2] : undefined;
@@ -101,7 +102,7 @@ var getLabelMessageDescriptor = function getLabelMessageDescriptor() {
   };
   return labelMessage[product];
 };
-var getRequiredMessage = function getRequiredMessage() {
+var getRequiredMessageDefault = function getRequiredMessageDefault() {
   var product = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'confluence';
   var allowEmail = arguments.length > 1 ? arguments[1] : undefined;
   var isBrowseUsersDisabled = arguments.length > 2 ? arguments[2] : undefined;
@@ -220,11 +221,41 @@ var UserPickerFieldComponent = exports.UserPickerFieldComponent = /*#__PURE__*/f
         userPickerOptions = _this$props3.userPickerOptions;
       var smartUserPickerProps = this.getSmartUserPickerProps();
       var allowEmail = (0, _utils.allowEmails)(config);
-      var requiredMessage = getRequiredMessage(product, allowEmail, isBrowseUsersDisabled);
       var _ref2 = userPickerOptions !== null && userPickerOptions !== void 0 ? userPickerOptions : {},
         header = _ref2.header,
         noOptionsMessageHandler = _ref2.noOptionsMessageHandler,
-        onFocus = _ref2.onFocus;
+        onFocus = _ref2.onFocus,
+        getLabelMessageCustom = _ref2.getLabelMessage,
+        getPlaceholderMessageCustom = _ref2.getPlaceholderMessage,
+        getRequiredMessageCustom = _ref2.getRequiredMessage;
+      var getRequiredMessage = function getRequiredMessage() {
+        var _getRequiredMessageCu;
+        for (var _len2 = arguments.length, _ref3 = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          _ref3[_key2] = arguments[_key2];
+        }
+        var product = _ref3[0],
+          params = _ref3.slice(1);
+        return (_getRequiredMessageCu = getRequiredMessageCustom === null || getRequiredMessageCustom === void 0 ? void 0 : getRequiredMessageCustom.apply(void 0, (0, _toConsumableArray2.default)(params))) !== null && _getRequiredMessageCu !== void 0 ? _getRequiredMessageCu : getRequiredMessageDefault.apply(void 0, [product].concat((0, _toConsumableArray2.default)(params)));
+      };
+      var getLabelMessage = function getLabelMessage() {
+        var _getLabelMessageCusto;
+        for (var _len3 = arguments.length, _ref4 = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          _ref4[_key3] = arguments[_key3];
+        }
+        var product = _ref4[0],
+          params = _ref4.slice(1);
+        return (_getLabelMessageCusto = getLabelMessageCustom === null || getLabelMessageCustom === void 0 ? void 0 : getLabelMessageCustom.apply(void 0, (0, _toConsumableArray2.default)(params))) !== null && _getLabelMessageCusto !== void 0 ? _getLabelMessageCusto : getLabelMessageDescriptorDefault.apply(void 0, [product].concat((0, _toConsumableArray2.default)(params)));
+      };
+      var getPlaceHolderMessage = function getPlaceHolderMessage() {
+        var _getPlaceholderMessag;
+        for (var _len4 = arguments.length, _ref5 = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+          _ref5[_key4] = arguments[_key4];
+        }
+        var product = _ref5[0],
+          params = _ref5.slice(1);
+        return (_getPlaceholderMessag = getPlaceholderMessageCustom === null || getPlaceholderMessageCustom === void 0 ? void 0 : getPlaceholderMessageCustom.apply(void 0, (0, _toConsumableArray2.default)(params))) !== null && _getPlaceholderMessag !== void 0 ? _getPlaceholderMessag : getPlaceHolderMessageDescriptorDefault.apply(void 0, [product].concat((0, _toConsumableArray2.default)(params)));
+      };
+      var requiredMessage = getRequiredMessage(product, allowEmail, isBrowseUsersDisabled);
       var commonPickerProps = {
         fieldId: 'share',
         loadOptions: this.loadOptions,
@@ -244,16 +275,16 @@ var UserPickerFieldComponent = exports.UserPickerFieldComponent = /*#__PURE__*/f
       return /*#__PURE__*/_react.default.createElement(_form.Field, {
         label: /*#__PURE__*/_react.default.createElement("span", {
           id: USER_PICKER_FIELD_LABEL
-        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getLabelMessageDescriptor(product, allowEmail, isBrowseUsersDisabled))),
+        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getLabelMessage(product, allowEmail, isBrowseUsersDisabled))),
         name: "users",
         validate: validate,
         defaultValue: defaultValue,
         transform: this.handleUserPickerTransform,
         isRequired: true
-      }, function (_ref3) {
-        var fieldProps = _ref3.fieldProps,
-          fieldValidationError = _ref3.error,
-          fieldValid = _ref3.meta.valid;
+      }, function (_ref6) {
+        var fieldProps = _ref6.fieldProps,
+          fieldValidationError = _ref6.error,
+          fieldValid = _ref6.meta.valid;
         var helperMessage = _this2.getHelperMessageOrDefault();
         var addMoreMessage = shareError !== null && shareError !== void 0 && shareError.errorCode ? null : intl.formatMessage(_i18n.messages.userPickerAddMoreMessage);
         var wasValidationOrShareError = !!fieldValidationError || !!shareError;
@@ -263,7 +294,7 @@ var UserPickerFieldComponent = exports.UserPickerFieldComponent = /*#__PURE__*/f
           addMoreMessage: addMoreMessage,
           placeholder: /*#__PURE__*/_react.default.createElement("span", {
             id: USER_PICKER_FIELD_PLACEHOLDER
-          }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getPlaceHolderMessageDescriptor(product, allowEmail, isBrowseUsersDisabled))),
+          }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getPlaceHolderMessage(product, allowEmail, isBrowseUsersDisabled))),
           menuPortalTarget: menuPortalTarget,
           inputId: fieldProps.id
         })), helperMessage && !wasValidationOrShareError && /*#__PURE__*/_react.default.createElement(_form.HelperMessage, null, helperMessage), !fieldValid && fieldValidationError === REQUIRED && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, requiredMessage)), shareError && shareError.errorCode && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, shareError.message, "\xA0", shareError.helpUrl && /*#__PURE__*/_react.default.createElement("a", {

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.16.13"
+    packageVersion: "4.18.0"
   }, 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‌‍؜‍‍؜‌⁡⁣⁤',