@atlaskit/link-create 0.9.1 → 1.0.0

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/ui/link-create/main.js

@@ -69,10 +69,10 @@ var LinkCreate = (0, _formContext.withLinkCreateFormContext)(function (_ref2) {
       return _ref3.apply(this, arguments);
     };
   }(), [onCreate, setFormErrorMessage]);
-  var handleFailure = (0, _react.useCallback)(function (errorMessage) {
+  var handleFailure = (0, _react.useCallback)(function (error) {
     // Set the form error message
-    setFormErrorMessage(errorMessage);
-    onFailure && onFailure(errorMessage);
+    setFormErrorMessage(error.message);
+    onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
   return (0, _react2.jsx)("div", {
     "data-testid": testId

package/dist/cjs/version.json

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

package/dist/es2019/common/utils/analytics/analytics.codegen.js

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::6c4bc6f47b1cf9cb3a9a70cac9a93775>>
+ * @codegen <<SignedSource::50073590468fe2604f65d3e0b23d517b>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */
 

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

@@ -26,7 +26,12 @@ const LinkCreateCallbackProvider = ({
         await onCreate(result);
       }
     },
-    onFailure,
+    onFailure: async error => {
+      createAnalyticsEvent(createEventPayload('track.object.createFailed.linkCreate', {
+        failureType: error.name
+      })).fire(ANALYTICS_CHANNEL);
+      onFailure && onFailure(error);
+    },
     onCancel
   }), [onFailure, onCancel, createAnalyticsEvent, onCreate]);
   return /*#__PURE__*/React.createElement(LinkCreateCallbackContext.Provider, {

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

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

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/ui/link-create/main.js

@@ -37,10 +37,10 @@ const LinkCreate = withLinkCreateFormContext(({
       await onCreate(result);
     }
   }, [onCreate, setFormErrorMessage]);
-  const handleFailure = useCallback(errorMessage => {
+  const handleFailure = useCallback(error => {
     // Set the form error message
-    setFormErrorMessage(errorMessage);
-    onFailure && onFailure(errorMessage);
+    setFormErrorMessage(error.message);
+    onFailure && onFailure(error);
   }, [onFailure, setFormErrorMessage]);
   return jsx("div", {
     "data-testid": testId

package/dist/es2019/version.json

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

package/dist/esm/common/utils/analytics/analytics.codegen.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::6c4bc6f47b1cf9cb3a9a70cac9a93775>>
+ * @codegen <<SignedSource::50073590468fe2604f65d3e0b23d517b>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */