@atlaskit/inline-edit 12.1.7 → 12.1.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/inline-edit
 
+## 12.1.8
+
+### Patch Changes
+
+- [`f65c4ec35c9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f65c4ec35c9) - Rewrite dynamic styles to be static to aid compiled migration.
+- Updated dependencies
+
 ## 12.1.7
 
 ### Patch Changes

package/dist/cjs/inline-edit.js

@@ -11,8 +11,6 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -35,8 +33,6 @@ var _useButtonFocusHook2 = _interopRequireDefault(require("./internal/hooks/use-
 
 var _readView = _interopRequireDefault(require("./internal/read-view"));
 
-var _templateObject, _templateObject2;
-
 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; }
@@ -45,10 +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)({
+  maxWidth: '100%',
+  position: 'relative'
+});
+var buttonStyles = (0, _core.css)({
+  display: 'none'
+});
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.1.7"
+  packageVersion: "12.1.8"
 };
 
 var noop = function noop() {};
@@ -220,7 +223,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       var fieldProps = _ref2.fieldProps,
           error = _ref2.error;
       return (0, _core.jsx)("div", {
-        css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n                    max-width: 100%;\n                    position: relative;\n                  "]))),
+        css: fieldStyles,
         onBlur: function onBlur() {
           onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
         },
@@ -239,7 +242,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       }) :
       /** This is to allow Ctrl + Enter to submit without action buttons */
       (0, _core.jsx)("button", {
-        css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n                        display: none;\n                      "]))),
+        css: buttonStyles,
         type: "submit"
       }));
     }) :

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

@@ -23,9 +23,25 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _inlineEdit = _interopRequireDefault(require("./inline-edit"));
 
-var _styles = require("./internal/styles");
+var _constants = require("./internal/constants");
 
 var _excluded = ["errorMessage", "isInvalid"];
+var errorIconContainerStyles = (0, _core.css)({
+  paddingRight: _constants.gridSize - 2,
+  lineHeight: '100%'
+});
+var readViewForTextFieldStyles = (0, _core.css)({
+  display: 'flex',
+  maxWidth: '100%',
+  minHeight: "".concat(_constants.gridSize * 2.5 / _constants.fontSize, "em"),
+  padding: "".concat(_constants.gridSize, "px ").concat(_constants.gridSize - 2, "px"),
+  fontSize: _constants.fontSize,
+  lineHeight: _constants.gridSize * 2.5 / _constants.fontSize,
+  wordBreak: 'break-word'
+});
+var compactStyles = (0, _core.css)({
+  padding: "".concat(_constants.gridSize / 2, "px ").concat(_constants.gridSize - 2, "px")
+});
 
 var InlineEditableTextfield = function InlineEditableTextfield(props) {
   var _props$isCompact = props.isCompact,
@@ -47,7 +63,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
         placement: "right"
       }, (0, _core.jsx)(_textfield.default, (0, _extends2.default)({}, props, {
         elemAfterInput: isInvalid && (0, _core.jsx)("div", {
-          css: _styles.errorIconContainerStyles
+          css: errorIconContainerStyles
         }, (0, _core.jsx)(_error.default, {
           label: "error",
           primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
@@ -59,7 +75,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
     },
     readView: function readView() {
       return (0, _core.jsx)("div", {
-        css: _styles.readViewForTextFieldStyles,
+        css: [readViewForTextFieldStyles, isCompact && compactStyles],
         "data-compact": isCompact,
         "data-testid": testId && "read-view-".concat(testId)
       }, defaultValue || placeholder);

package/dist/cjs/internal/buttons.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = require("react");
-
 var _core = require("@emotion/core");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
@@ -17,22 +15,47 @@ var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
 
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 
-var _styles = require("./styles");
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("./constants");
 
 /** @jsx jsx */
+var buttonsContainerStyles = (0, _core.css)({
+  display: 'flex',
+  marginTop: _constants.gridSize - 2,
+  position: 'absolute',
+  top: '100%',
+  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 buttonWrapperElevationLightStyles = (0, _core.css)({
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
+});
+var buttonWrapperBaseStyles = (0, _core.css)({
+  boxSizing: 'border-box',
+  width: _constants.gridSize * 4,
+  zIndex: 200,
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  borderRadius: _constants.gridSize / 2 - 1,
+  fontSize: _constants.fontSize,
+  '&:last-child': {
+    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;
-  var buttonWrapperStyles = (0, _react.useMemo)(function () {
-    return (0, _styles.getButtonWrapperStyles)(mode);
-  }, [mode]);
   return (0, _core.jsx)("div", {
-    css: _styles.buttonsContainerStyles
+    css: buttonsContainerStyles
   }, (0, _core.jsx)("div", {
-    css: buttonWrapperStyles
+    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
   }, (0, _core.jsx)(_standardButton.default, {
     "aria-label": confirmButtonLabel,
     type: "submit",
@@ -43,7 +66,7 @@ var Buttons = function Buttons(_ref) {
     shouldFitContainer: true,
     onMouseDown: onMouseDown
   })), (0, _core.jsx)("div", {
-    css: buttonWrapperStyles
+    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
   }, (0, _core.jsx)(_standardButton.default, {
     "aria-label": cancelButtonLabel,
     iconBefore: (0, _core.jsx)(_cross.default, {

package/dist/cjs/internal/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+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)();
+exports.fontSize = fontSize;
+var borderRadius = (0, _constants.borderRadius)();
+exports.borderRadius = borderRadius;

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

@@ -11,13 +11,46 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
-var _styles = require("./styles");
+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, _core.css)({
+  lineHeight: 1
+});
+var editButtonStyles = (0, _core.css)({
+  display: 'block',
+  margin: '0',
+  padding: '0',
+  appearance: 'none',
+  background: 'transparent',
+  border: 0,
+  lineHeight: 1,
+  outline: '0',
+  '&:focus + div': {
+    border: "2px solid ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
+  }
+});
+var readViewWrapperStyles = (0, _core.css)({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  border: '2px solid transparent',
+  borderRadius: _constants.borderRadius,
+  transition: 'background 0.2s',
+  '&:hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
+  }
+});
+var readViewFitContainerWidthStyles = (0, _core.css)({
+  width: '100%'
+});
 var DRAG_THRESHOLD = 5;
 
 var ReadView = function ReadView(_ref) {
@@ -48,15 +81,15 @@ var ReadView = function ReadView(_ref) {
 
 
   return (0, _core.jsx)("div", {
-    css: _styles.readViewContainerStyles
+    css: readViewContainerStyles
   }, (0, _core.jsx)("button", {
-    css: _styles.editButtonStyles,
+    css: editButtonStyles,
     "aria-label": editButtonLabel,
     type: "button",
     onClick: onEditRequested,
     ref: editButtonRef
   }), (0, _core.jsx)("div", {
-    css: _styles.readViewWrapperStyles,
+    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles],
     onClick: onReadViewClick,
     onMouseDown: function onMouseDown(e) {
       startX.current = e.clientX;

package/dist/cjs/version.json

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

package/dist/es2019/inline-edit.js

@@ -10,10 +10,17 @@ import GlobalTheme from '@atlaskit/theme/components';
 import Buttons from './internal/buttons';
 import useButtonFocusHook from './internal/hooks/use-button-focus-hook';
 import ReadView from './internal/read-view';
+const fieldStyles = css({
+  maxWidth: '100%',
+  position: 'relative'
+});
+const buttonStyles = css({
+  display: 'none'
+});
 const analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.1.7"
+  packageVersion: "12.1.8"
 };
 
 const noop = () => {};
@@ -169,10 +176,7 @@ const InnerInlineEdit = props => {
     fieldProps,
     error
   }) => jsx("div", {
-    css: css`
-                    max-width: 100%;
-                    position: relative;
-                  `,
+    css: fieldStyles,
     onBlur: () => {
       onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
     },
@@ -191,9 +195,7 @@ const InnerInlineEdit = props => {
   }) :
   /** This is to allow Ctrl + Enter to submit without action buttons */
   jsx("button", {
-    css: css`
-                        display: none;
-                      `,
+    css: buttonStyles,
     type: "submit"
   }))) :
   /** Field is used here only for the label */

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

@@ -1,13 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
 import Textfield from '@atlaskit/textfield';
 import { R400 } from '@atlaskit/theme/colors';
 import InlineEdit from './inline-edit';
-import { errorIconContainerStyles, readViewForTextFieldStyles } from './internal/styles';
+import { fontSize, gridSize } from './internal/constants';
+const errorIconContainerStyles = css({
+  paddingRight: gridSize - 2,
+  lineHeight: '100%'
+});
+const readViewForTextFieldStyles = css({
+  display: 'flex',
+  maxWidth: '100%',
+  minHeight: `${gridSize * 2.5 / fontSize}em`,
+  padding: `${gridSize}px ${gridSize - 2}px`,
+  fontSize: fontSize,
+  lineHeight: gridSize * 2.5 / fontSize,
+  wordBreak: 'break-word'
+});
+const compactStyles = css({
+  padding: `${gridSize / 2}px ${gridSize - 2}px`
+});
 
 const InlineEditableTextfield = props => {
   const {
@@ -40,7 +56,7 @@ const InlineEditableTextfield = props => {
       autoFocus: true
     }))),
     readView: () => jsx("div", {
-      css: readViewForTextFieldStyles,
+      css: [readViewForTextFieldStyles, isCompact && compactStyles],
       "data-compact": isCompact,
       "data-testid": testId && `read-view-${testId}`
     }, defaultValue || placeholder)

package/dist/es2019/internal/buttons.js

@@ -1,10 +1,35 @@
 /** @jsx jsx */
-import { useMemo } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
-import { buttonsContainerStyles, getButtonWrapperStyles } from './styles';
+import { DN50A, DN60A, N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { fontSize, gridSize } from './constants';
+const buttonsContainerStyles = css({
+  display: 'flex',
+  marginTop: gridSize - 2,
+  position: 'absolute',
+  top: '100%',
+  right: 0,
+  flexShrink: 0
+});
+const buttonWrapperElevationDarkStyles = css({
+  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`
+});
+const buttonWrapperElevationLightStyles = css({
+  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`
+});
+const buttonWrapperBaseStyles = css({
+  boxSizing: 'border-box',
+  width: gridSize * 4,
+  zIndex: 200,
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  borderRadius: gridSize / 2 - 1,
+  fontSize: fontSize,
+  '&:last-child': {
+    marginLeft: gridSize / 2
+  }
+});
 
 const Buttons = ({
   mode,
@@ -13,11 +38,10 @@ const Buttons = ({
   onMouseDown,
   onCancelClick
 }) => {
-  const buttonWrapperStyles = useMemo(() => getButtonWrapperStyles(mode), [mode]);
   return jsx("div", {
     css: buttonsContainerStyles
   }, jsx("div", {
-    css: buttonWrapperStyles
+    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
   }, jsx(Button, {
     "aria-label": confirmButtonLabel,
     type: "submit",
@@ -28,7 +52,7 @@ const Buttons = ({
     shouldFitContainer: true,
     onMouseDown: onMouseDown
   })), jsx("div", {
-    css: buttonWrapperStyles
+    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
   }, jsx(Button, {
     "aria-label": cancelButtonLabel,
     iconBefore: jsx(CancelIcon, {

package/dist/es2019/internal/constants.js

@@ -0,0 +1,4 @@
+import { borderRadius as getBorderRadius, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
+export const gridSize = getGridSize();
+export const fontSize = getFontSize();
+export const borderRadius = getBorderRadius();

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

@@ -1,7 +1,39 @@
 /** @jsx jsx */
 import React, { useRef } from 'react';
-import { jsx } from '@emotion/core';
-import { editButtonStyles, readViewContainerStyles, readViewWrapperStyles } from './styles';
+import { css, jsx } from '@emotion/core';
+import { B100, N30 } from '@atlaskit/theme/colors';
+import { borderRadius } from './constants';
+const readViewContainerStyles = css({
+  lineHeight: 1
+});
+const editButtonStyles = css({
+  display: 'block',
+  margin: '0',
+  padding: '0',
+  appearance: 'none',
+  background: 'transparent',
+  border: 0,
+  lineHeight: 1,
+  outline: '0',
+  '&:focus + div': {
+    border: `2px solid ${`var(--ds-border-focused, ${B100})`}`
+  }
+});
+const readViewWrapperStyles = css({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  border: '2px solid transparent',
+  borderRadius: borderRadius,
+  transition: 'background 0.2s',
+  '&:hover': {
+    background: `var(--ds-background-neutral-subtle-hovered, ${N30})`
+  }
+});
+const readViewFitContainerWidthStyles = css({
+  width: '100%'
+});
 const DRAG_THRESHOLD = 5;
 
 const ReadView = ({
@@ -41,7 +73,7 @@ const ReadView = ({
     onClick: onEditRequested,
     ref: editButtonRef
   }), jsx("div", {
-    css: readViewWrapperStyles,
+    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles],
     onClick: onReadViewClick,
     onMouseDown: e => {
       startX.current = e.clientX;

package/dist/es2019/version.json

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

package/dist/esm/inline-edit.js

@@ -1,10 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-var _templateObject, _templateObject2;
-
 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; }
@@ -19,10 +16,17 @@ import GlobalTheme from '@atlaskit/theme/components';
 import Buttons from './internal/buttons';
 import useButtonFocusHook from './internal/hooks/use-button-focus-hook';
 import ReadView from './internal/read-view';
+var fieldStyles = css({
+  maxWidth: '100%',
+  position: 'relative'
+});
+var buttonStyles = css({
+  display: 'none'
+});
 var analyticsAttributes = {
   componentName: 'inlineEdit',
   packageName: "@atlaskit/inline-edit",
-  packageVersion: "12.1.7"
+  packageVersion: "12.1.8"
 };
 
 var noop = function noop() {};
@@ -194,7 +198,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       var fieldProps = _ref2.fieldProps,
           error = _ref2.error;
       return jsx("div", {
-        css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    max-width: 100%;\n                    position: relative;\n                  "]))),
+        css: fieldStyles,
         onBlur: function onBlur() {
           onEditViewWrapperBlur(fieldProps.isInvalid, onSubmit, formRef);
         },
@@ -213,7 +217,7 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
       }) :
       /** This is to allow Ctrl + Enter to submit without action buttons */
       jsx("button", {
-        css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                        display: none;\n                      "]))),
+        css: buttonStyles,
         type: "submit"
       }));
     }) :

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

@@ -3,13 +3,29 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["errorMessage", "isInvalid"];
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InlineDialog from '@atlaskit/inline-dialog';
 import Textfield from '@atlaskit/textfield';
 import { R400 } from '@atlaskit/theme/colors';
 import InlineEdit from './inline-edit';
-import { errorIconContainerStyles, readViewForTextFieldStyles } from './internal/styles';
+import { fontSize, gridSize } from './internal/constants';
+var errorIconContainerStyles = css({
+  paddingRight: gridSize - 2,
+  lineHeight: '100%'
+});
+var readViewForTextFieldStyles = css({
+  display: 'flex',
+  maxWidth: '100%',
+  minHeight: "".concat(gridSize * 2.5 / fontSize, "em"),
+  padding: "".concat(gridSize, "px ").concat(gridSize - 2, "px"),
+  fontSize: fontSize,
+  lineHeight: gridSize * 2.5 / fontSize,
+  wordBreak: 'break-word'
+});
+var compactStyles = css({
+  padding: "".concat(gridSize / 2, "px ").concat(gridSize - 2, "px")
+});
 
 var InlineEditableTextfield = function InlineEditableTextfield(props) {
   var _props$isCompact = props.isCompact,
@@ -44,7 +60,7 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
     },
     readView: function readView() {
       return jsx("div", {
-        css: readViewForTextFieldStyles,
+        css: [readViewForTextFieldStyles, isCompact && compactStyles],
         "data-compact": isCompact,
         "data-testid": testId && "read-view-".concat(testId)
       }, defaultValue || placeholder);

package/dist/esm/internal/buttons.js

@@ -1,10 +1,35 @@
 /** @jsx jsx */
-import { useMemo } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import Button from '@atlaskit/button/standard-button';
 import ConfirmIcon from '@atlaskit/icon/glyph/check';
 import CancelIcon from '@atlaskit/icon/glyph/cross';
-import { buttonsContainerStyles, getButtonWrapperStyles } from './styles';
+import { DN50A, DN60A, N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { fontSize, gridSize } from './constants';
+var buttonsContainerStyles = css({
+  display: 'flex',
+  marginTop: gridSize - 2,
+  position: 'absolute',
+  top: '100%',
+  right: 0,
+  flexShrink: 0
+});
+var buttonWrapperElevationDarkStyles = css({
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")")
+});
+var buttonWrapperElevationLightStyles = css({
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
+});
+var buttonWrapperBaseStyles = css({
+  boxSizing: 'border-box',
+  width: gridSize * 4,
+  zIndex: 200,
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  borderRadius: gridSize / 2 - 1,
+  fontSize: fontSize,
+  '&:last-child': {
+    marginLeft: gridSize / 2
+  }
+});
 
 var Buttons = function Buttons(_ref) {
   var mode = _ref.mode,
@@ -12,13 +37,10 @@ var Buttons = function Buttons(_ref) {
       cancelButtonLabel = _ref.cancelButtonLabel,
       onMouseDown = _ref.onMouseDown,
       onCancelClick = _ref.onCancelClick;
-  var buttonWrapperStyles = useMemo(function () {
-    return getButtonWrapperStyles(mode);
-  }, [mode]);
   return jsx("div", {
     css: buttonsContainerStyles
   }, jsx("div", {
-    css: buttonWrapperStyles
+    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
   }, jsx(Button, {
     "aria-label": confirmButtonLabel,
     type: "submit",
@@ -29,7 +51,7 @@ var Buttons = function Buttons(_ref) {
     shouldFitContainer: true,
     onMouseDown: onMouseDown
   })), jsx("div", {
-    css: buttonWrapperStyles
+    css: [buttonWrapperBaseStyles, mode === 'light' ? buttonWrapperElevationLightStyles : buttonWrapperElevationDarkStyles]
   }, jsx(Button, {
     "aria-label": cancelButtonLabel,
     iconBefore: jsx(CancelIcon, {

package/dist/esm/internal/constants.js

@@ -0,0 +1,4 @@
+import { borderRadius as getBorderRadius, fontSize as getFontSize, gridSize as getGridSize } from '@atlaskit/theme/constants';
+export var gridSize = getGridSize();
+export var fontSize = getFontSize();
+export var borderRadius = getBorderRadius();

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

@@ -1,7 +1,39 @@
 /** @jsx jsx */
 import React, { useRef } from 'react';
-import { jsx } from '@emotion/core';
-import { editButtonStyles, readViewContainerStyles, readViewWrapperStyles } from './styles';
+import { css, jsx } from '@emotion/core';
+import { B100, N30 } from '@atlaskit/theme/colors';
+import { borderRadius } from './constants';
+var readViewContainerStyles = css({
+  lineHeight: 1
+});
+var editButtonStyles = css({
+  display: 'block',
+  margin: '0',
+  padding: '0',
+  appearance: 'none',
+  background: 'transparent',
+  border: 0,
+  lineHeight: 1,
+  outline: '0',
+  '&:focus + div': {
+    border: "2px solid ".concat("var(--ds-border-focused, ".concat(B100, ")"))
+  }
+});
+var readViewWrapperStyles = css({
+  display: 'inline-block',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  border: '2px solid transparent',
+  borderRadius: borderRadius,
+  transition: 'background 0.2s',
+  '&:hover': {
+    background: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")
+  }
+});
+var readViewFitContainerWidthStyles = css({
+  width: '100%'
+});
 var DRAG_THRESHOLD = 5;
 
 var ReadView = function ReadView(_ref) {
@@ -40,7 +72,7 @@ var ReadView = function ReadView(_ref) {
     onClick: onEditRequested,
     ref: editButtonRef
   }), jsx("div", {
-    css: readViewWrapperStyles,
+    css: [readViewWrapperStyles, readViewFitContainerWidth && readViewFitContainerWidthStyles],
     onClick: onReadViewClick,
     onMouseDown: function onMouseDown(e) {
       startX.current = e.clientX;

package/dist/esm/version.json

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

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

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 /// <reference types="react" />
 import { ThemeModes } from '@atlaskit/theme/types';
 interface ButtonsProp {

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

@@ -0,0 +1,3 @@
+export declare const gridSize: number;
+export declare const fontSize: number;
+export declare const borderRadius: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-edit",
-  "version": "12.1.7",
+  "version": "12.1.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/"
@@ -26,9 +26,9 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/codemod-utils": "^3.4.0",
-    "@atlaskit/form": "^8.4.0",
+    "@atlaskit/form": "^8.5.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/inline-dialog": "^13.2.0",
+    "@atlaskit/inline-dialog": "^13.3.0",
     "@atlaskit/textfield": "^5.1.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.6.0",
@@ -46,7 +46,7 @@
     "@atlaskit/ssr": "*",
     "@atlaskit/tag": "^11.2.0",
     "@atlaskit/tag-group": "^10.0.0",
-    "@atlaskit/textarea": "^4.2.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",
@@ -75,7 +75,8 @@
       "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [
-        "emotion"
+        "emotion",
+        "static"
       ]
     }
   },

package/dist/cjs/internal/styles.js

@@ -1,95 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.readViewWrapperStyles = exports.readViewForTextFieldStyles = exports.readViewContainerStyles = exports.getButtonWrapperStyles = exports.errorIconContainerStyles = exports.editButtonStyles = exports.buttonsContainerStyles = void 0;
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var spacingUnit = (0, _constants.gridSize)();
-var fontSizeUnit = (0, _constants.fontSize)();
-var elevations = {
-  light: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
-  dark: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.DN50A, ", 0 0 1px ").concat(_colors.DN60A), ")")
-};
-var buttonsContainerStyles = {
-  display: 'flex',
-  flexShrink: 0,
-  marginTop: spacingUnit - 2,
-  position: 'absolute',
-  right: 0,
-  top: '100%'
-};
-exports.buttonsContainerStyles = buttonsContainerStyles;
-
-var getButtonWrapperStyles = function getButtonWrapperStyles(mode) {
-  return {
-    boxShadow: elevations[mode],
-    backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
-    width: spacingUnit * 4,
-    zIndex: 200,
-    borderRadius: spacingUnit / 2 - 1,
-    boxSizing: 'border-box',
-    fontSize: fontSizeUnit,
-    '&:last-child': {
-      marginLeft: spacingUnit / 2
-    }
-  };
-};
-
-exports.getButtonWrapperStyles = getButtonWrapperStyles;
-var editButtonStyles = {
-  appearance: 'none',
-  background: 'transparent',
-  border: 0,
-  display: 'block',
-  lineHeight: 1,
-  margin: '0',
-  padding: '0',
-  outline: '0',
-  '&:focus + div': {
-    border: "2px solid ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
-  }
-};
-exports.editButtonStyles = editButtonStyles;
-var errorIconContainerStyles = {
-  lineHeight: '100%',
-  paddingRight: spacingUnit - 2
-};
-exports.errorIconContainerStyles = errorIconContainerStyles;
-var readViewForTextFieldStyles = {
-  display: 'flex',
-  fontSize: (0, _constants.fontSize)(),
-  lineHeight: spacingUnit * 2.5 / fontSizeUnit,
-  maxWidth: '100%',
-  minHeight: "".concat(spacingUnit * 2.5 / fontSizeUnit, "em"),
-  padding: "".concat(spacingUnit, "px ").concat(spacingUnit - 2, "px"),
-  '&[data-compact="true"]': {
-    padding: "".concat(spacingUnit / 2, "px ").concat(spacingUnit - 2, "px")
-  },
-  wordBreak: 'break-word'
-};
-exports.readViewForTextFieldStyles = readViewForTextFieldStyles;
-var readViewContainerStyles = {
-  lineHeight: 1
-};
-exports.readViewContainerStyles = readViewContainerStyles;
-var readViewWrapperStyles = {
-  boxSizing: 'border-box',
-  border: '2px solid transparent',
-  borderRadius: (0, _constants.borderRadius)(),
-  display: 'inline-block',
-  maxWidth: '100%',
-  transition: 'background 0.2s',
-  width: 'auto',
-  '&[data-read-view-fit-container-width="true"]': {
-    width: '100%'
-  },
-  '&:hover': {
-    background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
-  }
-};
-exports.readViewWrapperStyles = readViewWrapperStyles;

package/dist/es2019/internal/styles.js

@@ -1,75 +0,0 @@
-import { B100, DN50A, DN60A, N0, N30, N50A, N60A } from '@atlaskit/theme/colors';
-import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-const spacingUnit = gridSize();
-const fontSizeUnit = fontSize();
-const elevations = {
-  light: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
-  dark: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${DN50A}, 0 0 1px ${DN60A}`})`
-};
-export const buttonsContainerStyles = {
-  display: 'flex',
-  flexShrink: 0,
-  marginTop: spacingUnit - 2,
-  position: 'absolute',
-  right: 0,
-  top: '100%'
-};
-export const getButtonWrapperStyles = mode => ({
-  boxShadow: elevations[mode],
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  width: spacingUnit * 4,
-  zIndex: 200,
-  borderRadius: spacingUnit / 2 - 1,
-  boxSizing: 'border-box',
-  fontSize: fontSizeUnit,
-  '&:last-child': {
-    marginLeft: spacingUnit / 2
-  }
-});
-export const editButtonStyles = {
-  appearance: 'none',
-  background: 'transparent',
-  border: 0,
-  display: 'block',
-  lineHeight: 1,
-  margin: '0',
-  padding: '0',
-  outline: '0',
-  '&:focus + div': {
-    border: `2px solid ${`var(--ds-border-focused, ${B100})`}`
-  }
-};
-export const errorIconContainerStyles = {
-  lineHeight: '100%',
-  paddingRight: spacingUnit - 2
-};
-export const readViewForTextFieldStyles = {
-  display: 'flex',
-  fontSize: fontSize(),
-  lineHeight: spacingUnit * 2.5 / fontSizeUnit,
-  maxWidth: '100%',
-  minHeight: `${spacingUnit * 2.5 / fontSizeUnit}em`,
-  padding: `${spacingUnit}px ${spacingUnit - 2}px`,
-  '&[data-compact="true"]': {
-    padding: `${spacingUnit / 2}px ${spacingUnit - 2}px`
-  },
-  wordBreak: 'break-word'
-};
-export const readViewContainerStyles = {
-  lineHeight: 1
-};
-export const readViewWrapperStyles = {
-  boxSizing: 'border-box',
-  border: '2px solid transparent',
-  borderRadius: borderRadius(),
-  display: 'inline-block',
-  maxWidth: '100%',
-  transition: 'background 0.2s',
-  width: 'auto',
-  '&[data-read-view-fit-container-width="true"]': {
-    width: '100%'
-  },
-  '&:hover': {
-    background: `var(--ds-background-neutral-subtle-hovered, ${N30})`
-  }
-};

package/dist/esm/internal/styles.js

@@ -1,77 +0,0 @@
-import { B100, DN50A, DN60A, N0, N30, N50A, N60A } from '@atlaskit/theme/colors';
-import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
-var spacingUnit = gridSize();
-var fontSizeUnit = fontSize();
-var elevations = {
-  light: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
-  dark: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(DN50A, ", 0 0 1px ").concat(DN60A), ")")
-};
-export var buttonsContainerStyles = {
-  display: 'flex',
-  flexShrink: 0,
-  marginTop: spacingUnit - 2,
-  position: 'absolute',
-  right: 0,
-  top: '100%'
-};
-export var getButtonWrapperStyles = function getButtonWrapperStyles(mode) {
-  return {
-    boxShadow: elevations[mode],
-    backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
-    width: spacingUnit * 4,
-    zIndex: 200,
-    borderRadius: spacingUnit / 2 - 1,
-    boxSizing: 'border-box',
-    fontSize: fontSizeUnit,
-    '&:last-child': {
-      marginLeft: spacingUnit / 2
-    }
-  };
-};
-export var editButtonStyles = {
-  appearance: 'none',
-  background: 'transparent',
-  border: 0,
-  display: 'block',
-  lineHeight: 1,
-  margin: '0',
-  padding: '0',
-  outline: '0',
-  '&:focus + div': {
-    border: "2px solid ".concat("var(--ds-border-focused, ".concat(B100, ")"))
-  }
-};
-export var errorIconContainerStyles = {
-  lineHeight: '100%',
-  paddingRight: spacingUnit - 2
-};
-export var readViewForTextFieldStyles = {
-  display: 'flex',
-  fontSize: fontSize(),
-  lineHeight: spacingUnit * 2.5 / fontSizeUnit,
-  maxWidth: '100%',
-  minHeight: "".concat(spacingUnit * 2.5 / fontSizeUnit, "em"),
-  padding: "".concat(spacingUnit, "px ").concat(spacingUnit - 2, "px"),
-  '&[data-compact="true"]': {
-    padding: "".concat(spacingUnit / 2, "px ").concat(spacingUnit - 2, "px")
-  },
-  wordBreak: 'break-word'
-};
-export var readViewContainerStyles = {
-  lineHeight: 1
-};
-export var readViewWrapperStyles = {
-  boxSizing: 'border-box',
-  border: '2px solid transparent',
-  borderRadius: borderRadius(),
-  display: 'inline-block',
-  maxWidth: '100%',
-  transition: 'background 0.2s',
-  width: 'auto',
-  '&[data-read-view-fit-container-width="true"]': {
-    width: '100%'
-  },
-  '&:hover': {
-    background: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")
-  }
-};

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

@@ -1,21 +0,0 @@
-import { CSSObject } from '@emotion/core';
-import { ThemeModes } from '@atlaskit/theme/types';
-export declare const buttonsContainerStyles: CSSObject;
-export declare const getButtonWrapperStyles: (mode: ThemeModes) => CSSObject;
-export declare const editButtonStyles: {
-    appearance: "none";
-    background: string;
-    border: number;
-    display: string;
-    lineHeight: number;
-    margin: string;
-    padding: string;
-    outline: string;
-    '&:focus + div': {
-        border: string;
-    };
-};
-export declare const errorIconContainerStyles: CSSObject;
-export declare const readViewForTextFieldStyles: CSSObject;
-export declare const readViewContainerStyles: CSSObject;
-export declare const readViewWrapperStyles: CSSObject;