@atlaskit/emoji 64.2.1 → 64.4.1

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,9 +21,9 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _core = require("@emotion/core");
 
-var _react = _interopRequireDefault(require("react"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 var _EmojiPickerCategoryHeading = _interopRequireDefault(require("./EmojiPickerCategoryHeading"));
 
@@ -33,11 +31,7 @@ var _EmojiPickerEmojiRow = _interopRequireDefault(require("./EmojiPickerEmojiRow
 
 var _EmojiPickerSizes = require("./EmojiPickerSizes");
 
-var styles = _interopRequireWildcard(require("./styles"));
-
-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; }
+var _styles = require("./styles");
 
 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); }; }
 
@@ -61,7 +55,7 @@ var EmojisRowItem = /*#__PURE__*/function (_AbstractItem) {
     (0, _classCallCheck2.default)(this, EmojisRowItem);
     _this = _super.call(this, props, _EmojiPickerSizes.sizes.emojiRowHeight);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderItem", function () {
-      return /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojiRow.default, _this.props);
+      return (0, _core.jsx)(_EmojiPickerEmojiRow.default, _this.props);
     });
     return _this;
   }
@@ -82,9 +76,9 @@ var LoadingItem = /*#__PURE__*/function (_AbstractItem2) {
     (0, _classCallCheck2.default)(this, LoadingItem);
     _this2 = _super2.call(this, {}, _EmojiPickerSizes.sizes.loadingRowHeight);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "renderItem", function () {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.emojiPickerSpinner
-      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      return (0, _core.jsx)("div", {
+        css: _styles.emojiPickerSpinner
+      }, (0, _core.jsx)("div", null, (0, _core.jsx)(_spinner.default, {
         size: "medium"
       })));
     });
@@ -107,7 +101,7 @@ var CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem3) {
     (0, _classCallCheck2.default)(this, CategoryHeadingItem);
     _this3 = _super3.call(this, props, _EmojiPickerSizes.sizes.categoryHeadingHeight);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "renderItem", function () {
-      return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategoryHeading.default, _this3.props);
+      return (0, _core.jsx)(_EmojiPickerCategoryHeading.default, _this3.props);
     });
     return _this3;
   }
@@ -126,7 +120,7 @@ var virtualItemRenderer = function virtualItemRenderer(rows, context) {
       key = context.key,
       style = context.style;
   var row = rows[index];
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _core.jsx)("div", {
     style: style,
     key: key
   }, row.renderItem(context));

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

@@ -2,41 +2,31 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.virtualList = exports.searchIcon = exports.pickerSearch = exports.input = exports.emojiPickerSpinner = exports.emojiPickerRow = exports.emojiPickerList = exports.emojiPickerFooterWithTopShadow = exports.emojiPickerFooter = exports.emojiPicker = exports.emojiItem = exports.emojiCategoryTitle = exports.emojiActionsContainerWithBottomShadow = exports.disable = exports.categorySelector = exports.category = exports.addEmoji = exports.addButton = exports.active = void 0;
+exports.virtualList = exports.searchIcon = exports.pickerSearch = exports.input = exports.emojiPickerSpinner = exports.emojiPickerRow = exports.emojiPickerList = exports.emojiPickerFooterWithTopShadow = exports.emojiPickerFooter = exports.emojiPicker = exports.emojiItem = exports.emojiCategoryTitle = exports.emojiActionsContainerWithBottomShadow = exports.disable = exports.categoryStyles = exports.categorySelector = exports.addButton = exports.active = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _typestyle = require("typestyle");
+var _core = require("@emotion/core");
 
 var _tokens = require("@atlaskit/tokens");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
 var _sharedStyles = require("../../util/shared-styles");
 
 var _styles = require("../common/styles");
 
 var _constants2 = require("../../util/constants");
 
-var _$nest4, _$nest5, _$nest6, _$nest8;
+var _colors = require("@atlaskit/theme/colors");
 
-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); }
+var _css4, _css5, _css6;
 
-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; }
-
-var active = 'emoji-picker-active';
-exports.active = active;
-var disable = 'emoji-picker-disable'; // Level 1 - picker
-
-exports.disable = disable;
-var emojiPicker = (0, _typestyle.style)({
+// Level 1 - picker
+var emojiPicker = (0, _core.css)({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
@@ -54,64 +44,61 @@ var emojiPicker = (0, _typestyle.style)({
 exports.emojiPicker = emojiPicker;
 var addButton = 'emoji-picker-add-button';
 exports.addButton = addButton;
-var categorySelector = (0, _typestyle.style)({
+var categorySelector = (0, _core.css)((0, _defineProperty2.default)({
   flex: '0 0 auto',
-  backgroundColor: (0, _tokens.token)('elevation.surface.sunken', colors.N30),
-  $nest: (0, _defineProperty2.default)({
-    ul: {
-      listStyle: 'none',
-      margin: '0 4px',
-      padding: '3px 0',
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'space-around'
-    },
-    li: {
-      display: 'inline-block',
-      margin: 0,
-      padding: 0,
-      $nest: {
-        button: {
-          verticalAlign: 'middle'
-        }
-      }
+  backgroundColor: (0, _tokens.token)('elevation.surface.sunken', _colors.N30),
+  ul: {
+    listStyle: 'none',
+    margin: '0 4px',
+    padding: '3px 0',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  },
+  li: {
+    display: 'inline-block',
+    margin: 0,
+    padding: 0,
+    button: {
+      verticalAlign: 'middle'
     }
-  }, ".".concat(addButton), {
-    color: (0, _tokens.token)('color.text.subtlest', colors.N200),
-    margin: '0 0 0 5px',
-    verticalAlign: 'middle'
-  })
-});
+  }
+}, ".".concat(addButton), {
+  color: (0, _tokens.token)('color.text.subtlest', _colors.N200),
+  margin: '0 0 0 5px',
+  verticalAlign: 'middle'
+}));
 exports.categorySelector = categorySelector;
-var category = (0, _typestyle.style)({
+var active = (0, _core.css)((0, _defineProperty2.default)({
+  color: (0, _tokens.token)('color.text.selected', _colors.B300)
+}, '&:hover', {
+  color: (0, _tokens.token)('color.text.selected', _colors.B300)
+}));
+exports.active = active;
+var disable = (0, _core.css)((0, _defineProperty2.default)({
+  color: (0, _tokens.token)('color.text.subtlest', _colors.N50),
+  cursor: 'default'
+}, '&:hover', {
+  color: (0, _tokens.token)('color.text.subtlest', _colors.N50)
+}));
+exports.disable = disable;
+var categoryStyles = (0, _core.css)((_css4 = {
   backgroundColor: 'transparent',
   border: 0,
-  color: (0, _tokens.token)('color.text.subtlest', colors.N100A),
+  color: (0, _tokens.token)('color.text.subtlest', _colors.N100A),
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
-  transition: 'color 0.2s ease',
-  $nest: (_$nest4 = {}, (0, _defineProperty2.default)(_$nest4, '&::-moz-focus-inner', {
-    border: '0 none',
-    padding: 0
-  }), (0, _defineProperty2.default)(_$nest4, "&.".concat(active), {
-    color: (0, _tokens.token)('color.text.brand', colors.B300),
-    $nest: (0, _defineProperty2.default)({}, '&:hover', {
-      color: (0, _tokens.token)('color.text.brand', colors.B300)
-    })
-  }), (0, _defineProperty2.default)(_$nest4, '&:hover', {
-    color: (0, _tokens.token)('color.text.brand', colors.B200)
-  }), (0, _defineProperty2.default)(_$nest4, "&.".concat(disable), {
-    color: (0, _tokens.token)('color.text.subtlest', colors.N50),
-    cursor: 'default',
-    $nest: (0, _defineProperty2.default)({}, '&:hover', {
-      color: (0, _tokens.token)('color.text.subtlest', colors.N50)
-    })
-  }), _$nest4)
-}); /// EmojiPickerList
-
-exports.category = category;
-var emojiPickerList = (0, _typestyle.style)({
+  transition: 'color 0.2s ease'
+}, (0, _defineProperty2.default)(_css4, '&::-moz-focus-inner', {
+  border: '0 none',
+  padding: 0
+}), (0, _defineProperty2.default)(_css4, '&:hover', {
+  color: (0, _tokens.token)('color.text.selected', _colors.B200)
+}), _css4)); /// EmojiPickerList
+
+exports.categoryStyles = categoryStyles;
+var emojiPickerList = (0, _core.css)({
   display: 'flex',
   flexDirection: 'column',
   flex: '1 1 auto',
@@ -120,140 +107,105 @@ var emojiPickerList = (0, _typestyle.style)({
 }); // react-virtualized enables focus style by default - turn it off
 
 exports.emojiPickerList = emojiPickerList;
-var virtualList = (0, _typestyle.style)({
-  $nest: {
-    '&:focus': {
-      outline: 'none'
-    }
+var virtualList = (0, _core.css)({
+  '&:focus': {
+    outline: 'none'
   }
 }); //// Search
 
 exports.virtualList = virtualList;
-var searchIcon = 'search-icon';
+var searchIcon = (0, _core.css)({
+  opacity: 0.5
+});
 exports.searchIcon = searchIcon;
-var input = 'input';
+var input = (0, _core.css)((_css5 = {
+  boxSizing: 'border-box',
+  color: 'inherit',
+  cursor: 'inherit',
+  fontSize: '14px',
+  outline: 'none',
+  padding: '1px 0 2px 6px',
+  width: '100%'
+}, (0, _defineProperty2.default)(_css5, '&:invalid', {
+  boxShadow: 'none'
+}), (0, _defineProperty2.default)(_css5, '&::-ms-clear', {
+  display: 'none'
+}), _css5));
 exports.input = input;
-var pickerSearch = (0, _typestyle.style)({
+var pickerSearch = (0, _core.css)({
   boxSizing: 'border-box',
   padding: '10px 10px 11px 10px',
-  width: '100%',
-  $nest: (_$nest6 = {}, (0, _defineProperty2.default)(_$nest6, ".".concat(searchIcon), {
-    opacity: 0.5
-  }), (0, _defineProperty2.default)(_$nest6, ".".concat(input), {
-    boxSizing: 'border-box',
-    color: 'inherit',
-    cursor: 'inherit',
-    fontSize: '14px',
-    outline: 'none',
-    padding: '1px 0 2px 6px',
-    width: '100%',
-    $nest: (_$nest5 = {}, (0, _defineProperty2.default)(_$nest5, '&:invalid', {
-      boxShadow: 'none'
-    }), (0, _defineProperty2.default)(_$nest5, '&::-ms-clear', {
-      display: 'none'
-    }), _$nest5)
-  }), _$nest6)
+  width: '100%'
 }); //// Loading/Spinner
 
 exports.pickerSearch = pickerSearch;
-var emojiPickerSpinner = (0, _typestyle.style)({
+var emojiPickerSpinner = (0, _core.css)({
   display: 'flex',
   width: '100%',
   height: '150px',
   justifyContent: 'center',
   alignItems: 'center',
-  $nest: {
-    '>div': {
-      flex: '0 0 auto'
-    }
+  '>div': {
+    flex: '0 0 auto'
   }
 }); //// Category/Result
 
 exports.emojiPickerSpinner = emojiPickerSpinner;
-var emojiPickerRow = (0, _typestyle.style)({
+var emojiPickerRow = (0, _core.css)({
   marginLeft: '8px'
 });
 exports.emojiPickerRow = emojiPickerRow;
-var emojiCategoryTitle = (0, _typestyle.style)({
+var emojiCategoryTitle = (0, _core.css)({
   boxSizing: 'border-box',
-  color: (0, _tokens.token)('color.text', colors.N900),
+  color: (0, _tokens.token)('color.text', _colors.N900),
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
-  $nest: {
-    '&:first-letter': {
-      textTransform: 'uppercase'
-    }
+  '&:first-letter': {
+    textTransform: 'uppercase'
   }
 });
 exports.emojiCategoryTitle = emojiCategoryTitle;
-var emojiItem = (0, _typestyle.style)({
+var emojiItem = (0, _core.css)((_css6 = {
   display: 'inline-block',
   textAlign: 'center',
-  width: '40px',
-  $nest: (_$nest8 = {}, (0, _defineProperty2.default)(_$nest8, "&>.".concat(_styles.emojiNode), {
-    cursor: 'pointer',
-    padding: '8px',
-    borderRadius: '5px',
-    width: '24px',
-    height: '24px',
-    $nest: (0, _defineProperty2.default)({
-      // Fit non-square emoji to square
-      '&>img': {
-        position: 'relative',
-        left: '50%',
-        top: '50%',
-        transform: 'translateX(-50%) translateY(-50%)',
-        maxHeight: '24px',
-        maxWidth: '24px',
-        display: 'block'
-      }
-    }, "&>.".concat(_styles.emojiSprite), {
-      height: '24px',
-      width: '24px'
-    })
-  }), (0, _defineProperty2.default)(_$nest8, "&>.".concat(_styles.placeholder), {
-    padding: '0',
-    margin: '7px',
-    minWidth: '24px',
-    maxWidth: '24px'
-  }), _$nest8)
-});
-exports.emojiItem = emojiItem;
-var addEmoji = (0, _typestyle.style)({
-  border: '2px dashed #ccc',
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  backgroundColor: 'transparent',
-  width: '32px',
-  height: '32px',
-  padding: 0,
-  margin: '4px',
-  verticalAlign: 'middle',
-  $nest: {
-    '&:hover': {
-      backgroundColor: _sharedStyles.akEmojiSelectedBackgroundColor
-    },
-    '&:focus': {
-      outline: '0'
-    },
-    span: {
-      backgroundColor: 'inherit'
-    }
-  }
-}); /// Footer
+  width: '40px'
+}, (0, _defineProperty2.default)(_css6, "& .".concat(_styles.emojiNodeStyles), {
+  cursor: 'pointer',
+  padding: '8px',
+  borderRadius: '5px',
+  width: '24px',
+  height: '24px'
+}), (0, _defineProperty2.default)(_css6, "& .".concat(_styles.placeholder), {
+  padding: '0',
+  margin: '7px',
+  minWidth: '24px',
+  maxWidth: '24px'
+}), (0, _defineProperty2.default)(_css6, "& .".concat(_styles.emojiNodeStyles, " > img"), {
+  position: 'relative',
+  left: '50%',
+  top: '50%',
+  transform: 'translateX(-50%) translateY(-50%)',
+  maxHeight: '24px',
+  maxWidth: '24px',
+  display: 'block'
+}), (0, _defineProperty2.default)(_css6, "& .".concat(_styles.emojiNodeStyles, " > .").concat(_styles.emojiSprite), {
+  height: '24px',
+  width: '24px'
+}), _css6)); /// Footer
 
-exports.addEmoji = addEmoji;
-var emojiPickerFooter = (0, _typestyle.style)({
+exports.emojiItem = emojiItem;
+var emojiPickerFooter = (0, _core.css)({
   flex: '0 0 auto'
 });
 exports.emojiPickerFooter = emojiPickerFooter;
-var emojiPickerFooterWithTopShadow = (0, _typestyle.style)({
-  borderTop: "2px solid ".concat((0, _tokens.token)('color.border', colors.N30A)),
+var emojiPickerFooterWithTopShadow = (0, _core.css)({
+  borderTop: "2px solid ".concat((0, _tokens.token)('color.border', _colors.N30A)),
   boxShadow: "0px -1px 1px 0px ".concat((0, _tokens.token)('color.border', 'rgba(0, 0, 0, 0.1)'))
 });
 exports.emojiPickerFooterWithTopShadow = emojiPickerFooterWithTopShadow;
-var emojiActionsContainerWithBottomShadow = (0, _typestyle.style)({
-  borderBottom: "2px solid ".concat((0, _tokens.token)('color.border', colors.N30A)),
+var emojiActionsContainerWithBottomShadow = (0, _core.css)({
+  borderBottom: "2px solid ".concat((0, _tokens.token)('color.border', _colors.N30A)),
   boxShadow: "0px 1px 1px 0px ".concat((0, _tokens.token)('color.border', 'rgba(0, 0, 0, 0.1)'))
 });
 exports.emojiActionsContainerWithBottomShadow = emojiActionsContainerWithBottomShadow;

package/dist/cjs/components/typeahead/EmojiTypeAheadComponent.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,12 +21,14 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _core = require("@emotion/core");
 
 var _uuid = _interopRequireDefault(require("uuid"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = require("react");
+
 var _constants = require("../../util/constants");
 
 var _typeHelpers = require("../../util/type-helpers");
@@ -43,13 +43,7 @@ var _RecordSelectionDefault = require("../common/RecordSelectionDefault");
 
 var _EmojiTypeAheadList = _interopRequireDefault(require("./EmojiTypeAheadList"));
 
-var styles = _interopRequireWildcard(require("./styles"));
-
-var _EmojiContextProvider = require("../../context/EmojiContextProvider");
-
-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; }
+var _styles = require("./styles");
 
 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); }; }
 
@@ -145,6 +139,12 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
 
       _this.fireAnalyticsEvent((0, _analytics.typeaheadRenderedEvent)(Date.now() - _this.renderStartTime, query, emojis));
 
+      _analytics.ufoExperiences['emoji-searched'].success({
+        metadata: {
+          emojisLength: emojis.length
+        }
+      });
+
       (0, _logger.default)('emoji-typeahead.applyPropChanges', emojis.length, wasVisible, visible);
 
       _this.setState({
@@ -205,6 +205,15 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
   }
 
   (0, _createClass2.default)(EmojiTypeAheadComponent, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      return {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       var emojiProvider = this.props.emojiProvider;
@@ -224,6 +233,10 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
         this.fireAnalyticsEvent((0, _analytics.typeaheadCancelledEvent)(Date.now() - this.openTime, query, emojis));
       }
 
+      _analytics.ufoExperiences['emoji-searched'].abort();
+
+      _analytics.ufoExperiences['emoji-selection-recorded'].abort();
+
       this.sessionId = (0, _uuid.default)();
       this.selected = false;
     }
@@ -269,6 +282,13 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
         options.sort = _types.SearchSort.UsageFrequency;
       }
 
+      _analytics.ufoExperiences['emoji-searched'].start();
+
+      _analytics.ufoExperiences['emoji-searched'].addMetadata({
+        queryLength: (query === null || query === void 0 ? void 0 : query.length) || 0,
+        source: 'typeahead'
+      });
+
       this.renderStartTime = Date.now();
       emojiProvider.filter(query, options);
     }
@@ -304,29 +324,25 @@ var EmojiTypeAheadComponent = /*#__PURE__*/function (_PureComponent) {
       var style = {
         display: visible ? 'block' : 'none'
       };
-      var classes = (0, _classnames.default)(['ak-emoji-typeahead', styles.emojiTypeAhead]);
-      var emojiContextValue = {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-      return /*#__PURE__*/_react.default.createElement(_EmojiContextProvider.EmojiContextProvider, {
-        emojiContextValue: emojiContextValue
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _core.jsx)("div", {
         style: style,
-        className: classes
-      }, /*#__PURE__*/_react.default.createElement(_EmojiTypeAheadList.default, {
+        className: 'ak-emoji-typeahead',
+        css: _styles.emojiTypeAhead
+      }, (0, _core.jsx)(_EmojiTypeAheadList.default, {
         emojis: emojis,
         onEmojiSelected: recordUsageOnSelection,
         ref: this.onEmojiListRef,
         loading: loading
-      })));
+      }));
     }
   }]);
   return EmojiTypeAheadComponent;
 }(_react.PureComponent);
 
 exports.default = EmojiTypeAheadComponent;
+(0, _defineProperty2.default)(EmojiTypeAheadComponent, "childContextTypes", {
+  emoji: _propTypes.default.object
+});
 (0, _defineProperty2.default)(EmojiTypeAheadComponent, "defaultProps", {
   onSelection: function onSelection() {},
   onOpen: function onOpen() {},

package/dist/cjs/components/typeahead/EmojiTypeAheadItem.js

@@ -23,7 +23,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("@emotion/core");
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -31,9 +31,9 @@ var _typeHelpers = require("../../util/type-helpers");
 
 var _mouse = require("../../util/mouse");
 
-var styles = _interopRequireWildcard(require("./styles"));
+var _EmojiPreviewComponent = require("../common/EmojiPreviewComponent");
 
-var _EmojiPickerPreview = _interopRequireDefault(require("../picker/EmojiPickerPreview"));
+var _styles = require("./styles");
 
 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); }
 
@@ -83,22 +83,19 @@ var EmojiTypeAheadItem = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(EmojiTypeAheadItem, [{
     key: "render",
     value: function render() {
-      var _classNames;
-
       var _this$props3 = this.props,
           selected = _this$props3.selected,
           emoji = _this$props3.emoji;
-      var classes = (0, _classnames.default)((_classNames = {
-        'ak-emoji-typeahead-item': true
-      }, (0, _defineProperty2.default)(_classNames, styles.typeAheadItem, true), (0, _defineProperty2.default)(_classNames, styles.selected, selected), _classNames));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classes,
+      var classes = [_styles.typeAheadItem, selected && _styles.selected];
+      return (0, _core.jsx)("div", {
+        className: "ak-emoji-typeahead-item ".concat(selected ? _styles.typeaheadSelected : ''),
+        css: classes,
         onMouseDown: this.onEmojiSelected,
         onMouseMove: this.onEmojiMenuItemMouseMove,
         "data-emoji-id": emoji.shortName
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.typeAheadItemRow
-      }, /*#__PURE__*/_react.default.createElement(_EmojiPickerPreview.default, {
+      }, (0, _core.jsx)("div", {
+        css: _styles.typeAheadItemRow
+      }, emoji && (0, _core.jsx)(_EmojiPreviewComponent.EmojiPreviewComponent, {
         emoji: emoji
       })));
     }