@atlaskit/link-create 0.4.4 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-create
 
+## 0.5.0
+
+### Minor Changes
+
+- [`ad753581e70`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ad753581e70) - [ux] Moves the FormFooter out of CreateForm and provides a new CreateFormLoader component & now we handle the submitting state in the form context
+
 ## 0.4.4
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CREATE_FORM_MAX_WIDTH_IN_PX = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
+exports.CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MAX_WIDTH_IN_PX = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
 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';
-exports.CREATE_FORM_MAX_WIDTH_IN_PX = CREATE_FORM_MAX_WIDTH_IN_PX;
+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/main.js

@@ -32,19 +32,19 @@ var FormContextProvider = function FormContextProvider(_ref) {
     validators = _useState4[0],
     setValidators = _useState4[1];
 
-  // Use useCallback to prevent infinite useEffect calls
+  // Add validators to the form
   var assignValidator = (0, _react.useCallback)(function (name, fieldValidators) {
     setValidators(function (prevValidators) {
       return _objectSpread(_objectSpread({}, prevValidators), {}, (0, _defineProperty2.default)({}, name, fieldValidators));
     });
   }, []);
 
-  // Use useCallback to prevent infinite useEffect calls
+  // Returns a validator function array
   var getValidators = (0, _react.useCallback)(function () {
     return validators;
   }, [validators]);
 
-  // Callback to reset error state
+  // Sets the form footer error message
   var setFormErrorMessage = (0, _react.useCallback)(function (errorMessage) {
     return setError(errorMessage);
   }, [setError]);

package/dist/cjs/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "CreateForm", {
     return _index.CreateForm;
   }
 });
+Object.defineProperty(exports, "CreateFormLoader", {
+  enumerable: true,
+  get: function get() {
+    return _index.CreateFormLoader;
+  }
+});
 Object.defineProperty(exports, "FormContextProvider", {
   enumerable: true,
   get: function get() {

package/dist/cjs/ui/create-form/form-loader/index.js

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

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

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateFormLoader = CreateFormLoader;
+var _react = require("@emotion/react");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _constants = require("../../../common/constants");
+/** @jsx jsx */
+
+var formLoaderStyles = (0, _react.css)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: "".concat(_constants.CREATE_FORM_MIN_HEIGHT_IN_PX, "px")
+});
+function CreateFormLoader(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'large' : _ref$size;
+  return (0, _react.jsx)("div", {
+    css: formLoaderStyles
+  }, (0, _react.jsx)(_spinner.default, {
+    size: size,
+    interactionName: "load",
+    testId: "link-create-form-loader"
+  }));
+}

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

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "CreateForm", {
     return _main.CreateForm;
   }
 });
+Object.defineProperty(exports, "CreateFormLoader", {
+  enumerable: true,
+  get: function get() {
+    return _formLoader.CreateFormLoader;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function get() {
@@ -23,4 +29,5 @@ Object.defineProperty(exports, "TextField", {
 });
 var _main = require("./main");
 var _asyncSelect = require("./async-select");
+var _formLoader = require("./form-loader");
 var _textfield = require("./textfield");

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

@@ -21,6 +21,7 @@ var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _constants = require("../../common/constants");
 var _analytics = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
 var _formContext = require("../../controllers/form-context");
+var _formLoader = require("./form-loader");
 var _messages = require("./messages");
 var _utils = require("./utils");
 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); }
@@ -40,14 +41,16 @@ var errorStyles = (0, _react2.css)({
 var CreateForm = function CreateForm(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
+    onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
-    onSubmit = _ref.onSubmit;
+    isLoading = _ref.isLoading,
+    hideFooter = _ref.hideFooter;
+  var intl = (0, _reactIntlNext.useIntl)();
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useFormContext = (0, _formContext.useFormContext)(),
     getValidators = _useFormContext.getValidators,
     formErrorMessage = _useFormContext.formErrorMessage;
-  var intl = (0, _reactIntlNext.useIntl)();
   var handleSubmit = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(data) {
       var validators, errors;
@@ -81,22 +84,26 @@ var CreateForm = function CreateForm(_ref) {
     createAnalyticsEvent((0, _analytics.default)('ui.button.clicked.cancel', {})).fire(_constants.ANALYTICS_CHANNEL);
     onCancel && onCancel();
   }, [createAnalyticsEvent, onCancel]);
+  if (isLoading) {
+    return (0, _react2.jsx)(_formLoader.CreateFormLoader, null);
+  }
   return (0, _react2.jsx)(_form.default, {
     onSubmit: handleSubmit
   }, function (_ref3) {
-    var submitting = _ref3.submitting,
-      formProps = _ref3.formProps;
+    var formProps = _ref3.formProps,
+      submitting = _ref3.submitting;
     return (0, _react2.jsx)("form", (0, _extends2.default)({}, formProps, {
       name: "confluence-creation-form",
       "data-testid": testId,
       css: formStyles
-    }), (0, _react2.jsx)(_form.FormSection, null, children), (0, _react2.jsx)(_form.FormFooter, null, formErrorMessage && (0, _react2.jsx)("div", {
+    }), (0, _react2.jsx)(_form.FormSection, null, children), !hideFooter && (0, _react2.jsx)(_form.FormFooter, null, formErrorMessage && (0, _react2.jsx)("div", {
       css: errorStyles,
-      "data-testid": "link-create-confluence-form-error"
+      "data-testid": "link-create-form-error"
     }, (0, _react2.jsx)(_error.default, {
       label: formErrorMessage,
       primaryColor: "var(--ds-icon-danger, #E34935)"
     }), formErrorMessage), (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_standardButton.default, {
+      type: "button",
       appearance: "subtle",
       onClick: handleCancel,
       testId: 'cancel-button'

package/dist/cjs/ui/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "CreateForm", {
     return _main2.CreateForm;
   }
 });
+Object.defineProperty(exports, "CreateFormLoader", {
+  enumerable: true,
+  get: function get() {
+    return _formLoader.CreateFormLoader;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function get() {
@@ -31,4 +37,5 @@ Object.defineProperty(exports, "default", {
 var _main = _interopRequireDefault(require("./main"));
 var _textfield = require("./create-form/textfield");
 var _main2 = require("./create-form/main");
+var _formLoader = require("./create-form/form-loader");
 var _asyncSelect = require("./create-form/async-select");

package/dist/cjs/ui/main.js

@@ -25,12 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
 
-var withFormContext = function withFormContext(Component) {
-  return function (props) {
-    return (0, _react2.jsx)(_formContext.FormContextProvider, null, (0, _react2.jsx)(Component, props));
-  };
-};
-var LinkCreate = withFormContext(function (_ref) {
+var LinkCreate = function LinkCreate(_ref) {
   var plugins = _ref.plugins,
     entityKey = _ref.entityKey,
     onCreate = _ref.onCreate,
@@ -59,7 +54,7 @@ var LinkCreate = withFormContext(function (_ref) {
     onFailure: handleFailure,
     onCancel: onCancel
   }, chosenOne.form);
-});
+};
 var LinkCreateWithModal = function LinkCreateWithModal(props) {
   var testId = props.testId,
     onCancel = props.onCancel,

package/dist/cjs/version.json

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

package/dist/es2019/common/constants.js

@@ -1,3 +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 = '600';
+export const CREATE_FORM_MIN_HEIGHT_IN_PX = '200';

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

@@ -10,7 +10,7 @@ const FormContextProvider = ({
   const [error, setError] = useState();
   const [validators, setValidators] = useState({});
 
-  // Use useCallback to prevent infinite useEffect calls
+  // Add validators to the form
   const assignValidator = useCallback((name, fieldValidators) => {
     setValidators(prevValidators => ({
       ...prevValidators,
@@ -18,12 +18,12 @@ const FormContextProvider = ({
     }));
   }, []);
 
-  // Use useCallback to prevent infinite useEffect calls
+  // Returns a validator function array
   const getValidators = useCallback(() => {
     return validators;
   }, [validators]);
 
-  // Callback to reset error state
+  // Sets the form footer error message
   const setFormErrorMessage = useCallback(errorMessage => {
     return setError(errorMessage);
   }, [setError]);

package/dist/es2019/index.js

@@ -1,3 +1,3 @@
-export { default, TextField, CreateForm, AsyncSelect } from './ui/index';
+export { default, TextField, CreateForm, AsyncSelect, CreateFormLoader } from './ui/index';
 export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';
 export { FormContextProvider, useFormContext } from './controllers/form-context';

package/dist/es2019/ui/create-form/form-loader/index.js

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

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

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import { CREATE_FORM_MIN_HEIGHT_IN_PX } from '../../../common/constants';
+const formLoaderStyles = css({
+  display: `flex`,
+  alignItems: `center`,
+  justifyContent: `center`,
+  minHeight: `${CREATE_FORM_MIN_HEIGHT_IN_PX}px`
+});
+export function CreateFormLoader({
+  size = 'large'
+}) {
+  return jsx("div", {
+    css: formLoaderStyles
+  }, jsx(Spinner, {
+    size: size,
+    interactionName: "load",
+    testId: "link-create-form-loader"
+  }));
+}

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

@@ -1,3 +1,4 @@
 export { CreateForm } from './main';
 export { AsyncSelect } from './async-select';
+export { CreateFormLoader } from './form-loader';
 export { TextField } from './textfield';

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

@@ -12,6 +12,7 @@ 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';
 import { useFormContext } from '../../controllers/form-context';
+import { CreateFormLoader } from './form-loader';
 import { messages } from './messages';
 import { validateFormData } from './utils';
 const formStyles = css({
@@ -27,9 +28,12 @@ const errorStyles = css({
 export const CreateForm = ({
   children,
   testId,
+  onSubmit,
   onCancel,
-  onSubmit
+  isLoading,
+  hideFooter
 }) => {
+  const intl = useIntl();
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
@@ -37,7 +41,6 @@ export const CreateForm = ({
     getValidators,
     formErrorMessage
   } = useFormContext();
-  const intl = useIntl();
   const handleSubmit = useCallback(async data => {
     createAnalyticsEvent(createEventPayload('ui.button.clicked.create', {})).fire(ANALYTICS_CHANNEL);
     const validators = getValidators();
@@ -54,22 +57,26 @@ export const CreateForm = ({
     createAnalyticsEvent(createEventPayload('ui.button.clicked.cancel', {})).fire(ANALYTICS_CHANNEL);
     onCancel && onCancel();
   }, [createAnalyticsEvent, onCancel]);
+  if (isLoading) {
+    return jsx(CreateFormLoader, null);
+  }
   return jsx(Form, {
     onSubmit: handleSubmit
   }, ({
-    submitting,
-    formProps
+    formProps,
+    submitting
   }) => jsx("form", _extends({}, formProps, {
     name: "confluence-creation-form",
     "data-testid": testId,
     css: formStyles
-  }), jsx(FormSection, null, children), jsx(FormFooter, null, formErrorMessage && jsx("div", {
+  }), jsx(FormSection, null, children), !hideFooter && jsx(FormFooter, null, formErrorMessage && jsx("div", {
     css: errorStyles,
-    "data-testid": "link-create-confluence-form-error"
+    "data-testid": "link-create-form-error"
   }, jsx(ErrorIcon, {
     label: formErrorMessage,
     primaryColor: "var(--ds-icon-danger, #E34935)"
   }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
+    type: "button",
     appearance: "subtle",
     onClick: handleCancel,
     testId: 'cancel-button'

package/dist/es2019/ui/index.js

@@ -1,4 +1,5 @@
 export { default } from './main';
 export { TextField } from './create-form/textfield';
 export { CreateForm } from './create-form/main';
+export { CreateFormLoader } from './create-form/form-loader';
 export { AsyncSelect } from './create-form/async-select';

package/dist/es2019/ui/main.js

@@ -12,8 +12,7 @@ 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 withFormContext = Component => props => jsx(FormContextProvider, null, jsx(Component, props));
-const LinkCreate = withFormContext(({
+const LinkCreate = ({
   plugins,
   entityKey,
   onCreate,
@@ -42,7 +41,7 @@ const LinkCreate = withFormContext(({
     onFailure: handleFailure,
     onCancel: onCancel
   }, chosenOne.form);
-});
+};
 const LinkCreateWithModal = props => {
   const {
     testId,

package/dist/es2019/version.json

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

package/dist/esm/common/constants.js

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

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

@@ -21,19 +21,19 @@ var FormContextProvider = function FormContextProvider(_ref) {
     validators = _useState4[0],
     setValidators = _useState4[1];
 
-  // Use useCallback to prevent infinite useEffect calls
+  // Add validators to the form
   var assignValidator = useCallback(function (name, fieldValidators) {
     setValidators(function (prevValidators) {
       return _objectSpread(_objectSpread({}, prevValidators), {}, _defineProperty({}, name, fieldValidators));
     });
   }, []);
 
-  // Use useCallback to prevent infinite useEffect calls
+  // Returns a validator function array
   var getValidators = useCallback(function () {
     return validators;
   }, [validators]);
 
-  // Callback to reset error state
+  // Sets the form footer error message
   var setFormErrorMessage = useCallback(function (errorMessage) {
     return setError(errorMessage);
   }, [setError]);

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { default, TextField, CreateForm, AsyncSelect } from './ui/index';
+export { default, TextField, CreateForm, AsyncSelect, CreateFormLoader } from './ui/index';
 export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';
 export { FormContextProvider, useFormContext } from './controllers/form-context';

package/dist/esm/ui/create-form/form-loader/index.js

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

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

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import { CREATE_FORM_MIN_HEIGHT_IN_PX } from '../../../common/constants';
+var formLoaderStyles = css({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: "".concat(CREATE_FORM_MIN_HEIGHT_IN_PX, "px")
+});
+export function CreateFormLoader(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'large' : _ref$size;
+  return jsx("div", {
+    css: formLoaderStyles
+  }, jsx(Spinner, {
+    size: size,
+    interactionName: "load",
+    testId: "link-create-form-loader"
+  }));
+}

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

@@ -1,3 +1,4 @@
 export { CreateForm } from './main';
 export { AsyncSelect } from './async-select';
+export { CreateFormLoader } from './form-loader';
 export { TextField } from './textfield';

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

@@ -14,6 +14,7 @@ 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';
 import { useFormContext } from '../../controllers/form-context';
+import { CreateFormLoader } from './form-loader';
 import { messages } from './messages';
 import { validateFormData } from './utils';
 var formStyles = css({
@@ -29,14 +30,16 @@ var errorStyles = css({
 export var CreateForm = function CreateForm(_ref) {
   var children = _ref.children,
     testId = _ref.testId,
+    onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
-    onSubmit = _ref.onSubmit;
+    isLoading = _ref.isLoading,
+    hideFooter = _ref.hideFooter;
+  var intl = useIntl();
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useFormContext = useFormContext(),
     getValidators = _useFormContext.getValidators,
     formErrorMessage = _useFormContext.formErrorMessage;
-  var intl = useIntl();
   var handleSubmit = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
       var validators, errors;
@@ -70,22 +73,26 @@ export var CreateForm = function CreateForm(_ref) {
     createAnalyticsEvent(createEventPayload('ui.button.clicked.cancel', {})).fire(ANALYTICS_CHANNEL);
     onCancel && onCancel();
   }, [createAnalyticsEvent, onCancel]);
+  if (isLoading) {
+    return jsx(CreateFormLoader, null);
+  }
   return jsx(Form, {
     onSubmit: handleSubmit
   }, function (_ref3) {
-    var submitting = _ref3.submitting,
-      formProps = _ref3.formProps;
+    var formProps = _ref3.formProps,
+      submitting = _ref3.submitting;
     return jsx("form", _extends({}, formProps, {
       name: "confluence-creation-form",
       "data-testid": testId,
       css: formStyles
-    }), jsx(FormSection, null, children), jsx(FormFooter, null, formErrorMessage && jsx("div", {
+    }), jsx(FormSection, null, children), !hideFooter && jsx(FormFooter, null, formErrorMessage && jsx("div", {
       css: errorStyles,
-      "data-testid": "link-create-confluence-form-error"
+      "data-testid": "link-create-form-error"
     }, jsx(ErrorIcon, {
       label: formErrorMessage,
       primaryColor: "var(--ds-icon-danger, #E34935)"
     }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
+      type: "button",
       appearance: "subtle",
       onClick: handleCancel,
       testId: 'cancel-button'

package/dist/esm/ui/index.js

@@ -1,4 +1,5 @@
 export { default } from './main';
 export { TextField } from './create-form/textfield';
 export { CreateForm } from './create-form/main';
+export { CreateFormLoader } from './create-form/form-loader';
 export { AsyncSelect } from './create-form/async-select';

package/dist/esm/ui/main.js

@@ -14,12 +14,7 @@ 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';
-var withFormContext = function withFormContext(Component) {
-  return function (props) {
-    return jsx(FormContextProvider, null, jsx(Component, props));
-  };
-};
-var LinkCreate = withFormContext(function (_ref) {
+var LinkCreate = function LinkCreate(_ref) {
   var plugins = _ref.plugins,
     entityKey = _ref.entityKey,
     onCreate = _ref.onCreate,
@@ -48,7 +43,7 @@ var LinkCreate = withFormContext(function (_ref) {
     onFailure: handleFailure,
     onCancel: onCancel
   }, chosenOne.form);
-});
+};
 var LinkCreateWithModal = function LinkCreateWithModal(props) {
   var testId = props.testId,
     onCancel = props.onCancel,

package/dist/esm/version.json

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

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

@@ -1,3 +1,4 @@
 export declare const ANALYTICS_CHANNEL = "media";
 export declare const COMPONENT_NAME = "linkCreate";
 export declare const CREATE_FORM_MAX_WIDTH_IN_PX = "600";
+export declare const CREATE_FORM_MIN_HEIGHT_IN_PX = "200";

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Validator, ValidatorMap } from '../../common/types';
 interface FormContextType {
-    assignValidator: (name: string, validators: Validator[]) => void;
     getValidators: () => ValidatorMap;
+    assignValidator: (name: string, validators: Validator[]) => void;
     setFormErrorMessage: (errorMessage?: string) => void;
     formErrorMessage?: string;
 }

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 export type { Option } from './ui/types';
 export type { CreateFormProps } from './ui/index';
 export type { LinkCreateProps, LinkCreatePlugin } from './common/types';
-export { default, TextField, CreateForm, AsyncSelect } from './ui/index';
+export { default, TextField, CreateForm, AsyncSelect, CreateFormLoader, } from './ui/index';
 export { useLinkCreateCallback, LinkCreateCallbackProvider, } from './controllers/callback-context';
 export { FormContextProvider, useFormContext, } from './controllers/form-context';
 export type { Validator, ValidatorMap } from './common/types';

package/dist/types/ui/create-form/form-loader/index.d.ts

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

package/dist/types/ui/create-form/form-loader/main.d.ts

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { SpinnerProps } from '@atlaskit/spinner';
+export declare function CreateFormLoader({ size }: Partial<SpinnerProps>): jsx.JSX.Element;

package/dist/types/ui/create-form/index.d.ts

@@ -1,3 +1,4 @@
 export { CreateForm } from './main';
 export { AsyncSelect } from './async-select';
+export { CreateFormLoader } from './form-loader';
 export { TextField } from './textfield';

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

@@ -4,7 +4,9 @@ import { jsx } from '@emotion/react';
 export interface CreateFormProps<FormData> {
     children: ReactNode;
     testId?: string;
-    onCancel?: () => void;
     onSubmit: (data: FormData) => void;
+    onCancel?: () => void;
+    isLoading?: boolean;
+    hideFooter?: boolean;
 }
-export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onCancel, onSubmit, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;
+export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;

package/dist/types/ui/index.d.ts

@@ -1,5 +1,6 @@
 export { default } from './main';
 export { TextField } from './create-form/textfield';
 export { CreateForm } from './create-form/main';
+export { CreateFormLoader } from './create-form/form-loader';
 export type { CreateFormProps } from './create-form/main';
 export { AsyncSelect } from './create-form/async-select';

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

@@ -1,3 +1,4 @@
 export declare const ANALYTICS_CHANNEL = "media";
 export declare const COMPONENT_NAME = "linkCreate";
 export declare const CREATE_FORM_MAX_WIDTH_IN_PX = "600";
+export declare const CREATE_FORM_MIN_HEIGHT_IN_PX = "200";

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Validator, ValidatorMap } from '../../common/types';
 interface FormContextType {
-    assignValidator: (name: string, validators: Validator[]) => void;
     getValidators: () => ValidatorMap;
+    assignValidator: (name: string, validators: Validator[]) => void;
     setFormErrorMessage: (errorMessage?: string) => void;
     formErrorMessage?: string;
 }

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

@@ -1,7 +1,7 @@
 export type { Option } from './ui/types';
 export type { CreateFormProps } from './ui/index';
 export type { LinkCreateProps, LinkCreatePlugin } from './common/types';
-export { default, TextField, CreateForm, AsyncSelect } from './ui/index';
+export { default, TextField, CreateForm, AsyncSelect, CreateFormLoader, } from './ui/index';
 export { useLinkCreateCallback, LinkCreateCallbackProvider, } from './controllers/callback-context';
 export { FormContextProvider, useFormContext, } from './controllers/form-context';
 export type { Validator, ValidatorMap } from './common/types';

package/dist/types-ts4.5/ui/create-form/form-loader/index.d.ts

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

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

@@ -0,0 +1,4 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { SpinnerProps } from '@atlaskit/spinner';
+export declare function CreateFormLoader({ size }: Partial<SpinnerProps>): jsx.JSX.Element;

package/dist/types-ts4.5/ui/create-form/index.d.ts

@@ -1,3 +1,4 @@
 export { CreateForm } from './main';
 export { AsyncSelect } from './async-select';
+export { CreateFormLoader } from './form-loader';
 export { TextField } from './textfield';

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

@@ -4,7 +4,9 @@ import { jsx } from '@emotion/react';
 export interface CreateFormProps<FormData> {
     children: ReactNode;
     testId?: string;
-    onCancel?: () => void;
     onSubmit: (data: FormData) => void;
+    onCancel?: () => void;
+    isLoading?: boolean;
+    hideFooter?: boolean;
 }
-export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onCancel, onSubmit, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;
+export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/index.d.ts

@@ -1,5 +1,6 @@
 export { default } from './main';
 export { TextField } from './create-form/textfield';
 export { CreateForm } from './create-form/main';
+export { CreateFormLoader } from './create-form/form-loader';
 export type { CreateFormProps } from './create-form/main';
 export { AsyncSelect } from './create-form/async-select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -41,6 +41,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/modal-dialog": "^12.5.0",
     "@atlaskit/select": "^16.2.0",
+    "@atlaskit/spinner": "^15.4.0",
     "@atlaskit/textfield": "^5.4.0",
     "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
@@ -60,8 +61,8 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/link-create-confluence": "^5.0.0",
-    "@atlassian/link-create-presets": "^3.0.0",
+    "@atlassian/link-create-confluence": "^6.0.0",
+    "@atlassian/link-create-presets": "^4.0.0",
     "@atlassian/link-picker-atlassian-plugin": "^30.1.0",
     "@atlassian/link-picker-plugins": "^20.1.0",
     "@atlassian/recent-work-client": "^1.8.0",

package/report.api.md

@@ -23,6 +23,7 @@ import { MemoExoticComponent } from 'react';
 import { OptionType } from '@atlaskit/select';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { SpinnerProps } from '@atlaskit/spinner';
 import { TextFieldProps as TextFieldProps_2 } from '@atlaskit/textfield';
 
 // @public
@@ -56,15 +57,26 @@ export default ComposedLinkCreate;
 export const CreateForm: <FormData_1 extends Record<string, any> = {}>({
   children,
   testId,
-  onCancel,
   onSubmit,
+  onCancel,
+  isLoading,
+  hideFooter,
 }: CreateFormProps<FormData_1>) => jsx.JSX.Element;
 
+// @public (undocumented)
+export function CreateFormLoader({
+  size,
+}: Partial<SpinnerProps>): jsx.JSX.Element;
+
 // @public (undocumented)
 export interface CreateFormProps<FormData> {
   // (undocumented)
   children: ReactNode;
   // (undocumented)
+  hideFooter?: boolean;
+  // (undocumented)
+  isLoading?: boolean;
+  // (undocumented)
   onCancel?: () => void;
   // (undocumented)
   onSubmit: (data: FormData) => void;

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

@@ -12,6 +12,7 @@ import { MemoExoticComponent } from 'react';
 import { OptionType } from '@atlaskit/select';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { SpinnerProps } from '@atlaskit/spinner';
 import { TextFieldProps as TextFieldProps_2 } from '@atlaskit/textfield';
 
 // @public
@@ -32,13 +33,20 @@ const ComposedLinkCreate: MemoExoticComponent<(props: LinkCreateProps) => jsx.JS
 export default ComposedLinkCreate;
 
 // @public (undocumented)
-export const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onCancel, onSubmit, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;
+export const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;
+
+// @public (undocumented)
+export function CreateFormLoader({ size }: Partial<SpinnerProps>): jsx.JSX.Element;
 
 // @public (undocumented)
 export interface CreateFormProps<FormData> {
     // (undocumented)
     children: ReactNode;
     // (undocumented)
+    hideFooter?: boolean;
+    // (undocumented)
+    isLoading?: boolean;
+    // (undocumented)
     onCancel?: () => void;
     // (undocumented)
     onSubmit: (data: FormData) => void;