@atlaskit/link-create 0.10.0 → 1.0.0

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

@@ -1,55 +1,137 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "name", "validationHelpText", "isRequired", "testId", "validators", "defaultValue"];
+var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId", "defaultOption", "loadOptions"],
+  _excluded2 = ["fieldId"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import { Fragment, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
-import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
+import debounce from 'debounce-promise';
+import { useForm } from 'react-final-form';
 import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
-import { validateSubmitErrors } from '../../../common/utils/form';
-import { useFormContext } from '../../../controllers/form-context';
+import { CreateField } from '../../../controllers/create-field';
 export 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.
  */
 export 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 = _objectWithoutProperties(_ref, _excluded);
-  var _useFormContext = useFormContext(),
-    assignValidator = _useFormContext.assignValidator;
+    propsDefaultValue = _ref.defaultOption,
+    loadOptions = _ref.loadOptions,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useForm = useForm(),
+    mutators = _useForm.mutators;
+  var _useState = useState(propsDefaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    defaultValue = _useState2[0],
+    setDefaultValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoadingDefaultOptions = _useState4[0],
+    setIsLoadingDefaultOptions = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    defaultOptions = _useState6[0],
+    setDefaultOptions = _useState6[1];
+  useEffect(function () {
+    var current = true;
+    var fetch = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var query,
+          options,
+          _args = arguments;
+        return _regeneratorRuntime.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]);
   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 jsx("div", {
-    "data-testid": testId
-  }, jsx(Field, {
+  }, [defaultValue, propsDefaultValue, name, mutators]);
+  var debouncedLoadOptions = useMemo(function () {
+    return loadOptions ? debounce(loadOptions, 300) : undefined;
+  }, [loadOptions]);
+  return jsx(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 = validateSubmitErrors(meta);
-    return jsx(Fragment, null, jsx(AkAsyncSelect, _extends({}, fieldProps, rest, {
-      isInvalid: isInvalid
-    })), !error && validationHelpText && jsx(HelperMessage, {
-      testId: "".concat(testId, "-helper-message")
-    }, validationHelpText), isInvalid && jsx(ErrorMessage, {
-      testId: "".concat(testId, "-error-message")
-    }, error));
-  }));
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, function (_ref3) {
+    var fieldId = _ref3.fieldId,
+      fieldProps = _objectWithoutProperties(_ref3, _excluded2);
+    return jsx(AkAsyncSelect, _extends({
+      inputId: fieldId
+    }, fieldProps, restProps, {
+      loadOptions: debouncedLoadOptions,
+      defaultOptions: defaultOptions,
+      isLoading: isLoadingDefaultOptions
+    }));
+  });
 }

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

@@ -3,9 +3,13 @@ import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import Button, { ButtonGroup } from '@atlaskit/button';
 import LoadingButton from '@atlaskit/button/loading-button';
-import { FormFooter } from '@atlaskit/form';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { messages } from './messages';
+var formFooterWrapperStyles = css({
+  display: 'flex',
+  marginTop: "var(--ds-space-300, 24px)",
+  justifyContent: 'flex-end'
+});
 var errorStyles = css({
   display: 'flex',
   alignItems: 'center',
@@ -17,7 +21,10 @@ export function CreateFormFooter(_ref) {
     submitting = _ref.submitting,
     testId = _ref.testId;
   var intl = useIntl();
-  return jsx(FormFooter, null, formErrorMessage && jsx("div", {
+  return jsx("footer", {
+    "data-testid": "".concat(testId, "-footer"),
+    css: formFooterWrapperStyles
+  }, formErrorMessage && jsx("div", {
     css: errorStyles,
     "data-testid": "".concat(testId, "-error")
   }, jsx(ErrorIcon, {

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FormSpy as FinalFormSpy } from '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.
+ */
+export var FormSpy = function FormSpy(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(FinalFormSpy, {
+    subscription: {
+      values: true
+    }
+  }, function (props) {
+    return children({
+      values: props.values
+    });
+  });
+};

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

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

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

@@ -1,11 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+var _excluded = ["submitting"];
 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 { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import Form from '@atlaskit/form';
 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';
@@ -25,7 +26,8 @@ export 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 = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useFormContext = useFormContext(),
@@ -68,15 +70,24 @@ export var CreateForm = function CreateForm(_ref) {
     return jsx(CreateFormLoader, null);
   }
   return jsx(Form, {
-    onSubmit: handleSubmit
+    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 jsx("form", _extends({}, formProps, {
+    var submitting = _ref3.submitting,
+      formProps = _objectWithoutProperties(_ref3, _excluded);
+    return jsx("form", {
+      onSubmit: formProps.handleSubmit,
       name: "link-create-form",
       "data-testid": testId,
       css: formStyles
-    }), jsx("div", null, children), !hideFooter && jsx(CreateFormFooter, {
+    }, jsx("div", null, children), !hideFooter && jsx(CreateFormFooter, {
       formErrorMessage: formErrorMessage,
       handleCancel: handleCancel,
       submitting: submitting,

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

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

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

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId"],
+  _excluded2 = ["fieldId"];
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import AkSelect from '@atlaskit/select';
+import { CreateField } from '../../../controllers/create-field';
+export 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.
+ */
+export 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 = _objectWithoutProperties(_ref, _excluded);
+  return jsx(CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, function (_ref2) {
+    var fieldId = _ref2.fieldId,
+      fieldProps = _objectWithoutProperties(_ref2, _excluded2);
+    return jsx(AkSelect, _extends({
+      inputId: fieldId
+    }, fieldProps, restProps));
+  });
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "name", "testId", "validationHelpText", "validators", "defaultValue", "isRequired"];
+var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId"],
+  _excluded2 = ["fieldId"];
 /** @jsx jsx */
-import { Fragment, useEffect } from 'react';
 import { jsx } from '@emotion/react';
-import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
 import AkTextfield from '@atlaskit/textfield';
-import { validateSubmitErrors } from '../../../common/utils/form';
-import { useFormContext } from '../../../controllers/form-context';
+import { CreateField } from '../../../controllers/create-field';
 export var TEST_ID = 'link-create-text-field';
 
 /**
@@ -18,50 +16,30 @@ export var TEST_ID = 'link-create-text-field';
  */
 
 export 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 = _objectWithoutProperties(_ref, _excluded);
-  var _useFormContext = useFormContext(),
-    assignValidator = _useFormContext.assignValidator;
-  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.
-     */
-
-    jsx(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 = validateSubmitErrors(meta);
-      return jsx(Fragment, null, jsx(AkTextfield, _extends({}, fieldProps, restProps, {
-        testId: testId,
-        isInvalid: isInvalid,
-        isRequired: false // Remove the default browser validation
-      })), !error && validationHelpText && jsx(HelperMessage, {
-        testId: "".concat(testId, "-helper-message")
-      }, validationHelpText), error && isInvalid && jsx(ErrorMessage, {
-        testId: "".concat(testId, "-error-message")
-      }, error));
-    })
-  );
+  return jsx(CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, function (_ref2) {
+    var fieldId = _ref2.fieldId,
+      fieldProps = _objectWithoutProperties(_ref2, _excluded2);
+    return jsx(AkTextfield, _extends({
+      id: fieldId
+    }, fieldProps, restProps, {
+      isRequired: false // Remove the default browser validation
+    }));
+  });
 }

package/dist/esm/ui/index.js

@@ -2,4 +2,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 { AsyncSelect } from './create-form/async-select';
+export { Select } from './create-form/select';
+export { AsyncSelect } from './create-form/async-select';
+export { FormSpy } from './create-form/form-spy';

package/dist/esm/version.json

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

package/dist/types/common/utils/form/index.d.ts

@@ -1,7 +1,7 @@
-import { Meta } from '@atlaskit/form/Field';
+import { FieldMetaState } from 'react-final-form';
 /**
  * This function checks if there have been changes since last submit
  * to let a Field know if it should hide the error message until
  * the next submit, or if it returns to the previous error state
  */
-export declare const validateSubmitErrors: (meta: Meta) => boolean;
+export declare const validateSubmitErrors: (meta: FieldMetaState<any>) => boolean;

package/dist/types/controllers/create-field/index.d.ts

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

package/dist/types/controllers/create-field/main.d.ts

@@ -0,0 +1,3 @@
+import { jsx } from '@emotion/react';
+import { CreateFieldProps } from './types';
+export declare function CreateField({ id, name, label, isRequired, validators, validationHelpText, testId, children, }: CreateFieldProps): jsx.JSX.Element;

package/dist/types/controllers/create-field/types.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { FieldInputProps } from 'react-final-form';
+import { Validator } from '../../common/types';
+type FieldProps = FieldInputProps<any, HTMLElement> & {
+    fieldId: string;
+    isInvalid: boolean;
+};
+export type CreateFieldProps = {
+    id?: string;
+    /** Name passed to the <Field>.*/
+    name: string;
+    label?: string;
+    /**
+     * Optional text below the textfield explaining any requirements for a valid value.
+     * eg. "Must be 4 or more letters"
+     */
+    validationHelpText?: string;
+    /** Validators for this field */
+    validators?: Validator[];
+    isRequired?: boolean;
+    testId: string;
+    children: (fieldProps: FieldProps) => React.ReactNode;
+};
+export {};

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export type { CreateFormProps } from './ui/index';
 export type { LinkCreateProps, LinkCreatePlugin, LinkCreateWithModalProps, CreatePayload, } from './common/types';
-export { default, TextField, CreateForm, AsyncSelect, CreateFormLoader, } from './ui/index';
+export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy, } from './ui/index';
 export { useLinkCreateCallback, LinkCreateCallbackProvider, } from './controllers/callback-context';
 export type { Validator, ValidatorMap } from './common/types';

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

@@ -3,9 +3,9 @@ import { OptionType } from '@atlaskit/select';
 import { AsyncSelectProps } from './types';
 export declare const 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.
  */
-export declare function AsyncSelect<T = OptionType>({ label, name, validationHelpText, isRequired, testId, validators, defaultValue, ...rest }: AsyncSelectProps<T>): jsx.JSX.Element;
+export declare function AsyncSelect<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, defaultOption: propsDefaultValue, loadOptions, ...restProps }: AsyncSelectProps<T>): jsx.JSX.Element;

package/dist/types/ui/create-form/async-select/types.d.ts

@@ -1,12 +1,12 @@
-import { AsyncSelectProps as AKAsyncSelectProps, OptionType } from '@atlaskit/select';
+import { AsyncSelectProps as AKAsyncSelectProps, GroupType, OptionType } from '@atlaskit/select';
 import { Validator } from '../../../common/types';
-export type AsyncSelectProps<T = OptionType> = AKAsyncSelectProps<T> & {
-    /** Name passed to the <Field>.*/
+export type AsyncSelectProps<T = OptionType> = Omit<AKAsyncSelectProps<T>, 'loadOptions'> & {
+    /** Name passed to the <Field> */
     name: string;
     /** This should be properly internationalization-ed */
     label: string;
     /**
-     * Optional text below the textfield explaining any requirements for a valid value.
+     * Optional text below the field explaining any requirements for a valid value.
      * eg. "Must be 4 or more letters"
      */
     validationHelpText?: string;
@@ -15,4 +15,9 @@ export type AsyncSelectProps<T = OptionType> = AKAsyncSelectProps<T> & {
     isRequired?: boolean;
     /** Validators for this field */
     validators?: Validator[];
+    /**
+     * Function to options to display in async select.
+     * **WARNING** Will refetch if function changes.
+     */
+    loadOptions?: (inputValue: string) => Promise<T[] | GroupType<T>[]>;
 };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export type FormSpyProps<T> = {
+    children: ({ values }: {
+        values: T;
+    }) => React.ReactNode;
+};
+/**
+ * Lightweight wrapper around the react-final-form
+ * FormSpy component so that we can control selectively
+ * how much of the API we are commited to.
+ */
+export declare const FormSpy: <T extends Record<string, unknown>>({ children, }: FormSpyProps<T>) => JSX.Element;

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

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

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

@@ -8,6 +8,7 @@ export interface CreateFormProps<FormData> {
     onCancel?: () => void;
     isLoading?: boolean;
     hideFooter?: boolean;
+    initialValues?: FormData;
 }
 export declare const TEST_ID = "link-create-form";
-export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;
+export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, initialValues, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;

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

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

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

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { OptionType } from '@atlaskit/select';
+import { SelectProps } from './types';
+export declare const 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.
+ */
+export declare function Select<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: SelectProps<T>): jsx.JSX.Element;

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

@@ -0,0 +1,18 @@
+import { SelectProps as AKSelectProps, OptionType } from '@atlaskit/select';
+import { Validator } from '../../../common/types';
+export type SelectProps<T = OptionType> = AKSelectProps<T> & {
+    /** Name passed to the <Field> */
+    name: string;
+    /** This should be properly internationalization-ed */
+    label: string;
+    /**
+     * Optional text below the field explaining any requirements for a valid value.
+     * eg. "Must be 4 or more letters"
+     */
+    validationHelpText?: string;
+    testId?: string;
+    /** Will display a red astrix next to the field title if true */
+    isRequired?: boolean;
+    /** Validators for this field */
+    validators?: Validator[];
+};

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

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { TextFieldProps } from './types';
 export declare const TEST_ID = "link-create-text-field";
@@ -7,4 +8,4 @@ export declare const TEST_ID = "link-create-text-field";
  * the handleSubmit function passed to the form <Form> that have a key matching the `name`
  * of this text field are shown above the field.
  */
-export declare function TextField({ label, name, testId, validationHelpText, validators, defaultValue, isRequired, ...restProps }: TextFieldProps): jsx.JSX.Element;
+export declare function TextField({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: TextFieldProps): jsx.JSX.Element;

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

@@ -3,4 +3,6 @@ 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 { Select } from './create-form/select';
 export { AsyncSelect } from './create-form/async-select';
+export { FormSpy } from './create-form/form-spy';

package/dist/types-ts4.5/common/utils/form/index.d.ts

@@ -1,7 +1,7 @@
-import { Meta } from '@atlaskit/form/Field';
+import { FieldMetaState } from 'react-final-form';
 /**
  * This function checks if there have been changes since last submit
  * to let a Field know if it should hide the error message until
  * the next submit, or if it returns to the previous error state
  */
-export declare const validateSubmitErrors: (meta: Meta) => boolean;
+export declare const validateSubmitErrors: (meta: FieldMetaState<any>) => boolean;

package/dist/types-ts4.5/controllers/create-field/index.d.ts

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