@atlaskit/reactions 33.8.12 → 33.8.14

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/reactions
 
+## 33.8.14
+
+### Patch Changes
+
+- [`21867379c6c52`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21867379c6c52) -
+  [ux] A11y changes
+
+## 33.8.13
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 33.8.12
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 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; }
 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; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "0.0.0-development";
+var packageVersion = "33.8.13";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Reactions.js

@@ -19,6 +19,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _modalDialog = require("@atlaskit/modal-dialog");
 var _segment = _interopRequireDefault(require("@atlaskit/react-ufo/segment"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _analytics = require("../analytics");
 var _constants = require("../shared/constants");
 var _i18n = require("../shared/i18n");
@@ -34,6 +35,9 @@ var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
 var reactionPickerStyle = null;
 var listContainerStyles = null;
+var pickerListItemStyles = {
+  picker: "_1e0c1o8l _19pk1b66"
+};
 
 /**
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -302,6 +306,10 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
   var hasEmojiWithFivePlusReactions = reactions.some(function (reaction) {
     return reaction.count >= 5;
   });
+  var shouldShowPicker = !isViewOnly && !(!onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView);
+  var semanticListEnabled = (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic');
+  var addReactionButtonAsListItem = (0, _platformFeatureFlags.fg)('platform-a11y-add-reactions-button-ul-item');
+  var pickerInsideList = semanticListEnabled && addReactionButtonAsListItem && shouldShowPicker;
   var sortedReactions = (0, _react.useMemo)(function () {
     return (0, _toConsumableArray2.default)(memorizedReactions).sort(function (a, b) {
       return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
@@ -389,7 +397,32 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, memorizedReactions.map(function (reaction) {
+  }), pickerInsideList && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "li",
+    xcss: pickerListItemStyles.picker
+  }, /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
+    emojiProvider: emojiProvider,
+    allowAllEmojis: allowAllEmojis,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    disabled: status !== _types.ReactionStatus.ready,
+    onSelection: handleOnSelection,
+    onOpen: handlePickerOpen,
+    onCancel: handleOnCancel,
+    onShowMore: handleOnMore,
+    tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode,
+    showOpaqueBackground: showOpaqueBackground,
+    showAddReactionText: showAddReactionText,
+    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    reactionPickerTriggerText: reactionPickerTriggerText,
+    isListItem: isListItem,
+    hoverableReactionPicker: hoverableSummaryView,
+    hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
+    reactionPickerPlacement: reactionPickerPlacement,
+    reactionPickerPopperZIndex: reactionPickerPopperZIndex
+  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
       key: reaction.emojiId,
       reaction: reaction,
@@ -405,7 +438,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  }))), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
+  }))), shouldShowPicker && !pickerInsideList && /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "0.0.0-development";
+const packageVersion = "33.8.13";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/Reactions.js

@@ -7,6 +7,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
 import UFOSegment from '@atlaskit/react-ufo/segment';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
 import { messages } from '../shared/i18n';
@@ -21,6 +22,9 @@ const noFlexWrapStyles = null;
 const noContainerPositionStyles = null;
 const reactionPickerStyle = null;
 const listContainerStyles = null;
+const pickerListItemStyles = {
+  picker: "_1e0c1o8l _19pk1b66"
+};
 
 /**
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -252,6 +256,10 @@ export const Reactions = /*#__PURE__*/React.memo(({
 
   // criteria to show Reactions Dialog
   const hasEmojiWithFivePlusReactions = reactions.some(reaction => reaction.count >= 5);
+  const shouldShowPicker = !isViewOnly && !(!onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView);
+  const semanticListEnabled = fg('jfp_a11y_team_comment_actions_semantic');
+  const addReactionButtonAsListItem = fg('platform-a11y-add-reactions-button-ul-item');
+  const pickerInsideList = semanticListEnabled && addReactionButtonAsListItem && shouldShowPicker;
   const sortedReactions = useMemo(() => {
     return [...memorizedReactions].sort((a, b) => (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count));
   }, [memorizedReactions]);
@@ -331,6 +339,31 @@ export const Reactions = /*#__PURE__*/React.memo(({
     handleOpenReactionsDialog: handleOpenReactionsDialog,
     isViewOnly: isViewOnly,
     showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
+  })), pickerInsideList && /*#__PURE__*/React.createElement(Box, {
+    as: "li",
+    xcss: pickerListItemStyles.picker
+  }, /*#__PURE__*/React.createElement(ReactionPicker, {
+    emojiProvider: emojiProvider,
+    allowAllEmojis: allowAllEmojis,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    disabled: status !== ReactionStatus.ready,
+    onSelection: handleOnSelection,
+    onOpen: handlePickerOpen,
+    onCancel: handleOnCancel,
+    onShowMore: handleOnMore,
+    tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode,
+    showOpaqueBackground: showOpaqueBackground,
+    showAddReactionText: showAddReactionText,
+    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    reactionPickerTriggerText: reactionPickerTriggerText,
+    isListItem: isListItem,
+    hoverableReactionPicker: hoverableSummaryView,
+    hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
+    reactionPickerPlacement: reactionPickerPlacement,
+    reactionPickerPopperZIndex: reactionPickerPopperZIndex
   }))) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
     key: reaction.emojiId,
     reaction: reaction,
@@ -345,7 +378,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     handleOpenReactionsDialog: handleOpenReactionsDialog,
     isViewOnly: isViewOnly,
     showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
-  })))), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
+  })))), shouldShowPicker && !pickerInsideList && /*#__PURE__*/React.createElement(ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "0.0.0-development";
+var packageVersion = "33.8.13";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/Reactions.js

@@ -9,6 +9,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
 import UFOSegment from '@atlaskit/react-ufo/segment';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
 import { messages } from '../shared/i18n';
@@ -23,6 +24,9 @@ var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
 var reactionPickerStyle = null;
 var listContainerStyles = null;
+var pickerListItemStyles = {
+  picker: "_1e0c1o8l _19pk1b66"
+};
 
 /**
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -291,6 +295,10 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
   var hasEmojiWithFivePlusReactions = reactions.some(function (reaction) {
     return reaction.count >= 5;
   });
+  var shouldShowPicker = !isViewOnly && !(!onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView);
+  var semanticListEnabled = fg('jfp_a11y_team_comment_actions_semantic');
+  var addReactionButtonAsListItem = fg('platform-a11y-add-reactions-button-ul-item');
+  var pickerInsideList = semanticListEnabled && addReactionButtonAsListItem && shouldShowPicker;
   var sortedReactions = useMemo(function () {
     return _toConsumableArray(memorizedReactions).sort(function (a, b) {
       return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
@@ -378,7 +386,32 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(function (reaction) {
+  }), pickerInsideList && /*#__PURE__*/React.createElement(Box, {
+    as: "li",
+    xcss: pickerListItemStyles.picker
+  }, /*#__PURE__*/React.createElement(ReactionPicker, {
+    emojiProvider: emojiProvider,
+    allowAllEmojis: allowAllEmojis,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    disabled: status !== ReactionStatus.ready,
+    onSelection: handleOnSelection,
+    onOpen: handlePickerOpen,
+    onCancel: handleOnCancel,
+    onShowMore: handleOnMore,
+    tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode,
+    showOpaqueBackground: showOpaqueBackground,
+    showAddReactionText: showAddReactionText,
+    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    reactionPickerTriggerText: reactionPickerTriggerText,
+    isListItem: isListItem,
+    hoverableReactionPicker: hoverableSummaryView,
+    hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
+    reactionPickerPlacement: reactionPickerPlacement,
+    reactionPickerPopperZIndex: reactionPickerPopperZIndex
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/React.createElement(Reaction, {
       key: reaction.emojiId,
       reaction: reaction,
@@ -394,7 +427,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       isViewOnly: isViewOnly,
       showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
-  }))), isViewOnly || !onlyRenderPicker && shouldShowSummaryView && allowSelectFromSummaryView ? null : /*#__PURE__*/React.createElement(ReactionPicker, {
+  }))), shouldShowPicker && !pickerInsideList && /*#__PURE__*/React.createElement(ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,

package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -35,7 +35,7 @@ export declare const mapStateToPropsHelper: (containerAri: string, ari: string,
     flash?: undefined;
     particleEffectByEmoji?: undefined;
 } | {
-    reactions: import("../../types").ReactionSummary[];
+    reactions: import("../..").ReactionSummary[];
     status: ReactionStatus.ready;
     flash: {
         [emojiId: string]: boolean;

package/dist/types-ts4.5/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -35,7 +35,7 @@ export declare const mapStateToPropsHelper: (containerAri: string, ari: string,
     flash?: undefined;
     particleEffectByEmoji?: undefined;
 } | {
-    reactions: import("../../types").ReactionSummary[];
+    reactions: import("../..").ReactionSummary[];
     status: ReactionStatus.ready;
     flash: {
         [emojiId: string]: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "33.8.12",
+	"version": "33.8.14",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,8 +39,8 @@
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/emoji": "^69.10.0",
-		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^30.0.0",
+		"@atlaskit/heading": "^5.3.0",
+		"@atlaskit/icon": "^31.0.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/modal-dialog": "^14.10.0",
 		"@atlaskit/motion": "^5.3.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/popup": "^4.13.0",
 		"@atlaskit/portal": "^5.2.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/react-ufo": "^5.0.0",
+		"@atlaskit/react-ufo": "^5.2.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tabs": "^18.3.0",
 		"@atlaskit/theme": "^21.0.0",
@@ -71,7 +71,7 @@
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/elements-test-helpers": "workspace:^",
 		"@atlaskit/util-data-test": "^18.5.0",
-		"@atlassian/a11y-jest-testing": "^0.8.0",
+		"@atlassian/a11y-jest-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -128,6 +128,9 @@
 		},
 		"jfp_a11y_team_comment_actions_semantic": {
 			"type": "boolean"
+		},
+		"platform-a11y-add-reactions-button-ul-item": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [

package/tsconfig.json

@@ -13,6 +13,5 @@
     "**/stories/*.tsx",
     "**/stories/**/*.ts",
     "**/stories/**/*.tsx"
-  ],
-  "compilerOptions": {}
+  ]
 }