@atlaskit/emoji 71.13.0 → 71.13.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/emoji
 
+## 71.13.1
+
+### Patch Changes
+
+- [`6177789741cb4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6177789741cb4) -
+  Correct emoji picker initial focus
+
 ## 71.13.0
 
 ### Minor Changes

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

@@ -32,6 +32,14 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   var isEnabled = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
   return isEnabled;
 };
+var isEmojiPickerInitialFocusFixEnabled = function isEmojiPickerInitialFocusFixEnabled() {
+  if (!_featureGateJsClient.default.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  return _featureGateJsClient.default.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
+};
 var styles = {
   commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
   commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qu2gc _n3tdu2gc _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -77,6 +85,7 @@ var CategorySelector = function CategorySelector(props) {
     currentFocus = _useState4[0],
     setCurrentFocus = _useState4[1];
   var categoryRef = (0, _react.useRef)(null);
+  var hasSetInitialFocus = (0, _react.useRef)(false);
   var prevDynamicCategories = (0, _usePrevious.usePrevious)(dynamicCategories);
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
@@ -95,6 +104,24 @@ var CategorySelector = function CategorySelector(props) {
     categoryToFocus && categoryToFocus.focus();
     setCurrentFocus(index);
   }, [categoryRef, setCurrentFocus]);
+  (0, _react.useEffect)(function () {
+    var _categoryRef$current2, _categoryRef$current3;
+    if (hasSetInitialFocus.current || !isEmojiPickerInitialFocusFixEnabled() || !activeCategoryId) {
+      return;
+    }
+    var activeCategoryIndex = categories.indexOf(activeCategoryId);
+    if (activeCategoryIndex === -1) {
+      return;
+    }
+    var picker = (_categoryRef$current2 = categoryRef.current) === null || _categoryRef$current2 === void 0 ? void 0 : _categoryRef$current2.closest('[data-emoji-picker-container]');
+    var activeElement = (_categoryRef$current3 = categoryRef.current) === null || _categoryRef$current3 === void 0 ? void 0 : _categoryRef$current3.ownerDocument.activeElement;
+    if (activeElement && picker !== null && picker !== void 0 && picker.contains(activeElement)) {
+      hasSetInitialFocus.current = true;
+      return;
+    }
+    focusCategory(activeCategoryIndex);
+    hasSetInitialFocus.current = true;
+  }, [activeCategoryId, categories, focusCategory]);
   var handleKeyDown = function handleKeyDown(e) {
     if (!_constants.CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
       return;

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

@@ -29,6 +29,14 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   var isEnabled = _featureGateJsClient.default.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
   return isEnabled;
 };
+var isEmojiPickerInitialFocusFixEnabled = function isEmojiPickerInitialFocusFixEnabled() {
+  if (!_featureGateJsClient.default.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  return _featureGateJsClient.default.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
+};
 var input = null;
 var inputNew = null;
 var textFieldWrapperNew = null;
@@ -65,6 +73,9 @@ var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPicker
     debouncedSearch(e.target.value);
   };
   (0, _react.useLayoutEffect)(function () {
+    if (isEmojiPickerInitialFocusFixEnabled()) {
+      return;
+    }
     requestAnimationFrame(function () {
       if (textRef) {
         var _textRef$current;

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

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

@@ -22,6 +22,14 @@ const isRefreshEmojiPickerEnabled = () => {
   const isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
   return isEnabled;
 };
+const isEmojiPickerInitialFocusFixEnabled = () => {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  return FeatureGates.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
+};
 const styles = {
   commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
   commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qu2gc _n3tdu2gc _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -55,6 +63,7 @@ const CategorySelector = props => {
   const [categories, setCategories] = useState(addNewCategories(defaultCategories, dynamicCategories));
   const [currentFocus, setCurrentFocus] = useState(0);
   const categoryRef = useRef(null);
+  const hasSetInitialFocus = useRef(false);
   const prevDynamicCategories = usePrevious(dynamicCategories);
   const {
     formatMessage
@@ -74,6 +83,24 @@ const CategorySelector = props => {
     categoryToFocus && categoryToFocus.focus();
     setCurrentFocus(index);
   }, [categoryRef, setCurrentFocus]);
+  useEffect(() => {
+    var _categoryRef$current2, _categoryRef$current3;
+    if (hasSetInitialFocus.current || !isEmojiPickerInitialFocusFixEnabled() || !activeCategoryId) {
+      return;
+    }
+    const activeCategoryIndex = categories.indexOf(activeCategoryId);
+    if (activeCategoryIndex === -1) {
+      return;
+    }
+    const picker = (_categoryRef$current2 = categoryRef.current) === null || _categoryRef$current2 === void 0 ? void 0 : _categoryRef$current2.closest('[data-emoji-picker-container]');
+    const activeElement = (_categoryRef$current3 = categoryRef.current) === null || _categoryRef$current3 === void 0 ? void 0 : _categoryRef$current3.ownerDocument.activeElement;
+    if (activeElement && picker !== null && picker !== void 0 && picker.contains(activeElement)) {
+      hasSetInitialFocus.current = true;
+      return;
+    }
+    focusCategory(activeCategoryIndex);
+    hasSetInitialFocus.current = true;
+  }, [activeCategoryId, categories, focusCategory]);
   const handleKeyDown = e => {
     if (!CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
       return;

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

@@ -19,6 +19,14 @@ const isRefreshEmojiPickerEnabled = () => {
   const isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
   return isEnabled;
 };
+const isEmojiPickerInitialFocusFixEnabled = () => {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  return FeatureGates.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
+};
 const input = null;
 const inputNew = null;
 const textFieldWrapperNew = null;
@@ -52,6 +60,9 @@ export const EmojiPickerListSearch = props => {
     debouncedSearch(e.target.value);
   };
   useLayoutEffect(() => {
+    if (isEmojiPickerInitialFocusFixEnabled()) {
+      return;
+    }
     requestAnimationFrame(() => {
       if (textRef) {
         var _textRef$current;

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

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

@@ -23,6 +23,14 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   var isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
   return isEnabled;
 };
+var isEmojiPickerInitialFocusFixEnabled = function isEmojiPickerInitialFocusFixEnabled() {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  return FeatureGates.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
+};
 var styles = {
   commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
   commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qu2gc _n3tdu2gc _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -68,6 +76,7 @@ var CategorySelector = function CategorySelector(props) {
     currentFocus = _useState4[0],
     setCurrentFocus = _useState4[1];
   var categoryRef = useRef(null);
+  var hasSetInitialFocus = useRef(false);
   var prevDynamicCategories = usePrevious(dynamicCategories);
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -86,6 +95,24 @@ var CategorySelector = function CategorySelector(props) {
     categoryToFocus && categoryToFocus.focus();
     setCurrentFocus(index);
   }, [categoryRef, setCurrentFocus]);
+  useEffect(function () {
+    var _categoryRef$current2, _categoryRef$current3;
+    if (hasSetInitialFocus.current || !isEmojiPickerInitialFocusFixEnabled() || !activeCategoryId) {
+      return;
+    }
+    var activeCategoryIndex = categories.indexOf(activeCategoryId);
+    if (activeCategoryIndex === -1) {
+      return;
+    }
+    var picker = (_categoryRef$current2 = categoryRef.current) === null || _categoryRef$current2 === void 0 ? void 0 : _categoryRef$current2.closest('[data-emoji-picker-container]');
+    var activeElement = (_categoryRef$current3 = categoryRef.current) === null || _categoryRef$current3 === void 0 ? void 0 : _categoryRef$current3.ownerDocument.activeElement;
+    if (activeElement && picker !== null && picker !== void 0 && picker.contains(activeElement)) {
+      hasSetInitialFocus.current = true;
+      return;
+    }
+    focusCategory(activeCategoryIndex);
+    hasSetInitialFocus.current = true;
+  }, [activeCategoryId, categories, focusCategory]);
   var handleKeyDown = function handleKeyDown(e) {
     if (!CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
       return;

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

@@ -20,6 +20,14 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
   var isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
   return isEnabled;
 };
+var isEmojiPickerInitialFocusFixEnabled = function isEmojiPickerInitialFocusFixEnabled() {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  return FeatureGates.getExperimentValue('tef_fix_a11y_keyboard_control_emoji_picker', 'isEnabled', false);
+};
 var input = null;
 var inputNew = null;
 var textFieldWrapperNew = null;
@@ -56,6 +64,9 @@ export var EmojiPickerListSearch = function EmojiPickerListSearch(props) {
     debouncedSearch(e.target.value);
   };
   useLayoutEffect(function () {
+    if (isEmojiPickerInitialFocusFixEnabled()) {
+      return;
+    }
     requestAnimationFrame(function () {
       if (textRef) {
         var _textRef$current;

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.13.0",
+	"version": "71.13.1",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -145,6 +145,10 @@
 		}
 	},
 	"platform-experiments": {
+		"tef_fix_a11y_keyboard_control_emoji_picker": {
+			"param": "isEnabled",
+			"defaultValue": false
+		},
 		"platform_teamoji_26_refresh_emoji_picker": {
 			"param": "isEnabled",
 			"defaultValue": false