@atlaskit/inline-edit 12.3.4 → 12.3.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/inline-edit
 
+## 12.3.5
+
+### Patch Changes
+
+- [`7257459df07`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7257459df07) - Fixed a regression: onCancel in InlinedEditableTextfield now resets the editable input to the defaultValue
+
 ## 12.3.4
 
 ### Patch 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.3.4"
+  packageVersion: "12.3.5"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {

package/dist/cjs/inline-editable-textfield.js

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
@@ -16,11 +17,11 @@ var _inlineEdit = _interopRequireDefault(require("./inline-edit"));
 var _constants = require("./internal/constants");
 var _excluded = ["errorMessage", "isInvalid"];
 /** @jsx jsx */
-var errorIconContainerStyles = (0, _react.css)({
+var errorIconContainerStyles = (0, _react2.css)({
   paddingRight: "var(--ds-space-075, 6px)",
   lineHeight: '100%'
 });
-var readViewForTextFieldStyles = (0, _react.css)({
+var readViewForTextFieldStyles = (0, _react2.css)({
   display: 'flex',
   maxWidth: '100%',
   minHeight: "".concat(8 * 2.5 / _constants.fontSize, "em"),
@@ -29,31 +30,43 @@ var readViewForTextFieldStyles = (0, _react.css)({
   lineHeight: 8 * 2.5 / _constants.fontSize,
   wordBreak: 'break-word'
 });
-var compactStyles = (0, _react.css)({
+var compactStyles = (0, _react2.css)({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
 });
+var noop = function noop() {};
 var InlineEditableTextfield = function InlineEditableTextfield(props) {
   var _props$isCompact = props.isCompact,
     isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
     defaultValue = props.defaultValue,
     placeholder = props.placeholder,
-    testId = props.testId;
-  return (0, _react.jsx)(_inlineEdit.default, (0, _extends2.default)({}, props, {
+    testId = props.testId,
+    _props$onCancel = props.onCancel,
+    providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel;
+  var textFieldRef = (0, _react.useRef)();
+  var onCancel = (0, _react.useCallback)(function () {
+    if (textFieldRef.current) {
+      textFieldRef.current.value = defaultValue || '';
+    }
+    providedOnCancel();
+  }, [defaultValue, providedOnCancel]);
+  return (0, _react2.jsx)(_inlineEdit.default, (0, _extends2.default)({}, props, {
+    onCancel: onCancel,
     defaultValue: defaultValue,
     editView: function editView(_ref) {
       var errorMessage = _ref.errorMessage,
         isInvalid = _ref.isInvalid,
         props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-      return (0, _react.jsx)(_inlineDialog.default, {
+      return (0, _react2.jsx)(_inlineDialog.default, {
         isOpen: isInvalid,
-        content: (0, _react.jsx)("div", {
+        content: (0, _react2.jsx)("div", {
           id: "error-message"
         }, errorMessage),
         placement: "right"
-      }, (0, _react.jsx)(_textfield.default, (0, _extends2.default)({}, props, {
-        elemAfterInput: isInvalid && (0, _react.jsx)("div", {
+      }, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, props, {
+        ref: textFieldRef,
+        elemAfterInput: isInvalid && (0, _react2.jsx)("div", {
           css: errorIconContainerStyles
-        }, (0, _react.jsx)(_error.default, {
+        }, (0, _react2.jsx)(_error.default, {
           label: "error",
           primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
         })),
@@ -63,7 +76,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
       })));
     },
     readView: function readView() {
-      return (0, _react.jsx)("div", {
+      return (0, _react2.jsx)("div", {
         css: [readViewForTextFieldStyles, isCompact && compactStyles],
         "data-compact": isCompact,
         "data-testid": testId && "read-view-".concat(testId)

package/dist/cjs/internal/buttons.js

@@ -26,15 +26,15 @@ var buttonsContainerStyles = (0, _react.css)({
 var buttonWrapperElevationDarkStyles = (0, _react.css)({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")"),
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.DN70, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.DN60, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(_colors.B75, ")"),
     color: "var(--ds-text, ".concat(_colors.B400, ")")
@@ -43,15 +43,15 @@ var buttonWrapperElevationDarkStyles = (0, _react.css)({
 var buttonWrapperElevationLightStyles = (0, _react.css)({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20A, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.N30A, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
     color: "var(--ds-text, ".concat(_colors.B400, ")")

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.3.4",
+	"version": "12.3.5",
 	"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.3.4"
+  packageVersion: "12.3.5"
 };
 const noop = () => {};
 const InnerInlineEdit = props => {

package/dist/es2019/inline-editable-textfield.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
+import { useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
@@ -23,14 +24,24 @@ const readViewForTextFieldStyles = css({
 const compactStyles = css({
   padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`
 });
+const noop = () => {};
 const InlineEditableTextfield = props => {
   const {
     isCompact = false,
     defaultValue,
     placeholder,
-    testId
+    testId,
+    onCancel: providedOnCancel = noop
   } = props;
+  const textFieldRef = useRef();
+  const onCancel = useCallback(() => {
+    if (textFieldRef.current) {
+      textFieldRef.current.value = defaultValue || '';
+    }
+    providedOnCancel();
+  }, [defaultValue, providedOnCancel]);
   return jsx(InlineEdit, _extends({}, props, {
+    onCancel: onCancel,
     defaultValue: defaultValue,
     editView: ({
       errorMessage,
@@ -43,6 +54,7 @@ const InlineEditableTextfield = props => {
       }, errorMessage),
       placement: "right"
     }, jsx(Textfield, _extends({}, props, {
+      ref: textFieldRef,
       elemAfterInput: isInvalid && jsx("div", {
         css: errorIconContainerStyles
       }, jsx(ErrorIcon, {

package/dist/es2019/internal/buttons.js

@@ -19,15 +19,15 @@ const buttonsContainerStyles = css({
 const buttonWrapperElevationDarkStyles = css({
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`,
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: `var(--ds-surface-overlay, ${DN70})`
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: `var(--ds-surface-overlay-hovered, ${DN60})`
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: `var(--ds-surface-overlay-pressed, ${B75})`,
     color: `var(--ds-text, ${B400})`
@@ -36,15 +36,15 @@ const buttonWrapperElevationDarkStyles = css({
 const buttonWrapperElevationLightStyles = css({
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: `var(--ds-surface-overlay, ${N20A})`
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: `var(--ds-surface-overlay-hovered, ${N30A})`
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
     color: `var(--ds-text, ${B400})`

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-edit",
-	"version": "12.3.4",
+	"version": "12.3.5",
 	"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.3.4"
+  packageVersion: "12.3.5"
 };
 var noop = function noop() {};
 var InnerInlineEdit = function InnerInlineEdit(props) {

package/dist/esm/inline-editable-textfield.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["errorMessage", "isInvalid"];
 /** @jsx jsx */
+import { useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
@@ -25,13 +26,24 @@ var readViewForTextFieldStyles = css({
 var compactStyles = css({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
 });
+var noop = function noop() {};
 var InlineEditableTextfield = function InlineEditableTextfield(props) {
   var _props$isCompact = props.isCompact,
     isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
     defaultValue = props.defaultValue,
     placeholder = props.placeholder,
-    testId = props.testId;
+    testId = props.testId,
+    _props$onCancel = props.onCancel,
+    providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel;
+  var textFieldRef = useRef();
+  var onCancel = useCallback(function () {
+    if (textFieldRef.current) {
+      textFieldRef.current.value = defaultValue || '';
+    }
+    providedOnCancel();
+  }, [defaultValue, providedOnCancel]);
   return jsx(InlineEdit, _extends({}, props, {
+    onCancel: onCancel,
     defaultValue: defaultValue,
     editView: function editView(_ref) {
       var errorMessage = _ref.errorMessage,
@@ -44,6 +56,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
         }, errorMessage),
         placement: "right"
       }, jsx(Textfield, _extends({}, props, {
+        ref: textFieldRef,
         elemAfterInput: isInvalid && jsx("div", {
           css: errorIconContainerStyles
         }, jsx(ErrorIcon, {

package/dist/esm/internal/buttons.js

@@ -19,15 +19,15 @@ var buttonsContainerStyles = css({
 var buttonWrapperElevationDarkStyles = css({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")"),
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: "var(--ds-surface-overlay, ".concat(DN70, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(DN60, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(B75, ")"),
     color: "var(--ds-text, ".concat(B400, ")")
@@ -36,15 +36,15 @@ var buttonWrapperElevationDarkStyles = css({
 var buttonWrapperElevationLightStyles = css({
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
   // These buttons are floating, so they need an override to overlay interaction states
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button': {
     backgroundColor: "var(--ds-surface-overlay, ".concat(N20A, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:hover': {
     backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(N30A, ")")
   },
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > button:active': {
     backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
     color: "var(--ds-text, ".concat(B400, ")")

package/dist/esm/version.json

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

package/dist/types/inline-editable-textfield.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { InlineEditableTextfieldProps } from './types';
 declare const InlineEditableTextfield: (props: InlineEditableTextfieldProps) => jsx.JSX.Element;

package/dist/types-ts4.5/inline-editable-textfield.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { InlineEditableTextfieldProps } from './types';
 declare const InlineEditableTextfield: (props: InlineEditableTextfieldProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.3.4",
+  "version": "12.3.5",
   "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/"
@@ -38,9 +38,9 @@
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/inline-dialog": "^13.6.0",
-    "@atlaskit/textfield": "^5.5.0",
+    "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },