@atlaskit/link-create 0.5.6 → 0.5.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-create
 
+## 0.5.7
+
+### Patch Changes
+
+- [`ffb87e553ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ffb87e553ea) - Hides the validation error when user edits the field
+
 ## 0.5.6
 
 ### Patch Changes

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateSubmitErrors = void 0;
+/**
+ * This function checks if there have been changes since last submit
+ * to let a Field know if it should hide the error message until
+ * the next submit, or if it returns to the previous error state
+ */
+var validateSubmitErrors = function validateSubmitErrors(meta) {
+  return !!(meta.touched && (meta.error || meta.submitError && !meta.dirtySinceLastSubmit));
+};
+exports.validateSubmitErrors = validateSubmitErrors;

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

@@ -11,6 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _form = require("@atlaskit/form");
 var _select = require("@atlaskit/select");
+var _form2 = require("../../../common/utils/form");
 var _formContext = require("../../../controllers/form-context");
 var _excluded = ["label", "name", "validationHelpText", "isRequired", "testId", "validators", "defaultValue"];
 /** @jsx jsx */
@@ -45,7 +46,13 @@ function AsyncSelect(_ref) {
     defaultValue: defaultValue
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
+      meta = _ref2.meta,
       error = _ref2.error;
-    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_select.AsyncSelect, (0, _extends2.default)({}, fieldProps, rest)), !error && (0, _react2.jsx)(_form.HelperMessage, null, validationHelpText), error && (0, _react2.jsx)(_form.ErrorMessage, null, error));
+    var isInvalid = (0, _form2.validateSubmitErrors)(meta);
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_select.AsyncSelect, (0, _extends2.default)({}, fieldProps, rest, {
+      isInvalid: isInvalid
+    })), !error && validationHelpText && (0, _react2.jsx)(_form.HelperMessage, null, validationHelpText), isInvalid && (0, _react2.jsx)(_form.ErrorMessage, {
+      testId: "".concat(testId, "-error-message")
+    }, error));
   }));
 }

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

@@ -11,6 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _form = require("@atlaskit/form");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _form2 = require("../../../common/utils/form");
 var _formContext = require("../../../controllers/form-context");
 var _excluded = ["label", "name", "validationHelpText", "validators", "defaultValue"];
 /** @jsx jsx */
@@ -49,8 +50,14 @@ function TextField(_ref) {
       defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''
     }, function (_ref2) {
       var fieldProps = _ref2.fieldProps,
+        meta = _ref2.meta,
         error = _ref2.error;
-      return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps)), !error && (0, _react2.jsx)(_form.HelperMessage, null, validationHelpText), error && (0, _react2.jsx)(_form.ErrorMessage, null, error));
+      var isInvalid = (0, _form2.validateSubmitErrors)(meta);
+      return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
+        isInvalid: isInvalid
+      })), !error && validationHelpText && (0, _react2.jsx)(_form.HelperMessage, null, validationHelpText), error && isInvalid && (0, _react2.jsx)(_form.ErrorMessage, {
+        testId: "".concat(restProps.testId, "-error-message")
+      }, error));
     })
   );
 }

package/dist/cjs/version.json

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

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

@@ -0,0 +1,8 @@
+/**
+ * This function checks if there have been changes since last submit
+ * to let a Field know if it should hide the error message until
+ * the next submit, or if it returns to the previous error state
+ */
+export const validateSubmitErrors = meta => {
+  return !!(meta.touched && (meta.error || meta.submitError && !meta.dirtySinceLastSubmit));
+};

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

@@ -4,6 +4,7 @@ import { Fragment, useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
 import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
+import { validateSubmitErrors } from '../../../common/utils/form';
 import { useFormContext } from '../../../controllers/form-context';
 /**
  * An async select utilising the Atlaskit AsyncSelect and Field objects from `@atlaskit/form`.
@@ -38,6 +39,14 @@ export function AsyncSelect({
     defaultValue: defaultValue
   }, ({
     fieldProps,
+    meta,
     error
-  }) => jsx(Fragment, null, jsx(AkAsyncSelect, _extends({}, fieldProps, rest)), !error && jsx(HelperMessage, null, validationHelpText), error && jsx(ErrorMessage, null, error))));
+  }) => {
+    const isInvalid = validateSubmitErrors(meta);
+    return jsx(Fragment, null, jsx(AkAsyncSelect, _extends({}, fieldProps, rest, {
+      isInvalid: isInvalid
+    })), !error && validationHelpText && jsx(HelperMessage, null, validationHelpText), isInvalid && jsx(ErrorMessage, {
+      testId: `${testId}-error-message`
+    }, error));
+  }));
 }

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

@@ -4,6 +4,7 @@ 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';
 /**
  * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
@@ -42,9 +43,15 @@ export function TextField({
       defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''
     }, ({
       fieldProps,
+      meta,
       error
     }) => {
-      return jsx(Fragment, null, jsx(AkTextfield, _extends({}, fieldProps, restProps)), !error && jsx(HelperMessage, null, validationHelpText), error && jsx(ErrorMessage, null, error));
+      const isInvalid = validateSubmitErrors(meta);
+      return jsx(Fragment, null, jsx(AkTextfield, _extends({}, fieldProps, restProps, {
+        isInvalid: isInvalid
+      })), !error && validationHelpText && jsx(HelperMessage, null, validationHelpText), error && isInvalid && jsx(ErrorMessage, {
+        testId: `${restProps.testId}-error-message`
+      }, error));
     })
   );
 }

package/dist/es2019/version.json

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

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

@@ -0,0 +1,8 @@
+/**
+ * This function checks if there have been changes since last submit
+ * to let a Field know if it should hide the error message until
+ * the next submit, or if it returns to the previous error state
+ */
+export var validateSubmitErrors = function validateSubmitErrors(meta) {
+  return !!(meta.touched && (meta.error || meta.submitError && !meta.dirtySinceLastSubmit));
+};

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

@@ -6,6 +6,7 @@ import { Fragment, useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
 import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
+import { validateSubmitErrors } from '../../../common/utils/form';
 import { useFormContext } from '../../../controllers/form-context';
 /**
  * An async select utilising the Atlaskit AsyncSelect and Field objects from `@atlaskit/form`.
@@ -38,7 +39,13 @@ export function AsyncSelect(_ref) {
     defaultValue: defaultValue
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
+      meta = _ref2.meta,
       error = _ref2.error;
-    return jsx(Fragment, null, jsx(AkAsyncSelect, _extends({}, fieldProps, rest)), !error && jsx(HelperMessage, null, validationHelpText), error && jsx(ErrorMessage, null, error));
+    var isInvalid = validateSubmitErrors(meta);
+    return jsx(Fragment, null, jsx(AkAsyncSelect, _extends({}, fieldProps, rest, {
+      isInvalid: isInvalid
+    })), !error && validationHelpText && jsx(HelperMessage, null, validationHelpText), isInvalid && jsx(ErrorMessage, {
+      testId: "".concat(testId, "-error-message")
+    }, error));
   }));
 }

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

@@ -6,6 +6,7 @@ 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';
 /**
  * A text field utilising the Atlaskit Textfield and Field objects from `@atlaskit/form`.
@@ -42,8 +43,14 @@ export function TextField(_ref) {
       defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''
     }, function (_ref2) {
       var fieldProps = _ref2.fieldProps,
+        meta = _ref2.meta,
         error = _ref2.error;
-      return jsx(Fragment, null, jsx(AkTextfield, _extends({}, fieldProps, restProps)), !error && jsx(HelperMessage, null, validationHelpText), error && jsx(ErrorMessage, null, error));
+      var isInvalid = validateSubmitErrors(meta);
+      return jsx(Fragment, null, jsx(AkTextfield, _extends({}, fieldProps, restProps, {
+        isInvalid: isInvalid
+      })), !error && validationHelpText && jsx(HelperMessage, null, validationHelpText), error && isInvalid && jsx(ErrorMessage, {
+        testId: "".concat(restProps.testId, "-error-message")
+      }, error));
     })
   );
 }

package/dist/esm/version.json

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",