@atlaskit/inline-dialog 17.2.9 → 18.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/inline-dialog
 
+## 18.0.0
+
+### Major Changes
+
+- [`d636af20c6304`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d636af20c6304) -
+  This replaces `react-node-resolver` which uses `findDOMNode` under the hood with a direct `ref`
+  functionality to pass the first child of an Inline Dialog around for internal use.
+
+  There is some risk to this as while we tested this internally via a feature gate with no issues,
+  this could be breaking in the instance where the children you pass to `<InlineDialog />` is either
+  inconsistent, or the first element is not the target we expected.
+
 ## 17.2.9
 
 ### Patch Changes

package/dist/cjs/InlineDialog/index.js

@@ -11,9 +11,7 @@ var _bindEventListener = require("bind-event-listener");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _layering = require("@atlaskit/layering");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
-var _nodeResolverWrapper = _interopRequireDefault(require("./node-resolver-wrapper"));
 var _container = require("./styled/container");
 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 _checkIsChildOfPortal = function checkIsChildOfPortal(node) {
@@ -176,17 +174,18 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
     }, typeof content === 'function' ? content() : content);
   }) : null;
   return /*#__PURE__*/_react.default.createElement(_popper.Manager, null, /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref5) {
-    var ref = _ref5.ref;
-    return /*#__PURE__*/_react.default.createElement(_nodeResolverWrapper.default, {
-      innerRef: function innerRef(node) {
-        triggerRef.current = node;
-        if (typeof ref === 'function') {
-          ref(node);
+    var _ref6 = _ref5.ref;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: function ref(node) {
+        // Resolve to the first element child of the div in `children`
+        var firstElementChild = (node === null || node === void 0 ? void 0 : node.firstElementChild) || null;
+        triggerRef.current = firstElementChild;
+        if (typeof _ref6 === 'function') {
+          _ref6(firstElementChild);
         } else {
-          ref.current = node;
+          _ref6.current = firstElementChild;
         }
-      },
-      hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform_design_system_team_portal_logic_r18_fix')
+      }
     }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children));
   }), isOpen ? /*#__PURE__*/_react.default.createElement(_layering.Layering, {
     isDisabled: false

package/dist/es2019/InlineDialog/index.js

@@ -3,9 +3,7 @@ import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import { Layering, useCloseOnEscapePress, useLayering } from '@atlaskit/layering';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
-import NodeResolverWrapper from './node-resolver-wrapper';
 import { Container } from './styled/container';
 const checkIsChildOfPortal = node => {
   if (!node) {
@@ -161,16 +159,17 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
   }, typeof content === 'function' ? content() : content)) : null;
   return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, ({
     ref
-  }) => /*#__PURE__*/React.createElement(NodeResolverWrapper, {
-    innerRef: node => {
-      triggerRef.current = node;
+  }) => /*#__PURE__*/React.createElement("div", {
+    ref: node => {
+      // Resolve to the first element child of the div in `children`
+      const firstElementChild = (node === null || node === void 0 ? void 0 : node.firstElementChild) || null;
+      triggerRef.current = firstElementChild;
       if (typeof ref === 'function') {
-        ref(node);
+        ref(firstElementChild);
       } else {
-        ref.current = node;
+        ref.current = firstElementChild;
       }
-    },
-    hasNodeResolver: !fg('platform_design_system_team_portal_logic_r18_fix')
+    }
   }, /*#__PURE__*/React.createElement(React.Fragment, null, children))), isOpen ? /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
   }, popper, /*#__PURE__*/React.createElement(CloseManager, {

package/dist/esm/InlineDialog/index.js

@@ -3,9 +3,7 @@ import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import { Layering, useCloseOnEscapePress, useLayering } from '@atlaskit/layering';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
-import NodeResolverWrapper from './node-resolver-wrapper';
 import { Container } from './styled/container';
 var _checkIsChildOfPortal = function checkIsChildOfPortal(node) {
   if (!node) {
@@ -167,17 +165,18 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
     }, typeof content === 'function' ? content() : content);
   }) : null;
   return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref5) {
-    var ref = _ref5.ref;
-    return /*#__PURE__*/React.createElement(NodeResolverWrapper, {
-      innerRef: function innerRef(node) {
-        triggerRef.current = node;
-        if (typeof ref === 'function') {
-          ref(node);
+    var _ref6 = _ref5.ref;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: function ref(node) {
+        // Resolve to the first element child of the div in `children`
+        var firstElementChild = (node === null || node === void 0 ? void 0 : node.firstElementChild) || null;
+        triggerRef.current = firstElementChild;
+        if (typeof _ref6 === 'function') {
+          _ref6(firstElementChild);
         } else {
-          ref.current = node;
+          _ref6.current = firstElementChild;
         }
-      },
-      hasNodeResolver: !fg('platform_design_system_team_portal_logic_r18_fix')
+      }
     }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
   }), isOpen ? /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/inline-dialog",
-	"version": "17.2.9",
+	"version": "18.0.0",
 	"description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,11 +40,10 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/theme": "^20.0.0",
-		"@atlaskit/tokens": "^6.1.0",
+		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
-		"bind-event-listener": "^3.0.0",
-		"react-node-resolver": "^1.0.1"
+		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -54,18 +53,17 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.4.0",
-		"@atlaskit/css": "^0.12.0",
+		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/datetime-picker": "^17.0.0",
 		"@atlaskit/docs": "^11.0.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/modal-dialog": "^14.3.0",
-		"@atlaskit/primitives": "^14.12.0",
+		"@atlaskit/primitives": "^14.14.0",
 		"@atlaskit/section-message": "^8.7.0",
 		"@atlaskit/select": "^21.2.0",
 		"@atlassian/ssr-tests": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
-		"@types/react-node-resolver": "^2.0.0",
 		"react-dom": "^18.2.0",
 		"react-lorem-component": "^0.13.0"
 	},
@@ -105,9 +103,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_design_system_team_portal_logic_r18_fix": {
-			"type": "boolean"
-		},
 		"dst-a11y__replace-anchor-with-link__design-system-": {
 			"type": "boolean"
 		}

package/dist/cjs/InlineDialog/node-resolver-wrapper.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
-/**
- * A wrapper component that conditionally applies a NodeResolver to its children.
- *
- * Note: NodeResolver should not be used in React 18 concurrent mode. This component
- * is intended to be removed once the feature flag  is removed.
- * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
- * @param {ReactElement} props.children - The child elements to be wrapped.
- * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
- * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
- */
-var NodeResolverWrapper = function NodeResolverWrapper(_ref) {
-  var hasNodeResolver = _ref.hasNodeResolver,
-    children = _ref.children,
-    innerRef = _ref.innerRef;
-  if (hasNodeResolver) {
-    return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
-      innerRef: innerRef
-    }, children);
-  }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: function ref(node) {
-      innerRef(node === null || node === void 0 ? void 0 : node.firstElementChild);
-    }
-  }, children);
-};
-var _default = exports.default = NodeResolverWrapper;

package/dist/es2019/InlineDialog/node-resolver-wrapper.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import NodeResolver from 'react-node-resolver';
-/**
- * A wrapper component that conditionally applies a NodeResolver to its children.
- *
- * Note: NodeResolver should not be used in React 18 concurrent mode. This component
- * is intended to be removed once the feature flag  is removed.
- * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
- * @param {ReactElement} props.children - The child elements to be wrapped.
- * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
- * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
- */
-const NodeResolverWrapper = ({
-  hasNodeResolver,
-  children,
-  innerRef
-}) => {
-  if (hasNodeResolver) {
-    return /*#__PURE__*/React.createElement(NodeResolver, {
-      innerRef: innerRef
-    }, children);
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    ref: node => {
-      innerRef(node === null || node === void 0 ? void 0 : node.firstElementChild);
-    }
-  }, children);
-};
-export default NodeResolverWrapper;

package/dist/esm/InlineDialog/node-resolver-wrapper.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import NodeResolver from 'react-node-resolver';
-/**
- * A wrapper component that conditionally applies a NodeResolver to its children.
- *
- * Note: NodeResolver should not be used in React 18 concurrent mode. This component
- * is intended to be removed once the feature flag  is removed.
- * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
- * @param {ReactElement} props.children - The child elements to be wrapped.
- * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
- * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
- */
-var NodeResolverWrapper = function NodeResolverWrapper(_ref) {
-  var hasNodeResolver = _ref.hasNodeResolver,
-    children = _ref.children,
-    innerRef = _ref.innerRef;
-  if (hasNodeResolver) {
-    return /*#__PURE__*/React.createElement(NodeResolver, {
-      innerRef: innerRef
-    }, children);
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    ref: function ref(node) {
-      innerRef(node === null || node === void 0 ? void 0 : node.firstElementChild);
-    }
-  }, children);
-};
-export default NodeResolverWrapper;

package/dist/types/InlineDialog/node-resolver-wrapper.d.ts

@@ -1,18 +0,0 @@
-import React, { type FC, type ReactElement } from 'react';
-interface NodeResolverWrapperProps {
-    hasNodeResolver: boolean;
-    innerRef: React.RefCallback<Element>;
-    children: ReactElement;
-}
-/**
- * A wrapper component that conditionally applies a NodeResolver to its children.
- *
- * Note: NodeResolver should not be used in React 18 concurrent mode. This component
- * is intended to be removed once the feature flag  is removed.
- * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
- * @param {ReactElement} props.children - The child elements to be wrapped.
- * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
- * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
- */
-declare const NodeResolverWrapper: FC<NodeResolverWrapperProps>;
-export default NodeResolverWrapper;

package/dist/types-ts4.5/InlineDialog/node-resolver-wrapper.d.ts

@@ -1,18 +0,0 @@
-import React, { type FC, type ReactElement } from 'react';
-interface NodeResolverWrapperProps {
-    hasNodeResolver: boolean;
-    innerRef: React.RefCallback<Element>;
-    children: ReactElement;
-}
-/**
- * A wrapper component that conditionally applies a NodeResolver to its children.
- *
- * Note: NodeResolver should not be used in React 18 concurrent mode. This component
- * is intended to be removed once the feature flag  is removed.
- * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
- * @param {ReactElement} props.children - The child elements to be wrapped.
- * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
- * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
- */
-declare const NodeResolverWrapper: FC<NodeResolverWrapperProps>;
-export default NodeResolverWrapper;