@atlaskit/react-ufo 3.13.10 → 3.13.12

package/.cursor/rules/code-comment.mdc

@@ -0,0 +1,20 @@
+---
+description:
+globs:
+alwaysApply: true
+---
+## Code Comments Rule
+
+When adding comments to code, ensure comments explain the code's purpose and behavior within the context of the codebase, not the context of the current change request or prompt. Comments should be written as if they were part of the original codebase and should be suitable for committing directly without any reference to the specific modification being made.
+
+**Good examples:**
+- "Ensures a single instance exists across the entire application"
+- "Returns existing instance if already initialized"
+- "Handles edge case where network request fails"
+**Avoid:**
+- "I will change this to use globalThis"
+- "Moving this from local variable to global"
+- "As requested, updating the implementation"
+- References to "this change" or "this modification"
+
+Comments should focus on explaining WHY the code exists and WHAT it does, not HOW it came to be implemented during the current session.

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.13.12
+
+### Patch Changes
+
+- [#161803](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161803)
+  [`71ce852a73a06`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71ce852a73a06) -
+  AFO-3919 make DefaultInteractionID global singleton
+
+## 3.13.11
+
+### Patch Changes
+
+- [#161290](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161290)
+  [`26388d9d5e089`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26388d9d5e089) -
+  AFO-3919 fix pre-existing UFOLoadHold not registering to new interaction
+
 ## 3.13.10
 
 ### Patch Changes

package/dist/cjs/interaction-id-context/index.js

@@ -1,20 +1,76 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useInteractionId = exports.getInteractionId = exports.default = exports.DefaultInteractionID = void 0;
+exports.useInteractionId = exports.subscribeToInteractionIdChanges = exports.getInteractionId = exports.default = exports.DefaultInteractionID = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 // Same structure as react's useRef.
 // This allows modals to use a ref to scope their value
 // const id = useRef(null);
 // <InteractionIDContext.Provider value={id}>...<
 
-// The default InteractionID object is a global singleton
-// It's the one that holds the root value used in routing,
-// and is overwritten when we have new interactions start.
-var DefaultInteractionID = exports.DefaultInteractionID = {
-  current: null
+// Subscription system for interaction ID changes
+
+var listeners = new Set();
+
+// Observable interaction ID implementation
+var ObservableInteractionID = /*#__PURE__*/function () {
+  function ObservableInteractionID() {
+    (0, _classCallCheck2.default)(this, ObservableInteractionID);
+    (0, _defineProperty2.default)(this, "_current", null);
+  }
+  return (0, _createClass2.default)(ObservableInteractionID, [{
+    key: "current",
+    get: function get() {
+      return this._current;
+    },
+    set: function set(newId) {
+      var oldId = this._current;
+      this._current = newId;
+
+      // Notify all listeners if the ID actually changed and feature flag is enabled
+      if (oldId !== newId && (0, _platformFeatureFlags.fg)('platform_ufo_hold_cross_interaction')) {
+        listeners.forEach(function (listener) {
+          return listener(newId);
+        });
+      }
+    }
+  }]);
+}(); // Type declaration for globalThis extension
+// Ensures a single DefaultInteractionID instance exists across the entire application,
+// even when the module is loaded multiple times in different contexts
+var initializeGlobalDefaultInteractionID = function initializeGlobalDefaultInteractionID() {
+  // Return existing instance if already initialized
+  if (globalThis.__UFO_DEFAULT_INTERACTION_ID__) {
+    return globalThis.__UFO_DEFAULT_INTERACTION_ID__;
+  }
+
+  // Create and store new instance globally
+  var instance = new ObservableInteractionID();
+  globalThis.__UFO_DEFAULT_INTERACTION_ID__ = instance;
+  return instance;
+};
+
+// The default InteractionID object is a global singleton stored in globalThis.
+// It holds the root value used in routing and is updated when new interactions start.
+var DefaultInteractionID = exports.DefaultInteractionID = initializeGlobalDefaultInteractionID();
+
+// Subscription functions
+var subscribeToInteractionIdChanges = exports.subscribeToInteractionIdChanges = function subscribeToInteractionIdChanges(listener) {
+  if (!(0, _platformFeatureFlags.fg)('platform_ufo_hold_cross_interaction')) {
+    // Return a no-op unsubscribe function when feature flag is disabled
+    return function () {};
+  }
+  listeners.add(listener);
+  return function () {
+    listeners.delete(listener);
+  };
 };
 
 // We use a context to allow modals to have their own lifecycle

package/dist/cjs/load-hold/UFOLoadHold.js

@@ -6,12 +6,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = UFOLoadHold;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _interactionContext = _interopRequireDefault(require("../interaction-context"));
+var _interactionIdContext = _interopRequireWildcard(require("../interaction-id-context"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var useLayoutEffectSAFE = typeof window === 'undefined' ? _react.useEffect : _react.useLayoutEffect;
 
+/**
+ * Custom hook to track changes to the interaction ID.
+ * Uses a subscription system when feature flag is enabled, otherwise returns the current value.
+ */
+function useInteractionIdValue() {
+  var interactionId = (0, _react.useContext)(_interactionIdContext.default);
+  var _useState = (0, _react.useState)((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentId = _useState2[0],
+    setCurrentId = _useState2[1];
+  useLayoutEffectSAFE(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_ufo_hold_cross_interaction')) {
+      // New subscription-based approach
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+      var unsubscribe = (0, _interactionIdContext.subscribeToInteractionIdChanges)(function (newId) {
+        setCurrentId(newId);
+      });
+      return unsubscribe;
+    } else {
+      // Legacy behavior - just return the current value without subscription
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+    }
+  }, [interactionId]);
+  return currentId;
+}
+
 /**
  * Render this whenever you're loading.
  *
@@ -64,6 +93,8 @@ function UFOLoadHold(_ref) {
     hold = _ref$hold === void 0 ? true : _ref$hold,
     _ref$experimental = _ref.experimental,
     experimental = _ref$experimental === void 0 ? false : _ref$experimental;
+  var currentInteractionId = useInteractionIdValue();
+
   // react-18: useId instead
   var context = (0, _react.useContext)(_interactionContext.default);
   useLayoutEffectSAFE(function () {
@@ -73,7 +104,7 @@ function UFOLoadHold(_ref) {
       }
       return context.hold(name);
     }
-  }, [hold, context, name]);
+  }, [hold, context, name, currentInteractionId]);
 
   // react-18: can return children directly
   return children != null ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children) : null;

package/dist/es2019/interaction-id-context/index.js

@@ -1,15 +1,65 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 // Same structure as react's useRef.
 // This allows modals to use a ref to scope their value
 // const id = useRef(null);
 // <InteractionIDContext.Provider value={id}>...<
 
-// The default InteractionID object is a global singleton
-// It's the one that holds the root value used in routing,
-// and is overwritten when we have new interactions start.
-export const DefaultInteractionID = {
-  current: null
+// Subscription system for interaction ID changes
+
+const listeners = new Set();
+
+// Observable interaction ID implementation
+class ObservableInteractionID {
+  constructor() {
+    _defineProperty(this, "_current", null);
+  }
+  get current() {
+    return this._current;
+  }
+  set current(newId) {
+    const oldId = this._current;
+    this._current = newId;
+
+    // Notify all listeners if the ID actually changed and feature flag is enabled
+    if (oldId !== newId && fg('platform_ufo_hold_cross_interaction')) {
+      listeners.forEach(listener => listener(newId));
+    }
+  }
+}
+
+// Type declaration for globalThis extension
+
+// Ensures a single DefaultInteractionID instance exists across the entire application,
+// even when the module is loaded multiple times in different contexts
+const initializeGlobalDefaultInteractionID = () => {
+  // Return existing instance if already initialized
+  if (globalThis.__UFO_DEFAULT_INTERACTION_ID__) {
+    return globalThis.__UFO_DEFAULT_INTERACTION_ID__;
+  }
+
+  // Create and store new instance globally
+  const instance = new ObservableInteractionID();
+  globalThis.__UFO_DEFAULT_INTERACTION_ID__ = instance;
+  return instance;
+};
+
+// The default InteractionID object is a global singleton stored in globalThis.
+// It holds the root value used in routing and is updated when new interactions start.
+export const DefaultInteractionID = initializeGlobalDefaultInteractionID();
+
+// Subscription functions
+export const subscribeToInteractionIdChanges = listener => {
+  if (!fg('platform_ufo_hold_cross_interaction')) {
+    // Return a no-op unsubscribe function when feature flag is disabled
+    return () => {};
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
 };
 
 // We use a context to allow modals to have their own lifecycle

package/dist/es2019/load-hold/UFOLoadHold.js

@@ -1,7 +1,32 @@
-import React, { useContext, useEffect, useLayoutEffect } from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import UFOInteractionContext from '../interaction-context';
+import UFOInteractionIDContext, { subscribeToInteractionIdChanges } from '../interaction-id-context';
 const useLayoutEffectSAFE = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
+/**
+ * Custom hook to track changes to the interaction ID.
+ * Uses a subscription system when feature flag is enabled, otherwise returns the current value.
+ */
+function useInteractionIdValue() {
+  const interactionId = useContext(UFOInteractionIDContext);
+  const [currentId, setCurrentId] = useState((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+  useLayoutEffectSAFE(() => {
+    if (fg('platform_ufo_hold_cross_interaction')) {
+      // New subscription-based approach
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+      const unsubscribe = subscribeToInteractionIdChanges(newId => {
+        setCurrentId(newId);
+      });
+      return unsubscribe;
+    } else {
+      // Legacy behavior - just return the current value without subscription
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+    }
+  }, [interactionId]);
+  return currentId;
+}
+
 /**
  * Render this whenever you're loading.
  *
@@ -53,6 +78,8 @@ export default function UFOLoadHold({
   hold = true,
   experimental = false
 }) {
+  const currentInteractionId = useInteractionIdValue();
+
   // react-18: useId instead
   const context = useContext(UFOInteractionContext);
   useLayoutEffectSAFE(() => {
@@ -62,7 +89,7 @@ export default function UFOLoadHold({
       }
       return context.hold(name);
     }
-  }, [hold, context, name]);
+  }, [hold, context, name, currentInteractionId]);
 
   // react-18: can return children directly
   return children != null ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;

package/dist/esm/interaction-id-context/index.js

@@ -1,15 +1,70 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 // Same structure as react's useRef.
 // This allows modals to use a ref to scope their value
 // const id = useRef(null);
 // <InteractionIDContext.Provider value={id}>...<
 
-// The default InteractionID object is a global singleton
-// It's the one that holds the root value used in routing,
-// and is overwritten when we have new interactions start.
-export var DefaultInteractionID = {
-  current: null
+// Subscription system for interaction ID changes
+
+var listeners = new Set();
+
+// Observable interaction ID implementation
+var ObservableInteractionID = /*#__PURE__*/function () {
+  function ObservableInteractionID() {
+    _classCallCheck(this, ObservableInteractionID);
+    _defineProperty(this, "_current", null);
+  }
+  return _createClass(ObservableInteractionID, [{
+    key: "current",
+    get: function get() {
+      return this._current;
+    },
+    set: function set(newId) {
+      var oldId = this._current;
+      this._current = newId;
+
+      // Notify all listeners if the ID actually changed and feature flag is enabled
+      if (oldId !== newId && fg('platform_ufo_hold_cross_interaction')) {
+        listeners.forEach(function (listener) {
+          return listener(newId);
+        });
+      }
+    }
+  }]);
+}(); // Type declaration for globalThis extension
+// Ensures a single DefaultInteractionID instance exists across the entire application,
+// even when the module is loaded multiple times in different contexts
+var initializeGlobalDefaultInteractionID = function initializeGlobalDefaultInteractionID() {
+  // Return existing instance if already initialized
+  if (globalThis.__UFO_DEFAULT_INTERACTION_ID__) {
+    return globalThis.__UFO_DEFAULT_INTERACTION_ID__;
+  }
+
+  // Create and store new instance globally
+  var instance = new ObservableInteractionID();
+  globalThis.__UFO_DEFAULT_INTERACTION_ID__ = instance;
+  return instance;
+};
+
+// The default InteractionID object is a global singleton stored in globalThis.
+// It holds the root value used in routing and is updated when new interactions start.
+export var DefaultInteractionID = initializeGlobalDefaultInteractionID();
+
+// Subscription functions
+export var subscribeToInteractionIdChanges = function subscribeToInteractionIdChanges(listener) {
+  if (!fg('platform_ufo_hold_cross_interaction')) {
+    // Return a no-op unsubscribe function when feature flag is disabled
+    return function () {};
+  }
+  listeners.add(listener);
+  return function () {
+    listeners.delete(listener);
+  };
 };
 
 // We use a context to allow modals to have their own lifecycle

package/dist/esm/load-hold/UFOLoadHold.js

@@ -1,7 +1,36 @@
-import React, { useContext, useEffect, useLayoutEffect } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useContext, useEffect, useLayoutEffect, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import UFOInteractionContext from '../interaction-context';
+import UFOInteractionIDContext, { subscribeToInteractionIdChanges } from '../interaction-id-context';
 var useLayoutEffectSAFE = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
+/**
+ * Custom hook to track changes to the interaction ID.
+ * Uses a subscription system when feature flag is enabled, otherwise returns the current value.
+ */
+function useInteractionIdValue() {
+  var interactionId = useContext(UFOInteractionIDContext);
+  var _useState = useState((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentId = _useState2[0],
+    setCurrentId = _useState2[1];
+  useLayoutEffectSAFE(function () {
+    if (fg('platform_ufo_hold_cross_interaction')) {
+      // New subscription-based approach
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+      var unsubscribe = subscribeToInteractionIdChanges(function (newId) {
+        setCurrentId(newId);
+      });
+      return unsubscribe;
+    } else {
+      // Legacy behavior - just return the current value without subscription
+      setCurrentId((interactionId === null || interactionId === void 0 ? void 0 : interactionId.current) || null);
+    }
+  }, [interactionId]);
+  return currentId;
+}
+
 /**
  * Render this whenever you're loading.
  *
@@ -54,6 +83,8 @@ export default function UFOLoadHold(_ref) {
     hold = _ref$hold === void 0 ? true : _ref$hold,
     _ref$experimental = _ref.experimental,
     experimental = _ref$experimental === void 0 ? false : _ref$experimental;
+  var currentInteractionId = useInteractionIdValue();
+
   // react-18: useId instead
   var context = useContext(UFOInteractionContext);
   useLayoutEffectSAFE(function () {
@@ -63,7 +94,7 @@ export default function UFOLoadHold(_ref) {
       }
       return context.hold(name);
     }
-  }, [hold, context, name]);
+  }, [hold, context, name, currentInteractionId]);
 
   // react-18: can return children directly
   return children != null ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;

package/dist/types/interaction-id-context/index.d.ts

@@ -2,7 +2,12 @@
 export type InteractionIDContextType = {
     current: string | null;
 };
+type InteractionIDListener = (newId: string | null) => void;
+declare global {
+    var __UFO_DEFAULT_INTERACTION_ID__: InteractionIDContextType | undefined;
+}
 export declare const DefaultInteractionID: InteractionIDContextType;
+export declare const subscribeToInteractionIdChanges: (listener: InteractionIDListener) => (() => void);
 declare const _default: import("react").Context<InteractionIDContextType>;
 export default _default;
 export declare const getInteractionId: () => InteractionIDContextType;

package/dist/types-ts4.5/interaction-id-context/index.d.ts

@@ -2,7 +2,12 @@
 export type InteractionIDContextType = {
     current: string | null;
 };
+type InteractionIDListener = (newId: string | null) => void;
+declare global {
+    var __UFO_DEFAULT_INTERACTION_ID__: InteractionIDContextType | undefined;
+}
 export declare const DefaultInteractionID: InteractionIDContextType;
+export declare const subscribeToInteractionIdChanges: (listener: InteractionIDListener) => (() => void);
 declare const _default: import("react").Context<InteractionIDContextType>;
 export default _default;
 export declare const getInteractionId: () => InteractionIDContextType;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "3.13.10",
+	"version": "3.13.12",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -168,6 +168,9 @@
 		},
 		"platform_ufo_v3_add_start_entry": {
 			"type": "boolean"
+		},
+		"platform_ufo_hold_cross_interaction": {
+			"type": "boolean"
 		}
 	}
 }