@atlaskit/emoji 69.7.0 → 69.7.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.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/components/common/ResourcedEmojiComponent.js +19 -1
- package/dist/cjs/util/analytics/analytics.js +1 -1
- package/dist/es2019/components/common/ResourcedEmojiComponent.js +18 -1
- package/dist/es2019/util/analytics/analytics.js +1 -1
- package/dist/esm/components/common/ResourcedEmojiComponent.js +19 -1
- package/dist/esm/util/analytics/analytics.js +1 -1
- package/dist/types/components/common/ResourcedEmojiComponent.d.ts +7 -1
- package/dist/types-ts4.5/components/common/ResourcedEmojiComponent.d.ts +7 -1
- package/package.json +7 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/emoji
|
|
2
2
|
|
|
3
|
+
## 69.7.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 69.7.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`acf73d58208f1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/acf73d58208f1) -
|
|
14
|
+
If the optimisticImageURL is provided for the emoji page title, do not swap to the media reference
|
|
15
|
+
once it is loaded
|
|
16
|
+
|
|
3
17
|
## 69.7.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -43,6 +43,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
|
|
|
43
43
|
_ref$optimisticImageU = _ref.optimisticImageURL,
|
|
44
44
|
optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU,
|
|
45
45
|
editorEmoji = _ref.editorEmoji,
|
|
46
|
+
_ref$pageTitleEmoji = _ref.pageTitleEmoji,
|
|
47
|
+
pageTitleEmoji = _ref$pageTitleEmoji === void 0 ? false : _ref$pageTitleEmoji,
|
|
46
48
|
placeholderXcss = _ref.placeholderXcss,
|
|
47
49
|
onEmojiLoadSuccess = _ref.onEmojiLoadSuccess,
|
|
48
50
|
onEmojiLoadFail = _ref.onEmojiLoadFail;
|
|
@@ -176,6 +178,22 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
|
|
|
176
178
|
return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
|
|
177
179
|
}, [emoji, loaded, optimisticImageURL, imageLoadError]);
|
|
178
180
|
var optimisticEmojiDescription = (0, _react.useMemo)(function () {
|
|
181
|
+
// reduce blast radius by targeting page title
|
|
182
|
+
if (pageTitleEmoji && optimisticImageURL && (0, _platformFeatureFlags.fg)('platform_emoji_prevent_img_src_changing')) {
|
|
183
|
+
return {
|
|
184
|
+
id: id,
|
|
185
|
+
shortName: shortName,
|
|
186
|
+
fallback: fallback,
|
|
187
|
+
type: '',
|
|
188
|
+
category: '',
|
|
189
|
+
searchable: true,
|
|
190
|
+
representation: {
|
|
191
|
+
height: fitToHeight || _constants.defaultEmojiHeight,
|
|
192
|
+
width: fitToHeight || _constants.defaultEmojiHeight,
|
|
193
|
+
imagePath: optimisticImageURL
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
}
|
|
179
197
|
if (optimisticImageURL) {
|
|
180
198
|
if (emoji && ((0, _typeHelpers.isImageRepresentation)(emoji.representation) || (0, _typeHelpers.isMediaRepresentation)(emoji === null || emoji === void 0 ? void 0 : emoji.representation))) {
|
|
181
199
|
var _emoji$representation = emoji.representation,
|
|
@@ -205,7 +223,7 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
|
|
|
205
223
|
}
|
|
206
224
|
}
|
|
207
225
|
return emoji;
|
|
208
|
-
}, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName]);
|
|
226
|
+
}, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji]);
|
|
209
227
|
var handleOnLoadError = (0, _react.useCallback)(function (emojiId) {
|
|
210
228
|
setImageLoadError(true);
|
|
211
229
|
var reason = 'load error';
|
|
@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
|
|
|
20
20
|
actionSubjectId: actionSubjectId,
|
|
21
21
|
attributes: _objectSpread({
|
|
22
22
|
packageName: "@atlaskit/emoji",
|
|
23
|
-
packageVersion: "69.
|
|
23
|
+
packageVersion: "69.7.1"
|
|
24
24
|
}, attributes)
|
|
25
25
|
};
|
|
26
26
|
};
|
|
@@ -23,6 +23,7 @@ export const ResourcedEmojiComponent = ({
|
|
|
23
23
|
optimistic = false,
|
|
24
24
|
optimisticImageURL = undefined,
|
|
25
25
|
editorEmoji,
|
|
26
|
+
pageTitleEmoji = false,
|
|
26
27
|
placeholderXcss,
|
|
27
28
|
onEmojiLoadSuccess,
|
|
28
29
|
onEmojiLoadFail
|
|
@@ -129,6 +130,22 @@ export const ResourcedEmojiComponent = ({
|
|
|
129
130
|
return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
|
|
130
131
|
}, [emoji, loaded, optimisticImageURL, imageLoadError]);
|
|
131
132
|
const optimisticEmojiDescription = useMemo(() => {
|
|
133
|
+
// reduce blast radius by targeting page title
|
|
134
|
+
if (pageTitleEmoji && optimisticImageURL && fg('platform_emoji_prevent_img_src_changing')) {
|
|
135
|
+
return {
|
|
136
|
+
id,
|
|
137
|
+
shortName,
|
|
138
|
+
fallback,
|
|
139
|
+
type: '',
|
|
140
|
+
category: '',
|
|
141
|
+
searchable: true,
|
|
142
|
+
representation: {
|
|
143
|
+
height: fitToHeight || defaultEmojiHeight,
|
|
144
|
+
width: fitToHeight || defaultEmojiHeight,
|
|
145
|
+
imagePath: optimisticImageURL
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
}
|
|
132
149
|
if (optimisticImageURL) {
|
|
133
150
|
if (emoji && (isImageRepresentation(emoji.representation) || isMediaRepresentation(emoji === null || emoji === void 0 ? void 0 : emoji.representation))) {
|
|
134
151
|
const {
|
|
@@ -160,7 +177,7 @@ export const ResourcedEmojiComponent = ({
|
|
|
160
177
|
}
|
|
161
178
|
}
|
|
162
179
|
return emoji;
|
|
163
|
-
}, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName]);
|
|
180
|
+
}, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji]);
|
|
164
181
|
const handleOnLoadError = useCallback(emojiId => {
|
|
165
182
|
setImageLoadError(true);
|
|
166
183
|
const reason = 'load error';
|
|
@@ -34,6 +34,8 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
|
|
|
34
34
|
_ref$optimisticImageU = _ref.optimisticImageURL,
|
|
35
35
|
optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU,
|
|
36
36
|
editorEmoji = _ref.editorEmoji,
|
|
37
|
+
_ref$pageTitleEmoji = _ref.pageTitleEmoji,
|
|
38
|
+
pageTitleEmoji = _ref$pageTitleEmoji === void 0 ? false : _ref$pageTitleEmoji,
|
|
37
39
|
placeholderXcss = _ref.placeholderXcss,
|
|
38
40
|
onEmojiLoadSuccess = _ref.onEmojiLoadSuccess,
|
|
39
41
|
onEmojiLoadFail = _ref.onEmojiLoadFail;
|
|
@@ -167,6 +169,22 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
|
|
|
167
169
|
return ResourcedEmojiComponentRenderStatesEnum.EMOJI;
|
|
168
170
|
}, [emoji, loaded, optimisticImageURL, imageLoadError]);
|
|
169
171
|
var optimisticEmojiDescription = useMemo(function () {
|
|
172
|
+
// reduce blast radius by targeting page title
|
|
173
|
+
if (pageTitleEmoji && optimisticImageURL && fg('platform_emoji_prevent_img_src_changing')) {
|
|
174
|
+
return {
|
|
175
|
+
id: id,
|
|
176
|
+
shortName: shortName,
|
|
177
|
+
fallback: fallback,
|
|
178
|
+
type: '',
|
|
179
|
+
category: '',
|
|
180
|
+
searchable: true,
|
|
181
|
+
representation: {
|
|
182
|
+
height: fitToHeight || defaultEmojiHeight,
|
|
183
|
+
width: fitToHeight || defaultEmojiHeight,
|
|
184
|
+
imagePath: optimisticImageURL
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
}
|
|
170
188
|
if (optimisticImageURL) {
|
|
171
189
|
if (emoji && (isImageRepresentation(emoji.representation) || isMediaRepresentation(emoji === null || emoji === void 0 ? void 0 : emoji.representation))) {
|
|
172
190
|
var _emoji$representation = emoji.representation,
|
|
@@ -196,7 +214,7 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
|
|
|
196
214
|
}
|
|
197
215
|
}
|
|
198
216
|
return emoji;
|
|
199
|
-
}, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName]);
|
|
217
|
+
}, [emoji, optimisticImageURL, fallback, fitToHeight, id, shortName, pageTitleEmoji]);
|
|
200
218
|
var handleOnLoadError = useCallback(function (emojiId) {
|
|
201
219
|
setImageLoadError(true);
|
|
202
220
|
var reason = 'load error';
|
|
@@ -13,7 +13,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
|
|
|
13
13
|
actionSubjectId: actionSubjectId,
|
|
14
14
|
attributes: _objectSpread({
|
|
15
15
|
packageName: "@atlaskit/emoji",
|
|
16
|
-
packageVersion: "69.
|
|
16
|
+
packageVersion: "69.7.1"
|
|
17
17
|
}, attributes)
|
|
18
18
|
};
|
|
19
19
|
};
|
|
@@ -40,6 +40,12 @@ export interface BaseResourcedEmojiProps {
|
|
|
40
40
|
* Defaults to `undefined`.
|
|
41
41
|
*/
|
|
42
42
|
optimisticImageURL?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Indicates that this emoji is being rendered in a page title context.
|
|
45
|
+
* This is used to adjust certain behaviors to reduce TTVC issues.
|
|
46
|
+
* Defaults to `false`.
|
|
47
|
+
*/
|
|
48
|
+
pageTitleEmoji?: boolean;
|
|
43
49
|
/**
|
|
44
50
|
* allows custom styling to the placeholder component while the emoji is loading.
|
|
45
51
|
*/
|
|
@@ -64,5 +70,5 @@ export interface Props extends BaseResourcedEmojiProps {
|
|
|
64
70
|
*/
|
|
65
71
|
onEmojiLoadSuccess?: EmojiLoadSuccessCallback;
|
|
66
72
|
}
|
|
67
|
-
export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
|
|
73
|
+
export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, pageTitleEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
|
|
68
74
|
export default ResourcedEmojiComponent;
|
|
@@ -40,6 +40,12 @@ export interface BaseResourcedEmojiProps {
|
|
|
40
40
|
* Defaults to `undefined`.
|
|
41
41
|
*/
|
|
42
42
|
optimisticImageURL?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Indicates that this emoji is being rendered in a page title context.
|
|
45
|
+
* This is used to adjust certain behaviors to reduce TTVC issues.
|
|
46
|
+
* Defaults to `false`.
|
|
47
|
+
*/
|
|
48
|
+
pageTitleEmoji?: boolean;
|
|
43
49
|
/**
|
|
44
50
|
* allows custom styling to the placeholder component while the emoji is loading.
|
|
45
51
|
*/
|
|
@@ -64,5 +70,5 @@ export interface Props extends BaseResourcedEmojiProps {
|
|
|
64
70
|
*/
|
|
65
71
|
onEmojiLoadSuccess?: EmojiLoadSuccessCallback;
|
|
66
72
|
}
|
|
67
|
-
export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
|
|
73
|
+
export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, pageTitleEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
|
|
68
74
|
export default ResourcedEmojiComponent;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/emoji",
|
|
3
|
-
"version": "69.7.
|
|
3
|
+
"version": "69.7.2",
|
|
4
4
|
"description": "Fabric emoji React components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
"@atlaskit/button": "^23.6.0",
|
|
40
40
|
"@atlaskit/css": "^0.15.0",
|
|
41
41
|
"@atlaskit/heading": "^5.2.0",
|
|
42
|
-
"@atlaskit/icon": "^
|
|
43
|
-
"@atlaskit/media-client": "^35.
|
|
42
|
+
"@atlaskit/icon": "^29.0.0",
|
|
43
|
+
"@atlaskit/media-client": "^35.6.0",
|
|
44
44
|
"@atlaskit/media-client-react": "^4.1.0",
|
|
45
45
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
46
46
|
"@atlaskit/platform-feature-flags-react": "^0.4.0",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@atlaskit/spinner": "^19.0.0",
|
|
50
50
|
"@atlaskit/textfield": "^8.0.0",
|
|
51
51
|
"@atlaskit/theme": "^21.0.0",
|
|
52
|
-
"@atlaskit/tmp-editor-statsig": "^13.
|
|
52
|
+
"@atlaskit/tmp-editor-statsig": "^13.35.0",
|
|
53
53
|
"@atlaskit/tokens": "^8.0.0",
|
|
54
54
|
"@atlaskit/tooltip": "^20.8.0",
|
|
55
55
|
"@atlaskit/ufo": "^0.4.0",
|
|
@@ -123,6 +123,9 @@
|
|
|
123
123
|
},
|
|
124
124
|
"platform_emoji_width_auto_fittoheight": {
|
|
125
125
|
"type": "boolean"
|
|
126
|
+
},
|
|
127
|
+
"platform_emoji_prevent_img_src_changing": {
|
|
128
|
+
"type": "boolean"
|
|
126
129
|
}
|
|
127
130
|
},
|
|
128
131
|
"scripts": {
|