@atlaskit/reactions 22.10.13 → 22.10.14
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/analytics/index.js +1 -1
- package/dist/cjs/components/Reaction/Reaction.js +4 -2
- package/dist/cjs/components/Reaction/ReactionButton.js +2 -0
- package/dist/es2019/analytics/index.js +1 -1
- package/dist/es2019/components/Reaction/Reaction.js +4 -0
- package/dist/es2019/components/Reaction/ReactionButton.js +2 -0
- package/dist/esm/analytics/index.js +1 -1
- package/dist/esm/components/Reaction/Reaction.js +4 -2
- package/dist/esm/components/Reaction/ReactionButton.js +2 -0
- package/dist/types/components/Reaction/ReactionButton.d.ts +2 -1
- package/dist/types-ts4.5/components/Reaction/ReactionButton.d.ts +2 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/reactions
|
|
2
2
|
|
|
3
|
+
## 22.10.14
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#131670](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131670)
|
|
8
|
+
[`cf2674202fc67`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cf2674202fc67) -
|
|
9
|
+
CCA11Y-1062 - Introduced aria-pressed in reaction button for a11y reasons
|
|
10
|
+
|
|
3
11
|
## 22.10.13
|
|
4
12
|
|
|
5
13
|
### 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 = "22.10.
|
|
14
|
+
var packageVersion = "22.10.14";
|
|
15
15
|
/**
|
|
16
16
|
* TODO: move to utility package?
|
|
17
17
|
* A random sampling function
|
|
@@ -92,6 +92,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
|
|
|
92
92
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
93
93
|
isTooltipEnabled = _useState4[0],
|
|
94
94
|
setIsTooltipEnabled = _useState4[1];
|
|
95
|
+
var reacted = reaction.reacted;
|
|
95
96
|
var emojiId = {
|
|
96
97
|
id: reaction.emojiId,
|
|
97
98
|
shortName: ''
|
|
@@ -126,9 +127,9 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
|
|
|
126
127
|
var handleClick = (0, _react.useCallback)(function (event) {
|
|
127
128
|
event.preventDefault();
|
|
128
129
|
if ((0, _utils.isLeftClick)(event)) {
|
|
129
|
-
var
|
|
130
|
+
var _reacted = reaction.reacted,
|
|
130
131
|
_emojiId = reaction.emojiId;
|
|
131
|
-
(0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionClickedEvent, !
|
|
132
|
+
(0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionClickedEvent, !_reacted, _emojiId);
|
|
132
133
|
onClick(reaction.emojiId, event);
|
|
133
134
|
}
|
|
134
135
|
}, [createAnalyticsEvent, reaction, onClick]);
|
|
@@ -173,6 +174,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
|
|
|
173
174
|
ariaLabel: intl.formatMessage(_i18n.messages.reactWithEmoji, {
|
|
174
175
|
emoji: emojiName
|
|
175
176
|
}),
|
|
177
|
+
ariaPressed: reacted,
|
|
176
178
|
onMouseEnter: handleMouseEnter,
|
|
177
179
|
onFocus: handleFocused,
|
|
178
180
|
testId: RENDER_REACTION_TESTID,
|
|
@@ -49,6 +49,7 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
|
|
|
49
49
|
_ref$additionalStyles = _ref.additionalStyles,
|
|
50
50
|
additionalStyles = _ref$additionalStyles === void 0 ? [] : _ref$additionalStyles,
|
|
51
51
|
ariaLabel = _ref.ariaLabel,
|
|
52
|
+
ariaPressed = _ref.ariaPressed,
|
|
52
53
|
onMouseEnter = _ref.onMouseEnter,
|
|
53
54
|
onFocus = _ref.onFocus,
|
|
54
55
|
children = _ref.children,
|
|
@@ -60,6 +61,7 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
|
|
|
60
61
|
onMouseEnter: onMouseEnter,
|
|
61
62
|
onFocus: onFocus,
|
|
62
63
|
"aria-label": ariaLabel,
|
|
64
|
+
"aria-pressed": ariaPressed,
|
|
63
65
|
testId: testId,
|
|
64
66
|
xcss: [reactionStyles].concat((0, _toConsumableArray2.default)(additionalStyles))
|
|
65
67
|
}, dataAttributes), (0, _react2.jsx)(_FlashAnimation.FlashAnimation, {
|
|
@@ -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 = "22.10.
|
|
4
|
+
const packageVersion = "22.10.14";
|
|
5
5
|
/**
|
|
6
6
|
* TODO: move to utility package?
|
|
7
7
|
* A random sampling function
|
|
@@ -68,6 +68,9 @@ export const Reaction = ({
|
|
|
68
68
|
} = useAnalyticsEvents();
|
|
69
69
|
const [emojiName, setEmojiName] = useState();
|
|
70
70
|
const [isTooltipEnabled, setIsTooltipEnabled] = useState(true);
|
|
71
|
+
const {
|
|
72
|
+
reacted
|
|
73
|
+
} = reaction;
|
|
71
74
|
const emojiId = {
|
|
72
75
|
id: reaction.emojiId,
|
|
73
76
|
shortName: ''
|
|
@@ -136,6 +139,7 @@ export const Reaction = ({
|
|
|
136
139
|
ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
|
|
137
140
|
emoji: emojiName
|
|
138
141
|
}),
|
|
142
|
+
ariaPressed: reacted,
|
|
139
143
|
onMouseEnter: handleMouseEnter,
|
|
140
144
|
onFocus: handleFocused,
|
|
141
145
|
testId: RENDER_REACTION_TESTID,
|
|
@@ -37,6 +37,7 @@ export const ReactionButton = ({
|
|
|
37
37
|
flash = false,
|
|
38
38
|
additionalStyles = [],
|
|
39
39
|
ariaLabel,
|
|
40
|
+
ariaPressed,
|
|
40
41
|
onMouseEnter,
|
|
41
42
|
onFocus,
|
|
42
43
|
children,
|
|
@@ -48,6 +49,7 @@ export const ReactionButton = ({
|
|
|
48
49
|
onMouseEnter: onMouseEnter,
|
|
49
50
|
onFocus: onFocus,
|
|
50
51
|
"aria-label": ariaLabel,
|
|
52
|
+
"aria-pressed": ariaPressed,
|
|
51
53
|
testId: testId,
|
|
52
54
|
xcss: [reactionStyles, ...additionalStyles]
|
|
53
55
|
}, dataAttributes), jsx(FlashAnimation, {
|
|
@@ -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 = "22.10.
|
|
7
|
+
var packageVersion = "22.10.14";
|
|
8
8
|
/**
|
|
9
9
|
* TODO: move to utility package?
|
|
10
10
|
* A random sampling function
|
|
@@ -81,6 +81,7 @@ export var Reaction = function Reaction(_ref) {
|
|
|
81
81
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
82
82
|
isTooltipEnabled = _useState4[0],
|
|
83
83
|
setIsTooltipEnabled = _useState4[1];
|
|
84
|
+
var reacted = reaction.reacted;
|
|
84
85
|
var emojiId = {
|
|
85
86
|
id: reaction.emojiId,
|
|
86
87
|
shortName: ''
|
|
@@ -115,9 +116,9 @@ export var Reaction = function Reaction(_ref) {
|
|
|
115
116
|
var handleClick = useCallback(function (event) {
|
|
116
117
|
event.preventDefault();
|
|
117
118
|
if (isLeftClick(event)) {
|
|
118
|
-
var
|
|
119
|
+
var _reacted = reaction.reacted,
|
|
119
120
|
_emojiId = reaction.emojiId;
|
|
120
|
-
createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !
|
|
121
|
+
createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !_reacted, _emojiId);
|
|
121
122
|
onClick(reaction.emojiId, event);
|
|
122
123
|
}
|
|
123
124
|
}, [createAnalyticsEvent, reaction, onClick]);
|
|
@@ -162,6 +163,7 @@ export var Reaction = function Reaction(_ref) {
|
|
|
162
163
|
ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
|
|
163
164
|
emoji: emojiName
|
|
164
165
|
}),
|
|
166
|
+
ariaPressed: reacted,
|
|
165
167
|
onMouseEnter: handleMouseEnter,
|
|
166
168
|
onFocus: handleFocused,
|
|
167
169
|
testId: RENDER_REACTION_TESTID,
|
|
@@ -40,6 +40,7 @@ export var ReactionButton = function ReactionButton(_ref) {
|
|
|
40
40
|
_ref$additionalStyles = _ref.additionalStyles,
|
|
41
41
|
additionalStyles = _ref$additionalStyles === void 0 ? [] : _ref$additionalStyles,
|
|
42
42
|
ariaLabel = _ref.ariaLabel,
|
|
43
|
+
ariaPressed = _ref.ariaPressed,
|
|
43
44
|
onMouseEnter = _ref.onMouseEnter,
|
|
44
45
|
onFocus = _ref.onFocus,
|
|
45
46
|
children = _ref.children,
|
|
@@ -51,6 +52,7 @@ export var ReactionButton = function ReactionButton(_ref) {
|
|
|
51
52
|
onMouseEnter: onMouseEnter,
|
|
52
53
|
onFocus: onFocus,
|
|
53
54
|
"aria-label": ariaLabel,
|
|
55
|
+
"aria-pressed": ariaPressed,
|
|
54
56
|
testId: testId,
|
|
55
57
|
xcss: [reactionStyles].concat(_toConsumableArray(additionalStyles))
|
|
56
58
|
}, dataAttributes), jsx(FlashAnimation, {
|
|
@@ -11,6 +11,7 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
|
|
|
11
11
|
className?: string;
|
|
12
12
|
additionalStyles?: Array<XCSS>;
|
|
13
13
|
ariaLabel: string;
|
|
14
|
+
ariaPressed?: boolean;
|
|
14
15
|
onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
15
16
|
onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
|
|
16
17
|
dataAttributes?: {
|
|
@@ -19,5 +20,5 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
|
|
|
19
20
|
testId?: string;
|
|
20
21
|
children?: React.ReactNode;
|
|
21
22
|
}
|
|
22
|
-
export declare const ReactionButton: ({ onClick, flash, additionalStyles, ariaLabel, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => jsx.JSX.Element;
|
|
23
|
+
export declare const ReactionButton: ({ onClick, flash, additionalStyles, ariaLabel, ariaPressed, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => jsx.JSX.Element;
|
|
23
24
|
export {};
|
|
@@ -11,6 +11,7 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
|
|
|
11
11
|
className?: string;
|
|
12
12
|
additionalStyles?: Array<XCSS>;
|
|
13
13
|
ariaLabel: string;
|
|
14
|
+
ariaPressed?: boolean;
|
|
14
15
|
onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
15
16
|
onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
|
|
16
17
|
dataAttributes?: {
|
|
@@ -19,5 +20,5 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
|
|
|
19
20
|
testId?: string;
|
|
20
21
|
children?: React.ReactNode;
|
|
21
22
|
}
|
|
22
|
-
export declare const ReactionButton: ({ onClick, flash, additionalStyles, ariaLabel, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => jsx.JSX.Element;
|
|
23
|
+
export declare const ReactionButton: ({ onClick, flash, additionalStyles, ariaLabel, ariaPressed, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => jsx.JSX.Element;
|
|
23
24
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/reactions",
|
|
3
|
-
"version": "22.10.
|
|
3
|
+
"version": "22.10.14",
|
|
4
4
|
"description": "Reactions component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@atlaskit/analytics-namespaced-context": "^6.11.0",
|
|
38
38
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
39
39
|
"@atlaskit/avatar": "^21.15.0",
|
|
40
|
-
"@atlaskit/button": "^20.
|
|
40
|
+
"@atlaskit/button": "^20.1.0",
|
|
41
41
|
"@atlaskit/emoji": "^67.7.0",
|
|
42
42
|
"@atlaskit/icon": "^22.13.0",
|
|
43
43
|
"@atlaskit/modal-dialog": "^12.15.0",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"@atlaskit/spinner": "^16.3.0",
|
|
49
49
|
"@atlaskit/tabs": "^16.4.0",
|
|
50
50
|
"@atlaskit/theme": "^13.0.0",
|
|
51
|
-
"@atlaskit/tokens": "^1.
|
|
51
|
+
"@atlaskit/tokens": "^1.59.0",
|
|
52
52
|
"@atlaskit/tooltip": "^18.7.0",
|
|
53
53
|
"@atlaskit/ufo": "^0.3.0",
|
|
54
54
|
"@atlaskit/util-service-support": "^6.2.0",
|