@atlaskit/reactions 31.3.0 → 31.4.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/reactions
 
+## 31.4.0
+
+### Minor Changes
+
+- [#144510](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144510)
+  [`9d23464afe923`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d23464afe923) -
+  [ux] adding delay to opening/closing the summary view tray when hovering is enabled via the
+  hoverableSummaryView prop
+
+### Patch Changes
+
+- Updated dependencies
+
+## 31.3.1
+
+### Patch Changes
+
+- [#142842](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142842)
+  [`63265d6000c11`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63265d6000c11) -
+  Internal change to migrate to Compiled CSS-in-JS styling.
+- Updated dependencies
+
 ## 31.3.0
 
 ### Minor 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 = "31.3.0";
+var packageVersion = "31.4.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionSummaryView.js

@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+var _useDelayedState3 = require("../hooks/useDelayedState");
 var _Reaction = require("./Reaction");
 var _ReactionSummaryViewEmojiPicker = require("./ReactionSummaryViewEmojiPicker");
 var _ReactionSummaryButton = require("./ReactionSummaryButton");
@@ -59,58 +60,59 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     useButtonAlignmentStyling = _ref.useButtonAlignmentStyling,
     reactionPickerTriggerText = _ref.reactionPickerTriggerText,
     _ref$hoverableSummary = _ref.hoverableSummaryView,
-    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary;
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary,
+    _ref$hoverableSummary2 = _ref.hoverableSummaryViewDelay,
+    hoverableSummaryViewDelay = _ref$hoverableSummary2 === void 0 ? 300 : _ref$hoverableSummary2;
+  var _useDelayedState = (0, _useDelayedState3.useDelayedState)(false, hoverableSummaryViewDelay),
+    _useDelayedState2 = (0, _slicedToArray2.default)(_useDelayedState, 2),
+    isSummaryPopupOpen = _useDelayedState2[0],
+    setSummaryPopupOpen = _useDelayedState2[1];
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isSummaryPopupOpen = _useState2[0],
-    setSummaryPopupOpen = _useState2[1];
+    isHoveringSummaryView = _useState2[0],
+    setIsHoveringSummaryView = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isHoveringSummaryView = _useState4[0],
-    setIsHoveringSummaryView = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isSummaryViewButtonHovered = _useState6[0],
-    setIsSummaryViewButtonHovered = _useState6[1];
+    isSummaryViewButtonHovered = _useState4[0],
+    setIsSummaryViewButtonHovered = _useState4[1];
   var handlePopupClose = (0, _react.useCallback)(function () {
     return setSummaryPopupOpen(false);
-  }, []);
+  }, [setSummaryPopupOpen]);
   var handleSummaryClick = (0, _react.useCallback)(function () {
     return setSummaryPopupOpen(!isSummaryPopupOpen);
-  }, [isSummaryPopupOpen]);
+  }, [isSummaryPopupOpen, setSummaryPopupOpen]);
   var handleButtonMouseEnter = (0, _react.useCallback)(function () {
     setIsSummaryViewButtonHovered(true);
     if (hoverableSummaryView) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView]);
+  }, [hoverableSummaryView, setSummaryPopupOpen]);
   var handleButtonMouseLeave = (0, _react.useCallback)(function () {
     setIsSummaryViewButtonHovered(false);
     if (hoverableSummaryView && !isHoveringSummaryView) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen]);
   var handleSummaryViewTrayMouseEnter = (0, _react.useCallback)(function () {
     setIsHoveringSummaryView(true);
     if (hoverableSummaryView) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView]);
+  }, [hoverableSummaryView, setSummaryPopupOpen]);
   var handleSummaryViewTrayMouseLeave = (0, _react.useCallback)(function () {
     setIsHoveringSummaryView(false);
     if (hoverableSummaryView && !isSummaryViewButtonHovered) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setSummaryPopupOpen]);
   var handleEmojiSelection = (0, _react.useCallback)(function (emojiId, source) {
     onSelection(emojiId, source);
     if (hoverableSummaryView) {
-      setSummaryPopupOpen(false);
+      setSummaryPopupOpen(false, true);
     }
-  }, [onSelection, hoverableSummaryView]);
+  }, [onSelection, hoverableSummaryView, setSummaryPopupOpen]);
   return /*#__PURE__*/React.createElement(_popup.default, {
     placement: placement,
-    offset: hoverableSummaryView ? [0, 0] : undefined,
     content: function content() {
       return /*#__PURE__*/React.createElement(_compiled.Box, {
         testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,

package/dist/cjs/hooks/useDelayedState.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDelayedState = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useDelayedState = exports.useDelayedState = function useDelayedState(initialState, delay) {
+  var _useState = (0, _react.useState)(initialState),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var timeoutRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  var handleDelayedStateChange = (0, _react.useCallback)(function (newState) {
+    var immediate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    if (immediate) {
+      setState(newState);
+    } else {
+      timeoutRef.current = setTimeout(function () {
+        setState(newState);
+      }, delay);
+    }
+  }, [delay]);
+  return [state, handleDelayedStateChange];
+};

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

package/dist/es2019/components/ReactionSummaryView.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useState } from 'react';
 import Popup from '@atlaskit/popup';
+import { useDelayedState } from '../hooks/useDelayedState';
 import { Reaction } from './Reaction';
 import { ReactionSummaryViewEmojiPicker } from './ReactionSummaryViewEmojiPicker';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
@@ -40,46 +41,46 @@ export const ReactionSummaryView = ({
   onOpen,
   useButtonAlignmentStyling,
   reactionPickerTriggerText,
-  hoverableSummaryView = false
+  hoverableSummaryView = false,
+  hoverableSummaryViewDelay = 300
 }) => {
-  const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
+  const [isSummaryPopupOpen, setSummaryPopupOpen] = useDelayedState(false, hoverableSummaryViewDelay);
   const [isHoveringSummaryView, setIsHoveringSummaryView] = useState(false);
   const [isSummaryViewButtonHovered, setIsSummaryViewButtonHovered] = useState(false);
-  const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
-  const handleSummaryClick = useCallback(() => setSummaryPopupOpen(!isSummaryPopupOpen), [isSummaryPopupOpen]);
+  const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), [setSummaryPopupOpen]);
+  const handleSummaryClick = useCallback(() => setSummaryPopupOpen(!isSummaryPopupOpen), [isSummaryPopupOpen, setSummaryPopupOpen]);
   const handleButtonMouseEnter = useCallback(() => {
     setIsSummaryViewButtonHovered(true);
     if (hoverableSummaryView) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView]);
+  }, [hoverableSummaryView, setSummaryPopupOpen]);
   const handleButtonMouseLeave = useCallback(() => {
     setIsSummaryViewButtonHovered(false);
     if (hoverableSummaryView && !isHoveringSummaryView) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen]);
   const handleSummaryViewTrayMouseEnter = useCallback(() => {
     setIsHoveringSummaryView(true);
     if (hoverableSummaryView) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView]);
+  }, [hoverableSummaryView, setSummaryPopupOpen]);
   const handleSummaryViewTrayMouseLeave = useCallback(() => {
     setIsHoveringSummaryView(false);
     if (hoverableSummaryView && !isSummaryViewButtonHovered) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setSummaryPopupOpen]);
   const handleEmojiSelection = useCallback((emojiId, source) => {
     onSelection(emojiId, source);
     if (hoverableSummaryView) {
-      setSummaryPopupOpen(false);
+      setSummaryPopupOpen(false, true);
     }
-  }, [onSelection, hoverableSummaryView]);
+  }, [onSelection, hoverableSummaryView, setSummaryPopupOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
-    offset: hoverableSummaryView ? [0, 0] : undefined,
     content: () => /*#__PURE__*/React.createElement(Box, {
       testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
       onMouseEnter: handleSummaryViewTrayMouseEnter,

package/dist/es2019/hooks/useDelayedState.js

@@ -0,0 +1,25 @@
+import { useCallback, useRef, useEffect, useState } from 'react';
+export const useDelayedState = (initialState, delay) => {
+  const [state, setState] = useState(initialState);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const handleDelayedStateChange = useCallback((newState, immediate = false) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    if (immediate) {
+      setState(newState);
+    } else {
+      timeoutRef.current = setTimeout(() => {
+        setState(newState);
+      }, delay);
+    }
+  }, [delay]);
+  return [state, handleDelayedStateChange];
+};

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

package/dist/esm/components/ReactionSummaryView.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useState } from 'react';
 import Popup from '@atlaskit/popup';
+import { useDelayedState } from '../hooks/useDelayedState';
 import { Reaction } from './Reaction';
 import { ReactionSummaryViewEmojiPicker } from './ReactionSummaryViewEmojiPicker';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
@@ -49,58 +50,59 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     useButtonAlignmentStyling = _ref.useButtonAlignmentStyling,
     reactionPickerTriggerText = _ref.reactionPickerTriggerText,
     _ref$hoverableSummary = _ref.hoverableSummaryView,
-    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary;
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary,
+    _ref$hoverableSummary2 = _ref.hoverableSummaryViewDelay,
+    hoverableSummaryViewDelay = _ref$hoverableSummary2 === void 0 ? 300 : _ref$hoverableSummary2;
+  var _useDelayedState = useDelayedState(false, hoverableSummaryViewDelay),
+    _useDelayedState2 = _slicedToArray(_useDelayedState, 2),
+    isSummaryPopupOpen = _useDelayedState2[0],
+    setSummaryPopupOpen = _useDelayedState2[1];
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isSummaryPopupOpen = _useState2[0],
-    setSummaryPopupOpen = _useState2[1];
+    isHoveringSummaryView = _useState2[0],
+    setIsHoveringSummaryView = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isHoveringSummaryView = _useState4[0],
-    setIsHoveringSummaryView = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isSummaryViewButtonHovered = _useState6[0],
-    setIsSummaryViewButtonHovered = _useState6[1];
+    isSummaryViewButtonHovered = _useState4[0],
+    setIsSummaryViewButtonHovered = _useState4[1];
   var handlePopupClose = useCallback(function () {
     return setSummaryPopupOpen(false);
-  }, []);
+  }, [setSummaryPopupOpen]);
   var handleSummaryClick = useCallback(function () {
     return setSummaryPopupOpen(!isSummaryPopupOpen);
-  }, [isSummaryPopupOpen]);
+  }, [isSummaryPopupOpen, setSummaryPopupOpen]);
   var handleButtonMouseEnter = useCallback(function () {
     setIsSummaryViewButtonHovered(true);
     if (hoverableSummaryView) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView]);
+  }, [hoverableSummaryView, setSummaryPopupOpen]);
   var handleButtonMouseLeave = useCallback(function () {
     setIsSummaryViewButtonHovered(false);
     if (hoverableSummaryView && !isHoveringSummaryView) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen]);
   var handleSummaryViewTrayMouseEnter = useCallback(function () {
     setIsHoveringSummaryView(true);
     if (hoverableSummaryView) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView]);
+  }, [hoverableSummaryView, setSummaryPopupOpen]);
   var handleSummaryViewTrayMouseLeave = useCallback(function () {
     setIsHoveringSummaryView(false);
     if (hoverableSummaryView && !isSummaryViewButtonHovered) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setSummaryPopupOpen]);
   var handleEmojiSelection = useCallback(function (emojiId, source) {
     onSelection(emojiId, source);
     if (hoverableSummaryView) {
-      setSummaryPopupOpen(false);
+      setSummaryPopupOpen(false, true);
     }
-  }, [onSelection, hoverableSummaryView]);
+  }, [onSelection, hoverableSummaryView, setSummaryPopupOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
-    offset: hoverableSummaryView ? [0, 0] : undefined,
     content: function content() {
       return /*#__PURE__*/React.createElement(Box, {
         testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,

package/dist/esm/hooks/useDelayedState.js

@@ -0,0 +1,30 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useRef, useEffect, useState } from 'react';
+export var useDelayedState = function useDelayedState(initialState, delay) {
+  var _useState = useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var timeoutRef = useRef(null);
+  useEffect(function () {
+    return function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  var handleDelayedStateChange = useCallback(function (newState) {
+    var immediate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    if (immediate) {
+      setState(newState);
+    } else {
+      timeoutRef.current = setTimeout(function () {
+        setState(newState);
+      }, delay);
+    }
+  }, [delay]);
+  return [state, handleDelayedStateChange];
+};

package/dist/types/components/ReactionSummaryView.d.ts

@@ -57,6 +57,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional prop to make the summary view open on hover
      */
     hoverableSummaryView?: boolean;
+    /**
+     * Optional prop to set a delay for the summary view when it opens/closes on hover
+     */
+    hoverableSummaryViewDelay?: number;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, hoverableSummaryViewDelay, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

package/dist/types/hooks/useDelayedState.d.ts

@@ -0,0 +1,3 @@
+type useDelayedStateResponse<T> = [T, (value: T, immediate?: boolean) => void];
+export declare const useDelayedState: <T>(initialState: T, delay: number) => useDelayedStateResponse<T>;
+export {};

package/dist/types-ts4.5/components/ReactionSummaryView.d.ts

@@ -57,6 +57,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional prop to make the summary view open on hover
      */
     hoverableSummaryView?: boolean;
+    /**
+     * Optional prop to set a delay for the summary view when it opens/closes on hover
+     */
+    hoverableSummaryViewDelay?: number;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, hoverableSummaryViewDelay, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/hooks/useDelayedState.d.ts

@@ -0,0 +1,6 @@
+type useDelayedStateResponse<T> = [
+    T,
+    (value: T, immediate?: boolean) => void
+];
+export declare const useDelayedState: <T>(initialState: T, delay: number) => useDelayedStateResponse<T>;
+export {};

package/docs/0-intro.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { md, Example, Props, code, AtlassianInternalWarning } from '@atlaskit/docs';
 import SectionMessage from '@atlaskit/section-message';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 
 import ReactionsExample from '../examples/01-connected-reactions-view';
 

package/docs/1-connected-reaction-picker.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { md, Example, code, Props } from '@atlaskit/docs';
 import SectionMessage from '@atlaskit/section-message';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 
 import ConnectedReactionPickerExample from '../examples/00-connected-reaction-picker';
 

package/docs/2-connected-reactions-view.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { md, Example, code, Props } from '@atlaskit/docs';
 import SectionMessage from '@atlaskit/section-message';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 
 import ConnectedReactionsViewExample from '../examples/01-connected-reactions-view';
 

package/docs/3-reactions-store.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { md, code, Props } from '@atlaskit/docs';
 import SectionMessage from '@atlaskit/section-message';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 
 export default md`
 

package/docs/5-graphql-support.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { md, code, Props } from '@atlaskit/docs';
 import SectionMessage from '@atlaskit/section-message';
-import { Text } from '@atlaskit/primitives';
+import { Text } from '@atlaskit/primitives/compiled';
 
 export default md`
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "31.3.0",
+	"version": "31.4.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
 		"@atlaskit/avatar": "^25.0.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/emoji": "^69.0.0",
+		"@atlaskit/emoji": "^69.1.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/modal-dialog": "^14.1.0",