@atlaskit/emoji 71.15.8 → 71.15.9

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/emoji
 
+## 71.15.9
+
+### Patch Changes
+
+- [`8442d3ac8c58b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8442d3ac8c58b) -
+  Migrate ReactDOM.render/unmountComponentAtNode in Popup to createRoot/root.unmount() behind the
+  nike_r19_render_unmount feature gate, as part of the React 19 migration
+- Updated dependencies
+
 ## 71.15.8
 
 ### Patch Changes

package/dist/cjs/components/common/Popup.js

@@ -9,7 +9,37 @@ exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _client = require("react-dom/client");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
+var reactRoots = new WeakMap();
+
+/** Mounts `element` into `mountPoint`: uses the React 18/19 `createRoot` API when `nike_r19_render_unmount` is on, else the legacy render path. */
+var renderToMountPoint = function renderToMountPoint(element, mountPoint) {
+  if ((0, _platformFeatureFlags.fg)('nike_r19_render_unmount')) {
+    var root = reactRoots.get(mountPoint);
+    if (!root) {
+      root = (0, _client.createRoot)(mountPoint);
+      reactRoots.set(mountPoint, root);
+    }
+    root.render(element);
+  } else {
+    _reactDom.default.render(element, mountPoint);
+  }
+};
+
+/** Unmounts the tree at `mountPoint`: uses `root.unmount()` when `nike_r19_render_unmount` is on, else the legacy unmount path. */
+var unmountFromMountPoint = function unmountFromMountPoint(mountPoint) {
+  if ((0, _platformFeatureFlags.fg)('nike_r19_render_unmount')) {
+    var root = reactRoots.get(mountPoint);
+    if (root) {
+      root.unmount();
+      reactRoots.delete(mountPoint);
+    }
+  } else {
+    _reactDom.default.unmountComponentAtNode(mountPoint);
+  }
+};
 var getTargetNode = function getTargetNode(target) {
   if (typeof target === 'string') {
     return document.querySelector(target);
@@ -121,7 +151,7 @@ var Popup = function Popup(props) {
     if (!popup.current) {
       return;
     }
-    _reactDom.default.render(children, popup.current);
+    renderToMountPoint(children, popup.current);
   }, [children]);
   (0, _react.useEffect)(function () {
     popup.current = document.createElement('div');
@@ -141,7 +171,7 @@ var Popup = function Popup(props) {
       }
       window.removeEventListener('resize', handleResize);
       if (popup.current) {
-        _reactDom.default.unmountComponentAtNode(popup.current);
+        unmountFromMountPoint(popup.current);
         document.body.removeChild(popup.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.15.7"
+      packageVersion: "71.15.8"
     }, attributes)
   };
 };

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

@@ -1,5 +1,35 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { fg } from '@atlaskit/platform-feature-flags';
+let reactRoots = new WeakMap();
+
+/** Mounts `element` into `mountPoint`: uses the React 18/19 `createRoot` API when `nike_r19_render_unmount` is on, else the legacy render path. */
+const renderToMountPoint = (element, mountPoint) => {
+  if (fg('nike_r19_render_unmount')) {
+    let root = reactRoots.get(mountPoint);
+    if (!root) {
+      root = createRoot(mountPoint);
+      reactRoots.set(mountPoint, root);
+    }
+    root.render(element);
+  } else {
+    ReactDOM.render(element, mountPoint);
+  }
+};
+
+/** Unmounts the tree at `mountPoint`: uses `root.unmount()` when `nike_r19_render_unmount` is on, else the legacy unmount path. */
+const unmountFromMountPoint = mountPoint => {
+  if (fg('nike_r19_render_unmount')) {
+    const root = reactRoots.get(mountPoint);
+    if (root) {
+      root.unmount();
+      reactRoots.delete(mountPoint);
+    }
+  } else {
+    ReactDOM.unmountComponentAtNode(mountPoint);
+  }
+};
 const getTargetNode = target => {
   if (typeof target === 'string') {
     return document.querySelector(target);
@@ -103,7 +133,7 @@ const Popup = props => {
     if (!popup.current) {
       return;
     }
-    ReactDOM.render(children, popup.current);
+    renderToMountPoint(children, popup.current);
   }, [children]);
   useEffect(() => {
     popup.current = document.createElement('div');
@@ -123,7 +153,7 @@ const Popup = props => {
       }
       window.removeEventListener('resize', handleResize);
       if (popup.current) {
-        ReactDOM.unmountComponentAtNode(popup.current);
+        unmountFromMountPoint(popup.current);
         document.body.removeChild(popup.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.15.7",
+    packageVersion: "71.15.8",
     ...attributes
   }
 });

package/dist/esm/components/common/Popup.js

@@ -1,6 +1,36 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { fg } from '@atlaskit/platform-feature-flags';
+var reactRoots = new WeakMap();
+
+/** Mounts `element` into `mountPoint`: uses the React 18/19 `createRoot` API when `nike_r19_render_unmount` is on, else the legacy render path. */
+var renderToMountPoint = function renderToMountPoint(element, mountPoint) {
+  if (fg('nike_r19_render_unmount')) {
+    var root = reactRoots.get(mountPoint);
+    if (!root) {
+      root = createRoot(mountPoint);
+      reactRoots.set(mountPoint, root);
+    }
+    root.render(element);
+  } else {
+    ReactDOM.render(element, mountPoint);
+  }
+};
+
+/** Unmounts the tree at `mountPoint`: uses `root.unmount()` when `nike_r19_render_unmount` is on, else the legacy unmount path. */
+var unmountFromMountPoint = function unmountFromMountPoint(mountPoint) {
+  if (fg('nike_r19_render_unmount')) {
+    var root = reactRoots.get(mountPoint);
+    if (root) {
+      root.unmount();
+      reactRoots.delete(mountPoint);
+    }
+  } else {
+    ReactDOM.unmountComponentAtNode(mountPoint);
+  }
+};
 var getTargetNode = function getTargetNode(target) {
   if (typeof target === 'string') {
     return document.querySelector(target);
@@ -112,7 +142,7 @@ var Popup = function Popup(props) {
     if (!popup.current) {
       return;
     }
-    ReactDOM.render(children, popup.current);
+    renderToMountPoint(children, popup.current);
   }, [children]);
   useEffect(function () {
     popup.current = document.createElement('div');
@@ -132,7 +162,7 @@ var Popup = function Popup(props) {
       }
       window.removeEventListener('resize', handleResize);
       if (popup.current) {
-        ReactDOM.unmountComponentAtNode(popup.current);
+        unmountFromMountPoint(popup.current);
         document.body.removeChild(popup.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.15.7"
+      packageVersion: "71.15.8"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.15.8",
+	"version": "71.15.9",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,8 +37,8 @@
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/form": "^16.1.0",
 		"@atlaskit/heading": "^7.0.0",
-		"@atlaskit/icon": "^37.2.0",
-		"@atlaskit/icon-lab": "^7.4.0",
+		"@atlaskit/icon": "^37.3.0",
+		"@atlaskit/icon-lab": "^7.5.0",
 		"@atlaskit/image": "^5.0.0",
 		"@atlaskit/logo": "^21.4.0",
 		"@atlaskit/media-client": "^37.2.0",
@@ -116,6 +116,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"nike_r19_render_unmount": {
+			"type": "boolean"
+		},
 		"platform_index_emoji_just_in_time": {
 			"type": "boolean"
 		},