@atlaskit/user-picker 8.7.4 → 8.8.2

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 (17) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/components/ExternalUserOption/SourcesTooltipContent.js +102 -0
  3. package/dist/cjs/components/ExternalUserOption/main.js +7 -81
  4. package/dist/cjs/components/ExternalUserSourcesContainer.js +3 -6
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/components/ExternalUserOption/SourcesTooltipContent.js +71 -0
  7. package/dist/es2019/components/ExternalUserOption/main.js +2 -66
  8. package/dist/es2019/components/ExternalUserSourcesContainer.js +3 -6
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/components/ExternalUserOption/SourcesTooltipContent.js +72 -0
  11. package/dist/esm/components/ExternalUserOption/main.js +5 -66
  12. package/dist/esm/components/ExternalUserSourcesContainer.js +3 -6
  13. package/dist/esm/version.json +1 -1
  14. package/dist/types/components/ExternalUserOption/SourcesTooltipContent.d.ts +5 -0
  15. package/dist/types/components/ExternalUserOption/main.d.ts +0 -2
  16. package/dist/types/components/ExternalUserSourcesContainer.d.ts +3 -3
  17. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/user-picker
2
2
 
3
+ ## 8.8.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`cc773aa7ecc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc773aa7ecc) - [ux] show error message in tooltip when there is no user source
8
+
9
+ ## 8.8.1
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 8.8.0
16
+
17
+ ### Minor Changes
18
+
19
+ - [`091da1d5f88`](https://bitbucket.org/atlassian/atlassian-frontend/commits/091da1d5f88) - [ux] Ensure items in the User Sources tooltip are unique and ordered correctly
20
+
3
21
  ## 8.7.4
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/components/ExternalUserOption/SourcesTooltipContent.js ADDED
@@ -0,0 +1,102 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.SourcesTooltipContent = exports.SourcesTooltipContainer = exports.SourceWrapper = void 0;
9
+
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+
12
+ var _react = _interopRequireDefault(require("react"));
13
+
14
+ var _reactIntlNext = require("react-intl-next");
15
+
16
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
17
+
18
+ var _logo = require("@atlaskit/logo");
19
+
20
+ var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
21
+
22
+ var _slack = require("../assets/slack");
23
+
24
+ var _google = require("../assets/google");
25
+
26
+ var _microsoft = require("../assets/microsoft");
27
+
28
+ var _github = require("../assets/github");
29
+
30
+ var _i18n = require("../i18n");
31
+
32
+ var _main = require("./main");
33
+
34
+ var _templateObject, _templateObject2;
35
+
36
+ var SourcesTooltipContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n padding-bottom: 4px;\n padding-right: 4px;\n"])));
37
+
38
+ exports.SourcesTooltipContainer = SourcesTooltipContainer;
39
+
40
+ var SourceWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding-top: 4px;\n display: flex;\n align-items: center;\n"])));
41
+
42
+ exports.SourceWrapper = SourceWrapper;
43
+ var SUPPORTED_SOURCES = [{
44
+ sourceType: 'jira',
45
+ icon: /*#__PURE__*/_react.default.createElement(_logo.JiraIcon, {
46
+ size: 'xsmall'
47
+ }),
48
+ label: _i18n.messages.jiraSource
49
+ }, {
50
+ sourceType: 'confluence',
51
+ icon: /*#__PURE__*/_react.default.createElement(_logo.ConfluenceIcon, {
52
+ size: 'xsmall'
53
+ }),
54
+ label: _i18n.messages.confluenceSource
55
+ }, {
56
+ sourceType: 'other-atlassian',
57
+ icon: /*#__PURE__*/_react.default.createElement(_logo.AtlassianIcon, {
58
+ size: 'xsmall'
59
+ }),
60
+ label: _i18n.messages.otherAtlassianSource
61
+ }, {
62
+ sourceType: 'slack',
63
+ icon: /*#__PURE__*/_react.default.createElement(_slack.SlackIcon, null),
64
+ label: _i18n.messages.slackProvider
65
+ }, {
66
+ sourceType: 'google',
67
+ icon: /*#__PURE__*/_react.default.createElement(_google.GoogleIcon, null),
68
+ label: _i18n.messages.googleProvider
69
+ }, {
70
+ sourceType: 'microsoft',
71
+ icon: /*#__PURE__*/_react.default.createElement(_microsoft.MicrosoftIcon, null),
72
+ label: _i18n.messages.microsoftProvider
73
+ }, {
74
+ sourceType: 'github',
75
+ icon: /*#__PURE__*/_react.default.createElement(_github.GitHubIcon, null),
76
+ label: _i18n.messages.gitHubProvider
77
+ }];
78
+
79
+ var SourcesTooltipContent = function SourcesTooltipContent(_ref) {
80
+ var sources = _ref.sources,
81
+ sourcesLoading = _ref.sourcesLoading;
82
+
83
+ var sourcesToRender = _react.default.useMemo(function () {
84
+ return SUPPORTED_SOURCES.filter(function (supportedSource) {
85
+ return sources.includes(supportedSource.sourceType);
86
+ });
87
+ }, [sources]);
88
+
89
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !sourcesLoading && sources.length === 0 ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesError)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesHeading)), /*#__PURE__*/_react.default.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/_react.default.createElement(_spinner.default, {
90
+ size: "small",
91
+ appearance: "invert"
92
+ }), !sourcesLoading && sourcesToRender.map(function (_ref2) {
93
+ var sourceType = _ref2.sourceType,
94
+ icon = _ref2.icon,
95
+ label = _ref2.label;
96
+ return /*#__PURE__*/_react.default.createElement(SourceWrapper, {
97
+ key: sourceType
98
+ }, /*#__PURE__*/_react.default.createElement(_main.ImageContainer, null, icon), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, label)));
99
+ }))));
100
+ };
101
+
102
+ exports.SourcesTooltipContent = SourcesTooltipContent;
package/dist/cjs/components/ExternalUserOption/main.js CHANGED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.SourcesTooltipContainer = exports.SourceWrapper = exports.ImageContainer = exports.ExternalUserOption = exports.EmailDomainWrapper = void 0;
8
+ exports.ImageContainer = exports.ExternalUserOption = exports.EmailDomainWrapper = void 0;
9
9
 
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
11
 
@@ -27,14 +27,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
27
27
 
28
28
  var _react = _interopRequireDefault(require("react"));
29
29
 
30
- var _reactIntlNext = require("react-intl-next");
31
-
32
30
  var _styledComponents = _interopRequireDefault(require("styled-components"));
33
31
 
34
- var _logo = require("@atlaskit/logo");
35
-
36
- var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
37
-
38
32
  var _colors = require("@atlaskit/theme/colors");
39
33
 
40
34
  var _tokens = require("@atlaskit/tokens");
@@ -45,23 +39,15 @@ var _AvatarItemOption = require("../AvatarItemOption");
45
39
 
46
40
  var _SizeableAvatar = require("../SizeableAvatar");
47
41
 
48
- var _slack = require("../assets/slack");
49
-
50
- var _google = require("../assets/google");
51
-
52
- var _microsoft = require("../assets/microsoft");
53
-
54
- var _github = require("../assets/github");
55
-
56
- var _i18n = require("../i18n");
57
-
58
42
  var _ExternalUserSourcesContainer = require("../ExternalUserSourcesContainer");
59
43
 
60
44
  var _InfoIcon = _interopRequireDefault(require("./InfoIcon"));
61
45
 
62
46
  var _ExternalAvatarItemOption = require("./ExternalAvatarItemOption");
63
47
 
64
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
48
+ var _SourcesTooltipContent = require("./SourcesTooltipContent");
49
+
50
+ var _templateObject, _templateObject2;
65
51
 
66
52
  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); }; }
67
53
 
@@ -71,52 +57,9 @@ var ImageContainer = _styledComponents.default.span(_templateObject || (_templat
71
57
 
72
58
  exports.ImageContainer = ImageContainer;
73
59
 
74
- var SourcesTooltipContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding-bottom: 4px;\n padding-right: 4px;\n"])));
75
-
76
- exports.SourcesTooltipContainer = SourcesTooltipContainer;
77
-
78
- var SourceWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n padding-top: 4px;\n display: flex;\n align-items: center;\n"])));
79
-
80
- exports.SourceWrapper = SourceWrapper;
81
-
82
- var EmailDomainWrapper = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: bold;\n"])));
60
+ var EmailDomainWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: bold;\n"])));
83
61
 
84
62
  exports.EmailDomainWrapper = EmailDomainWrapper;
85
- var SourcesInfoMap = new Map([['slack', {
86
- key: 'slack',
87
- icon: /*#__PURE__*/_react.default.createElement(_slack.SlackIcon, null),
88
- label: _i18n.messages.slackProvider
89
- }], ['google', {
90
- key: 'google',
91
- icon: /*#__PURE__*/_react.default.createElement(_google.GoogleIcon, null),
92
- label: _i18n.messages.googleProvider
93
- }], ['microsoft', {
94
- key: 'microsoft',
95
- icon: /*#__PURE__*/_react.default.createElement(_microsoft.MicrosoftIcon, null),
96
- label: _i18n.messages.microsoftProvider
97
- }], ['github', {
98
- key: 'github',
99
- icon: /*#__PURE__*/_react.default.createElement(_github.GitHubIcon, null),
100
- label: _i18n.messages.gitHubProvider
101
- }], ['jira', {
102
- key: 'jira',
103
- icon: /*#__PURE__*/_react.default.createElement(_logo.JiraIcon, {
104
- size: 'xsmall'
105
- }),
106
- label: _i18n.messages.jiraSource
107
- }], ['confluence', {
108
- key: 'confluence',
109
- icon: /*#__PURE__*/_react.default.createElement(_logo.ConfluenceIcon, {
110
- size: 'xsmall'
111
- }),
112
- label: _i18n.messages.confluenceSource
113
- }], ['other-atlassian', {
114
- key: 'other-atlassian',
115
- icon: /*#__PURE__*/_react.default.createElement(_logo.AtlassianIcon, {
116
- size: 'xsmall'
117
- }),
118
- label: _i18n.messages.otherAtlassianSource
119
- }]]);
120
63
 
121
64
  var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
122
65
  (0, _inherits2.default)(ExternalUserOption, _React$PureComponent);
@@ -200,25 +143,8 @@ var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
200
143
  accountId: id,
201
144
  shouldFetchSources: Boolean(requiresSourceHydration),
202
145
  initialSources: sources
203
- }, function (_ref) {
204
- var sources = _ref.sources,
205
- sourcesLoading = _ref.sourcesLoading,
206
- sourcesError = _ref.sourcesError;
207
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesError)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.externalUserSourcesHeading)), /*#__PURE__*/_react.default.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/_react.default.createElement(_spinner.default, {
208
- size: "small",
209
- appearance: "invert"
210
- }), !sourcesLoading && sources.map(function (s) {
211
- return SourcesInfoMap.get(s);
212
- }).filter(function (s) {
213
- return s;
214
- }).map(function (_ref2) {
215
- var key = _ref2.key,
216
- icon = _ref2.icon,
217
- label = _ref2.label;
218
- return /*#__PURE__*/_react.default.createElement(SourceWrapper, {
219
- key: key
220
- }, /*#__PURE__*/_react.default.createElement(ImageContainer, null, icon), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, label)));
221
- }))));
146
+ }, function (sourceData) {
147
+ return /*#__PURE__*/_react.default.createElement(_SourcesTooltipContent.SourcesTooltipContent, sourceData);
222
148
  });
223
149
  }
224
150
  }]);
package/dist/cjs/components/ExternalUserSourcesContainer.js CHANGED
@@ -19,22 +19,19 @@ var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(_ref) {
19
19
 
20
20
  var _useUserSource = (0, _UserSourceProvider.useUserSource)(accountId, shouldFetchSources, initialSources),
21
21
  sources = _useUserSource.sources,
22
- sourcesLoading = _useUserSource.loading,
23
- sourcesError = _useUserSource.error;
22
+ sourcesLoading = _useUserSource.loading;
24
23
 
25
24
  if (typeof children === 'function') {
26
25
  return children({
27
26
  sources: sources,
28
- sourcesLoading: sourcesLoading,
29
- sourcesError: sourcesError
27
+ sourcesLoading: sourcesLoading
30
28
  });
31
29
  }
32
30
 
33
31
  return _react.default.Children.map(children, function (child) {
34
32
  return /*#__PURE__*/_react.default.cloneElement(child, {
35
33
  sources: sources,
36
- sourcesLoading: sourcesLoading,
37
- sourcesError: sourcesError
34
+ sourcesLoading: sourcesLoading
38
35
  });
39
36
  });
40
37
  };
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "8.7.4",
3
+ "version": "8.8.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/components/ExternalUserOption/SourcesTooltipContent.js ADDED
@@ -0,0 +1,71 @@
1
+ import React from 'react';
2
+ import { FormattedMessage } from 'react-intl-next';
3
+ import styled from 'styled-components';
4
+ import { AtlassianIcon, ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
5
+ import Spinner from '@atlaskit/spinner/spinner';
6
+ import { SlackIcon } from '../assets/slack';
7
+ import { GoogleIcon } from '../assets/google';
8
+ import { MicrosoftIcon } from '../assets/microsoft';
9
+ import { GitHubIcon } from '../assets/github';
10
+ import { messages } from '../i18n';
11
+ import { ImageContainer } from './main';
12
+ export const SourcesTooltipContainer = styled.div`
13
+ padding-bottom: 4px;
14
+ padding-right: 4px;
15
+ `;
16
+ export const SourceWrapper = styled.div`
17
+ padding-top: 4px;
18
+ display: flex;
19
+ align-items: center;
20
+ `;
21
+ const SUPPORTED_SOURCES = [{
22
+ sourceType: 'jira',
23
+ icon: /*#__PURE__*/React.createElement(JiraIcon, {
24
+ size: 'xsmall'
25
+ }),
26
+ label: messages.jiraSource
27
+ }, {
28
+ sourceType: 'confluence',
29
+ icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
30
+ size: 'xsmall'
31
+ }),
32
+ label: messages.confluenceSource
33
+ }, {
34
+ sourceType: 'other-atlassian',
35
+ icon: /*#__PURE__*/React.createElement(AtlassianIcon, {
36
+ size: 'xsmall'
37
+ }),
38
+ label: messages.otherAtlassianSource
39
+ }, {
40
+ sourceType: 'slack',
41
+ icon: /*#__PURE__*/React.createElement(SlackIcon, null),
42
+ label: messages.slackProvider
43
+ }, {
44
+ sourceType: 'google',
45
+ icon: /*#__PURE__*/React.createElement(GoogleIcon, null),
46
+ label: messages.googleProvider
47
+ }, {
48
+ sourceType: 'microsoft',
49
+ icon: /*#__PURE__*/React.createElement(MicrosoftIcon, null),
50
+ label: messages.microsoftProvider
51
+ }, {
52
+ sourceType: 'github',
53
+ icon: /*#__PURE__*/React.createElement(GitHubIcon, null),
54
+ label: messages.gitHubProvider
55
+ }];
56
+ export const SourcesTooltipContent = ({
57
+ sources,
58
+ sourcesLoading
59
+ }) => {
60
+ const sourcesToRender = React.useMemo(() => SUPPORTED_SOURCES.filter(supportedSource => sources.includes(supportedSource.sourceType)), [sources]);
61
+ return /*#__PURE__*/React.createElement(React.Fragment, null, !sourcesLoading && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
62
+ size: "small",
63
+ appearance: "invert"
64
+ }), !sourcesLoading && sourcesToRender.map(({
65
+ sourceType,
66
+ icon,
67
+ label
68
+ }) => /*#__PURE__*/React.createElement(SourceWrapper, {
69
+ key: sourceType
70
+ }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label)))))));
71
+ };
package/dist/es2019/components/ExternalUserOption/main.js CHANGED
@@ -1,22 +1,15 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import React from 'react';
3
- import { FormattedMessage } from 'react-intl-next';
4
3
  import styled from 'styled-components';
5
- import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
6
- import Spinner from '@atlaskit/spinner';
7
4
  import { B400, N200, N800 } from '@atlaskit/theme/colors';
8
5
  import { token } from '@atlaskit/tokens';
9
6
  import Tooltip from '@atlaskit/tooltip';
10
7
  import { TextWrapper } from '../AvatarItemOption';
11
8
  import { SizeableAvatar } from '../SizeableAvatar';
12
- import { SlackIcon } from '../assets/slack';
13
- import { GoogleIcon } from '../assets/google';
14
- import { MicrosoftIcon } from '../assets/microsoft';
15
- import { GitHubIcon } from '../assets/github';
16
- import { messages } from '../i18n';
17
9
  import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
18
10
  import InfoIcon from './InfoIcon';
19
11
  import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
12
+ import { SourcesTooltipContent } from './SourcesTooltipContent';
20
13
  export const ImageContainer = styled.span`
21
14
  height: 16px;
22
15
  width: 16px;
@@ -25,53 +18,9 @@ export const ImageContainer = styled.span`
25
18
  align-items: center;
26
19
  justify-content: center;
27
20
  `;
28
- export const SourcesTooltipContainer = styled.div`
29
- padding-bottom: 4px;
30
- padding-right: 4px;
31
- `;
32
- export const SourceWrapper = styled.div`
33
- padding-top: 4px;
34
- display: flex;
35
- align-items: center;
36
- `;
37
21
  export const EmailDomainWrapper = styled.span`
38
22
  font-weight: bold;
39
23
  `;
40
- const SourcesInfoMap = new Map([['slack', {
41
- key: 'slack',
42
- icon: /*#__PURE__*/React.createElement(SlackIcon, null),
43
- label: messages.slackProvider
44
- }], ['google', {
45
- key: 'google',
46
- icon: /*#__PURE__*/React.createElement(GoogleIcon, null),
47
- label: messages.googleProvider
48
- }], ['microsoft', {
49
- key: 'microsoft',
50
- icon: /*#__PURE__*/React.createElement(MicrosoftIcon, null),
51
- label: messages.microsoftProvider
52
- }], ['github', {
53
- key: 'github',
54
- icon: /*#__PURE__*/React.createElement(GitHubIcon, null),
55
- label: messages.gitHubProvider
56
- }], ['jira', {
57
- key: 'jira',
58
- icon: /*#__PURE__*/React.createElement(JiraIcon, {
59
- size: 'xsmall'
60
- }),
61
- label: messages.jiraSource
62
- }], ['confluence', {
63
- key: 'confluence',
64
- icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
65
- size: 'xsmall'
66
- }),
67
- label: messages.confluenceSource
68
- }], ['other-atlassian', {
69
- key: 'other-atlassian',
70
- icon: /*#__PURE__*/React.createElement(AtlassianIcon, {
71
- size: 'xsmall'
72
- }),
73
- label: messages.otherAtlassianSource
74
- }]]);
75
24
  export class ExternalUserOption extends React.PureComponent {
76
25
  constructor(...args) {
77
26
  super(...args);
@@ -147,20 +96,7 @@ export class ExternalUserOption extends React.PureComponent {
147
96
  accountId: id,
148
97
  shouldFetchSources: Boolean(requiresSourceHydration),
149
98
  initialSources: sources
150
- }, ({
151
- sources,
152
- sourcesLoading,
153
- sourcesError
154
- }) => /*#__PURE__*/React.createElement(React.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
155
- size: "small",
156
- appearance: "invert"
157
- }), !sourcesLoading && sources.map(s => SourcesInfoMap.get(s)).filter(s => s).map(({
158
- key,
159
- icon,
160
- label
161
- }) => /*#__PURE__*/React.createElement(SourceWrapper, {
162
- key: key
163
- }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label))))))));
99
+ }, sourceData => /*#__PURE__*/React.createElement(SourcesTooltipContent, sourceData));
164
100
  }
165
101
 
166
102
  }
package/dist/es2019/components/ExternalUserSourcesContainer.js CHANGED
@@ -8,21 +8,18 @@ export const ExternalUserSourcesContainer = ({
8
8
  }) => {
9
9
  const {
10
10
  sources,
11
- loading: sourcesLoading,
12
- error: sourcesError
11
+ loading: sourcesLoading
13
12
  } = useUserSource(accountId, shouldFetchSources, initialSources);
14
13
 
15
14
  if (typeof children === 'function') {
16
15
  return children({
17
16
  sources,
18
- sourcesLoading,
19
- sourcesError
17
+ sourcesLoading
20
18
  });
21
19
  }
22
20
 
23
21
  return React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
24
22
  sources,
25
- sourcesLoading,
26
- sourcesError
23
+ sourcesLoading
27
24
  }));
28
25
  };
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "8.7.4",
3
+ "version": "8.8.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/components/ExternalUserOption/SourcesTooltipContent.js ADDED
@@ -0,0 +1,72 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+
3
+ var _templateObject, _templateObject2;
4
+
5
+ import React from 'react';
6
+ import { FormattedMessage } from 'react-intl-next';
7
+ import styled from 'styled-components';
8
+ import { AtlassianIcon, ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
9
+ import Spinner from '@atlaskit/spinner/spinner';
10
+ import { SlackIcon } from '../assets/slack';
11
+ import { GoogleIcon } from '../assets/google';
12
+ import { MicrosoftIcon } from '../assets/microsoft';
13
+ import { GitHubIcon } from '../assets/github';
14
+ import { messages } from '../i18n';
15
+ import { ImageContainer } from './main';
16
+ export var SourcesTooltipContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding-bottom: 4px;\n padding-right: 4px;\n"])));
17
+ export var SourceWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-top: 4px;\n display: flex;\n align-items: center;\n"])));
18
+ var SUPPORTED_SOURCES = [{
19
+ sourceType: 'jira',
20
+ icon: /*#__PURE__*/React.createElement(JiraIcon, {
21
+ size: 'xsmall'
22
+ }),
23
+ label: messages.jiraSource
24
+ }, {
25
+ sourceType: 'confluence',
26
+ icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
27
+ size: 'xsmall'
28
+ }),
29
+ label: messages.confluenceSource
30
+ }, {
31
+ sourceType: 'other-atlassian',
32
+ icon: /*#__PURE__*/React.createElement(AtlassianIcon, {
33
+ size: 'xsmall'
34
+ }),
35
+ label: messages.otherAtlassianSource
36
+ }, {
37
+ sourceType: 'slack',
38
+ icon: /*#__PURE__*/React.createElement(SlackIcon, null),
39
+ label: messages.slackProvider
40
+ }, {
41
+ sourceType: 'google',
42
+ icon: /*#__PURE__*/React.createElement(GoogleIcon, null),
43
+ label: messages.googleProvider
44
+ }, {
45
+ sourceType: 'microsoft',
46
+ icon: /*#__PURE__*/React.createElement(MicrosoftIcon, null),
47
+ label: messages.microsoftProvider
48
+ }, {
49
+ sourceType: 'github',
50
+ icon: /*#__PURE__*/React.createElement(GitHubIcon, null),
51
+ label: messages.gitHubProvider
52
+ }];
53
+ export var SourcesTooltipContent = function SourcesTooltipContent(_ref) {
54
+ var sources = _ref.sources,
55
+ sourcesLoading = _ref.sourcesLoading;
56
+ var sourcesToRender = React.useMemo(function () {
57
+ return SUPPORTED_SOURCES.filter(function (supportedSource) {
58
+ return sources.includes(supportedSource.sourceType);
59
+ });
60
+ }, [sources]);
61
+ return /*#__PURE__*/React.createElement(React.Fragment, null, !sourcesLoading && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
62
+ size: "small",
63
+ appearance: "invert"
64
+ }), !sourcesLoading && sourcesToRender.map(function (_ref2) {
65
+ var sourceType = _ref2.sourceType,
66
+ icon = _ref2.icon,
67
+ label = _ref2.label;
68
+ return /*#__PURE__*/React.createElement(SourceWrapper, {
69
+ key: sourceType
70
+ }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label)));
71
+ }))));
72
+ };
package/dist/esm/components/ExternalUserOption/main.js CHANGED
@@ -8,69 +8,25 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
8
8
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
9
9
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
10
10
 
11
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
+ var _templateObject, _templateObject2;
12
12
 
13
13
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
14
14
 
15
15
  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; } }
16
16
 
17
17
  import React from 'react';
18
- import { FormattedMessage } from 'react-intl-next';
19
18
  import styled from 'styled-components';
20
- import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
21
- import Spinner from '@atlaskit/spinner';
22
19
  import { B400, N200, N800 } from '@atlaskit/theme/colors';
23
20
  import { token } from '@atlaskit/tokens';
24
21
  import Tooltip from '@atlaskit/tooltip';
25
22
  import { TextWrapper } from '../AvatarItemOption';
26
23
  import { SizeableAvatar } from '../SizeableAvatar';
27
- import { SlackIcon } from '../assets/slack';
28
- import { GoogleIcon } from '../assets/google';
29
- import { MicrosoftIcon } from '../assets/microsoft';
30
- import { GitHubIcon } from '../assets/github';
31
- import { messages } from '../i18n';
32
24
  import { ExternalUserSourcesContainer } from '../ExternalUserSourcesContainer';
33
25
  import InfoIcon from './InfoIcon';
34
26
  import { ExternalAvatarItemOption } from './ExternalAvatarItemOption';
27
+ import { SourcesTooltipContent } from './SourcesTooltipContent';
35
28
  export var ImageContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 16px;\n width: 16px;\n padding-right: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
36
- export var SourcesTooltipContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-bottom: 4px;\n padding-right: 4px;\n"])));
37
- export var SourceWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding-top: 4px;\n display: flex;\n align-items: center;\n"])));
38
- export var EmailDomainWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-weight: bold;\n"])));
39
- var SourcesInfoMap = new Map([['slack', {
40
- key: 'slack',
41
- icon: /*#__PURE__*/React.createElement(SlackIcon, null),
42
- label: messages.slackProvider
43
- }], ['google', {
44
- key: 'google',
45
- icon: /*#__PURE__*/React.createElement(GoogleIcon, null),
46
- label: messages.googleProvider
47
- }], ['microsoft', {
48
- key: 'microsoft',
49
- icon: /*#__PURE__*/React.createElement(MicrosoftIcon, null),
50
- label: messages.microsoftProvider
51
- }], ['github', {
52
- key: 'github',
53
- icon: /*#__PURE__*/React.createElement(GitHubIcon, null),
54
- label: messages.gitHubProvider
55
- }], ['jira', {
56
- key: 'jira',
57
- icon: /*#__PURE__*/React.createElement(JiraIcon, {
58
- size: 'xsmall'
59
- }),
60
- label: messages.jiraSource
61
- }], ['confluence', {
62
- key: 'confluence',
63
- icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
64
- size: 'xsmall'
65
- }),
66
- label: messages.confluenceSource
67
- }], ['other-atlassian', {
68
- key: 'other-atlassian',
69
- icon: /*#__PURE__*/React.createElement(AtlassianIcon, {
70
- size: 'xsmall'
71
- }),
72
- label: messages.otherAtlassianSource
73
- }]]);
29
+ export var EmailDomainWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-weight: bold;\n"])));
74
30
  export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
75
31
  _inherits(ExternalUserOption, _React$PureComponent);
76
32
 
@@ -158,25 +114,8 @@ export var ExternalUserOption = /*#__PURE__*/function (_React$PureComponent) {
158
114
  accountId: id,
159
115
  shouldFetchSources: Boolean(requiresSourceHydration),
160
116
  initialSources: sources
161
- }, function (_ref) {
162
- var sources = _ref.sources,
163
- sourcesLoading = _ref.sourcesLoading,
164
- sourcesError = _ref.sourcesError;
165
- return /*#__PURE__*/React.createElement(React.Fragment, null, sourcesError !== null && sources.length === 0 ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesError)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.externalUserSourcesHeading)), /*#__PURE__*/React.createElement(SourcesTooltipContainer, null, sourcesLoading && /*#__PURE__*/React.createElement(Spinner, {
166
- size: "small",
167
- appearance: "invert"
168
- }), !sourcesLoading && sources.map(function (s) {
169
- return SourcesInfoMap.get(s);
170
- }).filter(function (s) {
171
- return s;
172
- }).map(function (_ref2) {
173
- var key = _ref2.key,
174
- icon = _ref2.icon,
175
- label = _ref2.label;
176
- return /*#__PURE__*/React.createElement(SourceWrapper, {
177
- key: key
178
- }, /*#__PURE__*/React.createElement(ImageContainer, null, icon), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(FormattedMessage, label)));
179
- }))));
117
+ }, function (sourceData) {
118
+ return /*#__PURE__*/React.createElement(SourcesTooltipContent, sourceData);
180
119
  });
181
120
  }
182
121
  }]);
package/dist/esm/components/ExternalUserSourcesContainer.js CHANGED
@@ -8,22 +8,19 @@ export var ExternalUserSourcesContainer = function ExternalUserSourcesContainer(
8
8
 
9
9
  var _useUserSource = useUserSource(accountId, shouldFetchSources, initialSources),
10
10
  sources = _useUserSource.sources,
11
- sourcesLoading = _useUserSource.loading,
12
- sourcesError = _useUserSource.error;
11
+ sourcesLoading = _useUserSource.loading;
13
12
 
14
13
  if (typeof children === 'function') {
15
14
  return children({
16
15
  sources: sources,
17
- sourcesLoading: sourcesLoading,
18
- sourcesError: sourcesError
16
+ sourcesLoading: sourcesLoading
19
17
  });
20
18
  }
21
19
 
22
20
  return React.Children.map(children, function (child) {
23
21
  return /*#__PURE__*/React.cloneElement(child, {
24
22
  sources: sources,
25
- sourcesLoading: sourcesLoading,
26
- sourcesError: sourcesError
23
+ sourcesLoading: sourcesLoading
27
24
  });
28
25
  });
29
26
  };
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "8.7.4",
3
+ "version": "8.8.2",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/components/ExternalUserOption/SourcesTooltipContent.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { ExternalUserSourcesData } from '../ExternalUserSourcesContainer';
3
+ export declare const SourcesTooltipContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
4
+ export declare const SourceWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
5
+ export declare const SourcesTooltipContent: React.FC<ExternalUserSourcesData>;
package/dist/types/components/ExternalUserOption/main.d.ts CHANGED
@@ -1,8 +1,6 @@
1
1
  import React from 'react';
2
2
  import { ExternalUser } from '../../types';
3
3
  export declare const ImageContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
4
- export declare const SourcesTooltipContainer: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
5
- export declare const SourceWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
6
4
  export declare const EmailDomainWrapper: import("styled-components").StyledComponentClass<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
7
5
  export declare type ExternalUserOptionProps = {
8
6
  user: ExternalUser;
package/dist/types/components/ExternalUserSourcesContainer.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import React, { ReactNode } from 'react';
2
2
  import { UserSource } from '../types';
3
- declare type SourcesChildrenFunc = ({ sources, sourcesLoading, sourcesError, }: {
3
+ export interface ExternalUserSourcesData {
4
4
  sources: UserSource[];
5
5
  sourcesLoading: boolean;
6
- sourcesError: string | null;
7
- }) => ReactNode;
6
+ }
7
+ declare type SourcesChildrenFunc = (sourcesData: ExternalUserSourcesData) => ReactNode;
8
8
  interface SourcesContainerProps {
9
9
  accountId: string;
10
10
  shouldFetchSources: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/user-picker",
3
- "version": "8.7.4",
3
+ "version": "8.8.2",
4
4
  "description": "Fabric component for display a dropdown to select a user from",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
35
35
  "@atlaskit/select": "^15.2.0",
36
36
  "@atlaskit/spinner": "^15.1.4",
37
37
  "@atlaskit/theme": "^12.1.0",
38
- "@atlaskit/tokens": "^0.6.0",
38
+ "@atlaskit/tokens": "^0.7.0",
39
39
  "@atlaskit/tooltip": "^17.5.0",
40
40
  "@atlaskit/ufo": "^0.1.0",
41
41
  "@babel/runtime": "^7.0.0",
@@ -51,7 +51,7 @@
51
51
  },
52
52
  "devDependencies": {
53
53
  "@atlaskit/analytics-viewer": "^0.4.0",
54
- "@atlaskit/button": "^16.0.0",
54
+ "@atlaskit/button": "^16.2.0",
55
55
  "@atlaskit/docs": "*",
56
56
  "@atlaskit/elements-test-helpers": "^0.7.0",
57
57
  "@atlaskit/modal-dialog": "^12.2.0",