@atlaskit/reactions 33.8.19 → 33.8.21

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 CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/reactions
2
2
 
3
+ ## 33.8.21
4
+
5
+ ### Patch Changes
6
+
7
+ - [`1973bfd3d96db`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1973bfd3d96db) -
8
+ Feature gate cleanup
9
+ - Updated dependencies
10
+
11
+ ## 33.8.20
12
+
13
+ ### Patch Changes
14
+
15
+ - [`0f66751ec3512`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f66751ec3512) -
16
+ Click events should also have key events for accessibility
17
+
3
18
  ## 33.8.19
4
19
 
5
20
  ### Patch Changes
@@ -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.8.18";
14
+ var packageVersion = "33.8.20";
15
15
  /**
16
16
  * TODO: move to utility package?
17
17
  * A random sampling function
@@ -1,9 +1,12 @@
1
- ._19bv19bv{padding-left:10px}
2
- ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
1
+ ._18zrze3t{padding-inline:var(--ds-space-0,0)}
2
+ ._195gze3t{margin-inline:var(--ds-space-0,0)}
3
+ ._1mouze3t{margin-block:var(--ds-space-0,0)}
4
+ ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
5
+ ._1rjcze3t{padding-block:var(--ds-space-0,0)}
3
6
  ._8hrz1nam{transform-origin:center center 0}
4
- ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
7
+ ._bozg19bv{padding-inline-start:10px}
8
+ ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
5
9
  ._kqswh2mm{position:relative}
6
- ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
7
- ._u5f31b66{padding-right:var(--ds-space-050,4px)}
8
- ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
9
- ._vwz41crf{line-height:9pt}
10
+ ._vwz41crf{line-height:9pt}
11
+ ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
12
+ ._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
@@ -15,6 +15,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
15
15
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
16
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
17
  var _reactIntlNext = require("react-intl-next");
18
+ var _css = require("@atlaskit/css");
18
19
  var _analyticsNext = require("@atlaskit/analytics-next");
19
20
  var _emoji = require("@atlaskit/emoji");
20
21
  var _analytics = require("../analytics");
@@ -30,7 +31,8 @@ var _StaticReaction = require("./StaticReaction");
30
31
  var _compiled = require("@atlaskit/primitives/compiled");
31
32
  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); }
32
33
  var styles = {
33
- container: "_kqswh2mm"
34
+ container: "_kqswh2mm",
35
+ listItem: "_195gze3t _1mouze3t _18zrze3t _1rjcze3t"
34
36
  };
35
37
  var emojiStyle = null;
36
38
  var emojiNoReactionStyle = null;
@@ -137,7 +139,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
137
139
  setIsTooltipEnabled(false);
138
140
  };
139
141
  var emojiAndCount = /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement("div", {
140
- className: (0, _runtime.ax)(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
142
+ className: (0, _runtime.ax)(["_1rjc1b66 _8hrz1nam _vwz41crf _bozgu2gc _y4ti1b66", reaction.count === 0 && "_1rjc1b66 _bozg19bv _y4tiv77o"])
141
143
  }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
142
144
  emojiProvider: emojiProvider,
143
145
  emojiId: emojiId,
@@ -156,7 +158,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
156
158
  });
157
159
  }
158
160
  return /*#__PURE__*/React.createElement(_compiled.Box, {
159
- xcss: styles.container,
161
+ xcss: (0, _css.cx)(styles.container, (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? styles.listItem : undefined),
160
162
  as: (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
161
163
  }, showParticleEffect && /*#__PURE__*/React.createElement(_ReactionParticleEffect.ReactionParticleEffect, {
162
164
  emojiId: emojiId,
@@ -59,6 +59,7 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
59
59
  }), /*#__PURE__*/_react.default.createElement("li", {
60
60
  onMouseDown: handleClick,
61
61
  onClick: handleClick,
62
+ onKeyDown: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? handleClick : undefined,
62
63
  className: (0, _runtime.ax)(["_syaz1lqe", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3pioe _30l31i9p"]),
63
64
  style: {
64
65
  "--_14nrcaz": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N90, ")")),
@@ -1,24 +1,16 @@
1
1
 
2
- ._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
3
- ._17s9idpf >li{padding-bottom:0}
4
- ._18u0idpf{margin-left:0}
2
+ ._qtt8glyw{list-style:none}._18u0idpf{margin-left:0}
5
3
  ._19bvidpf{padding-left:0}
6
- ._19pk1b66{margin-top:var(--ds-space-050,4px)}
7
4
  ._19pkidpf{margin-top:0}
8
- ._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
9
- ._1b3sidpf >li{padding-left:0}
10
5
  ._1e0c1o8l{display:inline-block}
11
6
  ._1e0c1txw{display:flex}
12
- ._1l0sidpf >li{margin-bottom:0}
7
+ ._1fohidpf >:first-of-type>:first-of-type{margin-inline-start:0}
13
8
  ._1n261g80{flex-wrap:wrap}
14
9
  ._1n261q9c{flex-wrap:nowrap}
15
- ._1pyaidpf >li{margin-top:0}
10
+ ._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
11
+ ._1pfhr5cr{margin-block-start:var(--ds-space-negative-050,-4px)}
16
12
  ._2hwxidpf{margin-right:0}
17
13
  ._4cvr1h6o{align-items:center}
18
- ._694cidpf >li{margin-right:0}
19
- ._9g0pidpf >li{margin-left:0}
20
- ._ahxuidpf >li{padding-top:0}
21
- ._bapwidpf >li{padding-right:0}
22
14
  ._ca0qidpf{padding-top:0}
23
15
  ._kqswh2mm{position:relative}
24
16
  ._kqswpfqs{position:static}
@@ -19,7 +19,6 @@ var _analyticsNext = require("@atlaskit/analytics-next");
19
19
  var _modalDialog = require("@atlaskit/modal-dialog");
20
20
  var _segment = _interopRequireDefault(require("@atlaskit/react-ufo/segment"));
21
21
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
22
- var _compiled = require("@atlaskit/primitives/compiled");
23
22
  var _analytics = require("../analytics");
24
23
  var _constants = require("../shared/constants");
25
24
  var _i18n = require("../shared/i18n");
@@ -35,9 +34,6 @@ var noFlexWrapStyles = null;
35
34
  var noContainerPositionStyles = null;
36
35
  var reactionPickerStyle = null;
37
36
  var listContainerStyles = null;
38
- var pickerListItemStyles = {
39
- picker: "_1e0c1o8l _19pk1b66"
40
- };
41
37
 
42
38
  /**
43
39
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -307,9 +303,6 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
307
303
  return reaction.count >= 5;
308
304
  });
309
305
  var shouldShowPicker = !isViewOnly && !(!onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView);
310
- var semanticListEnabled = (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic');
311
- var addReactionButtonAsListItem = (0, _platformFeatureFlags.fg)('platform-a11y-add-reactions-button-ul-item');
312
- var pickerInsideList = semanticListEnabled && addReactionButtonAsListItem && shouldShowPicker;
313
306
  var sortedReactions = (0, _react.useMemo)(function () {
314
307
  return (0, _toConsumableArray2.default)(memorizedReactions).sort(function (a, b) {
315
308
  return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
@@ -345,7 +338,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
345
338
  name: "reactions"
346
339
  }, /*#__PURE__*/_react.default.createElement("div", {
347
340
  "data-testid": RENDER_REACTIONS_TESTID,
348
- className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
341
+ className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _1pfhr5cr _1fohidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
349
342
  }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/_react.default.createElement("div", {
350
343
  "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
351
344
  }, /*#__PURE__*/_react.default.createElement(_ReactionSummaryView.ReactionSummaryView, {
@@ -380,7 +373,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
380
373
  summaryButtonIconAfter: summaryButtonIconAfter,
381
374
  summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
382
375
  })) : (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/_react.default.createElement("ul", {
383
- className: (0, _runtime.ax)(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm _1pyaidpf _694cidpf _1l0sidpf _9g0pidpf _ahxuidpf _bapwidpf _17s9idpf _1b3sidpf"])
376
+ className: (0, _runtime.ax)(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm"])
384
377
  }, memorizedReactions.map(function (reaction) {
385
378
  return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
386
379
  key: reaction.emojiId,
@@ -397,32 +390,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
397
390
  isViewOnly: isViewOnly,
398
391
  showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
399
392
  });
400
- }), pickerInsideList && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
401
- as: "li",
402
- xcss: pickerListItemStyles.picker
403
- }, /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
404
- emojiProvider: emojiProvider,
405
- allowAllEmojis: allowAllEmojis,
406
- pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
407
- disabled: status !== _types.ReactionStatus.ready,
408
- onSelection: handleOnSelection,
409
- onOpen: handlePickerOpen,
410
- onCancel: handleOnCancel,
411
- onShowMore: handleOnMore,
412
- tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
413
- emojiPickerSize: emojiPickerSize,
414
- miniMode: miniMode,
415
- showOpaqueBackground: showOpaqueBackground,
416
- showAddReactionText: showAddReactionText,
417
- subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
418
- reactionPickerTriggerIcon: reactionPickerTriggerIcon,
419
- reactionPickerTriggerText: reactionPickerTriggerText,
420
- isListItem: isListItem,
421
- hoverableReactionPicker: hoverableSummaryView,
422
- hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
423
- reactionPickerPlacement: reactionPickerPlacement,
424
- reactionPickerPopperZIndex: reactionPickerPopperZIndex
425
- }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, memorizedReactions.map(function (reaction) {
393
+ })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, memorizedReactions.map(function (reaction) {
426
394
  return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
427
395
  key: reaction.emojiId,
428
396
  reaction: reaction,
@@ -438,7 +406,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
438
406
  isViewOnly: isViewOnly,
439
407
  showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
440
408
  });
441
- }))), shouldShowPicker && !pickerInsideList && /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
409
+ }))), shouldShowPicker && /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
442
410
  emojiProvider: emojiProvider,
443
411
  allowAllEmojis: allowAllEmojis,
444
412
  pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
@@ -460,7 +428,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
460
428
  hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
461
429
  reactionPickerPlacement: reactionPickerPlacement,
462
430
  reactionPickerPopperZIndex: reactionPickerPopperZIndex,
463
- className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
431
+ className: (0, _runtime.ax)(["_1e0c1o8l _1pfh1b66"])
464
432
  }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
465
433
  name: "reactions-dialog"
466
434
  }, /*#__PURE__*/_react.default.createElement(_ReactionsDialog.ReactionsDialog, {
@@ -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.8.18";
4
+ const packageVersion = "33.8.20";
5
5
  /**
6
6
  * TODO: move to utility package?
7
7
  * A random sampling function
@@ -1,9 +1,12 @@
1
- ._19bv19bv{padding-left:10px}
2
- ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
1
+ ._18zrze3t{padding-inline:var(--ds-space-0,0)}
2
+ ._195gze3t{margin-inline:var(--ds-space-0,0)}
3
+ ._1mouze3t{margin-block:var(--ds-space-0,0)}
4
+ ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
5
+ ._1rjcze3t{padding-block:var(--ds-space-0,0)}
3
6
  ._8hrz1nam{transform-origin:center center 0}
4
- ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
7
+ ._bozg19bv{padding-inline-start:10px}
8
+ ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
5
9
  ._kqswh2mm{position:relative}
6
- ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
7
- ._u5f31b66{padding-right:var(--ds-space-050,4px)}
8
- ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
9
- ._vwz41crf{line-height:9pt}
10
+ ._vwz41crf{line-height:9pt}
11
+ ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
12
+ ._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
@@ -4,6 +4,7 @@ import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { useCallback, useEffect, useRef, useState } from 'react';
6
6
  import { useIntl } from 'react-intl-next';
7
+ import { cx } from '@atlaskit/css';
7
8
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
8
9
  import { ResourcedEmoji } from '@atlaskit/emoji';
9
10
  import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../analytics';
@@ -18,7 +19,8 @@ import { ReactionButton } from './ReactionButton';
18
19
  import { StaticReaction } from './StaticReaction';
19
20
  import { Box, Inline } from '@atlaskit/primitives/compiled';
20
21
  const styles = {
21
- container: "_kqswh2mm"
22
+ container: "_kqswh2mm",
23
+ listItem: "_195gze3t _1mouze3t _18zrze3t _1rjcze3t"
22
24
  };
23
25
  const emojiStyle = null;
24
26
  const emojiNoReactionStyle = null;
@@ -104,7 +106,7 @@ export const Reaction = ({
104
106
  setIsTooltipEnabled(false);
105
107
  };
106
108
  const emojiAndCount = /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
107
- className: ax(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
109
+ className: ax(["_1rjc1b66 _8hrz1nam _vwz41crf _bozgu2gc _y4ti1b66", reaction.count === 0 && "_1rjc1b66 _bozg19bv _y4tiv77o"])
108
110
  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
109
111
  emojiProvider: emojiProvider,
110
112
  emojiId: emojiId,
@@ -123,7 +125,7 @@ export const Reaction = ({
123
125
  });
124
126
  }
125
127
  return /*#__PURE__*/React.createElement(Box, {
126
- xcss: styles.container,
128
+ xcss: cx(styles.container, fg('jfp_a11y_team_comment_actions_semantic') ? styles.listItem : undefined),
127
129
  as: fg('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
128
130
  }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
129
131
  emojiId: emojiId,
@@ -49,6 +49,7 @@ export const ReactionTooltip = ({
49
49
  }), /*#__PURE__*/React.createElement("li", {
50
50
  onMouseDown: handleClick,
51
51
  onClick: handleClick,
52
+ onKeyDown: fg('platform_suppression_removal_fix_reactions') ? handleClick : undefined,
52
53
  className: ax(["_syaz6r0x", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3gkf6 _30l315cr"])
53
54
  }, users.length > maxReactions && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
54
55
  values: {
@@ -1,24 +1,16 @@
1
1
 
2
- ._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
3
- ._17s9idpf >li{padding-bottom:0}
4
- ._18u0idpf{margin-left:0}
2
+ ._qtt8glyw{list-style:none}._18u0idpf{margin-left:0}
5
3
  ._19bvidpf{padding-left:0}
6
- ._19pk1b66{margin-top:var(--ds-space-050,4px)}
7
4
  ._19pkidpf{margin-top:0}
8
- ._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
9
- ._1b3sidpf >li{padding-left:0}
10
5
  ._1e0c1o8l{display:inline-block}
11
6
  ._1e0c1txw{display:flex}
12
- ._1l0sidpf >li{margin-bottom:0}
7
+ ._1fohidpf >:first-of-type>:first-of-type{margin-inline-start:0}
13
8
  ._1n261g80{flex-wrap:wrap}
14
9
  ._1n261q9c{flex-wrap:nowrap}
15
- ._1pyaidpf >li{margin-top:0}
10
+ ._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
11
+ ._1pfhr5cr{margin-block-start:var(--ds-space-negative-050,-4px)}
16
12
  ._2hwxidpf{margin-right:0}
17
13
  ._4cvr1h6o{align-items:center}
18
- ._694cidpf >li{margin-right:0}
19
- ._9g0pidpf >li{margin-left:0}
20
- ._ahxuidpf >li{padding-top:0}
21
- ._bapwidpf >li{padding-right:0}
22
14
  ._ca0qidpf{padding-top:0}
23
15
  ._kqswh2mm{position:relative}
24
16
  ._kqswpfqs{position:static}
@@ -7,7 +7,6 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
7
7
  import { ModalTransition } from '@atlaskit/modal-dialog';
8
8
  import UFOSegment from '@atlaskit/react-ufo/segment';
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
- import { Box } from '@atlaskit/primitives/compiled';
11
10
  import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../analytics';
12
11
  import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
13
12
  import { messages } from '../shared/i18n';
@@ -22,9 +21,6 @@ const noFlexWrapStyles = null;
22
21
  const noContainerPositionStyles = null;
23
22
  const reactionPickerStyle = null;
24
23
  const listContainerStyles = null;
25
- const pickerListItemStyles = {
26
- picker: "_1e0c1o8l _19pk1b66"
27
- };
28
24
 
29
25
  /**
30
26
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -257,9 +253,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
257
253
  // criteria to show Reactions Dialog
258
254
  const hasEmojiWithFivePlusReactions = reactions.some(reaction => reaction.count >= 5);
259
255
  const shouldShowPicker = !isViewOnly && !(!onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView);
260
- const semanticListEnabled = fg('jfp_a11y_team_comment_actions_semantic');
261
- const addReactionButtonAsListItem = fg('platform-a11y-add-reactions-button-ul-item');
262
- const pickerInsideList = semanticListEnabled && addReactionButtonAsListItem && shouldShowPicker;
263
256
  const sortedReactions = useMemo(() => {
264
257
  return [...memorizedReactions].sort((a, b) => (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count));
265
258
  }, [memorizedReactions]);
@@ -291,7 +284,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
291
284
  name: "reactions"
292
285
  }, /*#__PURE__*/React.createElement("div", {
293
286
  "data-testid": RENDER_REACTIONS_TESTID,
294
- className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
287
+ className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _1pfhr5cr _1fohidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
295
288
  }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
296
289
  "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
297
290
  }, /*#__PURE__*/React.createElement(ReactionSummaryView, {
@@ -324,7 +317,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
324
317
  summaryButtonIconAfter: summaryButtonIconAfter,
325
318
  summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
326
319
  })) : fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("ul", {
327
- className: ax(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm _1pyaidpf _694cidpf _1l0sidpf _9g0pidpf _ahxuidpf _bapwidpf _17s9idpf _1b3sidpf"])
320
+ className: ax(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm"])
328
321
  }, memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
329
322
  key: reaction.emojiId,
330
323
  reaction: reaction,
@@ -339,31 +332,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
339
332
  handleOpenReactionsDialog: handleOpenReactionsDialog,
340
333
  isViewOnly: isViewOnly,
341
334
  showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
342
- })), pickerInsideList && /*#__PURE__*/React.createElement(Box, {
343
- as: "li",
344
- xcss: pickerListItemStyles.picker
345
- }, /*#__PURE__*/React.createElement(ReactionPicker, {
346
- emojiProvider: emojiProvider,
347
- allowAllEmojis: allowAllEmojis,
348
- pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
349
- disabled: status !== ReactionStatus.ready,
350
- onSelection: handleOnSelection,
351
- onOpen: handlePickerOpen,
352
- onCancel: handleOnCancel,
353
- onShowMore: handleOnMore,
354
- tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
355
- emojiPickerSize: emojiPickerSize,
356
- miniMode: miniMode,
357
- showOpaqueBackground: showOpaqueBackground,
358
- showAddReactionText: showAddReactionText,
359
- subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
360
- reactionPickerTriggerIcon: reactionPickerTriggerIcon,
361
- reactionPickerTriggerText: reactionPickerTriggerText,
362
- isListItem: isListItem,
363
- hoverableReactionPicker: hoverableSummaryView,
364
- hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
365
- reactionPickerPlacement: reactionPickerPlacement,
366
- reactionPickerPopperZIndex: reactionPickerPopperZIndex
367
335
  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
368
336
  key: reaction.emojiId,
369
337
  reaction: reaction,
@@ -378,7 +346,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
378
346
  handleOpenReactionsDialog: handleOpenReactionsDialog,
379
347
  isViewOnly: isViewOnly,
380
348
  showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
381
- })))), shouldShowPicker && !pickerInsideList && /*#__PURE__*/React.createElement(ReactionPicker, {
349
+ })))), shouldShowPicker && /*#__PURE__*/React.createElement(ReactionPicker, {
382
350
  emojiProvider: emojiProvider,
383
351
  allowAllEmojis: allowAllEmojis,
384
352
  pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
@@ -400,7 +368,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
400
368
  hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
401
369
  reactionPickerPlacement: reactionPickerPlacement,
402
370
  reactionPickerPopperZIndex: reactionPickerPopperZIndex,
403
- className: ax(["_1e0c1o8l _19pk1b66"])
371
+ className: ax(["_1e0c1o8l _1pfh1b66"])
404
372
  }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
405
373
  name: "reactions-dialog"
406
374
  }, /*#__PURE__*/React.createElement(ReactionsDialog, {
@@ -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.8.18";
7
+ var packageVersion = "33.8.20";
8
8
  /**
9
9
  * TODO: move to utility package?
10
10
  * A random sampling function
@@ -1,9 +1,12 @@
1
- ._19bv19bv{padding-left:10px}
2
- ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
1
+ ._18zrze3t{padding-inline:var(--ds-space-0,0)}
2
+ ._195gze3t{margin-inline:var(--ds-space-0,0)}
3
+ ._1mouze3t{margin-block:var(--ds-space-0,0)}
4
+ ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
5
+ ._1rjcze3t{padding-block:var(--ds-space-0,0)}
3
6
  ._8hrz1nam{transform-origin:center center 0}
4
- ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
7
+ ._bozg19bv{padding-inline-start:10px}
8
+ ._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
5
9
  ._kqswh2mm{position:relative}
6
- ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
7
- ._u5f31b66{padding-right:var(--ds-space-050,4px)}
8
- ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
9
- ._vwz41crf{line-height:9pt}
10
+ ._vwz41crf{line-height:9pt}
11
+ ._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
12
+ ._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
@@ -7,6 +7,7 @@ import { ax, ix } from "@compiled/react/runtime";
7
7
  import _regeneratorRuntime from "@babel/runtime/regenerator";
8
8
  import { useCallback, useEffect, useRef, useState } from 'react';
9
9
  import { useIntl } from 'react-intl-next';
10
+ import { cx } from '@atlaskit/css';
10
11
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
11
12
  import { ResourcedEmoji } from '@atlaskit/emoji';
12
13
  import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../analytics';
@@ -21,7 +22,8 @@ import { ReactionButton } from './ReactionButton';
21
22
  import { StaticReaction } from './StaticReaction';
22
23
  import { Box, Inline } from '@atlaskit/primitives/compiled';
23
24
  var styles = {
24
- container: "_kqswh2mm"
25
+ container: "_kqswh2mm",
26
+ listItem: "_195gze3t _1mouze3t _18zrze3t _1rjcze3t"
25
27
  };
26
28
  var emojiStyle = null;
27
29
  var emojiNoReactionStyle = null;
@@ -128,7 +130,7 @@ export var Reaction = function Reaction(_ref) {
128
130
  setIsTooltipEnabled(false);
129
131
  };
130
132
  var emojiAndCount = /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
131
- className: ax(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
133
+ className: ax(["_1rjc1b66 _8hrz1nam _vwz41crf _bozgu2gc _y4ti1b66", reaction.count === 0 && "_1rjc1b66 _bozg19bv _y4tiv77o"])
132
134
  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
133
135
  emojiProvider: emojiProvider,
134
136
  emojiId: emojiId,
@@ -147,7 +149,7 @@ export var Reaction = function Reaction(_ref) {
147
149
  });
148
150
  }
149
151
  return /*#__PURE__*/React.createElement(Box, {
150
- xcss: styles.container,
152
+ xcss: cx(styles.container, fg('jfp_a11y_team_comment_actions_semantic') ? styles.listItem : undefined),
151
153
  as: fg('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
152
154
  }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
153
155
  emojiId: emojiId,
@@ -52,6 +52,7 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
52
52
  }), /*#__PURE__*/React.createElement("li", {
53
53
  onMouseDown: handleClick,
54
54
  onClick: handleClick,
55
+ onKeyDown: fg('platform_suppression_removal_fix_reactions') ? handleClick : undefined,
55
56
  className: ax(["_syaz1lqe", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3pioe _30l31i9p"]),
56
57
  style: {
57
58
  "--_14nrcaz": ix("var(--ds-text-inverse, ".concat(N90, ")")),
@@ -1,24 +1,16 @@
1
1
 
2
- ._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
3
- ._17s9idpf >li{padding-bottom:0}
4
- ._18u0idpf{margin-left:0}
2
+ ._qtt8glyw{list-style:none}._18u0idpf{margin-left:0}
5
3
  ._19bvidpf{padding-left:0}
6
- ._19pk1b66{margin-top:var(--ds-space-050,4px)}
7
4
  ._19pkidpf{margin-top:0}
8
- ._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
9
- ._1b3sidpf >li{padding-left:0}
10
5
  ._1e0c1o8l{display:inline-block}
11
6
  ._1e0c1txw{display:flex}
12
- ._1l0sidpf >li{margin-bottom:0}
7
+ ._1fohidpf >:first-of-type>:first-of-type{margin-inline-start:0}
13
8
  ._1n261g80{flex-wrap:wrap}
14
9
  ._1n261q9c{flex-wrap:nowrap}
15
- ._1pyaidpf >li{margin-top:0}
10
+ ._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
11
+ ._1pfhr5cr{margin-block-start:var(--ds-space-negative-050,-4px)}
16
12
  ._2hwxidpf{margin-right:0}
17
13
  ._4cvr1h6o{align-items:center}
18
- ._694cidpf >li{margin-right:0}
19
- ._9g0pidpf >li{margin-left:0}
20
- ._ahxuidpf >li{padding-top:0}
21
- ._bapwidpf >li{padding-right:0}
22
14
  ._ca0qidpf{padding-top:0}
23
15
  ._kqswh2mm{position:relative}
24
16
  ._kqswpfqs{position:static}
@@ -9,7 +9,6 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
9
9
  import { ModalTransition } from '@atlaskit/modal-dialog';
10
10
  import UFOSegment from '@atlaskit/react-ufo/segment';
11
11
  import { fg } from '@atlaskit/platform-feature-flags';
12
- import { Box } from '@atlaskit/primitives/compiled';
13
12
  import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../analytics';
14
13
  import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
15
14
  import { messages } from '../shared/i18n';
@@ -24,9 +23,6 @@ var noFlexWrapStyles = null;
24
23
  var noContainerPositionStyles = null;
25
24
  var reactionPickerStyle = null;
26
25
  var listContainerStyles = null;
27
- var pickerListItemStyles = {
28
- picker: "_1e0c1o8l _19pk1b66"
29
- };
30
26
 
31
27
  /**
32
28
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -296,9 +292,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
296
292
  return reaction.count >= 5;
297
293
  });
298
294
  var shouldShowPicker = !isViewOnly && !(!onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView);
299
- var semanticListEnabled = fg('jfp_a11y_team_comment_actions_semantic');
300
- var addReactionButtonAsListItem = fg('platform-a11y-add-reactions-button-ul-item');
301
- var pickerInsideList = semanticListEnabled && addReactionButtonAsListItem && shouldShowPicker;
302
295
  var sortedReactions = useMemo(function () {
303
296
  return _toConsumableArray(memorizedReactions).sort(function (a, b) {
304
297
  return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
@@ -334,7 +327,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
334
327
  name: "reactions"
335
328
  }, /*#__PURE__*/React.createElement("div", {
336
329
  "data-testid": RENDER_REACTIONS_TESTID,
337
- className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
330
+ className: ax(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _1pfhr5cr _1fohidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
338
331
  }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
339
332
  "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
340
333
  }, /*#__PURE__*/React.createElement(ReactionSummaryView, {
@@ -369,7 +362,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
369
362
  summaryButtonIconAfter: summaryButtonIconAfter,
370
363
  summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
371
364
  })) : fg('jfp_a11y_team_comment_actions_semantic') ? /*#__PURE__*/React.createElement("ul", {
372
- className: ax(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm _1pyaidpf _694cidpf _1l0sidpf _9g0pidpf _ahxuidpf _bapwidpf _17s9idpf _1b3sidpf"])
365
+ className: ax(["_qtt8glyw _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1txw _1n261g80 _4cvr1h6o _kqswh2mm"])
373
366
  }, memorizedReactions.map(function (reaction) {
374
367
  return /*#__PURE__*/React.createElement(Reaction, {
375
368
  key: reaction.emojiId,
@@ -386,32 +379,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
386
379
  isViewOnly: isViewOnly,
387
380
  showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
388
381
  });
389
- }), pickerInsideList && /*#__PURE__*/React.createElement(Box, {
390
- as: "li",
391
- xcss: pickerListItemStyles.picker
392
- }, /*#__PURE__*/React.createElement(ReactionPicker, {
393
- emojiProvider: emojiProvider,
394
- allowAllEmojis: allowAllEmojis,
395
- pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
396
- disabled: status !== ReactionStatus.ready,
397
- onSelection: handleOnSelection,
398
- onOpen: handlePickerOpen,
399
- onCancel: handleOnCancel,
400
- onShowMore: handleOnMore,
401
- tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
402
- emojiPickerSize: emojiPickerSize,
403
- miniMode: miniMode,
404
- showOpaqueBackground: showOpaqueBackground,
405
- showAddReactionText: showAddReactionText,
406
- subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
407
- reactionPickerTriggerIcon: reactionPickerTriggerIcon,
408
- reactionPickerTriggerText: reactionPickerTriggerText,
409
- isListItem: isListItem,
410
- hoverableReactionPicker: hoverableSummaryView,
411
- hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
412
- reactionPickerPlacement: reactionPickerPlacement,
413
- reactionPickerPopperZIndex: reactionPickerPopperZIndex
414
- }))) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(function (reaction) {
382
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(function (reaction) {
415
383
  return /*#__PURE__*/React.createElement(Reaction, {
416
384
  key: reaction.emojiId,
417
385
  reaction: reaction,
@@ -427,7 +395,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
427
395
  isViewOnly: isViewOnly,
428
396
  showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
429
397
  });
430
- }))), shouldShowPicker && !pickerInsideList && /*#__PURE__*/React.createElement(ReactionPicker, {
398
+ }))), shouldShowPicker && /*#__PURE__*/React.createElement(ReactionPicker, {
431
399
  emojiProvider: emojiProvider,
432
400
  allowAllEmojis: allowAllEmojis,
433
401
  pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
@@ -449,7 +417,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
449
417
  hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
450
418
  reactionPickerPlacement: reactionPickerPlacement,
451
419
  reactionPickerPopperZIndex: reactionPickerPopperZIndex,
452
- className: ax(["_1e0c1o8l _19pk1b66"])
420
+ className: ax(["_1e0c1o8l _1pfh1b66"])
453
421
  }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
454
422
  name: "reactions-dialog"
455
423
  }, /*#__PURE__*/React.createElement(ReactionsDialog, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/reactions",
3
- "version": "33.8.19",
3
+ "version": "33.8.21",
4
4
  "description": "Reactions component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -126,9 +126,6 @@
126
126
  "jfp_a11y_team_comment_actions_semantic": {
127
127
  "type": "boolean"
128
128
  },
129
- "platform-a11y-add-reactions-button-ul-item": {
130
- "type": "boolean"
131
- },
132
129
  "platform_suppression_removal_fix_reactions": {
133
130
  "type": "boolean"
134
131
  }