@atlaskit/emoji 73.0.1 → 73.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/components/common/EmojiActions.js +7 -2
  3. package/dist/cjs/components/common/ToneSelectorInternal.js +9 -0
  4. package/dist/cjs/util/analytics/createEvent.js +1 -1
  5. package/dist/es2019/components/common/EmojiActions.js +7 -2
  6. package/dist/es2019/components/common/ToneSelectorInternal.js +9 -0
  7. package/dist/es2019/util/analytics/createEvent.js +1 -1
  8. package/dist/esm/components/common/EmojiActions.js +7 -2
  9. package/dist/esm/components/common/ToneSelectorInternal.js +9 -0
  10. package/dist/esm/util/analytics/createEvent.js +1 -1
  11. package/package.json +10 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/emoji
2
2
 
3
+ ## 73.0.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`e54e1541aa52f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e54e1541aa52f) -
8
+ Fix the skin-tone selector closing when focus moves between its controls or when clicking a tone
9
+ behind `platform_emoji_skin_tone_blur_fix` when `platform_suppression_removal_fix_reactions` is
10
+ enabled.
11
+
12
+ ## 73.0.2
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 73.0.1
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/components/common/EmojiActions.js CHANGED
@@ -256,6 +256,11 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
256
256
  }
257
257
  setShowToneSelector(false);
258
258
  }, [shouldUseProductivityColorControl, showToneSelector, onToneSelectorCancelled]);
259
+ var onBlurHandler = (0, _react.useCallback)(function (event) {
260
+ if (!(0, _fg.fg)('platform_emoji_skin_tone_blur_fix') || !event.currentTarget.contains(event.relatedTarget)) {
261
+ onMouseLeaveHandler();
262
+ }
263
+ }, [onMouseLeaveHandler]);
259
264
  (0, _react.useEffect)(function () {
260
265
  if (shouldUseProductivityColorControl && showToneSelector) {
261
266
  wasProductivityColorSelectorOpen.current = true;
@@ -309,7 +314,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
309
314
  return (0, _isRefreshEmojiPickerEnabled.isRefreshEmojiPickerEnabled)() ? /*#__PURE__*/React.createElement("div", {
310
315
  "data-testid": emojiActionsTestId,
311
316
  onMouseLeave: onMouseLeaveHandler,
312
- onBlur: (0, _fg.fg)('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
317
+ onBlur: (0, _fg.fg)('platform_suppression_removal_fix_reactions') ? onBlurHandler : undefined,
313
318
  className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug"])
314
319
  }, /*#__PURE__*/React.createElement("div", {
315
320
  className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
@@ -327,7 +332,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
327
332
  })))) : /*#__PURE__*/React.createElement("div", {
328
333
  "data-testid": emojiActionsTestId,
329
334
  onMouseLeave: onMouseLeaveHandler,
330
- onBlur: (0, _fg.fg)('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
335
+ onBlur: (0, _fg.fg)('platform_suppression_removal_fix_reactions') ? onBlurHandler : undefined,
331
336
  className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
332
337
  }, /*#__PURE__*/React.createElement("div", {
333
338
  className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
package/dist/cjs/components/common/ToneSelectorInternal.js CHANGED
@@ -13,6 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
13
13
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
14
14
  var _react = _interopRequireWildcard(require("react"));
15
15
  var _reactIntl = require("react-intl");
16
+ var _fg = require("@atlaskit/platform-feature-flags/fg");
16
17
  var _analytics = require("../../util/analytics/analytics");
17
18
  var _toneSelectedEvent = require("../../util/analytics/toneSelectedEvent");
18
19
  var _toneSelectorOpenedEvent = require("../../util/analytics/toneSelectorOpenedEvent");
@@ -80,6 +81,12 @@ var ToneSelectorInternal = exports.ToneSelectorInternal = function ToneSelectorI
80
81
  var nextIndex = (currentIndex + direction + len) % len;
81
82
  (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 || _radioRefs$current$ne.focus();
82
83
  }, []);
84
+ var onMouseDownHandler = (0, _react.useCallback)(function (event) {
85
+ if ((0, _fg.fg)('platform_emoji_skin_tone_blur_fix')) {
86
+ // Keep focus inside the selector until the label activates its radio.
87
+ event.preventDefault();
88
+ }
89
+ }, []);
83
90
  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
84
91
  return function () {
85
92
  if (selectedTone === toneValue && onToneClose) {
@@ -99,9 +106,11 @@ var ToneSelectorInternal = exports.ToneSelectorInternal = function ToneSelectorI
99
106
  isMounted.current = true;
100
107
  return /*#__PURE__*/_react.default.createElement("div", {
101
108
  role: "radiogroup",
109
+ tabIndex: (0, _fg.fg)('platform_emoji_skin_tone_blur_fix') ? -1 : undefined,
102
110
  "data-testid": _ToneSelector.toneSelectorTestId,
103
111
  id: "emoji-picker-tone-selector",
104
112
  "aria-label": formatMessage(_i18n.messages.emojiSelectSkinToneListAriaLabelText),
113
+ onMouseDown: onMouseDownHandler,
105
114
  className: (0, _runtime.ax)([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
106
115
  }, emojiToneCollection.map(function (tone, renderIndex) {
107
116
  return (0, _isRefreshEmojiPickerEnabled.isRefreshEmojiPickerEnabled)() ? /*#__PURE__*/_react.default.createElement(_EmojiRadioButton.default, {
package/dist/cjs/util/analytics/createEvent.js CHANGED
@@ -19,7 +19,7 @@ var createEvent = exports.createEvent = function createEvent(eventType, action,
19
19
  actionSubjectId: actionSubjectId,
20
20
  attributes: _objectSpread({
21
21
  packageName: "@atlaskit/emoji",
22
- packageVersion: "73.0.0"
22
+ packageVersion: "73.0.2"
23
23
  }, attributes)
24
24
  };
25
25
  };
package/dist/es2019/components/common/EmojiActions.js CHANGED
@@ -238,6 +238,11 @@ export const EmojiActions = props => {
238
238
  }
239
239
  setShowToneSelector(false);
240
240
  }, [shouldUseProductivityColorControl, showToneSelector, onToneSelectorCancelled]);
241
+ const onBlurHandler = useCallback(event => {
242
+ if (!fg('platform_emoji_skin_tone_blur_fix') || !event.currentTarget.contains(event.relatedTarget)) {
243
+ onMouseLeaveHandler();
244
+ }
245
+ }, [onMouseLeaveHandler]);
241
246
  useEffect(() => {
242
247
  if (shouldUseProductivityColorControl && showToneSelector) {
243
248
  wasProductivityColorSelectorOpen.current = true;
@@ -291,7 +296,7 @@ export const EmojiActions = props => {
291
296
  return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
292
297
  "data-testid": emojiActionsTestId,
293
298
  onMouseLeave: onMouseLeaveHandler,
294
- onBlur: fg('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
299
+ onBlur: fg('platform_suppression_removal_fix_reactions') ? onBlurHandler : undefined,
295
300
  className: ax(["_16jlidpf _1o9zidpf _i0dl1wug"])
296
301
  }, /*#__PURE__*/React.createElement("div", {
297
302
  className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
@@ -309,7 +314,7 @@ export const EmojiActions = props => {
309
314
  })))) : /*#__PURE__*/React.createElement("div", {
310
315
  "data-testid": emojiActionsTestId,
311
316
  onMouseLeave: onMouseLeaveHandler,
312
- onBlur: fg('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
317
+ onBlur: fg('platform_suppression_removal_fix_reactions') ? onBlurHandler : undefined,
313
318
  className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
314
319
  }, /*#__PURE__*/React.createElement("div", {
315
320
  className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
package/dist/es2019/components/common/ToneSelectorInternal.js CHANGED
@@ -3,6 +3,7 @@ import "./ToneSelectorInternal.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { useCallback, useEffect, useMemo, useRef } from 'react';
5
5
  import { useIntl } from 'react-intl';
6
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
6
7
  import { createAndFireEventInElementsChannel } from '../../util/analytics/analytics';
7
8
  import { toneSelectedEvent } from '../../util/analytics/toneSelectedEvent';
8
9
  import { toneSelectorOpenedEvent } from '../../util/analytics/toneSelectorOpenedEvent';
@@ -71,6 +72,12 @@ export const ToneSelectorInternal = props => {
71
72
  const nextIndex = (currentIndex + direction + len) % len;
72
73
  (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 ? void 0 : _radioRefs$current$ne.focus();
73
74
  }, []);
75
+ const onMouseDownHandler = useCallback(event => {
76
+ if (fg('platform_emoji_skin_tone_blur_fix')) {
77
+ // Keep focus inside the selector until the label activates its radio.
78
+ event.preventDefault();
79
+ }
80
+ }, []);
74
81
  const onToneSelectedHandler = toneValue => () => {
75
82
  if (selectedTone === toneValue && onToneClose) {
76
83
  onToneClose();
@@ -88,9 +95,11 @@ export const ToneSelectorInternal = props => {
88
95
  isMounted.current = true;
89
96
  return /*#__PURE__*/React.createElement("div", {
90
97
  role: "radiogroup",
98
+ tabIndex: fg('platform_emoji_skin_tone_blur_fix') ? -1 : undefined,
91
99
  "data-testid": toneSelectorTestId,
92
100
  id: "emoji-picker-tone-selector",
93
101
  "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
102
+ onMouseDown: onMouseDownHandler,
94
103
  className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
95
104
  }, emojiToneCollection.map((tone, renderIndex) => {
96
105
  return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(EmojiRadioButton, {
package/dist/es2019/util/analytics/createEvent.js CHANGED
@@ -7,7 +7,7 @@ export const createEvent = (eventType, action, actionSubject, actionSubjectId, a
7
7
  actionSubjectId,
8
8
  attributes: {
9
9
  packageName: "@atlaskit/emoji",
10
- packageVersion: "73.0.0",
10
+ packageVersion: "73.0.2",
11
11
  ...attributes
12
12
  }
13
13
  });
package/dist/esm/components/common/EmojiActions.js CHANGED
@@ -247,6 +247,11 @@ export var EmojiActions = function EmojiActions(props) {
247
247
  }
248
248
  setShowToneSelector(false);
249
249
  }, [shouldUseProductivityColorControl, showToneSelector, onToneSelectorCancelled]);
250
+ var onBlurHandler = useCallback(function (event) {
251
+ if (!fg('platform_emoji_skin_tone_blur_fix') || !event.currentTarget.contains(event.relatedTarget)) {
252
+ onMouseLeaveHandler();
253
+ }
254
+ }, [onMouseLeaveHandler]);
250
255
  useEffect(function () {
251
256
  if (shouldUseProductivityColorControl && showToneSelector) {
252
257
  wasProductivityColorSelectorOpen.current = true;
@@ -300,7 +305,7 @@ export var EmojiActions = function EmojiActions(props) {
300
305
  return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
301
306
  "data-testid": emojiActionsTestId,
302
307
  onMouseLeave: onMouseLeaveHandler,
303
- onBlur: fg('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
308
+ onBlur: fg('platform_suppression_removal_fix_reactions') ? onBlurHandler : undefined,
304
309
  className: ax(["_16jlidpf _1o9zidpf _i0dl1wug"])
305
310
  }, /*#__PURE__*/React.createElement("div", {
306
311
  className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
@@ -318,7 +323,7 @@ export var EmojiActions = function EmojiActions(props) {
318
323
  })))) : /*#__PURE__*/React.createElement("div", {
319
324
  "data-testid": emojiActionsTestId,
320
325
  onMouseLeave: onMouseLeaveHandler,
321
- onBlur: fg('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
326
+ onBlur: fg('platform_suppression_removal_fix_reactions') ? onBlurHandler : undefined,
322
327
  className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
323
328
  }, /*#__PURE__*/React.createElement("div", {
324
329
  className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
package/dist/esm/components/common/ToneSelectorInternal.js CHANGED
@@ -7,6 +7,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
7
7
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
8
8
  import React, { useCallback, useEffect, useMemo, useRef } from 'react';
9
9
  import { useIntl } from 'react-intl';
10
+ import { fg } from '@atlaskit/platform-feature-flags/fg';
10
11
  import { createAndFireEventInElementsChannel } from '../../util/analytics/analytics';
11
12
  import { toneSelectedEvent } from '../../util/analytics/toneSelectedEvent';
12
13
  import { toneSelectorOpenedEvent } from '../../util/analytics/toneSelectorOpenedEvent';
@@ -71,6 +72,12 @@ export var ToneSelectorInternal = function ToneSelectorInternal(props) {
71
72
  var nextIndex = (currentIndex + direction + len) % len;
72
73
  (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 || _radioRefs$current$ne.focus();
73
74
  }, []);
75
+ var onMouseDownHandler = useCallback(function (event) {
76
+ if (fg('platform_emoji_skin_tone_blur_fix')) {
77
+ // Keep focus inside the selector until the label activates its radio.
78
+ event.preventDefault();
79
+ }
80
+ }, []);
74
81
  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
75
82
  return function () {
76
83
  if (selectedTone === toneValue && onToneClose) {
@@ -90,9 +97,11 @@ export var ToneSelectorInternal = function ToneSelectorInternal(props) {
90
97
  isMounted.current = true;
91
98
  return /*#__PURE__*/React.createElement("div", {
92
99
  role: "radiogroup",
100
+ tabIndex: fg('platform_emoji_skin_tone_blur_fix') ? -1 : undefined,
93
101
  "data-testid": toneSelectorTestId,
94
102
  id: "emoji-picker-tone-selector",
95
103
  "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
104
+ onMouseDown: onMouseDownHandler,
96
105
  className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
97
106
  }, emojiToneCollection.map(function (tone, renderIndex) {
98
107
  return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement(EmojiRadioButton, {
package/dist/esm/util/analytics/createEvent.js CHANGED
@@ -12,7 +12,7 @@ export var createEvent = function createEvent(eventType, action, actionSubject,
12
12
  actionSubjectId: actionSubjectId,
13
13
  attributes: _objectSpread({
14
14
  packageName: "@atlaskit/emoji",
15
- packageVersion: "73.0.0"
15
+ packageVersion: "73.0.2"
16
16
  }, attributes)
17
17
  };
18
18
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/emoji",
3
- "version": "73.0.1",
3
+ "version": "73.0.3",
4
4
  "description": "Fabric emoji React components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
35
35
  "@atlaskit/afm-i18n-platform-elements-emoji": "2.270.0",
36
36
  "@atlaskit/analytics-next": "^12.6.0",
37
37
  "@atlaskit/browser-apis": "^1.2.0",
38
- "@atlaskit/button": "^25.4.0",
38
+ "@atlaskit/button": "^25.5.0",
39
39
  "@atlaskit/css": "^1.1.0",
40
40
  "@atlaskit/feature-gate-js-client": "^7.0.0",
41
41
  "@atlaskit/form": "^18.2.0",
@@ -54,7 +54,7 @@
54
54
  "@atlaskit/spinner": "^20.4.0",
55
55
  "@atlaskit/textfield": "^10.2.0",
56
56
  "@atlaskit/theme": "^28.2.0",
57
- "@atlaskit/tmp-editor-statsig": "^241.0.0",
57
+ "@atlaskit/tmp-editor-statsig": "^242.0.0",
58
58
  "@atlaskit/tokens": "^20.6.0",
59
59
  "@atlaskit/tooltip": "^24.4.0",
60
60
  "@atlaskit/ufo": "^2.0.0",
@@ -79,7 +79,11 @@
79
79
  "devDependencies": {
80
80
  "@af/integration-testing": "workspace:^",
81
81
  "@af/visual-regression": "workspace:^",
82
+ "@atlaskit/docs": "^12.3.0",
83
+ "@atlaskit/editor-test-helpers": "workspace:^",
82
84
  "@atlaskit/media-core": "^39.0.0",
85
+ "@atlaskit/popup": "^10.0.0",
86
+ "@atlaskit/section-message": "^10.2.0",
83
87
  "@atlaskit/ssr": "workspace:^",
84
88
  "@atlaskit/util-data-test": "^19.1.0",
85
89
  "@atlassian/a11y-jest-testing": "^0.17.0",
@@ -127,6 +131,9 @@
127
131
  "platform_suppression_removal_fix_reactions": {
128
132
  "type": "boolean"
129
133
  },
134
+ "platform_emoji_skin_tone_blur_fix": {
135
+ "type": "boolean"
136
+ },
130
137
  "platform_bitbucket_fix_shortname_and_ordering": {
131
138
  "type": "boolean"
132
139
  },