@atlaskit/emoji 64.1.1 → 64.3.0

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

@@ -1,15 +1,17 @@
+import { css } from '@emotion/core';
 import { borderRadius } from '@atlaskit/theme/constants';
-import * as colors from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
-import { style } from 'typestyle';
-export const selected = 'emoji-common-selected';
-export const selectOnHover = 'emoji-common-select-on-hover';
+import { N20, N200, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
+export const commonSelectedStyles = 'emoji-common-selected';
+export const selectOnHoverStyles = 'emoji-common-select-on-hover';
 export const emojiSprite = 'emoji-common-emoji-sprite';
-export const emojiNode = 'emoji-common-node';
+export const emojiNodeStyles = 'emoji-common-node';
 export const emojiImage = 'emoji-common-emoji-image';
-export const deleteButton = style({
+export const emojiDeleteButton = 'emoji-common-deleteButton';
+export const emojiMainStyle = 'emoji-common-main-styles';
+export const deleteButton = css({
   // hide by default
   visibility: 'hidden',
   display: 'flex',
@@ -22,7 +24,13 @@ export const deleteButton = style({
   paddingTop: '4px',
   marginBottom: '-4px'
 });
-export const emoji = style({
+export const emojiToneSelectorContainer = css({
+  flex: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: '8px 10px 8px 0'
+});
+export const emojiStyles = css({
   borderRadius: '5px',
   backgroundColor: 'transparent',
   display: 'inline-block',
@@ -31,204 +39,148 @@ export const emoji = style({
   // headings. Smaller headings get a slight increase in height, cannot add more negative margin
   // as a "selected" emoji (e.g. in the editor) will not look good.
   margin: '-1px 0',
-  $nest: {
-    [`&.${selected},&.${selectOnHover}:hover`]: {
-      backgroundColor: akEmojiSelectedBackgroundColor
-    },
-    [`&.${selected},&.${selectOnHover}:hover .${deleteButton}`]: {
-      // show delete button on hover
-      visibility: 'visible'
-    },
-    img: {
-      display: 'block'
-    }
+  [`&.${commonSelectedStyles},&.${selectOnHoverStyles}:hover`]: {
+    backgroundColor: akEmojiSelectedBackgroundColor
+  },
+  [`&.${commonSelectedStyles},&.${selectOnHoverStyles}:hover .${emojiDeleteButton}`]: {
+    // show delete button on hover
+    visibility: 'visible'
+  },
+  img: {
+    display: 'block'
   }
 });
-export const emojiContainer = style({
+export const emojiContainer = css({
   display: 'inline-block',
   // Ensure along with vertical align middle, we don't increase the line height for h1..h6, and p
   margin: '-1px 0',
-  $nest: {
-    [`&.${selected},&.${selectOnHover}:hover`]: {
-      backgroundColor: akEmojiSelectedBackgroundColor
-    },
-    [`.${emojiSprite}`]: {
-      background: 'transparent no-repeat',
-      display: 'inline-block',
-      verticalAlign: 'middle',
-      height: `${defaultEmojiHeight}px`,
-      width: `${defaultEmojiHeight}px`
-    }
+  [`&.${commonSelectedStyles},&.${selectOnHoverStyles}:hover`]: {
+    backgroundColor: akEmojiSelectedBackgroundColor
+  },
+  [`.${emojiSprite}`]: {
+    background: 'transparent no-repeat',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    minHeight: `${defaultEmojiHeight}px`,
+    minWidth: `${defaultEmojiHeight}px`
   }
 });
 export const placeholder = 'emoji-common-placeholder';
-export const placeholderContainer = style({
+export const placeholderContainer = css({
   // Ensure no vertical reflow
   margin: '-1px 0',
   display: 'inline-block',
-  background: '#f7f7f7',
+  background: token('color.border', '#f7f7f7'),
   borderRadius: '20%',
   verticalAlign: 'middle',
   whiteSpace: 'nowrap'
 });
-export const placeholderEmoji = style({
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  whiteSpace: 'nowrap'
-});
-export const emojiButton = style({
+export const emojiButton = css({
   backgroundColor: 'transparent',
   border: '0',
   cursor: 'pointer',
   padding: 0,
-  $nest: {
-    /* Firefox */
-    ['&::-moz-focus-inner']: {
-      border: '0 none',
-      padding: 0
+
+  /* Firefox */
+  ['&::-moz-focus-inner']: {
+    border: '0 none',
+    padding: 0
+  },
+  '&>span': {
+    borderRadius: '5px',
+    padding: '8px',
+    // Scale sprite to fit regardless of default emoji size
+    [`&>.${emojiSprite}`]: {
+      height: '24px',
+      width: '24px'
     },
-    '&>span': {
-      borderRadius: '5px',
-      padding: '8px',
-      $nest: {
-        // Scale sprite to fit regardless of default emoji size
-        [`&>.${emojiSprite}`]: {
-          height: '24px',
-          width: '24px'
-        },
-        // Scale image to fit regardless of default emoji size
-        [`&>img`]: {
-          height: '24px',
-          width: '24px'
-        }
-      }
+    // Scale image to fit regardless of default emoji size
+    [`&>img`]: {
+      height: '24px',
+      width: '24px'
     }
   }
 });
-export const hiddenToneButton = style({
+export const hiddenToneButton = css({
   // Hide currently selected tone that rendered in the ToneSelector to avoid duplication
-  // Set $ unique: true to be able to apply the ccs property to an element as described here https://github.com/typestyle/typestyle/issues/253
-  display: 'none',
-  $unique: true
+  display: 'none'
 }); // Emoji Preview
 
 export const buttons = 'emoji-common-buttons';
-export const preview = 'emoji-common-preview';
-export const previewImg = 'emoji-common-preview-image';
-export const previewText = 'emoji-common-preview-text';
-export const name = 'emoji-common-name';
-export const shortName = 'emoji-common-shortname';
-export const previewSingleLine = 'emoji-common-preview-single-line';
 export const toneSelectorContainer = 'emoji-common-tone-selector-container';
-export const emojiPreviewSection = 'emoji-preview-section';
-export const emojiPreview = style({
+export const emojiPickerAddEmoji = 'emoji-picker-add-emoji';
+export const previewText = css({
   display: 'flex',
-  height: '50px',
-  boxSizing: 'border-box',
-  $nest: {
-    [`.${preview}`]: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'nowrap',
-      padding: '10px',
-      $nest: {
-        [`.${emojiSprite}`]: {
-          height: '32px',
-          margin: '0',
-          width: '32px'
-        },
-        [`.${previewImg}`]: {
-          display: 'inline-block',
-          flex: 'initial',
-          width: '32px',
-          $nest: {
-            '&>span': {
-              width: '32px',
-              height: '32px',
-              padding: 0,
-              maxHeight: 'inherit',
-              $nest: {
-                '&>img': {
-                  position: 'relative',
-                  left: '50%',
-                  top: '50%',
-                  transform: 'translateX(-50%) translateY(-50%)',
-                  maxHeight: '32px',
-                  maxWidth: '32px',
-                  padding: 0,
-                  display: 'block'
-                }
-              }
-            }
-          }
-        },
-        [`.${previewText}`]: {
-          display: 'flex',
-          flexDirection: 'column',
-          marginLeft: '10px',
-          marginTop: '-2px',
-          maxWidth: '285px',
-          width: '285px'
-          /* IE */
-          ,
-          flexGrow: 1,
-          flexShrink: 1,
-          $nest: {
-            [`.${name}`]: {
-              display: 'block',
-              color: token('color.text', colors.N900),
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              $nest: {
-                ['&:first-letter']: {
-                  textTransform: 'uppercase'
-                }
-              }
-            },
-            [`.${shortName}`]: {
-              display: 'block',
-              color: token('color.text.subtle', colors.N200),
-              fontSize: '12px',
-              lineHeight: 1,
-              marginBottom: '-2px',
-              overflow: 'hidden',
-              paddingBottom: '2px',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap'
-            }
-          }
-        },
-        [`.${previewSingleLine}`]: {
-          paddingTop: '10px',
-          $nest: {
-            [`.${name}`]: {
-              display: 'none'
-            },
-            [`.${shortName}`]: {
-              color: token('color.text', colors.N900),
-              fontSize: '14px'
-            }
-          }
-        }
-      }
-    },
-    [`.${previewText}`]: {
-      maxWidth: '235px',
-      width: '235px'
-      /* IE */
-
-    }
+  flexDirection: 'column',
+  alignSelf: 'center',
+  marginTop: '-2px',
+  marginLeft: '10px',
+  maxWidth: '285px',
+  width: '285px'
+  /* IE */
+  ,
+  flexGrow: 1,
+  flexShrink: 1
+});
+export const emojiName = css({
+  display: 'block',
+  color: token('color.text', N900),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  ['&:first-letter']: {
+    textTransform: 'uppercase'
   }
 });
-export const emojiToneSelectorContainer = style({
-  flex: 1,
+export const emojiShortName = css({
+  display: 'block',
+  color: token('color.text.subtle', N200),
+  fontSize: '12px',
+  lineHeight: 1,
+  marginBottom: '-2px',
+  overflow: 'hidden',
+  paddingBottom: '2px',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  ['&:first-of-type']: {
+    color: token('color.text', N900),
+    fontSize: '14px'
+  }
+});
+export const preview = css({
   display: 'flex',
-  justifyContent: 'flex-end',
-  padding: '8px 10px 8px 0'
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  padding: '10px'
+});
+export const previewImg = css({
+  display: 'inline-block',
+  flex: 'initial',
+  width: '32px',
+  [`& .${emojiSprite}, > span`]: {
+    width: '32px',
+    height: '32px',
+    padding: 0,
+    maxHeight: 'inherit'
+  },
+  [`& > span > img`]: {
+    position: 'relative',
+    left: '50%',
+    top: '50%',
+    transform: 'translateX(-50%) translateY(-50%)',
+    maxHeight: '32px',
+    maxWidth: '32px',
+    padding: 0,
+    display: 'block'
+  }
+});
+export const emojiPreview = css({
+  display: 'flex',
+  height: '50px',
+  boxSizing: 'border-box'
 }); // Scrollable
 
-export const emojiScrollable = style({
+export const emojiScrollable = css({
   border: `1px solid ${token('color.border', '#fff')}`,
   borderRadius: `${borderRadius()}px`,
   display: 'block',
@@ -238,192 +190,173 @@ export const emojiScrollable = style({
   padding: '0'
 }); // EmojiUpload
 
-export const emojiUpload = style({
+export const emojiUpload = css({
   height: '78px',
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around'
 });
-export const uploadChooseFileMessage = style({
-  color: token('color.text.subtle', colors.N300),
+export const uploadChooseFileMessage = css({
+  color: token('color.text.subtle', N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
-export const emojiUploadBottom = style({
+export const emojiUploadBottom = css({
   fontSize: '11px'
 });
-export const uploadChooseFileRow = style({
+export const uploadChooseFileRow = css({
   display: 'flex',
   justifyContent: 'space-between'
 });
-export const uploadChooseFileEmojiName = style({
+export const uploadChooseFileEmojiName = css({
   flex: '1 1 auto',
   marginRight: '5px',
-  $nest: {
-    input: {
-      background: 'transparent',
-      border: 0,
-      outline: 'none',
-      $nest: {
-        ['&:invalid']: {
-          boxShadow: 'none'
-        },
-        ['&::-ms-clear']: {
-          display: 'none'
-        }
-      }
+  input: {
+    background: 'transparent',
+    border: 0,
+    outline: 'none',
+    ['&:invalid']: {
+      boxShadow: 'none'
+    },
+    ['&::-ms-clear']: {
+      display: 'none'
     }
   }
 });
-export const uploadChooseFileBrowse = style({
+export const uploadChooseFileBrowse = css({
   flex: '0 0 auto'
 });
-export const uploadPreviewFooter = style({
+export const uploadPreviewFooter = css({
   display: 'flex',
   flexDirection: 'column',
   height: '100px',
   padding: '10px'
 });
-export const uploadPreview = style({
+export const uploadPreview = css({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: token('color.background.neutral', colors.N20),
+  background: token('color.background.neutral', N20),
   borderRadius: `${borderRadius()}px`,
   padding: '10px'
 });
-export const uploadPreviewText = style({
-  $nest: {
-    h5: {
-      color: token('color.text.subtle', colors.N300),
-      paddingBottom: '4px',
-      fontSize: '12px'
-    },
-    img: {
-      maxHeight: '20px',
-      maxWidth: '50px'
-    }
+export const uploadPreviewText = css({
+  h5: {
+    color: token('color.text.subtle', N300),
+    paddingBottom: '4px',
+    fontSize: '12px'
+  },
+  img: {
+    maxHeight: '20px',
+    maxWidth: '50px'
   }
 });
-export const bigEmojiPreview = style({
+export const bigEmojiPreview = css({
   paddingLeft: '4px',
-  $nest: {
-    img: {
-      maxHeight: '40px',
-      maxWidth: '100px'
-    }
+  img: {
+    maxHeight: '40px',
+    maxWidth: '100px'
   }
 });
-export const uploadAddRow = style({
+export const uploadAddRow = css({
   display: 'flex',
   justifyContent: 'flex-end',
   alignItems: 'center',
   paddingTop: '10px'
 });
-export const AddCustomEmoji = style({
+export const addCustomEmoji = css({
   alignSelf: 'center',
   marginLeft: '10px',
   marginBottom: '10px'
 }); // Emoji Delete preview
 
 export const submitDelete = 'emoji-submit-delete';
-export const previewButtonGroup = 'emoji-preview-button-group';
-export const deletePreview = style({
+export const deletePreview = css({
   height: '100px',
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'flex-end'
 });
-export const deleteText = style({
+export const deleteText = css({
   height: '64px',
   fontSize: '12px',
-  $nest: {
-    ':first-child': {
-      color: token('color.text.subtle', colors.N300),
-      lineHeight: '16px'
-    }
+  '&:first-of-type': {
+    color: token('color.text.subtle', N300),
+    lineHeight: '16px'
   }
 });
-export const deleteFooter = style({
+export const previewButtonGroup = css({
+  display: 'flex'
+});
+export const deleteFooter = css({
   display: 'flex',
   height: '40px',
   alignItems: 'center',
   justifyContent: 'space-between',
-  $nest: {
-    img: {
-      maxHeight: '32px',
-      maxWidth: '72px'
-    },
-    [`.${previewButtonGroup}`]: {
+  img: {
+    maxHeight: '32px',
+    maxWidth: '72px'
+  },
+  [`.${submitDelete}`]: {
+    width: '84px',
+    fontWeight: 'bold',
+    marginRight: '4px'
+  },
+  button: {
+    display: 'flex',
+    justifyContent: 'center',
+    fontSize: '14px',
+    div: {
       display: 'flex'
-    },
-    [`.${submitDelete}`]: {
-      width: '84px',
-      fontWeight: 'bold',
-      marginRight: '4px'
-    },
-    button: {
-      display: 'flex',
-      justifyContent: 'center',
-      fontSize: '14px',
-      $nest: {
-        div: {
-          display: 'flex'
-        }
-      }
     }
   }
 });
-export const emojiDeleteErrorMessage = style({
+export const emojiDeleteErrorMessage = css({
   display: 'flex',
-  color: token('color.text.danger', colors.R400),
+  color: token('color.text.danger', R400),
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
 });
-export const emojiChooseFileErrorMessage = style({
+export const emojiChooseFileErrorMessage = css({
   display: 'flex',
-  color: token('color.text.danger', colors.R300),
+  color: token('color.text.danger', R300),
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
-export const emojiPreviewErrorMessage = style({
+export const emojiPreviewErrorMessage = css({
   display: 'inline-flex',
-  color: token('color.text.danger', colors.R400),
+  color: token('color.text.danger', R400),
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'
 });
-export const addCustomEmojiButton = style({
+export const addCustomEmojiButton = css({
   maxWidth: '285px'
 });
-export const uploadRetryButton = style({
+export const uploadRetryButton = css({
   maxWidth: '172px',
   justifyContent: 'center',
   fontWeight: 'bold',
   marginRight: '4px',
-  $nest: {
-    div: {
-      display: 'flex'
-    }
+  div: {
+    display: 'flex'
   }
 });
-export const uploadEmojiButton = style({
+export const uploadEmojiButton = css({
   maxWidth: '187px',
   justifyContent: 'center',
   marginRight: '4px',
-  $nest: {
-    div: {
-      display: 'flex'
-    }
+  div: {
+    display: 'flex'
   }
 });
-export const cancelButton = style({
+export const cancelButton = css({
   maxWidth: '100px'
 });
-export const buttonSpinner = style({
+export const buttonSpinner = css({
   marginRight: '10px',
   marginLeft: '10px'
 });

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

@@ -1,12 +1,14 @@
 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 { injectIntl } from 'react-intl-next';
 import { defaultCategories } from '../../util/constants';
 import { messages } from '../i18n';
 import { CategoryDescriptionMap } from './categories';
-import * as styles from './styles';
+import { active, categorySelector, disable, categoryStyles } from './styles';
 export const sortCategories = (c1, c2) => CategoryDescriptionMap[c1].order - CategoryDescriptionMap[c2].order;
 
 const addNewCategories = (oldCategories, newCategories) => {
@@ -75,37 +77,38 @@ class CategorySelector extends PureComponent {
       const {
         formatMessage
       } = intl;
-      categoriesSection = /*#__PURE__*/React.createElement("ul", null, categories.map(categoryId => {
+      categoriesSection = jsx("ul", null, categories.map(categoryId => {
         const category = CategoryDescriptionMap[categoryId];
-        const categoryClasses = [styles.category];
+        const categoryClasses = [categoryStyles];
 
         if (categoryId === this.props.activeCategoryId) {
-          categoryClasses.push(styles.active);
+          categoryClasses.push(active);
         }
 
         if (disableCategories) {
-          categoryClasses.push(styles.disable);
+          categoryClasses.push(disable);
         }
 
         const Icon = category.icon;
         const categoryName = formatMessage(messages[category.name]);
-        return /*#__PURE__*/React.createElement("li", {
+        return jsx("li", {
           key: category.id
-        }, /*#__PURE__*/React.createElement("button", {
+        }, jsx("button", {
           "aria-label": categoryName,
           "data-category-id": category.id,
-          className: classNames(categoryClasses),
+          disabled: disableCategories,
+          css: categoryClasses,
           onClick: this.onClick,
           title: categoryName,
           type: "button"
-        }, /*#__PURE__*/React.createElement(Icon, {
+        }, jsx(Icon, {
           label: categoryName
         })));
       }));
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames([styles.categorySelector])
+    return jsx("div", {
+      css: categorySelector
     }, categoriesSection);
   }