@atlaskit/mention 21.0.0 → 21.0.3
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.
- package/CHANGELOG.md +22 -0
- package/dist/cjs/components/Mention/index.js +24 -9
- package/dist/cjs/components/Mention/ufoExperiences.js +61 -0
- package/dist/cjs/components/MentionItem/styles.js +1 -1
- package/dist/cjs/components/TeamMentionHighlight/styles.js +2 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/Mention/index.js +20 -4
- package/dist/es2019/components/Mention/ufoExperiences.js +19 -0
- package/dist/es2019/components/MentionItem/styles.js +1 -1
- package/dist/es2019/components/TeamMentionHighlight/styles.js +2 -2
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/Mention/index.js +20 -8
- package/dist/esm/components/Mention/ufoExperiences.js +44 -0
- package/dist/esm/components/MentionItem/styles.js +1 -1
- package/dist/esm/components/TeamMentionHighlight/styles.js +2 -2
- package/dist/esm/version.json +1 -1
- package/dist/types/components/Mention/index.d.ts +3 -1
- package/dist/types/components/Mention/ufoExperiences.d.ts +9 -0
- package/dist/types/components/MentionDescriptionByline/styles.d.ts +1 -1
- package/dist/types/components/MentionItem/styles.d.ts +4 -4
- package/dist/types/components/MentionListError/styles.d.ts +4 -4
- package/dist/types/components/MentionPicker/index.d.ts +2 -2
- package/dist/types/components/MentionPicker/styles.d.ts +1 -1
- package/dist/types/components/ResourcedMentionList/index.d.ts +1 -1
- package/dist/types/components/Scrollable/styles.d.ts +1 -1
- package/dist/types/components/TeamMentionHighlight/index.d.ts +1 -1
- package/dist/types/components/TeamMentionHighlight/lazy.d.ts +1 -1
- package/dist/types/components/TeamMentionHighlight/styles.d.ts +8 -8
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/mention
|
|
2
2
|
|
|
3
|
+
## 21.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
10
|
+
## 21.0.2
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 21.0.1
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [`9120f857a67`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9120f857a67) - Remove react-intl v2 from dev dependencies
|
|
21
|
+
- [`6ee0b5cac9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6ee0b5cac9a) - Mention lozenge component rendering performance/reliability is now tracked
|
|
22
|
+
- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
|
|
23
|
+
- Updated dependencies
|
|
24
|
+
|
|
3
25
|
## 21.0.0
|
|
4
26
|
|
|
5
27
|
### Major Changes
|
|
@@ -37,8 +37,12 @@ var _analytics = require("../../util/analytics");
|
|
|
37
37
|
|
|
38
38
|
var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
|
|
39
39
|
|
|
40
|
+
var _ufo = require("@atlaskit/ufo");
|
|
41
|
+
|
|
40
42
|
var _i18n = require("../../util/i18n");
|
|
41
43
|
|
|
44
|
+
var _ufoExperiences = require("./ufoExperiences");
|
|
45
|
+
|
|
42
46
|
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); }; }
|
|
43
47
|
|
|
44
48
|
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; } }
|
|
@@ -53,16 +57,11 @@ var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
53
57
|
|
|
54
58
|
var _super = _createSuper(MentionInternal);
|
|
55
59
|
|
|
56
|
-
function MentionInternal() {
|
|
60
|
+
function MentionInternal(props) {
|
|
57
61
|
var _this;
|
|
58
62
|
|
|
59
63
|
(0, _classCallCheck2.default)(this, MentionInternal);
|
|
60
|
-
|
|
61
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
62
|
-
args[_key] = arguments[_key];
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
64
|
+
_this = _super.call(this, props);
|
|
66
65
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnClick", function (e) {
|
|
67
66
|
var _this$props = _this.props,
|
|
68
67
|
id = _this$props.id,
|
|
@@ -121,15 +120,29 @@ var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
121
120
|
|
|
122
121
|
return _types.MentionType.DEFAULT;
|
|
123
122
|
});
|
|
123
|
+
|
|
124
|
+
_ufoExperiences.mentionRenderedUfoExperience.getInstance(props.id).start();
|
|
125
|
+
|
|
124
126
|
return _this;
|
|
125
127
|
}
|
|
126
128
|
|
|
127
129
|
(0, _createClass2.default)(MentionInternal, [{
|
|
130
|
+
key: "componentDidMount",
|
|
131
|
+
value: function componentDidMount() {
|
|
132
|
+
_ufoExperiences.mentionRenderedUfoExperience.getInstance(this.props.id).success();
|
|
133
|
+
}
|
|
134
|
+
}, {
|
|
128
135
|
key: "componentWillUnmount",
|
|
129
136
|
value: function componentWillUnmount() {
|
|
130
137
|
if (this.hoverTimeout) {
|
|
131
138
|
clearTimeout(this.hoverTimeout);
|
|
132
139
|
}
|
|
140
|
+
|
|
141
|
+
var ufoInstance = _ufoExperiences.mentionRenderedUfoExperience.getInstance(this.props.id);
|
|
142
|
+
|
|
143
|
+
if ([_ufo.UFOExperienceState['STARTED'], _ufo.UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
|
|
144
|
+
ufoInstance.abort();
|
|
145
|
+
}
|
|
133
146
|
}
|
|
134
147
|
}, {
|
|
135
148
|
key: "renderUnknownUserError",
|
|
@@ -163,7 +176,9 @@ var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
163
176
|
spellCheck: false
|
|
164
177
|
}, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
|
|
165
178
|
|
|
166
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
179
|
+
return /*#__PURE__*/_react.default.createElement(_ufoExperiences.UfoErrorBoundary, {
|
|
180
|
+
id: id
|
|
181
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
167
182
|
"data-mention-id": id,
|
|
168
183
|
"data-access-level": accessLevel,
|
|
169
184
|
spellCheck: false
|
|
@@ -171,7 +186,7 @@ var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
171
186
|
fallback: mentionComponent
|
|
172
187
|
}, /*#__PURE__*/_react.default.createElement(_NoAccessTooltip.default, {
|
|
173
188
|
name: text
|
|
174
|
-
}, mentionComponent)) : mentionComponent));
|
|
189
|
+
}, mentionComponent)) : mentionComponent)));
|
|
175
190
|
}
|
|
176
191
|
}]);
|
|
177
192
|
return MentionInternal;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.mentionRenderedUfoExperience = exports.UfoErrorBoundary = void 0;
|
|
9
|
+
|
|
10
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
|
+
|
|
12
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
+
|
|
14
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
|
+
|
|
16
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
17
|
+
|
|
18
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
19
|
+
|
|
20
|
+
var _react = _interopRequireDefault(require("react"));
|
|
21
|
+
|
|
22
|
+
var _ufo = require("@atlaskit/ufo");
|
|
23
|
+
|
|
24
|
+
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); }; }
|
|
25
|
+
|
|
26
|
+
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; } }
|
|
27
|
+
|
|
28
|
+
var mentionRenderedUfoExperience = new _ufo.ConcurrentExperience('mention-rendered', {
|
|
29
|
+
platform: {
|
|
30
|
+
component: 'mention'
|
|
31
|
+
},
|
|
32
|
+
type: _ufo.ExperienceTypes.Load,
|
|
33
|
+
performanceType: _ufo.ExperiencePerformanceTypes.PageSegmentLoad
|
|
34
|
+
});
|
|
35
|
+
exports.mentionRenderedUfoExperience = mentionRenderedUfoExperience;
|
|
36
|
+
|
|
37
|
+
var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
38
|
+
(0, _inherits2.default)(UfoErrorBoundary, _React$Component);
|
|
39
|
+
|
|
40
|
+
var _super = _createSuper(UfoErrorBoundary);
|
|
41
|
+
|
|
42
|
+
function UfoErrorBoundary() {
|
|
43
|
+
(0, _classCallCheck2.default)(this, UfoErrorBoundary);
|
|
44
|
+
return _super.apply(this, arguments);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
(0, _createClass2.default)(UfoErrorBoundary, [{
|
|
48
|
+
key: "componentDidCatch",
|
|
49
|
+
value: function componentDidCatch() {
|
|
50
|
+
mentionRenderedUfoExperience.getInstance(this.props.id).failure();
|
|
51
|
+
}
|
|
52
|
+
}, {
|
|
53
|
+
key: "render",
|
|
54
|
+
value: function render() {
|
|
55
|
+
return this.props.children;
|
|
56
|
+
}
|
|
57
|
+
}]);
|
|
58
|
+
return UfoErrorBoundary;
|
|
59
|
+
}(_react.default.Component);
|
|
60
|
+
|
|
61
|
+
exports.UfoErrorBoundary = UfoErrorBoundary;
|
|
@@ -50,7 +50,7 @@ var MENTION_ITEM_HEIGHT = 48;
|
|
|
50
50
|
exports.MENTION_ITEM_HEIGHT = MENTION_ITEM_HEIGHT;
|
|
51
51
|
|
|
52
52
|
var MentionItemStyle = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n display: block;\n overflow: hidden;\n list-style-type: none;\n height: ", "px;\n line-height: 1.2;\n cursor: pointer;\n"])), function (props) {
|
|
53
|
-
return props.selected ? (0, _tokens.token)('color.background.
|
|
53
|
+
return props.selected ? (0, _tokens.token)('color.background.selected', _colors.N30) : 'transparent';
|
|
54
54
|
}, MENTION_ITEM_HEIGHT);
|
|
55
55
|
|
|
56
56
|
exports.MentionItemStyle = MentionItemStyle;
|
|
@@ -21,7 +21,7 @@ var _tokens = require("@atlaskit/tokens");
|
|
|
21
21
|
|
|
22
22
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
23
23
|
|
|
24
|
-
var Actions = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n justify-content: flex-end;\n margin-top: -", "px; /* Negative margin is used to middle align x button with title*/\n margin-right: ", "px;\n"])), (0, _constants.gridSize)() * 0.5, (0, _constants.gridSize)() * 0.5);
|
|
24
|
+
var Actions = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n justify-content: flex-end;\n margin-top: -", "px; /* Negative margin is used to middle align x button with title */\n margin-right: ", "px;\n"])), (0, _constants.gridSize)() * 0.5, (0, _constants.gridSize)() * 0.5);
|
|
25
25
|
|
|
26
26
|
exports.Actions = Actions;
|
|
27
27
|
|
|
@@ -33,7 +33,7 @@ var Heading = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _t
|
|
|
33
33
|
|
|
34
34
|
exports.Heading = Heading;
|
|
35
35
|
|
|
36
|
-
var Card = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n background-color: ", ";\n overflow: hidden;\n line-height: 21px;\n padding-top: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n padding-right: 0px;\n margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight*/\n"])), (0, _tokens.token)('color.background.discovery', _colors.P50), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 0.5);
|
|
36
|
+
var Card = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n background-color: ", ";\n overflow: hidden;\n line-height: 21px;\n padding-top: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n padding-right: 0px;\n margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight */\n"])), (0, _tokens.token)('color.background.discovery', _colors.P50), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 0.5);
|
|
37
37
|
|
|
38
38
|
exports.Card = Card;
|
|
39
39
|
|
package/dist/cjs/version.json
CHANGED
|
@@ -7,12 +7,14 @@ import AsyncNoAccessTooltip from '../NoAccessTooltip';
|
|
|
7
7
|
import { isRestricted, MentionType } from '../../types';
|
|
8
8
|
import { fireAnalyticsMentionEvent } from '../../util/analytics';
|
|
9
9
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
10
|
+
import { UFOExperienceState } from '@atlaskit/ufo';
|
|
10
11
|
import { UnknownUserError } from '../../util/i18n';
|
|
12
|
+
import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
|
|
11
13
|
export const ANALYTICS_HOVER_DELAY = 1000;
|
|
12
14
|
export const UNKNOWN_USER_ID = '_|unknown|_';
|
|
13
15
|
export class MentionInternal extends React.PureComponent {
|
|
14
|
-
constructor(
|
|
15
|
-
super(
|
|
16
|
+
constructor(props) {
|
|
17
|
+
super(props);
|
|
16
18
|
|
|
17
19
|
_defineProperty(this, "handleOnClick", e => {
|
|
18
20
|
const {
|
|
@@ -79,12 +81,24 @@ export class MentionInternal extends React.PureComponent {
|
|
|
79
81
|
|
|
80
82
|
return MentionType.DEFAULT;
|
|
81
83
|
});
|
|
84
|
+
|
|
85
|
+
mentionRenderedUfoExperience.getInstance(props.id).start();
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
componentDidMount() {
|
|
89
|
+
mentionRenderedUfoExperience.getInstance(this.props.id).success();
|
|
82
90
|
}
|
|
83
91
|
|
|
84
92
|
componentWillUnmount() {
|
|
85
93
|
if (this.hoverTimeout) {
|
|
86
94
|
clearTimeout(this.hoverTimeout);
|
|
87
95
|
}
|
|
96
|
+
|
|
97
|
+
const ufoInstance = mentionRenderedUfoExperience.getInstance(this.props.id);
|
|
98
|
+
|
|
99
|
+
if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
|
|
100
|
+
ufoInstance.abort();
|
|
101
|
+
}
|
|
88
102
|
}
|
|
89
103
|
|
|
90
104
|
renderUnknownUserError(id) {
|
|
@@ -116,7 +130,9 @@ export class MentionInternal extends React.PureComponent {
|
|
|
116
130
|
onMouseLeave: handleOnMouseLeave,
|
|
117
131
|
spellCheck: false
|
|
118
132
|
}, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
|
|
119
|
-
return /*#__PURE__*/React.createElement(
|
|
133
|
+
return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
|
|
134
|
+
id: id
|
|
135
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
120
136
|
"data-mention-id": id,
|
|
121
137
|
"data-access-level": accessLevel,
|
|
122
138
|
spellCheck: false
|
|
@@ -124,7 +140,7 @@ export class MentionInternal extends React.PureComponent {
|
|
|
124
140
|
fallback: mentionComponent
|
|
125
141
|
}, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
|
|
126
142
|
name: text
|
|
127
|
-
}, mentionComponent)) : mentionComponent));
|
|
143
|
+
}, mentionComponent)) : mentionComponent)));
|
|
128
144
|
}
|
|
129
145
|
|
|
130
146
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
|
|
3
|
+
export const mentionRenderedUfoExperience = new ConcurrentExperience('mention-rendered', {
|
|
4
|
+
platform: {
|
|
5
|
+
component: 'mention'
|
|
6
|
+
},
|
|
7
|
+
type: ExperienceTypes.Load,
|
|
8
|
+
performanceType: ExperiencePerformanceTypes.PageSegmentLoad
|
|
9
|
+
});
|
|
10
|
+
export class UfoErrorBoundary extends React.Component {
|
|
11
|
+
componentDidCatch() {
|
|
12
|
+
mentionRenderedUfoExperience.getInstance(this.props.id).failure();
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
render() {
|
|
16
|
+
return this.props.children;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
}
|
|
@@ -50,7 +50,7 @@ export const TimeStyle = styled.div`
|
|
|
50
50
|
`;
|
|
51
51
|
export const MENTION_ITEM_HEIGHT = 48;
|
|
52
52
|
export const MentionItemStyle = styled.div`
|
|
53
|
-
background-color: ${props => props.selected ? token('color.background.
|
|
53
|
+
background-color: ${props => props.selected ? token('color.background.selected', N30) : 'transparent'};
|
|
54
54
|
display: block;
|
|
55
55
|
overflow: hidden;
|
|
56
56
|
list-style-type: none;
|
|
@@ -5,7 +5,7 @@ import { h400 } from '@atlaskit/theme/typography';
|
|
|
5
5
|
import { token } from '@atlaskit/tokens';
|
|
6
6
|
export const Actions = styled.div`
|
|
7
7
|
justify-content: flex-end;
|
|
8
|
-
margin-top: -${gridSize() * 0.5}px; /* Negative margin is used to middle align x button with title*/
|
|
8
|
+
margin-top: -${gridSize() * 0.5}px; /* Negative margin is used to middle align x button with title */
|
|
9
9
|
margin-right: ${gridSize() * 0.5}px;
|
|
10
10
|
`;
|
|
11
11
|
export const Title = styled.div`
|
|
@@ -26,7 +26,7 @@ export const Card = styled.div`
|
|
|
26
26
|
padding-bottom: ${gridSize() * 2}px;
|
|
27
27
|
padding-left: ${gridSize() * 2}px;
|
|
28
28
|
padding-right: 0px;
|
|
29
|
-
margin-top: -${gridSize() * 0.5}px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight*/
|
|
29
|
+
margin-top: -${gridSize() * 0.5}px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight */
|
|
30
30
|
`;
|
|
31
31
|
export const Content = styled.div`
|
|
32
32
|
max-width: 290px;
|
package/dist/es2019/version.json
CHANGED
|
@@ -18,7 +18,9 @@ import AsyncNoAccessTooltip from '../NoAccessTooltip';
|
|
|
18
18
|
import { isRestricted, MentionType } from '../../types';
|
|
19
19
|
import { fireAnalyticsMentionEvent } from '../../util/analytics';
|
|
20
20
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
21
|
+
import { UFOExperienceState } from '@atlaskit/ufo';
|
|
21
22
|
import { UnknownUserError } from '../../util/i18n';
|
|
23
|
+
import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
|
|
22
24
|
export var ANALYTICS_HOVER_DELAY = 1000;
|
|
23
25
|
export var UNKNOWN_USER_ID = '_|unknown|_';
|
|
24
26
|
export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
@@ -26,16 +28,12 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
26
28
|
|
|
27
29
|
var _super = _createSuper(MentionInternal);
|
|
28
30
|
|
|
29
|
-
function MentionInternal() {
|
|
31
|
+
function MentionInternal(props) {
|
|
30
32
|
var _this;
|
|
31
33
|
|
|
32
34
|
_classCallCheck(this, MentionInternal);
|
|
33
35
|
|
|
34
|
-
|
|
35
|
-
args[_key] = arguments[_key];
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
36
|
+
_this = _super.call(this, props);
|
|
39
37
|
|
|
40
38
|
_defineProperty(_assertThisInitialized(_this), "handleOnClick", function (e) {
|
|
41
39
|
var _this$props = _this.props,
|
|
@@ -99,15 +97,27 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
99
97
|
return MentionType.DEFAULT;
|
|
100
98
|
});
|
|
101
99
|
|
|
100
|
+
mentionRenderedUfoExperience.getInstance(props.id).start();
|
|
102
101
|
return _this;
|
|
103
102
|
}
|
|
104
103
|
|
|
105
104
|
_createClass(MentionInternal, [{
|
|
105
|
+
key: "componentDidMount",
|
|
106
|
+
value: function componentDidMount() {
|
|
107
|
+
mentionRenderedUfoExperience.getInstance(this.props.id).success();
|
|
108
|
+
}
|
|
109
|
+
}, {
|
|
106
110
|
key: "componentWillUnmount",
|
|
107
111
|
value: function componentWillUnmount() {
|
|
108
112
|
if (this.hoverTimeout) {
|
|
109
113
|
clearTimeout(this.hoverTimeout);
|
|
110
114
|
}
|
|
115
|
+
|
|
116
|
+
var ufoInstance = mentionRenderedUfoExperience.getInstance(this.props.id);
|
|
117
|
+
|
|
118
|
+
if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
|
|
119
|
+
ufoInstance.abort();
|
|
120
|
+
}
|
|
111
121
|
}
|
|
112
122
|
}, {
|
|
113
123
|
key: "renderUnknownUserError",
|
|
@@ -139,7 +149,9 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
139
149
|
onMouseLeave: handleOnMouseLeave,
|
|
140
150
|
spellCheck: false
|
|
141
151
|
}, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
|
|
142
|
-
return /*#__PURE__*/React.createElement(
|
|
152
|
+
return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
|
|
153
|
+
id: id
|
|
154
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
143
155
|
"data-mention-id": id,
|
|
144
156
|
"data-access-level": accessLevel,
|
|
145
157
|
spellCheck: false
|
|
@@ -147,7 +159,7 @@ export var MentionInternal = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
147
159
|
fallback: mentionComponent
|
|
148
160
|
}, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
|
|
149
161
|
name: text
|
|
150
|
-
}, mentionComponent)) : mentionComponent));
|
|
162
|
+
}, mentionComponent)) : mentionComponent)));
|
|
151
163
|
}
|
|
152
164
|
}]);
|
|
153
165
|
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
+
|
|
7
|
+
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); }; }
|
|
8
|
+
|
|
9
|
+
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; } }
|
|
10
|
+
|
|
11
|
+
import React from 'react';
|
|
12
|
+
import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
|
|
13
|
+
export var mentionRenderedUfoExperience = new ConcurrentExperience('mention-rendered', {
|
|
14
|
+
platform: {
|
|
15
|
+
component: 'mention'
|
|
16
|
+
},
|
|
17
|
+
type: ExperienceTypes.Load,
|
|
18
|
+
performanceType: ExperiencePerformanceTypes.PageSegmentLoad
|
|
19
|
+
});
|
|
20
|
+
export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
|
|
21
|
+
_inherits(UfoErrorBoundary, _React$Component);
|
|
22
|
+
|
|
23
|
+
var _super = _createSuper(UfoErrorBoundary);
|
|
24
|
+
|
|
25
|
+
function UfoErrorBoundary() {
|
|
26
|
+
_classCallCheck(this, UfoErrorBoundary);
|
|
27
|
+
|
|
28
|
+
return _super.apply(this, arguments);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
_createClass(UfoErrorBoundary, [{
|
|
32
|
+
key: "componentDidCatch",
|
|
33
|
+
value: function componentDidCatch() {
|
|
34
|
+
mentionRenderedUfoExperience.getInstance(this.props.id).failure();
|
|
35
|
+
}
|
|
36
|
+
}, {
|
|
37
|
+
key: "render",
|
|
38
|
+
value: function render() {
|
|
39
|
+
return this.props.children;
|
|
40
|
+
}
|
|
41
|
+
}]);
|
|
42
|
+
|
|
43
|
+
return UfoErrorBoundary;
|
|
44
|
+
}(React.Component);
|
|
@@ -19,6 +19,6 @@ export var InfoSectionStyle = styled.div(_templateObject5 || (_templateObject5 =
|
|
|
19
19
|
export var TimeStyle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin-left: 20px;\n flex: none;\n color: ", ";\n font-size: 12px;\n"])), token('color.text.subtlest', N100));
|
|
20
20
|
export var MENTION_ITEM_HEIGHT = 48;
|
|
21
21
|
export var MentionItemStyle = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-color: ", ";\n display: block;\n overflow: hidden;\n list-style-type: none;\n height: ", "px;\n line-height: 1.2;\n cursor: pointer;\n"])), function (props) {
|
|
22
|
-
return props.selected ? token('color.background.
|
|
22
|
+
return props.selected ? token('color.background.selected', N30) : 'transparent';
|
|
23
23
|
}, MENTION_ITEM_HEIGHT);
|
|
24
24
|
export var AccessSectionStyle = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding-left: 5px;\n color: ", ";\n"])), token('color.text.subtle', N500));
|
|
@@ -7,10 +7,10 @@ import { gridSize } from '@atlaskit/theme/constants';
|
|
|
7
7
|
import { P50 } from '@atlaskit/theme/colors';
|
|
8
8
|
import { h400 } from '@atlaskit/theme/typography';
|
|
9
9
|
import { token } from '@atlaskit/tokens';
|
|
10
|
-
export var Actions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n justify-content: flex-end;\n margin-top: -", "px; /* Negative margin is used to middle align x button with title*/\n margin-right: ", "px;\n"])), gridSize() * 0.5, gridSize() * 0.5);
|
|
10
|
+
export var Actions = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n justify-content: flex-end;\n margin-top: -", "px; /* Negative margin is used to middle align x button with title */\n margin-right: ", "px;\n"])), gridSize() * 0.5, gridSize() * 0.5);
|
|
11
11
|
export var Title = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n margin-top: 0px;\n"])), h400);
|
|
12
12
|
export var Heading = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-left: ", "px;\n margin-bottom: ", "px;\n"])), gridSize() * 2, gridSize() * 0.5);
|
|
13
|
-
export var Card = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n background-color: ", ";\n overflow: hidden;\n line-height: 21px;\n padding-top: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n padding-right: 0px;\n margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight*/\n"])), token('color.background.discovery', P50), gridSize() * 2, gridSize() * 2, gridSize() * 2, gridSize() * 0.5);
|
|
13
|
+
export var Card = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n background-color: ", ";\n overflow: hidden;\n line-height: 21px;\n padding-top: ", "px;\n padding-bottom: ", "px;\n padding-left: ", "px;\n padding-right: 0px;\n margin-top: -", "px; /* Negative margin is used to fill the entire top of the mention dropdown with background colour of highlight */\n"])), token('color.background.discovery', P50), gridSize() * 2, gridSize() * 2, gridSize() * 2, gridSize() * 0.5);
|
|
14
14
|
export var Content = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n max-width: 290px;\n display: flex;\n"])));
|
|
15
15
|
export var Section = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
|
|
16
16
|
export var Aside = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n opacity: 0.8;\n"])));
|
package/dist/esm/version.json
CHANGED
|
@@ -16,6 +16,8 @@ export declare type OwnProps = {
|
|
|
16
16
|
export declare type Props = OwnProps & WithAnalyticsEventsProps;
|
|
17
17
|
export declare class MentionInternal extends React.PureComponent<Props, {}> {
|
|
18
18
|
private hoverTimeout?;
|
|
19
|
+
constructor(props: Props);
|
|
20
|
+
componentDidMount(): void;
|
|
19
21
|
private handleOnClick;
|
|
20
22
|
private handleOnMouseEnter;
|
|
21
23
|
private handleOnMouseLeave;
|
|
@@ -24,6 +26,6 @@ export declare class MentionInternal extends React.PureComponent<Props, {}> {
|
|
|
24
26
|
renderUnknownUserError(id: string): JSX.Element;
|
|
25
27
|
render(): JSX.Element;
|
|
26
28
|
}
|
|
27
|
-
declare const Mention: React.ForwardRefExoticComponent<
|
|
29
|
+
declare const Mention: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
|
|
28
30
|
declare type Mention = MentionInternal;
|
|
29
31
|
export default Mention;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ConcurrentExperience } from '@atlaskit/ufo';
|
|
3
|
+
export declare const mentionRenderedUfoExperience: ConcurrentExperience;
|
|
4
|
+
export declare class UfoErrorBoundary extends React.Component<{
|
|
5
|
+
id: string;
|
|
6
|
+
}> {
|
|
7
|
+
componentDidCatch(): void;
|
|
8
|
+
render(): React.ReactNode;
|
|
9
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const DescriptionBylineStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
|
|
2
|
+
export declare const DescriptionBylineStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
@@ -11,12 +11,12 @@ export interface NameSectionStyleProps {
|
|
|
11
11
|
export interface InfoSectionStyleProps {
|
|
12
12
|
restricted?: boolean;
|
|
13
13
|
}
|
|
14
|
-
export declare const RowStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
14
|
+
export declare const RowStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
15
15
|
export declare const AvatarStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, AvatarSectionStyleProps, any>;
|
|
16
16
|
export declare const NameSectionStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NameSectionStyleProps, any>;
|
|
17
|
-
export declare const FullNameStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
|
|
17
|
+
export declare const FullNameStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
18
18
|
export declare const InfoSectionStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, InfoSectionStyleProps, any>;
|
|
19
|
-
export declare const TimeStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
19
|
+
export declare const TimeStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
20
20
|
export declare const MENTION_ITEM_HEIGHT = 48;
|
|
21
21
|
export declare const MentionItemStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MentionItemStyleProps, any>;
|
|
22
|
-
export declare const AccessSectionStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
22
|
+
export declare const AccessSectionStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const MentionListErrorStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
3
|
-
export declare const GenericErrorVisualStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
4
|
-
export declare const MentionListErrorHeadlineStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
5
|
-
export declare const MentionListAdviceStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
2
|
+
export declare const MentionListErrorStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
3
|
+
export declare const GenericErrorVisualStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
4
|
+
export declare const MentionListErrorHeadlineStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
5
|
+
export declare const MentionListAdviceStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
@@ -72,8 +72,8 @@ export declare class MentionPicker extends React.PureComponent<Props & WithAnaly
|
|
|
72
72
|
private handleMentionListRef;
|
|
73
73
|
render(): JSX.Element;
|
|
74
74
|
}
|
|
75
|
-
export declare const MentionPickerWithAnalytics: React.ForwardRefExoticComponent<
|
|
75
|
+
export declare const MentionPickerWithAnalytics: React.ForwardRefExoticComponent<Omit<Pick<import("react-intl-next").WithIntlProps<React.PropsWithChildren<Props & WithAnalyticsEventsProps & {
|
|
76
76
|
intl: IntlShape;
|
|
77
|
-
}>>, "children" | "
|
|
77
|
+
}>>, "children" | "createAnalyticsEvent" | keyof Props | "forwardedRef"> & React.RefAttributes<any>, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
|
|
78
78
|
export declare type MentionPickerWithAnalytics = MentionPicker;
|
|
79
79
|
export default MentionPickerWithAnalytics;
|
|
@@ -3,4 +3,4 @@ export interface MentionPickerStyleProps {
|
|
|
3
3
|
visible?: boolean | string;
|
|
4
4
|
}
|
|
5
5
|
export declare const MentionPickerStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MentionPickerStyleProps, any>;
|
|
6
|
-
export declare const MentionPickerInfoStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
6
|
+
export declare const MentionPickerInfoStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
@@ -45,6 +45,6 @@ export declare class ResourcedMentionListWithoutAnalytics extends React.PureComp
|
|
|
45
45
|
private mentionsHighlight;
|
|
46
46
|
render(): JSX.Element;
|
|
47
47
|
}
|
|
48
|
-
declare const ResourcedMentionList: React.ForwardRefExoticComponent<
|
|
48
|
+
declare const ResourcedMentionList: React.ForwardRefExoticComponent<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
|
|
49
49
|
declare type ResourcedMentionList = ResourcedMentionListWithoutAnalytics;
|
|
50
50
|
export default ResourcedMentionList;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const ScrollableStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
2
|
+
export declare const ScrollableStyle: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
@@ -28,7 +28,7 @@ export declare class TeamMentionHighlightInternal extends React.Component<Props,
|
|
|
28
28
|
onCloseClick: () => void;
|
|
29
29
|
render(): JSX.Element | null;
|
|
30
30
|
}
|
|
31
|
-
declare const TeamMentionHighlight: React.ForwardRefExoticComponent<Pick<
|
|
31
|
+
declare const TeamMentionHighlight: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps>, "onClose" | "onCreateTeamLinkClick" | "onViewed"> & Partial<Pick<Omit<Props, keyof WithAnalyticsEventsProps>, "createTeamLink">> & Partial<Pick<{
|
|
32
32
|
createTeamLink: string;
|
|
33
33
|
}, never>> & React.RefAttributes<any>>;
|
|
34
34
|
declare type TeamMentionHighlight = TeamMentionHighlightInternal;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const LazyTeamMentionHighlight: React.LazyExoticComponent<React.ForwardRefExoticComponent<Pick<
|
|
2
|
+
export declare const LazyTeamMentionHighlight: React.LazyExoticComponent<React.ForwardRefExoticComponent<Pick<Omit<import("./").Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "onClose" | "onCreateTeamLinkClick" | "onViewed"> & Partial<Pick<Omit<import("./").Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "createTeamLink">> & Partial<Pick<{
|
|
3
3
|
createTeamLink: string;
|
|
4
4
|
}, never>> & React.RefAttributes<any>>>;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const Actions: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
3
|
-
export declare const Title: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
4
|
-
export declare const Heading: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
5
|
-
export declare const Card: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
6
|
-
export declare const Content: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
7
|
-
export declare const Section: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
8
|
-
export declare const Aside: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
9
|
-
export declare const Body: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
2
|
+
export declare const Actions: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
3
|
+
export declare const Title: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("@emotion/styled-base/types/helper").Overwrapped<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@atlaskit/theme").ThemeProps | undefined>, keyof import("react").ClassAttributes<any>>, any>;
|
|
4
|
+
export declare const Heading: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
5
|
+
export declare const Card: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
6
|
+
export declare const Content: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
7
|
+
export declare const Section: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
8
|
+
export declare const Aside: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
|
9
|
+
export declare const Body: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("@emotion/styled-base/types/helper").Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").ClassAttributes<any>>, any>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/mention",
|
|
3
|
-
"version": "21.0.
|
|
3
|
+
"version": "21.0.3",
|
|
4
4
|
"description": "A React component used to display user profiles in a list for 'Mention' functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,13 +29,14 @@
|
|
|
29
29
|
"@atlaskit/analytics-gas-types": "^5.0.0",
|
|
30
30
|
"@atlaskit/analytics-next": "^8.0.0",
|
|
31
31
|
"@atlaskit/avatar": "^20.5.0",
|
|
32
|
-
"@atlaskit/button": "^16.
|
|
32
|
+
"@atlaskit/button": "^16.3.0",
|
|
33
33
|
"@atlaskit/focus-ring": "^1.0.0",
|
|
34
34
|
"@atlaskit/icon": "^21.10.0",
|
|
35
35
|
"@atlaskit/lozenge": "^11.0.0",
|
|
36
36
|
"@atlaskit/theme": "^12.1.0",
|
|
37
|
-
"@atlaskit/tokens": "^0.
|
|
37
|
+
"@atlaskit/tokens": "^0.9.0",
|
|
38
38
|
"@atlaskit/tooltip": "^17.5.0",
|
|
39
|
+
"@atlaskit/ufo": "^0.1.0",
|
|
39
40
|
"@atlaskit/util-service-support": "^6.1.0",
|
|
40
41
|
"@babel/runtime": "^7.0.0",
|
|
41
42
|
"@emotion/core": "^10.0.9",
|
|
@@ -51,8 +52,8 @@
|
|
|
51
52
|
"devDependencies": {
|
|
52
53
|
"@atlaskit/adf-utils": "^16.0.0",
|
|
53
54
|
"@atlaskit/docs": "^9.0.0",
|
|
54
|
-
"@atlaskit/editor-core": "^
|
|
55
|
-
"@atlaskit/editor-test-helpers": "^
|
|
55
|
+
"@atlaskit/editor-core": "^164.0.0",
|
|
56
|
+
"@atlaskit/editor-test-helpers": "^17.0.0",
|
|
56
57
|
"@atlaskit/elements-test-helpers": "^0.7.0",
|
|
57
58
|
"@atlaskit/section-message": "^6.0.0",
|
|
58
59
|
"@atlaskit/ssr": "*",
|
|
@@ -70,10 +71,9 @@
|
|
|
70
71
|
"query-string": "^6.14.1",
|
|
71
72
|
"react": "^16.8.0",
|
|
72
73
|
"react-dom": "^16.8.0",
|
|
73
|
-
"react-intl": "^2.6.0",
|
|
74
74
|
"react-intl-next": "npm:react-intl@^5.18.1",
|
|
75
75
|
"serialize-javascript": "^5.0.1",
|
|
76
|
-
"typescript": "
|
|
76
|
+
"typescript": "4.2.4"
|
|
77
77
|
},
|
|
78
78
|
"keywords": [
|
|
79
79
|
"ui",
|