@atlaskit/emoji 68.0.4 → 69.0.0

package/dist/cjs/components/compiled/common/EmojiUploadPicker.js

@@ -0,0 +1,322 @@
+/* EmojiUploadPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uploadEmojiNameInputTestId = exports.uploadEmojiComponentTestId = exports.default = exports.cancelEmojiUploadPickerTestId = void 0;
+require("./EmojiUploadPicker.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _colors = require("@atlaskit/theme/colors");
+var _reactIntlNext = require("react-intl-next");
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _primitives = require("@atlaskit/primitives");
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+var ImageUtil = _interopRequireWildcard(require("../../../util/image"));
+var _logger = _interopRequireDefault(require("../../../util/logger"));
+var _i18n = require("../../i18n");
+var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
+var _EmojiUploadPreview = _interopRequireDefault(require("./EmojiUploadPreview"));
+var _FileChooser = _interopRequireDefault(require("../../common/FileChooser"));
+var _internalTypes = require("../../common/internal-types");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var closeEmojiUploadButton = null;
+var emojiUpload = null;
+var emojiUploadTop = null;
+var headingH5 = null;
+var uploadChooseFileEmojiName = null;
+var uploadChooseFileMessage = null;
+var uploadChooseFileRow = null;
+var uploadEmojiNameInputTestId = exports.uploadEmojiNameInputTestId = 'upload-emoji-name-input';
+var uploadEmojiComponentTestId = exports.uploadEmojiComponentTestId = 'upload-emoji-component';
+var cancelEmojiUploadPickerTestId = exports.cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
+var disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
+var sanitizeName = function sanitizeName(name) {
+  // prevent / replace certain characters, allow others
+  disallowedReplacementsMap.forEach(function (replaceWith, exclude) {
+    name = name.split(exclude).join(replaceWith);
+  });
+  return name;
+};
+var maxNameLength = 50;
+var toEmojiName = function toEmojiName(uploadName) {
+  var name = uploadName.split('_').join(' ');
+  return "".concat(name.substr(0, 1).toLocaleUpperCase()).concat(name.substr(1));
+};
+var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$name = props.name,
+    name = _props$name === void 0 ? '' : _props$name,
+    onChooseFile = props.onChooseFile,
+    onClick = props.onClick,
+    onNameChange = props.onNameChange,
+    onUploadCancelled = props.onUploadCancelled,
+    errorMessage = props.errorMessage,
+    intl = props.intl;
+  var formatMessage = intl.formatMessage;
+  var disableChooser = !name;
+  var fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id';
+  var inputRef = (0, _react.useRef)(null);
+  var onKeyDownHandler = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Escape') {
+      onUploadCancelled();
+    }
+  }, [onUploadCancelled]);
+  (0, _react.useLayoutEffect)(function () {
+    requestAnimationFrame(function () {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    });
+  }, []);
+  var cancelLabel = formatMessage(_i18n.messages.cancelLabel);
+  var emojiPlaceholder = formatMessage(_i18n.messages.emojiPlaceholder);
+  var emojiNameAriaLabel = formatMessage(_i18n.messages.emojiNameAriaLabel);
+  var emojiChooseFileTitle = formatMessage(_i18n.messages.emojiChooseFileTitle);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiComponentTestId,
+    className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3icae7 _1e0c1txw _2lx21bp4 _1bah1b1v"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_11c8dcr7 _n3td1v6z _1e0c1txw _1bah1yb4 _4cvresu3"])
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "new-emoji-name-input",
+    className: (0, _runtime.ax)(["_1w901vvm", "_fqoxdcr7 _12r21pd9"]),
+    style: {
+      "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
+    }
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw"])
+  }, /*#__PURE__*/React.createElement(_standardButton.default, {
+    onClick: onUploadCancelled,
+    "aria-label": cancelLabel,
+    appearance: "subtle",
+    spacing: "none",
+    shouldFitContainer: true,
+    testId: cancelEmojiUploadPickerTestId
+  }, /*#__PURE__*/React.createElement(_closeCross.default, {
+    color: "currentColor",
+    LEGACY_size: "small",
+    label: cancelLabel
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _1bah1yb4 _n3td1v6z"])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _2hwx14y2 _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
+  }, /*#__PURE__*/React.createElement(_textfield.default, {
+    placeholder: emojiPlaceholder,
+    "aria-label": emojiNameAriaLabel,
+    maxLength: maxNameLength,
+    onChange: onNameChange,
+    onKeyDown: onKeyDownHandler,
+    value: name,
+    isCompact: true,
+    autoFocus: true,
+    testId: uploadEmojiNameInputTestId,
+    ref: inputRef,
+    id: "new-emoji-name-input",
+    "aria-required": true
+  })), /*#__PURE__*/React.createElement(_primitives.Text, null, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function () {
+    return /*#__PURE__*/React.createElement(_FileChooser.default, {
+      label: emojiChooseFileTitle,
+      onChange: onChooseFile,
+      onClick: onClick,
+      accept: "image/png,image/jpeg,image/gif",
+      ariaDescribedBy: fileChooserButtonDescriptionId,
+      isDisabled: disableChooser
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    id: fileChooserButtonDescriptionId
+  }, !errorMessage ? /*#__PURE__*/React.createElement(_primitives.Text, {
+    as: "p",
+    size: "small"
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
+    errorStyle: "chooseFile",
+    message: errorMessage
+  })));
+});
+var EmojiUploadPicker = function EmojiUploadPicker(props) {
+  var _document$activeEleme;
+  var errorMessage = props.errorMessage,
+    initialUploadName = props.initialUploadName,
+    onUploadEmoji = props.onUploadEmoji,
+    onFileChooserClicked = props.onFileChooserClicked,
+    onUploadCancelled = props.onUploadCancelled,
+    intl = props.intl;
+  var _useState = (0, _react.useState)(errorMessage ? _internalTypes.UploadStatus.Error : _internalTypes.UploadStatus.Waiting),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    uploadStatus = _useState2[0],
+    setUploadStatus = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    chooseEmojiErrorMessage = _useState4[0],
+    setChooseEmojiErrorMessage = _useState4[1];
+  var _useState5 = (0, _react.useState)(initialUploadName && sanitizeName(initialUploadName)),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    name = _useState6[0],
+    setName = _useState6[1];
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    filename = _useState8[0],
+    setFilename = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    previewImage = _useState10[0],
+    setPreviewImage = _useState10[1];
+  // document is undefined during ssr rendering and throws an error
+  var lastFocusedElementId = (0, _react.useRef)(typeof document !== 'undefined' ? (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id : '');
+  (0, _react.useEffect)(function () {
+    if (errorMessage) {
+      setUploadStatus(_internalTypes.UploadStatus.Error);
+      return;
+    } else {
+      if (uploadStatus === _internalTypes.UploadStatus.Error) {
+        setUploadStatus(_internalTypes.UploadStatus.Waiting);
+      }
+    }
+  }, [errorMessage, uploadStatus]);
+  (0, _react.useEffect)(function () {
+    if (initialUploadName) {
+      setName(sanitizeName(initialUploadName));
+    }
+  }, [initialUploadName]);
+  var clearUploadPicker = (0, _react.useCallback)(function () {
+    setName(undefined);
+    setPreviewImage(undefined);
+    setUploadStatus(_internalTypes.UploadStatus.Waiting);
+  }, []);
+  var onNameChange = (0, _react.useCallback)(function (event) {
+    var newName = sanitizeName(event.target.value);
+    if (name !== newName) {
+      setName(newName);
+    }
+  }, [name]);
+  var onAddEmoji = (0, _react.useCallback)(function () {
+    if (uploadStatus === _internalTypes.UploadStatus.Uploading) {
+      return;
+    }
+    if (filename && name && previewImage) {
+      var notifyUpload = function notifyUpload(size) {
+        var width = size.width,
+          height = size.height;
+        setUploadStatus(_internalTypes.UploadStatus.Uploading);
+        onUploadEmoji({
+          name: toEmojiName(name),
+          shortName: ":".concat(name, ":"),
+          filename: filename,
+          dataURL: previewImage,
+          width: width,
+          height: height
+        }, uploadStatus === _internalTypes.UploadStatus.Error, clearUploadPicker);
+      };
+      ImageUtil.getNaturalImageSize(previewImage).then(function (size) {
+        notifyUpload(size);
+      }).catch(function (error) {
+        (0, _logger.default)('getNaturalImageSize error', error);
+        // Just set arbitrary size, worse case is it may render
+        // in wrong aspect ratio in some circumstances.
+        notifyUpload({
+          width: 32,
+          height: 32
+        });
+      });
+    }
+  }, [clearUploadPicker, filename, name, onUploadEmoji, previewImage, uploadStatus]);
+  var cancelChooseFile = (0, _react.useCallback)(function () {
+    setPreviewImage(undefined);
+  }, []);
+  var errorOnUpload = (0, _react.useCallback)(function (event) {
+    (0, _logger.default)('File load error: ', event);
+    setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiUploadFailed));
+    cancelChooseFile();
+  }, [cancelChooseFile]);
+  var onFileLoad = (0, _react.useCallback)(function (file) {
+    return /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(f) {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setFilename(file.name);
+              _context.next = 4;
+              return ImageUtil.parseImage(f.target.result);
+            case 4:
+              setPreviewImage(f.target.result);
+              _context.next = 11;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiInvalidImage));
+              cancelChooseFile();
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+  }, [cancelChooseFile]);
+  var onChooseFile = (0, _react.useCallback)(function (event) {
+    var files = event.target.files;
+    if (files.length) {
+      var reader = new FileReader();
+      var file = files[0];
+      if (ImageUtil.hasFileExceededSize(file)) {
+        setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageTooBig));
+        cancelChooseFile();
+        return;
+      }
+      reader.addEventListener('load', onFileLoad(file));
+      reader.addEventListener('abort', errorOnUpload);
+      reader.addEventListener('error', errorOnUpload);
+      reader.readAsDataURL(file);
+    } else {
+      cancelChooseFile();
+    }
+  }, [cancelChooseFile, errorOnUpload, onFileLoad]);
+  var cancelUpload = (0, _react.useCallback)(function () {
+    clearUploadPicker();
+    onUploadCancelled();
+
+    // using setTimeout here to allow the UI to update before setting focus
+    setTimeout(function (lastFocus) {
+      if (lastFocus) {
+        var _document$getElementB;
+        (_document$getElementB = document.getElementById(lastFocus)) === null || _document$getElementB === void 0 || _document$getElementB.focus();
+      }
+    }, 0, lastFocusedElementId.current);
+  }, [clearUploadPicker, onUploadCancelled]);
+  var onChooseFileClicked = function onChooseFileClicked() {
+    onFileChooserClicked && onFileChooserClicked();
+  };
+  return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+    noFocusGuards: true
+  }, name && previewImage ? /*#__PURE__*/React.createElement(_EmojiUploadPreview.default, {
+    errorMessage: errorMessage,
+    name: name,
+    onAddEmoji: onAddEmoji,
+    onUploadCancelled: cancelUpload,
+    previewImage: previewImage,
+    uploadStatus: uploadStatus
+  }) : /*#__PURE__*/React.createElement(ChooseEmojiFile, {
+    name: name,
+    onChooseFile: onChooseFile,
+    onClick: onChooseFileClicked,
+    onNameChange: onNameChange,
+    onUploadCancelled: cancelUpload,
+    errorMessage: chooseEmojiErrorMessage,
+    intl: intl
+  }));
+};
+var EmojiUploadPickerComponent = (0, _reactIntlNext.injectIntl)( /*#__PURE__*/(0, _react.memo)(EmojiUploadPicker));
+var _default = exports.default = EmojiUploadPickerComponent;

package/dist/cjs/components/compiled/common/EmojiUploadPreview.compiled.css

@@ -0,0 +1,20 @@
+
+._1fztdcr7 h5{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._19bv19bv{padding-left:10px}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19l31ylp img{max-height:40px}
+._19l3gktf img{max-height:20px}
+._1bah1yb4{justify-content:space-between}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i53f4{height:75pt}
+._avw21b66 h5{padding-bottom:var(--ds-space-050,4px)}
+._bfhklslw{background-color:var(--_1jkcdu5)}
+._ca0q19bv{padding-top:10px}
+._jl6w1vvm h5{color:var(--_bbz764)}
+._n3td19bv{padding-bottom:10px}
+._rtys12am img{max-width:50px}
+._rtys53f4 img{max-width:75pt}
+._u5f319bv{padding-right:10px}

package/dist/cjs/components/compiled/common/EmojiUploadPreview.js

@@ -0,0 +1,124 @@
+/* EmojiUploadPreview.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uploadPreviewTestId = exports.default = exports.cancelUploadButtonTestId = void 0;
+require("./EmojiUploadPreview.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _colors = require("@atlaskit/theme/colors");
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _reactIntlNext = require("react-intl-next");
+var _constants = require("../../../util/constants");
+var _i18n = require("../../i18n");
+var _Emoji = _interopRequireDefault(require("./Emoji"));
+var _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
+var _internalTypes = require("../../common/internal-types");
+var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var bigEmojiPreview = null;
+var uploadAddRow = null;
+var uploadPreview = null;
+var uploadPreviewFooter = null;
+var uploadPreviewText = null;
+var uploadPreviewTestId = exports.uploadPreviewTestId = 'upload-preview';
+var cancelUploadButtonTestId = exports.cancelUploadButtonTestId = 'cancel-upload-button';
+var addEmojiPreviewDescriptionId = 'fabric.emoji.preview.description.id';
+var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
+  function EmojiUploadPreview() {
+    (0, _classCallCheck2.default)(this, EmojiUploadPreview);
+    return _callSuper(this, EmojiUploadPreview, arguments);
+  }
+  (0, _inherits2.default)(EmojiUploadPreview, _PureComponent);
+  return (0, _createClass2.default)(EmojiUploadPreview, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        name = _this$props.name,
+        previewImage = _this$props.previewImage,
+        uploadStatus = _this$props.uploadStatus,
+        errorMessage = _this$props.errorMessage,
+        onAddEmoji = _this$props.onAddEmoji,
+        onUploadCancelled = _this$props.onUploadCancelled,
+        intl = _this$props.intl;
+      var formatMessage = intl.formatMessage;
+      var emojiComponent;
+      if (previewImage) {
+        var emoji = {
+          shortName: ":".concat(name, ":"),
+          type: _constants.customCategory,
+          category: _constants.customCategory,
+          representation: {
+            imagePath: previewImage,
+            width: 24,
+            height: 24
+          },
+          searchable: true
+        };
+        emojiComponent = /*#__PURE__*/React.createElement(_Emoji.default, {
+          emoji: emoji
+        });
+      }
+      var uploading = uploadStatus === _internalTypes.UploadStatus.Uploading;
+      var retryableButtonLabel = errorMessage ? formatMessage(_i18n.messages.retryLabel) : formatMessage(_i18n.messages.addEmojiLabel);
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx21bp4 _4t3i53f4"])
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-testid": uploadPreviewTestId,
+        className: (0, _runtime.ax)(["_2rkosqtm _ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _1bah1yb4 _4cvr1h6o _bfhklslw"]),
+        style: {
+          "--_1jkcdu5": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N20, ")"))
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_1fztdcr7 _jl6w1vvm _avw21b66 _19l3gktf _rtys12am"]),
+        style: {
+          "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
+        }
+      }, /*#__PURE__*/React.createElement(_heading.default, {
+        size: "xsmall"
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiPreviewTitle)), /*#__PURE__*/React.createElement("div", {
+        id: addEmojiPreviewDescriptionId
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
+        values: {
+          emoji: emojiComponent
+        }
+      })))), /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_19bv1b66 _19l31ylp _rtys53f4"])
+      }, emojiComponent)), /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_1e0c1txw _1bahesu3 _4cvr1h6o _ca0q19bv"])
+      }, !uploading && errorMessage ? /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
+        errorStyle: "preview",
+        message: errorMessage,
+        tooltip: true
+      }) : null, /*#__PURE__*/React.createElement(_RetryableButton.default, {
+        label: retryableButtonLabel,
+        onSubmit: onAddEmoji,
+        appearance: "primary",
+        loading: uploading,
+        error: !!errorMessage,
+        ariaDescribedBy: addEmojiPreviewDescriptionId
+      }), /*#__PURE__*/React.createElement(_standardButton.default, {
+        onClick: onUploadCancelled,
+        appearance: "subtle",
+        isDisabled: uploading,
+        testId: cancelUploadButtonTestId
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))));
+    }
+  }]);
+}(_react.PureComponent);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(EmojiUploadPreview);

package/dist/cjs/components/compiled/common/RetryableButton.compiled.css

@@ -0,0 +1,2 @@
+._18u019bv{margin-left:10px}
+._2hwx19bv{margin-right:10px}

package/dist/cjs/components/compiled/common/RetryableButton.js

@@ -0,0 +1,73 @@
+/* RetryableButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uploadEmojiButtonTestId = exports.retryUploadButtonTestId = exports.default = void 0;
+require("./RetryableButton.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _i18n = require("../../i18n");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var buttonSpinner = null;
+var retryUploadButtonTestId = exports.retryUploadButtonTestId = 'retry-upload-button';
+var uploadEmojiButtonTestId = exports.uploadEmojiButtonTestId = 'upload-emoji-button';
+var LoadingSpinner = function LoadingSpinner() {
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_2hwx19bv _18u019bv"])
+  }, /*#__PURE__*/React.createElement(_spinner.default, null));
+};
+var RetryButton = function RetryButton(props) {
+  var onSubmit = props.onSubmit,
+    ariaLabelledBy = props.ariaLabelledBy,
+    ariaDescribedBy = props.ariaDescribedBy;
+  return /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.retryLabel, function (retryLabel) {
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
+      paddingInlineEnd: "space.050"
+    }, /*#__PURE__*/React.createElement(_new.default, {
+      appearance: "warning",
+      onClick: onSubmit,
+      testId: retryUploadButtonTestId,
+      "aria-describedby": ariaDescribedBy,
+      "aria-labelledby": ariaLabelledBy,
+      autoFocus: true
+    }, retryLabel));
+  });
+};
+var UploadButton = function UploadButton(props) {
+  var appearance = props.appearance,
+    onSubmit = props.onSubmit,
+    label = props.label,
+    ariaLabelledBy = props.ariaLabelledBy,
+    ariaDescribedBy = props.ariaDescribedBy;
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    paddingInlineEnd: "space.050"
+  }, /*#__PURE__*/React.createElement(_new.default, {
+    appearance: appearance,
+    onClick: onSubmit,
+    testId: uploadEmojiButtonTestId,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    autoFocus: true
+  }, label));
+};
+var RetryableButton = function RetryableButton(props) {
+  var loading = props.loading,
+    error = props.error;
+  if (loading) {
+    return /*#__PURE__*/React.createElement(LoadingSpinner, null);
+  }
+  if (error) {
+    return /*#__PURE__*/React.createElement(RetryButton, props);
+  }
+  return /*#__PURE__*/React.createElement(UploadButton, props);
+};
+var _default = exports.default = RetryableButton;

package/dist/cjs/components/compiled/common/Scrollable.compiled.css

@@ -0,0 +1,13 @@
+
+._19ityw3a{border:var(--_1id3pet)}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._18m91wug{overflow-y:auto}
+._18u0idpf{margin-left:0}
+._19bvidpf{padding-left:0}
+._19pkidpf{margin-top:0}
+._1e0c1ule{display:block}
+._1reo15vq{overflow-x:hidden}
+._2hwxidpf{margin-right:0}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._otyridpf{margin-bottom:0}
+._u5f3idpf{padding-right:0}

package/dist/cjs/components/compiled/common/Scrollable.js

@@ -0,0 +1,97 @@
+/* Scrollable.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./Scrollable.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // FIXME - FAB-1732 looking at making a shared component for this
+var emojiScrollable = null;
+var Scrollable = exports.default = /*#__PURE__*/function (_PureComponent) {
+  function Scrollable() {
+    var _this;
+    (0, _classCallCheck2.default)(this, Scrollable);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Scrollable, [].concat(args));
+    (0, _defineProperty2.default)(_this, "scrollableDiv", null);
+    // API
+    (0, _defineProperty2.default)(_this, "reveal", function (child, forceToTop) {
+      if (child && _this.scrollableDiv) {
+        // Not using Element.scrollIntoView as it scrolls even to top/bottom of view even if
+        // already visible
+        var scrollableRect = _this.scrollableDiv.getBoundingClientRect();
+        var elementRect = child.getBoundingClientRect();
+        if (forceToTop || elementRect.top < scrollableRect.top) {
+          _this.scrollableDiv.scrollTop += elementRect.top - scrollableRect.top;
+        } else if (elementRect.bottom > scrollableRect.bottom) {
+          _this.scrollableDiv.scrollTop += elementRect.bottom - scrollableRect.bottom;
+        }
+      }
+    });
+    (0, _defineProperty2.default)(_this, "scrollToBottom", function () {
+      if (_this.scrollableDiv) {
+        _this.scrollableDiv.scrollTop = _this.scrollableDiv.scrollHeight;
+      }
+    });
+    (0, _defineProperty2.default)(_this, "handleScroll", function (event) {
+      var sampleOffset = 10;
+      var firstElement;
+      if (_this.scrollableDiv) {
+        var scrollableRect = _this.scrollableDiv.getBoundingClientRect();
+        firstElement = document.elementFromPoint(scrollableRect.left + sampleOffset, scrollableRect.top + sampleOffset);
+      }
+      if (_this.props.onScroll && firstElement) {
+        _this.props.onScroll(firstElement, event);
+      }
+    });
+    (0, _defineProperty2.default)(_this, "handleRef", function (ref) {
+      _this.scrollableDiv = ref;
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(Scrollable, _PureComponent);
+  return (0, _createClass2.default)(Scrollable, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        maxHeight = _this$props.maxHeight,
+        onMouseLeave = _this$props.onMouseLeave;
+      var style = maxHeight ? {
+        maxHeight: maxHeight
+      } : {};
+      return /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: (0, _runtime.ax)(["_19ityw3a _2rkosqtm _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1ule _1reo15vq _18m91wug", "emoji-scrollable ".concat(className)]),
+        onMouseLeave: onMouseLeave,
+        onScroll: this.handleScroll,
+        ref: this.handleRef
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          "--_1id3pet": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, #fff)"))
+        })
+      }, children);
+    }
+  }]);
+}(_react.PureComponent);