@atlaskit/emoji 71.12.0 → 71.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/dist/cjs/components/picker/CategorySelector.js +27 -0
- package/dist/cjs/components/picker/EmojiPickerListSearch.js +11 -0
- package/dist/cjs/util/analytics/analytics.js +1 -1
- package/dist/es2019/components/picker/CategorySelector.js +27 -0
- package/dist/es2019/components/picker/EmojiPickerListSearch.js +11 -0
- package/dist/es2019/util/analytics/analytics.js +1 -1
- package/dist/esm/components/picker/CategorySelector.js +27 -0
- package/dist/esm/components/picker/EmojiPickerListSearch.js +11 -0
- package/dist/esm/util/analytics/analytics.js +1 -1
- package/package.json +9 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/emoji
|
|
2
2
|
|
|
3
|
+
## 71.13.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`6177789741cb4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6177789741cb4) -
|
|
8
|
+
Correct emoji picker initial focus
|
|
9
|
+
|
|
10
|
+
## 71.13.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- [`5228612e884f4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5228612e884f4) -
|
|
15
|
+
Update i18n NPM package versions for editor,editor-extensions,activity-platform,media,elements
|
|
16
|
+
(Group 3)
|
|
17
|
+
|
|
3
18
|
## 71.12.0
|
|
4
19
|
|
|
5
20
|
### Minor Changes
|
|
@@ -32,6 +32,14 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
|
|
|
32
32
|
var isEnabled = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
|
|
33
33
|
return isEnabled;
|
|
34
34
|
};
|
|
35
|
+
var isEmojiPickerInitialFocusFixEnabled = function isEmojiPickerInitialFocusFixEnabled() {
|
|
36
|
+
if (!_featureGateJsClient.default.initializeCompleted()) {
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// eslint-disable-next-line @atlaskit/platform/use-recommended-utils
|
|
41
|
+
return _featureGateJsClient.default.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
|
|
42
|
+
};
|
|
35
43
|
var styles = {
|
|
36
44
|
commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
|
|
37
45
|
commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qu2gc _n3tdu2gc _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
|
|
@@ -77,6 +85,7 @@ var CategorySelector = function CategorySelector(props) {
|
|
|
77
85
|
currentFocus = _useState4[0],
|
|
78
86
|
setCurrentFocus = _useState4[1];
|
|
79
87
|
var categoryRef = (0, _react.useRef)(null);
|
|
88
|
+
var hasSetInitialFocus = (0, _react.useRef)(false);
|
|
80
89
|
var prevDynamicCategories = (0, _usePrevious.usePrevious)(dynamicCategories);
|
|
81
90
|
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
82
91
|
formatMessage = _useIntl.formatMessage;
|
|
@@ -95,6 +104,24 @@ var CategorySelector = function CategorySelector(props) {
|
|
|
95
104
|
categoryToFocus && categoryToFocus.focus();
|
|
96
105
|
setCurrentFocus(index);
|
|
97
106
|
}, [categoryRef, setCurrentFocus]);
|
|
107
|
+
(0, _react.useEffect)(function () {
|
|
108
|
+
var _categoryRef$current2, _categoryRef$current3;
|
|
109
|
+
if (hasSetInitialFocus.current || !isEmojiPickerInitialFocusFixEnabled() || !activeCategoryId) {
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
var activeCategoryIndex = categories.indexOf(activeCategoryId);
|
|
113
|
+
if (activeCategoryIndex === -1) {
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
var picker = (_categoryRef$current2 = categoryRef.current) === null || _categoryRef$current2 === void 0 ? void 0 : _categoryRef$current2.closest('[data-emoji-picker-container]');
|
|
117
|
+
var activeElement = (_categoryRef$current3 = categoryRef.current) === null || _categoryRef$current3 === void 0 ? void 0 : _categoryRef$current3.ownerDocument.activeElement;
|
|
118
|
+
if (activeElement && picker !== null && picker !== void 0 && picker.contains(activeElement)) {
|
|
119
|
+
hasSetInitialFocus.current = true;
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
focusCategory(activeCategoryIndex);
|
|
123
|
+
hasSetInitialFocus.current = true;
|
|
124
|
+
}, [activeCategoryId, categories, focusCategory]);
|
|
98
125
|
var handleKeyDown = function handleKeyDown(e) {
|
|
99
126
|
if (!_constants.CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
|
|
100
127
|
return;
|
|
@@ -29,6 +29,14 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
|
|
|
29
29
|
var isEnabled = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
|
|
30
30
|
return isEnabled;
|
|
31
31
|
};
|
|
32
|
+
var isEmojiPickerInitialFocusFixEnabled = function isEmojiPickerInitialFocusFixEnabled() {
|
|
33
|
+
if (!_featureGateJsClient.default.initializeCompleted()) {
|
|
34
|
+
return false;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// eslint-disable-next-line @atlaskit/platform/use-recommended-utils
|
|
38
|
+
return _featureGateJsClient.default.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
|
|
39
|
+
};
|
|
32
40
|
var input = null;
|
|
33
41
|
var inputNew = null;
|
|
34
42
|
var textFieldWrapperNew = null;
|
|
@@ -65,6 +73,9 @@ var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPicker
|
|
|
65
73
|
debouncedSearch(e.target.value);
|
|
66
74
|
};
|
|
67
75
|
(0, _react.useLayoutEffect)(function () {
|
|
76
|
+
if (isEmojiPickerInitialFocusFixEnabled()) {
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
68
79
|
requestAnimationFrame(function () {
|
|
69
80
|
if (textRef) {
|
|
70
81
|
var _textRef$current;
|
|
@@ -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: "71.
|
|
23
|
+
packageVersion: "71.13.0"
|
|
24
24
|
}, attributes)
|
|
25
25
|
};
|
|
26
26
|
};
|
|
@@ -22,6 +22,14 @@ const isRefreshEmojiPickerEnabled = () => {
|
|
|
22
22
|
const isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
|
|
23
23
|
return isEnabled;
|
|
24
24
|
};
|
|
25
|
+
const isEmojiPickerInitialFocusFixEnabled = () => {
|
|
26
|
+
if (!FeatureGates.initializeCompleted()) {
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// eslint-disable-next-line @atlaskit/platform/use-recommended-utils
|
|
31
|
+
return FeatureGates.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
|
|
32
|
+
};
|
|
25
33
|
const styles = {
|
|
26
34
|
commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
|
|
27
35
|
commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qu2gc _n3tdu2gc _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
|
|
@@ -55,6 +63,7 @@ const CategorySelector = props => {
|
|
|
55
63
|
const [categories, setCategories] = useState(addNewCategories(defaultCategories, dynamicCategories));
|
|
56
64
|
const [currentFocus, setCurrentFocus] = useState(0);
|
|
57
65
|
const categoryRef = useRef(null);
|
|
66
|
+
const hasSetInitialFocus = useRef(false);
|
|
58
67
|
const prevDynamicCategories = usePrevious(dynamicCategories);
|
|
59
68
|
const {
|
|
60
69
|
formatMessage
|
|
@@ -74,6 +83,24 @@ const CategorySelector = props => {
|
|
|
74
83
|
categoryToFocus && categoryToFocus.focus();
|
|
75
84
|
setCurrentFocus(index);
|
|
76
85
|
}, [categoryRef, setCurrentFocus]);
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
var _categoryRef$current2, _categoryRef$current3;
|
|
88
|
+
if (hasSetInitialFocus.current || !isEmojiPickerInitialFocusFixEnabled() || !activeCategoryId) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
const activeCategoryIndex = categories.indexOf(activeCategoryId);
|
|
92
|
+
if (activeCategoryIndex === -1) {
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
const picker = (_categoryRef$current2 = categoryRef.current) === null || _categoryRef$current2 === void 0 ? void 0 : _categoryRef$current2.closest('[data-emoji-picker-container]');
|
|
96
|
+
const activeElement = (_categoryRef$current3 = categoryRef.current) === null || _categoryRef$current3 === void 0 ? void 0 : _categoryRef$current3.ownerDocument.activeElement;
|
|
97
|
+
if (activeElement && picker !== null && picker !== void 0 && picker.contains(activeElement)) {
|
|
98
|
+
hasSetInitialFocus.current = true;
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
focusCategory(activeCategoryIndex);
|
|
102
|
+
hasSetInitialFocus.current = true;
|
|
103
|
+
}, [activeCategoryId, categories, focusCategory]);
|
|
77
104
|
const handleKeyDown = e => {
|
|
78
105
|
if (!CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
|
|
79
106
|
return;
|
|
@@ -19,6 +19,14 @@ const isRefreshEmojiPickerEnabled = () => {
|
|
|
19
19
|
const isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
|
|
20
20
|
return isEnabled;
|
|
21
21
|
};
|
|
22
|
+
const isEmojiPickerInitialFocusFixEnabled = () => {
|
|
23
|
+
if (!FeatureGates.initializeCompleted()) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// eslint-disable-next-line @atlaskit/platform/use-recommended-utils
|
|
28
|
+
return FeatureGates.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
|
|
29
|
+
};
|
|
22
30
|
const input = null;
|
|
23
31
|
const inputNew = null;
|
|
24
32
|
const textFieldWrapperNew = null;
|
|
@@ -52,6 +60,9 @@ export const EmojiPickerListSearch = props => {
|
|
|
52
60
|
debouncedSearch(e.target.value);
|
|
53
61
|
};
|
|
54
62
|
useLayoutEffect(() => {
|
|
63
|
+
if (isEmojiPickerInitialFocusFixEnabled()) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
55
66
|
requestAnimationFrame(() => {
|
|
56
67
|
if (textRef) {
|
|
57
68
|
var _textRef$current;
|
|
@@ -23,6 +23,14 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
|
|
|
23
23
|
var isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
|
|
24
24
|
return isEnabled;
|
|
25
25
|
};
|
|
26
|
+
var isEmojiPickerInitialFocusFixEnabled = function isEmojiPickerInitialFocusFixEnabled() {
|
|
27
|
+
if (!FeatureGates.initializeCompleted()) {
|
|
28
|
+
return false;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// eslint-disable-next-line @atlaskit/platform/use-recommended-utils
|
|
32
|
+
return FeatureGates.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
|
|
33
|
+
};
|
|
26
34
|
var styles = {
|
|
27
35
|
commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
|
|
28
36
|
commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qu2gc _n3tdu2gc _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
|
|
@@ -68,6 +76,7 @@ var CategorySelector = function CategorySelector(props) {
|
|
|
68
76
|
currentFocus = _useState4[0],
|
|
69
77
|
setCurrentFocus = _useState4[1];
|
|
70
78
|
var categoryRef = useRef(null);
|
|
79
|
+
var hasSetInitialFocus = useRef(false);
|
|
71
80
|
var prevDynamicCategories = usePrevious(dynamicCategories);
|
|
72
81
|
var _useIntl = useIntl(),
|
|
73
82
|
formatMessage = _useIntl.formatMessage;
|
|
@@ -86,6 +95,24 @@ var CategorySelector = function CategorySelector(props) {
|
|
|
86
95
|
categoryToFocus && categoryToFocus.focus();
|
|
87
96
|
setCurrentFocus(index);
|
|
88
97
|
}, [categoryRef, setCurrentFocus]);
|
|
98
|
+
useEffect(function () {
|
|
99
|
+
var _categoryRef$current2, _categoryRef$current3;
|
|
100
|
+
if (hasSetInitialFocus.current || !isEmojiPickerInitialFocusFixEnabled() || !activeCategoryId) {
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
var activeCategoryIndex = categories.indexOf(activeCategoryId);
|
|
104
|
+
if (activeCategoryIndex === -1) {
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
var picker = (_categoryRef$current2 = categoryRef.current) === null || _categoryRef$current2 === void 0 ? void 0 : _categoryRef$current2.closest('[data-emoji-picker-container]');
|
|
108
|
+
var activeElement = (_categoryRef$current3 = categoryRef.current) === null || _categoryRef$current3 === void 0 ? void 0 : _categoryRef$current3.ownerDocument.activeElement;
|
|
109
|
+
if (activeElement && picker !== null && picker !== void 0 && picker.contains(activeElement)) {
|
|
110
|
+
hasSetInitialFocus.current = true;
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
focusCategory(activeCategoryIndex);
|
|
114
|
+
hasSetInitialFocus.current = true;
|
|
115
|
+
}, [activeCategoryId, categories, focusCategory]);
|
|
89
116
|
var handleKeyDown = function handleKeyDown(e) {
|
|
90
117
|
if (!CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
|
|
91
118
|
return;
|
|
@@ -20,6 +20,14 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
|
|
|
20
20
|
var isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
|
|
21
21
|
return isEnabled;
|
|
22
22
|
};
|
|
23
|
+
var isEmojiPickerInitialFocusFixEnabled = function isEmojiPickerInitialFocusFixEnabled() {
|
|
24
|
+
if (!FeatureGates.initializeCompleted()) {
|
|
25
|
+
return false;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// eslint-disable-next-line @atlaskit/platform/use-recommended-utils
|
|
29
|
+
return FeatureGates.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
|
|
30
|
+
};
|
|
23
31
|
var input = null;
|
|
24
32
|
var inputNew = null;
|
|
25
33
|
var textFieldWrapperNew = null;
|
|
@@ -56,6 +64,9 @@ export var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
|
|
|
56
64
|
debouncedSearch(e.target.value);
|
|
57
65
|
};
|
|
58
66
|
useLayoutEffect(function () {
|
|
67
|
+
if (isEmojiPickerInitialFocusFixEnabled()) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
59
70
|
requestAnimationFrame(function () {
|
|
60
71
|
if (textRef) {
|
|
61
72
|
var _textRef$current;
|
|
@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
|
|
|
14
14
|
actionSubjectId: actionSubjectId,
|
|
15
15
|
attributes: _objectSpread({
|
|
16
16
|
packageName: "@atlaskit/emoji",
|
|
17
|
-
packageVersion: "71.
|
|
17
|
+
packageVersion: "71.13.0"
|
|
18
18
|
}, attributes)
|
|
19
19
|
};
|
|
20
20
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/emoji",
|
|
3
|
-
"version": "71.
|
|
3
|
+
"version": "71.13.1",
|
|
4
4
|
"description": "Fabric emoji React components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"access": "public"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@atlaskit/afm-i18n-platform-elements-emoji": "2.
|
|
32
|
+
"@atlaskit/afm-i18n-platform-elements-emoji": "2.196.0",
|
|
33
33
|
"@atlaskit/analytics-next": "^12.3.0",
|
|
34
34
|
"@atlaskit/browser-apis": "^1.2.0",
|
|
35
35
|
"@atlaskit/button": "^24.3.0",
|
|
@@ -45,13 +45,13 @@
|
|
|
45
45
|
"@atlaskit/media-client-react": "^6.1.0",
|
|
46
46
|
"@atlaskit/platform-feature-flags": "^2.1.0",
|
|
47
47
|
"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
|
|
48
|
-
"@atlaskit/primitives": "^22.
|
|
48
|
+
"@atlaskit/primitives": "^22.2.0",
|
|
49
49
|
"@atlaskit/radio": "^9.1.0",
|
|
50
50
|
"@atlaskit/spinner": "^20.1.0",
|
|
51
51
|
"@atlaskit/textfield": "^9.1.0",
|
|
52
52
|
"@atlaskit/theme": "^26.1.0",
|
|
53
|
-
"@atlaskit/tmp-editor-statsig": "^132.
|
|
54
|
-
"@atlaskit/tokens": "^16.
|
|
53
|
+
"@atlaskit/tmp-editor-statsig": "^132.6.0",
|
|
54
|
+
"@atlaskit/tokens": "^16.3.0",
|
|
55
55
|
"@atlaskit/tooltip": "^23.1.0",
|
|
56
56
|
"@atlaskit/ufo": "^1.0.0",
|
|
57
57
|
"@atlaskit/util-service-support": "^7.2.0",
|
|
@@ -145,6 +145,10 @@
|
|
|
145
145
|
}
|
|
146
146
|
},
|
|
147
147
|
"platform-experiments": {
|
|
148
|
+
"tef_fix_a11y_keyboard_control_emoji_picker": {
|
|
149
|
+
"param": "isEnabled",
|
|
150
|
+
"defaultValue": false
|
|
151
|
+
},
|
|
148
152
|
"platform_teamoji_26_refresh_emoji_picker": {
|
|
149
153
|
"param": "isEnabled",
|
|
150
154
|
"defaultValue": false
|