@atlaskit/react-ufo 3.13.10 → 3.13.11

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 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,62 @@
 "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
+// 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);
+        });
+      }
+    }
+  }]);
+}(); // 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
+var DefaultInteractionID = exports.DefaultInteractionID = new ObservableInteractionID();
+
+// 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,50 @@
+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}>...<
 
+// 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));
+    }
+  }
+}
+
 // 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
+export const DefaultInteractionID = new ObservableInteractionID();
+
+// 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,56 @@
+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
+// 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);
+        });
+      }
+    }
+  }]);
+}(); // 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
+export var DefaultInteractionID = new ObservableInteractionID();
+
+// 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,9 @@
 export type InteractionIDContextType = {
     current: string | null;
 };
+type InteractionIDListener = (newId: string | null) => void;
 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,9 @@
 export type InteractionIDContextType = {
     current: string | null;
 };
+type InteractionIDListener = (newId: string | null) => void;
 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.11",
 	"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"
 		}
 	}
 }