@atlaskit/emoji 70.5.1 → 70.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/emoji
 
+## 70.6.0
+
+### Minor Changes
+
+- [`0ed6bb96033a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0ed6bb96033a5) -
+  Updated emoji upload experience - add dropzone for upload, full screen, updated user flow
+
+## 70.5.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 70.5.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -46,6 +46,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -46,6 +46,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-products/tsconfig.json"
 		},

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

@@ -1,23 +1,31 @@
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._scffidpf input{border:0}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._16jlkb7n{flex-grow:1}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1bah1b1v{justify-content:space-around}
 ._1bah1yb4{justify-content:space-between}
+._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
 ._1o9zkb7n{flex-shrink:1}
 ._1rwq1j28 input{background-color:transparent}
 ._1w90azsu._1w90azsu{color:var(--ds-text-subtle,#505258)}
 ._2lx21bp4{flex-direction:column}
 ._34ir1o36 input{outline-width:medium}
+._4cvr1h6o{align-items:center}
 ._4cvresu3{align-items:flex-end}
 ._9bj2glyw input::-ms-clear{display:none}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._coc6glyw input:invalid{box-shadow:none}
 ._gxxuglyw input{outline-style:none}
 ._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._i0dl1wug{flex-basis:auto}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._xmji1r31 input{outline-color:currentColor}

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

@@ -28,14 +28,18 @@ var _EmojiUploadPreview = _interopRequireDefault(require("./EmojiUploadPreview")
 var _FileChooser = _interopRequireDefault(require("./FileChooser"));
 var _internalTypes = require("./internal-types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var closeEmojiUploadButton = null;
+var uploadAddRowNew = null;
 var emojiUpload = null;
+var emojiUploadNew = null;
 var emojiUploadTop = null;
 var labelStyles = null;
 var uploadChooseFileEmojiName = null;
 var uploadChooseFileMessage = null;
 var uploadChooseFileRow = null;
+var uploadChooseFileRowNew = null;
 var uploadEmojiNameInputTestId = exports.uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 var uploadEmojiComponentTestId = exports.uploadEmojiComponentTestId = 'upload-emoji-component';
 var cancelEmojiUploadPickerTestId = exports.cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
@@ -59,7 +63,10 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
     onClick = props.onClick,
     onNameChange = props.onNameChange,
     onUploadCancelled = props.onUploadCancelled,
+    onAddEmoji = props.onAddEmoji,
     errorMessage = props.errorMessage,
+    previewImage = props.previewImage,
+    uploadStatus = props.uploadStatus,
     intl = props.intl;
   var formatMessage = intl.formatMessage;
   var disableChooser = !name;
@@ -80,7 +87,62 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
   var emojiPlaceholder = formatMessage(_i18n.messages.emojiPlaceholder);
   var emojiNameAriaLabel = formatMessage(_i18n.messages.emojiNameAriaLabel);
   var emojiChooseFileTitle = formatMessage(_i18n.messages.emojiChooseFileTitle);
-  return /*#__PURE__*/React.createElement("div", {
+  var isUploading = uploadStatus === _internalTypes.UploadStatus.Uploading;
+  var addEmojiDisabled = !previewImage || !name || isUploading;
+  return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiComponentTestId,
+    className: (0, _runtime.ax)(["_ca0qu2gc _u5f3pxbi _n3tdu2gc _19bvpxbi _1e0c1txw _2lx21bp4 _1bah1b1v"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_11c8wadc _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "new-emoji-name-input",
+    className: (0, _runtime.ax)(["_1w90azsu", "_11c8wadc _k48p1pd9"])
+  }, previewImage ? /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiPreviewTitle) : /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.addCustomEmojiLabel))), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_zulppxbi _1e0c1txw _2lx21bp4 _n3tdu2gc"])
+  }, /*#__PURE__*/React.createElement(_compiled.Text, null, /*#__PURE__*/React.createElement(_reactIntl.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,
+      previewImage: previewImage,
+      previewAlt: name
+    });
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "new-emoji-name-input",
+    className: (0, _runtime.ax)(["_1w90azsu", "_11c8wadc _k48p1pd9"])
+  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiNameLabel)), /*#__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("div", {
+    id: fileChooserButtonDescriptionId
+  }, errorMessage && /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
+    errorStyle: "chooseFile",
+    message: errorMessage
+  })), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _1bahesu3 _4cvr1h6o _ca0qpxbi _n3td1ejb"])
+  }, /*#__PURE__*/React.createElement(_new.default, {
+    onClick: onUploadCancelled,
+    appearance: "subtle",
+    isDisabled: isUploading,
+    testId: cancelEmojiUploadPickerTestId
+  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.cancelLabel)), /*#__PURE__*/React.createElement(_new.default, {
+    onClick: onAddEmoji,
+    appearance: "primary",
+    isDisabled: addEmojiDisabled,
+    isLoading: isUploading
+  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.addEmojiLabel)))) : /*#__PURE__*/React.createElement("div", {
     "data-testid": uploadEmojiComponentTestId,
     className: (0, _runtime.ax)(["_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
@@ -88,7 +150,7 @@ var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
     className: (0, _runtime.ax)(["_1w90azsu", "_11c8wadc _k48p1pd9"])
-  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _i18n.messages.addEmojiLabel : _i18n.messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1e0c1txw"])
   }, /*#__PURE__*/React.createElement(_standardButton.default, {
     onClick: onUploadCancelled,
@@ -297,7 +359,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   var onChooseFileClicked = function onChooseFileClicked() {
     onFileChooserClicked && onFileChooserClicked();
   };
-  var content = name && previewImage ? /*#__PURE__*/React.createElement(_EmojiUploadPreview.default, {
+  var content = !(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') && name && previewImage ? /*#__PURE__*/React.createElement(_EmojiUploadPreview.default, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -310,6 +372,9 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     onClick: onChooseFileClicked,
     onNameChange: onNameChange,
     onUploadCancelled: cancelUpload,
+    onAddEmoji: onAddEmoji,
+    previewImage: previewImage,
+    uploadStatus: uploadStatus,
     errorMessage: chooseEmojiErrorMessage,
     intl: intl
   });

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

@@ -0,0 +1,22 @@
+
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqogq9o{border-style:dashed}
+._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
+._1h6dq98m{border-color:var(--ds-border-selected,#1868db)}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1oec6ebc{transition-duration:.15s}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i7l9q{height:170px}
+._5ral1f51{object-fit:contain}
+._6fl45ucs{transition-timing-function:ease}
+._80omtlke{cursor:pointer}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
+._bfhkufnl{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._c71lys9h{max-height:5pc}
+._k8m01rje{transition-property:background-color,border-color}
+._p12f1osq{max-width:100%}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/cjs/components/common/FileChooser.js

@@ -1,3 +1,4 @@
+/* FileChooser.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,21 +6,40 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fileUploadInputTestId = exports.default = exports.chooseFileButtonTestId = void 0;
+exports.fileUploadInputTestId = exports.dropzoneTestId = exports.default = exports.chooseFileButtonTestId = void 0;
+require("./FileChooser.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _upload = _interopRequireDefault(require("@atlaskit/icon/core/upload"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/external/adapter");
+var _file = require("@atlaskit/pragmatic-drag-and-drop/external/file");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var chooseFileButtonTestId = exports.chooseFileButtonTestId = 'choose-file-button';
 var fileUploadInputTestId = exports.fileUploadInputTestId = 'file-upload';
+var dropzoneTestId = exports.dropzoneTestId = 'file-dropzone';
+var dropzone = null;
+var dropzoneActive = null;
+var previewImageStyles = null;
 var FileChooser = function FileChooser(props) {
   var accept = props.accept,
     ariaDescribedBy = props.ariaDescribedBy,
     isDisabled = props.isDisabled,
+    isDropDisabled = props.isDropDisabled,
     label = props.label,
     onChange = props.onChange,
-    onClick = props.onClick;
+    onClick = props.onClick,
+    previewImage = props.previewImage,
+    previewAlt = props.previewAlt;
   var filePickerRef = (0, _react.useRef)(null);
   var fileButtonRef = (0, _react.useRef)(null);
+  var dropzoneRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
   var handleOnChooseFile = function handleOnChooseFile() {
     var _fileButtonRef$curren;
     if (!filePickerRef.current) {
@@ -31,13 +51,50 @@ var FileChooser = function FileChooser(props) {
     filePickerRef.current.click();
     (_fileButtonRef$curren = fileButtonRef.current) === null || _fileButtonRef$curren === void 0 || _fileButtonRef$curren.focus();
   };
-  return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_new.default, {
-    onClick: handleOnChooseFile,
-    isDisabled: isDisabled,
-    "aria-describedby": ariaDescribedBy,
-    testId: chooseFileButtonTestId,
-    ref: fileButtonRef
-  }, label), /*#__PURE__*/_react.default.createElement("input", {
+  var handleFileDrop = (0, _react.useCallback)(function (files) {
+    if (!onChange || !files.length) {
+      return;
+    }
+    var dataTransfer = new DataTransfer();
+    files.forEach(function (file) {
+      return dataTransfer.items.add(file);
+    });
+    var syntheticEvent = {
+      target: {
+        files: dataTransfer.files
+      }
+    };
+    onChange(syntheticEvent);
+  }, [onChange]);
+  (0, _react.useEffect)(function () {
+    var element = dropzoneRef.current;
+    if (!element || !(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      return;
+    }
+    return (0, _adapter.dropTargetForExternal)({
+      element: element,
+      canDrop: _file.containsFiles,
+      onDragEnter: function onDragEnter() {
+        if (!isDropDisabled) {
+          setIsDragging(true);
+        }
+      },
+      onDragLeave: function onDragLeave() {
+        return setIsDragging(false);
+      },
+      onDrop: function onDrop(_ref) {
+        var source = _ref.source;
+        setIsDragging(false);
+        if (!isDropDisabled) {
+          var files = (0, _file.getFiles)({
+            source: source
+          });
+          handleFileDrop(files);
+        }
+      }
+    });
+  }, [isDropDisabled, handleFileDrop]);
+  var hiddenInput = /*#__PURE__*/_react.default.createElement("input", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "emojiUploadFileInput",
     ref: filePickerRef,
@@ -50,6 +107,34 @@ var FileChooser = function FileChooser(props) {
       display: 'none'
     },
     "data-testid": fileUploadInputTestId
-  }));
+  });
+  if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: dropzoneRef,
+      "data-testid": dropzoneTestId,
+      role: "region",
+      "aria-label": label,
+      className: (0, _runtime.ax)(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec6ebc _6fl45ucs", isDragging && "_1h6dq98m _bfhkufnl"])
+    }, previewImage ? /*#__PURE__*/_react.default.createElement("img", {
+      src: previewImage,
+      alt: previewAlt,
+      className: (0, _runtime.ax)(["_c71lys9h _p12f1osq _5ral1f51"])
+    }) : /*#__PURE__*/_react.default.createElement(_new.default, {
+      onClick: handleOnChooseFile,
+      isDisabled: isDisabled,
+      appearance: "subtle",
+      iconBefore: _upload.default,
+      "aria-describedby": ariaDescribedBy,
+      testId: chooseFileButtonTestId,
+      ref: fileButtonRef
+    }, label), hiddenInput);
+  }
+  return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_new.default, {
+    onClick: handleOnChooseFile,
+    isDisabled: isDisabled,
+    "aria-describedby": ariaDescribedBy,
+    testId: chooseFileButtonTestId,
+    ref: fileButtonRef
+  }, label), hiddenInput);
 };
 var _default = exports.default = FileChooser;

package/dist/cjs/components/i18n.js

@@ -46,6 +46,11 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
     defaultMessage: 'Enter a name for the new emoji',
     description: 'Explains to enter a name for a new emoji'
   },
+  emojiNameLabel: {
+    id: 'fabric.emoji.name.label',
+    defaultMessage: 'Emoji name',
+    description: 'Label for the emoji name input field in the custom emoji upload panel'
+  },
   emojiChooseFileTitle: {
     id: 'fabric.emoji.choose.file.title',
     defaultMessage: 'Choose file',

package/dist/cjs/components/picker/EmojiPickerComponent.compiled.css

@@ -1,18 +1,23 @@
 
 ._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16jlkb7n{flex-grow:1}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._154iidpf{top:0}
+._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
 ._1bah1yb4{justify-content:space-between}
 ._1bsb10mj{width:var(--_gsvyy7)}
 ._1e0c1txw{display:flex}
+._1ltvidpf{left:0}
 ._1o9zkb7n{flex-shrink:1}
+._1pbykb7n{z-index:1}
 ._1reo15vq{overflow-x:hidden}
 ._1tke1pna{min-height:420px}
 ._1tke5x59{min-height:340px}
 ._1tkegx0z{min-height:260px}
 ._1tkeidpf{min-height:0}
 ._1ul910mj{min-width:var(--_gsvyy7)}
+._1xi2idpf{right:0}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1ckg{height:455px}
 ._4t3i2300{height:429px}
@@ -21,6 +26,9 @@
 ._4t3iuxo9{height:var(--_19dn98e)}
 ._4t3ivixp{height:349px}
 ._4t3ixt2k{height:509px}
+._94n5idpf{bottom:0}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._c71l1y6z{max-height:calc(80vh - 86px)}
-._i0dlf1ug{flex-basis:0%}
+._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

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

@@ -27,6 +27,7 @@ var _UploadEmoji = require("../common/UploadEmoji");
 var _RecordSelectionDefault = require("../common/RecordSelectionDefault");
 var _CategorySelector = _interopRequireDefault(require("./CategorySelector"));
 var _EmojiPickerFooter = _interopRequireDefault(require("./EmojiPickerFooter"));
+var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
 var _EmojiPickerList = require("./EmojiPickerList");
 var _analytics = require("../../util/analytics");
 var _useEmoji2 = require("../../hooks/useEmoji");
@@ -42,6 +43,7 @@ var emojiPickerWidth = 350;
 var emojiPickerMinHeight = 260;
 var heightOffset = 80;
 var emojiPicker = null;
+var uploadOverlay = null;
 var emojiPickerWrapper = null;
 var withPreviewHeight = {
   small: "_4t3ivixp _1tkegx0z",
@@ -522,7 +524,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       role: "dialog",
       "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
       "aria-modal": true,
-      className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+      className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
       style: {
         "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
         "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
@@ -582,7 +584,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+    className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview || uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
     style: {
       "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
@@ -625,7 +627,15 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     selectedEmoji: selectedEmoji,
     uploadEnabled: isUploadSupported && !uploading,
     onOpenUpload: onOpenUpload
-  }));
+  }), uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_2rkofajl _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
+  }, /*#__PURE__*/React.createElement(_EmojiUploadPicker.default, {
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onFileChooserClicked: onFileChooserClicked,
+    errorMessage: formattedErrorMessage,
+    initialUploadName: query
+  })));
 };
 var _default_1 = /*#__PURE__*/(0, _react.memo)(EmojiPickerComponent);
 var _default = exports.default = _default_1;

package/dist/es2019/components/common/EmojiUploadPicker.compiled.css

@@ -1,23 +1,31 @@
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._scffidpf input{border:0}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
 ._16jlkb7n{flex-grow:1}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._1bah1b1v{justify-content:space-around}
 ._1bah1yb4{justify-content:space-between}
+._1bahesu3{justify-content:flex-end}
 ._1e0c1txw{display:flex}
 ._1o9zkb7n{flex-shrink:1}
 ._1rwq1j28 input{background-color:transparent}
 ._1w90azsu._1w90azsu{color:var(--ds-text-subtle,#505258)}
 ._2lx21bp4{flex-direction:column}
 ._34ir1o36 input{outline-width:medium}
+._4cvr1h6o{align-items:center}
 ._4cvresu3{align-items:flex-end}
 ._9bj2glyw input::-ms-clear{display:none}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._coc6glyw input:invalid{box-shadow:none}
 ._gxxuglyw input{outline-style:none}
 ._gy1p12x7{column-gap:var(--ds-space-075,6px)}
 ._i0dl1wug{flex-basis:auto}
 ._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._xmji1r31 input{outline-color:currentColor}

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

@@ -17,13 +17,17 @@ import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
 import { fg } from '@atlaskit/platform-feature-flags';
+import Button from '@atlaskit/button/new';
 const closeEmojiUploadButton = null;
+const uploadAddRowNew = null;
 const emojiUpload = null;
+const emojiUploadNew = null;
 const emojiUploadTop = null;
 const labelStyles = null;
 const uploadChooseFileEmojiName = null;
 const uploadChooseFileMessage = null;
 const uploadChooseFileRow = null;
+const uploadChooseFileRowNew = null;
 export const uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 export const uploadEmojiComponentTestId = 'upload-emoji-component';
 export const cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
@@ -47,7 +51,10 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
     onClick,
     onNameChange,
     onUploadCancelled,
+    onAddEmoji,
     errorMessage,
+    previewImage,
+    uploadStatus,
     intl
   } = props;
   const {
@@ -71,7 +78,60 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
   const emojiPlaceholder = formatMessage(messages.emojiPlaceholder);
   const emojiNameAriaLabel = formatMessage(messages.emojiNameAriaLabel);
   const emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
-  return /*#__PURE__*/React.createElement("div", {
+  const isUploading = uploadStatus === UploadStatus.Uploading;
+  const addEmojiDisabled = !previewImage || !name || isUploading;
+  return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiComponentTestId,
+    className: ax(["_ca0qu2gc _u5f3pxbi _n3tdu2gc _19bvpxbi _1e0c1txw _2lx21bp4 _1bah1b1v"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c8wadc _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "new-emoji-name-input",
+    className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
+  }, previewImage ? /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPreviewTitle) : /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel))), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulppxbi _1e0c1txw _2lx21bp4 _n3tdu2gc"])
+  }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, () => /*#__PURE__*/React.createElement(FileChooser, {
+    label: emojiChooseFileTitle,
+    onChange: onChooseFile,
+    onClick: onClick,
+    accept: "image/png,image/jpeg,image/gif",
+    ariaDescribedBy: fileChooserButtonDescriptionId,
+    previewImage: previewImage,
+    previewAlt: name
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "new-emoji-name-input",
+    className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiNameLabel)), /*#__PURE__*/React.createElement(TextField, {
+    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("div", {
+    id: fileChooserButtonDescriptionId
+  }, errorMessage && /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+    errorStyle: "chooseFile",
+    message: errorMessage
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulpu2gc _1e0c1txw _1bahesu3 _4cvr1h6o _ca0qpxbi _n3td1ejb"])
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onUploadCancelled,
+    appearance: "subtle",
+    isDisabled: isUploading,
+    testId: cancelEmojiUploadPickerTestId
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel)), /*#__PURE__*/React.createElement(Button, {
+    onClick: onAddEmoji,
+    appearance: "primary",
+    isDisabled: addEmojiDisabled,
+    isLoading: isUploading
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addEmojiLabel)))) : /*#__PURE__*/React.createElement("div", {
     "data-testid": uploadEmojiComponentTestId,
     className: ax(["_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bah1b1v"])
   }, /*#__PURE__*/React.createElement("div", {
@@ -79,7 +139,7 @@ const ChooseEmojiFile = /*#__PURE__*/memo(props => {
   }, /*#__PURE__*/React.createElement("label", {
     htmlFor: "new-emoji-name-input",
     className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, fg('platform_emoji_picker_refresh') ? messages.addEmojiLabel : messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
     className: ax(["_1e0c1txw"])
   }, /*#__PURE__*/React.createElement(AkButton, {
     onClick: onUploadCancelled,
@@ -254,7 +314,7 @@ const EmojiUploadPicker = props => {
   const onChooseFileClicked = () => {
     onFileChooserClicked && onFileChooserClicked();
   };
-  const content = name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
+  const content = !fg('platform_emoji_picker_refresh') && name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -267,6 +327,9 @@ const EmojiUploadPicker = props => {
     onClick: onChooseFileClicked,
     onNameChange: onNameChange,
     onUploadCancelled: cancelUpload,
+    onAddEmoji: onAddEmoji,
+    previewImage: previewImage,
+    uploadStatus: uploadStatus,
     errorMessage: chooseEmojiErrorMessage,
     intl: intl
   });

package/dist/es2019/components/common/FileChooser.compiled.css

@@ -0,0 +1,22 @@
+
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqogq9o{border-style:dashed}
+._1h6d1l7x{border-color:var(--ds-border,#0b120e24)}
+._1h6dq98m{border-color:var(--ds-border-selected,#1868db)}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1oec6ebc{transition-duration:.15s}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i7l9q{height:170px}
+._5ral1f51{object-fit:contain}
+._6fl45ucs{transition-timing-function:ease}
+._80omtlke{cursor:pointer}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
+._bfhkufnl{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
+._c71lys9h{max-height:5pc}
+._k8m01rje{transition-property:background-color,border-color}
+._p12f1osq{max-width:100%}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}