@atlaskit/link-create 1.9.4 → 1.10.0

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,10 +12,11 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _modalDialog = require("@atlaskit/modal-dialog");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../common/constants");
+var _ModalDialog = require("../../common/ui/ModalDialog");
 var _callbackContext = require("../../controllers/callback-context");
 var _editPostCreateContext = require("../../controllers/edit-post-create-context");
 var _exitWarningModalContext = require("../../controllers/exit-warning-modal-context");
@@ -26,12 +26,10 @@ var _confirmDismissDialog = require("./confirm-dismiss-dialog");
 var _editModal = require("./edit-modal");
 var _errorBoundary = require("./error-boundary");
 var _messages = require("./messages");
-var _trackMount = _interopRequireDefault(require("./track-mount"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /** @jsx jsx */
 
 var TEST_ID = exports.TEST_ID = 'link-create';
+var SCREEN_ID = 'linkCreateScreen';
 var LinkCreateContent = function LinkCreateContent(_ref) {
   var plugins = _ref.plugins,
     entityKey = _ref.entityKey;
@@ -109,8 +107,9 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref2) {
     onCreate: handleCreate,
     onFailure: handleFailure,
     onCancel: handleCancel
-  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, active && (0, _react2.jsx)(_modalDialog.default, {
+  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, active && (0, _react2.jsx)(_ModalDialog.Modal, {
     testId: "link-create-modal",
+    screen: SCREEN_ID,
     onClose: handleCancel,
     shouldScrollInViewport: true,
     onOpenComplete: onOpenComplete,
@@ -118,7 +117,7 @@ var LinkCreateWithModal = function LinkCreateWithModal(_ref2) {
     width: "".concat(_constants.CREATE_FORM_MAX_WIDTH_IN_PX, "px")
   }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, modalTitle || intl.formatMessage(_messages.messages.heading))), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_primitives.Box, {
     testId: testId
-  }, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_trackMount.default, null), (0, _react2.jsx)(LinkCreateContent, {
+  }, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(LinkCreateContent, {
     plugins: plugins,
     entityKey: entityKey
   })))))), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.enable-edit') && onComplete && (0, _react2.jsx)(_editModal.EditModal, {

package/dist/cjs/ui/main.js

@@ -31,7 +31,7 @@ var LinkCreateWithAnalyticsContext = (0, _analytics.withLinkCreateAnalyticsConte
 }));
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "1.9.4" || '',
+  packageVersion: "1.10.0" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

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
@@ -42,5 +48,5 @@ export const EditButton = () => {
       (_mutators$setField = mutators.setField) === null || _mutators$setField === void 0 ? void 0 : _mutators$setField.call(mutators, LINK_CREATE_FORM_POST_CREATE_FIELD, true);
       submit();
     }
-  }, intl.formatMessage(messages.edit)));
+  }, intl.formatMessage(messages.createAndOpen)));
 };

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

@@ -1,8 +1,8 @@
 import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
-  edit: {
-    id: 'linkCreate.createForm.button.edit',
-    defaultMessage: 'Edit',
-    description: 'Button to edit the Create object'
+  createAndOpen: {
+    id: 'linkCreate.createForm.button.createAndOpen',
+    defaultMessage: 'Create + Open',
+    description: 'Button to create the object and subsequently open a screen to edit'
   }
 });

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.10.0" || '',
   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;
 };