@atlaskit/emoji 71.2.1 → 71.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/emoji
 
+## 71.3.0
+
+### Minor Changes
+
+- [`e0513f0b5178e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e0513f0b5178e) -
+  Drag and drop will still work with native file explorer overlap
+
+## 71.2.2
+
+### Patch Changes
+
+- [`deb7c88f3baed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/deb7c88f3baed) -
+  Update unicode emoji sizing so renderer typography can control text emoji scale.
+- Updated dependencies
+
 ## 71.2.1
 
 ### Patch Changes

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

@@ -281,11 +281,11 @@ var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   });
 };
 var UnicodeEmoji = exports.UnicodeEmoji = function UnicodeEmoji(props) {
-  var _props$fitToHeight;
   var emoji = props.emoji,
     selected = props.selected,
     selectOnHover = props.selectOnHover,
     className = props.className,
+    fitToHeight = props.fitToHeight,
     _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
     renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
   if (renderUnicodeEmojiAsImage) {
@@ -293,20 +293,14 @@ var UnicodeEmoji = exports.UnicodeEmoji = function UnicodeEmoji(props) {
   }
   var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
   var emojiText = emoji.representation.unicodeEmoji;
-  var size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : _constants.defaultEmojiHeight;
+  var defaultSize = "".concat(fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : _constants.defaultEmojiHeight, "px");
+  var emojiSize = "var(--emoji-common-unicode-size, ".concat(defaultSize, ")");
   var style = {
-    display: 'inline-block',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "max(1em, ".concat(size, "px)"),
-    width: "max(1em, ".concat(size, "px)"),
-    height: "max(1em, ".concat(size, "px)"),
-    textAlign: 'center',
-    alignContent: 'center',
-    alignSelf: 'center',
+    display: 'inline-flex',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '0',
-    margin: '0',
-    padding: '0'
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
   };
   return (
     /*#__PURE__*/

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

@@ -23,6 +23,10 @@ var dropzoneTestId = exports.dropzoneTestId = 'file-dropzone';
 var hasFilesInTransfer = function hasFilesInTransfer(dataTransfer) {
   return !!(dataTransfer !== null && dataTransfer !== void 0 && dataTransfer.types) && Array.from(dataTransfer.types).includes('Files');
 };
+var isEventWithinElement = function isEventWithinElement(event, element) {
+  var rect = element.getBoundingClientRect();
+  return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+};
 var dropzone = null;
 var dropzoneActive = null;
 var previewImageStyles = null;
@@ -76,10 +80,40 @@ var FileChooser = function FileChooser(props) {
     }
     var suppressNativeFileDrop = function suppressNativeFileDrop(event) {
       if (!hasFilesInTransfer(event.dataTransfer)) {
-        return;
+        return false;
       }
       event.preventDefault();
       event.stopPropagation();
+      return true;
+    };
+    var onWindowFileDrag = function onWindowFileDrag(event) {
+      if (!hasFilesInTransfer(event.dataTransfer)) {
+        return;
+      }
+      var isOverDropzone = isEventWithinElement(event, element);
+      if (isOverDropzone) {
+        suppressNativeFileDrop(event);
+      }
+      if (!isDropDisabled) {
+        setIsDragging(isOverDropzone);
+      }
+    };
+    var onWindowFileDragLeave = function onWindowFileDragLeave(event) {
+      if (!hasFilesInTransfer(event.dataTransfer) || event.relatedTarget) {
+        return;
+      }
+      setIsDragging(false);
+    };
+    var onWindowFileDrop = function onWindowFileDrop(event) {
+      if (!hasFilesInTransfer(event.dataTransfer) || !isEventWithinElement(event, element)) {
+        return;
+      }
+      suppressNativeFileDrop(event);
+      setIsDragging(false);
+      if (!isDropDisabled) {
+        var _event$dataTransfer$f, _event$dataTransfer;
+        handleFileDrop(Array.from((_event$dataTransfer$f = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files) !== null && _event$dataTransfer$f !== void 0 ? _event$dataTransfer$f : []));
+      }
     };
 
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
@@ -88,6 +122,14 @@ var FileChooser = function FileChooser(props) {
     element.addEventListener('dragover', suppressNativeFileDrop);
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
     element.addEventListener('drop', suppressNativeFileDrop);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('dragenter', onWindowFileDrag, true);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('dragover', onWindowFileDrag, true);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('dragleave', onWindowFileDragLeave, true);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('drop', onWindowFileDrop, true);
     var cleanupDropTarget = (0, _adapter.dropTargetForExternal)({
       element: element,
       canDrop: _file.containsFiles,
@@ -114,6 +156,10 @@ var FileChooser = function FileChooser(props) {
       element.removeEventListener('dragenter', suppressNativeFileDrop);
       element.removeEventListener('dragover', suppressNativeFileDrop);
       element.removeEventListener('drop', suppressNativeFileDrop);
+      window.removeEventListener('dragenter', onWindowFileDrag, true);
+      window.removeEventListener('dragover', onWindowFileDrag, true);
+      window.removeEventListener('dragleave', onWindowFileDragLeave, true);
+      window.removeEventListener('drop', onWindowFileDrop, true);
       cleanupDropTarget();
     };
   }, [isDropDisabled, handleFileDrop]);
@@ -135,6 +181,7 @@ var FileChooser = function FileChooser(props) {
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: dropzoneRef,
       "data-testid": dropzoneTestId,
+      "data-dragging": isDragging ? 'true' : undefined,
       role: "region",
       "aria-label": label,
       className: (0, _runtime.ax)(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])

package/dist/cjs/util/analytics/analytics.js

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

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

@@ -256,12 +256,12 @@ const UnicodeEmojiImage = props => {
   });
 };
 export const UnicodeEmoji = props => {
-  var _props$fitToHeight;
   const {
     emoji,
     selected,
     selectOnHover,
     className,
+    fitToHeight,
     renderUnicodeEmojiAsImage = true
   } = props;
   if (renderUnicodeEmojiAsImage) {
@@ -269,20 +269,14 @@ export const UnicodeEmoji = props => {
   }
   const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
   const emojiText = emoji.representation.unicodeEmoji;
-  const size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : defaultEmojiHeight;
+  const defaultSize = `${fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight}px`;
+  const emojiSize = `var(--emoji-common-unicode-size, ${defaultSize})`;
   const style = {
-    display: 'inline-block',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: `max(1em, ${size}px)`,
-    width: `max(1em, ${size}px)`,
-    height: `max(1em, ${size}px)`,
-    textAlign: 'center',
-    alignContent: 'center',
-    alignSelf: 'center',
+    display: 'inline-flex',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '0',
-    margin: '0',
-    padding: '0'
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
   };
   return (
     /*#__PURE__*/

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

@@ -11,6 +11,10 @@ export const chooseFileButtonTestId = 'choose-file-button';
 export const fileUploadInputTestId = 'file-upload';
 export const dropzoneTestId = 'file-dropzone';
 const hasFilesInTransfer = dataTransfer => !!(dataTransfer !== null && dataTransfer !== void 0 && dataTransfer.types) && Array.from(dataTransfer.types).includes('Files');
+const isEventWithinElement = (event, element) => {
+  const rect = element.getBoundingClientRect();
+  return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+};
 const dropzone = null;
 const dropzoneActive = null;
 const previewImageStyles = null;
@@ -61,10 +65,40 @@ const FileChooser = props => {
     }
     const suppressNativeFileDrop = event => {
       if (!hasFilesInTransfer(event.dataTransfer)) {
-        return;
+        return false;
       }
       event.preventDefault();
       event.stopPropagation();
+      return true;
+    };
+    const onWindowFileDrag = event => {
+      if (!hasFilesInTransfer(event.dataTransfer)) {
+        return;
+      }
+      const isOverDropzone = isEventWithinElement(event, element);
+      if (isOverDropzone) {
+        suppressNativeFileDrop(event);
+      }
+      if (!isDropDisabled) {
+        setIsDragging(isOverDropzone);
+      }
+    };
+    const onWindowFileDragLeave = event => {
+      if (!hasFilesInTransfer(event.dataTransfer) || event.relatedTarget) {
+        return;
+      }
+      setIsDragging(false);
+    };
+    const onWindowFileDrop = event => {
+      if (!hasFilesInTransfer(event.dataTransfer) || !isEventWithinElement(event, element)) {
+        return;
+      }
+      suppressNativeFileDrop(event);
+      setIsDragging(false);
+      if (!isDropDisabled) {
+        var _event$dataTransfer$f, _event$dataTransfer;
+        handleFileDrop(Array.from((_event$dataTransfer$f = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files) !== null && _event$dataTransfer$f !== void 0 ? _event$dataTransfer$f : []));
+      }
     };
 
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
@@ -73,6 +107,14 @@ const FileChooser = props => {
     element.addEventListener('dragover', suppressNativeFileDrop);
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
     element.addEventListener('drop', suppressNativeFileDrop);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('dragenter', onWindowFileDrag, true);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('dragover', onWindowFileDrag, true);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('dragleave', onWindowFileDragLeave, true);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('drop', onWindowFileDrop, true);
     const cleanupDropTarget = dropTargetForExternal({
       element,
       canDrop: containsFiles,
@@ -98,6 +140,10 @@ const FileChooser = props => {
       element.removeEventListener('dragenter', suppressNativeFileDrop);
       element.removeEventListener('dragover', suppressNativeFileDrop);
       element.removeEventListener('drop', suppressNativeFileDrop);
+      window.removeEventListener('dragenter', onWindowFileDrag, true);
+      window.removeEventListener('dragover', onWindowFileDrag, true);
+      window.removeEventListener('dragleave', onWindowFileDragLeave, true);
+      window.removeEventListener('drop', onWindowFileDrop, true);
       cleanupDropTarget();
     };
   }, [isDropDisabled, handleFileDrop]);
@@ -119,6 +165,7 @@ const FileChooser = props => {
     return /*#__PURE__*/React.createElement("div", {
       ref: dropzoneRef,
       "data-testid": dropzoneTestId,
+      "data-dragging": isDragging ? 'true' : undefined,
       role: "region",
       "aria-label": label,
       className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])

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

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

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

@@ -272,11 +272,11 @@ var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   });
 };
 export var UnicodeEmoji = function UnicodeEmoji(props) {
-  var _props$fitToHeight;
   var emoji = props.emoji,
     selected = props.selected,
     selectOnHover = props.selectOnHover,
     className = props.className,
+    fitToHeight = props.fitToHeight,
     _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
     renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
   if (renderUnicodeEmojiAsImage) {
@@ -284,20 +284,14 @@ export var UnicodeEmoji = function UnicodeEmoji(props) {
   }
   var classes = "".concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(className ? className : '');
   var emojiText = emoji.representation.unicodeEmoji;
-  var size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : defaultEmojiHeight;
+  var defaultSize = "".concat(fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight, "px");
+  var emojiSize = "var(--emoji-common-unicode-size, ".concat(defaultSize, ")");
   var style = {
-    display: 'inline-block',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "max(1em, ".concat(size, "px)"),
-    width: "max(1em, ".concat(size, "px)"),
-    height: "max(1em, ".concat(size, "px)"),
-    textAlign: 'center',
-    alignContent: 'center',
-    alignSelf: 'center',
+    display: 'inline-flex',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '0',
-    margin: '0',
-    padding: '0'
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
   };
   return (
     /*#__PURE__*/

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

@@ -14,6 +14,10 @@ export var dropzoneTestId = 'file-dropzone';
 var hasFilesInTransfer = function hasFilesInTransfer(dataTransfer) {
   return !!(dataTransfer !== null && dataTransfer !== void 0 && dataTransfer.types) && Array.from(dataTransfer.types).includes('Files');
 };
+var isEventWithinElement = function isEventWithinElement(event, element) {
+  var rect = element.getBoundingClientRect();
+  return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+};
 var dropzone = null;
 var dropzoneActive = null;
 var previewImageStyles = null;
@@ -67,10 +71,40 @@ var FileChooser = function FileChooser(props) {
     }
     var suppressNativeFileDrop = function suppressNativeFileDrop(event) {
       if (!hasFilesInTransfer(event.dataTransfer)) {
-        return;
+        return false;
       }
       event.preventDefault();
       event.stopPropagation();
+      return true;
+    };
+    var onWindowFileDrag = function onWindowFileDrag(event) {
+      if (!hasFilesInTransfer(event.dataTransfer)) {
+        return;
+      }
+      var isOverDropzone = isEventWithinElement(event, element);
+      if (isOverDropzone) {
+        suppressNativeFileDrop(event);
+      }
+      if (!isDropDisabled) {
+        setIsDragging(isOverDropzone);
+      }
+    };
+    var onWindowFileDragLeave = function onWindowFileDragLeave(event) {
+      if (!hasFilesInTransfer(event.dataTransfer) || event.relatedTarget) {
+        return;
+      }
+      setIsDragging(false);
+    };
+    var onWindowFileDrop = function onWindowFileDrop(event) {
+      if (!hasFilesInTransfer(event.dataTransfer) || !isEventWithinElement(event, element)) {
+        return;
+      }
+      suppressNativeFileDrop(event);
+      setIsDragging(false);
+      if (!isDropDisabled) {
+        var _event$dataTransfer$f, _event$dataTransfer;
+        handleFileDrop(Array.from((_event$dataTransfer$f = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files) !== null && _event$dataTransfer$f !== void 0 ? _event$dataTransfer$f : []));
+      }
     };
 
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
@@ -79,6 +113,14 @@ var FileChooser = function FileChooser(props) {
     element.addEventListener('dragover', suppressNativeFileDrop);
     // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
     element.addEventListener('drop', suppressNativeFileDrop);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('dragenter', onWindowFileDrag, true);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('dragover', onWindowFileDrag, true);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('dragleave', onWindowFileDragLeave, true);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    window.addEventListener('drop', onWindowFileDrop, true);
     var cleanupDropTarget = dropTargetForExternal({
       element: element,
       canDrop: containsFiles,
@@ -105,6 +147,10 @@ var FileChooser = function FileChooser(props) {
       element.removeEventListener('dragenter', suppressNativeFileDrop);
       element.removeEventListener('dragover', suppressNativeFileDrop);
       element.removeEventListener('drop', suppressNativeFileDrop);
+      window.removeEventListener('dragenter', onWindowFileDrag, true);
+      window.removeEventListener('dragover', onWindowFileDrag, true);
+      window.removeEventListener('dragleave', onWindowFileDragLeave, true);
+      window.removeEventListener('drop', onWindowFileDrop, true);
       cleanupDropTarget();
     };
   }, [isDropDisabled, handleFileDrop]);
@@ -126,6 +172,7 @@ var FileChooser = function FileChooser(props) {
     return /*#__PURE__*/React.createElement("div", {
       ref: dropzoneRef,
       "data-testid": dropzoneTestId,
+      "data-dragging": isDragging ? 'true' : undefined,
       role: "region",
       "aria-label": label,
       className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])

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: "71.2.0"
+      packageVersion: "71.2.2"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.2.1",
+	"version": "71.3.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/afm-i18n-platform-elements-emoji": "2.158.0",
 		"@atlaskit/analytics-next": "^12.0.0",
 		"@atlaskit/browser-apis": "^1.0.0",
-		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/button": "^24.1.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/form": "^16.0.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/radio": "^9.0.0",
 		"@atlaskit/spinner": "^20.0.0",
 		"@atlaskit/textfield": "^9.0.0",
-		"@atlaskit/tmp-editor-statsig": "^108.0.0",
+		"@atlaskit/tmp-editor-statsig": "^108.4.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
 		"@atlaskit/ufo": "^1.0.0",