@atlaskit/reactions 25.2.0 → 25.3.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.
- package/CHANGELOG.md +15 -0
- package/dist/cjs/analytics/index.js +1 -1
- package/dist/cjs/components/ReactionPicker/ReactionPicker.js +5 -2
- package/dist/cjs/components/Reactions/Reactions.js +5 -2
- package/dist/cjs/components/Trigger/Trigger.js +9 -2
- package/dist/es2019/analytics/index.js +1 -1
- package/dist/es2019/components/ReactionPicker/ReactionPicker.js +4 -2
- package/dist/es2019/components/Reactions/Reactions.js +4 -2
- package/dist/es2019/components/Trigger/Trigger.js +8 -2
- package/dist/esm/analytics/index.js +1 -1
- package/dist/esm/components/ReactionPicker/ReactionPicker.js +5 -2
- package/dist/esm/components/Reactions/Reactions.js +5 -2
- package/dist/esm/components/Trigger/Trigger.js +9 -2
- package/dist/types/components/ReactionPicker/ReactionPicker.d.ts +4 -0
- package/dist/types/components/Reactions/Reactions.d.ts +5 -1
- package/dist/types/components/Trigger/Trigger.d.ts +4 -0
- package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts +1 -1
- package/dist/types-ts4.5/components/ReactionPicker/ReactionPicker.d.ts +4 -0
- package/dist/types-ts4.5/components/Reactions/Reactions.d.ts +5 -1
- package/dist/types-ts4.5/components/Trigger/Trigger.d.ts +4 -0
- package/dist/types-ts4.5/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/reactions
|
|
2
2
|
|
|
3
|
+
## 25.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#114320](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114320)
|
|
8
|
+
[`5ab40880ad189`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ab40880ad189) -
|
|
9
|
+
[ux] Adds a new showRoundTrigger prop to the ReactionPicker component which is used in Trigger
|
|
10
|
+
component to display a round hover border around the trigger button.
|
|
11
|
+
|
|
12
|
+
## 25.2.1
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 25.2.0
|
|
4
19
|
|
|
5
20
|
### Minor 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 = "25.
|
|
14
|
+
var packageVersion = "25.3.0";
|
|
15
15
|
/**
|
|
16
16
|
* TODO: move to utility package?
|
|
17
17
|
* A random sampling function
|
|
@@ -95,7 +95,9 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
|
|
|
95
95
|
_props$subtleReaction = props.subtleReactionsSummaryAndPicker,
|
|
96
96
|
subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
|
|
97
97
|
_props$showAddReactio = props.showAddReactionText,
|
|
98
|
-
showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio
|
|
98
|
+
showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
|
|
99
|
+
_props$showRoundTrigg = props.showRoundTrigger,
|
|
100
|
+
showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
|
|
99
101
|
var _useState = (0, _react.useState)(null),
|
|
100
102
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
101
103
|
triggerRef = _useState2[0],
|
|
@@ -229,7 +231,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
|
|
|
229
231
|
tooltipContent: settings.isOpen ? null : tooltipContent,
|
|
230
232
|
showOpaqueBackground: showOpaqueBackground,
|
|
231
233
|
showAddReactionText: showAddReactionText,
|
|
232
|
-
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
|
|
234
|
+
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
235
|
+
showRoundTrigger: showRoundTrigger
|
|
233
236
|
})
|
|
234
237
|
);
|
|
235
238
|
}), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {
|
|
@@ -148,7 +148,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
|
|
|
148
148
|
hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
|
|
149
149
|
ProfileCardWrapper = _ref.ProfileCardWrapper,
|
|
150
150
|
_ref$onlyRenderPicker = _ref.onlyRenderPicker,
|
|
151
|
-
onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker
|
|
151
|
+
onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker,
|
|
152
|
+
_ref$showRoundTrigger = _ref.showRoundTrigger,
|
|
153
|
+
showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger;
|
|
152
154
|
var _useState = (0, _react.useState)(),
|
|
153
155
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
154
156
|
selectedEmojiId = _useState2[0],
|
|
@@ -381,7 +383,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
|
|
|
381
383
|
miniMode: miniMode,
|
|
382
384
|
showOpaqueBackground: showOpaqueBackground,
|
|
383
385
|
showAddReactionText: showAddReactionText,
|
|
384
|
-
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
|
|
386
|
+
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
387
|
+
showRoundTrigger: showRoundTrigger
|
|
385
388
|
}), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {
|
|
386
389
|
selectedEmojiId: selectedEmojiId,
|
|
387
390
|
reactions: sortedReactions,
|
|
@@ -55,6 +55,11 @@ var expandedTriggerStyles = (0, _primitives.xcss)({
|
|
|
55
55
|
var triggerStylesRefresh = (0, _primitives.xcss)({
|
|
56
56
|
borderRadius: 'border.radius'
|
|
57
57
|
});
|
|
58
|
+
var roundTriggerStyles = (0, _primitives.xcss)({
|
|
59
|
+
borderRadius: '50%',
|
|
60
|
+
height: '2rem',
|
|
61
|
+
width: '2rem'
|
|
62
|
+
});
|
|
58
63
|
var transparentEnabledTriggerStyles = (0, _primitives.xcss)({
|
|
59
64
|
borderColor: 'color.border',
|
|
60
65
|
backgroundColor: 'color.background.neutral.subtle',
|
|
@@ -109,7 +114,9 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
|
|
|
109
114
|
_props$showAddReactio = props.showAddReactionText,
|
|
110
115
|
showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
|
|
111
116
|
_props$subtleReaction = props.subtleReactionsSummaryAndPicker,
|
|
112
|
-
subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction
|
|
117
|
+
subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
|
|
118
|
+
_props$showRoundTrigg = props.showRoundTrigger,
|
|
119
|
+
showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
|
|
113
120
|
var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
|
|
114
121
|
if (onClick && !disabled) {
|
|
115
122
|
onClick(e, analyticsEvent);
|
|
@@ -120,7 +127,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
|
|
|
120
127
|
content: tooltipContent
|
|
121
128
|
}, (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({
|
|
122
129
|
testId: RENDER_TRIGGER_BUTTON_TESTID,
|
|
123
|
-
xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh],
|
|
130
|
+
xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles],
|
|
124
131
|
onClick: handleMouseDown,
|
|
125
132
|
isDisabled: disabled,
|
|
126
133
|
ref: ref
|
|
@@ -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 = "25.
|
|
4
|
+
const packageVersion = "25.3.0";
|
|
5
5
|
/**
|
|
6
6
|
* TODO: move to utility package?
|
|
7
7
|
* A random sampling function
|
|
@@ -78,7 +78,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
|
|
|
78
78
|
emojiPickerSize,
|
|
79
79
|
showOpaqueBackground = false,
|
|
80
80
|
subtleReactionsSummaryAndPicker = false,
|
|
81
|
-
showAddReactionText = false
|
|
81
|
+
showAddReactionText = false,
|
|
82
|
+
showRoundTrigger = false
|
|
82
83
|
} = props;
|
|
83
84
|
const [triggerRef, setTriggerRef] = useState(null);
|
|
84
85
|
|
|
@@ -206,7 +207,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
|
|
|
206
207
|
tooltipContent: settings.isOpen ? null : tooltipContent,
|
|
207
208
|
showOpaqueBackground: showOpaqueBackground,
|
|
208
209
|
showAddReactionText: showAddReactionText,
|
|
209
|
-
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
|
|
210
|
+
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
211
|
+
showRoundTrigger: showRoundTrigger
|
|
210
212
|
})), settings.isOpen && jsx(PopperWrapper, {
|
|
211
213
|
settings: settings
|
|
212
214
|
}, settings.showFullPicker ? jsx(EmojiPicker, {
|
|
@@ -115,7 +115,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
|
|
|
115
115
|
showAddReactionText = false,
|
|
116
116
|
hideDefaultReactions = false,
|
|
117
117
|
ProfileCardWrapper,
|
|
118
|
-
onlyRenderPicker = false
|
|
118
|
+
onlyRenderPicker = false,
|
|
119
|
+
showRoundTrigger = false
|
|
119
120
|
}) => {
|
|
120
121
|
const [selectedEmojiId, setSelectedEmojiId] = useState();
|
|
121
122
|
const {
|
|
@@ -333,7 +334,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
|
|
|
333
334
|
miniMode: miniMode,
|
|
334
335
|
showOpaqueBackground: showOpaqueBackground,
|
|
335
336
|
showAddReactionText: showAddReactionText,
|
|
336
|
-
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
|
|
337
|
+
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
338
|
+
showRoundTrigger: showRoundTrigger
|
|
337
339
|
}), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
|
|
338
340
|
selectedEmojiId: selectedEmojiId,
|
|
339
341
|
reactions: sortedReactions,
|
|
@@ -47,6 +47,11 @@ const expandedTriggerStyles = xcss({
|
|
|
47
47
|
const triggerStylesRefresh = xcss({
|
|
48
48
|
borderRadius: 'border.radius'
|
|
49
49
|
});
|
|
50
|
+
const roundTriggerStyles = xcss({
|
|
51
|
+
borderRadius: '50%',
|
|
52
|
+
height: '2rem',
|
|
53
|
+
width: '2rem'
|
|
54
|
+
});
|
|
50
55
|
const transparentEnabledTriggerStyles = xcss({
|
|
51
56
|
borderColor: 'color.border',
|
|
52
57
|
backgroundColor: 'color.background.neutral.subtle',
|
|
@@ -98,7 +103,8 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
98
103
|
ariaAttributes = {},
|
|
99
104
|
showOpaqueBackground = false,
|
|
100
105
|
showAddReactionText = false,
|
|
101
|
-
subtleReactionsSummaryAndPicker = false
|
|
106
|
+
subtleReactionsSummaryAndPicker = false,
|
|
107
|
+
showRoundTrigger = false
|
|
102
108
|
} = props;
|
|
103
109
|
const handleMouseDown = (e, analyticsEvent) => {
|
|
104
110
|
if (onClick && !disabled) {
|
|
@@ -110,7 +116,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
110
116
|
content: tooltipContent
|
|
111
117
|
}, jsx(Pressable, _extends({
|
|
112
118
|
testId: RENDER_TRIGGER_BUTTON_TESTID,
|
|
113
|
-
xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh],
|
|
119
|
+
xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles],
|
|
114
120
|
onClick: handleMouseDown,
|
|
115
121
|
isDisabled: disabled,
|
|
116
122
|
ref: ref
|
|
@@ -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 = "25.
|
|
7
|
+
var packageVersion = "25.3.0";
|
|
8
8
|
/**
|
|
9
9
|
* TODO: move to utility package?
|
|
10
10
|
* A random sampling function
|
|
@@ -88,7 +88,9 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
|
|
|
88
88
|
_props$subtleReaction = props.subtleReactionsSummaryAndPicker,
|
|
89
89
|
subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
|
|
90
90
|
_props$showAddReactio = props.showAddReactionText,
|
|
91
|
-
showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio
|
|
91
|
+
showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
|
|
92
|
+
_props$showRoundTrigg = props.showRoundTrigger,
|
|
93
|
+
showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
|
|
92
94
|
var _useState = useState(null),
|
|
93
95
|
_useState2 = _slicedToArray(_useState, 2),
|
|
94
96
|
triggerRef = _useState2[0],
|
|
@@ -222,7 +224,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
|
|
|
222
224
|
tooltipContent: settings.isOpen ? null : tooltipContent,
|
|
223
225
|
showOpaqueBackground: showOpaqueBackground,
|
|
224
226
|
showAddReactionText: showAddReactionText,
|
|
225
|
-
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
|
|
227
|
+
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
228
|
+
showRoundTrigger: showRoundTrigger
|
|
226
229
|
})
|
|
227
230
|
);
|
|
228
231
|
}), settings.isOpen && jsx(PopperWrapper, {
|
|
@@ -135,7 +135,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
135
135
|
hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
|
|
136
136
|
ProfileCardWrapper = _ref.ProfileCardWrapper,
|
|
137
137
|
_ref$onlyRenderPicker = _ref.onlyRenderPicker,
|
|
138
|
-
onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker
|
|
138
|
+
onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker,
|
|
139
|
+
_ref$showRoundTrigger = _ref.showRoundTrigger,
|
|
140
|
+
showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger;
|
|
139
141
|
var _useState = useState(),
|
|
140
142
|
_useState2 = _slicedToArray(_useState, 2),
|
|
141
143
|
selectedEmojiId = _useState2[0],
|
|
@@ -368,7 +370,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
368
370
|
miniMode: miniMode,
|
|
369
371
|
showOpaqueBackground: showOpaqueBackground,
|
|
370
372
|
showAddReactionText: showAddReactionText,
|
|
371
|
-
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
|
|
373
|
+
subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
|
|
374
|
+
showRoundTrigger: showRoundTrigger
|
|
372
375
|
}), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
|
|
373
376
|
selectedEmojiId: selectedEmojiId,
|
|
374
377
|
reactions: sortedReactions,
|
|
@@ -47,6 +47,11 @@ var expandedTriggerStyles = xcss({
|
|
|
47
47
|
var triggerStylesRefresh = xcss({
|
|
48
48
|
borderRadius: 'border.radius'
|
|
49
49
|
});
|
|
50
|
+
var roundTriggerStyles = xcss({
|
|
51
|
+
borderRadius: '50%',
|
|
52
|
+
height: '2rem',
|
|
53
|
+
width: '2rem'
|
|
54
|
+
});
|
|
50
55
|
var transparentEnabledTriggerStyles = xcss({
|
|
51
56
|
borderColor: 'color.border',
|
|
52
57
|
backgroundColor: 'color.background.neutral.subtle',
|
|
@@ -101,7 +106,9 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
101
106
|
_props$showAddReactio = props.showAddReactionText,
|
|
102
107
|
showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
|
|
103
108
|
_props$subtleReaction = props.subtleReactionsSummaryAndPicker,
|
|
104
|
-
subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction
|
|
109
|
+
subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
|
|
110
|
+
_props$showRoundTrigg = props.showRoundTrigger,
|
|
111
|
+
showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
|
|
105
112
|
var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
|
|
106
113
|
if (onClick && !disabled) {
|
|
107
114
|
onClick(e, analyticsEvent);
|
|
@@ -112,7 +119,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
112
119
|
content: tooltipContent
|
|
113
120
|
}, jsx(Pressable, _extends({
|
|
114
121
|
testId: RENDER_TRIGGER_BUTTON_TESTID,
|
|
115
|
-
xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh],
|
|
122
|
+
xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles],
|
|
116
123
|
onClick: handleMouseDown,
|
|
117
124
|
isDisabled: disabled,
|
|
118
125
|
ref: ref
|
|
@@ -68,6 +68,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
|
|
|
68
68
|
* Optional prop for displaying text to add a reaction
|
|
69
69
|
*/
|
|
70
70
|
showAddReactionText?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Optional prop for controlling if the picker hover border will be rounded
|
|
73
|
+
*/
|
|
74
|
+
showRoundTrigger?: boolean;
|
|
71
75
|
}
|
|
72
76
|
/**
|
|
73
77
|
* Picker component for adding reactions
|
|
@@ -143,6 +143,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
|
|
|
143
143
|
* Optional prop to hide the user reactions and only render the picker
|
|
144
144
|
*/
|
|
145
145
|
onlyRenderPicker?: boolean;
|
|
146
|
+
/**
|
|
147
|
+
* Optional prop for controlling if the picker hover border will be rounded
|
|
148
|
+
*/
|
|
149
|
+
showRoundTrigger?: boolean;
|
|
146
150
|
}
|
|
147
151
|
/**
|
|
148
152
|
* Get content of the tooltip
|
|
@@ -151,4 +155,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
|
|
|
151
155
|
/**
|
|
152
156
|
* Renders list of reactions
|
|
153
157
|
*/
|
|
154
|
-
export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, }: ReactionsProps) => jsx.JSX.Element>;
|
|
158
|
+
export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, }: ReactionsProps) => jsx.JSX.Element>;
|
|
@@ -44,6 +44,10 @@ export interface TriggerProps {
|
|
|
44
44
|
* Optional prop for applying subtle styling to reaction picker
|
|
45
45
|
*/
|
|
46
46
|
subtleReactionsSummaryAndPicker?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Optional prop for controlling if the picker hover border will be rounded
|
|
49
|
+
*/
|
|
50
|
+
showRoundTrigger?: boolean;
|
|
47
51
|
}
|
|
48
52
|
/**
|
|
49
53
|
* Render an emoji button to open the reactions select picker
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { type ReactionsProps, type ReactionPickerProps } from '../../components';
|
|
3
3
|
import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
|
|
4
4
|
import { type ReactionUpdateSuccess } from '../../types/reaction';
|
|
5
|
-
export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
|
|
5
|
+
export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker' | 'showRoundTrigger'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
|
|
6
6
|
/**
|
|
7
7
|
* Wrapper id for reactions list
|
|
8
8
|
*/
|
|
@@ -68,6 +68,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
|
|
|
68
68
|
* Optional prop for displaying text to add a reaction
|
|
69
69
|
*/
|
|
70
70
|
showAddReactionText?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Optional prop for controlling if the picker hover border will be rounded
|
|
73
|
+
*/
|
|
74
|
+
showRoundTrigger?: boolean;
|
|
71
75
|
}
|
|
72
76
|
/**
|
|
73
77
|
* Picker component for adding reactions
|
|
@@ -143,6 +143,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
|
|
|
143
143
|
* Optional prop to hide the user reactions and only render the picker
|
|
144
144
|
*/
|
|
145
145
|
onlyRenderPicker?: boolean;
|
|
146
|
+
/**
|
|
147
|
+
* Optional prop for controlling if the picker hover border will be rounded
|
|
148
|
+
*/
|
|
149
|
+
showRoundTrigger?: boolean;
|
|
146
150
|
}
|
|
147
151
|
/**
|
|
148
152
|
* Get content of the tooltip
|
|
@@ -151,4 +155,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
|
|
|
151
155
|
/**
|
|
152
156
|
* Renders list of reactions
|
|
153
157
|
*/
|
|
154
|
-
export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, }: ReactionsProps) => jsx.JSX.Element>;
|
|
158
|
+
export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, }: ReactionsProps) => jsx.JSX.Element>;
|
|
@@ -44,6 +44,10 @@ export interface TriggerProps {
|
|
|
44
44
|
* Optional prop for applying subtle styling to reaction picker
|
|
45
45
|
*/
|
|
46
46
|
subtleReactionsSummaryAndPicker?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Optional prop for controlling if the picker hover border will be rounded
|
|
49
|
+
*/
|
|
50
|
+
showRoundTrigger?: boolean;
|
|
47
51
|
}
|
|
48
52
|
/**
|
|
49
53
|
* Render an emoji button to open the reactions select picker
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { type ReactionsProps, type ReactionPickerProps } from '../../components';
|
|
3
3
|
import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
|
|
4
4
|
import { type ReactionUpdateSuccess } from '../../types/reaction';
|
|
5
|
-
export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
|
|
5
|
+
export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker' | 'onlyRenderPicker' | 'showRoundTrigger'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
|
|
6
6
|
/**
|
|
7
7
|
* Wrapper id for reactions list
|
|
8
8
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/reactions",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.3.0",
|
|
4
4
|
"description": "Reactions component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@atlaskit/heading": "^4.1.0",
|
|
42
42
|
"@atlaskit/icon": "^23.9.0",
|
|
43
43
|
"@atlaskit/modal-dialog": "^12.20.0",
|
|
44
|
-
"@atlaskit/motion": "^
|
|
44
|
+
"@atlaskit/motion": "^3.0.0",
|
|
45
45
|
"@atlaskit/platform-feature-flags": "^1.0.0",
|
|
46
46
|
"@atlaskit/popper": "^6.4.0",
|
|
47
47
|
"@atlaskit/popup": "1.31.2",
|