@atlaskit/link-create 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-create
 
+## 1.4.0
+
+### Minor Changes
+
+- [#42119](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42119) [`fbb3d5ea801`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fbb3d5ea801) - Displays a confirm dismiss dialog when user clicks cancel and made changes to form
+
+## 1.3.0
+
+### Minor Changes
+
+- [#41722](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41722) [`0bcdc0cc988`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0bcdc0cc988) - EDM-8055 Add ARI to link create callback
+
 ## 1.2.0
 
 ### Minor Changes

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useLinkCreateCallback = exports.LinkCreateCallbackProvider = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -14,6 +15,8 @@ var _constants = require("../../common/constants");
 var _analytics = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
 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; }
+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) { (0, _defineProperty2.default)(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; }
 var LinkCreateCallbackContext = /*#__PURE__*/_react.default.createContext({});
 var LinkCreateCallbackProvider = exports.LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
   var children = _ref.children,
@@ -22,7 +25,7 @@ var LinkCreateCallbackProvider = exports.LinkCreateCallbackProvider = function L
     onCancel = _ref.onCancel;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var value = (0, _react.useMemo)(function () {
+  var handleCreate = (0, _react.useMemo)(function () {
     return {
       onCreate: function () {
         var _onCreate2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(result) {
@@ -51,7 +54,11 @@ var LinkCreateCallbackProvider = exports.LinkCreateCallbackProvider = function L
           return _onCreate2.apply(this, arguments);
         }
         return onCreate;
-      }(),
+      }()
+    };
+  }, [createAnalyticsEvent, _onCreate]);
+  var handleFailure = (0, _react.useMemo)(function () {
+    return {
       onFailure: function () {
         var _onFailure2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(error) {
           return _regenerator.default.wrap(function _callee2$(_context2) {
@@ -71,10 +78,14 @@ var LinkCreateCallbackProvider = exports.LinkCreateCallbackProvider = function L
           return _onFailure2.apply(this, arguments);
         }
         return onFailure;
-      }(),
-      onCancel: onCancel
+      }()
     };
-  }, [_onFailure, onCancel, createAnalyticsEvent, _onCreate]);
+  }, [createAnalyticsEvent, _onFailure]);
+  var value = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({
+      onCancel: onCancel
+    }, handleCreate), handleFailure);
+  }, [onCancel, handleCreate, handleFailure]);
   return /*#__PURE__*/_react.default.createElement(LinkCreateCallbackContext.Provider, {
     value: value
   }, children);

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

@@ -19,7 +19,11 @@ var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.createContext)({
     return {};
   },
   setFormErrorMessage: function setFormErrorMessage() {},
-  enableEditView: undefined
+  enableEditView: undefined,
+  setFormDirty: function setFormDirty() {},
+  isFormDirty: function isFormDirty() {
+    return false;
+  }
 });
 var FormContextProvider = exports.FormContextProvider = function FormContextProvider(_ref) {
   var enableEditView = _ref.enableEditView,
@@ -32,6 +36,13 @@ 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) {
@@ -55,7 +66,9 @@ var FormContextProvider = exports.FormContextProvider = function FormContextProv
       getValidators: getValidators,
       setFormErrorMessage: setFormErrorMessage,
       formErrorMessage: error,
-      enableEditView: enableEditView
+      enableEditView: enableEditView,
+      setFormDirty: setFormDirty,
+      isFormDirty: isFormDirty
     }
   }, children);
 };

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

@@ -12,6 +12,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactFinalForm = require("react-final-form");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../common/constants");
 var _analytics = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
 var _formContext = require("../../controllers/form-context");
@@ -39,7 +40,8 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useFormContext = (0, _formContext.useFormContext)(),
     getValidators = _useFormContext.getValidators,
-    formErrorMessage = _useFormContext.formErrorMessage;
+    formErrorMessage = _useFormContext.formErrorMessage,
+    setFormDirty = _useFormContext.setFormDirty;
   var handleSubmit = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(data) {
       var validators, errors;
@@ -94,7 +96,14 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
       name: "link-create-form",
       "data-testid": testId,
       css: formStyles
-    }, (0, _react2.jsx)("div", null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter, {
+    }, (0, _react2.jsx)(_reactFinalForm.FormSpy, {
+      subscription: {
+        dirty: true
+      },
+      onChange: function onChange(state) {
+        return setFormDirty(state.dirty);
+      }
+    }), (0, _react2.jsx)(_primitives.Box, null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter, {
       formErrorMessage: formErrorMessage,
       handleCancel: handleCancel,
       submitting: submitting,

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ConfirmDismissDialog", {
+  enumerable: true,
+  get: function get() {
+    return _main.ConfirmDismissDialog;
+  }
+});
+var _main = require("./main");

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConfirmDismissDialog = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+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; }
+var ConfirmDismissDialog = exports.ConfirmDismissDialog = function ConfirmDismissDialog(_ref) {
+  var active = _ref.active,
+    onCancelDismiss = _ref.onCancelDismiss,
+    onConfirmDismiss = _ref.onConfirmDismiss;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, active && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    testId: "link-create-confirm-dismiss-dialog",
+    onClose: onCancelDismiss,
+    width: "small"
+  }, /*#__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.default, {
+    appearance: "subtle",
+    onClick: onCancelDismiss
+  }, intl.formatMessage(_messages.default.cancelButtonLabel)), /*#__PURE__*/_react.default.createElement(_button.default, {
+    appearance: "primary",
+    onClick: onConfirmDismiss
+  }, intl.formatMessage(_messages.default.confirmButtonLabel)))));
+};

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactIntlNext = require("react-intl-next");
+var _default = exports.default = (0, _reactIntlNext.defineMessages)({
+  title: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.title',
+    defaultMessage: 'Your changes won’t be saved',
+    description: 'Title for confirm-dismiss modal popup'
+  },
+  cancelButtonLabel: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.cancel-button-label',
+    defaultMessage: 'Go back',
+    description: 'Label for secondary button for confirm-dismiss modal popup'
+  },
+  confirmButtonLabel: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.confirm-button-label',
+    defaultMessage: 'Discard',
+    description: 'Label for primary button for confirm-dismiss modal popup'
+  },
+  description: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.description',
+    defaultMessage: 'We won’t be able to save your information if you move away from this page.',
+    description: 'Description for confirm-dismiss modal popup'
+  }
+});

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

@@ -7,20 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TEST_ID = void 0;
 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");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../common/constants");
 var _callbackContext = require("../../controllers/callback-context");
 var _formContext = require("../../controllers/form-context");
+var _confirmDismissDialog = require("./confirm-dismiss-dialog");
 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", "onOpenComplete", "onCloseComplete"];
+  _excluded2 = ["active", "modalTitle", "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; }
@@ -36,7 +41,7 @@ var LinkCreateContent = function LinkCreateContent(_ref) {
   }
   return (0, _react2.jsx)(_react.Fragment, null, chosenOne.form);
 };
-var LinkCreate = (0, _formContext.withLinkCreateFormContext)(function (_ref2) {
+var LinkCreate = function LinkCreate(_ref2) {
   var _ref2$testId = _ref2.testId,
     testId = _ref2$testId === void 0 ? TEST_ID : _ref2$testId,
     onCreate = _ref2.onCreate,
@@ -74,28 +79,56 @@ var LinkCreate = (0, _formContext.withLinkCreateFormContext)(function (_ref2) {
     setFormErrorMessage(error.message);
     onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
-  return (0, _react2.jsx)("div", {
-    "data-testid": testId
+  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 _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)();
-  return (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!active && (0, _react2.jsx)(_modalDialog.default, {
+  var handleCancel = (0, _react.useCallback)(function () {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.confirm-dismiss-dialog')) {
+      if (isFormDirty()) {
+        return setDismissDialog(true);
+      }
+    }
+    onCancel && onCancel();
+  }, [onCancel, isFormDirty]);
+  var handleCancelDismiss = (0, _react.useCallback)(function () {
+    setDismissDialog(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, {
     testId: "link-create-modal",
-    onClose: createProps.onCancel,
+    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, createProps))));
+  }, (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, _react2.jsx)(_confirmDismissDialog.ConfirmDismissDialog, {
+    active: dismissDialog,
+    onCancelDismiss: handleCancelDismiss,
+    onConfirmDismiss: handleConfirmDismiss
+  }));
 };
-var _default = exports.default = LinkCreateWithModal;
+var _default = exports.default = (0, _formContext.withLinkCreateFormContext)(LinkCreateWithModal);

package/dist/cjs/ui/main.js

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

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

@@ -12,7 +12,7 @@ const LinkCreateCallbackProvider = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-  const value = useMemo(() => ({
+  const handleCreate = useMemo(() => ({
     onCreate: async result => {
       const {
         objectId,
@@ -25,15 +25,21 @@ const LinkCreateCallbackProvider = ({
       if (onCreate) {
         await onCreate(result);
       }
-    },
+    }
+  }), [createAnalyticsEvent, onCreate]);
+  const handleFailure = useMemo(() => ({
     onFailure: async error => {
       createAnalyticsEvent(createEventPayload('track.object.createFailed.linkCreate', {
         failureType: error.name
       })).fire(ANALYTICS_CHANNEL);
       onFailure && onFailure(error);
-    },
-    onCancel
-  }), [onFailure, onCancel, createAnalyticsEvent, onCreate]);
+    }
+  }), [createAnalyticsEvent, onFailure]);
+  const value = useMemo(() => ({
+    onCancel,
+    ...handleCreate,
+    ...handleFailure
+  }), [onCancel, handleCreate, handleFailure]);
   return /*#__PURE__*/React.createElement(LinkCreateCallbackContext.Provider, {
     value: value
   }, children);

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

@@ -1,9 +1,11 @@
-import React, { createContext, useCallback, useContext, useState } from 'react';
+import React, { createContext, useCallback, useContext, useRef, useState } from 'react';
 export const FormContext = /*#__PURE__*/createContext({
   assignValidator: () => {},
   getValidators: () => ({}),
   setFormErrorMessage: () => {},
-  enableEditView: undefined
+  enableEditView: undefined,
+  setFormDirty: () => {},
+  isFormDirty: () => false
 });
 const FormContextProvider = ({
   enableEditView,
@@ -11,6 +13,13 @@ 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) => {
@@ -35,7 +44,9 @@ const FormContextProvider = ({
       getValidators,
       setFormErrorMessage,
       formErrorMessage: error,
-      enableEditView
+      enableEditView,
+      setFormDirty,
+      isFormDirty
     }
   }, children);
 };

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

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { Form } from 'react-final-form';
+import { Form, FormSpy } from 'react-final-form';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { Box } from '@atlaskit/primitives';
 import { ANALYTICS_CHANNEL, CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { useFormContext } from '../../controllers/form-context';
@@ -29,7 +30,8 @@ export const CreateForm = ({
   } = useAnalyticsEvents();
   const {
     getValidators,
-    formErrorMessage
+    formErrorMessage,
+    setFormDirty
   } = useFormContext();
   const handleSubmit = useCallback(async data => {
     createAnalyticsEvent(createEventPayload('ui.button.clicked.create', {})).fire(ANALYTICS_CHANNEL);
@@ -67,7 +69,12 @@ export const CreateForm = ({
       name: "link-create-form",
       "data-testid": testId,
       css: formStyles
-    }, jsx("div", null, children), !hideFooter && jsx(CreateFormFooter, {
+    }, jsx(FormSpy, {
+      subscription: {
+        dirty: true
+      },
+      onChange: state => setFormDirty(state.dirty)
+    }), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter, {
       formErrorMessage: formErrorMessage,
       handleCancel: handleCancel,
       submitting: submitting,

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

@@ -0,0 +1 @@
+export { ConfirmDismissDialog } from './main';

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import messages from './messages';
+export const ConfirmDismissDialog = ({
+  active,
+  onCancelDismiss,
+  onConfirmDismiss
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(ModalTransition, null, active && /*#__PURE__*/React.createElement(Modal, {
+    testId: "link-create-confirm-dismiss-dialog",
+    onClose: onCancelDismiss,
+    width: "small"
+  }, /*#__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, {
+    appearance: "subtle",
+    onClick: onCancelDismiss
+  }, intl.formatMessage(messages.cancelButtonLabel)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    onClick: onConfirmDismiss
+  }, intl.formatMessage(messages.confirmButtonLabel)))));
+};

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

@@ -0,0 +1,23 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  title: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.title',
+    defaultMessage: 'Your changes won’t be saved',
+    description: 'Title for confirm-dismiss modal popup'
+  },
+  cancelButtonLabel: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.cancel-button-label',
+    defaultMessage: 'Go back',
+    description: 'Label for secondary button for confirm-dismiss modal popup'
+  },
+  confirmButtonLabel: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.confirm-button-label',
+    defaultMessage: 'Discard',
+    description: 'Label for primary button for confirm-dismiss modal popup'
+  },
+  description: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.description',
+    defaultMessage: 'We won’t be able to save your information if you move away from this page.',
+    description: 'Description for confirm-dismiss modal popup'
+  }
+});

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

@@ -1,11 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { Fragment, useCallback } from 'react';
+import { Fragment, useCallback, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import Modal, { ModalBody, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives';
 import { CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import { LinkCreateCallbackProvider } from '../../controllers/callback-context';
 import { useFormContext, withLinkCreateFormContext } from '../../controllers/form-context';
+import { ConfirmDismissDialog } from './confirm-dismiss-dialog';
 import { ErrorBoundary } from './error-boundary';
 import { messages } from './messages';
 import TrackMount from './track-mount';
@@ -20,7 +24,7 @@ const LinkCreateContent = ({
   }
   return jsx(Fragment, null, chosenOne.form);
 };
-const LinkCreate = withLinkCreateFormContext(({
+const LinkCreate = ({
   testId = TEST_ID,
   onCreate,
   onFailure,
@@ -43,29 +47,55 @@ const LinkCreate = withLinkCreateFormContext(({
     setFormErrorMessage(error.message);
     onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
-  return jsx("div", {
-    "data-testid": testId
+  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();
-  return jsx(ModalTransition, null, !!active && jsx(Modal, {
+  const handleCancel = useCallback(() => {
+    if (getBooleanFF('platform.linking-platform.link-create.confirm-dismiss-dialog')) {
+      if (isFormDirty()) {
+        return setDismissDialog(true);
+      }
+    }
+    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, {
     testId: "link-create-modal",
-    onClose: createProps.onCancel,
+    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, createProps))));
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, modalTitle || intl.formatMessage(messages.heading))), jsx(ModalBody, null, jsx(LinkCreate, _extends({}, createProps, {
+    onCancel: handleCancel
+  }))))), jsx(ConfirmDismissDialog, {
+    active: dismissDialog,
+    onCancelDismiss: handleCancelDismiss,
+    onConfirmDismiss: handleConfirmDismiss
+  }));
 };
-export default LinkCreateWithModal;
+export default withLinkCreateFormContext(LinkCreateWithModal);

package/dist/es2019/ui/main.js

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

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

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+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 _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useContext, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -12,7 +15,7 @@ var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
     onCancel = _ref.onCancel;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var value = useMemo(function () {
+  var handleCreate = useMemo(function () {
     return {
       onCreate: function () {
         var _onCreate2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(result) {
@@ -41,7 +44,11 @@ var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
           return _onCreate2.apply(this, arguments);
         }
         return onCreate;
-      }(),
+      }()
+    };
+  }, [createAnalyticsEvent, _onCreate]);
+  var handleFailure = useMemo(function () {
+    return {
       onFailure: function () {
         var _onFailure2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(error) {
           return _regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -61,10 +68,14 @@ var LinkCreateCallbackProvider = function LinkCreateCallbackProvider(_ref) {
           return _onFailure2.apply(this, arguments);
         }
         return onFailure;
-      }(),
-      onCancel: onCancel
+      }()
     };
-  }, [_onFailure, onCancel, createAnalyticsEvent, _onCreate]);
+  }, [createAnalyticsEvent, _onFailure]);
+  var value = useMemo(function () {
+    return _objectSpread(_objectSpread({
+      onCancel: onCancel
+    }, handleCreate), handleFailure);
+  }, [onCancel, handleCreate, handleFailure]);
   return /*#__PURE__*/React.createElement(LinkCreateCallbackContext.Provider, {
     value: value
   }, children);

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

@@ -2,14 +2,18 @@ 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, useState } from 'react';
+import React, { createContext, useCallback, useContext, useRef, useState } from 'react';
 export var FormContext = /*#__PURE__*/createContext({
   assignValidator: function assignValidator() {},
   getValidators: function getValidators() {
     return {};
   },
   setFormErrorMessage: function setFormErrorMessage() {},
-  enableEditView: undefined
+  enableEditView: undefined,
+  setFormDirty: function setFormDirty() {},
+  isFormDirty: function isFormDirty() {
+    return false;
+  }
 });
 var FormContextProvider = function FormContextProvider(_ref) {
   var enableEditView = _ref.enableEditView,
@@ -22,6 +26,13 @@ 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) {
@@ -45,7 +56,9 @@ var FormContextProvider = function FormContextProvider(_ref) {
       getValidators: getValidators,
       setFormErrorMessage: setFormErrorMessage,
       formErrorMessage: error,
-      enableEditView: enableEditView
+      enableEditView: enableEditView,
+      setFormDirty: setFormDirty,
+      isFormDirty: isFormDirty
     }
   }, children);
 };

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

@@ -5,8 +5,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
-import { Form } from 'react-final-form';
+import { Form, FormSpy } from 'react-final-form';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { Box } from '@atlaskit/primitives';
 import { ANALYTICS_CHANNEL, CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { useFormContext } from '../../controllers/form-context';
@@ -32,7 +33,8 @@ export var CreateForm = function CreateForm(_ref) {
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useFormContext = useFormContext(),
     getValidators = _useFormContext.getValidators,
-    formErrorMessage = _useFormContext.formErrorMessage;
+    formErrorMessage = _useFormContext.formErrorMessage,
+    setFormDirty = _useFormContext.setFormDirty;
   var handleSubmit = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
       var validators, errors;
@@ -87,7 +89,14 @@ export var CreateForm = function CreateForm(_ref) {
       name: "link-create-form",
       "data-testid": testId,
       css: formStyles
-    }, jsx("div", null, children), !hideFooter && jsx(CreateFormFooter, {
+    }, jsx(FormSpy, {
+      subscription: {
+        dirty: true
+      },
+      onChange: function onChange(state) {
+        return setFormDirty(state.dirty);
+      }
+    }), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter, {
       formErrorMessage: formErrorMessage,
       handleCancel: handleCancel,
       submitting: submitting,

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

@@ -0,0 +1 @@
+export { ConfirmDismissDialog } from './main';

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import messages from './messages';
+export var ConfirmDismissDialog = function ConfirmDismissDialog(_ref) {
+  var active = _ref.active,
+    onCancelDismiss = _ref.onCancelDismiss,
+    onConfirmDismiss = _ref.onConfirmDismiss;
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(ModalTransition, null, active && /*#__PURE__*/React.createElement(Modal, {
+    testId: "link-create-confirm-dismiss-dialog",
+    onClose: onCancelDismiss,
+    width: "small"
+  }, /*#__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, {
+    appearance: "subtle",
+    onClick: onCancelDismiss
+  }, intl.formatMessage(messages.cancelButtonLabel)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    onClick: onConfirmDismiss
+  }, intl.formatMessage(messages.confirmButtonLabel)))));
+};

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

@@ -0,0 +1,23 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  title: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.title',
+    defaultMessage: 'Your changes won’t be saved',
+    description: 'Title for confirm-dismiss modal popup'
+  },
+  cancelButtonLabel: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.cancel-button-label',
+    defaultMessage: 'Go back',
+    description: 'Label for secondary button for confirm-dismiss modal popup'
+  },
+  confirmButtonLabel: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.confirm-button-label',
+    defaultMessage: 'Discard',
+    description: 'Label for primary button for confirm-dismiss modal popup'
+  },
+  description: {
+    id: 'linkCreate.confirm-dismiss-dialog.modal.description',
+    defaultMessage: 'We won’t be able to save your information if you move away from this page.',
+    description: 'Description for confirm-dismiss modal popup'
+  }
+});

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

@@ -1,16 +1,21 @@
+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", "onOpenComplete", "onCloseComplete"];
+  _excluded2 = ["active", "modalTitle", "onCancel", "onOpenComplete", "onCloseComplete"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import { Fragment, useCallback } from 'react';
+import { Fragment, useCallback, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import Modal, { ModalBody, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives';
 import { CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import { LinkCreateCallbackProvider } from '../../controllers/callback-context';
 import { useFormContext, withLinkCreateFormContext } from '../../controllers/form-context';
+import { ConfirmDismissDialog } from './confirm-dismiss-dialog';
 import { ErrorBoundary } from './error-boundary';
 import { messages } from './messages';
 import TrackMount from './track-mount';
@@ -26,7 +31,7 @@ var LinkCreateContent = function LinkCreateContent(_ref) {
   }
   return jsx(Fragment, null, chosenOne.form);
 };
-var LinkCreate = withLinkCreateFormContext(function (_ref2) {
+var LinkCreate = function LinkCreate(_ref2) {
   var _ref2$testId = _ref2.testId,
     testId = _ref2$testId === void 0 ? TEST_ID : _ref2$testId,
     onCreate = _ref2.onCreate,
@@ -64,28 +69,56 @@ var LinkCreate = withLinkCreateFormContext(function (_ref2) {
     setFormErrorMessage(error.message);
     onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
-  return jsx("div", {
-    "data-testid": testId
+  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 _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dismissDialog = _useState2[0],
+    setDismissDialog = _useState2[1];
+  var _useFormContext2 = useFormContext(),
+    isFormDirty = _useFormContext2.isFormDirty;
   var intl = useIntl();
-  return jsx(ModalTransition, null, !!active && jsx(Modal, {
+  var handleCancel = useCallback(function () {
+    if (getBooleanFF('platform.linking-platform.link-create.confirm-dismiss-dialog')) {
+      if (isFormDirty()) {
+        return setDismissDialog(true);
+      }
+    }
+    onCancel && onCancel();
+  }, [onCancel, isFormDirty]);
+  var handleCancelDismiss = useCallback(function () {
+    setDismissDialog(false);
+  }, []);
+  var handleConfirmDismiss = useCallback(function () {
+    setDismissDialog(false);
+    onCancel && onCancel();
+  }, [onCancel]);
+  return jsx(Fragment, null, jsx(ModalTransition, null, !!active && jsx(Modal, {
     testId: "link-create-modal",
-    onClose: createProps.onCancel,
+    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, createProps))));
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, modalTitle || intl.formatMessage(messages.heading))), jsx(ModalBody, null, jsx(LinkCreate, _extends({}, createProps, {
+    onCancel: handleCancel
+  }))))), jsx(ConfirmDismissDialog, {
+    active: dismissDialog,
+    onCancelDismiss: handleCancelDismiss,
+    onConfirmDismiss: handleConfirmDismiss
+  }));
 };
-export default LinkCreateWithModal;
+export default withLinkCreateFormContext(LinkCreateWithModal);

package/dist/esm/ui/main.js

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

package/dist/types/common/types.d.ts

@@ -48,6 +48,15 @@ export interface LinkCreatePlugin {
 export type CreatePayload = {
     /** The url to the resource created by the create plugin */
     url: string;
+    /**
+     * ARI of the created resource.
+     * https://developer.atlassian.com/platform/atlassian-resource-identifier/spec/ari-latest/
+     *
+     * It should be returned but it's not required to be on the Jira side:
+     * https://stash.atlassian.com/projects/JIRACLOUD/repos/jira-frontend/browse/src/packages/issue-create/issue-create-embed/src/ui/index.tsx
+     * https://stash.atlassian.com/projects/JIRACLOUD/repos/jira-frontend/pull-requests/103587/overview?commentId=5778323
+     */
+    ari: string | undefined;
     /** The object identifier for the resource created by the create plugin (for analytics) */
     objectId: string;
     /** The type of object created (for analytics) */

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

@@ -4,6 +4,8 @@ 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
@@ -11,6 +13,7 @@ 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/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmDismissDialog } from './main';
+export type { ConfirmDismissDialogProps } from './main';

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

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

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

@@ -0,0 +1,23 @@
+declare const _default: {
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    cancelButtonLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    confirmButtonLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    description: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

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

@@ -1,5 +1,5 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { LinkCreateWithModalProps } from '../../common/types';
 export declare const TEST_ID = "link-create";
-declare const LinkCreateWithModal: ({ active, modalTitle, onOpenComplete, onCloseComplete, ...createProps }: LinkCreateWithModalProps) => jsx.JSX.Element;
-export default LinkCreateWithModal;
+declare const _default: (props: LinkCreateWithModalProps) => JSX.Element;
+export default _default;

package/dist/types-ts4.5/common/types.d.ts

@@ -48,6 +48,15 @@ export interface LinkCreatePlugin {
 export type CreatePayload = {
     /** The url to the resource created by the create plugin */
     url: string;
+    /**
+     * ARI of the created resource.
+     * https://developer.atlassian.com/platform/atlassian-resource-identifier/spec/ari-latest/
+     *
+     * It should be returned but it's not required to be on the Jira side:
+     * https://stash.atlassian.com/projects/JIRACLOUD/repos/jira-frontend/browse/src/packages/issue-create/issue-create-embed/src/ui/index.tsx
+     * https://stash.atlassian.com/projects/JIRACLOUD/repos/jira-frontend/pull-requests/103587/overview?commentId=5778323
+     */
+    ari: string | undefined;
     /** The object identifier for the resource created by the create plugin (for analytics) */
     objectId: string;
     /** The type of object created (for analytics) */

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

@@ -4,6 +4,8 @@ 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
@@ -11,6 +13,7 @@ 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/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmDismissDialog } from './main';
+export type { ConfirmDismissDialogProps } from './main';

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

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

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

@@ -0,0 +1,23 @@
+declare const _default: {
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    cancelButtonLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    confirmButtonLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    description: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

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

@@ -1,5 +1,5 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { LinkCreateWithModalProps } from '../../common/types';
 export declare const TEST_ID = "link-create";
-declare const LinkCreateWithModal: ({ active, modalTitle, onOpenComplete, onCloseComplete, ...createProps }: LinkCreateWithModalProps) => jsx.JSX.Element;
-export default LinkCreateWithModal;
+declare const _default: (props: LinkCreateWithModalProps) => JSX.Element;
+export default _default;

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

@@ -28,6 +28,7 @@ export function MockPluginForm({ shouldThrowError }: pluginProps) {
         objectId: 'new-object-id',
         objectType: 'object-type',
         data: {},
+        ari: 'example-ari',
       });
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -42,6 +42,7 @@
     "@atlaskit/intl-messages-provider": "^1.0.0",
     "@atlaskit/modal-dialog": "^12.8.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
+    "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/select": "^16.7.0",
     "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/textfield": "^5.6.0",
@@ -61,7 +62,7 @@
     "@atlaskit/link-test-helpers": "^6.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/feature-flags-test-utils": "^0.1.2",
+    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "@types/debounce-promise": "^3.1.2",
@@ -113,6 +114,9 @@
   "platform-feature-flags": {
     "platform.linking-platform.link-create.enable-edit": {
       "type": "boolean"
+    },
+    "platform.linking-platform.link-create.confirm-dismiss-dialog": {
+      "type": "boolean"
     }
   }
 }

package/report.api.md

@@ -100,6 +100,7 @@ export interface CreateFormProps<FormData> {
 // @public
 export type CreatePayload = {
   url: string;
+  ari: string | undefined;
   objectId: string;
   objectType: string;
   data?: Record<string, unknown>;

package/tmp/api-report-tmp.d.ts

@@ -63,6 +63,7 @@ export interface CreateFormProps<FormData> {
 // @public
 export type CreatePayload = {
     url: string;
+    ari: string | undefined;
     objectId: string;
     objectType: string;
     data?: Record<string, unknown>;