@atlaskit/share 4.13.0 → 4.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/components/CopyLinkButton.js +1 -1
  3. package/dist/cjs/components/IntegrationButton.js +1 -1
  4. package/dist/cjs/components/IntegrationForm.js +1 -1
  5. package/dist/cjs/components/LazyShareForm/LazyShareForm.js +2 -4
  6. package/dist/cjs/components/ShareDialogContainer.js +2 -4
  7. package/dist/cjs/components/ShareDialogWithTrigger.js +3 -5
  8. package/dist/cjs/components/ShareForm.js +4 -6
  9. package/dist/cjs/components/ShareHeader.js +1 -1
  10. package/dist/cjs/components/SplitButton.js +2 -3
  11. package/dist/cjs/components/UserPickerField.js +17 -11
  12. package/dist/cjs/components/analytics/analytics.js +1 -1
  13. package/dist/cjs/types/UserPickerOptions.js +5 -0
  14. package/dist/es2019/components/CopyLinkButton.js +1 -1
  15. package/dist/es2019/components/IntegrationButton.js +2 -1
  16. package/dist/es2019/components/IntegrationForm.js +1 -1
  17. package/dist/es2019/components/LazyShareForm/LazyShareForm.js +2 -4
  18. package/dist/es2019/components/ShareDialogContainer.js +2 -4
  19. package/dist/es2019/components/ShareDialogWithTrigger.js +3 -5
  20. package/dist/es2019/components/ShareForm.js +4 -6
  21. package/dist/es2019/components/ShareHeader.js +1 -1
  22. package/dist/es2019/components/SplitButton.js +9 -6
  23. package/dist/es2019/components/UserPickerField.js +20 -9
  24. package/dist/es2019/components/analytics/analytics.js +1 -1
  25. package/dist/es2019/types/UserPickerOptions.js +1 -0
  26. package/dist/esm/components/CopyLinkButton.js +1 -1
  27. package/dist/esm/components/IntegrationButton.js +1 -1
  28. package/dist/esm/components/IntegrationForm.js +1 -1
  29. package/dist/esm/components/LazyShareForm/LazyShareForm.js +2 -4
  30. package/dist/esm/components/ShareDialogContainer.js +2 -4
  31. package/dist/esm/components/ShareDialogWithTrigger.js +3 -5
  32. package/dist/esm/components/ShareForm.js +4 -6
  33. package/dist/esm/components/ShareHeader.js +1 -1
  34. package/dist/esm/components/SplitButton.js +2 -3
  35. package/dist/esm/components/UserPickerField.js +17 -11
  36. package/dist/esm/components/analytics/analytics.js +1 -1
  37. package/dist/esm/types/UserPickerOptions.js +1 -0
  38. package/dist/types/components/LazyShareForm/LazyShareForm.d.ts +1 -1
  39. package/dist/types/components/ShareDialogContainer.d.ts +1 -1
  40. package/dist/types/components/UserPickerField.d.ts +2 -5
  41. package/dist/types/types/ShareDialogContainer.d.ts +2 -8
  42. package/dist/types/types/ShareDialogWithTrigger.d.ts +1 -1
  43. package/dist/types/types/ShareForm.d.ts +1 -1
  44. package/dist/types/types/UserPickerOptions.d.ts +13 -0
  45. package/dist/types/types/index.d.ts +1 -0
  46. package/dist/types-ts4.5/components/LazyShareForm/LazyShareForm.d.ts +1 -1
  47. package/dist/types-ts4.5/components/ShareDialogContainer.d.ts +1 -1
  48. package/dist/types-ts4.5/components/UserPickerField.d.ts +2 -5
  49. package/dist/types-ts4.5/types/ShareDialogContainer.d.ts +2 -8
  50. package/dist/types-ts4.5/types/ShareDialogWithTrigger.d.ts +1 -1
  51. package/dist/types-ts4.5/types/ShareForm.d.ts +1 -1
  52. package/dist/types-ts4.5/types/UserPickerOptions.d.ts +13 -0
  53. package/dist/types-ts4.5/types/index.d.ts +1 -0
  54. package/docs/0-intro.tsx +12 -11
  55. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/share
2
2
 
3
+ ## 4.14.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#74147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74147) [`a9a862061df0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a9a862061df0) - Enforce usage of spacing design tokens instead of hard-coded values
8
+
9
+ ## 4.14.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#72864](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72864) [`967b26e5f6b8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/967b26e5f6b8) - [ux] Added new `userPickerCustomHeader` and `noOptionsMessage` prop to Share Dialog. `userPickerCustomHeader` adds custom header to User Picker Option List and `noOptionsMessage` renders a custom message when the user picker returns an empty options list.
14
+
3
15
  ## 4.13.0
4
16
 
5
17
  ### Minor Changes
@@ -31,7 +31,7 @@ var Z_INDEX = _constants.layers.modal();
31
31
  var AUTO_DISMISS_SECONDS = 8;
32
32
  var AUTO_DISMISS_MS = exports.AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
33
33
  var messageContainerStyle = exports.messageContainerStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n margin: ", "\n ", ";\n"])), "var(--ds-space-negative-100, -8px)", "var(--ds-space-negative-200, -16px)");
34
- var messageTextStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n text-indent: 6px;\n"])));
34
+ var messageTextStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n text-indent: ", ";\n"])), "var(--ds-space-075, 6px)");
35
35
  var isSafari = navigator.userAgent.indexOf('Safari');
36
36
  var HiddenInput = exports.HiddenInput = /*#__PURE__*/_react.default.forwardRef(
37
37
  // we need a hidden input to reliably copy to clipboard across all browsers.
@@ -15,7 +15,7 @@ var _excluded = ["text", "textColor", "IntegrationIcon"];
15
15
  var _templateObject, _templateObject2;
16
16
  /** @jsx jsx */
17
17
  var integrationButtonCopyWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: left;\n"])));
18
- var integrationIconWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin: 1px ", " 0 0;\n"])), "var(--ds-space-100, 8px)");
18
+ var integrationIconWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin: ", " ", "\n ", " ", ";\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-100, 8px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)");
19
19
  var IntegrationButton = function IntegrationButton(props) {
20
20
  var text = props.text,
21
21
  textColor = props.textColor,
@@ -11,7 +11,7 @@ var _react2 = require("@emotion/react");
11
11
  var _typography = require("@atlaskit/theme/typography");
12
12
  var _templateObject;
13
13
  /** @jsx jsx */
14
- var formWrapperStyle = exports.formWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n [class^='FormHeader__FormHeaderWrapper'] {\n h1:first-child {\n ", "\n\n > span {\n /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n font-size: inherit !important;\n line-height: inherit !important;\n letter-spacing: inherit !important;\n }\n }\n }\n\n [class^='FormSection__FormSectionWrapper'] {\n margin-top: 0px;\n }\n\n [class^='FormFooter__FormFooterWrapper'] {\n justify-content: space-between;\n margin-top: ", ";\n margin-bottom: ", ";\n }\n\n [class^='Field__FieldWrapper']:not(:first-child) {\n margin-top: ", ";\n }\n"])), (0, _typography.h500)(), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
14
+ var formWrapperStyle = exports.formWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n [class^='FormHeader__FormHeaderWrapper'] {\n h1:first-child {\n ", "\n\n > span {\n /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n font-size: inherit !important;\n line-height: inherit !important;\n letter-spacing: inherit !important;\n }\n }\n }\n\n [class^='FormSection__FormSectionWrapper'] {\n margin-top: ", ";\n }\n\n [class^='FormFooter__FormFooterWrapper'] {\n justify-content: space-between;\n margin-top: ", ";\n margin-bottom: ", ";\n }\n\n [class^='Field__FieldWrapper']:not(:first-child) {\n margin-top: ", ";\n }\n"])), (0, _typography.h500)(), "var(--ds-space-0, 0px)", "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
15
15
  var IntegrationForm = exports.IntegrationForm = function IntegrationForm(_ref) {
16
16
  var Content = _ref.Content,
17
17
  _ref$onIntegrationClo = _ref.onIntegrationClose,
@@ -60,8 +60,7 @@ function LazyShareForm(props) {
60
60
  showTitle = props.showTitle,
61
61
  orgId = props.orgId,
62
62
  isBrowseUsersDisabled = props.isBrowseUsersDisabled,
63
- userPickerCustomHeader = props.userPickerCustomHeader,
64
- noOptionsMessage = props.noOptionsMessage;
63
+ userPickerOptions = props.userPickerOptions;
65
64
  var footer = (0, _react2.jsx)("div", null, bottomMessage ? (0, _react2.jsx)("div", {
66
65
  css: {
67
66
  width: "".concat((0, _constants.gridSize)() * 44, "px")
@@ -118,8 +117,7 @@ function LazyShareForm(props) {
118
117
  handleCloseDialog: onDialogClose,
119
118
  onTabChange: onTabChange,
120
119
  isBrowseUsersDisabled: isBrowseUsersDisabled,
121
- userPickerCustomHeader: userPickerCustomHeader,
122
- noOptionsMessage: noOptionsMessage
120
+ userPickerOptions: userPickerOptions
123
121
  }) : (0, _react2.jsx)("p", null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.formNoPermissions))));
124
122
  }
125
123
  var _default = exports.default = LazyShareForm;
@@ -358,8 +358,7 @@ var ShareDialogContainerInternal = exports.ShareDialogContainerInternal = /*#__P
358
358
  copyTooltipText = _this$props2.copyTooltipText,
359
359
  onDialogClose = _this$props2.onDialogClose,
360
360
  isBrowseUsersDisabled = _this$props2.isBrowseUsersDisabled,
361
- userPickerCustomHeader = _this$props2.userPickerCustomHeader,
362
- noOptionsMessage = _this$props2.noOptionsMessage;
361
+ userPickerOptions = _this$props2.userPickerOptions;
363
362
  var _this$state = this.state,
364
363
  config = _this$state.config,
365
364
  isFetchingConfig = _this$state.isFetchingConfig;
@@ -408,8 +407,7 @@ var ShareDialogContainerInternal = exports.ShareDialogContainerInternal = /*#__P
408
407
  copyTooltipText: copyTooltipText,
409
408
  onDialogClose: onDialogClose,
410
409
  isBrowseUsersDisabled: isBrowseUsersDisabled,
411
- userPickerCustomHeader: userPickerCustomHeader,
412
- noOptionsMessage: noOptionsMessage
410
+ userPickerOptions: userPickerOptions
413
411
  })));
414
412
  }
415
413
  }]);
@@ -515,8 +515,7 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
515
515
  integrationMode = _this$props7.integrationMode,
516
516
  shareIntegrations = _this$props7.shareIntegrations,
517
517
  isBrowseUsersDisabled = _this$props7.isBrowseUsersDisabled,
518
- userPickerCustomHeader = _this$props7.userPickerCustomHeader,
519
- noOptionsMessage = _this$props7.noOptionsMessage;
518
+ userPickerOptions = _this$props7.userPickerOptions;
520
519
  var style = typeof tabIndex !== 'undefined' && tabIndex >= 0 ? {
521
520
  outline: 'none'
522
521
  } : undefined;
@@ -543,8 +542,6 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
543
542
  isSharing: isSharing,
544
543
  shareFormTitle: shareFormTitle,
545
544
  showTitle: integrationMode !== 'tabs' || !shareIntegrations || !shareIntegrations.length,
546
- noOptionsMessage: noOptionsMessage,
547
- userPickerCustomHeader: userPickerCustomHeader,
548
545
  shareFormHelperMessage: shareFormHelperMessage,
549
546
  shareError: shareError,
550
547
  defaultValue: defaultValue,
@@ -573,7 +570,8 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
573
570
  //ref
574
571
  ,
575
572
  selectPortalRef: _this2.selectPortalRef,
576
- isBrowseUsersDisabled: isBrowseUsersDisabled
573
+ isBrowseUsersDisabled: isBrowseUsersDisabled,
574
+ userPickerOptions: userPickerOptions
577
575
  }));
578
576
  },
579
577
  isOpen: isDialogOpen,
@@ -43,12 +43,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
43
43
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
44
44
  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; } }
45
45
  var submitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: auto;\n"])));
46
- 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"])));
46
+ var centerAlignedIconWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-self: center;\n padding: ", " ", ";\n\n > div {\n line-height: 1;\n }\n"])), "var(--ds-space-0, 0px)", "var(--ds-space-150, 12px)");
47
47
  var formWrapperStyles = exports.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)");
48
48
  var formFooterStyles = exports.formFooterStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n"])));
49
49
  var formFieldStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: ", ";\n"])), "var(--ds-space-150, 12px)");
50
50
  var integrationWrapperStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
51
- var integrationIconWrapperStyles = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: ", ";\n margin-right: 5px;\n"])), "var(--ds-space-negative-075, -6px)");
51
+ var integrationIconWrapperStyles = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: ", ";\n margin-right: ", ";\n"])), "var(--ds-space-negative-075, -6px)", "var(--ds-space-050, 4px)");
52
52
  var requiredFieldInfoStyles = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: ", ";\n color: ", ";\n font-size: ", "px;\n"])), "var(--ds-space-200, 16px)", "var(--ds-text-subtle, ".concat(_colors.N300, ")"), (0, _constants.fontSizeSmall)());
53
53
  var integrationTabText = function integrationTabText(integrationName) {
54
54
  return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareInIntegrationButtonText, {
@@ -99,8 +99,7 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
99
99
  isBrowseUsersDisabled = _this$props.isBrowseUsersDisabled,
100
100
  formatMessage = _this$props.intl.formatMessage,
101
101
  shareError = _this$props.shareError,
102
- userPickerCustomHeader = _this$props.userPickerCustomHeader,
103
- noOptionsMessage = _this$props.noOptionsMessage;
102
+ userPickerOptions = _this$props.userPickerOptions;
104
103
  return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
105
104
  data: {
106
105
  source: _analytics.ANALYTICS_SOURCE
@@ -128,8 +127,7 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
128
127
  orgId: orgId,
129
128
  isBrowseUsersDisabled: isBrowseUsersDisabled,
130
129
  shareError: shareError,
131
- header: userPickerCustomHeader,
132
- noOptionsMessage: noOptionsMessage
130
+ userPickerOptions: userPickerOptions
133
131
  })), (0, _react2.jsx)("div", {
134
132
  css: formFieldStyles
135
133
  }, (0, _react2.jsx)(_CommentField.CommentField, {
@@ -15,7 +15,7 @@ var _templateObject, _templateObject2;
15
15
  /** @jsx jsx */
16
16
  var headerWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n"])));
17
17
  var getFormHeaderTitleStyles = exports.getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
18
- return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n line-height: 32px;\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-space-400, 32px)", "var(--ds-space-400, 32px)");
18
+ 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-space-400, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)");
19
19
  };
20
20
  var ShareHeader = exports.ShareHeader = function ShareHeader(_ref) {
21
21
  var title = _ref.title;
@@ -16,7 +16,6 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
16
16
  var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
17
17
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
18
18
  var _colors = require("@atlaskit/theme/colors");
19
- var _constants = require("@atlaskit/theme/constants");
20
19
  var _i18n = require("../i18n");
21
20
  var _analytics = require("./analytics/analytics");
22
21
  var _IntegrationButton = _interopRequireDefault(require("./IntegrationButton"));
@@ -25,8 +24,8 @@ var _templateObject, _templateObject2, _templateObject3;
25
24
  /** @jsx jsx */
26
25
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
26
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
28
- var splitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n button {\n border-radius: ", "px 0 0 ", "px;\n }\n button:hover {\n border-radius: ", "px 0 0 ", "px;\n }\n"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)());
29
- var dropdownMenuWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 1px;\n button {\n border-radius: 0 ", "px ", "px 0;\n }\n button:hover {\n border-radius: 0 ", "px ", "px 0;\n }\n"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)());
27
+ var splitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n button {\n border-radius: ", " ", "\n ", " ", ";\n }\n button:hover {\n border-radius: ", " ", "\n ", " ", ";\n }\n"])), "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)");
28
+ var dropdownMenuWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: ", ";\n button {\n border-radius: ", " ", "\n ", " ", ";\n }\n button:hover {\n border-radius: ", " ", "\n ", " ", ";\n }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)");
30
29
 
31
30
  // span
32
31
  var dropDownIntegrationButtonWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n button:hover {\n background: transparent;\n }\n"])));
@@ -40,9 +40,16 @@ var getNoOptionsMessageDescriptor = function getNoOptionsMessageDescriptor(email
40
40
  }
41
41
  return _i18n.messages.userPickerGenericNoOptionsMessage;
42
42
  };
43
- var getNoOptionsMessage = function getNoOptionsMessage(isPublicLink, allowEmail) {
43
+ var getNoOptionsMessage = function getNoOptionsMessage(isPublicLink, allowEmail, noOptionsMessageHandler) {
44
44
  return function (_ref) {
45
45
  var inputValue = _ref.inputValue;
46
+ if (noOptionsMessageHandler) {
47
+ return noOptionsMessageHandler({
48
+ inputValue: inputValue,
49
+ isPublicLink: isPublicLink,
50
+ allowEmail: allowEmail
51
+ });
52
+ }
46
53
  return inputValue && inputValue.trim().length > 0 ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, getNoOptionsMessageDescriptor((0, _smartUserPicker.isValidEmail)(inputValue), isPublicLink, allowEmail), {
47
54
  values: {
48
55
  inputValue: inputValue
@@ -173,8 +180,7 @@ var UserPickerFieldComponent = exports.UserPickerFieldComponent = /*#__PURE__*/f
173
180
  orgId = _this$props2.orgId,
174
181
  isBrowseUsersDisabled = _this$props2.isBrowseUsersDisabled,
175
182
  shareError = _this$props2.shareError,
176
- header = _this$props2.header,
177
- noOptionsMessage = _this$props2.noOptionsMessage;
183
+ userPickerOptions = _this$props2.userPickerOptions;
178
184
  var smartUserPickerProps = enableSmartUserPicker && !isBrowseUsersDisabled ? {
179
185
  productKey: product,
180
186
  principalId: loggedInAccountId,
@@ -186,16 +192,16 @@ var UserPickerFieldComponent = exports.UserPickerFieldComponent = /*#__PURE__*/f
186
192
  } : {};
187
193
  var allowEmail = (0, _utils.allowEmails)(config);
188
194
  var requiredMessage = getRequiredMessage(product, allowEmail, isBrowseUsersDisabled);
189
- var noOptionsMessageProp = noOptionsMessage ? typeof noOptionsMessage === 'function' ? noOptionsMessage : function () {
190
- return noOptionsMessage;
191
- } : null;
195
+ var _ref2 = userPickerOptions !== null && userPickerOptions !== void 0 ? userPickerOptions : {},
196
+ header = _ref2.header,
197
+ noOptionsMessageHandler = _ref2.noOptionsMessageHandler;
192
198
  var commonPickerProps = {
193
199
  fieldId: 'share',
194
200
  loadOptions: this.loadOptions,
195
201
  isMulti: true,
196
202
  width: '100%',
197
203
  allowEmail: allowEmail,
198
- noOptionsMessage: noOptionsMessageProp ? noOptionsMessageProp(isPublicLink, allowEmail) : getNoOptionsMessage(isPublicLink, allowEmail),
204
+ noOptionsMessage: getNoOptionsMessage(isPublicLink, allowEmail, noOptionsMessageHandler),
199
205
  isLoading: isLoading,
200
206
  onInputChange: onInputChange,
201
207
  maxPickerHeight: _styles.MAX_PICKER_HEIGHT,
@@ -213,10 +219,10 @@ var UserPickerFieldComponent = exports.UserPickerFieldComponent = /*#__PURE__*/f
213
219
  defaultValue: defaultValue,
214
220
  transform: this.handleUserPickerTransform,
215
221
  isRequired: true
216
- }, function (_ref2) {
217
- var fieldProps = _ref2.fieldProps,
218
- fieldValidationError = _ref2.error,
219
- fieldValid = _ref2.meta.valid;
222
+ }, function (_ref3) {
223
+ var fieldProps = _ref3.fieldProps,
224
+ fieldValidationError = _ref3.error,
225
+ fieldValid = _ref3.meta.valid;
220
226
  var helperMessage = _this2.getHelperMessageOrDefault();
221
227
  var addMoreMessage = shareError !== null && shareError !== void 0 && shareError.errorCode ? null : intl.formatMessage(_i18n.messages.userPickerAddMoreMessage);
222
228
  var wasValidationOrShareError = !!fieldValidationError || !!shareError;
@@ -13,7 +13,7 @@ var buildAttributes = function buildAttributes() {
13
13
  var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
14
14
  return _objectSpread({
15
15
  packageName: "@atlaskit/share",
16
- packageVersion: "4.13.0"
16
+ packageVersion: "4.14.1"
17
17
  }, attributes);
18
18
  };
19
19
  var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -20,7 +20,7 @@ export const messageContainerStyle = css`
20
20
  ${"var(--ds-space-negative-200, -16px)"};
21
21
  `;
22
22
  const messageTextStyle = css`
23
- text-indent: 6px;
23
+ text-indent: ${"var(--ds-space-075, 6px)"};
24
24
  `;
25
25
  const isSafari = navigator.userAgent.indexOf('Safari');
26
26
  export const HiddenInput = /*#__PURE__*/React.forwardRef(
@@ -8,7 +8,8 @@ const integrationButtonCopyWrapperStyle = css`
8
8
  justify-content: left;
9
9
  `;
10
10
  const integrationIconWrapperStyle = css`
11
- margin: 1px ${"var(--ds-space-100, 8px)"} 0 0;
11
+ margin: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-100, 8px)"}
12
+ ${"var(--ds-space-0, 0px)"} ${"var(--ds-space-0, 0px)"};
12
13
  `;
13
14
  const IntegrationButton = props => {
14
15
  const {
@@ -17,7 +17,7 @@ export const formWrapperStyle = css`
17
17
  }
18
18
 
19
19
  [class^='FormSection__FormSectionWrapper'] {
20
- margin-top: 0px;
20
+ margin-top: ${"var(--ds-space-0, 0px)"};
21
21
  }
22
22
 
23
23
  [class^='FormFooter__FormFooterWrapper'] {
@@ -55,8 +55,7 @@ function LazyShareForm(props) {
55
55
  showTitle,
56
56
  orgId,
57
57
  isBrowseUsersDisabled,
58
- userPickerCustomHeader,
59
- noOptionsMessage
58
+ userPickerOptions
60
59
  } = props;
61
60
  const footer = jsx("div", null, bottomMessage ? jsx("div", {
62
61
  css: {
@@ -114,8 +113,7 @@ function LazyShareForm(props) {
114
113
  handleCloseDialog: onDialogClose,
115
114
  onTabChange: onTabChange,
116
115
  isBrowseUsersDisabled: isBrowseUsersDisabled,
117
- userPickerCustomHeader: userPickerCustomHeader,
118
- noOptionsMessage: noOptionsMessage
116
+ userPickerOptions: userPickerOptions
119
117
  }) : jsx("p", null, jsx(FormattedMessage, messages.formNoPermissions))));
120
118
  }
121
119
  export default LazyShareForm;
@@ -304,8 +304,7 @@ export class ShareDialogContainerInternal extends React.Component {
304
304
  copyTooltipText,
305
305
  onDialogClose,
306
306
  isBrowseUsersDisabled,
307
- userPickerCustomHeader,
308
- noOptionsMessage
307
+ userPickerOptions
309
308
  } = this.props;
310
309
  const {
311
310
  config,
@@ -356,8 +355,7 @@ export class ShareDialogContainerInternal extends React.Component {
356
355
  copyTooltipText: copyTooltipText,
357
356
  onDialogClose: onDialogClose,
358
357
  isBrowseUsersDisabled: isBrowseUsersDisabled,
359
- userPickerCustomHeader: userPickerCustomHeader,
360
- noOptionsMessage: noOptionsMessage
358
+ userPickerOptions: userPickerOptions
361
359
  })));
362
360
  }
363
361
  }
@@ -460,8 +460,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
460
460
  integrationMode,
461
461
  shareIntegrations,
462
462
  isBrowseUsersDisabled,
463
- userPickerCustomHeader,
464
- noOptionsMessage
463
+ userPickerOptions
465
464
  } = this.props;
466
465
  const style = typeof tabIndex !== 'undefined' && tabIndex >= 0 ? {
467
466
  outline: 'none'
@@ -488,8 +487,6 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
488
487
  isSharing: isSharing,
489
488
  shareFormTitle: shareFormTitle,
490
489
  showTitle: integrationMode !== 'tabs' || !shareIntegrations || !shareIntegrations.length,
491
- noOptionsMessage: noOptionsMessage,
492
- userPickerCustomHeader: userPickerCustomHeader,
493
490
  shareFormHelperMessage: shareFormHelperMessage,
494
491
  shareError: shareError,
495
492
  defaultValue: defaultValue,
@@ -518,7 +515,8 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
518
515
  //ref
519
516
  ,
520
517
  selectPortalRef: this.selectPortalRef,
521
- isBrowseUsersDisabled: isBrowseUsersDisabled
518
+ isBrowseUsersDisabled: isBrowseUsersDisabled,
519
+ userPickerOptions: userPickerOptions
522
520
  })),
523
521
  isOpen: isDialogOpen,
524
522
  onClose: this.handleCloseDialog,
@@ -27,7 +27,7 @@ const submitButtonWrapperStyles = css`
27
27
  const centerAlignedIconWrapperStyles = css`
28
28
  display: flex;
29
29
  align-self: center;
30
- padding: 0 10px;
30
+ padding: ${"var(--ds-space-0, 0px)"} ${"var(--ds-space-150, 12px)"};
31
31
 
32
32
  > div {
33
33
  line-height: 1;
@@ -55,7 +55,7 @@ const integrationWrapperStyles = css`
55
55
  `;
56
56
  const integrationIconWrapperStyles = css`
57
57
  margin-bottom: ${"var(--ds-space-negative-075, -6px)"};
58
- margin-right: 5px;
58
+ margin-right: ${"var(--ds-space-050, 4px)"};
59
59
  `;
60
60
  const requiredFieldInfoStyles = css`
61
61
  margin-bottom: ${"var(--ds-space-200, 16px)"};
@@ -103,8 +103,7 @@ class InternalForm extends React.PureComponent {
103
103
  formatMessage
104
104
  },
105
105
  shareError,
106
- userPickerCustomHeader,
107
- noOptionsMessage
106
+ userPickerOptions
108
107
  } = this.props;
109
108
  return jsx(AnalyticsContext, {
110
109
  data: {
@@ -133,8 +132,7 @@ class InternalForm extends React.PureComponent {
133
132
  orgId: orgId,
134
133
  isBrowseUsersDisabled: isBrowseUsersDisabled,
135
134
  shareError: shareError,
136
- header: userPickerCustomHeader,
137
- noOptionsMessage: noOptionsMessage
135
+ userPickerOptions: userPickerOptions
138
136
  })), jsx("div", {
139
137
  css: formFieldStyles
140
138
  }, jsx(CommentField, {
@@ -10,7 +10,7 @@ const headerWrapperStyles = css`
10
10
  `;
11
11
  export const getFormHeaderTitleStyles = theme => css`
12
12
  ${h500(theme)}
13
- line-height: 32px;
13
+ line-height: ${"var(--ds-space-400, 32px)"};
14
14
  margin-right: ${"var(--ds-space-400, 32px)"};
15
15
  margin-top: ${"var(--ds-space-400, 32px)"};
16
16
  overflow: hidden;
@@ -7,26 +7,29 @@ import Button from '@atlaskit/button/standard-button';
7
7
  import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
8
8
  import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
9
9
  import { N800 } from '@atlaskit/theme/colors';
10
- import { borderRadius } from '@atlaskit/theme/constants';
11
10
  import { messages } from '../i18n';
12
11
  import { shareIntegrationButtonEvent } from './analytics/analytics';
13
12
  import IntegrationButton from './IntegrationButton';
14
13
  const splitButtonWrapperStyles = css`
15
14
  display: flex;
16
15
  button {
17
- border-radius: ${borderRadius()}px 0 0 ${borderRadius()}px;
16
+ border-radius: ${"var(--ds-border-radius, 3px)"} ${"var(--ds-space-0, 0px)"}
17
+ ${"var(--ds-space-0, 0px)"} ${"var(--ds-border-radius, 3px)"};
18
18
  }
19
19
  button:hover {
20
- border-radius: ${borderRadius()}px 0 0 ${borderRadius()}px;
20
+ border-radius: ${"var(--ds-border-radius, 3px)"} ${"var(--ds-space-0, 0px)"}
21
+ ${"var(--ds-space-0, 0px)"} ${"var(--ds-border-radius, 3px)"};
21
22
  }
22
23
  `;
23
24
  const dropdownMenuWrapperStyles = css`
24
- margin-left: 1px;
25
+ margin-left: ${"var(--ds-space-025, 2px)"};
25
26
  button {
26
- border-radius: 0 ${borderRadius()}px ${borderRadius()}px 0;
27
+ border-radius: ${"var(--ds-space-0, 0px)"} ${"var(--ds-border-radius, 3px)"}
28
+ ${"var(--ds-border-radius, 3px)"} ${"var(--ds-space-0, 0px)"};
27
29
  }
28
30
  button:hover {
29
- border-radius: 0 ${borderRadius()}px ${borderRadius()}px 0;
31
+ border-radius: ${"var(--ds-space-0, 0px)"} ${"var(--ds-border-radius, 3px)"}
32
+ ${"var(--ds-border-radius, 3px)"} ${"var(--ds-space-0, 0px)"};
30
33
  }
31
34
  `;
32
35
 
@@ -22,13 +22,22 @@ const getNoOptionsMessageDescriptor = (emailValidity, isPublicLink, allowEmail)
22
22
  }
23
23
  return messages.userPickerGenericNoOptionsMessage;
24
24
  };
25
- const getNoOptionsMessage = (isPublicLink, allowEmail) => ({
25
+ const getNoOptionsMessage = (isPublicLink, allowEmail, noOptionsMessageHandler) => ({
26
26
  inputValue
27
- }) => inputValue && inputValue.trim().length > 0 ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, getNoOptionsMessageDescriptor(isValidEmail(inputValue), isPublicLink, allowEmail), {
28
- values: {
29
- inputValue
27
+ }) => {
28
+ if (noOptionsMessageHandler) {
29
+ return noOptionsMessageHandler({
30
+ inputValue,
31
+ isPublicLink,
32
+ allowEmail
33
+ });
30
34
  }
31
- })) : null;
35
+ return inputValue && inputValue.trim().length > 0 ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, getNoOptionsMessageDescriptor(isValidEmail(inputValue), isPublicLink, allowEmail), {
36
+ values: {
37
+ inputValue
38
+ }
39
+ })) : null;
40
+ };
32
41
  const getPlaceHolderMessageDescriptor = (product = 'confluence', allowEmail, isBrowseUsersDisabled) => {
33
42
  if (!allowEmail) {
34
43
  const placeholderMessage = {
@@ -137,8 +146,7 @@ export class UserPickerFieldComponent extends React.Component {
137
146
  orgId,
138
147
  isBrowseUsersDisabled,
139
148
  shareError,
140
- header,
141
- noOptionsMessage
149
+ userPickerOptions
142
150
  } = this.props;
143
151
  const smartUserPickerProps = enableSmartUserPicker && !isBrowseUsersDisabled ? {
144
152
  productKey: product,
@@ -151,14 +159,17 @@ export class UserPickerFieldComponent extends React.Component {
151
159
  } : {};
152
160
  const allowEmail = allowEmails(config);
153
161
  const requiredMessage = getRequiredMessage(product, allowEmail, isBrowseUsersDisabled);
154
- const noOptionsMessageProp = noOptionsMessage ? typeof noOptionsMessage === 'function' ? noOptionsMessage : () => noOptionsMessage : null;
162
+ const {
163
+ header,
164
+ noOptionsMessageHandler
165
+ } = userPickerOptions !== null && userPickerOptions !== void 0 ? userPickerOptions : {};
155
166
  const commonPickerProps = {
156
167
  fieldId: 'share',
157
168
  loadOptions: this.loadOptions,
158
169
  isMulti: true,
159
170
  width: '100%',
160
171
  allowEmail,
161
- noOptionsMessage: noOptionsMessageProp ? noOptionsMessageProp(isPublicLink, allowEmail) : getNoOptionsMessage(isPublicLink, allowEmail),
172
+ noOptionsMessage: getNoOptionsMessage(isPublicLink, allowEmail, noOptionsMessageHandler),
162
173
  isLoading,
163
174
  onInputChange: onInputChange,
164
175
  maxPickerHeight: MAX_PICKER_HEIGHT,
@@ -1,7 +1,7 @@
1
1
  import { isEmail, isTeam, isUser } from '@atlaskit/smart-user-picker';
2
2
  const buildAttributes = (attributes = {}) => ({
3
3
  packageName: "@atlaskit/share",
4
- packageVersion: "4.13.0",
4
+ packageVersion: "4.14.1",
5
5
  ...attributes
6
6
  });
7
7
  const createEvent = (eventType, source, action, actionSubject, actionSubjectId, attributes = {}) => ({
@@ -0,0 +1 @@
1
+ export {};
@@ -24,7 +24,7 @@ var Z_INDEX = layers.modal();
24
24
  var AUTO_DISMISS_SECONDS = 8;
25
25
  export var AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
26
26
  export var messageContainerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n margin: ", "\n ", ";\n"])), "var(--ds-space-negative-100, -8px)", "var(--ds-space-negative-200, -16px)");
27
- var messageTextStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n text-indent: 6px;\n"])));
27
+ var messageTextStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n text-indent: ", ";\n"])), "var(--ds-space-075, 6px)");
28
28
  var isSafari = navigator.userAgent.indexOf('Safari');
29
29
  export var HiddenInput = /*#__PURE__*/React.forwardRef(
30
30
  // we need a hidden input to reliably copy to clipboard across all browsers.
@@ -8,7 +8,7 @@ import { css, jsx } from '@emotion/react';
8
8
  import Button from '@atlaskit/button/custom-theme-button';
9
9
  import { N500 } from '@atlaskit/theme/colors';
10
10
  var integrationButtonCopyWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: left;\n"])));
11
- var integrationIconWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin: 1px ", " 0 0;\n"])), "var(--ds-space-100, 8px)");
11
+ var integrationIconWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin: ", " ", "\n ", " ", ";\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-100, 8px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)");
12
12
  var IntegrationButton = function IntegrationButton(props) {
13
13
  var text = props.text,
14
14
  textColor = props.textColor,
@@ -4,7 +4,7 @@ var _templateObject;
4
4
  import React from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
6
  import { h500 } from '@atlaskit/theme/typography';
7
- export var formWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n [class^='FormHeader__FormHeaderWrapper'] {\n h1:first-child {\n ", "\n\n > span {\n /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n font-size: inherit !important;\n line-height: inherit !important;\n letter-spacing: inherit !important;\n }\n }\n }\n\n [class^='FormSection__FormSectionWrapper'] {\n margin-top: 0px;\n }\n\n [class^='FormFooter__FormFooterWrapper'] {\n justify-content: space-between;\n margin-top: ", ";\n margin-bottom: ", ";\n }\n\n [class^='Field__FieldWrapper']:not(:first-child) {\n margin-top: ", ";\n }\n"])), h500(), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
7
+ export var formWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n [class^='FormHeader__FormHeaderWrapper'] {\n h1:first-child {\n ", "\n\n > span {\n /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n font-size: inherit !important;\n line-height: inherit !important;\n letter-spacing: inherit !important;\n }\n }\n }\n\n [class^='FormSection__FormSectionWrapper'] {\n margin-top: ", ";\n }\n\n [class^='FormFooter__FormFooterWrapper'] {\n justify-content: space-between;\n margin-top: ", ";\n margin-bottom: ", ";\n }\n\n [class^='Field__FieldWrapper']:not(:first-child) {\n margin-top: ", ";\n }\n"])), h500(), "var(--ds-space-0, 0px)", "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
8
8
  export var IntegrationForm = function IntegrationForm(_ref) {
9
9
  var Content = _ref.Content,
10
10
  _ref$onIntegrationClo = _ref.onIntegrationClose,
@@ -51,8 +51,7 @@ function LazyShareForm(props) {
51
51
  showTitle = props.showTitle,
52
52
  orgId = props.orgId,
53
53
  isBrowseUsersDisabled = props.isBrowseUsersDisabled,
54
- userPickerCustomHeader = props.userPickerCustomHeader,
55
- noOptionsMessage = props.noOptionsMessage;
54
+ userPickerOptions = props.userPickerOptions;
56
55
  var footer = jsx("div", null, bottomMessage ? jsx("div", {
57
56
  css: {
58
57
  width: "".concat(gridSize() * 44, "px")
@@ -109,8 +108,7 @@ function LazyShareForm(props) {
109
108
  handleCloseDialog: onDialogClose,
110
109
  onTabChange: onTabChange,
111
110
  isBrowseUsersDisabled: isBrowseUsersDisabled,
112
- userPickerCustomHeader: userPickerCustomHeader,
113
- noOptionsMessage: noOptionsMessage
111
+ userPickerOptions: userPickerOptions
114
112
  }) : jsx("p", null, jsx(FormattedMessage, messages.formNoPermissions))));
115
113
  }
116
114
  export default LazyShareForm;
@@ -351,8 +351,7 @@ export var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Componen
351
351
  copyTooltipText = _this$props2.copyTooltipText,
352
352
  onDialogClose = _this$props2.onDialogClose,
353
353
  isBrowseUsersDisabled = _this$props2.isBrowseUsersDisabled,
354
- userPickerCustomHeader = _this$props2.userPickerCustomHeader,
355
- noOptionsMessage = _this$props2.noOptionsMessage;
354
+ userPickerOptions = _this$props2.userPickerOptions;
356
355
  var _this$state = this.state,
357
356
  config = _this$state.config,
358
357
  isFetchingConfig = _this$state.isFetchingConfig;
@@ -401,8 +400,7 @@ export var ShareDialogContainerInternal = /*#__PURE__*/function (_React$Componen
401
400
  copyTooltipText: copyTooltipText,
402
401
  onDialogClose: onDialogClose,
403
402
  isBrowseUsersDisabled: isBrowseUsersDisabled,
404
- userPickerCustomHeader: userPickerCustomHeader,
405
- noOptionsMessage: noOptionsMessage
403
+ userPickerOptions: userPickerOptions
406
404
  })));
407
405
  }
408
406
  }]);
@@ -511,8 +511,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
511
511
  integrationMode = _this$props7.integrationMode,
512
512
  shareIntegrations = _this$props7.shareIntegrations,
513
513
  isBrowseUsersDisabled = _this$props7.isBrowseUsersDisabled,
514
- userPickerCustomHeader = _this$props7.userPickerCustomHeader,
515
- noOptionsMessage = _this$props7.noOptionsMessage;
514
+ userPickerOptions = _this$props7.userPickerOptions;
516
515
  var style = typeof tabIndex !== 'undefined' && tabIndex >= 0 ? {
517
516
  outline: 'none'
518
517
  } : undefined;
@@ -539,8 +538,6 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
539
538
  isSharing: isSharing,
540
539
  shareFormTitle: shareFormTitle,
541
540
  showTitle: integrationMode !== 'tabs' || !shareIntegrations || !shareIntegrations.length,
542
- noOptionsMessage: noOptionsMessage,
543
- userPickerCustomHeader: userPickerCustomHeader,
544
541
  shareFormHelperMessage: shareFormHelperMessage,
545
542
  shareError: shareError,
546
543
  defaultValue: defaultValue,
@@ -569,7 +566,8 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
569
566
  //ref
570
567
  ,
571
568
  selectPortalRef: _this2.selectPortalRef,
572
- isBrowseUsersDisabled: isBrowseUsersDisabled
569
+ isBrowseUsersDisabled: isBrowseUsersDisabled,
570
+ userPickerOptions: userPickerOptions
573
571
  }));
574
572
  },
575
573
  isOpen: isDialogOpen,
@@ -33,12 +33,12 @@ import { IntegrationForm } from './IntegrationForm';
33
33
  import { ShareHeader } from './ShareHeader';
34
34
  import { UserPickerField } from './UserPickerField';
35
35
  var submitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n margin-left: auto;\n"])));
36
- var centerAlignedIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-self: center;\n padding: 0 10px;\n\n > div {\n line-height: 1;\n }\n"])));
36
+ var centerAlignedIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-self: center;\n padding: ", " ", ";\n\n > div {\n line-height: 1;\n }\n"])), "var(--ds-space-0, 0px)", "var(--ds-space-150, 12px)");
37
37
  export var formWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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)");
38
38
  export var formFooterStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-start;\n"])));
39
39
  var formFieldStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n"])), "var(--ds-space-150, 12px)");
40
40
  var integrationWrapperStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
41
- var integrationIconWrapperStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n margin-right: 5px;\n"])), "var(--ds-space-negative-075, -6px)");
41
+ var integrationIconWrapperStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n margin-right: ", ";\n"])), "var(--ds-space-negative-075, -6px)", "var(--ds-space-050, 4px)");
42
42
  var requiredFieldInfoStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n color: ", ";\n font-size: ", "px;\n"])), "var(--ds-space-200, 16px)", "var(--ds-text-subtle, ".concat(N300, ")"), fontSizeSmall());
43
43
  var integrationTabText = function integrationTabText(integrationName) {
44
44
  return jsx(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
@@ -89,8 +89,7 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
89
89
  isBrowseUsersDisabled = _this$props.isBrowseUsersDisabled,
90
90
  formatMessage = _this$props.intl.formatMessage,
91
91
  shareError = _this$props.shareError,
92
- userPickerCustomHeader = _this$props.userPickerCustomHeader,
93
- noOptionsMessage = _this$props.noOptionsMessage;
92
+ userPickerOptions = _this$props.userPickerOptions;
94
93
  return jsx(AnalyticsContext, {
95
94
  data: {
96
95
  source: ANALYTICS_SOURCE
@@ -118,8 +117,7 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
118
117
  orgId: orgId,
119
118
  isBrowseUsersDisabled: isBrowseUsersDisabled,
120
119
  shareError: shareError,
121
- header: userPickerCustomHeader,
122
- noOptionsMessage: noOptionsMessage
120
+ userPickerOptions: userPickerOptions
123
121
  })), jsx("div", {
124
122
  css: formFieldStyles
125
123
  }, jsx(CommentField, {
@@ -8,7 +8,7 @@ import { h500 } from '@atlaskit/theme/typography';
8
8
  import { messages } from '../i18n';
9
9
  var headerWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n"])));
10
10
  export var getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
11
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n line-height: 32px;\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"])), h500(theme), "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)");
11
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), h500(theme), "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)");
12
12
  };
13
13
  export var ShareHeader = function ShareHeader(_ref) {
14
14
  var title = _ref.title;
@@ -11,12 +11,11 @@ import Button from '@atlaskit/button/standard-button';
11
11
  import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
12
12
  import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
13
13
  import { N800 } from '@atlaskit/theme/colors';
14
- import { borderRadius } from '@atlaskit/theme/constants';
15
14
  import { messages } from '../i18n';
16
15
  import { shareIntegrationButtonEvent } from './analytics/analytics';
17
16
  import IntegrationButton from './IntegrationButton';
18
- var splitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n button {\n border-radius: ", "px 0 0 ", "px;\n }\n button:hover {\n border-radius: ", "px 0 0 ", "px;\n }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
19
- var dropdownMenuWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-left: 1px;\n button {\n border-radius: 0 ", "px ", "px 0;\n }\n button:hover {\n border-radius: 0 ", "px ", "px 0;\n }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
17
+ var splitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n button {\n border-radius: ", " ", "\n ", " ", ";\n }\n button:hover {\n border-radius: ", " ", "\n ", " ", ";\n }\n"])), "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)");
18
+ var dropdownMenuWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-left: ", ";\n button {\n border-radius: ", " ", "\n ", " ", ";\n }\n button:hover {\n border-radius: ", " ", "\n ", " ", ";\n }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)");
20
19
 
21
20
  // span
22
21
  var dropDownIntegrationButtonWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n button:hover {\n background: transparent;\n }\n"])));
@@ -30,9 +30,16 @@ var getNoOptionsMessageDescriptor = function getNoOptionsMessageDescriptor(email
30
30
  }
31
31
  return messages.userPickerGenericNoOptionsMessage;
32
32
  };
33
- var getNoOptionsMessage = function getNoOptionsMessage(isPublicLink, allowEmail) {
33
+ var getNoOptionsMessage = function getNoOptionsMessage(isPublicLink, allowEmail, noOptionsMessageHandler) {
34
34
  return function (_ref) {
35
35
  var inputValue = _ref.inputValue;
36
+ if (noOptionsMessageHandler) {
37
+ return noOptionsMessageHandler({
38
+ inputValue: inputValue,
39
+ isPublicLink: isPublicLink,
40
+ allowEmail: allowEmail
41
+ });
42
+ }
36
43
  return inputValue && inputValue.trim().length > 0 ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, getNoOptionsMessageDescriptor(isValidEmail(inputValue), isPublicLink, allowEmail), {
37
44
  values: {
38
45
  inputValue: inputValue
@@ -163,8 +170,7 @@ export var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
163
170
  orgId = _this$props2.orgId,
164
171
  isBrowseUsersDisabled = _this$props2.isBrowseUsersDisabled,
165
172
  shareError = _this$props2.shareError,
166
- header = _this$props2.header,
167
- noOptionsMessage = _this$props2.noOptionsMessage;
173
+ userPickerOptions = _this$props2.userPickerOptions;
168
174
  var smartUserPickerProps = enableSmartUserPicker && !isBrowseUsersDisabled ? {
169
175
  productKey: product,
170
176
  principalId: loggedInAccountId,
@@ -176,16 +182,16 @@ export var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
176
182
  } : {};
177
183
  var allowEmail = allowEmails(config);
178
184
  var requiredMessage = getRequiredMessage(product, allowEmail, isBrowseUsersDisabled);
179
- var noOptionsMessageProp = noOptionsMessage ? typeof noOptionsMessage === 'function' ? noOptionsMessage : function () {
180
- return noOptionsMessage;
181
- } : null;
185
+ var _ref2 = userPickerOptions !== null && userPickerOptions !== void 0 ? userPickerOptions : {},
186
+ header = _ref2.header,
187
+ noOptionsMessageHandler = _ref2.noOptionsMessageHandler;
182
188
  var commonPickerProps = {
183
189
  fieldId: 'share',
184
190
  loadOptions: this.loadOptions,
185
191
  isMulti: true,
186
192
  width: '100%',
187
193
  allowEmail: allowEmail,
188
- noOptionsMessage: noOptionsMessageProp ? noOptionsMessageProp(isPublicLink, allowEmail) : getNoOptionsMessage(isPublicLink, allowEmail),
194
+ noOptionsMessage: getNoOptionsMessage(isPublicLink, allowEmail, noOptionsMessageHandler),
189
195
  isLoading: isLoading,
190
196
  onInputChange: onInputChange,
191
197
  maxPickerHeight: MAX_PICKER_HEIGHT,
@@ -203,10 +209,10 @@ export var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
203
209
  defaultValue: defaultValue,
204
210
  transform: this.handleUserPickerTransform,
205
211
  isRequired: true
206
- }, function (_ref2) {
207
- var fieldProps = _ref2.fieldProps,
208
- fieldValidationError = _ref2.error,
209
- fieldValid = _ref2.meta.valid;
212
+ }, function (_ref3) {
213
+ var fieldProps = _ref3.fieldProps,
214
+ fieldValidationError = _ref3.error,
215
+ fieldValid = _ref3.meta.valid;
210
216
  var helperMessage = _this2.getHelperMessageOrDefault();
211
217
  var addMoreMessage = shareError !== null && shareError !== void 0 && shareError.errorCode ? null : intl.formatMessage(messages.userPickerAddMoreMessage);
212
218
  var wasValidationOrShareError = !!fieldValidationError || !!shareError;
@@ -6,7 +6,7 @@ var buildAttributes = function buildAttributes() {
6
6
  var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
7
7
  return _objectSpread({
8
8
  packageName: "@atlaskit/share",
9
- packageVersion: "4.13.0"
9
+ packageVersion: "4.14.1"
10
10
  }, attributes);
11
11
  };
12
12
  var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {
@@ -0,0 +1 @@
1
+ export {};
@@ -2,7 +2,7 @@ import { jsx } from '@emotion/react';
2
2
  import type { LoadOptions } from '@atlaskit/smart-user-picker';
3
3
  import type { ShareData, ShareDialogWithTriggerProps, ShareDialogWithTriggerStates } from '../../types';
4
4
  import { IntegrationFormProps } from '../IntegrationForm';
5
- export type LazyShareFormProps = Pick<ShareDialogWithTriggerProps, 'copyLink' | 'config' | 'isFetchingConfig' | 'loadUserOptions' | 'shareFormTitle' | 'shareFormHelperMessage' | 'bottomMessage' | 'submitButtonLabel' | 'product' | 'customFooter' | 'enableSmartUserPicker' | 'loggedInAccountId' | 'cloudId' | 'shareFieldsFooter' | 'onUserSelectionChange' | 'isPublicLink' | 'copyTooltipText' | 'shareIntegrations' | 'integrationMode' | 'onDialogClose' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerCustomHeader' | 'noOptionsMessage'> & Pick<ShareDialogWithTriggerStates, 'showIntegrationForm' | 'selectedIntegration' | 'isSharing' | 'shareError' | 'defaultValue'> & Pick<IntegrationFormProps, 'Content'> & {
5
+ export type LazyShareFormProps = Pick<ShareDialogWithTriggerProps, 'copyLink' | 'config' | 'isFetchingConfig' | 'loadUserOptions' | 'shareFormTitle' | 'shareFormHelperMessage' | 'bottomMessage' | 'submitButtonLabel' | 'product' | 'customFooter' | 'enableSmartUserPicker' | 'loggedInAccountId' | 'cloudId' | 'shareFieldsFooter' | 'onUserSelectionChange' | 'isPublicLink' | 'copyTooltipText' | 'shareIntegrations' | 'integrationMode' | 'onDialogClose' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerOptions'> & Pick<ShareDialogWithTriggerStates, 'showIntegrationForm' | 'selectedIntegration' | 'isSharing' | 'shareError' | 'defaultValue'> & Pick<IntegrationFormProps, 'Content'> & {
6
6
  onLinkCopy: () => void;
7
7
  onDismiss: (data: ShareData) => void;
8
8
  onSubmit: (data: ShareData) => void;
@@ -50,7 +50,7 @@ export declare class ShareDialogContainerInternal extends React.Component<WithAn
50
50
  getFormShareLink: () => string;
51
51
  render(): JSX.Element;
52
52
  }
53
- export declare const ShareDialogContainer: React.ForwardRefExoticComponent<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "onTriggerButtonClick" | "isAutoOpenDialog" | "shouldCloseOnEscapePress" | "dialogPlacement" | "loadUserOptions" | "onDialogOpen" | "onDialogClose" | "onUserSelectionChange" | "renderCustomTriggerButton" | "shareContentType" | "shareContentSubType" | "shareContentId" | "shareFormTitle" | "shareFormHelperMessage" | "showFlags" | "loggedInAccountId" | "triggerButtonAppearance" | "triggerButtonIcon" | "triggerButtonStyle" | "triggerButtonTooltipPosition" | "triggerButtonTooltipText" | "cloudId" | "bottomMessage" | "customFooter" | "isCopyDisabled" | "isPublicLink" | "integrationMode" | "shareFieldsFooter" | "shareIntegrations" | "shareAri" | "tabIndex" | "copyTooltipText" | "dialogZIndex" | "orgId" | "isBrowseUsersDisabled" | "userPickerCustomHeader" | "noOptionsMessage" | "shareClient" | "urlShortenerClient" | "shortLinkData" | "formatCopyLink" | "originTracingFactory" | "productId" | "shareLink" | "shareTitle" | "useUrlShortener" | "workspaceAri"> & Partial<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "enableSmartUserPicker" | "product" | "shareeAction">> & Partial<Pick<{
53
+ export declare const ShareDialogContainer: React.ForwardRefExoticComponent<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "onTriggerButtonClick" | "isAutoOpenDialog" | "shouldCloseOnEscapePress" | "dialogPlacement" | "loadUserOptions" | "onDialogOpen" | "onDialogClose" | "onUserSelectionChange" | "renderCustomTriggerButton" | "shareContentType" | "shareContentSubType" | "shareContentId" | "shareFormTitle" | "shareFormHelperMessage" | "showFlags" | "loggedInAccountId" | "triggerButtonAppearance" | "triggerButtonIcon" | "triggerButtonStyle" | "triggerButtonTooltipPosition" | "triggerButtonTooltipText" | "cloudId" | "bottomMessage" | "customFooter" | "isCopyDisabled" | "isPublicLink" | "integrationMode" | "shareFieldsFooter" | "shareIntegrations" | "shareAri" | "tabIndex" | "copyTooltipText" | "dialogZIndex" | "orgId" | "isBrowseUsersDisabled" | "userPickerOptions" | "shareClient" | "urlShortenerClient" | "shortLinkData" | "formatCopyLink" | "originTracingFactory" | "productId" | "shareLink" | "shareTitle" | "useUrlShortener" | "workspaceAri"> & Partial<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "enableSmartUserPicker" | "product" | "shareeAction">> & Partial<Pick<{
54
54
  enableSmartUserPicker: boolean;
55
55
  shareeAction: "view" | "edit";
56
56
  product: string;
@@ -1,13 +1,10 @@
1
1
  import React from 'react';
2
2
  import { WrappedComponentProps } from 'react-intl-next';
3
3
  import { LoadOptions, OptionData, Value } from '@atlaskit/smart-user-picker';
4
- import { ConfigResponse, ProductName, ShareError } from '../types';
4
+ import { ConfigResponse, ProductName, ShareError, UserPickerOptions } from '../types';
5
5
  export declare const REQUIRED = "REQUIRED";
6
6
  export type Props = {
7
7
  loadOptions?: LoadOptions;
8
- noOptionsMessage?: ((isPublicLink?: boolean, allowEmail?: boolean) => (value: {
9
- inputValue: string;
10
- }) => string | null | React.ReactNode) | null | React.ReactNode;
11
8
  defaultValue?: OptionData[];
12
9
  config?: ConfigResponse;
13
10
  isLoading?: boolean;
@@ -23,7 +20,7 @@ export type Props = {
23
20
  orgId?: string;
24
21
  isBrowseUsersDisabled?: boolean;
25
22
  shareError?: ShareError;
26
- header?: React.ReactNode;
23
+ userPickerOptions?: UserPickerOptions;
27
24
  };
28
25
  export declare class UserPickerFieldComponent extends React.Component<WrappedComponentProps & Props> {
29
26
  private loadOptions;
@@ -10,6 +10,7 @@ import type { ProductId, ProductName } from './Products';
10
10
  import type { ShareButtonStyle, TooltipPosition } from './ShareButton';
11
11
  import type { DialogPlacement, RenderCustomTriggerButton } from './ShareDialogWithTrigger';
12
12
  import type { Integration, IntegrationMode } from './ShareEntities';
13
+ import type { UserPickerOptions } from './UserPickerOptions';
13
14
  export type ShareDialogContainerProps = {
14
15
  onTriggerButtonClick?: () => void;
15
16
  onDialogOpen?: () => void;
@@ -137,14 +138,7 @@ export type ShareDialogContainerProps = {
137
138
  * Footer for the share dialog.
138
139
  */
139
140
  customFooter?: React.ReactNode;
140
- userPickerCustomHeader?: React.ReactNode;
141
- /** Message to be shown when the menu is open but no options are provided.
142
- * If message is null, no message will be displayed.
143
- * If message is undefined, default message will be displayed.
144
- */
145
- noOptionsMessage?: ((isPublicLink?: boolean, allowEmail?: boolean) => (value: {
146
- inputValue: string;
147
- }) => string | null | React.ReactNode) | null | React.ReactNode;
141
+ userPickerOptions?: UserPickerOptions;
148
142
  onUserSelectionChange?: (value: Value) => void;
149
143
  shareFieldsFooter?: React.ReactNode;
150
144
  isCopyDisabled?: boolean;
@@ -19,7 +19,7 @@ export type DialogPlacement = Placement;
19
19
  * with the demo page and clearly visible options on that page.
20
20
  */
21
21
  export type DialogBoundariesElement = 'viewport' | 'window' | 'scrollParent';
22
- export type ShareDialogWithTriggerProps = Pick<ShareDialogContainerProps, 'onTriggerButtonClick' | 'isAutoOpenDialog' | 'shouldCloseOnEscapePress' | 'dialogPlacement' | 'loadUserOptions' | 'onDialogOpen' | 'onDialogClose' | 'onUserSelectionChange' | 'renderCustomTriggerButton' | 'shareContentType' | 'shareContentSubType' | 'shareContentId' | 'shareFormTitle' | 'shareFormHelperMessage' | 'showFlags' | 'enableSmartUserPicker' | 'loggedInAccountId' | 'triggerButtonAppearance' | 'triggerButtonIcon' | 'triggerButtonStyle' | 'triggerButtonTooltipPosition' | 'triggerButtonTooltipText' | 'cloudId' | 'bottomMessage' | 'product' | 'customFooter' | 'isCopyDisabled' | 'isPublicLink' | 'integrationMode' | 'shareFieldsFooter' | 'shareIntegrations' | 'shareAri' | 'tabIndex' | 'copyTooltipText' | 'dialogZIndex' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerCustomHeader' | 'noOptionsMessage'> & {
22
+ export type ShareDialogWithTriggerProps = Pick<ShareDialogContainerProps, 'onTriggerButtonClick' | 'isAutoOpenDialog' | 'shouldCloseOnEscapePress' | 'dialogPlacement' | 'loadUserOptions' | 'onDialogOpen' | 'onDialogClose' | 'onUserSelectionChange' | 'renderCustomTriggerButton' | 'shareContentType' | 'shareContentSubType' | 'shareContentId' | 'shareFormTitle' | 'shareFormHelperMessage' | 'showFlags' | 'enableSmartUserPicker' | 'loggedInAccountId' | 'triggerButtonAppearance' | 'triggerButtonIcon' | 'triggerButtonStyle' | 'triggerButtonTooltipPosition' | 'triggerButtonTooltipText' | 'cloudId' | 'bottomMessage' | 'product' | 'customFooter' | 'isCopyDisabled' | 'isPublicLink' | 'integrationMode' | 'shareFieldsFooter' | 'shareIntegrations' | 'shareAri' | 'tabIndex' | 'copyTooltipText' | 'dialogZIndex' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerOptions'> & {
23
23
  config?: ConfigResponse;
24
24
  isFetchingConfig?: boolean;
25
25
  children?: RenderCustomTriggerButton;
@@ -4,7 +4,7 @@ import type { ConfigResponse } from '../clients/ShareServiceClient';
4
4
  import type { ProductName } from './Products';
5
5
  import type { ShareData, ShareError } from './ShareContentState';
6
6
  import type { ShareDialogContainerProps } from './ShareDialogContainer';
7
- export type ShareFormProps = Pick<ShareDialogContainerProps, 'integrationMode' | 'shareIntegrations' | 'copyTooltipText' | 'isPublicLink' | 'onUserSelectionChange' | 'cloudId' | 'loggedInAccountId' | 'enableSmartUserPicker' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerCustomHeader' | 'noOptionsMessage'> & {
7
+ export type ShareFormProps = Pick<ShareDialogContainerProps, 'integrationMode' | 'shareIntegrations' | 'copyTooltipText' | 'isPublicLink' | 'onUserSelectionChange' | 'cloudId' | 'loggedInAccountId' | 'enableSmartUserPicker' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerOptions'> & {
8
8
  config?: ConfigResponse;
9
9
  isFetchingConfig?: boolean;
10
10
  copyLink: string;
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ export type UserPickerOptions = {
3
+ header?: React.ReactNode;
4
+ /** Message to be shown when the menu is open but no options are provided.
5
+ * If message is null, no message will be displayed.
6
+ * If message is undefined, default message will be displayed.
7
+ */
8
+ noOptionsMessageHandler?: ((value: {
9
+ inputValue: string;
10
+ isPublicLink?: boolean;
11
+ allowEmail?: boolean;
12
+ }) => string | null | React.ReactNode) | null;
13
+ };
@@ -15,3 +15,4 @@ export type KeysOfType<T, TProp> = {
15
15
  }[keyof T];
16
16
  export type { ShareDialogContainerProps } from './ShareDialogContainer';
17
17
  export type { ShareFormProps } from './ShareForm';
18
+ export type { UserPickerOptions } from './UserPickerOptions';
@@ -2,7 +2,7 @@ import { jsx } from '@emotion/react';
2
2
  import type { LoadOptions } from '@atlaskit/smart-user-picker';
3
3
  import type { ShareData, ShareDialogWithTriggerProps, ShareDialogWithTriggerStates } from '../../types';
4
4
  import { IntegrationFormProps } from '../IntegrationForm';
5
- export type LazyShareFormProps = Pick<ShareDialogWithTriggerProps, 'copyLink' | 'config' | 'isFetchingConfig' | 'loadUserOptions' | 'shareFormTitle' | 'shareFormHelperMessage' | 'bottomMessage' | 'submitButtonLabel' | 'product' | 'customFooter' | 'enableSmartUserPicker' | 'loggedInAccountId' | 'cloudId' | 'shareFieldsFooter' | 'onUserSelectionChange' | 'isPublicLink' | 'copyTooltipText' | 'shareIntegrations' | 'integrationMode' | 'onDialogClose' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerCustomHeader' | 'noOptionsMessage'> & Pick<ShareDialogWithTriggerStates, 'showIntegrationForm' | 'selectedIntegration' | 'isSharing' | 'shareError' | 'defaultValue'> & Pick<IntegrationFormProps, 'Content'> & {
5
+ export type LazyShareFormProps = Pick<ShareDialogWithTriggerProps, 'copyLink' | 'config' | 'isFetchingConfig' | 'loadUserOptions' | 'shareFormTitle' | 'shareFormHelperMessage' | 'bottomMessage' | 'submitButtonLabel' | 'product' | 'customFooter' | 'enableSmartUserPicker' | 'loggedInAccountId' | 'cloudId' | 'shareFieldsFooter' | 'onUserSelectionChange' | 'isPublicLink' | 'copyTooltipText' | 'shareIntegrations' | 'integrationMode' | 'onDialogClose' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerOptions'> & Pick<ShareDialogWithTriggerStates, 'showIntegrationForm' | 'selectedIntegration' | 'isSharing' | 'shareError' | 'defaultValue'> & Pick<IntegrationFormProps, 'Content'> & {
6
6
  onLinkCopy: () => void;
7
7
  onDismiss: (data: ShareData) => void;
8
8
  onSubmit: (data: ShareData) => void;
@@ -50,7 +50,7 @@ export declare class ShareDialogContainerInternal extends React.Component<WithAn
50
50
  getFormShareLink: () => string;
51
51
  render(): JSX.Element;
52
52
  }
53
- export declare const ShareDialogContainer: React.ForwardRefExoticComponent<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "onTriggerButtonClick" | "isAutoOpenDialog" | "shouldCloseOnEscapePress" | "dialogPlacement" | "loadUserOptions" | "onDialogOpen" | "onDialogClose" | "onUserSelectionChange" | "renderCustomTriggerButton" | "shareContentType" | "shareContentSubType" | "shareContentId" | "shareFormTitle" | "shareFormHelperMessage" | "showFlags" | "loggedInAccountId" | "triggerButtonAppearance" | "triggerButtonIcon" | "triggerButtonStyle" | "triggerButtonTooltipPosition" | "triggerButtonTooltipText" | "cloudId" | "bottomMessage" | "customFooter" | "isCopyDisabled" | "isPublicLink" | "integrationMode" | "shareFieldsFooter" | "shareIntegrations" | "shareAri" | "tabIndex" | "copyTooltipText" | "dialogZIndex" | "orgId" | "isBrowseUsersDisabled" | "userPickerCustomHeader" | "noOptionsMessage" | "shareClient" | "urlShortenerClient" | "shortLinkData" | "formatCopyLink" | "originTracingFactory" | "productId" | "shareLink" | "shareTitle" | "useUrlShortener" | "workspaceAri"> & Partial<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "enableSmartUserPicker" | "product" | "shareeAction">> & Partial<Pick<{
53
+ export declare const ShareDialogContainer: React.ForwardRefExoticComponent<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "onTriggerButtonClick" | "isAutoOpenDialog" | "shouldCloseOnEscapePress" | "dialogPlacement" | "loadUserOptions" | "onDialogOpen" | "onDialogClose" | "onUserSelectionChange" | "renderCustomTriggerButton" | "shareContentType" | "shareContentSubType" | "shareContentId" | "shareFormTitle" | "shareFormHelperMessage" | "showFlags" | "loggedInAccountId" | "triggerButtonAppearance" | "triggerButtonIcon" | "triggerButtonStyle" | "triggerButtonTooltipPosition" | "triggerButtonTooltipText" | "cloudId" | "bottomMessage" | "customFooter" | "isCopyDisabled" | "isPublicLink" | "integrationMode" | "shareFieldsFooter" | "shareIntegrations" | "shareAri" | "tabIndex" | "copyTooltipText" | "dialogZIndex" | "orgId" | "isBrowseUsersDisabled" | "userPickerOptions" | "shareClient" | "urlShortenerClient" | "shortLinkData" | "formatCopyLink" | "originTracingFactory" | "productId" | "shareLink" | "shareTitle" | "useUrlShortener" | "workspaceAri"> & Partial<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "enableSmartUserPicker" | "product" | "shareeAction">> & Partial<Pick<{
54
54
  enableSmartUserPicker: boolean;
55
55
  shareeAction: "view" | "edit";
56
56
  product: string;
@@ -1,13 +1,10 @@
1
1
  import React from 'react';
2
2
  import { WrappedComponentProps } from 'react-intl-next';
3
3
  import { LoadOptions, OptionData, Value } from '@atlaskit/smart-user-picker';
4
- import { ConfigResponse, ProductName, ShareError } from '../types';
4
+ import { ConfigResponse, ProductName, ShareError, UserPickerOptions } from '../types';
5
5
  export declare const REQUIRED = "REQUIRED";
6
6
  export type Props = {
7
7
  loadOptions?: LoadOptions;
8
- noOptionsMessage?: ((isPublicLink?: boolean, allowEmail?: boolean) => (value: {
9
- inputValue: string;
10
- }) => string | null | React.ReactNode) | null | React.ReactNode;
11
8
  defaultValue?: OptionData[];
12
9
  config?: ConfigResponse;
13
10
  isLoading?: boolean;
@@ -23,7 +20,7 @@ export type Props = {
23
20
  orgId?: string;
24
21
  isBrowseUsersDisabled?: boolean;
25
22
  shareError?: ShareError;
26
- header?: React.ReactNode;
23
+ userPickerOptions?: UserPickerOptions;
27
24
  };
28
25
  export declare class UserPickerFieldComponent extends React.Component<WrappedComponentProps & Props> {
29
26
  private loadOptions;
@@ -10,6 +10,7 @@ import type { ProductId, ProductName } from './Products';
10
10
  import type { ShareButtonStyle, TooltipPosition } from './ShareButton';
11
11
  import type { DialogPlacement, RenderCustomTriggerButton } from './ShareDialogWithTrigger';
12
12
  import type { Integration, IntegrationMode } from './ShareEntities';
13
+ import type { UserPickerOptions } from './UserPickerOptions';
13
14
  export type ShareDialogContainerProps = {
14
15
  onTriggerButtonClick?: () => void;
15
16
  onDialogOpen?: () => void;
@@ -137,14 +138,7 @@ export type ShareDialogContainerProps = {
137
138
  * Footer for the share dialog.
138
139
  */
139
140
  customFooter?: React.ReactNode;
140
- userPickerCustomHeader?: React.ReactNode;
141
- /** Message to be shown when the menu is open but no options are provided.
142
- * If message is null, no message will be displayed.
143
- * If message is undefined, default message will be displayed.
144
- */
145
- noOptionsMessage?: ((isPublicLink?: boolean, allowEmail?: boolean) => (value: {
146
- inputValue: string;
147
- }) => string | null | React.ReactNode) | null | React.ReactNode;
141
+ userPickerOptions?: UserPickerOptions;
148
142
  onUserSelectionChange?: (value: Value) => void;
149
143
  shareFieldsFooter?: React.ReactNode;
150
144
  isCopyDisabled?: boolean;
@@ -19,7 +19,7 @@ export type DialogPlacement = Placement;
19
19
  * with the demo page and clearly visible options on that page.
20
20
  */
21
21
  export type DialogBoundariesElement = 'viewport' | 'window' | 'scrollParent';
22
- export type ShareDialogWithTriggerProps = Pick<ShareDialogContainerProps, 'onTriggerButtonClick' | 'isAutoOpenDialog' | 'shouldCloseOnEscapePress' | 'dialogPlacement' | 'loadUserOptions' | 'onDialogOpen' | 'onDialogClose' | 'onUserSelectionChange' | 'renderCustomTriggerButton' | 'shareContentType' | 'shareContentSubType' | 'shareContentId' | 'shareFormTitle' | 'shareFormHelperMessage' | 'showFlags' | 'enableSmartUserPicker' | 'loggedInAccountId' | 'triggerButtonAppearance' | 'triggerButtonIcon' | 'triggerButtonStyle' | 'triggerButtonTooltipPosition' | 'triggerButtonTooltipText' | 'cloudId' | 'bottomMessage' | 'product' | 'customFooter' | 'isCopyDisabled' | 'isPublicLink' | 'integrationMode' | 'shareFieldsFooter' | 'shareIntegrations' | 'shareAri' | 'tabIndex' | 'copyTooltipText' | 'dialogZIndex' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerCustomHeader' | 'noOptionsMessage'> & {
22
+ export type ShareDialogWithTriggerProps = Pick<ShareDialogContainerProps, 'onTriggerButtonClick' | 'isAutoOpenDialog' | 'shouldCloseOnEscapePress' | 'dialogPlacement' | 'loadUserOptions' | 'onDialogOpen' | 'onDialogClose' | 'onUserSelectionChange' | 'renderCustomTriggerButton' | 'shareContentType' | 'shareContentSubType' | 'shareContentId' | 'shareFormTitle' | 'shareFormHelperMessage' | 'showFlags' | 'enableSmartUserPicker' | 'loggedInAccountId' | 'triggerButtonAppearance' | 'triggerButtonIcon' | 'triggerButtonStyle' | 'triggerButtonTooltipPosition' | 'triggerButtonTooltipText' | 'cloudId' | 'bottomMessage' | 'product' | 'customFooter' | 'isCopyDisabled' | 'isPublicLink' | 'integrationMode' | 'shareFieldsFooter' | 'shareIntegrations' | 'shareAri' | 'tabIndex' | 'copyTooltipText' | 'dialogZIndex' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerOptions'> & {
23
23
  config?: ConfigResponse;
24
24
  isFetchingConfig?: boolean;
25
25
  children?: RenderCustomTriggerButton;
@@ -4,7 +4,7 @@ import type { ConfigResponse } from '../clients/ShareServiceClient';
4
4
  import type { ProductName } from './Products';
5
5
  import type { ShareData, ShareError } from './ShareContentState';
6
6
  import type { ShareDialogContainerProps } from './ShareDialogContainer';
7
- export type ShareFormProps = Pick<ShareDialogContainerProps, 'integrationMode' | 'shareIntegrations' | 'copyTooltipText' | 'isPublicLink' | 'onUserSelectionChange' | 'cloudId' | 'loggedInAccountId' | 'enableSmartUserPicker' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerCustomHeader' | 'noOptionsMessage'> & {
7
+ export type ShareFormProps = Pick<ShareDialogContainerProps, 'integrationMode' | 'shareIntegrations' | 'copyTooltipText' | 'isPublicLink' | 'onUserSelectionChange' | 'cloudId' | 'loggedInAccountId' | 'enableSmartUserPicker' | 'orgId' | 'isBrowseUsersDisabled' | 'userPickerOptions'> & {
8
8
  config?: ConfigResponse;
9
9
  isFetchingConfig?: boolean;
10
10
  copyLink: string;
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ export type UserPickerOptions = {
3
+ header?: React.ReactNode;
4
+ /** Message to be shown when the menu is open but no options are provided.
5
+ * If message is null, no message will be displayed.
6
+ * If message is undefined, default message will be displayed.
7
+ */
8
+ noOptionsMessageHandler?: ((value: {
9
+ inputValue: string;
10
+ isPublicLink?: boolean;
11
+ allowEmail?: boolean;
12
+ }) => string | null | React.ReactNode) | null;
13
+ };
@@ -15,3 +15,4 @@ export type KeysOfType<T, TProp> = {
15
15
  }[keyof T];
16
16
  export type { ShareDialogContainerProps } from './ShareDialogContainer';
17
17
  export type { ShareFormProps } from './ShareForm';
18
+ export type { UserPickerOptions } from './UserPickerOptions';
package/docs/0-intro.tsx CHANGED
@@ -8,14 +8,15 @@ import {
8
8
  md,
9
9
  Props,
10
10
  } from '@atlaskit/docs';
11
+ import { token } from '@atlaskit/tokens';
11
12
 
12
13
  export default md`
13
14
  ${(
14
15
  <>
15
- <div style={{ marginBottom: '0.5rem' }}>
16
+ <div style={{ marginBottom: `${token('space.100', '8px')}` }}>
16
17
  <AtlassianInternalWarning />
17
18
  </div>
18
- <div style={{ marginTop: '0.5rem' }}>
19
+ <div style={{ marginTop: `${token('space.100', '8px')}` }}>
19
20
  <DevPreviewWarning />
20
21
  </div>
21
22
  </>
@@ -23,15 +24,15 @@ export default md`
23
24
 
24
25
  This package provides the view components allowing users to share a resource by
25
26
  sharing with User Picker, or by copying the share link.
26
-
27
+
27
28
  The goal is to provide a consistent share experience across products.
28
-
29
- ## Usage
30
-
29
+
30
+ ## Usage
31
+
31
32
  Import the component in your React app as follows:
32
-
33
+
33
34
  ${code`import ShareDialogContainer from '@atlaskit/share;`}
34
-
35
+
35
36
  ${(
36
37
  <Example
37
38
  packageName="@atlaskit/share"
@@ -40,16 +41,16 @@ export default md`
40
41
  source={require('!!raw-loader!../examples/00-integration-with-configs')}
41
42
  />
42
43
  )}
43
-
44
+
44
45
  ${(
45
46
  <Props
46
47
  heading="Share Props"
47
48
  props={require('!!extract-react-types-loader!../src/components/ShareDialogContainer')}
48
49
  />
49
50
  )}
50
-
51
+
51
52
  ## Notes
52
-
53
+
53
54
  The share modal will be instantiated immediately but starts hidden.
54
55
  It will **retain the form state** until the user either:
55
56
  - triggers a share = share completed
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/share",
3
- "version": "4.13.0",
3
+ "version": "4.14.1",
4
4
  "description": "Fabric Share Element",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -42,14 +42,14 @@
42
42
  },
43
43
  "dependencies": {
44
44
  "@atlaskit/analytics-next": "^9.2.0",
45
- "@atlaskit/button": "^17.3.0",
45
+ "@atlaskit/button": "^17.4.0",
46
46
  "@atlaskit/dropdown-menu": "^12.5.0",
47
47
  "@atlaskit/form": "^9.0.3",
48
48
  "@atlaskit/icon": "^22.0.0",
49
49
  "@atlaskit/popper": "^5.5.4",
50
50
  "@atlaskit/popup": "^1.12.0",
51
51
  "@atlaskit/portal": "^4.4.0",
52
- "@atlaskit/smart-user-picker": "^6.7.0",
52
+ "@atlaskit/smart-user-picker": "^6.8.0",
53
53
  "@atlaskit/spinner": "^16.0.0",
54
54
  "@atlaskit/tabs": "^14.0.0",
55
55
  "@atlaskit/textarea": "^5.0.0",
@@ -57,7 +57,7 @@
57
57
  "@atlaskit/tokens": "^1.37.0",
58
58
  "@atlaskit/tooltip": "^18.1.0",
59
59
  "@atlaskit/ufo": "^0.2.0",
60
- "@atlaskit/user-picker": "^10.16.0",
60
+ "@atlaskit/user-picker": "^10.17.0",
61
61
  "@atlaskit/util-service-support": "^6.2.0",
62
62
  "@babel/runtime": "^7.0.0",
63
63
  "@emotion/react": "^11.7.1",