@atlaskit/emoji 70.4.1 → 70.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/emoji
 
+## 70.5.0
+
+### Minor Changes
+
+- [`148bfe97e9f62`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/148bfe97e9f62) -
+  Teamoji emoji picker design refresh (final)
+
+## 70.4.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 70.4.1
 
 ### Patch Changes

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

@@ -0,0 +1,5 @@
+._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._1wpz1h6o{align-self:center}
+._2hwxutpp{margin-right:var(--ds-space-150,9pt)}
+._otyrutpp{margin-bottom:var(--ds-space-150,9pt)}

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

@@ -0,0 +1,37 @@
+/* AddEmoji.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uploadEmojiTestId = exports.emojiActionsTestId = exports.AddOwnEmoji = void 0;
+require("./AddEmoji.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _reactIntl = require("react-intl");
+var _i18n = require("../i18n");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+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 emojiActionsTestId = exports.emojiActionsTestId = 'emoji-actions';
+var uploadEmojiTestId = exports.uploadEmojiTestId = 'upload-emoji';
+var addCustomEmoji = null;
+
+// Generic Type for the wrapped functional component
+
+var AddOwnEmoji = exports.AddOwnEmoji = function AddOwnEmoji(props) {
+  var onOpenUpload = props.onOpenUpload,
+    uploadEnabled = props.uploadEnabled;
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiTestId,
+    className: (0, _runtime.ax)(["_1wpz1h6o _19pkutpp _2hwxutpp _otyrutpp _18u0utpp"])
+  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+    return /*#__PURE__*/React.createElement(_new.default, {
+      onClick: onOpenUpload,
+      tabIndex: 0,
+      id: "add-custom-emoji"
+    }, label);
+  })));
+};

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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadEmojiTestId = exports.emojiActionsTestId = exports.default = exports.EmojiActions = void 0;
+exports.uploadEmojiTestId = exports.emojiActionsTestId = exports.default = exports.EmojiActions = exports.AddOwnEmoji = void 0;
 require("./EmojiActions.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -23,7 +23,6 @@ var _EmojiPickerListSearch = require("../picker/EmojiPickerListSearch");
 var _i18n = require("../i18n");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
-var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/core/emoji-add"));
 var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
 var _styles = require("./styles");
 var _constants = require("../../util/constants");
@@ -37,28 +36,24 @@ var addCustomEmojiButton = null;
 var emojiActionsWrapper = null;
 var emojiToneSelectorContainer = null;
 var previewFooter = null;
+var previewFooterNew = null;
 var emojiActionsTestId = exports.emojiActionsTestId = 'emoji-actions';
 var uploadEmojiTestId = exports.uploadEmojiTestId = 'upload-emoji';
 
 // Generic Type for the wrapped functional component
 
-var AddOwnEmoji = function AddOwnEmoji(props) {
+var AddOwnEmoji = exports.AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
     uploadEnabled = props.uploadEnabled;
-  var _useIntl = (0, _reactIntl.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(_react.Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
     "data-testid": uploadEmojiTestId,
     className: (0, _runtime.ax)(["_1wpz1h6o _18u019bv _otyr19bv"])
-  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _i18n.messages.addEmojiLabel : _i18n.messages.addCustomEmojiLabel, function (label) {
+  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
     return /*#__PURE__*/React.createElement(_standardButton.default, {
       onClick: onOpenUpload,
       iconBefore: /*#__PURE__*/React.createElement(_compiled.Box, {
         xcss: styles.icon
-      }, (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement(_emojiAdd.default, {
-        color: "currentColor",
-        label: formatMessage(_i18n.messages.addCustomEmojiLabel)
-      }) : /*#__PURE__*/React.createElement(_add.default, {
+      }, /*#__PURE__*/React.createElement(_add.default, {
         color: "currentColor",
         label: ""
       })),
@@ -132,6 +127,7 @@ var TonesWrapper = function TonesWrapper(props) {
     isVisible: !showToneSelector
   }));
 };
+// TODO: remove this on cleanup of platform_emoji_picker_refresh
 var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
   var onToneSelected = props.onToneSelected,
     onToneSelectorCancelled = props.onToneSelectorCancelled,
@@ -171,7 +167,15 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     setShowToneSelector(false);
   }, [showToneSelector, onToneSelectorCancelled]);
   if (uploading) {
-    return /*#__PURE__*/React.createElement("div", {
+    return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug"])
+    }, /*#__PURE__*/React.createElement(_EmojiUploadPicker.default, {
+      onUploadCancelled: onUploadCancelled,
+      onUploadEmoji: onUploadEmoji,
+      onFileChooserClicked: onFileChooserClicked,
+      errorMessage: uploadErrorMessage,
+      initialUploadName: initialUploadName
+    })) : /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
     }, /*#__PURE__*/React.createElement(_EmojiUploadPicker.default, {
       onUploadCancelled: onUploadCancelled,
@@ -182,7 +186,13 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     }));
   }
   if (emojiToDelete) {
-    return /*#__PURE__*/React.createElement("div", {
+    return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug"])
+    }, /*#__PURE__*/React.createElement(_EmojiDeletePreview.default, {
+      emoji: emojiToDelete,
+      onDeleteEmoji: onDeleteEmoji,
+      onCloseDelete: onCloseDelete
+    })) : /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
     }, /*#__PURE__*/React.createElement(_EmojiDeletePreview.default, {
       emoji: emojiToDelete,
@@ -190,7 +200,24 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
       onCloseDelete: onCloseDelete
     }));
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiActionsTestId,
+    onMouseLeave: onMouseLeaveHandler,
+    onBlur: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(_EmojiPickerListSearch.EmojiPickerListSearch, {
+    onChange: onChange,
+    query: query,
+    resultsCount: resultsCount,
+    isVisible: !showToneSelector
+  }), /*#__PURE__*/React.createElement(TonesWrapper, (0, _extends2.default)({}, props, {
+    onToneOpen: onToneOpenHandler,
+    onToneClose: onToneCloseHandler,
+    onToneSelected: onToneSelectedHandler,
+    showToneSelector: showToneSelector
+  })))) : /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiActionsTestId,
     onMouseLeave: onMouseLeaveHandler,
     onBlur: (0, _platformFeatureFlags.fg)('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,

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

@@ -96,7 +96,8 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     appearance: "subtle",
     spacing: "none",
     shouldFitContainer: true,
-    testId: cancelEmojiUploadPickerTestId
+    testId: cancelEmojiUploadPickerTestId,
+    name: _i18n.messages.addCustomEmojiLabel.defaultMessage
   }, /*#__PURE__*/React.createElement(_cross.default, {
     color: "currentColor",
     label: cancelLabel

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

@@ -1,4 +1,5 @@
 
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
 ._19itidpf{border:0}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._11bcidpf::-moz-focus-inner{border-width:0}
 ._dqozglyw::-moz-focus-inner{border-style:none}

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

@@ -11,11 +11,13 @@ require("./TonePreviewButton.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _Emoji = _interopRequireDefault(require("./Emoji"));
 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 tonePreviewTestId = exports.tonePreviewTestId = 'tone-preview';
 var emojiButton = null;
 var hidden = null;
+var emojiButtonOutline = null;
 var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var emoji = props.emoji,
     selectOnHover = props.selectOnHover,
@@ -24,7 +26,26 @@ var TonePreviewButton = exports.TonePreviewButton = /*#__PURE__*/(0, _react.forw
     onSelected = props.onSelected,
     _props$isVisible = props.isVisible,
     isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
-  return /*#__PURE__*/React.createElement("button", {
+  return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    onClick: onSelected,
+    "aria-label": ariaLabelText,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": "emoji-picker-tone-selector"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: {
+      overflow: 'hidden'
+    },
+    "data-testid": tonePreviewTestId,
+    type: "button",
+    className: (0, _runtime.ax)(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw", "_19itia51"])
+  }, /*#__PURE__*/React.createElement(_Emoji.default, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  })) : /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
     "aria-label": ariaLabelText,

package/dist/cjs/components/picker/CategorySelector.compiled.css

@@ -22,12 +22,12 @@
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
-._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._dpd31txw button{display:flex}
 ._i0dl1wug{flex-basis:auto}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
-._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._syaz6x5g{color:var(--ds-text-selected,#1868db)}

package/dist/cjs/components/picker/CategorySelector.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sortCategories = exports.default = exports.categorySelectorComponentTestId = exports.categorySelectorCategoryTestId = void 0;
+exports.sortCategoriesNew = exports.sortCategories = exports.default = exports.categorySelectorComponentTestId = exports.categorySelectorCategoryTestId = void 0;
 require("./CategorySelector.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -25,7 +25,7 @@ var _EmojiPickerList = require("./EmojiPickerList");
 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 = {
   commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
-  commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qpxbi _n3tdpxbi _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
+  commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qu2gc _n3tdu2gc _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
   defaultCategory: "_syaz1rpy _30l36x5g",
   defaultCategoryNew: "_syaz1rpy _1doc1dm9 _1il9nqa1 _1o3i1j28 _30l31rpy _1jc41ihb",
   activeCategory: "_syaz6x5g _30l36x5g",
@@ -39,13 +39,16 @@ var categorySelectorTablistNew = null;
 var sortCategories = exports.sortCategories = function sortCategories(c1, c2) {
   return _categories.CategoryDescriptionMap[c1].order - _categories.CategoryDescriptionMap[c2].order;
 };
+var sortCategoriesNew = exports.sortCategoriesNew = function sortCategoriesNew(c1, c2) {
+  return _categories.CategoryDescriptionMapNew[c1].order - _categories.CategoryDescriptionMapNew[c2].order;
+};
 var addNewCategories = function addNewCategories(oldCategories, newCategories) {
   if (!newCategories) {
     return oldCategories;
   }
   return oldCategories.concat(newCategories.filter(function (category) {
     return !!((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _categories.CategoryDescriptionMapNew : _categories.CategoryDescriptionMap)[category];
-  })).sort(sortCategories);
+  })).sort((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? sortCategoriesNew : sortCategories);
 };
 var categorySelectorComponentTestId = exports.categorySelectorComponentTestId = 'category-selector-component';
 var categorySelectorCategoryTestId = exports.categorySelectorCategoryTestId = function categorySelectorCategoryTestId(categoryId) {

package/dist/cjs/components/picker/EmojiPickerComponent.js

@@ -143,6 +143,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       setSelectedEmoji(emoji);
     }
   }, [selectedEmoji]);
+  var onEmojiLeave = (0, _react.useCallback)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      setSelectedEmoji(undefined);
+    }
+  }, []);
   var onCategoryActivated = (0, _react.useCallback)(function (category) {
     // Ignore scroll-driven category changes while a programmatic reveal()
     // scroll is in progress — they would flicker the indicator through
@@ -509,7 +514,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       emojiProvider.unsubscribe(onProviderChange);
     };
   }, [emojiProvider, onProviderChange]);
-  var showPreview = selectedEmoji && !uploading;
+  var showPreview = (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? !uploading : selectedEmoji && !uploading;
   if ((0, _platformFeatureFlags.fg)('platform_no_noninteractive_emojis_reactions')) {
     return /*#__PURE__*/React.createElement("div", {
       ref: onPickerRef,
@@ -538,6 +543,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       currentUser: currentUser,
       onEmojiSelected: recordUsageOnSelection,
       onEmojiActive: onEmojiActive,
+      onEmojiLeave: onEmojiLeave,
       onEmojiDelete: onTriggerDelete,
       onCategoryActivated: onCategoryActivated,
       onSearch: onSearch,
@@ -562,7 +568,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       size: size,
       activeCategoryId: activeCategory
     }), showPreview && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
-      selectedEmoji: selectedEmoji
+      selectedEmoji: selectedEmoji,
+      uploadEnabled: isUploadSupported && !uploading,
+      onOpenUpload: onOpenUpload
     })));
   }
   return /*#__PURE__*/React.createElement("div", {
@@ -589,6 +597,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     currentUser: currentUser,
     onEmojiSelected: recordUsageOnSelection,
     onEmojiActive: onEmojiActive,
+    onEmojiLeave: onEmojiLeave,
     onEmojiDelete: onTriggerDelete,
     onCategoryActivated: onCategoryActivated,
     onSearch: onSearch,
@@ -613,7 +622,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     size: size,
     activeCategoryId: activeCategory
   }), showPreview && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
-    selectedEmoji: selectedEmoji
+    selectedEmoji: selectedEmoji,
+    uploadEnabled: isUploadSupported && !uploading,
+    onOpenUpload: onOpenUpload
   }));
 };
 var _default_1 = /*#__PURE__*/(0, _react.memo)(EmojiPickerComponent);

package/dist/cjs/components/picker/EmojiPickerEmojiRow.js

@@ -22,6 +22,7 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var emojis = _ref.emojis,
     onSelected = _ref.onSelected,
     onMouseMove = _ref.onMouseMove,
+    onMouseLeave = _ref.onMouseLeave,
     onFocus = _ref.onFocus,
     title = _ref.title,
     showDelete = _ref.showDelete,
@@ -55,6 +56,9 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       role: "gridcell",
       "aria-colindex": index + 1 // aria-colindex is 1 based
       ,
+      onMouseLeave: onMouseLeave,
+      onBlur: onMouseLeave,
+      tabIndex: 0,
       className: (0, _runtime.ax)(["_1e0c1o8l _y3gn1h6o _1bsb1ylp _1wcg1qi0 _1678tlke _7b50u2gc _1rf4u2gc _b4kiu2gc _bm9mu2gc _1lvc1tcg _1cf71tcg _8vlfze3t _1909ze3t _1tcfze3t _n7xcze3t _4ubfu2gc _18x3u2gc _fw9su2gc _29jju2gc _qpkw1tcg _elsp1tcg _vtzrze3t _w2q0ze3t _o5kcze3t _1mc3ze3t _115ch2mm _yrst1ssb _85ft1ssb _5mfndbra _1k8z1tcg _17dz1tcg _zdyf1ule _1mn81tcg _u5ah1tcg"])
     }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
       emoji: emoji,

package/dist/cjs/components/picker/EmojiPickerFooter.compiled.css

@@ -1,5 +1,10 @@
 
-._x3do1uh4{border-top:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}._16jlidpf{flex-grow:0}
+._x3do1uh4{border-top:var(--ds-border-width-selected,2px) solid var(--ds-border,#0b120e24)}
+._x3doia51{border-top:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}._16jlidpf{flex-grow:0}
 ._16qsvjqj{box-shadow:0 -1px 1px 0 var(--ds-border,#0b120e24)}
+._19bvv77o{padding-left:var(--ds-space-025,2px)}
 ._1o9zidpf{flex-shrink:0}
-._i0dl1wug{flex-basis:auto}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._i0dl1wug{flex-basis:auto}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._u5f3v77o{padding-right:var(--ds-space-025,2px)}

package/dist/cjs/components/picker/EmojiPickerFooter.js

@@ -10,14 +10,36 @@ require("./EmojiPickerFooter.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _reactIntl = require("react-intl");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _EmojiPreviewComponent = require("../common/EmojiPreviewComponent");
+var _AddEmoji = require("../common/AddEmoji");
 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 emojiPickerFooter = null;
 var emojiPickerFooterWithTopShadow = null;
+var emojiPickerFooterWithTopShadowNew = null;
+var emojiPreviewContainerStyles = {
+  emojiPreviewContainer: "_ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o"
+};
 var emojiPickerFooterTestId = exports.emojiPickerFooterTestId = 'emoji-picker-footer';
 var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
-  var selectedEmoji = _ref.selectedEmoji;
-  return /*#__PURE__*/React.createElement("div", {
+  var selectedEmoji = _ref.selectedEmoji,
+    onOpenUpload = _ref.onOpenUpload,
+    uploadEnabled = _ref.uploadEnabled;
+  var intl = (0, _reactIntl.useIntl)();
+  return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiPickerFooterTestId,
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3doia51"])
+  }, selectedEmoji ? /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: emojiPreviewContainerStyles.emojiPreviewContainer
+  }, /*#__PURE__*/React.createElement(_EmojiPreviewComponent.EmojiPreviewComponent, {
+    emoji: selectedEmoji
+  })) : /*#__PURE__*/React.createElement(_AddEmoji.AddOwnEmoji, {
+    onOpenUpload: onOpenUpload,
+    uploadEnabled: uploadEnabled,
+    intl: intl
+  })) : /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiPickerFooterTestId,
     className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1uh4 _16qsvjqj"])
   }, selectedEmoji && /*#__PURE__*/React.createElement(_EmojiPreviewComponent.EmojiPreviewComponent, {

package/dist/cjs/components/picker/EmojiPickerList.js

@@ -41,6 +41,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     onEmojiSelected = _props$onEmojiSelecte === void 0 ? function () {} : _props$onEmojiSelecte,
     _props$onEmojiActive = props.onEmojiActive,
     onEmojiActive = _props$onEmojiActive === void 0 ? function () {} : _props$onEmojiActive,
+    onEmojiLeave = props.onEmojiLeave,
     _props$onEmojiDelete = props.onEmojiDelete,
     onEmojiDelete = _props$onEmojiDelete === void 0 ? function () {} : _props$onEmojiDelete,
     _props$onCategoryActi = props.onCategoryActivated,
@@ -170,11 +171,12 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
         onSelected: onEmojiSelected,
         onDelete: onEmojiDelete,
         onMouseMove: onEmojiActive,
-        onFocus: onEmojiActive
+        onFocus: onEmojiActive,
+        onMouseLeave: (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? onEmojiLeave : undefined
       }));
     }
     return items;
-  }, [onEmojiSelected, onEmojiDelete, onEmojiActive]);
+  }, [onEmojiSelected, onEmojiDelete, onEmojiActive, onEmojiLeave]);
   var buildVirtualItems = (0, _react.useCallback)(function () {
     var items = [];
     var prevFirstCategory = categoryTracker.getFirstCategory();
@@ -325,7 +327,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   var virtualListHeight = (0, _react.useMemo)(function () {
-    return _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
+    return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _EmojiPickerSizes.sizes.listHeightNew + (0, _utils.emojiPickerHeightOffset)(size) : _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
   }, [size]);
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerTabPanel.default, {
     showSearchResults: !!query

package/dist/cjs/components/picker/EmojiPickerListSearch.compiled.css

@@ -1,13 +1,16 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._n6341l7x [data-ds--text-field--container]{border-color:var(--ds-border,#0b120e24)}
 ._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._13xeglyw:invalid{box-shadow:none}
 ._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
+._18z11b66 [data-ds--text-field--container]{padding-top:var(--ds-space-050,4px)}
 ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
 ._1bsb1osq{width:100%}
 ._1e0cglyw{display:none}
 ._1goxglyw::-ms-clear{display:none}
 ._1q51t94y{padding-block-start:1px}
+._1q51yh40{padding-block-start:2px}
 ._1qu2glyw{outline-style:none}
 ._3um015vq{visibility:hidden}
 ._80om1kw7{cursor:inherit}
@@ -15,6 +18,7 @@
 ._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
 ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
 ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._otyr1i6y{margin-bottom:var(--ds-space-negative-025,-2px)}
 ._syaz1kw7{color:inherit}
 ._tzy4105o{opacity:.5}
 ._tzy4idpf{opacity:0}

package/dist/cjs/components/picker/EmojiPickerListSearch.js

@@ -13,6 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _useDebounce = require("use-debounce");
@@ -20,8 +21,11 @@ var _constants = require("../../util/constants");
 var _i18n = require("../i18n");
 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 input = null;
+var inputNew = null;
+var textFieldWrapperNew = null;
 var pickerSearch = null;
 var searchIcon = null;
+var searchIconNew = null;
 var hidden = null;
 var emojiPickerSearchTestId = exports.emojiPickerSearchTestId = 'emoji-picker-search';
 var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPickerListSearch(props) {
@@ -67,7 +71,28 @@ var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPicker
     role: "status"
   }, dirty ? query === '' ? formatMessage(_i18n.messages.searchResultsStatusSeeAll) : formatMessage(_i18n.messages.searchResultsStatus, {
     count: resultsCount
-  }) : null), /*#__PURE__*/_react.default.createElement(_textfield.default, {
+  }) : null), (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_n6341l7x _18z11b66"])
+  }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+    role: "searchbox",
+    "aria-label": formatMessage(_i18n.messages.searchLabel),
+    autoComplete: "off",
+    name: "search",
+    placeholder: "".concat(formatMessage(_i18n.messages.searchPlaceholder), "..."),
+    defaultValue: query || '',
+    onChange: handleOnChange,
+    elemBeforeInput: /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _runtime.ax)(["_tzy4105o _18u01i6y _otyr1i6y"])
+    }, /*#__PURE__*/_react.default.createElement(_search.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })),
+    testId: emojiPickerSearchTestId,
+    ref: textRef,
+    isCompact: true,
+    className: (0, _runtime.ax)(["_11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _syaz1kw7 _80om1kw7 _1q51yh40 _y4tize3t _85i5v77o _bozg12x7 _1bsb1osq _13xeglyw _1goxglyw"])
+  })) : /*#__PURE__*/_react.default.createElement(_textfield.default, {
     role: "searchbox",
     "aria-label": formatMessage(_i18n.messages.searchLabel),
     autoComplete: "off",

package/dist/cjs/components/picker/EmojiPickerSizes.js

@@ -7,6 +7,7 @@ exports.sizes = void 0;
 var _constants = require("../../util/constants");
 var sizes = exports.sizes = {
   listHeight: _constants.emojiPickerListHeight,
+  listHeightNew: _constants.emojiPickerListHeightNew,
   listWidth: _constants.emojiPickerWidth,
   searchHeight: 52,
   // 32px height + 10px padding top/bottom

package/dist/cjs/components/picker/categories.js

@@ -113,58 +113,58 @@ var CategoryDescriptionMapNew = exports.CategoryDescriptionMapNew = {
     icon: _clock.default,
     order: 1
   },
+  ATLASSIAN: {
+    id: 'ATLASSIAN',
+    name: 'productivityCategory',
+    icon: _checkCircle.default,
+    order: 2
+  },
   PEOPLE: {
     id: 'PEOPLE',
     name: 'peopleCategory',
     icon: _emoji.default,
-    order: 2
+    order: 3
   },
   NATURE: {
     id: 'NATURE',
     name: 'natureCategory',
     icon: _tree.default,
-    order: 3
+    order: 4
   },
   FOODS: {
     id: 'FOODS',
     name: 'foodsCategory',
     icon: _takeoutFood.default,
-    order: 4
+    order: 5
   },
   ACTIVITY: {
     id: 'ACTIVITY',
     name: 'activityCategory',
     icon: _basketball.default,
-    order: 5
+    order: 6
   },
   PLACES: {
     id: 'PLACES',
     name: 'placesCategory',
     icon: _vehicleCar.default,
-    order: 6
+    order: 7
   },
   OBJECTS: {
     id: 'OBJECTS',
     name: 'objectsCategory',
     icon: _lightbulb.default,
-    order: 7
+    order: 8
   },
   SYMBOLS: {
     id: 'SYMBOLS',
     name: 'symbolsCategory',
     icon: _heart.default,
-    order: 8
+    order: 9
   },
   FLAGS: {
     id: 'FLAGS',
     name: 'flagsCategory',
     icon: _flag.default,
-    order: 9
-  },
-  ATLASSIAN: {
-    id: 'ATLASSIAN',
-    name: 'productivityCategory',
-    icon: _checkCircle.default,
     order: 10
   },
   USER_CUSTOM: {

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: "0.0.0-development"
+      packageVersion: "70.4.2"
     }, attributes)
   };
 };