@atlaskit/reactions 33.8.0 → 33.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/components/Reaction.compiled.css +1 -0
- package/dist/cjs/components/Reaction.js +3 -10
- package/dist/cjs/components/ReactionPicker.js +5 -8
- package/dist/cjs/components/Reactions.compiled.css +1 -5
- package/dist/cjs/components/Reactions.js +105 -176
- package/dist/cjs/components/Trigger.js +1 -1
- package/dist/es2019/components/Reaction.compiled.css +1 -0
- package/dist/es2019/components/Reaction.js +3 -9
- package/dist/es2019/components/ReactionPicker.js +5 -8
- package/dist/es2019/components/Reactions.compiled.css +1 -5
- package/dist/es2019/components/Reactions.js +28 -97
- package/dist/es2019/components/Trigger.js +1 -1
- package/dist/esm/components/Reaction.compiled.css +1 -0
- package/dist/esm/components/Reaction.js +3 -10
- package/dist/esm/components/ReactionPicker.js +5 -8
- package/dist/esm/components/Reactions.compiled.css +1 -5
- package/dist/esm/components/Reactions.js +105 -176
- package/dist/esm/components/Trigger.js +1 -1
- package/dist/types/components/Reaction.d.ts +1 -5
- package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts +1 -1
- package/dist/types-ts4.5/components/Reaction.d.ts +1 -5
- package/dist/types-ts4.5/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts +1 -1
- package/package.json +3 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/reactions
|
|
2
2
|
|
|
3
|
+
## 33.8.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`daf962303a5ce`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/daf962303a5ce) -
|
|
8
|
+
tidyup fg platform_reactions_custom_popper_zindex
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 33.8.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
._19bvu2gc{padding-left:var(--ds-space-100,8px)}
|
|
3
3
|
._8hrz1nam{transform-origin:center center 0}
|
|
4
4
|
._ca0q1b66{padding-top:var(--ds-space-050,4px)}
|
|
5
|
+
._kqswh2mm{position:relative}
|
|
5
6
|
._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
|
|
6
7
|
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
|
7
8
|
._u5f3v77o{padding-right:var(--ds-space-025,2px)}
|
|
@@ -26,12 +26,10 @@ var _utils = require("../shared/utils");
|
|
|
26
26
|
var _constants = require("../shared/constants");
|
|
27
27
|
var _ReactionButton = require("./ReactionButton");
|
|
28
28
|
var _StaticReaction = require("./StaticReaction");
|
|
29
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
30
29
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
31
30
|
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
31
|
var styles = {
|
|
33
|
-
container: "_kqswh2mm"
|
|
34
|
-
listContainer: "_qtt8glyw _kqswh2mm _19pkze3t"
|
|
32
|
+
container: "_kqswh2mm"
|
|
35
33
|
};
|
|
36
34
|
var emojiStyle = null;
|
|
37
35
|
var emojiNoReactionStyle = null;
|
|
@@ -61,9 +59,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
|
|
|
61
59
|
handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
|
|
62
60
|
_ref$isViewOnly = _ref.isViewOnly,
|
|
63
61
|
isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
|
|
64
|
-
showSubtleStyle = _ref.showSubtleStyle
|
|
65
|
-
_ref$isListItem = _ref.isListItem,
|
|
66
|
-
isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem;
|
|
62
|
+
showSubtleStyle = _ref.showSubtleStyle;
|
|
67
63
|
var intl = (0, _reactIntlNext.useIntl)();
|
|
68
64
|
var hoverStart = (0, _react.useRef)();
|
|
69
65
|
var focusStart = (0, _react.useRef)();
|
|
@@ -158,10 +154,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
|
|
|
158
154
|
count: reaction.count
|
|
159
155
|
});
|
|
160
156
|
}
|
|
161
|
-
return /*#__PURE__*/React.createElement(_compiled.Box,
|
|
162
|
-
as: 'li',
|
|
163
|
-
xcss: styles.listContainer
|
|
164
|
-
} : {
|
|
157
|
+
return /*#__PURE__*/React.createElement(_compiled.Box, {
|
|
165
158
|
xcss: styles.container
|
|
166
159
|
}, showParticleEffect && /*#__PURE__*/React.createElement(_ReactionParticleEffect.ReactionParticleEffect, {
|
|
167
160
|
emojiId: emojiId,
|
|
@@ -9,7 +9,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTID = exports.PopperWrapper = void 0;
|
|
10
10
|
require("./ReactionPicker.compiled.css");
|
|
11
11
|
var _runtime = require("@compiled/react/runtime");
|
|
12
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
13
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -18,7 +17,6 @@ var _picker = require("@atlaskit/emoji/picker");
|
|
|
18
17
|
var _popper = require("@atlaskit/popper");
|
|
19
18
|
var _constants = require("@atlaskit/theme/constants");
|
|
20
19
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
21
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
20
|
var _useCloseManager = require("../hooks/useCloseManager");
|
|
23
21
|
var _useDelayedState3 = require("../hooks/useDelayedState");
|
|
24
22
|
var _useFocusTrap = require("../hooks/useFocusTrap");
|
|
@@ -298,7 +296,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
|
|
|
298
296
|
_react.default.createElement(_compiled.Box, {
|
|
299
297
|
onMouseEnter: handleTriggerMouseEnter,
|
|
300
298
|
onMouseLeave: handleTriggerMouseLeave
|
|
301
|
-
}, /*#__PURE__*/_react.default.createElement(_Trigger.Trigger,
|
|
299
|
+
}, /*#__PURE__*/_react.default.createElement(_Trigger.Trigger, {
|
|
302
300
|
ariaAttributes: {
|
|
303
301
|
'aria-expanded': isPopupTrayOpen,
|
|
304
302
|
'aria-controls': PICKER_CONTROL_ID
|
|
@@ -322,20 +320,19 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
|
|
|
322
320
|
showAddReactionText: showAddReactionText,
|
|
323
321
|
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
324
322
|
reactionPickerTriggerIcon: reactionPickerTriggerIcon,
|
|
325
|
-
reactionPickerTriggerText: reactionPickerTriggerText
|
|
326
|
-
}, !(0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') && {
|
|
323
|
+
reactionPickerTriggerText: reactionPickerTriggerText,
|
|
327
324
|
isListItem: isListItem
|
|
328
|
-
}))
|
|
325
|
+
}))
|
|
329
326
|
);
|
|
330
327
|
}), isPopupTrayOpen && /*#__PURE__*/_react.default.createElement(_portal.default, {
|
|
331
|
-
zIndex:
|
|
328
|
+
zIndex: reactionPickerPopperZIndex || _constants.layers.flag()
|
|
332
329
|
}, /*#__PURE__*/_react.default.createElement(PopperWrapper, {
|
|
333
330
|
settings: settings,
|
|
334
331
|
popperModifiers: popperModifiers,
|
|
335
332
|
isOpen: isPopupTrayOpen,
|
|
336
333
|
onClose: onClose,
|
|
337
334
|
triggerRef: triggerRef,
|
|
338
|
-
zIndex:
|
|
335
|
+
zIndex: reactionPickerPopperZIndex || _constants.layers.flag()
|
|
339
336
|
}, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
340
337
|
xcss: additionalStyles.selectorContainer,
|
|
341
338
|
onMouseEnter: handlePopupMouseEnter,
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
|
|
3
|
-
._19bvze3t{padding-left:var(--ds-space-0,0)}
|
|
1
|
+
._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
|
|
4
2
|
._19pk1b66{margin-top:var(--ds-space-050,4px)}
|
|
5
|
-
._19pk1wng{margin-top:var(--ds-space-negative-050,-4px)!important}
|
|
6
3
|
._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
|
|
7
|
-
._19pkze3t{margin-top:var(--ds-space-0,0)}
|
|
8
4
|
._1e0c1o8l{display:inline-block}
|
|
9
5
|
._1e0c1txw{display:flex}
|
|
10
6
|
._1n261g80{flex-wrap:wrap}
|
|
@@ -11,7 +11,6 @@ exports.getTooltip = getTooltip;
|
|
|
11
11
|
exports.ufoExperiences = void 0;
|
|
12
12
|
require("./Reactions.compiled.css");
|
|
13
13
|
var _runtime = require("@compiled/react/runtime");
|
|
14
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
15
14
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
16
15
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
16
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -19,7 +18,6 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
19
18
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
20
19
|
var _modalDialog = require("@atlaskit/modal-dialog");
|
|
21
20
|
var _segment = _interopRequireDefault(require("@atlaskit/react-ufo/segment"));
|
|
22
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
23
21
|
var _analytics = require("../analytics");
|
|
24
22
|
var _constants = require("../shared/constants");
|
|
25
23
|
var _i18n = require("../shared/i18n");
|
|
@@ -33,8 +31,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
33
31
|
var wrapperStyle = null;
|
|
34
32
|
var noFlexWrapStyles = null;
|
|
35
33
|
var noContainerPositionStyles = null;
|
|
36
|
-
var listWrapperStyle = null;
|
|
37
|
-
var listItemStyle = null;
|
|
38
34
|
var reactionPickerStyle = null;
|
|
39
35
|
|
|
40
36
|
/**
|
|
@@ -81,110 +77,81 @@ function getTooltip(status, errorMessage, tooltipContent) {
|
|
|
81
77
|
return !!tooltipContent ? tooltipContent : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction);
|
|
82
78
|
}
|
|
83
79
|
}
|
|
84
|
-
var ReactionsWrapper = function ReactionsWrapper(_ref) {
|
|
85
|
-
var children = _ref.children,
|
|
86
|
-
noWrap = _ref.noWrap,
|
|
87
|
-
noRelativeContainer = _ref.noRelativeContainer,
|
|
88
|
-
_ref$isListItem = _ref.isListItem,
|
|
89
|
-
isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem,
|
|
90
|
-
_ref$reactionsLength = _ref.reactionsLength,
|
|
91
|
-
reactionsLength = _ref$reactionsLength === void 0 ? 0 : _ref$reactionsLength,
|
|
92
|
-
_ref$isShowingDefault = _ref.isShowingDefaultReactions,
|
|
93
|
-
isShowingDefaultReactions = _ref$isShowingDefault === void 0 ? false : _ref$isShowingDefault;
|
|
94
|
-
if (isListItem && (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic')) {
|
|
95
|
-
// with no reactions picker render children inside listitem container
|
|
96
|
-
if (reactionsLength === 0 && !isShowingDefaultReactions) {
|
|
97
|
-
return /*#__PURE__*/_react.default.createElement("li", {
|
|
98
|
-
"data-testid": RENDER_REACTIONS_TESTID,
|
|
99
|
-
className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", "_19bvze3t _19pk1wng", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
|
|
100
|
-
}, children);
|
|
101
|
-
}
|
|
102
80
|
|
|
103
|
-
// with reactions or default reactions present, reactions & picker rendered as listitem inside un-ordered list
|
|
104
|
-
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
105
|
-
"data-testid": RENDER_REACTIONS_TESTID,
|
|
106
|
-
className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", "_19bvze3t _19pk1wng", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
|
|
107
|
-
}, children);
|
|
108
|
-
}
|
|
109
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
110
|
-
"data-testid": RENDER_REACTIONS_TESTID,
|
|
111
|
-
className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
|
|
112
|
-
}, children);
|
|
113
|
-
};
|
|
114
81
|
/**
|
|
115
82
|
* Renders list of reactions
|
|
116
83
|
*/
|
|
117
|
-
var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (
|
|
118
|
-
var
|
|
119
|
-
flash =
|
|
120
|
-
|
|
121
|
-
particleEffectByEmoji =
|
|
122
|
-
status =
|
|
123
|
-
errorMessage =
|
|
124
|
-
loadReaction =
|
|
125
|
-
quickReactionEmojis =
|
|
126
|
-
pickerQuickReactionEmojiIds =
|
|
127
|
-
|
|
128
|
-
getReactionDetails =
|
|
129
|
-
onSelection =
|
|
130
|
-
|
|
131
|
-
reactions =
|
|
132
|
-
emojiProvider =
|
|
133
|
-
allowAllEmojis =
|
|
134
|
-
onReactionClick =
|
|
135
|
-
allowUserDialog =
|
|
136
|
-
|
|
137
|
-
onDialogOpenCallback =
|
|
138
|
-
|
|
139
|
-
onDialogCloseCallback =
|
|
140
|
-
|
|
141
|
-
onDialogSelectReactionCallback =
|
|
142
|
-
|
|
143
|
-
onDialogPageChangeCallback =
|
|
144
|
-
|
|
145
|
-
emojiPickerSize =
|
|
146
|
-
|
|
147
|
-
miniMode =
|
|
148
|
-
|
|
149
|
-
summaryViewEnabled =
|
|
150
|
-
|
|
151
|
-
summaryViewThreshold =
|
|
152
|
-
summaryViewPlacement =
|
|
153
|
-
|
|
154
|
-
showOpaqueBackground =
|
|
155
|
-
|
|
156
|
-
subtleReactionsSummaryAndPicker =
|
|
157
|
-
|
|
158
|
-
showAddReactionText =
|
|
159
|
-
|
|
160
|
-
hideDefaultReactions =
|
|
161
|
-
ProfileCardWrapper =
|
|
162
|
-
|
|
163
|
-
onlyRenderPicker =
|
|
164
|
-
|
|
165
|
-
isViewOnly =
|
|
166
|
-
|
|
167
|
-
noWrap =
|
|
168
|
-
|
|
169
|
-
noRelativeContainer =
|
|
170
|
-
showSubtleDefaultReactions =
|
|
171
|
-
reactionPickerTriggerTooltipContent =
|
|
172
|
-
reactionPickerTriggerIcon =
|
|
173
|
-
|
|
174
|
-
allowSelectFromSummaryView =
|
|
175
|
-
|
|
176
|
-
useButtonAlignmentStyling =
|
|
177
|
-
reactionPickerTriggerText =
|
|
178
|
-
|
|
179
|
-
hoverableSummaryView =
|
|
180
|
-
|
|
181
|
-
isListItem =
|
|
182
|
-
summaryGetOptimisticImageURL =
|
|
183
|
-
reactionPickerPlacement =
|
|
184
|
-
summaryButtonIconAfter =
|
|
185
|
-
|
|
186
|
-
renderParticleEffectOnSummaryView =
|
|
187
|
-
reactionPickerPopperZIndex =
|
|
84
|
+
var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
85
|
+
var _ref$flash = _ref.flash,
|
|
86
|
+
flash = _ref$flash === void 0 ? {} : _ref$flash,
|
|
87
|
+
_ref$particleEffectBy = _ref.particleEffectByEmoji,
|
|
88
|
+
particleEffectByEmoji = _ref$particleEffectBy === void 0 ? {} : _ref$particleEffectBy,
|
|
89
|
+
status = _ref.status,
|
|
90
|
+
errorMessage = _ref.errorMessage,
|
|
91
|
+
loadReaction = _ref.loadReaction,
|
|
92
|
+
quickReactionEmojis = _ref.quickReactionEmojis,
|
|
93
|
+
pickerQuickReactionEmojiIds = _ref.pickerQuickReactionEmojiIds,
|
|
94
|
+
_ref$getReactionDetai = _ref.getReactionDetails,
|
|
95
|
+
getReactionDetails = _ref$getReactionDetai === void 0 ? function () {} : _ref$getReactionDetai,
|
|
96
|
+
onSelection = _ref.onSelection,
|
|
97
|
+
_ref$reactions = _ref.reactions,
|
|
98
|
+
reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
|
|
99
|
+
emojiProvider = _ref.emojiProvider,
|
|
100
|
+
allowAllEmojis = _ref.allowAllEmojis,
|
|
101
|
+
onReactionClick = _ref.onReactionClick,
|
|
102
|
+
allowUserDialog = _ref.allowUserDialog,
|
|
103
|
+
_ref$onDialogOpenCall = _ref.onDialogOpenCallback,
|
|
104
|
+
onDialogOpenCallback = _ref$onDialogOpenCall === void 0 ? function () {} : _ref$onDialogOpenCall,
|
|
105
|
+
_ref$onDialogCloseCal = _ref.onDialogCloseCallback,
|
|
106
|
+
onDialogCloseCallback = _ref$onDialogCloseCal === void 0 ? function () {} : _ref$onDialogCloseCal,
|
|
107
|
+
_ref$onDialogSelectRe = _ref.onDialogSelectReactionCallback,
|
|
108
|
+
onDialogSelectReactionCallback = _ref$onDialogSelectRe === void 0 ? function () {} : _ref$onDialogSelectRe,
|
|
109
|
+
_ref$onDialogPageChan = _ref.onDialogPageChangeCallback,
|
|
110
|
+
onDialogPageChangeCallback = _ref$onDialogPageChan === void 0 ? function () {} : _ref$onDialogPageChan,
|
|
111
|
+
_ref$emojiPickerSize = _ref.emojiPickerSize,
|
|
112
|
+
emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
|
|
113
|
+
_ref$miniMode = _ref.miniMode,
|
|
114
|
+
miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
|
|
115
|
+
_ref$summaryViewEnabl = _ref.summaryViewEnabled,
|
|
116
|
+
summaryViewEnabled = _ref$summaryViewEnabl === void 0 ? false : _ref$summaryViewEnabl,
|
|
117
|
+
_ref$summaryViewThres = _ref.summaryViewThreshold,
|
|
118
|
+
summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres,
|
|
119
|
+
summaryViewPlacement = _ref.summaryViewPlacement,
|
|
120
|
+
_ref$showOpaqueBackgr = _ref.showOpaqueBackground,
|
|
121
|
+
showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
|
|
122
|
+
_ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
|
|
123
|
+
subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
|
|
124
|
+
_ref$showAddReactionT = _ref.showAddReactionText,
|
|
125
|
+
showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
|
|
126
|
+
_ref$hideDefaultReact = _ref.hideDefaultReactions,
|
|
127
|
+
hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
|
|
128
|
+
ProfileCardWrapper = _ref.ProfileCardWrapper,
|
|
129
|
+
_ref$onlyRenderPicker = _ref.onlyRenderPicker,
|
|
130
|
+
onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker,
|
|
131
|
+
_ref$isViewOnly = _ref.isViewOnly,
|
|
132
|
+
isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
|
|
133
|
+
_ref$noWrap = _ref.noWrap,
|
|
134
|
+
noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
|
|
135
|
+
_ref$noRelativeContai = _ref.noRelativeContainer,
|
|
136
|
+
noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
|
|
137
|
+
showSubtleDefaultReactions = _ref.showSubtleDefaultReactions,
|
|
138
|
+
reactionPickerTriggerTooltipContent = _ref.reactionPickerTriggerTooltipContent,
|
|
139
|
+
reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
|
|
140
|
+
_ref$allowSelectFromS = _ref.allowSelectFromSummaryView,
|
|
141
|
+
allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS,
|
|
142
|
+
_ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
|
|
143
|
+
useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
|
|
144
|
+
reactionPickerTriggerText = _ref.reactionPickerTriggerText,
|
|
145
|
+
_ref$hoverableSummary = _ref.hoverableSummaryView,
|
|
146
|
+
hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary,
|
|
147
|
+
_ref$isListItem = _ref.isListItem,
|
|
148
|
+
isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem,
|
|
149
|
+
summaryGetOptimisticImageURL = _ref.summaryGetOptimisticImageURL,
|
|
150
|
+
reactionPickerPlacement = _ref.reactionPickerPlacement,
|
|
151
|
+
summaryButtonIconAfter = _ref.summaryButtonIconAfter,
|
|
152
|
+
_ref$renderParticleEf = _ref.renderParticleEffectOnSummaryView,
|
|
153
|
+
renderParticleEffectOnSummaryView = _ref$renderParticleEf === void 0 ? false : _ref$renderParticleEf,
|
|
154
|
+
reactionPickerPopperZIndex = _ref.reactionPickerPopperZIndex;
|
|
188
155
|
var _useState = (0, _react.useState)(''),
|
|
189
156
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
190
157
|
selectedEmojiId = _useState2[0],
|
|
@@ -344,11 +311,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
|
|
|
344
311
|
* @param emojiId initial emoji id to load dialog with
|
|
345
312
|
*/
|
|
346
313
|
var _handleOpenReactionsDialog = function handleOpenReactionsDialog() {
|
|
347
|
-
var
|
|
348
|
-
|
|
349
|
-
emojiId =
|
|
350
|
-
|
|
351
|
-
source =
|
|
314
|
+
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
315
|
+
_ref2$emojiId = _ref2.emojiId,
|
|
316
|
+
emojiId = _ref2$emojiId === void 0 ? sortedReactions[0].emojiId : _ref2$emojiId,
|
|
317
|
+
_ref2$source = _ref2.source,
|
|
318
|
+
source = _ref2$source === void 0 ? 'endOfPageReactions' : _ref2$source;
|
|
352
319
|
// ufo start opening reaction dialog
|
|
353
320
|
ufoExperiences.openDialog.start();
|
|
354
321
|
getReactionDetails(emojiId);
|
|
@@ -364,70 +331,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
|
|
|
364
331
|
}
|
|
365
332
|
});
|
|
366
333
|
};
|
|
367
|
-
var renderReactionPicker = function renderReactionPicker() {
|
|
368
|
-
if (isListItem && memorizedReactions.length > 0 && (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic')) {
|
|
369
|
-
// render the reaction picker inside li when reactions are present
|
|
370
|
-
return /*#__PURE__*/_react.default.createElement("li", {
|
|
371
|
-
className: (0, _runtime.ax)(["_qtt8glyw _19pkze3t"])
|
|
372
|
-
}, /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
|
|
373
|
-
emojiProvider: emojiProvider,
|
|
374
|
-
allowAllEmojis: allowAllEmojis,
|
|
375
|
-
pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
|
|
376
|
-
disabled: status !== _types.ReactionStatus.ready,
|
|
377
|
-
onSelection: handleOnSelection,
|
|
378
|
-
onOpen: handlePickerOpen,
|
|
379
|
-
onCancel: handleOnCancel,
|
|
380
|
-
onShowMore: handleOnMore,
|
|
381
|
-
tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
|
|
382
|
-
emojiPickerSize: emojiPickerSize,
|
|
383
|
-
miniMode: miniMode,
|
|
384
|
-
showOpaqueBackground: showOpaqueBackground,
|
|
385
|
-
showAddReactionText: showAddReactionText,
|
|
386
|
-
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
387
|
-
reactionPickerTriggerIcon: reactionPickerTriggerIcon,
|
|
388
|
-
reactionPickerTriggerText: reactionPickerTriggerText,
|
|
389
|
-
hoverableReactionPicker: hoverableSummaryView,
|
|
390
|
-
hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
|
|
391
|
-
reactionPickerPlacement: reactionPickerPlacement,
|
|
392
|
-
reactionPickerPopperZIndex: reactionPickerPopperZIndex,
|
|
393
|
-
className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
|
|
394
|
-
}));
|
|
395
|
-
}
|
|
396
|
-
return /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
|
|
397
|
-
emojiProvider: emojiProvider,
|
|
398
|
-
allowAllEmojis: allowAllEmojis,
|
|
399
|
-
pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
|
|
400
|
-
disabled: status !== _types.ReactionStatus.ready,
|
|
401
|
-
onSelection: handleOnSelection,
|
|
402
|
-
onOpen: handlePickerOpen,
|
|
403
|
-
onCancel: handleOnCancel,
|
|
404
|
-
onShowMore: handleOnMore,
|
|
405
|
-
tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
|
|
406
|
-
emojiPickerSize: emojiPickerSize,
|
|
407
|
-
miniMode: miniMode,
|
|
408
|
-
showOpaqueBackground: showOpaqueBackground,
|
|
409
|
-
showAddReactionText: showAddReactionText,
|
|
410
|
-
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
411
|
-
reactionPickerTriggerIcon: reactionPickerTriggerIcon,
|
|
412
|
-
reactionPickerTriggerText: reactionPickerTriggerText,
|
|
413
|
-
isListItem: isListItem,
|
|
414
|
-
hoverableReactionPicker: hoverableSummaryView,
|
|
415
|
-
hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
|
|
416
|
-
reactionPickerPlacement: reactionPickerPlacement,
|
|
417
|
-
reactionPickerPopperZIndex: reactionPickerPopperZIndex,
|
|
418
|
-
className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
|
|
419
|
-
});
|
|
420
|
-
};
|
|
421
334
|
return /*#__PURE__*/_react.default.createElement(_segment.default, {
|
|
422
335
|
name: "reactions"
|
|
423
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
reactionsLength: memorizedReactions.length,
|
|
427
|
-
noWrap: noWrap,
|
|
428
|
-
isShowingDefaultReactions:
|
|
429
|
-
// Conditon to determine whether showing the default reacitons
|
|
430
|
-
!(reactions.length === 0 && hideDefaultReactions || reactions.length > 0 || !quickReactionEmojis)
|
|
336
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
337
|
+
"data-testid": RENDER_REACTIONS_TESTID,
|
|
338
|
+
className: (0, _runtime.ax)(["_1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
|
|
431
339
|
}, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/_react.default.createElement("div", {
|
|
432
340
|
"data-testid": RENDER_REACTIONS_SUMMARY_TESTID
|
|
433
341
|
}, /*#__PURE__*/_react.default.createElement(_ReactionSummaryView.ReactionSummaryView, {
|
|
@@ -462,7 +370,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
|
|
|
462
370
|
summaryButtonIconAfter: summaryButtonIconAfter,
|
|
463
371
|
summaryViewParticleEffectEmojiId: renderParticleEffectOnSummaryView ? summaryViewParticleEffectEmojiId : null
|
|
464
372
|
})) : memorizedReactions.map(function (reaction) {
|
|
465
|
-
return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction,
|
|
373
|
+
return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
|
|
466
374
|
key: reaction.emojiId,
|
|
467
375
|
reaction: reaction,
|
|
468
376
|
emojiProvider: emojiProvider,
|
|
@@ -476,10 +384,31 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
|
|
|
476
384
|
handleOpenReactionsDialog: _handleOpenReactionsDialog,
|
|
477
385
|
isViewOnly: isViewOnly,
|
|
478
386
|
showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
387
|
+
});
|
|
388
|
+
})), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
|
|
389
|
+
emojiProvider: emojiProvider,
|
|
390
|
+
allowAllEmojis: allowAllEmojis,
|
|
391
|
+
pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
|
|
392
|
+
disabled: status !== _types.ReactionStatus.ready,
|
|
393
|
+
onSelection: handleOnSelection,
|
|
394
|
+
onOpen: handlePickerOpen,
|
|
395
|
+
onCancel: handleOnCancel,
|
|
396
|
+
onShowMore: handleOnMore,
|
|
397
|
+
tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
|
|
398
|
+
emojiPickerSize: emojiPickerSize,
|
|
399
|
+
miniMode: miniMode,
|
|
400
|
+
showOpaqueBackground: showOpaqueBackground,
|
|
401
|
+
showAddReactionText: showAddReactionText,
|
|
402
|
+
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
403
|
+
reactionPickerTriggerIcon: reactionPickerTriggerIcon,
|
|
404
|
+
reactionPickerTriggerText: reactionPickerTriggerText,
|
|
405
|
+
isListItem: isListItem,
|
|
406
|
+
hoverableReactionPicker: hoverableSummaryView,
|
|
407
|
+
hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
|
|
408
|
+
reactionPickerPlacement: reactionPickerPlacement,
|
|
409
|
+
reactionPickerPopperZIndex: reactionPickerPopperZIndex,
|
|
410
|
+
className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
|
|
411
|
+
}), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
|
|
483
412
|
name: "reactions-dialog"
|
|
484
413
|
}, /*#__PURE__*/_react.default.createElement(_ReactionsDialog.ReactionsDialog, {
|
|
485
414
|
selectedEmojiId: selectedEmojiId,
|
|
@@ -116,7 +116,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
|
|
|
116
116
|
canAppear: function canAppear() {
|
|
117
117
|
return !showAddReactionText;
|
|
118
118
|
}
|
|
119
|
-
}, isListItem
|
|
119
|
+
}, isListItem ? /*#__PURE__*/_react2.default.createElement("li", {
|
|
120
120
|
"data-testid": RENDER_LIST_ITEM_WRAPPER_TESTID,
|
|
121
121
|
className: (0, _runtime.ax)(["_qtt8glyw"])
|
|
122
122
|
}, renderPressableButton()) : renderPressableButton()));
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
._19bvu2gc{padding-left:var(--ds-space-100,8px)}
|
|
3
3
|
._8hrz1nam{transform-origin:center center 0}
|
|
4
4
|
._ca0q1b66{padding-top:var(--ds-space-050,4px)}
|
|
5
|
+
._kqswh2mm{position:relative}
|
|
5
6
|
._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
|
|
6
7
|
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
|
7
8
|
._u5f3v77o{padding-right:var(--ds-space-025,2px)}
|
|
@@ -15,11 +15,9 @@ import { isLeftClick } from '../shared/utils';
|
|
|
15
15
|
import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
|
|
16
16
|
import { ReactionButton } from './ReactionButton';
|
|
17
17
|
import { StaticReaction } from './StaticReaction';
|
|
18
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
19
18
|
import { Box, Inline } from '@atlaskit/primitives/compiled';
|
|
20
19
|
const styles = {
|
|
21
|
-
container: "_kqswh2mm"
|
|
22
|
-
listContainer: "_qtt8glyw _kqswh2mm _19pkze3t"
|
|
20
|
+
container: "_kqswh2mm"
|
|
23
21
|
};
|
|
24
22
|
const emojiStyle = null;
|
|
25
23
|
const emojiNoReactionStyle = null;
|
|
@@ -43,8 +41,7 @@ export const Reaction = ({
|
|
|
43
41
|
allowUserDialog,
|
|
44
42
|
handleOpenReactionsDialog,
|
|
45
43
|
isViewOnly = false,
|
|
46
|
-
showSubtleStyle
|
|
47
|
-
isListItem = false
|
|
44
|
+
showSubtleStyle
|
|
48
45
|
}) => {
|
|
49
46
|
const intl = useIntl();
|
|
50
47
|
const hoverStart = useRef();
|
|
@@ -124,10 +121,7 @@ export const Reaction = ({
|
|
|
124
121
|
count: reaction.count
|
|
125
122
|
});
|
|
126
123
|
}
|
|
127
|
-
return /*#__PURE__*/React.createElement(Box,
|
|
128
|
-
as: 'li',
|
|
129
|
-
xcss: styles.listContainer
|
|
130
|
-
} : {
|
|
124
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
131
125
|
xcss: styles.container
|
|
132
126
|
}, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
|
|
133
127
|
emojiId: emojiId,
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.38.1 */
|
|
2
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
3
2
|
import "./ReactionPicker.compiled.css";
|
|
4
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
4
|
import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
|
|
@@ -8,7 +7,6 @@ import { EmojiPicker } from '@atlaskit/emoji/picker';
|
|
|
8
7
|
import { Manager, Popper, Reference } from '@atlaskit/popper';
|
|
9
8
|
import { layers } from '@atlaskit/theme/constants';
|
|
10
9
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
10
|
import { useCloseManagerV2 } from '../hooks/useCloseManager';
|
|
13
11
|
import { useDelayedState } from '../hooks/useDelayedState';
|
|
14
12
|
import { useFocusTrap } from '../hooks/useFocusTrap';
|
|
@@ -255,7 +253,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
|
|
|
255
253
|
React.createElement(Box, {
|
|
256
254
|
onMouseEnter: handleTriggerMouseEnter,
|
|
257
255
|
onMouseLeave: handleTriggerMouseLeave
|
|
258
|
-
}, /*#__PURE__*/React.createElement(Trigger,
|
|
256
|
+
}, /*#__PURE__*/React.createElement(Trigger, {
|
|
259
257
|
ariaAttributes: {
|
|
260
258
|
'aria-expanded': isPopupTrayOpen,
|
|
261
259
|
'aria-controls': PICKER_CONTROL_ID
|
|
@@ -279,18 +277,17 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
|
|
|
279
277
|
showAddReactionText: showAddReactionText,
|
|
280
278
|
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
281
279
|
reactionPickerTriggerIcon: reactionPickerTriggerIcon,
|
|
282
|
-
reactionPickerTriggerText: reactionPickerTriggerText
|
|
283
|
-
}, !fg('jfp_a11y_team_comment_actions_semantic') && {
|
|
280
|
+
reactionPickerTriggerText: reactionPickerTriggerText,
|
|
284
281
|
isListItem: isListItem
|
|
285
|
-
})))
|
|
286
|
-
zIndex:
|
|
282
|
+
}))), isPopupTrayOpen && /*#__PURE__*/React.createElement(Portal, {
|
|
283
|
+
zIndex: reactionPickerPopperZIndex || layers.flag()
|
|
287
284
|
}, /*#__PURE__*/React.createElement(PopperWrapper, {
|
|
288
285
|
settings: settings,
|
|
289
286
|
popperModifiers: popperModifiers,
|
|
290
287
|
isOpen: isPopupTrayOpen,
|
|
291
288
|
onClose: onClose,
|
|
292
289
|
triggerRef: triggerRef,
|
|
293
|
-
zIndex:
|
|
290
|
+
zIndex: reactionPickerPopperZIndex || layers.flag()
|
|
294
291
|
}, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(Box, {
|
|
295
292
|
xcss: additionalStyles.selectorContainer,
|
|
296
293
|
onMouseEnter: handlePopupMouseEnter,
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
._qtt8glyw{list-style:none}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
|
|
3
|
-
._19bvze3t{padding-left:var(--ds-space-0,0)}
|
|
1
|
+
._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
|
|
4
2
|
._19pk1b66{margin-top:var(--ds-space-050,4px)}
|
|
5
|
-
._19pk1wng{margin-top:var(--ds-space-negative-050,-4px)!important}
|
|
6
3
|
._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
|
|
7
|
-
._19pkze3t{margin-top:var(--ds-space-0,0)}
|
|
8
4
|
._1e0c1o8l{display:inline-block}
|
|
9
5
|
._1e0c1txw{display:flex}
|
|
10
6
|
._1n261g80{flex-wrap:wrap}
|