@atlaskit/emoji 65.0.0 → 65.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/emoji
 
+## 65.1.0
+
+### Minor Changes
+
+- [`cceb3262363`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cceb3262363) - [ux] Show preview below the scrollable emoji box
+
+### Patch Changes
+
+- [`641bf010d2a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/641bf010d2a) - Added JSDoc comments for exposing props
+- [`c47218c565a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c47218c565a) - Convert the demo resource control to functional componment
+
 ## 65.0.0
 
 ### Major Changes

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ResourcedEmojiComponent = void 0;
+exports.default = exports.ResourcedEmojiComponent = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -47,13 +47,16 @@ var ResourcedEmojiComponentRenderStatesEnum;
 var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
   var emojiProvider = _ref.emojiProvider,
       emojiId = _ref.emojiId,
-      showTooltip = _ref.showTooltip,
-      customFallback = _ref.customFallback,
+      _ref$showTooltip = _ref.showTooltip,
+      showTooltip = _ref$showTooltip === void 0 ? false : _ref$showTooltip,
+      _ref$customFallback = _ref.customFallback,
+      customFallback = _ref$customFallback === void 0 ? undefined : _ref$customFallback,
       _ref$fitToHeight = _ref.fitToHeight,
       fitToHeight = _ref$fitToHeight === void 0 ? _constants.defaultEmojiHeight : _ref$fitToHeight,
       _ref$optimistic = _ref.optimistic,
       optimistic = _ref$optimistic === void 0 ? false : _ref$optimistic,
-      optimisticImageURL = _ref.optimisticImageURL;
+      _ref$optimisticImageU = _ref.optimisticImageURL,
+      optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU;
   var shortName = emojiId.shortName,
       id = emojiId.id,
       fallback = emojiId.fallback;
@@ -207,4 +210,6 @@ var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
   })));
 };
 
-exports.ResourcedEmojiComponent = ResourcedEmojiComponent;
+exports.ResourcedEmojiComponent = ResourcedEmojiComponent;
+var _default = ResourcedEmojiComponent;
+exports.default = _default;

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

@@ -127,6 +127,11 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
         }
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onPreviewDisplayed", function (isDisplayed) {
+      _this.setState({
+        isPreviewDisplayed: isDisplayed
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileChooserClicked", function () {
       _this.fireAnalytics((0, _analytics.selectedFileEvent)());
     });
@@ -380,7 +385,8 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       selectedTone: !hideToneSelector ? _emojiProvider.getSelectedTone() : undefined,
       loading: true,
       uploadSupported: false,
-      uploading: false
+      uploading: false,
+      isPreviewDisplayed: false
     };
     _this.openTime = 0;
     return _this;
@@ -568,7 +574,8 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
           emojiToDelete = _this$state3.emojiToDelete,
           uploading = _this$state3.uploading,
           uploadErrorMessage = _this$state3.uploadErrorMessage,
-          uploadSupported = _this$state3.uploadSupported;
+          uploadSupported = _this$state3.uploadSupported,
+          isPreviewDisplayed = _this$state3.isPreviewDisplayed;
       var recordUsageOnSelection = (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, this.onSelectWrapper, function (analytic) {
         return _this4.fireAnalytics(analytic('picker'));
       });
@@ -581,7 +588,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       var picker = (0, _core.jsx)(_LegacyEmojiContextProvider.default, {
         emojiContextValue: emojiContextValue
       }, (0, _core.jsx)("div", {
-        css: _styles.emojiPicker,
+        css: (0, _styles.emojiPicker)(isPreviewDisplayed),
         ref: this.handlePickerRef,
         "data-emoji-picker-container": true
       }, (0, _core.jsx)(_CategorySelector.default, {
@@ -617,7 +624,8 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
         onOpenUpload: this.onOpenUpload
       }), (0, _core.jsx)(_EmojiPickerFooter.default, {
         selectedEmoji: selectedEmoji,
-        isUploading: uploading
+        isUploading: uploading,
+        onPreviewDisplayed: this.onPreviewDisplayed
       })));
       return picker;
     }

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

@@ -48,9 +48,11 @@ var EmojiPickerFooter = /*#__PURE__*/function (_PureComponent) {
       var previewFooterClassnames = [_styles.emojiPickerFooter, _styles.emojiPickerFooterWithTopShadow];
 
       if (!selectedEmoji || isUploading) {
+        this.props.onPreviewDisplayed(false);
         return null;
       }
 
+      this.props.onPreviewDisplayed(true);
       return (0, _core.jsx)("div", {
         css: previewFooterClassnames
       }, selectedEmoji && (0, _core.jsx)(_EmojiPreviewComponent.EmojiPreviewComponent, {

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

@@ -26,21 +26,24 @@ var _colors = require("@atlaskit/theme/colors");
 var _css4, _css5, _css6;
 
 // Level 1 - picker
-var emojiPicker = (0, _core.css)({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-  background: (0, _tokens.token)('elevation.surface.overlay', 'white'),
-  border: "".concat(_sharedStyles.emojiPickerBorderColor, " 1px solid"),
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  boxShadow: _sharedStyles.emojiPickerBoxShadow,
-  height: "".concat(_constants2.emojiPickerHeight, "px"),
-  width: "".concat(_constants2.emojiPickerWidth, "px"),
-  marginBottom: '8px',
-  minWidth: "".concat(_constants2.emojiPickerWidth, "px")
-}); // Level 2
+var emojiPicker = function emojiPicker(hasPreview) {
+  return (0, _core.css)({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    background: (0, _tokens.token)('elevation.surface.overlay', 'white'),
+    border: "".concat(_sharedStyles.emojiPickerBorderColor, " 1px solid"),
+    borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+    boxShadow: _sharedStyles.emojiPickerBoxShadow,
+    height: "".concat(hasPreview ? _constants2.emojiPickerHeightWithPreview : _constants2.emojiPickerHeight, "px"),
+    width: "".concat(_constants2.emojiPickerWidth, "px"),
+    marginBottom: '8px',
+    minWidth: "".concat(_constants2.emojiPickerWidth, "px")
+  });
+}; // Level 2
 /// Category Selector
 
+
 exports.emojiPicker = emojiPicker;
 var addButton = 'emoji-picker-add-button';
 exports.addButton = addButton;

package/dist/cjs/hooks/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePrevious = usePrevious;
+
+var _react = require("react");
+
+function usePrevious(value) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

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.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.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;
 var customCategory = 'CUSTOM';
 exports.customCategory = customCategory;
 var frequentCategory = 'FREQUENT';
@@ -31,6 +31,8 @@ var emojiPickerWidth = 350;
 exports.emojiPickerWidth = emojiPickerWidth;
 var emojiPickerHeight = 295;
 exports.emojiPickerHeight = emojiPickerHeight;
+var emojiPickerHeightWithPreview = 348;
+exports.emojiPickerHeightWithPreview = emojiPickerHeightWithPreview;
 var localStoragePrefix = 'fabric.emoji';
 exports.localStoragePrefix = localStoragePrefix;
 var selectedToneStorageKey = "".concat(localStoragePrefix, ".selectedTone");

package/dist/cjs/version.json

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

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

@@ -20,11 +20,11 @@ var ResourcedEmojiComponentRenderStatesEnum;
 export const ResourcedEmojiComponent = ({
   emojiProvider,
   emojiId,
-  showTooltip,
-  customFallback,
+  showTooltip = false,
+  customFallback = undefined,
   fitToHeight = defaultEmojiHeight,
   optimistic = false,
-  optimisticImageURL
+  optimisticImageURL = undefined
 }) => {
   const {
     shortName,
@@ -170,4 +170,5 @@ export const ResourcedEmojiComponent = ({
     showTooltip: showTooltip,
     fitToHeight: fitToHeight
   })));
-};
+};
+export default ResourcedEmojiComponent;

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

@@ -81,6 +81,12 @@ export default class EmojiPickerComponent extends PureComponent {
       });
     });
 
+    _defineProperty(this, "onPreviewDisplayed", isDisplayed => {
+      this.setState({
+        isPreviewDisplayed: isDisplayed
+      });
+    });
+
     _defineProperty(this, "onFileChooserClicked", () => {
       this.fireAnalytics(selectedFileEvent());
     });
@@ -353,7 +359,8 @@ export default class EmojiPickerComponent extends PureComponent {
       selectedTone: !hideToneSelector ? _emojiProvider.getSelectedTone() : undefined,
       loading: true,
       uploadSupported: false,
-      uploading: false
+      uploading: false,
+      isPreviewDisplayed: false
     };
     this.openTime = 0;
   }
@@ -525,7 +532,8 @@ export default class EmojiPickerComponent extends PureComponent {
       emojiToDelete,
       uploading,
       uploadErrorMessage,
-      uploadSupported
+      uploadSupported,
+      isPreviewDisplayed
     } = this.state;
     const recordUsageOnSelection = createRecordSelectionDefault(emojiProvider, this.onSelectWrapper, analytic => this.fireAnalytics(analytic('picker')));
     const formattedErrorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
@@ -537,7 +545,7 @@ export default class EmojiPickerComponent extends PureComponent {
     const picker = jsx(LegacyEmojiContextProvider, {
       emojiContextValue: emojiContextValue
     }, jsx("div", {
-      css: emojiPicker,
+      css: emojiPicker(isPreviewDisplayed),
       ref: this.handlePickerRef,
       "data-emoji-picker-container": true
     }, jsx(CategorySelector, {
@@ -573,7 +581,8 @@ export default class EmojiPickerComponent extends PureComponent {
       onOpenUpload: this.onOpenUpload
     }), jsx(EmojiPickerFooter, {
       selectedEmoji: selectedEmoji,
-      isUploading: uploading
+      isUploading: uploading,
+      onPreviewDisplayed: this.onPreviewDisplayed
     })));
     return picker;
   }

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

@@ -12,9 +12,11 @@ export default class EmojiPickerFooter extends PureComponent {
     const previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
 
     if (!selectedEmoji || isUploading) {
+      this.props.onPreviewDisplayed(false);
       return null;
     }
 
+    this.props.onPreviewDisplayed(true);
     return jsx("div", {
       css: previewFooterClassnames
     }, selectedEmoji && jsx(EmojiPreviewComponent, {

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

@@ -3,22 +3,24 @@ import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
 import { emojiSprite, placeholder, emojiNodeStyles } from '../common/styles';
-import { emojiPickerHeight, emojiPickerWidth } from '../../util/constants';
+import { emojiPickerHeight, emojiPickerHeightWithPreview, emojiPickerWidth } from '../../util/constants';
 import { B200, B300, N100A, N200, N30, N30A, N50, N900 } from '@atlaskit/theme/colors'; // Level 1 - picker
 
-export const emojiPicker = css({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-  background: token('elevation.surface.overlay', 'white'),
-  border: `${emojiPickerBorderColor} 1px solid`,
-  borderRadius: `${borderRadius()}px`,
-  boxShadow: emojiPickerBoxShadow,
-  height: `${emojiPickerHeight}px`,
-  width: `${emojiPickerWidth}px`,
-  marginBottom: '8px',
-  minWidth: `${emojiPickerWidth}px`
-}); // Level 2
+export const emojiPicker = hasPreview => {
+  return css({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    background: token('elevation.surface.overlay', 'white'),
+    border: `${emojiPickerBorderColor} 1px solid`,
+    borderRadius: `${borderRadius()}px`,
+    boxShadow: emojiPickerBoxShadow,
+    height: `${hasPreview ? emojiPickerHeightWithPreview : emojiPickerHeight}px`,
+    width: `${emojiPickerWidth}px`,
+    marginBottom: '8px',
+    minWidth: `${emojiPickerWidth}px`
+  });
+}; // Level 2
 /// Category Selector
 
 export const addButton = 'emoji-picker-add-button';

package/dist/es2019/hooks/index.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

package/dist/es2019/util/constants.js

@@ -14,6 +14,7 @@ export const MAX_ORDINAL = 100000;
 export const defaultEmojiHeight = 20;
 export const emojiPickerWidth = 350;
 export const emojiPickerHeight = 295;
+export const emojiPickerHeightWithPreview = 348;
 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": "65.0.0",
+	"version": "65.1.0",
 	"sideEffects": false
 }

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

@@ -21,13 +21,16 @@ var ResourcedEmojiComponentRenderStatesEnum;
 export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
   var emojiProvider = _ref.emojiProvider,
       emojiId = _ref.emojiId,
-      showTooltip = _ref.showTooltip,
-      customFallback = _ref.customFallback,
+      _ref$showTooltip = _ref.showTooltip,
+      showTooltip = _ref$showTooltip === void 0 ? false : _ref$showTooltip,
+      _ref$customFallback = _ref.customFallback,
+      customFallback = _ref$customFallback === void 0 ? undefined : _ref$customFallback,
       _ref$fitToHeight = _ref.fitToHeight,
       fitToHeight = _ref$fitToHeight === void 0 ? defaultEmojiHeight : _ref$fitToHeight,
       _ref$optimistic = _ref.optimistic,
       optimistic = _ref$optimistic === void 0 ? false : _ref$optimistic,
-      optimisticImageURL = _ref.optimisticImageURL;
+      _ref$optimisticImageU = _ref.optimisticImageURL,
+      optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU;
   var shortName = emojiId.shortName,
       id = emojiId.id,
       fallback = emojiId.fallback;
@@ -179,4 +182,5 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     showTooltip: showTooltip,
     fitToHeight: fitToHeight
   })));
-};
+};
+export default ResourcedEmojiComponent;

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

@@ -102,6 +102,12 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onPreviewDisplayed", function (isDisplayed) {
+      _this.setState({
+        isPreviewDisplayed: isDisplayed
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onFileChooserClicked", function () {
       _this.fireAnalytics(selectedFileEvent());
     });
@@ -375,7 +381,8 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       selectedTone: !hideToneSelector ? _emojiProvider.getSelectedTone() : undefined,
       loading: true,
       uploadSupported: false,
-      uploading: false
+      uploading: false,
+      isPreviewDisplayed: false
     };
     _this.openTime = 0;
     return _this;
@@ -560,7 +567,8 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
           emojiToDelete = _this$state3.emojiToDelete,
           uploading = _this$state3.uploading,
           uploadErrorMessage = _this$state3.uploadErrorMessage,
-          uploadSupported = _this$state3.uploadSupported;
+          uploadSupported = _this$state3.uploadSupported,
+          isPreviewDisplayed = _this$state3.isPreviewDisplayed;
       var recordUsageOnSelection = createRecordSelectionDefault(emojiProvider, this.onSelectWrapper, function (analytic) {
         return _this4.fireAnalytics(analytic('picker'));
       });
@@ -573,7 +581,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       var picker = jsx(LegacyEmojiContextProvider, {
         emojiContextValue: emojiContextValue
       }, jsx("div", {
-        css: emojiPicker,
+        css: emojiPicker(isPreviewDisplayed),
         ref: this.handlePickerRef,
         "data-emoji-picker-container": true
       }, jsx(CategorySelector, {
@@ -609,7 +617,8 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
         onOpenUpload: this.onOpenUpload
       }), jsx(EmojiPickerFooter, {
         selectedEmoji: selectedEmoji,
-        isUploading: uploading
+        isUploading: uploading,
+        onPreviewDisplayed: this.onPreviewDisplayed
       })));
       return picker;
     }

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

@@ -34,9 +34,11 @@ var EmojiPickerFooter = /*#__PURE__*/function (_PureComponent) {
       var previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
 
       if (!selectedEmoji || isUploading) {
+        this.props.onPreviewDisplayed(false);
         return null;
       }
 
+      this.props.onPreviewDisplayed(true);
       return jsx("div", {
         css: previewFooterClassnames
       }, selectedEmoji && jsx(EmojiPreviewComponent, {

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

@@ -7,22 +7,24 @@ import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
 import { emojiSprite, placeholder, emojiNodeStyles } from '../common/styles';
-import { emojiPickerHeight, emojiPickerWidth } from '../../util/constants';
+import { emojiPickerHeight, emojiPickerHeightWithPreview, emojiPickerWidth } from '../../util/constants';
 import { B200, B300, N100A, N200, N30, N30A, N50, N900 } from '@atlaskit/theme/colors'; // Level 1 - picker
 
-export var emojiPicker = css({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-  background: token('elevation.surface.overlay', 'white'),
-  border: "".concat(emojiPickerBorderColor, " 1px solid"),
-  borderRadius: "".concat(borderRadius(), "px"),
-  boxShadow: emojiPickerBoxShadow,
-  height: "".concat(emojiPickerHeight, "px"),
-  width: "".concat(emojiPickerWidth, "px"),
-  marginBottom: '8px',
-  minWidth: "".concat(emojiPickerWidth, "px")
-}); // Level 2
+export var emojiPicker = function emojiPicker(hasPreview) {
+  return css({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    background: token('elevation.surface.overlay', 'white'),
+    border: "".concat(emojiPickerBorderColor, " 1px solid"),
+    borderRadius: "".concat(borderRadius(), "px"),
+    boxShadow: emojiPickerBoxShadow,
+    height: "".concat(hasPreview ? emojiPickerHeightWithPreview : emojiPickerHeight, "px"),
+    width: "".concat(emojiPickerWidth, "px"),
+    marginBottom: '8px',
+    minWidth: "".concat(emojiPickerWidth, "px")
+  });
+}; // Level 2
 /// Category Selector
 
 export var addButton = 'emoji-picker-add-button';

package/dist/esm/hooks/index.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export function usePrevious(value) {
+  var ref = useRef();
+  useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

package/dist/esm/util/constants.js

@@ -14,6 +14,7 @@ export var MAX_ORDINAL = 100000;
 export var defaultEmojiHeight = 20;
 export var emojiPickerWidth = 350;
 export var emojiPickerHeight = 295;
+export var emojiPickerHeightWithPreview = 348;
 export var localStoragePrefix = 'fabric.emoji';
 export var selectedToneStorageKey = "".concat(localStoragePrefix, ".selectedTone");
 export var defaultCategories = ['PEOPLE', 'NATURE', 'FOODS', 'ACTIVITY', 'PLACES', 'OBJECTS', 'SYMBOLS', 'FLAGS'];

package/dist/esm/version.json

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

package/dist/types/api/EmojiResource.d.ts

@@ -36,9 +36,8 @@ export interface EmojiResourceConfig {
      */
     singleEmojiApi?: SingleEmojiApiLoaderConfig;
     /**
-     * Used for fetching emoji asset and render this asset before provider has been
-     * downloaded to reduce the time the user is presented with a placeholder
-     * while downloading the emoji meta data
+     * Renders an image while the provider is being downloaded to reduce the time
+     * the user is being presented with a placeholder
      */
     optimisticImageApi?: OptimisticImageApiLoaderConfig;
 }

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

@@ -11,7 +11,6 @@ export interface Props {
     selected?: boolean;
     /**
      * Automatically show the emoji as selected based on mouse hover.
-     *
      * CSS, fast, does not require a re-render, but selected state not
      * externally controlled via props.
      */

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

@@ -1,6 +1,9 @@
 import { Component, ComponentType } from 'react';
 import { EmojiProvider } from '../../api/EmojiResource';
 export interface Props {
+    /**
+     * Emoji Resource instance
+     */
     emojiProvider: Promise<EmojiProvider>;
 }
 export interface State {

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

@@ -1,36 +1,48 @@
 import { FC } from 'react';
-import EmojiProvider from '../../api/EmojiResource';
-import { EmojiId, OptionalEmojiDescription } from '../../types';
-import { State as LoadingState } from './LoadingEmojiComponent';
+import { EmojiResource } from '../../api/EmojiResource';
+import { EmojiId } from '../../types';
 export interface BaseResourcedEmojiProps {
+    /**
+     * Emoji to display
+     */
     emojiId: EmojiId;
+    /**
+     * Allows to show the tooltip.
+     * Defaults to `false`.
+     */
     showTooltip?: boolean;
+    /**
+     * Scales the emoji proportionally to provided hight.
+     * Defaults to `undefined`.
+     */
     fitToHeight?: number;
     /**
      * Optimistic will call the fetch interface first and not wait for the entire emoji collection
      * to be available before rendering. This is useful for views or pages that show a select set of
      * emojis.
+     * Defaults to `false`.
      */
     optimistic?: boolean;
     /**
      * Custom Fallback allows a custom element or string to be rendered if an emoji fails to be fetched or found.
      * By default it takes the fallback or shortName inside emojiId, but if this prop is set it override the internal
      * fallbacks
-     *
-     * customFallback<Element | string> else emojiId.fallback else emojiId.shortName
+     * customFallback<Element | string> else emojiId.fallback else emojiId.shortName.
+     * Defaults to `undefined`.
      */
     customFallback?: JSX.Element | string;
     /**
      * Will attempt to render a highly condensed version of the emoji with an image url before showing the meta version.
-     * All it required to work is an emojiId, imageUrl and some sizing (with good defaults)
+     * All that is required for optimistic images to render is an emojiId, imageUrl and sizing props.
+     * Defaults to `undefined`.
      */
     optimisticImageURL?: string;
 }
 export interface Props extends BaseResourcedEmojiProps {
-    emojiProvider: EmojiProvider;
-}
-export interface State extends LoadingState {
-    emoji: OptionalEmojiDescription;
-    loaded: boolean;
+    /**
+     * EmojiResource instance that handles fetching of emoji data.
+     */
+    emojiProvider: EmojiResource;
 }
 export declare const ResourcedEmojiComponent: FC<Props>;
+export default ResourcedEmojiComponent;

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

@@ -5,8 +5,17 @@ import { OnEmojiEvent } from '../../types';
 import LoadingEmojiComponent, { Props as LoadingProps, State as LoadingState } from '../common/LoadingEmojiComponent';
 import { PickerRefHandler, Props as ComponentProps } from './EmojiPickerComponent';
 export interface Props extends LoadingProps {
+    /**
+     * Callback to be executed on emoji selection.
+     */
     onSelection?: OnEmojiEvent;
+    /**
+     * Callback to handle picker reference.
+     */
     onPickerRef?: PickerRefHandler;
+    /**
+     * Flag to disable tone selector.
+     */
     hideToneSelector?: boolean;
 }
 export declare class EmojiPickerInternal extends LoadingEmojiComponent<Props & WithAnalyticsEventsProps, LoadingState> {

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

@@ -8,9 +8,21 @@ export interface PickerRefHandler {
     (ref: any): any;
 }
 export interface Props {
+    /**
+     * EmojiResource instance that handles emoji meta data.
+     */
     emojiProvider: EmojiProvider;
+    /**
+     * Callback to be executed when user selects an emoji.
+     */
     onSelection?: OnEmojiEvent;
+    /**
+     * Callback performed when picker reference is being set.
+     */
     onPickerRef?: PickerRefHandler;
+    /**
+     * Flag to disable tone selector.
+     */
     hideToneSelector?: boolean;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
 }
@@ -30,6 +42,7 @@ export interface State {
     uploading: boolean;
     emojiToDelete?: EmojiDescription;
     loading: boolean;
+    isPreviewDisplayed?: boolean;
 }
 export default class EmojiPickerComponent extends PureComponent<Props, State> {
     static defaultProps: {
@@ -45,6 +58,7 @@ export default class EmojiPickerComponent extends PureComponent<Props, State> {
     onEmojiActive: (_emojiId: EmojiId, emoji?: EmojiDescription | undefined) => void;
     onCategoryActivated: (category: CategoryId | null) => void;
     onCategorySelected: (categoryId: CategoryId | null) => void;
+    onPreviewDisplayed: (isDisplayed: boolean) => void;
     onFileChooserClicked: () => void;
     private fireAnalytics;
     private calculateElapsedTime;

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

@@ -3,6 +3,7 @@ import { EmojiDescription } from '../../types';
 export interface Props {
     selectedEmoji?: EmojiDescription;
     isUploading: boolean;
+    onPreviewDisplayed: (isDisplayed: boolean) => void;
 }
 export default class EmojiPickerFooter extends PureComponent<Props, {}> {
     render(): JSX.Element | null;

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

@@ -1,4 +1,4 @@
-export declare const emojiPicker: import("@emotion/utils").SerializedStyles;
+export declare const emojiPicker: (hasPreview?: boolean | undefined) => import("@emotion/utils").SerializedStyles;
 export declare const addButton = "emoji-picker-add-button";
 export declare const categorySelector: import("@emotion/utils").SerializedStyles;
 export declare const active: import("@emotion/utils").SerializedStyles;

package/dist/types/components/typeahead/EmojiTypeAheadComponent.d.ts

@@ -6,14 +6,32 @@ export interface OnLifecycle {
     (): void;
 }
 export interface EmojiTypeAheadBaseProps {
+    /**
+     * Callback to be executed when user selects an emoji.
+     */
     onSelection?: OnEmojiEvent;
+    /**
+     * Search query.
+     */
     query?: string;
+    /**
+     * Number of results to be displayed in the search results list
+     */
     listLimit?: number;
+    /**
+     * Callback to be executed when typeahead component is being shown
+     */
     onOpen?: OnLifecycle;
+    /**
+     * Callback to be executed when typeahead component disappears
+     */
     onClose?: OnLifecycle;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
 }
 export interface Props extends EmojiTypeAheadBaseProps {
+    /**
+     * EmojiResource instance that handles fetching of emoji data.
+     */
     emojiProvider: EmojiProvider;
 }
 export interface State {

package/dist/types/hooks/index.d.ts

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T | null | undefined): T | null | undefined;

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

@@ -14,6 +14,7 @@ export declare const MAX_ORDINAL = 100000;
 export declare const defaultEmojiHeight = 20;
 export declare const emojiPickerWidth = 350;
 export declare const emojiPickerHeight = 295;
+export declare const emojiPickerHeightWithPreview = 348;
 export declare const localStoragePrefix = "fabric.emoji";
 export declare const selectedToneStorageKey: string;
 export declare const defaultCategories: CategoryId[];

package/docs/0-intro.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
-import { md, Example, code, AtlassianInternalWarning } from '@atlaskit/docs';
-import SectionMessage, {
-  SectionMessageAction,
-} from '@atlaskit/section-message';
+import {
+  md,
+  Example,
+  code,
+  AtlassianInternalWarning,
+  Props,
+} from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
 import SimpleEmojiExample from '../examples/00-simple-emoji';
 
 const SimpleEmojiSource = require('!!raw-loader!../examples/00-simple-emoji');
+const EmojiProps = require('!!extract-react-types-loader!../src/components/common/Emoji');
 
 export default md`
   ${(<AtlassianInternalWarning />)}
@@ -20,9 +25,9 @@ export default md`
 
   ${code`
   import EmojiPicker from '@atlaskit/emoji/picker';
-  import { EmojiResource } from '@atlaskit/emoji/resource';
+  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
 
-  const emojiProvider = new EmojiResource({
+  const config: EmojiResourceConfig = {
     providers: [
       {
         url: 'https://emoji-example/emoji/standard',
@@ -36,7 +41,9 @@ export default md`
         }),
       },
     ],
-  });
+  }
+
+  const emojiProvider = new EmojiResource(config);
 
   ReactDOM.render(
     <EmojiPicker
@@ -46,7 +53,25 @@ export default md`
       }}
     />,
     container,
-  );`}
+  );
+  `}
+
+
+
+  ${(
+    <>
+      <br />
+      <SectionMessage
+        appearance="warning"
+        title="Emoji provider is required to be configured in order to use components from this package."
+      >
+        <p>
+          Please refer to `Emoji picker` section for more information on how to
+          configure emoji provider.
+        </p>
+      </SectionMessage>
+    </>
+  )}
 
   ### Other emoji components import examples
 
@@ -75,27 +100,10 @@ export default md`
     <Example
       packageName="@atlaskit/emoji"
       Component={SimpleEmojiExample}
-      title="Emoji"
+      title=" Simple Emoji"
       source={SimpleEmojiSource}
     />
   )}
 
-  ${(
-    <SectionMessage
-      appearance="warning"
-      title="Props can not be displayed for the time being."
-      actions={[
-        {
-          key: '1',
-          href:
-            'https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/packages/elements/emoji/src/components/common/Emoji.tsx',
-          text: 'Emoji Props',
-        },
-      ].map(({ text, ...restAction }) => (
-        <SectionMessageAction {...restAction}>{text}</SectionMessageAction>
-      ))}
-    >
-      <p>You can still find props in the source code.</p>
-    </SectionMessage>
-  )}
+  ${(<Props props={EmojiProps} />)}
 `;

package/docs/1-resourced-emoji.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { md, Example, code, Props } from '@atlaskit/docs';
+import ResourcedEmojiExample from '../examples/23-optimistic-emoji';
+
+const ResourcedEmojiSource = require('!!raw-loader!../examples/23-optimistic-emoji');
+const ResourcedEmojiProps = require('!!extract-react-types-loader!../src/components/common/ResourcedEmojiComponent');
+
+export default md`
+  ## Usage
+
+  Import the component in your React app as follows:
+
+  ${code`
+  import { ResourcedEmoji } from '@atlaskit/emoji';
+  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
+
+  const config: EmojiResourceConfig = {
+    singleEmojiApi: {
+      getUrl: (emojiId: string) => 'https://emoji-example/emoji/site-id/emojiId',
+      securityProvider: () => ({
+        headers: {
+          'User-Context': '{{token}}',
+          Authorization: 'Bearer {{token}}',
+        },
+      })
+    },
+    optimisticImageApi: {
+      getUrl: (emojiId: string) => 'https://emoji-example/emoji/site-id/emojiId/path',
+      securityProvider: () => ({
+        headers: {
+          'User-Context': '{{token}}',
+          Authorization: 'Bearer {{token}}',
+        },
+      })
+    },
+    providers: [
+      {
+        url: 'https://emoji-example/emoji/standard',
+      },
+      {
+        url: 'https://emoji-example/emoji/site-id/site',
+        securityProvider: () => ({
+          headers: {
+            Authorization: 'Bearer {{token}}',
+          },
+        }),
+      },
+    ],
+  }
+
+  const emojiProvider = new EmojiResource(config);
+  const emojiId = { shortName: ':grimacing:', id: '1f603' };
+
+  ReactDOM.render(
+    <ResourcedEmoji
+      emojiId={emojiId}
+      emojiProvider={emojiProvider}
+      optimistic
+      optimisticImageURL={emojiProvider.getOptimisticImageURL(emojiId)}
+    />,
+    container,
+  );`}
+
+  ${(
+    <Example
+      packageName="@atlaskit/emoji"
+      Component={ResourcedEmojiExample}
+      title="Resourced Emoji"
+      source={ResourcedEmojiSource}
+    />
+  )}
+
+  ${(<Props props={ResourcedEmojiProps} />)}
+`;

package/docs/2-emoji-picker.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { md, Example, code, Props } from '@atlaskit/docs';
+import EmojiPickerExample from '../examples/05-standard-emoji-picker-with-upload';
+
+const EmojiPickerSource = require('!!raw-loader!../examples/05-standard-emoji-picker-with-upload');
+const EmojiPickerProps = require('!!extract-react-types-loader!../src/components/picker/EmojiPickerComponent');
+
+export default md`
+  ## Usage
+
+  Import the component in your React app as follows:
+
+  ${code`
+  import EmojiPicker from '@atlaskit/emoji/picker';
+  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
+
+  const config: EmojiResourceConfig = {
+    providers: [
+      {
+        url: 'https://emoji-example/emoji/standard',
+      },
+      {
+        url: 'https://emoji-example/emoji/site-id/site',
+        securityProvider: () => ({
+          headers: {
+            Authorization: 'Bearer token',
+          },
+        }),
+      },
+    ],
+  }
+
+  const emojiProvider = new EmojiResource(config);
+
+  ReactDOM.render(
+    <EmojiPicker
+      emojiProvider={emojiProvider}
+      onSelection={emoji => {
+        /* do something */
+      }}
+    />,
+    container,
+  );
+  `}
+
+  ${(
+    <Example
+      packageName="@atlaskit/emoji"
+      Component={EmojiPickerExample}
+      title="Emoji Picker"
+      source={EmojiPickerSource}
+    />
+  )}
+
+  ${(<Props props={EmojiPickerProps} />)}
+`;

package/docs/3-typeahead.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { md, Example, Props } from '@atlaskit/docs';
+import TypeAheadiExample from '../examples/03-standard-emoji-typeahead';
+
+const TypeAheadSource = require('!!raw-loader!../examples/03-standard-emoji-typeahead');
+const TypeAheadProps = require('!!extract-react-types-loader!../src/components/typeahead/EmojiTypeAheadComponent');
+
+export default md`
+
+  ${(
+    <Example
+      packageName="@atlaskit/emoji"
+      Component={TypeAheadiExample}
+      title="Typeahead"
+      source={TypeAheadSource}
+    />
+  )}
+
+  ${(<Props props={TypeAheadProps} />)}
+`;

package/docs/4-emoji-provider.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { md, code } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+Emoji provider mainly controls what type of emojis you want to support, how to resolve emojis, and how to upload custom emojis if enabled.
+
+This is a basic example of emoji provider, supporting standard, atlassian, and site emojis:
+
+${code`
+  const emojiProvider = new EmojiResource({
+    providers: [
+      {
+        url: '/gateway/emoji/standard',
+      },
+      {
+        url: '/gateway/emoji/atlassian',
+      },
+      {
+        url: '/gateway/emoji/{cloudId}/site',
+        securityProvider: () => ({ headers: { Authorization: 'Bearer token' }}), // not needed if session token cookie is available.
+      },
+    ],
+    allowUpload: true,
+    currentUser: { id: { uid } }
+  });`}
+
+  ${(
+    <>
+      <br />
+      <SectionMessage
+        appearance="warning"
+        title="There should be only one instance of EmojiResource in your application"
+      >
+        <p>Make sure EmojiResource is initialised only once.</p>
+      </SectionMessage>
+    </>
+  )}
+
+The emoji provider plays a vital role to glue with our backend emoji service. Emoji metadata is fetched based on the url defined in providers array.
+After a successful fetch the emoji resource holds emoji data for rendering emoji in picker, single emoji or the typeahead component.
+Uploading and rendering site specific emojis is only available for Atlassian services.
+
+Initialising EmojiResource doesn't fetch emoji data on initialization. If EmojiResource is being passed into ResourcedEmoji, EmojiPicker or Typeahead no further action is required.
+Emoji meta data will be fetched on first component render. If EmojiResource is being used outside of the context of the above components, fetching meta data requires to be triggered manually.
+
+${code`
+  const emojiProvider = new EmojiResource(emojiConfig);
+  emojiProvider.fetchEmojiProvider();
+`}
+
+### Configuration options
+
+${code`
+  interface EmojiResourceConfig {
+    /**
+     * The service configuration for remotely recording emoji selections.
+     * A post will be performed to this URL with the EmojiId as the body.
+     */
+    recordConfig?: ServiceConfig;
+
+    /**
+     * This defines the different providers. Later providers will override earlier
+     * providers when performing shortName based look up.
+     */
+    providers: ServiceConfig[];
+
+    /**
+     * Must be set to true to enable upload support in the emoji components.
+     *
+     * Can be used for the restriction of the upload UI based on permissions, or feature flags.
+     *
+     * Note this also requires that other conditions are met (for example, one of the providers
+     * must support upload for the UploadingEmojiResource implementation of UploadingEmojiProvider).
+     */
+    allowUpload?: boolean;
+
+    /**
+     * Logged user in the Product.
+     */
+    currentUser?: User;
+
+    /**
+     * This is specifically used for fetching a meta information of a single emoji.
+     * Useful for when rendering a single or a subset of emojis on a page that does not require the
+     * whole provider list to be downloaded.
+     */
+    singleEmojiApi?: SingleEmojiApiLoaderConfig;
+
+    /**
+     * Renders an image while the provider is being downloaded to reduce the time
+     * the user is being presented with a placeholder
+     */
+    optimisticImageApi?: OptimisticImageApiLoaderConfig;
+  }
+`}
+
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "65.0.0",
+  "version": "65.1.0",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -58,7 +58,7 @@
     "@atlaskit/media-core": "^33.0.0",
     "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/util-data-test": "^17.4.0",
+    "@atlaskit/util-data-test": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.10",