@atlaskit/link-create 1.9.4 → 1.9.5

package/dist/es2019/common/ui/ModalDialog/index.js

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+import { AnalyticsContext, useAnalyticsEvents } from '@atlaskit/analytics-next';
+import ModalDialog from '@atlaskit/modal-dialog';
+import { ANALYTICS_CHANNEL } from '../../constants';
+import createEventPayload from '../../utils/analytics/analytics.codegen';
+import { ScreenViewedEvent } from '../../utils/analytics/components';
+const ModalOpenCloseEvents = () => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  useEffect(() => {
+    //will fire when modal is mounted
+    createAnalyticsEvent(createEventPayload(`ui.modalDialog.opened.linkCreate`, {})).fire(ANALYTICS_CHANNEL);
+
+    //will fire when modal is unmounted
+    return () => {
+      createAnalyticsEvent(createEventPayload(`ui.modalDialog.closed.linkCreate`, {})).fire(ANALYTICS_CHANNEL);
+    };
+  }, [createAnalyticsEvent]);
+  return null;
+};
+
+/**
+ * AkModal component with built-in analytics for screen event + open + close events + source context
+ */
+export const Modal = ({
+  screen,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(ModalDialog, props, /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      source: screen,
+      component: 'modal'
+    }
+  }, /*#__PURE__*/React.createElement(ScreenViewedEvent, {
+    screen: screen
+  }), /*#__PURE__*/React.createElement(ModalOpenCloseEvents, null), children));
+};

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::af0139619517f37a8bca32ddb6b7d6e0>>
+ * @codegen <<SignedSource::be704bbbca0e49c927d1268b9a0f1d6a>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */
 

package/dist/es2019/common/utils/form/index.js

@@ -3,6 +3,17 @@
  * 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 const validateSubmitErrors = meta => {
-  return !!(meta.touched && (meta.error || meta.submitError && !meta.dirtySinceLastSubmit));
+export const shouldShowValidationErrors = meta => {
+  if (!meta.touched) {
+    return false;
+  }
+  if (meta.submitFailed) {
+    if (meta.error) {
+      return !meta.dirtySinceLastSubmit;
+    }
+    if (meta.submitError) {
+      return !meta.dirtySinceLastSubmit;
+    }
+  }
+  return false;
 };

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

@@ -1,10 +1,8 @@
 /** @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';
+import { shouldShowValidationErrors } from '../../common/utils/form';
 const fieldWrapperStyles = css({
   marginTop: "var(--ds-space-100, 8px)"
 });
@@ -18,29 +16,29 @@ export function CreateField({
   testId,
   children
 }) {
-  const {
-    assignValidator
-  } = useFormContext();
-  useEffect(() => {
-    if (validators) {
-      assignValidator(name, validators);
+  const fieldId = id ? id : `link-create-field-${name}`;
+  return jsx(Field, {
+    name: name,
+    validate: value => {
+      var _find;
+      return (_find = (validators !== null && validators !== void 0 ? validators : []).find(validator => {
+        return !validator.isValid(value);
+      })) === null || _find === void 0 ? void 0 : _find.errorMessage;
     }
-  }, [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 isInvalid = shouldShowValidationErrors(meta);
     const {
-      submitError
+      submitError,
+      error
     } = meta;
-    return jsx(Fragment, null, label && jsx(Label, {
+    const hasError = !!submitError || !!error;
+    return jsx("div", {
+      css: fieldWrapperStyles,
+      "data-testid": testId
+    }, label && jsx(Label, {
       htmlFor: fieldId,
       id: `${fieldId}-label`,
       testId: `${testId}-label`
@@ -48,10 +46,10 @@ export function CreateField({
       ...input,
       fieldId,
       isInvalid
-    }), !submitError && validationHelpText && jsx(HelperMessage, {
+    }), !hasError && validationHelpText && jsx(HelperMessage, {
       testId: `${testId}-helper-message`
-    }, validationHelpText), submitError && isInvalid && jsx(ErrorMessage, {
+    }, validationHelpText), hasError && isInvalid && jsx(ErrorMessage, {
       testId: `${testId}-error-message`
-    }, submitError));
-  }));
+    }, submitError || error));
+  });
 }

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

@@ -1,7 +1,5 @@
 import React, { createContext, useCallback, useContext, useState } from 'react';
 export const FormContext = /*#__PURE__*/createContext({
-  assignValidator: () => {},
-  getValidators: () => ({}),
   setFormErrorMessage: () => {},
   enableEditView: undefined
 });
@@ -10,20 +8,6 @@ const FormContextProvider = ({
   children
 }) => {
   const [error, setError] = useState();
-  const [validators, setValidators] = useState({});
-
-  // Add validators to the form
-  const assignValidator = useCallback((name, fieldValidators) => {
-    setValidators(prevValidators => ({
-      ...prevValidators,
-      [name]: fieldValidators
-    }));
-  }, []);
-
-  // Returns a validator function array
-  const getValidators = useCallback(() => {
-    return validators;
-  }, [validators]);
 
   // Sets the form footer error message
   const setFormErrorMessage = useCallback(errorMessage => {
@@ -31,8 +15,6 @@ const FormContextProvider = ({
   }, [setError]);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: {
-      assignValidator,
-      getValidators,
       setFormErrorMessage,
       formErrorMessage: error,
       enableEditView

package/dist/es2019/ui/create-form/form-footer/edit-button/index.js

@@ -1,14 +1,19 @@
 import React from 'react';
 import { useForm, useFormState } from 'react-final-form';
 import { useIntl } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import LoadingButton from '@atlaskit/button/loading-button';
-import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
+import { ANALYTICS_CHANNEL, LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
+import createEventPayload from '../../../../common/utils/analytics/analytics.codegen';
 import { useFormContext } from '../../../../controllers/form-context';
 // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
 import { FormSpy } from '../../form-spy';
 import { messages } from './messages';
 export const EditButton = () => {
   const intl = useIntl();
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const {
     submitting
   } = useFormState();
@@ -35,6 +40,7 @@ export const EditButton = () => {
     submitting && values[LINK_CREATE_FORM_POST_CREATE_FIELD] === true,
     onClick: () => {
       var _mutators$setField;
+      createAnalyticsEvent(createEventPayload('ui.button.clicked.edit', {})).fire(ANALYTICS_CHANNEL);
       /**
        * Setting this field to true indicates that the edit button was clicked and that
        * we have the intention of triggering the edit/post create flow

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

@@ -2,10 +2,14 @@
 import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import Button, { ButtonGroup } from '@atlaskit/button';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ButtonGroup } from '@atlaskit/button';
 import LoadingButton from '@atlaskit/button/loading-button';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { ANALYTICS_CHANNEL } from '../../../common/constants';
+import { Button } from '../../../common/ui/Button';
+import createEventPayload from '../../../common/utils/analytics/analytics.codegen';
 import { EditButton } from './edit-button';
 import { messages } from './messages';
 import { SubmitButton } from './submit-button';
@@ -31,6 +35,9 @@ export function CreateFormFooter({
   testId
 }) {
   const intl = useIntl();
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   return jsx("footer", {
     "data-testid": `${testId}-footer`,
     css: formFooterWrapperStyles
@@ -42,6 +49,7 @@ export function CreateFormFooter({
     primaryColor: "var(--ds-icon-danger, #E34935)"
   }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
     type: "button",
+    actionSubjectId: "cancel",
     appearance: "subtle",
     onClick: handleCancel,
     testId: `${testId}-button-cancel`
@@ -49,6 +57,9 @@ export function CreateFormFooter({
     type: "submit",
     appearance: "primary",
     isLoading: submitting,
-    testId: `${testId}-button-submit`
+    testId: `${testId}-button-submit`,
+    onClick: () => {
+      createAnalyticsEvent(createEventPayload('ui.button.clicked.create', {})).fire(ANALYTICS_CHANNEL);
+    }
   }, intl.formatMessage(messages.create))));
 }

package/dist/es2019/ui/create-form/form-footer/submit-button/index.js

@@ -1,14 +1,19 @@
 import React from 'react';
 import { useForm, useFormState } from 'react-final-form';
 import { useIntl } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import LoadingButton from '@atlaskit/button/loading-button';
-import { LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
+import { ANALYTICS_CHANNEL, LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../../common/constants';
+import createEventPayload from '../../../../common/utils/analytics/analytics.codegen';
 // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
 import { FormSpy } from '../../form-spy';
 // eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
 import { messages } from '../messages';
 export const SubmitButton = () => {
   const intl = useIntl();
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const {
     submitting
   } = useFormState();
@@ -29,6 +34,7 @@ export const SubmitButton = () => {
     testId: "link-create-form-button-submit",
     onClick: () => {
       var _mutators$setField;
+      createAnalyticsEvent(createEventPayload('ui.button.clicked.create', {})).fire(ANALYTICS_CHANNEL);
       (_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 ? void 0 : _mutators$setField.call(mutators, LINK_CREATE_FORM_POST_CREATE_FIELD, false);
     }
   }, intl.formatMessage(messages.create)));

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

@@ -2,16 +2,13 @@
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Form, FormSpy } from 'react-final-form';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
-import { ANALYTICS_CHANNEL, CREATE_FORM_MAX_WIDTH_IN_PX, LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../common/constants';
-import createEventPayload from '../../common/utils/analytics/analytics.codegen';
+import { CREATE_FORM_MAX_WIDTH_IN_PX, LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../common/constants';
 import { useExitWarningModal } from '../../controllers/exit-warning-modal-context';
 import { useFormContext } from '../../controllers/form-context';
 import { CreateFormFooter } from './form-footer';
 import { CreateFormLoader } from './form-loader';
-import { validateFormData } from './utils';
 const formStyles = css({
   maxWidth: `${CREATE_FORM_MAX_WIDTH_IN_PX}px`,
   padding: `0 0 ${"var(--ds-space-300, 24px)"} 0`,
@@ -29,10 +26,6 @@ export const CreateForm = ({
   initialValues
 }) => {
   const {
-    createAnalyticsEvent
-  } = useAnalyticsEvents();
-  const {
-    getValidators,
     formErrorMessage,
     enableEditView
   } = useFormContext();
@@ -40,15 +33,6 @@ export const CreateForm = ({
     setShouldShowWarning
   } = useExitWarningModal();
   const handleSubmit = useCallback(async data => {
-    createAnalyticsEvent(createEventPayload('ui.button.clicked.create', {})).fire(ANALYTICS_CHANNEL);
-    const validators = getValidators();
-    const errors = validateFormData({
-      data,
-      validators
-    });
-    if (Object.keys(errors).length !== 0) {
-      return errors;
-    }
     if (getBooleanFF('platform.linking-platform.link-create.enable-edit')) {
       const {
         [LINK_CREATE_FORM_POST_CREATE_FIELD]: shouldEnableEditView,
@@ -64,11 +48,10 @@ export const CreateForm = ({
       return onSubmit(formData);
     }
     return onSubmit(data);
-  }, [createAnalyticsEvent, getValidators, onSubmit, enableEditView]);
+  }, [onSubmit, enableEditView]);
   const handleCancel = useCallback(() => {
-    createAnalyticsEvent(createEventPayload('ui.button.clicked.cancel', {})).fire(ANALYTICS_CHANNEL);
     onCancel && onCancel();
-  }, [createAnalyticsEvent, onCancel]);
+  }, [onCancel]);
   if (isLoading) {
     return jsx(CreateFormLoader, null);
   }

package/dist/es2019/ui/link-create/confirm-dismiss-dialog/main.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { Button } from '../../../common/ui/Button';
-import { ScreenViewedEvent } from '../../../common/utils/analytics/components';
+import { Modal } from '../../../common/ui/ModalDialog';
 import { useLinkCreateCallback } from '../../../controllers/callback-context';
 import messages from './messages';
 const screen = 'linkCreateExitWarningScreen';
@@ -28,11 +28,10 @@ export const ConfirmDismissDialog = ({
     data: context
   }, /*#__PURE__*/React.createElement(Modal, {
     testId: "link-create-confirm-dismiss-dialog",
+    screen: screen,
     onClose: onCancelDismiss,
     width: "small"
-  }, /*#__PURE__*/React.createElement(ScreenViewedEvent, {
-    screen: screen
-  }), /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, intl.formatMessage(messages.title))), /*#__PURE__*/React.createElement(ModalBody, null, intl.formatMessage(messages.description)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, intl.formatMessage(messages.title))), /*#__PURE__*/React.createElement(ModalBody, null, intl.formatMessage(messages.description)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     actionSubjectId: "cancel",
     appearance: "subtle",
     onClick: onCancelDismiss

package/dist/es2019/ui/link-create/edit-modal/index.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import Modal, { ModalTransition } from '@atlaskit/modal-dialog';
+import { ModalTransition } from '@atlaskit/modal-dialog';
+import { Modal } from '../../../common/ui/ModalDialog';
 import { useEditPostCreateModal } from '../../../controllers/edit-post-create-context';
 import { useLinkCreatePlugins } from '../../../controllers/plugin-context';
+const SCREEN = 'linkCreateEditScreen';
 export const EditModal = ({
   onClose,
   onCloseComplete
@@ -13,8 +15,9 @@ export const EditModal = ({
   const {
     activePlugin
   } = useLinkCreatePlugins();
-  return /*#__PURE__*/React.createElement(ModalTransition, null, !!editViewPayload && /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/React.createElement(ModalTransition, null, !!editViewPayload && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
     testId: "link-create-edit-modal",
+    screen: SCREEN,
     onClose: onClose,
     shouldScrollInViewport: true,
     width: "calc(100vw - 120px)",
@@ -23,5 +26,5 @@ export const EditModal = ({
   }, activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$editVie = activePlugin.editView) === null || _activePlugin$editVie === void 0 ? void 0 : _activePlugin$editVie.call(activePlugin, {
     payload: editViewPayload,
     onClose
-  })));
+  }))));
 };

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

@@ -3,10 +3,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Fragment, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import Modal, { ModalBody, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { ModalBody, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { CREATE_FORM_MAX_WIDTH_IN_PX } from '../../common/constants';
+import { Modal } from '../../common/ui/ModalDialog';
 import { LinkCreateCallbackProvider } from '../../controllers/callback-context';
 import { EditPostCreateModalProvider } from '../../controllers/edit-post-create-context';
 import { ExitWarningModalProvider, useExitWarningModal } from '../../controllers/exit-warning-modal-context';
@@ -16,8 +17,8 @@ import { ConfirmDismissDialog } from './confirm-dismiss-dialog';
 import { EditModal } from './edit-modal';
 import { ErrorBoundary } from './error-boundary';
 import { messages } from './messages';
-import TrackMount from './track-mount';
 export const TEST_ID = 'link-create';
+const SCREEN_ID = 'linkCreateScreen';
 const LinkCreateContent = ({
   plugins,
   entityKey
@@ -77,6 +78,7 @@ const LinkCreateWithModal = ({
     onCancel: handleCancel
   }, jsx(ModalTransition, null, active && jsx(Modal, {
     testId: "link-create-modal",
+    screen: SCREEN_ID,
     onClose: handleCancel,
     shouldScrollInViewport: true,
     onOpenComplete: onOpenComplete,
@@ -84,7 +86,7 @@ const LinkCreateWithModal = ({
     width: `${CREATE_FORM_MAX_WIDTH_IN_PX}px`
   }, jsx(ModalHeader, null, jsx(ModalTitle, null, modalTitle || intl.formatMessage(messages.heading))), jsx(ModalBody, null, jsx(Box, {
     testId: testId
-  }, jsx(ErrorBoundary, null, jsx(TrackMount, null), jsx(LinkCreateContent, {
+  }, jsx(ErrorBoundary, null, jsx(LinkCreateContent, {
     plugins: plugins,
     entityKey: entityKey
   })))))), getBooleanFF('platform.linking-platform.link-create.enable-edit') && onComplete && jsx(EditModal, {

package/dist/es2019/ui/main.js

@@ -22,7 +22,7 @@ const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE
 }));
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.9.4" || '',
+  packageVersion: "1.9.5" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/esm/common/ui/ModalDialog/index.js

@@ -0,0 +1,39 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["screen", "children"];
+import React, { useEffect } from 'react';
+import { AnalyticsContext, useAnalyticsEvents } from '@atlaskit/analytics-next';
+import ModalDialog from '@atlaskit/modal-dialog';
+import { ANALYTICS_CHANNEL } from '../../constants';
+import createEventPayload from '../../utils/analytics/analytics.codegen';
+import { ScreenViewedEvent } from '../../utils/analytics/components';
+var ModalOpenCloseEvents = function ModalOpenCloseEvents() {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  useEffect(function () {
+    //will fire when modal is mounted
+    createAnalyticsEvent(createEventPayload("ui.modalDialog.opened.linkCreate", {})).fire(ANALYTICS_CHANNEL);
+
+    //will fire when modal is unmounted
+    return function () {
+      createAnalyticsEvent(createEventPayload("ui.modalDialog.closed.linkCreate", {})).fire(ANALYTICS_CHANNEL);
+    };
+  }, [createAnalyticsEvent]);
+  return null;
+};
+
+/**
+ * AkModal component with built-in analytics for screen event + open + close events + source context
+ */
+export var Modal = function Modal(_ref) {
+  var screen = _ref.screen,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(ModalDialog, props, /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: {
+      source: screen,
+      component: 'modal'
+    }
+  }, /*#__PURE__*/React.createElement(ScreenViewedEvent, {
+    screen: screen
+  }), /*#__PURE__*/React.createElement(ModalOpenCloseEvents, null), children));
+};

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::af0139619517f37a8bca32ddb6b7d6e0>>
+ * @codegen <<SignedSource::be704bbbca0e49c927d1268b9a0f1d6a>>
  * @codegenCommand yarn workspace @atlaskit/link-create run codegen-analytics
  */
 

package/dist/esm/common/utils/form/index.js

@@ -3,6 +3,17 @@
  * 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 var validateSubmitErrors = function validateSubmitErrors(meta) {
-  return !!(meta.touched && (meta.error || meta.submitError && !meta.dirtySinceLastSubmit));
+export var shouldShowValidationErrors = function shouldShowValidationErrors(meta) {
+  if (!meta.touched) {
+    return false;
+  }
+  if (meta.submitFailed) {
+    if (meta.error) {
+      return !meta.dirtySinceLastSubmit;
+    }
+    if (meta.submitError) {
+      return !meta.dirtySinceLastSubmit;
+    }
+  }
+  return false;
 };

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

@@ -2,12 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @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';
+import { shouldShowValidationErrors } from '../../common/utils/form';
 var fieldWrapperStyles = css({
   marginTop: "var(--ds-space-100, 8px)"
 });
@@ -20,37 +18,36 @@ export function CreateField(_ref) {
     validationHelpText = _ref.validationHelpText,
     testId = _ref.testId,
     children = _ref.children;
-  var _useFormContext = useFormContext(),
-    assignValidator = _useFormContext.assignValidator;
-  useEffect(function () {
-    if (validators) {
-      assignValidator(name, validators);
+  var fieldId = id ? id : "link-create-field-".concat(name);
+  return jsx(Field, {
+    name: name,
+    validate: function validate(value) {
+      var _find;
+      return (_find = (validators !== null && validators !== void 0 ? validators : []).find(function (validator) {
+        return !validator.isValid(value);
+      })) === null || _find === void 0 ? void 0 : _find.errorMessage;
     }
-  }, [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, {
+    var isInvalid = shouldShowValidationErrors(meta);
+    var submitError = meta.submitError,
+      error = meta.error;
+    var hasError = !!submitError || !!error;
+    return jsx("div", {
+      css: fieldWrapperStyles,
+      "data-testid": testId
+    }, 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, {
+    })), !hasError && validationHelpText && jsx(HelperMessage, {
       testId: "".concat(testId, "-helper-message")
-    }, validationHelpText), submitError && isInvalid && jsx(ErrorMessage, {
+    }, validationHelpText), hasError && isInvalid && jsx(ErrorMessage, {
       testId: "".concat(testId, "-error-message")
-    }, submitError));
-  }));
+    }, submitError || error));
+  });
 }

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

@@ -1,13 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { createContext, useCallback, useContext, useState } from 'react';
 export var FormContext = /*#__PURE__*/createContext({
-  assignValidator: function assignValidator() {},
-  getValidators: function getValidators() {
-    return {};
-  },
   setFormErrorMessage: function setFormErrorMessage() {},
   enableEditView: undefined
 });
@@ -18,22 +11,6 @@ var FormContextProvider = function FormContextProvider(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     error = _useState2[0],
     setError = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    validators = _useState4[0],
-    setValidators = _useState4[1];
-
-  // Add validators to the form
-  var assignValidator = useCallback(function (name, fieldValidators) {
-    setValidators(function (prevValidators) {
-      return _objectSpread(_objectSpread({}, prevValidators), {}, _defineProperty({}, name, fieldValidators));
-    });
-  }, []);
-
-  // Returns a validator function array
-  var getValidators = useCallback(function () {
-    return validators;
-  }, [validators]);
 
   // Sets the form footer error message
   var setFormErrorMessage = useCallback(function (errorMessage) {
@@ -41,8 +18,6 @@ var FormContextProvider = function FormContextProvider(_ref) {
   }, [setError]);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: {
-      assignValidator: assignValidator,
-      getValidators: getValidators,
       setFormErrorMessage: setFormErrorMessage,
       formErrorMessage: error,
       enableEditView: enableEditView