@atlaskit/emoji 66.0.3 → 66.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/emoji
 
+## 66.1.0
+
+### Minor Changes
+
+- [`cde71051978`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cde71051978) - [ux] Provide size options for emoji picker, including `small`, `medium`, and `large`. Make `medium` size for emoji picker by default, which will enlarge emoji picker to show more emojis.
+
+### Patch Changes
+
+- [`1324afa6676`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1324afa6676) - Add autofocus for emoji picker inside requestAnimationFrame
+- Updated dependencies
+
 ## 66.0.3
 
 ### Patch Changes

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

@@ -23,6 +23,10 @@ var _reactIntlNext = require("react-intl-next");
 
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 
+var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
+
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
 var ImageUtil = _interopRequireWildcard(require("../../util/image"));
 
 var _logger = _interopRequireDefault(require("../../util/logger"));
@@ -83,10 +87,23 @@ var ChooseEmojiFile = function ChooseEmojiFile(props) {
   return (0, _react2.jsx)("div", {
     css: _styles.emojiUpload
   }, (0, _react2.jsx)("div", {
+    css: _styles.emojiUploadTop
+  }, (0, _react2.jsx)("span", {
     css: _styles.uploadChooseFileMessage
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (message) {
     return (0, _react2.jsx)("h5", null, message);
   })), (0, _react2.jsx)("div", {
+    css: _styles.closeEmojiUploadButton
+  }, (0, _react2.jsx)(_standardButton.default, {
+    onClick: onUploadCancelled,
+    "aria-describedby": formatMessage(_i18n.messages.cancelLabel),
+    appearance: "subtle",
+    spacing: "none",
+    shouldFitContainer: true
+  }, (0, _react2.jsx)(_cross.default, {
+    size: "small",
+    label: formatMessage(_i18n.messages.cancelLabel)
+  })))), (0, _react2.jsx)("div", {
     css: _styles.uploadChooseFileRow
   }, (0, _react2.jsx)("span", {
     css: _styles.uploadChooseFileEmojiName

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.submitDelete = exports.selectOnHoverStyles = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainerAnimated = exports.placeholderContainer = exports.placeholder = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiStyles = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiPreviewErrorMessage = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emojiActionsWrapper = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.commonSelectedStyles = exports.cancelButton = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
+exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.submitDelete = exports.selectOnHoverStyles = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainerAnimated = exports.placeholderContainer = exports.placeholder = exports.hiddenToneButton = exports.emojiUploadTop = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiStyles = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiPreviewErrorMessage = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emojiActionsWrapper = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.commonSelectedStyles = exports.closeEmojiUploadButton = exports.cancelButton = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -129,7 +129,7 @@ var emojiButton = (0, _react.css)((_css3 = {
   padding: 0
 }), (0, _defineProperty2.default)(_css3, '&>span', (_span = {
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  padding: '8px'
+  padding: '6px'
 }, (0, _defineProperty2.default)(_span, "&>.".concat(emojiSprite), {
   height: '24px',
   width: '24px'
@@ -234,19 +234,30 @@ var emojiUpload = (0, _react.css)({
   justifyContent: 'space-around'
 });
 exports.emojiUpload = emojiUpload;
+var emojiUploadTop = (0, _react.css)({
+  paddingBottom: '7px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-end',
+  fontSize: '12px'
+});
+exports.emojiUploadTop = emojiUploadTop;
 var uploadChooseFileMessage = (0, _react.css)({
-  color: (0, _tokens.token)('color.text.subtle', _colors.N300),
-  fontSize: '12px',
-  paddingBottom: '7px'
+  color: (0, _tokens.token)('color.text.subtle', _colors.N300)
 });
 exports.uploadChooseFileMessage = uploadChooseFileMessage;
+var closeEmojiUploadButton = (0, _react.css)({
+  display: 'flex'
+});
+exports.closeEmojiUploadButton = closeEmojiUploadButton;
 var emojiUploadBottom = (0, _react.css)({
   fontSize: '11px'
 });
 exports.emojiUploadBottom = emojiUploadBottom;
 var uploadChooseFileRow = (0, _react.css)({
   display: 'flex',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBottom: '7px'
 });
 exports.uploadChooseFileRow = uploadChooseFileRow;
 var uploadChooseFileEmojiName = (0, _react.css)({

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

@@ -41,6 +41,8 @@ var _styles = require("./styles");
 
 var _UfoErrorBoundary = require("../common/UfoErrorBoundary");
 
+var _constants = require("../../util/constants");
+
 var _excluded = ["emojiProvider"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -132,6 +134,9 @@ var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
 }(_LoadingEmojiComponent.default);
 
 exports.EmojiPickerInternal = EmojiPickerInternal;
+(0, _defineProperty2.default)(EmojiPickerInternal, "defaultProps", {
+  size: _constants.defaultEmojiPickerSize
+});
 var EmojiPicker = (0, _analyticsNext.withAnalyticsEvents)()(EmojiPickerInternal);
 var _default = EmojiPicker;
 exports.default = _default;

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

@@ -62,7 +62,9 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onSelection = _ref.onSelection,
       onPickerRef = _ref.onPickerRef,
       hideToneSelector = _ref.hideToneSelector,
-      createAnalyticsEvent = _ref.createAnalyticsEvent;
+      createAnalyticsEvent = _ref.createAnalyticsEvent,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.defaultEmojiPickerSize : _ref$size;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -575,7 +577,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   return (0, _react2.jsx)(_LegacyEmojiContextProvider.default, {
     emojiContextValue: emojiContextValue
   }, (0, _react2.jsx)("div", {
-    css: (0, _styles.emojiPicker)(showPreview),
+    css: (0, _styles.emojiPicker)(showPreview, size),
     ref: onPickerRef,
     "data-emoji-picker-container": true
   }, (0, _react2.jsx)(_CategorySelector.default, {
@@ -608,7 +610,8 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onDeleteEmoji: onDeleteEmoji,
     onCloseDelete: onCloseDelete,
     onFileChooserClicked: onFileChooserClicked,
-    onOpenUpload: onOpenUpload
+    onOpenUpload: onOpenUpload,
+    size: size
   }), showPreview && (0, _react2.jsx)(_EmojiPickerFooter.default, {
     selectedEmoji: selectedEmoji
   })));

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

@@ -45,6 +45,8 @@ var _EmojiActions = _interopRequireDefault(require("../common/EmojiActions"));
 
 var _styles = require("./styles");
 
+var _utils = require("./utils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -296,7 +298,9 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
           onCloseDelete = _this$props2.onCloseDelete,
           onDeleteEmoji = _this$props2.onDeleteEmoji,
           onFileChooserClicked = _this$props2.onFileChooserClicked,
-          onOpenUpload = _this$props2.onOpenUpload;
+          onOpenUpload = _this$props2.onOpenUpload,
+          _this$props2$size = _this$props2.size,
+          size = _this$props2$size === void 0 ? _constants.defaultEmojiPickerSize : _this$props2$size;
       return (0, _react2.jsx)("div", {
         ref: "root",
         css: _styles.emojiPickerList,
@@ -321,7 +325,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         onChange: this.onSearch
       }), (0, _react2.jsx)(_List.List, {
         ref: "list",
-        height: _EmojiPickerSizes.sizes.listHeight,
+        height: _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size),
         overscanRowCount: 5,
         rowCount: this.virtualItems.length,
         rowHeight: this.rowSize,
@@ -342,5 +346,6 @@ exports.default = EmojiPickerVirtualList;
   onEmojiActive: function onEmojiActive() {},
   onEmojiDelete: function onEmojiDelete() {},
   onCategoryActivated: function onCategoryActivated() {},
-  onSearch: function onSearch() {}
+  onSearch: function onSearch() {},
+  size: _constants.defaultEmojiPickerSize
 });

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

@@ -89,7 +89,7 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
           return;
         }
 
-        window.setTimeout(_this.focusInput);
+        window.requestAnimationFrame(_this.focusInput);
       }
     });
     return _this;

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

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

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

@@ -13,8 +13,6 @@ var _react = require("@emotion/react");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _sharedStyles = require("../../util/shared-styles");
@@ -23,10 +21,16 @@ var _styles = require("../common/styles");
 
 var _constants2 = require("../../util/constants");
 
+var _colors = require("@atlaskit/theme/colors");
+
+var _utils = require("./utils");
+
 var _css4, _css5, _css6;
 
 // Level 1 - picker
 var emojiPicker = function emojiPicker(hasPreview) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants2.defaultEmojiPickerSize;
+  var heightOffset = (0, _utils.emojiPickerHeightOffset)(size);
   return (0, _react.css)({
     display: 'flex',
     flexDirection: 'column',
@@ -35,10 +39,13 @@ var emojiPicker = function emojiPicker(hasPreview) {
     border: "".concat(_sharedStyles.emojiPickerBorderColor, " 1px solid"),
     borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
     boxShadow: _sharedStyles.emojiPickerBoxShadow,
-    height: "".concat(hasPreview ? _constants2.emojiPickerHeightWithPreview : _constants2.emojiPickerHeight, "px"),
+    height: "".concat(hasPreview ? _constants2.emojiPickerHeightWithPreview + heightOffset : _constants2.emojiPickerHeight + heightOffset, "px"),
     width: "".concat(_constants2.emojiPickerWidth, "px"),
     marginBottom: '8px',
-    minWidth: "".concat(_constants2.emojiPickerWidth, "px")
+    minWidth: "".concat(_constants2.emojiPickerWidth, "px"),
+    minHeight: "".concat(_constants2.emojiPickerMinHeight + heightOffset, "px"),
+    maxHeight: 'calc(80vh - 86px)' // ensure showing full picker in small device: mobile header is 40px (Jira) - 56px(Confluence and Atlas), reaction picker height is 24px with margin 6px,
+
   });
 }; // Level 2
 /// Category Selector

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emojiPickerHeightOffset = void 0;
+
+var _constants = require("../../util/constants");
+
+var emojiPickerHeightOffset = function emojiPickerHeightOffset(size) {
+  if (size === 'medium') {
+    return _constants.sizeGap;
+  } else if (size === 'large') {
+    return _constants.sizeGap * 2;
+  }
+
+  return 0;
+};
+
+exports.emojiPickerHeightOffset = emojiPickerHeightOffset;

package/dist/cjs/util/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.userCustomTitle = exports.selectedToneStorageKey = exports.migrationUserId = exports.localStoragePrefix = exports.frequentCategory = exports.emojiPickerWidth = exports.emojiPickerHeightWithPreview = exports.emojiPickerHeight = exports.deleteEmojiLabel = exports.defaultListLimit = exports.defaultEmojiHeight = exports.defaultCategories = exports.dataURLPrefix = exports.customType = exports.customTitle = exports.customCategory = exports.analyticsEmojiPrefix = exports.SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP = exports.SAMPLING_RATE_EMOJI_RENDERED_EXP = exports.MAX_ORDINAL = void 0;
+exports.userCustomTitle = exports.sizeGap = exports.selectedToneStorageKey = exports.migrationUserId = exports.localStoragePrefix = exports.frequentCategory = exports.emojiPickerWidth = exports.emojiPickerPreviewHeight = exports.emojiPickerMinHeight = exports.emojiPickerListHeight = exports.emojiPickerHeightWithPreview = exports.emojiPickerHeight = exports.deleteEmojiLabel = exports.defaultListLimit = exports.defaultEmojiPickerSize = exports.defaultEmojiHeight = exports.defaultCategories = exports.dataURLPrefix = exports.customType = exports.customTitle = exports.customCategory = exports.analyticsEmojiPrefix = exports.SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP = exports.SAMPLING_RATE_EMOJI_RENDERED_EXP = exports.MAX_ORDINAL = void 0;
 var customCategory = 'CUSTOM';
 exports.customCategory = customCategory;
 var frequentCategory = 'FREQUENT';
@@ -29,9 +29,20 @@ var defaultEmojiHeight = 20;
 exports.defaultEmojiHeight = defaultEmojiHeight;
 var emojiPickerWidth = 350;
 exports.emojiPickerWidth = emojiPickerWidth;
+var sizeGap = 80;
+exports.sizeGap = sizeGap;
+var defaultEmojiPickerSize = 'medium';
+exports.defaultEmojiPickerSize = defaultEmojiPickerSize;
+var emojiPickerMinHeight = 260;
+exports.emojiPickerMinHeight = emojiPickerMinHeight;
 var emojiPickerHeight = 295;
 exports.emojiPickerHeight = emojiPickerHeight;
-var emojiPickerHeightWithPreview = 348;
+var emojiPickerListHeight = emojiPickerHeight - 58; // picker height - actions height
+
+exports.emojiPickerListHeight = emojiPickerListHeight;
+var emojiPickerPreviewHeight = 54;
+exports.emojiPickerPreviewHeight = emojiPickerPreviewHeight;
+var emojiPickerHeightWithPreview = emojiPickerHeight + emojiPickerPreviewHeight;
 exports.emojiPickerHeightWithPreview = emojiPickerHeightWithPreview;
 var localStoragePrefix = 'fabric.emoji';
 exports.localStoragePrefix = localStoragePrefix;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "66.0.3",
+	"version": "66.1.0",
 	"sideEffects": false
 }

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

@@ -3,6 +3,8 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import AkButton from '@atlaskit/button/standard-button';
 import * as ImageUtil from '../../util/image';
 import debug from '../../util/logger';
 import { messages } from '../i18n';
@@ -10,7 +12,7 @@ import EmojiErrorMessage from './EmojiErrorMessage';
 import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
-import { emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, uploadChooseFileBrowse, uploadChooseFileEmojiName, uploadChooseFileMessage, uploadChooseFileRow } from './styles';
+import { closeEmojiUploadButton, emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, emojiUploadTop, uploadChooseFileBrowse, uploadChooseFileEmojiName, uploadChooseFileMessage, uploadChooseFileRow } from './styles';
 const disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 
 const sanitizeName = name => {
@@ -53,8 +55,21 @@ const ChooseEmojiFile = props => {
   return jsx("div", {
     css: emojiUpload
   }, jsx("div", {
+    css: emojiUploadTop
+  }, jsx("span", {
     css: uploadChooseFileMessage
   }, jsx(FormattedMessage, messages.addCustomEmojiLabel, message => jsx("h5", null, message))), jsx("div", {
+    css: closeEmojiUploadButton
+  }, jsx(AkButton, {
+    onClick: onUploadCancelled,
+    "aria-describedby": formatMessage(messages.cancelLabel),
+    appearance: "subtle",
+    spacing: "none",
+    shouldFitContainer: true
+  }, jsx(CrossIcon, {
+    size: "small",
+    label: formatMessage(messages.cancelLabel)
+  })))), jsx("div", {
     css: uploadChooseFileRow
   }, jsx("span", {
     css: uploadChooseFileEmojiName

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

@@ -109,7 +109,7 @@ export const emojiButton = css({
   },
   '&>span': {
     borderRadius: `${borderRadius()}px`,
-    padding: '8px',
+    padding: '6px',
     // Scale sprite to fit regardless of default emoji size
     [`&>.${emojiSprite}`]: {
       height: '24px',
@@ -213,17 +213,26 @@ export const emojiUpload = css({
   flexDirection: 'column',
   justifyContent: 'space-around'
 });
+export const emojiUploadTop = css({
+  paddingBottom: '7px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-end',
+  fontSize: '12px'
+});
 export const uploadChooseFileMessage = css({
-  color: token('color.text.subtle', N300),
-  fontSize: '12px',
-  paddingBottom: '7px'
+  color: token('color.text.subtle', N300)
+});
+export const closeEmojiUploadButton = css({
+  display: 'flex'
 });
 export const emojiUploadBottom = css({
   fontSize: '11px'
 });
 export const uploadChooseFileRow = css({
   display: 'flex',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBottom: '7px'
 });
 export const uploadChooseFileEmojiName = css({
   flex: '1 1 auto',

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

@@ -9,6 +9,7 @@ import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
 import { LoadingItem } from './EmojiPickerVirtualItems';
 import { emojiPicker } from './styles';
 import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
+import { defaultEmojiPickerSize } from '../../util/constants';
 
 const emojiPickerModuleLoader = () => import(
 /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */
@@ -65,5 +66,10 @@ export class EmojiPickerInternal extends LoadingEmojiComponent {
   }
 
 }
+
+_defineProperty(EmojiPickerInternal, "defaultProps", {
+  size: defaultEmojiPickerSize
+});
+
 const EmojiPicker = withAnalyticsEvents()(EmojiPickerInternal);
 export default EmojiPicker;

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

@@ -5,7 +5,7 @@ import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage } from 'react-intl-next';
 import { getEmojiVariation } from '../../api/EmojiRepository';
 import { supportsUploadFeature } from '../../api/EmojiResource';
-import { customCategory, frequentCategory } from '../../util/constants';
+import { customCategory, defaultEmojiPickerSize, frequentCategory } from '../../util/constants';
 import { containsEmojiId, isPromise
 /*, isEmojiIdEqual, isEmojiLoaded*/
 , isEmojiDescription } from '../../util/type-helpers';
@@ -27,7 +27,8 @@ const EmojiPickerComponent = ({
   onSelection,
   onPickerRef,
   hideToneSelector,
-  createAnalyticsEvent
+  createAnalyticsEvent,
+  size = defaultEmojiPickerSize
 }) => {
   const [filteredEmojis, setFilteredEmojis] = useState([]);
   const [searchEmojis, setSearchEmojis] = useState([]);
@@ -463,7 +464,7 @@ const EmojiPickerComponent = ({
   return jsx(LegacyEmojiContextProvider, {
     emojiContextValue: emojiContextValue
   }, jsx("div", {
-    css: emojiPicker(showPreview),
+    css: emojiPicker(showPreview, size),
     ref: onPickerRef,
     "data-emoji-picker-container": true
   }, jsx(CategorySelector, {
@@ -496,7 +497,8 @@ const EmojiPickerComponent = ({
     onDeleteEmoji: onDeleteEmoji,
     onCloseDelete: onCloseDelete,
     onFileChooserClicked: onFileChooserClicked,
-    onOpenUpload: onOpenUpload
+    onOpenUpload: onOpenUpload,
+    size: size
   }), showPreview && jsx(EmojiPickerFooter, {
     selectedEmoji: selectedEmoji
   })));

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

@@ -4,13 +4,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { List as VirtualList } from 'react-virtualized/dist/commonjs/List';
-import { customCategory, userCustomTitle } from '../../util/constants';
+import { customCategory, defaultEmojiPickerSize, userCustomTitle } from '../../util/constants';
 import { CategoryDescriptionMap } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
 import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
 import EmojiActions from '../common/EmojiActions';
 import { emojiPickerList, virtualList } from './styles';
+import { emojiPickerHeightOffset } from './utils';
 /**
  * Test id for wrapper Emoji Picker List div
  */
@@ -243,7 +244,8 @@ export default class EmojiPickerVirtualList extends PureComponent {
       onCloseDelete,
       onDeleteEmoji,
       onFileChooserClicked,
-      onOpenUpload
+      onOpenUpload,
+      size = defaultEmojiPickerSize
     } = this.props;
     return jsx("div", {
       ref: "root",
@@ -269,7 +271,7 @@ export default class EmojiPickerVirtualList extends PureComponent {
       onChange: this.onSearch
     }), jsx(VirtualList, {
       ref: "list",
-      height: sizes.listHeight,
+      height: sizes.listHeight + emojiPickerHeightOffset(size),
       overscanRowCount: 5,
       rowCount: this.virtualItems.length,
       rowHeight: this.rowSize,
@@ -288,5 +290,6 @@ _defineProperty(EmojiPickerVirtualList, "defaultProps", {
   onEmojiActive: () => {},
   onEmojiDelete: () => {},
   onCategoryActivated: () => {},
-  onSearch: () => {}
+  onSearch: () => {},
+  size: defaultEmojiPickerSize
 });

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

@@ -44,7 +44,7 @@ class EmojiPickerListSearch extends PureComponent {
           return;
         }
 
-        window.setTimeout(this.focusInput);
+        window.requestAnimationFrame(this.focusInput);
       }
     });
   }

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

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

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

@@ -1,12 +1,14 @@
 import { css } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
-import { B200, B300, N100A, N200, N30, N30A, N50, N900 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
 import { emojiSprite, placeholder, emojiNodeStyles } from '../common/styles';
-import { emojiPickerHeight, emojiPickerHeightWithPreview, emojiPickerWidth } from '../../util/constants'; // Level 1 - picker
+import { defaultEmojiPickerSize, emojiPickerHeight, emojiPickerHeightWithPreview, emojiPickerMinHeight, emojiPickerWidth } from '../../util/constants';
+import { B200, B300, N100A, N200, N30, N30A, N50, N900 } from '@atlaskit/theme/colors';
+import { emojiPickerHeightOffset } from './utils'; // Level 1 - picker
 
-export const emojiPicker = hasPreview => {
+export const emojiPicker = (hasPreview, size = defaultEmojiPickerSize) => {
+  const heightOffset = emojiPickerHeightOffset(size);
   return css({
     display: 'flex',
     flexDirection: 'column',
@@ -15,10 +17,13 @@ export const emojiPicker = hasPreview => {
     border: `${emojiPickerBorderColor} 1px solid`,
     borderRadius: `${borderRadius()}px`,
     boxShadow: emojiPickerBoxShadow,
-    height: `${hasPreview ? emojiPickerHeightWithPreview : emojiPickerHeight}px`,
+    height: `${hasPreview ? emojiPickerHeightWithPreview + heightOffset : emojiPickerHeight + heightOffset}px`,
     width: `${emojiPickerWidth}px`,
     marginBottom: '8px',
-    minWidth: `${emojiPickerWidth}px`
+    minWidth: `${emojiPickerWidth}px`,
+    minHeight: `${emojiPickerMinHeight + heightOffset}px`,
+    maxHeight: 'calc(80vh - 86px)' // ensure showing full picker in small device: mobile header is 40px (Jira) - 56px(Confluence and Atlas), reaction picker height is 24px with margin 6px,
+
   });
 }; // Level 2
 /// Category Selector

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

@@ -0,0 +1,10 @@
+import { sizeGap } from '../../util/constants';
+export const emojiPickerHeightOffset = size => {
+  if (size === 'medium') {
+    return sizeGap;
+  } else if (size === 'large') {
+    return sizeGap * 2;
+  }
+
+  return 0;
+};

package/dist/es2019/util/constants.js

@@ -13,8 +13,14 @@ export const deleteEmojiLabel = 'delete-emoji';
 export const MAX_ORDINAL = 100000;
 export const defaultEmojiHeight = 20;
 export const emojiPickerWidth = 350;
+export const sizeGap = 80;
+export const defaultEmojiPickerSize = 'medium';
+export const emojiPickerMinHeight = 260;
 export const emojiPickerHeight = 295;
-export const emojiPickerHeightWithPreview = 348;
+export const emojiPickerListHeight = emojiPickerHeight - 58; // picker height - actions height
+
+export const emojiPickerPreviewHeight = 54;
+export const emojiPickerHeightWithPreview = emojiPickerHeight + emojiPickerPreviewHeight;
 export const localStoragePrefix = 'fabric.emoji';
 export const selectedToneStorageKey = `${localStoragePrefix}.selectedTone`;
 export const defaultCategories = ['PEOPLE', 'NATURE', 'FOODS', 'ACTIVITY', 'PLACES', 'OBJECTS', 'SYMBOLS', 'FLAGS'];

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "66.0.3",
+	"version": "66.1.0",
 	"sideEffects": false
 }

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

@@ -7,6 +7,8 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import AkButton from '@atlaskit/button/standard-button';
 import * as ImageUtil from '../../util/image';
 import debug from '../../util/logger';
 import { messages } from '../i18n';
@@ -14,7 +16,7 @@ import EmojiErrorMessage from './EmojiErrorMessage';
 import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
-import { emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, uploadChooseFileBrowse, uploadChooseFileEmojiName, uploadChooseFileMessage, uploadChooseFileRow } from './styles';
+import { closeEmojiUploadButton, emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, emojiUploadTop, uploadChooseFileBrowse, uploadChooseFileEmojiName, uploadChooseFileMessage, uploadChooseFileRow } from './styles';
 var disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 
 var sanitizeName = function sanitizeName(name) {
@@ -54,10 +56,23 @@ var ChooseEmojiFile = function ChooseEmojiFile(props) {
   return jsx("div", {
     css: emojiUpload
   }, jsx("div", {
+    css: emojiUploadTop
+  }, jsx("span", {
     css: uploadChooseFileMessage
   }, jsx(FormattedMessage, messages.addCustomEmojiLabel, function (message) {
     return jsx("h5", null, message);
   })), jsx("div", {
+    css: closeEmojiUploadButton
+  }, jsx(AkButton, {
+    onClick: onUploadCancelled,
+    "aria-describedby": formatMessage(messages.cancelLabel),
+    appearance: "subtle",
+    spacing: "none",
+    shouldFitContainer: true
+  }, jsx(CrossIcon, {
+    size: "small",
+    label: formatMessage(messages.cancelLabel)
+  })))), jsx("div", {
     css: uploadChooseFileRow
   }, jsx("span", {
     css: uploadChooseFileEmojiName