@atlaskit/link-create 1.3.0 → 1.5.0

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/edit-modal/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
+import { useEditPostCreateModal } from '../../../controllers/edit-post-create-context';
+export const EditModal = ({
+  onClose
+}) => {
+  const {
+    editViewPayload
+  } = useEditPostCreateModal();
+  return /*#__PURE__*/React.createElement(ModalTransition, null, !!editViewPayload && /*#__PURE__*/React.createElement(Modal, {
+    testId: "link-create-edit-modal",
+    onClose: onClose,
+    shouldScrollInViewport: true,
+    width: "calc(100vw - 120px)",
+    height: "calc(100vh - 120px)"
+  }));
+};

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

@@ -1,11 +1,18 @@
+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 { EditPostCreateModalProvider } from '../../controllers/edit-post-create-context';
 import { useFormContext, withLinkCreateFormContext } from '../../controllers/form-context';
+import { LinkCreatePluginsProvider } from '../../controllers/plugin-context';
+import { ConfirmDismissDialog } from './confirm-dismiss-dialog';
+import { EditModal } from './edit-modal';
 import { ErrorBoundary } from './error-boundary';
 import { messages } from './messages';
 import TrackMount from './track-mount';
@@ -20,7 +27,7 @@ const LinkCreateContent = ({
   }
   return jsx(Fragment, null, chosenOne.form);
 };
-const LinkCreate = withLinkCreateFormContext(({
+const LinkCreate = ({
   testId = TEST_ID,
   onCreate,
   onFailure,
@@ -43,29 +50,67 @@ 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
+  }))))), getBooleanFF('platform.linking-platform.link-create.enable-edit') && jsx(EditModal, {
+    onClose: handleCancel
+  }), getBooleanFF('platform.linking-platform.link-create.confirm-dismiss-dialog') && jsx(ConfirmDismissDialog, {
+    active: dismissDialog,
+    onCancelDismiss: handleCancelDismiss,
+    onConfirmDismiss: handleConfirmDismiss
+  }));
 };
-export default LinkCreateWithModal;
+export default withLinkCreateFormContext(props => {
+  if (getBooleanFF('platform.linking-platform.link-create.enable-edit')) {
+    return jsx(LinkCreatePluginsProvider, {
+      plugins: props.plugins,
+      entityKey: props.entityKey
+    }, jsx(EditPostCreateModalProvider, {
+      active: !!props.active
+    }, jsx(LinkCreateWithModal, props)));
+  }
+  return jsx(LinkCreateWithModal, props);
+});

package/dist/es2019/ui/main.js

@@ -15,7 +15,7 @@ const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE
 }));
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.3.0" || '',
+  packageVersion: "1.5.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/edit-post-create-context/index.js

@@ -0,0 +1,33 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useContext, useMemo, useState } from 'react';
+var EditPostCreateModalContext = /*#__PURE__*/createContext({
+  editViewPayload: undefined,
+  setEditViewPayload: function setEditViewPayload() {}
+});
+export var EditPostCreateModalProvider = function EditPostCreateModalProvider(_ref) {
+  var active = _ref.active,
+    children = _ref.children;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    editViewPayload = _useState2[0],
+    setEditViewPayload = _useState2[1];
+  var value = useMemo(function () {
+    return {
+      editViewPayload: editViewPayload,
+      setEditViewPayload: setEditViewPayload
+    };
+  }, [editViewPayload, setEditViewPayload]);
+  if (editViewPayload && !active) {
+    setEditViewPayload(undefined);
+  }
+  return /*#__PURE__*/React.createElement(EditPostCreateModalContext.Provider, {
+    value: value
+  }, children);
+};
+export var useEditPostCreateModal = function useEditPostCreateModal() {
+  var value = useContext(EditPostCreateModalContext);
+  if (!value) {
+    throw new Error('useEditPostCreateModal used outside of useEditPostCreateModalProvider');
+  }
+  return value;
+};

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/controllers/plugin-context/index.js

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useContext, useMemo, useState } from 'react';
+var LinkCreatePluginsContext = /*#__PURE__*/createContext(null);
+export var LinkCreatePluginsProvider = function LinkCreatePluginsProvider(_ref) {
+  var plugins = _ref.plugins,
+    propEntityKey = _ref.entityKey,
+    children = _ref.children;
+  var _useState = useState(propEntityKey),
+    _useState2 = _slicedToArray(_useState, 1),
+    entityKey = _useState2[0];
+  var value = useMemo(function () {
+    var _plugins$find;
+    return {
+      activePlugin: (_plugins$find = plugins.find(function (plugin) {
+        return plugin.key === entityKey;
+      })) !== null && _plugins$find !== void 0 ? _plugins$find : null
+    };
+  }, [entityKey, plugins]);
+  return /*#__PURE__*/React.createElement(LinkCreatePluginsContext.Provider, {
+    value: value
+  }, children);
+};
+export var useLinkCreatePlugins = function useLinkCreatePlugins() {
+  var value = useContext(LinkCreatePluginsContext);
+  if (!value) {
+    throw new Error('useLinkCreatePlugins used outside of LinkCreatePluginsProvider');
+  }
+  return value;
+};

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/edit-modal/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
+import { useEditPostCreateModal } from '../../../controllers/edit-post-create-context';
+export var EditModal = function EditModal(_ref) {
+  var onClose = _ref.onClose;
+  var _useEditPostCreateMod = useEditPostCreateModal(),
+    editViewPayload = _useEditPostCreateMod.editViewPayload;
+  return /*#__PURE__*/React.createElement(ModalTransition, null, !!editViewPayload && /*#__PURE__*/React.createElement(Modal, {
+    testId: "link-create-edit-modal",
+    onClose: onClose,
+    shouldScrollInViewport: true,
+    width: "calc(100vw - 120px)",
+    height: "calc(100vh - 120px)"
+  }));
+};

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

@@ -1,16 +1,24 @@
+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 { EditPostCreateModalProvider } from '../../controllers/edit-post-create-context';
 import { useFormContext, withLinkCreateFormContext } from '../../controllers/form-context';
+import { LinkCreatePluginsProvider } from '../../controllers/plugin-context';
+import { ConfirmDismissDialog } from './confirm-dismiss-dialog';
+import { EditModal } from './edit-modal';
 import { ErrorBoundary } from './error-boundary';
 import { messages } from './messages';
 import TrackMount from './track-mount';
@@ -26,7 +34,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 +72,68 @@ 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
+  }))))), getBooleanFF('platform.linking-platform.link-create.enable-edit') && jsx(EditModal, {
+    onClose: handleCancel
+  }), getBooleanFF('platform.linking-platform.link-create.confirm-dismiss-dialog') && jsx(ConfirmDismissDialog, {
+    active: dismissDialog,
+    onCancelDismiss: handleCancelDismiss,
+    onConfirmDismiss: handleConfirmDismiss
+  }));
 };
-export default LinkCreateWithModal;
+export default withLinkCreateFormContext(function (props) {
+  if (getBooleanFF('platform.linking-platform.link-create.enable-edit')) {
+    return jsx(LinkCreatePluginsProvider, {
+      plugins: props.plugins,
+      entityKey: props.entityKey
+    }, jsx(EditPostCreateModalProvider, {
+      active: !!props.active
+    }, jsx(LinkCreateWithModal, props)));
+  }
+  return jsx(LinkCreateWithModal, props);
+});

package/dist/esm/ui/main.js

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

package/dist/types/controllers/edit-post-create-context/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CreatePayload } from '../../common/types';
+type EditPostCreateModalContextValue = {
+    editViewPayload?: CreatePayload | undefined;
+    setEditViewPayload: (payload?: CreatePayload) => void;
+};
+export declare const EditPostCreateModalProvider: ({ active, children, }: {
+    active: boolean;
+    children: React.ReactNode;
+}) => JSX.Element;
+export declare const useEditPostCreateModal: () => EditPostCreateModalContextValue;
+export {};

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/controllers/plugin-context/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { LinkCreatePlugin } from '../../common/types';
+type LinkCreatePluginsProviderProps = {
+    /**
+     * The list of plugins provided as a prop to Link Create component
+     */
+    plugins: LinkCreatePlugin[];
+    /**
+     * The entity key as provided as prop to link create which controls the initially active plugin
+     */
+    entityKey: string;
+    children: React.ReactNode;
+};
+export declare const LinkCreatePluginsProvider: ({ plugins, entityKey: propEntityKey, children, }: LinkCreatePluginsProviderProps) => JSX.Element;
+export declare const useLinkCreatePlugins: () => {
+    activePlugin: LinkCreatePlugin | null;
+};
+export {};

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;