@atlaskit/inline-edit 12.1.14 → 12.2.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/inline-edit
 
+## 12.2.1
+
+### Patch Changes
+
+- [`be93a207731`](https://bitbucket.org/atlassian/atlassian-frontend/commits/be93a207731) - Action buttons now use interactive elevation design tokens. There is no change to their appearance when design tokens are not enabled.
+
+## 12.2.0
+
+### Minor Changes
+
+- [`b52ffa29d19`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b52ffa29d19) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.14
 
 ### Patch Changes

package/dist/cjs/inline-edit.js

@@ -17,7 +17,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -41,17 +41,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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, _core.css)({
+var fieldStyles = (0, _react2.css)({
   maxWidth: '100%',
   position: 'relative'
 });
-var buttonStyles = (0, _core.css)({
+var buttonStyles = (0, _react2.css)({
   display: 'none'
 });
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.1.14"
+  packageVersion: "12.2.1"
 };
 
 var noop = function noop() {};
@@ -180,7 +180,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
   }, []);
 
   var renderReadView = function renderReadView() {
-    return (0, _core.jsx)(_readView.default, {
+    return (0, _react2.jsx)(_readView.default, {
       editButtonLabel: editButtonLabel,
       onEditRequested: onEditRequested,
       postReadViewClick: doNotFocusOnEditButton,
@@ -192,7 +192,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
   /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 
 
-  return (0, _core.jsx)(_Form.default, {
+  return (0, _react2.jsx)(_Form.default, {
     onSubmit: function onSubmit(data) {
       return onConfirm(data.inlineEdit);
     }
@@ -201,7 +201,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         _onKeyDown = _ref$formProps.onKeyDown,
         onSubmit = _ref$formProps.onSubmit,
         formRef = _ref$formProps.ref;
-    return (0, _core.jsx)("form", {
+    return (0, _react2.jsx)("form", {
       onKeyDown: function onKeyDown(e) {
         _onKeyDown(e);
 
@@ -211,7 +211,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       },
       onSubmit: onSubmit,
       ref: formRef
-    }, shouldBeEditing ? (0, _core.jsx)(_Field.default, {
+    }, shouldBeEditing ? (0, _react2.jsx)(_Field.default, {
       name: "inlineEdit",
       label: label,
       defaultValue: defaultValue,
@@ -222,7 +222,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
     }, function (_ref2) {
       var fieldProps = _ref2.fieldProps,
           error = _ref2.error;
-      return (0, _core.jsx)("div", {
+      return (0, _react2.jsx)("div", {
         css: fieldStyles,
         onBlur: function onBlur() {
           onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
@@ -230,7 +230,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         onFocus: onEditViewWrapperFocus
       }, editView(_objectSpread(_objectSpread({}, fieldProps), {}, {
         errorMessage: error
-      }), editViewRef), !hideActionButtons ? (0, _core.jsx)(_buttons.default, {
+      }), editViewRef), !hideActionButtons ? (0, _react2.jsx)(_buttons.default, {
         cancelButtonLabel: cancelButtonLabel,
         confirmButtonLabel: confirmButtonLabel,
         onMouseDown: function onMouseDown() {
@@ -241,13 +241,13 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
         onCancelClick: onCancelClick
       }) :
       /** This is to allow Ctrl + Enter to submit without action buttons */
-      (0, _core.jsx)("button", {
+      (0, _react2.jsx)("button", {
         css: buttonStyles,
         type: "submit"
       }));
     }) :
     /** Field is used here only for the label */
-    (0, _core.jsx)(_Field.default, {
+    (0, _react2.jsx)(_Field.default, {
       name: "inlineEdit",
       label: label,
       defaultValue: "",
@@ -260,9 +260,9 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
 };
 
 var InlineEdit = function InlineEdit(props) {
-  return (0, _core.jsx)(_components.default.Consumer, null, function (tokens) {
+  return (0, _react2.jsx)(_components.default.Consumer, null, function (tokens) {
     var mode = tokens.mode;
-    return (0, _core.jsx)(InnerInlineEdit, (0, _extends2.default)({}, props, {
+    return (0, _react2.jsx)(InnerInlineEdit, (0, _extends2.default)({}, props, {
       mode: mode
     }));
   });

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

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 
@@ -26,11 +26,11 @@ var _inlineEdit = _interopRequireDefault(require("./inline-edit"));
 var _constants = require("./internal/constants");
 
 var _excluded = ["errorMessage", "isInvalid"];
-var errorIconContainerStyles = (0, _core.css)({
+var errorIconContainerStyles = (0, _react.css)({
   paddingRight: _constants.gridSize - 2,
   lineHeight: '100%'
 });
-var readViewForTextFieldStyles = (0, _core.css)({
+var readViewForTextFieldStyles = (0, _react.css)({
   display: 'flex',
   maxWidth: '100%',
   minHeight: "".concat(_constants.gridSize * 2.5 / _constants.fontSize, "em"),
@@ -39,7 +39,7 @@ var readViewForTextFieldStyles = (0, _core.css)({
   lineHeight: _constants.gridSize * 2.5 / _constants.fontSize,
   wordBreak: 'break-word'
 });
-var compactStyles = (0, _core.css)({
+var compactStyles = (0, _react.css)({
   padding: "".concat(_constants.gridSize / 2, "px ").concat(_constants.gridSize - 2, "px")
 });
 
@@ -49,22 +49,22 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
       defaultValue = props.defaultValue,
       placeholder = props.placeholder,
       testId = props.testId;
-  return (0, _core.jsx)(_inlineEdit.default, (0, _extends2.default)({}, props, {
+  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);
-      return (0, _core.jsx)(_inlineDialog.default, {
+      return (0, _react.jsx)(_inlineDialog.default, {
         isOpen: isInvalid,
-        content: (0, _core.jsx)("div", {
+        content: (0, _react.jsx)("div", {
           id: "error-message"
         }, errorMessage),
         placement: "right"
-      }, (0, _core.jsx)(_textfield.default, (0, _extends2.default)({}, props, {
-        elemAfterInput: isInvalid && (0, _core.jsx)("div", {
+      }, (0, _react.jsx)(_textfield.default, (0, _extends2.default)({}, props, {
+        elemAfterInput: isInvalid && (0, _react.jsx)("div", {
           css: errorIconContainerStyles
-        }, (0, _core.jsx)(_error.default, {
+        }, (0, _react.jsx)(_error.default, {
           label: "error",
           primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
         })),
@@ -74,7 +74,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
       })));
     },
     readView: function readView() {
-      return (0, _core.jsx)("div", {
+      return (0, _react.jsx)("div", {
         css: [readViewForTextFieldStyles, isCompact && compactStyles],
         "data-compact": isCompact,
         "data-testid": testId && "read-view-".concat(testId)

package/dist/cjs/internal/buttons.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
@@ -20,7 +20,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("./constants");
 
 /** @jsx jsx */
-var buttonsContainerStyles = (0, _core.css)({
+var buttonsContainerStyles = (0, _react.css)({
   display: 'flex',
   marginTop: _constants.gridSize - 2,
   position: 'absolute',
@@ -28,13 +28,41 @@ var buttonsContainerStyles = (0, _core.css)({
   right: 0,
   flexShrink: 0
 });
-var buttonWrapperElevationDarkStyles = (0, _core.css)({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")")
+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
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.DN70, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.DN60, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(_colors.B75, ")"),
+    color: "var(--ds-text, ".concat(_colors.B400, ")")
+  }
 });
-var buttonWrapperElevationLightStyles = (0, _core.css)({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
+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
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N20A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(_colors.N30A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
+    color: "var(--ds-text, ".concat(_colors.B400, ")")
+  }
 });
-var buttonWrapperBaseStyles = (0, _core.css)({
+var buttonWrapperBaseStyles = (0, _react.css)({
   boxSizing: 'border-box',
   width: _constants.gridSize * 4,
   zIndex: 200,
@@ -52,24 +80,24 @@ var Buttons = function Buttons(_ref) {
       cancelButtonLabel = _ref.cancelButtonLabel,
       onMouseDown = _ref.onMouseDown,
       onCancelClick = _ref.onCancelClick;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: buttonsContainerStyles
-  }, (0, _core.jsx)("div", {
+  }, (0, _react.jsx)("div", {
     css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
-  }, (0, _core.jsx)(_standardButton.default, {
+  }, (0, _react.jsx)(_standardButton.default, {
     "aria-label": confirmButtonLabel,
     type: "submit",
-    iconBefore: (0, _core.jsx)(_check.default, {
+    iconBefore: (0, _react.jsx)(_check.default, {
       label: confirmButtonLabel,
       size: "small"
     }),
     shouldFitContainer: true,
     onMouseDown: onMouseDown
-  })), (0, _core.jsx)("div", {
+  })), (0, _react.jsx)("div", {
     css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
-  }, (0, _core.jsx)(_standardButton.default, {
+  }, (0, _react.jsx)(_standardButton.default, {
     "aria-label": cancelButtonLabel,
-    iconBefore: (0, _core.jsx)(_cross.default, {
+    iconBefore: (0, _react.jsx)(_cross.default, {
       label: cancelButtonLabel,
       size: "small"
     }),

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -20,10 +20,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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, _core.css)({
+var readViewContainerStyles = (0, _react2.css)({
   lineHeight: 1
 });
-var editButtonStyles = (0, _core.css)({
+var editButtonStyles = (0, _react2.css)({
   display: 'block',
   margin: '0',
   padding: '0',
@@ -36,7 +36,7 @@ var editButtonStyles = (0, _core.css)({
     border: "2px solid ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
   }
 });
-var readViewWrapperStyles = (0, _core.css)({
+var readViewWrapperStyles = (0, _react2.css)({
   display: 'inline-block',
   boxSizing: 'border-box',
   width: 'auto',
@@ -48,7 +48,7 @@ var readViewWrapperStyles = (0, _core.css)({
     background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
   }
 });
-var readViewFitContainerWidthStyles = (0, _core.css)({
+var readViewFitContainerWidthStyles = (0, _react2.css)({
   width: '100%'
 });
 var DRAG_THRESHOLD = 5;
@@ -80,15 +80,15 @@ var ReadView = function ReadView(_ref) {
   /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions */
 
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: readViewContainerStyles
-  }, (0, _core.jsx)("button", {
+  }, (0, _react2.jsx)("button", {
     css: editButtonStyles,
     "aria-label": editButtonLabel,
     type: "button",
     onClick: onEditRequested,
     ref: editButtonRef
-  }), (0, _core.jsx)("div", {
+  }), (0, _react2.jsx)("div", {
     css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles],
     onClick: onReadViewClick,
     onMouseDown: function onMouseDown(e) {

package/dist/cjs/version.json

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

package/dist/es2019/inline-edit.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React, { useCallback, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Field from '@atlaskit/form/Field';
 import Form from '@atlaskit/form/Form';
@@ -20,7 +20,7 @@ const buttonStyles = css({
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.1.14"
+  packageVersion: "12.2.1"
 };
 
 const noop = () => {};

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
 import Textfield from '@atlaskit/textfield';

package/dist/es2019/internal/buttons.js

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
-import { DN50A, DN60A, N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { B400, B75, DN50A, DN60, DN60A, DN70, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
 import { fontSize, gridSize } from './constants';
 const buttonsContainerStyles = css({
   display: 'flex',
@@ -14,10 +14,38 @@ const buttonsContainerStyles = css({
   flexShrink: 0
 });
 const buttonWrapperElevationDarkStyles = css({
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`
+  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
+  '& > button': {
+    backgroundColor: `var(--ds-surface-overlay, ${DN70})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: `var(--ds-surface-overlay-hovered, ${DN60})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: `var(--ds-surface-overlay-pressed, ${B75})`,
+    color: `var(--ds-text, ${B400})`
+  }
 });
 const buttonWrapperElevationLightStyles = css({
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`
+  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
+  '& > button': {
+    backgroundColor: `var(--ds-surface-overlay, ${N20A})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: `var(--ds-surface-overlay-hovered, ${N30A})`
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
+    color: `var(--ds-text, ${B400})`
+  }
 });
 const buttonWrapperBaseStyles = css({
   boxSizing: 'border-box',

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { useRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B100, N30 } from '@atlaskit/theme/colors';
 import { borderRadius } from './constants';
 const readViewContainerStyles = css({

package/dist/es2019/version.json

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

package/dist/esm/inline-edit.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import React, { useCallback, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import Field from '@atlaskit/form/Field';
 import Form from '@atlaskit/form/Form';
@@ -26,7 +26,7 @@ var buttonStyles = css({
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.1.14"
+  packageVersion: "12.2.1"
 };
 
 var noop = function noop() {};

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["errorMessage", "isInvalid"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
 import Textfield from '@atlaskit/textfield';

package/dist/esm/internal/buttons.js

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
-import { DN50A, DN60A, N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { B400, B75, DN50A, DN60, DN60A, DN70, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
 import { fontSize, gridSize } from './constants';
 var buttonsContainerStyles = css({
   display: 'flex',
@@ -14,10 +14,38 @@ var buttonsContainerStyles = css({
   flexShrink: 0
 });
 var buttonWrapperElevationDarkStyles = css({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")")
+  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
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(DN70, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(DN60, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, ".concat(B75, ")"),
+    color: "var(--ds-text, ".concat(B400, ")")
+  }
 });
 var buttonWrapperElevationLightStyles = css({
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
+  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
+  '& > button': {
+    backgroundColor: "var(--ds-surface-overlay, ".concat(N20A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:hover': {
+    backgroundColor: "var(--ds-surface-overlay-hovered, ".concat(N30A, ")")
+  },
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& > button:active': {
+    backgroundColor: "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))",
+    color: "var(--ds-text, ".concat(B400, ")")
+  }
 });
 var buttonWrapperBaseStyles = css({
   boxSizing: 'border-box',

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { useRef } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { B100, N30 } from '@atlaskit/theme/colors';
 import { borderRadius } from './constants';
 var readViewContainerStyles = css({

package/dist/esm/version.json

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

package/dist/types/inline-edit.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { InlineEditProps } from './types';
-declare const InlineEdit: <FieldValue extends unknown = string>(props: InlineEditProps<FieldValue>) => JSX.Element;
+declare const InlineEdit: <FieldValue extends unknown = string>(props: InlineEditProps<FieldValue>) => jsx.JSX.Element;
 export default InlineEdit;

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

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

package/dist/types/internal/buttons.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 /// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { ThemeModes } from '@atlaskit/theme/types';
 interface ButtonsProp {
     mode: ThemeModes;
@@ -8,5 +9,5 @@ interface ButtonsProp {
     onMouseDown: () => void;
     onCancelClick: (event: React.MouseEvent<HTMLElement>) => void;
 }
-declare const Buttons: ({ mode, confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, }: ButtonsProp) => JSX.Element;
+declare const Buttons: ({ mode, confirmButtonLabel, cancelButtonLabel, onMouseDown, onCancelClick, }: ButtonsProp) => jsx.JSX.Element;
 export default Buttons;

package/dist/types/internal/read-view.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 interface ReadViewProps {
     editButtonLabel: string;
     onEditRequested: () => void;
@@ -8,5 +9,5 @@ interface ReadViewProps {
     readViewFitContainerWidth?: boolean;
     readView: () => React.ReactNode;
 }
-declare const ReadView: ({ editButtonLabel, onEditRequested, postReadViewClick, editButtonRef, readViewFitContainerWidth, readView, }: ReadViewProps) => JSX.Element;
+declare const ReadView: ({ editButtonLabel, onEditRequested, postReadViewClick, editButtonRef, readViewFitContainerWidth, readView, }: ReadViewProps) => jsx.JSX.Element;
 export default ReadView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.1.14",
+  "version": "12.2.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/"
@@ -29,31 +29,31 @@
     "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/form": "^8.5.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/inline-dialog": "^13.3.0",
-    "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/inline-dialog": "^13.4.0",
+    "@atlaskit/textfield": "^5.2.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/datetime-picker": "^12.1.0",
+    "@atlaskit/datetime-picker": "^12.2.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/section-message": "^6.1.0",
-    "@atlaskit/select": "^15.6.0",
+    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tag": "^11.3.0",
-    "@atlaskit/tag-group": "^10.0.0",
+    "@atlaskit/tag": "^11.4.0",
+    "@atlaskit/tag-group": "^10.1.0",
     "@atlaskit/textarea": "^4.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@emotion/styled": "^10.0.7",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/react": "^8.0.1",
+    "@emotion/styled": "^11.0.0",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^12.1.5",
     "ast-types": "^0.13.3",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",