@atlaskit/emoji 64.2.1 → 64.4.1

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

@@ -1,14 +1,12 @@
-import { style } from 'typestyle';
+import { css } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
-import * as colors from '@atlaskit/theme/colors';
-import { akEmojiSelectedBackgroundColor, emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
-import { emojiSprite, placeholder, emojiNode } from '../common/styles';
+import { emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
+import { emojiSprite, placeholder, emojiNodeStyles } from '../common/styles';
 import { emojiPickerHeight, emojiPickerWidth } from '../../util/constants';
-export const active = 'emoji-picker-active';
-export const disable = 'emoji-picker-disable'; // Level 1 - picker
+import { B200, B300, N100A, N200, N30, N30A, N50, N900 } from '@atlaskit/theme/colors'; // Level 1 - picker
 
-export const emojiPicker = style({
+export const emojiPicker = css({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
@@ -24,73 +22,64 @@ export const emojiPicker = style({
 /// Category Selector
 
 export const addButton = 'emoji-picker-add-button';
-export const categorySelector = style({
+export const categorySelector = css({
   flex: '0 0 auto',
-  backgroundColor: token('elevation.surface.sunken', colors.N30),
-  $nest: {
-    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'
-        }
-      }
-    },
-    [`.${addButton}`]: {
-      color: token('color.text.subtlest', colors.N200),
-      margin: '0 0 0 5px',
+  backgroundColor: token('elevation.surface.sunken', 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'
     }
+  },
+  [`.${addButton}`]: {
+    color: token('color.text.subtlest', N200),
+    margin: '0 0 0 5px',
+    verticalAlign: 'middle'
   }
 });
-export const category = style({
+export const active = css({
+  color: token('color.text.selected', B300),
+  ['&:hover']: {
+    color: token('color.text.selected', B300)
+  }
+});
+export const disable = css({
+  color: token('color.text.subtlest', N50),
+  cursor: 'default',
+  ['&:hover']: {
+    color: token('color.text.subtlest', N50)
+  }
+});
+export const categoryStyles = css({
   backgroundColor: 'transparent',
   border: 0,
-  color: token('color.text.subtlest', colors.N100A),
+  color: token('color.text.subtlest', N100A),
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
   transition: 'color 0.2s ease',
-  $nest: {
-    /* Firefox */
-    ['&::-moz-focus-inner']: {
-      border: '0 none',
-      padding: 0
-    },
-    [`&.${active}`]: {
-      color: token('color.text.brand', colors.B300),
-      $nest: {
-        ['&:hover']: {
-          color: token('color.text.brand', colors.B300)
-        }
-      }
-    },
-    ['&:hover']: {
-      color: token('color.text.brand', colors.B200)
-    },
-    [`&.${disable}`]: {
-      color: token('color.text.subtlest', colors.N50),
-      cursor: 'default',
-      $nest: {
-        ['&:hover']: {
-          color: token('color.text.subtlest', colors.N50)
-        }
-      }
-    }
+
+  /* Firefox */
+  ['&::-moz-focus-inner']: {
+    border: '0 none',
+    padding: 0
+  },
+  ['&:hover']: {
+    color: token('color.text.selected', B200)
   }
 }); /// EmojiPickerList
 
-export const emojiPickerList = style({
+export const emojiPickerList = css({
   display: 'flex',
   flexDirection: 'column',
   flex: '1 1 auto',
@@ -98,139 +87,102 @@ export const emojiPickerList = style({
   height: '0'
 }); // react-virtualized enables focus style by default - turn it off
 
-export const virtualList = style({
-  $nest: {
-    '&:focus': {
-      outline: 'none'
-    }
+export const virtualList = css({
+  '&:focus': {
+    outline: 'none'
   }
 }); //// Search
 
-export const searchIcon = 'search-icon';
-export const input = 'input';
-export const pickerSearch = style({
+export const searchIcon = css({
+  opacity: 0.5
+});
+export const input = css({
   boxSizing: 'border-box',
-  padding: '10px 10px 11px 10px',
+  color: 'inherit',
+  cursor: 'inherit',
+  fontSize: '14px',
+  outline: 'none',
+  padding: '1px 0 2px 6px',
   width: '100%',
-  $nest: {
-    [`.${searchIcon}`]: {
-      opacity: 0.5
-    },
-    [`.${input}`]: {
-      boxSizing: 'border-box',
-      color: 'inherit',
-      cursor: 'inherit',
-      fontSize: '14px',
-      outline: 'none',
-      padding: '1px 0 2px 6px',
-      width: '100%',
-      $nest: {
-        ['&:invalid']: {
-          boxShadow: 'none'
-        },
-        ['&::-ms-clear']: {
-          display: 'none'
-        }
-      }
-    }
+  ['&:invalid']: {
+    boxShadow: 'none'
+  },
+  ['&::-ms-clear']: {
+    display: 'none'
   }
+});
+export const pickerSearch = css({
+  boxSizing: 'border-box',
+  padding: '10px 10px 11px 10px',
+  width: '100%'
 }); //// Loading/Spinner
 
-export const emojiPickerSpinner = style({
+export const emojiPickerSpinner = css({
   display: 'flex',
   width: '100%',
   height: '150px',
   justifyContent: 'center',
   alignItems: 'center',
-  $nest: {
-    '>div': {
-      flex: '0 0 auto'
-    }
+  '>div': {
+    flex: '0 0 auto'
   }
 }); //// Category/Result
 
-export const emojiPickerRow = style({
+export const emojiPickerRow = css({
   marginLeft: '8px'
 });
-export const emojiCategoryTitle = style({
+export const emojiCategoryTitle = css({
   boxSizing: 'border-box',
-  color: token('color.text', colors.N900),
+  color: token('color.text', N900),
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
-  $nest: {
-    '&:first-letter': {
-      textTransform: 'uppercase'
-    }
+  '&:first-letter': {
+    textTransform: 'uppercase'
   }
 });
-export const emojiItem = style({
+export const emojiItem = css({
   display: 'inline-block',
   textAlign: 'center',
   width: '40px',
-  $nest: {
-    [`&>.${emojiNode}`]: {
-      cursor: 'pointer',
-      padding: '8px',
-      borderRadius: '5px',
-      width: '24px',
-      height: '24px',
-      $nest: {
-        // Fit non-square emoji to square
-        '&>img': {
-          position: 'relative',
-          left: '50%',
-          top: '50%',
-          transform: 'translateX(-50%) translateY(-50%)',
-          maxHeight: '24px',
-          maxWidth: '24px',
-          display: 'block'
-        },
-        // Scale sprite to fit regardless of default emoji size
-        [`&>.${emojiSprite}`]: {
-          height: '24px',
-          width: '24px'
-        }
-      }
-    },
-    [`&>.${placeholder}`]: {
-      padding: '0',
-      margin: '7px',
-      minWidth: '24px',
-      maxWidth: '24px'
-    }
-  }
-});
-export const addEmoji = style({
-  border: '2px dashed #ccc',
-  borderRadius: `${borderRadius()}px`,
-  backgroundColor: 'transparent',
-  width: '32px',
-  height: '32px',
-  padding: 0,
-  margin: '4px',
-  verticalAlign: 'middle',
-  $nest: {
-    '&:hover': {
-      backgroundColor: akEmojiSelectedBackgroundColor
-    },
-    '&:focus': {
-      outline: '0'
-    },
-    span: {
-      backgroundColor: 'inherit'
-    }
+  [`& .${emojiNodeStyles}`]: {
+    cursor: 'pointer',
+    padding: '8px',
+    borderRadius: '5px',
+    width: '24px',
+    height: '24px'
+  },
+  [`& .${placeholder}`]: {
+    padding: '0',
+    margin: '7px',
+    minWidth: '24px',
+    maxWidth: '24px'
+  },
+  // Fit non-square emoji to square
+  [`& .${emojiNodeStyles} > img`]: {
+    position: 'relative',
+    left: '50%',
+    top: '50%',
+    transform: 'translateX(-50%) translateY(-50%)',
+    maxHeight: '24px',
+    maxWidth: '24px',
+    display: 'block'
+  },
+  // Scale sprite to fit regardless of default emoji size
+  [`& .${emojiNodeStyles} > .${emojiSprite}`]: {
+    height: '24px',
+    width: '24px'
   }
 }); /// Footer
 
-export const emojiPickerFooter = style({
+export const emojiPickerFooter = css({
   flex: '0 0 auto'
 });
-export const emojiPickerFooterWithTopShadow = style({
-  borderTop: `2px solid ${token('color.border', colors.N30A)}`,
+export const emojiPickerFooterWithTopShadow = css({
+  borderTop: `2px solid ${token('color.border', N30A)}`,
   boxShadow: `0px -1px 1px 0px ${token('color.border', 'rgba(0, 0, 0, 0.1)')}`
 });
-export const emojiActionsContainerWithBottomShadow = style({
-  borderBottom: `2px solid ${token('color.border', colors.N30A)}`,
+export const emojiActionsContainerWithBottomShadow = css({
+  borderBottom: `2px solid ${token('color.border', N30A)}`,
   boxShadow: `0px 1px 1px 0px ${token('color.border', 'rgba(0, 0, 0, 0.1)')}`
 });

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

@@ -1,17 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import classNames from 'classnames';
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import uuid from 'uuid';
+import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { defaultListLimit } from '../../util/constants';
 import { toEmojiId } from '../../util/type-helpers';
 import { SearchSort } from '../../types';
 import debug from '../../util/logger';
-import { typeaheadCancelledEvent, typeaheadSelectedEvent, typeaheadRenderedEvent } from '../../util/analytics';
+import { typeaheadCancelledEvent, typeaheadSelectedEvent, typeaheadRenderedEvent, ufoExperiences } from '../../util/analytics';
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import EmojiList from './EmojiTypeAheadList';
-import * as styles from './styles';
-import { EmojiContextProvider } from '../../context/EmojiContextProvider';
+import { emojiTypeAhead } from './styles';
 
 const isFullShortName = query => query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
 
@@ -88,6 +89,11 @@ export default class EmojiTypeAheadComponent extends PureComponent {
       const wasVisible = this.state.visible;
       const visible = emojis.length > 0;
       this.fireAnalyticsEvent(typeaheadRenderedEvent(Date.now() - this.renderStartTime, query, emojis));
+      ufoExperiences['emoji-searched'].success({
+        metadata: {
+          emojisLength: emojis.length
+        }
+      });
       debug('emoji-typeahead.applyPropChanges', emojis.length, wasVisible, visible);
       this.setState({
         emojis: emojis,
@@ -144,6 +150,14 @@ export default class EmojiTypeAheadComponent extends PureComponent {
     this.selected = false;
   }
 
+  getChildContext() {
+    return {
+      emoji: {
+        emojiProvider: this.props.emojiProvider
+      }
+    };
+  }
+
   componentDidMount() {
     const {
       emojiProvider
@@ -166,6 +180,8 @@ export default class EmojiTypeAheadComponent extends PureComponent {
       this.fireAnalyticsEvent(typeaheadCancelledEvent(Date.now() - this.openTime, query, emojis));
     }
 
+    ufoExperiences['emoji-searched'].abort();
+    ufoExperiences['emoji-selection-recorded'].abort();
     this.sessionId = uuid();
     this.selected = false;
   }
@@ -209,6 +225,11 @@ export default class EmojiTypeAheadComponent extends PureComponent {
       options.sort = SearchSort.UsageFrequency;
     }
 
+    ufoExperiences['emoji-searched'].start();
+    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);
   }
@@ -244,27 +265,24 @@ export default class EmojiTypeAheadComponent extends PureComponent {
     const style = {
       display: visible ? 'block' : 'none'
     };
-    const classes = classNames(['ak-emoji-typeahead', styles.emojiTypeAhead]);
-    const emojiContextValue = {
-      emoji: {
-        emojiProvider: this.props.emojiProvider
-      }
-    };
-    return /*#__PURE__*/React.createElement(EmojiContextProvider, {
-      emojiContextValue: emojiContextValue
-    }, /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       style: style,
-      className: classes
-    }, /*#__PURE__*/React.createElement(EmojiList, {
+      className: 'ak-emoji-typeahead',
+      css: emojiTypeAhead
+    }, jsx(EmojiList, {
       emojis: emojis,
       onEmojiSelected: recordUsageOnSelection,
       ref: this.onEmojiListRef,
       loading: loading
-    })));
+    }));
   }
 
 }
 
+_defineProperty(EmojiTypeAheadComponent, "childContextTypes", {
+  emoji: PropTypes.object
+});
+
 _defineProperty(EmojiTypeAheadComponent, "defaultProps", {
   onSelection: () => {},
   onOpen: () => {},

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

@@ -1,11 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import classNames from 'classnames';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React from 'react';
 import { PureComponent } from 'react';
 import { toEmojiId } from '../../util/type-helpers';
 import { leftClick } from '../../util/mouse';
-import * as styles from './styles';
-import EmojiPickerPreview from '../picker/EmojiPickerPreview';
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { typeAheadItem, selected as selectedStyles, typeAheadItemRow, typeaheadSelected } from './styles';
 export default class EmojiTypeAheadItem extends PureComponent {
   constructor(...args) {
     super(...args);
@@ -39,19 +41,16 @@ export default class EmojiTypeAheadItem extends PureComponent {
       selected,
       emoji
     } = this.props;
-    const classes = classNames({
-      'ak-emoji-typeahead-item': true,
-      [styles.typeAheadItem]: true,
-      [styles.selected]: selected
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: classes,
+    const classes = [typeAheadItem, selected && selectedStyles];
+    return jsx("div", {
+      className: `ak-emoji-typeahead-item ${selected ? typeaheadSelected : ''}`,
+      css: classes,
       onMouseDown: this.onEmojiSelected,
       onMouseMove: this.onEmojiMenuItemMouseMove,
       "data-emoji-id": emoji.shortName
-    }, /*#__PURE__*/React.createElement("div", {
-      className: styles.typeAheadItemRow
-    }, /*#__PURE__*/React.createElement(EmojiPickerPreview, {
+    }, jsx("div", {
+      css: typeAheadItemRow
+    }, emoji && jsx(EmojiPreviewComponent, {
       emoji: emoji
     })));
   }

package/dist/es2019/components/typeahead/EmojiTypeAheadList.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import Spinner from '@atlaskit/spinner';
-import classNames from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
 import { emojiTypeAheadMaxHeight } from '../../util/shared-styles';
@@ -9,7 +11,7 @@ import debug from '../../util/logger';
 import { actualMouseMove, mouseLocation } from '../../util/mouse';
 import Scrollable from '../common/Scrollable';
 import EmojiItem from './EmojiTypeAheadItem';
-import * as styles from './styles';
+import { emojiTypeAheadSpinner, emojiTypeAheadSpinnerContainer, typeAheadEmpty, typeAheadList, typeAheadListContainer } from './styles';
 
 function wrapIndex(emojis, index) {
   const len = emojis.length;
@@ -192,9 +194,9 @@ export default class EmojiTypeAheadList extends PureComponent {
   renderItems(emojis) {
     if (emojis && emojis.length) {
       this.items = {};
-      return /*#__PURE__*/React.createElement("div", null, emojis.map((emoji, idx) => {
+      return jsx("div", null, emojis.map((emoji, idx) => {
         const key = getKey(emoji);
-        const item = /*#__PURE__*/React.createElement(EmojiItem, {
+        const item = jsx(EmojiItem, {
           emoji: emoji,
           key: key,
           selected: this.isSelectedEmoji(emoji, idx),
@@ -228,30 +230,27 @@ export default class EmojiTypeAheadList extends PureComponent {
       loading
     } = this.props;
     const hasEmoji = emojis && emojis.length;
-    const classes = classNames({
-      'ak-emoji-typeahead-list': true,
-      [styles.typeAheadList]: true,
-      [styles.typeAheadEmpty]: !hasEmoji && !loading
-    });
+    const classes = [typeAheadList, !hasEmoji && !loading && typeAheadEmpty];
     let listBody;
 
     if (loading) {
-      listBody = /*#__PURE__*/React.createElement("div", {
-        className: styles.emojiTypeAheadSpinnerContainer
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.emojiTypeAheadSpinner
-      }, /*#__PURE__*/React.createElement(Spinner, {
+      listBody = jsx("div", {
+        css: emojiTypeAheadSpinnerContainer
+      }, jsx("div", {
+        css: emojiTypeAheadSpinner
+      }, jsx(Spinner, {
         size: "medium"
       })));
     } else {
       listBody = this.renderItems(emojis);
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.typeAheadListContainer
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes
-    }, /*#__PURE__*/React.createElement(Scrollable, {
+    return jsx("div", {
+      css: typeAheadListContainer
+    }, jsx("div", {
+      className: 'ak-emoji-typeahead-list',
+      css: classes
+    }, jsx(Scrollable, {
       ref: this.handleScrollableRef,
       maxHeight: `${emojiTypeAheadMaxHeight}px`
     }, listBody)));

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

@@ -1,10 +1,11 @@
-import { style } from 'typestyle';
+import { css } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
 import { emojiPreviewSelectedColor, emojiTypeAheadMaxHeight, emojiTypeAheadWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../util/shared-styles';
-export const selected = 'emoji-typeahead-selected';
 export const emojiTypeAhead = 'emoji-typeahead-element';
-export const typeAheadListContainer = 'emoji-typeahead-list-container';
-export const typeAheadList = style({
+export const typeAheadListContainer = 'emoji-typeahead-list-container'; // editor-core is using this static class name for testing
+
+export const typeaheadSelected = 'emoji-typeahead-selected';
+export const typeAheadList = css({
   background: token('elevation.surface.overlay', 'white'),
   border: `1px solid ${noDialogContainerBorderColor}`,
   borderRadius: noDialogContainerBorderRadius,
@@ -12,33 +13,31 @@ export const typeAheadList = style({
   color: token('color.text.subtle', '#333'),
   width: emojiTypeAheadWidth
 });
-export const typeAheadEmpty = style({
+export const typeAheadEmpty = css({
   display: 'none'
 });
-export const typeAheadItem = style({
+export const selected = css({
+  backgroundColor: emojiPreviewSelectedColor
+});
+export const typeAheadItem = css({
   cursor: 'pointer',
   display: 'block',
   listStyleType: 'none',
   overflow: 'hidden',
-  width: emojiTypeAheadWidth,
-  $nest: {
-    [`&.${selected}`]: {
-      backgroundColor: emojiPreviewSelectedColor
-    }
-  }
+  width: emojiTypeAheadWidth
 });
-export const typeAheadItemRow = style({
+export const typeAheadItemRow = css({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
   verticalAlign: 'middle'
 });
-export const emojiTypeAheadSpinnerContainer = style({
+export const emojiTypeAheadSpinnerContainer = css({
   position: 'relative',
   height: `${emojiTypeAheadMaxHeight}px`,
   paddingTop: `${((emojiTypeAheadMaxHeight - 30) / 2).toFixed()}px`,
   boxSizing: 'border-box'
 });
-export const emojiTypeAheadSpinner = style({
+export const emojiTypeAheadSpinner = css({
   textAlign: 'center'
 });