@atlaskit/inline-edit 12.4.0 → 12.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/inline-edit
 
+## 12.4.1
+
+### Patch Changes
+
+- [`4f5a3b9d776`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f5a3b9d776) - Improvement to last regression bugfix where internal form state persisted across blur and cancel incorrectly
+
 ## 12.4.0
 
 ### Minor Changes

package/dist/cjs/inline-edit.js

@@ -32,7 +32,7 @@ var buttonStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.4.0"
+  packageVersion: "12.4.1"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {
@@ -158,70 +158,72 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       readView: readView
     });
   };
-
-  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-  return (0, _react2.jsx)(_Form.default, {
-    onSubmit: function onSubmit(data) {
-      return onConfirm(data.inlineEdit);
-    }
-  }, function (_ref) {
-    var _ref$formProps = _ref.formProps,
-      _onKeyDown = _ref$formProps.onKeyDown,
-      onSubmit = _ref$formProps.onSubmit,
-      formRef = _ref$formProps.ref;
-    return (0, _react2.jsx)("form", {
-      onKeyDown: function onKeyDown(e) {
-        _onKeyDown(e);
-        if (e.key === 'Esc' || e.key === 'Escape') {
-          onCancel();
-        }
-      },
-      onSubmit: onSubmit,
-      ref: formRef
-    }, shouldBeEditing ? (0, _react2.jsx)(_Field.default, {
-      name: "inlineEdit",
-      label: label,
-      defaultValue: defaultValue,
-      validate: validate,
-      isRequired: isRequired,
-      key: "edit-view" // used for reset to default value
-    }, function (_ref2) {
-      var fieldProps = _ref2.fieldProps,
-        error = _ref2.error;
-      return (0, _react2.jsx)("div", {
-        css: fieldStyles,
-        onBlur: function onBlur() {
-          onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
-        },
-        onFocus: onEditViewWrapperFocus
-      }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
-        errorMessage: error
-      }), editViewRef), !hideActionButtons ? (0, _react2.jsx)(_buttons.default, {
-        cancelButtonLabel: cancelButtonLabel,
-        confirmButtonLabel: confirmButtonLabel,
-        onMouseDown: function onMouseDown() {
-          /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
-          doNotFocusOnEditButton();
-        },
-        mode: mode,
-        onCancelClick: onCancelClick
-      }) : /** This is to allow Ctrl + Enter to submit without action buttons */
-      (0, _react2.jsx)("button", {
-        css: buttonStyles,
-        type: "submit"
-      }));
-    }) : /** Field is used here only for the label */
-    (0, _react2.jsx)(_Field.default, {
+  if (shouldBeEditing) {
+    return (0, _react2.jsx)(_Form.default, {
+      onSubmit: function onSubmit(data) {
+        return onConfirm(data.inlineEdit);
+      }
+    }, function (_ref) {
+      var _ref$formProps = _ref.formProps,
+        _onKeyDown = _ref$formProps.onKeyDown,
+        onSubmit = _ref$formProps.onSubmit,
+        formRef = _ref$formProps.ref;
+      return (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+        (0, _react2.jsx)("form", {
+          onKeyDown: function onKeyDown(e) {
+            _onKeyDown(e);
+            if (e.key === 'Esc' || e.key === 'Escape') {
+              onCancel();
+            }
+          },
+          onSubmit: onSubmit,
+          ref: formRef
+        }, (0, _react2.jsx)(_Field.default, {
+          name: "inlineEdit",
+          label: label,
+          defaultValue: defaultValue,
+          validate: validate,
+          isRequired: isRequired,
+          key: "edit-view" // used for reset to default value
+        }, function (_ref2) {
+          var fieldProps = _ref2.fieldProps,
+            error = _ref2.error;
+          return (0, _react2.jsx)("div", {
+            css: fieldStyles,
+            onBlur: function onBlur() {
+              onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
+            },
+            onFocus: onEditViewWrapperFocus
+          }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
+            errorMessage: error
+          }), editViewRef), !hideActionButtons ? (0, _react2.jsx)(_buttons.default, {
+            cancelButtonLabel: cancelButtonLabel,
+            confirmButtonLabel: confirmButtonLabel,
+            onMouseDown: function onMouseDown() {
+              /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
+              doNotFocusOnEditButton();
+            },
+            mode: mode,
+            onCancelClick: onCancelClick
+          }) : /** This is to allow Ctrl + Enter to submit without action buttons */
+          (0, _react2.jsx)("button", {
+            css: buttonStyles,
+            type: "submit"
+          }));
+        }))
+      );
+    });
+  }
+  return (/** Form, Field are used here only for the label and spacing */
+    (0, _react2.jsx)("form", null, (0, _react2.jsx)(_Field.default, {
       name: "inlineEdit",
       label: label,
       defaultValue: "",
       isRequired: isRequired,
       key: "read-view" // used for reset to default value
-    }, renderReadView));
-  });
-  /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+    }, renderReadView))
+  );
 };
-
 var InlineEdit = function InlineEdit(props) {
   return (0, _react2.jsx)(_components.default.Consumer, null, function (tokens) {
     var mode = tokens.mode;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.4.0",
+	"version": "12.4.1",
 	"sideEffects": false
 }

package/dist/es2019/inline-edit.js

@@ -19,7 +19,7 @@ const buttonStyles = css({
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.4.0"
+  packageVersion: "12.4.1"
 };
 const noop = () => {};
 const InnerInlineEdit = props => {
@@ -134,68 +134,69 @@ const InnerInlineEdit = props => {
       readView: readView
     });
   };
-
-  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-  return jsx(Form, {
-    onSubmit: data => onConfirm(data.inlineEdit)
-  }, ({
-    formProps: {
-      onKeyDown,
-      onSubmit,
-      ref: formRef
-    }
-  }) => jsx("form", {
-    onKeyDown: e => {
-      onKeyDown(e);
-      if (e.key === 'Esc' || e.key === 'Escape') {
-        onCancel();
+  if (shouldBeEditing) {
+    return jsx(Form, {
+      onSubmit: data => onConfirm(data.inlineEdit)
+    }, ({
+      formProps: {
+        onKeyDown,
+        onSubmit,
+        ref: formRef
       }
-    },
-    onSubmit: onSubmit,
-    ref: formRef
-  }, shouldBeEditing ? jsx(Field, {
-    name: "inlineEdit",
-    label: label,
-    defaultValue: defaultValue,
-    validate: validate,
-    isRequired: isRequired,
-    key: "edit-view" // used for reset to default value
-  }, ({
-    fieldProps,
-    error
-  }) => jsx("div", {
-    css: fieldStyles,
-    onBlur: () => {
-      onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
-    },
-    onFocus: onEditViewWrapperFocus
-  }, editView({
-    ...fieldProps,
-    errorMessage: error
-  }, editViewRef), !hideActionButtons ? jsx(Buttons, {
-    cancelButtonLabel: cancelButtonLabel,
-    confirmButtonLabel: confirmButtonLabel,
-    onMouseDown: () => {
-      /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
-      doNotFocusOnEditButton();
-    },
-    mode: mode,
-    onCancelClick: onCancelClick
-  }) : /** This is to allow Ctrl + Enter to submit without action buttons */
-  jsx("button", {
-    css: buttonStyles,
-    type: "submit"
-  }))) : /** Field is used here only for the label */
-  jsx(Field, {
-    name: "inlineEdit",
-    label: label,
-    defaultValue: "",
-    isRequired: isRequired,
-    key: "read-view" // used for reset to default value
-  }, renderReadView)));
-  /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+    }) => /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+    jsx("form", {
+      onKeyDown: e => {
+        onKeyDown(e);
+        if (e.key === 'Esc' || e.key === 'Escape') {
+          onCancel();
+        }
+      },
+      onSubmit: onSubmit,
+      ref: formRef
+    }, jsx(Field, {
+      name: "inlineEdit",
+      label: label,
+      defaultValue: defaultValue,
+      validate: validate,
+      isRequired: isRequired,
+      key: "edit-view" // used for reset to default value
+    }, ({
+      fieldProps,
+      error
+    }) => jsx("div", {
+      css: fieldStyles,
+      onBlur: () => {
+        onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
+      },
+      onFocus: onEditViewWrapperFocus
+    }, editView({
+      ...fieldProps,
+      errorMessage: error
+    }, editViewRef), !hideActionButtons ? jsx(Buttons, {
+      cancelButtonLabel: cancelButtonLabel,
+      confirmButtonLabel: confirmButtonLabel,
+      onMouseDown: () => {
+        /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
+        doNotFocusOnEditButton();
+      },
+      mode: mode,
+      onCancelClick: onCancelClick
+    }) : /** This is to allow Ctrl + Enter to submit without action buttons */
+    jsx("button", {
+      css: buttonStyles,
+      type: "submit"
+    })))));
+  }
+  return (/** Form, Field are used here only for the label and spacing */
+    jsx("form", null, jsx(Field, {
+      name: "inlineEdit",
+      label: label,
+      defaultValue: "",
+      isRequired: isRequired,
+      key: "read-view" // used for reset to default value
+    }, renderReadView))
+  );
 };
-
 const InlineEdit = props => {
   return jsx(GlobalTheme.Consumer, null, tokens => {
     const mode = tokens.mode;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.4.0",
+	"version": "12.4.1",
 	"sideEffects": false
 }

package/dist/esm/inline-edit.js

@@ -23,7 +23,7 @@ var buttonStyles = css({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.4.0"
+  packageVersion: "12.4.1"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {
@@ -149,70 +149,72 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       readView: readView
     });
   };
-
-  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-  return jsx(Form, {
-    onSubmit: function onSubmit(data) {
-      return onConfirm(data.inlineEdit);
-    }
-  }, function (_ref) {
-    var _ref$formProps = _ref.formProps,
-      _onKeyDown = _ref$formProps.onKeyDown,
-      onSubmit = _ref$formProps.onSubmit,
-      formRef = _ref$formProps.ref;
-    return jsx("form", {
-      onKeyDown: function onKeyDown(e) {
-        _onKeyDown(e);
-        if (e.key === 'Esc' || e.key === 'Escape') {
-          onCancel();
-        }
-      },
-      onSubmit: onSubmit,
-      ref: formRef
-    }, shouldBeEditing ? jsx(Field, {
-      name: "inlineEdit",
-      label: label,
-      defaultValue: defaultValue,
-      validate: validate,
-      isRequired: isRequired,
-      key: "edit-view" // used for reset to default value
-    }, function (_ref2) {
-      var fieldProps = _ref2.fieldProps,
-        error = _ref2.error;
-      return jsx("div", {
-        css: fieldStyles,
-        onBlur: function onBlur() {
-          onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
-        },
-        onFocus: onEditViewWrapperFocus
-      }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
-        errorMessage: error
-      }), editViewRef), !hideActionButtons ? jsx(Buttons, {
-        cancelButtonLabel: cancelButtonLabel,
-        confirmButtonLabel: confirmButtonLabel,
-        onMouseDown: function onMouseDown() {
-          /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
-          doNotFocusOnEditButton();
-        },
-        mode: mode,
-        onCancelClick: onCancelClick
-      }) : /** This is to allow Ctrl + Enter to submit without action buttons */
-      jsx("button", {
-        css: buttonStyles,
-        type: "submit"
-      }));
-    }) : /** Field is used here only for the label */
-    jsx(Field, {
+  if (shouldBeEditing) {
+    return jsx(Form, {
+      onSubmit: function onSubmit(data) {
+        return onConfirm(data.inlineEdit);
+      }
+    }, function (_ref) {
+      var _ref$formProps = _ref.formProps,
+        _onKeyDown = _ref$formProps.onKeyDown,
+        onSubmit = _ref$formProps.onSubmit,
+        formRef = _ref$formProps.ref;
+      return (/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
+        jsx("form", {
+          onKeyDown: function onKeyDown(e) {
+            _onKeyDown(e);
+            if (e.key === 'Esc' || e.key === 'Escape') {
+              onCancel();
+            }
+          },
+          onSubmit: onSubmit,
+          ref: formRef
+        }, jsx(Field, {
+          name: "inlineEdit",
+          label: label,
+          defaultValue: defaultValue,
+          validate: validate,
+          isRequired: isRequired,
+          key: "edit-view" // used for reset to default value
+        }, function (_ref2) {
+          var fieldProps = _ref2.fieldProps,
+            error = _ref2.error;
+          return jsx("div", {
+            css: fieldStyles,
+            onBlur: function onBlur() {
+              onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
+            },
+            onFocus: onEditViewWrapperFocus
+          }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
+            errorMessage: error
+          }), editViewRef), !hideActionButtons ? jsx(Buttons, {
+            cancelButtonLabel: cancelButtonLabel,
+            confirmButtonLabel: confirmButtonLabel,
+            onMouseDown: function onMouseDown() {
+              /** Prevents focus on edit button only if mouse is used to click button, but not when keyboard is used */
+              doNotFocusOnEditButton();
+            },
+            mode: mode,
+            onCancelClick: onCancelClick
+          }) : /** This is to allow Ctrl + Enter to submit without action buttons */
+          jsx("button", {
+            css: buttonStyles,
+            type: "submit"
+          }));
+        }))
+      );
+    });
+  }
+  return (/** Form, Field are used here only for the label and spacing */
+    jsx("form", null, jsx(Field, {
       name: "inlineEdit",
       label: label,
       defaultValue: "",
       isRequired: isRequired,
       key: "read-view" // used for reset to default value
-    }, renderReadView));
-  });
-  /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+    }, renderReadView))
+  );
 };
-
 var InlineEdit = function InlineEdit(props) {
   return jsx(GlobalTheme.Consumer, null, function (tokens) {
     var mode = tokens.mode;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.4.0",
+	"version": "12.4.1",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.4.0",
+  "version": "12.4.1",
   "description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"