@atlaskit/emoji 70.10.8 → 70.10.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/emoji
 
+## 70.10.10
+
+### Patch Changes
+
+- Updated dependencies
+
+## 70.10.9
+
+### Patch Changes
+
+- [`d4f4c5fc7110e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4f4c5fc7110e) -
+  Do not announce layout table for screen reader in emoji picker dialog
+- Updated dependencies
+
 ## 70.10.8
 
 ### Patch Changes

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

@@ -354,7 +354,11 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       cancelChooseFile();
     }
   }, [cancelChooseFile, errorOnUpload, onFileLoad]);
-  var cancelUpload = (0, _react.useCallback)(function () {
+  var cancelUpload = (0, _react.useCallback)(function (event) {
+    if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload')) {
+      event === null || event === void 0 || event.preventDefault();
+      event === null || event === void 0 || event.stopPropagation();
+    }
     clearUploadPicker();
     onUploadCancelled();
 

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

@@ -33,7 +33,7 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
     ,
     className: className,
     "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
-    role: "rowheader"
+    role: (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'rowheader'
   }, (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, {

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

@@ -11,6 +11,8 @@ require("./EmojiPickerEmojiRow.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactIntl = require("react-intl");
 var _CachingEmoji = _interopRequireDefault(require("../common/CachingEmoji"));
 var _useEmojiPickerListContext = require("../../hooks/useEmojiPickerListContext");
@@ -51,16 +53,17 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       id = emoji.id;
     var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(title);
     var focus = currentEmojisFocus.rowIndex === rowIndex && currentEmojisFocus.columnIndex === index;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
       key: key,
-      role: "gridcell",
-      "aria-colindex": index + 1 // aria-colindex is 1 based
-      ,
+      role: (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'gridcell'
+    }, (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') ? {} : {
+      'aria-colindex': index + 1
+    }, {
       onMouseLeave: onMouseLeave,
       onBlur: onMouseLeave,
       tabIndex: 0,
       className: (0, _runtime.ax)(["_1e0c1o8l _y3gn1h6o _1bsb1ylp _1wcg1qi0 _1678tlke _7b50u2gc _1rf4u2gc _b4kiu2gc _bm9mu2gc _1lvc1tcg _1cf71tcg _8vlfze3t _1909ze3t _1tcfze3t _n7xcze3t _4ubfu2gc _18x3u2gc _fw9su2gc _29jju2gc _qpkw1tcg _elsp1tcg _vtzrze3t _w2q0ze3t _o5kcze3t _1mc3ze3t _115ch2mm _yrst1ssb _85ft1ssb _5mfndbra _1k8z1tcg _17dz1tcg _zdyf1ule _1mn81tcg _u5ah1tcg"])
-    }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
+    }), /*#__PURE__*/React.createElement(_CachingEmoji.default, {
       emoji: emoji,
       selectOnHover: true,
       onSelected: onSelected,

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

@@ -9,9 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.virtualListScrollContainerTestId = exports.VirtualList = void 0;
 require("./VirtualList.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactVirtual = require("@tanstack/react-virtual");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useEmojiPickerListContext = require("../../hooks/useEmojiPickerListContext");
 var _constants = require("../../util/constants");
 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); }
@@ -274,7 +276,7 @@ var VirtualList = exports.VirtualList = /*#__PURE__*/_react.default.forwardRef(f
     },
     "data-testid": virtualListScrollContainerTestId,
     "aria-labelledby": "emoji-picker-table-description",
-    role: "grid",
+    role: (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') ? 'application' : 'grid',
     className: (0, _runtime.ax)(["_1reo15vq _18m91wug _n3tdu2gc _nt751r31 _49pcglyw _1hvw1o36"])
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -288,15 +290,17 @@ var VirtualList = exports.VirtualList = /*#__PURE__*/_react.default.forwardRef(f
     onKeyDown: handleKeyDown,
     role: "presentation"
   }, rowVirtualizer.getVirtualItems().map(function (virtualRow, index) {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       key: virtualRow.key,
       style: {
         height: "".concat(virtualRow.size, "px"),
         transform: "translateY(".concat(virtualRow.start, "px)")
       },
-      role: "row",
-      "aria-rowindex": index + 1,
+      role: (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'row'
+    }, (0, _platformFeatureFlags.fg)('platform_a11y_fixes_reaction_emoji') ? {} : {
+      'aria-rowindex': index + 1
+    }, {
       className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq"])
-    }, rowRenderer(virtualRow));
+    }), rowRenderer(virtualRow));
   })));
 });

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.10.7"
+      packageVersion: "70.10.9"
     }, attributes)
   };
 };

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

@@ -310,7 +310,11 @@ const EmojiUploadPicker = props => {
       cancelChooseFile();
     }
   }, [cancelChooseFile, errorOnUpload, onFileLoad]);
-  const cancelUpload = useCallback(() => {
+  const cancelUpload = useCallback(event => {
+    if (fg('platform_emoji_keep_picker_open_on_upload')) {
+      event === null || event === void 0 ? void 0 : event.preventDefault();
+      event === null || event === void 0 ? void 0 : event.stopPropagation();
+    }
     clearUploadPicker();
     onUploadCancelled();
 

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

@@ -24,7 +24,7 @@ const EmojiPickerCategoryHeading = ({
   ,
   className: className,
   "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
-  role: "rowheader"
+  role: fg('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'rowheader'
 }, 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, {

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

@@ -1,8 +1,10 @@
 /* EmojiPickerEmojiRow.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./EmojiPickerEmojiRow.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useIntl } from 'react-intl';
 import CachingEmoji from '../common/CachingEmoji';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
@@ -45,16 +47,17 @@ const EmojiPickerEmojiRow = ({
     } = emoji;
     const key = id ? `${id}-${title}` : `${shortName}-${title}`;
     const focus = currentEmojisFocus.rowIndex === rowIndex && currentEmojisFocus.columnIndex === index;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("span", _extends({
       key: key,
-      role: "gridcell",
-      "aria-colindex": index + 1 // aria-colindex is 1 based
-      ,
+      role: fg('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'gridcell'
+    }, fg('platform_a11y_fixes_reaction_emoji') ? {} : {
+      'aria-colindex': index + 1
+    }, {
       onMouseLeave: onMouseLeave,
       onBlur: onMouseLeave,
       tabIndex: 0,
       className: ax(["_1e0c1o8l _y3gn1h6o _1bsb1ylp _1wcg1qi0 _1678tlke _7b50u2gc _1rf4u2gc _b4kiu2gc _bm9mu2gc _1lvc1tcg _1cf71tcg _8vlfze3t _1909ze3t _1tcfze3t _n7xcze3t _4ubfu2gc _18x3u2gc _fw9su2gc _29jju2gc _qpkw1tcg _elsp1tcg _vtzrze3t _w2q0ze3t _o5kcze3t _1mc3ze3t _115ch2mm _yrst1ssb _85ft1ssb _5mfndbra _1k8z1tcg _17dz1tcg _zdyf1ule _1mn81tcg _u5ah1tcg"])
-    }, /*#__PURE__*/React.createElement(CachingEmoji, {
+    }), /*#__PURE__*/React.createElement(CachingEmoji, {
       emoji: emoji,
       selectOnHover: true,
       onSelected: onSelected,

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

@@ -1,8 +1,10 @@
 /* VirtualList.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./VirtualList.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useImperativeHandle } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
 import { EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED, EMOJI_LIST_COLUMNS, EMOJI_LIST_PAGE_COUNT, KeyboardNavigationDirection, KeyboardKeys } from '../../util/constants';
 const virtualList = null;
@@ -262,7 +264,7 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     "data-testid": virtualListScrollContainerTestId,
     "aria-labelledby": "emoji-picker-table-description",
-    role: "grid",
+    role: fg('platform_a11y_fixes_reaction_emoji') ? 'application' : 'grid',
     className: ax(["_1reo15vq _18m91wug _n3tdu2gc _nt751r31 _49pcglyw _1hvw1o36"])
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -275,14 +277,16 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: virtualistItemsRef,
     onKeyDown: handleKeyDown,
     role: "presentation"
-  }, rowVirtualizer.getVirtualItems().map((virtualRow, index) => /*#__PURE__*/React.createElement("div", {
+  }, rowVirtualizer.getVirtualItems().map((virtualRow, index) => /*#__PURE__*/React.createElement("div", _extends({
     key: virtualRow.key,
     style: {
       height: `${virtualRow.size}px`,
       transform: `translateY(${virtualRow.start}px)`
     },
-    role: "row",
-    "aria-rowindex": index + 1,
+    role: fg('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'row'
+  }, fg('platform_a11y_fixes_reaction_emoji') ? {} : {
+    'aria-rowindex': index + 1
+  }, {
     className: ax(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq"])
-  }, rowRenderer(virtualRow)))));
+  }), rowRenderer(virtualRow)))));
 });

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.10.7",
+    packageVersion: "70.10.9",
     ...attributes
   }
 });

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

@@ -346,7 +346,11 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       cancelChooseFile();
     }
   }, [cancelChooseFile, errorOnUpload, onFileLoad]);
-  var cancelUpload = useCallback(function () {
+  var cancelUpload = useCallback(function (event) {
+    if (fg('platform_emoji_keep_picker_open_on_upload')) {
+      event === null || event === void 0 || event.preventDefault();
+      event === null || event === void 0 || event.stopPropagation();
+    }
     clearUploadPicker();
     onUploadCancelled();
 

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

@@ -24,7 +24,7 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
     ,
     className: className,
     "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
-    role: "rowheader"
+    role: fg('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'rowheader'
   }, 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, {

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

@@ -1,8 +1,10 @@
 /* EmojiPickerEmojiRow.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./EmojiPickerEmojiRow.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useIntl } from 'react-intl';
 import CachingEmoji from '../common/CachingEmoji';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
@@ -42,16 +44,17 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       id = emoji.id;
     var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(title);
     var focus = currentEmojisFocus.rowIndex === rowIndex && currentEmojisFocus.columnIndex === index;
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("span", _extends({
       key: key,
-      role: "gridcell",
-      "aria-colindex": index + 1 // aria-colindex is 1 based
-      ,
+      role: fg('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'gridcell'
+    }, fg('platform_a11y_fixes_reaction_emoji') ? {} : {
+      'aria-colindex': index + 1
+    }, {
       onMouseLeave: onMouseLeave,
       onBlur: onMouseLeave,
       tabIndex: 0,
       className: ax(["_1e0c1o8l _y3gn1h6o _1bsb1ylp _1wcg1qi0 _1678tlke _7b50u2gc _1rf4u2gc _b4kiu2gc _bm9mu2gc _1lvc1tcg _1cf71tcg _8vlfze3t _1909ze3t _1tcfze3t _n7xcze3t _4ubfu2gc _18x3u2gc _fw9su2gc _29jju2gc _qpkw1tcg _elsp1tcg _vtzrze3t _w2q0ze3t _o5kcze3t _1mc3ze3t _115ch2mm _yrst1ssb _85ft1ssb _5mfndbra _1k8z1tcg _17dz1tcg _zdyf1ule _1mn81tcg _u5ah1tcg"])
-    }, /*#__PURE__*/React.createElement(CachingEmoji, {
+    }), /*#__PURE__*/React.createElement(CachingEmoji, {
       emoji: emoji,
       selectOnHover: true,
       onSelected: onSelected,

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

@@ -1,4 +1,5 @@
 /* VirtualList.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./VirtualList.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
@@ -6,6 +7,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useImperativeHandle } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
 import { EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED, EMOJI_LIST_COLUMNS, EMOJI_LIST_PAGE_COUNT, KeyboardNavigationDirection, KeyboardKeys } from '../../util/constants';
 var virtualList = null;
@@ -265,7 +267,7 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     },
     "data-testid": virtualListScrollContainerTestId,
     "aria-labelledby": "emoji-picker-table-description",
-    role: "grid",
+    role: fg('platform_a11y_fixes_reaction_emoji') ? 'application' : 'grid',
     className: ax(["_1reo15vq _18m91wug _n3tdu2gc _nt751r31 _49pcglyw _1hvw1o36"])
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -279,15 +281,17 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyDown: handleKeyDown,
     role: "presentation"
   }, rowVirtualizer.getVirtualItems().map(function (virtualRow, index) {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", _extends({
       key: virtualRow.key,
       style: {
         height: "".concat(virtualRow.size, "px"),
         transform: "translateY(".concat(virtualRow.start, "px)")
       },
-      role: "row",
-      "aria-rowindex": index + 1,
+      role: fg('platform_a11y_fixes_reaction_emoji') ? 'presentation' : 'row'
+    }, fg('platform_a11y_fixes_reaction_emoji') ? {} : {
+      'aria-rowindex': index + 1
+    }, {
       className: ax(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq"])
-    }, rowRenderer(virtualRow));
+    }), rowRenderer(virtualRow));
   })));
 });

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.10.7"
+      packageVersion: "70.10.9"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.10.8",
+	"version": "70.10.10",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^35.1.0",
+		"@atlaskit/icon": "^35.3.0",
 		"@atlaskit/media-client": "^36.3.0",
 		"@atlaskit/media-client-react": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^83.0.0",
+		"@atlaskit/tmp-editor-statsig": "^84.0.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^22.3.0",
 		"@atlaskit/ufo": "^0.5.0",
@@ -155,6 +155,9 @@
 		},
 		"platform_emoji_a11y_category_heading": {
 			"type": "boolean"
+		},
+		"platform_a11y_fixes_reaction_emoji": {
+			"type": "boolean"
 		}
 	},
 	"scripts": {