@atlaskit/emoji 70.9.1 → 70.10.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/emoji
 
+## 70.10.0
+
+### Minor Changes
+
+- [`80d8df1d8b42a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/80d8df1d8b42a) -
+  Autofix: add explicit package exports (barrel removal)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 70.9.2
+
+### Patch Changes
+
+- [`272f9e5d477db`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/272f9e5d477db) -
+  Fix accessibility: render emoji picker category headings (e.g. "Search results") as semantic
+  `<h2>` elements instead of `<div>` elements, so screen reader users can navigate and understand
+  the picker's content structure (WCAG 1.3.1, 2.4.6).
+- [`50bf488a08bf3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/50bf488a08bf3) -
+  Drag and drop for emoji upload will disable drag and drop on page content
+- Updated dependencies
+
 ## 70.9.1
 
 ### Patch Changes

package/analytics/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/analytics",
+  "main": "../dist/cjs/util/analytics/analytics.js",
+  "module": "../dist/esm/util/analytics/analytics.js",
+  "module:es2019": "../dist/es2019/util/analytics/analytics.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/util/analytics/analytics.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/util/analytics/analytics.d.ts"
+      ]
+    }
+  }
+}

package/categories/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/categories",
+  "main": "../dist/cjs/components/picker/categories.js",
+  "module": "../dist/esm/components/picker/categories.js",
+  "module:es2019": "../dist/es2019/components/picker/categories.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/components/picker/categories.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/components/picker/categories.d.ts"
+      ]
+    }
+  }
+}

package/constants/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/constants",
+  "main": "../dist/cjs/util/constants.js",
+  "module": "../dist/esm/util/constants.js",
+  "module:es2019": "../dist/es2019/util/constants.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/util/constants.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/util/constants.d.ts"
+      ]
+    }
+  }
+}

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

@@ -1,9 +1,13 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18u0idpf{margin-left:0}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pkidpf{margin-top:0}
 ._1p1d1qyh{text-transform:lowercase}
 ._299mangw:first-letter{text-transform:uppercase}
+._2hwxidpf{margin-right:0}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._otyridpf{margin-bottom:0}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._vchhusvi{box-sizing:border-box}

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

@@ -1,6 +1,7 @@
 /* EmojiPickerCategoryHeading.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,6 +10,8 @@ exports.default = exports.RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID = void 0;
 require("./EmojiPickerCategoryHeading.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _reactIntl = require("react-intl");
 var _typeHelpers = require("../../util/type-helpers");
 var _i18n = require("../i18n");
@@ -31,8 +34,13 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
     className: className,
     "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
     role: "rowheader"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_11c8fhey _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
+  }, (0, _platformFeatureFlags.fg)('platform_emoji_a11y_category_heading') ? /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_11c8fhey _19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
+  }, /*#__PURE__*/React.createElement(_heading.default, {
+    size: "xsmall",
+    as: "h2"
+  }, (0, _typeHelpers.isMessagesKey)(title) ? /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages[title]) : title)) : /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_11c8fhey _19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
   }, (0, _typeHelpers.isMessagesKey)(title) ? /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages[title]) : title));
 };
 var _default = exports.default = EmojiPickerCategoryHeading;

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

@@ -18,6 +18,10 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _browserApis = require("@atlaskit/browser-apis");
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/external/adapter");
+var _file = require("@atlaskit/pragmatic-drag-and-drop/external/file");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
 var _reactDom = require("react-dom");
 var _reactIntl = require("react-intl");
 var _EmojiRepository = require("../../api/EmojiRepository");
@@ -134,6 +138,13 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var isMounting = (0, _react.useRef)(true);
   var previousEmojiProvider = (0, _react.useRef)(emojiProvider);
   var isProgrammaticScroll = (0, _react.useRef)(false);
+  var pickerRef = (0, _react.useRef)(null);
+  var setPickerRef = (0, _react.useCallback)(function (el) {
+    if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      pickerRef.current = el;
+    }
+    onPickerRef === null || onPickerRef === void 0 || onPickerRef(el);
+  }, [onPickerRef]);
   var currentUser = (0, _react.useMemo)(function () {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
@@ -387,6 +398,40 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       scrollToTopOfList();
     }
   }, [query, filteredEmojis, selectedTone, updateEmojis, scrollToTopOfList]);
+
+  // When the upload screen is open, intercept any file drag at the window level so it
+  // cannot reach underlying page drop handlers (e.g. the Confluence editor).
+  (0, _react.useEffect)(function () {
+    var _getDocument2;
+    if (!uploading || !(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      return;
+    }
+    var body = (_getDocument2 = (0, _browserApis.getDocument)()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.body;
+    if (!body) {
+      return;
+    }
+
+    // Register a full-page drop target on document.body and a monitor using
+    // pragmatic-drag-and-drop so that file drops are intercepted before reaching
+    // any underlying native DOM handlers (e.g. the Confluence editor).
+    // The FileChooser's own drop target (registered on pickerRef) takes priority
+    // over the body target for drops inside the picker.
+    var cleanup = (0, _combine.combine)((0, _adapter.dropTargetForExternal)({
+      element: body,
+      canDrop: _file.containsFiles
+    }), (0, _adapter.monitorForExternal)({
+      onDragStart: function onDragStart() {
+        return _preventUnhandled.preventUnhandled.start();
+      },
+      onDrop: function onDrop() {
+        return _preventUnhandled.preventUnhandled.stop();
+      }
+    }));
+    return function () {
+      _preventUnhandled.preventUnhandled.stop();
+      cleanup();
+    };
+  }, [uploading]);
   var onOpenUpload = (0, _react.useCallback)(function () {
     // Prime upload token so it's ready when the user adds
     if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
@@ -568,7 +613,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var showPreview = (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? !uploading : selectedEmoji && !uploading;
   if ((0, _platformFeatureFlags.fg)('platform_no_noninteractive_emojis_reactions')) {
     return /*#__PURE__*/React.createElement("div", {
-      ref: onPickerRef,
+      ref: setPickerRef,
       "data-emoji-picker-container": true,
       role: "dialog",
       "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
@@ -625,7 +670,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     })));
   }
   return /*#__PURE__*/React.createElement("div", {
-    ref: onPickerRef,
+    ref: setPickerRef,
     "data-emoji-picker-container": true,
     role: "dialog",
     "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),

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: "70.9.0"
+      packageVersion: "0.0.0-development"
     }, attributes)
   };
 };

package/dist/es2019/components/picker/EmojiPickerCategoryHeading.compiled.css

@@ -1,9 +1,13 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18u0idpf{margin-left:0}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pkidpf{margin-top:0}
 ._1p1d1qyh{text-transform:lowercase}
 ._299mangw:first-letter{text-transform:uppercase}
+._2hwxidpf{margin-right:0}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._otyridpf{margin-bottom:0}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._vchhusvi{box-sizing:border-box}

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

@@ -2,6 +2,8 @@
 import "./EmojiPickerCategoryHeading.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import Heading from '@atlaskit/heading';
 import { FormattedMessage } from 'react-intl';
 import { isMessagesKey } from '../../util/type-helpers';
 import { messages } from '../i18n';
@@ -23,7 +25,12 @@ const EmojiPickerCategoryHeading = ({
   className: className,
   "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
   role: "rowheader"
-}, /*#__PURE__*/React.createElement("div", {
-  className: ax(["_11c8fhey _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
+}, fg('platform_emoji_a11y_category_heading') ? /*#__PURE__*/React.createElement("div", {
+  className: ax(["_11c8fhey _19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
+}, /*#__PURE__*/React.createElement(Heading, {
+  size: "xsmall",
+  as: "h2"
+}, isMessagesKey(title) ? /*#__PURE__*/React.createElement(FormattedMessage, messages[title]) : title)) : /*#__PURE__*/React.createElement("div", {
+  className: ax(["_11c8fhey _19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
 }, isMessagesKey(title) ? /*#__PURE__*/React.createElement(FormattedMessage, messages[title]) : title));
 export default EmojiPickerCategoryHeading;

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

@@ -5,6 +5,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getDocument } from '@atlaskit/browser-apis';
+import { dropTargetForExternal, monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
+import { containsFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -76,6 +80,13 @@ const EmojiPickerComponent = ({
   const isMounting = useRef(true);
   const previousEmojiProvider = useRef(emojiProvider);
   const isProgrammaticScroll = useRef(false);
+  const pickerRef = useRef(null);
+  const setPickerRef = useCallback(el => {
+    if (fg('platform_emoji_picker_refresh')) {
+      pickerRef.current = el;
+    }
+    onPickerRef === null || onPickerRef === void 0 ? void 0 : onPickerRef(el);
+  }, [onPickerRef]);
   const currentUser = useMemo(() => {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
@@ -325,6 +336,36 @@ const EmojiPickerComponent = ({
       scrollToTopOfList();
     }
   }, [query, filteredEmojis, selectedTone, updateEmojis, scrollToTopOfList]);
+
+  // When the upload screen is open, intercept any file drag at the window level so it
+  // cannot reach underlying page drop handlers (e.g. the Confluence editor).
+  useEffect(() => {
+    var _getDocument2;
+    if (!uploading || !fg('platform_emoji_picker_refresh')) {
+      return;
+    }
+    const body = (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.body;
+    if (!body) {
+      return;
+    }
+
+    // Register a full-page drop target on document.body and a monitor using
+    // pragmatic-drag-and-drop so that file drops are intercepted before reaching
+    // any underlying native DOM handlers (e.g. the Confluence editor).
+    // The FileChooser's own drop target (registered on pickerRef) takes priority
+    // over the body target for drops inside the picker.
+    const cleanup = combine(dropTargetForExternal({
+      element: body,
+      canDrop: containsFiles
+    }), monitorForExternal({
+      onDragStart: () => preventUnhandled.start(),
+      onDrop: () => preventUnhandled.stop()
+    }));
+    return () => {
+      preventUnhandled.stop();
+      cleanup();
+    };
+  }, [uploading]);
   const onOpenUpload = useCallback(() => {
     // Prime upload token so it's ready when the user adds
     if (supportsUploadFeature(emojiProvider)) {
@@ -482,7 +523,7 @@ const EmojiPickerComponent = ({
   const showPreview = fg('platform_emoji_picker_refresh') ? !uploading : selectedEmoji && !uploading;
   if (fg('platform_no_noninteractive_emojis_reactions')) {
     return /*#__PURE__*/React.createElement("div", {
-      ref: onPickerRef,
+      ref: setPickerRef,
       "data-emoji-picker-container": true,
       role: "dialog",
       "aria-label": formatMessage(messages.emojiPickerTitle),
@@ -535,7 +576,7 @@ const EmojiPickerComponent = ({
     })));
   }
   return /*#__PURE__*/React.createElement("div", {
-    ref: onPickerRef,
+    ref: setPickerRef,
     "data-emoji-picker-container": true,
     role: "dialog",
     "aria-label": formatMessage(messages.emojiPickerTitle),

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.9.0",
+    packageVersion: "0.0.0-development",
     ...attributes
   }
 });

package/dist/esm/components/picker/EmojiPickerCategoryHeading.compiled.css

@@ -1,9 +1,13 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18u0idpf{margin-left:0}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pkidpf{margin-top:0}
 ._1p1d1qyh{text-transform:lowercase}
 ._299mangw:first-letter{text-transform:uppercase}
+._2hwxidpf{margin-right:0}
 ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
 ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._otyridpf{margin-bottom:0}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._vchhusvi{box-sizing:border-box}

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

@@ -2,6 +2,8 @@
 import "./EmojiPickerCategoryHeading.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import Heading from '@atlaskit/heading';
 import { FormattedMessage } from 'react-intl';
 import { isMessagesKey } from '../../util/type-helpers';
 import { messages } from '../i18n';
@@ -23,8 +25,13 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
     className: className,
     "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
     role: "rowheader"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ax(["_11c8fhey _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
+  }, fg('platform_emoji_a11y_category_heading') ? /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c8fhey _19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall",
+    as: "h2"
+  }, isMessagesKey(title) ? /*#__PURE__*/React.createElement(FormattedMessage, messages[title]) : title)) : /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c8fhey _19pkidpf _2hwxidpf _otyridpf _18u0idpf _vchhusvi _syazi7uo _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
   }, isMessagesKey(title) ? /*#__PURE__*/React.createElement(FormattedMessage, messages[title]) : title));
 };
 export default EmojiPickerCategoryHeading;

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

@@ -12,6 +12,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getDocument } from '@atlaskit/browser-apis';
+import { dropTargetForExternal, monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
+import { containsFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -125,6 +129,13 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var isMounting = useRef(true);
   var previousEmojiProvider = useRef(emojiProvider);
   var isProgrammaticScroll = useRef(false);
+  var pickerRef = useRef(null);
+  var setPickerRef = useCallback(function (el) {
+    if (fg('platform_emoji_picker_refresh')) {
+      pickerRef.current = el;
+    }
+    onPickerRef === null || onPickerRef === void 0 || onPickerRef(el);
+  }, [onPickerRef]);
   var currentUser = useMemo(function () {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
@@ -378,6 +389,40 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       scrollToTopOfList();
     }
   }, [query, filteredEmojis, selectedTone, updateEmojis, scrollToTopOfList]);
+
+  // When the upload screen is open, intercept any file drag at the window level so it
+  // cannot reach underlying page drop handlers (e.g. the Confluence editor).
+  useEffect(function () {
+    var _getDocument2;
+    if (!uploading || !fg('platform_emoji_picker_refresh')) {
+      return;
+    }
+    var body = (_getDocument2 = getDocument()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.body;
+    if (!body) {
+      return;
+    }
+
+    // Register a full-page drop target on document.body and a monitor using
+    // pragmatic-drag-and-drop so that file drops are intercepted before reaching
+    // any underlying native DOM handlers (e.g. the Confluence editor).
+    // The FileChooser's own drop target (registered on pickerRef) takes priority
+    // over the body target for drops inside the picker.
+    var cleanup = combine(dropTargetForExternal({
+      element: body,
+      canDrop: containsFiles
+    }), monitorForExternal({
+      onDragStart: function onDragStart() {
+        return preventUnhandled.start();
+      },
+      onDrop: function onDrop() {
+        return preventUnhandled.stop();
+      }
+    }));
+    return function () {
+      preventUnhandled.stop();
+      cleanup();
+    };
+  }, [uploading]);
   var onOpenUpload = useCallback(function () {
     // Prime upload token so it's ready when the user adds
     if (supportsUploadFeature(emojiProvider)) {
@@ -559,7 +604,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var showPreview = fg('platform_emoji_picker_refresh') ? !uploading : selectedEmoji && !uploading;
   if (fg('platform_no_noninteractive_emojis_reactions')) {
     return /*#__PURE__*/React.createElement("div", {
-      ref: onPickerRef,
+      ref: setPickerRef,
       "data-emoji-picker-container": true,
       role: "dialog",
       "aria-label": formatMessage(messages.emojiPickerTitle),
@@ -616,7 +661,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     })));
   }
   return /*#__PURE__*/React.createElement("div", {
-    ref: onPickerRef,
+    ref: setPickerRef,
     "data-emoji-picker-container": true,
     role: "dialog",
     "aria-label": formatMessage(messages.emojiPickerTitle),

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.9.0"
+      packageVersion: "0.0.0-development"
     }, attributes)
   };
 };

package/emoji/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji",
+  "main": "../dist/cjs/components/common/Emoji.js",
+  "module": "../dist/esm/components/common/Emoji.js",
+  "module:es2019": "../dist/es2019/components/common/Emoji.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/components/common/Emoji.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/components/common/Emoji.d.ts"
+      ]
+    }
+  }
+}

package/emoji-common-provider/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-common-provider",
+  "main": "../dist/cjs/context/EmojiCommonProvider.js",
+  "module": "../dist/esm/context/EmojiCommonProvider.js",
+  "module:es2019": "../dist/es2019/context/EmojiCommonProvider.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/context/EmojiCommonProvider.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/context/EmojiCommonProvider.d.ts"
+      ]
+    }
+  }
+}

package/emoji-context-provider/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-context-provider",
+  "main": "../dist/cjs/context/EmojiContextProvider.js",
+  "module": "../dist/esm/context/EmojiContextProvider.js",
+  "module:es2019": "../dist/es2019/context/EmojiContextProvider.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/context/EmojiContextProvider.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/context/EmojiContextProvider.d.ts"
+      ]
+    }
+  }
+}

package/emoji-loader/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-loader",
+  "main": "../dist/cjs/api/EmojiLoader.js",
+  "module": "../dist/esm/api/EmojiLoader.js",
+  "module:es2019": "../dist/es2019/api/EmojiLoader.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/api/EmojiLoader.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/api/EmojiLoader.d.ts"
+      ]
+    }
+  }
+}

package/emoji-picker/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-picker",
+  "main": "../dist/cjs/components/picker/EmojiPicker.js",
+  "module": "../dist/esm/components/picker/EmojiPicker.js",
+  "module:es2019": "../dist/es2019/components/picker/EmojiPicker.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/components/picker/EmojiPicker.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/components/picker/EmojiPicker.d.ts"
+      ]
+    }
+  }
+}

package/emoji-placeholder/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-placeholder",
+  "main": "../dist/cjs/components/common/EmojiPlaceholder.js",
+  "module": "../dist/esm/components/common/EmojiPlaceholder.js",
+  "module:es2019": "../dist/es2019/components/common/EmojiPlaceholder.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/components/common/EmojiPlaceholder.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/components/common/EmojiPlaceholder.d.ts"
+      ]
+    }
+  }
+}

package/emoji-repository/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-repository",
+  "main": "../dist/cjs/api/EmojiRepository.js",
+  "module": "../dist/esm/api/EmojiRepository.js",
+  "module:es2019": "../dist/es2019/api/EmojiRepository.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/api/EmojiRepository.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/api/EmojiRepository.d.ts"
+      ]
+    }
+  }
+}

package/emoji-resource/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-resource",
+  "main": "../dist/cjs/api/EmojiResource.js",
+  "module": "../dist/esm/api/EmojiResource.js",
+  "module:es2019": "../dist/es2019/api/EmojiResource.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/api/EmojiResource.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/api/EmojiResource.d.ts"
+      ]
+    }
+  }
+}

package/emoji-type-ahead/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-type-ahead",
+  "main": "../dist/cjs/components/typeahead/EmojiTypeAhead.js",
+  "module": "../dist/esm/components/typeahead/EmojiTypeAhead.js",
+  "module:es2019": "../dist/es2019/components/typeahead/EmojiTypeAhead.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/components/typeahead/EmojiTypeAhead.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/components/typeahead/EmojiTypeAhead.d.ts"
+      ]
+    }
+  }
+}

package/emoji-type-ahead-item/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-type-ahead-item",
+  "main": "../dist/cjs/components/typeahead/EmojiTypeAheadItem.js",
+  "module": "../dist/esm/components/typeahead/EmojiTypeAheadItem.js",
+  "module:es2019": "../dist/es2019/components/typeahead/EmojiTypeAheadItem.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/components/typeahead/EmojiTypeAheadItem.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/components/typeahead/EmojiTypeAheadItem.d.ts"
+      ]
+    }
+  }
+}

package/emoji-type-ahead-list/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-type-ahead-list",
+  "main": "../dist/cjs/components/typeahead/EmojiTypeAheadList.js",
+  "module": "../dist/esm/components/typeahead/EmojiTypeAheadList.js",
+  "module:es2019": "../dist/es2019/components/typeahead/EmojiTypeAheadList.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/components/typeahead/EmojiTypeAheadList.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/components/typeahead/EmojiTypeAheadList.d.ts"
+      ]
+    }
+  }
+}

package/emoji-uploader/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-uploader",
+  "main": "../dist/cjs/components/uploader/EmojiUploader.js",
+  "module": "../dist/esm/components/uploader/EmojiUploader.js",
+  "module:es2019": "../dist/es2019/components/uploader/EmojiUploader.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/components/uploader/EmojiUploader.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/components/uploader/EmojiUploader.d.ts"
+      ]
+    }
+  }
+}

package/emoji-utils/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/emoji-utils",
+  "main": "../dist/cjs/api/EmojiUtils.js",
+  "module": "../dist/esm/api/EmojiUtils.js",
+  "module:es2019": "../dist/es2019/api/EmojiUtils.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/api/EmojiUtils.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/api/EmojiUtils.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.9.1",
+	"version": "70.10.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-elements-emoji": "2.7.0",
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/browser-apis": "^0.0.1",
+		"@atlaskit/browser-apis": "^0.0.2",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/form": "^15.5.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^81.1.0",
+		"@atlaskit/tmp-editor-statsig": "^81.3.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^22.2.0",
 		"@atlaskit/ufo": "^0.5.0",
@@ -148,6 +148,9 @@
 		},
 		"use-elements-stargate-emoji-path": {
 			"type": "boolean"
+		},
+		"platform_emoji_a11y_category_heading": {
+			"type": "boolean"
 		}
 	},
 	"scripts": {

package/resourced-emoji/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/resourced-emoji",
+  "main": "../dist/cjs/components/common/ResourcedEmoji.js",
+  "module": "../dist/esm/components/common/ResourcedEmoji.js",
+  "module:es2019": "../dist/es2019/components/common/ResourcedEmoji.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/components/common/ResourcedEmoji.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/components/common/ResourcedEmoji.d.ts"
+      ]
+    }
+  }
+}

package/sampling-ufo/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/sampling-ufo",
+  "main": "../dist/cjs/util/analytics/samplingUfo.js",
+  "module": "../dist/esm/util/analytics/samplingUfo.js",
+  "module:es2019": "../dist/es2019/util/analytics/samplingUfo.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/util/analytics/samplingUfo.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/util/analytics/samplingUfo.d.ts"
+      ]
+    }
+  }
+}

package/styles/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/styles",
+  "main": "../dist/cjs/components/common/styles.js",
+  "module": "../dist/esm/components/common/styles.js",
+  "module:es2019": "../dist/es2019/components/common/styles.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/components/common/styles.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/components/common/styles.d.ts"
+      ]
+    }
+  }
+}

package/type-helpers/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/type-helpers",
+  "main": "../dist/cjs/util/type-helpers.js",
+  "module": "../dist/esm/util/type-helpers.js",
+  "module:es2019": "../dist/es2019/util/type-helpers.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/util/type-helpers.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/util/type-helpers.d.ts"
+      ]
+    }
+  }
+}

package/ufo-experiences/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/ufo-experiences",
+  "main": "../dist/cjs/util/analytics/ufoExperiences.js",
+  "module": "../dist/esm/util/analytics/ufoExperiences.js",
+  "module:es2019": "../dist/es2019/util/analytics/ufoExperiences.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/util/analytics/ufoExperiences.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/util/analytics/ufoExperiences.d.ts"
+      ]
+    }
+  }
+}

package/usage-frequency-tracker/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/usage-frequency-tracker",
+  "main": "../dist/cjs/api/internal/UsageFrequencyTracker.js",
+  "module": "../dist/esm/api/internal/UsageFrequencyTracker.js",
+  "module:es2019": "../dist/es2019/api/internal/UsageFrequencyTracker.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/api/internal/UsageFrequencyTracker.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/api/internal/UsageFrequencyTracker.d.ts"
+      ]
+    }
+  }
+}

package/use-emoji/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/use-emoji",
+  "main": "../dist/cjs/hooks/useEmoji.js",
+  "module": "../dist/esm/hooks/useEmoji.js",
+  "module:es2019": "../dist/es2019/hooks/useEmoji.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/hooks/useEmoji.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/hooks/useEmoji.d.ts"
+      ]
+    }
+  }
+}

package/use-emoji-context/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/emoji/use-emoji-context",
+  "main": "../dist/cjs/hooks/useEmojiContext.js",
+  "module": "../dist/esm/hooks/useEmojiContext.js",
+  "module:es2019": "../dist/es2019/hooks/useEmojiContext.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/hooks/useEmojiContext.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/hooks/useEmojiContext.d.ts"
+      ]
+    }
+  }
+}