@atlaskit/inline-edit 12.2.6 → 12.2.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/inline-edit
 
+## 12.2.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.2.7
+
+### Patch Changes
+
+- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+
 ## 12.2.6
 
 ### Patch Changes

package/dist/cjs/entry-points/inline-edit.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _inlineEdit.default;
   }
 });
-
 var _inlineEdit = _interopRequireDefault(require("../inline-edit"));

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _inlineEditableTextfield.default;
   }
 });
-
 var _inlineEditableTextfield = _interopRequireDefault(require("../inline-editable-textfield"));

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "default", {
     return _inlineEdit.default;
   }
 });
-
 var _inlineEdit = _interopRequireDefault(require("./inline-edit"));
-
 var _inlineEditableTextfield = _interopRequireDefault(require("./inline-editable-textfield"));

package/dist/cjs/inline-edit.js

@@ -1,46 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _Field = _interopRequireDefault(require("@atlaskit/form/Field"));
-
 var _Form = _interopRequireDefault(require("@atlaskit/form/Form"));
-
 var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
-
 var _buttons = _interopRequireDefault(require("./internal/buttons"));
-
 var _useButtonFocusHook2 = _interopRequireDefault(require("./internal/hooks/use-button-focus-hook"));
-
 var _readView = _interopRequireDefault(require("./internal/read-view"));
-
 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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var fieldStyles = (0, _react2.css)({
   maxWidth: '100%',
   position: 'relative'
@@ -51,71 +32,62 @@ var buttonStyles = (0, _react2.css)({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.2.6"
+  packageVersion: "12.2.8"
 };
-
 var noop = function noop() {};
-
 var InnerInlineEdit = function InnerInlineEdit(props) {
   var _props$startWithEditV = props.startWithEditViewOpen,
-      startWithEditViewOpen = _props$startWithEditV === void 0 ? false : _props$startWithEditV,
-      _props$keepEditViewOp = props.keepEditViewOpenOnBlur,
-      keepEditViewOpenOnBlur = _props$keepEditViewOp === void 0 ? false : _props$keepEditViewOp,
-      _props$hideActionButt = props.hideActionButtons,
-      hideActionButtons = _props$hideActionButt === void 0 ? false : _props$hideActionButt,
-      _props$isRequired = props.isRequired,
-      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-      _props$readViewFitCon = props.readViewFitContainerWidth,
-      readViewFitContainerWidth = _props$readViewFitCon === void 0 ? false : _props$readViewFitCon,
-      _props$editButtonLabe = props.editButtonLabel,
-      editButtonLabel = _props$editButtonLabe === void 0 ? 'Edit' : _props$editButtonLabe,
-      _props$confirmButtonL = props.confirmButtonLabel,
-      confirmButtonLabel = _props$confirmButtonL === void 0 ? 'Confirm' : _props$confirmButtonL,
-      _props$cancelButtonLa = props.cancelButtonLabel,
-      cancelButtonLabel = _props$cancelButtonLa === void 0 ? 'Cancel' : _props$cancelButtonLa,
-      defaultValue = props.defaultValue,
-      isEditing = props.isEditing,
-      label = props.label,
-      validate = props.validate,
-      readView = props.readView,
-      editView = props.editView,
-      analyticsContext = props.analyticsContext,
-      providedOnConfirm = props.onConfirm,
-      _props$onCancel = props.onCancel,
-      providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
-      _props$onEdit = props.onEdit,
-      providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit,
-      mode = props.mode;
+    startWithEditViewOpen = _props$startWithEditV === void 0 ? false : _props$startWithEditV,
+    _props$keepEditViewOp = props.keepEditViewOpenOnBlur,
+    keepEditViewOpenOnBlur = _props$keepEditViewOp === void 0 ? false : _props$keepEditViewOp,
+    _props$hideActionButt = props.hideActionButtons,
+    hideActionButtons = _props$hideActionButt === void 0 ? false : _props$hideActionButt,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    _props$readViewFitCon = props.readViewFitContainerWidth,
+    readViewFitContainerWidth = _props$readViewFitCon === void 0 ? false : _props$readViewFitCon,
+    _props$editButtonLabe = props.editButtonLabel,
+    editButtonLabel = _props$editButtonLabe === void 0 ? 'Edit' : _props$editButtonLabe,
+    _props$confirmButtonL = props.confirmButtonLabel,
+    confirmButtonLabel = _props$confirmButtonL === void 0 ? 'Confirm' : _props$confirmButtonL,
+    _props$cancelButtonLa = props.cancelButtonLabel,
+    cancelButtonLabel = _props$cancelButtonLa === void 0 ? 'Cancel' : _props$cancelButtonLa,
+    defaultValue = props.defaultValue,
+    isEditing = props.isEditing,
+    label = props.label,
+    validate = props.validate,
+    readView = props.readView,
+    editView = props.editView,
+    analyticsContext = props.analyticsContext,
+    providedOnConfirm = props.onConfirm,
+    _props$onCancel = props.onCancel,
+    providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
+    _props$onEdit = props.onEdit,
+    providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit,
+    mode = props.mode;
   var wasFocusReceivedSinceLastBlurRef = (0, _react.useRef)(false);
   var isControlled = typeof isEditing === 'undefined';
-
   var _useState = (0, _react.useState)(startWithEditViewOpen),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isEditingState = _useState2[0],
-      setEditingState = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isEditingState = _useState2[0],
+    setEditingState = _useState2[1];
   var timerRef = (0, _react.useRef)();
-
   var _useButtonFocusHook = (0, _useButtonFocusHook2.default)(isEditing, isEditingState),
-      editButtonRef = _useButtonFocusHook.editButtonRef,
-      editViewRef = _useButtonFocusHook.editViewRef,
-      shouldBeEditing = _useButtonFocusHook.shouldBeEditing,
-      doNotFocusOnEditButton = _useButtonFocusHook.doNotFocusOnEditButton;
-
+    editButtonRef = _useButtonFocusHook.editButtonRef,
+    editViewRef = _useButtonFocusHook.editViewRef,
+    shouldBeEditing = _useButtonFocusHook.shouldBeEditing,
+    doNotFocusOnEditButton = _useButtonFocusHook.doNotFocusOnEditButton;
   var onCancel = (0, _react.useCallback)(function () {
     if (isControlled) {
       setEditingState(false);
     }
-
     providedOnCancel();
   }, [isControlled, providedOnCancel]);
   var onEditRequested = (0, _react.useCallback)(function () {
     if (isControlled) {
       setEditingState(true);
     }
-
     providedOnEdit();
-
     if (shouldBeEditing && editViewRef.current) {
       editViewRef.current.focus();
     }
@@ -125,7 +97,6 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       if (isControlled) {
         setEditingState(false);
       }
-
       providedOnConfirm(value, analyticsEvent);
     },
     action: 'confirmed',
@@ -138,12 +109,12 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
   var tryAutoSubmitWhenBlur = (0, _react.useCallback)(function (isFieldInvalid, onSubmit, formRef) {
     if (!isFieldInvalid && !wasFocusReceivedSinceLastBlurRef.current && formRef.current) {
       doNotFocusOnEditButton();
-
       if (formRef.current.checkValidity()) {
         onSubmit();
       }
     }
   }, [doNotFocusOnEditButton]);
+
   /** If keepEditViewOpenOnBlur prop is set to false, will call confirmIfUnfocused() which
    *  confirms the value, if the focus is not transferred to the action buttons
    *
@@ -157,7 +128,6 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
    *  - focus on input first, and then use keyboard to `submit`
    *  - focus on input first, and then click anywhere else on the page (outside of edit view wrapper) to `submit` (auto save)
    */
-
   var onEditViewWrapperBlur = (0, _react.useCallback)(function (isFieldInvalid, onSubmit, formRef) {
     if (!keepEditViewOpenOnBlur) {
       wasFocusReceivedSinceLastBlurRef.current = false;
@@ -166,6 +136,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       }, 0);
     }
   }, [keepEditViewOpenOnBlur, tryAutoSubmitWhenBlur]);
+
   /** Gets called when focus is transferred to the editView, or action buttons
    *
    * There are three paths here the function can be called:
@@ -174,11 +145,9 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
    * - when a user use keyboard to tab into `editView`
    * - when a user use keyboard to tab into `submit` when they were on input field
    */
-
   var onEditViewWrapperFocus = (0, _react.useCallback)(function () {
     wasFocusReceivedSinceLastBlurRef.current = true;
   }, []);
-
   var renderReadView = function renderReadView() {
     return (0, _react2.jsx)(_readView.default, {
       editButtonLabel: editButtonLabel,
@@ -189,22 +158,20 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       readView: readView
     });
   };
-  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-
 
+  /* 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;
+      _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();
         }
@@ -218,10 +185,9 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       validate: validate,
       isRequired: isRequired,
       key: "edit-view" // used for reset to default value
-
     }, function (_ref2) {
       var fieldProps = _ref2.fieldProps,
-          error = _ref2.error;
+        error = _ref2.error;
       return (0, _react2.jsx)("div", {
         css: fieldStyles,
         onBlur: function onBlur() {
@@ -239,21 +205,18 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         },
         mode: mode,
         onCancelClick: onCancelClick
-      }) :
-      /** This is to allow Ctrl + Enter to submit without action buttons */
+      }) : /** 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 */
+    }) : /** Field is used here only for the label */
     (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 */
@@ -267,6 +230,5 @@ var InlineEdit = function InlineEdit(props) {
     }));
   });
 };
-
 var _default = InlineEdit;
 exports.default = _default;

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

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
-
 var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
-
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _inlineEdit = _interopRequireDefault(require("./inline-edit"));
-
 var _constants = require("./internal/constants");
-
 var _excluded = ["errorMessage", "isInvalid"];
 var errorIconContainerStyles = (0, _react.css)({
   paddingRight: _constants.gridSize - 2,
@@ -42,19 +31,18 @@ var readViewForTextFieldStyles = (0, _react.css)({
 var compactStyles = (0, _react.css)({
   padding: "".concat(_constants.gridSize / 2, "px ").concat(_constants.gridSize - 2, "px")
 });
-
 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;
+    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, {
     defaultValue: defaultValue,
     editView: function editView(_ref) {
       var errorMessage = _ref.errorMessage,
-          isInvalid = _ref.isInvalid,
-          props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+        isInvalid = _ref.isInvalid,
+        props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
       return (0, _react.jsx)(_inlineDialog.default, {
         isOpen: isInvalid,
         content: (0, _react.jsx)("div", {
@@ -82,6 +70,5 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
     }
   }));
 };
-
 var _default = InlineEditableTextfield;
 exports.default = _default;

package/dist/cjs/internal/buttons.js

@@ -1,25 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-
 var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
-
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("./constants");
-
 /** @jsx jsx */
+
 var buttonsContainerStyles = (0, _react.css)({
   display: 'flex',
   marginTop: _constants.gridSize - 2,
@@ -73,13 +66,12 @@ var buttonWrapperBaseStyles = (0, _react.css)({
     marginLeft: _constants.gridSize / 2
   }
 });
-
 var Buttons = function Buttons(_ref) {
   var mode = _ref.mode,
-      confirmButtonLabel = _ref.confirmButtonLabel,
-      cancelButtonLabel = _ref.cancelButtonLabel,
-      onMouseDown = _ref.onMouseDown,
-      onCancelClick = _ref.onCancelClick;
+    confirmButtonLabel = _ref.confirmButtonLabel,
+    cancelButtonLabel = _ref.cancelButtonLabel,
+    onMouseDown = _ref.onMouseDown,
+    onCancelClick = _ref.onCancelClick;
   return (0, _react.jsx)("div", {
     css: buttonsContainerStyles
   }, (0, _react.jsx)("div", {
@@ -106,6 +98,5 @@ var Buttons = function Buttons(_ref) {
     onMouseDown: onMouseDown
   })));
 };
-
 var _default = Buttons;
 exports.default = _default;

package/dist/cjs/internal/constants.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.gridSize = exports.fontSize = exports.borderRadius = void 0;
-
 var _constants = require("@atlaskit/theme/constants");
-
 var gridSize = (0, _constants.gridSize)();
 exports.gridSize = gridSize;
 var fontSize = (0, _constants.fontSize)();

package/dist/cjs/internal/hooks/use-button-focus-hook.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var usePrevious = function usePrevious(value) {
   var ref = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
@@ -14,7 +12,6 @@ var usePrevious = function usePrevious(value) {
   }, [value]);
   return ref.current;
 };
-
 var useButtonFocusHook = function useButtonFocusHook(isEditing, isEditingState) {
   var editButtonRef = (0, _react.useRef)(null);
   var editViewRef = (0, _react.useRef)();
@@ -42,11 +39,9 @@ var useButtonFocusHook = function useButtonFocusHook(isEditing, isEditingState)
       }
     }
   }, [prevIsEditing, shouldBeEditing]);
-
   var doNotFocusOnEditButton = function doNotFocusOnEditButton() {
     return preventFocusOnEditButtonRef.current = true;
   };
-
   return {
     editButtonRef: editButtonRef,
     editViewRef: editViewRef,
@@ -54,6 +49,5 @@ var useButtonFocusHook = function useButtonFocusHook(isEditing, isEditingState)
     doNotFocusOnEditButton: doNotFocusOnEditButton
   };
 };
-
 var _default = useButtonFocusHook;
 exports.default = _default;

package/dist/cjs/internal/read-view.js

@@ -1,34 +1,25 @@
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("./constants");
-
 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 readViewContainerStyles = (0, _react2.css)({
   lineHeight: 1
 });
 var editButtonStyles = (0, _react2.css)({
   display: 'block',
-  // TODO Delete this comment after verifying spacing token -> previous value `'0'`
-  margin: "var(--ds-scale-0, 0px)",
-  // TODO Delete this comment after verifying spacing token -> previous value `'0'`
-  padding: "var(--ds-scale-0, 0px)",
+  margin: "var(--ds-space-0, 0px)",
+  padding: "var(--ds-space-0, 0px)",
   appearance: 'none',
   background: 'transparent',
   border: 0,
@@ -54,34 +45,29 @@ var readViewFitContainerWidthStyles = (0, _react2.css)({
   width: '100%'
 });
 var DRAG_THRESHOLD = 5;
-
 var ReadView = function ReadView(_ref) {
   var editButtonLabel = _ref.editButtonLabel,
-      onEditRequested = _ref.onEditRequested,
-      postReadViewClick = _ref.postReadViewClick,
-      editButtonRef = _ref.editButtonRef,
-      readViewFitContainerWidth = _ref.readViewFitContainerWidth,
-      readView = _ref.readView;
+    onEditRequested = _ref.onEditRequested,
+    postReadViewClick = _ref.postReadViewClick,
+    editButtonRef = _ref.editButtonRef,
+    readViewFitContainerWidth = _ref.readViewFitContainerWidth,
+    readView = _ref.readView;
   var startX = (0, _react.useRef)(0);
   var startY = (0, _react.useRef)(0);
-
   var mouseHasMovedAfterMouseDown = function mouseHasMovedAfterMouseDown(event) {
     return Math.abs(startX.current - event.clientX) >= DRAG_THRESHOLD || Math.abs(startY.current - event.clientY) >= DRAG_THRESHOLD;
   };
-
   var onReadViewClick = function onReadViewClick(event) {
     var element = event.target;
     /** If a link is clicked in the read view, default action should be taken */
-
     if (element.tagName.toLowerCase() !== 'a' && !mouseHasMovedAfterMouseDown(event)) {
       event.preventDefault();
       onEditRequested();
       postReadViewClick();
     }
   };
-  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
-
 
+  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
   return (0, _react2.jsx)("div", {
     css: readViewContainerStyles
   }, (0, _react2.jsx)("button", {
@@ -101,6 +87,5 @@ var ReadView = function ReadView(_ref) {
   }, readView()));
   /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
 };
-
 var _default = ReadView;
 exports.default = _default;

package/dist/cjs/version.json

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

package/dist/es2019/inline-edit.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React, { useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -20,11 +19,9 @@ const buttonStyles = css({
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.2.6"
+  packageVersion: "12.2.8"
 };
-
 const noop = () => {};
-
 const InnerInlineEdit = props => {
   const {
     startWithEditViewOpen = false,
@@ -61,16 +58,13 @@ const InnerInlineEdit = props => {
     if (isControlled) {
       setEditingState(false);
     }
-
     providedOnCancel();
   }, [isControlled, providedOnCancel]);
   const onEditRequested = useCallback(() => {
     if (isControlled) {
       setEditingState(true);
     }
-
     providedOnEdit();
-
     if (shouldBeEditing && editViewRef.current) {
       editViewRef.current.focus();
     }
@@ -80,7 +74,6 @@ const InnerInlineEdit = props => {
       if (isControlled) {
         setEditingState(false);
       }
-
       providedOnConfirm(value, analyticsEvent);
     },
     action: 'confirmed',
@@ -94,12 +87,12 @@ const InnerInlineEdit = props => {
   const tryAutoSubmitWhenBlur = useCallback((isFieldInvalid, onSubmit, formRef) => {
     if (!isFieldInvalid && !wasFocusReceivedSinceLastBlurRef.current && formRef.current) {
       doNotFocusOnEditButton();
-
       if (formRef.current.checkValidity()) {
         onSubmit();
       }
     }
   }, [doNotFocusOnEditButton]);
+
   /** If keepEditViewOpenOnBlur prop is set to false, will call confirmIfUnfocused() which
    *  confirms the value, if the focus is not transferred to the action buttons
    *
@@ -113,13 +106,13 @@ const InnerInlineEdit = props => {
    *  - focus on input first, and then use keyboard to `submit`
    *  - focus on input first, and then click anywhere else on the page (outside of edit view wrapper) to `submit` (auto save)
    */
-
   const onEditViewWrapperBlur = useCallback((isFieldInvalid, onSubmit, formRef) => {
     if (!keepEditViewOpenOnBlur) {
       wasFocusReceivedSinceLastBlurRef.current = false;
       timerRef.current = setTimeout(() => tryAutoSubmitWhenBlur(isFieldInvalid, onSubmit, formRef), 0);
     }
   }, [keepEditViewOpenOnBlur, tryAutoSubmitWhenBlur]);
+
   /** Gets called when focus is transferred to the editView, or action buttons
    *
    * There are three paths here the function can be called:
@@ -128,11 +121,9 @@ const InnerInlineEdit = props => {
    * - when a user use keyboard to tab into `editView`
    * - when a user use keyboard to tab into `submit` when they were on input field
    */
-
   const onEditViewWrapperFocus = useCallback(() => {
     wasFocusReceivedSinceLastBlurRef.current = true;
   }, []);
-
   const renderReadView = () => {
     return jsx(ReadView, {
       editButtonLabel: editButtonLabel,
@@ -143,9 +134,8 @@ const InnerInlineEdit = props => {
       readView: readView
     });
   };
-  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-
 
+  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
   return jsx(Form, {
     onSubmit: data => onConfirm(data.inlineEdit)
   }, ({
@@ -157,7 +147,6 @@ const InnerInlineEdit = props => {
   }) => jsx("form", {
     onKeyDown: e => {
       onKeyDown(e);
-
       if (e.key === 'Esc' || e.key === 'Escape') {
         onCancel();
       }
@@ -171,7 +160,6 @@ const InnerInlineEdit = props => {
     validate: validate,
     isRequired: isRequired,
     key: "edit-view" // used for reset to default value
-
   }, ({
     fieldProps,
     error
@@ -181,7 +169,8 @@ const InnerInlineEdit = props => {
       onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
     },
     onFocus: onEditViewWrapperFocus
-  }, editView({ ...fieldProps,
+  }, editView({
+    ...fieldProps,
     errorMessage: error
   }, editViewRef), !hideActionButtons ? jsx(Buttons, {
     cancelButtonLabel: cancelButtonLabel,
@@ -192,20 +181,17 @@ const InnerInlineEdit = props => {
     },
     mode: mode,
     onCancelClick: onCancelClick
-  }) :
-  /** This is to allow Ctrl + Enter to submit without action buttons */
+  }) : /** 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 */
+  }))) : /** 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 */
 };
@@ -218,5 +204,4 @@ const InlineEdit = props => {
     }));
   });
 };
-
 export default InlineEdit;

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
@@ -24,7 +23,6 @@ const readViewForTextFieldStyles = css({
 const compactStyles = css({
   padding: `${gridSize / 2}px ${gridSize - 2}px`
 });
-
 const InlineEditableTextfield = props => {
   const {
     isCompact = false,
@@ -62,5 +60,4 @@ const InlineEditableTextfield = props => {
     }, defaultValue || placeholder)
   }));
 };
-
 export default InlineEditableTextfield;

package/dist/es2019/internal/buttons.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
@@ -58,7 +59,6 @@ const buttonWrapperBaseStyles = css({
     marginLeft: gridSize / 2
   }
 });
-
 const Buttons = ({
   mode,
   confirmButtonLabel,
@@ -92,5 +92,4 @@ const Buttons = ({
     onMouseDown: onMouseDown
   })));
 };
-
 export default Buttons;

package/dist/es2019/internal/hooks/use-button-focus-hook.js

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from 'react';
-
 const usePrevious = value => {
   const ref = useRef();
   useEffect(() => {
@@ -7,7 +6,6 @@ const usePrevious = value => {
   }, [value]);
   return ref.current;
 };
-
 const useButtonFocusHook = (isEditing, isEditingState) => {
   const editButtonRef = useRef(null);
   const editViewRef = useRef();
@@ -35,9 +33,7 @@ const useButtonFocusHook = (isEditing, isEditingState) => {
       }
     }
   }, [prevIsEditing, shouldBeEditing]);
-
   const doNotFocusOnEditButton = () => preventFocusOnEditButtonRef.current = true;
-
   return {
     editButtonRef,
     editViewRef,
@@ -45,5 +41,4 @@ const useButtonFocusHook = (isEditing, isEditingState) => {
     doNotFocusOnEditButton
   };
 };
-
 export default useButtonFocusHook;

package/dist/es2019/internal/read-view.js

@@ -8,10 +8,8 @@ const readViewContainerStyles = css({
 });
 const editButtonStyles = css({
   display: 'block',
-  // TODO Delete this comment after verifying spacing token -> previous value `'0'`
-  margin: "var(--ds-scale-0, 0px)",
-  // TODO Delete this comment after verifying spacing token -> previous value `'0'`
-  padding: "var(--ds-scale-0, 0px)",
+  margin: "var(--ds-space-0, 0px)",
+  padding: "var(--ds-space-0, 0px)",
   appearance: 'none',
   background: 'transparent',
   border: 0,
@@ -37,7 +35,6 @@ const readViewFitContainerWidthStyles = css({
   width: '100%'
 });
 const DRAG_THRESHOLD = 5;
-
 const ReadView = ({
   editButtonLabel,
   onEditRequested,
@@ -48,24 +45,20 @@ const ReadView = ({
 }) => {
   const startX = useRef(0);
   const startY = useRef(0);
-
   const mouseHasMovedAfterMouseDown = event => {
     return Math.abs(startX.current - event.clientX) >= DRAG_THRESHOLD || Math.abs(startY.current - event.clientY) >= DRAG_THRESHOLD;
   };
-
   const onReadViewClick = event => {
     const element = event.target;
     /** If a link is clicked in the read view, default action should be taken */
-
     if (element.tagName.toLowerCase() !== 'a' && !mouseHasMovedAfterMouseDown(event)) {
       event.preventDefault();
       onEditRequested();
       postReadViewClick();
     }
   };
-  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
-
 
+  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
   return jsx("div", {
     css: readViewContainerStyles
   }, jsx("button", {

package/dist/es2019/version.json

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

package/dist/esm/inline-edit.js

@@ -1,11 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /** @jsx jsx */
 import React, { useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -26,71 +23,62 @@ var buttonStyles = css({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.2.6"
+  packageVersion: "12.2.8"
 };
-
 var noop = function noop() {};
-
 var InnerInlineEdit = function InnerInlineEdit(props) {
   var _props$startWithEditV = props.startWithEditViewOpen,
-      startWithEditViewOpen = _props$startWithEditV === void 0 ? false : _props$startWithEditV,
-      _props$keepEditViewOp = props.keepEditViewOpenOnBlur,
-      keepEditViewOpenOnBlur = _props$keepEditViewOp === void 0 ? false : _props$keepEditViewOp,
-      _props$hideActionButt = props.hideActionButtons,
-      hideActionButtons = _props$hideActionButt === void 0 ? false : _props$hideActionButt,
-      _props$isRequired = props.isRequired,
-      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-      _props$readViewFitCon = props.readViewFitContainerWidth,
-      readViewFitContainerWidth = _props$readViewFitCon === void 0 ? false : _props$readViewFitCon,
-      _props$editButtonLabe = props.editButtonLabel,
-      editButtonLabel = _props$editButtonLabe === void 0 ? 'Edit' : _props$editButtonLabe,
-      _props$confirmButtonL = props.confirmButtonLabel,
-      confirmButtonLabel = _props$confirmButtonL === void 0 ? 'Confirm' : _props$confirmButtonL,
-      _props$cancelButtonLa = props.cancelButtonLabel,
-      cancelButtonLabel = _props$cancelButtonLa === void 0 ? 'Cancel' : _props$cancelButtonLa,
-      defaultValue = props.defaultValue,
-      isEditing = props.isEditing,
-      label = props.label,
-      validate = props.validate,
-      readView = props.readView,
-      editView = props.editView,
-      analyticsContext = props.analyticsContext,
-      providedOnConfirm = props.onConfirm,
-      _props$onCancel = props.onCancel,
-      providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
-      _props$onEdit = props.onEdit,
-      providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit,
-      mode = props.mode;
+    startWithEditViewOpen = _props$startWithEditV === void 0 ? false : _props$startWithEditV,
+    _props$keepEditViewOp = props.keepEditViewOpenOnBlur,
+    keepEditViewOpenOnBlur = _props$keepEditViewOp === void 0 ? false : _props$keepEditViewOp,
+    _props$hideActionButt = props.hideActionButtons,
+    hideActionButtons = _props$hideActionButt === void 0 ? false : _props$hideActionButt,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    _props$readViewFitCon = props.readViewFitContainerWidth,
+    readViewFitContainerWidth = _props$readViewFitCon === void 0 ? false : _props$readViewFitCon,
+    _props$editButtonLabe = props.editButtonLabel,
+    editButtonLabel = _props$editButtonLabe === void 0 ? 'Edit' : _props$editButtonLabe,
+    _props$confirmButtonL = props.confirmButtonLabel,
+    confirmButtonLabel = _props$confirmButtonL === void 0 ? 'Confirm' : _props$confirmButtonL,
+    _props$cancelButtonLa = props.cancelButtonLabel,
+    cancelButtonLabel = _props$cancelButtonLa === void 0 ? 'Cancel' : _props$cancelButtonLa,
+    defaultValue = props.defaultValue,
+    isEditing = props.isEditing,
+    label = props.label,
+    validate = props.validate,
+    readView = props.readView,
+    editView = props.editView,
+    analyticsContext = props.analyticsContext,
+    providedOnConfirm = props.onConfirm,
+    _props$onCancel = props.onCancel,
+    providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
+    _props$onEdit = props.onEdit,
+    providedOnEdit = _props$onEdit === void 0 ? noop : _props$onEdit,
+    mode = props.mode;
   var wasFocusReceivedSinceLastBlurRef = useRef(false);
   var isControlled = typeof isEditing === 'undefined';
-
   var _useState = useState(startWithEditViewOpen),
-      _useState2 = _slicedToArray(_useState, 2),
-      isEditingState = _useState2[0],
-      setEditingState = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditingState = _useState2[0],
+    setEditingState = _useState2[1];
   var timerRef = useRef();
-
   var _useButtonFocusHook = useButtonFocusHook(isEditing, isEditingState),
-      editButtonRef = _useButtonFocusHook.editButtonRef,
-      editViewRef = _useButtonFocusHook.editViewRef,
-      shouldBeEditing = _useButtonFocusHook.shouldBeEditing,
-      doNotFocusOnEditButton = _useButtonFocusHook.doNotFocusOnEditButton;
-
+    editButtonRef = _useButtonFocusHook.editButtonRef,
+    editViewRef = _useButtonFocusHook.editViewRef,
+    shouldBeEditing = _useButtonFocusHook.shouldBeEditing,
+    doNotFocusOnEditButton = _useButtonFocusHook.doNotFocusOnEditButton;
   var onCancel = useCallback(function () {
     if (isControlled) {
       setEditingState(false);
     }
-
     providedOnCancel();
   }, [isControlled, providedOnCancel]);
   var onEditRequested = useCallback(function () {
     if (isControlled) {
       setEditingState(true);
     }
-
     providedOnEdit();
-
     if (shouldBeEditing && editViewRef.current) {
       editViewRef.current.focus();
     }
@@ -100,7 +88,6 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       if (isControlled) {
         setEditingState(false);
       }
-
       providedOnConfirm(value, analyticsEvent);
     },
     action: 'confirmed',
@@ -113,12 +100,12 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
   var tryAutoSubmitWhenBlur = useCallback(function (isFieldInvalid, onSubmit, formRef) {
     if (!isFieldInvalid && !wasFocusReceivedSinceLastBlurRef.current && formRef.current) {
       doNotFocusOnEditButton();
-
       if (formRef.current.checkValidity()) {
         onSubmit();
       }
     }
   }, [doNotFocusOnEditButton]);
+
   /** If keepEditViewOpenOnBlur prop is set to false, will call confirmIfUnfocused() which
    *  confirms the value, if the focus is not transferred to the action buttons
    *
@@ -132,7 +119,6 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
    *  - focus on input first, and then use keyboard to `submit`
    *  - focus on input first, and then click anywhere else on the page (outside of edit view wrapper) to `submit` (auto save)
    */
-
   var onEditViewWrapperBlur = useCallback(function (isFieldInvalid, onSubmit, formRef) {
     if (!keepEditViewOpenOnBlur) {
       wasFocusReceivedSinceLastBlurRef.current = false;
@@ -141,6 +127,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       }, 0);
     }
   }, [keepEditViewOpenOnBlur, tryAutoSubmitWhenBlur]);
+
   /** Gets called when focus is transferred to the editView, or action buttons
    *
    * There are three paths here the function can be called:
@@ -149,11 +136,9 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
    * - when a user use keyboard to tab into `editView`
    * - when a user use keyboard to tab into `submit` when they were on input field
    */
-
   var onEditViewWrapperFocus = useCallback(function () {
     wasFocusReceivedSinceLastBlurRef.current = true;
   }, []);
-
   var renderReadView = function renderReadView() {
     return jsx(ReadView, {
       editButtonLabel: editButtonLabel,
@@ -164,22 +149,20 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       readView: readView
     });
   };
-  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-
 
+  /* 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;
+      _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();
         }
@@ -193,10 +176,9 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       validate: validate,
       isRequired: isRequired,
       key: "edit-view" // used for reset to default value
-
     }, function (_ref2) {
       var fieldProps = _ref2.fieldProps,
-          error = _ref2.error;
+        error = _ref2.error;
       return jsx("div", {
         css: fieldStyles,
         onBlur: function onBlur() {
@@ -214,21 +196,18 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         },
         mode: mode,
         onCancelClick: onCancelClick
-      }) :
-      /** This is to allow Ctrl + Enter to submit without action buttons */
+      }) : /** 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 */
+    }) : /** 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 */
@@ -242,5 +221,4 @@ var InlineEdit = function InlineEdit(props) {
     }));
   });
 };
-
 export default InlineEdit;

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["errorMessage", "isInvalid"];
-
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
@@ -26,20 +25,18 @@ var readViewForTextFieldStyles = css({
 var compactStyles = css({
   padding: "".concat(gridSize / 2, "px ").concat(gridSize - 2, "px")
 });
-
 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;
+    isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
+    defaultValue = props.defaultValue,
+    placeholder = props.placeholder,
+    testId = props.testId;
   return jsx(InlineEdit, _extends({}, props, {
     defaultValue: defaultValue,
     editView: function editView(_ref) {
       var errorMessage = _ref.errorMessage,
-          isInvalid = _ref.isInvalid,
-          props = _objectWithoutProperties(_ref, _excluded);
-
+        isInvalid = _ref.isInvalid,
+        props = _objectWithoutProperties(_ref, _excluded);
       return jsx(InlineDialog, {
         isOpen: isInvalid,
         content: jsx("div", {
@@ -67,5 +64,4 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
     }
   }));
 };
-
 export default InlineEditableTextfield;

package/dist/esm/internal/buttons.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
@@ -58,13 +59,12 @@ var buttonWrapperBaseStyles = css({
     marginLeft: gridSize / 2
   }
 });
-
 var Buttons = function Buttons(_ref) {
   var mode = _ref.mode,
-      confirmButtonLabel = _ref.confirmButtonLabel,
-      cancelButtonLabel = _ref.cancelButtonLabel,
-      onMouseDown = _ref.onMouseDown,
-      onCancelClick = _ref.onCancelClick;
+    confirmButtonLabel = _ref.confirmButtonLabel,
+    cancelButtonLabel = _ref.cancelButtonLabel,
+    onMouseDown = _ref.onMouseDown,
+    onCancelClick = _ref.onCancelClick;
   return jsx("div", {
     css: buttonsContainerStyles
   }, jsx("div", {
@@ -91,5 +91,4 @@ var Buttons = function Buttons(_ref) {
     onMouseDown: onMouseDown
   })));
 };
-
 export default Buttons;

package/dist/esm/internal/hooks/use-button-focus-hook.js

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from 'react';
-
 var usePrevious = function usePrevious(value) {
   var ref = useRef();
   useEffect(function () {
@@ -7,7 +6,6 @@ var usePrevious = function usePrevious(value) {
   }, [value]);
   return ref.current;
 };
-
 var useButtonFocusHook = function useButtonFocusHook(isEditing, isEditingState) {
   var editButtonRef = useRef(null);
   var editViewRef = useRef();
@@ -35,11 +33,9 @@ var useButtonFocusHook = function useButtonFocusHook(isEditing, isEditingState)
       }
     }
   }, [prevIsEditing, shouldBeEditing]);
-
   var doNotFocusOnEditButton = function doNotFocusOnEditButton() {
     return preventFocusOnEditButtonRef.current = true;
   };
-
   return {
     editButtonRef: editButtonRef,
     editViewRef: editViewRef,
@@ -47,5 +43,4 @@ var useButtonFocusHook = function useButtonFocusHook(isEditing, isEditingState)
     doNotFocusOnEditButton: doNotFocusOnEditButton
   };
 };
-
 export default useButtonFocusHook;

package/dist/esm/internal/read-view.js

@@ -8,10 +8,8 @@ var readViewContainerStyles = css({
 });
 var editButtonStyles = css({
   display: 'block',
-  // TODO Delete this comment after verifying spacing token -> previous value `'0'`
-  margin: "var(--ds-scale-0, 0px)",
-  // TODO Delete this comment after verifying spacing token -> previous value `'0'`
-  padding: "var(--ds-scale-0, 0px)",
+  margin: "var(--ds-space-0, 0px)",
+  padding: "var(--ds-space-0, 0px)",
   appearance: 'none',
   background: 'transparent',
   border: 0,
@@ -37,34 +35,29 @@ var readViewFitContainerWidthStyles = css({
   width: '100%'
 });
 var DRAG_THRESHOLD = 5;
-
 var ReadView = function ReadView(_ref) {
   var editButtonLabel = _ref.editButtonLabel,
-      onEditRequested = _ref.onEditRequested,
-      postReadViewClick = _ref.postReadViewClick,
-      editButtonRef = _ref.editButtonRef,
-      readViewFitContainerWidth = _ref.readViewFitContainerWidth,
-      readView = _ref.readView;
+    onEditRequested = _ref.onEditRequested,
+    postReadViewClick = _ref.postReadViewClick,
+    editButtonRef = _ref.editButtonRef,
+    readViewFitContainerWidth = _ref.readViewFitContainerWidth,
+    readView = _ref.readView;
   var startX = useRef(0);
   var startY = useRef(0);
-
   var mouseHasMovedAfterMouseDown = function mouseHasMovedAfterMouseDown(event) {
     return Math.abs(startX.current - event.clientX) >= DRAG_THRESHOLD || Math.abs(startY.current - event.clientY) >= DRAG_THRESHOLD;
   };
-
   var onReadViewClick = function onReadViewClick(event) {
     var element = event.target;
     /** If a link is clicked in the read view, default action should be taken */
-
     if (element.tagName.toLowerCase() !== 'a' && !mouseHasMovedAfterMouseDown(event)) {
       event.preventDefault();
       onEditRequested();
       postReadViewClick();
     }
   };
-  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
-
 
+  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
   return jsx("div", {
     css: readViewContainerStyles
   }, jsx("button", {

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.2.6",
+  "version": "12.2.8",
   "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/"
@@ -33,7 +33,7 @@
     "@atlaskit/inline-dialog": "^13.4.0",
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -44,7 +44,7 @@
     "@atlaskit/datetime-picker": "^12.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/select": "^16.0.0",
+    "@atlaskit/select": "^16.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tag": "^11.4.0",
     "@atlaskit/tag-group": "^10.1.0",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/inline-edit"