@atlaskit/reactions 33.0.1 → 33.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/reactions
 
+## 33.1.0
+
+### Minor Changes
+
+- [#170825](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/170825)
+  [`944add6db1310`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/944add6db1310) -
+  Adding an option to optimistically load the emoji using the reaction imagePath.
+
+## 33.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 33.0.1
 
 ### 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 = "33.0.1";
+var packageVersion = "33.1.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Reaction.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactIntlNext = require("react-intl-next");
@@ -27,6 +28,7 @@ var _constants = require("../shared/constants");
 var _ReactionButton = require("./ReactionButton");
 var _StaticReaction = require("./StaticReaction");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
 var styles = {
   container: "_kqswh2mm"
@@ -137,11 +139,14 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
   };
   var emojiAndCount = /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
-  }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
+  }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, (0, _extends2.default)({
     emojiProvider: emojiProvider,
     emojiId: emojiId,
     fitToHeight: _constants.RESOURCED_EMOJI_COMPACT_HEIGHT
-  })), /*#__PURE__*/React.createElement(_Counter.Counter, {
+  }, reaction.emojiPath && (0, _platformFeatureFlags.fg)('platform_optimistic_reaction_emoji') ? {
+    optimistic: true,
+    optimisticImageURL: reaction.emojiPath
+  } : {}))), /*#__PURE__*/React.createElement(_Counter.Counter, {
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted
   }));

package/dist/cjs/components/ReactionsDialogHeader.js

@@ -15,6 +15,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _reactIntlNext = require("react-intl-next");
 var _tokens = require("@atlaskit/tokens");
 var _modalDialog = require("@atlaskit/modal-dialog");
@@ -23,8 +24,8 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _new = require("@atlaskit/button/new");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-left"));
-var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
 var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
 var _element = require("@atlaskit/emoji/element");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -68,7 +69,11 @@ var LeftNavigationButton = function LeftNavigationButton(_ref2) {
   }, /*#__PURE__*/React.createElement(_new.IconButton, {
     spacing: "compact",
     onClick: handlePreviousPage,
-    icon: _chevronLeft.default,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(_chevronLeft.default, (0, _extends2.default)({}, iconProps, {
+        size: "small"
+      }));
+    },
     label: intl.formatMessage(_i18n.messages.leftNavigateLabel),
     isTooltipDisabled: false
   }));
@@ -81,7 +86,11 @@ var RightNavigationButton = function RightNavigationButton(_ref3) {
   }, /*#__PURE__*/React.createElement(_new.IconButton, {
     spacing: "compact",
     onClick: handleNextPage,
-    icon: _chevronRight.default,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(_chevronRight.default, (0, _extends2.default)({}, iconProps, {
+        size: "small"
+      }));
+    },
     label: intl.formatMessage(_i18n.messages.rightNavigateLabel),
     isTooltipDisabled: false
   }));

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 = "33.0.1";
+const packageVersion = "33.1.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/Reaction.js

@@ -1,4 +1,5 @@
 /* Reaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./Reaction.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -16,6 +17,7 @@ import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
 import { ReactionButton } from './ReactionButton';
 import { StaticReaction } from './StaticReaction';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
 const styles = {
   container: "_kqswh2mm"
 };
@@ -104,11 +106,14 @@ export const Reaction = ({
   };
   const emojiAndCount = /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
     className: ax(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
-  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+  }, /*#__PURE__*/React.createElement(ResourcedEmoji, _extends({
     emojiProvider: emojiProvider,
     emojiId: emojiId,
     fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT
-  })), /*#__PURE__*/React.createElement(Counter, {
+  }, reaction.emojiPath && fg('platform_optimistic_reaction_emoji') ? {
+    optimistic: true,
+    optimisticImageURL: reaction.emojiPath
+  } : {}))), /*#__PURE__*/React.createElement(Counter, {
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted
   }));

package/dist/es2019/components/ReactionsDialogHeader.js

@@ -1,4 +1,5 @@
 /* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionsDialogHeader.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -12,8 +13,8 @@ import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import { useModal } from '@atlaskit/modal-dialog';
 import Tooltip from '@atlaskit/tooltip';
-import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
-import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import ChevronLeftIcon from '@atlaskit/icon/core/chevron-left';
 import CloseIcon from '@atlaskit/icon/core/close';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -56,7 +57,9 @@ const LeftNavigationButton = ({
   }, /*#__PURE__*/React.createElement(IconButton, {
     spacing: "compact",
     onClick: handlePreviousPage,
-    icon: ChevronLeftIcon,
+    icon: iconProps => /*#__PURE__*/React.createElement(ChevronLeftIcon, _extends({}, iconProps, {
+      size: "small"
+    })),
     label: intl.formatMessage(messages.leftNavigateLabel),
     isTooltipDisabled: false
   }));
@@ -70,7 +73,9 @@ const RightNavigationButton = ({
   }, /*#__PURE__*/React.createElement(IconButton, {
     spacing: "compact",
     onClick: handleNextPage,
-    icon: ChevronRightIcon,
+    icon: iconProps => /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({}, iconProps, {
+      size: "small"
+    })),
     label: intl.formatMessage(messages.rightNavigateLabel),
     isTooltipDisabled: false
   }));

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 = "33.0.1";
+var packageVersion = "33.1.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/Reaction.js

@@ -1,4 +1,5 @@
 /* Reaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./Reaction.compiled.css";
@@ -19,6 +20,7 @@ import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
 import { ReactionButton } from './ReactionButton';
 import { StaticReaction } from './StaticReaction';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags';
 var styles = {
   container: "_kqswh2mm"
 };
@@ -128,11 +130,14 @@ export var Reaction = function Reaction(_ref) {
   };
   var emojiAndCount = /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
     className: ax(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
-  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+  }, /*#__PURE__*/React.createElement(ResourcedEmoji, _extends({
     emojiProvider: emojiProvider,
     emojiId: emojiId,
     fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT
-  })), /*#__PURE__*/React.createElement(Counter, {
+  }, reaction.emojiPath && fg('platform_optimistic_reaction_emoji') ? {
+    optimistic: true,
+    optimisticImageURL: reaction.emojiPath
+  } : {}))), /*#__PURE__*/React.createElement(Counter, {
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted
   }));

package/dist/esm/components/ReactionsDialogHeader.js

@@ -2,6 +2,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionsDialogHeader.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -18,8 +19,8 @@ import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import { useModal } from '@atlaskit/modal-dialog';
 import Tooltip from '@atlaskit/tooltip';
-import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
-import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import ChevronLeftIcon from '@atlaskit/icon/core/chevron-left';
 import CloseIcon from '@atlaskit/icon/core/close';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -60,7 +61,11 @@ var LeftNavigationButton = function LeftNavigationButton(_ref2) {
   }, /*#__PURE__*/React.createElement(IconButton, {
     spacing: "compact",
     onClick: handlePreviousPage,
-    icon: ChevronLeftIcon,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(ChevronLeftIcon, _extends({}, iconProps, {
+        size: "small"
+      }));
+    },
     label: intl.formatMessage(messages.leftNavigateLabel),
     isTooltipDisabled: false
   }));
@@ -73,7 +78,11 @@ var RightNavigationButton = function RightNavigationButton(_ref3) {
   }, /*#__PURE__*/React.createElement(IconButton, {
     spacing: "compact",
     onClick: handleNextPage,
-    icon: ChevronRightIcon,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({}, iconProps, {
+        size: "small"
+      }));
+    },
     label: intl.formatMessage(messages.rightNavigateLabel),
     isTooltipDisabled: false
   }));

package/dist/types/types/reaction.d.ts

@@ -36,6 +36,10 @@ export interface ReactionSummary {
      * @deprecated Legacy content Not in use anymore
      */
     optimisticallyUpdated?: boolean;
+    /**
+     * A path to the emoji image, used for optimistic rendering.
+     */
+    emojiPath?: string;
 }
 /**
  * Metadata for composing a summary of emojis that will be shown in the the primary view even if the reaction count is zero

package/dist/types-ts4.5/types/reaction.d.ts

@@ -36,6 +36,10 @@ export interface ReactionSummary {
      * @deprecated Legacy content Not in use anymore
      */
     optimisticallyUpdated?: boolean;
+    /**
+     * A path to the emoji image, used for optimistic rendering.
+     */
+    emojiPath?: string;
 }
 /**
  * Metadata for composing a summary of emojis that will be shown in the the primary view even if the reaction count is zero

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "33.0.1",
+	"version": "33.1.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/emoji": "^69.3.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^26.4.0",
+		"@atlaskit/icon": "^27.0.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/modal-dialog": "^14.2.0",
 		"@atlaskit/motion": "^5.1.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^5.1.0",
+		"@atlaskit/tokens": "^5.2.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
@@ -137,6 +137,9 @@
 		},
 		"should-render-to-parent-should-be-true-editor-coll": {
 			"type": "boolean"
+		},
+		"platform_optimistic_reaction_emoji": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [