@atlaskit/reactions 33.4.1 → 33.6.0

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 (18) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/afm-products/tsconfig.json +105 -0
  3. package/dist/cjs/analytics/index.js +1 -1
  4. package/dist/cjs/components/ReactionPicker.js +8 -1
  5. package/dist/cjs/components/Selector.compiled.css +2 -0
  6. package/dist/cjs/components/Selector.js +28 -13
  7. package/dist/es2019/analytics/index.js +1 -1
  8. package/dist/es2019/components/ReactionPicker.js +6 -1
  9. package/dist/es2019/components/Selector.compiled.css +2 -0
  10. package/dist/es2019/components/Selector.js +20 -4
  11. package/dist/esm/analytics/index.js +1 -1
  12. package/dist/esm/components/ReactionPicker.js +8 -1
  13. package/dist/esm/components/Selector.compiled.css +2 -0
  14. package/dist/esm/components/Selector.js +28 -13
  15. package/package.json +9 -3
  16. package/afm-passionfruit/tsconfig.json +0 -105
  17. package/afm-rovo-extension/tsconfig.json +0 -105
  18. package/afm-volt/tsconfig.json +0 -105
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/reactions
2
2
 
3
+ ## 33.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`e120a04be28c8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e120a04be28c8) -
8
+ [ux] Return focus to add reactions button after selecting emoji
9
+
10
+ ## 33.5.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`b5eb7e7afc46a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b5eb7e7afc46a) -
15
+ [ux] A11Y-9714: use unordered list markup for emojis in the reaction picker for screen reader a11y
16
+
3
17
  ## 33.4.1
4
18
 
5
19
  ### Patch Changes
package/afm-products/tsconfig.json ADDED
@@ -0,0 +1,105 @@
1
+ {
2
+ "extends": "../../../../tsconfig.entry-points.products.json",
3
+ "compilerOptions": {
4
+ "declaration": true,
5
+ "target": "es5",
6
+ "outDir": "../../../../../tsDist/@atlaskit__reactions/app",
7
+ "rootDir": "../",
8
+ "composite": true
9
+ },
10
+ "include": [
11
+ "../src/**/*.ts",
12
+ "../src/**/*.tsx"
13
+ ],
14
+ "exclude": [
15
+ "../src/**/__tests__/*",
16
+ "../src/**/*.test.*",
17
+ "../src/**/test.*",
18
+ "../src/**/examples.*",
19
+ "../src/**/examples/*",
20
+ "../src/**/examples/**/*",
21
+ "../src/**/*.stories.*",
22
+ "../src/**/stories/*",
23
+ "../src/**/stories/**/*"
24
+ ],
25
+ "references": [
26
+ {
27
+ "path": "../../../analytics/analytics-gas-types/afm-products/tsconfig.json"
28
+ },
29
+ {
30
+ "path": "../../../analytics/analytics-namespaced-context/afm-products/tsconfig.json"
31
+ },
32
+ {
33
+ "path": "../../../analytics/analytics-next/afm-products/tsconfig.json"
34
+ },
35
+ {
36
+ "path": "../../../design-system/avatar/afm-products/tsconfig.json"
37
+ },
38
+ {
39
+ "path": "../../../design-system/button/afm-products/tsconfig.json"
40
+ },
41
+ {
42
+ "path": "../../../design-system/css/afm-products/tsconfig.json"
43
+ },
44
+ {
45
+ "path": "../../emoji/afm-products/tsconfig.json"
46
+ },
47
+ {
48
+ "path": "../../../design-system/heading/afm-products/tsconfig.json"
49
+ },
50
+ {
51
+ "path": "../../../design-system/icon/afm-products/tsconfig.json"
52
+ },
53
+ {
54
+ "path": "../../../design-system/link/afm-products/tsconfig.json"
55
+ },
56
+ {
57
+ "path": "../../../design-system/modal-dialog/afm-products/tsconfig.json"
58
+ },
59
+ {
60
+ "path": "../../../design-system/motion/afm-products/tsconfig.json"
61
+ },
62
+ {
63
+ "path": "../../../platform/feature-flags/afm-products/tsconfig.json"
64
+ },
65
+ {
66
+ "path": "../../../platform/feature-flags-react/afm-products/tsconfig.json"
67
+ },
68
+ {
69
+ "path": "../../../design-system/popper/afm-products/tsconfig.json"
70
+ },
71
+ {
72
+ "path": "../../../design-system/popup/afm-products/tsconfig.json"
73
+ },
74
+ {
75
+ "path": "../../../design-system/portal/afm-products/tsconfig.json"
76
+ },
77
+ {
78
+ "path": "../../../design-system/primitives/afm-products/tsconfig.json"
79
+ },
80
+ {
81
+ "path": "../../../react-ufo/atlaskit/afm-products/tsconfig.json"
82
+ },
83
+ {
84
+ "path": "../../../design-system/spinner/afm-products/tsconfig.json"
85
+ },
86
+ {
87
+ "path": "../../../design-system/tabs/afm-products/tsconfig.json"
88
+ },
89
+ {
90
+ "path": "../../../design-system/theme/afm-products/tsconfig.json"
91
+ },
92
+ {
93
+ "path": "../../../design-system/tokens/afm-products/tsconfig.json"
94
+ },
95
+ {
96
+ "path": "../../../design-system/tooltip/afm-products/tsconfig.json"
97
+ },
98
+ {
99
+ "path": "../../../data/ufo-external/afm-products/tsconfig.json"
100
+ },
101
+ {
102
+ "path": "../../util-service-support/afm-products/tsconfig.json"
103
+ }
104
+ ]
105
+ }
package/dist/cjs/analytics/index.js CHANGED
@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
11
11
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
12
12
  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) { (0, _defineProperty2.default)(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; }
13
13
  var packageName = "@atlaskit/reactions";
14
- var packageVersion = "33.4.0";
14
+ var packageVersion = "33.5.0";
15
15
  /**
16
16
  * TODO: move to utility package?
17
17
  * A random sampling function
package/dist/cjs/components/ReactionPicker.js CHANGED
@@ -209,7 +209,14 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
209
209
  }
210
210
  onSelection(item.id, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? 'emojiPicker' : 'quickSelector');
211
211
  close(item.id);
212
- }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen]);
212
+ if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_focus_on_button')) {
213
+ // After selecting an emoji, we would like focus to be returned to the trigger button
214
+ // This is for the purposes of navigation for keyboard users
215
+ requestAnimationFrame(function () {
216
+ return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus();
217
+ });
218
+ }
219
+ }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, triggerRef]);
213
220
 
214
221
  /**
215
222
  * Event handler when the emoji icon to open the custom picker is selected
package/dist/cjs/components/Selector.compiled.css CHANGED
@@ -1,10 +1,12 @@
1
1
 
2
2
  ._zulp1b66{gap:var(--ds-space-050,4px)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
3
3
  ._19bv1b66{padding-left:var(--ds-space-050,4px)}
4
+ ._19pkze3t{margin-top:var(--ds-space-0,0)}
4
5
  ._1e0c1o8l{display:inline-block}
5
6
  ._1o51q7pw{animation-fill-mode:forwards}
6
7
  ._1p3lnqa1{border-left-style:solid}
7
8
  ._1pgl1ytf{animation-timing-function:ease-in-out}
9
+ ._2mzuglyw{list-style-type:none}
8
10
  ._4t3i1tcg{height:24px}
9
11
  ._5sag6ebc{animation-duration:.15s}
10
12
  ._5wramuej{border-left-color:var(--ds-border,#091e4224)}
package/dist/cjs/components/Selector.js CHANGED
@@ -11,8 +11,9 @@ require("./Selector.compiled.css");
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
- var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
15
  var _compiled = require("@atlaskit/primitives/compiled");
16
+ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
16
17
  var _i18n = require("../shared/i18n");
17
18
  var _constants = require("../shared/constants");
18
19
  var _EmojiButton = require("./EmojiButton");
@@ -21,6 +22,7 @@ var _Trigger = require("./Trigger");
21
22
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
22
23
  var styles = {
23
24
  container: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
25
+ emojiContainer: "_2mzuglyw _19pkze3t",
24
26
  separator: "_t6vde4h9 _5wramuej _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l",
25
27
  hoverableReactionPickerSelectorContainer: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
26
28
  };
@@ -31,7 +33,7 @@ var revealStyle = null;
31
33
  * Test id for wrapper Selector div
32
34
  */
33
35
  var RENDER_SELECTOR_TESTID = exports.RENDER_SELECTOR_TESTID = 'render-selector';
34
- var Reveal = function Reveal(_ref) {
36
+ var RevealOld = function RevealOld(_ref) {
35
37
  var children = _ref.children,
36
38
  testId = _ref.testId;
37
39
  return /*#__PURE__*/React.createElement("div", {
@@ -39,19 +41,30 @@ var Reveal = function Reveal(_ref) {
39
41
  className: (0, _runtime.ax)(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
40
42
  }, children);
41
43
  };
44
+ var Reveal = function Reveal(_ref2) {
45
+ var children = _ref2.children,
46
+ testId = _ref2.testId;
47
+ return /*#__PURE__*/React.createElement(_compiled.Box, {
48
+ as: "li",
49
+ xcss: styles.emojiContainer
50
+ }, /*#__PURE__*/React.createElement("div", {
51
+ "data-testid": testId,
52
+ className: (0, _runtime.ax)(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
53
+ }, children));
54
+ };
42
55
 
43
56
  /**
44
57
  * Reactions picker panel part of the <ReactionPicker /> component
45
58
  */
46
- var Selector = exports.Selector = function Selector(_ref2) {
47
- var emojiProvider = _ref2.emojiProvider,
48
- onMoreClick = _ref2.onMoreClick,
49
- onSelection = _ref2.onSelection,
50
- showMore = _ref2.showMore,
51
- _ref2$pickerQuickReac = _ref2.pickerQuickReactionEmojiIds,
52
- pickerQuickReactionEmojiIds = _ref2$pickerQuickReac === void 0 ? _constants.DefaultReactions : _ref2$pickerQuickReac,
53
- _ref2$hoverableReacti = _ref2.hoverableReactionPickerSelector,
54
- hoverableReactionPickerSelector = _ref2$hoverableReacti === void 0 ? false : _ref2$hoverableReacti;
59
+ var Selector = exports.Selector = function Selector(_ref3) {
60
+ var emojiProvider = _ref3.emojiProvider,
61
+ onMoreClick = _ref3.onMoreClick,
62
+ onSelection = _ref3.onSelection,
63
+ showMore = _ref3.showMore,
64
+ _ref3$pickerQuickReac = _ref3.pickerQuickReactionEmojiIds,
65
+ pickerQuickReactionEmojiIds = _ref3$pickerQuickReac === void 0 ? _constants.DefaultReactions : _ref3$pickerQuickReac,
66
+ _ref3$hoverableReacti = _ref3.hoverableReactionPickerSelector,
67
+ hoverableReactionPickerSelector = _ref3$hoverableReacti === void 0 ? false : _ref3$hoverableReacti;
55
68
  /**
56
69
  * Render the default emoji icon
57
70
  * @param emoji emoji item
@@ -67,7 +80,8 @@ var Selector = exports.Selector = function Selector(_ref2) {
67
80
  onClick: onSelection,
68
81
  hoverableReactionPickerSelectorEmoji: hoverableReactionPickerSelector
69
82
  }));
70
- return hoverableReactionPickerSelector ? emojiButtonAndTooltip : /*#__PURE__*/React.createElement(Reveal, {
83
+ var RevealComponent = (0, _platformFeatureFlags.fg)('platform-reactions-selector-list-semantics') ? Reveal : RevealOld;
84
+ return hoverableReactionPickerSelector ? emojiButtonAndTooltip : /*#__PURE__*/React.createElement(RevealComponent, {
71
85
  key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
72
86
  testId: RENDER_SELECTOR_TESTID
73
87
  }, emojiButtonAndTooltip);
@@ -88,7 +102,8 @@ var Selector = exports.Selector = function Selector(_ref2) {
88
102
  }
89
103
  return /*#__PURE__*/React.createElement(_compiled.Inline, {
90
104
  alignBlock: "center",
91
- xcss: styles.container
105
+ xcss: styles.container,
106
+ as: (0, _platformFeatureFlags.fg)('platform-reactions-selector-list-semantics') ? 'ul' : undefined
92
107
  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_compiled.Box, {
93
108
  xcss: styles.separator
94
109
  }), /*#__PURE__*/React.createElement(Reveal, null, /*#__PURE__*/React.createElement(_ShowMore.ShowMore, {
package/dist/es2019/analytics/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { createAndFireEvent } from '@atlaskit/analytics-next';
2
2
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
3
3
  const packageName = "@atlaskit/reactions";
4
- const packageVersion = "33.4.0";
4
+ const packageVersion = "33.5.0";
5
5
  /**
6
6
  * TODO: move to utility package?
7
7
  * A random sampling function
package/dist/es2019/components/ReactionPicker.js CHANGED
@@ -167,7 +167,12 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
167
167
  }
168
168
  onSelection(item.id, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? 'emojiPicker' : 'quickSelector');
169
169
  close(item.id);
170
- }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen]);
170
+ if (fg('platform_emoji_picker_focus_on_button')) {
171
+ // After selecting an emoji, we would like focus to be returned to the trigger button
172
+ // This is for the purposes of navigation for keyboard users
173
+ requestAnimationFrame(() => triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus());
174
+ }
175
+ }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, triggerRef]);
171
176
 
172
177
  /**
173
178
  * Event handler when the emoji icon to open the custom picker is selected
package/dist/es2019/components/Selector.compiled.css CHANGED
@@ -1,10 +1,12 @@
1
1
 
2
2
  ._zulp1b66{gap:var(--ds-space-050,4px)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
3
3
  ._19bv1b66{padding-left:var(--ds-space-050,4px)}
4
+ ._19pkze3t{margin-top:var(--ds-space-0,0)}
4
5
  ._1e0c1o8l{display:inline-block}
5
6
  ._1o51q7pw{animation-fill-mode:forwards}
6
7
  ._1p3lnqa1{border-left-style:solid}
7
8
  ._1pgl1ytf{animation-timing-function:ease-in-out}
9
+ ._2mzuglyw{list-style-type:none}
8
10
  ._4t3i1tcg{height:24px}
9
11
  ._5sag6ebc{animation-duration:.15s}
10
12
  ._5wramuej{border-left-color:var(--ds-border,#091e4224)}
package/dist/es2019/components/Selector.js CHANGED
@@ -3,8 +3,9 @@ import "./Selector.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Fragment } from 'react';
6
- import Tooltip from '@atlaskit/tooltip';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { Box, Inline } from '@atlaskit/primitives/compiled';
8
+ import Tooltip from '@atlaskit/tooltip';
8
9
  import { messages } from '../shared/i18n';
9
10
  import { DefaultReactions } from '../shared/constants';
10
11
  import { EmojiButton } from './EmojiButton';
@@ -12,6 +13,7 @@ import { ShowMore } from './ShowMore';
12
13
  import { Trigger } from './Trigger';
13
14
  const styles = {
14
15
  container: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
16
+ emojiContainer: "_2mzuglyw _19pkze3t",
15
17
  separator: "_t6vde4h9 _5wramuej _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l",
16
18
  hoverableReactionPickerSelectorContainer: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
17
19
  };
@@ -22,7 +24,7 @@ const revealStyle = null;
22
24
  * Test id for wrapper Selector div
23
25
  */
24
26
  export const RENDER_SELECTOR_TESTID = 'render-selector';
25
- const Reveal = ({
27
+ const RevealOld = ({
26
28
  children,
27
29
  testId
28
30
  }) => {
@@ -31,6 +33,18 @@ const Reveal = ({
31
33
  className: ax(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
32
34
  }, children);
33
35
  };
36
+ const Reveal = ({
37
+ children,
38
+ testId
39
+ }) => {
40
+ return /*#__PURE__*/React.createElement(Box, {
41
+ as: "li",
42
+ xcss: styles.emojiContainer
43
+ }, /*#__PURE__*/React.createElement("div", {
44
+ "data-testid": testId,
45
+ className: ax(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
46
+ }, children));
47
+ };
34
48
 
35
49
  /**
36
50
  * Reactions picker panel part of the <ReactionPicker /> component
@@ -58,7 +72,8 @@ export const Selector = ({
58
72
  onClick: onSelection,
59
73
  hoverableReactionPickerSelectorEmoji: hoverableReactionPickerSelector
60
74
  }));
61
- return hoverableReactionPickerSelector ? emojiButtonAndTooltip : /*#__PURE__*/React.createElement(Reveal, {
75
+ const RevealComponent = fg('platform-reactions-selector-list-semantics') ? Reveal : RevealOld;
76
+ return hoverableReactionPickerSelector ? emojiButtonAndTooltip : /*#__PURE__*/React.createElement(RevealComponent, {
62
77
  key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
63
78
  testId: RENDER_SELECTOR_TESTID
64
79
  }, emojiButtonAndTooltip);
@@ -79,7 +94,8 @@ export const Selector = ({
79
94
  }
80
95
  return /*#__PURE__*/React.createElement(Inline, {
81
96
  alignBlock: "center",
82
- xcss: styles.container
97
+ xcss: styles.container,
98
+ as: fg('platform-reactions-selector-list-semantics') ? 'ul' : undefined
83
99
  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, {
84
100
  xcss: styles.separator
85
101
  }), /*#__PURE__*/React.createElement(Reveal, null, /*#__PURE__*/React.createElement(ShowMore, {
package/dist/esm/analytics/index.js CHANGED
@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
4
4
  import { createAndFireEvent } from '@atlaskit/analytics-next';
5
5
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
6
6
  var packageName = "@atlaskit/reactions";
7
- var packageVersion = "33.4.0";
7
+ var packageVersion = "33.5.0";
8
8
  /**
9
9
  * TODO: move to utility package?
10
10
  * A random sampling function
package/dist/esm/components/ReactionPicker.js CHANGED
@@ -200,7 +200,14 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
200
200
  }
201
201
  onSelection(item.id, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? 'emojiPicker' : 'quickSelector');
202
202
  close(item.id);
203
- }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen]);
203
+ if (fg('platform_emoji_picker_focus_on_button')) {
204
+ // After selecting an emoji, we would like focus to be returned to the trigger button
205
+ // This is for the purposes of navigation for keyboard users
206
+ requestAnimationFrame(function () {
207
+ return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.focus();
208
+ });
209
+ }
210
+ }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, triggerRef]);
204
211
 
205
212
  /**
206
213
  * Event handler when the emoji icon to open the custom picker is selected
package/dist/esm/components/Selector.compiled.css CHANGED
@@ -1,10 +1,12 @@
1
1
 
2
2
  ._zulp1b66{gap:var(--ds-space-050,4px)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
3
3
  ._19bv1b66{padding-left:var(--ds-space-050,4px)}
4
+ ._19pkze3t{margin-top:var(--ds-space-0,0)}
4
5
  ._1e0c1o8l{display:inline-block}
5
6
  ._1o51q7pw{animation-fill-mode:forwards}
6
7
  ._1p3lnqa1{border-left-style:solid}
7
8
  ._1pgl1ytf{animation-timing-function:ease-in-out}
9
+ ._2mzuglyw{list-style-type:none}
8
10
  ._4t3i1tcg{height:24px}
9
11
  ._5sag6ebc{animation-duration:.15s}
10
12
  ._5wramuej{border-left-color:var(--ds-border,#091e4224)}
package/dist/esm/components/Selector.js CHANGED
@@ -3,8 +3,9 @@ import "./Selector.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Fragment } from 'react';
6
- import Tooltip from '@atlaskit/tooltip';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { Box, Inline } from '@atlaskit/primitives/compiled';
8
+ import Tooltip from '@atlaskit/tooltip';
8
9
  import { messages } from '../shared/i18n';
9
10
  import { DefaultReactions } from '../shared/constants';
10
11
  import { EmojiButton } from './EmojiButton';
@@ -12,6 +13,7 @@ import { ShowMore } from './ShowMore';
12
13
  import { Trigger } from './Trigger';
13
14
  var styles = {
14
15
  container: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
16
+ emojiContainer: "_2mzuglyw _19pkze3t",
15
17
  separator: "_t6vde4h9 _5wramuej _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l",
16
18
  hoverableReactionPickerSelectorContainer: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
17
19
  };
@@ -22,7 +24,7 @@ var revealStyle = null;
22
24
  * Test id for wrapper Selector div
23
25
  */
24
26
  export var RENDER_SELECTOR_TESTID = 'render-selector';
25
- var Reveal = function Reveal(_ref) {
27
+ var RevealOld = function RevealOld(_ref) {
26
28
  var children = _ref.children,
27
29
  testId = _ref.testId;
28
30
  return /*#__PURE__*/React.createElement("div", {
@@ -30,19 +32,30 @@ var Reveal = function Reveal(_ref) {
30
32
  className: ax(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
31
33
  }, children);
32
34
  };
35
+ var Reveal = function Reveal(_ref2) {
36
+ var children = _ref2.children,
37
+ testId = _ref2.testId;
38
+ return /*#__PURE__*/React.createElement(Box, {
39
+ as: "li",
40
+ xcss: styles.emojiContainer
41
+ }, /*#__PURE__*/React.createElement("div", {
42
+ "data-testid": testId,
43
+ className: ax(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
44
+ }, children));
45
+ };
33
46
 
34
47
  /**
35
48
  * Reactions picker panel part of the <ReactionPicker /> component
36
49
  */
37
- export var Selector = function Selector(_ref2) {
38
- var emojiProvider = _ref2.emojiProvider,
39
- onMoreClick = _ref2.onMoreClick,
40
- onSelection = _ref2.onSelection,
41
- showMore = _ref2.showMore,
42
- _ref2$pickerQuickReac = _ref2.pickerQuickReactionEmojiIds,
43
- pickerQuickReactionEmojiIds = _ref2$pickerQuickReac === void 0 ? DefaultReactions : _ref2$pickerQuickReac,
44
- _ref2$hoverableReacti = _ref2.hoverableReactionPickerSelector,
45
- hoverableReactionPickerSelector = _ref2$hoverableReacti === void 0 ? false : _ref2$hoverableReacti;
50
+ export var Selector = function Selector(_ref3) {
51
+ var emojiProvider = _ref3.emojiProvider,
52
+ onMoreClick = _ref3.onMoreClick,
53
+ onSelection = _ref3.onSelection,
54
+ showMore = _ref3.showMore,
55
+ _ref3$pickerQuickReac = _ref3.pickerQuickReactionEmojiIds,
56
+ pickerQuickReactionEmojiIds = _ref3$pickerQuickReac === void 0 ? DefaultReactions : _ref3$pickerQuickReac,
57
+ _ref3$hoverableReacti = _ref3.hoverableReactionPickerSelector,
58
+ hoverableReactionPickerSelector = _ref3$hoverableReacti === void 0 ? false : _ref3$hoverableReacti;
46
59
  /**
47
60
  * Render the default emoji icon
48
61
  * @param emoji emoji item
@@ -58,7 +71,8 @@ export var Selector = function Selector(_ref2) {
58
71
  onClick: onSelection,
59
72
  hoverableReactionPickerSelectorEmoji: hoverableReactionPickerSelector
60
73
  }));
61
- return hoverableReactionPickerSelector ? emojiButtonAndTooltip : /*#__PURE__*/React.createElement(Reveal, {
74
+ var RevealComponent = fg('platform-reactions-selector-list-semantics') ? Reveal : RevealOld;
75
+ return hoverableReactionPickerSelector ? emojiButtonAndTooltip : /*#__PURE__*/React.createElement(RevealComponent, {
62
76
  key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
63
77
  testId: RENDER_SELECTOR_TESTID
64
78
  }, emojiButtonAndTooltip);
@@ -79,7 +93,8 @@ export var Selector = function Selector(_ref2) {
79
93
  }
80
94
  return /*#__PURE__*/React.createElement(Inline, {
81
95
  alignBlock: "center",
82
- xcss: styles.container
96
+ xcss: styles.container,
97
+ as: fg('platform-reactions-selector-list-semantics') ? 'ul' : undefined
83
98
  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, {
84
99
  xcss: styles.separator
85
100
  }), /*#__PURE__*/React.createElement(Reveal, null, /*#__PURE__*/React.createElement(ShowMore, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/reactions",
3
- "version": "33.4.1",
3
+ "version": "33.6.0",
4
4
  "description": "Reactions component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -35,14 +35,14 @@
35
35
  "@atlaskit/analytics-gas-types": "^5.1.0",
36
36
  "@atlaskit/analytics-namespaced-context": "^7.1.0",
37
37
  "@atlaskit/analytics-next": "^11.1.0",
38
- "@atlaskit/avatar": "^25.4.0",
38
+ "@atlaskit/avatar": "^25.5.0",
39
39
  "@atlaskit/button": "^23.5.0",
40
40
  "@atlaskit/css": "^0.15.0",
41
41
  "@atlaskit/emoji": "^69.6.0",
42
42
  "@atlaskit/heading": "^5.2.0",
43
43
  "@atlaskit/icon": "^28.5.0",
44
44
  "@atlaskit/link": "^3.2.0",
45
- "@atlaskit/modal-dialog": "^14.5.0",
45
+ "@atlaskit/modal-dialog": "^14.6.0",
46
46
  "@atlaskit/motion": "^5.3.0",
47
47
  "@atlaskit/platform-feature-flags": "^1.1.0",
48
48
  "@atlaskit/platform-feature-flags-react": "^0.3.0",
@@ -115,6 +115,9 @@
115
115
  "start:edge": "cd ../../ && PROXY_TARGET_ENV=edge yarn start:webpack reactions --proxy ./packages/elements/reactions/proxy.ts"
116
116
  },
117
117
  "platform-feature-flags": {
118
+ "platform_emoji_picker_focus_on_button": {
119
+ "type": "boolean"
120
+ },
118
121
  "platform-component-visual-refresh": {
119
122
  "type": "boolean"
120
123
  },
@@ -141,6 +144,9 @@
141
144
  },
142
145
  "platform_reactions_custom_popper_zindex": {
143
146
  "type": "boolean"
147
+ },
148
+ "platform-reactions-selector-list-semantics": {
149
+ "type": "boolean"
144
150
  }
145
151
  },
146
152
  "sideEffects": [
package/afm-passionfruit/tsconfig.json DELETED
@@ -1,105 +0,0 @@
1
- {
2
- "extends": "../../../../tsconfig.entry-points.passionfruit.json",
3
- "compilerOptions": {
4
- "declaration": true,
5
- "target": "es5",
6
- "outDir": "../../../../../passionfruit/tsDist/@atlaskit__reactions/app",
7
- "rootDir": "../",
8
- "composite": true
9
- },
10
- "include": [
11
- "../src/**/*.ts",
12
- "../src/**/*.tsx"
13
- ],
14
- "exclude": [
15
- "../src/**/__tests__/*",
16
- "../src/**/*.test.*",
17
- "../src/**/test.*",
18
- "../src/**/examples.*",
19
- "../src/**/examples/*",
20
- "../src/**/examples/**/*",
21
- "../src/**/*.stories.*",
22
- "../src/**/stories/*",
23
- "../src/**/stories/**/*"
24
- ],
25
- "references": [
26
- {
27
- "path": "../../../analytics/analytics-gas-types/afm-passionfruit/tsconfig.json"
28
- },
29
- {
30
- "path": "../../../analytics/analytics-namespaced-context/afm-passionfruit/tsconfig.json"
31
- },
32
- {
33
- "path": "../../../analytics/analytics-next/afm-passionfruit/tsconfig.json"
34
- },
35
- {
36
- "path": "../../../design-system/avatar/afm-passionfruit/tsconfig.json"
37
- },
38
- {
39
- "path": "../../../design-system/button/afm-passionfruit/tsconfig.json"
40
- },
41
- {
42
- "path": "../../../design-system/css/afm-passionfruit/tsconfig.json"
43
- },
44
- {
45
- "path": "../../emoji/afm-passionfruit/tsconfig.json"
46
- },
47
- {
48
- "path": "../../../design-system/heading/afm-passionfruit/tsconfig.json"
49
- },
50
- {
51
- "path": "../../../design-system/icon/afm-passionfruit/tsconfig.json"
52
- },
53
- {
54
- "path": "../../../design-system/link/afm-passionfruit/tsconfig.json"
55
- },
56
- {
57
- "path": "../../../design-system/modal-dialog/afm-passionfruit/tsconfig.json"
58
- },
59
- {
60
- "path": "../../../design-system/motion/afm-passionfruit/tsconfig.json"
61
- },
62
- {
63
- "path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
64
- },
65
- {
66
- "path": "../../../platform/feature-flags-react/afm-passionfruit/tsconfig.json"
67
- },
68
- {
69
- "path": "../../../design-system/popper/afm-passionfruit/tsconfig.json"
70
- },
71
- {
72
- "path": "../../../design-system/popup/afm-passionfruit/tsconfig.json"
73
- },
74
- {
75
- "path": "../../../design-system/portal/afm-passionfruit/tsconfig.json"
76
- },
77
- {
78
- "path": "../../../design-system/primitives/afm-passionfruit/tsconfig.json"
79
- },
80
- {
81
- "path": "../../../react-ufo/atlaskit/afm-passionfruit/tsconfig.json"
82
- },
83
- {
84
- "path": "../../../design-system/spinner/afm-passionfruit/tsconfig.json"
85
- },
86
- {
87
- "path": "../../../design-system/tabs/afm-passionfruit/tsconfig.json"
88
- },
89
- {
90
- "path": "../../../design-system/theme/afm-passionfruit/tsconfig.json"
91
- },
92
- {
93
- "path": "../../../design-system/tokens/afm-passionfruit/tsconfig.json"
94
- },
95
- {
96
- "path": "../../../design-system/tooltip/afm-passionfruit/tsconfig.json"
97
- },
98
- {
99
- "path": "../../../data/ufo-external/afm-passionfruit/tsconfig.json"
100
- },
101
- {
102
- "path": "../../util-service-support/afm-passionfruit/tsconfig.json"
103
- }
104
- ]
105
- }
package/afm-rovo-extension/tsconfig.json DELETED
@@ -1,105 +0,0 @@
1
- {
2
- "extends": "../../../../tsconfig.entry-points.rovo-extension.json",
3
- "compilerOptions": {
4
- "declaration": true,
5
- "target": "es5",
6
- "outDir": "../../../../../rovo-extension/tsDist/@atlaskit__reactions/app",
7
- "rootDir": "../",
8
- "composite": true
9
- },
10
- "include": [
11
- "../src/**/*.ts",
12
- "../src/**/*.tsx"
13
- ],
14
- "exclude": [
15
- "../src/**/__tests__/*",
16
- "../src/**/*.test.*",
17
- "../src/**/test.*",
18
- "../src/**/examples.*",
19
- "../src/**/examples/*",
20
- "../src/**/examples/**/*",
21
- "../src/**/*.stories.*",
22
- "../src/**/stories/*",
23
- "../src/**/stories/**/*"
24
- ],
25
- "references": [
26
- {
27
- "path": "../../../analytics/analytics-gas-types/afm-rovo-extension/tsconfig.json"
28
- },
29
- {
30
- "path": "../../../analytics/analytics-namespaced-context/afm-rovo-extension/tsconfig.json"
31
- },
32
- {
33
- "path": "../../../analytics/analytics-next/afm-rovo-extension/tsconfig.json"
34
- },
35
- {
36
- "path": "../../../design-system/avatar/afm-rovo-extension/tsconfig.json"
37
- },
38
- {
39
- "path": "../../../design-system/button/afm-rovo-extension/tsconfig.json"
40
- },
41
- {
42
- "path": "../../../design-system/css/afm-rovo-extension/tsconfig.json"
43
- },
44
- {
45
- "path": "../../emoji/afm-rovo-extension/tsconfig.json"
46
- },
47
- {
48
- "path": "../../../design-system/heading/afm-rovo-extension/tsconfig.json"
49
- },
50
- {
51
- "path": "../../../design-system/icon/afm-rovo-extension/tsconfig.json"
52
- },
53
- {
54
- "path": "../../../design-system/link/afm-rovo-extension/tsconfig.json"
55
- },
56
- {
57
- "path": "../../../design-system/modal-dialog/afm-rovo-extension/tsconfig.json"
58
- },
59
- {
60
- "path": "../../../design-system/motion/afm-rovo-extension/tsconfig.json"
61
- },
62
- {
63
- "path": "../../../platform/feature-flags/afm-rovo-extension/tsconfig.json"
64
- },
65
- {
66
- "path": "../../../platform/feature-flags-react/afm-rovo-extension/tsconfig.json"
67
- },
68
- {
69
- "path": "../../../design-system/popper/afm-rovo-extension/tsconfig.json"
70
- },
71
- {
72
- "path": "../../../design-system/popup/afm-rovo-extension/tsconfig.json"
73
- },
74
- {
75
- "path": "../../../design-system/portal/afm-rovo-extension/tsconfig.json"
76
- },
77
- {
78
- "path": "../../../design-system/primitives/afm-rovo-extension/tsconfig.json"
79
- },
80
- {
81
- "path": "../../../react-ufo/atlaskit/afm-rovo-extension/tsconfig.json"
82
- },
83
- {
84
- "path": "../../../design-system/spinner/afm-rovo-extension/tsconfig.json"
85
- },
86
- {
87
- "path": "../../../design-system/tabs/afm-rovo-extension/tsconfig.json"
88
- },
89
- {
90
- "path": "../../../design-system/theme/afm-rovo-extension/tsconfig.json"
91
- },
92
- {
93
- "path": "../../../design-system/tokens/afm-rovo-extension/tsconfig.json"
94
- },
95
- {
96
- "path": "../../../design-system/tooltip/afm-rovo-extension/tsconfig.json"
97
- },
98
- {
99
- "path": "../../../data/ufo-external/afm-rovo-extension/tsconfig.json"
100
- },
101
- {
102
- "path": "../../util-service-support/afm-rovo-extension/tsconfig.json"
103
- }
104
- ]
105
- }
package/afm-volt/tsconfig.json DELETED
@@ -1,105 +0,0 @@
1
- {
2
- "extends": "../../../../tsconfig.entry-points.volt.json",
3
- "compilerOptions": {
4
- "declaration": true,
5
- "target": "es5",
6
- "outDir": "../../../../../volt/tsDist/@atlaskit__reactions/app",
7
- "rootDir": "../",
8
- "composite": true
9
- },
10
- "include": [
11
- "../src/**/*.ts",
12
- "../src/**/*.tsx"
13
- ],
14
- "exclude": [
15
- "../src/**/__tests__/*",
16
- "../src/**/*.test.*",
17
- "../src/**/test.*",
18
- "../src/**/examples.*",
19
- "../src/**/examples/*",
20
- "../src/**/examples/**/*",
21
- "../src/**/*.stories.*",
22
- "../src/**/stories/*",
23
- "../src/**/stories/**/*"
24
- ],
25
- "references": [
26
- {
27
- "path": "../../../analytics/analytics-gas-types/afm-volt/tsconfig.json"
28
- },
29
- {
30
- "path": "../../../analytics/analytics-namespaced-context/afm-volt/tsconfig.json"
31
- },
32
- {
33
- "path": "../../../analytics/analytics-next/afm-volt/tsconfig.json"
34
- },
35
- {
36
- "path": "../../../design-system/avatar/afm-volt/tsconfig.json"
37
- },
38
- {
39
- "path": "../../../design-system/button/afm-volt/tsconfig.json"
40
- },
41
- {
42
- "path": "../../../design-system/css/afm-volt/tsconfig.json"
43
- },
44
- {
45
- "path": "../../emoji/afm-volt/tsconfig.json"
46
- },
47
- {
48
- "path": "../../../design-system/heading/afm-volt/tsconfig.json"
49
- },
50
- {
51
- "path": "../../../design-system/icon/afm-volt/tsconfig.json"
52
- },
53
- {
54
- "path": "../../../design-system/link/afm-volt/tsconfig.json"
55
- },
56
- {
57
- "path": "../../../design-system/modal-dialog/afm-volt/tsconfig.json"
58
- },
59
- {
60
- "path": "../../../design-system/motion/afm-volt/tsconfig.json"
61
- },
62
- {
63
- "path": "../../../platform/feature-flags/afm-volt/tsconfig.json"
64
- },
65
- {
66
- "path": "../../../platform/feature-flags-react/afm-volt/tsconfig.json"
67
- },
68
- {
69
- "path": "../../../design-system/popper/afm-volt/tsconfig.json"
70
- },
71
- {
72
- "path": "../../../design-system/popup/afm-volt/tsconfig.json"
73
- },
74
- {
75
- "path": "../../../design-system/portal/afm-volt/tsconfig.json"
76
- },
77
- {
78
- "path": "../../../design-system/primitives/afm-volt/tsconfig.json"
79
- },
80
- {
81
- "path": "../../../react-ufo/atlaskit/afm-volt/tsconfig.json"
82
- },
83
- {
84
- "path": "../../../design-system/spinner/afm-volt/tsconfig.json"
85
- },
86
- {
87
- "path": "../../../design-system/tabs/afm-volt/tsconfig.json"
88
- },
89
- {
90
- "path": "../../../design-system/theme/afm-volt/tsconfig.json"
91
- },
92
- {
93
- "path": "../../../design-system/tokens/afm-volt/tsconfig.json"
94
- },
95
- {
96
- "path": "../../../design-system/tooltip/afm-volt/tsconfig.json"
97
- },
98
- {
99
- "path": "../../../data/ufo-external/afm-volt/tsconfig.json"
100
- },
101
- {
102
- "path": "../../util-service-support/afm-volt/tsconfig.json"
103
- }
104
- ]
105
- }