@atlaskit/link-create 0.10.0 → 1.0.0

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

@@ -0,0 +1,57 @@
+/** @jsx jsx */
+import { Fragment, useEffect, useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { Field } from 'react-final-form';
+import { ErrorMessage, HelperMessage, Label, RequiredAsterisk } from '@atlaskit/form';
+import { validateSubmitErrors } from '../../common/utils/form';
+import { useFormContext } from '../form-context';
+const fieldWrapperStyles = css({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export function CreateField({
+  id,
+  name,
+  label,
+  isRequired,
+  validators,
+  validationHelpText,
+  testId,
+  children
+}) {
+  const {
+    assignValidator
+  } = useFormContext();
+  useEffect(() => {
+    if (validators) {
+      assignValidator(name, validators);
+    }
+  }, [name, validators, assignValidator]);
+  const fieldId = useMemo(() => id ? id : `link-create-field-${name}`, [id, name]);
+  return jsx("div", {
+    css: fieldWrapperStyles,
+    "data-testid": testId
+  }, jsx(Field, {
+    name: name
+  }, ({
+    input,
+    meta
+  }) => {
+    const isInvalid = validateSubmitErrors(meta);
+    const {
+      submitError
+    } = meta;
+    return jsx(Fragment, null, label && jsx(Label, {
+      htmlFor: fieldId,
+      id: `${fieldId}-label`,
+      testId: `${testId}-label`
+    }, label, isRequired && jsx(RequiredAsterisk, null)), children({
+      ...input,
+      fieldId,
+      isInvalid
+    }), !submitError && validationHelpText && jsx(HelperMessage, {
+      testId: `${testId}-helper-message`
+    }, validationHelpText), submitError && isInvalid && jsx(ErrorMessage, {
+      testId: `${testId}-error-message`
+    }, submitError));
+  }));
+}

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
-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';

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

@@ -1,55 +1,96 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @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 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 function AsyncSelect({
-  label,
+  id,
   name,
-  validationHelpText,
+  label,
   isRequired,
-  testId = TEST_ID,
   validators,
-  defaultValue,
-  ...rest
+  validationHelpText,
+  testId = TEST_ID,
+  defaultOption: propsDefaultValue,
+  loadOptions,
+  ...restProps
 }) {
   const {
-    assignValidator
-  } = useFormContext();
+    mutators
+  } = useForm();
+  const [defaultValue, setDefaultValue] = useState(propsDefaultValue);
+  const [isLoadingDefaultOptions, setIsLoadingDefaultOptions] = useState(false);
+  const [defaultOptions, setDefaultOptions] = useState([]);
+  useEffect(() => {
+    let current = true;
+    const fetch = async (query = '') => {
+      if (!loadOptions) {
+        return;
+      }
+      try {
+        /**
+         * If we are fetching default options, clear the
+         * value the user has set
+         */
+        mutators.setField(name, null);
+        setIsLoadingDefaultOptions(true);
+        setDefaultOptions([]);
+        const options = await loadOptions(query);
+        if (current) {
+          setDefaultOptions(options);
+          setIsLoadingDefaultOptions(false);
+        }
+      } catch (err) {
+        if (current) {
+          setIsLoadingDefaultOptions(false);
+        }
+      }
+    };
+    fetch();
+    return () => {
+      current = false;
+    };
+  }, [loadOptions, setIsLoadingDefaultOptions, setDefaultOptions, mutators, name]);
   useEffect(() => {
-    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]);
+  const debouncedLoadOptions = useMemo(() => loadOptions ? debounce(loadOptions, 300) : undefined, [loadOptions]);
+  return jsx(CreateField, {
+    id: id,
     name: name,
     label: label,
     isRequired: isRequired,
-    defaultValue: defaultValue
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
   }, ({
-    fieldProps,
-    meta,
-    error
+    fieldId,
+    ...fieldProps
   }) => {
-    const isInvalid = validateSubmitErrors(meta);
-    return jsx(Fragment, null, jsx(AkAsyncSelect, _extends({}, fieldProps, rest, {
-      isInvalid: isInvalid
-    })), !error && validationHelpText && jsx(HelperMessage, {
-      testId: `${testId}-helper-message`
-    }, validationHelpText), isInvalid && jsx(ErrorMessage, {
-      testId: `${testId}-error-message`
-    }, error));
-  }));
+    return jsx(AkAsyncSelect, _extends({
+      inputId: fieldId
+    }, fieldProps, restProps, {
+      loadOptions: debouncedLoadOptions,
+      defaultOptions: defaultOptions,
+      isLoading: isLoadingDefaultOptions
+    }));
+  });
 }

package/dist/es2019/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';
+const formFooterWrapperStyles = css({
+  display: 'flex',
+  marginTop: "var(--ds-space-300, 24px)",
+  justifyContent: 'flex-end'
+});
 const errorStyles = css({
   display: 'flex',
   alignItems: 'center',
@@ -18,7 +22,10 @@ export function CreateFormFooter({
   testId
 }) {
   const intl = useIntl();
-  return jsx(FormFooter, null, formErrorMessage && jsx("div", {
+  return jsx("footer", {
+    "data-testid": `${testId}-footer`,
+    css: formFooterWrapperStyles
+  }, formErrorMessage && jsx("div", {
     css: errorStyles,
     "data-testid": `${testId}-error`
   }, jsx(ErrorIcon, {

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

@@ -0,0 +1,18 @@
+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 const FormSpy = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(FinalFormSpy, {
+    subscription: {
+      values: true
+    }
+  }, props => children({
+    values: props.values
+  }));
+};

package/dist/es2019/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/es2019/ui/create-form/main.js

@@ -1,9 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @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';
@@ -22,7 +21,8 @@ export const CreateForm = ({
   onSubmit,
   onCancel,
   isLoading,
-  hideFooter
+  hideFooter,
+  initialValues
 }) => {
   const {
     createAnalyticsEvent
@@ -51,18 +51,27 @@ export const CreateForm = ({
     return jsx(CreateFormLoader, null);
   }
   return jsx(Form, {
-    onSubmit: handleSubmit
+    onSubmit: handleSubmit,
+    initialValues: initialValues,
+    mutators: {
+      setField: (args, state, tools) => {
+        tools.changeValue(state, args[0], () => args[1]);
+      }
+    }
   }, ({
-    formProps,
-    submitting
-  }) => jsx("form", _extends({}, formProps, {
-    name: "link-create-form",
-    "data-testid": testId,
-    css: formStyles
-  }), jsx("div", null, children), !hideFooter && jsx(CreateFormFooter, {
-    formErrorMessage: formErrorMessage,
-    handleCancel: handleCancel,
-    submitting: submitting,
-    testId: testId
-  })));
+    submitting,
+    ...formProps
+  }) => {
+    return jsx("form", {
+      onSubmit: formProps.handleSubmit,
+      name: "link-create-form",
+      "data-testid": testId,
+      css: formStyles
+    }, jsx("div", null, children), !hideFooter && jsx(CreateFormFooter, {
+      formErrorMessage: formErrorMessage,
+      handleCancel: handleCancel,
+      submitting: submitting,
+      testId: testId
+    }));
+  });
 };

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

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

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

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

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

@@ -1,11 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @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 const TEST_ID = 'link-create-text-field';
 
 /**
@@ -16,52 +13,31 @@ export const TEST_ID = 'link-create-text-field';
  */
 
 export function TextField({
-  label,
+  id,
   name,
-  testId = TEST_ID,
-  validationHelpText,
-  validators,
-  defaultValue,
+  label,
   isRequired,
+  validators,
+  validationHelpText,
+  testId = TEST_ID,
   ...restProps
 }) {
-  const {
-    assignValidator
-  } = useFormContext();
-  useEffect(() => {
-    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 : ''
-    }, ({
-      fieldProps,
-      meta,
-      error
-    }) => {
-      const 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: `${testId}-helper-message`
-      }, validationHelpText), error && isInvalid && jsx(ErrorMessage, {
-        testId: `${testId}-error-message`
-      }, error));
-    })
-  );
+  return jsx(CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, ({
+    fieldId,
+    ...fieldProps
+  }) => {
+    return jsx(AkTextfield, _extends({
+      id: fieldId
+    }, fieldProps, restProps, {
+      isRequired: false // Remove the default browser validation
+    }));
+  });
 }

package/dist/es2019/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/es2019/version.json

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

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

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

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

@@ -0,0 +1,56 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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 */
+import { Fragment, useEffect, useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { Field } from 'react-final-form';
+import { ErrorMessage, HelperMessage, Label, RequiredAsterisk } from '@atlaskit/form';
+import { validateSubmitErrors } from '../../common/utils/form';
+import { useFormContext } from '../form-context';
+var fieldWrapperStyles = css({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export 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 = useFormContext(),
+    assignValidator = _useFormContext.assignValidator;
+  useEffect(function () {
+    if (validators) {
+      assignValidator(name, validators);
+    }
+  }, [name, validators, assignValidator]);
+  var fieldId = useMemo(function () {
+    return id ? id : "link-create-field-".concat(name);
+  }, [id, name]);
+  return jsx("div", {
+    css: fieldWrapperStyles,
+    "data-testid": testId
+  }, jsx(Field, {
+    name: name
+  }, function (_ref2) {
+    var input = _ref2.input,
+      meta = _ref2.meta;
+    var isInvalid = validateSubmitErrors(meta);
+    var submitError = meta.submitError;
+    return jsx(Fragment, null, label && jsx(Label, {
+      htmlFor: fieldId,
+      id: "".concat(fieldId, "-label"),
+      testId: "".concat(testId, "-label")
+    }, label, isRequired && jsx(RequiredAsterisk, null)), children(_objectSpread(_objectSpread({}, input), {}, {
+      fieldId: fieldId,
+      isInvalid: isInvalid
+    })), !submitError && validationHelpText && jsx(HelperMessage, {
+      testId: "".concat(testId, "-helper-message")
+    }, validationHelpText), submitError && isInvalid && jsx(ErrorMessage, {
+      testId: "".concat(testId, "-error-message")
+    }, submitError));
+  }));
+}

package/dist/esm/controllers/create-field/types.js

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

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-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';