@atlaskit/link-create 0.10.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-create
 
+## 1.0.0
+
+### Major Changes
+
+- [`687749df97a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/687749df97a) - Refactor form components to use react-final-form
+
 ## 0.10.0
 
 ### Minor Changes

package/dist/cjs/controllers/create-field/index.js

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

package/dist/cjs/controllers/create-field/main.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateField = CreateField;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactFinalForm = require("react-final-form");
+var _form = require("@atlaskit/form");
+var _form2 = require("../../common/utils/form");
+var _formContext = require("../form-context");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
+var fieldWrapperStyles = (0, _react2.css)({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+function CreateField(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    isRequired = _ref.isRequired,
+    validators = _ref.validators,
+    validationHelpText = _ref.validationHelpText,
+    testId = _ref.testId,
+    children = _ref.children;
+  var _useFormContext = (0, _formContext.useFormContext)(),
+    assignValidator = _useFormContext.assignValidator;
+  (0, _react.useEffect)(function () {
+    if (validators) {
+      assignValidator(name, validators);
+    }
+  }, [name, validators, assignValidator]);
+  var fieldId = (0, _react.useMemo)(function () {
+    return id ? id : "link-create-field-".concat(name);
+  }, [id, name]);
+  return (0, _react2.jsx)("div", {
+    css: fieldWrapperStyles,
+    "data-testid": testId
+  }, (0, _react2.jsx)(_reactFinalForm.Field, {
+    name: name
+  }, function (_ref2) {
+    var input = _ref2.input,
+      meta = _ref2.meta;
+    var isInvalid = (0, _form2.validateSubmitErrors)(meta);
+    var submitError = meta.submitError;
+    return (0, _react2.jsx)(_react.Fragment, null, label && (0, _react2.jsx)(_form.Label, {
+      htmlFor: fieldId,
+      id: "".concat(fieldId, "-label"),
+      testId: "".concat(testId, "-label")
+    }, label, isRequired && (0, _react2.jsx)(_form.RequiredAsterisk, null)), children(_objectSpread(_objectSpread({}, input), {}, {
+      fieldId: fieldId,
+      isInvalid: isInvalid
+    })), !submitError && validationHelpText && (0, _react2.jsx)(_form.HelperMessage, {
+      testId: "".concat(testId, "-helper-message")
+    }, validationHelpText), submitError && isInvalid && (0, _react2.jsx)(_form.ErrorMessage, {
+      testId: "".concat(testId, "-error-message")
+    }, submitError));
+  }));
+}

package/dist/cjs/index.js

@@ -22,12 +22,24 @@ Object.defineProperty(exports, "CreateFormLoader", {
     return _index.CreateFormLoader;
   }
 });
+Object.defineProperty(exports, "FormSpy", {
+  enumerable: true,
+  get: function get() {
+    return _index.FormSpy;
+  }
+});
 Object.defineProperty(exports, "LinkCreateCallbackProvider", {
   enumerable: true,
   get: function get() {
     return _callbackContext.LinkCreateCallbackProvider;
   }
 });
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _index.Select;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function get() {

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

@@ -6,59 +6,141 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AsyncSelect = AsyncSelect;
 exports.TEST_ID = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _form = require("@atlaskit/form");
+var _debouncePromise = _interopRequireDefault(require("debounce-promise"));
+var _reactFinalForm = require("react-final-form");
 var _select = require("@atlaskit/select");
-var _form2 = require("../../../common/utils/form");
-var _formContext = require("../../../controllers/form-context");
-var _excluded = ["label", "name", "validationHelpText", "isRequired", "testId", "validators", "defaultValue"];
+var _createField = require("../../../controllers/create-field");
+var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId", "defaultOption", "loadOptions"],
+  _excluded2 = ["fieldId"];
 /** @jsx jsx */
 var TEST_ID = 'link-create-async-select';
+
 /**
- * An async select utilising the Atlaskit AsyncSelect and Field objects from `@atlaskit/form`.
- * Validation is handled by the form as it is on form submission. Any errors returned by
- * the handleSubmit function passed to the form <Form> that have a key matching the `name`
- * of this text field are shown above the field.
+ * An async select utilising the Atlaskit AsyncSelect and Field components from
+ * `@atlaskit/form`.  Validation is handled by the form on form submission. Any
+ * errors returned by the handleSubmit function passed to the form <Form> that
+ * have a key matching the `name` of this field are shown below the field.
  */
 exports.TEST_ID = TEST_ID;
 function AsyncSelect(_ref) {
-  var label = _ref.label,
+  var id = _ref.id,
     name = _ref.name,
-    validationHelpText = _ref.validationHelpText,
+    label = _ref.label,
     isRequired = _ref.isRequired,
+    validators = _ref.validators,
+    validationHelpText = _ref.validationHelpText,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
-    validators = _ref.validators,
-    defaultValue = _ref.defaultValue,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useFormContext = (0, _formContext.useFormContext)(),
-    assignValidator = _useFormContext.assignValidator;
+    propsDefaultValue = _ref.defaultOption,
+    loadOptions = _ref.loadOptions,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useForm = (0, _reactFinalForm.useForm)(),
+    mutators = _useForm.mutators;
+  var _useState = (0, _react.useState)(propsDefaultValue),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    defaultValue = _useState2[0],
+    setDefaultValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isLoadingDefaultOptions = _useState4[0],
+    setIsLoadingDefaultOptions = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    defaultOptions = _useState6[0],
+    setDefaultOptions = _useState6[1];
+  (0, _react.useEffect)(function () {
+    var current = true;
+    var fetch = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var query,
+          options,
+          _args = arguments;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              query = _args.length > 0 && _args[0] !== undefined ? _args[0] : '';
+              if (loadOptions) {
+                _context.next = 3;
+                break;
+              }
+              return _context.abrupt("return");
+            case 3:
+              _context.prev = 3;
+              /**
+               * If we are fetching default options, clear the
+               * value the user has set
+               */
+              mutators.setField(name, null);
+              setIsLoadingDefaultOptions(true);
+              setDefaultOptions([]);
+              _context.next = 9;
+              return loadOptions(query);
+            case 9:
+              options = _context.sent;
+              if (current) {
+                setDefaultOptions(options);
+                setIsLoadingDefaultOptions(false);
+              }
+              _context.next = 16;
+              break;
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](3);
+              if (current) {
+                setIsLoadingDefaultOptions(false);
+              }
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[3, 13]]);
+      }));
+      return function fetch() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    fetch();
+    return function () {
+      current = false;
+    };
+  }, [loadOptions, setIsLoadingDefaultOptions, setDefaultOptions, mutators, name]);
   (0, _react.useEffect)(function () {
-    if (validators) {
-      assignValidator(name, validators);
+    /**
+     * Mutate the form state to set a default value for this field
+     * if `defaultOption` is a prop and we have not set a value for it yet
+     */
+    if (!defaultValue && propsDefaultValue) {
+      setDefaultValue(propsDefaultValue);
+      mutators.setField(name, propsDefaultValue);
     }
-  }, [name, validators, assignValidator]);
-  return (0, _react2.jsx)("div", {
-    "data-testid": testId
-  }, (0, _react2.jsx)(_form.Field, {
+  }, [defaultValue, propsDefaultValue, name, mutators]);
+  var debouncedLoadOptions = (0, _react.useMemo)(function () {
+    return loadOptions ? (0, _debouncePromise.default)(loadOptions, 300) : undefined;
+  }, [loadOptions]);
+  return (0, _react2.jsx)(_createField.CreateField, {
+    id: id,
     name: name,
     label: label,
     isRequired: isRequired,
-    defaultValue: defaultValue
-  }, function (_ref2) {
-    var fieldProps = _ref2.fieldProps,
-      meta = _ref2.meta,
-      error = _ref2.error;
-    var isInvalid = (0, _form2.validateSubmitErrors)(meta);
-    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_select.AsyncSelect, (0, _extends2.default)({}, fieldProps, rest, {
-      isInvalid: isInvalid
-    })), !error && validationHelpText && (0, _react2.jsx)(_form.HelperMessage, {
-      testId: "".concat(testId, "-helper-message")
-    }, validationHelpText), isInvalid && (0, _react2.jsx)(_form.ErrorMessage, {
-      testId: "".concat(testId, "-error-message")
-    }, error));
-  }));
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, function (_ref3) {
+    var fieldId = _ref3.fieldId,
+      fieldProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
+    return (0, _react2.jsx)(_select.AsyncSelect, (0, _extends2.default)({
+      inputId: fieldId
+    }, fieldProps, restProps, {
+      loadOptions: debouncedLoadOptions,
+      defaultOptions: defaultOptions,
+      isLoading: isLoadingDefaultOptions
+    }));
+  });
 }

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

@@ -10,13 +10,17 @@ var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireWildcard(require("@atlaskit/button"));
 var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
-var _form = require("@atlaskit/form");
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 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; }
 /** @jsx jsx */
 
+var formFooterWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  marginTop: "var(--ds-space-300, 24px)",
+  justifyContent: 'flex-end'
+});
 var errorStyles = (0, _react.css)({
   display: 'flex',
   alignItems: 'center',
@@ -28,7 +32,10 @@ function CreateFormFooter(_ref) {
     submitting = _ref.submitting,
     testId = _ref.testId;
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react.jsx)(_form.FormFooter, null, formErrorMessage && (0, _react.jsx)("div", {
+  return (0, _react.jsx)("footer", {
+    "data-testid": "".concat(testId, "-footer"),
+    css: formFooterWrapperStyles
+  }, formErrorMessage && (0, _react.jsx)("div", {
     css: errorStyles,
     "data-testid": "".concat(testId, "-error")
   }, (0, _react.jsx)(_error.default, {

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormSpy = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactFinalForm = require("react-final-form");
+/**
+ * Lightweight wrapper around the react-final-form
+ * FormSpy component so that we can control selectively
+ * how much of the API we are commited to.
+ */
+var FormSpy = function FormSpy(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_reactFinalForm.FormSpy, {
+    subscription: {
+      values: true
+    }
+  }, function (props) {
+    return children({
+      values: props.values
+    });
+  });
+};
+exports.FormSpy = FormSpy;

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

@@ -21,6 +21,18 @@ Object.defineProperty(exports, "CreateFormLoader", {
     return _formLoader.CreateFormLoader;
   }
 });
+Object.defineProperty(exports, "FormSpy", {
+  enumerable: true,
+  get: function get() {
+    return _formSpy.FormSpy;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _select.Select;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function get() {
@@ -28,6 +40,8 @@ Object.defineProperty(exports, "TextField", {
   }
 });
 var _main = require("./main");
+var _select = require("./select");
 var _asyncSelect = require("./async-select");
 var _formLoader = require("./form-loader");
-var _textfield = require("./textfield");
+var _textfield = require("./textfield");
+var _formSpy = require("./form-spy");

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

@@ -5,21 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TEST_ID = exports.CreateForm = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-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 _reactFinalForm = require("react-final-form");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _form = _interopRequireDefault(require("@atlaskit/form"));
 var _constants = require("../../common/constants");
 var _analytics = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
 var _formContext = require("../../controllers/form-context");
 var _formFooter = require("./form-footer");
 var _formLoader = require("./form-loader");
 var _utils = require("./utils");
+var _excluded = ["submitting"];
 /** @jsx jsx */
-
 var formStyles = (0, _react2.css)({
   maxWidth: "".concat(_constants.CREATE_FORM_MAX_WIDTH_IN_PX, "px"),
   padding: "0 0 ".concat("var(--ds-space-300, 24px)", " 0"),
@@ -34,7 +34,8 @@ var CreateForm = function CreateForm(_ref) {
     onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
     isLoading = _ref.isLoading,
-    hideFooter = _ref.hideFooter;
+    hideFooter = _ref.hideFooter,
+    initialValues = _ref.initialValues;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useFormContext = (0, _formContext.useFormContext)(),
@@ -76,16 +77,25 @@ var CreateForm = function CreateForm(_ref) {
   if (isLoading) {
     return (0, _react2.jsx)(_formLoader.CreateFormLoader, null);
   }
-  return (0, _react2.jsx)(_form.default, {
-    onSubmit: handleSubmit
+  return (0, _react2.jsx)(_reactFinalForm.Form, {
+    onSubmit: handleSubmit,
+    initialValues: initialValues,
+    mutators: {
+      setField: function setField(args, state, tools) {
+        tools.changeValue(state, args[0], function () {
+          return args[1];
+        });
+      }
+    }
   }, function (_ref3) {
-    var formProps = _ref3.formProps,
-      submitting = _ref3.submitting;
-    return (0, _react2.jsx)("form", (0, _extends2.default)({}, formProps, {
+    var submitting = _ref3.submitting,
+      formProps = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+    return (0, _react2.jsx)("form", {
+      onSubmit: formProps.handleSubmit,
       name: "link-create-form",
       "data-testid": testId,
       css: formStyles
-    }), (0, _react2.jsx)("div", null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter, {
+    }, (0, _react2.jsx)("div", null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter, {
       formErrorMessage: formErrorMessage,
       handleCancel: handleCancel,
       submitting: submitting,

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

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

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = Select;
+exports.TEST_ID = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("@emotion/react");
+var _select = _interopRequireDefault(require("@atlaskit/select"));
+var _createField = require("../../../controllers/create-field");
+var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId"],
+  _excluded2 = ["fieldId"];
+/** @jsx jsx */
+var TEST_ID = 'link-create-select';
+/**
+ * A select utilising the Atlaskit Select and Field components from
+ * `@atlaskit/form`.  Validation is handled by the form on form submission. Any
+ * errors returned by the handleSubmit function passed to the form <Form> that
+ * have a key matching the `name` of this field are shown below the field.
+ */
+exports.TEST_ID = TEST_ID;
+function Select(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    isRequired = _ref.isRequired,
+    validators = _ref.validators,
+    validationHelpText = _ref.validationHelpText,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react.jsx)(_createField.CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, function (_ref2) {
+    var fieldId = _ref2.fieldId,
+      fieldProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+    return (0, _react.jsx)(_select.default, (0, _extends2.default)({
+      inputId: fieldId
+    }, fieldProps, restProps));
+  });
+}

package/dist/cjs/ui/create-form/select/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -8,13 +8,11 @@ exports.TEST_ID = void 0;
 exports.TextField = TextField;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _form = require("@atlaskit/form");
+var _react = require("@emotion/react");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
-var _form2 = require("../../../common/utils/form");
-var _formContext = require("../../../controllers/form-context");
-var _excluded = ["label", "name", "testId", "validationHelpText", "validators", "defaultValue", "isRequired"];
+var _createField = require("../../../controllers/create-field");
+var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId"],
+  _excluded2 = ["fieldId"];
 /** @jsx jsx */
 var TEST_ID = 'link-create-text-field';
 
@@ -26,50 +24,30 @@ var TEST_ID = 'link-create-text-field';
  */
 exports.TEST_ID = TEST_ID;
 function TextField(_ref) {
-  var label = _ref.label,
+  var id = _ref.id,
     name = _ref.name,
+    label = _ref.label,
+    isRequired = _ref.isRequired,
+    validators = _ref.validators,
+    validationHelpText = _ref.validationHelpText,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
-    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;
-  (0, _react.useEffect)(function () {
-    if (validators) {
-      assignValidator(name, validators);
-    }
-  }, [name, validators, assignValidator]);
-  return (
-    /**
-     * The defaultValue here should be '' when there is nothing passed in from the props.
-     * This is because if we don't give it anything, the `fieldProps` wouldn't have a `value`
-     * prop and make the TextField component uncontrolled. Later when user starts typing, the
-     * `value` will be populated again in `fieldProps` which cause the TextField to be changed
-     * to a controlled component and raise a warning from React.
-     */
-
-    (0, _react2.jsx)(_form.Field, {
-      name: name,
-      label: label,
-      isRequired: isRequired,
-      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''
-    }, function (_ref2) {
-      var fieldProps = _ref2.fieldProps,
-        meta = _ref2.meta,
-        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, {
-        testId: testId,
-        isInvalid: isInvalid,
-        isRequired: false // Remove the default browser validation
-      })), !error && validationHelpText && (0, _react2.jsx)(_form.HelperMessage, {
-        testId: "".concat(testId, "-helper-message")
-      }, validationHelpText), error && isInvalid && (0, _react2.jsx)(_form.ErrorMessage, {
-        testId: "".concat(testId, "-error-message")
-      }, error));
-    })
-  );
+  return (0, _react.jsx)(_createField.CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, function (_ref2) {
+    var fieldId = _ref2.fieldId,
+      fieldProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+    return (0, _react.jsx)(_textfield.default, (0, _extends2.default)({
+      id: fieldId
+    }, fieldProps, restProps, {
+      isRequired: false // Remove the default browser validation
+    }));
+  });
 }

package/dist/cjs/ui/index.js

@@ -22,6 +22,18 @@ Object.defineProperty(exports, "CreateFormLoader", {
     return _formLoader.CreateFormLoader;
   }
 });
+Object.defineProperty(exports, "FormSpy", {
+  enumerable: true,
+  get: function get() {
+    return _formSpy.FormSpy;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function get() {
+    return _select.Select;
+  }
+});
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
   get: function get() {
@@ -38,4 +50,6 @@ 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");
+var _select = require("./create-form/select");
+var _asyncSelect = require("./create-form/async-select");
+var _formSpy = require("./create-form/form-spy");

package/dist/cjs/version.json

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

package/dist/es2019/controllers/create-field/index.js

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