@atlaskit/emoji 70.4.2 → 70.5.0

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

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useState, useRef, memo, useLayoutEffect, useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { FormattedMessage, injectIntl, useIntl } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import EmojiDeletePreview from './EmojiDeletePreview';
 import EmojiUploadPicker from './EmojiUploadPicker';
 import TonePreviewButton from './TonePreviewButton';
@@ -15,7 +15,6 @@ import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import { messages } from '../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/core/add';
-import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
 import { emojiPickerAddEmoji } from './styles';
 import { DEFAULT_TONE } from '../../util/constants';
@@ -28,28 +27,24 @@ var addCustomEmojiButton = null;
 var emojiActionsWrapper = null;
 var emojiToneSelectorContainer = null;
 var previewFooter = null;
+var previewFooterNew = null;
 export var emojiActionsTestId = 'emoji-actions';
 export var uploadEmojiTestId = 'upload-emoji';
 
 // Generic Type for the wrapped functional component
 
-var AddOwnEmoji = function AddOwnEmoji(props) {
+export var AddOwnEmoji = function AddOwnEmoji(props) {
   var onOpenUpload = props.onOpenUpload,
     uploadEnabled = props.uploadEnabled;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
     "data-testid": uploadEmojiTestId,
     className: ax(["_1wpz1h6o _18u019bv _otyr19bv"])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, fg('platform_emoji_picker_refresh') ? messages.addEmojiLabel : messages.addCustomEmojiLabel, function (label) {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
     return /*#__PURE__*/React.createElement(AkButton, {
       onClick: onOpenUpload,
       iconBefore: /*#__PURE__*/React.createElement(Box, {
         xcss: styles.icon
-      }, fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement(EmojiAddIcon, {
-        color: "currentColor",
-        label: formatMessage(messages.addCustomEmojiLabel)
-      }) : /*#__PURE__*/React.createElement(AddIcon, {
+      }, /*#__PURE__*/React.createElement(AddIcon, {
         color: "currentColor",
         label: ""
       })),
@@ -123,6 +118,7 @@ var TonesWrapper = function TonesWrapper(props) {
     isVisible: !showToneSelector
   }));
 };
+// TODO: remove this on cleanup of platform_emoji_picker_refresh
 export var EmojiActions = function EmojiActions(props) {
   var onToneSelected = props.onToneSelected,
     onToneSelectorCancelled = props.onToneSelectorCancelled,
@@ -162,7 +158,15 @@ export var EmojiActions = function EmojiActions(props) {
     setShowToneSelector(false);
   }, [showToneSelector, onToneSelectorCancelled]);
   if (uploading) {
-    return /*#__PURE__*/React.createElement("div", {
+    return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+      className: ax(["_16jlidpf _1o9zidpf _i0dl1wug"])
+    }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
+      onUploadCancelled: onUploadCancelled,
+      onUploadEmoji: onUploadEmoji,
+      onFileChooserClicked: onFileChooserClicked,
+      errorMessage: uploadErrorMessage,
+      initialUploadName: initialUploadName
+    })) : /*#__PURE__*/React.createElement("div", {
       className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
     }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
       onUploadCancelled: onUploadCancelled,
@@ -173,7 +177,13 @@ export var EmojiActions = function EmojiActions(props) {
     }));
   }
   if (emojiToDelete) {
-    return /*#__PURE__*/React.createElement("div", {
+    return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+      className: ax(["_16jlidpf _1o9zidpf _i0dl1wug"])
+    }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
+      emoji: emojiToDelete,
+      onDeleteEmoji: onDeleteEmoji,
+      onCloseDelete: onCloseDelete
+    })) : /*#__PURE__*/React.createElement("div", {
       className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _n7zl1uh4 _16qsjgpa"])
     }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
       emoji: emojiToDelete,
@@ -181,7 +191,24 @@ export var EmojiActions = function EmojiActions(props) {
       onCloseDelete: onCloseDelete
     }));
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiActionsTestId,
+    onMouseLeave: onMouseLeaveHandler,
+    onBlur: fg('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(EmojiPickerListSearch, {
+    onChange: onChange,
+    query: query,
+    resultsCount: resultsCount,
+    isVisible: !showToneSelector
+  }), /*#__PURE__*/React.createElement(TonesWrapper, _extends({}, props, {
+    onToneOpen: onToneOpenHandler,
+    onToneClose: onToneCloseHandler,
+    onToneSelected: onToneSelectedHandler,
+    showToneSelector: showToneSelector
+  })))) : /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiActionsTestId,
     onMouseLeave: onMouseLeaveHandler,
     onBlur: fg('platform_suppression_removal_fix_reactions') ? onMouseLeaveHandler : undefined,

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

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

package/dist/esm/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/esm/components/common/TonePreviewButton.js

@@ -3,10 +3,12 @@ import "./TonePreviewButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, memo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Emoji from './Emoji';
 export var tonePreviewTestId = 'tone-preview';
 var emojiButton = null;
 var hidden = null;
+var emojiButtonOutline = null;
 export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var emoji = props.emoji,
     selectOnHover = props.selectOnHover,
@@ -15,7 +17,26 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
     onSelected = props.onSelected,
     _props$isVisible = props.isVisible,
     isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
-  return /*#__PURE__*/React.createElement("button", {
+  return 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: 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, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  })) : /*#__PURE__*/React.createElement("button", {
     ref: ref,
     onClick: onSelected,
     "aria-label": ariaLabelText,

package/dist/esm/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/esm/components/picker/CategorySelector.js

@@ -16,7 +16,7 @@ import { usePrevious } from '../../hooks/usePrevious';
 import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
 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",
@@ -30,13 +30,16 @@ var categorySelectorTablistNew = null;
 export var sortCategories = function sortCategories(c1, c2) {
   return CategoryDescriptionMap[c1].order - CategoryDescriptionMap[c2].order;
 };
+export var sortCategoriesNew = function sortCategoriesNew(c1, c2) {
+  return CategoryDescriptionMapNew[c1].order - CategoryDescriptionMapNew[c2].order;
+};
 var addNewCategories = function addNewCategories(oldCategories, newCategories) {
   if (!newCategories) {
     return oldCategories;
   }
   return oldCategories.concat(newCategories.filter(function (category) {
     return !!(fg('platform_emoji_picker_refresh') ? CategoryDescriptionMapNew : CategoryDescriptionMap)[category];
-  })).sort(sortCategories);
+  })).sort(fg('platform_emoji_picker_refresh') ? sortCategoriesNew : sortCategories);
 };
 export var categorySelectorComponentTestId = 'category-selector-component';
 export var categorySelectorCategoryTestId = function categorySelectorCategoryTestId(categoryId) {

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

@@ -134,6 +134,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       setSelectedEmoji(emoji);
     }
   }, [selectedEmoji]);
+  var onEmojiLeave = useCallback(function () {
+    if (fg('platform_emoji_picker_refresh')) {
+      setSelectedEmoji(undefined);
+    }
+  }, []);
   var onCategoryActivated = useCallback(function (category) {
     // Ignore scroll-driven category changes while a programmatic reveal()
     // scroll is in progress — they would flicker the indicator through
@@ -500,7 +505,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       emojiProvider.unsubscribe(onProviderChange);
     };
   }, [emojiProvider, onProviderChange]);
-  var showPreview = selectedEmoji && !uploading;
+  var showPreview = fg('platform_emoji_picker_refresh') ? !uploading : selectedEmoji && !uploading;
   if (fg('platform_no_noninteractive_emojis_reactions')) {
     return /*#__PURE__*/React.createElement("div", {
       ref: onPickerRef,
@@ -529,6 +534,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       currentUser: currentUser,
       onEmojiSelected: recordUsageOnSelection,
       onEmojiActive: onEmojiActive,
+      onEmojiLeave: onEmojiLeave,
       onEmojiDelete: onTriggerDelete,
       onCategoryActivated: onCategoryActivated,
       onSearch: onSearch,
@@ -553,7 +559,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       size: size,
       activeCategoryId: activeCategory
     }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
-      selectedEmoji: selectedEmoji
+      selectedEmoji: selectedEmoji,
+      uploadEnabled: isUploadSupported && !uploading,
+      onOpenUpload: onOpenUpload
     })));
   }
   return /*#__PURE__*/React.createElement("div", {
@@ -580,6 +588,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     currentUser: currentUser,
     onEmojiSelected: recordUsageOnSelection,
     onEmojiActive: onEmojiActive,
+    onEmojiLeave: onEmojiLeave,
     onEmojiDelete: onTriggerDelete,
     onCategoryActivated: onCategoryActivated,
     onSearch: onSearch,
@@ -604,7 +613,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     size: size,
     activeCategoryId: activeCategory
   }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
-    selectedEmoji: selectedEmoji
+    selectedEmoji: selectedEmoji,
+    uploadEnabled: isUploadSupported && !uploading,
+    onOpenUpload: onOpenUpload
   }));
 };
 var _default_1 = /*#__PURE__*/memo(EmojiPickerComponent);

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

@@ -13,6 +13,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,
@@ -46,6 +47,9 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       role: "gridcell",
       "aria-colindex": index + 1 // aria-colindex is 1 based
       ,
+      onMouseLeave: onMouseLeave,
+      onBlur: onMouseLeave,
+      tabIndex: 0,
       className: 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, {
       emoji: emoji,

package/dist/esm/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/esm/components/picker/EmojiPickerFooter.js

@@ -3,13 +3,35 @@ import "./EmojiPickerFooter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
+import { useIntl } from 'react-intl';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { AddOwnEmoji } from '../common/AddEmoji';
 var emojiPickerFooter = null;
 var emojiPickerFooterWithTopShadow = null;
+var emojiPickerFooterWithTopShadowNew = null;
+var emojiPreviewContainerStyles = {
+  emojiPreviewContainer: "_ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o"
+};
 export var 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 = useIntl();
+  return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiPickerFooterTestId,
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3doia51"])
+  }, selectedEmoji ? /*#__PURE__*/React.createElement(Box, {
+    xcss: emojiPreviewContainerStyles.emojiPreviewContainer
+  }, /*#__PURE__*/React.createElement(EmojiPreviewComponent, {
+    emoji: selectedEmoji
+  })) : /*#__PURE__*/React.createElement(AddOwnEmoji, {
+    onOpenUpload: onOpenUpload,
+    uploadEnabled: uploadEnabled,
+    intl: intl
+  })) : /*#__PURE__*/React.createElement("div", {
     "data-testid": emojiPickerFooterTestId,
     className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1uh4 _16qsvjqj"])
   }, selectedEmoji && /*#__PURE__*/React.createElement(EmojiPreviewComponent, {

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

@@ -33,6 +33,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     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,
@@ -162,11 +163,12 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
         onSelected: onEmojiSelected,
         onDelete: onEmojiDelete,
         onMouseMove: onEmojiActive,
-        onFocus: onEmojiActive
+        onFocus: onEmojiActive,
+        onMouseLeave: fg('platform_emoji_picker_refresh') ? onEmojiLeave : undefined
       }));
     }
     return items;
-  }, [onEmojiSelected, onEmojiDelete, onEmojiActive]);
+  }, [onEmojiSelected, onEmojiDelete, onEmojiActive, onEmojiLeave]);
   var buildVirtualItems = useCallback(function () {
     var items = [];
     var prevFirstCategory = categoryTracker.getFirstCategory();
@@ -317,7 +319,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   var virtualListHeight = useMemo(function () {
-    return sizes.listHeight + emojiPickerHeightOffset(size);
+    return fg('platform_emoji_picker_refresh') ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
   }, [size]);
   return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query

package/dist/esm/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/esm/components/picker/EmojiPickerListSearch.js

@@ -5,14 +5,18 @@ import { ax, ix } from "@compiled/react/runtime";
 import SearchIcon from '@atlaskit/icon/core/search';
 import TextField from '@atlaskit/textfield';
 import VisuallyHidden from '@atlaskit/visually-hidden';
+import { fg } from '@atlaskit/platform-feature-flags';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useDebouncedCallback } from 'use-debounce';
 import { EMOJI_SEARCH_DEBOUNCE } from '../../util/constants';
 import { messages } from '../i18n';
 var input = null;
+var inputNew = null;
+var textFieldWrapperNew = null;
 var pickerSearch = null;
 var searchIcon = null;
+var searchIconNew = null;
 var hidden = null;
 export var emojiPickerSearchTestId = 'emoji-picker-search';
 export var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
@@ -58,7 +62,28 @@ export var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
     role: "status"
   }, dirty ? query === '' ? formatMessage(messages.searchResultsStatusSeeAll) : formatMessage(messages.searchResultsStatus, {
     count: resultsCount
-  }) : null), /*#__PURE__*/React.createElement(TextField, {
+  }) : null), fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    className: ax(["_n6341l7x _18z11b66"])
+  }, /*#__PURE__*/React.createElement(TextField, {
+    role: "searchbox",
+    "aria-label": formatMessage(messages.searchLabel),
+    autoComplete: "off",
+    name: "search",
+    placeholder: "".concat(formatMessage(messages.searchPlaceholder), "..."),
+    defaultValue: query || '',
+    onChange: handleOnChange,
+    elemBeforeInput: /*#__PURE__*/React.createElement("span", {
+      className: ax(["_tzy4105o _18u01i6y _otyr1i6y"])
+    }, /*#__PURE__*/React.createElement(SearchIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })),
+    testId: emojiPickerSearchTestId,
+    ref: textRef,
+    isCompact: true,
+    className: ax(["_11c8fhey _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _syaz1kw7 _80om1kw7 _1q51yh40 _y4tize3t _85i5v77o _bozg12x7 _1bsb1osq _13xeglyw _1goxglyw"])
+  })) : /*#__PURE__*/React.createElement(TextField, {
     role: "searchbox",
     "aria-label": formatMessage(messages.searchLabel),
     autoComplete: "off",

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

@@ -1,6 +1,7 @@
-import { emojiPickerListHeight, emojiPickerWidth } from '../../util/constants';
+import { emojiPickerListHeight, emojiPickerListHeightNew, emojiPickerWidth } from '../../util/constants';
 export var sizes = {
   listHeight: emojiPickerListHeight,
+  listHeightNew: emojiPickerListHeightNew,
   listWidth: emojiPickerWidth,
   searchHeight: 52,
   // 32px height + 10px padding top/bottom

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

@@ -106,58 +106,58 @@ export var CategoryDescriptionMapNew = {
     icon: ClockIcon,
     order: 1
   },
+  ATLASSIAN: {
+    id: 'ATLASSIAN',
+    name: 'productivityCategory',
+    icon: CheckCircleIcon,
+    order: 2
+  },
   PEOPLE: {
     id: 'PEOPLE',
     name: 'peopleCategory',
     icon: EmojiIcon,
-    order: 2
+    order: 3
   },
   NATURE: {
     id: 'NATURE',
     name: 'natureCategory',
     icon: TreeIcon,
-    order: 3
+    order: 4
   },
   FOODS: {
     id: 'FOODS',
     name: 'foodsCategory',
     icon: TakeoutFoodIcon,
-    order: 4
+    order: 5
   },
   ACTIVITY: {
     id: 'ACTIVITY',
     name: 'activityCategory',
     icon: BasketballIcon,
-    order: 5
+    order: 6
   },
   PLACES: {
     id: 'PLACES',
     name: 'placesCategory',
     icon: VehicleCarIcon,
-    order: 6
+    order: 7
   },
   OBJECTS: {
     id: 'OBJECTS',
     name: 'objectsCategory',
     icon: LightbulbIcon,
-    order: 7
+    order: 8
   },
   SYMBOLS: {
     id: 'SYMBOLS',
     name: 'symbolsCategory',
     icon: HeartIcon,
-    order: 8
+    order: 9
   },
   FLAGS: {
     id: 'FLAGS',
     name: 'flagsCategory',
     icon: FlagIcon,
-    order: 9
-  },
-  ATLASSIAN: {
-    id: 'ATLASSIAN',
-    name: 'productivityCategory',
-    icon: CheckCircleIcon,
     order: 10
   },
   USER_CUSTOM: {

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

package/dist/esm/util/constants.js

@@ -30,6 +30,7 @@ export var defaultEmojiPickerSize = 'medium';
 export var emojiPickerMinHeight = 260;
 export var emojiPickerHeight = 295;
 export var emojiPickerListHeight = emojiPickerHeight - 58; // picker height - actions height
+export var emojiPickerListHeightNew = emojiPickerHeight - 102; // picker height - actions height - preview height
 
 export var emojiPickerPreviewHeight = 54;
 export var emojiPickerHeightWithPreview = emojiPickerHeight + emojiPickerPreviewHeight;

package/dist/types/components/common/AddEmoji.d.ts

@@ -0,0 +1,11 @@
+import { type WrappedComponentProps } from 'react-intl';
+export declare const emojiActionsTestId = "emoji-actions";
+export declare const uploadEmojiTestId = "upload-emoji";
+type Props = {
+    onOpenUpload: () => void;
+    uploadEnabled: boolean;
+};
+type PropsWithWrappedComponentPropsType = Props & WrappedComponentProps;
+type AddOwnEmojiProps = PropsWithWrappedComponentPropsType;
+export declare const AddOwnEmoji: (props: AddOwnEmojiProps) => JSX.Element;
+export {};

package/dist/types/components/common/EmojiActions.d.ts

@@ -30,6 +30,8 @@ export interface Props {
 export declare const emojiActionsTestId = "emoji-actions";
 export declare const uploadEmojiTestId = "upload-emoji";
 type PropsWithWrappedComponentPropsType = Props & WrappedComponentProps;
+type AddOwnEmojiProps = PropsWithWrappedComponentPropsType;
+export declare const AddOwnEmoji: (props: AddOwnEmojiProps) => JSX.Element;
 type EmojiActionsProps = PropsWithWrappedComponentPropsType;
 export declare const EmojiActions: (props: EmojiActionsProps) => JSX.Element;
 declare const _default_1: FC<WithIntlProps<Props & WrappedComponentProps>> & {

package/dist/types/components/picker/CategorySelector.d.ts

@@ -10,6 +10,7 @@ export type CategoryMap = {
     [id: string]: CategoryDescription;
 };
 export declare const sortCategories: (c1: CategoryGroupKey, c2: CategoryGroupKey) => number;
+export declare const sortCategoriesNew: (c1: CategoryGroupKey, c2: CategoryGroupKey) => number;
 export declare const categorySelectorComponentTestId = "category-selector-component";
 export declare const categorySelectorCategoryTestId: (categoryId: string) => string;
 declare const CategorySelector: (props: Props) => JSX.Element;

package/dist/types/components/picker/EmojiPickerEmojiRow.d.ts

@@ -11,11 +11,12 @@ export interface Props {
     emojis: EmojiDescription[];
     onDelete?: OnEmojiEvent;
     onFocus?: OnEmojiEvent;
+    onMouseLeave?: () => void;
     onMouseMove?: OnEmojiEvent;
     onSelected?: OnEmojiEvent;
     showDelete: boolean;
     title: string;
     virtualItemContext?: VirtualItemContext;
 }
-declare const _default_1: MemoExoticComponent<({ emojis, onSelected, onMouseMove, onFocus, title, showDelete, onDelete, virtualItemContext, }: Props) => JSX.Element>;
+declare const _default_1: MemoExoticComponent<({ emojis, onSelected, onMouseMove, onMouseLeave, onFocus, title, showDelete, onDelete, virtualItemContext, }: Props) => JSX.Element>;
 export default _default_1;

package/dist/types/components/picker/EmojiPickerFooter.d.ts

@@ -5,8 +5,10 @@
 import { type MemoExoticComponent } from 'react';
 import type { EmojiDescription } from '../../types';
 export interface Props {
+    onOpenUpload: () => void;
     selectedEmoji?: EmojiDescription;
+    uploadEnabled: boolean;
 }
 export declare const emojiPickerFooterTestId = "emoji-picker-footer";
-declare const _default_1: MemoExoticComponent<({ selectedEmoji }: Props) => JSX.Element>;
+declare const _default_1: MemoExoticComponent<({ selectedEmoji, onOpenUpload, uploadEnabled }: Props) => JSX.Element>;
 export default _default_1;

package/dist/types/components/picker/EmojiPickerList.d.ts

@@ -22,6 +22,7 @@ export interface Props {
     onDeleteEmoji: OnDeleteEmoji;
     onEmojiActive?: OnEmojiEvent;
     onEmojiDelete?: OnEmojiEvent;
+    onEmojiLeave?: () => void;
     onEmojiSelected?: OnEmojiEvent;
     onFileChooserClicked?: () => void;
     onOpenUpload: () => void;

package/dist/types/components/picker/EmojiPickerSizes.d.ts

@@ -4,6 +4,7 @@ export declare const sizes: {
     emojiPerRow: number;
     emojiRowHeight: number;
     listHeight: number;
+    listHeightNew: number;
     listWidth: number;
     loadingRowHeight: number;
     searchHeight: number;

package/dist/types/util/constants.d.ts

@@ -31,6 +31,7 @@ export declare const defaultEmojiPickerSize = "medium";
 export declare const emojiPickerMinHeight = 260;
 export declare const emojiPickerHeight = 295;
 export declare const emojiPickerListHeight: number;
+export declare const emojiPickerListHeightNew: number;
 export declare const emojiPickerPreviewHeight = 54;
 export declare const emojiPickerHeightWithPreview: number;
 export declare const localStoragePrefix = "fabric.emoji";