@atlaskit/emoji 70.10.10 → 70.10.12

package/dist/cjs/components/uploader/EmojiUploadComponent.js

@@ -21,7 +21,7 @@ var _UploadEmoji = require("../common/UploadEmoji");
 var _analytics = require("../../util/analytics");
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 var _i18n = require("../i18n");
-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); }
+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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var emojiPickerWidth = 350;
 var emojiUploadWidget = null;
 var emojiUploadFooter = null;
@@ -51,8 +51,8 @@ var EmojiUploadComponent = function EmojiUploadComponent(props) {
   }, []);
   var onUploadEmoji = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(upload, retry, onSuccessHandler) {
-      var errorSetter, message;
-      return _regenerator.default.wrap(function _callee$(_context) {
+      var errorSetter, message, _t;
+      return _regenerator.default.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _ufoExperiences.ufoExperiences['emoji-uploaded'].start();
@@ -60,27 +60,27 @@ var EmojiUploadComponent = function EmojiUploadComponent(props) {
               retry: retry
             });
             if (!(0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
-              _context.next = 16;
+              _context.next = 4;
               break;
             }
             fireAnalytics((0, _analytics.uploadConfirmButton)({
               retry: retry
             }));
-            _context.prev = 4;
-            _context.next = 7;
+            _context.prev = 1;
+            _context.next = 2;
             return emojiProvider.prepareForUpload();
-          case 7:
+          case 2:
             errorSetter = function errorSetter(message) {
               setUploadErrorMessage(message);
             }; // internally handled error from upload callback
             (0, _UploadEmoji.uploadEmoji)(upload, emojiProvider, errorSetter, onUploaded(onSuccessHandler), fireAnalytics, retry);
-            _context.next = 16;
+            _context.next = 4;
             break;
-          case 11:
-            _context.prev = 11;
-            _context.t0 = _context["catch"](4);
+          case 3:
+            _context.prev = 3;
+            _t = _context["catch"](1);
             // error from upload token generation
-            message = _context.t0 instanceof Error ? _context.t0.message : 'Issue with generating upload token';
+            message = _t instanceof Error ? _t.message : 'Issue with generating upload token';
             _ufoExperiences.ufoExperiences['emoji-uploaded'].failure({
               metadata: {
                 source: 'EmojiUploadComponent',
@@ -88,11 +88,11 @@ var EmojiUploadComponent = function EmojiUploadComponent(props) {
               }
             });
             setUploadErrorMessage(_i18n.messages.emojiUploadFailed);
-          case 16:
+          case 4:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[4, 11]]);
+      }, _callee, null, [[1, 3]]);
     }));
     return function onUploadEmoji(_x, _x2, _x3) {
       return _ref.apply(this, arguments);

package/dist/cjs/context/EmojiContextProvider.js

@@ -11,7 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireWildcard(require("react"));
 var _EmojiContext = require("./EmojiContext");
 var _logger = _interopRequireDefault(require("../util/logger"));
-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); }
+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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var EmojiContextProvider = exports.EmojiContextProvider = function EmojiContextProvider(_ref) {
   var children = _ref.children,
     emojiContextValue = _ref.emojiContextValue;
@@ -25,24 +25,25 @@ var EmojiContextProvider = exports.EmojiContextProvider = function EmojiContextP
     }
     function _fetchEmojiProvider() {
       _fetchEmojiProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        return _regenerator.default.wrap(function _callee$(_context) {
+        var _t;
+        return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
-              _context.next = 3;
+              _context.next = 1;
               return memoizedEmojiContextValue === null || memoizedEmojiContextValue === void 0 ? void 0 : memoizedEmojiContextValue.emoji.emojiProvider.fetchEmojiProvider();
-            case 3:
-              _context.next = 8;
+            case 1:
+              _context.next = 3;
               break;
-            case 5:
-              _context.prev = 5;
-              _context.t0 = _context["catch"](0);
-              (0, _logger.default)('fetchEmojiProvider error catched from outside', _context.t0);
-            case 8:
+            case 2:
+              _context.prev = 2;
+              _t = _context["catch"](0);
+              (0, _logger.default)('fetchEmojiProvider error catched from outside', _t);
+            case 3:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[0, 5]]);
+        }, _callee, null, [[0, 2]]);
       }));
       return _fetchEmojiProvider.apply(this, arguments);
     }

package/dist/cjs/hooks/useEmoji.js

@@ -30,26 +30,26 @@ var useEmoji = exports.useEmoji = function useEmoji() {
     if (supportsUploadFeature(emojiProvider)) {
       var checkIfUploadIsSupported = /*#__PURE__*/function () {
         var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-          var supported;
-          return _regenerator.default.wrap(function _callee$(_context) {
+          var supported, _t;
+          return _regenerator.default.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
                 _context.prev = 0;
-                _context.next = 3;
+                _context.next = 1;
                 return emojiProvider.isUploadSupported();
-              case 3:
+              case 1:
                 supported = _context.sent;
                 setIsUploadSupported(supported);
                 return _context.abrupt("return", true);
-              case 8:
-                _context.prev = 8;
-                _context.t0 = _context["catch"](0);
+              case 2:
+                _context.prev = 2;
+                _t = _context["catch"](0);
                 return _context.abrupt("return", false);
-              case 11:
+              case 3:
               case "end":
                 return _context.stop();
             }
-          }, _callee, null, [[0, 8]]);
+          }, _callee, null, [[0, 2]]);
         }));
         return function checkIfUploadIsSupported() {
           return _ref.apply(this, arguments);

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

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

@@ -76,18 +76,18 @@ var withSampling = exports.withSampling = function withSampling(ufoExperience) {
   var start = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(options) {
       var isSampled;
-      return _regenerator.default.wrap(function _callee$(_context) {
+      return _regenerator.default.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             if (!hasSampledFromStart(ufoExperience)) {
-              _context.next = 2;
+              _context.next = 1;
               break;
             }
             return _context.abrupt("return");
-          case 2:
+          case 1:
             isSampled = options.samplingFunc || isExperienceSampled;
             if (isSampled(options.samplingRate)) {
-              _context.next = 7;
+              _context.next = 2;
               break;
             }
             if (ufoExperience.instanceId) {
@@ -95,14 +95,14 @@ var withSampling = exports.withSampling = function withSampling(ufoExperience) {
             }
             ufoExperiencesSampled[ufoExperience.id].sampled = false;
             return _context.abrupt("return");
-          case 7:
+          case 2:
             // update sampled records
             if (ufoExperience.instanceId) {
               ufoExperiencesSampled[ufoExperience.id].sampledInstance[ufoExperience.instanceId] = true;
               ufoExperiencesSampled[ufoExperience.id].sampled = true;
             }
             return _context.abrupt("return", ufoExperience.start(options.startTime));
-          case 9:
+          case 3:
           case "end":
             return _context.stop();
         }
@@ -114,17 +114,17 @@ var withSampling = exports.withSampling = function withSampling(ufoExperience) {
   }();
   var success = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(config) {
-      return _regenerator.default.wrap(function _callee2$(_context2) {
+      return _regenerator.default.wrap(function (_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             if (hasSampledFromStart(ufoExperience)) {
-              _context2.next = 2;
+              _context2.next = 1;
               break;
             }
             return _context2.abrupt("return", null);
-          case 2:
+          case 1:
             return _context2.abrupt("return", ufoExperience.success(config));
-          case 3:
+          case 2:
           case "end":
             return _context2.stop();
         }
@@ -136,17 +136,17 @@ var withSampling = exports.withSampling = function withSampling(ufoExperience) {
   }();
   var failure = /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(config) {
-      return _regenerator.default.wrap(function _callee3$(_context3) {
+      return _regenerator.default.wrap(function (_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
             if (hasSampledFromStart(ufoExperience)) {
-              _context3.next = 2;
+              _context3.next = 1;
               break;
             }
             return _context3.abrupt("return", null);
-          case 2:
+          case 1:
             return _context3.abrupt("return", ufoExperience.failure(config));
-          case 3:
+          case 2:
           case "end":
             return _context3.stop();
         }
@@ -158,17 +158,17 @@ var withSampling = exports.withSampling = function withSampling(ufoExperience) {
   }();
   var abort = /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(config) {
-      return _regenerator.default.wrap(function _callee4$(_context4) {
+      return _regenerator.default.wrap(function (_context4) {
         while (1) switch (_context4.prev = _context4.next) {
           case 0:
             if (hasSampledFromStart(ufoExperience)) {
-              _context4.next = 2;
+              _context4.next = 1;
               break;
             }
             return _context4.abrupt("return", null);
-          case 2:
+          case 1:
             return _context4.abrupt("return", ufoExperience.abort(config));
-          case 3:
+          case 2:
           case "end":
             return _context4.stop();
         }

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

@@ -2,6 +2,7 @@
 import "./EmojiRadioButton.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { memo, forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Emoji from './Emoji';
 import { TONESELECTOR_KEYBOARD_KEYS_SUPPORTED } from '../../util/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -10,6 +11,13 @@ const emojiRadio = {
   default: "_tzy4idpf _kqswstnw _154i14id _1ltv14id _3y8mfajl _157z1r31 _1dzmglyw _1sqm1o36 _fh6w1y54 _1i1213zc"
 };
 const handleKeyDown = (props, event) => {
+  if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && fg('platform_emoji_picker_refresh')) {
+    var _props$onArrowKey;
+    event.preventDefault();
+    event.stopPropagation();
+    (_props$onArrowKey = props.onArrowKey) === null || _props$onArrowKey === void 0 ? void 0 : _props$onArrowKey.call(props, event.key === 'ArrowRight' ? 1 : -1);
+    return;
+  }
   if (TONESELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(event.key)) {
     const {
       onSelected
@@ -41,6 +49,7 @@ export const EmojiRadioButton = /*#__PURE__*/forwardRef((props, ref) => {
       return (_props$onSelected = props.onSelected) === null || _props$onSelected === void 0 ? void 0 : _props$onSelected.call(props);
     },
     onKeyDown: event => handleKeyDown(props, event),
+    onChange: fg('platform_emoji_picker_refresh') ? e => e.preventDefault() : undefined,
     className: ax([emojiRadio.default])
   }), /*#__PURE__*/React.createElement(Emoji, {
     emoji: emoji,

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

@@ -1,8 +1,8 @@
 /* ToneSelector.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./ToneSelector.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { memo, useEffect, useMemo, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel, toneSelectedEvent, toneSelectorOpenedEvent } from '../../util/analytics';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
@@ -28,6 +28,8 @@ export const ToneSelectorInternal = props => {
   } = props;
   const isMounted = useRef(false);
   const selectedToneRadioRef = useRef(null);
+  // Refs for all radio inputs — used for FG-gated arrow-key focus management
+  const radioRefs = useRef([]);
   const {
     formatMessage
   } = useIntl();
@@ -62,6 +64,12 @@ export const ToneSelectorInternal = props => {
       createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
     }
   };
+  const onArrowKey = useCallback((currentIndex, direction) => {
+    var _radioRefs$current$ne;
+    const len = radioRefs.current.length;
+    const nextIndex = (currentIndex + direction + len) % len;
+    (_radioRefs$current$ne = radioRefs.current[nextIndex]) === null || _radioRefs$current$ne === void 0 ? void 0 : _radioRefs$current$ne.focus();
+  }, []);
   const onToneSelectedHandler = toneValue => () => {
     if (selectedTone === toneValue && onToneClose) {
       onToneClose();
@@ -83,8 +91,22 @@ export const ToneSelectorInternal = props => {
     id: "emoji-picker-tone-selector",
     "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
     className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
-  }, emojiToneCollection.map(tone => {
-    return /*#__PURE__*/React.createElement(EmojiRadioButton, {
+  }, emojiToneCollection.map((tone, renderIndex) => {
+    return fg('platform_emoji_picker_refresh') ? /*#__PURE__*/React.createElement(EmojiRadioButton, {
+      ref: el => {
+        radioRefs.current[renderIndex] = el;
+        if (tone.isSelected && selectedToneRadioRef) {
+          selectedToneRadioRef.current = el;
+        }
+      },
+      defaultChecked: tone.isSelected,
+      ariaLabelText: tone.label,
+      key: `${tone.id}`,
+      emoji: tone,
+      onArrowKey: direction => onArrowKey(renderIndex, direction),
+      onSelected: onToneSelectedHandler(tone.toneIndex),
+      selectOnHover: true
+    }) : /*#__PURE__*/React.createElement(EmojiRadioButton, {
       ref: tone.isSelected ? selectedToneRadioRef : null,
       defaultChecked: tone.isSelected,
       ariaLabelText: tone.label,

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