@atlaskit/emoji 70.5.2 → 70.6.1

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

@@ -1,18 +1,34 @@
-import React, { useRef } from 'react';
+/* FileChooser.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./FileChooser.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Button from '@atlaskit/button/new';
+import UploadIcon from '@atlaskit/icon/core/upload';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
+import { containsFiles, getFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
 export const chooseFileButtonTestId = 'choose-file-button';
 export const fileUploadInputTestId = 'file-upload';
+export const dropzoneTestId = 'file-dropzone';
+const dropzone = null;
+const dropzoneActive = null;
+const previewImageStyles = null;
 const FileChooser = props => {
   const {
     accept,
     ariaDescribedBy,
     isDisabled,
+    isDropDisabled,
     label,
     onChange,
-    onClick
+    onClick,
+    previewImage,
+    previewAlt
   } = props;
   const filePickerRef = useRef(null);
   const fileButtonRef = useRef(null);
+  const dropzoneRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
   const handleOnChooseFile = () => {
     var _fileButtonRef$curren;
     if (!filePickerRef.current) {
@@ -24,13 +40,47 @@ const FileChooser = props => {
     filePickerRef.current.click();
     (_fileButtonRef$curren = fileButtonRef.current) === null || _fileButtonRef$curren === void 0 ? void 0 : _fileButtonRef$curren.focus();
   };
-  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleOnChooseFile,
-    isDisabled: isDisabled,
-    "aria-describedby": ariaDescribedBy,
-    testId: chooseFileButtonTestId,
-    ref: fileButtonRef
-  }, label), /*#__PURE__*/React.createElement("input", {
+  const handleFileDrop = useCallback(files => {
+    if (!onChange || !files.length) {
+      return;
+    }
+    const dataTransfer = new DataTransfer();
+    files.forEach(file => dataTransfer.items.add(file));
+    const syntheticEvent = {
+      target: {
+        files: dataTransfer.files
+      }
+    };
+    onChange(syntheticEvent);
+  }, [onChange]);
+  useEffect(() => {
+    const element = dropzoneRef.current;
+    if (!element || !fg('platform_emoji_picker_refresh')) {
+      return;
+    }
+    return dropTargetForExternal({
+      element,
+      canDrop: containsFiles,
+      onDragEnter: () => {
+        if (!isDropDisabled) {
+          setIsDragging(true);
+        }
+      },
+      onDragLeave: () => setIsDragging(false),
+      onDrop: ({
+        source
+      }) => {
+        setIsDragging(false);
+        if (!isDropDisabled) {
+          const files = getFiles({
+            source
+          });
+          handleFileDrop(files);
+        }
+      }
+    });
+  }, [isDropDisabled, handleFileDrop]);
+  const hiddenInput = /*#__PURE__*/React.createElement("input", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "emojiUploadFileInput",
     ref: filePickerRef,
@@ -43,6 +93,34 @@ const FileChooser = props => {
       display: 'none'
     },
     "data-testid": fileUploadInputTestId
-  }));
+  });
+  if (fg('platform_emoji_picker_refresh')) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: dropzoneRef,
+      "data-testid": dropzoneTestId,
+      role: "region",
+      "aria-label": label,
+      className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec6ebc _6fl45ucs", isDragging && "_1h6dq98m _bfhkufnl"])
+    }, previewImage ? /*#__PURE__*/React.createElement("img", {
+      src: previewImage,
+      alt: previewAlt,
+      className: ax(["_c71lys9h _p12f1osq _5ral1f51"])
+    }) : /*#__PURE__*/React.createElement(Button, {
+      onClick: handleOnChooseFile,
+      isDisabled: isDisabled,
+      appearance: "subtle",
+      iconBefore: UploadIcon,
+      "aria-describedby": ariaDescribedBy,
+      testId: chooseFileButtonTestId,
+      ref: fileButtonRef
+    }, label), hiddenInput);
+  }
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleOnChooseFile,
+    isDisabled: isDisabled,
+    "aria-describedby": ariaDescribedBy,
+    testId: chooseFileButtonTestId,
+    ref: fileButtonRef
+  }, label), hiddenInput);
 };
 export default FileChooser;

package/dist/es2019/components/i18n.js

@@ -40,6 +40,11 @@ export const messages = 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/es2019/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}
 ._1bsb1edt{width:350px}
 ._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}
 ._1ul91edt{min-width:350px}
+._1xi2idpf{right:0}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1ckg{height:455px}
 ._4t3i2300{height:429px}
@@ -20,6 +25,9 @@
 ._4t3iixjv{height:375px}
 ._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/es2019/components/picker/EmojiPickerComponent.js

@@ -16,6 +16,7 @@ import { uploadEmoji } from '../common/UploadEmoji';
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
+import EmojiUploadPicker from '../common/EmojiUploadPicker';
 import { EmojiPickerVirtualListInternal as EmojiPickerList } from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
 import { useEmoji } from '../../hooks/useEmoji';
@@ -28,6 +29,7 @@ const emojiPickerWidth = 350;
 const emojiPickerMinHeight = 260;
 const heightOffset = 80;
 const emojiPicker = null;
+const uploadOverlay = null;
 const emojiPickerWrapper = null;
 const withPreviewHeight = {
   small: "_4t3ivixp _1tkegx0z",
@@ -460,7 +462,7 @@ const EmojiPickerComponent = ({
       role: "dialog",
       "aria-label": formatMessage(messages.emojiPickerTitle),
       "aria-modal": true,
-      className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]])
+      className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]])
     }, /*#__PURE__*/React.createElement("div", {
       role: "presentation",
       onKeyPress: suppressKeyPress,
@@ -516,7 +518,7 @@ const EmojiPickerComponent = ({
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]])
+    className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", showPreview || uploading && fg('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]])
   }, /*#__PURE__*/React.createElement(CategorySelector, {
     activeCategoryId: activeCategory,
     dynamicCategories: dynamicCategories,
@@ -555,7 +557,15 @@ const EmojiPickerComponent = ({
     selectedEmoji: selectedEmoji,
     uploadEnabled: isUploadSupported && !uploading,
     onOpenUpload: onOpenUpload
-  }));
+  }), uploading && fg('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rkofajl _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
+  }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onFileChooserClicked: onFileChooserClicked,
+    errorMessage: formattedErrorMessage,
+    initialUploadName: query
+  })));
 };
 const _default_1 = /*#__PURE__*/memo(EmojiPickerComponent);
 export default _default_1;

package/dist/es2019/util/analytics/analytics.js

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "70.5.1",
+    packageVersion: "70.6.0",
     ...attributes
   }
 });

package/dist/esm/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/esm/components/common/EmojiUploadPicker.js

@@ -20,13 +20,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';
 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;
 export var uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 export var uploadEmojiComponentTestId = 'upload-emoji-component';
 export var cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
@@ -50,7 +54,10 @@ var ChooseEmojiFile = /*#__PURE__*/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;
@@ -71,7 +78,62 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
   var emojiPlaceholder = formatMessage(messages.emojiPlaceholder);
   var emojiNameAriaLabel = formatMessage(messages.emojiNameAriaLabel);
   var emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
-  return /*#__PURE__*/React.createElement("div", {
+  var isUploading = uploadStatus === UploadStatus.Uploading;
+  var 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, function () {
+    return /*#__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 +141,7 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (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,
@@ -288,7 +350,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
   var onChooseFileClicked = function onChooseFileClicked() {
     onFileChooserClicked && onFileChooserClicked();
   };
-  var content = name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
+  var content = !fg('platform_emoji_picker_refresh') && name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
     errorMessage: errorMessage,
     name: name,
     onAddEmoji: onAddEmoji,
@@ -301,6 +363,9 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     onClick: onChooseFileClicked,
     onNameChange: onNameChange,
     onUploadCancelled: cancelUpload,
+    onAddEmoji: onAddEmoji,
+    previewImage: previewImage,
+    uploadStatus: uploadStatus,
     errorMessage: chooseEmojiErrorMessage,
     intl: intl
   });

package/dist/esm/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/esm/components/common/FileChooser.js

@@ -1,16 +1,36 @@
-import React, { useRef } from 'react';
+/* FileChooser.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./FileChooser.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Button from '@atlaskit/button/new';
+import UploadIcon from '@atlaskit/icon/core/upload';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
+import { containsFiles, getFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
 export var chooseFileButtonTestId = 'choose-file-button';
 export var fileUploadInputTestId = 'file-upload';
+export var 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 = useRef(null);
   var fileButtonRef = useRef(null);
+  var dropzoneRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
   var handleOnChooseFile = function handleOnChooseFile() {
     var _fileButtonRef$curren;
     if (!filePickerRef.current) {
@@ -22,13 +42,50 @@ var FileChooser = function FileChooser(props) {
     filePickerRef.current.click();
     (_fileButtonRef$curren = fileButtonRef.current) === null || _fileButtonRef$curren === void 0 || _fileButtonRef$curren.focus();
   };
-  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleOnChooseFile,
-    isDisabled: isDisabled,
-    "aria-describedby": ariaDescribedBy,
-    testId: chooseFileButtonTestId,
-    ref: fileButtonRef
-  }, label), /*#__PURE__*/React.createElement("input", {
+  var handleFileDrop = 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]);
+  useEffect(function () {
+    var element = dropzoneRef.current;
+    if (!element || !fg('platform_emoji_picker_refresh')) {
+      return;
+    }
+    return dropTargetForExternal({
+      element: element,
+      canDrop: 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 = getFiles({
+            source: source
+          });
+          handleFileDrop(files);
+        }
+      }
+    });
+  }, [isDropDisabled, handleFileDrop]);
+  var hiddenInput = /*#__PURE__*/React.createElement("input", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "emojiUploadFileInput",
     ref: filePickerRef,
@@ -41,6 +98,34 @@ var FileChooser = function FileChooser(props) {
       display: 'none'
     },
     "data-testid": fileUploadInputTestId
-  }));
+  });
+  if (fg('platform_emoji_picker_refresh')) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: dropzoneRef,
+      "data-testid": dropzoneTestId,
+      role: "region",
+      "aria-label": label,
+      className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec6ebc _6fl45ucs", isDragging && "_1h6dq98m _bfhkufnl"])
+    }, previewImage ? /*#__PURE__*/React.createElement("img", {
+      src: previewImage,
+      alt: previewAlt,
+      className: ax(["_c71lys9h _p12f1osq _5ral1f51"])
+    }) : /*#__PURE__*/React.createElement(Button, {
+      onClick: handleOnChooseFile,
+      isDisabled: isDisabled,
+      appearance: "subtle",
+      iconBefore: UploadIcon,
+      "aria-describedby": ariaDescribedBy,
+      testId: chooseFileButtonTestId,
+      ref: fileButtonRef
+    }, label), hiddenInput);
+  }
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleOnChooseFile,
+    isDisabled: isDisabled,
+    "aria-describedby": ariaDescribedBy,
+    testId: chooseFileButtonTestId,
+    ref: fileButtonRef
+  }, label), hiddenInput);
 };
 export default FileChooser;

package/dist/esm/components/i18n.js

@@ -40,6 +40,11 @@ export var messages = 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/esm/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/esm/components/picker/EmojiPickerComponent.js

@@ -21,6 +21,7 @@ import { uploadEmoji } from '../common/UploadEmoji';
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
+import EmojiUploadPicker from '../common/EmojiUploadPicker';
 import { EmojiPickerVirtualListInternal as EmojiPickerList } from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
 import { useEmoji } from '../../hooks/useEmoji';
@@ -33,6 +34,7 @@ var emojiPickerWidth = 350;
 var emojiPickerMinHeight = 260;
 var heightOffset = 80;
 var emojiPicker = null;
+var uploadOverlay = null;
 var emojiPickerWrapper = null;
 var withPreviewHeight = {
   small: "_4t3ivixp _1tkegx0z",
@@ -513,7 +515,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       role: "dialog",
       "aria-label": formatMessage(messages.emojiPickerTitle),
       "aria-modal": true,
-      className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+      className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
       style: {
         "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
         "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
@@ -573,7 +575,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+    className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview || uploading && fg('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
     style: {
       "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
@@ -616,7 +618,15 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     selectedEmoji: selectedEmoji,
     uploadEnabled: isUploadSupported && !uploading,
     onOpenUpload: onOpenUpload
-  }));
+  }), uploading && fg('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rkofajl _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
+  }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onFileChooserClicked: onFileChooserClicked,
+    errorMessage: formattedErrorMessage,
+    initialUploadName: query
+  })));
 };
 var _default_1 = /*#__PURE__*/memo(EmojiPickerComponent);
 export default _default_1;

package/dist/esm/util/analytics/analytics.js

@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "70.5.1"
+      packageVersion: "70.6.0"
     }, attributes)
   };
 };