@atlaskit/link-create 0.5.7 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-create
 
+## 0.7.0
+
+### Minor Changes
+
+- [`eb070266532`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eb070266532) - Expose Modal callbacks and Add modalTitle to the linkCreate Props
+
+## 0.6.0
+
+### Minor Changes
+
+- [`ac3927f0650`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac3927f0650) - Make modal 480px wide, Update TextField to take isRequired prop w/o default browser validation, remove extra internal spacing in the create form
+
 ## 0.5.7
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -8,7 +8,7 @@ var ANALYTICS_CHANNEL = 'media';
 exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var COMPONENT_NAME = 'linkCreate';
 exports.COMPONENT_NAME = COMPONENT_NAME;
-var CREATE_FORM_MAX_WIDTH_IN_PX = '600';
+var CREATE_FORM_MAX_WIDTH_IN_PX = '480';
 exports.CREATE_FORM_MAX_WIDTH_IN_PX = CREATE_FORM_MAX_WIDTH_IN_PX;
 var CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
 exports.CREATE_FORM_MIN_HEIGHT_IN_PX = CREATE_FORM_MIN_HEIGHT_IN_PX;

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

@@ -15,4 +15,10 @@ Object.defineProperty(exports, "useFormContext", {
     return _main.useFormContext;
   }
 });
+Object.defineProperty(exports, "withLinkCreateFormContext", {
+  enumerable: true,
+  get: function get() {
+    return _main.withLinkCreateFormContext;
+  }
+});
 var _main = require("./main");

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFormContext = exports.FormContextProvider = exports.FormContext = void 0;
+exports.withLinkCreateFormContext = exports.useFormContext = exports.FormContextProvider = exports.FormContext = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -61,4 +61,10 @@ exports.FormContextProvider = FormContextProvider;
 var useFormContext = function useFormContext() {
   return (0, _react.useContext)(FormContext);
 };
-exports.useFormContext = useFormContext;
+exports.useFormContext = useFormContext;
+var withLinkCreateFormContext = function withLinkCreateFormContext(WrappedComponent) {
+  return function (props) {
+    return /*#__PURE__*/_react.default.createElement(FormContextProvider, null, /*#__PURE__*/_react.default.createElement(WrappedComponent, props));
+  };
+};
+exports.withLinkCreateFormContext = withLinkCreateFormContext;

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

@@ -96,7 +96,7 @@ var CreateForm = function CreateForm(_ref) {
       name: "confluence-creation-form",
       "data-testid": testId,
       css: formStyles
-    }), (0, _react2.jsx)(_form.FormSection, null, children), !hideFooter && (0, _react2.jsx)(_form.FormFooter, null, formErrorMessage && (0, _react2.jsx)("div", {
+    }), (0, _react2.jsx)("div", null, children), !hideFooter && (0, _react2.jsx)(_form.FormFooter, null, formErrorMessage && (0, _react2.jsx)("div", {
       css: errorStyles,
       "data-testid": "link-create-form-error"
     }, (0, _react2.jsx)(_error.default, {

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

@@ -13,7 +13,7 @@ var _form = require("@atlaskit/form");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _form2 = require("../../../common/utils/form");
 var _formContext = require("../../../controllers/form-context");
-var _excluded = ["label", "name", "validationHelpText", "validators", "defaultValue"];
+var _excluded = ["label", "name", "validationHelpText", "validators", "defaultValue", "isRequired"];
 /** @jsx jsx */
 /**
  * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
@@ -28,6 +28,7 @@ function TextField(_ref) {
     validationHelpText = _ref.validationHelpText,
     validators = _ref.validators,
     defaultValue = _ref.defaultValue,
+    isRequired = _ref.isRequired,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useFormContext = (0, _formContext.useFormContext)(),
     assignValidator = _useFormContext.assignValidator;
@@ -47,6 +48,7 @@ function TextField(_ref) {
     (0, _react2.jsx)(_form.Field, {
       name: name,
       label: label,
+      isRequired: isRequired,
       defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''
     }, function (_ref2) {
       var fieldProps = _ref2.fieldProps,
@@ -54,7 +56,8 @@ function TextField(_ref) {
         error = _ref2.error;
       var isInvalid = (0, _form2.validateSubmitErrors)(meta);
       return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
-        isInvalid: isInvalid
+        isInvalid: isInvalid,
+        isRequired: false // Remove the default browser validation
       })), !error && validationHelpText && (0, _react2.jsx)(_form.HelperMessage, null, validationHelpText), error && isInvalid && (0, _react2.jsx)(_form.ErrorMessage, {
         testId: "".concat(restProps.testId, "-error-message")
       }, error));

package/dist/cjs/ui/{error-boundary → link-create/error-boundary}/index.js

@@ -8,8 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.ErrorBoundary = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _constants = require("../../common/constants");
-var _analytics = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
+var _constants = require("../../../common/constants");
+var _analytics = _interopRequireDefault(require("../../../common/utils/analytics/analytics.codegen"));
 var _errorBoundaryBase = require("./error-boundary-base");
 var _errorBoundaryUi = require("./error-boundary-ui");
 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); }

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _main.default;
+  }
+});
+var _main = _interopRequireDefault(require("./main"));

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

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+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 _constants = require("../../common/constants");
+var _callbackContext = require("../../controllers/callback-context");
+var _formContext = require("../../controllers/form-context");
+var _errorBoundary = require("./error-boundary");
+var _messages = require("./messages");
+var _trackMount = _interopRequireDefault(require("./track-mount"));
+var _excluded = ["testId", "onCreate", "onFailure", "onCancel"],
+  _excluded2 = ["active", "modalTitle", "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; }
+var LinkCreateContent = function LinkCreateContent(_ref) {
+  var plugins = _ref.plugins,
+    entityKey = _ref.entityKey;
+  var chosenOne = plugins.find(function (plugin) {
+    return plugin.key === entityKey;
+  });
+  if (!chosenOne) {
+    throw new Error('Make sure you specified a valid entityKey');
+  }
+  return (0, _react2.jsx)(_react.Fragment, null, chosenOne.form);
+};
+var LinkCreate = (0, _formContext.withLinkCreateFormContext)(function (_ref2) {
+  var testId = _ref2.testId,
+    onCreate = _ref2.onCreate,
+    onFailure = _ref2.onFailure,
+    onCancel = _ref2.onCancel,
+    restProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  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) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            // Reset the form error message
+            setFormErrorMessage(undefined);
+            if (!onCreate) {
+              _context.next = 4;
+              break;
+            }
+            _context.next = 4;
+            return onCreate(result.url);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [onCreate, setFormErrorMessage]);
+  var handleFailure = (0, _react.useCallback)(function (errorMessage) {
+    // Set the form error message
+    setFormErrorMessage(errorMessage);
+    onFailure && onFailure(errorMessage);
+  }, [onFailure, setFormErrorMessage]);
+  return (0, _react2.jsx)("div", {
+    "data-testid": testId
+  }, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_callbackContext.LinkCreateCallbackProvider, {
+    onCreate: handleCreate,
+    onFailure: handleFailure,
+    onCancel: onCancel
+  }, (0, _react2.jsx)(_trackMount.default, null), (0, _react2.jsx)(LinkCreateContent, restProps))));
+});
+var LinkCreateWithModal = function LinkCreateWithModal(_ref4) {
+  var active = _ref4.active,
+    modalTitle = _ref4.modalTitle,
+    onOpenComplete = _ref4.onOpenComplete,
+    onCloseComplete = _ref4.onCloseComplete,
+    createProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!active && (0, _react2.jsx)(_modalDialog.default, {
+    testId: createProps.testId && "".concat(createProps.testId, "--modal"),
+    onClose: createProps.onCancel,
+    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))));
+};
+var _default = LinkCreateWithModal;
+exports.default = _default;

package/dist/cjs/ui/link-create/track-mount/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _constants = require("../../../common/constants");
+var _analytics = _interopRequireDefault(require("../../../common/utils/analytics/analytics.codegen"));
+/** @jsx jsx */
+
+/**
+ * Analytics tracking for component mount (and unmount)
+ */
+function TrackMount() {
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  (0, _react.useLayoutEffect)(function () {
+    // Anything in here is fired on component mount.
+    createAnalyticsEvent((0, _analytics.default)('screen.linkCreateScreen.viewed', {})).fire(_constants.ANALYTICS_CHANNEL);
+    return function () {
+      // Anything in here is fired on component unmount.
+      createAnalyticsEvent((0, _analytics.default)('ui.modalDialog.closed.linkCreate', {})).fire(_constants.ANALYTICS_CHANNEL);
+    };
+  }, [createAnalyticsEvent]);
+  return null;
+}
+var _default = TrackMount;
+exports.default = _default;

package/dist/cjs/ui/main.js

@@ -1,104 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PACKAGE_DATA = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _constants = require("../common/constants");
 var _analytics = require("../common/utils/analytics");
-var _analytics2 = _interopRequireDefault(require("../common/utils/analytics/analytics.codegen"));
-var _callbackContext = require("../controllers/callback-context");
-var _formContext = require("../controllers/form-context");
 var _version = require("../version.json");
-var _errorBoundary = require("./error-boundary");
-var _messages = 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 _linkCreate = _interopRequireDefault(require("./link-create"));
 /** @jsx jsx */
 
-var LinkCreate = function LinkCreate(_ref) {
-  var plugins = _ref.plugins,
-    entityKey = _ref.entityKey,
-    onCreate = _ref.onCreate,
-    onFailure = _ref.onFailure,
-    onCancel = _ref.onCancel;
-  var chosenOne = plugins.find(function (plugin) {
-    return plugin.key === entityKey;
-  });
-  var _useFormContext = (0, _formContext.useFormContext)(),
-    setFormErrorMessage = _useFormContext.setFormErrorMessage;
-  if (!chosenOne) {
-    throw new Error('Make sure you specified a valid entityKey');
-  }
-  var handleCreate = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref2 = (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:
-            // Reset the form error message
-            setFormErrorMessage(undefined);
-            if (!onCreate) {
-              _context.next = 4;
-              break;
-            }
-            _context.next = 4;
-            return onCreate(result.url);
-          case 4:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [onCreate, setFormErrorMessage]);
-  var handleFailure = (0, _react.useCallback)(function (errorMessage) {
-    // Set the form error message
-    setFormErrorMessage(errorMessage);
-    onFailure && onFailure(errorMessage);
-  }, [onFailure, setFormErrorMessage]);
-  return (0, _react2.jsx)(_callbackContext.LinkCreateCallbackProvider, {
-    onCreate: handleCreate,
-    onFailure: handleFailure,
-    onCancel: onCancel
-  }, chosenOne.form);
-};
-var LinkCreateWithModal = function LinkCreateWithModal(props) {
-  var testId = props.testId,
-    onCancel = props.onCancel,
-    active = props.active;
-  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var intl = (0, _reactIntlNext.useIntl)();
-  var handleOpenComplete = (0, _react.useCallback)(function () {
-    createAnalyticsEvent((0, _analytics2.default)('screen.linkCreateScreen.viewed', {})).fire(_constants.ANALYTICS_CHANNEL);
-  }, [createAnalyticsEvent]);
-  var handleCloseComplete = (0, _react.useCallback)(function () {
-    createAnalyticsEvent((0, _analytics2.default)('ui.modalDialog.closed.linkCreate', {})).fire(_constants.ANALYTICS_CHANNEL);
-  }, [createAnalyticsEvent]);
-  return (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!active && (0, _react2.jsx)(_modalDialog.default, {
-    onClose: onCancel,
-    testId: testId,
-    shouldScrollInViewport: true,
-    onOpenComplete: handleOpenComplete,
-    onCloseComplete: handleCloseComplete
-  }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, intl.formatMessage(_messages.messages.heading))), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_formContext.FormContextProvider, null, (0, _react2.jsx)(LinkCreate, props))))));
-};
-var LinkCreateWithAnalyticsContext = (0, _analytics.withLinkCreateAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(function (_ref3) {
-  var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref3), _ref3));
-  return (0, _react2.jsx)(LinkCreateWithModal, props);
+var LinkCreateWithAnalyticsContext = (0, _analytics.withLinkCreateAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref), _ref));
+  return (0, _react2.jsx)(_linkCreate.default, props);
 }));
 var PACKAGE_DATA = {
   packageName: _version.name,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.5.7",
+	"version": "0.7.0",
 	"sideEffects": false
 }

package/dist/es2019/common/constants.js

@@ -1,4 +1,4 @@
 export const ANALYTICS_CHANNEL = 'media';
 export const COMPONENT_NAME = 'linkCreate';
-export const CREATE_FORM_MAX_WIDTH_IN_PX = '600';
+export const CREATE_FORM_MAX_WIDTH_IN_PX = '480';
 export const CREATE_FORM_MIN_HEIGHT_IN_PX = '200';

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

@@ -1 +1 @@
-export { FormContextProvider, useFormContext } from './main';
+export { FormContextProvider, useFormContext, withLinkCreateFormContext } from './main';

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

@@ -37,4 +37,7 @@ const FormContextProvider = ({
   }, children);
 };
 const useFormContext = () => useContext(FormContext);
-export { FormContextProvider, useFormContext };
+export { FormContextProvider, useFormContext };
+export const withLinkCreateFormContext = WrappedComponent => {
+  return props => /*#__PURE__*/React.createElement(FormContextProvider, null, /*#__PURE__*/React.createElement(WrappedComponent, props));
+};

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

@@ -7,7 +7,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ButtonGroup } from '@atlaskit/button';
 import LoadingButton from '@atlaskit/button/loading-button';
 import Button from '@atlaskit/button/standard-button';
-import Form, { FormFooter, FormSection } from '@atlaskit/form';
+import Form, { FormFooter } from '@atlaskit/form';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { ANALYTICS_CHANNEL, CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
@@ -69,7 +69,7 @@ export const CreateForm = ({
     name: "confluence-creation-form",
     "data-testid": testId,
     css: formStyles
-  }), jsx(FormSection, null, children), !hideFooter && jsx(FormFooter, null, formErrorMessage && jsx("div", {
+  }), jsx("div", null, children), !hideFooter && jsx(FormFooter, null, formErrorMessage && jsx("div", {
     css: errorStyles,
     "data-testid": "link-create-form-error"
   }, jsx(ErrorIcon, {

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

@@ -19,6 +19,7 @@ export function TextField({
   validationHelpText,
   validators,
   defaultValue,
+  isRequired,
   ...restProps
 }) {
   const {
@@ -40,6 +41,7 @@ export function TextField({
     jsx(Field, {
       name: name,
       label: label,
+      isRequired: isRequired,
       defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''
     }, ({
       fieldProps,
@@ -48,7 +50,8 @@ export function TextField({
     }) => {
       const isInvalid = validateSubmitErrors(meta);
       return jsx(Fragment, null, jsx(AkTextfield, _extends({}, fieldProps, restProps, {
-        isInvalid: isInvalid
+        isInvalid: isInvalid,
+        isRequired: false // Remove the default browser validation
       })), !error && validationHelpText && jsx(HelperMessage, null, validationHelpText), error && isInvalid && jsx(ErrorMessage, {
         testId: `${restProps.testId}-error-message`
       }, error));

package/dist/es2019/ui/{error-boundary → link-create/error-boundary}/index.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ANALYTICS_CHANNEL } from '../../common/constants';
-import createEventPayload from '../../common/utils/analytics/analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../../common/constants';
+import createEventPayload from '../../../common/utils/analytics/analytics.codegen';
 import { BaseErrorBoundary } from './error-boundary-base';
 import { ErrorBoundaryUI } from './error-boundary-ui';
 export const ErrorBoundary = ({

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

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

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

@@ -0,0 +1,69 @@
+/** @jsx jsx */
+import { Fragment, useCallback } from 'react';
+import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import Modal, { ModalBody, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
+import { LinkCreateCallbackProvider } from '../../controllers/callback-context';
+import { useFormContext, withLinkCreateFormContext } from '../../controllers/form-context';
+import { ErrorBoundary } from './error-boundary';
+import { messages } from './messages';
+import TrackMount from './track-mount';
+const LinkCreateContent = ({
+  plugins,
+  entityKey
+}) => {
+  const chosenOne = plugins.find(plugin => plugin.key === entityKey);
+  if (!chosenOne) {
+    throw new Error('Make sure you specified a valid entityKey');
+  }
+  return jsx(Fragment, null, chosenOne.form);
+};
+const LinkCreate = withLinkCreateFormContext(({
+  testId,
+  onCreate,
+  onFailure,
+  onCancel,
+  ...restProps
+}) => {
+  const {
+    setFormErrorMessage
+  } = useFormContext();
+  const handleCreate = useCallback(async result => {
+    // Reset the form error message
+    setFormErrorMessage(undefined);
+    if (onCreate) {
+      await onCreate(result.url);
+    }
+  }, [onCreate, setFormErrorMessage]);
+  const handleFailure = useCallback(errorMessage => {
+    // Set the form error message
+    setFormErrorMessage(errorMessage);
+    onFailure && onFailure(errorMessage);
+  }, [onFailure, setFormErrorMessage]);
+  return jsx("div", {
+    "data-testid": testId
+  }, jsx(ErrorBoundary, null, jsx(LinkCreateCallbackProvider, {
+    onCreate: handleCreate,
+    onFailure: handleFailure,
+    onCancel: onCancel
+  }, jsx(TrackMount, null), jsx(LinkCreateContent, restProps))));
+});
+const LinkCreateWithModal = ({
+  active,
+  modalTitle,
+  onOpenComplete,
+  onCloseComplete,
+  ...createProps
+}) => {
+  const intl = useIntl();
+  return jsx(ModalTransition, null, !!active && jsx(Modal, {
+    testId: createProps.testId && `${createProps.testId}--modal`,
+    onClose: createProps.onCancel,
+    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))));
+};
+export default LinkCreateWithModal;

package/dist/es2019/ui/link-create/track-mount/index.js

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { useLayoutEffect } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ANALYTICS_CHANNEL } from '../../../common/constants';
+import createEventPayload from '../../../common/utils/analytics/analytics.codegen';
+
+/**
+ * Analytics tracking for component mount (and unmount)
+ */
+function TrackMount() {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  useLayoutEffect(() => {
+    // Anything in here is fired on component mount.
+    createAnalyticsEvent(createEventPayload('screen.linkCreateScreen.viewed', {})).fire(ANALYTICS_CHANNEL);
+    return () => {
+      // Anything in here is fired on component unmount.
+      createAnalyticsEvent(createEventPayload('ui.modalDialog.closed.linkCreate', {})).fire(ANALYTICS_CHANNEL);
+    };
+  }, [createAnalyticsEvent]);
+  return null;
+}
+export default TrackMount;

package/dist/es2019/ui/main.js

@@ -1,77 +1,15 @@
 /** @jsx jsx */
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { jsx } from '@emotion/react';
-import { useIntl } from 'react-intl-next';
-import { AnalyticsContext, useAnalyticsEvents } from '@atlaskit/analytics-next';
-import Modal, { ModalBody, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { ANALYTICS_CHANNEL, COMPONENT_NAME } from '../common/constants';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { COMPONENT_NAME } from '../common/constants';
 import { withLinkCreateAnalyticsContext } from '../common/utils/analytics';
-import createEventPayload from '../common/utils/analytics/analytics.codegen';
-import { LinkCreateCallbackProvider } from '../controllers/callback-context';
-import { FormContextProvider, useFormContext } from '../controllers/form-context';
 import { name as packageName, version as packageVersion } from '../version.json';
-import { ErrorBoundary } from './error-boundary';
-import { messages } from './messages';
-const LinkCreate = ({
-  plugins,
-  entityKey,
-  onCreate,
-  onFailure,
-  onCancel
-}) => {
-  const chosenOne = plugins.find(plugin => plugin.key === entityKey);
-  const {
-    setFormErrorMessage
-  } = useFormContext();
-  if (!chosenOne) {
-    throw new Error('Make sure you specified a valid entityKey');
-  }
-  const handleCreate = useCallback(async result => {
-    // Reset the form error message
-    setFormErrorMessage(undefined);
-    if (onCreate) {
-      await onCreate(result.url);
-    }
-  }, [onCreate, setFormErrorMessage]);
-  const handleFailure = useCallback(errorMessage => {
-    // Set the form error message
-    setFormErrorMessage(errorMessage);
-    onFailure && onFailure(errorMessage);
-  }, [onFailure, setFormErrorMessage]);
-  return jsx(LinkCreateCallbackProvider, {
-    onCreate: handleCreate,
-    onFailure: handleFailure,
-    onCancel: onCancel
-  }, chosenOne.form);
-};
-const LinkCreateWithModal = props => {
-  const {
-    testId,
-    onCancel,
-    active
-  } = props;
-  const {
-    createAnalyticsEvent
-  } = useAnalyticsEvents();
-  const intl = useIntl();
-  const handleOpenComplete = useCallback(() => {
-    createAnalyticsEvent(createEventPayload('screen.linkCreateScreen.viewed', {})).fire(ANALYTICS_CHANNEL);
-  }, [createAnalyticsEvent]);
-  const handleCloseComplete = useCallback(() => {
-    createAnalyticsEvent(createEventPayload('ui.modalDialog.closed.linkCreate', {})).fire(ANALYTICS_CHANNEL);
-  }, [createAnalyticsEvent]);
-  return jsx(ModalTransition, null, !!active && jsx(Modal, {
-    onClose: onCancel,
-    testId: testId,
-    shouldScrollInViewport: true,
-    onOpenComplete: handleOpenComplete,
-    onCloseComplete: handleCloseComplete
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, intl.formatMessage(messages.heading))), jsx(ModalBody, null, jsx(ErrorBoundary, null, jsx(FormContextProvider, null, jsx(LinkCreate, props))))));
-};
+import LinkCreate from './link-create';
 const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE__*/memo(({
   ...props
 }) => {
-  return jsx(LinkCreateWithModal, props);
+  return jsx(LinkCreate, props);
 }));
 export const PACKAGE_DATA = {
   packageName,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.5.7",
+	"version": "0.7.0",
 	"sideEffects": false
 }