@atlaskit/emoji 70.4.2 → 70.5.0

package/dist/es2019/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/es2019/components/common/AddEmoji.js

@@ -0,0 +1,28 @@
+/* AddEmoji.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./AddEmoji.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { messages } from '../i18n';
+import Button from '@atlaskit/button/new';
+export const emojiActionsTestId = 'emoji-actions';
+export const uploadEmojiTestId = 'upload-emoji';
+const addCustomEmoji = null;
+
+// Generic Type for the wrapped functional component
+
+export const AddOwnEmoji = props => {
+  const {
+    onOpenUpload,
+    uploadEnabled
+  } = props;
+  return /*#__PURE__*/React.createElement(Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiTestId,
+    className: ax(["_1wpz1h6o _19pkutpp _2hwxutpp _otyrutpp _18u0utpp"])
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, label => /*#__PURE__*/React.createElement(Button, {
+    onClick: onOpenUpload,
+    tabIndex: 0,
+    id: "add-custom-emoji"
+  }, label))));
+};

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

@@ -5,7 +5,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';
@@ -14,7 +14,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';
@@ -27,30 +26,25 @@ const addCustomEmojiButton = null;
 const emojiActionsWrapper = null;
 const emojiToneSelectorContainer = null;
 const previewFooter = null;
+const previewFooterNew = null;
 export const emojiActionsTestId = 'emoji-actions';
 export const uploadEmojiTestId = 'upload-emoji';
 
 // Generic Type for the wrapped functional component
 
-const AddOwnEmoji = props => {
+export const AddOwnEmoji = props => {
   const {
     onOpenUpload,
     uploadEnabled
   } = props;
-  const {
-    formatMessage
-  } = useIntl();
   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, label => /*#__PURE__*/React.createElement(AkButton, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, label => /*#__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: ""
     })),
@@ -127,6 +121,7 @@ const TonesWrapper = props => {
     isVisible: !showToneSelector
   }));
 };
+// TODO: remove this on cleanup of platform_emoji_picker_refresh
 export const EmojiActions = props => {
   const {
     onToneSelected,
@@ -160,7 +155,15 @@ export const 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,
@@ -171,7 +174,13 @@ export const 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,
@@ -179,7 +188,24 @@ export const 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/es2019/components/common/EmojiUploadPicker.js

@@ -87,7 +87,8 @@ const ChooseEmojiFile = /*#__PURE__*/memo(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/es2019/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/es2019/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 const tonePreviewTestId = 'tone-preview';
 const emojiButton = null;
 const hidden = null;
+const emojiButtonOutline = null;
 export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     emoji,
@@ -16,7 +18,26 @@ export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
     onSelected,
     isVisible = true
   } = props;
-  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/es2019/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/es2019/components/picker/CategorySelector.js

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

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

@@ -87,6 +87,11 @@ const EmojiPickerComponent = ({
       setSelectedEmoji(emoji);
     }
   }, [selectedEmoji]);
+  const onEmojiLeave = useCallback(() => {
+    if (fg('platform_emoji_picker_refresh')) {
+      setSelectedEmoji(undefined);
+    }
+  }, []);
   const onCategoryActivated = useCallback(category => {
     // Ignore scroll-driven category changes while a programmatic reveal()
     // scroll is in progress — they would flicker the indicator through
@@ -447,7 +452,7 @@ const EmojiPickerComponent = ({
       emojiProvider.unsubscribe(onProviderChange);
     };
   }, [emojiProvider, onProviderChange]);
-  const showPreview = selectedEmoji && !uploading;
+  const showPreview = fg('platform_emoji_picker_refresh') ? !uploading : selectedEmoji && !uploading;
   if (fg('platform_no_noninteractive_emojis_reactions')) {
     return /*#__PURE__*/React.createElement("div", {
       ref: onPickerRef,
@@ -472,6 +477,7 @@ const EmojiPickerComponent = ({
       currentUser: currentUser,
       onEmojiSelected: recordUsageOnSelection,
       onEmojiActive: onEmojiActive,
+      onEmojiLeave: onEmojiLeave,
       onEmojiDelete: onTriggerDelete,
       onCategoryActivated: onCategoryActivated,
       onSearch: onSearch,
@@ -496,7 +502,9 @@ const EmojiPickerComponent = ({
       size: size,
       activeCategoryId: activeCategory
     }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
-      selectedEmoji: selectedEmoji
+      selectedEmoji: selectedEmoji,
+      uploadEnabled: isUploadSupported && !uploading,
+      onOpenUpload: onOpenUpload
     })));
   }
   return /*#__PURE__*/React.createElement("div", {
@@ -519,6 +527,7 @@ const EmojiPickerComponent = ({
     currentUser: currentUser,
     onEmojiSelected: recordUsageOnSelection,
     onEmojiActive: onEmojiActive,
+    onEmojiLeave: onEmojiLeave,
     onEmojiDelete: onTriggerDelete,
     onCategoryActivated: onCategoryActivated,
     onSearch: onSearch,
@@ -543,7 +552,9 @@ const EmojiPickerComponent = ({
     size: size,
     activeCategoryId: activeCategory
   }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
-    selectedEmoji: selectedEmoji
+    selectedEmoji: selectedEmoji,
+    uploadEnabled: isUploadSupported && !uploading,
+    onOpenUpload: onOpenUpload
   }));
 };
 const _default_1 = /*#__PURE__*/memo(EmojiPickerComponent);

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

@@ -13,6 +13,7 @@ const EmojiPickerEmojiRow = ({
   emojis,
   onSelected,
   onMouseMove,
+  onMouseLeave,
   onFocus,
   title,
   showDelete,
@@ -49,6 +50,9 @@ const EmojiPickerEmojiRow = ({
       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/es2019/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/es2019/components/picker/EmojiPickerFooter.js

@@ -3,17 +3,41 @@ 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';
 const emojiPickerFooter = null;
 const emojiPickerFooterWithTopShadow = null;
+const emojiPickerFooterWithTopShadowNew = null;
+const emojiPreviewContainerStyles = {
+  emojiPreviewContainer: "_ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o"
+};
 export const emojiPickerFooterTestId = 'emoji-picker-footer';
 const EmojiPickerFooter = ({
-  selectedEmoji
-}) => /*#__PURE__*/React.createElement("div", {
-  "data-testid": emojiPickerFooterTestId,
-  className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1uh4 _16qsvjqj"])
-}, selectedEmoji && /*#__PURE__*/React.createElement(EmojiPreviewComponent, {
-  emoji: selectedEmoji
-}));
+  selectedEmoji,
+  onOpenUpload,
+  uploadEnabled
+}) => {
+  const 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, {
+    emoji: selectedEmoji
+  }));
+};
 const _default_1 = /*#__PURE__*/memo(EmojiPickerFooter);
 export default _default_1;

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

@@ -28,6 +28,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     currentUser,
     onEmojiSelected = () => {},
     onEmojiActive = () => {},
+    onEmojiLeave,
     onEmojiDelete = () => {},
     onCategoryActivated = () => {},
     onSearch = () => {},
@@ -138,11 +139,12 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
         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]);
   const buildVirtualItems = useCallback(() => {
     let items = [];
     const prevFirstCategory = categoryTracker.getFirstCategory();
@@ -291,7 +293,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
-  const virtualListHeight = useMemo(() => sizes.listHeight + emojiPickerHeightOffset(size), [size]);
+  const virtualListHeight = useMemo(() => {
+    return fg('platform_emoji_picker_refresh') ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
+  }, [size]);
   return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query
   }, /*#__PURE__*/React.createElement(EmojiActions, {

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

@@ -4,14 +4,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';
 const input = null;
+const inputNew = null;
+const textFieldWrapperNew = null;
 const pickerSearch = null;
 const searchIcon = null;
+const searchIconNew = null;
 const hidden = null;
 export const emojiPickerSearchTestId = 'emoji-picker-search';
 export const EmojiPickerListSearch = props => {
@@ -54,7 +58,28 @@ export const 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: `${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/es2019/components/picker/EmojiPickerSizes.js

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

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

@@ -106,58 +106,58 @@ export const 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/es2019/util/analytics/analytics.js

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

package/dist/es2019/util/constants.js

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

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

@@ -0,0 +1,28 @@
+/* AddEmoji.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./AddEmoji.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { messages } from '../i18n';
+import Button from '@atlaskit/button/new';
+export var emojiActionsTestId = 'emoji-actions';
+export var uploadEmojiTestId = 'upload-emoji';
+var addCustomEmoji = null;
+
+// Generic Type for the wrapped functional component
+
+export var AddOwnEmoji = function AddOwnEmoji(props) {
+  var onOpenUpload = props.onOpenUpload,
+    uploadEnabled = props.uploadEnabled;
+  return /*#__PURE__*/React.createElement(Fragment, null, uploadEnabled && /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiTestId,
+    className: ax(["_1wpz1h6o _19pkutpp _2hwxutpp _otyrutpp _18u0utpp"])
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
+    return /*#__PURE__*/React.createElement(Button, {
+      onClick: onOpenUpload,
+      tabIndex: 0,
+      id: "add-custom-emoji"
+    }, label);
+  })));
+};