@atlaskit/reactions 33.2.24 → 33.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/components/ReactionPicker.js +10 -2
  3. package/dist/cjs/components/ReactionsDialog.js +3 -2
  4. package/dist/cjs/components/ReactionsDialogHeader.js +3 -1
  5. package/dist/es2019/components/ReactionPicker.js +10 -2
  6. package/dist/es2019/components/ReactionsDialog.js +3 -2
  7. package/dist/es2019/components/ReactionsDialogHeader.js +3 -1
  8. package/dist/esm/components/ReactionPicker.js +10 -2
  9. package/dist/esm/components/ReactionsDialog.js +3 -2
  10. package/dist/esm/components/ReactionsDialogHeader.js +3 -1
  11. package/docs/0-intro.tsx +1 -1
  12. package/docs/3-reactions-store.tsx +1 -1
  13. package/package.json +16 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/reactions
2
2
 
3
+ ## 33.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`98d925e6d7670`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98d925e6d7670) -
8
+ [ux] Fixes issue where full picker can't be interacted with when hoverableReactionPicker=true
9
+
10
+ ## 33.2.25
11
+
12
+ ### Patch Changes
13
+
14
+ - [`f25be90385fda`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f25be90385fda) -
15
+ [ux] Removing autofocus prop from reactions dialog for a11y compliance
16
+ - Updated dependencies
17
+
3
18
  ## 33.2.24
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/components/ReactionPicker.js CHANGED
@@ -328,7 +328,15 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
328
328
  isOpen: isPopupTrayOpen,
329
329
  onClose: onClose,
330
330
  triggerRef: triggerRef
331
- }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
331
+ }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? (0, _platformFeatureFlags.fg)('platform_reaction_full_picker_hover') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
332
+ xcss: additionalStyles.selectorContainer,
333
+ onMouseEnter: handlePopupMouseEnter,
334
+ onMouseLeave: handlePopupMouseLeave
335
+ }, /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
336
+ emojiProvider: emojiProvider,
337
+ onSelection: onEmojiSelected,
338
+ size: emojiPickerSize
339
+ })) : /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
332
340
  emojiProvider: emojiProvider,
333
341
  onSelection: onEmojiSelected,
334
342
  size: emojiPickerSize
@@ -404,7 +412,7 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
404
412
  setPopupRef(node);
405
413
  }
406
414
  },
407
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
415
+ // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
408
416
  tabIndex: 0,
409
417
  className: (0, _runtime.ax)(["_nt751r31 _49pcglyw _1hvw1o36"])
410
418
  }, /*#__PURE__*/_react.default.createElement(_RepositionOnUpdate.RepositionOnUpdate, {
package/dist/cjs/components/ReactionsDialog.js CHANGED
@@ -15,6 +15,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
15
15
  var _tabs = _interopRequireDefault(require("@atlaskit/tabs"));
16
16
  var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
17
17
  var _compiled = require("@atlaskit/primitives/compiled");
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  var _constants = require("../shared/constants");
19
20
  var _ReactionsList = require("./ReactionsList");
20
21
  var _ReactionsDialogHeader = require("./ReactionsDialogHeader");
@@ -96,9 +97,9 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
96
97
  onClose: handleCloseReactionsDialog,
97
98
  height: 600,
98
99
  testId: RENDER_MODAL_TESTID
99
- // eslint-disable-next-line jsx-a11y/no-autofocus
100
+ // eslint-disable-next-line @atlassian/a11y/no-autofocus
100
101
  ,
101
- autoFocus: false
102
+ autoFocus: (0, _platformFeatureFlags.fg)('platform-a11y-remove-autofocus-prop') ? true : false
102
103
  }, /*#__PURE__*/React.createElement(_tabs.default, {
103
104
  id: "reactions-dialog-tabs",
104
105
  onChange: onTabChange,
package/dist/cjs/components/ReactionsDialogHeader.js CHANGED
@@ -166,7 +166,9 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
166
166
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
167
167
  className: (0, _runtime.ax)([customTabWrapper.base, colorMode === 'dark' && customTabWrapper.darkTheme, index === 0 && "_19bvpxbi", "reaction-elements"]),
168
168
  key: reaction.emojiId,
169
- "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
169
+ "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
170
+ // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
171
+ ,
170
172
  onMouseEnter: function onMouseEnter() {
171
173
  handleMouseEnter(reaction);
172
174
  }
package/dist/es2019/components/ReactionPicker.js CHANGED
@@ -285,7 +285,15 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
285
285
  isOpen: isPopupTrayOpen,
286
286
  onClose: onClose,
287
287
  triggerRef: triggerRef
288
- }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(EmojiPicker, {
288
+ }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? fg('platform_reaction_full_picker_hover') ? /*#__PURE__*/React.createElement(Box, {
289
+ xcss: additionalStyles.selectorContainer,
290
+ onMouseEnter: handlePopupMouseEnter,
291
+ onMouseLeave: handlePopupMouseLeave
292
+ }, /*#__PURE__*/React.createElement(EmojiPicker, {
293
+ emojiProvider: emojiProvider,
294
+ onSelection: onEmojiSelected,
295
+ size: emojiPickerSize
296
+ })) : /*#__PURE__*/React.createElement(EmojiPicker, {
289
297
  emojiProvider: emojiProvider,
290
298
  onSelection: onEmojiSelected,
291
299
  size: emojiPickerSize
@@ -361,7 +369,7 @@ export const PopperWrapper = props => {
361
369
  setPopupRef(node);
362
370
  }
363
371
  },
364
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
372
+ // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
365
373
  tabIndex: 0,
366
374
  className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
367
375
  }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
package/dist/es2019/components/ReactionsDialog.js CHANGED
@@ -6,6 +6,7 @@ import { useEffect, useState, useCallback, useMemo } from 'react';
6
6
  import Tabs from '@atlaskit/tabs';
7
7
  import Modal, { ModalBody } from '@atlaskit/modal-dialog';
8
8
  import { Box } from '@atlaskit/primitives/compiled';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../shared/constants';
10
11
  import { ReactionsList } from './ReactionsList';
11
12
  import { ReactionsDialogHeader } from './ReactionsDialogHeader';
@@ -71,9 +72,9 @@ export const ReactionsDialog = ({
71
72
  onClose: handleCloseReactionsDialog,
72
73
  height: 600,
73
74
  testId: RENDER_MODAL_TESTID
74
- // eslint-disable-next-line jsx-a11y/no-autofocus
75
+ // eslint-disable-next-line @atlassian/a11y/no-autofocus
75
76
  ,
76
- autoFocus: false
77
+ autoFocus: fg('platform-a11y-remove-autofocus-prop') ? true : false
77
78
  }, /*#__PURE__*/React.createElement(Tabs, {
78
79
  id: "reactions-dialog-tabs",
79
80
  onChange: onTabChange,
package/dist/es2019/components/ReactionsDialogHeader.js CHANGED
@@ -137,7 +137,9 @@ export const ReactionsDialogHeader = ({
137
137
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
138
138
  className: ax([customTabWrapper.base, colorMode === 'dark' && customTabWrapper.darkTheme, index === 0 && "_19bvpxbi", "reaction-elements"]),
139
139
  key: reaction.emojiId,
140
- "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
140
+ "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
141
+ // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
142
+ ,
141
143
  onMouseEnter: () => {
142
144
  handleMouseEnter(reaction);
143
145
  }
package/dist/esm/components/ReactionPicker.js CHANGED
@@ -319,7 +319,15 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
319
319
  isOpen: isPopupTrayOpen,
320
320
  onClose: onClose,
321
321
  triggerRef: triggerRef
322
- }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(EmojiPicker, {
322
+ }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? fg('platform_reaction_full_picker_hover') ? /*#__PURE__*/React.createElement(Box, {
323
+ xcss: additionalStyles.selectorContainer,
324
+ onMouseEnter: handlePopupMouseEnter,
325
+ onMouseLeave: handlePopupMouseLeave
326
+ }, /*#__PURE__*/React.createElement(EmojiPicker, {
327
+ emojiProvider: emojiProvider,
328
+ onSelection: onEmojiSelected,
329
+ size: emojiPickerSize
330
+ })) : /*#__PURE__*/React.createElement(EmojiPicker, {
323
331
  emojiProvider: emojiProvider,
324
332
  onSelection: onEmojiSelected,
325
333
  size: emojiPickerSize
@@ -395,7 +403,7 @@ export var PopperWrapper = function PopperWrapper(props) {
395
403
  setPopupRef(node);
396
404
  }
397
405
  },
398
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
406
+ // eslint-disable-next-line @atlassian/a11y/no-noninteractive-tabindex
399
407
  tabIndex: 0,
400
408
  className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
401
409
  }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
package/dist/esm/components/ReactionsDialog.js CHANGED
@@ -7,6 +7,7 @@ import { useEffect, useState, useCallback, useMemo } from 'react';
7
7
  import Tabs from '@atlaskit/tabs';
8
8
  import Modal, { ModalBody } from '@atlaskit/modal-dialog';
9
9
  import { Box } from '@atlaskit/primitives/compiled';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
10
11
  import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../shared/constants';
11
12
  import { ReactionsList } from './ReactionsList';
12
13
  import { ReactionsDialogHeader } from './ReactionsDialogHeader';
@@ -87,9 +88,9 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
87
88
  onClose: handleCloseReactionsDialog,
88
89
  height: 600,
89
90
  testId: RENDER_MODAL_TESTID
90
- // eslint-disable-next-line jsx-a11y/no-autofocus
91
+ // eslint-disable-next-line @atlassian/a11y/no-autofocus
91
92
  ,
92
- autoFocus: false
93
+ autoFocus: fg('platform-a11y-remove-autofocus-prop') ? true : false
93
94
  }, /*#__PURE__*/React.createElement(Tabs, {
94
95
  id: "reactions-dialog-tabs",
95
96
  onChange: onTabChange,
package/dist/esm/components/ReactionsDialogHeader.js CHANGED
@@ -158,7 +158,9 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref3) {
158
158
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
159
159
  className: ax([customTabWrapper.base, colorMode === 'dark' && customTabWrapper.darkTheme, index === 0 && "_19bvpxbi", "reaction-elements"]),
160
160
  key: reaction.emojiId,
161
- "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
161
+ "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
162
+ // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
163
+ ,
162
164
  onMouseEnter: function onMouseEnter() {
163
165
  handleMouseEnter(reaction);
164
166
  }
package/docs/0-intro.tsx CHANGED
@@ -8,7 +8,7 @@ import { Text } from '@atlaskit/primitives/compiled';
8
8
  import ReactionsExample from '../examples/01-connected-reactions-view';
9
9
 
10
10
  const LinkComponent = (props: any) =>
11
- // eslint-disable-next-line @atlaskit/design-system/no-html-anchor, jsx-a11y/anchor-has-content
11
+ // eslint-disable-next-line @atlaskit/design-system/no-html-anchor, @atlassian/a11y/anchor-has-content
12
12
  fg('dst-a11y__replace-anchor-with-link__editor-collabo') ? <Link {...props} /> : <a {...props} />;
13
13
 
14
14
  export default md`
package/docs/3-reactions-store.tsx CHANGED
@@ -6,7 +6,7 @@ import SectionMessage from '@atlaskit/section-message';
6
6
  import { Text } from '@atlaskit/primitives/compiled';
7
7
 
8
8
  const LinkComponent = (props: any) =>
9
- // eslint-disable-next-line @atlaskit/design-system/no-html-anchor, jsx-a11y/anchor-has-content
9
+ // eslint-disable-next-line @atlaskit/design-system/no-html-anchor, @atlassian/a11y/anchor-has-content
10
10
  fg('dst-a11y__replace-anchor-with-link__editor-collabo') ? <Link {...props} /> : <a {...props} />;
11
11
 
12
12
  export default md`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/reactions",
3
- "version": "33.2.24",
3
+ "version": "33.3.0",
4
4
  "description": "Reactions component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -33,16 +33,16 @@
33
33
  "dependencies": {
34
34
  "@atlaskit/afm-i18n-platform-elements-reactions": "2.7.0",
35
35
  "@atlaskit/analytics-gas-types": "^5.1.0",
36
- "@atlaskit/analytics-namespaced-context": "^7.0.0",
36
+ "@atlaskit/analytics-namespaced-context": "^7.1.0",
37
37
  "@atlaskit/analytics-next": "^11.1.0",
38
- "@atlaskit/avatar": "^25.1.0",
39
- "@atlaskit/button": "^23.4.0",
38
+ "@atlaskit/avatar": "^25.4.0",
39
+ "@atlaskit/button": "^23.5.0",
40
40
  "@atlaskit/css": "^0.14.0",
41
41
  "@atlaskit/emoji": "^69.5.0",
42
42
  "@atlaskit/heading": "^5.2.0",
43
- "@atlaskit/icon": "^28.3.0",
43
+ "@atlaskit/icon": "^28.5.0",
44
44
  "@atlaskit/link": "^3.2.0",
45
- "@atlaskit/modal-dialog": "^14.4.0",
45
+ "@atlaskit/modal-dialog": "^14.5.0",
46
46
  "@atlaskit/motion": "^5.3.0",
47
47
  "@atlaskit/platform-feature-flags": "^1.1.0",
48
48
  "@atlaskit/platform-feature-flags-react": "^0.3.0",
@@ -50,12 +50,12 @@
50
50
  "@atlaskit/popup": "^4.4.0",
51
51
  "@atlaskit/portal": "^5.1.0",
52
52
  "@atlaskit/primitives": "^14.15.0",
53
- "@atlaskit/react-ufo": "^4.10.0",
53
+ "@atlaskit/react-ufo": "^4.11.0",
54
54
  "@atlaskit/spinner": "^19.0.0",
55
- "@atlaskit/tabs": "^18.1.0",
55
+ "@atlaskit/tabs": "^18.2.0",
56
56
  "@atlaskit/theme": "^21.0.0",
57
- "@atlaskit/tokens": "^6.3.0",
58
- "@atlaskit/tooltip": "^20.4.0",
57
+ "@atlaskit/tokens": "^6.4.0",
58
+ "@atlaskit/tooltip": "^20.5.0",
59
59
  "@atlaskit/ufo": "^0.4.0",
60
60
  "@atlaskit/util-service-support": "^6.3.0",
61
61
  "@babel/runtime": "^7.0.0",
@@ -132,6 +132,12 @@
132
132
  },
133
133
  "jfp-magma-ssr-issue-view-comment-reactions": {
134
134
  "type": "boolean"
135
+ },
136
+ "platform-a11y-remove-autofocus-prop": {
137
+ "type": "boolean"
138
+ },
139
+ "platform_reaction_full_picker_hover": {
140
+ "type": "boolean"
135
141
  }
136
142
  },
137
143
  "sideEffects": [