@atlaskit/emoji 63.1.10 → 63.2.0

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

@@ -1,5 +1,6 @@
 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';
@@ -176,7 +177,7 @@ export const emojiPreview = style({
           $nest: {
             [`.${name}`]: {
               display: 'block',
-              color: colors.N900,
+              color: token('color.text.highEmphasis', colors.N900),
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
@@ -188,7 +189,7 @@ export const emojiPreview = style({
             },
             [`.${shortName}`]: {
               display: 'block',
-              color: colors.N200,
+              color: token('color.text.mediumEmphasis', colors.N200),
               fontSize: '12px',
               lineHeight: 1,
               marginBottom: '-2px',
@@ -206,7 +207,7 @@ export const emojiPreview = style({
               display: 'none'
             },
             [`.${shortName}`]: {
-              color: colors.N900,
+              color: token('color.text.highEmphasis', colors.N900),
               fontSize: '14px'
             }
           }
@@ -234,7 +235,7 @@ export const emojiPreview = style({
 }); // Scrollable
 
 export const emojiScrollable = style({
-  border: '1px solid #fff',
+  border: `1px solid ${token('color.border.neutral', '#fff')}`,
   borderRadius: `${borderRadius()}px`,
   display: 'block',
   margin: '0',
@@ -251,7 +252,7 @@ export const emojiUpload = style({
   justifyContent: 'space-around'
 });
 export const uploadChooseFileMessage = style({
-  color: colors.N300,
+  color: token('color.text.mediumEmphasis', colors.N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
@@ -269,11 +270,7 @@ export const uploadChooseFileEmojiName = style({
     input: {
       background: 'transparent',
       border: 0,
-      fontSize: '12px',
       outline: 'none',
-      width: '100%',
-      height: '22px',
-      // fixed height is required to work in IE11 and other browsers in Windows
       $nest: {
         ['&:invalid']: {
           boxShadow: 'none'
@@ -298,14 +295,14 @@ export const uploadPreview = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: colors.N20,
+  background: token('color.background.subtleNeutral.resting', colors.N20),
   borderRadius: `${borderRadius()}px`,
   padding: '10px'
 });
 export const uploadPreviewText = style({
   $nest: {
     h5: {
-      color: colors.N300,
+      color: token('color.text.mediumEmphasis', colors.N300),
       paddingBottom: '4px',
       fontSize: '12px'
     },
@@ -349,7 +346,7 @@ export const deleteText = style({
   height: '64px',
   $nest: {
     ':first-child': {
-      color: colors.N300,
+      color: token('color.text.mediumEmphasis', colors.N300),
       lineHeight: '16px'
     }
   }
@@ -386,20 +383,20 @@ export const deleteFooter = style({
 });
 export const emojiDeleteErrorMessage = style({
   display: 'flex',
-  color: colors.R400,
+  color: token('color.text.danger', colors.R400),
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
 });
 export const emojiChooseFileErrorMessage = style({
   display: 'flex',
-  color: colors.R300,
+  color: token('color.text.danger', colors.R300),
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 export const emojiPreviewErrorMessage = style({
   display: 'inline-flex',
-  color: colors.R400,
+  color: token('color.text.danger', colors.R400),
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'

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

@@ -1,8 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import AkFieldBase from '@atlaskit/field-base';
+import React, { PureComponent } from 'react';
+import TextField from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
-import React from 'react';
-import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { messages } from '../i18n';
 import * as styles from './styles';
@@ -82,27 +81,23 @@ export default class EmojiPickerListSearch extends PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: styles.pickerSearch,
       style: style
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.searchPlaceholder, searchPlaceholder => /*#__PURE__*/React.createElement(AkFieldBase, {
-      appearance: "standard",
-      isCompact: true,
-      isFitContainerWidthEnabled: true
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.searchIcon
-    }, /*#__PURE__*/React.createElement(SearchIcon, {
-      label: ""
-    })), /*#__PURE__*/React.createElement(FormattedMessage, messages.searchLabel, searchLabel => /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.searchPlaceholder, searchPlaceholder => /*#__PURE__*/React.createElement(FormattedMessage, messages.searchLabel, searchLabel => /*#__PURE__*/React.createElement(TextField, {
       "aria-label": searchLabel,
       className: styles.input,
       autoComplete: "off",
-      disabled: false,
       name: "search",
       placeholder: `${searchPlaceholder}...`,
-      required: false,
       onChange: this.onChange,
       value: query || '',
       ref: this.handleInputRef,
-      onBlur: this.onBlur
-    })))));
+      isCompact: true,
+      onBlur: this.onBlur,
+      elemBeforeInput: /*#__PURE__*/React.createElement("span", {
+        className: styles.searchIcon
+      }, /*#__PURE__*/React.createElement(SearchIcon, {
+        label: ""
+      }))
+    }))));
   }
 
 }

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

@@ -1,7 +1,8 @@
 import { style } from 'typestyle';
+import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { akEmojiSelectedBackgroundColor, emojiFooterBoxShadow, emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
+import { akEmojiSelectedBackgroundColor, emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
 import { emojiSprite, placeholder, emojiNode } from '../common/styles';
 import { emojiPickerHeight, emojiPickerWidth } from '../../util/constants';
 export const active = 'emoji-picker-active';
@@ -11,7 +12,7 @@ export const emojiPicker = style({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
-  background: 'white',
+  background: token('color.background.overlay', 'white'),
   border: `${emojiPickerBorderColor} 1px solid`,
   borderRadius: `${borderRadius()}px`,
   boxShadow: emojiPickerBoxShadow,
@@ -25,7 +26,7 @@ export const emojiPicker = style({
 export const addButton = 'emoji-picker-add-button';
 export const categorySelector = style({
   flex: '0 0 auto',
-  backgroundColor: colors.N30,
+  backgroundColor: token('color.background.sunken', colors.N30),
   $nest: {
     ul: {
       listStyle: 'none',
@@ -46,7 +47,7 @@ export const categorySelector = style({
       }
     },
     [`.${addButton}`]: {
-      color: colors.N200,
+      color: token('color.text.lowEmphasis', colors.N200),
       margin: '0 0 0 5px',
       verticalAlign: 'middle'
     }
@@ -55,7 +56,7 @@ export const categorySelector = style({
 export const category = style({
   backgroundColor: 'transparent',
   border: 0,
-  color: colors.N100A,
+  color: token('color.text.lowEmphasis', colors.N100A),
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
@@ -67,22 +68,22 @@ export const category = style({
       padding: 0
     },
     [`&.${active}`]: {
-      color: colors.B300,
+      color: token('color.text.selected', colors.B300),
       $nest: {
         ['&:hover']: {
-          color: colors.B300
+          color: token('color.text.selected', colors.B300)
         }
       }
     },
     ['&:hover']: {
-      color: colors.B200
+      color: token('color.text.selected', colors.B200)
     },
     [`&.${disable}`]: {
-      color: colors.N50,
+      color: token('color.text.lowEmphasis', colors.N50),
       cursor: 'default',
       $nest: {
         ['&:hover']: {
-          color: colors.N50
+          color: token('color.text.lowEmphasis', colors.N50)
         }
       }
     }
@@ -116,14 +117,12 @@ export const pickerSearch = style({
       opacity: 0.5
     },
     [`.${input}`]: {
-      background: 'transparent',
-      border: 0,
       boxSizing: 'border-box',
       color: 'inherit',
       cursor: 'inherit',
       fontSize: '14px',
       outline: 'none',
-      padding: '1px 0 2px 10px',
+      padding: '1px 0 2px 6px',
       width: '100%',
       $nest: {
         ['&:invalid']: {
@@ -155,7 +154,7 @@ export const emojiPickerRow = style({
 });
 export const emojiCategoryTitle = style({
   boxSizing: 'border-box',
-  color: colors.N900,
+  color: token('color.text.highEmphasis', colors.N900),
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
@@ -228,6 +227,6 @@ export const emojiPickerFooter = style({
   flex: '0 0 auto'
 });
 export const emojiPickerFooterWithTopShadow = style({
-  borderTop: `2px solid ${colors.N30A}`,
-  boxShadow: emojiFooterBoxShadow
+  borderTop: token('color.border.neutral', `2px solid ${colors.N30A}`),
+  boxShadow: `0px -1px 1px 0px ${token('color.border.neutral', 'rgba(0, 0, 0, 0.1)')}`
 });

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

@@ -1,14 +1,15 @@
 import { style } from 'typestyle';
+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({
-  background: 'white',
+  background: token('color.background.overlay', 'white'),
   border: `1px solid ${noDialogContainerBorderColor}`,
   borderRadius: noDialogContainerBorderRadius,
   boxShadow: noDialogContainerBoxShadow,
-  color: '#333',
+  color: token('color.text.mediumEmphasis', '#333'),
   width: emojiTypeAheadWidth
 });
 export const typeAheadEmpty = style({

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

@@ -1,4 +1,5 @@
 import { style } from 'typestyle';
+import { token } from '@atlaskit/tokens';
 import { emojiPickerWidth } from '../../util/constants'; // Uploader
 
 export const emojiUploadWidget = style({
@@ -6,7 +7,7 @@ export const emojiUploadWidget = style({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'stretch',
-  background: 'white',
+  background: token('color.background.overlay', 'white'),
   height: `120px`,
   width: `${emojiPickerWidth}px`,
   marginBottom: '8px',

package/dist/es2019/util/shared-styles.js

@@ -1,17 +1,15 @@
+import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N40, N30 } from '@atlaskit/theme/colors';
 import { emojiPickerWidth } from './constants';
 export const emojiPickerListWidth = emojiPickerWidth;
 export const emojiPickerListHeight = 205;
-export const emojiPickerBorderColor = N40; // This has not been confirmed by the ADG yet
-
-export const emojiPickerBoxShadow = '0 3px 6px rgba(0, 0, 0, 0.2)';
-export const emojiFooterBoxShadow = '0px -1px 1px 0px rgba(0, 0, 0, 0.1)';
-export const noDialogContainerBorderColor = N40; // This has not been confirmed by the ADG yet
-
+export const emojiPickerBorderColor = token('color.border.neutral', N40);
+export const emojiPickerBoxShadow = token('shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
+export const noDialogContainerBorderColor = token('color.border.neutral', N40);
 export const noDialogContainerBorderRadius = `${borderRadius()}px`;
-export const noDialogContainerBoxShadow = '0 3px 6px rgba(0, 0, 0, 0.2)';
-export const akEmojiSelectedBackgroundColor = N30;
-export const emojiPreviewSelectedColor = N30;
+export const noDialogContainerBoxShadow = token('shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
+export const akEmojiSelectedBackgroundColor = token('color.background.transparentNeutral.hover', N30);
+export const emojiPreviewSelectedColor = token('color.background.subtleNeutral.resting', N30);
 export const emojiTypeAheadMaxHeight = 350;
 export const emojiTypeAheadWidth = 350;

package/dist/es2019/util/storage-available.js

@@ -10,7 +10,8 @@ export default function storageAvailable(type) {
     storage.removeItem(x);
     return true;
   } catch (e) {
-    return e instanceof DOMException && (e.code === 22 || // Firefox
+    return e instanceof DOMException && ( // everything except Firefox
+    e.code === 22 || // Firefox
     e.code === 1014 || // test name field too, because code might not be present
     // everything except Firefox
     e.name === 'QuotaExceededError' || // Firefox

package/dist/es2019/version.json

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

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

@@ -1,6 +1,7 @@
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 import { N500 } from '@atlaskit/theme/colors';
 import { deleteEmojiLabel } from '../../util/constants';
 import * as styles from './styles';
@@ -11,7 +12,7 @@ var DeleteButton = function DeleteButton(props) {
   }, /*#__PURE__*/React.createElement(Button, {
     iconBefore: /*#__PURE__*/React.createElement(CrossCircleIcon, {
       label: deleteEmojiLabel,
-      primaryColor: N500,
+      primaryColor: token('color.text.mediumEmphasis', N500),
       size: "small"
     }),
     onClick: props.onClick,

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

@@ -10,10 +10,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import AkFieldBase from '@atlaskit/field-base';
 import React from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
+import TextField from '@atlaskit/textfield';
 import * as ImageUtil from '../../util/image';
 import debug from '../../util/logger';
 import { messages } from '../i18n';
@@ -89,23 +89,18 @@ var ChooseEmojiFile = /*#__PURE__*/function (_PureComponent) {
         className: styles.uploadChooseFileRow
       }, /*#__PURE__*/React.createElement("span", {
         className: styles.uploadChooseFileEmojiName
-      }, /*#__PURE__*/React.createElement(AkFieldBase, {
-        appearance: "standard",
-        isCompact: true,
-        defaultIsFocused: true,
-        isFitContainerWidthEnabled: true
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPlaceholder, function (message) {
-        return /*#__PURE__*/React.createElement("input", {
+        return /*#__PURE__*/React.createElement(TextField, {
           placeholder: message,
           "aria-label": message,
           maxLength: maxNameLength,
           onChange: onNameChange,
           onKeyDown: _this2.onKeyDown,
           value: name,
-          ref: "name",
+          isCompact: true,
           autoFocus: true
         });
-      }))), /*#__PURE__*/React.createElement("span", {
+      })), /*#__PURE__*/React.createElement("span", {
         className: styles.uploadChooseFileBrowse
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileTitle, function (message) {
         return /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {

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

@@ -4,6 +4,7 @@ var _$nest, _$nest2, _$nest3, _$nest4, _$nest6, _$nest7, _$nest8, _$nest9, _$nes
 
 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';
@@ -159,7 +160,7 @@ export var emojiPreview = style({
       flexShrink: 1,
       $nest: (_$nest6 = {}, _defineProperty(_$nest6, ".".concat(name), {
         display: 'block',
-        color: colors.N900,
+        color: token('color.text.highEmphasis', colors.N900),
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -168,7 +169,7 @@ export var emojiPreview = style({
         })
       }), _defineProperty(_$nest6, ".".concat(shortName), {
         display: 'block',
-        color: colors.N200,
+        color: token('color.text.mediumEmphasis', colors.N200),
         fontSize: '12px',
         lineHeight: 1,
         marginBottom: '-2px',
@@ -182,7 +183,7 @@ export var emojiPreview = style({
       $nest: (_$nest7 = {}, _defineProperty(_$nest7, ".".concat(name), {
         display: 'none'
       }), _defineProperty(_$nest7, ".".concat(shortName), {
-        color: colors.N900,
+        color: token('color.text.highEmphasis', colors.N900),
         fontSize: '14px'
       }), _$nest7)
     }), _$nest8)
@@ -204,7 +205,7 @@ export var emojiPreview = style({
 }); // Scrollable
 
 export var emojiScrollable = style({
-  border: '1px solid #fff',
+  border: "1px solid ".concat(token('color.border.neutral', '#fff')),
   borderRadius: "".concat(borderRadius(), "px"),
   display: 'block',
   margin: '0',
@@ -221,7 +222,7 @@ export var emojiUpload = style({
   justifyContent: 'space-around'
 });
 export var uploadChooseFileMessage = style({
-  color: colors.N300,
+  color: token('color.text.mediumEmphasis', colors.N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
@@ -239,11 +240,7 @@ export var uploadChooseFileEmojiName = style({
     input: {
       background: 'transparent',
       border: 0,
-      fontSize: '12px',
       outline: 'none',
-      width: '100%',
-      height: '22px',
-      // fixed height is required to work in IE11 and other browsers in Windows
       $nest: (_$nest10 = {}, _defineProperty(_$nest10, '&:invalid', {
         boxShadow: 'none'
       }), _defineProperty(_$nest10, '&::-ms-clear', {
@@ -265,14 +262,14 @@ export var uploadPreview = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: colors.N20,
+  background: token('color.background.subtleNeutral.resting', colors.N20),
   borderRadius: "".concat(borderRadius(), "px"),
   padding: '10px'
 });
 export var uploadPreviewText = style({
   $nest: {
     h5: {
-      color: colors.N300,
+      color: token('color.text.mediumEmphasis', colors.N300),
       paddingBottom: '4px',
       fontSize: '12px'
     },
@@ -316,7 +313,7 @@ export var deleteText = style({
   height: '64px',
   $nest: {
     ':first-child': {
-      color: colors.N300,
+      color: token('color.text.mediumEmphasis', colors.N300),
       lineHeight: '16px'
     }
   }
@@ -350,20 +347,20 @@ export var deleteFooter = style({
 });
 export var emojiDeleteErrorMessage = style({
   display: 'flex',
-  color: colors.R400,
+  color: token('color.text.danger', colors.R400),
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
 });
 export var emojiChooseFileErrorMessage = style({
   display: 'flex',
-  color: colors.R300,
+  color: token('color.text.danger', colors.R300),
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
 export var emojiPreviewErrorMessage = style({
   display: 'inline-flex',
-  color: colors.R400,
+  color: token('color.text.danger', colors.R400),
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'

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

@@ -10,10 +10,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import AkFieldBase from '@atlaskit/field-base';
+import React, { PureComponent } from 'react';
+import TextField from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
-import React from 'react';
-import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { messages } from '../i18n';
 import * as styles from './styles';
@@ -113,29 +112,25 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
         className: styles.pickerSearch,
         style: style
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.searchPlaceholder, function (searchPlaceholder) {
-        return /*#__PURE__*/React.createElement(AkFieldBase, {
-          appearance: "standard",
-          isCompact: true,
-          isFitContainerWidthEnabled: true
-        }, /*#__PURE__*/React.createElement("span", {
-          className: styles.searchIcon
-        }, /*#__PURE__*/React.createElement(SearchIcon, {
-          label: ""
-        })), /*#__PURE__*/React.createElement(FormattedMessage, messages.searchLabel, function (searchLabel) {
-          return /*#__PURE__*/React.createElement("input", {
+        return /*#__PURE__*/React.createElement(FormattedMessage, messages.searchLabel, function (searchLabel) {
+          return /*#__PURE__*/React.createElement(TextField, {
             "aria-label": searchLabel,
             className: styles.input,
             autoComplete: "off",
-            disabled: false,
             name: "search",
             placeholder: "".concat(searchPlaceholder, "..."),
-            required: false,
             onChange: _this2.onChange,
             value: query || '',
             ref: _this2.handleInputRef,
-            onBlur: _this2.onBlur
+            isCompact: true,
+            onBlur: _this2.onBlur,
+            elemBeforeInput: /*#__PURE__*/React.createElement("span", {
+              className: styles.searchIcon
+            }, /*#__PURE__*/React.createElement(SearchIcon, {
+              label: ""
+            }))
           });
-        }));
+        });
       }));
     }
   }]);