@atlaskit/emoji 71.7.3 → 71.7.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/emoji
 
+## 71.7.4
+
+### Patch Changes
+
+- [`eaa674ef4c640`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eaa674ef4c640) -
+  The popup for productivity color picker should render relative to, and move with picker
+- Updated dependencies
+
 ## 71.7.3
 
 ### Patch Changes

package/dist/cjs/components/common/EmojiActions.compiled.css

@@ -1,7 +1,8 @@
 
 ._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
-._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._16jlidpf{flex-grow:0}
+._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._154i15iq{top:calc(100% + var(--ds-space-050, 4px))}
+._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._16qsjgpa{box-shadow:0 1px 1px 0 var(--ds-border,#0b120e24)}
@@ -10,10 +11,13 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
+._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1pbydx66{z-index:9999}
 ._1wpz1h6o{align-self:center}
+._1xi2idpf{right:0}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
@@ -21,6 +25,8 @@
 ._ca0q1skh{padding-top:11px}
 ._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
 ._otyr19bv{margin-bottom:10px}

package/dist/cjs/components/common/EmojiActions.js

@@ -21,7 +21,6 @@ var _EmojiUploadPicker = _interopRequireDefault(require("./EmojiUploadPicker"));
 var _TonePreviewButton = _interopRequireDefault(require("./TonePreviewButton"));
 var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
 var _ProductivityColorSelector = _interopRequireWildcard(require("./ProductivityColorSelector"));
-var _Popup = _interopRequireDefault(require("./Popup"));
 var _EmojiPickerListSearch = require("../picker/EmojiPickerListSearch");
 var _i18n = require("../i18n");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
@@ -30,7 +29,6 @@ var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
 var _styles = require("./styles");
 var _constants = require("../../util/constants");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _constants2 = require("@atlaskit/theme/constants");
 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 isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   if (!_featureGateJsClient.default.initializeCompleted()) {
@@ -49,6 +47,11 @@ var addCustomEmojiButton = null;
 var emojiActionsWrapper = null;
 var emojiToneSelectorContainer = null;
 var productivityColorPopup = null;
+var productivityColorPopupAnchor = null;
+
+// Matches the ADS tooltip layer so the selector sits above picker content.
+var productivityColorPopupZIndex = 9999;
+var productivityColorPopupPosition = null;
 var previewFooter = null;
 var previewFooterNew = null;
 var atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
@@ -210,18 +213,9 @@ var TonesWrapper = function TonesWrapper(props) {
     }
     return /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0q1skh _u5f319bv _n3td1crf _19bvidpf _1e0c1txw _1bahesu3"])
-    }, showToneSelector && tonePreviewButtonRef.current && /*#__PURE__*/React.createElement(_Popup.default, {
-      target: tonePreviewButtonRef.current,
-      relativePosition: "below",
-      horizontalAlign: "end-to-start",
-      offsetY: 4,
-      zIndex: _constants2.layers.tooltip()
-    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
-      colorPreviewEmojis: productivityColorPreviewEmojis,
-      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
-      selectedColor: selectedProductivityColor,
-      onColorSelected: onProductivityColorSelectedHandler
-    })), /*#__PURE__*/React.createElement(_TonePreviewButton.default, {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_kqswh2mm _1e0c116y"])
+    }, /*#__PURE__*/React.createElement(_TonePreviewButton.default, {
       ref: tonePreviewButtonRef,
       ariaControls: _ProductivityColorSelector.productivityColorSelectorId,
       ariaExpanded: showToneSelector,
@@ -230,7 +224,14 @@ var TonesWrapper = function TonesWrapper(props) {
       onKeyDown: onProductivityColorPreviewKeyDown,
       onSelected: onProductivityColorToggle,
       ariaLabelText: formatMessage(_i18n.messages.emojiSelectColorButtonAriaLabelText)
-    }));
+    }), showToneSelector && /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_kqswstnw _154i15iq _1xi2idpf _1pbydx66"])
+    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
+      colorPreviewEmojis: productivityColorPreviewEmojis,
+      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
+      selectedColor: selectedProductivityColor,
+      onColorSelected: onProductivityColorSelectedHandler
+    }))));
   }
   if (!toneEmoji) {
     return null;

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.7.2"
+      packageVersion: "71.7.3"
     }, attributes)
   };
 };

package/dist/es2019/components/common/EmojiActions.compiled.css

@@ -1,7 +1,8 @@
 
 ._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
-._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._16jlidpf{flex-grow:0}
+._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._154i15iq{top:calc(100% + var(--ds-space-050, 4px))}
+._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._16qsjgpa{box-shadow:0 1px 1px 0 var(--ds-border,#0b120e24)}
@@ -10,10 +11,13 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
+._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1pbydx66{z-index:9999}
 ._1wpz1h6o{align-self:center}
+._1xi2idpf{right:0}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
@@ -21,6 +25,8 @@
 ._ca0q1skh{padding-top:11px}
 ._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
 ._otyr19bv{margin-bottom:10px}

package/dist/es2019/components/common/EmojiActions.js

@@ -12,7 +12,6 @@ import EmojiUploadPicker from './EmojiUploadPicker';
 import TonePreviewButton from './TonePreviewButton';
 import ToneSelector from './ToneSelector';
 import ProductivityColorSelector, { productivityColorSelectorId } from './ProductivityColorSelector';
-import Popup from './Popup';
 import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
@@ -21,7 +20,6 @@ import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import { emojiPickerAddEmoji } from './styles';
 import { DEFAULT_TONE } from '../../util/constants';
 import { Box } from '@atlaskit/primitives/compiled';
-import { layers } from '@atlaskit/theme/constants';
 const isRefreshEmojiPickerEnabled = () => {
   if (!FeatureGates.initializeCompleted()) {
     return false;
@@ -39,6 +37,11 @@ const addCustomEmojiButton = null;
 const emojiActionsWrapper = null;
 const emojiToneSelectorContainer = null;
 const productivityColorPopup = null;
+const productivityColorPopupAnchor = null;
+
+// Matches the ADS tooltip layer so the selector sits above picker content.
+const productivityColorPopupZIndex = 9999;
+const productivityColorPopupPosition = null;
 const previewFooter = null;
 const previewFooterNew = null;
 const atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
@@ -200,18 +203,9 @@ const TonesWrapper = props => {
     }
     return /*#__PURE__*/React.createElement("div", {
       className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0q1skh _u5f319bv _n3td1crf _19bvidpf _1e0c1txw _1bahesu3"])
-    }, showToneSelector && tonePreviewButtonRef.current && /*#__PURE__*/React.createElement(Popup, {
-      target: tonePreviewButtonRef.current,
-      relativePosition: "below",
-      horizontalAlign: "end-to-start",
-      offsetY: 4,
-      zIndex: layers.tooltip()
-    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
-      colorPreviewEmojis: productivityColorPreviewEmojis,
-      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
-      selectedColor: selectedProductivityColor,
-      onColorSelected: onProductivityColorSelectedHandler
-    })), /*#__PURE__*/React.createElement(TonePreviewButton, {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_kqswh2mm _1e0c116y"])
+    }, /*#__PURE__*/React.createElement(TonePreviewButton, {
       ref: tonePreviewButtonRef,
       ariaControls: productivityColorSelectorId,
       ariaExpanded: showToneSelector,
@@ -220,7 +214,14 @@ const TonesWrapper = props => {
       onKeyDown: onProductivityColorPreviewKeyDown,
       onSelected: onProductivityColorToggle,
       ariaLabelText: formatMessage(messages.emojiSelectColorButtonAriaLabelText)
-    }));
+    }), showToneSelector && /*#__PURE__*/React.createElement("div", {
+      className: ax(["_kqswstnw _154i15iq _1xi2idpf _1pbydx66"])
+    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
+      colorPreviewEmojis: productivityColorPreviewEmojis,
+      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
+      selectedColor: selectedProductivityColor,
+      onColorSelected: onProductivityColorSelectedHandler
+    }))));
   }
   if (!toneEmoji) {
     return null;

package/dist/es2019/util/analytics/analytics.js

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "71.7.2",
+    packageVersion: "71.7.3",
     ...attributes
   }
 });

package/dist/esm/components/common/EmojiActions.compiled.css

@@ -1,7 +1,8 @@
 
 ._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
-._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._16jlidpf{flex-grow:0}
+._n7zl1uh4{border-bottom:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._154i15iq{top:calc(100% + var(--ds-space-050, 4px))}
+._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._16qsjgpa{box-shadow:0 1px 1px 0 var(--ds-border,#0b120e24)}
@@ -10,10 +11,13 @@
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}
 ._19bvidpf{padding-left:0}
 ._1bahesu3{justify-content:flex-end}
+._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
 ._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
+._1pbydx66{z-index:9999}
 ._1wpz1h6o{align-self:center}
+._1xi2idpf{right:0}
 ._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
 ._4cvr1h6o{align-items:center}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
@@ -21,6 +25,8 @@
 ._ca0q1skh{padding-top:11px}
 ._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
 ._n3td1crf{padding-bottom:9pt}
 ._otyr19bv{margin-bottom:10px}

package/dist/esm/components/common/EmojiActions.js

@@ -13,7 +13,6 @@ import EmojiUploadPicker from './EmojiUploadPicker';
 import TonePreviewButton from './TonePreviewButton';
 import ToneSelector from './ToneSelector';
 import ProductivityColorSelector, { productivityColorSelectorId } from './ProductivityColorSelector';
-import Popup from './Popup';
 import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
@@ -22,7 +21,6 @@ import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import { emojiPickerAddEmoji } from './styles';
 import { DEFAULT_TONE } from '../../util/constants';
 import { Box } from '@atlaskit/primitives/compiled';
-import { layers } from '@atlaskit/theme/constants';
 var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   if (!FeatureGates.initializeCompleted()) {
     return false;
@@ -40,6 +38,11 @@ var addCustomEmojiButton = null;
 var emojiActionsWrapper = null;
 var emojiToneSelectorContainer = null;
 var productivityColorPopup = null;
+var productivityColorPopupAnchor = null;
+
+// Matches the ADS tooltip layer so the selector sits above picker content.
+var productivityColorPopupZIndex = 9999;
+var productivityColorPopupPosition = null;
 var previewFooter = null;
 var previewFooterNew = null;
 var atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
@@ -201,18 +204,9 @@ var TonesWrapper = function TonesWrapper(props) {
     }
     return /*#__PURE__*/React.createElement("div", {
       className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _ca0q1skh _u5f319bv _n3td1crf _19bvidpf _1e0c1txw _1bahesu3"])
-    }, showToneSelector && tonePreviewButtonRef.current && /*#__PURE__*/React.createElement(Popup, {
-      target: tonePreviewButtonRef.current,
-      relativePosition: "below",
-      horizontalAlign: "end-to-start",
-      offsetY: 4,
-      zIndex: layers.tooltip()
-    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
-      colorPreviewEmojis: productivityColorPreviewEmojis,
-      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
-      selectedColor: selectedProductivityColor,
-      onColorSelected: onProductivityColorSelectedHandler
-    })), /*#__PURE__*/React.createElement(TonePreviewButton, {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_kqswh2mm _1e0c116y"])
+    }, /*#__PURE__*/React.createElement(TonePreviewButton, {
       ref: tonePreviewButtonRef,
       ariaControls: productivityColorSelectorId,
       ariaExpanded: showToneSelector,
@@ -221,7 +215,14 @@ var TonesWrapper = function TonesWrapper(props) {
       onKeyDown: onProductivityColorPreviewKeyDown,
       onSelected: onProductivityColorToggle,
       ariaLabelText: formatMessage(messages.emojiSelectColorButtonAriaLabelText)
-    }));
+    }), showToneSelector && /*#__PURE__*/React.createElement("div", {
+      className: ax(["_kqswstnw _154i15iq _1xi2idpf _1pbydx66"])
+    }, /*#__PURE__*/React.createElement(ProductivityColorPopupContent, {
+      colorPreviewEmojis: productivityColorPreviewEmojis,
+      focusSelectedColorOnMount: focusSelectedProductivityColorOnMount,
+      selectedColor: selectedProductivityColor,
+      onColorSelected: onProductivityColorSelectedHandler
+    }))));
   }
   if (!toneEmoji) {
     return null;

package/dist/esm/util/analytics/analytics.js

@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.7.2"
+      packageVersion: "71.7.3"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.7.3",
+	"version": "71.7.4",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"