@atlaskit/react-ufo 4.15.11 → 4.15.13

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.15.13
+
+### Patch Changes
+
+- [`b7caf41846c8c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b7caf41846c8c) -
+  Prevent keypresses from aborting press interactions in react ufo
+
+## 4.15.12
+
+### Patch Changes
+
+- [`19af60b5294cd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/19af60b5294cd) -
+  Reduces eagerness of ssr placeholder checking
+
 ## 4.15.11
 
 ### Patch Changes

package/dist/cjs/vc/vc-observer/index.js

@@ -13,6 +13,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _config = require("../../config");
 var _interactionMetrics = require("../../interaction-metrics");
 var _attachAbortListeners = require("./attachAbortListeners");
@@ -393,6 +394,14 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
           _this.setAbortReason(abortReason.scroll, time);
           break;
         case 'keydown':
+          // Don't abort press interactions on keydown events, as keydown is expected
+          // when users press Enter/Space to activate buttons or other interactive elements
+          if ((0, _platformFeatureFlags.fg)('platform_ufo_keypress_interaction_abort')) {
+            var interaction = (0, _interactionMetrics.getActiveInteraction)();
+            if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+              break;
+            }
+          }
           _this.setAbortReason(abortReason.keypress, time);
           break;
         case 'resize':

package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -245,12 +245,13 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
   }, {
     key: "findNearestPlaceholderOrContainer",
     value: function findNearestPlaceholderOrContainer(element) {
+      var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANCESTOR_LOOKUP_LIMIT;
       var ancestor = element;
       if (this.isPlaceholderIgnored(element) && element.parentElement) {
         ancestor = element.parentElement;
       }
       var i = 0;
-      while (ancestor && i < ANCESTOR_LOOKUP_LIMIT) {
+      while (ancestor && i < limit) {
         if (this.isPlaceholder(ancestor) || this.isPlaceholderReplacement(ancestor)) {
           return ancestor;
         }
@@ -325,7 +326,8 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
   }, {
     key: "validateReactComponentMatchToPlaceholderV4",
     value: function validateReactComponentMatchToPlaceholderV4(el) {
-      el = (0, _platformFeatureFlags.fg)('platform_ufo_v4_fix_nested_ssr_placeholder') ? this.findNearestPlaceholderOrContainer(el) : this.findNearestPlaceholderContainerIfIgnored(el);
+      el = (0, _platformFeatureFlags.fg)('platform_ufo_v4_fix_nested_ssr_placeholder') ? this.findNearestPlaceholderOrContainer(el, 2) // We are using 2 due to over-eagerness of the default, only check itself and 1 ancestor
+      : this.findNearestPlaceholderContainerIfIgnored(el);
       var id = this.getPlaceholderReplacementId(el);
       return this.staticPlaceholders.has(id);
     }

package/dist/cjs/vc/vc-observer-new/index.js

@@ -13,6 +13,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _interactionMetrics = require("../../interaction-metrics");
 var _ssrPlaceholders = require("../vc-observer/observers/ssr-placeholders");
 var _entriesTimeline = _interopRequireDefault(require("./entries-timeline"));
 var _getElementName2 = _interopRequireDefault(require("./get-element-name"));
@@ -113,6 +114,14 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
       onEvent: function onEvent(_ref) {
         var time = _ref.time,
           type = _ref.type;
+        // Don't abort press interactions on keydown events, as keydown is expected
+        // when users press Enter/Space to activate buttons or other interactive elements
+        if (type === 'keydown' && (0, _platformFeatureFlags.fg)('platform_ufo_keypress_interaction_abort')) {
+          var interaction = (0, _interactionMetrics.getActiveInteraction)();
+          if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+            return;
+          }
+        }
         _this.entriesTimeline.push({
           time: time,
           data: {

package/dist/es2019/vc/vc-observer/index.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getActiveInteraction } from '../../interaction-metrics';
 import { attachAbortListeners } from './attachAbortListeners';
@@ -432,6 +433,14 @@ export class VCObserver {
           this.setAbortReason(abortReason.scroll, time);
           break;
         case 'keydown':
+          // Don't abort press interactions on keydown events, as keydown is expected
+          // when users press Enter/Space to activate buttons or other interactive elements
+          if (fg('platform_ufo_keypress_interaction_abort')) {
+            const interaction = getActiveInteraction();
+            if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+              break;
+            }
+          }
           this.setAbortReason(abortReason.keypress, time);
           break;
         case 'resize':

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -209,13 +209,13 @@ export class SSRPlaceholderHandlers {
     }
     return element;
   }
-  findNearestPlaceholderOrContainer(element) {
+  findNearestPlaceholderOrContainer(element, limit = ANCESTOR_LOOKUP_LIMIT) {
     let ancestor = element;
     if (this.isPlaceholderIgnored(element) && element.parentElement) {
       ancestor = element.parentElement;
     }
     let i = 0;
-    while (ancestor && i < ANCESTOR_LOOKUP_LIMIT) {
+    while (ancestor && i < limit) {
       if (this.isPlaceholder(ancestor) || this.isPlaceholderReplacement(ancestor)) {
         return ancestor;
       }
@@ -277,7 +277,8 @@ export class SSRPlaceholderHandlers {
     });
   }
   validateReactComponentMatchToPlaceholderV4(el) {
-    el = fg('platform_ufo_v4_fix_nested_ssr_placeholder') ? this.findNearestPlaceholderOrContainer(el) : this.findNearestPlaceholderContainerIfIgnored(el);
+    el = fg('platform_ufo_v4_fix_nested_ssr_placeholder') ? this.findNearestPlaceholderOrContainer(el, 2) // We are using 2 due to over-eagerness of the default, only check itself and 1 ancestor
+    : this.findNearestPlaceholderContainerIfIgnored(el);
     const id = this.getPlaceholderReplacementId(el);
     return this.staticPlaceholders.has(id);
   }

package/dist/es2019/vc/vc-observer-new/index.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getActiveInteraction } from '../../interaction-metrics';
 import { SSRPlaceholderHandlers } from '../vc-observer/observers/ssr-placeholders';
 import EntriesTimeline from './entries-timeline';
 import getElementName from './get-element-name';
@@ -96,6 +97,14 @@ export default class VCObserverNew {
         time,
         type
       }) => {
+        // Don't abort press interactions on keydown events, as keydown is expected
+        // when users press Enter/Space to activate buttons or other interactive elements
+        if (type === 'keydown' && fg('platform_ufo_keypress_interaction_abort')) {
+          const interaction = getActiveInteraction();
+          if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+            return;
+          }
+        }
         this.entriesTimeline.push({
           time,
           data: {

package/dist/esm/vc/vc-observer/index.js

@@ -9,6 +9,7 @@ var _excluded = ["__debug__element"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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 { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getActiveInteraction } from '../../interaction-metrics';
 import { attachAbortListeners } from './attachAbortListeners';
@@ -386,6 +387,14 @@ export var VCObserver = /*#__PURE__*/function () {
           _this.setAbortReason(abortReason.scroll, time);
           break;
         case 'keydown':
+          // Don't abort press interactions on keydown events, as keydown is expected
+          // when users press Enter/Space to activate buttons or other interactive elements
+          if (fg('platform_ufo_keypress_interaction_abort')) {
+            var interaction = getActiveInteraction();
+            if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+              break;
+            }
+          }
           _this.setAbortReason(abortReason.keypress, time);
           break;
         case 'resize':

package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -238,12 +238,13 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
   }, {
     key: "findNearestPlaceholderOrContainer",
     value: function findNearestPlaceholderOrContainer(element) {
+      var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANCESTOR_LOOKUP_LIMIT;
       var ancestor = element;
       if (this.isPlaceholderIgnored(element) && element.parentElement) {
         ancestor = element.parentElement;
       }
       var i = 0;
-      while (ancestor && i < ANCESTOR_LOOKUP_LIMIT) {
+      while (ancestor && i < limit) {
         if (this.isPlaceholder(ancestor) || this.isPlaceholderReplacement(ancestor)) {
           return ancestor;
         }
@@ -318,7 +319,8 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
   }, {
     key: "validateReactComponentMatchToPlaceholderV4",
     value: function validateReactComponentMatchToPlaceholderV4(el) {
-      el = fg('platform_ufo_v4_fix_nested_ssr_placeholder') ? this.findNearestPlaceholderOrContainer(el) : this.findNearestPlaceholderContainerIfIgnored(el);
+      el = fg('platform_ufo_v4_fix_nested_ssr_placeholder') ? this.findNearestPlaceholderOrContainer(el, 2) // We are using 2 due to over-eagerness of the default, only check itself and 1 ancestor
+      : this.findNearestPlaceholderContainerIfIgnored(el);
       var id = this.getPlaceholderReplacementId(el);
       return this.staticPlaceholders.has(id);
     }

package/dist/esm/vc/vc-observer-new/index.js

@@ -6,6 +6,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getActiveInteraction } from '../../interaction-metrics';
 import { SSRPlaceholderHandlers } from '../vc-observer/observers/ssr-placeholders';
 import EntriesTimeline from './entries-timeline';
 import _getElementName from './get-element-name';
@@ -106,6 +107,14 @@ var VCObserverNew = /*#__PURE__*/function () {
       onEvent: function onEvent(_ref) {
         var time = _ref.time,
           type = _ref.type;
+        // Don't abort press interactions on keydown events, as keydown is expected
+        // when users press Enter/Space to activate buttons or other interactive elements
+        if (type === 'keydown' && fg('platform_ufo_keypress_interaction_abort')) {
+          var interaction = getActiveInteraction();
+          if ((interaction === null || interaction === void 0 ? void 0 : interaction.type) === 'press') {
+            return;
+          }
+        }
         _this.entriesTimeline.push({
           time: time,
           data: {

package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -31,7 +31,7 @@ export declare class SSRPlaceholderHandlers {
     isPlaceholderV4(element: HTMLElement): boolean;
     isPlaceholderReplacementV4(element: HTMLElement): boolean;
     findNearestPlaceholderContainerIfIgnored(element: HTMLElement): HTMLElement;
-    findNearestPlaceholderOrContainer(element: HTMLElement): HTMLElement;
+    findNearestPlaceholderOrContainer(element: HTMLElement, limit?: number): HTMLElement;
     checkIfExistedAndSizeMatching(el: HTMLElement): Promise<boolean>;
     checkIfExistedAndSizeMatchingV3(el: HTMLElement): boolean;
     getSize(el: HTMLElement): Promise<Rect>;

package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -31,7 +31,7 @@ export declare class SSRPlaceholderHandlers {
     isPlaceholderV4(element: HTMLElement): boolean;
     isPlaceholderReplacementV4(element: HTMLElement): boolean;
     findNearestPlaceholderContainerIfIgnored(element: HTMLElement): HTMLElement;
-    findNearestPlaceholderOrContainer(element: HTMLElement): HTMLElement;
+    findNearestPlaceholderOrContainer(element: HTMLElement, limit?: number): HTMLElement;
     checkIfExistedAndSizeMatching(el: HTMLElement): Promise<boolean>;
     checkIfExistedAndSizeMatchingV3(el: HTMLElement): boolean;
     getSize(el: HTMLElement): Promise<Rect>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "4.15.11",
+	"version": "4.15.13",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -196,6 +196,9 @@
 		},
 		"platform_mark_ufo_segment_first_load": {
 			"type": "boolean"
+		},
+		"platform_ufo_keypress_interaction_abort": {
+			"type": "boolean"
 		}
 	}
 }