@atlaskit/link-create 1.8.1 → 1.9.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-create
 
+## 1.9.1
+
+### Patch Changes
+
+- [#43170](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43170) [`959e2b89af9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/959e2b89af9) - Change exit warning modal to show only when fields have been modified by user
+
+## 1.9.0
+
+### Minor Changes
+
+- [#43068](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43068) [`76817bfbd5d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/76817bfbd5d) - EDM-8402: under a FF platform.linking-platform.link-create.enable-edit internally refactor onCloseComplete hook to be conditionally called when active prop is false
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.8.1
 
 ### Patch Changes

package/dist/cjs/ui/create-form/main.js

@@ -118,10 +118,18 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
       css: formStyles
     }, (0, _react2.jsx)(_reactFinalForm.FormSpy, {
       subscription: {
-        dirty: true
+        modified: true
       },
       onChange: function onChange(state) {
-        return setShouldShowWarning(state.dirty);
+        // determine if any of the fields have been modified
+        if (!state.modified) {
+          setShouldShowWarning(false);
+          return;
+        }
+        var isModified = Object.values(state.modified).some(function (value) {
+          return value;
+        });
+        setShouldShowWarning(isModified);
       }
     }), (0, _react2.jsx)(_primitives.Box, null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter, {
       formErrorMessage: formErrorMessage,

package/dist/cjs/ui/link-create/confirm-dismiss-dialog/main.js

@@ -41,7 +41,7 @@ var ConfirmDismissDialog = exports.ConfirmDismissDialog = function ConfirmDismis
     onClose: onCancelDismiss,
     width: "small"
   }, /*#__PURE__*/_react.default.createElement(_components.ScreenViewedEvent, {
-    screen: "linkCreateExitWarningScreen"
+    screen: screen
   }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, intl.formatMessage(_messages.default.title))), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, intl.formatMessage(_messages.default.description)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
     actionSubjectId: "cancel",
     appearance: "subtle",

package/dist/cjs/ui/link-create/main.js

@@ -10,7 +10,6 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
@@ -28,11 +27,10 @@ var _editModal = require("./edit-modal");
 var _errorBoundary = require("./error-boundary");
 var _messages = require("./messages");
 var _trackMount = _interopRequireDefault(require("./track-mount"));
-var _excluded = ["testId", "triggeredFrom"],
-  _excluded2 = ["active", "modalTitle", "onCreate", "onFailure", "onCancel", "onOpenComplete", "onCloseComplete"];
-/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
 var TEST_ID = exports.TEST_ID = 'link-create';
 var LinkCreateContent = function LinkCreateContent(_ref) {
   var plugins = _ref.plugins,
@@ -45,29 +43,24 @@ var LinkCreateContent = function LinkCreateContent(_ref) {
   }
   return (0, _react2.jsx)(_react.Fragment, null, chosenOne.form);
 };
-var LinkCreate = function LinkCreate(_ref2) {
-  var _ref2$testId = _ref2.testId,
+var LinkCreateWithModal = function LinkCreateWithModal(_ref2) {
+  var active = _ref2.active,
+    modalTitle = _ref2.modalTitle,
+    onCreate = _ref2.onCreate,
+    onFailure = _ref2.onFailure,
+    onCancel = _ref2.onCancel,
+    onComplete = _ref2.onComplete,
+    onOpenComplete = _ref2.onOpenComplete,
+    onCloseComplete = _ref2.onCloseComplete,
+    _ref2$testId = _ref2.testId,
     testId = _ref2$testId === void 0 ? TEST_ID : _ref2$testId,
-    triggeredFrom = _ref2.triggeredFrom,
-    restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return (0, _react2.jsx)(_primitives.Box, {
-    testId: testId
-  }, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_trackMount.default, null), (0, _react2.jsx)(LinkCreateContent, restProps)));
-};
-var LinkCreateWithModal = function LinkCreateWithModal(_ref3) {
-  var active = _ref3.active,
-    modalTitle = _ref3.modalTitle,
-    onCreate = _ref3.onCreate,
-    onFailure = _ref3.onFailure,
-    onCancel = _ref3.onCancel,
-    onOpenComplete = _ref3.onOpenComplete,
-    onCloseComplete = _ref3.onCloseComplete,
-    createProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
+    plugins = _ref2.plugins,
+    entityKey = _ref2.entityKey;
   var intl = (0, _reactIntlNext.useIntl)();
   var _useFormContext = (0, _formContext.useFormContext)(),
     setFormErrorMessage = _useFormContext.setFormErrorMessage;
   var handleCreate = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(result) {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(result) {
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -86,7 +79,7 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref3) {
       }, _callee);
     }));
     return function (_x) {
-      return _ref4.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }(), [onCreate, setFormErrorMessage]);
   var handleFailure = (0, _react.useCallback)(function (error) {
@@ -123,9 +116,14 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref3) {
     onOpenComplete: onOpenComplete,
     onCloseComplete: onCloseComplete,
     width: "".concat(_constants.CREATE_FORM_MAX_WIDTH_IN_PX, "px")
-  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, modalTitle || intl.formatMessage(_messages.messages.heading))), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(LinkCreate, createProps)))), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.enable-edit') && createProps.onComplete && (0, _react2.jsx)(_editModal.EditModal, {
+  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, modalTitle || intl.formatMessage(_messages.messages.heading))), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_primitives.Box, {
+    testId: testId
+  }, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_trackMount.default, null), (0, _react2.jsx)(LinkCreateContent, {
+    plugins: plugins,
+    entityKey: entityKey
+  })))))), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.enable-edit') && onComplete && (0, _react2.jsx)(_editModal.EditModal, {
     onCloseComplete: onCloseComplete,
-    onClose: createProps.onComplete
+    onClose: onComplete
   }), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.confirm-dismiss-dialog') && (0, _react2.jsx)(_confirmDismissDialog.ConfirmDismissDialog, {
     active: showExitWarning,
     onClose: handleCloseExitWarning
@@ -133,24 +131,35 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref3) {
 };
 var LinkCreateModal = function LinkCreateModal(props) {
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.enable-edit')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var shouldCallCloseComplete = (0, _react.useRef)(!props.active);
+
+    // modal calls onCloseComplete in a useEffect(), so we can track whether
+    // or not we should execute it based on the active prop in a
+    // useLayoutEffect() which will be run before child useEffect()s
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useLayoutEffect)(function () {
+      // onCloseComplete should only be called when it is not active
+      shouldCallCloseComplete.current = !props.active;
+    }, [props.active]);
     return (0, _react2.jsx)(_pluginContext.LinkCreatePluginsProvider, {
       plugins: props.plugins,
       entityKey: props.entityKey
     }, function (pluginsProvider) {
       return (0, _react2.jsx)(_editPostCreateContext.EditPostCreateModalProvider, {
         active: !!props.active
-      }, function (_ref5) {
+      }, function (_ref4) {
         var _pluginsProvider$acti;
-        var setEditViewPayload = _ref5.setEditViewPayload,
-          editViewPayload = _ref5.editViewPayload,
-          shouldActivateEditView = _ref5.shouldActivateEditView,
-          enableEditView = _ref5.enableEditView;
+        var setEditViewPayload = _ref4.setEditViewPayload,
+          editViewPayload = _ref4.editViewPayload,
+          shouldActivateEditView = _ref4.shouldActivateEditView,
+          enableEditView = _ref4.enableEditView;
         return (0, _react2.jsx)(_formContext.FormContextProvider, {
           enableEditView: pluginsProvider !== null && pluginsProvider !== void 0 && (_pluginsProvider$acti = pluginsProvider.activePlugin) !== null && _pluginsProvider$acti !== void 0 && _pluginsProvider$acti.editView && props !== null && props !== void 0 && props.onComplete ? enableEditView : undefined
         }, (0, _react2.jsx)(_exitWarningModalContext.ExitWarningModalProvider, null, (0, _react2.jsx)(LinkCreateWithModal, (0, _extends2.default)({}, props, {
           active: props.active && !editViewPayload,
           onCreate: /*#__PURE__*/function () {
-            var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(payload) {
+            var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(payload) {
               var _props$onCreate;
               return _regenerator.default.wrap(function _callee2$(_context2) {
                 while (1) switch (_context2.prev = _context2.next) {
@@ -175,16 +184,25 @@ var LinkCreateModal = function LinkCreateModal(props) {
               }, _callee2);
             }));
             return function (_x2) {
-              return _ref6.apply(this, arguments);
+              return _ref5.apply(this, arguments);
             };
-          }()
+          }(),
+          onCloseComplete: function onCloseComplete() {
+            if (shouldCallCloseComplete.current) {
+              var _props$onCloseComplet;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              (_props$onCloseComplet = props.onCloseComplete) === null || _props$onCloseComplet === void 0 || _props$onCloseComplet.call.apply(_props$onCloseComplet, [props].concat(args));
+            }
+          }
         }))));
       });
     });
   }
   return (0, _react2.jsx)(_formContext.FormContextProvider, null, (0, _react2.jsx)(_exitWarningModalContext.ExitWarningModalProvider, null, (0, _react2.jsx)(LinkCreateWithModal, (0, _extends2.default)({}, props, {
     onCreate: /*#__PURE__*/function () {
-      var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(payload) {
+      var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(payload) {
         var _props$onCreate2, _props$onComplete;
         return _regenerator.default.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -200,7 +218,7 @@ var LinkCreateModal = function LinkCreateModal(props) {
         }, _callee3);
       }));
       return function (_x3) {
-        return _ref7.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }()
   }))));

package/dist/cjs/ui/main.js

@@ -35,7 +35,7 @@ var LinkCreateWithAnalyticsContext = (0, _analytics.withLinkCreateAnalyticsConte
 }));
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.8.1" || '',
+  packageVersion: "1.9.1" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

package/dist/es2019/ui/create-form/main.js

@@ -91,9 +91,17 @@ export const CreateForm = ({
       css: formStyles
     }, jsx(FormSpy, {
       subscription: {
-        dirty: true
+        modified: true
       },
-      onChange: state => setShouldShowWarning(state.dirty)
+      onChange: state => {
+        // determine if any of the fields have been modified
+        if (!state.modified) {
+          setShouldShowWarning(false);
+          return;
+        }
+        const isModified = Object.values(state.modified).some(value => value);
+        setShouldShowWarning(isModified);
+      }
     }), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter, {
       formErrorMessage: formErrorMessage,
       handleCancel: handleCancel,

package/dist/es2019/ui/link-create/confirm-dismiss-dialog/main.js

@@ -31,7 +31,7 @@ export const ConfirmDismissDialog = ({
     onClose: onCancelDismiss,
     width: "small"
   }, /*#__PURE__*/React.createElement(ScreenViewedEvent, {
-    screen: "linkCreateExitWarningScreen"
+    screen: screen
   }), /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, intl.formatMessage(messages.title))), /*#__PURE__*/React.createElement(ModalBody, null, intl.formatMessage(messages.description)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     actionSubjectId: "cancel",
     appearance: "subtle",

package/dist/es2019/ui/link-create/main.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { Fragment, useCallback, useState } from 'react';
+import { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import Modal, { ModalBody, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
@@ -28,24 +28,18 @@ const LinkCreateContent = ({
   }
   return jsx(Fragment, null, chosenOne.form);
 };
-const LinkCreate = ({
-  testId = TEST_ID,
-  triggeredFrom,
-  ...restProps
-}) => {
-  return jsx(Box, {
-    testId: testId
-  }, jsx(ErrorBoundary, null, jsx(TrackMount, null), jsx(LinkCreateContent, restProps)));
-};
 const LinkCreateWithModal = ({
   active,
   modalTitle,
   onCreate,
   onFailure,
   onCancel,
+  onComplete,
   onOpenComplete,
   onCloseComplete,
-  ...createProps
+  testId = TEST_ID,
+  plugins,
+  entityKey
 }) => {
   const intl = useIntl();
   const {
@@ -88,9 +82,14 @@ const LinkCreateWithModal = ({
     onOpenComplete: onOpenComplete,
     onCloseComplete: onCloseComplete,
     width: `${CREATE_FORM_MAX_WIDTH_IN_PX}px`
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, modalTitle || intl.formatMessage(messages.heading))), jsx(ModalBody, null, jsx(LinkCreate, createProps)))), getBooleanFF('platform.linking-platform.link-create.enable-edit') && createProps.onComplete && jsx(EditModal, {
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, modalTitle || intl.formatMessage(messages.heading))), jsx(ModalBody, null, jsx(Box, {
+    testId: testId
+  }, jsx(ErrorBoundary, null, jsx(TrackMount, null), jsx(LinkCreateContent, {
+    plugins: plugins,
+    entityKey: entityKey
+  })))))), getBooleanFF('platform.linking-platform.link-create.enable-edit') && onComplete && jsx(EditModal, {
     onCloseComplete: onCloseComplete,
-    onClose: createProps.onComplete
+    onClose: onComplete
   }), getBooleanFF('platform.linking-platform.link-create.confirm-dismiss-dialog') && jsx(ConfirmDismissDialog, {
     active: showExitWarning,
     onClose: handleCloseExitWarning
@@ -98,6 +97,17 @@ const LinkCreateWithModal = ({
 };
 const LinkCreateModal = props => {
   if (getBooleanFF('platform.linking-platform.link-create.enable-edit')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const shouldCallCloseComplete = useRef(!props.active);
+
+    // modal calls onCloseComplete in a useEffect(), so we can track whether
+    // or not we should execute it based on the active prop in a
+    // useLayoutEffect() which will be run before child useEffect()s
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(() => {
+      // onCloseComplete should only be called when it is not active
+      shouldCallCloseComplete.current = !props.active;
+    }, [props.active]);
     return jsx(LinkCreatePluginsProvider, {
       plugins: props.plugins,
       entityKey: props.entityKey
@@ -128,6 +138,12 @@ const LinkCreateModal = props => {
               props.onComplete();
             }
           }
+        },
+        onCloseComplete: (...args) => {
+          if (shouldCallCloseComplete.current) {
+            var _props$onCloseComplet;
+            (_props$onCloseComplet = props.onCloseComplete) === null || _props$onCloseComplet === void 0 ? void 0 : _props$onCloseComplet.call(props, ...args);
+          }
         }
       }))));
     }));

package/dist/es2019/ui/main.js

@@ -26,7 +26,7 @@ const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE
 }));
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.8.1" || '',
+  packageVersion: "1.9.1" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/esm/ui/create-form/main.js

@@ -112,10 +112,18 @@ export var CreateForm = function CreateForm(_ref) {
       css: formStyles
     }, jsx(FormSpy, {
       subscription: {
-        dirty: true
+        modified: true
       },
       onChange: function onChange(state) {
-        return setShouldShowWarning(state.dirty);
+        // determine if any of the fields have been modified
+        if (!state.modified) {
+          setShouldShowWarning(false);
+          return;
+        }
+        var isModified = Object.values(state.modified).some(function (value) {
+          return value;
+        });
+        setShouldShowWarning(isModified);
       }
     }), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter, {
       formErrorMessage: formErrorMessage,

package/dist/esm/ui/link-create/confirm-dismiss-dialog/main.js

@@ -31,7 +31,7 @@ export var ConfirmDismissDialog = function ConfirmDismissDialog(_ref) {
     onClose: onCancelDismiss,
     width: "small"
   }, /*#__PURE__*/React.createElement(ScreenViewedEvent, {
-    screen: "linkCreateExitWarningScreen"
+    screen: screen
   }), /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, intl.formatMessage(messages.title))), /*#__PURE__*/React.createElement(ModalBody, null, intl.formatMessage(messages.description)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     actionSubjectId: "cancel",
     appearance: "subtle",

package/dist/esm/ui/link-create/main.js

@@ -1,12 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["testId", "triggeredFrom"],
-  _excluded2 = ["active", "modalTitle", "onCreate", "onFailure", "onCancel", "onOpenComplete", "onCloseComplete"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import { Fragment, useCallback, useState } from 'react';
+import { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import Modal, { ModalBody, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
@@ -35,29 +32,24 @@ var LinkCreateContent = function LinkCreateContent(_ref) {
   }
   return jsx(Fragment, null, chosenOne.form);
 };
-var LinkCreate = function LinkCreate(_ref2) {
-  var _ref2$testId = _ref2.testId,
+var LinkCreateWithModal = function LinkCreateWithModal(_ref2) {
+  var active = _ref2.active,
+    modalTitle = _ref2.modalTitle,
+    onCreate = _ref2.onCreate,
+    onFailure = _ref2.onFailure,
+    onCancel = _ref2.onCancel,
+    onComplete = _ref2.onComplete,
+    onOpenComplete = _ref2.onOpenComplete,
+    onCloseComplete = _ref2.onCloseComplete,
+    _ref2$testId = _ref2.testId,
     testId = _ref2$testId === void 0 ? TEST_ID : _ref2$testId,
-    triggeredFrom = _ref2.triggeredFrom,
-    restProps = _objectWithoutProperties(_ref2, _excluded);
-  return jsx(Box, {
-    testId: testId
-  }, jsx(ErrorBoundary, null, jsx(TrackMount, null), jsx(LinkCreateContent, restProps)));
-};
-var LinkCreateWithModal = function LinkCreateWithModal(_ref3) {
-  var active = _ref3.active,
-    modalTitle = _ref3.modalTitle,
-    onCreate = _ref3.onCreate,
-    onFailure = _ref3.onFailure,
-    onCancel = _ref3.onCancel,
-    onOpenComplete = _ref3.onOpenComplete,
-    onCloseComplete = _ref3.onCloseComplete,
-    createProps = _objectWithoutProperties(_ref3, _excluded2);
+    plugins = _ref2.plugins,
+    entityKey = _ref2.entityKey;
   var intl = useIntl();
   var _useFormContext = useFormContext(),
     setFormErrorMessage = _useFormContext.setFormErrorMessage;
   var handleCreate = useCallback( /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(result) {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(result) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -76,7 +68,7 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref3) {
       }, _callee);
     }));
     return function (_x) {
-      return _ref4.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }(), [onCreate, setFormErrorMessage]);
   var handleFailure = useCallback(function (error) {
@@ -113,9 +105,14 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref3) {
     onOpenComplete: onOpenComplete,
     onCloseComplete: onCloseComplete,
     width: "".concat(CREATE_FORM_MAX_WIDTH_IN_PX, "px")
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, modalTitle || intl.formatMessage(messages.heading))), jsx(ModalBody, null, jsx(LinkCreate, createProps)))), getBooleanFF('platform.linking-platform.link-create.enable-edit') && createProps.onComplete && jsx(EditModal, {
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, modalTitle || intl.formatMessage(messages.heading))), jsx(ModalBody, null, jsx(Box, {
+    testId: testId
+  }, jsx(ErrorBoundary, null, jsx(TrackMount, null), jsx(LinkCreateContent, {
+    plugins: plugins,
+    entityKey: entityKey
+  })))))), getBooleanFF('platform.linking-platform.link-create.enable-edit') && onComplete && jsx(EditModal, {
     onCloseComplete: onCloseComplete,
-    onClose: createProps.onComplete
+    onClose: onComplete
   }), getBooleanFF('platform.linking-platform.link-create.confirm-dismiss-dialog') && jsx(ConfirmDismissDialog, {
     active: showExitWarning,
     onClose: handleCloseExitWarning
@@ -123,24 +120,35 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref3) {
 };
 var LinkCreateModal = function LinkCreateModal(props) {
   if (getBooleanFF('platform.linking-platform.link-create.enable-edit')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var shouldCallCloseComplete = useRef(!props.active);
+
+    // modal calls onCloseComplete in a useEffect(), so we can track whether
+    // or not we should execute it based on the active prop in a
+    // useLayoutEffect() which will be run before child useEffect()s
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useLayoutEffect(function () {
+      // onCloseComplete should only be called when it is not active
+      shouldCallCloseComplete.current = !props.active;
+    }, [props.active]);
     return jsx(LinkCreatePluginsProvider, {
       plugins: props.plugins,
       entityKey: props.entityKey
     }, function (pluginsProvider) {
       return jsx(EditPostCreateModalProvider, {
         active: !!props.active
-      }, function (_ref5) {
+      }, function (_ref4) {
         var _pluginsProvider$acti;
-        var setEditViewPayload = _ref5.setEditViewPayload,
-          editViewPayload = _ref5.editViewPayload,
-          shouldActivateEditView = _ref5.shouldActivateEditView,
-          enableEditView = _ref5.enableEditView;
+        var setEditViewPayload = _ref4.setEditViewPayload,
+          editViewPayload = _ref4.editViewPayload,
+          shouldActivateEditView = _ref4.shouldActivateEditView,
+          enableEditView = _ref4.enableEditView;
         return jsx(FormContextProvider, {
           enableEditView: pluginsProvider !== null && pluginsProvider !== void 0 && (_pluginsProvider$acti = pluginsProvider.activePlugin) !== null && _pluginsProvider$acti !== void 0 && _pluginsProvider$acti.editView && props !== null && props !== void 0 && props.onComplete ? enableEditView : undefined
         }, jsx(ExitWarningModalProvider, null, jsx(LinkCreateWithModal, _extends({}, props, {
           active: props.active && !editViewPayload,
           onCreate: /*#__PURE__*/function () {
-            var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(payload) {
+            var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(payload) {
               var _props$onCreate;
               return _regeneratorRuntime.wrap(function _callee2$(_context2) {
                 while (1) switch (_context2.prev = _context2.next) {
@@ -165,16 +173,25 @@ var LinkCreateModal = function LinkCreateModal(props) {
               }, _callee2);
             }));
             return function (_x2) {
-              return _ref6.apply(this, arguments);
+              return _ref5.apply(this, arguments);
             };
-          }()
+          }(),
+          onCloseComplete: function onCloseComplete() {
+            if (shouldCallCloseComplete.current) {
+              var _props$onCloseComplet;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              (_props$onCloseComplet = props.onCloseComplete) === null || _props$onCloseComplet === void 0 || _props$onCloseComplet.call.apply(_props$onCloseComplet, [props].concat(args));
+            }
+          }
         }))));
       });
     });
   }
   return jsx(FormContextProvider, null, jsx(ExitWarningModalProvider, null, jsx(LinkCreateWithModal, _extends({}, props, {
     onCreate: /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(payload) {
+      var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(payload) {
         var _props$onCreate2, _props$onComplete;
         return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -190,7 +207,7 @@ var LinkCreateModal = function LinkCreateModal(props) {
         }, _callee3);
       }));
       return function (_x3) {
-        return _ref7.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }()
   }))));

package/dist/esm/ui/main.js

@@ -27,7 +27,7 @@ var LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE__
 }));
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.8.1" || '',
+  packageVersion: "1.9.1" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "1.8.1",
+  "version": "1.9.1",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,12 +35,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.15.0",
+    "@atlaskit/button": "^16.16.0",
     "@atlaskit/empty-state": "^7.6.0",
     "@atlaskit/form": "^9.0.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/intl-messages-provider": "^1.0.0",
-    "@atlaskit/linking-common": "^4.17.0",
+    "@atlaskit/linking-common": "^4.18.0",
     "@atlaskit/modal-dialog": "^12.8.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/primitives": "^1.10.0",