@atlaskit/emoji 71.5.1 → 71.5.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/components/common/EmojiActions.js +53 -4
  3. package/dist/cjs/components/common/ProductivityColorSelector.js +15 -1
  4. package/dist/cjs/util/analytics/analytics.js +1 -1
  5. package/dist/es2019/components/common/EmojiActions.js +52 -4
  6. package/dist/es2019/components/common/ProductivityColorSelector.js +13 -1
  7. package/dist/es2019/util/analytics/analytics.js +1 -1
  8. package/dist/esm/components/common/EmojiActions.js +53 -4
  9. package/dist/esm/components/common/ProductivityColorSelector.js +15 -1
  10. package/dist/esm/util/analytics/analytics.js +1 -1
  11. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/emoji
2
2
 
3
+ ## 71.5.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`2b14e887d34d1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2b14e887d34d1) -
8
+ Do not collapse emoji picker on color selected
9
+
10
+ ## 71.5.2
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 71.5.1
4
17
 
5
18
  ### Patch Changes
package/dist/cjs/components/common/EmojiActions.js CHANGED
@@ -52,6 +52,57 @@ var productivityColorPopup = null;
52
52
  var previewFooter = null;
53
53
  var previewFooterNew = null;
54
54
  var atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
55
+ var ProductivityColorPopupContent = function ProductivityColorPopupContent(_ref) {
56
+ var colorPreviewEmojis = _ref.colorPreviewEmojis,
57
+ focusSelectedColorOnMount = _ref.focusSelectedColorOnMount,
58
+ onColorSelected = _ref.onColorSelected,
59
+ selectedColor = _ref.selectedColor;
60
+ var popupRef = (0, _react.useRef)(null);
61
+ (0, _react.useEffect)(function () {
62
+ var popupElement = popupRef.current;
63
+ if (!popupElement) {
64
+ return;
65
+ }
66
+ var isProductivityColorInput = function isProductivityColorInput(target) {
67
+ return target instanceof HTMLInputElement && target.name === 'productivity-emoji-colour';
68
+ };
69
+ var stopNonInputDismissal = function stopNonInputDismissal(event) {
70
+ if (isProductivityColorInput(event.target)) {
71
+ return;
72
+ }
73
+ event.stopPropagation();
74
+ };
75
+ var stopNonInputDismissalBeforeDocument = function stopNonInputDismissalBeforeDocument(event) {
76
+ if (!(event.target instanceof Node) || !popupElement.contains(event.target) || isProductivityColorInput(event.target)) {
77
+ return;
78
+ }
79
+ event.stopPropagation();
80
+ };
81
+ window.addEventListener('pointerdown', stopNonInputDismissalBeforeDocument, true);
82
+ window.addEventListener('mousedown', stopNonInputDismissalBeforeDocument, true);
83
+ window.addEventListener('click', stopNonInputDismissalBeforeDocument, true);
84
+ popupElement.addEventListener('pointerdown', stopNonInputDismissal);
85
+ popupElement.addEventListener('mousedown', stopNonInputDismissal);
86
+ popupElement.addEventListener('click', stopNonInputDismissal);
87
+ return function () {
88
+ window.removeEventListener('pointerdown', stopNonInputDismissalBeforeDocument, true);
89
+ window.removeEventListener('mousedown', stopNonInputDismissalBeforeDocument, true);
90
+ window.removeEventListener('click', stopNonInputDismissalBeforeDocument, true);
91
+ popupElement.removeEventListener('pointerdown', stopNonInputDismissal);
92
+ popupElement.removeEventListener('mousedown', stopNonInputDismissal);
93
+ popupElement.removeEventListener('click', stopNonInputDismissal);
94
+ };
95
+ }, []);
96
+ return /*#__PURE__*/React.createElement("div", {
97
+ ref: popupRef,
98
+ className: (0, _runtime.ax)(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
99
+ }, /*#__PURE__*/React.createElement(_ProductivityColorSelector.default, {
100
+ colorPreviewEmojis: colorPreviewEmojis,
101
+ focusSelectedColorOnMount: focusSelectedColorOnMount,
102
+ selectedColor: selectedColor,
103
+ onColorSelected: onColorSelected
104
+ }));
105
+ };
55
106
  var emojiActionsTestId = exports.emojiActionsTestId = 'emoji-actions';
56
107
  var uploadEmojiTestId = exports.uploadEmojiTestId = 'upload-emoji';
57
108
 
@@ -165,14 +216,12 @@ var TonesWrapper = function TonesWrapper(props) {
165
216
  horizontalAlign: "end-to-start",
166
217
  offsetY: 4,
167
218
  zIndex: _constants2.layers.tooltip()
168
- }, /*#__PURE__*/React.createElement("div", {
169
- className: (0, _runtime.ax)(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
170
- }, /*#__PURE__*/React.createElement(_ProductivityColorSelector.default, {
219
+ }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
171
220
  colorPreviewEmojis: productivityColorPreviewEmojis,
172
221
  focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
173
222
  selectedColor: selectedProductivityColor,
174
223
  onColorSelected: onProductivityColorSelectedHandler
175
- }))), /*#__PURE__*/React.createElement(_TonePreviewButton.default, {
224
+ })), /*#__PURE__*/React.createElement(_TonePreviewButton.default, {
176
225
  ref: tonePreviewButtonRef,
177
226
  ariaControls: _ProductivityColorSelector.productivityColorSelectorId,
178
227
  ariaExpanded: showToneSelector,
package/dist/cjs/components/common/ProductivityColorSelector.js CHANGED
@@ -50,9 +50,19 @@ var ProductivityColorSelector = exports.ProductivityColorSelector = function Pro
50
50
  var stopPickerDismissal = function stopPickerDismissal(event) {
51
51
  event.stopPropagation();
52
52
  };
53
+ var selectColorOnPointerDown = function selectColorOnPointerDown(color) {
54
+ return function (event) {
55
+ stopPickerDismissal(event);
56
+ event.preventDefault();
57
+ onColorSelected(color);
58
+ };
59
+ };
53
60
  var selectColorOnMouseDown = function selectColorOnMouseDown(color) {
54
61
  return function (event) {
55
62
  stopPickerDismissal(event);
63
+ if (typeof window !== 'undefined' && 'PointerEvent' in window) {
64
+ return;
65
+ }
56
66
  event.preventDefault();
57
67
  onColorSelected(color);
58
68
  };
@@ -71,14 +81,17 @@ var ProductivityColorSelector = exports.ProductivityColorSelector = function Pro
71
81
  var handleKeyDown = function handleKeyDown(event) {
72
82
  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
73
83
  event.preventDefault();
84
+ event.stopPropagation();
74
85
  onArrowKey(index, -1);
75
86
  }
76
87
  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
77
88
  event.preventDefault();
89
+ event.stopPropagation();
78
90
  onArrowKey(index, 1);
79
91
  }
80
- if (event.key === 'Enter') {
92
+ if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
81
93
  event.preventDefault();
94
+ event.stopPropagation();
82
95
  onColorSelected(color);
83
96
  }
84
97
  };
@@ -102,6 +115,7 @@ var ProductivityColorSelector = exports.ProductivityColorSelector = function Pro
102
115
  onClick: stopPickerDismissal,
103
116
  onKeyDown: handleKeyDown,
104
117
  onMouseDown: selectColorOnMouseDown(color),
118
+ onPointerDown: selectColorOnPointerDown(color),
105
119
  testId: "productivity-color-".concat(color),
106
120
  value: color,
107
121
  label: /*#__PURE__*/React.createElement("span", {
package/dist/cjs/util/analytics/analytics.js CHANGED
@@ -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.5.0"
23
+ packageVersion: "71.5.2"
24
24
  }, attributes)
25
25
  };
26
26
  };
package/dist/es2019/components/common/EmojiActions.js CHANGED
@@ -42,6 +42,56 @@ const productivityColorPopup = null;
42
42
  const previewFooter = null;
43
43
  const previewFooterNew = null;
44
44
  const atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
45
+ const ProductivityColorPopupContent = ({
46
+ colorPreviewEmojis,
47
+ focusSelectedColorOnMount,
48
+ onColorSelected,
49
+ selectedColor
50
+ }) => {
51
+ const popupRef = useRef(null);
52
+ useEffect(() => {
53
+ const popupElement = popupRef.current;
54
+ if (!popupElement) {
55
+ return;
56
+ }
57
+ const isProductivityColorInput = target => target instanceof HTMLInputElement && target.name === 'productivity-emoji-colour';
58
+ const stopNonInputDismissal = event => {
59
+ if (isProductivityColorInput(event.target)) {
60
+ return;
61
+ }
62
+ event.stopPropagation();
63
+ };
64
+ const stopNonInputDismissalBeforeDocument = event => {
65
+ if (!(event.target instanceof Node) || !popupElement.contains(event.target) || isProductivityColorInput(event.target)) {
66
+ return;
67
+ }
68
+ event.stopPropagation();
69
+ };
70
+ window.addEventListener('pointerdown', stopNonInputDismissalBeforeDocument, true);
71
+ window.addEventListener('mousedown', stopNonInputDismissalBeforeDocument, true);
72
+ window.addEventListener('click', stopNonInputDismissalBeforeDocument, true);
73
+ popupElement.addEventListener('pointerdown', stopNonInputDismissal);
74
+ popupElement.addEventListener('mousedown', stopNonInputDismissal);
75
+ popupElement.addEventListener('click', stopNonInputDismissal);
76
+ return () => {
77
+ window.removeEventListener('pointerdown', stopNonInputDismissalBeforeDocument, true);
78
+ window.removeEventListener('mousedown', stopNonInputDismissalBeforeDocument, true);
79
+ window.removeEventListener('click', stopNonInputDismissalBeforeDocument, true);
80
+ popupElement.removeEventListener('pointerdown', stopNonInputDismissal);
81
+ popupElement.removeEventListener('mousedown', stopNonInputDismissal);
82
+ popupElement.removeEventListener('click', stopNonInputDismissal);
83
+ };
84
+ }, []);
85
+ return /*#__PURE__*/React.createElement("div", {
86
+ ref: popupRef,
87
+ className: ax(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
88
+ }, /*#__PURE__*/React.createElement(ProductivityColorSelector, {
89
+ colorPreviewEmojis: colorPreviewEmojis,
90
+ focusSelectedColorOnMount: focusSelectedColorOnMount,
91
+ selectedColor: selectedColor,
92
+ onColorSelected: onColorSelected
93
+ }));
94
+ };
45
95
  export const emojiActionsTestId = 'emoji-actions';
46
96
  export const uploadEmojiTestId = 'upload-emoji';
47
97
 
@@ -156,14 +206,12 @@ const TonesWrapper = props => {
156
206
  horizontalAlign: "end-to-start",
157
207
  offsetY: 4,
158
208
  zIndex: layers.tooltip()
159
- }, /*#__PURE__*/React.createElement("div", {
160
- className: ax(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
161
- }, /*#__PURE__*/React.createElement(ProductivityColorSelector, {
209
+ }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
162
210
  colorPreviewEmojis: productivityColorPreviewEmojis,
163
211
  focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
164
212
  selectedColor: selectedProductivityColor,
165
213
  onColorSelected: onProductivityColorSelectedHandler
166
- }))), /*#__PURE__*/React.createElement(TonePreviewButton, {
214
+ })), /*#__PURE__*/React.createElement(TonePreviewButton, {
167
215
  ref: tonePreviewButtonRef,
168
216
  ariaControls: productivityColorSelectorId,
169
217
  ariaExpanded: showToneSelector,
package/dist/es2019/components/common/ProductivityColorSelector.js CHANGED
@@ -37,8 +37,16 @@ export const ProductivityColorSelector = ({
37
37
  const stopPickerDismissal = event => {
38
38
  event.stopPropagation();
39
39
  };
40
+ const selectColorOnPointerDown = color => event => {
41
+ stopPickerDismissal(event);
42
+ event.preventDefault();
43
+ onColorSelected(color);
44
+ };
40
45
  const selectColorOnMouseDown = color => event => {
41
46
  stopPickerDismissal(event);
47
+ if (typeof window !== 'undefined' && 'PointerEvent' in window) {
48
+ return;
49
+ }
42
50
  event.preventDefault();
43
51
  onColorSelected(color);
44
52
  };
@@ -56,14 +64,17 @@ export const ProductivityColorSelector = ({
56
64
  const handleKeyDown = event => {
57
65
  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
58
66
  event.preventDefault();
67
+ event.stopPropagation();
59
68
  onArrowKey(index, -1);
60
69
  }
61
70
  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
62
71
  event.preventDefault();
72
+ event.stopPropagation();
63
73
  onArrowKey(index, 1);
64
74
  }
65
- if (event.key === 'Enter') {
75
+ if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
66
76
  event.preventDefault();
77
+ event.stopPropagation();
67
78
  onColorSelected(color);
68
79
  }
69
80
  };
@@ -85,6 +96,7 @@ export const ProductivityColorSelector = ({
85
96
  onClick: stopPickerDismissal,
86
97
  onKeyDown: handleKeyDown,
87
98
  onMouseDown: selectColorOnMouseDown(color),
99
+ onPointerDown: selectColorOnPointerDown(color),
88
100
  testId: `productivity-color-${color}`,
89
101
  value: color,
90
102
  label: /*#__PURE__*/React.createElement("span", {
package/dist/es2019/util/analytics/analytics.js CHANGED
@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
9
9
  actionSubjectId,
10
10
  attributes: {
11
11
  packageName: "@atlaskit/emoji",
12
- packageVersion: "71.5.0",
12
+ packageVersion: "71.5.2",
13
13
  ...attributes
14
14
  }
15
15
  });
package/dist/esm/components/common/EmojiActions.js CHANGED
@@ -43,6 +43,57 @@ var productivityColorPopup = null;
43
43
  var previewFooter = null;
44
44
  var previewFooterNew = null;
45
45
  var atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
46
+ var ProductivityColorPopupContent = function ProductivityColorPopupContent(_ref) {
47
+ var colorPreviewEmojis = _ref.colorPreviewEmojis,
48
+ focusSelectedColorOnMount = _ref.focusSelectedColorOnMount,
49
+ onColorSelected = _ref.onColorSelected,
50
+ selectedColor = _ref.selectedColor;
51
+ var popupRef = useRef(null);
52
+ useEffect(function () {
53
+ var popupElement = popupRef.current;
54
+ if (!popupElement) {
55
+ return;
56
+ }
57
+ var isProductivityColorInput = function isProductivityColorInput(target) {
58
+ return target instanceof HTMLInputElement && target.name === 'productivity-emoji-colour';
59
+ };
60
+ var stopNonInputDismissal = function stopNonInputDismissal(event) {
61
+ if (isProductivityColorInput(event.target)) {
62
+ return;
63
+ }
64
+ event.stopPropagation();
65
+ };
66
+ var stopNonInputDismissalBeforeDocument = function stopNonInputDismissalBeforeDocument(event) {
67
+ if (!(event.target instanceof Node) || !popupElement.contains(event.target) || isProductivityColorInput(event.target)) {
68
+ return;
69
+ }
70
+ event.stopPropagation();
71
+ };
72
+ window.addEventListener('pointerdown', stopNonInputDismissalBeforeDocument, true);
73
+ window.addEventListener('mousedown', stopNonInputDismissalBeforeDocument, true);
74
+ window.addEventListener('click', stopNonInputDismissalBeforeDocument, true);
75
+ popupElement.addEventListener('pointerdown', stopNonInputDismissal);
76
+ popupElement.addEventListener('mousedown', stopNonInputDismissal);
77
+ popupElement.addEventListener('click', stopNonInputDismissal);
78
+ return function () {
79
+ window.removeEventListener('pointerdown', stopNonInputDismissalBeforeDocument, true);
80
+ window.removeEventListener('mousedown', stopNonInputDismissalBeforeDocument, true);
81
+ window.removeEventListener('click', stopNonInputDismissalBeforeDocument, true);
82
+ popupElement.removeEventListener('pointerdown', stopNonInputDismissal);
83
+ popupElement.removeEventListener('mousedown', stopNonInputDismissal);
84
+ popupElement.removeEventListener('click', stopNonInputDismissal);
85
+ };
86
+ }, []);
87
+ return /*#__PURE__*/React.createElement("div", {
88
+ ref: popupRef,
89
+ className: ax(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
90
+ }, /*#__PURE__*/React.createElement(ProductivityColorSelector, {
91
+ colorPreviewEmojis: colorPreviewEmojis,
92
+ focusSelectedColorOnMount: focusSelectedColorOnMount,
93
+ selectedColor: selectedColor,
94
+ onColorSelected: onColorSelected
95
+ }));
96
+ };
46
97
  export var emojiActionsTestId = 'emoji-actions';
47
98
  export var uploadEmojiTestId = 'upload-emoji';
48
99
 
@@ -156,14 +207,12 @@ var TonesWrapper = function TonesWrapper(props) {
156
207
  horizontalAlign: "end-to-start",
157
208
  offsetY: 4,
158
209
  zIndex: layers.tooltip()
159
- }, /*#__PURE__*/React.createElement("div", {
160
- className: ax(["_19itia51 _2rkofajl _bfhk1bhr _16qs130s _ca0q12x7 _u5f312x7 _n3td12x7 _19bv12x7"])
161
- }, /*#__PURE__*/React.createElement(ProductivityColorSelector, {
210
+ }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
162
211
  colorPreviewEmojis: productivityColorPreviewEmojis,
163
212
  focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
164
213
  selectedColor: selectedProductivityColor,
165
214
  onColorSelected: onProductivityColorSelectedHandler
166
- }))), /*#__PURE__*/React.createElement(TonePreviewButton, {
215
+ })), /*#__PURE__*/React.createElement(TonePreviewButton, {
167
216
  ref: tonePreviewButtonRef,
168
217
  ariaControls: productivityColorSelectorId,
169
218
  ariaExpanded: showToneSelector,
package/dist/esm/components/common/ProductivityColorSelector.js CHANGED
@@ -41,9 +41,19 @@ export var ProductivityColorSelector = function ProductivityColorSelector(_ref)
41
41
  var stopPickerDismissal = function stopPickerDismissal(event) {
42
42
  event.stopPropagation();
43
43
  };
44
+ var selectColorOnPointerDown = function selectColorOnPointerDown(color) {
45
+ return function (event) {
46
+ stopPickerDismissal(event);
47
+ event.preventDefault();
48
+ onColorSelected(color);
49
+ };
50
+ };
44
51
  var selectColorOnMouseDown = function selectColorOnMouseDown(color) {
45
52
  return function (event) {
46
53
  stopPickerDismissal(event);
54
+ if (typeof window !== 'undefined' && 'PointerEvent' in window) {
55
+ return;
56
+ }
47
57
  event.preventDefault();
48
58
  onColorSelected(color);
49
59
  };
@@ -62,14 +72,17 @@ export var ProductivityColorSelector = function ProductivityColorSelector(_ref)
62
72
  var handleKeyDown = function handleKeyDown(event) {
63
73
  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
64
74
  event.preventDefault();
75
+ event.stopPropagation();
65
76
  onArrowKey(index, -1);
66
77
  }
67
78
  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
68
79
  event.preventDefault();
80
+ event.stopPropagation();
69
81
  onArrowKey(index, 1);
70
82
  }
71
- if (event.key === 'Enter') {
83
+ if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
72
84
  event.preventDefault();
85
+ event.stopPropagation();
73
86
  onColorSelected(color);
74
87
  }
75
88
  };
@@ -93,6 +106,7 @@ export var ProductivityColorSelector = function ProductivityColorSelector(_ref)
93
106
  onClick: stopPickerDismissal,
94
107
  onKeyDown: handleKeyDown,
95
108
  onMouseDown: selectColorOnMouseDown(color),
109
+ onPointerDown: selectColorOnPointerDown(color),
96
110
  testId: "productivity-color-".concat(color),
97
111
  value: color,
98
112
  label: /*#__PURE__*/React.createElement("span", {
package/dist/esm/util/analytics/analytics.js CHANGED
@@ -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.5.0"
17
+ packageVersion: "71.5.2"
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.5.1",
3
+ "version": "71.5.3",
4
4
  "description": "Fabric emoji React components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
49
49
  "@atlaskit/spinner": "^20.0.0",
50
50
  "@atlaskit/textfield": "^9.0.0",
51
51
  "@atlaskit/theme": "^26.0.0",
52
- "@atlaskit/tmp-editor-statsig": "^112.0.0",
52
+ "@atlaskit/tmp-editor-statsig": "^113.0.0",
53
53
  "@atlaskit/tokens": "^15.0.0",
54
54
  "@atlaskit/tooltip": "^23.0.0",
55
55
  "@atlaskit/ufo": "^1.0.0",