@atlaskit/link-create 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-create
 
+## 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
+
+- [#43001](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43001) [`7eed2972d58`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7eed2972d58) - Internal refactor moving show exit warning modal conditions to React context
+
 ## 1.8.0
 
 ### Minor Changes

package/dist/cjs/controllers/exit-warning-modal-context/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useExitWarningModal = exports.ExitWarningModalProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+var ExitWarningModalContext = /*#__PURE__*/(0, _react.createContext)({
+  getShouldShowWarning: function getShouldShowWarning() {
+    return false;
+  },
+  setShouldShowWarning: function setShouldShowWarning() {}
+});
+var ExitWarningModalProvider = exports.ExitWarningModalProvider = function ExitWarningModalProvider(_ref) {
+  var children = _ref.children;
+  var shouldShowWarning = (0, _react.useRef)(false);
+  var getShouldShowWarning = (0, _react.useCallback)(function () {
+    return shouldShowWarning.current;
+  }, []);
+  var setShouldShowWarning = (0, _react.useCallback)(function (show) {
+    shouldShowWarning.current = show;
+  }, []);
+  var value = (0, _react.useMemo)(function () {
+    return {
+      getShouldShowWarning: getShouldShowWarning,
+      setShouldShowWarning: setShouldShowWarning
+    };
+  }, [getShouldShowWarning, setShouldShowWarning]);
+  return /*#__PURE__*/_react.default.createElement(ExitWarningModalContext.Provider, {
+    value: value
+  }, children);
+};
+var useExitWarningModal = exports.useExitWarningModal = function useExitWarningModal() {
+  var value = (0, _react.useContext)(ExitWarningModalContext);
+  if (!value) {
+    throw new Error('useExitWarningModal used outside of ExitWarningModalProvider');
+  }
+  return value;
+};

package/dist/cjs/controllers/form-context/main.js

@@ -19,11 +19,7 @@ var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.createContext)({
     return {};
   },
   setFormErrorMessage: function setFormErrorMessage() {},
-  enableEditView: undefined,
-  setFormDirty: function setFormDirty() {},
-  isFormDirty: function isFormDirty() {
-    return false;
-  }
+  enableEditView: undefined
 });
 var FormContextProvider = exports.FormContextProvider = function FormContextProvider(_ref) {
   var enableEditView = _ref.enableEditView,
@@ -36,13 +32,6 @@ var FormContextProvider = exports.FormContextProvider = function FormContextProv
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     validators = _useState4[0],
     setValidators = _useState4[1];
-  var dirty = (0, _react.useRef)(false);
-  var isFormDirty = (0, _react.useCallback)(function () {
-    return dirty.current;
-  }, [dirty]);
-  var setFormDirty = (0, _react.useCallback)(function (isDirty) {
-    dirty.current = !!isDirty;
-  }, [dirty]);
 
   // Add validators to the form
   var assignValidator = (0, _react.useCallback)(function (name, fieldValidators) {
@@ -66,9 +55,7 @@ var FormContextProvider = exports.FormContextProvider = function FormContextProv
       getValidators: getValidators,
       setFormErrorMessage: setFormErrorMessage,
       formErrorMessage: error,
-      enableEditView: enableEditView,
-      setFormDirty: setFormDirty,
-      isFormDirty: isFormDirty
+      enableEditView: enableEditView
     }
   }, children);
 };

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

@@ -17,6 +17,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../common/constants");
 var _analytics = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
+var _exitWarningModalContext = require("../../controllers/exit-warning-modal-context");
 var _formContext = require("../../controllers/form-context");
 var _formFooter = require("./form-footer");
 var _formLoader = require("./form-loader");
@@ -45,8 +46,9 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
   var _useFormContext = (0, _formContext.useFormContext)(),
     getValidators = _useFormContext.getValidators,
     formErrorMessage = _useFormContext.formErrorMessage,
-    setFormDirty = _useFormContext.setFormDirty,
     enableEditView = _useFormContext.enableEditView;
+  var _useExitWarningModal = (0, _exitWarningModalContext.useExitWarningModal)(),
+    setShouldShowWarning = _useExitWarningModal.setShouldShowWarning;
   var handleSubmit = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(data) {
       var validators, errors, shouldEnableEditView, formData;
@@ -119,7 +121,7 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
         dirty: true
       },
       onChange: function onChange(state) {
-        return setFormDirty(state.dirty);
+        return setShouldShowWarning(state.dirty);
       }
     }), (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

@@ -12,6 +12,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _Button = require("../../../common/ui/Button");
 var _components = require("../../../common/utils/analytics/components");
+var _callbackContext = require("../../../controllers/callback-context");
 var _messages = _interopRequireDefault(require("./messages"));
 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; }
@@ -22,9 +23,17 @@ var context = {
 };
 var ConfirmDismissDialog = exports.ConfirmDismissDialog = function ConfirmDismissDialog(_ref) {
   var active = _ref.active,
-    onCancelDismiss = _ref.onCancelDismiss,
-    onConfirmDismiss = _ref.onConfirmDismiss;
+    onClose = _ref.onClose;
   var intl = (0, _reactIntlNext.useIntl)();
+  var _useLinkCreateCallbac = (0, _callbackContext.useLinkCreateCallback)(),
+    onCancel = _useLinkCreateCallbac.onCancel;
+  var onCancelDismiss = function onCancelDismiss() {
+    return onClose();
+  };
+  var onConfirmDismiss = function onConfirmDismiss() {
+    onClose();
+    onCancel === null || onCancel === void 0 || onCancel();
+  };
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, active && /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
     data: context
   }, /*#__PURE__*/_react.default.createElement(_modalDialog.default, {

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

@@ -20,6 +20,7 @@ var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../common/constants");
 var _callbackContext = require("../../controllers/callback-context");
 var _editPostCreateContext = require("../../controllers/edit-post-create-context");
+var _exitWarningModalContext = require("../../controllers/exit-warning-modal-context");
 var _formContext = require("../../controllers/form-context");
 var _pluginContext = require("../../controllers/plugin-context");
 var _confirmDismissDialog = require("./confirm-dismiss-dialog");
@@ -27,8 +28,8 @@ var _editModal = require("./edit-modal");
 var _errorBoundary = require("./error-boundary");
 var _messages = require("./messages");
 var _trackMount = _interopRequireDefault(require("./track-mount"));
-var _excluded = ["testId", "onCreate", "onFailure", "onCancel", "triggeredFrom"],
-  _excluded2 = ["active", "modalTitle", "onCancel", "onOpenComplete", "onCloseComplete"];
+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; }
@@ -47,15 +48,26 @@ var LinkCreateContent = function LinkCreateContent(_ref) {
 var LinkCreate = function LinkCreate(_ref2) {
   var _ref2$testId = _ref2.testId,
     testId = _ref2$testId === void 0 ? TEST_ID : _ref2$testId,
-    onCreate = _ref2.onCreate,
-    onFailure = _ref2.onFailure,
-    onCancel = _ref2.onCancel,
     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);
+  var intl = (0, _reactIntlNext.useIntl)();
   var _useFormContext = (0, _formContext.useFormContext)(),
     setFormErrorMessage = _useFormContext.setFormErrorMessage;
   var handleCreate = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(result) {
+    var _ref4 = (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:
@@ -74,7 +86,7 @@ var LinkCreate = function LinkCreate(_ref2) {
       }, _callee);
     }));
     return function (_x) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }(), [onCreate, setFormErrorMessage]);
   var handleFailure = (0, _react.useCallback)(function (error) {
@@ -82,63 +94,56 @@ var LinkCreate = function LinkCreate(_ref2) {
     setFormErrorMessage(error.message);
     onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
-  return (0, _react2.jsx)(_primitives.Box, {
-    testId: testId
-  }, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_callbackContext.LinkCreateCallbackProvider, {
-    onCancel: onCancel,
-    onCreate: handleCreate,
-    onFailure: handleFailure
-  }, (0, _react2.jsx)(_trackMount.default, null), (0, _react2.jsx)(LinkCreateContent, restProps))));
-};
-var LinkCreateWithModal = function LinkCreateWithModal(_ref4) {
-  var active = _ref4.active,
-    modalTitle = _ref4.modalTitle,
-    onCancel = _ref4.onCancel,
-    onOpenComplete = _ref4.onOpenComplete,
-    onCloseComplete = _ref4.onCloseComplete,
-    createProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
+  var _useExitWarningModal = (0, _exitWarningModalContext.useExitWarningModal)(),
+    getShouldShowWarning = _useExitWarningModal.getShouldShowWarning;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    dismissDialog = _useState2[0],
-    setDismissDialog = _useState2[1];
-  var _useFormContext2 = (0, _formContext.useFormContext)(),
-    isFormDirty = _useFormContext2.isFormDirty;
-  var intl = (0, _reactIntlNext.useIntl)();
+    showExitWarning = _useState2[0],
+    setShowExitWarning = _useState2[1];
   var handleCancel = (0, _react.useCallback)(function () {
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.confirm-dismiss-dialog')) {
-      if (isFormDirty()) {
-        return setDismissDialog(true);
+      if (getShouldShowWarning() && !showExitWarning) {
+        setShowExitWarning(true);
+        return;
       }
     }
-    onCancel && onCancel();
-  }, [onCancel, isFormDirty]);
-  var handleCancelDismiss = (0, _react.useCallback)(function () {
-    setDismissDialog(false);
+    onCancel === null || onCancel === void 0 || onCancel();
+  }, [onCancel, getShouldShowWarning, showExitWarning]);
+  var handleCloseExitWarning = (0, _react.useCallback)(function () {
+    return setShowExitWarning(false);
   }, []);
-  var handleConfirmDismiss = (0, _react.useCallback)(function () {
-    setDismissDialog(false);
-    onCancel && onCancel();
-  }, [onCancel]);
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!active && (0, _react2.jsx)(_modalDialog.default, {
+  return (0, _react2.jsx)(_callbackContext.LinkCreateCallbackProvider, {
+    onCreate: handleCreate,
+    onFailure: handleFailure,
+    onCancel: handleCancel
+  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, active && (0, _react2.jsx)(_modalDialog.default, {
     testId: "link-create-modal",
     onClose: handleCancel,
     shouldScrollInViewport: true,
     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, (0, _extends2.default)({}, createProps, {
-    onCancel: handleCancel
-  }))))), (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)(LinkCreate, createProps)))), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.enable-edit') && createProps.onComplete && (0, _react2.jsx)(_editModal.EditModal, {
     onCloseComplete: onCloseComplete,
     onClose: createProps.onComplete
   }), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.confirm-dismiss-dialog') && (0, _react2.jsx)(_confirmDismissDialog.ConfirmDismissDialog, {
-    active: dismissDialog,
-    onCancelDismiss: handleCancelDismiss,
-    onConfirmDismiss: handleConfirmDismiss
+    active: showExitWarning,
+    onClose: handleCloseExitWarning
   }));
 };
 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
@@ -153,7 +158,7 @@ var LinkCreateModal = function LinkCreateModal(props) {
           enableEditView = _ref5.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)(LinkCreateWithModal, (0, _extends2.default)({}, props, {
+        }, (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) {
@@ -183,12 +188,21 @@ var LinkCreateModal = function LinkCreateModal(props) {
             return function (_x2) {
               return _ref6.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)(LinkCreateWithModal, (0, _extends2.default)({}, props, {
+  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 _props$onCreate2, _props$onComplete;
@@ -209,6 +223,6 @@ var LinkCreateModal = function LinkCreateModal(props) {
         return _ref7.apply(this, arguments);
       };
     }()
-  })));
+  }))));
 };
 var _default = exports.default = LinkCreateModal;

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.0" || '',
+  packageVersion: "1.9.0" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

package/dist/es2019/controllers/exit-warning-modal-context/index.js

@@ -0,0 +1,28 @@
+import React, { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+const ExitWarningModalContext = /*#__PURE__*/createContext({
+  getShouldShowWarning: () => false,
+  setShouldShowWarning: () => {}
+});
+export const ExitWarningModalProvider = ({
+  children
+}) => {
+  const shouldShowWarning = useRef(false);
+  const getShouldShowWarning = useCallback(() => shouldShowWarning.current, []);
+  const setShouldShowWarning = useCallback(show => {
+    shouldShowWarning.current = show;
+  }, []);
+  const value = useMemo(() => ({
+    getShouldShowWarning,
+    setShouldShowWarning
+  }), [getShouldShowWarning, setShouldShowWarning]);
+  return /*#__PURE__*/React.createElement(ExitWarningModalContext.Provider, {
+    value: value
+  }, children);
+};
+export const useExitWarningModal = () => {
+  const value = useContext(ExitWarningModalContext);
+  if (!value) {
+    throw new Error('useExitWarningModal used outside of ExitWarningModalProvider');
+  }
+  return value;
+};

package/dist/es2019/controllers/form-context/main.js

@@ -1,11 +1,9 @@
-import React, { createContext, useCallback, useContext, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useState } from 'react';
 export const FormContext = /*#__PURE__*/createContext({
   assignValidator: () => {},
   getValidators: () => ({}),
   setFormErrorMessage: () => {},
-  enableEditView: undefined,
-  setFormDirty: () => {},
-  isFormDirty: () => false
+  enableEditView: undefined
 });
 const FormContextProvider = ({
   enableEditView,
@@ -13,13 +11,6 @@ const FormContextProvider = ({
 }) => {
   const [error, setError] = useState();
   const [validators, setValidators] = useState({});
-  const dirty = useRef(false);
-  const isFormDirty = useCallback(() => {
-    return dirty.current;
-  }, [dirty]);
-  const setFormDirty = useCallback(isDirty => {
-    dirty.current = !!isDirty;
-  }, [dirty]);
 
   // Add validators to the form
   const assignValidator = useCallback((name, fieldValidators) => {
@@ -44,9 +35,7 @@ const FormContextProvider = ({
       getValidators,
       setFormErrorMessage,
       formErrorMessage: error,
-      enableEditView,
-      setFormDirty,
-      isFormDirty
+      enableEditView
     }
   }, children);
 };

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

@@ -7,6 +7,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { ANALYTICS_CHANNEL, CREATE_FORM_MAX_WIDTH_IN_PX, LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
+import { useExitWarningModal } from '../../controllers/exit-warning-modal-context';
 import { useFormContext } from '../../controllers/form-context';
 import { CreateFormFooter } from './form-footer';
 import { CreateFormLoader } from './form-loader';
@@ -33,9 +34,11 @@ export const CreateForm = ({
   const {
     getValidators,
     formErrorMessage,
-    setFormDirty,
     enableEditView
   } = useFormContext();
+  const {
+    setShouldShowWarning
+  } = useExitWarningModal();
   const handleSubmit = useCallback(async data => {
     createAnalyticsEvent(createEventPayload('ui.button.clicked.create', {})).fire(ANALYTICS_CHANNEL);
     const validators = getValidators();
@@ -90,7 +93,7 @@ export const CreateForm = ({
       subscription: {
         dirty: true
       },
-      onChange: state => setFormDirty(state.dirty)
+      onChange: state => setShouldShowWarning(state.dirty)
     }), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter, {
       formErrorMessage: formErrorMessage,
       handleCancel: handleCancel,

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

@@ -4,6 +4,7 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { Button } from '../../../common/ui/Button';
 import { ScreenViewedEvent } from '../../../common/utils/analytics/components';
+import { useLinkCreateCallback } from '../../../controllers/callback-context';
 import messages from './messages';
 const screen = 'linkCreateExitWarningScreen';
 const context = {
@@ -12,10 +13,17 @@ const context = {
 };
 export const ConfirmDismissDialog = ({
   active,
-  onCancelDismiss,
-  onConfirmDismiss
+  onClose
 }) => {
   const intl = useIntl();
+  const {
+    onCancel
+  } = useLinkCreateCallback();
+  const onCancelDismiss = () => onClose();
+  const onConfirmDismiss = () => {
+    onClose();
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  };
   return /*#__PURE__*/React.createElement(ModalTransition, null, active && /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: context
   }, /*#__PURE__*/React.createElement(Modal, {

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';
@@ -9,6 +9,7 @@ import { Box } from '@atlaskit/primitives';
 import { CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import { LinkCreateCallbackProvider } from '../../controllers/callback-context';
 import { EditPostCreateModalProvider } from '../../controllers/edit-post-create-context';
+import { ExitWarningModalProvider, useExitWarningModal } from '../../controllers/exit-warning-modal-context';
 import { FormContextProvider, useFormContext } from '../../controllers/form-context';
 import { LinkCreatePluginsProvider } from '../../controllers/plugin-context';
 import { ConfirmDismissDialog } from './confirm-dismiss-dialog';
@@ -29,12 +30,24 @@ const LinkCreateContent = ({
 };
 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,
-  triggeredFrom,
-  ...restProps
+  onOpenComplete,
+  onCloseComplete,
+  ...createProps
 }) => {
+  const intl = useIntl();
   const {
     setFormErrorMessage
   } = useFormContext();
@@ -50,62 +63,52 @@ const LinkCreate = ({
     setFormErrorMessage(error.message);
     onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
-  return jsx(Box, {
-    testId: testId
-  }, jsx(ErrorBoundary, null, jsx(LinkCreateCallbackProvider, {
-    onCancel: onCancel,
-    onCreate: handleCreate,
-    onFailure: handleFailure
-  }, jsx(TrackMount, null), jsx(LinkCreateContent, restProps))));
-};
-const LinkCreateWithModal = ({
-  active,
-  modalTitle,
-  onCancel,
-  onOpenComplete,
-  onCloseComplete,
-  ...createProps
-}) => {
-  const [dismissDialog, setDismissDialog] = useState(false);
   const {
-    isFormDirty
-  } = useFormContext();
-  const intl = useIntl();
+    getShouldShowWarning
+  } = useExitWarningModal();
+  const [showExitWarning, setShowExitWarning] = useState(false);
   const handleCancel = useCallback(() => {
     if (getBooleanFF('platform.linking-platform.link-create.confirm-dismiss-dialog')) {
-      if (isFormDirty()) {
-        return setDismissDialog(true);
+      if (getShouldShowWarning() && !showExitWarning) {
+        setShowExitWarning(true);
+        return;
       }
     }
-    onCancel && onCancel();
-  }, [onCancel, isFormDirty]);
-  const handleCancelDismiss = useCallback(() => {
-    setDismissDialog(false);
-  }, []);
-  const handleConfirmDismiss = useCallback(() => {
-    setDismissDialog(false);
-    onCancel && onCancel();
-  }, [onCancel]);
-  return jsx(Fragment, null, jsx(ModalTransition, null, !!active && jsx(Modal, {
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [onCancel, getShouldShowWarning, showExitWarning]);
+  const handleCloseExitWarning = useCallback(() => setShowExitWarning(false), []);
+  return jsx(LinkCreateCallbackProvider, {
+    onCreate: handleCreate,
+    onFailure: handleFailure,
+    onCancel: handleCancel
+  }, jsx(ModalTransition, null, active && jsx(Modal, {
     testId: "link-create-modal",
     onClose: handleCancel,
     shouldScrollInViewport: true,
     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, _extends({}, createProps, {
-    onCancel: handleCancel
-  }))))), 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(LinkCreate, createProps)))), getBooleanFF('platform.linking-platform.link-create.enable-edit') && createProps.onComplete && jsx(EditModal, {
     onCloseComplete: onCloseComplete,
     onClose: createProps.onComplete
   }), getBooleanFF('platform.linking-platform.link-create.confirm-dismiss-dialog') && jsx(ConfirmDismissDialog, {
-    active: dismissDialog,
-    onCancelDismiss: handleCancelDismiss,
-    onConfirmDismiss: handleConfirmDismiss
+    active: showExitWarning,
+    onClose: handleCloseExitWarning
   }));
 };
 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
@@ -120,7 +123,7 @@ const LinkCreateModal = props => {
       var _pluginsProvider$acti;
       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(LinkCreateWithModal, _extends({}, props, {
+      }, jsx(ExitWarningModalProvider, null, jsx(LinkCreateWithModal, _extends({}, props, {
         active: props.active && !editViewPayload,
         onCreate: async payload => {
           var _props$onCreate;
@@ -136,16 +139,22 @@ 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);
+          }
         }
-      })));
+      }))));
     }));
   }
-  return jsx(FormContextProvider, null, jsx(LinkCreateWithModal, _extends({}, props, {
+  return jsx(FormContextProvider, null, jsx(ExitWarningModalProvider, null, jsx(LinkCreateWithModal, _extends({}, props, {
     onCreate: async payload => {
       var _props$onCreate2, _props$onComplete;
       await ((_props$onCreate2 = props.onCreate) === null || _props$onCreate2 === void 0 ? void 0 : _props$onCreate2.call(props, payload));
       (_props$onComplete = props.onComplete) === null || _props$onComplete === void 0 ? void 0 : _props$onComplete.call(props);
     }
-  })));
+  }))));
 };
 export default LinkCreateModal;

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.0" || '',
+  packageVersion: "1.9.0" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/esm/controllers/exit-warning-modal-context/index.js

@@ -0,0 +1,33 @@
+import React, { createContext, useCallback, useContext, useMemo, useRef } from 'react';
+var ExitWarningModalContext = /*#__PURE__*/createContext({
+  getShouldShowWarning: function getShouldShowWarning() {
+    return false;
+  },
+  setShouldShowWarning: function setShouldShowWarning() {}
+});
+export var ExitWarningModalProvider = function ExitWarningModalProvider(_ref) {
+  var children = _ref.children;
+  var shouldShowWarning = useRef(false);
+  var getShouldShowWarning = useCallback(function () {
+    return shouldShowWarning.current;
+  }, []);
+  var setShouldShowWarning = useCallback(function (show) {
+    shouldShowWarning.current = show;
+  }, []);
+  var value = useMemo(function () {
+    return {
+      getShouldShowWarning: getShouldShowWarning,
+      setShouldShowWarning: setShouldShowWarning
+    };
+  }, [getShouldShowWarning, setShouldShowWarning]);
+  return /*#__PURE__*/React.createElement(ExitWarningModalContext.Provider, {
+    value: value
+  }, children);
+};
+export var useExitWarningModal = function useExitWarningModal() {
+  var value = useContext(ExitWarningModalContext);
+  if (!value) {
+    throw new Error('useExitWarningModal used outside of ExitWarningModalProvider');
+  }
+  return value;
+};

package/dist/esm/controllers/form-context/main.js

@@ -2,18 +2,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { createContext, useCallback, useContext, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useState } from 'react';
 export var FormContext = /*#__PURE__*/createContext({
   assignValidator: function assignValidator() {},
   getValidators: function getValidators() {
     return {};
   },
   setFormErrorMessage: function setFormErrorMessage() {},
-  enableEditView: undefined,
-  setFormDirty: function setFormDirty() {},
-  isFormDirty: function isFormDirty() {
-    return false;
-  }
+  enableEditView: undefined
 });
 var FormContextProvider = function FormContextProvider(_ref) {
   var enableEditView = _ref.enableEditView,
@@ -26,13 +22,6 @@ var FormContextProvider = function FormContextProvider(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     validators = _useState4[0],
     setValidators = _useState4[1];
-  var dirty = useRef(false);
-  var isFormDirty = useCallback(function () {
-    return dirty.current;
-  }, [dirty]);
-  var setFormDirty = useCallback(function (isDirty) {
-    dirty.current = !!isDirty;
-  }, [dirty]);
 
   // Add validators to the form
   var assignValidator = useCallback(function (name, fieldValidators) {
@@ -56,9 +45,7 @@ var FormContextProvider = function FormContextProvider(_ref) {
       getValidators: getValidators,
       setFormErrorMessage: setFormErrorMessage,
       formErrorMessage: error,
-      enableEditView: enableEditView,
-      setFormDirty: setFormDirty,
-      isFormDirty: isFormDirty
+      enableEditView: enableEditView
     }
   }, children);
 };

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

@@ -14,6 +14,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { ANALYTICS_CHANNEL, CREATE_FORM_MAX_WIDTH_IN_PX, LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
+import { useExitWarningModal } from '../../controllers/exit-warning-modal-context';
 import { useFormContext } from '../../controllers/form-context';
 import { CreateFormFooter } from './form-footer';
 import { CreateFormLoader } from './form-loader';
@@ -39,8 +40,9 @@ export var CreateForm = function CreateForm(_ref) {
   var _useFormContext = useFormContext(),
     getValidators = _useFormContext.getValidators,
     formErrorMessage = _useFormContext.formErrorMessage,
-    setFormDirty = _useFormContext.setFormDirty,
     enableEditView = _useFormContext.enableEditView;
+  var _useExitWarningModal = useExitWarningModal(),
+    setShouldShowWarning = _useExitWarningModal.setShouldShowWarning;
   var handleSubmit = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
       var validators, errors, shouldEnableEditView, formData;
@@ -113,7 +115,7 @@ export var CreateForm = function CreateForm(_ref) {
         dirty: true
       },
       onChange: function onChange(state) {
-        return setFormDirty(state.dirty);
+        return setShouldShowWarning(state.dirty);
       }
     }), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter, {
       formErrorMessage: formErrorMessage,

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

@@ -4,6 +4,7 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { Button } from '../../../common/ui/Button';
 import { ScreenViewedEvent } from '../../../common/utils/analytics/components';
+import { useLinkCreateCallback } from '../../../controllers/callback-context';
 import messages from './messages';
 var screen = 'linkCreateExitWarningScreen';
 var context = {
@@ -12,9 +13,17 @@ var context = {
 };
 export var ConfirmDismissDialog = function ConfirmDismissDialog(_ref) {
   var active = _ref.active,
-    onCancelDismiss = _ref.onCancelDismiss,
-    onConfirmDismiss = _ref.onConfirmDismiss;
+    onClose = _ref.onClose;
   var intl = useIntl();
+  var _useLinkCreateCallbac = useLinkCreateCallback(),
+    onCancel = _useLinkCreateCallbac.onCancel;
+  var onCancelDismiss = function onCancelDismiss() {
+    return onClose();
+  };
+  var onConfirmDismiss = function onConfirmDismiss() {
+    onClose();
+    onCancel === null || onCancel === void 0 || onCancel();
+  };
   return /*#__PURE__*/React.createElement(ModalTransition, null, active && /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: context
   }, /*#__PURE__*/React.createElement(Modal, {

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

@@ -2,11 +2,11 @@ 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", "onCreate", "onFailure", "onCancel", "triggeredFrom"],
-  _excluded2 = ["active", "modalTitle", "onCancel", "onOpenComplete", "onCloseComplete"];
+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';
@@ -15,6 +15,7 @@ import { Box } from '@atlaskit/primitives';
 import { CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import { LinkCreateCallbackProvider } from '../../controllers/callback-context';
 import { EditPostCreateModalProvider } from '../../controllers/edit-post-create-context';
+import { ExitWarningModalProvider, useExitWarningModal } from '../../controllers/exit-warning-modal-context';
 import { FormContextProvider, useFormContext } from '../../controllers/form-context';
 import { LinkCreatePluginsProvider } from '../../controllers/plugin-context';
 import { ConfirmDismissDialog } from './confirm-dismiss-dialog';
@@ -37,15 +38,26 @@ var LinkCreateContent = function LinkCreateContent(_ref) {
 var LinkCreate = function LinkCreate(_ref2) {
   var _ref2$testId = _ref2.testId,
     testId = _ref2$testId === void 0 ? TEST_ID : _ref2$testId,
-    onCreate = _ref2.onCreate,
-    onFailure = _ref2.onFailure,
-    onCancel = _ref2.onCancel,
     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);
+  var intl = useIntl();
   var _useFormContext = useFormContext(),
     setFormErrorMessage = _useFormContext.setFormErrorMessage;
   var handleCreate = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(result) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(result) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -64,7 +76,7 @@ var LinkCreate = function LinkCreate(_ref2) {
       }, _callee);
     }));
     return function (_x) {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }(), [onCreate, setFormErrorMessage]);
   var handleFailure = useCallback(function (error) {
@@ -72,63 +84,56 @@ var LinkCreate = function LinkCreate(_ref2) {
     setFormErrorMessage(error.message);
     onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
-  return jsx(Box, {
-    testId: testId
-  }, jsx(ErrorBoundary, null, jsx(LinkCreateCallbackProvider, {
-    onCancel: onCancel,
-    onCreate: handleCreate,
-    onFailure: handleFailure
-  }, jsx(TrackMount, null), jsx(LinkCreateContent, restProps))));
-};
-var LinkCreateWithModal = function LinkCreateWithModal(_ref4) {
-  var active = _ref4.active,
-    modalTitle = _ref4.modalTitle,
-    onCancel = _ref4.onCancel,
-    onOpenComplete = _ref4.onOpenComplete,
-    onCloseComplete = _ref4.onCloseComplete,
-    createProps = _objectWithoutProperties(_ref4, _excluded2);
+  var _useExitWarningModal = useExitWarningModal(),
+    getShouldShowWarning = _useExitWarningModal.getShouldShowWarning;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    dismissDialog = _useState2[0],
-    setDismissDialog = _useState2[1];
-  var _useFormContext2 = useFormContext(),
-    isFormDirty = _useFormContext2.isFormDirty;
-  var intl = useIntl();
+    showExitWarning = _useState2[0],
+    setShowExitWarning = _useState2[1];
   var handleCancel = useCallback(function () {
     if (getBooleanFF('platform.linking-platform.link-create.confirm-dismiss-dialog')) {
-      if (isFormDirty()) {
-        return setDismissDialog(true);
+      if (getShouldShowWarning() && !showExitWarning) {
+        setShowExitWarning(true);
+        return;
       }
     }
-    onCancel && onCancel();
-  }, [onCancel, isFormDirty]);
-  var handleCancelDismiss = useCallback(function () {
-    setDismissDialog(false);
+    onCancel === null || onCancel === void 0 || onCancel();
+  }, [onCancel, getShouldShowWarning, showExitWarning]);
+  var handleCloseExitWarning = useCallback(function () {
+    return setShowExitWarning(false);
   }, []);
-  var handleConfirmDismiss = useCallback(function () {
-    setDismissDialog(false);
-    onCancel && onCancel();
-  }, [onCancel]);
-  return jsx(Fragment, null, jsx(ModalTransition, null, !!active && jsx(Modal, {
+  return jsx(LinkCreateCallbackProvider, {
+    onCreate: handleCreate,
+    onFailure: handleFailure,
+    onCancel: handleCancel
+  }, jsx(ModalTransition, null, active && jsx(Modal, {
     testId: "link-create-modal",
     onClose: handleCancel,
     shouldScrollInViewport: true,
     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, _extends({}, createProps, {
-    onCancel: handleCancel
-  }))))), 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(LinkCreate, createProps)))), getBooleanFF('platform.linking-platform.link-create.enable-edit') && createProps.onComplete && jsx(EditModal, {
     onCloseComplete: onCloseComplete,
     onClose: createProps.onComplete
   }), getBooleanFF('platform.linking-platform.link-create.confirm-dismiss-dialog') && jsx(ConfirmDismissDialog, {
-    active: dismissDialog,
-    onCancelDismiss: handleCancelDismiss,
-    onConfirmDismiss: handleConfirmDismiss
+    active: showExitWarning,
+    onClose: handleCloseExitWarning
   }));
 };
 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
@@ -143,7 +148,7 @@ var LinkCreateModal = function LinkCreateModal(props) {
           enableEditView = _ref5.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(LinkCreateWithModal, _extends({}, props, {
+        }, jsx(ExitWarningModalProvider, null, jsx(LinkCreateWithModal, _extends({}, props, {
           active: props.active && !editViewPayload,
           onCreate: /*#__PURE__*/function () {
             var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(payload) {
@@ -173,12 +178,21 @@ var LinkCreateModal = function LinkCreateModal(props) {
             return function (_x2) {
               return _ref6.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(LinkCreateWithModal, _extends({}, props, {
+  return jsx(FormContextProvider, null, jsx(ExitWarningModalProvider, null, jsx(LinkCreateWithModal, _extends({}, props, {
     onCreate: /*#__PURE__*/function () {
       var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(payload) {
         var _props$onCreate2, _props$onComplete;
@@ -199,6 +213,6 @@ var LinkCreateModal = function LinkCreateModal(props) {
         return _ref7.apply(this, arguments);
       };
     }()
-  })));
+  }))));
 };
 export default LinkCreateModal;

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.0" || '',
+  packageVersion: "1.9.0" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/types/controllers/exit-warning-modal-context/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type ExitWarningModalContextValue = {
+    getShouldShowWarning: () => boolean;
+    setShouldShowWarning: (show: boolean) => void;
+};
+export declare const ExitWarningModalProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useExitWarningModal: () => ExitWarningModalContextValue;
+export {};

package/dist/types/controllers/form-context/main.d.ts

@@ -4,8 +4,6 @@ interface FormContextType {
     getValidators: () => ValidatorMap;
     assignValidator: (name: string, validators: Validator[]) => void;
     setFormErrorMessage: (errorMessage?: string) => void;
-    setFormDirty: (dirty?: boolean) => void;
-    isFormDirty: () => boolean;
     formErrorMessage?: string;
     /**
      * Callback that updates link create to tell it that it should/should not open the current plugins
@@ -13,7 +11,6 @@ interface FormContextType {
      * is not defined as a prop at the `LinkCreate` props level
      */
     enableEditView?: ((editButtonClicked: boolean) => void) | undefined;
-    formDirty?: boolean;
 }
 export declare const FormContext: React.Context<FormContextType>;
 declare const FormContextProvider: React.FC<{

package/dist/types/ui/link-create/confirm-dismiss-dialog/main.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export type ConfirmDismissDialogProps = {
     active: boolean;
-    onCancelDismiss?: () => void;
-    onConfirmDismiss?: () => void;
+    onClose: () => void;
 };
-export declare const ConfirmDismissDialog: ({ active, onCancelDismiss, onConfirmDismiss, }: ConfirmDismissDialogProps) => JSX.Element;
+export declare const ConfirmDismissDialog: ({ active, onClose, }: ConfirmDismissDialogProps) => JSX.Element;

package/dist/types-ts4.5/controllers/exit-warning-modal-context/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type ExitWarningModalContextValue = {
+    getShouldShowWarning: () => boolean;
+    setShouldShowWarning: (show: boolean) => void;
+};
+export declare const ExitWarningModalProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useExitWarningModal: () => ExitWarningModalContextValue;
+export {};

package/dist/types-ts4.5/controllers/form-context/main.d.ts

@@ -4,8 +4,6 @@ interface FormContextType {
     getValidators: () => ValidatorMap;
     assignValidator: (name: string, validators: Validator[]) => void;
     setFormErrorMessage: (errorMessage?: string) => void;
-    setFormDirty: (dirty?: boolean) => void;
-    isFormDirty: () => boolean;
     formErrorMessage?: string;
     /**
      * Callback that updates link create to tell it that it should/should not open the current plugins
@@ -13,7 +11,6 @@ interface FormContextType {
      * is not defined as a prop at the `LinkCreate` props level
      */
     enableEditView?: ((editButtonClicked: boolean) => void) | undefined;
-    formDirty?: boolean;
 }
 export declare const FormContext: React.Context<FormContextType>;
 declare const FormContextProvider: React.FC<{

package/dist/types-ts4.5/ui/link-create/confirm-dismiss-dialog/main.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export type ConfirmDismissDialogProps = {
     active: boolean;
-    onCancelDismiss?: () => void;
-    onConfirmDismiss?: () => void;
+    onClose: () => void;
 };
-export declare const ConfirmDismissDialog: ({ active, onCancelDismiss, onConfirmDismiss, }: ConfirmDismissDialogProps) => JSX.Element;
+export declare const ConfirmDismissDialog: ({ active, onClose, }: ConfirmDismissDialogProps) => JSX.Element;

package/example-helpers/mock-plugin-form.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import {
   AsyncSelect,
@@ -41,12 +41,12 @@ export function MockPluginForm({ shouldThrowError }: pluginProps) {
     [],
   );
 
-  const exampleOptions = [
-    { label: 'Option 1', value: 'option-1' },
-    { label: 'Option 2', value: 'option-2' },
-  ];
+  const mockLoadOptions = useCallback(async () => {
+    const exampleOptions = [
+      { label: 'Option 1', value: 'option-1' },
+      { label: 'Option 2', value: 'option-2' },
+    ];
 
-  const mockLoadOptions = async () => {
     try {
       if (shouldThrowError) {
         throw new Error('This is an error message.');
@@ -58,7 +58,7 @@ export function MockPluginForm({ shouldThrowError }: pluginProps) {
       }
       return [];
     }
-  };
+  }, [onFailure, shouldThrowError]);
 
   return (
     <div>
@@ -82,7 +82,6 @@ export function MockPluginForm({ shouldThrowError }: pluginProps) {
           label={'Select an Option'}
           validators={[mockValidator]}
           defaultOptions={true}
-          defaultOption={mockLoadOptions}
           loadOptions={mockLoadOptions}
         ></AsyncSelect>
       </CreateForm>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "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.14.0",
+    "@atlaskit/button": "^16.15.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",