@atlaskit/share 4.2.2 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/share
 
+## 4.3.0
+
+### Minor Changes
+
+- [`1b0098b3680`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b0098b3680) - [ux] Updated the Share dialog to handle errors relating to user, group, or team selection.
+
+## 4.2.3
+
+### Patch Changes
+
+- [`d6d8c718bd8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6d8c718bd8) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 4.2.2
 
 ### Patch Changes

package/dist/cjs/clients/ShareServiceClient.js

@@ -45,22 +45,31 @@ var ShareServiceClient = /*#__PURE__*/function () {
   }, {
     key: "share",
     value: function share(content, recipients, metadata, comment) {
-      var options = {
-        path: DEFAULT_SHARE_PATH,
-        requestInit: {
-          method: 'post',
-          headers: {
-            'Content-Type': 'application/json; charset=UTF-8'
-          },
-          body: JSON.stringify({
-            content: content,
-            recipients: recipients,
-            metadata: metadata,
-            comment: comment
-          })
+      return fetch("".concat(this.serviceConfig.url, "/").concat(DEFAULT_SHARE_PATH), {
+        method: 'post',
+        headers: {
+          'Content-Type': 'application/json; charset=UTF-8'
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          content: content,
+          recipients: recipients,
+          metadata: metadata,
+          comment: comment
+        })
+      }).then(function (response) {
+        if (response.status === 204) {
+          return Promise.resolve();
+        } else if (response.ok) {
+          return response.json();
+        } else {
+          return Promise.reject({
+            code: response.status,
+            reason: response.statusText,
+            body: response.json()
+          });
         }
-      };
-      return _utilServiceSupport.utils.requestService(this.serviceConfig, options);
+      });
     }
   }]);
   return ShareServiceClient;

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

@@ -19,6 +19,8 @@ var _utils = require("../utils");
 /** @jsx jsx */
 /** @jsxFrag */
 
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 /**
  * A Share form content which is lazy-loaded.
  * Make sure this component is not exported inside main entry points `src/index.ts`
@@ -64,7 +66,7 @@ function LazyShareForm(props) {
     }
   }, bottomMessage) : null, customFooter && selectedIntegration === null && (0, _react2.jsx)("div", {
     css: {
-      margin: "0 ".concat(-(0, _constants.gridSize)() * 3, "px ").concat(-(0, _constants.gridSize)() * 2, "px ").concat(-(0, _constants.gridSize)() * 3, "px")
+      margin: "0 calc(-1 * ".concat("var(--ds-space-300, 24px)", ") calc(-1 * ", "var(--ds-space-200, 16px)", ") calc(-1 * ", "var(--ds-space-300, 24px)", ")")
     }
   }, customFooter));
   _react.default.useEffect(function () {

package/dist/cjs/components/ShareDialogWithTrigger.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultShareContentState = exports.ShareDialogWithTriggerInternal = exports.ShareDialogWithTrigger = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -254,19 +256,40 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
         });
         showFlags(_this.getFlags());
         _ufoExperiences.shareSubmitExp.success();
-      }).catch(function (err) {
-        _this.setState({
-          isSharing: false,
-          shareError: {
-            message: err.message
-          }
-        });
-        (0, _ufoExperienceHelper.isValidFailedExperience)(_ufoExperiences.shareSubmitExp, err);
-      });
+      }).catch( /*#__PURE__*/function () {
+        var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(err) {
+          var shareError;
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return _this.generateShareError(err).catch(function (errorGenFailed) {
+                  return {
+                    message: err.message || errorGenFailed.message || 'Unknown error',
+                    retryable: true
+                  };
+                });
+              case 2:
+                shareError = _context.sent;
+                _this.setState({
+                  isSharing: false,
+                  shareError: shareError
+                });
+                (0, _ufoExperienceHelper.isValidFailedExperience)(_ufoExperiences.shareSubmitExp, err);
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }());
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFormDismiss", function (data) {
-      _this.setState(function (_ref) {
-        var ignoreIntermediateState = _ref.ignoreIntermediateState;
+      _this.setState(function (_ref2) {
+        var ignoreIntermediateState = _ref2.ignoreIntermediateState;
         return ignoreIntermediateState ? null : {
           defaultValue: data
         };
@@ -370,6 +393,13 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
         isUsingSplitButton: false
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnUserSelectionChange", function (value) {
+      var onUserSelectionChange = _this.props.onUserSelectionChange;
+      _this.setState({
+        shareError: undefined
+      });
+      onUserSelectionChange === null || onUserSelectionChange === void 0 ? void 0 : onUserSelectionChange(value);
+    });
     return _this;
   }
   (0, _createClass2.default)(ShareDialogWithTriggerInternal, [{
@@ -386,6 +416,48 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
         this.handleDialogOpen();
       }
     }
+  }, {
+    key: "generateShareError",
+    value: function () {
+      var _generateShareError = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(err) {
+        var _errorBody$messagesDe;
+        var errorBody, firstErrorFromBody;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!err.body) {
+                _context2.next = 6;
+                break;
+              }
+              _context2.next = 3;
+              return err.body;
+            case 3:
+              _context2.t0 = _context2.sent;
+              _context2.next = 7;
+              break;
+            case 6:
+              _context2.t0 = {};
+            case 7:
+              errorBody = _context2.t0;
+              // We'll only try and deal with the first error, sorry
+              firstErrorFromBody = (_errorBody$messagesDe = errorBody.messagesDetails) === null || _errorBody$messagesDe === void 0 ? void 0 : _errorBody$messagesDe[0];
+              return _context2.abrupt("return", {
+                message: (firstErrorFromBody === null || firstErrorFromBody === void 0 ? void 0 : firstErrorFromBody.message) || err.message,
+                errorCode: firstErrorFromBody === null || firstErrorFromBody === void 0 ? void 0 : firstErrorFromBody.errorCode,
+                helpUrl: firstErrorFromBody === null || firstErrorFromBody === void 0 ? void 0 : firstErrorFromBody.helpUrl,
+                retryable: (firstErrorFromBody === null || firstErrorFromBody === void 0 ? void 0 : firstErrorFromBody.errorCode) === undefined
+              });
+            case 10:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      function generateShareError(_x2) {
+        return _generateShareError.apply(this, arguments);
+      }
+      return generateShareError;
+    }()
   }, {
     key: "render",
     value: function render() {
@@ -414,7 +486,6 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
         cloudId = _this$props7.cloudId,
         orgId = _this$props7.orgId,
         shareFieldsFooter = _this$props7.shareFieldsFooter,
-        onUserSelectionChange = _this$props7.onUserSelectionChange,
         dialogZIndex = _this$props7.dialogZIndex,
         isPublicLink = _this$props7.isPublicLink,
         tabIndex = _this$props7.tabIndex,
@@ -460,7 +531,7 @@ var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent
             loggedInAccountId: loggedInAccountId,
             cloudId: cloudId,
             orgId: orgId,
-            onUserSelectionChange: onUserSelectionChange,
+            onUserSelectionChange: _this2.handleOnUserSelectionChange,
             shareFieldsFooter: shareFieldsFooter,
             isPublicLink: isPublicLink,
             copyTooltipText: copyTooltipText,

package/dist/cjs/components/ShareForm.js

@@ -24,7 +24,6 @@ var _form = _interopRequireDefault(require("@atlaskit/form"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _i18n = require("../i18n");
 var _types = require("../types");
@@ -44,7 +43,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var submitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
 var centerAlignedIconWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
-var formWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), (0, _constants.gridSize)());
+var formWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)");
 exports.formWrapperStyles = formWrapperStyles;
 var formFooterStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n"])));
 exports.formFooterStyles = formFooterStyles;
@@ -98,7 +97,8 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         helperMessage = _this$props.helperMessage,
         orgId = _this$props.orgId,
         isBrowseUsersDisabled = _this$props.isBrowseUsersDisabled,
-        formatMessage = _this$props.intl.formatMessage;
+        formatMessage = _this$props.intl.formatMessage,
+        shareError = _this$props.shareError;
       return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
         data: {
           source: _analytics.ANALYTICS_SOURCE
@@ -122,7 +122,8 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         isPublicLink: isPublicLink,
         helperMessage: helperMessage,
         orgId: orgId,
-        isBrowseUsersDisabled: isBrowseUsersDisabled
+        isBrowseUsersDisabled: isBrowseUsersDisabled,
+        shareError: shareError
       })), (0, _react2.jsx)("div", {
         css: formFieldStyles
       }, (0, _react2.jsx)(_CommentField.CommentField, {
@@ -148,13 +149,16 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         isDisabled = _this$props2.isDisabled,
         isPublicLink = _this$props2.isPublicLink,
         integrationMode = _this$props2.integrationMode;
-      var shouldShowWarning = shareError && !isSharing;
+      var isRetryableError = !!(shareError !== null && shareError !== void 0 && shareError.retryable);
+      var isNonRetryableError = shareError && !shareError.retryable;
+      var shouldShowWarning = isRetryableError && !isSharing;
       var buttonAppearance = !shouldShowWarning ? 'primary' : 'warning';
       var tabMode = integrationMode === 'tabs';
       var formPublicLabel = tabMode ? _i18n.messages.formSharePublic : _i18n.messages.formSendPublic;
       var formSendLabel = _i18n.messages.formShare;
       var sendLabel = isPublicLink ? formPublicLabel : formSendLabel;
-      var buttonLabel = shareError ? _i18n.messages.formRetry : sendLabel;
+      var buttonLabel = isRetryableError ? _i18n.messages.formRetry : sendLabel;
+      var buttonDisabled = isDisabled || isNonRetryableError;
       var ButtonLabelWrapper = buttonAppearance === 'warning' ? 'strong' : _react.default.Fragment;
       return (0, _react2.jsx)("div", {
         css: submitButtonWrapperStyles
@@ -170,7 +174,7 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
         appearance: buttonAppearance,
         type: "submit",
         isLoading: isSharing,
-        isDisabled: isDisabled
+        isDisabled: buttonDisabled
       }, (0, _react2.jsx)(ButtonLabelWrapper, null, submitButtonLabel || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, buttonLabel))));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMainTabTitle", function () {

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

@@ -7,14 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineDialogFormWrapper = exports.InlineDialogContentWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 /** @jsx jsx */
 
 var InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref) {
   var children = _ref.children;
   return (0, _react2.jsx)("div", {
     css: {
-      width: "".concat((0, _constants.gridSize)() * 44, "px")
+      width: "".concat(8 * 44, "px")
     }
   }, children);
 };
@@ -30,7 +29,7 @@ var InlineDialogContentWrapper = function InlineDialogContentWrapper(_ref2) {
   var children = _ref2.children;
   return (0, _react2.jsx)("div", {
     css: {
-      padding: "".concat((0, _constants.gridSize)() * 2, "px ").concat((0, _constants.gridSize)() * 3, "px")
+      padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-300, 24px)")
     }
   }, children);
 };

package/dist/cjs/components/ShareHeader.js

@@ -9,14 +9,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 var _i18n = require("../i18n");
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 var headerWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
 var getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  line-height: ", "px;\n  margin-right: ", "px;\n  margin-top: ", "px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), (0, _typography.h500)(theme), (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4, (0, _constants.gridSize)() * 4);
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), (0, _typography.h500)(theme), "var(--ds-font-lineHeight-500, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)");
 };
 exports.getFormHeaderTitleStyles = getFormHeaderTitleStyles;
 var ShareHeader = function ShareHeader(_ref) {

package/dist/cjs/components/UserPickerField.js

@@ -103,7 +103,7 @@ var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
         return [];
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getInviteWarningMessage", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getHelperMessageOrDefault", function () {
       var _this$props = _this.props,
         product = _this$props.product,
         isPublicLink = _this$props.isPublicLink,
@@ -142,7 +142,8 @@ var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
         selectPortalRef = _this$props2.selectPortalRef,
         isPublicLink = _this$props2.isPublicLink,
         orgId = _this$props2.orgId,
-        isBrowseUsersDisabled = _this$props2.isBrowseUsersDisabled;
+        isBrowseUsersDisabled = _this$props2.isBrowseUsersDisabled,
+        shareError = _this$props2.shareError;
       var smartUserPickerProps = enableSmartUserPicker && !isBrowseUsersDisabled ? {
         productKey: product,
         principalId: loggedInAccountId,
@@ -176,13 +177,19 @@ var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
         transform: this.handleUserPickerTransform
       }, function (_ref2) {
         var fieldProps = _ref2.fieldProps,
-          error = _ref2.error,
-          valid = _ref2.meta.valid;
-        var inviteWarningMessage = _this2.getInviteWarningMessage();
+          fieldValidationError = _ref2.error,
+          fieldValid = _ref2.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;
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(UserPickerComponent, (0, _extends2.default)({}, fieldProps, commonPickerProps, smartUserPickerProps, {
-          addMoreMessage: intl.formatMessage(_i18n.messages.userPickerAddMoreMessage),
+          addMoreMessage: addMoreMessage,
           menuPortalTarget: menuPortalTarget
-        })), inviteWarningMessage && /*#__PURE__*/_react.default.createElement(_form.HelperMessage, null, inviteWarningMessage), !valid && error === REQUIRED && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, requiredMessage)));
+        })), 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", {
+          target: "_blank",
+          href: shareError.helpUrl,
+          rel: "help"
+        }, "Learn why")));
       });
     }
   }]);

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

@@ -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.2.2"
+    packageVersion: "4.3.0"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/cjs/i18n/da.js

@@ -44,7 +44,7 @@ var _default = {
   'fabric.elements.share.in.integration.button': 'Del i {integrationName}',
   'fabric.elements.share.main.tab.text.confluence': 'Del side',
   'fabric.elements.share.main.tab.text.jira': 'Del sag',
-  '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 {Køreplan delt}site {Websted delt}space {Område delt}other {Link delt}}',
+  '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 {Pull-anmodning delt}question {Spørgsmål delt}report {Rapport delt}repository {Lager delt}request {Anmodning delt}roadmap {Køreplan 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',
   'fabric.elements.share.trigger.button.invite.text': 'Invitér',

package/dist/cjs/i18n/en_ZZ.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -20,6 +21,7 @@ var _default = {
   'fabric.elements.share.form.comment.placeholder': '⁣⁢Add a message⁠⁡‌⁠⁠⁡‌‍⁡؜‌⁠⁣⁤',
   'fabric.elements.share.form.info.message.no.invite.confluence': '⁣⁢Recipients will see the name of the page and your message⁠‌‌؜⁠‌⁡؜⁠‌‌‌⁠‌⁣⁤',
   'fabric.elements.share.form.info.message.no.invite.jira': '⁣⁢Recipients will see the name of the issue and your message‍‍⁠؜⁡‍⁠⁣⁤',
+  'fabric.elements.share.form.no-permissions': '⁣⁢You do not have the ability to share.؜⁠‍‍‍⁡⁠⁡⁣⁤',
   'fabric.elements.share.form.public.send': '⁣⁢Send public link⁠؜⁠‍⁠⁡؜‌⁡⁠⁣⁤',
   'fabric.elements.share.form.public.share': '⁣⁢Share public link⁠⁡‍‍‍‌⁠؜‍‌‍⁡⁡⁡؜⁣⁤',
   'fabric.elements.share.form.retry': '⁣⁢Retry‌‌⁡؜‌‌⁡⁡‌⁣⁤',
@@ -29,18 +31,20 @@ var _default = {
   'fabric.elements.share.form.user-picker.add-more': '⁣⁢Enter more⁠⁠⁡‍‌؜؜‌‍⁠؜‍⁠⁣⁤',
   'fabric.elements.share.form.user-picker.no-options.existingUserOnly': '⁣⁢We couldn’t find any results for "{inputValue}".⁡‌‌؜⁡⁡⁡⁠⁠‍‍⁣⁤',
   'fabric.elements.share.form.user-picker.no-options.generic': '⁣⁢We couldn’t find any results for "{inputValue}". Invite people by using an email address.⁡؜؜‍⁠؜⁠⁠⁡؜⁡⁠‍‍⁣⁤',
+  'fabric.elements.share.form.user-picker.placeholder.emailOnly': '⁣⁢Enter email⁠⁠⁡⁡‍⁡‌⁣⁤',
   'fabric.elements.share.form.user-picker.placeholder.existingUserOnly': '⁣⁢Enter name or team⁡‍؜‍؜⁠‌⁡⁣⁤',
   'fabric.elements.share.form.user-picker.placeholder.generic': '⁣⁢Enter name, group, team or email⁡؜‌‍؜؜‍⁣⁤',
   'fabric.elements.share.form.user-picker.placeholder.jira': '⁣⁢Enter name, team or email‌‍⁠‌‌⁡⁠⁡؜‍؜⁣⁤',
   'fabric.elements.share.form.user-picker.placholder.generic.existingUserOnly': '⁣⁢Enter name, group or team‍‌‍⁠⁡‌⁡⁠‍⁡⁠⁠⁡⁣⁤',
   'fabric.elements.share.form.user-picker.validation.required': '⁣⁢Select at least one user, group, team or email.⁡⁡؜‌‍‌⁠؜⁣⁤',
+  'fabric.elements.share.form.user-picker.validation.required.email-only': '⁣⁢Select at least one email.⁠‍‍⁠‌⁠⁡⁡‍⁠‌؜⁡‌⁣⁤',
   'fabric.elements.share.form.user-picker.validation.required.existingUserOnly': '⁣⁢Select at least one user, group or team.‍‌⁠⁡؜‌⁠⁠‌⁡‍‍⁣⁤',
   'fabric.elements.share.form.user-picker.validation.required.jira': '⁣⁢Select at least one user, team or email.؜⁠‍؜‍‍‌⁠⁠⁣⁤',
   'fabric.elements.share.form.user-picker.validation.required.jira.existingUserOnly': '⁣⁢Select at least one user or team.‌؜⁠‌‍⁡؜‌‍⁡‌⁠⁡⁣⁤',
   'fabric.elements.share.in.integration.button': '⁣⁢Share in {integrationName}⁠؜⁡⁡‌⁡؜‌‌‌⁣⁤',
   'fabric.elements.share.main.tab.text.confluence': '⁣⁢Share page‌‍‌‍⁠⁡؜‌⁣⁤',
   'fabric.elements.share.main.tab.text.jira': '⁣⁢Share issue؜‍‍؜‍⁡⁠⁠؜‍⁣⁤',
-  '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⁡⁡‍⁡⁡‍⁠؜⁡⁠‌⁣⁤} 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 {⁣⁢Roadmap shared‍‍‌⁡⁡؜⁠⁡‌⁣⁤} site {⁣⁢Site shared؜⁡⁡؜⁡؜؜⁡؜⁠‍⁣⁤} space {⁣⁢Space shared⁡‍‍‍؜؜⁡⁡⁡⁣⁤} other {⁣⁢Link Shared‌‌‍‌‍⁡⁣⁤}}',
+  '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 {Roadmap 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‌‍؜‍‍؜‌⁡⁣⁤',
   'fabric.elements.share.trigger.button.invite.text': '⁣⁢Invite⁡‍‍⁠؜⁡‌⁠؜؜؜؜⁣⁤',

package/dist/cjs/i18n/es.js

@@ -44,7 +44,7 @@ var _default = {
   'fabric.elements.share.in.integration.button': 'Compartir en {integrationName}',
   'fabric.elements.share.main.tab.text.confluence': 'Compartir página',
   'fabric.elements.share.main.tab.text.jira': 'Compartir incidencia',
-  '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 {Hoja de ruta compartida}site {Sitio compartido}space {Espacio compartido}other {Enlace compartido}}',
+  '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 {Medios 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 {Hoja de ruta compartida}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',
   'fabric.elements.share.trigger.button.invite.text': 'Invitar',

package/dist/cjs/i18n/nl.js

@@ -44,7 +44,7 @@ var _default = {
   'fabric.elements.share.in.integration.button': 'Delen in {integrationName}',
   'fabric.elements.share.main.tab.text.confluence': 'Pagina delen',
   'fabric.elements.share.main.tab.text.jira': 'Issue 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 {roadmap gedeeld}site {site gedeeld}space {space gedeeld}other {link gedeeld}}',
+  '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 {roadmap 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'",
   'fabric.elements.share.trigger.button.invite.text': 'Uitnodigen',

package/dist/cjs/i18n/pt_BR.js

@@ -44,7 +44,7 @@ var _default = {
   'fabric.elements.share.in.integration.button': 'Compartilhar em {integrationName}',
   'fabric.elements.share.main.tab.text.confluence': 'Compartilhar página',
   'fabric.elements.share.main.tab.text.jira': 'Compartilhar item',
-  '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 {Roteiro compartilhado}site {Site compartilhado}space {Espaço compartilhado}other {Link compartilhado}}',
+  '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 {Solicitação pull compartilhada}question {Pergunta compartilhada}report {Relatório compartilhado}repository {Repositório compartilhado}request {Solicitação compartilhada}roadmap {Roteiro 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',
   'fabric.elements.share.trigger.button.invite.text': 'Convidar',

package/dist/cjs/i18n/tr.js

@@ -44,7 +44,7 @@ var _default = {
   'fabric.elements.share.in.integration.button': '{integrationName} içinde paylaş',
   'fabric.elements.share.main.tab.text.confluence': 'Sayfayı paylaşın',
   'fabric.elements.share.main.tab.text.jira': 'Konuyu paylaşın',
-  '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 {Yol haritası paylaşıldı}site {Site paylaşıldı}space {Alan paylaşıldı}other {Bağlantı paylaşıldı}}',
+  '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 {Yol haritası 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',
   'fabric.elements.share.trigger.button.invite.text': 'Davet Et',

package/dist/cjs/i18n/uk.js

@@ -44,7 +44,7 @@ var _default = {
   'fabric.elements.share.in.integration.button': 'Поділитися в {integrationName}',
   'fabric.elements.share.main.tab.text.confluence': 'Поділитися сторінкою',
   'fabric.elements.share.main.tab.text.jira': 'Поділитися завданням',
-  '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.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': 'Надіслати піктограму',
   'fabric.elements.share.trigger.button.invite.text': 'Запросити',

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "4.2.2"
+	"version": "4.3.0"
 }

package/dist/es2019/clients/ShareServiceClient.js

@@ -26,21 +26,30 @@ export class ShareServiceClient {
    * To send a POST request to the share endpoint in Share service
    */
   share(content, recipients, metadata, comment) {
-    const options = {
-      path: DEFAULT_SHARE_PATH,
-      requestInit: {
-        method: 'post',
-        headers: {
-          'Content-Type': 'application/json; charset=UTF-8'
-        },
-        body: JSON.stringify({
-          content,
-          recipients,
-          metadata,
-          comment
-        })
+    return fetch(`${this.serviceConfig.url}/${DEFAULT_SHARE_PATH}`, {
+      method: 'post',
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8'
+      },
+      credentials: 'include',
+      body: JSON.stringify({
+        content,
+        recipients,
+        metadata,
+        comment
+      })
+    }).then(response => {
+      if (response.status === 204) {
+        return Promise.resolve();
+      } else if (response.ok) {
+        return response.json();
+      } else {
+        return Promise.reject({
+          code: response.status,
+          reason: response.statusText,
+          body: response.json()
+        });
       }
-    };
-    return utils.requestService(this.serviceConfig, options);
+    });
   }
 }

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

@@ -4,6 +4,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../../i18n';
 import { INTEGRATION_MODAL_SOURCE } from '../analytics/analytics';
@@ -61,7 +62,7 @@ function LazyShareForm(props) {
     }
   }, bottomMessage) : null, customFooter && selectedIntegration === null && jsx("div", {
     css: {
-      margin: `0 ${-gridSize() * 3}px ${-gridSize() * 2}px ${-gridSize() * 3}px`
+      margin: `0 calc(-1 * ${"var(--ds-space-300, 24px)"}) calc(-1 * ${"var(--ds-space-200, 16px)"}) calc(-1 * ${"var(--ds-space-300, 24px)"})`
     }
   }, customFooter));
   React.useEffect(() => {